JulieGcql
8/29/2018 - 4:27 PM
findThePrecious.com
findThePrecious.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Find The Precious</title>
</head>
<body>
<header>
<h1>FindThePrecious.com</h1>
<nav>
<ul>
<li><a href="#fellows">Fellows</a></li>
<li><a href="#thering">The Ring</a></li>
<li><a href="#thereward">Get my reward</a></li>
<li><a href="#hunters">Best hunters</a></li>
<li><a href="#joinarmy">Join the army</a></li>
<li><a href="#contact">Contact us</a></li>
</ul>
</nav>
</header>
<div id="banniere">
<a href="https://placeholder.com"><img src="http://via.placeholder.com/140x140" alt="banniere"></a>
<h2>Dangerous fellowship try to destroy the ring</h2>
<h3>Orcs, Goblins, Balrogs, protect your master Sauron</h3>
</div>
<section id="fellows">
<h2>Fellows wanted dead</h2>
<h3>(or alive if you want to eat them later)</h3>
<div id="fellowslist">
<ul>
<li><a href="">Most Wanted</a></li>
<li><a href="">Most Dangerous</a></li>
<li><a href="">Already Captured</a></li>
</ul>
</div>
<div id="wanted">
<div class="fellow-wanted">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/140x140" alt="fellows"></a>
<h3>The Wizard</h3>
<p>Small description...</p>
</div>
<div class="fellow-wanted">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/140x140" alt="fellows"></a>
<h3>Hobit #3</h3>
<p>Small description...</p>
</div>
<div class="fellow-wanted">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/140x140" alt="fellows"></a>
<h3>Yummy Dwarf</h3>
<p>Small description...</p>
</div>
</div>
</section>
<hr/>
<section id="thereward">
<h2>I have captured one of them, how to get my reward ?</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.
</p>
<a href="https://placeholder.com"><img src="http://via.placeholder.com/140x140" alt="reward"></a>
<button>Contact us</button>
</section>
<hr/>
<section id="hunters">
<h2>Best hunters</h2>
<div class="best-hunters">
<a href="https://placeholder.com"><img src="http://via.placeholder.com/70x70" alt="img"></a>
<h3>ElvesKiller22</h3>
<p>2 captures</p>
<p><a href="">Profile</a></p>
<button>Like 68k</button>
</div>
<div class="best-hunters">
<a href="https://placeholder.com"><img src="http://via.placeholder.com/70x70" alt="img"></a>
<h3>Goblin45</h3>
<p>2 captures</p>
<p><a href="">Profile</a></p>
<button>Like 68k</button>
</div>
</section>
<hr/>
<section id="thering">
<h2>About the ring</h2>
<div class="ring-cap">
<h3>Ring capabilities</h3>
<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 see me</td>
</tr>
<tr>
<td>Power</td>
<td>Destroy the world</td>
</tr>
</table>
</div>
<div class="ring-cap">
<h3>Why the ring is awesome ?</h3>
<p>My preciooooooooussssss ! Hrk Hrk, we want our preecioooooooouuuusss !!</p>
<p>Gollum</p>
<a href="https://placeholder.com"><img src="http://via.placeholder.com/110x110" alt="ring"></a>
</div>
</section>
<hr/>
<section id="joinarmy">
<h2>Join Mordor Army, we need you !</h2>
<a href="https://placeholder.com"><img src="http://via.placeholder.com/140x140" alt="Mordor"></a>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.
Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat
</p>
<button>More info on SauronRulesThemAll.com</button>
</section>
<hr/>
<section id="contact">
<h2>Contact us</h2>
<form method="post" action="traitement.php">
<input type="email" name="email" value="@"/>
<input type="text" name="home">
<select name="subject" id="subject">
<option value="see">I have seen one of them</option>
<option value="capture">I have captured one of them</option>
<option value="join">I want to join your army</option>
</select>
<textarea name="message" placeholder="Your message" rows="10" cols="50"></textarea>
</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>
<li><a href="">FAQ</a></li>
<li><a href="">Reward conditions</a></li>
<li><a href="">Legal mentions</a></li>
</ul>
</footer>
</body>
</html>