Script HTML Ulang Tahun Keren – Hello guys siapa yang nggak suka merayakan ulang tahun? Hari spesial ini selalu membawa kebahagiaan, baik untuk yang merayakan maupun yang mengucapkan selamat.
Apalagi di era digital sekarang ini, kita bisa memberikan ucapan yang lebih kreatif dan menarik menggunakan script HTML ulang tahun.
Bayangin aja, dengan sedikit sentuhan kode, kamu bisa membuat tampilan website atau email ucapan ulang tahun jadi lebih spesial dan berkesan.
Nah buat kamu yang lagi nyari inspirasi, berikut ini saya penulis dari AC10 Tech, bakal share kumpulan script HTML ulang tahun love yang keren abis jadi langsung aja yuk kita cekidot.
Baca Juga Script HTML Bucin Paling IT
Contents
- 1 10 Script HTML Ulang Tahun Keren 2024
- 1.1 1. Script HTML Ulang Tahun Klasik
- 1.2 2. Script HTML Ulang Tahun dengan Animasi Balon
- 1.3 3. Script HTML Ulang Tahun dengan Efek Confetti
- 1.4 4. Script HTML Ulang Tahun dengan Gambar Background
- 1.5 5. Script HTML Ulang Tahun dengan Musik
- 1.6 6. Script HTML Ulang Tahun Love
- 1.7 7. Script HTML Ulang Tahun dengan Video
- 1.8 8. Script HTML Ulang Tahun dengan Timer Countdown
- 1.9 9. Script HTML Ulang Tahun dengan Kartu Ucapan Interaktif
10 Script HTML Ulang Tahun Keren 2024
Nah script yang kami bagikan dibawah ini tentu bekerja dengan baik. Kalian juga bisa memodifikasinya sendiri seperti mengganti kata-kata, background atau gambar dan musik.
1. Script HTML Ulang Tahun Klasik
Kita mulai dengan yang klasik dulu ya. Script ini sederhana tapi elegan, cocok buat kamu yang suka desain minimalis tapi tetap ingin terlihat berkelas. Kelebihannya, script ini ringan dan cepat di-load.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selamat Ulang Tahun</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f7f7f7;
color: #333;
}
.container {
margin-top: 50px;
}
h1 {
font-size: 3em;
color: #ff69b4;
}
</style>
</head>
<body>
<div class="container">
<h1>Selamat Ulang Tahun!</h1>
<p>Semoga harimu menyenangkan dan penuh berkah.</p>
</div>
</body>
</html>Gimana, cukup simpel kan? Tapi tetap terlihat manis dan menyampaikan pesan dengan jelas. Kalau kamu mau tambahin gambar atau animasi, tinggal sisipkan aja di bagian body.
Baca Juga Script HTML Bucin buat Pacar
2. Script HTML Ulang Tahun dengan Animasi Balon
Selanjutnya, kita coba yang sedikit lebih fancy. Script ini dilengkapi dengan animasi balon yang bakal bikin ucapan ulang tahunmu lebih hidup. Cocok buat kamu yang pengen tampil beda.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy Birthday</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #ffebcd;
color: #8b0000;
}
.container {
margin-top: 50px;
position: relative;
height: 400px;
}
h1 {
font-size: 3em;
color: #ff4500;
}
.balloon {
position: absolute;
bottom: 0;
width: 50px;
height: 100px;
background-color: red;
border-radius: 50%;
animation: rise 5s infinite;
}
.balloon:nth-child(2) {
left: 20%;
background-color: blue;
animation-duration: 6s;
}
.balloon:nth-child(3) {
left: 40%;
background-color: green;
animation-duration: 7s;
}
@keyframes rise {
0% { bottom: 0; }
100% { bottom: 100%; }
}
</style>
</head>
<body>
<div class="container">
<h1>Happy Birthday!</h1>
<p>May your day be filled with joy and surprises.</p>
<div class="balloon"></div>
<div class="balloon"></div>
<div class="balloon"></div>
</div>
</body>
</html>Menarik kan? Dengan balon-balon yang melayang, ucapan ulang tahunmu jadi lebih dinamis dan menyenangkan. Kamu bisa modifikasi warna balon sesuai selera.
3. Script HTML Ulang Tahun dengan Efek Confetti
Buat yang suka meriah, script yang satu ini pas banget. Dengan tambahan efek confetti, ucapan ulang tahunmu bakal terasa lebih festive. Pasti bikin yang ulang tahun senyum lebar deh.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy Birthday</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0e68c;
color: #b22222;
}
.container {
margin-top: 50px;
}
h1 {
font-size: 3em;
color: #ff8c00;
}
.confetti {
position: fixed;
width: 10px;
height: 10px;
background-color: #ff69b4;
animation: fall 5s infinite;
}
@keyframes fall {
0% { top: -10px; left: 50%; }
100% { top: 100%; left: 60%; }
}
</style>
</head>
<body>
<div class="container">
<h1>Happy Birthday!</h1>
<p>Wishing you all the best on your special day.</p>
<div class="confetti"></div>
<div class="confetti"></div>
<div class="confetti"></div>
</div>
</body>
</html>Efek confetti ini bener-bener bikin suasana jadi meriah. Kamu bisa tambahin lebih banyak confetti atau ubah warna sesuai tema ulang tahun.
4. Script HTML Ulang Tahun dengan Gambar Background
Kalau kamu pengen yang lebih personal, bisa coba script dengan gambar background ini. Kamu bisa pake foto kenangan atau gambar yang relevan dengan yang ulang tahun.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selamat Ulang Tahun</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background: url('https://via.placeholder.com/800x600') no-repeat center center fixed;
background-size: cover;
color: #fff;
}
.container {
margin-top: 50px;
background: rgba(0, 0, 0, 0.5);
padding: 20px;
border-radius: 10px;
}
h1 {
font-size: 3em;
color: #ff6347;
}
</style>
</head>
<body>
<div class="container">
<h1>Selamat Ulang Tahun!</h1>
<p>Semoga semua harapanmu tercapai.</p>
</div>
</body>
</html>Dengan gambar background, ucapan ulang tahun jadi lebih personal dan spesial. Pastikan gambar yang kamu pilih memiliki resolusi tinggi biar tampilannya maksimal.
5. Script HTML Ulang Tahun dengan Musik
Buat yang pengen ucapan ulang tahunnya makin hidup, bisa tambahin musik. Script ini bakal nyetel lagu favorit kamu atau lagu ulang tahun otomatis saat halaman dibuka.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy Birthday</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #e0ffff;
color: #ff1493;
}
.container {
margin-top: 50px;
}
h1 {
font-size: 3em;
color: #00ced1;
}
audio {
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1>Happy Birthday!</h1>
<p>Enjoy your special day with this song.</p>
<audio controls autoplay>
<source src="https://www.example.com/happy_birthday.mp3" type="audio/mpeg">
</audio>
</div>
</body>
</html>Menambahkan musik ke ucapan ulang tahun bikin suasana jadi lebih ceria. Pilih lagu yang sesuai dengan selera yang ulang tahun biar lebih berkesan.
6. Script HTML Ulang Tahun Love
Nah, yang satu ini spesial buat kamu yang pengen ngasih ucapan penuh cinta. Script ini dilengkapi dengan elemen-elemen romantis yang bakal bikin hati yang ulang tahun meleleh.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy Birthday My Love</title>
<style>
body {
font-family: 'Courier New', Courier, monospace;
text-align: center;
background-color: #fff0f5;
color: #dc143c;
}
.container {
margin-top: 50px;
}
h1 {
font-size: 3em;
color: #ff1493;
}
p {
font-size: 1.5em;
}
.heart {
color: #ff69b4;
font-size: 5em;
}
</style>
</head>
<body>
<div class="container">
<h1>Happy Birthday My Love</h1>
<p>You mean the world to me. Happy Birthday!</p>
<div class="heart">❤</div>
</div>
</body>
</html>Ucapan ulang tahun dengan tema cinta ini pasti bikin yang ulang tahun merasa sangat spesial. Kamu bisa tambahin kata-kata romantis lainnya untuk bikin lebih personal.
7. Script HTML Ulang Tahun dengan Video
Ingin mengucapkan selamat ulang tahun dengan cara yang lebih interaktif? Tambahkan video! Script ini memungkinkan kamu menyisipkan video kenangan atau ucapan ulang tahun langsung di halaman web.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy Birthday</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #fafad2;
color: #4682b4;
}
.container {
margin-top: 50px;
}
h1 {
font-size: 3em;
color: #ff4500;
}
video {
width: 80%;
height: auto;
border: 5px solid #ff6347;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>Happy Birthday!</h1>
<p>Here’s a special message for you.</p>
<video controls autoplay>
<source src="https://www.example.com/happy_birthday_video.mp4" type="video/mp4">
</video>
</div>
</body>
</html>Video bisa memberikan sentuhan yang lebih personal dan mendalam. Pastikan video yang kamu pilih berkualitas baik dan sesuai dengan pesan yang ingin disampaikan.
8. Script HTML Ulang Tahun dengan Timer Countdown
Buat yang pengen nambahin elemen kejutan, bisa coba script dengan timer countdown. Cocok banget buat ngasih tau berapa lama lagi waktu yang tersisa sebelum hari ulang tahun dimulai.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown to Birthday</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #ffe4e1;
color: #2e8b57;
}
.container {
margin-top: 50px;
}
h1 {
font-size: 3em;
color: #ff1493;
}
.countdown {
font-size: 2em;
color: #4682b4;
}
</style>
</head>
<body>
<div class="container">
<h1>Countdown to Your Birthday</h1>
<p class="countdown" id="countdown"></p>
</div>
<script>
const countdown = document.getElementById('countdown');
const targetDate = new Date('2024-12-31T00:00:00').getTime();
setInterval(() => {
const now = new Date().getTime();
const distance = targetDate - now;
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
countdown.innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s`;
if (distance < 0) {
clearInterval(x);
countdown.innerHTML = "HAPPY BIRTHDAY!";
}
}, 1000);
</script>
</body>
</html>Dengan countdown timer, kamu bisa menambah keseruan menuju hari ulang tahun. Pastikan untuk mengatur target date sesuai dengan tanggal ulang tahun yang ingin dirayakan.
9. Script HTML Ulang Tahun dengan Kartu Ucapan Interaktif
