HTML Developer Portfolio V2

Open In Editor 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 Circle Glow Animation Effect

Among Us

Creative Blog: Design, Podcast & Portfolio HTML

HTML

CSS

JS

Recommended

CSS Circle Glow Animation Effect

Among Us

Creative Blog: Design, Podcast & Portfolio HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS