LucNgossinga.github.io/index.html at main · LucNgossinga/LucNgossinga.github.io · GitHub

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
<!DOCTYPE html>
<html lang="en">
<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 rel="stylesheet" href="styles.css">
        <title>Travel Agency</title>
</head>
<body>


	<!-- DEBUT EN-TETE -->
	<header>

		<div class="wrapper-header">
               <h1>Travel Agency<span class="orange-point">.</span></h1>
               <nav>
                    <ul>
                         <li><a href="#main-image">Acceuil</a></li>
                         <li><a href="#steps">Destination</a></li>
                         <li><a href="#possibilities">Circuits</a></li>
                         <li><a href="#contact">Contact</a></li>
                    </ul>
               </nav>
          </div>

	</header>
	<!-- Fin en-tete -->

     <!-- DEBUT SECTION main-image -->
	<section id="main-image">
		<div class="wrapper-main-image">
               <h2>Organisez votre <br> <strong>voyage sur mesure</strong></h2>
               <button> <a href="#">Par ici</a></button>
          </div>
	</section>
     <!-- Fin section main-image-->


     <!-- Debut section steps -->
     <section id="steps">
		<div>
               <ul class="wrapper-list-steps">
                    <li id="step1">
                         <img src="Images/steps-icon-1.png" alt="">
                         <h4>Planifier</h4>
                         <p>Confiez-nous vos rêves d'évasion : en famille ou entre amis, nous trouverons la formule qui comblera vos attentes.</p>
                    </li>

                    <li id="step2">
                         <img src="Images/steps-icon-2.png" alt="">
                         <h4>Organiser</h4>
                         <p>Bénéficiez de l'expertise de nos spécialistes de chaque destination : ils vous accompagnes dans la réalisation de votre voyage.</p>
                    </li>

                    <li id="step3">
                         <img src="Images/steps-icon-3.png" alt="">
                         <h4>Voyager</h4>
                         <p>Nous nous chargeons d'assurer votre sécurité et veiller à pleine sérénité tout au long de votre voyage.</p>
                    </li>
               </ul>
          </div>
	</section>
     <!-- Fin section steps -->


	<!-- Debut section possibilities -->
     <section id="possibilities">

		<div class="wrapper-poss">
               <article style="background: url('Images/article-image-1.jpg');">
                    <div class="overlay">
                         <h4>Partez en famille</h4>
                         <hr>
                         <p><small>Offrez le meilleur à ceux que vous aimez et partagez des moments fabuleux !</small></p>
                         <button class="button-2"> <a href="#">Plus d'infos</a></button>
                    </div>
               </article>

               <article style="background: url('Images/article-image-2.jpg');">
                    <div class="overlay">
                         <h4>Envie de s'évader</h4>
                         <hr>
                         <p><small>Parfois un peu d'évasion serait le bienvenue et ferait le plus grand bien !</small></p>
                         <button class="button-2"> <a href="#">Plus d'infos</a></button>
                    </div>

               </article>
          </div>

	</section>
     <!-- Fin contact possibilities -->


     <!-- Debut section contact -->
     <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>
          </div>

          <form action="#">
               <label for="nom">Nom </label>
               <input id="nom" placeholder="Votre nom" name="nom" type="text">

               <label for="email">Email</label>
               <input id="email" placeholder="Votre email" name="email" type="text">

               <input type="submit" value="OK" id="button-3">
          </form>
	</section>
     <!-- Fin section contact-->

	<!-- Debut Footer -->
	<footer>
          <h1>Travel Agency<span class="orange-point">.</span></h1>
          <div class="copyright">Copyright © Tous droits réservés. </div>
	</footer>
	<!-- Fin Footer-->


</body>
</html>