muriel1995
1/15/2019 - 3:14 PM
FindThePrecious
FindThePrecious
<!doctype html>
<html lang="fr">
<!--------- uniquement codage html ----------->
<head>
<meta charset="utf-8">
<title>FindThePrecious.com</title>
</head>
<body>
<header>
<img src="logo.png" alt="logo du site" title="mon logo">
<h1>FindThePrecious.com</h1>
<nav>
<a href="#Fellows">Fellows</a>/<a href="#The Ring">The Ring</a>/<a href="#Get My Reward">Get My Reward</a>/<a href="#Best Hunters">Best Hunters</a>/<a href="#Join the Army">Join The Army</a>/<a href="#Contact us">Contact Us</a>
</nav>
<!-- le logo, titre et menu seront mis en forme par css notamment possibilité rajout ul ou ol au nav---->
</header>
<section>
<h1 id="Fellows">Fellows wanted dead (or alive if you want to eat them later)</h1>
<nav>
<a href="#Most Wanted">Most Wanted</a>
<a href="#Most Dansgerous">Most Dangerous</a>
<a href="#Already Captured">Already Captured</a>
</nav>
<img id= "Most Wanted" src="https://via.placeholder.com/400" alt="photo">
<img id= "Most Dangerous" src="https://via.placeholder.com/400" alt="photo">
<img id= "Already Captured" src="https://via.placeholder.com/400" alt="photo">
</section>
<section>
<h1 id="Get My Reward">I have captured one of them, how to get my reward ?</h1>
<p>Altera sententia est, quae definit amicitiam paribus officiis ac voluntatibus. Hoc quidem est nimis exigue et exiliter ad calculos vocare amicitiam, ut par sit ratio acceptorum et datorum. Divitior mihi et affluentior videtur esse vera amicitia nec observare restricte, ne plus reddat quam acceperit; neque enim verendum est, ne quid excidat, aut ne quid in terram defluat, aut ne plus aequo quid in amicitiam congeratur.</p>
<div><button><a href="#Contact us" target="_left">Contact us</a></button></div>
<img src="https://via.placeholder.com/300" alt="photo">
</section>
<section>
<h1 id="Best Hunters">Best hunters</h1>
<img src="https://via.placeholder.com/300" alt="photo">
<img src="https://via.placeholder.com/300" alt="photo">
</section>
<section>
<h1 id="The Ring">About the ring</h1>
<h2>Ring capabilities</h2>
<p>Prudens et dives Caesaribus tamquam liberis suis regenda</p>
<table>
<tr>
<td>Feature</td>
<td>Description</td>
</tr>
<tr>
<td>Main</td>
<td>One ring to rules them all</td>
<tr>
<td>Invisibility</td>
<td>You can't see me</td>
<tr>
<td>Power</td>
<td>destroy the world</td>
</tr>
</table>
<h2>Why the ring is awesome</h2>
<p>leges fundamenta libertatis et retinacula sempiterna velut frugi parens</p>
<p>Gollum</p>
<img src="https://via.placeholder.com/150" alt="photo">
</section>
<section>
<h1 id="Join the Army">Join Mordor Army, we need you !</h1>
<p>Altera sententia est, quae definit amicitiam paribus officiis ac voluntatibus. Hoc quidem est nimis exigue et exiliter ad calculos vocare amicitiam, ut par sit ratio acceptorum et datorum. Divitior mihi et affluentior videtur esse vera amicitia nec observare restricte, ne plus reddat quam acceperit; neque enim verendum est, ne quid excidat, aut ne quid in terram defluat, aut ne plus aequo quid in amicitiam congeratur.</p>
<div><button><a href="More info on SauronRulesThemAll.com" target="_blank"></a>More info on SauronRulesThemAll.com</button></div>
<img src="https://via.placeholder.com/150" alt="photo">
</section>
<section>
<h1 id="Contact us">Contact us</h1>
<form action="/action_page.php">logo adresse e-mail:<input type="text" value=""><br>
logo adresse <input type="text" value="">
<p>Lorem ipsum dolor</p>
Lorem ipsum<input type="test" value="">
</input>
</form>
</section>
</body>
<footer>
<ul>
<li>Fellows</li>
<li>The Ring</li>
<li>Get My Reward</li>
<li>Best hunters</li>
<li>Join The Army</li>
<li>Contact us</li>
</ul>
<p>Sauron4ever.com</p>
<p>Follow him also on twitter</p>
</footer>
</html>