-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
92 lines (87 loc) · 3.23 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>Bank card</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="ie=edge" http-equiv="x-ua-compatible">
<style type="text/css">
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
display: -webkit-flex;
-webkit-align-items: center;
-webkit-justify-content: center;
background-image: linear-gradient(to right top, #a2beeb, #8ecfee, #8edde5, #a4e7d5, #c7eec7);
flex-direction: column;
-webkit-flex-direction: column;
}
</style>
<!-- STYLE TO IMPORT TO YOUR PROJECT -->
<link href="assets/css/bank-card.css" rel="stylesheet">
<!-- STYLE TO IMPORT TO YOUR PROJECT -->
</head>
<body>
<!-- PART TO COPY TO YOUR PROJECT -->
<div class="card">
<div class="card-front card-part" id="card-front">
<img alt="" class="card-front-square card-square" src="assets/icons/sim-card-chip.png">
<img alt="" class="card-front-square card-square" src="assets/icons/contactless-payment-white.png"/>
<img alt="" class="card-front-logo card-logo" src="assets/logos/22.svg">
<p class="card-number" id="card-number">**** **** **** ****</p>
<div class="card-space-75">
<span class="card-label">Card holder</span>
<p class="card-info" id="card-holder">Your name here</p>
</div>
<div class="card-space-25">
<span class="card-label">Expires</span>
<p class="card-info" id="card-expires-date">**/**</p>
</div>
</div>
<div class="card-back card-part" id="card-back">
<div class="card-black-line"></div>
<div class="card-back-content">
<div class="card-secret">
<p class="card-secret--last" id="card-secret-cvc">***</p>
</div>
<img alt="" class="card-back-logo card-logo" src="assets/logos/22.svg">
</div>
</div>
</div>
<div>
<form>
<div class="row">
<label>Card holder :</label>
<input id="card-holder-input" placeholder="Card holder name" type="text">
</div>
<div class="row">
<label>Card number :</label>
<input id="card-number-input" maxlength="19" minlength="19" placeholder="Card number" type="text">
</div>
<div class="row">
<div class="col-50">
<label>Expires :</label>
<input id="card-expires-date-input" max="1299" maxlength="5" minlength="5" placeholder="Expires"
type="text">
</div>
<div class="col-50">
<label>CVC :</label>
<input id="card-secret-cvc-input" max="999" maxlength="4" min="100" minlength="4" placeholder="CVC"
type="text">
</div>
</div>
</form>
</div>
<!-- PART TO COPY TO YOUR PROJECT -->
<!-- SCRIPT TO IMPORT TO YOUR PROJECT -->
<script src="assets/js/bank-card.js"></script>
<!-- SCRIPT TO IMPORT TO YOUR PROJECT -->
</body>
</html>