-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
224 lines (201 loc) · 12 KB
/
index.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
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<!DOCTYPE html>
<html lang="en">
<head>
<!--META TAGS-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Bully Book Club - An Online Book Club for Bulldog Lovers." />
<!-- Tells search engines to use this as the main page -->
<link rel="canonical" href="https://kera-cudmore.github.io/Bully-Book-Club/" />
<!-- Social Media Integration for Facebook, LinkedIn & Google - Code from Abi Harrison Meta Tags Webinar - See Readme -->
<meta property="og:type" content="article" />
<meta property="og:title" content="Bully Book Club" />
<meta property="og:description"
content="Bully Book Club - An Online Book Club for Bulldog Lovers. Every month our community read a book together and then review it on the 20th of the month." />
<meta name="image" property="og:image" content="assets/images/bullybookclubwebsite.png" />
<meta property="og:image:alt" content="The Bully Book Club Website shown on a range of devices" />
<meta property="og:url" content="https://kera-cudmore.github.io/Bully-Book-Club/" />
<meta property="og:site_name" content="Bully Book Club" />
<meta name="author" content="Kera Cudmore">
<!--Favicon & Apple Touch Icon-->
<link rel="icon" type="image/x-icon" href="assets/favicon/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
<!-- Bootstrap CDN Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<!-- Font Awesome CDN Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<!-- My Stylesheet -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- Browser Tab Title -->
<title>Bully Book Club</title>
</head>
<body>
<header>
<!-- NAVBAR - Bootstrap code used and modified -->
<nav class="navbar navbar-expand-xl navbar-light bg-nav navbar-top">
<a class="navbar-brand" href=" index.html">
<img src="assets/images/logo.webp" width="100" height="100" class="d-inline-block align-center"
alt="two illlustrated English Bulldogs standing on a pile of books that have Bully Book Club on the spines">
<span class="align-center d-none d-md-inline-block">Bully Book Club</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02"
aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active hvr-float-shadow">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown nav-item hvr-float-shadow">
<a class="nav-link dropdown-toggle" href="books.html" id="navbarDropdownMenuLink" role="button"
data-toggle="dropdown" aria-expanded="false">
Books
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="books.html#currently-reading">Currently Reading</a>
<a class="dropdown-item" href="books.html#reading-next">Reading Next</a>
<a class="dropdown-item" href="books.html#2021">2021</a>
<a class="dropdown-item" href="books.html#2020">2020</a>
<a class="dropdown-item" href="books.html#2019">2019</a>
</div>
</li>
<li class="nav-item hvr-float-shadow">
<a class="nav-link" href="contact.html">Contact Us</a>
</li>
</ul>
</div>
</nav>
</header>
<main class="container-fluid home-container">
<!-- PAGE TITLE-->
<h1>Bully Book Club</h1>
<!-- Container for Carousel-->
<div class="carousel-container">
<div class="row">
<div class="col">
<!-- Carousel - Bootstrap code used and modified -->
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="assets/images/slides/slide1.webp"
alt="Two English Bulldogs sat on a sofa. One Bulldog is wearing a headscarf. Between the Bulldogs is the book The Devil Wears Prada.">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/images/slides/slide2.webp"
alt="English Bulldog led out on a white sofa. The Bulldog is wearing red glasses and a pair of red high heels. There is a copy of the Devil Wears Prada placed next to the bulldog.">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/images/slides/slide3.webp"
alt="An English Bulldog sat in profile wearing a poncho and sombrero.">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/images/slides/slide4.webp"
alt="An English Bulldog sat on an adirondack chair outside with a halloween bow clipped to her collar. Beside the Bulldog are the Discovery of Witches boxset and a printout of the cover of The Southern Book Clubs Guide to Slaying Vampires.">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/images/slides/slide5.webp"
alt="A black and white image of an English Bulldog with the book The Underground Railroad in front of him.">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/images/slides/slide6.webp"
alt="An English Bulldog sat on a love heart quilt wearing a bandana. In front of the Bulldog is the book The Boy at the Back of the Class. There is also a backpack with lots of snacks and toys.">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button"
data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button"
data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<!-- About Us Section -->
<section class="container-fluid about-us-container">
<div class="row">
<div class="col-12">
<h2>About Us</h2>
</div>
<div class="row">
<div class="col-12 col-lg-6">
<h3>What Is Bully Book Club?</h3>
<p>Bully Book Club is an online book club made up of mostly bulldog owners.</p>
<p>Every month our community read a book together and then review it on the 20th of the
month. Members post a photo of their bulldogs with the book on Instagram together with
their review.</p>
</div>
<div class="col-12 col-lg-6">
<h3>Do I Have to Have a Bulldog to Join In?</h3>
<p>No – The book club was inspired by a love of books and bulldogs. Most of our members are
bulldog owners – but everyone is welcome to join in!</p>
</div>
</div>
<div class="row">
<div class="col-12 col-lg-6">
<h3>I prefer reading on a kindle – is that allowed?</h3>
<p>Of course. Whether you read print books, eBooks or listen to the audiobook, we just want to
inspire a
love of reading. </p>
</div>
<div class="col-12 col-lg-6">
<h3>Do you just read books?</h3>
<p>Nope. We have a very active community full of wonderful members who take part in our DM
groups,
we
hold quizzes, host Secret Santa’s, and have regular giveaways. Each month we also choose a
pet
of the
month and they become our Instagram image for that month. </p>
</div>
</div>
</div>
</section>
<!-- Join us Section -->
<section class="container-fluid join-us">
<div class="col-12">
<h2>Join Us!</h2>
<p>Want to join in? Check out our Books page to see what we are currently reading, and then just follow
these easy steps to take part!</p>
<p>Tag the Author, Agent and Publishers (UK & US) in your post, where possible.</p>
<p>Tag @bullybookclub in your post.</p>
<p>Use the hashtag #bullybookclub and a hashtag for the book title.</p>
<p>Include a star rating ⭐️⭐️⭐️⭐️⭐️ in your review.</p>
<p>Try to like and comment on your fellow book club members posts if you have time. The more buzz
in a
single day the better.</p>
</div>
</section>
</main>
<!-- FOOTER -->
<footer class="container-fluid footer-container">
<div class="row">
<div class="col">
<a href="https://www.instagram.com/bullybookclub/" target="_blank" rel="noopener">
<i class="fab fa-instagram hvr-push"><span class="sr-only">Instagram</span></i>
</a>
</div>
<div class="col">
<a href="https://www.goodreads.com/group/show/1165404-bully-book-club" target="_blank" rel="noopener">
<i class="fab fa-goodreads-g hvr-push"><span class="sr-only">Goodreads</span></i>
</a>
</div>
<div class="col">
<a href="contact.html">
<i class="far fa-envelope hvr-push"><span class="sr-only">Contact Us</span></i>
</a>
</div>
</div>
</footer>
<!-- Scripts for Bootstrap-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>