Skip to content

Instantly share code, notes, and snippets.

@ichsanputr

ichsanputr/a.html

Created March 19, 2024 05:12
Show Gist options
  • Save ichsanputr/6eccef9111259835f81c382eb3f46446 to your computer and use it in GitHub Desktop.
Save ichsanputr/6eccef9111259835f81c382eb3f46446 to your computer and use it in GitHub Desktop.
Download ZIP
asas
Raw
a.html
<!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/bootstrap@5.3.2/dist/css/bootstrap.min.css"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/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/bootstrap@5.3.0-alpha1/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