alexandrecoin
3/9/2018 - 7:55 AM
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Quete JS requête</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">
<img src="https://i.imgur.com/B5oNFWE.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto col-12">
<li class="nav-item col-2">
<a class="nav-link navmenu" href="#">Fellows</a>
</li>
<li class="nav-item col-2">
<a class="nav-link navmenu" href="#">Ring</a>
</li>
<li class="nav-item col-2">
<a class="nav-link navmenu" href="#">Reward</a>
</li>
<li class="nav-item col-2">
<a class="nav-link navmenu" href="#">Hunters</a>
</li>
<li class="nav-item col-2">
<a class="nav-link navmenu" href="#">Join</a>
</li>
<li class="nav-item col-2">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<!--Carousel-->
<div class="container sectionCarousel">
<div id="demo" class="carousel slide" data-ride="carousel">
<!--
Indicators
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul> -->
<!--Slideshow-->
<div class="row">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="mw-100 d-block img" src="https://i.imgur.com/uMeOEzR.jpg" alt="dark_vador">
<blockquote class="blockquote overlay">
<p class="mb-0">Sauron is a very good bro, please help him find his ring.
<span class="blockquote-footer text-right">d.v</span>
</p>
</blockquote>
</div>
<div class="carousel-item">
<img class="mw-100 d-block img" src="https://i.imgur.com/FLM7ST5.jpg" alt="image2">
<blockquote class="blockquote overlay2">
<p class="mb-0">I've been defeated once, I'll have my revenge !
<span class="blockquote-footer text-right">Balrog</span>
</p>
</blockquote>
</div>
<div class="carousel-item">
<img class="mw-100 d-block img" src="https://i.imgur.com/SuEPmr5.jpg" alt="image3">
<blockquote class="blockquote overlay3">
<p class="mb-0">He's always been kind to me, I must help him !
<span class="blockquote-footer text-right">Orc</span>
</p>
</blockquote>
</div>
</div>
</div>
<!--Left and right controls-->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<!--Fellows wanted dead section-->
<div class="container sectionWanted">
<div class="row">
<div class="col-10">
<h1>
<span class="elfique">y</span> Fellows wanted dead
<small>(or alive if you want to eat them later)
<span class="elfique">y</span>
</small>
</h1>
</div>
</div>
<!-- Boutons Most -->
<div class="row">
<div class="col-md-11 col-md-offset-1">
<div class="row offset-md-2">
<a href="#" class="btn btn-primary-outline bouton col-md-3" role="button">
<span class="elfique2">b</span>Most wanted
<span class="elfique2">b</span>
</a>
<a href="#" class="btn btn-primary-outline bouton col-md-3 offset-md-1" role="button">
<span class="elfique2">b</span>Most dangerous
<span class="elfique2">b</span>
</a>
<a href="#" class="btn btn-primary-outline bouton col-md-3 offset-md-1" role="button">
<span class="elfique2">b</span>Already captured
<span class="elfique2">b</span>
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-xs-12">
<div class="card personnage">
<img src="https://i.imgur.com/1VPC7c0.png" class="CardImage grisee" alt="gandalf">
<div class="card-img-overlay">
<p class="name">The Wizard</p>
<p class="reward">reward
<span class="amount">1000</span>
<br>golden coins</p>
</div>
<p class="description">A very dangerous wizard, balrog killer...</p>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="card personnage">
<img src="https://i.imgur.com/iA5SFtr.png" class="CardImage grisee" alt="gandalf">
<div class="card-img-overlay">
<p class="name"> Aragorn</p>
<p class="reward">reward
<span class="amount">800</span>
<br>golden coins</p>
</div>
<p class="description">Sauron's finger says his sword is dangerous...</p>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="card personnage">
<img src="https://i.imgur.com/ESO4nBK.png" class="CardImage grisee" alt="gandalf">
<div class="card-img-overlay">
<p class="gimliNom">Gimli</p>
<p class="gimli">dead</p>
</div>
<p class="description">A dwarf with a beard and an axe...</p>
</div>
</div>
</div>
</div>
<!--Reward-->
<div class="container sectionReward">
<div class="row">
<div class="col-10">
<h1>I have captured one of them, how to get my reward ?</h1>
</div>
</div>
<div class="row">
<div class="col-10">
<p>Iam in altera philosophiae parte. quae est quaerendi ac disserendi, quae logikh dicitur, iste vester
plane, ut mihi quidem videtur, inermis ac nudus est. tollit definitiones, nihil de dividendo ac partiendo
docet, non quo modo efficiatur concludaturque ratio tradit, non qua via captiosa solvantur ambigua
distinguantur ostendit</p>
<div class="row">
<div class="offset-5"></div>
<a href="#" class="btn btn-info" role="button">Contact</a>
</div>
</div>
<img src="http://via.placeholder.com/140x140" alt="reward_pic">
</div>
</div>
<!--Best hunters-->
<div class="container sectionHunters">
<div class="row">
<div class="col-6">
<h1>Best hunters</h1>
</div>
</div>
<div class="row">
<div class="col">
<img src="http://via.placeholder.com/120x120" class="float-left mx-2" alt="">
<p>ElvesKiller22</p>
<p>2 captures -
<a href="#">Profile</a>
</p>
<button type="button" class="btn btn-secondary btn-sm">
<i class="fa fa-thumbs-up"></i>Like</button>
</div>
<div class="col">
<img src="http://via.placeholder.com/120x120" class="float-left mx-2" alt="">
<p>ElvesKiller22</p>
<p>2 captures -
<a href="#">Profile</a>
</p>
<button type="button" class="btn btn-secondary btn-sm">
<i class="fa fa-thumbs-up"></i>Like</button>
</div>
</div>
<hr>
</div>
<!--Tables-->
<div class="container tables">
<div class="row">
<div class="col-10">
<h1>About the ring</h1>
</div>
</div>
<div class="container card">
<div>
<p>What can our Master Sauron do with the ring ?</p>
</div>
<table class="table table-striped card-body">
<thead>
<tr>
<th>Feature</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Main</td>
<td>One ring to rule 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>
</div>
<br>
<div class="container card">
<table class="table table-striped">
<thead>
<tr>
<th>Why is the ring so awesome ?</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="container">
<div class="row">
<div class="col-9">
<p>Iam in altera philosophiae parte. finitiones, nihilatur concludaturque</p>
<div class="row">
<div class="offset-5"></div>
<p>Gollum</p>
</div>
</div>
<img src="http://via.placeholder.com/110x110" class="rounded-circle" alt="reward_pic">
<!--modifier le CSS pour fixer la taille à 140x140-->
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Join army -->
<div class="container sectionJoin">
<div class="row">
<div class="col-6">
<h1>Join Mordor army, we need you ! </h1>
</div>
</div>
<div class="container">
<div class="row">
<img src="http://via.placeholder.com/140x140" alt="reward_pic">
<!--modifier le CSS pour fixer la taille à 140x140-->
<div class="col-10">
<p>Iam in altera philosophiae parte. quae est quaerendi ac disserendi, quae logikh dicitur, iste
vester plane, ut mihi quidem videtur, inermis ac nudus est. tollit definitiones, nihil de
dividendo ac partiendo docet, non quo modo efficiatur concludaturque ratio tradit, non qua
via captiosa solvantur ambigua distinguantur ostendit</p>
<div class="row">
<div class="offset-4"></div>
<a href="#" class="btn btn-info" role="button">More info on SauronRulesThemAll.com</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Contact-->
<div class="container contactUs">
<div class="row">
<div class="col-6">
<h1>Contact Us</h1>
</div>
</div>
</div>
<div class="container form">
<form>
<div class="form-group">
<input type="email" class="form-control" id="inputEmail1" placeholder="@">
<br>
<input type="text" class="form-control" id="inputAddress" placeholder="Address">
<br>
<select class="form-control" id="select">
<option selected disabled>I have seen one of them</option>
<option>Frodo</option>
<option>Aragorn</option>
</select>
<br>
<textarea class="form-control" id="textarea" rows="9"></textarea>
</div>
</form>
</div>
<!--footer-->
<div class="container">
<div class="footer">
<div class="row">
<div class='offset-1'></div>
<div class="col-md-3 col-sm-6">
<!--Column1-->
<div class="footer-pad">
<ul class="list-unstyled">
<li>
<a href="#"></a>
</li>
<li>
<a href="#">About us</a>
</li>
<li>
<a href="#">Fellows</a>
</li>
<li>
<a href="#">Join our army</a>
</li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<!--Column1-->
<div class="footer-pad">
<ul class="list-unstyled">
<li>
<a href="#">FAQ</a>
</li>
<li>
<a href="#">Reward conditions</a>
</li>
<li>
<a href="#">Legal mentions</a>
</li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<!--Column1-->
<div class="footer-pad">
<ul class="list-unstyled">
<li>
<a href="#">Sauron4ever.com</a>
</li>
<li>
<a href="#">Follow him also on twitter</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>@font-face {
font-family: "Aniron";
src: url("fonts/pete-klassen_aniron/anicb___.ttf") format("truetype");
src: url("fonts/pete-klassen_aniron/anicm___.ttf") format("truetype");
src: url("fonts/pete-klassen_aniron/anirb___.ttf") format("truetype");
src: url("fonts/pete-klassen_aniron/anirm___.ttf") format("truetype");
}
@font-face {
font-family: "Party Business";
src: url("fonts/nancy-lorenz_party-business/partybusiness.ttf") format("truetype");
}
@font-face {
font-family: "Tengwarc";
src: url("fonts/harri-perala_tengwar-cursive/tngani.ttf") format("truetype");
}
/* Backgrounds, fonts */
.sectionWanted,
.sectionHunters,
.sectionJoin {
background-image: url("https://i.imgur.com/k7MIzm4.png")
}
.elfique {
font-family: Tengwarc;
color: #ed6000;
}
.nav-item,
.bouton,
h1 {
font-family: Aniron;
}
.name, .gimliNom, .reward, .amount, .description, .overlay, .overlay2, .overlay3 {
font-family: "Party Business";
}
.elfique2 {
display: none;
font-family: Tengwarc;
padding:3px;
}
.bouton:hover .elfique2 {
display: inline;
}
.nav-item-active {
font-family: Aniron;
font-size: 0.65em;
}
.nav-link {
color: white !important;
}
.navmenu {
border-right: 1px solid;
font-size: 1em;
}
/* Navbar style*/
.navbar {
background-color: #ed6000;
}
/* Carousel */
.overlay {
font-size: 3em;
position: absolute;
top: 40%;
left: 20%;
width: 50%;
color: white
}
.overlay2 {
font-size: 3em;
position: absolute;
top: 55%;
left: 10%;
width: 80%;
color: white
}
.overlay3 {
font-size: 3em;
position: absolute;
top: 25%;
left: 10%;
width: 45%;
color: white
}
.blockquote-footer {
position: absolute;
right: 30%;
}
.btn-primary-outline {
background-color: transparent;
}
/* Fellows wanted dead style */
h1 {
font-size: 1.2em;
}
.bouton {
color: grey;
margin-bottom: 1em;
}
.bouton:hover {
color: #ed6000;
text-decoration: underline;
}
/* Style for wanted pics*/
.CardImage {
max-height: 373px;
max-width: 326px;
margin-bottom: 1em;
}
.personnage {
background-color: black;
border: 3px solid black;
color: white;
margin-bottom: 1em;
margin-left: 1em;
margin-right: 1em;
}
.reward {
font-size: 1.2em;
color: #000000;
position: relative;
bottom: 10%;
left: 10%;
background-color: rgba(230, 230, 230, 0.8);
padding: 2%;
border-radius: 10px;
width: 80%;
text-align: center;
}
.gimli {
font-family: "Party Business";
font-size: 3em;
color: #ed6000;
position: relative;
bottom: 12%;
left: 10%;
padding: 2%;
border-radius: 10px;
width: 80%;
text-align: center;
}
.gimliNom {
text-decoration: line-through;
text-decoration-color: #ed6000;
font-size: 2em;
position: relative;
top: 37%;
left: 40%;
}
.card:hover .gimliNom {
text-decoration: line-through;
text-decoration-color: #ed6000;
font-size: 4em;
position: relative;
top: 55%;
left: 30%;
}
.card:hover .gimli {
display: none;
}
.grisee {
opacity: 0.4;
}
.card:hover .grisee {
opacity: 1;
}
.card:hover .reward {
display: none;
}
.amount {
color: #ed6002;
}
.name {
font-size: 2em;
position: relative;
top: 35%;
left: 20%;
}
.card:hover .name {
font-size: 3em;
position: relative;
top: 55%;
left: 8%;
}
.description {
color: white;
font-size: 2em;
text-align: center;
}
.grisee:hover .CardImage {
opacity: 1;
}
.grisee:hover .reward {
display: none;
}
.grisee:hover .name {
font-size: 3em;
bottom: 10%;
left: 10%;
}
/* queries */
@media (max-width: 990px) {
.navmenu {
border-right: 0px solid;
}
}
@media (max-width: 1174px) {
.nav-item,
.overlay,
.overlay2,
.overlay3,
.bouton,
h1 {
font-size: 0.7em;
}
}
@media (max-width: 989px) {
.navmenu {
border-right: 0px solid;
}
.nav-item,
.overlay,
.overlay2,
.overlay3,
.bouton,
h1 {
font-size: 0.6em;
}
}
@media (max-width: 760px) {
.nav-item,
.bouton,
h1 {
font-size: 0.5em;
}
.overlay,
.overlay2,
.overlay3 {
font-size: 0.9em;
}
}
@media (max-width: 600px) {
.nav-item,
.bouton,
h1 {
font-size: 0.55em;
}
.overlay,
.overlay2,
.overlay3 {
font-size: 0.8em;
}
}
@media(max-width: 760px) {
.description {
font-size: 1.5em;
}
}