zempo/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<title>Parcel Sandbox</title>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"
	 crossorigin="anonymous">
	<link rel="stylesheet" href="style.css" />
</head>
<body>
  <header>
		<div class="logo"><img src="https://uploads.codesandbox.io/uploads/user/6eb75550-4d51-47fd-8ec1-d216b5da5e5c/M4sq-logo.jpeg"/></div>
		<h1>The ABC Company</h1>
	</header>
	<nav class="navbar">
		<div class="hamburger">&#9776;</div>
		<ul class="menu">
			<li>Home</li>
			<li>Products</li>
			<li>About</li>
			<li>Help</li>
		</ul>
	</nav>
	<main>
    <section class="product">
		 <i class="fas fa-apple-alt fa-5x"></i>
			<h2>A as in Apple</h2>
			<p>
				We take out fruit very seriously at ABC, that is why
       the A in ABC is for Apple. Try our new AppleBook App,
			 the coolest new technology disrupting the fruit industry.

			This is the Uber of Apples!
			</p>
		</section>
		<section class="product">
			<i class="fas fa-money-bill-wave fa-5x"></i>
			<h2>B as in Bail</h2>
			<p>
				Do you need Bail! Our new BailFace app will provide you
				with lawyers and bail money at the push of a button. Its the
				Facebook of bail bonds!
			</p>
		</section>
		<section class="product">
			<i class="fas fa-utensils fa-5x"></i>
			<h2>C as in Curry</h2>

			<p>
				Fancy some curry! Our new HurryCurry app will provide curry
				cooked by Italian chefs right to your door. Its the AirBnB of curry!
			</p>
		</section>
	</main>
  <footer>
		<ul class="social">
			<li class="social_icon"><i class="fab fa-twitter"></i></li>
			<li class="social_icon"><i class="fab fa-facebook"></i></li>
			<li class="social_icon"><i class="fab fa-instagram"></i></li>
		</ul>
	</footer>
</body>
</html>

## style.css
* {
    box-sizing: border-box;
  }

  body {
    font-family: "Roboto", sans-serif;
    margin: 0;
    padding: 0;
  }

  .logo > img {
    width: 50px;
  }

/*///////////// MY CONTENT HERE /////////////////*/
/*
525 min-width for tablets/big phones
768 min-width for desktop
*/
/*///////////// MOBILE VERSION /////////////////*/
header {
  text-align: center;
}

.navbar {
  background: #575757;
  display: flex;
  flex-direction: row-reverse;
  margin-bottom: 5px;
  color: white;
}
.hamburger {
  visibility: visible;
}

.menu {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  margin: 0;
}
.menu > li {
  padding: 0 15px;
  visibility: hidden;
}

.product {
  border: 1px solid #EAEAEA;
  margin: 3px 20px;
  text-align: center;
}

.product > p {
  text-align: justify;
  padding: 5px;
}

.social {
  display: flex;
  list-style-type: none;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  border-top: 1px solid #EAEAEA;
}
/*///////////// TABLET VERSION /////////////////*/
/* make header flex out, logo on left, h1 in center
switch .social <ul> to flex-direction: row; */

@media screen and (min-width: 525px) {
  header {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  header .logo, header h1 {
    margin: 20px 50px;
  }
  .navbar {
    background: #1B8FE5;
  }
  .product {
    margin: 3px 40px;
  }
  .social {
    flex-direction: row;
    justify-content: space-around;
    padding: 20px 0px;
  }
  .fa-facebook {
    align-self: center;
  }
}

/*///////////// DESKTOP VERSION /////////////////*/
/*
hid hamburger menu <div>, make menu <ul> visible */

@media screen and (min-width: 768px) {
  header .logo, header h1 {
    margin: 25px 60px;
  }
  .navbar {
    padding: 10px 0;
    background: #27C772;
  }
  .hamburger {
    visibility: hidden;
  }
  .menu li {
    visibility: visible;
    font-weight: bold;
  }
  main {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-evenly;
  }
  .product {
    margin: 3px auto;
    width: 31%;
  }

}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Parcel Sandbox</title>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"
	crossorigin="anonymous">
	<link rel="stylesheet" href="style.css" />
	</head>
	<body>
	<header>
	<div class="logo"><img src="https://uploads.codesandbox.io/uploads/user/6eb75550-4d51-47fd-8ec1-d216b5da5e5c/M4sq-logo.jpeg"/></div>
	<h1>The ABC Company</h1>
	</header>
	<nav class="navbar">
	<div class="hamburger">☰</div>
	<ul class="menu">
	<li>Home</li>
	<li>Products</li>
	<li>About</li>
	<li>Help</li>
	</ul>
	</nav>
	<main>
	<section class="product">
	<i class="fas fa-apple-alt fa-5x"></i>
	<h2>A as in Apple</h2>
	<p>
	We take out fruit very seriously at ABC, that is why
	the A in ABC is for Apple. Try our new AppleBook App,
	the coolest new technology disrupting the fruit industry.

	This is the Uber of Apples!
	</p>
	</section>
	<section class="product">
	<i class="fas fa-money-bill-wave fa-5x"></i>
	<h2>B as in Bail</h2>
	<p>
	Do you need Bail! Our new BailFace app will provide you
	with lawyers and bail money at the push of a button. Its the
	Facebook of bail bonds!
	</p>
	</section>
	<section class="product">
	<i class="fas fa-utensils fa-5x"></i>
	<h2>C as in Curry</h2>

	<p>
	Fancy some curry! Our new HurryCurry app will provide curry
	cooked by Italian chefs right to your door. Its the AirBnB of curry!
	</p>
	</section>
	</main>
	<footer>
	<ul class="social">
	<li class="social_icon"><i class="fab fa-twitter"></i></li>
	<li class="social_icon"><i class="fab fa-facebook"></i></li>
	<li class="social_icon"><i class="fab fa-instagram"></i></li>
	</ul>
	</footer>
	</body>
	</html>
	* {
	box-sizing: border-box;
	}

	body {
	font-family: "Roboto", sans-serif;
	margin: 0;
	padding: 0;
	}

	.logo > img {
	width: 50px;
	}

	////////////// MY CONTENT HERE //////////////////
	/*
	525 min-width for tablets/big phones
	768 min-width for desktop
	*/
	////////////// MOBILE VERSION //////////////////
	header {
	text-align: center;
	}

	.navbar {
	background: #575757;
	display: flex;
	flex-direction: row-reverse;
	margin-bottom: 5px;
	color: white;
	}
	.hamburger {
	visibility: visible;
	}

	.menu {
	list-style-type: none;
	display: flex;
	flex-direction: row;
	margin: 0;
	}
	.menu > li {
	padding: 0 15px;
	visibility: hidden;
	}

	.product {
	border: 1px solid #EAEAEA;
	margin: 3px 20px;
	text-align: center;
	}

	.product > p {
	text-align: justify;
	padding: 5px;
	}

	.social {
	display: flex;
	list-style-type: none;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: 0;
	border-top: 1px solid #EAEAEA;
	}
	////////////// TABLET VERSION //////////////////
	/* make header flex out, logo on left, h1 in center
	switch .social <ul> to flex-direction: row; */

	@media screen and (min-width: 525px) {
	header {
	display: flex;
	flex-direction: row;
	align-items: center;
	}
	header .logo, header h1 {
	margin: 20px 50px;
	}
	.navbar {
	background: #1B8FE5;
	}
	.product {
	margin: 3px 40px;
	}
	.social {
	flex-direction: row;
	justify-content: space-around;
	padding: 20px 0px;
	}
	.fa-facebook {
	align-self: center;
	}
	}

	////////////// DESKTOP VERSION //////////////////
	/*
	hid hamburger menu <div>, make menu <ul> visible */

	@media screen and (min-width: 768px) {
	header .logo, header h1 {
	margin: 25px 60px;
	}
	.navbar {
	padding: 10px 0;
	background: #27C772;
	}
	.hamburger {
	visibility: hidden;
	}
	.menu li {
	visibility: visible;
	font-weight: bold;
	}
	main {
	display: flex;
	width: 100%;
	flex-direction: row;
	justify-content: space-evenly;
	}
	.product {
	margin: 3px auto;
	width: 31%;
	}

	}