Tea Cozy Project

Hello Everyone!

I am looking for some feedback regarding my attempt to get the Tea Cozy Project done.
The link to the project’s requirements is here: https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-redline.jpg

As you can see by my code, things are not as polished as they should be. I am looking for some special considerations about the heading, and the distribution of the images in the Tea of the Month section. I would also love to know if my “container” structure makes sense for the purposes of working with the flexbox layout.

Thank you in advance dear community!

<!DOCTYPE html>
<html>
<head>
<title>Tea-Cozy</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
  <!--header-->
  <div class="header">
    <div class="child">
      <img src="Stock\img-tea-cozy-logo.webp" alt="Tea Cozy logo">
    </div>
    <div class="child" id="header">
      <div>
        <p>Mission</p>
      </div>
      <div>
        <p>Featured Tea</p>
      </div>
      <div>
        <p>Locations</p>
      </div>
    </div>
  </div>
  <div class='main'>
    <div class='container'>
      <div class='child'>
        <img src="Stock\img-mission-background.webp" alt="mission image">
      <div class='child' id="mission">
        <h2>Our Mission</h2>
        <h3>Hand Picked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h3>
      </div>
    </div>
    <div class='container'>
      <div class="child">
        <h2>Tea of the Month</h2>
        <h3>What's is steeping at The Tea Cozy?</h3>
      </div>
      <div class="child" id="images">
        <div class="item">
          <img src="Stock\img-berryblitz.webp" alt="Berry">
          <h3>Fall Berry Blitz Tea</h3>
        </div>
        <div class="item">
          <img src="Stock\img-spiced-rum.webp" alt="Rum">
          <h3>Spiced Rum Tea</h3>
        </div>
        <div class="item">
          <img src="Stock\img-donut.webp" alt="Donut">
          <h3>Seasonal Donuts</h3>
        </div>
        <div class="item">
          
        <img src="Stock\img-myrtle-ave.webp" alt="Myrtle">
        <h3>Myrtle Ave Tea</h3>
        </div>
        <div class="item">
        <img src="Stock\img-bedford-bizarre.webp" alt="Bedford">
        <h3>Bedford Bizarre Tea</h3>
        </div>
      </div>
    </div>
    <h2 class="unique">Locations</h2>
    <div class="container" id="final">
      <div class="child">
        <h3>Downtown</h3>
        <h4>384 West 4th St</h4>
        <h4>Suite 108</h4>
        <h4>Portland, Maine</h4>
      </div>
      <div class="child">
        <h3>East Bayside</h3>
        <h4>3433 Phisherman's Avenue</h4>
        <h4>(North West Corner)</h4>
        <h4>Portland, Maine</h4>
      </div>
      <div class="child">
        <h3>Oakdale</h3>
        <h4>515 Crescent Avenue</h4>
        <h4>Second Floor</h4>
        <h4>Portland, Maine</h4>
      </div>
    </div>
    <div class="footer">
      <h2>The Tea Cozy</h2>
      <h5>contact@theteacozy.com</h5>
      <h5>917-555-8964</h5>
    </div>
    <h5 class="last">copyrigth The Tea Cozy 2017</h5>
  </div>
 
</body>
</html> 

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 22px;
  color: seashell;
  background-color: black;
  opacity: 0.9;
  text-align: center;
}
.header{
  height: 69px;
  padding: 10px;
  display:flex;
  border-bottom: 1px solid seashell;
}
.header img{
  height: 50px;
  display: flex;
  justify-content: space-between;
}
#header{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  max-width: 20%;
}

#header p{
  text-decoration: underline;
}

.main {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.child {

  align-items: center;
}
#mission{
  position: absolute;
  bottom: 30%;
  background-color: black;
  width: 1200px;
}
#images{
  display: flex;
  flex-wrap: wrap;
  width: 1000px;
  align-items: center;
  justify-content: space-around;
}
#images img{
  width: 300px;
  height: 200px;
}
.unique{
  position: absolute;
  top: 222%;
}
#final{
  background: url('Stock/img-locations-background.webp');
  height: 700px;
  width: 1200px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
#final .child{
  width: 300px;
  background-color: black;
}
.last{
  position: relative;
  right: 43%;
}



1 Like

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.