Lydia-Dali
8/24/2018 - 1:20 AM
findThePrecious.com by Lydia Dali
findThePrecious.com by Lydia Dali
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>findThePrecious</title>
</head>
<body>
<header>
<nav>
<h1>FindThePrecious.com</h1>
<ul class="menu-list">
<li class="menu-item"><a href="#1" class="menu-link">Fellows</a></li>
<li class="menu-item"><a href="#2" class="menu-link">The Ring</a></li>
<li class="menu-item"><a href="#3" class="menu-link">Get my reward</a></li>
<li class="menu-item"><a href="#4" class="menu-link">Best hunters</a></li>
<li class="menu-item"><a href="#5" class="menu-link">Join the army</a></li>
<li class="menu-item"><a href="#6" class="menu-link">Contact us</a></li>
</ul>
</nav>
</header>
<div class="slide-heading"> <!--ne pas oublier le z-index pour faire passer le title-heading sur le slide-->
<!--4 images car les flêches right and left nous font supposer que nous avons un slide à cet endroit-->
<div class="mySlides fade">
<img class="mySlides" src="http://placehold.jp/140x140.png" alt="140x140">
<div class="text">
<h2>Dangerous fellowship try to destroy the ring</h2>
<h4>Orcs, Goblins, Belrogs, protect your master Sauron !</h4>
</div>
</div>
<div class="mySlides fade">
<img class="mySlides" src="http://placehold.jp/140x140.png" alt="140x140">
<div class="text">
<h2>Dangerous fellowship try to destroy the ring</h2>
<h4>Orcs, Goblins, Belrogs, protect your master Sauron !</h4>
</div>
</div>
<div class="mySlides fade">
<img class="mySlides" src="http://placehold.jp/140x140.png" alt="140x140">
<div class="text">
<h2>Dangerous fellowship try to destroy the ring</h2>
<h4>Orcs, Goblins, Belrogs, protect your master Sauron !</h4>
</div>
</div>
<div class="mySlides fade">
<img class="mySlides" src="http://placehold.jp/140x140.png" alt="140x140">
<div class="text">
<h2>Dangerous fellowship try to destroy the ring</h2>
<h4>Orcs, Goblins, Belrogs, protect your master Sauron !</h4>
</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<section id="1">
<div class="title-duo">
<h2>Fellows wanted dead</h2>
<h4>(or alive if you want to eat them later)</h4>
</div>
<ul class="most">
<li>Most wanted</li>
<li>Most dangerous</li>
<li>Already captured</li>
</ul>
<div class="images">
<figure class="image">
<div class="image-reward"> <!--ne pas oublier le z-index pour faire passer le strong sur l'image-->
<strong>Reward 1000 gold coins</strong>
<img class="image-item" src="http://placehold.jp/200x200.png" alt="200x200">
</div>
<figcaption class="image-description">
<h4>The Wizard</h4>
<p>Small description...</p>
</figcaption>
</figure>
<figure class="image">
<div class="image-dead">
<h4>DEAD</h4>
<img class="image-item" src="http://placehold.jp/200x200.png" alt="200x200">
</div>
<figcaption class="image-description">
<h4>Hobbit #3</h4>
<p>Small description...</p>
</figcaption>
</figure>
<figure class="image">
<div class="image-reward">
<strong>Reward 250 gold coins</strong>
<img class="image-item" src="http://placehold.jp/200x200.png" alt="200x200">
</div>
<figcaption class="image-description">
<h4>Yummy Dwarf</h4>
<p>Small description...</p>
</figcaption>
</figure>
</div>
</section>
<section id="2">
<h2>I have captured one of them, how to get my reward ?</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie interdum ipsum a fermentum. Nunc in ornare nisi. Sed condimentum, ipsum eu egestas tincidunt, justo magna viverra velit, at finibus ligula lorem id velit. Etiam maximus purus nec condimentum porta. Integer cursus mi at elit bibendum, id vestibulum dolor gravida. Curabitur rutrum elit vel turpis maximus facilisis. Vivamus urna ante, lacinia sed mi non, suscipit sodales justo. Nullam rhoncus facilisis mollis.</p>
<img src="http://placehold.jp/140x140.png" alt="140x140">
<br />
<button type="button" value="button">Contact us</button>
</section>
<section id="3">
<h2>Best hunters</h2>
<figure>
<img src="http://placehold.jp/70x70.png" alt="70x70">
<figcaption>
<h3>ElvesKiller22</h3>
<div class="caption-profile">
<p>2 captures-</p><a href="#">Profile</a>
</div>
<button type="button" value="button">Like</button>
</figcaption>
</figure>
<figure>
<img src="http://placehold.jp/70x70.png" alt="70x70">
<figcaption>
<h3>Goblins45</h3>
<div class="caption-profile">
<p>1 captures-</p><a href="#">Profile</a>
</div>
<button type="button" value="button">Like</button>
</figcaption>
</figure>
</section>
<section id="4">
<h2>About the ring</h2>
<section class="panel panel-default">
<header class="panel-heading"><h3>Ring Capabilities</h3></header>
<section class="panel-body">
<h4>What can our master Sauron do with the ring ?</h4>
</section>
<!-- Tableau -->
<table class="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>
</section>
<br />
<section class="panel panel-default">
<header class="panel-heading"><h3>Why the ring is awesome ?</h3></header>
<section class="panel-body">
<h4>My preciooooooussssss ! Hrk Hrk, we want our preeciooooouuusssss !!</h4>
<p>Gollum</p>
</section>
<img src="http://placehold.jp/b3b6ba/787c80/110x110.jpg?text=110x110&css=%7B%22border-radius%22%3A%2250%25%22%7D" alt="110x110">
</section>
</section>
<section id="5">
<h2>Join Mordor Army, we need you !</h2>
<img src="http://placehold.jp/140x140.png" alt="140x140">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie interdum ipsum a fermentum. Nunc in ornare nisi. Sed condimentum, ipsum eu egestas tincidunt, justo magna viverra velit, at finibus ligula lorem id velit. Etiam maximus purus nec condimentum porta. Integer cursus mi at elit bibendum, id vestibulum dolor gravida. Curabitur rutrum elit vel turpis maximus facilisis. Vivamus urna ante, lacinia sed mi non, suscipit sodales justo. Nullam rhoncus facilisis mollis. In blandit odio et malesuada lacinia. Phasellus luctus finibus tempor. Aliquam vitae cursus odio, sit amet bibendum neque. Duis dapibus massa vitae ultricies congue. Aliquam hendrerit sem vel turpis condimentum bibendum. Maecenas eu felis pellentesque, vehicula erat et, feugiat mi. Sed a facilisis nibh, eu cursus est.</p>
<button type="button" value="button">More info on SauronRulesThemAll.com</button>
</section>
<section id="6">
<h2>Contact us</h2>
<form action="#" method="post">
<input type="email" name="email">
<input type="number" name="call_number">
<select>
<option value="have_seen">I have seen one of them</option>
<option value="have_captured">I have captured one of them</option>
<option value="join_army">I want to join your army</option>
</select>
<textarea id="message" name="user_message" cols="20" rows="10">Your message</textarea>
</form>
</section>
<footer>
<ul>
<li>About us</li>
<li>Fellows</li>
<li>Join our army</li>
</ul>
<ul>
<li>FAQ</li>
<li>Reward conditions</li>
<li>Legal mentions</li>
</ul>
<ul>
<li>Sauron4Ever.com</li>
<li>Follow him also on twitter</li>
</ul>
</footer>
</body>
</html>