Bootstrap 5
Template
Ecommerce
Product Loading
Shop
Template spécial e-commerce avec système de chargement progressif des produits, filtres dynamiques et mise en page optimisée.
<!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 Loading Product Bootstrap 5 20260421101 | AngularForAll</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- AOS Animation Library -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<style>
/* Custom CSS */
:root {
--primary: #6366f1;
--primary-dark: #4f46e5;
--secondary: #8b5cf6;
--dark: #1f2937;
--light: #f3f4f6;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 70px;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
color: var(--dark);
overflow-x: hidden;
}
/* Navbar */
.navbar {
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.navbar-scrolled {
background: rgba(255, 255, 255, 0.95) !important;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}
/* Hero Section */
.hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,0.1)" fill-opacity="1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,154.7C960,171,1056,181,1152,165.3C1248,149,1344,107,1392,85.3L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
background-size: cover;
opacity: 0.3;
}
/* Product Image Animation */
.product-image {
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
/* Feature Cards */
.feature-card {
transition: all 0.3s ease;
border: none;
border-radius: 1rem;
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.feature-icon {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
font-size: 2rem;
}
/* Stats Section */
.stats-section {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
}
.stat-number {
font-size: 3rem;
font-weight: bold;
margin-bottom: 0.5rem;
}
/* Testimonials */
.testimonial-card {
border: none;
border-radius: 1rem;
transition: all 0.3s ease;
}
.testimonial-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.testimonial-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
}
/* Pricing Cards */
.pricing-card {
border: none;
border-radius: 1rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.pricing-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.pricing-card.popular {
border: 2px solid var(--primary);
transform: scale(1.05);
}
.popular-badge {
position: absolute;
top: 20px;
right: -30px;
background: var(--primary);
color: white;
padding: 5px 30px;
transform: rotate(45deg);
font-size: 0.8rem;
font-weight: bold;
}
/* CTA Section */
.cta-section {
background: linear-gradient(135deg, var(--dark), #000);
position: relative;
overflow: hidden;
}
.cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(99,102,241,0.1)" fill-opacity="1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,154.7C960,171,1056,181,1152,165.3C1248,149,1344,107,1392,85.3L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat top;
background-size: cover;
opacity: 0.3;
}
/* Newsletter */
.newsletter-input {
border-radius: 50px;
padding: 0.75rem 1.5rem;
border: none;
}
.newsletter-btn {
border-radius: 50px;
padding: 0.75rem 2rem;
background: var(--primary);
color: white;
transition: all 0.3s ease;
}
.newsletter-btn:hover {
background: var(--primary-dark);
transform: translateY(-2px);
}
/* Progress Bar */
.progress-bar-custom {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 3px;
background: linear-gradient(90deg, var(--primary), var(--secondary));
z-index: 9999;
transition: width 0.3s ease;
}
/* Back to Top Button */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 1000;
border: none;
}
.back-to-top.show {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
background: var(--primary-dark);
transform: translateY(-5px);
}
/* Responsive */
@media (max-width: 768px) {
.pricing-card.popular {
transform: scale(1);
}
.stat-number {
font-size: 2rem;
}
}
/* Animation delays */
[data-aos] {
pointer-events: none;
}
[data-aos].aos-animate {
pointer-events: auto;
}
</style>
</head>
<body>
<!-- Progress Bar -->
<div class="progress-bar-custom" id="progressBar"></div>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top" id="navbar">
<div class="container">
<a class="navbar-brand fw-bold fs-3" href="#home">
<i class="fas fa-cube me-2" style="color: var(--primary);"></i>
Product<span style="color: var(--primary);">X</span>
</a>
<button class="navbar-toggler" type="button" aria-label="Toggle navigation"
data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" href="#home">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#features">Fonctionnalités</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">À propos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#testimonials">Avis</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Tarifs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
<a href="#pricing" class="btn btn-primary ms-lg-3 rounded-pill px-4">Acheter maintenant</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="hero min-vh-100 d-flex align-items-center position-relative">
<div class="container position-relative">
<div class="row align-items-center">
<div class="col-lg-6" data-aos="fade-right">
<h1 class="display-3 fw-bold mb-4 text-white">
Révolutionnez votre <span class="text-warning">quotidien</span> avec ProductX
</h1>
<p class="lead mb-4 text-white-50">
Découvrez la solution innovante qui va transformer votre façon de travailler.
Simple, puissante et efficace.
</p>
<div class="d-flex gap-3">
<a href="#pricing" class="btn btn-light btn-lg rounded-pill px-5">
<i class="fas fa-shopping-cart me-2"></i>Acheter maintenant
</a>
<a href="#features" class="btn btn-outline-light btn-lg rounded-pill px-5">
<i class="fas fa-play me-2"></i>Voir la démo
</a>
</div>
<div class="mt-5 d-flex gap-4">
<div>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<p class="text-white-50 mt-2">+5000 avis 5 étoiles</p>
</div>
<div>
<i class="fas fa-users text-white"></i>
<span class="text-white fw-bold ms-2">10k+</span>
<p class="text-white-50">Clients satisfaits</p>
</div>
</div>
</div>
<div class="col-lg-6 mt-5 mt-lg-0" data-aos="fade-left">
<img src="public/mobile1.png"
alt="ProductX" class="img-fluid product-image">
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="py-5">
<div class="container py-5">
<div class="text-center mb-5" data-aos="fade-up">
<h2 class="display-4 fw-bold mb-3">Fonctionnalités <span class="text-primary">incroyables</span></h2>
<p class="lead text-muted">Tout ce dont vous avez besoin dans un seul produit</p>
</div>
<div class="row g-4">
<div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="100">
<div class="card feature-card h-100 text-center p-4 shadow-sm">
<div class="feature-icon mx-auto">
<i class="fas fa-bolt"></i>
</div>
<h5 class="card-title fw-bold mb-3">Ultra Rapide</h5>
<p class="card-text text-muted">Performances optimisées pour une expérience fluide et sans lag</p>
</div>
</div>
<div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="200">
<div class="card feature-card h-100 text-center p-4 shadow-sm">
<div class="feature-icon mx-auto">
<i class="fas fa-shield-alt"></i>
</div>
<h5 class="card-title fw-bold mb-3">Sécurisé</h5>
<p class="card-text text-muted">Protection avancée de vos données avec chiffrement AES-256</p>
</div>
</div>
<div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="300">
<div class="card feature-card h-100 text-center p-4 shadow-sm">
<div class="feature-icon mx-auto">
<i class="fas fa-cloud-upload-alt"></i>
</div>
<h5 class="card-title fw-bold mb-3">Cloud Sync</h5>
<p class="card-text text-muted">Synchronisation automatique sur tous vos appareils</p>
</div>
</div>
<div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="400">
<div class="card feature-card h-100 text-center p-4 shadow-sm">
<div class="feature-icon mx-auto">
<i class="fas fa-headset"></i>
</div>
<h5 class="card-title fw-bold mb-3">Support 24/7</h5>
<p class="card-text text-muted">Une équipe dédiée pour vous assister à tout moment</p>
</div>
</div>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="stats-section py-5">
<div class="container py-4">
<div class="row text-center g-4">
<div class="col-md-3" data-aos="fade-up">
<div class="stat-number">10k+</div>
<p class="mb-0">Clients actifs</p>
</div>
<div class="col-md-3" data-aos="fade-up" data-aos-delay="100">
<div class="stat-number">99.9%</div>
<p class="mb-0">Satisfaction client</p>
</div>
<div class="col-md-3" data-aos="fade-up" data-aos-delay="200">
<div class="stat-number">24/7</div>
<p class="mb-0">Support disponible</p>
</div>
<div class="col-md-3" data-aos="fade-up" data-aos-delay="300">
<div class="stat-number">50+</div>
<p class="mb-0">Pays couverts</p>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-5">
<div class="container py-5">
<div class="row align-items-center">
<div class="col-lg-6 mb-4 mb-lg-0" data-aos="fade-right">
<img src="public/mobile1.png"
alt="About" class="img-fluid rounded-4 shadow-lg">
</div>
<div class="col-lg-6" data-aos="fade-left">
<h2 class="display-5 fw-bold mb-4">Pourquoi choisir <span class="text-primary">ProductX</span> ?</h2>
<p class="lead text-muted mb-4">
ProductX est né d'une volonté de simplifier la vie des professionnels en leur offrant
une solution complète et intuitive.
</p>
<div class="d-flex mb-3">
<i class="fas fa-check-circle text-primary fs-4 me-3 mt-1"></i>
<div>
<h5 class="fw-bold">Innovation constante</h5>
<p class="text-muted">Mises à jour régulières avec nouvelles fonctionnalités</p>
</div>
</div>
<div class="d-flex mb-3">
<i class="fas fa-check-circle text-primary fs-4 me-3 mt-1"></i>
<div>
<h5 class="fw-bold">Interface intuitive</h5>
<p class="text-muted">Design épuré pour une prise en main rapide</p>
</div>
</div>
<div class="d-flex mb-4">
<i class="fas fa-check-circle text-primary fs-4 me-3 mt-1"></i>
<div>
<h5 class="fw-bold">Intégrations multiples</h5>
<p class="text-muted">Connectez-vous avec vos outils préférés</p>
</div>
</div>
<a href="#pricing" class="btn btn-primary btn-lg rounded-pill px-5">Commencer gratuitement</a>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section id="testimonials" class="py-5 bg-light">
<div class="container py-5">
<div class="text-center mb-5" data-aos="fade-up">
<h2 class="display-4 fw-bold mb-3">Ce que disent nos <span class="text-primary">clients</span></h2>
<p class="lead text-muted">Ils ont adopté ProductX et ne peuvent plus s'en passer</p>
</div>
<div class="row g-4">
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="100">
<div class="card testimonial-card h-100 p-4 shadow-sm">
<div class="d-flex align-items-center mb-3">
<img src="public/avatar.png" alt="Client" class="testimonial-avatar me-3">
<div>
<h5 class="fw-bold mb-0">Sophie Martin</h5>
<div class="text-warning">
<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>
</div>
</div>
<p class="text-muted">
"Une révolution ! ProductX a transformé notre façon de travailler.
L'équipe est réactive et le produit est exceptionnel."
</p>
<i class="fas fa-quote-right text-primary opacity-25 fs-1 mt-auto"></i>
</div>
</div>
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="200">
<div class="card testimonial-card h-100 p-4 shadow-sm">
<div class="d-flex align-items-center mb-3">
<img src="public/avatar.png" alt="Client" class="testimonial-avatar me-3">
<div>
<h5 class="fw-bold mb-0">Thomas Bernard</h5>
<div class="text-warning">
<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>
</div>
</div>
<p class="text-muted">
"Je recommande vivement ! Le support client est incroyablement réactif
et le produit tient toutes ses promesses."
</p>
<i class="fas fa-quote-right text-primary opacity-25 fs-1 mt-auto"></i>
</div>
</div>
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
<div class="card testimonial-card h-100 p-4 shadow-sm">
<div class="d-flex align-items-center mb-3">
<img src="public/avatar.png" alt="Client" class="testimonial-avatar me-3">
<div>
<h5 class="fw-bold mb-0">Julie Dubois</h5>
<div class="text-warning">
<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>
</div>
</div>
<p class="text-muted">
"Un excellent rapport qualité-prix. L'interface est très intuitive
et les fonctionnalités sont complètes."
</p>
<i class="fas fa-quote-right text-primary opacity-25 fs-1 mt-auto"></i>
</div>
</div>
</div>
</div>
</section>
<!-- Pricing Section -->
<section id="pricing" class="py-5">
<div class="container py-5">
<div class="text-center mb-5" data-aos="fade-up">
<h2 class="display-4 fw-bold mb-3">Tarifs <span class="text-primary">transparents</span></h2>
<p class="lead text-muted">Choisissez l'offre qui vous correspond</p>
</div>
<div class="row g-4 align-items-center">
<div class="col-lg-4" data-aos="fade-up" data-aos-delay="100">
<div class="card pricing-card h-100 p-4 shadow-sm">
<h3 class="fw-bold mb-3">Découverte</h3>
<div class="mb-3">
<span class="display-4 fw-bold">9,99€</span>
<span class="text-muted">/mois</span>
</div>
<ul class="list-unstyled mb-4">
<li class="mb-2"><i class="fas fa-check text-primary me-2"></i>Jusqu'à 5 utilisateurs</li>
<li class="mb-2"><i class="fas fa-check text-primary me-2"></i>10GB de stockage</li>
<li class="mb-2"><i class="fas fa-check text-primary me-2"></i>Support par email</li>
<li class="mb-2 text-muted"><i class="fas fa-times me-2"></i>Fonctionnalités avancées</li>
</ul>
<button class="btn btn-outline-primary rounded-pill w-100 py-2">Choisir cette offre</button>
</div>
</div>
<div class="col-lg-4" data-aos="fade-up" data-aos-delay="200">
<div class="card pricing-card popular h-100 p-4 shadow-lg">
<div class="popular-badge">Populaire</div>
<h3 class="fw-bold mb-3">Professionnel</h3>
<div class="mb-3">
<span class="display-4 fw-bold">29,99€</span>
<span class="text-muted">/mois</span>
</div>
<ul class="list-unstyled mb-4">
<li class="mb-2"><i class="fas fa-check text-primary me-2"></i>Utilisateurs illimités</li>
<li class="mb-2"><i class="fas fa-check text-primary me-2"></i>100GB de stockage</li>
<li class="mb-2"><i class="fas fa-check text-primary me-2"></i>Support prioritaire 24/7</li>
<li class="mb-2"><i class="fas fa-check text-primary me-2"></i>Fonctionnalités avancées</li>
</ul>
<button class="btn btn-primary rounded-pill w-100 py-2">Choisir cette offre</button>
</div>
</div>
<div class="col-lg-4" data-aos="fade-up" data-aos-delay="300">
<div class="card pricing-card h-100 p-4 shadow-sm">
<h3 class="fw-bold mb-3">Enterprise</h3>
<div class="mb-3">
<span class="display-4 fw-bold">Sur devis</span>
</div>
<ul class="list-unstyled mb-4">
<li class="mb-2"><i class="fas fa-check text-primary me-2"></i>Personnalisation complète</li>
<li class="mb-2"><i class="fas fa-check text-primary me-2"></i>Stockage illimité</li>
<li class="mb-2"><i class="fas fa-check text-primary me-2"></i>Support dédié 24/7</li>
<li class="mb-2"><i class="fas fa-check text-primary me-2"></i>Formation incluse</li>
</ul>
<button class="btn btn-outline-primary rounded-pill w-100 py-2">Nous contacter</button>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta-section py-5">
<div class="container py-5">
<div class="row justify-content-center text-center" data-aos="fade-up">
<div class="col-lg-8">
<h2 class="display-4 fw-bold text-white mb-4">
Prêt à révolutionner votre quotidien ?
</h2>
<p class="lead text-white-50 mb-4">
Rejoignez des milliers d'utilisateurs satisfaits et commencez dès aujourd'hui
</p>
<a href="#pricing" class="btn btn-light btn-lg rounded-pill px-5 me-3 mb-2">
<i class="fas fa-rocket me-2"></i>Commencer maintenant
</a>
<a href="#contact" class="btn btn-outline-light btn-lg rounded-pill px-5 mb-2">
<i class="fas fa-headset me-2"></i>Contacter un expert
</a>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-5">
<div class="container py-5">
<div class="row">
<div class="col-lg-6 mb-4 mb-lg-0" data-aos="fade-right">
<h2 class="display-5 fw-bold mb-4">Contactez-<span class="text-primary">nous</span></h2>
<p class="lead text-muted mb-4">
Une question ? Un projet ? N'hésitez pas à nous contacter, notre équipe vous répondra dans les plus brefs délais.
</p>
<div class="mb-3">
<i class="fas fa-map-marker-alt text-primary me-3"></i>
<span>123 Avenue de la Tech, 75001 Paris</span>
</div>
<div class="mb-3">
<i class="fas fa-phone text-primary me-3"></i>
<span>+33 (0)1 23 45 67 89</span>
</div>
<div class="mb-4">
<i class="fas fa-envelope text-primary me-3"></i>
<span>contact@productx.com</span>
</div>
<div class="d-flex gap-3">
<a href="#" class="btn btn-outline-primary rounded-circle"
aria-label="Facebook" style="width: 40px; height: 40px;">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="btn btn-outline-primary rounded-circle" aria-label="Twitter" style="width: 40px; height: 40px;">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="btn btn-outline-primary rounded-circle" aria-label="LinkedIn" style="width: 40px; height: 40px;">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="#" class="btn btn-outline-primary rounded-circle" aria-label="Instagram" style="width: 40px; height: 40px;">
<i class="fab fa-instagram"></i>
</a>
</div>
</div>
<div class="col-lg-6" data-aos="fade-left">
<form class="bg-light p-4 rounded-4 shadow-sm">
<div class="mb-3">
<label class="form-label fw-bold">Nom complet</label>
<input type="text" class="form-control" placeholder="Votre nom">
</div>
<div class="mb-3">
<label class="form-label fw-bold">Email</label>
<input type="email" class="form-control" placeholder="votre@email.com">
</div>
<div class="mb-3">
<label class="form-label fw-bold">Message</label>
<textarea class="form-control" rows="5" placeholder="Votre message..."></textarea>
</div>
<button type="submit" class="btn btn-primary btn-lg w-100 rounded-pill">
<i class="fas fa-paper-plane me-2"></i>Envoyer
</button>
</form>
</div>
</div>
</div>
</section>
<!-- Newsletter Section -->
<section class="bg-primary bg-opacity-10 py-5">
<div class="container py-4">
<div class="row justify-content-center text-center" data-aos="fade-up">
<div class="col-lg-8">
<h3 class="fw-bold mb-3">Restez informé</h3>
<p class="text-muted mb-4">
Inscrivez-vous à notre newsletter pour recevoir nos actualités et offres exclusives
</p>
<div class="d-flex flex-column flex-sm-row gap-2 justify-content-center">
<input type="email" class="form-control newsletter-input" placeholder="Votre adresse email" style="max-width: 300px;">
<button class="btn btn-primary newsletter-btn">
<i class="fas fa-envelope me-2"></i>S'inscrire
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-dark text-white-50 py-5">
<div class="container">
<div class="row">
<div class="col-lg-4 mb-4">
<h4 class="text-white fw-bold mb-3">
<i class="fas fa-cube me-2" style="color: var(--primary);"></i>
ProductX
</h4>
<p>La solution innovante qui transforme votre quotidien. Simple, puissante et efficace.</p>
</div>
<div class="col-lg-2 mb-4">
<h5 class="text-white mb-3">Produit</h5>
<ul class="list-unstyled">
<li><a href="#features" class="text-decoration-none text-white-50">Fonctionnalités</a></li>
<li><a href="#pricing" class="text-decoration-none text-white-50">Tarifs</a></li>
<li><a href="#" class="text-decoration-none text-white-50">FAQ</a></li>
</ul>
</div>
<div class="col-lg-2 mb-4">
<h5 class="text-white mb-3">Entreprise</h5>
<ul class="list-unstyled">
<li><a href="#" class="text-decoration-none text-white-50">À propos</a></li>
<li><a href="#" class="text-decoration-none text-white-50">Blog</a></li>
<li><a href="#" class="text-decoration-none text-white-50">Carrières</a></li>
</ul>
</div>
<div class="col-lg-4 mb-4">
<h5 class="text-white mb-3">Légal</h5>
<ul class="list-unstyled">
<li><a href="#" class="text-decoration-none text-white-50">Conditions générales</a></li>
<li><a href="#" class="text-decoration-none text-white-50">Confidentialité</a></li>
<li><a href="#" class="text-decoration-none text-white-50">Cookies</a></li>
</ul>
</div>
</div>
<hr class="border-secondary">
<div class="text-center">
<p class="mb-0">© 2024 ProductX. Tous droits réservés.</p>
</div>
</div>
</footer>
<!-- Back to Top Button -->
<button class="back-to-top" id="backToTop" aria-label="Back to top">
<i class="fas fa-arrow-up"></i>
</button>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
// Initialize AOS
AOS.init({
duration: 1000,
once: true,
offset: 100
});
// Navbar scroll effect
window.addEventListener('scroll', function() {
const navbar = document.getElementById('navbar');
if (window.scrollY > 50) {
navbar.classList.add('navbar-scrolled');
} else {
navbar.classList.remove('navbar-scrolled');
}
});
// Progress bar
window.addEventListener('scroll', function() {
const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrolled = (winScroll / height) * 100;
document.getElementById('progressBar').style.width = scrolled + '%';
});
// Back to top button
const backToTop = document.getElementById('backToTop');
window.addEventListener('scroll', function() {
if (window.scrollY > 300) {
backToTop.classList.add('show');
} else {
backToTop.classList.remove('show');
}
});
backToTop.addEventListener('click', function() {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
// Smooth scroll for nav links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Active nav link on scroll
const sections = document.querySelectorAll('section');
const navLinks = document.querySelectorAll('.navbar-nav .nav-link');
window.addEventListener('scroll', () => {
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (scrollY >= (sectionTop - 200)) {
current = section.getAttribute('id');
}
});
navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href') === `#${current}`) {
link.classList.add('active');
}
});
});
</script>
</body>
</html>
Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur