Off-Platform Practice Project: Tea Cozy

Hi everyone!

I just finished the Tea Cozy off-platform project and would love constructive feedback! I formatted the code to look as close to the template as possible, but as a beginner, I imagine that the code could be cleaner. I wanted to see if I could work in some code that would make it responsive to different screen sizes, but decided not to avoid needless frustration, and to just stick to the task at hand. If there is something I can clean up or improve, please try to explain why or what I am missing–I am highly interested in learning! And if you have any questions about why something is a certain way, please ask!

Note: The meta tags that are in the head are there because of a prior lesson. I’m not quite sure what they’re for yet, but hopefully, I will learn in the future. I figured it would be good practice to include them if they’re regularly used in practice. Also, I apologize if the class titles are confusing–it’s how my brain could visualize the containers.

Thank you!

<!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/index.css">
    <title>The Tea Cozy</title>
</head>

<body>
    <!--Header-->
    <header class="header-container">
        <img src="./Resources/imgs/img-tea-cozy-logo.png" alt="tea cozy logo" />
        <nav>
            <ul>
            <li><a href="#mission">Mission</a></li>
            <li><a href="#featured">Featured Tea</a></li>
            <li><a href="#locations">Locations</a></li>
            </ul>
        </nav>   
    </header>
    <main>
        <!--Banner-->
        <section id="mission" class="banner-container">
            <div class="mission-banner-cta">
                <h2>Our Mission</h2>
                <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
            </div>
        </section>
        <!--Featured Tea-->
        <section id="featured" class="featured-container">
            <div class="featured-title-cta">
                <h2>Tea of the Month</h2>
                <h4>What's Steeping at The Tea Cozy?</h4>
            </div>
            <div class="featured-figure-cta">
                <figure>
                    <img src="./Resources/imgs/img-berryblitz.jpg" alt="picture of berry blitz tea" />
                    <figcaption>Fall Berry Blitz Tea<figcaption>
                </figure>
                <figure>
                    <img src="./Resources/imgs/img-spiced-rum.jpg" alt="picture of packaked spice rum" />
                    <figcaption>Spiced Rum Tea</figcaption>
                </figure>
                <figure>
                    <img src="./Resources/imgs/img-donut.jpg" alt="picture of a donut" />
                    <figcaption>Seasonal Donuts</figcaption>
                </figure>
                <figure>
                    <img src="./Resources/imgs/img-donut.jpg" alt="picture of previous donut picture" />
                    <figcaption>Myrtle Ave Tea</figcaption>
                </figure>
                <figure>
                    <img src="./Resources/imgs/img-bedford-bizarre.jpg" alt="picture of tea from above with sugar" />
                    <figcaption>Bedford Bizarre Tea</figcaption>
                </figure>
            </div>
        </section>
        <!--Locations-->
        <section id="locations" class="locations-container">
            <div class="locations-title-cta">
               <h2>Locations</h2> 
            </div>   
            <div class="locations-add-cta">
                <div class="address-container">
                    <h3>Downtown</h3>
                    <p>384 West 4th St</p>
                    <p>Suite 108</p>
                    <p>Portland, Maine</p>
                </div>
                <div class="address-container">
                    <h3>East Bayside</h3>
                    <p>3433 Phisherman's Avenue</p>
                    <p>Northwest Corner</p>
                    <p>Portland, Maine</p>
                </div>
                <div class="address-container">
                    <h3>Oakdale</h3>
                    <p>515 Crescent Ave</p>
                    <p>Second Floor</p>
                    <p>Portland, Maine</p>
                </div>
            </div>
        </section>
    <!--Footers-->
        <section class="contact-container">
                <h2>The Tea Cozy</h2>
                <h5>contact@theteacozy.com</h5>
                <h5>917-555-8904</h5>
        </section>
    </main>
    <footer class="footer-container">
        <h5>&copy; The Tea Cozy 2017</h5>
    </footer>
    
</body>

</html>
* {
    font-family: Helvetica;
    background-color: black;
    color: seashell;
    opacity: 0.9;
    margin: 0;
}

html,
body {
    font-size: 22px;
    box-sizing: border-box;
}

main {
    padding-top: 3.14rem;
}

/*Header*/
.header-container {
    position: fixed;
    display: flex;
    width: 100%;
    height: 3.14rem;
    border-bottom: 1px solid seashell;
    align-items: center;
    justify-content: space-between;
    z-index: 100;
}

.header-container img {
    height: 2.27rem;
    padding-left: 0.46rem;
}

nav ul {
    list-style: none;
    display: flex;
    padding-right: 0.46rem;
}

ul li {
    font-family: Helvetica;
    padding-left: 1.25rem;
}

/*Banner*/

.banner-container {
    background: url(../imgs/img-mission-background.jpg);
    width: 54.55rem;
    margin: 0 auto;
    height: 31.82rem;
    display: flex;
    align-items: center;
}

.mission-banner-cta {
    opacity: revert;
    text-align: center;
    width: inherit;
}

.mission-banner-cta h2,
.mission-banner-cta h4 {
    padding: 0.5rem 0;
}

/*Featured Tea*/

.featured-container {
    width: 45.45rem;
    margin: 0 auto;
    padding: 4rem 0;
}

.featured-title-cta {
    text-align: center;
}

.featured-title-cta h2 {
    padding-bottom: 0.5rem;
}

.featured-title-cta h4 {
    padding: 0.5rem 0 0.7rem
}

.featured-figure-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}

figure {
    padding: 0.3rem 0.75rem;
}

figure img {
    height: 9.1rem;
    width: 13.63rem;
}

figcaption {
    margin-top: 0.45rem;
    font-weight: 600;
}

/*Locations*/

.locations-container {
    background: url(../imgs/img-locations-background.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 54.55rem;
    margin: 0 auto;
    height: 22.73rem;
    padding-top: 3.25rem;
}

.locations-title-cta {
    text-align: center;
    background-color: transparent;
}

.locations-title-cta h2 {
    background-color: transparent;
    font-weight: 800;
}

.locations-add-cta {
    display: flex;
    margin-top: 0.68rem;
    justify-content: center;
    background-color: transparent;
}

.address-container {
    text-align: center;
    line-height: 3.15rem;
    width: 13.64rem;
    margin: 0 0.91rem;
    opacity: 1;
}

/*Footers*/

.contact-container {
    height: 9.1rem;
    text-align: center;
    line-height: 2.5rem;
    margin-bottom: 1rem;
}

.contact-container h2 {
    padding-bottom: 0.75rem;
}

.footer-container {
    padding: 0 0 1.25rem 0.91rem;
}