-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
84 lines (79 loc) · 5.84 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="./style.css">
<title>Zozor - Carnets de voyage</title>
</head>
<body>
<div id="bloc_page">
<header>
<div id="titre_principal">
<div id="logo">
<img src="./images/zozor_logo.png" alt="Logo de Zozor" />
<h1>Zozor</h1>
</div>
<h2>Carnet de voyage</h2>
</div>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">CV</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div id="banniere_image">
<div id="banniere_description">
Retour sur mes vacances aux Etats-Unis...
<a href="#" class="bouton_rouge">Voir l'article <img src="./images/flecheblanchedroite.png" alt=""/></a>
</div>
</div>
<section>
<article>
<h1><img src="./images/ico_epingle.png" alt="Catégorie voyage" class="ico_categorie"/>Je suis un grand voyageur</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ipsum eros, placerat non tristique non, pharetra nec nibh. Etiam sagittis turpis dui, quis pretium ex finibus sit amet. Nulla sagittis est at ante consequat tincidunt. Duis id dapibus magna, eu sollicitudin elit. Etiam sem felis, euismod sit amet ultricies ut, venenatis quis erat. Ut at eros hendrerit, mollis mi vel, gravida orci. Maecenas accumsan, felis at vehicula elementum, lacus velit efficitur lectus, sit amet fringilla mi metus quis eros. Fusce ultrices fringilla enim sit amet lobortis. Proin sed magna congue, posuere velit ac, vehicula elit. Maecenas a tortor et ipsum placerat consectetur ac ac sem.</p>
<p>Proin vulputate turpis non volutpat gravida. Morbi in lacus malesuada, ultricies nibh et, dapibus justo. Donec eget metus nibh. Quisque condimentum diam quis libero dapibus, id consequat metus sollicitudin. Maecenas vel porttitor ante, sed porta leo. In neque nisi, ullamcorper vestibulum est nec, aliquam consequat risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. In mattis condimentum fringilla. Donec vitae justo vel sapien efficitur molestie id quis ante. Pellentesque maximus dolor nec augue semper sodales. Nunc tempor nisi dolor, id fringilla risus ullamcorper non. Proin ac euismod purus. Praesent condimentum dui et tortor lobortis, et tincidunt leo porttitor. Nulla vel est in mauris tristique gravida. Ut hendrerit a tortor at malesuada.</p>
<p>Ut auctor erat in mollis viverra. Phasellus blandit tempus volutpat. Integer eu erat et neque hendrerit faucibus. In libero augue, vehicula ut neque vel, pretium interdum justo. Etiam et nulla nec lorem molestie gravida. Quisque in lacinia odio, non interdum turpis. Nam vel est aliquam, faucibus ex in, laoreet orci. Sed quis quam sit amet arcu venenatis fringilla. Nullam ullamcorper tristique odio, ut suscipit magna luctus eu. Nunc varius sapien purus. Pellentesque turpis eros, ultrices vitae vulputate sed, fermentum vitae ante. Vivamus pulvinar pharetra nibh et cursus. Donec venenatis rhoncus nulla, non posuere felis commodo tempor. Proin eget turpis pharetra, consectetur quam vel, finibus nisl. Nunc laoreet ultricies tortor, porta rutrum arcu eleifend quis.</p>
</article>
<aside>
<h1>A propos de l'auteur</h1>
<img src="./images/bulle.png" alt="" id="fleche_bulle"/>
<p id="photo_zozor"><img src="./images/zozor_classe.png" alt="Photo de Zozor" /></p>
<p>Laisse-moi le temps de me présenter : je m'appelle Zozor, je suis né un 23 novembre 2005.</p>
<p>Bien maigre, n'est-ce pas ? C'est pourquoi, aujourd'hui, j'ai décidé d'écrire ma biographie afin que vous sachiez qui je suis réellement.</p>
<p><img src="./images/facebook.png" alt="Facebook" /><img src="./images/twitter.png" alt="Twitter" /><img src="./images/vimeo.png" alt="Vimeo" /><img src="./images/flickr.png" alt="Flickr" /><img src="./images/rss.png" alt="RSS" /></p>
</aside>
</section>
<footer>
<div id="tweet">
<h1>Mon dernier tweet</h1>
<p>Hii haaaaaan !</p>
<p>le 12 mai à 23h12</p>
</div>
<div id="mes_photos">
<h1>Mes photos</h1>
<p><img src="./images/photo1.jpg" alt="Photographie" /><img src="./images/photo2.jpg" alt="Photographie" /><img src="./images/photo3.jpg" alt="Photographie" /><img src="./images/photo4.jpg" alt="Photographie" /></p>
</div>
<div id="mes_amis">
<h1>Mes amis</h1>
<div id="listes_amis">
<ul>
<li><a href="#">Pupi le lapin</a></li>
<li><a href="#">Mr Baobab</a></li>
<li><a href="#">Kaiwaii</a></li>
<li><a href="#">Perceval.eu</a></li>
</ul>
<ul>
<li><a href="#">Belette</a></li>
<li><a href="#">Le concombre masqué</a></li>
<li><a href="#">Ptit prince</a></li>
<li><a href="#">Mr Fan</a></li>
</ul>
</div>
</div>
</footer>
</div>
</body>
</html>