Tea Cozy project sticking point

Hi,
I am trying to get the tea cozy project completed, however have come to a few snagging points and not sure how to get around them.

I can’t get the h2 to sit on top of the h4 statements, additionally the locations boxes have seemingly all joined together and I can’t get them apart.

Here is a my HTML and CSS so far:

Tea Cozy
  • Mission
  • Featured Tea
  • Locations

Our Mission

Handpicked, Artisanlly Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea

    <section class ="picContainer">
      <h2>Tea of the Month</h2>
      <h4>What's steeping at the Tea Cozy?</h4>
        <card>
        <img class="teaPic" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg?_gl=1*s45ca9*_ga*MTQwNjQ2NzY0NS4xNjY0OTAyNzk2*_ga_3LRZM6TM9L*MTY2NjE3NDQ4Mi4yOC4xLjE2NjYxNzk4NjguNTguMC4w" alt="berry tea">
        <h4>Fall Berry Blitz Tea</h4>
      </card>
      <card>
        <img class="teaPic" src ="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg?_gl=1*ip29xb*_ga*MTQwNjQ2NzY0NS4xNjY0OTAyNzk2*_ga_3LRZM6TM9L*MTY2NjE3NDQ4Mi4yOC4xLjE2NjYxNzk4NjguNTguMC4w" alt ="spiced rum tea">
        <h4>Spiced Rum Tea</h4>
      </card>
      <card>
        <img  class="teaPic" src ="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg?_gl=1*ax5085*_ga*MTQwNjQ2NzY0NS4xNjY0OTAyNzk2*_ga_3LRZM6TM9L*MTY2NjE3NDQ4Mi4yOC4xLjE2NjYxNzk4NjguNTguMC4w" alt ="seasonal donuts">
        <h4>Seasonal Donuts</h4>
      </card>
      <card>
        <img class="teaPic" src ="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg?_gl=1*ip29xb*_ga*MTQwNjQ2NzY0NS4xNjY0OTAyNzk2*_ga_3LRZM6TM9L*MTY2NjE3NDQ4Mi4yOC4xLjE2NjYxNzk4NjguNTguMC4w" alt ="mrytle ave tea">
        <h4>Mrytle Ave Tea</h4>
      </card>
      <card>
        <img class="teaPic" src ="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg?_gl=1*ax5085*_ga*MTQwNjQ2NzY0NS4xNjY0OTAyNzk2*_ga_3LRZM6TM9L*MTY2NjE3NDQ4Mi4yOC4xLjE2NjYxNzk4NjguNTguMC4w" alt ="bedford bizarre tea">
        <h4>Bedford Bizarre Tea</h4>
      </card>
   </section>

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

<section class ="contact">
  <h2>The Tea Cozy</h2>
  <h5>[email protected]</h5>
  <h5>917-555-8904</h5>
  
  </section>
    <footer>
      <p id ="copyright">copyright The Tea Cozy 2017</p>
    </footer>
  </body>

/Universal Styles/
html {
font-family: Helvetica;
font-size:22px;
color:seashell;
background-color:black;
opacity:0.9;

}

body {
text-align:center;
}
/Header/
header {
position:fixed;
top:0;
border-bottom: 1px solid seashell;
z-index:1;
width:100%;
display:flex;
opacity:1;
justify-content:space-between;
}

#logo {
max-height:50px;
margin-left:10px;
padding: 5px 10px;
}

ul {
text-decoration:underline;
list-style-type:none;
display:inline-flex;
justify-content:space-around;
}
li {
align-items:flex-end;
padding: 0 20px;
}

/Banner/
.banner {
margin: auto;
background-image:url(“https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg?_gl=1*2y6aqo*_ga*MTQwNjQ2NzY0NS4xNjY0OTAyNzk2*_ga_3LRZM6TM9L*MTY2NjE3NDQ4Mi4yOC4xLjE2NjYxNzk4NjguNTguMC4w”);
background-position: center;
display: flex;
max-width: 1200px;
height:700px;

}

.bannerText {
margin: auto;
background-color: black;
opacity:0.9;
display:flex;
width: 100%;
padding:20px;
}

