AurelieBayre/findThePrecious.html

## findThePrecious.html
<!-- purpose: reviewing how to structure a html5 page
structure your code and check it's ok by W3C validator's standards cf: https://validator.w3.org/ -->

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Find the Precious!!! Join Sauron's army! <3 <3 <3 </title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="the Ring: Find the Precious, destroy the dangerous fellowhip, protect your master Sauron. If you're a orc, a goblin or a balrog and you know it, clap your hands!">
        <meta name="keyword" content="ring, precious, sauron, fellowship, hunters, army">
    </head>
    <body>
        <nav>
            <a href="#wanted">Fellows</a>
            <a href="#">The Ring</a>
            <a href="#reward">Get my reward</a>
            <a href="#bestHu">Best hunters</a>
            <a href="#joinUs">Join the army</a>
            <a href="#contactUs">Contact us</a>
        </nav>
        <header>
            <h1>
                Dangerous fellowship try to destroy the ring
            </h1>
            <p>
                <span>
                    <a href="#">&lt;</a>
                </span>
                Orcs, Goblin, Balrogs, protect your master Sauron!
                <span>
                    <a href="#">&gt;</a>
                </span>
            </p>
        </header>
        <section id="wanted">
            <h2>
                Fellows wanted dead
            </h2>
            <p>(or alive if you want to eat them later)</p>
            <ul>
                <li><a href="#mostWanted">Most Wanted</a></li>
                <li><a href="#mostDangerous">Most dangerous</a></li>
                <li><a href="#captured">Already Captured</a></li>
            </ul>
            <div id="mostWanted">
                <img src="http://via.placeholder.com/250x210" alt="the wizard">
                <h3>
                    The Wizard
                </h3>
                <p>
                    Reward 1000 gold coins
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing.
                </p>
            </div>
            <div id="captured">
                <img src="http://via.placeholder.com/250x210" alt="a hobbit">
                <h3>
                    Hobbit #3
                </h3>
                <p>
                    Dead
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing.
                </p>
            </div>
            <div id="mostDangerous">
                <img src="http://via.placeholder.com/250x210" alt="a yummy dwarf">
                <h3>
                    Yummy Dwarf
                </h3>
                <p>
                    Reward 250 gold coins
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing.
                </p>
            </div>
        </section>
        <hr>
        <section id="reward">
            <h2>
                I have captured one of them, how to get my reward?
            </h2>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id neque a metus dapibus accumsan cursus ac magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus mattis, eros sit amet volutpat hendrerit, nunc justo varius dolor, ut fringilla orci tortor pulvinar elit. Fusce accumsan lacus in commodo feugiat.
            </p>
            <a href="#contactUS">Contact us</a>
            <img src="http://via.placeholder.com/140x140" alt="group picture of ugly orcs and goblins and balrog">
        </section>
        <hr>
        <section id="bestHunters">
            <h2>
                Best hunters
            </h2>
            <div>
                <img src="http://via.placeholder.com/70x70" alt="a dimwitted but ferocious orc">
                <h3>
                    ElvesKiller22
                </h3>
                <p>2 captures - <a href="#">Profile</a>
                </p>
                <a href="#">Like 68K</a>
            </div>
            <div>
                <img src="http://via.placeholder.com/70x70" alt="a disgusting goblin with a nasty sadistic grin">
                <h3>
                    Goblin45
                </h3>
                <p>1 capture - <a href="#">Profile</a>
                </p>
                <a href="#">Like 68K</a>
            </div>
        </section>
        <hr>
        <section id="ring">
            <h2>
                About the ring
            </h2>
            <div>
                <h3>
                    Ring Capabilities
                </h3>
                <p>
                    What can our master Sauron do with the ring?
                </p>
                <table>
                    <thead>
                        <tr>
                            <th>Feature</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Main</td>
                            <td>One ring to rule 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>
                    </tbody>
                </table>
            </div>
            <div>
                <h3>
                    Why is the ring awesome?
                </h3>
                <p>
                    My precioooooooooooussssss! Hrk Hrk, we want our preeciooooooouuusss!!<br/>
                    <span>Gollum</span>
                </p>
                <img src="http://via.placeholder.com/110x110" alt="please tell me you read these alt descriptions">
            </div>
        </section>
        <hr>
        <section id="joinUs">
            <h2>
                Join Mordor Army, we need you!
            </h2>
            <img src="http://via.placeholder.com/140x140" alt="a group picture of monsters covered in mud and blood">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id neque a metus dapibus accumsan cursus ac magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus mattis, eros sit amet volutpat hendrerit, nunc justo varius dolor, ut fringilla orci tortor pulvinar elit. Fusce accumsan lacus in commodo feugiat.
            </p>
            <a href="#">More info on SauronRulesThemAll.com</a>
        </section>
        <hr>
        <section id="contactUs">
            <h2>
                Contact us
            </h2>
            <form>
