webshit

Public

.TXT

Guest Apr 24, 2026 23 .TXT

Save 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>
    <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>

</header>    <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>    <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>    <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>    <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>    <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>
    <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>

webshit

Scan to View