Skip to content

Instantly share code, notes, and snippets.

@pierrealexaline

pierrealexaline/index.html

Created October 7, 2018 21:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save pierrealexaline/b1415e93fe8bee9deffced53ecfd65b6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save pierrealexaline/b1415e93fe8bee9deffced53ecfd65b6 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>FindThePrecious</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="img/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="img/favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="img/favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="img/favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="img/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="img/favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="img/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicons/favicon-16x16.png">
<link rel="manifest" href="img/favicons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="img/favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<header>
<div class="menu">
<h1 class="logo">FindThePrecious.com</h1>
<nav>
<ul>
<li><a href="fellows.html">Fellows</a></li>
<li><a href="reward.html">Get My reward</a></li>
<li><a href="join.html">Join the army</a></li>
<li><a href="contact.html">Contact us</a></li>
</ul>
</nav>
</div>
<div class="slider">
<img src="https://via.placeholder.com/780x210" alt="Most wanted">
</div>
</header>
<main>
<section>
<h2>Fellows wanted dead (or alive if you want to eat them later)</h2>
<ul>
<li><a href="most_wanted.html">Most wanted</a></li>
<li><a href="most_dangerous.html">Most dangerous</a></li>
<li><a href="captured.html">Already captured</a></li>
</ul>
<figure>
<img src="https://via.placeholder.com/240x210" alt="Most wanted">
<figcaption>Reward 1000 Gold Coin</figcaption>
</figure>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla volutpat lorem vitae arcu feugiat,ut vulputate tortor congue.
Etiam dignissim elit et tempus hendrerit.
</p>
<figure>
<img src="https://via.placeholder.com/240x210" alt="Dead">
<figcaption>Dead</figcaption>
</figure>
<p>
Donec ut augue ut arcu viverra pulvinar et non justo.
Duis tempor nibh a velit condimentum, semper porta diam cursus.
Praesent at enim sed turpis lacinia dictum.
</p>
<figure>
<img src="https://via.placeholder.com/240x210" alt="sub-Wanted">
<figcaption>Reward 250 Gold Coin</figcaption>
</figure>
<p>
Curabitur molestie tortor ac dolor sagittis facilisis. Proin convallis leo est,
vel dapibus eros posuere eget. Morbi blandit sem at eleifend vehicula.
</p>
</section>
<section>
<h2>I have captured one of them, how to get my reward</h2>
<p>
Suspendisse iaculis arcu eget risus pulvinar,
at volutpat risus consectetur. Nunc arcu mi, pellentesque id bibendum vitae,
hendrerit et eros. Maecenas mollis sem vel nisl vehicula ornare.
Nulla ac laoreet lectus, non ultrices urna. Vivamus consectetur velit sed neque
vehicula gravida.
</p>
<form action="index.html" method="post">
<button type="submit" name="contact_us">Contact us</button>
</form>
<figure>
<img src="https://via.placeholder.com/140x140" alt="Reward 250">
<figcaption>Reward 250 Gold Coin</figcaption>
</figure>
</section>
<section>
<h2>Best hunters</h2>
<article>
<h3>ElvesKiller22</h3>
<figure>
<img src="https://via.placeholder.com/70x70" alt="profile">
</figure>
<p>
<span class="capture_nber">Capture</span>
<span class="profile">Profile</span>
<span class="like">Like</span>
</p>
</article>
<article>
<h3>Goblin45</h3>
<figure>
<img src="https://via.placeholder.com/70x70" alt="profile">
</figure>
<p>
<span class="capture_nber">Capture</span>
<span class="profile">Profile</span>
<span class="like">Like</span>
</p>
</article>
</section>
<section>
<h2>About the ring</h2>
<article>
<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>
</tbody>
<tfoot>
<tr>
<td>Power</td>
<td>Destroy the world</td>
</tr>
</tfoot>
</table>
</article>
<article>
<h3>Why the ring is awesome ?</h3>
<p>
Nulla in porta magna. Ut a purus lectus. Etiam eu laoreet nisi.
In quis placerat magna, nec ultrices odio. Suspendisse placerat consectetur ipsum, et vestibulum leo rutrum ac. Vivamus tempus quis elit eu vestibulum. Suspendisse feugiat laoreet nisl,
mattis varius arcu hendrerit in. Duis convallis erat ex, eget cursus tortor semper ut.
<a href="golium.html">Golium</a>
</p>
<figure>
<img src="https://via.placeholder.com/110x110" alt="profile">
</figure>
</article>
</section>
<section>
<h2>Join Mordor Army, we need you</h2>
<figure>
<img src="https://via.placeholder.com/140x140" alt="profile">
</figure>
<p>
Nulla in porta magna. Ut a purus lectus. Etiam eu laoreet nisi.
In quis placerat magna, nec ultrices odio. Suspendisse placerat consectetur ipsum, et vestibulum leo rutrum ac. Vivamus tempus quis elit eu vestibulum. Suspendisse feugiat laoreet nisl,
mattis varius arcu hendrerit in. Duis convallis erat ex, eget cursus tortor semper ut.
</p>
<form action="index.html" method="post">
<button type="submit" name="More info on SauronRulesThemAll.com">More info on SauronRulesThemAll.com</button>
</form>
</section>
<section>
<h2>Contact us</h2>
<form action="index.html" method="post">
<input type="email" name="mail" value="e-mail">
<input type="url" name="homepage" value="http://mysite/homepage.html">
<select name="wanted">
<option selected disabled hidden>I have seen one of them</option>
<option>John Walker Smith</option>
<option>Adam Blackstone Parrot</option>
<option>Bille Kraken Monster Fallow</option>
</select>
<textarea name="message">Your Message</textarea>
</form>
</section>
</main>
<footer>
<ul>
<li>About us</li>
<li>Fellows</li>
<li>Join our Army</li>
</ul>
<ul>
<li>FAQ</li>
<li>Reward conditions</li>
<li>Legales mentions</li>
</ul>
<p>
<a href="sauron4ever.com">Sauron4Ever.com</a>
<a href="twitter.com">follow him also on twitter</a>
</p>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment