-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
143 lines (131 loc) · 6.79 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
<!DOCTYPE html>
<html lang="es">
<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">
<title>Survey Form | Nelson Rojas</title>
<!-- CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
<div class="bg-image">
<div class="bg-opacity">
<!-- Header -->
<header class="container">
<div class="header text-center">
<h1 id="title">
Arcane
<br> Survey Form
</h1>
<p id="description">Thank you for taking the time to complete this form</p>
</div>
</header>
<!-- Main -->
<main class="main container">
<div class="form__div">
<form id="survey-form">
<!-- Name -->
<div class="form__group">
<label for="name" id="name-label">Name</label>
<input
class="block"
type="text"
id="name"
name="name"
required
placeholder="Enter your name"
>
</div>
<!-- Email -->
<div class="form__group">
<label for="email" id="email-label">Email</label>
<input
class="block"
type="email"
id="email"
name="email"
required
placeholder="Enter your email"
>
</div>
<!-- Age -->
<div class="form__group">
<label for="age" id="number-label">Age <span class="small-text">(optional)</span></label>
<input
type="number"
id="number"
name="age"
placeholder="Age"
min="10"
max="90"
>
</div>
<!-- Favorite character -->
<label>Which is your favorite character from the serie?</label>
<select class="block" name="chr" id="dropdown">
<option value="" selected disabled hidden>Select an option</option>
<option value="vi">Vi</option>
<option value="jinx">Jinx</option>
<option value="vander">Vander</option>
<option value="silco">Silco</option>
<option value="ekko">Ekko</option>
<option value="caitlyn">Caitlyn</option>
<option value="jayce">Jayce</option>
<option value="viktor">Viktor</option>
<option value="heimerdinger">Heimerdinger</option>
<option value="singed">Singed</option>
</select>
<!-- Recommend -->
<p>Would you recommend Arcane to a friend?</p>
<div class="block">
<input value="Definitely" type="radio" id="definitely" name="recommend">
<label for="definitely">Definitely</label>
</div>
<div class="block">
<input value="Maybe" type="radio" id="maybe" name="recommend">
<label for="maybe">Maybe</label>
</div>
<div class="block">
<input value="Not sure" type="radio" id="not-sure" name="recommend">
<label for="not-sure">Not sure</label>
</div>
<!-- Next characters -->
<p>Who would you like to see in Arcane Season 2?</p>
<input value="Dr.Mundo" type="checkbox" name="Dr.Mundo" id="drmundo">
<label for="drmundo">Dr.Mundo</label>
<br>
<input value="Warwick" type="checkbox" name="Warwick" id="warwick">
<label for="warwick">Warwick</label>
<br>
<input value="Urgot" type="checkbox" name="Urgot" id="urgot">
<label for="urgot">Urgot</label>
<br>
<input value="Ezreal" type="checkbox" name="Ezreal" id="ezreal">
<label for="ezreal">Ezreal</label>
<br>
<input value="Camille" type="checkbox" name="Camille" id="camille">
<label for="camille">Camille</label>
<br>
<input value="Teemo" type="checkbox" name="Teemo" id="teemo">
<label for="teemo">Teemo</label>
<!-- Comments -->
<p>Any comments or suggestions?</p>
<textarea
name="text"
id="text"
placeholder="Enter your comment here..."
></textarea>
<input type="submit" value="submit" id="submit">
</form>
</div>
</main>
</div>
</div>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>
</html>