<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>The End - @todo</title>
<meta name="description" content="@todo">
<!-- Mobile Specific Metas -->
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" href="static/res/css/style_1024.css" />
<!-- stylesheet for ipad 3
<link rel="stylesheet" href="static/res/css/style_2048.css" />
-->
</head>
<body>
<!-- div content - site takes the full height of browser -->
<div id="content">
<!-- div content_top - the elements takes the full height of "content_top" -->
<div id="content_top">
<!-- change with js: height and line-height (the same size) of "container_vcentering" -->
<header id="top" class="container_vcentering box_transparance">
<div id="title_hp" class="box_vcentering">
<h2>UNE EXPÉRIENCE DE CINÉMA</h2>
<h1>THE END, ETC.</h1>
<h2 class="h2_exeption">DE LAETITIA MASSON</h2>
</div>
</header>
<section id="main">
<canvas id="mosaic" width="100" height="100"></canvas>
</section>
<!-- change with js: height and line-height (the same size) of "container_vcentering" -->
<section id="bottom" class="container_vcentering box_transparance">
<div class="box_vcentering">
<p class="big_link"><a onClick="fadeAndNext();">COMPOSEZ VOTRE FILM</a></p>
</div>
</section>
</div>
<!-- /div content_top -->
<footer id="footer" class="box_transparance">
<ul id="logo_partners" class="floatL">
<li>UNE CO-PRODUCTION
<ul>
<li>
<a href="http://www.francetv.fr/nouvelles-ecritures" target="_blank">
<img alt="Nouvelles écritures" src="static/res/img/footer/francetv.png" />
</a>
</li>
<li>
<a href="http://www.memoprod.fr" target="_blank">
<img alt="Memo prod." src="static/res/img/footer/memoprod.png" />
</a>
</li>
</ul>
</li><!--
--><li>AVEC LE SOUTIEN DE
<ul>
<li>
<a href="http://www.cnc.fr" target="_blank">
<img alt="CNC" src="static/res/img/footer/cnc.png" />
</a>
</li>
<li>
<a href="http://www.incandescence.com" target="_blank">
<img alt="Incandescence" src="static/res/img/footer/inc.png" />
</a>
</li>
<li>
<a href="http://www.iri.centrepompidou.fr" target="_blank">
<img alt="iri Centre Pompidou" src="static/res/img/footer/iri.png" />
</a>
</li>
</ul>
</li>
</ul>
<ul id="socialMedia" class="floatR">
<li><a href="/">Mentions légales</a></li>
<li><a href="/" target="_blank"><img alt="Partager The End sur Facebook" src="static/res/img/footer/facebook.png" width ="50"/></a></li>
<li><a href="/" target="_blank"><img alt="Partager The End sur Twitter" src="static/res/img/footer/twitter.png"/></a></li>
</ul>
</footer>
</div>
<!-- Metanav FranceTV -->
<script src="http://static.francetv.fr/js/jquery.metanav-min.js" charset="utf-8"></script>
<!-- JavaScript -->
<script src="static/res/js/jquery-1.8.2.min.js"></script>
<script src="static/res/js/ease.js"></script>
<script src="static/res/js/incresize.js"></script>
<script src="static/res/js/incmosaic.js"></script>
<script>
$(function() {
// Init the resize object
incResize.init("content", "top", "mosaic", "bottom", "footer", 130, 1800/750, null, incMosaic.registerPostNewCanvasSize);
// Set mosaic pair of images
incMosaic.addImageUrl("static/res/img/accueil-00.jpg");
incMosaic.addImageUrl("static/res/img/accueil-01.jpg");
incMosaic.addImageUrl("static/res/img/accueil-02.jpg");
incMosaic.addImageUrl("static/res/img/accueil-03.jpg");
incMosaic.addImageUrl("static/res/img/accueil-04.jpg");
incMosaic.addImageUrl("static/res/img/accueil-05.jpg");
// Start mosaic effect
incMosaic.start("mosaic", 1, 9, 5, true, false, null);
});
var cliked = false;
var fadeAndNext = function() {
if (cliked) {
return;
}
cliked = true;
var time = 4000;
// Fade on elements
$('.box_transparance').animate({opacity: 0}, time - 100);
setTimeout(function() {
location.href = "prologue.html";
}, time);
}
</script>
</body>
</html>