xxxxxxxxxx1
2
<div class="h-100 d-flex justify-content-center align-items-center">3
<!--Relative container--> 4
<div class="position-relative">5
<!--circles-->6
<div id="circle-1" class="position-absolute rounded-circle opacity-80"></div>7
<div id="circle-2" class="position-absolute rounded-circle opacity-80" ></div>8
<!--circles-->9
<div id="credit-card" class="shadow-4 rounded-9 overflow-hidden" data-tilt>10
<div class="p-5">11
<!-- content -->12
<div class="text-white ls-widest opacity-80 fw-light">13
<div class="text-end mb-5 "><img class="mb-4" id="logo-visa" src="https://ascensus-youtube-projects.mdbgo.io/img/visa.png" alt=""> </div>14
<img id="logo-chip" class="mb-4" src="https://ascensus-youtube-projects.mdbgo.io/img/chip.png" alt="">15
<h5 class="mb-3">1234 5678 9012 3456</h5>16
<div class="d-flex justify-content-between">17
<p class="pb-3"> Vamshi Choula</p>18
<p> 12/25</p>19
</div>20
</div>21
<div id="rings" class="position-absolute"></div>22
</div>23
</div>24
<!--Credit card -->25
</div> xxxxxxxxxx1
body{2
background: #1488cc;3
background: linear-gradient(to left, #283593 , #1976d2);4
height:100vh5
}6
#credit-card{7
height: 299px;8
width:450px;9
/* background: hsla(0,100%,0.2); */10
background: rgba(255, 255, 255, 0.2);11
backdrop-filter: blur(30px);12
}13
#circle-1 {14
height: 180px;15
/* height: 200px; */16
/* top: -50px; */17
top:-50px;18
left: -60px;19
width: 180px;20
background: radial-gradient( #006db3, #29b6f6);21
}22
#circle-2 {23
width: 200px;24
height: 200px;25
/* top: -50px; */26
bottom: -90px;27
/* left: -60px; */28
right: -90px;29
background: radial-gradient( #006db3, #29b6f6);30
}31
#logo-visa {32
width: 80px;33
}34
#logo-chip{35
width:50px;36
/* color:gold; */37
}38
#rings{39
width: 500px;40
height: 500px;41
background: transparent;42
border-radius: 50%;43
border: 50px solid rgba(255, 255, 255, 0.1);44
bottom: -250px;45
right: -260px;46
box-sizing: border-box;47
}48
#rings::after{49
content: "";50
height: 600px;51
width: 600px;52
position: absolute;53
border-radius: 50%;54
background: transparent;55
border: 30px solid rgba(255, 255, 255, 0.1);56
bottom: -80px;57
right: -110px;58
box-sizing: border-box;59
}1
1
Console errors: 0