HTML CSS डेवलपर पोर्टफोलियो वेबसाइट टेम्पलेट

अनुशंसित

19 October 2024

आकृतियों और पाठ के साथ CSS एनिमेटेड पृष्ठभूमि

10 February 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="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
</head>
<body>

<header>
    <div class="logo">My Portfolio</div>
    <nav>
      <a href="#about">About</a>
      <a href="#skills">Skills</a>
      <a href="#projects">Projects</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

<section class="hero">
    <div>
      <h1>Hello, I'm a Developer</h1>
      <p>Specialized in creating beautiful, functional web applications</p>
    </div>
  </section>

<section id="about" class="about">
    <h2>About Me</h2>
    <p>I'm a passionate developer with experience in building dynamic and responsive websites. I love learning new technologies and constantly improving my skills.</p>
  </section>

<section id="skills" class="skills">
    <h2>Skills</h2>
    <div class="skills-list">
      <div class="skill-card">
        <h3>HTML</h3>
      </div>
      <div class="skill-card">
        <h3>CSS</h3>
      </div>
      <div class="skill-card">
        <h3>JavaScript</h3>
      </div>
      <div class="skill-card">
        <h3>React</h3>
      </div>
      <div class="skill-card">
        <h3>Node.js</h3>
      </div>
    </div>
  </section>

<section id="projects" class="projects">
    <h2>Projects</h2>
    <div class="projects-grid">
      <div class="project-card">
        <img src="https://source.unsplash.com/300x200/?website" alt="Project">
        <h3>Project 1</h3>
      </div>
      <div class="project-card">
        <img src="https://source.unsplash.com/300x200/?app" alt="Project">
        <h3>Project 2</h3>
      </div>
      <div class="project-card">
        <img src="https://source.unsplash.com/300x200/?design" alt="Project">
        <h3>Project 3</h3>
      </div>
    </div>
  </section>

<section id="contact" class="contact">
    <h2>Contact Me</h2>
    <form>
      <input type="text" placeholder="Your Name">
      <input type="email" placeholder="Your Email">
      <input rows="4" placeholder="Your Message" />
      <button type="submit">Send Message</button>
    </form>
  </section>

<footer>
    © 2024 My Portfolio. All Rights Reserved.
  </footer>

</body>
</html>

CSS

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

body {
      font-family: 'Poppins', sans-serif;
      color: #333;
      background-color: #f4f6f9;
      scroll-behavior: smooth;
    }

/* Navbar */
    header {
      position: fixed;
      width: 100%;
      padding: 20px 40px;
      background-color: #fff;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      z-index: 100;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

header .logo {
      font-size: 24px;
      font-weight: 600;
      color: #222;
    }

header nav a {
      margin: 0 15px;
      text-decoration: none;
      color: #333;
      font-weight: 500;
      transition: color 0.3s ease;
    }

header nav a:hover {
      color: #007BFF;
    }

/* Hero Section */
    .hero {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-image: url('https://source.unsplash.com/featured/?code,developer');
      background-size: cover;
      color: #fff;
      text-align: center;
      padding: 0 20px;
      position: relative;
    }

.hero::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: -1;
    }

.hero h1 {
      font-size: 3em;
      font-weight: 600;
    }

.hero p {
      font-size: 1.2em;
      margin-top: 10px;
    }

/* About Section */
    .about {
      padding: 100px 40px;
      background-color: #fff;
      text-align: center;
    }

.about h2 {
      font-size: 2.5em;
      font-weight: 600;
      color: #007BFF;
    }

.about p {
      font-size: 1.1em;
      margin-top: 20px;
      color: #555;
      line-height: 1.6;
      max-width: 800px;
      margin: 20px auto;
    }

/* Skills Section */
    .skills {
      padding: 100px 40px;
      background-color: #f9fafc;
    }

.skills h2 {
      font-size: 2.5em;
      text-align: center;
      color: #007BFF;
      font-weight: 600;
    }

.skills .skills-list {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      max-width: 1200px;
      margin: 50px auto;
      gap: 20px;
    }

.skills .skill-card {
      background-color: #fff;
      box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
      padding: 20px;
      border-radius: 10px;
      width: 200px;
      text-align: center;
    }

.skills .skill-card h3 {
      color: #333;
      margin: 10px 0;
      font-size: 1.3em;
    }

/* Projects Section */
    .projects {
      padding: 100px 40px;
      background-color: #fff;
    }

.projects h2 {
      font-size: 2.5em;
      text-align: center;
      color: #007BFF;
      font-weight: 600;
    }

.projects-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      max-width: 1200px;
      margin: 50px auto;
      justify-content: center;
    }

.project-card {
      background-color: #f4f6f9;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      width: 300px;
      border-radius: 10px;
      overflow: hidden;
      text-align: center;
      transition: transform 0.3s ease;
    }

.project-card img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }

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

.project-card h3 {
      font-size: 1.5em;
      color: #333;
      padding: 20px;
    }

/* Contact Section */
    .contact {
      padding: 100px 40px;
      background-color: #f9fafc;
      text-align: center;
    }

.contact h2 {
      font-size: 2.5em;
      color: #007BFF;
      font-weight: 600;
    }

.contact form {
      max-width: 600px;
      margin: 50px auto;
    }

.contact input, .contact textarea {
      width: 100%;
      padding: 15px;
      margin: 10px 0;
      border: 1px solid #ddd;
      border-radius: 5px;
      font-size: 1em;
    }

.contact button {
      padding: 15px 30px;
      border: none;
      border-radius: 5px;
      background-color: #007BFF;
      color: #fff;
      font-size: 1em;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

.contact button:hover {
      background-color: #0056b3;
    }

/* Footer */
    footer {
      padding: 20px;
      text-align: center;
      background-color: #222;
      color: #fff;
      font-size: 0.9em;
    }

HTML CSS डेवलपर पोर्टफोलियो वेबसाइट टेम्पलेट

अनुशंसित

एनिमेटेड HTML लॉगिन फ़ॉर्म

आकृतियों और पाठ के साथ CSS एनिमेटेड पृष्ठभूमि

HTML CSS लॉगिन फॉर्म कोड

HTML

CSS

JS

अनुशंसित

एनिमेटेड HTML लॉगिन फ़ॉर्म

आकृतियों और पाठ के साथ CSS एनिमेटेड पृष्ठभूमि

HTML CSS लॉगिन फॉर्म कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS