Tea Cozy Project

Language Help CSS
1

So I just finished the Tea Cozy Project. I’ve been struggling with it for a couple of days and now seen it finally finished makes me feel really proud. I would love to hear from you, any feedback or review would be really apreciated

Thanks in advance!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="resources/styles.css" />
    <title>Tea Cozy</title>
</head>
<body>

    <header class="navbar">
        <div class="logo" > <img  src="resources/Logo.png"/></div>
        <div class="navitems">
            <a href="#mission">Mission</a>
            <a href="#tea">Featured Tea</a>
            <a href="#locations">Locations</a>
        </div>
    </header>
    <main>
        <div class="fill" id="mission" ></div>
        <div class="container1" >
            <div class="mission">
                <div class="text1"><h2 >Our Mission</h2>
                <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tree</h4></div>

            </div >
        </div >
        <div class="fill" id="tea"></div>
        <div class="container2">
            <div class="tea">
                <div class="text2" ><h2 >Tea of the Month</h2>
                <h4>What's Steeping at The Tea Cozy?</h4></div><br/>
                <div class="cards">
                    <div class="imgBx">
                    <figure class="imgs"><img src="resources/fall-berry.jpg"></figure><figcaption>Fall Berry Blitz Tea</figcaption> 
                    </div>
                    <div class="imgBx">
                    <figure class="imgs"><img src="resources/spiced.jpg"></figure><figcaption>Spiced Rum Tea</figcaption> 
                    </div>
                    <div class="imgBx">
                    <figure class="imgs"><img src="resources/donut.jpg"></figure><figcaption>Seasonal Donuts</figcaption> 
                    </div>
                    <div class="imgBx">
                    <figure class="imgs"><img src="resources/myrtle.jpg"></figure><figcaption>Myrtle Ave Tea</figcaption> 
                    </div>
                    <div class="imgBx">
                    <figure class="imgs"><img src="resources/bedford.jpg"></figure><figcaption>Bedford Bizarre Tea</figcaption> 
                    </div>
                </div>
            </div>

        </div>
        <div class="fill" id="locations"></div>
        <div class="container3">

            <div class="locations">

                <div class="text3"> <h2 id="loc">Locations</h2></div>
                <div class="boxes">
                    <div class="textbox"><h3>Downtown</h3><p>384 West 4th St</p>
                    <p>Suite 108</p><p>Portland, Maine</p></div>
                    <div class="textbox"><h3>East Bayside</h3><p>3433 Phisherman's Avenue</p>
                        <p>(Northewest Corner)</p><p>Portland, Maine</p></div>
                    <div class="textbox"><h3>Oakdale</h3><p>515 Crescent Avenue</p>
                        <p>Second Floor</p><p>Portland, Maine</p></div></div>
                </div>

            </div>

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

        </footer>
    </main>

</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    }

body{
    font-family: Helvetica, sans-serif;
    font-size: 22px;
    color: seashell;
    background-color: black;
    opacity: 0.9;
    text-align: center;
}

figcaption{
    font-family: Helvetica, sans-serif;
    font-size: 22px;
    color: seashell;
    padding: 20px;
    font-weight: bold;
}

a:link{
    color: seashell;
}

a:visited{
    color: seashell;
}

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

.logo{
    display: flex;
    height: 50px;
}

.navitems a{
    padding: 10px;
}

.fill{
    width: 100%;
    height: 69px;
}

.fill2{
    width: 100%;
    height: 30px;
}

div.container1{
    
    display: flex;
    justify-content: center;
    width: 100%;
}

.mission{
    background-image: url(../resources/Background.jpg);
    width: 1200px;
    height: 700px;
    display: flex;
    align-items: center;
}

.text1,.text2{
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    height: 100px;
    width: 100%;
    padding: 10px;
    
}

.text1{
    background-color: black ;
}



div.container2{
    display: flex;
    width: 100%;
    justify-content: center;

}

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

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

.imgs{
    display: flex;
    height: 200px;
    width: 300px;
}

div.container3{
    display: flex;
    width: 100%;
    justify-content: center;

}

.locations{
    display: flex;
    background-image: url(../resources/locations.jpg);
    justify-content: center;
    flex-direction: column;
    height: 500px;
    width: 1200px;
}

#loc{
    position: relative;
    top: 5px;
}

.boxes{
    display: inline-flex;
    justify-content: center;
    flex-wrap: wrap;
}

.textbox{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 300px;
    height: 250px;
    background-color: black;
    margin: 20px;
    opacity: 1;
   
}

.footer{
    width: 100%;
}

.contactInfo{
    display: flex;
    height: 170px;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
}

.copyright{
    text-align: left;
    margin: 25px 0 25px 20px;
}