Kode HTML

Jasa Dokumen

Laman ini berisi berbagai informasi dan layanan yang dapat membantu Anda. Silakan pilih informasi yang ingin Anda lihat.

• Baris Informasi 1
• Baris Informasi 2
• Baris Informasi 3
• Baris Informasi 4
• Baris Informasi 5

Informasi tambahan dapat ditulis di bagian ini. Anda juga dapat menambahkan link, penjelasan, informasi layanan, atau keterangan lainnya. 

 

=============================================

 

<!-- =========================================================
     TEMPLATE KONTEN PREMIUM
     Google Sites / Blogger / Blogspot
     Dengan Slide Up + Hover Zoom
     ========================================================= -->

<div class="konten-template">

<style>

/* =========================================================
   PENGATURAN DASAR
   ========================================================= */

.konten-template{
    width:100%;
    max-width:900px;
    margin:0 auto;
    padding:20px 16px 30px;
    font-family:Arial, Helvetica, sans-serif;
    color:inherit;
    box-sizing:border-box;
}

.konten-template *{
    box-sizing:border-box;
}


/* =========================================================
   GAMBAR
   ========================================================= */

.kt-gambar{
    width:min(100%, 650px);

    aspect-ratio:1 / 1;

    margin:0 auto 25px;

    overflow:hidden;

    border-radius:16px;

    opacity:0;

    transform:translateY(60px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.22,1,.36,1);

    cursor:pointer;
}


/* =========================================================
   GAMBAR SAAT MASUK VIEWPORT
   ========================================================= */

.kt-gambar.muncul{

    opacity:1;

    transform:translateY(0);

}


/* =========================================================
   GAMBAR UTAMA
   ========================================================= */

.kt-gambar img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    /*
       Zoom normal
    */

    transform:scale(1);

    /*
       Transisi zoom dibuat halus
    */

    transition:
        transform .6s cubic-bezier(.22,1,.36,1);

}


/* =========================================================
   EFEK ZOOM SAAT KURSOR DI ATAS GAMBAR
   ========================================================= */

.kt-gambar:hover img{

    transform:scale(1.06);

}


/* =========================================================
   JUDUL
   ========================================================= */

.kt-judul{

    margin:0 0 20px;

    font-size:clamp(28px, 4vw, 42px);

    line-height:1.15;

    font-weight:700;

    color:#08758c;

    text-decoration:underline;

}


/* =========================================================
   DESKRIPSI
   ========================================================= */

.kt-deskripsi{

    font-size:clamp(16px, 2vw, 19px);

    line-height:1.75;

    margin:0 0 22px;

    color:inherit;

}


/* =========================================================
   DAFTAR / BARIS
   ========================================================= */

.kt-daftar{

    margin:0 0 25px;

    padding-left:22px;

}

.kt-daftar li{

    margin-bottom:15px;

    font-size:clamp(16px, 2vw, 18px);

    line-height:1.5;

}

.kt-daftar a{

    color:#08758c;

    text-decoration:underline;

    transition:.25s;

}

.kt-daftar a:hover{

    color:#e53935;

}


/* =========================================================
   DESKRIPSI AKHIR
   ========================================================= */

.kt-deskripsi-akhir{

    margin-top:25px;

    padding:10px 20px;

    font-size:clamp(16px, 2vw, 18px);

    line-height:1.7;

    color:inherit;

}


/* =========================================================
   RESPONSIVE HP
   ========================================================= */

@media(max-width:600px){

    .konten-template{

        padding:12px 12px 25px;

    }

    .kt-gambar{

        width:100%;

        margin-bottom:20px;

        border-radius:12px;

    }

    .kt-judul{

        margin-bottom:16px;

    }

    .kt-deskripsi{

        line-height:1.7;

    }

    .kt-daftar{

        padding-left:20px;

    }

    .kt-daftar li{

        margin-bottom:13px;

    }

}


/* =========================================================
   PENGHEMATAN ANIMASI
   ========================================================= */

@media(prefers-reduced-motion:reduce){

    .kt-gambar{

        opacity:1;

        transform:none;

        transition:none;

    }

    .kt-gambar img{

        transition:none;

    }

}


/* =========================================================
   PERANGKAT YANG TIDAK MEMILIKI KURSOR
   Misalnya HP / Tablet
   Zoom hover tidak digunakan.
   ========================================================= */

@media(hover:none){

    .kt-gambar:hover img{

        transform:none;

    }

}

</style>


<!-- =========================================================
     GAMBAR
     
     GANTI LINK GAMBAR DI SINI
     ========================================================= -->

<div class="kt-gambar">

    <img
        src="GANTI-DENGAN-LINK-GAMBAR-ANDA"
        alt="Ganti dengan deskripsi gambar"
    >

</div>


<!-- =========================================================
     JUDUL
     ========================================================= -->

<h2 class="kt-judul">

    Jasa Dokumen

</h2>


<!-- =========================================================
     DESKRIPSI AWAL
     ========================================================= -->

<div class="kt-deskripsi">

    Laman ini berisi berbagai informasi dan layanan yang
    dapat membantu Anda. Silakan pilih informasi yang
    ingin Anda lihat.

</div>


<!-- =========================================================
     DAFTAR BARIS
     ========================================================= -->

<ul class="kt-daftar">

    <li>

        <a
            href="LINK-BARIS-1"
            target="_blank"
            rel="noopener">

            Baris Informasi 1

        </a>

    </li>


    <li>

        <a
            href="LINK-BARIS-2"
            target="_blank"
            rel="noopener">

            Baris Informasi 2

        </a>

    </li>


    <li>

        <a
            href="LINK-BARIS-3"
            target="_blank"
            rel="noopener">

            Baris Informasi 3

        </a>

    </li>


    <li>

        <a
            href="LINK-BARIS-4"
            target="_blank"
            rel="noopener">

            Baris Informasi 4

        </a>

    </li>


    <li>

        <a
            href="LINK-BARIS-5"
            target="_blank"
            rel="noopener">

            Baris Informasi 5

        </a>

    </li>

</ul>


<!-- =========================================================
     DESKRIPSI AKHIR
     ========================================================= -->

<div class="kt-deskripsi-akhir">

    Informasi tambahan dapat ditulis di bagian ini.
    Anda juga dapat menambahkan link, penjelasan,
    informasi layanan, atau keterangan lainnya.

</div>


<!-- =========================================================
     JAVASCRIPT
     Slide Up saat masuk viewport
     ========================================================= -->

<script>

(function(){

    const gambar =
        document.querySelector(
            '.konten-template .kt-gambar'
        );

    if(!gambar) return;


    const observer =
        new IntersectionObserver(

            function(entries){

                entries.forEach(function(entry){

                    if(entry.isIntersecting){

                        gambar.classList.add('muncul');

                        observer.unobserve(gambar);

                    }

                });

            },

            {
                threshold:0.15
            }

        );


    observer.observe(gambar);

})();

</script>

</div> 

 

============================================= 
EDIT HTML