Skip to content

Instantly share code, notes, and snippets.

@juliendcode

juliendcode/findthepreciousv1.html

Created August 24, 2018 21:05
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 juliendcode/fc7c37e4561af0e9f6963e7b6f44f66e to your computer and use it in GitHub Desktop.
Save juliendcode/fc7c37e4561af0e9f6963e7b6f44f66e to your computer and use it in GitHub Desktop.
Download ZIP
Structure html5 findtheprecious.com
Raw
findthepreciousv1.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>findThePrecious.com</title>
</head>
<body>
<header>
<!--=====Menu Section=====-->
<h1>findThePrecious.com</h1>
<nav>
<a href="/Fellows">Fellows</a>
<a href="/Thering">The Ring</a>
<a href="/Getmyreward">Get my reward</a>
<a href="/Besthunters">Best hunters</a>
<a href="/Jointhearmy">Join the army</a>
<a href="/contactus">Contact us</a>
</nav>
</header>
<hr>
<!--=====Home Section=====-->
<section class="home">
<div class="home-content">
<h2> Dangerous fellowship try to destroy the ring </h2>
<h3>Orcs, goblins, balrogs, protect your master Sauron!</h3>
<a href="https://placeholder.com"><img src="https://via.placeholder.com/350x150" alt="home image"></a>
</div>
</section>
<hr>
<!--=====Fellows Section=====-->
<section class="fellows">
<div>
<h2>Fellows wanted dead</h2>
<h3>(or alive if you want to eat them later)</h3>
<ul class="ranking">
<li>Most wanted</li>
<li>Most dangerous</li>
<li>Already captured</li>
</ul>
<figure class="wizard">
<p>Reward 1000 gold coins</p>
<a href="https://placeholder.com"><img src="http://via.placeholder.com/100x100" alt="Wizard"></a>
<figcaption>The Wizzard <br><em>Small description</em></figcaption>
</figure>
<figure class="hobbit">
<p><strong>DEAD</strong></p>
<a href="https://placeholder.com"><img src="http://via.placeholder.com/100x100" alt="Wizard"></a>
<figcaption>The Wizzard <br><em>Small description</em></figcaption>
</figure>
<figure class="dwarf">
<p>Reward 250 gold coins</p>
<a href="https://placeholder.com"><img src="http://via.placeholder.com/100x100" alt="dwarf"></a>
<figcaption>Yummy Dwarf<br><em>Small description</em></figcaption>
</figure>
</div>
</section>
<hr>
<!--=====Get my reward Section=====-->
<section class="getmyreward">
<h2>I have captured one of them, how to get my reward?</h2>
<p>Illud tamen te esse admonitum volo, primum ut qualis es talem te esse omnes existiment ut, quantum a rerum turpitudine abes, tantum te a verborum libertate seiungas; deinde ut ea in alterum ne dicas, quae cum tibi falso responsa sint, erubescas. Quis
est enim, cui via ista non pateat, qui isti aetati atque etiam isti dignitati non possit quam velit petulanter, etiamsi sine ulla suspicione, at non sine argumento male dicere? Sed istarum partium culpa est eorum, qui te agere voluerunt; laus pudoris
tui, quod ea te invitum dicere videbamus, ingenii, quod ornate politeque dixisti.</p>
<a href="https://placeholder.com"><img src="https://via.placeholder.com/140x140" alt="#"></a><br>
<button>Contact us</button>
</section>
<hr>
<!--=====Best hunters Section=====-->
<section class="besthunters">
<h2>Best hunters</h2>
<div>
<figure class="elveskiller22">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/70x70" alt="ElvesKiller22"></a>
<figcaption>
<strong>ElvesKiller22</strong><br> 2 captured - <a href="">Profile</a> <br/>
<button type="button">Like !</button>
</figcaption>
</figure>
<figure class="goblin45">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/70x70" alt="Goblin45"></a>
<figcaption>
<strong>Goblin45</strong><br> 1 captured - <a href="">Profile</a> <br>
<button type="button">Like !</button>
</figcaption>
</figure>
</div>
</section>
<hr>
<!--=====About the ring Section=====-->
<section class="aboutthering">
<h2>About the ring</h2>
<div>
<h3>Ring capabilities</h3>
<p>What can our master Sauron do with the ring?</p>
<table>
<thead>
<tr>
<th>Feature</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<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>
</tbody>
</table>
</div>
<div>
<h3>Why the ring is awesome</h3>
<p>My preciooooooussssss ! Hrk Hrk, we want our precioooooouuussssss !!</p>
</div>
</section>
<hr>
<!--=====Join the army Section=====-->
<section class="jointhearmy">
<h2>Join Mordor Army, we need you!</h2>
<a href="https://placeholder.com"><img src="https://via.placeholder.com/140x140" alt="#"></a>
<p>Illud tamen te esse admonitum volo, primum ut qualis es talem te esse omnes existiment ut, quantum a rerum turpitudine abes, tantum te a verborum libertate seiungas; deinde ut ea in alterum ne dicas, quae cum tibi falso responsa sint, erubescas. Quis
est enim, cui via ista non pateat, qui isti aetati atque etiam isti dignitati non possit quam velit petulanter, etiamsi sine ulla suspicione, at non sine argumento male dicere? Sed istarum partium culpa est eorum, qui te agere voluerunt; laus pudoris
tui, quod ea te invitum dicere videbamus, ingenii, quod ornate politeque dixisti.</p>
<form action="https://www.SauronRulesThemAll.com" method="get" target="_blank">
<button type="submit">More info on SauronRulesThemAll.com</button>
</form>
</section>
<hr>
<!--=====Contact us Section=====-->
<section class="contactus">
<h2>contact us</h2>
<div>
<form action="/action_page.php">
<label for="mail">Mail</label>
<input type="text" placeholder="@" name="mail" id="mail" required/><br>
<label for="home">Home</label>
<input type="text" name="home" id="home" required/><br>
<label for="why">Why</label>
<input type="text" placeholder="I have seen one of them" name="why" id="why" required/><br>
<label for="message"> Message </label>
<textarea id="message" name="message" cols="30" rows="3"> Your message </textarea>
</form>
</div>
</section>
<hr>
<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 mention</a></li>
<li><a href="https://www.Sauron4Ever.com">Sauron4Ever.com</a></li>
<li><a href="https://www.twitter.com">Follow him also on twitter</a></li>
</ul>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment