Skip to content

Instantly share code, notes, and snippets.

@maylisdoucet

maylisdoucet/findtheprecious.html

Created March 4, 2018 23:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save maylisdoucet/bbacd6e0d1f34d0ad97ebb3752612bbc to your computer and use it in GitHub Desktop.
Save maylisdoucet/bbacd6e0d1f34d0ad97ebb3752612bbc to your computer and use it in GitHub Desktop.
Download ZIP
Raw
findtheprecious.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" >
<!-- Un site typique optimisé pour les mobiles contient cette meta. -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sauron is very good bro.</title>
<!-- mais il aurait fallu utiliser ce lien après avoir télécharger Bootstrap : bootstrap/css/bootstrap.min.css" rel="stylesheet -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- lier à la page CSS. -->
<link rel="stylesheet" href="sauron.css">
</head>
<!-- BODY
================================================== -->
<body>
<div class="container1">
<!-- NAVBAR
================================================== -->
<div class="container-fluid">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="https://image.noelshack.com/fichiers/2018/09/1/1519654753-logo.png" alt="logofindtheprecious"></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="menn">Fellows</a></li>
<li><a href="ligne">I</a></li>
<li><a href="menu">Thering</a></li>
<li><a href="ligne">I</a></li>
<li><a href="menn">Rewards</a></li>
<li><a href="ligne">I</a></li>
<li><a href="menn">Hunters</a></li>
<li><a href="ligne">I</a></li>
<li><a href="menn">Join</a></li>
<li><a href="ligne">I</a></li>
<li><a href="menn">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</div>
<!-- CAROUSSEL
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="https://cdn-images-1.medium.com/max/1200/1*K9xJno8xofgnEB8Sw2OBEw.png" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Sauron is a very good bro.</h1>
<p>Please held him cofind his ring.</p>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="https://integrallife.com/wp-content/uploads/2015/12/DarthVader-1200.jpg" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>He’s holding a thermal detonator!</h1>
<p>Three, two, one. BOOM!</p>
</div>
</div>
</div>
<div class="item">
<img class="third-slide" src="https://i1.wp.com/narikchase.com/wp-content/uploads/2017/11/Darth-Vader.jpg?fit=1200%2C675" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<h1>You can destroy the Emperor. </h1>
<p>He has foreseen this. It is your destiny.</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- PILLS
================================================== -->
<div class="largecontainer">
<div class="fellow">
<h2>Fellow wanted dead for alive if you want to eat them later</h2>
</div>
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#">Most wanted</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Most dangerous</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Already captured</a>
</li>
</ul>
<div class='container'>
<div class="row">
<!-- THUMBNAILS 1
================================================== -->
<div class="col-xs-12 col-md-4">
<div class="thumbnail">
<div class="box">
<div class="reward"><p>reward <br/><span> 1000</span> golden coins</p></div>
<img src="gandalf.png" alt="aragorn">
<div class="surname">Gandalf</div>
<div class="caption">
<p>A very dangerous<br/>Wizard balrog killer.</p>
</div>
</div>
</div>
</div>
<!-- THUMBNAILS 2
================================================== -->
<div class="col-xs-12 col-md-4">
<div class="thumbnail">
<div class="box">
<div class="reward"><p>reward <br/> <span> 1000</span> golden coins</p></div>
<img src="aragorn.png" alt="aragorn">
<div class="surname">Aragorn</div>
<div class="caption">
<p>Sauron's finger says him <br/> his sword is dangerous...</p>
</div>
</div>
</div>
</div>
<!-- THUMBNAILS 3
================================================== -->
<div class="col-xs-12 col-md-4">
<div class="thumbnail">
<div class="box">
<div class="reward"><p>reward <br/><span> 1000</span> golden coins</p></div>
<img src="gimli.png" alt="gimli">
<div class="surname"><span><del>Gimli</del></span></div>
<div class="caption">
<p>A dwarf wich a beard <br/> and an axe.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
En fin de page (pour ne pas ralentir le chargement) se trouvent les appels JavaScript (utiles si on utilise des plugins jQuery) :
================================================== -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Raw
sauron.css
@font-face {
font-family: 'anirm___';
src: url('anirm___.ttf');
font-style: normal;
}
h2 /* Utilisation de la police qu'on vient de définir sur les titres */
{
font-family: 'anirm___', Arial, serif;
}
/* NAVBAR
-------------------------------------------------- */
.navbar-fixed-top
{
background-color: rgb(235,107,45);
border-color: rgb(235,107,45);
font-family: 'anirm___', Arial, serif;
}
.navbar-nav a {
color: white !important;
}
li
{
color: white;
}
nav ul li:hover
{
text-decoration: underline;
}
/* CAROUSEL
-------------------------------------------------- */
.carousel {
height: 500px;
margin-bottom: 60px;
}
/* le texte au centre */
.carousel-caption {
bottom: 30%;
font-family: 'anirm___', Arial, serif;
}
.carousel .item {
height: 500px;
background-color: white;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
/* PILLS
-------------------------------------------------- */
.nav-link
{
color: rgba(48,48,48,1);
margin: 5em;
font-weight: bold;
font-family: 'anirm___', Arial, serif;
}
/* VIGNETTE
-------------------------------------------------- */
span
{
color: #FF8C00;
}
.fellow
{
text-align: center;
}
/* Les vignettes */
.thumbnail
{
position: absolute;
width: 90%;
height: 90%;
margin: 0;
padding: 0;
background-color: black !important;
}
/* Image de la vignette */
.thumbnail img
{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
z-index:1;
transition: .6s ease;
opacity: .5;
}
/* Reward : encadré blanc aux bords arrondis*/
.reward
{
position: absolute;
width:300px;
height:80px;
left: 20px;
top: 20px;
right: 32px;
padding: 0;
border-radius: 5px;
background-color:rgba(255, 255, 255, 0.7);
transition: .5s ease;
z-index:2;
}
/* txt dans l'encadré blanc */
.reward p
{
font-size: 0,5em;
color: black;
margin: 10px 52px 10px 40px;
z-index:3;
font-family: 'anirm___', Arial, serif;
}
/* Gandalf */
.surname
{
font-size: 3em;
font-weight: bold;
color: white;
position: absolute;
left: 85px;
top: 200px;
right: 10px;
padding: 0;
z-index:4;
}
/* Les encadrés noirs */
.caption
{
background-color: black;
}
/* Le texte des encadrés noirs */
.caption p
{
color: grey;
background-color: black;
font-family: 'anirm___', Arial, serif;
}
/* Opacité des vignettes */
.thumbnail img:hover {
opacity: 1;
transition: 2s;
}
.box:hover .reward {
display: none;
}
.box:hover .surname {
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment