Bootstrap 5
Template
Agency
Business
Professional
Responsive
Template professionnel pour agence digitale avec sections hero, services, portfolio, témoignages et contact. Design moderne et performant.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Template Agency 01 | AngularForAll</title>
<meta name="description" content="Nexura - Agence de transformation digitale : innovations IA, stratégie data et expérience utilisateur. Accompagnement sur-mesure pour votre révolution numérique.">
<!-- Bootstrap 5 + Icons + Google Fonts + AOS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&display=swap" rel="stylesheet">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background-color: #fefefe;
color: #171717;
overflow-x: hidden;
scroll-behavior: smooth;
}
/* focus accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
outline: 3px solid #3b82f6;
outline-offset: 2px;
}
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #0f172a;
color: white;
padding: 8px 16px;
z-index: 9999;
text-decoration: none;
border-radius: 0 0 8px 0;
transition: top 0.2s;
}
.skip-link:focus {
top: 0;
}
/* modern glassmorphic navbar */
.navbar {
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(12px);
box-shadow: 0 4px 20px rgba(0,0,0,0.02);
transition: all 0.3s;
padding: 0.8rem 0;
}
.navbar-brand {
font-weight: 800;
font-size: 1.8rem;
background: linear-gradient(135deg, #2563eb, #7c3aed);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.nav-link {
font-weight: 500;
color: #1e293b !important;
margin: 0 0.3rem;
transition: 0.2s;
}
.nav-link:hover {
color: #2563eb !important;
}
.btn-gradient {
background: linear-gradient(95deg, #2563eb, #4f46e5);
border: none;
color: white;
font-weight: 600;
padding: 0.6rem 1.6rem;
border-radius: 40px;
transition: transform 0.2s, box-shadow 0.2s;
}
.btn-gradient:hover {
transform: translateY(-2px);
box-shadow: 0 12px 22px -12px #2563eb;
color: white;
}
.hero-section {
padding: 140px 0 100px;
background: radial-gradient(circle at 10% 30%, rgba(37,99,235,0.03), transparent 60%);
}
.badge-ai {
background: #eef2ff;
color: #2563eb;
border-radius: 60px;
padding: 6px 16px;
font-size: 0.8rem;
font-weight: 600;
display: inline-block;
margin-bottom: 1rem;
}
.section-title {
font-weight: 800;
font-size: 2.4rem;
letter-spacing: -0.02em;
background: linear-gradient(135deg, #1e293b, #2d3a5e);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.service-card, .testimonial-card, .blog-card, .portfolio-item {
transition: all 0.3s ease;
border-radius: 28px;
background: white;
border: 1px solid rgba(0,0,0,0.05);
box-shadow: 0 10px 25px -8px rgba(0,0,0,0.03);
}
.service-card:hover, .blog-card:hover {
transform: translateY(-6px);
box-shadow: 0 24px 36px -16px rgba(0,0,0,0.1);
border-color: rgba(37,99,235,0.2);
}
.portfolio-item {
overflow: hidden;
position: relative;
cursor: pointer;
}
.portfolio-img {
transition: transform 0.4s ease;
height: 240px;
object-fit: cover;
width: 100%;
}
.portfolio-item:hover .portfolio-img {
transform: scale(1.05);
}
.overlay-portfolio {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(0deg, rgba(0,0,0,0.7), transparent);
color: white;
padding: 20px;
opacity: 0;
transition: 0.3s;
}
.portfolio-item:hover .overlay-portfolio {
opacity: 1;
}
.testimonial-card {
padding: 2rem;
}
.star-rating i {
color: #fbbf24;
margin-right: 2px;
}
footer {
background: #0f172a;
color: #cbd5e1;
}
.form-control, .form-select {
border-radius: 28px;
padding: 12px 20px;
border: 1px solid #e2e8f0;
}
.form-control:focus {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37,99,235,0.2);
}
@media (max-width: 768px) {
.hero-section { padding: 100px 0 60px; }
.section-title { font-size: 1.9rem; }
}
</style>
</head>
<body>
<!-- Skip to content (accessibility) -->
<a href="#main-content" class="skip-link">Aller au contenu principal</a>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top" aria-label="Navigation principale">
<div class="container">
<a class="navbar-brand" href="#">Nexura<span style="color:#2563eb;">.</span></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Menu navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 gap-2">
<li class="nav-item"><a class="nav-link" href="#accueil">Accueil</a></li>
<li class="nav-item"><a class="nav-link" href="#about">À propos</a></li>
<li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#portfolio">Portfolio</a></li>
<li class="nav-item"><a class="nav-link" href="#testimonials">Avis</a></li>
<li class="nav-item"><a class="nav-link" href="#blog">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
<a href="#contact" class="btn btn-gradient ms-lg-3 d-none d-lg-inline-block">Démarrer</a>
</div>
</div>
</nav>
<main id="main-content">
<!-- Hero / Accroche -->
<header id="accueil" class="hero-section">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-lg-6" data-aos="fade-right" data-aos-duration="800">
<span class="badge-ai"><i class="fas fa-microchip me-1"></i> IA & transformation digitale</span>
<h1 class="display-4 fw-bold mb-3">Réinventez votre entreprise <br>avec l’intelligence augmentée</h1>
<p class="lead text-secondary mb-4">Nexura accompagne les leaders vers un avenir digital performant, éthique et centré sur l’humain. Data, automatisation, expériences sur-mesure.</p>
<div class="d-flex flex-wrap gap-3">
<a href="#contact" class="btn btn-gradient btn-lg px-4">Étudier mon projet <i class="fas fa-arrow-right ms-2"></i></a>
<a href="#services" class="btn btn-outline-primary btn-lg px-4">Découvrir nos solutions</a>
</div>
<div class="mt-4 d-flex align-items-center gap-4 small text-muted">
<span><i class="fas fa-check-circle text-primary me-1"></i> +120 projets accompagnés</span>
<span><i class="fas fa-star text-warning me-1"></i> 98% de satisfaction</span>
</div>
</div>
<div class="col-lg-6 text-center" data-aos="fade-left" data-aos-duration="800">
<img src="https://placehold.co/600x500/EBF4FF/2563eb?text=AI+Transformation" alt="Illustration transformation digitale IA" class="img-fluid rounded-4 shadow-lg" style="max-width: 100%;">
</div>
</div>
</div>
</header>
<!-- About Section -->
<section id="about" class="py-5 py-md-6">
<div class="container py-5">
<div class="row g-5 align-items-center">
<div class="col-lg-6" data-aos="fade-up">
<span class="badge-ai"><i class="fas fa-rocket me-1"></i> Notre ADN</span>
<h2 class="section-title mb-3">L’innovation durable au cœur de la stratégie</h2>
<p class="text-secondary">Fondée par des experts en IA et en transformation organisationnelle, Nexura fusionne technologie de pointe et design centré utilisateur. Nous ne vendons pas de simples outils, nous co-construisons votre feuille de route digitale.</p>
<div class="row mt-4">
<div class="col-6">
<div class="d-flex gap-2 align-items-center mb-3"><i class="fas fa-chart-line fs-3 text-primary"></i> <span><strong>+45%</strong><br>d’efficacité opérationnelle</span></div>
</div>
<div class="col-6">
<div class="d-flex gap-2 align-items-center mb-3"><i class="fas fa-robot fs-3 text-primary"></i> <span><strong>100%</strong><br>automatisation sur-mesure</span></div>
</div>
</div>
<p class="mt-3 fst-italic text-secondary">"Nous croyons que la technologie doit servir l’humain, pas l’inverse. Chaque solution est éthique, transparente et performante."</p>
</div>
<div class="col-lg-6" data-aos="fade-up" data-aos-delay="150">
<div class="bg-light p-4 rounded-4 shadow-sm">
<img src="https://placehold.co/600x400/F1F5F9/2d3a5e?text=Team+Agile" alt="Équipe agence transformation digitale" class="img-fluid rounded-3">
</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-5 bg-light">
<div class="container py-5">
<div class="text-center mb-5" data-aos="fade-up">
<span class="badge-ai"><i class="fas fa-cogs me-1"></i> Exclusivités</span>
<h2 class="section-title">Solutions IA & digitales sur-mesure</h2>
<p class="lead text-secondary w-75 mx-auto">Automatisation intelligente, expériences clients augmentées, et data strategy.</p>
</div>
<div class="row g-4">
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="0">
<div class="service-card p-4 h-100">
<div class="rounded-circle bg-primary bg-opacity-10 d-inline-flex p-3 mb-3"><i class="fas fa-brain fs-1 text-primary"></i></div>
<h4>IA & Data Analytics</h4>
<p class="text-secondary">Modèles prédictifs, analyse comportementale et BI augmentée pour booster vos décisions.</p>
</div>
</div>
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="100">
<div class="service-card p-4 h-100">
<div class="rounded-circle bg-primary bg-opacity-10 d-inline-flex p-3 mb-3"><i class="fas fa-code-branch fs-1 text-primary"></i></div>
<h4>Automatisation RPA + IA</h4>
<p class="text-secondary">Processus métiers automatisés, réduction des tâches à faible valeur ajoutée.</p>
</div>
</div>
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="200">
<div class="service-card p-4 h-100">
<div class="rounded-circle bg-primary bg-opacity-10 d-inline-flex p-3 mb-3"><i class="fas fa-mobile-alt fs-1 text-primary"></i></div>
<h4>Expérience client omnicanale</h4>
<p class="text-secondary">Chatbots cognitifs, personalisation 1:1, parcours digitaux fluides.</p>
</div>
</div>
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
<div class="service-card p-4 h-100">
<div class="rounded-circle bg-primary bg-opacity-10 d-inline-flex p-3 mb-3"><i class="fas fa-cloud-upload-alt fs-1 text-primary"></i></div>
<h4>Cloud & Migration agile</h4>
<p class="text-secondary">Infra scalable, sécurité et adoption du cloud hybride.</p>
</div>
</div>
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="400">
<div class="service-card p-4 h-100">
<div class="rounded-circle bg-primary bg-opacity-10 d-inline-flex p-3 mb-3"><i class="fas fa-chalkboard-user fs-1 text-primary"></i></div>
<h4>Formation & Change Mgmt</h4>
<p class="text-secondary">Accompagnement humain pour ancrer la culture data et IA.</p>
</div>
</div>
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="500">
<div class="service-card p-4 h-100">
<div class="rounded-circle bg-primary bg-opacity-10 d-inline-flex p-3 mb-3"><i class="fas fa-shield-alt fs-1 text-primary"></i></div>
<h4>Cybersécurité & Éthique IA</h4>
<p class="text-secondary">Protection des données, conformité RGPD et IA responsable.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Portfolio Section -->
<section id="portfolio" class="py-5">
<div class="container py-5">
<div class="text-center mb-5" data-aos="fade-up">
<span class="badge-ai"><i class="fas fa-bezier-curve me-1"></i> Réalisations</span>
<h2 class="section-title">Projets qui font la différence</h2>
<p class="lead text-secondary">Des success stories digitales à travers l’industrie, la finance, le retail.</p>
</div>
<div class="row g-4">
<div class="col-md-6 col-lg-4" data-aos="zoom-in">
<div class="portfolio-item rounded-4 overflow-hidden shadow-sm">
<img src="https://placehold.co/600x400/2c3e66/white?text=Retail+AI" alt="Projet retail intelligence artificielle" class="portfolio-img">
<div class="overlay-portfolio"><h5 class="mb-0">Predictive Sales Retail</h5><small>IA & prévisions demande</small></div>
</div>
</div>
<div class="col-md-6 col-lg-4" data-aos="zoom-in" data-aos-delay="100">
<div class="portfolio-item rounded-4 overflow-hidden shadow-sm">
<img src="https://placehold.co/600x400/4f46e5/white?text=Banking+Chatbot" alt="Chatbot bancaire IA" class="portfolio-img">
<div class="overlay-portfolio"><h5 class="mb-0">Assistance Cognitiva</h5><small>Banque 100% conversationnelle</small></div>
</div>
</div>
<div class="col-md-6 col-lg-4" data-aos="zoom-in" data-aos-delay="200">
<div class="portfolio-item rounded-4 overflow-hidden shadow-sm">
<img src="https://placehold.co/600x400/0f172a/white?text=Supply+Chain+AI" alt="Supply chain optimisation IA" class="portfolio-img">
<div class="overlay-portfolio"><h5 class="mb-0">Logistique 4.0</h5><small>Optimisation prédictive</small></div>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials / Ce qu'ils disent de nous -->
<section id="testimonials" class="py-5 bg-light">
<div class="container py-5">
<div class="text-center mb-5" data-aos="fade-up">
<span class="badge-ai"><i class="fas fa-comment-dots me-1"></i> Témoignages</span>
<h2 class="section-title">Ils nous font confiance</h2>
</div>
<div class="row g-4">
<div class="col-md-6 col-lg-4" data-aos="flip-left">
<div class="testimonial-card h-100">
<div class="star-rating mb-3"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
<p class="text-secondary fst-italic">“Nexura a révolutionné notre approche client. L’IA prédictive nous a permis d’augmenter la fidélisation de 34%.”</p>
<div class="d-flex align-items-center gap-3 mt-3">
<img src="public/avatar.png" alt="Photo Sophie D." class="rounded-circle" width="48" height="48"><div><strong>Sophie D.</strong><br><small>Directrice Marketing, Groupe Oria</small></div></div>
</div>
</div>
<div class="col-md-6 col-lg-4" data-aos="flip-left" data-aos-delay="100">
<div class="testimonial-card h-100">
<div class="star-rating mb-3"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
<p class="text-secondary fst-italic">“Accompagnement exceptionnel, des équipes à l'écoute et une vraie expertise en transformation agile. Résultats tangibles en 6 mois.”</p>
<div class="d-flex align-items-center gap-3 mt-3">
<img src="public/avatar.png" alt="Photo Marc L." class="rounded-circle" width="48" height="48"><div><strong>Marc L.</strong><br><small>CEO, Fintech Pulse</small></div></div>
</div>
</div>
<div class="col-md-6 col-lg-4" data-aos="flip-left" data-aos-delay="200">
<div class="testimonial-card h-100">
<div class="star-rating mb-3"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i></div>
<p class="text-secondary fst-italic">“Leurs ateliers de formation ont transformé nos équipes. Aujourd’hui l’IA n’est plus une menace mais un levier de croissance.”</p>
<div class="d-flex align-items-center gap-3 mt-3">
<img src="public/avatar.png" alt="Photo Claire M." class="rounded-circle" width="48" height="48"><div><strong>Claire M.</strong><br><small>DRH, Groupe HORIZON</small></div></div>
</div>
</div>
</div>
</div>
</section>
<!-- Blog Section -->
<section id="blog" class="py-5">
<div class="container py-5">
<div class="text-center mb-5" data-aos="fade-up">
<span class="badge-ai"><i class="fas fa-newspaper me-1"></i> Insights & tendances</span>
<h2 class="section-title">Derniers articles du blog</h2>
<p class="lead text-secondary">IA générative, métavers B2B, éthique digitale – nos experts partagent.</p>
</div>
<div class="row g-4">
<div class="col-md-6 col-lg-4" data-aos="fade-up">
<div class="blog-card h-100 p-3 rounded-4">
<img src="https://placehold.co/600x350/EEF2FF/2563eb?text=Generative+AI" alt="Article IA générative" class="img-fluid rounded-3 w-100" style="height:200px; object-fit:cover;">
<div class="p-3">
<small class="text-primary fw-semibold">26 mars 2025 • 5 min</small>
<h4 class="fs-5 mt-2">Comment l’IA générative redessine l’expérience client</h4>
<p class="text-secondary">Modèles conversationnels, recommandations personnalisées et cas concrets.</p>
<a href="#" class="text-decoration-none fw-semibold" aria-label="Lire l'article sur l'IA générative">Lire plus →</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="100">
<div class="blog-card h-100 p-3 rounded-4">
<img src="https://placehold.co/600x350/F1F5F9/2563eb?text=Ethics+AI" alt="Article éthique IA" class="img-fluid rounded-3 w-100" style="height:200px; object-fit:cover;">
<div class="p-3">
<small class="text-primary fw-semibold">12 mars 2025 • 4 min</small>
<h4 class="fs-5 mt-2">Biais algorithmiques : vers une IA responsable</h4>
<p class="text-secondary">Bonnes pratiques pour des modèles transparents et inclusifs.</p>
<a href="#" class="text-decoration-none fw-semibold" aria-label="Lire article sur l'IA responsable">Lire plus →</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="200">
<div class="blog-card h-100 p-3 rounded-4">
<img src="https://placehold.co/600x350/DBEAFE/2563eb?text=Digital+Workplace" alt="Article transformation workplace" class="img-fluid rounded-3 w-100" style="height:200px; object-fit:cover;">
<div class="p-3">
<small class="text-primary fw-semibold">3 mars 2025 • 7 min</small>
<h4 class="fs-5 mt-2">Le futur du travail : hybridation homme-machine</h4>
<p class="text-secondary">Stratégies de montée en compétence digitale.</p>
<a href="#" class="text-decoration-none fw-semibold" aria-label="Lire article futur du travail">Lire plus →</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-5 bg-dark text-white">
<div class="container py-5">
<div class="row g-5">
<div class="col-lg-5" data-aos="fade-right">
<span class="badge-ai bg-white text-dark"><i class="fas fa-envelope me-1"></i> Contactez-nous</span>
<h2 class="display-6 fw-bold mt-3">Prêt à accélérer votre transformation ?</h2>
<p class="text-white-50 mb-4">Nos experts vous répondent sous 24h. Discutons de vos défis et objectifs.</p>
<ul class="list-unstyled">
<li class="mb-3"><i class="fas fa-map-marker-alt text-primary me-3"></i> 24 avenue de l’Innovation, 75008 Paris</li>
<li class="mb-3"><i class="fas fa-phone-alt text-primary me-3"></i> +33 (0)1 88 88 40 20</li>
<li class="mb-3"><i class="fas fa-envelope text-primary me-3"></i> contact@nexura.ai</li>
</ul>
</div>
<div class="col-lg-7" data-aos="fade-left">
<form id="contactForm" action="#" method="post" class="bg-white p-4 p-lg-5 rounded-4 text-dark shadow">
<div class="row g-3">
<div class="col-md-6"><label for="name" class="form-label">Nom complet</label><input type="text" class="form-control" id="name" placeholder="Sophie Martin" required></div>
<div class="col-md-6"><label for="email" class="form-label">Email professionnel</label><input type="email" class="form-control" id="email" placeholder="sophie@entreprise.com" required></div>
<div class="col-12"><label for="company" class="form-label">Entreprise</label><input type="text" class="form-control" id="company" placeholder="Votre société"></div>
<div class="col-12"><label for="message" class="form-label">Message</label><textarea class="form-control" id="message" rows="4" placeholder="Décrivez votre projet..." required></textarea></div>
<div class="col-12"><button type="submit" class="btn btn-gradient w-100 py-2 fs-6">Envoyer la demande <i class="fas fa-paper-plane ms-2"></i></button></div>
<div class="col-12"><div id="formFeedback" class="small text-success fw-semibold mt-2"></div></div>
</div>
</form>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="pt-5 pb-4">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6"><span class="fw-bold fs-4">Nexura<span class="text-primary">.</span></span><p class="small mt-2">© 2025 Nexura – Agence certifiée B Corp, éthique & innovation.</p></div>
<div class="col-md-6 text-md-end"><a href="#" class="text-white-50 text-decoration-none me-3">Mentions légales</a><a href="#" class="text-white-50 text-decoration-none">Accessibilité : partiellement conforme</a></div>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init({ once: true, duration: 700, offset: 20 });
// Gestion du formulaire (simple démo accessible)
const contactForm = document.getElementById('contactForm');
const feedbackDiv = document.getElementById('formFeedback');
contactForm.addEventListener('submit', (e) => {
e.preventDefault();
const name = document.getElementById('name').value.trim();
const email = document.getElementById('email').value.trim();
if(!name || !email) {
feedbackDiv.innerHTML = '<span class="text-danger">⚠️ Merci de remplir les champs obligatoires (nom, email).</span>';
feedbackDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
return;
}
feedbackDiv.innerHTML = '<i class="fas fa-check-circle"></i> ✅ Merci ! Un expert vous contactera sous 24h.';
contactForm.reset();
setTimeout(() => { feedbackDiv.innerHTML = ''; }, 5000);
});
// smooth scroll for all anchor links (accessibility)
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
const targetId = this.getAttribute('href');
if(targetId === "#" || targetId === "") return;
const targetElem = document.querySelector(targetId);
if(targetElem) {
e.preventDefault();
targetElem.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
</script>
</body>
</html>
Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur