Custome Page

Ubah tampilan aplikasimu biar makin keren. Mulai dari homepage saja dulu

<!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>
<a data-offline=”true” data-params=”” data-state=”my-account”></a>
</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>
<a data-offline=”false” data-params=”value_id:17562″ data-state=”inbox-list”> </a>
</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>
<a data-offline=”true” data-params=”value_id:17563″ data-state=”push-list”> </a>
</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>
<a data-offline=”true” data-params=”value_id:17563″ data-state=”push-list”> </a>
</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>
<a data-offline=”false” data-params=”value_id:17487″ data-state=”discount-list”> </a>
</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>
<a data-offline=”false” data-params=”value_id:17562″ data-state=”inbox-list”> </a>
</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>
<a data-offline=”false” data-params=”value_id:17562″ data-state=”inbox-list”> </a>
</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>
<a data-offline=”false” data-params=”value_id:17562″ data-state=”inbox-list”> </a>
</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>
<a data-offline=”false” data-params=”value_id:17562″ data-state=”inbox-list”> </a>
</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>
<a data-offline=”false” data-params=”value_id:17562″ data-state=”inbox-list”> </a>
</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>

ADD YOUR COMMENT