2017-07-14 15:51:49 +02:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" >
< meta name = "description" content = "" >
< meta name = "author" content = "" >
2017-07-18 14:29:57 +02:00
< title > Max SPIEGEL - Motion Designer< / title >
2017-07-14 18:13:15 +02:00
< link rel = "icon" type = "image/jpg" href = "img/favicon.jpg" / >
2017-07-14 15:51:49 +02:00
<!-- Bootstrap core CSS -->
< link href = "vendor/bootstrap/css/bootstrap.min.css" rel = "stylesheet" >
<!-- Custom fonts for this template -->
< link href = "vendor/font-awesome/css/font-awesome.min.css" rel = "stylesheet" type = "text/css" >
< link href = 'https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel = 'stylesheet' type = 'text/css' >
< link href = 'https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel = 'stylesheet' type = 'text/css' >
<!-- Plugin CSS -->
< link href = "vendor/magnific-popup/magnific-popup.css" rel = "stylesheet" >
<!-- Custom styles for this template -->
< link href = "css/creative.css" rel = "stylesheet" >
<!-- Temporary navbar container fix -->
< style >
.navbar-toggler {
z-index: 1;
}
@media (max-width: 576px) {
nav > .container {
width: 100%;
}
}
< / style >
< / head >
< body id = "page-top" >
<!-- Navigation -->
< nav class = "navbar fixed-top navbar-toggleable-md navbar-light" id = "mainNav" >
< button class = "navbar-toggler navbar-toggler-right" type = "button" data-toggle = "collapse" data-target = "#navbarExample" aria-controls = "navbarExample" aria-expanded = "false" aria-label = "Toggle navigation" >
< span class = "navbar-toggler-icon" > < / span >
< / button >
< div class = "container" >
2017-07-15 18:33:39 +02:00
< a class = "navbar-brand" href = "#page-top" > Max Spiegel< small > - Motion Designer< / small > < / a >
2017-07-14 15:51:49 +02:00
< div class = "collapse navbar-collapse" id = "navbarExample" >
< ul class = "navbar-nav ml-auto" >
< li class = "nav-item" >
2017-07-15 01:07:40 +02:00
< a class = "nav-link" href = "#about" > Portfolio< / a >
2017-07-14 15:51:49 +02:00
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "#contact" > Contact< / a >
< / li >
< / ul >
< / div >
< / div >
< / nav >
< header class = "masthead" >
2017-07-19 18:01:56 +02:00
< video id = "masthead-video" > < / video >
2017-07-14 15:51:49 +02:00
2017-07-14 18:17:14 +02:00
< a class = "btn btn-default btn-xl" href = "#about" >
2017-07-15 16:27:24 +02:00
< i class = "fa fa-angle-down fa-2x" aria-hidden = "true" > < / i >
2017-07-14 18:17:14 +02:00
< / a >
2017-07-14 20:30:10 +02:00
2017-07-20 13:37:09 +02:00
< a id = "video-sound" class = "btn btn-default" href = "#" >
2017-07-18 16:55:02 +02:00
< svg class = "icone icone-son" aria-hidden = "true" >
< use xlink:href = "/vector/sprite.svg#sound-off" > < / use >
< / svg >
2017-07-15 16:27:24 +02:00
< / a >
2017-07-16 23:21:41 +02:00
< a id = "youtube-link" class = "btn btn-default" href = "https://youtube.com" >
2017-07-15 16:27:24 +02:00
< i class = "fa fa-youtube fa-2x" aria-hidden = "true" > < / i >
2017-07-14 20:30:10 +02:00
< / a >
2017-07-20 13:37:09 +02:00
< a id = "fullscreen-video" class = "btn btn-default" href = "#" >
< i class = "fa fa-arrows-alt fa-2x" aria-hidden = "true" > < / i >
< / a >
2017-07-14 18:13:15 +02:00
< / header >
2017-07-14 15:51:49 +02:00
< section class = "bg-primary" id = "about" >
2017-07-15 16:12:18 +02:00
< img class = "vecto1" src = "img/vecto1.svg" >
< img class = "vecto2" src = "img/vecto2.svg" >
2017-07-14 15:51:49 +02:00
< div class = "container" >
< div class = "row" >
< div class = "col-lg-8 offset-lg-2 text-center" >
2017-07-15 14:51:29 +02:00
< h1 class = "section-heading text-white" > Portfolio< / h1 >
2017-07-14 15:51:49 +02:00
< / div >
< / div >
< / div >
< / section >
2017-07-15 17:36:21 +02:00
< section id = "portfolio" >
2017-07-20 14:02:35 +02:00
< div class = "d-flex flex-wrap" >
2017-07-21 19:14:49 +02:00
< div class = "video-portfolio clickable col-lg-4 col-sm-6" data-toggle = "modal" data-target = "#youtubeModal" data-youtubeid = "Q16KpquGsIc" data-options = "autoplay=1&loop=1&playlist=Q16KpquGsIc" data-comment = "CECI EST UN TEST" >
2017-07-21 18:35:19 +02:00
< video loop muted poster = "img/portfolio/1.jpg" >
< source src = "video/portfolio/1.webm" type = "video/webm" >
< / video >
< / div >
2017-07-20 20:24:59 +02:00
< div class = "video-portfolio clickable col-lg-4 col-sm-6" data-toggle = "modal" data-target = "#youtubeModal" data-youtubeid = "Q16KpquGsIc" data-options = "autoplay=1&loop=1&playlist=Q16KpquGsIc" data-comment = "OU A OU A OU A OU A OU A OU A OU A OU A" >
2017-07-20 14:02:35 +02:00
< video loop muted poster = "img/portfolio/1.jpg" >
< source src = "video/portfolio/1.webm" type = "video/webm" >
< / video >
2017-07-15 17:36:21 +02:00
< / div >
2017-07-21 20:17:12 +02:00
< div class = "video-portfolio clickable col-lg-4 col-sm-6" data-toggle = "modal" data-target = "#youtubeModal" data-youtubeid = "32j58XJLHnE" data-options = "autoplay=1&loop=1&playlist=32j58XJLHnE" data-comment = "Début du court-métrage Mushroom Dreams." >
2017-07-21 19:14:49 +02:00
< video loop muted poster = "img/portfolio/champi.jpg" >
< source src = "video/portfolio/champi.webm" type = "video/webm" >
2017-07-20 14:02:35 +02:00
< / video >
2017-07-15 17:36:21 +02:00
< / div >
2017-07-21 16:37:27 +02:00
< div class = "video-portfolio clickable col-lg-4 col-sm-6" data-toggle = "modal" data-target = "#youtubeModal" data-youtubeid = "X_NyayCTfS0" data-comment = "Incroyable ! (Ça tourne mal)" >
2017-07-20 14:02:35 +02:00
< video loop muted poster = "img/portfolio/1.jpg" >
< source src = "video/portfolio/1.webm" type = "video/webm" >
< / video >
< / div >
< div class = "video-portfolio col-lg-4 col-sm-6" >
< video loop muted poster = "img/portfolio/1.jpg" >
< source src = "video/portfolio/1.webm" type = "video/webm" >
< / video >
< / div >
< div class = "video-portfolio col-lg-4 col-sm-6" >
< video loop muted poster = "img/portfolio/1.jpg" >
< source src = "video/portfolio/1.webm" type = "video/webm" >
< / video >
< / div >
< div class = "video-portfolio clickable col-lg-4 col-sm-6" data-toggle = "modal" data-target = "#vimeoModal" data-vimeoid = "195989917" data-comment = "Integer ut ultrices nibh. Praesent egestas suscipit velit id dictum. Quisque interdum porta rutrum. In neque lorem, pellentesque sit amet est quis, dapibus commodo neque. Aliquam rhoncus nisl nec accumsan efficitur. Aliquam nisi nisi, congue eu magna a, sollicitudin mollis lectus." >
< video loop muted poster = "img/portfolio/1.jpg" >
< source src = "video/portfolio/1.webm" type = "video/webm" >
< / video >
< / div >
< div class = "video-portfolio clickable col-lg-4 col-sm-6" data-toggle = "modal" data-target = "#youtubeModal" data-youtubeid = "RV0M18MpDtQ" data-comment = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis arcu ut urna ullamcorper, nec fermentum ipsum semper. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus." >
< video loop muted poster = "img/portfolio/1.jpg" >
< source src = "video/portfolio/1.webm" type = "video/webm" >
< / video >
2017-07-14 15:51:49 +02:00
< / div >
< / div >
< / section >
< section id = "contact" >
< div class = "container" >
< div class = "row" >
< div class = "col-lg-8 offset-lg-2 text-center" >
2017-07-21 18:27:47 +02:00
< h2 class = "section-heading" > Contacts< / h2 >
2017-07-14 15:51:49 +02:00
< hr class = "primary" >
2017-07-21 18:27:47 +02:00
< p > Je suis disponible aux coordonées suivantes :< / p >
2017-07-14 15:51:49 +02:00
< / div >
< div class = "col-lg-4 offset-lg-2 text-center" >
< i class = "fa fa-phone fa-3x sr-contact" > < / i >
2017-07-19 14:44:24 +02:00
< p > 07 22 22 22 22< / p >
2017-07-14 15:51:49 +02:00
< / div >
< div class = "col-lg-4 text-center" >
< i class = "fa fa-envelope-o fa-3x sr-contact" > < / i >
2017-07-21 18:27:47 +02:00
< p > < a href = "mailto:your-email@your-domain.com" > max@gmail.com< / a > < / p >
2017-07-14 15:51:49 +02:00
< / div >
< / div >
< / div >
< / section >
2017-07-16 23:21:41 +02:00
2017-07-17 00:56:35 +02:00
< div class = "modal fade" id = "youtubeModal" tabindex = "-1" role = "dialog" aria-labelledby = "exampleModalLabel" aria-hidden = "true" >
2017-07-19 13:53:32 +02:00
< div class = "modal-dialog modal-lg" role = "document" >
2017-07-17 00:56:35 +02:00
< div class = "modal-content" >
2017-07-19 20:10:00 +02:00
< div class = "modal-header" >
2017-07-17 00:56:35 +02:00
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" >
2017-07-19 13:31:10 +02:00
< span aria-hidden = "true" > × < / span >
2017-07-17 00:56:35 +02:00
< / button >
2017-07-19 20:10:00 +02:00
< / div >
< div class = "modal-body" >
2017-07-20 14:09:52 +02:00
< div class = "embed-responsive embed-responsive-16by9" >
< iframe class = "embed-responsive-item" src = "" allowfullscreen > < / iframe >
< / div >
2017-07-19 19:40:51 +02:00
< hr >
< p > < / p >
2017-07-17 00:56:35 +02:00
< / div >
< / div >
< / div >
< / div >
2017-07-19 14:20:03 +02:00
< div class = "modal fade" id = "vimeoModal" tabindex = "-1" role = "dialog" aria-labelledby = "exampleModalLabel" aria-hidden = "true" >
< div class = "modal-dialog modal-lg" role = "document" >
< div class = "modal-content" >
2017-07-19 20:10:00 +02:00
< div class = "modal-header" >
2017-07-19 14:20:03 +02:00
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
2017-07-19 20:10:00 +02:00
< / div >
< div class = "modal-body" >
2017-07-20 14:09:52 +02:00
< div class = "embed-responsive embed-responsive-16by9" >
< iframe class = "embed-responsive-item" src = "" allowfullscreen > < / iframe >
< / div >
2017-07-19 19:40:51 +02:00
< hr >
< p > < / p >
2017-07-19 14:20:03 +02:00
< / div >
< / div >
< / div >
< / div >
2017-07-14 15:51:49 +02:00
<!-- Bootstrap core JavaScript -->
< script src = "vendor/jquery/jquery.min.js" > < / script >
< script src = "vendor/tether/tether.min.js" > < / script >
< script src = "vendor/bootstrap/js/bootstrap.min.js" > < / script >
<!-- Plugin JavaScript -->
< script src = "vendor/jquery-easing/jquery.easing.min.js" > < / script >
< script src = "vendor/scrollreveal/scrollreveal.min.js" > < / script >
< script src = "vendor/magnific-popup/jquery.magnific-popup.min.js" > < / script >
<!-- Custom scripts for this template -->
< script src = "js/creative.min.js" > < / script >
2017-07-14 20:30:10 +02:00
2017-07-21 19:30:31 +02:00
< script src = "https://cdn.dashjs.org/latest/dash.all.min.js" > < / script >
2017-07-19 00:44:16 +02:00
2017-07-14 20:30:10 +02:00
< script >
2017-07-16 23:21:41 +02:00
var masthead_video = document.getElementById("masthead-video");
var video_button = document.getElementById("video-sound");
2017-07-20 13:37:09 +02:00
var fullscreen_button = document.getElementById("fullscreen-video");
2017-07-19 15:30:24 +02:00
2017-07-19 17:01:30 +02:00
function masthead_video_mute(mute) {
2017-07-19 17:59:37 +02:00
player.setMute(mute);
2017-07-19 15:30:24 +02:00
if (mute) {
video_button.children[0].children[0].setAttribute("xlink:href", "/vector/sprite.svg#sound-off");
}
else {
video_button.children[0].children[0].setAttribute("xlink:href", "/vector/sprite.svg#sound-on");
}
}
2017-07-14 20:30:10 +02:00
2017-07-16 23:21:41 +02:00
video_button.onclick = function () {
if (masthead_video.muted) {
2017-07-19 15:30:24 +02:00
masthead_video_mute(false);
2017-07-14 20:30:10 +02:00
} else {
2017-07-19 15:30:24 +02:00
masthead_video_mute(true);
2017-07-14 20:30:10 +02:00
}
2017-07-16 23:21:41 +02:00
};
2017-07-15 18:54:45 +02:00
2017-07-19 17:51:41 +02:00
function loopVideo(e)
{
console.log("EVENT RECEIVED: " + e.type);
player.seek(0);
2017-07-19 19:17:22 +02:00
player.play();
2017-07-19 17:51:41 +02:00
}
2017-07-20 13:37:09 +02:00
function fullscreen(video) {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
}
}
fullscreen_button.onclick = function () {
fullscreen(masthead_video);
};
2017-07-21 19:24:49 +02:00
var url = "video/dash/1_Compilation_Graphique/1_Compilation_Graphique.mpd";
2017-07-19 00:44:16 +02:00
var player = dashjs.MediaPlayer().create();
2017-07-19 17:51:41 +02:00
player.getDebug().setLogToBrowserConsole(false);
2017-07-19 00:44:16 +02:00
player.initialize(document.querySelector("#masthead-video"), url, true);
2017-07-19 17:51:41 +02:00
player.on(dashjs.MediaPlayer.events.PLAYBACK_ENDED,loopVideo);
2017-07-19 00:44:16 +02:00
player.setMute(true);
2017-07-16 23:59:15 +02:00
var portfolio_videos = document.getElementsByClassName('video-portfolio');
for (video_div of portfolio_videos) {
video_div.onmouseover = function() {this.children[0].play()};
video_div.onmouseout = function() {this.children[0].load()};
}
2017-07-17 00:56:35 +02:00
$('#youtubeModal').on('show.bs.modal', function (event) {
2017-07-19 15:30:24 +02:00
masthead_video_mute(true);
2017-07-19 13:20:15 +02:00
var button = $(event.relatedTarget);
var youtube_id = button.data('youtubeid');
2017-07-19 19:40:51 +02:00
var comment = button.data('comment');
2017-07-20 20:13:40 +02:00
var options = button.data('options');
2017-07-19 13:20:15 +02:00
var modal = $(this);
2017-07-20 20:13:40 +02:00
var youtube_url = 'https://www.youtube.com/embed/' + youtube_id + "?modestbranding=1& rel=0& html5=1"
if (options) {
youtube_url += '& ' + options;
}
modal.find('.modal-body iframe')[0].src = youtube_url;
2017-07-19 19:40:51 +02:00
modal.find('.modal-body p')[0].innerHTML = comment;
2017-07-19 14:08:35 +02:00
});
$('#youtubeModal').on('hidden.bs.modal', function () {
$(this).find('.modal-body iframe')[0].src = "";
2017-07-20 14:12:54 +02:00
$(this).find('.modal-body p')[0].innerHTML = "";
2017-07-19 14:08:35 +02:00
});
2017-07-19 14:20:03 +02:00
$('#vimeoModal').on('show.bs.modal', function (event) {
2017-07-19 15:30:24 +02:00
masthead_video_mute(true);
2017-07-19 14:20:03 +02:00
var button = $(event.relatedTarget);
var vimeo_id = button.data('vimeoid');
2017-07-19 19:40:51 +02:00
var comment = button.data('comment');
2017-07-19 14:20:03 +02:00
var modal = $(this);
modal.find('.modal-body iframe')[0].src = 'https://player.vimeo.com/video/' + vimeo_id;
2017-07-19 19:40:51 +02:00
modal.find('.modal-body p')[0].innerHTML = comment;
2017-07-19 14:20:03 +02:00
});
$('#vimeoModal').on('hidden.bs.modal', function () {
$(this).find('.modal-body iframe')[0].src = "";
2017-07-20 14:12:54 +02:00
$(this).find('.modal-body p')[0].innerHTML = "";
2017-07-19 14:20:03 +02:00
});
2017-07-14 20:30:10 +02:00
< / script >
2017-07-14 15:51:49 +02:00
< / body >
< / html >
