-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
124 lines (106 loc) · 9.87 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>X6DENT</title>
<link rel="icon" href="./images/favicon.ico" />
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<meta name="theme-color" content="#9473DE">
<meta property="og:url" content="http://www.x6dent.com" />
<meta property="og:type" content="website" />
<meta property="og:title" content="X6DENT" />
<meta property="og:description" content="Écouter X6DENT" />
<meta property="og:image" content="./images/jacket.jpg" />
<meta name="twitter:card" content="Découvrez le dernier album d'Abyllisse: X6DENT"></meta>
<meta name="description" content="Découvrez le dernier album d'Abyllisse: X6DENT">
</head>
<body class='X6DENT'>
<main class='X6DENT__Container'>
<img id="halo" src='./images/haaaalllooo.png' alt="Zbraaaa" width="100%" />
<img id="bang" src='./images/baaaang.png' alt="Zbraaaa" width="100%" />
<img id="zbraaa" src='./images/zbraaa.png' alt="Zbraaaa" width="100%" />
<div class='X6DENT__Picture'>
<img src='./images/jacket.jpg' alt='Homme portant un drapeau' height="100%" width="100%" />
</div>
<div class="X6DENT__Clips">
<div class='X6DENT__Clip'>
<iframe width="100%" src="https://www.youtube.com/embed/McMvTl8OrZY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class='X6DENT__Clip'>
<iframe width="100%" src="https://www.youtube.com/embed/2hfTVKM9ivw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class='X6DENT__Clip'>
<iframe width="100%" src="https://www.youtube.com/embed/se1pALnmmXM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class='X6DENT__Clip'>
<iframe width="100%" src="https://www.youtube.com/embed/E2VgG7JyDHQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<ul class='X6DENT__Links'>
<li class='X6DENT__Link'>
<a target="_blank" href='https://open.spotify.com/album/4lwWRdgZh3gXdVELMrOze3?si=FXRThcVORoqEc-eGebJUGA'>
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" ><path d="m12 24c6.624 0 12-5.376 12-12s-5.376-12-12-12-12 5.376-12 12 5.376 12 12 12zm4.872-6.344v.001c-.807 0-3.356-2.828-10.52-1.36-.189.049-.436.126-.576.126-.915 0-1.09-1.369-.106-1.578 3.963-.875 8.013-.798 11.467 1.268.824.526.474 1.543-.265 1.543zm1.303-3.173c-.113-.03-.08.069-.597-.203-3.025-1.79-7.533-2.512-11.545-1.423-.232.063-.358.126-.576.126-1.071 0-1.355-1.611-.188-1.94 4.716-1.325 9.775-.552 13.297 1.543.392.232.547.533.547.953-.005.522-.411.944-.938.944zm-13.627-7.485c4.523-1.324 11.368-.906 15.624 1.578 1.091.629.662 2.22-.498 2.22l-.001-.001c-.252 0-.407-.063-.625-.189-3.443-2.056-9.604-2.549-13.59-1.436-.175.048-.393.125-.625.125-.639 0-1.127-.499-1.127-1.142 0-.657.407-1.029.842-1.155z"/></svg>
Spotify
</a>
</li>
<li class='X6DENT__Link'>
<a target="_blank" href='https://deezer.page.link/pVQxFWms7rDnkpXD7'>
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 97.848 97.848"><g><g><rect y="70.818" width="17.838" height="5.406"/><rect y="63.791" width="17.838" height="5.408"/><rect y="56.764" width="17.838" height="5.408"/><rect y="49.736" width="17.838" height="5.405"/><rect y="42.709" width="17.838" height="5.404"/><rect x="20.001" y="70.818" width="17.84" height="5.406"/><rect x="20.001" y="63.791" width="17.84" height="5.408"/><rect x="20.001" y="56.764" width="17.84" height="5.408"/><rect x="40.004" y="70.818" width="17.84" height="5.406"/><rect x="40.004" y="63.791" width="17.84" height="5.408"/><rect x="40.004" y="56.764" width="17.84" height="5.408"/><rect x="40.004" y="49.736" width="17.84" height="5.405"/><rect x="40.004" y="42.709" width="17.84" height="5.404"/><rect x="40.004" y="35.68" width="17.84" height="5.406"/><rect x="40.004" y="28.653" width="17.84" height="5.407"/><rect x="60.005" y="70.818" width="17.841" height="5.406"/><rect x="60.005" y="63.791" width="17.841" height="5.408"/><rect x="60.005" y="56.764" width="17.841" height="5.408"/><rect x="60.005" y="49.736" width="17.841" height="5.405"/><rect x="60.005" y="42.709" width="17.841" height="5.404"/><rect x="80.008" y="70.818" width="17.84" height="5.406"/><rect x="80.008" y="63.791" width="17.84" height="5.408"/><rect x="80.008" y="56.762" width="17.84" height="5.406"/><rect x="80.008" y="49.736" width="17.84" height="5.406"/><rect x="80.008" y="42.707" width="17.84" height="5.407"/><rect x="80.008" y="35.681" width="17.84" height="5.404"/><rect x="80.008" y="28.652" width="17.84" height="5.404"/><rect x="80.008" y="21.623" width="17.84" height="5.406"/></g></g></svg>
Deezer
</a>
</li>
<li class='X6DENT__Link'>
<a target="_blank" href='http://itunes.apple.com/album/id1540567251?ls=1&app=itunes'>
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="-21 -21 682.66669 682.66669"><path d="m451.484375 109.722656c-1.871094 0-8.351563.921875-14.40625 2.042969-26.765625 4.992187-184.539063 37.148437-187.234375 38.171875-4.171875 1.578125-8.300781 5.320312-10.257812 9.300781l-1.660157 3.375s-.78125 238.710938-1.992187 241.394531c-1.835938 4.09375-5.917969 7.964844-9.679688 9.199219-1.78125.585938-8.832031 2.207031-15.664062 3.597657-31.652344 6.445312-43.410156 11.089843-53.359375 21.085937-5.648438 5.671875-9.832031 13.417969-11.640625 21.542969-1.726563 7.769531-1.144532 19.394531 1.316406 26.460937 5.140625 14.746094 16.539062 25.199219 31.890625 29.222657 14.492187 3.792968 41.617187-.429688 55.496094-8.636719 5.792969-3.433594 13.253906-10.636719 17.136719-16.558594 1.535156-2.34375 3.847656-7.066406 5.136718-10.492187 4.519532-12.007813 4.660156-225.859376 5.238282-228.554688.976562-4.566406 4.03125-7.914062 8.238281-9.046875 3.789062-1.023437 155.714843-31.765625 159.988281-32.375 4.023438-.570313 7.824219.863281 9.652344 3.652344 1.234375 1.878906 4.296875 149.410156.15625 154.324219-3.007813 3.578124-9.269532 4.957031-24.707032 8.1875-23.496093 4.90625-31.539062 7.234374-40.53125 11.730468-11.238281 5.617188-17.476562 11.773438-22.296874 21.992188-3.40625 7.226562-4.683594 12.648437-4.671876 19.84375.019532 12.867187 4.359376 22.925781 14.144532 32.765625 6.722656 6.765625 12.871094 10.3125 21.351562 12.308593 9.527344 2.246094 28.933594.765626 42.207032-3.21875 18.785156-5.640624 32.046874-19.3125 37.480468-38.625 1.058594-3.773437 1.597656-7.65625 1.601563-11.574218.027343-42.417969.160156-299.589844-.402344-301.539063-1.769531-6.105469-6.328125-9.589843-12.53125-9.578125zm0 0"/><path d="m320 0c-176.734375 0-320 143.265625-320 320s143.265625 320 320 320 320-143.265625 320-320-143.265625-320-320-320zm0 613.121094c-161.882812 0-293.121094-131.238282-293.121094-293.121094s131.238282-293.121094 293.121094-293.121094 293.121094 131.238282 293.121094 293.121094-131.238282 293.121094-293.121094 293.121094zm0 0"/></svg>
iTunes
</a>
</li>
<li class='X6DENT__Link'>
<a target="_blank" href='http://itunes.apple.com/album/id/1540567251'>
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;"><path d="M407,0H105C47.103,0,0,47.103,0,105v302c0,57.897,47.103,105,105,105h302c57.897,0,105-47.103,105-105V105 C512,47.103,464.897,0,407,0z M383,316v15v25c0,22.056-17.944,40-40,40h-25c-22.056,0-40-17.944-40-40c0-22.056,17.944-40,40-40 h35V168.807l-144,24.828V346v15v25c0,22.056-17.944,40-40,40h-25c-22.056,0-40-17.944-40-40c0-22.056,17.944-40,40-40h35V118.365 l204-35.172V316z"/></svg>
Apple Music
</a>
</li>
</ul>
<video class='X6DENT__Video' autoplay muted loop preload="false">
<source src="./images/bg_video.mp4" type="video/mp4">
</video>
<audio id="hello" controls="" style="display:none;">
<source src="https://www.w3schools.com/tags/horse.ogg" type="audio/mpeg">
</audio>
<div class='X6DENT__Overlay'></div>
</main>
<script>
var sound = document.querySelector('#hello')
var halo = document.querySelector('#halo')
var bang = document.querySelector('#bang')
var zbraaa = document.querySelector('#zbraaa')
var picture = document.querySelector('.X6DENT__Picture')
var firstCounter = 0
var secondCounter = 0
picture.addEventListener('click', function (e) {
firstCounter++
if(firstCounter >= 5) {
halo.classList.add('show');
// sound.play()
}
}, true);
halo.addEventListener('click', function (e) {
secondCounter++
if(secondCounter >= 2) {
bang.classList.add('show');
// sound.play()
}
}, true);
bang.addEventListener('click', function (e) {
secondCounter++
if(secondCounter >= 3) {
zbraaa.classList.add('show');
// sound.play()
}
}, true);
</script>
</body>
</html>