-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
104 lines (91 loc) · 6.81 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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="zxx">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/zozor_logo.png">
<link rel="stylesheet" href="styles.css">
<title>Zozor - Carnet de voyage</title>
</head>
<body>
<!-- HEADER -->
<header>
<div class="title"><h1><img src="images/zozor_logo.png" alt="Logo Zozor Carnets de voyage"/>Zozor</h1>Carnets de voyage</div>
<nav>
<ul>
<li><a class="home" href="#">ACCUEIL</a></li>
<li><a class="nav_it" href="#">BLOG</a></li>
<li><a class="nav_it" href="#">CV</a></li>
<li><a class="nav_it" href="#">CONTACT</a></li>
</ul>
</nav>
</header>
<!-- Top separator -->
<div class="top_hrule"></div>
<!-- MAIN CONTAINER of the web page -->
<div class="main_container">
<div class="splash_img">
<div class="strip">
<div class="description">Retour sur mes vacances aux États-Unis...</div>
<a class="button" href="#">Voir l'article <div class="rightwhitearrow"></div></a>
</div>
</div>
<main>
<article>
<h2><span class="ico_epingle"></span> JE SUIS UN GRAND VOYAGEUR</h2>
<p>Lorem ipsum dolor sit amet. Eos omnis magni vel iusto dolor eos libero alias cum quia earum et quia voluptate! Ut quos animi et voluptatum quidem non earum illum est fugiat tempore. Id asperiores dolor aut temporibus aliquam vel doloribus ducimus. Aut quia perspiciatis et saepe autem et autem modi et quaerat sequi id deserunt voluptatum est exercitationem sunt! Ut debitis voluptates et voluptate perferendis est quod quia aut incidunt nulla et eius nisi sed voluptate nihil ut <a href="#">sequi</a> dignissimos? Est molestias eaque ut laudantium laudantium eos possimus laudantium qui iste consequuntur. Est voluptas sint in laudantium ratione qui aliquam laboriosam est blanditiis dolorem et molestiae dolores. Est nostrum velit ad autem optio ea neque voluptatem. </p>
<p>A iure delectus eum consequatur quis qui mollitia eveniet eos temporibus tempore eum illo doloremque. Quis perspiciatis ut ducimus nostrum est soluta corporis qui architecto obcaecati ut tempora nihil. Id consequatur officiis hic cumque error qui sequi error. Eos voluptas incidunt ab explicabo cupiditate ut soluta harum eos dolorem earum. Cum quisquam magnam et quisquam officiis et tempora sint. Ea repudiandae veniam sit rerum quos eos necessitatibus veniam sint tenetur et dolorem aperiam. Aut omnis debitis ex voluptates autem perferendis quisquam. Non consequatur molestiae vel blanditiis dolor et voluptates dolores in nulla officia est dolorem magni ab distinctio Quis non sint officia. </p>
<p>Ea porro error non aspernatur nostrum qui distinctio ipsum in architecto harum qui consequuntur laboriosam! Et maiores quidem qui saepe ipsum est nulla eligendi non tenetur harum qui dolorem laborum est rerum nostrum. Ut quibusdam repudiandae est pariatur tenetur aut veritatis modi qui ipsa nihil. Et laboriosam commodi qui officiis voluptas et rerum voluptatibus aut tenetur galisum in assumenda fuga est galisum galisum. Aut nulla libero et vero nulla qui nobis quaerat ut expedita voluptas sed voluptatum totam aut distinctio ipsam qui quas numquam. Rem dolores magni sit voluptas iste ad totam recusandae et nesciunt fuga nam doloribus possimus est voluptas quaerat. Vel explicabo provident aut consequatur blanditiis eos obcaecati nesciunt sit debitis rerum et laborum quia non velit recusandae hic neque beatae. Et soluta voluptatibus qui impedit velit ut molestiae omnis et neque galisum ea consequatur consequatur quo aspernatur maiores! Et voluptatem delectus et nobis omnis eum aperiam repellat ea Quis adipisci aut quibusdam saepe. Est voluptatem dolor id fuga quidem non temporibus et voluptas quisquam. Ab eius enim qui exercitationem tempore est cupiditate iusto nam quisquam adipisci aut ipsum rerum est delectus provident et dolor quisquam! </p>
</article>
<div class="bulle"></div>
<aside>
<div class="sub_container">
<h2>À PROPOS DE L'AUTEUR</h2>
<img src="images/zozor_classe.png" alt="Photo de profil de Zozor"/>
<p>Laissez 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 (ou zBiographie, comme vous voulez !) afin que les zéros sachent enfin qui je suis réellement.</p>
<div class="social">
<a class="facebook" href="https://www.facebook.com"></a>
<a class="twitter" href="https://www.twitter.com"></a>
<a class="vimeo" href="https://www.vimeo.com"></a>
<a class="flickr" href="https://www.flickr.com"></a>
<a class="rss" href="#"></a>
</div>
</div>
</aside>
</main>
</div>
<!-- Bottom sepa ruler -->
<div class="bottom_hrule"></div>
<!-- FOOTER -->
<footer>
<section class="last_tweet">
<h2>MON DERNIER TWEET</h2>
<p>Hi haaaaaan !</p>
<p>le 12 mai à 23h12</p>
</section>
<section class="my_pics">
<h2>MES PHOTOS</h2>
<div class="pictures">
<img src="images/photo1.jpg" alt="Empire State Building"/>
<img src="images/photo2.jpg" alt="San Francisco cable car system"/>
<img src="images/photo3.jpg" alt="Tomb of Napoleon Bonaparte"/>
<img src="images/photo4.jpg" alt="Statue of Liberty"/>
</div>
</section>
<section class="my_friends">
<h2>MES AMIS</h2>
<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>
<li><a href="#">Belette</a></li>
<li><a href="#">Le cocombre masqué</a></li>
<li><a href="#">Ptit prince</a></li>
<li><a href="#">Mr Fan</a></li>
</ul>
</section>
</footer>
</body>
</html>