Fabien-V/FindThePrecious.html

## FindThePrecious.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="futur_fichier_css.css" />
    <title>FindThePrecious</title>
</head>

<body>
    <header>
        <div>
            <nav>
                <ul>
                    <li><a href="#">FindThePrecious.com</a></li>
                    <li><a href="#">Fellows</a></li>
                    <li><a href="#">The ring</a></li>
                    <li><a href="#">Get my reward</a></li>
                    <li><a href="#">Best hunters</a></li>
                    <li><a href="#">Join the Army</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </nav>
        </div>
        <img src="https://via.placeholder.com/140" alt="">
        <p>Dangerous fellowship try to destroy the ring</p>
    </header>

    <section>
        <h1>Fellows wanted dead (or alive if you want to eat them later)</h1>
        <aside>
            <img src="https://via.placeholder.com/160" alt="The Wizard">
            <p>The Wizard</p>
            <p>Reward 1000 gold coins</p>
            <p>Small description</p>
        </aside>

        <aside>
            <img src="https://via.placeholder.com/160" alt="Hobbit">
            <p>Hobbit#3</p>
            <p>DEAD</p>
            <p>Small description</p>
        </aside>

        <aside>
            <img src="https://via.placeholder.com/160" alt="Dwarf">
            <p>Yummy Dwarf</p>
            <p>Reward 250 gold coins</p>
            <p>Small description</p>
        </aside>


    </section>


        <article>
            <h1>I have captured one of them, how to get my reward ?</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </article>
        <aside>
            <img src="https://via.placeholder.com/140" alt="">

        </aside>


    <section>
        <h1>Best hunters</h1>
        <h3>ElvesKiller22</h3>
        <img src="https://via.placeholder.com/70" alt="">
        <p>2 captures - <a href="">Profile</a> <a href="">Like 68k</a>
            <h3>Goblin45</h3>
            <img src="https://via.placeholder.com/70" alt="">
            <p>1 capture - <a href="">Profile</a> <a href="">Like 68k</a>
    </section>


        <article>
            <h2>About the ring</h2>
            <h3>Ring capabilities</h3>

            <table>
                <tr>
                    <th>Feature</th>
                    <th>Description</th>
                </tr>
                <tr>
                    <td>Main</td>
                    <td>One ring to rules them all</td>
                </tr>
                <tr>
                    <td>Invisibility</td>
                    <td>You can't see me</td>
                </tr>
                <tr>
                    <td>Power</td>
                    <td>Destroy the world</td>
                </tr>
            </table>

        </article>
    <section>
        <h2>Why the ring is so awesome ?</h2>
        <p>My preciiiouuuuuus ! Hrk Hrk, we want our preciiiiouuussssss !!</p>
        <img src="https://via.placeholder.com/110" alt="">


    </section>

    <section>
        <h1>Join Mordor Army, we need you !</h1>
        <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga</p>
        <img src="https://via.placeholder.com/140" alt="">
        <p>More info on SauronRulesThemAll.com</p>
    </section>

    <section>
        <h2>Contact US</h2>
        <form action="#" method="post">

            <label for="email">
                <input id="email" type="email" placeholder="@">
            </label>

            <label for="adress">
                <input id="adress" type="text" placeholder="">
            </label>

            <select name="reward">
                <option value="reward1">I have seen one of them</option>
                <option value="reward2">Temporibus autem quibusdam</option>
            </select>


            <label for="message">
                <textarea id="message" placeholder="Your message" rows="10" cols="50"></textarea>
            </label>
        </form>
    </section>


    <footer>

        <div>
            <ul>
                <li><a href="#about_us">About us</a></li>
                <li><a href="#fellows">Fellows</a></li>
                <li><a href="#join_our_army">Join our army</a></li>
            </ul>
        </div>

        <div>
            <ul>
                <li><a href="#faq">FAQ</a></li>
                <li><a href="#reward_conditions">Reward conditions</a></li>
                <li><a href="#legal_mentions">Legal mentions</a></li>
            </ul>
        </div>

        <div>
            <ul>
                <li><a href="#sauron4ever">Sauron4Ever.com</a></li>
                <li><a href="#twitter">Follow him also on twitter</a></li>
            </ul>
        </div>


    </footer>

