xxxxxxxxxx1
<div class="d-md-flex justify-content-center align-items-center vh-100">2
3
<div class="card bank-app mx-auto mx-md-3 mb-4 mb-md-0">4
<div class="card-body information">5
<ul class="list-unstyled mt-2 d-flex justify-content-between align-items-center">6
<li>7
<a><i class="fas fa-chevron-left"></i></a>8
</li>9
<li>10
<a href="#!" class="text-white">11
<i class="fab fa-mdb fa-lg"></i>12
</a>13
</li>14
</ul>15
<div class="d-flex align-items-center height-custom">16
<div>17
<div class="text-center mb-5 pb-1">18
<h2 class="fw-900">Go with <span class="main-title title-gradient">your</span19
class="main-title title-gradient"> flow</h2>20
</div>21
<div class="fancy-border-radius-2 d-flex align-items-center justify-content-center">22
<img src="https://mdbootstrap.com/img/Others/dance6.png" alt="sample" class="w-100">23
</div>24
<div class="text-center mt-5 pt-1">25
<p class="lead fw-normal">Start your training</p>26
<button class="btn btn-outline-lemon btn-rounded">Let's go</button>27
</div>28
</div>29
</div>30
</div>31
</div>32
33
<div class="card bank-app mx-auto mx-md-3 mb-4 mb-md-0">34
<div class="card-body information">35
<ul class="list-unstyled mt-2 mb-4 d-flex justify-content-between align-items-center">36
<li>37
<a><i class="fas fa-ellipsis-v"></i></a>38
</li>39
<li>40
<ul class="list-unstyled d-flex justify-content-right align-items-center">41
<li class="pe-3">42
<a href="#!" class="text-white">43
<i class="fas fa-bell"></i>44
<span class="badge rounded-pill badge-notification" style="background-color: #df66c0;">1</span>45
</a>46
</li>47
<li>48
<a>49
<img src="https://mdbootstrap.com/img/new/avatars/14.jpg" class="rounded-circle z-depth-0"50
width="30" alt="avatar image" />51
</a>52
</li>53
</ul>54
</li>55
</ul>56
<h5 class="mb-4 pb-1">Choose moves to learn</h5>57
<div class="row">58
<div class="col-6 pe-2 pb-3">59
<div class="bg-image rounded-circle">60
<img61
src="https://mdbootstrap.com/img/Photos/new-templates/dance7.jpg"62
class="img-fluid rounded-circle"63
alt=""64
/>65
<a href="#!" class="text-reset">66
<div class="mask d-flex align-items-center justify-content-center text-center" style="background-color: rgba(86, 48, 250, .73)">67
<p class="mb-0" style="font-weight: 500;">Top Rock</p>68
</div>69
</a>70
</div>71
</div>72
<div class="col-6 ps-2 pb-3">73
<div class="bg-image rounded-circle">74
<img75
src="https://mdbootstrap.com/img/Photos/new-templates/dance8.jpg"76
class="img-fluid rounded-circle"77
alt=""78
/>79
<a href="#!" class="text-reset">80
<div class="mask d-flex align-items-center justify-content-center text-center" style="background-color: rgba(255, 255, 0, .57)">81
<p class="mb-0" style="font-weight: 500;">Freezes</p>82
</div>83
</a>84
</div>85
</div>86
</div>87
<div class="row">88
<div class="col-6 pe-2 pb-3">89
<div class="bg-image rounded-circle">90
<img91
src="https://mdbootstrap.com/img/Photos/new-templates/dance9.jpg"92
class="img-fluid rounded-circle"93
alt=""94
/>95
<a href="#!" class="text-reset">96
<div class="mask d-flex align-items-center justify-content-center text-center" style="background-color: rgba(142, 72, 221, .73)">97
<p class="mb-0" style="font-weight: 500;">Power Moves</p>98
</div>99
</a>100
</div>101
</div>102
<div class="col-6 ps-2 pb-3">103
<div class="bg-image rounded-circle">104
<img105
src="https://mdbootstrap.com/img/Photos/new-templates/dance10.jpg"106
class="img-fluid rounded-circle"107
alt=""108
/>109
<a href="#!" class="text-reset">110
<div class="mask d-flex align-items-center justify-content-center text-center" style="background-color: rgba(223, 102, 192, .73)">111
<p class="mb-0" style="font-weight: 500;">Footwork</p>112
</div>113
</a>114
</div>115
</div>116
</div>117
<h5 class="mt-4 mb-3">Top Rock - Details</h5>118
<ul>119
<li>Indian Step or Basic Top Rock</li>120
<li>Indian Crosing Over</li>121
<li>Apache</li>122
<li>Salsa Step</li>123
<li>Latino Rock</li>124
<li>Bounce Roller Skate Step</li>125
</ul>126
</div>127
</div>128
129
</div>xxxxxxxxxx1
body {2
background-color: #eee;3
}4
5
.card.bank-app {6
width: 21rem;7
border-radius: 30px;8
/* min-height: 695px; */9
height: 700px;10
background-color: #292829;11
color: #fff;12
}13
14
.card.bank-app .main-title.title-gradient {15
background-image: linear-gradient(450deg, #5630fa, #8e48dd, #df66c0, #fe7aad, #ffff00);16
}17
18
.card.bank-app .title-gradient {19
background-clip: text;20
-webkit-background-clip: text;21
-webkit-text-fill-color: transparent;22
position: relative;23
z-index: 1;24
}25
26
.card.bank-app .main-title {27
color: #cb0c9f28
}29
30
.card.bank-app .fw-900 {31
font-weight: 900;32
}33
34
.card.bank-app .card-body.information {35
border-top-left-radius: 21px;36
border-top-right-radius: 21px;37
}38
39
.small {40
font-size: .81em;41
}42
43
.card.bank-app .card-small {44
border-radius: 10px;45
}46
47
.card.bank-app>.card.history {48
border-radius: 21px;49
margin-top: -35px;50
}51
52
.form-outline .form-control:focus~.form-notch .form-notch-leading {53
border-top: 0.125rem solid #723767;54
border-bottom: 0.125rem solid #723767;55
border-left: 0.125rem solid #723767;56
}57
58
.form-outline .form-control:focus~.form-notch .form-notch-middle {59
border-color: #723767;60
}61
62
.form-outline .form-control:focus~.form-notch .form-notch-trailing {63
border-top: 0.125rem solid #723767;64
border-bottom: 0.125rem solid #723767;65
border-right: 0.125rem solid #723767;66
}67
68
.form-outline .form-control:focus~.form-label {69
color: #723767;70
}71
72
.select-input.focused~.form-notch .form-notch-leading {73
border-top: 2px solid #723767;74
border-bottom: 2px solid #723767;75
border-left: 2px solid #723767;76
}77
78
.select-input.focused~.form-notch .form-notch-middle {79
border-bottom: 2px solid;80
border-color: #723767;81
transition: all 0.2s linear;82
}83
84
.select-input.focused~.form-notch .form-notch-trailing {85
border-top: 2px solid;86
border-bottom: 2px solid;87
border-right: 2px solid;88
border-color: #723767;89
transition: all 0.2s linear;90
}91
92
.select-input.focused~.select-arrow {93
color: #723767;94
}95
96
.input-group>.form-control:focus {97
border-color: #723767;98
box-shadow: inset 0 0 0 1px #723767;99
}100
101
.fancy-border-radius-2 {102
border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;103
width: 100%;104
height: auto;105
background: #8e48dd;106
background: -webkit-linear-gradient(470deg,107
#5630fa,108
#8e48dd,109
#df66c0,110
#fe7aad,111
#ffff00112
);113
background: linear-gradient(470deg,114
#5630fa,115
#8e48dd,116
#df66c0,117
#fe7aad,118
#ffff00119
);120
}121
122
.height-custom {123
height: calc(100% - 51px);124
}125
126
.btn-outline-lemon {127
color: #ffff00;128
border-radius: #ffff00;129
}130
.btn-outline-lemon:hover,131
.btn-outline-lemon:focus {132
color: #ffff00;133
border-radius: #ffff00;134
}1
1
Console errors: 0