Code Snippet
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Neon Glass Portfolio</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
color: #fff;
overflow-x: hidden;
}
header {
backdrop-filter: blur(10px);
background: rgba(255,255,255,0.1);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
padding: 20px 40px;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 1000;
}
header h1 {
color: #0ff;
font-weight: 700;
}
nav {
display: flex;
gap: 20px;
}
nav a {
color: #fff;
text-decoration: none;
transition: 0.3s;
}
nav a:hover {
color: #0ff;
}
.toggle {
display: none;
font-size: 24px;
cursor: pointer;
}
.section {
padding: 80px 40px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.section h2 {
font-size: 36px;
margin-bottom: 20px;
color: #0ff;
}
.section p {
max-width: 600px;
}
.card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px);
padding: 30px;
border-radius: 20px;
box-shadow: 0 0 20px #0ff;
margin: 20px;
transition: transform 0.3s;
}
.card:hover {
transform: scale(1.05);
}
.card img {
width: 100%;
border-radius: 15px;
}
footer {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 40px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
}
footer h4 {
color: #0ff;
margin-bottom: 10px;
}
footer ul {
list-style: none;
}
footer ul li {
margin-bottom: 5px;
}
footer ul li a {
color: #fff;
text-decoration: none;
}
.social-icons a {
margin-right: 10px;
color: #0ff;
font-size: 20px;
}
@media(max-width: 768px) {
nav {
display: none;
flex-direction: column;
background: rgba(255, 255, 255, 0.1);
padding: 20px;
position: absolute;
top: 70px;
right: 0;
z-index: 999;
}
nav.show {
display: flex;
}
.toggle {
display: block;
}
}
</style>
</head>
<body>
<header>
<h1>MyPortfolio</h1>
<div class="toggle" onclick="toggleMenu()">☰</div>
<nav id="menu">
<a href="#about">About</a>
<a href="#projects">Projects</a>
<a href="#skills">Skills</a>
<a href="#contact">Contact</a>
</nav>
</header> <section class="section" id="about">
<h2>About Me</h2>
<div class="card">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTi4Pi4s3f7u6LejI0wSbkrpPvZVTMe9Ob1R8j-KfF1vM2a7utdtwIl0NN2&s=10" alt="Developer">
<p>I am a passionate web developer with a flair for design and creativity, specializing in front-end technologies and UI/UX.</p>
</div>
</section> <section class="section" id="projects">
<h2>My Projects</h2>
<div class="card">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRB9YNL3LeaowSya-H7RvpTHv_vTTD7y1IAW-TtVfHWVWtwfhmvCUrWDEY&s=10" alt="Projects">
<p>Explore a collection of my most impactful and beautiful websites and applications.</p>
</div>
</section> <section class="section" id="skills">
<h2>Skills</h2>
<div class="card">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTFvYfCwja41MjYnqNP1c-RKhVv-8k3KYx3fQv4aQTlKHobsOpOdOLj4TkU&s=10" alt="Skills">
<p>Proficient in HTML, CSS, JavaScript, React, and modern UI/UX design principles with a touch of aesthetics.</p>
</div>
</section> <section class="section" id="contact">
<h2>Contact Me</h2>
<div class="card">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQatjIxbKK4o_vkdXp1rGuuLMJQR_tQaJCKLvvPo8-LEfvVIfx6dExg6Q0&s=10" alt="Contact">
<p>Reach out for collaborations or just a friendly hello! I am always open to connecting.</p>
</div>
</section> <footer>
<div>
<h4>About</h4>
<ul>
<li><a href="#about">Who I Am</a></li>
<li><a href="#skills">What I Do</a></li>
</ul>
</div>
<div>
<h4>Projects</h4>
<ul>
<li><a href="#projects">Portfolio</a></li>
<li><a href="#">Live Demos</a></li>
</ul>
</div>
<div>
<h4>Follow Me</h4>
<div class="social-icons">
<a href="#">Facebook</a>
<a href="#">Twitter</a>
<a href="#">LinkedIn</a>
</div>
</div>
</footer>
<footer style="
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border-top: 1px solid rgba(255,255,255,0.1);
padding: 2rem;
text-align: center;
color: #00ffe1;
font-family: 'Courier New', monospace;
box-shadow: 0 -5px 15px rgba(0, 255, 255, 0.1);">
<div style="margin-bottom: 1rem;">
<a href="#" style="margin: 0 10px;" title="Twitter">
<svg width="24" height="24" fill="#00ffe1" viewBox="0 0 24 24"><path d="M23 3a10.9 10.9 0 01-3.14 1.53A4.48 4.48 0 0022.4.36a9.18 9.18 0 01-2.88 1.1A4.52 4.52 0 0016.11 0c-2.62 0-4.75 2.13-4.75 4.75 0 .37.04.73.12 1.07C7.69 5.65 4.06 3.76 1.64 0.73a4.65 4.65 0 00-.64 2.39c0 1.65.84 3.1 2.12 3.95A4.48 4.48 0 01.96 6.3v.05c0 2.3 1.64 4.22 3.8 4.66a4.5 4.5 0 01-2.13.08c.6 1.88 2.36 3.25 4.45 3.29A9.05 9.05 0 010 20.54a12.78 12.78 0 006.92 2.03c8.3 0 12.85-6.88 12.85-12.85l-.01-.59A9.22 9.22 0 0023 3z"/></svg>
</a>
<a href="#" style="margin: 0 10px;" title="LinkedIn">
<svg width="24" height="24" fill="#00ffe1" viewBox="0 0 24 24"><path d="M4.98 3.5C3.34 3.5 2 4.84 2 6.48c0 1.64 1.34 2.98 2.98 2.98s2.98-1.34 2.98-2.98S6.62 3.5 4.98 3.5zm.02 4.96H5v10h-2v-10h2zm7-1h-2v11h2v-5.5c0-1.45.85-2.13 1.98-2.13 1.05 0 1.52.75 1.52 1.84V18h2v-5.54c0-2.66-1.42-3.9-3.32-3.9-1.52 0-2.15.84-2.52 1.43v-1.2z"/></svg>
</a>
</div>
<div>
<p style="margin: 0;">© 2025 Abdul Qudoos. All rights reserved.</p>
</div>
</footer>
<script>
function toggleMenu() {
document.getElementById('menu').classList.toggle('show');
}
</script></body>
</html>