--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/web/erreur404.html Fri Jan 25 18:20:49 2013 +0100
@@ -0,0 +1,63 @@
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
+ <head>
+ <title>THE END, ETC. UNE EXPÉRIENCE WEB DE LAETITIA MASSON</title>
+
+ <meta name="description" content="MEMO PROD présente THE END, ETC. Une coproduction FRANCE TÉLÉVISIONS - MEMO PROD avec la participation du CENTRE NATIONAL DU CINÉMA ET DE L’IMAGE ANIMÉE. Un projet écrit et réalisé par LAETITIA MASSON" />
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <meta http-equiv="Content-Language" content="fr" />
+
+ <link href="static/res/img/favicon.ico" rel="icon" type="image/x-icon"/>
+ <link href="static/res/css/style_base.css" rel="stylesheet" type="text/css" />
+
+ </head>
+ <body>
+ <!-- div content - site takes the full height of browser -->
+ <div id="content">
+
+ <div id="top">
+ <div id="title_hp">
+ <h1>UNE EXPÉRIENCE DE CINÉMA THE END, ETC. DE LAETITIA MASSON</h1>
+ </div>
+ </div>
+
+ <div id="middle" class="txt">
+ <p class="big_link">La page demandée n'existe plus. <a href="index.html">Retourner à la page d'accueil.</a></p>
+ </div>
+
+ <div id="footer" class="clearfix">
+ <ul class="logo_partners margin_ulRight">
+ <li>UNE CO-PRODUCTION</li>
+
+ <li id="nouvelles" class="floatL">
+ <a href="http://www.francetv.fr/nouvelles-ecritures" target="_blank">Nouvelles ecritures</a>
+ </li>
+ <li id="memoprod" class="floatL margin_logoLeft">
+ <a href="http://www.memoprod.fr" target="_blank">Memo prod.</a>
+ </li>
+ </ul>
+ <ul class="logo_partners margin_ulRight">
+ <li>AVEC LE SOUTIEN DE</li>
+
+ <li id="cnc" class="floatL">
+ <a href="http://www.cnc.fr" target="_blank">CNC</a>
+ </li>
+ <li id="incandescence" class="floatL margin_logoLeft">
+ <a href="http://www.incandescence.com" target="_blank">Incandescence</a>
+ </li>
+ <li id="iri" class="floatL margin_logoLeft">
+ <a href="http://www.iri.centrepompidou.fr" target="_blank">IRI</a>
+ </li>
+ </ul>
+
+ <ul class="logo_partners">
+ <li>EN PARTENARIAT AVEC</li>
+ <li id="franceinter">
+ <a href="http://www.franceinter.fr/" target="_blank">France Inter</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </body>
+</html>
\ No newline at end of file
--- a/web/non-supporte.html Fri Jan 25 11:34:50 2013 +0100
+++ b/web/non-supporte.html Fri Jan 25 18:20:49 2013 +0100
@@ -1,94 +1,63 @@
-<!DOCTYPE html>
-<html lang="fr">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
- <meta charset="UTF-8">
- <title>THE END, ETC. UNE EXPÉRIENCE WEB DE LAETITIA MASSON</title>
-
- <meta name="description" content="MEMO PROD présente THE END, ETC. Une coproduction FRANCE TÉLÉVISIONS - MEMO PROD avec la participation du CENTRE NATIONAL DU CINÉMA ET DE L’IMAGE ANIMÉE. Un projet écrit et réalisé par LAETITIA MASSON">
+ <title>THE END, ETC. UNE EXPÉRIENCE WEB DE LAETITIA MASSON</title>
- <link rel="icon" href="static/res/img/favicon.ico" />
-
- <!-- Mobile Specific Metas -->
- <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
-
-
- <link rel="stylesheet" href="static/res/css/style_nonsupporte.css" />
- <!--[if lte IE 7]>
- <style>
- #footer li a {
- zoom: 1;
- display: inline;
- }
- </style>
- <![endif]-->
+ <meta name="description" content="MEMO PROD présente THE END, ETC. Une coproduction FRANCE TÉLÉVISIONS - MEMO PROD avec la participation du CENTRE NATIONAL DU CINÉMA ET DE L’IMAGE ANIMÉE. Un projet écrit et réalisé par LAETITIA MASSON" />
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <meta http-equiv="Content-Language" content="fr" />
+
+ <link href="static/res/img/favicon.ico" rel="icon" type="image/x-icon"/>
+ <link href="static/res/css/style_base.css" rel="stylesheet" type="text/css" />
</head>
- <body id="mobilhp">
+ <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">
- <div id="top">
- <div id="title_hp">
- <h1>UNE EXPÉRIENCE DE CINÉMA THE END, ETC. DE LAETITIA MASSON</h1>
- </div>
- </div>
+ <div id="top">
+ <div id="title_hp">
+ <h1>UNE EXPÉRIENCE DE CINÉMA THE END, ETC. DE LAETITIA MASSON</h1>
+ </div>
+ </div>
- <div id="middle" >
- <div class="fullScreen_vcentering">
- <p class="big_link">Pour composer votre film, rendez-vous sur une tablette ou mettez à jour votre navigateur internet pour disposer de la dernière version.</p>
- </div>
- </div>
+ <div id="middle" >
+ <p class="big_link">Pour composer votre film, rendez-vous sur une tablette ou mettez à jour votre navigateur internet pour disposer de la dernière version.</p>
</div>
- <!-- /div content_top -->
<div id="footer" class="clearfix">
- <ul class="logo_partners 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>
+ <ul class="logo_partners margin_ulRight">
+ <li>UNE CO-PRODUCTION</li>
+
+ <li id="nouvelles" class="floatL">
+ <a href="http://www.francetv.fr/nouvelles-ecritures" target="_blank">Nouvelles ecritures</a>
+ </li>
+ <li id="memoprod" class="floatL margin_logoLeft">
+ <a href="http://www.memoprod.fr" target="_blank">Memo prod.</a>
+ </li>
+ </ul>
+ <ul class="logo_partners margin_ulRight">
+ <li>AVEC LE SOUTIEN DE</li>
+
+ <li id="cnc" class="floatL">
+ <a href="http://www.cnc.fr" target="_blank">CNC</a>
+ </li>
+ <li id="incandescence" class="floatL margin_logoLeft">
+ <a href="http://www.incandescence.com" target="_blank">Incandescence</a>
+ </li>
+ <li id="iri" class="floatL margin_logoLeft">
+ <a href="http://www.iri.centrepompidou.fr" target="_blank">IRI</a>
</li>
</ul>
- <ul class="logo_partners floatL">
- <li>EN PARTENARIAT AVEC
- <ul>
- <li class="txt_hidden logo_bg">
- <a href="http://www.franceinter.fr/" target="_blank">www.franceinter.fr</a>
- </li>
- </ul>
+
+ <ul class="logo_partners">
+ <li>EN PARTENARIAT AVEC</li>
+ <li id="franceinter">
+ <a href="http://www.franceinter.fr/" target="_blank">France Inter</a>
</li>
</ul>
</div>
+ </div>
</body>
</html>
\ No newline at end of file
--- a/web/static/res/css/style_1024.css Fri Jan 25 11:34:50 2013 +0100
+++ b/web/static/res/css/style_1024.css Fri Jan 25 18:20:49 2013 +0100
@@ -289,7 +289,6 @@
#content .header_txt p {
/*font-family: "Arial Bold", "arialbold", sans-serif;*/
}
-
/*----------------------------------------------*/
/* site takes all the space of the browser */
/*----------------------------------------------*/
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/web/static/res/css/style_base.css Fri Jan 25 18:20:49 2013 +0100
@@ -0,0 +1,207 @@
+/*----------------------------------------------*/
+/* Summary */
+/*----------------------------------------------*/
+
+/* 1- Mentions */
+/* 2- Reset */
+/* 3- HP */
+
+/*----------------------------------------------*/
+/* 1- Mentions */
+/*----------------------------------------------*/
+
+/* @client : The End */
+/* @date : octobre 2012 */
+
+/*----------------------------------------------*/
+/* 2- Reset */
+/*----------------------------------------------*/
+html,body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,button,textarea,select,figure,p,blockquote,th,td {
+ margin:0;
+ padding:0;
+}
+html {
+ font-size: 100%;
+}
+h1,h2,h3,h4,h5,h6 {
+ font-size: 100%;
+ font-weight: normal;
+ font-style: normal;
+}
+a,
+a:link,
+a:visited,
+a:active,
+a:hover,
+a:focus {
+ text-decoration: none;
+}
+li {
+ list-style: none;
+}
+img, table, td, blockquote, code, pre, textarea, input, object {
+ max-width: 100%;
+}
+.floatL {
+ float: left;
+}
+.floatR {
+ float: right;
+}
+/*----------------------------------------------*/
+/* 3- HP */
+/*----------------------------------------------*/
+
+body {
+ font-size: 1em;
+ line-height: 1.2;
+ background-color: #000000;
+}
+html, body {
+ height: 100%;
+ width: 100%;
+}
+a,
+a:link,
+a:visited,
+a:active {
+ color: #ffffff;
+}
+a:hover,
+a:focus {
+ color: #bfbfbf;
+}
+.clearfix:after {
+ clear: both;
+ visibility: hidden;
+ display: block;
+ font-size: 0;
+ content: " ";
+ height: 0;
+ }
+/* For IE 6/7 only. Include this rule to trigger hasLayout and contain floats */
+.clearfix {
+ *zoom: 1;
+}
+#content {
+ margin: 0 auto;
+ width: 80%;
+}
+#top {
+ margin: 40px 0;
+}
+#middle {
+ margin: 60px 0;
+}
+#footer {
+ margin: 40px 0;
+}
+#content p {
+ margin: 1em 0;
+ font-family: Arial, "arialregular", Helvetica, sans-serif;
+ font-size: 14px;
+ color: #ffffff;
+}
+#title_hp h1 {
+ margin: auto;
+ width: 422px;
+ height: 114px;
+ background-image: url("../img/hp_title.jpg");
+ overflow: hidden;
+ text-indent: -9999px;
+}
+ #content .big_link {
+ margin: 14px 0 16px 0;
+ font-family: "Arial Bold", "arialbold", sans-serif;
+ font-weight: bold;
+ font-size: 21px;
+ text-align: left;
+ text-transform: uppercase;
+}
+#content .txt p{
+ margin: 0.5em 0;
+ text-align: center;
+
+}
+#footer ul {
+ margin: 0;
+ padding: 0;
+ float: left;
+ list-style: 0;
+ font-family: Arial, "arialregular", Helvetica, sans-serif;
+ font-size: 9px;
+ color: #b9b9b9;
+ text-transform: uppercase;
+}
+#footer ul.margin_ulRight{
+ margin-right: 22px;
+}
+#footer li {
+ list-style: none;
+ margin-bottom: 10px;
+}
+#footer li.margin_logoLeft {
+ margin-left: 10px;
+}
+
+#footer li a {
+ display: block;
+ text-decoration: none;
+ text-indent: -9999px;
+ height: 28px;
+ line-height: 28px;
+ width: 40px;
+}
+#footer .logo_partners li a{
+ background-image: url(../img/footerlogo.jpg);
+ cursor: pointer;
+}
+#footer li#nouvelles a{
+ background-position: 0 0;
+ width: 39px;
+ height: 28px;
+}
+#footer li#nouvelles a:hover,
+#footer li#nouvelles a:focus {
+ background-position: 0 -28px;
+}
+#footer li#memoprod a{
+ background-position: -40px 0;
+ width: 40px;
+}
+#footer li#memoprod a:hover,
+#footer li#memoprod a:focus {
+ background-position: -40px -28px;
+}
+#footer li#cnc a{
+ background-position: -81px 0;
+ width: 42px;
+}
+#footer li#cnc a:hover,
+#footer li#cnc a:focus {
+ background-position: -81px -28px;
+}
+#footer li#incandescence a{
+ background-position: -124px 0;
+ width: 62px;
+}
+#footer li#incandescence a:hover,
+#footer li#incandescence a:focus {
+ background-position: -124px -28px;
+}
+#footer li#iri a{
+ background-position: -187px 0;
+ width: 56px;
+}
+#footer li#iri a:hover,
+#footer li#iri a:focus {
+ background-position: -187px -28px;
+}
+#footer li#franceinter a{
+ background-position: -244px 0;
+ width: 28px;
+}
+#footer li#franceinter a:hover,
+#footer li#franceinter a:focus {
+ background-position: -244px -28px;
+}
--- a/web/static/res/css/style_nonsupporte.css Fri Jan 25 11:34:50 2013 +0100
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,111 +0,0 @@
-/*----------------------------------------------*/
-/* Summary */
-/*----------------------------------------------*/
-
-/* 1- Mentions */
-/* 2- Reset */
-/* 3- Base styles */
-/* 4- HP */
-
-/*----------------------------------------------*/
-/* 1- Mentions */
-/*----------------------------------------------*/
-
-/* @client : The End */
-/* @date : octobre 2012 */
-
-/*----------------------------------------------*/
-/* 2- Reset */
-/*----------------------------------------------*/
-html,body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,button,textarea,select,figure,p,blockquote,th,td {
- margin:0;
- padding:0;
-}
-html {
- font-size: 100%;
-}
-h1,h2,h3,h4,h5,h6 {
- font-size: 100%;
- font-weight: normal;
- font-style: normal;
-}
-a,
-a:link,
-a:visited,
-a:active,
-a:hover,
-a:focus {
- text-decoration: none;
-}
-li {
- list-style: none;
-}
-img, table, td, blockquote, code, pre, textarea, input, object {
- max-width: 100%;
-}
-/*----------------------------------------------*/
-/* 3- Base styles */
-/*----------------------------------------------*/
-html {
- overflow: hidden;
-}
-body {
- font-size: 1em;
- line-height: 1;
- background-color: #000000;
-}
-html, body {
- height: 100%;
- width: 100%;
-}
-#content {
- margin: 0 auto;
- width: 80%;
-}
-#top {
- margin: 40px 0;
-}
-#middle {
- margin: 40px 0;
-}
-#footer {
- margin: 40px 0;
-}
-#content p {
- margin: 1em 0;
- font-family: Arial, "arialregular", Helvetica, sans-serif;
- font-size: 14px;
- color: #ffffff;
-}
-#title_hp h1 {
- margin: auto;
- width: 422px;
- height: 114px;
- background-image: url("../img/hp_title.jpg");
- overflow: hidden;
- text-indent: -9999px;
-}
- #content .big_link {
- margin: 14px 0 16px 0;
- font-family: "Arial Bold", "arialbold", sans-serif;
- font-weight: bold;
- font-size: 21px;
- text-align: left;
- text-transform: uppercase;
-}
-#footer ul {
- margin: 0;
- font-family: Arial, "arialregular", Helvetica, sans-serif;
- font-size: 9px;
- color: #b9b9b9;
- text-transform: uppercase;
-}
-#footer li {
- display: inline;
- list-style: none;
-}
-#footer li a {
- display: inline-block;
- text-decoration: none;
-}
-
Binary file web/static/res/img/choixMusique2.jpg has changed
Binary file web/static/res/img/choixMusique6.jpg has changed
Binary file web/static/res/img/footerlogo.jpg has changed
--- a/web/transition-the-end-etc.html Fri Jan 25 11:34:50 2013 +0100
+++ b/web/transition-the-end-etc.html Fri Jan 25 18:20:49 2013 +0100
@@ -55,7 +55,7 @@
<p><a href="partage-du-film-aleatoire-the-end-etc.html">Partagez</a></p>
<p><a href="choix-de-mots-the-end-etc.html">Recommencez</a></p>
<p class="margin_exeptionTop"><a href="the-end-etc.html">The end, etc.</a></p>
- <p class="margin_exeptionBottom"><a href="theend/prolonger">Prolongez l'expérience</a></p>
+ <p class="margin_exeptionBottom"><a href="experience-the-end-etc.html">Prolongez l'expérience</a></p>
<p><a href="credits-the-end-etc.html">Crédits</a></p>
</div>
</div>
