How to Create a Magical Eid Wishes Website – Step-by-Step Guide

March 21, 2025 April 13, 2025

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

PK DIGITS