Modello di sito Web portfolio HTML CSS

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

11 March 2025

<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>

Modello di sito Web portfolio HTML CSS

Consigliato

Un codice di stevenolaeem

Un codice di Metehan

Un codice di programmationant

HTML

CSS

JS

Consigliato

Un codice di stevenolaeem

Un codice di Metehan

Un codice di programmationant

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS