Tea Cozy project

hi friends i just wanted to post my answer for the Tea Cozy project in case anyone needed some help :slight_smile: !! feel free to msg me if u have any questions okie tyyy <3

here’s my html

<!--Tea Cozy Project for codecademy -->
<!DOCTYPE html>
<html>
    <head>
        <title>Tea Cozy</title>
        <link href="./styling.css" rel="stylesheet">
    </head>
    <body>
        <header>
            <!--header-->
            <div class="header">
                <!--Logo-->
                <div class="logo">
                    <img class="logo" src="./images/img-tea-cozy-logo.png">
                </div>
                <nav>
                    <ul class="navigation">
                        <li><a href="#mission">Mission</a></li>
                        <li><a href="#featured-tea">Featured Tea</a></li>
                        <li><a href="#locations">Locations</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <!--mission section-->
        <main>
            <div class="mission" id="mission">
                <h2>Our Mission</h2>
                <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
            </div>
        </main>
        <!--Featured Tea-->
        <section id="featured-tea">
            <div class="tea-head">
                <h2>Tea of the Month?</h2>
                <h4>What's Steeping at The Tea Cozy?</h4>
            </div>
            <div class="tea-imgs">
                <div class="img-1">
                    <img src="./images/img-berryblitz.jpg">
                    <h4>Fall Berry Blitz Tea</h4>
                </div>
                <div class="img-2">
                    <img src="./images/img-spiced-rum.jpg">
                    <h4>Spiced Rum Tea</h4>
                </div>
                <div class="img-3">
                    <img src="./images/img-donut.jpg">
                    <h4>Seasonal Donuts</h4>
                </div>
                <div class="img-4">
                    <img src="./images/img-myrtle-ave.jpg">
                    <h4>Myrtle Ave Tea</h4>
                </div>
                <div class="img-5">
                    <img src="./images/img-bedford-bizarre.jpg">
                    <h4>Bedford Bizarre Tea</h4>
                </div>
            </div>
        </section>
        <!--Locations-->
        <section id="locations">
            <div class="locations-header">
                <h2>Locations</h2>
            </div>
            <div class="boxes">
                <div class="downtown">
                    <h3>Downtown</h3>
                    <p>384 West 4th St</p>
                    <p>Suite 108</p>
                    <p>Portland, Maine</p>   
                </div>
                <div class="east">
                    <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>
        </section>
        <footer>
            <h2>The Tea Cozy</h2>
            <h5>[email protected]</h5>
            <h5>917-555-8904</h5>
        </footer>
        <div class="copyright">
            <h5>copyright The Tea Cozy 2017</h5>
        </div>
    </body>
</html>

here’s my css

/* main styling */
body {
    background-color: black;
    color: seashell;
    font-family: Helvetica;
    font-size: 22px;
    margin: 0;
}

a:link {
    color: seashell;
}

a:visited {
    color: seashell;
}

/*header*/

.header {
    display: inline-flex;
    flex-direction: row;
    height: 69px;
    background-color: black;
    border-bottom: 1px solid seashell;
    width: 100%;
    align-items: center;
    align-content: space-between;
    position: fixed;
}

.logo {
    height: 50px;
    margin-left: 10px;
    flex-grow: 1;
}

/*main*/

.navigation li {
    display: inline-flex;
    text-decoration: underline;
    margin-left: 20px;
    margin-right: 10px;
}

.mission {
    background-image: url(./images/img-mission-background.jpg);
    width: 1200px;
    height: 700px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 69px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;

}

.mission h2, .mission h4 {
    background-color: black; 
    display: inline-flex;
    justify-content: center;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}

.mission h2 {
    padding-bottom: 10px;
}

/*featured tea*/

#featured-tea {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-top: 50px;
}

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

.tea-imgs {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
}

.tea-imgs h4 {
    margin-top: 10px;
    margin-bottom: 0;
}

/*locations*/

#locations {
    background-image: url(./images/img-locations-background.jpg);
    width: 1200px;
    height: 500px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 70px;
    background-position: center;
    margin-top: 100px;
}

.locations-header h2 {
    text-align: center;
    margin-bottom: 15px;
}

.downtown, .east, .oakdale {
    width: 300px;
    background-color: black;
    display: inline-flex;
    flex-direction: column;
    text-align: center;
}

.boxes {
    display: flex;
    justify-content: center;
    gap: 40px;
}

/*footer*/

footer {
    text-align: center;
}

footer h2 {
    margin: 14px;
}

.copyright {
    margin-left: 20px;
}

i attached my final results as well :slight_smile: