5 <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> |
5 <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> |
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>Gabarit</title> |
9 <title>Gabarit</title> |
10 |
|
11 |
|
12 |
|
13 <link rel="stylesheet" href="css/reset.css" /> |
10 <link rel="stylesheet" href="css/reset.css" /> |
14 <link rel="stylesheet" href="css/style.css" /> |
11 <link rel="stylesheet" href="css/common.css" /> |
15 <link rel="stylesheet" href="css/ui-red/jquery-ui-1.9.0.custom.min.css"> |
12 <link rel="stylesheet" href="css/article.css" /> |
|
13 <link rel="stylesheet" href="css/ui-red/jquery-ui.css"> |
16 <script src="js/vendor/modernizr-2.6.1.min.js"></script> |
14 <script src="js/vendor/modernizr-2.6.1.min.js"></script> |
17 </head> |
15 </head> |
18 <body> |
16 <body> |
19 |
17 |
20 |
18 |
167 <div class="article"> |
165 <div class="article"> |
168 <div class="inner-article clearfix"> |
166 <div class="inner-article clearfix"> |
169 <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2> |
167 <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2> |
170 <p class="number-article"> |
168 <p class="number-article"> |
171 <a href="#">48 articles | 320 annotations </a> |
169 <a href="#">48 articles | 320 annotations </a> |
172 <a class="add-annotation" href="#"></a> |
170 <a title="ajouter une annotation" class="add-annotation" href="#"></a> |
|
171 </p> |
|
172 |
|
173 <div class="article-annotations"> |
|
174 <a title="title" class="blue" href="#" style="width:20%;"></a> |
|
175 <a title="title" class="green" href="#" style="width:20%;"></a> |
|
176 <a title="title" class="red" href="#" style="width:40%;"></a> |
|
177 <a title="title" class="empty" href="#" style="width:20%;"></a> |
|
178 </div> |
|
179 <div class="article-content"> |
|
180 <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
|
181 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, |
|
182 |
|
183 </p> |
|
184 |
|
185 <ul class="links"> |
|
186 <ul> |
|
187 <li><a href="#">Karachi crise</a></li> |
|
188 <li><a href="#">Karachi crise</a></li> |
|
189 <li><a href="#">Karachi crise</a></li> |
|
190 </ul> |
|
191 </ul> |
|
192 </div> |
|
193 </div> |
|
194 </div><!--article --> |
|
195 |
|
196 <div class="article"> |
|
197 <div class="inner-article clearfix"> |
|
198 <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2> |
|
199 <p class="number-article"> |
|
200 <a href="#">48 articles | 320 annotations </a> |
|
201 <a title="ajouter une annotation" class="add-annotation" href="#"></a> |
173 </p> |
202 </p> |
174 |
203 |
175 <div class="article-annotations"> |
204 <div class="article-annotations"> |
176 <a title="title" class="blue" href="#" style="width:20%;"></a> |
205 <a title="title" class="blue" href="#" style="width:20%;"></a> |
177 <a title="title" class="green" href="#" style="width:20%;"></a> |
206 <a title="title" class="green" href="#" style="width:20%;"></a> |
178 <a title="title" class="red" href="#" style="width:60%;"></a> |
207 <a title="title" class="red" href="#" style="width:60%;"></a> |
179 </div> |
208 </div> |
180 <div class="article-content"> |
209 <div class="article-content"> |
|
210 <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div> |
|
211 <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
|
212 tempor incididunt ut labore et dolore magna aliqua. |
|
213 |
|
214 </p> |
|
215 |
|
216 <ul class="links"> |
|
217 <ul> |
|
218 <li><a href="#">Karachi crise</a></li> |
|
219 <li><a href="#">Karachi crise</a></li> |
|
220 <li><a href="#">Karachi crise</a></li> |
|
221 </ul> |
|
222 </ul> |
|
223 </div> |
|
224 </div> |
|
225 </div><!--article --> |
|
226 <div class="article"> |
|
227 <div class="inner-article clearfix"> |
|
228 <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2> |
|
229 <p class="number-article"> |
|
230 <a href="#">48 articles | 320 annotations </a> |
|
231 <a title="ajouter une annotation" class="add-annotation" href="#"></a> |
|
232 </p> |
|
233 |
|
234 <div class="article-annotations"> |
|
235 <a title="title" class="blue" href="#" style="width:20%;"></a> |
|
236 <a title="title" class="green" href="#" style="width:20%;"></a> |
|
237 <a title="title" class="red" href="#" style="width:60%;"></a> |
|
238 </div> |
|
239 <div class="article-content"> |
181 <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
240 <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
182 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, |
241 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, |
183 |
242 |
184 </p> |
243 </p> |
185 |
244 |
197 <div class="article"> |
256 <div class="article"> |
198 <div class="inner-article clearfix"> |
257 <div class="inner-article clearfix"> |
199 <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2> |
258 <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2> |
200 <p class="number-article"> |
259 <p class="number-article"> |
201 <a href="#">48 articles | 320 annotations </a> |
260 <a href="#">48 articles | 320 annotations </a> |
202 <a class="add-annotation" href="#"></a> |
261 <a title="ajouter une annotation" class="add-annotation" href="#"></a> |
|
262 </p> |
|
263 |
|
264 <div class="article-annotations"> |
|
265 <a title="title" class="blue" href="#" style="width:20%;"></a> |
|
266 <a title="title" class="green" href="#" style="width:20%;"></a> |
|
267 <a title="title" class="red" href="#" style="width:40%;"></a> |
|
268 </div> |
|
269 <div class="article-content"> |
|
270 <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div> |
|
271 <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
|
272 tempor incididunt ut labore et dolore magna aliqua. |
|
273 |
|
274 </p> |
|
275 |
|
276 <ul class="links"> |
|
277 <ul> |
|
278 <li><a href="#">Karachi crise</a></li> |
|
279 <li><a href="#">Karachi crise</a></li> |
|
280 <li><a href="#">Karachi crise</a></li> |
|
281 </ul> |
|
282 </ul> |
|
283 </div> |
|
284 </div> |
|
285 </div><!--article --> |
|
286 <div class="article"> |
|
287 <div class="inner-article clearfix"> |
|
288 <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2> |
|
289 <p class="number-article"> |
|
290 <a href="#">48 articles | 320 annotations </a> |
|
291 <a title="ajouter une annotation" class="add-annotation" href="#"></a> |
203 </p> |
292 </p> |
204 |
293 |
205 <div class="article-annotations"> |
294 <div class="article-annotations"> |
206 <a title="title" class="blue" href="#" style="width:20%;"></a> |
295 <a title="title" class="blue" href="#" style="width:20%;"></a> |
207 <a title="title" class="green" href="#" style="width:20%;"></a> |
296 <a title="title" class="green" href="#" style="width:20%;"></a> |
208 <a title="title" class="red" href="#" style="width:60%;"></a> |
297 <a title="title" class="red" href="#" style="width:60%;"></a> |
209 </div> |
298 </div> |
210 <div class="article-content"> |
299 <div class="article-content"> |
211 <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div> |
|
212 <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
|
213 tempor incididunt ut labore et dolore magna aliqua. |
|
214 |
|
215 </p> |
|
216 |
|
217 <ul class="links"> |
|
218 <ul> |
|
219 <li><a href="#">Karachi crise</a></li> |
|
220 <li><a href="#">Karachi crise</a></li> |
|
221 <li><a href="#">Karachi crise</a></li> |
|
222 </ul> |
|
223 </ul> |
|
224 </div> |
|
225 </div> |
|
226 </div><!--article --> |
|
227 <div class="article"> |
|
228 <div class="inner-article clearfix"> |
|
229 <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2> |
|
230 <p class="number-article"> |
|
231 <a href="#">48 articles | 320 annotations </a> |
|
232 <a class="add-annotation" href="#"></a> |
|
233 </p> |
|
234 |
|
235 <div class="article-annotations"> |
|
236 <a title="title" class="blue" href="#" style="width:20%;"></a> |
|
237 <a title="title" class="green" href="#" style="width:20%;"></a> |
|
238 <a title="title" class="red" href="#" style="width:60%;"></a> |
|
239 </div> |
|
240 <div class="article-content"> |
|
241 <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
300 <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
242 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, |
301 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, |
243 |
302 |
244 </p> |
303 </p> |
245 |
304 |
257 <div class="article"> |
316 <div class="article"> |
258 <div class="inner-article clearfix"> |
317 <div class="inner-article clearfix"> |
259 <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2> |
318 <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2> |
260 <p class="number-article"> |
319 <p class="number-article"> |
261 <a href="#">48 articles | 320 annotations </a> |
320 <a href="#">48 articles | 320 annotations </a> |
262 <a class="add-annotation" href="#"></a> |
321 <a title="ajouter une annotation" class="add-annotation" href="#"></a> |
263 </p> |
|
264 |
|
265 <div class="article-annotations"> |
|
266 <a title="title" class="blue" href="#" style="width:20%;"></a> |
|
267 <a title="title" class="green" href="#" style="width:20%;"></a> |
|
268 <a title="title" class="red" href="#" style="width:40%;"></a> |
|
269 </div> |
|
270 <div class="article-content"> |
|
271 <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div> |
|
272 <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
|
273 tempor incididunt ut labore et dolore magna aliqua. |
|
274 |
|
275 </p> |
|
276 |
|
277 <ul class="links"> |
|
278 <ul> |
|
279 <li><a href="#">Karachi crise</a></li> |
|
280 <li><a href="#">Karachi crise</a></li> |
|
281 <li><a href="#">Karachi crise</a></li> |
|
282 </ul> |
|
283 </ul> |
|
284 </div> |
|
285 </div> |
|
286 </div><!--article --> |
|
287 <div class="article"> |
|
288 <div class="inner-article clearfix"> |
|
289 <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2> |
|
290 <p class="number-article"> |
|
291 <a href="#">48 articles | 320 annotations </a> |
|
292 <a class="add-annotation" href="#"></a> |
|
293 </p> |
|
294 |
|
295 <div class="article-annotations"> |
|
296 <a title="title" class="blue" href="#" style="width:20%;"></a> |
|
297 <a title="title" class="green" href="#" style="width:20%;"></a> |
|
298 <a title="title" class="red" href="#" style="width:60%;"></a> |
|
299 </div> |
|
300 <div class="article-content"> |
|
301 <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
|
302 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, |
|
303 |
|
304 </p> |
|
305 |
|
306 <ul class="links"> |
|
307 <ul> |
|
308 <li><a href="#">Karachi crise</a></li> |
|
309 <li><a href="#">Karachi crise</a></li> |
|
310 <li><a href="#">Karachi crise</a></li> |
|
311 </ul> |
|
312 </ul> |
|
313 </div> |
|
314 </div> |
|
315 </div><!--article --> |
|
316 |
|
317 <div class="article"> |
|
318 <div class="inner-article clearfix"> |
|
319 <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2> |
|
320 <p class="number-article"> |
|
321 <a href="#">48 articles | 320 annotations </a> |
|
322 <a class="add-annotation" href="#"></a> |
|
323 </p> |
322 </p> |
324 |
323 |
325 <div class="article-annotations"> |
324 <div class="article-annotations"> |
326 <a title="title" class="blue" href="#" style="width:20%;"></a> |
325 <a title="title" class="blue" href="#" style="width:20%;"></a> |
327 <a title="title" class="green" href="#" style="width:20%;"></a> |
326 <a title="title" class="green" href="#" style="width:20%;"></a> |