xxxxxxxxxx1
<div class="d-md-flex justify-content-center align-items-center vh-100">2
3
<div class="card wallet-app mx-auto mx-md-3 mb-4 mb-md-0 overflow-hidden">4
<div class="card-body information">5
<div class="text-center">6
<h4 class="pt-1 mb-0"><i class="fas fa-wallet me-2"></i>e-wallet</h4>7
</div>8
<div class="d-flex align-items-center" style="height: calc(100% - 15px);">9
<div>10
<div class="position-relative">11
<div id="circle-1" class="position-absolute rounded-circle opacity-80"></div>12
<div id="circle-2" class="position-absolute rounded-circle opacity-80"></div>13
<div id="credit-card" class="shadow-4 rounded-8 overflow-hidden" data-tilt>14
<div class="p-3">15
<div class="text-white ls-widest opacity-80 fw-light">16
<div class="text-end mb-4">17
<img id="logo-visa" src="https://ascensus-youtube-projects.mdbgo.io/img/visa.png" alt="Visa" />18
</div>19
<img id="chip" class="mb-3" src="https://ascensus-youtube-projects.mdbgo.io/img/chip.png" alt="chip" />20
<h5 class="mb-2">1234 5678 9012 3456</h5>21
<div class="d-flex justify-content-between">22
<p class="">John Doe</p>23
<p class="">12/25</p>24
</div>25
</div>26
</div>27
<div id="ring" class="position-absolute"></div>28
</div>29
</div>30
<div class="mx-3 px-1">31
<h4 class="mt-5 py-3 mb-2" style="line-height: 1.3;">Make payments much easier by using all your cards in one place</h4>32
<div>33
<button class="btn btn-lg btn-outline-white">Skip</button>34
<button class="btn btn-lg btn-white ms-1">+ Add card</button>35
</div>36
</div>37
</div>38
</div>39
</div>40
</div>41
42
<div class="card wallet-app mx-auto mx-md-3 mb-4 mb-md-0 overflow-hidden">43
<div class="card-body information">44
<ul class="list-unstyled d-flex justify-content-between align-items-center mt-2">45
<li>46
<p class="mb-0 text-white opacity-70" style="font-size: .875rem;">Welcome</p>47
<p class="mb-0 text-white">Jennifer Simpson</p>48
</li>49
<li>50
<ul class="list-unstyled d-flex justify-content-right align-items-center">51
<li>52
<a>53
<img src="https://mdbootstrap.com/img/new/avatars/16.jpg" class="rounded-3 z-depth-0"54
width="42" alt="avatar image" />55
</a>56
</li>57
</ul>58
</li>59
</ul>60
<hr>61
<div>62
<h4>My Card</h4>63
<p class="mt-2 pt-1 mb-1" style="font-size: .875rem;">VISA</p>64
<h5>1234 5678 9012 3456</h5>65
<p class="pt-2 mb-1" style="font-size: .875rem;">Card balance</p>66
<h5>$25 000</h5>67
</div>68
<div class="pt-2 mt-3">69
<hr>70
<h4 class="mb-3">Last transactions</h4>71
<div class="d-flex flex-row">72
<p class="mb-0 p-2 bg-white text-black rounded-3 me-2"><a href="#!" class="text-black">Shopping</a></p>73
<p class="mb-0 p-2"><a href="#!" class="text-white">Rent</a></p>74
<p class="mb-0 p-2"><a href="#!" class="text-white">Other</a></p>75
</div>76
<div>77
<div class="list-group-flush mt-3">78
<div class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 bg-transparent">79
<div class="d-flex justify-content-start align-items-center">80
<div class="text-white rounded-circle d-flex align-items-center justify-content-center me-4"81
style="background-color: rgba(255, 255, 255, 0.2); width: 48px; height: 48px;">82
<i class="fas fa-home" aria-hidden="true"></i>83
</div>84
<div class="d-flex flex-column">85
<p class="small font-weight-bold mb-0 text-white">House Purchase</p>86
<p class="small opacity-70 mb-0 text-white">Airbnb house</p>87
</div>88
</div>89
<p class="font-weight-bold mb-0 text-white">-350$</p>90
</div>91
<div class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 bg-transparent">92
<div class="d-flex justify-content-start align-items-center">93
<div class="text-white rounded-circle d-flex align-items-center justify-content-center me-4"94
style="background-color: rgba(255, 255, 255, 0.2); width: 48px; height: 48px;">95
<i class="fas fa-car" aria-hidden="true"></i>96
</div>97
<div class="d-flex flex-column">98
<p class="small font-weight-bold mb-0 text-white">Car Purchase</p>99
<p class="small text-white opacity-70 mb-0">Auto Loan</p>100
</div>101
</div>102
<p class="font-weight-bold text-white mb-0">-280$</p>103
</div>104
<div class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 bg-transparent">105
<div class="d-flex justify-content-start align-items-center">106
<div class="text-white rounded-circle d-flex align-items-center justify-content-center me-4"107
style="background-color: rgba(255, 255, 255, 0.2); width: 48px; height: 48px;">108
<i class="fas fa-shopping-bag" aria-hidden="true"></i>109
</div>110
<div class="d-flex flex-column">111
<p class="small font-weight-bold mb-0 text-white">Shopping</p>112
<p class="small text-white opacity-70 mb-0">Zalando, Apple</p>113
</div>114
</div>115
<p class="font-weight-bold text-white mb-0">-430$</p>116
</div>117
<div class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 bg-transparent">118
<div class="d-flex justify-content-start align-items-center">119
<div class="text-white rounded-circle d-flex align-items-center justify-content-center me-4"120
style="background-color: rgba(255, 255, 255, 0.2); width: 48px; height: 48px;">121
<i class="fas fa-shopping-bag" aria-hidden="true"></i>122
</div>123
<div class="d-flex flex-column">124
<p class="small font-weight-bold mb-0 text-white">Salary</p>125
<p class="small text-white opacity-70 mb-0">Payment from employer</p>126
</div>127
</div>128
<p class="font-weight-bold text-white mb-0">4000$</p>129
</div>130
</div>131
</div>132
</div>133
</div>134
</div>135
136
</div>xxxxxxxxxx1
body {2
background-color: #D2F1FF;3
}4
5
.wallet-app {6
width: 21rem;7
border-radius: 30px;8
height: 700px;9
/* fallback for old browsers */10
background: #1488cc;11
background: linear-gradient(to left, #283593, #1976d2);12
color: #fff;13
}14
#credit-card {15
height: 173px;16
width: 288px;17
background: rgba(255, 255, 255, 0.2);18
backdrop-filter: blur(30px);19
}20
#logo-visa {21
width: 40px;22
}23
#chip {24
width: 30px;25
}26
#circle-1 {27
height: 150px;28
width: 150px;29
top: -50px;30
left: -60px;31
background: radial-gradient(#006db3, #29b6f6);32
}33
#circle-2 {34
height: 150px;35
width: 150px;36
bottom: -50px;37
right: -90px;38
background: radial-gradient(#006db3, #29b6f6);39
}40
#ring {41
height: 450px;42
width: 450px;43
border-radius: 50%;44
background: transparent;45
border: 50px solid rgba(255, 255, 255, 0.1);46
bottom: -250px;47
right: -250px;48
box-sizing: border-box;49
}50
#ring::after {51
content: "";52
position: absolute;53
height: 550px;54
width: 550px;55
border-radius: 50%;56
background: transparent;57
border: 30px solid rgba(255, 255, 255, 0.1);58
bottom: -80px;59
right: -110px;60
box-sizing: border-box;61
}62
63
.card.wallet-app>.card.history {64
border-radius: 21px;65
margin-top: -35px;66
}1
1
Console errors: 0