Buat homepagemu lebih menarik. Silakan berkreasi dengan memodifikasi source code yang ada di bawah ini.
Note:
- Kopi script di bawah ini dan paste ke dalam teks editor, semisal notepad, dll.
- Ubah link gambar dan link menu sesuai dengan kebutuhan.
- Setelah selesai diedit, masuk ke editor JustApp.
- Jika menggunakan Custome Page - Source Code, jangan lupa ubah frame heightnya biasanya 50% (satuannya percentase).
- Jika tampilan hasil source code di bawah ini tidak responsif, gunakan modul Source Code.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
body {
font-family: 'Segoe UI',sans-serif;
}
#carouselExampleCaptions {
border: 0 !important;
max-width: 90%;
margin-left: 5%;
}
.carousel-indicators li {
background-color: #389068;
height: 5px;
}
.menus {
width: 100% !important;
margin: -90px 0 0 0 !important;
padding: 0 !important;
background-color: #4f4f4f;
border-radius: 10px;
}
.menus div {
width: 20% !important;
margin: 10px 2% 5px 2% !important;
display: inline-block;
padding: 0 !important;
}
.carousel-item img {
border-radius: 10px;
}
.menus img {
background-color: #fff;
padding: 5px;
border-radius: 10%;
}
.menus h2,
.menus p {
text-align: center;
color: #fff;
font-size: 3vw;
}
.menus a:hover {
text-decoration-line: none;
}
.menus a {
text-decoration-line: none;
color: #fff;
}
.menus .satu img {
width: 80%;
height: auto;
}
</style>
</head>
<body>
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.telkomsel.com/sites/default/files/box_media/left/desktop/800Artboard%201%20copy%402x%20%281%29.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://i.ytimg.com/vi/kfo7dTkDCyM/maxresdefault.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="menus">
<h1 style="height: 100px;"></h1>
<div class="satu">
<p><a data-offline="true" data-params="value_id:71873" data-state="catalog-category-list"><img alt="basket.png" src="https://www.flaticon.com/svg/static/icons/svg/2898/2898378.svg" /></a></p>
<h2><a data-offline="true" data-params="value_id:71873" data-state="catalog-category-list">Produk</a></h2>
</div>
<div class="satu">
<p><a data-offline="true" data-params="" data-state="my-account"><img alt="discount.png" src="https://www.flaticon.com/svg/static/icons/svg/1077/1077012.svg" /></a></p>
<h2><a data-offline="true" data-params="" data-state="my-account">Akun Saya</a></h2>
</div>
<div class="satu">
<p><a data-offline="false" data-params="value_id:17562" data-state="inbox-list"><img alt="filled-chat.png" style="width: 100%; height: auto;" src="https://nomorcuantik.com/images/nomor-cantik-simpati.png" /></a></p>
<h2><a data-offline="false" data-params="value_id:17562" data-state="inbox-list">Simpati</a></h2>
</div>
<div class="satu">
<p><a data-offline="true" data-params="value_id:17563" data-state="push-list"><img alt="info-popup.png" style="width: 100%; height: auto;" src="https://nomorcuantik.com/images/nomor-cantik-loop.png" /></a></p>
<h2><a data-offline="true" data-params="value_id:17563" data-state="push-list">Loop</a></h2>
</div>
<div>
<p><a data-offline="false" data-params="value_id:7001" data-state="mcommerce-category-list"><img alt="basket.png" style="width: 100%; height: auto;" src="https://nomorcuantik.com/images/nomor-cantik-as.png" /></a></p>
<h2><a data-offline="false" data-params="value_id:7001" data-state="mcommerce-category-list">Kartu As</a></h2>
</div>
<div>
<p><a data-offline="true" data-params="value_id:17563" data-state="push-list"><img alt="info-popup.png" style="width: 100%; height: auto;" src="https://nomorcuantik.com/images/nomor-cantik-im3.png" /></a></p>
<h2><a data-offline="true" data-params="value_id:17563" data-state="push-list">Indosat</a></h2>
</div>
<div>
<p><a data-offline="false" data-params="value_id:17487" data-state="discount-list"><img alt="discount.png" style="max-width: 100%; height: auto;" src="https://nomorcuantik.com/images/nomor-cantik-matrix.png" /></a></p>
<h2><a data-offline="false" data-params="value_id:17487" data-state="discount-list">Matrix</a></h2>
</div>
<div>
<p><a data-offline="false" data-params="value_id:17562" data-state="inbox-list"><img alt="filled-chat.png" style="width: 100%; height: auto;" src="https://nomorcuantik.com/images/nomor-cantik-xl.png" /></a></p>
<h2><a data-offline="false" data-params="value_id:17562" data-state="inbox-list">XL</a></h2>
</div>
<div>
<p><a data-offline="false" data-params="value_id:17562" data-state="inbox-list"><img alt="filled-chat.png" style="width: 100%; height: auto;" src="https://nomorcuantik.com/images/nomor-cantik-xlprioritas.png" /></a></p>
<h2><a data-offline="false" data-params="value_id:17562" data-state="inbox-list">XL Prioritas</a></h2>
</div>
<div>
<p><a data-offline="false" data-params="value_id:17562" data-state="inbox-list"><img alt="filled-chat.png" style="width: 100%; height: auto;" src="https://nomorcuantik.com/images/nomor-cantik-axis.png" /></a></p>
<h2><a data-offline="false" data-params="value_id:17562" data-state="inbox-list">Axis</a></h2>
</div>
<div>
<p><a data-offline="false" data-params="value_id:17562" data-state="inbox-list"><img alt="filled-chat.png" style="width: 100%; height: auto;" src="https://nomorcuantik.com/images/nomor-cantik-three.png" /></a></p>
<h2><a data-offline="false" data-params="value_id:17562" data-state="inbox-list">Tri</a></h2>
</div>
<div>
<p><a data-offline="false" data-params="value_id:17562" data-state="inbox-list"><img alt="filled-chat.png" style="width: 100%; height: auto;" src="https://nomorcuantik.com/images/nomor-cantik-smartfren.png" /></a></p>
<h2><a data-offline="false" data-params="value_id:17562" data-state="inbox-list">Smartfren</a></h2>
</div>
</div>
<!-- Optional JavaScript -->
<!-- Popper.js first, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
</body>
</html>
Agar lebih mudah, simak dulu video di bawah ini.