Hey everyone,
I just finished working on the project “The Tea Cozy” within the Layout with Flexbox learning block. I feel like it’s come out decent enough, but there are still some things I’d like to be able to improve upon. For instance, the photos under the Tea of the Month aren’t quite exactly like how the wireframe shows. The bottom two photos are spaced too far apart than they’re shown in the wireframe. I was also having a difficult time getting the boxes under the Locations div to flex when I expand or shrink the page. If anyone can provide some insight to how I might write better code, I would be greatly appreciative!
Thanks!
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="resources\css\style.css" type="text/css">
<title>The Tea Cozy</title>
</head>
<body>
<header>
<img class="logo" src="resources\images\img-tea-cozy-logo.png">
<nav>
<ul>
<li class="nav"><a href="#">Mission</a></li>
<li class="nav"><a href="#">Featured Tea</a></li>
<li class="nav"><a href="#">Locations</a></li>
</ul>
</nav>
</header>
<div class="mission">
<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="totm">
<div id="totm">
<h2>Tea of the Month</h2>
<h4>What's Steeping at The Tea Cozy?</h4>
<div class="images">
<div class="totm-img">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg?_gl=1*7g0rdl*_ga*NjE1MDAyOTM1NS4xNjg1NzU3MjAy*_ga_3LRZM6TM9L*MTcwODg5NzU5Mi4xNDAuMS4xNzA4OTAwMDA2LjQzLjAuMA..">
<h4>Fall Berry Blitz Tea</h4>
</div>
<div class="totm-img">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg?_gl=1*7g0rdl*_ga*NjE1MDAyOTM1NS4xNjg1NzU3MjAy*_ga_3LRZM6TM9L*MTcwODg5NzU5Mi4xNDAuMS4xNzA4OTAwMDA2LjQzLjAuMA..">
<h4>Spiced Rum Tea</h4>
</div>
<div class="totm-img">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg?_gl=1*7g0rdl*_ga*NjE1MDAyOTM1NS4xNjg1NzU3MjAy*_ga_3LRZM6TM9L*MTcwODg5NzU5Mi4xNDAuMS4xNzA4OTAwMDA2LjQzLjAuMA..">
<h4>Seasonal Donuts</h4>
</div>
<div class="totm-img">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg?_gl=1*erd7wn*_ga*NjE1MDAyOTM1NS4xNjg1NzU3MjAy*_ga_3LRZM6TM9L*MTcwODg5NzU5Mi4xNDAuMS4xNzA4OTAwMDA2LjQzLjAuMA..">
<h4>Myrtle Ave Tea</h4>
</div>
<div class="totm-img">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg?_gl=1*7g0rdl*_ga*NjE1MDAyOTM1NS4xNjg1NzU3MjAy*_ga_3LRZM6TM9L*MTcwODg5NzU5Mi4xNDAuMS4xNzA4OTAwMDA2LjQzLjAuMA..">
<h4>Bedford Bizarre Tea</h4>
</div>
</div>
</div>
</div>
<div class="bg-img">
<h2 class="location">Locations</h2>
<div class="locations">
<div class="loc">
<h3>Downtown</h3>
<h4>384 West 4th St</h4>
<h4>Suite 108</h4>
<h4>Portland, Maine</h4>
</div>
<div class="loc">
<h3>East Bayside</h3>
<h4>3433 Phisherman's Avenue</h4>
<h4>(Northwest Corner)</h4>
<h4>Portland, Maine</h4>
</div>
<div class="loc">
<h3>Oakdale</h3>
<h4>515 Crescent Avenue</h4>
<h4>Second Floor</h4>
<h4>Portland, Maine</h4>
</div>
</div>
</div>
<footer>
<h2>The Tea Cozy</h2>
<h5>[email protected]</h5>
<h5>917-555-8904</h5>
</footer>
<div class="copyright">
<h6>copright The Tea Cozy 2017</h6>
</div>
</body>
</html>
html {
background-color: black;
font-family: Helvetica;
font-size: 22px;
color: seashell;
opacity: 0.9;
text-align: center;
}
header {
box-sizing: border-box;
height: 69px;
position: top;
border-bottom: 1px solid seashell;
z-index: 10;
}
.logo {
display: flex;
float: left;
height: 50px;
padding-left: 10px;
flex-shrink: 2;
}
nav {
display: flex;
flex-direction: row;
align-items: end;
justify-content: space-between;
float: right;
text-decoration: underline;
color: seashell;
}
.nav {
display: inline-flex;
text-align: left;
padding-right: 15px;
flex-shrink: 1;
}
a:link {
color: seashell;
}
a:visited {
color: seashell;
}
.mission {
background-image: url('https://raw.githubusercontent.com/melodyide/Tea-Cozy-Challenge/main/img-mission-background.webp');
height: 700px;
width: 1200px;
margin: auto;
opacity: 1;
}
#mission {
position: absolute;
width: 1200px;
top: 300px;
padding: 10px 0px;
background-color: black;
line-height: 10px;
top: 50%;
transform: translateY(-50%);
opacity: 0.8;
}
.totm {
max-width: 1000px;
margin: 0 auto;
padding-top: 60px;
}
.images{
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-content: center;
padding: 10px;
}
img {
max-height: 200px;
max-width: 300px;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-content: center;
margin: 0 auto;
}
.bg-img {
background-image: url('https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg?_gl=1*kd27ui*_ga*NjE1MDAyOTM1NS4xNjg1NzU3MjAy*_ga_3LRZM6TM9L*MTcwODkxMDM5OS4xNDEuMS4xNzA4OTEyMjU4LjU3LjAuMA..');
background-position: center;
background-repeat: no-repeat;
background-color: none;
height: 500px;
width: 1200px;
max-width: 1200px;
max-height: 500px;
position: relative;
margin: 25px auto;
padding: 20px;
display: flex;
flex-flow: column wrap;
align-content: center;
justify-content: center;
}
.location {
background-color: transparent;
margin-bottom: 15px;
position: relative;
display: flex;
align-content: center;
justify-content: center;
}
.locations {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-content: center;
flex-shrink: 1;
}
.loc {
width: 300px;
height: 300px;
margin: 0px 40px;
background-color: black;
display: inline-flex;
flex-direction: column;
align-content: center;
justify-content: space-around;
flex-shrink: 1;
opacity: 0.8;
}
footer {
height: 200px;
}
.copyright {
float: left;
margin-left: 20px;
}