#212121
1.flip-card { 2 background-color: transparent; 3 width: 240px; 4 height: 154px; 5 perspective: 1000px; 6 color: white; 7} 8 9.heading_8264 { 10 position: absolute; 11 letter-spacing: .2em; 12 font-size: 0.5em; 13 top: 2em; 14 left: 18.6em; 15} 16 17.logo { 18 position: absolute; 19 top: 6.8em; 20 left: 11.7em; 21} 22 23.chip { 24 position: absolute; 25 top: 2.3em; 26 left: 1.5em; 27} 28 29.contactless { 30 position: absolute; 31 top: 3.5em; 32 left: 12.4em; 33} 34 35.number { 36 position: absolute; 37 font-weight: bold; 38 font-size: .6em; 39 top: 8.3em; 40 left: 1.6em; 41} 42 43.valid_thru { 44 position: absolute; 45 font-weight: bold; 46 top: 635.8em; 47 font-size: .01em; 48 left: 140.3em; 49} 50 51.date_8264 { 52 position: absolute; 53 font-weight: bold; 54 font-size: 0.5em; 55 top: 13.6em; 56 left: 3.2em; 57} 58 59.name { 60 position: absolute; 61 font-weight: bold; 62 font-size: 0.5em; 63 top: 16.1em; 64 left: 2em; 65} 66 67.strip { 68 position: absolute; 69 background-color: black; 70 width: 15em; 71 height: 1.5em; 72 top: 2.4em; 73 background: repeating-linear-gradient( 74 45deg, 75 #303030, 76 #303030 10px, 77 #202020 10px, 78 #202020 20px 79 ); 80} 81 82.mstrip { 83 position: absolute; 84 background-color: rgb(255, 255, 255); 85 width: 8em; 86 height: 0.8em; 87 top: 5em; 88 left: .8em; 89 border-radius: 2.5px; 90} 91 92.sstrip { 93 position: absolute; 94 background-color: rgb(255, 255, 255); 95 width: 4.1em; 96 height: 0.8em; 97 top: 5em; 98 left: 10em; 99 border-radius: 2.5px; 100} 101 102.code { 103 font-weight: bold; 104 text-align: center; 105 margin: .2em; 106 color: black; 107} 108 109.flip-card-inner { 110 position: relative; 111 width: 100%; 112 height: 100%; 113 text-align: center; 114 transition: transform 0.8s; 115 transform-style: preserve-3d; 116} 117 118.flip-card:hover .flip-card-inner { 119 transform: rotateY(180deg); 120} 121 122.flip-card-front, .flip-card-back { 123 box-shadow: 0 8px 14px 0 rgba(0,0,0,0.2); 124 position: absolute; 125 display: flex; 126 flex-direction: column; 127 justify-content: center; 128 width: 100%; 129 height: 100%; 130 -webkit-backface-visibility: hidden; 131 backface-visibility: hidden; 132 border-radius: 1rem; 133} 134 135.flip-card-front { 136 box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset; 137 background-color: #171717; 138} 139 140.flip-card-back { 141 box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset; 142 background-color: #171717; 143 transform: rotateY(180deg); 144}
14K views
14K views
Comments
1faxriddin20 22. October at 15:09
22. October at 15:09
nice
MIT License