Bootstrap 5
Template
Portfolio
Designer
Creative
Showcase
Template portfolio élégant pour designers avec mise en page épurée, galerie projet, timeline expérience et formulaire contact.
<!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 Portfolio Designer Bootstrap 5 2026042157 | AngularForAll</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
<!-- Google Fonts -->
<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&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
overflow-x: hidden;
background-color: #f8f9fa;
}
h1, h2, h3, h4, .logo {
font-family: 'Playfair Display', serif;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #c0392b;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #a93226;
}
/* Navigation */
.navbar {
transition: all 0.4s ease;
padding: 20px 0;
background: transparent;
}
.navbar.scrolled {
background: white !important;
padding: 12px 0;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
.navbar.scrolled .nav-link,
.navbar.scrolled .navbar-brand {
color: #333 !important;
}
.navbar-brand {
font-size: 28px;
font-weight: 700;
color: white;
}
.nav-link {
color: white !important;
font-weight: 500;
margin: 0 10px;
transition: all 0.3s ease;
position: relative;
}
.nav-link:hover {
color: #f39c12 !important;
}
.nav-link::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background: #f39c12;
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 30px;
}
/* Hero Section */
.hero {
min-height: 100vh;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 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.05)" 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.5;
}
.hero-content {
position: relative;
z-index: 2;
}
.hero h1 {
font-size: 70px;
font-weight: 700;
background: linear-gradient(135deg, #fff 0%, #f39c12 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero .badge {
background: rgba(255,255,255,0.2);
backdrop-filter: blur(10px);
padding: 10px 20px;
border-radius: 50px;
font-size: 14px;
}
/* Sections communes */
.section-title {
font-size: 42px;
font-weight: 700;
margin-bottom: 15px;
position: relative;
display: inline-block;
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(90deg, #c0392b, #f39c12);
border-radius: 3px;
}
/* Service Cards */
.service-card {
background: white;
padding: 40px 25px;
border-radius: 20px;
text-align: center;
transition: all 0.4s ease;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
height: 100%;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.service-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #c0392b, #e74c3c);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 35px;
color: white;
}
/* Portfolio Items */
.portfolio-item {
position: relative;
border-radius: 15px;
overflow: hidden;
cursor: pointer;
margin-bottom: 30px;
}
.portfolio-img {
width: 100%;
height: 300px;
object-fit: cover;
transition: all 0.5s ease;
}
.portfolio-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(192,57,43,0.9), rgba(243,156,18,0.9));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: all 0.4s ease;
color: white;
padding: 20px;
text-align: center;
}
.portfolio-item:hover .portfolio-overlay {
opacity: 1;
}
.portfolio-item:hover .portfolio-img {
transform: scale(1.1);
}
/* About Section */
.about-img {
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.skill-item {
margin-bottom: 20px;
}
.skill-name {
font-weight: 600;
margin-bottom: 8px;
}
.progress {
height: 8px;
border-radius: 10px;
background: #e0e0e0;
}
.progress-bar {
background: linear-gradient(90deg, #c0392b, #f39c12);
border-radius: 10px;
}
/* Testimonials */
.testimonial-card {
background: white;
padding: 30px;
border-radius: 20px;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
transition: all 0.3s ease;
height: 100%;
}
.testimonial-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
.testimonial-avatar {
width: 70px;
height: 70px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 15px;
}
.testimonial-text {
font-style: italic;
color: #666;
line-height: 1.6;
}
.stars {
color: #f39c12;
margin: 15px 0;
}
/* Contact Section */
.contact-info {
background: white;
padding: 30px;
border-radius: 20px;
text-align: center;
transition: all 0.3s ease;
height: 100%;
}
.contact-info:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.contact-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #c0392b, #e74c3c);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 30px;
color: white;
}
.contact-form {
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.form-control, .form-select {
border: 1px solid #e0e0e0;
padding: 12px;
border-radius: 10px;
transition: all 0.3s ease;
}
.form-control:focus, .form-select:focus {
border-color: #c0392b;
box-shadow: 0 0 0 3px rgba(192,57,43,0.1);
}
.btn-primary {
background: linear-gradient(135deg, #c0392b, #e74c3c);
border: none;
padding: 12px 35px;
border-radius: 50px;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(192,57,43,0.3);
}
.btn-outline-custom {
border: 2px solid white;
color: white;
padding: 12px 30px;
border-radius: 50px;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-outline-custom:hover {
background: white;
color: #c0392b;
}
/* Footer */
.footer {
background: #1a1a2e;
color: white;
padding: 60px 0 20px;
}
.social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(255,255,255,0.1);
border-radius: 50%;
margin: 0 8px;
transition: all 0.3s ease;
color: white;
}
.social-link:hover {
background: #c0392b;
transform: translateY(-3px);
}
/* Responsive */
@media (max-width: 768px) {
.hero h1 {
font-size: 40px;
}
.section-title {
font-size: 32px;
}
.navbar {
background: white !important;
padding: 12px 0;
}
.navbar .nav-link,
.navbar .navbar-brand {
color: #333 !important;
}
}
/* Animation */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate {
animation: fadeInUp 0.6s ease forwards;
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top" id="navbar">
<div class="container">
<a class="navbar-brand" href="#">Sophia.</a>
<button class="navbar-toggler" type="button" 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" href="#home">Accueil</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="#about">À propos</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="hero d-flex align-items-center">
<div class="container hero-content">
<div class="row align-items-center">
<div class="col-lg-7 text-white">
<span class="badge mb-3">✨ Web Designer Creative</span>
<h1 class="mb-3">Je crée des designs qui racontent des histoires</h1>
<p class="lead mb-4 opacity-75">Designer UI/UX passionnée avec plus de 5 ans d'expérience. Je transforme vos idées en expériences digitales mémorables.</p>
<div class="d-flex gap-3">
<a href="#portfolio" class="btn btn-primary">Voir mon travail</a>
<a href="#contact" class="btn btn-outline-custom">Me contacter</a>
</div>
</div>
<div class="col-lg-5 text-center mt-5 mt-lg-0">
<div class="position-relative">
<div class="bg-white rounded-circle p-3 d-inline-block shadow-lg">
<i class="bi bi-brush fs-1" style="color: #c0392b;"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-5">
<div class="container py-5">
<div class="text-center mb-5">
<span class="text-uppercase text-muted small fw-bold">Ce que je fais</span>
<h2 class="section-title">Mes Services</h2>
<p class="text-muted mt-3">Des solutions digitales sur mesure pour votre entreprise</p>
</div>
<div class="row g-4">
<div class="col-md-6 col-lg-3">
<div class="service-card">
<div class="service-icon">
<i class="bi bi-palette"></i>
</div>
<h4>Web Design</h4>
<p class="text-muted">Création de designs modernes, responsives et adaptés à votre marque.</p>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="service-card">
<div class="service-icon">
<i class="bi bi-code-slash"></i>
</div>
<h4>Développement</h4>
<p class="text-muted">Intégration HTML/CSS/JS avec les meilleures pratiques du web.</p>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="service-card">
<div class="service-icon">
<i class="bi bi-phone"></i>
</div>
<h4>UI/UX Design</h4>
<p class="text-muted">Design d'interfaces intuitives et centrées sur l'utilisateur.</p>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="service-card">
<div class="service-icon">
<i class="bi bi-search"></i>
</div>
<h4>SEO Optimisation</h4>
<p class="text-muted">Amélioration du référencement naturel de votre site web.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Portfolio Section -->
<section id="portfolio" class="py-5 bg-light">
<div class="container py-5">
<div class="text-center mb-5">
<span class="text-uppercase text-muted small fw-bold">Mes réalisations</span>
<h2 class="section-title">Derniers Projets</h2>
<p class="text-muted mt-3">Quelques exemples de mon travail</p>
</div>
<div class="row g-4">
<div class="col-md-6 col-lg-4">
<div class="portfolio-item">
<img src="https://picsum.photos/id/20/400/300" class="portfolio-img" alt="Project 1">
<div class="portfolio-overlay">
<i class="bi bi-eye fs-1 mb-2"></i>
<h4>E-commerce Luxe</h4>
<p>Design UI/UX pour boutique en ligne</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="portfolio-item">
<img src="https://picsum.photos/id/26/400/300" class="portfolio-img" alt="Project 2">
<div class="portfolio-overlay">
<i class="bi bi-eye fs-1 mb-2"></i>
<h4>Application Mobile</h4>
<p>Design d'application fitness</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="portfolio-item">
<img src="https://picsum.photos/id/30/400/300" class="portfolio-img" alt="Project 3">
<div class="portfolio-overlay">
<i class="bi bi-eye fs-1 mb-2"></i>
<h4>Site Portfolio</h4>
<p>Design pour photographe professionnel</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="portfolio-item">
<img src="https://picsum.photos/id/43/400/300" class="portfolio-img" alt="Project 4">
<div class="portfolio-overlay">
<i class="bi bi-eye fs-1 mb-2"></i>
<h4>Dashboard Admin</h4>
<p>Interface d'administration moderne</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="portfolio-item">
<img src="https://picsum.photos/id/47/400/300" class="portfolio-img" alt="Project 5">
<div class="portfolio-overlay">
<i class="bi bi-eye fs-1 mb-2"></i>
<h4>Blog Voyage</h4>
<p>Design éditorial pour blog</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="portfolio-item">
<img src="https://picsum.photos/id/60/400/300" class="portfolio-img" alt="Project 6">
<div class="portfolio-overlay">
<i class="bi bi-eye fs-1 mb-2"></i>
<h4>Site Restaurant</h4>
<p>Design responsive pour restaurant gastronomique</p>
</div>
</div>
</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">
<img src="https://picsum.photos/id/64/500/600" alt="Sophia Martinez" class="about-img img-fluid">
</div>
<div class="col-lg-6">
<span class="text-uppercase text-muted small fw-bold">À propos de moi</span>
<h2 class="section-title text-start after-left">Designer passionnée par l'innovation</h2>
<p class="lead mt-3">Je m'appelle Sophia Martinez, web designer basée à Paris.</p>
<p class="text-muted">Avec plus de 5 ans d'expérience dans le design digital, j'ai eu la chance de collaborer avec des startups innovantes et des grandes entreprises. Ma philosophie : créer des designs qui allient esthétique et fonctionnalité.</p>
<div class="row mt-4">
<div class="col-6">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-check-circle-fill text-primary me-2"></i>
<span>+50 projets réalisés</span>
</div>
<div class="d-flex align-items-center mb-3">
<i class="bi bi-check-circle-fill text-primary me-2"></i>
<span>+30 clients satisfaits</span>
</div>
</div>
<div class="col-6">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-check-circle-fill text-primary me-2"></i>
<span>5 ans d'expérience</span>
</div>
<div class="d-flex align-items-center mb-3">
<i class="bi bi-check-circle-fill text-primary me-2"></i>
<span>Disponible en freelance</span>
</div>
</div>
</div>
<h5 class="mt-4 mb-3">Mes compétences</h5>
<div class="skill-item">
<div class="d-flex justify-content-between">
<span class="skill-name">UI/UX Design</span>
<span>95%</span>
</div>
<div class="progress">
<div class="progress-bar" style="width: 95%"></div>
</div>
</div>
<div class="skill-item">
<div class="d-flex justify-content-between">
<span class="skill-name">Web Design</span>
<span>90%</span>
</div>
<div class="progress">
<div class="progress-bar" style="width: 90%"></div>
</div>
</div>
<div class="skill-item">
<div class="d-flex justify-content-between">
<span class="skill-name">Figma / Adobe XD</span>
<span>88%</span>
</div>
<div class="progress">
<div class="progress-bar" style="width: 88%"></div>
</div>
</div>
<div class="skill-item">
<div class="d-flex justify-content-between">
<span class="skill-name">HTML/CSS/JS</span>
<span>85%</span>
</div>
<div class="progress">
<div class="progress-bar" style="width: 85%"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="py-5 bg-light">
<div class="container py-5">
<div class="text-center mb-5">
<span class="text-uppercase text-muted small fw-bold">Témoignages</span>
<h2 class="section-title">Ce que disent mes clients</h2>
<p class="text-muted mt-3">Ils m'ont fait confiance et ont adoré travailler avec moi</p>
</div>
<div class="row g-4">
<div class="col-md-4">
<div class="testimonial-card text-center">
<img src="https://picsum.photos/id/83/100/100" alt="Client" class="testimonial-avatar">
<div class="stars">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<p class="testimonial-text">"Sophia a su comprendre parfaitement nos besoins. Le design qu'elle a créé a transformé notre image de marque."</p>
<h6 class="mb-0">Marie Dubois</h6>
<small class="text-muted">Fondatrice de LuxeStore</small>
</div>
</div>
<div class="col-md-4">
<div class="testimonial-card text-center">
<img src="https://picsum.photos/id/91/100/100" alt="Client" class="testimonial-avatar">
<div class="stars">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<p class="testimonial-text">"Un travail exceptionnel ! Sophia est professionnelle, créative et toujours à l'écoute. Je recommande vivement !"</p>
<h6 class="mb-0">Thomas Bernard</h6>
<small class="text-muted">CEO de TechStart</small>
</div>
</div>
<div class="col-md-4">
<div class="testimonial-card text-center">
<img src="https://picsum.photos/id/76/100/100" alt="Client" class="testimonial-avatar">
<div class="stars">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
</div>
<p class="testimonial-text">"Un grand merci à Sophia pour son travail remarquable. Notre site web n'a jamais été aussi beau et fonctionnel."</p>
<h6 class="mb-0">Julie Moreau</h6>
<small class="text-muted">Responsable marketing</small>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-5">
<div class="container py-5">
<div class="text-center mb-5">
<span class="text-uppercase text-muted small fw-bold">Me contacter</span>
<h2 class="section-title">Parlons de votre projet</h2>
<p class="text-muted mt-3">Une idée ? Un projet ? N'hésitez pas à me contacter</p>
</div>
<div class="row g-4">
<div class="col-lg-4">
<div class="contact-info">
<div class="contact-icon">
<i class="bi bi-envelope"></i>
</div>
<h5>Email</h5>
<p class="text-muted">sophia.martinez@email.com</p>
</div>
</div>
<div class="col-lg-4">
<div class="contact-info">
<div class="contact-icon">
<i class="bi bi-telephone"></i>
</div>
<h5>Téléphone</h5>
<p class="text-muted">+33 6 12 34 56 78</p>
</div>
</div>
<div class="col-lg-4">
<div class="contact-info">
<div class="contact-icon">
<i class="bi bi-geo-alt"></i>
</div>
<h5>Localisation</h5>
<p class="text-muted">Paris, France</p>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-lg-8 mx-auto">
<div class="contact-form">
<h4 class="mb-4">Envoyez-moi un message</h4>
<form id="contactForm">
<div class="row g-3">
<div class="col-md-6">
<input type="text" class="form-control" placeholder="Votre nom" required>
</div>
<div class="col-md-6">
<input type="email" class="form-control" placeholder="Votre email" required>
</div>
<div class="col-12">
<input type="text" class="form-control" placeholder="Sujet">
</div>
<div class="col-12">
<textarea class="form-control" rows="5" placeholder="Votre message"></textarea>
</div>
<div class="col-12 text-center">
<button type="submit" class="btn btn-primary">Envoyer le message <i class="bi bi-send"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-lg-4 mb-4 mb-lg-0">
<h3 class="mb-3">Sophia.</h3>
<p class="opacity-75">Créative, passionnée et dédiée à créer des expériences digitales exceptionnelles.</p>
<div class="mt-3">
<a href="#" class="social-link"><i class="bi bi-facebook"></i></a>
<a href="#" class="social-link"><i class="bi bi-twitter-x"></i></a>
<a href="#" class="social-link"><i class="bi bi-instagram"></i></a>
<a href="#" class="social-link"><i class="bi bi-linkedin"></i></a>
<a href="#" class="social-link"><i class="bi bi-dribbble"></i></a>
</div>
</div>
<div class="col-lg-2 col-md-6 mb-4 mb-md-0">
<h5 class="mb-3">Liens rapides</h5>
<ul class="list-unstyled">
<li class="mb-2"><a href="#home" class="text-white text-decoration-none opacity-75 hover-opacity">Accueil</a></li>
<li class="mb-2"><a href="#services" class="text-white text-decoration-none opacity-75">Services</a></li>
<li class="mb-2"><a href="#portfolio" class="text-white text-decoration-none opacity-75">Portfolio</a></li>
<li class="mb-2"><a href="#about" class="text-white text-decoration-none opacity-75">À propos</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="mb-3">Services</h5>
<ul class="list-unstyled">
<li class="mb-2"><span class="opacity-75">Web Design</span></li>
<li class="mb-2"><span class="opacity-75">UI/UX Design</span></li>
<li class="mb-2"><span class="opacity-75">Développement</span></li>
<li class="mb-2"><span class="opacity-75">SEO</span></li>
</ul>
</div>
<div class="col-lg-3">
<h5 class="mb-3">Newsletter</h5>
<p class="opacity-75 small">Recevez mes conseils et mes projets</p>
<div class="input-group">
<input type="email" class="form-control form-control-sm" placeholder="Votre email">
<button class="btn btn-primary btn-sm" type="button">S'abonner</button>
</div>
</div>
</div>
<hr class="my-4 opacity-25">
<div class="text-center opacity-50 small">
<p>© 2024 Sophia Martinez - Tous droits réservés. Web Designer Portfolio</p>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Navbar scroll effect
window.addEventListener('scroll', function() {
const navbar = document.getElementById('navbar');
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
// Smooth scroll for anchor 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'
});
}
});
});
// Form submission alert
document.getElementById('contactForm')?.addEventListener('submit', function(e) {
e.preventDefault();
alert('Merci pour votre message ! Je vous répondrai dans les plus brefs délais.');
this.reset();
});
// Animation on scroll
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate');
observer.unobserve(entry.target);
}
});
}, observerOptions);
document.querySelectorAll('.service-card, .portfolio-item, .testimonial-card, .contact-info').forEach(el => {
observer.observe(el);
});
</script>
</body>
</html>Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur