generated from Code-Institute-Org/ci-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
gallery.html
129 lines (111 loc) · 4.54 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
<!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="A Place for Dogs and Their Friends">
<meta name="author" content="Naomi Berhane">
<meta name="keywords" content="bone appétite, dog café">
<link rel="stylesheet" href="assets/css/style.css">
<title>Bone Appétite</title>
</head>
<body>
<header>
<!--Logo Title -->
<a href="index.html" class="remove-underline">
<h1 id="title">Bone Appétite</h1>
</a>
<!--Nav bar content-->
<nav>
<div class="navbar">
<ul class="nav-links">
<li>
<a href="index.html" aria-label="Home">Home</a>
</li>
<li>
<a href="gallery.html" class="active" aria-label="Gallery">Gallery</a>
</li>
<li>
<a href="contact.html" aria-label="Contact">Contact</a>
</li>
</ul>
</div>
</nav>
</header>
<main>
<!--Main Content Gallery Parge -->
<section>
<h2 class="hero__title">Hero image</h2>
<div id="hero-image">
</div>
</section>
<!--Main Content Paragraph Text -->
<section class="hangouts-page">
<h2> Our Hangouts</h2>
<p> Bone Appétite, organizes dog events to promote socialization among dogs.
We offer specialized activities for small dogs, big dogs, and we also have a general dogs-group for every size dog.
Whether it's small dog gatherings, energetic events for larger breeds, or inclusive gatherings for dogs of all sizes,
our events provide opportunities for dogs to socialize, play, and build new connections in a safe and engaging environment.
</p>
</section>
<!--Gallery Images-->
<section id="gallery-photos">
<h2 class="gallery-photos">Gallery Photos</h2>
<div class="gallery-container">
<span class="pic-1">
<img src="assets/images/snow-dogs-play.jpg" alt="Two dogs playing tugg on a winter snow day. ">
</span>
<span class="pic-2">
<img src="assets/images/dogs-running-in-field.jpg" alt="Three dogs running in path of a field. " >
</span>
<span class="pic-3">
<img src="assets/images/two-sausages.jpg" alt="Two sausages sitting looking away from camera. ">
</span>
<span class="pic-4">
<img src="assets/images/two-dogs-and-a-stick.jpg" alt="Two dogs sitting outside playing with a stick. ">
</span>
<span class="pic-5">
<img src="assets/images/dog_picnic.jpg" alt="Two dogs running towards the camera in a yellow grassfield. ">
</span>
<span class="pic-6">
<img src="assets/images/two-dogs-stuffy.jpg" alt="Two dogs playing tugg with a stuffed animal. ">
</span>
<span class="pic-7">
<img src="assets/images/three-dogs-playing.jpg" alt="Three dogs playing on the streets. ">
</span>
<span class="pic-8">
<img src="assets/images/grass_pose.jpg" alt="Two dogs running at the beach. ">
</span>
</div>
</section>
</main>
<!--Footer-->
<footer>
<ul class="social-media">
<li>
<a href="https://instagram.com" target="_blank" rel="noopener" aria-label="Visit our Instagram page">
<i class="fab fa-instagram"></i>
</a>
</li>
<li>
<a href="https://facebook.com" target="_blank" rel="noopener" aria-label="Visit our Facebook page">
<i class="fab fa-facebook-square"></i>
</a>
</li>
<li>
<a href="https://twitter.com" target="_blank" rel="noopener" aria-label="Visit our Twitter page">
<i class="fab fa-twitter-square"></i>
</a>
</li>
<li>
<a href="https://youtube.com" target="_blank" rel="noopener" aria-label="Visit our YouTube channel">
<i class="fab fa-youtube-square"></i>
</a>
</li>
</ul>
</footer>
<!--Script for icons "Font Awesome"-->
<script src="https://kit.fontawesome.com/04566e427e.js" crossorigin="anonymous"></script>
</body>
</html>