nyanloutre/site-max
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
80aee0d566
site-max/index.html

511 lines
29 KiB
HTML
Raw Normal View History

Premier commit
2017-07-14 15:51:49 +02:00
<!DOCTYPE html>
Changement du language du site en Français
2017-07-22 12:01:22 +02:00
<html lang="fr">
Premier commit
2017-07-14 15:51:49 +02:00
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Langue anglaise
2018-09-01 14:52:03 +02:00
<meta name="description" content="Welcome, my name is Max SPIEGEL. I'm a CGI/VFX artist at your service. 2D/3D Animation, Compositing, Authoring Blu-Ray, Sculpting 3D.">
<meta name="author" content="Max SPIEGEL, Paul TREHIOU">
vérification console Google
2019-04-27 19:17:25 +02:00
<meta name="google-site-verification" content="hA8zslIULO9eYfwLMGrvy-O9H0beEKK6JirwLOto2H4" />
Premier commit
2017-07-14 15:51:49 +02:00
Langue anglaise
2018-09-01 14:52:03 +02:00
<title>Max SPIEGEL - CG Artist</title>
Favico + bouton
2017-07-14 18:13:15 +02:00
<link rel="icon" type="image/jpg" href="img/favicon.jpg" />
Premier commit
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 -->
corrections font-awesome 3 -> 4
2019-07-14 11:54:08 +02:00
<link href="vendor/font-awesome/css/all.min.css" rel="stylesheet" type="text/css">
Premier commit
2017-07-14 15:51:49 +02:00
<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">
</head>
<body id="page-top">
<!-- Navigation -->
Mise à jour Bootstrap V4 Beta
2017-08-12 17:47:21 +02:00
<nav class="navbar fixed-top navbar-expand-lg navbar-light" id="mainNav">
Langue anglaise
2018-09-01 14:52:03 +02:00
<a class="navbar-brand" href="#page-top">Max Spiegel<small> - CG Artist</small></a>
Mise à jour Bootstrap V4 Beta
2017-08-12 17:47:21 +02:00
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarMain" aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation">
Premier commit
2017-07-14 15:51:49 +02:00
<span class="navbar-toggler-icon"></span>
</button>
Mise à jour Bootstrap V4 Beta
2017-08-12 17:47:21 +02:00
<div class="collapse navbar-collapse" id="navbarMain">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
Premier commit
2017-07-14 15:51:49 +02:00
</div>
</nav>
<header class="masthead">
Pas de barre noire YouTube
2018-04-28 19:08:52 +02:00
<div class="video-container">
<div id="player"></div>
</div>
Premier commit
2017-07-14 15:51:49 +02:00
Modification style boutons
2019-02-10 17:42:09 +01:00
<a class="master_button" href="#about">
Ajout icône YouTube
2017-07-15 16:27:24 +02:00
<i class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
Icone bouton
2017-07-14 18:17:14 +02:00
</a>
Nouvelle vidéo et bouton de volume
2017-07-14 20:30:10 +02:00
Modification style boutons
2019-02-10 17:42:09 +01:00
<a id="video-sound" class="master_button" href="#">
Simplification svg son vidéo
2018-05-10 19:05:08 +02:00
<img class="icone icone-son" aria-hidden="true" src="vector/sound-off.svg">
Ajout icône YouTube
2017-07-15 16:27:24 +02:00
</a>
ajout bouton artstation
2019-07-14 11:44:46 +02:00
<a id="vimeo-link" class="master_button" href="https://vimeo.com/user59930690">
corrections font-awesome 3 -> 4
2019-07-14 11:54:08 +02:00
<i class="fab fa-vimeo-v fa-2x" aria-hidden="true"></i>
ajout bouton artstation
2019-07-14 11:44:46 +02:00
</a>
<a id="artstation-link" class="master_button" href="https://www.artstation.com/maxspiegel">
corrections font-awesome 3 -> 4
2019-07-14 11:54:08 +02:00
<i class="fab fa-artstation fa-2x" aria-hidden="true"></i>
Nouvelle vidéo et bouton de volume
2017-07-14 20:30:10 +02:00
</a>
Favico + bouton
2017-07-14 18:13:15 +02:00
</header>
Premier commit
2017-07-14 15:51:49 +02:00
<section class="bg-primary" id="about">
Modification titre portfolio
2019-02-10 16:22:40 +01:00
<img id="renard" src="img/whitfoxvecto.svg">
<hr id="hr_left" />
<hr id="hr_right" />
Premier commit
2017-07-14 15:51:49 +02:00
<div class="container">
Mise à jour Bootstrap V4 Beta
2017-08-12 17:47:21 +02:00
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
Taille titre portfolio
2017-07-15 14:51:29 +02:00
<h1 class="section-heading text-white">Portfolio</h1>
Premier commit
2017-07-14 15:51:49 +02:00
</div>
</div>
</div>
</section>
Vidéos en portfolio
2017-07-15 17:36:21 +02:00
<section id="portfolio">
Flexbox pour le portfolio
2017-07-20 14:02:35 +02:00
<div class="d-flex flex-wrap">
Add last projects
2019-02-08 13:14:10 +01:00
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="311415375?autoplay=1&loop=1&autopause=0" data-comment="My favorite project of 2018. Two creatures in a snowy landscape. Made during the last two weeks of December 2018.">
<video loop muted poster="img/portfolio/flo.jpg">
<source src="video/portfolio/flo.webm" type="video/webm">
</video>
</div>
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="311415149?autoplay=1&loop=1&autopause=0" data-comment="I created a rigged fox and a snake, I used Xgen for the fur. This project taked the first two weeks of December 2018.">
<video loop muted poster="img/portfolio/an.jpg">
<source src="video/portfolio/an.webm" type="video/webm">
</video>
</div>
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="311414971?autoplay=1&loop=1&autopause=0" data-comment="Made during the last two weeks of November 2018. Inspired by Ghost in the Shell and Cowboy Bebop.">
<video loop muted poster="img/portfolio/out.jpg">
<source src="video/portfolio/out.webm" type="video/webm">
</video>
</div>
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="311414804?autoplay=1&loop=1&autopause=0" data-comment="Released at the end of the first two weeks of November 2018 showing an animal character in an Italian city.">
<video loop muted poster="img/portfolio/venise.jpg">
<source src="video/portfolio/venise.webm" type="video/webm">
</video>
</div>
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="311414675?autoplay=1&loop=1&autopause=0" data-comment="Created during the last two weeks of October 2018 showing a character in a mountain landscape.">
<video loop muted poster="img/portfolio/girl.jpg">
<source src="video/portfolio/girl.webm" type="video/webm">
</video>
</div>
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="311414306?autoplay=1&loop=1&autopause=0" data-comment="Project created during the first two weeks of October 2018 showing a small robot walking in a windy forest.">
<video loop muted poster="img/portfolio/roy2.jpg">
<source src="video/portfolio/roy2.webm" type="video/webm">
</video>
Add Thunder
2019-07-30 23:21:16 +02:00
</div>
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-youtubeid="74qqbfkdnrM" data-comment="This is my video for the music group PVLSAR. I spent two weeks doing it with Cinema 4D and After Effects." data-artstationid="2xQJlB" data-artstationtext="See the project on ArtStation">
<video loop muted poster="img/portfolio/thund.jpg">
<source src="video/portfolio/thund.webm" type="video/webm">
</video>
</div>
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="287802506?autoplay=1&loop=1&autopause=0" data-comment="My lanterns. Made with Cinema 4D and Redshift." data-artstationid="OyR0XJ" data-artstationtext="See more details on ArtStation">
<video loop muted poster="img/portfolio/lant.jpg">
<source src="video/portfolio/lant.webm" type="video/webm">
</video>
Add last projects
2019-02-08 13:14:10 +01:00
</div>
Add artsation link on some projects
2019-07-16 14:09:16 +02:00
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="287802458?autoplay=1&loop=1&autopause=0" data-comment="Jupiter in the mist." data-artstationid="nQO0d4" data-artstationtext="See more details on ArtStation">
mise a jour mosaiq
2018-09-16 14:50:05 +02:00
<video loop muted poster="img/portfolio/mist.jpg">
<source src="video/portfolio/mist.webm" type="video/webm">
Ajout d'une nouvelle vidéo
2017-07-21 18:35:19 +02:00
</video>
</div>
Add artsation link on some projects
2019-07-16 14:09:16 +02:00
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="287802401?autoplay=1&loop=1&autopause=0" data-comment="This key can open all the treasures." data-artstationid="rRd8d2" data-artstationtext="See the project on ArtStation">
mise a jour mosaiq
2018-09-16 14:50:05 +02:00
<video loop muted poster="img/portfolio/hand.jpg">
<source src="video/portfolio/hand.webm" type="video/webm">
Flexbox pour le portfolio
2017-07-20 14:02:35 +02:00
</video>
Vidéos en portfolio
2017-07-15 17:36:21 +02:00
</div>
Add amp link
2019-07-19 19:14:37 +02:00
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="287796820?autoplay=1&loop=1&autopause=0" data-comment="An Orange guitar amp followed by a Voronoi Fracture animation." data-artstationid="nQO1wO" data-artstationtext="More details on ArtStation">
Test loop vimeo
2018-09-16 13:41:43 +02:00
<video loop muted poster="img/portfolio/amp.jpg">
<source src="video/portfolio/amp.webm" type="video/webm">
Flexbox pour le portfolio
2017-07-20 14:02:35 +02:00
</video>
Vidéos en portfolio
2017-07-15 17:36:21 +02:00
</div>
Add artsation link on some projects
2019-07-16 14:09:16 +02:00
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="287802323?autoplay=1&loop=1&autopause=0" data-comment="For this one I wanted to mix cloner and gravity." data-artstationid="dOR9XJ" data-artstationtext="More details on ArtStation">
mise a jour mosaiq
2018-09-16 14:50:05 +02:00
<video loop muted poster="img/portfolio/candle.jpg">
<source src="video/portfolio/candle.webm" type="video/webm">
Flexbox pour le portfolio
2017-07-20 14:02:35 +02:00
</video>
</div>
mise a jour mosaiq
2018-09-16 14:50:05 +02:00
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="287802590?autoplay=1&loop=1&autopause=0" data-comment="An advertisement for a watch.">
<video loop muted poster="img/portfolio/watch.jpg">
<source src="video/portfolio/watch.webm" type="video/webm">
</video>
Flexbox pour le portfolio
2017-07-20 14:02:35 +02:00
</div>
Add artsation link on some projects
2019-07-16 14:09:16 +02:00
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="287802537?autoplay=1&loop=1&autopause=0" data-comment="When a train leaves the earth..." data-artstationid="xzKzvX" data-artstationtext="More details on ArtStation">
mise a jour mosaiq
2018-09-16 14:50:05 +02:00
<video loop muted poster="img/portfolio/loco.jpg">
<source src="video/portfolio/loco.webm" type="video/webm">
Ajout de plein de contenu vidéo
2017-07-27 17:35:42 +02:00
</video>
</div>
Add artsation link on some projects
2019-07-16 14:09:16 +02:00
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="287802445?autoplay=1&loop=1&autopause=0" data-comment="An interior modeling." data-artstationid="Yaow0V" data-artstationtext="More details on ArtStation">
mise a jour mosaiq
2018-09-16 14:50:05 +02:00
<video loop muted poster="img/portfolio/home.jpg">
<source src="video/portfolio/home.webm" type="video/webm">
Préparation de la mosaique qui acceuillera le carousel
2017-08-12 13:09:05 +02:00
</video>
</div>
Add landscape link
2019-07-18 14:18:23 +02:00
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="287802488?autoplay=1&loop=1&autopause=0" data-comment="A mountain view. Made with Forester and Redshift Proxies." data-artstationid="aR6a09" data-artstationtext="More details on ArtStation">
mise a jour mosaiq
2018-09-16 14:50:05 +02:00
<video loop muted poster="img/portfolio/land.jpg">
<source src="video/portfolio/land.webm" type="video/webm">
ajout box et padding contact
2017-08-15 12:14:36 +02:00
</video>
</div>
Add artsation link on some projects
2019-07-16 14:09:16 +02:00
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="287802425?autoplay=1&loop=1&autopause=0" data-comment="Hotel in the dark." data-artstationid="XBY8oa" data-artstationtext="See the project on ArtStation">
mise a jour mosaiq
2018-09-16 14:50:05 +02:00
<video loop muted poster="img/portfolio/hotel.jpg">
<source src="video/portfolio/host.webm" type="video/webm">
Flexbox pour le portfolio
2017-07-20 14:02:35 +02:00
</video>
</div>
Add artsation link on some projects
2019-07-16 14:09:16 +02:00
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="287802572?autoplay=1&loop=1&autopause=0" data-comment="A temple in the forest." data-artstationid="PmBZl8" data-artstationtext="The project on ArtStation">
correction image temple
2018-09-16 15:55:42 +02:00
<video loop muted poster="img/portfolio/tmp.jpg">
mise a jour mosaiq
2018-09-16 14:50:05 +02:00
<source src="video/portfolio/temple.webm" type="video/webm">
Ajout du voyage de roy
2017-07-27 18:04:06 +02:00
</video>
</div>
mise a jour mosaiq
2018-09-16 14:50:05 +02:00
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="287802555?autoplay=1&loop=1&autopause=0" data-comment="An example of soda advertising. I used Realflow for the liquid animation.">
<video loop muted poster="img/portfolio/tea.jpg">
<source src="video/portfolio/tea.webm" type="video/webm">
Ajout du cadre d'or
2017-07-27 18:39:46 +02:00
</video>
</div>
Add artsation link on some projects
2019-07-16 14:09:16 +02:00
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="287802354?autoplay=1&loop=1&autopause=0" data-comment="Inside. Made with Cinema 4D and Arnold." data-artstationid="58oO5P" data-artstationtext="See the project on ArtStation">
mise a jour mosaiq
2018-09-16 14:50:05 +02:00
<video loop muted poster="img/portfolio/fen.jpg">
<source src="video/portfolio/fen.webm" type="video/webm">
Ajout de The Door
2017-08-06 15:34:20 +02:00
</video>
</div>
add fire link
2019-07-23 16:38:34 +02:00
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="287802369?autoplay=1&loop=1&autopause=0" data-comment="Made with Cinema 4D, Turbulence FD and Redshift." data-artstationid="XB20nl" data-artstationtext="See more details on ArtStation">
mise a jour mosaiq
2018-09-16 14:50:05 +02:00
<video loop muted poster="img/portfolio/final.jpg">
<source src="video/portfolio/final.webm" type="video/webm">
Ajout de All
2017-08-07 16:18:57 +02:00
</video>
</div>
Correction keepS
2018-09-28 20:29:13 +02:00
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="287802346?autoplay=1&loop=1&autopause=0" data-comment="The moon keeps a close look on the city.">
mise a jour mosaiq
2018-09-16 14:50:05 +02:00
<video loop muted poster="img/portfolio/eye.jpg">
<source src="video/portfolio/eye.webm" type="video/webm">
Ajout de plein de contenu vidéo
2017-07-27 17:35:42 +02:00
</video>
</div>
Add artsation link on some projects
2019-07-16 14:09:16 +02:00
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="282742025" data-comment="This is the story of a special mushroom who will, during some adventures, meet an old friend again. Released in 2017." data-artstationid="RYBKxm" data-artstationtext="See more details of this short film on ArtStation">
Test loop vimeo
2018-09-16 13:41:43 +02:00
<video loop muted poster="img/portfolio/mush.jpg">
<source src="video/portfolio/champi.webm" type="video/webm">
</video>
Ajout du herisson
2017-08-07 20:53:45 +02:00
</div>
Vimeo movies
2018-09-16 14:56:36 +02:00
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="282034965" data-comment="Here is my graduation film at Ecole Supérieure de l'AudioVisuel (ESAV). Seven days before my defense, I was burglarized and I made this alternative ending in three days. Released in June 2017.">
Test loop vimeo
2018-09-16 13:41:43 +02:00
<video loop muted poster="img/portfolio/roy.jpg">
<source src="video/portfolio/roy.webm" type="video/webm">
Ajout de plein de contenu vidéo
2017-07-27 17:35:42 +02:00
</video>
</div>
Test loop vimeo
2018-09-16 13:41:43 +02:00
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#carouselSculptingModal">
<video loop muted poster="img/portfolio/st.jpg">
<source src="video/portfolio/st.webm" type="video/webm">
</video>
</div>
Vimeo movies
2018-09-16 14:56:36 +02:00
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="195989917" data-comment="Movie opening exercise for a meeting with GOBELINS's students. I composed the music.">
Test loop vimeo
2018-09-16 13:41:43 +02:00
<video loop muted poster="img/portfolio/pomp.jpg">
<source src="video/portfolio/pomp.webm" type="video/webm">
</video>
</div>
<div class="element-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-sketchfabid="7507e61126754169937a24858981b185">
<div class="portfolio-container">
<img class="dynamic-zoom" src="img/portfolio/Metal Carrot1.jpg" />
</div>
</div>
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="202941724" data-comment="A painting by Santiago Rusiñol y Prat, animated with Clémentine Meriadec for the Goya Museum">
<video loop muted poster="img/portfolio/jar.jpg">
<source src="video/portfolio/jar.webm" type="video/webm">
Flexbox pour le portfolio
2017-07-20 14:02:35 +02:00
</video>
</div>
Premier commit
2017-07-14 15:51:49 +02:00
</div>
</section>
<section id="contact">
<div class="container">
Mise à jour Bootstrap V4 Beta
2017-08-12 17:47:21 +02:00
<div class="row justify-content-center">
<div class="col-8 text-center">
Langue anglaise
2018-09-01 14:52:03 +02:00
<h2 class="section-heading">Contact</h2>
Premier commit
2017-07-14 15:51:49 +02:00
<hr class="primary">
</div>
Mise à jour Bootstrap V4 Beta
2017-08-12 17:47:21 +02:00
</div>
<div class="row justify-content-center">
<div class="col-lg-4 text-center">
corrections font-awesome 3 -> 4
2019-07-14 12:28:22 +02:00
<i class="fas fa-phone-alt fa-3x sr-contact"></i>
augmentation marge texte contacts
2019-07-14 12:40:11 +02:00
<p class="mt-2">0033 (0) 6 44 26 78 84</p>
Premier commit
2017-07-14 15:51:49 +02:00
</div>
<div class="col-lg-4 text-center">
corrections font-awesome 3 -> 4
2019-07-14 12:28:22 +02:00
<i class="fas fa-envelope fa-3x sr-contact"></i>
augmentation marge texte contacts
2019-07-14 12:40:11 +02:00
<p class="mt-2"><a href="mailto:spiegel.max1996@gmail.com">spiegel.max1996@gmail.com</a></p>
Premier commit
2017-07-14 15:51:49 +02:00
</div>
</div>
</div>
</section>
Pas de JQuery pour la vidéo principale
2017-07-16 23:21:41 +02:00
Simplification fenetres modales
2017-07-27 18:44:03 +02:00
<div class="modal fade" id="iframeModal" tabindex="-1" role="dialog" aria-hidden="true">
Fenetre modale plus grande
2017-07-19 13:53:32 +02:00
<div class="modal-dialog modal-lg" role="document">
Fenetre modale vidéo YouTube
2017-07-17 00:56:35 +02:00
<div class="modal-content">
Emplacement croix portfolio
2017-07-19 20:10:00 +02:00
<div class="modal-header">
Fenetre modale vidéo YouTube
2017-07-17 00:56:35 +02:00
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
Décharger vidéo fermuture popup
2017-07-19 13:31:10 +02:00
<span aria-hidden="true">&times;</span>
Fenetre modale vidéo YouTube
2017-07-17 00:56:35 +02:00
</button>
Emplacement croix portfolio
2017-07-19 20:10:00 +02:00
</div>
<div class="modal-body">
Responsive video embeded
2017-07-20 14:09:52 +02:00
<div class="embed-responsive embed-responsive-16by9">
Simplification fenetres modales
2017-07-27 18:44:03 +02:00
<iframe class="embed-responsive-item" src=""></iframe>
Sketchfab iframe
2017-07-24 17:09:52 +02:00
</div>
Pas de <hr> si pas de commentaire
2017-07-24 22:52:08 +02:00
<div class="modal-comment">
</div>
Sketchfab iframe
2017-07-24 17:09:52 +02:00
</div>
</div>
</div>
</div>
Ajout caroussel popup
2017-08-12 15:32:35 +02:00
<div class="modal fade" id="carouselSculptingModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div id="carouselSculpting" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselSculpting" data-slide-to="0" class="active"></li>
<li data-target="#carouselSculpting" data-slide-to="1"></li>
<li data-target="#carouselSculpting" data-slide-to="2"></li>
images carousel
2017-08-12 16:31:18 +02:00
<li data-target="#carouselSculpting" data-slide-to="3"></li>
<li data-target="#carouselSculpting" data-slide-to="4"></li>
<li data-target="#carouselSculpting" data-slide-to="5"></li>
<li data-target="#carouselSculpting" data-slide-to="6"></li>
<li data-target="#carouselSculpting" data-slide-to="7"></li>
<li data-target="#carouselSculpting" data-slide-to="8"></li>
<li data-target="#carouselSculpting" data-slide-to="9"></li>
<li data-target="#carouselSculpting" data-slide-to="10"></li>
<li data-target="#carouselSculpting" data-slide-to="11"></li>
<li data-target="#carouselSculpting" data-slide-to="12"></li>
Ajout caroussel popup
2017-08-12 15:32:35 +02:00
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
Correction carousel
2017-08-12 16:39:46 +02:00
<img class="d-block img-fluid" src="img/Carousel/stage/1.jpg" alt="1">
Ajout caroussel popup
2017-08-12 15:32:35 +02:00
</div>
<div class="carousel-item">
Correction carousel
2017-08-12 16:39:46 +02:00
<img class="d-block img-fluid" src="img/Carousel/stage/2.jpg" alt="2">
Ajout caroussel popup
2017-08-12 15:32:35 +02:00
</div>
<div class="carousel-item">
Correction carousel
2017-08-12 16:39:46 +02:00
<img class="d-block img-fluid" src="img/Carousel/stage/3.jpg" alt="3">
images carousel
2017-08-12 16:31:18 +02:00
</div>
<div class="carousel-item">
Correction carousel
2017-08-12 16:39:46 +02:00
<img class="d-block img-fluid" src="img/Carousel/stage/4.jpg" alt="4">
images carousel
2017-08-12 16:31:18 +02:00
</div>
<div class="carousel-item">
Correction carousel
2017-08-12 16:39:46 +02:00
<img class="d-block img-fluid" src="img/Carousel/stage/5.jpg" alt="5">
images carousel
2017-08-12 16:31:18 +02:00
</div>
<div class="carousel-item">
Correction carousel
2017-08-12 16:39:46 +02:00
<img class="d-block img-fluid" src="img/Carousel/stage/6.jpg" alt="6">
images carousel
2017-08-12 16:31:18 +02:00
</div>
<div class="carousel-item">
Correction carousel
2017-08-12 16:39:46 +02:00
<img class="d-block img-fluid" src="img/Carousel/stage/7.jpg" alt="7">
images carousel
2017-08-12 16:31:18 +02:00
</div>
<div class="carousel-item">
Correction carousel
2017-08-12 16:39:46 +02:00
<img class="d-block img-fluid" src="img/Carousel/stage/8.jpg" alt="8">
images carousel
2017-08-12 16:31:18 +02:00
</div>
<div class="carousel-item">
Correction carousel
2017-08-12 16:39:46 +02:00
<img class="d-block img-fluid" src="img/Carousel/stage/9.jpg" alt="9">
images carousel
2017-08-12 16:31:18 +02:00
</div>
<div class="carousel-item">
Correction carousel
2017-08-12 16:39:46 +02:00
<img class="d-block img-fluid" src="img/Carousel/stage/10.jpg" alt="10">
images carousel
2017-08-12 16:31:18 +02:00
</div>
<div class="carousel-item">
Correction carousel
2017-08-12 16:39:46 +02:00
<img class="d-block img-fluid" src="img/Carousel/stage/11.jpg" alt="11">
images carousel
2017-08-12 16:31:18 +02:00
</div>
<div class="carousel-item">
Correction carousel
2017-08-12 16:39:46 +02:00
<img class="d-block img-fluid" src="img/Carousel/stage/12.jpg" alt="12">
images carousel
2017-08-12 16:31:18 +02:00
</div>
<div class="carousel-item">
Correction carousel
2017-08-12 16:39:46 +02:00
<img class="d-block img-fluid" src="img/Carousel/stage/13.jpg" alt="13">
images carousel
2017-08-12 16:31:18 +02:00
</div>
Ajout caroussel popup
2017-08-12 15:32:35 +02:00
</div>
<a class="carousel-control-prev" role="button" data-slide="prev" data-target="#carouselSculpting">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" role="button" data-slide="next" data-target="#carouselSculpting">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="modal-comment">
images carousel
2017-08-12 16:31:18 +02:00
<hr>
some
2018-09-01 15:07:28 +02:00
<p>Here is some images of 3D projects I did with a view to the creation of jewels for 2 Saints from the foundry Solyfonte.
images carousel
2017-08-12 16:31:18 +02:00
</p>
Ajout caroussel popup
2017-08-12 15:32:35 +02:00
</div>
</div>
</div>
</div>
</div>
Premier commit
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>
Mise à jour Bootstrap V4 Beta
2017-08-12 17:47:21 +02:00
<script src="vendor/popper/popper.min.js"></script>
Premier commit
2017-07-14 15:51:49 +02:00
<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>
Nouvelle vidéo et bouton de volume
2017-07-14 20:30:10 +02:00
<script>
Pas de JQuery pour la vidéo principale
2017-07-16 23:21:41 +02:00
var video_button = document.getElementById("video-sound");
Bouton plein écran
2017-07-20 13:37:09 +02:00
var fullscreen_button = document.getElementById("fullscreen-video");
Fonction pour couper le son
2017-07-19 15:30:24 +02:00
Pas de JQuery pour le portfolio
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()};
}
Fenetre modale vidéo YouTube
2017-07-17 00:56:35 +02:00
Restauration son vidéo fermeture fenetre modale
2017-07-27 19:01:23 +02:00
Simplification fenetres modales
2017-07-27 18:44:03 +02:00
$('#iframeModal').on('show.bs.modal', function (event) {
var modal = $(this);
Test popup youtube
2017-07-19 13:20:15 +02:00
var button = $(event.relatedTarget);
Simplification fenetres modales
2017-07-27 18:44:03 +02:00
var iframe = modal.find('.modal-body iframe')[0];
Test popup youtube
2017-07-19 13:20:15 +02:00
var youtube_id = button.data('youtubeid');
Simplification fenetres modales
2017-07-27 18:44:03 +02:00
var vimeo_id = button.data('vimeoid');
var sketchfab_id = button.data('sketchfabid');
Ajout lien ArtStation modal
2019-07-14 12:28:07 +02:00
var artstation_id = button.data('artstationid');
ajout variable texte lien ArtStation
2019-07-14 12:33:35 +02:00
var artstation_text = button.data('artstationtext');
Simplification fenetres modales
2017-07-27 18:44:03 +02:00
Ajout commentaire portfolio
2017-07-19 19:40:51 +02:00
var comment = button.data('comment');
Options possibles pour youtube
2017-07-20 20:13:40 +02:00
var options = button.data('options');
Simplification fenetres modales
2017-07-27 18:44:03 +02:00
var url = "";
Options possibles pour youtube
2017-07-20 20:13:40 +02:00
Simplification fenetres modales
2017-07-27 18:44:03 +02:00
if (youtube_id) {
url = 'https://www.youtube.com/embed/' + youtube_id + "?modestbranding=1&rel=0&html5=1";
if (options) {
url += '&' + options;
}
iframe.setAttribute("allowfullscreen", "");
iframe.src = url;
} else if (vimeo_id) {
Options possibles pour youtube
2017-07-20 20:13:40 +02:00
Simplification fenetres modales
2017-07-27 18:44:03 +02:00
url = 'https://player.vimeo.com/video/' + vimeo_id;
iframe.setAttribute("allowfullscreen", "");
iframe.src = url;
} else if (sketchfab_id) {
Pas de <hr> si pas de commentaire
2017-07-24 22:52:08 +02:00
Simplification fenetres modales
2017-07-27 18:44:03 +02:00
url = 'https://sketchfab.com/models/' + sketchfab_id + '/embed?autostart=1';
Sketchfab iframe
2017-07-24 17:09:52 +02:00
Simplification fenetres modales
2017-07-27 18:44:03 +02:00
iframe.setAttribute("allowfullscreen", "");
iframe.setAttribute("allowvr", "");
iframe.setAttribute("onmousewheel", "");
iframe.src = url;
Pas de <hr> si pas de commentaire
2017-07-24 22:52:08 +02:00
Simplification fenetres modales
2017-07-27 18:44:03 +02:00
}
Ajout lien ArtStation modal
2019-07-14 12:28:07 +02:00
var modal_comment = modal.find('.modal-body .modal-comment')[0];
ajout variable texte lien ArtStation
2019-07-14 12:33:35 +02:00
if (comment || artstation_id) {
modal_comment.appendChild(document.createElement('hr'));
}
Pas de <hr> si pas de commentaire
2017-07-24 22:52:08 +02:00
if (comment) {
Ajout lien ArtStation modal
2019-07-14 12:28:07 +02:00
var comment_object = document.createElement('p');
comment_object.innerText = comment;
modal_comment.appendChild(comment_object);
}
if (artstation_id) {
var artstation_link = document.createElement('a');
ajout variable texte lien ArtStation
2019-07-14 12:33:35 +02:00
artstation_link.text = artstation_text;
Ajout lien ArtStation modal
2019-07-14 12:28:07 +02:00
artstation_link.href = "https://www.artstation.com/artwork/" + artstation_id;
modal_comment.appendChild(artstation_link);
Pas de <hr> si pas de commentaire
2017-07-24 22:52:08 +02:00
}
Sketchfab iframe
2017-07-24 17:09:52 +02:00
});
Simplification fenetres modales
2017-07-27 18:44:03 +02:00
$('#iframeModal').on('hidden.bs.modal', function () {
Sketchfab iframe
2017-07-24 17:09:52 +02:00
$(this).find('.modal-body iframe')[0].src = "";
Simplification fenetres modales
2017-07-27 18:44:03 +02:00
$(this).find('.modal-body .modal-comment')[0].innerHTML = "";
Sketchfab iframe
2017-07-24 17:09:52 +02:00
});
Simplification fenetres modales
2017-07-27 18:44:03 +02:00
Player Youtube amélioré
2018-04-28 18:46:00 +02:00
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
Changement vidéo principale
2019-01-22 22:27:03 +01:00
videoId: '-IH7vC_Kaj8',
Player Youtube amélioré
2018-04-28 18:46:00 +02:00
playerVars: {
autoplay: 1,
controls: 0,
disablekb: 1,
loop: 1,
modestbranding: 1,
Changement vidéo principale
2019-01-22 22:27:03 +01:00
playlist: '-IH7vC_Kaj8',
Player Youtube amélioré
2018-04-28 18:46:00 +02:00
rel: 0,
showinfo: 0
},
events: {
'onReady': onPlayerReady,
}
});
}
var iframe
function onPlayerReady(event) {
event.target.mute();
iframe = document.getElementById('player');
document.getElementById('video-sound').addEventListener('click', playMute);
}
function playMute(){
var video_button = document.getElementById('video-sound');
if(player.isMuted()){
player.unMute();
Simplification svg son vidéo
2018-05-10 19:05:08 +02:00
video_button.children[0].setAttribute("src", "vector/sound-on.svg");
Player Youtube amélioré
2018-04-28 18:46:00 +02:00
} else {
player.mute();
Simplification svg son vidéo
2018-05-10 19:05:08 +02:00
video_button.children[0].setAttribute("src", "vector/sound-off.svg");
Player Youtube amélioré
2018-04-28 18:46:00 +02:00
}
}
Nouvelle vidéo et bouton de volume
2017-07-14 20:30:10 +02:00
</script>
Premier commit
2017-07-14 15:51:49 +02:00
Remerciements
2017-08-12 15:05:47 +02:00
<footer>
Langue anglaise
2018-09-01 14:52:03 +02:00
<small>MANY thanks to Paul TREHIOU, inspired by <a href="https://startbootstrap.com/template-overviews/creative/">Creative</a> <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Licence Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/80x15.png"></a></small>
Remerciements
2017-08-12 15:05:47 +02:00
</footer>
Premier commit
2017-07-14 15:51:49 +02:00
</body>
</html>
Reference in New Issue Copy Permalink