Bootstrap 5
Portfolio
Intro
Hero
Template
Snippet
Responsive
Html Css
Developpeur
Animations
Call To Action
Landing Page
Troisième variante intro portfolio Bootstrap 5 : hero animé, typographie impactante, icônes sociales et call-to-action fort pour se démarquer en ligne.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="AngularForAll" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="public, max-age=604800" />
<title>Template Intro Portfolio Boostrap5 2026 051310 | AngularForAll</title>
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Google Fonts: Syne pour les titres, Outfit pour le texte -->
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Outfit:wght@300;400;600&display=swap" rel="stylesheet">
<!-- Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<!-- Animations -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<style>
:root {
--bg: #050505;
--card-bg: #111111;
--accent: #00ff88; /* Vert néon élégant */
--text-main: #ffffff;
--text-dim: #a0a0a0;
}
body {
font-family: 'Outfit', sans-serif;
background-color: var(--bg);
color: var(--text-main);
overflow-x: hidden;
}
h1, h2, h3, .nav-link { font-family: 'Syne', sans-serif; text-transform: uppercase; }
/* --- Header --- */
.navbar {
backdrop-filter: blur(15px);
background: rgba(5, 5, 5, 0.8);
border-bottom: 1px solid rgba(255,255,255,0.05);
padding: 20px 0;
}
/* --- Intro --- */
.hero {
padding: 180px 0 100px;
background: radial-gradient(circle at top right, #00ff8815, transparent);
}
.display-1 { font-weight: 800; font-size: clamp(3rem, 8vw, 6rem); line-height: 1; }
/* --- Skills --- */
.skill-badge {
background: var(--card-bg);
border: 1px solid rgba(255,255,255,0.1);
padding: 15px 25px;
border-radius: 100px;
display: inline-block;
margin: 5px;
transition: 0.3s;
}
.skill-badge:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-5px); }
/* --- Services --- */
.service-card {
background: var(--card-bg);
border: 1px solid rgba(255,255,255,0.05);
padding: 40px;
border-radius: 30px;
height: 100%;
transition: 0.4s;
}
.service-card:hover { background: #1a1a1a; border-color: var(--accent); }
.service-icon { font-size: 2.5rem; color: var(--accent); margin-bottom: 20px; }
/* --- Realisation Filter --- */
.filter-btn {
background: transparent;
border: 1px solid rgba(255,255,255,0.1);
color: white;
padding: 8px 25px;
border-radius: 100px;
margin: 5px;
transition: 0.3s;
}
.filter-btn.active, .filter-btn:hover { background: var(--accent); color: black; border-color: var(--accent); }
.portfolio-item { display: block; transition: 0.4s; }
.portfolio-img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
border-radius: 20px;
filter: grayscale(1);
transition: 0.5s;
}
.portfolio-item:hover .portfolio-img { filter: grayscale(0); transform: scale(1.02); }
/* --- Pourquoi Moi --- */
.why-me-section { background: var(--card-bg); border-radius: 50px; padding: 80px 0; }
/* --- Contact --- */
.form-control {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.1);
color: white;
padding: 15px;
border-radius: 12px;
}
.form-control:focus { background: rgba(255,255,255,0.08); border-color: var(--accent); box-shadow: none; color: white; }
.btn-accent {
background: var(--accent);
color: black;
font-weight: 700;
padding: 15px 40px;
border-radius: 100px;
border: none;
transition: 0.3s;
}
.btn-accent:hover { transform: scale(1.05); box-shadow: 0 0 30px rgba(0, 255, 136, 0.4); }
</style>
</head>
<body>
<!-- Header -->
<nav class="navbar navbar-expand-lg fixed-top navbar-dark">
<div class="container">
<a class="navbar-brand fw-bold fs-3" href="#">DEV<span style="color:var(--accent)">.</span>UI</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMain">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navMain">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#skills">Skills</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">Projets</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Intro / Hero -->
<section class="hero">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-10" data-aos="fade-up">
<span class="text-accent mb-3 d-block fw-bold" style="letter-spacing: 3px;">DESIGNER & DÉVELOPPEUR</span>
<h1 class="display-1 mb-4">L'ART DE CRÉER DES <span style="color: var(--accent)">INTERFACES</span> FUTURISTES.</h1>
<p class="lead text-dim w-75 mb-5">Je transforme vos idées en expériences numériques haute performance, alliant esthétique minimaliste et code robuste.</p>
<a href="#contact" class="btn btn-accent">Démarrer un projet</a>
</div>
</div>
</div>
</section>
<!-- Skills -->
<section id="skills" class="py-5">
<div class="container">
<h2 class="mb-5" data-aos="fade-right">Mes outils <span class="outline-text">fétiches</span></h2>
<div class="d-flex flex-wrap" data-aos="fade-up">
<div class="skill-badge">UI/UX Design</div>
<div class="skill-badge">Bootstrap 5</div>
<div class="skill-badge">JavaScript ES6</div>
<div class="skill-badge">React.js</div>
<div class="skill-badge">Figma</div>
<div class="skill-badge">Node.js</div>
<div class="skill-badge">SEO Optimization</div>
<div class="skill-badge">Animations GSAP</div>
</div>
</div>
</section>
<!-- Services -->
<section id="services" class="py-100 section-padding" style="margin-top: 100px;">
<div class="container">
<div class="row mb-5">
<div class="col-md-6" data-aos="fade-right">
<h2>Ce que je fais <br><span class="text-accent">pour vous</span></h2>
</div>
</div>
<div class="row g-4">
<div class="col-md-4" data-aos="fade-up">
<div class="service-card">
<i class="bi bi-layers service-icon"></i>
<h4>UI/UX Design</h4>
<p class="text-dim small">Conception d'interfaces centrées sur l'utilisateur, intuitives et visuellement impactantes.</p>
</div>
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="100">
<div class="service-card">
<i class="bi bi-code-slash service-icon"></i>
<h4>Développement</h4>
<p class="text-dim small">Codage de sites web modernes, rapides, sécurisés et totalement responsives.</p>
</div>
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="200">
<div class="service-card">
<i class="bi bi-rocket-takeoff service-icon"></i>
<h4>Branding</h4>
<p class="text-dim small">Création d'identités visuelles fortes qui démarquent votre marque sur le marché.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Realisation Filter -->
<section id="portfolio" class="py-100" style="margin-top: 100px;">
<div class="container">
<div class="text-center mb-5">
<h2 data-aos="fade-down">Réalisations</h2>
<div class="mt-4" data-aos="fade-up">
<button class="filter-btn active" data-filter="all">Tous</button>
<button class="filter-btn" data-filter="web">Web</button>
<button class="filter-btn" data-filter="design">Design</button>
<button class="filter-btn" data-filter="app">Mobile</button>
</div>
</div>
<div class="row g-4 portfolio-container" data-aos="fade-up">
<div class="col-md-6 portfolio-item web">
<img src="public/team.jpg" class="portfolio-img" alt="Projet">
<h5 class="mt-3">E-commerce Vision</h5>
</div>
<div class="col-md-6 portfolio-item design">
<img src="public/team.jpg" class="portfolio-img" alt="Projet">
<h5 class="mt-3">Branding Agence</h5>
</div>
<div class="col-md-6 portfolio-item app">
<img src="public/team.jpg" class="portfolio-img" alt="Projet">
<h5 class="mt-3">App Mobile Fintech</h5>
</div>
<div class="col-md-6 portfolio-item web">
<img src="public/team.jpg" class="portfolio-img" alt="Projet">
<h5 class="mt-3">SaaS Dashboard</h5>
</div>
</div>
</div>
</section>
<!-- Pourquoi moi -->
<section class="py-5">
<div class="container">
<div class="why-me-section">
<div class="row justify-content-center text-center">
<div class="col-lg-8">
<h2 class="mb-4" data-aos="fade-up">Pourquoi travailler <br>avec <span class="text-accent">moi ?</span></h2>
<div class="row g-4 mt-2">
<div class="col-md-4" data-aos="zoom-in">
<h3 class="text-accent">01</h3>
<h6>Qualité Pixel-Perfect</h6>
</div>
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="100">
<h3 class="text-accent">02</h3>
<h6>Code Propre & SEO</h6>
</div>
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="200">
<h3 class="text-accent">03</h3>
<h6>Support 24/7</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact" class="py-100" style="padding: 100px 0;">
<div class="container">
<div class="row g-5">
<div class="col-lg-5" data-aos="fade-right">
<h2 class="display-4">Parlons de votre <br><span class="text-accent">succès.</span></h2>
<p class="text-dim mt-4">Vous avez un projet en tête ? Contactez-moi dès aujourd'hui pour une consultation gratuite.</p>
<div class="mt-5">
<p><i class="bi bi-geo-alt text-accent me-2"></i> Paris, France / Remote</p>
<p><i class="bi bi-envelope text-accent me-2"></i> contact@monportfolio.com</p>
</div>
</div>
<div class="col-lg-7" data-aos="fade-left">
<form action="#" class="row g-3">
<div class="col-md-6">
<input type="text" class="form-control" placeholder="Nom complet">
</div>
<div class="col-md-6">
<input type="email" class="form-control" placeholder="Email">
</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">
<button type="submit" class="btn btn-accent w-100">Envoyer le message</button>
</div>
</form>
</div>
</div>
</div>
</section>
<footer class="py-4 text-center border-top border-secondary opacity-50">
<p class="small">© 2026 DESIGN.UI - Tous droits réservés.</p>
</footer>
<!-- 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>
AOS.init({ duration: 1000, once: true });
// Filtrage des réalisations
const filterBtns = document.querySelectorAll('.filter-btn');
const items = document.querySelectorAll('.portfolio-item');
filterBtns.forEach(btn => {
btn.addEventListener('click', () => {
// Update active button
filterBtns.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
const filter = btn.getAttribute('data-filter');
items.forEach(item => {
if (filter === 'all' || item.classList.contains(filter)) {
item.style.display = 'block';
setTimeout(() => item.style.opacity = '1', 10);
} else {
item.style.opacity = '0';
setTimeout(() => item.style.display = 'none', 400);
}
});
});
});
</script>
</body>
</html>
Télécharger le fichier source