-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
91 lines (79 loc) · 4.01 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
<!DOCTYPE html>
<html>
<head>
<link href="styles.css" rel="stylesheet">
<title> Travel Agency </title>
</head>
<body>
<header>
<div class ="wrapper">
<h1 class="titre_head">TravelAgency<span class="point">.</span></h1>
<nav>
<ul id = "menu-list">
<li class="menu-el"><a href="#main_image_container">ACCEUIL</a></li>
<li class="menu-el"><a href="#steps">DESTINATION</a></li>
<li class="menu-el"><a href="#possibilities">CIRCUITS</a></li>
<li class="menu-el"><a href="#contact">CONTACT</a></li>
</ul>
</nav>
</div>
</header>
<section id="main_image_container">
<div class ="wrapper">
<img class ="main_image" src="./img/main.jpg" alt="image plage">
<p class="text-image"> <span class="text-orga">ORGANISEZ VOTRE</span><br><span class="text-voya"> VOYAGE SUR MESURE </span></p>
<button class="button-image" type="button">Par ICI</button>
</div>
</section>
<section id="steps">
<div class="wrapper">
<img class="act1" src="img/steps-icon-1.png" alt = "act1">
<p class="planifier"> PLANIFIER </p>
<p class="plan-text">Confiez-nous vos rêves d'évasion en famille ou entre amis, nous trouverons la formule qui comblera vos attentes.</p>
<img class="act2" src="img/steps-icon-2.png" alt = "act1">
<p class="organiser"> ORGANISER </p>
<p class="orga-text">Bénificiez de l'expertise de nos spécialistes de chaque déstination, ils vous accompagnent dans la réalisation de votre voyage. </p>
<img class="act3" src="img/steps-icon-3.png" alt = "act1">
<p class="voyager"> VOYAGER </p>
<p class="voy-text">Nous nous chargeons d'assurer votre sécuritè tout au long de votre voyage.</p>
</div>
</section>
<section id="possibilities">
<div class="wrapper">
<article id = "id-art1">
<div class ="overlay">
<h4> Partez en famille </h4>
<p class = "text-art"> Offrez le meilleur à ceux que vous aimez et partagez des moments favuleux !</p>
<a href ="#" class ="button-art">Plus d'infos</a>
</div>
</article>
<article id = "id-art2">
<div class ="overlay">
<h4> Envie de s'evader </h4>
<p class = "text-art"> Parfois un peu d'évasion serait le bienvenue et ferait le plus grand bien !</p>
<a href ="#" class ="button-art">Plus d'infos</a>
</div>
<div class="clear"></div>
</article>
</div>
</section>
<section id="contact">
<div class="wrapper">
<h3> CONTACTEZ-NOUS </h3>
<p>Chez Travel Agency nous savons que voyager est une aventure humaine mais également un engagement financier important pour vous. C'est pourquoi nous mettons un point d'honneur à prendre en compte chacune de vos attentes pour vous aider dans la préparation de votre séjour, circuit ou voyage sur mesure.</p>
<form>
<label for="name"> Nom </label>
<input type="text" id="name" placeholder="Votre nom">
<label for="email"> Email </label>
<input type="text" id="email" placeholder="Votre email">
<input type="submit" value="ok" class ="button-form">
</form>
</div>
</section>
<footer>
<div class="wrapper">
<p class="titre_head">TravelAgency<span class="point">.</span></p>
</div>
</footer>
</body>
</html>