FindThePrecious.html

<!DOCTYPE html>
    <html lang="en">
  <head>
    <title>findThePrecious</title>
    <meta charset="UTF-8" />
    <meta name = "author" content = "KocSibel" >

    <link rel="stylesheet" href="FindThePrecious.css" />
  </head>


 <body>

        <header>
             <h1 class="headerTitle">FindThePrecious.com</h1>
        <nav class="headerN">
                <ul>
                    <li class="section"><a href="#Fellows">Fellows</a></li>
                    <li class="section"><a href="#Contact">Contact Us</a></li>
                </ul>
            </nav>
        </header>

        <div id="carousel">
            <h2>Dangerous fellowship try to destroy the ring</h2>
            <h3>Orcs, Goblins, Balrogs, protect your master Sauron !</h3>

            <img src="https://icons-for-free.com/iconfiles/png/512/arrow+left+chevron+chevronleft+left+left+icon+icon-1320185731545502691.png" class="imgarrowleft" alt="image arrow left" height="100" width="100">
            <img src="https://icons-for-free.com/iconfiles/png/512/arrow+left+chevron+chevronleft+left+left+icon+icon-1320185731545502691.png" height="100" width="100" class="rotateimg180" alt="image arrow right" >
        </div>

    <section id="Fellows">
        <h2>Fellows wanted dead (or alive if you want to eat them later)</h2>

        <div class="fellowsContainer">

            <div class="fellowspic">
                <div class="FellowsImg">
                    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png" alt="The Wizard" height="300" width="250">
                    <p class="fellowReward">Reward 1000 gold Coins</p>
                </div>
                <h3>The Wizard</h3>
                <p>Small description...</p>
            </div>

            <div class="fellowspic">
                <div class="FellowsImg">
                    <img src="https://cdn-media.rtl.fr/cache/iuR8YwMpQZqbQwxmAZJ6Pw/880v587-0/online/image/2014/1124/7775524969_billy-boyd-interprete-le-hobbit-pippin-dans-le-seigneur-des-anneaux.jpg" alt="Hobbit" height="300" width="250">
                    <p class="fellowReward">Dead</p>
                </div>
                <h3>Hobbit #3</h3>
                <p>Small description...</p>
            </div>

            <div class="fellowspic">
                <div class="FellowsImg">
                    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png" alt="Yummy Dwarf" height="300" width="250">
                    <p class="fellowReward">Reward 250 gold Coins</p>
                </div>
                <h3>Yummy Dwarf</h3>
                <p>Small desciption...</p>
            </div>
        </div>
    </section>

    <hr>

    <section>

        <h2 id="Contact">Contact us</h2>
        <form>
            <input class="input-field" type="text" placeholder="Email" name="email"><br><br>
            <input class="input-field" type="text" placeholder="location" name="location"><br><br>
            <div class="liltxt">
                <SELECT name="nom" size="1"><OPTION selected>I have seen one of them</SELECT>
            </div>
            <p><textarea name="message" rows="10" cols="50" placeholder="Your message"></textarea></p>
            <div class="buttonSend">
                <input type="button" value="Send it!">
            </div>
        </form>

    </section>

    <footer>

        <div class="part1">
            <a>About us</a><br/><br/>
            <a>Fellows</a><br/><br/>
            <a>Join our army</a>
        </div>

        <div class="part2">
            <a>FAQ</a><br/><br/>
            <a>Reward conditions</a><br/><br/>
            <a>Legal mentions</a>
        </div>

        <div class="part3">
            <a href="#Sauron4Ever">Sauron4Ever.com</a><br/><br/>
            <a href="#FollowHim">Follow him also on twitter</a>
        </div>

    </footer>
</body>