-
Notifications
You must be signed in to change notification settings - Fork 0
/
404.html
143 lines (134 loc) · 5.37 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GoatHeroes | Not Found</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Fontawesome -->
<link href="css/all.min.css" rel="stylesheet">
<!-- Roboto Font from Google -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<!--JavaScript for Bootstrap -->
<script src="js/bootstrap.bundle.min.js"></script>
<!-- Added to make DOM manipulation and access easy -->
<script src="js/jquery-3.6.0.min.js"></script>
<!-- Contains JavaScript code written by me that is relevant to the entire pages -->
<script src="js/script.js"></script>
</head>
<body class="d-flex flex-column h-100">
<header>
<!-- Fixed navbar -->
<nav class="navbar goat-heroes-nav navbar-dark fixed-top navbar-expand-lg">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-toggle">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nav-toggle">
<img class="navbar-brand" src="images/logo.png" />
<div class="text-light fw-bold text-bod fs-2 fs-b">GOATHEROES</div>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 float-end">
<li class="nav-item">
<a class="nav-link" href="index.html">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="booking.html">BOOK</a>
</li>
<li class="nav-item">
<a class="nav-link" href="testimonials.html">TESTIMONIALS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact-us.html">CONTACT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">ABOUT US</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="flex-shrink-0">
<div class="page-title">OOPS! 404 NOT FOUND</div>
<section class="container" style="padding: 3rem">
<div class="text-center rounded-2 p-4 bg-black text-light">
<img alt="logo" src="images/logo.png" />
<h5>Looks like we couldn't find what you are looking for!</h5>
</div>
</section>
</main>
<!-- Footer all HTML is mine with bootstrap being used to scaffold and style -->
<footer class="footer mt-auto py-3 ">
<div class="container">
<div class="d-flex align-items-center">
<img class="footer-logo me-2" src="images/logo.png" />
<div class="d-block text-start">
<div class="text-light fw-bold fs-2">GOATHEROES</div>
<p class="fs-6 text-light fw-bold text">WE GOAT YOU</p>
</div>
</div>
<div class="row row-cols-2">
<div class="col-sm-6 col-md-3">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link footer-nav-link" href="booking.html"><strong>BOOK</strong> <i class="fas fa-angle-right"></i></a>
</li>
<li class="nav-item">
<a class="nav-link footer-nav-link" href="new-booking.html">New Booking</a>
</li>
<li class="nav-item">
<a class="nav-link footer-nav-link" href="bookings.html">Current Booking</a>
</li>
</ul>
</div>
<div class="col-sm-6 col-md-3">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link footer-nav-link" href="contact-us.html"><strong>CONTACT US </strong> <i class="fas fa-angle-right"></i></a>
</li>
<li class="nav-item">
<a class="nav-link footer-nav-link" href="feedback.html">Feedback</a>
</li>
</ul>
</div>
<div class="col-xs-6 col-md-3">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link footer-nav-link" href="about-us.html"><strong>ABOUT US</strong> <i class="fas fa-angle-right"></i></a>
</li>
<li class="nav-item">
<a class="nav-link footer-nav-link" href="testimonials.html">Testimonials</a>
</li>
</ul>
</div>
<div class="col-sm-6 col-md-3">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link footer-nav-link" href="testimonials.html"><strong>TESTIMONIALS</strong> <i class="fas fa-angle-right"></i></a>
</li>
</ul>
</div>
</div>
<div class="d-flex justify-content-between">
<div>
<h3 class="fw-bold text-light">Get Social</h3>
<a href="#"><i class="fab text-light fa-facebook fa-2x me-2"></i></a>
<a href="#"><i class="fab text-light fa-instagram fa-2x me-2"></i></a>
<a href="#"><i class="fab text-light fa-twitter fa-2x"></i></a>
</div>
<div>
<h3 class="fw-bold text-light">Get in touch</h3>
<h6 class="text-light">Phone: 07 1234 567</h6>
<h6 class="text-light">Email: info@goatheroes.com.au </h6>
</div>
</div>
<div class="d-flex justify-content-around">
<a class="footer-nav-link nav-link" href="404.html">Privacy Policy</a>
<a class="footer-nav-link nav-link" href="404.html">Terms and Conditions</a>
</div>
</div>
</footer>
</body>
</html>