HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
274x200
2.03 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="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>আমার অনলাইন শপ</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #f4f6f8;
            color: #333;
        }

        /* Header & Navigation */
        header {
            background-color: #0d6efd;
            color: white;
            padding: 1rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .logo {
            font-size: 1.5rem;
            font-weight: bold;
        }

        .cart-icon {
            background: white;
            color: #0d6efd;
            padding: 8px 15px;
            border-radius: 20px;
            font-weight: bold;
            cursor: pointer;
        }

        /* Banner */
        .banner {
            background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://via.placeholder.com/1200x400') center/cover;
            color: white;
            text-align: center;
            padding: 4rem 1rem;
        }

        .banner h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }

        /* Products Section */
        .container {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 1rem;
        }

        .section-title {
            text-align: center;
            margin-bottom: 2rem;
            font-size: 1.8rem;
            color: #222;
        }

        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
        }

        .product-card {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transition: transform 0.2s;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .product-card:hover {
            transform: translateY(-5px);
        }

        .product-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            background-color: #eee;
        }

        .product-info {
            padding: 1rem;
        }

        .product-title {
            font-size: 1.1rem;
            margin-bottom: 0.5rem;
        }

        .product-price {
            font-size: 1.2rem;
            color: #0d6efd;
            font-weight: bold;
            margin-bottom: 1rem;
        }

        .btn-add {
            width: 100%;
            background: #0d6efd;
            color: white;
            border: none;
            padding: 10px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: bold;
        }

        .btn-add:hover {
            background: #0b5ed7;
        }

        /* Cart Drawer / Modal */
        .cart-modal {
            display: none;
            position: fixed;
            top: 0;
            right: 0;
            width: 350px;
            height: 100%;
            background: white;
            box-shadow: -2px 0 10px rgba(0,0,0,0.2);
            padding: 1.5rem;
            z-index: 1001;
            flex-direction: column;
        }

        .cart-modal.active {
            display: flex;
        }

        .cart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #ddd;
            padding-bottom: 10px;
            margin-bottom: 1rem;
        }

        .close-cart {
            cursor: pointer;
            font-size: 1.5rem;
            font-weight: bold;
        }

        .cart-items {
            flex-grow: 1;
            overflow-y: auto;
        }

        .cart-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 1rem;
            border-bottom: 1px solid #eee;
            padding-bottom: 5px;
        }

        .checkout-btn {
            background: #198754;
            color: white;
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 5px;
            font-size: 1rem;
            cursor: pointer;
            margin-top: 1rem;
        }

        /* Footer */
        footer {
            background: #222;
            color: white;
            text-align: center;
            padding: 1.5rem;
            margin-top: 3rem;
        }
    </style>
</head>
<body>

    <!-- Navigation Header -->
    <header>
        <div class="logo">আমার ই-শপ</div>
        <div class="cart-icon" onclick="toggleCart()">
            কার্ট (<span id="cart-count">0</span>)
        </div>
    </header>

    <!-- Banner -->
    <div class="banner">
        <h1>সেরা মূল্যে সেরা পণ্য পান</h1>
        <p>আজই অর্ডার করুন এবং দ্রুত ডেলিভারি নিন!</p>
    </div>

    <!-- Products -->
    <div class="container">
        <h2 class="section-title">আমাদের পণ্যসমূহ</h2>
        <div class="product-grid" id="product-list">
            <!-- Products will be loaded by Javascript -->
        </div>
    </div>

    <!-- Cart Modal -->
    <div class="cart-modal" id="cart-modal">
        <div class="cart-header">
            <h3>আপনার শপিং কার্ট</h3>
            <span class="close-cart" onclick="toggleCart()">&times;</span>
        </div>
        <div class="cart-items" id="cart-items">
            <!-- Cart items go here -->
        </div>
        <div>
            <h4>মোট মূল্য: ৳<span id="cart-total">0</span></h4>
            <button class="checkout-btn" onclick="checkout()">অর্ডার সম্পন্ন করুন (bKash/COD)</button>
        </div>
    </div>

    <!-- Footer -->
    <footer>
        <p>&copy; 2026 আমার অনলাইন শপ। সর্বস্বত্ব সংরক্ষিত।</p>
    </footer>

    <!-- JavaScript logic -->
    <script>
        // Sample Product Data
        const products = [
            { id: 1, name: "প্রিমিয়াম টি-শার্ট", price: 450, image: "https://via.placeholder.com/250x200?text=T-Shirt" },
            { id: 2, name: "স্মার্ট ওয়াচ", price: 1800, image: "https://via.placeholder.com/250x200?text=Smart+Watch" },
            { id: 3, name: "ওয়ারলেস হেডফোন", price: 1200, image: "https://via.placeholder.com/250x200?text=Headphone" },
            { id: 4, name: "লেদার ওয়ালেট", price: 650, image: "https://via.placeholder.com/250x200?text=Wallet" }
        ];

        let cart = [];

        // Display Products
        function loadProducts() {
            const container = document.getElementById('product-list');
            container.innerHTML = '';
            
            products.forEach(product => {
                const card = document.createElement('div');
                card.className = 'product-card';
                card.innerHTML = `
                    <img src="${product.image}" alt="${product.name}" class="product-image">
                    <div class="product-info">
                        <div class="product-title">${product.name}</div>
                        <div class="product-price">৳ ${product.price}</div>
                        <button class="btn-add" onclick="addToCart(${product.id})">কার্টে যোগ করুন</button>
                    </div>
                `;
                container.appendChild(card);
            });
        }

        // Add to Cart
        function addToCart(id) {
            const item = products.find(p => p.id === id);
            cart.push(item);
            updateCart();
        }

        // Update Cart UI
        function updateCart() {
            document.getElementById('cart-count').innerText = cart.length;
            const cartItemsContainer = document.getElementById('cart-items');
            cartItemsContainer.innerHTML = '';
            
            let total = 0;
            cart.forEach((item, index) => {
                total += item.price;
                const div = document.createElement('div');
                div.className = 'cart-item';
                div.innerHTML = `
                    <div>
                        <strong>${item.name}</strong><br>
                        ৳ ${item.price}
                    </div>
                    <button style="color:red; border:none; background:none; cursor:pointer;" onclick="removeFromCart(${index})">মুছুন</button>
                `;
                cartItemsContainer.appendChild(div);
            });

            document.getElementById('cart-total').innerText = total;
        }

        // Remove from Cart
        function removeFromCart(index) {
            cart.splice(index, 1);
            updateCart();
        }

        // Toggle Cart Modal
        function toggleCart() {
            const modal = document.getElementById('cart-modal');
            modal.classList.toggle('active');
        }

        // Checkout Placeholder
        function checkout() {
            if(cart.length === 0) {
                alert("আপনার কার্ট খালি!");
                return;
            }
            alert("ধন্যবাদ! আপনার অর্ডারটি গ্রহণ করা হয়েছে। আমরা দ্রুত আপনার সাথে যোগাযোগ করব।");
            cart = [];
            updateCart();
            toggleCart();
        }

        // Initialize
        loadProducts();
    </script>
</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
20KB
Transfer Size
18KB
Content Size
132.0ms
Dom Content Loaded
212.0ms
First Paint
299.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