-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·712 lines (653 loc) · 35.7 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
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
<html lang="fr" xmlns:og="http://ogp.me/ns#">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="Emeric BOYADJIAN" />
<meta name="keywords" content="mots clef projet" />
<meta name="description" content="Venez découvrir les jeunes pousses du multimédia de l'agence Kanzaï " />
<!-- Affichage standard sur périphérique mobile pour site adaptatif -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="icon" href="img\favicon-32x32.png" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
<!-- personal css -->
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/scroll.css" />
<link rel="stylesheet" type="text/css" href="css/flickity.css" />
<link rel="stylesheet" type="text/css" href="css/form.css" />
<title>Kanzaï</title>
</head>
<body>
<div class="splash">
<img src="img/front_page/header/kanzai_logo.svg" />
<div class="lds-ripple">
<div></div>
<div></div>
</div>
</div>
<header>
<div data-invert-x data-invert-y data-relative-input="true" class="parallax">
<img data-depth="0.2" src="img\front_page\header\fourth_task_header.svg" alt="black task top">
<img data-depth="0.4" src="img\front_page\header\third_task_header.svg" alt="orange task under">
<img data-depth="0.4" src="img\front_page\header\TacheGrise_HG.svg" alt="grey task down left">
<img data-depth="0.2" src="img\front_page\header\seconde_task_header.svg" alt="orange task top">
</div>
<!-- head of the page -->
<nav>
<!-- Logotype -->
<div class="logo">
<a href=""><img src="img\front_page\header\kanzai_logo.svg" alt="Kanzaï logo"></a>
</div>
<!-- main menu -->
<ul>
<li>
<a href="#equipe">L'équipe</a>
</li>
<li>
<a href="#racines">Racines</a>
</li>
<li>
<a href="#projets">Projets</a>
</li>
<li>
<a href="#footer">Contact</a>
</li>
</ul>
</nav>
<img src="img\front_page\header\kanzai_logo_min.png" alt="logo kanzai" class="logo-min">
<!-- baseline -->
<h1>Jeunes pousses du multimédia</h1>
<!-- agency type -->
<h4>AGENCE DE COMMUNICATION ÉTUDIANTE</h4>
<!-- scroll picto -->
<div id="scroll">
<a href="#"><span></span></a>
<span class="string" id="1"></span>
<span class="string" id="2"></span>
<span class="string" id="3"></span>
</div>
</header>
<!-- main page -->
<!-- team block -->
<div class="team" id="equipe">
<div data-invert-x data-invert-y data-relative-input="true" class="parallax">
<img data-depth="0.2" src="img\front_page\header\TacheNoire_MD.svg" alt="side task">
<img data-depth="0.2" src="img\front_page\team\first_task_teamV2.svg" alt="tree task">
</div>
<h2 class="title">L'ÉQUIPE</h2>
<p>
Nous sommes <span class="color">Kanzaï</span>, une agence de communication étudiante de <a href="https://www.iut-chy.univ-smb.fr/">l’iut de Chambéry</a>.<br/> Cette agence est composée de 15 jeunes pousses du multimédia que vous apprendrez
à découvrir et apprécier tout au long de votre navigation !
</p>
<p>
Durant cette année, nous avons travaillé ensemble sur différents projets tels que la réalisation de vidéo ou l'organisation d'événements, en suivant nos valeurs qui sont : <span class="color">la coopération</span>, <span class="color">l'efficacité</span>,
<span class="color">la convivialité</span> et <span class="color">le dynamisme</span>.
</p>
<p>
Découvrez notre équipe ainsi que nos réalisations.<br/> Et si une idée de projet bourgeonne, <a href="#footer">contactez-nous !</a>
</p>
<div class="js-rotate">
<img class="tree" src="img\front_page\team\plante.png" alt="tree">
<img src="img\front_page\team\png\fruit_baby_anais.png" data-name="anais" alt="anaïs" class="fruits">
<img src="img\front_page\team\png\fruit_baby_anthony.png" data-name="anthony" alt="anthony" class="fruits">
<img src="img\front_page\team\png\fruit_baby_camille.png" data-name="camille" alt="camille" class="fruits">
<img src="img\front_page\team\png\fruit_baby_clement.png" data-name="clement" alt="clement" class="fruits">
<img src="img\front_page\team\png\fruit_baby_come.png" data-name="come" alt="côme" class="fruits">
<img src="img\front_page\team\png\fruit_baby_emeric.png" data-name="emeric" alt="emeric" class="fruits">
<img src="img\front_page\team\png\fruit_baby_gabriel.png" data-name="gabriel" alt="gabriel" class="fruits">
<img src="img\front_page\team\png\fruit_baby_jonas.png" data-name="jonas" alt="jonas" class="fruits">
<img src="img\front_page\team\png\fruit_baby_konogan.png" data-name="konogan" alt="konogan" class="fruits">
<img src="img\front_page\team\png\fruit_baby_loriane.png" data-name="loriane" alt="loriane" class="fruits">
<img src="img\front_page\team\png\fruit_baby_lucas.png" data-name="lucas" alt="lucas" class="fruits">
<img src="img\front_page\team\png\fruit_baby_mathise.png" data-name="mathise" alt="mathis e" class="fruits">
<img src="img\front_page\team\png\fruit_baby_mathisg.png" data-name="mathisg" alt="mathis g" class="fruits">
<img src="img\front_page\team\png\fruit_baby_steeven.png" data-name="steeven" alt="steeven" class="fruits">
<img src="img\front_page\team\png\fruit_baby_diego.png" data-name="diego" alt="diego" class="fruits">
</div>
</div>
<!-- racines block -->
<div class="roots" id="racines">
<h2 class="title">NOS RACINES</h2>
<div class="container" data-relative-input="true">
<!-- audio-visuel -->
<div class="sub-container" data-depth="0.1">
<div>
<img src="img\front_page\roots\audiovisuel_logo.svg" alt="audio-visuel">
<h3 class="sub-title">Audiovisuel</h3>
<p>Armés de leurs caméras dernier cri, nos jeunes pousses viennent mettre du pistil dans vos vies.</p>
</div>
</div>
<!-- programmation -->
<div class="sub-container" data-depth="0.15">
<div>
<img src="img\front_page\roots\programming_logo.svg" alt="programmation">
<h3 class="sub-title">Programmation</h3>
<p>Nos pousses de l’ombre programment tout en joie pour vous proposer un contenu interactif et divertissant.</p>
</div>
</div>
<!-- communication -->
<div class="sub-container" data-depth="0.1">
<div>
<img src="img\front_page\roots\communication_logo.svg" alt="communication">
<h3 class="sub-title">Communication</h3>
<p>OYE OYE !
<br/> Une pousse avertie en valant deux, nos pousses communicantes s’activent à mettre à disposition toutes vos informations</p>
</div>
</div>
<!-- graphism -->
<div class="sub-container" data-depth="0.15">
<div>
<img src="img\front_page\roots\graphic_logo.svg" alt="graphism">
<h3 class="sub-title">Graphisme</h3>
<p>A l’aide de leurs plus beaux crayons de bois, nos pousses graphistes vous concocteront les meilleurs visuels pour vos projets. </p>
</div>
</div>
</div>
</div>
<!-- project block -->
<div class="projects" id="projets">
<h2 class="title">NOS PROJETS</h2>
<!-- mmi et apres -->
<div>
<a href="projects/mmietapres.html">
<span class="filter"></span>
<img src="img\front_page\projects\mmietapres.png" alt="mmi et apres">
</a>
</div>
<!-- nuit de la creation -->
<div>
<a href="projects/nuitcreation.html">
<span class="filter"></span>
<img src="img\front_page\projects\nuitcreation.png" alt="nuit de la creation">
</a>
</div>
<!-- cemoi -->
<div>
<a href="projects/cemoi.html">
<span class="filter"></span>
<img src="img\front_page\projects\cemoi.png" alt="cemoi">
</a>
</div>
<!-- mama rosa -->
<div>
<a href="projects/mamarosa.html">
<span class="filter"></span>
<img src="img\front_page\projects\mammarosa.png" alt="mama rosa">
</a>
</div>
<!-- web site workshop -->
<div>
<a href="projects/workshop.html">
<span class="filter"></span>
<img src="img\front_page\projects\workshop.png" alt="web site workshop">
</a>
</div>
</div>
<!-- personnal page for each member -->
<div class="add-pages members-zone">
<div>
<div class="buttons">
<div>
<img src="img\members_page\next_button.svg" alt="next">
<h4>Suivant</h4>
</div>
<div>
<img src="img\members_page\back_arrow.svg" alt="back">
</div>
<div>
<img src="img\members_page\previous_button.svg" alt="previous">
<h4>Précédent</h4>
</div>
</div>
<div class="members" data-member='anais'>
<div>
<h3 class="title">Anaïs</h3>
<p>Cet eucalyptus est une jeune pousse polyvalente. Elle est à la fois secrétaire de l’agence et graphiste. Compétente et créative, elle apporte une touche de fraîcheur à l’agence.</p>
<div>
<h4 class="sub-title">Adobe Illustrator</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Adobe Indesign</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Adobe After Effects</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Adobe Photoshop</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
</div>
<div>
<img src="img\members_page\img\anais_grande.png" alt="Photo anais">
<img src="img\members_page\img/kid/anais_petite.png" alt="Photo anais petite">
</div>
</div>
<div class="members" data-member="anthony">
<div>
<h3 class="title">Anthony</h3>
<p>Étant un peuplier, il peut s’adapter à chaque perturbation. Discret mais travailleur, il a des compétences en communication. Cependant cette jeune pousse n’en n’est pas moins polyvalente et apporte son soutien dans chacun des projets.
</p>
<div>
<h4 class="sub-title">Adobe Illustrator</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Adobe After Effects</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Adobe Photoshop</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Adobe Premiere Pro</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
</div>
<div>
<img src="img\members_page\img\antho_grand.png" alt="Photo d'Anthony">
<img src="img\members_page\img/kid/antho_petit.png" alt="Photo d'Anthony petit">
</div>
</div>
<div class="members" data-member="camille">
<div>
<h3 class="title">Camille</h3>
<p>Bien qu’associée au vin, cette vigne est la racine de l’agence. En plus d’être créative et compétente en graphisme, elle a un regard global sur les autres jeunes pousses et veille à ce que les projets soient bien réalisés.</p>
<div>
<h4 class="sub-title">Adobe Illustrator</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Adobe Indesign</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Adobe Xd</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Adobe Photoshop</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
</div>
<div>
<img src="img\members_page\img/camille_grande.png" alt="Photo de Camille">
<img src="img\members_page\img/kid/camille_petite.png" alt="Photo de Camille petite">
</div>
</div>
<div class="members" data-member="clement">
<div>
<h3 class="title">Clément</h3>
<p>Attaché aux traditions et au terroir, ce pommier est une jeune pousse polyvalente. S'intéressant à plein de domaines, il a su développer des compétences dans chacun d’entre eux.</p>
<div>
<h4 class="sub-title">Adobe Illustrator</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">HTML5 CSS3</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Adobe After Effects</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Final Cut Pro</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
</div>
<div>
<img src="img/members_page/img/clement_grand.png" alt="Photo de Clément">
<img src="img/members_page/img/kid/clement_petit.png" alt="Photo de Clément petit">
</div>
</div>
<div class="members" data-member="come">
<div>
<h3 class="title">Côme</h3>
<p>Au service du groupe tel un chêne, il sera en mesure de vous comprendre et de vous accompagner tout au long de vos projets ! Il ne lâche jamais prise et prend toujours son temps afin d’analyser et répondre à chaque situation.</p>
<div>
<h4 class="sub-title">Adobe Illustrator</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Adobe Premiere Pro</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Adobe After Effects</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Adobe Indesign</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
</div>
<div>
<img src="img/members_page/img/come_grand.png" alt="Photo de Côme">
<img src="img/members_page/img/kid/come_petit.png" alt="Photo de Côme petit">
</div>
</div>
<div class="members" data-member="emeric">
<div>
<h3 class="title">Emeric</h3>
<p>Ce cerisier du japon ne fleurit pas qu’au printemps. En effet, il est investi toute l'année dans chacun de ses projets. Il a acquis de nombreuses compétences en développement et saura faire éclore ses rêves.</p>
<div>
<h4 class="sub-title">HTML5 CSS3</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Javascript</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">UI UX design</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Laravel</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
</div>
<div>
<img src="img/members_page/img/emeric_grand.png" alt="Photo d'Emeric">
<img src="img/members_page/img/kid/emeric_petit.png" alt="Photo d'Emeric petit">
</div>
</div>
<div class="members" data-member="gabriel">
<div>
<h3 class="title">Gabriel</h3>
<p>Vous ne connaissez pas le plaqueminier ? Dommage, vous passez à côté d’un très bon développeur web. Expert en la matière, on peut compter sur sa rigueur et son investissement.</p>
<div>
<h4 class="sub-title">HTML5</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">CSS3</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Javascript</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">SQL</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
</div>
<div>
<img src="img\members_page\img/gab_grand.png" alt="Photo de Gabriel">
<img src="img\members_page\img/kid/gab_petit.png" alt="Photo de Gabriel petit">
</div>
</div>
<div class="members" data-member="jonas">
<div>
<h3 class="title">Jonas</h3>
<p>Bien qu’il représente les vacances, ce palmier est droit dans ses racines. Autonome et rigoureux il sera capable de mettre à profit ses compétences graphiques pour mener à bien tous ses projets. </p>
<div>
<h4 class="sub-title">UI UX design</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Adobe Illustrator</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Adobe After Effects</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Edition</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
</div>
<div>
<img src="img/members_page/img/jonas_grand.png" alt="Photo de Jonas">
<img src="img/members_page/img/kid/jonas_petit.png" alt="Photo de Jonas petit">
</div>
</div>
<div class="members" data-member="konogan">
<div>
<h3 class="title">Konogan</h3>
<p>Ce bambou de 2002 excelle dans le domaine du graphisme. Ses idées, son savoir-faire et son charisme, ont fait de lui une jeune pousse créative et compétente. L’adopter c’est l’aimer !</p>
<div>
<h4 class="sub-title">Adobe Illustrator</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Adobe Xd</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Blender</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Lâcher 60€/soirée</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
</div>
<div>
<img src="img\members_page\img/kono_grand.png" alt="Photo de Konogan">
<img src="img\members_page\img/kid/kono_petit.png" alt="Photo de Konogan petit">
</div>
</div>
<div class="members" data-member="loriane">
<div>
<h3 class="title">Loriane</h3>
<p>Hêtre ou ne pas hêtre, cette ancienne L vient apporter une touche philosophique à l’agence. Créative et originale c’est une vraie graphiste en herbe. Elle saura vous éblouir grâce à ses compétences artistiques incomparables
</p>
<div>
<h4 class="sub-title">Adobe Illustrator</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Procreate</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Adobe Photoshop</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Adobe Premiere Pro</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
</div>
<div>
<img src="img\members_page\img\loriane_grande.png" alt="Photo de Loriane">
<img src="img\members_page\img/kid/loriane_petite.png" alt="Photo de Loriane petite">
</div>
</div>
<div class="members" data-member="lucas">
<div>
<h3 class="title">Lucas</h3>
<p>À l’image du dragonnier, Lucas est une jeune pousse des plus atypique. Sa joie et son humour vont de pair avec ses compétences en audiovisuel. Les racines sous terre et les branches dans les étoiles, il sait faire preuve d’imagination et de créativité pour venir à bout de ses projets.</p>
<div>
<h4 class="sub-title">Adobe Premiere Pro</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Adobe After Effects</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Lightroom</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Matériel Audiovisuel</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
</div>
<div>
<img src="img/members_page/img/lucas_grand.png" alt="Photo de Lucas">
<img src="img/members_page/img/kid/lucas_petit.png" alt="Photo de Lucas petit">
</div>
</div>
<div class="members" data-member="mathise">
<div>
<h3 class="title">Mathis E.</h3>
<p>Malgré son apparence impressionnante, ce séquoia est bienveillant et sensible aux autres. En plus de ses compétences en graphisme, cette jeune pousse est polyvalente mais surtout s’investit dans tous ses projets. </p>
<div>
<h4 class="sub-title">Adobe Illustrator</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Adobe Xd</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Adobe Photoshop</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Adobe After Effects</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
</div>
<div>
<img src="img/members_page/img/mathise_grand.png" alt="Photo de Mathis.E">
<img src="img/members_page/img/kid/mathise_petit.png" alt="Photo de Mathis.E petit">
</div>
</div>
<div class="members" data-member="mathisg">
<div>
<h3 class="title">Mathis G.</h3>
<p>Cet érable est la référence en matière de motion design. Compétent, efficace mais surtout investi dans ses projets, il a notamment besoin d'être beaucoup arrosé pour bien pousser. </p>
<div>
<h4 class="sub-title">Adobe After Effects</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Adobe Premiere Pro</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Adobe Illustrator</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Arthrite</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
</div>
<div>
<img src="img/members_page/img/mathisg_grand.png" alt="Photo de Mathis.G">
<img src="img/members_page/img/kid/mathisg_petit.png" alt="Photo de Mathis.G petit">
</div>
</div>
<div class="members" data-member="steeven">
<div>
<h3 class="title">Steeven</h3>
<p>Jeune pousse saule-itaire, ce gamer est spécialisé dans les motion design et le développement web. Il n'hésitera pas à organiser les choses à sa façon et diriger des petits groupes de projets.</p>
<div>
<h4 class="sub-title">Adobe Premiere Pro</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Adobe After Effects</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">HTML5 CSS3</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Adobe Illustrator</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
</div>
<div>
<img src="img/members_page/img/steeven_grand.png" alt="Photo de Steeven">
<img src="img/members_page/img/kid/steeven_petit.png" alt="Photo de Steeven petit">
</div>
</div>
<div class="members" data-member="diego">
<div>
<h3 class="title">Diego</h3>
<p>Discret et pourtant très attentionné, ce bouleau est professionnel. Passionné et compétent, l’audiovisuel est sa marque de fabrique. Il saura faire fleurir vos projets car faire un bon boulot c’est avant tout faire ce que l’on aime.</p>
<div>
<h4 class="sub-title">Adobe Premiere Pro</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Ableton Live</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Adobe After Effects</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
<div>
<h4 class="sub-title">Sony FS5</h4>
<span><img src="img\members_page\jauge.png" alt="jauge"></span>
</div>
</div>
<div>
<img src="img/members_page/img/diego_grand.png" alt="Photo de Diego">
<img src="img/members_page/img/kid/diego_petit.png" alt="Photo de Diego petit">
</div>
</div>
</div>
</div>
<footer id="footer">
<!-- footer -->
<div data-invert-x data-invert-y data-relative-input="true" class="footer_para">
<img data-depth="0.2" src="img\front_page\footer\white_task_footer.svg" alt="white task">
<img data-depth="0.2" src="img\front_page\footer\grey_task_footer.svg" alt="grey task">
</div>
<h2 class="title">CONTACT</h2>
<!-- invite to action -->
<h4>Une idée de projet <span class="color">bourgeonne</span> ?</h4>
<!-- formulaire -->
<form method="post" action="form.php">
<div class="form">
<div class="top">
<div>
<div class="champ">
<input class="input" name="nom" type="text" id="nom" value="" placeholder="Nom*" required>
<!--value : <?php if (isset($_POST['nom'])) echo htmlspecialchars($_POST['nom']);?> -->
</div>
</div>
<div>
<div class="champ" id="champ_email">
<input class="input" name="email" type="email" id="email" value="" placeholder="Email*" required>
<!-- value : <?php if (isset($_POST['email'])) echo htmlspecialchars($_POST['email']);?> -->
</div>
</div>
</div>
<div class="champ" id="champ_message">
<textarea name="message" id="message" placeholder="Votre message...*" required></textarea>
<!--<?php if (isset($_POST['message'])) echo htmlspecialchars($_POST['message']);?>-->
</div>
</div>
<p>En cliquant sur envoyer vous autorisez ce site à conserver les données transmises via ce formulaire.
<br/> Aucune exploitation commerciales ne sera faite des données conservées. Voir notre <u>politique de gestion des données personnelles</u>.</p>
<span class="response"></span>
<label>
<button type="submit" value="Envoyer" id="send_mail" name="submitpost">Allons-y !</button>
<img src="img\front_page\footer\button.svg" alt="white task button">
<img src="img\front_page\footer\button2.svg" alt="orange task button">
</label>
</form>
<!-- bottom footer -->
<div>
<!-- mmi logos -->
<a href="https://mmi.univ-savoie.fr/site/" class="iut"><img src="img\front_page\footer\logoMMI_blanc.png" alt="mmi chambery"></a>
<div>
<p>©Kanzaï 2020-2021 - <a href="mentions.html">Mentions légales</a></p>
</div>
<!-- iut logos -->
<a href="https://www.iut-chy.univ-smb.fr/" class="iut"><img src="img\front_page\footer\logo_IUT_Chambery_blanc_rvb.png" alt="iut de chambery"></a>
</div>
</footer>
<script src="js/libs/jquery.js"></script>
<script src="js/libs/parallax.min.js"></script>
<script src="js/scroll.js"></script>
<script src="js/script.js"></script>
<script src="js/form.js"></script>
</body>
</html>