-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
167 lines (163 loc) · 6.54 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- displays site properly based on user's device -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<link rel="stylesheet" href="./css/style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./error-paragraph.css" />
<title>Frontend Mentor | Interactive card details form</title>
</head>
<body
class="font-spaceGrotesk flex justify-center items-center h-screen tracking-widest"
>
<main
class="main flex flex-col sm:flex-row justify-center items-center h-full w-full"
>
<!-- card illustration -->
<div class="illustrations w-full relative mb-24 sm:h-full sm:w-1/3">
<img src="./images/bg-main-mobile.png" class="z-0 sm:hidden w-full" />
<img
src="./images/bg-main-desktop.png"
class="hidden sm:block h-full"
/>
<div
class="credit-card-back bg-[url('/images/bg-card-back.png')] bg-center bg-cover w-72 sm:w-[440px] h-40 sm:h-[245px] rounded-lg z-10 absolute top-12 sm:top-1/2 left-16 sm:left-1/2 shadow-2xl"
>
<p
class="secret-number displayField relative text-neutralWhite text-xs top-1/2 left-56"
>
000
</p>
</div>
<div
class="credit-card-front flex flex-col justify-between bg-[url('/images/bg-card-front.png')] bg-center bg-cover w-72 sm:w-[440px] h-40 sm:h-[245px] rounded-lg z-20 absolute top-44 sm:top-1/4 left-3 sm:left-1/3 p-4 text-neutralWhite shadow-2xl"
>
<img
src="./images/card-logo.svg"
alt="card logo"
class="card-logo w-14"
/>
<p class="card-number displayField">1234 5678 9123 0000</p>
<div class="bottom-info flex justify-between">
<p class="card-owner displayField text-xs uppercase">
Jane Appleseed
</p>
<p class="expiration-date displayField text-xs">00/00</p>
</div>
</div>
</div>
<!-- end of card illustration -->
<div class="text-container sm:w-2/3 flex justify-center items-center">
<!-- form -->
<form
class="form w-full flex flex-col gap-2 p-6 align-left uppercase text-sm max-w-[380px]"
>
<div class="cardholder-name-input flex flex-col gap-2">
<label for="name">Cardholder Name</label>
<input
type="text"
id="name"
name="name"
placeholder="e.g. Jane Appleseed"
class="w-full border border-1 border-neutralLightGrayishViolet rounded-lg p-2 focus:outline-none focus:border-primaryLinearGradient"
/>
</div>
<div class="card-number-input flex flex-col flex flex-col gap-2">
<label for="number">Card Number</label>
<input
type="text"
id="number"
name="number"
placeholder="e.g. 1234 5678 9123 0000"
class="w-full border border-1 border-neutralLightGrayishViolet rounded-lg p-2 focus:outline-none focus:border-primaryLinearGradient"
/>
</div>
<div class="expiration-cvc flex gap-4">
<div class="expiration flex flex-col flex-1 gap-2">
<label for="expiration-inputs">Exp. Date (MM/YY)</label>
<div class="expiration-inputs flex gap-2">
<div class="month-input-container flex flex-col">
<input
type="text"
id="month"
name="month"
placeholder="MM"
class="w-full border border-1 border-neutralLightGrayishViolet rounded-lg p-2 focus:outline-none focus:border-primaryLinearGradient"
/>
</div>
<div class="year-input-container flex flex-col">
<input
type="text"
id="year"
name="year"
placeholder="YY"
class="w-full border border-1 border-neutralLightGrayishViolet rounded-lg p-2 focus:outline-none focus:border-primaryLinearGradient"
/>
</div>
</div>
</div>
<div class="CVC-input flex flex-col flex-1 gap-2">
<label for="CVC">CVC</label>
<input
type="text"
id="CVC"
name="CVC"
placeholder="e.g. 123"
class="w-full border border-1 border-neutralLightGrayishViolet rounded-lg p-2 focus:outline-none focus:border-primaryLinearGradient"
/>
</div>
</div>
<button
class="confirm-btn w-full rounded-xl text-neutralWhite bg-neutralVeryDarkViolet p-4 hover:bg-neutralDarkGrayishViolet transition-colors ease-in-out mt-4"
>
Confirm
</button>
</form>
<!-- end of form -->
<!-- success -->
<div
class="success flex flex-col justify-center items-center max-w-[380px] sm:w-2/3 hidden"
>
<img
src="./images/icon-complete.svg"
alt="success icon"
class="mb-8"
/>
<h1 class="text-4xl uppercase mb-4">Thank you!</h1>
<p class="success-message text-neutralDarkGrayishViolet mb-8">
We've added your card details
</p>
<button
class="continue-btn w-full rounded-xl text-neutralWhite bg-neutralVeryDarkViolet p-4 hover:bg-neutralDarkGrayishViolet transition-colors ease-in-out mt-4"
>
Continue
</button>
</div>
<!-- end of success -->
</div>
</main>
<!-- Completed state start -->
<div class="attribution absolute bottom-0 text-xs">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
>Frontend Mentor</a
>. Coded by <a href="#">Pierre Fraisse</a>.
</div>
<script type="module" src="./utils/displayError.js"></script>
<script type="module" src="./utils/formValidation.js"></script>
<script type="module" src="./utils/displayInfos.js"></script>
<script type="module" src="./utils/resetInfos.js"></script>
<script type="module" src="./app.js"></script>
</body>
</html>