HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
748x30
3.48 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>Portofolio Magang TKJ - Asrama Haji Banjarmasin</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    
    <style>
        :root {
            --primary: #046b46; /* Hijau Kemenag/Asrama Haji */
            --secondary: #0ea5e9;
            --dark: #1e293b;
            --light: #f8fafc;
        }

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

        body {
            background-color: var(--light);
            color: var(--dark);
            overflow-x: hidden;
        }

        /* Hero Section */
        .hero {
            height: 100vh;
            background: linear-gradient(rgba(4, 107, 70, 0.8), rgba(30, 41, 59, 0.9)), url('gambar-gedung-asrama.jpg') center/cover;
            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: 15px;
        }

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

        /* Section Global */
        section {
            padding: 80px 10%;
        }

        .section-title {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 50px;
            color: var(--primary);
            position: relative;
        }

        .section-title::after {
            content: '';
            width: 80px;
            height: 4px;
            background-color: var(--secondary);
            display: block;
            margin: 10px auto 0;
            border-radius: 2px;
        }

        /* Profil Instansi */
        .profil-container {
            display: flex;
            gap: 40px;
            align-items: center;
        }

        .profil-text {
            flex: 1;
            line-height: 1.8;
            text-align: justify;
        }

        .profil-img {
            flex: 1;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .profil-img img {
            width: 100%;
            height: auto;
            transition: transform 0.5s;
        }

        .profil-img:hover img {
            transform: scale(1.05);
        }

        /* Struktur & Tim */
        .cards-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
        }

        .card {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            text-align: center;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        }

        .card i {
            font-size: 3rem;
            color: var(--secondary);
            margin-bottom: 20px;
        }

        /* Galeri */
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }

        .gallery-item {
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            height: 250px;
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: 0.5s;
        }

        .gallery-overlay {
            position: absolute;
            bottom: -100%;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(transparent, rgba(4, 107, 70, 0.9));
            display: flex;
            align-items: flex-end;
            padding: 20px;
            color: white;
            transition: 0.5s;
        }

        .gallery-item:hover img {
            transform: scale(1.1);
        }

        .gallery-item:hover .gallery-overlay {
            bottom: 0;
        }

        footer {
            background: var(--dark);
            color: white;
            text-align: center;
            padding: 20px;
        }

        /* Responsiveness */
        @media (max-width: 768px) {
            .profil-container {
                flex-direction: column;
            }
            .hero h1 {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>

    <header class="hero" data-aos="fade-in" data-aos-duration="1500">
        <h1>Portofolio Praktek Kerja Lapangan</h1>
        [span_0](start_span)<p>Keterampilan TKJ dan Pemrograman Web MAN 2 Kota Banjarmasin[span_0](end_span)</p>
        [span_1](start_span)<p><strong>Lokasi:</strong> Asrama Haji Kelas 1 Banjarmasin[span_1](end_span)</p>
        <br>
        [span_2](start_span)<p><i>Disusun oleh Tim Siswa Magang (M. Arifin Ilham, M. Royyan Nur Rochman, dkk)</i>[span_2](end_span)</p>
    </header>

    <section id="profil">
        <h2 class="section-title" data-aos="fade-up">Kisah Tempat Magang</h2>
        <div class="profil-container">
            <div class="profil-text" data-aos="fade-right">
                [span_3](start_span)<p>Asrama Haji Embarkasi Banjarmasin didirikan pada 21 November 1984 di atas tanah milik Pemerintah Provinsi Kalimantan Selatan[span_3](end_span). [span_4](start_span)Pada awalnya, asrama ini berfungsi sebagai tempat transit bagi jemaah haji sebelum diberangkatkan melalui embarkasi lain[span_4](end_span).</p>
                <br>
                [span_5](start_span)<p>Seiring berjalannya waktu dan meningkatnya kebutuhan, pada tahun 2004 Asrama Haji Embarkasi Banjarmasin resmi menjadi Unit Pelaksana Teknis (UPT)[span_5](end_span). [span_6](start_span)Saat ini, asrama dilengkapi dengan berbagai fasilitas modern untuk memberikan pelayanan prima kepada jamaah haji dan pengguna jasa lainnya[span_6](end_span).</p>
            </div>
            <div class="profil-img" data-aos="fade-left">
                <img src="foto-gedung.jpg" alt="Foto Asrama Haji (Halaman 3 PDF Canva)">
            </div>
        </div>
    </section>

    <section id="struktur" style="background-color: #f1f5f9;">
        <h2 class="section-title" data-aos="fade-up">Struktur Bimbingan</h2>
        <div class="cards-container">
            <div class="card" data-aos="zoom-in" data-aos-delay="100">
                <i class="fas fa-user-tie"></i>
                <h3>Dr. H. Haris Fadillah, M.H.I</h3>
                [span_7](start_span)<p>Kepala Asrama Haji Kelas I Banjarmasin[span_7](end_span)</p>
            </div>
            <div class="card" data-aos="zoom-in" data-aos-delay="200">
                <i class="fas fa-chalkboard-teacher"></i>
                <h3>Zainal Muttaqien, S.Ag., M.Pd.I</h3>
                [span_8](start_span)<p>Guru Pembimbing MAN 2 Kota Banjarmasin[span_8](end_span)</p>
            </div>
            <div class="card" data-aos="zoom-in" data-aos-delay="300">
                <i class="fas fa-laptop-code"></i>
                <h3>Muhammad Amin S.Kom</h3>
                [span_9](start_span)[span_10](start_span)<p>Pembimbing Tempat Magang & Pranata Komputer[span_9](end_span)[span_10](end_span)</p>
            </div>
        </div>
    </section>

    <section id="cerita-magang">
        <h2 class="section-title" data-aos="fade-up">Cerita & Tugas Magang</h2>
        <div class="cards-container">
            <div class="card" data-aos="flip-left" data-aos-delay="100">
                <i class="fas fa-network-wired"></i>
                <h3>Jaringan & Infrastruktur IT</h3>
                [span_11](start_span)<p>Melakukan pemetaan kabel LAN, crimping kabel di Gedung Marwah lantai 1 dan 2, serta instalasi perangkat CCTV di area asrama haji[span_11](end_span).</p>
            </div>
            <div class="card" data-aos="flip-left" data-aos-delay="200">
                <i class="fas fa-id-badge"></i>
                <h3>Desain & Pelayanan</h3>
                [span_12](start_span)<p>Membuat desain dan mencetak ID Card untuk penyambutan Menteri Haji dan Umrah, membuat brosur, serta bertugas di meja resepsionis[span_12](end_span).</p>
            </div>
            <div class="card" data-aos="flip-left" data-aos-delay="300">
                <i class="fas fa-users-cog"></i>
                <h3>Operasional Lapangan</h3>
                [span_13](start_span)<p>Mendampingi operasional petugas haji, petugas bea cukai, tim sound system, dan penyambutan kedatangan jamaah haji[span_13](end_span).</p>
            </div>
            <div class="card" data-aos="flip-left" data-aos-delay="400">
                <i class="fas fa-cogs"></i>
                <h3>Utilitas Gedung</h3>
                [span_14](start_span)<p>Mempelajari cara kerja mesin genset, pompa air sentrifugal, sistem pengolahan air bersih (water treatment), dan penggunaan APAR[span_14](end_span).</p>
            </div>
        </div>
    </section>

    <section id="galeri" style="background-color: #f1f5f9;">
        <h2 class="section-title" data-aos="fade-up">Galeri Kegiatan</h2>
        <div class="gallery-grid">
            <div class="gallery-item" data-aos="zoom-in-up" data-aos-delay="100">
                <img src="foto-crimping.jpg" alt="Kegiatan Crimping Kabel (Halaman 7 PDF)">
                <div class="gallery-overlay">
                    [span_15](start_span)<h4>Praktik Crimping LAN[span_15](end_span)</h4>
                </div>
            </div>
            <div class="gallery-item" data-aos="zoom-in-up" data-aos-delay="200">
                <img src="foto-resepsionis.jpg" alt="Bertugas di Resepsionis (Halaman 9 PDF)">
                <div class="gallery-overlay">
                    [span_16](start_span)<h4>Pelayanan Tamu & Resepsionis[span_16](end_span)</h4>
                </div>
            </div>
            <div class="gallery-item" data-aos="zoom-in-up" data-aos-delay="300">
                <img src="foto-podcast.jpg" alt="Mengelola Podcast/Dokumentasi (Halaman 9 PDF)">
                <div class="gallery-overlay">
                    [span_17](start_span)<h4>Operasional Broadcasting[span_17](end_span)</h4>
                </div>
            </div>
            <div class="gallery-item" data-aos="zoom-in-up" data-aos-delay="400">
                <img src="foto-bersama.jpg" alt="Penyerahan Laporan (Halaman 14 PDF)">
                <div class="gallery-overlay">
                    [span_18](start_span)<h4>Penyerahan Laporan Magang[span_18](end_span)</h4>
                </div>
            </div>
        </div>
    </section>

    <footer>
        <p>&copy; 2026 Tim Magang TKJ MAN 2 Kota Banjarmasin. [span_19](start_span)Laporan disusun guna memenuhi kelengkapan bukti belajar[span_19](end_span).</p>
    </footer>

    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
        // Inisialisasi animasi
        AOS.init({
            once: true, // Animasi hanya berjalan sekali saat di-scroll
            offset: 100 // Jarak trigger animasi dari bawah layar
        });
    </script>
</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
202KB
Transfer Size
319KB
Content Size
300.0ms
Dom Content Loaded
300.0ms
First Paint
412.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