<!DOCTYPE html>
<html lang="fr" class="no-js">
- <head>
- <meta charset="UTF-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>A Collection of Page Transitions</title>
- <meta name="description" content="" />
- <meta name="keywords" content="" />
- <meta name="author" content="" />
- <link rel="stylesheet" type="text/css" href="css/multilevelmenu.css" />
- <link rel="stylesheet" type="text/css" href="css/component.css" />
- <link rel="stylesheet" type="text/css" href="css/animations.css" />
- <script src="js/modernizr.custom.js"></script>
- </head>
- <body class="color01">
-
<div class="pt-triggers">
- <button id="iterateEffects" class="pt-touch-button">suivant</button>
-
<div id="dl-menu" class="dl-menuwrapper">
- <li>
-
<ul class="dl-submenu">
-
<li data-animation="1"><a href="#"></a></li>
- </ul>
- </li>
- </ul>
- </div><!-- /dl-menu-wrapper-->
- </div><!-- /triggers -->
-
-
<div id="pt-main" class="pt-perspective color01">
-
<div class="pt-page color02 pt-page-1"><h2 class="image"><img class="image" src="img/dia_01.png" alt="" /><h2/></div>
-
<div class="pt-page color02 pt-page-2"><h1><span>A collection of</span><strong>Page2</strong> Transitions</h1></div>
-
<div class="pt-page color02 pt-page-3"><h1><span>A collection of</span><strong>Page3</strong> Transitions</h1></div>
-
<div class="pt-page color02 pt-page-4"><h1><span>A collection of</span><strong>Page4</strong> Transitions</h1></div>
-
<div class="pt-page color02 pt-page-5"><h1><span>A collection of</span><strong>Page5</strong> Transitions</h1></div>
-
<div class="pt-page color08 pt-page-6">
- <video id="player" width="100%" height="100%" controls poster="vid/tele01.png">
- <source src="vid/tele01.mp4" type="video/mp4" />
- <source src="vid/tele01.webm" type="video/webm" />
- <source src="vid/tele01.ogv" type="video/ogg" />
- </video>
- </div>
- </div>
+ <head>
+ <meta charset="UTF-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>A Collection of Page Transitions</title>
+ <meta name="description" content="" />
+ <meta name="keywords" content="" />
+ <meta name="author" content="" />
+ <link rel="stylesheet" type="text/css" href="css/multilevelmenu.css" />
+ <link rel="stylesheet" type="text/css" href="css/component.css" />
+ <link rel="stylesheet" type="text/css" href="css/animations.css" />
+ <script src="js/modernizr.custom.js"></script>
+ </head>
+ <body class="color01">
+ <div class="pt-triggers">
+ <button id="iterateEffects" class="pt-touch-button">suivant</button>
+ <div id="dl-menu" class="dl-menuwrapper">
+ <ul class="dl-menu">
+ <li>
+ <a href="#"></a>
+ <ul class="dl-submenu">
+ <li data-animation="1"><a href="#"></a></li>
+ </ul>
+ </li>
+ </ul>
+ </div><!-- /dl-menu-wrapper-->
+ </div><!-- /triggers -->
+
+ <div id="pt-main" class="pt-perspective color01">
+ <div class="pt-page color02 pt-page-1"><h2 class="image"><img class="image" src="img/dia_01.png" alt="" /><h2/></div>
+ <div class="pt-page color02 pt-page-2"><h1><span>A collection of</span><strong>Page2</strong> Transitions</h1></div>
+ <div class="pt-page color02 pt-page-3"><h1><span>A collection of</span><strong>Page3</strong> Transitions</h1></div>
+ <div class="pt-page color02 pt-page-4"><h1><span>A collection of</span><strong>Page4</strong> Transitions</h1></div>
+ <div class="pt-page color02 pt-page-5"><h1><span>A collection of</span><strong>Page5</strong> Transitions</h1></div>
+ <div class="pt-page color08 pt-page-6">
+ <video id="player" width="100%" height="100%" controls poster="vid/tele01.png">
+ <source src="vid/tele01.mp4" type="video/mp4" />
+ <source src="vid/tele01.webm" type="video/webm" />
+ <source src="vid/tele01.ogv" type="video/ogg" />
+ </video>
+ </div>
+ </div>
-
<div class="pt-message">
-
<p>Your browser does not support CSS animations.</p>
- </div>
+ <div class="pt-message">
+ <p>Your browser does not support CSS animations.</p>
+ </div>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
- <script src="js/jquery.dlmenu.js"></script>
- <script src="js/pagetransitions.js"></script>
- </body>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+ <script src="js/jquery.dlmenu.js"></script>
+ <script src="js/pagetransitions.js"></script>
+ </body>
</html>
<!DOCTYPE html>
<html lang="fr">
- <head>
- <meta charset="UTF-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>mobile web tv</title>
- <meta name="description" content="" />
- <meta name="keywords" content="" />
- <meta name="author" content="" />
- <link rel="stylesheet" type="text/css" href="css/component.css" />
- <link rel="stylesheet" type="text/css" href="css/gamme.css" />
- <script src="js/modernizr.custom.js"></script>
-
- </head>
- <body>
+ <head>
+ <meta charset="UTF-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>mobile web tv</title>
+ <meta name="description" content="" />
+ <meta name="keywords" content="" />
+ <meta name="author" content="" />
+ <link rel="stylesheet" type="text/css" href="css/component.css" />
+ <link rel="stylesheet" type="text/css" href="css/gamme.css" />
+ <script src="js/modernizr.custom.js"></script>
+
+ </head>
+ <body>
-
<div class="container">
-
<div id="bl-main" class="bl-mainfull">
- <section class="color01" id="bl-work-section">
-
<h2><img class="bl-image" src="img/telecasting-baseline01.svg" /></h2>
- </div>
-
<div class="bl-content color01">
- <h2>mobile web tv</h2>
- <p>La solution matériel et logiciel professionnelle, portable et tout en un pour l'enregistrement video et audio de vos évènements et leur diffusion multicanal </p>
-
<ul id="bl-work-items">
-
<li data-panel="panel-1"><a href="#"><img src="img/record.svg" /></a></li>
-
<li data-panel="panel-2"><a href="#"><img src="img/brodcast.svg" /></a></li>
-
<li data-panel="panel-3"><a href="#"><img src="img/play.svg" /></a></li>
-
<li data-panel="panel-4"><a href="#"><img src="img/4.jpg" /></a></li>
- </ul>
- </div>
- <span class="bl-icon bl-icon-close"></span>
- </section>
- <!-- Panel items for the works -->
-
<div class="bl-panel-items" id="bl-panel-work-items">
-
<div data-panel="panel-1" class="color01">
- <img class="bl-image" src="img/4.jpg" />
- <div>
- <h3>Brooklyn dreamcatcher</h3>
-
<p>Fashion axe 90's pug fap. Blog wayfarers brooklyn dreamcatcher, bicycle rights retro YOLO. Wes anderson lomo 90's food truck 3 wolf moon, twee jean shorts. Iphone small batch twee wolf yr before they sold out. Brooklyn echo park cred, portland pug selvage flannel seitan tousled mcsweeney's.</p>
- </div>
- </div>
-
<div data-panel="panel-2" class="color02">
-
<img class="bl-image" src="img/2.jpg" />
- <div >
- <h3>Chillwave mustache</h3>
-
<p>Squid vinyl scenester literally pug, hashtag tofu try-hard typewriter polaroid craft beer mlkshk cardigan photo booth PBR. Chillwave 90's gentrify american apparel carles disrupt. Pinterest semiotics single-origin coffee craft beer thundercats irony, tumblr bushwick intelligentsia pickled. Narwhal mustache godard master cleanse street art, occupy ugh selfies put a bird on it cray salvia four loko gluten-free shoreditch.</p>
- </div>
- </div>
-
<div data-panel="panel-3" class="color04">
-
<img class="bl-image" src="img/3.jpg" />
- <h3>Austin hella</h3>
-
<p>Ethical cray wayfarers leggings vice, seitan banksy small batch ethnic master cleanse. Pug chillwave etsy, scenester meh occupy blue bottle tousled blog tonx pinterest selvage mixtape swag cosby sweater. Synth tousled direct trade, hella Austin craft beer ugh chambray.</p>
- </div>
- </div>
-
<div data-panel="panel-4" class="color05">
- <video id="player" width="100%" height="auto" controls poster="vid/tele01.png">
- <source src="vid/tele01.mp4" type="video/mp4" />
- <source src="vid/tele01.webm" type="video/webm" />
- <source src="vid/tele01.ogv" type="video/ogg" />
- </video>
- </div>
- <nav>
- <span class="bl-next-work">> Next Project</span>
- <span class="bl-icon bl-icon-close"></span>
- </nav>
- </div>
- </div>
- </div><!-- /container -->
- <script src="js/jquery.min.js"></script>
- <script src="js/boxlayout.js"></script>
- <script>
- $(function() {
- Boxlayout.init();
- });
- </script>
- </body>
+ <div class="container">
+ <div id="bl-main" class="bl-mainfull">
+ <section class="color01" id="bl-work-section">
+ <div class="bl-box">
+ <h2><img class="bl-image" src="img/telecasting-baseline01.svg" /></h2>
+ </div>
+ <div class="bl-content color01">
+ <h2>mobile web tv</h2>
+ <p>La solution matériel et logiciel professionnelle, portable et tout en un pour l'enregistrement video et audio de vos évènements et leur diffusion multicanal </p>
+ <ul id="bl-work-items">
+ <li data-panel="panel-1"><a href="#"><img src="img/record.svg" /></a></li>
+ <li data-panel="panel-2"><a href="#"><img src="img/brodcast.svg" /></a></li>
+ <li data-panel="panel-3"><a href="#"><img src="img/play.svg" /></a></li>
+ <li data-panel="panel-4"><a href="#"><img src="img/4.jpg" /></a></li>
+ </ul>
+ </div>
+ <span class="bl-icon bl-icon-close"></span>
+ </section>
+ <!-- Panel items for the works -->
+ <div class="bl-panel-items" id="bl-panel-work-items">
+ <div data-panel="panel-1" class="color01">
+ <img class="bl-image" src="img/4.jpg" />
+ <div>
+ <h3>Brooklyn dreamcatcher</h3>
+ <p>Fashion axe 90's pug fap. Blog wayfarers brooklyn dreamcatcher, bicycle rights retro YOLO. Wes anderson lomo 90's food truck 3 wolf moon, twee jean shorts. Iphone small batch twee wolf yr before they sold out. Brooklyn echo park cred, portland pug selvage flannel seitan tousled mcsweeney's.</p>
+ </div>
+ </div>
+ <div data-panel="panel-2" class="color02">
+ <img class="bl-image" src="img/2.jpg" />
+ <div >
+ <h3>Chillwave mustache</h3>
+ <p>Squid vinyl scenester literally pug, hashtag tofu try-hard typewriter polaroid craft beer mlkshk cardigan photo booth PBR. Chillwave 90's gentrify american apparel carles disrupt. Pinterest semiotics single-origin coffee craft beer thundercats irony, tumblr bushwick intelligentsia pickled. Narwhal mustache godard master cleanse street art, occupy ugh selfies put a bird on it cray salvia four loko gluten-free shoreditch.</p>
+ </div>
+ </div>
+ <div data-panel="panel-3" class="color04">
+ <img class="bl-image" src="img/3.jpg" />
+ <div>
+ <h3>Austin hella</h3>
+ <p>Ethical cray wayfarers leggings vice, seitan banksy small batch ethnic master cleanse. Pug chillwave etsy, scenester meh occupy blue bottle tousled blog tonx pinterest selvage mixtape swag cosby sweater. Synth tousled direct trade, hella Austin craft beer ugh chambray.</p>
+ </div>
+ </div>
+ <div data-panel="panel-4" class="color05">
+ <video id="player" width="100%" height="auto" controls poster="vid/tele01.png">
+ <source src="vid/tele01.mp4" type="video/mp4" />
+ <source src="vid/tele01.webm" type="video/webm" />
+ <source src="vid/tele01.ogv" type="video/ogg" />
+ </video>
+ </div>
+ <nav>
+ <span class="bl-next-work">> Next Project</span>
+ <span class="bl-icon bl-icon-close"></span>
+ </nav>
+ </div>
+ </div>
+ </div><!-- /container -->
+ <script src="js/jquery.min.js"></script>
+ <script src="js/boxlayout.js"></script>
+ <script>
+ $(function() {
+ Boxlayout.init();
+ });
+ </script>
+ </body>
</html>
<!DOCTYPE html>
<html lang="fr">
- <head>
- <meta charset="UTF-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>workflow</title>
- <meta name="description" content="" />
- <meta name="keywords" content="" />
- <link rel="stylesheet" type="text/css" href="css/component.css" />
- <link rel="stylesheet" type="text/css" href="css/gamme.css" />
- <script src="js/modernizr.custom.js"></script>
-
- </head>
- <body >
+ <head>
+ <meta charset="UTF-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>workflow</title>
+ <meta name="description" content="" />
+ <meta name="keywords" content="" />
+ <link rel="stylesheet" type="text/css" href="css/component.css" />
+ <link rel="stylesheet" type="text/css" href="css/gamme.css" />
+ <script src="js/modernizr.custom.js"></script>
+
+ </head>
+ <body >
-
<div class="container">
-
<div id="bl-main" class="bl-main">
- <section class="color01">
- <h2 >solution web tv<br>100%<br>mobile & portable</h2>
- </div>
-
<div class="bl-content">
- <h2 class="Tcolor10">mobile web tv</h2>
-
<p>This responsive layout is based on an initial grid of four boxes. Once a box is clicked, it gets resized to fullscreen and the other boxes scale down and fade out. In the work section we experiment with another transition which is to show a panel by making it appear from the bottom while scaling the current one down. To see it in action, open the work section and click on one of the portfolio items and navigate through them.</p>
- <p>
-
<a href="live-web-tv.html" target="_blank"><strong>en savoir plus</strong></a>
- </p>
- </div>
- <span class="bl-icon bl-icon-close"></span>
- </section>
- <section class="color02">
- <h2>solution e-learning<br>100%<br>mobile & portable</h2>
- </div>
-
<div class="bl-content">
- <h2>About this layout</h2>
-
<p>This responsive layout is based on an initial grid of four boxes. Once a box is clicked, it gets resized to fullscreen and the other boxes scale down and fade out. In the work section we experiment with another transition which is to show a panel by making it appear from the bottom while scaling the current one down. To see it in action, open the work section and click on one of the portfolio items and navigate through them.</p>
-
<a href="live-web-tv.html" target="_blank"><strong>en savoir plus</strong></a>>
- </p>
- </div>
- <span class="bl-icon bl-icon-close"></span>
- </section>
- <section class="color03">
- <h2 >solution e-conference<br>100%<br>mobile & portable</h2>
- </div>
-
<div class="bl-content">
- <h2>About this layout</h2>
-
<p>This responsive layout is based on an initial grid of four boxes. Once a box is clicked, it gets resized to fullscreen and the other boxes scale down and fade out. In the work section we experiment with another transition which is to show a panel by making it appear from the bottom while scaling the current one down. To see it in action, open the work section and click on one of the portfolio items and navigate through them.</p>
-
<a href="live-web-tv.html" target="_blank"><strong>en savoir plus</strong></a>
- </p>
- </div>
- <span class="bl-icon bl-icon-close"></span>
- </section>
- <section class="color04">
- <h2>solution e-concert<br>100%<br>mobile & portable</h2>
- </div>
-
<div class="bl-content">
- <h2>Get in touch</h2>
-
<p>Pinterest semiotics single-origin coffee craft beer thundercats irony, tumblr bushwick intelligentsia pickled. Narwhal mustache godard master cleanse street art, occupy ugh selfies put a bird on it cray salvia four loko gluten-free shoreditch. Occupy american apparel freegan cliche. Mustache trust fund 8-bit jean shorts mumblecore thundercats. Pour-over small batch forage cray, banjo post-ironic flannel keffiyeh cred ethnic semiotics next level tousled fashion axe. Sustainable cardigan keytar fap bushwick bespoke.</p>
-
<a href="live-web-tv.html" target="_blank"><strong>en savoir plus</strong></a>
- </p>
- </div>
- <span class="bl-icon bl-icon-close"></span>
- </section>
- </div>
- </div><!-- /container -->
- <script src="js/jquery.min.js"></script>
- <script src="js/boxlayout.js"></script>
- <script>
- $(function() {
- Boxlayout.init();
- });
- </script>
- </body>
+ <div class="container">
+ <div id="bl-main" class="bl-main">
+ <section class="color01">
+ <div class="bl-box" >
+ <h2 >solution web tv<br>100%<br>mobile & portable</h2>
+ </div>
+ <div class="bl-content">
+ <h2 class="Tcolor10">mobile web tv</h2>
+ <p>This responsive layout is based on an initial grid of four boxes. Once a box is clicked, it gets resized to fullscreen and the other boxes scale down and fade out. In the work section we experiment with another transition which is to show a panel by making it appear from the bottom while scaling the current one down. To see it in action, open the work section and click on one of the portfolio items and navigate through them.</p>
+ <p>
+ <a href="live-web-tv.html" target="_blank"><strong>en savoir plus</strong></a>
+ </p>
+ </div>
+ <span class="bl-icon bl-icon-close"></span>
+ </section>
+ <section class="color02">
+ <div class="bl-box">
+ <h2>solution e-learning<br>100%<br>mobile & portable</h2>
+ </div>
+ <div class="bl-content">
+ <h2>About this layout</h2>
+ <p>This responsive layout is based on an initial grid of four boxes. Once a box is clicked, it gets resized to fullscreen and the other boxes scale down and fade out. In the work section we experiment with another transition which is to show a panel by making it appear from the bottom while scaling the current one down. To see it in action, open the work section and click on one of the portfolio items and navigate through them.</p>
+ <p>
+ <a href="live-web-tv.html" target="_blank"><strong>en savoir plus</strong></a>>
+ </p>
+ </div>
+ <span class="bl-icon bl-icon-close"></span>
+ </section>
+ <section class="color03">
+ <div class="bl-box">
+ <h2 >solution e-conference<br>100%<br>mobile & portable</h2>
+ </div>
+ <div class="bl-content">
+ <h2>About this layout</h2>
+ <p>This responsive layout is based on an initial grid of four boxes. Once a box is clicked, it gets resized to fullscreen and the other boxes scale down and fade out. In the work section we experiment with another transition which is to show a panel by making it appear from the bottom while scaling the current one down. To see it in action, open the work section and click on one of the portfolio items and navigate through them.</p>
+ <p>
+ <a href="live-web-tv.html" target="_blank"><strong>en savoir plus</strong></a>
+ </p>
+ </div>
+ <span class="bl-icon bl-icon-close"></span>
+ </section>
+ <section class="color04">
+ <div class="bl-box">
+ <h2>solution e-concert<br>100%<br>mobile & portable</h2>
+ </div>
+ <div class="bl-content">
+ <h2>Get in touch</h2>
+ <p>Pinterest semiotics single-origin coffee craft beer thundercats irony, tumblr bushwick intelligentsia pickled. Narwhal mustache godard master cleanse street art, occupy ugh selfies put a bird on it cray salvia four loko gluten-free shoreditch. Occupy american apparel freegan cliche. Mustache trust fund 8-bit jean shorts mumblecore thundercats. Pour-over small batch forage cray, banjo post-ironic flannel keffiyeh cred ethnic semiotics next level tousled fashion axe. Sustainable cardigan keytar fap bushwick bespoke.</p>
+ <p>
+ <a href="live-web-tv.html" target="_blank"><strong>en savoir plus</strong></a>
+ </p>
+ </div>
+ <span class="bl-icon bl-icon-close"></span>
+ </section>
+ </div>
+ </div><!-- /container -->
+ <script src="js/jquery.min.js"></script>
+ <script src="js/boxlayout.js"></script>
+ <script>
+ $(function() {
+ Boxlayout.init();
+ });
+ </script>
+ </body>
</html>
<!DOCTYPE html>
<html lang="en" class="no-js">
- <head>
- <meta charset="UTF-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>A Collection of Page Transitions</title>
- <meta name="description" content="A Collection of Page Transitions with CSS Animations" />
- <meta name="keywords" content="page transition, css animation, website, effect, css3, jquery" />
- <meta name="author" content="Codrops" />
- <link rel="shortcut icon" href="../favicon.ico">
- <link rel="stylesheet" type="text/css" href="css/default.css" />
- <link rel="stylesheet" type="text/css" href="css/multilevelmenu.css" />
- <link rel="stylesheet" type="text/css" href="css/component.css" />
- <link rel="stylesheet" type="text/css" href="css/animations.css" />
- <script src="js/modernizr.custom.js"></script>
- </head>
- <body>
-
<div class="codrops-top clearfix">
-
<a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Tutorials/AutomaticFigureNumbering/"><span>Previous Demo</span></a>
-
<span class="right"><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=15001"><span>Back to the Codrops Article</span></a></span>
- </div>
+ <head>
+ <meta charset="UTF-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>A Collection of Page Transitions</title>
+ <meta name="description" content="A Collection of Page Transitions with CSS Animations" />
+ <meta name="keywords" content="page transition, css animation, website, effect, css3, jquery" />
+ <meta name="author" content="Codrops" />
+ <link rel="shortcut icon" href="../favicon.ico">
+ <link rel="stylesheet" type="text/css" href="css/default.css" />
+ <link rel="stylesheet" type="text/css" href="css/multilevelmenu.css" />
+ <link rel="stylesheet" type="text/css" href="css/component.css" />
+ <link rel="stylesheet" type="text/css" href="css/animations.css" />
+ <script src="js/modernizr.custom.js"></script>
+ </head>
+ <body>
+ <div class="codrops-top clearfix">
+ <a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Tutorials/AutomaticFigureNumbering/"><span>Previous Demo</span></a>
+ <span class="right"><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=15001"><span>Back to the Codrops Article</span></a></span>
+ </div>
-
<div class="pt-triggers">
- <button id="iterateEffects" class="pt-touch-button">Show next page transition</button>
-
<div id="dl-menu" class="dl-menuwrapper">
- <button class="dl-trigger">Choose a transition</button>
- <li>
-
<ul class="dl-submenu">
-
<li data-animation="1"><a href="#">Move to left/ from right</a></li>
-
<li data-animation="2"><a href="#">Move to right/ from left</a></li>
-
<li data-animation="3"><a href="#">Move to top/ from bottom</a></li>
-
<li data-animation="4"><a href="#">Move to bottom/ from top</a></li>
- </ul>
- </li>
- <li>
-
<ul class="dl-submenu">
-
<li data-animation="5"><a href="#">Fade / from right</a></li>
-
<li data-animation="6"><a href="#">Fade / from left</a></li>
-
<li data-animation="7"><a href="#">Fade / from bottom</a></li>
-
<li data-animation="8"><a href="#">Fade / from top</a></li>
-
<li data-animation="9"><a href="#">Fade left / Fade right</a></li>
-
<li data-animation="10"><a href="#">Fade right / Fade left</a></li>
-
<li data-animation="11"><a href="#">Fade top / Fade bottom</a></li>
-
<li data-animation="12"><a href="#">Fade bottom / Fade top</a></li>
- </ul>
- </li>
- <li>
-
<a href="#">Different easing</a>
-
<ul class="dl-submenu">
-
<li data-animation="13"><a href="#">Different easing / from right</a></li>
-
<li data-animation="14"><a href="#">Different easing / from left</a></li>
-
<li data-animation="15"><a href="#">Different easing / from bottom</a></li>
-
<li data-animation="16"><a href="#">Different easing / from top</a></li>
- </ul>
- </li>
- <li>
-
<ul class="dl-submenu">
-
<li data-animation="17"><a href="#">Scale down / from right</a></li>
-
<li data-animation="18"><a href="#">Scale down / from left</a></li>
-
<li data-animation="19"><a href="#">Scale down / from bottom</a></li>
-
<li data-animation="20"><a href="#">Scale down / from top</a></li>
-
<li data-animation="21"><a href="#">Scale down / scale down</a></li>
-
<li data-animation="22"><a href="#">Scale up / scale up</a></li>
-
<li data-animation="23"><a href="#">Move to left / scale up</a></li>
-
<li data-animation="24"><a href="#">Move to right / scale up</a></li>
-
<li data-animation="25"><a href="#">Move to top / scale up</a></li>
-
<li data-animation="26"><a href="#">Move to bottom / scale up</a></li>
-
<li data-animation="27"><a href="#">Scale down / scale up</a></li>
- </ul>
- </li>
- <li>
-
<ul class="dl-submenu">
- <li>
-
<ul class="dl-submenu">
-
<li data-animation="28"><a href="#">Glue left / from right</a></li>
-
<li data-animation="29"><a href="#">Glue right / from left</a></li>
-
<li data-animation="30"><a href="#">Glue bottom / from top</a></li>
-
<li data-animation="31"><a href="#">Glue top / from bottom</a></li>
- </ul>
- </li>
- <li>
-
<ul class="dl-submenu">
-
<li data-animation="32"><a href="#">Flip right</a></li>
-
<li data-animation="33"><a href="#">Flip left</a></li>
-
<li data-animation="34"><a href="#">Flip top</a></li>
-
<li data-animation="35"><a href="#">Flip bottom</a></li>
- </ul>
- </li>
-
<li data-animation="36"><a href="#">Fall</a></li>
-
<li data-animation="37"><a href="#">Newspaper</a></li>
- <li>
-
<a href="#">Push / Pull</a>
-
<ul class="dl-submenu">
-
<li data-animation="38"><a href="#">Push left / from right</a></li>
-
<li data-animation="39"><a href="#">Push right / from left</a></li>
-
<li data-animation="40"><a href="#">Push top / from bottom</a></li>
-
<li data-animation="41"><a href="#">Push bottom / from top</a></li>
+ <div class="pt-triggers">
+ <button id="iterateEffects" class="pt-touch-button">Show next page transition</button>
+ <div id="dl-menu" class="dl-menuwrapper">
+ <button class="dl-trigger">Choose a transition</button>
+ <ul class="dl-menu">
+ <li>
+ <a href="#">Move</a>
+ <ul class="dl-submenu">
+ <li data-animation="1"><a href="#">Move to left/ from right</a></li>
+ <li data-animation="2"><a href="#">Move to right/ from left</a></li>
+ <li data-animation="3"><a href="#">Move to top/ from bottom</a></li>
+ <li data-animation="4"><a href="#">Move to bottom/ from top</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">Fade</a>
+ <ul class="dl-submenu">
+ <li data-animation="5"><a href="#">Fade / from right</a></li>
+ <li data-animation="6"><a href="#">Fade / from left</a></li>
+ <li data-animation="7"><a href="#">Fade / from bottom</a></li>
+ <li data-animation="8"><a href="#">Fade / from top</a></li>
+ <li data-animation="9"><a href="#">Fade left / Fade right</a></li>
+ <li data-animation="10"><a href="#">Fade right / Fade left</a></li>
+ <li data-animation="11"><a href="#">Fade top / Fade bottom</a></li>
+ <li data-animation="12"><a href="#">Fade bottom / Fade top</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">Different easing</a>
+ <ul class="dl-submenu">
+ <li data-animation="13"><a href="#">Different easing / from right</a></li>
+ <li data-animation="14"><a href="#">Different easing / from left</a></li>
+ <li data-animation="15"><a href="#">Different easing / from bottom</a></li>
+ <li data-animation="16"><a href="#">Different easing / from top</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">Scale</a>
+ <ul class="dl-submenu">
+ <li data-animation="17"><a href="#">Scale down / from right</a></li>
+ <li data-animation="18"><a href="#">Scale down / from left</a></li>
+ <li data-animation="19"><a href="#">Scale down / from bottom</a></li>
+ <li data-animation="20"><a href="#">Scale down / from top</a></li>
+ <li data-animation="21"><a href="#">Scale down / scale down</a></li>
+ <li data-animation="22"><a href="#">Scale up / scale up</a></li>
+ <li data-animation="23"><a href="#">Move to left / scale up</a></li>
+ <li data-animation="24"><a href="#">Move to right / scale up</a></li>
+ <li data-animation="25"><a href="#">Move to top / scale up</a></li>
+ <li data-animation="26"><a href="#">Move to bottom / scale up</a></li>
+ <li data-animation="27"><a href="#">Scale down / scale up</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">Rotate</a>
+ <ul class="dl-submenu">
+ <li>
+ <a href="#">Glue</a>
+ <ul class="dl-submenu">
+ <li data-animation="28"><a href="#">Glue left / from right</a></li>
+ <li data-animation="29"><a href="#">Glue right / from left</a></li>
+ <li data-animation="30"><a href="#">Glue bottom / from top</a></li>
+ <li data-animation="31"><a href="#">Glue top / from bottom</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">Flip</a>
+ <ul class="dl-submenu">
+ <li data-animation="32"><a href="#">Flip right</a></li>
+ <li data-animation="33"><a href="#">Flip left</a></li>
+ <li data-animation="34"><a href="#">Flip top</a></li>
+ <li data-animation="35"><a href="#">Flip bottom</a></li>
+ </ul>
+ </li>
+ <li data-animation="36"><a href="#">Fall</a></li>
+ <li data-animation="37"><a href="#">Newspaper</a></li>
+ <li>
+ <a href="#">Push / Pull</a>
+ <ul class="dl-submenu">
+ <li data-animation="38"><a href="#">Push left / from right</a></li>
+ <li data-animation="39"><a href="#">Push right / from left</a></li>
+ <li data-animation="40"><a href="#">Push top / from bottom</a></li>
+ <li data-animation="41"><a href="#">Push bottom / from top</a></li>
-
<li data-animation="42"><a href="#">Push left / pull right</a></li>
-
<li data-animation="43"><a href="#">Push right / pull left</a></li>
-
<li data-animation="44"><a href="#">Push top / pull bottom</a></li>
-
<li data-animation="45"><a href="#">Push bottom / pull top</a></li>
- </ul>
- </li>
- <li>
-
<a href="#">Fold / Unfold</a>
-
<ul class="dl-submenu">
-
<li data-animation="46"><a href="#">Fold left / from right</a></li>
-
<li data-animation="47"><a href="#">Fold right / from left</a></li>
-
<li data-animation="48"><a href="#">Fold top / from bottom</a></li>
-
<li data-animation="49"><a href="#">Fold bottom / from top</a></li>
-
<li data-animation="50"><a href="#">Move to right / unfold left</a></li>
-
<li data-animation="51"><a href="#">Move to left / unfold right</a></li>
-
<li data-animation="52"><a href="#">Move to bottom / unfold top</a></li>
-
<li data-animation="53"><a href="#">Move to top / unfold bottom</a></li>
- </ul>
- </li>
- <li>
-
<ul class="dl-submenu">
-
<li data-animation="54"><a href="#">Room to left</a></li>
-
<li data-animation="55"><a href="#">Room to right</a></li>
-
<li data-animation="56"><a href="#">Room to top</a></li>
-
<li data-animation="57"><a href="#">Room to bottom</a></li>
- </ul>
- </li>
- <li>
-
<ul class="dl-submenu">
-
<li data-animation="58"><a href="#">Cube to left</a></li>
-
<li data-animation="59"><a href="#">Cube to right</a></li>
-
<li data-animation="60"><a href="#">Cube to top</a></li>
-
<li data-animation="61"><a href="#">Cube to bottom</a></li>
- </ul>
- </li>
- <li>
-
<a href="#">Carousel</a>
-
<ul class="dl-submenu">
-
<li data-animation="62"><a href="#">Carousel to left</a></li>
-
<li data-animation="63"><a href="#">Carousel to right</a></li>
-
<li data-animation="64"><a href="#">Carousel to top</a></li>
-
<li data-animation="65"><a href="#">Carousel to bottom</a></li>
- </ul>
- </li>
-
<li data-animation="66"><a href="#">Sides</a></li>
- </ul>
- </li>
-
<li data-animation="67"><a href="#">Slide</a></li>
- </ul>
- </div><!-- /dl-menu-wrapper-->
- </div><!-- /triggers -->
+ <li data-animation="42"><a href="#">Push left / pull right</a></li>
+ <li data-animation="43"><a href="#">Push right / pull left</a></li>
+ <li data-animation="44"><a href="#">Push top / pull bottom</a></li>
+ <li data-animation="45"><a href="#">Push bottom / pull top</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">Fold / Unfold</a>
+ <ul class="dl-submenu">
+ <li data-animation="46"><a href="#">Fold left / from right</a></li>
+ <li data-animation="47"><a href="#">Fold right / from left</a></li>
+ <li data-animation="48"><a href="#">Fold top / from bottom</a></li>
+ <li data-animation="49"><a href="#">Fold bottom / from top</a></li>
+ <li data-animation="50"><a href="#">Move to right / unfold left</a></li>
+ <li data-animation="51"><a href="#">Move to left / unfold right</a></li>
+ <li data-animation="52"><a href="#">Move to bottom / unfold top</a></li>
+ <li data-animation="53"><a href="#">Move to top / unfold bottom</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">Room</a>
+ <ul class="dl-submenu">
+ <li data-animation="54"><a href="#">Room to left</a></li>
+ <li data-animation="55"><a href="#">Room to right</a></li>
+ <li data-animation="56"><a href="#">Room to top</a></li>
+ <li data-animation="57"><a href="#">Room to bottom</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">Cube</a>
+ <ul class="dl-submenu">
+ <li data-animation="58"><a href="#">Cube to left</a></li>
+ <li data-animation="59"><a href="#">Cube to right</a></li>
+ <li data-animation="60"><a href="#">Cube to top</a></li>
+ <li data-animation="61"><a href="#">Cube to bottom</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">Carousel</a>
+ <ul class="dl-submenu">
+ <li data-animation="62"><a href="#">Carousel to left</a></li>
+ <li data-animation="63"><a href="#">Carousel to right</a></li>
+ <li data-animation="64"><a href="#">Carousel to top</a></li>
+ <li data-animation="65"><a href="#">Carousel to bottom</a></li>
+ </ul>
+ </li>
+ <li data-animation="66"><a href="#">Sides</a></li>
+ </ul>
+ </li>
+ <li data-animation="67"><a href="#">Slide</a></li>
+ </ul>
+ </div><!-- /dl-menu-wrapper-->
+ </div><!-- /triggers -->
-
<div id="pt-main" class="pt-perspective">
-
<div class="pt-page pt-page-1"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
-
<div class="pt-page pt-page-2"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
-
<div class="pt-page pt-page-3"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
-
<div class="pt-page pt-page-4"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
-
<div class="pt-page pt-page-5"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
-
<div class="pt-page pt-page-6"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
- </div>
+ <div id="pt-main" class="pt-perspective">
+ <div class="pt-page pt-page-1"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
+ <div class="pt-page pt-page-2"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
+ <div class="pt-page pt-page-3"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
+ <div class="pt-page pt-page-4"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
+ <div class="pt-page pt-page-5"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
+ <div class="pt-page pt-page-6"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
+ </div>
-
<div class="pt-message">
-
<p>Your browser does not support CSS animations.</p>
- </div>
+ <div class="pt-message">
+ <p>Your browser does not support CSS animations.</p>
+ </div>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
- <script src="js/jquery.dlmenu.js"></script>
- <script src="js/pagetransitions.js"></script>
- </body>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+ <script src="js/jquery.dlmenu.js"></script>
+ <script src="js/pagetransitions.js"></script>
+ </body>
</html>
<!DOCTYPE html>
<html lang="en" class="no-js">
- <head>
- <meta charset="UTF-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>A Collection of Page Transitions</title>
- <meta name="description" content="A Collection of Page Transitions with CSS Animations" />
- <meta name="keywords" content="page transition, css animation, website, effect, css3, jquery" />
- <meta name="author" content="Codrops" />
- <link rel="shortcut icon" href="../favicon.ico">
- <link rel="stylesheet" type="text/css" href="css/default.css" />
- <link rel="stylesheet" type="text/css" href="css/multilevelmenu.css" />
- <link rel="stylesheet" type="text/css" href="css/component.css" />
- <link rel="stylesheet" type="text/css" href="css/animations.css" />
- <script src="js/modernizr.custom.js"></script>
- </head>
- <body>
-
<div class="codrops-top clearfix">
-
<a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Tutorials/AutomaticFigureNumbering/"><span>Previous Demo</span></a>
-
<span class="right"><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=15001"><span>Back to the Codrops Article</span></a></span>
- </div>
+ <head>
+ <meta charset="UTF-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>A Collection of Page Transitions</title>
+ <meta name="description" content="A Collection of Page Transitions with CSS Animations" />
+ <meta name="keywords" content="page transition, css animation, website, effect, css3, jquery" />
+ <meta name="author" content="Codrops" />
+ <link rel="shortcut icon" href="../favicon.ico">
+ <link rel="stylesheet" type="text/css" href="css/default.css" />
+ <link rel="stylesheet" type="text/css" href="css/multilevelmenu.css" />
+ <link rel="stylesheet" type="text/css" href="css/component.css" />
+ <link rel="stylesheet" type="text/css" href="css/animations.css" />
+ <script src="js/modernizr.custom.js"></script>
+ </head>
+ <body>
+ <div class="codrops-top clearfix">
+ <a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Tutorials/AutomaticFigureNumbering/"><span>Previous Demo</span></a>
+ <span class="right"><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=15001"><span>Back to the Codrops Article</span></a></span>
+ </div>
-
<div class="pt-triggers">
- <button id="iterateEffects" class="pt-touch-button">Show next page transition</button>
-
<div id="dl-menu" class="dl-menuwrapper">
- <button class="dl-trigger">Choose a transition</button>
- <li>
-
<ul class="dl-submenu">
-
<li data-animation="1"><a href="#">Move to left/ from right</a></li>
-
<li data-animation="2"><a href="#">Move to right/ from left</a></li>
-
<li data-animation="3"><a href="#">Move to top/ from bottom</a></li>
-
<li data-animation="4"><a href="#">Move to bottom/ from top</a></li>
- </ul>
- </li>
- <li>
-
<ul class="dl-submenu">
-
<li data-animation="5"><a href="#">Fade / from right</a></li>
-
<li data-animation="6"><a href="#">Fade / from left</a></li>
-
<li data-animation="7"><a href="#">Fade / from bottom</a></li>
-
<li data-animation="8"><a href="#">Fade / from top</a></li>
-
<li data-animation="9"><a href="#">Fade left / Fade right</a></li>
-
<li data-animation="10"><a href="#">Fade right / Fade left</a></li>
-
<li data-animation="11"><a href="#">Fade top / Fade bottom</a></li>
-
<li data-animation="12"><a href="#">Fade bottom / Fade top</a></li>
- </ul>
- </li>
- <li>
-
<a href="#">Different easing</a>
-
<ul class="dl-submenu">
-
<li data-animation="13"><a href="#">Different easing / from right</a></li>
-
<li data-animation="14"><a href="#">Different easing / from left</a></li>
-
<li data-animation="15"><a href="#">Different easing / from bottom</a></li>
-
<li data-animation="16"><a href="#">Different easing / from top</a></li>
- </ul>
- </li>
- <li>
-
<ul class="dl-submenu">
-
<li data-animation="17"><a href="#">Scale down / from right</a></li>
-
<li data-animation="18"><a href="#">Scale down / from left</a></li>
-
<li data-animation="19"><a href="#">Scale down / from bottom</a></li>
-
<li data-animation="20"><a href="#">Scale down / from top</a></li>
-
<li data-animation="21"><a href="#">Scale down / scale down</a></li>
-
<li data-animation="22"><a href="#">Scale up / scale up</a></li>
-
<li data-animation="23"><a href="#">Move to left / scale up</a></li>
-
<li data-animation="24"><a href="#">Move to right / scale up</a></li>
-
<li data-animation="25"><a href="#">Move to top / scale up</a></li>
-
<li data-animation="26"><a href="#">Move to bottom / scale up</a></li>
-
<li data-animation="27"><a href="#">Scale down / scale up</a></li>
- </ul>
- </li>
- <li>
-
<ul class="dl-submenu">
- <li>
-
<ul class="dl-submenu">
-
<li data-animation="28"><a href="#">Glue left / from right</a></li>
-
<li data-animation="29"><a href="#">Glue right / from left</a></li>
-
<li data-animation="30"><a href="#">Glue bottom / from top</a></li>
-
<li data-animation="31"><a href="#">Glue top / from bottom</a></li>
- </ul>
- </li>
- <li>
-
<ul class="dl-submenu">
-
<li data-animation="32"><a href="#">Flip right</a></li>
-
<li data-animation="33"><a href="#">Flip left</a></li>
-
<li data-animation="34"><a href="#">Flip top</a></li>
-
<li data-animation="35"><a href="#">Flip bottom</a></li>
- </ul>
- </li>
-
<li data-animation="36"><a href="#">Fall</a></li>
-
<li data-animation="37"><a href="#">Newspaper</a></li>
- <li>
-
<a href="#">Push / Pull</a>
-
<ul class="dl-submenu">
-
<li data-animation="38"><a href="#">Push left / from right</a></li>
-
<li data-animation="39"><a href="#">Push right / from left</a></li>
-
<li data-animation="40"><a href="#">Push top / from bottom</a></li>
-
<li data-animation="41"><a href="#">Push bottom / from top</a></li>
+ <div class="pt-triggers">
+ <button id="iterateEffects" class="pt-touch-button">Show next page transition</button>
+ <div id="dl-menu" class="dl-menuwrapper">
+ <button class="dl-trigger">Choose a transition</button>
+ <ul class="dl-menu">
+ <li>
+ <a href="#">Move</a>
+ <ul class="dl-submenu">
+ <li data-animation="1"><a href="#">Move to left/ from right</a></li>
+ <li data-animation="2"><a href="#">Move to right/ from left</a></li>
+ <li data-animation="3"><a href="#">Move to top/ from bottom</a></li>
+ <li data-animation="4"><a href="#">Move to bottom/ from top</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">Fade</a>
+ <ul class="dl-submenu">
+ <li data-animation="5"><a href="#">Fade / from right</a></li>
+ <li data-animation="6"><a href="#">Fade / from left</a></li>
+ <li data-animation="7"><a href="#">Fade / from bottom</a></li>
+ <li data-animation="8"><a href="#">Fade / from top</a></li>
+ <li data-animation="9"><a href="#">Fade left / Fade right</a></li>
+ <li data-animation="10"><a href="#">Fade right / Fade left</a></li>
+ <li data-animation="11"><a href="#">Fade top / Fade bottom</a></li>
+ <li data-animation="12"><a href="#">Fade bottom / Fade top</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">Different easing</a>
+ <ul class="dl-submenu">
+ <li data-animation="13"><a href="#">Different easing / from right</a></li>
+ <li data-animation="14"><a href="#">Different easing / from left</a></li>
+ <li data-animation="15"><a href="#">Different easing / from bottom</a></li>
+ <li data-animation="16"><a href="#">Different easing / from top</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">Scale</a>
+ <ul class="dl-submenu">
+ <li data-animation="17"><a href="#">Scale down / from right</a></li>
+ <li data-animation="18"><a href="#">Scale down / from left</a></li>
+ <li data-animation="19"><a href="#">Scale down / from bottom</a></li>
+ <li data-animation="20"><a href="#">Scale down / from top</a></li>
+ <li data-animation="21"><a href="#">Scale down / scale down</a></li>
+ <li data-animation="22"><a href="#">Scale up / scale up</a></li>
+ <li data-animation="23"><a href="#">Move to left / scale up</a></li>
+ <li data-animation="24"><a href="#">Move to right / scale up</a></li>
+ <li data-animation="25"><a href="#">Move to top / scale up</a></li>
+ <li data-animation="26"><a href="#">Move to bottom / scale up</a></li>
+ <li data-animation="27"><a href="#">Scale down / scale up</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">Rotate</a>
+ <ul class="dl-submenu">
+ <li>
+ <a href="#">Glue</a>
+ <ul class="dl-submenu">
+ <li data-animation="28"><a href="#">Glue left / from right</a></li>
+ <li data-animation="29"><a href="#">Glue right / from left</a></li>
+ <li data-animation="30"><a href="#">Glue bottom / from top</a></li>
+ <li data-animation="31"><a href="#">Glue top / from bottom</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">Flip</a>
+ <ul class="dl-submenu">
+ <li data-animation="32"><a href="#">Flip right</a></li>
+ <li data-animation="33"><a href="#">Flip left</a></li>
+ <li data-animation="34"><a href="#">Flip top</a></li>
+ <li data-animation="35"><a href="#">Flip bottom</a></li>
+ </ul>
+ </li>
+ <li data-animation="36"><a href="#">Fall</a></li>
+ <li data-animation="37"><a href="#">Newspaper</a></li>
+ <li>
+ <a href="#">Push / Pull</a>
+ <ul class="dl-submenu">
+ <li data-animation="38"><a href="#">Push left / from right</a></li>
+ <li data-animation="39"><a href="#">Push right / from left</a></li>
+ <li data-animation="40"><a href="#">Push top / from bottom</a></li>
+ <li data-animation="41"><a href="#">Push bottom / from top</a></li>
-
<li data-animation="42"><a href="#">Push left / pull right</a></li>
-
<li data-animation="43"><a href="#">Push right / pull left</a></li>
-
<li data-animation="44"><a href="#">Push top / pull bottom</a></li>
-
<li data-animation="45"><a href="#">Push bottom / pull top</a></li>
- </ul>
- </li>
- <li>
-
<a href="#">Fold / Unfold</a>
-
<ul class="dl-submenu">
-
<li data-animation="46"><a href="#">Fold left / from right</a></li>
-
<li data-animation="47"><a href="#">Fold right / from left</a></li>
-
<li data-animation="48"><a href="#">Fold top / from bottom</a></li>
-
<li data-animation="49"><a href="#">Fold bottom / from top</a></li>
-
<li data-animation="50"><a href="#">Move to right / unfold left</a></li>
-
<li data-animation="51"><a href="#">Move to left / unfold right</a></li>
-
<li data-animation="52"><a href="#">Move to bottom / unfold top</a></li>
-
<li data-animation="53"><a href="#">Move to top / unfold bottom</a></li>
- </ul>
- </li>
- <li>
-
<ul class="dl-submenu">
-
<li data-animation="54"><a href="#">Room to left</a></li>
-
<li data-animation="55"><a href="#">Room to right</a></li>
-
<li data-animation="56"><a href="#">Room to top</a></li>
-
<li data-animation="57"><a href="#">Room to bottom</a></li>
- </ul>
- </li>
- <li>
-
<ul class="dl-submenu">
-
<li data-animation="58"><a href="#">Cube to left</a></li>
-
<li data-animation="59"><a href="#">Cube to right</a></li>
-
<li data-animation="60"><a href="#">Cube to top</a></li>
-
<li data-animation="61"><a href="#">Cube to bottom</a></li>
- </ul>
- </li>
- <li>
-
<a href="#">Carousel</a>
-
<ul class="dl-submenu">
-
<li data-animation="62"><a href="#">Carousel to left</a></li>
-
<li data-animation="63"><a href="#">Carousel to right</a></li>
-
<li data-animation="64"><a href="#">Carousel to top</a></li>
-
<li data-animation="65"><a href="#">Carousel to bottom</a></li>
- </ul>
- </li>
-
<li data-animation="66"><a href="#">Sides</a></li>
- </ul>
- </li>
-
<li data-animation="67"><a href="#">Slide</a></li>
- </ul>
- </div><!-- /dl-menu-wrapper-->
- </div><!-- /triggers -->
+ <li data-animation="42"><a href="#">Push left / pull right</a></li>
+ <li data-animation="43"><a href="#">Push right / pull left</a></li>
+ <li data-animation="44"><a href="#">Push top / pull bottom</a></li>
+ <li data-animation="45"><a href="#">Push bottom / pull top</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">Fold / Unfold</a>
+ <ul class="dl-submenu">
+ <li data-animation="46"><a href="#">Fold left / from right</a></li>
+ <li data-animation="47"><a href="#">Fold right / from left</a></li>
+ <li data-animation="48"><a href="#">Fold top / from bottom</a></li>
+ <li data-animation="49"><a href="#">Fold bottom / from top</a></li>
+ <li data-animation="50"><a href="#">Move to right / unfold left</a></li>
+ <li data-animation="51"><a href="#">Move to left / unfold right</a></li>
+ <li data-animation="52"><a href="#">Move to bottom / unfold top</a></li>
+ <li data-animation="53"><a href="#">Move to top / unfold bottom</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">Room</a>
+ <ul class="dl-submenu">
+ <li data-animation="54"><a href="#">Room to left</a></li>
+ <li data-animation="55"><a href="#">Room to right</a></li>
+ <li data-animation="56"><a href="#">Room to top</a></li>
+ <li data-animation="57"><a href="#">Room to bottom</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">Cube</a>
+ <ul class="dl-submenu">
+ <li data-animation="58"><a href="#">Cube to left</a></li>
+ <li data-animation="59"><a href="#">Cube to right</a></li>
+ <li data-animation="60"><a href="#">Cube to top</a></li>
+ <li data-animation="61"><a href="#">Cube to bottom</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">Carousel</a>
+ <ul class="dl-submenu">
+ <li data-animation="62"><a href="#">Carousel to left</a></li>
+ <li data-animation="63"><a href="#">Carousel to right</a></li>
+ <li data-animation="64"><a href="#">Carousel to top</a></li>
+ <li data-animation="65"><a href="#">Carousel to bottom</a></li>
+ </ul>
+ </li>
+ <li data-animation="66"><a href="#">Sides</a></li>
+ </ul>
+ </li>
+ <li data-animation="67"><a href="#">Slide</a></li>
+ </ul>
+ </div><!-- /dl-menu-wrapper-->
+ </div><!-- /triggers -->
-
<div id="pt-main" class="pt-perspective">
-
<div class="pt-page pt-page-1"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
-
<div class="pt-page pt-page-2"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
-
<div class="pt-page pt-page-3"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
-
<div class="pt-page pt-page-4"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
-
<div class="pt-page pt-page-5"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
-
<div class="pt-page pt-page-6"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
- </div>
+ <div id="pt-main" class="pt-perspective">
+ <div class="pt-page pt-page-1"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
+ <div class="pt-page pt-page-2"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
+ <div class="pt-page pt-page-3"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
+ <div class="pt-page pt-page-4"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
+ <div class="pt-page pt-page-5"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
+ <div class="pt-page pt-page-6"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
+ </div>
-
<div class="pt-message">
-
<p>Your browser does not support CSS animations.</p>
- </div>
+ <div class="pt-message">
+ <p>Your browser does not support CSS animations.</p>
+ </div>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
- <script src="js/jquery.dlmenu.js"></script>
- <script src="js/pagetransitions.js"></script>
- </body>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+ <script src="js/jquery.dlmenu.js"></script>
+ <script src="js/pagetransitions.js"></script>
+ </body>
</html>
<!DOCTYPE HTML>
<html lang="fr" class="no-js">
- <head>
- <title>Live Web Tv</title>
- <meta charset="UTF-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <meta name="description" content="Solution Web TV 100% Mobile & Portable" />
- <meta name="keywords" content="" />
-
- <link rel="icon" type="image/png" href="img/favicon.png">
- <link rel="shortcut icon" href="img/favicon.ico">
-
- <script src="js/modernizr-2.5.3.min.js"></script>
- <!--[if lte IE 8]><script src="js/html5shiv.js"></script><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
- <script src="js/jquery.min.js"></script>
- <script src="js/jquery.dropotron.js"></script>
- <script src="js/config.js"></script>
- <script src="js/skel.min.js"></script>
- <script src="js/skel-panels.min.js"></script>
-
+ <head>
+ <title>Live Web Tv</title>
+ <meta charset="UTF-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta name="description" content="Solution Web TV 100% Mobile & Portable" />
+ <meta name="keywords" content="" />
+
+ <link rel="icon" type="image/png" href="img/favicon.png">
+ <link rel="shortcut icon" href="img/favicon.ico">
+
+ <script src="js/modernizr-2.5.3.min.js"></script>
+ <!--[if lte IE 8]><script src="js/html5shiv.js"></script><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
+ <script src="js/jquery.min.js"></script>
+ <script src="js/jquery.dropotron.js"></script>
+ <script src="js/config.js"></script>
+ <script src="js/skel.min.js"></script>
+ <script src="js/skel-panels.min.js"></script>
+
- <noscript>
- <link rel="stylesheet" href="css/style.css" />
- <link rel="stylesheet" href="css/skel-noscript.css" />
- <link rel="stylesheet" href="css/style-desktop.css" />
- </noscript>
- </head>
-
- <body class="right-sidebar">
+ <noscript>
+ <link rel="stylesheet" href="css/style.css" />
+ <link rel="stylesheet" href="css/skel-noscript.css" />
+ <link rel="stylesheet" href="css/style-desktop.css" />
+ </noscript>
+ </head>
+
+ <body class="right-sidebar">
- <!-- Header Wrapper -->
-
<div class="color01" id="header-wrapper">
-
<div class="container">
- <!-- nav back-->
-
<div id="nav-back" class="skel-panels-fixed color09">
- <!-- Logo -->
-
<a href="index.html#" ><img src="img/logo-telecasting-site.svg" alt="telecasting live web tv" /></a>
- </div>
- <!-- /Logo -->
- <!-- Nav -->
- <nav id="nav" class="skel-panels-fixed">
- <!-- usage & workflow -->
-
<li class="current_page_item"><a href="index.html#h-workflow">usage & workflow</a></li>
- <li>
-
<span ><img src="img/bouton-menu.svg" alt="telecasting live web tv" /></span>
-
<li><a href="live-web-tv.html">mobile web tv</a></li>
-
<li><a href="e-lmearning.html">e-learning</a></li>
-
<li><a href="e-conferencing.html">e-conference</a></li>
-
<li><a href="e-concert.html">e-concert</a></li>
- </ul>
- </li>
- <!-- /usage & workflow -->
-
- <!-- logiciels -->
- <li class="current_page_item"><a href="index.html#h-logiciels">logiciels</a></li>
- <li>
-
<span ><img src="img/bouton-menu.svg" alt="telecasting live web tv" /></span>
-
<li><a href="telecasting.html">telecasting</a></li>
-
<li><a href="#">open source</a></li>
- <li><a href="#">partenariat</a></li>
- </ul>
- </li>
- <!-- /logiciels -->
-
- <!-- solutions -->
-
<li class="current_page_item"><a href="index.html#h-solutions">solutions</a></li>
- <li>
-
<span ><img src="img/bouton-menu.svg" alt="telecasting live web tv" /></span>
-
<li><a href="tc-case.html">TC case</a></li>
-
<li><a href="tc-box.html">TC box</a></li>
- <li><a href="tc-mini.html">TC mini</a></li>
-
<li><a href="tc-lame.html">TC lame</a></li>
-
<li><a href="specs.html">spécifications</a></li>
- </ul>
- </li>
- <!-- /solutions -->
-
- <!-- prestations -->
-
<li class="current_page_item"><a href="index.html#h-prestations">prestations</a></li>
- <li>
-
<span ><img src="img/bouton-menu.svg" alt="telecasting live web tv" /></span>
-
<li><a href="#">Location</a></li>
-
<li><a href="#">Equipe dédiée</a></li>
- <li><a href="#">Maintenance</a></li>
-
<li><a href="#">Formation</a></li>
-
<li><a href="#">Personnalisation</a></li>
-
<li><a href="#">Tarifs</a></li>
- </ul>
- </li>
- <!-- /prestations -->
-
- <!-- references -->
-
<li class="current_page_item"><a href="index.html#h-references">references</a></li>
- <li>
-
<span ><img src="img/bouton-menu.svg" alt="telecasting live web tv" /></span>
-
<li><a href="#">Etude de cas</a></li>
-
<li><a href="#">références</a></li>
- </ul>
- </li>
- <!-- /references -->
-
- <!-- contacts -->
-
<li class="current_page_item"><a href="index.html#h-contacts">contacts</a></li>
- <li>
-
<span ><img src="img/bouton-menu.svg" alt="telecasting live web tv" /></span>
-
<li><a href="#">la société</a></li>
-
<li><a href="#">mentions légales</a></li>
- </ul>
- </li>
- </ul>
- <!-- /contacts -->
-
- </nav>
- <!-- /Nav -->
- </div>
- <!-- /nav back-->
- <!-- Header -->
-
<div id="header" class="wrapper-video">
- <iframe src="ifr-home.html" ></iframe>
- </div>
- </div>
- <!-- /Header -->
- </div>
- </div>
- </div>
+ <!-- Header Wrapper -->
+ <div class="color01" id="header-wrapper">
+ <div class="container">
+ <div class="row">
+ <div class="12u">
+ <!-- nav back-->
+ <div id="nav-back" class="skel-panels-fixed color09">
+ <!-- Logo -->
+ <div id="logo" >
+ <a href="index.html#" ><img src="img/logo-telecasting-site.svg" alt="telecasting live web tv" /></a>
+ </div>
+ <!-- /Logo -->
+ <!-- Nav -->
+ <nav id="nav" class="skel-panels-fixed">
+ <ul>
+ <!-- usage & workflow -->
+ <li class="current_page_item"><a href="index.html#h-workflow">usage & workflow</a></li>
+ <li>
+ <span ><img src="img/bouton-menu.svg" alt="telecasting live web tv" /></span>
+ <ul>
+ <li><a href="live-web-tv.html">mobile web tv</a></li>
+ <li><a href="e-lmearning.html">e-learning</a></li>
+ <li><a href="e-conferencing.html">e-conference</a></li>
+ <li><a href="e-concert.html">e-concert</a></li>
+ </ul>
+ </li>
+ <!-- /usage & workflow -->
+
+ <!-- logiciels -->
+ <li class="current_page_item"><a href="index.html#h-logiciels">logiciels</a></li>
+ <li>
+ <span ><img src="img/bouton-menu.svg" alt="telecasting live web tv" /></span>
+ <ul>
+ <li><a href="telecasting.html">telecasting</a></li>
+ <li><a href="#">open source</a></li>
+ <li><a href="#">partenariat</a></li>
+ </ul>
+ </li>
+ <!-- /logiciels -->
+
+ <!-- solutions -->
+ <li class="current_page_item"><a href="index.html#h-solutions">solutions</a></li>
+ <li>
+ <span ><img src="img/bouton-menu.svg" alt="telecasting live web tv" /></span>
+ <ul>
+ <li><a href="tc-case.html">TC case</a></li>
+ <li><a href="tc-box.html">TC box</a></li>
+ <li><a href="tc-mini.html">TC mini</a></li>
+ <li><a href="tc-lame.html">TC lame</a></li>
+ <li><a href="specs.html">spécifications</a></li>
+ </ul>
+ </li>
+ <!-- /solutions -->
+
+ <!-- prestations -->
+ <li class="current_page_item"><a href="index.html#h-prestations">prestations</a></li>
+ <li>
+ <span ><img src="img/bouton-menu.svg" alt="telecasting live web tv" /></span>
+ <ul>
+ <li><a href="#">Location</a></li>
+ <li><a href="#">Equipe dédiée</a></li>
+ <li><a href="#">Maintenance</a></li>
+ <li><a href="#">Formation</a></li>
+ <li><a href="#">Personnalisation</a></li>
+ <li><a href="#">Tarifs</a></li>
+ </ul>
+ </li>
+ <!-- /prestations -->
+
+ <!-- references -->
+ <li class="current_page_item"><a href="index.html#h-references">references</a></li>
+ <li>
+ <span ><img src="img/bouton-menu.svg" alt="telecasting live web tv" /></span>
+ <ul>
+ <li><a href="#">Etude de cas</a></li>
+ <li><a href="#">références</a></li>
+ </ul>
+ </li>
+ <!-- /references -->
+
+ <!-- contacts -->
+ <li class="current_page_item"><a href="index.html#h-contacts">contacts</a></li>
+ <li>
+ <span ><img src="img/bouton-menu.svg" alt="telecasting live web tv" /></span>
+ <ul>
+ <li><a href="#">la société</a></li>
+ <li><a href="#">mentions légales</a></li>
+ </ul>
+ </li>
+ </ul>
+ <!-- /contacts -->
+
+ </nav>
+ <!-- /Nav -->
+ </div>
+ <!-- /nav back-->
+ <!-- Header -->
+ <div id="header" class="wrapper-video">
+ <div id="video-home">
+ <iframe src="ifr-home.html" ></iframe>
+ </div>
+ </div>
+ <!-- /Header -->
+ </div>
+ </div>
+ </div>
</div>
<!-- /Header Wrapper -->
-
+
<!-- Main Wrapper -->
<div class="wrapper wrapper-style2 color10">
-
<div class="title color10 Tcolor01 Bcolor01">mobile web tv</div>
-
<div class="container">
- <div class="12u">
- <!-- Main -->
-
<div class="8u skel-cell-mainContent Tcolor01">
-
- <!-- Content -->
-
<article class="is is-post">
- <header class="style1">
- <h2>Lorem ipsum dolor sit amet magna egestas morbi bibendum sed malesuada</h2>
- <span class="byline">Tempus feugiat veroeros sed nullam dolore</span>
- </header>
-
<a href="http://fav.me/d5pjw3g" class="image image-featured">
-
<img src="img/pic01.jpg" alt="" />
- </a>
-
<p>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget.
- odio eleifend. Duis commodo fringilla commodo. Aliquam erat volutpat. Vestibulum
- facilisis leo magna. Cras sit amet urna eros, id egestas urna. Quisque aliquam
- tempus euismod. Vestibulum ante ipsum primis in faucibus.</p>
-
<p>Phasellus nisl nisl, varius id porttitor sed, pellentesque ac orci. Pellentesque
- habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi
- bibendum justo sed mauris vehicula malesuada aliquam elit imperdiet. Aliquam eu nibh
- lorem, eget gravida mi. Duis odio diam, luctus et vulputate vitae, vehicula ac dolor.
- Pellentesque at urna eget tellus lobortis ultrices sed non erat. Donec eget erat non
- magna volutpat malesuada quis eget eros. Nullam sodales cursus sapien, id consequat
- leo suscipit ut. Praesent id turpis vitae turpis pretium ultricies. Vestibulum sit
- amet risus elit.</p>
-
<p>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra
- ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel. Praesent nec orci
- eget quam rutrum bibendum. Proin pellentesque diam non ligula commodo tempor. Vivamus
- eget urna nibh. Curabitur non fringilla nisl. Donec accumsan interdum nisi, quis
- tincidunt felis sagittis eget. Donec elementum ligula dignissim sem pulvinar non semper
- odio eleifend. Duis commodo fringilla commodo. Aliquam erat volutpat. Vestibulum
- facilisis leo magna. Cras sit amet urna eros, id egestas urna. Quisque aliquam
- tempus euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
- posuere cubilia.</p>
-
<p>Phasellus nisl nisl, varius id porttitor sed, pellentesque ac orci. Pellentesque
- habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi
- bibendum justo sed mauris vehicula malesuada aliquam elit imperdiet. Aliquam eu nibh
- lorem, eget gravida mi. Duis odio diam, luctus et vulputate vitae, vehicula ac dolor.
- Pellentesque at urna eget tellus lobortis ultrices sed non erat. Donec eget erat non
- magna volutpat malesuada quis eget eros. Nullam sodales cursus sapien, id consequat
- leo suscipit ut. Praesent id turpis vitae turpis pretium ultricies. Vestibulum sit
- amet risus elit.</p>
- </article>
- <section class="is is-pair-one">
- <header>
- <h2>Magna pulvinar tempus</h2>
- </header>
-
<a href="http://fav.me/d5uvswq" class="image image-full"><img src="img/Gpic02.jpg" alt="" /></a>
-
<p>Rutrum bibendum. Proin pellentesque diam non ligula commodo tempor. Vivamus
- eget urna nibh. Curabitur non fringilla nisl. Donec accumsan interdum nisi, quis
- tempus.</p>
-
<a href="#" class="button button-style1">More</a>
- </section>
- </div>
- <section class="is is-pair-two">
- <header>
- <h2>Magna pulvinar tempus</h2>
- </header>
-
<a href="http://fav.me/d5qdf2o" class="image image-full"><img src="img/Gpic03.jpg" alt="" /></a>
-
<p>Rutrum bibendum. Proin pellentesque diam non ligula commodo tempor. Vivamus
- eget urna nibh. Curabitur non fringilla nisl. Donec accumsan interdum nisi, quis
- tempus.</p>
- </section>
- </div>
- </div>
- </div>
- </div>
- <!-- /Content -->
- </div>
-
- <!-- Sidebar -->
+ <div class="title color10 Tcolor01 Bcolor01">mobile web tv</div>
+ <div class="container">
+ <div class="row">
+ <div class="12u">
+ <!-- Main -->
+ <div id="main">
+ <div>
+ <div class="row">
+ <div class="8u skel-cell-mainContent Tcolor01">
+
+ <!-- Content -->
+ <div id="content">
+ <article class="is is-post">
+ <header class="style1">
+ <h2>Lorem ipsum dolor sit amet magna egestas morbi bibendum sed malesuada</h2>
+ <span class="byline">Tempus feugiat veroeros sed nullam dolore</span>
+ </header>
+ <a href="http://fav.me/d5pjw3g" class="image image-featured">
+ <img src="img/pic01.jpg" alt="" />
+ </a>
+ <p>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget.
+ odio eleifend. Duis commodo fringilla commodo. Aliquam erat volutpat. Vestibulum
+ facilisis leo magna. Cras sit amet urna eros, id egestas urna. Quisque aliquam
+ tempus euismod. Vestibulum ante ipsum primis in faucibus.</p>
+ <p>Phasellus nisl nisl, varius id porttitor sed, pellentesque ac orci. Pellentesque
+ habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi
+ bibendum justo sed mauris vehicula malesuada aliquam elit imperdiet. Aliquam eu nibh
+ lorem, eget gravida mi. Duis odio diam, luctus et vulputate vitae, vehicula ac dolor.
+ Pellentesque at urna eget tellus lobortis ultrices sed non erat. Donec eget erat non
+ magna volutpat malesuada quis eget eros. Nullam sodales cursus sapien, id consequat
+ leo suscipit ut. Praesent id turpis vitae turpis pretium ultricies. Vestibulum sit
+ amet risus elit.</p>
+ <p>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra
+ ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel. Praesent nec orci
+ eget quam rutrum bibendum. Proin pellentesque diam non ligula commodo tempor. Vivamus
+ eget urna nibh. Curabitur non fringilla nisl. Donec accumsan interdum nisi, quis
+ tincidunt felis sagittis eget. Donec elementum ligula dignissim sem pulvinar non semper
+ odio eleifend. Duis commodo fringilla commodo. Aliquam erat volutpat. Vestibulum
+ facilisis leo magna. Cras sit amet urna eros, id egestas urna. Quisque aliquam
+ tempus euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+ posuere cubilia.</p>
+ <p>Phasellus nisl nisl, varius id porttitor sed, pellentesque ac orci. Pellentesque
+ habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi
+ bibendum justo sed mauris vehicula malesuada aliquam elit imperdiet. Aliquam eu nibh
+ lorem, eget gravida mi. Duis odio diam, luctus et vulputate vitae, vehicula ac dolor.
+ Pellentesque at urna eget tellus lobortis ultrices sed non erat. Donec eget erat non
+ magna volutpat malesuada quis eget eros. Nullam sodales cursus sapien, id consequat
+ leo suscipit ut. Praesent id turpis vitae turpis pretium ultricies. Vestibulum sit
+ amet risus elit.</p>
+ </article>
+ <div>
+ <div class="row">
+ <div class="6u">
+ <section class="is is-pair-one">
+ <header>
+ <h2>Magna pulvinar tempus</h2>
+ </header>
+ <a href="http://fav.me/d5uvswq" class="image image-full"><img src="img/Gpic02.jpg" alt="" /></a>
+ <p>Rutrum bibendum. Proin pellentesque diam non ligula commodo tempor. Vivamus
+ eget urna nibh. Curabitur non fringilla nisl. Donec accumsan interdum nisi, quis
+ tempus.</p>
+ <a href="#" class="button button-style1">More</a>
+ </section>
+ </div>
+ <div class="6u">
+ <section class="is is-pair-two">
+ <header>
+ <h2>Magna pulvinar tempus</h2>
+ </header>
+ <a href="http://fav.me/d5qdf2o" class="image image-full"><img src="img/Gpic03.jpg" alt="" /></a>
+ <p>Rutrum bibendum. Proin pellentesque diam non ligula commodo tempor. Vivamus
+ eget urna nibh. Curabitur non fringilla nisl. Donec accumsan interdum nisi, quis
+ tempus.</p>
+ </section>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- /Content -->
+ </div>
+ <div class="4u">
+
+ <!-- Sidebar -->
+ <div id="sidebar">
- <section >
-
-
<p><a href="#" class="button button-style1 button-big color01">mobile web tv</a></p>
-
<p><a href="#" class="button button-style1 button-big color02">e-learning</a></p>
-
<p><a href="#" class="button button-style1 button-big color03">e-conference</a></p>
-
<p><a href="#" class="button button-style1 button-big color04">e-concert</a></p>
- </section>
- </div>
- <!-- /Sidebar -->
-
- </div>
- </div>
- </div>
- </div>
- <!-- /Main -->
-
- </div>
- </div>
- </div>
- </div>
- <!-- /Main Wrapper -->
- <!-- Footer Wrapper -->
-
<div id="wrapper" class="wrapper-copyright color01">
-
<div class="container">
- <!-- Copyright -->
- <span>
-
© telecasting 2013 <a href=""></a>
- </span>
- </div>
- <!-- /Copyright -->
-
- </div>
- </div>
- </div>
- </div>
- <!-- Footer Wrapper -->
+ <section >
+
+ <p><a href="#" class="button button-style1 button-big color01">mobile web tv</a></p>
+ <p><a href="#" class="button button-style1 button-big color02">e-learning</a></p>
+ <p><a href="#" class="button button-style1 button-big color03">e-conference</a></p>
+ <p><a href="#" class="button button-style1 button-big color04">e-concert</a></p>
+ </section>
+ </div>
+ <!-- /Sidebar -->
+
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- /Main -->
+
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- /Main Wrapper -->
+ <!-- Footer Wrapper -->
+ <div id="wrapper" class="wrapper-copyright color01">
+ <div class="container">
+ <div class="row">
+ <div class="12u">
+ <!-- Copyright -->
+ <div id="copyright">
+ <span>
+ © telecasting 2013 <a href=""></a>
+ </span>
+ </div>
+ <!-- /Copyright -->
+
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- Footer Wrapper -->
- </body>
+ </body>
</html>
\ No newline at end of file
<!DOCTYPE HTML>
<html lang="fr" class="no-js">
- <head>
- <title>Mobile Web Tv</title>
- <meta charset="UTF-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <meta name="description" content="Solution Web TV 100% Mobile & Portable" />
- <meta name="keywords" content="" />
-
- <link rel="icon" type="image/png" href="img/favicon.png">
- <link rel="shortcut icon" href="img/favicon.ico">
-
- <script src="js/modernizr-2.5.3.min.js"></script>
- <!--[if lte IE 8]><script src="js/html5shiv.js"></script><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
- <script src="js/jquery.min.js"></script>
- <script src="js/jquery.dropotron.js"></script>
- <script src="js/config.js"></script>
- <script src="js/skel.min.js"></script>
- <script src="js/skel-panels.min.js"></script>
-
+ <head>
+ <title>Mobile Web Tv</title>
+ <meta charset="UTF-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta name="description" content="Solution Web TV 100% Mobile & Portable" />
+ <meta name="keywords" content="" />
+
+ <link rel="icon" type="image/png" href="img/favicon.png">
+ <link rel="shortcut icon" href="img/favicon.ico">
+
+ <script src="js/modernizr-2.5.3.min.js"></script>
+ <!--[if lte IE 8]><script src="js/html5shiv.js"></script><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
+ <script src="js/jquery.min.js"></script>
+ <script src="js/jquery.dropotron.js"></script>
+ <script src="js/config.js"></script>
+ <script src="js/skel.min.js"></script>
+ <script src="js/skel-panels.min.js"></script>
+
- <noscript>
- <link rel="stylesheet" href="css/style.css" />
- <link rel="stylesheet" href="css/skel-noscript.css" />
- <link rel="stylesheet" href="css/style-desktop.css" />
- </noscript>
- </head>
-
- <body class="right-sidebar">
+ <noscript>
+ <link rel="stylesheet" href="css/style.css" />
+ <link rel="stylesheet" href="css/skel-noscript.css" />
+ <link rel="stylesheet" href="css/style-desktop.css" />
+ </noscript>
+ </head>
+
+ <body class="right-sidebar">
- <!-- Header Wrapper -->
-
<div class="color01" id="header-wrapper">
-
<div class="container">
- <!-- nav back-->
-
<div id="nav-back" class="skel-panels-fixed color09">
- <!-- Logo -->
-
<a href="index.html#" ><img src="img/logo-telecasting-site.svg" alt="telecasting live web tv" /></a>
- </div>
- <!-- /Logo -->
- <!-- Nav -->
- <nav id="nav" class="skel-panels-fixed">
- <!-- usage & workflow -->
-
<li class="current_page_item"><a href="index.html#h-workflow">usage & workflow</a></li>
- <li>
-
<span ><img src="img/bouton-menu.svg" alt="telecasting live web tv" /></span>
-
<li><a href="mobile-web-tv.html">mobile web tv</a></li>
-
<li><a href="e-lmearning.html">e-learning</a></li>
-
<li><a href="e-conferencing.html">e-conference</a></li>
-
<li><a href="e-concert.html">e-concert</a></li>
- </ul>
- </li>
- <!-- /usage & workflow -->
-
- <!-- logiciels -->
- <li class="current_page_item"><a href="index.html#h-logiciels">logiciels</a></li>
- <li>
-
<span ><img src="img/bouton-menu.svg" alt="telecasting live web tv" /></span>
-
<li><a href="telecasting.html">telecasting</a></li>
-
<li><a href="#">open source</a></li>
- <li><a href="#">partenariat</a></li>
- </ul>
- </li>
- <!-- /logiciels -->
-
- <!-- solutions -->
-
<li class="current_page_item"><a href="index.html#h-solutions">solutions</a></li>
- <li>
-
<span ><img src="img/bouton-menu.svg" alt="telecasting live web tv" /></span>
-
<li><a href="tc-case.html">TC case</a></li>
-
<li><a href="tc-box.html">TC box</a></li>
- <li><a href="tc-mini.html">TC mini</a></li>
-
<li><a href="tc-lame.html">TC lame</a></li>
-
<li><a href="specs.html">spécifications</a></li>
- </ul>
- </li>
- <!-- /solutions -->
-
- <!-- prestations -->
-
<li class="current_page_item"><a href="index.html#h-prestations">prestations</a></li>
- <li>
-
<span ><img src="img/bouton-menu.svg" alt="telecasting live web tv" /></span>
-
<li><a href="#">Location</a></li>
-
<li><a href="#">Equipe dédiée</a></li>
- <li><a href="#">Maintenance</a></li>
-
<li><a href="#">Formation</a></li>
-
<li><a href="#">Personnalisation</a></li>
-
<li><a href="#">Tarifs</a></li>
- </ul>
- </li>
- <!-- /prestations -->
-
- <!-- references -->
-
<li class="current_page_item"><a href="index.html#h-references">references</a></li>
- <li>
-
<span ><img src="img/bouton-menu.svg" alt="telecasting live web tv" /></span>
-
<li><a href="#">Etude de cas</a></li>
-
<li><a href="#">références</a></li>
- </ul>
- </li>
- <!-- /references -->
-
- <!-- contacts -->
-
<li class="current_page_item"><a href="index.html#h-contacts">contacts</a></li>
- <li>
-
<span ><img src="img/bouton-menu.svg" alt="telecasting live web tv" /></span>
-
<li><a href="#">la société</a></li>
-
<li><a href="#">mentions légales</a></li>
- </ul>
- </li>
- </ul>
- <!-- /contacts -->
-
- </nav>
- <!-- /Nav -->
- </div>
- <!-- /nav back-->
- <!-- Header -->
-
<div id="header" class="wrapper-video">
- <iframe src="ifr-home.html" ></iframe>
- </div>
- </div>
- <!-- /Header -->
- </div>
- </div>
- </div>
+ <!-- Header Wrapper -->
+ <div class="color01" id="header-wrapper">
+ <div class="container">
+ <div class="row">
+ <div class="12u">
+ <!-- nav back-->
+ <div id="nav-back" class="skel-panels-fixed color09">
+ <!-- Logo -->
+ <div id="logo" >
+ <a href="index.html#" ><img src="img/logo-telecasting-site.svg" alt="telecasting live web tv" /></a>
+ </div>
+ <!-- /Logo -->
+ <!-- Nav -->
+ <nav id="nav" class="skel-panels-fixed">
+ <ul>
+ <!-- usage & workflow -->
+ <li class="current_page_item"><a href="index.html#h-workflow">usage & workflow</a></li>
+ <li>
+ <span ><img src="img/bouton-menu.svg" alt="telecasting live web tv" /></span>
+ <ul>
+ <li><a href="mobile-web-tv.html">mobile web tv</a></li>
+ <li><a href="e-lmearning.html">e-learning</a></li>
+ <li><a href="e-conferencing.html">e-conference</a></li>
+ <li><a href="e-concert.html">e-concert</a></li>
+ </ul>
+ </li>
+ <!-- /usage & workflow -->
+
+ <!-- logiciels -->
+ <li class="current_page_item"><a href="index.html#h-logiciels">logiciels</a></li>
+ <li>
+ <span ><img src="img/bouton-menu.svg" alt="telecasting live web tv" /></span>
+ <ul>
+ <li><a href="telecasting.html">telecasting</a></li>
+ <li><a href="#">open source</a></li>
+ <li><a href="#">partenariat</a></li>
+ </ul>
+ </li>
+ <!-- /logiciels -->
+
+ <!-- solutions -->
+ <li class="current_page_item"><a href="index.html#h-solutions">solutions</a></li>
+ <li>
+ <span ><img src="img/bouton-menu.svg" alt="telecasting live web tv" /></span>
+ <ul>
+ <li><a href="tc-case.html">TC case</a></li>
+ <li><a href="tc-box.html">TC box</a></li>
+ <li><a href="tc-mini.html">TC mini</a></li>
+ <li><a href="tc-lame.html">TC lame</a></li>
+ <li><a href="specs.html">spécifications</a></li>
+ </ul>
+ </li>
+ <!-- /solutions -->
+
+ <!-- prestations -->
+ <li class="current_page_item"><a href="index.html#h-prestations">prestations</a></li>
+ <li>
+ <span ><img src="img/bouton-menu.svg" alt="telecasting live web tv" /></span>
+ <ul>
+ <li><a href="#">Location</a></li>
+ <li><a href="#">Equipe dédiée</a></li>
+ <li><a href="#">Maintenance</a></li>
+ <li><a href="#">Formation</a></li>
+ <li><a href="#">Personnalisation</a></li>
+ <li><a href="#">Tarifs</a></li>
+ </ul>
+ </li>
+ <!-- /prestations -->
+
+ <!-- references -->
+ <li class="current_page_item"><a href="index.html#h-references">references</a></li>
+ <li>
+ <span ><img src="img/bouton-menu.svg" alt="telecasting live web tv" /></span>
+ <ul>
+ <li><a href="#">Etude de cas</a></li>
+ <li><a href="#">références</a></li>
+ </ul>
+ </li>
+ <!-- /references -->
+
+ <!-- contacts -->
+ <li class="current_page_item"><a href="index.html#h-contacts">contacts</a></li>
+ <li>
+ <span ><img src="img/bouton-menu.svg" alt="telecasting live web tv" /></span>
+ <ul>
+ <li><a href="#">la société</a></li>
+ <li><a href="#">mentions légales</a></li>
+ </ul>
+ </li>
+ </ul>
+ <!-- /contacts -->
+
+ </nav>
+ <!-- /Nav -->
+ </div>
+ <!-- /nav back-->
+ <!-- Header -->
+ <div id="header" class="wrapper-video">
+ <div id="video-home">
+ <iframe src="ifr-home.html" ></iframe>
+ </div>
+ </div>
+ <!-- /Header -->
+ </div>
+ </div>
+ </div>
</div>
<!-- /Header Wrapper -->
-
+
<!-- Main Wrapper -->
<div class="wrapper wrapper-style2 color10">
-
<div class="title color10 Tcolor01 Bcolor01">mobile web tv</div>
-
<div class="container">
- <div class="12u">
- <!-- Main -->
-
<div class="8u skel-cell-mainContent Tcolor01">
-
- <!-- Content -->
-
<article class="is is-post">
- <header class="style1">
- <h2>Lorem ipsum dolor sit amet magna egestas morbi bibendum sed malesuada</h2>
- <span class="byline">Tempus feugiat veroeros sed nullam dolore</span>
- </header>
-
<a href="http://fav.me/d5pjw3g" class="image image-featured">
-
<img src="img/pic01.jpg" alt="" />
- </a>
-
<p>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget.
- odio eleifend. Duis commodo fringilla commodo. Aliquam erat volutpat. Vestibulum
- facilisis leo magna. Cras sit amet urna eros, id egestas urna. Quisque aliquam
- tempus euismod. Vestibulum ante ipsum primis in faucibus.</p>
-
<p>Phasellus nisl nisl, varius id porttitor sed, pellentesque ac orci. Pellentesque
- habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi
- bibendum justo sed mauris vehicula malesuada aliquam elit imperdiet. Aliquam eu nibh
- lorem, eget gravida mi. Duis odio diam, luctus et vulputate vitae, vehicula ac dolor.
- Pellentesque at urna eget tellus lobortis ultrices sed non erat. Donec eget erat non
- magna volutpat malesuada quis eget eros. Nullam sodales cursus sapien, id consequat
- leo suscipit ut. Praesent id turpis vitae turpis pretium ultricies. Vestibulum sit
- amet risus elit.</p>
-
<p>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra
- ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel. Praesent nec orci
- eget quam rutrum bibendum. Proin pellentesque diam non ligula commodo tempor. Vivamus
- eget urna nibh. Curabitur non fringilla nisl. Donec accumsan interdum nisi, quis
- tincidunt felis sagittis eget. Donec elementum ligula dignissim sem pulvinar non semper
- odio eleifend. Duis commodo fringilla commodo. Aliquam erat volutpat. Vestibulum
- facilisis leo magna. Cras sit amet urna eros, id egestas urna. Quisque aliquam
- tempus euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
- posuere cubilia.</p>
-
<p>Phasellus nisl nisl, varius id porttitor sed, pellentesque ac orci. Pellentesque
- habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi
- bibendum justo sed mauris vehicula malesuada aliquam elit imperdiet. Aliquam eu nibh
- lorem, eget gravida mi. Duis odio diam, luctus et vulputate vitae, vehicula ac dolor.
- Pellentesque at urna eget tellus lobortis ultrices sed non erat. Donec eget erat non
- magna volutpat malesuada quis eget eros. Nullam sodales cursus sapien, id consequat
- leo suscipit ut. Praesent id turpis vitae turpis pretium ultricies. Vestibulum sit
- amet risus elit.</p>
- </article>
- <section class="is is-pair-one">
- <header>
- <h2>Magna pulvinar tempus</h2>
- </header>
-
<a href="http://fav.me/d5uvswq" class="image image-full"><img src="img/Gpic02.jpg" alt="" /></a>
-
<p>Rutrum bibendum. Proin pellentesque diam non ligula commodo tempor. Vivamus
- eget urna nibh. Curabitur non fringilla nisl. Donec accumsan interdum nisi, quis
- tempus.</p>
-
<a href="#" class="button button-style1">More</a>
- </section>
- </div>
- <section class="is is-pair-two">
- <header>
- <h2>Magna pulvinar tempus</h2>
- </header>
-
<a href="http://fav.me/d5qdf2o" class="image image-full"><img src="img/Gpic03.jpg" alt="" /></a>
-
<p>Rutrum bibendum. Proin pellentesque diam non ligula commodo tempor. Vivamus
- eget urna nibh. Curabitur non fringilla nisl. Donec accumsan interdum nisi, quis
- tempus.</p>
- </section>
- </div>
- </div>
- </div>
- </div>
- <!-- /Content -->
- </div>
-
- <!-- Sidebar -->
+ <div class="title color10 Tcolor01 Bcolor01">mobile web tv</div>
+ <div class="container">
+ <div class="row">
+ <div class="12u">
+ <!-- Main -->
+ <div id="main">
+ <div>
+ <div class="row">
+ <div class="8u skel-cell-mainContent Tcolor01">
+
+ <!-- Content -->
+ <div id="content">
+ <article class="is is-post">
+ <header class="style1">
+ <h2>Lorem ipsum dolor sit amet magna egestas morbi bibendum sed malesuada</h2>
+ <span class="byline">Tempus feugiat veroeros sed nullam dolore</span>
+ </header>
+ <a href="http://fav.me/d5pjw3g" class="image image-featured">
+ <img src="img/pic01.jpg" alt="" />
+ </a>
+ <p>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget.
+ odio eleifend. Duis commodo fringilla commodo. Aliquam erat volutpat. Vestibulum
+ facilisis leo magna. Cras sit amet urna eros, id egestas urna. Quisque aliquam
+ tempus euismod. Vestibulum ante ipsum primis in faucibus.</p>
+ <p>Phasellus nisl nisl, varius id porttitor sed, pellentesque ac orci. Pellentesque
+ habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi
+ bibendum justo sed mauris vehicula malesuada aliquam elit imperdiet. Aliquam eu nibh
+ lorem, eget gravida mi. Duis odio diam, luctus et vulputate vitae, vehicula ac dolor.
+ Pellentesque at urna eget tellus lobortis ultrices sed non erat. Donec eget erat non
+ magna volutpat malesuada quis eget eros. Nullam sodales cursus sapien, id consequat
+ leo suscipit ut. Praesent id turpis vitae turpis pretium ultricies. Vestibulum sit
+ amet risus elit.</p>
+ <p>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra
+ ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel. Praesent nec orci
+ eget quam rutrum bibendum. Proin pellentesque diam non ligula commodo tempor. Vivamus
+ eget urna nibh. Curabitur non fringilla nisl. Donec accumsan interdum nisi, quis
+ tincidunt felis sagittis eget. Donec elementum ligula dignissim sem pulvinar non semper
+ odio eleifend. Duis commodo fringilla commodo. Aliquam erat volutpat. Vestibulum
+ facilisis leo magna. Cras sit amet urna eros, id egestas urna. Quisque aliquam
+ tempus euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+ posuere cubilia.</p>
+ <p>Phasellus nisl nisl, varius id porttitor sed, pellentesque ac orci. Pellentesque
+ habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi
+ bibendum justo sed mauris vehicula malesuada aliquam elit imperdiet. Aliquam eu nibh
+ lorem, eget gravida mi. Duis odio diam, luctus et vulputate vitae, vehicula ac dolor.
+ Pellentesque at urna eget tellus lobortis ultrices sed non erat. Donec eget erat non
+ magna volutpat malesuada quis eget eros. Nullam sodales cursus sapien, id consequat
+ leo suscipit ut. Praesent id turpis vitae turpis pretium ultricies. Vestibulum sit
+ amet risus elit.</p>
+ </article>
+ <div>
+ <div class="row">
+ <div class="6u">
+ <section class="is is-pair-one">
+ <header>
+ <h2>Magna pulvinar tempus</h2>
+ </header>
+ <a href="http://fav.me/d5uvswq" class="image image-full"><img src="img/Gpic02.jpg" alt="" /></a>
+ <p>Rutrum bibendum. Proin pellentesque diam non ligula commodo tempor. Vivamus
+ eget urna nibh. Curabitur non fringilla nisl. Donec accumsan interdum nisi, quis
+ tempus.</p>
+ <a href="#" class="button button-style1">More</a>
+ </section>
+ </div>
+ <div class="6u">
+ <section class="is is-pair-two">
+ <header>
+ <h2>Magna pulvinar tempus</h2>
+ </header>
+ <a href="http://fav.me/d5qdf2o" class="image image-full"><img src="img/Gpic03.jpg" alt="" /></a>
+ <p>Rutrum bibendum. Proin pellentesque diam non ligula commodo tempor. Vivamus
+ eget urna nibh. Curabitur non fringilla nisl. Donec accumsan interdum nisi, quis
+ tempus.</p>
+ </section>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- /Content -->
+ </div>
+ <div class="4u">
+
+ <!-- Sidebar -->
+ <div id="sidebar">
- <section >
-
-
<p><a href="#" class="button button-style1 button-big color01">mobile web tv</a></p>
-
<p><a href="#" class="button button-style1 button-big color02">e-learning</a></p>
-
<p><a href="#" class="button button-style1 button-big color03">e-conference</a></p>
-
<p><a href="#" class="button button-style1 button-big color04">e-concert</a></p>
- </section>
- </div>
- <!-- /Sidebar -->
-
- </div>
- </div>
- </div>
- </div>
- <!-- /Main -->
-
- </div>
- </div>
- </div>
- </div>
- <!-- /Main Wrapper -->
- <!-- Footer Wrapper -->
-
<div id="wrapper" class="wrapper-copyright color01">
-
<div class="container">
- <!-- Copyright -->
- <span>
-
© telecasting 2013 <a href=""></a>
- </span>
- </div>
- <!-- /Copyright -->
-
- </div>
- </div>
- </div>
- </div>
- <!-- Footer Wrapper -->
+ <section >
+
+ <p><a href="#" class="button button-style1 button-big color01">mobile web tv</a></p>
+ <p><a href="#" class="button button-style1 button-big color02">e-learning</a></p>
+ <p><a href="#" class="button button-style1 button-big color03">e-conference</a></p>
+ <p><a href="#" class="button button-style1 button-big color04">e-concert</a></p>
+ </section>
+ </div>
+ <!-- /Sidebar -->
+
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- /Main -->
+
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- /Main Wrapper -->
+ <!-- Footer Wrapper -->
+ <div id="wrapper" class="wrapper-copyright color01">
+ <div class="container">
+ <div class="row">
+ <div class="12u">
+ <!-- Copyright -->
+ <div id="copyright">
+ <span>
+ © telecasting 2013 <a href=""></a>
+ </span>
+ </div>
+ <!-- /Copyright -->
+
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- Footer Wrapper -->
- </body>
+ </body>
</html>
\ No newline at end of file
<!DOCTYPE HTML>
<html lang="fr" class="no-js">
- <head>
- <title>Mobile Web Tv</title>
- <meta charset="UTF-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <meta name="description" content="Solution Web TV 100% Mobile & Portable" />
- <meta name="keywords" content="" />
-
- <link rel="icon" type="image/png" href="img/favicon.png">
- <link rel="shortcut icon" href="img/favicon.ico">
-
- <script src="js/modernizr-2.5.3.min.js"></script>
- <!--[if lte IE 8]><script src="js/html5shiv.js"></script><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
- <script src="js/jquery.min.js"></script>
- <script src="js/jquery.dropotron.js"></script>
- <script src="js/config.js"></script>
- <script src="js/skel.min.js"></script>
- <script src="js/skel-panels.min.js"></script>
-
+ <head>
+ <title>Mobile Web Tv</title>
+ <meta charset="UTF-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta name="description" content="Solution Web TV 100% Mobile & Portable" />
+ <meta name="keywords" content="" />
+
+ <link rel="icon" type="image/png" href="img/favicon.png">
+ <link rel="shortcut icon" href="img/favicon.ico">
+
+ <script src="js/modernizr-2.5.3.min.js"></script>
+ <!--[if lte IE 8]><script src="js/html5shiv.js"></script><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
+ <script src="js/jquery.min.js"></script>
+ <script src="js/jquery.dropotron.js"></script>
+ <script src="js/config.js"></script>
+ <script src="js/skel.min.js"></script>
+ <script src="js/skel-panels.min.js"></script>
+
- <noscript>
- <link rel="stylesheet" href="css/style.css" />
- <link rel="stylesheet" href="css/skel-noscript.css" />
- <link rel="stylesheet" href="css/style-desktop.css" />
- </noscript>
- </head>
-
- <body class="right-sidebar">
+ <noscript>
+ <link rel="stylesheet" href="css/style.css" />
+ <link rel="stylesheet" href="css/skel-noscript.css" />
+ <link rel="stylesheet" href="css/style-desktop.css" />
+ </noscript>
+ </head>
+
+ <body class="right-sidebar">
- <!-- Header Wrapper -->
-
<div class="color01" id="header-wrapper">
-
<div class="container">
- <!-- nav back-->
-
<div id="nav-back" class="skel-panels-fixed color09">
- <!-- Logo -->
-
<a href="index.html#" ><img src="img/logo-telecasting-site.svg" alt="telecasting live web tv" /></a>
- </div>
- <!-- /Logo -->
- <!-- Nav -->
- <nav id="nav" class="skel-panels-fixed">
- <!-- usage & workflow -->
-
<li class="current_page_item"><a href="index.html#h-workflow">usage & workflow</a></li>
- <li>
-
<span ><img src="img/bouton-menu.svg" alt="telecasting live web tv" /></span>
-
<li><a href="mobile-web-tv.html">mobile web tv</a></li>
-
<li><a href="e-lmearning.html">e-learning</a></li>
-
<li><a href="e-conferencing.html">e-conference</a></li>
-
<li><a href="e-concert.html">e-concert</a></li>
- </ul>
- </li>
- <!-- /usage & workflow -->
-
- <!-- logiciels -->
- <li class="current_page_item"><a href="index.html#h-logiciels">logiciels</a></li>
- <li>
-
<span ><img src="img/bouton-menu.svg" alt="telecasting live web tv" /></span>
-
<li><a href="telecasting.html">telecasting</a></li>
-
<li><a href="#">open source</a></li>
- <li><a href="#">partenariat</a></li>
- </ul>
- </li>
- <!-- /logiciels -->
-
- <!-- solutions -->
-
<li class="current_page_item"><a href="index.html#h-solutions">solutions</a></li>
- <li>
-
<span ><img src="img/bouton-menu.svg" alt="telecasting live web tv" /></span>
-
<li><a href="tc-case.html">TC case</a></li>
-
<li><a href="tc-box.html">TC box</a></li>
- <li><a href="tc-mini.html">TC mini</a></li>
-
<li><a href="tc-lame.html">TC lame</a></li>
-
<li><a href="specs.html">spécifications</a></li>
- </ul>
- </li>
- <!-- /solutions -->
-
- <!-- prestations -->
-
<li class="current_page_item"><a href="index.html#h-prestations">prestations</a></li>
- <li>
-
<span ><img src="img/bouton-menu.svg" alt="telecasting live web tv" /></span>
-
<li><a href="#">Location</a></li>
-
<li><a href="#">Equipe dédiée</a></li>
- <li><a href="#">Maintenance</a></li>
-
<li><a href="#">Formation</a></li>
-
<li><a href="#">Personnalisation</a></li>
-
<li><a href="#">Tarifs</a></li>
- </ul>
- </li>
- <!-- /prestations -->
-
- <!-- references -->
-
<li class="current_page_item"><a href="index.html#h-references">references</a></li>
- <li>
-
<span ><img src="img/bouton-menu.svg" alt="telecasting live web tv" /></span>
-
<li><a href="#">Etude de cas</a></li>
-
<li><a href="#">références</a></li>
- </ul>
- </li>
- <!-- /references -->
-
- <!-- contacts -->
-
<li class="current_page_item"><a href="index.html#h-contacts">contacts</a></li>
- <li>
-
<span ><img src="img/bouton-menu.svg" alt="telecasting live web tv" /></span>
-
<li><a href="#">la société</a></li>
-
<li><a href="#">mentions légales</a></li>
- </ul>
- </li>
- </ul>
- <!-- /contacts -->
-
- </nav>
- <!-- /Nav -->
- </div>
- <!-- /nav back-->
- <!-- Header -->
-
<div id="header" class="wrapper-video">
-
<a class="image"><img src="img/tc-case1200x676.jpg" alt="" /></a>
- </div>
- </div>
- <!-- /Header -->
- </div>
- </div>
- </div>
+ <!-- Header Wrapper -->
+ <div class="color01" id="header-wrapper">
+ <div class="container">
+ <div class="row">
+ <div class="12u">
+ <!-- nav back-->
+ <div id="nav-back" class="skel-panels-fixed color09">
+ <!-- Logo -->
+ <div id="logo" >
+ <a href="index.html#" ><img src="img/logo-telecasting-site.svg" alt="telecasting live web tv" /></a>
+ </div>
+ <!-- /Logo -->
+ <!-- Nav -->
+ <nav id="nav" class="skel-panels-fixed">
+ <ul>
+ <!-- usage & workflow -->
+ <li class="current_page_item"><a href="index.html#h-workflow">usage & workflow</a></li>
+ <li>
+ <span ><img src="img/bouton-menu.svg" alt="telecasting live web tv" /></span>
+ <ul>
+ <li><a href="mobile-web-tv.html">mobile web tv</a></li>
+ <li><a href="e-lmearning.html">e-learning</a></li>
+ <li><a href="e-conferencing.html">e-conference</a></li>
+ <li><a href="e-concert.html">e-concert</a></li>
+ </ul>
+ </li>
+ <!-- /usage & workflow -->
+
+ <!-- logiciels -->
+ <li class="current_page_item"><a href="index.html#h-logiciels">logiciels</a></li>
+ <li>
+ <span ><img src="img/bouton-menu.svg" alt="telecasting live web tv" /></span>
+ <ul>
+ <li><a href="telecasting.html">telecasting</a></li>
+ <li><a href="#">open source</a></li>
+ <li><a href="#">partenariat</a></li>
+ </ul>
+ </li>
+ <!-- /logiciels -->
+
+ <!-- solutions -->
+ <li class="current_page_item"><a href="index.html#h-solutions">solutions</a></li>
+ <li>
+ <span ><img src="img/bouton-menu.svg" alt="telecasting live web tv" /></span>
+ <ul>
+ <li><a href="tc-case.html">TC case</a></li>
+ <li><a href="tc-box.html">TC box</a></li>
+ <li><a href="tc-mini.html">TC mini</a></li>
+ <li><a href="tc-lame.html">TC lame</a></li>
+ <li><a href="specs.html">spécifications</a></li>
+ </ul>
+ </li>
+ <!-- /solutions -->
+
+ <!-- prestations -->
+ <li class="current_page_item"><a href="index.html#h-prestations">prestations</a></li>
+ <li>
+ <span ><img src="img/bouton-menu.svg" alt="telecasting live web tv" /></span>
+ <ul>
+ <li><a href="#">Location</a></li>
+ <li><a href="#">Equipe dédiée</a></li>
+ <li><a href="#">Maintenance</a></li>
+ <li><a href="#">Formation</a></li>
+ <li><a href="#">Personnalisation</a></li>
+ <li><a href="#">Tarifs</a></li>
+ </ul>
+ </li>
+ <!-- /prestations -->
+
+ <!-- references -->
+ <li class="current_page_item"><a href="index.html#h-references">references</a></li>
+ <li>
+ <span ><img src="img/bouton-menu.svg" alt="telecasting live web tv" /></span>
+ <ul>
+ <li><a href="#">Etude de cas</a></li>
+ <li><a href="#">références</a></li>
+ </ul>
+ </li>
+ <!-- /references -->
+
+ <!-- contacts -->
+ <li class="current_page_item"><a href="index.html#h-contacts">contacts</a></li>
+ <li>
+ <span ><img src="img/bouton-menu.svg" alt="telecasting live web tv" /></span>
+ <ul>
+ <li><a href="#">la société</a></li>
+ <li><a href="#">mentions légales</a></li>
+ </ul>
+ </li>
+ </ul>
+ <!-- /contacts -->
+
+ </nav>
+ <!-- /Nav -->
+ </div>
+ <!-- /nav back-->
+ <!-- Header -->
+ <div id="header" class="wrapper-video">
+ <div id="video-home">
+ <a class="image"><img src="img/tc-case1200x676.jpg" alt="" /></a>
+ </div>
+ </div>
+ <!-- /Header -->
+ </div>
+ </div>
+ </div>
</div>
<!-- /Header Wrapper -->
-
+
<!-- Main Wrapper -->
<div class="wrapper wrapper-style2 color10">
-
<div class="title color10 Tcolor01 Bcolor01">mobile web tv</div>
-
<div class="container">
- <div class="12u">
- <!-- Main -->
-
<div class="8u skel-cell-mainContent Tcolor01">
-
- <!-- Content -->
-
<article class="is is-post">
- <header class="style1">
- <h2>Lorem ipsum dolor sit amet magna egestas morbi bibendum sed malesuada</h2>
- <span class="byline">Tempus feugiat veroeros sed nullam dolore</span>
- </header>
-
<a href="http://fav.me/d5pjw3g" class="image image-featured">
-
<img src="img/pic01.jpg" alt="" />
- </a>
-
<p>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget.
- odio eleifend. Duis commodo fringilla commodo. Aliquam erat volutpat. Vestibulum
- facilisis leo magna. Cras sit amet urna eros, id egestas urna. Quisque aliquam
- tempus euismod. Vestibulum ante ipsum primis in faucibus.</p>
-
<p>Phasellus nisl nisl, varius id porttitor sed, pellentesque ac orci. Pellentesque
- habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi
- bibendum justo sed mauris vehicula malesuada aliquam elit imperdiet. Aliquam eu nibh
- lorem, eget gravida mi. Duis odio diam, luctus et vulputate vitae, vehicula ac dolor.
- Pellentesque at urna eget tellus lobortis ultrices sed non erat. Donec eget erat non
- magna volutpat malesuada quis eget eros. Nullam sodales cursus sapien, id consequat
- leo suscipit ut. Praesent id turpis vitae turpis pretium ultricies. Vestibulum sit
- amet risus elit.</p>
-
<p>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra
- ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel. Praesent nec orci
- eget quam rutrum bibendum. Proin pellentesque diam non ligula commodo tempor. Vivamus
- eget urna nibh. Curabitur non fringilla nisl. Donec accumsan interdum nisi, quis
- tincidunt felis sagittis eget. Donec elementum ligula dignissim sem pulvinar non semper
- odio eleifend. Duis commodo fringilla commodo. Aliquam erat volutpat. Vestibulum
- facilisis leo magna. Cras sit amet urna eros, id egestas urna. Quisque aliquam
- tempus euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
- posuere cubilia.</p>
-
<p>Phasellus nisl nisl, varius id porttitor sed, pellentesque ac orci. Pellentesque
- habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi
- bibendum justo sed mauris vehicula malesuada aliquam elit imperdiet. Aliquam eu nibh
- lorem, eget gravida mi. Duis odio diam, luctus et vulputate vitae, vehicula ac dolor.
- Pellentesque at urna eget tellus lobortis ultrices sed non erat. Donec eget erat non
- magna volutpat malesuada quis eget eros. Nullam sodales cursus sapien, id consequat
- leo suscipit ut. Praesent id turpis vitae turpis pretium ultricies. Vestibulum sit
- amet risus elit.</p>
- </article>
- <section class="is is-pair-one">
- <header>
- <h2>Magna pulvinar tempus</h2>
- </header>
-
<a href="http://fav.me/d5uvswq" class="image image-full"><img src="img/Gpic02.jpg" alt="" /></a>
-
<p>Rutrum bibendum. Proin pellentesque diam non ligula commodo tempor. Vivamus
- eget urna nibh. Curabitur non fringilla nisl. Donec accumsan interdum nisi, quis
- tempus.</p>
-
<a href="#" class="button button-style1">More</a>
- </section>
- </div>
- <section class="is is-pair-two">
- <header>
- <h2>Magna pulvinar tempus</h2>
- </header>
-
<a href="http://fav.me/d5qdf2o" class="image image-full"><img src="img/Gpic03.jpg" alt="" /></a>
-
<p>Rutrum bibendum. Proin pellentesque diam non ligula commodo tempor. Vivamus
- eget urna nibh. Curabitur non fringilla nisl. Donec accumsan interdum nisi, quis
- tempus.</p>
- </section>
- </div>
- </div>
- </div>
-
<div id="tarifs" class="12u">
- <header class="style4">
- <hr></hr>
- <h2>TC Case Matériel & Logiciels</h2>
- <p> Tarifs 2013</p>
- </header>
- <div class="row">
- <section class="is-T is-T-pair-price01 Tcolor11">
- <header class="color01 Tcolor10">
- <h2>Achat</h2>
- </header>
-
<p class="Tcolor01">TC CASE</p>
- </section>
- </div>
- <section class="is-T is-T-pair-price Tcolor11">
- <header class="color01 Tcolor10">
- <h2>Détails</h2>
- </header>
-
<p class="Tcolor01">La Malette Complète et sa suite logiciels</p>
- </section>
- </div>
- <section class="is-T is-T-pair-price Tcolor11">
- <header class="color01 Tcolor10">
- <h2>prix.ht</h2>
- </header>
-
<p class="Tcolor01">4800 €</p>
- </section>
- </div>
- <section class="is-T is-T-pair-price Tcolor11">
- <header class="color01 Tcolor10">
- <h2>prix.ttc</h2>
- </header>
-
<p class="Tcolor01">5000 €.</p>
- </section>
- </div>
- </div>
- <hr></hr>
- <div class="row">
- <section class="is-T is-T-pair-price01 Tcolor11">
- <header class="color01 Tcolor10">
- <h2>location</h2>
- </header>
-
<p class="Tcolor01">TC CASE</p>
- </section>
- </div>
- <section class="is-T is-T-pair-price Tcolor11">
- <header class="color01 Tcolor10">
- <h2>Détails</h2>
- </header>
-
<p class="Tcolor01">La Malette Complète et sa suite logiciels</p>
- </section>
- </div>
- <section class="is-T is-T-pair-price Tcolor11">
- <header class="color01 Tcolor10">
- <h2>prix-jour.ht</h2>
- </header>
-
<p class="Tcolor01">200 €</p>
- </section>
- </div>
- <section class="is-T is-T-pair-price Tcolor11">
- <header class="color01 Tcolor10">
- <h2>prix-jour.ttc</h2>
- </header>
-
<p class="Tcolor01">300 €.</p>
- </section>
- </div>
- </div>
-
- <hr></hr>
-
<p><a href="#" class="button button-style1 button-big color01">téléchargez nos tarifs</a></p>
- <br><br>
- </div>
- </div>
- <!-- /Content -->
- </div>
-
- <!-- Sidebar -->
-
<div id="sidebar-menu" >
- <header class="style4" >
- <hr></hr>
- <h3 class="Tcolor01" >Nos<br></br>solutions</h3>
- <hr></hr>
- </header>
-
<li ><a href="#" class="Tcolor01">tc case</a></li>
-
<li><a href="#" class="Tcolor01">tc box</a></li>
-
<li><a href="#" class="Tcolor01">tc mini</a></li>
-
<li><a href="#" class="Tcolor01">tc lame</a></li>
-
<li><a href="#" class="Tcolor01">spécifications</a></li>
- <li><a href="#" class="Tcolor01">Dapibus</a></li>
- </ul>
- </div>
- </div>
- <!-- /Sidebar -->
-
- </div>
+ <div class="title color10 Tcolor01 Bcolor01">mobile web tv</div>
+ <div class="container">
+ <div class="row">
+ <div class="12u">
+ <!-- Main -->
+ <div id="main">
+ <div>
+ <div class="row">
+ <div class="8u skel-cell-mainContent Tcolor01">
+
+ <!-- Content -->
+ <div id="content">
+ <article class="is is-post">
+ <header class="style1">
+ <h2>Lorem ipsum dolor sit amet magna egestas morbi bibendum sed malesuada</h2>
+ <span class="byline">Tempus feugiat veroeros sed nullam dolore</span>
+ </header>
+ <a href="http://fav.me/d5pjw3g" class="image image-featured">
+ <img src="img/pic01.jpg" alt="" />
+ </a>
+ <p>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget.
+ odio eleifend. Duis commodo fringilla commodo. Aliquam erat volutpat. Vestibulum
+ facilisis leo magna. Cras sit amet urna eros, id egestas urna. Quisque aliquam
+ tempus euismod. Vestibulum ante ipsum primis in faucibus.</p>
+ <p>Phasellus nisl nisl, varius id porttitor sed, pellentesque ac orci. Pellentesque
+ habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi
+ bibendum justo sed mauris vehicula malesuada aliquam elit imperdiet. Aliquam eu nibh
+ lorem, eget gravida mi. Duis odio diam, luctus et vulputate vitae, vehicula ac dolor.
+ Pellentesque at urna eget tellus lobortis ultrices sed non erat. Donec eget erat non
+ magna volutpat malesuada quis eget eros. Nullam sodales cursus sapien, id consequat
+ leo suscipit ut. Praesent id turpis vitae turpis pretium ultricies. Vestibulum sit
+ amet risus elit.</p>
+ <p>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra
+ ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel. Praesent nec orci
+ eget quam rutrum bibendum. Proin pellentesque diam non ligula commodo tempor. Vivamus
+ eget urna nibh. Curabitur non fringilla nisl. Donec accumsan interdum nisi, quis
+ tincidunt felis sagittis eget. Donec elementum ligula dignissim sem pulvinar non semper
+ odio eleifend. Duis commodo fringilla commodo. Aliquam erat volutpat. Vestibulum
+ facilisis leo magna. Cras sit amet urna eros, id egestas urna. Quisque aliquam
+ tempus euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+ posuere cubilia.</p>
+ <p>Phasellus nisl nisl, varius id porttitor sed, pellentesque ac orci. Pellentesque
+ habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi
+ bibendum justo sed mauris vehicula malesuada aliquam elit imperdiet. Aliquam eu nibh
+ lorem, eget gravida mi. Duis odio diam, luctus et vulputate vitae, vehicula ac dolor.
+ Pellentesque at urna eget tellus lobortis ultrices sed non erat. Donec eget erat non
+ magna volutpat malesuada quis eget eros. Nullam sodales cursus sapien, id consequat
+ leo suscipit ut. Praesent id turpis vitae turpis pretium ultricies. Vestibulum sit
+ amet risus elit.</p>
+ </article>
+ <div>
+ <div class="row">
+ <div class="6u">
+ <section class="is is-pair-one">
+ <header>
+ <h2>Magna pulvinar tempus</h2>
+ </header>
+ <a href="http://fav.me/d5uvswq" class="image image-full"><img src="img/Gpic02.jpg" alt="" /></a>
+ <p>Rutrum bibendum. Proin pellentesque diam non ligula commodo tempor. Vivamus
+ eget urna nibh. Curabitur non fringilla nisl. Donec accumsan interdum nisi, quis
+ tempus.</p>
+ <a href="#" class="button button-style1">More</a>
+ </section>
+ </div>
+ <div class="6u">
+ <section class="is is-pair-two">
+ <header>
+ <h2>Magna pulvinar tempus</h2>
+ </header>
+ <a href="http://fav.me/d5qdf2o" class="image image-full"><img src="img/Gpic03.jpg" alt="" /></a>
+ <p>Rutrum bibendum. Proin pellentesque diam non ligula commodo tempor. Vivamus
+ eget urna nibh. Curabitur non fringilla nisl. Donec accumsan interdum nisi, quis
+ tempus.</p>
+ </section>
+ </div>
+ </div>
+ </div>
+ <div id="tarifs" class="12u">
+ <header class="style4">
+ <hr></hr>
+ <h2>TC Case Matériel & Logiciels</h2>
+ <p> Tarifs 2013</p>
+ </header>
+ <div class="row">
+ <div class="2u">
+ <section class="is-T is-T-pair-price01 Tcolor11">
+ <header class="color01 Tcolor10">
+ <h2>Achat</h2>
+ </header>
+ <p class="Tcolor01">TC CASE</p>
+ </section>
+ </div>
+ <div class="6u">
+ <section class="is-T is-T-pair-price Tcolor11">
+ <header class="color01 Tcolor10">
+ <h2>Détails</h2>
+ </header>
+ <p class="Tcolor01">La Malette Complète et sa suite logiciels</p>
+ </section>
+ </div>
+ <div class="2u">
+ <section class="is-T is-T-pair-price Tcolor11">
+ <header class="color01 Tcolor10">
+ <h2>prix.ht</h2>
+ </header>
+ <p class="Tcolor01">4800 €</p>
+ </section>
+ </div>
+ <div class="2u">
+ <section class="is-T is-T-pair-price Tcolor11">
+ <header class="color01 Tcolor10">
+ <h2>prix.ttc</h2>
+ </header>
+ <p class="Tcolor01">5000 €.</p>
+ </section>
+ </div>
+ </div>
+ <hr></hr>
+ <div class="row">
+ <div class="2u">
+ <section class="is-T is-T-pair-price01 Tcolor11">
+ <header class="color01 Tcolor10">
+ <h2>location</h2>
+ </header>
+ <p class="Tcolor01">TC CASE</p>
+ </section>
+ </div>
+ <div class="6u">
+ <section class="is-T is-T-pair-price Tcolor11">
+ <header class="color01 Tcolor10">
+ <h2>Détails</h2>
+ </header>
+ <p class="Tcolor01">La Malette Complète et sa suite logiciels</p>
+ </section>
+ </div>
+ <div class="2u">
+ <section class="is-T is-T-pair-price Tcolor11">
+ <header class="color01 Tcolor10">
+ <h2>prix-jour.ht</h2>
+ </header>
+ <p class="Tcolor01">200 €</p>
+ </section>
+ </div>
+ <div class="2u">
+ <section class="is-T is-T-pair-price Tcolor11">
+ <header class="color01 Tcolor10">
+ <h2>prix-jour.ttc</h2>
+ </header>
+ <p class="Tcolor01">300 €.</p>
+ </section>
+ </div>
+ </div>
+
+ <hr></hr>
+ <p><a href="#" class="button button-style1 button-big color01">téléchargez nos tarifs</a></p>
+ <br><br>
+ </div>
+ </div>
+ <!-- /Content -->
+ </div>
+ <div class="4u">
+
+ <!-- Sidebar -->
+ <div id="sidebar">
+ <div id="sidebar-menu" >
+ <header class="style4" >
+ <hr></hr>
+ <h3 class="Tcolor01" >Nos<br></br>solutions</h3>
+ <hr></hr>
+ </header>
+ <ul class="style3">
+ <li ><a href="#" class="Tcolor01">tc case</a></li>
+ <li><a href="#" class="Tcolor01">tc box</a></li>
+ <li><a href="#" class="Tcolor01">tc mini</a></li>
+ <li><a href="#" class="Tcolor01">tc lame</a></li>
+ <li><a href="#" class="Tcolor01">spécifications</a></li>
+ <li><a href="#" class="Tcolor01">Dapibus</a></li>
+ </ul>
+ </div>
+ </div>
+ <!-- /Sidebar -->
+
+ </div>
- </div>
- </div>
- </div>
- <!-- /Main -->
-
- </div>
- </div>
- </div>
- </div>
- <!-- /Main Wrapper -->
- <!-- Footer Wrapper -->
-
<div id="wrapper" class="wrapper-copyright color01">
-
<div class="container">
- <!-- Copyright -->
- <span>
-
© telecasting 2013 <a href=""></a>
- </span>
- </div>
- <!-- /Copyright -->
-
- </div>
- </div>
- </div>
- </div>
- <!-- Footer Wrapper -->
+ </div>
+ </div>
+ </div>
+ <!-- /Main -->
+
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- /Main Wrapper -->
+ <!-- Footer Wrapper -->
+ <div id="wrapper" class="wrapper-copyright color01">
+ <div class="container">
+ <div class="row">
+ <div class="12u">
+ <!-- Copyright -->
+ <div id="copyright">
+ <span>
+ © telecasting 2013 <a href=""></a>
+ </span>
+ </div>
+ <!-- /Copyright -->
+
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- Footer Wrapper -->
- </body>
+ </body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Fullscreen Layout with Page Transitions</title>
- <meta name="description" content="Fullscreen Layout with Page Transitions" />
- <meta name="keywords" content="fullscreen layout, boxes, responsive, page transitions, css transitions, jquery, portfolio, template" />
- <meta name="author" content="Codrops" />
- <link rel="shortcut icon" href="../favicon.ico">
- <link rel="stylesheet" type="text/css" href="css/component.css" />
- <script src="js/modernizr.custom.js"></script>
-
- </head>
- <body>
+ <head>
+ <meta charset="UTF-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Fullscreen Layout with Page Transitions</title>
+ <meta name="description" content="Fullscreen Layout with Page Transitions" />
+ <meta name="keywords" content="fullscreen layout, boxes, responsive, page transitions, css transitions, jquery, portfolio, template" />
+ <meta name="author" content="Codrops" />
+ <link rel="shortcut icon" href="../favicon.ico">
+ <link rel="stylesheet" type="text/css" href="css/component.css" />
+ <script src="js/modernizr.custom.js"></script>
+
+ </head>
+ <body>
-
<div class="container">
-
<div id="bl-main" class="bl-main">
- <section id="color01" >
- <h2 class="bl-icon bl-icon-about">About</h2>
- </div>
-
<div class="bl-content">
- <h2>About this layout</h2>
-
<p>This responsive layout is based on an initial grid of four boxes. Once a box is clicked, it gets resized to fullscreen and the other boxes scale down and fade out. In the work section we experiment with another transition which is to show a panel by making it appear from the bottom while scaling the current one down. To see it in action, open the work section and click on one of the portfolio items and navigate through them.</p>
-
<a href="http://tympanus.net/Development/ResponsiveMultiLevelMenu/"><strong>« Previous Demo</strong></a> |
-
<a href="http://tympanus.net/codrops/?p=14783"><strong>Back to the Codrops Article</strong></a>
- </p>
- </div>
- <span class="bl-icon bl-icon-close"></span>
- </section>
- <section class="color02" id="bl-work-section">
- <h2 class="bl-icon bl-icon-works">Works</h2>
- </div>
-
<div class="bl-content">
- <h2>My Works</h2>
-
<p>Mung bean maize dandelion sea lettuce catsear bunya nuts ricebean tatsoi caulie horseradish pea.</p>
-
<ul id="bl-work-items">
-
<li data-panel="panel-1"><a href="#"><img src="images/1.jpg" /></a></li>
-
<li data-panel="panel-2"><a href="#"><img src="images/2.jpg" /></a></li>
-
<li data-panel="panel-3"><a href="#"><img src="images/3.jpg" /></a></li>
-
<li data-panel="panel-4"><a href="#"><img src="images/4.jpg" /></a></li>
- </ul>
-
<p>Illustrations by <a href="http://dribbble.com/isaac317/click">Isaac Montemayor</a></p>
- </div>
- <span class="bl-icon bl-icon-close"></span>
- </section>
- <section class="color03">
- <h2 class="bl-icon bl-icon-blog">Blog</h2>
- </div>
-
<div class="bl-content">
- <h2>My Musings</h2>
- <h3>Being a Freelance Designer</h3>
-
<p>Stumptown helvetica cardigan, odd future seitan tattooed flannel. Kale chips direct trade cray beard. 8-bit etsy butcher post-ironic blog lo-fi mcsweeney's, sustainable pickled umami flexitarian DIY ethical plaid trust fund. Wolf cred organic, terry richardson aesthetic four loko occupy vegan chillwave readymade deep... <a href="#">Read more</a></p>
- </article>
- <h3>Working with Photoshop</h3>
-
<p>Cosby sweater odd future gluten-free actually dreamcatcher. Fixie cray vice sriracha disrupt, lo-fi pitchfork mcsweeney's swag YOLO meh chambray etsy. Keytar sriracha fanny pack church-key hashtag vice blog. 3 wolf moon VHS helvetica, raw denim deep v shoreditch seitan twee... <a href="#">Read more</a></p>
- </article>
- <h3>Making use of Icon Fonts</h3>
-
<p>Locavore irony gastropub chillwave, butcher meggings flexitarian pinterest master cleanse godard. Intelligentsia pop-up neutra, williamsburg gastropub godard pinterest swag deep v umami lomo. Butcher next level 90's wolf bushwick, narwhal photo booth YOLO kale chips whatever small batch. Meh viral ethical hella cardigan portland, street art mlkshk meggings mixtape kale chips cliche messenger bag pitchfork... <a href="#">Read more</a></p>
- </article>
- <h3>Being a Freelance Designer</h3>
-
<p>Stumptown helvetica cardigan, odd future seitan tattooed flannel. Kale chips direct trade cray beard. 8-bit etsy butcher post-ironic blog lo-fi mcsweeney's, sustainable pickled umami flexitarian DIY ethical plaid trust fund. Wolf cred organic, terry richardson aesthetic four loko occupy vegan chillwave readymade deep... <a href="#">Read more</a></p>
- </article>
- <h3>Working with Photoshop</h3>
-
<p>Cosby sweater odd future gluten-free actually dreamcatcher. Fixie cray vice sriracha disrupt, lo-fi pitchfork mcsweeney's swag YOLO meh chambray etsy. Keytar sriracha fanny pack church-key hashtag vice blog. 3 wolf moon VHS helvetica, raw denim deep v shoreditch seitan twee... <a href="#">Read more</a></p>
- </article>
- <h3>Making use of Icon Fonts</h3>
-
<p>Locavore irony gastropub chillwave, butcher meggings flexitarian pinterest master cleanse godard. Intelligentsia pop-up neutra, williamsburg gastropub godard pinterest swag deep v umami lomo. Butcher next level 90's wolf bushwick, narwhal photo booth YOLO kale chips whatever small batch. Meh viral ethical hella cardigan portland, street art mlkshk meggings mixtape kale chips cliche messenger bag pitchfork... <a href="#">Read more</a></p>
- </article>
- </div>
- <span class="bl-icon bl-icon-close"></span>
- </section>
- <section class="color04">
- <h2 class="bl-icon bl-icon-contact">Contact</h2>
- </div>
-
<div class="bl-content">
- <h2>Get in touch</h2>
-
<p>Pinterest semiotics single-origin coffee craft beer thundercats irony, tumblr bushwick intelligentsia pickled. Narwhal mustache godard master cleanse street art, occupy ugh selfies put a bird on it cray salvia four loko gluten-free shoreditch. Occupy american apparel freegan cliche. Mustache trust fund 8-bit jean shorts mumblecore thundercats. Pour-over small batch forage cray, banjo post-ironic flannel keffiyeh cred ethnic semiotics next level tousled fashion axe. Sustainable cardigan keytar fap bushwick bespoke.</p>
- </div>
- <span class="bl-icon bl-icon-close"></span>
- </section>
- <!-- Panel items for the works -->
-
<div class="bl-panel-items" id="bl-panel-work-items">
-
<div data-panel="panel-1">
- <video id="player" width="100%" height="100%" controls poster="vid/tele01.png">
- <source src="vid/tele01.mp4" type="video/mp4" />
- <source src="vid/tele01.webm" type="video/webm" />
- <source src="vid/tele01.ogv" type="video/ogg" />
- </video>
+ <div class="container">
+ <div id="bl-main" class="bl-main">
+ <section id="color01" >
+ <div class="bl-box">
+ <h2 class="bl-icon bl-icon-about">About</h2>
+ </div>
+ <div class="bl-content">
+ <h2>About this layout</h2>
+ <p>This responsive layout is based on an initial grid of four boxes. Once a box is clicked, it gets resized to fullscreen and the other boxes scale down and fade out. In the work section we experiment with another transition which is to show a panel by making it appear from the bottom while scaling the current one down. To see it in action, open the work section and click on one of the portfolio items and navigate through them.</p>
+ <p>
+ <a href="http://tympanus.net/Development/ResponsiveMultiLevelMenu/"><strong>« Previous Demo</strong></a> |
+ <a href="http://tympanus.net/codrops/?p=14783"><strong>Back to the Codrops Article</strong></a>
+ </p>
+ </div>
+ <span class="bl-icon bl-icon-close"></span>
+ </section>
+ <section class="color02" id="bl-work-section">
+ <div class="bl-box">
+ <h2 class="bl-icon bl-icon-works">Works</h2>
+ </div>
+ <div class="bl-content">
+ <h2>My Works</h2>
+ <p>Mung bean maize dandelion sea lettuce catsear bunya nuts ricebean tatsoi caulie horseradish pea.</p>
+ <ul id="bl-work-items">
+ <li data-panel="panel-1"><a href="#"><img src="images/1.jpg" /></a></li>
+ <li data-panel="panel-2"><a href="#"><img src="images/2.jpg" /></a></li>
+ <li data-panel="panel-3"><a href="#"><img src="images/3.jpg" /></a></li>
+ <li data-panel="panel-4"><a href="#"><img src="images/4.jpg" /></a></li>
+ </ul>
+ <p>Illustrations by <a href="http://dribbble.com/isaac317/click">Isaac Montemayor</a></p>
+ </div>
+ <span class="bl-icon bl-icon-close"></span>
+ </section>
+ <section class="color03">
+ <div class="bl-box">
+ <h2 class="bl-icon bl-icon-blog">Blog</h2>
+ </div>
+ <div class="bl-content">
+ <h2>My Musings</h2>
+ <article>
+ <h3>Being a Freelance Designer</h3>
+ <p>Stumptown helvetica cardigan, odd future seitan tattooed flannel. Kale chips direct trade cray beard. 8-bit etsy butcher post-ironic blog lo-fi mcsweeney's, sustainable pickled umami flexitarian DIY ethical plaid trust fund. Wolf cred organic, terry richardson aesthetic four loko occupy vegan chillwave readymade deep... <a href="#">Read more</a></p>
+ </article>
+ <article>
+ <h3>Working with Photoshop</h3>
+ <p>Cosby sweater odd future gluten-free actually dreamcatcher. Fixie cray vice sriracha disrupt, lo-fi pitchfork mcsweeney's swag YOLO meh chambray etsy. Keytar sriracha fanny pack church-key hashtag vice blog. 3 wolf moon VHS helvetica, raw denim deep v shoreditch seitan twee... <a href="#">Read more</a></p>
+ </article>
+ <article>
+ <h3>Making use of Icon Fonts</h3>
+ <p>Locavore irony gastropub chillwave, butcher meggings flexitarian pinterest master cleanse godard. Intelligentsia pop-up neutra, williamsburg gastropub godard pinterest swag deep v umami lomo. Butcher next level 90's wolf bushwick, narwhal photo booth YOLO kale chips whatever small batch. Meh viral ethical hella cardigan portland, street art mlkshk meggings mixtape kale chips cliche messenger bag pitchfork... <a href="#">Read more</a></p>
+ </article>
+ <article>
+ <h3>Being a Freelance Designer</h3>
+ <p>Stumptown helvetica cardigan, odd future seitan tattooed flannel. Kale chips direct trade cray beard. 8-bit etsy butcher post-ironic blog lo-fi mcsweeney's, sustainable pickled umami flexitarian DIY ethical plaid trust fund. Wolf cred organic, terry richardson aesthetic four loko occupy vegan chillwave readymade deep... <a href="#">Read more</a></p>
+ </article>
+ <article>
+ <h3>Working with Photoshop</h3>
+ <p>Cosby sweater odd future gluten-free actually dreamcatcher. Fixie cray vice sriracha disrupt, lo-fi pitchfork mcsweeney's swag YOLO meh chambray etsy. Keytar sriracha fanny pack church-key hashtag vice blog. 3 wolf moon VHS helvetica, raw denim deep v shoreditch seitan twee... <a href="#">Read more</a></p>
+ </article>
+ <article>
+ <h3>Making use of Icon Fonts</h3>
+ <p>Locavore irony gastropub chillwave, butcher meggings flexitarian pinterest master cleanse godard. Intelligentsia pop-up neutra, williamsburg gastropub godard pinterest swag deep v umami lomo. Butcher next level 90's wolf bushwick, narwhal photo booth YOLO kale chips whatever small batch. Meh viral ethical hella cardigan portland, street art mlkshk meggings mixtape kale chips cliche messenger bag pitchfork... <a href="#">Read more</a></p>
+ </article>
+ </div>
+ <span class="bl-icon bl-icon-close"></span>
+ </section>
+ <section class="color04">
+ <div class="bl-box">
+ <h2 class="bl-icon bl-icon-contact">Contact</h2>
+ </div>
+ <div class="bl-content">
+ <h2>Get in touch</h2>
+ <p>Pinterest semiotics single-origin coffee craft beer thundercats irony, tumblr bushwick intelligentsia pickled. Narwhal mustache godard master cleanse street art, occupy ugh selfies put a bird on it cray salvia four loko gluten-free shoreditch. Occupy american apparel freegan cliche. Mustache trust fund 8-bit jean shorts mumblecore thundercats. Pour-over small batch forage cray, banjo post-ironic flannel keffiyeh cred ethnic semiotics next level tousled fashion axe. Sustainable cardigan keytar fap bushwick bespoke.</p>
+ </div>
+ <span class="bl-icon bl-icon-close"></span>
+ </section>
+ <!-- Panel items for the works -->
+ <div class="bl-panel-items" id="bl-panel-work-items">
+ <div data-panel="panel-1">
+ <video id="player" width="100%" height="100%" controls poster="vid/tele01.png">
+ <source src="vid/tele01.mp4" type="video/mp4" />
+ <source src="vid/tele01.webm" type="video/webm" />
+ <source src="vid/tele01.ogv" type="video/ogg" />
+ </video>
- </div>
-
<div data-panel="panel-2">
- <script language="JavaScript" type="text/javascript">
- function videoStop() {
- var video = document.getElementById("player");
- video.stop();
- }
- </script>
-
<img src="images/2.jpg" />
- <h3>Chillwave mustache</h3>
-
<p>Squid vinyl scenester literally pug, hashtag tofu try-hard typewriter polaroid craft beer mlkshk cardigan photo booth PBR. Chillwave 90's gentrify american apparel carles disrupt. Pinterest semiotics single-origin coffee craft beer thundercats irony, tumblr bushwick intelligentsia pickled. Narwhal mustache godard master cleanse street art, occupy ugh selfies put a bird on it cray salvia four loko gluten-free shoreditch.</p>
- </div>
- </div>
-
<div data-panel="panel-3">
-
<img src="images/3.jpg" />
- <h3>Austin hella</h3>
-
<p>Ethical cray wayfarers leggings vice, seitan banksy small batch ethnic master cleanse. Pug chillwave etsy, scenester meh occupy blue bottle tousled blog tonx pinterest selvage mixtape swag cosby sweater. Synth tousled direct trade, hella Austin craft beer ugh chambray.</p>
- </div>
- </div>
-
<div data-panel="panel-4">
-
<img src="images/4.jpg" />
- <h3>Brooklyn dreamcatcher</h3>
-
<p>Fashion axe 90's pug fap. Blog wayfarers brooklyn dreamcatcher, bicycle rights retro YOLO. Wes anderson lomo 90's food truck 3 wolf moon, twee jean shorts. Iphone small batch twee wolf yr before they sold out. Brooklyn echo park cred, portland pug selvage flannel seitan tousled mcsweeney's.</p>
- </div>
- </div>
- <nav>
- <span class="bl-next-work">> Next Project</span>
- <span class="bl-icon bl-icon-close"></span>
- </nav>
- </div>
- </div>
- </div><!-- /container -->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
- <script src="js/boxlayout.js"></script>
- <script>
- $(function() {
- Boxlayout.init();
- });
- </script>
- </body>
+ </div>
+ <div data-panel="panel-2">
+ <script language="JavaScript" type="text/javascript">
+ function videoStop() {
+ var video = document.getElementById("player");
+ video.stop();
+ }
+ </script>
+ <div>
+ <img src="images/2.jpg" />
+ <h3>Chillwave mustache</h3>
+ <p>Squid vinyl scenester literally pug, hashtag tofu try-hard typewriter polaroid craft beer mlkshk cardigan photo booth PBR. Chillwave 90's gentrify american apparel carles disrupt. Pinterest semiotics single-origin coffee craft beer thundercats irony, tumblr bushwick intelligentsia pickled. Narwhal mustache godard master cleanse street art, occupy ugh selfies put a bird on it cray salvia four loko gluten-free shoreditch.</p>
+ </div>
+ </div>
+ <div data-panel="panel-3">
+ <div>
+ <img src="images/3.jpg" />
+ <h3>Austin hella</h3>
+ <p>Ethical cray wayfarers leggings vice, seitan banksy small batch ethnic master cleanse. Pug chillwave etsy, scenester meh occupy blue bottle tousled blog tonx pinterest selvage mixtape swag cosby sweater. Synth tousled direct trade, hella Austin craft beer ugh chambray.</p>
+ </div>
+ </div>
+ <div data-panel="panel-4">
+ <div>
+ <img src="images/4.jpg" />
+ <h3>Brooklyn dreamcatcher</h3>
+ <p>Fashion axe 90's pug fap. Blog wayfarers brooklyn dreamcatcher, bicycle rights retro YOLO. Wes anderson lomo 90's food truck 3 wolf moon, twee jean shorts. Iphone small batch twee wolf yr before they sold out. Brooklyn echo park cred, portland pug selvage flannel seitan tousled mcsweeney's.</p>
+ </div>
+ </div>
+ <nav>
+ <span class="bl-next-work">> Next Project</span>
+ <span class="bl-icon bl-icon-close"></span>
+ </nav>
+ </div>
+ </div>
+ </div><!-- /container -->
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+ <script src="js/boxlayout.js"></script>
+ <script>
+ $(function() {
+ Boxlayout.init();
+ });
+ </script>
+ </body>
</html>
<!DOCTYPE html>
<html lang="fr">
- <head>
- <meta charset="UTF-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Fullscreen Layout with Page Transitions</title>
- <meta name="description" content="Fullscreen Layout with Page Transitions" />
- <meta name="keywords" content="fullscreen layout, boxes, responsive, page transitions, css transitions, jquery, portfolio, template" />
- <meta name="author" content="Codrops" />
- <link rel="stylesheet" type="text/css" href="css/component.css" />
- <link rel="stylesheet" type="text/css" href="../css/gamme.css" />
- <script src="js/modernizr.custom.js"></script>
-
- </head>
- <body>
+ <head>
+ <meta charset="UTF-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Fullscreen Layout with Page Transitions</title>
+ <meta name="description" content="Fullscreen Layout with Page Transitions" />
+ <meta name="keywords" content="fullscreen layout, boxes, responsive, page transitions, css transitions, jquery, portfolio, template" />
+ <meta name="author" content="Codrops" />
+ <link rel="stylesheet" type="text/css" href="css/component.css" />
+ <link rel="stylesheet" type="text/css" href="../css/gamme.css" />
+ <script src="js/modernizr.custom.js"></script>
+
+ </head>
+ <body>
-
<div class="container">
-
<div id="bl-main" class="bl-mainfull">
- <section class="color01" id="bl-work-section" >
-
<h2 ><img class="bl-image" src="../img/telecasting-baseline01.svg" /></h2>
- </div>
-
<div class="bl-content color01">
- <h2>mobile web tv</h2>
-
<p>La solution matériel et logiciel professionnelle, portable et tout en un pour l'enregistrement video et audio de vos évènements et leur diffusion multicanal </p>
-
<ul id="bl-work-items">
-
<li data-panel="panel-1"><a href="#"><img src="images/record.svg" /></a></li>
-
<li data-panel="panel-2"><a href="#"><img src="images/brodcast.svg" /></a></li>
-
<li data-panel="panel-3"><a href="#"><img src="images/play.svg" /></a></li>
-
<li data-panel="panel-4"><a href="#"><img src="images/4.jpg" /></a></li>
- </ul>
-
<p>Illustrations by <a href="http://dribbble.com/isaac317/click">Isaac Montemayor</a></p>
- </div>
- <span class="bl-icon bl-icon-close"></span>
- </section>
- <!-- Panel items for the works -->
-
<div class="bl-panel-items" id="bl-panel-work-items">
-
<div data-panel="panel-1" class="color01">
- <img class="bl-image" src="images/4.jpg" />
- <div>
- <h3>Brooklyn dreamcatcher</h3>
-
<p>Fashion axe 90's pug fap. Blog wayfarers brooklyn dreamcatcher, bicycle rights retro YOLO. Wes anderson lomo 90's food truck 3 wolf moon, twee jean shorts. Iphone small batch twee wolf yr before they sold out. Brooklyn echo park cred, portland pug selvage flannel seitan tousled mcsweeney's.</p>
- </div>
- </div>
-
<div data-panel="panel-2" class="color02">
-
<img class="bl-image" src="images/2.jpg" />
- <div >
- <h3>Chillwave mustache</h3>
-
<p>Squid vinyl scenester literally pug, hashtag tofu try-hard typewriter polaroid craft beer mlkshk cardigan photo booth PBR. Chillwave 90's gentrify american apparel carles disrupt. Pinterest semiotics single-origin coffee craft beer thundercats irony, tumblr bushwick intelligentsia pickled. Narwhal mustache godard master cleanse street art, occupy ugh selfies put a bird on it cray salvia four loko gluten-free shoreditch.</p>
- </div>
- </div>
-
<div data-panel="panel-3" class="color04">
-
<img src="images/3.jpg" />
- <h3>Austin hella</h3>
-
<p>Ethical cray wayfarers leggings vice, seitan banksy small batch ethnic master cleanse. Pug chillwave etsy, scenester meh occupy blue bottle tousled blog tonx pinterest selvage mixtape swag cosby sweater. Synth tousled direct trade, hella Austin craft beer ugh chambray.</p>
- </div>
- </div>
-
<div data-panel="panel-4" class="color05">
- <video id="player" width="100%" height="auto" controls poster="vid/tele01.png">
- <source src="vid/tele01.mp4" type="video/mp4" />
- <source src="vid/tele01.webm" type="video/webm" />
- <source src="vid/tele01.ogv" type="video/ogg" />
- </video>
- </div>
- <nav>
- <span class="bl-next-work">> Next Project</span>
- <span class="bl-icon bl-icon-close"></span>
- </nav>
- </div>
- </div>
- </div><!-- /container -->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
- <script src="js/boxlayout.js"></script>
- <script>
- $(function() {
- Boxlayout.init();
- });
- </script>
- </body>
+ <div class="container">
+ <div id="bl-main" class="bl-mainfull">
+ <section class="color01" id="bl-work-section" >
+ <div class="bl-box">
+ <h2 ><img class="bl-image" src="../img/telecasting-baseline01.svg" /></h2>
+ </div>
+ <div class="bl-content color01">
+ <h2>mobile web tv</h2>
+ <p>La solution matériel et logiciel professionnelle, portable et tout en un pour l'enregistrement video et audio de vos évènements et leur diffusion multicanal </p>
+ <ul id="bl-work-items">
+ <li data-panel="panel-1"><a href="#"><img src="images/record.svg" /></a></li>
+ <li data-panel="panel-2"><a href="#"><img src="images/brodcast.svg" /></a></li>
+ <li data-panel="panel-3"><a href="#"><img src="images/play.svg" /></a></li>
+ <li data-panel="panel-4"><a href="#"><img src="images/4.jpg" /></a></li>
+ </ul>
+ <p>Illustrations by <a href="http://dribbble.com/isaac317/click">Isaac Montemayor</a></p>
+ </div>
+ <span class="bl-icon bl-icon-close"></span>
+ </section>
+ <!-- Panel items for the works -->
+ <div class="bl-panel-items" id="bl-panel-work-items">
+ <div data-panel="panel-1" class="color01">
+ <img class="bl-image" src="images/4.jpg" />
+ <div>
+ <h3>Brooklyn dreamcatcher</h3>
+ <p>Fashion axe 90's pug fap. Blog wayfarers brooklyn dreamcatcher, bicycle rights retro YOLO. Wes anderson lomo 90's food truck 3 wolf moon, twee jean shorts. Iphone small batch twee wolf yr before they sold out. Brooklyn echo park cred, portland pug selvage flannel seitan tousled mcsweeney's.</p>
+ </div>
+ </div>
+ <div data-panel="panel-2" class="color02">
+ <img class="bl-image" src="images/2.jpg" />
+ <div >
+ <h3>Chillwave mustache</h3>
+ <p>Squid vinyl scenester literally pug, hashtag tofu try-hard typewriter polaroid craft beer mlkshk cardigan photo booth PBR. Chillwave 90's gentrify american apparel carles disrupt. Pinterest semiotics single-origin coffee craft beer thundercats irony, tumblr bushwick intelligentsia pickled. Narwhal mustache godard master cleanse street art, occupy ugh selfies put a bird on it cray salvia four loko gluten-free shoreditch.</p>
+ </div>
+ </div>
+ <div data-panel="panel-3" class="color04">
+ <div>
+ <img src="images/3.jpg" />
+ <h3>Austin hella</h3>
+ <p>Ethical cray wayfarers leggings vice, seitan banksy small batch ethnic master cleanse. Pug chillwave etsy, scenester meh occupy blue bottle tousled blog tonx pinterest selvage mixtape swag cosby sweater. Synth tousled direct trade, hella Austin craft beer ugh chambray.</p>
+ </div>
+ </div>
+ <div data-panel="panel-4" class="color05">
+ <video id="player" width="100%" height="auto" controls poster="vid/tele01.png">
+ <source src="vid/tele01.mp4" type="video/mp4" />
+ <source src="vid/tele01.webm" type="video/webm" />
+ <source src="vid/tele01.ogv" type="video/ogg" />
+ </video>
+ </div>
+ <nav>
+ <span class="bl-next-work">> Next Project</span>
+ <span class="bl-icon bl-icon-close"></span>
+ </nav>
+ </div>
+ </div>
+ </div><!-- /container -->
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+ <script src="js/boxlayout.js"></script>
+ <script>
+ $(function() {
+ Boxlayout.init();
+ });
+ </script>
+ </body>
</html>
<!DOCTYPE html>
<html lang="fr">
- <head>
- <meta charset="UTF-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>workflow</title>
- <meta name="description" content="Fullscreen Layout with Page Transitions" />
- <meta name="keywords" content="fullscreen layout, boxes, responsive, page transitions, css transitions, jquery, portfolio, template" />
- <link rel="stylesheet" type="text/css" href="css/component.css" />
- <link rel="stylesheet" type="text/css" href="css/gamme.css" />
- <script src="js/modernizr.custom.js"></script>
-
- </head>
- <body >
+ <head>
+ <meta charset="UTF-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>workflow</title>
+ <meta name="description" content="Fullscreen Layout with Page Transitions" />
+ <meta name="keywords" content="fullscreen layout, boxes, responsive, page transitions, css transitions, jquery, portfolio, template" />
+ <link rel="stylesheet" type="text/css" href="css/component.css" />
+ <link rel="stylesheet" type="text/css" href="css/gamme.css" />
+ <script src="js/modernizr.custom.js"></script>
+
+ </head>
+ <body >
-
<div class="container">
-
<div id="bl-main" class="bl-main">
- <section class="color01">
-
<h2 >solution web tv 100% mobile & portable<img class="bl-image" src="" /></h2>
- </div>
-
<div class="bl-content">
- <h2 class="Tcolor10">mobile web tv</h2>
-
<p>This responsive layout is based on an initial grid of four boxes. Once a box is clicked, it gets resized to fullscreen and the other boxes scale down and fade out. In the work section we experiment with another transition which is to show a panel by making it appear from the bottom while scaling the current one down. To see it in action, open the work section and click on one of the portfolio items and navigate through them.</p>
- <p>
-
<a href="../live-web-tv.html" target="_blank"><strong>en savoir plus</strong></a>
- </p>
- </div>
- <span class="bl-icon bl-icon-close"></span>
- </section>
- <section class="color02">
-
<h2><img class="bl-image" src="../img/telecasting-baseline02.svg" /></h2>
- </div>
-
<div class="bl-content">
- <h2>About this layout</h2>
-
<p>This responsive layout is based on an initial grid of four boxes. Once a box is clicked, it gets resized to fullscreen and the other boxes scale down and fade out. In the work section we experiment with another transition which is to show a panel by making it appear from the bottom while scaling the current one down. To see it in action, open the work section and click on one of the portfolio items and navigate through them.</p>
-
<a href="http://tympanus.net/Development/ResponsiveMultiLevelMenu/"><strong>« Previous Demo</strong></a> |
-
<a href="http://tympanus.net/codrops/?p=14783"><strong>Back to the Codrops Article</strong></a>
- </p>
- </div>
- <span class="bl-icon bl-icon-close"></span>
- </section>
- <section class="color03">
-
<h2 ><img class="bl-image" src="../img/telecasting-baseline02.svg" /></h2>
- </div>
-
<div class="bl-content">
- <h2>About this layout</h2>
-
<p>This responsive layout is based on an initial grid of four boxes. Once a box is clicked, it gets resized to fullscreen and the other boxes scale down and fade out. In the work section we experiment with another transition which is to show a panel by making it appear from the bottom while scaling the current one down. To see it in action, open the work section and click on one of the portfolio items and navigate through them.</p>
-
<a href="http://tympanus.net/Development/ResponsiveMultiLevelMenu/"><strong>« Previous Demo</strong></a> |
-
<a href="http://tympanus.net/codrops/?p=14783"><strong>Back to the Codrops Article</strong></a>
- </p>
- </div>
- <span class="bl-icon bl-icon-close"></span>
- </section>
- <section class="color04">
-
<h2><img class="bl-image" src="../img/telecasting-baseline02.svg" /></h2>
- </div>
-
<div class="bl-content">
- <h2>Get in touch</h2>
-
<p>Pinterest semiotics single-origin coffee craft beer thundercats irony, tumblr bushwick intelligentsia pickled. Narwhal mustache godard master cleanse street art, occupy ugh selfies put a bird on it cray salvia four loko gluten-free shoreditch. Occupy american apparel freegan cliche. Mustache trust fund 8-bit jean shorts mumblecore thundercats. Pour-over small batch forage cray, banjo post-ironic flannel keffiyeh cred ethnic semiotics next level tousled fashion axe. Sustainable cardigan keytar fap bushwick bespoke.</p>
- </div>
- <span class="bl-icon bl-icon-close"></span>
- </section>
- <!-- Panel items for the works -->
-
<div class="bl-panel-items" id="bl-panel-work-items">
-
<div data-panel="panel-1">
- <video id="player" width="100%" height="100%" controls poster="vid/tele01.png">
- <source src="vid/tele01.mp4" type="video/mp4" />
- <source src="vid/tele01.webm" type="video/webm" />
- <source src="vid/tele01.ogv" type="video/ogg" />
- </video>
+ <div class="container">
+ <div id="bl-main" class="bl-main">
+ <section class="color01">
+ <div class="bl-box" >
+ <h2 >solution web tv 100% mobile & portable<img class="bl-image" src="" /></h2>
+ </div>
+ <div class="bl-content">
+ <h2 class="Tcolor10">mobile web tv</h2>
+ <p>This responsive layout is based on an initial grid of four boxes. Once a box is clicked, it gets resized to fullscreen and the other boxes scale down and fade out. In the work section we experiment with another transition which is to show a panel by making it appear from the bottom while scaling the current one down. To see it in action, open the work section and click on one of the portfolio items and navigate through them.</p>
+ <p>
+ <a href="../live-web-tv.html" target="_blank"><strong>en savoir plus</strong></a>
+ </p>
+ </div>
+ <span class="bl-icon bl-icon-close"></span>
+ </section>
+ <section class="color02">
+ <div class="bl-box">
+ <h2><img class="bl-image" src="../img/telecasting-baseline02.svg" /></h2>
+ </div>
+ <div class="bl-content">
+ <h2>About this layout</h2>
+ <p>This responsive layout is based on an initial grid of four boxes. Once a box is clicked, it gets resized to fullscreen and the other boxes scale down and fade out. In the work section we experiment with another transition which is to show a panel by making it appear from the bottom while scaling the current one down. To see it in action, open the work section and click on one of the portfolio items and navigate through them.</p>
+ <p>
+ <a href="http://tympanus.net/Development/ResponsiveMultiLevelMenu/"><strong>« Previous Demo</strong></a> |
+ <a href="http://tympanus.net/codrops/?p=14783"><strong>Back to the Codrops Article</strong></a>
+ </p>
+ </div>
+ <span class="bl-icon bl-icon-close"></span>
+ </section>
+ <section class="color03">
+ <div class="bl-box">
+ <h2 ><img class="bl-image" src="../img/telecasting-baseline02.svg" /></h2>
+ </div>
+ <div class="bl-content">
+ <h2>About this layout</h2>
+ <p>This responsive layout is based on an initial grid of four boxes. Once a box is clicked, it gets resized to fullscreen and the other boxes scale down and fade out. In the work section we experiment with another transition which is to show a panel by making it appear from the bottom while scaling the current one down. To see it in action, open the work section and click on one of the portfolio items and navigate through them.</p>
+ <p>
+ <a href="http://tympanus.net/Development/ResponsiveMultiLevelMenu/"><strong>« Previous Demo</strong></a> |
+ <a href="http://tympanus.net/codrops/?p=14783"><strong>Back to the Codrops Article</strong></a>
+ </p>
+ </div>
+ <span class="bl-icon bl-icon-close"></span>
+ </section>
+ <section class="color04">
+ <div class="bl-box">
+ <h2><img class="bl-image" src="../img/telecasting-baseline02.svg" /></h2>
+ </div>
+ <div class="bl-content">
+ <h2>Get in touch</h2>
+ <p>Pinterest semiotics single-origin coffee craft beer thundercats irony, tumblr bushwick intelligentsia pickled. Narwhal mustache godard master cleanse street art, occupy ugh selfies put a bird on it cray salvia four loko gluten-free shoreditch. Occupy american apparel freegan cliche. Mustache trust fund 8-bit jean shorts mumblecore thundercats. Pour-over small batch forage cray, banjo post-ironic flannel keffiyeh cred ethnic semiotics next level tousled fashion axe. Sustainable cardigan keytar fap bushwick bespoke.</p>
+ </div>
+ <span class="bl-icon bl-icon-close"></span>
+ </section>
+ <!-- Panel items for the works -->
+ <div class="bl-panel-items" id="bl-panel-work-items">
+ <div data-panel="panel-1">
+ <video id="player" width="100%" height="100%" controls poster="vid/tele01.png">
+ <source src="vid/tele01.mp4" type="video/mp4" />
+ <source src="vid/tele01.webm" type="video/webm" />
+ <source src="vid/tele01.ogv" type="video/ogg" />
+ </video>
- </div>
- <div data-panel="panel-2">
-
<img src="images/2.jpg" />
- <h3>Chillwave mustache</h3>
-
<p>Squid vinyl scenester literally pug, hashtag tofu try-hard typewriter polaroid craft beer mlkshk cardigan photo booth PBR. Chillwave 90's gentrify american apparel carles disrupt. Pinterest semiotics single-origin coffee craft beer thundercats irony, tumblr bushwick intelligentsia pickled. Narwhal mustache godard master cleanse street art, occupy ugh selfies put a bird on it cray salvia four loko gluten-free shoreditch.</p>
- </div>
- </div>
-
<div data-panel="panel-3">
-
<img src="images/3.jpg" />
- <h3>Austin hella</h3>
-
<p>Ethical cray wayfarers leggings vice, seitan banksy small batch ethnic master cleanse. Pug chillwave etsy, scenester meh occupy blue bottle tousled blog tonx pinterest selvage mixtape swag cosby sweater. Synth tousled direct trade, hella Austin craft beer ugh chambray.</p>
- </div>
- </div>
-
<div data-panel="panel-4">
-
<img src="images/4.jpg" />
- <h3>Brooklyn dreamcatcher</h3>
-
<p>Fashion axe 90's pug fap. Blog wayfarers brooklyn dreamcatcher, bicycle rights retro YOLO. Wes anderson lomo 90's food truck 3 wolf moon, twee jean shorts. Iphone small batch twee wolf yr before they sold out. Brooklyn echo park cred, portland pug selvage flannel seitan tousled mcsweeney's.</p>
- </div>
- </div>
- <nav>
- <span class="bl-next-work">> Next Project</span>
- <span class="bl-icon bl-icon-close"></span>
- </nav>
- </div>
- </div>
- </div><!-- /container -->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
- <script src="js/boxlayout.js"></script>
- <script>
- $(function() {
- Boxlayout.init();
- });
- </script>
- </body>
+ </div>
+ <div data-panel="panel-2">
+ <div>
+ <img src="images/2.jpg" />
+ <h3>Chillwave mustache</h3>
+ <p>Squid vinyl scenester literally pug, hashtag tofu try-hard typewriter polaroid craft beer mlkshk cardigan photo booth PBR. Chillwave 90's gentrify american apparel carles disrupt. Pinterest semiotics single-origin coffee craft beer thundercats irony, tumblr bushwick intelligentsia pickled. Narwhal mustache godard master cleanse street art, occupy ugh selfies put a bird on it cray salvia four loko gluten-free shoreditch.</p>
+ </div>
+ </div>
+ <div data-panel="panel-3">
+ <div>
+ <img src="images/3.jpg" />
+ <h3>Austin hella</h3>
+ <p>Ethical cray wayfarers leggings vice, seitan banksy small batch ethnic master cleanse. Pug chillwave etsy, scenester meh occupy blue bottle tousled blog tonx pinterest selvage mixtape swag cosby sweater. Synth tousled direct trade, hella Austin craft beer ugh chambray.</p>
+ </div>
+ </div>
+ <div data-panel="panel-4">
+ <div>
+ <img src="images/4.jpg" />
+ <h3>Brooklyn dreamcatcher</h3>
+ <p>Fashion axe 90's pug fap. Blog wayfarers brooklyn dreamcatcher, bicycle rights retro YOLO. Wes anderson lomo 90's food truck 3 wolf moon, twee jean shorts. Iphone small batch twee wolf yr before they sold out. Brooklyn echo park cred, portland pug selvage flannel seitan tousled mcsweeney's.</p>
+ </div>
+ </div>
+ <nav>
+ <span class="bl-next-work">> Next Project</span>
+ <span class="bl-icon bl-icon-close"></span>
+ </nav>
+ </div>
+ </div>
+ </div><!-- /container -->
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+ <script src="js/boxlayout.js"></script>
+ <script>
+ $(function() {
+ Boxlayout.init();
+ });
+ </script>
+ </body>
</html>
<!DOCTYPE html>
<html lang="fr">
- <head>
- <meta charset="UTF-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>workflow</title>
- <meta name="description" content="Fullscreen Layout with Page Transitions" />
- <meta name="keywords" content="fullscreen layout, boxes, responsive, page transitions, css transitions, jquery, portfolio, template" />
- <link rel="stylesheet" type="text/css" href="css/component.css" />
- <link rel="stylesheet" type="text/css" href="css/gamme.css" />
- <script src="js/modernizr.custom.js"></script>
-
- </head>
- <body >
+ <head>
+ <meta charset="UTF-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>workflow</title>
+ <meta name="description" content="Fullscreen Layout with Page Transitions" />
+ <meta name="keywords" content="fullscreen layout, boxes, responsive, page transitions, css transitions, jquery, portfolio, template" />
+ <link rel="stylesheet" type="text/css" href="css/component.css" />
+ <link rel="stylesheet" type="text/css" href="css/gamme.css" />
+ <script src="js/modernizr.custom.js"></script>
+
+ </head>
+ <body >
-
<div class="container">
-
<div id="bl-main" class="bl-main">
- <section class="color01">
- <h2 >solution web tv<br>100%<br>mobile & portable</h2>
- </div>
-
<div class="bl-content">
- <h2 class="Tcolor10">mobile web tv</h2>
-
<p>This responsive layout is based on an initial grid of four boxes. Once a box is clicked, it gets resized to fullscreen and the other boxes scale down and fade out. In the work section we experiment with another transition which is to show a panel by making it appear from the bottom while scaling the current one down. To see it in action, open the work section and click on one of the portfolio items and navigate through them.</p>
- <p>
-
<a href="../live-web-tv.html" target="_blank"><strong>en savoir plus</strong></a>
- </p>
- </div>
- <span class="bl-icon bl-icon-close"></span>
- </section>
- <section class="color02">
- <h2>solution e-learning<br>100%<br>mobile & portable</h2>
- </div>
-
<div class="bl-content">
- <h2>About this layout</h2>
-
<p>This responsive layout is based on an initial grid of four boxes. Once a box is clicked, it gets resized to fullscreen and the other boxes scale down and fade out. In the work section we experiment with another transition which is to show a panel by making it appear from the bottom while scaling the current one down. To see it in action, open the work section and click on one of the portfolio items and navigate through them.</p>
-
<a href="http://tympanus.net/Development/ResponsiveMultiLevelMenu/"><strong>« Previous Demo</strong></a> |
-
<a href="http://tympanus.net/codrops/?p=14783"><strong>Back to the Codrops Article</strong></a>
- </p>
- </div>
- <span class="bl-icon bl-icon-close"></span>
- </section>
- <section class="color03">
- <h2 >solution e-conference<br>100%<br>mobile & portable</h2>
- </div>
-
<div class="bl-content">
- <h2>About this layout</h2>
-
<p>This responsive layout is based on an initial grid of four boxes. Once a box is clicked, it gets resized to fullscreen and the other boxes scale down and fade out. In the work section we experiment with another transition which is to show a panel by making it appear from the bottom while scaling the current one down. To see it in action, open the work section and click on one of the portfolio items and navigate through them.</p>
-
<a href="http://tympanus.net/Development/ResponsiveMultiLevelMenu/"><strong>« Previous Demo</strong></a> |
-
<a href="http://tympanus.net/codrops/?p=14783"><strong>Back to the Codrops Article</strong></a>
- </p>
- </div>
- <span class="bl-icon bl-icon-close"></span>
- </section>
- <section class="color04">
- <h2>solution e-concert<br>100%<br>mobile & portable</h2>
- </div>
-
<div class="bl-content">
- <h2>Get in touch</h2>
-
<p>Pinterest semiotics single-origin coffee craft beer thundercats irony, tumblr bushwick intelligentsia pickled. Narwhal mustache godard master cleanse street art, occupy ugh selfies put a bird on it cray salvia four loko gluten-free shoreditch. Occupy american apparel freegan cliche. Mustache trust fund 8-bit jean shorts mumblecore thundercats. Pour-over small batch forage cray, banjo post-ironic flannel keffiyeh cred ethnic semiotics next level tousled fashion axe. Sustainable cardigan keytar fap bushwick bespoke.</p>
- </div>
- <span class="bl-icon bl-icon-close"></span>
- </section>
- <!-- Panel items for the works -->
-
<div class="bl-panel-items" id="bl-panel-work-items">
-
<div data-panel="panel-1">
- <video id="player" width="100%" height="100%" controls poster="vid/tele01.png">
- <source src="vid/tele01.mp4" type="video/mp4" />
- <source src="vid/tele01.webm" type="video/webm" />
- <source src="vid/tele01.ogv" type="video/ogg" />
- </video>
+ <div class="container">
+ <div id="bl-main" class="bl-main">
+ <section class="color01">
+ <div class="bl-box" >
+ <h2 >solution web tv<br>100%<br>mobile & portable</h2>
+ </div>
+ <div class="bl-content">
+ <h2 class="Tcolor10">mobile web tv</h2>
+ <p>This responsive layout is based on an initial grid of four boxes. Once a box is clicked, it gets resized to fullscreen and the other boxes scale down and fade out. In the work section we experiment with another transition which is to show a panel by making it appear from the bottom while scaling the current one down. To see it in action, open the work section and click on one of the portfolio items and navigate through them.</p>
+ <p>
+ <a href="../live-web-tv.html" target="_blank"><strong>en savoir plus</strong></a>
+ </p>
+ </div>
+ <span class="bl-icon bl-icon-close"></span>
+ </section>
+ <section class="color02">
+ <div class="bl-box">
+ <h2>solution e-learning<br>100%<br>mobile & portable</h2>
+ </div>
+ <div class="bl-content">
+ <h2>About this layout</h2>
+ <p>This responsive layout is based on an initial grid of four boxes. Once a box is clicked, it gets resized to fullscreen and the other boxes scale down and fade out. In the work section we experiment with another transition which is to show a panel by making it appear from the bottom while scaling the current one down. To see it in action, open the work section and click on one of the portfolio items and navigate through them.</p>
+ <p>
+ <a href="http://tympanus.net/Development/ResponsiveMultiLevelMenu/"><strong>« Previous Demo</strong></a> |
+ <a href="http://tympanus.net/codrops/?p=14783"><strong>Back to the Codrops Article</strong></a>
+ </p>
+ </div>
+ <span class="bl-icon bl-icon-close"></span>
+ </section>
+ <section class="color03">
+ <div class="bl-box">
+ <h2 >solution e-conference<br>100%<br>mobile & portable</h2>
+ </div>
+ <div class="bl-content">
+ <h2>About this layout</h2>
+ <p>This responsive layout is based on an initial grid of four boxes. Once a box is clicked, it gets resized to fullscreen and the other boxes scale down and fade out. In the work section we experiment with another transition which is to show a panel by making it appear from the bottom while scaling the current one down. To see it in action, open the work section and click on one of the portfolio items and navigate through them.</p>
+ <p>
+ <a href="http://tympanus.net/Development/ResponsiveMultiLevelMenu/"><strong>« Previous Demo</strong></a> |
+ <a href="http://tympanus.net/codrops/?p=14783"><strong>Back to the Codrops Article</strong></a>
+ </p>
+ </div>
+ <span class="bl-icon bl-icon-close"></span>
+ </section>
+ <section class="color04">
+ <div class="bl-box">
+ <h2>solution e-concert<br>100%<br>mobile & portable</h2>
+ </div>
+ <div class="bl-content">
+ <h2>Get in touch</h2>
+ <p>Pinterest semiotics single-origin coffee craft beer thundercats irony, tumblr bushwick intelligentsia pickled. Narwhal mustache godard master cleanse street art, occupy ugh selfies put a bird on it cray salvia four loko gluten-free shoreditch. Occupy american apparel freegan cliche. Mustache trust fund 8-bit jean shorts mumblecore thundercats. Pour-over small batch forage cray, banjo post-ironic flannel keffiyeh cred ethnic semiotics next level tousled fashion axe. Sustainable cardigan keytar fap bushwick bespoke.</p>
+ </div>
+ <span class="bl-icon bl-icon-close"></span>
+ </section>
+ <!-- Panel items for the works -->
+ <div class="bl-panel-items" id="bl-panel-work-items">
+ <div data-panel="panel-1">
+ <video id="player" width="100%" height="100%" controls poster="vid/tele01.png">
+ <source src="vid/tele01.mp4" type="video/mp4" />
+ <source src="vid/tele01.webm" type="video/webm" />
+ <source src="vid/tele01.ogv" type="video/ogg" />
+ </video>
- </div>
- <div data-panel="panel-2">
-
<img src="images/2.jpg" />
- <h3>Chillwave mustache</h3>
-
<p>Squid vinyl scenester literally pug, hashtag tofu try-hard typewriter polaroid craft beer mlkshk cardigan photo booth PBR. Chillwave 90's gentrify american apparel carles disrupt. Pinterest semiotics single-origin coffee craft beer thundercats irony, tumblr bushwick intelligentsia pickled. Narwhal mustache godard master cleanse street art, occupy ugh selfies put a bird on it cray salvia four loko gluten-free shoreditch.</p>
- </div>
- </div>
-
<div data-panel="panel-3">
-
<img src="images/3.jpg" />
- <h3>Austin hella</h3>
-
<p>Ethical cray wayfarers leggings vice, seitan banksy small batch ethnic master cleanse. Pug chillwave etsy, scenester meh occupy blue bottle tousled blog tonx pinterest selvage mixtape swag cosby sweater. Synth tousled direct trade, hella Austin craft beer ugh chambray.</p>
- </div>
- </div>
-
<div data-panel="panel-4">
-
<img src="images/4.jpg" />
- <h3>Brooklyn dreamcatcher</h3>
-
<p>Fashion axe 90's pug fap. Blog wayfarers brooklyn dreamcatcher, bicycle rights retro YOLO. Wes anderson lomo 90's food truck 3 wolf moon, twee jean shorts. Iphone small batch twee wolf yr before they sold out. Brooklyn echo park cred, portland pug selvage flannel seitan tousled mcsweeney's.</p>
- </div>
- </div>
- <nav>
- <span class="bl-next-work">> Next Project</span>
- <span class="bl-icon bl-icon-close"></span>
- </nav>
- </div>
- </div>
- </div><!-- /container -->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
- <script src="js/boxlayout.js"></script>
- <script>
- $(function() {
- Boxlayout.init();
- });
- </script>
- </body>
+ </div>
+ <div data-panel="panel-2">
+ <div>
+ <img src="images/2.jpg" />
+ <h3>Chillwave mustache</h3>
+ <p>Squid vinyl scenester literally pug, hashtag tofu try-hard typewriter polaroid craft beer mlkshk cardigan photo booth PBR. Chillwave 90's gentrify american apparel carles disrupt. Pinterest semiotics single-origin coffee craft beer thundercats irony, tumblr bushwick intelligentsia pickled. Narwhal mustache godard master cleanse street art, occupy ugh selfies put a bird on it cray salvia four loko gluten-free shoreditch.</p>
+ </div>
+ </div>
+ <div data-panel="panel-3">
+ <div>
+ <img src="images/3.jpg" />
+ <h3>Austin hella</h3>
+ <p>Ethical cray wayfarers leggings vice, seitan banksy small batch ethnic master cleanse. Pug chillwave etsy, scenester meh occupy blue bottle tousled blog tonx pinterest selvage mixtape swag cosby sweater. Synth tousled direct trade, hella Austin craft beer ugh chambray.</p>
+ </div>
+ </div>
+ <div data-panel="panel-4">
+ <div>
+ <img src="images/4.jpg" />
+ <h3>Brooklyn dreamcatcher</h3>
+ <p>Fashion axe 90's pug fap. Blog wayfarers brooklyn dreamcatcher, bicycle rights retro YOLO. Wes anderson lomo 90's food truck 3 wolf moon, twee jean shorts. Iphone small batch twee wolf yr before they sold out. Brooklyn echo park cred, portland pug selvage flannel seitan tousled mcsweeney's.</p>
+ </div>
+ </div>
+ <nav>
+ <span class="bl-next-work">> Next Project</span>
+ <span class="bl-icon bl-icon-close"></span>
+ </nav>
+ </div>
+ </div>
+ </div><!-- /container -->
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+ <script src="js/boxlayout.js"></script>
+ <script>
+ $(function() {
+ Boxlayout.init();
+ });
+ </script>
+ </body>
</html>
projects / telecasting-www.git / commitdiff