Modèle de site Web de portefeuille moderne

2,287 lebdev

Ouvrir dans l'éditeur Publiez votre code

Modèle de site Web de portefeuille moderne

Recommandé

25 November 2025

Modèle HTML pour site web de films | Responsive et filtrable

13 June 2025

Interface utilisateur de l'application Réveil et Chronomètre

16 December 2024

Un code par smartfunction263

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Out-of-the-Box Portfolio</title>

</head>
<body>
    <header>
        <div class="container">
            <h1 class="logo">Your Name</h1>
            <nav>
                <ul>
                    <li><a href="#about">About</a></li>
                    <li><a href="#skills">Skills</a></li>
                    <li><a href="#projects">Projects</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

<section id="hero">
        <div class="container">
            <div class="hero-content">
                <h2>Hi, I'm <span class="highlight">Your Name</span></h2>
                <p>Creating immersive web experiences with passion and creativity.</p>
                <a href="#projects" class="cta-button">See My Work</a>
            </div>
            <div class="hero-animation">
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
            </div>
        </div>
    </section>

<section id="about">
        <div class="container">
            <h2>About Me</h2>
            <p>I’m a creative developer with a knack for innovative solutions. I specialize in crafting sleek, user-friendly websites that merge aesthetics with functionality.</p>
        </div>
    </section>

<section id="skills">
        <div class="container">
            <h2>Skills</h2>
            <div class="skills-grid">
                <div class="skill-card">
                    <h3>HTML</h3>
                    <p>Building clean, semantic, and accessible markup.</p>
                </div>
                <div class="skill-card">
                    <h3>CSS</h3>
                    <p>Designing responsive and visually appealing layouts.</p>
                </div>
                <div class="skill-card">
                    <h3>JavaScript</h3>
                    <p>Adding interactivity and functionality.</p>
                </div>
                <div class="skill-card">
                    <h3>React</h3>
                    <p>Creating modern, dynamic web applications.</p>
                </div>
            </div>
        </div>
    </section>

<section id="projects">
        <div class="container">
            <h2>Projects</h2>
            <div class="projects-grid">
                <div class="project-card">
                    <h3>Project 1</h3>
                    <p>A stunning website showcasing sleek animations.</p>
                </div>
                <div class="project-card">
                    <h3>Project 2</h3>
                    <p>A full-stack application with a seamless user interface.</p>
                </div>
                <div class="project-card">
                    <h3>Project 3</h3>
                    <p>An interactive data visualization tool.</p>
                </div>
            </div>
        </div>
    </section>

<section id="contact">
        <div class="container">
            <h2>Contact Me</h2>
            <p>Let’s collaborate to bring your ideas to life!</p>
            <a href="mailto:yourname@example.com" class="cta-button">Get in Touch</a>
        </div>
    </section>

<footer>
        <p>© 2024 Your Name. All rights reserved.</p>
    </footer>
</body>
</html>

CSS

/* General Reset */
body, h1, h2, p, ul, li {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: #444;
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Header */
header {
    background: linear-gradient(135deg, #1e3a8a, #6366f1);
    padding: 15px 0;
    color: white;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

header ul {
    list-style: none;
    display: flex;
}

header ul li {
    margin: 0 10px;
}

header ul li a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    transition: color 0.3s;
}

header ul li a:hover {
    color: #d1d5db;
}

/* Hero Section */
#hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 100px 20px;
    text-align: center;
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    color: white;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#hero .highlight {
    color: #ffd700;
}

.hero-content {
    max-width: 800px;
}

.hero-animation {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-animation .circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    animation: float 6s infinite;
}

.hero-animation .circle:nth-child(1) {
    width: 100px;
    height: 100px;
    top: 20%;
    left: 10%;
}

.hero-animation .circle:nth-child(2) {
    width: 150px;
    height: 150px;
    top: 50%;
    right: 20%;
}

.hero-animation .circle:nth-child(3) {
    width: 200px;
    height: 200px;
    bottom: 10%;
    left: 40%;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* About Section */
#about, #skills, #projects, #contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 60px 20px;
    width: 100%;
    max-width: 1200px;
}

#about h2, #skills h2, #projects h2, #contact h2 {
    margin-bottom: 20px;
    font-size: 28px;
    color: #2575fc;
}

#about p {
    max-width: 800px;
}

/* Skills Section */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    width: 100%;
}

.skill-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    text-align: center;
}

.skill-card:hover {
    transform: translateY(-10px);
}

/* Projects Section */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    width: 100%;
}

.project-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    text-align: center;
}

.project-card:hover {
    transform: translateY(-10px);
}

/* Contact Section */
.cta-button {
    display: inline-block;
    padding: 10px 20px;
    background: #6366f1;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s;
}

.cta-button:hover {
    background: #4f46e5;
}

/* Footer */
footer {
    background: #1e293b;
    color: white;
    text-align: center;
    padding: 15px 0;
    width: 100%;
}