codecademydev/index.html Secret

## index.html
<!DOCTYPE html>
<html>

<head>
  <title>Tsunami Coffee</title>
  <link rel="stylesheet" type="text/css" href="resources/css/reset.css">
  <link rel="stylesheet" type="text/css" href="resources/css/style.css">
</head>

<body>
  <div class="main">
    <nav class="container">
      <ul>
        <li>Store</li>
        <li>Hours</li>
        <li>Wholesale</li>
      </ul>
    </nav>
    <img src="https://content.codecademy.com/courses/freelance-1/unit-5/tsunami-coffee/images/logo.png" />
  </div>

  <div class="container supporting">
    <img src="https://content.codecademy.com/courses/freelance-1/unit-5/tsunami-coffee/images/beans.png" />
    <div class="description">
      <h2>Great coffee does not happen by accident.</h2>
      <p>We work side by side with farmers around the world to strengthen farming practices to cultivate the best coffee beans in the world. Then, we train our baristas in the sacred art of the brew process, yielding the most flavorful coffee you’ve ever tasted.
      </p>
      <p>Tsunami Coffee is certified organic and fair trade.</p>
    </div>
  </div>

  <div class="rating">
    <div class="container">
      <h1>9.4/10: A rush of flavors. Absolutely divine.</h1>
      <p>~ Coffee Critic</p>
    </div>
  </div>

  <div class="container gallery">
    <img src="https://content.codecademy.com/courses/freelance-1/unit-5/tsunami-coffee/images/latte.png" />
    <img src="https://content.codecademy.com/courses/freelance-1/unit-5/tsunami-coffee/images/coffee-man.png" />
    <img src="https://content.codecademy.com/courses/freelance-1/unit-5/tsunami-coffee/images/pastries.png" />
    <div class="clearfix"></div>
  </div>

  <div class="container location">
    <img src="https://content.codecademy.com/courses/freelance-1/unit-5/tsunami-coffee/images/map.png" />
    <h1>Brewed with love in San Francisco.</h1>
  </div>

  <footer>
    <div class="container">
      <div class="copyright">
        &copy; Tsunami Coffee
      </div>

      <nav>
        <ul>
          <li>Store</li>
          <li>Hours</li>
          <li>Wholesale</li>
        </ul>
      </nav>
    </div>
  </footer>

</body>

</html>

## style.css
html,
body {
  font-family: Helvetica, sans-serif;
  font-size: 16px;
  margin: 0;
  background-color: white;
}

.container {
  max-width: 960px;
  margin: 0 auto;
}

