FiberLink Pro HighSpeed Broadband Internet
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>FiberLink Pro | High-Speed Broadband Internet | Reliable Connectivity Solutions</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet"> </head> <body> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-light fixed-top navbar-custom"> <div class="container"> <a class="navbar-brand tech-font" href="#home"> FiberLink Pro</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ms-auto"> <li class="nav-item"> <a class="nav-link" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#plans">Plans</a> </li> <li class="nav-item"> <a class="nav-link" href="#services">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li> <li class="nav-item"> <button class="btn btn-connect" onclick="openSpeedTest()"> <i class="fas fa-tachometer-alt me-2"></i>Speed Test </button> </li> </ul> </div> </div> </nav> <!-- Hero Section --> <section id="home" class="hero-section"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-7"> <div class="hero-content"> <div class="hero-badge"> Ultra-Fast Fiber Internet</div> <h1 class="hero-title tech-font">FiberLink Pro</h1> <p class="hero-subtitle">Experience lightning-fast broadband internet with our fiber-optic network. Reliable connectivity, unlimited data, and 24/7 support for homes and businesses.</p> <div class="hero-features"> <span class="feature-badge">Fiber Optic</span> <span class="feature-badge">Unlimited Data</span> <span class="feature-badge">24/7 Support</span> </div> <div class="hero-buttons"> <a href="#plans" class="btn btn-custom btn-primary-custom">View Plans</a> <a href="#coverage" class="btn btn-custom btn-secondary-custom">Check Coverage</a> </div> </div> </div> <div class="col-lg-5"> <div class="hero-image text-center"> <div class="network-showcase"> <i class="fas fa-wifi"></i> </div> </div> </div> </div> </div> </section> <!-- Plans Section --> <section id="plans" class="plans-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll tech-font">Internet Plans</h2> <p class="section-subtitle animate-on-scroll">Choose the perfect broadband plan for your needs with our high-speed fiber internet packages</p> </div> </div> <div class="plans-grid"> <div class="plan-card animate-on-scroll" onclick="selectPlan('Basic Plan')"> <div class="plan-header"> <div class="plan-speed">50 Mbps</div> <div class="plan-type">Basic Plan</div> <div class="plan-overlay"> <a href="#" class="plan-btn">Select Plan</a> </div> </div> <div class="plan-content"> <h4 class="plan-name">Home Basic</h4> <p class="plan-description">Perfect for light internet usage, streaming, and browsing</p> <div class="plan-price">$39.99<span style="font-size: 1rem; font-weight: 400;">/month</span></div> <ul class="plan-features"> <li>50 Mbps download speed</li> <li>10 Mbps upload speed</li> <li>Unlimited data usage</li> <li>Free modem rental</li> <li>24/7 customer support</li> <li>No contract required</li> </ul> </div> </div> <div class="plan-card animate-on-scroll" onclick="selectPlan('Standard Plan')"> <div class="plan-header"> <div class="plan-speed">200 Mbps</div> <div class="plan-type">Standard Plan</div> <div class="plan-overlay"> <a href="#" class="plan-btn">Select Plan</a> </div> </div> <div class="plan-content"> <h4 class="plan-name">Home Standard</h4> <p class="plan-description">Ideal for families with multiple devices and HD streaming</p> <div class="plan-price">$59.99<span style="font-size: 1rem; font-weight: 400;">/month</span></div> <ul class="plan-features"> <li>200 Mbps download speed</li> <li>25 Mbps upload speed</li> <li>Unlimited data usage</li> <li>Free Wi-Fi router included</li> <li>Priority customer support</li> <li>Free installation</li> </ul> </div> </div> <div class="plan-card animate-on-scroll" onclick="selectPlan('Premium Plan')"> <div class="plan-header"> <div class="plan-speed">500 Mbps</div> <div class="plan-type">Premium Plan</div> <div class="plan-overlay"> <a href="#" class="plan-btn">Select Plan</a> </div> </div> <div class="plan-content"> <h4 class="plan-name">Home Premium</h4> <p class="plan-description">Perfect for power users, gaming, and 4K streaming</p> <div class="plan-price">$89.99<span style="font-size: 1rem; font-weight: 400;">/month</span></div> <ul class="plan-features"> <li>500 Mbps download speed</li> <li>50 Mbps upload speed</li> <li>Unlimited data usage</li> <li>Premium Wi-Fi 6 router</li> <li>VIP customer support</li> <li>Free professional setup</li> </ul> </div> </div> <div class="plan-card animate-on-scroll" onclick="selectPlan('Business Plan')"> <div class="plan-header"> <div class="plan-speed">1 Gbps</div> <div class="plan-type">Business Plan</div> <div class="plan-overlay"> <a href="#" class="plan-btn">Select Plan</a> </div> </div> <div class="plan-content"> <h4 class="plan-name">Business Pro</h4> <p class="plan-description">Enterprise-grade internet for businesses and offices</p> <div class="plan-price">$149.99<span style="font-size: 1rem; font-weight: 400;">/month</span></div> <ul class="plan-features"> <li>1 Gbps symmetrical speed</li> <li>Static IP addresses</li> <li>Unlimited data usage</li> <li>Business-grade equipment</li> <li>Dedicated support team</li> <li>SLA guarantee</li> </ul> </div> </div> </div> </div> </section> <!-- Services Section --> <section id="services" class="services-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll tech-font">Our Services</h2> <p class="section-subtitle animate-on-scroll">Comprehensive broadband solutions and support services for all your connectivity needs</p> </div> </div> <div class="services-grid"> <div class="service-card animate-on-scroll" onclick="exploreService('Fiber Internet')"> <div class="service-icon"> <i class="fas fa-ethernet"></i> </div> <h4 class="service-name">Fiber Internet</h4> <p class="service-description">Ultra-fast fiber-optic internet with speeds up to 1 Gbps</p> <div class="service-features">Fiber Optic Technology</div> </div> <div class="service-card animate-on-scroll" onclick="exploreService('Wi-Fi Solutions')"> <div class="service-icon"> <i class="fas fa-wifi"></i> </div> <h4 class="service-name">Wi-Fi Solutions</h4> <p class="service-description">Professional Wi-Fi setup and mesh network installation</p> <div class="service-features">Whole Home Coverage</div> </div> <div class="service-card animate-on-scroll" onclick="exploreService('Business Internet')"> <div class="service-icon"> <i class="fas fa-building"></i> </div> <h4 class="service-name">Business Internet</h4> <p class="service-description">Dedicated business connections with SLA guarantees</p> <div class="service-features">Enterprise Grade</div> </div> <div class="service-card animate-on-scroll" onclick="exploreService('Technical Support')"> <div class="service-icon"> <i class="fas fa-headset"></i> </div> <h4 class="service-name">Technical Support</h4> <p class="service-description">24/7 customer support and technical assistance</p> <div class="service-features">Round-the-Clock</div> </div> <div class="service-card animate-on-scroll" onclick="exploreService('Installation')"> <div class="service-icon"> <i class="fas fa-tools"></i> </div> <h4 class="service-name">Installation</h4> <p class="service-description">Professional installation and equipment setup</p> <div class="service-features">Expert Technicians</div> </div> <div class="service-card animate-on-scroll" onclick="exploreService('Network Security')"> <div class="service-icon"> <i class="fas fa-shield-alt"></i> </div> <h4 class="service-name">Network Security</h4> <p class="service-description">Advanced security features and threat protection</p> <div class="service-features">Secure Connection</div> </div> </div> </div> </section> <!-- Coverage Section --> <section id="coverage" class="coverage-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll tech-font">Network Coverage</h2> <p class="section-subtitle animate-on-scroll">Extensive fiber network coverage across multiple cities and regions</p> </div> </div> <div class="coverage-content animate-on-scroll"> <div class="coverage-info"> <h3 class="coverage-title tech-font">Nationwide Network</h3> <p class="coverage-description">Our state-of-the-art fiber-optic network spans across major metropolitan areas, providing reliable high-speed internet to millions of customers. We're continuously expanding our coverage to reach more communities.</p> <div class="coverage-stats"> <div class="stat-item"> <span class="stat-number">500K+</span> <span class="stat-label">Connected Homes</span> </div> <div class="stat-item"> <span class="stat-number">50+</span> <span class="stat-label">Cities Covered</span> </div> <div class="stat-item"> <span class="stat-number">99.9%</span> <span class="stat-label">Network Uptime</span> </div> <div class="stat-item"> <span class="stat-number">24/7</span> <span class="stat-label">Support Available</span> </div> </div> <button class="btn btn-custom btn-primary-custom" onclick="checkCoverage()"> <i class="fas fa-map-marker-alt me-2"></i>Check Your Area </button> </div> <div class="coverage-map"> <i class="fas fa-map"></i> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="contact-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll tech-font">Contact Us</h2> <p class="section-subtitle animate-on-scroll">Get in touch for new connections, support, or business partnerships</p> </div> </div> <div class="contact-content animate-on-scroll"> <div class="contact-info"> <h3 class="contact-title tech-font">FiberLink Pro</h3> <p class="contact-description">Leading broadband service provider delivering ultra-fast fiber internet, reliable connectivity, and exceptional customer service. Connect with us for all your internet needs.</p> <div class="contact-methods"> <div class="contact-method"> <div class="contact-icon"> <i class="fas fa-phone"></i> </div> <div> <div><strong>Customer Service</strong></div> <div>1-800-FIBER-PRO</div> </div> </div> <div class="contact-method"> <div class="contact-icon"> <i class="fas fa-envelope"></i> </div> <div> <div><strong>Email Support</strong></div> <div>support@fiberlinkpro.com</div> </div> </div> <div class="contact-method"> <div class="contact-icon"> <i class="fas fa-map-marker-alt"></i> </div> <div> <div><strong>Service Center</strong></div> <div>123 Network Ave, Tech City, TC 12345</div> </div> </div> <div class="contact-method"> <div class="contact-icon"> <i class="fas fa-clock"></i> </div> <div> <div><strong>Support Hours</strong></div> <div>24/7 Customer Support</div> </div> </div> </div> </div> <div class="contact-form"> <form id="contactForm"> <div class="row"> <div class="col-md-6"> <label class="form-label">Full Name *</label> <input type="text" class="form-control" placeholder="Your full name" required> </div> <div class="col-md-6"> <label class="form-label">Phone Number *</label> <input type="tel" class="form-control" placeholder="(555) 123-4567" required> </div> </div> <div class="row"> <div class="col-md-6"> <label class="form-label">Email Address *</label> <input type="email" class="form-control" placeholder="your@email.com" required> </div> <div class="col-md-6"> <label class="form-label">Service Address</label> <input type="text" class="form-control" placeholder="Installation address"> </div> </div> <label class="form-label">Service Interest</label> <select class="form-control"> <option value="">Select service type</option> <option value="residential">Residential Internet</option> <option value="business">Business Internet</option> <option value="support">Technical Support</option> <option value="installation">New Installation</option> <option value="upgrade">Plan Upgrade</option> <option value="other">Other Inquiry</option> </select> <div class="row"> <div class="col-md-6"> <label class="form-label">Preferred Speed</label> <select class="form-control"> <option value="">Select speed</option> <option value="50mbps">50 Mbps - Basic</option> <option value="200mbps">200 Mbps - Standard</option> <option value="500mbps">500 Mbps - Premium</option> <option value="1gbps">1 Gbps - Business</option> <option value="custom">Custom Requirements</option> </select> </div> <div class="col-md-6"> <label class="form-label">Installation Timeline</label> <select class="form-control"> <option value="">Select timeline</option> <option value="asap">As Soon As Possible</option> <option value="1-week">Within 1 Week</option> <option value="2-weeks">Within 2 Weeks</option> <option value="1-month">Within 1 Month</option> <option value="flexible">Flexible</option> </select> </div> </div> <label class="form-label">Message</label> <textarea class="form-control" rows="4" placeholder="Tell us about your internet needs, current issues, or any questions about our broadband services..."></textarea> <button type="submit" class="btn-submit"> <i class="fas fa-paper-plane me-2"></i>Send Message </button> </form> </div> </div> </div> </section> <!-- Footer --> <footer class="footer-section"> <div class="container"> <div class="social-links"> <a href="#" onclick="openSocial('Facebook')"><i class="fab fa-facebook-f"></i></a> <a href="#" onclick="openSocial('Twitter')"><i class="fab fa-twitter"></i></a> <a href="#" onclick="openSocial('LinkedIn')"><i class="fab fa-linkedin-in"></i></a> <a href="#" onclick="openSocial('YouTube')"><i class="fab fa-youtube"></i></a> <a href="#" onclick="openSocial('Instagram')"><i class="fab fa-instagram"></i></a> </div> <p class="mb-0">© 2024 FiberLink Pro. All rights reserved. | Ultra-Fast Fiber Internet ?</p> </div> </footer> <!-- Speed Test Modal --> <div class="speed-modal" id="speedModal"> <div class="speed-content"> <div class="speed-header"> <h3 class="speed-title">Internet Speed Test</h3> <button class="speed-close" onclick="closeSpeedTest()">×</button> </div> <div class="text-center"> <div class="mb-4"> <i class="fas fa-tachometer-alt" style="font-size: 4rem; color: var(--primary-blue);"></i> </div> <h4 class="mb-3">Test Your Internet Speed</h4> <p class="mb-4">Click the button below to test your current internet connection speed and compare it with our available plans.</p> <button class="btn btn-custom btn-primary-custom" onclick="runSpeedTest()"> <i class="fas fa-play me-2"></i>Start Speed Test </button> <div id="speedResults" class="mt-4" style="display: none;"> <div class="row"> <div class="col-md-4"> <div class="text-center p-3 bg-light rounded"> <h5>Download</h5> <div id="downloadSpeed" style="font-size: 2rem; font-weight: bold; color: var(--primary-blue);">--</div> <small>Mbps</small> </div> </div> <div class="col-md-4"> <div class="text-center p-3 bg-light rounded"> <h5>Upload</h5> <div id="uploadSpeed" style="font-size: 2rem; font-weight: bold; color: var(--tech-green);">--</div> <small>Mbps</small> </div> </div> <div class="col-md-4"> <div class="text-center p-3 bg-light rounded"> <h5>Ping</h5> <div id="pingSpeed" style="font-size: 2rem; font-weight: bold; color: var(--accent-purple);">--</div> <small>ms</small> </div> </div> </div> </div> </div> </div> </div> <!-- Success Message --> <div class="success-message" id="successMessage"> <i class="fas fa-check-circle me-2"></i> <span id="successText">Success!</span> </div> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
CSS
:root { --primary-blue: #0066FF; --secondary-cyan: #00D4FF; --accent-purple: #6366F1; --tech-green: #10B981; --dark-navy: #0F172A; --slate-gray: #334155; --light-gray: #F8FAFC; --pure-white: #FFFFFF; --soft-blue: #EFF6FF; --gradient-primary: linear-gradient(135deg, #0066FF 0%, #00D4FF 100%); --gradient-secondary: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%); --gradient-accent: linear-gradient(135deg, #10B981 0%, #059669 100%); --gradient-hero: linear-gradient(135deg, #0066FF 0%, #6366F1 50%, #00D4FF 100%); --shadow-soft: 0 4px 20px rgba(0, 102, 255, 0.15); --shadow-medium: 0 8px 30px rgba(0, 102, 255, 0.2); --shadow-strong: 0 15px 40px rgba(0, 102, 255, 0.25); --border-radius: 16px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; line-height: 1.6; color: var(--slate-gray); background: var(--pure-white); overflow-x: hidden; } .tech-font { font-family: 'Space Grotesk', sans-serif; } /* Navigation */ .navbar-custom { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); box-shadow: var(--shadow-soft); transition: all 0.3s ease; padding: 1rem 0; border-bottom: 2px solid var(--soft-blue); } .navbar-brand { font-weight: 800; font-size: 2.2rem; color: var(--primary-blue) !important; letter-spacing: -0.5px; } .nav-link { font-weight: 500; color: var(--slate-gray) !important; margin: 0 1rem; transition: all 0.3s ease; position: relative; letter-spacing: 0.3px; text-transform: uppercase; font-size: 0.9rem; } .nav-link:hover { color: var(--primary-blue) !important; } .nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -5px; left: 50%; background: var(--gradient-primary); transition: all 0.3s ease; transform: translateX(-50%); border-radius: 1px; } .nav-link:hover::after { width: 100%; } .btn-connect { background: var(--gradient-primary); color: white; border: none; padding: 12px 28px; border-radius: 25px; font-weight: 700; margin-left: 20px; transition: all 0.3s ease; letter-spacing: 0.5px; text-transform: uppercase; font-size: 0.9rem; } .btn-connect:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); color: white; } /* Hero Section */ .hero-section { min-height: 100vh; display: flex; align-items: center; background: var(--gradient-hero); position: relative; overflow: hidden; color: white; } .hero-content { position: relative; z-index: 2; } .hero-badge { font-size: 1rem; color: var(--soft-blue); font-weight: 700; margin-bottom: 1rem; animation: fadeInUp 0.8s ease-out; text-transform: uppercase; letter-spacing: 2px; } .hero-title { font-size: 3.5rem; font-weight: 900; color: white; /* margin-bottom: 1.5rem; */ animation: fadeInUp 0.8s ease-out 0.2s both; line-height: 1.1; letter-spacing: -2px; } .hero-subtitle { font-size: 1.2rem; color: var(--soft-blue); margin-bottom: 1rem; animation: fadeInUp 0.8s ease-out 0.4s both; font-weight: 400; max-width: 600px; } .hero-features { display: flex; gap: 1.5rem; margin-bottom: 3rem; animation: fadeInUp 0.8s ease-out 0.6s both; flex-wrap: wrap; } .feature-badge { background: rgba(255, 255, 255, 0.2); color: white; padding: 12px 20px; border-radius: 25px; font-weight: 700; font-size: 0.9rem; border: 1px solid rgba(255, 255, 255, 0.3); transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.5px; } .feature-badge:hover { background: white; color: var(--primary-blue); transform: translateY(-2px); } .hero-buttons { animation: fadeInUp 0.8s ease-out 0.8s both; } .hero-image { position: relative; animation: fadeInRight 1s ease-out 0.5s both; } .network-showcase { width: 400px; height: 400px; border-radius: var(--border-radius); background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; font-size: 8rem; color: white; box-shadow: var(--shadow-strong); position: relative; overflow: hidden; backdrop-filter: blur(10px); } .network-showcase::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent); animation: shimmer 3s infinite; } @keyframes shimmer { 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); } 100% { transform: translateX(100%) translateY(100%) rotate(45deg); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } .btn-custom { padding: 16px 35px; font-weight: 700; border-radius: 30px; letter-spacing: 0.5px; transition: all 0.3s ease; border: none; margin: 0 10px; text-decoration: none; display: inline-block; font-size: 1rem; text-transform: uppercase; } .btn-primary-custom { background: white; color: var(--primary-blue); } .btn-primary-custom:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); color: var(--primary-blue); } .btn-secondary-custom { background: transparent; color: white; border: 2px solid white; } .btn-secondary-custom:hover { background: white; color: var(--primary-blue); transform: translateY(-3px); } /* Section Styling */ .section-padding { padding: 100px 0; } .section-title { font-size: 3.5rem; font-weight: 800; margin-bottom: 1rem; color: var(--dark-navy); text-align: center; line-height: 1.2; letter-spacing: -1px; } .section-subtitle { font-size: 1.2rem; color: var(--slate-gray); margin-bottom: 4rem; text-align: center; font-weight: 400; max-width: 600px; margin-left: auto; margin-right: auto; } /* Plans Section */ .plans-section { background: var(--light-gray); } .plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; } .plan-card { background: white; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow-soft); transition: all 0.3s ease; cursor: pointer; position: relative; } .plan-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-strong); } .plan-header { height: 200px; background: var(--gradient-primary); display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; position: relative; overflow: hidden; } .plan-card:nth-child(2) .plan-header { background: var(--gradient-secondary); } .plan-card:nth-child(3) .plan-header { background: var(--gradient-accent); } .plan-card:nth-child(4) .plan-header { background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%); } .plan-speed { font-size: 3rem; font-weight: 900; margin-bottom: 0.5rem; } .plan-type { font-size: 1.2rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; } .plan-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; opacity: 0; transition: all 0.3s ease; } .plan-card:hover .plan-overlay { opacity: 1; } .plan-btn { background: white; color: var(--primary-blue); padding: 12px 25px; border-radius: 25px; text-decoration: none; font-weight: 700; transition: all 0.3s ease; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.5px; } .plan-btn:hover { background: var(--primary-blue); color: white; transform: translateY(-2px); } .plan-content { padding: 2rem; } .plan-name { font-size: 1.5rem; font-weight: 700; color: var(--dark-navy); margin-bottom: 0.5rem; } .plan-description { color: var(--slate-gray); margin-bottom: 1.5rem; line-height: 1.6; } .plan-price { font-size: 2rem; font-weight: 800; color: var(--primary-blue); margin-bottom: 1rem; } .plan-features { list-style: none; margin-bottom: 1.5rem; } .plan-features li { padding: 0.5rem 0; color: var(--slate-gray); position: relative; padding-left: 1.5rem; } .plan-features li::before { content: '✓'; position: absolute; left: 0; color: var(--tech-green); font-weight: 700; } /* Services Section */ .services-section { background: white; } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .service-card { background: white; border-radius: var(--border-radius); padding: 2rem; text-align: center; box-shadow: var(--shadow-soft); transition: all 0.3s ease; cursor: pointer; border: 2px solid transparent; } .service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-medium); border-color: var(--primary-blue); } .service-icon { width: 80px; height: 80px; background: var(--gradient-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 2rem; color: white; } .service-card:nth-child(2) .service-icon { background: var(--gradient-secondary); } .service-card:nth-child(3) .service-icon { background: var(--gradient-accent); } .service-card:nth-child(4) .service-icon { background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%); } .service-card:nth-child(5) .service-icon { background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%); } .service-card:nth-child(6) .service-icon { background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%); } .service-name { font-size: 1.2rem; font-weight: 700; color: var(--dark-navy); margin-bottom: 0.5rem; } .service-description { color: var(--slate-gray); font-size: 0.9rem; margin-bottom: 1rem; } .service-features { color: var(--primary-blue); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; } /* Coverage Section */ .coverage-section { background: var(--light-gray); } .coverage-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .coverage-info { padding: 2rem; } .coverage-title { font-size: 3rem; font-weight: 800; margin-bottom: 1.5rem; color: var(--dark-navy); } .coverage-description { font-size: 1.1rem; margin-bottom: 2rem; color: var(--slate-gray); line-height: 1.7; } .coverage-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-bottom: 2rem; } .stat-item { text-align: center; padding: 1.5rem; background: white; border-radius: 12px; box-shadow: var(--shadow-soft); } .stat-number { font-size: 2rem; font-weight: 800; color: var(--primary-blue); display: block; } .stat-label { font-size: 0.9rem; color: var(--slate-gray); text-transform: uppercase; letter-spacing: 0.5px; } .coverage-map { position: relative; height: 400px; background: var(--gradient-primary); border-radius: var(--border-radius); display: flex; align-items: center; justify-content: center; font-size: 6rem; color: white; box-shadow: var(--shadow-strong); } /* Contact Section */ .contact-section { background: var(--gradient-hero); color: white; } .contact-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } .contact-info { padding: 2rem; } .contact-title { font-size: 3rem; font-weight: 800; margin-bottom: 1.5rem; color: white; } .contact-description { font-size: 1.1rem; margin-bottom: 2rem; color: var(--soft-blue); line-height: 1.7; } .contact-methods { margin-bottom: 2rem; } .contact-method { display: flex; align-items: center; margin-bottom: 1.5rem; padding: 1rem; background: rgba(255, 255, 255, 0.1); border-radius: 12px; transition: all 0.3s ease; backdrop-filter: blur(10px); } .contact-method:hover { background: rgba(255, 255, 255, 0.2); transform: translateX(10px); } .contact-icon { width: 50px; height: 50px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 1rem; font-size: 1.2rem; color: var(--primary-blue); } .contact-form { background: rgba(255, 255, 255, 0.1); padding: 2.5rem; border-radius: var(--border-radius); backdrop-filter: blur(10px); box-shadow: var(--shadow-soft); } .contact-form .form-control { background: rgba(255, 255, 255, 0.1); border: 2px solid rgba(255, 255, 255, 0.3); color: white; backdrop-filter: blur(10px); margin-bottom: 1rem; padding: 12px 16px; border-radius: 8px; } .contact-form .form-control::placeholder { color: rgba(255, 255, 255, 0.7); } .contact-form .form-control:focus { border-color: white; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.15); outline: none; } .contact-form .form-label { color: white; font-weight: 600; margin-bottom: 0.5rem; display: block; text-transform: uppercase; letter-spacing: 0.5px; } .btn-submit { background: white; color: var(--primary-blue); border: none; padding: 16px 40px; border-radius: 30px; font-weight: 700; font-size: 1rem; transition: all 0.3s ease; width: 100%; letter-spacing: 0.5px; text-transform: uppercase; } .btn-submit:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); color: var(--primary-blue); } /* Footer */ .footer-section { background: var(--dark-navy); color: var(--soft-blue); padding: 60px 0 30px; text-align: center; } .social-links { margin-bottom: 2rem; } .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; background: var(--gradient-primary); color: white; border-radius: 50%; margin: 0 10px; transition: all 0.3s ease; text-decoration: none; } .social-links a:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); } /* Success Messages */ .success-message { position: fixed; top: 100px; right: 30px; background: var(--gradient-primary); color: white; padding: 16px 25px; border-radius: 12px; box-shadow: var(--shadow-medium); z-index: 1060; transform: translateX(400px); transition: transform 0.3s ease; font-weight: 600; } .success-message.show { transform: translateX(0); } /* Loading Animation */ .loading-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: white; animation: spin 1s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Animations */ .animate-on-scroll { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; } .animate-on-scroll.animated { opacity: 1; transform: translateY(0); } /* Speed Test Modal */ .speed-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 1050; } .speed-modal.show { display: flex; align-items: center; justify-content: center; } .speed-content { background: white; border-radius: var(--border-radius); padding: 2rem; max-width: 600px; width: 90%; max-height: 80vh; overflow-y: auto; } .speed-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 2px solid var(--soft-blue); } .speed-title { font-size: 1.5rem; font-weight: 700; color: var(--dark-navy); text-transform: uppercase; } .speed-close { background: none; border: none; font-size: 1.5rem; color: var(--slate-gray); cursor: pointer; } /* Responsive Design */ @media (max-width: 768px) { .hero-title { font-size: 3.5rem; } .section-title { font-size: 2.5rem; } .contact-content { grid-template-columns: 1fr; gap: 2rem; } .coverage-content { grid-template-columns: 1fr; gap: 2rem; } .network-showcase { width: 300px; height: 300px; font-size: 6rem; } .hero-features { justify-content: center; } }
JavaScript
// Smooth scrolling 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' }); } }); }); // Animate elements on scroll function animateOnScroll() { const elements = document.querySelectorAll('.animate-on-scroll'); elements.forEach(element => { const elementTop = element.getBoundingClientRect().top; const elementVisible = 150; if (elementTop < window.innerHeight - elementVisible) { element.classList.add('animated'); } }); } // Navbar background on scroll window.addEventListener('scroll', function() { const navbar = document.querySelector('.navbar-custom'); if (window.scrollY > 50) { navbar.style.background = 'rgba(255, 255, 255, 0.98)'; navbar.style.boxShadow = '0 8px 30px rgba(0, 102, 255, 0.3)'; } else { navbar.style.background = 'rgba(255, 255, 255, 0.95)'; navbar.style.boxShadow = '0 4px 20px rgba(0, 102, 255, 0.15)'; } animateOnScroll(); }); // Open speed test modal function openSpeedTest() { document.getElementById('speedModal').classList.add('show'); } // Close speed test modal function closeSpeedTest() { document.getElementById('speedModal').classList.remove('show'); } // Run speed test function runSpeedTest() { const button = event.target; const originalText = button.innerHTML; button.innerHTML = '<span class="loading-spinner"></span> Testing...'; button.disabled = true; // Simulate speed test setTimeout(() => { const downloadSpeed = Math.floor(Math.random() * 400) + 50; // 50-450 Mbps const uploadSpeed = Math.floor(downloadSpeed * 0.3); // ~30% of download const ping = Math.floor(Math.random() * 30) + 5; // 5-35 ms document.getElementById('downloadSpeed').textContent = downloadSpeed; document.getElementById('uploadSpeed').textContent = uploadSpeed; document.getElementById('pingSpeed').textContent = ping; document.getElementById('speedResults').style.display = 'block'; button.innerHTML = originalText; button.disabled = false; showSuccessMessage('Speed test completed!'); }, 3000); } // Show success message function showSuccessMessage(message) { const successMessage = document.getElementById('successMessage'); const successText = document.getElementById('successText'); successText.textContent = message; successMessage.classList.add('show'); setTimeout(() => { successMessage.classList.remove('show'); }, 3000); } // Initialize animations on page load document.addEventListener('DOMContentLoaded', function() { animateOnScroll(); }); // Close speed test modal when clicking outside document.getElementById('speedModal').addEventListener('click', function(e) { if (e.target === this) { closeSpeedTest(); } });
Output Preview
Desktop
Mobile
Fullscreen