Code Snippet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Abdul Qudoos Official</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:"Poppins",sans-serif}
body{background:#fff;color:#041E42;line-height:1.6}
section{padding:80px 20px}
h2{font-size:clamp(28px,5vw,40px);margin-bottom:20px;font-weight:700;color:#041E42;text-shadow:0 3px 12px rgba(0,0,0,0.1)}
p{color:#333}
.container{max-width:1100px;margin:auto;display:grid;gap:40px;align-items:center}
/* Global two-tone background */
.section-blue{background:linear-gradient(to right,#E6F1FF 50%,#FFFFFF 50%)}
.section-white{background:linear-gradient(to right,#FFFFFF 50%,#D9EBFF 50%)}
/* HERO */
#aq-hero{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:90vh;background:linear-gradient(to right,#FFFFFF 50%,#B3D4FF 50%)}
.aq-title{font-size:clamp(30px,6vw,50px);text-shadow:0 4px 18px rgba(3,12,30,0.35);color:#041E42}
.aq-subtitle{font-size:18px;margin:15px 0;color:#222}
.aq-btn{display:inline-block;margin-top:20px;padding:12px 28px;background:#0056D2;color:#fff;border:none;border-radius:10px;cursor:pointer;font-weight:600;text-decoration:none;transition:0.3s}
.aq-btn:hover{background:#063fa5}
/* ABOUT */
.about-info{display:flex;flex-wrap:wrap;gap:30px;align-items:center}
.about-info img{width:180px;height:180px;border-radius:50%;object-fit:cover;box-shadow:0 5px 25px rgba(0,0,0,0.15)}
.about-text{flex:1;min-width:260px}
.about-stats{display:flex;gap:20px;margin-top:20px}
.stat{background:#fff;border-radius:12px;padding:14px 20px;box-shadow:0 5px 15px rgba(0,0,0,0.1);text-align:center}
.stat h3{color:#0056D2;margin-bottom:6px}
/* TOOLS */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:25px;margin-top:20px}
.tool-card{background:rgba(255,255,255,0.8);backdrop-filter:blur(10px);border-radius:16px;padding:20px;text-align:center;box-shadow:0 8px 20px rgba(0,0,0,0.08);transition:0.3s}
.tool-card:hover{transform:translateY(-5px)}
.tool-tag{display:inline-block;background:#0056D2;color:#fff;padding:3px 10px;border-radius:6px;font-size:12px;margin-bottom:10px}
/* PORTFOLIO */
.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:25px}
.portfolio-item{background:#fff;border-radius:14px;box-shadow:0 8px 20px rgba(0,0,0,0.1);overflow:hidden}
.portfolio-item img{width:100%;height:180px;object-fit:cover}
.portfolio-item div{padding:15px}
.portfolio-item h4{color:#0056D2;margin-bottom:8px}
/* BLOG */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:25px}
.blog-post{background:#fff;border-radius:14px;box-shadow:0 6px 16px rgba(0,0,0,0.08);overflow:hidden;transition:0.3s}
.blog-post:hover{transform:translateY(-6px)}
.blog-post img{width:100%;height:160px;object-fit:cover}
.blog-post div{padding:15px}
.blog-post h4{margin-bottom:6px;color:#0056D2}
/* TESTIMONIALS */
.testimonials{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:25px;text-align:center}
.testimonial{background:rgba(255,255,255,0.85);border-radius:14px;padding:20px;box-shadow:0 8px 20px rgba(0,0,0,0.1)}
.testimonial p{font-style:italic}
.testimonial h4{margin-top:10px;color:#0056D2}
/* NEWSLETTER */
.newsletter-form{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px}
.newsletter-form input{padding:12px 15px;border-radius:8px;border:1px solid #ccc;flex:1;min-width:240px}
.newsletter-form button{background:#0056D2;color:#fff;border:none;padding:12px 20px;border-radius:8px;cursor:pointer}
.newsletter-form button:hover{background:#063fa5}
/* CONTACT */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:40px;align-items:center}
.contact-form{background:white;padding:30px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,0.1)}
.contact-form input,.contact-form textarea{width:100%;padding:12px;margin:8px 0;border:1px solid #ccc;border-radius:8px}
.contact-form button{background:#0056D2;color:white;border:none;padding:12px 20px;border-radius:8px;cursor:pointer;font-size:16px;width:100%}
.contact-form button:hover{background:#063fa5}
.social-links a{text-decoration:none;font-size:22px;color:#0056D2;margin-right:10px}
#aq-msg-status{margin-top:10px;font-size:14px}
</style>
</head>
<body>
<!-- HERO -->
<section id="aq-hero">
<h1 class="aq-title">👋 I'm Abdul Qudoos</h1>
<p class="aq-subtitle">Technology Student • Creator of Advanced Blogger Tools</p>
<a href="#about" class="aq-btn">Explore My Work</a>
</section>
<!-- ABOUT -->
<section id="about" class="section-blue">
<div class="container about-info">
<img src="https://i.ibb.co/sjRrxPp/profile.jpg" alt="Abdul Qudoos">
<div class="about-text">
<h2>About Abdul Qudoos</h2>
<p>I'm a tech enthusiast and tool developer passionate about automating Blogger-based workflows. I’ve built 50+ tools, helped 200+ creators, and continue exploring innovative web solutions.</p>
<div class="about-stats">
<div class="stat"><h3>50+</h3><p>Tools Built</p></div>
<div class="stat"><h3>200+</h3><p>Happy Clients</p></div>
<div class="stat"><h3>3+</h3><p>Years Experience</p></div>
</div>
<a href="#contact" class="aq-btn">Hire Me</a>
</div>
</div>
</section>
<!-- TOOLS / PROJECTS -->
<section id="tools" class="section-white">
<div class="container">
<h2>🧰 My Tools & Projects</h2>
<div class="tools-grid">
<div class="tool-card"><div class="tool-tag">Blogger-Ready</div><h3>SEO Meta Tag Generator</h3><p>Auto-generate meta tags for perfect SEO setup.</p></div>
<div class="tool-card"><div class="tool-tag">Pro</div><h3>Website Builder Tool</h3><p>Generate full responsive site code instantly.</p></div>
<div class="tool-card"><div class="tool-tag">Utility</div><h3>Invoice Creator</h3><p>Professional invoice builder with export options.</p></div>
<div class="tool-card"><div class="tool-tag">Education</div><h3>Play Group Study Tool</h3><p>Interactive early learning system for kids.</p></div>
</div>
</div>
</section>
<!-- PORTFOLIO -->
<section id="portfolio" class="section-blue">
<div class="container">
<h2>📂 Portfolio / Case Studies</h2>
<div class="portfolio-grid">
<div class="portfolio-item">
<img src="https://i.ibb.co/qnTDFZs/tool1.jpg" alt="">
<div><h4>AQ Resume Builder</h4><p>Challenge: Simplify resume creation. Solution: Live preview + one-click copy HTML.</p></div>
</div>
<div class="portfolio-item">
<img src="https://i.ibb.co/jDLF4x7/tool2.jpg" alt="">
<div><h4>AQ Trading Simulator</h4><p>Simulated trading UI for learning & testing strategies.</p></div>
</div>
<div class="portfolio-item">
<img src="https://i.ibb.co/dKYZH1k/tool3.jpg" alt="">
<div><h4>AQ Text to Speech</h4><p>Converts written text to audio with multiple voice styles.</p></div>
</div>
</div>
</div>
</section>
<!-- BLOG -->
<section id="blog" class="section-white">
<div class="container">
<h2>📝 Blog / Tutorials</h2>
<div class="blog-grid" id="blog-feed">
<div class="blog-post">
<img src="https://i.ibb.co/Lg4F3Rq/blog1.jpg" alt="">
<div><h4>How to Add Tools in Blogger</h4><p>Step-by-step guide to embed tools in Blogger.</p></div>
</div>
<div class="blog-post">
<img src="https://i.ibb.co/q7DNxwJ/blog2.jpg" alt="">
<div><h4>SEO Optimization for Tools</h4><p>Best practices for Blogger SEO & Discover visibility.</p></div>
</div>
<div class="blog-post">
<img src="https://i.ibb.co/q7b7wD4/blog3.jpg" alt="">
<div><h4>Integrate Google Sheets</h4><p>Connect your Blogger tool with Google Sheets API.</p></div>
</div>
</div>
</div>
</section>
<!-- TESTIMONIALS -->
<section id="testimonials" class="section-blue">
<div class="container">
<h2>💬 Testimonials</h2>
<div class="testimonials">
<div class="testimonial"><p>“Abdul’s Blogger tools saved me weeks of coding!”</p><h4>— Sarah M.</h4></div>
<div class="testimonial"><p>“Super clean, professional templates. Highly recommended!”</p><h4>— Imran A.</h4></div>
<div class="testimonial"><p>“Fast, reliable, and innovative. Loved working with him.”</p><h4>— Raza K.</h4></div>
</div>
</div>
</section>
<!-- NEWSLETTER -->
<section id="newsletter" class="section-white">
<div class="container" style="text-align:center;">
<h2>📬 Stay Updated</h2>
<p>Get the latest tools, templates, and updates from Abdul Qudoos Official.</p>
<form class="newsletter-form">
<input type="email" placeholder="Enter your email" required>
<button type="submit">Subscribe</button>
</form>
</div>
</section>
<!-- CONTACT -->
<section id="contact" class="section-blue">
<div class="container contact-grid">
<div>
<h2>💼 Contact / Hire Me</h2>
<p>Let’s create something great! Contact me for tool development, Blogger templates, or collaborations.</p>
<p><strong>📧</strong> <a href="mailto:abdulqudoosofficial@gmail.com">abdulqudoosofficial@gmail.com</a></p>
<p><strong>🕓</strong> Mon–Sat, 10 AM – 8 PM</p>
<p><strong>💰</strong> Starting From: $25 / Project</p>
<div class="social-links" style="margin-top:20px;">
<a href="https://facebook.com/">🌐</a>
<a href="https://instagram.com/">📸</a>
<a href="https://linkedin.com/">💼</a>
<a href="https://wa.me/923000000000">💬</a>
</div>
</div>
<form id="aq-contact-form" class="contact-form">
<h3>Send a Message</h3>
<input type="text" name="name" placeholder="Your Name" required>
<input type="email" name="email" placeholder="Your Email" required>
<textarea name="message" rows="5" placeholder="Your Message" required></textarea>
<button type="submit">Send Message</button>
<p id="aq-msg-status"></p>
</form>
</div>
</section>
<script>
document.getElementById("aq-contact-form").addEventListener("submit",function(e){
e.preventDefault();
document.getElementById("aq-msg-status").innerText="⏳ Sending...";
setTimeout(()=>{
document.getElementById("aq-msg-status").innerText="✅ Message sent successfully!";
e.target.reset();
},1500);
});
</script>
</body>
</html>
