codecademydev/index.html Secret

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>The Tea Cozy</title>
  <link rel="stylesheet" href="style.css" type="text/css" />
</head>
  <body>
    <div class="logo-nav">
            <img class="img-logo" src="img-tea-cozy-logo.png" alt="logo">
            <ul class="nav">
                <a href="#mission"><li>Mission</li></a>
                <a href="#fetured"><li>Featuread Tea</li></a>
                <a href="#location"><li>Locations</li></a>
            </ul>
        </div>

        <div id="mission">
            <div class="mission">
                <div class="mission-text">
                    <h2>Our Mission</h2>
                    <h4>Handipicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
                </div>
            </div>
        </div>
        <div id="fetured">
            <h1>Tea of The Month</h1>
            <h2>Whats steeping at The Tea cozy</h2>
        </div>
        <div class="fetured">
            <div class="fetured-img">
                <img src="img-berryblitz.png">
                <h3>Fall Berry Blitz Tea</h3>
            </div>
            <div class="fetured-img">
                <img src="img-spiced-rum.png">
                <h3>Spiced Rum Tea</h3>
            </div>
            <div class="fetured-img">
                <img src="img-donut.png">
                <h3>Seasonal Donuts</h3>
            </div>
            <div class="fetured-img">
                <img src="img-myrtle-ave.png">
                <h3>Myrtle Ave Tea</h3>
            </div>
            <div class="fetured-img">
                <img src="img-bedford-bizarre.png">
                <h3>Bedford Bizarre Tea</h3>
            </div>
        </div>
        <div id="locations">
        </div>
        <div class="banner">
        <div class="banner-top">
            <p>Locations</p>
        </div>
        <div class="location-container">
            <div class="location-box">
                <h3>Downtown</h3>
                <p>384 West 4th St<p>
                <p>Suit 108</p>
                <p>Portland, Maine</p>
            </div>
            <div class="location-box">
                <h3>East Bayside</h3>
                <p>3433 Phisherman's Avenue<p>
                <p>(Northwest Corner)</p>
                <p>Portland, Maine</p>
            </div>
            <div class="location-box">
                <h3>Oakdale</h3>
                <p>515 Crescent Avenue<p>
                <p>Second Floor</p>
                <p>Portland, Maine</p>
            </div>
        </div>
    </div>

    <div class="contact-us">
        <h1>The Tea Cozy</h1>
        <h5>contact@teacozy.com</h5>
        <h5>917-555-8904</h5>
    </div>

    <footer>
        <p>copyright The Tea cozy 2017</p>
    </footer>

  </body>
</html>

## style.css
body {
        font-family: Helvetica, Arial, sans-serif;
        font-size: 22px;
        color: seashell;
        background-color: black;
        opacity: 0.9;
        margin: 0;
        text-align: center;
    }

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

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

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

    .nav a {
        height: 100%;
        display: table;
        float: left;
        padding: 0 20px;
    }

    .nav a li {
        display: table-cell;
        vertical-align: middle;
        height: 100%;
        text-decoration: underline;
        color: white;
    }

    .mission {
        text-align: center;
        background-image: url("img-mission-background.png");
        background-repeat: no-repeat;
        background-position: center;
        height: 700px;
        max-width: 1200px;
        margin: 40px auto 40px auto;
        display: flex;
    }

    .mission-text {
        background-color: black;
        margin: auto;
        width: 100%;
    }

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

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

    .banner {
        height: 500px;
        max-width: 1200px;
        margin: 40px auto auto auto;
        padding-top: 15px;
        background-image: url("img-locations-background.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    .banner-top {
        font-size: 43px;
        font-weight: bold;
    }

    .location-container {
        max-width: 1050px;
        margin: 15px auto auto auto;
        display: flex;
        justify-content: space-between;
    }

    .location-box {
        height: 300px;
        padding: 20px;
        margin-bottom: auto;
        flex-basis: 30%;
        box-sizing: border-box;
        background-color: black;
        opacity: 0.8;
    }

    footer {
        display: block;
        float: left;
        padding-left: 20px;
    }
	<!DOCTYPE html>
	<html>
	<head>
	<title>The Tea Cozy</title>
	<link rel="stylesheet" href="style.css" type="text/css" />
	</head>
	<body>
	<div class="logo-nav">
	<img class="img-logo" src="img-tea-cozy-logo.png" alt="logo">
	<ul class="nav">
	<a href="#mission"><li>Mission</li></a>
	<a href="#fetured"><li>Featuread Tea</li></a>
	<a href="#location"><li>Locations</li></a>
	</ul>
	</div>

	<div id="mission">
	<div class="mission">
	<div class="mission-text">
	<h2>Our Mission</h2>
	<h4>Handipicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
	</div>
	</div>
	</div>
	<div id="fetured">
	<h1>Tea of The Month</h1>
	<h2>Whats steeping at The Tea cozy</h2>
	</div>
	<div class="fetured">
	<div class="fetured-img">
	<img src="img-berryblitz.png">
	<h3>Fall Berry Blitz Tea</h3>
	</div>
	<div class="fetured-img">
	<img src="img-spiced-rum.png">
	<h3>Spiced Rum Tea</h3>
	</div>
	<div class="fetured-img">
	<img src="img-donut.png">
	<h3>Seasonal Donuts</h3>
	</div>
	<div class="fetured-img">
	<img src="img-myrtle-ave.png">
	<h3>Myrtle Ave Tea</h3>
	</div>
	<div class="fetured-img">
	<img src="img-bedford-bizarre.png">
	<h3>Bedford Bizarre Tea</h3>
	</div>
	</div>
	<div id="locations">
	</div>
	<div class="banner">
	<div class="banner-top">
	<p>Locations</p>
	</div>
	<div class="location-container">
	<div class="location-box">
	<h3>Downtown</h3>
	<p>384 West 4th St<p>
	<p>Suit 108</p>
	<p>Portland, Maine</p>
	</div>
	<div class="location-box">
	<h3>East Bayside</h3>
	<p>3433 Phisherman's Avenue<p>
	<p>(Northwest Corner)</p>
	<p>Portland, Maine</p>
	</div>
	<div class="location-box">
	<h3>Oakdale</h3>
	<p>515 Crescent Avenue<p>
	<p>Second Floor</p>
	<p>Portland, Maine</p>
	</div>
	</div>
	</div>

	<div class="contact-us">
	<h1>The Tea Cozy</h1>
	<h5>contact@teacozy.com</h5>
	<h5>917-555-8904</h5>
	</div>

	<footer>
	<p>copyright The Tea cozy 2017</p>
	</footer>

	</body>
	</html>
	body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 22px;
	color: seashell;
	background-color: black;
	opacity: 0.9;
	margin: 0;
	text-align: center;
	}

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

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

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

	.nav a {
	height: 100%;
	display: table;
	float: left;
	padding: 0 20px;
	}

	.nav a li {
	display: table-cell;
	vertical-align: middle;
	height: 100%;
	text-decoration: underline;
	color: white;
	}

	.mission {
	text-align: center;
	background-image: url("img-mission-background.png");
	background-repeat: no-repeat;
	background-position: center;
	height: 700px;
	max-width: 1200px;
	margin: 40px auto 40px auto;
	display: flex;
	}

	.mission-text {
	background-color: black;
	margin: auto;
	width: 100%;
	}

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

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

	.banner {
	height: 500px;
	max-width: 1200px;
	margin: 40px auto auto auto;
	padding-top: 15px;
	background-image: url("img-locations-background.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	}

	.banner-top {
	font-size: 43px;
	font-weight: bold;
	}

	.location-container {
	max-width: 1050px;
	margin: 15px auto auto auto;
	display: flex;
	justify-content: space-between;
	}

	.location-box {
	height: 300px;
	padding: 20px;
	margin-bottom: auto;
	flex-basis: 30%;
	box-sizing: border-box;
	background-color: black;
	opacity: 0.8;
	}

	footer {
	display: block;
	float: left;
	padding-left: 20px;
	}