Skip to content

Instantly share code, notes, and snippets.

@elneris

elneris/FindThePreciuousV2.html

Created February 13, 2019 18:45
Show Gist options
  • Save elneris/4823a9568ae163517e8a2900dd1559f8 to your computer and use it in GitHub Desktop.
Save elneris/4823a9568ae163517e8a2900dd1559f8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
FindThePreciuousV2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Find The Precious</title>
<link rel="stylesheet" type="text/css" href="findtheprecious.css">
<link href="bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="heroic-features.css" rel="stylesheet">
<meta name="viewport" content="width-=device-width, initial-scale=1.0">
</head>
<body>
<!-- Menu -->
<header>
<div class="container">
<div class="header">
<nav>
<ul class="menu">
<li><a href="findtheprecious.html">FindThePrecious.com</a></li>
<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="#Hunters">Best Hunters</a></li>
<li><a href="#Army">Join the Army</a></li>
<li><a href="#Contact">Contact us</a></li>
</ul>
</nav>
<div class="diaporama">
<img class="mySlides" src="https://media.melty.fr/article-2415031-head/bilbo-le-hobbit-2-le-hobbit-3-la-desolation.jpg" alt="image1">
<img class="mySlides" src="https://media.melty.fr/article-1191664-head/yeux-gollum-hobbit-voyage-inattendu-bilbon.jpg" alt="image2">
<img class="mySlides" src="https://media.melty.fr/article-2416501-head-f1410880651/bilbo-the-hobbit-la-bataille-des-cinq-armees.jpg" alt="image3">
<img class="mySlides" src="https://media.melty.it/article-2565873-head-f1391468456/la-terra-di-mezzo-l-ombra-di-mordor-ps4-xbox.jpg" alt="image4">
<button class="bouton-gauche" onclick="plusDivs(-1)">&#10094;</button>
<button class="bouton-droite" onclick="plusDivs(1)">&#10095;</button>
</div>
</div>
<hr>
</div>
</header>
<section>
<div class="container">
<h2 id="Fellows">Fellows wanted dead(or alive if you want to eat them later)</h2>
<audio controls preload="metadata" loop autoplay>
<source src="hobbit.mp3">
</audio>
<ul class="Fellows">
<li><button onclick="show_wanted()">Most wanted</button>
<div id="description1">
<div class="blocImage">
<img src="http://static.c2w.com/uploads/question/image/01/07/91/95/N1079195/file.jpg" alt="photo">
<p class="text">Gollum</p>
<p class="reward">
reward <span> 500</span><br/>golden coins
</p>
</div>
<div class="blocImage">
<img src="https://i.pinimg.com/originals/87/1f/b3/871fb3c17bcb4db9f49ae21b346f3e8d.jpg" alt="photo">
<p class="text">Legolas</p>
<p class="reward">
reward <span> 500</span><br/>golden coins
</p>
</div>
<div class="blocImage">
<img src="https://i.skyrock.net/7020/13397020/pics/338882148_small.jpg" alt="photo">
<p class="text">Frodon</p>
<p class="reward">
reward <span> 500</span><br/>golden coins
</p>
</div>
</div>
</li>
<li><button onclick="show_dangerous()">Most Dangerous</button>
<div id="description2">
<div class="blocImage">
<img src="https://vignette.wikia.nocookie.net/ombredumordor/images/3/3a/Sauron.jpg/revision/latest?cb=20140330092346&path-prefix=fr" alt="photo">
<p class="text">Sauron</p>
<p class="reward">
reward <span> 750</span><br/>golden coins
</p>
</div>
<div class="blocImage">
<img src="https://i.pinimg.com/originals/18/48/26/184826a8da5150e851f90fdbab023fba.jpg" alt="photo">
<p class="text">Balrog</p>
<p class="reward">
reward <span> 750</span><br/>golden coins
</p>
</div>
<div class="blocImage">
<img src="https://i.skyrock.net/1725/6651725/pics/104081766_small.jpg" alt="photo">
<p class="text">Saroumane</p>
<p class="reward">
reward <span> 750</span><br/>golden coins
</p>
</div>
</div>
</li> <li><button onclick="show_captured()">Already Captured</button>
<div id="description3">
<div class="blocImage">
<img src="https://i.ebayimg.com/images/g/guUAAOSwbmdZgNuv/s-l400.jpg" alt="photo">
<p class="text">Boromir</p>
<p class="reward">
<span> DEAD</span>
</p>
</div>
<div class="blocImage">
<img src="https://i.skyrock.net/0621/23130621/pics/675178875_small.jpg" alt="photo">
<p class="text">Aragorn</p>
<p class="reward">
You have win <span> 500</span><br/>golden coins
</p>
</div>
<div class="blocImage">
<img src="https://i.gifer.com/Tpj2.gif" alt="photo">
<p class="text">Gandalf</p>
<p class="reward">
You have win <span> 500</span><br/>golden coins
</p>
</div>
</div>
</li>
</ul>
<hr>
</div>
</section>
<div class="container">
<section>
<h2 id="Reward">I have captured one of them, how to get my reward ?</h2>
<div class="row text-center">
<div class="col-lg-9">
<p>Congrat's, you have enought strengh for catch on of them, your contribution for save the Mordor is very apprecied. To get your gold coin reward, please contact Sauron himself. The road to contact him is not that far, take the proof that you have captured the Fellows and send him his head </p>
<p>I will send you back a new ring !</p>
<div class="reward-img">
<a href="#Contact" class="btn btn-primary">Contact US</a>
</div>
</div>
<div class="col-lg-3">
<img class="img-gollum" src="https://cdn-images-1.medium.com/max/612/1*vFht2pfMD7lijWCGDpNEJA.png" alt="Gollum">
</div>
</div>
<hr>
</section>
</div>
<section>
<div class="container" id="Hunters">
<!-- Jumbotron Header -->
<header class="jumbotron my-4">
<h2>Best Hunters</h2>
</header>
<!-- Page Features -->
<div class="row text-center">
<div class="col-lg-4 col-md-4 mb-4">
<div class="card h-100">
<img class="card-img-top" src="https://wow.zamimg.com/uploads/guide/images/15777.png" alt="hunt">
<div class="card-body">
<h4 class="card-title">Xolotal</h4>
<p class="card-text">is a striking new model being added to the Wolf family.</p>
</div>
<div class="card-footer">
<button type="button" class="btn btn-primary" onClick="onClick1()">👍 like <span id="clicks1">985</span></button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 mb-4">
<div class="card h-100">
<img class="card-img-top" src="https://wow.zamimg.com/uploads/guide/images/15779.png" alt="hunt">
<div class="card-body">
<h4 class="card-title">Dreamrunners</h4>
<p class="card-text">such as the black and red horse shadows rare from the Broken Shore have been added to the Stag family.</p>
</div>
<div class="card-footer">
<button class="btn btn-primary" type="button" onClick="onClick2()">👍 like <span id="clicks2">745</span></button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 mb-4">
<div class="card h-100">
<img class="card-img-top" src="https://wow.zamimg.com/uploads/guide/images/15796.png" alt="hunt">
<div class="card-body">
<h4 class="card-title">Sevriss</h4>
<p class="card-text">There's sneaky snakes... and then there's giant cobras, which can be tamed as part of the Serpent family..</p>
</div>
<div class="card-footer">
<button class="btn btn-primary" type="button" onClick="onClick3()">👍 like <span id="clicks3">844</span></button>
</div>
</div>
</div>
</div>
<!-- /.row -->
<hr> </div>
</section>
<section>
<div class="container" id="Ring">
<h2>About the Ring</h2>
<div class="card h-100">
<div class="card-footer">
<h4 class="card-title">Ring Capabilities</h4>
</div>
<div class="card-body">
<p>what can our master Sauron do with the ring ?</p>
<table>
<tr>
<td class="th">Feature</td>
<td class="th">Description</td>
</tr>
<tr>
<td>Main</td>
<td>One ring to rule them all</td>
</tr>
<tr>
<td>Invisibility</td>
<td>You can't see mee</td>
</tr>
<tr>
<td>Power</td>
<td>Destroy the world</td>
</tr>
</table>
</div>
</div>
<br>
<br>
<div class="card h-100">
<div class="card-footer">
<h4 class="card-title">Why the ring is awesome ?</h4>
</div>
<div class="card-body">
<div class="row text-center">
<div class="col-lg-9 block-gollum">
<p class="precious">My preciooooouuuuusssss ! Hkr Hkr , we want our precioouuuusss !!</p>
<p class="text-gollum">Gollum</p>
</div>
<div class="col-lg-3">
<img class="img-gollum" src="https://pixel.nymag.com/imgs/daily/intelligencer/2015/12/02/02-gollum-turkish-president.w330.h330.jpg" alt="Gollum">
</div>
</div>
</div>
</div>
<hr></div>
</section>
<section>
<div class="container" id="Army">
<h2>Join the Mordor, We need you !</h2>
<div class="card h-100">
<div class="row text-center">
<div class="col-lg-3">
<img class="card-img-top" src="https://sd.keepcalm-o-matic.co.uk/i/fuck-school-join-the-army.png" alt="join">
</div>
<div class="col-lg-9 bloc-gollum"><br><br>
<p>After all you can see here, don't you want be part of this amazing Army ? Come on don't be scared there is a place for every type of hunter ! Specially for you trust me, I can tell you, You will be super Rich in less than 1 minutes</p><br>
<a href="../about_me.php" class="btn btn-primary">More Info about me, the real King of the Mordor</a>
</div>
</div>
</div>
<hr>
</div>
</section>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
function show_wanted() {
var x = document.getElementById("description1");
if (x.style.display === "none") {
x.style.display = "block";
}
else {
x.style.display = "none";
}
}
function show_captured() {
var x = document.getElementById("description3");
if (x.style.display === "none") {
x.style.display = "block";
}
else {
x.style.display = "none";
}
}
function show_dangerous() {
var x = document.getElementById("description2");
if (x.style.display === "none") {
x.style.display = "block";
}
else {
x.style.display = "none";
}
}
var clicks1 = 985;
function onClick1() {
clicks1 += 1;
document.getElementById("clicks1").innerHTML = clicks1;
};
var clicks2 = 745;
function onClick2() {
clicks2 += 1;
document.getElementById("clicks2").innerHTML = clicks2;
};
var clicks3 = 844;
function onClick3() {
clicks3 += 1;
document.getElementById("clicks3").innerHTML = clicks3;
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment