Commit c49b7467 authored by Marianne's avatar Marianne

demo

parent 385cb2e9
content/*
.libsass.json
\ No newline at end of file
.libsass.json
/* FONTS */
@font-face {
font-family: "alphabet";
src: url("../fonts/osp_alfphabet/Alfphabet-IV.ttf");
font-weight: normal;
font-style: normal; }
/* ANIMS */
@keyframes appear {
from {
height: 0; }
to {
height: 80vh; } }
@keyframes rotateAppear {
from {
transform: rotate(-360deg);
opacity: 0;
height: 0; }
to {
transform: rotate(0);
opacity: 1;
height: 80vh; } }
@keyframes hiItsMe {
from {
margin: 0 0 0 -200%; }
to {
margin: 0 -200% 0 0; } }
/* STYLE */
main {
font-family: "alphabet"; }
main .slides {
......@@ -14,3 +39,26 @@ main {
main .slides div.sing .blue {
color: blue;
display: inline; }
main .slides [data-slide='18.6'] img {
animation-duration: 1s;
animation-name: appear;
animation-iteration-count: 4; }
main .slides [data-slide='22.6'] img {
animation-duration: 2s;
animation-name: rotateAppear;
animation-iteration-count: 2;
height: 80vh; }
main .slides [data-slide='26.6'] img {
animation-duration: 2s;
animation-name: hiItsMe;
animation-iteration-count: 2;
height: 80vh; }
main .slides [data-slide='30.4'] .text {
position: absolute; }
main .slides [data-slide='30.4'] img {
height: 80vh; }
main .slides [data-slide='30.4'] .text {
width: 100%;
color: blue;
z-index: 9;
text-align: center; }
/* FONTS */
@font-face{
......@@ -8,6 +10,58 @@
}
/* ANIMS */
@keyframes appear {
from {
height: 0;
}
to {
height: 80vh;
}
}
@keyframes rotateAppear {
from {
transform: rotate(-360deg);
opacity: 0;
height: 0;
}
to {
transform: rotate(0);
opacity: 1;
height: 80vh;
}
}
@keyframes hiItsMe{
from {
margin: 0 0 0 -200%;
}
to {
margin: 0 -200% 0 0;
}
}
/* STYLE */
main{
font-family: "alphabet";
......@@ -29,5 +83,59 @@ main{
}
}
[data-slide='18.6']{
img{
animation-duration: 1s;
animation-name: appear;
animation-iteration-count: 4;
}
}
[data-slide='22.6']{
img{
animation-duration: 2s;
animation-name: rotateAppear;
animation-iteration-count: 2;
height: 80vh;
}
}
[data-slide='26.6']{
img{
animation-duration: 2s;
animation-name: hiItsMe;
animation-iteration-count: 2;
height: 80vh;
}
}
[data-slide='30.4']{
.text{
position: absolute;
}
img{
height: 80vh;
}
.text{
width: 100%;
color: blue;
z-index: 9;
text-align: center;
}
}
}
}
\ No newline at end of file
......@@ -94,41 +94,41 @@ body {
body .track {
display: none; }
main {
font-size: 10rem; }
main .controls {
position: absolute;
font-size: 1rem;
margin: -4rem 0.5rem 0 1.5rem;
display: flex;
width: calc(100% - 2rem);
font-family: "not-courr"; }
main .controls > div {
padding: 0.25rem 0 0.25rem 0;
margin: 0.5rem;
background-color: white;
border: solid 1px; }
main .controls .bar {
width: 20rem;
padding: 0; }
main .controls .bar .progress {
width: 0;
background-color: blue;
height: 100%; }
main .controls .play,
main .controls .pause {
width: 2rem;
text-align: center; }
main .controls .play::before {
content: "❙❙"; }
main .controls .pause::before {
content: "▶"; }
main .controls .seconds {
padding: 0.25rem 0.25rem 0.1rem 0.25rem; }
main .slides > div {
display: none; }
main .slides div.sing {
display: block;
min-width: 100%;
height: 100vh;
padding: 4rem; }
main .controls {
position: absolute;
font-size: 1rem;
margin: -4rem 0.5rem 0 1.5rem;
display: flex;
width: calc(100% - 2rem);
font-family: "not-courr"; }
main .controls > div {
padding: 0.25rem 0 0.25rem 0;
margin: 0.5rem;
background-color: white;
border: solid 1px; }
main .controls .bar {
width: 20rem;
padding: 0; }
main .controls .bar .progress {
width: 0;
background-color: blue;
height: 100%; }
main .controls .play,
main .controls .pause {
width: 2rem;
text-align: center; }
main .controls .play::before {
content: "❙❙"; }
main .controls .pause::before {
content: "▶"; }
main .controls .seconds {
padding: 0.25rem 0.25rem 0.1rem 0.25rem; }
main .slides > div {
display: none; }
main .slides div.sing {
display: block;
min-width: 100%;
height: 100vh;
padding: 4rem; }
......@@ -190,6 +190,164 @@
GI
</div>
</div>
<div data-slide="8.4">
<div>
GIL
</div>
</div>
<div data-slide="8.6">
<div>
GILB
</div>
</div>
<div data-slide="8.8">
<div>
GILBE
</div>
</div>
<div data-slide="9">
<div>
GILBERT
</div>
</div>
<div data-slide="9.2">
<div>
GILBERT</br>M
</div>
</div>
<div data-slide="9.4">
<div>
GILBERT</br>MO
</div>
</div>
<div data-slide="9.6">
<div>
GILBERT</br>MON
</div>
</div>
<div data-slide="9.8">
<div>
GILBERT</br>MONT
</div>
</div>
<div data-slide="10">
<div>
GILBERT</br>MONTA
</div>
</div>
<div data-slide="10.2">
<div>
GILBERT</br>MONTAG
</div>
</div>
<div data-slide="10.4">
<div>
GILBERT</br>MONTAGN
</div>
</div>
<div data-slide="10.6">
<div>
GILBERT</br>MONTAGNÉ
</div>
</div>
<div data-slide="10.8">
<div>
GILBERT</br>MONTAGNÉ’
</div>
</div>
<div data-slide="11">
<div>
GILBERT</br>MONTAGNÉ’S
</div>
</div>
<div data-slide="13.4">
<div>
SOUS
</div>
</div>
<div data-slide="13.8">
<div>
SOUS LES
</div>
</div>
<div data-slide="14.2">
<div>
SOUS LES SUNLIGHTS
</div>
</div>
<div data-slide="14.6">
<div>
SOUS LES SUNLIGHTS DES
</div>
</div>
<div data-slide="15">
<div>
SOUS LES SUNLIGHTS DES TROPIQUES
</div>
</div>
<div data-slide="15.2">
<div class="blue">
SOUS LES SUNLIGHTS DES TROPIQUES
</div>
</div>
<div data-slide="15.4">
<div>
SOUS LES SUNLIGHTS DES TROPIQUES
</div>
</div>
<div data-slide="15.6">
<div class="blue">
SOUS LES SUNLIGHTS DES TROPIQUES
</div>
</div>
<div data-slide="18.6">
<img src="https://sandmanhotelgroup.files.wordpress.com/2013/06/nunavut-sunset.jpg">
</div>
<div data-slide="22.6">
<img src="http://www.webjazba.com/wp-content/uploads/2014/12/beach-wallpaper-moshi-monsters.jpg">
</div>
<div data-slide="26.6">
<img src="http://altoday.com/wp-content/uploads/2015/04/Shrimp.jpg">
</div>
<div data-slide="30.4">
<div class="text">
VIVRE
</div>
<img src="http://altoday.com/wp-content/uploads/2015/04/Shrimp.jpg">
</div>
<div data-slide="32.2">
SOUS L'ÉQUATEUR DU BRÉSIL
</div>
<div data-slide="35.8">
ENTRE
</div>
<div data-slide="36.4">
ENTRE CU
</div>
<div data-slide="36.6">
ENTRE CUBA
</div>
<div data-slide="36.8">
ENTRE CUBA</br>ET
</div>
<div data-slide="37">
ENTRE CUBA</br>ET MA
</div>
<div data-slide="37.8">
ENTRE CUBA</br>ET MANILLE
</div>
<div data-slide="38">
ENTRE CUBA</br>ET <span class="blue">MANILLE</span>
</div>
<div data-slide="39.6">
À L‘HEURE D’ÉTÉ C’EST FACILE
</div>
<div data-slide="43.4">
PRENDS MOI LA MAIN
</div>
<div data-slide="45">
VIENS DANSER
</div>
</div>
<div class="controls">
<div class="pause" data-action="playpause"></div>
......@@ -200,7 +358,7 @@
0 (s)
</div>
</div>
<div class="track" data-src="https://www.youtube.com/watch?v=6iUAu3aBSlI"></div>
<div class="track" data-src="https://www.youtube.com/watch?v=jNhHn0Nmi_E"></div>
</section>
<script type="text/javascript" src="assets/js/youtube_iframe_api.js"></script>
<script type="text/javascript" src="assets/js/karaoPrint.js"></script>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment