Back

Card 

  1 
  2<div class="flip-card">
  3  <div class="flip-card-inner">
  4    <div class="flip-card-front">
  5      <p class="heading_8264">MASTERCARD</p>
  6      <svg
  7        class="logo"
  8        xmlns="http://www.w3.org/2000/svg"
  9        x="0px"
 10        y="0px"
 11        width="36"
 12        height="36"
 13        viewBox="0 0 48 48"
 14      >
 15        <path
 16          fill="#ff9800"
 17          d="M32 10A14 14 0 1 0 32 38A14 14 0 1 0 32 10Z"
 18        ></path>
 19        <path
 20          fill="#d50000"
 21          d="M16 10A14 14 0 1 0 16 38A14 14 0 1 0 16 10Z"
 22        ></path>
 23        <path
 24          fill="#ff3d00"
 25          d="M18,24c0,4.755,2.376,8.95,6,11.48c3.624-2.53,6-6.725,6-11.48s-2.376-8.95-6-11.48 C20.376,15.05,18,19.245,18,24z"
 26        ></path>
 27      </svg>
 28      <svg
 29        version="1.1"
 30        class="chip"
 31        id="Layer_1"
 32        xmlns="http://www.w3.org/2000/svg"
 33        xmlns:xlink="http://www.w3.org/1999/xlink"
 34        x="0px"
 35        y="0px"
 36        width="30px"
 37        height="30px"
 38        viewBox="0 0 50 50"
 39        xml:space="preserve"
 40      >
 41        <image
 42          id="image0"
 43          width="50"
 44          height="50"
 45          x="0"
 46          y="0"
 47          href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
 48              AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAB6VBMVEUAAACNcTiVeUKVeUOY
 49              fEaafEeUeUSYfEWZfEaykleyklaXe0SWekSZZjOYfEWYe0WXfUWXe0WcgEicfkiXe0SVekSXekSW
 50              ekKYe0a9nF67m12ZfUWUeEaXfESVekOdgEmVeUWWekSniU+VeUKVeUOrjFKYfEWliE6WeESZe0GS
 51              e0WYfES7ml2Xe0WXeESUeEOWfEWcf0eWfESXe0SXfEWYekSVeUKXfEWxklawkVaZfEWWekOUekOW
 52              ekSYfESZe0eXekWYfEWZe0WZe0eVeUSWeETAnmDCoWLJpmbxy4P1zoXwyoLIpWbjvXjivnjgu3bf
 53              u3beunWvkFWxkle/nmDivXiWekTnwXvkwHrCoWOuj1SXe0TEo2TDo2PlwHratnKZfEbQrWvPrWua
 54              fUfbt3PJp2agg0v0zYX0zYSfgkvKp2frxX7mwHrlv3rsxn/yzIPgvHfduXWXe0XuyIDzzISsjVO1
 55              lVm0lFitjVPzzIPqxX7duna0lVncuHTLqGjvyIHeuXXxyYGZfUayk1iyk1e2lln1zYTEomO2llrb
 56              tnOafkjFpGSbfkfZtXLhvHfkv3nqxH3mwXujhU3KqWizlFilh06khk2fgkqsjlPHpWXJp2erjVOh
 57              g0yWe0SliE+XekShhEvAn2D///+gx8TWAAAARnRSTlMACVCTtsRl7Pv7+vxkBab7pZv5+ZlL/UnU
 58              /f3SJCVe+Fx39naA9/75XSMh0/3SSkia+pil/KRj7Pr662JPkrbP7OLQ0JFOijI1MwAAAAFiS0dE
 59              orDd34wAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfnAg0IDx2lsiuJAAACLElEQVRIx2Ng
 60              GAXkAUYmZhZWPICFmYkRVQcbOwenmzse4MbFzc6DpIGXj8PD04sA8PbhF+CFaxEU8iWkAQT8hEVg
 61              OkTF/InR4eUVICYO1SIhCRMLDAoKDvFDVhUaEhwUFAjjSUlDdMiEhcOEItzdI6OiYxA6YqODIt3d
 62              I2DcuDBZsBY5eVTr4xMSYcyk5BRUOXkFsBZFJTQnp6alQxgZmVloUkrKYC0qqmji2WE5EEZuWB6a
 63              lKoKdi35YQUQRkFYPpFaCouKIYzi6EDitJSUlsGY5RWVRGjJLyxNy4ZxqtIqqvOxaVELQwZFZdkI
 64              JVU1RSiSalAt6rUwUBdWG1CP6pT6gNqwOrgCdQyHNYR5YQFhDXj8MiK1IAeyN6aORiyBjByVTc0F
 65              qBoKWpqwRCVSgilOaY2OaUPw29qjOzqLvTAchpos47u6EZyYnngUSRwpuTe6D+6qaFQdOPNLRzOM
 66              1dzhRZyW+CZouHk3dWLXglFcFIflQhj9YWjJGlZcaKAVSvjyPrRQ0oQVKDAQHlYFYUwIm4gqExGm
 67              BSkutaVQJeomwViTJqPK6OhCy2Q9sQBk8cY0DxjTJw0lAQWK6cOKfgNhpKK7ZMpUeF3jPa28BCET
 68              amiEqJKM+X1gxvWXpoUjVIVPnwErw71nmpgiqiQGBjNzbgs3j1nus+fMndc+Cwm0T52/oNR9lsdC
 69              S24ra7Tq1cbWjpXV3sHRCb1idXZ0sGdltXNxRateRwHRAACYHutzk/2I5QAAACV0RVh0ZGF0ZTpj
 70              cmVhdGUAMjAyMy0wMi0xM1QwODoxNToyOSswMDowMEUnN7UAAAAldEVYdGRhdGU6bW9kaWZ5ADIw
 71              MjMtMDItMTNUMDg6MTU6MjkrMDA6MDA0eo8JAAAAKHRFWHRkYXRlOnRpbWVzdGFtcAAyMDIzLTAy
 72              LTEzVDA4OjE1OjI5KzAwOjAwY2+u1gAAAABJRU5ErkJggg=="
 73        ></image>
 74      </svg>
 75      <svg
 76        version="1.1"
 77        class="contactless"
 78        id="Layer_1"
 79        xmlns="http://www.w3.org/2000/svg"
 80        xmlns:xlink="http://www.w3.org/1999/xlink"
 81        x="0px"
 82        y="0px"
 83        width="20px"
 84        height="20px"
 85        viewBox="0 0 50 50"
 86        xml:space="preserve"
 87      >
 88        <image
 89          id="image0"
 90          width="50"
 91          height="50"
 92          x="0"
 93          y="0"
 94          href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAQAAAC0NkA6AAAABGdBTUEAALGPC/xhBQAAACBjSFJN
 95              AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAJcEhZ
 96              cwAACxMAAAsTAQCanBgAAAAHdElNRQfnAg0IEzgIwaKTAAADDklEQVRYw+1XS0iUURQ+f5qPyjQf
 97              lGRFEEFK76koKGxRbWyVVLSOgsCgwjZBJJYuKogSIoOonUK4q3U0WVBWFPZYiIE6kuArG3VGzK/F
 98              fPeMM/MLt99/NuHdfPd888/57jn3nvsQWWj/VcMlvMMd5KRTogqx9iCdIjUUmcGR9ImUYowyP3xN
 99              GQJoRLVaZ2DaZf8kyjEJALhI28ELioyiwC+Rc3QZwRYyO/DH51hQgWm6DMIh10KmD4u9O16K49it
100              VoPOAmcGAWWOepXIRScAoJZ2Frro8oN+EyTT6lWkkg6msZfMSR35QTJmjU0g15tIGSJ08ZZMJkJk
101              HpNZgSkyXosS13TkJpZ62mPIJvOSzC1bp8vRhhCakEk7G9/o4gmZdbpsTcKu0m63FbnBP9Qrc15z
102              bkbemfgNDtEOI8NO5L5O9VYyRYgmJayZ9nPaxZrSjW4+F6Uw9yQqIiIZwhp2huQTf6OIvCZyGM6g
103              DJBZbyXifJXr7FZjGXsdxADxI7HUJFB6iWvsIhFpkoiIiGTJfjJfiCuJg2ZEspq9EHGVpYgzKqwJ
104              qSAOEwuJQ/pxPvE3cYltJCLdxBLiSKKIE5HxJKcTRNeadxfhDiuYw44zVs1dxKwRk/uCxIiQkxKB
105              sSctRVAge9g1E15EHE6yRUaJecRxcWlukdRIbGFOSZCMWQA/iWauIP3slREHXPyliqBcrrD71Amz
106              Z+rD1Mt2Yr8TZc/UR4/YtFnbijnHi3UrN9vKQ9rPaJf867ZiaqDB+czeKYmd3pNa6fuI75MiC0uX
107              XSR5aEMf7s7a6r/PudVXkjFb/SsrCRfROk0Fx6+H1i9kkTGn/E1vEmt1m089fh+RKdQ5O+xNJPUi
108              cUIjO0Dm7HwvErEr0YxeibL1StSh37STafE4I7zcBdRq1DiOkdmlTJVnkQTBTS7X1FYyvfO4piaI
109              nKbDCDaT2anLudYXCRFsQBgAcIF2/Okwgvz5+Z4tsw118dzruvIvjhTB+HOuWy8UvovEH6beitBK
110              xDyxm9MmISKCWrzB7bSlaqGlsf0FC0gMjzTg6GgAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjMtMDIt
111              MTNUMDg6MTk6NTYrMDA6MDCjlq7LAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIzLTAyLTEzVDA4OjE5
112              OjU2KzAwOjAw0ssWdwAAACh0RVh0ZGF0ZTp0aW1lc3RhbXAAMjAyMy0wMi0xM1QwODoxOTo1Nisw
113              MDowMIXeN6gAAAAASUVORK5CYII="
114        ></image>
115      </svg>
116      <p class="number">9759 2484 5269 6576</p>
117      <p class="valid_thru">VALID THRU</p>
118      <p class="date_8264">1 2 / 2 4</p>
119      <p class="name">BRUCE WAYNE</p>
120    </div>
121    <div class="flip-card-back">
122      <div class="strip"></div>
123      <div class="mstrip"></div>
124      <div class="sstrip">
125        <p class="code">***</p>
126      </div>
127    </div>
128  </div>
129</div>
          
  1 
  2.flip-card {
  3  background-color: transparent;
  4  width: 240px;
  5  height: 154px;
  6  perspective: 1000px;
  7  color: white;
  8}
  9 
 10.heading_8264 {
 11  position: absolute;
 12  letter-spacing: .2em;
 13  font-size: 0.5em;
 14  top: 2em;
 15  left: 18.6em;
 16}
 17 
 18.logo {
 19  position: absolute;
 20  top: 6.8em;
 21  left: 11.7em;
 22}
 23 
 24.chip {
 25  position: absolute;
 26  top: 2.3em;
 27  left: 1.5em;
 28}
 29 
 30.contactless {
 31  position: absolute;
 32  top: 3.5em;
 33  left: 12.4em;
 34}
 35 
 36.number {
 37  position: absolute;
 38  font-weight: bold;
 39  font-size: .6em;
 40  top: 8.3em;
 41  left: 1.6em;
 42}
 43 
 44.valid_thru {
 45  position: absolute;
 46  font-weight: bold;
 47  top: 635.8em;
 48  font-size: .01em;
 49  left: 140.3em;
 50}
 51 
 52.date_8264 {
 53  position: absolute;
 54  font-weight: bold;
 55  font-size: 0.5em;
 56  top: 13.6em;
 57  left: 3.2em;
 58}
 59 
 60.name {
 61  position: absolute;
 62  font-weight: bold;
 63  font-size: 0.5em;
 64  top: 16.1em;
 65  left: 2em;
 66}
 67 
 68.strip {
 69  position: absolute;
 70  background-color: black;
 71  width: 15em;
 72  height: 1.5em;
 73  top: 2.4em;
 74  background: repeating-linear-gradient(
 75    45deg,
 76    #303030,
 77    #303030 10px,
 78    #202020 10px,
 79    #202020 20px
 80  );
 81}
 82 
 83.mstrip {
 84  position: absolute;
 85  background-color: rgb(255, 255, 255);
 86  width: 8em;
 87  height: 0.8em;
 88  top: 5em;
 89  left: .8em;
 90  border-radius: 2.5px;
 91}
 92 
 93.sstrip {
 94  position: absolute;
 95  background-color: rgb(255, 255, 255);
 96  width: 4.1em;
 97  height: 0.8em;
 98  top: 5em;
 99  left: 10em;
100  border-radius: 2.5px;
101}
102 
103.code {
104  font-weight: bold;
105  text-align: center;
106  margin: .2em;
107  color: black;
108}
109 
110.flip-card-inner {
111  position: relative;
112  width: 100%;
113  height: 100%;
114  text-align: center;
115  transition: transform 0.8s;
116  transform-style: preserve-3d;
117}
118 
119.flip-card:hover .flip-card-inner {
120  transform: rotateY(180deg);
121}
122 
123.flip-card-front, .flip-card-back {
124  box-shadow: 0 8px 14px 0 rgba(0,0,0,0.2);
125  position: absolute;
126  display: flex;
127  flex-direction: column;
128  justify-content: center;
129  width: 100%;
130  height: 100%;
131  -webkit-backface-visibility: hidden;
132  backface-visibility: hidden;
133  border-radius: 1rem;
134}
135 
136.flip-card-front {
137  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;
138  background-color: #171717;
139}
140 
141.flip-card-back {
142  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;
143  background-color: #171717;
144  transform: rotateY(180deg);
145}

MIT License

Copyright © 2026 Praashoo7 (Prashant)


Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:


The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.


THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.