Modèle de site Web de portefeuille HTML CSS

4,193 MyPortfolio

Ouvrir dans l'éditeur Publiez votre code

Modèle de site Web de portefeuille HTML CSS

Recommandé

15 September 2025

Exemple d'animation de grille CSS

5 August 2024

Système solaire en cascade

4 February 2026

Chargeur de jeu HTML5 Deadly Descent

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            background-color: #f9f9f9;
        }

header {
            background: #333;
            color: white;
            padding: 20px;
            text-align: center;
        }

.container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

.portfolio, .skills, .about, .contact {
            margin: 40px 0;
        }

.portfolio {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

.portfolio-item {
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin: 10px;
            padding: 15px;
            width: calc(30% - 40px);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s;
        }

.portfolio-item:hover {
            transform: scale(1.05);
        }

.portfolio-item img {
            max-width: 100%;
            border-radius: 5px;
        }

.skills {
            background: #ececec;
            padding: 20px;
            border-radius: 5px;
        }

.skills h2, .about h2, .contact h2 {
            text-align: center;
        }

.skills-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

.skill-item {
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin: 10px;
            padding: 10px 20px;
            width: calc(20% - 40px);
            text-align: center;
            transition: background 0.3s;
        }

.skill-item:hover {
            background: #d6d6d6;
        }

footer {
            background: #333;
            color: white;
            text-align: center;
            padding: 10px;
            position: relative;
            bottom: 0;
            width: 100%;
        }

@media (max-width: 768px) {
            .portfolio-item {
                width: calc(45% - 40px);
            }
            .skill-item {
                width: calc(45% - 40px);
            }
        }

@media (max-width: 480px) {
            .portfolio-item, .skill-item {
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <header>
        <h1>My Portfolio</h1>
        <p>Welcome to my online portfolio! Here are some of my projects.</p>
    </header>

<div class="container">
        
        <section class="about">
            <h2>About Me</h2>
            <p>Hello! I'm a passionate web developer with experience in creating dynamic and responsive web applications. I enjoy coding and am always eager to learn new technologies.</p>
        </section>

<section class="skills">
            <h2>Skills</h2>
            <div class="skills-list">
                <div class="skill-item">HTML</div>
                <div class="skill-item">CSS</div>
                <div class="skill-item">JavaScript</div>
                <div class="skill-item">React</div>
                <div class="skill-item">Node.js</div>
                <div class="skill-item">Python</div>
            </div>
        </section>

<section class="portfolio">
            <h2>My Work</h2>
            <div class="portfolio-item">
                <img src="project1.jpg" alt="Project 1">
                <h3>Project 1</h3>
                <p>Description of project 1. This project involves...</p>
                <a href="#">View Project</a>
            </div>
            <div class="portfolio-item">
                <img src="project2.jpg" alt="Project 2">
                <h3>Project 2</h3>
                <p>Description of project 2. This project involves...</p>
                <a href="#">View Project</a>
            </div>
            <div class="portfolio-item">
                <img src="project3.jpg" alt="Project 3">
                <h3>Project 3</h3>
                <p>Description of project 3. This project involves...</p>
                <a href="#">View Project</a>
            </div>
            
        </section>

<section class="contact">
            <h2>Contact Me</h2>
            <p>Feel free to reach out to me via email or connect with me on social media!</p>
            <p>Email: <a href="mailto:yourname@example.com">yourname@example.com</a></p>
            <p>LinkedIn: <a href="#">Your LinkedIn Profile</a></p>
            <p>GitHub: <a href="#">Your GitHub Profile</a></p>
        </section>
    </div>

</html>

CSS