Portafolio de desarrolladores HTML V2

1,859 MyPortfolio

Abrir en el editor Publica tu código

Recomendado

18 October 2025

Botón HTML con efecto de desplazamiento (WEBLEB)

12 July 2025

Aplicación TheDoc Notes

29 July 2024

Animación de introducción de Netflix CSS puro

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">DevPortfolio</div>
            <ul class="nav-links">
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#skills">Skills</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#testimonials">Testimonials</a></li>
                <li><a href="#blog">Blog</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

<section id="hero">
        <div class="hero-content">
            <h1>Hi, I'm <span class="highlight">Your Name</span></h1>
            <p>Web Developer | Designer | Problem Solver</p>
            <a href="#contact" class="cta-btn">Get In Touch</a>
        </div>
    </section>

<section id="about" class="section-padding">
        <h2>About Me</h2>
        <p>I'm a full-stack developer with a passion for designing and building dynamic, user-friendly web applications. With experience in a range of modern technologies, I aim to deliver efficient and scalable solutions for my clients.</p>
    </section>

<section id="services" class="section-padding bg-light">
        <h2>Services</h2>
        <div class="services-grid">
            <div class="service-card">
                <h3>Web Development</h3>
                <p>Building responsive and interactive websites using modern technologies.</p>
            </div>
            <div class="service-card">
                <h3>UI/UX Design</h3>
                <p>Designing user interfaces with an emphasis on usability and accessibility.</p>
            </div>
            <div class="service-card">
                <h3>Consulting</h3>
                <p>Helping you define and refine your web development strategies.</p>
            </div>
        </div>
    </section>

<section id="skills" class="section-padding">
        <h2>Skills</h2>
        <div class="skills-grid">
            <div class="skill-card">HTML</div>
            <div class="skill-card">CSS</div>
            <div class="skill-card">JavaScript</div>
            <div class="skill-card">React</div>
            <div class="skill-card">Node.js</div>
            <div class="skill-card">Python</div>
            <div class="skill-card">Git</div>
            <div class="skill-card">SQL</div>
        </div>
    </section>

<section id="projects" class="section-padding bg-light">
        <h2>Projects</h2>
        <div class="projects-grid">
            <div class="project-card">
                <h3>Project 1</h3>
                <p>A brief description of this project and the technologies used.</p>
            </div>
            <div class="project-card">
                <h3>Project 2</h3>
                <p>A brief description of this project and the technologies used.</p>
            </div>
            <div class="project-card">
                <h3>Project 3</h3>
                <p>A brief description of this project and the technologies used.</p>
            </div>
        </div>
    </section>

<section id="testimonials" class="section-padding">
        <h2>Testimonials</h2>
        <div class="testimonials-grid">
            <div class="testimonial-card">
                <p>"Amazing work! The website was delivered on time and exceeded expectations!"</p>
                <p class="client-name">- Client Name</p>
            </div>
            <div class="testimonial-card">
                <p>"Incredible skills and attention to detail. Will definitely hire again!"</p>
                <p class="client-name">- Client Name</p>
            </div>
        </div>
    </section>

<section id="blog" class="section-padding bg-light">
        <h2>Blog</h2>
        <div class="blog-grid">
            <div class="blog-card">
                <h3>Blog Post 1</h3>
                <p>A short summary of the blog post.</p>
            </div>
            <div class="blog-card">
                <h3>Blog Post 2</h3>
                <p>A short summary of the blog post.</p>
            </div>
        </div>
    </section>

<section id="contact" class="section-padding">
        <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

/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body and Font Styles */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f4f8;
    color: #333;
}

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

.logo {
    font-size: 1.8rem;
    color: #ecf0f1;
    font-weight: bold;
}

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

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

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

/* Hero Section */
#hero {
    background-color: #1abc9c;
    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: #f1c40f;
}

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

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

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

/* Sections */
.section-padding {
    padding: 4rem 2rem;
}

.bg-light {
    background-color: #ecf0f1;
}

h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 2rem;
}

/* Services */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    text-align: center;
}

.service-card {
    background-color: #3498db;
    color: white;
    padding: 2rem;
    border-radius: 5px;
    transition: transform 0.3s ease;
}

.service-card:hover {
    transform: translateY(-10px);
}

/* Skills */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
    text-align: center;
}

.skill-card {
    background-color: #34495e;
    color: white;
    padding: 2rem;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.skill-card:hover {
    background-color: #1abc9c;
}

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

.project-card {
    background-color: white;
    padding: 2rem;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Testimonials */
.testimonials-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.testimonial-card {
    background-color: #ecf0f1;
    padding: 2rem;
    border-radius: 5px;
    border-left: 5px solid #1abc9c;
}

.client-name {
    margin-top: 1rem;
    font-weight: bold;
}

/* Blog */
.blog-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.blog-card {
    background-color: white;
    padding: 2rem;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Contact Section */
#contact form {
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

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

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

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

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