integration/article.html
changeset 2 6e47ed0c413c
parent 1 43d9dff6758a
child 3 b5b13ce6935f
equal deleted inserted replaced
1:43d9dff6758a 2:6e47ed0c413c
     4 <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
     4 <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
     5 <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
     5 <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
     6     <head>
     6     <head>
     7         <meta charset="utf-8">
     7         <meta charset="utf-8">
     8         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     8         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     9         <title>Title</title>
     9         <title>Article</title>
    10 
    10 
    11 
    11 
    12 
    12 
    13         <link rel="stylesheet" href="css/reset.css" />
    13         <link rel="stylesheet" href="css/reset.css" />
    14         <link rel="stylesheet" href="css/style.css" />
    14         <link rel="stylesheet" href="css/style.css" />
    53                     <p class="password-lost"><a  href="">Mot de passe oublié ?</a> </p>
    53                     <p class="password-lost"><a  href="">Mot de passe oublié ?</a> </p>
    54 
    54 
    55 
    55 
    56                 </div>
    56                 </div>
    57                 <a href="#" class="dossier-button">DOSSIERS DOCUMENTAIRES</a>
    57                 <a href="#" class="dossier-button">DOSSIERS DOCUMENTAIRES</a>
       
    58 
       
    59                 <div class="dossier-documentaire">
       
    60                     <div class="dossier-documentaire-inner">
       
    61                         <h2>MES DOSSIERS</h2>
       
    62                         <ul>
       
    63                             <li class="clearfix">
       
    64                                 <a href="#">
       
    65                                 <img src="img/documentaire-visuel.jpg" alt="" />
       
    66                                 <span class="documentaire-texte">
       
    67                                     <h3>Terrorisme</h3>
       
    68                                     <p>relation entre elation entre</p>
       
    69                                 </span>
       
    70                                 </a>
       
    71                             </li>
       
    72                             <li class="clearfix">
       
    73                                 <a href="#">
       
    74                                 <img src="img/documentaire-visuel.jpg" alt="" />
       
    75                                 <span class="documentaire-texte">
       
    76                                     <h3>Terrorisme</h3>
       
    77                                     <p>relation entre elation entre</p>
       
    78                                 </span>
       
    79                                 </a>
       
    80                             </li>
       
    81                             <li class="clearfix">
       
    82                                 <a href="#">
       
    83                                 <img src="img/documentaire-visuel.jpg" alt="" />
       
    84                                 <span class="documentaire-texte">
       
    85                                     <h3>Terrorisme</h3>
       
    86                                     <p>relation entre elation entre</p>
       
    87                                 </span>
       
    88                                 </a>
       
    89                             </li>
       
    90                             <li class="clearfix">
       
    91                                 <a href="#">
       
    92                                 <img src="img/documentaire-nouveau-dossier.jpg" alt="" />
       
    93                                 <span class="documentaire-texte">
       
    94                                     <h3>NOUVEAU DOSSIER</h3>
       
    95                                     <p>Creér un dossier documentaire</p>
       
    96                                 </span>
       
    97                                 </a>
       
    98                             </li>
       
    99 
       
   100                         </ul>
       
   101                         <a class="documentaire-lien" href="#"></a>
       
   102                         <h2></h2>
       
   103                         <ul>
       
   104                             <li class="clearfix">
       
   105                                 <a href="#">
       
   106                                 <img src="img/documentaire-visuel.jpg" alt="" />
       
   107                                 <span class="documentaire-texte">
       
   108                                     <h3>Terrorisme</h3>
       
   109                                     <p>relation entre elation entre</p>
       
   110                                 </span>
       
   111                                 </a>
       
   112                             </li>
       
   113                             <li class="clearfix">
       
   114                                 <a href="#">
       
   115                                 <img src="img/documentaire-visuel.jpg" alt="" />
       
   116                                 <span class="documentaire-texte">
       
   117                                     <h3>Terrorisme</h3>
       
   118                                     <p>relation entre elation entre</p>
       
   119                                 </span>
       
   120                                 </a>
       
   121                             </li>
       
   122                         </ul>
       
   123                         <a class="documentaire-lien" href="#"></a>
       
   124                     </div>
       
   125                 </div><!--dossier-documentaire-->
    58             </div><!-- header -->
   126             </div><!-- header -->
    59 
   127 
    60             <div class="content-wrap clearfix">
   128             <div class="content-wrap clearfix">
    61                 <div class="frise">
   129                 <div class="frise">
    62                 
   130                 
    63                 </div>
   131                 </div>
    64                 <div class="cluster-wrap">
   132                 <div class="cluster-wrap">
    65                     <a href="#" class="cluster-arrow arrow-left"></a>
   133                     <a href="#" class="cluster-arrow arrow-left"></a>
    66                     <a href="#" class="cluster-arrow arrow-right"></a>
   134                     <a href="#" class="cluster-arrow arrow-right"></a>
    67                     <div class="cluster-visible">
   135                     <div class="cluster-containment">
    68                         <ul class="cluster">
   136                         <div class="cluster-visible">
    69                             <li><a href="#">Syrie</a></li>
   137                         
    70                             <li><a href="#">affaire de Karachi</a></li>
   138                             <ul class="cluster">
    71                             <li><a href="#">Syrie</a></li>
   139                                 <li><a href="#">Début</a></li>
    72                             <li><a href="#">affaire de Karachi</a></li>
   140                                 <li><a href="#">affaire de Karachi</a></li>
    73                             <li><a href="#">Syrie</a></li>
   141                                 <li><a href="#">Syrie</a></li>
    74                             <li><a href="#">affaire de Karachi</a></li>
   142                                 <li><a href="#">affaire de Karachi</a></li>
    75                             <li><a href="#">Syrie</a></li>
   143                                 <li><a href="#">Syrie</a></li>
    76                             <li><a href="#">affaire de Karachi</a></li>
   144                                 <li><a href="#">affaire de Karachi</a></li>
    77                             <li><a href="#">Syrie</a></li>
   145                                 <li><a href="#">Syrie</a></li>
    78                             <li><a href="#">affaire de Karachi</a></li>
   146                                 <li><a href="#">affaire de Karachi</a></li>
    79                             <li><a href="#">Syrie</a></li>
   147                                 <li><a href="#">Syrie</a></li>
    80                             <li><a href="#">affaire de Karachi</a></li>
   148                                 <li><a href="#">affaire de Karachi</a></li>
    81                         </ul>
   149                                 <li><a href="#">Syrie</a></li>
       
   150                                 <li><a href="#">Fin</a></li>
       
   151                             </ul>
       
   152                         </div>
    82                     </div>
   153                     </div>
    83                     
   154                     
    84                 </div>
   155                 </div>
    85 
   156 
    86                 <div class="content clearfix">
   157                 <div class="content clearfix">
   107                                         <p><input type="checkbox"> <label for="">International</label> </p>
   178                                         <p><input type="checkbox"> <label for="">International</label> </p>
   108                                         <p><input type="checkbox"> <label for="">International</label> </p>
   179                                         <p><input type="checkbox"> <label for="">International</label> </p>
   109                                         <p><input type="checkbox"> <label for="">International</label> </p>
   180                                         <p><input type="checkbox"> <label for="">International</label> </p>
   110                                     </form>
   181                                     </form>
   111                                 </div>
   182                                 </div>
   112                             </div>
   183                             </div><!-- filtre -->
   113                             <div class="widget links">
   184                             <div class="widget links">
   114                                 <h3><a href="">DOSSIER ASSOCIES</a></h3>
   185                                 <h3><a href="">DOSSIER ASSOCIES</a></h3>
   115                                 <div class="widget-inner">
   186                                 <div class="widget-inner">
   116                                     <ul>
   187                                     <ul>
   117                                         <li><a href="#">« Corruption »</a></li>
   188                                         <li><a href="#">« Corruption »</a></li>
   118                                         <li><a href="#">« Corruption »</a></li>
   189                                         <li><a href="#">« Corruption »</a></li>
   119                                         <li><a href="#">« Corruption »</a></li>
   190                                         <li><a href="#">« Corruption »</a></li>
   120                                         <li><a href="#">« Corruption »</a></li>
   191                                         <li><a href="#">« Corruption »</a></li>
   121                                     </ul>
   192                                     </ul>
   122                                 </div>
   193                                 </div>
   123                             </div>
   194                             </div><!-- links -->
       
   195                             <div class="widget affichage">
       
   196                                 <h3><a href="">AFFICHAGE</a></h3>
       
   197                                 <div class="widget-inner">
       
   198                                     
       
   199                                     <ul class="clearfix">
       
   200                                         <li><a class="treemap active" href="#"><span class="visuel"></span><span class="fonction">Treemap</span> </a></li>
       
   201                                         <li><a class="liste" href="#"><span class="visuel"></span><span class="fonction">Liste</span> </a></li>
       
   202                                     </ul>
       
   203                                 </div>
       
   204                             </div><!-- affichage -->
   124                         </div>
   205                         </div>
   125                     </div>
   206                     </div>
   126 
   207 
   127                     <div class="content-right">
   208                     <div class="content-right">
   128                         
   209                         
   129                         <div class="articles">
   210                         <div class="articles">
   130 
   211 
   131                             <div class="article">
   212                             <div class="article">
   132                                 <div class="inner-article clearfix">
   213                                 <div class="inner-article clearfix">
   133                                     <h2>Affaire Lorem »</h2>
   214                                     <h2><a href="#"> Affaire Lorem »</a></h2>
   134                                     <p class="author">
   215                                     <p class="author">
   135                                         <a href="#">23 JANVIER 2024</a><br/>
   216                                         <a href="#">23 JANVIER 2024</a><br/>
   136                                         by <a href="#">Jean Dujardin</a>
   217                                         by <a href="#">Jean Dujardin</a>
   137                                     </p>
   218                                     </p>
   138                                     <div class="article-content">
   219                                     <div class="article-content">
   139                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   220                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   140                                     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   221                                     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   141                                     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
   222                        
   142                                         </p>
   223                                         </p>
   143                                         <img class="article-visuel" src="img/visuel-article.jpg" alt="" />
   224                                        
   144                                     </div>
   225                                     </div>
   145                                 </div>
   226                                 </div>
   146                             </div><!--article -->
   227                             </div><!--article -->
   147                             <div class="article">
   228                             <div class="article">
   148                                 <div class="inner-article clearfix">
   229                                 <div class="inner-article clearfix">
   149                                     <h2>Affaire Lorem »</h2>
   230                                     <h2><a href="#"> Affaire Lorem »</a></h2>
       
   231                                     <p class="author">
       
   232                                         <a href="#">23 JANVIER 2024</a><br/>
       
   233                                         by <a href="#">Jean Dujardin</a>
       
   234                                     </p>
       
   235                                     <div class="article-content">
       
   236                                         <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
       
   237                                         
       
   238                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipisicing   
       
   239                                         </p>
       
   240                                     </div>
       
   241                                 </div>
       
   242                             </div><!--article -->
       
   243                             <div class="article">
       
   244                                 <div class="inner-article clearfix">
       
   245                                     <h2><a href="#"> Affaire Lorem »</a></h2>
   150                                     <p class="author">
   246                                     <p class="author">
   151                                         <a href="#">23 JANVIER 2024</a><br/>
   247                                         <a href="#">23 JANVIER 2024</a><br/>
   152                                         by <a href="#">Jean Dujardin</a>
   248                                         by <a href="#">Jean Dujardin</a>
   153                                     </p>
   249                                     </p>
   154                                     <div class="article-content">
   250                                     <div class="article-content">
   155                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   251                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   156                                     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   252                                     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   157                                     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
   253                        
   158                                         </p>
   254                                         </p>
   159                                         <img class="article-visuel" src="img/visuel-article.jpg" alt="" />
   255                                        
   160                                     </div>
   256                                     </div>
   161                                 </div>
   257                                 </div>
   162                             </div><!--article -->
   258                             </div><!--article -->
   163                             <div class="article">
   259                             <div class="article">
   164                                 <div class="inner-article clearfix">
   260                                 <div class="inner-article clearfix">
   165                                     <h2>Affaire Lorem »</h2>
   261                                     <h2><a href="#"> Affaire Lorem »</a></h2>
       
   262                                     <p class="author">
       
   263                                         <a href="#">23 JANVIER 2024</a><br/>
       
   264                                         by <a href="#">Jean Dujardin</a>
       
   265                                     </p>
       
   266                                     <div class="article-content">
       
   267                                         <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
       
   268                                         
       
   269                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipisicing   
       
   270                                         </p>
       
   271                                     </div>
       
   272                                 </div>
       
   273                             </div><!--article -->
       
   274                             <div class="article">
       
   275                                 <div class="inner-article clearfix">
       
   276                                     <h2><a href="#"> Affaire Lorem »</a></h2>
   166                                     <p class="author">
   277                                     <p class="author">
   167                                         <a href="#">23 JANVIER 2024</a><br/>
   278                                         <a href="#">23 JANVIER 2024</a><br/>
   168                                         by <a href="#">Jean Dujardin</a>
   279                                         by <a href="#">Jean Dujardin</a>
   169                                     </p>
   280                                     </p>
   170                                     <div class="article-content">
   281                                     <div class="article-content">
   171                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   282                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   172                                     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   283                                     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   173                                     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
   284                        
   174                                         </p>
   285                                         </p>
   175                                         <img class="article-visuel" src="img/visuel-article.jpg" alt="" />
   286                                        
   176                                     </div>
   287                                     </div>
   177                                 </div>
   288                                 </div>
   178                             </div><!--article -->
   289                             </div><!--article -->
   179                             <div class="article">
   290                             <div class="article">
   180                                 <div class="inner-article clearfix">
   291                                 <div class="inner-article clearfix">
   181                                     <h2>Affaire Lorem »</h2>
   292                                     <h2><a href="#"> Affaire Lorem »</a></h2>
       
   293                                     <p class="author">
       
   294                                         <a href="#">23 JANVIER 2024</a><br/>
       
   295                                         by <a href="#">Jean Dujardin</a>
       
   296                                     </p>
       
   297                                     <div class="article-content">
       
   298                                         <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
       
   299                                         
       
   300                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipisicing   
       
   301                                         </p>
       
   302                                     </div>
       
   303                                 </div>
       
   304                             </div><!--article -->
       
   305                             <div class="article">
       
   306                                 <div class="inner-article clearfix">
       
   307                                     <h2><a href="#"> Affaire Lorem »</a></h2>
   182                                     <p class="author">
   308                                     <p class="author">
   183                                         <a href="#">23 JANVIER 2024</a><br/>
   309                                         <a href="#">23 JANVIER 2024</a><br/>
   184                                         by <a href="#">Jean Dujardin</a>
   310                                         by <a href="#">Jean Dujardin</a>
   185                                     </p>
   311                                     </p>
   186                                     <div class="article-content">
   312                                     <div class="article-content">
   187                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   313                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   188                                     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   314                                     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   189                                     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
   315                        
   190                                         </p>
   316                                         </p>
   191                                         <img class="article-visuel" src="img/visuel-article.jpg" alt="" />
   317                                        
   192                                     </div>
   318                                     </div>
   193                                 </div>
   319                                 </div>
   194                             </div><!--article -->
   320                             </div><!--article -->
   195                             <div class="article">
   321                             <div class="article">
   196                                 <div class="inner-article clearfix">
   322                                 <div class="inner-article clearfix">
   197                                     <h2>Affaire Lorem »</h2>
   323                                     <h2><a href="#"> Affaire Lorem »</a></h2>
       
   324                                     <p class="author">
       
   325                                         <a href="#">23 JANVIER 2024</a><br/>
       
   326                                         by <a href="#">Jean Dujardin</a>
       
   327                                     </p>
       
   328                                     <div class="article-content">
       
   329                                         <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
       
   330                                         
       
   331                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipisicing   
       
   332                                         </p>
       
   333                                     </div>
       
   334                                 </div>
       
   335                             </div><!--article -->
       
   336                             <div class="article">
       
   337                                 <div class="inner-article clearfix">
       
   338                                     <h2><a href="#"> Affaire Lorem »</a></h2>
   198                                     <p class="author">
   339                                     <p class="author">
   199                                         <a href="#">23 JANVIER 2024</a><br/>
   340                                         <a href="#">23 JANVIER 2024</a><br/>
   200                                         by <a href="#">Jean Dujardin</a>
   341                                         by <a href="#">Jean Dujardin</a>
   201                                     </p>
   342                                     </p>
   202                                     <div class="article-content">
   343                                     <div class="article-content">
   203                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   344                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   204                                     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   345                                     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   205                                     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
   346                        
   206                                         </p>
   347                                         </p>
   207                                         <img class="article-visuel" src="img/visuel-article.jpg" alt="" />
   348                                        
   208                                     </div>
   349                                     </div>
   209                                 </div>
   350                                 </div>
   210                             </div><!--article -->
   351                             </div><!--article -->
   211 
   352                             <div class="article">
       
   353                                 <div class="inner-article clearfix">
       
   354                                     <h2><a href="#"> Affaire Lorem »</a></h2>
       
   355                                     <p class="author">
       
   356                                         <a href="#">23 JANVIER 2024</a><br/>
       
   357                                         by <a href="#">Jean Dujardin</a>
       
   358                                     </p>
       
   359                                     <div class="article-content">
       
   360                                         <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
       
   361                                         
       
   362                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipisicing   
       
   363                                         </p>
       
   364                                     </div>
       
   365                                 </div>
       
   366                             </div><!--article -->
   212                         </div><!-- articles -->
   367                         </div><!-- articles -->
   213                     </div>
   368                         
       
   369                     </div><!-- content-right -->
   214                 </div>
   370                 </div>
   215                 <div class="footer">
   371                 <div class="footer clearfix">
   216                     <div class="footer-information">
   372                     <div class="footer-information">
   217                         <h2>Information utiles</h2>
   373                         <h2>Information utiles</h2>
   218                         <ul>
   374                         <ul>
   219                             <li>- <a href="#">Mentions légales</a></li>
   375                             <li>- <a href="#">Mentions légales</a></li>
   220                             <li>- <a href="#">Mentions légales</a></li>
   376                             <li>- <a href="#">Mentions légales</a></li>
   228                             <li>- Année <a href="#">2009</a>, <a href="#">2009</a>, <a href="#">2009</a></li>
   384                             <li>- Année <a href="#">2009</a>, <a href="#">2009</a>, <a href="#">2009</a></li>
   229                             <li>- <a href="#">International</a>, <a href="#">International</a>, <a href="#">International</a></li>
   385                             <li>- <a href="#">International</a>, <a href="#">International</a>, <a href="#">International</a></li>
   230                             <li>- <a href="#">Conditions d'utilisations générale</a>
   386                             <li>- <a href="#">Conditions d'utilisations générale</a>
   231                         </ul>
   387                         </ul>
   232                     </div>
   388                     </div>
       
   389                     <div class="footer-partenaire">
       
   390                         <h2>Partenaires</h2>
       
   391                         <ul>
       
   392                             <li><a href="#"><img src="img/logo-iri.jpg" alt="" /></a></li>
       
   393                             <li><a href="#"><img src="img/logo-cea.jpg" alt="" /></a></li>
       
   394                             <li><a href="#"><img src="img/logo-alcatel.jpg" alt="" /></a></li>
       
   395                         </ul>
       
   396                     </div>
       
   397                     <div class="footer-texte">
       
   398                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       
   399                         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
       
   400                         quis nostrud exercitation ullamco.
       
   401                     </p>
       
   402                     </div>
   233                 </div><!-- footer -->
   403                 </div><!-- footer -->
   234                 
   404                 
   235             </div><!-- content-wrap -->
   405             </div><!-- content-wrap -->
   236             <div class="copyright">
   406             <div class="copyright">
   237                 &copy; Mediapart &copy; Periplus | <a href="#">Mention légales</a> | <a href="#">Chartes éditoriale</a>
   407                 &copy; Mediapart &copy; Periplus | <a href="#">Mention légales</a> | <a href="#">Chartes éditoriale | <a href="#">CGV | <a href="#">Mediapart.fr</a>
   238             </div>
   408             </div>
   239         </div>
   409         </div>
   240         <!-- JavaScript -->
   410         <!-- JavaScript -->
   241         <script src="js/vendor/jquery-1.8.0.min.js"></script>
   411         <script src="js/vendor/jquery-1.8.0.min.js"></script>
       
   412         <script src="js/vendor/jquery-ui-1.8.24.custom.min.js"></script>
   242         <script src="js/plugins.js"></script>
   413         <script src="js/plugins.js"></script>
   243         <script src="js/main.js"></script>
   414         <script src="js/main.js"></script>
   244 
   415 
   245     </body>
   416     </body>
   246 </html>
   417 </html>