Create Electrician Website Template with HTML, CSS & JS

Faraz

By Faraz - Last Updated:

Learn to create a modern electrician website template using HTML, CSS (TailwindCSS), and JavaScript with step-by-step guide.

Join us on Telegram
create-electrician-website-template-with-html-css-and-js.webp
Read AlsoCreating a Counter with HTML, CSS, and JavaScript.jpgCreating a Counter with HTML, CSS, and JavaScript (Source Code)

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Conclusion
  6. Preview

If you are an electrician or someone designing a website for an electrician, having a simple yet professional web presence is very important. A clean and functional website helps in showcasing services, building trust, and gaining new clients.

In this tutorial, we’ll show you how to create an electrician website template using only HTML, CSS, and JavaScript. This will be a basic, mobile-friendly template that can be customized easily.

Prerequisites:

Before you begin, make sure you have:

  • Basic knowledge of HTML, CSS, and JavaScript
  • A code editor like VS Code or Sublime Text
  • A modern web browser for preview
  • Folder setup for project (HTML, CSS, JS files)

Source Code

Step 1 (HTML Code):

First, we start with HTML. This is where we create the main layout of the website.

We will use Tailwind CSS to style the page and make it look modern and clean.

Copy the below HTML code and paste it into your index.html file:

Read Alsobank-website-template-using-html-css-and-javascript.webpBank Website Template using HTML, CSS, and JavaScript

Step 2 (CSS Code):

After the HTML, we move to CSS.

While Tailwind CSS covers most of the styling, we’ll still write some custom CSS for specific tweaks.

Copy the below CSS code and paste it into your styles.css file:

:root {
  --bg-dark: #111827;
  --bg-light: #f9fafb;
  --text-dark: #e5e7eb;
  --text-light: #1f2937;
  --primary: #fbbf24; 
  --primary-hover: #f59e0b; 
  --secondary: #374151; 
}

/* Dark Mode as default */
body {
  font-family: 'Roboto', sans-serif;
  background-color: var(--bg-dark);
  color: var(--text-dark);
  transition: background-color 0.5s, color 0.5s;
}

/* Light Mode */
body.light-mode {
  --bg-dark: #f9fafb;
  --bg-light: #111827;
  --text-dark: #1f2937;
  --text-light: #e5e7eb;
}

h1,
h2,
h3,
h4,
.font-orbitron {
  font-family: 'Orbitron', sans-serif;
}

.glassmorphism {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.light-mode .glassmorphism {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

#navbar.scrolled {
  background: rgba(17, 24, 39, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

body.light-mode #navbar.scrolled {
  background: rgba(249, 250, 251, 0.8);
}

/* Scroll-triggered Animations */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s, transform 0.8s;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Cursor Follower */
#cursor-aura {
  position: fixed;
  width: 40px;
  height: 40px;
  border: 2px solid var(--primary);
  border-radius: 50%;
  left: 0;
  top: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, background-color 0.2s, opacity 0.2s;
  z-index: 9999;
  mix-blend-mode: difference;
  opacity: 0;
}
body:hover #cursor-aura {
  opacity: 1;
}
#cursor-aura.hovered {
  width: 60px;
  height: 60px;
  background-color: rgba(251, 191, 36, 0.2);
}

/* Quote Wizard Modal */
#quote-wizard-modal {
  transition: opacity 0.3s ease;
}
.wizard-step {
  display: none;
}
.wizard-step.active {
  display: block;
  animation: fadeIn 0.5s;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Timeline */
.timeline-item {
  position: relative;
}
.timeline-item:before {
  content: '';
  position: absolute;
  top: 20px;
  left: 20px;
  width: 2px;
  height: calc(100% - 20px);
  background-color: var(--primary);
}
.timeline-item:last-child:before {
  display: none;
}
.timeline-dot {
  position: absolute;
  top: 20px;
  left: 20px;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
}

/* Project Gallery */
.gallery-item {
  transition: all 0.3s ease;
}
.gallery-item.hidden {
  transform: scale(0.8);
  opacity: 0;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

/* Testimonial Slider */
.testimonial-slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
}
.testimonial-item {
  min-width: 100%;
  box-sizing: border-box;
}

/* Client Logo Marquee */
.logo-marquee {
  display: flex;
  animation: marquee 30s linear infinite;
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Interactive SVG */
.interactive-svg-point {
  cursor: pointer;
  transition: all 0.2s ease;
}
.interactive-svg-point:hover {
  filter: drop-shadow(0 0 10px var(--primary));
}
#svg-tooltip {
  position: absolute;
  display: none;
  padding: 10px;
  border-radius: 8px;
  font-size: 14px;
  pointer-events: none;
  z-index: 10;
}

Step 3 (JavaScript Code):

Now we reach the final step — JavaScript.

Here, we will add a basic scroll effect and leave room to add more functions later (like form validation or alerts).

Copy the below JavaScript code and paste it into your script.js file:

document.addEventListener('DOMContentLoaded', function() {
  // --- Particles.js Initialization ---
  if (document.getElementById('particles-js')) {
      particlesJS('particles-js', { particles: { number: { value: 80 }, color: { value: "#ffffff" }, shape: { type: "circle" }, opacity: { value: 0.5, random: true }, size: { value: 3, random: true }, line_linked: { enable: true, distance: 150, color: "#FBBF24", opacity: 0.4, width: 1 }, move: { enable: true, speed: 1, direction: "none", out_mode: "out" } }, interactivity: { detect_on: "canvas", events: { onhover: { enable: true, mode: "repulse" }, onclick: { enable: true, mode: "push" }, resize: true }, modes: { repulse: { distance: 100 }, push: { particles_nb: 4 } } }, retina_detect: true });
  }

  // --- Cursor Aura ---
  const cursorAura = document.getElementById('cursor-aura');
  if (window.matchMedia("(pointer: fine)").matches) {
      document.addEventListener('mousemove', e => {
          cursorAura.style.left = e.clientX + 'px';
          cursorAura.style.top = e.clientY + 'px';
      });
      document.querySelectorAll('a, button, .service-item, .gallery-filter-btn, .interactive-svg-point').forEach(el => {
          el.addEventListener('mouseenter', () => cursorAura.classList.add('hovered'));
          el.addEventListener('mouseleave', () => cursorAura.classList.remove('hovered'));
      });
  } else {
      cursorAura.style.display = 'none';
  }

  // --- General Setup (Navbar, Theme, Menu, Animations) ---
  const navbar = document.getElementById('navbar');
  window.addEventListener('scroll', () => navbar.classList.toggle('scrolled', window.scrollY > 50));

  const themeToggle = document.getElementById('theme-toggle');
  themeToggle.addEventListener('change', () => {
      document.body.classList.toggle('light-mode');
      document.querySelector('.light-icon').classList.toggle('hidden');
      document.querySelector('.dark-icon').classList.toggle('hidden');
  });

  const hamburgerBtn = document.getElementById('hamburger-btn');
  const mobileMenu = document.getElementById('mobile-menu');
  const closeMobileMenuBtn = document.getElementById('close-mobile-menu');
  const toggleMobileMenu = () => mobileMenu.classList.toggle('hidden');
  hamburgerBtn.addEventListener('click', toggleMobileMenu);
  closeMobileMenuBtn.addEventListener('click', toggleMobileMenu);
  document.querySelectorAll('.mobile-nav-link').forEach(link => link.addEventListener('click', toggleMobileMenu));
  
  const revealElements = document.querySelectorAll('.reveal');
  const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
          if (entry.isIntersecting) entry.target.classList.add('visible');
      });
  }, { threshold: 0.1 });
  revealElements.forEach(el => observer.observe(el));

  // --- Number Counter ---
  const counters = document.querySelectorAll('[data-target]');
  const counterObserver = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
          if (entry.isIntersecting) {
              const counter = entry.target;
              const target = +counter.getAttribute('data-target');
              let current = 0;
              const updateCounter = () => {
                  const increment = target / 100;
                  if (current < target) {
                      current += increment;
                      counter.innerText = Math.ceil(current).toLocaleString();
                      requestAnimationFrame(updateCounter);
                  } else {
                      counter.innerText = target.toLocaleString();
                  }
              };
              updateCounter();
              observer.unobserve(counter);
          }
      });
  }, { threshold: 0.5 });
  counters.forEach(counter => counterObserver.observe(counter));

  // --- Interactive Service Section ---
  const serviceItems = document.querySelectorAll('.service-item');
  const detailsContainer = document.getElementById('service-details-container');
  const serviceDetails = {
      ev: { title: 'EV Charger Solutions', text: 'We provide end-to-end installation for all major EV charger brands, including Level 2 and DC Fast Chargers. Our service includes a site assessment, panel capacity check, and seamless integration with your existing electrical system for safe and efficient charging.', img: 'https://images.unsplash.com/photo-1592919155577-f544df53b645?q=80&w=1974&auto=format&fit=crop' },
      smart: { title: 'Smart Home Automation', text: 'Transform your house into a smart home. We specialize in integrating systems like smart lighting, thermostats, security cameras, and automated blinds, all controllable from a central hub or your smartphone for ultimate convenience and energy savings.', img: 'https://images.unsplash.com/photo-1655194827229-a1d3192b533e?q=80&w=1964&auto=format&fit=crop' },
      panel: { title: 'Electrical Panel Upgrades', text: 'Modern homes require modern power. We upgrade outdated fuse boxes and circuit breaker panels to increase capacity, improve safety, and comply with the latest electrical codes, ensuring your home can handle all your electronic devices safely.', img: 'https://images.unsplash.com/photo-1635335874521-7987db781153' }
  };

  serviceItems.forEach(item => {
      item.addEventListener('click', () => {
          const serviceKey = item.dataset.service;
          const details = serviceDetails[serviceKey];
          detailsContainer.innerHTML = `
          <div class="glassmorphism rounded-lg p-8 grid md:grid-cols-2 gap-8 items-center" style="animation: fadeIn 0.5s;">
          <div>
              <h3 class="text-3xl font-bold text-amber-400 mb-4">${details.title}</h3>
              <p class="text-gray-300">${details.text}</p>
          </div>
          <img src="${details.img}" class="rounded-lg shadow-xl w-full h-64 object-cover">
      </div>
          `;
      });
  });

  // --- Project Gallery Filter ---
  const filterBtns = document.querySelectorAll('.gallery-filter-btn');
  const galleryItems = document.querySelectorAll('.gallery-item');
  filterBtns.forEach(btn => {
      btn.addEventListener('click', () => {
          filterBtns.forEach(b => b.classList.remove('bg-amber-400', 'text-gray-900'));
          filterBtns.forEach(b => b.classList.add('bg-gray-700', 'text-white'));
          btn.classList.add('bg-amber-400', 'text-gray-900');
          btn.classList.remove('bg-gray-700', 'text-white');
          const filter = btn.dataset.filter;
          galleryItems.forEach(item => {
              if (filter === 'all' || item.dataset.category === filter) {
                  item.classList.remove('hidden');
              } else {
                  item.classList.add('hidden');
              }
          });
      });
  });

  // --- Interactive SVG Tooltip ---
  const svgPoints = document.querySelectorAll('.interactive-svg-point');
  const tooltip = document.getElementById('svg-tooltip');
  svgPoints.forEach(point => {
      point.addEventListener('mousemove', e => {
          tooltip.style.display = 'block';
          tooltip.style.left = (e.pageX + 15) + 'px';
          tooltip.style.top = (e.pageY + 15) + 'px';
          tooltip.textContent = point.dataset.tooltip;
      });
      point.addEventListener('mouseleave', () => {
          tooltip.style.display = 'none';
      });
  });

  // --- Testimonial Slider ---
  const slider = document.getElementById('testimonial-slider');
  const prevBtn = document.getElementById('prev-testimonial');
  const nextBtn = document.getElementById('next-testimonial');
  const testimonials = document.querySelectorAll('.testimonial-item');
  let currentIndex = 0;
  const updateSlider = () => slider.style.transform = `translateX(-${currentIndex * 100}%)`;
  nextBtn.addEventListener('click', () => { currentIndex = (currentIndex + 1) % testimonials.length; updateSlider(); });
  prevBtn.addEventListener('click', () => { currentIndex = (currentIndex - 1 + testimonials.length) % testimonials.length; updateSlider(); });

  // --- Quote Wizard ---
  const quoteModal = document.getElementById('quote-wizard-modal');
  const openWizardBtns = document.querySelectorAll('#open-quote-wizard, #open-quote-wizard-mobile');
  const closeWizardBtn = document.getElementById('close-quote-wizard');
  const wizardSteps = document.querySelectorAll('.wizard-step');
  const nextWizBtns = document.querySelectorAll('.wizard-next-btn');
  const prevWizBtns = document.querySelectorAll('.wizard-prev-btn');
  const quoteForm = document.getElementById('quote-form');
  const formStatus = document.getElementById('form-status');
  let currentStep = 1;
  const showStep = (stepNumber) => {
      wizardSteps.forEach(step => step.classList.toggle('active', parseInt(step.dataset.step) === stepNumber));
      currentStep = stepNumber;
  };
  openWizardBtns.forEach(btn => btn.addEventListener('click', () => quoteModal.classList.remove('hidden')));
  closeWizardBtn.addEventListener('click', () => quoteModal.classList.add('hidden'));
  nextWizBtns.forEach(btn => btn.addEventListener('click', () => { if (currentStep < wizardSteps.length) showStep(currentStep + 1); }));
  prevWizBtns.forEach(btn => btn.addEventListener('click', () => { if (currentStep > 1) showStep(currentStep - 1); }));
  quoteForm.addEventListener('submit', function(e) {
      e.preventDefault();
      formStatus.innerHTML = '<p class="text-green-400">Thank you! Request sent.</p>';
      setTimeout(() => { quoteModal.classList.add('hidden'); formStatus.innerHTML = ''; quoteForm.reset(); showStep(1); }, 3000);
  });
});

Final Output:

create-electrician-website-template-with-html-css-and-js.gif
Read Alsocreating tailwind css accordion (faq) source code included.jpgCreating Tailwind CSS Accordion (FAQ) | Source Code Included

Conclusion:

Creating an electrician website using HTML, CSS, and JavaScript is simple and effective. It helps electricians build an online presence without spending a lot of money. This guide gave you the basics — a homepage, services section, about, contact form, and smooth scrolling. You can now improve the design further or add more pages as per your needs.

Keep your design clean, simple, and mobile-friendly — and you’re good to go!

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: electrician website, html template, css website design, javascript web layout, web design for electrician, how to create electrician website using html css javascript, step by step electrician template design for beginners, modern electrician website template with responsive layout, electrical website templates, free electrician portfolio website code, electrician business website design using html
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Components

Please allow ads on our site🥺