HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
382x220
61.5 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>Saqib Gaming 2.5</title>

<style>

/* =========================
   BASIC
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, sans-serif;
    scroll-behavior:smooth;
}

body{
    background:#080b12;
    color:white;
}

/* =========================
   NAVBAR
========================= */

header{
    position:sticky;
    top:0;
    z-index:999;
    background:#0d111c;
    border-bottom:1px solid #242b3b;
}

.navbar{
    max-width:1200px;
    margin:auto;
    padding:18px 20px;

    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo{
    font-size:25px;
    font-weight:bold;
}

.logo span{
    color:#ff1744;
}

nav{
    display:flex;
    gap:25px;
}

nav a{
    color:white;
    text-decoration:none;
    font-weight:bold;
}

nav a:hover{
    color:#ff1744;
}

.menu{
    display:none;
    font-size:28px;
    cursor:pointer;
}

/* =========================
   HERO
========================= */

.hero{
    min-height:620px;

    display:flex;
    align-items:center;

    background:
    linear-gradient(
        90deg,
        rgba(8,11,18,.98),
        rgba(8,11,18,.70),
        rgba(8,11,18,.25)
    ),
    url("https://images.unsplash.com/photo-1542751371-adc38448a05e?auto=format&fit=crop&w=1800&q=90")
    center/cover;
}

.hero-content{
    max-width:1200px;
    width:100%;
    margin:auto;
    padding:40px 20px;
}

.hero h1{
    font-size:65px;
    max-width:750px;
    margin-bottom:20px;
}

.hero h1 span{
    color:#ff1744;
}

.hero p{
    color:#c5c9d3;
    font-size:19px;
    line-height:1.7;
    max-width:650px;
    margin-bottom:30px;
}

.btn{
    display:inline-block;
    padding:14px 25px;
    background:#ff1744;
    color:white;
    text-decoration:none;
    border-radius:7px;
    font-weight:bold;
    border:none;
    cursor:pointer;
}

.btn:hover{
    background:#d50032;
}

/* =========================
   SECTIONS
========================= */

section{
    padding:80px 20px;
}

.container{
    max-width:1200px;
    margin:auto;
}

.title{
    text-align:center;
    margin-bottom:45px;
}

.title h2{
    font-size:38px;
    margin-bottom:10px;
}

.title p{
    color:#9299aa;
}

/* =========================
   STATS
========================= */

.stats{
    background:#0d111c;
}

.stat-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.stat{
    background:#131925;
    border:1px solid #252d40;
    padding:30px;
    text-align:center;
    border-radius:10px;
}

.stat h3{
    color:#ff1744;
    font-size:35px;
    margin-bottom:8px;
}

.stat p{
    color:#9ca4b7;
}

/* =========================
   GAMES
========================= */

.games{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.game-card{
    background:#111722;
    border:1px solid #252d40;
    border-radius:12px;
    overflow:hidden;
    transition:.3s;
}

.game-card:hover{
    transform:translateY(-8px);
    border-color:#ff1744;
}

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

.game-info{
    padding:22px;
}

.game-info h3{
    font-size:22px;
    margin:10px 0;
}

.game-info p{
    color:#9ca4b7;
    line-height:1.6;
}

.game-tag{
    color:#ff1744;
    font-size:13px;
    font-weight:bold;
}

/* =========================
   NEWS
========================= */

.news{
    background:#0d111c;
}

.news-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.news-card{
    background:#131925;
    border-radius:10px;
    overflow:hidden;
}

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

.news-content{
    padding:20px;
}

.news-content h3{
    margin:10px 0;
    font-size:20px;
}

.news-content p{
    color:#9ca4b7;
    line-height:1.6;
}

/* =========================
   SEARCH
========================= */

.search{
    max-width:650px;
    margin:0 auto 40px;
    display:flex;
}

.search input{
    flex:1;
    padding:16px;
    background:#151b29;
    border:1px solid #30384c;
    color:white;
    outline:none;
    border-radius:7px 0 0 7px;
}

.search button{
    padding:0 22px;
    border:0;
    background:#ff1744;
    color:white;
    cursor:pointer;
    border-radius:0 7px 7px 0;
}

/* =========================
   CATEGORIES
========================= */

.categories{
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:40px;
}

.category{
    padding:11px 20px;
    border:1px solid #30384c;
    border-radius:30px;
    cursor:pointer;
}

.category:hover,
.category.active{
    background:#ff1744;
}

/* =========================
   VIDEOS
========================= */

.video-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
}

.video{
    background:#111722;
    border-radius:10px;
    overflow:hidden;
}

.video iframe{
    width:100%;
    height:300px;
    border:0;
}

.video h3{
    padding:18px;
}

/* =========================
   ABOUT
========================= */

.about{
    background:#0d111c;
    text-align:center;
}

.about p{
    max-width:800px;
    margin:auto;
    color:#a5adbf;
    line-height:1.9;
    font-size:17px;
}

/* =========================
   CONTACT
========================= */

.contact-form{
    max-width:650px;
    margin:auto;
}

.contact-form input,
.contact-form textarea{
    width:100%;
    padding:15px;
    margin-bottom:15px;

    background:#111722;
    color:white;

    border:1px solid #30384c;
    border-radius:7px;
    outline:none;
}

.contact-form textarea{
    height:160px;
    resize:vertical;
}

/* =========================
   FOOTER
========================= */

footer{
    background:#05070c;
    padding:40px 20px;
    text-align:center;
}

.footer-logo{
    font-size:25px;
    font-weight:bold;
    margin-bottom:15px;
}

.footer-logo span{
    color:#ff1744;
}

footer p{
    color:#7f8799;
}

.social{
    margin:20px 0;
}

.social a{
    color:white;
    text-decoration:none;
    margin:0 10px;
}

.social a:hover{
    color:#ff1744;
}

/* =========================
   MOBILE
========================= */

@media(max-width:900px){

    .games,
    .news-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .stat-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .hero h1{
        font-size:48px;
    }
}

@media(max-width:600px){

    nav{
        display:none;
        position:absolute;
        top:70px;
        left:0;
        width:100%;

        background:#0d111c;

        flex-direction:column;
        padding:25px;
    }

    nav.show{
        display:flex;
    }

    .menu{
        display:block;
    }

    .hero{
        min-height:550px;
    }

    .hero h1{
        font-size:38px;
    }

    .hero p{
        font-size:16px;
    }

    .games,
    .news-grid,
    .video-grid{
        grid-template-columns:1fr;
    }

    .stat-grid{
        grid-template-columns:1fr 1fr;
    }

    section{
        padding:60px 15px;
    }

}

</style>
</head>


<body>


<!-- =========================
     NAVBAR
========================= -->

<header>

<div class="navbar">

<div class="logo">
SAQIB <span>GAMING 2.5</span>
</div>

<div class="menu" onclick="toggleMenu()">
☰
</div>

<nav id="nav">

<a href="#home">Home</a>
<a href="#games">Games</a>
<a href="#news">News</a>
<a href="#videos">Videos</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>

</nav>

</div>

</header>


<!-- =========================
     HERO
========================= -->

<section class="hero" id="home">

<div class="hero-content">

<h1>
WELCOME TO
<span>SAQIB GAMING</span>
</h1>

<p>
Your ultimate gaming destination for game news,
updates, gameplay, guides, gaming tips and more.
</p>

<a href="#games" class="btn">
EXPLORE GAMES 🎮
</a>

</div>

</section>


<!-- =========================
     STATS
========================= -->

<section class="stats">

<div class="container">

<div class="stat-grid">

<div class="stat">
<h3>6+</h3>
<p>Popular Games</p>
</div>

<div class="stat">
<h3>24/7</h3>
<p>Gaming Content</p>
</div>

<div class="stat">
<h3>100+</h3>
<p>Gaming Posts</p>
</div>

<div class="stat">
<h3>2.5</h3>
<p>Saqib Gaming</p>
</div>

</div>

</div>

</section>


<!-- =========================
     GAMES
========================= -->

<section id="games">

<div class="container">

<div class="title">

<h2>🎮 Popular Games</h2>

<p>
Explore your favorite games
</p>

</div>


<div class="categories">

<div class="category active"
onclick="filterGames('all',this)">
All
</div>

<div class="category"
onclick="filterGames('battle',this)">
Battle Royale
</div>

<div class="category"
onclick="filterGames('open',this)">
Open World
</div>

<div class="category"
onclick="filterGames('racing',this)">
Racing
</div>

</div>


<div class="games">


<div class="game-card" data-type="battle">

<img src="https://images.unsplash.com/photo-1603481546238-487240415921?auto=format&fit=crop&w=900&q=80">

<div class="game-info">

<span class="game-tag">
BATTLE ROYALE
</span>

<h3>PUBG Mobile</h3>

<p>
Battle Royale gaming, intense matches,
rank pushing and exciting gameplay.
</p>

<br>

<button class="btn"
onclick="gameAlert('PUBG Mobile')">
View Game
</button>

</div>

</div>


<div class="game-card" data-type="open">

<img src="https://images.unsplash.com/photo-1605899435973-ca2d1a8861cf?auto=format&fit=crop&w=900&q=80">

<div class="game-info">

<span class="game-tag">
OPEN WORLD
</span>

<h3>GTA V</h3>

<p>
Explore a huge open world with cars,
missions, characters and action.
</p>

<br>

<button class="btn"
onclick="gameAlert('GTA V')">
View Game
</button>

</div>

</div>


<div class="game-card" data-type="racing">

<img src="https://images.unsplash.com/photo-1503736334956-4c8f8e92946d?auto=format&fit=crop&w=900&q=80">

<div class="game-info">

<span class="game-tag">
RACING
</span>

<h3>Forza Horizon 5</h3>

<p>
Experience fast cars, open-world racing
and amazing driving challenges.
</p>

<br>

<button class="btn"
onclick="gameAlert('Forza Horizon 5')">
View Game
</button>

</div>

</div>


<div class="game-card" data-type="open">

<img src="https://images.unsplash.com/photo-1612287230202-1ff1d85d1bdf?auto=format&fit=crop&w=900&q=80">

<div class="game-info">

<span class="game-tag">
SURVIVAL
</span>

<h3>Minecraft</h3>

<p>
Build, explore, survive and create
your own amazing world.
</p>

<br>

<button class="btn"
onclick="gameAlert('Minecraft')">
View Game
</button>

</div>

</div>


<div class="game-card" data-type="open">

<img src="https://images.unsplash.com/photo-1598550476439-6847785fcea6?auto=format&fit=crop&w=900&q=80">

<div class="game-info">

<span class="game-tag">
ACTION
</span>

<h3>Assassin's Creed</h3>

<p>
Explore historical worlds, combat enemies
and complete epic missions.
</p>

<br>

<button class="btn"
onclick="gameAlert('Assassin’s Creed')">
View Game
</button>

</div>

</div>


<div class="game-card" data-type="open">

<img src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?auto=format&fit=crop&w=900&q=80">

<div class="game-info">

<span class="game-tag">
ACTION
</span>

<h3>Project IGI</h3>

<p>
Classic tactical action gameplay with
missions and challenging combat.
</p>

<br>

<button class="btn"
onclick="gameAlert('Project IGI')">
View Game
</button>

</div>

</div>


</div>

</div>

</section>


<!-- =========================
     NEWS
========================= -->

<section class="news" id="news">

<div class="container">

<div class="title">

<h2>🔥 Gaming News</h2>

<p>
Latest gaming updates and stories
</p>

</div>


<div class="search">

<input
type="text"
id="search"
placeholder="Search gaming..."
onkeyup="searchNews()">

<button>🔍</button>

</div>


<div class="news-grid">


<div class="news-card">

<img src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?auto=format&fit=crop&w=900&q=80">

<div class="news-content">

<span class="game-tag">
GAMING
</span>

<h3>
The Future of Gaming
</h3>

<p>
Discover how modern gaming technology
is changing the gaming experience.
</p>

</div>

</div>


<div class="news-card">

<img src="https://images.unsplash.com/photo-1593305841991-05c297ba4575?auto=format&fit=crop&w=900&q=80">

<div class="news-content">

<span class="game-tag">
PC GAMING
</span>

<h3>
Ultimate Gaming Setup
</h3>

<p>
Learn about gaming PCs, monitors,
keyboards and gaming accessories.
</p>

</div>

</div>


<div class="news-card">

<img src="https://images.unsplash.com/photo-1542751371-adc38448a05e?auto=format&fit=crop&w=900&q=80">

<div class="news-content">

<span class="game-tag">
ESPORTS
</span>

<h3>
Competitive Gaming
</h3>

<p>
Follow esports, tournaments, teams
and competitive gaming.
</p>

</div>

</div>


</div>

</div>

</section>


<!-- =========================
     VIDEOS
========================= -->

<section id="videos">

<div class="container">

<div class="title">

<h2>▶️ Gaming Videos</h2>

<p>
Watch gaming content
</p>

</div>


<div class="video-grid">

<div class="video">

<iframe
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
allowfullscreen>
</iframe>

<h3>Gaming Video #1</h3>

</div>


<div class="video">

<iframe
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
allowfullscreen>
</iframe>

<h3>Gaming Video #2</h3>

</div>

</div>

</div>

</section>


<!-- =========================
     ABOUT
========================= -->

<section class="about" id="about">

<div class="container">

<div class="title">

<h2>🔥 About Saqib Gaming</h2>

</div>

<p>

Welcome to Saqib Gaming 2.5.
This website is made for gamers who love
PUBG Mobile, GTA V, Minecraft, Forza Horizon 5,
Assassin's Creed, Project IGI and many other games.

Here you can find gaming news, gameplay,
guides, tips, updates and gaming content.

</p>

</div>

</section>


<!-- =========================
     CONTACT
========================= -->

<section id="contact">

<div class="container">

<div class="title">

<h2>📩 Contact</h2>

<p>
Send us your message
</p>

</div>


<div class="contact-form">

<input
type="text"
id="name"
placeholder="Your Name">

<input
type="email"
id="email"
placeholder="Your Email">

<textarea
id="message"
placeholder="Your Message">
</textarea>

<button
class="btn"
onclick="sendMessage()">

Send Message

</button>

</div>

</div>

</section>


<!-- =========================
     FOOTER
========================= -->

<footer>

<div class="footer-logo">

SAQIB <span>GAMING 2.5</span>

</div>

<p>
© 2026 Saqib Gaming 2.5 — All Rights Reserved.
</p>

<div class="social">

<a href="#">YouTube</a>
<a href="#">Telegram</a>
<a href="#">Instagram</a>

</div>

</footer>


<!-- =========================
     JAVASCRIPT
========================= -->

<script>

/* MOBILE MENU */

function toggleMenu(){

    document
    .getElementById("nav")
    .classList
    .toggle("show");

}


/* GAME FILTER */

function filterGames(type, element){

    const games =
    document.querySelectorAll(".game-card");

    document
    .querySelectorAll(".category")
    .forEach(btn => {

        btn.classList.remove("active");

    });

    element.classList.add("active");


    games.forEach(game => {

        if(type === "all"){

            game.style.display = "block";

        }

        else if(game.dataset.type === type){

            game.style.display = "block";

        }

        else{

            game.style.display = "none";

        }

    });

}


/* GAME BUTTON */

function gameAlert(game){

    alert(
        "🎮 " +
        game +
        "\\n\\nGame page coming soon!"
    );

}


/* SEARCH NEWS */

function searchNews(){

    const value =
    document
    .getElementById("search")
    .value
    .toLowerCase();

    const cards =
    document.querySelectorAll(".news-card");


    cards.forEach(card => {

        const text =
        card.innerText.toLowerCase();

        if(text.includes(value)){

            card.style.display = "block";

        }

        else{

            card.style.display = "none";

        }

    });

}


/* CONTACT FORM */

function sendMessage(){

    const name =
    document.getElementById("name").value;

    const email =
    document.getElementById("email").value;

    const message =
    document.getElementById("message").value;


    if(
        name === "" ||
        email === "" ||
        message === ""
    ){

        alert(
            "⚠️ Please fill all fields."
        );

        return;

    }


    alert(
        "✅ Thanks " +
        name +
        "! Your message has been received."
    );


    document.getElementById("name").value="";
    document.getElementById("email").value="";
    document.getElementById("message").value="";

}

</script>

</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
1619KB
Transfer Size
8084KB
Content Size
144.0ms
Dom Content Loaded
696.0ms
First Paint
2,770.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