HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
342x173
2.67 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>JK Products | Luxury Fashion Store</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
<style>
  body { margin: 0; font-family: 'Montserrat', sans-serif; background: #0e0e0e; color: #fff; }
  a { text-decoration: none; color: inherit; }
  header { display: flex; justify-content: space-between; align-items: center; padding: 25px 50px; border-bottom:1px solid #333; }
  header h1 { font-family: 'Playfair Display', serif; font-size: 36px; color: #c9a14a; letter-spacing: 3px; }
  nav a { margin-left: 30px; font-weight: 600; transition:0.3s; }
  nav a:hover { color: #c9a14a; }
  .hero { display:flex; justify-content:center; align-items:center; background:url('https://images.unsplash.com/photo-1600180758895-5b1d1d021e08?crop=entropy&cs=tinysrgb&fit=max&fm=jpg') no-repeat center/cover; height:80vh; text-align:center; }
  .hero h2 { background: rgba(0,0,0,0.5); padding: 20px 40px; border-radius:10px; font-size:42px; color:#c9a14a; letter-spacing:2px; }
  section { padding:60px 50px; max-width:1200px; margin:auto; }
  h2.section-title { text-align:center; color:#c9a14a; letter-spacing:2px; font-size:32px; margin-bottom:40px; }
  .about { text-align:center; font-size:18px; line-height:1.8; color:#ccc; }
  .categories { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:25px; }
  .card { border:1px solid #333; padding:20px; text-align:center; transition:0.3s; position: relative; }
  .card img { width:100%; border-radius:8px; }
  .card h3 { margin-top:15px; color:#fff; }
  .card p { color:#bbb; font-size:16px; }
  .card:hover { border-color:#c9a14a; transform:translateY(-5px); }
  .btn { display:inline-block; background-color:#c9a14a; color:#0e0e0e; padding:12px 25px; margin-top:15px; border-radius:5px; font-weight:600; transition:0.3s; cursor:pointer; }
  .btn:hover { background-color:#fff; }
  footer { text-align:center; padding:30px; border-top:1px solid #333; color:#777; font-size:14px; }
  /* Cart */
  #cart { position: fixed; right:20px; top:80px; background:#1a1a1a; padding:20px; border:1px solid #333; width:300px; display:none; z-index:1000; border-radius:8px; }
  #cart h3 { margin-top:0; color:#c9a14a; }
  #cart ul { list-style:none; padding:0; max-height:300px; overflow-y:auto; }
  #cart li { margin-bottom:10px; display:flex; justify-content:space-between; font-size:16px; }
  #cart button { margin-top:10px; background:#c9a14a; border:none; padding:10px; font-weight:600; cursor:pointer; width:100%; border-radius:5px; }
  #cart button:hover { background:#fff; color:#0e0e0e; }
  .cart-toggle { position: fixed; right:20px; top:20px; background:#c9a14a; padding:12px 18px; border-radius:50px; font-weight:600; cursor:pointer; z-index:1000; }
  .cart-toggle:hover { background:#fff; color:#0e0e0e; }
  @media(max-width:768px){header{flex-direction:column;text-align:center}nav{margin-top:15px}.hero h2{font-size:28px;padding:15px 25px}}
</style>
</head>
<body>

<header>
  <h1>JK PRODUCTS</h1>
  <nav>
    <a href="#about">About</a>
    <a href="#shop">Shop</a>
    <a href="#contact">Contact</a>
  </nav>
</header>

<div class="cart-toggle" onclick="toggleCart()">Cart 🛒</div>

<div id="cart">
  <h3>Your Cart</h3>
  <ul id="cart-items"></ul>
  <strong>Total: $<span id="cart-total">0</span></strong>
  <button onclick="checkout()">Checkout</button>
</div>

<section class="hero">
  <h2>Modern Luxury for Men & Women</h2>
</section>

<section id="about">
  <h2 class="section-title">About Us</h2>
  <p class="about">
    JK Products is a premium fashion brand offering refined clothing, bags, and lifestyle accessories for men and women.  
    Our collections are crafted to reflect timeless elegance, superior quality, and modern sophistication.
  </p>
</section>

<section id="shop">
  <h2 class="section-title">Shop Our Collections</h2>
  <div class="categories">
    <div class="card">
      <img src="https://images.unsplash.com/photo-1618354694900-3c4f4304f046?crop=entropy&cs=tinysrgb&fit=max&fm=jpg" alt="Men Fashion">
      <h3>Men’s Shirt</h3>
      <p>$120</p>
      <div class="btn" onclick="addToCart('Men’s Shirt', 120)">Add to Cart</div>
    </div>
    <div class="card">
      <img src="https://images.unsplash.com/photo-1600180758895-5b1d1d021e08?crop=entropy&cs=tinysrgb&fit=max&fm=jpg" alt="Women Fashion">
      <h3>Women’s Dress</h3>
      <p>$150</p>
      <div class="btn" onclick="addToCart('Women’s Dress', 150)">Add to Cart</div>
    </div>
    <div class="card">
      <img src="https://images.unsplash.com/photo-1602810311593-f8a08780a1a5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg" alt="Bag">
      <h3>Luxury Bag</h3>
      <p>$200</p>
      <div class="btn" onclick="addToCart('Luxury Bag', 200)">Add to Cart</div>
    </div>
  </div>
</section>

<section id="contact">
  <h2 class="section-title">Contact Us</h2>
  <p class="about">
    📍 Online Luxury Brand<br>
    📧 Email: info@jkproducts.com<br>
    📌 Follow us on Pinterest & Social Media
  </p>
</section>

<footer>
  © 2026 JK Products — All Rights Reserved
</footer>

<script>
let cart = [];
function toggleCart(){
  const cartDiv = document.getElementById('cart');
  cartDiv.style.display = cartDiv.style.display === 'block' ? 'none' : 'block';
}

function addToCart(item, price){
  cart.push({name:item, price:price});
  updateCart();
}

function updateCart(){
  const list = document.getElementById('cart-items');
  list.innerHTML = '';
  let total = 0;
  cart.forEach((i,index)=>{
    total += i.price;
    list.innerHTML += `<li>${i.name} - $${i.price} <span style="cursor:pointer;color:#c9a14a;" onclick="removeItem(${index})">x</span></li>`;
  });
  document.getElementById('cart-total').innerText = total;
}

function removeItem(index){
  cart.splice(index,1);
  updateCart();
}

function checkout(){
  if(cart.length===0){ alert('Your cart is empty!'); return; }
  alert('Checkout is coming soon! Total: $'+cart.reduce((a,b)=>a+b.price,0));
}
</script>

</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
82KB
Transfer Size
88KB
Content Size
147.0ms
Dom Content Loaded
292.0ms
First Paint
497.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