-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
473 lines (459 loc) · 23.9 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
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>ONLINE404.com | Développement de logiciels & applications mobiles</title>
<meta name="description" content="Agence de développement d'applications mobiles, logiciels Mac & PC, conception et hebergement de sites internets.">
<meta name="keywords" content="ios, android, mac, pc, web, html, flutter">
<link href="favicon-32x32.png" rel="icon">
<link href="apple-touch-icon.png" rel="apple-touch-icon">
<link href="https://fonts.googleapis.com" rel="preconnect">
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<link href="assets/css/main.css" rel="stylesheet">
</head>
<body class="index-page">
<header id="header" class="header d-flex align-items-center sticky-top">
<div class="container-fluid container-xl position-relative d-flex align-items-center justify-content-between">
<a href="index.html" class="logo d-flex align-items-center">
<img src="images/logo_couleur_long.png" alt="Logo ONLINE404.com">
</a>
<nav id="navmenu" class="navmenu">
<ul>
<li><a href="#hero" class="active">Accueil</a></li>
<li><a href="#about">Qui sommmes-nous ?</a></li>
<li><a href="#services">Prestations</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
</nav>
</div>
</header>
<main class="main">
<!-- SECTION ENTETE -->
<section id="hero" class="hero section light-background">
<div class="container">
<div class="row gy-4">
<div class="col-lg-6 order-2 order-lg-1 d-flex flex-column justify-content-center text-center text-md-start" data-aos="fade-up">
<h2>APPLICATIONS MOBILES & LOGICIELS DE GESTION</h2>
<p>Nous créons les solutions dont vous avez besoin au quotidien</p>
<div class="d-flex mt-4 justify-content-center justify-content-md-start">
<a href="#about" class="cta-btn">C'est parti</a>
</div>
</div>
<div class="col-lg-6 order-1 order-lg-2 hero-img" data-aos="zoom-out" data-aos-delay="100">
<img src="assets/img/hero-img.png" class="img-fluid animated" alt="">
</div>
</div>
</div>
</section>
<!-- SECTION : QUI-SOMMMES NOUS ? -->
<section id="about" class="about section">
<div class="container">
<div class="row gy-4">
<div class="col-lg-6 position-relative" data-aos="fade-up" data-aos-delay="100">
<img src="assets/img/about.jpg" class="img-fluid" alt="">
</div>
<div class="col-lg-6 ps-lg-4 content d-flex flex-column justify-content-center" data-aos="fade-up" data-aos-delay="200">
<h3>Qui sommes-nous ?</h3>
<p>Spécialisés dans la conception, le développement, et l'hébergement de solutions digitales sur mesure. Que ce soit pour des applications mobiles innovantes, des logiciels de gestion performants ou des sites internet optimisés, notre équipe d'experts passionnés est dédiée à transformer vos idées en réalité</p>
<ul>
<li>
<i class="bi bi-diagram-3"></i>
<div>
<h5>Une approche centrée sur le client</h5>
<p>Nous allions créativité, technologie, et réactivité pour vous offrir des produits de haute qualité, parfaitement adaptés à vos besoins spécifiques.</p>
</div>
</li>
<li>
<i class="bi bi-fullscreen-exit"></i>
<div>
<h5>Expertise Multidisciplinaire</h5>
<p>Nous combinons créativité et compétences techniques pour offrir des solutions sur mesure, adaptées aux besoins spécifiques de chaque client</p>
</div>
</li>
<li>
<i class="bi bi-broadcast"></i>
<div>
<h5>Respect des délais et du Budget</h5>
<p>Nous mettons un point d’honneur à livrer chaque projet dans les temps, tout en optimisant les ressources pour garantir un excellent rapport qualité-prix</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- SECTION STATS -->
<section id="stats" class="stats section light-background">
<img src="assets/img/stats-bg.jpg" alt="" data-aos="fade-in">
<div class="container position-relative" data-aos="fade-up" data-aos-delay="100">
<div class="row gy-4">
<div class="col-lg-3 col-md-6">
<div class="stats-item text-center w-100 h-100">
<span data-purecounter-start="0" data-purecounter-end="232" data-purecounter-duration="1" class="purecounter"></span>
<p>Clients</p>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="stats-item text-center w-100 h-100">
<span data-purecounter-start="0" data-purecounter-end="421" data-purecounter-duration="1" class="purecounter"></span>
<p>Projets</p>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="stats-item text-center w-100 h-100">
<span data-purecounter-start="0" data-purecounter-end="1253" data-purecounter-duration="1" class="purecounter"></span>
<p>Heures de développement</p>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="stats-item text-center w-100 h-100">
<span data-purecounter-start="0" data-purecounter-end="350000" data-purecounter-duration="1" class="purecounter"></span>
<p>Lignes de code</p>
</div>
</div>
</div>
</div>
</section>
<!-- CLIENTS -->
<!--<section id="clients" class="clients section">
<div class="container" data-aos="fade-up" data-aos-delay="100">
<div class="row g-0 clients-wrap">
<div class="col-xl-3 col-md-4 client-logo">
<img src="assets/img/clients/client-1.png" class="img-fluid" alt="">
</div>
<div class="col-xl-3 col-md-4 client-logo">
<img src="assets/img/clients/client-2.png" class="img-fluid" alt="">
</div>
<div class="col-xl-3 col-md-4 client-logo">
<img src="assets/img/clients/client-3.png" class="img-fluid" alt="">
</div>
<div class="col-xl-3 col-md-4 client-logo">
<img src="assets/img/clients/client-4.png" class="img-fluid" alt="">
</div>
<div class="col-xl-3 col-md-4 client-logo">
<img src="assets/img/clients/client-5.png" class="img-fluid" alt="">
</div>
<div class="col-xl-3 col-md-4 client-logo">
<img src="assets/img/clients/client-6.png" class="img-fluid" alt="">
</div>
<div class="col-xl-3 col-md-4 client-logo">
<img src="assets/img/clients/client-7.png" class="img-fluid" alt="">
</div>
<div class="col-xl-3 col-md-4 client-logo">
<img src="assets/img/clients/client-8.png" class="img-fluid" alt="">
</div>
</div>
</div>
</section>-->
<!-- PRESTATIONS -->
<section id="services" class="services section light-background">
<div class="container section-title" data-aos="fade-up">
<h2>Prestations</h2>
<p>Découvrez nos solutions digitales sur mesure pour propulser votre entreprise vers le succès</p>
</div>
<div class="container">
<div class="row gy-4">
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100">
<div class="service-item position-relative">
<div class="icon">
<i class="bi bi-cash-stack" style="color: #0dcaf0;"></i>
</div>
<a href="#services" class="stretched-link">
<h3>Applications mobiles</h3>
</a>
<p>iOS ou Android, nos compétences s'étendent de la conception à la publication de votre application sur les stores Apple et Google.</p>
</div>
</div>
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
<div class="service-item position-relative">
<div class="icon">
<i class="bi bi-calendar4-week" style="color: #fd7e14;"></i>
</div>
<a href="#services" class="stretched-link">
<h3>Logiciels de gestion</h3>
</a>
<p>Nous concevons des outils sur mesure pour optimiser les processus d'entreprise, tels que la gestion des stocks, des finances ou des ressources humaines.</p>
</div>
</div>
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="300">
<div class="service-item position-relative">
<div class="icon">
<i class="bi bi-chat-text" style="color: #20c997;"></i>
</div>
<a href="#services" class="stretched-link">
<h3>Sites Internet</h3>
</a>
<p>Du design à la mise en ligne, nous garantissons une présence en ligne moderne et responsive, adaptée à tous les appareils.</p>
</div>
</div>
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="400">
<div class="service-item position-relative">
<div class="icon">
<i class="bi bi-credit-card-2-front" style="color: #df1529;"></i>
</div>
<a href="#services" class="stretched-link">
<h3>Design graphique</h3>
</a>
<p>Nos services de design graphique créatifs et impactants, allant du branding à la conception de supports visuels sont conçus pour refléter votre identité et capter l'attention de votre public cible.</p>
<a href="#services" class="stretched-link"></a>
</div>
</div>
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="500">
<div class="service-item position-relative">
<div class="icon">
<i class="bi bi-globe" style="color: #6610f2;"></i>
</div>
<a href="#services" class="stretched-link">
<h3>Hébergement web</h3>
</a>
<p>Disponibilité maximale, performances optimales et sécurité renforcée. Hébergez vos projets en toute confiance avec nos solutions fiables et évolutives.</p>
<a href="#services" class="stretched-link"></a>
</div>
</div>
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="600">
<div class="service-item position-relative">
<div class="icon">
<i class="bi bi-clock" style="color: #f3268c;"></i>
</div>
<a href="#services" class="stretched-link">
<h3>Noms de domaine</h3>
</a>
<p>Bénéficiez d'une assistance professionnelle pour choisir le nom parfait et garantir sa disponibilité.</p>
<a href="#services" class="stretched-link"></a>
</div>
</div>
</div>
</div>
</section>
<!-- TEMOIGNAGES -->
<section id="testimonials" class="testimonials section dark-background">
<img src="assets/img/testimonials-bg.jpg" class="testimonials-bg" alt="">
<div class="container" data-aos="fade-up" data-aos-delay="100">
<div class="swiper init-swiper">
<script type="application/json" class="swiper-config">
{
"loop": true,
"speed": 600,
"autoplay": {
"delay": 5000
},
"slidesPerView": "auto",
"pagination": {
"el": ".swiper-pagination",
"type": "bullets",
"clickable": true
}
}
</script>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="testimonial-item">
<img src="assets/img/testimonials/testimonials-4.jpg" class="testimonial-img" alt="">
<h3>Thomas Lefebvre</h3>
<h4>Directeur Technique (France)</h4>
<div class="stars">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
</div>
<p>
<i class="bi bi-quote quote-icon-left"></i>
<span>Online404 a développé un logiciel de gestion pour notre entreprise, et cela a considérablement amélioré notre efficacité opérationnelle. Leur équipe a su être à l’écoute de nos besoins spécifiques et proposer des solutions innovantes.</span>
<i class="bi bi-quote quote-icon-right"></i>
</p>
</div>
</div>
<div class="swiper-slide">
<div class="testimonial-item">
<img src="assets/img/testimonials/testimonials-1.jpg" class="testimonial-img" alt="">
<h3>Raphaël Gompel</h3>
<h4>Consultant en Transformation (Luxembourg)</h4>
<div class="stars">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
</div>
<p>
<i class="bi bi-quote quote-icon-left"></i>
<span>Online404 a conçu et hébergé notre nouveau site internet, et nous en sommes ravis. Leur expertise technique combinée à une grande réactivité fait d’eux un partenaire de confiance pour toute entreprise cherchant à renforcer sa présence en ligne.</span>
<i class="bi bi-quote quote-icon-right"></i>
</p>
</div>
</div>
<div class="swiper-slide">
<div class="testimonial-item">
<img src="assets/img/testimonials/testimonials-2.jpg" class="testimonial-img" alt="">
<h3>Sarah Franken</h3>
<h4>Responsable Marketing (Luxembourg)</h4>
<div class="stars">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
</div>
<p>
<i class="bi bi-quote quote-icon-left"></i>
<span>ONLINE404.com a développé pour nous une application mobile sur mesure qui a transformé notre relation client. Leur équipe a su répondre à nos besoins avec professionnalisme et créativité. Je recommande vivement leurs services !</span>
<i class="bi bi-quote quote-icon-right"></i>
</p>
</div>
</div>
<div class="swiper-slide">
<div class="testimonial-item">
<img src="assets/img/testimonials/testimonials-3.jpg" class="testimonial-img" alt="">
<h3>Camille Bernard</h3>
<h4>Chef de Projet Digital (France)</h4>
<div class="stars">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
</div>
<p>
<i class="bi bi-quote quote-icon-left"></i>
<span>Online404 a développé un logiciel de gestion pour notre entreprise, et cela a considérablement amélioré notre efficacité opérationnelle. Leur équipe a su être à l’écoute de nos besoins spécifiques et proposer des solutions innovantes.</span>
<i class="bi bi-quote quote-icon-right"></i>
</p>
</div>
</div>
<div class="swiper-slide">
<div class="testimonial-item">
<img src="assets/img/testimonials/testimonials-5.jpg" class="testimonial-img" alt="">
<h3>Albert Mattri</h3>
<h4>Entrepreneur (France)</h4>
<div class="stars">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
</div>
<p>
<i class="bi bi-quote quote-icon-left"></i>
<span>En tant qu'auto-entrepreneur, j'utilise la solution ERP développée par ONLINE404.com et j'en suis totalement ravi. Simple et efficace, elle m'accompagne chaque jour dans mon activité, chez les clients ou à mon bureau.</span>
<i class="bi bi-quote quote-icon-right"></i>
</p>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</section>
<!-- CONTACT -->
<section id="contact" class="contact section">
<div class="container section-title" data-aos="fade-up">
<h2>Contact</h2>
<p>Nos bureaux sont situés au coeur de Paris entre le Palais du Louvre et la place Vendôme</p>
</div>
<div class="container" data-aos="fade-up" data-aos-delay="100">
<div class="mb-4" data-aos="fade-up" data-aos-delay="200">
<iframe style="border:0; width: 100%; height: 270px;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2993.6737352711343!2d2.3268431768371043!3d48.86601537133324!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e2e1a161985%3A0x262161d5a23b4d6c!2s229%20Rue%20Saint-Honor%C3%A9%2C%2075001%20Paris%2C%20France!5e1!3m2!1sfr!2sde!4v1725171544119!5m2!1sfr!2sde" frameborder="0" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="row gy-4">
<div class="col-lg-4">
<div class="info-item d-flex" data-aos="fade-up" data-aos-delay="300">
<i class="bi bi-geo-alt flex-shrink-0"></i>
<div>
<h3>Adresse</h3>
<p>229 rue Saint-Honoré, 75001 Paris, France</p>
</div>
</div>
<div class="info-item d-flex" data-aos="fade-up" data-aos-delay="400">
<i class="bi bi-telephone flex-shrink-0"></i>
<div>
<h3>Téléphone</h3>
<p>+352 661 166 350</p>
</div>
</div>
<div class="info-item d-flex" data-aos="fade-up" data-aos-delay="500">
<i class="bi bi-envelope flex-shrink-0"></i>
<div>
<h3>E-mail</h3>
<p>[email protected]</p>
</div>
</div>
</div>
<div class="col-lg-8">
<form action="forms/contact.php" method="post" class="php-email-form" data-aos="fade-up" data-aos-delay="200">
<div class="row gy-4">
<div class="col-md-6">
<input type="text" name="name" class="form-control" placeholder="Votre nom" required="" disabled>
</div>
<div class="col-md-6 ">
<input type="email" class="form-control" name="email" placeholder="Votre adresse E-mail" required="" disabled>
</div>
<div class="col-md-12">
<input type="text" class="form-control" name="subject" placeholder="Sujet" required="" disabled>
</div>
<div class="col-md-12">
<textarea class="form-control" name="message" rows="6" placeholder="Message" required="" disabled></textarea>
</div>
<div class="col-md-12 text-center">
<div class="loading">Chargement</div>
<div class="error-message"></div>
<div class="sent-message">Votre message a bien été envoyé. Merci !</div>
<button type="submit" disabled>Envoyer le message</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</main>
<footer id="footer" class="footer">
<div class="container footer-top">
<div class="row gy-4">
<div class="col-lg-5 col-md-12 footer-about">
<a href="index.html" class="logo d-flex align-items-center">
<span class="sitename">ONLINE404.com</span>
</a>
<p>Nous transformons toutes vos idées en solutions digitales sur mesure, parfaitement adaptées à vos besoins</p>
<div class="social-links d-flex mt-4">
<a href="https://www.facebook.com/online404com" target="_blank"><i class="bi bi-facebook"></i></a>
<a href="https://www.linkedin.com/company/online404-com" target ="_blank"><i class="bi bi-linkedin"></i></a>
</div>
</div>
<div class="col-lg-2 col-6 footer-links">
<h4>Liens</h4>
<ul>
<li><a href="#hero">Accueil</a></li>
<li><a href="#about">Qui sommes-nous ?</a></li>
<li><a href="#services">Prestations</a></li>
<li><a href="#">Conditions d'utilisation</a></li>
<li><a href="#">Politique de confidentialité</a></li>
</ul>
</div>
<div class="col-lg-2 col-6 footer-links">
<h4>Nos prestations</h4>
<ul>
<li><a href="#services">Applications mobiles</a></li>
<li><a href="#services">Logiciels de gestion</a></li>
<li><a href="#services">Sites internet</a></li>
<li><a href="#services">Design graphique</a></li>
<li><a href="#services">Hébergement web</a></li>
<li><a href="#services">Noms de domaine</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-12 footer-contact text-center text-md-start">
<h4>Nous contacter</h4>
<p>229, rue Saint-Honoré</p>
<p>75001 Paris</p>
<p>France</p>
<p class="mt-4"><strong>Téléphone :</strong> <span>+352 661 166 350</span></p>
<p><strong>E-mail:</strong> <span>[email protected]</span></p>
</div>
</div>
</div>
<div class="container copyright text-center mt-4">
<p>© <span>Copyright 2024</span> <strong class="px-1 sitename">ONLINE404.com</strong> <span>Tous droits réservés</span></p>
</div>
</footer>
<a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
<div id="preloader"></div>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
<script src="assets/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>