rebSen
8/14/2018 - 10:15 AM
findtheprecious_index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>FindThePrecious.com</title>
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
</head>
<body>
<!-- titre et menu principal -->
<header>
<h1>FindThePrecious.com</h1>
<nav>
<ul>
<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>
</header>
<hr/>
<!-- partie 1 fellows -->
<section>
<!-- bandeau... -->
<h2>Dangerous fellowship try to destroy the ring</h2>
<p>Orcs, Gobelins, Balrogs, protect your master sauron</p>
<nav>
<a href=""><img src="https://via.placeholder.com/20x20/green" alt="bouton bandeau nav droite"/></a>
<a href=""><img src="https://via.placeholder.com/20x20/green" alt="bouton bandeau nav droite"/></a>
</nav>
</section>
<section>
<h2>Fellows wanted dead</h2><p>(or alive if you want to eat them later)</p>
<ul>
<li><a href="">Most Wanted</a></li>
<li><a href="">Most Dangerous</a></li>
<li><a href="">Already Captured</a></li>
</ul>
<ul>
<li>
<img src="https://via.placeholder.com/150x150" alt="lorem ipsum"/>
<img src="https://via.placeholder.com/120x20" alt="lorem ipsum"/> <!-- recompense, à faire flotter sur la grande image de profil? -->
<h3>Nom Profil 1</h3>
<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.</p>
</li>
<li>
<img src="https://via.placeholder.com/150x150" alt="lorem ipsum"/>
<p>DEAD</p> <!-- texte ou image ? -->
<h3>Nom Profil 2</h3>
<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.</p>
</li>
<li>
<img src="https://via.placeholder.com/150x150" alt="lorem ipsum"/>
<img src="https://via.placeholder.com/120x20" alt="lorem ipsum"/> <!-- recompense, à faire flotter sur la grande image de profil? -->
<h3>Nom Profil</h3>
<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.</p>
</li>
</ul>
</section>
<hr/>
<!-- partie 2 reward -->
<section>
<h2>I have capture one of them, how to get my reward ?</h2>
<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.</p>
<img src="https://via.placeholder.com/140x140" alt="lorem ipsum"/>
<a href="#contact"> Contact us</a> <!--lien à styliser en bouton-->
</section>
<hr/>
<!-- partie 3 hunters -->
<section>
<h2>Best Hunters</h2>
<ul>
<li>
<img src="https://via.placeholder.com/70x70" alt="lorem ipsum"/>
<h4>Nom Profil 1 </h4>
<p>Nombre de capture</p>
<a href="/page_profil_joueur_x">Profile</a>
<div class="fb-count"><!--O.o help ?--></div>
</li>
<li>
<img src="https://via.placeholder.com/70x70" alt="lorem ipsum"/>
<h4>Nom Profil 2</h4>
<p>Nombre de capture</p>
<a href="/page_profil_joueur_x">Profile</a>
<div class="fb-count"><!--O.o help ?--></div>
</li>
</ul>
</section>
<hr/>
<!-- partie 4 about the ring TABLEAU -->
<section>
<h2>About the ring</h2>
<article>
<h4>Ring Capabilitues</h4>
<p>What can our master Sauron do with the ring ?</p>
<table>
<tr>
<th>Feature</th>
<th>Description</th>
</tr>
<tr>
<td>Main</td>
<td>One ring to rule them all</td>
</tr>
<tr>
<td>invisibility</td>
<td>you can’t find me</td>
</tr>
<tr>
<td>power</td>
<td>Destroy the world</td>
</tr>
</table>
</article>
<article>
<h4>Why the ring is awsome</h4>
<p>What can our master Sauron do with the ring ?</p>
<img src="https://via.placeholder.com/110x110" alt="lorem ipsum"/> <!--attention l'image doit être un cercle de 110 de diametre"-->
</article>
</section>
<hr/>
<!-- partie 5 join -->
<section>
<h2>I have capture one of them, how to get my reward ?</h2>
<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.</p>
<img src="https://via.placeholder.com/140x140" alt="lorem ipsum">
<a href="http://SauronRulesThemAll.com"> More info on SauronRulesThemAll.com</a> <!--lien à styliser en bouton-->
</section>
<hr/>
<!-- partie 6 form -->
<section>
<h2 id="contact">Contact Us</h2>
<form>
<label for="e-mail"></label>
<input id="e-mail" required placeholder="@"/>
<label for="site"></label>
<input id="site" required placeholder="home"/> <!--intégrer un dessin de maison à la place du mot-->
<select id="monselect">
<option value="valeur1">Valeur 1</option>
<option value="valeur2" selected>Valeur 2</option>
<option value="valeur3">Valeur 3</option>
</select>
<label for="form-message"></label>
<textarea id="form-message" placeholder="Your message"></textarea>
<label for="submit"></label>
<input id="submit" type="submit" value="Send !" class="submit" /><!-- sur le mock il manque le bouton de soumission ? -->
</form>
</section>
<hr/>
<footer>
<a href="">About us</a>
<a href="">Fellows</a>
<a href="">Join our army</a>
<a href="">FAQ</a>
<a href="">Reward condition</a>
<a href="">Legal mention</a>
<a href="www.Sauron4Ever.com">Sauron4Ever.com</a>
Follow him also on <a href="">Twitter</a>
</footer>
</body>
</html>