loloof64 · March 29, 2018 20:04
diff --git a/index.html b/index.html
 <!doctype html>
 <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Find the precious</title>
    </head>
    <body>
        <header>
            <nav id="main_menu">
                <ul>
                    <li id="main_menu_fellows">Fellows</li>
                    <li id="main_menu_ring">The Ring</li>
                    <li id="main_menu_rewards">Get my reward</li>
                    <li id="main_menu_hunters">Best hunters</li>
                    <li id="main_menu_army">Join the army</li>
                    <li id="main_menu_contact">Contact us</li>
                </ul>
            </nav>

            <img src="./images/banner.png" alt="banner" width="140" height="140" />
        </header>

        <section>
            <h2>Fellows wanted dead</h2>
            <h4>(Or alive if you want to eat them later)</h4>

            <nav id="fellows_menu">
                <ul>
                    <li id="fellows_menu_wanted">Most wanted</li>
                    <li id="fellows_menu_dangerous">Most dangerous</li>
                    <li id="fellows_menu_captured">Already captured</li>
                </ul>
            </nav>

            <ul>
                <!-- Ici seront placées les différentes cartes des compagnons
                    carte type 1 (vivant):
                    <li>
                        <p class="reward_amount">Reward 1000 gold coins</p>
                        <img class="captured_fellow_face" width="140" height="140" src="./images/gandalf.png" />
                        <h3>The Wizard</h3>
                        <p class="reward_description">Small description ...</p>
                    </li>

                    carte type 2 (mort):
                    <li>
                        <img class="captured_fellow_face" width="140" height="140" src="./images/dead_fellow.png" />
                        <h3>Hobbit #3</h3>
                        <p class="reward_description">Small description ...</p>
                    </li>
                 -->
            </ul>
        </section>

        <section>
            <h3>I have captured one of them, how to get my rewards ?</h3>

            <p>
                <!-- Ici le lorem ipsum est à remplacer par le mode d'emploi 
                    pour l'obtention de la récompense -->
                    Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus,
                     cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur
                      abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed
                       forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos
                        sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium 
                        litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret.
            </p>

            <figure>
                <img src="./images/reward.png" alt="Rewards illustration" />
                <figcaption>A reward example illustration.</figcaption>
            </figure>

            <button>Contact Us</button>
        </section>

        <section>
            <h2>Best hunters</h2>

            <ul>
                <!-- Ici seront placées les profils des meilleurs chasseurs
                    profil type :
                    <li>
                        <img class="hunter_avatar" with="70" height="70" src="./images/red_orcal.png" />
                        <strong class="hunter_pseudo">ElvesKiller22</strong>
                        <em class="hunter_score">2 captures</em> - <a href="./profiles/red_orcal.html">Profile</a>
                        <button class="like_hunter"><img src="./images/thumb_up" /> Like 28k</button>
                    </li>
                 -->
            </ul>
        </section>

        <section>
            <h2>The Ring</h2>

            <section>
                <h3>Ring capabilities</h3>
                <p>What can the 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 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>
                    </tbody>
                </table>
            </section>

            <section>
                <h3>Why is the ring awesome ?</h3>
                <ul>
                    <!-- Cette liste contiendra les différents avis :
                        Structure type d'un élément :                        
                        <li>
                            <p class="awesome_ring_comment">This ring is so preciouuuuuuuuus !</p>
                            <em class="awesome_ring_commentator">Golum</em>
                            <img class="awesome_ring_avatar" src="./images/avatar_golum.png" width="110" height="110" />
                        </li>
                     -->
                </ul>
            </section>
        </section>

        <section>
            <h2>Join the Mordor Army, we need you !</h2>
            <p>
                <!-- Ici le lorem ipsum est à remplacer par les consignes pour rejoindre l'armée et un descriptif général -->
                    Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus,
                        cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur
                        abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed
                        forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos
                        sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium 
                        litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret.
            </p>
            <img src="./images/army_illustration.png" alt="Army illustration." />
            <button>More info on SauronRulesThemAll.com</button>
        </section>

        <section>
            <h2>Contact us</h2>
            <form>
                <table>
                    <tbody>
                        <tr>
                            <td><label for="customer_mail">Your email :</label></td>
                            <td><input type="email" id="customer_mail" /></td>
                        </tr>
                        <tr>
                            <td><label for="customer_address">Your address :</label></td>
                            <td><input type="text" id="customer_address" /></td>
                        </tr>
                        <tr>
                            <td><label for="reason">Why ?</label></td>
                            <td>
                                <select id="reason">
                                    <option>I have seen one of them</option>
                                    <option>I have captured one of them by inadvertane</option>
                                    <option>I have killed one of them by inadvertane</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td><label for="message">Message :</label></td>
                            <td>
                                <textarea id="message" cols="30" rows="5">
                                </textarea>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </section>

        <footer>
            <table>
                <tbody>
                    <tr>
                        <td><a href="./about.html">About us</a></td>
                        <td><a href="./faq.html">FAQ</a></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td><a href="./fellows.html">Fellows</a></td>
                        <td><a href="./reward_conditions.html">Reward conditions</a></td>
                        <td><a href="./sauron4ever.html">Sauron4ever.com</a></td>
                    </tr>
                    <tr>
                        <td><a href="./join_army.html">Join our army</a></td>
                        <td><a href="./legal_mentions.html">Legal mentions</a></td>
                        <td><a href="./follow_on_twitter.html">Follow him also on Twitter</a></td>
                    </tr>
                </tbody>
            </table>
        </footer>
    </body>
 </html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Find the precious</title>
	</head>
	<body>
	<header>
	<nav id="main_menu">
	<ul>
	<li id="main_menu_fellows">Fellows</li>
	<li id="main_menu_ring">The Ring</li>
	<li id="main_menu_rewards">Get my reward</li>
	<li id="main_menu_hunters">Best hunters</li>
	<li id="main_menu_army">Join the army</li>
	<li id="main_menu_contact">Contact us</li>
	</ul>
	</nav>

	<img src="./images/banner.png" alt="banner" width="140" height="140" />
	</header>

	<section>
	<h2>Fellows wanted dead</h2>
	<h4>(Or alive if you want to eat them later)</h4>

	<nav id="fellows_menu">
	<ul>
	<li id="fellows_menu_wanted">Most wanted</li>
	<li id="fellows_menu_dangerous">Most dangerous</li>
	<li id="fellows_menu_captured">Already captured</li>
	</ul>
	</nav>

	<ul>
	<!-- Ici seront placées les différentes cartes des compagnons
	carte type 1 (vivant):
	<li>
	<p class="reward_amount">Reward 1000 gold coins</p>
	<img class="captured_fellow_face" width="140" height="140" src="./images/gandalf.png" />
	<h3>The Wizard</h3>
	<p class="reward_description">Small description ...</p>
	</li>

	carte type 2 (mort):
	<li>
	<img class="captured_fellow_face" width="140" height="140" src="./images/dead_fellow.png" />
	<h3>Hobbit #3</h3>
	<p class="reward_description">Small description ...</p>
	</li>
	-->
	</ul>
	</section>

	<section>
	<h3>I have captured one of them, how to get my rewards ?</h3>

	<p>
	<!-- Ici le lorem ipsum est à remplacer par le mode d'emploi
	pour l'obtention de la récompense -->
	Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus,
	cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur
	abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed
	forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos
	sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium
	litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret.
	</p>

	<figure>
	<img src="./images/reward.png" alt="Rewards illustration" />
	<figcaption>A reward example illustration.</figcaption>
	</figure>

	<button>Contact Us</button>
	</section>

	<section>
	<h2>Best hunters</h2>

	<ul>
	<!-- Ici seront placées les profils des meilleurs chasseurs
	profil type :
	<li>
	<img class="hunter_avatar" with="70" height="70" src="./images/red_orcal.png" />
	<strong class="hunter_pseudo">ElvesKiller22</strong>
	<em class="hunter_score">2 captures</em> - <a href="./profiles/red_orcal.html">Profile</a>
	<button class="like_hunter"><img src="./images/thumb_up" /> Like 28k</button>
	</li>
	-->
	</ul>
	</section>

	<section>
	<h2>The Ring</h2>

	<section>
	<h3>Ring capabilities</h3>
	<p>What can the 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 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>
	</tbody>
	</table>
	</section>

	<section>
	<h3>Why is the ring awesome ?</h3>
	<ul>
	<!-- Cette liste contiendra les différents avis :
	Structure type d'un élément :
	<li>
	<p class="awesome_ring_comment">This ring is so preciouuuuuuuuus !</p>
	<em class="awesome_ring_commentator">Golum</em>
	<img class="awesome_ring_avatar" src="./images/avatar_golum.png" width="110" height="110" />
	</li>
	-->
	</ul>
	</section>
	</section>

	<section>
	<h2>Join the Mordor Army, we need you !</h2>
	<p>
	<!-- Ici le lorem ipsum est à remplacer par les consignes pour rejoindre l'armée et un descriptif général -->
	Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus,
	cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur
	abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed
	forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos
	sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium
	litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret.
	</p>
	<img src="./images/army_illustration.png" alt="Army illustration." />
	<button>More info on SauronRulesThemAll.com</button>
	</section>

	<section>
	<h2>Contact us</h2>
	<form>
	<table>
	<tbody>
	<tr>
	<td><label for="customer_mail">Your email :</label></td>
	<td><input type="email" id="customer_mail" /></td>
	</tr>
	<tr>
	<td><label for="customer_address">Your address :</label></td>
	<td><input type="text" id="customer_address" /></td>
	</tr>
	<tr>
	<td><label for="reason">Why ?</label></td>
	<td>
	<select id="reason">
	<option>I have seen one of them</option>
	<option>I have captured one of them by inadvertane</option>
	<option>I have killed one of them by inadvertane</option>
	</select>
	</td>
	</tr>
	<tr>
	<td><label for="message">Message :</label></td>
	<td>
	<textarea id="message" cols="30" rows="5">
	</textarea>
	</td>
	</tr>
	</tbody>
	</table>
	</form>
	</section>

	<footer>
	<table>
	<tbody>
	<tr>
	<td><a href="./about.html">About us</a></td>
	<td><a href="./faq.html">FAQ</a></td>
	<td></td>
	</tr>
	<tr>
	<td><a href="./fellows.html">Fellows</a></td>
	<td><a href="./reward_conditions.html">Reward conditions</a></td>
	<td><a href="./sauron4ever.html">Sauron4ever.com</a></td>
	</tr>
	<tr>
	<td><a href="./join_army.html">Join our army</a></td>
	<td><a href="./legal_mentions.html">Legal mentions</a></td>
	<td><a href="./follow_on_twitter.html">Follow him also on Twitter</a></td>
	</tr>
	</tbody>
	</table>
	</footer>
	</body>
	</html>