hi friends i just wanted to post my answer for the Tea Cozy project in case anyone needed some help !! feel free to msg me if u have any questions okie tyyy <3
here’s my html
<!--Tea Cozy Project for codecademy -->
<!DOCTYPE html>
<html>
<head>
<title>Tea Cozy</title>
<link href="./styling.css" rel="stylesheet">
</head>
<body>
<header>
<!--header-->
<div class="header">
<!--Logo-->
<div class="logo">
<img class="logo" src="./images/img-tea-cozy-logo.png">
</div>
<nav>
<ul class="navigation">
<li><a href="#mission">Mission</a></li>
<li><a href="#featured-tea">Featured Tea</a></li>
<li><a href="#locations">Locations</a></li>
</ul>
</nav>
</div>
</header>
<!--mission section-->
<main>
<div class="mission" id="mission">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</main>
<!--Featured Tea-->
<section id="featured-tea">
<div class="tea-head">
<h2>Tea of the Month?</h2>
<h4>What's Steeping at The Tea Cozy?</h4>
</div>
<div class="tea-imgs">
<div class="img-1">
<img src="./images/img-berryblitz.jpg">
<h4>Fall Berry Blitz Tea</h4>
</div>
<div class="img-2">
<img src="./images/img-spiced-rum.jpg">
<h4>Spiced Rum Tea</h4>
</div>
<div class="img-3">
<img src="./images/img-donut.jpg">
<h4>Seasonal Donuts</h4>
</div>
<div class="img-4">
<img src="./images/img-myrtle-ave.jpg">
<h4>Myrtle Ave Tea</h4>
</div>
<div class="img-5">
<img src="./images/img-bedford-bizarre.jpg">
<h4>Bedford Bizarre Tea</h4>
</div>
</div>
</section>
<!--Locations-->
<section id="locations">
<div class="locations-header">
<h2>Locations</h2>
</div>
<div class="boxes">
<div class="downtown">
<h3>Downtown</h3>
<p>384 West 4th St</p>
<p>Suite 108</p>
<p>Portland, Maine</p>
</div>
<div class="east">
<h3>East Bayside</h3>
<p>3433 Phisherman's Avenue</p>
<p>(Northwest Corner)</p>
<p>Portland, Maine</p>
</div>
<div class="oakdale">
<h3>Oakdale</h3>
<p>515 Crescent Avenue</p>
<p>Second Floor</p>
<p>Portland, Maine</p>
</div>
</div>
</section>
<footer>
<h2>The Tea Cozy</h2>
<h5>[email protected]</h5>
<h5>917-555-8904</h5>
</footer>
<div class="copyright">
<h5>copyright The Tea Cozy 2017</h5>
</div>
</body>
</html>
here’s my css
/* main styling */
body {
background-color: black;
color: seashell;
font-family: Helvetica;
font-size: 22px;
margin: 0;
}
a:link {
color: seashell;
}
a:visited {
color: seashell;
}
/*header*/
.header {
display: inline-flex;
flex-direction: row;
height: 69px;
background-color: black;
border-bottom: 1px solid seashell;
width: 100%;
align-items: center;
align-content: space-between;
position: fixed;
}
.logo {
height: 50px;
margin-left: 10px;
flex-grow: 1;
}
/*main*/
.navigation li {
display: inline-flex;
text-decoration: underline;
margin-left: 20px;
margin-right: 10px;
}
.mission {
background-image: url(./images/img-mission-background.jpg);
width: 1200px;
height: 700px;
margin-left: auto;
margin-right: auto;
padding-top: 69px;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
}
.mission h2, .mission h4 {
background-color: black;
display: inline-flex;
justify-content: center;
margin-top: 0;
margin-bottom: 0;
padding-top: 10px;
padding-bottom: 10px;
}
.mission h2 {
padding-bottom: 10px;
}
/*featured tea*/
#featured-tea {
width: 1000px;
margin-left: auto;
margin-right: auto;
text-align: center;
padding-top: 50px;
}
.tea-imgs img {
width: 300px;
height: 200px;
}
.tea-imgs {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
gap: 25px;
}
.tea-imgs h4 {
margin-top: 10px;
margin-bottom: 0;
}
/*locations*/
#locations {
background-image: url(./images/img-locations-background.jpg);
width: 1200px;
height: 500px;
margin-left: auto;
margin-right: auto;
padding-top: 70px;
background-position: center;
margin-top: 100px;
}
.locations-header h2 {
text-align: center;
margin-bottom: 15px;
}
.downtown, .east, .oakdale {
width: 300px;
background-color: black;
display: inline-flex;
flex-direction: column;
text-align: center;
}
.boxes {
display: flex;
justify-content: center;
gap: 40px;
}
/*footer*/
footer {
text-align: center;
}
footer h2 {
margin: 14px;
}
.copyright {
margin-left: 20px;
}
i attached my final results as well