13 <script src="js/vendor/modernizr-2.6.1.min.js"></script> |
13 <script src="js/vendor/modernizr-2.6.1.min.js"></script> |
14 </head> |
14 </head> |
15 <body> |
15 <body> |
16 <div class="wrap"> |
16 <div class="wrap"> |
17 <div class="wrap-header"> |
17 <div class="wrap-header"> |
18 <a title="Bibliothèque centre Pompidou" href="#"><img src="img/pompidou-logo.jpg" alt="Bibliothèque centre Pompidou" /></a> |
18 <a title="Bibliothèque centre Pompidou" href="#"><img src="img/pompidou-logo.png" alt="Bibliothèque centre Pompidou" /></a> |
19 </div> |
19 </div> |
20 <div class="header"> |
20 <div class="header"> |
21 <!-- popin header --> |
21 <!-- popin header --> |
22 <div class="popin update-title" id="update-title"> |
22 <div class="popin update-title" id="update-title"> |
23 <img class="pointer" src="img/popin-triangle.png" alt="" /> |
23 <img class="pointer" src="img/popin-triangle.png" alt="" /> |
70 </p> |
70 </p> |
71 <p> |
71 <p> |
72 <label for="signup-password">Confirmer le mot de passe : </label> |
72 <label for="signup-password">Confirmer le mot de passe : </label> |
73 <input type="password" id="signup-password" name="" /> |
73 <input type="password" id="signup-password" name="" /> |
74 </p> |
74 </p> |
|
75 <p> |
|
76 <input type="submit" value="Créer le compte"> |
|
77 </p> |
75 </form> |
78 </form> |
76 |
79 |
77 </div> |
80 </div> |
78 </div><!-- popin user signup--> |
81 </div><!-- popin user signup--> |
79 |
82 |
|
83 <div class="popin user login" id="user"> |
|
84 <img class="pointer" src="img/popin-triangle.png" alt="" /> |
|
85 <div class="popin-content"> |
|
86 <h2>Connexion :</h2> |
|
87 <form action="#"> |
|
88 <p> |
|
89 <label for="signup-pseudo">E-mail : </label> |
|
90 <input type="text" id="signup-pseudo" name="" /> |
|
91 </p> |
|
92 <p > |
|
93 <label for="signup-email">Mot de passe : </label> |
|
94 <input type="password" id="signup-email" name="" /> |
|
95 </p> |
|
96 <p> |
|
97 <input type="submit" value="Se connecter"> |
|
98 </p> |
|
99 <p> |
|
100 <a class="signup-button" href="#">Créer un compte</a> |
|
101 </p> |
|
102 </form> |
|
103 |
|
104 </div> |
|
105 </div><!-- popin user login--> |
|
106 |
80 <h1><a title="Hashcut - Le Mashup cliquable" class="clearfix" href="#"> |
107 <h1><a title="Hashcut - Le Mashup cliquable" class="clearfix" href="#"> |
81 <img src="img/hashcut-logo.jpg" alt="Hashcut" /> |
108 <img src="img/hashcut-logo.png" alt="Hashcut" /> |
82 <span>Le Mashup<br />Cliquable</span> |
109 <span>Le Mashup<br />Cliquable</span> |
83 </a></h1> |
110 </a></h1> |
84 <div class="title-video-wrap"> |
111 <div class="title-video-wrap"> |
85 <a class="open-popin" href="#update-title">Hashcut sans titre</a> |
112 <a class="open-popin" href="#update-title">Hashcut sans titre</a> |
86 <p class="time-length">Durée: <span>02:24</span></p> |
113 <p class="time-length">Durée: <span>02:24</span></p> |
135 </li><!-- item-video --> |
162 </li><!-- item-video --> |
136 </ul> |
163 </ul> |
137 </div><!-- col-left --> |
164 </div><!-- col-left --> |
138 |
165 |
139 <div class="col-middle"> |
166 <div class="col-middle"> |
|
167 <div class="bloc-segmentation"> |
|
168 <div class="col-middle-header disable"> |
|
169 <a href="#" class="segmenter ">Segmenter <em>La cuisine du Popcorn</em></a> |
|
170 <a href="#" class="previsualiser disable">Prévisualiser</a> |
|
171 </div> |
|
172 <div class="video"> |
|
173 <a class="publier-button" title="Publier" href="#"></a> |
|
174 <img src="img/visuel-player.png" alt="" /> |
|
175 </div> |
|
176 <div class="segment"> |
|
177 <img src="img/visuel-segment.png" alt=""> |
|
178 </div> |
|
179 <div class="popin segmentation" id=""> |
|
180 <img class="pointer" src="img/popin-triangle.png" alt="" /> |
|
181 <div class="popin-content"> |
|
182 <h2>Créer un nouveau segment de <span>02:27</span> à <span>02:27</span> (durée: <span>02:27</span>)</h2> |
|
183 <form action="#"> |
|
184 <div class="form-segment-left"> |
|
185 <p> |
|
186 <label for="titre">Titre :</label> |
|
187 <input type="text" id="titre" /> |
|
188 </p> |
|
189 <p> |
|
190 <label for="tags">Tags :</label> |
|
191 <input type="text" id="tags" /> |
|
192 </p> |
|
193 </div> |
|
194 <div class="form-segment-right"> |
|
195 <p> |
|
196 <label for="description">Description :</label> |
|
197 <textarea id="description"></textarea> |
|
198 </p> |
|
199 <p> |
|
200 <input type="submit" value="Ajouter au Hashcut" /> |
|
201 </p> |
|
202 </div> |
|
203 |
|
204 </form> |
|
205 </div> |
|
206 </div><!-- popin segmentation --> |
|
207 |
|
208 <div class="existant"> |
|
209 <h2>Segments existants :</h2> |
|
210 <div class="segments"> |
|
211 <div class="segment"> |
|
212 <div class="section" style="left:0%;width:20%;"></div> |
|
213 <div class="popin segment-section" id=""> |
|
214 <img style="left:20px;" class="pointer" src="img/popin-triangle.png" alt="" /> |
|
215 <div class="popin-content clearfix"> |
|
216 <div class="instant-description"> |
|
217 <h2>Le moment crucial où le maïs explose</h2> |
|
218 <p>De: <span>00:43</span> à <span>01:20</span> (durée: <span>00:37</span>)</p> |
|
219 </div> |
|
220 <a href="#" class="reprendre-segment">Reprendre le segment</a> |
|
221 </div> |
|
222 </div><!-- popin segment-section --> |
|
223 </div> |
|
224 <div class="segment"> |
|
225 <div class="section" style="left:20%;width:20%;"></div> |
|
226 </div> |
|
227 <div class="segment"> |
|
228 <div class="section" style="left:60%;width:20%;"></div> |
|
229 </div> |
|
230 <div class="segment"> |
|
231 <div class="section" style="left:80%;width:10%;"></div> |
|
232 </div> |
|
233 </div> |
|
234 </div> |
|
235 </div><!-- bloc-segmentation --> |
140 |
236 |
141 <div class="bloc-pvw"> |
237 <div class="bloc-pvw"> |
142 <div class="col-middle-header"> |
238 <div class="col-middle-header"> |
143 <a href="#" class="segmenter">Segmenter <em>La cuisine du Popcorn</em></a> |
239 <a href="#" class="segmenter">Segmenter <em>La cuisine du Popcorn</em></a> |
144 <a href="#" class="previsualiser">Prévisualiser</a> |
240 <a href="#" class="previsualiser">Prévisualiser</a> |
275 <ul class="links-left"> |
371 <ul class="links-left"> |
276 <li><a href="#">Mentions légales</a></li> |
372 <li><a href="#">Mentions légales</a></li> |
277 <li><a href="#">Contacts</a></li> |
373 <li><a href="#">Contacts</a></li> |
278 </ul> |
374 </ul> |
279 <ul class="links-right"> |
375 <ul class="links-right"> |
280 <li><a title="IRI" href="#"> <img src="img/logo-iri.png" alt="iri" /></a></li> |
376 <li><a title="IRI" href="http://www.iri.centrepompidou.fr/"> <img src="img/logo-iri.png" alt="iri" /></a></li> |
281 <li><a title="cinecast" href="#"><img src="img/logo-cinecast.png" alt="cinecast" /></a></li> |
377 <li><a title="cinecast" href="http://cinecast.fr/"><img src="img/logo-cinecast.png" alt="cinecast" /></a></li> |
282 <li>© 2012</li> |
378 <li>© 2012</li> |
283 </ul> |
379 </ul> |
284 </div> |
380 </div> |
285 </div> |
381 </div> |
286 <!-- JavaScript --> |
382 <!-- JavaScript --> |