-
Notifications
You must be signed in to change notification settings - Fork 0
/
contact.html
146 lines (138 loc) · 7.56 KB
/
contact.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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webana - Contact</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body class="night-mode magasin-page">
<header class="header-container">
<div class="container text-center position-relative">
<div class="header-content">
<img src="images/Logo_Webana.png" alt="Logo de Webana" class="logo-image">
</div>
<nav class="navbar navbar-expand-md navbar-dark justify-content-center">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="histoire.html">L'histoire</a>
</li>
<li class="nav-item">
<a class="nav-link" href="magasin.html">Magasin</a>
</li>
<li class="nav-item">
<a class="nav-link" href="propos.html">À propos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
<label class="switch">
<input type="checkbox" id="toggle-switch">
<span class="slider"></span>
</label>
</div>
</header>
<div class="container my-5">
<h1 class="text-center">Contactez-nous</h1>
<p class="text-center mb-5">Nous serions ravis d'entendre vos commentaires et suggestions. N'hésitez pas à nous
contacter en utilisant le formulaire ci-dessous ou les informations fournies.</p>
<!-- Alerte de confirmation d'envoi -->
<div id="successAlert" class="alert alert-success alert-dismissible fade show d-none" role="alert">
Votre message a été envoyé avec succès !
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="row">
<div class="col-md-6">
<h2>Formulaire de Contact</h2>
<form id="contactForm">
<div class="mb-3">
<label for="nom" class="form-label">Nom</label>
<input type="text" class="form-control" id="nom" name="nom" placeholder="Votre nom" required>
</div>
<div class="mb-3">
<label for="email" class="form-label">E-mail</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Votre e-mail"
required>
</div>
<div class="mb-3">
<label for="sujet" class="form-label">Sujet</label>
<input type="text" class="form-control" id="sujet" name="sujet"
placeholder="Sujet de votre message" required>
</div>
<div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" name="message" rows="6" placeholder="Votre message"
required></textarea>
</div>
<button type="submit" class="btn btn-primary w-100">Envoyer</button>
</form>
</div>
<div class="col-md-6">
<h2>Informations de Contact</h2>
<p>Pour toute question ou information, vous pouvez également nous joindre directement :</p>
<ul class="list-unstyled">
<li><i class="fas fa-map-marker-alt"></i> 3780 Rue Mgr Bégin, Jonquière, QC G7X 3T7</li>
<li><i class="fas fa-phone-alt"></i> +81 123 456 789</li>
<li><i class="fas fa-envelope"></i> contact@webana.jp</li>
</ul>
<h3>Suivez-nous</h3>
<ul class="list-inline">
<li class="list-inline-item"><a href="#" class="text-light"><i
class="fab fa-facebook fa-2x"></i></a></li>
<li class="list-inline-item"><a href="#" class="text-light"><i class="fab fa-twitter fa-2x"></i></a>
</li>
<li class="list-inline-item"><a href="#" class="text-light"><i
class="fab fa-instagram fa-2x"></i></a></li>
<li class="list-inline-item"><a href="#" class="text-light"><i class="fab fa-youtube fa-2x"></i></a>
</li>
</ul>
<div class="mt-4">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2648.69928944801!2d-71.24739098415839!3d48.40471774049567!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4cc028dbe724ae49%3A0x2fb0e1c0dba9194c!2sR%C3%A9sidence%20Piekouagami!5e0!3m2!1sfr!2sca!4v1638149838243!5m2!1sfr!2sca"
width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer bg-dark text-light py-4">
<div class="container">
<div class="row">
<div class="col text-center">
<p>© 2024 Webana. Tous droits réservés. | <a href="#" class="text-light">Mentions légales</a> |
<a href="#" class="text-light">Politique de confidentialité</a></p>
</div>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="main.js"></script>
<script>
$(document).ready(function () {
$("#contactForm").on("submit", function (e) {
e.preventDefault(); // Empêcher l'envoi réel du formulaire
$("#successAlert").removeClass("d-none"); // Afficher l'alerte de succès
this.reset(); // Réinitialiser le formulaire
});
});
</script>
</body>
</html>