styling defined for color choices

This commit is contained in:
emma 2024-12-13 13:08:42 -05:00
parent 846564e5cb
commit 02bd6a8492
1 changed files with 16 additions and 0 deletions

View File

@ -1,4 +1,6 @@
:root { :root {
--background-color: #e0ffcd;
--body-background-color: #ffebbb;
} }
*, *::before, *::after { *, *::before, *::after {
@ -12,6 +14,7 @@ html {
} }
body { body {
background-color: var(--body-background-color);
display: grid; display: grid;
grid-template-rows: 5vh 2fr 5vh; grid-template-rows: 5vh 2fr 5vh;
justify-content: center; justify-content: center;
@ -19,6 +22,7 @@ body {
} }
main { main {
background-color: var(--background-color);
height: auto; height: auto;
width: 70vw; width: 70vw;
display: grid; display: grid;
@ -27,13 +31,19 @@ main {
} }
header { header {
background-color: var(--background-color);
grid-row: 1/2; grid-row: 1/2;
height: 5vh; height: 5vh;
width: auto; width: auto;
text-align: center; text-align: center;
border-bottom: 10px solid;
border-image-slice: 1;
border-width: 5px;
border-image-source: linear-gradient(to right, #D60270, #9B4F96, #0038A8);
} }
footer { footer {
background-color: var(--background-color);
grid-row: 3/4; grid-row: 3/4;
height: 5vh; height: 5vh;
width: auto; width: auto;
@ -42,10 +52,16 @@ footer {
} }
nav { nav {
background-color: var(--background-color);
grid-row: 2/3; grid-row: 2/3;
width: 10vw; width: 10vw;
height: auto; height: auto;
justify-self: end; justify-self: end;
border-right: 10px solid;
border-image-slice: 1;
border-width: 5px;
border-image-source: linear-gradient(to bottom, #FCF434, #FFFFFF, #9C59D1, #2C2C2C);
} }
section { section {