Hugging Face's logo

Spaces:
108HTZ
/
locus-niger
Running

App Files Community
locus-niger / index.html
108HTZ's picture
108HTZ
Add 2 files
a5771ce verified
raw
history blame contribute delete
39 kB
 <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loïc Noyer | Électricité Générale - Toulouse</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'electric-blue': '#0066cc',
'safety-orange': '#ff6600',
'professional-gray': '#333333',
'light-bg': '#f8f9fa',
},
fontFamily: {
'sans': ['"Segoe UI"', 'Roboto', 'sans-serif'],
},
animation: {
'fade-in': 'fadeIn 1s ease-out',
},
keyframes: {
fadeIn: {
'0%': { opacity: '0', transform: 'translateY(20px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
}
}
}
}
}
</script>
<style>
.hero-overlay {
background: linear-gradient(135deg, rgba(0,102,204,0.9) 0%, rgba(0,102,204,0.7) 100%);
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
.nav-link {
position: relative;
}
.nav-link:after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background-color: #ff6600;
transition: width 0.3s;
}
.nav-link:hover:after {
width: 100%;
}
.emergency-badge {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
</style>
</head>
<body class="bg-light-bg text-professional-gray font-sans">
<!-- Navigation -->
<nav class="fixed w-full z-50 bg-white shadow-md">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-20 items-center">
<div class="flex-shrink-0 flex items-center">
<span class="text-xl font-bold text-electric-blue">LOÏC NOYER</span>
<span class="ml-2 text-xs text-safety-orange uppercase tracking-widest">Électricité Générale</span>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-8">
<a href="#accueil" class="nav-link px-3 py-2 text-sm font-medium">ACCUEIL</a>
<a href="#services" class="nav-link px-3 py-2 text-sm font-medium">SERVICES</a>
<a href="#normes" class="nav-link px-3 py-2 text-sm font-medium">NORMES</a>
<a href="#urgence" class="nav-link px-3 py-2 text-sm font-medium">URGENCES</a>
<a href="#contact" class="nav-link px-3 py-2 text-sm font-medium">CONTACT</a>
</div>
</div>
<div class="md:hidden">
<button class="mobile-menu-button p-2 rounded-md text-electric-blue">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- Mobile Menu -->
<div class="mobile-menu hidden md:hidden fixed inset-0 z-40 bg-white">
<div class="flex flex-col items-center justify-center h-full">
<button class="absolute top-6 right-6 p-2 text-electric-blue">
<i class="fas fa-times text-2xl"></i>
</button>
<a href="#accueil" class="block px-3 py-4 text-xl font-bold text-electric-blue hover:text-safety-orange">ACCUEIL</a>
<a href="#services" class="block px-3 py-4 text-xl font-bold text-electric-blue hover:text-safety-orange">SERVICES</a>
<a href="#normes" class="block px-3 py-4 text-xl font-bold text-electric-blue hover:text-safety-orange">NORMES</a>
<a href="#urgence" class="block px-3 py-4 text-xl font-bold text-electric-blue hover:text-safety-orange">URGENCES</a>
<a href="#contact" class="block px-3 py-4 text-xl font-bold text-electric-blue hover:text-safety-orange">CONTACT</a>
</div>
</div>
<!-- Hero Section -->
<section id="accueil" class="relative pt-32 pb-20 md:pt-40 md:pb-28 flex items-center justify-center bg-electric-blue overflow-hidden">
<div class="absolute inset-0 bg-cover bg-center opacity-10" style="background-image: url('https://images.unsplash.com/photo-1600566752355-35792bedcfea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80');"></div>
<div class="hero-overlay absolute inset-0"></div>
<div class="relative z-10 text-center px-4 max-w-4xl mx-auto animate-fade-in">
<h1 class="text-3xl md:text-4xl font-bold mb-6 text-white">
<span class="block">ÉLECTRICITÉ GÉNÉRALE & SÉCURITÉ ÉLECTRIQUE</span>
<span class="block text-safety-orange">À TOULOUSE ET SA RÉGION</span>
</h1>
<p class="text-lg mb-8 font-light text-white max-w-2xl mx-auto">
Professionnel qualifié pour tous vos travaux d'électricité, rénovation et mise en sécurité
</p>
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
<a href="#contact" class="inline-block px-6 py-3 bg-safety-orange text-white hover:bg-white hover:text-electric-blue transition-all duration-300 font-medium">
<i class="fas fa-phone-alt mr-2"></i> 06 26 16 27 25
</a>
<a href="#services" class="inline-block px-6 py-3 border-2 border-white text-white hover:border-safety-orange hover:text-safety-orange transition-all duration-300 font-medium">
NOS SERVICES
</a>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-16 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-2xl md:text-3xl font-bold text-electric-blue mb-4">NOS SERVICES PROFESSIONNELS</h2>
<div class="w-20 h-1 bg-safety-orange mx-auto mb-6"></div>
<p class="max-w-3xl mx-auto text-gray-600">
Des solutions électriques complètes pour particuliers et professionnels
</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Service 1 -->
<div class="service-card bg-white p-6 shadow-sm rounded-lg border border-gray-100 transition-all duration-300">
<div class="w-14 h-14 mx-auto mb-4 flex items-center justify-center rounded-full bg-electric-blue text-white text-2xl">
<i class="fas fa-home"></i>
</div>
<h3 class="text-xl font-bold text-center text-electric-blue mb-3">RÉNOVATION ÉLECTRIQUE</h3>
<p class="text-sm text-gray-600 text-center mb-4">
Remise aux normes complète de votre installation électrique
</p>
<ul class="text-xs space-y-2 text-gray-600">
<li class="flex items-center">
<i class="fas fa-check text-safety-orange mr-2"></i> Remplacement tableau électrique
</li>
<li class="flex items-center">
<i class="fas fa-check text-safety-orange mr-2"></i> Mise en sécurité complète
</li>
<li class="flex items-center">
<i class="fas fa-check text-safety-orange mr-2"></i> Rénovation partielle ou totale
</li>
<li class="flex items-center">
<i class="fas fa-check text-safety-orange mr-2"></i> Diagnostic préalable
</li>
</ul>
</div>
<!-- Service 2 -->
<div class="service-card bg-white p-6 shadow-sm rounded-lg border border-gray-100 transition-all duration-300">
<div class="w-14 h-14 mx-auto mb-4 flex items-center justify-center rounded-full bg-safety-orange text-white text-2xl">
<i class="fas fa-bolt"></i>
</div>
<h3 class="text-xl font-bold text-center text-electric-blue mb-3">MISE EN SÉCURITÉ</h3>
<p class="text-sm text-gray-600 text-center mb-4">
Protection des personnes et des biens contre les risques électriques
</p>
<ul class="text-xs space-y-2 text-gray-600">
<li class="flex items-center">
<i class="fas fa-check text-electric-blue mr-2"></i> Disjoncteur 30mA
</li>
<li class="flex items-center">
<i class="fas fa-check text-electric-blue mr-2"></i> GTL aux normes
</li>
<li class="flex items-center">
<i class="fas fa-check text-electric-blue mr-2"></i> Protection différentielle
</li>
<li class="flex items-center">
<i class="fas fa-check text-electric-blue mr-2"></i> Sécurité des circuits
</li>
</ul>
</div>
<!-- Service 3 -->
<div class="service-card bg-white p-6 shadow-sm rounded-lg border border-gray-100 transition-all duration-300">
<div class="w-14 h-14 mx-auto mb-4 flex items-center justify-center rounded-full bg-electric-blue text-white text-2xl">
<i class="fas fa-tools"></i>
</div>
<h3 class="text-xl font-bold text-center text-electric-blue mb-3">DÉPANNAGE</h3>
<p class="text-sm text-gray-600 text-center mb-4">
Intervention rapide pour tous vos problèmes électriques
</p>
<ul class="text-xs space-y-2 text-gray-600">
<li class="flex items-center">
<i class="fas fa-check text-safety-orange mr-2"></i> Panne de courant
</li>
<li class="flex items-center">
<i class="fas fa-check text-safety-orange mr-2"></i> Disjoncteur qui saute
</li>
<li class="flex items-center">
<i class="fas fa-check text-safety-orange mr-2"></i> Problème d'éclairage
</li>
<li class="flex items-center">
<i class="fas fa-check text-safety-orange mr-2"></i> Prises défectueuses
</li>
</ul>
</div>
<!-- Service 4 -->
<div class="service-card bg-white p-6 shadow-sm rounded-lg border border-gray-100 transition-all duration-300">
<div class="w-14 h-14 mx-auto mb-4 flex items-center justify-center rounded-full bg-safety-orange text-white text-2xl">
<i class="fas fa-file-alt"></i>
</div>
<h3 class="text-xl font-bold text-center text-electric-blue mb-3">DIAGNOSTICS</h3>
<p class="text-sm text-gray-600 text-center mb-4">
Évaluation complète de votre installation électrique
</p>
<ul class="text-xs space-y-2 text-gray-600">
<li class="flex items-center">
<i class="fas fa-check text-electric-blue mr-2"></i> Diagnostic Loi ALUR
</li>
<li class="fas fa-check text-electric-blue mr-2"></i> État de l'installation
</li>
<li class="flex items-center">
<i class="fas fa-check text-electric-blue mr-2"></i> Identification risques
</li>
<li class="flex items-center">
<i class="fas fa-check text-electric-blue mr-2"></i> Préconisations
</li>
</ul>
</div>
<!-- Service 5 -->
<div class="service-card bg-white p-6 shadow-sm rounded-lg border border-gray-100 transition-all duration-300">
<div class="w-14 h-14 mx-auto mb-4 flex items-center justify-center rounded-full bg-electric-blue text-white text-2xl">
<i class="fas fa-plug"></i>
</div>
<h3 class="text-xl font-bold text-center text-electric-blue mb-3">APPAREILLAGE</h3>
<p class="text-sm text-gray-600 text-center mb-4">
Installation et remplacement de tous vos équipements électriques
</p>
<ul class="text-xs space-y-2 text-gray-600">
<li class="flex items-center">
<i class="fas fa-check text-safety-orange mr-2"></i> Prises et interrupteurs
</li>
<li class="flex items-center">
<i class="fas fa-check text-safety-orange mr-2"></i> Va-et-vient, télérupteurs
</li>
<li class="flex items-center">
<i class="fas fa-check text-safety-orange mr-2"></i> Détecteurs de mouvement
</li>
<li class="flex items-center">
<i class="fas fa-check text-safety-orange mr-2"></i> Domotique de base
</li>
</ul>
</div>
<!-- Service 6 -->
<div class="service-card bg-white p-6 shadow-sm rounded-lg border border-gray-100 transition-all duration-300">
<div class="w-14 h-14 mx-auto mb-4 flex items-center justify-center rounded-full bg-safety-orange text-white text-2xl">
<i class="fas fa-building"></i>
</div>
<h3 class="text-xl font-bold text-center text-electric-blue mb-3">NEUF & RÉNOVATION</h3>
<p class="text-sm text-gray-600 text-center mb-4">
Installation électrique complète pour logement neuf ou existant
</p>
<ul class="text-xs space-y-2 text-gray-600">
<li class="flex items-center">
<i class="fas fa-check text-electric-blue mr-2"></i> Tableau électrique neuf
</li>
<li class="flex items-center">
<i class="fas fa-check text-electric-blue mr-2"></i> Câblage complet
</li>
<li class="flex items-center">
<i class="fas fa-check text-electric-blue mr-2"></i> Circuits spécialisés
</li>
<li class="flex items-center">
<i class="fas fa-check text-electric-blue mr-2"></i> Conformité NF C 16-600
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Normes Section -->
<section id="normes" class="py-16 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<h2 class="text-2xl md:text-3xl font-bold text-electric-blue mb-6">CONFORMITÉ AUX NORMES</h2>
<div class="w-20 h-1 bg-safety-orange mb-6"></div>
<div class="space-y-6">
<div class="flex items-start">
<div class="text-electric-blue text-xl mr-4 mt-1">
<i class="fas fa-certificate"></i>
</div>
<div>
<h3 class="text-lg font-bold text-electric-blue mb-2">NF C 16-600</h3>
<p class="text-sm text-gray-600">
Norme française régissant les installations électriques des logements. Nous garantissons une installation 100% conforme pour votre sécurité.
</p>
</div>
</div>
<div class="flex items-start">
<div class="text-safety-orange text-xl mr-4 mt-1">
<i class="fas fa-gavel"></i>
</div>
<div>
<h3 class="text-lg font-bold text-electric-blue mb-2">LOI ALUR</h3>
<p class="text-sm text-gray-600">
Diagnostic électrique obligatoire pour les locations. Nous réalisons ce diagnostic avec professionnalisme et fournissons un rapport détaillé.
</p>
</div>
</div>
<div class="flex items-start">
<div class="text-electric-blue text-xl mr-4 mt-1">
<i class="fas fa-shield-alt"></i>
</div>
<div>
<h3 class="text-lg font-bold text-electric-blue mb-2">SÉCURITÉ 30MA</h3>
<p class="text-sm text-gray-600">
Protection différentielle 30mA obligatoire pour protéger les personnes contre les risques d'électrocution. Nous vérifions et installons ces dispositifs.
</p>
</div>
</div>
</div>
</div>
<div class="bg-white p-8 rounded-lg shadow-sm border border-gray-200">
<h3 class="text-xl font-bold text-electric-blue mb-6">POURQUOI CHOISIR UN PROFESSIONNEL ?</h3>
<div class="space-y-4">
<div class="flex items-start">
<div class="text-safety-orange mr-3 mt-1">
<i class="fas fa-check-circle"></i>
</div>
<div>
<h4 class="font-medium text-electric-blue mb-1">GARANTIE DE SÉCURITÉ</h4>
<p class="text-sm text-gray-600">Une installation conforme aux normes réduit les risques d'incendie et d'électrocution</p>
</div>
</div>
<div class="flex items-start">
<div class="text-safety-orange mr-3 mt-1">
<i class="fas fa-check-circle"></i>
</div>
<div>
<h4 class="font-medium text-electric-blue mb-1">VALORISATION DU BIEN</h4>
<p class="text-sm text-gray-600">Une installation aux normes augmente la valeur de votre propriété</p>
</div>
</div>
<div class="flex items-start">
<div class="text-safety-orange mr-3 mt-1">
<i class="fas fa-check-circle"></i>
</div>
<div>
<h4 class="font-medium text-electric-blue mb-1">CONFORMITÉ LÉGALE</h4>
<p class="text-sm text-gray-600">Obligatoire pour la vente ou location d'un logement</p>
</div>
</div>
<div class="flex items-start">
<div class="text-safety-orange mr-3 mt-1">
<i class="fas fa-check-circle"></i>
</div>
<div>
<h4 class="font-medium text-electric-blue mb-1">ÉCONOMIE D'ÉNERGIE</h4>
<p class="text-sm text-gray-600">Une installation moderne et optimisée réduit votre consommation</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Urgence Section -->
<section id="urgence" class="py-16 bg-electric-blue text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<div class="inline-block emergency-badge bg-safety-orange text-white px-6 py-3 rounded-full mb-6">
<i class="fas fa-exclamation-triangle mr-2"></i> SERVICE D'URGENCE
</div>
<h2 class="text-2xl md:text-3xl font-bold mb-4">DÉPANNAGE ÉLECTRIQUE RAPIDE</h2>
<p class="max-w-3xl mx-auto opacity-90">
Disponible pour intervenir rapidement sur Toulouse et sa région en cas de problème électrique urgent
</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Urgence 1 -->
<div class="bg-white p-6 rounded-lg shadow-sm text-center">
<div class="w-16 h-16 mx-auto mb-4 flex items-center justify-center rounded-full bg-safety-orange text-white text-2xl">
<i class="fas fa-power-off"></i>
</div>
<h3 class="text-xl font-bold text-electric-blue mb-3">PERTE DE COURANT</h3>
<p class="text-sm text-gray-600 mb-4">
Plus d'électricité dans tout ou partie de votre logement ?
</p>
<a href="#contact" class="inline-block px-4 py-2 bg-electric-blue text-white text-sm rounded hover:bg-safety-orange transition-colors">
<i class="fas fa-phone-alt mr-2"></i> Appeler maintenant
</a>
</div>
<!-- Urgence 2 -->
<div class="bg-white p-6 rounded-lg shadow-sm text-center">
<div class="w-16 h-16 mx-auto mb-4 flex items-center justify-center rounded-full bg-safety-orange text-white text-2xl">
<i class="fas fa-fire-extinguisher"></i>
</div>
<h3 class="text-xl font-bold text-electric-blue mb-3">RISQUE D'INCENDIE</h3>
<p class="text-sm text-gray-600 mb-4">
Odeur de brûlé, étincelles ou appareil qui chauffe anormalement ?
</p>
<a href="#contact" class="inline-block px-4 py-2 bg-electric-blue text-white text-sm rounded hover:bg-safety-orange transition-colors">
<i class="fas fa-phone-alt mr-2"></i> Urgence absolue
</a>
</div>
<!-- Urgence 3 -->
<div class="bg-white p-6 rounded-lg shadow-sm text-center">
<div class="w-16 h-16 mx-auto mb-4 flex items-center justify-center rounded-full bg-safety-orange text-white text-2xl">
<i class="fas fa-bolt"></i>
</div>
<h3 class="text-xl font-bold text-electric-blue mb-3">DISJONCTEUR DÉCLENCHÉ</h3>
<p class="text-sm text-gray-600 mb-4">
Impossible de remettre le courant ? Disjoncteur qui saute en permanence ?
</p>
<a href="#contact" class="inline-block px-4 py-2 bg-electric-blue text-white text-sm rounded hover:bg-safety-orange transition-colors">
<i class="fas fa-phone-alt mr-2"></i> Intervention rapide
</a>
</div>
</div>
<div class="mt-12 text-center">
<div class="inline-flex items-center bg-white text-electric-blue px-8 py-4 rounded-lg shadow-md">
<i class="fas fa-phone-alt text-2xl mr-4"></i>
<div class="text-left">
<p class="text-xs uppercase tracking-wider">Appel 24/7 en cas d'urgence</p>
<p class="text-xl font-bold">06 26 16 27 25</p>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-16 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-2 gap-12">
<div>
<h2 class="text-2xl md:text-3xl font-bold text-electric-blue mb-6">CONTACTEZ-NOUS</h2>
<div class="w-20 h-1 bg-safety-orange mb-6"></div>
<p class="text-gray-600 mb-8">
Pour toute demande de devis, intervention ou renseignement, n'hésitez pas à nous contacter.
</p>
<div class="space-y-6">
<div class="flex items-start">
<div class="text-safety-orange mr-4 mt-1">
<i class="fas fa-map-marker-alt"></i>
</div>
<div>
<h4 class="font-bold text-electric-blue mb-1">ADRESSE</h4>
<p class="text-sm text-gray-600">14 Chemin du Château de l'Hers<br>31500 Toulouse</p>
</div>
</div>
<div class="flex items-start">
<div class="text-safety-orange mr-4 mt-1">
<i class="fas fa-phone-alt"></i>
</div>
<div>
<h4 class="font-bold text-electric-blue mb-1">TÉLÉPHONE</h4>
<p class="text-sm text-gray-600">06 26 16 27 25</p>
</div>
</div>
<div class="flex items-start">
<div class="text-safety-orange mr-4 mt-1">
<i class="fas fa-envelope"></i>
</div>
<div>
<h4 class="font-bold text-electric-blue mb-1">EMAIL</h4>
<p class="text-sm text-gray-600">loicnoyer@gmail.com</p>
</div>
</div>
<div class="flex items-start">
<div class="text-safety-orange mr-4 mt-1">
<i class="fas fa-clock"></i>
</div>
<div>
<h4 class="font-bold text-electric-blue mb-1">HORAIRES</h4>
<p class="text-sm text-gray-600">Lundi - Vendredi : 8h - 19h<br>Samedi : 9h - 12h<br>Urgences : 24h/24</p>
</div>
</div>
</div>
<div class="mt-8">
<h4 class="font-bold text-electric-blue mb-3">ZONE D'INTERVENTION</h4>
<p class="text-sm text-gray-600">
Toulouse et sa région dans un rayon de 30km. Déplacements possibles au-delà sur devis.
</p>
</div>
</div>
<div class="bg-gray-50 p-8 rounded-lg shadow-sm border border-gray-200">
<h3 class="text-xl font-bold text-electric-blue mb-6">DEMANDE DE DEVIS</h3>
<form class="space-y-4">
<div>
<input type="text" placeholder="Votre nom" class="w-full px-4 py-2 border-b-2 border-gray-300 focus:border-electric-blue focus:outline-none bg-transparent">
</div>
<div>
<input type="email" placeholder="Votre email" class="w-full px-4 py-2 border-b-2 border-gray-300 focus:border-electric-blue focus:outline-none bg-transparent">
</div>
<div>
<input type="tel" placeholder="Votre téléphone" class="w-full px-4 py-2 border-b-2 border-gray-300 focus:border-electric-blue focus:outline-none bg-transparent">
</div>
<div>
<select class="w-full px-4 py-2 border-b-2 border-gray-300 focus:border-electric-blue focus:outline-none bg-transparent">
<option>Type de prestation</option>
<option>Rénovation électrique</option>
<option>Mise en sécurité</option>
<option>Remplacement tableau</option>
<option>Diagnostic électrique</option>
<option>Dépannage</option>
<option>Autre demande</option>
</select>
</div>
<div>
<textarea rows="4" placeholder="Décrivez votre projet ou problème" class="w-full px-4 py-2 border-b-2 border-gray-300 focus:border-electric-blue focus:outline-none bg-transparent"></textarea>
</div>
<div>
<button type="submit" class="w-full bg-electric-blue text-white py-3 px-6 rounded hover:bg-safety-orange transition-colors font-medium">
ENVOYER LA DEMANDE
</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Map Section -->
<div class="h-96 bg-gray-200">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2889.183317396493!2d1.4538153153648004!3d43.60489017912296!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12aebb6fec8b7a6b%3A0x1c8f5a3b1b5b1b5b!2s14%20Chemin%20du%20Ch%C3%A2teau%20de%20l&#39;Hers%2C%2031500%20Toulouse!5e0!3m2!1sfr!2sfr!4v1623680000000!5m2!1sfr!2sfr"
width="100%"
height="100%"
style="border:0;"
allowfullscreen=""
loading="lazy">
</iframe>
</div>
<!-- Footer -->
<footer class="bg-professional-gray text-white py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-3 gap-8">
<div>
<h3 class="text-xl font-bold text-safety-orange mb-4">LOÏC NOYER ÉLECTRICITÉ</h3>
<p class="text-sm text-gray-300 mb-4">
Électricien général à Toulouse, spécialisé dans les travaux de rénovation, mise en sécurité et dépannage électrique.
</p>
<div class="flex space-x-4">
<a href="#" class="w-8 h-8 rounded-full bg-gray-700 text-white flex items-center justify-center hover:bg-safety-orange transition-colors">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="w-8 h-8 rounded-full bg-gray-700 text-white flex items-center justify-center hover:bg-safety-orange transition-colors">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="w-8 h-8 rounded-full bg-gray-700 text-white flex items-center justify-center hover:bg-safety-orange transition-colors">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
</div>
<div>
<h4 class="font-bold text-safety-orange mb-4">LIENS UTILES</h4>
<ul class="space-y-2">
<li><a href="#accueil" class="text-sm text-gray-300 hover:text-white transition-colors">Accueil</a></li>
<li><a href="#services" class="text-sm text-gray-300 hover:text-white transition-colors">Services</a></li>
<li><a href="#normes" class="text-sm text-gray-300 hover:text-white transition-colors">Normes électriques</a></li>
<li><a href="#urgence" class="text-sm text-gray-300 hover:text-white transition-colors">Dépannage d'urgence</a></li>
<li><a href="#contact" class="text-sm text-gray-300 hover:text-white transition-colors">Contact</a></li>
</ul>
</div>
<div>
<h4 class="font-bold text-safety-orange mb-4">INFORMATIONS</h4>
<ul class="space-y-2 text-sm text-gray-300">
<li class="flex items-start">
<i class="fas fa-certificate text-safety-orange mr-2 mt-1"></i>
<span>Électricien qualifié - Certifié NF C 16-600</span>
</li>
<li class="flex items-start">
<i class="fas fa-shield-alt text-safety-orange mr-2 mt-1"></i>
<span>Assuré RC Pro - Garantie décennale</span>
</li>
<li class="flex items-start">
<i class="fas fa-euro-sign text-safety-orange mr-2 mt-1"></i>
<span>Devis gratuit - Travaux soignés</span>
</li>
</ul>
</div>
</div>
<div class="border-t border-gray-700 mt-12 pt-8 text-center text-sm text-gray-500">
<p>© 2023 Loïc Noyer Électricité Générale - Tous droits réservés</p>
<p class="mt-2">SIRET : [Votre numéro SIRET] - Artisan indépendant</p>
</div>
</div>
</footer>
<script>
// Mobile menu toggle
const mobileMenuButton = document.querySelector('.mobile-menu-button');
const mobileMenu = document.querySelector('.mobile-menu');
const mobileMenuClose = mobileMenu.querySelector('button');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.remove('hidden');
});
mobileMenuClose.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
// Close mobile menu if open
mobileMenu.classList.add('hidden');
}
});
});
// Scroll reveal animation
const scrollElements = document.querySelectorAll('.service-card');
const elementInView = (el) => {
const elementTop = el.getBoundingClientRect().top;
return (
elementTop <= (window.innerHeight || document.documentElement.clientHeight)
);
};
const displayScrollElement = (element) => {
element.classList.add('animate-fade-in');
};
const handleScrollAnimation = () => {
scrollElements.forEach((el) => {
if (elementInView(el)) {
displayScrollElement(el);
}
});
};
window.addEventListener('scroll', () => {
handleScrollAnimation();
});
// Initialize animations on load
document.addEventListener('DOMContentLoaded', () => {
handleScrollAnimation();
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=108HTZ/locus-niger" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>