Skip to content

Instantly share code, notes, and snippets.

@stephanBerger

stephanBerger/index.html

Forked from BastienSaulnier/index.html
Created August 23, 2019 19:58
Show Gist options
  • Save stephanBerger/ea55871255e5bedaee209868c63ea5a7 to your computer and use it in GitHub Desktop.
Save stephanBerger/ea55871255e5bedaee209868c63ea5a7 to your computer and use it in GitHub Desktop.
Download ZIP
Donne du style avec CSS - Wild Code School
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FindThePrecious.com</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/8529c819c9.js"></script>
<meta content="IE=edge" http-equiv=X-UA-Compatible>
<meta content="width=device-width, initial-scale=1" name="viewport">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
<!--[if IE 7]>
<link href="css/stylesie7.css" rel="stylesheet" type="text/css" media="screen">
<![endif]-->
</head>
<body>
<main>
<header>
<nav class="menu">
<div class="center">
<a href="index.html" class="title">FindThePrecious.com</a>
<ul>
<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>
</div>
</nav>
<div class="hero">
<div class="center">
<div class="carousel">
<a href="#" class="prevarrow"><i class="fas fa-chevron-left"></i></a>
<img src="https://via.placeholder.com/811x225" alt="image">
<h1>
<strong>Dangerous fellowship try to destroy the ring</strong>
<br>
Orcs, goblins, Balrogs, protect your master Sauron !
</h1>
<a href="#" class="nextarrow"><i class="fas fa-chevron-right"></i></a>
</div>
</div>
</div>
</header>
<section id="fellows">
<div class="center">
<h2>
<strong>Fellows wanted dead</strong> (or alive if you want to eat them later)
</h2>
<div class="selector">
<ul>
<li><button type="button" class="active">Most wanted</button></li>
<li><button type="button">Most dangerous</button></li>
<li><button type="button">Already captured</button></li>
</ul>
</div>
<div class="thumbnails">
<article id="gandalf">
<figure class="image">
<img src="http://images.innoveduc.fr/integration_gandalf.png" alt="image">
<p>reward <strong>1000</strong> golden coins</p>
</figure>
<div class="content">
<h4>The Wizard</h4><br>
<p>Small description...</p>
</div>
</article>
<article id="pippin">
<figure class="image">
<div class="status">
<p>DEAD</p>
</div>
<img src="https://i.pinimg.com/originals/b8/9f/8e/b89f8eeb9b1f02674f8e03f7050facfd.jpg" alt="image">
</figure>
<div class="content">
<h4>Hobbit #3</h4><br>
<p>Small description...</p>
</div>
</article>
<article id="gimli">
<figure class="image">
<img src="https://p1.storage.canalblog.com/29/44/185200/7099229.jpg" alt="image">
<p>reward <strong>250</strong> golden coins</p>
</figure>
<div class="content">
<h4>Yummy Dwarf</h4><br>
<p>Small description...</p>
</div>
</article>
</div>
</div>
</section>
<section id="reward">
<div class="center">
<hr>
<h2>
<strong>I have captured on of them, how to get my reward ?</strong>
</h2>
<div class="content">
<img src="https://via.placeholder.com/140" alt="image">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc maximus, nulla ut commodo sagittis, sapien dui mattis dui, non pulvinar lorem felis nec erat. Aliquam egestas, velit at condimentum placerat, sem sapien laoreet mauris, dictum porttitor lacus est nec enim. Vivamus feugiat elit lorem, eu porttitor ante ultrices id. Phasellus suscipit tellus ante, nec dignissim elit imperdiet nec. Nullam fringilla feugiat nisl. Ut pretium, metus venenatis dictum viverra, dui metus finibus enim, ac rhoncus sem lorem vitae mauris. Suspendisse ut venenatis libero. Suspendisse lorem felis, pretium in maximus id, tempor non ipsum</p>
<div class="clear"></div>
<div class="button">
<a href="#contact" class="primary-btn">Contact us</a>
</div>
</div>
</div>
</section>
<section id="hunters">
<div class="center">
<hr>
<h2>Best hunters</h2>
<div class="hunt-thumb">
<article>
<figure><img src="https://via.placeholder.com/70" alt="image"></figure>
<div class="hunt-thumb-content">
<h4>ElvesKiller22</h4>
<p>2 captures - <a href="">Profile</a> <!-- Lien vers le profil utilisateur/id du compte dans la BDD ? -->
</p>
<button type="button"><i class="fas fa-thumbs-up"></i> Like 68k</button>
</div>
</article>
<article>
<figure><img src="https://via.placeholder.com/70" alt="image"></figure>
<div class="hunt-thumb-content">
<h4>Goblin45</h4>
<p>1 captures - <a href="">Profile</a> <!-- Lien vers le profil utilisateur/id du compte dans la BDD ? -->
</p>
<button type="button"><i class="fas fa-thumbs-up"></i> Like 68k</button>
</div>
</article>
<div class="clear"></div>
</div>
</div>
</section>
<section id="ring">
<div class="center">
<hr>
<h2>About the ring</h2>
<div class="capabilities">
<h3>Ring Capabilities</h3>
<p>What can our master Sauron do with the ring ?</p>
<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>
</div>
<div class="comments">
<h3>Why the ring is awesome ?</h3>
<div class="content">
<div class="comment">
<p><strong>My preciooooooussssss ! Hrk Hrk, we want our preeciooooouuusssss !! </strong></p>
<p>Gollum</p>
</div>
<img src="https://via.placeholder.com/110" alt="image">
<div class="clear"></div>
</div>
</div>
</div>
</section>
<section id="army">
<div class="center">
<hr>
<h2>Join Mordor Army, we need you !</h2>
<div class="content">
<img src="https://via.placeholder.com/140" alt="image">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc maximus, nulla ut commodo sagittis, sapien dui mattis dui, non pulvinar lorem felis nec erat. Aliquam egestas, velit at condimentum placerat, sem sapien laoreet mauris, dictum porttitor lacus est nec enim. Vivamus feugiat elit lorem, eu porttitor ante ultrices id. Phasellus suscipit tellus ante, nec dignissim elit imperdiet nec. Nullam fringilla feugiat nisl. Ut pretium, metus venenatis dictum viverra, dui metus finibus enim, ac rhoncus sem lorem vitae mauris. Suspendisse ut venenatis libero. Suspendisse lorem felis, pretium in maximus id, tempor non ipsum</p>
<div class="clear"></div>
<div class="button">
<a href="http://sauronrulesthemall.com" class="primary-btn">More info on SauronRulesThemAll.com</a>
</div>
</div>
</div>
</section>
<section id="contact">
<div class="center">
<hr>
<h2>Contact us</h2>
<!-- Specifier l'action PHP ? ;) -->
<form method="post" action="form-action.php">
<p><input type="email" id="mail" name="mail" placeholder="&#xf1fa;" style="font-family:FontAwesome"></p>
<p><input type="text" id="address" name="address" placeholder="&#xf015;" style="font-family:FontAwesome"></p>
<p>
<select name="select" id="select">
<option value="seen" selected>I have seen one of them</option>
</select>
</p>
<p><textarea id="message" name="message" placeholder="Your message"></textarea></p>
</form>
</div>
</section>
<footer>
<div class="center">
<nav class="footer">
<!-- href vers les pages correspondantes -->
<ul class="left">
<li><a href="">About us</a></li>
<li><a href="">Fellows</a></li>
<li><a href="">Join our army</a></li>
</ul>
<ul class="right">
<li><a href="">FAQ</a></li>
<li><a href="">Reward conditions</a></li>
<li><a href="">Legal mentions</a></li>
</ul>
</nav>
<div class="tweet">
<a href="https://sauron4ever.com">Sauron4Ever.com</a>
<br>
<a href="">Follow him also on twitter</a> <!-- href vers profil twitter/souscription auto -->
</div>
</div>
</footer>
</main>
</body>
</html>
Raw
style.css
@charset "utf-8";
header,
section,
footer,
aside,
nav,
main,
article,
figure {
display: block;
}
div,
header,
nav,
article,
section,
aside,
footer,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
ul,
li,
figure,
figcaption,
class,
img {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
background-color: white;
border: 0 solid transparent;
font-size: 16px;
margin: 0;
min-height: 100%;
padding: 0;
width: 100%;
display: block;
font-family: 'Source Sans Pro', sans-serif;
}
img,
object,
embed,
canvas,
video,
audio,
picture,
svg {
max-width: 100%;
height: auto;
}
img {
display: block;
}
a {
text-decoration: none;
color: black;
}
/* ------------------------------- RECURENTES -- */
.clear {
display: block;
zoom: 1;
}
.clear:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
.center {
width: 811px;
margin: 0 auto;
}
section#fellows,
section#reward,
section#hunters,
section#ring,
section#army,
section#contact {
margin-bottom: 30px;
}
/* ------------------------------- END RECURENTES -- */
/* ------------------------------- SIMILAIRES ------ */
.primary-btn {
border: solid 1px #757575;
padding: 10px 20px;
border-radius: 5px;
transition: all .7s;
}
.primary-btn:hover {
background-color: #757575;
color: white;
}
h2 {
font-weight: 400;
font-size: 20px;
margin-bottom: 10px;
margin-top: 10px;
}
h2 strong {
font-weight: 400;
font-size: 24px;
}
hr {
margin: 0 -10px;
}
/* ------------------------------- END SIMILAIRES -- */
nav.menu {
background-color: #424242;
}
nav.menu a.title {
color: #E0E0E0;
font-size: 20px;
width: 185px;
line-height: 33px;
}
nav.menu ul {
display: inline-block;
list-style-type: none;
font-size: 0;
width: calc(100% - 185px);
float: right;
}
nav.menu ul li {
display: inline-block;
font-size: 14px;
width: 16%;
text-align: center;
transition: all .7s;
}
nav.menu ul li a {
line-height: 33px;
color: #E0E0E0;
}
nav.menu ul li:hover {
background-color: #E0E0E0;
}
nav.menu ul li:hover a {
color: #424242;
}
div.hero {
margin-bottom: 10px;
}
div.hero div.carousel {
position: relative;
}
div.hero div.carousel a {
position: absolute;
top: 35%;
}
div.hero div.carousel a i {
font-size: 30px;
}
div.hero div.carousel a.prevarrow {
left: 20px;
}
div.hero div.carousel a.nextarrow {
right: 20px;
}
div.hero div.carousel img {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
div.hero div.carousel h1 {
font-weight: 400;
position: absolute;
top: 25%;
left: 158px;
font-weight: 300;
font-size: 24px;
line-height: 40px;
}
div.hero div.carousel h1 strong {
font-weight: 400;
}
section#fellows div.center {
padding: 0 20px;
}
section#fellows div.center div.selector {
margin-bottom: 10px;
}
section#fellows div.center div.selector ul {
list-style-type: none;
width: 480px;
font-size: 0;
margin: 0 auto;
}
section#fellows div.center div.selector ul li {
display: inline-block;
text-align: center;
width: 33%;
}
section#fellows div.center div.selector ul li button.active {
background-color: #757575;
color: #FFFFFF;
}
section#fellows div.center div.selector ul li button {
font-size: 18px;
font-weight: 400;
text-align: center;
border: none;
border-radius: 8px;
background-color: transparent;
padding: 6px 10px;
}
section#fellows div.center div.selector ul li button:hover {
cursor: pointer;
}
section#fellows div.center div.thumbnails {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
section#fellows div.center div.thumbnails article {
width: 33%;
cursor: pointer;
border: solid 1px #c4c4c4;
padding: 2px;
}
section#fellows div.center div.thumbnails article figure.image {
position: relative;
color: white;
margin-bottom: 10px;
}
section#fellows div.center div.thumbnails article figure.image div.status p {
width: 100%;
font-size: 36px;
font-weight: 700;
padding: 0;
margin: 55% 0 0 0;
opacity: 1;
}
section#fellows div.center div.thumbnails article figure.image p {
position: absolute;
top: 0px;
padding: 10px;
margin: 10px;
text-align: center;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 10px;
font-size: 24px;
color: black;
line-height: 25px;
}
section#fellows div.center div.thumbnails article figure.image p strong {
color: orange;
font-weight: 400;
}
section#fellows div.center div.thumbnails article figure.image img {
opacity: 0.5;
transition: all .7s;
height: 293px;
width: 252px;
border-radius: 10px;
}
section#fellows div.center div.thumbnails article figure.image:before {
content: 'Gandalf';
width: 100%;
text-align: center;
position: absolute;
z-index: 999;
top: 50%;
font-size: 42px;
transition: all .7s;
}
section#fellows div.center div.thumbnails article figure.image:hover p {
opacity: 0;
transition: all .7s;
}
section#fellows div.center div.thumbnails article figure.image:hover img {
opacity: 1;
}
section#fellows div.center div.thumbnails article figure.image:hover::before {
top: 70%;
transform: scale3d(0.6, 0.6, 0.6);
}
section#fellows div.center div.thumbnails article div.content h4 {
font-size: 24px;
font-weight: 700;
margin-left: 20px;
margin-bottom: -20px;
}
section#fellows div.center div.thumbnails article div.content p {
font-size: 16px;
margin-left: 5px;
}
section#fellows div.center div.thumbnails article#pippin figure.image img {
filter: grayscale(1);
transition: all .7s;
}
section#fellows div.center div.thumbnails article#pippin figure.image:before {
top: 70%;
}
section#fellows div.center div.thumbnails article#pippin figure.image:hover {
filter: grayscale(0);
}
section#fellows div.center div.thumbnails article#pippin figure.image:before {
content: 'Pippin';
opacity: 0;
}
section#fellows div.center div.thumbnails article#pippin figure.image:hover::before {
transform: scale3d(0.5, 0.5, 0.5);
opacity: 1;
}
section#fellows div.center div.thumbnails article#gimli figure.image:before {
content: 'Gimli';
}
section#reward div.center,
section#army div.center {
padding: 0 20px;
}
section#reward div.center div.content img,
section#army div.center div.content img {
float: right;
border-radius: 10px;
}
section#reward div.center div.content p,
section#army div.center div.content p {
margin-bottom: 20px;
}
section#reward div.center div.content div.button,
section#army div.center div.content div.button {
width: 631px;
}
section#reward div.center div.content div.button a.primary-btn,
section#army div.center div.content div.button a.primary-btn {
margin-left: calc(50% - 56px);
width: 115px;
}
section#hunters div.center {
padding: 0 20px;
}
section#hunters div.center h2 {
font-size: 24px;
}
section#hunters div.center div.hunt-thumb {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
section#hunters div.center div.hunt-thumb article {
width: 50%;
}
section#hunters div.center div.hunt-thumb article figure {
float: left;
margin-right: 10px;
}
section#hunters div.center div.hunt-thumb article figure img {
border-radius: 5px;
}
section#hunters div.center div.hunt-thumb article div.hunt-thumb-content h4 {
font-size: 20px;
}
section#hunters div.center div.hunt-thumb article div.hunt-thumb-content p {
font-size: 14px;
}
section#hunters div.center div.hunt-thumb article div.hunt-thumb-content p a {
font-size: 16px;
font-weight: 700;
text-decoration: underline;
}
section#hunters div.center div.hunt-thumb article div.hunt-thumb-content button {
border: none;
border-radius: 4px;
color: white;
padding: 2px 6px;
background-color: rgba(0, 0, 0, 0.6);
transition: all .7s;
}
section#hunters div.center div.hunt-thumb article div.hunt-thumb-content button:hover {
color: rgba(0, 0, 0, 0.6);
background-color: #7b7b7b;
cursor: pointer;
}
section#ring div.center {
padding: 0 20px;
}
section#ring div.center h2 {
font-size: 24px;
}
section#ring div.capabilities,
section#ring div.comments {
border: solid 1px #eeeeee;
border-radius: 8px;
margin-bottom: 20px;
}
section#ring div.capabilities h3,
section#ring div.comments h3 {
font-size: 16px;
background-color: #eeeeee;
padding: 5px 10px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
section#ring div.capabilities p {
font-size: 16px;
margin: 10px 0 20px 20px;
}
section#ring div.capabilities table {
font-size: 13px;
margin: 0 auto 8px auto;
width: 666px;
text-align: center;
padding: 0;
border-collapse: collapse;
}
section#ring div.capabilities table thead tr:nth-child(1),
section#ring div.capabilities table tbody tr:nth-child(1) {
background-color: #e6e6e6;
}
section#ring div.capabilities table thead tr:nth-child(3),
section#ring div.capabilities table tbody tr:nth-child(3) {
background-color: #e6e6e6;
}
section#ring div.capabilities table thead tr th,
section#ring div.capabilities table tbody tr th,
section#ring div.capabilities table thead tr td,
section#ring div.capabilities table tbody tr td {
line-height: 34px;
width: 50%;
border: solid 1px black;
}
section#ring div.capabilities table thead tr th,
section#ring div.capabilities table tbody tr th {
color: white;
background-color: #9e9e9e;
}
section#ring div.comments div.content {
padding: 5px 10px 10px 40px;
}
section#ring div.comments div.content div.comment {
display: inline-block;
margin-top: 20px;
}
section#ring div.comments div.content div.comment p {
margin-bottom: 10px;
color: #c3c3c3;
text-align: right;
font-size: 16px;
}
section#ring div.comments div.content div.comment p strong {
color: black;
font-size: 18px;
font-weight: 400;
text-align: left;
}
section#ring div.comments div.content img {
border-radius: 50%;
float: right;
}
section#army div.center h2 {
font-size: 24px;
}
section#army div.center div.content img {
float: left;
margin-right: 10px;
}
section#contact div.center h2 {
font-size: 24px;
}
section#contact div.center form {
width: 635px;
margin: 0 auto;
}
section#contact div.center form p input,
section#contact div.center form p select,
section#contact div.center form p textarea {
width: 100%;
margin-bottom: 15px;
padding: 5px;
border: solid 1px black;
}
section#contact div.center form p textarea {
min-height: 100px;
}
section#contact div.center form p select {
border: solid 1px #757575;
border-radius: 5px;
}
footer {
background-color: #424242;
}
footer div.center {
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
padding: 40px 20px;
}
footer div.center nav.footer {
width: 60%;
}
footer div.center nav.footer ul {
display: inline-block;
width: 40%;
font-size: 0;
}
footer div.center nav.footer ul li {
line-height: 20px;
}
footer div.center nav.footer ul li a {
font-size: 14px;
color: #F5F5F5;
transition: all .7s;
}
footer div.center nav.footer ul li a:hover {
color: #909090;
}
footer div.center div.tweet {
padding-top: 20px;
width: 40%;
}
footer div.center div.tweet a {
font-weight: 700;
color: #F5F5F5;
transition: all .7s;
}
footer div.center div.tweet a:hover {
color: #909090;
}
/* ------------------------ MEDIA QUERIES 811px ---- */
@media screen and (max-width: 811px) {
.center {
width: 100%;
margin: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment