Assalamu Alaikum

Yeh meri pehli website hai.

Click Me

📖 Islamic Books Library

Quran, Hadith aur Islamic Kitaben

Resultado final

Tu puntaje: ${score} / ${quiz.length}

¡Gracias por participar!

• Home
• Shop
• About Us
• Contact

<!-- Home Page -->
<section id="home" class="hero">
    <div>
        <h1>StrideElite: Style Meets Comfort</h1>
        <p>Discover our latest collection of premium shoes – stylish, comfortable, and affordable for every step.</p>
        <button class="btn" onclick="scrollToSection('shop')">Shop Now</button>
    </div>
</section>

<!-- Shop Page -->
<section id="shop" class="container">
    <h2>Shop by Category</h2>
    <div class="grid">
        <div class="product fade-in">
            <img src="https://via.placeholder.com/300x200?text=Men+Shoes" alt="Men's Shoes Collection" loading="lazy">
            <h3>Men Shoes</h3>
            <p>Stylish and durable for everyday wear.</p>
            <button class="btn">Explore</button>
        </div>
        <div class="product fade-in">
            <img src="https://via.placeholder.com/300x200?text=Women+Shoes" alt="Women's Shoes Collection" loading="lazy">
            <h3>Women Shoes</h3>
            <p>Elegant designs for comfort and fashion.</p>
            <button class="btn">Explore</button>
        </div>
        <div class="product fade-in">
            <img src="https://via.placeholder.com/300x200?text=Sports+Shoes" alt="Sports Shoes Collection" loading="lazy">
            <h3>Sports Shoes</h3>
            <p>Performance footwear for athletes.</p>
            <button class="btn">Explore</button>
        </div>
        <div class="product fade-in">
            <img src="https://via.placeholder.com/300x200?text=Casual+Shoes" alt="Casual Shoes Collection" loading="lazy">
            <h3>Casual Shoes</h3>
            <p>Relaxed styles for leisure and comfort.</p>
            <button class="btn">Explore</button>
        </div>
    </div>
    <!-- Customer Reviews -->
    <div class="reviews">
        <h3>What Our Customers Say</h3>
        <div class="review">
            <div class="stars">★★★★★</div>
            <p>"These shoes are incredibly comfortable and stylish. Worth every penny!" - Alex R.</p>
        </div>
        <div class="review">
            <div class="stars">★★★★★</div>
            <p>"Fast delivery and easy returns. Highly recommend!" - Jamie L.</p>
        </div>
    </div>
</section>

<!-- Product Detail Page (Example for One Product) -->
<section id="product-detail" class="container" style="display: none;"> <!-- Toggle visibility with JS -->
    <div class="grid">
        <div>
            <img src="https://via.placeholder.com/500x500?text=Product+Image" alt="StrideElite Runner Shoe" loading="lazy">
        </div>
        <div>
            <h2>StrideElite Runner</h2>
            <p class="accent">$99.99</p>
            <p>High-quality running shoes with breathable materials for ultimate comfort.</p>
            <label for="size">Size:</label>
            <select id="size">
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
            </select>
            <button class="btn">Add to Cart</button>
            <div class="reviews">
                <h3>Reviews</h3>
                <div class="review">
                    <div class="stars">★★★★★</div>
                    <p>"Perfect fit and great for long runs!" - Sam T.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- About Us Page -->
<section id="about" class="container">
    <h2>About StrideElite</h2>
    <p>Founded in 2020, StrideElite is dedicated to crafting premium shoes that blend style, comfort, and affordability. Our brand story is rooted in innovation – using sustainable materials and expert craftsmanship to ensure every pair delivers on our quality promise: shoes that last, feel great, and look even better.</p>
</section>

<!-- Contact Us Page -->
<section id="contact" class="container">
    <h2>Contact Us</h2>
    <form>
        <input type="text" placeholder="Name" required><br>
        <input type="email" placeholder="Email" required><br>
        <textarea placeholder="Message" required></textarea><br>
        <button class="btn" type="submit">Send</button>
    </form>
    <a href="https://wa.me/1234567890" class="btn" style="margin-top: 20px;">Chat on WhatsApp</a>
</section>

<!-- Footer with Trust Badges -->
<footer>
    <div class="trust-badges">
        <div><span>🔒</span> Secure Payment</div>
        <div><span>🚚</span> Fast Delivery</div>
        <div><span>↩️</span> Easy Returns</div>
    </div>
    <p>&copy; 2023 StrideElite. All rights reserved.</p>
</footer>

<script>
    // Smooth scrolling and animations
    function scrollToSection(id) {
        document.getElementById(id).scrollIntoView({ behavior: 'smooth' });
    }
    // Fade-in on scroll
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
            }
        });
    });
    document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
    // Toggle product detail (for demo)
    document.querySelectorAll('.product .btn').forEach(btn => {
        btn.addEventListener('click', () => {
            document.getElementById('product-detail').style.display = 'block';
            scrollToSection('product-detail');
        });
    });
</script>

#https://gist.github.com/isdaviddong/23cc140c1780828b44f79397f737b95e?permalink_comment_id=5964190#gistcomment-5964190

Weather Dashboard (React + Vite)

A small weather dashboard that fetches current weather and a short forecast from OpenWeatherMap.

Features

• Search weather by city name
• Shows current temperature, conditions, humidity, wind, and icon
• 5-period forecast (from OpenWeatherMap 3-hour forecast data simplified)
• Units toggle (Celsius / Fahrenheit)
• Basic error handling and loading states
• Clear, minimal UI suitable for extension

Prerequisites

• Node.js 16+ and npm or yarn
• An OpenWeatherMap API key (free tier available): https://openweathermap.org/api

Quick start

1. Clone or copy the project files into a folder.
2. Install dependencies:
   • npm: npm install
   • yarn: yarn
3. Create a .env file in project root using .env.example as a template and set VITE_OWM_API_KEY.
4. Run the dev server:
   • npm: npm run dev
   • yarn: yarn dev
5. Open http://localhost:5173

Securing your API key

• This example uses the API key in the client (Vite env var). For production, consider a server-side proxy to keep the API key secret or use serverless functions.

Extending

• Add location permission (navigator.geolocation) to get user's weather
• Add charts (Chart.js) for hourly temperature
• Cache API responses with localStorage to reduce requests
• Use OpenWeatherMap One Call (paid tiers) for more detailed forecasts

API details used

• Current weather: https://api.openweathermap.org/data/2.5/weather?q={city}&appid={API_KEY}&units={units}
• Forecast: https://api.openweathermap.org/data/2.5/forecast?q={city}&appid={API_KEY}&units={units}

If you want, I can:

• Provide a serverless proxy example (Netlify/AWS/GCP)
• Add unit tests and CI workflow
• Create a more polished UI with Tailwind or a design system

Tell me what extra features or stack preferences you'd like and I’ll update the project.

/* Utility */
.hidden { display: none; }
button {
padding: 12px 25px;
font-size: 18px;
border: none;
border-radius: 8px;
cursor: pointer;
background: gold;
font-weight: bold;
}
button:hover { background: orange; }

/* Brankas */
#vault {
margin-top: 100px;
}
.vault-box {
width: 260px;
height: 260px;
margin: auto;
border-radius: 50%;
background: #444;
border: 10px solid silver;
position: relative;
}
.vault-box::after {
content: "⚖️";
font-size: 70px;
position: absolute;
top: 80px;
left: 95px;
}
input {
margin-top: 20px;
padding: 10px;
font-size: 18px;
text-align: center;
width: 120px;
}

/* Gift */
#gift {
font-size: 120px;
cursor: pointer;
animation: bounce 1s infinite;
}

/* Cake */
#cake {
font-size: 140px;
}
#blow {
margin-top: 15px;
text-decoration: underline;
cursor: pointer;
font-size: 20px;
color: gold;
}

/* Party */
.party {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.confetti {
position: absolute;
width: 10px;
height: 10px;
background: gold;
animation: fall 3s linear infinite;
}

/* Animations */
@Keyframes bounce {
0%,100%{ transform: translateY(0); }
50%{ transform: translateY(-20px); }
}
@Keyframes fall {
from { transform: translateY(-10px) rotate(0deg); }
to { transform: translateY(100vh) rotate(360deg); }
}

/* Message */
#message {
max-width: 800px;
margin: 60px auto;
background: rgba(0,0,0,0.6);
padding: 30px;
border-radius: 15px;
}
</style>

h1 {
  color: #4a4aff;
}

.card {
  background: white;
  padding: 20px;
  margin: 20px auto;
  max-width: 400px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

button {
  background: #4a4aff;
  color: white;
  border: none;
  padding: 10px 15px;
  margin-top: 10px;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background: #3737cc;
}

.task {
  margin: 10px 0;
}

🦸‍♂️ TaskHero

Cumpra tarefas e ganhe recompensas!

<div class="task">
  Arrumar o quarto — ⭐ 10 pontos
  <br>
  <button onclick="concluirTarefa(10)">Concluir</button>
</div>

<div class="task">
  Fazer lição de casa — ⭐ 20 pontos
  <br>
  <button onclick="concluirTarefa(20)">Concluir</button>
</div>

<h3>Pontos: <span id="pontos">0</span></h3>

.card {
background: white;
padding: 40px;
border-radius: 20px;
text-align: center;
box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

h1 {
color: #e6005c;
}

h2 {
margin-top: 20px;
}

.buttons {
margin-top: 30px;
}

button {
padding: 12px 25px;
font-size: 18px;
border: none;
border-radius: 10px;
cursor: pointer;
margin: 10px;
}

.yes {
background: #e6005c;
color: white;
}

.no {
background: #ccc;
position: relative;
}

#result {
margin-top: 30px;
font-size: 22px;
color: #e6005c;
}function yesClicked() {
document.getElementById("result").innerHTML =
"Yayyy! 💕
तुमने मेरा दिल जीत लिया 😍";
}

function moveNo() {
const btn = document.querySelector(".no");
const x = Math.random() * 200 - 100;
const y = Math.random() * 200 - 100;
btn.style.transform = translate(${x}px, ${y}px);
}

• Home
• Shop
• About Us
• Contact
• Cart

Make a website

<!-- Romantic Music -->
<audio autoplay loop>
    <source src="https://www2.cs.uic.edu/~i101/SoundFiles/ILoveYou.mp3" type="audio/mpeg">
</audio>

<style>
    body {
        margin: 0;
        padding: 0;
        font-family: 'Segoe UI', sans-serif;
        background: linear-gradient(135deg, #f8d7da, #e6ccb2);
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        text-align: center;
        overflow: hidden;
    }

    .card {
        background: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(12px);
        padding: 40px;
        border-radius: 25px;
        box-shadow: 0 8px 30px rgba(0,0,0,0.1);
        max-width: 420px;
        transition: 0.5s;
    }

    h1 {
        font-size: 34px;
        color: #b5838d;
    }

    p {
        font-size: 18px;
        color: #6d6875;
        line-height: 1.6;
    }

    button {
        margin-top: 20px;
        padding: 12px 30px;
        font-size: 18px;
        border: none;
        border-radius: 30px;
        background-color: #b5838d;
        color: white;
        cursor: pointer;
        transition: 0.3s;
    }

    button:hover {
        background-color: #6d6875;
    }

    .heart {
        position: absolute;
        font-size: 18px;
        animation: float 6s linear infinite;
        color: #ff8fab;
    }

    @keyframes float {
        0% { transform: translateY(100vh); opacity: 1; }
        100% { transform: translateY(-10vh); opacity: 0; }
    }

    .finalMessage {
        display: none;
    }
</style>

<div class="card" id="mainCard">
    <h1>Happy Valentine’s Day Amaan 🤍</h1>
    <p>
        You walked into my life so softly…  
        and somehow made everything feel warmer 🌸  
        With you, even ordinary days feel magical ✨  
    </p>
    <button onclick="nextPage()">Click Here 💖</button>
</div>

<div class="card finalMessage" id="secondCard">
    <h1>Amaan… 💍</h1>
    <p>
        On our very first Valentine’s Day,  
        I just want to say…  
        I choose you. Today. Tomorrow. Always. 🤍  
        <br><br>
        Will you be my forever Valentine? 💌
        <br><br>
        <small>— From Ayra 🎀</small>
    </p>
</div>

<script>
    function nextPage() {
        document.getElementById("mainCard").style.display = "none";
        document.getElementById("secondCard").style.display = "block";
    }

    function createHeart() {
        const heart = document.createElement("div");
        heart.classList.add("heart");
        heart.innerHTML = "🤍";
        heart.style.left = Math.random() * 100 + "vw";
        heart.style.fontSize = Math.random() * 20 + 10 + "px";
        document.body.appendChild(heart);

        setTimeout(() => {
            heart.remove();
        }, 6000);
    }

    setInterval(createHeart, 400);
</script>

Hello

Znznhgsvsbbbbs

How are you