Hi there
I don’t know if i did this project right or not, but I though I would share and get your thoughts on it. I done some media on it as well .
My html
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="UTF-8">
<title>Tea Cozy</title>
<link href="./style.css" rel="stylesheet">
</head>
<body>
<header>
<div id="logo">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png">
</div>
<nav>
<div><a href="#mission" >Mission</a></div>
<div><a href="#teas">Featured Tea</a></div>
<div><a href="#location">Location</a></div>
</nav>
</header>
<!------------------------------- Mission ----------------------------------->
<div id= "mission">
<div id="box">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic tea</h4>
</div>
</div>
<!------------------------- Tea section ------------------------------------->
<div id="teas">
<h2>Tea of the Month</h2>
<h4> What's Steeping at The tea Cozy ?</h4>
<div id = "tea1">
<div class="tea-container">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg" >
<h4>Fall Betty Blitz Tea</h4>
</div>
<div class="tea-container">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg">
<h4>Spiced Rum Tea</h4>
</div>
<div class="tea-container">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg">
<h4>Seasonal Donuts</h4>
</div>
<div class="tea-container">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg">
<h4>Myrtle Ave Tea</h4>
</div>
<div class="tea-container">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg">
<h4>Bedford Bizarre Tea</h4>
</div>
</div>
</div>
<!---------------------------------location ------------------------------------->
<div id="location">
<!-- <div id="location-background"></div> -->
<h2> Locations</h2>
<div id= "location-container">
<div class="location-box">
<h3>Downtown</h3>
<p> 384 West 4th St <br>
Suit 108<br>
Portland, Maine
</p>
</div>
<div class="location-box">
<h3>East Bayside</h3>
<p>3433 Phisherman's Abenue<br>
(Northwest Corner)<br>
Portland, Maine
</p>
</div>
<div class="location-box">
<h3>Oakdale</h3>
<p>515 Crescent Avenue<br>
Second Floor<br>
Portland, Maine
</p>
</div>
<!-- </div> -->
</div>
</div>
<!----------------------------------- Contact ----------------------->
<div id="contact">
<h2>The Tea Cozy</h2>
<h5>contact@theteacozy.com</h5>
<h5>917-555-8904</h5>
</div>
<footer>
<div>copyright The Tea Cozy 2017</div>
</footer>
</body>
</html>
My CSS
body{
font-family: Helvetica, Arial,sans-serif;
font-size: 22px;
color:seashell;
background-color: black;
opacity: 0.9;
text-align: center;
padding:0 10px;
margin: 0;
}
/* ---------- header section--------------*/
header{
display:flex;
height: 69px;
position: fixed;
background-color: black;
width: 100%;
padding: 0;
top: 0;
z-index: 1;
border-bottom: 1px solid seashell;
}
#logo{
height: 50px;
text-align: left;
padding-left: 10px;
align-content: left;
flex-grow:2;
justify-content: space-around;
}
#logo img{
width:auto;
height: 3.2rem;
}
nav{
align-items: center;
width: 55%;
display:flex;
flex-direction: vertical;
justify-content: flex-end;
}
nav div{
margin-right: 20px;
}
nav div a{
flex-grow: 1;
color: seashell;
text-decoration: underline;
}
/* -------- mission section --------*/
#mission{
margin: 3.2em 0 ;
height:43.75em;
background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg);
background-repeat: no-repeat;
background-size: cover;
display:flex;
align-items: center;
}
#box{
background-color: black;
width:100%;
display: flex;
flex-direction: column;
height: auto;
justify-content: space-evenly;
flex-wrap: nowrap;
padding: 0;
align-content: stretch;
}
h2, h4{
/* border: 2px pink solid; */
padding: 0;
margin: 0.5em;
}
/*----------tea section-----------------*/
#tea1{
width: 1000px;
display:inline-flex;
justify-content: space-around;
align-items: flex-start;
flex-wrap: wrap;
flex-direction: row;
padding: 10px 15px;
height:auto;
}
.tea-container{
height: 250px;
width:300px;
overflow: hidden;
margin-top: 50px;
}
.tea-container img{
width: 100%;
height: auto;
display: block;
}
.tea-container h4{
text-align: center;
padding-top: 10px;
}
/* -------------loction section------------- */
#location{
height: 500px;
width: auto;
overflow: hidden;
background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg);
background-repeat: no-repeat;
background-size: cover;
display: block;
}
#location h2{
margin-top: 70px;
}
#location-container{
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin-top: 15px;
}
.location-box{
background-color: black;
opacity: 1.0;
width: 300px;
margin-left: 0 2.5em;
height: auto;
}
.location-box p{
line-height: 70px;
}
/* --------- Contact --------- */
#contact{
height: 200px;
width: auto;
}
footer{
text-align: left;
padding-left: 10px;
}
/* ------------------------Media for phone---------------------- */
@media (min-width: 300px) and (max-width: 480px) {
body{
margin: 0;
padding: 0;
}
/* ----- Head ----- */
header{
height: 150px;
display: flex;
flex-direction: column;
}
#logo{
margin: 1.6rem;
text-align: center;
}
#logo img{
height: 4.2rem;
}
nav{
margin: 10px;
width: 100%;
justify-content: center;
}
nav div a{
font-size: 20px;
}
/* ----- Mission ---- */
#mission{
margin-top: 3.2em;
height: 15.375em ;
}
#box{
opacity: 0.8;
}
h2{
font-size: 22px;
}
h4{
font-size: 18px;
}
/* ----- Teas ----- */
#teas{
margin-bottom: 50px;
}
#tea1{
width: 100%;
padding: 0;
}
.tea-container{
width: 90%;
height: auto;
}
/* ---- Location---- */
#location{
height: auto;
}
#location h2{
color: black;
opacity: 0.6;
font-size: 30px;
}
#location-container{
margin-bottom: 10px;
flex-direction: column;
align-items: center;
}
.location-box{
width: 200px;
border: 2px seashell solid;
margin-bottom: 10px;
opacity: 0.8;
}
.location-box h3{
font-size: 22px;
}
.location-box p{
width: 200px;
text-align: center;
font-size: 20px;
line-height: 40px;
}
}
/* ------------- Media for tablet ----------------- */
@media (min-width:481px) and (max-width:780px){
/* ------- head ------------- */
header{
height: 150px;
display: flex;
flex-direction: column;
}
#logo{
margin: 1.6rem;
text-align: left;
}
#logo img{
height: 4.2rem;
}
nav{
width: 100%;
/* align-items: flex-start; */
justify-content:flex-end;
}
nav div{
/* border: 3px blue solid; */
margin-right: 5px;
}
/* ----------- Mission ----------- */
#mission{
margin-top: 3.2em;
height: 20.375em ;
}
#box{
opacity: 0.8;
}
h2{
font-size: 25px;
}
h4{
font-size: 19px;
}
/* ----- Teas ----- */
#teas{
margin-bottom: 50px;
}
#tea1{
width: 100%;
padding: 0;
}
.tea-container{
width: 55%;
height: auto;
}
/* ---- Location---- */
#location{
height: auto;
}
#location h2{
color: black;
opacity: 0.6;
font-size: 35px;
}
#location-container{
margin-bottom: 10px;
flex-direction: row;
align-content: flex-start;
}
.location-box{
margin-left: 10px;
width: 200px;
border: 2px seashell solid;
margin-bottom: 10px;
opacity: 0.8;
}
.location-box h3{
font-size: 27px;
}
.location-box p{
width: 200px;
text-align: center;
font-size: 23px;
line-height: 40px;
}
}
/* ------- for ipad/ laptop size screen --------- */
@media (min-width:781px) and (max-width:1024px){
/* ------- head ------------- */
header{
height: 150px;
display: flex;
flex-direction: column;
}
#logo{
margin: 1.6rem;
text-align: left;
}
#logo img{
height: 4.2rem;
}
nav{
width: 100%;
/* align-items: flex-start; */
justify-content:flex-end;
}
nav div{
/* border: 3px blue solid; */
margin-right: 20px;
}
}