Sito web del portfolio dello sviluppatore HTML

1045 MyPortfolio

Apri nell'Editor Pubblica il Tuo Codice

Sito web del portfolio dello sviluppatore HTML

Consigliato

1 March 2025

HTML CSS Barra di navigazione moderna

30 May 2025

Codifica manuale della pagina di accesso di Facebook

8 July 2025

Scelta del personaggio con animazione della scheda di anteprima (sprite CSS)

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

Consigliato

HTML CSS Barra di navigazione moderna

Codifica manuale della pagina di accesso di Facebook

Scelta del personaggio con animazione della scheda di anteprima (sprite CSS)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS