HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
1920x1080
374 KB
Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:
Script

Open in browser
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>KAIJU BITES | Supreme Anime Culinary Realm</title>
  
  <!-- Premium Fonts & Icons -->
  <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Orbitron:wght@700;900&family=Plus+Jakarta+Sans:wght@300;400;600;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

  <style>
    /* ================= SYSTEM & THEME VARIABLES ================= */
    :root {
      --primary: #FF0055;
      --secondary: #00F0FF;
      --accent: #FFE600;
      --bg-dark: #05050A;
      --card-bg: rgba(15, 15, 26, 0.75);
      --comic-border: 3px solid #000;
      --neon-shadow-primary: 0 0 20px rgba(255, 0, 85, 0.6);
      --neon-shadow-secondary: 0 0 20px rgba(0, 240, 255, 0.6);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      background-color: var(--bg-dark);
      color: #FFFFFF;
      font-family: 'Plus Jakarta Sans', sans-serif;
      overflow-x: hidden;
      cursor: default;
    }

    /* Custom Animated Pointer (Desktop Only) */
    #custom-cursor {
      position: fixed;
      width: 24px;
      height: 24px;
      border: 2px solid var(--secondary);
      border-radius: 50%;
      pointer-events: none;
      transform: translate(-50%, -50%);
      transition: transform 0.08s ease-out, background-color 0.2s;
      z-index: 99999;
      box-shadow: 0 0 10px var(--secondary);
      display: none;
    }
    @media(min-width: 992px) {
      #custom-cursor { display: block; }
      body { cursor: none; }
      a, button, .card, .food-img-frame { cursor: none !important; }
    }

    /* Background Animation Canvases */
    #canvas-speedlines, #canvas-particles {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      pointer-events: none;
    }
    #canvas-speedlines { z-index: -2; opacity: 0.18; }
    #canvas-particles { z-index: -1; opacity: 0.5; }

    /* ================= NAVBAR & NAVIGATION ================= */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      padding: 15px 5%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 1000;
      background: rgba(5, 5, 10, 0.85);
      backdrop-filter: blur(15px);
      border-bottom: 2px solid rgba(0, 240, 255, 0.3);
    }

    .brand-logo {
      font-family: 'Bangers', cursive;
      font-size: 2.4rem;
      letter-spacing: 2px;
      color: var(--accent);
      text-shadow: 3px 3px 0px var(--primary), -2px -2px 0px #000;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .brand-logo i {
      color: var(--primary);
      animation: flamePulse 1.2s ease-in-out infinite alternate;
    }

    @keyframes flamePulse {
      0% { transform: scale(1) rotate(-5deg); filter: drop-shadow(0 0 5px var(--primary)); }
      100% { transform: scale(1.2) rotate(5deg); filter: drop-shadow(0 0 20px var(--accent)); }
    }

    .nav-links {
      display: flex;
      gap: 35px;
      list-style: none;
    }

    .nav-links a {
      color: #FFF;
      text-decoration: none;
      font-family: 'Orbitron', sans-serif;
      font-size: 0.95rem;
      font-weight: 700;
      letter-spacing: 1px;
      transition: all 0.3s;
      position: relative;
    }

    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -6px;
      left: 0;
      width: 0%;
      height: 3px;
      background: var(--primary);
      box-shadow: 0 0 8px var(--primary);
      transition: width 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .nav-links a:hover::after { width: 100%; }
    .nav-links a:hover { color: var(--secondary); text-shadow: 0 0 8px var(--secondary); }

    .nav-btn {
      background: linear-gradient(45deg, var(--primary), #FF00AA);
      color: #FFF;
      border: var(--comic-border);
      box-shadow: 4px 4px 0px var(--secondary);
      padding: 10px 24px;
      font-family: 'Bangers', cursive;
      font-size: 1.2rem;
      letter-spacing: 1px;
      transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .nav-btn:hover {
      transform: translate(-3px, -3px) scale(1.05);
      box-shadow: 7px 7px 0px var(--accent);
    }

    /* Mobile Hamburger Menu Toggle */
    .menu-toggle {
      display: none;
      font-size: 1.8rem;
      color: var(--secondary);
      background: none;
      border: none;
    }

    /* Mobile Side Drawer */
    .mobile-drawer {
      position: fixed;
      top: 0;
      right: -100%;
      width: 80%;
      max-width: 320px;
      height: 100vh;
      background: rgba(10, 10, 20, 0.98);
      backdrop-filter: blur(25px);
      z-index: 1001;
      box-shadow: -10px 0 30px rgba(0,0,0,0.8);
      border-left: 2px solid var(--primary);
      display: flex;
      flex-direction: column;
      padding: 40px 30px;
      transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .mobile-drawer.active { right: 0; }

    .close-drawer {
      align-self: flex-end;
      font-size: 2rem;
      color: var(--primary);
      background: none;
      border: none;
      margin-bottom: 40px;
    }

    .mobile-nav-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 25px;
    }

    .mobile-nav-links a {
      color: #FFF;
      font-family: 'Bangers', cursive;
      font-size: 1.8rem;
      letter-spacing: 2px;
      text-decoration: none;
      transition: 0.3s;
    }

    .mobile-nav-links a:hover { color: var(--accent); padding-left: 10px; }

    /* ================= HERO SECTION ================= */
    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 130px 8% 60px 8%;
      position: relative;
    }

    .hero-content {
      max-width: 600px;
      z-index: 2;
    }

    .power-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(0, 240, 255, 0.1);
      border: 1px solid var(--secondary);
      color: var(--secondary);
      font-family: 'Orbitron', sans-serif;
      font-size: 0.85rem;
      padding: 6px 16px;
      border-radius: 50px;
      margin-bottom: 20px;
      box-shadow: var(--neon-shadow-secondary);
      animation: pulseBorder 2s infinite alternate;
    }

    @keyframes pulseBorder {
      0% { box-shadow: 0 0 5px var(--secondary); }
      100% { box-shadow: 0 0 20px var(--secondary); }
    }

    .hero-title {
      font-family: 'Bangers', cursive;
      font-size: clamp(3.2rem, 6vw, 5.5rem);
      line-height: 0.95;
      margin-bottom: 25px;
      color: #FFF;
      text-shadow: 5px 5px 0px var(--primary), -2px -2px 0px #000;
      letter-spacing: 2px;
    }

    .hero-title span {
      color: var(--accent);
      display: inline-block;
      animation: glitchText 3s infinite;
    }

    @keyframes glitchText {
      0%, 100% { transform: translate(0); }
      20% { transform: translate(-3px, 3px); text-shadow: 3px -3px 0px var(--secondary); }
      40% { transform: translate(3px, -3px); text-shadow: -3px 3px 0px var(--primary); }
      60% { transform: translate(0); }
    }

    .hero-desc {
      font-size: 1.1rem;
      line-height: 1.7;
      color: #A0A0C0;
      margin-bottom: 35px;
      font-weight: 400;
    }

    .hero-buttons {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
    }

    .btn-hero-primary {
      padding: 16px 36px;
      background: var(--accent);
      color: #000;
      font-family: 'Bangers', cursive;
      font-size: 1.5rem;
      letter-spacing: 1px;
      border: var(--comic-border);
      box-shadow: 6px 6px 0px var(--primary);
      text-decoration: none;
      transition: all 0.2s ease;
      display: inline-block;
    }

    .btn-hero-primary:hover {
      transform: translate(-4px, -4px);
      box-shadow: 10px 10px 0px var(--secondary);
      background: #FFF;
    }

    .btn-hero-secondary {
      padding: 16px 36px;
      background: transparent;
      color: #FFF;
      font-family: 'Bangers', cursive;
      font-size: 1.5rem;
      letter-spacing: 1px;
      border: 3px solid var(--secondary);
      box-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
      text-decoration: none;
      transition: all 0.2s ease;
      display: inline-block;
    }

    .btn-hero-secondary:hover {
      background: var(--secondary);
      color: #000;
      box-shadow: 0 0 25px var(--secondary);
    }

    /* 3D Animated Hero Dish Display */
    .hero-visual {
      position: relative;
      width: 480px;
      height: 480px;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 2;
    }

    .energy-aura {
      position: absolute;
      width: 110%;
      height: 110%;
      border-radius: 50%;
      background: radial-gradient(circle, var(--primary) 0%, rgba(0, 240, 255, 0.4) 50%, transparent 70%);
      filter: blur(50px);
      animation: auraPulse 4s ease-in-out infinite alternate;
      z-index: 1;
    }

    @keyframes auraPulse {
      0% { transform: scale(0.85) rotate(0deg); opacity: 0.7; }
      100% { transform: scale(1.15) rotate(180deg); opacity: 1; }
    }

    .food-img-frame {
      position: relative;
      width: 380px;
      height: 380px;
      z-index: 2;
      animation: floatDish 5s ease-in-out infinite;
      perspective: 1000px;
    }

    @keyframes floatDish {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-25px) rotate(4deg); }
    }

    .food-img-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
      border: 6px solid #FFF;
      box-shadow: var(--comic-border), 0 0 40px rgba(255, 0, 85, 0.8);
      transition: transform 0.5s ease;
    }

    .badge-power {
      position: absolute;
      top: 15px;
      right: -10px;
      background: var(--primary);
      color: #FFF;
      font-family: 'Bangers', cursive;
      font-size: 1.3rem;
      padding: 8px 18px;
      border: var(--comic-border);
      box-shadow: 5px 5px 0px #000;
      transform: rotate(12deg);
      z-index: 3;
      animation: badgeBounce 2s infinite ease-in-out;
    }

    @keyframes badgeBounce {
      0%, 100% { transform: rotate(12deg) translateY(0); }
      50% { transform: rotate(8deg) translateY(-8px); }
    }

    /* ================= MENU SECTION ================= */
    .menu-section {
      padding: 100px 8%;
      position: relative;
      z-index: 2;
    }

    .section-header {
      text-align: center;
      margin-bottom: 60px;
    }

    .section-subtitle {
      font-family: 'Orbitron', sans-serif;
      color: var(--secondary);
      font-size: 1rem;
      letter-spacing: 3px;
      margin-bottom: 10px;
      text-transform: uppercase;
    }

    .section-title {
      font-family: 'Bangers', cursive;
      font-size: clamp(2.8rem, 5vw, 4.2rem);
      color: var(--accent);
      text-shadow: 4px 4px 0px #000, -2px -2px 0px var(--primary);
      letter-spacing: 2px;
    }

    .menu-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 40px;
    }

    .card {
      background: var(--card-bg);
      border: 2px solid rgba(255, 255, 255, 0.1);
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      position: relative;
      backdrop-filter: blur(10px);
    }

    .card:hover {
      transform: translateY(-12px) scale(1.02);
      border-color: var(--secondary);
      box-shadow: var(--neon-shadow-secondary), 0 20px 40px rgba(0,0,0,0.8);
    }

    .card-img-wrap {
      height: 240px;
      width: 100%;
      position: relative;
      overflow: hidden;
    }

    .card-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    .card:hover .card-img-wrap img {
      transform: scale(1.18) rotate(2deg);
    }

    .card-tag {
      position: absolute;
      top: 15px;
      left: 15px;
      background: var(--primary);
      color: #FFF;
      font-family: 'Bangers', cursive;
      font-size: 1rem;
      padding: 4px 14px;
      border: 2px solid #000;
      box-shadow: 3px 3px 0px #000;
      z-index: 2;
    }

    .card-body {
      padding: 25px;
    }

    .card-title {
      font-family: 'Bangers', cursive;
      font-size: 2rem;
      letter-spacing: 1px;
      color: #FFF;
      margin-bottom: 10px;
      transition: color 0.3s;
    }

    .card:hover .card-title { color: var(--accent); }

    .card-desc {
      font-size: 0.95rem;
      color: #A0A0B8;
      line-height: 1.6;
      margin-bottom: 25px;
      min-height: 48px;
    }

    .card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding-top: 15px;
    }

    .price-tag {
      font-family: 'Orbitron', sans-serif;
      font-size: 1.6rem;
      font-weight: 900;
      color: var(--secondary);
      text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
    }

    .btn-card-add {
      background: var(--accent);
      color: #000;
      font-family: 'Bangers', cursive;
      font-size: 1.3rem;
      padding: 8px 20px;
      border: var(--comic-border);
      box-shadow: 4px 4px 0px #000;
      transition: all 0.2s;
    }

    .btn-card-add:hover {
      background: #FFF;
      transform: translate(-2px, -2px);
      box-shadow: 6px 6px 0px var(--primary);
    }

    /* ================= SPECIAL BANNER ================= */
    .banner-section {
      padding: 40px 8% 100px 8%;
    }

    .banner-box {
      background: linear-gradient(135deg, rgba(255, 0, 85, 0.9), rgba(138, 43, 226, 0.9));
      border: var(--comic-border);
      box-shadow: 12px 12px 0px var(--accent);
      border-radius: 24px;
      padding: 60px 8%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
    }

    .banner-content {
      max-width: 550px;
      z-index: 2;
    }

    .banner-title {
      font-family: 'Bangers', cursive;
      font-size: clamp(2.5rem, 4vw, 3.8rem);
      line-height: 1;
      margin-bottom: 15px;
      color: #FFF;
      text-shadow: 4px 4px 0px #000;
    }

    .banner-desc {
      font-size: 1.1rem;
      color: #FFE600;
      margin-bottom: 25px;
      font-weight: 600;
    }

    /* SFX Floating Particle Popups */
    .sfx-popup {
      position: fixed;
      font-family: 'Bangers', cursive;
      font-size: 2.2rem;
      color: var(--accent);
      text-shadow: 3px 3px 0px #000, -2px -2px 0px var(--primary);
      pointer-events: none;
      z-index: 10000;
      animation: sfxFloat 0.8s ease-out forwards;
    }

    @keyframes sfxFloat {
      0% { opacity: 1; transform: scale(0.4) translate(-50%, -50%) rotate(-15deg); }
      50% { transform: scale(1.3) translate(-50%, -80px) rotate(10deg); }
      100% { opacity: 0; transform: scale(1) translate(-50%, -120px) rotate(0deg); }
    }

    /* ================= FOOTER ================= */
    footer {
      background: #020205;
      border-top: 3px solid var(--secondary);
      padding: 60px 8% 40px 8%;
      text-align: center;
      position: relative;
    }

    .social-links {
      display: flex;
      justify-content: center;
      gap: 25px;
      margin-bottom: 30px;
    }

    .social-btn {
      width: 55px;
      height: 55px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.05);
      border: 2px solid rgba(255, 255, 255, 0.2);
      color: #FFF;
      font-size: 1.4rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      text-decoration: none;
    }

    .social-btn:hover {
      background: var(--primary);
      border-color: #FFF;
      color: #FFF;
      transform: translateY(-8px) scale(1.1);
      box-shadow: var(--neon-shadow-primary);
    }

    .copyright {
      color: #606080;
      font-size: 0.9rem;
      font-family: 'Orbitron', sans-serif;
    }

    /* ================= RESPONSIVE BREAKPOINTS ================= */
    @media (max-width: 991px) {
      .nav-links, .nav-btn { display: none; }
      .menu-toggle { display: block; }
      
      .hero {
        flex-direction: column;
        text-align: center;
        padding-top: 140px;
      }
      .hero-content {
        max-width: 100%;
        margin-bottom: 50px;
      }
      .hero-buttons {
        justify-content: center;
      }
      .hero-visual {
        width: 340px;
        height: 340px;
      }
      .food-img-frame {
        width: 280px;
        height: 280px;
      }
      .banner-box {
        flex-direction: column;
        text-align: center;
        gap: 30px;
      }
    }

    @media (max-width: 480px) {
      nav { padding: 15px 4%; }
      .brand-logo { font-size: 1.8rem; }
      .hero-visual {
        width: 260px;
        height: 260px;
      }
      .food-img-frame {
        width: 210px;
        height: 210px;
      }
      .btn-hero-primary, .btn-hero-secondary {
        width: 100%;
        text-align: center;
      }
    }
  </style>
</head>
<body>

  <!-- Custom Cursor Glow -->
  <div id="custom-cursor"></div>

  <!-- Dynamic Animated Canvases -->
  <canvas id="canvas-speedlines"></canvas>
  <canvas id="canvas-particles"></canvas>

  <!-- Navigation Bar -->
  <nav>
    <div class="brand-logo">
      <i class="fa-solid fa-fire-flame-curved"></i> KAIJU BITES
    </div>
    <ul class="nav-links">
      <li><a href="#home">Home</a></li>
      <li><a href="#menu">Secret Menu</a></li>
      <li><a href="#about">Lore</a></li>
    </ul>
    <button class="nav-btn" onclick="triggerSFX(event, 'ORDER SUBMITTED!')">ORDER NOW</button>
    
    <button class="menu-toggle" id="open-drawer-btn">
      <i class="fa-solid fa-bars-staggered"></i>
    </button>
  </nav>

  <!-- Mobile Drawer Menu -->
  <div class="mobile-drawer" id="mobile-drawer">
    <button class="close-drawer" id="close-drawer-btn">&times;</button>
    <ul class="mobile-nav-links">
      <li><a href="#home" onclick="toggleDrawer()">Home</a></li>
      <li><a href="#menu" onclick="toggleDrawer()">Secret Menu</a></li>
      <li><a href="#about" onclick="toggleDrawer()">Lore</a></li>
    </ul>
    <button class="nav-btn" style="margin-top: 40px; width: 100%;" onclick="toggleDrawer(); triggerSFX(event, 'ORDER SUBMITTED!')">ORDER NOW</button>
  </div>

  <!-- Hero Section -->
  <section class="hero" id="home">
    <div class="hero-content">
      <div class="power-tag">
        <i class="fa-solid fa-bolt"></i> POWER LEVEL: OVER 9000
      </div>
      <h1 class="hero-title">SUPREME <span>ANIME</span> CULINARY REALM</h1>
      <p class="hero-desc">Forged in the legendary flames of anime passion. Every bowl of ramen and hand-rolled dish delivers an explosive surge of ultimate flavor straight to your soul.</p>
      <div class="hero-buttons">
        <a href="#menu" class="btn-hero-primary" onclick="triggerSFX(event, 'SUGOI!')">EXPLORE DISHES</a>
        <a href="#about" class="btn-hero-secondary" onclick="triggerSFX(event, 'POWER UP!')">OUR LORE</a>
      </div>
    </div>

    <div class="hero-visual">
      <div class="energy-aura"></div>
      <div class="food-img-frame" onclick="triggerSFX(event, 'OISHII!!')">
        <img src="https://images.unsplash.com/photo-1569718212165-3a8278d5f624?auto=format&fit=crop&w=800&q=80" alt="Anime Ramen Bowl">
        <div class="badge-power">SSS RANK</div>
      </div>
    </div>
  </section>

  <!-- Menu Section -->
  <section class="menu-section" id="menu">
    <div
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
367KB
Transfer Size
454KB
Content Size
253.0ms
Dom Content Loaded
500.0ms
First Paint
394.0ms
Load Time
Domain Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests
Timings (ms)
Total Time
Content Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests