findThePrecious.com

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>FindThePrecious.com</title>
</head>
<body>
    <div id="wrapper">
        <header>
            <h1>FindThePrecious.com</h1>
        </header>
        <nav>
            <ul>
                <li>
                    <a href="#fellows">Fellows</a>
                </li>
                <li>
                    <a href="#contact">Contacts</a>
                </li>
            </ul>
        </nav>
    </div>

    <div id="carousel">
        <div class="carousel-item">
            <h2>Dangerous fellowship try to destroy the ring</h2>
            <p>Orcs, goblins, Balrogs, protect your master Sauron !</p>
        </div>
        <div class="carousel-item">
            <img src="https://via.placeholder.com/140" alt="">
        </div>
        <div class="carousel-item">
            <img src="https://via.placeholder.com/140" alt="">
        </div>

        <a id="prev">&#10094;</a>
        <a id="next">&#10095;</a>
    </div>

    <section id="fellows">
        <header>
            <h2>Fellows wanted dead <small>(or alive if you want to eat them later)</small></h2>
        </header>
        <ul>
            <li>
                <div class="container">
                    <div class="reward">Reward 1000 gold coins</div>
                    <img src="https://via.placeholder.com/215x205" alt="The Wizard">
                </div>
                <h3>The Wizard</h3>
                <p>Small description</p>
            </li>
            <li>
                <div class="container">
                    <div class=dead>Dead</div>
                    <img src="https://via.placeholder.com/215x205" alt="Hobbit">
                </div>
                <h3>Hobbit #3</h3>
                <p>Small description</p>
            </li>
            <li>
                <div class="container">
                    <div class="reward">Reward 250 gold coins</div>
                    <img src="https://via.placeholder.com/215x205" alt="Yummy Dwarf">
                </div>
                <h3>Yummy Dwarf</h3>
                <p>Small description</p>
            </li>

        </ul>
    </section>
    <hr>
    <section id="contact">
        <h2>Contact us</h2>
        <form action="/sendMessage">
            <p>
                <input type="email" name="email" id="email" placeholder="&#x40;" size="32"  required>
            </p>
            <p>
                <input type="text" name="adress" id="adress" placeholder="&#x2302;" size="32" required>
            </p>
            <p>
                <select name="choice" id="choice">
                    <option value="seen">I have seen one of them</option>
                    <option value="captured">I have captured one of them</option>
                    <option value="join">I want to join the army</option>
                </select>
            </p>
            <p>
                <textarea name="message" id="message" cols="30" rows="10" placeholder="Your message" required></textarea>
            </p>
            <p>
                <button type="submit">Send !</button>
            </p>
        </form>
    </section>
    <footer>
        <ul>
            <li><a href="#">About us</a></li>
            <li><a href="#fellows">Fellows</a></li>
            <li><a href="#">Join our army</a></li>
        </ul>
        <ul>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">Reward conditions</a></li>
            <li><a href="#">Legal mentions</a></li>
        </ul>
        <ul>
            <li><a href="#">Sauron4Ever.com</a></li>
            <li><a href="#">Follow him also on twitter</a></li>
        </ul>
    </footer>
</body>
</html>