#frontendaily
.sketch
<div class="app">
<div class="app-inner">
<header class="app-header">
<div class="balance">
<div class="text">Account balance</div>
<div class="money">₹2,55,225</div>
</div>
<a href="#" class="avatar">
<img src="https://images.generated.photos/f4BE8DIqCrOsANc2IyWrJiTZomBkHEtSsSuTY7Xfimk/rs:fit:512:512/Z3M6Ly9nZW5lcmF0/ZWQtcGhvdG9zL3Yz/XzA3OTc5MjkuanBn.jpg" alt="">
</a>
</header>
<nav class="actions">
<ul>
<li>
<a href="#">
<div class="icon">
<i class="icon-send"></i>
</div>
<div class="text">Send</div>
</a>
</li>
<li>
<a href="#">
<div class="icon">
<i class="icon-request"></i>
</div>
<div class="text">Request</div>
</a>
</li>
<li>
<a href="#">
<div class="icon">
<i class="icon-card"></i>
</div>
<div class="text">Cards</div>
</a>
</li>
<li>
<a href="#">
<div class="icon">
<i class="icon-atm"></i>
</div>
<div class="text">Atm</div>
</a>
</li>
<li>
<a href="#">
<div class="icon">
<i class="icon-loan"></i>
</div>
<div class="text">Loan</div>
</a>
</li>
<li>
<a href="#">
<div class="icon">
<i class="icon-send"></i>
</div>
<div class="text">Send</div>
</a>
</li>
<li>
<a href="#">
<div class="icon">
<i class="icon-request"></i>
</div>
<div class="text">Request</div>
</a>
</li>
<li>
<a href="#">
<div class="icon">
<i class="icon-card"></i>
</div>
<div class="text">Cards</div>
</a>
</li>
<li>
<a href="#">
<div class="icon">
<i class="icon-atm"></i>
</div>
<div class="text">Atm</div>
</a>
</li>
<li>
<a href="#">
<div class="icon">
<i class="icon-loan"></i>
</div>
<div class="text">Loan</div>
</a>
</li>
</ul>
</nav>
<section class="transactions">
<h6>
Today Transaction
<div class="buttons">
<a href="#">
<i class="icon-filter"></i>
</a>
<a href="#">
<i class="icon-search"></i>
</a>
</div>
</h6>
<ul class="transation-list">
<li>
<a href="#">
<div class="icon">
<img src="img/brand1.png" alt="">
</div>
<div class="transaction">
<div class="title">Paid for order to Uber</div>
<div class="date">21/06/2020</div>
</div>
<div class="money">
-₹323
</div>
</a>
</li>
<li>
<a href="#">
<div class="icon">
<img src="img/brand2.png" alt="">
</div>
<div class="transaction">
<div class="title">Paid for order to Hotel</div>
<div class="date">21/06/2020</div>
</div>
<div class="money">
-₹5232
</div>
</a>
</li>
</ul>
<h6>Yesterday Transaction</h6>
<ul class="transation-list">
<li>
<a href="#">
<div class="icon with-bg">
<i class="icon-send"></i>
</div>
<div class="transaction">
<div class="title">Money sent to Ankit</div>
<div class="date">21/06/2020</div>
</div>
<div class="money">
-₹323
</div>
</a>
</li>
<li>
<a href="#">
<div class="icon">
<img src="img/brand3.png" alt="">
</div>
<div class="transaction">
<div class="title">Paid for order to Ola Cab</div>
<div class="date">21/06/2020</div>
</div>
<div class="money">
-₹323
</div>
</a>
</li>
<li>
<a href="#">
<div class="icon">
<img src="img/brand1.png" alt="">
</div>
<div class="transaction">
<div class="title">Paid for order to Uber</div>
<div class="date">21/06/2020</div>
</div>
<div class="money">
-₹323
</div>
</a>
</li>
<li>
<a href="#">
<div class="icon">
<img src="img/brand1.png" alt="">
</div>
<div class="transaction">
<div class="title">Paid for order to Uber</div>
<div class="date">21/06/2020</div>
</div>
<div class="money">
-₹323
</div>
</a>
</li>
<li>
<a href="#">
<div class="icon">
<img src="img/brand1.png" alt="">
</div>
<div class="transaction">
<div class="title">Paid for order to Uber</div>
<div class="date">21/06/2020</div>
</div>
<div class="money">
-₹323
</div>
</a>
</li>
</ul>
</section>
</div>
<nav class="menu">
<ul>
<li class="active">
<a href="#">
<i class="icon-home"></i>
</a>
</li>
<li>
<a href="#">
<i class="icon-chart"></i>
</a>
</li>
<li>
<a href="#">
<i class="icon-pig"></i>
</a>
</li>
<li>
<a href="#">
<i class="icon-bank"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="app">
<div class="page">
<div class="back">
<a href="#" class="back-btn">
<i class="icon-back"></i>
Your Cards
</a>
<a href="#" class="more-btn">
<i class="icon-3dots"></i>
</a>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="card bg-dark">
<div class="bank-name">HDFC BANK</div>
<img src="img/chip.png" alt="">
<div class="card-information">
<div>
<span>****</span> <span>5432</span>
</div>
<img src="img/mastercard.png" alt="">
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card bg-blue">
<div class="bank-name">SBI BANK</div>
<img src="img/chip.png" alt="">
<div class="card-information">
<div>
<span>****</span> <span>5432</span>
</div>
<img src="img/mastercard.png" alt="">
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card bg-dark">
<div class="bank-name">HDFC BANK</div>
<img src="img/chip.png" alt="">
<div class="card-information">
<div>
<span>****</span> <span>5432</span>
</div>
<img src="img/mastercard.png" alt="">
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<h6>Send Money to</h6>
<div class="peoples">
<ul>
<li>
<a href="#">
<div class="icon">
<i class="icon-plus"></i>
</div>
</a>
</li>
<li>
<a href="#">
<div class="icon">
<img src="https://images.generated.photos/tuA_48Mfx9ej44jpnQtxFudJB5Row8r8s0wU5Yq5tMQ/rs:fit:512:512/Z3M6Ly9nZW5lcmF0/ZWQtcGhvdG9zL3Yz/XzAxNTMzNzQuanBn.jpg" alt="">
</div>
<div class="name">Arno</div>
</a>
</li>
<li>
<a href="#">
<div class="icon">
<img src="https://images.generated.photos/E-VIgzKGeMgoUN92cusnumjHpJj5S8QEpnPCkSv9Ho4/rs:fit:512:512/Z3M6Ly9nZW5lcmF0/ZWQtcGhvdG9zL3Yz/XzAwMjA2NjAuanBn.jpg" alt="">
</div>
<div class="name">Arno</div>
</a>
</li>
<li>
<a href="#">
<div class="icon">
<img src="https://images.generated.photos/RvvyGYyxN2AZl32_RvgeL0GoU9WZ3xkRWtJj0Ah7e2s/rs:fit:512:512/Z3M6Ly9nZW5lcmF0/ZWQtcGhvdG9zL3Yz/XzAzNDI3OTYuanBn.jpg" alt="">
</div>
<div class="name">Arno</div>
</a>
</li>
<li>
<a href="#">
<div class="icon">
<img src="https://images.generated.photos/YHkop4O20ludTdLsJvOn4ROBaPu0V8SFY3lU6HHxrxQ/rs:fit:512:512/Z3M6Ly9nZW5lcmF0/ZWQtcGhvdG9zL3Yz/XzAwMjg5MjUuanBn.jpg" alt="">
</div>
<div class="name">Arno</div>
</a>
</li>
<li>
<a href="#">
<div class="icon">
<img src="https://images.generated.photos/OKRuIIs5lRCsqDCGiKaAnqFo1fc386049ipkYWBiGfU/rs:fit:512:512/Z3M6Ly9nZW5lcmF0/ZWQtcGhvdG9zL3Yz/XzA5MzU4NzMuanBn.jpg" alt="">
</div>
<div class="name">Arno</div>
</a>
</li>
<li>
<a href="#">
<div class="icon">
<img src="https://images.generated.photos/6WaxySExK-ZQfUziCDMltQiM9U_bE8Q0kzrklvnqvqs/rs:fit:512:512/Z3M6Ly9nZW5lcmF0/ZWQtcGhvdG9zL3Yz/XzAwMzcyMzQuanBn.jpg" alt="">
</div>
<div class="name">Arno</div>
</a>
</li>
<li>
<a href="#">
<div class="icon">
<img src="https://images.generated.photos/KCRdtbtwKe3wJKT_j8E5m0SV-1NWE8BJf9tLG0AJ_iM/rs:fit:512:512/Z3M6Ly9nZW5lcmF0/ZWQtcGhvdG9zL3Yz/XzA5Njc1MTYuanBn.jpg" alt="">
</div>
<div class="name">Arno</div>
</a>
</li>
<li>
<a href="#">
<div class="icon">
<img src="https://images.generated.photos/gLBHBEhBRRDQaqkL-NAw_CWrgkG0c0QlB2CQHzuKd-4/rs:fit:512:512/Z3M6Ly9nZW5lcmF0/ZWQtcGhvdG9zL3Yz/XzA1MzE4NzcuanBn.jpg" alt="">
</div>
<div class="name">Arno</div>
</a>
</li>
</ul>
</div>
<h6>Card Setting</h6>
<nav class="settings-menu">
<ul>
<li>
<a href="#">
<i class="icon-pincode"></i>
Change Pincode
<i class="icon-arrow-right"></i>
</a>
</li>
<li>
<a href="#">
<i class="icon-block"></i>
Block Card
<i class="icon-arrow-right"></i>
</a>
</li>
<li>
<a href="#">
<i class="icon-download"></i>
Download Statment
<i class="icon-arrow-right"></i>
</a>
</li>
<li>
<a href="#">
<i class="icon-settings"></i>
Settings
<i class="icon-arrow-right"></i>
</a>
</li>
</ul>
</nav>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.min.css">@import "icon-font";
@import "font";
@mixin center {
display: grid;
place-items: center;
}
* {
padding: 0;
margin: 0;
list-style: none;
border: none;
text-decoration: none;
box-sizing: border-box;
font-family: 'Louis George Cafe';
-webkit-overflow-scrolling: touch;r
&:focus {
outline: 0;
}
}
$primary-color: #157AFF;
html, body {
height: 100%;
}
body {
background-color: #1A212A;
}
.app {
height: 100%;
.app-inner {
height: calc(100% - 60px);
overflow: auto;
}
.app-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 27px 24px;
.balance {
.text {
font-size: 14px;
color: rgba(#fff,.5);
}
.money {
font-size: 38px;
color: #fff;
}
}
.avatar {
img {
width: 45px;
height: 45px;
border-radius: 50%;
border: 2px solid $primary-color;
box-shadow: 0 6px 12px 0 rgba($primary-color, .5);
}
}
}
.actions {
overflow-x: auto;
margin-bottom: 30px;
scroll-snap-type: x mandatory;
ul {
display: flex;
li {
padding: 0 15px;
scroll-snap-align: start;
&:first-child {
padding-left: 24px;
}
&:last-child {
padding-right: 24px;
}
a {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
.icon {
width: 60px;
height: 60px;
min-width: 60px;
border-radius: 24px;
background-color: rgba(#535F6D, .19);
color: #fff;
font-size: 24px;
@include center;
i.icon-card {
font-size: 20px;
}
}
.text {
font-size: 14px;
color: #fff;
margin-top: 13px;
}
}
}
}
}
.transactions {
padding: 14px 24px;
background-color: #1B242E;
border-radius: 48px 48px 0 0;
.transation-list {
li {
margin-bottom: 17px;
padding-bottom: 17px;
border-bottom: 1px solid rgba(#E2E9FF, .1);
&:last-child {
border: none;
}
a {
display: flex;
align-items: center;
.icon {
width: 45px;
height: 45px;
margin-right: 20px;
@include center;
border-radius: 16px;
overflow: hidden;
img {
max-height: 45px;
max-width: 45px;
object-fit: cover;
}
&.with-bg {
background-color: #fff;
}
i {
color: $primary-color;
font-size: 24px;
}
}
.transaction {
display: flex;
flex-direction: column;
.title {
color: #fff;
font-size: 16px;
font-weight: bold;
}
.date {
font-size: 14px;
color: rgba(#fff,.5);
padding-top: 10px;
}
}
.money {
margin-left: auto;
font-size: 18px;
font-weight: bold;
color: #fff;
}
}
}
}
}
h6 {
font-size: 16px;
color: #fff;
padding-bottom: 25px;
display: flex;
align-items: center;
justify-content: space-between;
font-weight: normal;
.buttons {
display: flex;
a {
width: 52px;
height: 52px;
min-width: 52px;
border-radius: 15px;
background-color: rgba(#535F6D, .19);
color: #fff;
font-size: 16px;
@include center;
margin-left: 18px;
}
}
}
.menu {
background-color: #1A212A;
ul {
height: 60px;
display: flex;
li {
flex: 1;
a {
height: 60px;
@include center;
color: rgba(#fff,.5);
font-size: 28px;
i.icon-pig {
font-size: 24px;
}
}
&.active a {
color: $primary-color;
}
}
}
}
.page {
padding: 24px;
}
.back {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 40px;
.back-btn {
font-size: 32px;
font-weight: bold;
color: #fff;
display: flex;
align-items: center;
i {
font-size: 20px;
margin-right: 15px;
}
}
.more-btn {
color: #fff;
font-size: 30px;
}
}
.swiper-container {
margin: 0 -24px 49px;
padding-bottom: 45px;
.swiper-slide {
width: 331px;
display: flex;
justify-content: flex-end;
&:last-child {
width: 361px;
padding-right: 24px;
}
}
.swiper-pagination {
.swiper-pagination-bullet {
width: 8px;
height: 8px;
border: 1px solid #fff;
opacity: 1;
&.swiper-pagination-bullet-active {
background-color: #fff;
}
}
}
}
.card {
min-width: 307px;
width: 307px;
height: 172px;
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 22px 21px 16px 27px;
.bank-name {
font-size: 16px;
color: #fff;
}
.card-information {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
div {
font-size: 15px;
color: #fff;
span {
margin-right: 10px;
}
}
}
img {
align-self: baseline;
}
&.bg-dark {
background: linear-gradient(to right, #141414, #292929);
}
&.bg-blue {
background: linear-gradient(to right, #6289FF, #5252FF);
}
}
.peoples {
margin: 0 -24px 45px;
ul {
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
li {
scroll-snap-align: center;
margin-right: 15px;
&:first-child {
padding-left: 24px;
}
&:last-child {
padding-right: 24px;
}
a {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
.icon {
width: 60px;
height: 60px;
@include center;
background-color: $primary-color;
border-radius: 24px;
color: #fff;
box-shadow: 0 6px 12px 0 rgba($primary-color, .3)
}
img {
width: 60px;
border-radius: 24px;
height: 60px;
object-fit: cover;
box-shadow: 0 10px 20px 0 rgba(#000000, .17)
}
.name {
margin-top: 17px;
font-size: 14px;
color: #fff;
}
}
}
}
}
.settings-menu {
border-top: 1px solid rgba(#E2E9FF, .1);
ul {
li {
border-bottom: 1px solid rgba(#E2E9FF, .1);
&:last-child {
border-bottom: none;
}
a {
display: flex;
align-items: center;
padding: 22px 0;
color: #fff;
font-size: 16px;
font-weight: bold;
i:first-child {
width: 30px;
text-align: center;
margin-right: 10px;
font-size: 16px;
color: $primary-color;
}
i.icon-pincode {
font-size: 12px;
}
.icon-arrow-right {
margin-left: auto;
font-size: 12px;
padding-right: 15px;
}
}
}
}
}
}var swiper = new Swiper('.swiper-container', {
slidesPerView: 'auto',
spaceBetween: 0,
pagination: {
el: '.swiper-pagination',
clickable: true
}
});
Tweet
Share 
Post