HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
315x201
140 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>Bonfire Pizza Kitchen | Sadiqabad</title>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    
    <style>
        :root {
            --primary: #e65100; /* Burnt Orange */
            --dark: #1a1a1a;
            --light: #f4f4f4;
            --white: #ffffff;
            --shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

        body {
            background-color: var(--light);
            color: var(--dark);
            line-height: 1.6;
        }

        /* Header */
        header {
            background: var(--white);
            box-shadow: var(--shadow);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 5%;
            max-width: 1200px;
            margin: 0 auto;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
            text-decoration: none;
        }

        .logo span { color: var(--dark); }

        .nav-links a {
            text-decoration: none;
            color: var(--dark);
            font-weight: 500;
            margin-left: 20px;
            transition: 0.3s;
        }

        .nav-links a:hover { color: var(--primary); }

        .btn-order {
            background: var(--primary);
            color: white !important;
            padding: 8px 20px;
            border-radius: 50px;
        }

        /* Hero Section */
        .hero {
            background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1513104890138-7c749659a591?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
            background-size: cover;
            background-position: center;
            height: 80vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: white;
            padding: 0 20px;
        }

        .hero h1 {
            font-size: 3rem;
            margin-bottom: 1rem;
            text-transform: uppercase;
        }

        .hero p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
            max-width: 600px;
        }

        .hero-btn {
            background: var(--primary);
            color: white;
            padding: 15px 40px;
            text-decoration: none;
            font-weight: bold;
            border-radius: 5px;
            font-size: 1.1rem;
            transition: transform 0.3s;
        }

        .hero-btn:hover { transform: scale(1.05); }

        /* Menu Section */
        .menu-section {
            padding: 4rem 5%;
            max-width: 1200px;
            margin: 0 auto;
        }

        .section-title {
            text-align: center;
            margin-bottom: 3rem;
            font-size: 2rem;
            color: var(--dark);
        }

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

        .menu-card {
            background: var(--white);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: 0.3s;
        }

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

        .menu-img {
            height: 200px;
            width: 100%;
            object-fit: cover;
            background-color: #ddd;
        }

        .menu-info { padding: 1.5rem; }

        .menu-info h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
        
        .price {
            font-size: 1.1rem;
            color: var(--primary);
            font-weight: bold;
            margin-bottom: 1rem;
            display: block;
        }

        .add-btn {
            width: 100%;
            padding: 10px;
            background: var(--dark);
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: 600;
            transition: 0.3s;
        }

        .add-btn:hover { background: var(--primary); }

        /* Floating Cart Button */
        .cart-float {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background: var(--primary);
            color: white;
            padding: 15px 25px;
            border-radius: 50px;
            box-shadow: var(--shadow);
            cursor: pointer;
            z-index: 1001;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        /* Contact Section */
        .contact {
            background: #222;
            color: white;
            padding: 4rem 5%;
            text-align: center;
        }

        .contact-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 3rem;
            margin-top: 2rem;
        }

        .contact-item i {
            font-size: 2rem;
            color: var(--primary);
            margin-bottom: 10px;
        }

        /* Footer */
        footer {
            background: #111;
            color: #888;
            text-align: center;
            padding: 1rem;
            font-size: 0.9rem;
        }

        @media (max-width: 768px) {
            .hero h1 { font-size: 2rem; }
            .nav-links { display: none; }
        }
    </style>
</head>
<body>

    <!-- Navigation -->
    <header>
        <nav class="navbar">
            <a href="#" class="logo">Bonfire <span>Pizza</span></a>
            <div class="nav-links">
                <a href="#home">Home</a>
                <a href="#menu">Menu</a>
                <a href="#contact">Contact</a>
                <a href="#menu" class="btn-order">Order Now</a>
            </div>
        </nav>
    </header>

    <!-- Hero Section -->
    <section class="hero" id="home">
        <h1>Freshly Baked Fast Food</h1>
        <p>Located near Jinnah Sports Complex. Taste the difference of our industrial oven baking.</p>
        <a href="#menu" class="hero-btn">View Menu</a>
    </section>

    <!-- Menu Section -->
    <section class="menu-section" id="menu">
        <h2 class="section-title">Our Popular Menu</h2>
        <div class="menu-grid">
            <!-- Item 1 -->
            <div class="menu-card">
                <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Pizza" class="menu-img">
                <div class="menu-info">
                    <h3>Chicken Tikka Pizza</h3>
                    <span class="price">Rs 850</span>
                    <button class="add-btn" onclick="addToCart('Chicken Tikka Pizza', 850)">Add to Order</button>
                </div>
            </div>
            <!-- Item 2 -->
            <div class="menu-card">
                <img src="https://images.unsplash.com/photo-1628840042765-356cda07504e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Pizza" class="menu-img">
                <div class="menu-info">
                    <h3>BBQ Chicken Pizza</h3>
                    <span class="price">Rs 950</span>
                    <button class="add-btn" onclick="addToCart('BBQ Chicken Pizza', 950)">Add to Order</button>
                </div>
            </div>
            <!-- Item 3 -->
            <div class="menu-card">
                <img src="https://images.unsplash.com/photo-1594007654729-407eedc4be65?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Pizza" class="menu-img">
                <div class="menu-info">
                    <h3>Veggie Special</h3>
                    <span class="price">Rs 750</span>
                    <button class="add-btn" onclick="addToCart('Veggie Special', 750)">Add to Order</button>
                </div>
            </div>
            <!-- Item 4 -->
            <div class="menu-card">
                <img src="https://images.unsplash.com/photo-1573140401552-3f3ab7eb3a19?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Garlic Bread" class="menu-img">
                <div class="menu-info">
                    <h3>Cheesy Garlic Bread</h3>
                    <span class="price">Rs 200</span>
                    <button class="add-btn" onclick="addToCart('Cheesy Garlic Bread', 200)">Add to Order</button>
                </div>
            </div>
            <!-- Item 5 -->
            <div class="menu-card">
                <img src="https://images.unsplash.com/photo-1550547660-d9451f6437a6?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Burger" class="menu-img">
                <div class="menu-info">
                    <h3>Chicken Burger</h3>
                    <span class="price">Rs 450</span>
                    <button class="add-btn" onclick="addToCart('Chicken Burger', 450)">Add to Order</button>
                </div>
            </div>
             <!-- Item 6 -->
             <div class="menu-card">
                <img src="https://images.unsplash.com/photo-1585241936938-3e6a3a74b110?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Fries" class="menu-img">
                <div class="menu-info">
                    <h3>Peri Peri Fries</h3>
                    <span class="price">Rs 250</span>
                    <button class="add-btn" onclick="addToCart('Peri Peri Fries', 250)">Add to Order</button>
                </div>
            </div>
        </div
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
510KB
Transfer Size
585KB
Content Size
236.0ms
Dom Content Loaded
316.0ms
First Paint
401.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