-
Notifications
You must be signed in to change notification settings - Fork 0
/
Birthday.html
executable file
·72 lines (66 loc) · 2.26 KB
/
Birthday.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
<!DOCTYPE html>
<head>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./icon.png" type="image/x-icon">
<link rel="stylesheet" href="./css/birthday.css">
</head>
<body>
<button class="button" style="vertical-align:right;" ><a href="./index.html"><span style="color:black; opacity: 8em; font-weight: 500;">Back</span></a>
</button>
<div id="card">
<div id="card-inside">
<div class="wrap">
<p>Hey,</p>
<p>“A wish for you on your birthday, whatever you ask may you receive, whatever you seek may you find, whatever you wish may it be fulfilled on your birthday and always. Happy birthday!</p>
<p>I will be there with you in your side whenever you seek me.
</p>
<p>always.</p>
<p>Enjoy your Day . Stay Blessed nd Happy . Keep Smiling :)</p>
<center><h4>from</h4></center>
<p class="signed">Jimmy</p>
</div>
</div>
<div id="card-front">
<div class="wrap">
<h1><img src="./images/birthday.gif" style= "justify-content: center; margin-left: 1rem;" ></h1>
</div>
<button id="open">></button>
<button id="close"><</button>
</div>
</div>
<script>
(function() {
function $(id) {
return document.getElementById(id);
}
var card = $('card'),
openB = $('open'),
closeB = $('close'),
timer = null;
console.log('wat', card);
openB.addEventListener('click', function () {
card.setAttribute('class', 'open-half');
if (timer) clearTimeout(timer);
timer = setTimeout(function () {
card.setAttribute('class', 'open-fully');
timer = null;
}, 1000);
});
closeB.addEventListener('click', function () {
card.setAttribute('class', 'close-half');
if (timer) clearTimerout(timer);
timer = setTimeout(function () {
card.setAttribute('class', '');
timer = null;
}, 1000);
});
}());
</script>
<div style="visibility: hidden;">
<embed src="./taylor.mp4" loop="true"; autoplay="true"; type="audio/mp4">
</div>
</body>
</html>