Project Tea Cozy under Flexbox section

I’m having two issues.

The first one is that my background images set in the css file are not showing, not sure what I’m doing wrong. The second issues is the I can seem to get the copyright line to show at the bottom, it keeps mixing with the content above.

Project link: https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-making-a-website-responsive/modules/fecp-layout-with-flexbox/projects/tea-cozy

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Tea Cozy</title>
  <link rel="stylesheet" href="css/styles.css"> </head>

<body>
  <header class="flex-container">
    <img src="images/img-tea-cozy-logo.webp" alt="Tea Cozy">
    <nav>
        <span><a href="#mission">Mission</a></span>
        <span><a href="#collection">Featured Tea</a></span>
        <span><a href="#locations">Locations</a></span>
    </nav>
  </header>
  <main>
    <!-- Mission -->
    <section id="mission" class="flex-container">
      <article class="content">
        <h2>Our Mission</h2>
        <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
      </article>
    </section>
    <!-- Collection -->
    <section id="collection">
      <h2>Tea of the Month</h2>
      <h4>What's Steeping at The Tea Cozy?</h4>
      <section class="flex-container items">
        <article class="item">
          <img src="images/img-berryblitz.webp" alt="Fall Berry Blitz Tea">
          <span>Fall Berry Blitz Tea</span>
        </article>
        <article class="item">
          <img src="images/img-spiced-rum.webp" alt="Spiced Rum Tea">
          <span>Spiced Rum Tea</span>
        </article>
        <article class="item">
          <img src="images/img-donut.webp" alt="Seasonal Donuts">
          <span>Seasonal Donuts</span>
        </article>
        <article class="item">
          <img src="images/img-myrtle-ave.webp" alt="Myrtle Ave Tea">
          <span>Myrtle Ave Tea</span>
        </article>
        <article class="item">
          <img src="images/img-bedford-bizarre.webp" alt="Bedford Bizzare Tea">
          <span>Bedford Bizzare Tea</span>
        </article>
      </section>
    </section>
    <!-- Locations -->
    <section id="locations">
      <h2>Locations</h2>
      <section class="flex-container locations">
        <article class="location">
          <h3>Downtown</h3>
          <p>384 West 4th St</p>
          <p>Suite 108</p>
          <p>Portland, Maine</p>
        </article>
        <article class="location">
          <h3>East Bayside</h3>
          <p>3433 Phisherman's Ave</p>
          <p>(Northwest Corner)</p>
          <p>Portland, Maine</p>
        </article>
        <article class="location">
          <h3>Oakdale</h3>
          <p>515 Crescent Avenue</p>
          <p>Second Floor</p>
          <p>Portland, Maine</p>
        </article>
      </section>
      <!-- Contact -->
      <section id="contact">
        <h2>The Tea Cozy</h2>
        <h5>contact@theteacozy.com</h5>
        <h5>917-555-8904</h5>
      </section>
  </main>
  <!-- Footer -->
  <footer>
    <h5>&#169; copyright The Tea Cozy 2017</h5>
  </footer>
</body>

</html>

CSS

body {
  background-color: #000000;
  color: seashell;
  font-family: Helvetica;
  font-size: 22px;
  margin: 0;
  opacity: 0.9;
  text-align: center;
}

header {
  align-items: center;
  background-color: #000000;
  border-bottom: 1px solid seashell;
  height: 69px;
  position: fixed;
  width: 100%;
  z-index: 1;
}

header img {
  height: 50px;
  padding-left: 10px;
}

nav {
  display: block;
  flex-grow: 1;
  text-align: right;
}

nav span {
  display: inline-block;
  padding: 20px 10px;
}

a {
  color: seashell;
}

main {
  margin: auto;
  opacity: 0.9;
  padding-top: 69px;
  width: 1200px;
}

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

.flex-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.content {
  background-color: #000000;
  margin: auto;
  width: 100%;
}

.item {
  padding: 10px;
}

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

.item span {
  display: block;
  font-weight: bold;
  padding: 10px;
  text-align: center;
}

.location {
  background-color: #000000;
  display: flex;
  flex-basis: 280px;
  flex-direction: column;
  justify-content: center;
  margin: 5px 20px;
  padding: 10px;
  opacity: 1.0;
}

#mission {
  background-image: url(./images/img-mission-background.webp);
  height: 700px;
  padding-top: 70px;
}

#collection {
  height: 700px;
  margin: auto;
  padding-top: 70px;
  width: 1000px;
}

#locations {
  background-image: url(./images/img-locations-background.webp);
  height: 500px;
  padding-top: 70px;
}

#contact {
  height: 200px;
}

Thanks in advance for your help!

Hi @justcallmejerry

Image paths in the url() function must be wrapped in quote marks.

Your HTML structure is not correct, not all opening tags have matching closing tags.

Found the missing closing tag, and got the images working.

Thanks again for you help!

1 Like

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