html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy Mother's Day</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
</head>
<body>
<div class="flower-petals"></div>
<div class="container">
<header>
<h1 class="title">Happy Mother's Day</h1>
<p class="subtitle">To the most amazing mom in the world</p>
</header>
<main>
<div class="card-container">
<div class="card">
<div class="card-front">
<i class="fas fa-heart"></i>
<h2>Click Me!</h2>
</div>
<div class="card-back">
<p><h3>Dear Mom,</h3>
<p>You are the heart of every home,Your love is endless, your strength inspiring, and your kindness unmatched.You are deeply cherished today and always.</p>
css
css
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
:root {
--primary-color: #ff7eb9;
--secondary-color: #ff65a3;
--accent-color: #7afcff;
--text-color: #333;
--light-color: #fff;
--shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
color: var(--text-color);
background: linear-gradient(135deg, #fff5f7 0%, #ffeef2 100%);
overflow-x: hidden;
min-height: 100vh;
position: relative;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
js
js
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
// Show loading alert
alert("Please wait while the page loads completely");
// Wait for DOM to be fully loaded
document.addEventListener('DOMContentLoaded', function() {
// Card flip functionality
const card = document.querySelector('.card');
if (card) {
card.addEventListener('click', function() {
this.classList.toggle('flipped');
});
}
// Create falling petals
createPetals();
// Audio player with reliable controls
setupAudioPlayer();
// Save message with confetti
setupMessageSave();
// Share button functionality
setupShareButton();
});
function createPetals() {
const container = document.querySelector('.flower-petals');
BROWSER
Console
Run