added first three mockups
This commit is contained in:
+404
@@ -0,0 +1,404 @@
|
||||
<!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="5 Essential Electrical Safety Checks for Homeowners - A comprehensive guide from Select Electrical Services on keeping your home safe." />
|
||||
<meta name="keywords" content="electrical safety, home safety, electrical tips, selectelectrical blog" />
|
||||
<title>Select Electrical Services | 5 Essential Electrical Safety Checks</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 -->
|
||||
<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>
|
||||
|
||||
<!-- NAVBAR -->
|
||||
<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 (smaller) -->
|
||||
<section class="page-header-sm">
|
||||
<div class="page-header-bg" role="img" aria-label="electrical safety"></div>
|
||||
<div class="page-header-overlay"></div>
|
||||
<div class="container">
|
||||
<div class="hero-badge" data-aos="fade-down"><i class="fas fa-shield-alt"></i> Safety Tips</div>
|
||||
<h1 data-aos="fade-up">5 Essential Electrical <span>Safety Checks</span> for Homeowners</h1>
|
||||
<div class="meta" data-aos="fade-up" data-aos-delay="50">
|
||||
<span><i class="far fa-calendar-alt"></i> March 12, 2025</span>
|
||||
<span><i class="far fa-user"></i> Select Electrical</span>
|
||||
<span><i class="far fa-clock"></i> 6 min read</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BLOG DETAIL CONTENT -->
|
||||
<section class="section-pad" style="background:var(--bg);">
|
||||
<div class="container">
|
||||
<div class="row g-5">
|
||||
<!-- Main column -->
|
||||
<div class="col-lg-8">
|
||||
<div class="blog-detail" data-aos="fade-up">
|
||||
<img src="https://images.unsplash.com/photo-1621905252507-b35492cc74b4?w=1200&q=80" alt="Electrician checking panel" class="featured-image">
|
||||
|
||||
<p>Electrical safety is often out of sight, out of mind – until something goes wrong. Taking a few minutes each season to perform simple checks can prevent fires, shocks, and costly repairs. Here are five essential safety checks every homeowner should know.</p>
|
||||
|
||||
<h2>1. Inspect Cords and Outlets</h2>
|
||||
<p>Walk through your home and look at every power cord and outlet. Frayed cords, cracked plugs, or loose outlets are fire hazards. If an outlet feels warm to the touch, or if you see discoloration, call a professional immediately. Also, never use an extension cord as permanent wiring – it's a common code violation and safety risk.</p>
|
||||
|
||||
<h2>2. Test Your GFCIs</h2>
|
||||
<p>Ground Fault Circuit Interrupters (GFCIs) are required in kitchens, bathrooms, garages, and outdoors. They protect against shock. Press the "TEST" button – the "RESET" button should pop out. If it doesn't, the outlet needs replacement. Reset by pressing "RESET" firmly. Do this monthly.</p>
|
||||
|
||||
<blockquote>
|
||||
“According to the Electrical Safety Foundation, GFCIs have reduced the risk of electrocution by over 70% since their introduction.”
|
||||
</blockquote>
|
||||
|
||||
<h2>3. Check Your Electrical Panel</h2>
|
||||
<p>Your breaker panel should never feel hot. Listen for buzzing or crackling sounds – those indicate loose connections or failing breakers. If you have an old fuse box or a panel with known safety issues (like Federal Pacific), consider an upgrade. Also, ensure the area around the panel is clear and easily accessible.</p>
|
||||
|
||||
<h2>4. Test Smoke and CO Alarms</h2>
|
||||
<p>Working smoke and carbon monoxide alarms are your last line of defense. Press the test button monthly. Replace batteries at least once a year (or use 10-year sealed units). Alarms themselves should be replaced every 10 years.</p>
|
||||
|
||||
<h2>5. Look for Overloaded Circuits</h2>
|
||||
<p>If lights flicker when you turn on an appliance, or breakers trip frequently, you may have an overloaded circuit. This is especially common in older homes with modern electronics. Consider having a licensed electrician add new circuits or perform a load calculation.</p>
|
||||
|
||||
<p>By staying vigilant and addressing small issues early, you protect your home and family. If you're unsure about any of these checks, Select Electrical is always here to help – schedule an inspection today.</p>
|
||||
|
||||
<!-- Share buttons -->
|
||||
<div class="share-buttons">
|
||||
<a href="#" class="share-btn facebook"><i class="fab fa-facebook-f"></i></a>
|
||||
<a href="#" class="share-btn twitter"><i class="fab fa-twitter"></i></a>
|
||||
<a href="#" class="share-btn linkedin"><i class="fab fa-linkedin-in"></i></a>
|
||||
<a href="#" class="share-btn email"><i class="fas fa-envelope"></i></a>
|
||||
</div>
|
||||
|
||||
<!-- Author bio -->
|
||||
<div class="author-bio">
|
||||
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Select Electrical">
|
||||
<div>
|
||||
<h5>Select Electrical</h5>
|
||||
<p>Master Electrician and Safety Specialist at Select Electrical. With over 15 years in the field, Robert is passionate about educating homeowners on electrical safety and code compliance.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Comments section -->
|
||||
<div class="comments-section">
|
||||
<h4 class="comments-title">3 Comments</h4>
|
||||
|
||||
<div class="comment">
|
||||
<div class="comment-avatar"><img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Sarah M."></div>
|
||||
<div class="comment-content">
|
||||
<div class="comment-author">Sarah Mitchell</div>
|
||||
<div class="comment-date"><i class="far fa-calendar-alt"></i> March 13, 2025 at 9:23 am</div>
|
||||
<p class="comment-text">Great tips! I just tested my GFCIs and one failed. Called Select Electrical and they replaced it within two hours. Highly recommend!</p>
|
||||
<a href="#" class="comment-reply"><i class="fas fa-reply me-1"></i>Reply</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comment">
|
||||
<div class="comment-avatar"><img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Mike T."></div>
|
||||
<div class="comment-content">
|
||||
<div class="comment-author">Mike Thompson</div>
|
||||
<div class="comment-date"><i class="far fa-calendar-alt"></i> March 12, 2025 at 4:15 pm</div>
|
||||
<p class="comment-text">I never thought about the panel buzzing. I'll have to check mine. Thanks for the reminder!</p>
|
||||
<a href="#" class="comment-reply"><i class="fas fa-reply me-1"></i>Reply</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comment">
|
||||
<div class="comment-avatar"><img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Linda"></div>
|
||||
<div class="comment-content">
|
||||
<div class="comment-author">Linda Hayes</div>
|
||||
<div class="comment-date"><i class="far fa-calendar-alt"></i> March 12, 2025 at 10:05 am</div>
|
||||
<p class="comment-text">Great article, Robert! I'll be sharing this with my clients.</p>
|
||||
<a href="#" class="comment-reply"><i class="fas fa-reply me-1"></i>Reply</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reply form -->
|
||||
<div class="reply-form">
|
||||
<h5>Leave a Comment</h5>
|
||||
<form>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Name *</label>
|
||||
<input type="text" class="form-control" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Email *</label>
|
||||
<input type="email" class="form-control" required>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label class="form-label">Comment *</label>
|
||||
<textarea class="form-control" rows="5" required></textarea>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<button type="submit" class="btn-submit" style="width:auto; padding:12px 32px;">Post Comment</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</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-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 -->
|
||||
<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;">Get the latest articles and safety tips.</p>
|
||||
<div class="newsletter-input-wrap">
|
||||
<input type="email" class="newsletter-input" placeholder="Your email address">
|
||||
<button class="newsletter-btn"><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 questions about electrical safety? 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 -->
|
||||
<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 -->
|
||||
<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