Hi everyone !
I’ve almost finished the Tea Cozy project as part as the FlexBox lesson but I’m having trouble resolving two margin issues. I want to make the website exactly like the design spec ([here it is])(https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-redline.jpg?_gl=1*gkp269*_ga*MDgyMzExOTMwMS4xNzAzNDM3ODEw*_ga_3LRZM6TM9L*MTcwNjczNjU5OS4yOS4xLjE3MDY3MzY2NTMuMC4wLjA)
- Firstly, on the LOCATIONS part, I’ve positioned the title “Locations” with position:absolute from 70px to the top of the div. But this 70px is not a number the spec gives me, I just went a little bit random until it begin to look similar. I don’t know how to use the 15px margin the spec actually gives me.
- Secondly, there is some whitespace between the different sections that is not specified with a height value or a margin value on the spec. I don’t know what to use in order to reproduce this whitespace without having to asume a value.
Thank you so much !
Here’s my code :
<body>
<!--Banner-->
<header class="container">
<div class="nav-left">
<img src="Ressources/Images/img-tea-cozy-logo.png" height="50px" class="logo">
</div>
<nav class="nav-right">
<ul>
<li><a href="#">Mission</a></li>
<li><a href="#">Featured Tea</a></li>
<li><a href="#">Locations</a></li>
</ul>
</nav>
</header>
<!--Mission-->
<main>
<section class="mission">
<div class="bandeau">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</section>
<!--Choices-->
<section class="choices">
<div class="text">
<h2>Tea of the Month</h2>
<h4>What's Steeping at The Tea Cozy?</h4>
</div>
<div class="images">
<div class="tea">
<img src="Ressources/Images/img-berryblitz.jpg" width="300px" height="200px">
<h4>Fall Berry Blitz Tea</h4>
</div>
<div class="tea">
<img src="Ressources/Images/img-spiced-rum.jpg" width="300px" height="200px">
<h4>Spiced Rum Tea</h4>
</div>
<div class="tea">
<img src="Ressources/Images/img-donut.jpg" width="300px" height="200px">
<h4>Seasonal Donuts</h4>
</div>
<div class="tea">
<img src="Ressources/Images/img-donut.jpg" width="300px" height="200px">
<h4>Myrtle Ave Tea</h4>
</div>
<div class="tea">
<img src="Ressources/Images/img-bedford-bizarre.jpg" width="300px" height="200px">
<h4>Bedford Bizarre Tea</h4>
</div>
</div>
</section>
<!--Location-->
<section class="location">
<h2>Locations</h2>
<div class="directions">
<div class="column">
<h3>Dowtown</h3>
<p>384 West 4th St</p>
<p>Suite 108</p>
<p>Portland, Maine</p>
</div>
<div class="column">
<h3>East Bayside</h3>
<p>3433 Phisherman's Avenue</p>
<p>(Northwest Corner)</p>
<p>Portland, Maine</p>
</div>
<div class="column">
<h3>Oakdale</h3>
<p>515 Crescent Avenue</p>
<p>Second Floor</p>
<p>Portland, Maine</p>
</div>
</div>
</section>
<!--Contact-->
<section class="contact">
<h2>The Tea Cozy</h2>
<h5>[email protected]</h5>
<h5>917-555-8904</h5>
</section>
<!--Footer-->
<footer>
<h5>copyright The Tea Cozy 2017</h5>
</footer>
</main>
</body>
*{
font-family: Helvetica;
font-size: 12;
color: seashell;
background-color: black;
opacity: 0.9;
text-align:center;
box-sizing: border-box;
}
body {
margin: 0px;
}
/*Banner*/
header {
border-bottom: 1px solid seashell;
width:100%;
position:fixed;
z-index:1;
height:69px;
}
.container {
display:flex;
justify-content:space-between;
align-items: center;
}
.logo {
padding-left:10px;
}
li {
display:inline-block;
}
ul li:not(:last-child) {
margin-right: 15px;
}
ul li:last-child {
margin-right:10px;
}
li a {
text-decoration:underline;
}
main {
position:relative;
top:69px;
}
/*Mission*/
.mission {
display:flex;
align-items: center;
background-image: url('https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg?_gl=1*1yw47rd*_ga*MDgyMzExOTMwMS4xNzAzNDM3ODEw*_ga_3LRZM6TM9L*MTcwNjcxNDA3NS4yNy4xLjE3MDY3MTQ2NzkuMC4wLjA.');
height:700px;
width:1200px;
margin: auto;
}
.bandeau {
width:100%;
}
/*Choices*/
.choices {
width:1000px;
margin: auto;
}
.images {
display:flex;
flex-wrap: wrap;
justify-content:center;
align-items: center;
gap: 20px;
}
/*Location*/
.location {
position:relative;
background-image: url('https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg?_gl=1*1stl6qw*_ga*MDgyMzExOTMwMS4xNzAzNDM3ODEw*_ga_3LRZM6TM9L*MTcwNjcxNDA3NS4yNy4xLjE3MDY3MTQ2NzkuMC4wLjA.');
background-size:cover;
height:500px;
width:1200px;
margin: auto;
}
.directions {
display:flex;
justify-content: center;
align-items: center;
height:500px;
background-color: transparent;
}
.column {
display:flex;
flex-direction: column;
justify-content: space-between;
}
.location h2 {
position:absolute;
width:100%;
top: 70px;
background-color: transparent;
}
.directions div {
width:300px;
opacity: 1;
}
.directions div:not(:last-child) {
margin-right:40px;
}
/*Contact*/
.contact {
display:flex;
flex-direction: column;
height:200px;
}
/*Footer*/
footer h5 {
text-align:left;
margin-left:20px;
}