HTML Developer Portfolio Website

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

HTML Developer Portfolio Website

Recommended

Developer Landing Page HTML CSS

HTML CSS Toggle Button

HTML Landing Page

HTML

CSS

JS

Recommended

Developer Landing Page HTML CSS

HTML CSS Toggle Button

HTML Landing Page

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS