I’ve just finished the Tea Cozy Project recreating this spec: https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-redline.jpg
My solution missed the mark slightly in a couple of places and I’ve almost certainly been inefficient with my CSS. Would really appreciate if someone could point out obvious mistakes I’ve made, areas for improvement or places where it’s clear I’ve misunderstood the application of the concepts.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./css/main.css"/>
<title>Tea Cozy</title>
</head>
<header class="header">
<img src="./img/tea-cozy-logo.jpeg" alt="tea cozy logo">
<p>Mission</p>
<p>Featured Tea</p>
<p>Locations</p>
</header>
<body>
<div id="mission">
<div id="mission-text">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</div>
<div id="totm">
<div id="totm-text">
<h2>Tea of the Month</h2>
<h4>What's Steeping at The Tea Cozy?</h4>
</div>
<div id="tea-specials">
<div class="tea-tile">
<img src="img/berryblitz.jpeg" alt="berry blitz tea"/>
<h4>Fall Berry Blitz Tea</h4>
</div>
<div class="tea-tile">
<img src="img/spiced-rum.jpeg" alt="spiced rum tea"/>
<h4>Spiced Rum Tea</h4>
</div>
<div class="tea-tile">
<img src="img/donut.jpeg" alt="donut"/>
<h4>Seasonal Donuts</h4>
</div>
<div class="tea-tile">
<img src="img/myrtle-ave.jpeg" alt="myrtle ave tea"/>
<h4>Myrtle Ave Tea</h4>
</div>
<div class="tea-tile">
<img src="img/bedford-bizarre.jpeg" alt="bedford bizarre tea"/>
<h4>Bedford Bizarre Tea</h4>
</div>
</div>
</div>
<div id="locations">
<h2>Locations</h2>
<div id="locations-container">
<div class="location-tile">
<div class="location-text">
<h3>Downtown</h3>
<p>384 West 4th St</p>
<p>Suite 108</p>
<p>Portland, Maine</p>
</div>
</div>
<div class="location-tile">
<div class="location-text">
<h3>East Bayside</h3>
<p>3433 Phisherman's Wharf</p>
<p>(Northwest Corner)</p>
<p>Portland, Maine</p>
</div>
</div>
<div class="location-tile">
<div class="location-text">
<h3>Oakdale</h3>
<p>515 Crescent Avenue</p>
<p>Second Floor</p>
<p>Portland, Maine</p>
</div>
</div>
</div>
</div>
<div id="contact">
<h2>The Tea Cozy</h2>
<h5>[email protected]</h5>
<h5>917-555-8904</h5>
</div>
</body>
<footer>
<h5>copyright The Tea Cozy 2017</h5>
</footer>
</html>
* {
box-sizing: border-box;
}
.header {
position: fixed;
display: flex;
flex-direction: row;
height: 69px;
background-color: black;
top:0;
width: 100%;
align-items: center;
border-bottom: 1px solid seashell;
z-index: 999;
}
.header img {
height: 50px;
margin-left: 10px;
margin-right: auto;
}
.header p {
color: seashell;
font-size: 22px;
opacity: 0.9;
text-decoration: underline;
padding: 10px;
}
body {
display: flex;
flex-direction: column;
background-color: black;
color: seashell;
font-size: 22px;
margin: 0;
font-family: Helvetica, serif;
opacity: 0.9;
justify-content: center;
}
#mission {
position: relative;
display: flex;
height: 700px;
margin-top: 69px;
margin-left: auto;
margin-right: auto;
justify-content: center;
align-items: center;
width: 1200px;
background-image: url("../img/mission-background.jpeg");
}
#mission-text {
position: absolute;
width: 100%;
color: seashell;
background-color: black;
text-align: center;
}
#totm {
position: relative;
display: flex;
flex-direction: column;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
width: 1000px;
justify-content: center;
}
#totm-text {
position: relative;
display: flex;
margin: 10px auto;
flex-direction: column;
top:50%;
width: 100%;
color: seashell;
background-color: black;
text-align: center;
}
#totm-text h2,h4 {
margin: 10px auto;
}
#tea-specials {
position: relative;
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: center;
}
.tea-tile {
justify-content: center;
text-align: center;
margin: 15px;
}
.tea-tile img {
width: 300px;
height: 200px;
margin-bottom: 10px;
}
#locations {
position: relative;
display: flex;
flex-direction: column;
height: 500px;
margin-top: 69px;
margin-left: auto;
margin-right: auto;
justify-content: center;
align-items: center;
width: 1200px;
background-image: url("../img/locations-background.jpeg");
background-position: center;
background-repeat: no-repeat;
}
#locations-container {
display: flex;
flex-direction: row;
width: 940px;
justify-content: space-between;
}
.location-tile {
display: flex;
flex-direction: column;
width: 300px;
height: 300px;
text-align: center;
background-color: black;
opacity: 1;
}
.location-text {
display: flex;
align-self: center;
flex-direction: column;
}
#contact {
position: relative;
margin-top: 10px;
height: 200px;
display: flex;
flex-direction: column;
align-content: space-around;
justify-content: center;
text-align: center;
}
footer {
position: relative;
}
footer h5 {
margin-left: 20px;
}