Skip to content

Instantly share code, notes, and snippets.

@Karnak19

Karnak19/index.html

Last active October 5, 2018 09:54
Show Gist options
  • Save Karnak19/4557e14e8e46b7415d23ecc74bee7cb6 to your computer and use it in GitHub Desktop.
Save Karnak19/4557e14e8e46b7415d23ecc74bee7cb6 to your computer and use it in GitHub Desktop.
Download ZIP
Odyssey quest 02
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>findThePrecious</title>
<meta charset="utf-8" />
</head>
<body>
<header id="header">
<nav>
<a href="#">FindThePrecious.com</a>
<ul>
<li class="selected"><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="#hunters">Best hunters</a></li>
<li><a href="#army">Join the army</a></li>
<li><a href="#contact">Contact us</a></li>
</ul>
</nav>
<hr />
<!-- SLIDER -->
<section id="slider">
<img src="https://via.placeholder.com/800x200" alt="" />
</section>
</header>
<hr />
<!-- SECTION FELLOWS-->
<section id="fellows">
<button>Most Wanted</button>
<button>Most Dangerous</button>
<button>Already Captured</button><br /><br />
<div>
<img src="https://via.placeholder.com/150x150" alt="" />
<h1>The Wizard</h1>
Lorem ipsum dolor sit amet.
</div>
<div>
<img src="https://via.placeholder.com/150x150" alt="" />
<h1>Hobbit #3</h1>
Lorem ipsum dolor sit amet.
</div>
<div>
<img src="https://via.placeholder.com/150x150" alt="" />
<h1>Yummy Dwarf</h1>
Lorem ipsum dolor sit amet.
</div>
</section>
<hr/>
<!-- SECTION REWARD -->
<section id="reward">
<div>
<h2>I have captured one of them, how to get my reward ?</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.
Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit
amet erat. Duis semper.</p>
<div>
<img src="https://via.placeholder.com/140x140" alt=""/>
</div>
<button>Contact Us</button>
</div>
</section>
<hr/>
<!-- SECTION HUNTERS -->
<section id="hunters">
<h1>Best hunters</h1>
<div>
<img src="https://via.placeholder.com/70x70" alt=""/>
ElvesKiller22
</div>
<div>
<img src="https://via.placeholder.com/70x70" alt=""/>
Goblin45
</div>
</section>
<hr/>
<!-- SECTION ARMY -->
<section id="army">
<p><h1>Join Mordor army, we need you !</h1>
<img src="https://via.placeholder.com/140x140" alt=""/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.
Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit
amet erat. Duis semper.</p>
<button>More info on SauronRulesThemAll.com</button>
</section>
<hr/>
<!-- SECTION CONTACT -->
<section id="contact">
<div>
<h1>CONTACT US</h1>
<form method="post" action="#">
<input type="text" name="email" placeholder="@" />
<input type="email" name="home" placeholder="Home" /><br />
<select id="monselect">
<option value="valeur1" selected>I have seen one of them</option>
<option value="valeur2">Lord of the rings</option>
<option value="valeur3">Sauron master</option>
</select><br />
<textarea name="message" placeholder="Message" rows="6" cols="60"></textarea>
</form>
</div>
</section>
</body>
<footer>
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">Fellows</a></li>
<li><a href="#">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>
<ul>
<li><a href="#">Sauron4Ever.com</a></li>
<li><a href="#">Follow him also on twitter</a></li>
</ul>
</footer>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment