findtheprecious4

<!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">
                <img class="fellowship-picture"
                src="http://via.placeholder.com/140.jpg"
                alt="fellowship pictures">

            </div>
        </section>
        <section>
          <h2>Fellows wanted dead <span>(or alive if you want to eat them later)</span></h2>
        </section>
        <section>

                <article>
                    <img class="wizard-pict"
                    src="https://via.placeholder.com/45x60.png"
                    alt="wizard picture an Fellows wanted">
                </article>
                <article>
                    <img class="wizard-pict"
                    src="https://via.placeholder.com/45x60.png"
                    alt="wizard picture an Fellows wanted">
                </article>
                <article>
                    <img class="wizard-pict"
                    src="https://via.placeholder.com/45x60.png"
                    alt="wizard picture an Fellows wanted">
                </article>

        </section>
        <hr>
        <form>
            <h2>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>
        </form>
    </body>
</html>


html {
    box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}
ul {

    padding: 0px;
    margin: 0px;
    list-style: none;
    background-color: black;
    color: grey;
}

li {
    padding: 5px;
    display: inline-block;

}
li:nth-of-type(2) {
    background-color: lightgray
}

.fellowship-picture {
    width: 100%;
    height: 140px;

}
article {
    display:inline-block;
    margin: 0;
    width: 33%;
}
section h2 {
    text-align: center;
    margin-top: 5%;
    margin-bottom: 5%;
}

section:nth-of-type(3) {
    width: 100%;
}
hr {
    margin-top: 10%;
}
article img {
    width: 100%;
    height: 200px;

}
h2 {
    margin-top: 5px;
    text-align: left;
}
input {
    display: block;
    width: 80%;
    margin: 2%  10%;
}
textarea {
    display: block;
    width: 80%;
    margin: 2%  10%;
    height: 140px ;
}
span {
    font-size: 0.5em;
}