Untitled

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>FindThePrecious.com</li>
                <li>Fellows</li>
                <li>Contact us</li>
            </ul>
        </nav>
        <section>
            <div class="carousel"></div>
        </section>
        <div class="flex-container-row">
            <section>
                <h2 class="fellows-title">Fellows wanted dead <span>(or alive if you want to eat them later)</span></h2>
            </section>
            <section class="article-section">
                <article></article>
                <article></article>
                <article></article>
            </section>
        </div>
        <form>
            <h2 class="contact-title">Contact us</h2>
            <input type="email" placeholder="@">
            <input type="text" placeholder="&#8962;">
            <input type="text" placeholder="I have seen one of them">
            <textarea placeholder="Your message"></textarea>
            <input type="submit" value="Send!">
        </form>

        <footer>

            <ul>
                <li><a href="https://www.findtheprecious.com/about">About us</a></li>
                <li><a href="https://www.findtheprecious.com/fellows">Fellows</a></li>
                <li><a href="https://www.findtheprecious.com/join">Join our army</a></li>
            </ul>

            <ul>
                <li><a href="https://www.findtheprecious.com/faq">FAQ</a></li>
                <li><a href="https://www.findtheprecious.com/rewards-conditions">Reward conditions</a></li>
                <li><a href="https://www.findtheprecious.com/legal-mentions">Legal mentions</a></li>
            </ul>

            <ul class="last-ul-footer">
                <li><a href="https://www.sauron4ever.com">Sauron4ever.com</a></li>
                <li><a href="https://www.twitter.com/sauron4ever">Follow him</a></li>
            </ul>

        </footer>

    </body>
</html>

CSS :

h2, p {
    color:#424242;
}

/* Navigation */
nav {
    background-color:#424242;
    width:100vw;
    height:30px;
}
nav ul {
    display:inline-block;
    color:#bbbbbb;
    padding-left:0px;
    margin-top:0px;
    margin-bottom:0px;
}
nav ul li {
    display:inline;
    transition:all 0.2s ease-in-out;
    padding-left:10px;
    padding-right:10px;
    line-height:30px;
    height:30px;
    position:absolute;
    top:8px;
}
nav ul li:hover {
    background-color:#bbbbbb;
    color:#424242;
}
nav ul li:nth-child(2) {
    left:168.88px;
}
nav ul li:nth-child(3) {
    left:227px;
}
nav ul li:nth-child(2), nav ul li:nth-child(3) {
    font-size:12px;
}

/* Carousel */
.carousel {
    width:100%;
    height:150px;
    background-color: #efefef;
}

/* Fellows wanted */
.fellows-title {
    text-align:center;
    margin:25px 0;
}
.fellows-title span {
    font-size:12px;
}
article {
    width:calc(33% - 11px);
    height:250px;
    display:inline-block;
    margin-left:5px;
    margin-right:5px;
    background-color:#efefef;
}

/* Contact */
form {
    width:100vw;
}
.contact-title {
    margin:25px 0;
    position:relative;
    padding-left:50px;
}
.contact-title::before {
    position:absolute;
    content:'';
    width:100%;
    height:1px;
    background-color:#424242;
    left:0;
    margin-top:-10px;
}

/* Formulaire */
input, textarea {
    display:block;
    width:80%;
    margin:10px auto;
}
textarea {
    height:100px;
}
input[type="submit"] {
    margin-left:85%;
    width:auto;
}

/* FOOTER */
footer {
    background-color:#424242;
    padding:20px 0;
    display:flex;
    position:relative;
    width:100vw;
}
footer a {
    color:white;
    text-decoration:none;
}
footer ul {
    list-style-type:none;
}
.last-ul-footer {
    display:flex;
    position:absolute;
    right:0;
    margin-right:20px;
    flex-direction:column;

}


/* RESPONSIVE DESIGN */
@media all and (max-width:960px) {
    h2.fellows-title {
        font-size:2em;
    }
    h2.fellows-title span {
        font-size:16px;
    }
    .contact-title {
        text-align:center;
    }
    .flex-container-row {
        display:flex;
        flex-direction:column;
    }
    .article-section {
        display:flex;
        flex-direction:column;
        align-items:center;
    }
    .article-section article {
        width:90%;
        margin:20px 0;
    }
    form {
        display:flex;
        flex-direction:column;
    }
    input[type="submit"] {
        margin-left:84%;
        width:auto;
    }
    footer {
        display:flex;
        flex-direction:column;
        align-items:center;
    }
    footer ul {
        text-align:center;
        margin:0;
        padding:0;
    }
    .last-ul-footer {
        display:block;
    }
}