<body>
<main>
<h1>L'interMEDIAire</h1>
<h2>Avant - Après</h2>
<div id="beer-slider" class="beer-slider" data-beer-label="" data-beer-start="50">
<img src="https://picsum.photos/id/102/600/400
" alt="Original - Man holding beer">
<div class="beer-reveal" data-beer-label="">
<img src="https://picsum.photos/id/102/600/400?blur=6">
</div>
</div>
</main>
</body>
/*COULEURS*/
$noir: rgba(0,0,0,1);
$noirfonce: rgba(29,31,32,1);
$noiropaque: rgba(29,31,32,.9);
$rose: rgba(152,38,114,1);
$bleu: rgba(128,155,189,1);
$blanc: rgba(255,255,255,1);
$gris: rgba(55,55,55,1);
$gris2: rgba(255,255,255,.8);
$gris3: rgba(204,204,204,1);
$padding: 20px 10px;
/*TOUS LES ELEMENTS*/
*,*:after,*:before {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {
margin: 0px auto;
width: 640px;
background: $noir;
color: $blanc;
font-size: 1em;
padding: $padding;
}
main {
padding: $padding;
background: $noirfonce;
}
a {
color: $bleu;
text-decoration: none;
transition: all .3s ease-in-out;
}
a:hover,a:active {
color: $blanc
}
h1 {
margin: 0;
padding: 0;
font-size: 1.4em;
color: $bleu;
}
h2 {
margin-top: 15px;
width: 100%;
color: $rose;
}
h3 {
display: inline-block;
margin: 10px 0px;
color: $gris2;
text-transform: uppercase;
}
h1,h2,h3 {
font-family: 'Inconsolata', monospace;
}
hr {
margin-top: 20px;
border: 0px solid $bleu;
border-bottom-width: 1px;
}
p {
opacity: .85;
color: $gris2;
line-height: 1.6em;
}
ul {
margin: 0;
padding: 0;
color: $gris3;
list-style: none;
}
img {
margin-top: 20px;
width: 100%;
height: auto;
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
/*www.lintermediaire.be*/
View Compiled
