<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy Birthday Kak Yanis Ikhsan Siama</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary: #6C63FF;
--secondary: #4D44DB;
--accent: #FF6584;
--light: #F8F9FA;
--dark: #212529;
--text: #2D3748;
--gold: #FFD700;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
color: var(--text);
overflow-x: hidden;
line-height: 1.6;
}
.birthday-card {
position: relative;
width: 100%;
max-width: 900px;
background: white;
border-radius: 20px;
padding: 60px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
overflow: hidden;
z-index: 1;
text-align: center;
}
.birthday-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 10px;
background: linear-gradient(90deg, var(--primary), var(--accent), var(--gold));
}
.header {
margin-bottom: 40px;
position: relative;
}
h1 {
font-family: 'Playfair Display', serif;
font-size: 3rem;
margin-bottom: 15px;
color: var(--primary);
background: linear-gradient(to right, var(--primary), var(--accent));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.age {
font-size: 1.2rem;
color: var(--accent);
font-weight: 600;
margin-bottom: 30px;
}
.message {
font-size: 1.1rem;
margin-bottom: 40px;
position: relative;
}
.message p {
margin-bottom: 15px;
}
.highlight {
display: inline-block;
padding: 0.5rem 1rem;
background: linear-gradient(to right, var(--primary), var(--secondary));
color: white;
font-weight: 600;
border-radius: 8px;
margin: 10px 0;
box-shadow: 0 4px 15px rgba(108, 99, 255, 0.3);
}
.signature {
margin-top: 50px;
font-style: italic;
font-size: 1.2rem;
color: var(--secondary);
font-weight: 600;
}
.social-links {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 40px;
}
.social-links a {
color: white;
background: var(--primary);
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
text-decoration: none;
font-size: 1.2rem;
box-shadow: 0 4px 10px rgba(108, 99, 255, 0.3);
}
.social-links a:hover {
transform: translateY(-5px) scale(1.1);
box-shadow: 0 8px 20px rgba(108, 99, 255, 0.4);
}
.social-links a.whatsapp { background: #25D366; }
.social-links a.instagram { background: #E1306C; }
.social-links a.tiktok { background: #000000; }
.floating-elements {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
overflow: hidden;
}
.floating-element {
position: absolute;
background: rgba(108, 99, 255, 0.1);
border-radius: 50%;
animation: float 15s infinite linear;
}
.birthday-cake {
font-size: 3rem;
margin: 20px 0;
animation: bounce 2s infinite;
}
.photo-frame {
width: 200px;
height: 200px;
border-radius: 50%;
margin: 0 auto 30px;
border: 5px solid white;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
overflow: hidden;
background: #eee;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.photo-frame::before {
content: '';
position: absolute;
inset: -10px;
border-radius: 50%;
background: linear-gradient(45deg, var(--primary), var(--accent), var(--gold));
z-index: -1;
animation: rotate 4s linear infinite;
}
.photo-placeholder {
font-size: 3rem;
color: #999;
}
@keyframes float {
0% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(180deg); }
100% { transform: translateY(0) rotate(360deg); }
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Responsive design */
@media (max-width: 768px) {
.birthday-card {
padding: 40px 20px;
}
h1 {
font-size: 2.2rem;
}
.photo-frame {
width: 150px;
height: 150px;
}
}
</style>
</head>
<body>
<div class="birthday-card">
<div class="floating-elements">
<div class="floating-element" style="width: 100px; height: 100px; top: 10%; left: 5%; animation-delay: 0s;"></div>
<div class="floating-element" style="width: 60px; height: 60px; top: 60%; left: 80%; animation-delay: 2s;"></div>
<div class="floating-element" style="width: 80px; height: 80px; top: 80%; left: 20%; animation-delay: 4s;"></div>
<div class="floating-element" style="width: 120px; height: 120px; top: 30%; left: 70%; animation-delay: 6s;"></div>
</div>
<div class="header">
<div class="photo-frame">
<div class="photo-placeholder">
<i class="fas fa-camera"></i>
</div>
</div>
<h1>Happy Birthday Kak Yanis!</h1>
<div class="age">25 April 2001 - 25 April 2025</div>
<div class="birthday-cake">🎉🎂🎁</div>
</div>
<div class="message">
<p>Di hari yang istimewa ini, aku ingin mengucapkan:</p>
<div class="highlight">Selamat Ulang Tahun yang ke-24!</div>
<p>Semoga di usia yang baru ini, Kakak diberikan:</p>
<p>💖 Kebahagiaan yang tak terhingga</p>
<p>🌟 Kesuksesan dalam segala hal</p>
<p>🦋 Kesehatan yang selalu menyertai</p>
<p>Semoga semua impian dan harapan Kakak di tahun ini bisa terwujud.</p>
<p>Terima kasih sudah menjadi sosok yang menginspirasi!</p>
</div>
<div class="signature">
<p>Dengan penuh kasih sayang,</p>
<p>Renza Agastha Merdeka</p>
</div>
<div class="social-links">
<a href="https://wa.me/6289654423900" class="whatsapp" target="_blank">
<i class="fab fa-whatsapp"></i>
</a>
<a href="https://www.instagram.com/regaska_17/" class="instagram" target="_blank">
<i class="fab fa-instagram"></i>
</a>
<a href="https://www.tiktok.com/@regaska_17" class="tiktok" target="_blank">
<i class="fab fa-tiktok"></i>
</a>
</div>
</div>
<script>
// Animasi elemen mengambang
function initFloatingElements() {
const container = document.querySelector('.floating-elements');
const colors = ['rgba(108, 99, 255, 0.1)', 'rgba(255, 101, 132, 0.1)', 'rgba(255, 215, 0, 0.1)'];
for(let i = 0; i < 10; i++) {
const element = document.createElement('div');
element.className = 'floating-element';
element.style.width = Math.random() * 100 + 50 + 'px';
element.style.height = element.style.width;
element.style.left = Math.random() * 100 + '%';
element.style.top = Math.random() * 100 + '%';
element.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
element.style.animation = `float ${Math.random() * 20 + 10}s linear infinite`;
element.style.animationDelay = Math.random() * 5 + 's';
container.appendChild(element);
}
}
// Animasi masuk saat halaman dimuat
window.onload = function() {
initFloatingElements();
const card = document.querySelector('.birthday-card');
card.style.opacity = '0';
card.style.transform = 'translateY(30px)';
setTimeout(() => {
card.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
card.style.opacity = '1';
card.style.transform = 'translateY(0)';
}, 100);
// Tambahkan efek confetti saat di-scroll
window.addEventListener('scroll', function() {
if(window.scrollY > 50) {
createConfetti();
}
});
};
// Fungsi untuk membuat confetti
function createConfetti() {
const colors = ['#6C63FF', '#FF6584', '#FFD700', '#4D44DB'];
const container = document.querySelector('.floating-elements');
for(let i = 0; i < 20; i++) {
const confetti = document.createElement('div');
confetti.className = 'floating-element';
confetti.style.width = Math.random() * 15 + 5 + 'px';
confetti.style.height = confetti.style.width;
confetti.style.left = Math.random() * 100 + '%';
confetti.style.top = '-10px';
confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
confetti.style.animation = `float ${Math.random() * 3 + 2}s linear forwards`;
container.appendChild(confetti);
setTimeout(() => {
confetti.remove();
}, 5000);
}
}
// Buat confetti secara periodik
setInterval(createConfetti, 10000);
</script>
</body>
</html>