angelique-w/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Find the precious!</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <nav>
            <ul>
                <li>FindThePrecious.com</li>
                <li>Fellows</li>
                <li>Contact us</li>
            </ul>
        </nav>
        <section>
            <div class="carousel"></div>
        </section>
        <section>
            <h2>Fellows wanted dead <span class="or_alive">(or alive if you want to eat them later)</span></h2>
        </section>
        <section class="section_articles_fellows">
            <article class="article_fellows"></article>
            <article class="article_fellows"></article>
            <article class="article_fellows"></article>
        </section>
        <hr>
        <form>
            <h2>Contact us</h2>
            <div class="container_form">
                <input  class="element_form form_texte" type="email" placeholder="@">
                <input class="element_form form_texte" type="text" placeholder="&#8962;">
                <input class="element_form form_selection" type="text" placeholder="I have seen one of them">
                <textarea class="element_form form_texte" placeholder="Your message"></textarea>
                <div class="div_button">
                    <button class="button_submit" type="submit">Send !</button>
                </div>
            </div>


        </form>
        <footer>
            <a href="">About us</a>
            <a href="">Fellows</a>
            <a href="">Join our army</a>
            <a href="">FAQ</a>
            <a href="">Reward conditions</a>
            <a href="">Legal mentions</a>
            <a href="">Sauron4Ever.com</a>
            <a href="">Follow him</a>
        </footer>
    </body>
</html>

## style.css
/*Version Mobile*/

    /*Général*/

body {
    font-family: sans-serif;

}

h2 {
    text-align: center;
    font-size: 1.3em;
    font-weight: lighter;
    margin: 50px 0;
}

    /*Nav*/

nav {
    background-color: rgb(75, 75, 75);
}

ul {
    display: flex;
    flex-direction: row;
    margin: 0;
}

ul li {
    list-style-type: none;
    color: white;
    padding: 0.7em 1em;
}

    /*Fellows*/

.or_alive {
    font-size: 0.8em;
}

.article_fellows {
    background-color: rgb(221, 221, 221);
    width: 75%;
    height: 150px;
    margin: 20px auto;

}

    /*Form*/

.container_form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.element_form {
    width: 65%;
    margin: 10px 0;
    padding: 3px 0;
}

.form_texte {
    border: 2px solid black;
}

.form_selection {
    border: 0.5px solid grey;
    border-radius: 5px;
}

textarea {
    height: 100px;
}

.div_button {
    width: 65%;
}

.button_submit {
    background-color: darkgrey;
    border-radius: 3px;
    padding: 10px;
    border: none;
    justify-content: right;
    float: right;
}

    /*Footer*/

footer {
    clear: both;
    background-color: rgb(75, 75, 75);
    margin-top: 20px;
}

footer a {
    color: white;
    text-decoration: none;
    padding: 5px;
}


/*Version Desktop*/
@media screen and (min-width: 961px) {

    h2 {
        font-size: 1.7em;
    }

    .carousel {
        background-color: rgb(221, 221, 221);
        height: 300px;
        margin: 0;
    }

}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Find the precious!</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<nav>
	<ul>
	<li>FindThePrecious.com</li>
	<li>Fellows</li>
	<li>Contact us</li>
	</ul>
	</nav>
	<section>
	<div class="carousel"></div>
	</section>
	<section>
	<h2>Fellows wanted dead <span class="or_alive">(or alive if you want to eat them later)</span></h2>
	</section>
	<section class="section_articles_fellows">
	<article class="article_fellows"></article>
	<article class="article_fellows"></article>
	<article class="article_fellows"></article>
	</section>
	<hr>
	<form>
	<h2>Contact us</h2>
	<div class="container_form">
	<input class="element_form form_texte" type="email" placeholder="@">
	<input class="element_form form_texte" type="text" placeholder="⌂">
	<input class="element_form form_selection" type="text" placeholder="I have seen one of them">
	<textarea class="element_form form_texte" placeholder="Your message"></textarea>
	<div class="div_button">
	<button class="button_submit" type="submit">Send !</button>
	</div>
	</div>


	</form>
	<footer>
	<a href="">About us</a>
	<a href="">Fellows</a>
	<a href="">Join our army</a>
	<a href="">FAQ</a>
	<a href="">Reward conditions</a>
	<a href="">Legal mentions</a>
	<a href="">Sauron4Ever.com</a>
	<a href="">Follow him</a>
	</footer>
	</body>
	</html>
	/Version Mobile/

	/Général/

	body {
	font-family: sans-serif;

	}

	h2 {
	text-align: center;
	font-size: 1.3em;
	font-weight: lighter;
	margin: 50px 0;
	}

	/Nav/

	nav {
	background-color: rgb(75, 75, 75);
	}

	ul {
	display: flex;
	flex-direction: row;
	margin: 0;
	}

	ul li {
	list-style-type: none;
	color: white;
	padding: 0.7em 1em;
	}

	/Fellows/

	.or_alive {
	font-size: 0.8em;
	}

	.article_fellows {
	background-color: rgb(221, 221, 221);
	width: 75%;
	height: 150px;
	margin: 20px auto;

	}

	/Form/

	.container_form {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	}

	.element_form {
	width: 65%;
	margin: 10px 0;
	padding: 3px 0;
	}

	.form_texte {
	border: 2px solid black;
	}

	.form_selection {
	border: 0.5px solid grey;
	border-radius: 5px;
	}

	textarea {
	height: 100px;
	}

	.div_button {
	width: 65%;
	}

	.button_submit {
	background-color: darkgrey;
	border-radius: 3px;
	padding: 10px;
	border: none;
	justify-content: right;
	float: right;
	}

	/Footer/

	footer {
	clear: both;
	background-color: rgb(75, 75, 75);
	margin-top: 20px;
	}

	footer a {
	color: white;
	text-decoration: none;
	padding: 5px;
	}



	/Version Desktop/
	@media screen and (min-width: 961px) {

	h2 {
	font-size: 1.7em;
	}

	.carousel {
	background-color: rgb(221, 221, 221);
	height: 300px;
	margin: 0;
	}

	}