generated from Code-Institute-Org/ci-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathgallery.html
161 lines (130 loc) · 6.61 KB
/
gallery.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Meta tags for search engines -->
<meta name="description"
content="Professional dog sitting services in Sunne, Wermland. Offering dog walking, daily care, and overnight stays. Reliable and loving care for your dogs when you need it most.">
<meta name="keywords"
content="dog sitter, dog care, dog walking, pet care, dog daycare, dog sitting Sunne, pet services, Sunne pet care, dog walking services, Sunne, Wermland">
<!-- Title -->
<title>Gallery | Dog sitter in Sunne</title>
<!-- Favicon generated using https://www.favicon-generator.org/ -->
<link rel="icon" type="image/png" href="assets/favicon/favicon-48x48.png" sizes="48x48">
<link rel="icon" type="image/svg+xml" href="assets/favicon/favicon.svg">
<link rel="shortcut icon" href="assets/favicon/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
<link rel="manifest" href="assets/favicon/site.webmanifest">
<!-- Stylesheet -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/e2348d3361.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- Header -->
<header>
<div id="main-header">
<a id="logo" href="index.html"><img src="assets/images/paw_play_logo.webp" alt="Sunne Daycare Logotype"></a>
<!-- Navigation -->
<input type="checkbox" id="nav-toggle" name="nav-toggle">
<label for="nav-toggle" class="nav-toggle-label"><i class="fa-solid fa-bars"></i></label>
<nav id="header-navigation">
<ul class="menu">
<li><a href="index.html">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="gallery.html" class="active">Gallery</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact & <i>Bookings</i></a></li>
</ul>
</nav>
</div>
<!-- Header Notice -->
<div id="header-notice">
<p>✨ Now accepting <strong>new dog</strong> reservations! ✨</p>
</div>
</header>
<!-- Content -->
<main>
<div class="hero-section-subpage" id="hero-section-gallery">
<div class="hero-section-subpage-content">
<div class="topic-tag">Gallery</div>
<h1>Photos from our dogcare services</h1>
</div>
</div>
<!-- Intro text -->
<div class="intro-text">
<p>Take a look at the moments we've captured in our gallery to see <strong>happy dogs</strong> enjoying their
time with us!</p>
</div>
<!-- Gallery -->
<div class="basic-section">
<div id="gallery">
<!-- Gallery in masonry style -->
<img src="assets/images/dog7.webp" alt="Cozy white and brown spotted Labradoodle lounging on a sofa">
<img src="assets/images/dog8.webp" alt="Cream Labradoodle relaxing in bed">
<img src="assets/images/dog9.webp" alt="Golden retriever sitting on the beach, looking into the camera">
<img src="assets/images/dog10.webp" alt="Small brown dog laying on bed">
<img src="assets/images/dog6.webp" alt="A happy puppy being carried and petted">
<img src="assets/images/rufus.webp" alt="A happy labradoodle smiling to the camera">
<img src="assets/images/dog11.webp" alt="A brown mixed-breed dog holding a large stick in the woods">
<img src="assets/images/dog12.webp" alt="A funny chowchow with sunglasses">
<img src="assets/images/dog5.webp" alt="A corgi and a terrier running towards camera">
<img src="assets/images/dog13.webp" alt="A happy brown dog running through water at the beach">
<img src="assets/images/dog14.webp" alt="A mixed-breed puppy sitting in the sand, looking into the camera at the beach">
<img src="assets/images/wilda.webp" alt="A maltipoo in the woods in winter">
</div>
</div>
<!-- Booking CTA -->
<section>
<div class="cta-container">
<div class="cta-content">
<div class="topic-tag">Services</div>
<h2>In need of dog care?</h2>
<p>Whether you're planning a getaway or just need a hand for a few hours, we're here to assist you whenever you need!</p>
<a href="services.html" class="button">Our Services</a>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer>
<div id="footer-container">
<a href="index.html"><img src="assets/images/paw_play_logo_white.webp" alt="Sunne Daycare Logotype"></a>
<p>Dog care in Sunne, Wermland</p>
<!-- Contact information -->
<div id="footer-contact-section">
<div class="footer-contact">
<p><strong>E-mail:</strong> frida@sunnedogsitter.com<br><strong>Phone:</strong> 070 53 47 805</p>
</div>
<div class="footer-contact">
<p>Höjen 34, 686 93 Sunne<br>Wermland Sweden</p>
</div>
</div>
<!-- Footer Navigation -->
<div id="footer-navigation-section">
<nav id="footer-navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="gallery.html" class="active">Gallery</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact & <i>Bookings</i></a></li>
</ul>
</nav>
<!-- Social Media -->
<div class="social-links">
<a href="https://www.instagram.com/" aria-label="See Dogcare Sunne on Instagram" target="_blank"><i class="fa-brands fa-instagram"></i></a>
<a href="https://www.facebook.com/login/" aria-label="See Dogcare Sunne on Facebook" target="_blank"><i class="fa-brands fa-facebook"></i></a>
<a href="https://www.youtube.com/" aria-label="See Dogcare Sunne on Youtube" target="_blank"><i class="fa-brands fa-youtube"></i></a>
<a href="https://x.com/" aria-label="See Dogcare Sunne on X (twitter)" target="_blank"><i class="fa-brands fa-twitter"></i></a>
</div>
</div>
</div>
<!-- Footer Copyright -->
<div id="footer-copyright">
<p>All Rights Reserved • 2024 • Developed by Frida with <i class="fa-solid fa-heart"></i></p>
</div>
</footer>
</body>
</html>