Tea Cozy "Tea of the Month" and "Locations" Flex box Properties

Hi everyone,

I am working on the Tea Cozy project, and I am struggling with two major parts. For the “Tea of the Month” section, I have been having issues with getting the text to be positioned directly under the images, and to be able to adjust the spacing between the images. Also, I have been having issues with keeping the elements within 1000px. My other issue, is that images in the “Locations” section are not spaced out. I have tried multiple possible flex box properties and combination of those properties, but when I do, the webpage either doesn’t change or essentially undoes the action (especially in the “Tea of the Month” section). I would like to know if I have any code that is overriding any other code that I’ve written or if there is another flex box property combination I need to consider. P.S. the comments are labels for the webpage sections, code I may or may not keep, and other code I would like to consider implementing.

Tea Cozy Project link:
[file:///Users/simonemcdaniels/Desktop/Codecademy/projects/Tea%20Cozy/index.html#locations](file:///Users/simonemcdaniels/Desktop/Codecademy/projects/Tea%20Cozy/index.html#locations)
HTML 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">
    <title>Tea Cozy | Codecademy</title>
    <link href="../Tea Cozy/resources/css/styles.css" rel="stylesheet" type="text/css">
    <!-- /Users/simonemcdaniels/Desktop/Codecademy/projects/Tea Cozy/index.html -->
    <!-- projects/Tea Cozy/index.html -->

</head>

<body>
    <!-- Navigation Bar -->
    <header>
        <!-- Tea Cozy Logo -->
        <img src="/Users/simonemcdaniels/Desktop/Codecademy/projects/Tea Cozy/resources/images/img-tea-cozy-logo.png" class="logo">
        <nav>
            <ul>
                <li><a href="#mission" class="sections">Mission</a></li>
                <li><a href="#month" class="sections">Featured Tea</a></li>
                <li><a href="#locations" class="sections">Locations</a></li>
            </ul>
            <!-- figure out how to link list items to sections of page -->
        </nav>
     </header>  
     <!-- consider coding breadcrumb links as flat buttons -->
     <!-- Hover function/command--cursor behavior should change when mouse hovers over underlined words -->
    
    
     <main>
     <!-- Mission section -->
                <img src="/Users/simonemcdaniels/Desktop/Codecademy/projects/Tea Cozy/resources/images/img-mission-background.jpg" class="mission-img">
                    <!-- insert above image as a background image -->
                    <h2 id="mission">Our Mission</h2>
                    <h4 class="description">Handpicked, Artisanally Currated, Free Range, Sustainable, Small Batch, Fair Trade, Organic</h4>
  
    <!-- Tea of the Month section -->
        <h2 id="month">Tea of the Month</h2>
        <h4 class="steeping"> What's Steeping at The Tea Cozy?</h4>
        <div class="teas">
            <img src="/Users/simonemcdaniels/Desktop/Codecademy/projects/Tea Cozy/resources/images/img-berryblitz.jpg" class="fall-berry-img">
            <h4 class="fall-berry">Fall Berry Blitz Tea</h4>    
        
            <img src="/Users/simonemcdaniels/Desktop/Codecademy/projects/Tea Cozy/resources/images/img-spiced-rum.jpg" class="spiced-rum-img">
            <h4>Spiced Rum Tea</h4>
        
            <img src="/Users/simonemcdaniels/Desktop/Codecademy/projects/Tea Cozy/resources/images/img-donut.jpg" class="seasonal-donuts-img">                
            <h4>Seasonal Donuts</h4>
        
            <img src="/Users/simonemcdaniels/Desktop/Codecademy/projects/Tea Cozy/resources/images/img-myrtle-ave.jpg" class="myrtle-ave-img">
            <h4>Myrtle Ave Tea</h4>
    
            <img src="/Users/simonemcdaniels/Desktop/Codecademy/projects/Tea Cozy/resources/images/img-bedford-bizarre.jpg" class="bedford-bizarre-img">
            <h4>Bedford Bizarre Tea</h4>
        </div>    
        <!-- Consider making containers "pop out" when mouse hovers over each container -->
        
    <!-- Locations section -->
        <h2 id="locations">Locations</h2>
        <img src="/Users/simonemcdaniels/Desktop/Codecademy/projects/Tea Cozy/resources/images/img-locations-background.jpg" class="locations-background">
           <div class="locations-sect">
                <div class="downtown">
                    <h3>Downtown</h3>
                    <p>384 West 4th St</p>
                    <p>Suite 108</p>
                    <p>Portland, Maine</p>
                </div>
                <div class="east-bayside">
                    <h3>East Bayside</h3>
                    <p>3433 Phisherman's Avenue</p>
                    <p>(Northwest Corner)</p>
                    <p>Portland, Maine</p>
                </div>
                <div class="oakdale">
                    <h3>Oakdale</h3>
                    <p>515 Crescent Avenue</p>
                    <p>Second Floor</p>
                    <p>Portland, Maine</p>
                </div>
            </div> 
    </main>

<!-- Footer -->
    <footer>
        <div class="contact-info">
            <h2>The Tea Cozy</h2>
            <h5>[email protected]</h5>
            <h5>917-555-8904</h5>
        </div>
        <h5 class="copyright">copyright The Tea Cozy 2017</h5> 
    </footer>
</body>
</html>

    <!-- /Users/simonemcdaniels/Desktop/Codecademy/projects/Tea Cozy/resources/css/styles.css -->
<!-- projects/Tea Cozy/resources/css/styles.css -->

CSS code:

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px; 
    color: seashell;
    background-color: black;  
    opacity: 0.8;
    text-align: center; 
    margin: auto 0;   
}

/* Navigation Bar */
header {  
    position: fixed; 
    text-decoration: underline; 
    display: flex;
    width: 100%;
    border-bottom: 1px solid seashell;
    background-color: black; 
    height: 69px;
   } 
   

img.logo {
    height: 50px;
    padding-left: 10px;
    padding-top: 10px;
    display: inline-flex;
    justify-content: flex-start;
} 

nav {
    display: flex;
    background-color: black; 
    height: 69px;
    border-bottom: 1px solid seashell;
    text-decoration: underline; 
    display: inline-flex;
    justify-content: flex-end;
    flex-grow: 2;
} 

ul {  
   height: 69px;
   padding-right: 10px;
   display: flex;
}

li {
    text-decoration: underline;
    height: 69px;
    padding-right: 20px;
    display: inline-flex;    
} 

a {
    color: seashell;
    text-decoration: underline;
    cursor: pointer;
}

a, .sections:hover {
    color: #c9c9c9;
    text-decoration: none;
    cursor: pointer;
}

.sections:visited {
    color: #c9c9c9;

}
    
img.mission-img {
    height: 700px;
    width: 1200px;
    position: static;

}

/* Mission */

#mission {
    background-color: black;
    position: relative;
    bottom: 375px;
    margin: 0 auto;  
    width: 1200px;
    height: 50px;
    padding-top: 10px;    
}

h4.description {
    background-color: black;
    position: relative;
    bottom: 375px;
    margin: 0 auto;  
    width: 1200px;
    height: 50px;
    padding-top: 10px;  
}


/* Tea of the Month */

div.teas {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#month {
    width: 1000px;
    display: flex;
    flex-direction: column;  
}

h4.steeping {
    width: 1000px;
    display: flex;
    flex-direction: column;  
}

 img.fall-berry-img, img.spiced-rum-img, img.seasonal-donuts-img, img.myrtle-ave-img, img.bedford-bizarre-img {
    height: 200px;
    width: 300px;
    display: flex;  
    
}


h4.fall-berry {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
}
/* Property for putting elements under image? */

/* h4.fall-berry, h4.spiced-rum, h4.seasonal-donuts, h4.myrtle-ave, h4.bedford-bizarre {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
       
} */


/* h4.spiced-rum {
       

}


h4.seasonal-donuts {
        
} 

h4.myrtle-ave {
    
     
}

h4.bedford-bizarre {
    
} */


/* Locations */

#locations {
    position: relative;
    top: 100px;
    padding-top: 30px;
}


img.locations-background {
    height: 800px;
    width: 1200px;
    position: static;
    
   
}
/* consider adding id properties */

 /* consider adding and adjusting property */


 /* h3, p {
    display: flex;
    align-content: space-between;
    
 } */

 div.locations-sect {
    display: flex;
    justify-content: center; 
 }

div.downtown, div.east-bayside, div.oakdale {
    background-color: black;
    height: 300px;
    width: 300px;
    opacity: 1;
    position: relative;
    bottom: 710px;
    display: flex;
    flex-direction: column; 
     
}

/* div.downtown, div.east-bayside {
   
} */
/* div.downtown, div.oakdale {
    display: flex;
    flex-shrink: 1;
} */


div.downtown {
    padding-right: 40px;
    display: inline-flex;
}

div.east-bayside {
    padding-right: 40px;
    display: inline-flex;
}

div.oakdale {
    padding-right: 40px;
    display: inline-flex;
}

 /* Footer */

div.contact-info {
    text-align: center;
    max-height: 200px;
    
}

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

Hi. I have no idea if I did this right. There probably is a better way to do it. The only thing I know is that I managed to get the wanted results.

Here is the result: The Tea Cozy

Here’s the HTML:

<!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="style.css">
    <title>The Tea Cozy</title>
</head>
<body>
    <header>
        <img src="img-tea-cozy-logo.webp" alt="tea cozy logo" id="logo" />
        <nav>
            <a href="#">Mission</a>
            <a href="#">Featured Tea</a>
            <a href="#">Locations</a>
        </nav>
    </header>
    <main>
        <div class="mission">
            <div id="mission">
                <h2>Our Mission</h2>
                <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
            </div>
        </div>
        <div class="TotM">
            <h2>Tea of the Month</h2>
            <h4>What's Steeping at The Tea Cozy?</h4>
            <div class="images1">
                <div class="options">
                    <img src="img-berryblitz.webp" alt="a mug with berries">
                    <h4>Fall Berry Blitz Tea</h4>
                </div>
                <div class="options">
                    <img src="img-spiced-rum.webp" alt="a tea box reading 'It pays to buy good tea'">
                    <h4>Spiced Rum Tea</h4>
                </div>
                <div class="options">
                    <img src="img-donut.webp" alt="a donut">
                    <h4>Seasonal Donuts</h4>
                </div>
            </div>
            <div class="images2">
                <div class="options">
                    <img src="img-myrtle-ave.webp" alt="A cup of tea hidden behind tulle">
                    <h4>Myrtle Ave Tea</h4>
                </div>
                <div class="options">
                    <img src="img-bedford-bizarre.webp" alt="a mug filled with red tea and sugar on the side">
                    <h4>Bedford Bizarre Tea</h4>
                </div>
            </div>
        </div>
        <div id="bg-img">
            <h2 id="titre">Locations</h2>
            <div class="locations">
                <div class="loc">
                    <h3>Downtown</h3>
                    <p>384 West 4th St
                    <br>
                    Suite 108
                    <br>
                    Portland, Maine</p>
                </div>
                <div class="loc">
                    <h3>East Bayside</h3>
                    <p>3433 Phisherman's Avenue
                    <br>
                    (Northwest Corner)
                    <br>
                    Portland, Maine</p>
                </div>
                <div class="loc">
                    <h3>Oakdale</h3>
                    <p>515 Crescent Avenue
                    <br>
                    Second Floor
                    <br>
                    Portland, Maine</p>
                </div>
            </div>
        </div>
    </main>
</body>
<footer>
    <div id="footer">
        <h2>The Tea Cozy</h2>
        <h5>[email protected]
            <br><br>
            917-555-8904
        </h5>
    </div>
    <div id="copyright"><h5>copyright The Tea Cozy 2017</h5></div>
</footer>
</html>

And the CSS:

* {
    background-color: rgb(0, 0, 0);
    font-family: Helvetica;
    font-size: 22px;
    color: seashell;
    text-align: center;
}

header {
    position: fixed;
    padding-left: 10px;
    height: 69px;
    border-bottom: 1px solid seashell;
    display: inline;
    background-color: rgb(0, 0, 0);
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    margin-top: 20px;
    box-sizing: border-box;
}

#logo {
    height: 50px;
    text-align: left;
    float: left;
    background-color: transparent;
}

nav {
    text-align: right;
    background-color: none;
    margin-right: 20px;
    margin-top: 10px;
    background-color: transparent;
}

nav a {
    margin: 20px;
}

h2 {
    font-size: 30px;
}

h3 {
    font-size: 26px;
}

h4 {
    margin-top: 10px;
}


main img {
    width: 300px;
    height: 200px;
}

main {
    margin-top: 100px;
}

.mission {
    background-image: url('https://raw.githubusercontent.com/melodyide/Tea-Cozy-Challenge/main/img-mission-background.webp');
    height: 700px;
    width: 1200px;
    margin: auto;
}

#mission {
    position: relative;
    top: 300px;
    padding: 5px;
}

.TotM {
    width: 1000px;
    margin: 50px auto;
}

.images1 {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-content: center;
}

.images2 {
    width: 680px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-content: center;
    margin: 0 auto;
}

#bg-img {
    background-image: url('https://raw.githubusercontent.com/melodyide/Tea-Cozy-Challenge/main/img-locations-background.webp');
    height: 500px;
    width: 1100px;
    margin: auto;
    padding: 20px;
}

#titre {
    background-color: transparent;
    margin-bottom: 15px;
}

.locations {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: row;
    margin: 0 auto;
    background-color: transparent;
}

.loc {
    width: 300px;
    margin: 40px 15px;
    background-color: black;
    line-height: 60px;
}

#footer {
    height: 200px;
    flex: 1;
    line-height: 40px;
}

#copyright {
    float: left;
    position: relative;
    margin-left: 20px;
}

1 Like

Hey! The Tea Cozy Project is definitely a doozy coming out of learning Flexbox stuff. Also super frustrating to not have someone to help you right away when you run into stuff like this. Hopefully this helps! (I think I can answer all of your questions - also this is my first time posting on the forum so hopefully I can format this response correctly.)

  1. To answer your big question, I utilized figure and figcaption - I find them to be the easiest ways to get images to have their captions locked under them and to manipulate them together.
  2. I was also frustrated at first trying to use a flexbox action to get these five images to line up like they do in the example document. I found NOT using flexbox to the easiest. I literally just separated the top three and bottom two into two rows, and then centered them horizontally in their respective rows.
  3. As far as your issues with making changes and them not taking effect. Try using “div”, “section”, and other ways to box off elements in your code more. I think of every element as a box - you have 5 images coded one after another, each one has it’s own box, along with the captions you put in as h4s. It will be VERY difficult to get your image and your H4 do the same thing you want it to do through CSS because they’re separate “boxes”. You’re basically telling one child to do something and the other four aren’t listening. If you look at my code, I have each image AND caption in a figure “box” - then to divide the images into separate rows I put the top three images into a “box” and the bottom two into a “box” - (div class= teas1) and (div class= teas2). Now that they’re in separate boxes I can manipulate those boxes individually.
    Sorry that’s a bit long-winded but let me know if that makes sense.

Here’s my HMTL (it’s not fully responsive or finished)

<!-- Header and Navigation -->
<div class="header">
    <img src="./resources/images/logo.png">
    <ul class="nav">
        <li><a href="#">Mission</a></li>
        <li><a href="#">Featured Tea</a></li>
        <li><a href="#">Locations</a></li>
    </ul>
</div>

<!-- Main Mission Section -->
<div class="main">
    <div class="banner">
        <h2>Our Mission</h2>
        <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
    </div>
</div>

<!-- Featured Tea Section -->
<div class="featured-tea">
    <h2>Tea of the Month</h2>
    <h3>What's Steeping at The Tea Cozy</h3>
</div>

<div class="teas1">
    <figure>
        <img src="./resources/images/berry-blitz.jpg" 
             alt="A top down image of a mug of tea">
        <figcaption>Fall Berry Blitz Tea</figcaption>
    </figure>

    <figure>
        <img src="./resources/images/spiced-rum.jpg" 
             alt="Opened box of tea">
        <figcaption>Spiced Rum Tea</figcaption>
    </figure>

    <figure>
        <img src="./resources/images/donut.jpg" 
             alt="A top down image of a mug of tea">
        <figcaption>Seasonal Donut</figcaption>
    </figure>
</div>
<div class="teas2">
    <figure>
        <img src="./resources/images/myrtle-ave.jpg" 
             alt="Donut with white powder on top">
        <figcaption>Myrtle Ave Tea</figcaption>
    </figure>

    <figure>
        <img src="./resources/images/bedford-bizarre.jpg" 
             alt="Top down image of a mug of tea and sugar container">
        <figcaption>Bedford Bizarre Tea</figcaption>
    </figure>
</div>

<!-- Locations Section -->

<div class="locations-section">
    <div class="locations">

        <div class="locations-header">
            <h2>Locations</h2>
        </div>

        <div class="downtown">
            <h3>Downtown</h3>
            <h4>384 West 4th St</h4>
            <h4>Suite 108</h4>
            <h4>Portland, Maine</h4>
        </div>

        <div class="east-bayside">
            <h3>East Bayside</h3>
            <h4>3433 Phisherman's Avenue</h4>
            <h4>(Northwest Corner)</h4>
            <h4>Portland, Maine</h4>
        </div>

        <div class="oakdale">
            <h3>Oakdale</h3>
            <h4>525 Crescent Avenue</h4>
            <h4>Second Floor</h4>
            <h4>Portland, Maine</h4>
        </div>

    </div>
</div>

<!-- Footer and Sub-footer Section -->

<div class="footer-section">
    <h2>The Tea Cozy</h2>
    <h5>[email protected]</h5>
    <h5>917-555-8904</h5>
</div>
<div class="subfooter">
    <h5>copyright The Tea Cozy 2017</h5>
</div>

Here’s my CSS:

body {
    background-color: black;
    font-size: 22px;
    text-align: center;
    max-width: 1300px;
}

h1, 
h2,
h3,
h4,
h5,
figcaption {
    opacity: 0.9;
    font-family: helvetica;
    color: seashell;
}


/* Header and Navigation Section */

.header {
    z-index: 1;
    height: 69px;
    position: fixed;
    top: 0px;
    width: 1300px;
    background-color: black;
}

.header img {
    height: 50px;
    margin-left: 10px;
    float: left;
    opacity: 0.9;
}   

.nav {
    float: right;
}

.nav li {
    display: inline-block;
    padding-right: 20px;
    opacity: 0.9;
}

.nav a {
    text-decoration: underline;
    font-family: helvetica;
    font-size: 22px;
    color: seashell;
    opacity: 0.9;
    text-align: center;
}

/* Main Mission Section */

.banner {
    background-color: black;
    width: 1200px;
    padding: 10px 0px;
    line-height: 10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}   

.main {
    height: 700px;
    width: 1200px;
    background-image: url(./images/background.jpg);
    background-position: center;
    background-repeat: no-repeat;
    max-width: 1200px;
    margin: 69px 50px 0px 50px;
    position: relative;
}

/* Featured Tea Section */

.featured-tea {
    width: 1000px;
    margin: 0 auto;
    padding-top: 60px;
    letter-spacing: -1px;
}

.teas1 figure {
    display: inline-block;
}

.teas2 figure {
    display: inline-block;

}

figcaption {
    font-weight: bold;
    letter-spacing: -1px;
    margin-top: 10px;
    padding-top: 0px;
}

figure img {
    height: 200px;
    width: 300px;
}

/* Locations Section */

.locations-section {
    background-image: url(./images/locations.jpg);
    background-position: center;
    background-repeat: no-repeat;
    height: 600px;
    width: 1200px;
    max-width: 1200px;
    position: relative;
    margin: 25px auto;
}

.locations {
    display: inline-block;
    margin-top: 90px;
}

.downtown,
.east-bayside,
.oakdale {
    width: 300px;
    height: 265px;
    background-color: black;
    margin: 0 40px;
    display: inline-block;
}


/* Foot and Sub-footer Section */

.footer {
    height: 200px;
    max-width: 1300px;
}

.subfooter {
    float: left;
}
2 Likes

Hi Tera,

Dunno if you were finally able to fix the issues you were having but maybe I can share some of my ideas. As you know, when it comes to coding there is no singular solution so my solution is probably one of many different routes you can take to achieve the specs/look that the project requires.

  • For the letters underneath the pictures in “Tea of the Month” section, for each type of tea I put both the picture and the name in one div for each of the different teas and named all five div containers the same class name “tea” since they all share the same css styling. Example, for “Fall Berry Blitz Tea” I made a div container named “tea” and in that container placed the img src and after that I put the name of the tea encased in an h4 element. For added flair I further placed a link inside the h4 so that I can make the name of the tea into a link. This is something extra that I put in but is not in the specs of the project.
    The img tag is an inline element but the h4 is a block-level element, therefore the name of the tea encased in the h4 element will automatically begin on the line below the image (at lease this is what I understand it to be) thereby placing the name below the image. To center it (and every other text in the page with the exception of the copyright at the bottom) I just centered all h2, h3, h4, and h5 elements in the global rules sections of my css file.

  • For the 1000px tea containers and things not being able to fit in it…I think if you do it like I mentioned above you will be able to fit all five teas in that container. I think that the problem in this case is that you have too many loose elements in your html code. If you group things a little more as mentioned in the first bullet you can condense things into a smaller space and make better use of it.

  • For the locations boxes…not sure by what you mean when you say “images”. The only image in that section should be the background image. Aside from that it is just 3 black boxes with text. So I recommend creating 3 divs and in those divs put your text. Place the 3 divs inside another div container and give THAT container display flex so that thereby you can apply the appropriate flex properties to space out your three boxes evenly. THAT container I placed along with the location banner container inside the overall location parent container to which I have applied the background image. Additionally, looking at your code you are mixing position: relative with flexbox which probably is also what is causing the problems you are dealing with there. Choose one or the other…but being that this is a project where we need to showcase our prowess with flexbox :wink: I recommend using flexbox. Not that you cannot use position: relative at all, just that I wouldn’t use it under the same ruleset as you have in your css code.

  • Forgot to mention, for the Tea of the Month section, I made the width size 1100px but in reality I could’ve made it to 1000px width and still have all five teas fit in exactly as in the project solution. Only reason I made it 1100px width was so that I could combine the Tea of the Month parent container and Location parent container styles together. At 1000px width, the Location parent container cannot fit all three black boxes as it shows in the solution but at 1100px it can. So, seeing as how I get the same result whether I make my Tea parent container 1000px or 1100px, to satisfy the solution I just made bot the Tea parent container and Location parent container 1100px under the same ruleset.

Last thing, still working on the code for this project…just a few extra things I need to add like the image captions in my html code. Also, I still need to figure out how to incorporate more of the flex theories we learned for this project such as flex-shrink and etc. Still have more work to do but for now this is good enough for me. Will continue to perfect my code shortly. Let me know if you have any other suggestions as well…I’m still learning myself!

Well, hope this helps. I’ll will share my code below.

David

1 Like
The Tea Cozy
<main>
    <div class="jumbotron">
        <div class="mission_banner">
            <h2>Our Mission</h2>
            <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
        </div>
    </div>
    <div class="tea_of_month">
        <div class="month_banner">
            <h2>Tea of the Month</h2>
            <h4>What's sleeping at The Tea Cozy?</h4>
        </div>
        <div class="tea_container">
            <div class="tea">
                <img src="images/berryblitz.jpg">
                <h4><a href="#">Fall Berry Blitz Tea</a></h4>
            </div>
            <div class="tea">
                <img src="images/spiced_rum.jpg">
                <h4><a href="#">Spiced Rum Tea</a></h4>
            </div>
            <div class="tea">
                <img src="images/donut.jpg">
                <h4><a href="#">Seasonal Donuts</a></h4>
            </div>
            <div class="tea">
                <img src="images/myrtle_ave.jpg">
                <h4><a href="#">Myrtle Ave Tea</a></h4>
            </div>
            <div class="tea">
                <img src="images/bedford_bizarre.jpg">
                <h4><a href="#">Bedford Bizarre Tea</a></h4>
            </div>
        </div>
    </div>
    <div class="cozy_locations">
        <div class="location_banner">
            <h2>Locations</h2>
        </div>
        <div class="location_container">
            <div class="location">
                <h3>Downtown</h3>
                <h4>384 West 4th St</h4>
                <h4>Suite 108</h4>
                <h4>Portland, Maine</h4>
            </div>
            <div class="location">
                <h3>East Bayside</h3>
                <h4>3433 Phisherman's Avenue</h4>
                <h4>(Northwest Corner)</h4>
                <h4>Portland, Maine</h4>
            </div>
            <div class="location">
                <h3>Oakdale</h3>
                <h4>515 Crescent Avenue</h4>
                <h4>Second Floor</h4>
                <h4>Portland, Maine</h4>
            </div>
        </div>
    </div>
</main>

<footer>
    <div class="cozy_foot">
        <h2>The Tea Cozy</h2>
        <h5><a href="mailto:[email protected]">[email protected]</a></h5>
        <h5><a href="tel:917-555-8904">917-555-8904</a></h5>
    </div>
    <div class="copyright"><h5>copyright The Tea Cozy 2023</h5></div>
</footer>

/I placed my CSS code here since I cannot reply to your post more than 3 times******/

/******************** GLOBAL RULES ********************/
body {
margin: 30px auto;
width: 1300px;
min-width: 700px;
font-family: Helvetica, sans-serif;
font-size: 22px;
color: seashell;
background-color: black;
}

h4 a:link, h4 a:visited {
color: seashell;
transition: ease-out 0.3s;
}

h4 a:hover {
color: rgb(255, 200, 161);
font-size: 24px;
transition: 0.2s;
cursor: pointer;
}

h2, h3, h4, h5 {
text-align: center;
margin: 10px 0;
}

h5 a:link, h5 a:visited {
color: seashell;
transition: ease-out 0.3s;
}

h5 a:hover {
color: rgb(255, 200, 161);
font-size: 20px;
transition: 0.2s;
cursor: pointer;
}

h2, h3, h4, h5 {
text-align: center;
margin: 10px 0;
}

/******************** HEADER ********************/
header {
display: flex;
justify-content: space-between;
margin: 0 10px;
height: 70px;
border-bottom: 1px solid seashell;
}

#logo img {
height: 50px;
/border: solid 1px white;/
padding: 5px;
transition: ease-out 0.3s;
}

#logo img:hover {
height: 54px;
box-shadow: 0 0 10px rgb(255, 200, 161);
transition: 0.2s;
}

nav {
width: 400px;
}

ul {
display: flex;
margin: auto;
padding: 0;
height: 50px;
justify-content: space-between;
align-items: center;
list-style: none;
}

/******************** MAIN ********************/
.jumbotron {
display: flex;
margin: 0 auto;
width: 1200px;
height: 700px;
background-image: url(images/mission_background.jpg);
background-repeat: no-repeat;
}

.tea_of_month, .cozy_locations {
margin: 0 auto;
padding-top: 50px;
width: 1200px;
height: 700px;
}

.cozy_locations {
height: 500px;
/This is to override the 700px height in ruleset above/
}

.cozy_locations {
background-image: url(images/locations_background.jpg);
background-repeat: no-repeat;
}

.mission_banner {
align-self: center;
}

.mission_banner {
display: flex;
flex-direction: column;
justify-content: center;
background-color: black;
width: 1200px;
height: 100px;
}

.tea_container, .location_container {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 15px auto;
width: 1100px;
}

.tea {
margin: 10px;
width: 300px;
}

.tea img {
width: 300px;
height: 200px;
}

.location {
display: flex;
flex-flow: column;
justify-content: space-between;
margin: 15px 20px;
box-sizing: border-box;
width: 300px;
height: 300px;
padding: 15px 0;
background-color: black;
}

/******************** FOOTER ********************/
.cozy_foot {
display: flex;
flex-flow: column;
justify-content: space-between;
height: 200px;
}

.copyright {
margin-left: 20px;
}

.copyright h5 {
text-align: left;
}

EDIT:

Researching a little more…I think you can use position: relative with flexbox but it has to be applied to a child container within a flexbox parent. If you apply position: relative along with flexbox to the same container it will probably cause conflicts. Not sure on this though. But I always try to use one or the other. I’m sure there are situations where using position: relative trumps using flexbox but I feel that using flexbox in this particular project is better and easier for obtaining the results this project requires. But I’m pretty sure you can still achieve the same results using position: relative. You would probably have to use the top, bottom, left, and right css position properties with other combinations.

Hi Tera,

Just learned something new after finishing the Fotomatic project…you can definitely use position: relative along with flexbox! Now getting a clearer understanding, flexbox is great for positioning items/content inside containers. Although you can also use flexbox to self-position containers, sometimes it is easier to use (maybe even necessary) position: relative or any of the other position properties to self-position containers. And in those containers, you can use flexbox to position the child containers/content/items. This is the method I used to position some of the containers in the Fotomatic project. Of course, this by no means is a rule set in stone but one of many different approaches to positioning containers and the content within. Just depends on what effect and stylization you want to achieve! The Fotomatic project really propelled me to a better understanding on how to combine different properties in order to achieve my stylization goals. Just wanted to rectify what I stated and share with you and everyone.

Keep coding and learning!

By referring to few of the previously posted codes, I merged their individual best parts to form this solution.Hope you are helped by it. :slight_smile:
HTML code:

<!DOCTYPE html>
<html>
<head>
  <title>The Tea Cozy</title>
  <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<header>
    <img id="logo" alt="tea cozy logo" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png?_gl=1*x624ip*_ga*NzcwMjA0MDU2NC4xNjg1ODc5NTM2*_ga_3LRZM6TM9L*MTY5MTc0Njk3MC43MC4xLjE2OTE3NTAxNzIuMjkuMC4w" >
    <nav>
        <a href="#">Mission</a>
        <a href="#totM">Featured Tea</a>
        <a href="#bg-img">Locations</a>    
    </nav>
</header>
<main>
    <div class="main">
        <div class="banner">
            <h2>Our Mission</h2>
            <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
        </div>
    </div>
    <div id="totM" class="totM">
        <h1>Tea of the Month</h1>
        <h3>What's Steeping at the Tea Cozy?</h3>
    </div>
    <div class="images">
        <div class="options1">
            <figure>
                <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg?_gl=1*1tvgop3*_ga*NzcwMjA0MDU2NC4xNjg1ODc5NTM2*_ga_3LRZM6TM9L*MTY5MTc0Njk3MC43MC4xLjE2OTE3NTAxNzIuMjkuMC4w" alt="a mug with berres">
                <figcaption>Fall Berry Blitz Tea</figcaption>
            </figure>

            <figure>
                <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg?_gl=1*1tvgop3*_ga*NzcwMjA0MDU2NC4xNjg1ODc5NTM2*_ga_3LRZM6TM9L*MTY5MTc0Njk3MC43MC4xLjE2OTE3NTAxNzIuMjkuMC4w">
                <figcaption>Spiced Rum Tea</figcaption>
            </figure>

            <figure>
                <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg?_gl=1*1tvgop3*_ga*NzcwMjA0MDU2NC4xNjg1ODc5NTM2*_ga_3LRZM6TM9L*MTY5MTc0Njk3MC43MC4xLjE2OTE3NTAxNzIuMjkuMC4w">
                <figcaption>Seasonal Donuts</figcaption>
            </figure>

            <figure>
                <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg?_gl=1*1tvgop3*_ga*NzcwMjA0MDU2NC4xNjg1ODc5NTM2*_ga_3LRZM6TM9L*MTY5MTc0Njk3MC43MC4xLjE2OTE3NTAxNzIuMjkuMC4w">
                <figcaption>Myrtle Ave Tea</figcaption>
            </figure>

            <figure>
                <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg?_gl=1*1tvgop3*_ga*NzcwMjA0MDU2NC4xNjg1ODc5NTM2*_ga_3LRZM6TM9L*MTY5MTc0Njk3MC43MC4xLjE2OTE3NTAxNzIuMjkuMC4w">
                <figcaption>Bedford Bizzare Tea</figcaption>
            </figure>
        </div>
    </div>

    <div class="locations-section" id="bg-img">
        <div id="locations">

            <div class="location-header">
                <h2 id="title">Locations</h2>
            </div>

            <div class="downtown">
                <h3>Downtown</h3>
                <h4>384 West 4th St</h4>
                <h4>Suite 108</h4>
                <h4>Portland, Maine</h4>
            </div>
    
            <div class="east-bayside">
                <h3>East Bayside</h3>
                <h4>3433 Phisherman's Avenue</h4>
                <h4>(Northwest Corner)</h4>
                <h4>Portland, Maine</h4>
            </div>
    
            <div class="oakdale">
                <h3>Oakdale</h3>
                <h4>525 Crescent Avenue</h4>
                <h4>Second Floor</h4>
                <h4>Portland, Maine</h4>
            </div>

        </div>
    </div>
</main>
<footer>
    <div id="footer">
        <h2>The Tea Cozy</h2>
        <h5>[email protected]
            <br><br>
            917-555-8904
        </h5>
    </div>
    <div id="copyright"><h5>copyright The Tea Cozy 2017</h5></div>    
</footer>
</body>
</html>

CSS code:

*{
    font-family: Helvetica, sans-serif;
    font-size: 22px;
    color: seashell;
    text-align: center;
}

h1,h2,h3,h4,h5,figcaption{
    opacity: 0.6;
}

h1{
    font-size: 40px;
}

h2{
    font-size: 35px;
}

h3{
    font-size: 28px;
}

h4{
    font-size: 20px;
}

h5{
    font-size: 15px;
}

body{
    background-color: black;
}

header{
    position: fixed;
    height: 69px;
    border-bottom: 1px solid seashell;
    display: inline;
    background-color: black;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    box-sizing: border-box;
}

#logo{
    height: 50px;
    padding-left: 10px;
    text-align: left;
    float: left;
    padding-top: 9px;
    opacity: 0.6;
    background-color: transparent;
}

nav{
    float: right;
    margin-right: 20px;
    margin-top: 25px;
}

nav a{
    display: inline-block;
    padding-left: 20px;
    opacity: 0.6;
}

main{  
    background-color: black;
    padding: 0;
    margin: 0;
    border: 0;
}

.main{
    background-color: black;
    height: 700px;
    width: 1200px;
    background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg?_gl=1*7zshlo*_ga*NzcwMjA0MDU2NC4xNjg1ODc5NTM2*_ga_3LRZM6TM9L*MTY5MTc0Njk3MC43MC4xLjE2OTE3NTAxNzIuMjkuMC4w);
    background-position: center;
    background-repeat: no-repeat;
    max-width: 1200px;
    padding-top: 70px;
    margin:25px auto;
    position: relative;
    display: grid;
}

.banner{
    background-color: black;
    width: 1200px;
    line-height: 10px;
    position: absolute;
    top: 45%;
}

.totM{
    background-color: black;
    width: 100%;
    margin: 0 auto;
    padding-top: 60px;
    opacity: 0.6;
    letter-spacing: 1px;
}

main img{
    background-color: black;
    width: 300px;
    height: 200px;
}

.options1 figure{
    display: inline-block;
}

figcaption{
    font-weight: bold;
    opacity: 0.6;
}

#title{
    background-color: transparent;
    margin-bottom: 15px;
} 

.locations-section{
    background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg?_gl=1*19lqocd*_ga*NzcwMjA0MDU2NC4xNjg1ODc5NTM2*_ga_3LRZM6TM9L*MTY5MTc0Njk3MC43MC4xLjE2OTE3NTAxNzIuMjkuMC4w);
    background-position: center;
    background-repeat: no-repeat;
    background-color: none;
    width: 1200px;
    height: 500px ;
    max-width: 1200px;
    position: relative;
    margin:25px auto;
    padding: 20px;
}

.location-header{
    background-color: transparent;
}

.locations{
    display: inline-block;
    margin-top: 90px;
    background-color:none;
}

.downtown,.east-bayside,.oakdale{
    width: 300px;
    height: 265px;
    margin: 0px 40px;
    background-color: black;
    display: inline-block;
}

#footer{
    
    height: 200px;
    flex: 1;
}

#copyright{
    float: left;
    margin-left: 20px;
}

Hi there,

I was really struggling with this, mainly because I find it really confusing to which you need to apply the flex properties.
Also how the items will react when they are the child or the parent.
I wanted to adjust all the things I’ve learned to make the website reactive.

Now I got stuck with the Locations section.
The color don’t want to become transparent, no matter what I try.
The boxes with the different locations don’t want to spread over the page, I also can’t understand why?
Anyone who can help me with this?


<!DOCTYPE html>
<html>
<head>
  <title>The Tea Cozy</title>
  <link rel="stylesheet" href="style.css" type="text/css" />
</head>
  <body>
    <div class="header">
      <div class="container">
        <img class="logo" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png?_gl=1*s3ywnq*_ga*NzI2Mzg5Mzc2MS4xNjkyNjIzMzMz*_ga_3LRZM6TM9L*MTY5NjMzMTkzMC4yOC4xLjE2OTYzMzE5MzQuMC4wLjA." alt="logo-tea-cozy">
        <nav>
          <ul>
            <li><a href="#">Mission</a></li>
            <li><a href="#">Featured Tea</a></li>
            <li><a href="#">Locations</a></li>
          </ul>
        </nav>
      </div>
    </div>
    <div class="mission">
      <div class="container">
        <h2 class="title">Our Mission</h2>
        <h4 class="title">Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
      </div>
    </div>
    <div class="tea-month">
      <div class="container">
        <h2 class="title">Tea of the month</h2>
        <h4 class ="title">What's sleeping at the Tea Cozy</h4>
      </div>
    </div>
    <div class="main">
        <div class="col">
          <div class="options">
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg?_gl=1*9ws9sn*_ga*NzI2Mzg5Mzc2MS4xNjkyNjIzMzMz*_ga_3LRZM6TM9L*MTY5NjMzNDE3MS4yOS4xLjE2OTYzNDAwOTkuMC4wLjA.">
            <h4>Fall Berry Blitz Tea</h4>
          </div>
          <div class="options">
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg?_gl=1*9ws9sn*_ga*NzI2Mzg5Mzc2MS4xNjkyNjIzMzMz*_ga_3LRZM6TM9L*MTY5NjMzNDE3MS4yOS4xLjE2OTYzNDAwOTkuMC4wLjA.">
            <h4>Spiced Rum Tea</h4>
          </div>
          <div class="options">
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg?_gl=1*9ws9sn*_ga*NzI2Mzg5Mzc2MS4xNjkyNjIzMzMz*_ga_3LRZM6TM9L*MTY5NjMzNDE3MS4yOS4xLjE2OTYzNDAwOTkuMC4wLjA.">
            <h4>Seasonal Donuts</h4>
          </div>
          <div class="options">
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg?_gl=1*juabf1*_ga*NzI2Mzg5Mzc2MS4xNjkyNjIzMzMz*_ga_3LRZM6TM9L*MTY5NjMzNDE3MS4yOS4xLjE2OTYzNDAwOTkuMC4wLjA.">
            <h4>Myrtle Ave Tea</h4>
          </div>
          <div class="options">
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg?_gl=1*1tfc8ir*_ga*NzI2Mzg5Mzc2MS4xNjkyNjIzMzMz*_ga_3LRZM6TM9L*MTY5NjMzNDE3MS4yOS4xLjE2OTYzNDAwOTkuMC4wLjA.">
            <h4>Bedford Bizarre Tea</h4>
          </div>
        </div>
    </div>
    <div class="locations-section">
        <div class="locations">
          <div class="locations-title">
            <h2 id="title">Locations</h2>
          </div>
          <div class="location-containers">
            <div class="downtown">
              <h3>Downtown</h3>
              <p>384 West 4th St</p>
              <p>Suite 108</p>
              <p>Portland, Maine</p>
            </div>
            <div class="east-bayside">
              <h3>East Bayside</h3>
              <p>3433 Phisherman's Avenue</p>
              <p>(Northwest Corner)</p>
              <p>Portland, Maine</p>
            </div>
            <div class="oakdale">
              <h3>Oakdale</h3>
              <p>515 Crescent Avenue</p>
              <p>Second Floor</p>
              <p>Portland, Maine</p>
          </div>
          </div>
        </div>
    </div>
  </body>
  <footer>
    <div id="footer">
        <h2>The Tea Cozy</h2>
        <h5>[email protected]
            <br><br>
            917-555-8904
        </h5>
    </div>
    <div id="copyright"><h5>copyright The Tea Cozy 2017</h5></div>    
</footer>
</html>
/* Universal Styles */

* {
  font-family: Helvetica;
  background-color: black;
  opacity: 0.9;
  color: white;
}

/* Header */

.header {
  position: fixed;
  text-decoration: underline;
  border-bottom: 1px solid seashell;
  height: 69px;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 1;
}

.header .container {
  display: flex;
}

.logo {
  height: 50px;
  margin: 0 10px;
  display: inline-flex;
  justify-content: flex-start;
}

nav {
  display: inline-flex;
  justify-content: flex-end;
  margin-right: 10px;
  flex-grow: 2;
}

li {
  list-style: none;
  float: right;
}

ul a {
  padding-left: 10px
}

/* Mission section */

.mission {
  width: 100%;
  background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg?_gl=1*1c1ppyj*_ga*NzI2Mzg5Mzc2MS4xNjkyNjIzMzMz*_ga_3LRZM6TM9L*MTY5NjQ5MTgzMS4zMC4xLjE2OTY0OTUwMjkuMC4wLjA.");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  max-width: 1200px;
  height: 700px;
  margin-left: 20px;
  margin-right: 20px; 
  margin-bottom: 100px;
  position: relative;
  top: 70px;
  display: flex;
  align-items: center;
}

.mission .container {
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  text-align: center;
  margin: 0;
  opacity: 1;
  padding: 10px;
  margin-bottom: 20px;
}

.title {
  margin: 10px;
}

/* Tea of the month section */

.tea-month .container {
  display: flex;
  flex-direction: column;
  align-content: center;
  text-align: center;
  width: 100%
  max-width: 1000px;
  padding: 10px;
}

.main {
  display: flex;
  width: 100%
  max-width: 1200px;
  margin-bottom: 50px;
}

.options h4 {
  margin-top: 10px;
  width: 100%;
}

.options img {
  margin: 0px;
  height: 200px;
  width: 300px;
}

.col {
  display: inline-flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.options {
  text-align: center;
}

/* Locations section */

.locations-section {
  width: 100%;
  background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg?_gl=1*23esf3*_ga*NzI2Mzg5Mzc2MS4xNjkyNjIzMzMz*_ga_3LRZM6TM9L*MTY5NjQ5MTgzMS4zMC4xLjE2OTY0OTUwMjkuMC4wLjA.");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  max-width: 1200px;
  height: 500px; 
  position: relative;
  margin: 25px auto;
  background-color: none;
}

.locations {
  background-color: transparant;
  display: inline-block;
  margin-top: 90px;
  align-items: center;
}

.locations-title h2 {
  text-align: center;
  margin-bottom: 15px;
  background-color: transparent;
}

.location-containers {
  margin: 0 auto;
  background-color: transparant;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.downtown, .east-bayside, .oakdale {
  width: 100%;
  max-width: 300px;
  height: 265px;
  text-align: center;
  margin: 0px 40px;
  background-color: black;
  opacity: 1;
}

#footer{
    text-align: center;
    height: 200px;
    flex: 1;
}

#copyright{
    float: left;
    margin-left: 20px;
}

I’ve just finished this project after taking a long time working on it. It looks so simple, but when it’s time to place all items where they should be, it gets tougher, as a slight change to the code affects the layout on the webpage everytime.
Big thanks to everyone who contributed on here, as it really helped.
I’ll share my code here for reviews.

<!DOCTYPE html>
<html lang = "en">
    <head>
        <title>Tea Cozy</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/style.css"> <!--embedded style-->
    </head>
    <body>
        <header>
            <img id="logo" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png" alt="Tea Cozy Site logo"
            height="50">
            <nav>
                <ul>
                    <li><a href="#">Mission</a></li>
                    <li><a href="#">Featured Tea</a></li>
                    <li><a href="#">Locations</a></li>
                </ul>
            </nav>            
        </header>
        
        <main>
            <div id="mainDiv">
                <h2>Our Mission</h2>
                <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
            </div>      
            
        </main>

        <section class="month">
            <div>
                <h2>Tea of the Month</h2>
                <h4>What's Steeping at The Tea Cozy?</h4>
            </div>
            <div class="top">
                <figure class="Tea">
                    <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg" height="200" width="300" alt="Fall Berry Blitz Tea">
                    <figcaption>
                        <h4>Fall Berry Blitz Tea</h4>
                    </figcaption>
                </figure>

                <figure class="Tea">
                    <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg" height="200" width="300" alt="Spiced Rum Tea">
                    <figcaption>
                        <h4>Spiced Rum Tea</h4>
                    </figcaption>
                </figure>

                <figure class="Tea">
                    <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg" height="200" width="300" alt="Seasonal Donuts">
                    <figcaption>
                        <h4>Seasonal Donuts</h4>
                    </figcaption>
                </figure>                               
            </div>

            <div class="bottom">
                <figure class="Tea">
                    <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg" height="200" width="300" alt="Myrtle Ave Tea">
                    <figcaption>
                        <h4>Myrtle Ave Tea</h4>
                    </figcaption>
                </figure>

                <figure class="Tea">
                    <img src=" https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg" height="200" width="300" alt="Bedford Bizarre Tea">
                    <figcaption>
                        <h4>Bedford Bizarre Tea</h4>
                    </figcaption>
                </figure>
            </div>
            
        </section>

        <section class="location">
            <div>
                <h2 id="loc">Locations</h2>
            <div class="address">
                <div>
                    <h3>DownTown</h3>
                    <p>384 West 4th St<br>Suite 108<br>
                    Portland, Maine</p>
                </div>

                <div>
                    <h3>East Bayside</h3>
                    <p>3433 Phisherman's Avenue<br>(NorthWest Corner)<br>
                    Portland, Maine</p>
                </div>

                <div>
                    <h3>Oakdale</h3>
                    <p>515 Crescent Avenue<br>Second Floor<br>
                    Portland, Maine</p>
                </div>
            </div>
            </div>
        </section>

        <footer>
            <div>
                <h2>The Tea Cozy</h2>
                <h5>[email protected]<br> 917-555-8904</h5>
            </div>
            <h5>copyright The Tea Cozy 2017</h5>


        </footer>

    </body>
</html>
*{
    opacity:0.9;
    font-family: Helvetica;
    font-size: 22px;
}

body {
    background-color:black;    
    
}


header{    
    position: fixed;
    display: inline-flex;
    height: 69px;
    background-color:black;
    width: 100%;
    border-bottom: 1px solid seashell;
    align-items: center; 
    opacity:1;
    z-index: 1;  
    
}
    
#logo{
    margin-left:10px;
    opacity:0.9;
}

nav{
    background-color: transparent;
    margin-left: 680px;
}

nav ul li{
    display:inline;
    margin-right:20px; 
       
}

a{
    font-family:Helvetica, sans-serif;
    font-size: 22px;
    color: seashell;           
}


main{
    display:flex;
    align-items: center;
    width: 1200px;
    height: 700px;
    background-image: url('https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg');
    position:relative;
    top: 70px;
    margin: 0 auto;  
    
}

h2{font-size: 30px;
    color:seashell;
    font-weight: 800;
}
h4{font-size: 22px;
    color:seashell;
    font-weight: 800;
}

