Tea Cozy Project - My Solution

Hey everyone! Not really a question, just looking to share my solution for the Tea Cozy Project. Might not be perfect (I couldn’t get the bottom border to work but I’m happy with where I got). Code isn’t clean, I’ll just leave it here if anyone feels like giving me some tips :smiley:

<!DOCTYPE html>
<html>
<head>
<title>Tea Cozy</title>
<link href="styles.css" rel="stylesheet" type="text/css">


</head>
<body>
<header><img src="img-tea-cozy-logo.png">
    <div><h1>
        Mission
    </h1>><h1>
        Featured Tea
    </h1><h1>
        Locations
    </h1></div>
</header>


<main><div class="mission"> <div class="center"><h2>Our Mission</h2>
    <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4></div>
</div>

<div class="month">
    <div class="center"><h2>Tea of the Month</h2><h4>What's Steeping at The Tea Cozy?</h4></div>
    <div class="imgtxt"><img src="img-berryblitz.jpg"><h4>Fall Berry Blitz</h4></div>
    <div class="imgtxt"><img src="img-spiced-rum.jpg"><h4>Spiced Rum Tea</h4></div>
    <div class="imgtxt"><img src="img-donut.jpg"><h4>Seasonal Donuts</h4></div>
    <div class="imgtxt"><img src="img-myrtle-ave.jpg"><h4>Myrtle Ave Tea</h4></div>
    <div class="imgtxt"><img src="img-bedford-bizarre.jpg"><h4>Bedford Bizarre Tea</h4></div>
</div>
<div>
    <div class="locations"> <div id="locate"><h2>Locations</h2></div>
        <div class="black"><h2>Downtown</h2><h4>384 West 4th St</h4><h4>Suite 108</h4><h4>Portland, Maine</h4></div>
        <div class="black"><h2>East Bayside</h2><h4>3433 Phisherman's Avenue</h4><h4>(Northwest Corner)</h4><h4>Portland, Maine</h4></div>
        <div class="black"><h2>Oakdale</h2><h4>515 Crescent Avenue</h4><h4>Second Floor</h4><h4>Portland, Maine</h4></div>
        </div>
    </div>
</div>

<div class="center"><h2 class="cozy">The Tea Cozy</h2><h5>contact@theteacozy.com
</h5><h5>917-555-8904</h5></div>
</main>
    

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

</body>
</html>
html {
    display: flex;
    justify-content: center;
    background-color: black;
    font-family: Helvetica;
    font-size: 22px;
    opacity: 0.9;
    color: seashell;
}
body {
    justify-content: center;
}

header {
    display: inline-flex;
    height: 70px;
    box-sizing: border-box;
    margin-bottom: 1px solid seashell;
    width: 100%;
    justify-content: space-between;
    background-color: black;
}

header img {
    height: 50px;
    padding: 10px;
}

header h1 {
    display: inline-flex;
    text-decoration: underline;
    padding: 0px 5px;
    font-size: 1rem;
}

main {
    
}
.mission {
    display: flex;
    background-image: url("img-mission-background.jpg");
    height: 700px;
    width: 1200px;
    flex-flow: column wrap;
    align-items: center;
    align-content: center;
}

.center {
    align-items: center;
    background-color: black;
    text-align: center;
    margin: auto;
    width: 100%;
}

.center h2, .center h3, .center h4, .center h5 {
    margin: 20px 0px;
    font-weight: 700;
}

.month {
    margin:auto;
display: flex;
width: 1000px;
flex-flow: row wrap;
justify-content: space-evenly;
}
.month img {
    height: 200px;
    width: 300px;
}

.imgtxt {
    display: flex;
    flex-flow: column;
    align-items: center;
    width: 300px;
}

.locations {
    display: flex;
    background-image: url("img-locations-background.jpg");
    height: 700px;
    width: 1200px;
    flex-flow: row-reverse wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    display: inline-flex;
}

#locate {
    width: 1000px;
    display: flex;
align-items: center;
justify-content: center;
}

#locate h2 {
    display: flex;
    align-content: center;
    align-items: center;
}

.locations h3, .locations h4 {
    align-items: center;
    text-align: center;
}
.black {
    display: flex;
    background-color: black;
    align-content: center;
    align-items: center;
    flex-flow: column;
    margin: 15px 20px;
    width: 300px;
}

.cozy {
    padding-bottom: 20px;
}

footer h3 {
    padding: 20px;
}