28 |
30 |
29 <div class="recherche-wrap"> |
31 <div class="recherche-wrap"> |
30 <h1><img src="img/mediapart-by-periplus.jpg" alt="" /></h1> |
32 <h1><img src="img/mediapart-by-periplus.jpg" alt="" /></h1> |
31 <form action="#"> |
33 <form action="#"> |
32 <p > |
34 <p > |
33 <a href="#" class="photo"></a> |
35 <a data-trace-id="" data-trace-type="search" data-trace-view="head-search-snap" href="#" class="photo"></a> |
34 <input name="recherche" placeholder="Rechercher" class="input-recherche" type="text" /> |
36 <input data-trace-id="" data-trace-type="search" data-trace-view="head-search-query" name="recherche" placeholder="Rechercher" class="input-recherche" type="text" /> |
35 <input type="submit" value="" class="recherche-submit"/> |
37 <input data-trace-id="" data-trace-type="search" data-trace-view="head-search-submit" type="submit" value="" class="recherche-submit"/> |
36 |
38 |
37 </p> |
39 </p> |
38 </form> |
40 </form> |
39 </div> |
41 </div> |
40 |
42 |
41 <ul class="header-menu"> |
43 <ul class="header-menu"> |
42 <li><a href="#"><img src="img/home-button.jpg" alt="" /> </a></li> |
44 <li><a data-trace-id="" data-trace-type="navigation" data-trace-view="navigation-home" title="accueil" class="home" href="#"></a></li> |
43 <li><a href="#">INTERNATIONAL</a></li> |
45 <li><a data-trace-id="" data-trace-type="navigation" data-trace-view="navigation-international" href="#">INTERNATIONAL</a></li> |
44 <li><a href="#">FRANCE</a></li> |
46 <li><a data-trace-id="" data-trace-type="navigation" data-trace-view="navigation-france" href="#">FRANCE</a></li> |
45 <li><a href="#">ECONOMIE</a></li> |
47 <li><a data-trace-id="" data-trace-type="navigation" data-trace-view="navigation-economie" href="#">ECONOMIE</a></li> |
46 <li><a href="#">CULTURE</a></li> |
48 <li><a data-trace-id="" data-trace-type="navigation" data-trace-view="navigation-culture" href="#">CULTURE</a></li> |
47 <li><a href="#">CLUSTER X</a></li> |
49 <li><a data-trace-id="" data-trace-type="navigation" data-trace-view="navigation-cluster" href="#">CLUSTER X</a></li> |
48 </ul> |
50 </ul> |
49 |
51 |
50 <div class="login-wrap"> |
52 <div class="login-wrap"> |
51 <h2>CONNECTER VOUS</h2> |
53 <h2>CONNECTER VOUS</h2> |
52 <form action="#"> |
54 <form action="#"> |
53 <p><input type="text" name="identifiant" placeholder="Identifiant" /></p> |
55 <p><input data-trace-id="" data-trace-type="login" data-trace-view="login-login" type="text" name="identifiant" placeholder="Identifiant" /></p> |
54 <p class="submit-wrap"> |
56 <p class="submit-wrap"> |
55 <input class="password" type="password" name="password"/> |
57 <input data-trace-id="" data-trace-type="login" data-trace-view="login-password" class="password" type="password" name="password"/> |
56 <input class="submit-button" type="submit" value="OK" /> |
58 <input data-trace-id="" data-trace-type="login" data-trace-view="login-submit" class="submit-button" type="submit" value="OK" /> |
57 </p> |
59 </p> |
58 </form> |
60 </form> |
59 <p class="password-lost"><a href="">Mot de passe oublié ?</a> </p> |
61 <p class="password-lost"><a data-trace-id="" data-trace-type="login" data-trace-view="login-password-lost" href="">Mot de passe oublié ?</a> </p> |
60 |
62 |
61 |
63 |
62 </div> |
64 </div> |
63 <a href="#" class="dossier-button">DOSSIERS DOCUMENTAIRES</a> |
65 <a data-trace-id="" data-trace-type="dossiers-documentaires" data-trace-view="open-dossiers-documentaires" href="#" class="dossier-button">DOSSIERS DOCUMENTAIRES</a> |
64 |
66 |
65 <div class="dossier-documentaire"> |
67 <div class="dossier-documentaire"> |
66 <div class="dossier-documentaire-inner"> |
68 <div class="dossier-documentaire-inner"> |
67 <h2>MES DOSSIERS</h2> |
69 <h2>MES DOSSIERS</h2> |
68 <ul> |
70 <ul> |
69 <li class="clearfix"> |
71 <li class="clearfix"> |
|
72 <a data-trace-id="" data-trace-type="dossiers-documentaires" data-trace-view="link-dossiers-documentaires" data-trace-weight="1" href="#"> |
|
73 <img src="img/documentaire-visuel.jpg" alt="" /> |
|
74 <span class="documentaire-texte"> |
|
75 <h3>Terrorisme</h3> |
|
76 <p>relation entre elation entre</p> |
|
77 </span> |
|
78 </a> |
|
79 </li> |
|
80 <li class="clearfix"> |
70 <a href="#"> |
81 <a href="#"> |
71 <img src="img/documentaire-visuel.jpg" alt="" /> |
82 <img src="img/documentaire-visuel.jpg" alt="" /> |
72 <span class="documentaire-texte"> |
83 <span class="documentaire-texte"> |
73 <h3>Terrorisme</h3> |
84 <h3>Terrorisme</h3> |
74 <p>relation entre elation entre</p> |
85 <p>relation entre elation entre</p> |
158 </div> |
160 </div> |
159 </div> |
161 </div> |
160 </div> |
162 </div> |
161 |
163 |
162 <div class="content-right"> |
164 <div class="content-right"> |
163 <div class="actus"> |
165 |
164 <!-- |
166 <div id="treemap"> |
165 <div class="actu"> |
167 <div id="actus" class="actus"> |
166 <a href="#"> |
168 </div> <!-- actus --> |
167 <img src="img/home-visuel-1.jpg" alt="" /> |
|
168 </a> |
|
169 <div class="inner-actu"> |
|
170 <h2> <a href="#">Affaires Bettecourt</a></h2> |
|
171 <div class="links"> |
|
172 <ul> |
|
173 <li><a href="#" title="Supprimer le cluster" class="trash"></a></li> |
|
174 <li><a href="#" title="317 Annotations sur ce cluster" class="file"><span>317</span></a></li> |
|
175 <li><a href="#" title="Ajouter une annotation au cluster" class="comment"></a></li> |
|
176 </ul> |
|
177 </div> |
|
178 </div> |
|
179 </div> |
169 </div> |
180 <div class="actu"> |
170 |
181 <a href="#"> |
171 |
182 <img src="img/home-visuel-1.jpg" alt="" /> |
172 <div id="liste"> |
183 </a> |
173 <div class="articles"> |
184 <div class="inner-actu"> |
174 |
185 <h2> <a href="#">Affaires Bettecourt</a></h2> |
175 <div class="tooltip"></div> |
186 <div class="links"> |
176 |
187 <ul> |
177 <div class="article"> |
188 <li><a href="#" title="Supprimer le cluster" class="trash"></a></li> |
178 <div class="inner-article clearfix"> |
189 <li><a href="#" title="317 Annotations sur ce cluster" class="file"><span>317</span></a></li> |
179 <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2> |
190 <li><a href="#" title="Ajouter une annotation au cluster" class="comment"></a></li> |
180 <p class="number-article"> |
191 </ul> |
181 <a href="#">48 articles | 320 annotations </a> |
192 </div> |
182 <a title="ajouter une annotation" class="add-annotation" href="#"></a> |
193 </div> |
183 </p> |
194 </div> |
184 |
195 |
185 <div class="article-annotations"> |
196 <div class="actu"> |
186 <a title="48 annotations" class="blue" href="#" style="width:20%;"></a> |
197 <a href="#"> |
187 <a title="title" class="green" href="#" style="width:20%;"></a> |
198 <img src="img/home-visuel-3.jpg" alt="" /> |
188 <a title="title" class="red" href="#" style="width:40%;"></a> |
199 </a> |
189 <a title="title" class="empty" href="#" style="width:20%;"></a> |
200 <div class="inner-actu"> |
190 </div> |
201 <h2> <a href="#">Affaires Bettecourt</a></h2> |
191 <div class="article-content"> |
202 <div class="links"> |
192 <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
203 <ul> |
193 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, |
204 <li><a href="#" title="Supprimer le cluster" class="trash"></a></li> |
194 |
205 <li><a href="#" title="317 Annotations sur ce cluster" class="file"><span>317</span></a></li> |
195 </p> |
206 <li><a href="#" title="Ajouter une annotation au cluster" class="comment"></a></li> |
196 |
207 </ul> |
197 <ul class="links"> |
208 </div> |
198 <ul> |
209 </div> |
199 <li><a href="#">Karachi crise</a></li> |
210 </div> |
200 <li><a href="#">Karachi crise</a></li> |
211 <div class="actu"> |
201 <li><a href="#">Karachi crise</a></li> |
212 <a href="#"> |
202 </ul> |
213 <img src="img/home-visuel-2.jpg" alt="" /> |
203 </ul> |
214 </a> |
204 </div> |
215 <div class="inner-actu"> |
205 </div> |
216 <h2> <a href="#">Affaires Bettecourt</a></h2> |
206 </div><!--article --> |
217 <div class="links"> |
207 |
218 <ul> |
208 <div class="article"> |
219 <li><a href="#" title="Supprimer le cluster" class="trash"></a></li> |
209 <div class="inner-article clearfix"> |
220 <li><a href="#" title="317 Annotations sur ce cluster" class="file"><span>317</span></a></li> |
210 <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2> |
221 <li><a href="#" title="Ajouter une annotation au cluster" class="comment"></a></li> |
211 <p class="number-article"> |
222 </ul> |
212 <a href="#">48 articles | 320 annotations </a> |
223 </div> |
213 <a title="ajouter une annotation" class="add-annotation" href="#"></a> |
224 </div> |
214 </p> |
225 </div> |
215 |
226 <div class="actu"> |
216 <div class="article-annotations"> |
227 <a href="#"> |
217 <a title="title" class="blue" href="#" style="width:20%;"></a> |
228 <img src="img/home-visuel-4.jpg" alt="" /> |
218 <a title="title" class="green" href="#" style="width:20%;"></a> |
229 </a> |
219 <a title="title" class="red" href="#" style="width:40%;"></a> |
230 <div class="inner-actu"> |
220 <a title="title" class="empty" href="#" style="width:20%;"></a> |
231 <h2> <a href="#">Affaires Bettecourt</a></h2> |
221 </div> |
232 <div class="links"> |
222 <div class="article-content"> |
233 <ul> |
223 <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div> |
234 <li><a href="#" title="Supprimer le cluster" class="trash"></a></li> |
224 <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
235 <li><a href="#" title="317 Annotations sur ce cluster" class="file"><span>317</span></a></li> |
225 tempor incididunt ut labore et dolore magna aliqua. |
236 <li><a href="#" title="Ajouter une annotation au cluster" class="comment"></a></li> |
226 |
237 </ul> |
227 </p> |
238 </div> |
228 |
239 </div> |
229 <ul class="links"> |
240 </div> |
230 <ul> |
241 <div class="actu"> |
231 <li><a href="#">Karachi crise</a></li> |
242 <a href="#"> |
232 <li><a href="#">Karachi crise</a></li> |
243 <img src="img/home-visuel-3.jpg" alt="" /> |
233 <li><a href="#">Karachi crise</a></li> |
244 </a> |
234 </ul> |
245 <div class="inner-actu"> |
235 </ul> |
246 <h2> <a href="#">Affaires Bettecourt</a></h2> |
236 </div> |
247 <div class="links"> |
237 </div> |
248 <ul> |
238 </div><!--article --> |
249 <li><a href="#" title="Supprimer le cluster" class="trash"></a></li> |
239 <div class="article"> |
250 <li><a href="#" title="317 Annotations sur ce cluster" class="file"><span>317</span></a></li> |
240 <div class="inner-article clearfix"> |
251 <li><a href="#" title="Ajouter une annotation au cluster" class="comment"></a></li> |
241 <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2> |
252 </ul> |
242 <p class="number-article"> |
253 </div> |
243 <a href="#">48 articles | 320 annotations </a> |
254 </div> |
244 <a title="ajouter une annotation" class="add-annotation" href="#"></a> |
255 </div> |
245 </p> |
256 --> |
246 |
257 <div id="treemap1"> |
247 <div class="article-annotations"> |
258 |
248 <a title="title" class="blue" href="#" style="width:20%;"></a> |
259 </div> |
249 <a title="title" class="green" href="#" style="width:20%;"></a> |
260 </div> <!-- actus --> |
250 <a title="title" class="red" href="#" style="width:40%;"></a> |
|
251 <a title="title" class="empty" href="#" style="width:20%;"></a> |
|
252 </div> |
|
253 <div class="article-content"> |
|
254 <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
|
255 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, |
|
256 |
|
257 </p> |
|
258 |
|
259 <ul class="links"> |
|
260 <ul> |
|
261 <li><a href="#">Karachi crise</a></li> |
|
262 <li><a href="#">Karachi crise</a></li> |
|
263 <li><a href="#">Karachi crise</a></li> |
|
264 </ul> |
|
265 </ul> |
|
266 </div> |
|
267 </div> |
|
268 </div><!--article --> |
|
269 |
|
270 <div class="article"> |
|
271 <div class="inner-article clearfix"> |
|
272 <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2> |
|
273 <p class="number-article"> |
|
274 <a href="#">48 articles | 320 annotations </a> |
|
275 <a title="ajouter une annotation" class="add-annotation" href="#"></a> |
|
276 </p> |
|
277 |
|
278 <div class="article-annotations"> |
|
279 <a title="title" class="blue" href="#" style="width:20%;"></a> |
|
280 <a title="title" class="green" href="#" style="width:20%;"></a> |
|
281 <a title="title" class="red" href="#" style="width:40%;"></a> |
|
282 <a title="title" class="empty" href="#" style="width:20%;"></a> |
|
283 </div> |
|
284 <div class="article-content"> |
|
285 <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 |
|
287 tempor incididunt ut labore et dolore magna aliqua. |
|
288 |
|
289 </p> |
|
290 |
|
291 <ul class="links"> |
|
292 <ul> |
|
293 <li><a href="#">Karachi crise</a></li> |
|
294 <li><a href="#">Karachi crise</a></li> |
|
295 <li><a href="#">Karachi crise</a></li> |
|
296 </ul> |
|
297 </ul> |
|
298 </div> |
|
299 </div> |
|
300 </div><!--article --> |
|
301 <div class="article"> |
|
302 <div class="inner-article clearfix"> |
|
303 <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2> |
|
304 <p class="number-article"> |
|
305 <a href="#">48 articles | 320 annotations </a> |
|
306 <a title="ajouter une annotation" class="add-annotation" href="#"></a> |
|
307 </p> |
|
308 |
|
309 <div class="article-annotations"> |
|
310 <a title="title" class="blue" href="#" style="width:20%;"></a> |
|
311 <a title="title" class="green" href="#" style="width:20%;"></a> |
|
312 <a title="title" class="red" href="#" style="width:40%;"></a> |
|
313 <a title="title" class="empty" href="#" style="width:20%;"></a> |
|
314 </div> |
|
315 <div class="article-content"> |
|
316 <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
|
317 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, |
|
318 |
|
319 </p> |
|
320 |
|
321 <ul class="links"> |
|
322 <ul> |
|
323 <li><a href="#">Karachi crise</a></li> |
|
324 <li><a href="#">Karachi crise</a></li> |
|
325 <li><a href="#">Karachi crise</a></li> |
|
326 </ul> |
|
327 </ul> |
|
328 </div> |
|
329 </div> |
|
330 </div><!--article --> |
|
331 |
|
332 <div class="article"> |
|
333 <div class="inner-article clearfix"> |
|
334 <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2> |
|
335 <p class="number-article"> |
|
336 <a href="#">48 articles | 320 annotations </a> |
|
337 <a title="ajouter une annotation" class="add-annotation" href="#"></a> |
|
338 </p> |
|
339 |
|
340 <div class="article-annotations"> |
|
341 <a title="title" class="blue" href="#" style="width:20%;"></a> |
|
342 <a title="title" class="green" href="#" style="width:20%;"></a> |
|
343 <a title="title" class="red" href="#" style="width:40%;"></a> |
|
344 <a title="title" class="empty" href="#" style="width:20%;"></a> |
|
345 </div> |
|
346 <div class="article-content"> |
|
347 <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div> |
|
348 <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
|
349 tempor incididunt ut labore et dolore magna aliqua. |
|
350 |
|
351 </p> |
|
352 |
|
353 <ul class="links"> |
|
354 <ul> |
|
355 <li><a href="#">Karachi crise</a></li> |
|
356 <li><a href="#">Karachi crise</a></li> |
|
357 <li><a href="#">Karachi crise</a></li> |
|
358 </ul> |
|
359 </ul> |
|
360 </div> |
|
361 </div> |
|
362 </div><!--article --> |
|
363 |
|
364 |
|
365 |
|
366 </div><!-- articles --> |
|
367 <div class="pagination"> |
|
368 <a href="#" class="active">1</a>.<a href="#">2</a>.<a href="#">3</a>.<a href="#">Suivants »</a> |
|
369 </div> |
|
370 |
|
371 </div><!-- liste --> |
|
372 |
|
373 |
261 |
374 |
262 |
375 |
263 </div><!-- content-right --> |
376 </div><!-- content-right --> |
264 </div> |
377 </div> |
265 <div class="footer clearfix"> |
378 <div class="footer clearfix"> |