HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
275x201
3.39 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"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AGBshop - Premium Sticker Shop</title>
    <style>
        /* Basic Reset and Global Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Helvetica', sans-serif; /* Bold sans-serif font */
            background-color: #ffffff; /* Clean white background */
            color: #000000;
            line-height: 1.6;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        /* Header */
        header {
            background-color: #f8f8f8; /* Off-white for subtle definition */
            padding: 10px 0;
            text-align: center;
        }
        .logo {
            font-size: 2em;
            font-weight: bold;
            color: #2e8b57; /* Soft emerald green */
        }
        nav {
            margin-top: 10px;
        }
        nav a {
            margin: 0 15px;
            text-decoration: none;
            color: #000;
            font-weight: bold;
            transition: color 0.3s;
        }
        nav a:hover {
            color: #2e8b57;
        }
        /* Hero Section */
        .hero {
            background-image: url('https://via.placeholder.com/1200x400?text=Laptop+with+Stickers'); /* Placeholder image */
            background-size: cover;
            background-position: center;
            height: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            position: relative;
        }
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.3); /* Overlay for text readability */
        }
        .hero-content {
            position: relative;
            z-index: 1;
        }
        .hero h1 {
            font-size: 3em;
            margin-bottom: 20px;
        }
        .btn {
            background-color: #2e8b57;
            color: white;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 5px;
            font-weight: bold;
            display: inline-block;
            transition: background-color 0.3s;
        }
        .btn:hover {
            background-color: #228b22;
        }
        /* Featured Collections Grid */
        .collections {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin: 40px 0;
        }
        .collection-item {
            background-color: #f9f9f9;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: transform 0.3s;
        }
        .collection-item:hover {
            transform: scale(1.05);
        }
        .collection-item img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        .collection-item h3 {
            padding: 15px;
            font-size: 1.2em;
        }
        .collection-item p {
            padding: 0 15px 15px;
            color: #2e8b57;
        }
        /* Best Sticker Types Section */
        .best-stickers {
            margin: 40px 0;
            text-align: center;
        }
        .best-stickers h2 {
            font-size: 2.5em;
            margin-bottom: 20px;
            color: #2e8b57;
        }
        .best-stickers-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }
        .sticker-type {
            background-color: #f9f9f9;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: transform 0.3s;
        }
        .sticker-type:hover {
            transform: scale(1.05);
        }
        .sticker-type img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            border-radius: 5px;
            margin-bottom: 15px;
        }
        .sticker-type h3 {
            font-size:
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AGBshop - Premium Sticker Shop</title>
    <style>
        /* Basic Reset and Global Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Helvetica', sans-serif; /* Bold sans-serif font */
            background-color: #ffffff; /* Clean white background */
            color: #000000;
            line-height: 1.6;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        /* Header */
        header {
            background-color: #f8f8f8; /* Off-white for subtle definition */
            padding: 10px 0;
            text-align: center;
        }
        .logo {
            font-size: 2em;
            font-weight: bold;
            color: #2e8b57; /* Soft emerald green */
        }
        nav {
            margin-top: 10px;
        }
        nav a {
            margin: 0 15px;
            text-decoration: none;
            color: #000;
            font-weight: bold;
            transition: color 0.3s;
        }
        nav a:hover {
            color: #2e8b57;
        }
        /* Hero Section */
        .hero {
            background-image: url('https://via.placeholder.com/1200x400?text=Laptop+with+Stickers'); /* Placeholder image */
            background-size: cover;
            background-position: center;
            height: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            position: relative;
        }
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.3); /* Overlay for text readability */
        }
        .hero-content {
            position: relative;
            z-index: 1;
        }
        .hero h1 {
            font-size: 3em;
            margin-bottom: 20px;
        }
        .btn {
            background-color: #2e8b57;
            color: white;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 5px;
            font-weight: bold;
        }
        /* Featured Collections Grid */
        .collections {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin: 40px 0;
        }
        .collection-item {
            background-color: #f9f9f9;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: transform 0.3s;
        }
        .collection-item:hover {
            transform: scale(1.05);
        }
        .collection-item img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        .collection-item h3 {
            padding: 15px;
            font-size: 1.2em;
        }
        .collection-item p {
            padding: 0 15px 15px;
            color: #2e8b57;
        }
        /* Bundle Builder */
        .bundle-builder {
            background-color: #f0f8f0; /* Light green tint */
            padding: 20px;
            border-radius: 10px;
            margin: 40px 0;
            text-align: center;
        }
        .bundle-builder h2 {
            margin-bottom: 20px;
        }
        .bundle-options {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }
        .bundle-option {
            background-color: white;
            padding: 10px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .bundle-option:hover {
            background-color: #2e8b57;
            color: white;
        }
        /* Trending Now */
        .trending {
            margin: 40px 0;
        }
        .trending h2 {
            text-align: center;
            margin-bottom: 20px;
        }
        .trending-carousel {
            display: flex;
            overflow-x: auto;
            gap: 20px;
            padding: 10px;
        }
        .trending-item {
            min-width: 250px;
            background-color: #f9f9f9;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .trending-item img {
            width: 100%;
            height: 150px;
            object-fit: cover;
        }
        .trending-item h4 {
            padding: 10px;
        }
        /* Footer */
        footer {
            background-color: #f8f8f8;
            text-align: center;
            padding: 20px;
            margin-top: 40px;
        }
        footer a {
            margin: 0 10px;
            text-decoration: none;
            color: #000;
        }
        /* Mobile Responsiveness */
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 2em;
            }
            .collections {
                grid-template-columns: 1fr;
            }
            .bundle-options {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="logo">AGBshop</div>
        <nav>
            <a href="#home">Home</a>
            <a href="#collections">Collections</a>
            <a href="#bundles">Bundles</a>
            <a href="#about">About</a>
            <a href="#cart">Cart</a>
        </nav>
    </header>

    <div class="container">
        <!-- Hero Section -->
        <section class="hero" id="home">
            <div class="hero-content">
                <h1>Stick Your Style On</h1>
                <a href="#collections" class="btn">Shop Now</a>
            </div>
        </section>

        <!-- Featured Collections -->
        <section class="collections" id="collections">
            <div class="collection-item">
                <img src="https://via.placeholder.com/250x200?text=Holographic+Sticker" alt="Holographic Sticker">
                <h3>Holographic Vibes</h3>
                <p>$3.99</p>
            </div>
            <div class="collection-item">
                <img src="https://via.placeholder.com/250x200?text=Matte+Sticker" alt="Matte Sticker">
                <h3>Matte Essentials</h3>
                <p>$2.99</p>
            </div>
            <div class="collection-item">
                <img src="https://via.placeholder.com/250x200?text=Die-Cut+Sticker" alt="Die-Cut Sticker">
                <h3>Die-Cut Designs</h3>
                <p>$4.49</p>
            </div>
            <div class="collection-item">
                <img src="https://via.placeholder.com/250x200?text=Glow+Sticker" alt="Glow Sticker">
                <h3>Glow-in-the-Dark</h3>
                <p>$3.49</p>
            </div>
        </section>

        <!-- Bundle Builder -->
        <section class="bundle-builder" id="bundles">
            <h2>Sticker Bundle Builder</h2>
            <p>Mix & Match for 20% Off</p>
            <div class="bundle-options">
                <div class="bundle-option" onclick="addToBundle('Holographic')">Holographic</div>
                <div class="bundle-option" onclick="addToBundle('Matte')">Matte</div>
                <div class="bundle-option" onclick="addToBundle('Die-Cut')">Die-Cut</div>
            </div>
            <p id="bundle-list">Your Bundle: None selected</p>
            <a href="#" class="btn">Add to Cart</a>
        </section>

        <!-- Trending Now -->
        <section class="trending">
            <h2>Trending Now</h2>
            <div class="trending-carousel">
                <div class="trending-item">
                    <img src="https://via.placeholder.com/250x150?text=Sticker+on+Bottle" alt="Sticker on Bottle">
                    <h4>Glow Hits</h4>
                </div>
                <div class="trending-item">
                    <img src="https://via.placeholder.com/250x150?text=Sticker+on+Laptop" alt="Sticker on Laptop">
                    <h4>Matte Must-Haves</h4>
                </div>
                <div class="trending-item">
                    <img src="https://via.placeholder.com/250x150?text=Sticker+on+Phone" alt="Sticker on Phone">
                    <h4>Holographic Glow</h4>
                </div>
            </div>
        </section>
    </div>

    <footer>
        <p>&copy; 2023 AGBshop. All rights reserved.</p>
        <a href="#">Privacy Policy</a> | <a href="#">Shipping Info</a>
        <a href="#">Instagram</a> | <a href="#">TikTok</a>
    </footer>

    <script>
        // Simple JS for Bundle Builder (basic interactivity)
        let bundle = [];
        function addToBundle(type) {
            bundle.push(type);
            document.getElementById('bundle-list').textContent = 'Your Bundle: ' + bundle.join(', ');
        }
    </script>
</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
14KB
Transfer Size
14KB
Content Size
57.0ms
Dom Content Loaded
120.0ms
First Paint
198.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