1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
| <!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<!--logo -->
<div id="container-principal">
<div class="titre">
<header class="flex-container flex-b">
<figure>
<img src="img/logo.jpg" height="80px" width="80px" alt="logo" >
</figure>
<h1> Street life</h1>
</div> <!-- fin titre -->
<!--fin logo -->
<!--menu -->
<nav>
<ul class="menu flex-b">
<li><a href="#">accueil</a></li>
<li><a href="#">archives</a></li>
<li><a href="#">panorama</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">à propos</a></li>
</ul>
</nav>
</header>
<!--fin menu -->
<!--folio -->
<div class="wrapper">
<section class="flex-b">
<figure class="figure">
<h6>1 juillet 2024</h6>
<h2><a href="#">Jungle Street lives</a></h2>
<img alt="street" src="img/image.jpg" >
<figcaption> toward the jugle street life in Antroop, Vermont, winter 2020 </figcaption>
<p>Lorem ipsum dolor <a href="#">Susan Kare</a>sit amet, <a href="#">Dribbble + photoshop</a>consectetur adipiscing elit. Donec non diam in <a href="#">Rich</a>neque blandit commodo. Quisque lobortis sollicitudin nisl pulvinar condimentum. Sed est diam, hendrerit id dignissim vel, adipiscing interdum elit. Vivamus a laoreet eros. Pellentesque sollicitudin pretium fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non diam in neque <a href="#">video</a>blandit commodo. Quisque lobortis sollicitudin nisl pulvinar condimentum. Sed est diam, hendrerit id dignissim vel, adipiscing interdum elit. Vivamus a laoreet eros. Pellentesque <a href="#">original Macintosh</a>sollicitudin pretium fermentum. Lorem ipsum dolor Donec<br> non diam in neque blandit commodo. Quisque lobortis sollicitudin nisl pulvinar condimentum. Sed est diam, hendrerit id dignissim vel, adipiscing interdum elit. Vivamus a laoreet eros. Pellentesque sollicitudin pretium fermentum. Lorem ipsum dolora laoreet eros. Pellentesque sollicitudin pretium fermentum. Lorem ipsum dolor Donec non diam in neque blandit commodo. Quisque lobortis sollicitudin nisl pulvinar condimentum.</p>
</figure>
<figure class="figure" >
<h6>10 juin 2024</h6>
<h2><a href="#">Joe cowards</a></h2>
<img alt="trio" src="img/picture.jpg" >
<figcaption> Joe Cowards' incredible face at jungle life party, sylver, 2019</figcaption>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non diam in neque blandit commodo. Quisque lobortis sollicitudin nisl pulvinar condimentum. Sed est diam, hendrerit id dignissim vel, adipiscing interdum elit. Vivamus a laoreet eros. Pellentesque <br> sollicitudin pretium fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non diam in neque blandit commodo. Quisque lobortis sollicitudin nisl ...
pulvinar condimentum. Sed est diam, hendrerit id dignissim vel, adipiscing interdum elit. Vivamus a laoreet eros. Pellentesque sollicitudin pretium fermentum. Lorem ipsum dolor Donec non diam in neque blandit commodo. <br>Quisque lobortis sollicitudin nisl pulvinar condimentum. Sed est diam, hendrerit id dignissim vel, adipiscing interdum elit. Vivamus a laoreet eros. Pellentesque sollicitudin pretium fermentum. Lorem ipsum dolor a laoreet eros. Pellentesque sollicitudin pretium fermentum. Lorem ipsum dolor Donec non diam in neque blandit commodo. Quisque lobortis sollicitudin nisl pulvinar condimentum. Sed est diam, hendrerit id dignissim vel, adipiscing interdum elit. Vivamus a laoreet eros. Pellentesque sollicitudin pretium fermentum. Lorem ipsum dolor
</p>
</figure>
<figure class="figure">
<h6>11 avril 1815</h6>
<h2><a href="#">Marquee Moon</a></h2>
<img alt="cinema" src="img/cinema.jpg">
<figcaption>Movie theater's marquee, moon, 1815</figcaption>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non diam in neque blandit commodo. Quisque lobortis sollicitudin nisl pulvinar condimentum. Sed est diam, hendrerit id dignissim vel, adipiscing interdum elit. Vivamus a laoreet eros. Pellentesque sollicitudin pretium fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Donec non diam in neque blandit commodo. Quisque lobortis sollicitudin nisl pulvinar condimentum. Sed est diam, hendrerit id dignissim vel, adipiscing interdum elit. Vivamus a laoreet eros. Pellentesque sollicitudin pretium fermentum. Lorem ipsum dolor Donec non diam in neque blandit commodo. Quisque lobortis sollicitudin nisl pulvinar condimentum. Sed est diam, hendrerit id dignissim vel, adipiscing interdum elit. Vivamus a laoreet eros. Pellentesque sollicitudin pretium fermentum. Lorem ipsum dolor a laoreet eros. Pellentesque sollicitudin pretium fermentum. Lorem ipsum dolor Donec non diam in neque blandit commodo. Quisque lobortis sollicitudin nisl pulvinar condimentum. Sed est diam, </p>
</figure>
</section>
<!--fin folio -->
<!--mention -->
<article class="mention" >
<h2><a href="#">Street life n- The jungle groove</a></h2>
<h5>Handcrafted pixels & text</h5>
<h6>copyright 2012-2024, Street life LTD. Shipped from Hambourg, Germany.</h6>
</article>
<!--fin mention -->
<!--footer -->
<figure class="flex-b icone">
<p><a href="#"><img src="img/pinterest.png" width="32" height="32" alt="pinterest" /></a></p>
<p><a href="#"><img src="img/dribbble.png" width="32" height="32" alt="dribbble"/></a></p>
<p><a href="#"><img src="img/twitter.png" width="32" height="32" alt="twitter"/></a></p>
<p><a href="#"><img src="img/instagram.png" width="32" height="32" alt="instagram"/></a></p>
<p><a href="#"><img src="img/email.png" width="31" height="32" alt="email"/></a></p>
</figure>
<!--fin footer -->
</div>
</div>
</div> <!-- fin container-principal -->
</html> |
