forked from zero-to-mastery/Halloween-Hacktoberfest-Edition
-
Notifications
You must be signed in to change notification settings - Fork 0
/
books.html
229 lines (200 loc) · 8.55 KB
/
books.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
225
226
227
228
229
<!doctype html>
<html lang="en">
<head id="head">
<!-- Head information is dynamically loaded -->
<!-- If you need to include a different stylesheet do so below -->
<script src="./js/cssLoad.js"></script> <!-- Dynamically Imports css -->
<link href="./css/books.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./css/fog.css" />
</head>
<body>
<div id="myNav">
<!-- NavBar is dynamically loaded -->
<!-- If you need to include links check out ./js/headFoot.js -->
</div>
<div id='fog-roll'>
<img src="https://media.giphy.com/media/xEjTM5COAKyNa/giphy-downsized.gif" />
</div>
<main role="main" id="main" class="top-margin">
<div class="container">
<h2>Spooky Reads</h2>
<div class="books">
<div class="row">
<div class="col-sm-6 col-md-3">
<a href="https://www.goodreads.com/book/show/17061.Coraline">
<div class="card">
<img class="card-img-top" src="https://images.gr-assets.com/books/1493497435l/17061.jpg" alt="Coraline">
<div class="card-body">
<h3>Coraline</h3>
<p>Neil Gaiman</p>
</div>
</div>
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="https://www.goodreads.com/book/show/43763.Interview_with_the_Vampire">
<div class="card">
<img class="card-img-top" src="https://images.gr-assets.com/books/1462731030l/9646229.jpg" alt="Interview with the Vampire">
<div class="card-body">
<h3>Interview with the Vampire</h3>
<p>Anne Rice</p>
</div>
</div>
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="https://www.goodreads.com/book/show/21996.The_Devil_in_the_White_City">
<div class="card">
<img class="card-img-top" src="https://images.gr-assets.com/books/1388184618l/259028.jpg" alt="The Devil in the White City">
<div class="card-body">
<h3>The Devil in the White City</h3>
<p> Erik Larson</p>
</div>
</div>
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="https://www.goodreads.com/book/show/11588.The_Shining">
<div class="card">
<img class="card-img-top" src="https://images.gr-assets.com/books/1353277730l/11588.jpg" alt="The Shining">
<div class="card-body">
<h3>The Shining</h3>
<p>Stephen King</p>
</div>
</div>
</a>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-6 col-md-3">
<a href="https://www.goodreads.com/book/show/4602032-dead-until-dark">
<div class="card">
<img class="card-img-top" src="https://images.gr-assets.com/books/1266308969l/4602032.jpg" alt="Dead Until Dark">
<div class="card-body">
<h3>Dead Until Dark</h3>
<p>Charlaine Harris</p>
</div>
</div>
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="https://www.goodreads.com/book/show/1325218.Scary_Stories_to_Tell_in_the_Dark">
<div class="card">
<img class="card-img-top" src="https://images.gr-assets.com/books/1440189576l/1325218.jpg" alt="Scary Stories to Tell in the Dark">
<div class="card-body">
<h3>Scary Stories to Tell in the Dark</h3>
<p>Alvin Schwartz</p>
</div>
</div>
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="https://www.goodreads.com/book/show/17245.Dracula">
<div class="card">
<img class="card-img-top" src="https://images.gr-assets.com/books/1394828802l/588495.jpg" alt="Dracula">
<div class="card-body">
<h3>Dracula</h3>
<p>Bram Stoker</p>
</div>
</div>
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="https://www.goodreads.com/book/show/89717.The_Haunting_of_Hill_House">
<div class="card">
<img class="card-img-top" src="https://images.gr-assets.com/books/1327871336l/89717.jpg" alt="The Haunting of Hill House">
<div class="card-body">
<h3>The Haunting of Hill House</h3>
<p>Shirley Jackson</p>
</div>
</div>
</a>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-6 col-md-3">
<a href="https://www.goodreads.com/book/show/153025.Heart_Shaped_Box">
<div class="card">
<img class="card-img-top" src="https://images.gr-assets.com/books/1328043955l/153025.jpg" alt="Heart-Shaped Box">
<div class="card-body">
<h3>Heart-Shaped Box</h3>
<p>Joe Hill</p>
</div>
</div>
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="https://www.goodreads.com/book/show/23807.The_Silence_of_the_Lambs">
<div class="card">
<img class="card-img-top" src="https://images.gr-assets.com/books/1390426249l/23807.jpg" alt="The Silence of the Lambs">
<div class="card-body">
<h3>The Silence of the Lambs</h3>
<p>Thomas Harris</p>
</div>
</div>
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="https://www.goodreads.com/book/show/12948.The_Turn_of_the_Screw">
<div class="card">
<img class="card-img-top" src="https://images.gr-assets.com/books/1443203592l/12948.jpg" alt="The Turn of the Screw">
<div class="card-body">
<h3>The Turn of the Screw</h3>
<p>Henry James</p>
</div>
</div>
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="https://www.goodreads.com/book/show/902.The_Westing_Game">
<div class="card">
<img class="card-img-top" src="https://images.gr-assets.com/books/1356850909l/902.jpg" alt="The Westing Game">
<div class="card-body">
<h3>The Westing Game</h3>
<p>Ellen Raskin</p>
</div>
</div>
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="https://www.goodreads.com/book/show/37034.The_Woman_in_Black">
<div class="card">
<img class="card-img-top" src="https://images.gr-assets.com/books/1327869942l/37034.jpg" alt="The Woman in Black ">
<div class="card-body">
<h3>The Woman in Black</h3>
<p>Susan Hill</p>
</div>
</div>
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="https://www.goodreads.com/book/show/24800.House_of_Leaves">
<div class="card">
<img class="card-img-top" src="https://images.gr-assets.com/books/1403889034l/24800.jpg" alt="House of Leaves">
<div class="card-body">
<h3>House of Leaves</h3>
<p>Mark Z. Danielewski</p>
</div>
</div>
</a>
</div>
</div><!-- /.row -->
</div><!-- /.books -->
</div><!-- /.container -->
</main>
<div id="myFoot">
<!-- Footer is dynamically loaded -->
<!-- If you need to include links check out ./js/headFoot.js -->
</div>
<div id="endScripts">
<!-- Global script files are imported from ./js/headFoot.js -->
<!-- Add page specific link below this line -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</div>
<!-- Loads Nav & Footer - IMPORTANT -->
<script src="./js/headFoot.js"></script>
</body>
</html>