-
Notifications
You must be signed in to change notification settings - Fork 0
/
quiz2.html
311 lines (284 loc) · 12.6 KB
/
quiz2.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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/jquery-3.6.4.js"></script>
<script src="js/script.js"></script>
<link rel="icon" href="img/logo.jpg">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<title>Celebrity Dating Site</title>
</head>
<body>
<div class="container">
<div class="head-section">
<div class="background2">
<img src="img/pexels-photo-hearts.webp" alt="">
</div>
<div class="logo-section d-flex mt-2 ml-3">
<img src="img/logo.jpg" alt="logo">
<h5 class="mt-2 text-light">DATING SITE</h5>
</div>
<ul class="nav above">
<li class="nav-item">
<a class="nav-link " href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link " href="aboutUs.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link " href="celebrity.html">Celebrities</a>
</li>
</ul>
<h2 class="mt-2 ml-5 Instruction">💗💗 Please fill all the fields.</h2>
</div>
<form class="formThree was-validated bg-white w-75 p-3 ml-5">
<div class="partition">
<div>
<h3>Your Personality Traits</h3>
<div class="mt-3 mb-3">
<label for="Q-One" class="form-label">Which of these best describe you?</label>
<select name="" id="Character" class="form-control" required>
<option value="">Select an Option</option>
<option value="humorous">Humorous</option>
<option value="social">Social</option>
<option value="calm">Calm</option>
</select>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="mb-3">
<label for="color" class="form-label">Which of these colors do you prefer?</label>
<div>
<input type="radio" name="color" value="Pink" required>
<label for="Pink" class="form-label">Pink</label>
</div>
<div>
<input type="radio" name="color" value="Purple" required>
<label for="Purple" class="form-label">Purple</label>
</div>
<div>
<input type="radio" name="color" value="Yellow" required>
<label for="Yellow" class="form-label">Yellow</label>
</div>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="mt-3 mb-3">
<label for="Q-One" class="form-label">What is your favourite pet?</label>
<select name="" id="Pet" class="form-control" required>
<option value="">Select an Option</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="mt-3 mb-3">
<label for="Q-One" class="form-label">What genre of music do you prefer?</label>
<select name="" id="genre" class="form-control" required>
<option value="">Select an Option</option>
<option value="pop">Pop</option>
<option value="r and b">R & B</option>
<option value="afro">Afro Beat</option>
</select>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
</div>
<div>
<h3>Preferred Traits in Partner</h3>
<div class="mt-3 mb-3">
<label for="Q-One" class="form-label">What body build do you prefer?</label>
<select name="" id="build" class="form-control" required>
<option value="">Select an Option</option>
<option value="slim">Slim</option>
<option value="muscular">Muscular</option>
</select>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="mt-3 mb-3">
<label for="Q-One" class="form-label">What height would you prefer?</label>
<select name="" id="Height" class="form-control" required>
<option value="">Select an Option</option>
<option value="tall">Tall</option>
<option value="average">Average</option>
<option value="short">Short</option>
</select>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="mt-3 mb-3">
<label for="Q-One" class="form-label">What skin tone do you prefer?</label>
<select name="" id="complexion" class="form-control" required>
<option value="">Select an Option</option>
<option value="light">Light</option>
<option value="medium">Medium</option>
<option value="dark">Dark</option>
</select>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<button type="submit" class="btn btn-danger mt-5">Find Match</button>
</div>
</div>
</form>
<div class="profile picOne">
<h3>Your match is :</h3>
<img src="img/jordan.jpg" alt="">
<h4 class="bg-info profileName">Michael B Jordan</h4>
<ul>
<li>Nationality: American</li>
<li>Contact: @michaelbjordan (Instagram)</li>
</ul>
</div>
<div class="profile picTwo">
<h3>Your match is :</h3>
<img src="img/hart.jpg" alt="">
<h4 class="bg-info profileName">Kevin Hart</h4>
<ul>
<li>Nationality: American</li>
<li>Contact: @kevinhart4real (Instagram)</li>
</ul>
</div>
<div class="profile picThree">
<h3>Your match is :</h3>
<img src="img/ojo.jpg" alt="">
<h4 class="bg-info profileName">Wole Ojo</h4>
<ul>
<li>Nationality: Nigerian</li>
<li>Contact: @kingwaleojo (Instagram)</li>
</ul>
</div>
<div class="profile picFour">
<h3>Your match is :</h3>
<img src="img/evans.jpg" alt="">
<h4 class="bg-info profileName">Chris Evans</h4>
<ul>
<li>Nationality: American</li>
<li>Contact: @chrisevans (Instagram)</li>
</ul>
</div>
<div class="profile picFive">
<h3>Your match is :</h3>
<img src="img/hemsworth.jpg" alt="">
<h4 class="bg-info profileName">Chris Hemsworth</h4>
<ul>
<li>Nationality: American</li>
<li>Contact: @chrishemsworth (Instagram)</li>
</ul>
</div>
<div class="profile picSix">
<h3>Your match is :</h3>
<img src="img/holland.jpg" alt="">
<h4 class="bg-info profileName">Tom Holland</h4>
<ul>
<li>Nationality: British</li>
<li>Contact: @tomholland2013 (Instagram)</li>
</ul>
</div>
<div class="profile picSeven">
<h3>Your match is :</h3>
<img src="img/chalamet.jpg" alt="">
<h4 class="bg-info profileName">Timothee Chalamet</h4>
<ul>
<li>Nationality: American</li>
<li>Contact: @tchalamet (Instagram)</li>
</ul>
</div>
<div class="profile picEight">
<h3>Your match is :</h3>
<img src="img/derulo.jpg" alt="">
<h4 class="bg-info profileName">Jason Derulo</h4>
<ul>
<li>Nationality: American</li>
<li>Contact: @jasonderulo (Instagram)</li>
</ul>
</div>
<div class="profile picNine">
<h3>Your match is :</h3>
<img src="img/radcliffe.jpg" alt="">
<h4 class="bg-info profileName">Daniel Radcliffe</h4>
<ul>
<li>Nationality: British</li>
<li>Contact: @daniel3940 (Instagram)</li>
</ul>
</div>
<div class="profile picTen">
<h3>Your match is :</h3>
<img src="img/odunlade.jpg" alt="">
<h4 class="bg-info profileName">Odunlade Adekola</h4>
<ul>
<li>Nationality: Nigerian</li>
<li>Contact: @odunomoadekola (Instagram)</li>
</ul>
</div>
<div class="profile picEleven">
<h3>Your match is :</h3>
<img src="img/bolanle.jpg" alt="">
<h4 class="bg-info profileName">Bolanle Ninalowo</h4>
<ul>
<li>Nationality: Nigerian</li>
<li>Contact: @iamnino_b (Instagram)</li>
</ul>
</div>
<div class="profile picTwelve">
<h3>Your match is :</h3>
<img src="img/jemide.jpg" alt="">
<h4 class="bg-info profileName">Natse Jemide</h4>
<ul>
<li>Nationality: Nigerian</li>
<li>Contact: @natsejemide(Instagram)</li>
</ul>
</div>
<div class="profile picThirteen">
<h3>Your match is :</h3>
<img src="img/leonard.jpg" alt="">
<h4 class="bg-info profileName">Fredrick Leonard</h4>
<ul>
<li>Nationality: Nigerian</li>
<li>Contact: @freddieleonard (Instagram)</li>
</ul>
</div>
<div class="profile picFourteen">
<h3>Your match is :</h3>
<img src="img/zuckerberg.jpg" alt="">
<h4 class="bg-info profileName">Mack Zuckerberg</h4>
<ul>
<li>Nationality: American</li>
<li>Contact: @zuck (Instagram)</li>
</ul>
</div>
<div class="profile picFifteen">
<h3>Your match is :</h3>
<img src="img/mackie.jpg" alt="">
<h4 class="bg-info profileName">Anthony Mackie</h4>
<ul>
<li>Nationality: American</li>
<li>Contact: @anthonymackie (Instagram)</li>
</ul>
</div>
<div class="profile picSixteen">
<h3>Your match is :</h3>
<img src="img/joshua.jpg" alt="">
<h4 class="bg-info profileName">Anthony Joshua</h4>
<ul>
<li>Nationality: British</li>
<li>Contact: @anthonyjoshua (Instagram)</li>
</ul>
</div>
<div class="profile picSeventeen">
<h3>Your match is :</h3>
<img src="img/wellington.jpg" alt="">
<h4 class="bg-info profileName">Bankole Wellington</h4>
<ul>
<li>Nationality: Nigerian</li>
<li>Contact: @bankywellington (Instagram)</li>
</ul>
</div>
</div>
</body>
</html>