crea/inte-crea/home.html
author hamidouk
Thu, 02 Feb 2012 16:12:17 +0100
changeset 512 6977273dac24
parent 450 29f990eb0144
permissions -rw-r--r--
enabled the minified version of the ldtplayer.

<!doctype html>
<html lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>Plateforme LDT : Home</title>
    <link rel="stylesheet" href="css/ldt-commun.css" type="text/css" />
    <link rel="stylesheet" href="css/ldt-home.css" type="text/css" />
</head>
<body>

    <div id="general_container">

<!-- BARRE DE TITRE COMMUNE -->

        <ul class="floatlist" id="title_bar">
            <li id="li_h1">
                <h1><a href="#"><b>Lignes</b> de temps</a></h1>
            </li>
            <li id="li_search">
                <form id="form_search">
                    <input id="search_text" name="q" value="" />
                    <input id="search_submit" type="submit" value="Rechercher" />
                </form>
            <li id="li_annotation">
                <div class="fl">
                    <a href="#"><img src="img/annot_icon.png" id="annot_icon" /></a>
                </div>
                <div class="fl">
                    <a href="#">Annoter</a>
                </div>
            </li>
            <li id="li_connexion">
                <a href="#">Connexion</a>
            </li>
        </ul>

<!-- DERNIERS MEDIAS -->

        <ul class="floatlist full_width" id="derniers_medias">
            <li class="li_h2">
                <h2>Derniers médias</h2>
            </li>
            <li class="li_media">
                <a href="#"><img class="img_media" src="img/placeholder_16_9.jpg" width="294" height="165" /></a>
                <div class="bulle_annot">250</div>
                <p><a href="#"><b>ENMI 2011 - La confiance : Bernard Stiegler</b></a></p>
                <p>par <a class="under" href="#">IRI</a> | 1h30</p>
            </li>
            <li class="li_media">
                <a href="#"><img class="img_media" src="img/placeholder_16_9.jpg" width="294" height="165" /></a>
                <div class="bulle_annot">250</div>
                <p><a href="#"><b>ENMI 2011 - La confiance : Bernard Stiegler</b></a></p>
                <p>par <a class="under" href="#">IRI</a> | 1h30</p>
            </li>
            <li class="li_media">
                <a href="#"><img class="img_media" src="img/placeholder_16_9.jpg" width="294" height="165" /></a>
                <div class="bulle_annot">250</div>
                <p><a href="#"><b>ENMI 2011 - La confiance : Bernard Stiegler</b></a></p>
                <p>par <a class="under" href="#">IRI</a> | 1h30</p>
            </li>
        </ul>
        
<!-- MEDIAS LES PLUS ANNOTÉS -->

        <ul class="floatlist" id="plus_annotes">
            <li class="li_h2">
                <h2>Médias les plus annotés</h2>
            </li>
            <li class="li_media">
                <a class="img_and_polemic" href="#"><img class="img_media" src="img/placeholder_16_9.jpg" width="134" height="75" />
                <ul class="polemics">
                    <li class="pol-negative" style="width:17%">17%</li>
                    <li class="pol-positive" style="width:80%">80%</li>
                    <li class="pol-reference" style="width:33%">33%</li>
                    <li class="pol-question" style="width:33%">33%</li>
                </ul></a>
                <div class="bulle_annot">120</div>
                <p><a href="#"><b>Lorem Ipsum</b></a></p>
                <p class="font_11">par <a class="under" href="#">Ars Industrialis</a> | 1h30</p>
            </li>
            <li class="li_media">
                <a href="#"><img class="img_media" src="img/placeholder_16_9.jpg" width="134" height="75" /></a>
                <div class="bulle_annot">120</div>
                <p><a href="#"><b>Lorem Ipsum</b></a></p>
                <p class="font_11">par <a class="under" href="#">Ars Industrialis</a> | 1h30</p>
            </li>
            <li class="li_media">
                <a href="#"><img class="img_media" src="img/placeholder_16_9.jpg" width="134" height="75" /></a>
                <div class="bulle_annot">120</div>
                <p><a href="#"><b>Lorem Ipsum</b></a></p>
                <p class="font_11">par <a class="under" href="#">Ars Industrialis</a> | 1h30</p>
            </li>
            <li class="li_media">
                <a href="#"><img class="img_media" src="img/placeholder_16_9.jpg" width="134" height="75" /></a>
                <div class="bulle_annot">120</div>
                <p><a href="#"><b>Lorem Ipsum</b></a></p>
                <p class="font_11">par <a class="under" href="#">Ars Industrialis</a> | 1h30</p>
            </li>
            <li class="li_media">
                <a href="#"><img class="img_media" src="img/placeholder_16_9.jpg" width="134" height="75" /></a>
                <div class="bulle_annot">120</div>
                <p><a href="#"><b>Lorem Ipsum</b></a></p>
                <p class="font_11">par <a class="under" href="#">Ars Industrialis</a> | 1h30</p>
            </li>
            <li class="li_media">
                <a href="#"><img class="img_media" src="img/placeholder_16_9.jpg" width="134" height="75" /></a>
                <div class="bulle_annot">120</div>
                <p><a href="#"><b>Lorem Ipsum</b></a></p>
                <p class="font_11">par <a class="under" href="#">Ars Industrialis</a> | 1h30</p>
            </li>
            <li class="li_media">
                <a href="#"><img class="img_media" src="img/placeholder_16_9.jpg" width="134" height="75" /></a>
                <div class="bulle_annot">120</div>
                <p><a href="#"><b>Lorem Ipsum</b></a></p>
                <p class="font_11">par <a class="under" href="#">Ars Industrialis</a> | 1h30</p>
            </li>
            <li class="li_media">
                <a href="#"><img class="img_media" src="img/placeholder_16_9.jpg" width="134" height="75" /></a>
                <div class="bulle_annot">120</div>
                <p><a href="#"><b>Lorem Ipsum</b></a></p>
                <p class="font_11">par <a class="under" href="#">Ars Industrialis</a> | 1h30</p>
            </li>
        </ul>

