Plantilla de sitio web de cartera HTML CSS

Abrir en el editor Publica tu código

Recomendado

21 December 2024

Código de barra de navegación HTML CSS

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>

Plantilla de sitio web de cartera HTML CSS

Recomendado

Un código de cleancloud166

Un código de ytr3d3

Código de barra de navegación HTML CSS

HTML

CSS

JS

Recomendado

Un código de cleancloud166

Un código de ytr3d3

Código de barra de navegación HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS