314 lines
14 KiB
HTML
314 lines
14 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-transparent.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-transparent.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 mobileOnly"><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">
|
||
<style>
|
||
|
||
</style>
|
||
<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>
|
||
|
||
<div class="lightbox" id="lightbox">
|
||
<button type="button" class="lightbox-close" id="lightbox-close" aria-label="Fermer"><i class="fa-solid fa-xmark"></i></button>
|
||
<img src="" alt="" id="lightbox-img">
|
||
</div>
|
||
|
||
<script>
|
||
const navToggle = document.getElementById('nav-toggle');
|
||
document.querySelectorAll('.nav-mobile a').forEach(function (link) {
|
||
link.addEventListener('click', function () {
|
||
navToggle.checked = false;
|
||
});
|
||
});
|
||
|
||
const lightbox = document.getElementById('lightbox');
|
||
const lightboxImg = document.getElementById('lightbox-img');
|
||
const lightboxClose = document.getElementById('lightbox-close');
|
||
|
||
function openLightbox(img) {
|
||
lightboxImg.src = img.src;
|
||
lightboxImg.alt = img.alt;
|
||
lightbox.classList.add('is-open');
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
|
||
function closeLightbox() {
|
||
lightbox.classList.remove('is-open');
|
||
lightboxImg.src = '';
|
||
document.body.style.overflow = '';
|
||
}
|
||
|
||
document.querySelectorAll('.gallery img').forEach(function (img) {
|
||
img.addEventListener('click', function () {
|
||
openLightbox(img);
|
||
});
|
||
});
|
||
|
||
lightboxClose.addEventListener('click', closeLightbox);
|
||
|
||
lightbox.addEventListener('click', function (e) {
|
||
if (e.target === lightbox) {
|
||
closeLightbox();
|
||
}
|
||
});
|
||
|
||
document.addEventListener('keydown', function (e) {
|
||
if (e.key === 'Escape') {
|
||
closeLightbox();
|
||
}
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|