-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
103 lines (100 loc) · 4.27 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
<!DOCTYPE html>
<html>
<head>
<title>Ticketbox</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./css/style.css">
<link href="https://fonts.googleapis.com/css?family=Oxygen:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Petit+Formal+Script" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" defer></script>
<script src="./js/app.js" defer></script>
</head>
<body>
<div id="app">
<header>
<img class="logo" src="https://s3.amazonaws.com/codecademy-content/courses/vue-instances/ticket_logo.svg"
alt="logo">
<h1>TICKETBOX</h1>
</header>
<form class="container">
<div class="form-row">
<div class="form-field">
<label for="first-name">First Name</label>
<input type="text" id="first-name" />
</div>
<div class="form-field">
<label for="last-name">Last Name</label>
<input type="text" id="last-name" />
</div>
</div>
<div class="form-row">
<div class="form-field">
<label for="email">Email</label>
<input type="text" id="email" />
</div>
</div>
<div class="form-row">
<div class="form-field">
<label for="ticket-quantity">Ticket Quantity</label>
<select id="ticket-quantity">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="form-field">
<legend>Ticket Type</legend>
<div>
<input name="ticket" type="radio" id="general" value="general">
<label for="general">General Admission</label>
</div>
<div>
<input name="ticket" type="radio" id="vip" value="vip">
<label for="vip">VIP</label>
</div>
</div>
</div>
<div class="form-row checkbox">
<fieldset>
<legend>How did you hear about this event?</legend>
<div>
<input type="checkbox" id="friend" value="friend">
<label for="friend">Friend</label>
</div>
<div>
<input type="checkbox" id="publication" value="publication">
<label for="publication">Publication</label>
</div>
<div>
<input type="checkbox" id="social-media" value="social">
<label for="social-media">Social Media</label>
</div>
</fieldset>
</div>
<div class="form-row vertical">
<label for="requests">Special requests</label>
<textarea id="requests"></textarea>
</div>
<div class="form-row vertical agreement checkbox">
<fieldset>
<legend>Purchase Agreement</legend>
<p>I, {{ fullName }}, wish to buy {{ ticketDescription }}. I understand that all ticket sales are
final.</p>
<input type="checkbox" name="agreement" id="agree" />
<label for="agree">I Agree</label>
</fieldset>
</div>
<div class="form-row vertical">
<label for="signature">Signature</label>
<input id="signature" class="signature" />
</div>
<div>
<button type="reset" class="reset">Reset</button>
<button type="submit">Confirm Tickets</button>
</div>
</form>
</div>
</body>
</html>