.main {
  background-image: url('https://content.codecademy.com/courses/freelance-1/unit-5/tsunami-coffee/images/bg-photo.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 30rem;
  padding-top: 1rem;
}

.main img {
  width: 15rem;
  display: block;
  margin: auto;
  margin-top: 5rem;
}

nav {
  background-color: OrangeRed;
  color: White;

}

ul {
  list-style: none;
  margin: 0;

}

li {
  display: inline-block;
  padding: 0.74rem, 1.25rem;
}

.supporting,
.rating,
.gallery,
.location {
  margin: 4em auto;
}

.supporting {
  display: flex;
  align-items: flex-start;
  padding: 0 1rem;
}

.supporting img {
height: 10%;
width: 10%;
margin-right: 5%;
}

.rating {
  background-color: OrangeRed;
  height: 20rem;
  padding: 0 1rem;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;

}

.rating h1 {
font-size: 1.5rem;
}

.gallery img {
  display: block;
  width: 30%;
  margin: 1.5%;
  float: left;
}

.clearfix {
  clear: both;
}

.location {
  text-align: center;
  margin-bottom: 7rem;
}

.location img {
width: 100%;
}

footer {
  background-color: OrangeRed;
  padding: 0 1rem;
}

footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5em 0;
  color: white;
}
@media only screen and (max-width: 960px){
  .main {
    padding-top: 0;
  }
}
@media only screen and (max-width: 700px){
  .supporting img{
    display: none;
  }
}
@media only screen and (max-width: 470px){
  .rating h1{
    font-size: 2rem;
    }
   .gallery img{
     width: 100%;
     margin: 0;
   }
  footer nav{
     display: none;
   }
}
	<!DOCTYPE html>
	<html>

	<head>
	<title>Tsunami Coffee</title>
	<link rel="stylesheet" type="text/css" href="resources/css/reset.css">
	<link rel="stylesheet" type="text/css" href="resources/css/style.css">
	</head>

	<body>
	<div class="main">
	<nav class="container">
	<ul>
	<li>Store</li>
	<li>Hours</li>
	<li>Wholesale</li>
	</ul>
	</nav>
	<img src="https://content.codecademy.com/courses/freelance-1/unit-5/tsunami-coffee/images/logo.png" />
	</div>

	<div class="container supporting">
	<img src="https://content.codecademy.com/courses/freelance-1/unit-5/tsunami-coffee/images/beans.png" />
	<div class="description">
	<h2>Great coffee does not happen by accident.</h2>
	<p>We work side by side with farmers around the world to strengthen farming practices to cultivate the best coffee beans in the world. Then, we train our baristas in the sacred art of the brew process, yielding the most flavorful coffee you’ve ever tasted.
	</p>
	<p>Tsunami Coffee is certified organic and fair trade.</p>
	</div>
	</div>

	<div class="rating">
	<div class="container">
	<h1>9.4/10: A rush of flavors. Absolutely divine.</h1>
	<p>~ Coffee Critic</p>
	</div>
	</div>

	<div class="container gallery">
	<img src="https://content.codecademy.com/courses/freelance-1/unit-5/tsunami-coffee/images/latte.png" />
	<img src="https://content.codecademy.com/courses/freelance-1/unit-5/tsunami-coffee/images/coffee-man.png" />
	<img src="https://content.codecademy.com/courses/freelance-1/unit-5/tsunami-coffee/images/pastries.png" />
	<div class="clearfix"></div>
	</div>

	<div class="container location">
	<img src="https://content.codecademy.com/courses/freelance-1/unit-5/tsunami-coffee/images/map.png" />
	<h1>Brewed with love in San Francisco.</h1>
	</div>

	<footer>
	<div class="container">
	<div class="copyright">
	© Tsunami Coffee
	</div>

	<nav>
	<ul>
	<li>Store</li>
	<li>Hours</li>
	<li>Wholesale</li>
	</ul>
	</nav>
	</div>
	</footer>

	</body>

	</html>
	html,
	body {
	font-family: Helvetica, sans-serif;
	font-size: 16px;
	margin: 0;
	background-color: white;
	}

	.container {
	max-width: 960px;
	margin: 0 auto;
	}

	.main {
	background-image: url('https://content.codecademy.com/courses/freelance-1/unit-5/tsunami-coffee/images/bg-photo.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	height: 30rem;
	padding-top: 1rem;
	}

	.main img {
	width: 15rem;
	display: block;
	margin: auto;
	margin-top: 5rem;
	}

	nav {
	background-color: OrangeRed;
	color: White;

	}

	ul {
	list-style: none;
	margin: 0;

	}

	li {
	display: inline-block;
	padding: 0.74rem, 1.25rem;
	}

	.supporting,
	.rating,
	.gallery,
	.location {
	margin: 4em auto;
	}

	.supporting {
	display: flex;
	align-items: flex-start;
	padding: 0 1rem;
	}

	.supporting img {
	height: 10%;
	width: 10%;
	margin-right: 5%;
	}

	.rating {
	background-color: OrangeRed;
	height: 20rem;
	padding: 0 1rem;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;

	}

	.rating h1 {
	font-size: 1.5rem;
	}

	.gallery img {
	display: block;
	width: 30%;
	margin: 1.5%;
	float: left;
	}

	.clearfix {
	clear: both;
	}

	.location {
	text-align: center;
	margin-bottom: 7rem;
	}

	.location img {
	width: 100%;
	}

	footer {
	background-color: OrangeRed;
	padding: 0 1rem;
	}

	footer .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5em 0;
	color: white;
	}
	@media only screen and (max-width: 960px){
	.main {
	padding-top: 0;
	}
	}
	@media only screen and (max-width: 700px){
	.supporting img{
	display: none;
	}
	}
	@media only screen and (max-width: 470px){
	.rating h1{
	font-size: 2rem;
	}
	.gallery img{
	width: 100%;
	margin: 0;
	}
	footer nav{
	display: none;
	}
	}