Feedback on Tea Cozy code

Okay so I think I’m done with the Tea Cozy project in the web development skill path, however I feel like my text is clumsy and representative and that It could’ve been a lot smoother. So if anyone wants / have the time to read through my code and gie em soem feedbacks on where I can improve to make the code cleaner please reply with the tips :slight_smile:

Here is the HTML

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Tea Cozy</title>
  <link href="./css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>

  <header>
    <div class="topnav">
      <img class="logo" src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-tea-cozy-logo.png">
    </div>
    <div class="topnav-right">
      <a href="#home">Home</a>
      <a href="#featured-tea">Featured Tea</a>
      <a href="#locations">Locations</a>
    </div>
  </header>


  <div class="background"> 
    <h2>Our Mission</h2>
    <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
  </div>


  <!-- Tea images title -->
  <div class="monthlyTea">
    <h2>Tea of the month</h2>
    <h4>What's Steeping at The Tea Cozy?</h4>
  </div>

  <div class="monthlyImages">
    <div class="item">
    <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-berryblitz.jpg">
    <span>Berry Blitz Tea</span>
    </div>

    <div class="item">
    <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-spiced-rum.jpg">
    <span >Spiced Rum Tea</span>
    </div>

    <div class="item">
    <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-donut.jpg">
    <span>Donut</span>
    </div>

    <div class="item">
    <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-myrtle-ave.jpg">
    <span>Myrtle Ave</span>
    </div>

    <div class="item">
    <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-bedford-bizarre.jpg">
    <span>Bedford Bizarre</span>
     </div>
  </div>
  
  <div class="flex-container-locations">
    <span class="title">Locations</span>
    <div class="left">
      <span class="Bold-Location">Downtown</span>
      <span>384 West 4th St</span>
      <span>Suite 108</span>
      <span>Portland, Maine</span>
    </div>
    <div class="center">
      <span class="Bold-Location">East Bayside</span>
      <span>3433 Phisherman's Avenue</span>
      <span>(Northwest Corner)</span>
      <span>Portland, Maine</span>
    </div>
    <div class="right">
      <span class="Bold-Location">Oakdale</span>
      <span>515 Crescent Avenue</span>
      <span>Second Floor</span>
      <span>Portland, Maine</span>
    </div>
  </div>

  <footer>
    <div class="Foot-Text">
    <h2>The Tea Cozy</h2>
    <h5>contact@theteacozy.com</h5>
    <p>917-555-8904</p>
   </div>

   <span>copyright The Tea Cozy 2017</span>
  </footer>
</body>
</html>

Here is the CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background-color: black;
    color: seashell;
    font-size: 22px;
    opacity: 0.9;
    font-family: 'Helvetica', Arial, sans-serif;
}

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

}


.topnav-right a {
    color: seashell;;
    margin-left: 30px;
    margin-right: 0px;
    text-decoration: underline;
}

.topnav-right {
    color: seashell;
    text-align: center;
    float: right;
    padding: 0 15px;
    height: 69px;
    margin-top: 17px;
}

.topnav {
    display: inline-block;
    height: 69px;
    width: 200px;
    position: relative;
}

.topnav img {
    max-height: 50px;
    max-width: 200px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

/* --------------------------------------- */

.background {
    background-image: url(https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-mission-background.jpg);
    height: 700px;
    width: 1200px;
    position: relative;
    margin: 0 auto;
    top: 69px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.background h2,
.background h4 {
    text-align: center;
    background-color: black;
    width: 100%;
}

.background h2 {
    padding-top: 20px;
}
.background h4 {
    padding-bottom: 20px;
}

/* -------------------------------------------- */

    .monthlyImages {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        position: relative;
        top: 90px;
    }

    .item {
        padding: 5px;
    }

    .item img {
        height: 200px;
        margin: 10px;
        display: block;
    }

    .item span {
        display: block;
        padding: 5px;
        font-weight: bold;
        text-align: center;
    }
    /* Text */

    .monthlyTea {
        width: 1000px;
        position: relative;
        margin: 0 auto;
        top: 90px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        line-height: 50px;
    }

    .monthlyTea h2,
    .monthlyTea h4 {
        text-align: center;
    }

    /* ------------------------------ */

    .flex-container-locations {
        background-image: url(https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-locations-background.jpg);
        height: 500px;
        position: relative;
        top: 140px;
        justify-content: center;
        text-align: center;
        display: flex;
        margin: 0 auto;
        width: 1200px;
    }  

    .flex-container-locations span.title {
        display: flex;
        position: relative;
        top: 40px;
        left: 517px;
        text-align: center;
        font-size: 30px;
        font-weight: 900;
    }

    .left {
        display: flex;
        justify-content: center;
        text-align: center;
        flex-direction: column;
        line-height: 10px;
    }

    .left span {
        background-color: black;
        height: 15%;
        padding-top: 20px;
        width: 300px;
        position: relative;
        right: 50px;
        margin-right: 40px;
    }

    
    .center {
        display: flex;
        justify-content: center;
        text-align: center;
        flex-direction: column;
        line-height: 10px;
    }

    .center span {
        background-color: black;
        height: 15%;
        padding-top: 20px;
        width: 300px;
        position: relative;
        right: 50px;
        margin-right: 40px;
    }
    .right {
        display: flex;
        justify-content: center;
        text-align: center;
        flex-direction: column;
        line-height: 10px;
    }

    .right span {
        background-color: black;
        height: 15%;
        padding-top: 20px;
        width: 300px;
        position: relative;
        right: 50px;
        margin-right: 40px;
    }

    .Bold-Location {
        font-weight: 800;
        letter-spacing: 0.5px;
        font-size: 25px;
    }

    /* ----------------------------------------------- */

    footer div.Foot-Text{
        height: 200px;
        position: relative;
        top: 150px;
        justify-content: center;
        text-align: center;
        line-height: 50px;
    }

    footer span {
        text-align: left;
        margin-left: 20px;
        position: relative;
        top: 120px;
        font-family: Helvetica;
    }

I apologise that a Codecademer was not able to get to you sooner. We have a very timed pace schedule and we have had at least 20 requests for programming help today. I am going to try and find you some tips to help you make your programming up and running again. If you would like further help contact me at @milesmccracken. Your response is very much needed. Get back with me as soon as you can.

Yeah, thanks any tips to make the code less clumsy and repetitive would be really appreciated! :smiley:

Where are you feeling like it’s clumsy? Is it just not as streamlined as you’d like?

Yes, it feels like I’ve done the project wrong.

i.e I had to position every element relatively on the page for them not to bump into each other etc. It just feels like this could’ve been done much easier than I did it.