--- a/integration/article.html Wed Oct 03 17:58:05 2012 +0200
+++ b/integration/article.html Mon Oct 08 17:31:29 2012 +0200
@@ -6,7 +6,7 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title>Title</title>
+ <title>Article</title>
@@ -55,6 +55,74 @@
</div>
<a href="#" class="dossier-button">DOSSIERS DOCUMENTAIRES</a>
+
+ <div class="dossier-documentaire">
+ <div class="dossier-documentaire-inner">
+ <h2>MES DOSSIERS</h2>
+ <ul>
+ <li class="clearfix">
+ <a href="#">
+ <img src="img/documentaire-visuel.jpg" alt="" />
+ <span class="documentaire-texte">
+ <h3>Terrorisme</h3>
+ <p>relation entre elation entre</p>
+ </span>
+ </a>
+ </li>
+ <li class="clearfix">
+ <a href="#">
+ <img src="img/documentaire-visuel.jpg" alt="" />
+ <span class="documentaire-texte">
+ <h3>Terrorisme</h3>
+ <p>relation entre elation entre</p>
+ </span>
+ </a>
+ </li>
+ <li class="clearfix">
+ <a href="#">
+ <img src="img/documentaire-visuel.jpg" alt="" />
+ <span class="documentaire-texte">
+ <h3>Terrorisme</h3>
+ <p>relation entre elation entre</p>
+ </span>
+ </a>
+ </li>
+ <li class="clearfix">
+ <a href="#">
+ <img src="img/documentaire-nouveau-dossier.jpg" alt="" />
+ <span class="documentaire-texte">
+ <h3>NOUVEAU DOSSIER</h3>
+ <p>Creér un dossier documentaire</p>
+ </span>
+ </a>
+ </li>
+
+ </ul>
+ <a class="documentaire-lien" href="#"></a>
+ <h2></h2>
+ <ul>
+ <li class="clearfix">
+ <a href="#">
+ <img src="img/documentaire-visuel.jpg" alt="" />
+ <span class="documentaire-texte">
+ <h3>Terrorisme</h3>
+ <p>relation entre elation entre</p>
+ </span>
+ </a>
+ </li>
+ <li class="clearfix">
+ <a href="#">
+ <img src="img/documentaire-visuel.jpg" alt="" />
+ <span class="documentaire-texte">
+ <h3>Terrorisme</h3>
+ <p>relation entre elation entre</p>
+ </span>
+ </a>
+ </li>
+ </ul>
+ <a class="documentaire-lien" href="#"></a>
+ </div>
+ </div><!--dossier-documentaire-->
</div><!-- header -->
<div class="content-wrap clearfix">
@@ -64,21 +132,24 @@
<div class="cluster-wrap">
<a href="#" class="cluster-arrow arrow-left"></a>
<a href="#" class="cluster-arrow arrow-right"></a>
- <div class="cluster-visible">
- <ul class="cluster">
- <li><a href="#">Syrie</a></li>
- <li><a href="#">affaire de Karachi</a></li>
- <li><a href="#">Syrie</a></li>
- <li><a href="#">affaire de Karachi</a></li>
- <li><a href="#">Syrie</a></li>
- <li><a href="#">affaire de Karachi</a></li>
- <li><a href="#">Syrie</a></li>
- <li><a href="#">affaire de Karachi</a></li>
- <li><a href="#">Syrie</a></li>
- <li><a href="#">affaire de Karachi</a></li>
- <li><a href="#">Syrie</a></li>
- <li><a href="#">affaire de Karachi</a></li>
- </ul>
+ <div class="cluster-containment">
+ <div class="cluster-visible">
+
+ <ul class="cluster">
+ <li><a href="#">Début</a></li>
+ <li><a href="#">affaire de Karachi</a></li>
+ <li><a href="#">Syrie</a></li>
+ <li><a href="#">affaire de Karachi</a></li>
+ <li><a href="#">Syrie</a></li>
+ <li><a href="#">affaire de Karachi</a></li>
+ <li><a href="#">Syrie</a></li>
+ <li><a href="#">affaire de Karachi</a></li>
+ <li><a href="#">Syrie</a></li>
+ <li><a href="#">affaire de Karachi</a></li>
+ <li><a href="#">Syrie</a></li>
+ <li><a href="#">Fin</a></li>
+ </ul>
+ </div>
</div>
</div>
@@ -109,7 +180,7 @@
<p><input type="checkbox"> <label for="">International</label> </p>
</form>
</div>
- </div>
+ </div><!-- filtre -->
<div class="widget links">
<h3><a href="">DOSSIER ASSOCIES</a></h3>
<div class="widget-inner">
@@ -120,7 +191,17 @@
<li><a href="#">« Corruption »</a></li>
</ul>
</div>
- </div>
+ </div><!-- links -->
+ <div class="widget affichage">
+ <h3><a href="">AFFICHAGE</a></h3>
+ <div class="widget-inner">
+
+ <ul class="clearfix">
+ <li><a class="treemap active" href="#"><span class="visuel"></span><span class="fonction">Treemap</span> </a></li>
+ <li><a class="liste" href="#"><span class="visuel"></span><span class="fonction">Liste</span> </a></li>
+ </ul>
+ </div>
+ </div><!-- affichage -->
</div>
</div>
@@ -130,7 +211,7 @@
<div class="article">
<div class="inner-article clearfix">
- <h2>Affaire Lorem »</h2>
+ <h2><a href="#"> Affaire Lorem »</a></h2>
<p class="author">
<a href="#">23 JANVIER 2024</a><br/>
by <a href="#">Jean Dujardin</a>
@@ -138,15 +219,30 @@
<div class="article-content">
<p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
- quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
+
</p>
- <img class="article-visuel" src="img/visuel-article.jpg" alt="" />
+
</div>
</div>
</div><!--article -->
<div class="article">
<div class="inner-article clearfix">
- <h2>Affaire Lorem »</h2>
+ <h2><a href="#"> Affaire Lorem »</a></h2>
+ <p class="author">
+ <a href="#">23 JANVIER 2024</a><br/>
+ by <a href="#">Jean Dujardin</a>
+ </p>
+ <div class="article-content">
+ <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
+
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipisicing
+ </p>
+ </div>
+ </div>
+ </div><!--article -->
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a href="#"> Affaire Lorem »</a></h2>
<p class="author">
<a href="#">23 JANVIER 2024</a><br/>
by <a href="#">Jean Dujardin</a>
@@ -154,15 +250,30 @@
<div class="article-content">
<p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
- quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
+
</p>
- <img class="article-visuel" src="img/visuel-article.jpg" alt="" />
+
</div>
</div>
</div><!--article -->
<div class="article">
<div class="inner-article clearfix">
- <h2>Affaire Lorem »</h2>
+ <h2><a href="#"> Affaire Lorem »</a></h2>
+ <p class="author">
+ <a href="#">23 JANVIER 2024</a><br/>
+ by <a href="#">Jean Dujardin</a>
+ </p>
+ <div class="article-content">
+ <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
+
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipisicing
+ </p>
+ </div>
+ </div>
+ </div><!--article -->
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a href="#"> Affaire Lorem »</a></h2>
<p class="author">
<a href="#">23 JANVIER 2024</a><br/>
by <a href="#">Jean Dujardin</a>
@@ -170,15 +281,30 @@
<div class="article-content">
<p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
- quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
+
</p>
- <img class="article-visuel" src="img/visuel-article.jpg" alt="" />
+
</div>
</div>
</div><!--article -->
<div class="article">
<div class="inner-article clearfix">
- <h2>Affaire Lorem »</h2>
+ <h2><a href="#"> Affaire Lorem »</a></h2>
+ <p class="author">
+ <a href="#">23 JANVIER 2024</a><br/>
+ by <a href="#">Jean Dujardin</a>
+ </p>
+ <div class="article-content">
+ <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
+
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipisicing
+ </p>
+ </div>
+ </div>
+ </div><!--article -->
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a href="#"> Affaire Lorem »</a></h2>
<p class="author">
<a href="#">23 JANVIER 2024</a><br/>
by <a href="#">Jean Dujardin</a>
@@ -186,15 +312,30 @@
<div class="article-content">
<p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
- quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
+
</p>
- <img class="article-visuel" src="img/visuel-article.jpg" alt="" />
+
</div>
</div>
</div><!--article -->
<div class="article">
<div class="inner-article clearfix">
- <h2>Affaire Lorem »</h2>
+ <h2><a href="#"> Affaire Lorem »</a></h2>
+ <p class="author">
+ <a href="#">23 JANVIER 2024</a><br/>
+ by <a href="#">Jean Dujardin</a>
+ </p>
+ <div class="article-content">
+ <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
+
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipisicing
+ </p>
+ </div>
+ </div>
+ </div><!--article -->
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a href="#"> Affaire Lorem »</a></h2>
<p class="author">
<a href="#">23 JANVIER 2024</a><br/>
by <a href="#">Jean Dujardin</a>
@@ -202,17 +343,32 @@
<div class="article-content">
<p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
- quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
+
</p>
- <img class="article-visuel" src="img/visuel-article.jpg" alt="" />
+
</div>
</div>
</div><!--article -->
-
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a href="#"> Affaire Lorem »</a></h2>
+ <p class="author">
+ <a href="#">23 JANVIER 2024</a><br/>
+ by <a href="#">Jean Dujardin</a>
+ </p>
+ <div class="article-content">
+ <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
+
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipisicing
+ </p>
+ </div>
+ </div>
+ </div><!--article -->
</div><!-- articles -->
- </div>
+
+ </div><!-- content-right -->
</div>
- <div class="footer">
+ <div class="footer clearfix">
<div class="footer-information">
<h2>Information utiles</h2>
<ul>
@@ -230,15 +386,30 @@
<li>- <a href="#">Conditions d'utilisations générale</a>
</ul>
</div>
+ <div class="footer-partenaire">
+ <h2>Partenaires</h2>
+ <ul>
+ <li><a href="#"><img src="img/logo-iri.jpg" alt="" /></a></li>
+ <li><a href="#"><img src="img/logo-cea.jpg" alt="" /></a></li>
+ <li><a href="#"><img src="img/logo-alcatel.jpg" alt="" /></a></li>
+ </ul>
+ </div>
+ <div class="footer-texte">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+ quis nostrud exercitation ullamco.
+ </p>
+ </div>
</div><!-- footer -->
</div><!-- content-wrap -->
<div class="copyright">
- © Mediapart © Periplus | <a href="#">Mention légales</a> | <a href="#">Chartes éditoriale</a>
+ © Mediapart © Periplus | <a href="#">Mention légales</a> | <a href="#">Chartes éditoriale | <a href="#">CGV | <a href="#">Mediapart.fr</a>
</div>
</div>
<!-- JavaScript -->
<script src="js/vendor/jquery-1.8.0.min.js"></script>
+ <script src="js/vendor/jquery-ui-1.8.24.custom.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>