Hello! I just finished the Tea Cozy project, and like to have it reviewed. I have it up on my Github Pages, and here’s a link to the design spec for comparison to what it’s supposed to look like. There are at least a couple of things in there that probably aren’t best practice, but I couldn’t think of a better way to do them at the time, so any insights would be appreciated.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tea Cozy</title>
<link href="./styles.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<div class="logo">
<img src="./resources/img-tea-cozy-logo.png" alt="Tea Cozy logo" />
</div>
<nav>
<a href="#mission">Mission</a>
<a href="#featured">Featured Tea</a>
<a href="#locations">Locations</a>
</nav>
</header>
<main>
<section id="mission">
<div class="text-container">
<h2>Our Mission</h2>
<h4>Handpicked, Artisinally Curated, Free Range, Sustainable, Small Batch, Organic Tea</h4>
</div>
</section>
<section id="featured">
<div class="text-container">
<h2>Tea of the Month</h2>
<h4>What's Steeping at The Tea cozy?</h4>
</div>
<div class="featured-teas">
<div class="tea-container fall-berry-blitz">
<div class="featured-image">
<img src="./resources/img-berryblitz.webp" />
</div>
<div class="text-container">
<h4>Fall Berry Blitz Tea</h4>
</div>
</div>
<div class="tea-container spiced-rum">
<div class="featured-image">
<img src="./resources/img-spiced-rum.jpg" />
</div>
<div class="text-container">
<h4>Spiced Rum Tea</h4>
</div>
</div>
<div class="tea-container donuts">
<div class="featured-image">
<img src="./resources/img-donut.webp" />
</div>
<div class="text-container">
<h4>Seasonal Donuts</h4>
</div>
</div>
<div class="tea-container myrtle-ave">
<div class="featured-image">
<img src="./resources/img-myrtle-ave.webp" />
</div>
<div class="text-container">
<h4>Myrtle Ave Tea</h4>
</div>
</div>
<div class="tea-container bedford-bizarre">
<div class="featured-image">
<img src="./resources/img-bedford-bizarre.jpg" />
</div>
<div class="text-container">
<h4>Bedford Bizarre Tea</h4>
</div>
</div>
</div>
</section>
<section id="locations">
<!-- Having a class and an ID with the same name probably isn't the greatest idea,
but this organization lets me keep the banner from intruding when jumping here,
with only minimal changes to my CSS -->
<div class="locations">
<div class="location-banner">
<h2>Locations</h2>
</div>
<div class="locations-list">
<div class="text-container">
<h3>Downtown</h3>
<p>384 West 4th St</p>
<p>Suite 108</p>
<p>Portland, Maine</p>
</div>
<div class="text-container">
<h3>East Bayside</h3>
<p>3433 Phisherman's Avenue</p>
<p>(Northwest Corner)</p>
<p>Portland, Maine</p>
</div>
<div class="text-container">
<h3>Oakdale</h3>
<p>515 Crescent Avenue</p>
<p>Second Floor</p>
<p>Portland, Maine</p>
</div>
</div>
</div>
</section>
<section id="contact">
<h2>The Tea Cozy</h2>
<h5>[email protected]</h5>
<h5>917-555-8904</h5>
</section>
</main>
<footer>
<h5>copyright The Tea Cozy 2017</h5>
</footer>
</body>
</html>
CSS:
html {
font-family: Helvetica;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
text-align: center;
}
body, html {
padding: 0;
margin: 0;
}
main {
margin: 0 auto;
margin-top: 69px; /* Offset for header */
display: flex;
flex-direction: column;
align-items: center;
}
h2, h3, h4, h5, p {
padding: 0;
margin: 0;
}
/* Header section */
header {
display: flex;
align-items: center;
position: fixed;
top: 0;
height: 69px;
border-bottom: 1px solid seashell;
width: 100%;
justify-content: space-between;
z-index: 100;
background-color: black;
}
.logo, nav{
margin: 0 10px;
}
.logo img {
height: 50px;
width: auto;
}
nav a {
padding-left: 10px;
}
a {
color: seashell;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
/* End of header section */
/* Mission Section */
#mission {
background-image: url("./resources/img-mission-background.webp");
height: 700px;
display: flex;
justify-content: center;
align-items: center;
width: 1200px;
padding-top: 69px;
margin-top: -69px;
}
#mission .text-container {
display: flex;
flex-wrap: wrap;
justify-items: center;
align-items: center;
background-color: black;
width: 100%;
height: 14.5%; /* attempting to make border line up with background image
as it does in the design spec */
}
#mission .text-container h2,
#mission .text-container h4 {
width: 100%;
margin: 0;
}
/* End of mission section */
/* Featured section */
#featured {
width: 1000px;
display: flex;
flex-flow: column;
/* Effective 50px padding from previous element, but makes sure the header
doesn't cover anything when jumping to #featured */
padding-top: 69px;
margin-top: -19px;
}
.featured-teas {
display: flex;
justify-content: center;
align-content: center;
flex-wrap: wrap;
padding-top: 10px;
}
#featured .featured-image {
margin: 0;
padding-top: 10px;
}
#featured .text-container h4 {
margin: 10px;
}
#featured .featured-image img {
width: 300px;
height: 200px;
}
.tea-container {
margin: 0 10px;
}
/* End of featured section */
/* Locations Section */
#locations {
/* Effective 50px padding from previous element, but makes sure the header
doesn't cover anything when jumping to #featured */
padding-top: 69px;
margin-top: -19px;
}
.locations {
background-image: url("./resources/img-locations-background.webp");
height: 500px;
width: 1200px;
}
.locations-list .text-container h3,
.locations-list .text-container p,
.location-banner h2 {
padding: 0;
margin: 0 auto;
}
/* Begin hacky nonsense to position things according to spec */
.location-banner {
width: 100%;
height: 40px;
position: relative;
top: 45px
}
.locations-list {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
margin-top: -40px;
}
/* End of hacky nonsense */
.locations-list .text-container {
background-color: black;
opacity: 1;
height: 300px;
width: 300px;
margin: 0 20px;
display: flex;
flex-flow: column wrap;
justify-content: space-around;
}
/* End of Locations Section */
/* Contact info section */
#contact {
display: flex;
flex-direction: column;
align-content: center;
justify-content: space-around;
height: 200px;
}
/* End of contact section */
/* Footer section */
footer {
text-align: left;
padding-left: 20px;
padding-bottom: 20px; /* just to get it off of the very bottom */
}