Skip to content

Commit b224cd1

Browse files
SaipradyumnagoudSaipradyumnagoud
authored
Merge pull request #1 from Saipradyumnagoud/Saipradyumnagoud-patch-1
Add Debit card hover effect
2 parents 69f3bf0 + 06614fc commit b224cd1

File tree

2 files changed

+226
-0
lines changed

2 files changed

+226
-0
lines changed

‎Debit Card Hover Effect/index.html

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Debit Card</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
11+
<div class="flip-card">
12+
<div class="flip-card-inner">
13+
<div class="flip-card-front">
14+
<p class="heading_8264">MASTERCARD</p>
15+
<svg class="logo" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="36" height="36" viewBox="0 0 48 48">
16+
<path fill="#ff9800" d="M32 10A14 14 0 1 0 32 38A14 14 0 1 0 32 10Z"></path><path fill="#d50000" d="M16 10A14 14 0 1 0 16 38A14 14 0 1 0 16 10Z"></path><path fill="#ff3d00" 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"></path>
17+
</svg>
18+
<svg version="1.1" class="chip" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px" height="30px" viewBox="0 0 50 50" xml:space="preserve"> <image id="image0" width="50" height="50" x="0" y="0" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
19+
AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAB6VBMVEUAAACNcTiVeUKVeUOY
20+
fEaafEeUeUSYfEWZfEaykleyklaXe0SWekSZZjOYfEWYe0WXfUWXe0WcgEicfkiXe0SVekSXekSW
21+
ekKYe0a9nF67m12ZfUWUeEaXfESVekOdgEmVeUWWekSniU+VeUKVeUOrjFKYfEWliE6WeESZe0GS
22+
e0WYfES7ml2Xe0WXeESUeEOWfEWcf0eWfESXe0SXfEWYekSVeUKXfEWxklawkVaZfEWWekOUekOW
23+
ekSYfESZe0eXekWYfEWZe0WZe0eVeUSWeETAnmDCoWLJpmbxy4P1zoXwyoLIpWbjvXjivnjgu3bf
24+
u3beunWvkFWxkle/nmDivXiWekTnwXvkwHrCoWOuj1SXe0TEo2TDo2PlwHratnKZfEbQrWvPrWua
25+
fUfbt3PJp2agg0v0zYX0zYSfgkvKp2frxX7mwHrlv3rsxn/yzIPgvHfduXWXe0XuyIDzzISsjVO1
26+
lVm0lFitjVPzzIPqxX7duna0lVncuHTLqGjvyIHeuXXxyYGZfUayk1iyk1e2lln1zYTEomO2llrb
27+
tnOafkjFpGSbfkfZtXLhvHfkv3nqxH3mwXujhU3KqWizlFilh06khk2fgkqsjlPHpWXJp2erjVOh
28+
g0yWe0SliE+XekShhEvAn2D///+gx8TWAAAARnRSTlMACVCTtsRl7Pv7+vxkBab7pZv5+ZlL/UnU
29+
/f3SJCVe+Fx39naA9/75XSMh0/3SSkia+pil/KRj7Pr662JPkrbP7OLQ0JFOijI1MwAAAAFiS0dE
30+
orDd34wAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfnAg0IDx2lsiuJAAACLElEQVRIx2Ng
31+
GAXkAUYmZhZWPICFmYkRVQcbOwenmzse4MbFzc6DpIGXj8PD04sA8PbhF+CFaxEU8iWkAQT8hEVg
32+
OkTF/InR4eUVICYO1SIhCRMLDAoKDvFDVhUaEhwUFAjjSUlDdMiEhcOEItzdI6OiYxA6YqODIt3d
33+
I2DcuDBZsBY5eVTr4xMSYcyk5BRUOXkFsBZFJTQnp6alQxgZmVloUkrKYC0qqmji2WE5EEZuWB6a
34+
lKoKdi35YQUQRkFYPpFaCouKIYzi6EDitJSUlsGY5RWVRGjJLyxNy4ZxqtIqqvOxaVELQwZFZdkI
35+
JVU1RSiSalAt6rUwUBdWG1CP6pT6gNqwOrgCdQyHNYR5YQFhDXj8MiK1IAeyN6aORiyBjByVTc0F
36+
qBoKWpqwRCVSgilOaY2OaUPw29qjOzqLvTAchpos47u6EZyYnngUSRwpuTe6D+6qaFQdOPNLRzOM
37+
1dzhRZyW+CZouHk3dWLXglFcFIflQhj9YWjJGlZcaKAVSvjyPrRQ0oQVKDAQHlYFYUwIm4gqExGm
38+
BSkutaVQJeomwViTJqPK6OhCy2Q9sQBk8cY0DxjTJw0lAQWK6cOKfgNhpKK7ZMpUeF3jPa28BCET
39+
amiEqJKM+X1gxvWXpoUjVIVPnwErw71nmpgiqiQGBjNzbgs3j1nus+fMndc+Cwm0T52/oNR9lsdC
40+
S24ra7Tq1cbWjpXV3sHRCb1idXZ0sGdltXNxRateRwHRAACYHutzk/2I5QAAACV0RVh0ZGF0ZTpj
41+
cmVhdGUAMjAyMy0wMi0xM1QwODoxNToyOSswMDowMEUnN7UAAAAldEVYdGRhdGU6bW9kaWZ5ADIw
42+
MjMtMDItMTNUMDg6MTU6MjkrMDA6MDA0eo8JAAAAKHRFWHRkYXRlOnRpbWVzdGFtcAAyMDIzLTAy
43+
LTEzVDA4OjE1OjI5KzAwOjAwY2+u1gAAAABJRU5ErkJggg=="></image>
44+
</svg>
45+
<svg version="1.1" class="contactless" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="20px" viewBox="0 0 50 50" xml:space="preserve"> <image id="image0" width="50" height="50" x="0" y="0" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAQAAAC0NkA6AAAABGdBTUEAALGPC/xhBQAAACBjSFJN
46+
AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAJcEhZ
47+
cwAACxMAAAsTAQCanBgAAAAHdElNRQfnAg0IEzgIwaKTAAADDklEQVRYw+1XS0iUURQ+f5qPyjQf
48+
lGRFEEFK76koKGxRbWyVVLSOgsCgwjZBJJYuKogSIoOonUK4q3U0WVBWFPZYiIE6kuArG3VGzK/F
49+
fPeMM/MLt99/NuHdfPd888/57jn3nvsQWWj/VcMlvMMd5KRTogqx9iCdIjUUmcGR9ImUYowyP3xN
50+
GQJoRLVaZ2DaZf8kyjEJALhI28ELioyiwC+Rc3QZwRYyO/DH51hQgWm6DMIh10KmD4u9O16K49it
51+
VoPOAmcGAWWOepXIRScAoJZ2Frro8oN+EyTT6lWkkg6msZfMSR35QTJmjU0g15tIGSJ08ZZMJkJk
52+
HpNZgSkyXosS13TkJpZ62mPIJvOSzC1bp8vRhhCakEk7G9/o4gmZdbpsTcKu0m63FbnBP9Qrc15z
53+
bkbemfgNDtEOI8NO5L5O9VYyRYgmJayZ9nPaxZrSjW4+F6Uw9yQqIiIZwhp2huQTf6OIvCZyGM6g
54+
DJBZbyXifJXr7FZjGXsdxADxI7HUJFB6iWvsIhFpkoiIiGTJfjJfiCuJg2ZEspq9EHGVpYgzKqwJ
55+
qSAOEwuJQ/pxPvE3cYltJCLdxBLiSKKIE5HxJKcTRNeadxfhDiuYw44zVs1dxKwRk/uCxIiQkxKB
56+
sSctRVAge9g1E15EHE6yRUaJecRxcWlukdRIbGFOSZCMWQA/iWauIP3slREHXPyliqBcrrD71Amz
57+
Z+rD1Mt2Yr8TZc/UR4/YtFnbijnHi3UrN9vKQ9rPaJf867ZiaqDB+czeKYmd3pNa6fuI75MiC0uX
58+
XSR5aEMf7s7a6r/PudVXkjFb/SsrCRfROk0Fx6+H1i9kkTGn/E1vEmt1m089fh+RKdQ5O+xNJPUi
59+
cUIjO0Dm7HwvErEr0YxeibL1StSh37STafE4I7zcBdRq1DiOkdmlTJVnkQTBTS7X1FYyvfO4piaI
60+
nKbDCDaT2anLudYXCRFsQBgAcIF2/Okwgvz5+Z4tsw118dzruvIvjhTB+HOuWy8UvovEH6beitBK
61+
xDyxm9MmISKCWrzB7bSlaqGlsf0FC0gMjzTg6GgAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjMtMDIt
62+
MTNUMDg6MTk6NTYrMDA6MDCjlq7LAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIzLTAyLTEzVDA4OjE5
63+
OjU2KzAwOjAw0ssWdwAAACh0RVh0ZGF0ZTp0aW1lc3RhbXAAMjAyMy0wMi0xM1QwODoxOTo1Nisw
64+
MDowMIXeN6gAAAAASUVORK5CYII="></image>
65+
</svg>
66+
<p class="number">9759 2484 5269 6576</p>
67+
<p class="valid_thru">VALID THRU</p>
68+
<p class="date_8264">1 2 / 2 4</p>
69+
<p class="name">BRUCE WAYNE</p>
70+
</div>
71+
<div class="flip-card-back">
72+
<div class="strip"></div>
73+
<div class="mstrip"></div>
74+
<div class="sstrip">
75+
<p class="code">***</p>
76+
</div>
77+
</div>
78+
</div>
79+
</div>
80+
</body>
81+
</html>

‎Debit Card Hover Effect/style.css

+145
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
/* From Uiverse.io by Praashoo7 */
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+
}

0 commit comments

Comments
 (0)