MORE CSS

ArrowVark · Sep 3, 2024 · e2d9996 · e2d9996
1 parent bd8cf16
commit e2d9996
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -48,10 +48,10 @@ <h1 class="martinMono">Art</h1>
             </div>
         </div>
 
-        <div class="vl">
-
-            <div class="marker"></div>
-
-        </div>
+        <div class="vl"></div>
+        <div class="marker m1"></div>
+        <div class="marker m2"></div>
+        <div class="marker m3"></div>
+        <div class="marker m4"></div>
     </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -22,7 +22,7 @@ body {
     margin: 0%;
     background-image:
     linear-gradient(transparent 40%, rgb(1, 2, 12) 80%),
-    radial-gradient(circle at top center, rgb(35, 48, 71), transparent);
+    radial-gradient(ellipse at top center, rgb(35, 48, 71), transparent);
 }
 .quickLinks {
     font-size: 20pt;
@@ -164,14 +164,40 @@ p {
     width: 0px;
     box-shadow: 0px 0px 10px white;
 }
-.marker {
+/* .marker {
     border-radius: 100%;
     height: 13px;
     width: 13px;
     background-color: white;
     transform: translateX(-65%) translateY(50px);
     transition-duration: .5s;
     box-shadow: 0px 0px 10px white;
+} */
+.marker {
+    border-radius: 100%;
+    height: 13px;
+    width: 13px;
+    background-color: white;
+    transition-duration: .5s;
+    box-shadow: 0px 0px 10px white;
+    position: absolute;
+    margin-left: calc(50% - 4px);
+}
+.m1 {
+    top: 700px;
+}
+.m2 {
+    top: 900px;
+}
+.m3 {
+    top: 980px;
+}
+.m4 {
+    top: 1140px;
+}
+.marker:hover {
+    transform: scale(2);
+    box-shadow: 0px 0px 6px white;
 }
 /* .marker:hover {
     transition-duration: .5s;