HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
519x220
161 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="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Homepage Kampus Modern</title>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<style>

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

body{
    background:#f5f7fb;
    color:#222;
}

/* NAVBAR */

.navbar{
    width:100%;
    background:#003366;
    padding:15px 8%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:sticky;
    top:0;
    z-index:999;
}

.logo{
    color:#fff;
    font-size:28px;
    font-weight:700;
}

.menu{
    display:flex;
    gap:25px;
}

.menu a{
    color:#fff;
    text-decoration:none;
    font-weight:500;
    transition:.3s;
}

.menu a:hover{
    color:#ffd700;
}

/* HERO */

.hero{
    height:85vh;
    background:
    linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),
    url('https://images.unsplash.com/photo-1562774053-701939374585?q=80&w=1400');
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#fff;
    padding:20px;
}

.hero-content h1{
    font-size:58px;
    margin-bottom:20px;
}

.hero-content p{
    font-size:20px;
    margin-bottom:30px;
}

.hero-content button{
    padding:15px 35px;
    border:none;
    background:#ffd700;
    color:#000;
    font-size:18px;
    border-radius:8px;
    cursor:pointer;
    font-weight:600;
}

/* SECTION */

.section{
    padding:70px 8%;
}

.section-title{
    font-size:36px;
    margin-bottom:40px;
    color:#003366;
    position:relative;
}

.section-title::after{
    content:'';
    width:80px;
    height:4px;
    background:#ffd700;
    position:absolute;
    left:0;
    bottom:-10px;
}

/* PENGUMUMAN */

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:30px;
}

.card{
    background:#fff;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
    transition:.3s;
}

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

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

.card-content{
    padding:25px;
}

.badge{
    display:inline-block;
    background:#003366;
    color:#fff;
    padding:5px 15px;
    border-radius:20px;
    font-size:13px;
    margin-bottom:15px;
}

.card-content h3{
    font-size:22px;
    margin-bottom:15px;
}

.card-content p{
    color:#666;
    line-height:1.7;
}

/* STATISTIK */

.stats{
    background:#003366;
    color:#fff;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:30px;
    text-align:center;
}

.stat-box h2{
    font-size:50px;
    color:#ffd700;
}

.stat-box p{
    font-size:18px;
}

/* FOOTER */

.footer{
    background:#001a33;
    color:#fff;
    padding:50px 8%;
    text-align:center;
}

.footer p{
    margin-top:10px;
    color:#ccc;
}

/* RESPONSIVE */

@media(max-width:768px){

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

    .menu{
        display:none;
    }

}

</style>
</head>
<body>

<!-- NAVBAR -->

<nav class="navbar">

    <div class="logo">
        STISIPOL
    </div>

    <div class="menu">
        <a href="#">Home</a>
        <a href="#">Profil</a>
        <a href="#">Pengumuman</a>
        <a href="#">Berita</a>
        <a href="#">Kontak</a>
    </div>

</nav>

<!-- HERO -->

<section class="hero">

    <div class="hero-content">

        <h1>Kampus Modern & Inovatif</h1>

        <p>
            Membangun Generasi Unggul, Kreatif dan Berdaya Saing Global
        </p>

        <button>Daftar Sekarang</button>

    </div>

</section>

<!-- PENGUMUMAN -->

<section class="section">

    <h2 class="section-title">
        Pengumuman Kampus
    </h2>

    <div class="grid">

        <div class="card">

            <img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?q=80&w=1200">

            <div class="card-content">

                <span class="badge">
                    Pengumuman
                </span>

                <h3>
                    Jadwal Ujian Semester Genap 2026
                </h3>

                <p>
                    Pelaksanaan ujian semester genap dimulai pada tanggal 20 Juni 2026.
                </p>

            </div>

        </div>

        <div class="card">

            <img src="https://images.unsplash.com/photo-1523050854058-8df90110c9f1?q=80&w=1200">

            <div class="card-content">

                <span class="badge">
                    Akademik
                </span>

                <h3>
                    Pembukaan Pendaftaran Mahasiswa Baru
                </h3>

                <p>
                    Pendaftaran mahasiswa baru tahun akademik 2026/2027 telah dibuka.
                </p>

            </div>

        </div>

        <div class="card">

            <img src="https://images.unsplash.com/photo-1541339907198-e08756dedf3f?q=80&w=1200">

            <div class="card-content">

                <span class="badge">
                    Event
                </span>

                <h3>
                    Seminar Nasional Digitalisasi Pendidikan
                </h3>

                <p>
                    Seminar nasional akan menghadirkan pembicara dari berbagai universitas.
                </p>

            </div>

        </div>

    </div>

</section>

<!-- STATISTIK -->

<section class="section stats">

    <div class="stats-grid">

        <div class="stat-box">
            <h2>5000+</h2>
            <p>Mahasiswa Aktif</p>
        </div>

        <div class="stat-box">
            <h2>150+</h2>
            <p>Dosen Profesional</p>
        </div>

        <div class="stat-box">
            <h2>20+</h2>
            <p>Program Studi</p>
        </div>

        <div class="stat-box">
            <h2>95%</h2>
            <p>Lulusan Bekerja</p>
        </div>

    </div>

</section>

<!-- FOOTER -->

<footer class="footer">

    <h2>STISIPOL Candradimuka</h2>

    <p>
        Kampus Modern untuk Masa Depan Gemilang
    </p>

</footer>

</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
686KB
Transfer Size
690KB
Content Size
224.0ms
Dom Content Loaded
392.0ms
First Paint
391.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