Help 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 class="hover-effect">
            <ul>
                <li>FindThePrecious.com</li>
                <li>Fellows</li>
                <li>Contact us</li>
            </ul>
        </nav>
        </header>
        <section>
            <div class="carousel"></div>
        </section>
        <section>
            <h2 class="h2">Fellows wanted dead (or alive if you want to eat them later)</h2>
        </section>
        <section>
            <article>
                <a href="https://placeholder.com/" title="the wizard, small description"><img src="https://via.placeholder.com/250"  alt="image" class="image1"></a>
                <a href="https://placeholder.com/" title="hobbit, small description"><img src="https://via.placeholder.com/250"  alt="image" class="image2"></a>
                <a href="https://placeholder.com/" title="yummy dwarf, small description"><img src="https://via.placeholder.com/250"  alt="image"></a>
            </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;
}
header{
    background: rgb(73, 71, 71);
}
.hover-effect:hover{
    text-decoration: underline;
    background-color: rgba(255, 255, 255, 0.4);
    /*opacity: 0.3;
    cursor: pointer;
    z-index: 3;*/
}
li{
    display: inline-block;
    padding: 10px;
    width: 200px;
    background-color: rgb(73, 71, 71);
    opacity: 0.6;
}
.carousel{
    background: grey;
    margin-top: 0;
    width: 100%;
    height: 200px;
}
.h2{
    text-align: center;
}
article{
    text-align: center;
}
.image1{
    width: 20%;
    margin-right: 5%;
}
.image2{
    width: 20%;
    margin-right: 5%;
}
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;
}