<!-- 1. j'aurais bien mis des <br/> pour passer à la ligne après chaque élément du form,
    mais une des page de la quête précisait que la balise n'est à utiliser que dans un paragraphe...

    2. j'ai préféré utilisé des labels au cas où,
    sachant a. qu'on peut les cacher par la suite,
    et b. qu'il est important pour l'accessibilité (handicaps) qu'ils soient là
    cf https://www.w3.org/WAI/tutorials/forms/labels/.
-->
                <fieldset>
                    <label for="email">Your email address</label>
                    <input id="email" type="email" name="email" placeholder="@">
                    <label for="userHomepage">Your website</label>
                    <input id="userHomepage" type="text" name="homepage" placeholder="&#127968;">
                    <label>Subject</label>
                    <select>
                        <option>I have seen one of them</option>
                        <option>I love Sauron &lt;3 &lt;3 &lt;3</option>
                        <option>Those hobbits are really filthy</option>
                        <option>I want to join the army</option>
                    </select>
                    <label for="yourMessage">Your message</label>
                    <textarea id="yourMessage" name="message" placeholder="Your message" rows="10" cols="35"></textarea>
                    <input type="submit" value="Submit">
                </fieldset>
            </form>
        </section>
        <footer>
            <ul>
                <li>
                   <a href="">About us</a>
                </li>
                <li>
                    <a href="">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="">Follo him also on twitter</a>
                </li>
            </ul>
        </footer>
    </body>
