Tea Cozy Project : Finished with @media /liked to Improve!

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;    
}

}

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.