Card by vinodjangid07
#e8e8e8
1.visa-card { 2 display: flex; 3 flex-direction: column; 4 align-items: flex-start; 5 justify-content: flex-end; 6 width: 300px; 7 height: 180px; 8 background-image: radial-gradient( 9 circle 897px at 9% 80.3%, 10 rgba(55, 60, 245, 1) 0%, 11 rgba(234, 161, 15, 0.9) 100.2% 12 ); 13 border-radius: 10px; 14 padding: 20px; 15 font-family: Arial, Helvetica, sans-serif; 16 position: relative; 17 gap: 15px; 18} 19.logoContainer { 20 width: 100%; 21 display: flex; 22 align-items: center; 23 justify-content: flex-end; 24 height: fit-content; 25 position: absolute; 26 top: 0; 27 left: 0; 28 padding: 18px; 29} 30.svgLogo { 31 height: 40px; 32 width: auto; 33} 34.inputstyle::placeholder { 35 color: #ffffff; 36} 37.inputstyle { 38 background-color: transparent; 39 border: none; 40 outline: none; 41 color: white; 42 caret-color: red; 43 font-size: 13px; 44 height: 25px; 45 letter-spacing: 1.5px; 46} 47.number-container { 48 width: 100%; 49 height: fit-content; 50 display: flex; 51 flex-direction: column; 52} 53#cardNumber { 54 width: 100%; 55 height: 25px; 56} 57.name-date-cvv-container { 58 width: 100%; 59 height: 25px; 60 display: flex; 61 gap: 10px; 62} 63.name-wrapper { 64 width: 60%; 65 height: fit-content; 66 display: flex; 67 flex-direction: column; 68} 69.expiry-wrapper, 70.cvv-wrapper { 71 width: 30%; 72 height: fit-content; 73 display: flex; 74 flex-direction: column; 75} 76.cvv-wrapper { 77 width: 10%; 78} 79#expiry, 80#cvv { 81 width: 100%; 82} 83.input-label { 84 font-size: 8px; 85 letter-spacing: 1.5px; 86 color: #e2e2e2; 87 width: 100%; 88} 89
827 views
827 views
MIT License