Hi there, I’ve finished the project and was wondering if anyone has any more improvement suggestions?
body {
font-family: Helvetica, sans-serif;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
text-align: center;
margin:auto;
}
header {
position: fixed;
height: 69px;
width: 100%;
border-bottom: 1px solid seashell;
display: block;
top: 0;
background-color: black;
}
#logo {
height: 50px;
float: left;
padding-left: 10px;
padding-top: 9.5px;
}
.navigation {
float: right;
height: 100%;
margin: 0 auto;
}
.navigation a {
height: 100%;
display: table;
float: left;
padding: 0px 20px;
}
.navigation a li {
vertical-align: middle;
display: table-cell;
text-decoration: underline;
color: white;
}
.mission-container {
background-image: url("/resources/images/img-mission-background.jpeg");
background-repeat: no-repeat;
background-position: center;
height: 700px;
max-width: 1200px;
margin: 40px auto;
display: flex;
}
.text-over {
margin: auto;
width: 100%;
background-color: black;
}
#featured h2 {
margin-top: 80px;
}
.image-container {
display: inline-flex;
max-width: 1000px;
flex-wrap: wrap;
justify-content: center;
}
.images img {
height: 200px;
width: 300px;
padding: 0px 15px;
}
.image-container h4 {
margin: 10px 0px;
padding-bottom: 20px;
}
.locations-container {
height: 500px;
max-width: 1200px;
margin: 40px auto auto auto;
padding-top: 50px;
background-image: url("/resources/images/img-locations-background.jpeg");
background-repeat: no-repeat;
background-position: top;
background-size: cover;
}
.locations-container h2{
margin-bottom: 15px;
}
.box-container {
max-width: 1050px;
margin: auto;
display: flex;
justify-content: space-between;
}
.location {
width: 300px;
max-height: 280px;
padding: 20px;
margin: 0px 20px;
flex-basis: 30%;
background-color: black;
opacity: 1;
box-sizing: border-box;
}
.location h3, p {
padding-bottom: 40px;
margin: auto 0px 0px 0px;
}
footer {
display: block;
text-align: left;
padding-left: 20px;
}
<!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">
<title>Tea Cozy</title>
<link rel="stylesheet" href="resources/style.css">
</head>
<body>
<!-- Header Section-->
<header>
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png" id="logo">
<ul class="navigation">
<a href="#mission"><li>Mission</li></a>
<a href="#featured"><li>Featured Tea</li></a>
<a href="#locations"><li>Locations</li></a>
</ul>
</header>
<main>
<!-- Mission Section-->
<div id="mission">
<div class="mission-container">
<div class="text-over">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</div>
</div>
<!-- Featured Tea Section -->
<div id="featured">
<h2>Tea of the Month</h2>
<h4>What's Steeping at The Tea Cozy</h4>
</div>
<div class="image-container">
<div class="images">
<img src="resources/images/img-berryblitz.jpeg">
<h4>Fall Berry Blitz Tea</h4>
</div>
<div class="images">
<img src="resources/images/img-spiced-rum.jpeg">
<h4>Spiced Rum Tea</h4>
</div>
<div class="images">
<img src="resources/images/img-donut.jpeg">
<h4>Seasonal Donuts</h4>
</div>
<div class="images">
<img src="resources/images/img-myrtle-ave.jpeg">
<h4>Myrtle Ave Tea</h4>
</div>
<div class="images">
<img src="resources/images/img-bedford-bizarre.jpeg">
<h4>Bedford Bizarre Tea</h4>
</div>
</div>
<!-- Locations Section-->
<div id="locations">
</div>
<div class="locations-container">
<h2>Locations</h2>
<div class="box-container">
<div class="location">
<h3>Downtown</h3>
<p>384 West 4th St</p>
<p>Suite 108</p>
<p>Portland, Maine</p>
</div>
<div class="location">
<h3>East Bayside</h3>
<p>3433 Phisherman's Avenue</p>
<p>(Northwest Corner)</p>
<p>Portland, Maine</p>
</div>
<div class="location">
<h3>Oakdale</h3>
<p>515 Crescent Avenue</p>
<p>Second Floor</p>
<p>Portland, Maine</p>
</div>
</div>
</div>
<!-- Contact Section-->
<contact>
<h2>The Tea Cozy</h2>
<h5>contact@theteacozy.com</h5>
<h5>917-555-8904</h5>
</contact>
</main>
<!-- Footer Section-->
<footer>
<h5>copyright The Tea Cozy 2017</h5>
</footer>
</body>
</html>