Off-Platform-Project-Tea-Cozy

Hello everyone.

I am here to share with you all Off-Platform-Project-Tea-Cozy. Please let me know how can I simplify my work, because I am sure that I did some unnecesary stuff.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./src/style.css">
  <title>Off-Platform Project: Tea Cozy</title>
</head>
<body>
    <nav>
      <div class="header-image"> <img src="./src/imgs/img-tea-cozy-logo.webp" alt="None"> </div>
      <div class="header-navigation">
        <a href="#mission">Mission</a>
        <a href="#featured_tea">Featured Tea</a>
        <a href="#location">Locations</a>    
      </div>
    </nav>

    <main>
      <section id="mission">
        <div class="our_mission">
          <h2>Our Mission</h2>
          <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
        </div>
      </section>
      
      <section id="featured_tea">
        <h2> Tea of the Month </h2>
        <h5> What's Steeping at The Tea Cozy? </h5>
      <div class="tea-of-the-month">
        <div class="fall-berry-blitz-tea-image"><img src="./src/imgs/img-berryblitz.webp"> <h4>Fall Berry Blitz Tea</h4></div>
        <div class="spcied-rum-tea-image"><img src="./src/imgs/img-spiced-rum.webp"> <h4>Spiced Rum Tea</h4> </div>
        <div class="seasonal-donuts-image"><img src="./src/imgs/img-donut.webp"> <h4>Seasonal Donuts</h4> </div>
        <div class="myrtle-ave-tea-image"><img src="./src/imgs/img-myrtle-ave.webp"> <h4>Myrtle Ave Tea</h4> </div>
        <div class="bedford-bizarre-tea-image"><img src="./src/imgs/img-bedford-bizarre.webp"> <h4>Bedford Bizarre Tea</h4> </div>
      </div>
      </section>

      <section id="locations">
        <h2>Locations</h2>
        <div class="locations-section">
          <div class="downtown-box-1">
            <h3>Downtown</h3>
            <h4>384 West 4th St</h4>
            <h4>Suite 108</h4>
            <h4>Portland, Maine</h4>
          </div>
          <div class="east-bayside-box-2">
            <h3>East Bayside</h3>
            <h4>3433 Phisherman's Avenue</h4>
            <h4>(Northwest Corner)</h4>
            <h4>Portland, Maine</h4>
          </div>
          <div class="oakdale-box-3">
            <h3>Oakdale</h3>
            <h4>515 Crescent Avenue</h4>
            <h4>Second Floor</h4>
            <h4>Portland, Maine</h4>
          </div>
        </div>
      </section>

      <footer>
        <div class="contact-information">
          <h2>The Tea Cozy</h2>
          <h5>[email protected]</h4>
          <h5>917-555-8904 </h4>
        </div>
        <h6>copyright The Tea Cozy 2017</h6>
      </footer>
    </main>

</body>
</html>
*{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    color: seashell;
    background-color: black;
    opacity: 0.9;
}

nav{
    height: 69px;
    width: 100%;
    border-bottom: 1px solid seashell;
    position: fixed;
    top: 0;
    z-index: 1;
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.header-image{
    padding-left: 10px;
    height: 50px;
    display: flex;
}

.header-navigation{
    list-style-type: none;
    display: flex;
    justify-content: end;
    gap: 2em;
}

main{
    margin-top: 70px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

section{
    margin-bottom: 70px;
}
#mission{
    background-image: url("./imgs/img-mission-background.webp");
    height: 700px;
    width: 1200px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.our_mission h2{
    background-color: black;
    display: flex;
    justify-content: center;
}


.our_mission h4{
    background-color: black;
    display: flex;
    justify-content: center;
}


#featured_tea h2, #featured_tea h5{
    display: flex;
    justify-content: center;
    font-size: 30px;
}

.tea-of-the-month{
    width: 1000px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.tea-of-the-month h4{
    display: flex;
    justify-content: center;
}


#featured_tea img{
    height: 200px;
    width: 300px;
    margin: 10px 10px 0;
}

#locations{
    background-image: url('./imgs/img-locations-background.webp');
    height: 800px;
    width: 1200px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

#locations h2{
    background-color: transparent;
    display: flex;
    justify-content: center;
    padding-bottom: 15px;
    font-size: 30px;
}

.locations-section{
    display: flex;
    justify-content: flex-start;
    opacity: 1;
}

.downtown-box-1, .east-bayside-box-2, .oakdale-box-3{
    display: inline-flex;
    flex-direction: column;
    width: 300px;
    margin: 15px 40px;
    justify-content: center;
    align-items: center;
}


.downtown-box-1 h3, .east-bayside-box-2 h3 , .oakdale-box-3 h3{
    margin: 20px;
    display: flex;
    justify-content: center;
}


.downtown-box-1 h4, .east-bayside-box-2 h4 , .oakdale-box-3 h4{
    padding: 10px;
    display: flex;
    justify-content: center;
    
}


footer{
    height: 250px;
    width: 100%;
    flex-wrap: wrap;
}

footer h6{ 
    margin: 0 20px;
    padding: 20px 0;
    text-align: left;
}

.contact-information{
    height: 200px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    
}

.contact-information h2{
    font-size: 30px;
}


.contact-information h4{
    font-size: 15px;
}