-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
344 lines (272 loc) · 16 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
332
333
334
335
336
337
338
339
340
341
342
343
344
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<link href="https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css">
<title>TinyHost - Hébergez 100% gratuit.</title>
</head>
<body>
<!------------------------------NAVBAR------------------------------>
<!-- Logo + Titre -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top navbar-min">
<a href="#">
<img src="logo/new-logo.png" class="d-inline-block align-top logo" alt="">
</a>
<!-- Hamburger Mobile -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Partie droite -->
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#accueil">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#nos-avantages">Nos avantages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#ccm">Comment ça marche ?</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#notre-offre">Notre offre</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#nous-soutenir">Nous soutenir</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#quelques-avis">Quelques avis</a>
</li>
<!-- Bouton Commander -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">COMMANDER</button>
</ul>
</div>
</nav>
<!-- Popup Bouton Commander -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLongTitle">Formulaire de commande</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Après avoir envoyé le formulaire, vous recevrez vos accès FTP directement par email. En cas de souci avec votre serveur, vous serez aussi invité sur notre forum de support.
</div>
<div class="modal-footer">
<form action="">
<input type="text" name="nom" placeholder="Nom (ou pseudo)"><br>
<input type="email" name="e-mail" placeholder="E-mail"><br>
<textarea name="message" placeholder="Raison de votre commande (2 phrases min)"></textarea>
<input type="submit" value="Envoyer la commande" class="btn btn-primary">
</form>
</div>
</div>
</div>
</div>
<!---------------------------FIN NAVBAR------------------------------>
<!-----------------------------HEADER-------------------------------->
<div class="header" id="accueil">
<div class="container">
<div class="row">
<div class="col-12 col-md">
<h1 class="wow fadeInLeft">Hébergez statique et 100% gratuit.</h1>
<p class="wow fadeInLeft">TinyHost vous propose d’héberger votre site internet statique (HTML, CSS, JS) en quelques clics, le tout entièrement gratuitement et sans engagements.</p>
<a href="#notre-offre">
<button type="button" class="btn btn-primary btn-margin wow fadeInUp">Découvrir notre offre <img src="svg/fleche.svg" alt=""></button></a>
<button type="button" class="btn btn-secondary wow fadeInUp" data-toggle="modal" data-target="#exampleModalCenter">Commander</button>
</div>
<div class="col-12 col-md">
<img src="svg/header.svg" alt="" class="header-svg img-responsive wow fadeInRight">
</div>
</div>
</div>
</div>
<!-----------------------------FIN HEADER-------------------------------->
<div class="courbe"></div>
<!-----------------------------AVANTAGES-------------------------------->
<div class="avantages">
<div class="container">
<div class="row">
<div class="col">
<h2 id="nos-avantages" class="wow fadeIn">Nos avantages</h2>
<p class="avantages-p wow fadeIn">En tant que petit hébergeur, nos avantages sont multiples. Voici ci-dessous trois points importants auxquels nous tenons.</p>
</div>
</div>
<div class="row">
<!-- Boxs -->
<div class="col-12 col-md">
<div class="card wow fadeIn">
<img src="svg/one.svg" class="card-img-top img-responsive" alt="...">
<div class="card-body">
<h3 class="card-title">Un support a l’écoute</h3>
<p class="card-text">Nous sommes disponibles à tout moment, et prenons le temps de résoudre tout éventuels problèmes avec nos clients.</p>
</div>
</div>
</div>
<div class="col-12 col-md">
<div class="card wow fadeIn">
<img src="svg/two.svg" class="card-img-top img-responsive" alt="...">
<div class="card-body">
<h3 class="card-title">Gratuit pour toujours</h3>
<p class="card-text">TinyHost est et restera à tout jamais gratuit. Nous ne demandons pas votre carte de crédit et ne facturons aucun supplément.</p>
</div>
</div>
</div>
<div class="col-12 col-md">
<div class="card card-special wow fadeIn">
<img src="svg/three.svg" class="card-img-top img-responsive" alt="...">
<div class="card-body">
<h3 class="card-title">Une sécurité sans faille</h3>
<p class="card-text">Profitez d'un hébergement web professionnel de qualité. Le tout sur des serveurs hébergés en Suisse respectant l'écologie.</p>
</div>
</div>
</div>
<!-- Boxs -->
</div>
</div>
</div>
<!-----------------------------FIN AVANTAGES-------------------------------->
<!---------------------------COMMENT CA MARCHE------------------------------>
<div class="comment-ca-marche">
<div class="container">
<div class="row">
<div class="col">
<h2 class="ccm-h2 wow fadeIn" id="ccm">Comment ça marche ?</h2>
<p class="ccm-p wow fadeIn">Envie d'héberger votre site statique chez nous ? Laissez nous vous expliquer comment cela fonctionne. Pour commander il vous suffit de remplir le formulaire en cliquant sur un des boutons "Commander" présents sur cette page. Une fois votre demande acceptée, vous recevrez par mail vos identifiants nécessaires afin de vous connecter au serveur de votre nouveau site. Aussi simple que ça !</p>
</div>
</div>
</div>
</div>
<!---------------------------FIN COMMENT CA MARCHE------------------------------>
<!-----------------------------NOTRE OFFRE-------------------------------->
<div class="notre-offre">
<div class="container">
<div class="row">
<div class="col">
<h2 id="notre-offre" class="wow fadeIn">Notre offre</h2>
<p class="notre-offre-p wow fadeIn">Pour supporter votre site statique, votre serveur sera équipé des performances idéales afin de faire tourner votre site sans aucune latence.</p>
</div>
</div>
<div class="row">
<!-- Boxs -->
<div class="col-12 col-md">
<div class="card wow fadeIn">
<div class="card-body">
<h3 class="card-title">1 GO de stockage</h3>
<p class="card-text">1GO de stockage est largement suffisant pour accueillir n'importe quel site actuel sans aucun ralentissement.</p>
</div>
</div>
</div>
<div class="col-12 col-md">
<div class="card wow fadeIn">
<div class="card-body">
<h3 class="card-title">1 compte FTP</h3>
<p class="card-text">Votre accès FTP vous permettra d'ajouter ou retirer des fichiers de votre serveur avec une facilité déconcertante.</p>
</div>
</div>
</div>
<div class="col-12 col-md">
<div class="card card-special-2 wow fadeIn">
<div class="card-body">
<h3 class="card-title">1 site statique</h3>
<p class="card-text">Avec notre offre, vous aurez le droit à un hébergement de site statique. Le tout gratuit et sans engagements.</p>
</div>
</div>
</div>
<!-- Boxs -->
</div>
</div>
</div>
<!-----------------------------FIN OTRE OFFRE-------------------------------->
<!----------------------------- NOUS SOUTENIR -------------------------------->
<div class="nous-soutenir">
<div class="container">
<div class="row">
<div class="col-12 col-md">
<img src="svg/nous-soutenir.svg" alt="" class="nous-soutenir-svg img-responsive wow fadeInLeft">
</div>
<div class="col-12 col-md">
<h2 id="nous-soutenir" class="wow fadeIn">Soutenez-nous et obtenez des avantages exclusifs</h2>
<p class="nous-soutenir-p wow fadeIn">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. At vero eos et accusam et justo duo dolores et ea rebum. At vero eos et accusam et justo duo dolores et ea rebum. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</div>
</div>
</div>
</div>
<!----------------------------- FIN NOUS SOUTENIR -------------------------------->
<div class="courbe-2"></div>
<!-----------------------------QUELQUES AVIS-------------------------------->
<div class="quelques-avis">
<div class="container">
<div class="row">
<div class="col text-center">
<h2 id="quelques-avis" class="wow fadeIn">Quelques avis</h2>
<p class="quelques-avis-p wow fadeIn">Notre projet vient de sortir, c'est pourquoi nous n'avons encore aucun avis. Si vous êtes client et souhaitez donner votre avis sur notre projet, cliquez sur le bouton ci-dessous.</p>
<a target="_blank" href="https://docs.google.com/forms/d/e/1FAIpQLSeC3knWswQeFlmIMTpfU48Q60jqnZOqy71Bn8bGWO2VKXRlbg/viewform?usp=sf_link"><button type="button" class="btn btn-primary wow fadeIn">ÉCRIRE UN AVIS</button></a>
</div>
</div>
<!--
<div class="row">
<div class="owl-carousel wow fadeIn">
<div class="card">
<div class="card-body">
<div class="card-stars">
<img src="svg/star.svg" alt="" class="stars-svg">
<img src="svg/star.svg" alt="" class="stars-svg">
<img src="svg/star.svg" alt="" class="stars-svg">
<img src="svg/star.svg" alt="" class="stars-svg">
<img src="svg/star.svg" alt="" class="stars-svg">
</div>
<h3 class="card-title">Tortor Mets iaculis !</h3>
<p class="card-text">Proin lacus ligula, faucibus eget rutrum sed, pharetra non mi. Phasellus facilisis, arcu id elementum hendrerit, tortor metus iaculis lorem, at interdum purus diam vitae quam. </p>
<strong><p>Le 12 Janvier 2020</p></strong>
</div>
</div>
</div>
</div>
-->
</div>
</div>
<!-----------------------------FIN QUELQUES AVIS-------------------------------->
<!-----------------------------FOOTER-------------------------------->
<div class="footer">
<div class="row justify-content-end">
<div class="col">
<img src="logo/new-logo-rouge.png" class="d-inline-block align-top logo" alt=""> <br>
<p class="footer-text-p">Copyright © TinyHost 2019 - 2020</p>
<span><p>Tout droits réservés.</p></span>
</div>
<div class="col-12 col-md-auto col-disable">
<a href="#accueil">Accueil</a><br>
<a href="#nos-avantages" class="a-margin-top">Nos avantages</a><br>
<a href="#ccm">Comment ça marche ?</a>
</div>
<div class="col-12 col-md-auto col-disable">
<a href="#notre-offre">Notre offre</a><br>
<a href="#nous-soutenir" class="a-margin-top">Nous soutenir</a><br>
<a href="#quelques-avis">Quelques avis</a>
</div>
</div>
</div>
<!-----------------------------SCRIPTS-------------------------------->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script>
new WOW().init();
</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/801f761c56.js" crossorigin="anonymous"></script>
<script src="script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>