From 3eaf022ac90ff9fe25ba15f21befca24e65d28ca Mon Sep 17 00:00:00 2001 From: "E.L. Guerrero" Date: Sun, 30 Jun 2024 04:23:31 -0400 Subject: [PATCH] feat: add css grid for positioning --- assets/css/main.css | 36 +++++++++- index.html | 155 +++++++++++++++++++++++++------------------- 2 files changed, 121 insertions(+), 70 deletions(-) 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 @@ -
-
-
-
+
+ +
+
+
+ -
-
-
-
+ +
+
+
+ -
-
-
-
+ +
+
+
+ -
-
-
-
+ +
+
+
+ -
-
-
-
+ +
+
+
+ -
-
-
-
+ +
+
+
+ -
-
-
-
+ +
+
+
+ -
-
-
-
+ +
+
+
+ -
-
-
-
+ +
+
+
+ -
-
-
-
+ +
+
+
+ -
-
-
-
+ +
+
+
+ -
-
-
-
+ +
+
+
+ -
-
-
-
+ +
+
+
+ -
-
-
-
+ +
+
+
+ -
-
-
-
+ +
+
+
+ -
-
-
-
+ +
+
+
+ -
-
-
-
+ +
+
+
+ +