-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
137 lines (118 loc) · 4.43 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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- *****************:link-css**************** -->
<link rel="stylesheet" href="voyages.css" />
<!-- *****************:titre-page******************* -->
<title>Itinérances</title>
</head>
<body>
<!-- ***********hero-container*********** -->
<section class="hero-container">
<header>
<!-- img liens vers accueil ajouter -->
<a href="index.html"
><img src="./img/boussole-rose-des-vents.png" alt="" width="50px" height="auto"
/></a>
<!-- premier menu déroulant ( découvir) -->
<nav class="dropdown">
<button class="dropbtn">Découvrir</button>
<div class="dropdown-content">
<a href="/algerie.html">Afrique</a>
<a href="/mexique.html">Amérique</a>
<a href="/cambodge.html">Asie</a>
<a href="/allemagne.html">Europe</a>
</div>
</nav>
<!-- second menu déroulant (Carnet de voyage) -->
<nav class="dropdown_name">
<button class="dropbtn_name">Carnets de voyages</button>
<div class="dropdown-content_name">
<a href="/algerie.html">Amine</a>
<a href="/cambodge.html">Anaïs</a>
<a href="/allemagne.html">Medhi</a>
<a href="/mexique.html">Sylvain</a>
</div>
</nav>
<div class="alone_links">
<a href="index.html#aboutus">About us</a>
<a href="/contact.html">Contact</a>
</div>
</header>
</section>
<div class="aboutus_banner">
<h1 id="aboutus">About us</h1>
</div>
<div class="cards_container">
<div class="flip_card">
<div class="flip_card_inner">
<div class="flip_card_front">
<img src="/img/mehdi.png" alt="Avatar de Mehdi Romdhani" style="width: 250px;height: 250px;">
</div>
<div class="flip_card_back">
<h3>Mehdi</h3>
<p>Je suis le formidable Mehdi !</p>
<a href="/allemagne.html">Mon carnet de voyage</a>
</div>
</div>
</div>
<div class="flip_card">
<div class="flip_card_inner">
<div class="flip_card_front">
<img src="/img/anais.png" alt="Avatar de Anaïs Labit" style="width: 250px;height: 250px;">
</div>
<div class="flip_card_back">
<h3>Anaïs</h3>
<p>Mes parents m'ont transmis le virus ! Backpackeuse solo depuis plus de 10 ans, j'adore découvrir le monde hors des sentiers battus. </p>
<a href="/cambodge.html">Mon carnet de voyage</a>
</div>
</div>
</div>
<div class="flip_card">
<div class="flip_card_inner">
<div class="flip_card_front">
<img src="/img/amine.png" alt="Avatar de Mohamed-El-Amine Necib" style="width: 250px;height: 250px;">
</div>
<div class="flip_card_back">
<h3>Amine</h3>
<p>Je suis le formidable Amine !</p>
<a href="/algerie.html">Mon carnet de voyage</a>
</div>
</div>
</div>
<div class="flip_card">
<div class="flip_card_inner">
<div class="flip_card_front">
<img src="/img/sylvain.png" alt="Avatar de Sylvain Mihut" style="width: 250px;height: 250px;">
</div>
<div class="flip_card_back">
<h3>Sylvain</h3>
<p>Adorant la culture mexicaine depuis de nombreuse années je vous invite a découvrir la ville de Guadalajara sur ma page.</p>
<a href="/mexique.html">Mon carnet de voyage</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div>
<p>
© ITINERANCES
<span class="year">2022</span>
, by M.A.A.S
</p>
</div>
<div>
<span>La Plateforme_io</span>
<span>Rue d'Hozier, Marseille, 13002 -</span>
<span>[email protected]</span>
</div>
</footer>
</div>
</body>
</html>