</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="futur_fichier_css.css" />
	<title>FindThePrecious</title>
	</head>

	<body>
	<header>
	<div>
	<nav>
	<ul>
	<li><a href="#">FindThePrecious.com</a></li>
	<li><a href="#">Fellows</a></li>
	<li><a href="#">The ring</a></li>
	<li><a href="#">Get my reward</a></li>
	<li><a href="#">Best hunters</a></li>
	<li><a href="#">Join the Army</a></li>
	<li><a href="#">Contact Us</a></li>
	</ul>
	</nav>
	</div>
	<img src="https://via.placeholder.com/140" alt="">
	<p>Dangerous fellowship try to destroy the ring</p>
	</header>

	<section>
	<h1>Fellows wanted dead (or alive if you want to eat them later)</h1>
	<aside>
	<img src="https://via.placeholder.com/160" alt="The Wizard">
	<p>The Wizard</p>
	<p>Reward 1000 gold coins</p>
	<p>Small description</p>
	</aside>

	<aside>
	<img src="https://via.placeholder.com/160" alt="Hobbit">
	<p>Hobbit#3</p>
	<p>DEAD</p>
	<p>Small description</p>
	</aside>

	<aside>
	<img src="https://via.placeholder.com/160" alt="Dwarf">
	<p>Yummy Dwarf</p>
	<p>Reward 250 gold coins</p>
	<p>Small description</p>
	</aside>


	</section>


	<article>
	<h1>I have captured one of them, how to get my reward ?</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
	</article>
	<aside>
	<img src="https://via.placeholder.com/140" alt="">

	</aside>


	<section>
	<h1>Best hunters</h1>
	<h3>ElvesKiller22</h3>
	<img src="https://via.placeholder.com/70" alt="">
	<p>2 captures - <a href="">Profile</a> <a href="">Like 68k</a>
	<h3>Goblin45</h3>
	<img src="https://via.placeholder.com/70" alt="">
	<p>1 capture - <a href="">Profile</a> <a href="">Like 68k</a>
	</section>


	<article>
	<h2>About the ring</h2>
	<h3>Ring capabilities</h3>

	<table>
	<tr>
	<th>Feature</th>
	<th>Description</th>
	</tr>
	<tr>
	<td>Main</td>
	<td>One ring to rules them all</td>
	</tr>
	<tr>
	<td>Invisibility</td>
	<td>You can't see me</td>
	</tr>
	<tr>
	<td>Power</td>
	<td>Destroy the world</td>
	</tr>
	</table>

	</article>
	<section>
	<h2>Why the ring is so awesome ?</h2>
	<p>My preciiiouuuuuus ! Hrk Hrk, we want our preciiiiouuussssss !!</p>
	<img src="https://via.placeholder.com/110" alt="">


	</section>

	<section>
	<h1>Join Mordor Army, we need you !</h1>
	<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga</p>
	<img src="https://via.placeholder.com/140" alt="">
	<p>More info on SauronRulesThemAll.com</p>
	</section>

	<section>
	<h2>Contact US</h2>
	<form action="#" method="post">

	<label for="email">
	<input id="email" type="email" placeholder="@">
	</label>

	<label for="adress">
	<input id="adress" type="text" placeholder="">
	</label>

	<select name="reward">
	<option value="reward1">I have seen one of them</option>
	<option value="reward2">Temporibus autem quibusdam</option>
	</select>


	<label for="message">
	<textarea id="message" placeholder="Your message" rows="10" cols="50"></textarea>
	</label>
	</form>
	</section>



	<footer>

	<div>
	<ul>
	<li><a href="#about_us">About us</a></li>
	<li><a href="#fellows">Fellows</a></li>
	<li><a href="#join_our_army">Join our army</a></li>
	</ul>
	</div>

	<div>
	<ul>
	<li><a href="#faq">FAQ</a></li>
	<li><a href="#reward_conditions">Reward conditions</a></li>
	<li><a href="#legal_mentions">Legal mentions</a></li>
	</ul>
	</div>

	<div>
	<ul>
	<li><a href="#sauron4ever">Sauron4Ever.com</a></li>
	<li><a href="#twitter">Follow him also on twitter</a></li>
	</ul>
	</div>



	</footer>

	</body>

	</html>