added first three mockups
This commit is contained in:
Executable
+442
@@ -0,0 +1,442 @@
|
||||
<!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="Select Electrical Services Blog – expert insights, electrical safety tips, company news, and industry updates." />
|
||||
<meta name="keywords" content="electrical blog, electrician tips, home safety, electrical news, selectelectrical" />
|
||||
<title>Select Electrical Services | Blog</title>
|
||||
|
||||
<link rel="icon" href="assets/images/logo-select-electrical.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>
|
||||
<style>
|
||||
.preview-concept-banner{position:fixed;top:0;left:0;right:0;z-index:10000;background:#111827;color:#e5e7eb;font:600 13px/1.4 system-ui,sans-serif;padding:10px 16px;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:center;text-align:center}
|
||||
.preview-concept-banner a{color:#93c5fd;text-decoration:none;font-weight:600}
|
||||
.preview-concept-banner span{opacity:.85;font-weight:400}
|
||||
body{padding-top:42px}
|
||||
#mainNav.fixed-top{top:42px}
|
||||
</style>
|
||||
<div class="preview-concept-banner">UX Concept Preview — Select Electrical Services <span>· Not the live website</span> · <a href="ux-gallery.html">Feature gallery</a> · <a href="pricing.html">Pricing</a></div>
|
||||
|
||||
|
||||
<!-- 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">
|
||||
<img src="assets/images/logo-select-electrical.png" alt="Select Electrical" class="brand-logo">
|
||||
</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:+16302028020" class="nav-link btn-call ms-2">
|
||||
<i class="fas fa-phone-alt me-2"></i>(630) 202-8020
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- PAGE HEADER (Blog) -->
|
||||
<section class="page-header">
|
||||
<div class="page-header-bg" role="img" aria-label="blog background"></div>
|
||||
<div class="page-header-overlay"></div>
|
||||
<div class="container">
|
||||
<div class="hero-badge" data-aos="fade-down"><i class="fas fa-pen-fancy"></i> Insights & Updates</div>
|
||||
<h1 data-aos="fade-up">Select Electrical <span>Blog</span></h1>
|
||||
<p data-aos="fade-up" data-aos-delay="80">Expert advice, safety tips, company news, and industry trends from our team of certified electricians.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BLOG CONTENT -->
|
||||
<section class="section-pad" style="background:var(--bg);">
|
||||
<div class="container">
|
||||
<div class="row g-5">
|
||||
<!-- Main posts column -->
|
||||
<div class="col-lg-8">
|
||||
<div class="row g-4">
|
||||
<!-- Blog post 1 -->
|
||||
<div class="col-md-6" data-aos="fade-up">
|
||||
<div class="blog-card">
|
||||
<img src="https://images.unsplash.com/photo-1621905252507-b35492cc74b4?w=600&q=80" alt="Electrician working" class="blog-img">
|
||||
<div class="blog-content">
|
||||
<span class="blog-category">Safety Tips</span>
|
||||
<h5 class="blog-title">5 Essential Electrical Safety Checks for Homeowners</h5>
|
||||
<p class="blog-excerpt">Learn how to identify common hazards like overloaded outlets, flickering lights, and warm switches before they become serious problems.</p>
|
||||
<div class="blog-meta">
|
||||
<div class="blog-author">
|
||||
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Select Electrical">
|
||||
<span>Select Electrical</span>
|
||||
</div>
|
||||
<div class="blog-date">
|
||||
<i class="far fa-calendar-alt"></i> Mar 12, 2025
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="blog-link">Read More <i class="fas fa-arrow-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Blog post 2 -->
|
||||
<div class="col-md-6" data-aos="fade-up" data-aos-delay="80">
|
||||
<div class="blog-card">
|
||||
<img src="https://images.unsplash.com/photo-1558002038-1055907df827?w=600&q=80" alt="Smart home" class="blog-img">
|
||||
<div class="blog-content">
|
||||
<span class="blog-category">Smart Home</span>
|
||||
<h5 class="blog-title">The Ultimate Guide to Smart Lighting Retrofit</h5>
|
||||
<p class="blog-excerpt">Everything you need to know about upgrading your existing fixtures to smart, energy-efficient LED lighting with voice control.</p>
|
||||
<div class="blog-meta">
|
||||
<div class="blog-author">
|
||||
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Select Electrical">
|
||||
<span>Select Electrical</span>
|
||||
</div>
|
||||
<div class="blog-date">
|
||||
<i class="far fa-calendar-alt"></i> Mar 5, 2025
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="blog-link">Read More <i class="fas fa-arrow-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Blog post 3 -->
|
||||
<div class="col-md-6" data-aos="fade-up">
|
||||
<div class="blog-card">
|
||||
<img src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=600&q=80" alt="Office rewiring" class="blog-img">
|
||||
<div class="blog-content">
|
||||
<span class="blog-category">Commercial</span>
|
||||
<h5 class="blog-title">When to Rewire Your Office Building</h5>
|
||||
<p class="blog-excerpt">Signs your commercial space needs rewiring, how to plan for minimal downtime, and the benefits of modern electrical systems.</p>
|
||||
<div class="blog-meta">
|
||||
<div class="blog-author">
|
||||
<img src="https://randomuser.me/api/portraits/men/67.jpg" alt="Select Electrical">
|
||||
<span>Select Electrical</span>
|
||||
</div>
|
||||
<div class="blog-date">
|
||||
<i class="far fa-calendar-alt"></i> Feb 28, 2025
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="blog-link">Read More <i class="fas fa-arrow-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Blog post 4 -->
|
||||
<div class="col-md-6" data-aos="fade-up" data-aos-delay="80">
|
||||
<div class="blog-card">
|
||||
<img src="assets/images/8829.jpg" alt="Panel upgrade" class="blog-img">
|
||||
<div class="blog-content">
|
||||
<span class="blog-category">Electrical Panel</span>
|
||||
<h5 class="blog-title">Do You Need a 200-Amp Service Upgrade?</h5>
|
||||
<p class="blog-excerpt">With EV chargers and modern appliances, many homes need more capacity. We explain the signs and benefits of upgrading.</p>
|
||||
<div class="blog-meta">
|
||||
<div class="blog-author">
|
||||
<img src="https://randomuser.me/api/portraits/women/63.jpg" alt="Select Electrical">
|
||||
<span>Select Electrical</span>
|
||||
</div>
|
||||
<div class="blog-date">
|
||||
<i class="far fa-calendar-alt"></i> Feb 20, 2025
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="blog-link">Read More <i class="fas fa-arrow-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Blog post 5 -->
|
||||
<div class="col-md-6" data-aos="fade-up">
|
||||
<div class="blog-card">
|
||||
<img src="https://images.unsplash.com/photo-1516156008625-3a9d6067fab5?w=600&q=80" alt="EV charger" class="blog-img">
|
||||
<div class="blog-content">
|
||||
<span class="blog-category">EV Charging</span>
|
||||
<h5 class="blog-title">Installing a Level 2 EV Charger at Home: What to Expect</h5>
|
||||
<p class="blog-excerpt">From permits to panel capacity, we walk you through the entire process of adding a fast home charger.</p>
|
||||
<div class="blog-meta">
|
||||
<div class="blog-author">
|
||||
<img src="https://randomuser.me/api/portraits/men/42.jpg" alt="David Chen">
|
||||
<span>David Chen</span>
|
||||
</div>
|
||||
<div class="blog-date">
|
||||
<i class="far fa-calendar-alt"></i> Feb 12, 2025
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="blog-link">Read More <i class="fas fa-arrow-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Blog post 6 -->
|
||||
<div class="col-md-6" data-aos="fade-up" data-aos-delay="80">
|
||||
<div class="blog-card">
|
||||
<img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?w=600&q=80" alt="Outdoor lighting" class="blog-img">
|
||||
<div class="blog-content">
|
||||
<span class="blog-category">Landscape</span>
|
||||
<h5 class="blog-title">Transform Your Backyard with Low-Voltage Landscape Lighting</h5>
|
||||
<p class="blog-excerpt">Design ideas, installation tips, and the safety benefits of professional outdoor lighting.</p>
|
||||
<div class="blog-meta">
|
||||
<div class="blog-author">
|
||||
<img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Sarah M.">
|
||||
<span>Select Electrical</span>
|
||||
</div>
|
||||
<div class="blog-date">
|
||||
<i class="far fa-calendar-alt"></i> Feb 5, 2025
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="blog-link">Read More <i class="fas fa-arrow-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="pagination" data-aos="fade-up">
|
||||
<a href="#" class="page-link active">1</a>
|
||||
<a href="#" class="page-link">2</a>
|
||||
<a href="#" class="page-link">3</a>
|
||||
<a href="#" class="page-link"><i class="fas fa-chevron-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="col-lg-4">
|
||||
<!-- Categories -->
|
||||
<div class="sidebar-card" data-aos="fade-left">
|
||||
<h5 class="sidebar-title">Categories</h5>
|
||||
<ul class="categories-list">
|
||||
<li><a href="#">Safety Tips (8)</a></li>
|
||||
<li><a href="#">Smart Home (12)</a></li>
|
||||
<li><a href="#">Commercial (6)</a></li>
|
||||
<li><a href="#">Residential (15)</a></li>
|
||||
<li><a href="#">Lighting (9)</a></li>
|
||||
<li><a href="#">EV Charging (4)</a></li>
|
||||
<li><a href="#">Company News (5)</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Recent Posts -->
|
||||
<div class="sidebar-card" data-aos="fade-left" data-aos-delay="50">
|
||||
<h5 class="sidebar-title">Recent Posts</h5>
|
||||
<div class="recent-post">
|
||||
<img src="https://images.unsplash.com/photo-1621905252507-b35492cc74b4?w=100&q=80" alt="post" class="recent-post-img">
|
||||
<div class="recent-post-content">
|
||||
<h6><a href="#">5 Essential Electrical Safety Checks for Homeowners</a></h6>
|
||||
<div class="recent-post-date"><i class="far fa-calendar-alt"></i> Mar 12, 2025</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recent-post">
|
||||
<img src="https://images.unsplash.com/photo-1558002038-1055907df827?w=100&q=80" alt="post" class="recent-post-img">
|
||||
<div class="recent-post-content">
|
||||
<h6><a href="#">The Ultimate Guide to Smart Lighting Retrofit</a></h6>
|
||||
<div class="recent-post-date"><i class="far fa-calendar-alt"></i> Mar 5, 2025</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recent-post">
|
||||
<img src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=100&q=80" alt="post" class="recent-post-img">
|
||||
<div class="recent-post-content">
|
||||
<h6><a href="#">When to Rewire Your Office Building</a></h6>
|
||||
<div class="recent-post-date"><i class="far fa-calendar-alt"></i> Feb 28, 2025</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recent-post">
|
||||
<img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=100&q=80" alt="post" class="recent-post-img">
|
||||
<div class="recent-post-content">
|
||||
<h6><a href="#">Do You Need a 200-Amp Service Upgrade?</a></h6>
|
||||
<div class="recent-post-date"><i class="far fa-calendar-alt"></i> Feb 20, 2025</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Newsletter Signup (similar to footer) -->
|
||||
<div class="sidebar-card" data-aos="fade-left" data-aos-delay="100">
|
||||
<h5 class="sidebar-title">Newsletter</h5>
|
||||
<p style="font-size:0.9rem; color:var(--gray); margin-bottom:15px;">Subscribe for electrical tips and company news.</p>
|
||||
<div class="newsletter-input-wrap">
|
||||
<input type="email" class="newsletter-input" placeholder="Your email address" aria-label="Blog newsletter">
|
||||
<button class="newsletter-btn" aria-label="Subscribe"><i class="fas fa-paper-plane"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CONTACT SECTION (same as 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>Select Electrical</span></h2>
|
||||
<p class="section-desc mx-auto">Have a question or need professional advice? Our team is ready to help.</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>1778 Villanova Drive<br>Naperville, IL 60565</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>(630) 202-8020<br>(630) 202-8020 (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><a href="mailto:select8020@gmail.com">select8020@gmail.com</a></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">I'm interested in</label><select class="form-select" id="service"><option selected disabled>Select</option><option>General Inquiry</option><option>Electrical Installation</option><option>Wiring & Rewiring</option><option>Lighting</option><option>Maintenance</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://maps.google.com/maps?q=1778+Villanova+Drive,+Naperville,+IL+60565&output=embed" 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">
|
||||
<img src="assets/images/logo-select-electrical.png" alt="Select Electrical" class="brand-logo">
|
||||
</div>
|
||||
<p class="footer-desc">
|
||||
Select Electrical Services 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">Select Electrical Services</a>. All rights reserved. · Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></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>
|
||||
|
||||
<!-- SCROLL TOP -->
|
||||
<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
|
||||
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';});
|
||||
// newsletter button demo
|
||||
document.querySelectorAll('.newsletter-btn').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const input = this.previousElementSibling;
|
||||
if (input.value && input.value.includes('@')) {
|
||||
this.innerHTML = '<i class="fas fa-check"></i>';
|
||||
this.style.background = '#22c55e';
|
||||
input.value = '';
|
||||
input.placeholder = 'Subscribed!';
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user