-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
135 lines (82 loc) · 4.31 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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projet Affiche avec le Basic Starter</title>
<link rel="stylesheet" href="styles/css/main.css">
<script async src="./vendor/gsap.min.js"></script>
<script async src="./script/app.js"></script>
</head>
<body>
<!--🟢 HEADER -->
<header>
<div id="titleShaker">
<img id="title" src="./assets/webP/title.webp" alt="Titre">
<p id="subTitle">Du 19 SEPTEMBRE<br><span>au 1<sup>er</sup> novembre</span></p>
</div>
</header>
<!--🔴 FIN Header -->
<!--🟢 POSTER PARRALAX ########################################################## -->
<div id="posterHolder" class="affiche-container small">
<!-- Le background -->
<img id="background" class="formatContent" src="./assets/webP/background.webp" alt="Background">
<img id="pipes" class="formatContent " src="./assets/webP/trucAuFond.webp" alt="pipes">
<!-- Le portail -->
<img id="portal" class="formatContent" src="./assets/gif/magicpool.gif" alt="pool">
<img id="pool" class="formatContent" src="./assets/webP/emptyPool.webp" alt="pool">
<!-- Ce qui flotte dans le portail -->
<img id="switch" class="formatContent floating" src="./assets/webP/switch.webp" alt="switch">
<img id="joyConRouge" class="formatContent floating" src="./assets/webP/joyconRed.webp" alt="joyconRouge">
<img id="joyConbleu" class="formatContent floating" src="./assets/webP/joyconBlue.webp" alt="joyconbleu">
<img id="twitterIco" class="formatContent floating" src="./assets/webP/twitter.webp" alt="twitter">
<img id="tiktokIco" class="formatContent floating" src="./assets/webP/tiktok.webp" alt="tiktokIco">
<img id="netflixIco" class="formatContent floating" src="./assets/webP/netflix.webp" alt="netflixIco">
<!-- Le mac et l'oscilloscope -->
<img id="table" class="formatContent" src="./assets/webP/Oscillo.webp" alt="table">
<img id="mac" class="formatContent" src="./assets/webP/mac .webp" alt="mac">
<img id="girlLeg" class="formatContent" src="./assets/webP/legGirl.webp" alt="jambe de fille">
<img id="girlHead" class="formatContent" src="./assets/webP/faceGirl.webp" alt="tête de fille">
<img id="girlArm" class="formatContent" src="./assets/webP/girlArm.webp" alt="bras de fille">
<img id="phone" class="formatContent" src="./assets/webP/phone-sk.webp" alt="phone">
<img id="phoneCase" class="formatContent" src="./assets/webP/phone-sk.webp" alt="phone">
<img id="girlShirt" class="formatContent" src="./assets/webP/shirtGirl.webp" alt="shirt de fille">
<img id="plante" class="formatContent" src="./assets/webP/planteBotRight.webp" alt="plante bas droite">
<img id="handMe" class="formatContent" src="./assets/webP/arm_me.webp" alt="mon bras">
<!-- Filtres d'image -->
<div id="Noisefilter" class="formatContent"></div>
<div id="Colorfilter" class="formatContent"></div>
</div>
<!--🔴 FIN DU POSTER PARRALLAX ###################################################-->
<!-- 🟢 Footer -->
<footer>
<div id="logoHolder">
<img src="assets/webP/LogoMusee.webp" alt="">
<img src="assets/webP/SideSight.webp" alt="">
</div>
</footer>
<!-- 🔴 FIN Footer -->
<aside>
<section id="info">
<img src="./assets/png/exit.png" alt="" id="exit">
<p>[EXPLICATION PERTINENTE DU PROJET RELATIF A L'EXPO DE SUSAN KARE]</p>
<div class="faces">
<div class="person">
<img src="./assets/webP/th.webp" alt="">
<p>TIBO<br>
Designer <br>
Dresseur de tigres
</p>
</div>
<div class="person">
<img src="./assets/webP/re.webp" alt="">
<p>Rémi <br>
Creative DEV <br>
</p>
</div>
</div>
</section>
</aside>
</body>
</html>