-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
321 lines (288 loc) · 15.2 KB
/
Copy pathindex.html
File metadata and controls
321 lines (288 loc) · 15.2 KB
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
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Association "Les Belledonnes"</title>
<!-- fontawesome css -->
<!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css"
integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous"> -->
<!-- bootstrap css -->
<!-- <link rel="stylesheet" href="https://bootswatch.com/4/litera/bootstrap.min.css"> -->
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> -->
<!-- custom css -->
<link rel="stylesheet" href="./css/bootstrap.min.purify.css">
<link rel="stylesheet" href="./css/style-min.css">
<!-- custom font -->
<!-- <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap" rel="stylesheet">
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top stroke reveal" id="main-nav">
<div class="container ">
<a href="index.html#top" class="navbar-brand" id="logo">
<img id="img-logo" src="./img/logo.png" alt="">
Les Belledonnes</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#collapsenavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-right" id="collapsenavbar">
<ul class="navbar-nav ml-auto ">
<li class="nav-item reveal-1">
<a class="nav-link" href="#top">Accueil</a></li>
</li>
<li class="nav-item reveal-1">
<a class="nav-link" href="#section-association">L'association</a></li>
</li>
<li class="nav-item reveal-1">
<a class="nav-link" href="#section-sports">Les sports</a></li>
</li>
<li class="nav-item reveal-1">
<a class="nav-link" href="#section-contact">Nous contacter</a></li>
</li>
</ul>
</div>
</div>
</nav>
<!-- intro -->
<header class="text-center">
<!-- https://stackoverflow.com/questions/23791186/how-to-make-the-text-on-bootstrap-carousel-stay-while-the-images-move -->
<div class="overlay-carousel">
<div class="header-intro text-white reveal">
<div class="header-texte font-italic mx-4 reveal-2">Faites du sport à la Ravoire avec l'association
</div>
<h1 class="mt-2 reveal-3">Les Belledonnes</h1>
<a href="#section-association" class="btn btn-primary mt-5 reveal-4">En savoir plus</a>
</div>
</div>
<!-- https://mdbootstrap.com/docs/jquery/javascript/carousel/ -->
<div id="carouselExampleIndicators" class="carousel slide carousel-fade lazy-load" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="imgfill" src="./img/car1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="imgfill" data-src="./img/car3.jpg" alt="Third slide">
</div>
<div class="carousel-item">
<img class="imgfill" data-src="./img/car6.jpg" alt="Third slide">
</div>
<div class="carousel-item">
<img class="imgfill" data-src="./img/car2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="imgfill" data-src="./img/car4.jpg" alt="Third slide">
</div>
<div class="carousel-item">
<img class="imgfill" data-src="./img/car7.jpg" alt="Third slide">
</div>
<div class="carousel-item">
<img class="imgfill" data-src="./img/car5.jpg" alt="Third slide">
</div>
</div>
</div>
</header>
<!-- l'association -->
<section id="section-association">
<br>
<br>
<div class="container">
<div class="row reveal">
<div class="col-md-6 align-self-center mb-4 reveal-1" id="txtLaptop">
<h3 class="mb-3">L'association...</h3>
<p>L'association "Les Belledonnes" vous permet de pratiquer une activité
sportive quelque soit
votre niveau et de progresser à votre rythme.
<br><br>Créée il y plus de 50 ans, elle regroupe plus de 160 adhérents de tous âges répartis dans
3 sports : gymnastique,
tennis de table et badminton.
</p>
<p>Notre but :</p>
<ul>
<li>Développer l'esprit associatif auprès des jeunes, les intégrer et les former</li>
<li>Faire se cotôyer les générations</li>
<li>Créer une dynamique au sein de l'association</li>
</ul>
</div>
<div class="col-md-6 reveal-2">
<iframe loading="lazy" width="100%" height="350" src=""
data-src="https://www.youtube.com/embed/aPX7HJ9zCd4"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
<div class="row v-center mt-4 reveal">
<div class="col-md-6 reveal-3">
<iframe src=""
data-src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d11175.876328024739!2d5.9685051!3d45.5509475!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x1008e74a37a80c83!2sLyc%C3%A9e%20du%20Granier!5e0!3m2!1sfr!2sfr!4v1605601425749!5m2!1sfr!2sfr"
width="100%" height="350" frameborder="0" style="border:0;" allowfullscreen=""
aria-hidden="false" tabindex="0"></iframe>
</div>
<div class="col-md-6 mt-4 reveal-4">
<p>Rassemblés en un seul et unique lieu, tous les sports se déroulent au lycée
du Granier de la Ravoire.</p>
<a href="#section-sports" class="btn btn-outline-info">En savoir plus</a>
</div>
</div>
</div>
</section>
<!-- les sports -->
<section id="section-sports">
<br>
<br>
<div class="container reveal">
<h2 class="text-center mb-3 reveal-1">Les sports</h2>
<div class="row">
<div class="col-md-4 text-center reveal-1">
<img class="img-sport" loading="lazy" src="./img/gym.png" alt="gymnastique artistique">
<h4 class="my-4">Gymnastique</h4>
<p>Accessible de 5 à 18 ans</p>
<p>L'association offre la possibilité aux enfants et aux ados de pratiquer la
gymnastique féminine aux agrès, en loisirs ou en compétition.
</p>
<p>Organisées par niveaux, les séances d'entrainements se font les lundi, mardi et jeudi de 17h30 à
20h.
</p>
</div>
<div class="col-md-4 text-center ico-sport reveal-2">
<img class="img-sport" loading="lazy" src="./img/ping.png" alt="raquette de ping-pong">
<h4 class="my-4">Tennis de table</h4>
<p> Ouvert à tous à partir de 7 ans.</p>
<p>
Les séances se font les lundi et vendredi de 18h à 21h en jeux libre et le mercredi avec
entrainement de 18h30h à 20h par notre coach Jean-Paul.</p>
<p>
Des rencontres amicales entre clubs loisirs de Savoie auront régulierement lieu au cours de
la saison, le jeudi soir.</p>
</div>
<div class="col-md-4 text-center ico-sport reveal-3">
<img class="img-sport" loading="lazy" src="./img/bad.png" alt="raquette et volant de badminton">
<h4 class="my-4">Badminton</h4>
<p>Le badminton est ouvert à partir de 16 ans.</p>
<p>
Les séances ont lieu le mardi soir de 19h30 à 22h30 et/ou le mercredi soir 20h30 à 22 h 30
en jeu libre.</p>
</div>
</div>
<div class="row reveal-4">
<div class="col mt-4">
<hr>
<h3 class="mb-3">Adhésion</h3>
<p>70€ par adulte (16 ans révolus au 31 décembre de la saison en cours)<br>Réduction de 20 €
par adulte avec un enfant inscrit au club</p>
<p>50€ par enfant (moins de 16 ans au 31 décembre de la saison en cours)
</p>
<a href="#section-contact" class="btn btn-outline-info mt-2">Je veux m'inscrire...</a>
</div>
</div>
</div>
</section>
<!-- call to action -->
<section id="section-contact" class="lazy-background">
<div class="layer-separation reveal">
<br><br>
<div class="container text-center reveal-1">
<h2>Êtes-vous prêt ?</h2>
<p>Envie de venir jeter un coup d'oeil, d'essayer un de nos sports, ou de le faire essayer à vos enfants
?</p>
<p>Ou peut-être envie de vous investir dans une association badass ?</p>
<p>Sautez le pas et rejoignez-nous...</p>
<p>On est sympa, on est ouvert, on ne se prend surtout pas la tête, <br> et on vous acceptera comme vous
êtes !</p>
</div>
</div>
</section>
<section id="section-contact2">
<div class="container form-group text-center bg-dark text-white py-4 px-1 reveal">
<h2 class="reveal-1">Contactez nous !</h2>
<p class="mx-5 reveal-2">Si vous souhaitez nous poser des questions pour avoir de plus amples renseignements,
n'hésitez pas à nous contacter en utilisant le formulaire ci-dessous, nous vous répondrons dès que
possible...</p>
<form action="https://formspree.io/f/xeqpzlnk" method="POST">
<div class="container reveal-3">
<div class="d-flex justify-content-center bd-highlight">
<div class="p-2 bd-highlight"><input type="text" placeholder="nom et prénom"
name="nomprenomcontact" required="required" class="form-control mb-2 mr-2"></div>
<div class="p-2 bd-highlight"><input type="email" placeholder="email" name="emailcontact"
required="required" class="form-control mb-2 mr-2"></div>
</div>
<div class="d-flex justify-content-center bd-highlight">
<div class="p-2 bd-highlight textcomment"><textarea type="text-area" placeholder="votre message"
name="messagecontact" required="required" class="form-control mb-2 mr-2"></textarea>
</div>
<input type="hidden" name="_language" value="fr" />
</div>
<button class="btn btn-primary" type="submit" value="Send">Envoyer</button>
</form>
</div>
</section>
<!-- footer -->
<footer id="main-footer" class="text-center my-4">
<div class="container">
<p>Copyright ©
<span id="year"></span> Les Belledonnes -
<a href="mentionslegales.html">Mentions légales</a>
</p>
</div>
</div>
</footer>
<!-- script bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
crossorigin="anonymous"></script>
<script type="text/javascript" src="./js/app-min.js"></script>
<script>
// $(function () {
// $('.carousel.lazy-load').bind('slide.bs.carousel', function (e) {
// var image = $(e.relatedTarget).find('img[data-src]');
// image.attr('src', image.data('src'));
// image.removeAttr('data-src');
// });
// });
//https://stackoverflow.com/questions/36081559/lazy-load-bootstrap-carousel-without-changing-img-src-attribute
//https://coderwall.com/p/6qaeya/lazy-carousel-in-bootstrap
//https://stackoverflow.com/questions/12697216/bootstrap-carousel-lazy-load
$(function () {
return $(".carousel.lazy-load").on("slide.bs.carousel", function (ev) {
var lazy;
lazy = $(ev.relatedTarget).find("img[data-src]");
lazy.attr("src", lazy.data('src'));
lazy.removeAttr("data-src");
});
});
document.addEventListener("DOMContentLoaded", function () {
var lazyBackgrounds = [].slice.call(document.querySelectorAll(".lazy-background"));
if ("IntersectionObserver" in window) {
let lazyBackgroundObserver = new IntersectionObserver(function (entries, observer) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
entry.target.classList.add("visible");
lazyBackgroundObserver.unobserve(entry.target);
}
});
});
lazyBackgrounds.forEach(function (lazyBackground) {
lazyBackgroundObserver.observe(lazyBackground);
});
}
});
// https://scottdeluzio.com/defer-parsing-javascript-youtube-videos/
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i = 0; i < vidDefer.length; i++) {
if (vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src', vidDefer[i].getAttribute('data-src'));
}
}
}
window.onload = init;
</script>
<!-- <script type="text/javascript" src="./js/lazysizes-min.js"></script> -->
</body>
</html>