Skip to content

Instantly share code, notes, and snippets.

@Peregg

Peregg/findThePrecious.com

Last active February 15, 2018 11:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Peregg/acc8459df7e5f81109d24cb57f7f6837 to your computer and use it in GitHub Desktop.
Save Peregg/acc8459df7e5f81109d24cb57f7f6837 to your computer and use it in GitHub Desktop.
Download ZIP
findThePrecious
Raw
findThePrecious.com
<!DOCTYPE html>
<html lang="zxx">
<head>
<meta charset="utf-8" />
<title>FindThePrecious.com</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="#getMyReward">Get my reward</a></li>
<li><a href="#bestHunters">Best hunters</a></li>
<li><a href="#joinTheArmy">Join the army</a></li>
<li><a href="#contactUs">Contact us</a></li>
</ul>
</nav>
</header>
<section id="slideshow">
<button id="left"><img src="https://cdn4.iconfinder.com/data/icons/browser-ui-small-size-optimized-set/154/arrow-left-navigation-browser-512.png" alt="leftIcon" width="30" height="30"/></button>
<img src="http://via.placeholder.com/820x220" alt="placeholder"/>
<button id="right"><img src="https://cdn4.iconfinder.com/data/icons/browser-ui-small-size-optimized-set/154/arrow-right-navigation-browser-512.png" alt="rightIcon" width="30" height="30"/></button>
<h2>Dangerous fellowship try to destroy the ring</h2>
<p>Orcs, Goblins, Balrogs, protect your master Sauron</p>
</section>
<section id="Fellows">
<h2>Fellows wanted dead</h2>
<p>(or alive if you want to eat them later)</p>
<section class="ranks">
<ul>
<li><h3>Most wanted</h3></li>
<li><h3>Most dangerous</h3></li>
<li><h3>Already captured</h3></li>
</ul>
</section>
<section class="fellowId">
<h2>The Wizard</h2>
<img src="http://via.placeholder.com/240x200" alt="fellowsImage"/>
<div class="reward"><p>Reward 1000 gold coins</p></div>
<p>Small description...</p>
</section>
<section class="fellowId">
<h2>Hobbit #3</h2>
<img src="http://via.placeholder.com/240x200" alt="fellowsImage"/>
<div class="status"><p>DEAD</p></div>
<p>Small description...</p>
</section>
<section class="fellowId">
<h2>Yummy Dwarf</h2>
<img src="http://via.placeholder.com/240x200" alt="fellowsImage"/>
<div class="reward"><p>Reward 250 gold coins</p></div>
<p>Small description...</p>
</section>
</section>
<hr>
<section id="getMyReward">
<h2>I have captured 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<img src="http://via.placeholder.com/140x140" alt="rewardImage"/>
<button>Contact us</button>
</section>
<hr>
<section id="bestHunters">
<h2>Best hunters</h2>
<section class="huntersId">
<img src="http://via.placeholder.com/70x70" alt="huntersImage"/>
<h3>ElvesKiller22</h3>
<p>2 captures</p>
<a href="">Profile</a>
<button>Like</button>
</section>
<section class="huntersId">
<img src="http://via.placeholder.com/70x70" alt="huntersImage"/>
<h3>Goblin45</h3>
<p>1 capture</p>
<a href="">Profile</a>
<button>Like</button>
</section>
</section>
<hr>
<section id="theRing">
<h2>About the ring</h2>
<section class="container">
<h3>Ring capabilities</h3>
<table>
<caption>What can our master Sauron do with the ring ?</caption>
<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>
</section>
<section class="container">
<h3>Why the ring is so awesome ?</h3>
<img src="http://via.placeholder.com/110x110" alt="gollumAvatar"/>
<blockquote>
<p>My preciooooooussssss ! Hrk Hrk, we want our preeciooooouuusssss !!</p>
<small>Gollum</small>
</blockquote>
</section>
</section>
<hr>
<section id="joinTheArmy">
<h2>Join Mordor Army, we need you !</h2>
<img src="http://via.placeholder.com/140x140" alt="joinTheArmyImg"/>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<button id="moreInfo">More info on SauronRulesThemAll.com</button>
</section>
<hr>
<section id="contactUs">
<h2>Contact us</h2>
<form method="post" action="traitement.PHP">
<p><input type="email" name="email" placeholder="lastBalrog@moria.middle-earth" /></p>
<p><input type="text" name="adress" placeholder="51th floor, Isengard Tower" /></p>
<p>
<select name="seen">
<option value="seen">I have seen one them</option>
<option value="notSeen">Dude, if i'd seen it, I'll be the Lord of the Ring actually...</option>
</select>
</p>
<p>
<textarea name="message" placeholder="Your message"></textarea>
</p>
</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 Legal mentions</a></li>
</ul>
<a href="">Sauron4Ever.com</a>
<a href="">Follow him also on twitter</a>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment