<!
doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link
href="[Link]
rel="stylesheet" integrity="sha384-
T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>
body{
margin: 0;
padding: 0;
}
.navbar{
background-color: rgb(140, 8, 188);
}
.navbar-brand{
color: aliceblue;
font-weight: 700;
}
.carousel-inner{
border-radius: 40px;
}
.carousel-inner img{
height: 200px;
padding: 10px;
}
.button-topup{
height: 138px;
width: 90%;
background-color: rgb(140, 8, 188);
margin: auto;
border-radius: 10px;
box-shadow: 3px 2px 5px 1px #00000049 ;
padding: 5px;
}
.btp{
border: 0;
background-color: #00000000;
margin: auto;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-
serif;
color: aliceblue;
}
.btp img{
height: 50px;
border-radius: 5px;
box-shadow: 1px 2px 2px 1px #000000;
}
.btt2{
position: relative;
left: 7%;
}
.bt2 {
margin-top: 10px;
border: 0;
background: none;
color: #000000;
font-weight: 700;
}
.bt2 img{
height: 50px;
background: none;
border-radius: 0px;
padding: 8px;
}
.btp img{
background-color: aliceblue;
padding: 5px;
}
.po{
position: relative;
bottom: 10px;
display: flex;
}
.pu{
color: aliceblue;
}
.pu span{
position: absolute;
left: 70%;
top: 33.5%;
font-weight: 600;
}
.pu p{
margin-top: 10px;
font-weight: 700;
}
</style>
</head>
<body>
<nav class="navbar ">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img
src="[Link]
NzXCpAyaFI0NGVXUA2Ld-MoAtwMyj4UxACLcBGAsYHQ/s1514/Logo%[Link]" alt="Logo"
width="35" height="35" class="d-inline-block align-text-top">
ELPAY
</a>
</div>
</nav>
<div id="carouselExampleInterval" class="carousel slide" data-bs-
ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="[Link]
id=OIP.jm24riGdCC8JVs7ODjynEAHaEo&pid=Api&P=0&h=180" class="d-block w-100"
alt="...">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img
src="[Link]
JnlJ5uuCJtw70OzCIMRqeLK9uD5KhVPMACLcBGAsYHQ/w1200-h630-p-k-no-nu/2%[Link]"
class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="[Link]
id=OIP.0LtOKvMnj4Ddwd3qP9xAGwHaEJ&pid=Api&P=0&h=180" class="d-block w-100"
alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-
target="#carouselExampleInterval" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-
target="#carouselExampleInterval" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="button-topup row">
<div class="pu">
<p>Fauzi Abdillah</p>
<span>Rp 5.000</span>
<hr>
</div>
<div class="po">
<button class="btp"><a href="aaaa"><img src="[Link]
[Link]/128/11034/[Link]" alt=""></a><p>Top up</p></button>
<button class="btp"><a href="aaaa"><img src="[Link]
[Link]/128/10813/[Link]" alt=""></a><p>Akun</p></button>
<button class="btp"><a href="aaaa"><img src="[Link]
[Link]/128/7762/[Link]" alt=""></a><p>Transaksi</p></button>
</div>
</div>
<!-- button pulsa -->
<div>
<label style="margin-top: 10px; font-family: 'Franklin Gothic Medium',
'Arial Narrow', Arial, sans-serif; margin-left: 20px; font-size: 20px; color:
#8c00ff;">List Produk Prabayar</label>
<div class="btt2">
<button class="bt2"><a href="aaaa"><img src="[Link]
[Link]/128/3814/[Link]" alt=""></a><p>Pulsa</p></button>
<button class="bt2"><a href="aaaa"><img src="[Link]
[Link]/128/10494/[Link]" alt=""></a><p>Game</p></button>
<button class="bt2"><a href="aaaa"><img src="[Link]
[Link]/128/5612/[Link]" alt=""></a><p>Paket data</p></button>
<button class="bt2"><a href="aaaa"><img src="[Link]
[Link]/128/5770/[Link]" alt=""></a><p>Pulsa Tf</p></button>
<button class="bt2"><a href="aaaa"><img src="[Link]
[Link]/128/5937/[Link]" alt=""></a><p>Vocher </p></button>
<button class="bt2"><a href="aaaa"><img src="[Link]
[Link]/128/9493/[Link]" alt=""></a><p>Tagihan</p></button>
<button class="bt2"><a href="aaaa"><img src="[Link]
[Link]/128/6575/[Link]" alt=""></a><p>Emoney</p></button>
<button class="bt2"><a href="aaaa"><img src="[Link]
[Link]/128/7503/[Link]" alt=""></a><p>Token Listrik</p></button>
<button class="bt2"><a href="aaaa"><img src="[Link]
[Link]/128/7503/[Link]" alt=""></a><p>Token Listrik</p></button>
</div>
</div>
<label style="margin-top: 10px; font-family: 'Franklin Gothic Medium', 'Arial
Narrow', Arial, sans-serif; margin-left: 20px; font-size: 20px; color:
#8c00ff;">Berita</label>
<div style="padding: 10px; overflow-x: auto;">
<div class="card-container" style="white-space: nowrap;">
<div class="card mb-3" style="display: inline-block; min-width: 200px;
width: 50px;">
<img style="height: 100px;" src="[Link]
id=OIP.jm24riGdCC8JVs7ODjynEAHaEo&pid=Api&P=0&h=180" class="card-img-top"
alt="...">
<div class="card-body" style="font-size: 12px;">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with .</p>
</div>
</div>
<div class="card mb-3" style="display: inline-block; min-width: 200px;
width: 50px;">
<img style="height: 100px;" src="[Link]
id=OIP.jm24riGdCC8JVs7ODjynEAHaEo&pid=Api&P=0&h=180" class="card-img-top"
alt="...">
<div class="card-body" style="font-size: 12px;">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with.</p>
</div>
</div>
<div class="card mb-3" style="display: inline-block; min-width: 200px;
width: 50px;">
<img style="height: 100px;" src="[Link]
id=OIP.jm24riGdCC8JVs7ODjynEAHaEo&pid=Api&P=0&h=180" class="card-img-top"
alt="...">
<div class="card-body" style="font-size: 12px;">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with.</p>
</div>
</div>
</div>
</div>
</div>
<script
src="[Link]
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
</body>
</html>
