Component - Kodeset

Card

  1<div class="flip-card">
  2  <div class="flip-card-inner">
  3    <div class="flip-card-front">
  4      <p class="heading_8264">MASTERCARD</p>
  5      <svg
  6        class="logo"
  7        xmlns="http://www.w3.org/2000/svg"
  8        x="0px"
  9        y="0px"
 10        width="36"
 11        height="36"
 12        viewBox="0 0 48 48"
 13      >
 14        <path
 15          fill="#ff9800"
 16          d="M32 10A14 14 0 1 0 32 38A14 14 0 1 0 32 10Z"
 17        ></path>
 18        <path
 19          fill="#d50000"
 20          d="M16 10A14 14 0 1 0 16 38A14 14 0 1 0 16 10Z"
 21        ></path>
 22        <path
 23          fill="#ff3d00"
 24          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"
 25        ></path>
 26      </svg>
 27      <svg
 28        version="1.1"
 29        class="chip"
 30        id="Layer_1"
 31        xmlns="http://www.w3.org/2000/svg"
 32        xmlns:xlink="http://www.w3.org/1999/xlink"
 33        x="0px"
 34        y="0px"
 35        width="30px"
 36        height="30px"
 37        viewBox="0 0 50 50"
 38        xml:space="preserve"
 39      >
 40        <image
 41          id="image0"
 42          width="50"
 43          height="50"
 44          x="0"
 45          y="0"
 46          href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
 47              AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAB6VBMVEUAAACNcTiVeUKVeUOY
 48              fEaafEeUeUSYfEWZfEaykleyklaXe0SWekSZZjOYfEWYe0WXfUWXe0WcgEicfkiXe0SVekSXekSW
 49              ekKYe0a9nF67m12ZfUWUeEaXfESVekOdgEmVeUWWekSniU+VeUKVeUOrjFKYfEWliE6WeESZe0GS
 50              e0WYfES7ml2Xe0WXeESUeEOWfEWcf0eWfESXe0SXfEWYekSVeUKXfEWxklawkVaZfEWWekOUekOW
 51              ekSYfESZe0eXekWYfEWZe0WZe0eVeUSWeETAnmDCoWLJpmbxy4P1zoXwyoLIpWbjvXjivnjgu3bf
 52              u3beunWvkFWxkle/nmDivXiWekTnwXvkwHrCoWOuj1SXe0TEo2TDo2PlwHratnKZfEbQrWvPrWua
 53              fUfbt3PJp2agg0v0zYX0zYSfgkvKp2frxX7mwHrlv3rsxn/yzIPgvHfduXWXe0XuyIDzzISsjVO1
 54              lVm0lFitjVPzzIPqxX7duna0lVncuHTLqGjvyIHeuXXxyYGZfUayk1iyk1e2lln1zYTEomO2llrb
 55              tnOafkjFpGSbfkfZtXLhvHfkv3nqxH3mwXujhU3KqWizlFilh06khk2fgkqsjlPHpWXJp2erjVOh
 56              g0yWe0SliE+XekShhEvAn2D///+gx8TWAAAARnRSTlMACVCTtsRl7Pv7+vxkBab7pZv5+ZlL/UnU
 57              /f3SJCVe+Fx39naA9/75XSMh0/3SSkia+pil/KRj7Pr662JPkrbP7OLQ0JFOijI1MwAAAAFiS0dE
 58              orDd34wAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfnAg0IDx2lsiuJAAACLElEQVRIx2Ng
 59              GAXkAUYmZhZWPICFmYkRVQcbOwenmzse4MbFzc6DpIGXj8PD04sA8PbhF+CFaxEU8iWkAQT8hEVg
 60              OkTF/InR4eUVICYO1SIhCRMLDAoKDvFDVhUaEhwUFAjjSUlDdMiEhcOEItzdI6OiYxA6YqODIt3d
 61              I2DcuDBZsBY5eVTr4xMSYcyk5BRUOXkFsBZFJTQnp6alQxgZmVloUkrKYC0qqmji2WE5EEZuWB6a
 62              lKoKdi35YQUQRkFYPpFaCouKIYzi6EDitJSUlsGY5RWVRGjJLyxNy4ZxqtIqqvOxaVELQwZFZdkI
 63              JVU1RSiSalAt6rUwUBdWG1CP6pT6gNqwOrgCdQyHNYR5YQFhDXj8MiK1IAeyN6aORiyBjByVTc0F
 64              qBoKWpqwRCVSgilOaY2OaUPw29qjOzqLvTAchpos47u6EZyYnngUSRwpuTe6D+6qaFQdOPNLRzOM
 65              1dzhRZyW+CZouHk3dWLXglFcFIflQhj9YWjJGlZcaKAVSvjyPrRQ0oQVKDAQHlYFYUwIm4gqExGm
 66              BSkutaVQJeomwViTJqPK6OhCy2Q9sQBk8cY0DxjTJw0lAQWK6cOKfgNhpKK7ZMpUeF3jPa28BCET
 67              amiEqJKM+X1gxvWXpoUjVIVPnwErw71nmpgiqiQGBjNzbgs3j1nus+fMndc+Cwm0T52/oNR9lsdC
 68              S24ra7Tq1cbWjpXV3sHRCb1idXZ0sGdltXNxRateRwHRAACYHutzk/2I5QAAACV0RVh0ZGF0ZTpj
 69              cmVhdGUAMjAyMy0wMi0xM1QwODoxNToyOSswMDowMEUnN7UAAAAldEVYdGRhdGU6bW9kaWZ5ADIw
 70              MjMtMDItMTNUMDg6MTU6MjkrMDA6MDA0eo8JAAAAKHRFWHRkYXRlOnRpbWVzdGFtcAAyMDIzLTAy
 71              LTEzVDA4OjE1OjI5KzAwOjAwY2+u1gAAAABJRU5ErkJggg=="
 72        ></image>
 73      </svg>
 74      <svg
 75        version="1.1"
 76        class="contactless"
 77        id="Layer_1"
 78        xmlns="http://www.w3.org/2000/svg"
 79        xmlns:xlink="http://www.w3.org/1999/xlink"
 80        x="0px"
 81        y="0px"
 82        width="20px"
 83        height="20px"
 84        viewBox="0 0 50 50"
 85        xml:space="preserve"
 86      >
 87        <image
 88          id="image0"
 89          width="50"
 90          height="50"
 91          x="0"
 92          y="0"
 93          href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAQAAAC0NkA6AAAABGdBTUEAALGPC/xhBQAAACBjSFJN
 94              AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAJcEhZ
 95              cwAACxMAAAsTAQCanBgAAAAHdElNRQfnAg0IEzgIwaKTAAADDklEQVRYw+1XS0iUURQ+f5qPyjQf
 96              lGRFEEFK76koKGxRbWyVVLSOgsCgwjZBJJYuKogSIoOonUK4q3U0WVBWFPZYiIE6kuArG3VGzK/F
 97              fPeMM/MLt99/NuHdfPd888/57jn3nvsQWWj/VcMlvMMd5KRTogqx9iCdIjUUmcGR9ImUYowyP3xN
 98              GQJoRLVaZ2DaZf8kyjEJALhI28ELioyiwC+Rc3QZwRYyO/DH51hQgWm6DMIh10KmD4u9O16K49it
 99              VoPOAmcGAWWOepXIRScAoJZ2Frro8oN+EyTT6lWkkg6msZfMSR35QTJmjU0g15tIGSJ08ZZMJkJk
