integration/gabarit.html
changeset 14 1d931d99393b
parent 11 95df5542a1ce
child 17 5229a85e53e7
equal deleted inserted replaced
12:7c1ff03a40a7 14:1d931d99393b
    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-red/jquery-ui-1.9.0.custom.min.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>
    17     </head>
    17     </head>
    18     <body>
    18     <body>
    19 
    19 
    20 
    20 
    21 
    21 
    22         <div class="wrap">
    22         <div class="wrap">
    23             <div class="header">
    23             <div class="header">
       
    24                 <div class="logo">
       
    25                   <div class="date">
       
    26                       <span class="year">5</span>
       
    27                       <span class="text">années archivées</span>
       
    28                   </div>
       
    29                 </div>
    24 
    30 
    25                 <div class="recherche-wrap">
    31                 <div class="recherche-wrap">
    26                     <h1><img src="img/mediapart-by-periplus.jpg" alt="" /></h1>
    32                     <h1><img src="img/mediapart-by-periplus.jpg" alt="" /></h1>
    27                     <form action="#">
    33                     <form action="#">
    28                         <p >
    34                         <p >
   136 
   142 
   137                 <div class="content clearfix">
   143                 <div class="content clearfix">
   138                     
   144                     
   139 
   145 
   140                     <div class="content-left">
   146                     <div class="content-left">
   141                      
   147                         <div class="widget-wrapper">
   142                         <div class="widget-wrap">
   148                             <div class="widget-wrap">
   143 
   149 
   144                             <div class="widget affichage">
   150                                 <div class="widget affichage">
   145                                 <h3><a href="#">AFFICHAGE</a></h3>
   151                                     <h3><a href="#">AFFICHAGE</a></h3>
   146                                 <div class="widget-inner">
   152                                     <div class="widget-inner">
   147                                     
   153                                         
   148                                     <ul class="clearfix">
   154                                         <ul class="clearfix">
   149                                         <li><a  title="Passer en vue Treemap" class="treemap active" href="#"><span class="visuel"></span><span class="fonction">Treemap</span> </a></li>
   155                                             <li><a  title="Passer en vue Treemap" class="treemap active" href="#"><span class="visuel"></span><span class="fonction">Treemap</span> </a></li>
   150                                         <li><a  title="Passer en vue Liste" class="liste" href="#"><span class="visuel"></span><span class="fonction">Liste</span> </a></li>
   156                                             <li><a  title="Passer en vue Liste" class="liste" href="#"><span class="visuel"></span><span class="fonction">Liste</span> </a></li>
   151                                     </ul>
   157                                         </ul>
   152                                 </div>
   158                                     </div>
   153                             </div><!-- affichage -->
   159                                 </div><!-- affichage -->
       
   160                             </div><!-- widget-wrap -->
   154                         </div>
   161                         </div>
   155                     </div>
   162                     </div>
   156 
   163 
   157                     <div class="content-right ">
   164                     <div class="content-right ">
   158                         
   165                         
   159                         <div class="articles">
   166                         <div class="articles">
   160                             <div class="article">
   167                             <div class="article">
   161                                 <div class="inner-article clearfix">
   168                                 <div class="inner-article clearfix">
   162                                     <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
   169                                     <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
   163                                     <p class="author">
   170                                     <p class="number-article">
   164                                         48 articles
   171                                         <a href="#">48 articles</a>
   165                                     </p>
   172                                     </p>
   166                                     <div class="article-content">
   173                                     <div class="article-content">
   167                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   174                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   168                                     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   175                                     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   169                        
   176                        
   202                                                 </a></li>
   209                                                 </a></li>
   203                                             </ul>
   210                                             </ul>
   204                                     </div>
   211                                     </div>
   205                                 </div>
   212                                 </div>
   206                             </div><!--article -->
   213                             </div><!--article -->
   207 
       
   208                             <div class="article">
   214                             <div class="article">
   209                                 <div class="inner-article clearfix">
   215                                 <div class="inner-article clearfix">
   210                                     <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
   216                                     <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
   211                                     <p class="author">
   217                                     <p class="number-article">
   212                                         48 articles
   218                                         <a href="#">48 articles</a>
       
   219                                     </p>
       
   220                                     <div class="article-content">
       
   221                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       
   222                                     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
       
   223                        
       
   224                                         </p>
       
   225 
       
   226                                         <ul class="links">
       
   227                                             <ul>
       
   228                                                 <li><a href="#">Karachi crise</a></li>
       
   229                                                 <li><a href="#">Karachi crise</a></li>
       
   230                                                 <li><a href="#">Karachi crise</a></li>
       
   231                                             </ul>
       
   232                                         </ul>
       
   233                                        
       
   234                                             <ul class="annotations clearfix">
       
   235                                                <li>
       
   236                                                     <a title="xx annotations sur ce cluster" class="comment number" href="#"> 
       
   237                                                         <span class="number-value">354</span>
       
   238                                                     </a>
       
   239                                                 </li>
       
   240                                                <li><a title="Ajouter une annotations sur ce cluster" class="comment add" href="#"></a></li>
       
   241                                                <li><a class="value plus" href="#">
       
   242                                                     <span class="inner-signe"></span>
       
   243                                                     <span class="inner-value" style="height:20%;"></span>
       
   244                                                 </a></li>
       
   245                                                 <li><a class="value moins" href="#">
       
   246                                                     <span class="inner-signe"></span>
       
   247                                                     <span class="inner-value" style="height:40%;"></span>
       
   248                                                 </a></li>
       
   249                                                 <li><a class="value egal" href="#">
       
   250                                                     <span class="inner-signe"></span>
       
   251                                                     <span class="inner-value" style="height:70%;"></span>
       
   252                                                 </a></li>
       
   253                                                 <li><a class="value unknow" href="#">
       
   254                                                     <span class="inner-signe"></span>
       
   255                                                     <span class="inner-value" style="height:100%;"></span>
       
   256                                                 </a></li>
       
   257                                             </ul>
       
   258                                     </div>
       
   259                                 </div>
       
   260                             </div><!--article -->
       
   261                             <div class="article">
       
   262                                 <div class="inner-article clearfix">
       
   263                                     <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
       
   264                                     <p class="number-article">
       
   265                                         <a href="#">48 articles</a>
       
   266                                     </p>
       
   267                                     <div class="article-content">
       
   268                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       
   269                                     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
       
   270                        
       
   271                                         </p>
       
   272 
       
   273                                         <ul class="links">
       
   274                                             <ul>
       
   275                                                 <li><a href="#">Karachi crise</a></li>
       
   276                                                 <li><a href="#">Karachi crise</a></li>
       
   277                                                 <li><a href="#">Karachi crise</a></li>
       
   278                                             </ul>
       
   279                                         </ul>
       
   280                                        
       
   281                                             <ul class="annotations clearfix">
       
   282                                                <li>
       
   283                                                     <a title="xx annotations sur ce cluster" class="comment number" href="#"> 
       
   284                                                         <span class="number-value">354</span>
       
   285                                                     </a>
       
   286                                                 </li>
       
   287                                                <li><a title="Ajouter une annotations sur ce cluster" class="comment add" href="#"></a></li>
       
   288                                                <li><a class="value plus" href="#">
       
   289                                                     <span class="inner-signe"></span>
       
   290                                                     <span class="inner-value" style="height:20%;"></span>
       
   291                                                 </a></li>
       
   292                                                 <li><a class="value moins" href="#">
       
   293                                                     <span class="inner-signe"></span>
       
   294                                                     <span class="inner-value" style="height:40%;"></span>
       
   295                                                 </a></li>
       
   296                                                 <li><a class="value egal" href="#">
       
   297                                                     <span class="inner-signe"></span>
       
   298                                                     <span class="inner-value" style="height:70%;"></span>
       
   299                                                 </a></li>
       
   300                                                 <li><a class="value unknow" href="#">
       
   301                                                     <span class="inner-signe"></span>
       
   302                                                     <span class="inner-value" style="height:100%;"></span>
       
   303                                                 </a></li>
       
   304                                             </ul>
       
   305                                     </div>
       
   306                                 </div>
       
   307                             </div><!--article -->
       
   308 
       
   309                             <div class="article">
       
   310                                 <div class="inner-article clearfix">
       
   311                                     <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
       
   312                                     <p class="number-article">
       
   313                                         <a href="#">48 articles</a>
   213                                     </p>
   314                                     </p>
   214                                     <div class="article-content">
   315                                     <div class="article-content">
   215                                         <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
   316                                         <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
   216                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   317                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   217                                     tempor incididunt ut labore et dolore magna aliqua. 
   318                                     tempor incididunt ut labore et dolore magna aliqua. 
   284                         </ul>
   385                         </ul>
   285                     </div>
   386                     </div>
   286                     <div class="footer-partenaire">
   387                     <div class="footer-partenaire">
   287                         <h2>Partenaires</h2>
   388                         <h2>Partenaires</h2>
   288                         <ul>
   389                         <ul>
   289                             <li><a href="#"><img src="img/logo-iri.jpg" alt="" /></a></li>
   390                             <li><a title="iri" href="http://www.iri.centrepompidou.fr/" class="iri"></a></li>
   290                             <li><a href="#"><img src="img/logo-cea.jpg" alt="" /></a></li>
   391                             <li><a title="cea" href="http://www.cea.fr/" class="cea"></a></li>
   291                             <li><a href="#"><img src="img/logo-alcatel.jpg" alt="" /></a></li>
   392                             <li><a title="Alcatel" href="http://www.alcatel-lucent.com" class="alcatel"></a></li>
   292                         </ul>
   393                         </ul>
   293                     </div>
   394                     </div>
   294                     <div class="footer-texte">
   395                     <div class="footer-texte">
   295                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   396                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   296                         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   397                         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,