integration/article.html
changeset 11 95df5542a1ce
parent 6 a3e60d7addb3
child 14 1d931d99393b
equal deleted inserted replaced
10:771e832a51c4 11:95df5542a1ce
     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>Article</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" />
    15         <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.24.custom.css">
    15         <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.24.custom.css">
    16         <script src="js/vendor/modernizr-2.6.1.min.js"></script>
    16         <script src="js/vendor/modernizr-2.6.1.min.js"></script>
    26                     <h1><img src="img/mediapart-by-periplus.jpg" alt="" /></h1>
    26                     <h1><img src="img/mediapart-by-periplus.jpg" alt="" /></h1>
    27                     <form action="#">
    27                     <form action="#">
    28                         <p >
    28                         <p >
    29                             <a href="#" class="photo"></a>
    29                             <a href="#" class="photo"></a>
    30                             <input name="recherche" placeholder="Rechercher" class="input-recherche" type="text" />
    30                             <input name="recherche" placeholder="Rechercher" class="input-recherche" type="text" />
    31                             <input type="submit" value="" class="recherche-submit"/>
    31                             <input type="submit" title="Rechercher"  value="" class="recherche-submit"/>
    32                             <a class="plus-button" href="#"> </a>
    32                             <a class="plus-button" title="Annoter" href="#"> </a>
    33                         </p>
    33                         </p>
    34                     </form>
    34                     </form>
    35                 </div>
    35                 </div>
    36 
    36 
    37                 <ul class="header-menu">
    37                 <ul class="header-menu">
    61                 <div class="dossier-documentaire">
    61                 <div class="dossier-documentaire">
    62                     <div class="dossier-documentaire-inner">
    62                     <div class="dossier-documentaire-inner">
    63                         <h2>MES DOSSIERS</h2>
    63                         <h2>MES DOSSIERS</h2>
    64                         <ul>
    64                         <ul>
    65                             <li class="clearfix">
    65                             <li class="clearfix">
    66                                 <a href="#">
    66                                 <a title="Voir le dossier" href="#">
    67                                 <img src="img/documentaire-visuel.jpg" alt="" />
    67                                 <img src="img/documentaire-visuel.jpg" alt="" />
    68                                 <span class="documentaire-texte">
    68                                 <span class="documentaire-texte">
    69                                     <h3>Terrorisme</h3>
    69                                     <h3>Terrorisme</h3>
    70                                     <p>relation entre elation entre</p>
    70                                     <p>relation entre elation entre</p>
    71                                 </span>
    71                                 </span>
    72                                 </a>
    72                                 </a>
    73                             </li>
    73                             </li>
    74                             <li class="clearfix">
    74                             <li class="clearfix">
    75                                 <a href="#">
    75                                 <a title="Voir le dossier" href="#">
    76                                 <img src="img/documentaire-visuel.jpg" alt="" />
    76                                 <img src="img/documentaire-visuel.jpg" alt="" />
    77                                 <span class="documentaire-texte">
    77                                 <span class="documentaire-texte">
    78                                     <h3>Terrorisme</h3>
    78                                     <h3>Terrorisme</h3>
    79                                     <p>relation entre elation entre</p>
    79                                     <p>relation entre elation entre</p>
    80                                 </span>
    80                                 </span>
    81                                 </a>
    81                                 </a>
    82                             </li>
    82                             </li>
    83                             <li class="clearfix">
    83                             <li class="clearfix">
    84                                 <a href="#">
    84                                 <a title="Voir le dossier" href="#">
    85                                 <img src="img/documentaire-visuel.jpg" alt="" />
    85                                 <img src="img/documentaire-visuel.jpg" alt="" />
    86                                 <span class="documentaire-texte">
    86                                 <span class="documentaire-texte">
    87                                     <h3>Terrorisme</h3>
    87                                     <h3>Terrorisme</h3>
    88                                     <p>relation entre elation entre</p>
    88                                     <p>relation entre elation entre</p>
    89                                 </span>
    89                                 </span>
    90                                 </a>
    90                                 </a>
    91                             </li>
    91                             </li>
    92                             <li class="clearfix">
    92                             <li class="clearfix">
    93                                 <a href="#">
    93                                 <a title="Nouveau dossier documentaire" href="#">
    94                                 <img src="img/documentaire-nouveau-dossier.jpg" alt="" />
    94                                 <img src="img/documentaire-nouveau-dossier.jpg" alt="" />
    95                                 <span class="documentaire-texte">
    95                                 <span class="documentaire-texte">
    96                                     <h3>NOUVEAU DOSSIER</h3>
    96                                     <h3>NOUVEAU DOSSIER</h3>
    97                                     <p>Creér un dossier documentaire</p>
    97                                     <p>Creér un dossier documentaire</p>
    98                                 </span>
    98                                 </span>
    99                                 </a>
    99                                 </a>
   100                             </li>
   100                             </li>
   101 
   101 
   102                         </ul>
   102                         </ul>
   103                         <a class="documentaire-lien" href="#"></a>
   103                         <a class="documentaire-lien" title="Voir les dossiers"  href="#"></a>
   104                         <h2></h2>
   104                         <h2></h2>
   105                         <ul>
   105                         <ul>
   106                             <li class="clearfix">
   106                             <li class="clearfix">
   107                                 <a href="#">
   107                                 <atitle="Voir le dossier"  href="#">
   108                                 <img src="img/documentaire-visuel.jpg" alt="" />
   108                                 <img src="img/documentaire-visuel.jpg" alt="" />
   109                                 <span class="documentaire-texte">
   109                                 <span class="documentaire-texte">
   110                                     <h3>Terrorisme</h3>
   110                                     <h3>Terrorisme</h3>
   111                                     <p>relation entre elation entre</p>
   111                                     <p>relation entre elation entre</p>
   112                                 </span>
   112                                 </span>
   113                                 </a>
   113                                 </a>
   114                             </li>
   114                             </li>
   115                             <li class="clearfix">
   115                             <li class="clearfix">
   116                                 <a href="#">
   116                                 <a title="Voir le dossier" href="#">
   117                                 <img src="img/documentaire-visuel.jpg" alt="" />
   117                                 <img src="img/documentaire-visuel.jpg" alt="" />
   118                                 <span class="documentaire-texte">
   118                                 <span class="documentaire-texte">
   119                                     <h3>Terrorisme</h3>
   119                                     <h3>Terrorisme</h3>
   120                                     <p>relation entre elation entre</p>
   120                                     <p>relation entre elation entre</p>
   121                                 </span>
   121                                 </span>
   122                                 </a>
   122                                 </a>
   123                             </li>
   123                             </li>
   124                         </ul>
   124                         </ul>
   125                         <a class="documentaire-lien" href="#"></a>
   125                         <a class="documentaire-lien" title="Voir les dossiers" href="#"></a>
   126                     </div>
   126                     </div>
   127                 </div><!--dossier-documentaire-->
   127                 </div><!--dossier-documentaire-->
   128             </div><!-- header -->
   128             </div><!-- header -->
   129 
   129 
   130             <div class="content-wrap clearfix">
   130             <div class="content-wrap clearfix">
   131                 <div class="frise">
   131                 <div class="frise">
   132                     <div id="slider-range">
   132                     <div class="streamgraph"></div>
   133                         <div class="voile-left"></div>
   133                     <div id="slider-range"></div>
   134                         <div class="voile-right"></div>
       
   135                     </div>
       
   136                 </div><!-- frise -->
   134                 </div><!-- frise -->
   137                 <div class="cluster-wrap">
   135                 <div class="cluster-wrap">
   138                     <a href="#" class="cluster-arrow arrow-left"></a>
   136                     <a href="#" class="cluster-arrow arrow-left"></a>
   139                     <a href="#" class="cluster-arrow arrow-right"></a>
   137                     <a href="#" class="cluster-arrow arrow-right"></a>
   140                     <div class="cluster-containment">
   138                     <div class="cluster-containment">
   141                         <div class="cluster-visible">
   139                         <div class="cluster-visible">
   142                         
   140                         
   143                             <ul class="cluster">
   141                             <ul class="cluster">
   144                                 <li><a href="#">Début</a></li>
   142                                 <li><a title="Afficher le cluster" href="#">Début</a></li>
   145                                 <li><a href="#">affaire de Karachi</a></li>
   143                                 <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
   146                                 <li><a href="#">Syrie</a></li>
   144                                 <li><a title="Afficher le cluster" href="#">Syrie</a></li>
   147                                 <li><a href="#">affaire de Karachi</a></li>
   145                                 <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
   148                                 <li><a href="#">Syrie</a></li>
   146                                 <li><a title="Afficher le cluster" href="#">Syrie</a></li>
   149                                 <li><a href="#">affaire de Karachi</a></li>
   147                                 <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
   150                                 <li><a href="#">Syrie</a></li>
   148                                 <li><a title="Afficher le cluster" href="#">Syrie</a></li>
   151                                 <li><a href="#">affaire de Karachi</a></li>
   149                                 <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
   152                                 <li><a href="#">Syrie</a></li>
   150                                 <li><a title="Afficher le cluster" href="#">Syrie</a></li>
   153                                 <li><a href="#">affaire de Karachi</a></li>
   151                                 <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
   154                                 <li><a href="#">Syrie</a></li>
   152                                 <li><a title="Afficher le cluster" href="#">Syrie</a></li>
   155                                 <li><a href="#">Fin</a></li>
   153                                 <li><a title="Afficher le cluster" href="#">Fin</a></li>
   156                             </ul>
   154                             </ul>
   157                         </div>
   155                         </div>
   158                     </div>
   156                     </div>
   159                     
   157                     
   160                 </div>
   158                 </div>
   169                                 <h3><a href="#">RECHERCHE</a></h3>
   167                                 <h3><a href="#">RECHERCHE</a></h3>
   170                                 <div class="widget-inner">
   168                                 <div class="widget-inner">
   171                                     <form action="#" method="">
   169                                     <form action="#" method="">
   172                                         <p class="clearfix">
   170                                         <p class="clearfix">
   173                                             <input type="text" name="" placeholder="Rechercher" />
   171                                             <input type="text" name="" placeholder="Rechercher" />
   174                                             <input type="submit" value="" />
   172                                             <input type="submit" title="Rechercher"   value="" />
   175                                         </p>
   173                                         </p>
   176                                     </form>
   174                                     </form>
   177                                 </div>
   175                                 </div>
   178                             </div><!-- recherche -->
   176                             </div><!-- recherche -->
   179                             <div class="widget classer">
   177                             <div class="widget classer">
   221                             <div class="widget affichage">
   219                             <div class="widget affichage">
   222                                 <h3><a href="#">AFFICHAGE</a></h3>
   220                                 <h3><a href="#">AFFICHAGE</a></h3>
   223                                 <div class="widget-inner">
   221                                 <div class="widget-inner">
   224                                     
   222                                     
   225                                     <ul class="clearfix">
   223                                     <ul class="clearfix">
   226                                         <li><a class="treemap active" href="#"><span class="visuel"></span><span class="fonction">Treemap</span> </a></li>
   224                                         <li><a  title="Passer en vue Treemap" class="treemap active" href="#"><span class="visuel"></span><span class="fonction">Treemap</span> </a></li>
   227                                         <li><a class="liste" href="#"><span class="visuel"></span><span class="fonction">Liste</span> </a></li>
   225                                         <li><a  title="Passer en vue Liste" class="liste" href="#"><span class="visuel"></span><span class="fonction">Liste</span> </a></li>
   228                                     </ul>
   226                                     </ul>
   229                                 </div>
   227                                 </div>
   230                             </div><!-- affichage -->
   228                             </div><!-- affichage -->
   231                         </div>
   229                         </div>
   232                     </div>
   230                     </div>
   235                         
   233                         
   236                         <div class="articles">
   234                         <div class="articles">
   237 
   235 
   238                             <div class="article">
   236                             <div class="article">
   239                                 <div class="inner-article clearfix">
   237                                 <div class="inner-article clearfix">
   240                                     <h2><a href="#"> Affaire Lorem »</a></h2>
   238                                     <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
   241                                     <p class="author">
   239                                     <p class="author">
   242                                         <a href="#">23 JANVIER 2024</a><br/>
   240                                         <a href="#">23 JANVIER 2024</a><br/>
   243                                         by <a href="#">Jean Dujardin</a>
   241                                         by <a href="#">Jean Dujardin</a>
   244                                     </p>
   242                                     </p>
   245                                     <div class="article-content">
   243                                     <div class="article-content">
   251                                     </div>
   249                                     </div>
   252                                 </div>
   250                                 </div>
   253                             </div><!--article -->
   251                             </div><!--article -->
   254                             <div class="article">
   252                             <div class="article">
   255                                 <div class="inner-article clearfix">
   253                                 <div class="inner-article clearfix">
   256                                     <h2><a href="#"> Affaire Lorem »</a></h2>
   254                                     <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
   257                                     <p class="author">
   255                                     <p class="author">
   258                                         <a href="#">23 JANVIER 2024</a><br/>
   256                                         <a href="#">23 JANVIER 2024</a><br/>
   259                                         by <a href="#">Jean Dujardin</a>
   257                                         by <a href="#">Jean Dujardin</a>
   260                                     </p>
   258                                     </p>
   261                                     <div class="article-content">
   259                                     <div class="article-content">
   266                                     </div>
   264                                     </div>
   267                                 </div>
   265                                 </div>
   268                             </div><!--article -->
   266                             </div><!--article -->
   269                             <div class="article">
   267                             <div class="article">
   270                                 <div class="inner-article clearfix">
   268                                 <div class="inner-article clearfix">
   271                                     <h2><a href="#"> Affaire Lorem »</a></h2>
   269                                     <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
   272                                     <p class="author">
   270                                     <p class="author">
   273                                         <a href="#">23 JANVIER 2024</a><br/>
   271                                         <a href="#">23 JANVIER 2024</a><br/>
   274                                         by <a href="#">Jean Dujardin</a>
   272                                         by <a href="#">Jean Dujardin</a>
   275                                     </p>
   273                                     </p>
   276                                     <div class="article-content">
   274                                     <div class="article-content">
   282                                     </div>
   280                                     </div>
   283                                 </div>
   281                                 </div>
   284                             </div><!--article -->
   282                             </div><!--article -->
   285                             <div class="article">
   283                             <div class="article">
   286                                 <div class="inner-article clearfix">
   284                                 <div class="inner-article clearfix">
   287                                     <h2><a href="#"> Affaire Lorem »</a></h2>
   285                                     <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
   288                                     <p class="author">
   286                                     <p class="author">
   289                                         <a href="#">23 JANVIER 2024</a><br/>
   287                                         <a href="#">23 JANVIER 2024</a><br/>
   290                                         by <a href="#">Jean Dujardin</a>
   288                                         by <a href="#">Jean Dujardin</a>
   291                                     </p>
   289                                     </p>
   292                                     <div class="article-content">
   290                                     <div class="article-content">
   297                                     </div>
   295                                     </div>
   298                                 </div>
   296                                 </div>
   299                             </div><!--article -->
   297                             </div><!--article -->
   300                             <div class="article">
   298                             <div class="article">
   301                                 <div class="inner-article clearfix">
   299                                 <div class="inner-article clearfix">
   302                                     <h2><a href="#"> Affaire Lorem »</a></h2>
   300                                     <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
   303                                     <p class="author">
   301                                     <p class="author">
   304                                         <a href="#">23 JANVIER 2024</a><br/>
   302                                         <a href="#">23 JANVIER 2024</a><br/>
   305                                         by <a href="#">Jean Dujardin</a>
   303                                         by <a href="#">Jean Dujardin</a>
   306                                     </p>
   304                                     </p>
   307                                     <div class="article-content">
   305                                     <div class="article-content">
   313                                     </div>
   311                                     </div>
   314                                 </div>
   312                                 </div>
   315                             </div><!--article -->
   313                             </div><!--article -->
   316                             <div class="article">
   314                             <div class="article">
   317                                 <div class="inner-article clearfix">
   315                                 <div class="inner-article clearfix">
   318                                     <h2><a href="#"> Affaire Lorem »</a></h2>
   316                                     <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
   319                                     <p class="author">
   317                                     <p class="author">
   320                                         <a href="#">23 JANVIER 2024</a><br/>
   318                                         <a href="#">23 JANVIER 2024</a><br/>
   321                                         by <a href="#">Jean Dujardin</a>
   319                                         by <a href="#">Jean Dujardin</a>
   322                                     </p>
   320                                     </p>
   323                                     <div class="article-content">
   321                                     <div class="article-content">
   328                                     </div>
   326                                     </div>
   329                                 </div>
   327                                 </div>
   330                             </div><!--article -->
   328                             </div><!--article -->
   331                             <div class="article">
   329                             <div class="article">
   332                                 <div class="inner-article clearfix">
   330                                 <div class="inner-article clearfix">
   333                                     <h2><a href="#"> Affaire Lorem »</a></h2>
   331                                     <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
   334                                     <p class="author">
   332                                     <p class="author">
   335                                         <a href="#">23 JANVIER 2024</a><br/>
   333                                         <a href="#">23 JANVIER 2024</a><br/>
   336                                         by <a href="#">Jean Dujardin</a>
   334                                         by <a href="#">Jean Dujardin</a>
   337                                     </p>
   335                                     </p>
   338                                     <div class="article-content">
   336                                     <div class="article-content">
   344                                     </div>
   342                                     </div>
   345                                 </div>
   343                                 </div>
   346                             </div><!--article -->
   344                             </div><!--article -->
   347                             <div class="article">
   345                             <div class="article">
   348                                 <div class="inner-article clearfix">
   346                                 <div class="inner-article clearfix">
   349                                     <h2><a href="#"> Affaire Lorem »</a></h2>
   347                                     <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
   350                                     <p class="author">
   348                                     <p class="author">
   351                                         <a href="#">23 JANVIER 2024</a><br/>
   349                                         <a href="#">23 JANVIER 2024</a><br/>
   352                                         by <a href="#">Jean Dujardin</a>
   350                                         by <a href="#">Jean Dujardin</a>
   353                                     </p>
   351                                     </p>
   354                                     <div class="article-content">
   352                                     <div class="article-content">
   359                                     </div>
   357                                     </div>
   360                                 </div>
   358                                 </div>
   361                             </div><!--article -->
   359                             </div><!--article -->
   362                             <div class="article">
   360                             <div class="article">
   363                                 <div class="inner-article clearfix">
   361                                 <div class="inner-article clearfix">
   364                                     <h2><a href="#"> Affaire Lorem »</a></h2>
   362                                     <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
   365                                     <p class="author">
   363                                     <p class="author">
   366                                         <a href="#">23 JANVIER 2024</a><br/>
   364                                         <a href="#">23 JANVIER 2024</a><br/>
   367                                         by <a href="#">Jean Dujardin</a>
   365                                         by <a href="#">Jean Dujardin</a>
   368                                     </p>
   366                                     </p>
   369                                     <div class="article-content">
   367                                     <div class="article-content">
   375                                     </div>
   373                                     </div>
   376                                 </div>
   374                                 </div>
   377                             </div><!--article -->
   375                             </div><!--article -->
   378                             <div class="article">
   376                             <div class="article">
   379                                 <div class="inner-article clearfix">
   377                                 <div class="inner-article clearfix">
   380                                     <h2><a href="#"> Affaire Lorem »</a></h2>
   378                                     <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
   381                                     <p class="author">
   379                                     <p class="author">
   382                                         <a href="#">23 JANVIER 2024</a><br/>
   380                                         <a href="#">23 JANVIER 2024</a><br/>
   383                                         by <a href="#">Jean Dujardin</a>
   381                                         by <a href="#">Jean Dujardin</a>
   384                                     </p>
   382                                     </p>
   385                                     <div class="article-content">
   383                                     <div class="article-content">
   435         </div>
   433         </div>
   436         <!-- JavaScript -->
   434         <!-- JavaScript -->
   437         <script src="js/vendor/jquery-1.8.0.min.js"></script>
   435         <script src="js/vendor/jquery-1.8.0.min.js"></script>
   438         <script src="js/vendor/jquery-ui-1.8.24.custom.min.js"></script>
   436         <script src="js/vendor/jquery-ui-1.8.24.custom.min.js"></script>
   439         <script src="js/vendor/dragslider.js"></script>
   437         <script src="js/vendor/dragslider.js"></script>
       
   438         <script src="js/lib/raphael-min.js"></script>
       
   439         <script src="js/lib/underscore-min.js"></script>
   440         <script src="js/plugins.js"></script>
   440         <script src="js/plugins.js"></script>
   441         <script src="js/main.js"></script>
   441         <script src="js/main.js"></script>
       
   442         <script src="js/streamgraph.js"></script>
   442 
   443 
   443     </body>
   444     </body>
   444 </html>
   445 </html>