lebowvsky/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>
        <nav>
            <ul>
                <li class="big">FindThePrecious.com</li>
                <li class="active">Fellows</li>
                <li>Contact us</li>
            </ul>
        </nav>
        <section>
            <div class="carousel"></div>
        </section>
        <section>
            <h2>wanted dead <span>(or alive if you want to eat them later)</span></h2>
        </section>
        <section class="pictures">
            <article></article>
            <article></article>
            <article></article>
        </section>
        <form>
            <h2>Contact us</h2>
            <div>
                <input class="centered" type="email" placeholder="@">
                <input class="centered" type="text" placeholder="&#8962;">
                <input class="centered" type="text" placeholder="I have seen one of them">
                <textarea class="centered" placeholder="Your message"></textarea>
            </div>
            <input class="submit" type="submit">
        </form>
        <footer>
            <div>
                <a href="#">About us</a>
                <a href="#">Fellows</a>
                <a href="#">Join our armmy</a>
                <a href="#">FAQ</a>
                <a href="#">Reward conditions</a>
                <a href="#">Legal mentions</a>
            </div>
            <div>
                <a href="#">Sauron4Ever.com</a>
                <a href="#">Follow him also on twitter</a>
            </div>
        </footer>
    </body>
</html>

## style.css
body {
    color: grey;
}

nav {
    background-color: rgb(46, 45, 45);
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgb(46, 45, 45);
}

nav ul {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
}

nav ul li {
    padding: 10px;
}

.active {
    background-color: lightgrey;
}

.big {
    font-size: 1.2rem;
}

section {
    margin-bottom: 50px;
    width: 100%;
    text-align: center;
}

.carousel {
    width: 100%;
    height: 300px;
    background-color: gainsboro;
}

section h2 {
    font-size: 1.8rem;
}

section span {
    font-size: 0.7em;
}

.pictures {
    text-align: left;
    display: flex;
    justify-content: space-evenly;
}

.pictures article {
    height: 300px;
    width: 30%;
    background-color: gainsboro;
}

form {
    border-top: 3px solid;
    display: flex;
}

footer {
    background-color: rgb(46, 45, 45);
    height: 10vh;
    display: flex;
    justify-content: space-evenly;
}

footer div:nth-child(1) {
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
}

footer div:nth-child(1) a {
    width: 50%;
}

footer div:nth-child(2) {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

footer div:nth-child(2) a {
    width: 100%;
}

footer a {
    text-decoration: none;
    color: gainsboro;
}

@media only screen and (max-width: 961px) {
    .carousel {
        display: none;
    }

    section h2 {
        font-size: 2em;
    }

    .pictures {
        display: none;
    }

    form h2 {
        text-align: center;
    }
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Find the precious!</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<nav>
	<ul>
	<li class="big">FindThePrecious.com</li>
	<li class="active">Fellows</li>
	<li>Contact us</li>
	</ul>
	</nav>
	<section>
	<div class="carousel"></div>
	</section>
	<section>
	<h2>wanted dead <span>(or alive if you want to eat them later)</span></h2>
	</section>
	<section class="pictures">
	<article></article>
	<article></article>
	<article></article>
	</section>
	<form>
	<h2>Contact us</h2>
	<div>
	<input class="centered" type="email" placeholder="@">
	<input class="centered" type="text" placeholder="⌂">
	<input class="centered" type="text" placeholder="I have seen one of them">
	<textarea class="centered" placeholder="Your message"></textarea>
	</div>
	<input class="submit" type="submit">
	</form>
	<footer>
	<div>
	<a href="#">About us</a>
	<a href="#">Fellows</a>
	<a href="#">Join our armmy</a>
	<a href="#">FAQ</a>
	<a href="#">Reward conditions</a>
	<a href="#">Legal mentions</a>
	</div>
	<div>
	<a href="#">Sauron4Ever.com</a>
	<a href="#">Follow him also on twitter</a>
	</div>
	</footer>
	</body>
	</html>
	body {
	color: grey;
	}

	nav {
	background-color: rgb(46, 45, 45);
	width: 100%;
	box-sizing: border-box;
	border: 1px solid rgb(46, 45, 45);
	}

	nav ul {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: flex;
	}

	nav ul li {
	padding: 10px;
	}

	.active {
	background-color: lightgrey;
	}

	.big {
	font-size: 1.2rem;
	}

	section {
	margin-bottom: 50px;
	width: 100%;
	text-align: center;
	}

	.carousel {
	width: 100%;
	height: 300px;
	background-color: gainsboro;
	}

	section h2 {
	font-size: 1.8rem;
	}

	section span {
	font-size: 0.7em;
	}

	.pictures {
	text-align: left;
	display: flex;
	justify-content: space-evenly;
	}

	.pictures article {
	height: 300px;
	width: 30%;
	background-color: gainsboro;
	}

	form {
	border-top: 3px solid;
	display: flex;
	}

	footer {
	background-color: rgb(46, 45, 45);
	height: 10vh;
	display: flex;
	justify-content: space-evenly;
	}

	footer div:nth-child(1) {
	display: flex;
	flex-wrap: wrap;
	align-content: space-around;
	}

	footer div:nth-child(1) a {
	width: 50%;
	}

	footer div:nth-child(2) {
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	}

	footer div:nth-child(2) a {
	width: 100%;
	}

	footer a {
	text-decoration: none;
	color: gainsboro;
	}

	@media only screen and (max-width: 961px) {
	.carousel {
	display: none;
	}

	section h2 {
	font-size: 2em;
	}

	.pictures {
	display: none;
	}

	form h2 {
	text-align: center;
	}
	}