Tea Cozy Project - Review

Hi everyone,

I’ve just finished the tea cozy project and wanted to get some views on if there is anything I could have done better or in a more efficient way as I feel as though there was a lot of trial and error as I was going through so any tips and/or advice would be great!! :smiley:

Thanks,
Chris

<!DOCTYPE html>
<html>
<head>
  <title>The Tea Cozy</title>
  <link rel="stylesheet" href="style.css" type="text/css" />
</head>
  <body>
    
    <header>
    
    <div class="logo-header">
          <img class="logo" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png"/>
    </div>
    
    <div class="nav">
      <ul>
        <li>Mission</li>
        <li>Featured Tea</li>
        <li>Locations</li>
      </ul>
    </div>

  </header>

    <div class="mission">
      <img class="mission-image" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg"/>
      
      <div class="mission-content">
        <h2 class="mission-header">Our Mission</h2>
        <h4 class="mission-text">Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
      </div>
     
     </div>

     <div class="featured-tea">
       <h2>Tea of the Month</h2>
       <h4>What's Steeping at The Tea Cozy?</h4>

     <div class="featured-content">
      <figure>
        <img class="featured-image" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg">
        <figcaption>Fall Berry Blitz Tea</figcaption>
      </figure>
      <figure>
        <img class="featured-image" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg">
        <figcaption>Spiced Rum Tea</figcaption>
      </figure>
      <figure>
        <img class="featured-image" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg">
        <figcaption>Seasonal Donuts</figcaption>
      </figure>
      <figure>
        <img class="featured-image" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg">
        <figcaption>Myrtle Ave Tea</figcaption>
      </figure>
      <figure>
        <img class="featured-image" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg">
        <figcaption>Bedford Bizarre Tea</figcaption>
      </figure>
      </div>
    </div>

    <div class="location">
      <img class="location-image" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg"/>
    </div>

    <div class="location-content">
        <h2 class="location-header">Locations</h2>
      <div class="downtown">  
        <h3>Downtown</h3>
        <p>384 West 4th St</p>
        <p>Suite 108</p>
        <p>Portland, Maine</p>
      </div>
      <div class="east-bayside">  
        <h3>East Bayside</h3>
        <p>3433 Phisherman's Avenue</p>
        <p>(Northwest Corner)</p>
        <p>Portland, Maine</p>
      </div>
      <div class="oakdale">  
        <h3>Oakdale</h3>
        <p>515 Crescent Avenue</p>
        <p>Second Floor</p>
        <p>Portland, Maine</p>
      </div>
    </div>
    
  </body>

  <footer>

    <div class="footer-content">
      <h2 class="footer-header">The Tea Cozy</h2>
      <h5 class="email">contact@theteacozy.com</h5>
      <h5 class="phone">917-555-8904</h5>
    </div>

    <h5 class="copyright">copyright The Tea Cozy 2017</h5>

  </footer>
</html>
body {
  background-color: black;
  font-family: Helvetica;
  font-size: 22px;
  opacity: 0.9;
}

header {
  height: 69px;
  border-bottom: 1px solid seashell;
  width: 100%;
  position: fixed;
  display: flex;
  z-index: 9;
  background-color: black;
}

img {
  opacity: 0.7;
}

 p, h2, h3, h4 {
   color: seashell;
   text-align: center;
 }



/* ==== header ==== */


.logo {
  margin: 10px;
  height: 50px;
}

.nav {
  color: seashell;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  padding-right: 20px;
}

li {
  text-decoration: underline;
  margin: 5px;
  display: inline-block;
}



/* ==== mission section ==== */


.mission {
  color: seashell;
  text-align: center;
  position: relative;
}

.mission-image {
  width: 1200px;
  height: 700px;
  margin-top: 70px;
  z-index: 0;
}

.mission-content {
  background-color: black;
  display: block;
  align-items: center;
  margin: 0px auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1200px;
}



/* ==== featured section ==== */


.featured-tea {
  width: 1000px;
  margin: 0px auto;
}

.featured-content {
  display: flex;
  align-content: center;
  justify-content: center;
  width: 1000px;
  flex-wrap: wrap;
}
figure {
  width: 300px;
  margin: 10px 15px;
}

.featured-image {
  height: 200px;
  width: 300px;
}

figcaption {
  margin-top: 10px;
  color: seashell;
  text-align: center;
  font-weight: bold;
}



/* ==== Location section ====*/


.location {
  width: 100%;
  margin-top: 50px;
  position: relative;
}

.location-image {
  width: 1200px;
  height: 700px;
  display: block;
  margin: 0 auto;
  z-index: 0;
}

.location-content {
  width: 1200px;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 1900px;
  transform: translate(-50%, -50%);
}

.location-header {
  position: absolute;
  left: 50%;
  top: -75px;
  transform: translate(-50%, -50%);
  margin-bottom: 400px;
}

.downtown,
.east-bayside,
.oakdale {
  width: 300px;
  height: 300px;
  background-color: black;
  text-align: center;
  line-height: 40px;
  margin-bottom: 100px;
  opacity: 1;
}

.downtown,
.east-bayside {
  margin-right: 40px;
}



/* ==== footer ==== */


footer {
  color: seashell;
}

.footer-content {
  margin: 0px auto;
  height: 200px;
}

h5 {
  text-align: center;
}

.copyright {
  text-align: left;
  margin-left: 20px;
}