Intro Portfolio Bootstrap 5 — Style 01

Bootstrap 5 Portfolio Intro Hero Template Snippet Responsive Html Css Developpeur Modern Animations Landing Page
Template intro portfolio Bootstrap 5 avec hero section, animations CSS, présentation développeur et mise en page moderne et responsive pour se démarquer.
<!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 051300 | AngularForAll</title>
<!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&family=Playfair+Display:ital,wght@0,700;1,700&display=swap" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <!-- AOS Library for animations -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

    <style>
        :root {
            --bg-color: #f8f9fa;
            --accent-color: #1a1a1a;
            --text-muted: #6c757d;
            --soft-shadow: 0 10px 30px rgba(0,0,0,0.05);
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-color);
            color: var(--accent-color);
            scroll-behavior: smooth;
        }

        h1, h2, .display-4 {
            font-family: 'Playfair Display', serif;
            font-weight: 700;
        }

        /* Navbar Custom */
        .navbar {
            backdrop-filter: blur(10px);
            background-color: rgba(248, 249, 250, 0.8);
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }

        /* Hero Section */
        .hero {
            padding: 160px 0 100px;
            min-height: 80vh;
            display: flex;
            align-items: center;
        }

        /* Portfolio Cards */
        .project-card {
            border: none;
            border-radius: 20px;
            overflow: hidden;
            background: white;
            transition: transform 0.4s ease, box-shadow 0.4s ease;
            box-shadow: var(--soft-shadow);
            margin-bottom: 30px;
        }

        .project-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }

        .project-img {
            height: 300px;
            background: #e9ecef;
            display: flex;
            align-items: center;
            justify-content: center;
            font-style: italic;
            color: #adb5bd;
        }

        /* Footer */
        footer {
            padding: 80px 0;
            background: white;
            border-top: 1px solid rgba(0,0,0,0.05);
        }

        .btn-dark {
            border-radius: 50px;
            padding: 12px 30px;
            font-weight: 600;
            transition: all 0.3s;
        }

        .btn-dark:hover {
            transform: scale(1.05);
            background-color: #333;
        }
    </style>
</head>
<body>

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg fixed-top px-4">
        <div class="container-fluid">
            <a class="navbar-brand fw-bold" href="#">DESIGN.CO</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 ms-auto">
                    <li class="nav-item"><a class="nav-link px-3" href="#work">Projets</a></li>
                    <li class="nav-item"><a class="nav-link px-3" href="#about">À propos</a></li>
                    <li class="nav-item"><a class="nav-link px-3" href="#contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-8" data-aos="fade-up">
                    <h1 class="display-1 mb-4">Créateur d'expériences <span class="text-muted italic">numériques.</span></h1>
                    <p class="lead text-secondary mb-5 w-75">Spécialisé en design d'interface minimaliste et développement front-end interactif.</p>
                    <a href="#work" class="btn btn-dark">Voir mes travaux</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Project Grid -->
    <section id="work" class="py-5">
        <div class="container">
            <div class="row">
                <!-- Projet 1 -->
                <div class="col-md-6" data-aos="fade-up">
                    <div class="project-card">
                        <div class="project-img">Aperçu Projet 1</div>
                        <div class="p-4">
                            <h3 class="h5 mb-2">E-commerce de Luxe</h3>
                            <p class="text-muted small">UI/UX Design • Mobile App</p>
                        </div>
                    </div>
                </div>
                <!-- Projet 2 -->
                <div class="col-md-6" data-aos="fade-up" data-aos-delay="100">
                    <div class="project-card">
                        <div class="project-img">Aperçu Projet 2</div>
                        <div class="p-4">
                            <h3 class="h5 mb-2">Dashboard Analytics</h3>
                            <p class="text-muted small">Web Application • SaaS</p>
                        </div>
                    </div>
                </div>
                <!-- Projet 3 -->
                <div class="col-md-6" data-aos="fade-up">
                    <div class="project-card">
                        <div class="project-img">Aperçu Projet 3</div>
                        <div class="p-4">
                            <h3 class="h5 mb-2">Plateforme Éducative</h3>
                            <p class="text-muted small">Branding • Design System</p>
                        </div>
                    </div>
                </div>
                <!-- Projet 4 -->
                <div class="col-md-6" data-aos="fade-up" data-aos-delay="100">
                    <div class="project-card">
                        <div class="project-img">Aperçu Projet 4</div>
                        <div class="p-4">
                            <h3 class="h5 mb-2">Application Bien-être</h3>
                            <p class="text-muted small">UI Design • Animation</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer / Contact -->
    <footer id="contact">
        <div class="container text-center">
            <h2 class="display-4 mb-4" data-aos="fade-up">Travaillons ensemble.</h2>
            <p class="mb-5" data-aos="fade-up" data-aos-delay="100">Disponible pour de nouveaux projets créatifs.</p>
            <div class="d-flex justify-content-center gap-4 mb-5" data-aos="fade-up" data-aos-delay="200">
                <a href="#" class="text-dark fs-4"><i class="bi bi-behance"></i></a>
                <a href="#" class="text-dark fs-4"><i class="bi bi-dribbble"></i></a>
                <a href="#" class="text-dark fs-4"><i class="bi bi-linkedin"></i></a>
                <a href="#" class="text-dark fs-4"><i class="bi bi-instagram"></i></a>
            </div>
            <p class="text-muted small">&copy; 2026 Portfolio Design. Tous droits réservés.</p>
        </div>
    </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>
        // Initialisation des animations au scroll
        AOS.init({
            duration: 1000,
            once: true,
            easing: 'ease-out'
        });

        // Changement de style de la navbar au scroll
        window.addEventListener('scroll', function() {
            const nav = document.querySelector('.navbar');
            if (window.scrollY > 50) {
                nav.style.padding = "10px 0";
                nav.style.boxShadow = "0 5px 20px rgba(0,0,0,0.05)";
            } else {
                nav.style.padding = "20px 0";
                nav.style.boxShadow = "none";
            }
        });
    </script>
</body>
</html>
Télécharger le fichier source
- Intro Portfolio Bootstrap 5 — Style 01

Explorer par mot clé

Partager

Voir aussi

Explorer par mot clé
