carousel
unknown
plain_text
a month ago
16 kB
1
Indexable
Never
<div id="carouselHome" class="carousel slide pointer-event" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselHome" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselHome" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselHome" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img th:src="@{/assets/images/beranda/banner-01.png}" class="d-block w-100" alt="...">
<div class="carousel-text d-block">
<h1>Siapkan!!<br>Masa Depan Anda</h1>
<div class="wrapper-p-carousel">
<p class="d-none d-sm-block">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam cursus orci nisl, lectus id fermentum lobortis laoreet. Sollicitudin sapien, scelerisque ullamcorper amet in est. Velit lorem euismod commodo sit nec id velit. Pellentesque faucibus ut nisl, id sed interdum a. </p>
</div>
<a class="nav-text" th:href="@{/daftar-produk?type=kpr}">Baca Selengkapnya</a>
</div>
</div>
<div class="carousel-item">
<img th:src="@{/assets/images/beranda/banner-01.png}" class="d-block w-100" alt="...">
<div class="carousel-text d-block">
<h1>Siapkan!!<br>Masa Depan Anda</h1>
<div class="wrapper-p-carousel">
<p class="d-none d-sm-block">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam cursus orci nisl, lectus id fermentum lobortis laoreet. Sollicitudin sapien, scelerisque ullamcorper amet in est. Velit lorem euismod commodo sit nec id velit. Pellentesque faucibus ut nisl, id sed interdum a. </p>
</div>
<a class="nav-text" th:href="@{/daftar-produk?type=kmg}">Baca Selengkapnya</a>
</div>
</div>
<div class="carousel-item">
<img th:src="@{/assets/images/beranda/banner-01.png}" class="d-block w-100" alt="...">
<div class="carousel-text d-block">
<h1>Siapkan!!<br>Masa Depan Anda</h1>
<div class="wrapper-p-carousel">
<p class="d-none d-sm-block">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam cursus orci nisl, lectus id fermentum lobortis laoreet. Sollicitudin sapien, scelerisque ullamcorper amet in est. Velit lorem euismod commodo sit nec id velit. Pellentesque faucibus ut nisl, id sed interdum a. </p>
</p>
</div>
<a class="nav-text" th:href="@{/daftar-produk?type=mikro}">Baca Selengkapnya</a>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselHome" data-bs-slide="prev">
<span aria-hidden="true">
<img th:src="@{/assets/images/icons/previous.svg}" alt="" srcset="">
</span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselHome" data-bs-slide="next">
<span aria-hidden="true">
<img th:src="@{/assets/images/icons/next.svg}" alt="" srcset="">
</span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div id="switch-type" class="wrapper-switch wrapper-switch-konvensional d-block text-center">
<a class="btn btn-switch btn-switch-red" id="btn-switch-konvensional">Konvensional</a>
<a class="btn btn-switch btn-switch-white btn-switch-white-green" id="btn-switch-syariah">Syariah</a>
</div>
<div class="separator-motif">
</div>
<div class="container product-container">
<div id="product-container-konvensional" class="wrapper-card d-flex flex-column flex-md-row justify-content-between align-items-stretch grow">
<div class="card" id="card-home-kmg">
<img th:src="@{/assets/images/beranda/product-kmg.png}" class="card-img-jateng" alt="...">
<div class="card-body text-center">
<h5 class="card-title">KMG</h5>
<p class="card-text">Fasilitas Kredit yang diberikan kepada Pegawai Aktif/Pensiunan yang mempunyai penghasilan tetap untuk ...</p>
<a class="btn btn-card-red" style="width: 100%" th:href="@{daftar-produk?type=kmg}">Selengkapnya</a>
</div>
</div>
<div class="card" id="card-home-kpr">
<img th:src="@{/assets/images/beranda/product-kpr.png}" class="card-img-jateng" alt="...">
<div class="card-body text-center">
<h5 class="card-title">KPR</h5>
<p class="card-text">Fasilitas Kredit yang diberikan kepada perorangan untuk keperluan pembelian properti rumah tapak/rumah susun/ ...</p>
<a class="btn btn-card-red" style="width: 100%" th:href="@{daftar-produk?type=kpr}">Selengkapnya</a>
</div>
</div>
<div class="card" id="card-home-mikro">
<img th:src="@{/assets/images/beranda/product-mikro.png}" class="card-img-jateng" alt="...">
<div class="card-body text-center">
<h5 class="card-title">Mikro</h5>
<p class="card-text">Merupakan fasilitas kredit yang dapat digunakan baik untuk modal kerja, penambahan modal kerja maupun ...</p>
<a class="btn btn-card-red" style="width: 100%" th:href="@{daftar-produk?type=mikro}">Selengkapnya</a>
</div>
</div>
</div>
<div id="product-container-syariah" class="wrapper-card d-flex flex-column flex-md-row justify-content-between align-items-stretch grow">
<div class="card" id="card-home-kmg-ib">
<img th:src="@{/assets/images/beranda/product-kmg-ib.png}" class="card-img-jateng" alt="...">
<div class="card-body text-center">
<h5 class="card-title text-center">KMG iB</h5>
<p class="card-text">Fasilitas Kredit yang diberikan kepada Pegawai Aktif/Pensiunan yang mempunyai penghasilan tetap untuk ....</p>
<a class="btn btn-card-green" style="width: 100%" th:href="@{daftar-produk?type=kmg-ib}">Selengkapnya</a>
</div>
</div>
<div class="card" id="card-home-kpr-ib">
<img th:src="@{/assets/images/beranda/product-kpr-ib.png}" class="card-img-jateng" alt="...">
<div class="card-body text-center">
<h5 class="card-title text-center">KPR iB</h5>
<p class="card-text">Fasilitas Kredit yang diberikan kepada perorangan untuk keperluan pembelian properti rumah tapak/rumah susun/ ...</p>
<a class="btn btn-card-green" style="width: 100%" th:href="@{daftar-produk?type=kpr-ib}">Selengkapnya</a>
</div>
</div>
<div class="card" id="card-home-mikro-ib">
<img th:src="@{/assets/images/beranda/product-mikro-ib.png}" class="card-img-jateng" alt="...">
<div class="card-body">
<h5 class="card-title text-center">Mikro iB</h5>
<p class="card-text">Merupakan fasilitas kredit yang dapat digunakan baik untuk modal kerja, penambahan modal kerja maupun ...</p>
<a class="btn btn-card-green" style="width: 100%" th:href="@{daftar-produk?type=mikro-ib}">Selengkapnya</a>
</div>
</div>
</div>
</div>
<section class="about container">
<h2 class="text-center text-sm-start text-konvensional">Pengajuan Jadi Lebih Mudah dan Cepat</h2>
<p class="p-about">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam cursus orci nisl, lectus id fermentum lobortis laoreet. Sollicitudin sapien, scelerisque ullamcorper amet in est. Velit lorem euismod commodo sit nec id velit. Pellentesque faucibus ut nisl, id sed interdum a. . Velit lorem euismod commodo sit nec id velit. Pellentesque faucibus ut nisl, id sed interdum a. . Velit lorem euismod commodo sit nec id velit. Pellentesque faucibus ut nisl, id sed interdum a.
</p>
<div id="beranda-about" class="wrapper-card d-flex flex-column flex-md-row justify-content-between align-items-stretch mt-4">
<div class="card">
<img th:src="@{/assets/images/beranda/about-01.png}" class="card-img-about-jateng" alt="...">
<div class="card-body card-body-konvensional text-center">
<h5 class="card-title text-konvensional">Pilih Sesuai Kebutuhan Anda</h5>
<p class="card-text">Tentukan kebutuhan yang ingin anda pilih</p>
</div>
</div>
<div class="card">
<img th:src="@{/assets/images/beranda/about-02.png}" class="card-img-about-jateng" alt="...">
<div class="card-body card-body-konvensional text-center">
<h5 class="card-title text-konvensional">Baca Deskripsi Produk</h5>
<p class="card-text">Pahami kegunaan, peruntukan dan jenis produk yang akan dipilih</p>
</div>
</div>
<div class="card">
<img th:src="@{/assets/images/beranda/about-03.png}" class="card-img-about-jateng">
<div class="card-body card-body-konvensional text-center">
<h5 class="card-title text-konvensional">Syarat Ketentuan</h5>
<p class="card-text">Pastikan anda memahami dan memenehi setiap syarat dan ketentuan</p>
</div>
</div>
</div>
</section>
<section class="promo container">
<h2 class="text-center text-sm-start text-konvensional">Promo Bulan Ini</h2>
<div id="carouselPromo" class="carousel slide pointer-event mt-4" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselPromo" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselPromo" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselPromo" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img th:src="@{/assets/images/beranda/promo-01.png}" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img th:src="@{/assets/images/beranda/promo-01.png}" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img th:src="@{/assets/images/beranda/promo-01.png}" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselPromo" data-bs-slide="prev">
<span aria-hidden="true">
<img th:src="@{/assets/images/icons/previous.svg}" alt="" srcset="">
</span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselPromo" data-bs-slide="next">
<span aria-hidden="true">
<img th:src="@{/assets/images/icons/next.svg}" alt="" srcset="">
</span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
<section class="simulasi p-3">
<div class="header-simulasi text-center">
<h2 class="mt-2 text-konvensional">Simulasi Kebutuhan Anda</h2>
<p class="mt-2">Pilih produk pilihan sesuai kebutuhan untuk memulai menghitung simulasi pengajuan yang anda inginkan</p>
</div>
<div class="simulasi-body w-100">
<div class="wrap-simulasi container my-5 p-4 py-lg-5 p-lg-5">
<form action="">
<div class="row">
<div class="col-12 col-lg-4 col-md-4 col-sm-6">
<h5 class="">Pilih Jenis Produk</h5>
<select class="form-select" id="simulasi-produk" aria-label="">
<option value="" disabled selected>Pilih Produk</option>
<option th:each="item : ${produkList}" th:value="${item.id}" th:text="${item.nama}"></option>
</select>
</div>
</div>
<div class="row">
<div class="col-sm-5 order-first order-sm-0 kiri">
<h5 class="mt-5">Masukkan Estimasi Pegajuan Anda</h5>
<div class="mt-5">
<div class="mb-3">
<label for="simulasi-plafon" class="form-label">Plafon Kredit/Pembiayaan (Rp)</label>
<input type="text" class="form-control form-control-lg" id="simulasi-plafon" placeholder="0">
<div class="validator_message"></div>
</div>
</div>
<div class="mt-3 row">
<div class="mb-3 col">
<label for="simulasi-jangka-waktu" class="form-label">Jangka Waktu </label><br/>
<label style="margin-bottom: 15px;">Kredit/Pembiayaan</label>
<input type="text" maxlength="2" class="form-control form-control-lg" id="simulasi-jangka-waktu" placeholder="0" style="padding-right: 50px;">
<span class="form-control-desc">Bulan</span>
<div class="validator_message"></div>
</div>
<div class="mb-3 col">
<label for="simulasi-bunga" class="form-label">Bunga/Margin </label><br/>
<label style="margin-bottom: 15px;">(Tahun %)</label>
<input type="text" class="form-control form-control-lg" id="simulasi-bunga" placeholder="0">
<div class="validator_message"></div>
</div>
</div>
<button class="mt-5 costume-button-simulasi btn-konvensional" id="btn-hitung-simulasi-home" type="button">Hitung Angsuran</button>
</div>
<div class="col-sm-2 d-none d-sm-block mx-auto"><div class="vl"></div></div>
<div class="col-sm-5 order-last order-lg-0 kanan">
<h5 class="mt-5">Melalui Estimasi yang Anda Masukkan, Maka Anda Akan Mendapatkan Angsuran :</h5>
<div class="mt-4">
<div class="mb-3">
<label for="simulasi-estimasi-angsuran" class="form-label">Estimasi Angsuran Per Bulan (Rp)</label>
<input type="text" class="form-control form-control-lg" id="simulasi-estimasi-angsuran" placeholder="Estimasi Angsuran Per Bulan (Rp)" value="Rp. 0" disabled>
</div>
</div>
<div class="mt-3">
<div class="mb-3">
<label for="simulasi-estimasi-penghasilan" class="form-label">Estimasi Minimal Penghasilan (Rp)</label>
<input type="text" class="form-control form-control-lg" id="simulasi-estimasi-penghasilan" placeholder="Estimasi Minimal Penghasilan (Rp)" value="Rp. 0" disabled>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</section>Leave a Comment