비전공자 개발일기

Credit Card2 본문

HTML _CSS

Credit Card2

HiroDaegu 2022. 12. 19. 07:41
728x90
SMALL

Credit card

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400&display=swap" rel="stylesheet">
    <title>Glassmorphism Debit Card</title>
</head>

<body>
    <div class="circles">
        <div class="circle circle-1"></div>
        <div class="circle circle-2"></div>
    </div>

    <div class="card-group">
        <div class="card">
            <div class="logo"><img
                    src="https://raw.githubusercontent.com/dasShounak/freeUseImages/main/Visa-Logo-PNG-Image.png"
                    alt="Visa"></div>
            <div class="chip"><img src="https://raw.githubusercontent.com/dasShounak/freeUseImages/main/chip.png"
                    alt="chip"></div>
            <div class="number">1234 5678 9012 3456</div>
            <div class="name">Tony Stark</div>
            <div class="from">10/19</div>
            <div class="to">06/21</div>
            <div class="ring"></div>
        </div>
    </div>
</body>

</html>
:root {
    font-size: 24px;
  }
  
  body {
    background: #1488cc;
    /* fallback for old browsers */
    background: linear-gradient(to left, #283593, #1976d2);
    height: 100vh;
    font-family: "Josefin Sans", sans-serif;
  }
  
  /* Background circles start */
  .circle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(#006db3, #29b6f6);
  }
  .circles {
    position: absolute;
    height: 270px;
    width: 450px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .circle-1 {
    height: 180px;
    width: 180px;
    top: -50px;
    left: -60px;
  }
  .circle-2 {
    height: 200px;
    width: 200px;
    bottom: -90px;
    right: -90px;
    opacity: 0.8;
  }
  /* Background circles end */
  
  .card-group {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .card {
    position: relative;
    height: 270px;
    width: 450px;
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(30px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.2);
    overflow: hidden;
  }
  
  .logo img,
  .chip img,
  .number,
  .name,
  .from,
  .to,
  .ring {
    position: absolute; /* All items inside card should have absolute position */
  }
  
  .logo img {
    top: 35px;
    right: 40px;
    width: 80px;
    height: auto;
    opacity: 0.8;
  }
  
  .chip img {
    top: 120px;
    left: 40px;
    width: 50px;
    height: auto;
    opacity: 0.8;
  }
  
  .number,
  .name,
  .from,
  .to {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
    letter-spacing: 2px;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
  }
  
  .number {
    left: 40px;
    bottom: 65px;
    font-family: "Nunito", sans-serif;
  }
  
  .name {
    font-size: 0.5rem;
    left: 40px;
    bottom: 35px;
  }
  
  .from {
    font-size: 0.5rem;
    bottom: 35px;
    right: 110px;
  }
  
  .to {
    font-size: 0.5rem;
    bottom: 35px;
    right: 40px;
  }
  
  /* The two rings on the card background */
  .ring {
    height: 500px;
    width: 500px;
    border-radius: 50%;
    background: transparent;
    border: 50px solid rgba(255, 255, 255, 0.1);
    bottom: -250px;
    right: -250px;
    box-sizing: border-box;
  }
  
  .ring::after {
    content: "";
    position: absolute;
    height: 600px;
    width: 600px;
    border-radius: 50%;
    background: transparent;
    border: 30px solid rgba(255, 255, 255, 0.1);
    bottom: -80px;
    right: -110px;
    box-sizing: border-box;
  }
728x90
LIST

'HTML _CSS' 카테고리의 다른 글

Number Fill Animation  (0) 2022.12.22
Noisy Grainy Icons  (0) 2022.12.21
Elastic Line Animation  (0) 2022.12.18
Create Hover Effect  (0) 2022.12.12
Infinite Ticker  (0) 2022.12.10
'HTML _CSS' Related Articles more