Tea cozy

Hello all, I am have been working on the Tea Cozy Project and I am getting nowhere with 2 images not loading properly in my code. I am using vsc.
img-mission-background and img-location-background in the images folder.
I am sure something is wrong with my path. I have tried and looked at some other alt, and still unable to get my images to load properly as they should. The rest of the CSS seems to be working.

This is my directory:
image

type or paste code here
```<!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 rel="stylesheet" href="resources\CSS\style..css">
    <title>Tea Cozy</title>
</head>
<body>

<!--navbar/logo -->
<nav class="navbar">
    <div class="container nav-container">
        <img src="resources\images\img-tea-cozy-logo.webp" alt="tea cozy logo" id="logo">
        <div id="nav-link-container">
            <a href="#" class="nav-link">Mission</a>
            <a href="#" class="nav-link">Featured Tea</a>
            <a href="#" class="nav-link">Locations</a>
        </div>
    </div>
</nav>
<!--header section-->
<header>
    <div class="container miss">
        <!--<img class="mission-image" src="resources\images\img-mission-background.jpg"/>-->
        <div class="container mission">
            <h2>Our Mission</h2>
            <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
        </div>
    </div>  
</header>
<!--Tea of the month-->
<section>
    <div class="container tea-o-month">
        <div class="monthly-text">
            <h2>Tea of the Month</h2>
            <h4>What's Steeping at the Tea Cozy?</h4>
        </div>
        <div class="container month-tea">
            <div class="container item-month">
                <img src="resources\images\img-berryblitz.jpg" alt="Berry Blitz Tea">
                <h4>Fall Berry Blitz Tea</h4>
            </div>  
            <div class="container item-month">
                <img src="resources\images\img-spiced-rum.jpg" alt="Spiced Rum Tea">
                <h4>Spiced Rum Tea</h4>
            </div>
            <div class="container item-month">
                <img src="resources\images\img-donut.jpg" alt="Donut">
                <h4>Seasonal Donuts</h4>
            </div>
            <div class="container item-month">
                <img src="resources\images\img-myrtle-ave.jpg" alt="Myrtle Ave Tea">
                <h4>Myrtle Ave Tea</h4>
            </div>
            <div class="container item-month">
                <img src="resources\images\img-bedford-bizarre.jpg" alt="Bedford Bizarre Tea">
                <h4>Bedford Bizarre Tea</h4>
            </div>
        </div>
    </div> 
</section>
<!--Locations Section-->
<section class="mobile-flex">
    <div class="container local">
        <h2>Locations</h2>
        <div class="container location">  
            <div class="container address">
                <h3>Downtown</h3>
                <p>384 West 4th St</p>
                <p>Suite 108</p>
                <p>Portland, Main</p>
            </div>
            <div class="container address">
                <h3>East Bayside</h3>
                <p>3433 Phisherman's Avenue</p>
                <p>(Northwest Corner)</p>
                <p>Portland, Main</p>
            </div>
            <div class="container address">
                <h3>Oakdale</h3>
                <p>515 Crescent Avenue</p>
                <p>Second Floor</p>
                <p>Portland, Main</p>
            </div>
        </div>
    </div>
</section>
<!--footer-->
<footer>
    <div class="container contact">
        <h2>The Tea Cozy</h2>
        <p>contact@theteacozy.com</p>
        <p>917-555-8904</p>
    </div>
<p class="copyright">copyright The Tea Cozy 2017</p>
</footer>

    
</body>
</div>
</html>

type or paste code here

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


body {
  background-color: black;
  font-family: Helvetica;
  font-size: 22px;
  color: seashell;
  opacity: 0.9;

}
/* Flex universal */
.container {
  display: flex;
}

/* navbar/logo */
nav {
  border-bottom: 1px solid seashell;
  min-height: 69px;
  position:sticky;
  top: 0;
  background-color: black;
  opacity: 75%
} 

.nav-container {
  justify-content: space-between;
  align-items: center;
}


#nav-link-container {
  display: flex;
  justify-content: space-between;
  align-content: center;
  text-align: center;
  margin-top: 10px;
}

#logo {
  height: 50px;
  width: auto;
  margin-left: 10px;
  margin-top: 10px;
}

.nav-link {
  margin-right: 15px;
  color: seashell;
  padding: 5px;
  
}

.nav-link:hover {
  color: white;
  text-decoration: underline overline;
}

/*header section*/
.miss {
  background-image: url("./resources/images/img-mission-background.jpg");
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 700px;
  width: 95%;
}

.mission {
  background-color: black;
  flex-direction:column;
  min-height: 100px;
  max-width: 1200px;
  text-align: center;
  justify-content: space-between;
  padding: 10px 0;
}


/* Tea of the month */
.tea-o-month {
  flex-direction: column;
  align-items: center;
  margin: 50px 0;

}

.month-text {
  max-width: 1000px;
  text-align: center;
  margin-bottom: 10px;
}

.month-tea {
  max-width: 1000px;
  flex-flow: wrap;
  justify-content: center;
  
}
.item-month {
  flex-direction: column;
  text-align: center;
}
.item-month img {
  height: 200px;
  width: 300px;
  margin: 10px;
}

/* Locations Section */
.local {
  background-image: url("./resources/images/img-locations-background.jpg");
  max-width: 1200px;
  min-height: 500px;
  background-position: center;
  margin: auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
}

.location {
  width: 100%;
  height: auto;
  justify-content: center;
  align-items: center;
  flex-flow:wrap;
  margin-top: 15px;
}

.address {
  flex-direction: column;
  margin-right: 40px;
  background-color: black;
  width: 300px;
  height: 300px;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

.address>* {
  margin-top: 10px;
}
/* Footer */
.contact {
  height: 200px;
  width: 100%;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
}

.copyright {
  margin-left: 20px;
}

@media screen and (max-width: 1040px){
 

  .address-card {
      width: 250px;
      height: 250px;
      text-align: center;
      margin: 5px;
  }
  
}

@media screen and (max-width: 430px) {
  .flex-430px {
      display: flex;
      justify-content: space-around;
      flex-direction: column;
  }
  .nav-container {
      flex-direction: column;
  }
}

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