Hello all - I’ve just completed The Tea Cozy Project and it definitely was a fun challenge. It looks to be responsive enough however I would love some constructive criticism from you all. The biggest challenge for me was wrapping my head around Parent/Child relationships when it comes to flex, but I think I got there in the end - at least I hope I did. Many thanks in advance!
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="./Resources/index.css">
<title>Tea Cozy Landing Page</title>
</head>
<body>
<header class="header">
<img class="logo"
src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png?_gl=1*7srqnd*_ga*MTEwODQ0ODE2Mi4xNjUyMzQ3MTA1*_ga_3LRZM6TM9L*MTY3NDk4NzgxOS4yMTEuMS4xNjc0OTg4ODYxLjAuMC4w"
alt="">
<nav>
<p class="mission"><a href="#">Mission</a></p>
<p class="featured"><a href="#">Featured Tea</a></p>
<p class="locations"><a href="#">Locations</a></p>
</nav>
</header>
<!---Mission section-->
<div class="container">
<div class="our-mission">
<div class="mission-container">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</div>
</div>
<!---Featured tea section-->
<div class="featured-tea">
<div class="featured-container">
<h2>Tea of the Month</h2>
<h4>What's Steeping at The Tea Cozy?</h4>
</div>
</div>
<div class="container">
<div class="image-container">
<div class="item"><img
src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg?_gl=1*1mjoa9p*_ga*MTEwODQ0ODE2Mi4xNjUyMzQ3MTA1*_ga_3LRZM6TM9L*MTY3NTA3MDQ3My4yMTUuMC4xNjc1MDcwNDczLjAuMC4w"
alt="Fall Berry Blitz Tea">
<h4>Fall Berry Blitz Tea</h4>
</div>
<div class="item"><img
src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg?_gl=1*1eu8kyv*_ga*MTEwODQ0ODE2Mi4xNjUyMzQ3MTA1*_ga_3LRZM6TM9L*MTY3NTA3MDQ3My4yMTUuMC4xNjc1MDcwNDczLjAuMC4w"
alt="Spiced Rum Team">
<h4>Spiced Rum Tea</h4>
</div>
<div class="item"><img
src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg?_gl=1*1eu8kyv*_ga*MTEwODQ0ODE2Mi4xNjUyMzQ3MTA1*_ga_3LRZM6TM9L*MTY3NTA3MDQ3My4yMTUuMC4xNjc1MDcwNDczLjAuMC4w"
alt="Seasonal Donuts">
<h4>Seasonal Donuts</h4>
</div>
<div class="container2">
<div class="item"><img
src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg?_gl=1*7mab7t*_ga*MTEwODQ0ODE2Mi4xNjUyMzQ3MTA1*_ga_3LRZM6TM9L*MTY3NTA3MDQ3My4yMTUuMC4xNjc1MDcwNDczLjAuMC4w"
alt="Myrtle Ave Team">
<h4>Myrtle Ave Team</h4>
</div>
<div class="item"><img
src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg?_gl=1*1pknvs9*_ga*MTEwODQ0ODE2Mi4xNjUyMzQ3MTA1*_ga_3LRZM6TM9L*MTY3NTA1NzQ3My4yMTQuMS4xNjc1MDU3OTk0LjAuMC4w"
alt="Bedford Bizzare Tea">
<h4>Beford Bizzare Tea</h4>
</div>
</div>
</div>
</div>
<!---Locations section-->
<div class="container">
<div class="location">
<div class="location-container">
<h2 class="local">Locations</h2>
<div class="outer-container">
<div class="location1">
<div class="heading-container">
<h3>Downtown</h3>
</div>
<h4>385 West 4th St</h4>
<h4>Suite 108</h4>
<h4>Portland, Maine</h4>
</div>
<div class="location1">
<div class="heading-container">
<h3>East Bayside</h3>
</div>
<h4>3433 Phisherman's Avenue</h4>
<h4>(Northwest Corner)</h4>
<h4>Portland, Maine</h4>
</div>
<div class="location1">
<div class="heading-container">
<h3>Oakdale</h3>
</div>
<h4>515 Crescent Avenue</h4>
<h4>Second Floor</h4>
<h4>Portland, Maine</h4>
</div>
</div>
</div>
</div>
</div>
<!---Contact section-->
<div class="container">
<div class="contactinfo">
<div class="contactinfo-container">
<h3>The Tea Cozy</h3>
<h5>[email protected]</h5>
<h5>917-555-8904</h5>
</div>
</div>
</div>
<!---footer section-->
<div>
<footer>Copyright The Tea Cozy 2017</footer>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Helvetica;
font-size: 22px;
background-color: black;
color: seashell;
opacity: 0.9;
}
.header {
display: flex;
position: fixed;
width: 100%;
height: 70px;
align-items: center;
border-bottom: 1px solid seashell;
background-color: black;
}
.logo {
display: flex;
height: 50px;
padding-left: 10px;
}
nav {
display: flex;
width: 100%;
justify-content: flex-end;
flex-wrap: wrap;
}
.mission,
.featured {
text-decoration: underline;
padding-right: 25px;
}
.locations {
text-decoration: underline;
padding-right: 10px;
}
a {
color: seashell;
}
.container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.our-mission {
display: flex;
width: 1200px;
height: 700px;
justify-content: center;
align-items: center;
padding-top: 70px;
background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg?_gl=1*1q2gmhr*_ga*MTEwODQ0ODE2Mi4xNjUyMzQ3MTA1*_ga_3LRZM6TM9L*MTY3NTA1NzQ3My4yMTQuMS4xNjc1MDU3OTk0LjAuMC4w);
flex-wrap: wrap;
}
.mission-container, .location-container, .heading-container, .contactinfo-container {
width: 100%;
flex-wrap: wrap;
}
h2, h4, h5 {
display: flex;
background-color: black;
justify-content: center;
line-height: 60px;
align-items: center;
flex-wrap: wrap;
}
.featured-tea {
display: flex;
width: 100%;
justify-content: center;
padding-top: 70px;
padding-bottom: 10px;
}
.container2 {
display: flex;
width: 666px;
justify-content: space-around;
}
.image-container {
display: flex;
width: 1000px;
justify-content: space-around;
flex-wrap: wrap;
}
.item img {
margin-top: 10px;
width: 300px;
height: 200px;
}
.item h4 {
text-align: center;
}
.container4 {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.location {
background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg?_gl=1*jd03ec*_ga*MTEwODQ0ODE2Mi4xNjUyMzQ3MTA1*_ga_3LRZM6TM9L*MTY3NTE0ODk5MS4yMjIuMS4xNjc1MTQ5MDEyLjAuMC4w);
display: flex;
justify-content: center;
width: 1200px;
height: 550px;
margin-top: 50px;
}
.local {
background: none;
justify-content: center;
margin-top: 50px;
}
.outer-container {
margin-top: 15px;
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
}
.location1 {
display: block;
width: 300px;
height: 310px;
background-color: black;
line-height: 60px;
flex-grow: 0;
}
.heading-container {
width: 100%;
}
h3 {
margin-top: 30px;
display: flex;
justify-content: center;
}
.contactinfo {
display: flex;
width: 1200px;
height: 200px;
}
.contactinfo-container h3 {
margin-bottom: 30px;
}
footer {
padding-left: 20px;
margin-top: 20px;
display: flex;
justify-content:flex-start;
}