-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
385 lines (371 loc) · 22.8 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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="./vendor/normalize.css">
<link rel="stylesheet" href="./vendor/animate.css">
<link rel="stylesheet" href="./vendor/shake.min.css">
<link rel="stylesheet" href="./resources/css/styles.css">
<!-- Primary Meta Tags -->
<title>Florès | Voeux 2020</title>
<meta name="title" content="Florès | Carte de voeux 2020">
<meta name="description" content="Découvrez la carte de voeux Florès, chat change">
<!-- Open Graph / Facebook / LinkedIn -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://flores-amo.fr/ecard/voeux_2020/">
<meta property="og:title" content="Florès | Carte de voeux 2020">
<meta property="og:description" content="Découvrez la carte de voeux Florès, chat change">
<meta property="og:image" content="https://flores-amo.fr/ecard/voeux_2020/resources/png/chat.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://flores-amo.fr/ecard/voeux_2020/">
<meta property="twitter:title" content="Florès | Carte de voeux 2020">
<meta property="twitter:description" content="Découvrez la carte de voeux Florès, chat change">
<meta property="twitter:image" content="https://flores-amo.fr/ecard/voeux_2020/resources/png/chat.png">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Test V1.01 -->
</head>
<body>
<div id="S1" class="text-center animated slideInUp">
<h2 class="S1-title">
<img src="./resources/svg/moustache-titres.svg" alt="Moustache" class="S1-moustache" />
Bienvenue...
</h2>
<h3 class="S1-subtitle">au royaume de l'expérienciel</h3>
<p class="S1-tuto animated fadeIn delay-1s">Pour commencer<br />déplacez le bouton vers la droite</p>
<div class="S1-range animated fadeIn delay-2s">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="500px" height="100%" viewBox="0 0 500 150" preserveAspectRatio="xMidYMid slice" class="img-fluid">
<defs>
<pattern id="S1-arrow" height="100%" width="100%" viewBox="0 0 500 500">
<image width="500" height="500" xlink:href="./resources/svg/bouton-fleche-droite.svg"></image>
</pattern>
</defs>
<path class="path" d="M75 0 425 0" />
<path id="S1-path" class="path realPath" d="M0 0 500 0" />
<circle id="target" class="target animated targetAnimation" r="30" cx="500" cy="0" />
<circle id="S1-circle" class="S1-circle animated circleAnimation" r="30" cx="0" cy="0" fill="url(#S1-arrow)" />
</svg>
<img id="S1-action" src="./resources/svg/action-validee.svg" alt="Action validée" />
</div>
</div>
<div id="S2" class="screen text-center animated slideInUp">
<h2 class="S1-title S2-title">
<img src="./resources/svg/moustache-titres.svg" alt="Moustache" class="SX-moustache S2-moustache" />
C’est l’histoire...
</h2>
<h3 class="S1-subtitle S2-subtitle animated textAnimation slow delay-1s">
...d'un chat, que l'on caressait chaque jour <span class="underline">dans le sens du poil,</span><br /> parce qu'on avait toujours fait comme ça...
</h3>
<div id="rrr">
<div class="rrrOne">
<img class="rrrAnimation rrrAnimationOne animated" src="./resources/svg/Rrr.svg" alt="Rrr">
</div>
<div class="rrrTwo">
<img class="rrrAnimation rrrAnimationTwo animated" src="./resources/svg/Rrr.svg" alt="Rrr">
</div>
<div class="rrrThree">
<img class="rrrAnimation rrrAnimationThree animated" src="./resources/svg/Rrr.svg" alt="Rrr">
</div>
</div>
<div>
<img class="S2-cat" src="./resources/svg/ecran2-chat.svg" alt="Chat qui dors" />
<img class="S2-catTail" src="./resources/svg/ecran2-queueduchat.svg" alt="Queue du chat qui dors" />
</div>
<div class="S2-range S2-rangeFade animated fadeIn delay-2s" class="img-fluid">
<svg class="S2-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" width="700px" height="100%" viewBox="0 0 655 500" class="img-fluid">
<defs>
<pattern id="S2-arrow" height="100%" width="100%" viewBox="0 0 655 655">
<image width="655" height="655" xlink:href="./resources/svg/bouton-fleche-droite.svg"></image>
</pattern>
</defs>
<path class="path" d="M 100 240 C 350 150 500 200 565 270" />
<path id="S2-path" d="M 50 260 C 350 150 500 200 600 310" />
<circle id="target" r="32" cx="600" cy="310" class="target animated targetAnimation" />
<circle id="S2-circle" r="32" cx="50"cy="260" fill="url(#S2-arrow)" class="S2-circle animated circleAnimation" />
</svg>
<img id="S2-action" src="./resources/svg/action-validee.svg" alt="Action validée" />
</div>
</div>
<div id="S3" class="screen text-center animated slideInUp">
<h2 class="SX-title">
<img src="./resources/svg/moustache-titres.svg" alt="Moustache" class="SX-moustache" />
Evidemment...
</h2>
<h3 class="SX-subtitle animated textAnimation slow delay-1s">
...Puisqu’on avait toujours fait comme ça,
<br />le chat - sans surprise - <span class="underline">ronronnait,</span>
<br />comme il l’avait toujours fait
</h3>
<div>
<img class="S3-cat" src="./resources/svg/ecran3-chat.svg" alt="Chat qui dors sur le dos" />
<img class="S3-catTail" src="./resources/svg/ecran3-queueduchat.svg" alt="Queue du cat qui dors sur le dos" />
</div>
<div id="rrr2">
<div class="rrrOne">
<img class="rrrAnimation rrrAnimationOne rrrOne2 animated" src="./resources/svg/Rrr.svg" alt="Rrr">
</div>
<div class="rrrTwo">
<img class="rrrAnimation rrrAnimationTwo rrrTwo2 animated" src="./resources/svg/Rrr.svg" alt="Rrr">
</div>
<div class="rrrThree">
<img class="rrrAnimation rrrAnimationThree rrrThree2 animated" src="./resources/svg/Rrr.svg" alt="Rrr">
</div>
</div>
<div class="S3-range animated fadeIn delay-2s">
<svg class="S3-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" width="710px" height="100%" viewBox="0 0 690 500">
<defs>
<pattern id="S3-arrow" height="100%" width="100%" viewBox="0 0 690 690">
<image width="690" height="690" xlink:href="./resources/svg/bouton-fleche-droite.svg"></image>
</pattern>
</defs>
<path class="path" d="M 200 250 Q 300 200 400 200 " />
<path id="S3-path" d="M 150 275 Q 300 200 455 200 " />
<circle id="target" class="target animated targetAnimation" r="32" cx="455" cy="200" />
<circle id="S3-circle" class="S3-circle animated circleAnimation" r="32" cx="150" cy="275" fill="url(#S3-arrow)" />
</svg>
<img id="S3-action" src="./resources/svg/action-validee.svg" alt="Action validée" />
</div>
</div>
<div id="S4" class="screen text-center animated slideInUp">
<h2 class="SX-title">
<img src="./resources/svg/moustache-titres.svg" alt="Moustache" class="SX-moustache" />
Et puis un jour...
</h2>
<h3 class="SX-subtitle animated textAnimation slow delay-1s">
...on décida, d’induire un <span class="underline">changement</span> dans tout ça,<br />et à rebrousse poil on caressa le chat
</h3>
<div>
<img class="S2-cat" src="./resources/svg/ecran2-chat.svg" alt="Chat qui dors" />
<img class="S2-catTail" src="./resources/svg/ecran2-queueduchat.svg" alt="Queue du chat qui dors" />
</div>
<div class="S2-range animated fadeIn delay-2s ">
<svg class="S2-svg " version="1.1" xmlns="http://www.w3.org/2000/svg" width="700px" height="100%" viewBox="0 0 655 500">
<defs>
<pattern id="S4-arrow" height="100%" width="100%" viewBox="0 0 655 655">
<image width="655" height="655" xlink:href="./resources/svg/bouton-fleche-gauche.svg"></image>
</pattern>
</defs>
<path class="path" d="M 100 240 C 350 150 500 200 565 270" />
<path id="S4-path" d="M 50 260 C 350 150 500 200 600 310" />
<circle id="target" class="target animated targetAnimation" r="32" cx="50" cy="260" />
<circle id="S4-circle" class="S4-circle animated circleAnimation" r="32" cx="600" cy="310" fill="url(#S4-arrow)" />
</svg>
</div>
</div>
<div id="S5" class="screen text-center animated slideInRight faster">
<h2 class="SX-title S5-title">
<img src="./resources/svg/moustache-titres.svg" alt="Moustache en colère !" class="SX-moustache S5-moustache" />
Wuow !!!!!
</h2>
<h3 class="SX-subtitle S5-subtitle animated textAnimation slow">
...Le chat se sentant agressé,
<br />se réveilla et se mit à siffler.
<br />N’appréciant guère ce changement,
<br />il manifesta son <span class="underline">mécontentement</span>
</h3>
<div class="S5-img">
<div class="shake-little shake-constant">
<img class="S5-cat img-fluid " src="./resources/svg/ecran5-chat.svg" alt="Chat en colère !" />
</div>
<img class="shake-opacity shake-constant S5-eclairs S5-eclair1 img-fluid" src="./resources/svg/ecran5-eclair1.svg" alt="Eclair" />
<img class="shake-opacity shake-constant S5-eclairs S5-eclair2 img-fluid" src="./resources/svg/ecran5-eclair2.svg" alt="Eclair" />
<img class="shake shake-constant S5-pfff img-fluid" src="./resources/svg/ecran5-pfffft.svg" alt="Pffff!" />
</div>
<div id="S5-after" class="animated fadeIn slow delay-3s">
<h2 class="SX-title">
<img src="./resources/svg/moustache-titres.svg" alt="Moustache" class="SX-moustache" />
Oui mais...
</h2>
<h3 class="SX-subtitle S5-afterSubtitle">
...Voulez-vous connaître <span class="underline">la suite ?</span>
</h3>
<div class="S5-range">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="500px" height="100%" viewBox="0 0 500 150" class="img-fluid">
<defs>
<pattern id="S5-arrow" height="100%" width="100%" viewBox="0 0 500 500">
<image width="500" height="500" xlink:href="./resources/svg/bouton-fleche-droite.svg"></image>
</pattern>
</defs>
<path class="path" d="M75 0 425 0" />
<path id="S5-path" class="path realPath" d="M0 0 500 0" />
<circle id="target" class="target animated targetAnimation" r="30" cx="500" cy="0" />
<circle id="S5-circle" class="S5-circle animated circleAnimation" r="30" cx="0" cy="0" fill="url(#S5-arrow)" />
</svg>
<img id="S5-action" src="./resources/svg/action-validee.svg" alt="Action validée" />
</div>
</div>
</div>
<div id="S6" class="screen text-center animated slideInUp slow">
<h2 class="SX-title">
<img src="./resources/svg/moustache-titres.svg" alt="Moustache" class="SX-moustache" />
Et bien...
</h2>
<h3 class="SX-subtitle animated textAnimation slow delay-2s">
...Le chat à présent complètement <span class="underline">réveillé,</span>
<br />se mit à bouger, sauter et jouer
<br />avec l’imprudent qui sans penser à mal
<br />avait arrêté de le brosser dans le sens du poil
</h3>
<div class="S6-img">
<img class="S6-cat" src="./resources/svg/ecran6-chat-sans-yeux.svg" alt="Chat qui joue" />
<img id="S6-catTail" class="" src="./resources/svg/ecran6-patteduchat.svg" alt="Patte du chat" />
<img id="S6-catEyes" class="" src="./resources/svg/ecran6-pupilles.svg" alt="Yeux du chat" />
</div>
<div id="S6-after">
<h2 class="SX-title S6-afterTitle">
<img src="./resources/svg/moustache-titres.svg" alt="Moustache" class="SX-moustache S6-moustache" />
La morale de cette histoire
</h2>
<h3 class="SX-subtitle S5-afterSubtitle S6-afterSubtitle animated slow delay-1s">
...La sentez-vous venir ?
</h3>
<div class="S6-range">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="500px" height="100%" viewBox="0 0 500 150" class="img-fluid">
<defs>
<pattern id="S6-arrow" height="100%" width="100%" viewBox="0 0 500 500">
<image width="500" height="500" xlink:href="./resources/svg/bouton-fleche-droite.svg"></image>
</pattern>
</defs>
<path class="path" d="M75 0 425 0" />
<path id="S6-path" class="path realPath" d="M0 0 500 0" />
<circle id="target" class="target animated targetAnimation" r="30" cx="500" cy="0" />
<circle id="S6-circle" class="S6-circle animated circleAnimation" r="30" cx="0" cy="0" fill="url(#S6-arrow)"/>
</svg>
<img id="S6-action" src="./resources/svg/action-validee.svg" alt="Action validée" />
</div>
</div>
<img id="forground" class="ball animated fadeIn delay-2s" src="./resources/svg/ecran6-balle.svg" height="130" width="130">
</div>
<div id="S7" class="screen S7-display d-none flex-column text-center animated fadeIn delay-1s">
<section class="d-flex flex-column justify-content-center">
<div class="S7-ornement d-flex justify-content-center">
<img class="S7-rightMoustache" src="./resources/svg/moustache-titres.svg" alt="Ornement" />
<div id="S7-triangle"></div>
<img class="S7-leftMoustache" src="./resources/svg/moustache-titres.svg" alt="Ornement" />
</div>
<div class="container-fluid">
<h2 class="SX-title S7-title">
Mieux vaut choquer un court instant<br />que passer à côté d’un chouette changement
</h2>
<div class="S7-text mt-4 mb-4">
<p class="animated fadeIn S7-anim-text1">Chez Florès nous aimons tenter la vie à rebrousse poil !</p>
<p class="animated fadeIn S7-anim-text2">Parce que du changement naissent des phénomènes incroyables,<br />nous l’apprivoisons et l’accompagnons.</p>
<p class="animated fadeIn S7-anim-text3">2020 nous offre des concepts à inventer,<br />des pistes à explorer, des coussinets à user...</p>
<p class="animated fadeIn S7-anim-text4">Ça vous dit d’essayer ?</p>
</div>
<h2 class="SX-title S7-title animated fadeIn S7-anim-text5">
Excellente année !
</h2>
<div class="row justify-content-end animated fadeIn S7-lastDelay">
<div class="col-sm-12 col-md-6 col-lg-4">
<a class="S7-team grow" href="https://flores-amo.fr/equipe/" target="_blank" title="Voir nos tête en vrai ?">
<img class="img-fluid" src="./resources/png/illu-equipe-flores-team.png" alt="L'équipe Florès" />
<p>L'équipe Florès</p>
</a>
</div>
<div class="col-sm-12 col-md-6 col-lg-4 d-flex justify-content-center">
<a class="S7-more grow" href="https://flores-amo.fr/space-planning-faire-vachement-mieux-pour-vachement-moins-cher/" target="_blank" title="En savoir plus">
<h2 class="SX-title text-left">
En savoir plus
</h2>
<h3 class="SX-subtitle text-left">
Notre retour d’expérience sur<br />l’accompagnement au(x) changement(s)
</h3>
</a>
</div>
</div>
</div>
</section>
<footer class="d-flex flex-fill row animated slideInUp S7-lastDelay">
<div class="S7-leftFooter col-md-12 col-lg-4 d-flex flex-column justify-content-center">
<p class="S7-textFooter text-left align-self-center">
Si vous pensez qu’il est bon de tester le
<br />changement, <span class="S7-spanText">partagez largement</span>
</p>
<div class="d-flex justify-content-center align-self-center S7-imgShare row-fluid">
<a class="col-3 grow" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fflores-amo.fr%2Fecard%2Fvoeux_2020%2F&src=sdkpreparse" title="Partager sur Facebook">
<img src="./resources/png/picto-facebook.png" alt="Partager sur Facebook">
<p>FACEBOOK</p>
</a>
<a target="_blank" href="https://twitter.com/intent/tweet?text=Découvrez la carte de voeux Florès, chat change%0Ahttps://flores-amo.fr/ecard/voeux_2020/" class="col-3 grow" data-text="Florès | Carte de voeux 2020" data-lang="fr" data-show-count="false" title="Partager sur Twitter">
<img src="./resources/png/picto-twitter.png" alt="Partager sur Twitter">
<p>TWITTER</p>
</a>
<a class="col-3 grow" target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=https://flores-amo.fr/ecard/voeux_2020/&title=Florès, Carte de voeux 2020&summary=Découvrez la carte de voeux Florès, chat change&source=" title="Partager sur LinkedIn">
<img src="./resources/png/picto-linkedin.png" alt="Partager sur LinkedIn">
<p>LINKEDIN</p>
</a>
<a class="col-3 grow" href="mailto:?subject=Florès | Carte de voeux 2020&body=Découvrez la carte de voeux Florès, chat change %0A%0A https://flores-amo.fr/ecard/voeux_2020/" title="Partager par mail">
<img src="./resources/png/picto-envoyerparmail.png" alt="Partager par mail">
<p>MAIL</p>
</a>
</div>
</div>
<div class="S7-centerFooter S7_logoFlores col-md-12 col-lg-4 d-flex flex-column justify-content-center ">
<a class="grow" href="https://flores-amo.fr/" target="_blank">
<img src="./resources/png/logo-flores.png" alt="Logo Florès">
</a>
</div>
<div class="S7-rightFooter S7-contact col-md-12 col-lg-4 d-flex flex-column justify-content-center">
<p class="S7-textFooter text-left align-self-center">
Si vous êtes prêts pour le changement, mais<br />souhaitez l’induire correctement<br /><span class="S7-spanText">contactez-nous.</span>
</p>
<a class="grow" href="https://flores-amo.fr/contact/" target="_blank" title="Contactez-nous">
<img src="./resources/png/picto-contact.png" alt="Contactez-nous" />
</a>
</div>
<div class="S7-mentions col d-flex justify-content-center flex-column align-self-center">
<p>
Sur une idée originale de
<a class="S7-bottomLink" href="https://pdb-by-estellegirod.com/" target="_blank">Poulette de Bresse</a>
, inspirée des valeurs et de l’esprit de FLORES - Mise en<br />mouvement avec brio par
<a href="https://www.linkedin.com/in/rodolphe-cabotiau/" target="_blank">Rodolphe Cabotiau</a>
sous la bienveillance de <a href="https://www.fairweb-factory.fr/" target="_blank">The Fairweb Factory</a>
</p>
</div>
</footer>
</div>
<!-- Popup -->
<div class="container">
<div class="popup" role="dialog">
<div class="popup-content">
<div class="d-flex justify-content-end">
<span class="close-button-popup close hairline"></span>
</div>
<div class="px-md-5 mx-md-5 text-center">
<h2 id="popupTitle"></h2>
</div>
<div class="row popupDivContent">
<div class="col-sm-12 my-auto">
<p id="popupContent" class="close-sentence-popup text-center"></p>
</div>
</div>
</div>
</div>
</div>
<div id="tourne_ecran">
Merci de changer le sens de votre smartphone.
<img src="./resources/svg/reload.svg" alt="Tournez votre écran">
</div>
<noscript class="text-center">
JavaScript est necessaire pour consulter notre carte de Voeux !
<br />
Vous pouvez l'activer dans les options de votre navigateur web.
</noscript>
<script src="./vendor/jQuery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/utils/Draggable.min.js"></script>
<script src="./resources/js/modal.js"></script>
<script src="./resources/js/pathRangeSlider.js"></script>
<script src="./resources/js/utils.js"></script>
<script src="./resources/js/screenChange.js"></script>
</body>
</html>