webshit
Public
.TXT
Guest
Apr 24, 2026
23
.TXT
Copy
Save
Share
QR
New
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Modern UI Website</title> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet"> <link href="https://unpkg.com/aos@2.3.4/dist/aos.css" rel="stylesheet"> <style> * { margin:0; padding:0; box-sizing:border-box; font-family:'Poppins',sans-serif; } body { background:#0f172a; color:#e2e8f0; } header { display:flex; justify-content:space-between; align-items:center; padding:20px 40px; position:sticky; top:0; background:rgba(15,23,42,0.8); backdrop-filter:blur(10px); z-index:1000; } nav { display:flex; align-items:center; } nav a { color:#e2e8f0; margin-left:20px; text-decoration:none; transition:0.3s; } nav a:hover { color:#38bdf8; } /* Hamburger */ .hamburger { display:none; flex-direction:column; cursor:pointer; } .hamburger span { height:3px; width:25px; background:white; margin:4px 0; border-radius:2px; transition:0.3s; } /* Mobile Menu */ .nav-links { display:flex; } @media(max-width:768px){ .hamburger { display:flex; } .nav-links { position:absolute; top:70px; right:0; background:#020617; flex-direction:column; width:200px; transform:translateX(100%); transition:0.3s; padding:20px; } .nav-links a { margin:15px 0; } .nav-links.active { transform:translateX(0); } } .hero { height:90vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; background:linear-gradient(135deg,#1e293b,#0f172a); } .hero h1 { font-size:3rem; margin-bottom:10px; } .hero p { color:#94a3b8; } .btn { margin-top:20px; padding:12px 25px; border:none; background:#38bdf8; color:#0f172a; border-radius:30px; cursor:pointer; transition:0.3s; } .btn:hover { transform:scale(1.05); } section { padding:80px 40px; } h2 { text-align:center; margin-bottom:40px; } .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:25px; } .card { background:#1e293b; padding:25px; border-radius:15px; transition:0.3s; } .card:hover { transform:translateY(-10px); box-shadow:0 10px 30px rgba(0,0,0,0.3); } form { max-width:500px; margin:auto; } input, textarea { width:100%; padding:12px; margin-bottom:15px; border:none; border-radius:8px; } footer { text-align:center; padding:20px; background:#020617; } </style></head> <body> <!-- HEADER --> <header> <h2>MySite</h2><nav> <div class="nav-links" id="navLinks"> <a href="#">Home</a> <a href="#about">About</a> <a href="#features">Features</a> <a href="#contact">Contact</a> </div> <div class="hamburger" id="hamburger"> <span></span> <span></span> <span></span> </div> </nav> </header> <!-- HERO --> <section class="hero"> <h1 data-aos="fade-up">Build Something Modern</h1> <p data-aos="fade-up" data-aos-delay="200">Clean UI. Smooth animations. Fully responsive.</p> <button class="btn" data-aos="zoom-in" data-aos-delay="400">Get Started</button> </section> <!-- ABOUT --> <section id="about"> <h2 data-aos="fade-up">About</h2> <p style="text-align:center; max-width:700px; margin:auto;" data-aos="fade-up"> This is a modern responsive website with smooth animations and clean design. </p> </section> <!-- FEATURES --> <section id="features"> <h2 data-aos="fade-up">Features</h2> <div class="grid"> <div class="card" data-aos="fade-up">⚡ Fast Performance</div> <div class="card" data-aos="fade-up" data-aos-delay="100">📱 Fully Responsive</div> <div class="card" data-aos="fade-up" data-aos-delay="200">🎨 Modern Design</div> </div> </section> <!-- TESTIMONIAL --> <section> <h2 data-aos="fade-up">Testimonials</h2> <p style="text-align:center;" data-aos="fade-up">“This looks like a real product website!”</p> </section> <!-- CONTACT --> <section id="contact"> <h2 data-aos="fade-up">Contact</h2> <form data-aos="fade-up"> <input type="text" placeholder="Your Name" required> <input type="email" placeholder="Your Email" required> <textarea placeholder="Your Message"></textarea> <button class="btn" type="submit">Send Message</button> </form> </section> <!-- FOOTER --> <footer> <p>© 2026 MySite. All rights reserved.</p> </footer> <script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script> <script> AOS.init({ duration: 1000, once: true }); const hamburger = document.getElementById('hamburger'); const navLinks = document.getElementById('navLinks'); hamburger.addEventListener('click', () => { navLinks.classList.toggle('active'); }); </script></body> </html>
Scan to View
Use your phone's camera or a QR scanner app to open this paste instantly.