345 lines
23 KiB
HTML
Executable File
345 lines
23 KiB
HTML
Executable File
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<meta name="description" content="VoltEdge Electrical – professional electrical installation for residential, commercial and industrial projects. Certified electricians, safe & reliable." />
|
||
<meta name="keywords" content="electrical installation, wiring, panel upgrade, commercial electrician, residential electrician" />
|
||
<title>VoltEdge Electrical | Electrical Installation</title>
|
||
|
||
<link rel="icon" href="assets/images/electrical-service.png">
|
||
<!-- Bootstrap 5 -->
|
||
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
|
||
<!-- Font Awesome -->
|
||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet" />
|
||
<!-- AOS -->
|
||
<link href="assets/css/aos.css" rel="stylesheet" />
|
||
<!-- Google Fonts: Barlow Condensed + DM Sans -->
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=DM+Sans:wght@300;400;500;600&display=swap"
|
||
rel="stylesheet" />
|
||
<link href="assets/css/style.css" rel="stylesheet" />
|
||
</head>
|
||
<body>
|
||
|
||
<!-- PRELOADER (same) -->
|
||
<div id="preloader" aria-hidden="true">
|
||
<div class="preloader-bolt">
|
||
<div class="preloader-rings"></div><div class="preloader-rings"></div>
|
||
<svg class="bolt-svg" viewBox="0 0 60 80" fill="none"><polygon points="35,0 10,45 28,45 25,80 50,35 32,35" fill="#f4b400"/><polygon points="35,0 10,45 28,45 25,80 50,35 32,35" fill="url(#boltGrad)" opacity="0.6"/><defs><linearGradient id="boltGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#fff" stop-opacity="0.8"/><stop offset="100%" stop-color="#f4b400" stop-opacity="0"/></linearGradient></defs></svg>
|
||
</div>
|
||
<div class="preloader-bar"><div class="preloader-bar-inner"></div></div>
|
||
<div class="preloader-text">Powering Up...</div>
|
||
</div>
|
||
|
||
<nav id="mainNav" class="navbar navbar-expand-lg fixed-top" aria-label="Main navigation">
|
||
<div class="container">
|
||
<!-- Logo -->
|
||
<a class="navbar-brand" href="index.html">
|
||
<i class="fas fa-bolt me-2" style="color:var(--yellow)"></i>Volt<span>Edge</span>
|
||
</a>
|
||
<!-- Toggler -->
|
||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu"
|
||
aria-controls="navMenu" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
<!-- Menu -->
|
||
<div class="collapse navbar-collapse" id="navMenu">
|
||
<ul class="navbar-nav mx-auto gap-1">
|
||
<li class="nav-item"><a class="nav-link" href="index.html#hero">Home</a></li>
|
||
<li class="nav-item"><a class="nav-link" href="index.html#about">About</a></li>
|
||
<li class="nav-item"><a class="nav-link" href="index.html#services">Services</a></li>
|
||
<li class="nav-item"><a class="nav-link" href="index.html#projects">Projects</a></li>
|
||
<li class="nav-item"><a class="nav-link" href="index.html#team">Team</a></li>
|
||
<li class="nav-item"><a class="nav-link" href="index.html#testimonials">Testimonials</a></li>
|
||
<li class="nav-item"><a class="nav-link" href="index.html#contact">Contact</a></li>
|
||
</ul>
|
||
<a href="tel:+18005551234" class="nav-link btn-call ms-2">
|
||
<i class="fas fa-phone-alt me-2"></i>+1 800 555 1234
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- PAGE HEADER (Electrical Installation) -->
|
||
<section class="page-header">
|
||
<div class="page-header-bg" role="img" aria-label="electrician installing panel"></div>
|
||
<div class="page-header-overlay"></div>
|
||
<div class="container">
|
||
<div class="hero-badge" data-aos="fade-down"><i class="fas fa-bolt"></i> Expert Installation</div>
|
||
<h1 data-aos="fade-up">Electrical <span>Installation</span> Services</h1>
|
||
<p data-aos="fade-up" data-aos-delay="80">Safe, code-compliant installations for residential, commercial, and industrial projects. From panels to complete rewiring.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- OVERVIEW / INTRODUCTION -->
|
||
<section class="section-pad" id="installation-overview" style="background:var(--white);">
|
||
<div class="container">
|
||
<div class="row align-items-center g-5">
|
||
<div class="col-lg-6" data-aos="fade-right">
|
||
<img src="assets/images/2150652842.jpg" alt="Electrician at panel" class="img-fluid rounded-3 shadow">
|
||
</div>
|
||
<div class="col-lg-6" data-aos="fade-left">
|
||
<div class="section-label">Power with precision</div>
|
||
<h2 class="section-title">Complete <span>Electrical</span> Setup</h2>
|
||
<p class="section-desc" style="max-width:100%;">Whether you're building new, renovating, or need a heavy‑duty upgrade, our certified electricians deliver turnkey electrical installation. We handle everything from service panels and subpanels to branch circuits, outlets, and specialized equipment.</p>
|
||
<ul class="about-list mt-4">
|
||
<li><i class="fas fa-check-circle"></i> 100% compliant with National Electrical Code</li>
|
||
<li><i class="fas fa-check-circle"></i> Premium materials and branded components</li>
|
||
<li><i class="fas fa-check-circle"></i> Load calculation & energy efficiency advice</li>
|
||
<li><i class="fas fa-check-circle"></i> Permits & inspections included</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TYPES OF INSTALLATION (service cards) -->
|
||
<section class="section-pad" style="background:var(--bg);" id="installation-types">
|
||
<div class="container">
|
||
<div class="text-center mb-5" data-aos="fade-up">
|
||
<div class="section-label justify-content-center">Installation types</div>
|
||
<h2 class="section-title">We cover every <span>sector</span></h2>
|
||
<p class="section-desc mx-auto">Tailored electrical systems for homes, businesses, and industrial facilities.</p>
|
||
</div>
|
||
<div class="row g-4">
|
||
<div class="col-md-4" data-aos="fade-up">
|
||
<div class="service-card">
|
||
<div class="service-num">R</div>
|
||
<div class="service-icon"><i class="fas fa-home"></i></div>
|
||
<h5>Residential</h5>
|
||
<p>New home wiring, panel upgrades, kitchen/ bath circuits, home automation rough‑ins, and backup generator hookups.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4" data-aos="fade-up" data-aos-delay="80">
|
||
<div class="service-card">
|
||
<div class="service-num">C</div>
|
||
<div class="service-icon"><i class="fas fa-building"></i></div>
|
||
<h5>Commercial</h5>
|
||
<p>Office wiring, lighting control, data center power, retail store fit‑outs, and energy‑efficient LED installations.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4" data-aos="fade-up" data-aos-delay="160">
|
||
<div class="service-card">
|
||
<div class="service-num">I</div>
|
||
<div class="service-icon"><i class="fas fa-industry"></i></div>
|
||
<h5>Industrial</h5>
|
||
<p>High‑voltage equipment, motor controls, panel boards, conduit bending, and machinery wiring for factories.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- INSTALLATION PROCESS (same process style) -->
|
||
<section class="section-pad" style="background:var(--white);" id="installation-process">
|
||
<div class="container">
|
||
<div class="text-center mb-5" data-aos="fade-up">
|
||
<div class="section-label justify-content-center">Our process</div>
|
||
<h2 class="section-title">How we <span>install</span></h2>
|
||
<p class="section-desc mx-auto">A proven workflow from consultation to final testing.</p>
|
||
</div>
|
||
<div class="process-wrap" data-aos="fade-up">
|
||
<div class="process-step"><div class="process-icon"><span class="process-step-num">1</span><i class="fas fa-clipboard-list"></i></div><h5>Site survey</h5><p>We assess your needs, measure loads, and design a system that meets current and future demands.</p></div>
|
||
<div class="process-step"><div class="process-icon"><span class="process-step-num">2</span><i class="fas fa-drafting-compass"></i></div><h5>Permit & plan</h5><p>We handle permits, create detailed blueprints, and select materials with your approval.</p></div>
|
||
<div class="process-step"><div class="process-icon"><span class="process-step-num">3</span><i class="fas fa-tools"></i></div><h5>Professional installation</h5><p>Certified electricians execute the work with minimal disruption, following safety protocols.</p></div>
|
||
<div class="process-step"><div class="process-icon"><span class="process-step-num">4</span><i class="fas fa-clipboard-check"></i></div><h5>Testing & sign‑off</h5><p>Every circuit is tested, inspected, and we walk you through the final system.</p></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- WHY CHOOSE US FOR INSTALLATION (dark cards) -->
|
||
<section class="section-pad" style="background:var(--navy);" id="installation-benefits">
|
||
<div class="container">
|
||
<div class="text-center mb-5" data-aos="fade-up">
|
||
<div class="section-label justify-content-center" style="color:var(--yellow);">Why VoltEdge</div>
|
||
<h2 class="section-title light">Installation <span>advantages</span></h2>
|
||
<p style="color:rgba(255,255,255,0.55); max-width:600px; margin:0 auto;">Quality, safety, and long‑term reliability.</p>
|
||
</div>
|
||
<div class="row g-4">
|
||
<div class="col-md-6 col-lg-4" data-aos="fade-up"><div class="why-card"><div class="why-icon"><i class="fas fa-shield-alt"></i></div><div><h5>Safety guaranteed</h5><p>Arc‑fault protection, proper grounding, and full code compliance.</p></div></div></div>
|
||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="60"><div class="why-card"><div class="why-icon"><i class="fas fa-gem"></i></div><div><h5>Premium materials</h5><p>We use only top‑tier brands like Siemens, Leviton, and Eaton.</p></div></div></div>
|
||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="120"><div class="why-card"><div class="why-icon"><i class="fas fa-bolt"></i></div><div><h5>Energy efficient</h5><p>Load calculations and smart design to reduce waste and save money.</p></div></div></div>
|
||
<div class="col-md-6 col-lg-4" data-aos="fade-up"><div class="why-card"><div class="why-icon"><i class="fas fa-clock"></i></div><div><h5>On‑time completion</h5><p>We respect your schedule and deliver projects on deadline.</p></div></div></div>
|
||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="60"><div class="why-card"><div class="why-icon"><i class="fas fa-file-invoice"></i></div><div><h5>Transparent quotes</h5><p>Detailed breakdowns, no hidden costs, fixed‑price options.</p></div></div></div>
|
||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="120"><div class="why-card"><div class="why-icon"><i class="fas fa-history"></i></div><div><h5>5‑year warranty</h5><p>All installation work comes with our comprehensive warranty.</p></div></div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PROJECT GALLERY (installation specific) -->
|
||
<section class="section-pad" style="background:var(--bg);" id="installation-gallery">
|
||
<div class="container">
|
||
<div class="text-center mb-5" data-aos="fade-up">
|
||
<div class="section-label justify-content-center">Recent work</div>
|
||
<h2 class="section-title">Installation <span>projects</span></h2>
|
||
</div>
|
||
<div class="row g-3">
|
||
<div class="col-md-4" data-aos="zoom-in"><div class="project-card"><img src="https://images.unsplash.com/photo-1581092795360-fd1ca04f0952?w=600&q=80" alt="panel installation"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>New 400A panel</h5><span>Commercial building</span></div></div></div>
|
||
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="80"><div class="project-card"><img src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=600&q=80" alt="office wiring"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Office floor rewiring</h5><span>Data & power</span></div></div></div>
|
||
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="160"><div class="project-card"><img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&q=80" alt="home automation"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Smart home rough‑in</h5><span>Residential</span></div></div></div>
|
||
<div class="col-md-4" data-aos="zoom-in"><div class="project-card"><img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=600&q=80" alt="industrial"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Factory machine feed</h5><span>Industrial</span></div></div></div>
|
||
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="80"><div class="project-card"><img src="https://images.unsplash.com/photo-1516156008625-3a9d6067fab5?w=600&q=80" alt="solar"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Solar + battery backup</h5><span>Renewable</span></div></div></div>
|
||
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="160"><div class="project-card"><img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?w=600&q=80" alt="lighting"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Architectural lighting</h5><span>Luxury residence</span></div></div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TESTIMONIALS (installation focused) -->
|
||
<section class="section-pad" style="background:var(--navy);" id="installation-testimonials">
|
||
<div class="container">
|
||
<div class="text-center mb-5" data-aos="fade-up">
|
||
<div class="section-label justify-content-center" style="color:var(--yellow);">Client stories</div>
|
||
<h2 class="section-title light">Trusted for <span>installations</span></h2>
|
||
</div>
|
||
<div class="row justify-content-center">
|
||
<div class="col-lg-8">
|
||
<div class="testi-card">
|
||
<div class="testi-stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
|
||
<div class="testi-quote">"</div>
|
||
<p class="testi-text">VoltEdge handled the complete electrical installation for our new warehouse. From 800A service to lighting and machinery hookups — flawless execution and passed inspection with zero corrections.</p>
|
||
<div class="testi-author"><img src="https://randomuser.me/api/portraits/men/42.jpg" alt="client" class="testi-avatar"><div><div class="testi-name">Michael Chen</div><div class="testi-role">Operations Manager, Pinnacle Logistics</div></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CONTACT SECTION (identical to index) -->
|
||
<section id="contact" class="section-pad" style="background:var(--white);">
|
||
<div class="container">
|
||
<div class="text-center mb-5" data-aos="fade-up">
|
||
<div class="section-label justify-content-center">Get In Touch</div>
|
||
<h2 class="section-title">Contact <span>VoltEdge</span></h2>
|
||
<p class="section-desc mx-auto">Ready to start your installation? Our team is standing by.</p>
|
||
</div>
|
||
<div class="row g-4">
|
||
<div class="col-lg-4" data-aos="fade-right">
|
||
<div class="contact-info-card">
|
||
<h4 style="font-family:var(--font-display);font-size:1.4rem;font-weight:800;text-transform:uppercase;color:var(--white);margin-bottom:28px;">Reach Out</h4>
|
||
<div class="contact-info-item"><div class="contact-icon"><i class="fas fa-map-marker-alt"></i></div><div><h6>Office</h6><p>1240 Electric Ave, Suite 300<br>Austin, TX 78701</p></div></div>
|
||
<div class="contact-info-item"><div class="contact-icon"><i class="fas fa-phone-alt"></i></div><div><h6>Phone</h6><p>+1 800 555 1234<br>+1 800 555 5678 (emergency)</p></div></div>
|
||
<div class="contact-info-item"><div class="contact-icon"><i class="fas fa-envelope"></i></div><div><h6>Email</h6><p>hello@voltedge.com<br>support@voltedge.com</p></div></div>
|
||
<div class="contact-info-item"><div class="contact-icon"><i class="fas fa-clock"></i></div><div><h6>Hours</h6><p>Mon–Fri: 7am–6pm<br>Emergency: 24/7</p></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-8" data-aos="fade-left" data-aos-delay="100">
|
||
<div class="contact-form-card">
|
||
<h4 style="font-family:var(--font-display);font-size:1.4rem;font-weight:800;text-transform:uppercase;color:var(--navy);margin-bottom:28px;">Send a message</h4>
|
||
<form id="contactForm" novalidate>
|
||
<div class="row g-3">
|
||
<div class="col-md-6"><label class="form-label" for="name">Full Name</label><input type="text" class="form-control" id="name" required></div>
|
||
<div class="col-md-6"><label class="form-label" for="email">Email</label><input type="email" class="form-control" id="email" required></div>
|
||
<div class="col-md-6"><label class="form-label" for="phone">Phone</label><input type="tel" class="form-control" id="phone"></div>
|
||
<div class="col-md-6"><label class="form-label" for="service">Service Needed</label><select class="form-select" id="service"><option selected disabled>Select</option><option>Electrical Installation</option><option>Wiring</option><option>Lighting</option><option>Maintenance</option><option>Emergency</option><option>Smart Home</option></select></div>
|
||
<div class="col-12"><label class="form-label" for="message">Message</label><textarea class="form-control" id="message" rows="5" required></textarea></div>
|
||
<div class="col-12"><button type="submit" class="btn-submit"><i class="fas fa-paper-plane me-2"></i>Send Message</button></div>
|
||
</div>
|
||
</form>
|
||
<div id="formSuccess" style="display:none; margin-top:20px; padding:18px; background:rgba(37,99,235,0.08); border:1px solid rgba(37,99,235,0.2); border-radius:8px; color:#1d4ed8; text-align:center; font-weight:600;"><i class="fas fa-check-circle me-2"></i>Thank you! We'll be in touch within 24 hours.</div>
|
||
</div>
|
||
</div>
|
||
<div class="map-wrap mt-4">
|
||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3446.1740254609737!2d-97.74306848485296!3d30.267152381782017!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8644b5a0f7f8da63%3A0xd0e2e3e8e3b3b3b3!2sAustin%2C%20TX!5e0!3m2!1sen!2sus!4v1691000000000" allowfullscreen="" loading="lazy"></iframe>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<footer id="footer">
|
||
<div class="container">
|
||
<div class="row g-5">
|
||
<!-- Brand Column -->
|
||
<div class="col-lg-4 col-md-6">
|
||
<div class="footer-brand">
|
||
<i class="fas fa-bolt me-2" style="color:var(--yellow)"></i>Volt<span>Edge</span>
|
||
</div>
|
||
<p class="footer-desc">
|
||
VoltEdge Electrical delivers professional, certified electrical services for
|
||
residential, commercial, and industrial clients. Safety, quality, and trust
|
||
are our core values.
|
||
</p>
|
||
<div class="footer-social">
|
||
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
|
||
<a href="#" aria-label="Twitter/X"><i class="fab fa-twitter"></i></a>
|
||
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
|
||
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
|
||
<a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- Quick Links -->
|
||
<div class="col-lg-2 col-md-6 col-6">
|
||
<h5 class="footer-heading">Quick Links</h5>
|
||
<ul class="footer-links">
|
||
<li><a href="index.html">Home</a></li>
|
||
<li><a href="index.html#about">About Us</a></li>
|
||
<li><a href="index.html#services">Services</a></li>
|
||
<li><a href="index.html#projects">Projects</a></li>
|
||
<li><a href="index.html#team">Our Team</a></li>
|
||
<li><a href="blog.html">Blog</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- Services -->
|
||
<div class="col-lg-2 col-md-6 col-6">
|
||
<h5 class="footer-heading">Services</h5>
|
||
<ul class="footer-links">
|
||
<li><a href="electrical-installation.html">Installation</a></li>
|
||
<li><a href="wiring-services.html">Wiring</a></li>
|
||
<li><a href="lighting-installation.html">Lighting</a></li>
|
||
<li><a href="electrical-maintenance.html">Maintenance</a></li>
|
||
<li><a href="emergency-repair.html">Emergency</a></li>
|
||
<li><a href="smart-home.html">Smart Home</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- Newsletter -->
|
||
<div class="col-lg-4 col-md-6">
|
||
<h5 class="footer-heading">Newsletter</h5>
|
||
<p style="font-size:0.88rem;line-height:1.7;margin-bottom:0">
|
||
Subscribe for electrical safety tips, company news, and exclusive service promotions.
|
||
</p>
|
||
<div class="newsletter-input-wrap">
|
||
<input type="email" class="newsletter-input" placeholder="Your email address"
|
||
aria-label="Newsletter email" />
|
||
<button class="newsletter-btn" aria-label="Subscribe">
|
||
<i class="fas fa-paper-plane"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Footer Bottom -->
|
||
<div class="container">
|
||
<div class="footer-bottom">
|
||
<p>© 2026 <a href="#hero">VoltEdge Electrical</a>. All rights reserved.</p>
|
||
<p>
|
||
<a href="privacy-policy.html">Privacy Policy</a>
|
||
<a href="terms-conditions.html">Terms of Service</a>
|
||
<a href="faq.html">FAQS</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<button id="scrollTop" aria-label="Scroll to top"><i class="fas fa-chevron-up"></i></button>
|
||
|
||
<!-- scripts (same) -->
|
||
<script src="assets/js/bootstrap.bundle.min.js"></script>
|
||
<script src="assets/js/aos.js"></script>
|
||
<script>
|
||
// preloader
|
||
window.addEventListener('load',()=>{setTimeout(()=>{document.getElementById('preloader').classList.add('hidden');document.body.style.overflow='visible'},2200)});
|
||
document.body.style.overflow='hidden';
|
||
AOS.init({duration:700,once:true,easing:'ease-out-cubic',offset:60});
|
||
// sticky nav
|
||
const nav=document.getElementById('mainNav');
|
||
window.addEventListener('scroll',()=>{nav.classList.toggle('scrolled',window.scrollY>50)});
|
||
// smooth scroll for local anchors (#contact only)
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor=>{anchor.addEventListener('click',function(e){const target=document.querySelector(this.getAttribute('href'));if(target){e.preventDefault();const offset=nav.offsetHeight;const top=target.getBoundingClientRect().top+window.scrollY-offset;window.scrollTo({top,behavior:'smooth'});const bsCollapse=bootstrap.Collapse.getInstance(document.getElementById('navMenu'));if(bsCollapse)bsCollapse.hide();}})});
|
||
// scroll top
|
||
const scrollTopBtn=document.getElementById('scrollTop');
|
||
window.addEventListener('scroll',()=>{scrollTopBtn.classList.toggle('visible',window.scrollY>400)});
|
||
scrollTopBtn.addEventListener('click',()=>{window.scrollTo({top:0,behavior:'smooth'})});
|
||
// contact form demo
|
||
document.getElementById('contactForm').addEventListener('submit',function(e){e.preventDefault();const name=document.getElementById('name').value.trim(),email=document.getElementById('email').value.trim(),message=document.getElementById('message').value.trim();if(!name||!email||!message){alert('Please fill Name, Email, Message.');return;}this.style.display='none';document.getElementById('formSuccess').style.display='block';});
|
||
</script>
|
||
</body>
|
||
</html> |