diff --git a/assets/css/main.css b/assets/css/main.css index 07b7ab6..0ed7e0d 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -39,11 +39,44 @@ a:hover { text-decoration-color: rgba(81,81,81,0.4); } +/* ------- Main ------- */ +main { + margin: auto; + display: grid; + grid-template-columns: repeat(4, 25%); + position: relative; + width: 80%; + height: 100vh; +} + +main > a:nth-child(3n+1) { + position: relative; + bottom: calc(10% - 120px); + left: 25px; + width: 220px; + justify-self: center; +} + +main > a:nth-child(3n+2) { + position: relative; + bottom: calc(25% - 40px); + right: 20px; + width: 220px; + justify-self: start; +} + +main > a:nth-child(3n+3) { + position: relative; + bottom: calc(30% - 200px); + left: -30px; + width: 220px; + justify-self: end; +} + /* ------- Eye ------- CSS blinking eye animation from https://codepen.io/creme/pen/rdjXav */ - .eye { margin: 2rem; position: relative; @@ -185,7 +218,6 @@ https://codepen.io/creme/pen/rdjXav background: var(--darkBlue); } - .eye .iris:hover, .eye .iris:focus { cursor: pointer; diff --git a/index.html b/index.html index 1b3e522..a823b40 100644 --- a/index.html +++ b/index.html @@ -50,90 +50,109 @@ -
-
-
-
+
+ +
+
+
+ -
-
-
-
+ +
+
+
+ -
-
-
-
+ +
+
+
+ -
-
-
-
+ +
+
+
+ -
-
-
-
+ +
+
+
+ -
-
-
-
+ +
+
+
+ -
-
-
-
+ +
+
+
+ -
-
-
-
+ +
+
+
+ -
-
-
-
+ +
+
+
+ -
-
-
-
+ +
+
+
+ -
-
-
-
+ +
+
+
+ -
-
-
-
+ +
+
+
+ -
-
-
-
+ +
+
+
+ -
-
-
-
+ +
+
+
+ -
-
-
-
+ +
+
+
+ -
-
-
-
+ +
+
+
+ -
-
-
-
+ +
+
+
+ +