Hi,
I would like some feedback on the Tea Cozy project I just finished (https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-22-making-a-website-responsive/modules/wdcp-22-layout-with-flexbox/projects/tea-cozy).
I had some trouble in positioning the location section, mainly the text margin with the address cards. Perhaps someone could suggest some tips
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Tea Cozy</title>
</head>
<body>
<header>
<div class="container">
<img src="images\logo.png" alt="company logo" id="logo">
<nav>
<ul>
<li><a href="#">Mission</a></li>
<li><a href="#">Featured Tea</a></li>
<li><a href="#">Locations</a></li>
</ul>
</nav>
</div>
</header>
<div class="hero">
<div id="mission">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</div>
<div class="monthtitle">
<h2>Tea of the Month</h2>
<h4>What's Steeping at Tea Cozy</h4>
</div>
<div class="month">
<div class="caption">
<div class="card" id="card1"></div><h4>Fall Berry Blitz Tea</h4>
</div>
<div class="caption">
<div class="card" id="card2"></div><h4>Spiced Rum Tea</h4>
</div>
<div class="caption">
<div class="card" id="card3"></div><h4>Seadonal Donuts</h4>
</div>
<div class="caption">
<div class="card" id="card4"></div><h4>Myrtle Ave Tea</h4>
</div>
<div class="caption">
<div class="card" id="card5"></div><h4>Bedford Bizarre Tea</h4>
</div>
</div>
<div class="loca">
<div class="child"><h2>Locations</h2></div>
<div class="child"><h3>Downtown</h3>
<h4>384 West<br>Suite 108<br>Portland, Maine</h4></div>
<div class="child"><h3>East Bayside</h3>
<h4>3433 Phisermans's Avenue<br>(Northwest Corner)<br>Portland, Maine</h4></div>
<div class="child"><h3>Oakdale</h3>
<h4>515 Crescent Avenue<br>Second Floor<br>Portland, Maine</h4></div>
</div>
<div class ="footercontainer">
<h2>The Tea Cozy</h2>
<h5>[email protected]</h5>
<h5>917-55-8904</h5>
<div class="copyright"><h5>copyright The Tea Cozy 2017</h5></div>
</div>
</body>
</html>
body {
color: seashell;
opacity: 0.9;
font-family: Helvetica;
background-color: black;
font-size: 22px;
}
.container {
height: 69px;
border-bottom: solid seashell 1px;
display:flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
#logo {
margin: 0px 0px 0px 10px;
height: 50px;
width: auto;
}
nav ul {
display: flex;
justify-content: space-between;
list-style-type:none;
}
nav li {
padding: 0 15px 0 0;
}
nav a {
color: seashell;
text-decoration: underline;
}
header {
background-color: black;
position: fixed;
width: 100%;
top: 0;
}
.hero {
display: flex;
background-image: url("images/img-mission-background.jpg");
height: 700px;
width: 1200px;
margin: 69px auto 0 auto;
align-items: center;
justify-content: center;
text-align: center;
}
#mission {
background-color: black;
width: 1200px;
}
.monthtitle {
width: 1000px;
margin: 10px auto;
text-align: center;
}
.month {
width: 1000px;
margin: 10px auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
text-align: center;
}
.card {
width: 300px;
height: 200px;
margin: 10px;
transition: width 0.7s, height 0.7s;
}
.card:hover {
width: 320px;
height: 220px;
}
#card1 {
background-image: url("images/img-berryblitz.jpg");
background-size: 100% 100%;
}
#card2 {
background-image: url("images/img-spiced-rum.jpg");
background-size: 100% 100%;
}
#card3 {
background-image: url("images/img-donut.jpg");
background-size: 100% 100%;
}
#card4 {
background-image: url("images/img-myrtle-ave.jpg");
background-size: 100% 100%;
}
#card5 {
background-image: url("images/img-bedford-bizarre.jpg");
background-size: 100% 100%;
}
.card h4 {
top: 100px;
}
.loca {
display: flex;
justify-content: center;
background-size: 100%;
height: 500px;
width: 1200px;
flex-wrap: wrap;
background-image: url("images/img-locations-background.jpg");
margin: 0 auto;
align-content: center;
}
.child {
text-align: center;
}
.child:first-child {
width: 100%;
}
.child:not(:first-child) {
background-color: black;
line-height: 55px;
height: 300px;
width: 300px;
margin: 0 20px 0 20px;
}
.footercontainer {
display: flex;
height: 200px;
width: 100%;
align-content: center;
flex-direction: column;
margin: 0 auto;
text-align: center;
}
.copyright {
display: flex;
margin-left:20px;
text-align: left;
}