<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ahmad Khan | Portfolio</title>
<!-- ICONS -->
<link rel="stylesheet" href="[Link]
awesome/6.5.0/css/[Link]">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background: #0b0b0b;
color: white;
}
/* NAVBAR */
nav {
display: flex;
justify-content: space-between;
padding: 20px 50px;
align-items: center;
}
nav .logo {
font-size: 28px;
font-weight: bold;
color: #ffffff;
}
nav ul {
list-style: none;
display: flex;
gap: 20px;
}
nav ul li a {
color: #cfcfcf;
text-decoration: none;
font-size: 16px;
}
nav ul li a:hover {
color: white;
}
/* HERO SECTION */
header {
height: 100vh;
background: linear-gradient(140deg, #000000, #1b1b1b);
display: flex;
flex-direction: column;
}
.hero {
margin: auto;
text-align: center;
}
.hero h1 {
font-size: 48px;
}
.hero h1 span {
color: #4db8ff;
}
.hero p {
font-size: 20px;
margin-top: 10px;
color: #bbbbbb;
}
.btn {
margin-top: 20px;
padding: 12px 30px;
background: #4db8ff;
color: #000;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
}
.btn:hover {
background: #70c8ff;
}
/* GENERAL SECTION STYLE */
.section {
padding: 80px 60px;
text-align: center;
}
.title {
font-size: 36px;
margin-bottom: 30px;
color: #4db8ff;
}
/* SKILLS */
.skills-container {
display: flex;
justify-content: center;
gap: 25px;
flex-wrap: wrap;
}
.skill-box {
background: #1a1a1a;
padding: 20px 30px;
border-radius: 8px;
font-size: 20px;
border: 1px solid #333;
}
.skill-box i {
margin-right: 10px;
color: #4db8ff;
}
/* PROJECTS */
.projects-container {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
}
.project-card {
background: #1a1a1a;
padding: 30px;
width: 280px;
border-radius: 10px;
border: 1px solid #333;
text-align: center;
}
.project-card .icon {
font-size: 40px;
margin-bottom: 10px;
color: #4db8ff;
}
/* FOOTER */
footer {
text-align: center;
padding: 20px;
background: #111;
margin-top: 40px;
color: #aaa;
}
</style>
</head>
<body>
<!-- HEADER SECTION -->
<header>
<nav>
<h2 class="logo">Ahmad Khan</h2>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<div class="hero">
<h1>Hello, I'm <span>Ahmad Khan</span></h1>
<p>A Passionate Web Developer & Designer</p>
<a href="#projects" class="btn">View Projects</a>
</div>
</header>
<!-- ABOUT -->
<section id="about" class="section">
<h2 class="title">About Me</h2>
<p>
I am Ahmad Khan, a web developer skilled in creating modern,
responsive, and
professional websites. I focus on clean UI/UX, fast performance, and
elegant
dark-themed designs.
</p>
</section>
<!-- SKILLS -->
<section id="skills" class="section">
<h2 class="title">Skills</h2>
<div class="skills-container">
<div class="skill-box"><i class="fa-brands fa-html5"></i> HTML</div>
<div class="skill-box"><i class="fa-brands fa-css3-alt"></i> CSS</div>
<div class="skill-box"><i class="fa-brands fa-js"></i> JavaScript</div>
<div class="skill-box"><i class="fa-brands fa-react"></i> React</div>
<div class="skill-box"><i class="fa-solid fa-code"></i> Web
Design</div>
</div>
</section>
<!-- PROJECTS -->
<section id="projects" class="section">
<h2 class="title">Projects</h2>
<div class="projects-container">
<div class="project-card">
<i class="fa-solid fa-laptop-code icon"></i>
<h3>Project One</h3>
<p>A responsive website built with modern UI/UX.</p>
</div>
<div class="project-card">
<i class="fa-solid fa-mobile-screen icon"></i>
<h3>Project Two</h3>
<p>Mobile-friendly web application with animations.</p>
</div>
<div class="project-card">
<i class="fa-solid fa-database icon"></i>
<h3>Project Three</h3>
<p>Backend-integrated dashboard with clean design.</p>
</div>
</div>
</section>
<!-- CONTACT -->
<section id="contact" class="section">
<h2 class="title">Contact</h2>
<p>Email: <a href="[Link]
<p>
<i class="fa-brands fa-github"></i> [Link]/ahmadkhan<br>
<i class="fa-brands fa-linkedin"></i> [Link]/in/ahmadkhan
</p>
</section>
<footer>
<p>© 2025 Ahmad Khan. All rights reserved.</p>
</footer>
</body>
</html>
