generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
404.html
130 lines (124 loc) · 6.73 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="The Dog House - Professional Dog Grooming in Prestatyn, North Wales">
<!-- Font awesome icons-->
<script src="https://kit.fontawesome.com/2d6908b6f2.js" crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- Main Stylesheet -->
<link href="assets/css/styles.css" rel="stylesheet">
<title>The Dog House</title>
</head>
<body class="txt-color-3">
<!-- Header -->
<header>
<!-- Fixed Navbar with collapsible hamburger menu for smaller devices -->
<nav class="navbar navbar-expand-lg bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img class="logo" src="assets/images/the-dog-house-logo.png" alt="The Dog House Logo">
</a>
<h1>404</h1>
</ul>
</div>
</div>
</nav>
</header>
<!-- Seperator -->
<!-- Seperator top class used to push the content down below the header -->
<div class="container-fluid seperator seperator-top fixed-top bg-color-2">
<div class="row">
<div class="col">
<p><a class="txt-color-1" href="tel:01745886609">01745 886609</a></p>
</div>
</div>
</div>
<!-- Hero Section -->
<section id="hero-section">
<div class="container-fluid text-bg-dark">
<div class="row hero-row bg-color-1">
<div class="col-md-6 hero-columns hero-header txt-color-3">
<h1>Oops!</h1>
<h2>Sorry, we can't find that page. You'll find loads to explore on the home page</h2>
<a href="index.html" class="btn btn-outline-success hero-button txt-color-1 bg-color-3">Home</a>
</div>
<div class="col-md-6 hero-columns">
<!-- SRCSET's used to aid page loading (see readme for snippet) -->
<img class="hero-image"
sizes="(max-width: 576px) calc(100vw - 10px) 576px, (max-width: 768px) calc(100vw - 10px) 768px, (min-width: 769px) 33.3%"
src="assets/images/hero-image-lg.webp"
srcset="assets/images/hero-image-sm.webp 576w, assets/images/hero-image-md.webp 768w, assets/images/hero-image-lg.webp 2048w"
alt="Groomed Border Collie" />
</div>
</div>
</div>
</section>
<div class="container-fluid seperator bg-color-2">
<div class="row">
<div class="col social-links">
<p>
<!-- Social Links to live pages used with permission from the Owners of The Dog House -->
<a class="txt-color-1" href="https://www.facebook.com/profile.php?id=100083360560310" target="_blank">
<i class="fa-brands fa-facebook txt-color-1"></i>
<!-- As there is no text in this section (icons used) the sr-only class was introduced to help with accessibility -->
<span class="sr-only">Facebook</span>
</a>
<a class="ms-5 ps-5 me-5 pe-5 txt-color-1" href="https://www.instagram.com/thedoghousenw/" target="_blank">
<i class="fa-brands fa-instagram"></i>
<span class="sr-only">Instagram</span>
</a>
<a class="txt-color-1" href="https://www.tiktok.com/@thedoghousenw" target="_blank">
<i class="fa-brands fa-tiktok"></i>
<span class="sr-only">Tiktok</span>
</a>
</p>
</div>
</div>
</div>
<!-- Footer -->
<span class="anchor" id="contact-section"></span>
<footer id="contact-section">
<div class="container-fluid bg-dark sections-container contact-container">
<div class="row ms-3 me-3">
<div class="col-md-3"></div>
<div class="col-12 col-md-6 section-header text-center">
<h2>Contact Us</h2>
<p>Pop in and say hello, phone us for more information or hop on over to our socials to get to know
us more</p>
</div>
<div class="col-md-3"></div>
</div>
<div class="row gx-5 gy-5 contact-items-row text-center">
<div class="col-12 col-lg-4 contact-item">
<h3 class="first-service-item"><i class="fa-solid fa-door-open" aria-hidden="true"></i> Opening
Hours</h3>
<p>Mon - Sat 09:00am - 08:00pm</p>
<p>Sunday Closed</p>
<p>Out of hours by arrangement</p>
</div>
<div class="col-12 col-lg-4 contact-item">
<h3><i class="fa-solid fa-location-dot" aria-hidden="true"></i> Address</h3>
<p>4A Meliden Rd</p>
<p>Prestatyn</p>
<p>LL19 9RT</p>
</div>
<div class="col-12 col-lg-4 contact-item">
<h3><i class="fa-solid fa-address-book" aria-hidden="true"></i> Get in Touch</h3>
<p class="phone contact-phone">Phone: <a class="txt-color-3" href="tel:01745886609">01745 886609</a>
</p>
<p class="email-anchor">Email: <a class="txt-color-3"
href="mailto:[email protected]" target="_blank">[email protected]</a></p>
</div>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous">
</script>
</body>
</html>