integration/gabarit.html
changeset 6 a3e60d7addb3
parent 5 16413123bc8c
child 7 3a5423828487
equal deleted inserted replaced
5:16413123bc8c 6:a3e60d7addb3
    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         <script src="js/vendor/modernizr-2.6.1.min.js"></script>
    16         <script src="js/vendor/modernizr-2.6.1.min.js"></script>
    16     </head>
    17     </head>
    17     <body>
    18     <body>
    18 
    19 
    19 
    20 
   126                 </div><!--dossier-documentaire-->
   127                 </div><!--dossier-documentaire-->
   127             </div><!-- header -->
   128             </div><!-- header -->
   128 
   129 
   129             <div class="content-wrap clearfix">
   130             <div class="content-wrap clearfix">
   130                 <div class="frise">
   131                 <div class="frise">
   131                 
   132                     <div id="slider-range">
   132                 </div>
   133                         <div class="voile-left"></div>
       
   134                         <div class="voile-right"></div>
       
   135                     </div>
       
   136                 </div><!-- frise -->
   133 
   137 
   134 
   138 
   135                 <div class="content clearfix">
   139                 <div class="content clearfix">
   136                     
   140                     
   137 
   141 
   173                                                 <li><a href="#">Karachi crise</a></li>
   177                                                 <li><a href="#">Karachi crise</a></li>
   174                                                 <li><a href="#">Karachi crise</a></li>
   178                                                 <li><a href="#">Karachi crise</a></li>
   175                                             </ul>
   179                                             </ul>
   176                                         </ul>
   180                                         </ul>
   177                                        
   181                                        
       
   182                                             <ul class="annotations clearfix">
       
   183                                                <li>
       
   184                                                     <a class="comment number" href="#"> 
       
   185                                                         <span class="number-value">354</span>
       
   186                                                     </a>
       
   187                                                 </li>
       
   188                                                <li><a class="comment add" href="#"></a></li>
       
   189                                                <li><a class="value plus" href="#">
       
   190                                                     <span class="inner-signe"></span>
       
   191                                                     <span class="inner-value" style="height:20%;"></span>
       
   192                                                 </a></li>
       
   193                                                 <li><a class="value moins" href="#">
       
   194                                                     <span class="inner-signe"></span>
       
   195                                                     <span class="inner-value" style="height:40%;"></span>
       
   196                                                 </a></li>
       
   197                                                 <li><a class="value egal" href="#">
       
   198                                                     <span class="inner-signe"></span>
       
   199                                                     <span class="inner-value" style="height:70%;"></span>
       
   200                                                 </a></li>
       
   201                                                 <li><a class="value unknow" href="#">
       
   202                                                     <span class="inner-signe"></span>
       
   203                                                     <span class="inner-value" style="height:100%;"></span>
       
   204                                                 </a></li>
       
   205                                             </ul>
   178                                     </div>
   206                                     </div>
   179                                 </div>
   207                                 </div>
   180                             </div><!--article -->
   208                             </div><!--article -->
   181 
   209 
   182                             <div class="article">
   210                             <div class="article">
   186                                         48 articles
   214                                         48 articles
   187                                     </p>
   215                                     </p>
   188                                     <div class="article-content">
   216                                     <div class="article-content">
   189                                         <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
   217                                         <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
   190                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   218                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       
   219                                     tempor incididunt ut labore et dolore magna aliqua. 
       
   220                        
       
   221                                         </p>
       
   222 
       
   223                                         <ul class="links">
       
   224                                             <ul>
       
   225                                                 <li><a href="#">Karachi crise</a></li>
       
   226                                                 <li><a href="#">Karachi crise</a></li>
       
   227                                                 <li><a href="#">Karachi crise</a></li>
       
   228                                             </ul>
       
   229                                         </ul>
       
   230                                        
       
   231                                        <ul class="annotations clearfix">
       
   232                                                <li>
       
   233                                                     <a class="comment number" href="#"> 
       
   234                                                         <span class="number-value">354</span>
       
   235                                                     </a>
       
   236                                                 </li>
       
   237                                                <li><a class="comment add" href="#"></a></li>
       
   238                                                <li><a class="value plus" href="#">
       
   239                                                     <span class="inner-signe"></span>
       
   240                                                     <span class="inner-value" style="height:20%;"></span>
       
   241                                                 </a></li>
       
   242                                                 <li><a class="value moins" href="#">
       
   243                                                     <span class="inner-signe"></span>
       
   244                                                     <span class="inner-value" style="height:40%;"></span>
       
   245                                                 </a></li>
       
   246                                                 <li><a class="value egal" href="#">
       
   247                                                     <span class="inner-signe"></span>
       
   248                                                     <span class="inner-value" style="height:70%;"></span>
       
   249                                                 </a></li>
       
   250                                                 <li><a class="value unknow" href="#">
       
   251                                                     <span class="inner-signe"></span>
       
   252                                                     <span class="inner-value" style="height:100%;"></span>
       
   253                                                 </a></li>
       
   254                                             </ul>
       
   255 
       
   256                                     </div>
       
   257                                 </div>
       
   258                             </div><!--article -->
       
   259                             <div class="article">
       
   260                                 <div class="inner-article clearfix">
       
   261                                     <h2><a href="#"> Affaire Lorem »</a></h2>
       
   262                                     <p class="author">
       
   263                                         48 articles
       
   264                                     </p>
       
   265                                     <div class="article-content">
       
   266                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   191                                     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   267                                     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   192                        
   268                        
   193                                         </p>
   269                                         </p>
   194 
   270 
   195                                         <ul class="links">
   271                                         <ul class="links">
   198                                                 <li><a href="#">Karachi crise</a></li>
   274                                                 <li><a href="#">Karachi crise</a></li>
   199                                                 <li><a href="#">Karachi crise</a></li>
   275                                                 <li><a href="#">Karachi crise</a></li>
   200                                             </ul>
   276                                             </ul>
   201                                         </ul>
   277                                         </ul>
   202                                        
   278                                        
       
   279                                             <ul class="annotations clearfix">
       
   280                                                <li>
       
   281                                                     <a class="comment number" href="#"> 
       
   282                                                         <span class="number-value">354</span>
       
   283                                                     </a>
       
   284                                                 </li>
       
   285                                                <li><a class="comment add" href="#"></a></li>
       
   286                                                <li><a class="value plus" href="#">
       
   287                                                     <span class="inner-signe"></span>
       
   288                                                     <span class="inner-value" style="height:20%;"></span>
       
   289                                                 </a></li>
       
   290                                                 <li><a class="value moins" href="#">
       
   291                                                     <span class="inner-signe"></span>
       
   292                                                     <span class="inner-value" style="height:40%;"></span>
       
   293                                                 </a></li>
       
   294                                                 <li><a class="value egal" href="#">
       
   295                                                     <span class="inner-signe"></span>
       
   296                                                     <span class="inner-value" style="height:70%;"></span>
       
   297                                                 </a></li>
       
   298                                                 <li><a class="value unknow" href="#">
       
   299                                                     <span class="inner-signe"></span>
       
   300                                                     <span class="inner-value" style="height:100%;"></span>
       
   301                                                 </a></li>
       
   302                                             </ul>
       
   303                                     </div>
       
   304                                 </div>
       
   305                             </div><!--article -->
       
   306 
       
   307                             <div class="article">
       
   308                                 <div class="inner-article clearfix">
       
   309                                     <h2><a href="#"> Affaire Lorem »</a></h2>
       
   310                                     <p class="author">
       
   311                                         48 articles
       
   312                                     </p>
       
   313                                     <div class="article-content">
       
   314                                         <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
       
   315                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       
   316                                     tempor incididunt ut labore et dolore magna aliqua. 
       
   317                        
       
   318                                         </p>
       
   319 
       
   320                                         <ul class="links">
       
   321                                             <ul>
       
   322                                                 <li><a href="#">Karachi crise</a></li>
       
   323                                                 <li><a href="#">Karachi crise</a></li>
       
   324                                                 <li><a href="#">Karachi crise</a></li>
       
   325                                             </ul>
       
   326                                         </ul>
       
   327                                        
       
   328                                        <ul class="annotations clearfix">
       
   329                                                <li>
       
   330                                                     <a class="comment number" href="#"> 
       
   331                                                         <span class="number-value">354</span>
       
   332                                                     </a>
       
   333                                                 </li>
       
   334                                                <li><a class="comment add" href="#"></a></li>
       
   335                                                <li><a class="value plus" href="#">
       
   336                                                     <span class="inner-signe"></span>
       
   337                                                     <span class="inner-value" style="height:20%;"></span>
       
   338                                                 </a></li>
       
   339                                                 <li><a class="value moins" href="#">
       
   340                                                     <span class="inner-signe"></span>
       
   341                                                     <span class="inner-value" style="height:40%;"></span>
       
   342                                                 </a></li>
       
   343                                                 <li><a class="value egal" href="#">
       
   344                                                     <span class="inner-signe"></span>
       
   345                                                     <span class="inner-value" style="height:70%;"></span>
       
   346                                                 </a></li>
       
   347                                                 <li><a class="value unknow" href="#">
       
   348                                                     <span class="inner-signe"></span>
       
   349                                                     <span class="inner-value" style="height:100%;"></span>
       
   350                                                 </a></li>
       
   351                                             </ul>
       
   352 
   203                                     </div>
   353                                     </div>
   204                                 </div>
   354                                 </div>
   205                             </div><!--article -->
   355                             </div><!--article -->
   206                             <div class="article">
   356                             <div class="article">
   207                                 <div class="inner-article clearfix">
   357                                 <div class="inner-article clearfix">
   221                                                 <li><a href="#">Karachi crise</a></li>
   371                                                 <li><a href="#">Karachi crise</a></li>
   222                                                 <li><a href="#">Karachi crise</a></li>
   372                                                 <li><a href="#">Karachi crise</a></li>
   223                                             </ul>
   373                                             </ul>
   224                                         </ul>
   374                                         </ul>
   225                                        
   375                                        
       
   376                                             <ul class="annotations clearfix">
       
   377                                                <li>
       
   378                                                     <a class="comment number" href="#"> 
       
   379                                                         <span class="number-value">354</span>
       
   380                                                     </a>
       
   381                                                 </li>
       
   382                                                <li><a class="comment add" href="#"></a></li>
       
   383                                                <li><a class="value plus" href="#">
       
   384                                                     <span class="inner-signe"></span>
       
   385                                                     <span class="inner-value" style="height:20%;"></span>
       
   386                                                 </a></li>
       
   387                                                 <li><a class="value moins" href="#">
       
   388                                                     <span class="inner-signe"></span>
       
   389                                                     <span class="inner-value" style="height:40%;"></span>
       
   390                                                 </a></li>
       
   391                                                 <li><a class="value egal" href="#">
       
   392                                                     <span class="inner-signe"></span>
       
   393                                                     <span class="inner-value" style="height:70%;"></span>
       
   394                                                 </a></li>
       
   395                                                 <li><a class="value unknow" href="#">
       
   396                                                     <span class="inner-signe"></span>
       
   397                                                     <span class="inner-value" style="height:100%;"></span>
       
   398                                                 </a></li>
       
   399                                             </ul>
   226                                     </div>
   400                                     </div>
   227                                 </div>
   401                                 </div>
   228                             </div><!--article -->
   402                             </div><!--article -->
   229 
   403 
   230                             <div class="article">
   404                             <div class="article">
   234                                         48 articles
   408                                         48 articles
   235                                     </p>
   409                                     </p>
   236                                     <div class="article-content">
   410                                     <div class="article-content">
   237                                         <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
   411                                         <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
   238                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   412                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       
   413                                     tempor incididunt ut labore et dolore magna aliqua. 
       
   414                        
       
   415                                         </p>
       
   416 
       
   417                                         <ul class="links">
       
   418                                             <ul>
       
   419                                                 <li><a href="#">Karachi crise</a></li>
       
   420                                                 <li><a href="#">Karachi crise</a></li>
       
   421                                                 <li><a href="#">Karachi crise</a></li>
       
   422                                             </ul>
       
   423                                         </ul>
       
   424                                        
       
   425                                        <ul class="annotations clearfix">
       
   426                                                <li>
       
   427                                                     <a class="comment number" href="#"> 
       
   428                                                         <span class="number-value">354</span>
       
   429                                                     </a>
       
   430                                                 </li>
       
   431                                                <li><a class="comment add" href="#"></a></li>
       
   432                                                <li><a class="value plus" href="#">
       
   433                                                     <span class="inner-signe"></span>
       
   434                                                     <span class="inner-value" style="height:20%;"></span>
       
   435                                                 </a></li>
       
   436                                                 <li><a class="value moins" href="#">
       
   437                                                     <span class="inner-signe"></span>
       
   438                                                     <span class="inner-value" style="height:40%;"></span>
       
   439                                                 </a></li>
       
   440                                                 <li><a class="value egal" href="#">
       
   441                                                     <span class="inner-signe"></span>
       
   442                                                     <span class="inner-value" style="height:70%;"></span>
       
   443                                                 </a></li>
       
   444                                                 <li><a class="value unknow" href="#">
       
   445                                                     <span class="inner-signe"></span>
       
   446                                                     <span class="inner-value" style="height:100%;"></span>
       
   447                                                 </a></li>
       
   448                                             </ul>
       
   449 
       
   450                                     </div>
       
   451                                 </div>
       
   452                             </div><!--article -->
       
   453                             <div class="article">
       
   454                                 <div class="inner-article clearfix">
       
   455                                     <h2><a href="#"> Affaire Lorem »</a></h2>
       
   456                                     <p class="author">
       
   457                                         48 articles
       
   458                                     </p>
       
   459                                     <div class="article-content">
       
   460                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   239                                     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   461                                     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   240                        
   462                        
   241                                         </p>
   463                                         </p>
   242 
   464 
   243                                         <ul class="links">
   465                                         <ul class="links">
   246                                                 <li><a href="#">Karachi crise</a></li>
   468                                                 <li><a href="#">Karachi crise</a></li>
   247                                                 <li><a href="#">Karachi crise</a></li>
   469                                                 <li><a href="#">Karachi crise</a></li>
   248                                             </ul>
   470                                             </ul>
   249                                         </ul>
   471                                         </ul>
   250                                        
   472                                        
   251                                     </div>
   473                                             <ul class="annotations clearfix">
   252                                 </div>
   474                                                <li>
   253                             </div><!--article -->
   475                                                     <a class="comment number" href="#"> 
   254                             <div class="article">
   476                                                         <span class="number-value">354</span>
   255                                 <div class="inner-article clearfix">
   477                                                     </a>
   256                                     <h2><a href="#"> Affaire Lorem »</a></h2>
   478                                                 </li>
   257                                     <p class="author">
   479                                                <li><a class="comment add" href="#"></a></li>
   258                                         48 articles
   480                                                <li><a class="value plus" href="#">
   259                                     </p>
   481                                                     <span class="inner-signe"></span>
   260                                     <div class="article-content">
   482                                                     <span class="inner-value" style="height:20%;"></span>
   261                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   483                                                 </a></li>
   262                                     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   484                                                 <li><a class="value moins" href="#">
   263                        
   485                                                     <span class="inner-signe"></span>
   264                                         </p>
   486                                                     <span class="inner-value" style="height:40%;"></span>
   265 
   487                                                 </a></li>
   266                                         <ul class="links">
   488                                                 <li><a class="value egal" href="#">
   267                                             <ul>
   489                                                     <span class="inner-signe"></span>
   268                                                 <li><a href="#">Karachi crise</a></li>
   490                                                     <span class="inner-value" style="height:70%;"></span>
   269                                                 <li><a href="#">Karachi crise</a></li>
   491                                                 </a></li>
   270                                                 <li><a href="#">Karachi crise</a></li>
   492                                                 <li><a class="value unknow" href="#">
   271                                             </ul>
   493                                                     <span class="inner-signe"></span>
   272                                         </ul>
   494                                                     <span class="inner-value" style="height:100%;"></span>
   273                                        
   495                                                 </a></li>
       
   496                                             </ul>
   274                                     </div>
   497                                     </div>
   275                                 </div>
   498                                 </div>
   276                             </div><!--article -->
   499                             </div><!--article -->
   277 
   500 
   278                             <div class="article">
   501                             <div class="article">
   282                                         48 articles
   505                                         48 articles
   283                                     </p>
   506                                     </p>
   284                                     <div class="article-content">
   507                                     <div class="article-content">
   285                                         <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
   508                                         <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
   286                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   509                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   287                                     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   510                                     tempor incididunt ut labore et dolore magna aliqua. 
   288                        
   511                        
   289                                         </p>
   512                                         </p>
   290 
   513 
   291                                         <ul class="links">
   514                                         <ul class="links">
   292                                             <ul>
   515                                             <ul>
   293                                                 <li><a href="#">Karachi crise</a></li>
   516                                                 <li><a href="#">Karachi crise</a></li>
   294                                                 <li><a href="#">Karachi crise</a></li>
   517                                                 <li><a href="#">Karachi crise</a></li>
   295                                                 <li><a href="#">Karachi crise</a></li>
   518                                                 <li><a href="#">Karachi crise</a></li>
   296                                             </ul>
   519                                             </ul>
   297                                         </ul>
   520                                         </ul>
   298                                        
   521                                        
   299                                     </div>
   522                                        <ul class="annotations clearfix">
   300                                 </div>
   523                                                <li>
   301                             </div><!--article -->
   524                                                     <a class="comment number" href="#"> 
   302                             <div class="article">
   525                                                         <span class="number-value">354</span>
   303                                 <div class="inner-article clearfix">
   526                                                     </a>
   304                                     <h2><a href="#"> Affaire Lorem »</a></h2>
   527                                                 </li>
   305                                     <p class="author">
   528                                                <li><a class="comment add" href="#"></a></li>
   306                                         48 articles
   529                                                <li><a class="value plus" href="#">
   307                                     </p>
   530                                                     <span class="inner-signe"></span>
   308                                     <div class="article-content">
   531                                                     <span class="inner-value" style="height:20%;"></span>
   309                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   532                                                 </a></li>
   310                                     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   533                                                 <li><a class="value moins" href="#">
   311                        
   534                                                     <span class="inner-signe"></span>
   312                                         </p>
   535                                                     <span class="inner-value" style="height:40%;"></span>
   313 
   536                                                 </a></li>
   314                                         <ul class="links">
   537                                                 <li><a class="value egal" href="#">
   315                                             <ul>
   538                                                     <span class="inner-signe"></span>
   316                                                 <li><a href="#">Karachi crise</a></li>
   539                                                     <span class="inner-value" style="height:70%;"></span>
   317                                                 <li><a href="#">Karachi crise</a></li>
   540                                                 </a></li>
   318                                                 <li><a href="#">Karachi crise</a></li>
   541                                                 <li><a class="value unknow" href="#">
   319                                             </ul>
   542                                                     <span class="inner-signe"></span>
   320                                         </ul>
   543                                                     <span class="inner-value" style="height:100%;"></span>
   321                                        
   544                                                 </a></li>
   322                                     </div>
   545                                             </ul>
   323                                 </div>
   546 
   324                             </div><!--article -->
   547                                     </div>
   325 
   548                                 </div>
   326                             <div class="article">
   549                             </div><!--article -->
   327                                 <div class="inner-article clearfix">
   550                           
   328                                     <h2><a href="#"> Affaire Lorem »</a></h2>
       
   329                                     <p class="author">
       
   330                                         48 articles
       
   331                                     </p>
       
   332                                     <div class="article-content">
       
   333                                         <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
       
   334                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       
   335                                     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
       
   336                        
       
   337                                         </p>
       
   338 
       
   339                                         <ul class="links">
       
   340                                             <ul>
       
   341                                                 <li><a href="#">Karachi crise</a></li>
       
   342                                                 <li><a href="#">Karachi crise</a></li>
       
   343                                                 <li><a href="#">Karachi crise</a></li>
       
   344                                             </ul>
       
   345                                         </ul>
       
   346                                        
       
   347                                     </div>
       
   348                                 </div>
       
   349                             </div><!--article -->
       
   350                            
   551                            
   351                         </div><!-- articles -->
   552                         </div><!-- articles -->
   352 
   553 
   353                         <div class="pagination">
   554                         <div class="pagination">
   354                             <a href="#" class="active">1</a>.<a href="#">2</a>.<a href="#">3</a>.<a href="#">Suivants »</a>
   555                             <a href="#" class="active">1</a>.<a href="#">2</a>.<a href="#">3</a>.<a href="#">Suivants »</a>
   396             </div>
   597             </div>
   397         </div>
   598         </div>
   398         <!-- JavaScript -->
   599         <!-- JavaScript -->
   399         <script src="js/vendor/jquery-1.8.0.min.js"></script>
   600         <script src="js/vendor/jquery-1.8.0.min.js"></script>
   400         <script src="js/vendor/jquery-ui-1.8.24.custom.min.js"></script>
   601         <script src="js/vendor/jquery-ui-1.8.24.custom.min.js"></script>
       
   602         <script src="js/vendor/dragslider.js"></script>
   401         <script src="js/plugins.js"></script>
   603         <script src="js/plugins.js"></script>
   402         <script src="js/main.js"></script>
   604         <script src="js/main.js"></script>
   403 
   605 
   404     </body>
   606     </body>
   405 </html>
   607 </html>