Site Web de portfolio de développeur HTML

Ouvrir dans l'éditeur Publiez votre code

Recommandé

21 July 2024

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

Site Web de portfolio de développeur HTML

Recommandé

Formulaire de connexion animé

Une page de connexion simple

Calculateur de date

HTML

CSS

JS

Recommandé

Formulaire de connexion animé

Une page de connexion simple

Calculateur de date

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS