generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path404.html
171 lines (143 loc) · 8.17 KB
/
404.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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="This page is displayed if someone tries to access a page that doesn't exist.">
<meta name="keywords" content="older and wider, older and wider podcast, error 404, page does not exist">
<meta name="author" content="Dominic Francis">
<!-- Redirect info from https://developer.mozilla.org/en-US/docs/Web/HTTP/Redirections?ref=library.linkbot.com -->
<meta http-equiv="refresh" content="30; url=index.html">
<!-- Link for custom favicon -->
<!-- using https://stackoverflow.com/questions/35037482/favicon-with-github-pages -->
<link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.ico">
<!-- Link for custom favicon -->
<link type="image/x-icon" href="/assets/images/favicon.ico" rel="icon">
<!--Links for Google 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=Gentium+Book+Plus:ital,wght@0,400;0,700;1,400;1,700&family=Marcellus&family=Pontano+Sans:[email protected]&display=swap"
rel="stylesheet">
<!--Link for Bootstrap CSS-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!--Link to website CSS file-->
<link rel="stylesheet" href="assets/css/styles.css">
<title>Older & Wider | Page Not Found</title>
</head>
<body>
<!-- Header and navigation -->
<header class="container-fluid fixed-top">
<div class="row teal">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 mt-3">
<h1 class="fs-2 fw-bold"><a href="index.html" rel="bookmark">The Older & Wider Podcast</a></h1>
</div>
</div>
<div class="row">
<nav class="col-12 col-sm-12 col-md-12 col-lg-12 navbar navbar-expand-lg bg-body-tertiary pb-3">
<div class="mx-auto">
<button class="navbar-toggler mb-4" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarHome" aria-controls="navbarHome" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon pt-4 pb-4"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbarHome">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link selected fs-5" aria-current="page" aria-label="Link to home page"
href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link fs-5" aria-label="Link to the about page" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link fs-5" aria-label="Link to the message board page"
href="message-board.html">Message Board</a>
</li>
<li class="nav-item">
<a class="nav-link fs-5" aria-label="Link to the contact page"
href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
<!-- Error message and suggested links -->
<main class="px-5">
<section class="container-fluid error-card p-3 w-75">
<div class="card-body">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 mb-3 fs-4 text-center">
<h2 class="fs-1 px-5 py-2 mb-5 mt-5 fw-bold">Sorry, but that Page Does Not Exist!</h2>
<img src="assets/images/error-404.webp" class="custom-img d-none d-md-block w-25 mx-auto"
alt="Judith pulling a suprised face.">
<h3 class="fs-3 px-5 py-2 mt-5 mb-5 text-center">How boring - snore law has been invoked</h3>
<p class="fs-5 px-5 py-2 mb-4">You will be automatically redirected to the home page, in 30
seconds</p>
<p class="fs-5 px-5 py-2 p-4 mb-4">To go somewhere else, please choose from one of the
following:</p>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-3 p-2 text-center">
<a href="index.html" aria-label="Return to the home page" class="btn btn-info btn-sm mb-3 fs-6"
rel="bookmark">Return to the home
page</a>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-3 p-2 text-center">
<a href="about.html" aria-label="Learn about the podcast" class="btn btn-info btn-sm mb-3 fs-6"
rel="bookmark">Learn about the
podcast</a>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-3 p-2 text-center">
<a href="message-board.html" aria-label="View the
'Message Board'" class="btn btn-info btn-sm mb-3 fs-6" rel="bookmark">View the "Message
Board"</a>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-3 p-2 text-center">
<a href="contact.html" aria-label="Send us a message" class="btn btn-info btn-sm mb-5 fs-6"
rel="bookmark">Why not send us a message?</a>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="container-fluid teal mt-5">
<!-- Social media links -->
<div class="row">
<div class="col text-center mt-3 mb-2">
<a href="https://www.instagram.com/olderandwiderpodcast/" target="_blank" rel="noopener noreferrer"
class="fa fa-instagram me-2" aria-label="Visit Instagram"><span class="socials">Instagram</span></a>
<a href="https://www.facebook.com/profile.php?id=61555198800248" target="_blank"
rel="noopener noreferrer" class="fa fa-facebook ms-2" aria-label="Visit Facebook"><span
class="socials">Facebook</span></a>
</div>
</div>
<div class="row">
<!-- Legal and copyright information -->
<!-- using https://blog.hubspot.com/website/html-code-copyright -->
<div class="col text-center">
<p> © 2024, <a href="https://www.dominicfrancis.co.uk/" target="_blank" rel="noopener noreferrer"
aria-label="Visit LinkedIn">Dominic
Francis</a> (<a href="https://shows.acast.com/older-and-wider-podcast"
aria-label="Visit the Older & Wider podcast on the Acast website" rel="external"
target="_blank">Older &
Wider</a> is hosted by <a href="https://www.acast.com" class="smallprint"
aria-label="Visit the Acast website" rel="external" target="_blank">Acast</a>)
</p>
</div>
</div>
</footer>
<!--Link to Fontawesome-->
<script src="https://kit.fontawesome.com/9a47a7f2a8.js" crossorigin="anonymous"></script>
<!--Link to Bootstrap JavaScript-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
</script>
</body>
</html>