]> git.parisson.com Git - ijkl.git/commitdiff
projects / ijkl.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 06aae06)
commit du 19 12 2013 master
authorronan le priol <ronan@emptynest.fr>
Thu, 19 Dec 2013 12:53:10 +0000 (13:53 +0100)
committerronan le priol <ronan@emptynest.fr>
Thu, 19 Dec 2013 12:53:10 +0000 (13:53 +0100)
images/favicon.ico patch | blob | history
images/favicon.png patch | blob | history
index.html patch | blob | history
media/system/css/style.css patch | blob | history
media/video/poster.jpg [new file with mode: 0644] patch | blob
media/video/poster.png [new file with mode: 0644] patch | blob
media/video/poster.psd [new file with mode: 0644] patch | blob

diff --git a/images/favicon.ico b/images/favicon.ico
index f426fa796e308480e86a228ca0f4b0651c71dbe6..70a6da0ee5a393eddfeacde9682f102bd65fb3e6 100644 (file)
Binary files a/images/favicon.ico and b/images/favicon.ico differ
diff --git a/images/favicon.png b/images/favicon.png
index 0ce14bd95501e0ab6136605d2015f1ed2937060d..3380fbbcc5b6f064e4ffadb8e1112a61a66c3af8 100644 (file)
Binary files a/images/favicon.png and b/images/favicon.png differ
diff --git a/index.html b/index.html
index d133710435ac3afd8fa0a11d33156d6503a464e7..fe58ae5eee0ca67c848b810c17eb4dbcfe6d745f 100644 (file)
--- a/index.html
+++ b/index.html
@@ -1,22 +1,18 @@
 <!DOCTYPE html>
 <!DOCTYPE html>
-<html>
+<html lang="fr">
     <head>
         <meta charset="utf-8" />
     <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">
 
                <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>
 
 <!-- maintien couleur texte clické -->
     <script type="text/javascript" src="media/system/js/jquery-1.7.1.js"></script>
@@ -28,7 +24,6 @@ cineteve, flach films, telfrance, mobile, infographiste, infographie">
        $(this).addClass('active');
        });
     });
        $(this).addClass('active');
        });
     });
-
     </script>
        
 <!-- change vidéo -->
     </script>
        
 <!-- change vidéo -->
@@ -66,7 +61,7 @@ cineteve, flach films, telfrance, mobile, infographiste, infographie">
 
 
        </head>
 
 
        </head>
-<body style="font-family:times Gotham-Light;">
+<body>
 
 <header>
        <h2>
 
 <header>
        <h2>
@@ -74,11 +69,11 @@ cineteve, flach films, telfrance, mobile, infographiste, infographie">
        </h2>
 </header>
 
        </h2>
 </header>
 
-<section >
+<section>
 
 <article >
        <h3>
 
 <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> 
                <source src="media/video/generiqOccupation.mp4" type="video/mp4" />
                <source src="media/video/generiqOccupation.ogv" type="video/ogg" />
                </video> 
@@ -87,84 +82,80 @@ cineteve, flach films, telfrance, mobile, infographiste, infographie">
 
 <article>
     <h1>
 
 <article>
     <h1>
-  
                <font size="3" >
                <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">
                (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>
 
                <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">
   
                <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="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">
        (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="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">
        (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">
                © 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">
                (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">
                (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">
                © 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">
                © 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">
                © 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">
                (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>
                © IJKL (2004)</a>
-
-               
     </h1>
 </article>
 </section>
     </h1>
 </article>
 </section>
-
-
 <footer>
 <footer>
-    <!-- Placez ici le contenu du pied de page -->
+               <p>© 2013 JÉRÔME LETUÉ</p>
+               <br><br>
 </footer>
 </footer>
+</body>
 
 
-    </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/media/system/css/style.css b/media/system/css/style.css
index 737e507fdc769be18e694cec8301fa6b8945c52b..123b890221de5538c01ddf5625a247f872806bc0 100644 (file)
--- a/media/system/css/style.css
+++ b/media/system/css/style.css
@@ -1,27 +1,25 @@
+@charset 'UTF-8';
+
+
 a{color: gainsboro; text-decoration:none
 }
 a:visited{color: gainsboro;
 }
 a:hover{color: black;
 }
 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;
 }
 }
 ::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%;
 
 video {
        max-width: 100%;
@@ -29,16 +27,23 @@ video {
        background-color:#ffffff;
 }
 
        background-color:#ffffff;
 }
 
+p{
+       text-align:center;
+       color: gainsboro;
+       font-size: 11px;
+}
+
 h1 /* REAL & PROD */
 h1 /* REAL & PROD */
-{
-    display: block;   
-    position: absolute;
-    bottom: 050px;
+{  
+
+       
+       display: block;
+       width:90%;
+    margin-bottom: 50px;
        font-size: 11px;
        color: gainsboro;
        text-align: justify;
        font-size: 11px;
        color: gainsboro;
        text-align: justify;
-       margin-right: 100px;
-       margin-left: 100px;
+       margin:auto;
        letter-spacing: 2px;
        line-height: 150%
 }
        letter-spacing: 2px;
        line-height: 150%
 }
@@ -52,18 +57,133 @@ h2 /* contact */
        letter-spacing: 8px;
 }
 h3 /* la video */
        letter-spacing: 8px;
 }
 h3 /* la video */
-{
+{ 
+       display: block; 
     margin-top: 30px;
     text-align: center;
     
 }
 h6
 {
     margin-top: 30px;
     text-align: center;
     
 }
 h6
 {
+       display: block;
        font-size: 10px;
        color: rgb(190,190,190);
        font-size: 10px;
        color: rgb(190,190,190);
-       font-family: helvetica, Trebuchet MS;
        text-align: right;
        margin-right: 100px; 
        letter-spacing: 30px;
        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;
+       }
+}
+
+
+
+
+
+
+
diff --git a/media/video/poster.jpg b/media/video/poster.jpg
new file mode 100644 (file)
index 0000000..ebb17df
Binary files /dev/null and b/media/video/poster.jpg differ
diff --git a/media/video/poster.png b/media/video/poster.png
new file mode 100644 (file)
index 0000000..c8b52f2
Binary files /dev/null and b/media/video/poster.png differ
diff --git a/media/video/poster.psd b/media/video/poster.psd
new file mode 100644 (file)
index 0000000..62d7831
Binary files /dev/null and b/media/video/poster.psd differ
Unnamed repository; edit this file 'description' to name the repository.