08 - CSS : Flexbox

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <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>

        <section id="fellows">
            <h2>Fellows wanted dead (or alive if you want to eat them later)</h2>
        </section>
        <section class="article">
            <article><a href="https://placeholder.com"><img src="https://via.placeholder.com/400" alt="empty"></a></article>
            <article><a href="https://placeholder.com"><img src="https://via.placeholder.com/400" alt="empty"></a></article>
            <article><a href="https://placeholder.com"><img src="https://via.placeholder.com/400" alt="empty"></a></article>
        </section>
        <hr>
        <h3>Contact us</h3>
        <form>
                <div class="placeholder">
                    <div class="email">
                        <input class="form" type="email" placeholder="@">
                   </div>
                    <div class="adress">
                        <input type="text" placeholder="&#8962;">
                    </div>
                    <div class="seen">
                        <select name="seen">
                        <option>I have seen one of them</option>
                        </select>
                    </div>
                    <div class="message">
                        <textarea placeholder="Your message"></textarea>
                    </div>
                    <div>
                        <button class="send" type="button">Send !</button>
                    </div>
                </div>
        </form>

        <footer>
            <div class="footer">
                <ol>
                    <li class="about"><a href="https://www.sauron4ever.com/Aboutus">
                     About us !
                    </a></li>
                     <li class="fellows"><a href="https://www.sauron4ever.com/Fellows/">
                    Fellows
                    </a></li>
                    <li class="army"><a href="https://www.www.sauron4ever.com/Joinourarmy/">
                    Join our army
                    </a></li>
                    <li class="faq"><a href="https://www.sauron4ever.com/FAQ">
                    FAQ
                    </a></li>
                    <li class="reward"><a href="https://www.sauron4ever.com/Rewardconditions/">
                    Reward conditions
                    </a></li>
                    <li class="legal"><a href="https://www.www.sauron4ever.com/Legalmentions/">
                    Legal mentions
                    </a></li>
                    <li class="sauron"><a href="https://www.sauron4ever.com/">
                    Sauron4ever.com
                    </a></li>
                    <li class="twitter"><a href="https://www.www.sauron4ever.com/twitter">
                    Follow him also on twitter
                    </a></li>
            </ol>
        </div>
    </footer>
</body>
</html>

------------------------------------------------------------------------------------------------------
*{
    color: #575757;
}
nav {
    background-color: #333130;
    height: 25px;
    margin-top: -16px;

}
ul{
    padding-top: 1px;
}
li {
    display: inline;
    padding: 15px;
    color: white;
}

li:hover{
    background-color: #DEDEDE;
    color: black;

}

.carousel{
    box-sizing: content-box;
    width: 100%;
    height: 200px;
    background-color: #DEDEDE;
}

section h2{
    text-align: center;
}

 .article {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }

form {
    margin: 30px;
}


.placeholder{
    display: flex;
    flex-direction: column;
    text-align:right;
}

input, textarea, select {
    width: 80%;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color:white
}

footer {
    height: 100%;
    background-color:#333130;
}


ol {
        height: 150px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
}


@media (max-width: 961px){

    section h2{
        font-size: 200%
    }
    ol {
        height: 400px;
        display: flex;
        flex-flow: column;
        text-align: center;
    }
    form{
        width: 60%;
    }

    .article {
        display: flex;
        flex-direction: column;
        align-items: center;
  }

}