Sitio web de portafolios para desarrolladores HTML

1733 MyPortfolio

Abrir en el editor Video Publica tu código

Sitio web de portafolios para desarrolladores HTML

Recomendado

22 November 2025

Formulario de inicio de sesión de Liquid Glass HTML CSS

23 August 2025

Plantilla HTML/CSS/JS para formulario de inicio de sesión y registro

30 August 2024

Juego de la serpiente: renderizador CSS

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Developer Portfolio</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo">DevName</div>
            <ul class="nav-links">
                <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>
    </header>

<section id="hero">
        <div class="hero-content">
            <h1>Hello, I'm <span class="highlight">Your Name</span></h1>
            <p>A passionate developer bringing your ideas to life</p>
            <a href="#projects" class="cta-btn">View My Work</a>
        </div>
    </section>

<section id="about">
        <h2>About Me</h2>
        <p>I'm a full-stack developer with a love for creating interactive and dynamic web applications. Let's build something great together.</p>
    </section>

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

<section id="projects">
        <h2>Projects</h2>
        <div class="projects-grid">
            <div class="project-card">
                <h3>Project 1</h3>
                <p>A brief description of your project. Lorem ipsum dolor sit amet.</p>
            </div>
            <div class="project-card">
                <h3>Project 2</h3>
                <p>A brief description of your project. Lorem ipsum dolor sit amet.</p>
            </div>
            <div class="project-card">
                <h3>Project 3</h3>
                <p>A brief description of your project. Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
    </section>

<section id="contact">
        <h2>Contact Me</h2>
        <form action="#">
            <input type="text" name="name" placeholder="Your Name" required>
            <input type="email" name="email" placeholder="Your Email" required>
            <input name="message" placeholder="Your Message" required />
            <button type="submit">Send Message</button>
        </form>
    </section>

<footer>
        <p>© 2024 Your Name. All Rights Reserved.</p>
    </footer>

CSS

/* Reset some default browser styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Set font styles */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    background-color: #f4f4f9;
    color: #333;
}

header {
    background-color: #333;
    padding: 1rem;
    text-align: center;
}

header .logo {
    font-size: 1.5rem;
    color: #fff;
    font-weight: bold;
}

.nav-links {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.nav-links a {
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
}

.nav-links a:hover {
    color: #ff6347;
}

#hero {
    background-color: #ff6347;
    color: white;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}

.hero-content h1 {
    font-size: 3rem;
}

.hero-content .highlight {
    color: #ffd700;
}

.hero-content p {
    margin: 1rem 0;
    font-size: 1.25rem;
}

.cta-btn {
    background-color: #ffd700;
    color: #333;
    padding: 0.75rem 2rem;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.cta-btn:hover {
    background-color: #ffdd57;
}

/* About Section */
#about {
    padding: 4rem 2rem;
    text-align: center;
}

#about h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

/* Skills Section */
#skills {
    background-color: #333;
    color: white;
    padding: 4rem 2rem;
    text-align: center;
}

#skills h2 {
    margin-bottom: 1.5rem;
}

.skill-list {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.skill {
    background-color: #444;
    padding: 1rem 2rem;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.skill:hover {
    background-color: #ff6347;
}

/* Projects Section */
#projects {
    padding: 4rem 2rem;
    text-align: center;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.project-card {
    background-color: #f4f4f9;
    padding: 2rem;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.project-card h3 {
    margin-bottom: 1rem;
}

/* Contact Section */
#contact {
    background-color: #ff6347;
    color: white;
    padding: 4rem 2rem;
    text-align: center;
}

#contact form {
    max-width: 500px;
    margin: 0 auto;
}

#contact input,
#contact textarea {
    width: 100%;
    padding: 1rem;
    margin-bottom: 1rem;
    border: none;
    border-radius: 5px;
}

#contact button {
    background-color: #ffd700;
    color: #333;
    padding: 1rem 2rem;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
}

#contact button:hover {
    background-color: #ffdd57;
}

/* Footer */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1rem;
}

Recomendado

Formulario de inicio de sesión de Liquid Glass HTML CSS

Plantilla HTML/CSS/JS para formulario de inicio de sesión y registro

Juego de la serpiente: renderizador CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS