# **Complete Single File Website - Light On Innovation**
**Single HTML file with everything included (Copy-Paste ready!)**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Light On Innovation - Engineering Excellence India</title>
<meta name="description" content="Electrical, Electronics, HVAC, Automation & Industrial Projects in India">
<meta name="keywords" content="electrical, electronics, HVAC, automation, engineering, India">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
line-height: 1.6;
color: #333;
overflow-x: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Header */
.header {
position: fixed;
top: 0;
width: 100%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
z-index: 1000;
box-shadow: 0 2px 20px rgba(0,0,0,0.1);
}
.navbar {
padding: 1rem 0;
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.8rem;
font-weight: 700;
color: #e91e63;
display: flex;
align-items: center;
gap: 10px;
}
.nav-menu {
display: flex;
list-style: none;
gap: 2rem;
}
.nav-link {
text-decoration: none;
color: #333;
font-weight: 500;
transition: color 0.3s;
position: relative;
}
.nav-link.active::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 2px;
background: #e91e63;
}
.nav-link:hover {
color: #e91e63;
}
.social-icons-header {
display: flex;
gap: 10px;
}
.social-icons-header a {
color: #666;
font-size: 1.1rem;
transition: all 0.3s;
}
.social-icons-header a:hover {
color: #e91e63;
transform: translateY(-2px);
}
.hamburger {
display: none;
flex-direction: column;
cursor: pointer;
}
.hamburger span {
width: 25px;
height: 3px;
background: #333;
margin: 3px 0;
transition: 0.3s;
}
/* Buttons */
.btn {
display: inline-block;
padding: 12px 30px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s;
border: none;
cursor: pointer;
font-size: 1rem;
}
.btn-primary {
background: #e91e63;
color: white;
}
.btn-primary:hover {
background: #c2185b;
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(233, 30, 99, 0.3);
}
.btn-secondary {
background: transparent;
color: #e91e63;
border: 2px solid #e91e63;
}
.btn-secondary:hover {
background: #e91e63;
color: white;
transform: translateY(-2px);
}
.btn-whatsapp {
background: #25D366;
color: white;
display: flex;
align-items: center;
gap: 8px;
}
.btn-whatsapp:hover {
background: #128C7E;
}
/* Hero Section */
.hero {
height: 100vh;
position: relative;
overflow: hidden;
}
.hero-slider {
position: relative;
height: 100%;
width: 100%;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slide.active {
opacity: 1;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
background: rgba(0,0,0,0.5);
padding: 3rem;
border-radius: 20px;
backdrop-filter: blur(10px);
}
.hero-content h1 {
font-size: 3.5rem;
margin-bottom: 1rem;
font-weight: 700;
}
.hero-content p {
font-size: 1.3rem;
margin-bottom: 2rem;
}
.hero-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* Category Slider */
.category-slider {
padding: 5rem 0;
background: #f8f9fa;
}
.category-slider h2 {
text-align: center;
font-size: 2.5rem;
margin-bottom: 3rem;
color: #333;
}
.slider-container {
overflow-x: auto;
padding: 1rem 0;
scrollbar-width: thin;
}
.category-cards {
display: flex;
gap: 2rem;
padding: 1rem 0;
}
.category-card {
min-width: 280px;
background: white;
padding: 2rem;
border-radius: 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
flex: 1;
}
.category-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(233,30,99,0.2);
}
.category-card i {
font-size: 3rem;
color: #e91e63;
margin-bottom: 1rem;
}
.category-card h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
}
/* Services */
.services-hero, .projects-hero, .contact-hero {
padding: 8rem 0 4rem;
text-align: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
margin-top: 80px;
}
.services-hero h1, .projects-hero h1, .contact-hero h1 {
font-size: 3rem;
margin-bottom: 1rem;
}
.services-grid, .projects-grid {
padding: 5rem 0;
}
.service-card, .project-card {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
transition: all 0.3s;
margin-bottom: 3rem;
}
.service-card:hover, .project-card:hover {
transform: translateY(-10px);
box-shadow: 0 30px 60px rgba(0,0,0,0.15);
}
.service-card img, .project-card img {
width: 100%;
height: 250px;
object-fit: cover;
}
.service-content, .project-content {
padding: 2rem;
}
.service-icon {
font-size: 3rem;
color: #e91e63;
margin-bottom: 1rem;
}
.service-buttons, .project-tags {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-top: 1.5rem;
}
.project-tags span {
background: #e91e63;
color: white;
padding: 5px 15px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
}
/* Contact */
.contact-content {
padding: 5rem 0;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
margin-top: 3rem;
}
.contact-info h3 {
color: #e91e63;
margin-bottom: 1rem;
}
.contact-info p {
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 10px;
}
.contact-form {
background: #f8f9fa;
padding: 2rem;
border-radius: 20px;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group input, .form-group textarea, .form-group select {
width: 100%;
padding: 15px;
border: 2px solid #eee;
border-radius: 10px;
font-family: inherit;
transition: border-color 0.3s;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
outline: none;
border-color: #e91e63;
}
/* Modal */
.modal {
display: none;
position: fixed;
z-index: 2000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
backdrop-filter: blur(5px);
}
.modal-content {
background: white;
margin: 5% auto;
padding: 2rem;
border-radius: 20px;
width: 90%;
max-width: 500px;
position: relative;
animation: modalSlideIn 0.3s ease;
}
@keyframes modalSlideIn {
from { transform: translateY(-50px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.close {
position: absolute;
right: 20px;
top: 15px;
font-size: 2rem;
cursor: pointer;
color: #666;
}
.close:hover {
color: #e91e63;
}
.quote-form input, .quote-form select, .quote-form textarea {
margin-bottom: 1rem;
}
/* Footer */
.footer {
background: #222;
color: white;
padding: 4rem 0 1rem;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.footer-section h3 {
margin-bottom: 1rem;
color: #e91e63;
}
.footer-section ul {
list-style: none;
}
.footer-section ul li {
margin-bottom: 0.5rem;
}
.footer-section a {
color: #ccc;
text-decoration: none;
transition: color 0.3s;
}
.footer-section a:hover {
color: #e91e63;
}
.social-icons {
display: flex;
gap: 1rem;
}
.social-icons a {
width: 45px;
height: 45px;
background: #e91e63;
color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.3s;
}
.social-icons a:hover {
transform: translateY(-3px) scale(1.1);
box-shadow: 0 10px 25px rgba(233,30,99,0.4);
}
.footer-bottom {
text-align: center;
padding-top: 2rem;
border-top: 1px solid #444;
color: #999;
}
/* Floating WhatsApp */
.whatsapp-float {
position: fixed;
width: 60px;
height: 60px;
bottom: 40px;
right: 40px;
background: #25D366;
color: white;
border-radius: 50px;
text-align: center;
font-size: 30px;
box-shadow: 0 10px 25px rgba(37,211,102,0.5);
z-index: 100;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.whatsapp-float:hover {
transform: translateY(-5px) scale(1.1);
box-shadow: 0 15px 35px rgba(37,211,102,0.7);
}
/* Responsive */
@media (max-width: 768px) {
.hamburger {
display: flex;
}
.nav-menu {
position: fixed;
left: -100%;
top: 70px;
flex-direction: column;
background: white;
width: 100%;
text-align: center;
transition: 0.3s;
box-shadow: 0 10px 27px rgba(0,0,0,0.05);
padding: 2rem 0;
}
.nav-menu.active {
left: 0;
}
.social-icons-header {
display: none;
}
.hero-content h1 {
font-size: 2.5rem;
}
.hero-buttons {
flex-direction: column;
align-items: center;
}
.category-cards {
flex-direction: column;
}
.contact-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.services-hero h1, .projects-hero h1, .contact-hero h1 {
font-size: 2rem;
}
}
/* Page sections hide/show */
.page-section {
display: none;
}
.page-section.active {
display: block;
}
</style>
</head>
<body>
<!-- Header -->
<header class="header">
<nav class="navbar">
<div class="nav-container">
<div class="logo">
<i class="fas fa-lightbulb"></i>
Light On Innovation
</div>
<ul class="nav-menu" id="navMenu">
<li><a href="#home" class="nav-link active" onclick="showPage('home')">Home</a></li>
<li><a href="#services" class="nav-link" onclick="showPage('services')">Services</a></li>
<li><a href="#projects" class="nav-link" onclick="showPage('projects')">Projects</a></li>
<li><a href="#contact" class="nav-link" onclick="showPage('contact')">Contact</a></li>
</ul>
<div class="social-icons-header">
<a href="https://facebook.com" target="_blank" title="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="https://instagram.com" target="_blank" title="Instagram"><i class="fab fa-instagram"></i></a>
<a href="https://linkedin.com" target="_blank" title="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
<a href="https://youtube.com" target="_blank" title="YouTube"><i class="fab fa-youtube"></i></a>
<a href="https://wa.me/919876543210" target="_blank" title="WhatsApp"><i class="fab fa-whatsapp"></i></a>
</div>
<div class="hamburger" onclick="toggleMenu()">
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
</header>
<!-- Home Page -->
<section id="home" class="page-section active">
<!-- Hero -->
<section class="hero">
<div class="hero-slider">
<div class="slide active">
<img src="https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=1400&h=800&fit=crop" alt="Electrical Engineering">
<div class="hero-content">
<h1>Innovative Engineering Solutions</h1>
<p>Transforming ideas into reality with cutting-edge technology</p>
<div class="hero-buttons">
<a href="#contact" class="btn btn-primary" onclick="showPage('contact')">Contact Now</a>
<a href="#" class="btn btn-secondary quote-btn">Get Quotation</a>
</div>
</div>
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1558618047-3c8c76bbb
