generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
174 lines (162 loc) · 8.38 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
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
<!DOCTYPE html>
<html lang="en" data-theme="white">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="Description" content="Ask St.Patrick anything! An almost direct line to God">
<!-- Favicon designed by author -->
<link rel="shortcut icon" type="image/png" href="./static/images/hat120.png" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
type="text/css" />
<!-- BOOTSTRAP -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- GOOGLE FONTS -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Marcellus&family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="./static/css/style.css">
<title>Ask Paddy</title>
</head>
<body>
<header>
<!-- navigation bar -->
<div class="container-fluid full-width" id="menu">
<nav id="home">
<div class="logo-and-links">
<div class="logo">
<img src="./static/images/hat120.png" id="hat" alt="hat">
<h2>ASK PADDY</h2>
</div>
</div>
<div class="links">
<ul>
<li><a href="#about"> When </a></li>
<li><a href="#ask"> Ask </a></li>
<li><a href="#tell"> Tell </a></li>
</ul>
<div class="toggle-container">
<input type="checkbox" id="switch" name="theme" /><label for="switch">Toggle</label>
</div>
</div>
</nav>
</div>
</header>
<div class="row">
<!--WINKING PADDY-->
<div class="container paddy col-sm-12 col-md-6">
<img id="paddy" src="./static/images/paddy.png" alt="paddy">
</div>
<div id="content" class="col-sm-12 col-md-6">
<!--ABOUT-->
<div class="container" id="about">
<!-- Code for countdown clock taken from:https://www.sitepoint.com/build-javascript-countdown-timer-no-dependencies/ -->
<span>Nearly there...</span>
<div id="clockdiv">
<span><h3><span class="days">: </span></h3></span>
<span><h3>:<span class="hours">: </span></h3></span>
<span><h3>:<span class="minutes">: </span></h3></span>
<span><h3>:<span class="seconds"></span></h3></span>
</div>
<div id="countdown-zero-message" class="hide">
<span>HAPPY ST. PADDY'S DAY! GRAB A GUINNESS (if you are 18 or older...)</span>
</div>
<p>Once a year, every March 17th, I descend from heaven to have a Guinness, check my website and respond to some emails. This is your chance to ask me anything you've wanted to know, what was the fastest I ever drank a pint of Guinness? Who's gonna win the all Ireland? What's my opinion on Brexit? <br>
Also, why not test your Paddy knowledge by taking my quiz?</p>
</div>
<!--ASK PADDY-->
<div class="container" id="ask">
<div class="row">
<h2 class="p-2">Ask Paddy</h2>
</div>
<div class="row">
<form id="question-form">
<div class="row">
<input class="p-2 m-2 col-12 col-md-6 form-control" type="text" placeholder="Name" id="name" name="user_name" maxlength="20" aria-label="Input name" required>
<input class="p-2 m-2 col-12 col-md-6 form-control" type="email" placeholder="Email" id="email" name="user_email" maxlength="30" aria-label="Input email" required>
</div>
<div class="row">
<textarea class="p-2 m-2 col-12 form-control" placeholder="Type your question for St.Paddy..." id="question" name="question" maxlength="500" aria-label="Input message" required></textarea>
</div>
<div class="row form-submit">
<input class="btn btn-success btn-lg" type="submit" value="ASK!" aria-label="Send message">
<input class="btn btn-secondary" type="reset">
</div>
<div class="row">
<span id="form-feedback" class="hide col"></span>
</div>
</form>
</div>
</div>
<!--TELL PADDY-->
<div class="container quiz" id="tell">
<h2>Tell Paddy</h2>
<div id="question-container" class="hide">
<div class="row">
<div class="col-sm-12" id="q">Question</div>
</div>
<div id="answer-buttons" class="btn-grid row">
<button class="btn col-sm-12 col-md-5">Answer 1</button>
<button class="btn col-sm-12 col-md-5">Answer 2</button>
<button class="btn col-sm-12 col-md-5">Answer 3</button>
<button class="btn col-sm-12 col-md-5">Answer 4</button>
</div>
</div>
<div class="controls row">
<button id="start-btn" class="start-btn btn col-sm-12 col-md-3">Quiz</button>
<button id="next-btn" class="next-btn btn hide col-sm-12 col-md-3">Next</button>
</div>
</div>
</div>
</div>
<!--Footer-->
<footer class="container-fluid container-footer">
<div id="footer-details" class="row h-100 row-footer">
<div class="col order-sm-1 column-footer my-auto align-self-center">
<ul class="list-inline social-links">
<li class="list-inline-item">
<a target="_blank" rel="noopener" href="https://www.facebook.com/">
<i class="fa fa-facebook" aria-hidden="true"></i>
<span class="sr-only">Facebook</span>
</a>
</li>
<li class="list-inline-item">
<a target="_blank" rel="noopener" href="https://twitter.com">
<i class="fa fa-twitter" aria-hidden="true"></i>
<span class="sr-only">Twitter</span>
</a>
</li>
<li class="list-inline-item">
<a target="_blank" rel="noopener" href="https://www.linkedin.com">
<i class="fa fa-linkedin" aria-hidden="true"></i>
<span class="sr-only">LinkedIn</span>
</a>
</li>
<li class="list-inline-item">
<a target="_blank" rel="noopener" href="https://www.pinterest.ie/">
<i class="fa fa-pinterest" aria-hidden="true"></i>
<span class="sr-only">Pinterest</span>
</a>
</li>
</ul>
</div>
</div>
</footer>
<!--Sweet alert used for alerts upon form submission https://sweetalert.js.org/-->
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<!-- JQUERY -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- BOOTSTRAP -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js"
integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js"
integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
crossorigin="anonymous"></script>
<!-- EMAILJS -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@2/dist/email.min.js"></script>
<script src="./app.js"></script>
</body>
</html>