<!-- GROUPES ACTIFS -->

        <ul class="floatlist" id="groupes_actifs">
            <li class="li_h2">
                <h2>Groupes actifs</h2>
            </li>
            <li class="li_media">
                <div class="img_groupes_actifs">
                    <a href="#"><img class="img_media" src="img/placeholder_4_3.jpg" width="54" height="40" /></a>
                </div>
                <div class="txt_groupes_actifs">
                    <div class="bulle_people">57</div>
                    <div class="bulle_annot">32</div>
                    <p><a href="#" class="under"><b>Regards sur le numérique</b></a></p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod …</p>
                </div>
            </li>
            <li class="li_media">
                <div class="img_groupes_actifs">
                    <a href="#"><img class="img_media" src="img/placeholder_4_3.jpg" width="54" height="40" /></a>
                    <div class="lock_group"></div>
                </div>
                <div class="txt_groupes_actifs">
                    <div class="bulle_people">57</div>
                    <div class="bulle_annot">32</div>
                    <p><a href="#" class="under"><b>Regards sur le numérique</b></a></p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod …</p>
                </div>
            </li>
            <li class="li_media">
                <div class="img_groupes_actifs">
                    <a href="#"><img class="img_media" src="img/placeholder_4_3.jpg" width="54" height="40" /></a>
                </div>
                <div class="txt_groupes_actifs">
                    <div class="bulle_people">57</div>
                    <div class="bulle_annot">32</div>
                    <p><a href="#" class="under"><b>Regards sur le numérique</b></a></p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod …</p>
                </div>
            </li>
            <li class="li_media">
                <div class="img_groupes_actifs">
                    <a href="#"><img class="img_media" src="img/placeholder_4_3.jpg" width="54" height="40" /></a>
                    <div class="lock_group"></div>
                </div>
                <div class="txt_groupes_actifs">
                    <div class="bulle_people">57</div>
                    <div class="bulle_annot">32</div>
                    <p><a href="#" class="under"><b>Regards sur le numérique</b></a></p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod …</p>
                </div>
            </li>
            <li class="li_media">
                <div class="img_groupes_actifs">
                    <a href="#"><img class="img_media" src="img/placeholder_4_3.jpg" width="54" height="40" /></a>
                </div>
                <div class="txt_groupes_actifs">
                    <div class="bulle_people">57</div>
                    <div class="bulle_annot">32</div>
                    <p><a href="#" class="under"><b>Regards sur le numérique</b></a></p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod …</p>
                </div>
            </li>
        </ul>

<!-- FOOTER COMMUN -->

        <ul id="footer">
            <li>
                <a href="#">V.01.15</a>
            </li>
            <li>
                <a href="#"> © &nbsp;2011 IRI</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
            <li>
                <a href="#">A propos</a>
            </li>
        </ul>
        <div class="clear"></div>
    </div>

</body>
</html>