-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
110 lines (103 loc) · 4.99 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Survey Form</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="card border-success mt-5 mb-5">
<div class="card-header">
<h1 id="title" class="text-center mt-4">Survey Form</h1>
<p id="description" class="text-center">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
</div>
<div class="card-body p-md-5">
<form action="" id="survey-form">
<div>
<label
for="name"
id="name-label"
class="form-label">Name:</label>
<input
type="text"
id="name"
class="form-control"
required
placeholder="Enter Your Name">
</div>
<div class="mt-3">
<label
for="email"
id="email-label"
class="form-label">Email:</label>
<input type="email" id="email" class="form-control" required placeholder="Enter Your Email">
</div>
<div class="mt-3">
<label for="number" id="number-label" class="form-label">Age:</label>
<input
class="form-control"
type="number"
id="number"
name="age"
min="10"
max="99"
placeholder="Age"
>
</div>
<div class="mt-3">
<label class="form-label">Which option best describes your current role?</label>
<select name="" id="dropdown" class="form-control">
<option selected disabled>Select Current Role</option>
<option value="">Student</option>
<option value="">Full Time</option>
<option value="">Part Time</option>
<option value="">Other</option>
</select>
</div>
<div class="mt-3">
<label class="form-label" for="">Would you recommend us to a friend?</label>
<div>
<input type="radio" checked name="op" id="sure" value="Sure" class="form-check-input">
<label for="sure" class="form-check-label">Sure </label>
</div>
<div>
<input type="radio" name="op" id="maybe" value="Maybe" class="form-check-input">
<label for="maybe" class="form-check-label">Maybe </label>
</div>
<div>
<input type="radio" name="op" id="not" value="Not Sure" class="form-check-input">
<label for="not" class="form-check-label">Not Sure </label>
</div>
</div>
<div class="mt-4 mb-4">
<label class="form-label">What is your position?</label>
<div>
<input type="checkbox" name="front-end" id="font-end" value="Frond-End" class="form-check-input">
<label for="front-end" class="form-check-label">Front End</label>
</div>
<div>
<input type="checkbox" name="back-end" id="back-end" value="Frond-End" class="form-check-input">
<label for="back-end" class="form-check-label">Back End</label>
</div>
<div>
<input type="checkbox" name="front-end" id="full-stack" value="Frond-End" class="form-check-input">
<label for="full-stack" class="form-check-label">Full Stack</label>
</div>
</div>
<label for="comment" class="form-label">Any comments or suggestions?</label>
<textarea name="" id="comment" cols="30" rows="10" class="form-control mb-4"
placeholder="Enter Your Comment Here..."></textarea>
<div class="card-footer">
<input type="submit" id="submit" value="Submit" class="btn btn-outline-success">
</div>
</form>
</div>
</div>
</div> <!-- /container -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<script src="js/index.js"></script>
</body>
</html>