-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
113 lines (111 loc) · 5.11 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
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Bootstrap Multi step form with progress bar</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.2/css/intlTelInput.css'>
<link rel='stylesheet' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/css/nice-select.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<!-- Multi step form -->
<section class="multi_step_form">
<form id="msform">
<!-- Tittle -->
<div class="tittle">
<h2>Verification Process</h2>
<p>In order to use this service, you have to complete this verification process</p>
</div>
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Verify Phone</li>
<li>Upload Documents</li>
<li>Security Questions</li>
</ul>
<!-- fieldsets -->
<fieldset>
<h3>Setup your phone</h3>
<h6>We will send you a SMS. Input the code to verify.</h6>
<div class="form-row">
<div class="form-group col-md-6">
<input type="tel" id="phone" class="form-control" placeholder="+880">
</div>
<div class="form-group col-md-6">
<input type="text" class="form-control" placeholder="1123456789">
</div>
</div>
<div class="done_text">
<a href="#" class="don_icon"><i class="ion-android-done"></i></a>
<h6>A secret code is sent to your phone. <br>Please enter it here.</h6>
</div>
<div class="code_group">
<input type="text" class="form-control" placeholder="0">
<input type="text" class="form-control" placeholder="0">
<input type="text" class="form-control" placeholder="0">
<input type="text" class="form-control" placeholder="0">
</div>
<button type="button" class="action-button previous_button">Back</button>
<button type="button" class="next action-button">Continue</button>
</fieldset>
<fieldset>
<h3>Verify Your Identity</h3>
<h6>Please upload any of these documents to verify your Identity.</h6>
<div class="passport">
<h4>Govt. ID card <br>PassPort <br>Driving License.</h4>
<a href="#" class="don_icon"><i class="ion-android-done"></i></a>
</div>
<div class="input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="upload">
<label class="custom-file-label" for="upload"><i class="ion-android-cloud-outline"></i>Choose file</label>
</div>
</div>
<ul class="file_added">
<li>File Added:</li>
<li><a href="#"><i class="ion-paperclip"></i>national_id_card.png</a></li>
<li><a href="#"><i class="ion-paperclip"></i>national_id_card_back.png</a></li>
</ul>
<button type="button" class="action-button previous previous_button">Back</button>
<button type="button" class="next action-button">Continue</button>
</fieldset>
<fieldset>
<h3>Create Security Questions</h3>
<h6>Please update your account with security questions</h6>
<div class="form-group">
<select class="product_select">
<option data-display="1. Choose A Question">1. Choose A Question</option>
<option>2. Choose A Question</option>
<option>3. Choose A Question</option>
</select>
</div>
<div class="form-group fg_2">
<input type="text" class="form-control" placeholder="Anwser here:">
</div>
<div class="form-group">
<select class="product_select">
<option data-display="1. Choose A Question">1. Choose A Question</option>
<option>2. Choose A Question</option>
<option>3. Choose A Question</option>
</select>
</div>
<div class="form-group fg_3">
<input type="text" class="form-control" placeholder="Anwser here:">
</div>
<button type="button" class="action-button previous previous_button">Back</button>
<a href="#" class="action-button">Finish</a>
</fieldset>
</form>
</section>
<!-- End Multi step form -->
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.2/js/intlTelInput.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js'></script><script src="./script.js"></script>
</body>
</html>