.bt1 {
align-items: center;
display: flex;
flex-wrap: wrap;
text-align: center;
justify-content: center;
align-content: flex-start;
align-items: flex-start;
}

/tea of the month section/

.picContainer {
max-width:1000px;
display:inline-flex;
flex-wrap:wrap;
align-content:center;
justify-content: center;
}

.teaPic {
max-width:300px;
max-height: 200px;
padding:10px;
}

/locations/

.locations{
margin:auto;
background-image: url(“https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg?_gl=1*1i25p3o*_ga*MTQwNjQ2NzY0NS4xNjY0OTAyNzk2*_ga_3LRZM6TM9L*MTY2NjE3NDQ4Mi4yOC4xLjE2NjYxNzk4NjguNTguMC4w”);
background-position:center;
height:500px;
display:flex;
width:90%;
}

.box {
background-color:black;
opacity: 0.9;
max-width:300px;
display:flex;
align-content:center;
justify-content: center;
box-sizing:border-box;

}

#1, #2, #3 {
padding:60px 30px 60px 30px;
flex-wrap: wrap;
}

/contact/

.contact {
height:200px;
}

#copyright {
text-align: left;
padding-left:20px;
}

Any pointers greatly appreciated

Hi there,

How goes figuring everything out? Are you still needing help? If so, could you edit your post and have your code pasted within the preformatted text option?

image

It will make your HTML and CSS easier to read. Thank you! :slight_smile:

Hi,

Yes still needing help - I didn’t know about the little button you circled, thank you for pointing that one out :slight_smile:

Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href ="./resources/style.css" type="text/css" rel="stylesheet"/>
    <title>Tea Cozy</title>
</head>
<body>
    <header>
        <img src ="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png?_gl=1*uotfei*_ga*MTQwNjQ2NzY0NS4xNjY0OTAyNzk2*_ga_3LRZM6TM9L*MTY2NjE3NDQ4Mi4yOC4xLjE2NjYxNzk4NjguNTguMC4w" id="logo">
          <ul>
            <li>Mission</li>
            <li>Featured Tea</li>
            <li>Locations</li>
            </ul>
        </header>
        <section>
          <div class ="banner">
            <div class ="bannerText">
            <h2 class ="bt1">Our Mission</h2>
            <h4 class="bt1">Handpicked, Artisanlly Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea </h4>
            </div>
           </div>
        </section>
    
        <section class ="picContainer">
          <h2>Tea of the Month</h2>
          <h4>What's steeping at the Tea Cozy?</h4>
            <card>
            <img class="teaPic" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg?_gl=1*s45ca9*_ga*MTQwNjQ2NzY0NS4xNjY0OTAyNzk2*_ga_3LRZM6TM9L*MTY2NjE3NDQ4Mi4yOC4xLjE2NjYxNzk4NjguNTguMC4w" alt="berry tea">
            <h4>Fall Berry Blitz Tea</h4>
          </card>
          <card>
            <img class="teaPic" src ="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg?_gl=1*ip29xb*_ga*MTQwNjQ2NzY0NS4xNjY0OTAyNzk2*_ga_3LRZM6TM9L*MTY2NjE3NDQ4Mi4yOC4xLjE2NjYxNzk4NjguNTguMC4w" alt ="spiced rum tea">
            <h4>Spiced Rum Tea</h4>
          </card>
          <card>
            <img  class="teaPic" src ="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg?_gl=1*ax5085*_ga*MTQwNjQ2NzY0NS4xNjY0OTAyNzk2*_ga_3LRZM6TM9L*MTY2NjE3NDQ4Mi4yOC4xLjE2NjYxNzk4NjguNTguMC4w" alt ="seasonal donuts">
            <h4>Seasonal Donuts</h4>
          </card>
          <card>
            <img class="teaPic" src ="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg?_gl=1*ip29xb*_ga*MTQwNjQ2NzY0NS4xNjY0OTAyNzk2*_ga_3LRZM6TM9L*MTY2NjE3NDQ4Mi4yOC4xLjE2NjYxNzk4NjguNTguMC4w" alt ="mrytle ave tea">
            <h4>Mrytle Ave Tea</h4>
          </card>
          <card>
            <img class="teaPic" src ="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg?_gl=1*ax5085*_ga*MTQwNjQ2NzY0NS4xNjY0OTAyNzk2*_ga_3LRZM6TM9L*MTY2NjE3NDQ4Mi4yOC4xLjE2NjYxNzk4NjguNTguMC4w" alt ="bedford bizarre tea">
            <h4>Bedford Bizarre Tea</h4>
          </card>
       </section>
    
       <section class ="locations">
         <h2>Locations</h2>
         <div class ="box" id="1">
           <h3>Downtown 384 West 4th St Suite 108 Portland,Maine</h3>
         </div>
           <div class ="box" id="2">
             <h3>East Bayside 3433 Phisherman's Avenue (Northwest Corner) Portland, Maine</h3>
           </div>
             <div class ="box" id="3">
               <h3>Oakdale 515 Crescent Avenue Second Floor Portland, Maine</h3>
             </div>
         </section>
    
    <section class ="contact">
      <h2>The Tea Cozy</h2>
      <h5>[email protected]</h5>
      <h5>917-555-8904</h5>
      
      </section>
        <footer>
          <p id ="copyright">copyright The Tea Cozy 2017</p>
        </footer>
      </body>
    
</body>
</html>

and this is my CSS code:

/*Universal Styles*/
html {
    font-family: Helvetica;
    font-size:22px;
    color:seashell;
    background-color:black;
    opacity:0.9;
    
    }
   
  body {
    text-align:center;
  }
  /*Header*/
  header {
    position:fixed;
    top:0;
    border-bottom: 1px solid seashell;
    z-index:1;
    width:100%;
    display:flex;
    opacity:1;
    justify-content:space-between;
  }
  
  #logo {
    max-height:50px;
    margin-left:10px;
    padding: 5px 10px;
  }
  
  ul {
    text-decoration:underline;
    list-style-type:none;
    display:inline-flex;
    justify-content:space-around;
    }
  li {
    align-items:flex-end;
    padding: 0 20px;
  }
  
  /*Banner*/
  .banner {
    margin: auto;
    background-image:url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg?_gl=1*2y6aqo*_ga*MTQwNjQ2NzY0NS4xNjY0OTAyNzk2*_ga_3LRZM6TM9L*MTY2NjE3NDQ4Mi4yOC4xLjE2NjYxNzk4NjguNTguMC4w");
    background-position: center;
    display: flex;
    max-width: 1200px;
    height:700px;
    
  }

  .bannerText {
    margin: auto;
    background-color: black;
    opacity:0.9;
    display:flex;
    width: 100%;
    padding:20px;
  }

  .bt1 {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
    align-content: flex-start;
    align-items: flex-start;
  }

  /*tea of the month section*/

  .picContainer {
    max-width:1000px;
    display:inline-flex;
    flex-wrap:wrap;
    align-content:center;
    justify-content: center;
  }
  
   
  .teaPic {
    max-width:300px;
    max-height: 200px;
    padding:10px;
  }

  /*locations*/

  .locations{
    margin:auto;
    background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg?_gl=1*1i25p3o*_ga*MTQwNjQ2NzY0NS4xNjY0OTAyNzk2*_ga_3LRZM6TM9L*MTY2NjE3NDQ4Mi4yOC4xLjE2NjYxNzk4NjguNTguMC4w");
    background-position:center;
    height:500px; 
    display:flex;
    width:90%;
}

.box {
    background-color:black;
    opacity: 0.9;
    max-width:300px;
    display:flex;
    align-content:center;
    justify-content: center;
    box-sizing:border-box;

}

#1, #2, #3 {
    padding:60px 30px 60px 30px;
    flex-wrap: wrap;
    }

/*contact*/

.contact {
    height:200px;
}

#copyright {
    text-align: left;
    padding-left:20px;
}

Hey @beta9833898889

In this case you just need to either remove display: flex; on the .banner-text class or adding the flex-direction: column property on both the .bannerText class and .picContainer class

Here you didn’t add the justify-content property on the .location class that can help you add space on those boxes.

I hope this help :slight_smile:

1 Like

Thank you! Will make those adjustments now :slight_smile: