Flexbox Tea Cosy

Hey, I am just new and I did finished with the Tea Cosy project. it isnt as perfect as the example page, do you guys have some tips for improvement?

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Tea</title>
    <link rel="stylesheet" href="CSS.css">
</head>
<body id="BODY">
<header class="Header">
    <h1 class="Hidden">Homepage</h1>
    <img src="Img/logo.webp" alt="logo">
    <nav>
        <h2 class="Hidden">Navigatie</h2>
        <ul class="navigation">
            <li><a href="#"><p>Mission</p></a></li>
            <li><a href="#"><p>featured Tea</p></a></li>
            <li><a href="#"><p>Locations</p></a></li>
        </ul>
    </nav>
</header>
<main id="MAIN">
    <section class="Mission">
        <div class="Goals">
            <h2>Our Mission</h2>
            <p>Handpicked,Artisanally,Curated,Free Range,Sustainable,Small Batch,Fair Trade,Organic Tea</p>
        </div>
    </section>

    <section class="TeaOfTheMonth">
        <div class="MonthHeadline">
            <h2>Tea of the Month</h2>
            <p>What's Steeping at The Tea Cozy?</p>
        </div>
        <div class="row">
            <section class="MonthImg">
                <img src="Img/img-berryblitz.webp" alt="Berry Blitz Tea"/>
                <h3>Fall Berry Blitz Tea</h3>
            </section>
            <section class="MonthImg">
                <img src="Img/img-spiced-rum.webp" alt="Spiced Rum Tea"/>
                <h3>Spiced Rum Tea</h3>
            </section>
            <section class="MonthImg">
                <img src="Img/img-donut.webp" alt="Donut"/>
                <h3>Seasonal Donuts</h3>
            </section>
            <section class="MonthImg">
                <img src="Img/img-myrtle-ave.webp" alt="Myrtle Ave Tea"/>
                <h3>Myrtle Ave Tea</h3>
            </section>
            <section class="MonthImg">
                <img src="Img/img-bedford-bizarre.webp" alt="Bedford Bizarre Tea"/>
                <h3>Bedford Bizarre Tea</h3>
            </section>
        </div>
    </section>
    <section class="location">

        <div class="locations">
            <h2 class="Hidden">Locations: </h2>
        </div>

        <div class="address">
            <h3>Downtown</h3>
            <p>384 West 4th Street</p>
            <p>Suite 108</p>
            <p> 917-555-8904 </p>
            <p> Portland, Maine </p>
        </div>

        <div class="address">
            <h3>East Bayside</h3>
            <p> 3433 Phisherman's Avenue</p>
            <p> North West Corner</p>
            <p> 917-555-8904 </p>
            <p> Portland, Maine </p>
        </div>

        <div class="address">
            <h3>Oakdale</h3>
            <p> 515 Crescent Avenue</p>
            <p> Second Floor</p>
            <p> 917-555-8904 </p>
            <p> Portland, Maine </p>
        </div>
    </section>
    <section class = "contact">
        <div class="info">
            <h2> Contact Us: </h2>
            <p> The Tea Cozy </p>
            <p> contact@theteacozy.com </p>
            <p> 917-555-8904 </p>
        </div>
    </section>
</main>
<footer>
    <section class="copyright">
        <h2> &copy; Copyright The Tea Cozy 2021</h2>
    </section>
</footer>
</body>
</html>
.Hidden{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    left: -10000px;
}
#BODY{
    background-color: black;
    opacity: 0.9;
    font-family: "Helvetica", sans-serif;
    font-size: 22px;
}
.Header{
    height: 69px;
    width: 100%;
    z-index: 2;
    background-color:black;
    border-bottom: 1px solid seashell;
    display: flex;
    justify-content: space-between;
    align-items:center;

}
.Header img{
    display: inline-flex;
    flex-direction: row;
    height: 50px;
    margin-left: 10px
}
.navigation li {
    list-style: none;
    display: inline-flex;
    padding-right: 25px;
    text-decoration: underline;

}

.navigation a {
    text-decoration: none;
    color: grey;
}

.navigation a:hover{
    opacity:0.5;
}

.Mission {
    height: 700px;
    background-size: 100%;
    background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg");
    background-position: center;
    background-repeat: no-repeat;
    align-content:center;
    margin-right: 20px;
    margin-left:20px ;


}
.Goals {
    background-color:black;
    opacity: 1;
    text-align:center;
    position: relative;
    top: 300px;
    color: grey;
    margin: 0;
    font-size: 20px;

}
.TeaOfTheMonth {
    color: white;
    font-weight: bold;
    display: grid;
    grid-template-areas: '. . MHH . .''. row row row .''. row row row .' ;
    text-align: center;
}

.TeaOfTheMonth h2 {
    font-size: 30px;
}
.TeaOfTheMonth p {
    font-size:  20px;
}
.MonthHeadline {
    grid-area: MHH;

}

.MonthImg img{
    height: 200px;
    width: 300px;
    padding-bottom: 10px;
}
.row {
   grid-area: row;
}
.row {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
}
.location {
    height: 750px;
    background-size: 100%;
    background-image: url("Img/img-locations-background.webp");
    background-position: center;
    background-repeat: no-repeat;
    display:flex;
    flex-flow: row nowrap;
    justify-content:space-around;
    align-content:center;
    margin-right: 20px;
    margin-left:20px ;
}
.locations h2 {
    color: white;
    text-align:center;
    position: relative;
    top:100px;
    left: 510px;
}

.address {
    width: 300px;
    height: 290px;
    position:relative;
    top: 200px;
    right:90px;
    background-color:black;
    opacity: 1;
    text-align:center;
}

.address h3{
    padding-top:30px;
    color: white;
}
.address p {
    color: white;
}
.copyright {
    font-size: 10px;
    color: grey;

}
.contact {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;}
.info {
    color: grey;
}

Welcome to the forums!

Overall it looks great, well done on completing it :clap:!!

There’s just a couple bits of feedback I would give:

  1. I personally think that this section here would benefit from a little more padding, particuarly on the bottom:
    image
  2. I would personally recommend picking a more consistent style for the cases of your selectors, for example a couple you have are BODY, navigation and Header, notice that you use a different case for all of them. It’s generally best practise to pick one case and stick to it, a pretty standard one is to use all lowercase, seperated by hyphens, for example: button-primary.

Hi There I just finished The Project Tea COzy It was difficult to center the boxes .
I couldn’t have the solution to uncover the cup in the image. I wanted to use background images but i used ohter solution.
Is not perfect and is not responsive.
Here is my code. Any suggestions will be precious ! Thanks and happy Coding!
Thanks Mauro1051 your post helps me a lot to finish the project.

HTML

<!--Header section-->

<header>

    <div class="headerlogo">

        <img class="logo" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png" alt="Tea Cozy">

    </div>

        <nav>

            <ul>

            <li><a href="#ourmission">Mission</a></li>

            <li><a href="#featuredtea">Featured Tea</a></li>

            <li><a href="#locations">Locations</a></li>

            </ul>

        </nav>

  </header>

<!--main section-->

<main>

        <!--Mission-->

    <div class="ourmission">

       

        <div class="ourmission_text">

           

            <div class="image_our_mission">

                <img id="#imagemission"src="https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg" alt="Flower Tea">

               

                <div class="ourmission_text_center">

                    <h2 id="ourmission">Our Mission</h2>

                    <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>

                </div>

           

            </div>

           

        </div>

    </div>

    <!--Featured Tea-->

    <div class="teamonth">

       

        <div class="teamonth_text">

        <h2 id="featuredtea">Tea of the Month</h2>

        <h4>What's Steeping at The Tea Cozy?</h4>

        </div>

       

        <div class="teamonth_images">

           

            <div class="teamonth_box">

                <figure>

                    <img class="teamonth_images_cozy" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg" alt="Fall Berry Blitz Tea"><figcaption><h4>Fall Berry Blitz Tea</h4></figcaption>

                </figure>

                <figure>

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

                </figure>

                <figure>

                    <img  class="teamonth_images_cozy"  src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg" alt="Seasonal Donuts"><figcaption><h4>Seasonul Donuts</h4></figcaption>

                </figure>

            </div>

           

            <div class="teamonth_box1">

                <figure>

                    <img  class="teamonth_images_cozy "  src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg" alt="Myrtle Ave Tea"><figcaption><h4>Myrtle Ave Tea</h4></figcaption>

                </figure>

                <figure>

                    <img  class="teamonth_images_cozy "  src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg" alt="Bedford Bizarre Tea"><figcaption><h4>Bedford Bizarre Tea</h4></figcaption>

                </figure>

            </div>

       

        </div>

   

    </div>

    <!--Locations-->

    <section class="locations">

        <img id="locations_image"src="https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg" alt="locations">

        <h2 id="locations" class="locations_text">Locations</h2>

        <div class="locations_maine">

           

            <div class="locations_maine_portland">

                <h3>Downtown</h3>

                <h4>384 West 4th St</h4>

                <h4>Suite 108</h4>

                <h4>Portland, Maine</h4>

            </div>

            <div class="locations_maine_portland">

                <h3>East Bayside</h3>

                <h4>3433 Phisherman's Avenue</h4>

                <h4>(Northwest Corner)</h4>

                <h4>Portland, Maine</h4>

            </div>

           

            <div class="locations_maine_portland">

                <h3>Oakdale</h3>

                <h4>515 Crescent Avenue</h4>

                <h4>Second Floor</h4>

                <h4>Portland, Maine</h4>

            </div>

        </div>

    </section>

    <!--Contact section-->

    <div class="contact">

        <h2>The Tea Cozy</h2>

        <h5>contact@theteacozy.com</h5>

        <h5>917-555-8904</h5>

    </div>

