2015-12-09 09:33:17 +01:00
<!DOCTYPE html>
< html >
2016-04-18 19:45:06 +02:00
< head >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta charset = "UTF-8" >
< link type = "text/css" rel = "stylesheet" href = "../static/css/fonts.css" media = "screen,projection" / >
< link type = "text/css" rel = "stylesheet" href = "../static/css/style-page.css" media = "screen,projection" / >
< link type = "text/css" rel = "stylesheet" href = "../static/css/baguetteBox.min.css" media = "screen,projection" / >
< link type = "text/css" rel = "stylesheet" href = "../static/css/panorama_viewer.css" media = "screen,projection" / >
<!-- Let browser know website is optimized for mobile -->
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" / >
< title > my first gallery · Example gallery< / title >
< / head >
< body >
2016-02-09 07:32:06 +01:00
2016-05-04 14:19:46 +02:00
2015-12-09 09:33:17 +01:00
< section class = "full-picture" style = "background: transparent url('stuff.png') no-repeat scroll center top / cover;" >
2016-04-18 19:45:06 +02:00
< div class = "picture-text" >
< div class = "picture-text-column" >
< h1 > Beautiful Title< / h1 >
< h2 > pouet pouet< / h2 >
< div class = "datetime" > 08 December 2015< / div >
2015-12-09 09:33:17 +01:00
< / div >
2016-04-18 19:45:06 +02:00
< / div >
2015-12-09 09:33:17 +01:00
< / section >
2016-05-04 14:19:46 +02:00
2016-04-18 19:45:06 +02:00
2016-02-09 07:32:06 +01:00
2016-05-04 14:19:46 +02:00
< section class = "full-picture" >
< div class = "video-container" >
< div class = "title-container" >
< div class = "headline" >
< h1 > Beautiful Title< / h1 >
< h2 > pouet pouet< / h2 >
< div class = "datetime" > 08 December 2015< / div >
< / div >
< / div >
< video autoplay loop muted class = "fillWidth" >
< source src = "video.mp4" type = "video/webm" data-source = "video.mp4" data-format = "vp8" data-extension = "webm" >
< / video >
< img class = "lazy" src = "video.-2000.png" >
2016-04-18 19:45:06 +02:00
< / div >
2015-12-09 09:33:17 +01:00
< / section >
2016-04-18 19:45:06 +02:00
2016-05-04 14:19:46 +02:00
< section class = "bordered-picture baguette" style = "position: relative;" >
< img class = "lazy" data-original = "video.-2000.png" src = "video.-2000.png" alt = "" >
< video class = "lazy" id = "video" poster = "video.-2000.png" alt = "" autoplay = "autoplay" loop = "loop" preload = "auto" muted >
< source src = "video.mp4" type = "video/webm" data-source = "video.mp4" data-format = "vp8" data-extension = "webm" >
< / video >
< / section >
2016-04-18 19:45:06 +02:00
2016-05-04 14:19:46 +02:00
< section class = "bordered-picture baguette" >
< div class = "caption" >
< a href = "stuff.png " >
< img class = "lazy" src = "stuff.png" data-original = "stuff.png" alt = "" >
< / div >
< / a >
2016-04-18 19:45:06 +02:00
2016-05-04 14:19:46 +02:00
< / section >
2016-04-18 19:45:06 +02:00
2016-05-04 14:19:46 +02:00
< section class = "bordered-picture baguette" style = "position: relative;" >
< img class = "lazy" data-original = "video.-2000.png" src = "video.-2000.png" alt = "" >
< video class = "lazy" id = "video" poster = "video.-2000.png" alt = "" autoplay = "autoplay" loop = "loop" preload = "auto" muted >
< source src = "video.mp4" type = "video/webm" data-source = "video.mp4" data-format = "vp8" data-extension = "webm" >
< / video >
< / section >
< section class = "bordered-picture baguette" >
< div class = "caption" >
< a href = "stuff.png data-caption=" plop " " >
< img class = "lazy" src = "stuff.png" data-original = "stuff.png" alt = "" >
< div class = "caption__overlay" >
< h5 class = "caption__overlay__title" > plop< / h5 >
< / div >
< / div >
< / a >
< / section >
2016-04-18 19:45:06 +02:00
< section class = "text" >
2015-12-09 09:33:17 +01:00
« voici plein de blabla à rajouter et < b > ceci est du gras< / b > et encore plein plein plein plein de text car je veux voir comment ça va wrapper car c'est important et il faut pas que j'oublie de mettre des margins en % sinon ça va pas le faire alala là ça devrait aller »
< / section >
2016-04-18 19:45:06 +02:00
2016-05-04 14:19:46 +02:00
< section class = "pictures-group baguette" >
< div class = "pictures-line" >
< div class = "picture caption" >
< a href = "stuff.png" data-caption = "test" >
< img class = "lazy" src = "stuff.-x600.png" data-original = "stuff.-x600.png" alt = "" >
< div class = "caption__overlay" >
< h5 class = "caption__overlay__title" > test< / h5 >
< / div >
< / a >
< / div >
< div class = "separator" > < / div >
< div class = "picture caption" >
< img class = "lazy" data-original = "video.-600.png" src = "video.-600.png" alt = "" >
< video class = "lazy" id = "video" poster = "video.-600.png" alt = "" autoplay = "autoplay" loop = "loop" preload = "auto" muted >
< source src = "video.mp4" type = "video/webm" data-source = "video.mp4" data-format = "vp8" data-extension = "webm" >
< / video >
< / div >
< div class = "separator" > < / div >
< div class = "picture caption" >
< img class = "lazy" data-original = "video.-600.png" src = "video.-600.png" alt = "" >
< video class = "lazy" id = "video" poster = "video.-600.png" alt = "" autoplay = "autoplay" loop = "loop" preload = "auto" muted >
< source src = "video.mp4" type = "video/webm" data-source = "video.mp4" data-format = "vp8" data-extension = "webm" >
< / video >
< / div >
< / div >
< div class = "pictures-line" >
< div class = "picture caption" >
< a href = "stuff.png" >
< img class = "lazy" src = "stuff.-x600.png" data-original = "stuff.-x600.png" alt = "" >
< / a >
< / div >
< div class = "separator" > < / div >
< div class = "picture caption" >
< img class = "lazy" data-original = "video.-600.png" src = "video.-600.png" alt = "" >
< video class = "lazy" id = "video" poster = "video.-600.png" alt = "" autoplay = "autoplay" loop = "loop" preload = "auto" muted >
< source src = "video.mp4" type = "video/webm" data-source = "video.mp4" data-format = "vp8" data-extension = "webm" >
< / video >
< / div >
< / div >
< / section >
2015-12-09 09:33:17 +01:00
2016-05-04 14:19:46 +02:00
< section class = "pictures-group baguette" >
2015-12-09 09:33:17 +01:00
< div class = "pictures-line" >
2016-05-04 14:19:46 +02:00
2016-04-18 19:45:06 +02:00
< div class = "picture caption" >
2016-05-04 14:19:46 +02:00
2016-04-18 19:45:06 +02:00
< a href = "stuff.png" data-caption = "test" >
2016-05-04 14:19:46 +02:00
< img class = "lazy" src = "stuff.-x600.png" data-original = "stuff.-x600.png" alt = "" >
2016-04-18 19:45:06 +02:00
< div class = "caption__overlay" >
< h5 class = "caption__overlay__title" > test< / h5 >
< / div >
< / a >
2016-05-04 14:19:46 +02:00
2016-04-18 19:45:06 +02:00
< / div >
2015-12-09 09:33:17 +01:00
2016-04-18 19:45:06 +02:00
< div class = "separator" > < / div >
2015-12-09 09:33:17 +01:00
2016-04-18 19:45:06 +02:00
2016-05-04 14:19:46 +02:00
2016-04-18 19:45:06 +02:00
< div class = "picture caption" >
2016-05-04 14:19:46 +02:00
2016-04-18 19:45:06 +02:00
< a href = "stuff.png" data-caption = "test" >
2016-05-04 14:19:46 +02:00
< img class = "lazy" src = "stuff.-x600.png" data-original = "stuff.-x600.png" alt = "" >
2016-04-18 19:45:06 +02:00
< div class = "caption__overlay" >
< h5 class = "caption__overlay__title" > test< / h5 >
< / div >
< / a >
2016-05-04 14:19:46 +02:00
2016-04-18 19:45:06 +02:00
< / div >
< div class = "separator" > < / div >
2016-05-04 14:19:46 +02:00
2016-04-18 19:45:06 +02:00
< div class = "picture caption" >
2016-05-04 14:19:46 +02:00
2016-04-18 19:45:06 +02:00
< a href = "stuff.png" data-caption = "test" >
2016-05-04 14:19:46 +02:00
< img class = "lazy" src = "stuff.-x600.png" data-original = "stuff.-x600.png" alt = "" >
2016-04-18 19:45:06 +02:00
< div class = "caption__overlay" >
< h5 class = "caption__overlay__title" > test< / h5 >
< / div >
< / a >
2016-05-04 14:19:46 +02:00
2016-04-18 19:45:06 +02:00
< / div >
2015-12-09 09:33:17 +01:00
< / div >
2016-04-18 19:45:06 +02:00
2015-12-09 09:33:17 +01:00
< div class = "pictures-line" >
2016-05-04 14:19:46 +02:00
2016-04-18 19:45:06 +02:00
< div class = "picture caption" >
2016-05-04 14:19:46 +02:00
2016-04-18 19:45:06 +02:00
< a href = "stuff.png" >
2016-05-04 14:19:46 +02:00
< img class = "lazy" src = "stuff.-x600.png" data-original = "stuff.-x600.png" alt = "" >
2016-04-18 19:45:06 +02:00
< / a >
2016-05-04 14:19:46 +02:00
2016-04-18 19:45:06 +02:00
< / div >
< div class = "separator" > < / div >
2016-05-04 14:19:46 +02:00
2016-04-18 19:45:06 +02:00
< div class = "picture caption" >
2016-05-04 14:19:46 +02:00
2016-04-18 19:45:06 +02:00
< a href = "stuff.png" >
2016-05-04 14:19:46 +02:00
< img class = "lazy" src = "stuff.-x600.png" data-original = "stuff.-x600.png" alt = "" >
2016-04-18 19:45:06 +02:00
< / a >
2016-05-04 14:19:46 +02:00
2016-04-18 19:45:06 +02:00
< / div >
2015-12-09 09:33:17 +01:00
< / div >
2016-04-18 19:45:06 +02:00
2016-05-04 14:19:46 +02:00
< / section >
2016-04-18 19:45:06 +02:00
2016-02-09 07:32:06 +01:00
2016-05-04 14:19:46 +02:00
2015-12-09 09:33:17 +01:00
< section class = "full-picture" style = "background: transparent url('stuff.png') no-repeat scroll center top / cover;" >
< / section >
2016-05-04 14:19:46 +02:00
< section class = "full-picture" >
< div class = "video-container" >
< video autoplay loop muted class = "fillWidth" >
< source src = "video.mp4" type = "video/webm" data-source = "video.mp4" data-format = "vp8" data-extension = "webm" >
< / video >
< img class = "lazy" src = "video.-2000.png" >
< / div >
< / section >
2016-04-18 19:45:06 +02:00
< div class = "back-to-home" >
< hr >
< a href = "../" >
2016-05-04 14:19:46 +02:00
< div id = "logo" src = "./../static/img/logo.svg" >
2016-04-18 19:45:06 +02:00
HOME
< / div >
< / a >
< / div >
< script type = "text/javascript" src = "../static/js/jquery-2.1.4.min.js" charset = "utf-8" > < / script >
< script type = "text/javascript" src = "../static/js/baguetteBox.min.js" charset = "utf-8" > < / script >
< script type = "text/javascript" src = "../static/js/jquery.panorama_viewer.min.js" charset = "utf-8" > < / script >
2016-05-04 14:19:46 +02:00
< script type = "text/javascript" src = "../static/js/jquery.lazyload.min.js" charset = "utf-8" > < / script >
< script type = "text/javascript" >
2016-04-18 19:45:06 +02:00
$(function() {
baguetteBox.run(".baguette", {});
$(".panorama").panorama_viewer({
repeat: true,
direction: "horizontal",
animationTime: 150,
easing: "linear",
overlay: true
2016-02-09 06:08:22 +01:00
});
2016-04-18 19:45:06 +02:00
});
2016-05-04 14:19:46 +02:00
var video = $("video.lazy");
video.on('click', function(e){
var vid = video[0];
vid.play();
if (vid.requestFullscreen) {
vid.requestFullscreen();
} else if (vid.mozRequestFullScreen) {
vid.mozRequestFullScreen();
} else if (vid.webkitRequestFullscreen) {
vid.webkitRequestFullscreen();
}
});
$(function() {
$("img.lazy").lazyload({
effect : "fadeIn"
});
$("video.lazy").lazyload({
effect : "fadeIn"
});
$("section.lazy").lazyload({
effect : "fadeIn"
});
});
2016-04-18 19:45:06 +02:00
< / script >
< footer >
< p > Generated using < a href = "https://github.com/psycojoker/prosopopee" > Prosopopée< / a > · content under < a href = "https://creativecommons.org/licenses/by-sa/3.0/" > CC-BY-SA< / a > · atom logo by < a href = "https://thenounproject.com/jjjon/" > Jonathan Li< / a > under < a href = "https://creativecommons.org/licenses/by/3.0/" > CC-BY< / a > < / p >
< / footer >
< / body >
2015-12-09 09:33:17 +01:00
< / html >
