Hello! Here is my solution to the exercise, please give me your feedback!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Styles -->
<link rel="stylesheet" href="styles.css">
<title>Tea Cozy front page</title>
</head>
<body>
<header>
<img src="img/img-tea-cozy-logo.png" alt="Tea-cozy-logo" class="logo">
<ul class="nav-btn">
<li><a href="#mission">Mission</a></li>
<li><a href="#featured">Featured Tea</a></li>
<li><a href="#locations">Locations</a></li>
</ul>
</header>
<main>
<section id="mission">
<div class="mission-container">
<div class="mission-text">
<h2>Our Mission</h2>
<br>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea
</h4>
</div>
</div>
</section>
<section id="featured" class="featured-container">
<div class="featured-title">
<h2>Tea of the Month</h2>
<h4>What's Steeping at The Tea Cozy?</h4>
</div>
<div class="featured-img">
<div class="box">
<figure>
<img src="img/img-berryblitz.jpg" alt="Berry Tea">
<figcaption>Fall Berry Blitz Tea</figcaption>
</figure>
</div>
<div class="box">
<figure>
<img src="img/img-spiced-rum.jpg" alt="Rum Tea">
<figcaption>Spiced Rum Tea</figcaption>
</figure>
</div>
<div class="box">
<figure>
<img src="img/img-donut.jpg" alt="Donut">
<figcaption>Seasonal Donuts</figcaption>
</figure>
</div>
<div class="box-bottom">
</div>
<div class="box">
<figure>
<img src="img/img-myrtle-ave.jpg" alt="Myrtle Ave Tea">
<figcaption>Myrtle Ave Tea</figcaption>
</figure>
</div>
<div class="box">
<figure>
<img src="img/img-bedford-bizarre.jpg" alt="Bedford Bizarre Tea">
<figcaption>Bedford Bizarre Tea</figcaption>
</figure>
</div>
</div>
</section>
<section id="locations" class="locations-container">
<div class="loc-title">
<h2>Locations</h2>
</div>
<div class="loc-box">
<h3>Downtown</h3>
<p>384 West 4th St</p>
<p>Suite 108</p>
<p>Portland, Maine</p>
</div>
<div class="loc-box">
<h3>East Bayside</h3>
<p>3433 Phisherman's Avenue</p>
<p>(Northwest Corner)</p>
<p>Portland, Maine</p>
</div>
<div class="loc-box">
<h3>Oakdale</h3>
<p>515 Crescent Avenue</p>
<p>Second Floor</p>
<p>Portland, Maine</p>
</div>
</section>
<footer>
<div class="contact">
<h2>The Tea Cozy</h2>
<h5>[email protected]</h5>
<h5>917-555-8904</h5>
</div>
<div class="left">
<h5>copyright The Tea Cozy 2017</h5>
</div>
</footer>
</main>
</body>
</html>
CSS
* {
margin: auto;
}
body {
font-family: Helvetica;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
}
/* Nav Bar */
header {
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
height: 69px;
width: 100%;
top: 0;
z-index: 2;
border-bottom: 1px solid seashell;
background-color: black;
}
.logo {
height: 50px;
margin-left: 10px;
}
.nav-btn {
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
list-style: none;
margin: 0;
}
.nav-btn a{
color: seashell;
margin: 0 40px;
text-decoration: underline;
cursor: pointer;
margin-right: 10px;
display: block;
}
.nav-btn a:hover {
opacity: 0.9;
}
/* Mission section */
.mission-container {
display: flex;
align-items: center;
background-image: url(/img/img-mission-background.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
top: 44px;
height: 700px;
width: 1200px;
margin: auto;
}
.mission-text {
background-color: black;
text-align: center;
width: 1200px;
padding: 10px;
}
/* Featured section */
.featured-container {
width: 1000px;
position: relative;
margin: 80px auto 90px auto;
}
.featured-title {
text-align: center;
margin: 0 0 50px;
}
.featured-title h2 {
padding-bottom: 25px ;
}
.featured-img {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.box {
display: block;
}
.box img {
height: 200px;
width: 300px;
flex-basis: auto;
margin: 10px;
padding-bottom: 10px;
opacity: 1;
}
figcaption {
text-align: center;
margin-bottom: 30px;
text-decoration: solid;
font-weight: bolder;
}
/* Location section */
.locations-container {
background-image: url(/img/img-locations-background.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
height: 500px;
width: 1200px;
margin: auto;
top: 0px;
text-align: center;
display: flex;
flex-flow: row wrap;
align-content: center;
justify-content: center;
}
.loc-title {
text-align: center;
width: 100%;
}
.loc-box {
background-color: black;
width: 300px;
height: 250px;
margin: 30px 40px;
opacity: 1;
}
.loc-box h3 {
margin-top: 30px;
}
.loc-box p {
margin-top: 25px;
font-weight: 400;
}
/* Footer Section */
.contact {
text-align: center;
height: 200px;
width: auto;
margin: 30px;
}
.contact h2 {
margin-top: 10px;
}
.contact h5 {
margin: 35px;
}
.left {
margin: 20px;
float: left;
}
/* Queries*/
@media screen and (max-width: 700px) {
.navigation {
flex-flow: column wrap;
padding: 0;
}
.navigation a {
text-align: center;
padding: 10px;
}
header {
height: auto;
}
}
@media screen and (max-width: 1200px){
.mission-container {
width: auto;
}
.mission-container h2, h4{
width: auto;
}
}```