History
60%
savings
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Poppins", sans-serif;
font-size: 16px;
background-color: #1b1f23;
color: #626262;
display: flex;
justify-content: center;
align-items: center;
padding: 1rem 2rem;
}
a,
.text-muted {
color: #626262;
}
.t1 {
font-size: 1.5rem;
}
.t2 {
font-size: 1.25rem;
}
.t3 {
font-size: 1rem;
}
.t4 {
font-size: 0.85rem;
}
.t5 {
font-size: 0.5rem;
}
.w-100 {
width: 100%;
}
.container {
height: 587px;
width: 300px;
padding: 1rem 1.5rem;
border-radius: 25px;
box-shadow: -4px -2px 4px 0px #262830, 4px 2px 6px 0px #0e1013;
}
nav {
display: flex;
justify-content: space-between;
}
button,
.btn,
.toggle-group label {
position: relative;
background: inherit;
outline: none;
border: none;
box-shadow: -4px -2px 4px 0px #262830, 4px 2px 6px 0px #111316;
cursor: pointer;
}
button:focus:after,
button:active:after,
.btn.active:after,
.toggle-group input:checked + label:after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: 6px;
box-shadow: 2px 2px 2px 0px #111316 inset, -2px -2px 2px 0px #262830 inset;
}
button {
padding: 0.5rem 0.75rem;
border-radius: 6px;
}
button svg.feather {
width: 1.25rem;
height: 1.25rem;
}
.fas {
color: #626262;
font-size: 20px;
}
.btn {
padding: 0.5rem 0.75rem;
border-radius: 6px;
}
.fas.active {
color: #ff240f;
}
main {
padding: 1.5rem 0.25rem;
}
.toggle-group {
display: flex;
justify-content: space-around;
}
.toggle-group label {
flex: 1;
padding: 0.7rem;
text-align: center;
border-radius: 8px;
}
.toggle-group label:first-of-type {
margin-right: 1rem;
}
.toggle-group input {
display: none;
}
.chart {
position: relative;
border-radius: 50%;
margin: 2rem;
box-shadow: -4px -2px 4px 0px #262830, 4px 2px 6px 0px #111316;
}
.chart::after {
content: "";
position: absolute;
border-radius: 50%;
margin: 3rem;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: 2px 2px 2px 0px #111316 inset, -2px -2px 2px 0px #262830 inset;
}
.chart .chart-label {
position: absolute;
top: 0;
bottom: 0.5rem;
left: 0;
right: 0;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
#btntransactions {
font-size: 16px;
color: #626262;
padding: 0.75rem;
}
#chartfill {
animation: chart 500ms linear forwards;
}
@keyframes chart {
from {
stroke-dashoffset: 300;
}
to {
stroke-dashoffset: 100;
}
}