Skip to content

Instantly share code, notes, and snippets.

@JonesCharly
Created February 15, 2019 19:26
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 JonesCharly/9a3094a319bd48c35491372c136b351e to your computer and use it in GitHub Desktop.
Save JonesCharly/9a3094a319bd48c35491372c136b351e to your computer and use it in GitHub Desktop.
Findtheprecious html 2.0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="ftpcss.css">
<title>Findtheprecious</title>
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,400i,700,800" rel="stylesheet">
</head>
<body>
<header>
<nav class="menu">
<h1>FindThePrecious.com</h1>
<ul>
<li><a href="#fellows">Fellows </a></li>
<li><a href="#aboutring">The Ring</a></li>
<li><a href="#reward">Get my reward</a></li>
<li><a href="#besthunters">Best hunters</a></li>
<li><a href="#Join">Join the army</a></li>
<li><a href="#contactus">Contact us</a></li>
</ul>
</nav>
<div class="banner1">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/1400x140" alt="placeholder"></a>
<h2>Dangerous fellowship try to destroy the ring</h2>
<p>Orcs, Goblins, Balrogs, protect your master Sauron !</p>
</div>
</header>
<section>
<div class="sec1">
<h2 id="fellows"> Fellows wanted dead</h2>
<p>(or alive if you want to eat them later)</p>
</div>
<ul class="sec2">
<li>Most wanted</li>
<li>Most dangerous</li>
<li>Already captured</li>
</ul>
<div class="blockfellows">
<div class="fellows1">
<a href="https://image.noelshack.com/fichiers/2019/07/4/1550159467-integration-gandalf.png"><img src="https://image.noelshack.com/fichiers/2019/07/4/1550159467-integration-gandalf.png" alt="placeholder"></a>
<p class="part">Reward <mark>1000</mark> gold coins</p>
<h6>Gandalf</h6>
<h3>The Wizard</h3>
<p class="des">small description...</p>
</div>
<div class="fellows2">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/500x572" alt="placeholder"></a>
<p class="part2">Dead</p>
<h3>Hobbit #3</h3>
<p class="des2">small description...</p>
</div>
<div class="fellows1">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/500x572" alt="placeholder"></a>
<p class="part">Reward <mark>250</mark> <br/> gold coins</p>
<h6>Dwarf</h6>
<h3>Yummy Dwarf</h3>
<p class="des">small description...</p>
</div>
</div>
</section>
<hr>
<section>
<div class="rew1">
<h2 id="reward">I have captured one of them, how to get my reward?</h2>
<div class="rew2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum, sem eu sagittis interdum, lacus lectus rhoncus erat, a placerat nibh lorem et lectus. Proin ultrices nunc id rutrum elementum. Nam porttitor dignissim ullamcorper. Duis tempor hendrerit nisl, sit amet venenatis massa. Suspendisse potenti. Nam tempor viverra est at bibendum. Sed ut urna tincidunt, fringilla neque nec, commodo purus. Morbi vehicula est non quam elementum maximus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut tempus lectus in quam tempus, sed faucibus eros placerat. Curabitur placerat accumsan libero et porta. Nam eleifend congue mauris id auctor.</p>
<a href="https://placeholder.com"><img src="https://via.placeholder.com/140x140" alt="placeholder"></a>
</div>
</div>
<p class="cont"><a href="#contactus">Contact us</a></p>
</section>
<hr>
<section>
<h2 id="besthunters">Best Hunters</h2>
<div class="hunters">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/70x70" alt="placeholder"></a>
<div class="sechunters">
<h4>ElvesKiller22</h4>
<p>2 captures - <a href="..">Profile</a></p>
<a href="https://placeholder.com"><img src="https://via.placeholder.com/60x20" alt="placeholder"></a>
</div>
<a href="https://placeholder.com"><img src="https://via.placeholder.com/70x70" alt="placeholder"></a>
<div class="sechunters">
<h4>Goblin45</h4>
<p>1 captures - <a href="..">Profile</a></p>
<a href="https://placeholder.com"><img src="https://via.placeholder.com/60x20" alt="placeholder"></a>
</div>
</div>
</section>
<hr>
<section>
<h2 id="aboutring">About the ring</h2>
<div class="ring">
<h5>Ring Capabilities</h5>
<table>
<caption> What can our master Sauron do with the ring ?</caption>
<tr>
<th>Feature</th>
<th>Description</th>
</tr>
<tr >
<td class="grey">Main</td>
<td class="grey">One ring to rules them all</td>
</tr>
<tr>
<td>Invisibility</td>
<td>You can't see me</td>
</tr>
<tr>
<td class="grey">Power</td>
<td class="grey">Destroy the world</td>
</tr>
</table>
</div>
<div class="ring">
<h5>Why the ring is awesome?</h5>
<div class="ring2">
<p> MY preciooooooooouuuussss! Hrk Hrk, we want our preciiiiiooooous !!
<br/> <em>Gollum</em></p>
<a href="https://placeholder.com"><img src="https://via.placeholder.com/110x110" alt="placeholder"></a>
</div>
</div>
</section>
<hr>
<section>
<h2 id="Join">Join Mordor Army, we need you!</h2>
<div class="army">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/140x140" alt="placeholder"></a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum, sem eu sagittis interdum, lacus lectus rhoncus erat, a placerat nibh lorem et lectus. Proin ultrices nunc id rutrum elementum. Nam porttitor dignissim ullamcorper. Duis tempor hendrerit nisl, sit amet venenatis massa. Suspendisse potenti. Nam tempor viverra est at bibendum. Sed ut urna tincidunt, fringilla neque nec, commodo purus. Morbi vehicula est non quam elementum maximus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut tempus lectus in quam tempus, sed faucibus eros placerat. Curabitur placerat accumsan libero et porta. Nam eleifend congue mauris id auctor.</p>
</div>
<p class="button">More info on SauronRulesThemAll.com</p>
</section>
<hr>
<section>
<h2 id="contactus">Contact us</h2>
<div class="Contact">
<form method="post">
<p><input type="email" name="mail" placeholder="@"></p>
<p><input type="text" name="region"></p>
<!--<p><input type="text" name="textarea">-->
<!--<label id="seeone" for="seeone"></label>-->
<select name="seeone">
<option value="seeone">I have seen one of them</option>
<option value="sauron">Sauron</option>
<option value="Orcs">Orcs</option>
<option value="Hobbit">Hobbit</option>
<option value="wizzard">Wizzard</option>
</select>
</p>
<p><textarea name="yourmessage" id="message" placeholder="Your text here"></textarea></p>
</form>
</div>
</section>
<footer>
<div class="foot">
<ul>
<li>About us</li>
<li><a href="#fellows">Fellows</a></li>
<li><a href="#Join">Join our army</a></li>
</ul>
<ul>
<li>FAQ</li>
<li><a href="#reward">Reward conditions</a></li>
<li>Legal mentions</li>
</ul>
<p>Sauron4Ever.com </br>
Follow him also on twitter</p>
</div>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment