Portfolio Web Html Part

 

Responsive Portfolio Website - HTML Code

All Sections with Copy Buttons

1️⃣ Header Section (Hero Area)

Yeh section website ke top par aata hai jahan name aur tagline hoti hai.

<header class="hero">
  <div class="container">
    <h1>Hi, I'm <span>Naeem Nawwaz</span></h1>
    <p>A Creative Graphic Designer & Web Developer</p>
    <a href="#contact" class="btn">Hire Me</a>
  </div>
</header>
  

2️⃣ Navigation Bar

Yeh top navigation menu hai jahan se users website ke sections me ja sakte hain.

<nav class="navbar">
  <div class="container">
    <h2 class="logo">Naeem</h2>
    <ul class="nav-links">
      <li><a href="#about">About</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#projects">Projects</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </div>
</nav>
  

3️⃣ About Section

Is section me tumhara intro aur skills likhe jate hain.

<section id="about" class="about">
  <div class="container">
    <h2>About Me</h2>
    <p>I'm Naeem Nawwaz, a passionate designer and web developer who creates modern digital experiences.</p>
    <ul>
      <li>Graphic Design</li>
      <li>Web Development</li>
      <li>AI Art Creation</li>
    </ul>
  </div>
</section>
  

4️⃣ Services Section

Yahan tum apni offered services list karte ho.

<section id="services" class="services">
  <div class="container">
    <h2>My Services</h2>
    <div class="service-boxes">
      <div class="box">
        <h3>Graphic Design</h3>
        <p>Logos, Posters, Thumbnails, and Branding</p>
      </div>
      <div class="box">
        <h3>Web Development</h3>
        <p>Responsive and modern websites</p>
      </div>
      <div class="box">
        <h3>AI Content</h3>
        <p>AI Art, Songs, and Text-to-Video projects</p>
      </div>
    </div>
  </div>
</section>
  

5️⃣ Projects Section

Apne kaam ke sample projects yahan show karo.

<section id="projects" class="projects">
  <div class="container">
    <h2>My Projects</h2>
    <div class="project-grid">
      <div class="project-card">
        <img src="project1.jpg" alt="Project 1">
        <h3>Portfolio Website</h3>
      </div>
      <div class="project-card">
        <img src="project2.jpg" alt="Project 2">
        <h3>Logo Design</h3>
      </div>
    </div>
  </div>
</section>
  

6️⃣ Contact Section

Yeh section contact form ke liye hai jahan visitor tumhe message bhej sakta hai.

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

7️⃣ Footer Section

Website ka last section jahan copyright likha hota hai.

<footer>
  <div class="container">
    <p>© 2025 Naeem Nawwaz. All Rights Reserved.</p>
  </div>
</footer>