mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-27 20:50:21 +08:00
75 lines
No EOL
1.3 KiB
HTML
75 lines
No EOL
1.3 KiB
HTML
<div class="ball1"></div>
|
|
<div class="card">
|
|
<p>VISA</p>
|
|
<div class="card-num">
|
|
6216 1906 5218 1991
|
|
<p>VALID : 15 - 04 - 2005</p>
|
|
</div>
|
|
</div>
|
|
<div class="ball2"></div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by srinivasaiml - Tags: card */
|
|
.card {
|
|
width: 330px;
|
|
height: 200px;
|
|
background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
|
|
border: 2px solid white;
|
|
border-radius: 20px;
|
|
backdrop-filter: blur(6px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
}
|
|
.ball1 {
|
|
z-index: -9;
|
|
position: absolute;
|
|
height: 150px;
|
|
width: 150px;
|
|
border: 0 solid;
|
|
border-radius: 50%;
|
|
top: 50px;
|
|
margin-left: -350px;
|
|
background: linear-gradient(
|
|
45deg,
|
|
rgb(239, 199, 199),
|
|
rgb(239, 52, 192),
|
|
rgb(232, 184, 95)
|
|
);
|
|
}
|
|
.ball2 {
|
|
position: absolute;
|
|
height: 150px;
|
|
width: 150px;
|
|
border: 0 solid;
|
|
border-radius: 50%;
|
|
bottom: 50px;
|
|
margin-right: -350px;
|
|
z-index: -1;
|
|
background: linear-gradient(
|
|
45deg,
|
|
rgb(239, 199, 199),
|
|
rgb(239, 52, 192),
|
|
rgb(232, 184, 95)
|
|
);
|
|
}
|
|
.card p {
|
|
font-size: 20px;
|
|
text-align: right;
|
|
padding: 10px;
|
|
font-weight: 600;
|
|
color: wheat;
|
|
}
|
|
.card-num {
|
|
color: hsl(0, 100%, 100%);
|
|
margin-left: 20px;
|
|
margin-top: 30px;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
}
|
|
.card-num p {
|
|
color: white;
|
|
font-size: 15px;
|
|
text-align: start;
|
|
}
|
|
|
|
</style>
|
|
|