commit 77f089e7c30c9e5eb31be6b533939cc5e588b56f
Author: ffff:199.87.9.9 <ffff:199.87.9.9@hub.scroll.pub>
Date: 2024-12-27 10:48:34 +0000
Subject: updated index.scroll
diff --git a/index.scroll b/index.scroll
index 56c8bb0..aeb9c4e 100644
--- a/index.scroll
+++ b/index.scroll
@@ -2,7 +2,7 @@ buildHtml
baseUrl https://pingpong.scroll.pub
metaTags
editButton /edit.html
-title Ping Pong Club - Join the Fun!
+title Elite Table Tennis Club - Professional Coaching & World-Class Facilities
style.css
body.html
-script.js
\ No newline at end of file
+script.js
commit 65100873d7e2178da91e3c05e664a626d5af7368
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 10:46:55 +0000
Subject: Initial commit
diff --git a/.log.txt b/.log.txt
new file mode 100644
index 0000000..29c3155
--- /dev/null
+++ b/.log.txt
@@ -0,0 +1,3 @@
+read pingpong.scroll.pub https://hub.scroll.pub/edit.html?folderName=pingpong.scroll.pub 1735296410154 ::ffff:199.87.9.9 0.0 200 Chrome.130 MacOSX.10.15.7
+read pingpong.scroll.pub https://hub.scroll.pub/ls.json?folderName=pingpong.scroll.pub 1735296412123 ::ffff:199.87.9.9 0.0 200 Chrome.130 MacOSX.10.15.7
+read pingpong.scroll.pub https://hub.scroll.pub/readFile.htm?folderName=pingpong.scroll.pub&filePath=pingpong.scroll.pub%2Findex.scroll 1735296412490 ::ffff:199.87.9.9 0.0 200 Chrome.130 MacOSX.10.15.7
diff --git a/.stats.json b/.stats.json
new file mode 100644
index 0000000..01cead3
--- /dev/null
+++ b/.stats.json
@@ -0,0 +1,19 @@
+{
+ "files": [
+ "body.html",
+ "index.scroll",
+ "readme.scroll",
+ "script.js",
+ "style.css"
+ ],
+ "stats": {
+ "folder": "pingpong.scroll.pub",
+ "folderLink": "https://pingpong.scroll.pub",
+ "created": "2024-12-27T10:46:49.000Z",
+ "revised": "2024-12-27T10:46:49.000Z",
+ "files": 5,
+ "mb": 1,
+ "revisions": 1,
+ "hash": "203f3ab31c"
+ }
+}
\ No newline at end of file
diff --git a/body.html b/body.html
index 81a6546..1cfa68c 100644
--- a/body.html
+++ b/body.html
@@ -1,125 +1,68 @@
-<header class="main-header">
- <nav>
- <div class="logo">Elite TT</div>
- <button class="mobile-menu" aria-label="Toggle menu">
- <span></span><span></span><span></span>
- </button>
- <ul class="nav-links">
- <li><a href="#facilities">Facilities</a></li>
- <li><a href="#coaching">Coaching</a></li>
- <li><a href="#membership">Membership</a></li>
- <li><a href="#contact" class="cta-button">Join Now</a></li>
- </ul>
- </nav>
+<header class="hero">
+ <div class="hero-content">
+ <h1>Welcome to Ping Pong Club</h1>
+ <p>Your destination for table tennis excellence</p>
+ <a href="#membership" class="cta-button">Join Now</a>
+ </div>
</header>
-<main>
- <section class="hero">
- <div class="hero-content">
- <h1>Welcome to Elite Table Tennis</h1>
- <p>Experience world-class facilities and professional coaching</p>
- <a href="#membership" class="cta-button">Start Your Journey</a>
- </div>
- </section>
-
- <section id="facilities" class="facilities">
- <h2>Our Facilities</h2>
- <div class="card-container">
- <div class="card">
- <h3>Professional Tables</h3>
- <p>12 ITTF-approved tables with professional lighting</p>
- </div>
- <div class="card">
- <h3>Training Area</h3>
- <p>Dedicated training space with robot practice stations</p>
- </div>
- <div class="card">
- <h3>Player Lounge</h3>
- <p>Comfortable relaxation area with refreshments</p>
- </div>
- </div>
- </section>
-
- <section id="coaching" class="coaching">
- <h2>Coaching Programs</h2>
- <div class="program-grid">
- <div class="program">
- <h3>Beginners</h3>
- <ul>
- <li>Basic techniques</li>
- <li>Equipment guidance</li>
- <li>2 sessions/week</li>
- </ul>
- <p class="price">$99/month</p>
- </div>
- <div class="program">
- <h3>Advanced</h3>
- <ul>
- <li>Advanced strategies</li>
- <li>Personal coach</li>
- <li>4 sessions/week</li>
- </ul>
- <p class="price">$199/month</p>
- </div>
- </div>
- </section>
+<section id="facilities" class="section">
+ <h2>Our Facilities</h2>
+ <div class="facility-grid">
+ <div class="facility-card">
+ <h3>Professional Tables</h3>
+ <p>10 high-quality competition tables</p>
+ </div>
+ <div class="facility-card">
+ <h3>Training Equipment</h3>
+ <p>Robots, ball machines, and more</p>
+ </div>
+ <div class="facility-card">
+ <h3>Comfortable Lounge</h3>
+ <p>Relax and socialize between games</p>
+ </div>
+ </div>
+</section>
- <section id="membership" class="membership">
- <h2>Membership Options</h2>
- <div class="membership-cards">
- <div class="membership-card">
- <h3>Monthly</h3>
- <p class="price">$75</p>
- <ul>
- <li>Unlimited table access</li>
- <li>Basic equipment rental</li>
- <li>Member events</li>
- </ul>
- <button class="signup-btn">Sign Up</button>
- </div>
- <div class="membership-card featured">
- <h3>Annual</h3>
- <p class="price">$750</p>
- <ul>
- <li>All monthly benefits</li>
- <li>Free coaching session</li>
- <li>2 guest passes/month</li>
- </ul>
- <button class="signup-btn">Sign Up</button>
- </div>
- </div>
- </section>
+<section id="coaching" class="section">
+ <h2>Coaching Programs</h2>
+ <div class="program-grid">
+ <div class="program-card">
+ <h3>Beginner Classes</h3>
+ <p>Learn the basics with our expert coaches</p>
+ </div>
+ <div class="program-card">
+ <h3>Advanced Training</h3>
+ <p>Take your skills to the next level</p>
+ </div>
+ <div class="program-card">
+ <h3>Private Lessons</h3>
+ <p>Personalized coaching tailored to your needs</p>
+ </div>
+ </div>
+</section>
- <section id="contact" class="contact">
- <h2>Get In Touch</h2>
- <div class="contact-container">
- <div class="contact-info">
- <p>123 Sports Avenue</p>
- <p>New York, NY 10001</p>
- <p>info@elitett.com</p>
- <p>(555) 123-4567</p>
- </div>
- <form class="contact-form">
- <input type="text" placeholder="Name" required>
- <input type="email" placeholder="Email" required>
- <textarea placeholder="Message" required></textarea>
- <button type="submit">Send Message</button>
- </form>
- </div>
- </section>
-</main>
+<section id="membership" class="section">
+ <h2>Membership</h2>
+ <div class="membership-grid">
+ <div class="membership-card">
+ <h3>Basic</h3>
+ <p>Access to facilities during off-peak hours</p>
+ <button class="join-button">Join Basic</button>
+ </div>
+ <div class="membership-card">
+ <h3>Premium</h3>
+ <p>Unlimited access + 2 coaching sessions/month</p>
+ <button class="join-button">Join Premium</button>
+ </div>
+ <div class="membership-card">
+ <h3>VIP</h3>
+ <p>All benefits + private locker + guest passes</p>
+ <button class="join-button">Join VIP</button>
+ </div>
+ </div>
+</section>
<footer>
- <div class="footer-content">
- <div class="footer-info">
- <h4>Elite Table Tennis Club</h4>
- <p>Elevating the game since 2010</p>
- </div>
- <div class="footer-links">
- <a href="#facilities">Facilities</a>
- <a href="#coaching">Coaching</a>
- <a href="#membership">Membership</a>
- <a href="#contact">Contact</a>
- </div>
- </div>
-</footer>
+ <p>Ping Pong Club - Where Passion Meets Play</p>
+</footer>
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..829eaf8
--- /dev/null
+++ b/index.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Elite Table Tennis Club - Professional Coaching & World-Class Facilities</title>
+ <script>/* This HTML was generated by 📜 Scroll v164.7.0. https://scroll.pub */</script>
+ <style>@media print {.doNotPrint {display: none !important;}}</style>
+ <link rel="canonical" href="https://pingpong.scroll.pub/index.html">
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+ <meta name="description" content="">
+ <meta name="generator" content="Scroll v164.7.0">
+ <meta property="og:title" content="Elite Table Tennis Club - Professional Coaching & World-Class Facilities">
+ <meta property="og:description" content="">
+ <meta property="og:image" content="">
+
+ <link rel="source" type="application/git" title="Source Code Repository" href="index.scroll">
+
+ <meta name="twitter:card" content="summary_large_image">
+</head>
+<body>
+<style>.abstractIconButtonParser {position:absolute;top:0.25rem; }.abstractIconButtonParser svg {fill: rgba(204,204,204,.8);width:1.875rem;height:1.875rem; padding: 0 7px;} .abstractIconButtonParser:hover svg{fill: #333;}</style><a href="/edit.html" class="doNotPrint abstractIconButtonParser" style="right:2rem;"><svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M21.1213 2.70705C19.9497 1.53548 18.0503 1.53547 16.8787 2.70705L15.1989 4.38685L7.29289 12.2928C7.16473 12.421 7.07382 12.5816 7.02986 12.7574L6.02986 16.7574C5.94466 17.0982 6.04451 17.4587 6.29289 17.707C6.54127 17.9554 6.90176 18.0553 7.24254 17.9701L11.2425 16.9701C11.4184 16.9261 11.5789 16.8352 11.7071 16.707L19.5556 8.85857L21.2929 7.12126C22.4645 5.94969 22.4645 4.05019 21.2929 2.87862L21.1213 2.70705ZM18.2929 4.12126C18.6834 3.73074 19.3166 3.73074 19.7071 4.12126L19.8787 4.29283C20.2692 4.68336 20.2692 5.31653 19.8787 5.70705L18.8622 6.72357L17.3068 5.10738L18.2929 4.12126ZM15.8923 6.52185L17.4477 8.13804L10.4888 15.097L8.37437 15.6256L8.90296 13.5112L15.8923 6.52185ZM4 7.99994C4 7.44766 4.44772 6.99994 5 6.99994H10C10.5523 6.99994 11 6.55223 11 5.99994C11 5.44766 10.5523 4.99994 10 4.99994H5C3.34315 4.99994 2 6.34309 2 7.99994V18.9999C2 20.6568 3.34315 21.9999 5 21.9999H16C17.6569 21.9999 19 20.6568 19 18.9999V13.9999C19 13.4477 18.5523 12.9999 18 12.9999C17.4477 12.9999 17 13.4477 17 13.9999V18.9999C17 19.5522 16.5523 19.9999 16 19.9999H5C4.44772 19.9999 4 19.5522 4 18.9999V7.99994Z"/></svg></a>
+<link rel="stylesheet" type="text/css" href="style.css">
+<header class="main-header">
+ <nav>
+ <div class="logo">Elite TT</div>
+ <button class="mobile-menu" aria-label="Toggle menu">
+ <span></span><span></span><span></span>
+ </button>
+ <ul class="nav-links">
+ <li><a href="#facilities">Facilities</a></li>
+ <li><a href="#coaching">Coaching</a></li>
+ <li><a href="#membership">Membership</a></li>
+ <li><a href="#contact" class="cta-button">Join Now</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <div class="hero-content">
+ <h1>Welcome to Elite Table Tennis</h1>
+ <p>Experience world-class facilities and professional coaching</p>
+ <a href="#membership" class="cta-button">Start Your Journey</a>
+ </div>
+ </section>
+
+ <section id="facilities" class="facilities">
+ <h2>Our Facilities</h2>
+ <div class="card-container">
+ <div class="card">
+ <h3>Professional Tables</h3>
+ <p>12 ITTF-approved tables with professional lighting</p>
+ </div>
+ <div class="card">
+ <h3>Training Area</h3>
+ <p>Dedicated training space with robot practice stations</p>
+ </div>
+ <div class="card">
+ <h3>Player Lounge</h3>
+ <p>Comfortable relaxation area with refreshments</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="coaching" class="coaching">
+ <h2>Coaching Programs</h2>
+ <div class="program-grid">
+ <div class="program">
+ <h3>Beginners</h3>
+ <ul>
+ <li>Basic techniques</li>
+ <li>Equipment guidance</li>
+ <li>2 sessions/week</li>
+ </ul>
+ <p class="price">$99/month</p>
+ </div>
+ <div class="program">
+ <h3>Advanced</h3>
+ <ul>
+ <li>Advanced strategies</li>
+ <li>Personal coach</li>
+ <li>4 sessions/week</li>
+ </ul>
+ <p class="price">$199/month</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="membership" class="membership">
+ <h2>Membership Options</h2>
+ <div class="membership-cards">
+ <div class="membership-card">
+ <h3>Monthly</h3>
+ <p class="price">$75</p>
+ <ul>
+ <li>Unlimited table access</li>
+ <li>Basic equipment rental</li>
+ <li>Member events</li>
+ </ul>
+ <button class="signup-btn">Sign Up</button>
+ </div>
+ <div class="membership-card featured">
+ <h3>Annual</h3>
+ <p class="price">$750</p>
+ <ul>
+ <li>All monthly benefits</li>
+ <li>Free coaching session</li>
+ <li>2 guest passes/month</li>
+ </ul>
+ <button class="signup-btn">Sign Up</button>
+ </div>
+ </div>
+ </section>
+
+ <section id="contact" class="contact">
+ <h2>Get In Touch</h2>
+ <div class="contact-container">
+ <div class="contact-info">
+ <p>123 Sports Avenue</p>
+ <p>New York, NY 10001</p>
+ <p>info@elitett.com</p>
+ <p>(555) 123-4567</p>
+ </div>
+ <form class="contact-form">
+ <input type="text" placeholder="Name" required>
+ <input type="email" placeholder="Email" required>
+ <textarea placeholder="Message" required></textarea>
+ <button type="submit">Send Message</button>
+ </form>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="footer-info">
+ <h4>Elite Table Tennis Club</h4>
+ <p>Elevating the game since 2010</p>
+ </div>
+ <div class="footer-links">
+ <a href="#facilities">Facilities</a>
+ <a href="#coaching">Coaching</a>
+ <a href="#membership">Membership</a>
+ <a href="#contact">Contact</a>
+ </div>
+ </div>
+</footer>
+
+<script src="script.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
index aeb9c4e..56c8bb0 100644
--- a/index.scroll
+++ b/index.scroll
@@ -2,7 +2,7 @@ buildHtml
baseUrl https://pingpong.scroll.pub
metaTags
editButton /edit.html
-title Elite Table Tennis Club - Professional Coaching & World-Class Facilities
+title Ping Pong Club - Join the Fun!
style.css
body.html
-script.js
+script.js
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
index 2d45027..5efc286 100644
--- a/readme.scroll
+++ b/readme.scroll
@@ -1,2 +1,2 @@
# pingpong.scroll.pub
-Website generated by Claude from prompt: Create an html landing page for a table tennis club with details abouyt club facilities, coaching programs and membership.
\ No newline at end of file
+Website generated by DeepSeek from prompt: Create an html landing page for a table tennis club with details abouyt club facilities, coaching programs and membership.
\ No newline at end of file
diff --git a/script.js b/script.js
index 4f585b5..3ca0d37 100644
--- a/script.js
+++ b/script.js
@@ -1,58 +1,26 @@
-document.addEventListener('DOMContentLoaded', () => {
- // Mobile menu toggle
- const mobileMenu = document.querySelector('.mobile-menu');
- const navLinks = document.querySelector('.nav-links');
-
- mobileMenu.addEventListener('click', () => {
- navLinks.classList.toggle('active');
-
- // Animate hamburger to X
- const spans = mobileMenu.querySelectorAll('span');
- spans.forEach(span => span.classList.toggle('active'));
+// Smooth scrolling for anchor links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
+ behavior: 'smooth'
});
+ });
+});
- // Smooth scroll for navigation links
- document.querySelectorAll('a[href^="#"]').forEach(anchor => {
- anchor.addEventListener('click', function (e) {
- e.preventDefault();
- const target = document.querySelector(this.getAttribute('href'));
-
- if (target) {
- target.scrollIntoView({
- behavior: 'smooth',
- block: 'start'
- });
-
- // Close mobile menu if open
- navLinks.classList.remove('active');
- }
- });
- });
+// Add animation to sections when they come into view
+const sections = document.querySelectorAll('.section');
- // Form submission handler
- const contactForm = document.querySelector('.contact-form');
- if (contactForm) {
- contactForm.addEventListener('submit', (e) => {
- e.preventDefault();
- // Add form submission logic here
- alert('Thank you for your message! We will get back to you soon.');
- contactForm.reset();
- });
+const observer = new IntersectionObserver(entries => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.classList.add('visible');
}
-
- // Intersection Observer for fade-in animations
- const observer = new IntersectionObserver((entries) => {
- entries.forEach(entry => {
- if (entry.isIntersecting) {
- entry.target.classList.add('fade-in');
- }
- });
- }, {
- threshold: 0.1
- });
-
- // Observe all sections
- document.querySelectorAll('section').forEach(section => {
- observer.observe(section);
- });
+ });
+}, {
+ threshold: 0.1
});
+
+sections.forEach(section => {
+ observer.observe(section);
+});
\ No newline at end of file
diff --git a/style.css b/style.css
index 7edbbf3..2a03797 100644
--- a/style.css
+++ b/style.css
@@ -1,247 +1,124 @@
:root {
- --primary-color: #2c3e50;
- --accent-color: #e74c3c;
- --text-color: #333;
- --light-bg: #f5f6fa;
- --transition: all 0.3s ease;
-}
-
-* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
+ --primary-color: #ff4757;
+ --secondary-color: #2f3542;
+ --accent-color: #ffa502;
+ --text-color: #ffffff;
+ --background-color: #1e272e;
}
body {
- font-family: 'Segoe UI', system-ui, sans-serif;
- line-height: 1.6;
- color: var(--text-color);
-}
-
-.main-header {
- position: fixed;
- width: 100%;
- background: rgba(255, 255, 255, 0.95);
- backdrop-filter: blur(10px);
- z-index: 1000;
- box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-}
-
-nav {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 1rem 5%;
- max-width: 1200px;
- margin: 0 auto;
-}
-
-.logo {
- font-size: 1.5rem;
- font-weight: bold;
- color: var(--primary-color);
-}
-
-.nav-links {
- display: flex;
- gap: 2rem;
- list-style: none;
-}
-
-.nav-links a {
- text-decoration: none;
- color: var(--primary-color);
- font-weight: 500;
- transition: var(--transition);
-}
-
-.nav-links a:hover {
- color: var(--accent-color);
-}
-
-.cta-button {
- background: var(--accent-color);
- color: white !important;
- padding: 0.5rem 1.5rem;
- border-radius: 25px;
- transition: var(--transition);
-}
-
-.cta-button:hover {
- background: #c0392b;
- transform: translateY(-2px);
+ font-family: 'Segoe UI', sans-serif;
+ color: var(--text-color);
+ background-color: var(--background-color);
+ margin: 0;
+ line-height: 1.6;
}
.hero {
- height: 100vh;
- background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
- url('images/table-tennis.jpg');
- background-size: cover;
- background-position: center;
- display: flex;
- align-items: center;
- text-align: center;
- color: white;
+ height: 100vh;
+ background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
+ url('table-tennis.jpg') center/cover;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
}
.hero-content {
- max-width: 800px;
- margin: 0 auto;
- padding: 2rem;
+ max-width: 800px;
+ padding: 20px;
}
-.hero h1 {
- font-size: 3.5rem;
- margin-bottom: 1rem;
+h1 {
+ font-size: 4rem;
+ margin-bottom: 20px;
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
-section {
- padding: 5rem 5%;
-}
-
-.card-container {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
- gap: 2rem;
- margin-top: 2rem;
-}
-
-.card {
- background: white;
- padding: 2rem;
- border-radius: 10px;
- box-shadow: 0 5px 15px rgba(0,0,0,0.1);
- transition: var(--transition);
+.cta-button {
+ display: inline-block;
+ padding: 15px 30px;
+ background-color: var(--primary-color);
+ color: var(--text-color);
+ text-decoration: none;
+ border-radius: 5px;
+ font-size: 1.2rem;
+ transition: all 0.3s ease;
}
-.card:hover {
- transform: translateY(-5px);
+.cta-button:hover {
+ transform: translateY(-3px);
+ box-shadow: 0 5px 15px rgba(255, 71, 87, 0.4);
}
-.program-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
- gap: 2rem;
- margin-top: 2rem;
+.section {
+ padding: 60px 20px;
+ text-align: center;
}
-.program {
- background: var(--light-bg);
- padding: 2rem;
- border-radius: 10px;
- transition: var(--transition);
+h2 {
+ font-size: 2.5rem;
+ margin-bottom: 40px;
+ color: var(--primary-color);
}
-.membership-cards {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
- gap: 2rem;
- margin-top: 2rem;
+.facility-grid, .program-grid, .membership-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 30px;
+ max-width: 1200px;
+ margin: 0 auto;
}
-.membership-card {
- background: white;
- padding: 2rem;
- border-radius: 10px;
- text-align: center;
- box-shadow: 0 5px 15px rgba(0,0,0,0.1);
- transition: var(--transition);
+.facility-card, .program-card, .membership-card {
+ background: rgba(255, 255, 255, 0.1);
+ padding: 30px;
+ border-radius: 10px;
+ backdrop-filter: blur(10px);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ transition: all 0.3s ease;
}
-.membership-card.featured {
- transform: scale(1.05);
- border: 2px solid var(--accent-color);
+.facility-card:hover, .program-card:hover, .membership-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
-.contact-container {
- display: grid;
- grid-template-columns: 1fr 2fr;
- gap: 2rem;
- margin-top: 2rem;
+h3 {
+ color: var(--accent-color);
+ margin-bottom: 15px;
}
-.contact-form {
- display: grid;
- gap: 1rem;
+.join-button {
+ background-color: var(--primary-color);
+ color: var(--text-color);
+ border: none;
+ padding: 10px 20px;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: all 0.3s ease;
}
-input, textarea {
- padding: 0.8rem;
- border: 1px solid #ddd;
- border-radius: 5px;
+.join-button:hover {
+ background-color: var(--accent-color);
}
footer {
- background: var(--primary-color);
- color: white;
- padding: 2rem 5%;
-}
-
-.footer-content {
- display: flex;
- justify-content: space-between;
- max-width: 1200px;
- margin: 0 auto;
-}
-
-.footer-links {
- display: flex;
- gap: 2rem;
-}
-
-.footer-links a {
- color: white;
- text-decoration: none;
-}
-
-.mobile-menu {
- display: none;
+ background-color: var(--secondary-color);
+ padding: 20px;
+ text-align: center;
}
@media (max-width: 768px) {
- .mobile-menu {
- display: block;
- background: none;
- border: none;
- cursor: pointer;
- }
-
- .mobile-menu span {
- display: block;
- width: 25px;
- height: 3px;
- background: var(--primary-color);
- margin: 5px 0;
- transition: var(--transition);
- }
-
- .nav-links {
- display: none;
- position: absolute;
- top: 100%;
- left: 0;
- right: 0;
- background: white;
- padding: 1rem;
- flex-direction: column;
- text-align: center;
- }
-
- .nav-links.active {
- display: flex;
- }
-
- .contact-container {
- grid-template-columns: 1fr;
- }
-
- .footer-content {
- flex-direction: column;
- gap: 1rem;
- text-align: center;
- }
-
- .footer-links {
- justify-content: center;
- }
-}
+ h1 {
+ font-size: 3rem;
+ }
+
+ h2 {
+ font-size: 2rem;
+ }
+
+ .facility-grid, .program-grid, .membership-grid {
+ grid-template-columns: 1fr;
+ }
+}
\ No newline at end of file
commit 203f3ab31c3bfdcda556038507ef2eaa129fe910
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 10:46:49 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..81a6546
--- /dev/null
+++ b/body.html
@@ -0,0 +1,125 @@
+<header class="main-header">
+ <nav>
+ <div class="logo">Elite TT</div>
+ <button class="mobile-menu" aria-label="Toggle menu">
+ <span></span><span></span><span></span>
+ </button>
+ <ul class="nav-links">
+ <li><a href="#facilities">Facilities</a></li>
+ <li><a href="#coaching">Coaching</a></li>
+ <li><a href="#membership">Membership</a></li>
+ <li><a href="#contact" class="cta-button">Join Now</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <div class="hero-content">
+ <h1>Welcome to Elite Table Tennis</h1>
+ <p>Experience world-class facilities and professional coaching</p>
+ <a href="#membership" class="cta-button">Start Your Journey</a>
+ </div>
+ </section>
+
+ <section id="facilities" class="facilities">
+ <h2>Our Facilities</h2>
+ <div class="card-container">
+ <div class="card">
+ <h3>Professional Tables</h3>
+ <p>12 ITTF-approved tables with professional lighting</p>
+ </div>
+ <div class="card">
+ <h3>Training Area</h3>
+ <p>Dedicated training space with robot practice stations</p>
+ </div>
+ <div class="card">
+ <h3>Player Lounge</h3>
+ <p>Comfortable relaxation area with refreshments</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="coaching" class="coaching">
+ <h2>Coaching Programs</h2>
+ <div class="program-grid">
+ <div class="program">
+ <h3>Beginners</h3>
+ <ul>
+ <li>Basic techniques</li>
+ <li>Equipment guidance</li>
+ <li>2 sessions/week</li>
+ </ul>
+ <p class="price">$99/month</p>
+ </div>
+ <div class="program">
+ <h3>Advanced</h3>
+ <ul>
+ <li>Advanced strategies</li>
+ <li>Personal coach</li>
+ <li>4 sessions/week</li>
+ </ul>
+ <p class="price">$199/month</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="membership" class="membership">
+ <h2>Membership Options</h2>
+ <div class="membership-cards">
+ <div class="membership-card">
+ <h3>Monthly</h3>
+ <p class="price">$75</p>
+ <ul>
+ <li>Unlimited table access</li>
+ <li>Basic equipment rental</li>
+ <li>Member events</li>
+ </ul>
+ <button class="signup-btn">Sign Up</button>
+ </div>
+ <div class="membership-card featured">
+ <h3>Annual</h3>
+ <p class="price">$750</p>
+ <ul>
+ <li>All monthly benefits</li>
+ <li>Free coaching session</li>
+ <li>2 guest passes/month</li>
+ </ul>
+ <button class="signup-btn">Sign Up</button>
+ </div>
+ </div>
+ </section>
+
+ <section id="contact" class="contact">
+ <h2>Get In Touch</h2>
+ <div class="contact-container">
+ <div class="contact-info">
+ <p>123 Sports Avenue</p>
+ <p>New York, NY 10001</p>
+ <p>info@elitett.com</p>
+ <p>(555) 123-4567</p>
+ </div>
+ <form class="contact-form">
+ <input type="text" placeholder="Name" required>
+ <input type="email" placeholder="Email" required>
+ <textarea placeholder="Message" required></textarea>
+ <button type="submit">Send Message</button>
+ </form>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="footer-info">
+ <h4>Elite Table Tennis Club</h4>
+ <p>Elevating the game since 2010</p>
+ </div>
+ <div class="footer-links">
+ <a href="#facilities">Facilities</a>
+ <a href="#coaching">Coaching</a>
+ <a href="#membership">Membership</a>
+ <a href="#contact">Contact</a>
+ </div>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..aeb9c4e
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://pingpong.scroll.pub
+metaTags
+editButton /edit.html
+title Elite Table Tennis Club - Professional Coaching & World-Class Facilities
+style.css
+body.html
+script.js
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..2d45027
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# pingpong.scroll.pub
+Website generated by Claude from prompt: Create an html landing page for a table tennis club with details abouyt club facilities, coaching programs and membership.
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..4f585b5
--- /dev/null
+++ b/script.js
@@ -0,0 +1,58 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Mobile menu toggle
+ const mobileMenu = document.querySelector('.mobile-menu');
+ const navLinks = document.querySelector('.nav-links');
+
+ mobileMenu.addEventListener('click', () => {
+ navLinks.classList.toggle('active');
+
+ // Animate hamburger to X
+ const spans = mobileMenu.querySelectorAll('span');
+ spans.forEach(span => span.classList.toggle('active'));
+ });
+
+ // Smooth scroll for navigation links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ const target = document.querySelector(this.getAttribute('href'));
+
+ if (target) {
+ target.scrollIntoView({
+ behavior: 'smooth',
+ block: 'start'
+ });
+
+ // Close mobile menu if open
+ navLinks.classList.remove('active');
+ }
+ });
+ });
+
+ // Form submission handler
+ const contactForm = document.querySelector('.contact-form');
+ if (contactForm) {
+ contactForm.addEventListener('submit', (e) => {
+ e.preventDefault();
+ // Add form submission logic here
+ alert('Thank you for your message! We will get back to you soon.');
+ contactForm.reset();
+ });
+ }
+
+ // Intersection Observer for fade-in animations
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.classList.add('fade-in');
+ }
+ });
+ }, {
+ threshold: 0.1
+ });
+
+ // Observe all sections
+ document.querySelectorAll('section').forEach(section => {
+ observer.observe(section);
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..7edbbf3
--- /dev/null
+++ b/style.css
@@ -0,0 +1,247 @@
+:root {
+ --primary-color: #2c3e50;
+ --accent-color: #e74c3c;
+ --text-color: #333;
+ --light-bg: #f5f6fa;
+ --transition: all 0.3s ease;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+}
+
+.main-header {
+ position: fixed;
+ width: 100%;
+ background: rgba(255, 255, 255, 0.95);
+ backdrop-filter: blur(10px);
+ z-index: 1000;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 5%;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: var(--primary-color);
+}
+
+.nav-links {
+ display: flex;
+ gap: 2rem;
+ list-style: none;
+}
+
+.nav-links a {
+ text-decoration: none;
+ color: var(--primary-color);
+ font-weight: 500;
+ transition: var(--transition);
+}
+
+.nav-links a:hover {
+ color: var(--accent-color);
+}
+
+.cta-button {
+ background: var(--accent-color);
+ color: white !important;
+ padding: 0.5rem 1.5rem;
+ border-radius: 25px;
+ transition: var(--transition);
+}
+
+.cta-button:hover {
+ background: #c0392b;
+ transform: translateY(-2px);
+}
+
+.hero {
+ height: 100vh;
+ background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
+ url('images/table-tennis.jpg');
+ background-size: cover;
+ background-position: center;
+ display: flex;
+ align-items: center;
+ text-align: center;
+ color: white;
+}
+
+.hero-content {
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 2rem;
+}
+
+.hero h1 {
+ font-size: 3.5rem;
+ margin-bottom: 1rem;
+}
+
+section {
+ padding: 5rem 5%;
+}
+
+.card-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.card {
+ background: white;
+ padding: 2rem;
+ border-radius: 10px;
+ box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+ transition: var(--transition);
+}
+
+.card:hover {
+ transform: translateY(-5px);
+}
+
+.program-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.program {
+ background: var(--light-bg);
+ padding: 2rem;
+ border-radius: 10px;
+ transition: var(--transition);
+}
+
+.membership-cards {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.membership-card {
+ background: white;
+ padding: 2rem;
+ border-radius: 10px;
+ text-align: center;
+ box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+ transition: var(--transition);
+}
+
+.membership-card.featured {
+ transform: scale(1.05);
+ border: 2px solid var(--accent-color);
+}
+
+.contact-container {
+ display: grid;
+ grid-template-columns: 1fr 2fr;
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.contact-form {
+ display: grid;
+ gap: 1rem;
+}
+
+input, textarea {
+ padding: 0.8rem;
+ border: 1px solid #ddd;
+ border-radius: 5px;
+}
+
+footer {
+ background: var(--primary-color);
+ color: white;
+ padding: 2rem 5%;
+}
+
+.footer-content {
+ display: flex;
+ justify-content: space-between;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.footer-links {
+ display: flex;
+ gap: 2rem;
+}
+
+.footer-links a {
+ color: white;
+ text-decoration: none;
+}
+
+.mobile-menu {
+ display: none;
+}
+
+@media (max-width: 768px) {
+ .mobile-menu {
+ display: block;
+ background: none;
+ border: none;
+ cursor: pointer;
+ }
+
+ .mobile-menu span {
+ display: block;
+ width: 25px;
+ height: 3px;
+ background: var(--primary-color);
+ margin: 5px 0;
+ transition: var(--transition);
+ }
+
+ .nav-links {
+ display: none;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ background: white;
+ padding: 1rem;
+ flex-direction: column;
+ text-align: center;
+ }
+
+ .nav-links.active {
+ display: flex;
+ }
+
+ .contact-container {
+ grid-template-columns: 1fr;
+ }
+
+ .footer-content {
+ flex-direction: column;
+ gap: 1rem;
+ text-align: center;
+ }
+
+ .footer-links {
+ justify-content: center;
+ }
+}