Tea Cozy Project CSS

After many mistakes and lots of learning, I have now finally completed this project.

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>The Tea Cozy</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
  </head>
  <body>
  
  <!-- header section -->
    <header>
      <figure>
        <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png" class='teacozy'/>
      </figure>
      <nav class='nav'>
        <p>Mission</p>
        <p>Featured Tea</p>
        <p>Locations</p>
      </nav>
    </header>
  
  <!-- hero section -->
    <section class='hero'>
      <div class='ourmissiontext'>
        <h2>Our Mission</h2>
        <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
      </div>
    </section>
      
  <!-- tea of month section -->
    <div class='teaofmonthtext'>
      <h2>Tea of the Month</h2>
      <h4>What's Steeping at The Tea Cozy?</h4>
    </div>
    <section class='teaimageslineone'>
      <div class='imageonesection'>
        <figure class='teaofmonthimages'>
          <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg"/>
        </figure>
        <h4>Fall Berry Blitz Tea</h4>
      </div>
      <div class='imagetwosection'>
        <figure class='teaofmonthimages'>
          <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg"/>
        </figure>
        <h4>Spiced Rum Tea</h4>
      </div>
      <div class='imagethreesection'>
        <figure class='teaofmonthimages'>
          <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg"/>
        </figure>
        <h4>Seasonal Donuts</h4>
      </div>
    </section>
    <section class="teaimageslinetwo">
      <div class='imagefoursection'>
        <figure class='teaofmonthimages'>
          <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg"/>
        </figure>
        <h4>Myrtle Ave Tea</h4>
      </div>
      <div class='imagefivesection'>
        <figure class='teaofmonthimages'>
          <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg"/>
        </figure>
        <h4>Beford Bizarre Tea</h4>
      </div>
    </section>
  
  <!-- locations section  -->
    <section class='locations'>
      <div class='locationsheading'>
        <h2>Locations</h2>
      </div>
      <section class='locationsections'>
        <div class='locationone'>
          <h3>Downtown</h3>
          <p>384 West 4th St</p>
          <p>Suite 108</p>
          <p>Portland, Maine</p>
        </div>
        <div class='locationtwo'>
          <h3>East Bayside</h3>
          <p>3433 Phisherman's Avenue</p>
          <p>(Northwest Corner)</p>
          <p>Portland, Maine</p>
        </div>
        <div class='locationthree'>
          <h3>Oakdale</h3>
          <p>515 Crescent Avenue</p>
          <p>Second Floor</p>
          <p>Portland, Maine</p>
        </div>
      </section>
    </section>
  <!-- Tea Cozy section   -->
    <div class='contact'>
      <h2>The Tea Cozy</h2>
      <h5>[email protected]</h5>
      <h5>917-555-8904</h5>
    </div>
  <!-- footer section -->
    <footer>
      <h5>copywright The Tea Cozy 2017</h5>
    </footer>
  </body>
</html>

CSS:

body {
    font-family: helvetica;
    font-size: 22px;
    color: seashell;
    background-color: black;
    margin: 0px;
    }

  figure {
  margin: 0px;
  }

.hero,.teaofmonthtext,.teaimageslineone,.teaimageslinetwo,.locations,.contact, footer {
  opacity: 0.5;
}

header {
  background: black;
  display: flex;
  justify-content: space-between;
  max-height: 69px;
  margin-left: 10px;
  align-items: center;
  border-bottom: 1px solid seashell;
  position: fixed;
  width: 100%;
  z-index: 1;
  }

.teacozylogo {
  margin-left: 10px;
}

.nav {
  display: flex;
  flex-basis: 400px;
  justify-content: space-around;
  text-decoration: underline;
  opacity: 0.6;
  }

.teacozy {
  max-height: 50px;
  opacity: 0.6;
  }

.hero {
  min-height: 700px;
  width: 1200px;
  background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg");
  align-content: center;
  text-align: center;
  margin: auto;
  }

.ourmissiontext {
  background-color: black;
  width: 100%;
  align-content: center;
  }

.teaofmonthtext {
  text-align: center;
}

.teaofmonthimages img {
  max-width: 300px;
  height: 200px;
  }

.teaimageslineone {
  display: flex;
  background-color: ;
  width: 1000px;
  margin: auto;
  justify-content: space-between;
}

.imageonesection,.imagetwosection,.imagethreesection,.imagefoursection,.imagefivesection {
  text-align: center;
} 

.teaimageslinetwo {
  display: flex;
  width: 1000px;
  margin: auto;
  justify-content: center;
}

.imagefoursection {
  padding-right: 50px;
}

.teaimageslineone h4 {
  margin-top: 10px;
}

.teaimageslinetwo h4 {
  margin-top: 10px;
}

.locationsheading {
  text-align: center;
}

.locationsections {
  display: flex;
  width: 1200px;
  justify-content: center;
  margin-top: 15px;
}

.locationone,.locationtwo,.locationthree {
  width: 300px;
  background-color: black;
  text-align: center;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 0px;
  }

  .locations {
    background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg");
    width: 1200px;
    margin: auto;
    min-height: 500px;
    align-content: center;
  }

.locationsheading h2 {
  margin-bottom: 0px;
}

.contact {
  min-height: 200px;
  text-align: center;
}

footer {
  margin-left: 20px;
}




ok, it took me some hours to complete this project. Everything was clear with simple blocks, but when put all together faced some issues which resolved with help of google and youtube.
Anyway, completed this project. That was nice practice.

Here’s:
Github codes
Live version

And some screens:
Desktop version


Mobile version

Any critics appreciate