Refonte complète du site en version professionnelle
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.
This commit is contained in:
parent
b52448d7a8
commit
6e6807d895
1104
css/styles.css
1104
css/styles.css
File diff suppressed because it is too large
Load Diff
251
index.html
251
index.html
|
|
@ -3,70 +3,230 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>FERNANDO PAYSAGISTE</title>
|
<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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
|
||||||
<link rel="stylesheet" href="css/styles.css">
|
<link rel="stylesheet" href="css/styles.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<!-- Header Principal (Sans les réseaux) -->
|
<header class="site-header">
|
||||||
<header>
|
<div class="header-inner">
|
||||||
<img src="assets/images/logo.png" alt="logo" id="logo">
|
<a href="#accueil" class="brand">
|
||||||
<h1>FERNANDO PAYSAGISTE</h1>
|
<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>
|
</header>
|
||||||
|
|
||||||
<!-- Barre des Réseaux Sociaux juste sous le header -->
|
<input type="checkbox" id="nav-toggle" class="nav-toggle">
|
||||||
<div class="réseaux">
|
<nav class="nav-mobile">
|
||||||
<a href="https://www.instagram.com/fernando.paysagiste/"><i class="fa-brands fa-instagram"></i></a>
|
<a href="#accueil">Accueil</a>
|
||||||
<a href="https://www.youtube.com/@Fernando-i6k3i"><i class="fa-brands fa-youtube"></i></a>
|
<a href="#services">Services</a>
|
||||||
<a href="https://www.tiktok.com/@fernandoklein505"><i class="fa-brands fa-tiktok"></i></a>
|
<a href="#realisations">Réalisations</a>
|
||||||
<a href="https://www.linkedin.com/in/fernando-klein-72540a419/"><i class="fa-brands fa-linkedin"></i></a>
|
<a href="#contact">Contact</a>
|
||||||
</div>
|
|
||||||
|
<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>
|
<main>
|
||||||
<section class="banner">
|
<section class="hero" id="accueil">
|
||||||
<img src="assets/images/photo_6.png" alt="photo" id="photo">
|
<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="photo" id="photosmall">
|
<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="photo" id="photolarge">
|
<img src="assets/images/photo_6_large.png" alt="Fernando en intervention de taille d'arbre" id="photolarge">
|
||||||
<p>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. Mon objectif est de vous offrir un extérieur harmonieux, agréable à vivre et adapté à vos besoins.</p>
|
<div class="hero-overlay"></div>
|
||||||
</section>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<section class="projets">
|
<div class="hero-content">
|
||||||
<h2>Mes Travaux</h2>
|
<p class="hero-kicker">Artisan paysagiste — Nancy & environs</p>
|
||||||
<div>
|
<h1>Un extérieur qui vous ressemble, entretenu avec passion</h1>
|
||||||
<div>
|
<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>
|
||||||
<img src="assets/images/photo_1.jpg" alt="photo" id="photo1">
|
<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>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="highlights">
|
||||||
|
<div class="highlight">
|
||||||
|
<i class="fa-solid fa-file-invoice"></i>
|
||||||
<div>
|
<div>
|
||||||
<img src="assets/images/photo_2.jpg" alt="photo" id="photo2">
|
<h3>Devis gratuit</h3>
|
||||||
|
<p>Sans engagement</p>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="highlight">
|
||||||
|
<i class="fa-solid fa-clock"></i>
|
||||||
<div>
|
<div>
|
||||||
<img src="assets/images/photo_3.png" alt="photo" id="photo3">
|
<h3>Disponible 6j/7</h3>
|
||||||
|
<p>Lun–Ven 8h–20h, Sam matin</p>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="highlight">
|
||||||
|
<i class="fa-solid fa-seedling"></i>
|
||||||
<div>
|
<div>
|
||||||
<img src="assets/images/photo_4.jpg" alt="photo" id="photo4">
|
<h3>Travail soigné</h3>
|
||||||
|
<p>Précision & minutie</p>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="highlight">
|
||||||
|
<i class="fa-solid fa-location-dot"></i>
|
||||||
<div>
|
<div>
|
||||||
<img src="assets/images/photo_5.jpg" alt="photo" id="photo5">
|
<h3>Proximité</h3>
|
||||||
|
<p>Nancy et alentours</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
</div>
|
||||||
<img src="assets/images/photo_7.png" alt="photo" id="photo7">
|
</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>
|
||||||
<div>
|
|
||||||
<img src="assets/images/photo_8.png" alt="photo" id="photo8">
|
<div class="contact-map">
|
||||||
</div>
|
<iframe
|
||||||
<div>
|
title="Zone d'intervention à Nancy"
|
||||||
<img src="assets/images/photo_9.png" alt="photo" id="photo9">
|
src="https://www.openstreetmap.org/export/embed.html?bbox=6.1244%2C48.6521%2C6.2444%2C48.7321&layer=mapnik&marker=48.6921%2C6.1844"
|
||||||
</div>
|
loading="lazy"></iframe>
|
||||||
<div>
|
|
||||||
<img src="assets/images/photo_10.png" alt="photo" id="photo10">
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer>
|
<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-sections">
|
||||||
<div class="footer-block">
|
<div class="footer-block">
|
||||||
<h3>Disponibilité</h3>
|
<h3>Disponibilité</h3>
|
||||||
|
|
@ -76,14 +236,23 @@
|
||||||
|
|
||||||
<div class="footer-block">
|
<div class="footer-block">
|
||||||
<h3>Contact</h3>
|
<h3>Contact</h3>
|
||||||
<p><i class="fa-solid fa-phone"></i> 07.63.02.73.56 </p>
|
<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-envelope"></i> fernando.paysagiste@gmail.com</p>
|
||||||
<p><i class="fa-solid fa-location-dot"></i> Nancy</p>
|
<p><i class="fa-solid fa-location-dot"></i> Nancy</p>
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
<br>
|
<div class="footer-bottom">
|
||||||
<p>© 2026 FERNANDO PAYSAGISTE. Tous droits réservés.</p>
|
<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>
|
</footer>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user