Skip to content

Instantly share code, notes, and snippets.

@jimmyachour

jimmyachour/index.html

Created February 27, 2019 10:28
Show Gist options
  • Save jimmyachour/4b0441d06f83847116eb3e4255b2cdb2 to your computer and use it in GitHub Desktop.
Save jimmyachour/4b0441d06f83847116eb3e4255b2cdb2 to your computer and use it in GitHub Desktop.
Download ZIP
FindYourPrecious
Raw
index.html
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>findtheprecious</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/Style.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">FindThePrecious.com</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#fellows">Fellows</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#ring">The Ring</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#reward">Get my reward</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#hunter">Best hunters</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#join">Join the army</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact us</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Carousel -->
<div id="carouselTop" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carouselTop" data-slide-to="0" class="active"></li>
<li data-target="#carouselTop" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="img/img1.jpg" alt="first description">
<div class="carousel-caption">
<h3>Dangerous fellowship try to destroy the ring</h3>
<p>Orcs, Gobelins, Balrogs, protect your master Sauron !</p>
</div>
</div>
<div class="item">
<img src="img/img2.jpg" alt="second description">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#carouselTop" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carouselTop" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
<section id="fellows">
<h2>Fellows wanted dead<span> (or alive if you want to eat them later)</span></h2>
<ul class="nav nav-tabs">
<li class="active"><a href="wanted">Most wanted</a></li>
<li><a href="dangerous">Most dangerous</a></li>
<li><a href="captured">Already captured</a></li>
</ul>
<div class="row">
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/150x150" alt="description"/>
<p>reward 1000 gold coins</p>
<div class="card-body">
<h3>The Wizard</h3>
<p>Small description...</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/150x150" alt="description"/>
<p>DEAD</p>
<div class="card-body" >
<h3>Hobbit #3</h3>
<p>Small description...</p>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/150x150" alt="description"/>
<p>reward 250 gold coins</p>
<div class="card-body" >
<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="media">
<img class="align-self-start mr-3" src="https://via.placeholder.com/70x70" alt="description"/>
<div class="media-body">
<h3>ElvesKiller22</h3>
<p>2 captures-<a href="https://profil-link">Profile</a></p>
<button type="button">Like</button>
</div>
</div>
<div class="media">
<img class="align-self-start mr-3" src="https://via.placeholder.com/70x70" alt="description"/>
<div class="media-body">
<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="sub-title">
<h3>Ring Capabilities</h3>
<p>What can our master Sauron do with the ring ?</p>
</div>
<div class="card-columns">
<div class="card">
<div class="card-body text-center bg-dark">
<p class="card-text">Feature</p>
</div>
</div>
<div class="card">
<div class="card-body text-center bg-dark" >
<p class="card-text">Description</p>
</div>
</div>
</div>
<div class="card-columns">
<div class="card">
<div class="card-body text-center">
<p class="card-text">Main</p>
</div>
</div>
<div class="card">
<div class="card-body text-center">
<p class="card-text">One ring to rules them all</p>
</div>
</div>
</div>
<div class="card-columns">
<div class="card">
<div class="card-body text-center">
<p class="card-text">Invisibility</p>
</div>
</div>
<div class="card">
<div class="card-body text-center">
<p class="card-text">You can't see me</p>
</div>
</div>
</div>
<div class="card-columns">
<div class="card">
<div class="card-body text-center">
<p class="card-text">Power</p>
</div>
</div>
<div class="card">
<div class="card-body text-center">
<p class="card-text">Destroy the world</p>
</div>
</div>
</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>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment