Skip to content

Instantly share code, notes, and snippets.

@isdaviddong

isdaviddong/index.html

Last active January 28, 2026 01:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save isdaviddong/23cc140c1780828b44f79397f737b95e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save isdaviddong/23cc140c1780828b44f79397f737b95e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-1.9.1.min.js"></script>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/isRockFx.js"></script>
<script>
$(function () {
$('#ButtonCal').click(
function () {
//取得用戶輸入的參數
var para = { 'height': $('#txbHeight').val(), 'weight': $('#txbWeight').val() };
//呼叫API
ExecuteAPI('Example', 'BMI', para,
//呼叫WebAPI成功時運行的Call Back Function
function (result) {
alert(result.Data);
}
);
}
);
});
</script>
</head>
<body>
<div class="row" style="margin:10px">
<div class="col-md-12">
<div class="form-group">
身高:
<input id="txbHeight" class="form-control" placeholder="請輸入身高" />
體重:
<input id="txbWeight" class="form-control" placeholder="請輸入體重" />
<br />
<button class="btn btn-primary" id="ButtonCal">計算</button>
</div>
</div>
</div>
</body>
</html>
@shonazarovjoni84-design
Copy link

shonazarovjoni84-design commented Dec 19, 2025

Uploading Screenshot_2025-12-19-11-58-09-101_com.android.chrome.jpg…

@aashishparjapat8442-rgb
Copy link

aashishparjapat8442-rgb commented Dec 19, 2025

Uploading Screenshot_20251219_075022_Google.jpg…

@alzbiermhmod118-ai
Copy link

alzbiermhmod118-ai commented Dec 19, 2025

<title>موقع شركتي البرمجي</title> <style> /* تنسيقات CSS لتجميل الموقع */ body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; background-color: #f4f7f6; color: #333; } 
    header {
        background-color: #2c3e50;
        color: white;
        padding: 20px;
        text-align: center;
    }

    .container {
        width: 80%;
        margin: auto;
        overflow: hidden;
        padding: 20px;
    }

    .hero {
        background: #fff;
        padding: 40px;
        text-align: center;
        border-bottom: 3px solid #3498db;
        margin-bottom: 20px;
    }

    .services {
        display: flex;
        justify-content: space-around;
        gap: 20px;
        margin-top: 20px;
    }

    .service-box {
        background: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        flex: 1;
        text-align: center;
    }

    button {
        background-color: #3498db;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
    }

    button:hover {
        background-color: #2980b9;
    }

    footer {
        text-align: center;
        padding: 20px;
        background: #2c3e50;
        color: white;
        position: fixed;
        bottom: 0;
        width: 100%;
    }
</style>

<header>
    <h1>مرحباً بكم في شركتنا</h1>
</header>

<div class="container">
    <section class="hero">
        <h2>نحن نصنع المستقبل الرقمي</h2>
        <p>نقدم أفضل الحلول البرمجية والتقنية لتطوير أعمالكم وزيادة إنتاجيتكم.</p>
        <button onclick="alert('شكراً لاهتمامك! سنتواصل معك قريباً.')">اطلب استشارة الآن</button>
    </section>

    <h3 style="text-align: center;">خدماتنا</h3>
    <div [class="services">](url)
        <div class="service-box">
            <h4>تطوير المواقع</h4>
            <p>بناء مواقع سريعة ومتوافقة مع جميع الأجهزة.</p>
        </div>
        <div class="service-box">
            <h4>تطبيقات الجوال</h4>
            <p>تصميم وتطوير تطبيقات أندرويد و آيفون.</p>
        </div>
        <div class="service-box">
            <h4>الاستشارات التقنية</h4>
            <p>نساعدك في اختيار التكنولوجيا المناسبة لمشروعك.</p>
        </div>
    </div>
</div>

<footer>
    <p>جميع الحقوق محفوظة &copy; 2024</p>
</footer>

@kqasho12-crypto
Copy link

kqasho12-crypto commented Dec 20, 2025

<title>موقعي الشخصي</title> <style> body { font-family: Arial; direction: rtl; margin: 0; background-color: #f4f4f4; } 
    nav {
        background-color: #333;
        padding: 10px;
    }

    nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
    }

    nav ul li {
        margin: 0 15px;
    }

    nav ul li a {
        color: white;
        text-decoration: none;
        font-size: 18px;
    }

    section {
        padding: 20px;
        margin: 20px;
        background-color: white;
        border-radius: 8px;
    }

    img {
        width: 200px;
        border-radius: 10px;
        margin: 10px;
    }

    form input, form textarea {
        width: 100%;
        padding: 10px;
        margin: 5px 0;
    }

    form button {
        background-color: #333;
        color: white;
        padding: 10px;
        border: none;
        cursor: pointer;
    }
</style>

مرحباً بكم في موقعي الشخصي

هذا الموقع يتحدث عن شخصية مؤثرة أعجبتني.

نبذة عن الشخصية

هذه الشخصية تُعد من الشخصيات المؤثرة بسبب إنجازاتها وأعمالها التي ساهمت في تطوير المجتمع وإلهام الآخرين.

الأعمال والإنجازات

  • الإنجاز الأول
  • الإنجاز الثاني
  • الإنجاز الثالث

معرض الصور

صورة 1 صورة 2

تواصل معنا

الاسم: 
    <label>البريد الإلكتروني:</label>
    <input type="email" placeholder="اكتب بريدك الإلكتروني">

    <label>الرسالة:</label>
    <textarea rows="5" placeholder="اكتب رسالتك"></textarea>

    <button type="submit">إرسال</button>
</form>

@naabavoyant-afk
Copy link

naabavoyant-afk commented Dec 20, 2025

<script src="https://gist.github.com/isdaviddong/23cc140c1780828b44f79397f737b95e.js"></script>

@naabavoyant-afk
Copy link

naabavoyant-afk commented Dec 20, 2025

<script src="https://gist.github.com/isdaviddong/23cc140c1780828b44f79397f737b95e.js"></script>

@Edvin2804
Copy link

Edvin2804 commented Dec 24, 2025

IMG_5896 IMG_5897 IMG_5898 IMG_5899 IMG_5900 IMG_5901 IMG_5902 IMG_5903 IMG_5904 IMG_5905 IMG_5906 IMG_5907 IMG_5908 IMG_5910 IMG_5909 IMG_5911 IMG_5912 IMG_5913 IMG_5914 IMG_5915 IMG_5916 IMG_5917 IMG_5918 IMG_5919 IMG_5920 IMG_5921 IMG_5922 IMG_5923 IMG_5924 IMG_5925 IMG_5926 IMG_5927 IMG_5928 IMG_5929 IMG_5930 IMG_5931 IMG_5932 IMG_5933 IMG_5934 IMG_5935 IMG_5936 IMG_5937 IMG_5938 IMG_5939 IMG_5940 IMG_5941 IMG_5942 IMG_5943 IMG_5944 IMG_5945 IMG_5946 IMG_5947 IMG_5948 IMG_5949 IMG_5950 IMG_5951 IMG_5952 IMG_5957 IMG_5953 IMG_5954 IMG_5955 IMG_5958 IMG_5956 IMG_5959 IMG_5960 IMG_5961 ![IMG_5962](https://gist.github.com/user-attachments/assets/a15d64fc-8190-4672-8366-43f4ea940d20)

@yi2680435-cmyk
Copy link

yi2680435-cmyk commented Dec 24, 2025

gym-website/
│── index.html
│── style.css
│── script.js

@hamza05labsir-cyber
Copy link

hamza05labsir-cyber commented Dec 27, 2025

<title>Royal Touch Agency</title> <style> body { margin: 0; font-family: Arial, sans-serif; background: #0f0f0f; color: #ffffff; line-height: 1.6; } header { background: linear-gradient(135deg, #1c1c1c, #2d1b00); text-align: center; padding: 80px 20px; } header h1 { font-size: 3rem; margin-bottom: 10px; } header p { max-width: 700px; margin: auto; font-size: 1.1rem; color: #ddd; } .btn { display: inline-block; margin: 15px 10px; padding: 12px 25px; background: gold; color: black; text-decoration: none; border-radius: 30px; font-weight: bold; } section { padding: 60px 20px; max-width: 1100px; margin: auto; } h2 { text-align: center; margin-bottom: 40px; color: gold; } .services { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; } .card { background: #1a1a1a; padding: 25px; border-radius: 15px; } footer { background: #000; text-align: center; padding: 30px; font-size: 0.9rem; color: #aaa; } </style>

Grow Your Business With a Royal Touch 👑

We are a digital marketing agency specialized in paid advertising and content management, helping restaurants, fashion brands, and startups grow and achieve real results.

Book a Free Strategy Call Contact Us on WhatsApp

Who We Are

At Royal Touch Agency, we believe every brand deserves to stand out. Our mission is to help businesses grow through smart advertising strategies and premium content.

Our Services

🔥 Paid Advertising

  • Facebook & Instagram Ads
  • TikTok Ads
  • Lead Generation Campaigns

Goal: Increase sales, attract new customers, and maximize ROI.

    <div class="card">
        <h3>🎨 Content Management</h3>
        <ul>
            <li>Custom content strategy</li>
            <li>Professional posts & reels</li>
            <li>Monthly content calendar</li>
            <li>Account management & engagement</li>
        </ul>
        <p><strong>Goal:</strong> Build a strong brand presence and loyal audience.</p>
    </div>
</div>

About Us

Royal Touch Agency is a digital marketing agency focused on growing brands through social media. We work with restaurants, fashion brands, and startups to help them scale using a powerful combination of paid ads and high-quality content.

Vision: To become a trusted marketing partner for brands aiming for growth and excellence.
Mission: Turning brands into royal success stories.

Contact Us

Ready to grow your business?
📲 Contact us via WhatsApp
📧 Reach us by email
🌍 We work remotely – serving clients worldwide

Your Brand, Our Royal Touch ⭐

© 2025 Royal Touch Agency

@polamaher234-ux
Copy link

polamaher234-ux commented Dec 28, 2025 via email

@abdupattoevabrorbek4-ops
Copy link

abdupattoevabrorbek4-ops commented Dec 31, 2025

zor chiqibdi

@abdupattoevabrorbek4-ops
Copy link

abdupattoevabrorbek4-ops commented Dec 31, 2025

ha to'g'ri zo'r

@attitudepower96-dot
Copy link

attitudepower96-dot commented Jan 13, 2026

<script src="https://gist.github.com/isdaviddong/23cc140c1780828b44f79397f737b95e.js"></script>

@sytarmwra-arch
Copy link

sytarmwra-arch commented Jan 23, 2026

لقد عملت بجد وكانت نتيجه رائعه ولكن انا هذا التطبيق انا لا اريد تطبيق انا انا اريد سيت ويب يكون على المتصفح جوجل يكون اسمه 7m7 ويكون فيه الالعاب ويكون خاص بي اضع فيه الالعاب التي اريد لكي افعل لها ترويج من القنوات تبعي والناس يدخلون له ويحمل الالعاب

@sytarmwra-arch
Copy link

sytarmwra-arch commented Jan 23, 2026

### مورأ سيتار

@quan23102310-wq
Copy link

quan23102310-wq commented Jan 23, 2026 via email

@suptrend85-source
Copy link

suptrend85-source commented Jan 23, 2026

``ebook-landing-page/
├── index.html # Main landing page
├── css/
│ ├── styles.css # Main stylesheet (includes responsive design)
│ └── animations.css # Subtle animations (e.g., fade-ins, hovers)
├── js/
│ ├── script.js # Interactive elements (e.g., countdown timer, form validation)
│ └── checkout.js # Placeholder for payment integration
├── images/ # Place your images here (e.g., ebook-cover.jpg, author-photo.jpg)
│ ├── ebook-cover.jpg
│ ├── author-photo.jpg
│ ├── testimonial1.jpg
│ └── ...
├── pages/ # Additional pages (linked from footer)
│ ├── privacy-policy.html
│ ├── terms.html
│ └── contact.html
└── README.md # Instructions for setup and customization

@suptrend85-source
Copy link

suptrend85-source commented Jan 23, 2026

``

<title>[E-book Title] - Unlock Your Potential Today</title>
[E-book Title] Cover

From Overwhelmed to Unstoppable: Master [Topic] in 30 Days

Discover proven strategies, real-world examples, and actionable steps to [solve problem]. Join [number] readers who've transformed their lives.

Get the E-book Now - $29

Limited-time offer: Ends in 24:00:00

<!-- About the E-book -->
<section id="about" class="section">
    <div class="container">
        <h2>What You'll Learn</h2>
        <p>This e-book solves [problem] by teaching [key skills]. It's for [target audience], delivering [benefits].</p>
        <ul class="benefits-list">
            <li>Step-by-step guides to [outcome 1]</li>
            <li>Real case studies from [industry]</li>
            <li>Tools and templates for immediate application</li>
        </ul>
    </div>
</section>

<!-- What's Inside -->
<section id="contents" class="section">
    <div class="container">
        <h2>What's Inside</h2>
        <div class="toc">
            <h3>Table of Contents</h3>
            <ul>
                <li>Chapter 1: [Highlight 1] - [Brief description]</li>
                <li>Chapter 2: [Highlight 2] - [Brief description]</li>
                <!-- Add more chapters -->
            </ul>
        </div>
    </div>
</section>

<!-- Benefits & Results -->
<section id="benefits" class="section">
    <div class="container">
        <h2>Benefits & Results</h2>
        <div class="transformation">
            <div class="before-after">
                <div class="before">Before: [Problem state]</div>
                <div class="after">After: [Transformed state]</div>
            </div>
            <ul class="outcomes">
                <li>Increase [metric] by 50%</li>
                <li>Save [time/money] weekly</li>
                <li>Gain confidence in [skill]</li>
            </ul>
        </div>
    </div>
</section>

<!-- Author Section -->
<section id="author" class="section">
    <div class="container">
        <h2>About the Author</h2>
        <img src="images/author-photo.jpg" alt="Author Name" class="author-photo">
        <p>[Author Name] is a [expertise] with [years] of experience. [Credibility: e.g., Featured in Forbes, helped 10k+ clients].</p>
    </div>
</section>

<!-- Testimonials -->
<section id="testimonials" class="section">
    <div class="container">
        <h2>What Readers Say</h2>
        <div class="testimonial-grid">
            <div class="testimonial">
                <img src="images/testimonial1.jpg" alt="Reader 1">
                <p>"This book changed my life! [Quote]."</p>
                <cite>- [Name], [Title]</cite>
            </div>
            <!-- Add more testimonials -->
        </div>
    </div>
</section>

<!-- Pricing & Offer -->
<section id="pricing" class="section">
    <div class="container">
        <h2>Get Instant Access</h2>
        <div class="pricing-card">
            <h3>$29</h3>
            <p>One-time payment, instant PDF download.</p>
            <ul class="bonuses">
                <li>Bonus: [Bonus 1]</li>
                <li>Bonus: [Bonus 2]</li>
            </ul>
            <p class="guarantee">30-day money-back guarantee.</p>
            <a href="#checkout" class="btn-primary">Buy Now</a>
        </div>
    </div>
</section>

<!-- Checkout Section -->
<section id="checkout" class="section">
    <div class="container">
        <h2>Secure Checkout</h2>
        <form id="checkout-form" class="checkout-form">
            <input type="email" placeholder="Email" required>
            <input type="text" placeholder="Name" required>
            <button type="submit" class="btn-primary">Complete Purchase</button>
        </form>
        <p>Instant delivery via email. Secure payment powered by [Stripe/PayPal].</p>
    </div>
</section>

<!-- FAQ -->
<section id="faq" class="section">
    <div class="container">
        <h2>Frequently Asked Questions</h2>
        <details>
            <summary>Format?</summary>
            <p>PDF, accessible on any device.</p>
        </details>
        <details>
            <summary>Refund Policy?</summary>
            <p>30-day guarantee if unsatisfied.</p>
        </details>
        <!-- Add more -->
    </div>
</section>

<!-- Footer -->
<footer class="footer">
    <div class="container">
        <p>&copy; 2023 [Your Name]. All rights reserved.</p>
        <ul>
            <li><a href="pages/privacy-policy.html">Privacy Policy</a></li>
            <li><a href="pages/terms.html">Terms</a></li>
            <li><a href="pages/contact.html">Contact</a></li>
        </ul>
    </div>
</footer>

<script src="js/script.js"></script>
<script src="js/checkout.js"></script>

@suptrend85-source
Copy link

suptrend85-source commented Jan 23, 2026

/* Modern, clean styles with high contrast CTAs */
body {
font-family: 'Inter', sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
color: #333;
background: #f9f9f9;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

.hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 100px 0;
text-align: center;
}

.hero-content h1 {
font-size: 2.5rem;
margin-bottom: 20px;
}

.btn-primary {
background: #ff6b35;
color: white;
padding: 15px 30px;
text-decoration: none;
border-radius: 5px;
font-weight: 700;
display: inline-block;
transition: background 0.3s;
}

.btn-primary:hover {
background: #e55a2b;
}

.section {
padding: 80px 0;
text-align: center;
}

.benefits-list, .outcomes {
list-style: none;
padding: 0;
}

.benefits-list li, .outcomes li {
margin: 10px 0;
}

.pricing-card {
border: 1px solid #ddd;
padding: 40px;
border-radius: 10px;
background: white;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.footer {
background: #333;
color: white;
padding: 20px 0;
text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
.hero-content h1 {
font-size: 2rem;
}
.btn-primary {
padding: 12px 25px;
}
}

@suptrend85-source
Copy link

suptrend85-source commented Jan 23, 2026

/* Subtle animations */
.fade-in {
animation: fadeIn 1s ease-in;
}

@Keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

.btn-primary:hover {
transform: scale(1.05);
}

@suptrend85-source
Copy link

suptrend85-source commented Jan 23, 2026

// Countdown timer for urgency
function startCountdown() {
const countdownElement = document.getElementById('countdown');
let time = 24 * 60 * 60; // 24 hours in seconds
setInterval(() => {
const hours = Math.floor(time / 3600);
const minutes = Math.floor((time % 3600) / 60);
const seconds = time % 60;
countdownElement.textContent = ${hours}:${minutes}:${seconds};
time--;
if (time < 0) time = 24 * 60 * 60; // Reset
}, 1000);
}

document.addEventListener('DOMContentLoaded', startCountdown);

// Add fade-in to sections on scroll
const sections = document.querySelectorAll('.section');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('fade-in');
}
});
});
sections.forEach(section => observer.observe(section));

@suptrend85-source
Copy link

suptrend85-source commented Jan 23, 2026

``// Placeholder for payment integration (e.g., Stripe)
document.getElementById('checkout-form').addEventListener('submit', (e) => {
e.preventDefault();
// Integrate with Stripe/PayPal here
alert('Payment processed! E-book sent to your email.');
// Redirect or show success message
});

@suptrend85-source
Copy link

suptrend85-source commented Jan 23, 2026

<title>Privacy Policy</title>

Privacy Policy

[Your privacy policy text here.]

Back to Home

@mohammadhaiderzaya-art
Copy link

mohammadhaiderzaya-art commented Jan 24, 2026

<title>Meri Pehli Website</title>

Assalamu Alaikum

Yeh meri pehli website hai.

Click Me

@mohammadhaiderzaya-art
Copy link

mohammadhaiderzaya-art commented Jan 24, 2026

<title>Meri Pehli Website</title>

Assalamu Alaikum

Yeh meri pehli website hai.

Click Me

@mohammadhaiderzaya-art
Copy link

mohammadhaiderzaya-art commented Jan 24, 2026

<title>Meri Pehli Website</title>

Assalamu Alaikum

Yeh meri pehli website hai.

Click Me

@mohammadhaiderzaya-art
Copy link

mohammadhaiderzaya-art commented Jan 24, 2026

<title>Islamic Books</title> <style> body { font-family: Arial; background-color: #f2f2f2; text-align: center; } .book { background: white; margin: 15px; padding: 15px; border-radius: 8px; } h1 { color: green; } </style>

📖 Islamic Books Library

Quran, Hadith aur Islamic Kitaben

Quran Sharif

Allah ka paigham

Hadith

Rasool ﷺ ki baatein

Nahjul Balagha

Imam Ali (A.S) ke khutbe

@quan23102310-wq
Copy link

quan23102310-wq commented Jan 24, 2026 via email

@claurecallisayamariajulisa-sys
Copy link

claurecallisayamariajulisa-sys commented Jan 26, 2026

<title>Quiz Médico: Trabajo de Parto y Aborto</title> <style> body { font-family: Arial, sans-serif; background: #f2f6f8; padding: 20px; } .quiz-container { background: white; max-width: 600px; margin: auto; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } h1 { text-align: center; } .question { margin-bottom: 15px; } button { margin-top: 10px; padding: 10px; width: 100%; background: #2a7fff; color: white; border: none; border-radius: 5px; cursor: pointer; } button:hover { background: #1f5fcc; } </style>

Quiz Médico

Siguiente

<script> const quiz = [ { q: "¿Qué es el trabajo de parto?", a: ["Proceso de dilatación y expulsión del feto", "Control prenatal", "Cirugía obstétrica"], c: 0 }, { q: "¿Cuál es un signo de inicio del trabajo de parto?", a: ["Contracciones regulares", "Náuseas", "Fiebre"], c: 0 }, { q: "¿Cuántas fases tiene el trabajo de parto?", a: ["Dos", "Tres", "Cuatro"], c: 1 }, { q: "¿Qué ocurre en la fase de dilatación?", a: ["Expulsión del feto", "Apertura del cuello uterino", "Alumbramiento"], c: 1 }, { q: "¿Qué es el alumbramiento?", a: ["Salida del feto", "Salida de la placenta", "Inicio de contracciones"], c: 1 }, { q: "¿Qué es el aborto?", a: ["Interrupción del embarazo antes de la viabilidad fetal", "Parto prematuro", "Cesárea"], c: 0 }, { q: "¿Cuál es una causa frecuente de aborto espontáneo?", a: ["Alteraciones cromosómicas", "Ejercicio moderado", "Vacunación"], c: 0 }, { q: "¿Qué tipo de aborto ocurre por causas naturales?", a: ["Inducido", "Espontáneo", "Séptico"], c: 1 }, { q: "¿Qué profesional debe atender un aborto complicado?", a: ["Médico", "Enfermero sin supervisión", "Personal administrativo"], c: 0 }, { q: "¿Qué es fundamental en la atención médica del aborto?", a: ["Juicio moral", "Confidencialidad y atención segura", "Negación del servicio"], c: 1 } ]; let current = 0; let score = 0; function loadQuestion() { document.getElementById("question").innerText = quiz[current].q; const answersDiv = document.getElementById("answers"); answersDiv.innerHTML = ""; quiz[current].a.forEach((answer, index) => { answersDiv.innerHTML += `
${answer}
`; }); } function nextQuestion() { const selected = document.querySelector('input[name="answer"]:checked'); if (!selected) return alert("Selecciona una respuesta"); if (parseInt(selected.value) === quiz[current].c) score++; current++; if (current < quiz.length) { loadQuestion(); } else { document.querySelector(".quiz-container").innerHTML = `

Resultado final

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

¡Gracias por participar!

`; } } loadQuestion(); </script>

@mavia9227-pixel
Copy link

mavia9227-pixel commented Jan 27, 2026

<title>StrideElite - Premium Shoes for Style and Comfort</title> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Product", "name": "StrideElite Runner", "image": "https://example.com/shoe-image.jpg", "description": "Comfortable running shoes with premium materials.", "brand": "StrideElite", "offers": { "@type": "Offer", "price": "99.99", "priceCurrency": "USD" } } </script> <style> /* Global Styles */ body { font-family: 'Open Sans', sans-serif; margin: 0; padding: 0; color: #000; background: #fff; } h1, h2, h3 { font-family: 'Montserrat', sans-serif; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; } .accent { color: #C8102E; } .btn { background: #C8102E; color: #fff; padding: 10px 20px; border: none; cursor: pointer; transition: background 0.3s; } .btn:hover { background: #A00; } /* Navigation */ nav { position: sticky; top: 0; background: #fff; border-bottom: 1px solid #000; z-index: 100; } nav ul { list-style: none; display: flex; justify-content: space-between; padding: 10px; margin: 0; } nav a { text-decoration: none; color: #000; font-weight: bold; } /* Hero */ .hero { background: url('https://via.placeholder.com/1200x600?text=Latest+Shoes+Collection') no-repeat center/cover; height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; } .hero h1 { font-size: 3em; margin: 0; } .hero p { font-size: 1.2em; } /* Sections */ section { padding: 50px 0; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .product { border: 1px solid #ddd; padding: 20px; text-align: center; transition: transform 0.3s; } .product:hover { transform: scale(1.05); } .product img { max-width: 100%; height: auto; } /* Reviews */ .reviews { background: #f9f9f9; } .review { margin: 20px 0; } .stars { color: #FFD700; } /* Footer */ footer { background: #000; color: #fff; text-align: center; padding: 20px; } .trust-badges { display: flex; justify-content: center; gap: 20px; margin: 20px 0; } .trust-badges div { display: flex; align-items: center; } /* Mobile Responsiveness */ @media (max-width: 768px) { .hero h1 { font-size: 2em; } nav ul { flex-direction: column; } .grid { grid-template-columns: 1fr; } } /* Animations */ .fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s, transform 0.6s; } .fade-in.visible { opacity: 1; transform: translateY(0); } </style> 
<!-- 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>

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