1. <!DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>Document</title>
    8.     <style>
    9.       * {
    10.         margin: 0;
    11.         padding: 0;
    12.       }
    13.       .card {
    14.         /* color: rgba(255, 255, 255, 0.8); */
    15.         position: absolute;
    16.         left: 100px;
    17.         bottom: 100px;
    18.         z-index: 10;
    19.         font-family: sans-serif;
    20.         text-align: center;
    21.         width: 300px;
    22.         height: 500px;
    23.         border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    24.         border-left: 1px solid rgba(255, 255, 255, 0.4);
    25.         background: linear-gradient(to top right, rgba(90, 149, 207, 0.5), rgba(58, 76, 99, 0.8));
    26.         box-shadow: 10px -10px 20px rgba(0, 0, 0, 0.2), -10px 10px 20px rgba(255, 255, 255, 0.1);
    27.         backdrop-filter: blur(6px);
    28.         border-radius: 20px;
    29.         transform: rotate(-15deg);
    30.       }
    31.       h1 {
    32.         margin-top: 50px;
    33.       }
    34.       h2 {
    35.         margin-top: 250px;
    36.       }
    37.       h3,
    38.       h4 {
    39.         padding-left: 60px;
    40.         text-align: left;
    41.       }
    42.       h3 {
    43.         margin-top: 40px;
    44.         text-transform: uppercase;
    45.       }
    46.       h4 {
    47.         margin-top: 10px;
    48.       }
    49.       .circle {
    50.         width: 160px;
    51.         height: 160px;
    52.         position: absolute;
    53.         left: 240px;
    54.         bottom: 20px;
    55.         background: linear-gradient(to top left, rgb(135 116 249), rgb(75 162 237));
    56.         border-radius: 80px;
    57.       }
    58.       .rect {
    59.         width: 160px;
    60.         height: 160px;
    61.         position: absolute;
    62.         left: 110px;
    63.         bottom: 520px;
    64.         background: linear-gradient(to top left, rgba(135, 116, 249, 0.9), rgba(75, 162, 237, 0.9));
    65.         border-radius: 20px;
    66.       }
    67.       body {
    68.         height: 100vh;
    69.         background: radial-gradient(circle at 60% 90%, rgba(46, 103, 161, 1), transparent 60%),
    70.           radial-gradient(circle at 20px 20px, rgba(46, 103, 161, 0.8), transparent 25%), #182336;
    71.       }
    72.     </style>
    73.   </head>
    74.   <body>
    75.     <div class="card">
    76.       <h1>TiKi Platinum</h1>
    77.       <h2>6228 8076 2232 8768</h2>
    78.       <h3>van conf banck</h3>
    79.       <h4>03 / 29</h4>
    80.     </div>
    81.     <div class="circle"></div>
    82.     <div class="rect"></div>
    83.   </body>
    84. </html>