pamplozio/index.html Secret

## 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 rel="stylesheet" href="./resources/style.css">
    <title>Tea Cozy</title>
</head>
<body>

    <header class="flex-container">
        <img class="logo" src=./resources/images/logo.jpg.jpg alt="logo">
        <nav>
            <span><a href="#">Mission</a></span>
            <span><a href="#">Featured Tea</a></span>
            <span><a href="#">Locations</a></span>
        <nav>
    </header>
    <main>
        <div class="mission">
            <div class="background-pic">
                <div class="items-mission">
                    <h2>Our Mission</h2>
                    <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
                </div>
            </div>
        </div>
        <!--Section "Tea of the Month"-->
        <section class="tea-section">
            <div class="tea-month">
                <h2>Tea of the Month</h2>
                <h4>What's steeping at The Tea Cozy?</h4>
            </div>
            <div class="tea-pics">
                   <div class="img-fall-berry">
                       <img class="cup-berries" src="./resources/images/img-berryblitz.jpg" alt="cup with berries">
                       <h4> Fall Berry Blitz Tea</h4>
                   </div>
                   <div class="rum-tea">
                       <img class="spiced-rum" src="./resources/images/img-spiced-rum.jpg" alt="img-spiced-rum">
                       <h4>Spiced Rum Tea</h4>
                   </div>
                   <div class="seasonal-don">
                       <img class="donut" src="./resources/images/img-donut.jpg" alt="donut">
                       <h4>Seasonal Donuts</h4>
                   </div>
                   <div class="myrtle-tea">
                       <img class="myrtle" src="./resources/images/img-myrtle-ave.jpg" alt="myrtle">
                       <h4>Myrtle Ave Tea</h4>
                   </div>
                   <div class="bedford">
                       <img class="bedford-tea" src="./resources/images/img-bedford-bizarre.jpg" alt="Bedford Tea">
                       <h4>Bedford Bizarre Tea</h4>
                   </div>
            </div>
        </section>
        <!--Secion "Location"-->
        <section class="locations">
                <div class="l-central">
                    <h2>Locations</h2>
                </div>
                <div class="downtown">
                    <h3>Downtown</h3>
                    <h3 class="not-bold">384 West 4th St</h3>
                    <h3 class="not-bold">Suite 108</h3>
                    <h3 class="not-bold">Portland, Maine</h3>
                </div>
                <div class="east">
                    <h3>East Bayside</h3>
                    <h3 class="not-bold">3433 Phiserman's Avenue
                    <h3 class="not-bold">(Northwest Corner)</h3>
                    <h3 class="not-bold">Portland, Maine</h3>
                </div>
                <div class="oakdale">
                    <h3>Oakdale</h3>
                    <h3 class="not-bold">515 Crescent Avenue</h3>
                    <h3 class="not-bold">Second Floor</h3>
                    <h3 class="not-bold">Portland, Maine</h3>
                </div>
        </section>
        <!--Contact details-->
        <section class="cozy-details">
            <div class="details">
                <h2>The Tea Cozy</h2>
                <h5>contact@theteacozy.com</h5>
                <h5>917-555-8904</h5>
            </div>
        </section>
        <!--Footer-->
        <footer>
            <h5>copyright The Tea Cozy 2017</h5>
        </footer>
    </main>
</body>
</html>

## style.css
body {
    font-family: Helvetica;
    font-size: 22px;
    color: seashell;
    background-color: black;
    opacity: 0.9;
}

header {
    background-color: black;
    opacity: 1;
    position: fixed;
    width: 100%;
    height: 69px;
    border-bottom: 1px solid seashell;
    align-items: center;
    top: 0px;

}

nav {
    text-align: right;
    flex-grow: 1;
    padding-right: 10px;
}

nav span{
    display: inline-block;
    padding: 20px 10px;
}

nav a {
    color: seashell;
}

header img {
    height: 50px;
    padding-left: 10px;
}

.flex-container{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}


.background-pic {
    background-image: url("./images/img-mission-background.jpg");
    background-size: cover;
    background-position: center;
    height: 700px;
    width: 1200px;
    margin: 40px auto;
    display: flex;
}

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

.tea-month {
    color: seashell;
    text-align: center;
    margin: auto;
    width: 100%;
}

.cup-berries,
.spiced-rum,
.donut,
.myrtle,
.bedford-tea {
    height: 200px;
    width: 300px;
    padding: 10px 10px;
}

.tea-pics {
    width: 1000px;
    margin: auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: space-between;
    text-align: center;
}

.img-fall-berry h4,
.rum-tea h4,
.seasonal-don h4,
.myrtle-tea h4,
.bedford h4 {
    margin-top: 10px;
}


.l-central {
    margin: auto;
    margin-top: 50px;
    width: 100%;
    text-align: center;
    width: 1000px;
}

.locations {
    background-image: url("./images/img-locations-background.jpg");
    background-size: cover;
    background-position: center;
    height: 500px;
    max-width: 1200px;
    margin: auto;
    display: flex;

    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    text-align: center;
}


.downtown,
.east,
.oakdale {
    background-color: black;
    opacity: 1;
    margin-left: 40px;
    height: 300px;
    width: 300px;
    display: flex;

    flex-direction: column;
    justify-content: space-around;
    text-align: center;
}


.not-bold {
    font-weight: normal;
}

.cozy-details {
    height: 200px;
    color: seashell;
    text-align: center;
    margin: auto;
    margin-top: 5px;
    height: 200px;
}

footer {
    margin-left: 20px;
}
	<!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 rel="stylesheet" href="./resources/style.css">
	<title>Tea Cozy</title>
	</head>
	<body>

	<header class="flex-container">
	<img class="logo" src=./resources/images/logo.jpg.jpg alt="logo">
	<nav>
	<span><a href="#">Mission</a></span>
	<span><a href="#">Featured Tea</a></span>
	<span><a href="#">Locations</a></span>
	<nav>
	</header>
	<main>
	<div class="mission">
	<div class="background-pic">
	<div class="items-mission">
	<h2>Our Mission</h2>
	<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
	</div>
	</div>
	</div>
	<!--Section "Tea of the Month"-->
	<section class="tea-section">
	<div class="tea-month">
	<h2>Tea of the Month</h2>
	<h4>What's steeping at The Tea Cozy?</h4>
	</div>
	<div class="tea-pics">
	<div class="img-fall-berry">
	<img class="cup-berries" src="./resources/images/img-berryblitz.jpg" alt="cup with berries">
	<h4> Fall Berry Blitz Tea</h4>
	</div>
	<div class="rum-tea">
	<img class="spiced-rum" src="./resources/images/img-spiced-rum.jpg" alt="img-spiced-rum">
	<h4>Spiced Rum Tea</h4>
	</div>
	<div class="seasonal-don">
	<img class="donut" src="./resources/images/img-donut.jpg" alt="donut">
	<h4>Seasonal Donuts</h4>
	</div>
	<div class="myrtle-tea">
	<img class="myrtle" src="./resources/images/img-myrtle-ave.jpg" alt="myrtle">
	<h4>Myrtle Ave Tea</h4>
	</div>
	<div class="bedford">
	<img class="bedford-tea" src="./resources/images/img-bedford-bizarre.jpg" alt="Bedford Tea">
	<h4>Bedford Bizarre Tea</h4>
	</div>
	</div>
	</section>
	<!--Secion "Location"-->
	<section class="locations">
	<div class="l-central">
	<h2>Locations</h2>
	</div>
	<div class="downtown">
	<h3>Downtown</h3>
	<h3 class="not-bold">384 West 4th St</h3>
	<h3 class="not-bold">Suite 108</h3>
	<h3 class="not-bold">Portland, Maine</h3>
	</div>
	<div class="east">
	<h3>East Bayside</h3>
	<h3 class="not-bold">3433 Phiserman's Avenue
	<h3 class="not-bold">(Northwest Corner)</h3>
	<h3 class="not-bold">Portland, Maine</h3>
	</div>
	<div class="oakdale">
	<h3>Oakdale</h3>
	<h3 class="not-bold">515 Crescent Avenue</h3>
	<h3 class="not-bold">Second Floor</h3>
	<h3 class="not-bold">Portland, Maine</h3>
	</div>
	</section>
	<!--Contact details-->
	<section class="cozy-details">
	<div class="details">
	<h2>The Tea Cozy</h2>
	<h5>contact@theteacozy.com</h5>
	<h5>917-555-8904</h5>
	</div>
	</section>
	<!--Footer-->
	<footer>
	<h5>copyright The Tea Cozy 2017</h5>
	</footer>
	</main>
	</body>
	</html>
	body {
	font-family: Helvetica;
	font-size: 22px;
	color: seashell;
	background-color: black;
	opacity: 0.9;
	}

	header {
	background-color: black;
	opacity: 1;
	position: fixed;
	width: 100%;
	height: 69px;
	border-bottom: 1px solid seashell;
	align-items: center;
	top: 0px;

	}

	nav {
	text-align: right;
	flex-grow: 1;
	padding-right: 10px;
	}

	nav span{
	display: inline-block;
	padding: 20px 10px;
	}

	nav a {
	color: seashell;
	}

	header img {
	height: 50px;
	padding-left: 10px;
	}

	.flex-container{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	}


	.background-pic {
	background-image: url("./images/img-mission-background.jpg");
	background-size: cover;
	background-position: center;
	height: 700px;
	width: 1200px;
	margin: 40px auto;
	display: flex;
	}

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

	.tea-month {
	color: seashell;
	text-align: center;
	margin: auto;
	width: 100%;
	}

	.cup-berries,
	.spiced-rum,
	.donut,
	.myrtle,
	.bedford-tea {
	height: 200px;
	width: 300px;
	padding: 10px 10px;
	}

	.tea-pics {
	width: 1000px;
	margin: auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-content: space-between;
	text-align: center;
	}

	.img-fall-berry h4,
	.rum-tea h4,
	.seasonal-don h4,
	.myrtle-tea h4,
	.bedford h4 {
	margin-top: 10px;
	}



	.l-central {
	margin: auto;
	margin-top: 50px;
	width: 100%;
	text-align: center;
	width: 1000px;
	}

	.locations {
	background-image: url("./images/img-locations-background.jpg");
	background-size: cover;
	background-position: center;
	height: 500px;
	max-width: 1200px;
	margin: auto;
	display: flex;

	justify-content: center;
	flex-wrap: wrap;
	align-content: center;
	text-align: center;
	}



	.downtown,
	.east,
	.oakdale {
	background-color: black;
	opacity: 1;
	margin-left: 40px;
	height: 300px;
	width: 300px;
	display: flex;

	flex-direction: column;
	justify-content: space-around;
	text-align: center;
	}


	.not-bold {
	font-weight: normal;
	}

	.cozy-details {
	height: 200px;
	color: seashell;
	text-align: center;
	margin: auto;
	margin-top: 5px;
	height: 200px;
	}

	footer {
	margin-left: 20px;
	}