-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyle.css
281 lines (245 loc) · 8.87 KB
/
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,700|Nova+Mono&display=swap');
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,700&display=swap');
body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: white;
background-color: #00b7ff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='540' height='450' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='.1'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/svg%3E");
}
.modal-wrapper {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
width: 80vw;
background-color: #edeef2;
border-radius: 20px;
box-shadow: 0 0 10px -5px #2d2d2d;
padding: 1rem;
box-sizing: border-box;
}
.card-image {
font-family: 'Nova Mono', monospace;
position: relative;
width: 100%;
max-width: 300px;
min-height: 160px;
max-height: 190px;
margin-bottom: 1rem;
z-index: 0;
}
.card-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-width: 300px;
box-shadow: 0px 10px 10px -10px black;
}
.card-logo {
position: absolute;
right: 0.5rem;
display: flex;
width: 50px;
height: 30px;
}
.card-front .card-logo {
top: 0.5rem;
}
.card-rear .card-logo {
bottom: 1rem;
}
.logo-circle {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
}
.logo-circle.left {
background-color: #eb001b;
}
.logo-circle.right {
background-color: #f79e1b;
opacity: 0.8;
margin-left: -10px;
}
.card-front,
.card-rear {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: #edeef2;
font-size: 14px;
letter-spacing: 1px;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column wrap;
backface-visibility: hidden;
transition: transform .5s linear 0s;
}
.card-front .card-number {
z-index: 2;
}
.card-front .card-info {
display: flex;
flex-flow: column wrap;
font-size: 12px;
}
.card-front .card-info.left {
text-align: left;
position: absolute;
left: 0.75rem;
bottom: 0.75rem;
}
.card-front .card-info.right {
text-align: right;
position: absolute;
right: 0.75rem;
bottom: 0.75rem;
}
.card-front .card-holder-title,
.card-front .valid-thru-title {
font-size: 10px;
margin-bottom: 5px;
}
.card-rear .black-bar {
position: absolute;
left: 0px;
top: 10%;
width: 100%;
height: 30px;
background-color: black;
}
.card-rear .card-info {
width: 100%;
display: flex;
justify-content: flex-start;
padding-left: 5%;
z-index: 2;
}
.card-rear .card-info .white-bar {
width: 50%;
height: 30px;
background-color: #757575;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' viewBox='0 0 20 20'%3E%3Cg %3E%3Cpolygon fill='%23ffffff' points='20 10 10 0 0 0 20 20'/%3E%3Cpolygon fill='%23ffffff' points='0 10 0 20 10 20'/%3E%3C/g%3E%3C/svg%3E");
}
.card-rear .card-info .security-code {
background: white;
color: #2d2d2d;
border-radius: 5px;
padding: 5px 10px;
margin: 0 10px;
}
/* TRANSITION EFFECT */
.card-front {
transform: perspective(600px) rotateY(0deg);
}
.card-rear {
transform: perspective(600px) rotateY(180deg);
}
.active-border {
display: none;
position: fixed;
border: 1px solid #f79e1b;
border-radius: 5px;
padding: 3px;
transition: left ease-in-out 0.5s, top ease-in-out 0.5s,
width ease-in-out 0.5s, height ease-in-out 0.5s;
}
.card-form {
font-family: 'IBM Plex Sans', sans-serif;
height: 50%;
display: flex;
align-items: center;
justify-content: center;
}
form {
text-align: center;
}
.form-input {
position: relative;
margin: 10px auto 5px auto;
}
.form-input input {
outline: none;
background: transparent;
border: none;
border-radius: 0;
padding: 10px 5px 10px 40px;
border-bottom: 2px solid #757575;
transition: all linear 0.2s;
}
.form-input input:focus {
box-shadow: inset 0 0 50px 50px #e1e3ea;
border: 0;
border-bottom: 2px solid black;
border-radius: 10px 10px 0 0;
}
.form-input i {
color: #2d2d2d;
position: absolute;
top: 10px;
left: 15px;
font-size: 12px;
}
.btn {
background: #642b73;
background: -webkit-linear-gradient(to right, #c6426e, #642b73);
background: linear-gradient(to right, #c6426e, #642b73);
border-radius: 20px;
text-align: center;
padding: 10px 30px;
box-sizing: border-box;
display: inline-block;
transition: box-shadow ease-in-out 0.2s;
cursor: pointer;
}
.btn:hover {
box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.35);
}
.btn button {
outline: none;
border: none;
font-size: 14px;
background: transparent;
color: white;
padding: 0;
}
.btn i {
position: relative;
top: 0;
left: 0;
color: white;
font-size: 14px;
}
@media screen and (min-width: 500px) {
.modal-wrapper {
width: 70vw;
}
}
@media screen and (min-width: 768px) {
.modal-wrapper {
width: 80vw;
flex-flow: row nowrap;
justify-content: space-evenly;
}
}
@media screen and (min-width: 900px) {
.modal-wrapper {
width: 70vw;
}
}
@media screen and (min-width: 1200px) {
.modal-wrapper {
width: 50vw;
}
}