Ch1 Start: Code this layout with Flexbox and Grid

ch1-start-code-this-layout-with-flexbox-and-grid.markdown

Ch1 Start: Code this layout with Flexbox and Grid

A Pen by Jen Kramer on CodePen.

License.

index.html

<div class="wrapper">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="d">D</div>
  <div class="e">E</div>
  <div class="f">F</div>
  <div class="g">G</div>
  <div class="h">H</div>
</div>

<!-- <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3273620/grid1.png" alt="Make it look like this, uncomment to see the image"> -->

script.js

/* Original problem at www.cssworkout.guide

Use Flexbox and 3 different styles of Grid syntax to code this layout. Do not change the HTML.

Finished product should look like: 
https://s3-us-west-2.amazonaws.com/s.cdpn.io/3273620/grid1.png

*/

style.css

/* scroll for starting CSS and hints; instructions in JS window -> */













/* HINT: Three types of Grid syntax might include:
- line-based placement, like grid-column: 1 / 3; 
- use the "span" keyword, like grid-column: span 2;
- use grid area notation





/* presentational CSS, no answers here -- ignore below this line */
div > div {
  font-size: 5rem;
  text-align: center;
  color: white;
}
.a {
  background-color: #FCB10F;
}
.b {
  background-color: #801340;
}
.c {
  background-color: #4D2975;
}
.d {
  background-color: #244479;
}
.e {
  background-color: #55B4AF;
}
.f {
  background-color: rgba(128, 19, 64, 0.7); 
}
.g {
  background-color: rgba(77, 41, 117, 0.5);
}
.h {
  background-color: rgba(252, 177, 15, 0.7);
}

styles

<link href="https://codepen.io/cssworkout/pen/arMNrE" rel="stylesheet" />