Would Love any and all feedback!
HTML:
<!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="styles.css" />
<link rel="import" href="./images/" />
<title>Tea Cozy</title>
</head>
<body>
<header>
<img src="./images/img-tea-cozy-logo.png" alt="" />
<ul>
<li><a href="#">Mission</a></li>
<li><a href="#">Featured Tea</a></li>
<li><a href="#">Locations</a></li>
</ul>
</header>
<section class="mission">
<div class="mission_card">
<h2>Our Mission</h2>
<h4>
Handpicked, Artisanally Curated, Free Range, Sustanible, Small Batch,
Fair Trade, Organic Tea
</h4>
</div>
</section>
<section class="totm">
<h2>Tea of the month</h2>
<h4>What's Steeping at The Tea Cozy?</h4>
<div class="totm_imgs">
<div class="totm_img">
<img src="images/img-berryblitz.jpg" alt="" />
<h4>Fall Berry Blitz tea</h4>
</div>
<div class="totm_img">
<img src="images/img-spiced-rum.jpg" alt="" />
<h4>Spiced Rum tea</h4>
</div>
<div class="totm_img">
<img src="images/img-donut.jpg" alt="" />
<h4>Seasonal Donuts</h4>
</div>
<div class="totm_img">
<img src="images/img-myrtle-ave.jpg" alt="" />
<h4>Myrtle Ave Tea</h4>
</div>
<div class="totm_img">
<img src="images/img-bedford-bizarre.jpg" alt="" />
<h4>Bedford Bizarre Tea</h4>
</div>
</div>
</section>
<section class="locations">
<div class="location_container">
<h2>Locations</h2>
<div class="location_card">
<h3>Downtown</h3>
<h4>384 West 4th St</h4>
<h4>Suite 108</h4>
<h4>Portland, Maine</h4>
</div>
<div class="location_card">
<h3>East Bayside</h3>
<h4>3433 Phisherman's Avenue</h4>
<h4>(Northwest Corner)</h4>
<h4>Portland, Maine</h4>
</div>
<div class="location_card">
<h3>Oakdale</h3>
<h4>515 Crescent Avenue</h4>
<h4>Second Floor</h4>
<h4>Portland, Maine</h4>
</div>
</div>
</section>
<footer>
<h2>The Tea Cozy</h2>
<h5>[email protected]</h5>
<h5>917-555-8904</h5>
</footer>
</body>
</html>
CSS:
body{
font-family: Helvetica, sans-serif;
font-size: 22px;
color: seashell;
background-color: black;
text-align: center;
opacity: 0.9;
margin: 0;
}
a{
color: seashell;
}
header{
/* padding: 10px; */
height: 69px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: seashell 1px solid;
position: fixed;
background-color: black;
}
header img{
height: 50px;
max-width: 1200px;
padding: 10px;
}
ul{
padding: 10px;
display: flex;
gap: 20px;
}
li{
list-style: none;
}
/* ======================================== */
.mission{
background-image: url(./images/img-mission-background.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
max-width: 1200px;
height: 700px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: 0 auto;
}
.mission_card{
width: 100%;
background-color: black;
}
/* ======================================== */
.totm {
width: 100%;
margin: 10px;
justify-self: center;
}
.totm h2 + h4{
margin: 0 auto;
padding: 10px;
max-width: 1000px;
}
.totm_imgs {
max-width: 1000px;
display: flex;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
margin: 0 auto;
}
.totm_img img{
width: 300px;
height: 200px;
}
/* ======================================== */
.locations{
min-height: 500px;
max-width: 1200px;
background-image: url(images/img-locations-background.jpg);
background-size: cover;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
}
.location_container{
min-height: 500px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background-color: transparent;
}
.location_container h2{
width: 100%;
margin-bottom: 0px;
height: fit-content;
background-color: transparent;
}
.location_card{
opacity: 1;
background-color: black;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 300px;
margin: 15px 20px;
}
.location_card > *{
width: 100%;
}