PascalR2014/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>The Tea Cozy</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
</head>
<body>
	<!-- Header -->
	<header class="flex-container">
		<figure>
		    <img src="images/tea-cozy-logo.png" alt="logo Tea Cozy">
		</figure>
		<nav>
			<a href="#mission">Mission</a>
			<a href="#store">Featured Tea</a>
			<a href="#location">Locations</a>
		</nav>
	</header>
	<!-- Main Content Container (à compléter !) -->

	<div class="main">

	<!-- Mission Section -->

		<div id="mission" class="flex-container">
			<div class="content">
				<h2>Our Mission</h2>
				<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
			</div>
		</div>

		<!-- Store Section -->

		<div id="store">
				<h2>Tea Of the Month</h2>
				<h4>What's Steeping at The Tea Cozy ?</h4>
			<div class="flex-container items">
				<div class="item">
					<figure>
					    <img src="images/img-berryblitz.jpg" alt="Fall Berry Blitz Tea">
					    <figcaption>Fall Berry Blitz Tea</figcaption>
					</figure>
				</div>
				<div class="item">
					<figure>
					    <img src="images/img-spiced-rum.jpg" alt="Spiced Rum Tea">
					    <figcaption>Spiced Rum Tea</figcaption>
					</figure>
				</div>
				<div class="item">
					<figure>
					    <img src="images/img-donut.jpg" alt="Seasonal Donuts">
					    <figcaption>Seasonal Donuts</figcaption>
					</figure>
				</div>
				<div class="item">
					<figure>
					    <img src="images/img-donut.jpg" alt="Myrtle Ave Tea">
					    <figcaption>Myrtle Ave Tea</figcaption>
					</figure>
				</div>
				<div class="item">
					<figure>
					    <img src="images/img-bedford-bizarre.jpg" alt="Bedford Bizarre Tea">
					    <figcaption>Bedford Bizarre Tea</figcaption>
					</figure>
				</div>
			</div>
		</div>

		<!-- Locations Section -->

		<div id="locations">
				<h2>Locations</h2>
			<div class="flex-container locations">
		        <div class="location loc1">
		          <h3>Downtown</h3>
		          <p>384 West 4th St</p>
		          <p>Suite 108</p>
		          <p>Portland, Maine</p>
		        </div>
		        <div class="location loc2">
		          <h3>East Bayside</h3>
		          <p>3433 Phisherman's Avenue</p>
		          <p>(Northwest Corner)</p>
		          <p>Portland, Maine</p>
		        </div>
		        <div class="location loc3">
		          <h3>Oakdale</h3>
		          <p>515 Crescent Avenue</p>
		          <p>Second Floor</p>
		          <p>Portland, Maine</p>
		        </div>
			</div>
		</div>

	</div><!--end main section-->

	<!-- Contact Section -->

	<div id="contact">
		<h2>The Tea Cozy</h2>
		<h5>contact@theteacozy.com</h5>
		<h5>917-555-8904</h5>
	</div>

	<!-- Footer Section -->

	<footer>
		<h5>copyright The Tea Cozy 2017</h5>
	</footer>
</body>
</html>

## style.css
/* Correction projet Tea Cozy*/

/* Universal Styles */


* {
	margin: 0;
	padding: 0;
/* Permet de résoudre les problèmes de marges et de padding, c'est une sorte de reset*/
	box-sizing: border-box;
/* (box-sizing: border-box) Indique au navigateur de prendre en compte la bordure et le remplissage
dans la valeur définie pour la largeur et la hauteur */
}

/* Astuces propriété (*) pour universel snippet pour remettre à zéro
certaines propriétés parasites */

body {
  font-family: "Helvetica", sans-serif;
  color: seashell;
  background-color: black;
  font-size: 22px;
  text-align: center;
}

a {
  color: seashell;
}

h2,
h3,
h4 {
  padding: 10px;
}

h2, h3, h4, h5, p, figcaption, a {
	opacity: 0.9;
}

/* Un seul style universel pour flex container */

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

/* Header Section // Code vérif */

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

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

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

nav a {
	display: inline-flex;
	text-decoration: underline;
	justify-content: flex-end;
	padding: 20px 10px;
}

/* Main Section - Comprend tous les contenus :
#mission, #store et #location */

.main {
  padding-top: 69px;
  width: 1200px;
  margin: auto;
}

/* Mission Section // Code vérif */

#mission {
  height: 700px;
  background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg");
  padding-top: 70px;
}

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

/* Store Section // Code vérif */

#store {
  height: 700px;
  width: 1000px;
  margin: auto;
  padding-top: 70px;
}

.item {
  padding: 5px;
}

.item img {
  height: 200px;
  width: 300px;
  margin: 10px;
  display: block; /* Indique au navigateur que les éléments doivent remplir la boîte - pas indispensable ici */

}

/* Snippet pour légende de photos afin
qu'elle soit bien alignées aux photos */

.item figcaption {
	display: block;  /* Indique au navigateur que les éléments doivent remplir la boîte - pas indispensable ici */
	padding: 5px;
	font-weight: bold;
	text-align: center;
}

/* Location Section // Code vérif */

.flex-container.locations {
  padding-top: 5px;
}

#locations {
  padding-top: 70px;
  background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  height: 500px;
}

#locations .flex-container {
  margin: auto;
  width: 1100px;
}

.location {
  width: 300px;
  height: 300px;
  opacity: 1.0;
  padding: 10px;
  margin: 5px 20px;
  background-color: black;
  flex-basis: 280px;
  flex-direction: column;
  justify-content: center;
}

/* Gestion spécifique du dimensionnement des lettres
pour l'affichage correct dans la boîte */

.loc1, .loc2, .loc3 {
	line-height: 60px;
}

.loc2 {
	letter-spacing: -1px;
}

/* Contact Section */

#contact {
  height: 200px;
  line-height: 60px;
}

/* Footer Section */

footer {
  text-align: left;
  margin-left: 20px;
  margin-bottom: 20px;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>The Tea Cozy</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<!-- Header -->
	<header class="flex-container">
	<figure>
	<img src="images/tea-cozy-logo.png" alt="logo Tea Cozy">
	</figure>
	<nav>
	<a href="#mission">Mission</a>
	<a href="#store">Featured Tea</a>
	<a href="#location">Locations</a>
	</nav>
	</header>
	<!-- Main Content Container (à compléter !) -->

	<div class="main">

	<!-- Mission Section -->

	<div id="mission" class="flex-container">
	<div class="content">
	<h2>Our Mission</h2>
	<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
	</div>
	</div>

	<!-- Store Section -->

	<div id="store">
	<h2>Tea Of the Month</h2>
	<h4>What's Steeping at The Tea Cozy ?</h4>
	<div class="flex-container items">
	<div class="item">
	<figure>
	<img src="images/img-berryblitz.jpg" alt="Fall Berry Blitz Tea">
	<figcaption>Fall Berry Blitz Tea</figcaption>
	</figure>
	</div>
	<div class="item">
	<figure>
	<img src="images/img-spiced-rum.jpg" alt="Spiced Rum Tea">
	<figcaption>Spiced Rum Tea</figcaption>
	</figure>
	</div>
	<div class="item">
	<figure>
	<img src="images/img-donut.jpg" alt="Seasonal Donuts">
	<figcaption>Seasonal Donuts</figcaption>
	</figure>
	</div>
	<div class="item">
	<figure>
	<img src="images/img-donut.jpg" alt="Myrtle Ave Tea">
	<figcaption>Myrtle Ave Tea</figcaption>
	</figure>
	</div>
	<div class="item">
	<figure>
	<img src="images/img-bedford-bizarre.jpg" alt="Bedford Bizarre Tea">
	<figcaption>Bedford Bizarre Tea</figcaption>
	</figure>
	</div>
	</div>
	</div>

	<!-- Locations Section -->

	<div id="locations">
	<h2>Locations</h2>
	<div class="flex-container locations">
	<div class="location loc1">
	<h3>Downtown</h3>
	<p>384 West 4th St</p>
	<p>Suite 108</p>
	<p>Portland, Maine</p>
	</div>
	<div class="location loc2">
	<h3>East Bayside</h3>
	<p>3433 Phisherman's Avenue</p>
	<p>(Northwest Corner)</p>
	<p>Portland, Maine</p>
	</div>
	<div class="location loc3">
	<h3>Oakdale</h3>
	<p>515 Crescent Avenue</p>
	<p>Second Floor</p>
	<p>Portland, Maine</p>
	</div>
	</div>
	</div>

	</div><!--end main section-->

	<!-- Contact Section -->

	<div id="contact">
	<h2>The Tea Cozy</h2>
	<h5>contact@theteacozy.com</h5>
	<h5>917-555-8904</h5>
	</div>

	<!-- Footer Section -->

	<footer>
	<h5>copyright The Tea Cozy 2017</h5>
	</footer>
	</body>
	</html>
	/* Correction projet Tea Cozy*/

	/* Universal Styles */



	* {
	margin: 0;
	padding: 0;
	/* Permet de résoudre les problèmes de marges et de padding, c'est une sorte de reset*/
	box-sizing: border-box;
	/* (box-sizing: border-box) Indique au navigateur de prendre en compte la bordure et le remplissage
	dans la valeur définie pour la largeur et la hauteur */
	}

	/* Astuces propriété (*) pour universel snippet pour remettre à zéro
	certaines propriétés parasites */

	body {
	font-family: "Helvetica", sans-serif;
	color: seashell;
	background-color: black;
	font-size: 22px;
	text-align: center;
	}

	a {
	color: seashell;
	}

	h2,
	h3,
	h4 {
	padding: 10px;
	}

	h2, h3, h4, h5, p, figcaption, a {
	opacity: 0.9;
	}

	/* Un seul style universel pour flex container */

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

	/* Header Section // Code vérif */

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

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

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

	nav a {
	display: inline-flex;
	text-decoration: underline;
	justify-content: flex-end;
	padding: 20px 10px;
	}

	/* Main Section - Comprend tous les contenus :
	#mission, #store et #location */

	.main {
	padding-top: 69px;
	width: 1200px;
	margin: auto;
	}

	/* Mission Section // Code vérif */

	#mission {
	height: 700px;
	background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg");
	padding-top: 70px;
	}

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

	/* Store Section // Code vérif */

	#store {
	height: 700px;
	width: 1000px;
	margin: auto;
	padding-top: 70px;
	}

	.item {
	padding: 5px;
	}

	.item img {
	height: 200px;
	width: 300px;
	margin: 10px;
	display: block; /* Indique au navigateur que les éléments doivent remplir la boîte - pas indispensable ici */

	}

	/* Snippet pour légende de photos afin
	qu'elle soit bien alignées aux photos */

	.item figcaption {
	display: block; /* Indique au navigateur que les éléments doivent remplir la boîte - pas indispensable ici */
	padding: 5px;
	font-weight: bold;
	text-align: center;
	}

	/* Location Section // Code vérif */

	.flex-container.locations {
	padding-top: 5px;
	}

	#locations {
	padding-top: 70px;
	background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	height: 500px;
	}

	#locations .flex-container {
	margin: auto;
	width: 1100px;
	}

	.location {
	width: 300px;
	height: 300px;
	opacity: 1.0;
	padding: 10px;
	margin: 5px 20px;
	background-color: black;
	flex-basis: 280px;
	flex-direction: column;
	justify-content: center;
	}

	/* Gestion spécifique du dimensionnement des lettres
	pour l'affichage correct dans la boîte */

	.loc1, .loc2, .loc3 {
	line-height: 60px;
	}

	.loc2 {
	letter-spacing: -1px;
	}

	/* Contact Section */

	#contact {
	height: 200px;
	line-height: 60px;
	}

	/* Footer Section */

	footer {
	text-align: left;
	margin-left: 20px;
	margin-bottom: 20px;
	}