commit 81999a10c68feb0cf8b300446e19ade3ef07c4af
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 11:02:30 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..12736ea
--- /dev/null
+++ b/body.html
@@ -0,0 +1,101 @@
+<header>
+ <nav>
+ <div class="logo">TutorMatch</div>
+ <button class="mobile-menu" aria-label="Toggle menu">
+ <span></span><span></span><span></span>
+ </button>
+ <ul class="nav-links">
+ <li><a href="#home">Home</a></li>
+ <li><a href="#subjects">Subjects</a></li>
+ <li><a href="#how-it-works">How It Works</a></li>
+ <li><a href="#pricing">Pricing</a></li>
+ <li><button class="btn-primary">Find a Tutor</button></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section id="hero">
+ <h1>Expert Tutoring at Your Fingertips</h1>
+ <p>Connect with qualified tutors for personalized learning experiences</p>
+ <div class="search-container">
+ <input type="text" placeholder="What would you like to learn?" aria-label="Search subjects">
+ <button class="search-btn">Search</button>
+ </div>
+ </section>
+
+ <section id="subjects">
+ <h2>Popular Subjects</h2>
+ <div class="subjects-grid">
+ <div class="subject-card">
+ <div class="subject-icon">📐</div>
+ <h3>Mathematics</h3>
+ <p>Algebra, Calculus, Statistics</p>
+ </div>
+ <div class="subject-card">
+ <div class="subject-icon">🧬</div>
+ <h3>Sciences</h3>
+ <p>Physics, Chemistry, Biology</p>
+ </div>
+ <div class="subject-card">
+ <div class="subject-icon">🌎</div>
+ <h3>Languages</h3>
+ <p>English, Spanish, Mandarin</p>
+ </div>
+ <div class="subject-card">
+ <div class="subject-icon">💻</div>
+ <h3>Programming</h3>
+ <p>Python, Java, Web Dev</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="how-it-works">
+ <h2>How It Works</h2>
+ <div class="steps-container">
+ <div class="step">
+ <div class="step-number">1</div>
+ <h3>Search</h3>
+ <p>Find tutors based on subject and availability</p>
+ </div>
+ <div class="step">
+ <div class="step-number">2</div>
+ <h3>Connect</h3>
+ <p>Schedule a session with your chosen tutor</p>
+ </div>
+ <div class="step">
+ <div class="step-number">3</div>
+ <h3>Learn</h3>
+ <p>Join your online session and start learning</p>
+ </div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="footer-section">
+ <h4>Company</h4>
+ <ul>
+ <li><a href="#about">About Us</a></li>
+ <li><a href="#careers">Careers</a></li>
+ <li><a href="#blog">Blog</a></li>
+ </ul>
+ </div>
+ <div class="footer-section">
+ <h4>Support</h4>
+ <ul>
+ <li><a href="#help">Help Center</a></li>
+ <li><a href="#safety">Safety</a></li>
+ <li><a href="#terms">Terms of Service</a></li>
+ </ul>
+ </div>
+ <div class="footer-section">
+ <h4>Contact</h4>
+ <ul>
+ <li><a href="mailto:support@tutormatch.com">support@tutormatch.com</a></li>
+ <li><a href="tel:+1234567890">+1 (234) 567-890</a></li>
+ </ul>
+ </div>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..8fbf60b
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,10 @@
+buildHtml
+baseUrl https://tutor.scroll.pub
+metaTags
+ description "Find your perfect tutor. Expert online tutoring in math, science, languages and more. Connect with qualified tutors for personalized learning."
+ keywords "tutoring, online tutoring, find tutor, math tutor, science tutor, language tutor, academic help"
+editButton /edit.html
+title TutorMatch | Find Your Perfect Tutor
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..8b8e64c
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01AyTWMNEJsP6BPGHsy7wqyc",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a tutoring platform website with a focus on connecting students with tutors.\n\n---domain---\ntutor.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://tutor.scroll.pub\nmetaTags\n description \"Find your perfect tutor. Expert online tutoring in math, science, languages and more. Connect with qualified tutors for personalized learning.\"\n keywords \"tutoring, online tutoring, find tutor, math tutor, science tutor, language tutor, academic help\"\neditButton /edit.html\ntitle TutorMatch | Find Your Perfect Tutor\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">TutorMatch</div>\n <button class=\"mobile-menu\" aria-label=\"Toggle menu\">\n <span></span><span></span><span></span>\n </button>\n <ul class=\"nav-links\">\n <li><a href=\"#home\">Home</a></li>\n <li><a href=\"#subjects\">Subjects</a></li>\n <li><a href=\"#how-it-works\">How It Works</a></li>\n <li><a href=\"#pricing\">Pricing</a></li>\n <li><button class=\"btn-primary\">Find a Tutor</button></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section id=\"hero\">\n <h1>Expert Tutoring at Your Fingertips</h1>\n <p>Connect with qualified tutors for personalized learning experiences</p>\n <div class=\"search-container\">\n <input type=\"text\" placeholder=\"What would you like to learn?\" aria-label=\"Search subjects\">\n <button class=\"search-btn\">Search</button>\n </div>\n </section>\n\n <section id=\"subjects\">\n <h2>Popular Subjects</h2>\n <div class=\"subjects-grid\">\n <div class=\"subject-card\">\n <div class=\"subject-icon\">📐</div>\n <h3>Mathematics</h3>\n <p>Algebra, Calculus, Statistics</p>\n </div>\n <div class=\"subject-card\">\n <div class=\"subject-icon\">🧬</div>\n <h3>Sciences</h3>\n <p>Physics, Chemistry, Biology</p>\n </div>\n <div class=\"subject-card\">\n <div class=\"subject-icon\">🌎</div>\n <h3>Languages</h3>\n <p>English, Spanish, Mandarin</p>\n </div>\n <div class=\"subject-card\">\n <div class=\"subject-icon\">💻</div>\n <h3>Programming</h3>\n <p>Python, Java, Web Dev</p>\n </div>\n </div>\n </section>\n\n <section id=\"how-it-works\">\n <h2>How It Works</h2>\n <div class=\"steps-container\">\n <div class=\"step\">\n <div class=\"step-number\">1</div>\n <h3>Search</h3>\n <p>Find tutors based on subject and availability</p>\n </div>\n <div class=\"step\">\n <div class=\"step-number\">2</div>\n <h3>Connect</h3>\n <p>Schedule a session with your chosen tutor</p>\n </div>\n <div class=\"step\">\n <div class=\"step-number\">3</div>\n <h3>Learn</h3>\n <p>Join your online session and start learning</p>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-section\">\n <h4>Company</h4>\n <ul>\n <li><a href=\"#about\">About Us</a></li>\n <li><a href=\"#careers\">Careers</a></li>\n <li><a href=\"#blog\">Blog</a></li>\n </ul>\n </div>\n <div class=\"footer-section\">\n <h4>Support</h4>\n <ul>\n <li><a href=\"#help\">Help Center</a></li>\n <li><a href=\"#safety\">Safety</a></li>\n <li><a href=\"#terms\">Terms of Service</a></li>\n </ul>\n </div>\n <div class=\"footer-section\">\n <h4>Contact</h4>\n <ul>\n <li><a href=\"mailto:support@tutormatch.com\">support@tutormatch.com</a></li>\n <li><a href=\"tel:+1234567890\">+1 (234) 567-890</a></li>\n </ul>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #4a90e2;\n --secondary-color: #2c3e50;\n --accent-color: #e74c3c;\n --background-color: #f5f6fa;\n --text-color: #2c3e50;\n --white: #ffffff;\n --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background-color: var(--background-color);\n}\n\n/* Header & Navigation */\nheader {\n background: var(--white);\n box-shadow: var(--shadow);\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 1000;\n}\n\nnav {\n max-width: 1200px;\n margin: 0 auto;\n padding: 1rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n color: var(--primary-color);\n}\n\n.nav-links {\n display: flex;\n list-style: none;\n align-items: center;\n gap: 2rem;\n}\n\n.nav-links a {\n text-decoration: none;\n color: var(--text-color);\n font-weight: 500;\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--primary-color);\n}\n\n.btn-primary {\n background: var(--primary-color);\n color: var(--white);\n padding: 0.5rem 1.5rem;\n border: none;\n border-radius: 25px;\n cursor: pointer;\n transition: transform 0.3s ease;\n}\n\n.btn-primary:hover {\n transform: translateY(-2px);\n}\n\n/* Hero Section */\n#hero {\n height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n padding: 2rem;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: var(--white);\n}\n\n#hero h1 {\n font-size: 3.5rem;\n margin-bottom: 1rem;\n animation: fadeInUp 1s ease-out;\n}\n\n#hero p {\n font-size: 1.2rem;\n margin-bottom: 2rem;\n animation: fadeInUp 1s ease-out 0.2s;\n}\n\n.search-container {\n display: flex;\n gap: 0.5rem;\n max-width: 600px;\n width: 100%;\n animation: fadeInUp 1s ease-out 0.4s;\n}\n\n.search-container input {\n flex: 1;\n padding: 1rem;\n border: none;\n border-radius: 25px;\n font-size: 1rem;\n}\n\n.search-btn {\n padding: 1rem 2rem;\n background: var(--accent-color);\n color: var(--white);\n border: none;\n border-radius: 25px;\n cursor: pointer;\n transition: transform 0.3s ease;\n}\n\n.search-btn:hover {\n transform: translateY(-2px);\n}\n\n/* Subjects Section */\n#subjects {\n padding: 5rem 2rem;\n background: var(--white);\n}\n\n.subjects-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n max-width: 1200px;\n margin: 2rem auto;\n}\n\n.subject-card {\n background: var(--white);\n padding: 2rem;\n border-radius: 10px;\n box-shadow: var(--shadow);\n text-align: center;\n transition: transform 0.3s ease;\n}\n\n.subject-card:hover {\n transform: translateY(-5px);\n}\n\n.subject-icon {\n font-size: 3rem;\n margin-bottom: 1rem;\n}\n\n/* How It Works Section */\n#how-it-works {\n padding: 5rem 2rem;\n background: var(--background-color);\n}\n\n.steps-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n max-width: 1200px;\n margin: 2rem auto;\n}\n\n.step {\n text-align: center;\n padding: 2rem;\n}\n\n.step-number {\n width: 50px;\n height: 50px;\n background: var(--primary-color);\n color: var(--white);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 1rem;\n font-size: 1.5rem;\n font-weight: bold;\n}\n\n/* Footer */\nfooter {\n background: var(--secondary-color);\n color: var(--white);\n padding: 3rem 2rem;\n}\n\n.footer-content {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 2rem;\n}\n\n.footer-section h4 {\n margin-bottom: 1rem;\n}\n\n.footer-section ul {\n list-style: none;\n}\n\n.footer-section a {\n color: var(--white);\n text-decoration: none;\n transition: color 0.3s ease;\n}\n\n.footer-section a:hover {\n color: var(--primary-color);\n}\n\n/* Animations */\n@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Mobile Responsiveness */\n.mobile-menu {\n display: none;\n}\n\n@media (max-width: 768px) {\n .mobile-menu {\n display: flex;\n flex-direction: column;\n gap: 4px;\n background: none;\n border: none;\n cursor: pointer;\n padding: 4px;\n }\n\n .mobile-menu span {\n width: 25px;\n height: 3px;\n background: var(--text-color);\n transition: 0.3s ease;\n }\n\n .nav-links {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background: var(--white);\n flex-direction: column;\n padding: 1rem;\n box-shadow: var(--shadow);\n }\n\n .nav-links.active {\n display: flex;\n }\n\n #hero h1 {\n font-size: 2.5rem;\n }\n\n .search-container {\n flex-direction: column;\n }\n\n .search-btn {\n width: 100%;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Mobile menu toggle\n const mobileMenu = document.querySelector('.mobile-menu');\n const navLinks = document.querySelector('.nav-links');\n\n mobileMenu.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n \n // Animate hamburger to X\n const spans = mobileMenu.querySelectorAll('span');\n spans.forEach(span => span.classList.toggle('active'));\n });\n\n // Smooth scroll for navigation links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n navLinks.classList.remove('active');\n target.scrollIntoView({\n behavior: 'smooth'\n });\n }\n });\n });\n\n // Search functionality\n const searchBtn = document.querySelector('.search-btn');\n const searchInput = document.querySelector('.search-container input');\n\n searchBtn.addEventListener('click', () => {\n const searchTerm = searchInput.value.trim();\n if (searchTerm) {\n // Add search functionality here\n console.log(`Searching for: ${searchTerm}`);\n searchInput.value = '';\n }\n });\n\n // Add parallax effect to hero section\n const hero = document.querySelector('#hero');\n window.addEventListener('scroll', () => {\n const scroll = window.pageYOffset;\n hero.style.backgroundPosition = `center ${scroll * 0.5}px`;\n });\n\n // Animate elements on scroll\n const animateOnScroll = () => {\n const elements = document.querySelectorAll('.subject-card, .step');\n elements.forEach(element => {\n const elementTop = element.getBoundingClientRect().top;\n const elementBottom = element.getBoundingClientRect().bottom;\n \n if (elementTop < window.innerHeight && elementBottom > 0) {\n element.style.opacity = '1';\n element.style.transform = 'translateY(0)';\n }\n });\n };\n\n // Initialize animation states\n document.querySelectorAll('.subject-card, .step').forEach(element => {\n element.style.opacity = '0';\n element.style.transform = 'translateY(20px)';\n element.style.transition = 'opacity 0.6s ease, transform 0.6s ease';\n });\n\n // Add scroll listener for animations\n window.addEventListener('scroll', animateOnScroll);\n animateOnScroll(); // Initial check for visible elements\n});\n\n---end---"
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 278,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 3860
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..a00feb1
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# tutor.scroll.pub
+Website generated by Claude from prompt: Create the best website for tutoring platform
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..5e75e34
--- /dev/null
+++ b/script.js
@@ -0,0 +1,72 @@
+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) {
+ navLinks.classList.remove('active');
+ target.scrollIntoView({
+ behavior: 'smooth'
+ });
+ }
+ });
+ });
+
+ // Search functionality
+ const searchBtn = document.querySelector('.search-btn');
+ const searchInput = document.querySelector('.search-container input');
+
+ searchBtn.addEventListener('click', () => {
+ const searchTerm = searchInput.value.trim();
+ if (searchTerm) {
+ // Add search functionality here
+ console.log(`Searching for: ${searchTerm}`);
+ searchInput.value = '';
+ }
+ });
+
+ // Add parallax effect to hero section
+ const hero = document.querySelector('#hero');
+ window.addEventListener('scroll', () => {
+ const scroll = window.pageYOffset;
+ hero.style.backgroundPosition = `center ${scroll * 0.5}px`;
+ });
+
+ // Animate elements on scroll
+ const animateOnScroll = () => {
+ const elements = document.querySelectorAll('.subject-card, .step');
+ elements.forEach(element => {
+ const elementTop = element.getBoundingClientRect().top;
+ const elementBottom = element.getBoundingClientRect().bottom;
+
+ if (elementTop < window.innerHeight && elementBottom > 0) {
+ element.style.opacity = '1';
+ element.style.transform = 'translateY(0)';
+ }
+ });
+ };
+
+ // Initialize animation states
+ document.querySelectorAll('.subject-card, .step').forEach(element => {
+ element.style.opacity = '0';
+ element.style.transform = 'translateY(20px)';
+ element.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
+ });
+
+ // Add scroll listener for animations
+ window.addEventListener('scroll', animateOnScroll);
+ animateOnScroll(); // Initial check for visible elements
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..96638ba
--- /dev/null
+++ b/style.css
@@ -0,0 +1,296 @@
+:root {
+ --primary-color: #4a90e2;
+ --secondary-color: #2c3e50;
+ --accent-color: #e74c3c;
+ --background-color: #f5f6fa;
+ --text-color: #2c3e50;
+ --white: #ffffff;
+ --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+* {
+ 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);
+ background-color: var(--background-color);
+}
+
+/* Header & Navigation */
+header {
+ background: var(--white);
+ box-shadow: var(--shadow);
+ position: fixed;
+ width: 100%;
+ top: 0;
+ z-index: 1000;
+}
+
+nav {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 1rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: var(--primary-color);
+}
+
+.nav-links {
+ display: flex;
+ list-style: none;
+ align-items: center;
+ gap: 2rem;
+}
+
+.nav-links a {
+ text-decoration: none;
+ color: var(--text-color);
+ font-weight: 500;
+ transition: color 0.3s ease;
+}
+
+.nav-links a:hover {
+ color: var(--primary-color);
+}
+
+.btn-primary {
+ background: var(--primary-color);
+ color: var(--white);
+ padding: 0.5rem 1.5rem;
+ border: none;
+ border-radius: 25px;
+ cursor: pointer;
+ transition: transform 0.3s ease;
+}
+
+.btn-primary:hover {
+ transform: translateY(-2px);
+}
+
+/* Hero Section */
+#hero {
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ padding: 2rem;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ color: var(--white);
+}
+
+#hero h1 {
+ font-size: 3.5rem;
+ margin-bottom: 1rem;
+ animation: fadeInUp 1s ease-out;
+}
+
+#hero p {
+ font-size: 1.2rem;
+ margin-bottom: 2rem;
+ animation: fadeInUp 1s ease-out 0.2s;
+}
+
+.search-container {
+ display: flex;
+ gap: 0.5rem;
+ max-width: 600px;
+ width: 100%;
+ animation: fadeInUp 1s ease-out 0.4s;
+}
+
+.search-container input {
+ flex: 1;
+ padding: 1rem;
+ border: none;
+ border-radius: 25px;
+ font-size: 1rem;
+}
+
+.search-btn {
+ padding: 1rem 2rem;
+ background: var(--accent-color);
+ color: var(--white);
+ border: none;
+ border-radius: 25px;
+ cursor: pointer;
+ transition: transform 0.3s ease;
+}
+
+.search-btn:hover {
+ transform: translateY(-2px);
+}
+
+/* Subjects Section */
+#subjects {
+ padding: 5rem 2rem;
+ background: var(--white);
+}
+
+.subjects-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ max-width: 1200px;
+ margin: 2rem auto;
+}
+
+.subject-card {
+ background: var(--white);
+ padding: 2rem;
+ border-radius: 10px;
+ box-shadow: var(--shadow);
+ text-align: center;
+ transition: transform 0.3s ease;
+}
+
+.subject-card:hover {
+ transform: translateY(-5px);
+}
+
+.subject-icon {
+ font-size: 3rem;
+ margin-bottom: 1rem;
+}
+
+/* How It Works Section */
+#how-it-works {
+ padding: 5rem 2rem;
+ background: var(--background-color);
+}
+
+.steps-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ max-width: 1200px;
+ margin: 2rem auto;
+}
+
+.step {
+ text-align: center;
+ padding: 2rem;
+}
+
+.step-number {
+ width: 50px;
+ height: 50px;
+ background: var(--primary-color);
+ color: var(--white);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 0 auto 1rem;
+ font-size: 1.5rem;
+ font-weight: bold;
+}
+
+/* Footer */
+footer {
+ background: var(--secondary-color);
+ color: var(--white);
+ padding: 3rem 2rem;
+}
+
+.footer-content {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 2rem;
+}
+
+.footer-section h4 {
+ margin-bottom: 1rem;
+}
+
+.footer-section ul {
+ list-style: none;
+}
+
+.footer-section a {
+ color: var(--white);
+ text-decoration: none;
+ transition: color 0.3s ease;
+}
+
+.footer-section a:hover {
+ color: var(--primary-color);
+}
+
+/* Animations */
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+/* Mobile Responsiveness */
+.mobile-menu {
+ display: none;
+}
+
+@media (max-width: 768px) {
+ .mobile-menu {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ background: none;
+ border: none;
+ cursor: pointer;
+ padding: 4px;
+ }
+
+ .mobile-menu span {
+ width: 25px;
+ height: 3px;
+ background: var(--text-color);
+ transition: 0.3s ease;
+ }
+
+ .nav-links {
+ display: none;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ background: var(--white);
+ flex-direction: column;
+ padding: 1rem;
+ box-shadow: var(--shadow);
+ }
+
+ .nav-links.active {
+ display: flex;
+ }
+
+ #hero h1 {
+ font-size: 2.5rem;
+ }
+
+ .search-container {
+ flex-direction: column;
+ }
+
+ .search-btn {
+ width: 100%;
+ }
+}