-
Notifications
You must be signed in to change notification settings - Fork 0
/
winAPrize.html
152 lines (123 loc) · 5.97 KB
/
winAPrize.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.css">
<title>Assignment 2: Semmantic UI</title>
<link rel="stylesheet" href = "css/style.css">
</head>
<body>
<div class = "ui grid stackable container">
<a href="index.html">
<img src="images/lobaLogo.png" id="logo" alt="Roma Logo">
</a>
<nav class="ui top attached tabular stackable menu">
<a class="item" href = "index.html">Home</a>
<a class="item" href = "team.html">Team</a>
<a class="item" href = "topPlayers.html">Top Players</a>
<a class="active item" href = "winAPrize.html">Win A Prize</a>
</nav>
<div class = "ui sixteen wide center aligned column">
<header><h1>WIN A PRIZE</h1></header>
</div>
<div id = "smallerImage">
<div class ="ui sixteen wide column"><img src="images/prize.jpg" alt = "Picture of kids walking with Roma Players in the Stadium" class = "ui fluid image"></div>
</div>
<main>
<p class="prize">Here is an incredible opportunity to meet some of the players of the AS Roma team.</p>
<p class="prize">Once the survey below is completed and filled with your contact details you are all set and will be part of a draw taking place the 18th of December, 2020.</p>
<br>
<hr>
<form action="submit.html" method="get" id = "winPrize" class="ui form">
<h2 class="h2Survey"><span class="black">Survey - </span>Your chance to meet the players of the amazing team AS Roma</h2>
<p class = "pPrize">- Who is your favourite soccer player?</p>
<div class="grouped fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="player" checked="checked" id = "totti" value = "totti" autofocus>
<label for = "totti" >Francesco Totti</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="player" id = "messi" value = "messi">
<label for = "messi">Leonel Messi</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="player" id = "cristiano" value = "cristiano">
<label for = "cristiano">Cristiano Ronaldo</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="player" id = "other" value = "other">
<label for = "other">Other</label>
</div>
</div>
</div>
<br><br>
<div class="inline field">
<label for = "continent" class="six wide field">- In which continent are you located?</label>
<select class="ui fluid dropdown four wide field" id = "continent" name = "continent">
<option value="A">Asia</option>
<option value="AN">Antarctica</option>
<option value="EU">Europe</option>
<option value="SA">South America</option>
<option value="NA">North America</option>
<option value="OC">Oceania</option>
<option value="AF">Africa</option>
</select>
</div>
<br>
<p class = "pPrize">- Please let us know, what would be the best thing of winning this Prize?</p>
<div class="field comments">
<label for = "comments">Why do you wish to be picked? (We will read all you have to say)</label>
<textarea id = "comments" name = "comments"></textarea>
</div>
<br><br>
<h2 class="h2Survey"><span class="black">Thank you for answering! -</span> Please provide the following contact details:</h2>
<br><br>
<div class = "inline field">
<label for="name" class="four wide field">First Name</label>
<input type="text" name="name" id="name" class="eight wide field" required pattern = "[A-Z][a-z]+( [A-Z][a-z]+)*" title="Please enter your First Name (First Letter capitalised)">
</div>
<div class = "inline field">
<label for="surname" class="four wide field">Surname</label>
<input type="text" name="surname" id="surname" class="eight wide field" required pattern = "[A-Z][a-z]+( [A-Z][a-z]+)*" title="Please enter your Surname (First Letter capitalised)">
</div>
<div class = "inline field">
<label for="cellphoneNumber" class="four wide field">Cellphone Number</label>
<input type="text" name="cellphoneNumber" id="cellphoneNumber" class="eight wide field" pattern = "^(\(\d{3}\)|\d{3})-?\d{6,9}$" title="Please enter a valid phone number with 9 to 12 digits">
</div>
<div class = "inline field">
<label for="emailAddress" class="four wide field">Email Address</label>
<input type="text" name="emailAddress" id="emailAddress" class="eight wide field" required pattern = "^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$" title="Please enter a valid email address (i.e. [email protected])">
</div>
<div class = "inline field">
<label for="DOB" class="four wide field">Date of Birth</label>
<input type="date" name="DOB" id="DOB" class="eight wide field" required title="Please select your date of birth">
</div>
<br><br>
<div class="checkbox">
<input type="checkbox" id = "TandC" name ="TandC" required title="If you've read and agreed to our T&Cs, you may tick this box and proceed.">
<label for = "TandC">I have read and I agree to the Terms and Conditions of this Website.</label>
</div>
<br><br>
<div class = "centerButton"><input type="submit" class = "ui primary button" value="Submit">
<input type="reset" class = "ui primary button" value = "Start Again"></div>
</form>
</main>
<footer class = "sixteen wide center aligned column">
<p class="pfooter">© AS ROMA - All rights reserved</p>
<p class="pfooter"><a href="mailto:[email protected]" class="indexQuoteLinks">AS Roma Email</a></p>
</footer>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.js"></script>
</body>
</html>