Site Web de portfolio de développeur HTML

1,762 MyPortfolio

Ouvrir dans l'éditeur Publiez votre code

Site Web de portfolio de développeur HTML

Recommandé

23 August 2025

Modèle HTML CSS de formulaire de connexion et d'inscription

20 June 2025

Formulaire de connexion HTML turc

5 June 2025

Un code de Metehan

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