tod
/
odin-default-css-exercises
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

02-grid: solution, style, desired-outcome

This commit is contained in:
Christina M 2023-06-10 12:25:16 -05:00
parent f79e581f4c
commit ef87c10dd5
4 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
grid/02-grid-layout-2/desired-outcome-narrow.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 228 KiB

After

Width:  |  Height:  |  Size: 96 KiB

BIN
grid/02-grid-layout-2/desired-outcome-wide.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 267 KiB

After

Width:  |  Height:  |  Size: 97 KiB

13
grid/02-grid-layout-2/solution/solution.css
View File

@ -1,4 +1,5 @@
body, html { body,
html {
height: 100%; height: 100%;
margin: 0; margin: 0;
} }
@ -20,21 +21,21 @@ body, html {
} }
.header { .header {
background-color: #FFDE22; background-color: #006157;
grid-column: 1 / 3; grid-column: 1 / 3;
} }
.sidebar { .sidebar {
background-color: #FF7755; background-color: #005B94;
grid-row: 2 / 4; grid-row: 2 / 4;
} }
.nav { .nav {
background-color: #00DDFF; background-color: #642cde;
} }
.article { .article {
background-color: #bccbde; background-color: #7E1DC3;
} }
.article p { .article p {
@ -56,4 +57,4 @@ body, html {
grid-template-columns: 1fr 3fr; grid-template-columns: 1fr 3fr;
grid-template-rows: 1fr 1fr 5fr 1fr; grid-template-rows: 1fr 1fr 5fr 1fr;
gap: 15px; gap: 15px;
} }

13
grid/02-grid-layout-2/style.css
View File

@ -1,4 +1,5 @@
body, html { body,
html {
height: 100%; height: 100%;
margin: 0; margin: 0;
} }
@ -20,21 +21,21 @@ body, html {
} }
.header { .header {
background-color: #FFDE22; background-color: #006157;
grid-column: 1 / 3; grid-column: 1 / 3;
} }
.sidebar { .sidebar {
background-color: #FF7755; background-color: #005B94;
grid-row: 2 / 4; grid-row: 2 / 4;
} }
.nav { .nav {
background-color: #00DDFF; background-color: #642cde;
} }
.article { .article {
background-color: #bccbde; background-color: #7E1DC3;
} }
.article p { .article p {
@ -47,4 +48,4 @@ body, html {
.footer { .footer {
background-color: #393f4d; background-color: #393f4d;
grid-column: 1 / 3; grid-column: 1 / 3;
} }