/ittf/lab/tw/t/css/cards-2.css.html.ittf.ittf (primary)

                                            
   1 $group
   2     import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=devanagari,latin-ext")
   3     < *
   4         padding 0
   5         margin 0
   6         box-sizing border-box
   7         font-family "Poppins", sans-serif
   8     < body
   9         background-color #343a40
  10         display flex
  11         justify-content center
  12         align-items center
  13         min-height 100vh
  14         user-select none
  15     . card
  16         border-radius 10px
  17         filter drop-shadow(0 5px 10px 0 #ffffff)
  18         width 400px
  19         height 180px
  20         background-color #ffffff
  21         padding 20px
  22         position relative
  23         z-index 0
  24         overflow hidden
  25         transition 0.6s ease-in
  26     . card::before
  27         content ""
  28         position absolute
  29         z-index -1
  30         top -15px
  31         right -15px
  32         background #7952b3
  33         height 220px
  34         width 25px
  35         border-radius 32px
  36         transform scale(1)
  37         transform-origin 50% 50%
  38         transition transform 0.25s ease-out
  39     . card:hover::before
  40         transition-delay 0.2s
  41         transform scale(40)
  42     . card:hover
  43         color #ffffff
  44     . card p
  45         padding 10px 0