TheMaximeSan
6e6807d895
Ajout d'une navigation (desktop + menu mobile plein écran), d'un hero avec appels à l'action, d'une section services, d'une bande CTA et d'une section contact avec carte. Typographie, couleurs et animations retravaillées pour un rendu plus premium sur mobile et desktop.
260 lines
12 KiB
HTML
260 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Fernando Paysagiste — Création & entretien de jardins à Nancy</title>
|
||
<meta name="description" content="Fernando Paysagiste, artisan indépendant à Nancy : tonte, taille de haies, création et entretien d'espaces verts. Devis gratuit et sans engagement.">
|
||
<meta name="theme-color" content="#154e1f">
|
||
|
||
<link rel="icon" href="assets/images/logo.png" type="image/png">
|
||
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700;800&display=swap" rel="stylesheet">
|
||
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
|
||
<link rel="stylesheet" href="css/styles.css">
|
||
</head>
|
||
<body>
|
||
|
||
<header class="site-header">
|
||
<div class="header-inner">
|
||
<a href="#accueil" class="brand">
|
||
<img src="assets/images/logo.png" alt="Logo Fernando Paysagiste" id="logo">
|
||
<span>Fernando <strong>Paysagiste</strong></span>
|
||
</a>
|
||
|
||
<nav class="nav-desktop">
|
||
<a href="#accueil">Accueil</a>
|
||
<a href="#services">Services</a>
|
||
<a href="#realisations">Réalisations</a>
|
||
<a href="#contact">Contact</a>
|
||
|
||
<div class="nav-socials">
|
||
<a href="https://www.instagram.com/fernando.paysagiste/" aria-label="Instagram"><i class="fa-brands fa-instagram"></i></a>
|
||
<a href="https://www.youtube.com/@Fernando-i6k3i" aria-label="YouTube"><i class="fa-brands fa-youtube"></i></a>
|
||
<a href="https://www.tiktok.com/@fernandoklein505" aria-label="TikTok"><i class="fa-brands fa-tiktok"></i></a>
|
||
<a href="https://www.linkedin.com/in/fernando-klein-72540a419/" aria-label="LinkedIn"><i class="fa-brands fa-linkedin"></i></a>
|
||
</div>
|
||
|
||
<a href="#contact" class="btn btn-primary nav-cta">Devis gratuit</a>
|
||
</nav>
|
||
|
||
<label for="nav-toggle" class="nav-burger" aria-label="Ouvrir le menu">
|
||
<span></span>
|
||
</label>
|
||
</div>
|
||
</header>
|
||
|
||
<input type="checkbox" id="nav-toggle" class="nav-toggle">
|
||
<nav class="nav-mobile">
|
||
<a href="#accueil">Accueil</a>
|
||
<a href="#services">Services</a>
|
||
<a href="#realisations">Réalisations</a>
|
||
<a href="#contact">Contact</a>
|
||
|
||
<div class="nav-socials">
|
||
<a href="https://www.instagram.com/fernando.paysagiste/" aria-label="Instagram"><i class="fa-brands fa-instagram"></i></a>
|
||
<a href="https://www.youtube.com/@Fernando-i6k3i" aria-label="YouTube"><i class="fa-brands fa-youtube"></i></a>
|
||
<a href="https://www.tiktok.com/@fernandoklein505" aria-label="TikTok"><i class="fa-brands fa-tiktok"></i></a>
|
||
<a href="https://www.linkedin.com/in/fernando-klein-72540a419/" aria-label="LinkedIn"><i class="fa-brands fa-linkedin"></i></a>
|
||
</div>
|
||
|
||
<a href="#contact" class="btn btn-primary nav-cta">Devis gratuit</a>
|
||
</nav>
|
||
|
||
<main>
|
||
<section class="hero" id="accueil">
|
||
<img src="assets/images/photo_6.png" alt="Fernando en intervention de taille d'arbre" id="photo">
|
||
<img src="assets/images/photo_6_small.png" alt="Fernando en intervention de taille d'arbre" id="photosmall">
|
||
<img src="assets/images/photo_6_large.png" alt="Fernando en intervention de taille d'arbre" id="photolarge">
|
||
<div class="hero-overlay"></div>
|
||
|
||
<div class="hero-content">
|
||
<p class="hero-kicker">Artisan paysagiste — Nancy & environs</p>
|
||
<h1>Un extérieur qui vous ressemble, entretenu avec passion</h1>
|
||
<p class="hero-text">Fernando Paysagiste est une autoentreprise de proximité, spécialisée dans la création et l'entretien d'espaces verts. De la tonte à l'aménagement complet de votre jardin, chaque intervention est réalisée avec professionnalisme, passion et souci du détail.</p>
|
||
<div class="hero-actions">
|
||
<a href="#contact" class="btn btn-primary">Demander un devis gratuit</a>
|
||
<a href="tel:0763027356" class="btn btn-outline"><i class="fa-solid fa-phone"></i> 07 63 02 73 56</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="highlights">
|
||
<div class="highlight">
|
||
<i class="fa-solid fa-file-invoice"></i>
|
||
<div>
|
||
<h3>Devis gratuit</h3>
|
||
<p>Sans engagement</p>
|
||
</div>
|
||
</div>
|
||
<div class="highlight">
|
||
<i class="fa-solid fa-clock"></i>
|
||
<div>
|
||
<h3>Disponible 6j/7</h3>
|
||
<p>Lun–Ven 8h–20h, Sam matin</p>
|
||
</div>
|
||
</div>
|
||
<div class="highlight">
|
||
<i class="fa-solid fa-seedling"></i>
|
||
<div>
|
||
<h3>Travail soigné</h3>
|
||
<p>Précision & minutie</p>
|
||
</div>
|
||
</div>
|
||
<div class="highlight">
|
||
<i class="fa-solid fa-location-dot"></i>
|
||
<div>
|
||
<h3>Proximité</h3>
|
||
<p>Nancy et alentours</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="services" id="services">
|
||
<p class="section-kicker">Mes prestations</p>
|
||
<h2 class="section-title">Des services complets pour votre jardin</h2>
|
||
<p class="section-subtitle">Un accompagnement sur-mesure, de l'entretien courant à la création d'espaces verts entièrement pensés pour vous.</p>
|
||
|
||
<div class="services-grid">
|
||
<article class="service-card">
|
||
<div class="service-icon"><i class="fa-solid fa-scissors"></i></div>
|
||
<h3>Tonte & entretien</h3>
|
||
<p>Entretien régulier de vos pelouses pour un jardin toujours net et soigné.</p>
|
||
</article>
|
||
<article class="service-card">
|
||
<div class="service-icon"><i class="fa-solid fa-tree"></i></div>
|
||
<h3>Taille de haies & d'arbres</h3>
|
||
<p>Taille en hauteur sécurisée, mise en forme des haies et élagage soigné.</p>
|
||
</article>
|
||
<article class="service-card">
|
||
<div class="service-icon"><i class="fa-solid fa-leaf"></i></div>
|
||
<h3>Création de jardins</h3>
|
||
<p>Conception et aménagement complet d'espaces verts adaptés à vos envies.</p>
|
||
</article>
|
||
<article class="service-card">
|
||
<div class="service-icon"><i class="fa-solid fa-broom"></i></div>
|
||
<h3>Débroussaillage & nettoyage</h3>
|
||
<p>Remise en état de terrains négligés ou envahis par la végétation.</p>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="projets" id="realisations">
|
||
<p class="section-kicker">Portfolio</p>
|
||
<h2 class="section-title">Mes réalisations</h2>
|
||
<p class="section-subtitle scroll-hint"><i class="fa-solid fa-arrows-left-right"></i> Glissez pour voir plus</p>
|
||
|
||
<div class="gallery">
|
||
<div><img src="assets/images/photo_1.jpg" alt="Taille d'arbre en hauteur avec équipement de sécurité" loading="lazy"></div>
|
||
<div><img src="assets/images/photo_2.jpg" alt="Allée de pelouse fraîchement tondue entre deux haies" loading="lazy"></div>
|
||
<div><img src="assets/images/photo_3.png" alt="Jardin entretenu avec pelouse tondue et arbres" loading="lazy"></div>
|
||
<div><img src="assets/images/photo_4.jpg" alt="Aménagement d'espace vert" loading="lazy"></div>
|
||
<div><img src="assets/images/photo_5.jpg" alt="Entretien de jardin résidentiel" loading="lazy"></div>
|
||
<div><img src="assets/images/photo_7.png" alt="Réalisation d'aménagement paysager" loading="lazy"></div>
|
||
<div><img src="assets/images/photo_8.png" alt="Espace vert entretenu par Fernando Paysagiste" loading="lazy"></div>
|
||
<div><img src="assets/images/photo_9.png" alt="Pelouse tondue avec arbre et haies taillées" loading="lazy"></div>
|
||
<div><img src="assets/images/photo_10.png" alt="Jardin paysager après intervention" loading="lazy"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="cta-band">
|
||
<h2>Un projet de jardin en tête ?</h2>
|
||
<p>Contactez-moi pour un devis gratuit et sans engagement, adapté à votre budget et à vos envies.</p>
|
||
<a href="#contact" class="btn btn-light">Me contacter</a>
|
||
</section>
|
||
|
||
<section class="contact" id="contact">
|
||
<p class="section-kicker">Contact</p>
|
||
<h2 class="section-title">Parlons de votre projet</h2>
|
||
<p class="section-subtitle">Un appel, un message, et je reviens vers vous rapidement pour organiser une visite ou établir un devis.</p>
|
||
|
||
<div class="contact-grid">
|
||
<div class="contact-cards">
|
||
<a class="contact-card" href="tel:0763027356">
|
||
<i class="fa-solid fa-phone"></i>
|
||
<div>
|
||
<h3>Téléphone</h3>
|
||
<p>07 63 02 73 56</p>
|
||
</div>
|
||
</a>
|
||
<a class="contact-card" href="mailto:fernando.paysagiste@gmail.com">
|
||
<i class="fa-solid fa-envelope"></i>
|
||
<div>
|
||
<h3>Email</h3>
|
||
<p>fernando.paysagiste@gmail.com</p>
|
||
</div>
|
||
</a>
|
||
<div class="contact-card">
|
||
<i class="fa-solid fa-location-dot"></i>
|
||
<div>
|
||
<h3>Secteur d'intervention</h3>
|
||
<p>Nancy et environs</p>
|
||
</div>
|
||
</div>
|
||
<div class="contact-card">
|
||
<i class="fa-solid fa-clock"></i>
|
||
<div>
|
||
<h3>Disponibilité</h3>
|
||
<p>Lundi au Vendredi : 8h à 20h<br>Samedi : matinée uniquement</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="contact-map">
|
||
<iframe
|
||
title="Zone d'intervention à Nancy"
|
||
src="https://www.openstreetmap.org/export/embed.html?bbox=6.1244%2C48.6521%2C6.2444%2C48.7321&layer=mapnik&marker=48.6921%2C6.1844"
|
||
loading="lazy"></iframe>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer>
|
||
<div class="footer-top">
|
||
<a href="#accueil" class="brand">
|
||
<img src="assets/images/logo.png" alt="Logo Fernando Paysagiste">
|
||
<span>Fernando <strong>Paysagiste</strong></span>
|
||
</a>
|
||
<div class="footer-socials">
|
||
<a href="https://www.instagram.com/fernando.paysagiste/" aria-label="Instagram"><i class="fa-brands fa-instagram"></i></a>
|
||
<a href="https://www.youtube.com/@Fernando-i6k3i" aria-label="YouTube"><i class="fa-brands fa-youtube"></i></a>
|
||
<a href="https://www.tiktok.com/@fernandoklein505" aria-label="TikTok"><i class="fa-brands fa-tiktok"></i></a>
|
||
<a href="https://www.linkedin.com/in/fernando-klein-72540a419/" aria-label="LinkedIn"><i class="fa-brands fa-linkedin"></i></a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer-sections">
|
||
<div class="footer-block">
|
||
<h3>Disponibilité</h3>
|
||
<p>Lundi au Vendredi : 8h à 20h</p>
|
||
<p>Samedi uniquement la matinée</p>
|
||
</div>
|
||
|
||
<div class="footer-block">
|
||
<h3>Contact</h3>
|
||
<p><i class="fa-solid fa-phone"></i> 07.63.02.73.56</p>
|
||
<p><i class="fa-solid fa-envelope"></i> fernando.paysagiste@gmail.com</p>
|
||
<p><i class="fa-solid fa-location-dot"></i> Nancy</p>
|
||
</div>
|
||
|
||
<div class="footer-block">
|
||
<h3>Navigation</h3>
|
||
<p><a href="#services">Services</a></p>
|
||
<p><a href="#realisations">Réalisations</a></p>
|
||
<p><a href="#contact">Contact</a></p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer-bottom">
|
||
<p>© 2026 FERNANDO PAYSAGISTE. Tous droits réservés.</p>
|
||
<a href="#accueil" class="back-to-top" aria-label="Retour en haut"><i class="fa-solid fa-arrow-up"></i></a>
|
||
</div>
|
||
</footer>
|
||
|
||
</body>
|
||
</html>
|