Modèle de site Web de portefeuille HTML CSS

3832 MyPortfolio

Ouvrir dans l'éditeur Video Publiez votre code

Modèle de site Web de portefeuille HTML CSS

Recommandé

12 January 2026

Émulateur HTML NES : Jouez à Mega Man 6 en ligne

22 January 2026

Code source HTML5 du jeu Room Clicker

18 August 2024

Case à cocher / Développeur ou designer ?

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>

Recommandé

Émulateur HTML NES : Jouez à Mega Man 6 en ligne

Code source HTML5 du jeu Room Clicker

Case à cocher / Développeur ou designer ?

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS