AmauryLugdu/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, maximum-scale=1.0' />
        <title>Find the precious!</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <div class="page">
    <body>
        <div class="nav">
            <ul>
                <li>FindThePrecious.com</li>
                <li>Fellows</li>
                <li>Contact us</li>
            </ul>
        </div>
        <div class="section">
            <div class="carousel"></div>
        </div>
        <div class="section">
            <h2>Fellows wanted dead (or alive if you want to eat them later)</h2>
        </div>
        <div class="section">
            <article></article>
            <article></article>
            <article></article>
        </div>
        <form>
            <h2>Contact us</h2>
            <input type="text" placeholder="@">
            <input type="text" placeholder="&#8962;">
            <input type="text" placeholder="I have seen one of them">
            <textarea placeholder="Your message"></textarea>
        </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>
    </div>
</html>

## style.css
.nav{
width: 100%;
color: white;
}

ul{
background-color: #424242;
padding-left: 4em;
padding-top: 1em;
padding-bottom: 0.5em;
margin-bottom: 0em;
}

li{
display: inline-block;
padding-right: 4em;
}

.carousel{
background-color: #eeeeee;
height: 10em;
}

h2{
text-align: center;
}

.section article{
height: 10em;
background-color: #eeeeee;
margin-bottom: 1em;
width: 80%;
margin-left: auto;
margin-right: auto
}

/* Desktop Styles */
@media only screen and (min-width: 961px){
.section{
text-align: center;
}

.section article{
height: 20em;
width: 20em;
background-color: #eeeeee;
display: inline-block;
margin: 0 1em;
}
}

form h2{
border-top:solid 1px;
padding-top: 1em;
}

input,textarea{
display: block;
margin-right: auto;
margin-left: auto;
width: 60%;
margin-bottom: 2em;
}

footer{
display: block;
margin-right: auto;
margin-left: auto;
width: 80%;
text-align: center;
}

a{
display: inline-block;
padding-left: auto;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name='viewport'
	content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
	<title>Find the precious!</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<div class="page">
	<body>
	<div class="nav">
	<ul>
	<li>FindThePrecious.com</li>
	<li>Fellows</li>
	<li>Contact us</li>
	</ul>
	</div>
	<div class="section">
	<div class="carousel"></div>
	</div>
	<div class="section">
	<h2>Fellows wanted dead (or alive if you want to eat them later)</h2>
	</div>
	<div class="section">
	<article></article>
	<article></article>
	<article></article>
	</div>
	<form>
	<h2>Contact us</h2>
	<input type="text" placeholder="@">
	<input type="text" placeholder="⌂">
	<input type="text" placeholder="I have seen one of them">
	<textarea placeholder="Your message"></textarea>
	</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>
	</div>
	</html>
	.nav{
	width: 100%;
	color: white;
	}

	ul{
	background-color: #424242;
	padding-left: 4em;
	padding-top: 1em;
	padding-bottom: 0.5em;
	margin-bottom: 0em;
	}

	li{
	display: inline-block;
	padding-right: 4em;
	}

	.carousel{
	background-color: #eeeeee;
	height: 10em;
	}

	h2{
	text-align: center;
	}

	.section article{
	height: 10em;
	background-color: #eeeeee;
	margin-bottom: 1em;
	width: 80%;
	margin-left: auto;
	margin-right: auto
	}

	/* Desktop Styles */
	@media only screen and (min-width: 961px){
	.section{
	text-align: center;
	}

	.section article{
	height: 20em;
	width: 20em;
	background-color: #eeeeee;
	display: inline-block;
	margin: 0 1em;
	}
	}

	form h2{
	border-top:solid 1px;
	padding-top: 1em;
	}

	input,textarea{
	display: block;
	margin-right: auto;
	margin-left: auto;
	width: 60%;
	margin-bottom: 2em;
	}

	footer{
	display: block;
	margin-right: auto;
	margin-left: auto;
	width: 80%;
	text-align: center;
	}

	a{
	display: inline-block;
	padding-left: auto;
	}