.png)
.png)
Eid is a festival of joy, love, and blessings. What if you could spread this joy by creating a Magical Eid Wishes Website? A website where visitors can get Eid Mubarak wishes with a magical touch! Follow this guide to create an interactive Eid wishes website using HTML, CSS, and JavaScript—without any backend coding.
🎯 Features of the Magical Eid Wishes Website
- Beautiful Eid-themed design
- Random Eid Mubarak messages on button click
- Animated text effects for a magical feel
- Mobile-friendly and easy to share
- No backend required—just HTML, CSS, and JavaScript
🛠️ Step 1: Set Up the Project
Create three files in the same folder:
- index.html (for webpage structure)
- styles.css (for design and animations)
- script.js (for dynamic functionality)
📜 Step 2: Create the HTML Structure
Create a file named index.html and add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Magical Eid Wishes</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1 class="magic-text">✨ Eid Mubarak! ✨</h1>
<p id="wish">Click the button to receive a magical Eid wish!</p>
<button onclick="generateWish()">Get Eid Wish</button>
</div>
<script src="script.js"></script>
</body>
</html>
🎨 Step 3: Add Styling with CSS
Create a file named styles.css and add the following styles:
body {
font-family: Arial, sans-serif;
background: url('https://source.unsplash.com/1600x900/?eid,mosque') no-repeat center center/cover;
text-align: center;
color: white;
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
background: rgba(0, 0, 0, 0.7);
padding: 20px;
border-radius: 10px;
}
.magic-text {
font-size: 2.5em;
font-weight: bold;
color: #FFD700;
animation: glow 1.5s infinite alternate;
}
@keyframes glow {
from { text-shadow: 0 0 10px #FFD700; }
to { text-shadow: 0 0 20px #FFA500; }
}
button {
background-color: #FFD700;
border: none;
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
border-radius: 5px;
transition: 0.3s;
}
button:hover {
background-color: #FFA500;
}
#wish {
font-size: 1.5em;
margin-top: 20px;
}
📝 Step 4: Add JavaScript for Functionality
Create a file named script.js and add the following code:
const wishes = [
"May Allah bless you with endless happiness! 🌙✨",
"Eid Mubarak! May your life be filled with joy and prosperity. 🕌💖",
"Wishing you a magical Eid full of love and peace! 🌟🌙",
"May this Eid bring smiles, peace, and success to your life. 🌸🕊️",
"Eid Mubarak! Enjoy the blessings of Allah and cherish every moment. 🤲💫"
];
function generateWish() {
let randomWish = wishes[Math.floor(Math.random() * wishes.length)];
document.getElementById("wish").innerText = randomWish;
}
🎉 Conclusion
Creating a Magical Eid Wishes Website is an easy and fun project. Use this guide to spread joy and blessings this Eid! 🎊✨
🔖 Hashtags for Social Media Promotion
#EidMubarak #EidWishes #EidWebsite #MagicalEid #HTML #CSS #JavaScript #WebDevelopment #EidMubarak2025 #HappyEid #EidUlFitr #IslamicFestivals #CodingForBeginners #WebDesign
