detkno90/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="resources/styles.css" rel="stylesheet" type="text/css">
    <title>Tea Cozy</title>
</head>

<!-- Nav ---------------------------------------------------------------------------------------------Bar-->

<header>
    <figure>
        <img src="./resources/img-tea-cozy-logo.png" alt="img-tea-cozy-logo" class="logo">

    </figure>
    <nav>
        <ul>
            <div class="navigation">
            <li><a href="#mission">Mission</a></li>
            <li><a href="#featured">Featured</a></li>
            <li><a href="#locations">Locations</a></li>
            </div>

        </ul>

    </nav>
</header>

<!-- Background---------------------------------------------------------------------------------------- Image-->
<body>
    <section class="background-image">
        <div class="item-mission">
            <h2>Our Mission</h2>
            <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
        </div>
    </section>

<!-- tea of the day ----------------------------------------------------------------------------->

    <section class="tea-container">
        <div class="item-tea-month">
            <h2 id="featured">Tea Of The Month</h2>
            <h4>What's Steeping At The Cozy?</h4>
        </div>
        <figure class="cozy-tea">
            <div class="image-container">
                <div class="item-tea">
                <img src="./resources/img-berryblitz.jpg" alt="img-berryblitz">
                <h4>Fall Berry Blitz Tea</h4>
                </div>
                <div class="item-tea">
                <img src="./resources/img-spiced-rum.jpg" alt="img-spiced-rum">
                <h4>Spiced Rum Tea</h4>
                </div>
                <div class="item-tea">
                <img src="./resources/img-donut.jpg" alt="img-donut">
                <h4>Seasonal Donut</h4>
                </div>
                <div class="item-tea">
                <img src="./resources/img-myrtle-ave.jpg" alt="img-myrtle">
                <h4>Myrtle Ave</h4>
                </div>
                <div class="item-tea">
                <img src="./resources/img-bedford-bizarre.jpg" alt="img-bedford-bizzare">
                <h4>Bedford Bizzare Tea</h4>
             </div>
            </div>

        </figure>

    </section>

    <section class="location-container">
        <div class="items-location" id="locations">
            <div class="location-name">
                <h3>Downtown</h3>
                <p>384 West 4th St</p>
                <p>Suite 108</p>
                <p>Portland, Maine</p>
            </div>
            <div class="location-name">
                <h3>East Bayside</h3>
                <p>3433 Phisherman's Avenue</p>
                <p>(Northwest Corner)</p>
                <p>Portland, Maine</p>
            </div>
            <div class="location-name">
                <h3>Oakdale</h3>
                <p>515 Crescent Avenue</p>
                <p>Second floor</p>
                <p>Portland, Maine</p>
            </div>

        </div>
    </section>

    <section class="contact-container">
        <div class="item-email">
            <div class="contact-email">
                <h2>The Tea Cozy</h2>
                <p>contact@theteacozy.com</p>
                <p>917-555-8904</p>
            </div>
        </div>
    </section>
</body>

<footer class="footer">
    <div class="item.copyright">
        <p>copyright The Tea Cozy 2017</p>
    </div>
    </footer>


</html>

## styles.css
html {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    color: seashell;
    background-color: black;
    opacity: .9;
}

header {
    border-bottom: 1px solid seashell;
    background-color: black;
    display: inline-block;
    width: 100%;
    height: 69px;
    position: fixed;
    top: 0px;
}

/*Nav Section*/

.logo {
    float: left;
    height: 50px;
    opacity: .7;
    padding-left: 10px
}

.navigation {
    float: right;
    height: 100%;
    margin: 0 auto;
}

.navigation a {
    color: #b3b9c4;
    height: 100%;
    display: table;
    float: left;
    padding: 0px 20px;
}

.navigation li {
    display: table-cell;
    vertical-align: middle;
    height: 100%;
}

/*Background image*/

.background-image {
    background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg);
    background-size: cover;
    background-position: center;
    height: 700px;
    width: 1200px;
    margin: 40px auto;
    display: flex
}

.item-mission {
    margin: auto;
    background-color: black;
    width: 100%;
    text-align: center;
    color: #b3b9c4;
}

/*The tea cozy*/

.tea-container {
    text-align: center;
    color: #b3b9c4;
}

.image-container {
    display: inline-flex;
    max-width: 1000px;
    height: auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.item-tea img {
    height: 200px;
    width: 300px;
    padding: 10px 10px;
}

/*locations*/

.location-container {
    text-align: center;
    color: #b3b9c4;
}

.items-location {
    background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg);
    background-size: cover;
    background-position: center;
    height: 500px;
    max-width: 1200px;
    margin: 40px auto 0px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.location-name {
    height: 300px;
    width: 300px;
    background-color: black;
    margin: 15px 20px;
    align-items: center;
}

/*contact*/
.contact-container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.item-email {
    height: 200px;
    width: 300px;
    color: #b3b9c4;
    margin: auto;
}

.contact-email {
    text-align: center;
}

/*copyright*/

.footer {
    color: #b3b9c4;
    margin: auto 20px;
    text-align: left;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="resources/styles.css" rel="stylesheet" type="text/css">
	<title>Tea Cozy</title>
	</head>

	<!-- Nav ---------------------------------------------------------------------------------------------Bar-->

	<header>
	<figure>
	<img src="./resources/img-tea-cozy-logo.png" alt="img-tea-cozy-logo" class="logo">

	</figure>
	<nav>
	<ul>
	<div class="navigation">
	<li><a href="#mission">Mission</a></li>
	<li><a href="#featured">Featured</a></li>
	<li><a href="#locations">Locations</a></li>
	</div>

	</ul>

	</nav>
	</header>

	<!-- Background---------------------------------------------------------------------------------------- Image-->
	<body>
	<section class="background-image">
	<div class="item-mission">
	<h2>Our Mission</h2>
	<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
	</div>
	</section>

	<!-- tea of the day ----------------------------------------------------------------------------->

	<section class="tea-container">
	<div class="item-tea-month">
	<h2 id="featured">Tea Of The Month</h2>
	<h4>What's Steeping At The Cozy?</h4>
	</div>
	<figure class="cozy-tea">
	<div class="image-container">
	<div class="item-tea">
	<img src="./resources/img-berryblitz.jpg" alt="img-berryblitz">
	<h4>Fall Berry Blitz Tea</h4>
	</div>
	<div class="item-tea">
	<img src="./resources/img-spiced-rum.jpg" alt="img-spiced-rum">
	<h4>Spiced Rum Tea</h4>
	</div>
	<div class="item-tea">
	<img src="./resources/img-donut.jpg" alt="img-donut">
	<h4>Seasonal Donut</h4>
	</div>
	<div class="item-tea">
	<img src="./resources/img-myrtle-ave.jpg" alt="img-myrtle">
	<h4>Myrtle Ave</h4>
	</div>
	<div class="item-tea">
	<img src="./resources/img-bedford-bizarre.jpg" alt="img-bedford-bizzare">
	<h4>Bedford Bizzare Tea</h4>
	</div>
	</div>

	</figure>

	</section>

	<section class="location-container">
	<div class="items-location" id="locations">
	<div class="location-name">
	<h3>Downtown</h3>
	<p>384 West 4th St</p>
	<p>Suite 108</p>
	<p>Portland, Maine</p>
	</div>
	<div class="location-name">
	<h3>East Bayside</h3>
	<p>3433 Phisherman's Avenue</p>
	<p>(Northwest Corner)</p>
	<p>Portland, Maine</p>
	</div>
	<div class="location-name">
	<h3>Oakdale</h3>
	<p>515 Crescent Avenue</p>
	<p>Second floor</p>
	<p>Portland, Maine</p>
	</div>

	</div>
	</section>

	<section class="contact-container">
	<div class="item-email">
	<div class="contact-email">
	<h2>The Tea Cozy</h2>
	<p>contact@theteacozy.com</p>
	<p>917-555-8904</p>
	</div>
	</div>
	</section>
	</body>

	<footer class="footer">
	<div class="item.copyright">
	<p>copyright The Tea Cozy 2017</p>
	</div>
	</footer>


	</html>
	html {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	color: seashell;
	background-color: black;
	opacity: .9;
	}

	header {
	border-bottom: 1px solid seashell;
	background-color: black;
	display: inline-block;
	width: 100%;
	height: 69px;
	position: fixed;
	top: 0px;
	}

	/Nav Section/

	.logo {
	float: left;
	height: 50px;
	opacity: .7;
	padding-left: 10px
	}

	.navigation {
	float: right;
	height: 100%;
	margin: 0 auto;
	}

	.navigation a {
	color: #b3b9c4;
	height: 100%;
	display: table;
	float: left;
	padding: 0px 20px;
	}

	.navigation li {
	display: table-cell;
	vertical-align: middle;
	height: 100%;
	}

	/Background image/

	.background-image {
	background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg);
	background-size: cover;
	background-position: center;
	height: 700px;
	width: 1200px;
	margin: 40px auto;
	display: flex
	}

	.item-mission {
	margin: auto;
	background-color: black;
	width: 100%;
	text-align: center;
	color: #b3b9c4;
	}

	/The tea cozy/

	.tea-container {
	text-align: center;
	color: #b3b9c4;
	}

	.image-container {
	display: inline-flex;
	max-width: 1000px;
	height: auto;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	}

	.item-tea img {
	height: 200px;
	width: 300px;
	padding: 10px 10px;
	}

	/locations/

	.location-container {
	text-align: center;
	color: #b3b9c4;
	}

	.items-location {
	background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg);
	background-size: cover;
	background-position: center;
	height: 500px;
	max-width: 1200px;
	margin: 40px auto 0px auto;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.location-name {
	height: 300px;
	width: 300px;
	background-color: black;
	margin: 15px 20px;
	align-items: center;
	}

	/contact/
	.contact-container {
	display: flex;
	justify-content: center;
	align-items: center;
	}
	.item-email {
	height: 200px;
	width: 300px;
	color: #b3b9c4;
	margin: auto;
	}

	.contact-email {
	text-align: center;
	}

	/copyright/

	.footer {
	color: #b3b9c4;
	margin: auto 20px;
	text-align: left;
	}