Tea Cozy My Solution

Not really a help post. Just wanted to share my solution for the “Tea Cozy Layout” project.

Here is the link to my GitHub: https://github.com/andresuriegas/codecademy_exercises/tree/main/Tea_Cozy_Layout_Flexbox

Also the code is below:

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

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

<body>
    <header>
        <img class="logo" src="/Tea_Cozy_Layout_Flexbox/Assets/img-tea-cozy-logo.png" alt=" Tea Cozy Logo">
        <nav>
            <ul class="navigation">
                <li><a href="#mission-target">Mission</a></li>
                <li><a href="#featured-tea-target">Featured Tea</a></li>
                <li><a href="#locations-target">Locations</a></li>
            </ul>
        </nav>
    </header>

    <a href="" id="mission-target"></a>
    <section class="mission-container">
        <div class="mission-statement-container">
            <h2>Our Mission</h2>
            <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
        </div>
    </section>

    <a href="" id="featured-tea-target"></a>
    <section class="featured-container">
        <div class="featured-statement">
            <h2>Tea of the Month</h2>
            <h4>What's Steeping at The Tea Cozy?</h4>
        </div>
        <div class="flexbox-center">
            <div class="img-container"> 
                <figure>
                    <img src="/Tea_Cozy_Layout_Flexbox/Assets/img-berryblitz.jpg" alt="Fall Berry Blitz Tea">
                    <figcaption>Fall Berry Blitz Tea</figcaption>
                </figure>
            </div>
            <div class="img-container"> 
                <figure>
                    <img src="/Tea_Cozy_Layout_Flexbox/Assets/img-spiced-rum.jpg" alt="Spiced Rum Tea">
                    <figcaption>Spiced Rum Tea</figcaption>
                </figure>
            </div>
            <div class="img-container"> 
                <figure>
                    <img src="/Tea_Cozy_Layout_Flexbox/Assets/img-donut.webp" alt="Seasonal Donuts">
                    <figcaption>Seasonal Donuts</figcaption>
                </figure>
            </div>
            <div class="img-container"> 
                <figure>
                    <img src="/Tea_Cozy_Layout_Flexbox/Assets/img-donut.webp" alt="Myrtle Ave Tea">
                    <figcaption>Myrtle Ave Tea</figcaption>
                </figure>
            </div>
            <div class="img-container"> 
                <figure>
                    <img src="/Tea_Cozy_Layout_Flexbox/Assets/img-bedford-bizarre.jpg" alt="Bedford Bizarre Tea">
                    <figcaption>Bedford Bizarre Tea</figcaption>
                </figure>
            </div>
        </div>
    </section>

    <a href="" id="locations-target"></a>
    <section class="locations-container">
        <div class="locations-statement">
            <h2>Locations</h2>
        </div>
            <div class="address-container"> 
                <h3>Downtown</h3>
                <h4>384 West 4th St</h4>
                <h4>Suite 108</h4>
                <h4>Portland, Maine</h4>
            </div>
            <div class="address-container"> 
                <h3>East Bayside</h3>
                <h4>3433 Phisherman's Avenue</h4>
                <h4>(Northwest Corner)</h4>
                <h4>Portland, Maine</h4>
            </div>
            <div class="address-container"> 
                <h3>Oakdale</h3>
                <h4>515 Crescent Avenue</h4>
                <h4>Second Floor</h4>
                <h4>Portland, Maine</h4>
            </div>
    </section>

    <section class="contact-container">
        <h2>The Tea Cozy</h2>
        <h5>contact@theteacozy.com</h5>
        <h4>917-55-8904</h4>
    </section>

    <footer>
        <h5>copyright The Tea Cozy 2017</h5>  
    </footer>

</body>

</html>
/*RESET STYLES*/

* {
    margin: 0;
    padding: 0;
}

/*GLOBAL STYLES*/

html {
    font-family: "Helvetica", Arial, sans-serif;
    font-size: 22px;
    line-height: normal;
}

body {
    background-color: black;
    color: seashell;
    opacity: 0.9;
}

/*NAVIGATION BAR STYLES*/

header {
    height: 69px;
    width: 100%;
    top:0;
    z-index: 2;
    border-bottom: 1px solid seashell;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: black;
}

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

.navigation {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    margin: 0;
    list-style: none;
}

.navigation a {
    text-decoration: underline;
    display: block;
    color: seashell;
    margin: 0 40px;
}

.navigation a:hover {
    opacity: 0.7;
}

@media screen and (max-width: 700px) {
    .navigation {
        flex-flow: column wrap;
        padding: 0;
    }

    .navigation a {
        text-align: center;
        padding: 10px;
    }

    header {
        height: auto;
    }
}

/*MISSION SECTION STYLES*/

.mission-container {
    display: flex;
    position: relative;
    top: 70px;
    height: 700px;
    width: 1200px;
    background-image: url(/Tea_Cozy_Layout_Flexbox/Assets/img-mission-background.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    align-items: center;
    margin: auto;
}

@media screen and (max-width: 1200px){
    .mission-container {
        width: auto;
    }

    .mission-container h2, h4{
        width: auto;
    }
    
}

@media screen and (max-width: 700px) {
    .mission-container {
        top: 138px;
    }
    
}

.mission-container h2{
    background-color: black;
    width: 1200px;
    text-align: center;
    padding: 20px 0 5px 0;
}

.mission-container h4{
    background-color: black;
    width: 1200px;
    text-align: center;
    padding-bottom: 20px;
}

.mission-statement-container {
    flex-shrink: 2;
}

/*FEATURED TEAS SECTION STYLES*/

.featured-container {
    width: 1000px;
    margin: 150px auto 90px auto;
    position: relative;
}

.featured-statement {
    text-align: center;
    margin: 20px;
}

.featured-statement h4 {
    margin: 20px 0;
}

.flexbox-center {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}

.img-container {
    display: block;
}

.img-container img{
    height: 200px;
    width: 300px;
    flex-basis: auto;
    margin: 10px;
}

figcaption {
    text-align: center;
    margin-top: 5px;
    font-weight: bold;
}

/*LOCATIONS SECTION STYLES*/

.locations-container {
    width: 1200px;
    height: 500px;
    margin: auto;
    background-image: url(/Tea_Cozy_Layout_Flexbox/Assets/img-locations-background.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-flow: row wrap;
    align-content: center;
    justify-content: center;
}

.locations-statement {
    text-align: center;
    width: 100%;
}

.address-container {
    width: 300px;
    height: 250px;
    margin: 30px 40px;
    background-color: black;
    opacity: 1;
    text-align: center;
}

.address-container h3 {
    margin-top: 30px;
}

.address-container h4 {
    margin-top: 25px;
    font-weight: 400
}

/*CONTACT SECTION STYLES*/

.contact-container {
    text-align: center;
    height: 200px;
    width: auto;
}

.contact-container h2 {
    margin-top: 30px;
}

.contact-container h5, .contact-container h4 {
    margin: 35px;
}

/*FOOTER STYLES*/

footer h5{
    margin: 20px;
    float: left;
}
1 Like