-
Notifications
You must be signed in to change notification settings - Fork 25
/
index.html
152 lines (128 loc) · 6.73 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Happy Birthday My Friend" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<title>Happy Birthday My Brother</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Concert+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body class="d-flex align-items-center bodi" onload="myFunction()">
<div id="loader">
<center>
<img src="https://i.pinimg.com/originals/a4/f2/cb/a4f2cb80ff2ae2772e80bf30e9d78d4c.gif" width="80px" height="80px">
</center>
</div>
<div class="container" style="display:none;" id="Kontener">
<div class="ripple-background">
<div class="circle xlarge shade2"></div>
<div class="circle large shade3"></div>
<div class="circle mediun shade4"></div>
<div class="circle small shade5"></div>
</div>
<div class="container col-md-6 py-8 animate-bottom">
<div class="card">
<div class="card-body">
<p class="judul">Happy Birthday My Brother</p>
<h2 class="subjudul">Adhitya Pangestu.</h2>
<hr>
<center>
<div id="karosel" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#karosel" data-slide-to="0" class="active"></li>
<li data-target="#karosel" data-slide-to="1"></li>
<li data-target="#karosel" data-slide-to="2"></li>
<li data-target="#karosel" data-slide-to="3"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/image/foto1.png" alt="Adit">
</div>
<div class="carousel-item">
<img src="assets/image/foto2.png" alt="Adit">
</div>
<div class="carousel-item">
<img src="assets/image/foto3.png" alt="Adit">
</div>
<div class="carousel-item">
<img src="assets/image/foto4.png" alt="Adit">
</div>
</div>
<a class="carousel-control-prev" href="#karosel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#karosel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</center>
<hr>
<button type="button" class="tombol" style="width: 100%;" data-toggle="modal" data-target="#Modalmuncul" onclick="Mainkannn(); Gassngetik();">
Klik disini
</button>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="Modalmuncul" tabindex="-1" role="dialog" aria-labelledby="ModalmunculTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" style="color: #D3F3EE;" id="exampleModalLongTitle">Special Wish For Adhitya Pangestu</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p id="tekss">
</p>
<br><br> ~Wafa Rifqi Anafin.
</div>
<audio id="lagu" src="assets/lagu/lagu.mp3" preload="auto">
</audio>
<div class="modal-footer">
<button type="button" class="tombol" data-dismiss="modal" onclick="Mainkannn();">Tutup</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
function Mainkannn() {
var lagu = document.getElementById("lagu");
return lagu.paused ? lagu.play() : lagu.pause();
};
</script>
<script src="assets/js/salju.js" type="text/javascript"></script>
<script>
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 2200);
}
function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("Kontener").style.display = "block";
}
</script>
<script>
var i = 0;
var txt = "Kekuatan ucapan adalah sebagian dari doa, dan doa yang tulus akan selalu di kabulkan. Semoga di hari lahir lu ini akan membawa keberkahan dan kesuksesan di masa depan lu kelak, Aamiin. Selamat ulang tahun buat sahabat gua yang paling sabar";
var speed = 120;
function Gassngetik() {
if (i < txt.length) {
document.getElementById("tekss").innerHTML += txt.charAt(i);
i++;
setTimeout(Gassngetik, speed);
}
}
</script>
</body>
</html>