-
Notifications
You must be signed in to change notification settings - Fork 10
/
index.html
executable file
·385 lines (381 loc) · 24.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="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- HTML Meta Tags -->
<title>Layout Formation on Scroll | Codrops</title>
<meta name="description" content="Layout formations on scroll using GSAP">
<link rel="shortcut icon" href="favicon.ico">
<meta name="keywords" content="onscroll grid animation, gsap layout animation, scrolltrigger" />
<meta name="author" content="Codrops" />
<link rel="stylesheet" href="https://use.typekit.net/tas3jji.css">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script>document.documentElement.className="js";</script>
</head>
<body class="loading">
<main>
<header class="frame">
<h2 class="frame__title">Lennox Montgomery</h2>
<div class="frame__subline type-tiny">
<span>Layout Formation on Scroll</span>
<nav class="frame__links flex-line">
<a href="https://tympanus.net/codrops/?p=80656">Article</a>
<a href="https://tympanus.net/codrops/demos/">All demos</a>
<a href="https://github.com/codrops/OnScrollLayoutFormations">GitHub</a>
</nav>
</div>
<nav class="frame__tags flex-line type-tiny">
<a href="https://tympanus.net/codrops/demos/?tag=scroll">#scroll</a>
<a href="https://tympanus.net/codrops/demos/?tag=grid">#grid</a>
</nav>
<span class="frame__logo">LM</span>
</header>
<section class="content content--padded">
<h4 class="type-tiny">Intro</h4>
<p class="content__text">Welcome to Lennox Montgomery's photography portfolio. In a world dominated by speed and constant motion, Lennox Montgomery's photography invites you to slow down and immerse yourself in a visual experience that touches human fragility.</p>
</section>
<section class="content content--full content--padded">
<div class="grid grid--spaced" data-grid-first>
<div class="grid__img pos-1" style="background-image:url(img/39.webp)"></div>
<div class="grid__img pos-2" style="background-image:url(img/38.webp)"></div>
<div class="grid__img pos-3" style="background-image:url(img/37.webp)"></div>
<div class="grid__img pos-4" style="background-image:url(img/36.webp)"></div>
<div class="grid__img pos-5" style="background-image:url(img/35.webp)"></div>
<div class="grid__img pos-6" style="background-image:url(img/6.webp)"></div>
<div class="grid__img pos-7" style="background-image:url(img/7.webp)"></div>
<div class="grid__img pos-8" style="background-image:url(img/8.webp)"></div>
<div class="grid__img pos-9" style="background-image:url(img/9.webp)"></div>
<div class="grid__img pos-10" style="background-image:url(img/1.webp)"></div>
<div class="grid__img pos-11" style="background-image:url(img/2.webp)"></div>
<div class="grid__img pos-12" style="background-image:url(img/3.webp)"></div>
<div class="grid__img pos-13" style="background-image:url(img/4.webp)"></div>
<div class="grid__img pos-14" style="background-image:url(img/5.webp)"></div>
<div class="grid__img pos-15" style="background-image:url(img/34.webp)"></div>
<div class="grid__img pos-16" style="background-image:url(img/16.webp)"></div>
<div class="grid__img pos-17" style="background-image:url(img/17.webp)"></div>
</div>
<div class="content__title">
<h2 class="content__title-main">Rawness</h2>
<p class="type-tiny right end">Captured in every moment</p>
</div>
</section>
<section class="content content--padded">
<h4 class="type-tiny">About</h4>
<p class="content__text">His lens captures the quiet ache of reality, where shadow and light blur the line between seen and felt. Soft, muted tones breathe life into the ordinary, revealing the sensual curves and fragile textures hidden in plain sight. Each image lingers in the tension of what’s almost forgotten, where touch and absence coexist. There’s no rush, no spectacle—just the raw, intimate beauty of life unfolding in quiet moments. Light grazes skin, shadows hold secrets, and the world feels both distant and deeply near.</p>
</section>
<section class="content content--padded">
<div class="grid grid--columns grid--spaced" data-grid-second>
<div class="grid__img" style="background-image:url(img/23.webp)"></div>
<div class="grid__img" style="background-image:url(img/40.webp)"></div>
<div class="grid__img" style="background-image:url(img/10.webp)"></div>
<div class="grid__img" style="background-image:url(img/17.webp)"></div>
<div class="grid__img" style="background-image:url(img/22.webp)"></div>
<div class="grid__item pos-6">
<h4 class="type-tiny">Vision</h4>
<p>Unveiling the unseen</p>
</div>
<div class="grid__item pos-7">
<h4 class="type-tiny">Focus</h4>
<p>Where color meets form</p>
</div>
<div class="grid__item pos-18">
<h4 class="type-tiny">Essence</h4>
<p>Moments in motion</p>
</div>
</div>
</section>
<section class="content content--padded">
<h4 class="type-tiny">Life</h4>
<p class="content__text">Lennox Montgomery, born in 1987 in Brooklyn, grew up attuned to the gentle interplay of light and shadow in the city’s quieter corners. His eye was drawn to the unnoticed beauty in the mundane, the softness in the grit. In his early 20s, he relocated to Los Angeles, where the hazy sunlight, muted colors, and sprawling landscapes deepened his introspective approach to art. There, he found inspiration in the delicate moments between movement and stillness, capturing the fleeting, sensual beauty of everyday life in a way that feels both intimate and timeless.</p>
</section>
<section class="content content--padded content--full">
<div class="grid grid--columns grid--spaced grid--single" data-grid-third>
<div class="grid__img pos-2" style="background-image:url(img/23.webp)"></div>
<div class="grid__img pos-2" style="background-image:url(img/24.webp)"></div>
<div class="grid__img pos-2" style="background-image:url(img/25.webp)"></div>
<div class="grid__img pos-2" style="background-image:url(img/26.webp)"></div>
<div class="grid__img pos-2" style="background-image:url(img/27.webp)"></div>
<div class="grid__item acenter pos-1">
<h4 class="type-tiny">Craft</h4>
<p>His craft reveals the quiet beauty in life’s fleeting moments.</p>
</div>
<div class="grid__item acenter pos-4">
<h4 class="type-tiny">Perspective</h4>
<p>His perspective finds depth in stillness, where the unseen speaks.</p>
</div>
</div>
</section>
<section class="content content--padded">
<h4 class="type-tiny">Work Ethics</h4>
<p class="content__text">Driven by a strong sense of discipline and dedication, his work ethic reflects a deep commitment to both his craft and personal growth. With a relentless focus on innovation, he consistently seeks to push the boundaries of his creativity, drawing inspiration from the diverse environments that have shaped his artistic journey. Each project is approached with meticulous attention to detail, often requiring long hours and unwavering determination to achieve the desired result.</p>
</section>
<section class="content content--padded content--full">
<div class="grid grid--spaced grid--small" data-grid-fourth>
<div class="grid__img" style="background-image:url(img/28.webp)"></div>
<div class="grid__img" style="background-image:url(img/29.webp)"></div>
<div class="grid__img" style="background-image:url(img/30.webp)"></div>
<div class="grid__img" style="background-image:url(img/1.webp)"></div>
<div class="grid__img" style="background-image:url(img/2.webp)"></div>
<div class="grid__img" style="background-image:url(img/3.webp)"></div>
<div class="grid__img" style="background-image:url(img/4.webp)"></div>
<div class="grid__img" style="background-image:url(img/5.webp)"></div>
<div class="grid__img" style="background-image:url(img/6.webp)"></div>
<div class="grid__img" style="background-image:url(img/7.webp)"></div>
<div class="grid__img" style="background-image:url(img/8.webp)"></div>
<div class="grid__img" style="background-image:url(img/9.webp)"></div>
<div class="grid__img" style="background-image:url(img/10.webp)"></div>
<div class="grid__img" style="background-image:url(img/11.webp)"></div>
<div class="grid__img" style="background-image:url(img/12.webp)"></div>
<div class="grid__img" style="background-image:url(img/13.webp)"></div>
<div class="grid__img" style="background-image:url(img/14.webp)"></div>
<div class="grid__img" style="background-image:url(img/15.webp)"></div>
<div class="grid__img" style="background-image:url(img/16.webp)"></div>
<div class="grid__img" style="background-image:url(img/17.webp)"></div>
<div class="grid__img" style="background-image:url(img/18.webp)"></div>
<div class="grid__img" style="background-image:url(img/19.webp)"></div>
<div class="grid__img" style="background-image:url(img/20.webp)"></div>
<div class="grid__img" style="background-image:url(img/21.webp)"></div>
<div class="grid__img" style="background-image:url(img/22.webp)"></div>
<div class="grid__img" style="background-image:url(img/23.webp)"></div>
<div class="grid__img" style="background-image:url(img/24.webp)"></div>
<div class="grid__img" style="background-image:url(img/25.webp)"></div>
<div class="grid__img" style="background-image:url(img/26.webp)"></div>
<div class="grid__img" style="background-image:url(img/27.webp)"></div>
<div class="grid__img" style="background-image:url(img/28.webp)"></div>
<div class="grid__img" style="background-image:url(img/29.webp)"></div>
<div class="grid__img" style="background-image:url(img/30.webp)"></div>
<div class="grid__img" style="background-image:url(img/31.webp)"></div>
<div class="grid__img" style="background-image:url(img/32.webp)"></div>
<div class="grid__img" style="background-image:url(img/33.webp)"></div>
</div>
</section>
<section class="content content--full">
<div class="grid grid--small" data-grid-fourth-v2>
<div class="grid__img" style="background-image:url(img/15.webp)"></div>
<div class="grid__img" style="background-image:url(img/32.webp)"></div>
<div class="grid__img" style="background-image:url(img/9.webp)"></div>
<div class="grid__img" style="background-image:url(img/41.webp)"></div>
<div class="grid__img" style="background-image:url(img/6.webp)"></div>
<div class="grid__img" style="background-image:url(img/21.webp)"></div>
<div class="grid__img" style="background-image:url(img/13.webp)"></div>
<div class="grid__img" style="background-image:url(img/2.webp)"></div>
<div class="grid__img" style="background-image:url(img/27.webp)"></div>
<div class="grid__img" style="background-image:url(img/37.webp)"></div>
<div class="grid__img" style="background-image:url(img/14.webp)"></div>
<div class="grid__img" style="background-image:url(img/10.webp)"></div>
<div class="grid__img" style="background-image:url(img/29.webp)"></div>
<div class="grid__img" style="background-image:url(img/1.webp)"></div>
<div class="grid__img" style="background-image:url(img/19.webp)"></div>
<div class="grid__img" style="background-image:url(img/38.webp)"></div>
<div class="grid__img" style="background-image:url(img/5.webp)"></div>
<div class="grid__img" style="background-image:url(img/25.webp)"></div>
<div class="grid__img" style="background-image:url(img/11.webp)"></div>
<div class="grid__img" style="background-image:url(img/40.webp)"></div>
<div class="grid__img" style="background-image:url(img/22.webp)"></div>
<div class="grid__img" style="background-image:url(img/3.webp)"></div>
<div class="grid__img" style="background-image:url(img/30.webp)"></div>
<div class="grid__img" style="background-image:url(img/18.webp)"></div>
<div class="grid__img" style="background-image:url(img/33.webp)"></div>
<div class="grid__img" style="background-image:url(img/4.webp)"></div>
<div class="grid__img" style="background-image:url(img/36.webp)"></div>
<div class="grid__img" style="background-image:url(img/28.webp)"></div>
<div class="grid__img" style="background-image:url(img/23.webp)"></div>
<div class="grid__img" style="background-image:url(img/35.webp)"></div>
<div class="grid__img" style="background-image:url(img/16.webp)"></div>
<div class="grid__img" style="background-image:url(img/31.webp)"></div>
<div class="grid__img" style="background-image:url(img/7.webp)"></div>
<div class="grid__img" style="background-image:url(img/26.webp)"></div>
<div class="grid__img" style="background-image:url(img/9.webp)"></div>
<div class="grid__img" style="background-image:url(img/42.webp)"></div>
</div>
</section>
<section class="content content--padded">
<h4 class="type-tiny">Inspiration</h4>
<p class="content__text">Lennox draws inspiration from the quiet, in-between moments of everyday life—the fleeting light at dawn, the subtle movement of shadows, the way stillness can carry untold stories. He’s moved by the fragility of human existence, finding beauty in imperfection and transience. Nature plays a role too, but not in grand landscapes—rather, in the soft, textured layers of light filtering through a window or the delicate detail of wind stirring leaves.</p>
</section>
<section class="content content--padded content--full">
<div class="grid grid--spaced grid--wide" data-grid-fifth>
<div class="grid__img" style="background-image:url(img/20.webp)"></div>
<div class="grid__img" style="background-image:url(img/19.webp)"></div>
<div class="grid__img" style="background-image:url(img/18.webp)"></div>
<div class="grid__img" style="background-image:url(img/17.webp)"></div>
<div class="grid__img" style="background-image:url(img/16.webp)"></div>
<div class="grid__img" style="background-image:url(img/15.webp)"></div>
<div class="grid__img" style="background-image:url(img/14.webp)"></div>
<div class="grid__img" style="background-image:url(img/13.webp)"></div>
<div class="grid__img" style="background-image:url(img/12.webp)"></div>
<div class="grid__img" style="background-image:url(img/11.webp)"></div>
<div class="grid__img" style="background-image:url(img/10.webp)"></div>
<div class="grid__img" style="background-image:url(img/9.webp)"></div>
<div class="grid__img" style="background-image:url(img/8.webp)"></div>
<div class="grid__img" style="background-image:url(img/7.webp)"></div>
<div class="grid__img" style="background-image:url(img/6.webp)"></div>
<div class="grid__img" style="background-image:url(img/5.webp)"></div>
<div class="grid__img" style="background-image:url(img/4.webp)"></div>
<div class="grid__img" style="background-image:url(img/3.webp)"></div>
<div class="grid__img" style="background-image:url(img/2.webp)"></div>
<div class="grid__img" style="background-image:url(img/1.webp)"></div>
</div>
<div class="content__title">
<h2 class="content__title-main">Explorations</h2>
<p class="type-tiny right end">Nothing left unseen</p>
</div>
</section>
<section class="content content--padded">
<h4 class="type-tiny">Process</h4>
<p class="content__text">The creative process begins with stillness and observation, letting the moment speak before any action is taken. It’s about immersing in the environment, feeling the quiet shifts in light, texture, and mood. Rather than forcing a scene, there’s a deep patience—waiting for the right interplay of shadow or the soft touch of light on a surface. </p>
</section>
<section class="content content--full content--cutoff">
<div class="grid grid--spaced grid--zoomed" data-grid-sixth>
<div class="grid__img" style="background-image:url(img/42.webp)"></div>
<div class="grid__img" style="background-image:url(img/10.webp)"></div>
<div class="grid__img" style="background-image:url(img/40.webp)"></div>
<div class="grid__img" style="background-image:url(img/19.webp)"></div>
<div class="grid__img" style="background-image:url(img/1.webp)"></div>
<div class="grid__img" style="background-image:url(img/12.webp)"></div>
<div class="grid__img" style="background-image:url(img/38.webp)"></div>
<div class="grid__img" style="background-image:url(img/13.webp)"></div>
<div class="grid__img" style="background-image:url(img/36.webp)"></div>
</div>
<div class="content__title">
<h2 class="content__title-main">Unspoken</h2>
<p class="type-tiny right end">Love will not save us</p>
</div>
</section>
<section class="content content--padded">
<h4 class="type-tiny">Collaborations</h4>
<p class="content__text">Known for his openness to new ideas and innovative approaches, Lennox thrives on the energy that comes from working with fellow artists, designers, and creative professionals. By blending unique perspectives and exploring diverse techniques, collaborations with Lennox result in work that pushes artistic boundaries and connects with a wider audience.</p>
</section>
<section class="content content--full content--padded">
<div class="grid grid--column" data-grid-seventh>
<div class="grid__item span-3">
<h4 class="type-tiny">Opalescent</h4>
<p>Their hearts glow softly, bound by a love so pure.</p>
</div>
<div class="grid__img ar-rect span-2">
<div class="grid__img-inner" style="background-image:url(img/2.webp)"></div>
</div>
<div class="grid__img ar-wide">
<div class="grid__img-inner" style="background-image:url(img/4.webp)"></div>
</div>
<div class="grid__img ar-wide span-2">
<div class="grid__img-inner" style="background-image:url(img/6.webp)"></div>
</div>
<div class="grid__img span-2 ar-narrow">
<div class="grid__img-inner" style="background-image:url(img/8.webp)"></div>
</div>
<div class="grid__img ar-wide">
<div class="grid__img-inner" style="background-image:url(img/10.webp)"></div>
</div>
<div class="grid__img ar-wide span-2">
<div class="grid__img-inner" style="background-image:url(img/12.webp)"></div>
</div>
<div class="grid__img span-2 ar-narrow">
<div class="grid__img-inner" style="background-image:url(img/14.webp)"></div>
</div>
<div class="grid__item span-3">
<h4 class="type-tiny">Softness</h4>
<p>Blissful serenity embraces their world in gentle tones.</p>
</div>
<div class="grid__img span-2 ar-narrow">
<div class="grid__img-inner" style="background-image:url(img/16.webp)"></div>
</div>
<div class="grid__img ar-wide span-2">
<div class="grid__img-inner" style="background-image:url(img/18.webp)"></div>
</div>
<div class="grid__img ar-rect">
<div class="grid__img-inner" style="background-image:url(img/20.webp)"></div>
</div>
<div class="grid__img ar-wide span-2">
<div class="grid__img-inner" style="background-image:url(img/22.webp)"></div>
</div>
<div class="grid__img ar-narrow span-2">
<div class="grid__img-inner" style="background-image:url(img/24.webp)"></div>
</div>
<div class="grid__img ar-wide span-3">
<div class="grid__img-inner" style="background-image:url(img/26.webp)"></div>
</div>
</div>
</section>
<section class="content content--padded">
<h4 class="type-tiny">Style</h4>
<p class="content__text">His style is rooted in subtlety and restraint, capturing the delicate balance between light and shadow, presence and absence. He gravitates toward muted, natural tones that evoke a sense of quiet intimacy, favoring soft textures and a timeless, understated aesthetic. There’s a rawness in his work, yet it never feels harsh—rather, it reveals the fragility and beauty found in life’s simplest moments.</p>
</section>
<section class="content content--full">
<div class="grid grid--tiny" data-grid-eighth>
<div class="grid__img" style="background-image:url(img/28.webp)"></div>
<div class="grid__img" style="background-image:url(img/29.webp)"></div>
<div class="grid__img" style="background-image:url(img/30.webp)"></div>
<div class="grid__img" style="background-image:url(img/1.webp)"></div>
<div class="grid__img" style="background-image:url(img/2.webp)"></div>
<div class="grid__img" style="background-image:url(img/3.webp)"></div>
<div class="grid__img" style="background-image:url(img/4.webp)"></div>
<div class="grid__img" style="background-image:url(img/5.webp)"></div>
<div class="grid__img" style="background-image:url(img/6.webp)"></div>
<div class="grid__img" style="background-image:url(img/7.webp)"></div>
<div class="grid__img" style="background-image:url(img/8.webp)"></div>
<div class="grid__img" style="background-image:url(img/9.webp)"></div>
<div class="grid__img" style="background-image:url(img/10.webp)"></div>
<div class="grid__img" style="background-image:url(img/11.webp)"></div>
<div class="grid__img" style="background-image:url(img/12.webp)"></div>
<div class="grid__img" style="background-image:url(img/13.webp)"></div>
<div class="grid__img" style="background-image:url(img/14.webp)"></div>
<div class="grid__img" style="background-image:url(img/15.webp)"></div>
<div class="grid__img" style="background-image:url(img/16.webp)"></div>
<div class="grid__img" style="background-image:url(img/17.webp)"></div>
<div class="grid__img" style="background-image:url(img/18.webp)"></div>
<div class="grid__img" style="background-image:url(img/19.webp)"></div>
<div class="grid__img" style="background-image:url(img/20.webp)"></div>
<div class="grid__img" style="background-image:url(img/21.webp)"></div>
<div class="grid__img" style="background-image:url(img/22.webp)"></div>
<div class="grid__img" style="background-image:url(img/23.webp)"></div>
<div class="grid__img" style="background-image:url(img/24.webp)"></div>
<div class="grid__img" style="background-image:url(img/25.webp)"></div>
<div class="grid__img" style="background-image:url(img/26.webp)"></div>
<div class="grid__img" style="background-image:url(img/27.webp)"></div>
<div class="grid__img" style="background-image:url(img/28.webp)"></div>
<div class="grid__img" style="background-image:url(img/29.webp)"></div>
<div class="grid__img" style="background-image:url(img/30.webp)"></div>
<div class="grid__img" style="background-image:url(img/31.webp)"></div>
<div class="grid__img" style="background-image:url(img/32.webp)"></div>
<div class="grid__img" style="background-image:url(img/33.webp)"></div>
</div>
</section>
<section class="content content--padded">
<h4 class="type-tiny">Future</h4>
<p class="content__text">Looking ahead, Lennox envisions his work diving deeper into the exploration of intimacy and impermanence. He’s drawn to the idea of capturing moments that feel almost invisible—those fleeting seconds between stillness and motion, light and shadow. In the future, he hopes to experiment more with multimedia projects, blending photography with film and sound to create immersive, sensory experiences that evoke emotion beyond the frame.</p>
</section>
<section class="content content--full">
<div class="grid grid--columns" data-grid-ninth>
<div class="grid__img" style="background-image:url(img/35.webp)"></div>
<div class="grid__img" style="background-image:url(img/31.webp)"></div>
<div class="grid__img" style="background-image:url(img/20.webp)"></div>
<div class="grid__img" style="background-image:url(img/34.webp)"></div>
<div class="grid__img" style="background-image:url(img/38.webp)"></div>
</div>
</section>
<section class="content content--padded">
<h4 class="type-tiny">Contact</h4>
<p class="content__text">Interested in collaborating or just want to say hello? Reach out to Lennox. He’s always open to new projects and conversations.</p>
</section>
<footer class="page-footer type-tiny">
<span>Created by <a href="https://x.com/codrops">@codrops</a> 2024</span>
<span><a href="https://tympanus.net/codrops/demos/">More demos</a></span>
<a href="https://tympanus.net/codrops/collective/">Subscribe to our frontend newsletter</a>
</footer>
</main>
<!-- JavaScript dependencies -->
<!-- GSAP library -->
<script src="js/gsap.min.js"></script>
<!-- GSAP ScrollTrigger plugin -->
<script src="js/ScrollTrigger.min.js"></script>
<!-- ImagesLoaded -->
<script src="js/imagesloaded.pkgd.min.js"></script>
<!-- Add (Lenis) smooth scroll -->
<script src="js/lenis.min.js"></script>
<script src="js/smoothscroll.js"></script>
<!-- Scripts for the effect -->
<script type="module" src="js/index.js"></script>
</body>
</html>