Bootstrap
Bootstrap5
Portfolio
Html
Css
Template de portfolio Bootstrap 5 avec design élégant et moderne.
<!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">
<title>Portfolio Designer Bootstrap 5 | AngularForAll</title>
<!-- Bootstrap 5 + Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- AOS Animation CSS -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #ff6b6b;
--secondary: #4ecdc4;
--accent: #ffe66d;
--dark: #2c3e50;
--light: #fdfbf7;
}
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background: linear-gradient(145deg, #fdfbf7 0%, #f9f6f0 100%);
color: #2c3e50;
}
h1, h2, h3, h4, h5 {
font-weight: 700;
}
.font-alt {
font-family: 'Space Grotesk', sans-serif;
}
/* Navbar */
.navbar {
padding: 1.2rem 0;
background: rgba(253, 251, 247, 0.95) !important;
backdrop-filter: blur(12px);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
}
.navbar-brand {
font-weight: 700;
font-size: 2rem;
color: var(--dark) !important;
font-family: 'Space Grotesk', sans-serif;
}
.navbar-brand span {
color: var(--primary);
}
.nav-link {
font-weight: 500;
color: #5a6c7a !important;
margin: 0 0.8rem;
transition: color 0.2s;
position: relative;
}
.nav-link:hover {
color: var(--primary) !important;
}
.nav-link::after {
content: '';
position: absolute;
bottom: -4px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background: var(--primary);
transition: width 0.2s;
border-radius: 2px;
}
.nav-link:hover::after {
width: 100%;
}
.btn-primary-custom {
background: var(--primary);
color: white;
border: none;
border-radius: 60px;
padding: 0.7rem 2rem;
font-weight: 600;
transition: all 0.2s;
box-shadow: 0 8px 20px rgba(255, 107, 107, 0.2);
}
.btn-primary-custom:hover {
background: #ff5252;
transform: translateY(-2px);
box-shadow: 0 12px 25px rgba(255, 107, 107, 0.3);
}
.btn-outline-custom {
border: 2px solid var(--primary);
color: var(--primary);
border-radius: 60px;
padding: 0.7rem 2rem;
font-weight: 600;
background: transparent;
transition: all 0.2s;
}
.btn-outline-custom:hover {
background: var(--primary);
color: white;
}
/* Hero Section */
.hero-section {
padding: 5rem 0 6rem;
position: relative;
overflow: hidden;
}
.hero-badge {
background: linear-gradient(135deg, #ff6b6b, #ee5a24);
color: white;
padding: 0.5rem 1.5rem;
border-radius: 60px;
font-weight: 600;
font-size: 0.9rem;
display: inline-block;
margin-bottom: 1.5rem;
box-shadow: 0 8px 20px rgba(255, 107, 107, 0.2);
}
.hero-title {
font-weight: 800;
font-size: 4.2rem;
color: var(--dark);
line-height: 1.15;
font-family: 'Space Grotesk', sans-serif;
}
.hero-title span {
color: var(--primary);
position: relative;
}
.hero-title span::after {
content: '';
position: absolute;
bottom: 8px;
left: 0;
width: 100%;
height: 12px;
background: var(--accent);
z-index: -1;
opacity: 0.4;
border-radius: 4px;
}
.hero-subtitle {
font-size: 1.3rem;
color: #5a6c7a;
font-weight: 400;
}
.hero-avatar {
border-radius: 40% 60% 30% 70% / 50% 40% 60% 50%;
border: 4px solid white;
box-shadow: 0 30px 50px rgba(0, 0, 0, 0.08);
max-width: 420px;
width: 100%;
}
.floating-badge {
position: absolute;
background: white;
padding: 0.8rem 1.5rem;
border-radius: 40px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
font-weight: 600;
color: var(--dark);
}
.badge-1 {
top: 15%;
right: 8%;
animation: float 4s ease-in-out infinite;
}
.badge-2 {
bottom: 20%;
left: 5%;
animation: float 5s ease-in-out infinite reverse;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
/* Section Title */
.section-title {
font-weight: 800;
font-size: 2.8rem;
color: var(--dark);
margin-bottom: 1rem;
font-family: 'Space Grotesk', sans-serif;
}
.section-title span {
color: var(--primary);
}
.section-subtitle {
color: var(--primary);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 4px;
font-size: 0.85rem;
margin-bottom: 0.5rem;
}
.divider {
width: 60px;
height: 4px;
background: linear-gradient(90deg, var(--primary), var(--secondary));
border-radius: 4px;
margin: 1.5rem 0 2rem;
}
/* Service Cards */
.service-card {
background: white;
border-radius: 30px;
padding: 2.5rem 2rem;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.03);
transition: all 0.3s;
height: 100%;
border: 1px solid #f0ebe4;
}
.service-card:hover {
transform: translateY(-8px);
box-shadow: 0 30px 50px rgba(255, 107, 107, 0.1);
border-color: var(--primary);
}
.service-icon {
width: 75px;
height: 75px;
background: linear-gradient(135deg, #fff5f5, #ffe8e8);
border-radius: 25px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.8rem;
}
.service-icon i {
font-size: 2.5rem;
color: var(--primary);
}
/* Project Cards */
.project-card {
background: white;
border-radius: 30px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
transition: all 0.3s;
height: 100%;
border: 1px solid #f0ebe4;
}
.project-card:hover {
transform: translateY(-10px);
box-shadow: 0 25px 45px rgba(255, 107, 107, 0.12);
}
.project-img {
height: 260px;
overflow: hidden;
position: relative;
}
.project-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s;
}
.project-card:hover .project-img img {
transform: scale(1.08);
}
.project-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
display: flex;
align-items: flex-end;
padding: 1.5rem;
opacity: 0;
transition: opacity 0.3s;
}
.project-card:hover .project-overlay {
opacity: 1;
}
.project-category {
background: var(--primary);
color: white;
padding: 0.4rem 1.2rem;
border-radius: 30px;
font-size: 0.8rem;
font-weight: 600;
}
/* Skills */
.skill-tag {
background: white;
padding: 0.8rem 1.8rem;
border-radius: 60px;
font-weight: 600;
color: var(--dark);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.03);
border: 1px solid #f0ebe4;
transition: all 0.2s;
display: inline-block;
margin: 0.4rem;
}
.skill-tag:hover {
background: var(--primary);
color: white;
border-color: var(--primary);
transform: scale(1.05);
}
.skill-tag i {
color: var(--primary);
margin-right: 8px;
}
.skill-tag:hover i {
color: white;
}
/* Testimonial */
.testi-card {
background: white;
border-radius: 30px;
padding: 2.5rem;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.03);
border: 1px solid #f0ebe4;
}
.testi-avatar {
width: 65px;
height: 65px;
border-radius: 20px;
object-fit: cover;
}
.stars {
color: #ffb347;
letter-spacing: 3px;
}
/* Instagram Feed */
.insta-item {
border-radius: 25px;
overflow: hidden;
position: relative;
cursor: pointer;
}
.insta-item img {
width: 100%;
height: 200px;
object-fit: cover;
transition: transform 0.5s;
}
.insta-item:hover img {
transform: scale(1.1);
}
.insta-overlay {
position: absolute;
inset: 0;
background: rgba(255, 107, 107, 0.8);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s;
}
.insta-item:hover .insta-overlay {
opacity: 1;
}
.insta-overlay i {
color: white;
font-size: 2.5rem;
}
/* Contact */
.contact-card {
background: white;
border-radius: 40px;
padding: 3rem;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.04);
border: 1px solid #f0ebe4;
}
.contact-input {
background: #fdfbf7;
border: 1.5px solid #f0ebe4;
border-radius: 20px;
padding: 1rem 1.5rem;
font-size: 1rem;
transition: all 0.2s;
}
.contact-input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.1);
outline: none;
}
/* Footer */
footer {
background: var(--dark);
color: #c4d1db;
padding: 3rem 0 2rem;
margin-top: 3rem;
border-radius: 40px 40px 0 0;
}
.footer-link {
color: #9aabb8;
text-decoration: none;
transition: color 0.2s;
}
.footer-link:hover {
color: var(--primary);
}
.social-icon {
width: 50px;
height: 50px;
background: rgba(255,255,255,0.05);
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.3rem;
transition: all 0.2s;
}
.social-icon:hover {
background: var(--primary);
color: white;
transform: translateY(-3px);
}
/* Responsive */
@media (max-width: 992px) {
.hero-title {
font-size: 3.2rem;
}
}
@media (max-width: 768px) {
.hero-title {
font-size: 2.5rem;
}
.section-title {
font-size: 2.2rem;
}
.hero-avatar {
max-width: 320px;
margin-top: 2rem;
}
.floating-badge {
display: none;
}
.contact-card {
padding: 2rem;
}
}
@media (max-width: 576px) {
.hero-title {
font-size: 2rem;
}
}
</style>
</head>
<body>
<!-- ==================== NAVBAR ==================== -->
<nav class="navbar navbar-expand-lg sticky-top">
<div class="container">
<a class="navbar-brand" href="#">
<i class="bi bi-palette-fill me-2" style="color: var(--primary);"></i>Emma<span>.</span>
</a>
<button class="navbar-toggler border-0" 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 mx-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link active" href="#">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="#projects">Projets</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>
<a href="#contact" class="btn btn-primary-custom"><i class="bi bi-chat-dots me-2"></i>Discutons</a>
</div>
</div>
</nav>
<!-- ==================== HERO ==================== -->
<section class="hero-section">
<div class="floating-badge badge-1">
<i class="bi bi-star-fill me-2" style="color: var(--accent);"></i>Top Rated Designer
</div>
<div class="floating-badge badge-2">
<i class="bi bi-trophy-fill me-2" style="color: var(--primary);"></i>5+ ans d'expérience
</div>
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6" data-aos="fade-right">
<div class="hero-badge">
<i class="bi bi-sparkles me-2"></i>Designer UI/UX & Branding
</div>
<h1 class="hero-title mb-3">
Créons des <span>expériences</span> qui marquent
</h1>
<p class="hero-subtitle mb-4">
Designer passionnée, j'accompagne les marques dans leur identité visuelle et la création d'interfaces élégantes et fonctionnelles.
</p>
<div class="d-flex flex-wrap gap-3 mb-5">
<a href="#projects" class="btn btn-primary-custom"><i class="bi bi-eye me-2"></i>Voir mes projets</a>
<a href="#contact" class="btn btn-outline-custom"><i class="bi bi-calendar me-2"></i>Réserver un call</a>
</div>
<div class="d-flex align-items-center gap-4">
<div class="d-flex align-items-center">
<i class="bi bi-check-circle-fill me-2" style="color: var(--secondary);"></i>
<span class="small fw-medium">Disponible pour collaborations</span>
</div>
<div class="d-flex align-items-center">
<i class="bi bi-check-circle-fill me-2" style="color: var(--secondary);"></i>
<span class="small fw-medium">Projets internationaux</span>
</div>
</div>
</div>
<div class="col-lg-6 text-center text-lg-end" data-aos="fade-left">
<img src="https://images.pexels.com/photos/3756679/pexels-photo-3756679.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Emma Laurent" class="hero-avatar img-fluid"
onerror="this.src='https://placehold.co/500/ff6b6b/white?text=Emma+L.'">
</div>
</div>
</div>
</section>
<!-- ==================== SERVICES ==================== -->
<section id="services" class="container py-5">
<div data-aos="fade-up">
<div class="section-subtitle">Ce que je propose</div>
<h2 class="section-title"><span>Services</span> créatifs</h2>
<div class="divider"></div>
</div>
<div class="row g-4">
<div class="col-md-4" data-aos="fade-up" data-aos-delay="0">
<div class="service-card">
<div class="service-icon">
<i class="bi bi-brush"></i>
</div>
<h5 class="fw-bold mb-3">Branding & Identité</h5>
<p class="text-secondary mb-0">Création de logo, charte graphique, direction artistique et univers de marque cohérent.</p>
</div>
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="100">
<div class="service-card">
<div class="service-icon">
<i class="bi bi-window"></i>
</div>
<h5 class="fw-bold mb-3">UI/UX Design</h5>
<p class="text-secondary mb-0">Design d'interfaces web et mobile, wireframes, prototypes interactifs et tests utilisateurs.</p>
</div>
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="200">
<div class="service-card">
<div class="service-icon">
<i class="bi bi-grid-3x3"></i>
</div>
<h5 class="fw-bold mb-3">Design System</h5>
<p class="text-secondary mb-0">Création de systèmes de composants réutilisables, documentation et guidelines.</p>
</div>
</div>
</div>
</section>
<!-- ==================== PROJETS ==================== -->
<section id="projects" class="container py-5">
<div class="d-flex justify-content-between align-items-end mb-4" data-aos="fade-up">
<div>
<div class="section-subtitle">Portfolio</div>
<h2 class="section-title mb-0"><span>Projets</span> récents</h2>
</div>
<a href="#" class="text-decoration-none fw-semibold" style="color: var(--primary);">Voir tout <i class="bi bi-arrow-right"></i></a>
</div>
<div class="divider" data-aos="fade-up"></div>
<div class="row g-4">
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="0">
<div class="project-card">
<div class="project-img">
<img src="https://placehold.co/600x450/ff6b6b/white?text=Bloom+Cosmetics"
alt="Bloom Cosmetics" onerror="this.src='https://placehold.co/600x450/ff6b6b/ffffff?text=Bloom'">
<div class="project-overlay">
<span class="project-category">Branding</span>
</div>
</div>
<div class="p-4">
<h5 class="fw-bold mb-2">Bloom Cosmetics</h5>
<p class="small text-secondary mb-3">Identité visuelle complète pour une marque de cosmétiques naturels.</p>
<div class="d-flex justify-content-between align-items-center">
<span class="small fw-medium" style="color: var(--primary);">Logo · Packaging · Web</span>
<a href="#" class="text-dark"><i class="bi bi-arrow-up-right"></i></a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="100">
<div class="project-card">
<div class="project-img">
<img src="https://placehold.co/600x450/4ecdc4/white?text=Fintech+App"
alt="Fintech App" onerror="this.src='https://placehold.co/600x450/4ecdc4/ffffff?text=Fintech'">
<div class="project-overlay">
<span class="project-category">UI/UX Design</span>
</div>
</div>
<div class="p-4">
<h5 class="fw-bold mb-2">WiseBank App</h5>
<p class="small text-secondary mb-3">Application mobile de gestion financière avec expérience utilisateur fluide.</p>
<div class="d-flex justify-content-between align-items-center">
<span class="small fw-medium" style="color: var(--primary);">Mobile · Dashboard · Prototype</span>
<a href="#" class="text-dark"><i class="bi bi-arrow-up-right"></i></a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="200">
<div class="project-card">
<div class="project-img">
<img src="https://placehold.co/600x450/ffe66d/2c3e50?text=Art+Gallery"
alt="Art Gallery" onerror="this.src='https://placehold.co/600x450/ffe66d/2c3e50?text=Gallery'">
<div class="project-overlay">
<span class="project-category">Web Design</span>
</div>
</div>
<div class="p-4">
<h5 class="fw-bold mb-2">Galerie Moderne</h5>
<p class="small text-secondary mb-3">Site vitrine pour une galerie d'art contemporain parisienne.</p>
<div class="d-flex justify-content-between align-items-center">
<span class="small fw-medium" style="color: var(--primary);">Web · E-commerce · CMS</span>
<a href="#" class="text-dark"><i class="bi bi-arrow-up-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== À PROPOS ==================== -->
<section id="about" class="container py-5">
<div class="row align-items-center g-5">
<div class="col-lg-5" data-aos="fade-right">
<div class="position-relative">
<img src="https://images.pexels.com/photos/3755751/pexels-photo-3755751.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Emma at work" class="img-fluid rounded-4 shadow-lg"
onerror="this.src='https://placehold.co/500x600/ff6b6b/white?text=Emma'">
<div class="position-absolute bottom-0 start-0 bg-white p-3 rounded-4 shadow m-3">
<div class="d-flex align-items-center gap-3">
<div>
<h5 class="fw-bold mb-0">50+</h5>
<small class="text-secondary">Projets réalisés</small>
</div>
<div class="vr"></div>
<div>
<h5 class="fw-bold mb-0">30+</h5>
<small class="text-secondary">Clients</small>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-7" data-aos="fade-left">
<div class="section-subtitle">Mon parcours</div>
<h2 class="section-title"><span>Designer</span> passionnée depuis 2019</h2>
<div class="divider"></div>
<p class="lead text-secondary mb-4">
Diplômée des Beaux-Arts de Paris et spécialisée en design d'interfaces,
j'ai eu la chance de collaborer avec des startups innovantes et des marques établies.
</p>
<p class="text-secondary mb-4">
Ma philosophie ? Allier esthétique et fonctionnalité pour créer des expériences
mémorables. Chaque projet est une nouvelle histoire à raconter visuellement.
</p>
<h6 class="fw-bold mb-3">Mes compétences</h6>
<div class="mb-3">
<span class="skill-tag"><i class="bi bi-pencil"></i> Figma</span>
<span class="skill-tag"><i class="bi bi-vector-pen"></i> Adobe Illustrator</span>
<span class="skill-tag"><i class="bi bi-camera"></i> Photoshop</span>
<span class="skill-tag"><i class="bi bi-play-circle"></i> After Effects</span>
<span class="skill-tag"><i class="bi bi-grid"></i> Webflow</span>
<span class="skill-tag"><i class="bi bi-palette"></i> Procreate</span>
<span class="skill-tag"><i class="bi bi-code-slash"></i> HTML/CSS</span>
</div>
<div class="mt-4">
<a href="#" class="btn btn-primary-custom"><i class="bi bi-download me-2"></i>Télécharger mon CV</a>
</div>
</div>
</div>
</section>
<!-- ==================== TÉMOIGNAGES ==================== -->
<section class="container py-5">
<div data-aos="fade-up">
<div class="section-subtitle">Ils me font confiance</div>
<h2 class="section-title"><span>Avis</span> clients</h2>
<div class="divider"></div>
</div>
<div class="row g-4">
<div class="col-md-6" data-aos="fade-up" data-aos-delay="0">
<div class="testi-card">
<div class="stars mb-3">★★★★★</div>
<p class="fst-italic mb-4 fs-5">"Emma a su capturer l'essence de notre marque et la retranscrire dans un design élégant et moderne. Un vrai talent !"</p>
<div class="d-flex align-items-center gap-3">
<img src="https://placehold.co/100/4ecdc4/white?text=SD" class="testi-avatar" alt="avatar" onerror="this.src='https://placehold.co/100/4ecdc4/white?text=S'">
<div>
<h6 class="fw-bold mb-0">Sophie Durand</h6>
<small class="text-secondary">Fondatrice, Bloom Cosmetics</small>
</div>
</div>
</div>
</div>
<div class="col-md-6" data-aos="fade-up" data-aos-delay="100">
<div class="testi-card">
<div class="stars mb-3">★★★★★</div>
<p class="fst-italic mb-4 fs-5">"Collaboration fluide, créativité débordante et livraison dans les temps. Je recommande Emma les yeux fermés."</p>
<div class="d-flex align-items-center gap-3">
<img src="https://placehold.co/100/ffe66d/2c3e50?text=ML" class="testi-avatar" alt="avatar" onerror="this.src='https://placehold.co/100/ffe66d/2c3e50?text=M'">
<div>
<h6 class="fw-bold mb-0">Marc Lambert</h6>
<small class="text-secondary">CTO, WiseBank</small>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== INSTAGRAM ==================== -->
<section class="container py-5">
<div class="d-flex justify-content-between align-items-end mb-4" data-aos="fade-up">
<div>
<div class="section-subtitle">Suivez-moi</div>
<h2 class="section-title mb-0"><span>Instagram</span> @emma.design</h2>
</div>
<a href="#" class="btn btn-outline-custom">S'abonner <i class="bi bi-instagram ms-2"></i></a>
</div>
<div class="row g-3">
<div class="col-6 col-md-3" data-aos="zoom-in" data-aos-delay="0">
<div class="insta-item">
<img src="https://placehold.co/400/ff6b6b/white?text=Design+1" alt="Instagram 1" onerror="this.src='https://placehold.co/400/ff6b6b/white?text=Insta'">
<div class="insta-overlay">
<i class="bi bi-instagram"></i>
</div>
</div>
</div>
<div class="col-6 col-md-3" data-aos="zoom-in" data-aos-delay="100">
<div class="insta-item">
<img src="https://placehold.co/400/4ecdc4/white?text=Design+2" alt="Instagram 2" onerror="this.src='https://placehold.co/400/4ecdc4/white?text=Insta'">
<div class="insta-overlay">
<i class="bi bi-instagram"></i>
</div>
</div>
</div>
<div class="col-6 col-md-3" data-aos="zoom-in" data-aos-delay="200">
<div class="insta-item">
<img src="https://placehold.co/400/ffe66d/2c3e50?text=Design+3" alt="Instagram 3" onerror="this.src='https://placehold.co/400/ffe66d/2c3e50?text=Insta'">
<div class="insta-overlay">
<i class="bi bi-instagram"></i>
</div>
</div>
</div>
<div class="col-6 col-md-3" data-aos="zoom-in" data-aos-delay="300">
<div class="insta-item">
<img src="https://placehold.co/400/2c3e50/white?text=Design+4" alt="Instagram 4" onerror="this.src='https://placehold.co/400/2c3e50/white?text=Insta'">
<div class="insta-overlay">
<i class="bi bi-instagram"></i>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== CONTACT ==================== -->
<section id="contact" class="container py-5">
<div class="contact-card" data-aos="fade-up">
<div class="row g-4">
<div class="col-lg-5">
<div class="section-subtitle">Contact</div>
<h2 class="section-title">Travaillons <span>ensemble</span></h2>
<p class="text-secondary mb-4">Vous avez un projet en tête ? Parlons-en autour d'un café (virtuel ou réel) !</p>
<div class="d-flex align-items-center mb-3">
<i class="bi bi-envelope-fill me-3" style="color: var(--primary); font-size: 1.5rem;"></i>
<div>
<small class="text-secondary">Email</small>
<p class="mb-0 fw-semibold">emma.laurent@design.fr</p>
</div>
</div>
<div class="d-flex align-items-center mb-3">
<i class="bi bi-telephone-fill me-3" style="color: var(--primary); font-size: 1.5rem;"></i>
<div>
<small class="text-secondary">Téléphone</small>
<p class="mb-0 fw-semibold">+33 6 98 76 54 32</p>
</div>
</div>
<div class="d-flex align-items-center">
<i class="bi bi-geo-alt-fill me-3" style="color: var(--primary); font-size: 1.5rem;"></i>
<div>
<small class="text-secondary">Studio</small>
<p class="mb-0 fw-semibold">Paris 11 · Le Marais</p>
</div>
</div>
<hr class="my-4">
<h6 class="fw-bold mb-3">Suivez-moi</h6>
<div class="d-flex gap-3">
<a href="#" class="social-icon"><i class="bi bi-instagram"></i></a>
<a href="#" class="social-icon"><i class="bi bi-behance"></i></a>
<a href="#" class="social-icon"><i class="bi bi-dribbble"></i></a>
<a href="#" class="social-icon"><i class="bi bi-linkedin"></i></a>
<a href="#" class="social-icon"><i class="bi bi-pinterest"></i></a>
</div>
</div>
<div class="col-lg-7">
<form>
<div class="row g-3">
<div class="col-md-6">
<input type="text" class="form-control contact-input" placeholder="Votre nom">
</div>
<div class="col-md-6">
<input type="email" class="form-control contact-input" placeholder="Votre email">
</div>
<div class="col-12">
<select class="form-select contact-input">
<option selected>Type de projet</option>
<option>Branding & Identité</option>
<option>UI/UX Design</option>
<option>Design System</option>
<option>Autre</option>
</select>
</div>
<div class="col-12">
<textarea class="form-control contact-input" rows="4" placeholder="Décrivez votre projet..."></textarea>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary-custom w-100">
<i class="bi bi-send me-2"></i>Envoyer le message
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- ==================== FOOTER ==================== -->
<footer>
<div class="container">
<div class="row gy-4">
<div class="col-md-5">
<h4 class="text-white fw-bold font-alt">Emma<span style="color: var(--primary);">.</span></h4>
<p class="small" style="color: #9aabb8;">Designer UI/UX & Branding · Création d'identités visuelles et d'expériences digitales mémorables.</p>
<p class="small mt-3" style="color: #9aabb8;">
<i class="bi bi-c-circle me-1"></i> 2026 Emma Laurent. Tous droits réservés.
</p>
</div>
<div class="col-6 col-md-2">
<h6 class="text-white fw-semibold">Navigation</h6>
<ul class="list-unstyled">
<li class="mb-2"><a href="#" class="footer-link">Accueil</a></li>
<li class="mb-2"><a href="#" class="footer-link">Services</a></li>
<li class="mb-2"><a href="#" class="footer-link">Projets</a></li>
<li class="mb-2"><a href="#" class="footer-link">Contact</a></li>
</ul>
</div>
<div class="col-6 col-md-2">
<h6 class="text-white fw-semibold">Services</h6>
<ul class="list-unstyled">
<li class="mb-2"><a href="#" class="footer-link">Branding</a></li>
<li class="mb-2"><a href="#" class="footer-link">UI/UX Design</a></li>
<li class="mb-2"><a href="#" class="footer-link">Design System</a></li>
<li class="mb-2"><a href="#" class="footer-link">Consulting</a></li>
</ul>
</div>
<div class="col-md-3">
<h6 class="text-white fw-semibold">Newsletter</h6>
<p class="small" style="color: #9aabb8;">Recevez mes actualités et inspirations design.</p>
<div class="input-group">
<input type="email" class="form-control bg-transparent text-white border-secondary" placeholder="Email" style="border-radius: 20px 0 0 20px;">
<button class="btn" style="background: var(--primary); color: white; border-radius: 0 20px 20px 0;"><i class="bi bi-send"></i></button>
</div>
</div>
</div>
<hr class="opacity-25 mt-4">
<div class="d-flex flex-wrap justify-content-between small" style="color: #7a8a99;">
<span>Made with <i class="bi bi-heart-fill" style="color: var(--primary);"></i> in Paris</span>
<span>
<a href="#" class="footer-link me-3">Mentions légales</a>
<a href="#" class="footer-link">Crédits</a>
</span>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init({
duration: 800,
once: true
});
</script>
</body>
</html>