Hi all, I’ve just done the Tea Cozy project. I have to say it wasn’t easy and I did have to do research on YouTube, but it’s finally here. Now, here are my questions. First, I’d really appreciate some review of my code and your opinions. Also, I really tried to make my page as responsive as possible. I am overall quite satisfied for the fact that I’m in the game for only 4 weeks, but I’ve run into some issues.
If the window is made small the nav bar items encroach on the logo. additionally in the Locations Section, I felt forced to make the “Location” heading disappear under the Location boxes. I don’t fully understand why my boxes seem to shift up (when the browser window is narrow(, while the “Location” heading doesn’t. if the Location wasn’t shifted back via z-index, there would be some ugly overspill and merging… Any ideas?
Additionally, the bottom box seems to merge with the black background, when the window is narrow. It’s still readable, so not necessarily broken, but I’d certainly like to see it a bit better.
Any help or reviews would be hugely appreciated 
here’s the code:
<!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="css/index.css">
<title>Tea Cozy Cafe</title>
</head>
<body>
<header>
<img id="logo" src="images/img-tea-cozy-logo.png" alt="Tea Cozy Logo">
<nav>
<ul>
<li><a href="#jumbotron">Mission</a></li>
<li><a href="#tea-nav">Featured Tea</a></li>
<li><a href="#locations-image">Locations</a></li>
</ul>
</nav>
</header>
<section id="jumbotron">
<div id="mission-banner">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</section>
<span id="tea-nav"></span>
<section id="tea">
<h2 id="featured">Tea of the Month</h2>
<p>What's Steeping at The Tea Cozy?</p>
<div id="image-container">
<div class="image-box">
<img class="selection" src="images/img-berryblitz.jpg" alt="berry blitz tea">
<p>Fall Berry Blitz Tea</p>
</div>
<div class="image-box">
<img class="selection" src="images/img-spiced-rum.jpg" alt="Spiced Rum Tea">
<p>Spiced Rum Tea</p>
</div>
<div class="image-box">
<img class="selection" src="images/img-donut.jpg" alt="Donut">
<p>Seasonal Donuts</p>
</div>
<div class="image-box">
<img class="selection" src="images/img-myrtle-ave.jpg" alt="Tea Cup">
<p>Myrtle Ave Tea</p>
</div>
<div class="image-box">
<img class="selection" src="images/img-bedford-bizarre.jpg" alt="Bedford Tea">
<p>Bedford Bizarre Tea</p>
</div>
</div>
</section>
<section>
<div id="locations-image">
<h2>Locations</h2>
<div id="location-flex">
<div class="location-box">
<h3>Downtown</h3>
<p>384 West 4th St</p>
<p>Suite 108</p>
<p>Portland, Maine</p>
</div>
<div class="location-box">
<h3>East Bayside</h3>
<p>3433 Phisherman's Avenue</p>
<p>(Northwest Corner)</p>
<p>Portland, Maine</p>
</div>
<div class="location-box">
<h3>Oakdale</h3>
<p>515 Crescent Avenue</p>
<p>Second Floor</p>
<p>Portland Maine</p>
</div>
</div>
</div>
</section>
<footer>
<h2>The Tea Cozy</h2>
<h5>[email protected]</h5>
<h5>917-555-8904</h5>
<p id="copyright">copyright The Tea Cozy 2017</p>
</footer>
</body>
</html>
CSS:
* {
font-family: Helvetica, sans-serif;
color: seashell;
font-size: 22px;
}
body {
background-color: black;
display: flexbox;
}
h2, h4, p {
opacity: 0.9;
}
header {
position: fixed;
background-color: black;
width: 100%;
height: 69px;
border-bottom: 1px solid seashell;
top: 0;
left: 0;
z-index: 100;
}
#logo {
position: absolute;
height: 50px;
width: auto;
margin-left: 10px;
margin-top: 9px;
opacity: 0.9;
display: inline
}
nav {
display: flexbox;
justify-content: flex-end;
}
nav ul li {
align-items: center;
list-style: none;
display: inline;
float: right;
margin: 0 10px;
opacity: 0.9;
}
nav ul li :hover {
color: rgb(255, 226, 205);
}
#jumbotron {
position: relative;
top: 60px;
max-width: 1200px;
height: 700px;
background-image: url("../images/img-mission-background.jpg");
margin: 0 auto;
display: flex;
align-items: center;
}
#mission-banner {
width: 100%;
background-color: black;
text-align: center;
height: auto;
opacity: 0.9;
}
h2 {
font-size: 30px;
margin-top: 5px;
}
h4 {
margin-bottom: 5px;
}
#tea {
max-width: 1000px;
margin: 150px auto;
text-align: center;
}
.image-box {
min-width: 300px;
min-height: 250px;
margin: 7px;
}
#image-container {
display: flex;
max-width: 1000px;
justify-content: center;
flex-wrap: wrap;
}
.selection {
height: 200px;
width: 300px;
}
.image-box p {
margin-top: 10px;
}
#locations-image {
background-image: url("../images/img-locations-background.jpg");
max-width: 1200px;
min-height:500px;
margin: 0 auto;
position: relative;
opacity: 0.9;
padding-bottom: 30px;
background-repeat: no-repeat;
}
#locations-image h2 {
position: absolute;
text-align: center;
top: 110px;
width: 100%;
opacity: 1;
padding-bottom: 15px;
z-index: 98;
}
#location-flex {
padding-top: 45px;
display: flex;
max-width:1200px;
min-height: 500px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.location-box {
width: 300px;
height: 250px;
background-color: black;
margin: 0px 15px 20px 15px;
text-align: center;
line-height: 1.5;
z-index: 99;
}
footer {
position: relative;
padding-top: 15px;
text-align: center;
font-weight: 700;
}
h5 {
font-size: 20px;
}
#copyright {
float: left;
padding-left: 15px;
}
I’ll keep your advice in mind!