Skip to content

Instantly share code, notes, and snippets.

@vigi3

vigi3/FindThePrecious.html

Created August 20, 2018 17:30
Show Gist options
  • Save vigi3/f979c29651cc0292c5ae5aa22b43a478 to your computer and use it in GitHub Desktop.
Save vigi3/f979c29651cc0292c5ae5aa22b43a478 to your computer and use it in GitHub Desktop.
Download ZIP
Code html
Raw
FindThePrecious.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>FindThePrecious</title>
</head>
<body>
<header>
<h1>FindThePrecious.com</h1>
<ul>
<!--Je transfomerais la liste via CSS-->
<li>Fellows</li>
<li>The Ring</li>
<li>Get my reward</li>
<li>Best hunter</li>
<li>Join the army</li>
<li>Contact us</li>
</ul>
</header>
<section>
<header>
<img src="https://via.placeholder.com/140x140" alt="banniere">
<h2>Dangerous fellowship try to destroy the ring</h2>
<h3>Orcs, Goblins, Balrogs, protect your master Sauron !</h3>
</header>
<div id="Conteneur">
<article>
<h3>Fellows wanted dead</h3>
<p>(or alive if you want to eat them later)</p>
<ul>
<li>Most wanted</li>
<li>Most dangerous</li>
<li>Already captured</li>
</ul>
</article>
<div class="Portrait">
<img src="https://via.placeholder.com/140x140" alt="portrait">
<img src="https://via.placeholder.com/140x140" alt="portrait">
<img src="https://via.placeholder.com/140x140" alt="portrait">
<p>The wizard</p>
<p>Hobbit #3</p>
<p>Yummy Dwarf</p>
</div>
<article>
<h3>I have captured one of them, how to get my reward ?</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc maximus, nulla ut commodo sagittis, sapien dui mattis dui, non pulvinar lorem felis nec erat. Aliquam egestas, velit at condimentum placerat, sem sapien laoreet mauris, dictum porttitor lacus est nec enim. Vivamus feugiat elit lorem, eu porttitor ante ultrices id. Phasellus suscipit tellus ante, nec dignissim elit imperdiet nec. Nullam fringilla feugiat nisl. Ut pretium, metus venenatis dictum viverra, dui metus finibus enim, ac rhoncus sem lorem vitae mauris. Suspendisse ut venenatis libero. Suspendisse lorem felis, pretium in maximus id, tempor non ipsum</p>
<img src="https://via.placeholder.com/140x140" alt="portrait1">
<p id="Contact_us">Contact us</p>
</article>
<article>
<h3>Best hunters</h3>
<img src="https://via.placeholder.com/70x70" alt="portrait_hunter">
<img src="https://via.placeholder.com/70x70" alt="portrait_hunter2">
<p>ElvesKiller22<br />
2 captures - <strong>Profile</strong></p>
<img src="https://image.noelshack.com/fichiers/2018/34/1/1534780626-d15e2514740318a6264718a4e43706868.png" alt="like">
<p>Goblin45<br />
1 capture - <strong>Profile</strong></p>
<img src="https://image.noelshack.com/fichiers/2018/34/1/1534780626-d15e2514740318a6264718a4e43706868.png" alt="like2">
</article>
<article>
<div class="Ring_capabilities">
<h4>Ring Capabilities</h4>
<table>
<caption>What can our master Sauron do with the ring ?</caption>
<tr>
<th>Features</th>
<th>Descrition</th>
</tr>
<tr>
<td>Main</td>
<td>One ring to 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>
</table>
</div>
<div class="Why the ring">
<h4>Why the ring is awesome</h4>
<p>My preciooooooussssss ! Hrk Hrk, we want our preeciooooouuusssss !! </p>
<p>Gollum</p>
<img src="https://via.placeholder.com/110x110" alt="tete">
</div>
</article>
<article>
<h4>Join Mordor Army, we need you !</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc maximus, nulla ut commodo sagittis, sapien dui mattis dui, non pulvinar lorem felis nec erat. Aliquam egestas, velit at condimentum placerat, sem sapien laoreet mauris, dictum porttitor lacus est nec enim. Vivamus feugiat elit lorem, eu porttitor ante ultrices id. Phasellus suscipit tellus ante, nec dignissim elit imperdiet nec. Nullam fringilla feugiat nisl. Ut pretium, metus venenatis dictum viverra, dui metus finibus enim, ac rhoncus sem lorem vitae mauris. Suspendisse ut venenatis libero. Suspendisse lorem felis, pretium in maximus id, tempor non ipsum</p>
<p>More info on SauronRulesThemAll.com</p>
<img src="https://via.placeholder.com/140x140" alt="tete2">
</article>
<article>
<h4>Contact us</h4>
<form>
<input type="text" name="mail" id="mail" value="@">
<input type="text" name="address" id="address">
<textarea name="message" id="message"></textarea>
</form>
</article>
</div>
</section>
<footer>
<p>About us</p>
<p>Fellows</p>
<p>Join our army</p>
<p>FAQ</p>
<p>Reward conditions</p>
<p>Legal mentions</p>
<p><strong>Sauron4Ever.com</strong></p>
<p><strong>Follow him also on twitter</strong></p>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment