angelique-w/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Find the precious!</title>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div class="main_page">
			<nav>
				<ul>
					<li class="list_nav home">FindThePrecious.com</li>
					<li class="list_nav fellows_nav">Fellows</li>
					<li class="list_nav contact_nav">Contact us</li>
				</ul>
			</nav>
			<section>
				<div class="carousel"></div>
			</section>
			<section>
				<h2 id="fellows" class="fellows">Fellows wanted dead <span class="or_alive">(or alive if you want to eat them later)</span></h2>
			</section>
			<section class="section_profils">
				<article class="profil"></article>
				<article class="profil"></article>
				<article class="profil"></article>
			</section>
			<hr>
			<form>
				<h2 id="contact" class="contact">Contact us</h2>
				<div class="group_form">
					<input class="part_form" type="text" placeholder="@">
					<input class="part_form" type="text" placeholder="&#8962;">
					<input class="part_form" type="text" placeholder="I have seen one of them">
					<textarea class="part_form" placeholder="Your message"></textarea>
				</div>
			</form>
		</div>
	</body>
</html>

## style.css
/*Base*/
  /*Base générale*/
body {
  font-family: sans-serif;
  background-color: #262626;
}

.main_page {
  background-color: white;
}

p {
  color: #424242;
}

h2 {
  color: #424242;
  font-weight: lighter;
}

ul {
  list-style-type: none;
}


nav {
  background-color: #424242;
}

nav ul li {
  color: #eeeeee;
  background-color: #424242;
  font-size: 1em;
  border: 1px solid #424242;
}


  /*Base nav*/

.home {
  font-size: 1.5em;
}


  /*Base caroussel*/

.carousel {
  background-color: #e0e0e0;
}

  /*Base fellows*/

.or_alive {
  font-size: 0.7em;
}

.profil {
  background-color: #e0e0e0;
}

/*Layout*/

  /*Layout général*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  max-width: 1000px;
  min-width: 768px;
  margin: auto;
}

  /*Layout nav*/

nav {
  height: 50px;
}

nav ul {
  position: relative;
  height: 50px;
  margin: 0px;
  padding: 0px;
}

.list_nav {
  display: inline-block;
  position: absolute;
  height: 50px;
  padding: 15px;
}

.home {
  line-height: 18px;
}

.fellows_nav {
  left: 265px;
}

.contact_nav {
  left: 350px;
}


  /*Layout carousel*/

.carousel {
  height: 250px;
}

  /*Layout fellows*/

.fellows {
  text-align: center;
  padding: 50px;
}

.section_profils {
  padding-bottom: 100px;
  width: 830px;
  margin: 0px auto;
}

.profil {
  display: inline-block;
  margin: 0 5px;
  height: 300px;
  width: 250px;
}


  /*Layout contact*/

.contact {
  padding: 10px 10px 30px 10px;
}

.group_form {
  width: 600px;
  margin: auto;
}

.part_form {
  display: block;
  width: 100%;
  margin: 5px;
}

textarea {
  height: 100px;
}

/*Etats*/
.list_nav:hover {
  background-color: #e0e0e0;
  border: 1px solid #757575;
  color: #424242;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Find the precious!</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<div class="main_page">
	<nav>
	<ul>
	<li class="list_nav home">FindThePrecious.com</li>
	<li class="list_nav fellows_nav">Fellows</li>
	<li class="list_nav contact_nav">Contact us</li>
	</ul>
	</nav>
	<section>
	<div class="carousel"></div>
	</section>
	<section>
	<h2 id="fellows" class="fellows">Fellows wanted dead <span class="or_alive">(or alive if you want to eat them later)</span></h2>
	</section>
	<section class="section_profils">
	<article class="profil"></article>
	<article class="profil"></article>
	<article class="profil"></article>
	</section>
	<hr>
	<form>
	<h2 id="contact" class="contact">Contact us</h2>
	<div class="group_form">
	<input class="part_form" type="text" placeholder="@">
	<input class="part_form" type="text" placeholder="⌂">
	<input class="part_form" type="text" placeholder="I have seen one of them">
	<textarea class="part_form" placeholder="Your message"></textarea>
	</div>
	</form>
	</div>
	</body>
	</html>
	/Base/
	/Base générale/
	body {
	font-family: sans-serif;
	background-color: #262626;
	}

	.main_page {
	background-color: white;
	}

	p {
	color: #424242;
	}

	h2 {
	color: #424242;
	font-weight: lighter;
	}

	ul {
	list-style-type: none;
	}


	nav {
	background-color: #424242;
	}

	nav ul li {
	color: #eeeeee;
	background-color: #424242;
	font-size: 1em;
	border: 1px solid #424242;
	}


	/Base nav/

	.home {
	font-size: 1.5em;
	}


	/Base caroussel/

	.carousel {
	background-color: #e0e0e0;
	}

	/Base fellows/

	.or_alive {
	font-size: 0.7em;
	}

	.profil {
	background-color: #e0e0e0;
	}

	/Layout/

	/Layout général/
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	max-width: 1000px;
	min-width: 768px;
	margin: auto;
	}

	/Layout nav/

	nav {
	height: 50px;
	}

	nav ul {
	position: relative;
	height: 50px;
	margin: 0px;
	padding: 0px;
	}

	.list_nav {
	display: inline-block;
	position: absolute;
	height: 50px;
	padding: 15px;
	}

	.home {
	line-height: 18px;
	}

	.fellows_nav {
	left: 265px;
	}

	.contact_nav {
	left: 350px;
	}


	/Layout carousel/

	.carousel {
	height: 250px;
	}

	/Layout fellows/

	.fellows {
	text-align: center;
	padding: 50px;
	}

	.section_profils {
	padding-bottom: 100px;
	width: 830px;
	margin: 0px auto;
	}

	.profil {
	display: inline-block;
	margin: 0 5px;
	height: 300px;
	width: 250px;
	}


	/Layout contact/

	.contact {
	padding: 10px 10px 30px 10px;
	}

	.group_form {
	width: 600px;
	margin: auto;
	}

	.part_form {
	display: block;
	width: 100%;
	margin: 5px;
	}

	textarea {
	height: 100px;
	}

	/Etats/
	.list_nav:hover {
	background-color: #e0e0e0;
	border: 1px solid #757575;
	color: #424242;
	}