</html>
	<!-- purpose: reviewing how to structure a html5 page
	structure your code and check it's ok by W3C validator's standards cf: https://validator.w3.org/ -->

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Find the Precious!!! Join Sauron's army! <3 <3 <3 </title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="the Ring: Find the Precious, destroy the dangerous fellowhip, protect your master Sauron. If you're a orc, a goblin or a balrog and you know it, clap your hands!">
	<meta name="keyword" content="ring, precious, sauron, fellowship, hunters, army">
	</head>
	<body>
	<nav>
	<a href="#wanted">Fellows</a>
	<a href="#">The Ring</a>
	<a href="#reward">Get my reward</a>
	<a href="#bestHu">Best hunters</a>
	<a href="#joinUs">Join the army</a>
	<a href="#contactUs">Contact us</a>
	</nav>
	<header>
	<h1>
	Dangerous fellowship try to destroy the ring
	</h1>
	<p>
	<span>
	<a href="#"><</a>
	</span>
	Orcs, Goblin, Balrogs, protect your master Sauron!
	<span>
	<a href="#">></a>
	</span>
	</p>
	</header>
	<section id="wanted">
	<h2>
	Fellows wanted dead
	</h2>
	<p>(or alive if you want to eat them later)</p>
	<ul>
	<li><a href="#mostWanted">Most Wanted</a></li>
	<li><a href="#mostDangerous">Most dangerous</a></li>
	<li><a href="#captured">Already Captured</a></li>
	</ul>
	<div id="mostWanted">
	<img src="http://via.placeholder.com/250x210" alt="the wizard">
	<h3>
	The Wizard
	</h3>
	<p>
	Reward 1000 gold coins
	</p>
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing.
	</p>
	</div>
	<div id="captured">
	<img src="http://via.placeholder.com/250x210" alt="a hobbit">
	<h3>
	Hobbit #3
	</h3>
	<p>
	Dead
	</p>
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing.
	</p>
	</div>
	<div id="mostDangerous">
	<img src="http://via.placeholder.com/250x210" alt="a yummy dwarf">
	<h3>
	Yummy Dwarf
	</h3>
	<p>
	Reward 250 gold coins
	</p>
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing.
	</p>
	</div>
	</section>
	<hr>
	<section id="reward">
	<h2>
	I have captured one of them, how to get my reward?
	</h2>
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id neque a metus dapibus accumsan cursus ac magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus mattis, eros sit amet volutpat hendrerit, nunc justo varius dolor, ut fringilla orci tortor pulvinar elit. Fusce accumsan lacus in commodo feugiat.
	</p>
	<a href="#contactUS">Contact us</a>
	<img src="http://via.placeholder.com/140x140" alt="group picture of ugly orcs and goblins and balrog">
	</section>
	<hr>
	<section id="bestHunters">
	<h2>
	Best hunters
	</h2>
	<div>
	<img src="http://via.placeholder.com/70x70" alt="a dimwitted but ferocious orc">
	<h3>
	ElvesKiller22
	</h3>
	<p>2 captures - <a href="#">Profile</a>
	</p>
	<a href="#">Like 68K</a>
	</div>
	<div>
	<img src="http://via.placeholder.com/70x70" alt="a disgusting goblin with a nasty sadistic grin">
	<h3>
	Goblin45
	</h3>
	<p>1 capture - <a href="#">Profile</a>
	</p>
	<a href="#">Like 68K</a>
	</div>
	</section>
	<hr>
	<section id="ring">
	<h2>
	About the ring
	</h2>
	<div>
	<h3>
	Ring Capabilities
	</h3>
	<p>
	What can our master Sauron do with the ring?
	</p>
	<table>
	<thead>
	<tr>
	<th>Feature</th>
	<th>Description</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>Main</td>
	<td>One ring to rule 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>
	</tbody>
	</table>
	</div>
	<div>
	<h3>
	Why is the ring awesome?
	</h3>
	<p>
	My precioooooooooooussssss! Hrk Hrk, we want our preeciooooooouuusss!!<br/>
	<span>Gollum</span>
	</p>
	<img src="http://via.placeholder.com/110x110" alt="please tell me you read these alt descriptions">
	</div>
	</section>
	<hr>
	<section id="joinUs">
	<h2>
	Join Mordor Army, we need you!
	</h2>
	<img src="http://via.placeholder.com/140x140" alt="a group picture of monsters covered in mud and blood">
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id neque a metus dapibus accumsan cursus ac magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus mattis, eros sit amet volutpat hendrerit, nunc justo varius dolor, ut fringilla orci tortor pulvinar elit. Fusce accumsan lacus in commodo feugiat.
	</p>
	<a href="#">More info on SauronRulesThemAll.com</a>
	</section>
	<hr>
	<section id="contactUs">
	<h2>
	Contact us
	</h2>
	<form>
	<!-- 1. j'aurais bien mis des <br/> pour passer à la ligne après chaque élément du form,
	mais une des page de la quête précisait que la balise n'est à utiliser que dans un paragraphe...

	2. j'ai préféré utilisé des labels au cas où,
	sachant a. qu'on peut les cacher par la suite,
	et b. qu'il est important pour l'accessibilité (handicaps) qu'ils soient là
	cf https://www.w3.org/WAI/tutorials/forms/labels/.
	-->
	<fieldset>
	<label for="email">Your email address</label>
	<input id="email" type="email" name="email" placeholder="@">
	<label for="userHomepage">Your website</label>
	<input id="userHomepage" type="text" name="homepage" placeholder="🏠">
	<label>Subject</label>
	<select>
	<option>I have seen one of them</option>
	<option>I love Sauron <3 <3 <3</option>
	<option>Those hobbits are really filthy</option>
	<option>I want to join the army</option>
	</select>
	<label for="yourMessage">Your message</label>
	<textarea id="yourMessage" name="message" placeholder="Your message" rows="10" cols="35"></textarea>
	<input type="submit" value="Submit">
	</fieldset>
	</form>
	</section>
	<footer>
	<ul>
	<li>
	<a href="">About us</a>
	</li>
	<li>
	<a href="">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="">Follo him also on twitter</a>
	</li>
	</ul>
	</footer>
	</body>
	</html>