-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
155 lines (133 loc) · 6.08 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
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- MAIN CONTAINER -->
<div class="main-container">
<!-- IMG CONTAINER - LEFT -->
<div class="img-container">
<img class="gif" src="https://drive.google.com/uc?export=view&id=1h3jO1bCrzH9QhhdsrwdDODSsKOea59ma">
</div>
<!-- PAYMENT PROCESS CONTAINER - RIGHT -->
<div class="payment-container">
<!-- PAYMENT STEP -->
<div class="payment-process-step">
4/4
</div>
<!-- PROCESS TITLE -->
<div class="payment-title">
Último paso!
</div>
<!-- PROCESS DESCRIPTION -->
<div class="payment-process-description">
Ingresa tu información de pago a continuación.
</div>
<!-- OPTION 1 - CREDIT CARD -->
<div class="payment-process-option-1">
<img src="https://drive.google.com/uc?export=view&id=1BuGw6O3iwX3BcqRp-7PT62hSS7CPgeEd">
<span>Débito / Crédito</span>
<div class="radio-button"><span class="check-1" hidden>✓</span></div>
</div>
<!-- OPTION 2 - PAYPAL -->
<div class="payment-process-option-2">
<img src="https://drive.google.com/uc?export=view&id=1xRKS-dPtBwcFfc7FqSEkG0YfBRTQqAw5">
<div class="radio-button"><span class="check-2" hidden>✓</span></div>
</div>
<!-- CARD NUMBER -->
<div class="card-number">
<span>Número de Tarjeta</span>
<input type="number" placeholder="123 4567 8912 34566">
</div>
<!-- EXPIRATION DATE -->
<div class="expiration-date">
<span class="exp-date">Fecha de Expiración</span>
<span class="cvc-text">CVC</span>
<!-- SELECT OPTION FOR MONTH -->
<select class="expiration-month" name="expirationMonth">
<option value="" disabled selected>Month</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<!-- SELECT OPTION FOR DAY -->
<select class="expiration-day"" name="expirationDay">
<option value="" disabled selected>Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<!-- ENTER A CVC -->
<input class="cvc-number" type="number" name="quantity" placeholder="123">
</div>
<!-- TERMS OF USE & PRIVACY POLICY -->
<div class="policy-terms">
Al crear una cuenta, aceptas los <span style="font-weight: 600;">Términos de uso</span> y la <span style="font-weight: 600;">Política de privacidad</span> de cdt.com.
</div>
<!-- JOIN NOW BUTTON -->
<button class="join-now-button">Únete hoy</button>
</div>
</div>
<script>
/* Getting the video gif */
const video = document.querySelector('.gif');
/* Playing it as soon as the page renders */
//video.play()
/* Replay everytime it ends */
video.addEventListener('ended', function() {
this.currentTime = 0;
this.play();
});
/* Clicking on PAYMENT OPTION 1 || 2 */
const option1 = document.querySelector('.payment-process-option-1');
const option2 = document.querySelector('.payment-process-option-2');
const radioButton1 = document.querySelector('.check-1')
const radioButton2 = document.querySelector('.check-2')
option1.addEventListener('click', () => {
option2.classList.remove('clicked')
option1.classList.add('clicked')
radioButton1.removeAttribute('hidden')
radioButton1.classList.add('checked')
})
</script>
</body>
</html>