</main>
<h5 class="copyright">copyright The Tea Cozy 2017</h5>

CSS

body {

background-color: black;

font-family: Helvetica;

font-size: 22px;

color: seashell;

opacity: 0.9;

text-align: center;

}

/* Header Styles */

header {

position: sticky;

border-bottom: 1px solid seashell;

height: 69px;

width: 100%;

margin-bottom: 0;

}

/* With the property Float I positionned the nav and the imaghe to left and rigth */

nav {

display: inline-block;

margin-right: 0;

float: right;

}

nav > li {

display: inline-block;

margin-right: 0;

text-align: right;

}

li {

display: inline-block;

list-style-type: none;

text-decoration: underline;

margin-right: 10px;

}

a {

color: seashell;

}

/* Logo Styles */

.headerlogo {

display: inline-block;

text-align: left;

float: left;

}

.logo {

height: 50px;

}

/* Our mission styles */

.ourmission {

height: 700px;

width: 1200px;

margin: 0 auto; /* This property center the container */

text-align: center;

position: relative;

}

.ourmission_text {

color: seashell;

background-color: black;

}

#imagemission {

width: 100%;

}

.ourmission_text_center {

position: absolute;

top: 50%;

left: 50%;

background-color: black;

width: 100%;

transform: translate(-50%, -50%); /*transform, top and left let me center the text */

}

/* Featured Tea Styles */

.teamonth {

display: flex;

width: 1000px;

position: relative;

margin-top: 100px;

flex-direction: row;

flex-wrap: wrap;

margin-bottom: 20px;

}

.teamonth_text {

position: absolute;

top: 8 px;

left: 60%;

margin-top: 100px;

}

.teamonth_images {

display: flex;

flex-direction: row;

text-align: center;

justify-content: space-between;

flex-wrap: wrap;

}

.teamonth_box {

display: flex;

justify-content: center;

margin: 300px 5px 5px 200px;

}

.teamonth_box1 {

display: flex;

justify-content: space-between;

margin: 30px 5px 5px 350px;

}

.teamonth_images_cozy {

height: 200px;

width: 300px;

margin: auto;

}

figure {

}

figcaption {

margin-top: 10px;

}

/* Locations Styles */

.locations {

text-align: center;

height: 500px;

margin-right: 100px;

display: flex;

flex-direction: row;

width: 1200px;

margin-top: 5px;

}

#locations_image { /* I don’t know how to put the photo with the cup of coffe uncover */

width: 1200px;

height: 500px;

position: absolute;

left: 10%;



overflow: hidden;

}

.locations_text {

position: relative;

left: 58%;

}

.locations_maine {

display: flex;

flex-direction: row;

justify-content: space-around;

flex: 1fr 1fr 1fr;

row-gap: 40px 40px 40px;

flex-flow: row nowrap;

margin-left: 20px;

margin-right: 20px;

position: relative;

text-align: center;

height: 500px;

}

.locations_maine_portland {

margin: 80px 40px 40px 0;     /* To create space between flexbox items one way is to put to .flexitem margin: 0 5px; */

width: 300px;

height: 250px;

position: relative;

background-color: black;

text-align: center;

opacity: 1;

left: 5%;

bottom: -5%;

padding: 5px;

flex-basis: auto;

opacity: 1;

}

/* Contact Styles */

.contact {

margin: 0 auto;

text-align: center;

height: 200px;

position: relative;

width: 100%;

}

/* Footer Styles */

footer {

margin-top: 5px;

text-align: left;

margin-left: 20px;

}