साइड मेनू के साथ HTML पोर्टफोलियो वेबसाइट

अनुशंसित

28 August 2024

सभी ग्रहों के साथ एक वास्तविक चलती हुई सोलर सिस्टम

29 April 2025

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

साइड मेनू के साथ HTML पोर्टफोलियो वेबसाइट

अनुशंसित

मौसम वेबसाइट

सभी ग्रहों के साथ एक वास्तविक चलती हुई सोलर सिस्टम

व्यक्तिगत पोर्टफोलियो

HTML

CSS

JS

अनुशंसित

मौसम वेबसाइट

सभी ग्रहों के साथ एक वास्तविक चलती हुई सोलर सिस्टम

व्यक्तिगत पोर्टफोलियो

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS