02-grid: solution, style, desired-outcome

Author: christinamakes

grid/02-grid-layout-2/desired-outcome-narrow.png

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

grid/02-grid-layout-2/desired-outcome-wide.png

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