Skip to content

Instantly share code, notes, and snippets.

@jimmyachour

jimmyachour/index.html

Created January 31, 2019 12:59
Show Gist options
  • Save jimmyachour/9bad3ad7051f612474efb759f5f49f1c to your computer and use it in GitHub Desktop.
Save jimmyachour/9bad3ad7051f612474efb759f5f49f1c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>findtheprecious</title>
</head>
<body>
<header>
<div class="header-menu">
<h1>FindThePrecious.com</h1>
<ul>
<li><a href="#fellows">Fellows</a></li>
<li><a href="#ring">The ring</a></li>
<li><a href="#reward">Get my reward</a></li>
<li><a href="#hunter">Best hunters</a></li>
<li><a href="#join">Join the army</a></li>
<li><a href="#contact">Contact us</a></li>
</ul>
</div>
<img src="https://via.placeholder.com/350x140" alt="description"/>
</header>
<section id="fellows">
<h2>Fellows wanted dead<span> (or alive if you want to eat them later)</span></h2>
<ul>
<li>Most wanted</li>
<li>Most dangerous</li>
<li>Already captured</li>
</ul>
<div class="fellows__profilContainer">
<div class=" fellows__profil">
<div class="fellows__porfil__img">
<img src="https://via.placeholder.com/150x150" alt="description"/>
<p>reward 1000 gold coins</p>
</div>
<div class="fellows__profil__bloc-desc" >
<h3>The Wizard</h3>
<p>Small description...</p>
</div>
</div>
<div class=" fellows__profil">
<div class="fellows__porfil__img">
<img src="https://via.placeholder.com/150x150" alt="description"/>
<p>DEAD</p>
</div>
<div class="fellows__profil__bloc-desc" >
<h3>Hobbit #3</h3>
<p>Small description...</p>
</div>
</div>
<div class=" fellows__profil">
<div class="fellows__porfil__img">
<img src="https://via.placeholder.com/150x150" alt="description"/>
<p>reward 250 gold coins</p>
</div>
<div class="fellows__profil__bloc-desc" >
<h3>Yummy Dwarf</h3>
<p>Small description...</p>
</div>
</div>
</div>
</section>
<hr>
<section id="reward">
<div class="reward__container">
<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>
<button type="button">Contact us</button>
</div>
<img src="https://via.placeholder.com/140x140" alt="description">
</section>
<hr>
<section id="hunter">
<h2>Best hunters</h2>
<div class="hunter__profilContainer">
<img src="https://via.placeholder.com/70x70" alt="description"/>
<div class="hunter__profilContainer__desc">
<h3>ElvesKiller22</h3>
<p>2 captures-<a href="https://profil-link">Profile</a></p>
<button type="button">Like</button>
</div>
</div>
<div class="hunter__profilContainer">
<img src="https://via.placeholder.com/70x70" alt="description"/>
<div class="hunter__profilContainer__desc">
<h3>Goblin45</h3>
<p>1 captures-<a href="https://profil-link">Profile</a></p>
<button type="button">Like</button>
</div>
</div>
</section>
<hr>
<section id="ring">
<h2>About the ring</h2>
<div class="ring__tableContainer">
<h3>Ring Capabilities</h3>
<p>What can our master Sauron do with the ring ?</p>
<table>
<tr>
<th>Feature</th>
<th>Descriotion</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="ring__WhyContainer">
<h3>Why the ring is awesome ?</h3>
<p>My precioooouuusssss! Hrk Hrk, we want our preciooosssss!!</p>
<p>Gollum</p>
<img src="https://via.placeholder.com/110x110" alt="description"/>
</div>
</section>
<hr>
<section id="join">
<h2>Join Mordor Army, we need you !</h2>
<div class="join__container">
<img src="https://via.placeholder.com/140x140" alt="description"/>
<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</p>
<button type="button">More info on SauronRulesThemAll.com</button>
</div>
</section>
<hr>
<section id="contact">
<h2>Contact us</h2>
<form action="#" method="post">
<label for="mail"></label>
<input type="email" id="mail" placeholder="@" name="user_mail">
<label for="adress"></label>
<input type="text" id="adress" placeholder="&#127968;" name="user_adress">
<label for="choice"></label>
<select id="choice" name="user_choice">
<option value="first">I have seen one of them</option>
<option value="second">Other choice</option>
<option value="third">Other choice</option>
</select>
<label for="area"></label>
<textarea rows="4" cols="100" id="area" placeholder="Your message" name="user_comment">
</textarea>
</form>
</section>
<footer>
<div class="footer__list">
<ul>
<li><a href="#">About us</a></li>
<li><a href="#fellows">Fellows</a></li>
<li><a href="#join">Join our army</a></li>
</ul>
<ul>
<li><a href="#">FAQ</a></li>
<li><a href="#">Reward conditions</a></li>
<li><a href="#">Legal mentions</a></li>
</ul>
</div>
<a href="https://sauron4ever.com">Sauron4Ever.com</a>
<a href="https://twitter/profil/findtheprecious">Follow hil 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