lsp / index.html
malbaix's picture
Add 2 files
75c64c6 verified
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LSP Plomberie - Votre confort, notre expertise</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');
body {
font-family: 'Montserrat', sans-serif;
background-color: #f8fafc;
}
.water-drop {
position: relative;
}
.water-drop::after {
content: "";
position: absolute;
width: 40px;
height: 40px;
background: linear-gradient(135deg, #3b82f6, #93c5fd);
border-radius: 50% 0 50% 50%;
transform: rotate(45deg);
top: -10px;
right: -15px;
z-index: -1;
}
.flame-icon {
color: #f97316;
text-shadow: 0 0 8px rgba(249, 115, 22, 0.4);
}
.pipe-decoration {
position: absolute;
width: 100%;
height: 20px;
background: repeating-linear-gradient(90deg,
#3b82f6,
#3b82f6 10px,
#93c5fd 10px,
#93c5fd 20px);
bottom: 0;
left: 0;
z-index: 10;
}
@media print {
body {
background-color: white !important;
}
.no-print {
display: none !important;
}
.print-margin {
margin: 0 !important;
padding: 0 !important;
}
}
@page {
size: A5;
margin: 0;
}
</style>
</head>
<body class="print-margin">
<div class="max-w-[21cm] min-h-[14.8cm] mx-auto bg-white shadow-lg overflow-hidden print:shadow-none">
<!-- Header -->
<header class="relative bg-gradient-to-r from-blue-600 to-blue-400 text-white p-6">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4">
<div class="relative">
<div class="w-16 h-16 bg-white rounded-full flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-blue-600" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<div class="water-drop"></div>
</div>
<div>
<h1 class="text-2xl font-bold">LSP PLOMBERIE</h1>
<p class="text-blue-100 italic">Votre confort, notre expertise</p>
</div>
</div>
<div class="hidden md:block">
<div class="flex space-x-2">
<div class="bg-blue-500 p-2 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
</div>
<div class="bg-blue-500 p-2 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
</div>
</div>
</div>
<div class="pipe-decoration"></div>
</header>
<!-- Promotion Banner -->
<div class="bg-gradient-to-r from-orange-500 to-red-500 text-white py-3 px-6 text-center font-bold">
<p class="text-xl">OFFRE EXCEPTIONNELLE : -10% SUR VOTRE PREMIÈRE INTERVENTION</p>
</div>
<!-- Main Content -->
<main class="p-6 grid md:grid-cols-2 gap-8">
<!-- Services Section -->
<div>
<h2 class="text-2xl font-bold text-blue-800 mb-6 border-b-2 border-blue-200 pb-2">NOS SERVICES</h2>
<div class="space-y-6">
<!-- Service 1 -->
<div class="flex items-start space-x-4">
<div class="bg-blue-100 p-3 rounded-full text-blue-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
</svg>
</div>
<div>
<h3 class="font-bold text-blue-700">PLOMBERIE</h3>
<p class="text-gray-600">Installation, dépannage, débouchage, entretien préventif.</p>
</div>
</div>
<!-- Service 2 -->
<div class="flex items-start space-x-4">
<div class="bg-orange-100 p-3 rounded-full text-orange-600 flame-icon">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z" />
</svg>
</div>
<div>
<h3 class="font-bold text-blue-700">CHAUFFAGE</h3>
<p class="text-gray-600">Installation, entretien, dépannage, désembouage de circuits, optimisation
énergétique.</p>
</div>
</div>
<!-- Service 3 -->
<div class="flex items-start space-x-4">
<div class="bg-blue-100 p-3 rounded-full text-blue-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
</svg>
</div>
<div>
<h3 class="font-bold text-blue-700">SALLES DE BAINS</h3>
<p class="text-gray-600">Aménagement complet, rénovation, accessibilité PMR, pose de sanitaires.</p>
</div>
</div>
<!-- Service 4 -->
<div class="flex items-start space-x-4">
<div class="bg-green-100 p-3 rounded-full text-green-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
</svg>
</div>
<div>
<h3 class="font-bold text-blue-700">ÉNERGIES RENOUVELABLES</h3>
<p class="text-gray-600">Pompes à chaleur, panneaux solaires, solutions écologiques.</p>
</div>
</div>
</div>
</div>
<!-- Contact & Guarantee Section -->
<div>
<!-- Guarantee -->
<div class="bg-blue-50 p-6 rounded-lg mb-6 border border-blue-100">
<h2 class="text-xl font-bold text-blue-800 mb-4">GARANTIE & QUALITÉ</h2>
<ul class="space-y-3 text-gray-700">
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd" />
</svg>
<span>Garantie décennale sur nos installations</span>
</li>
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd" />
</svg>
<span>Professionnels certifiés et assurés</span>
</li>
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd" />
</svg>
<span>Devis gratuit et sans engagement</span>
</li>
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd" />
</svg>
<span>Service rapide et disponible 7j/7</span>
</li>
</ul>
</div>
<!-- Contact -->
<div class="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
<h2 class="text-xl font-bold text-blue-800 mb-4">BESOIN D'UN EXPERT ?</h2>
<div class="space-y-4">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600 mr-3" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<span>30 Rue Abbé Pierre, 18000 Bourges</span>
</div>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600 mr-3" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
<div>
<p>06 66 85 75 97</p>
<p>02 48 65 31 29</p>
</div>
</div>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600 mr-3" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
</svg>
<span>www.lsp-plomberie.com</span>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-gray-50 p-4 text-center text-sm text-gray-500 border-t border-gray-200">
<p>© 2025 LSP Plomberie – Tous droits réservés</p>
<p class="mt-1">Professionnels certifiés - Disponible 7j/7 pour vos urgences</p>
</footer>
</div>
<!-- Print Button (hidden when printing) -->
<div class="no-print fixed bottom-4 right-4">
<button onclick="window.print()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full shadow-lg transition duration-200 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
</svg>
Imprimer ce flyer
</button>
</div>
<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=malbaix/lsp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>