punkfairie/odin-css-exercises
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update CSS to match first exercise simplified version

Browse source
This commit is contained in:
Daniel Murphy 2022-01-12 17:07:40 -05:00
parent 2f50f3017c
commit 0a783d20c2
2 changed files with 16 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
grid/02-grid-layout-2/solution/solution.css
View file

@ -1,5 +1,13 @@
body, html {
height: 100%;
margin: 0;
}
.container { .container {
text-align: center; text-align: center;
height: 100%;
padding: 16px;
box-sizing: border-box;
} }
.container div { .container div {
@ -14,25 +22,19 @@
.header { .header {
background-color: #FFDE22; background-color: #FFDE22;
grid-column: 1 / 3; grid-column: 1 / 3;
grid-row: 1 / 2;
} }
.sidebar { .sidebar {
background-color: #FF7755; background-color: #FF7755;
grid-column: 1 / 2;
grid-row: 2 / 4; grid-row: 2 / 4;
} }
.nav { .nav {
background-color: #00DDFF; background-color: #00DDFF;
grid-column: 2 / 3;
grid-row: 2 / 3;
} }
.article { .article {
background-color: #bccbde; background-color: #bccbde;
grid-column: 2 / 3;
grid-row: 3 / 4;
} }
.article p { .article p {
@ -45,7 +47,6 @@
.footer { .footer {
background-color: #393f4d; background-color: #393f4d;
grid-column: 1 / 3; grid-column: 1 / 3;
grid-row: 4 / 5;
} }
/* SOLUTION */ /* SOLUTION */

15
grid/02-grid-layout-2/style.css
View file

@ -1,5 +1,13 @@
body, html {
height: 100%;
margin: 0;
}
.container { .container {
text-align: center; text-align: center;
height: 100%;
padding: 16px;
box-sizing: border-box;
} }
.container div { .container div {
@ -14,25 +22,19 @@
.header { .header {
background-color: #FFDE22; background-color: #FFDE22;
grid-column: 1 / 3; grid-column: 1 / 3;
grid-row: 1 / 2;
} }
.sidebar { .sidebar {
background-color: #FF7755; background-color: #FF7755;
grid-column: 1 / 2;
grid-row: 2 / 4; grid-row: 2 / 4;
} }
.nav { .nav {
background-color: #00DDFF; background-color: #00DDFF;
grid-column: 2 / 3;
grid-row: 2 / 3;
} }
.article { .article {
background-color: #bccbde; background-color: #bccbde;
grid-column: 2 / 3;
grid-row: 3 / 4;
} }
.article p { .article p {
@ -45,5 +47,4 @@
.footer { .footer {
background-color: #393f4d; background-color: #393f4d;
grid-column: 1 / 3; grid-column: 1 / 3;
grid-row: 4 / 5;
} }