100              HpNZgSkyXosS13TkJpZ62mPIJvOSzC1bp8vRhhCakEk7G9/o4gmZdbpsTcKu0m63FbnBP9Qrc15z
101              bkbemfgNDtEOI8NO5L5O9VYyRYgmJayZ9nPaxZrSjW4+F6Uw9yQqIiIZwhp2huQTf6OIvCZyGM6g
102              DJBZbyXifJXr7FZjGXsdxADxI7HUJFB6iWvsIhFpkoiIiGTJfjJfiCuJg2ZEspq9EHGVpYgzKqwJ
103              qSAOEwuJQ/pxPvE3cYltJCLdxBLiSKKIE5HxJKcTRNeadxfhDiuYw44zVs1dxKwRk/uCxIiQkxKB
104              sSctRVAge9g1E15EHE6yRUaJecRxcWlukdRIbGFOSZCMWQA/iWauIP3slREHXPyliqBcrrD71Amz
105              Z+rD1Mt2Yr8TZc/UR4/YtFnbijnHi3UrN9vKQ9rPaJf867ZiaqDB+czeKYmd3pNa6fuI75MiC0uX
106              XSR5aEMf7s7a6r/PudVXkjFb/SsrCRfROk0Fx6+H1i9kkTGn/E1vEmt1m089fh+RKdQ5O+xNJPUi
107              cUIjO0Dm7HwvErEr0YxeibL1StSh37STafE4I7zcBdRq1DiOkdmlTJVnkQTBTS7X1FYyvfO4piaI
108              nKbDCDaT2anLudYXCRFsQBgAcIF2/Okwgvz5+Z4tsw118dzruvIvjhTB+HOuWy8UvovEH6beitBK
109              xDyxm9MmISKCWrzB7bSlaqGlsf0FC0gMjzTg6GgAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjMtMDIt
110              MTNUMDg6MTk6NTYrMDA6MDCjlq7LAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIzLTAyLTEzVDA4OjE5
111              OjU2KzAwOjAw0ssWdwAAACh0RVh0ZGF0ZTp0aW1lc3RhbXAAMjAyMy0wMi0xM1QwODoxOTo1Nisw
112              MDowMIXeN6gAAAAASUVORK5CYII="
113        ></image>
114      </svg>
115      <p class="number">9759 2484 5269 6576</p>
116      <p class="valid_thru">VALID THRU</p>
117      <p class="date_8264">1 2 / 2 4</p>
118      <p class="name">BRUCE WAYNE</p>
119    </div>
120    <div class="flip-card-back">
121      <div class="strip"></div>
122      <div class="mstrip"></div>
123      <div class="sstrip">
124        <p class="code">***</p>
125      </div>
126    </div>
127  </div>
128</div>

  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}

MIT License

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.