Skip to content

馃 Cannot save fiddle聽#2468

Open
Open
馃 Cannot save fiddle#2468

Description

@zydbasheer123-blip
zydbasheer123-blip
opened on Aug 11, 2026

Error code

ERRW:SS1.0

Were you logged in?

Yes

Your username (if logged in)

No response

Your HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meelad Fest 2026</title>
    <style>
        /* CSS Styles */
        :root {
            --primary-green: #0a4d2e;
            --gold: #d4af37;
            --light-bg: #f9f9f9;
            --text-dark: #333;
            --white: #ffffff;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: var(--light-bg);
            color: var(--text-dark);
            line-height: 1.6;
        }

        /* Header / Hero Section */
        header {
            background-color: var(--primary-green);
            color: var(--gold);
            text-align: center;
            padding: 4rem 1rem;
            border-bottom: 5px solid var(--gold);
        }

        header h1 {
            font-size: 3.5rem;
            margin-bottom: 0.5rem;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        header p {
            color: var(--white);
            font-size: 1.2rem;
            max-width: 600px;
            margin: 0 auto 1.5rem auto;
        }

        .btn {
            display: inline-block;
            background-color: var(--gold);
            color: var(--primary-green);
            padding: 10px 25px;
            text-decoration: none;
            font-weight: bold;
            border-radius: 5px;
            transition: background 0.3s;
        }

        .btn:hover {
            background-color: #ffe066;
        }

        /* Container */
        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 2rem 1rem;
        }

        /* Sections */
        section {
            background: var(--white);
            padding: 2rem;
            margin-bottom: 2rem;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            border-top: 3px solid var(--primary-green);
        }

        h2 {
            color: var(--primary-green);
            margin-bottom: 1rem;
            text-align: center;
            font-size: 2rem;
        }

        /* Schedule List */
        .schedule-list {
            list-style: none;
        }

        .schedule-list li {
            background: var(--light-bg);
            margin-bottom: 1rem;
            padding: 1rem;
            border-left: 4px solid var(--gold);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .time {
            font-weight: bold;
            color: var(--primary-green);
        }

        /* Contact Form */
        form {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            max-width: 500px;
            margin: 0 auto;
        }

        input, textarea {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 1rem;
        }

        button[type="submit"] {
            background-color: var(--primary-green);
            color: var(--gold);
            border: none;
            padding: 12px;
            font-size: 1.1rem;
            font-weight: bold;
            cursor: pointer;
            border-radius: 4px;
        }

        button[type="submit"]:hover {
            background-color: #073820;
        }

        /* Footer */
        footer {
            text-align: center;
            padding: 1.5rem;
            background-color: var(--primary-green);
            color: var(--white);
        }
        
        footer span {
            color: var(--gold);
        }
    </style>
</head>
<body>

    <!-- Hero Section -->
    <header>
        <h1>Meelad Fest 2026</h1>
        <p>Join us in celebrating the blessed birth of the Prophet Muhammad (Peace Be Upon Him) with love, peace, and harmony.</p>
        <a href="#register" class="btn">Register Now</a>
    </header>

    <div class="container">
        
        <!-- About Section -->
        <section id="about">
            <h2>About the Event</h2>
            <p style="text-align: center;">Welcome to our annual Meelad Fest! This gathering is organized to spread the teachings of peace, charity, and good character as demonstrated by the Prophet (PBUH). The event will feature beautiful recitations, inspiring speeches by esteemed scholars, and a community feast.</p>
        </section>

        <!-- Schedule Section -->
        <section id="schedule">
            <h2>Event Schedule</h2>
            <ul class="schedule-list">
                <li>
                    <div>
                        <strong>Opening Ceremony & Quran Recitation</strong>
                        <p>Inauguration by local community leaders.</p>
                    </div>
                    <span class="time">9:00 AM</span>
                </li>
                <li>
                    <div>
                        <strong>Naat & Nasheed Competition</strong>
                        <p>Performances by students and youth groups.</p>
                    </div>
                    <span class="time">10:30 AM</span>
                </li>
                <li>
                    <div>
                        <strong>Keynote Speech</strong>
                        <p>Reflecting on the Prophet's character and teachings.</p>
                    </div>
                    <span class="time">12:00 PM</span>
                </li>
                <li>
                    <div>
                        <strong>Zuhr Prayer & Community Feast (Langar)</strong>
                        <p>Free meals served to all attendees and guests.</p>
                    </div>
                    <span class="time">1:30 PM</span>
                </li>
                <li>
                    <div>
                        <strong>Prize Distribution & Closing Dua</strong>
                        <p>Awards for competition winners and final prayers.</p>
                    </div>
                    <span class="time">3:00 PM</span>
                </li>
            </ul>
        </section>

        <!-- Registration Section -->
        <section id="register">
            <h2>Register as a Participant</h2>
            <p style="text-align: center; margin-bottom: 1rem;">Want to perform a Naat or give a speech? Sign up below!</p>
            <form action="#" method="POST">
                <input type="text" placeholder="Full Name" required>
                <input type="email" placeholder="Email Address" required>
                <input type="tel" placeholder="Phone Number" required>
                <textarea rows="4" placeholder="What would you like to participate in? (e.g., Naat Competition, Volunteering)"></textarea>
                <button type="submit">Submit Registration</button>
            </form>
        </section>

    </div>

    <!-- Footer -->
    <footer>
        <p>&copy; 2026 Meelad Fest Committee. <span>Spread Peace and Love.</span></p>
    </footer>

</body>
</html>

Your JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meelad Fest 2026</title>
    <style>
        /* CSS Styles */
        :root {
            --primary-green: #0a4d2e;
            --gold: #d4af37;
            --light-bg: #f9f9f9;
            --text-dark: #333;
            --white: #ffffff;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: var(--light-bg);
            color: var(--text-dark);
            line-height: 1.6;
        }

        /* Header / Hero Section */
        header {
            background-color: var(--primary-green);
            color: var(--gold);
            text-align: center;
            padding: 4rem 1rem;
            border-bottom: 5px solid var(--gold);
        }

        header h1 {
            font-size: 3.5rem;
            margin-bottom: 0.5rem;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        header p {
            color: var(--white);
            font-size: 1.2rem;
            max-width: 600px;
            margin: 0 auto 1.5rem auto;
        }

        .btn {
            display: inline-block;
            background-color: var(--gold);
            color: var(--primary-green);
            padding: 10px 25px;
            text-decoration: none;
            font-weight: bold;
            border-radius: 5px;
            transition: background 0.3s;
        }

        .btn:hover {
            background-color: #ffe066;
        }

        /* Container */
        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 2rem 1rem;
        }

        /* Sections */
        section {
            background: var(--white);
            padding: 2rem;
            margin-bottom: 2rem;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            border-top: 3px solid var(--primary-green);
        }

        h2 {
            color: var(--primary-green);
            margin-bottom: 1rem;
            text-align: center;
            font-size: 2rem;
        }

        /* Schedule List */
        .schedule-list {
            list-style: none;
        }

        .schedule-list li {
            background: var(--light-bg);
            margin-bottom: 1rem;
            padding: 1rem;
            border-left: 4px solid var(--gold);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .time {
            font-weight: bold;
            color: var(--primary-green);
        }

        /* Contact Form */
        form {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            max-width: 500px;
            margin: 0 auto;
        }

        input, textarea {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 1rem;
        }

        button[type="submit"] {
            background-color: var(--primary-green);
            color: var(--gold);
            border: none;
            padding: 12px;
            font-size: 1.1rem;
            font-weight: bold;
            cursor: pointer;
            border-radius: 4px;
        }

        button[type="submit"]:hover {
            background-color: #073820;
        }

        /* Footer */
        footer {
            text-align: center;
            padding: 1.5rem;
            background-color: var(--primary-green);
            color: var(--white);
        }
        
        footer span {
            color: var(--gold);
        }
    </style>
</head>
<body>

    <!-- Hero Section -->
    <header>
        <h1>Meelad Fest 2026</h1>
        <p>Join us in celebrating the blessed birth of the Prophet Muhammad (Peace Be Upon Him) with love, peace, and harmony.</p>
        <a href="#register" class="btn">Register Now</a>
    </header>

    <div class="container">
        
        <!-- About Section -->
        <section id="about">
            <h2>About the Event</h2>
            <p style="text-align: center;">Welcome to our annual Meelad Fest! This gathering is organized to spread the teachings of peace, charity, and good character as demonstrated by the Prophet (PBUH). The event will feature beautiful recitations, inspiring speeches by esteemed scholars, and a community feast.</p>
        </section>

        <!-- Schedule Section -->
        <section id="schedule">
            <h2>Event Schedule</h2>
            <ul class="schedule-list">
                <li>
                    <div>
                        <strong>Opening Ceremony & Quran Recitation</strong>
                        <p>Inauguration by local community leaders.</p>
                    </div>
                    <span class="time">9:00 AM</span>
                </li>
                <li>
                    <div>
                        <strong>Naat & Nasheed Competition</strong>
                        <p>Performances by students and youth groups.</p>
                    </div>
                    <span class="time">10:30 AM</span>
                </li>
                <li>
                    <div>
                        <strong>Keynote Speech</strong>
                        <p>Reflecting on the Prophet's character and teachings.</p>
                    </div>
                    <span class="time">12:00 PM</span>
                </li>
                <li>
                    <div>
                        <strong>Zuhr Prayer & Community Feast (Langar)</strong>
                        <p>Free meals served to all attendees and guests.</p>
                    </div>
                    <span class="time">1:30 PM</span>
                </li>
                <li>
                    <div>
                        <strong>Prize Distribution & Closing Dua</strong>
                        <p>Awards for competition winners and final prayers.</p>
                    </div>
                    <span class="time">3:00 PM</span>
                </li>
            </ul>
        </section>

        <!-- Registration Section -->
        <section id="register">
            <h2>Register as a Participant</h2>
            <p style="text-align: center; margin-bottom: 1rem;">Want to perform a Naat or give a speech? Sign up below!</p>
            <form action="#" method="POST">
                <input type="text" placeholder="Full Name" required>
                <input type="email" placeholder="Email Address" required>
                <input type="tel" placeholder="Phone Number" required>
                <textarea rows="4" placeholder="What would you like to participate in? (e.g., Naat Competition, Volunteering)"></textarea>
                <button type="submit">Submit Registration</button>
            </form>
        </section>

    </div>

    <!-- Footer -->
    <footer>
        <p>&copy; 2026 Meelad Fest Committee. <span>Spread Peace and Love.</span></p>
    </footer>

</body>
</html>

Your CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meelad Fest 2026</title>
    <style>
        /* CSS Styles */
        :root {
            --primary-green: #0a4d2e;
            --gold: #d4af37;
            --light-bg: #f9f9f9;
            --text-dark: #333;
            --white: #ffffff;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: var(--light-bg);
            color: var(--text-dark);
            line-height: 1.6;
        }

        /* Header / Hero Section */
        header {
            background-color: var(--primary-green);
            color: var(--gold);
            text-align: center;
            padding: 4rem 1rem;
            border-bottom: 5px solid var(--gold);
        }

        header h1 {
            font-size: 3.5rem;
            margin-bottom: 0.5rem;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        header p {
            color: var(--white);
            font-size: 1.2rem;
            max-width: 600px;
            margin: 0 auto 1.5rem auto;
        }

        .btn {
            display: inline-block;
            background-color: var(--gold);
            color: var(--primary-green);
            padding: 10px 25px;
            text-decoration: none;
            font-weight: bold;
            border-radius: 5px;
            transition: background 0.3s;
        }

        .btn:hover {
            background-color: #ffe066;
        }

        /* Container */
        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 2rem 1rem;
        }

        /* Sections */
        section {
            background: var(--white);
            padding: 2rem;
            margin-bottom: 2rem;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            border-top: 3px solid var(--primary-green);
        }

        h2 {
            color: var(--primary-green);
            margin-bottom: 1rem;
            text-align: center;
            font-size: 2rem;
        }

        /* Schedule List */
        .schedule-list {
            list-style: none;
        }

        .schedule-list li {
            background: var(--light-bg);
            margin-bottom: 1rem;
            padding: 1rem;
            border-left: 4px solid var(--gold);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .time {
            font-weight: bold;
            color: var(--primary-green);
        }

        /* Contact Form */
        form {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            max-width: 500px;
            margin: 0 auto;
        }

        input, textarea {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 1rem;
        }

        button[type="submit"] {
            background-color: var(--primary-green);
            color: var(--gold);
            border: none;
            padding: 12px;
            font-size: 1.1rem;
            font-weight: bold;
            cursor: pointer;
            border-radius: 4px;
        }

        button[type="submit"]:hover {
            background-color: #073820;
        }

        /* Footer */
        footer {
            text-align: center;
            padding: 1.5rem;
            background-color: var(--primary-green);
            color: var(--white);
        }
        
        footer span {
            color: var(--gold);
        }
    </style>
</head>
<body>

    <!-- Hero Section -->
    <header>
        <h1>Meelad Fest 2026</h1>
        <p>Join us in celebrating the blessed birth of the Prophet Muhammad (Peace Be Upon Him) with love, peace, and harmony.</p>
        <a href="#register" class="btn">Register Now</a>
    </header>

    <div class="container">
        
        <!-- About Section -->
        <section id="about">
            <h2>About the Event</h2>
            <p style="text-align: center;">Welcome to our annual Meelad Fest! This gathering is organized to spread the teachings of peace, charity, and good character as demonstrated by the Prophet (PBUH). The event will feature beautiful recitations, inspiring speeches by esteemed scholars, and a community feast.</p>
        </section>

        <!-- Schedule Section -->
        <section id="schedule">
            <h2>Event Schedule</h2>
            <ul class="schedule-list">
                <li>
                    <div>
                        <strong>Opening Ceremony & Quran Recitation</strong>
                        <p>Inauguration by local community leaders.</p>
                    </div>
                    <span class="time">9:00 AM</span>
                </li>
                <li>
                    <div>
                        <strong>Naat & Nasheed Competition</strong>
                        <p>Performances by students and youth groups.</p>
                    </div>
                    <span class="time">10:30 AM</span>
                </li>
                <li>
                    <div>
                        <strong>Keynote Speech</strong>
                        <p>Reflecting on the Prophet's character and teachings.</p>
                    </div>
                    <span class="time">12:00 PM</span>
                </li>
                <li>
                    <div>
                        <strong>Zuhr Prayer & Community Feast (Langar)</strong>
                        <p>Free meals served to all attendees and guests.</p>
                    </div>
                    <span class="time">1:30 PM</span>
                </li>
                <li>
                    <div>
                        <strong>Prize Distribution & Closing Dua</strong>
                        <p>Awards for competition winners and final prayers.</p>
                    </div>
                    <span class="time">3:00 PM</span>
                </li>
            </ul>
        </section>

        <!-- Registration Section -->
        <section id="register">
            <h2>Register as a Participant</h2>
            <p style="text-align: center; margin-bottom: 1rem;">Want to perform a Naat or give a speech? Sign up below!</p>
            <form action="#" method="POST">
                <input type="text" placeholder="Full Name" required>
                <input type="email" placeholder="Email Address" required>
                <input type="tel" placeholder="Phone Number" required>
                <textarea rows="4" placeholder="What would you like to participate in? (e.g., Naat Competition, Volunteering)"></textarea>
                <button type="submit">Submit Registration</button>
            </form>
        </section>

    </div>

    <!-- Footer -->
    <footer>
        <p>&copy; 2026 Meelad Fest Committee. <span>Spread Peace and Love.</span></p>
    </footer>

</body>
</html>

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions