From 450f8268fcecdb6c7d505751486c443510b35618 Mon Sep 17 00:00:00 2001 From: Skullheadx Date: Wed, 6 May 2026 00:16:45 -0400 Subject: [PATCH] grid --- index.html | 15 +++++++++------ style.css | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 63 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 0250241..41b255d 100644 --- a/index.html +++ b/index.html @@ -8,12 +8,13 @@ -
+
+

Skullheadx
-
diff --git a/style.css b/style.css index 8b13789..3d71bf4 100644 --- a/style.css +++ b/style.css @@ -1 +1,55 @@ +.main-head { + grid-area: header; +} +.content { + grid-area: content; +} +.main-nav { + grid-area: nav; +} +.main-aside { + grid-area: aside; +} +.main-footer { + grid-area: footer; +} +.wrapper { + display: grid; + gap: 20px; + grid-template-areas: + "header" + "nav" + "content" + "aside" + "footer"; +} + +@media (width >= 500px) { + .wrapper { + grid-template-columns: 1fr 3fr; + grid-template-areas: + "header header" + "nav nav" + "aside content" + "footer footer"; + } + nav ul { + display: flex; + justify-content: space-between; + } +} + +@media (width >= 700px) { + .wrapper { + grid-template-columns: 1fr 4fr 1fr; + grid-template-areas: + "header header header" + "nav content aside" + "nav content aside" + "footer footer footer"; + } + nav ul { + flex-direction: column; + } +} -- 2.54.0