#mainDiv{
    background-color: rgb(0, 0, 0);
    width:100%; 
    height:90px;
    text-align: center; 
    opacity:1; 
   }  

#mainDiv h4 {    
    margin-top: 0;
}
#mainDiv h2{
    padding: 0;
    margin-top: 2px;
    margin-bottom: 3px;
}

.month{
    position:relative;
    top: 100px;
    margin: 0 auto;
    width: 1000px;
}
.month h2, h4{
    text-align:center;
    letter-spacing: 0.1px;
    word-spacing:0.1px;
}

.top{     
    display:flex; 
    justify-content: center;  
    
}

.bottom{
    display:flex; 
    justify-content: center;  
}

.location{
    height: 500px;
    padding: 30px ;
    width: 110                                                                                                                                                                                                                                                                                                                                                                                                                      0px;
    background-image: url('https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg') ;
    margin: 0 auto;
    position: relative;
    top: 100px;
    display: flex;
    justify-content: center;
}

.location div{
    margin:0 auto;
    opacity:1;
}                                                                                                                                                                                                                                                                                                                

#loc{
    text-align:center;
    letter-spacing: 0.1px;
    font-size: 30px;
    color:seashell;
    font-weight: 800;    
    margin-bottom: 15px;
}

.address{
    display:flex;
    justify-content: center;
}

.address div{
    width:300px;
    height:300px;
    margin: 15px 20px;
    background-color: black;
    opacity: 1;
}


.address div h3, p{
    text-align:center;
    letter-spacing: 0.1px;
    color:seashell;
    line-height: 55px;       
}

footer{
    position: relative;
    top:90px;    
}

footer div{
    text-align: center;
}
footer h5 div h2, h5{ 
    letter-spacing: 0.1px;
    color:seashell;
    line-height: 45px;  
}

footer h5{
    margin-left: 20px;
}

Also throwing my code in here for review. Doesn’t exactly follow the wireframe but it’s an ok attempt. Help with the Tea of the month section would be greatly appreciated.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Tea Cozy</title>
    <link rel="stylesheet" type="text/css" href="resources/css/index.css">
  </head>
  <body>
      <header> 
        <img src="resources/images/img-tea-cozy-logo-2.png" alt="Cozy Tea Logo">
        <nav>
          <ul></ul>
          <li><a href="#mission">Mission</a></li>
          <li><a href="#featured_tea">Featured Teas</a></li>
          <li><a href="#location">Location</a></li>
          </ul>
        </nav>
      </header>
      <main>
        <section class="mission">
          <div id="mission-text">
            <h2>Mission</h2>
            <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
          </div>
          </section>
        <section class="totm">
          <h2 class ="totm-text">Tea of the month</h2>
          <h4 class ="totm-text">What's steeping at The Tea Cozy?</h4>
          <div><img class="totm-image" src="/resources/images/img-berryblitz.jpeg"><p>Fall Berry Blitz Tea</p> </div> 
          <div><img class="totm-image" src="/resources/images/img-spiced-rum.jpeg"><p>Spiced Rum Tea</p></div> 
          <div><img class="totm-image" src="/resources/images/img-donut.jpeg"><p>Seasonal Donuts</p></div> 
          <div><img class="totm-image" src="/resources/images/img-myrtle-ave.jpeg"><p>Myrtle Ave Tea</p></div> 
          <div><img class="totm-image" src="/resources/images/img-bedford-bizarre.jpeg"><p>Bedford Bizarre Tea</p></div> 
        </section>
        <section class="locations">
          <h2 id="loctxt">Locations</h2>
          <div id="downtown">
            <h3>Downtown</h3>
              <p>384 West 4th St<br>Suite 108<br>
                Portland, Maine</p>
          </div>
          <div id="eastBayside">
            <h3>East Bayside</h3>
              <p>3433 Phisherman's Avenue<br>(NorthWest Corner)<br>
                Portland, Maine</p>
          </div>
          <div id="oakdale">
            <h3>Oakdale</h3>
            <p>515 Crescent Avenue<br>Second Floor<br>
              Portland, Maine</p>
          </div>
        </section>
        <footer>
          <h2>The Tea Cozy</h2>
          <h5>[email protected]</h5>
          <h5>917-555-88904</h5>
          <h5 id="copyright">Copyright The Tea Cozy 2017</h5>
        </footer>
      </main>
  
  
    </body>



</html>
* {
    font-family: Helvetica;
    color: seashell;
    background-color: black;   
    text-align: center;
    /*reset of browser's default values*/
    margin: 0;
    padding: 0;
    opacity: .9;
}

header {
    border-bottom: 1px solid seashell;
    justify-content: space-between;
    align-items: center;
    display: flex;
    width: 100%;
}

header img {
    height: 50px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 10px;
}

header li {
    list-style: none;
    display: inline-block;
    text-decoration: none;
    color: seashell;
    padding-right: 1em;
}

.mission {
    background-image: url(/resources/images/img-mission-background.jpeg);
    margin: 0 auto;
    display: flex;
    background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg");
    width: 80%;
    background-repeat: no-repeat;
    background-position: center;
    height: 700px;
    justify-content: center;
}

#mission-text {
    margin: auto;
    background-color: black;
    width: 100%;
    padding: 10px 30px;
}

.totm {
    display: flex;
    flex-direction: column;
    align-content: center;
    text-align: center;
    width: 100%;
    max-width: 1000px;
    padding: 10px;
 
}
 .totm-image {
    width: 300px;
    height: 200px;
    flex-flow: row wrap;
 }

 .locations {
    background-image: url(/resources/images/img-locations-background.jpeg);
    margin: 0 auto;
    display: inline-block;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    height: 500px;
    justify-content: center;
 }

 #loctxt {
    text-align:center;
    letter-spacing: 0.1px;
    font-size: 30px;
    color:seashell;
    font-weight: 800;    
    margin-bottom: 15px;
    margin-top: 50px;
    flex-flow: row wrap;
 }

 #downtown {
    width: 300px;
    display: inline-flex;
    flex-direction: column;
    margin: 20px;
    padding: 10px;
 }
 #eastBayside {
    width: 300px;
    display: inline-flex;
    flex-direction: column;
    margin: 20px;
 }
 #oakdale {
    width: 300px;
    display: inline-flex;
    flex-direction: column;
    margin: 20px;
 }
 footer {
    padding-top: 25px;
    height: 200px;
 }
 footer h2 {
    padding-bottom: 20px;
 }
 footer h5{
    padding: 5px;
 }

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


Can anyone give an hint of what’s going on ?
The URL part of my learning interface isn’t showing anything, and when I try to run a code, it tells me " No response received from web browser " .

I had to stop yesterday thinking it’s a site issue that’ll be fixed later, only to come again and find the same thing happening.

It’s annoying as this is stalling my progress.

I worked on it from Visual Studio Code, so I saved all the pictures into my files. I find it easier to link things I have. The last project I also had issues linking internet content. Try that and see if it helps