If you are like me, you are frustrated with the CSS Tea Cozy project.
Found a guy on YouTube who seems to have figured it out. Turn up your volume; his mic isn’t that great 
It looks like this is the first of three parts.
3 Likes
Here is the solution for a quick how-to.
1 Like
Hi,
I am sharing my Tea Cozy solution as a second sample of how the website could be built, if there is need for comparison or alternative approaches. As always, there is room for improvement but this works as it is.
cheers
index.html
`
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="./resources/css/index.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<div>
<img src='/resources/img/img-tea-cozy-logo.png') id="logo">
<ul class=nav>
<a href=#Mission><li>Mission</li></a>
<a href=#FeaturedTea><li>Featured Tea</li></a>
<a href=#Locations><li>Locations</li></a>
</ul>
</div>
</header>
<div>
<div id="Mission">
<div>
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</div>
</div>
<div>
<h2>Tea of the Month</h2>
<h4>What's Steeping at The Tea Cozy?</h4>
</div>
<div id="FeaturedTea">
<div class="teaser">
<img src="/resources/img/img-berryblitz.jpeg">
<h4>Fell Berry Blitz Tea</h4>
</div>
<div class="teaser">
<img src="/resources/img/img-spiced-rum.jpeg">
<h4>Spiced Rum Team</h4>
</div>
<div class="teaser">
<img src="/resources/img/img-donut.jpeg">
<h4>Seasonal Donuts</h4>
</div>
<div class="teaser">
<img src="/resources/img/img-myrtle-ave.jpeg">
<h4>Myrtle Ave Tea</h4>
</div>
<div class="teaser">
<img src="/resources/img/img-bedford-bizarre.jpeg">
<h4>Bedford Bizarre Tea</h4>
</div>
</div>
<div id="Locations">
<div id="locations-title">
<h2>Locations</h2>
<div id="box-table">
<div class="box">
<p><h3>Downtown</h3></p>
<p>384 West 4th St</p>
<p>Suite 109</p>
<p>Portland, Maine</p>
</div>
<div class="box">
<p><h3>East Bayside</h3></p>
<p>3433 Phisherman's Avenue</p>
<p>(Northwest Corner)</p>
<p>Portland, Maine</p>
</div>
<div class="box">
<p><h3>Oakdale</h3></p>
<p>Crescent Avenue</p>
<p>Second Floor</p>
<p>Portland, Maine</p>
</div>
</div>
</div>
</div>
</body>
<footer>
<div id="contact">
<h2>The Tea Cozy</h2>
<p><h5>[email protected]</h5></p>
<p><h5>917-555-8904</h5></p>
</div>
<div id="copyright">
<h5>copyright The Tea Cozy 2017</h5>
</div>
</footer>
</html>
index.css
* {
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
text-align: center;
vertical-align:middle;
}
h2 {
font-family: Helvetica;
font-size: 32px;
font-weight: bold;
color: #706E6C;
width: 100%;
text-align: center;
}
h4 {
font-family: Helvetica;
font-size: 18px;
font-weight: bold;
color: #706E6C;
text-align: center;
}
h5 {
font-family: Helvetica;
font-size: 16px;
font-weight: bold;
color: #706E6C;
}
p, li {
font-size: 18px;
}
a {
text-decoration: none;
}
body {
background-color: #000001;
}
header {
display: inline-block fixed;
color: #706E6C;
height: 69px;
border-bottom: 1px solid seashell;
}
.nav {
display: flex;
justify-content: space-between;
align-content: center;
float: right;
font-size: 24px;
text-decoration: underline;
}
.nav li {
font-size: 22px;
color: #706E6C;
list-style-type: none;
padding: 0 10px;
}
#logo {
color: #706E6C;
height: 50px;
margin-left: 10px;
}
#Mission {
height: 700px;
width: 1200px;
display: flex;
background-position: center;
justify-content: center;
flex-direction: column;
align-items: center;
margin: 0px auto;
background-image: url('/TeaHouse/resources/img/img-mission-background.jpeg');
}
#Mission div {
width: 100%;
background-color: black;
padding: auto;
}
#FeaturedTea {
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: space-around;
width: 1000px;
margin: 50px auto;
}
.teaser {
display: flex;
width: 300px;
height: 200px;
flex-direction: column;
align-content: center;
padding: 10px;
margin: 10px auto;
}
.teaser h4 {
margin: 10px 10px;
padding: 10px auto;
}
#Locations {
width: 1200px;
height: 500px;
display: flex;
margin: 0px auto;
padding: auto;
background-image: url('/TeaHouse/resources/img/img-locations-background.jpeg');
align-items: center;
justify-content: center;
}
#Locations div h2 {
width: 100%;
align-self: center;
}
#box-table {
display: flex;
flex-direction: row;
}
.box {
width: 300px;
height: 260px;
color: #706E6C;
background-color: black;
align-content: space-between;
text-align: center;
align-items: center;
justify-content: center;
margin: 40px;
}
footer #contact {
height: 200px;
text-align: center;
}
footer #copyright {
text-align: left;
margin: 20px;
}