integration/documentaire.html
changeset 4 b00fdbef41d4
child 5 16413123bc8c
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/documentaire.html	Tue Oct 09 16:31:25 2012 +0200
@@ -0,0 +1,371 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        <title>Documentaire</title>
+
+
+
+        <link rel="stylesheet" href="css/reset.css" />
+        <link rel="stylesheet" href="css/style.css" />
+        <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.24.custom.css">
+        <script src="js/vendor/modernizr-2.6.1.min.js"></script>
+    </head>
+    <body>
+
+
+
+        <div class="wrap">
+            <div class="header">
+
+                <div class="recherche-wrap">
+                    <h1><img src="img/mediapart-by-periplus.jpg" alt="" /></h1>
+                    <form action="#">
+                        <p >
+                            <input name="recherche" placeholder="Rechercher" class="input-recherche" type="text" />
+                            <input type="submit" value="" class="recherche-submit"/>
+                            <a class="plus-button" href="#"><img src="img/plus-button.jpg" alt=""/> </a>
+                        </p>
+                    </form>
+                </div>
+
+                <ul class="header-menu">
+                    <li><a href="#"><img src="img/home-button.jpg" alt="" /> </a></li>
+                    <li><a href="#">INTERNATIONAL</a></li>
+                    <li><a href="#">FRANCE</a></li>
+                    <li><a href="#">ECONOMIE</a></li>
+                    <li><a href="#">CULTURE</a></li>
+                    <li><a href="#">CLUSTER X</a></li>
+                </ul>
+
+                <div class="login-wrap">
+                    <h2>CONNECTER VOUS</h2>
+                    <form action="#">
+                        <p><input type="text" name="identifiant" placeholder="Identifiant" /></p> 
+                        <p class="submit-wrap">
+                            <input class="password" type="password" name="password"/>
+                            <input class="submit-button" type="submit" value="OK" />
+                        </p>
+                    </form>
+                    <p class="password-lost"><a  href="">Mot de passe oublié ?</a> </p>
+
+
+                </div>
+                <a href="#" class="dossier-button">DOSSIERS DOCUMENTAIRES</a>
+
+                <div class="dossier-documentaire">
+                    <div class="dossier-documentaire-inner">
+                        <h2>MES DOSSIERS</h2>
+                        <ul>
+                            <li class="clearfix">
+                                <a href="#">
+                                <img src="img/documentaire-visuel.jpg" alt="" />
+                                <span class="documentaire-texte">
+                                    <h3>Terrorisme</h3>
+                                    <p>relation entre elation entre</p>
+                                </span>
+                                </a>
+                            </li>
+                            <li class="clearfix">
+                                <a href="#">
+                                <img src="img/documentaire-visuel.jpg" alt="" />
+                                <span class="documentaire-texte">
+                                    <h3>Terrorisme</h3>
+                                    <p>relation entre elation entre</p>
+                                </span>
+                                </a>
+                            </li>
+                            <li class="clearfix">
+                                <a href="#">
+                                <img src="img/documentaire-visuel.jpg" alt="" />
+                                <span class="documentaire-texte">
+                                    <h3>Terrorisme</h3>
+                                    <p>relation entre elation entre</p>
+                                </span>
+                                </a>
+                            </li>
+                            <li class="clearfix">
+                                <a href="#">
+                                <img src="img/documentaire-nouveau-dossier.jpg" alt="" />
+                                <span class="documentaire-texte">
+                                    <h3>NOUVEAU DOSSIER</h3>
+                                    <p>Creér un dossier documentaire</p>
+                                </span>
+                                </a>
+                            </li>
+
+                        </ul>
+                        <a class="documentaire-lien" href="#"></a>
+                        <h2></h2>
+                        <ul>
+                            <li class="clearfix">
+                                <a href="#">
+                                <img src="img/documentaire-visuel.jpg" alt="" />
+                                <span class="documentaire-texte">
+                                    <h3>Terrorisme</h3>
+                                    <p>relation entre elation entre</p>
+                                </span>
+                                </a>
+                            </li>
+                            <li class="clearfix">
+                                <a href="#">
+                                <img src="img/documentaire-visuel.jpg" alt="" />
+                                <span class="documentaire-texte">
+                                    <h3>Terrorisme</h3>
+                                    <p>relation entre elation entre</p>
+                                </span>
+                                </a>
+                            </li>
+                        </ul>
+                        <a class="documentaire-lien" href="#"></a>
+                    </div>
+                </div><!--dossier-documentaire-->
+            </div><!-- header -->
+
+            <div class="content-wrap clearfix">
+                
+                <div class="header-documentaire">
+                  <a class="retour" href="#">« Retour</a>
+                  <h2>Tous les Dossiers Documentaires : «Rechercher»</h2>
+                </div>
+
+                <div class="content clearfix">
+                    
+                    
+
+                    <div class="content-left documentaire">
+                      
+                        <div class="widget-wrap">
+                            <div class="widget recherche">
+                                <h3><a href="#">RECHERCHE</a></h3>
+                                <div class="widget-inner">
+                                    <form action="#" method="">
+                                        <p class="clearfix">
+                                            <input type="text" name="" placeholder="Rechercher" />
+                                            <input type="submit" value="" />
+                                        </p>
+                                    </form>
+                                </div>
+                            </div><!-- recherche -->
+                            <div class="widget classer">
+                                <h3><a href="#">CLASSER</a></h3>
+                                <div class="widget-inner">
+                                    <form action="#" class="filtre-categorie">
+                                        <p><input type="checkbox"> <label for="">International</label> </p>
+                                        <p><input type="checkbox"> <label for="">International</label> </p>
+                                        <p><input type="checkbox"> <label for="">International</label> </p>
+                                    </form>
+                                </div>
+                            </div><!-- classer -->
+                            <div class="widget filtre">
+                                <h3><a href="#">FILTRES</a></h3>
+                                <div class="widget-inner">
+                                    <form action="#" class="filtre-date">
+                                        <p>
+                                            <label for="">De :</label>
+                                            <input type="text" />
+                                        </p>
+                                        <p>
+                                            <label for="">à :</label>
+                                            <input type="text" />
+                                        </p>
+                                    </form>
+                                    <h4>Catégories :</h4>
+                                    <form action="#" class="filtre-categorie">
+                                        <p><input type="checkbox"> <label for="">International</label> </p>
+                                        <p><input type="checkbox"> <label for="">International</label> </p>
+                                        <p><input type="checkbox"> <label for="">International</label> </p>
+                                    </form>
+                                </div>
+                            </div><!-- filtre -->
+   
+
+                        </div>
+                    </div>
+
+                    <div class="content-right">
+                        
+                       <div class="dossiers">
+                           <ul>
+                               <li class="item-dossier clearfix">
+                                   <div class="dossier-col-left">
+                                       <h2><a href="#">L'affaire Sarkozy »</a></h2>
+                                       <div class="dossier-content">
+                                           <img src="img/visuel-article.jpg" alt="">
+                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                                       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                                       quis nostrud exercitation ullamco laboris nisi  
+                                            </p>
+                                       </div>
+                                       
+                                   </div>
+                                   <div class="dossier-col-right">
+                                       <ul class="annotations">
+                                           <li><a class="share" href="#"></a></li>
+                                           <li><a class="favorite" href="#"></a></li>
+                                           <li><a class="trash" href="#"></a></li>
+                                           <li><a class="edit" href="#"></a></li>
+                                       </ul>
+                                       <h3>48 articles (04/2011 - 03/2012)</h3>
+                                       <ul class="links">
+                                           <li><a href="#">Financement de campagne</a></li>
+                                           <li><a href="#">Karachi</a></li>
+                                           <li><a href="#">Financement de campagne</a></li>
+                                           <li><a href="#">Karachi</a></li>
+                                       </ul>
+                                   </div>
+                               </li><!-- item-dossier -->
+                               <li class="item-dossier clearfix">
+                                   <div class="dossier-col-left">
+                                       <h2><a href="#">L'affaire Sarkozy »</a></h2>
+                                       <div class="dossier-content">
+                                           <img src="img/visuel-article.jpg" alt="">
+                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                                       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                                       quis nostrud exercitation ullamco laboris nisi  
+                                            </p>
+                                       </div>
+                                       
+                                   </div>
+                                   <div class="dossier-col-right">
+                                       <ul class="annotations">
+                                           <li><a class="share" href="#"></a></li>
+                                           <li><a class="favorite" href="#"></a></li>
+                                           <li><a class="trash" href="#"></a></li>
+                                           <li><a class="edit" href="#"></a></li>
+                                       </ul>
+                                       <h3>48 articles (04/2011 - 03/2012)</h3>
+                                       <ul class="links">
+                                           <li><a href="#">Financement de campagne</a></li>
+                                           <li><a href="#">Karachi</a></li>
+                                           <li><a href="#">Financement de campagne</a></li>
+                                           <li><a href="#">Karachi</a></li>
+                                       </ul>
+                                   </div>
+                               </li><!-- item-dossier -->
+                               <li class="item-dossier clearfix">
+                                   <div class="dossier-col-left">
+                                       <h2><a href="#">L'affaire Sarkozy »</a></h2>
+                                       <div class="dossier-content">
+                                           
+                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                                       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                                       quis nostrud exercitation ullamco laboris nisi  
+                                            </p>
+                                       </div>
+                                       
+                                   </div>
+                                   <div class="dossier-col-right">
+                                       <ul class="annotations">
+                                           <li><a class="share" href="#"></a></li>
+                                           <li><a class="favorite" href="#"></a></li>
+                                           <li><a class="trash" href="#"></a></li>
+                                           <li><a class="edit" href="#"></a></li>
+                                       </ul>
+                                       <h3>48 articles (04/2011 - 03/2012)</h3>
+                                       <ul class="links">
+                                           <li><a href="#">Financement de campagne</a></li>
+                                           <li><a href="#">Karachi</a></li>
+                                           <li><a href="#">Financement de campagne</a></li>
+                                           <li><a href="#">Karachi</a></li>
+                                       </ul>
+                                   </div>
+                               </li><!-- item-dossier -->
+                               <li class="item-dossier clearfix">
+                                   <div class="dossier-col-left">
+                                       <h2><a href="#">L'affaire Sarkozy »</a></h2>
+                                       <div class="dossier-content">
+                                           <img src="img/visuel-article.jpg" alt="">
+                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                                       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                                       quis nostrud exercitation ullamco laboris nisi  
+                                            </p>
+                                       </div>
+                                       
+                                   </div>
+                                   <div class="dossier-col-right">
+                                       <ul class="annotations">
+                                           <li><a class="share" href="#"></a></li>
+                                           <li><a class="favorite" href="#"></a></li>
+                                           <li><a class="trash" href="#"></a></li>
+                                           <li><a class="edit" href="#"></a></li>
+                                       </ul>
+                                       <h3>48 articles (04/2011 - 03/2012)</h3>
+                                       <ul class="links">
+                                           <li><a href="#">Financement de campagne</a></li>
+                                           <li><a href="#">Karachi</a></li>
+                                           <li><a href="#">Financement de campagne</a></li>
+                                           <li><a href="#">Karachi</a></li>
+                                       </ul>
+                                   </div>
+                               </li><!-- item-dossier -->
+                           </ul>
+                           <div class="pagination">
+                             <a href="#">Suivants »</a>
+                           </div>
+                       </div><!-- dossiers -->
+                       <div class="dossier-similaire">
+                         <div class="widget">
+                           <h3><a href="#">DOSSIER SIMILAIRE</a></h3>
+                           <div class="widget-inner">       
+                             <ul>
+                               <li><a href="#">« Election 2012 »</a> par TomeJ</li>
+                               <li><a href="#">« Election 2012 »</a> par TomeJ</li>
+                               <li><a href="#">« Election 2012 »</a> par TomeJ</li>
+                             </ul>
+                           </div>
+                         </div>
+                       </div><!-- dossier-similaire -->
+                    </div><!-- content-right -->
+                </div>
+                <div class="footer clearfix">
+                    <div class="footer-information">
+                        <h2>Information utiles</h2>
+                        <ul>
+                            <li>- <a href="#">Mentions légales</a></li>
+                            <li>- <a href="#">Mentions légales</a></li>
+                            <li>- <a href="#">Conditions d'utilisations générale</a></li>
+                            <li>- <a href="#">Le projet Periplus</a></li>
+                        </ul>
+                    </div>
+                    <div class="footer-raccourci">
+                        <h2>Raccourcis</h2>
+                        <ul>
+                            <li>- Année <a href="#">2009</a>, <a href="#">2009</a>, <a href="#">2009</a></li>
+                            <li>- <a href="#">International</a>, <a href="#">International</a>, <a href="#">International</a></li>
+                            <li>- <a href="#">Conditions d'utilisations générale</a>
+                        </ul>
+                    </div>
+                    <div class="footer-partenaire">
+                        <h2>Partenaires</h2>
+                        <ul>
+                            <li><a href="#"><img src="img/logo-iri.jpg" alt="" /></a></li>
+                            <li><a href="#"><img src="img/logo-cea.jpg" alt="" /></a></li>
+                            <li><a href="#"><img src="img/logo-alcatel.jpg" alt="" /></a></li>
+                        </ul>
+                    </div>
+                    <div class="footer-texte">
+                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                        quis nostrud exercitation ullamco.
+                    </p>
+                    </div>
+                </div><!-- footer -->
+                
+            </div><!-- content-wrap -->
+            <div class="copyright">
+                &copy; Mediapart &copy; Periplus | <a href="#">Mention légales</a> | <a href="#">Chartes éditoriale | <a href="#">CGV | <a href="#">Mediapart.fr</a>
+            </div>
+        </div>
+        <!-- JavaScript -->
+        <script src="js/vendor/jquery-1.8.0.min.js"></script>
+        <script src="js/vendor/jquery-ui-1.8.24.custom.min.js"></script>
+        <script src="js/plugins.js"></script>
+        <script src="js/main.js"></script>
+
+    </body>
+</html>