HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
130x131
4.93 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="si">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LOKKA MOTORS - Premium Video Background</title>
    <style>
        body {
            font-family: 'Poppins', sans-serif;
            margin: 0;
            background-color: #000;
            color: white;
            text-align: center;
            overflow-x: hidden;
        }

        /* වීඩියෝව සම්පූර්ණ තිරය පුරා පෙනීමට */
        #video-bg-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
        }

        #bg-video {
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            object-fit: cover;
            /* වීඩියෝවේ දීප්තිය ටිකක් අඩු කිරීමට (Text පැහැදිලිව පෙනීමට) */
            filter: brightness(40%);
        }

        header {
            background: rgba(255, 204, 0, 0.7);
            padding: 50px 20px;
            color: black;
            text-transform: uppercase;
        }

        .profile-pic {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            border: 5px solid gold;
            margin-top: -60px;
            background-color: #111;
            object-fit: cover;
            position: relative;
            z-index: 10;
        }

        nav {
            background: rgba(0, 0, 0, 0.85);
            padding: 15px;
            position: sticky;
            top: 0;
            z-index: 100;
            backdrop-filter: blur(10px);
            border-bottom: 1px solid #333;
        }

        nav a {
            color: gold;
            margin: 0 15px;
            text-decoration: none;
            font-weight: bold;
            cursor: pointer;
        }

        .page {
            display: none;
            padding: 60px 20px;
            animation: fadeIn 1s ease;
        }

        .active { display: block; }

        @keyframes fadeIn {
            from { opacity: 0; } to { opacity: 1; }
        }

        .grid-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
        }

        .card {
            background: rgba(30, 30, 30, 0.8);
            width: 280px;
            border-radius: 15px;
            overflow: hidden;
            border: 1px solid #444;
            backdrop-filter: blur(5px);
            transition: 0.3s;
        }

        .card:hover { transform: translateY(-10px); border-color: gold; }

        .card img { width: 100%; height: 180px; object-fit: cover; }

        .info { padding: 15px; }

        .btn {
            background: gold;
            color: black;
            padding: 10px 20px;
            text-decoration: none;
            font-weight: bold;
            border-radius: 20px;
            display: inline-block;
            margin-top: 10px;
        }

        footer { padding: 30px; background: rgba(0,0,0,0.9); font-size: 12px; color: #777; }
    </style>
</head>
<body>

    <div id="video-bg-container">
        <video autoplay loop muted playsinline id="bg-video">
            <source src="https://player.vimeo.com/external/371433846.sd.mp4?s=231da6abfe3a05aa830164623a964955b9338a08&profile_id=164&oauth2_token_id=57447761" type="video/mp4">
            පසුබිම් වීඩියෝව ක්‍රියා නොකරයි.
        </video>
    </div>

    <header>
        <h1>LOKKA MOTORS</h1>
        <p>Ride Your Dream</p>
    </header>

    <img src="image_0.png" alt="Lokka" class="profile-pic">

    <nav>
        <a onclick="showPage('bike-page')">BIKES</a>
        <a onclick="showPage('car-page')">CARS</a>
    </nav>

    <div id="bike-page" class="page active">
        <h2 style="color: gold;">BIKE COLLECTION</h2>
        <div class="grid-container">
            <div class="card">
                <img src="https://images.unsplash.com/photo-1558981403-c5f91cbba527?w=400">
                <div class="info">
                    <h3>Harley Davidson</h3>
                    <p>රු. 4,500,000</p>
                    <a href="#" class="btn">මිලදී ගන්න</a>
                </div>
            </div>
            </div>
    </div>

    <div id="car-page" class="page">
        <h2 style="color: gold;">CAR COLLECTION</h2>
        <div id="car-list" class="grid-container">
            </div>
    </div>

    <footer>
        <p>&copy; 2026 LOKKA MOTORS | ගාල්ල, ශ්‍රී ලංකාව</p>
    </footer>

    <script>
        function showPage(pageId) {
            document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
            document.getElementById(pageId).classList.add('active');
            window.scrollTo({top: 400, behavior: 'smooth'});
        }

        // කාර් 10ක් ඇඩ් කිරීම
        const cars = [
            {name: "Toyota V8", price: "45,000,000", img: "https://images.unsplash.com/photo-1533473359331-0135ef1b58bf?w=400"},
            {name: "BMW i8", price: "55,000,000", img: "https://images.unsplash.com/photo-1555215695-3004980ad54e?w=400"},
            {name: "Mercedes Benz", price: "38,000,000", img: "https://images.unsplash.com/photo-1503376780353-7e6692767b70?w=400"},
            {name: "Audi A6", price: "28,000,000", img: "https://images.unsplash.com/photo-1606152421649-d2d711f29a24?w=400"},
            {name: "Range Rover", price: "62,000,000", img: "https://images.unsplash.com/photo-1503376780353-7e6692767b70?w=400"},
            {name: "Civic RS", price: "18,500,000", img: "https://images.unsplash.com/photo-1594070319944-7c0c6bb88814?w=400"},
            {name: "Nissan GT-R", price: "48,000,000", img: "https://images.unsplash.com/photo-1580273916550-e323be2ae537?w=400"},
            {name: "Defender", price: "75,000,000", img: "https://images.unsplash.com/photo-1604054944820-cc7160910a6b?w=400"},
            {name: "Panda", price: "4,500,000", img: "https://images.unsplash.com/photo-1592198084033-aade902d1aae?w=400"},
            {name: "Swift RS", price: "9,500,000", img: "https://images.unsplash.com/photo-1583121274602-3e2820c69888?w=400"}
        ];

        const carList = document.getElementById('car-list');
        cars.forEach(car => {
            carList.innerHTML += `
                <div class="card">
                    <img src="${car.img}">
                    <div class="info">
                        <h3>${car.name}</h3>
                        <p>රු. ${car.price}</p>
                        <a href="https://wa.me/94771234567" class="btn">මිලදී ගන්න</a>
                    </div>
                </div>
            `;
        });
    </script>
</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
387KB
Transfer Size
387KB
Content Size
95.0ms
Dom Content Loaded
200.0ms
First Paint
291.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