-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
257 lines (234 loc) · 14.3 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
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="style.css" rel="stylesheet">
<script defer src="script.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Dancing+Script:wght@600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@500&display=swap" rel="stylesheet">
<title>Samantha's Book Collection</title>
</head>
<body>
<nav class="navbar">
<div class="left-nav">
<img src="img/logo2.png" class="logo-image" alt="Logo for website">
<div class="info">
<h4>Samantha Grieco</h4>
<p>Book Collection</p>
</div>
</div>
<div class="right-nav">
</div>
</nav>
<div class="container">
<div class="name">
<h2>My Book Collection</h2>
<p>~ 2019 Chosen Selection ~</p>
</div>
<div class="parallax">
<h1>BOOK PICKS</h1>
</div>
<div class="clock-section">
<div class="clock">
<div class="hand hour" data-hour-hand></div>
<div class="hand minute" data-minute-hand></div>
<div class="hand second" data-second-hand></div>
<div class="number number1">1</div>
<div class="number number2">2</div>
<div class="number number3">3</div>
<div class="number number4">4</div>
<div class="number number5">5</div>
<div class="number number6">6</div>
<div class="number number7">7</div>
<div class="number number8">8</div>
<div class="number number9">9</div>
<div class="number number10">10</div>
<div class="number number11">11</div>
<div class="number number12">12</div>
</div>
<h3><i>So many books, so little time <br>-Frank Zappa</i></h3>
</div> <!--closing clock section -->
<div class="parallax" id="parallax-two">
</div>
<section class="quotes">
<h5>Quote Collection</h5>
<div class="button-section">
<div class="btn" onclick="displayOne()">Philosophy Quotes<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-align-center" width="32" height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<line x1="4" y1="6" x2="20" y2="6" />
<line x1="8" y1="12" x2="16" y2="12" />
<line x1="6" y1="18" x2="18" y2="18" />
</svg></div>
<div class="btn" onclick="displayTwo()">Favourite Quotes<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-align-center" width="32" height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<line x1="4" y1="6" x2="20" y2="6" />
<line x1="8" y1="12" x2="16" y2="12" />
<line x1="6" y1="18" x2="18" y2="18" />
</svg></div>
</div>
<div class="quote-block" id="phil">
<div class="author"><p>Albert Camus</p></div>
<p class="the-quote">"I often thought that if I had to live in the trunk of a dead tree, with nothing to do but look up at the sky flowering overhead, little by little I would have gotten used to it"</p>
<div class="author"><p>Albert Camus</p></div>
<p class="the-quote">"Everybody knows life isn't worth living. Deep down I knew perfectly well that it doesn't much matter whether you die at thirty or at seventy, in either case other men and women will naturally go on living- and for thousands of years"</p>
<div class="author"><p>Haruki Murakami</p></div>
<p class="the-quote">"Where there's no power to imagine, no responsibility can arise"</p>
<div class="author"><p>Haruki Murakami</p></div>
<p class="the-quote">"Say the wind blows. It can be a strong, violent wind or a gentle breeze. But eventually every kind of wind dies out and disappears. Wind doesn't have a form"</p>
</div>
<div class="quote-block" id="fav">
<div class="author"><p>Albert Camus</p></div>
<p class="the-quote">"I had lived my life one way and I could just as well have lived it another. I had done this and I hadn't done that. I hadn't done this thing but I had done another"</p>
<div class="author"><p>Haruki Murakami</p></div>
<p class="the-quote">"Closing your eyes isn't going to change anything. Nothing's going to disappear just because you can't see what's going on. In fact, things will be even worse the next time you open your eyes. That's the kind of world we live in"</p>
<div class="author"><p>Paulo Cohelo</p></div>
<p class="the-quote">"When someone makes a decision, he is really diving into a strong current that will carry him into places he had never dreamed of when he first made the decision"</p>
</div>
</section>
<h6>Book Review</h6>
<div class="grid-container">
<div class="grid-item-b book-1">
<p class="rate right">8/10</p>
<div class="book-section">
<img src="img/1984.jpg" class="image" alt="Image of the book 1984">
</div>
<div class="words-section">
<p class="book-title">-1984 By George Orwell-</p>
<ul class="dash">
<li>This was the first Dystopian Future novel I had ever read, and opened my eyes to a whole new world of content</li>
<li>I was especially impressed with the world that Orwell had created, and the detail put into the government's structure</li>
<li>I usually read a chapter a night, but by the last few chapters I was stuck to the novel and finished it all in one sitting</li>
</ul>
</div>
</div>
<div class="grid-item empty-1"></div>
<div class="grid-item-b book-2">
<p class="rate left">8/10</p>
<div class="words-section">
<p class="book-title">-The Master and Margarita by Mikhail Bulgakov-</p>
<ul class="dash">
<li>This novel, originally written in Russian, was the first translated media I had ever read; Although, a difficult task at times</li>
<li>Many chapters were quite dense, and I often struggled to understand the plot due to the language</li>
<li>I obtained some outside sources in order to help me grasp the text, as I felt I was missing key details</li>
<li>Overall, the payoff was excellent, as the ending of this story felt magical, and I cannot wait to read it again</li>
</ul>
</div>
<div class="book-section image-adjust">
<img src="img/mnm.jpg" class="image" alt="Image of the book The Master and Margarita">
</div>
</div>
<div class="grid-item empty-2"></div>
<div class="grid-item-b book-3">
<p class="rate right">9/10</p>
<div class="book-section">
<img src="img/kafka.jpg" class="image" alt="image of the book Kafka on the Shore">
</div>
<div class="words-section">
<p class="book-title">-Kafka on The Shore by Haruki Murakami-</p>
<ul class="dash">
<li>This novel, similar to The M&M, felt extremely magical at times</li>
<li>I enjoyed this story, as it focused on the main characters inner thoughts, even personifying them into another character named "crow"</li>
<li>Originally written in Japanese, there were many Western references within the story, and it was interesting to read from my westernized perspective</li>
</ul>
</div>
</div>
<div class="grid-item empty-3"></div>
<div class="grid-item-b book-4">
<p class="rate left">8/10</p>
<div class="words-section">
<p class="book-title">-I Am Legend by Richard Matheson-</p>
<ul class="dash">
<li>Usually, I am not a fan of post-apocalyptic stories, however, this book entails so much more than that </li>
<li>I enjoyed this story as it allowed me to reflect on who the "bad guys" really are; I found myself at times sympathizing with the vampires</li>
<li>As well, the ending was one of the best I had ever read</li>
<li>The process of understanding why the novel is called I Am Legend is a journey I will never forget</li>
</ul>
</div>
<div class="book-section image-adjust">
<img src="img/legend.jpg" class="image" alt="Image of the book I am Legend">
</div>
</div>
<div class="grid-item empty-4"></div>
<div class="grid-item-b book-5">
<p class="rate right">8.5/10</p>
<div class="book-section">
<img src="img/alchemist.jpg" class="image" alt="Image of the book The Alchemist" >
</div>
<div class="words-section">
<p class="book-title">-The Alchemist by Paulo Coelho-</p>
<ul class="dash">
<li>The best way to describe this novel is with one word: Peaceful</li>
<li>This novel takes you on a journey with only you and the main character's thoughts</li>
<li>I found that the chapters I enjoyed the most were the ones filled with the main characters rambling thoughts, which can sound boring but in all actuality was a great adventure </li>
</ul>
</div>
</div>
<div class="grid-item empty-5"></div>
<div class="grid-item-b book-6">
<p class="rate left">7/10</p>
<div class="words-section">
<p class="book-title">-The Kite Runner by Khaled Hosseini-</p>
<ul class="dash">
<li>This was an excellent read, however at times a bit too sad for my liking</li>
<li>I enjoyed the subtle connections that the book would make with itself, most notably the lines spoken at the end of the final chapter</li>
<li>This novel also opened my eyes to many of the troubles countries are facing across the world, some of which we don't even hear about in North America</li>
</ul>
</div>
<div class="book-section image-adjust">
<img src="img/kite.jpg" class="image" alt="Image of the book The Kite Runner">
</div>
</div>
<div class="grid-item empty-6"></div>
<div class="grid-item-b book-7">
<p class="rate right">8/10</p>
<div class="book-section">
<img src="img/brave.jpg" class="image" alt="Image of the book Brave New World">
</div>
<div class="words-section">
<p class="book-title">-Brave New World by Aldous Huxley-</p>
<ul class="dash">
<li>My favourite aspect of this novel is the writing style of the author. The story was fantastic, however, it was really the author's way of phrasing sentences that drew me in</li>
<li>Similar to 1984, this novel amazed me in the world that was created, and the mechanisms used by the government to control its citizens</li>
<li>However, I was not extremely impressed with the ending. The beginning of this book is definitely my favourite aspect</li>
</ul>
</div>
</div>
<div class="grid-item empty-7"></div>
<div class="grid-item-b book-8">
<p class="rate left">8.5/10</p>
<div class="words-section">
<p class="book-title">-The Stranger by Albert Camus-</p>
<ul class="dash">
<li>This was the first philosophy book I had ever read; I chose it because it was short and thought it would be a good start</li>
<li>This book is similar to The Alchemist, where my favourite chapters consisted of the main character living his ordinary life and hearing his inner thoughts</li>
<li>I found myself bookmarking numerous pages within this novel, as there are so many gems within quotes </li>
</ul>
</div>
<div class="book-section image-adjust" onmouseover="">
<img src="img/stranger.jpg" class="image" alt="Image of the book The Stranger">
</div>
</div>
<div class="grid-item empty-8"></div>
</div> <!--closing grid -->
</div> <!--closing content -->
<footer>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-mail" width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round" onclick = "parent.location='mailto:samtb1@outlook.com'">
<path stroke="none" d="M0 0h24v24H0z"/>
<rect x="3" y="5" width="18" height="14" rx="2" />
<polyline points="3 7 12 13 21 7" />
</svg>
<a href="https://github.com/Samanthatb1" alt="Link to Samantha Grieco GitHub" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-github" width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M9 19c-4.286 1.35-4.286-2.55-6-3m12 5v-3.5c0-1 .099-1.405-.5-2 2.791-.3 5.5-1.366 5.5-6.04a4.567 4.567 0 0 0 -1.333 -3.21 4.192 4.192 0 00-.08-3.227s-1.05-.3-3.476 1.267a12.334 12.334 0 0 0 -6.222 0C6.462 2.723 5.413 3.023 5.413 3.023a4.192 4.192 0 0 0 -.08 3.227A4.566 4.566 0 004 9.486c0 4.64 2.709 5.68 5.5 6.014-.591.589-.56 1.183-.5 2V21" />
</svg>
</a>
</footer>
</body>
</html>