254 lines
13 KiB
HTML
Executable File
254 lines
13 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Artisan Multi-services - Rénovation & Bricolage</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #1a1a2e; color: #eee; }
|
|
|
|
header { background: rgba(45, 45, 45, 0.95); padding: 15px 20px; position: fixed; width: 100%; top: 0; z-index: 100; }
|
|
header .container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
|
|
header h1 { color: #e0e0e0; font-size: 22px; font-weight: bold; }
|
|
header nav a { color: #aaa; margin-left: 25px; text-decoration: none; font-size: 14px; }
|
|
header nav a:hover { color: #fff; }
|
|
header .cta { background: #ff9800; color: #212121; padding: 10px 25px; border-radius: 25px; border: none; font-weight: bold; cursor: pointer; }
|
|
|
|
.hero {
|
|
padding: 0; height: 100vh;
|
|
background: linear-gradient(135deg, rgba(45, 45, 45, 0.9) 0%, rgba(74, 74, 74, 0.8) 100%),
|
|
url('https://images.unsplash.com/photo-1581578731548-c64695babe35?w=1920') center/cover;
|
|
display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
|
|
}
|
|
.hero h2 { font-size: 52px; margin-bottom: 15px; }
|
|
.hero .tagline { font-size: 20px; color: #ff9800; margin-bottom: 10px; }
|
|
.hero .zone { color: #ccc; margin-bottom: 35px; }
|
|
.hero .btn { background: #ff9800; color: #212121; padding: 16px 45px; font-size: 16px; border-radius: 30px; border: none; cursor: pointer; font-weight: bold; }
|
|
|
|
.info-bar { background: #424242; padding: 20px; display: flex; justify-content: center; gap: 60px; }
|
|
.info-item { text-align: center; }
|
|
.info-item .label { font-size: 12px; color: #ff9800; text-transform: uppercase; }
|
|
.info-item .value { font-size: 16px; font-weight: bold; }
|
|
|
|
.section { padding: 80px 20px; max-width: 1200px; margin: 0 auto; }
|
|
.section-title { font-size: 42px; margin-bottom: 50px; text-align: center; }
|
|
.section-title span { color: #ff9800; }
|
|
|
|
/* Services */
|
|
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
|
|
.service-card { background: #2d2d2d; padding: 40px 30px; border-radius: 16px; text-align: center; transition: transform 0.3s; }
|
|
.service-card:hover { transform: translateY(-5px); }
|
|
.service-card .icon { font-size: 48px; margin-bottom: 20px; }
|
|
.service-card h3 { font-size: 22px; margin-bottom: 15px; }
|
|
.service-card p { color: #aaa; line-height: 1.6; }
|
|
|
|
/* Portfolio */
|
|
.portfolio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
|
|
.portfolio-item { border-radius: 12px; overflow: hidden; position: relative; }
|
|
.portfolio-item img { width: 100%; height: 250px; object-fit: cover; }
|
|
.portfolio-item .overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.8)); padding: 20px; }
|
|
|
|
/* Pricing */
|
|
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
|
|
.price-card { background: #2d2d2d; padding: 40px; border-radius: 16px; text-align: center; }
|
|
.price-card.popular { border: 2px solid #ff9800; }
|
|
.price-card .name { font-size: 24px; margin-bottom: 15px; }
|
|
.price-card .price { font-size: 42px; color: #ff9800; font-weight: bold; margin-bottom: 20px; }
|
|
.price-card .price span { font-size: 16px; color: #888; }
|
|
.price-card ul { list-style: none; text-align: left; color: #aaa; margin-bottom: 30px; }
|
|
.price-card li { padding: 10px 0; border-bottom: 1px solid #444; }
|
|
.price-card li::before { content: "✓"; color: #ff9800; margin-right: 10px; }
|
|
.price-card button { background: #ff9800; color: #212121; padding: 15px 30px; border-radius: 25px; border: none; font-weight: bold; cursor: pointer; width: 100%; }
|
|
|
|
/* Contact */
|
|
.contact { background: #2d2d2d; }
|
|
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
|
|
.contact h3 { color: #ff9800; font-size: 22px; margin-bottom: 20px; }
|
|
.contact p { color: #bbb; margin-bottom: 12px; }
|
|
.contact-form { display: grid; gap: 15px; }
|
|
.contact-form input, .contact-form textarea, .contact-form select { padding: 15px; border-radius: 10px; border: 2px solid #444; background: #1a1a1a; color: #fff; }
|
|
.contact-form button { background: #ff9800; color: #212121; padding: 15px; border-radius: 10px; border: none; font-weight: bold; cursor: pointer; }
|
|
|
|
footer { background: #212121; padding: 30px; text-align: center; color: #666; }
|
|
|
|
@media (max-width: 768px) {
|
|
.hero h2 { font-size: 32px; }
|
|
.hero .tagline { font-size: 16px; }
|
|
.hero .btn { width: 90%; }
|
|
.services, .portfolio, .pricing, .contact-grid { grid-template-columns: 1fr; }
|
|
header .container { flex-direction: column; gap: 10px; }
|
|
header nav { margin-top: 10px; flex-wrap: wrap; justify-content: center; }
|
|
header nav a { margin: 5px 8px; font-size: 12px; }
|
|
header .cta { margin-top: 10px; }
|
|
.section-title { font-size: 28px; }
|
|
.info-bar { gap: 20px; padding: 15px; flex-wrap: wrap; }
|
|
.price-card { padding: 25px; }
|
|
.price-card .price { font-size: 32px; }
|
|
}
|
|
|
|
.home-btn{position:fixed;top:10px;left:10px;z-index:9999;background:linear-gradient(135deg,#00d9ff,#7b2cbf);color:#fff;border:none;border-radius:8px;padding:10px 15px;font-size:14px;cursor:pointer;text-decoration:none;display:flex;align-items:center;gap:8px;box-shadow:0 2px 10px rgba(0,217,255,0.3);transition:all 0.3s;font-family:-apple-system,BlinkMacSystemFont,sans-serif}.home-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(0,217,255,0.5)}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<a href="https://portal-kolifee.duckdns.org/" class="home-btn" title="Retour au portail"><span style="font-size:18px">🏠</span><span>Accueil</span></a>
|
|
<header>
|
|
<div class="container">
|
|
<h1>🔧 Artisan Multi-services</h1>
|
|
<nav>
|
|
<a href="#services">Services</a>
|
|
<a href="#realisations">Réalisations</a>
|
|
<a href="#tarifs">Tarifs</a>
|
|
<a href="#contact">Contact</a>
|
|
</nav>
|
|
<button class="cta" onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})">Devis gratuit</button>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="hero">
|
|
<h2>Artisan Multi-services</h2>
|
|
<p class="tagline">Rénovation • Bricolage • Petits travaux</p>
|
|
<p class="zone">📍 Paris & Île-de-France</p>
|
|
<button class="btn" onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})">Demander un devis</button>
|
|
</section>
|
|
|
|
<div class="info-bar">
|
|
<div class="info-item"><div class="label">Expérience</div><div class="value">15 ans</div></div>
|
|
<div class="info-item"><div class="label">Certification</div><div class="value">RGE</div></div>
|
|
<div class="info-item"><div class="label">Zone</div><div class="value">Paris & IDF</div></div>
|
|
<div class="info-item"><div class="label">Réponse</div><div class="value">24h</div></div>
|
|
</div>
|
|
|
|
<section class="section" id="services">
|
|
<h2 class="section-title">Mes <span>Services</span></h2>
|
|
<div class="services">
|
|
<div class="service-card">
|
|
<div class="icon">🏠</div>
|
|
<h3>Rénovation</h3>
|
|
<p>Rénovation complète, second œuvre, aménagement intérieur, mise aux normes.</p>
|
|
</div>
|
|
<div class="service-card">
|
|
<div class="icon">🔨</div>
|
|
<h3>Bricolage</h3>
|
|
<p>Montage meubles, peinture, pose de parquet, jointoiement, petites réparations.</p>
|
|
</div>
|
|
<div class="service-card">
|
|
<div class="icon">⚡</div>
|
|
<h3>Électricité</h3>
|
|
<p>Prises, interrupteurs, éclairage, mise aux normes électriques.</p>
|
|
</div>
|
|
<div class="service-card">
|
|
<div class="icon">🚰</div>
|
|
<h3>Plomberie</h3>
|
|
<p>Réparation fuites, remplacement robinets, installation sanitaires.</p>
|
|
</div>
|
|
<div class="service-card">
|
|
<div class="icon">🚪</div>
|
|
<h3>Menuiserie</h3>
|
|
<p>Porte, fenêtre, placard, escalier, terrasse bois.</p>
|
|
</div>
|
|
<div class="service-card">
|
|
<div class="icon">🧹</div>
|
|
<h3>Nettoyage</h3>
|
|
<p>Nettoyage post-travaux, entretient espaces verts.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section" id="realisations">
|
|
<h2 class="section-title">Mes <span>Réalisations</span></h2>
|
|
<div class="portfolio">
|
|
<div class="portfolio-item">
|
|
<img src="https://images.unsplash.com/photo-1484154218962-a197022b5858?w=500" alt="Rénovation salon">
|
|
<div class="overlay">Rénovation salon - Paris 15</div>
|
|
</div>
|
|
<div class="portfolio-item">
|
|
<img src="https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=500" alt="Cuisine">
|
|
<div class="overlay">Aménagement cuisine - Lyon</div>
|
|
</div>
|
|
<div class="portfolio-item">
|
|
<img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=500" alt="Salle de bain">
|
|
<div class="overlay">Rénovation salle de bain</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section" id="tarifs">
|
|
<h2 class="section-title">Mes <span>Tarifs</span></h2>
|
|
<div class="pricing">
|
|
<div class="price-card">
|
|
<div class="name">Heure</div>
|
|
<div class="price">45€ <span>/h</span></div>
|
|
<ul>
|
|
<li>Petits bricolages</li>
|
|
<li>Réparations diverses</li>
|
|
<li>Déplacement inclus</li>
|
|
</ul>
|
|
<button>Commander</button>
|
|
</div>
|
|
<div class="price-card popular">
|
|
<div class="name">Demi-journée</div>
|
|
<div class="price">180€ <span>/demi-jour</span></div>
|
|
<ul>
|
|
<li>3h de travail</li>
|
|
<li>Petits travaux</li>
|
|
<li>Matériel inclus</li>
|
|
<li>Déplacement offert</li>
|
|
</ul>
|
|
<button>Commander</button>
|
|
</div>
|
|
<div class="price-card">
|
|
<div class="name">Journée</div>
|
|
<div class="price">320€ <span>/jour</span></div>
|
|
<ul>
|
|
<li>7h de travail</li>
|
|
<li>Gros chantier</li>
|
|
<li>Matériel inclus</li>
|
|
<li>Déplacement offert</div>
|
|
</ul>
|
|
<button>Commander</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="contact" id="contact">
|
|
<div class="section">
|
|
<h2 class="section-title">Me <span>Contacter</span></h2>
|
|
<div class="contact-grid">
|
|
<div>
|
|
<h3>📍 Zone d'intervention</h3>
|
|
<p>Paris et toute l'Île-de-France</p>
|
|
<br>
|
|
<h3>📞 Contact</h3>
|
|
<p>📞 06 12 34 56 78</p>
|
|
<p>✉️ contact@artisan-multi.fr</p>
|
|
<br>
|
|
<h3>🕐 Disponibilité</h3>
|
|
<p>Lundi - Samedi: 8h - 19h</p>
|
|
<p>Intervention rapide sous 48h</p>
|
|
</div>
|
|
<form class="contact-form">
|
|
<input type="text" placeholder="Votre nom *" required>
|
|
<input type="tel" placeholder="Téléphone *" required>
|
|
<input type="email" placeholder="Email">
|
|
<select>
|
|
<option value="">Type de projet</option>
|
|
<option value="renovation">Rénovation</option>
|
|
<option value="bricolage">Bricolage</option>
|
|
<option value="electricite">Électricité</option>
|
|
<option value="plomberie">Plomberie</option>
|
|
<option value="autre">Autre</option>
|
|
</select>
|
|
<textarea placeholder="Décrivez votre projet..." rows="4" required></textarea>
|
|
<button type="button" onclick="window.location.href='mailto:ronanyves26@gmail.com?subject=Devis Artisan Multi-services'">Demander un devis</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<p>© 2026 Artisan Multi-services. Tous droits réservés.</p>
|
|
</footer>
|
|
</body>
|
|
</html>
|