109 <h1><a title="Hashcut - Le Mashup cliquable" class="clearfix" href="#"> |
109 <h1><a title="Hashcut - Le Mashup cliquable" class="clearfix" href="#"> |
110 <img src="img/hashcut-logo.png" alt="Hashcut" /> |
110 <img src="img/hashcut-logo.png" alt="Hashcut" /> |
111 <span>Le Mashup<br />Cliquable</span> |
111 <span>Le Mashup<br />Cliquable</span> |
112 </a></h1> |
112 </a></h1> |
113 <div class="title-video-wrap"> |
113 <div class="title-video-wrap"> |
114 <a class="open-popin" href="#update-title">Hashcut sans titre</a> |
114 <a title="modifier" class="open-popin" href="#update-title">Hashcut sans titre</a> |
115 <p class="time-length">Durée: <span>02:24</span></p> |
115 <p class="time-length">Durée: <span>02:24</span></p> |
116 </div> |
116 </div> |
117 <div class="profil-wrap"> |
117 <div class="profil-wrap"> |
118 <a href="#" class="all-hashcut">Tous les Hashcuts</a> |
118 <a href="#" class="all-hashcut">Tous les Hashcuts</a> |
119 <a href="#user" class="my-profil open-popin">Mon profil</a> |
119 <a href="#user" class="my-profil open-popin">Mon profil</a> |
240 <div class="section" style="left:60%;width:20%;"></div> |
240 <div class="section" style="left:60%;width:20%;"></div> |
241 </div> |
241 </div> |
242 <div class="segment"> |
242 <div class="segment"> |
243 <div class="section" style="left:80%;width:10%;"></div> |
243 <div class="section" style="left:80%;width:10%;"></div> |
244 </div> |
244 </div> |
245 </div> |
245 </div><!-- segments --> |
246 </div> |
246 </div> |
247 </div><!-- bloc-segmentation --> |
247 </div><!-- bloc-segmentation --> |
248 |
248 |
249 <div class="bloc-pvw"> |
249 <div class="bloc-pvw"> |
250 |
250 |
251 <div class="frise clearfix"> |
251 <div class="frise clearfix"> |
252 |
252 |
253 <span class="indication" style="left:24%;">00:30</span> |
253 <div class="indications"> |
254 <span class="indication" style="left:44%;">00:30</span> |
254 <span class="indication" style="left:24%;">00:30</span> |
255 <span class="indication" style="left:64%;">00:30</span> |
255 <span class="indication" style="left:44%;">00:30</span> |
256 <span class="indication" style="left:84%;">00:30</span> |
256 <span class="indication" style="left:64%;">00:30</span> |
|
257 <span class="indication" style="left:84%;">00:30</span> |
|
258 </div> |
257 |
259 |
258 <div class="segments"> |
260 <div class="segments"> |
259 <div class="segment" style="background-color:red;width:20%;"></div> |
261 <div class="segment" style="background-color:red;left:0;width:20%;"></div> |
260 <div class="segment" style="background-color:green;width:20%;"></div> |
262 <div class="segment" style="background-color:green;left:20%;width:20%;"></div> |
261 <div class="segment" style="background-color:red;width:20%;"></div> |
263 <div class="segment" style="background-color:red;left:40%;width:20%;"></div> |
262 <div class="segment" style="background-color:green;width:20%;"></div> |
264 <div class="segment" style="background-color:green;left:60%;width:20%;"></div> |
263 <div class="segment" style="background-color:red;width:20%;"></div> |
265 <div class="segment" style="background-color:red;left:80%;width:20%;"></div> |
264 </div> |
266 </div> |
265 |
267 |
266 </div> |
268 </div> |
267 |
269 |
268 <div class="segment-info mashup-description"> |
270 <div class="segment-info mashup-description"> |
269 <img class="pointer" src="img/popin-triangle.png" alt="" /> |
271 <img class="pointer" src="img/popin-triangle.png" alt="" /> |
270 <div class="popin-content"> |
272 <div class="popin-content"> |
271 <ul class="tools"> |
273 <ul class="tools"> |
272 <li><a class="edit" href="#"></a></li> |
274 <li><a title="éditer" class="edit" href="#"></a></li> |
273 <li><a class="bottom" href="#"></a></li> |
275 <li><a title="descendre" class="bottom" href="#"></a></li> |
274 <li><a class="top" href="#"></a></li> |
276 <li><a title="remonter" class="top" href="#"></a></li> |
275 <li><a class="delete" href="#"></a></li> |
277 <li><a title="supprimer" class="delete" href="#"></a></li> |
276 </ul> |
278 </ul> |
277 |
279 |
278 <h2>Chargement de la capsule lunaire</h2> |
280 <h2>Chargement de la capsule lunaire</h2> |
279 <table> |
281 <table> |
280 <tbody> |
282 <tbody> |
300 |
302 |
301 <div class="col-right"> |
303 <div class="col-right"> |
302 <div class="liste-segment"> |
304 <div class="liste-segment"> |
303 <h2>Liste des segments</h2> |
305 <h2>Liste des segments</h2> |
304 <div class="frise clearfix"> |
306 <div class="frise clearfix"> |
305 |
307 <p class="aucun-segment">Aucun segment</p> |
306 <span class="indication" style="left:64%;">00:30</span> |
308 <div class="indications"> |
307 <span class="indication" style="left:84%;">00:30</span> |
309 <span class="indication" style="left:64%;">00:30</span> |
|
310 <span class="indication" style="left:84%;">00:30</span> |
|
311 </div> |
308 <div class="segments"> |
312 <div class="segments"> |
309 <div class="segment" style="background-color:red;width:20%;"></div> |
313 <div class="segment" style="background-color:red;left:0;width:20%;"></div> |
310 <div class="segment" style="background-color:yellow;width:20%;"></div> |
314 <div class="segment" style="background-color:yellow;left:20%;width:20%;"></div> |
311 <div class="segment" style="background-color:blue;width:20%;"></div> |
315 <div class="segment" style="background-color:blue;left:40%;width:20%;"></div> |
312 <div class="segment" style="background-color:green;width:20%;"></div> |
316 <div class="segment" style="background-color:green;left:60%;width:20%;"></div> |
313 <div class="segment" style="background-color:brown;width:20%;"></div> |
317 <div class="segment" style="background-color:brown;left:80%;width:20%;"></div> |
314 </div> |
318 </div> |
315 </div> |
319 </div> |
316 </div> |
320 </div> |
317 |
321 |
318 <ul class="list-video organize-segments"> |
322 <ul class="list-video organize-segments"> |
335 <span class="video-info"> |
339 <span class="video-info"> |
336 <span class="title-video">Voyage à la Lune 2</span> |
340 <span class="title-video">Voyage à la Lune 2</span> |
337 <span class="subtitle">Chargement de la Capsule</span> |
341 <span class="subtitle">Chargement de la Capsule</span> |
338 <span class="duration">01:17 - 02:01 (00:44)</span> |
342 <span class="duration">01:17 - 02:01 (00:44)</span> |
339 <ul class="tools"> |
343 <ul class="tools"> |
340 <li><a class="edit" href="#"></a></li> |
344 <li><a title="éditer" class="edit" href="#"></a></li> |
341 <li><a class="bottom" href="#"></a></li> |
345 <li><a title="descendre" class="bottom" href="#"></a></li> |
342 <li><a class="top" href="#"></a></li> |
346 <li><a title="remonter" class="top" href="#"></a></li> |
343 <li><a class="delete" href="#"></a></li> |
347 <li><a title="supprimer" class="delete" href="#"></a></li> |
344 </ul> |
348 </ul> |
345 </span> |
349 </span> |
346 </li><!-- item-video --> |
350 </li><!-- item-video --> |
347 <li class="item-video"> |
351 <li class="item-video"> |
348 <img src="img/apercu-video.jpg" alt="aperçu" /> |
352 <img src="img/apercu-video.jpg" alt="aperçu" /> |
349 <span class="video-info"> |
353 <span class="video-info"> |
350 <span class="title-video">Voyage à la Lune 3</span> |
354 <span class="title-video">Voyage à la Lune 3</span> |
351 <span class="subtitle">Chargement de la Capsule</span> |
355 <span class="subtitle">Chargement de la Capsule</span> |
352 <span class="duration">01:17 - 02:01 (00:44)</span> |
356 <span class="duration">01:17 - 02:01 (00:44)</span> |
353 <ul class="tools"> |
357 <ul class="tools"> |
354 <li><a class="edit" href="#"></a></li> |
358 <li><a title="éditer" class="edit" href="#"></a></li> |
355 <li><a class="bottom" href="#"></a></li> |
359 <li><a title="descendre" class="bottom" href="#"></a></li> |
356 <li><a class="top" href="#"></a></li> |
360 <li><a title="remonter" class="top" href="#"></a></li> |
357 <li><a class="delete" href="#"></a></li> |
361 <li><a title="supprimer" class="delete" href="#"></a></li> |
358 </ul> |
362 </ul> |
359 </span> |
363 </span> |
360 </li><!-- item-video --> |
364 </li><!-- item-video --> |
361 |
365 |
362 </ul> |
366 </ul> |