forked from zero-to-mastery/Halloween-Hacktoberfest-Edition
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhalloweenBooks.html
170 lines (143 loc) · 6.17 KB
/
halloweenBooks.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
<!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">
<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 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><!-- /.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>