Created
March 19, 2024 05:12
-
-
Save ichsanputr/6eccef9111259835f81c382eb3f46446 to your computer and use it in GitHub Desktop.
asas
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" | |
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> | |
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" | |
crossorigin="anonymous"> | |
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" | |
crossorigin="anonymous"></script> | |
<link href="https://fonts.cdnfonts.com/css/general-sans" rel="stylesheet"> | |
<title>Paytrizz</title> | |
</head> | |
<body> | |
<div class="main"> | |
<div class="header mx-auto py-4 px-3"> | |
<!-- Logo --> | |
<div class="d-flex justify-content-between align-items-center"> | |
<h1 class="fs-3 fw-semibold">Paytrizz</h1> | |
<div class="mb-1"> | |
<svg class="fw-bold" xmlns="http://www.w3.org/2000/svg" width="1.4em" viewBox="0 0 24 24"> | |
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" | |
stroke-width="2" | |
d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9m4.3 13a1.94 1.94 0 0 0 3.4 0" /> | |
</svg> | |
</div> | |
</div> | |
<!-- Total Saldo & Bunga --> | |
<div class="mt-3 bg-white rounded-pill d-flex justify-content-between align-items-center px-4 py-2"> | |
<div class="d-flex align-items-center fw-medium"> | |
<div class="d-block mr-2" style="font: 14px;"> | |
<div>Total saldo</div> | |
<div> | |
<span>Rp904.000</span> | |
<svg class="ml-2" xmlns="http://www.w3.org/2000/svg" width="1.3em" viewBox="0 0 24 24"> | |
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2.5"> | |
<path stroke-linejoin="round" | |
d="M10.73 5.073A10.96 10.96 0 0 1 12 5c4.664 0 8.4 2.903 10 7a11.595 11.595 0 0 1-1.555 2.788M6.52 6.519C4.48 7.764 2.9 9.693 2 12c1.6 4.097 5.336 7 10 7a10.44 10.44 0 0 0 5.48-1.52m-7.6-7.6a3 3 0 1 0 4.243 4.243" /> | |
<path d="m4 4l16 16" /> | |
</g> | |
</svg> | |
</div> | |
</div> | |
</div> | |
<div class="d-block fw-medium"> | |
<div>Est. bunga</div> | |
<div>+Rp12.000</div> | |
</div> | |
</div> | |
<!-- Top Menu --> | |
<div class="row mt-4"> | |
<div class="d-block col"> | |
<div class="bg-white px-2 py-2 d-block w-fit mx-auto mb-2 rounded"> | |
<svg xmlns="http://www.w3.org/2000/svg" width="1.4em" viewBox="0 0 24 24"> | |
<path fill="currentColor" | |
d="M11.12 6.96v2.595a1.574 1.574 0 0 1-.968 1.484a1.584 1.584 0 0 1-.612.123h-2.6a1.591 1.591 0 0 1-1.59-1.577V6.99a1.585 1.585 0 0 1 1.59-1.587h2.6a1.592 1.592 0 0 1 1.58 1.557m0 7.495v2.595a1.585 1.585 0 0 1-1.58 1.587h-2.6a1.592 1.592 0 0 1-1.59-1.587v-2.595a1.585 1.585 0 0 1 1.59-1.577h2.6a1.582 1.582 0 0 1 1.58 1.577m7.54-7.495v2.595a1.585 1.585 0 0 1-1.54 1.607h-2.59a1.591 1.591 0 0 1-1.59-1.577V6.99a1.585 1.585 0 0 1 1.59-1.587h2.59a1.592 1.592 0 0 1 1.54 1.557m0 7.515v2.595a1.585 1.585 0 0 1-1.54 1.587h-2.59a1.592 1.592 0 0 1-1.59-1.587v-2.595a1.586 1.586 0 0 1 1.59-1.577h2.59a1.591 1.591 0 0 1 1.54 1.577" /> | |
<path fill="currentColor" | |
d="M21.25 9.695a.76.76 0 0 1-.75-.749V5.862a2.31 2.31 0 0 0-.68-1.686a2.352 2.352 0 0 0-1.65-.679h-3.05a.75.75 0 0 1-.75-.748a.748.748 0 0 1 .75-.749h3.08a3.864 3.864 0 0 1 2.68 1.178A3.79 3.79 0 0 1 22 5.882v3.084a.748.748 0 0 1-.75.729M18.17 22h-3.05a.75.75 0 0 1-.75-.748a.748.748 0 0 1 .75-.749h3.08a2.324 2.324 0 0 0 2.137-1.462a2.31 2.31 0 0 0 .163-.893v-3.054a.748.748 0 0 1 .75-.749a.75.75 0 0 1 .75.749v3.054a3.806 3.806 0 0 1-2.363 3.534c-.465.191-.964.29-1.467.288zm-9.25 0H5.84a3.848 3.848 0 0 1-2.722-1.13A3.832 3.832 0 0 1 2 18.149v-3.054a.748.748 0 0 1 .75-.749a.751.751 0 0 1 .75.749v3.054a2.334 2.334 0 0 0 2.34 2.325h3.08a.75.75 0 0 1 .75.749a.747.747 0 0 1-.75.748zM2.75 9.695A.76.76 0 0 1 2 8.946V5.862a3.799 3.799 0 0 1 1.12-2.684A3.864 3.864 0 0 1 5.83 2.06h3.08a.75.75 0 0 1 .75.749a.748.748 0 0 1-.75.748H5.83a2.333 2.333 0 0 0-2.34 2.325v3.084a.748.748 0 0 1-.74.729" /> | |
</svg> | |
</div> | |
<div class="fs-7 text-center">Scan Qris</div> | |
</div> | |
<div class="d-block col"> | |
<div class="bg-white px-2 py-2 d-block w-fit mx-auto mb-2 rounded"> | |
<svg xmlns="http://www.w3.org/2000/svg" width="1.4em" viewBox="0 0 24 24"> | |
<path fill="currentColor" | |
d="M21 18v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v1h-9a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2m0-2h10V8H12m4 5.5a1.5 1.5 0 0 1-1.5-1.5a1.5 1.5 0 0 1 1.5-1.5a1.5 1.5 0 0 1 1.5 1.5a1.5 1.5 0 0 1-1.5 1.5" /> | |
</svg> | |
</div> | |
<div class="fs-7 text-center">Tambah Saldo</div> | |
</div> | |
<div class="d-block col"> | |
<div class="bg-white px-2 py-2 d-block w-fit mx-auto mb-2 rounded"> | |
<svg xmlns="http://www.w3.org/2000/svg" width="1.4em" viewBox="0 0 24 24"> | |
<path fill="currentColor" | |
d="M10 4h4c3.771 0 5.657 0 6.828 1.172c.844.843 1.08 2.057 1.146 4.078H2.026c.066-2.021.302-3.235 1.146-4.078C4.343 4 6.229 4 10 4" /> | |
<path fill="currentColor" fill-rule="evenodd" | |
d="m22 12.818l-.409-.409a2.25 2.25 0 0 0-3.182 0l-.801.801a2.251 2.251 0 0 0-4.358.79v1.764a2.25 2.25 0 0 0-1.341 3.827l.409.409H10c-3.771 0-5.657 0-6.828-1.172C2 17.657 2 15.771 2 12c0-.442 0-.858.002-1.25h19.996c.002.392.002.808.002 1.25zM6 15.25a.75.75 0 0 0 0 1.5h4a.75.75 0 0 0 0-1.5z" | |
clip-rule="evenodd" /> | |
<path fill="currentColor" fill-rule="evenodd" | |
d="M15.5 13.25a.75.75 0 0 1 .75.75v4.19l.72-.72a.75.75 0 1 1 1.06 1.06l-2 2a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l.72.72V14a.75.75 0 0 1 .75-.75m3.97.22a.75.75 0 0 1 1.06 0l2 2a.75.75 0 1 1-1.06 1.06l-.72-.72V20a.75.75 0 0 1-1.5 0v-4.19l-.72.72a.75.75 0 1 1-1.06-1.06z" | |
clip-rule="evenodd" /> | |
</svg> | |
</div> | |
<div class="fs-7 text-center">Transfers</div> | |
</div> | |
<div class="d-block col"> | |
<div class="bg-white px-2 py-2 d-block w-fit mx-auto mb-2 rounded"> | |
<svg xmlns="http://www.w3.org/2000/svg" width="1.4em" viewBox="0 0 24 24"> | |
<path fill="currentColor" | |
d="M4 21h9.62a3.995 3.995 0 0 0 3.037-1.397l5.102-5.952a1 1 0 0 0-.442-1.6l-1.968-.656a3.043 3.043 0 0 0-2.823.503l-3.185 2.547l-.617-1.235A3.98 3.98 0 0 0 9.146 11H4c-1.103 0-2 .897-2 2v6c0 1.103.897 2 2 2m0-8h5.146c.763 0 1.448.423 1.789 1.105l.447.895H7v2h6.014a.996.996 0 0 0 .442-.11l.003-.001l.004-.002h.003l.002-.001h.004l.001-.001c.009.003.003-.001.003-.001c.01 0 .002-.001.002-.001h.001l.002-.001l.003-.001l.002-.001l.002-.001l.003-.001l.002-.001c.003 0 .001-.001.002-.001l.003-.002l.002-.001l.002-.001l.003-.001l.002-.001h.001l.002-.001h.001l.002-.001l.002-.001c.009-.001.003-.001.003-.001l.002-.001a.915.915 0 0 0 .11-.078l4.146-3.317c.262-.208.623-.273.94-.167l.557.186l-4.133 4.823a2.029 2.029 0 0 1-1.52.688H4zM16 2h-.017c-.163.002-1.006.039-1.983.705c-.951-.648-1.774-.7-1.968-.704L12.002 2h-.004c-.801 0-1.555.313-2.119.878C9.313 3.445 9 4.198 9 5s.313 1.555.861 2.104l3.414 3.586a1.006 1.006 0 0 0 1.45-.001l3.396-3.568C18.688 6.555 19 5.802 19 5s-.313-1.555-.878-2.121A2.978 2.978 0 0 0 16.002 2zm1 3c0 .267-.104.518-.311.725L14 8.55l-2.707-2.843C11.104 5.518 11 5.267 11 5s.104-.518.294-.708A.977.977 0 0 1 11.979 4c.025.001.502.032 1.067.485c.081.065.163.139.247.222l.707.707l.707-.707c.084-.083.166-.157.247-.222c.529-.425.976-.478 1.052-.484a.987.987 0 0 1 .701.292c.189.189.293.44.293.707" /> | |
</svg> | |
</div> | |
<div class="fs-7 text-center">Minta</div> | |
</div> | |
</div> | |
</div> | |
<!-- Middle Menu --> | |
<div class="row mt-3 bg-white py-3 mr-0 gx-0"> | |
<div class="d-block col-3"> | |
<div class="bg-white px-2 py-2 d-block w-fit mx-auto mb-2 rounded"> | |
<svg xmlns="http://www.w3.org/2000/svg" width="1.4em" viewBox="0 0 32 32"> | |
<path fill="currentColor" d="M21 4v24h6V4zm-8 7v17h6V11zm-8 7v10h6V18z" /> | |
</svg> | |
</div> | |
<div class="fs-7 text-center">Pulsa & Kuota</div> | |
</div> | |
<div class="d-block col-3"> | |
<div class="bg-white px-2 py-2 d-block w-fit mx-auto mb-2 rounded"> | |
<svg xmlns="http://www.w3.org/2000/svg" width="1.4em" viewBox="0 0 24 24"> | |
<g fill="none"> | |
<path | |
d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" /> | |
<path fill="currentColor" | |
d="M19 4a2 2 0 0 1 2 2v1h-6a5 5 0 0 0 0 10h6v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm1 5a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-5a3 3 0 1 1 0-6zm-5 2a1 1 0 1 0 0 2a1 1 0 0 0 0-2" /> | |
</g> | |
</svg> | |
</div> | |
<div class="fs-7 text-center">Topup E-wallet</div> | |
</div> | |
<div class="d-block col-3"> | |
<div class="bg-white px-2 py-2 d-block w-fit mx-auto mb-2 rounded"> | |
<svg xmlns="http://www.w3.org/2000/svg" width="1.4em" viewBox="0 0 512 512"> | |
<path fill="currentColor" d="M376 211H256V16L136 301h120v195z" /> | |
</svg> | |
</div> | |
<div class="fs-7 text-center">Token PLN</div> | |
</div> | |
<div class="d-block col-3"> | |
<div class="bg-white px-2 py-2 d-block w-fit mx-auto mb-2 rounded"> | |
<svg xmlns="http://www.w3.org/2000/svg" width="1.4em" viewBox="0 0 15 15"> | |
<path fill="currentColor" | |
d="M7.5 14c2.077 0 4.5-1.288 4.5-4.568C12 7.207 8.538 2.288 7.5 1C6.577 2.288 3 7.09 3 9.432C3 12.712 5.423 14 7.5 14" /> | |
</svg> | |
</div> | |
<div class="fs-7 text-center">PDAM</div> | |
</div> | |
<div class="d-block col"> | |
<div class="bg-white px-2 py-2 d-block w-fit mx-auto mb-2 rounded"> | |
<svg xmlns="http://www.w3.org/2000/svg" width="1.4em" viewBox="0 0 26 26"> | |
<path fill="currentColor" | |
d="M16.688 0c-.2.008-.393.044-.594.094L2.5 3.406C.892 3.8-.114 5.422.281 7.031l1.906 7.782A2.99 2.99 0 0 0 4 16.875V15c0-2.757 2.243-5 5-5h12.594l-1.875-7.719A3.004 3.004 0 0 0 16.687 0zm1.218 4.313l.813 3.406l-3.375.812l-.844-3.375zM9 12c-1.656 0-3 1.344-3 3v8c0 1.656 1.344 3 3 3h14c1.656 0 3-1.344 3-3v-8c0-1.656-1.344-3-3-3zm0 1.594h14c.771 0 1.406.635 1.406 1.406v1H7.594v-1c0-.771.635-1.406 1.406-1.406M7.594 19h16.812v4c0 .771-.635 1.406-1.406 1.406H9A1.414 1.414 0 0 1 7.594 23z" /> | |
</svg> | |
</div> | |
<div class="fs-7 text-center">Transfer VA</div> | |
</div> | |
<div class="d-block col"> | |
<div class="bg-white px-2 py-2 d-block w-fit mx-auto mb-2 rounded"> | |
<svg xmlns="http://www.w3.org/2000/svg" width="1.4em" viewBox="0 0 24 24"> | |
<g fill="none" fill-rule="evenodd"> | |
<path | |
d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036c-.01-.003-.019 0-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z" /> | |
<path fill="currentColor" | |
d="M5 4a3 3 0 0 0-3 3v1h20V7a3 3 0 0 0-3-3zm17 6H2v7a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3zM8 15a1 1 0 0 1 1-1h4.414l-.121-.121a1 1 0 0 1 1.414-1.415l1.828 1.829a1 1 0 0 1 0 1.414l-1.828 1.828a1 1 0 1 1-1.414-1.414l.121-.121H9a1 1 0 0 1-1-1" /> | |
</g> | |
</svg> | |
</div> | |
<div class="fs-7 text-center">Pasca Bayar</div> | |
</div> | |
<div class="d-block col"> | |
<div class="bg-white px-2 py-2 d-block w-fit mx-auto mb-2 rounded"> | |
<svg xmlns="http://www.w3.org/2000/svg" width="1.4em" viewBox="0 0 28 28"> | |
<path fill="currentColor" | |
d="M10.5 5.5a8.5 8.5 0 0 0 0 17h7a8.5 8.5 0 1 0 0-17zm7.5 11a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0m1.5-2.5a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3m-14-.25a.75.75 0 0 1 .75-.75H8v-1.75a.75.75 0 0 1 1.5 0V13h1.75a.75.75 0 0 1 0 1.5H9.5v1.75a.75.75 0 1 1-1.5 0V14.5H6.25a.75.75 0 0 1-.75-.75" /> | |
</svg> | |
</div> | |
<div class="fs-7 text-center">Voucher Game</div> | |
</div> | |
<div class="d-block col"> | |
<div class="bg-white px-2 py-2 d-block w-fit mx-auto mb-2 rounded"> | |
<svg xmlns="http://www.w3.org/2000/svg" width="1.4em" viewBox="0 0 24 24"> | |
<path fill="currentColor" | |
d="M6 10.5a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3m4.5 1.5a1.5 1.5 0 1 1 3 0a1.5 1.5 0 0 1-3 0m6 0a1.5 1.5 0 1 1 3 0a1.5 1.5 0 0 1-3 0" /> | |
</svg> | |
</div> | |
<div class="fs-7 text-center">Lainya</div> | |
</div> | |
</div> | |
<!-- Banner --> | |
<div id="carouselExample" class="mt-4 carousel slide w-100" data-bs-ride="carousel" data-bs-interval="3000"> | |
<div class="carousel-indicators"> | |
<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active"></button> | |
<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1"></button> | |
<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2"></button> | |
</div> | |
<div class="carousel-inner"> | |
<div class="carousel-item"> | |
<img class="d-block w-100" style="border-radius: 16px;" height="240" | |
src="https://res.cloudinary.com/wargabantuwarga/image/upload/c_scale,w_720,q_90,cs_tinysrgb,f_auto/v1627319803/sembako-cta-v2_czojls" | |
alt="Second slide"> | |
</div> | |
<div class="carousel-item active"> | |
<img class="d-block w-100" style="border-radius: 16px;" height="240" | |
src="https://res.cloudinary.com/wargabantuwarga/image/upload/c_scale,w_720,q_90,cs_tinysrgb,f_auto/v1628431903/telemedicine-banner_2x_gonhgo" | |
alt="First slide"> | |
</div> | |
<div class="carousel-item"> | |
<img class="d-block w-100" style="border-radius: 16px;" height="240" | |
src="https://www.cs.ucy.ac.cy/courses/EPL425/labs/slides/slide3.jpg" alt="Third slide"> | |
</div> | |
</div> | |
<button class="carousel-control-prev" data-bs-target="#carouselExample" type="button" 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" data-bs-target="#carouselExample" type="button" data-bs-slide="next"> | |
<span class="carousel-control-next-icon" aria-hidden="true"></span> | |
<span class="visually-hidden">Next</span> | |
</button> | |
</div> | |
<!-- Riwayat Transaksi --> | |
<div class="block bg-white mt-4" style="margin-bottom: 4.5rem;"> | |
<div class="d-flex justify-content-between align-items-center border-bottom py-2 px-2 fw-semibold"> | |
<div style="font-size: 14px;">Riwayat Transaksi</div> | |
<div style="font-size: 12px;">Transaksi Lainya ></div> | |
</div> | |
<div class="d-block"> | |
<div | |
class="my-2 px-2 d-flex justify-content-between align-items-center border-bottom py-2 px-2 fw-semibold"> | |
<div class="d-flex"> | |
<div style="margin-right: 10px;"> | |
<img width="36" src="./daniel.svg"> | |
</div> | |
<div class="d-block" style="font-size: 12px;"> | |
<div>Daniel Foko</div> | |
<div class="fw-medium">Transfer VA</div> | |
</div> | |
</div> | |
<div style="font-size: 12px;">+14.600</div> | |
</div> | |
<div | |
class="my-2 px-2 d-flex justify-content-between align-items-center border-bottom py-2 px-2 fw-semibold"> | |
<div class="d-flex"> | |
<div style="margin-right: 10px;"> | |
<img width="36" src="./liu.svg" /> | |
</div> | |
<div class="d-block" style="font-size: 12px;"> | |
<div>Susi Susanti</div> | |
<div class="fw-medium">Transfer VA</div> | |
</div> | |
</div> | |
<div style="font-size: 12px;">+56.350</div> | |
</div> | |
<div | |
class="my-2 px-2 d-flex justify-content-between align-items-center border-bottom py-2 px-2 fw-semibold"> | |
<div class="d-flex"> | |
<div style="margin-right: 10px;"> | |
<img src="./ayu.svg" width="36" /> | |
</div> | |
<div class="d-block" style="font-size: 12px;"> | |
<div>Ayu Rohmanita</div> | |
<div class="fw-medium">Transfer Bank</div> | |
</div> | |
</div> | |
<div style="font-size: 12px;">+11.900</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- Navbar Bottom --> | |
<div class="fixed-bottom navbar rounded-top"> | |
<div class="d-flex justify-content-between px-3 w-100"> | |
<div style="width: fit-content;"> | |
<div class="d-flex justify-content-center"> | |
<svg class="mx-auto" xmlns="http://www.w3.org/2000/svg" width="1.3em" viewBox="0 0 512 512"> | |
<path fill="currentColor" | |
d="M261.56 101.28a8 8 0 0 0-11.06 0L66.4 277.15a8 8 0 0 0-2.47 5.79L63.9 448a32 32 0 0 0 32 32H192a16 16 0 0 0 16-16V328a8 8 0 0 1 8-8h80a8 8 0 0 1 8 8v136a16 16 0 0 0 16 16h96.06a32 32 0 0 0 32-32V282.94a8 8 0 0 0-2.47-5.79Z" /> | |
<path fill="currentColor" | |
d="m490.91 244.15l-74.8-71.56V64a16 16 0 0 0-16-16h-48a16 16 0 0 0-16 16v32l-57.92-55.38C272.77 35.14 264.71 32 256 32c-8.68 0-16.72 3.14-22.14 8.63l-212.7 203.5c-6.22 6-7 15.87-1.34 22.37A16 16 0 0 0 43 267.56L250.5 69.28a8 8 0 0 1 11.06 0l207.52 198.28a16 16 0 0 0 22.59-.44c6.14-6.36 5.63-16.86-.76-22.97" /> | |
</svg> | |
</div> | |
<div class="text-center mt-1" style="font-size: 14px;"> | |
Beranda | |
</div> | |
</div> | |
<div style="width: fit-content;"> | |
<div class="d-flex justify-content-center"> | |
<svg xmlns="http://www.w3.org/2000/svg" width="1.3em" viewBox="0 0 24 24"> | |
<g fill="none" fill-rule="evenodd"> | |
<path | |
d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036c-.01-.003-.019 0-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z" /> | |
<path fill="currentColor" | |
d="M5 4a3 3 0 0 0-3 3v1h20V7a3 3 0 0 0-3-3zm17 6H2v7a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3zM8 15a1 1 0 0 1 1-1h4.414l-.121-.121a1 1 0 0 1 1.414-1.415l1.828 1.829a1 1 0 0 1 0 1.414l-1.828 1.828a1 1 0 1 1-1.414-1.414l.121-.121H9a1 1 0 0 1-1-1" /> | |
</g> | |
</svg> | |
</div> | |
<div style="font-size: 14px;" class="mt-1"> | |
Bayar | |
</div> | |
</div> | |
<div style="width: fit-content;"> | |
<div class="w-fit"> | |
<svg style="margin-left: 2px;" xmlns="http://www.w3.org/2000/svg" width="1.4em" viewBox="0 0 24 24"> | |
<path fill="currentColor" | |
d="M11.12 6.96v2.595a1.574 1.574 0 0 1-.968 1.484a1.584 1.584 0 0 1-.612.123h-2.6a1.591 1.591 0 0 1-1.59-1.577V6.99a1.585 1.585 0 0 1 1.59-1.587h2.6a1.592 1.592 0 0 1 1.58 1.557m0 7.495v2.595a1.585 1.585 0 0 1-1.58 1.587h-2.6a1.592 1.592 0 0 1-1.59-1.587v-2.595a1.585 1.585 0 0 1 1.59-1.577h2.6a1.582 1.582 0 0 1 1.58 1.577m7.54-7.495v2.595a1.585 1.585 0 0 1-1.54 1.607h-2.59a1.591 1.591 0 0 1-1.59-1.577V6.99a1.585 1.585 0 0 1 1.59-1.587h2.59a1.592 1.592 0 0 1 1.54 1.557m0 7.515v2.595a1.585 1.585 0 0 1-1.54 1.587h-2.59a1.592 1.592 0 0 1-1.59-1.587v-2.595a1.586 1.586 0 0 1 1.59-1.577h2.59a1.591 1.591 0 0 1 1.54 1.577" /> | |
<path fill="currentColor" | |
d="M21.25 9.695a.76.76 0 0 1-.75-.749V5.862a2.31 2.31 0 0 0-.68-1.686a2.352 2.352 0 0 0-1.65-.679h-3.05a.75.75 0 0 1-.75-.748a.748.748 0 0 1 .75-.749h3.08a3.864 3.864 0 0 1 2.68 1.178A3.79 3.79 0 0 1 22 5.882v3.084a.748.748 0 0 1-.75.729M18.17 22h-3.05a.75.75 0 0 1-.75-.748a.748.748 0 0 1 .75-.749h3.08a2.324 2.324 0 0 0 2.137-1.462a2.31 2.31 0 0 0 .163-.893v-3.054a.748.748 0 0 1 .75-.749a.75.75 0 0 1 .75.749v3.054a3.806 3.806 0 0 1-2.363 3.534c-.465.191-.964.29-1.467.288zm-9.25 0H5.84a3.848 3.848 0 0 1-2.722-1.13A3.832 3.832 0 0 1 2 18.149v-3.054a.748.748 0 0 1 .75-.749a.751.751 0 0 1 .75.749v3.054a2.334 2.334 0 0 0 2.34 2.325h3.08a.75.75 0 0 1 .75.749a.747.747 0 0 1-.75.748zM2.75 9.695A.76.76 0 0 1 2 8.946V5.862a3.799 3.799 0 0 1 1.12-2.684A3.864 3.864 0 0 1 5.83 2.06h3.08a.75.75 0 0 1 .75.749a.748.748 0 0 1-.75.748H5.83a2.333 2.333 0 0 0-2.34 2.325v3.084a.748.748 0 0 1-.74.729" /> | |
</svg> | |
</div> | |
<div style="margin-top: 2px; font-size: 14px;width: fit-content;"> | |
Qris | |
</div> | |
</div> | |
<div style="width: fit-content;"> | |
<div class="d-flex justify-content-center"> | |
<svg xmlns="http://www.w3.org/2000/svg" width="1.4em" viewBox="0 0 24 24"> | |
<g fill="currentColor" stroke-width="1.5"> | |
<path fill-rule="evenodd" | |
d="M5 6.25A2.75 2.75 0 0 0 2.25 9v9A2.75 2.75 0 0 0 5 20.75h14A2.75 2.75 0 0 0 21.75 18V9A2.75 2.75 0 0 0 19 6.25zm11.5 6a1.25 1.25 0 1 0 0 2.5a1.25 1.25 0 0 0 0-2.5" | |
clip-rule="evenodd" /> | |
<path d="M16.485 3.069A2 2 0 0 1 19 5H9z" /> | |
</g> | |
</svg> | |
</div> | |
<div style="font-size: 14px;margin-top: 3px;"> | |
Wallet | |
</div> | |
</div> | |
<div style="width: fit-content;"> | |
<div class="d-flex justify-content-center"> | |
<svg xmlns="http://www.w3.org/2000/svg" width="1.4em" viewBox="0 0 24 24"> | |
<path fill="currentColor" fill-rule="evenodd" | |
d="M8 7a4 4 0 1 1 8 0a4 4 0 0 1-8 0m0 6a5 5 0 0 0-5 5a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3a5 5 0 0 0-5-5z" | |
clip-rule="evenodd" /> | |
</svg> | |
</div> | |
<div style="font-size: 14px;margin-top: 3px;"> | |
Profile | |
</div> | |
</div> | |
</div> | |
</div> | |
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" | |
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" | |
crossorigin="anonymous"></script> | |
</body> | |
</html> | |
<style> | |
body { | |
font-family: 'General Sans', sans-serif; | |
background-color: #eeeeee; | |
} | |
.header { | |
background-color: #FFDE59; | |
} | |
.navbar { | |
background-color: #FFDE59; | |
border-top-left-radius: 18px !important; | |
border-top-right-radius: 18px !important; | |
bottom: 0; | |
width: 50%; | |
margin: 0 auto; | |
} | |
.main { | |
width: 50%; | |
margin: 0 auto; | |
} | |
@media only screen and (max-width: 600px) { | |
.main { | |
width: 100%; | |
} | |
.navbar { | |
width: 100%; | |
} | |
} | |
.fs-7 { | |
font-size: 12px; | |
} | |
.w-fit { | |
width: fit-content; | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment