aide sauron

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Find the precious!</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
        <nav>
            <ul>
                <li>FindThePrecious.com</li>
                <li class="hover-effect">Fellows</li>
                <li>Contact us</li>
            </ul>
        </nav>
        </header>
        <main>
        <section>
            <div class="carousel"></div>
        </section>
        </main>
        <section>
            <h2 class="h2">Fellows wanted dead (or alive if you want to eat them later)</h2>
        </section>
        <section class="floating">
            <article class="article1"></article>
            <article class="article2"></article>
            <article class="article3"></article>
        </section>
        <form>
            <h2 class="contact-us">Contact us</h2>
            <p><input type="email" placeholder="@"></p>
            <p><input type="text" placeholder="&#8962;"></p>
            <p><input type="text" placeholder="I have seen one of them"></p>
            <p><textarea placeholder="Your message" class="message"></textarea></p>
        </form>
    </body>
</html>


body{
    font-family: "Source Sans Pro", serif;
    margin: 0;
    padding: 0;
}
header{
    background: rgb(73, 71, 71);
}
nav ul{
    margin: 0;
}
.hover-effect:hover{
    text-decoration: underline;
    background-color: rgba(255, 255, 255, 0.4);
}
li{
    display: inline-block;
    padding: 10px;
    width: 200px;
    background-color: rgb(73, 71, 71);
    opacity: 0.6;
}
.carousel{
    background: grey;
    display: block;
    margin-top: 0;
    width: 100%;
    height: 200px;
    clear: both;
}
.h2{
    text-align: center;
}
.center{
    text-align: center;
}
.floating{
    display: flex;
    align-items: center;
    justify-content: center;
}
.article1{
    background-color: grey;
    margin-left: 20px;
    width: 200px;
    height: 100px;
    float: left;
}
.article2{
    background-color: grey;
    margin-top: 0;
    width: 200px;
    height: 100px;
    float: left;
    margin-left: 20px;
    margin-right: 20px;
}
.article3{
    background-color: grey;
    margin-right: 20px;
    width: 200px;
    height: 100px;
    float: left;
}
form{
    text-align: center;
}
.contact-us{
    text-align: left;
    border-top: 3px solid black;
}
input{
    width: 60%;
}
p{
    display: block;
    margin: 10px;
    padding: 2px;
}
.message{
    width: 60%;
    padding: 2px;
}