Tea Cozy Project Review

Hello everyone! Just wanted to get some feedback on the Tea Cozy project. I’m pretty happy with the way it came out, except I had to use multiple @media query’s to adjust image height so I could keep the main background image at the top of the page, while making the screen smaller. I feel there has to be a better way to do this. It would make sense if you could have a percent height on the image but that makes the image disappear.

Also, the bottom of page background image and locations boxes, I ended up removing the image and changing box background color so it would flex properly. Not sure anyone did this keeping background image on the page. Didn’t seem feasible since as soon as you begin narrowing screen the boxes change position and make it look terrible. I could’ve moved the image above the boxes but I felt it ruined the page flow. Anyhow here it is.

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>Tea Cozy</title>
  	<link href="styles.css" rel="stylesheet" type="text/css"/>
  </head>

  <body>
  	
  	<header>
  		<nav>
		  	<ul class='nav-list'>
                <li class='nav-item'><img class="logo" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png?_gl=1*14bbt27*_ga*MTg3OTEwOTM5Mi4xNjUxNjc4NDg5*_ga_3LRZM6TM9L*MTY1MTY3ODQ4NS44LjEuMTY1MTY4MDExOS42MA.." alt="picture of logo"/></li>
		  		<li class='nav-item'><a href="#ma">Mission</a></li>
		  		<li class='nav-item'><a href="#featured">Featured Tea</a></li>
		  		<li class='nav-item'><a href="#loc">Locations</a></li>
		  	</ul>
	  	</nav>
  	</header>
  	
    <div>
      <p id="ma">mission anchor</p>
    </div>

	  <main>
	    <div class="tbackpic">
	      <div class="mission">
		      <h1>Our Mission</h1>
		      <p>Handpicked, Artisionally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</p>
		    </div>
	    </div>
	    <div>
	      <p id="featured">featured</p>
	    </div>
	  </main>

	  <section>
	    <div class="sec2">
	    	<h2>Tea Of The Month</h2>
	    	<h3>What's Steeping at The Tea Cozy?</h3>
	    </div>
	    	
	    <div class="midsection">
		    <div>
			    <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg?_gl=1*1epu97i*_ga*MTg3OTEwOTM5Mi4xNjUxNjc4NDg5*_ga_3LRZM6TM9L*MTY1MTY3ODQ4NS44LjEuMTY1MTY4MDExOS42MA.." alt="berry blitz tea"/>
			    <p>Fall Berry Blitz Tea</p>
			  </div>
			  <div>
			    <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg?_gl=1*1epu97i*_ga*MTg3OTEwOTM5Mi4xNjUxNjc4NDg5*_ga_3LRZM6TM9L*MTY1MTY3ODQ4NS44LjEuMTY1MTY4MDExOS42MA.."/>
			    <p>Spiced Rum Tea</p>
			  </div>
			  <div>
			    <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg?_gl=1*nt24ip*_ga*MTg3OTEwOTM5Mi4xNjUxNjc4NDg5*_ga_3LRZM6TM9L*MTY1MTY3ODQ4NS44LjEuMTY1MTY4MDExOS42MA.."/>
			    <p>Seasonal Donuts</p>
			  </div>
			  <div>
			    <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg?_gl=1*nt24ip*_ga*MTg3OTEwOTM5Mi4xNjUxNjc4NDg5*_ga_3LRZM6TM9L*MTY1MTY3ODQ4NS44LjEuMTY1MTY4MDExOS42MA.."/>
			    <p>Myrtle Ave Tea</p>
			  </div>
			  <div>
			    <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg?_gl=1*1bn509t*_ga*MTg3OTEwOTM5Mi4xNjUxNjc4NDg5*_ga_3LRZM6TM9L*MTY1MTY3ODQ4NS44LjEuMTY1MTY4MDExOS42MA.."/>
			    <p>Bedford Bizarre Tea</p>
			  </div>
    	</div>
	  </section>

    <section>
    	<div class="bbackpic">
    		<h2>Locations</h2>
    		<div id="loc">
    			<div class="locbox">
    				<h3>Downtown</h3>
    				<p>384 West 4th St</p>
    				<p>Suite 108</p>
    				<p>Portland, Maine</p>
    			</div>
    			<div class="locbox">
    				<h3>East Bayside</h3>
    				<p>3433 Phisherman's Ave</p>
    				<p>(Northwest Corner)</p>
    				<p>Potland, Maine</p>
    			</div>
    			<div class="locbox">
    				<h3>Oakdale</h3>
    				<p>515 Crescent Ave</p>
    				<p>Second Floor</p>
    				<p>Portland, Maine</p>
    			</div>
	    	</div>
	    </div>
	  </section>

	  <footer>
	    <div class="contact">
	    	<h2>The Tea Cozy</h2>
	    	<p>contact@theteacozy.com</p>
	    	<p>917-555-8904</p>
	    </div>
	    <div>
	    	<p><em>copyright</em> The Tea Cozy 2017</p>
	    </div>
	  </footer>
    
  </body>	
</html>
/* == Tea Cozy == */

/* -- Main Styles -- */

html{
	height: 100%;
}

a {
	text-decoration: underline;
}

a:hover {
	color: #614003;
}

body {
	background-color: #000;
	margin-top: 69px;
}

h1,
h2,
h3,
h5,
li,
p, 
a { 
	font-family: Helvetica;
	color: seashell;
	opacity: 0.9;
}

p {
  font-weight: bold;
}

ul {
	list-style-type: none;
}


/* -- Header -- */

header {
	width: 100%;
}

nav {
	position: fixed;
	top: 0;
	width: 100%;
  z-index: 5;
}

.logo {
	height: 53px;
}

.nav-list {
	height: 69px;
	width: 100%;
	display: flex;
	background: #000;
	border-bottom: 1px solid seashell;
	display: flex;
	justify-content: flex-end;
	padding-left: 10px;
	padding-right: 10px;
	margin: 0;
}

.nav-list:first-child {
	align-items: center;
}

.nav-item {
  margin-right: 2rem;
}

.nav-item:first-child {
 margin-right: auto;
 padding-right: 2rem;
}

.nav-item a {
  text-decoration: none;
  font-size: 1.375rem;
}

#ma {
	position: absolute;
	top: 0;
	visibility: hidden;
}

@media only screen and (max-width: 610px){
	.logo {
		height: 38px;
	}

	.nav-item a {
		font-size: 1rem;
	}
}

@media only screen and (max-width: 500px){
	.nav-list {
		padding-left: 2px;
	}

  .nav-item {
  	margin-right: 1rem;
  }
 
  .nav-item:first-child {
    padding-right: .9rem;
  }

  .nav-item a {
  	font-size: .9rem;
  }
 }

/* -- main section -- */

.tbackpic {
	background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg?_gl=1*vppjts*_ga*MTg3OTEwOTM5Mi4xNjUxNjc4NDg5*_ga_3LRZM6TM9L*MTY1MTY3ODQ4NS44LjEuMTY1MTY4MDExOS42MA..");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	display: flex;
  align-items: center;
  margin: 40px auto 40px auto;	
	height: 700px;
	max-width: 1200px;
	top: 0;
	max-height: 700px;
}

.mission {
	text-align: center;
	width: 100%;
	background-color: #000;
}

.mission h1 {
	margin-bottom: 0;
}

.mission p {
	margin-top: 8px;
}

@media only screen and (max-width: 1072px){
	.tbackpic {
		height: 625px;
	}
}

@media only screen and (max-width: 961px){
	.tbackpic {
		height: 550px;
	}
}

@media only screen and (max-width: 850px){
	.tbackpic {
		height: 475px;
	}
}

@media only screen and (max-width: 740px){
	.tbackpic {
		height: 425px;
	}
}

@media only screen and (max-width: 630px){
	.tbackpic {
		height: 375px;
	}
}

@media only screen and (max-width: 500px){
	.tbackpic {
		margin-top: 0;
    align-items: flex-end;
	}
}

/* -- mid section -- */

#featured {
	margin-top: 30px;
  color: #000;
}

.sec2 {
  width: 100%;
  text-align: center;
  margin: 60px auto 30px auto;
}

.midsection {
  width: 70%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.midsection img {
	height: 200px;
	width: 300px;
	margin: 0 10px 0 10px;
	display: flex;
}

.midsection p {
	text-align: center;
	margin-bottom: 30px;
}

/* -- Location Section -- */

.bbackpic {
	background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg?_gl=1*1bn509t*_ga*MTg3OTEwOTM5Mi4xNjUxNjc4NDg5*_ga_3LRZM6TM9L*MTY1MTY3ODQ4NS44LjEuMTY1MTY4MDExOS42MA..");
	background-size: cover;
	background-repeat: no-repeat;
	height: 500px;
	width: 80%;
	display: grid;
	margin: 90px auto 0 auto;
	justify-content: center;
	align-items: center;
}

.bbackpic h2 {
	text-align: center;
}

#loc {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.locbox {
	background-color: #000;
	height: 300px;
	width: 300px;
	text-align: center;
	display: flex;
	margin: 0 20px 60px 20px;
	flex-direction: column;
	align-content: center;
	justify-content: center;
}

.locbox h3 {
	font-weight: 900;
}

.locbox p {
	font-weight: 100;
}

@media only screen and (max-width: 1310px){
	.locbox {
		height: 275px;
		width: 275px;
	}
}

@media only screen and (max-width: 1215px){
	.locbox {
		height: 250px;
		width: 250px;
	}
}

@media only screen and (max-width: 1122px){
	.bbackpic {
		background-image: none;
		margin-top: 60px ;
		height: auto;
	}

	.locbox {
		height: 300px;
		width: 300px;
		background: seashell;
		border-radius: 5px;
		margin: 20px 20px;
	}

	.locbox h3 {
		margin-bottom: 20px;
		color: black;
	}

	.locbox p {
		margin: 20px;
		color: black;
	}
}

/* -- Contact Section -- */

.contact {
	text-align: center;
}
 
footer {
  margin-left: 20px;
}

footer em {
	font-weight: 100;
}

@media only screen and (max-width: 800px){
	footer p {
		font-size: .9rem;
		text-align: center;
	}
}