Site Web de portfolio HTML avec menu latéral

Ouvrir dans l'éditeur Publiez votre code

Recommandé

13 January 2024

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Developer Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <aside class="sidebar">
        <div class="logo">[Your Logo]</div>
        <ul class="sidebar-menu">
            <li><a href="#about">About Me</a></li>
            <li><a href="#skills">Skills</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#experience">Experience</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </aside>

<main class="content">
        
        <section id="hero" class="section hero">
            <h1>Hi, I'm [Your Name]</h1>
            <p>I create digital solutions with a focus on design, efficiency, and user-centered experiences.</p>
            <a href="#projects" class="btn">See My Work</a>
        </section>

<section id="about" class="section about">
            <h2>About Me</h2>
            <p>A passionate developer who enjoys building applications that make life easier. I specialize in web and mobile development and love experimenting with new technologies.</p>
        </section>

<section id="skills" class="section skills">
            <h2>Skills</h2>
            <div class="skills-grid">
                <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">CSS</div>
                <div class="skill-card">UI/UX Design</div>
            </div>
        </section>

<section id="projects" class="section projects">
            <h2>Projects</h2>
            <div class="projects-grid">
                <div class="project-card">
                    <h3>Project Title 1</h3>
                    <p>Short description about the project.</p>
                    <a href="#" class="btn">View Project</a>
                </div>
                <div class="project-card">
                    <h3>Project Title 2</h3>
                    <p>Short description about the project.</p>
                    <a href="#" class="btn">View Project</a>
                </div>
                
            </div>
        </section>

<section id="experience" class="section experience">
            <h2>Experience</h2>
            <ul>
                <li><strong>Frontend Developer</strong> at Tech Corp (2020 - 2023)</li>
                <li><strong>Intern Developer</strong> at Web Studio (2018 - 2020)</li>
            </ul>
        </section>

<section id="contact" class="section contact">
            <h2>Contact Me</h2>
            <form action="#" method="POST">
                <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" class="btn">Send Message</button>
            </form>
        </section>
    </main>
</body>
</html>

CSS

/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body and General Styling */
body {
    font-family: 'Arial', sans-serif;
    display: flex;
}

/* Sidebar */
.sidebar {
    width: 250px;
    background: linear-gradient(to bottom, #9ad3bc, #57b8ff);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 30px;
    height: 100vh;
    position: fixed;
}

.sidebar .logo {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 40px;
}

.sidebar-menu {
    list-style: none;
}

.sidebar-menu li {
    margin: 20px 0;
}

.sidebar-menu a {
    color: #ffffff;
    text-decoration: none;
    font-size: 18px;
    transition: color 0.3s;
}

.sidebar-menu a:hover {
    color: #333;
}

/* Content Wrapper */
.content {
    margin-left: 250px;
    padding: 40px;
    width: 100%;
}

/* Section Styling */
.section {
    margin-bottom: 60px;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Hero Section */
.hero {
    background-color: #ffe0ac;
    text-align: center;
    color: #333;
}

.hero h1 {
    font-size: 2.8rem;
    margin-bottom: 20px;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 30px;
}

.hero .btn {
    padding: 12px 24px;
    font-size: 1rem;
    background-color: #f38181;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.hero .btn:hover {
    background-color: #f54a4a;
}

/* Section-specific styling */
.about, .experience {
    background-color: #f8f1f1;
}

.skills {
    background-color: #eaffd0;
}

.projects {
    background-color: #bce6eb;
}

.contact {
    background-color: #ffd3b6;
}

/* Skill and Project Cards */
.skills-grid, .projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
}

.skill-card, .project-card {
    background-color: #ffffff;
    color: #333;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.skill-card:hover, .project-card:hover {
    transform: scale(1.05);
}

/* Form Styling */
form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 500px;
    margin: 0 auto;
}

form input, form textarea {
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #cccccc;
    font-size: 1rem;
}

form button {
    padding: 12px;
    font-size: 1rem;
    background-color: #f38181;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s;
}

form button:hover {
    background-color: #f54a4a;
}

Site Web de portfolio HTML avec menu latéral

Recommandé

Jeu de morpion

Un code par hunganh

Un code de Metehan

HTML

CSS

JS

Recommandé

Jeu de morpion

Un code par hunganh

Un code de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS