-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
100 lines (96 loc) · 4.49 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="./images/s-logo.png" />
<link rel="preload" href="./fonts/Montserrat-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous" />
<link rel="preload" href="./fonts/Itim-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>The Year Of Sgroup</title>
</head>
<body class="loading">
<audio controls style="display: none;">
<source src="./song/song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div id="app" style="opacity: 0;">
<canvas id="canvas"></canvas>
<header>
<a href="https://s-group.vn" target="_blank">
<img src="./images/s-logo.png" alt="s-group" />
</a>
</header>
<div class="celebrate">
<span>CHÚC MỪNG SINH NHẬT</span>
</div>
<div class="landing">
<div class="loading-container">
<div class="content">
<div class="statement">
<span class="statement-divider" style="transform: scale(0.038, 1);"></span>
<p class="text">
Cảm ơn bạn đã đồng hành cùng S-Group trong năm 2024.
Hãy cùng nhau nhìn lại những thành tựu mà chúng ta đã đạt được trong năm qua nhé!!!
</p>
<div class="statement-button">
<a href="#">
<span style="border-bottom: 1px solid #000;">-> Bắt đầu hành trình <-</span>
</a>
</div>
</div>
</div>
<div class="loading-content">
<img src="./images/loading.png" alt="">
<div id="loading">
<img src="./images/loading.png" alt="">
</div>
</div>
<div class="loadingtext">
<span>L</span>
<span>O</span>
<span>A</span>
<span>D</span>
<span>I</span>
<span>N</span>
<span>G</span>
</div>
</div>
</div>
<div class="explore">
<div class="explore-overlay">
<div class="overlay-background"></div>
<div class="overlay-content">
<button class="close">
<span class="button-close__line"></span>
<span class="button-close__line"></span>
</button>
<div class="overlay-content-wrapper">
<img src="./images/image-1.jpg" style="max-width: 100%;">
<h2>RECAP SINH NHẬT S-GROUP | HÀNH TRÌNH 10 NĂM PHÁT TRIỂN</h2>
<p>
Những khoảnh khắc của ngày sinh nhật vẫn luôn đọng lại trong tâm trí của các thành viên cũng như các bạn cựu thành viên.
Cảm ơn tất cả mọi người vì 10 năm đồng hành cùng sứ mệnh của S-Group, chúng mình sẽ tiếp tục phát triển và gìn giữ những giá trị ban đầu và nâng đỡ nhiều thế hệ sinh viên hơn nữa.
Một lần nữa cảm ơn các bạn và chúc cho S-Group ngày càng vươn xa hơn nữa!
</p>
</div>
<a href="#" class="more" target="_blank">Khám phá ngay!!!</a>
</div>
</div>
</div>
<footer>
<button class="audio">
<span class="play">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3.99 4.98"><defs><style>.cls-1{fill-rule:evenodd;}</style></defs><title>icon-play</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path id="Shape_7_copy" data-name="Shape 7 copy" class="cls-1" d="M0,4.71V.28A.26.26,0,0,1,.22,0,.33.33,0,0,1,.39,0L3.86,2.25a.28.28,0,0,1,.08.4.3.3,0,0,1-.08.08L.38,4.94A.24.24,0,0,1,0,4.86.28.28,0,0,1,0,4.71Z"></path></g></g></svg>
</span>
<span class="pause">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 298.67"><title>icon-pause</title><g id="Layer_2" data-name="Layer 2"><g id="Capa_1" data-name="Capa 1"><rect x="170.67" width="85.33" height="298.67"></rect><rect width="85.33" height="298.67"></rect></g></g></svg>
</span>
</button>
<p>
Think Different - Make Different
</p>
</footer>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>