Parking Solutions Template
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ParkEase - Smart Parking Solutions</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="stylesheet" href="styles.css"> </head> <body> <!-- Header/Navigation --> <header class="header"> <div class="container"> <div class="logo"> <h1>Park<span>Ease</span></h1> </div> <nav class="navbar"> <ul> <li><a href="#home">Home</a></li> <li><a href="#features">Features</a></li> <li><a href="#solutions">Solutions</a></li> <li><a href="#pricing">Pricing</a></li> <li><a href="#locations">Locations</a></li> <li><a href="#testimonials">Testimonials</a></li> <li><a href="#faq">FAQ</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> <div class="mobile-menu-btn"> <i class="fas fa-bars"></i> </div> </div> </header> <!-- Hero Section --> <section id="home" class="hero"> <div class="container"> <div class="hero-content"> <h1>Smart Parking Solutions for Modern Cities</h1> <p>Revolutionize your parking experience with our advanced management system that saves time, reduces congestion, and increases revenue.</p> <div class="hero-buttons"> <a href="#contact" class="btn btn-primary">Request Demo</a> <a href="#pricing" class="btn btn-secondary">View Pricing</a> </div> </div> <div class="hero-image"> <img src="https://images.unsplash.com/photo-1544620347-c4fd4a3d5957?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Parking System"> </div> </div> </section> <!-- Stats Section --> <section class="stats"> <div class="container"> <div class="stats-grid"> <div class="stat-card"> <div class="stat-icon"> <i class="fas fa-car"></i> </div> <div class="stat-number" data-count="25000">0</div> <div class="stat-label">Parking Spaces Managed</div> </div> <div class="stat-card"> <div class="stat-icon"> <i class="fas fa-city"></i> </div> <div class="stat-number" data-count="150">0</div> <div class="stat-label">Cities Worldwide</div> </div> <div class="stat-card"> <div class="stat-icon"> <i class="fas fa-percentage"></i> </div> <div class="stat-number" data-count="95">0</div> <div class="stat-label">Customer Satisfaction</div> </div> <div class="stat-card"> <div class="stat-icon"> <i class="fas fa-clock"></i> </div> <div class="stat-number" data-count="40">0</div> <div class="stat-label">% Time Saved</div> </div> </div> </div> </section> <!-- Features Section --> <section id="features" class="features section-padding"> <div class="container"> <div class="section-title"> <h2>Key <span>Features</span></h2> <p>Discover what makes our parking management system stand out</p> </div> <div class="features-grid"> <div class="feature-card"> <div class="feature-icon"> <i class="fas fa-map-marked-alt"></i> </div> <h3>Real-time Availability</h3> <p>See available parking spots in real-time through our mobile app or digital signage.</p> </div> <div class="feature-card"> <div class="feature-icon"> <i class="fas fa-qrcode"></i> </div> <h3>Contactless Payments</h3> <p>Pay for parking seamlessly through QR codes or mobile payments.</p> </div> <div class="feature-card"> <div class="feature-icon"> <i class="fas fa-robot"></i> </div> <h3>AI Optimization</h3> <p>Our AI algorithms optimize space utilization and traffic flow.</p> </div> <div class="feature-card"> <div class="feature-icon"> <i class="fas fa-chart-line"></i> </div> <h3>Analytics Dashboard</h3> <p>Comprehensive reporting and analytics for parking operators.</p> </div> <div class="feature-card"> <div class="feature-icon"> <i class="fas fa-bell"></i> </div> <h3>Smart Alerts</h3> <p>Get notifications when your parking time is about to expire.</p> </div> <div class="feature-card"> <div class="feature-icon"> <i class="fas fa-camera"></i> </div> <h3>License Plate Recognition</h3> <p>Automated entry/exit with our advanced LPR technology.</p> </div> </div> </div> </section> <!-- Solutions Section --> <section id="solutions" class="solutions section-padding"> <div class="container"> <div class="section-title"> <h2>Our <span>Solutions</span></h2> <p>Tailored parking solutions for every need</p> </div> <div class="solutions-tabs"> <div class="tab-buttons"> <button class="tab-btn active" data-tab="commercial">Commercial</button> <button class="tab-btn" data-tab="residential">Residential</button> <button class="tab-btn" data-tab="municipal">Municipal</button> <button class="tab-btn" data-tab="airport">Airport</button> </div> <div class="tab-content"> <div class="tab-pane active" id="commercial"> <div class="solution-content"> <div class="solution-text"> <h3>Commercial Parking Solutions</h3> <p>Our commercial parking management system is designed for shopping malls, office buildings, and entertainment venues. It helps maximize revenue while improving customer experience.</p> <ul> <li><i class="fas fa-check"></i> Dynamic pricing based on demand</li> <li><i class="fas fa-check"></i> Integration with retail loyalty programs</li> <li><i class="fas fa-check"></i> Valet parking management</li> <li><i class="fas fa-check"></i> Monthly pass management</li> </ul> <a href="#contact" class="btn btn-primary">Learn More</a> </div> <div class="solution-image"> <img src="https://images.unsplash.com/photo-1486401899868-0e435ed85128?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Commercial Parking"> </div> </div> </div> <div class="tab-pane" id="residential"> <div class="solution-content"> <div class="solution-text"> <h3>Residential Parking Solutions</h3> <p>Manage parking for apartment complexes, condominiums, and gated communities with our residential solution that ensures security and convenience for residents.</p> <ul> <li><i class="fas fa-check"></i> Resident permit management</li> <li><i class="fas fa-check"></i> Visitor parking passes</li> <li><i class="fas fa-check"></i> Violation tracking</li> <li><i class="fas fa-check"></i> Guest pre-authorization</li> </ul> <a href="#contact" class="btn btn-primary">Learn More</a> </div> <div class="solution-image"> <img src="https://images.unsplash.com/photo-1605276374104-dee2a0ed3cd6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Residential Parking"> </div> </div> </div> <div class="tab-pane" id="municipal"> <div class="solution-content"> <div class="solution-text"> <h3>Municipal Parking Solutions</h3> <p>Our municipal parking system helps cities manage street parking, parking garages, and public lots while reducing congestion and increasing compliance.</p> <ul> <li><i class="fas fa-check"></i> Smart meter integration</li> <li><i class="fas fa-check"></i> Enforcement tools</li> <li><i class="fas fa-check"></i> Zone-based pricing</li> <li><i class="fas fa-check"></i> Event parking management</li> </ul> <a href="#contact" class="btn btn-primary">Learn More</a> </div> <div class="solution-image"> <img src="https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1413&q=80" alt="Municipal Parking"> </div> </div> </div> <div class="tab-pane" id="airport"> <div class="solution-content"> <div class="solution-text"> <h3>Airport Parking Solutions</h3> <p>Specialized parking management for airports with features tailored to the unique needs of travelers and airport operations.</p> <ul> <li><i class="fas fa-check"></i> Flight-aware parking</li> <li><i class="fas fa-check"></i> Long-term parking management</li> <li><i class="fas fa-check"></i> Shuttle tracking</li> <li><i class="fas fa-check"></i> Premium parking services</li> </ul> <a href="#contact" class="btn btn-primary">Learn More</a> </div> <div class="solution-image"> <img src="https://images.unsplash.com/photo-1436491865332-7a61a109cc05?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1474&q=80" alt="Airport Parking"> </div> </div> </div> </div> </div> </div> </section> <!-- Pricing Section --> <section id="pricing" class="pricing section-padding"> <div class="container"> <div class="section-title"> <h2>Pricing <span>Plans</span></h2> <p>Flexible pricing options for every parking need</p> </div> <div class="pricing-grid"> <div class="pricing-card"> <div class="pricing-header"> <h3>Basic</h3> <div class="price"> <span class="currency">$</span> <span class="amount">99</span> <span class="period">/month</span> </div> <p>For small parking lots (up to 50 spaces)</p> </div> <div class="pricing-features"> <ul> <li><i class="fas fa-check"></i> Real-time availability</li> <li><i class="fas fa-check"></i> Mobile payments</li> <li><i class="fas fa-check"></i> Basic reporting</li> <li><i class="fas fa-times"></i> License plate recognition</li> <li><i class="fas fa-times"></i> Dynamic pricing</li> </ul> </div> <a href="#contact" class="btn btn-secondary">Get Started</a> </div> <div class="pricing-card featured"> <div class="pricing-badge">Popular</div> <div class="pricing-header"> <h3>Professional</h3> <div class="price"> <span class="currency">$</span> <span class="amount">299</span> <span class="period">/month</span> </div> <p>For medium parking facilities (50-200 spaces)</p> </div> <div class="pricing-features"> <ul> <li><i class="fas fa-check"></i> All Basic features</li> <li><i class="fas fa-check"></i> License plate recognition</li> <li><i class="fas fa-check"></i> Advanced analytics</li> <li><i class="fas fa-check"></i> Dynamic pricing</li> <li><i class="fas fa-times"></i> Valet management</li> </ul> </div> <a href="#contact" class="btn btn-primary">Get Started</a> </div> <div class="pricing-card"> <div class="pricing-header"> <h3>Enterprise</h3> <div class="price"> <span class="currency">$</span> <span class="amount">599</span> <span class="period">/month</span> </div> <p>For large parking operations (200+ spaces)</p> </div> <div class="pricing-features"> <ul> <li><i class="fas fa-check"></i> All Professional features</li> <li><i class="fas fa-check"></i> Valet management</li> <li><i class="fas fa-check"></i> Custom integrations</li> <li><i class="fas fa-check"></i> Dedicated support</li> <li><i class="fas fa-check"></i> API access</li> </ul> </div> <a href="#contact" class="btn btn-secondary">Get Started</a> </div> </div> <div class="pricing-footer"> <p>Need a custom solution? <a href="#contact">Contact us</a> for enterprise pricing and custom deployments.</p> </div> </div> </section> <!-- Locations Section --> <section id="locations" class="locations section-padding"> <div class="container"> <div class="section-title"> <h2>Our <span>Locations</span></h2> <p>Find parking facilities using our system</p> </div> <div class="locations-map"> <img src="https://maps.googleapis.com/maps/api/staticmap?center=40.7128,-74.0060&zoom=12&size=800x400&maptype=roadmap&markers=color:red%7C40.7128,-74.0060&markers=color:red%7C40.7214,-74.0052&markers=color:red%7C40.7357,-74.0034&markers=color:red%7C40.7069,-74.0113&key=YOUR_API_KEY" alt="Parking Locations Map"> <div class="location-pins"> <div class="location-pin" style="top: 30%; left: 25%;"> <div class="pin-icon"></div> <div class="pin-info"> <h4>Downtown Parking Garage</h4> <p>500 spaces | 24/7 access</p> </div> </div> <div class="location-pin" style="top: 45%; left: 60%;"> <div class="pin-icon"></div> <div class="pin-info"> <h4>City Mall Parking</h4> <p>1200 spaces | Valet available</p> </div> </div> <div class="location-pin" style="top: 70%; left: 40%;"> <div class="pin-icon"></div> <div class="pin-info"> <h4>Central Station Parking</h4> <p>800 spaces | EV charging</p> </div> </div> </div> </div> <div class="locations-search"> <div class="search-box"> <input type="text" placeholder="Search by city or zip code"> <button class="btn btn-primary">Find Parking</button> </div> </div> </div> </section> <!-- Testimonials Section --> <section id="testimonials" class="testimonials section-padding"> <div class="container"> <div class="section-title"> <h2>Customer <span>Testimonials</span></h2> <p>What our clients say about our parking solutions</p> </div> <div class="testimonials-slider"> <div class="testimonial active"> <div class="testimonial-content"> <div class="quote-icon"> <i class="fas fa-quote-left"></i> </div> <p>"Implementing ParkEase has transformed our parking operations. Revenue is up 30% and customer complaints are down significantly. The real-time monitoring is a game-changer."</p> <div class="client-info"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="John Smith"> <div> <h4>John Smith</h4> <span>Parking Manager, City of Metropolis</span> </div> </div> </div> </div> <div class="testimonial"> <div class="testimonial-content"> <div class="quote-icon"> <i class="fas fa-quote-left"></i> </div> <p>"The mobile payment integration has been incredibly popular with our customers. We've seen a 40% reduction in payment processing time since switching to ParkEase."</p> <div class="client-info"> <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Johnson"> <div> <h4>Sarah Johnson</h4> <span>Operations Director, Urban Mall Group</span> </div> </div> </div> </div> <div class="testimonial"> <div class="testimonial-content"> <div class="quote-icon"> <i class="fas fa-quote-left"></i> </div> <p>"As a residential complex, we needed a system that could handle both resident and visitor parking seamlessly. ParkEase delivered exactly what we needed with minimal disruption."</p> <div class="client-info"> <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Michael Chen"> <div> <h4>Michael Chen</h4> <span>HOA President, Riverside Towers</span> </div> </div> </div> </div> <div class="slider-controls"> <button class="slider-prev"><i class="fas fa-chevron-left"></i></button> <div class="slider-dots"> <span class="dot active"></span> <span class="dot"></span> <span class="dot"></span> </div> <button class="slider-next"><i class="fas fa-chevron-right"></i></button> </div> </div> </div> </section> <!-- FAQ Section --> <section id="faq" class="faq section-padding"> <div class="container"> <div class="section-title"> <h2>Frequently Asked <span>Questions</span></h2> <p>Common questions about our parking solutions</p> </div> <div class="faq-accordion"> <div class="accordion-item active"> <div class="accordion-header"> <h3>How does the real-time parking availability work?</h3> <i class="fas fa-chevron-down"></i> </div> <div class="accordion-content"> <p>Our system uses a combination of sensors, cameras, and AI algorithms to detect parking space occupancy in real-time. This data is then displayed to users through our mobile app and digital signage at parking facilities.</p> </div> </div> <div class="accordion-item"> <div class="accordion-header"> <h3>What payment methods are supported?</h3> <i class="fas fa-chevron-down"></i> </div> <div class="accordion-content"> <p>We support all major credit/debit cards, mobile payment systems (Apple Pay, Google Pay), and QR code payments. Some locations also support contactless RFID cards.</p> </div> </div> <div class="accordion-item"> <div class="accordion-header"> <h3>Can the system integrate with our existing infrastructure?</h3> <i class="fas fa-chevron-down"></i> </div> <div class="accordion-content"> <p>Yes, our system is designed with open APIs that allow integration with existing parking equipment, payment systems, and building management systems.</p> </div> </div> <div class="accordion-item"> <div class="accordion-header"> <h3>How long does implementation typically take?</h3> <i class="fas fa-chevron-down"></i> </div> <div class="accordion-content"> <p>Implementation time varies based on the size and complexity of your parking operation. Most standard installations are completed within 2-4 weeks.</p> </div> </div> <div class="accordion-item"> <div class="accordion-header"> <h3>What kind of support do you provide?</h3> <i class="fas fa-chevron-down"></i> </div> <div class="accordion-content"> <p>We offer 24/7 technical support for all our clients. Our support team can be reached via phone, email, or through our online support portal.</p> </div> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="contact section-padding"> <div class="container"> <div class="section-title"> <h2>Contact <span>Us</span></h2> <p>Get in touch to discuss your parking needs</p> </div> <div class="contact-content"> <div class="contact-info"> <div class="info-box"> <div class="info-icon"> <i class="fas fa-map-marker-alt"></i> </div> <div class="info-text"> <h3>Address</h3> <p>123 Parking Plaza, Suite 500</p> <p>Urban City, UC 12345</p> </div> </div> <div class="info-box"> <div class="info-icon"> <i class="fas fa-phone-alt"></i> </div> <div class="info-text"> <h3>Phone</h3> <p>+1 (555) 123-4567</p> <p>+1 (555) 765-4321</p> </div> </div> <div class="info-box"> <div class="info-icon"> <i class="fas fa-envelope"></i> </div> <div class="info-text"> <h3>Email</h3> <p>info@parkease.com</p> <p>sales@parkease.com</p> </div> </div> <div class="info-box"> <div class="info-icon"> <i class="fas fa-clock"></i> </div> <div class="info-text"> <h3>Working Hours</h3> <p>Monday - Friday: 8:00 AM - 6:00 PM</p> <p>Saturday: 9:00 AM - 2:00 PM</p> </div> </div> </div> <div class="contact-form"> <form id="contactForm"> <div class="form-group"> <input type="text" id="name" placeholder="Your Name" required> </div> <div class="form-group"> <input type="email" id="email" placeholder="Your Email" required> </div> <div class="form-group"> <input type="text" id="company" placeholder="Company Name"> </div> <div class="form-group"> <select id="interest" required> <option value="">I'm interested in...</option> <option value="commercial">Commercial Parking Solution</option> <option value="residential">Residential Parking Solution</option> <option value="municipal">Municipal Parking Solution</option> <option value="airport">Airport Parking Solution</option> <option value="other">Other</option> </select> </div> <div class="form-group"> <textarea id="message" rows="5" placeholder="Your Message" required></textarea> </div> <button type="submit" class="btn btn-primary">Send Message</button> </form> </div> </div> </div> </section> <!-- Footer --> <footer class="footer"> <div class="container"> <div class="footer-content"> <div class="footer-about"> <h3>ParkEase</h3> <p>Innovative parking solutions for smarter cities and businesses.</p> <div class="footer-social"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-linkedin-in"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> </div> </div> <div class="footer-links"> <h3>Quick Links</h3> <ul> <li><a href="#home">Home</a></li> <li><a href="#features">Features</a></li> <li><a href="#solutions">Solutions</a></li> <li><a href="#pricing">Pricing</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> <div class="footer-solutions"> <h3>Solutions</h3> <ul> <li><a href="#">Commercial Parking</a></li> <li><a href="#">Residential Parking</a></li> <li><a href="#">Municipal Parking</a></li> <li><a href="#">Airport Parking</a></li> <li><a href="#">Event Parking</a></li> </ul> </div> <div class="footer-newsletter"> <h3>Newsletter</h3> <p>Subscribe to our newsletter for the latest updates and parking insights.</p> <form class="newsletter-form"> <input type="email" placeholder="Your Email" required> <button type="submit"><i class="fas fa-paper-plane"></i></button> </form> </div> </div> </div> <div class="footer-bottom"> <div class="container"> <p>© 2023 ParkEase. All Rights Reserved.</p> <div class="footer-bottom-links"> <a href="#">Privacy Policy</a> <a href="#">Terms of Service</a> <a href="#">Sitemap</a> </div> </div> </div> </footer> <script src="script.js"></script> </body> </html>
CSS
/* Global Styles */ :root { --primary-color: #4285f4; --secondary-color: #333; --accent-color: #f8f9fa; --light-color: #f8f9fa; --dark-color: #212529; --text-color: #555; --white: #fff; --gray: #6c757d; --light-gray: #e9ecef; --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Roboto', sans-serif; line-height: 1.6; color: var(--text-color); overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; color: var(--secondary-color); line-height: 1.2; } a { text-decoration: none; color: inherit; transition: var(--transition); } ul { list-style: none; } img { max-width: 100%; height: auto; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 15px; } .btn { display: inline-block; padding: 12px 30px; border-radius: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; transition: var(--transition); border: none; cursor: pointer; font-size: 14px; } .btn-primary { background-color: var(--primary-color); color: var(--white); } .btn-primary:hover { background-color: #3367d6; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(66, 133, 244, 0.3); } .btn-secondary { background-color: transparent; color: var(--primary-color); border: 2px solid var(--primary-color); } .btn-secondary:hover { background-color: var(--primary-color); color: var(--white); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(66, 133, 244, 0.3); } .section-padding { padding: 80px 0; } .section-title { text-align: center; margin-bottom: 50px; } .section-title h2 { font-size: 36px; margin-bottom: 15px; } .section-title h2 span { color: var(--primary-color); } .section-title p { font-size: 18px; color: var(--gray); } /* Header Styles */ .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background-color: var(--white); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transition: var(--transition); } .header.scrolled { background-color: rgba(255, 255, 255, 0.95); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); } .header .container { display: flex; justify-content: space-between; align-items: center; padding: 20px 15px; } .logo h1 { font-size: 28px; color: var(--secondary-color); font-weight: 700; } .logo h1 span { color: var(--primary-color); } .navbar ul { display: flex; } .navbar ul li { margin-left: 30px; } .navbar ul li a { font-weight: 600; font-size: 16px; position: relative; } .navbar ul li a::after { content: ''; position: absolute; width: 0; height: 2px; background-color: var(--primary-color); bottom: -5px; left: 0; transition: var(--transition); } .navbar ul li a:hover::after { width: 100%; } .navbar ul li a:hover { color: var(--primary-color); } .mobile-menu-btn { display: none; font-size: 24px; cursor: pointer; color: var(--dark-color); } /* Hero Section */ .hero { padding-top: 100px; background-color: var(--accent-color); } .hero .container { display: flex; align-items: center; min-height: calc(100vh - 100px); gap: 50px; } .hero-content { flex: 1; } .hero-image { flex: 1; } .hero h1 { font-size: 48px; margin-bottom: 20px; line-height: 1.2; } .hero p { font-size: 18px; margin-bottom: 30px; max-width: 500px; } .hero-buttons { display: flex; gap: 20px; } .hero-image img { border-radius: 10px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); } /* Stats Section */ .stats { background-color: var(--primary-color); color: var(--white); padding: 60px 0; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; } .stat-card { text-align: center; padding: 30px; background-color: rgba(255, 255, 255, 0.1); border-radius: 8px; transition: var(--transition); } .stat-card:hover { transform: translateY(-10px); background-color: rgba(255, 255, 255, 0.2); } .stat-icon { font-size: 40px; margin-bottom: 20px; color: var(--white); } .stat-number { font-size: 42px; font-weight: 700; margin-bottom: 10px; } .stat-label { font-size: 16px; opacity: 0.9; } /* Features Section */ .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .feature-card { background-color: var(--white); border-radius: 8px; padding: 40px 30px; text-align: center; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: var(--transition); } .feature-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .feature-icon { width: 80px; height: 80px; background-color: rgba(66, 133, 244, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary-color); font-size: 30px; margin: 0 auto 25px; transition: var(--transition); } .feature-card:hover .feature-icon { background-color: var(--primary-color); color: var(--white); } .feature-card h3 { font-size: 22px; margin-bottom: 15px; } .feature-card p { font-size: 15px; color: var(--gray); } /* Solutions Section */ .solutions { background-color: var(--accent-color); } .solutions-tabs { background-color: var(--white); border-radius: 8px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); } .tab-buttons { display: flex; border-bottom: 1px solid var(--light-gray); flex-wrap: wrap; } .tab-btn { padding: 15px 25px; background-color: transparent; border: none; cursor: pointer; font-weight: 600; color: var(--gray); transition: var(--transition); position: relative; } .tab-btn::after { content: ''; position: absolute; width: 0; height: 3px; background-color: var(--primary-color); bottom: -1px; left: 0; transition: var(--transition); } .tab-btn:hover, .tab-btn.active { color: var(--primary-color); } .tab-btn.active::after { width: 100%; } .tab-content { padding: 30px; } .tab-pane { display: none; } .tab-pane.active { display: block; } .solution-content { display: flex; gap: 40px; } .solution-text { flex: 1; } .solution-image { flex: 1; border-radius: 8px; overflow: hidden; } .solution-image img { width: 100%; height: auto; } .solution-text h3 { font-size: 24px; margin-bottom: 20px; color: var(--primary-color); } .solution-text p { margin-bottom: 15px; } .solution-text ul { margin-bottom: 25px; } .solution-text ul li { margin-bottom: 10px; padding-left: 25px; position: relative; } .solution-text ul li i { position: absolute; left: 0; color: var(--primary-color); } /* Pricing Section */ .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .pricing-card { background-color: var(--white); border-radius: 8px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: var(--transition); position: relative; } .pricing-card.featured { border: 2px solid var(--primary-color); transform: translateY(-10px); } .pricing-badge { position: absolute; top: 15px; right: 15px; background-color: var(--primary-color); color: var(--white); padding: 5px 15px; border-radius: 4px; font-size: 12px; font-weight: 600; } .pricing-header { padding: 30px; text-align: center; background-color: var(--accent-color); } .pricing-header h3 { font-size: 22px; margin-bottom: 15px; } .price { margin-bottom: 15px; } .price .currency { font-size: 24px; vertical-align: top; line-height: 1; } .price .amount { font-size: 48px; font-weight: 700; line-height: 1; } .price .period { font-size: 16px; color: var(--gray); } .pricing-header p { font-size: 14px; } .pricing-features { padding: 30px; } .pricing-features ul li { margin-bottom: 15px; display: flex; align-items: center; gap: 10px; } .pricing-features ul li i.fa-check { color: #4caf50; } .pricing-features ul li i.fa-times { color: #f44336; } .pricing-card .btn { display: block; margin: 0 30px 30px; text-align: center; } .pricing-footer { text-align: center; margin-top: 30px; } .pricing-footer a { color: var(--primary-color); font-weight: 600; } /* Locations Section */ .locations-map { position: relative; height: 500px; border-radius: 8px; overflow: hidden; margin-bottom: 30px; } .locations-map img { width: 100%; height: 100%; object-fit: cover; } .location-pins { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .location-pin { position: absolute; transform: translate(-50%, -50%); cursor: pointer; } .pin-icon { width: 20px; height: 20px; background-color: var(--primary-color); border-radius: 50%; border: 3px solid var(--white); box-shadow: 0 0 0 3px var(--primary-color); margin: 0 auto; transition: var(--transition); } .location-pin:hover .pin-icon { transform: scale(1.3); } .pin-info { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); background-color: var(--white); padding: 15px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); width: 200px; opacity: 0; visibility: hidden; transition: var(--transition); } .location-pin:hover .pin-info { opacity: 1; visibility: visible; bottom: 40px; } .pin-info h4 { font-size: 16px; margin-bottom: 5px; } .pin-info p { font-size: 14px; color: var(--gray); } .locations-search { display: flex; justify-content: center; } .search-box { display: flex; max-width: 600px; width: 100%; } .search-box input { flex: 1; padding: 12px 15px; border: 1px solid var(--light-gray); border-radius: 4px 0 0 4px; font-family: inherit; font-size: 16px; } .search-box .btn { border-radius: 0 4px 4px 0; } /* Testimonials Section */ .testimonials-slider { position: relative; max-width: 800px; margin: 0 auto; } .testimonial { display: none; padding: 30px; background-color: var(--white); border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); } .testimonial.active { display: block; } .testimonial-content { position: relative; padding: 30px; } .quote-icon { position: absolute; top: 0; left: 0; font-size: 60px; color: rgba(66, 133, 244, 0.1); line-height: 1; } .testimonial p { font-size: 18px; font-style: italic; margin-bottom: 30px; position: relative; z-index: 1; } .client-info { display: flex; align-items: center; } .client-info img { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; margin-right: 20px; } .client-info h4 { font-size: 18px; margin-bottom: 5px; } .client-info span { color: var(--gray); font-size: 14px; } .slider-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; } .slider-prev, .slider-next { background-color: transparent; border: none; font-size: 20px; color: var(--primary-color); cursor: pointer; transition: var(--transition); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .slider-prev:hover, .slider-next:hover { background-color: rgba(66, 133, 244, 0.1); } .slider-dots { display: flex; gap: 10px; } .dot { width: 12px; height: 12px; border-radius: 50%; background-color: var(--light-gray); cursor: pointer; transition: var(--transition); } .dot.active { background-color: var(--primary-color); } /* FAQ Section */ .faq-accordion { max-width: 800px; margin: 0 auto; } .accordion-item { margin-bottom: 15px; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } .accordion-item.active .accordion-content { display: block; } .accordion-item.active .accordion-header i { transform: rotate(180deg); } .accordion-header { background-color: var(--white); padding: 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: var(--transition); } .accordion-header:hover { background-color: var(--accent-color); } .accordion-header h3 { font-size: 18px; margin-bottom: 0; } .accordion-header i { transition: var(--transition); } .accordion-content { display: none; padding: 0 20px 20px; background-color: var(--white); font-size: 15px; } /* Contact Section */ .contact-content { display: flex; gap: 50px; } .contact-info { flex: 1; } .contact-form { flex: 1; } .info-box { display: flex; margin-bottom: 30px; } .info-icon { width: 60px; height: 60px; background-color: rgba(66, 133, 244, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary-color); font-size: 20px; margin-right: 20px; flex-shrink: 0; } .info-text h3 { font-size: 20px; margin-bottom: 10px; } .info-text p { font-size: 15px; } .form-group { margin-bottom: 20px; } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 12px 15px; border: 1px solid var(--light-gray); border-radius: 4px; font-family: inherit; font-size: 16px; transition: var(--transition); } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.2); } .form-group textarea { resize: vertical; min-height: 120px; } /* Footer */ .footer { background-color: var(--secondary-color); color: var(--white); padding-top: 80px; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 60px; } .footer-about h3 { font-size: 24px; margin-bottom: 20px; color: var(--white); } .footer-about p { margin-bottom: 20px; opacity: 0.8; } .footer-social { display: flex; gap: 15px; } .footer-social a { width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); transition: var(--transition); } .footer-social a:hover { background-color: var(--primary-color); } .footer-links h3, .footer-solutions h3, .footer-newsletter h3 { font-size: 20px; margin-bottom: 25px; color: var(--white); position: relative; padding-bottom: 10px; } .footer-links h3::after, .footer-solutions h3::after, .footer-newsletter h3::after { content: ''; position: absolute; width: 50px; height: 2px; background-color: var(--primary-color); bottom: 0; left: 0; } .footer-links ul li, .footer-solutions ul li { margin-bottom: 12px; } .footer-links ul li a, .footer-solutions ul li a { opacity: 0.8; transition: var(--transition); } .footer-links ul li a:hover, .footer-solutions ul li a:hover { opacity: 1; color: var(--primary-color); padding-left: 5px; } .footer-newsletter p { opacity: 0.8; margin-bottom: 20px; } .newsletter-form { display: flex; } .newsletter-form input { flex: 1; padding: 12px 15px; border: none; border-radius: 4px 0 0 4px; font-family: inherit; } .newsletter-form button { background-color: var(--primary-color); color: var(--white); border: none; padding: 0 20px; border-radius: 0 4px 4px 0; cursor: pointer; transition: var(--transition); } .newsletter-form button:hover { background-color: #3367d6; } .footer-bottom { background-color: rgba(0, 0, 0, 0.2); padding: 20px 0; text-align: center; } .footer-bottom p { opacity: 0.8; font-size: 14px; margin-bottom: 0; } .footer-bottom-links { margin-top: 10px; } .footer-bottom-links a { opacity: 0.8; font-size: 14px; margin: 0 10px; transition: var(--transition); } .footer-bottom-links a:hover { opacity: 1; color: var(--primary-color); } /* Responsive Styles */ @media (max-width: 992px) { .hero .container { flex-direction: column; text-align: center; padding-top: 50px; padding-bottom: 50px; } .hero h1 { font-size: 40px; } .hero p { margin-left: auto; margin-right: auto; } .hero-buttons { justify-content: center; } .solution-content { flex-direction: column; } .contact-content { flex-direction: column; } } @media (max-width: 768px) { .navbar { position: fixed; top: 80px; left: -100%; width: 100%; height: calc(100vh - 80px); background-color: var(--white); transition: var(--transition); padding: 30px; overflow-y: auto; } .navbar.active { left: 0; } .navbar ul { flex-direction: column; } .navbar ul li { margin: 0 0 20px 0; } .mobile-menu-btn { display: block; } .hero h1 { font-size: 32px; } .hero p { font-size: 16px; } .hero-buttons { flex-direction: column; gap: 15px; } .btn { width: 100%; } .section-title h2 { font-size: 30px; } .tab-buttons { flex-direction: column; } .tab-btn { text-align: left; border-bottom: 1px solid var(--light-gray); } .tab-btn::after { display: none; } .locations-map { height: 400px; } } @media (max-width: 576px) { .hero { padding-top: 80px; } .section-padding { padding: 60px 0; } .stats-grid { grid-template-columns: 1fr; } .pricing-grid { grid-template-columns: 1fr; } .pricing-card.featured { transform: none; } .footer-content { grid-template-columns: 1fr; } }
JavaScript
document.addEventListener('DOMContentLoaded', function() { // Mobile Menu Toggle const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); const navbar = document.querySelector('.navbar'); mobileMenuBtn.addEventListener('click', function() { navbar.classList.toggle('active'); this.querySelector('i').classList.toggle('fa-times'); }); // Close mobile menu when clicking on a link document.querySelectorAll('.navbar ul li a').forEach(link => { link.addEventListener('click', function() { navbar.classList.remove('active'); mobileMenuBtn.querySelector('i').classList.remove('fa-times'); }); }); // Header scroll effect window.addEventListener('scroll', function() { const header = document.querySelector('.header'); if (window.scrollY > 100) { header.classList.add('scrolled'); } else { header.classList.remove('scrolled'); } }); // Stats Counter Animation const statNumbers = document.querySelectorAll('.stat-number'); const statsSection = document.querySelector('.stats'); function animateStats() { const statsPosition = statsSection.getBoundingClientRect().top; const screenPosition = window.innerHeight / 1.3; if (statsPosition < screenPosition) { statNumbers.forEach(stat => { const target = parseInt(stat.getAttribute('data-count')); const speed = 200; const count = parseInt(stat.textContent); const increment = Math.ceil(target / speed); if (count < target) { stat.textContent = (count + increment).toString(); setTimeout(animateStats, 1); } else { stat.textContent = target.toString(); } }); } } window.addEventListener('scroll', animateStats); // Solutions Tabs const tabButtons = document.querySelectorAll('.tab-btn'); const tabPanes = document.querySelectorAll('.tab-pane'); tabButtons.forEach(button => { button.addEventListener('click', function() { // Remove active class from all buttons and panes tabButtons.forEach(btn => btn.classList.remove('active')); tabPanes.forEach(pane => pane.classList.remove('active')); // Add active class to clicked button this.classList.add('active'); // Show corresponding tab pane const tabId = this.getAttribute('data-tab'); document.getElementById(tabId).classList.add('active'); }); }); // Testimonials Slider const testimonials = document.querySelectorAll('.testimonial'); const dots = document.querySelectorAll('.dot'); const prevBtn = document.querySelector('.slider-prev'); const nextBtn = document.querySelector('.slider-next'); let currentIndex = 0; function showTestimonial(index) { testimonials.forEach(testimonial => testimonial.classList.remove('active')); dots.forEach(dot => dot.classList.remove('active')); testimonials[index].classList.add('active'); dots[index].classList.add('active'); currentIndex = index; } dots.forEach((dot, index) => { dot.addEventListener('click', () => showTestimonial(index)); }); prevBtn.addEventListener('click', () => { currentIndex = (currentIndex - 1 + testimonials.length) % testimonials.length; showTestimonial(currentIndex); }); nextBtn.addEventListener('click', () => { currentIndex = (currentIndex + 1) % testimonials.length; showTestimonial(currentIndex); }); // Auto-rotate testimonials let testimonialInterval = setInterval(() => { currentIndex = (currentIndex + 1) % testimonials.length; showTestimonial(currentIndex); }, 5000); // Pause auto-rotation on hover const sliderContainer = document.querySelector('.testimonials-slider'); sliderContainer.addEventListener('mouseenter', () => { clearInterval(testimonialInterval); }); sliderContainer.addEventListener('mouseleave', () => { testimonialInterval = setInterval(() => { currentIndex = (currentIndex + 1) % testimonials.length; showTestimonial(currentIndex); }, 5000); }); // FAQ Accordion const accordionItems = document.querySelectorAll('.accordion-item'); accordionItems.forEach(item => { const header = item.querySelector('.accordion-header'); header.addEventListener('click', () => { const currentlyActive = item.classList.contains('active'); // Close all items accordionItems.forEach(i => i.classList.remove('active')); // Open current item if it wasn't active if (!currentlyActive) { item.classList.add('active'); } }); }); // Form submission const contactForm = document.getElementById('contactForm'); if (contactForm) { contactForm.addEventListener('submit', function(e) { e.preventDefault(); // Get form values const name = document.getElementById('name').value; const email = document.getElementById('email').value; const company = document.getElementById('company').value; const interest = document.getElementById('interest').value; const message = document.getElementById('message').value; // Here you would typically send the form data to a server // For this example, we'll just log it and show an alert console.log('Form submitted:', { name, email, company, interest, message }); alert('Thank you for your message! We will contact you shortly to discuss your parking needs.'); contactForm.reset(); }); } // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); if (targetId === '#') return; const targetElement = document.querySelector(targetId); if (targetElement) { const headerHeight = document.querySelector('.header').offsetHeight; const targetPosition = targetElement.offsetTop - headerHeight; window.scrollTo({ top: targetPosition, behavior: 'smooth' }); } }); }); // Initialize the first testimonial showTestimonial(0); // Trigger stats animation on page load if stats are visible animateStats(); });
Output Preview
Desktop
Mobile
Fullscreen