Code Box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Professional Portfolio</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; }
body { font-family: 'Poppins', sans-serif; background: #f4f4f4; color: #333; }
header {
background: linear-gradient(145deg, #4e54c8, #8f94fb);
padding: 20px 50px;
color: white;
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
position: sticky;
top: 0;
z-index: 1000;
}
header h1 { font-size: 30px; font-weight: 600; }
nav ul {
display: flex;
gap: 20px;
list-style: none;
margin-top: 10px;
}
nav a {
color: white;
text-decoration: none;
font-weight: 500;
transition: 0.3s;
}
nav a:hover { text-decoration: underline; }
section {
padding: 80px 20px;
text-align: center;
background: white;
}
section:nth-child(even) {
background: #f9f9f9;
}
.section-content {
max-width: 1100px;
margin: auto;
display: flex;
flex-wrap: wrap;
gap: 40px;
justify-content: center;
align-items: center;
perspective: 1000px;
}
.card {
background: white;
border-radius: 15px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
padding: 20px;
width: 300px;
transition: transform 0.4s;
transform-style: preserve-3d;
}
.card:hover {
transform: rotateY(10deg) scale(1.05);
}
.card img {
width: 100%;
border-radius: 10px;
margin-bottom: 15px;
}
.card h3 { margin-bottom: 10px; color: #4e54c8; }
footer {
background: #222;
color: white;
display: flex;
flex-wrap: wrap;
padding: 40px 20px;
justify-content: space-around;
gap: 30px;
}
.footer-col {
flex: 1 1 200px;
}
.footer-col h4 {
margin-bottom: 15px;
color: #00f9ff;
}
.footer-col ul {
list-style: none;
}
.footer-col ul li {
margin: 10px 0;
font-size: 14px;
}
.social-icons a {
color: #00f9ff;
margin-right: 10px;
font-size: 20px;
transition: 0.3s;
}
.social-icons a:hover {
color: #ff00d4;
}
@media (max-width: 768px) {
.section-content {
flex-direction: column;
align-items: center;
}
nav ul {
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
}
</style>
</head>
<body>
<header>
<h1>Abdul Qudoos</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>About Me</h2>
<div class="section-content">
<div class="card">
<img src="https://via.placeholder.com/300x200" alt="About Me">
<h3>Creative Developer</h3>
<p>I create modern, clean, and responsive websites with stunning visuals and smooth interactions.</p>
</div>
</div>
</section>
<section id="projects">
<h2>My Projects</h2>
<div class="section-content">
<div class="card">
<img src="https://via.placeholder.com/300x200" alt="Project 1">
<h3>Portfolio Site</h3>
<p>A sleek personal portfolio to showcase my skills, projects, and contact details.</p>
</div>
<div class="card">
<img src="https://via.placeholder.com/300x200" alt="Project 2">
<h3>E-Commerce Store</h3>
<p>Beautiful and functional store with product pages, cart, and order system.</p>
</div>
<div class="card">
<img src="https://via.placeholder.com/300x200" alt="Project 3">
<h3>Blog Platform</h3>
<p>Interactive blog with admin panel, commenting, and clean post layout.</p>
</div>
</div>
</section>
<section id="contact">
<h2>Contact</h2>
<div class="section-content">
<div class="card">
<img src="https://via.placeholder.com/300x200" alt="Contact">
<h3>Get in Touch</h3>
<p>Send me a message on WhatsApp or email me your project details!</p>
</div>
</div>
</section>
<footer>
<div class="footer-col">
<h4>About</h4>
<ul>
<li>Professional Web Developer</li>
<li>UI/UX Designer</li>
<li>Based in Pakistan</li>
</ul>
</div>
<div class="footer-col">
<h4>Links</h4>
<ul>
<li><a href="#about" style="color: #fff;">About</a></li>
<li><a href="#projects" style="color: #fff;">Projects</a></li>
<li><a href="#contact" style="color: #fff;">Contact</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Follow Me</h4>
<div class="social-icons">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-whatsapp"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
<a href="#"><i class="fab fa-dribbble"></i></a>
</div>
</div>
</footer>
</body>
</html>
