Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Professional Multipage Site</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* Smooth page transitions */ | |
| .page-container { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| transition: opacity 0.3s ease, transform 0.3s ease; | |
| height: 0; | |
| overflow: hidden; | |
| } | |
| .page-container.active { | |
| opacity: 1; | |
| transform: translateY(0); | |
| height: auto; | |
| } | |
| /* Professional color scheme */ | |
| :root { | |
| --primary: #2563eb; | |
| --secondary: #1e40af; | |
| --accent: #3b82f6; | |
| --text: #1f2937; | |
| --light: #f9fafb; | |
| } | |
| /* Custom underline animation for nav links */ | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: 0; | |
| left: 0; | |
| background-color: var(--accent); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .nav-link.active::after { | |
| width: 100%; | |
| background-color: var(--secondary); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans text-gray-800 bg-gray-50"> | |
| <!-- Header with Navigation --> | |
| <header class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="p-2 bg-blue-600 rounded-lg"> | |
| <i class="fas fa-cube text-white text-xl"></i> | |
| </div> | |
| <span class="text-xl font-bold text-gray-800">ProSite</span> | |
| </div> | |
| <!-- Desktop Navigation --> | |
| <nav class="hidden md:flex space-x-8"> | |
| <button onclick="showPage('page1')" class="nav-link text-gray-600 hover:text-blue-600 transition px-1 py-2"> | |
| <i class="fas fa-home mr-2"></i>Home | |
| </button> | |
| <button onclick="showPage('page2')" class="nav-link text-gray-600 hover:text-blue-600 transition px-1 py-2"> | |
| <i class="fas fa-briefcase mr-2"></i>Services | |
| </button> | |
| <button onclick="showPage('page3')" class="nav-link text-gray-600 hover:text-blue-600 transition px-1 py-2"> | |
| <i class="fas fa-envelope mr-2"></i>Contact | |
| </button> | |
| </nav> | |
| <!-- Mobile menu button --> | |
| <button class="md:hidden text-gray-600" onclick="toggleMobileMenu()"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Navigation --> | |
| <div id="mobile-menu" class="md:hidden hidden bg-white py-4 shadow-md"> | |
| <div class="container mx-auto px-6 flex flex-col space-y-3"> | |
| <button onclick="showPage('page1')" class="nav-link py-2 px-4 rounded-lg hover:bg-blue-50 flex items-center"> | |
| <i class="fas fa-home mr-3 w-5 text-center"></i>Home | |
| </button> | |
| <button onclick="showPage('page2')" class="nav-link py-2 px-4 rounded-lg hover:bg-blue-50 flex items-center"> | |
| <i class="fas fa-briefcase mr-3 w-5 text-center"></i>Services | |
| </button> | |
| <button onclick="showPage('page3')" class="nav-link py-2 px-4 rounded-lg hover:bg-blue-50 flex items-center"> | |
| <i class="fas fa-envelope mr-3 w-5 text-center"></i>Contact | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="min-h-screen"> | |
| <!-- Page 1 - Home --> | |
| <div id="page1" class="page-container active"> | |
| <section class="py-16 bg-gradient-to-r from-blue-600 to-blue-800 text-white"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Welcome to ProSite</h1> | |
| <p class="text-xl max-w-3xl mx-auto mb-10 opacity-90">We provide professional solutions for your digital needs with innovative approaches and cutting-edge technology.</p> | |
| <button onclick="showPage('page2')" class="bg-white text-blue-700 hover:bg-gray-100 px-8 py-3 rounded-lg font-medium transition-all transform hover:scale-105"> | |
| Explore Our Services <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </section> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Our Core Features</h2> | |
| <div class="grid md:grid-cols-3 gap-10"> | |
| <div class="bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition cursor-pointer border border-gray-100"> | |
| <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-rocket text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Fast Performance</h3> | |
| <p class="text-gray-600">Optimized solutions that ensure your applications run smoothly without any lag time.</p> | |
| </div> | |
| <div class="bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition cursor-pointer border border-gray-100"> | |
| <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-shield-alt text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Secure Solutions</h3> | |
| <p class="text-gray-600">Built with security in mind to protect your data and your customers' information.</p> | |
| </div> | |
| <div class="bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition cursor-pointer border border-gray-100"> | |
| <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-lightbulb text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Innovative Design</h3> | |
| <p class="text-gray-600">Modern, clean interfaces that provide intuitive user experiences across devices.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> | |
| <h2 class="text-3xl font-bold mb-6">About Our Company</h2> | |
| <p class="text-gray-600 mb-6 leading-relaxed">Founded in 2023, our company has been at the forefront of digital innovation, helping businesses transform their online presence with professional solutions tailored to their specific needs.</p> | |
| <p class="text-gray-600 mb-6 leading-relaxed">Our team of experts combines technical expertise with creative vision to deliver products that not only function flawlessly but also delight users.</p> | |
| <button onclick="showPage('page3')" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition inline-flex items-center"> | |
| Contact Us <i class="fas fa-chevron-right ml-2"></i> | |
| </button> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="bg-blue-600 bg-opacity-10 rounded-xl overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Our team working" class="w-full h-auto rounded-xl"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Page 2 - Services --> | |
| <div id="page2" class="page-container"> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <h1 class="text-4xl font-bold mb-12 text-center">Our Professional Services</h1> | |
| <div class="mb-16"> | |
| <div class="bg-blue-50 rounded-xl p-10 shadow-inner"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Web Development" class="rounded-xl shadow-lg"> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12"> | |
| <h2 class="text-2xl font-bold mb-4">Web Development</h2> | |
| <p class="text-gray-600 mb-6 leading-relaxed">We build responsive, high-performance websites that work seamlessly across all devices. Our development process focuses on clean code, optimized performance, and SEO-friendly architecture.</p> | |
| <div class="space-y-3"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle text-blue-600 mr-3"></i> | |
| <span>Custom CMS solutions</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle text-blue-600 mr-3"></i> | |
| <span>E-commerce platforms</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle text-blue-600 mr-3"></i> | |
| <span>API integration</span> | |
| </div> | |
| </div> | |
| <button class="mt-6 bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition inline-flex items-center"> | |
| Learn More <i class="fas fa-chevron-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-16"> | |
| <div class="bg-gray-50 rounded-xl p-10 shadow-inner"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 order-2 md:order-1"> | |
| <h2 class="text-2xl font-bold mb-4">Digital Marketing</h2> | |
| <p class="text-gray-600 mb-6 leading-relaxed">Our comprehensive digital marketing services help you reach the right audience, convert leads, and grow your business. We combine data-driven strategies with creative execution.</p> | |
| <div class="space-y-3"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle text-blue-600 mr-3"></i> | |
| <span>SEO optimization</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle text-blue-600 mr-3"></i> | |
| <span>PPC campaign management</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle text-blue-600 mr-3"></i> | |
| <span>Social media marketing</span> | |
| </div> | |
| </div> | |
| <button class="mt-6 bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition inline-flex items-center"> | |
| Learn More <i class="fas fa-chevron-right ml-2"></i> | |
| </button> | |
| </div> | |
| <div class="md:w-1/2 md:pr-12 order-1 md:order-2"> | |
| <img src="https://images.unsplash.com/photo-1498049794561-778396e79f3c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80" alt="Digital Marketing" class="rounded-xl shadow-lg"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 mb-16"> | |
| <div class="bg-white border border-gray-200 rounded-xl p-8 shadow-sm hover:shadow-md transition cursor-pointer"> | |
| <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-chart-line text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Analytics</h3> | |
| <p class="text-gray-600">Comprehensive data analysis to drive business decisions and measure campaign performance.</p> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-xl p-8 shadow-sm hover:shadow-md transition cursor-pointer"> | |
| <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-pencil-ruler text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Branding</h3> | |
| <p class="text-gray-600">Strategic brand development that resonates with your target audience and builds loyalty.</p> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-xl p-8 shadow-sm hover:shadow-md transition cursor-pointer"> | |
| <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-headset text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Support</h3> | |
| <p class="text-gray-600">Dedicated support team to ensure your systems run smoothly with minimal downtime.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Page 3 - Contact --> | |
| <div id="page3" class="page-container"> | |
| <section class="py-16 bg-gradient-to-b from-blue-50 to-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h1 class="text-4xl font-bold mb-4">Get In Touch</h1> | |
| <p class="text-gray-600 max-w-2xl mx-auto">We'd love to hear from you. Whether you have a question about our services, pricing, or anything else, our team is ready to answer all your questions.</p> | |
| </div> | |
| <div class="flex flex-col lg:flex-row gap-12"> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-white rounded-xl shadow-md p-8 md:p-10"> | |
| <h2 class="text-2xl font-semibold mb-6">Send us a message</h2> | |
| <form class="space-y-5"> | |
| <div class="grid md:grid-cols-2 gap-5"> | |
| <div> | |
| <label for="first-name" class="block text-gray-700 mb-2">First Name</label> | |
| <input type="text" id="first-name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="last-name" class="block text-gray-700 mb-2">Last Name</label> | |
| <input type="text" id="last-name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-gray-700 mb-2">Email Address</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="phone" class="block text-gray-700 mb-2">Phone Number</label> | |
| <input type="tel" id="phone" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="subject" class="block text-gray-700 mb-2">Subject</label> | |
| <select id="subject" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> | |
| <option value="">Select a subject</option> | |
| <option>General Inquiry</option> | |
| <option>Sales Question</option> | |
| <option>Support Request</option> | |
| <option>Partnership Opportunity</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-gray-700 mb-2">Your Message</label> | |
| <textarea id="message" rows="5" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-medium transition-all transform hover:scale-[1.01]"> | |
| Send Message <i class="fas fa-paper-plane ml-2"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-white rounded-xl shadow-md p-8 md:p-10"> | |
| <h2 class="text-2xl font-semibold mb-6">Contact Information</h2> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-5"> | |
| <i class="fas fa-map-marker-alt text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-medium mb-1">Our Office</h3> | |
| <p class="text-gray-600">123 Business Avenue<br>Tech City, TC 12345<br>United States</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-5"> | |
| <i class="fas fa-envelope text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-medium mb-1">Email Us</h3> | |
| <p class="text-gray-600">[email protected]<br>[email protected]</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-5"> | |
| <i class="fas fa-phone-alt text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-medium mb-1">Call Us</h3> | |
| <p class="text-gray-600">+1 (555) 123-4567<br>+1 (555) 987-6543</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10"> | |
| <h3 class="text-xl font-medium mb-4">Follow Us</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 hover:bg-blue-600 hover:text-white transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 hover:bg-blue-600 hover:text-white transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 hover:bg-blue-600 hover:text-white transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 hover:bg-blue-600 hover:text-white transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </main> | |
| <footer class="bg-gray-800 text-white py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid md:grid-cols-4 gap-10 mb-10"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <div class="p-2 bg-blue-600 rounded-lg mr-3"> | |
| <i class="fas fa-cube text-white"></i> | |
| </div> | |
| <span class="text-xl font-bold">ProSite</span> | |
| </div> | |
| <p class="text-gray-400 mb-4">Professional solutions for your digital needs with innovative approaches and cutting-edge technology.</p> | |
| <div class="flex space-x-3"> | |
| <a href="#" class="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center text-gray-300 hover:bg-blue-600 hover:text-white transition"> | |
| <i class="fab fa-facebook-f text-sm"></i> | |
| </a> | |
| <a href="#" class="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center text-gray-300 hover:bg-blue-600 hover:text-white transition"> | |
| <i class="fab fa-twitter text-sm"></i> | |
| </a> | |
| <a href="#" class="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center text-gray-300 hover:bg-blue-600 hover:text-white transition"> | |
| <i class="fab fa-linkedin-in text-sm"></i> | |
| </a> | |
| <a href="#" class="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center text-gray-300 hover:bg-blue-600 hover:text-white transition"> | |
| <i class="fab fa-instagram text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Quick Links</h3> | |
| <ul class="space-y-2"> | |
| <li><button onclick="showPage('page1')" class="text-gray-400 hover:text-white transition">Home</button></li> | |
| <li><button onclick="showPage('page2')" class="text-gray-400 hover:text-white transition">Services</button></li> | |
| <li><button onclick="showPage('page3')" class="text-gray-400 hover:text-white transition">Contact</button></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Services</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Web Development</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Digital Marketing</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">UI/UX Design</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">SEO Services</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Content Strategy</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Newsletter</h3> | |
| <p class="text-gray-400 mb-4">Subscribe to our newsletter for the latest updates and offers.</p> | |
| <form class="flex"> | |
| <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg w-full focus:outline-none text-gray-800"> | |
| <button type="submit" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-r-lg transition"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 pt-8 text-center"> | |
| <p class="text-gray-400">© 2023 ProSite. All rights reserved. | <a href="#" class="hover:text-white transition">Privacy Policy</a> | <a href="#" class="hover:text-white transition">Terms of Service</a></p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Function to show a specific page and hide others | |
| function showPage(pageId) { | |
| // Hide all pages | |
| document.querySelectorAll('.page-container').forEach(page => { | |
| page.classList.remove('active'); | |
| }); | |
| // Show the selected page with a delay to allow initial hiding | |
| setTimeout(() => { | |
| document.getElementById(pageId).classList.add('active'); | |
| }, 10); | |
| // Scroll to top | |
| window.scrollTo(0, 0); | |
| // Close mobile menu if open | |
| document.getElementById('mobile-menu').classList.add('hidden'); | |
| } | |
| // Function to toggle mobile menu | |
| function toggleMobileMenu() { | |
| document.getElementById('mobile-menu').classList.toggle('hidden'); | |
| } | |
| // Initialize the page (show page1 by default) | |
| document.addEventListener('DOMContentLoaded', function() { | |
| showPage('page1'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |