-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
331 lines (290 loc) · 17.4 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
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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
<!DOCTYPE html>
<html lang="fr">
<head>
<meta content-type="text/html" charset = "UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
<meta name="description"
content="Description de votre site qui se trouvera lors des recherches google.">
<noscript>Your browser does not support JavaScript!</noscript>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="design/css/default.css">
<link rel="shortcut icon" href="Images/logo1.jpg"/>
<title>Le Coin Fleuri - Fleuriste</title>
</head>
<body data-spy="scroll" data-target=".navbar" data-offster="60px">
<nav class="navbar navbar-expand-lg navbar-dark sticky-top bg-primary">
<div class="container justify-content-center">
<div class="container-fluid justify-content-end">
<div class="navbar-header">
<button id="btn" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar" aria-controls="myNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon "></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a class="nav-item nav-link active" href="#accueil">Accueil</a></li>
<li><a class="nav-item nav-link" href="#services">Services</a></li>
<li><a class="nav-item nav-link" href="#equipe">A propos de nous</a></li>
<li> <a class="nav-item nav-link" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</nav>
<header class="bg-primary">
<div class="container p-3" >
<div class="row align-items-center">
<div class='col-md-3'>
<img src="Images/logo1.jpg" class="d-block mx-auto w-50" alt="logo">
</div>
<div class='col-md-6'>
<h1 class="text-white text-uppercase text-center">Le Coin Fleuri</h1>
</div>
<div class='col-md-3'>
<img src="Images/logo2.jpeg" class="d-block mx-auto w-50" alt="fleur">
</div>
</div>
</div>
</header>
<section id="accueil" class="bg-light py-4">
<div class="row">
<div class="col-md-12">
<br>
</div>
</div>
<div class="row align-items-center mt-3">
<div class="col-md-3">
<div class="p-5 text-center">
Tel :<a href="tel:0643280096"><br> 06 43 28 00 96</a> <br>
Mail : <a href="mailto:[email protected]"> <br> [email protected]</a> <br>
</div>
</div>
<div class="col-md-6">
<img src="Images/entreprise.jpg" class="d-block w-75 mx-auto" alt="entreprise">
</div>
<div class="col-md-3 p-5 text-center">
12 rue du Grand Boulevard<br>
35 000 RENNES <br>
FRANCE
</div>
</div>
<div class="container text-center">
<div class="divider1 mt-4"></div>
<div class="row">
<div class="col-md-6">
<div class="container mx-auto">
<h2 class=" py-4 text-primary">Horaires</h2>
<div class=" mt-4">
<span class="text-primary"> Lundi : </span><span class="text-danger">Fermé</span><br>
<span class="text-primary"> Mardi : </span>10h-12h & 14h-18h30<br>
<span class="text-primary"> Mercredi : </span><span class="text-danger">Fermé</span> 14h-19h<br>
<span class="text-primary"> Jeudi : </span>10h-12h & 14h-18h30<br>
<span class="text-primary"> Vendredi : </span>10h-12h & 14h-19h<br>
<span class="text-primary"> Samedi : </span>10h-12h & 14h-19h<br>
<span class="text-primary"> Dimanche : </span> 8h30 - 12h <span class="text-danger">Fermé</span><br>
</div>
</div>
</div>
<div class="col-md-6">
<div class="container">
<h2 class="text-center py-4 text-primary">Plan d'accès</h2>
<div class="embed-responsive embed-responsive-16by9 pt-0 mt-1">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.9914406081484!2d2.2922926152016645!3d48.85837360866273!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e2964e34e2d%3A0x8ddca9ee380ef7e0!2sTour%20Eiffel!5e0!3m2!1sfr!2sfr!4v1591806236015!5m2!1sfr!2sfr"
width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false"
tabindex="0" class="embed-responsive-item">
</iframe>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="services" class="bg-primary pt-4">
<div class="container">
<br>
<div class="divider2"></div>
<h2 class="text-center text-light py-2">Service/Produits</h2>
<div class="row align-items-center d-flex text-center">
<div class="col-md-4 mt-2 pt-3">
<ul>
<li>Bouquets Variés </li>
<li>Livraisons de fleurs </li>
<li>Bouquets de Mariages </li>
</ul>
</div>
<div class="col-md-4">
<ul>
<li>Cadeaux floraux </li>
<li>Décoration Florale</li>
<li>Plantes grasses</li>
</ul>
</div>
<div class="col-md-4">
<ul>
<li>Accessoires pour plantes </li>
<li>Gerbes de fleurs, couronnes funéraires </li>
<li>Composition sur demande </li>
</ul>
</div>
</div>
</div>
<div class="container mt-2 py-4">
<div class="carousel slide" data-ride="carousel" id="carouselProducts">
<ol class="carousel-indicators">
<li data-target="#carouselProducts" data-slide-to="0" class="active"></li>
<li data-target="#carouselProducts" data-slide-to="1"></li>
<li data-target="#carouselProducts" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="Images/carousel1.jpg" alt="fleurs" class="d-block w-50 mx-auto"/>
</div>
<div class="carousel-item">
<img src="Images/carousel2.jpg" alt="flowers" class="d-block w-50 mx-auto"/>
<div class="carousel-caption pt-4">
</div>
</div>
<div class="carousel-item">
<img src="Images/carousel3.jpg" alt="plantes" class="d-block w-50 mx-auto"/>
</div>
</div>
<a class="carousel-control-prev" href="#carouselProducts" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselProducts" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</section>
<section id="equipe" class="pt-4">
<div class="container">
<br>
<div class="divider1"></div>
<h2 class="text-center text-primary mb-3 py-2">QUI SOMMES NOUS</h2>
<div class="container mb-5">
<div class="card-deck">
<div class="card bg-primary text-light" style="width: 18rem;">
<img src="Images/travailleur2.jpg" alt="Fleuriste" class="card-img-top">
<div class="card-body p-4">
<h5 class="card-title">Léa Corner</h5>
<div class="card-text">Propriétaire et créatrice d'art floral depuis 15 ans. <br>
<span class="font-italic">"Un bouquet c'est du bonheur à emporter, un sourire à donner, un visage à éclairer"</span></div>
</div>
</div>
<div class="card bg-primary text-light" style="width: 18rem;">
<img src="Images/travailleur1.jpg" alt="Fleuriste" class="card-img-top ">
<div class="card-body p-4">
<h5 class="card-title">Melinda Dobin</h5>
<div class="card-text">Vendeuse et préparatrice de bouquets depuis 6 ans. Spécialisée dans l'association de couleurs. Meilleure apprentie de France 2015<br>
<span class="font-italic">"Chaque couleur a une significaton, chaque plante également. Comme chaque occasion est unique, chaque bouquet doit-l'être aussi."</span></div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="contact" class="bg-primary pt-4">
<div class="container">
<br>
<div class="divider2"></div>
<h2 class="py-4 text-center text-light">Contact</h2>
<div class="row justify-content-center">
<div class="col-lg-10 col-lg-offset-1"> <!-- On laisse 1 a gauche et 1 a droite pour avoir une bordure colorée tout autour-->
<form id="contact-form" method="post" action="" role="form">
<div class="row text-light">
<div class="col-md-6">
<label for="firstname">Prénom *</label> <!-- for="firstname" permet le focus bleu -->
<input type="texte" id="firstname" name="firstname" class="form-control" placeholder="Votre Prénom">
<p class="comments"></p>
</div>
<div class="col-md-6">
<label for="name">Nom *</label>
<input type="texte" id="name" name="name" class="form-control" placeholder="Votre Nom">
<p class="comments"></p>
</div>
<div class="col-md-6">
<label for="email">Email *</label>
<input type="email" id="email" name="email" class="form-control" placeholder="Votre Email" >
<p class="comments"></p>
</div>
<div class="col-md-6">
<label for="phone">Téléphone</label>
<input type="tel" id="phone" name="phone" class="form-control" placeholder="Votre Téléphone">
<p class="comments"></p>
</div>
<div class="col-md-6 mb-2">
<label for="choix">Sélectionnez la raison du message*</label>
<select id="choix" name="choix" class="form-control" >
<option>Demander un renseignement</option>
<option>Etablir un devis</option>
<option>Démarchage</option>
<option>Autres</option>
<p class="comments"></p>
</select>
</div>
<div class="col-md-12">
<label for="phone">Message *</label>
<textarea id="message" name="message" class="form-control" placeholder="Votre Message" rows="4"></textarea>
<p class="comments"></p>
</div>
<div class="col-md-12">
<p><strong>* Ces informations sont requises</strong></p>
</div>
<div class="col-md-12 mb-3">
<input type="submit" class="btn btn1 d-block mx-auto" value="Envoyer">
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<footer class="bg-dark p-3 text-light">
<div class="container">
<div class="text-center text-uppercase ">
<a href="#accueil" id="remonte"> <svg class="bi bi-caret-up-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M7.247 4.86l-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 00.753-1.659l-4.796-5.48a1 1 0 00-1.506 0z"/>
</svg> </a>
<h3 class="m-3 pb-3">Le Coin Fleuri</h3>
</div>
</div>
<div class="container-fluid pb-4 text-center">
<div class="row">
<div class="col-md-3 my-2">
<h5 class="text-underline text-uppercase pl-1">Infos</h5>
<div class="">
<a href="Docs/cgv.pdf" target="_blank">CGV</a><br>
<a href="mailto:[email protected]">Contact</a><br>
</div>
</div>
<div class="col-md-3 my-2">
<h5 class="text-underline text-uppercase">Nous Trouver :</h5>
<div class="text-justify text-center">
Le Coin Fleuri<br>
32 Rue Du Grand Boulevard
35 000 RENNES<br>
</div>
</div>
<div class="col-md-3 my-2">
<h5 class="text-underline text-uppercase">Certifications:</h5>
<div class="text-justify text-center">
Fleuriste - Bio<br>
Plantes d'origines Européennes<br>
Meilleure apprentie de France 2015<br>
</div>
</div>
<div class="col-md-3 align-self-end mt-5">
© Copyright Le Coin Fleuri <br>
Tous droits réservés - 2020
</div>
</div>
</div>
</footer>
<script src="jquery-3.4.1.min.js"></script>
<script src="JS/script.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>