-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
180 lines (178 loc) · 6.34 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- displays site properly based on user's device -->
<meta name="description" content="Interactive card details form">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500&display=swap"
rel="stylesheet"
/>
<!-- favicon -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<!-- Style__Sheet -->
<link rel="stylesheet" href="./style.css" />
<!-- javascript -->
<script defer src="./script.js"></script>
<!-- title -->
<title>Interactive card details form | Frontend Mentor</title>
</head>
<body>
<!-- main container -->
<div class="container">
<!-- left__container for cards and cardholder details -->
<div class="left__container">
<!-- card front image and details -->
<div class="card__container">
<div class="cc__front cc__img_container">
<!-- card front image -->
<img
class="card"
src="./images/bg-card-front.png"
alt=" card_front"
/>
<!-- card branding logo -->
<div class="p__absolute cc__branding">
<img src="./images/card-logo.svg" alt="card_logo" srcset="" />
</div>
<!-- card holder name -->
<div class="p__absolute cc__holder">
<p id="cc__name"></p>
</div>
<!-- card number -->
<div class="p__absolute cc__number">
<p id="cc__number"></p>
</div>
<!-- card expiry date and month -->
<div class="p__absolute cc__date">
<p>
<span id="cc__exp_month"></span>/<span id="cc__exp_year"></span>
</p>
</div>
</div>
<!-- card back image and cvc number -->
<div class="cc__back cc__img_container">
<img class="card" src="./images/bg-card-back.png" alt="card_back" />
<!-- card cvc number -->
<div class="p__absolute cvc__number">
<p id="cvc__number"></p>
</div>
</div>
</div>
</div>
<!-- form wrapper -->
<div class="right__container" id="right__container">
<!-- form -->
<form action="/" id="form">
<!-- div for cardholder name input -->
<div class="input__div">
<!-- label -->
<p class="input__label">CARDHOLDER NAME</p>
<!-- input for cardholder name -->
<input
name="cardHolder"
class="input"
type="text"
placeholder="e.g. Jane Appleseed"
maxlength="16"
/>
<!-- error message -->
<p class="error"></p>
</div>
<!-- div for card number input -->
<div class="input__div">
<!-- label -->
<p class="input__label">CARD NUMBER</p>
<!-- input for card holder name -->
<input
name="ccNumber"
class="input"
type="tel"
maxlength="19"
placeholder="e.g. 1234 5678 9123 0000"
/>
<!-- error message -->
<p class="error"></p>
</div>
<!-- ======================================================================== -->
<!-- grid container for adjust expiry month year and cvc number in a line -->
<!-- ========================================================================= -->
<div class="input__grid input__div" id="input">
<!-- expiry month and year -->
<div class="date__input">
<!-- a label for expiry manth and year -->
<p class="date__label input__label">
Exp. Date <span class="mmyy">(MM/YY)</span>
</p>
<!--dvi for expiry month input -->
<div class="cc__month">
<input
name="ccMonth"
type="tel"
maxlength="2"
class="input"
placeholder="MM"
/>
<!-- error message -->
<p class="error"></p>
</div>
<!-- div for expiry year input -->
<div class="cc__year">
<!-- expiry year input -->
<input
name="ccYear"
type="tel"
maxlength="2"
class="input"
placeholder="YY"
/>
<!-- error message -->
<p class="error"></p>
</div>
</div>
<!-- div for cvc number input-->
<div class="cc__cvc">
<!-- label for cvc number -->
<p class="cvc__label input__label">CVC</p>
<!-- input for cvc number -->
<input
name="cvcNumber"
type="tel"
maxlength="3"
class="input"
placeholder="e.g. 123"
/>
<!-- error message -->
<p class="error"></p>
</div>
</div>
<!-- confirm button for form -->
<button type="submit" class="button">Confirm</button>
</form>
<!-- complete state -->
<div class="complete__status" id="complete__stat">
<!-- complete state icon -->
<div class="img__div">
<img src="./images/icon-complete.svg" alt="complete" srcset="" />
</div>
<!-- complete states heading -->
<h1>THANK YOU!</h1>
<!-- complte states description -->
<p>We'he added your card details</p>
<!-- confirm btn to submit form and add another card details -->
<button class="button" id="continue__btn">Continue</button>
</div>
</div>
</div>
</body>
</html>