CSS Flexbox / Grid - Lab

Intro

Time for some practice laying out elements using Flexbox and CSS Grid!

This lab is a deliverable.

Lab

• Choose either the vertical or horizontal "profile card" above to reproduce using HTML and CSS.
• Use a combination of Flexbox and CSS Grid to layout the individual elements as close as possible - however, it does not have to be perfect!

Set Up

For this lab assignment, please use a HTML, CSS, JS on repl.it

Hints

• Be sure to start with a bit of CSS reset:

  	* {
  	  box-sizing: border-box;
  	}
  	
  	body {
  	  margin: 0;
  	  font-family: Helvetica;
  	}

• Use the Digital Color Meter application that comes with the Mac to "pick" the colors from the screen.
• Elements can be made to appear circular by using border-radius: 50%;.

Bonus

As a bonus, reproduce both the vertical and horizontal versions!