This repository has been archived by the owner on Nov 30, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 18
/
index.html
143 lines (123 loc) · 6.39 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#432f70">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#432f70">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#432f70">
<!-- Primary Meta Tags -->
<title>Natours - Outdoors is where life happens</title>
<meta name="title" content="Natours - Outdoors is where life happens">
<meta name="description" content="Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores nulla deserunt voluptatum nam.">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://anshumanmahato.github.io/">
<meta property="og:title" content="Natours - Outdoors is where life happens">
<meta property="og:description" content="Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores nulla deserunt voluptatum nam.">
<meta property="og:image" content="https://raw.githubusercontent.com/AnshumanMahato/Template/master/resources/img/nature.png">
<link href="https://fonts.googleapis.com/css2?family=Courgette&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/styles.css">
<link rel="stylesheet" href="./css/test.css">
<!-- <title>Surprize</title> -->
</head>
<body>
<!-- Sfx calling -->
<audio class="blast-aud">
<source src="./resources/sfx/blast.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<audio class="hbd-aud">
<source src="./resources/sfx/hbd.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<audio class="switch-aud">
<source src="./resources/sfx/switch.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<audio class="door-aud">
<source src="./resources/sfx/door.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<audio class="haunt-aud">
<source src="./resources/sfx/haunted-bgm.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div class="content">
<div class="decoration">
<div class="balloon balloon-left"></div>
<div class="balloon balloon-right"></div>
<div class="flag flag-left"></div>
<div class="flag flag-right"></div>
</div>
<div class="frame frame1">
<div class="img-back">
<img class="bd-pic" src="./resources/img/Asset 1-100.png" alt="" srcset="">
<img class="cap" src="./resources/img/SVG/Asset 7.svg" alt="">
<img class="confetti" src="./resources/img/SVG/Asset 1.svg" alt="">
<img class="cake" src="./resources/img/SVG/Asset 8.svg" alt="">
<div class="velas">
<div class="fuego"></div>
<div class="fuego"></div>
<div class="fuego"></div>
<div class="fuego"></div>
<div class="fuego"></div>
</div>
</div>
<div class="HBD-text">
<p class="HBD">May your soul rest in peace</p>
<p class="name">W</p>
</div>
</div>
<div class="frame frame2">
<div class="text-frame">
<p>
We do not get to choose our families, but we do get to choose our friends. You have been closer than family to me. On this day of your birth, I wish you every happiness
and blessing. Congratulations! You grew up one more year. Soon, you'll be 25, then 30,
then 35, then 40 and so on. And, if things go right for you then, in the meantime,
you'll be achieving your goals, getting married, have kids, see your kids getting married
and have grandchildren. And if you are lucky enough, you'll see your grandchildren marry
as well. And then eventually, you'll die. But mind you, these will only happen if things
go right for you. Things might go wrong for you, and maybe some night you might get highly
drunk and jump off the terrace of a building thinking it's a swimming pool down there and
die pitifully. No matter what, but eventually, you're going to die. And today, you are
officially one year closer to your death. Being a friend of yours, I would like to express
my condolence upon your death. But maybe, by the time you die, we might not be in contact
with one another. So today, in the name of your oncoming death, I wholeheartedly express
my grief in advance...
</p>
</div>
</div>
</div>
<div class="whitebox"></div>
<div class="giftbox">
<p class="gift-text">Wow! That was something weird.</p>
<p class="gift-text">Hey look! There's a gift for you</p>
<p class="gift-text">C'mon let's open it and see what's in there</p>
</div>
<div class="hallway content">
<img src="./resources/img/SVG/Asset 13.svg" class="hall" alt="" srcset="">
<p class="hall-text">Bro!</p>
<p class="hall-text">I know the moon looks really beautiful,</p>
<p class="hall-text">but, things are creepy here.</p>
<p class="hall-text">I think we should go back inside.</p>
</div>
<div class="empty-room">
<p class="room-text">Ok! Why is it so empty here?</p>
<p class="room-text">You know what, let's move outside.</p>
<p class="room-text">See if anyone's over there...</p>
</div>
<div class="blackbox">
<p class="bb-text">Hey!</p>
<p class="bb-text">Why is it so dark here?</p>
<p class="bb-text">Abinash! Can you please switch on the lights?</p>
</div>
<div class="btn switch"></div>
<div class="btn-ref"><p></p></div>
<!-- animation -->
<script src="./js/animation.js"></script>
</body>
</html>