From b20dab65acee29e32395ea29f5b2f4184ac27be7 Mon Sep 17 00:00:00 2001 From: zepp Date: Fri, 13 Dec 2024 14:22:44 -0500 Subject: [PATCH] adjust grid placement of items --- index.php | 2 +- style/style.css | 32 ++++++++++++++++++++++---------- 2 files changed, 23 insertions(+), 11 deletions(-) diff --git a/index.php b/index.php index a4510b3..1af2bb9 100644 --- a/index.php +++ b/index.php @@ -9,8 +9,8 @@ +
-

welcome to emma's place

diff --git a/style/style.css b/style/style.css index 4719055..975a104 100644 --- a/style/style.css +++ b/style/style.css @@ -16,25 +16,30 @@ html { body { background-color: var(--body-background-color); display: grid; + grid-template-columns: 15vw 60vw; grid-template-rows: 5vh 2fr 5vh; justify-content: center; - align-content: space-evenly; } +main, nav { + padding-left: 2.5rem; +} + + main { background-color: var(--background-color); height: auto; - width: 70vw; - display: grid; - grid-template-columns: 1fr 2fr; - gap: 2rem; + width: 60vw; + grid-column: 2/3; + grid-row: 2/3; } header { background-color: var(--background-color); grid-row: 1/2; + grid-column: 1/3; height: 5vh; - width: auto; + width: 75vw; text-align: center; border-bottom: 10px solid; border-image-slice: 1; @@ -45,27 +50,34 @@ header { footer { background-color: var(--background-color); grid-row: 3/4; + grid-column: 1/3; height: 5vh; - width: auto; + width: 75vw; text-align: center; align-self: end; } +header, footer { + justify-self: center; +} + nav { background-color: var(--background-color); grid-row: 2/3; - width: 10vw; - height: auto; + grid-column: 1/2; justify-self: end; + width: 15vw; + height: auto; border-right: 10px solid; border-image-slice: 1; border-width: 5px; border-image-source: linear-gradient(to bottom, #FCF434, #FFFFFF, #9C59D1, #2C2C2C); - } +/* section { grid-column: 2/3; grid-row: 2/3; width: 55vw; } +*/