-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathprojet_VoyageWebSite.html
167 lines (143 loc) · 6.13 KB
/
projet_VoyageWebSite.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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE HTML>
<html>
<head>
<title>SiteWeb_Projet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-157529848-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-157529848-1');
</script>
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header">
<a href="index.html" class="logo">portfolio</a>
</header>
<!-- Nav -->
<nav id="nav">
<ul class="links">
<li><a href="index.html">Mes projets</a></li>
<li><a href="aPropos.html">Mon profil</a></li>
</ul>
<ul class="icons">
<li><a href="https://www.linkedin.com/in/maxime-gillot-6b0920179/" class="icon brands fa-linkedin"><span class="label">Instagram</span></a></li>
<li><a href="https://github.com/Maxlo24" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
<li><a href="https://www.instagram.com/maxime_gt69" class="icon brands alt fa-instagram"><span class="label">Instagram</span></a></li>
</ul>
</nav>
<div id="BtnHautPage">
<a href="#main" class="button icon solid solo fa-arrow-up scrolly">Top</a>
</div>
<!-- Main -->
<div id="main">
<!-- Post -->
<section class="post">
<!-- Introduction -->
<header class="major">
<span class="date">2019</span>
<h1>Site web <br> agence de voyage</h1>
<p>L'objectif était de réaliser un prototypage de site web destiné à une agence de voyage fictive.</p>
</header>
<div class="image main"><img src="images/SiteVoyage/SiteWebVoyageMain.jpg" alt="" /></div>
<p>Dans le cadre de mes études nous avons été formés aux bases de la programmation web.
Nous devions utiliser le language <b>HTML</b>, <b>CSS</b> et <b>Java Script</b>. <br>
Pour mettre en application nos connaissances, une mission nous a été donnée : <br>
réaliser un site web destiné à une agence de voyage fictive.
</p> <br>
<!-- Cahier des charges -->
<header class="major">
<span class="date">1</span>
<h2>Cahier des charges</h2>
<p>Résumé du cahier des charges.</p>
</header>
<p>
<b>Le site doit être responsive et doit au moins posséder les pages suivantes :</b>
<br>
<!-- Sommaire -->
• <a href="#Accueil" class="scrolly">une page principale qui présente les différentes destinations en photo</a> <br>
• <a href="#Reservation" class="scrolly"> une page de Réservation</a><br>
• <a href="#EC" class="scrolly">une page Espace client</a><br>
• <a href="#Apropos" class="scrolly">une page A propos & Contact</a> <br><br>
<b>Chaque page doit comporter les éléments suivants :</b>
<br>
• un menu de navigation <br>
• un pied de page <br>
• un bouton de retour au sommet de la page
</p><br><br>
<!-- Screenshot des différentes parties du site -->
<header class="major">
<span class="date">2</span>
<h2>Résultat</h2>
<p>Screenshot des différentes pages du site</p>
<br>
<h3><a id="Accueil">Accueil</a> </h3>
<div class="image main"><img src="images/SiteVoyage/SiteWebVoyageAccueil.jpg" alt="Page d'accueil du site" /></div>
<br>
<h3><a id="Reservation">Réservation</a></h3>
<div class="image main"><img src="images/SiteVoyage/SiteWebVoyageReservation.jpg" alt="Page de réservation" /></div>
<br>
<h3><a id="EC">Espace client</a></h3>
<div class="image main"><img src="images/SiteVoyage/SiteWebVoyageEC.jpg" alt="Page espace client" /></div>
<br>
<h3><a id="Apropos">A propos & contact</a></h3>
<div class="image main"><img src="images/SiteVoyage/SiteWebVoyageApropos.jpg" alt="Page à propos et contact" /></div>
</header>
</section>
</div>
<!-- Footer -->
<footer id="footer">
<section class="split contact">
<header class="major">
<span class="date" id="contact">contact</span>
<h1>Me contacter</h1>
</header>
<section class="alt">
<h3>Addresse</h3>
<p>Saint Genis les Ollières, 69290 <br>
France</p>
</section>
<section>
<h3>Phone</h3>
<p><a href="#">+33 (0)7 81 17 52 42</a></p>
</section>
<section>
<h3>Email</h3>
<p><a href="#">[email protected]</a></p>
</section>
<section>
<h3>Social</h3>
<ul class="icons alt">
<li><a href="https://www.linkedin.com/in/maxime-gillot-6b0920179/" class="icon brands fa-linkedin"><span class="label">Instagram</span></a></li>
<li><a href="https://github.com/Maxlo24" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
<li><a href="#" class="icon brands alt fa-instagram"><span class="label">Instagram</span></a></li>
</ul>
</section>
</section>
</footer>
<header id="header">
<a href="index.html" class="logo">portfolio</a>
</header>
<!-- Copyright -->
<div id="copyright">
<ul><li>© Maxime GILLOT</li><li>CSS & JS: <a href="https://html5up.net">HTML5 UP</a></li></ul>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>