<!DOCTYPE html>
-<html>
+<html lang="fr">
<head>
<meta charset="utf-8" />
- <link rel="stylesheet" href="media/system/css/style.css" />
- <title>ijkl.fr</title>
-
- <meta name="Keywords" content="graphisme, efter effects, cinetisme, cinetism, wheels, engrenage, riou, pouchain,
-cineteve, flach films, telfrance, mobile, infographiste, infographie">
-
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>ijkl</title>
+ <meta name="Keywords" content="graphisme, efter effects, cinetisme, cinetism, wheels, engrenage, riou, pouchain, cineteve, flach films, telfrance, mobile, infographiste, infographie">
+ <meta name="description" content="motion design et montage vidéo" />
+ <meta name="author" content="jérôme letué" />
+ <link rel="stylesheet" href="media/system/css/style.css" />
<link rel="icon" type="image/png" href="images/favicon.png">
<link rel="shortcut icon" href="images/favicon.ico">
- <style type="text/css">
- a{text-decoration:none; color:gainsboro;
- }
- .active{color:black;
- }
- </style>
+
<!-- maintien couleur texte clické -->
<script type="text/javascript" src="media/system/js/jquery-1.7.1.js"></script>
$(this).addClass('active');
});
});
-
</script>
<!-- change vidéo -->
</head>
-<body style="font-family:times Gotham-Light;">
+<body>
<header>
<h2>
</h2>
</header>
-<section >
+<section>
<article >
<h3>
- <video id="player" controls loop autoplay="autoplay" poster="media/video/generiqOccupation.png" >
+ <video id="player" controls autoplay loop poster="media/video/poster.png" >
<source src="media/video/generiqOccupation.mp4" type="video/mp4" />
<source src="media/video/generiqOccupation.ogv" type="video/ogg" />
</video>
<article>
<h1>
-
<font size="3" >
- <a href="#" onclick="changeVideo('media/video/generiqOccupation');" >ALLEMAGNE, L'ART ET LA NATION</a></font>
+ <a href="javascript:changeVideo('media/video/generiqOccupation')" >ALLEMAGNE, L'ART ET LA NATION</a></font>
(JEAN-BAPTISTE PÉRETIÉ) © TEMPS NOIR PRODUCTION (2013)</a>
<font size="3">
- <a href="#" onclick="changeVideo('media/video/PCM_03_leX');" >PETITS CONTES MATHÉMATIQUES</a></font>
+ <a href="javascript:changeVideo('media/video/PCM_03_leX')" >PETITS CONTES MATHÉMATIQUES</a></font>
- (<a href="https://www.vimeo.com/aurelienrocland/ "target="_blank">AURÉLIEN ROCLAND</a> / <a href=https://www.vimeo.com/user2282537/videos/ "target="_blank">CLÉMENCE GANDILLOT</a>)
- <a href="http://www.goldeniastudios.com/ "target="_blank"> © GOLDENIA STUDIOS </a> / <a href=http://www.universcience.tv/categorie-petits-contes-mathematiques-626.html "target="_blank"> UNIVERSCIENCE (2012)</a>
+ (<a href="https://www.vimeo.com/aurelienrocland/ "target="_blank">AURÉLIEN ROCLAND</a> / <a href="https://www.vimeo.com/user2282537/videos/ "target="_blank">CLÉMENCE GANDILLOT</a>)
+ <a href="http://www.goldeniastudios.com/ "target="_blank"> © GOLDENIA STUDIOS </a> / <a href="http://www.universcience.tv/categorie-petits-contes-mathematiques-626.html "target="_blank"> UNIVERSCIENCE (2012)</a>
<font size="3">
<a href="javascript:changeVideo2('media/video/longchamp_2012')" rel="player">LONGCHAMP BOUTIQUE</a></font>
- <a href="#" onclick="http://www.mirabellstudio.com/ "target="_blank"> © MIRABELL STUDIOS (2012)</a>
+ <a href="http://www.mirabellstudio.com/ "target="_blank"> © MIRABELL STUDIOS (2012)</a>
<font size="3">
- <a href="#" onclick="changeVideo('media/video/generiqClowns')" rel="player">CLOWNS</a></font>
+ <a href="javascript:changeVideo('media/video/generiqClowns')" rel="player">CLOWNS</a></font>
(<a href="http://www.riou-et-pouchain.jimdo.com/ "target="_blank">YVES RIOU & PHILIPPE POUCHAIN</a>)
<a href="http://www.cineteve.com/ "target="_blank"> © CINÉTÉVÉ (2011)</a>
<font size="3">
- <a href="#" onclick="changeVideo('media/video/anim_atome')" rel="player">MARIE CURIE, AU DELÀ DU MYTHE</a></font>
+ <a href="javascript:changeVideo('media/video/anim_atome')" rel="player">MARIE CURIE, AU DELÀ DU MYTHE</a></font>
(MICHEL VUILLERMET)
<a href="http://http://www.filmsdunjour.com/ "target="_blank"> © LES FILMS D’UN JOUR (2011)</a>
<font size="3">
- <a href="#" onclick="changeVideo('media/video/generiqOccupation')" rel="player">L’OCCUPATION SANS RELÂCHE</a></font>
+ <a href="javascript:changeVideo('media/video/generiqOccupation')" rel="player">L’OCCUPATION SANS RELÂCHE</a></font>
(<a href="http://www.riou-et-pouchain.jimdo.com/ "target="_blank">YVES RIOU & PHILIPPE POUCHAIN</a>)
<a href="http://www.cineteve.com/ "target="_blank"> © CINÉTÉVÉ (2010)</a>
<font size="3">
- <a href="#" onclick="changeVideo('media/video/GeneriqYeyeRevolution')" rel="player">YÉYÉ RÉVOLUTION</a></font>
+ <a href="javascript:changeVideo('media/video/GeneriqYeyeRevolution')" rel="player">YÉYÉ RÉVOLUTION</a></font>
(MICHEL ROYER)
<a href="http://www.program33.com/ "target="_blank"> © PROGRAM33 (2010)</a>
<font size="3">
- <a href="#" onclick="changeVideo('media/video/ClipSstMix')" rel="player">LA PETITE FILLE SANS LANGUE</a></font>
+ <a href="javascript:changeVideo('media/video/ClipSstMix')" rel="player">LA PETITE FILLE SANS LANGUE</a></font>
© IJKL / SIN S THESIA (2010)</a>
<font size="3">
- <a href="#" onclick="changeVideo('media/video/pinUp')" rel="player">SOIRÉE THÉMA / PIN-UP</a></font>
+ <a href="javascript:changeVideo('media/video/pinUp')" rel="player">SOIRÉE THÉMA / PIN-UP</a></font>
(SÉBASTIEN VIDAL)
<a href="http://www.novaprod-owl.com/ "target="_blank"> © NOVA PROD (2009)</a>
<font size="3">
- <a href="#" onclick="changeVideo('media/video/generiqMilesDavis')" rel="player">SOIRÉE THÉMA / MILES DAVIS</a></font>
+ <a href="javascript:changeVideo('media/video/generiqMilesDavis')" rel="player">SOIRÉE THÉMA / MILES DAVIS</a></font>
(SÉBASTIEN VIDAL)
<a href="http://www.novaprod-owl.com/ "target="_blank"> © NOVA PROD (2009)</a>
<font size="3">
- <a href="#" onclick="changeVideo2('media/video/mobileDEFnb')" rel="player">MOBILE <font size="2">(L1*P1 = L2*P2)</font></a></font>
+ <a href="javascript:changeVideo2('media/video/mobileDEFnb')" rel="player">MOBILE <font size="2">(L1*P1 = L2*P2)</font></a></font>
© IJKL (2009)</a>
<font size="3">
- <a href="#" onclick="changeVideo('media/video/mobileartokyo')" rel="player">MOBILEART TOKYO</a></font>
+ <a href="javascript:changeVideo('media/video/mobileartokyo')" rel="player">MOBILEART TOKYO</a></font>
© CHANEL (2008)
<font size="3">
- <a href="#" onclick="changeVideo2('media/video/LeTrouCarre')" rel="player" >GÉOMETRIES</a></font>
+ <a href="javascript:changeVideo2('media/video/LeTrouCarre')" rel="player" >GÉOMETRIES</a></font>
© IJKL (2008)</a>
<font size="3">
- <a href="#" onclick="changeVideo('media/video/chanel_3')" rel="player" >CHANEL PARIS-LONDRES</a></font>
+ <a href="javascript:changeVideo('media/video/chanel_3')" rel="player" >CHANEL PARIS-LONDRES</a></font>
(AMAR ARHAB) © CHANEL (2007)
<font size="3">
- <a href="#" onclick="changeVideo2('media/video/cir')" rel="player" >CENTRE INSTANTANÉ DE ROTATION</a></font>
+ <a href="javascript:changeVideo2('media/video/cir')" rel="player" >CENTRE INSTANTANÉ DE ROTATION</a></font>
© IJKL (2004)</a>
-
-
</h1>
</article>
</section>
-
-
<footer>
- <!-- Placez ici le contenu du pied de page -->
+ <p>© 2013 JÉRÔME LETUÉ</p>
+ <br><br>
</footer>
+</body>
- </body>
-</html>
\ No newline at end of file
+</html>
+@charset 'UTF-8';
+
+
a{color: gainsboro; text-decoration:none
}
a:visited{color: gainsboro;
}
a:hover{color: black;
}
-a:active={black;
+a:active{black;
}
::selection{background:white; color:black;
}
-
-
-body{background-color: rgb(255,255,255);
+.active{color:black;
}
-@font-face {
-font-family: 'Gotham-Light';
-src: url('gotham-light.eot');
-src: url('gotham-light.eot?#iefix'),
-url('gotham-light.woff') format('woff'),
-url('gotham-light.ttf') format('truetype'),
-url('gotham-light.svg#gotham-light') format('svg');
-}
+ html, body{
+ background-color: rgb(255,255,255);
+ font-family: "Times New Roman", Times, georgia, serif;
+ height:100%;
+}
video {
max-width: 100%;
background-color:#ffffff;
}
+p{
+ text-align:center;
+ color: gainsboro;
+ font-size: 11px;
+}
+
h1 /* REAL & PROD */
-{
- display: block;
- position: absolute;
- bottom: 050px;
+{
+
+
+ display: block;
+ width:90%;
+ margin-bottom: 50px;
font-size: 11px;
color: gainsboro;
text-align: justify;
- margin-right: 100px;
- margin-left: 100px;
+ margin:auto;
letter-spacing: 2px;
line-height: 150%
}
letter-spacing: 8px;
}
h3 /* la video */
-{
+{
+ display: block;
margin-top: 30px;
text-align: center;
}
h6
{
+ display: block;
font-size: 10px;
color: rgb(190,190,190);
- font-family: helvetica, Trebuchet MS;
text-align: right;
margin-right: 100px;
letter-spacing: 30px;
- line-height: 150%
-}
\ No newline at end of file
+ line-height: 150%;
+}
+
+footer {
+bottom:0px;
+margin-top:50px;
+}
+
+@media (max-device-width:320px) and (orientation:portrait) {
+ html {-webkit-text-size-adjust:80%}
+
+ h1{
+ display: block;
+ width:90%;
+ text-align: justify;
+ margin:auto;
+ letter-spacing: 1px;
+ line-height: 200%
+ }
+
+ video {
+ width: 300px;
+ height: 169px;
+ }
+
+ footer {
+ bottom:20px;
+ margin-top:50px;
+ }
+}
+
+@media (max-device-width:768px) and (orientation:landscape) {
+ html {-webkit-text-size-adjust:80%}
+ h1{
+
+ display: block;
+ width:90%;
+ text-align: justify;
+ margin:auto;
+ letter-spacing: 1px;
+ line-height: 200%
+ }
+
+ video {
+ width: 400px;
+ height: 225px;
+ }
+
+ footer {
+ bottom:20px;
+ margin-top:50px;
+ }
+}
+
+
+
+@media only screen
+and (min-device-width : 768px)
+and (max-device-width : 1024px)
+and (orientation : portrait)
+and (-webkit-min-device-pixel-ratio: 1) {
+ html {-webkit-text-size-adjust:80%}
+
+ h1{
+ display: block;
+ width:90%;
+ text-align: justify;
+ margin:auto;
+ letter-spacing: 1px;
+ line-height: 200%
+ }
+
+ video {
+ width: 640px;
+ height: 360px;
+ }
+
+ footer {
+ bottom:40px;
+ margin-top:50px;
+ }
+}
+
+@media only screen
+and (min-device-width : 768px)
+and (max-device-width : 1024px)
+and (orientation : landscape)
+and (-webkit-min-device-pixel-ratio: 1) {
+ html {-webkit-text-size-adjust:80%}
+
+ h1{
+ display: block;
+ width:90%;
+ text-align: justify;
+ margin:auto;
+ letter-spacing: 1px;
+ line-height: 200%
+ }
+
+ video {
+ width: 640px;
+ height: 360px;
+ }
+
+ footer {
+ bottom:40px;
+ margin-top:50px;
+ }
+}
+
+
+
+
+
+
+
projects / ijkl.git / commitdiff
