HTML Developer Portfolio V2

Open In Editor Video Publish Your Code

<!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;
}

HTML Developer Portfolio V2

Recommended

CSS Glassmorphism Button with Shine Animation

Color Picker Circle

Form with Video Background

HTML

CSS

JS

Recommended

CSS Glassmorphism Button with Shine Animation

Color Picker Circle

Form with Video Background

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS