added more preview pages and more templates

This commit is contained in:
2026-07-21 07:10:03 -05:00
parent c6119ffdf5
commit b19fdee30d
3726 changed files with 651487 additions and 6169 deletions
+36 -32
View File
@@ -20,6 +20,9 @@
<meta name="twitter:title" content="Select Electrical Services | Western Chicago Suburbs" />
<meta name="twitter:description" content="Licensed electrician since 1984 — troubleshooting, lighting, panels, EV charging. Call (630) 202-8020." />
<link rel="icon" href="assets/images/logo-select-electrical.png">
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<script type="application/ld+json">
{
"@context": "https://schema.org",
@@ -43,10 +46,12 @@
</script>
<!-- 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" />
<!-- Font Awesome (non-blocking) -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet" media="print" onload="this.media='all'" />
<noscript><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet" /></noscript>
<!-- AOS (non-blocking) -->
<link href="assets/css/aos.css" rel="stylesheet" media="print" onload="this.media='all'" />
<noscript><link href="assets/css/aos.css" rel="stylesheet" /></noscript>
<!-- 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"
@@ -56,7 +61,7 @@
<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 a{color:#93c5fd;text-decoration:underline;font-weight:600}
.preview-concept-banner span{opacity:.85;font-weight:400}
body{padding-top:42px}
#mainNav.fixed-top{top:42px}
@@ -94,7 +99,7 @@ body{padding-top:42px}
<div class="container">
<!-- Logo -->
<a class="navbar-brand" href="#hero">
<img src="assets/images/logo-select-electrical.png" alt="Select Electrical" class="brand-logo">
<img src="assets/images/logo-select-electrical.png" alt="Select Electrical" class="brand-logo" width="52" height="52">
</a>
<!-- Toggler -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu"
@@ -204,7 +209,7 @@ body{padding-top:42px}
<span>Licensed · Bonded · Insured</span>
</div>
<img src="assets/images/67419.jpg"
alt="Electrician working on electrical panel" class="about-img-main" />
alt="Electrician working on electrical panel" class="about-img-main" loading="lazy" decoding="async" width="600" height="480" />
<div class="about-img-badge">
<div class="num">40+</div>
<div class="lbl">Years in<br>Business</div>
@@ -440,9 +445,9 @@ body{padding-top:42px}
<div class="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-delay="0">
<div class="project-card">
<img src="assets/images/67419.jpg"
alt="Commercial building electrical installation" />
alt="Commercial building electrical installation" loading="lazy" decoding="async" width="600" height="260" />
<div class="project-overlay">
<a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a>
<a href="#projects" class="proj-link" aria-label="View Commercial Complex project"><i class="fas fa-arrow-up-right-from-square" aria-hidden="true"></i></a>
<h5>Commercial Complex</h5>
<span>Full Electrical Installation</span>
</div>
@@ -451,9 +456,9 @@ body{padding-top:42px}
<div class="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-delay="80">
<div class="project-card">
<img src="assets/images/7323.jpg"
alt="Office electrical work" />
alt="Office electrical work" loading="lazy" decoding="async" width="600" height="260" />
<div class="project-overlay">
<a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a>
<a href="#projects" class="proj-link" aria-label="View Corporate Office Rewire project"><i class="fas fa-arrow-up-right-from-square" aria-hidden="true"></i></a>
<h5>Corporate Office Rewire</h5>
<span>Wiring &amp; Lighting Upgrade</span>
</div>
@@ -462,9 +467,9 @@ body{padding-top:42px}
<div class="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-delay="160">
<div class="project-card">
<img src="assets/images/8829.jpg"
alt="Residential electrical panel" />
alt="Residential electrical panel" loading="lazy" decoding="async" width="600" height="260" />
<div class="project-overlay">
<a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a>
<a href="#projects" class="proj-link" aria-label="View Smart Home Integration project"><i class="fas fa-arrow-up-right-from-square" aria-hidden="true"></i></a>
<h5>Smart Home Integration</h5>
<span>Home Automation System</span>
</div>
@@ -473,9 +478,9 @@ body{padding-top:42px}
<div class="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-delay="0">
<div class="project-card">
<img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=600&q=80"
alt="Industrial facility" />
alt="Industrial facility" loading="lazy" decoding="async" width="600" height="260" />
<div class="project-overlay">
<a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a>
<a href="#projects" class="proj-link" aria-label="View Industrial Facility project"><i class="fas fa-arrow-up-right-from-square" aria-hidden="true"></i></a>
<h5>Industrial Facility</h5>
<span>High-Voltage Installation</span>
</div>
@@ -484,9 +489,9 @@ body{padding-top:42px}
<div class="col-lg-4 col-md-6" 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 panel installation" />
alt="Solar panel installation" loading="lazy" decoding="async" width="600" height="260" />
<div class="project-overlay">
<a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a>
<a href="#projects" class="proj-link" aria-label="View Solar Power System project"><i class="fas fa-arrow-up-right-from-square" aria-hidden="true"></i></a>
<h5>Solar Power System</h5>
<span>Renewable Energy Integration</span>
</div>
@@ -495,9 +500,9 @@ body{padding-top:42px}
<div class="col-lg-4 col-md-6" 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="Luxury residential lighting" />
alt="Luxury residential lighting" loading="lazy" decoding="async" width="600" height="260" />
<div class="project-overlay">
<a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a>
<a href="#projects" class="proj-link" aria-label="View Luxury Residence project"><i class="fas fa-arrow-up-right-from-square" aria-hidden="true"></i></a>
<h5>Luxury Residence</h5>
<span>Lighting Design &amp; Installation</span>
</div>
@@ -732,34 +737,34 @@ body{padding-top:42px}
<!-- Contact Info -->
<div class="col-lg-4" data-aos="fade-right">
<div class="contact-info-card">
<h4 class="rach-out">
<h3 class="rach-out">
Reach Out To Us
</h4>
</h3>
<div class="contact-info-item">
<div class="contact-icon"><i class="fas fa-map-marker-alt"></i></div>
<div>
<h6>Our Office</h6>
<p class="contact-info-label">Our Office</p>
<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>Call or Text</h6>
<p class="contact-info-label">Call or Text</p>
<p><a href="tel:+16302028020">(630) 202-8020</a><br>Available 24 hours</p>
</div>
</div>
<div class="contact-info-item">
<div class="contact-icon"><i class="fas fa-envelope"></i></div>
<div>
<h6>Email</h6>
<p class="contact-info-label">Email</p>
<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>Working Hours</h6>
<p class="contact-info-label">Working Hours</p>
<p>Open 24 hours<br>Free estimates</p>
</div>
</div>
@@ -769,10 +774,9 @@ body{padding-top:42px}
<!-- Contact Form -->
<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;">
<h3 class="contact-form-title">
Send Us a Message
</h4>
</h3>
<form id="contactForm" novalidate>
<div class="row g-3">
<div class="col-md-6">
@@ -842,7 +846,7 @@ body{padding-top:42px}
<!-- 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">
<img src="assets/images/logo-select-electrical.png" alt="Select Electrical" class="brand-logo" width="72" height="72">
</div>
<p class="footer-desc">
Licensed electrician serving Western Chicago suburbs since 1984.
@@ -918,9 +922,9 @@ body{padding-top:42px}
SCRIPTS
============================================ -->
<!-- Bootstrap 5 JS -->
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js" defer></script>
<!-- AOS JS -->
<script src="assets/js/aos.js"></script>
<script src="assets/js/script.js"></script>
<script src="assets/js/aos.js" defer></script>
<script src="assets/js/script.js" defer></script>
</body>
</html>