-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
233 lines (189 loc) · 10.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<audio src="../Booktobia/Chopin.mp3" autoplay loop></audio>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script defer src="../Booktobia/app.js"></script>
<link rel="stylesheet" href="TestStyle.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bungee+Spice&family=Caveat:[email protected]&family=Dancing+Script:[email protected]&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bungee+Spice&family=Dancing+Script:[email protected]&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
</head>
<body class="Home">
<header>
<div class="Button">
<a href="/Login.html" class="Login">Login</a>
<a href="/SginUP.html" class="SignUP">Sign Up</a>
</div>
<pre class="clear"></pre>
<h1 style="text-align: center;">Booktobia</h1>
<div class="search-bar">
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Books..">
<div class="lists">
<ul id="myUL">
<li><a href="/Shehap Page.html">Wonder
<img src="images/wonder.png" alt="">
</a></li>
<li><a href="Rich Dad.html">Rich Dad Poor Dad
<img src="images/Rhic Dad.png" alt="">
</a>
</li>
<li><a href="">The Perks of Being A Wallflower
<img class="perks-search" src="images/the perks of being a wallflower.png" alt="">
</a></li>
<li><a href="/13 reason why.html">13 Reason Why
<img src="images/13 Reasons Why.png" alt="">
</a></li>
<li><a href="images/the fault in our stars.html">The Fault in our stars</a></li>
</ul>
</div>
</div>
</div>
</header>
<nav class="Home-nav">
<ul>
<li>
<a href="/contact us.html">Contact Us</a>
</li>
<li>
<a href="/best selling.html">Best Selling <a>
</li>
<pre class="clear"></pre>
</ul>
</nav>
<div class="Books">
<div class="Book1">
<img src="images/wonder.png" alt="" class="novelimg">
<h1>
Wonder
</h1>
<p class="descibtion" >
Wonder" is a novel written by R.J. Palacio that tells the story of August Pullman,
a young boy with facial differences who attends public school for the first time in fifth grade.
The book explores themes of kindness, empathy, and acceptance as August navigates the challenges of fitting
in and facing prejudice due to his appearance. Through multiple perspectives,
including August's own, the novel highlights the impact of bullying and the power of friendship and compassion.
"Wonder" encourages readers to see beyond outward appearances and embrace the uniqueness of each individual.
</p>
<div class="read-now">
<a href="/wonder.html">Read Now</a>
</div>
<div class="author-and-rating">
</div>
</div>
<div class="Book2">
<img src="images/the fault in our stars book.jpg" alt="" class="novelimg">
<h1>
The fault in our stars
</h1>
<p class="descibtion" >
The Fault in Our Stars" is a heartfelt novel by John Green, narrated by Hazel Grace Lancaster,a sixteen-year-old girl living with cancer. The story centers on Hazel's journey of self-discovery, love, and coping with illness. At a cancer support group, she meets Augustus Waters, a charming and witty boy who has lost a leg to cancer but remains optimistic. Despite their initial hesitations, Hazel and Augustus develop a deep connection and embark on a romantic relationship.
Their relationship faces challenges as they confront the realities of their illnesses and mortality. They share fears, hopes, and dreams while grappling with life's unfairness and uncertainty. Alongside personal struggles, Hazel and Augustus seek closure by meeting their favorite author in Amsterdam, hoping to find answers to life's questions.
</p>
<div class="read-now">
<a href="/the fault in our stars.html">Read Now</a>
</div>
<div class="author-and-rating">
</div>
</div>
<div class="Book3">
<img src="images/Rich Dad Poor Dad.png" alt="" class="novelimg">
<h1>
Rich Dad Poor Dad
</h1>
<p class="descibtion" >
Rich Dad Poor Dad" by Robert T. Kiyosaki is a personal finance classic that explores the mindset and financial habits that separate the wealthy from the poor and middle-class. The book is structured as a series of lessons that Kiyosaki learned from his "rich dad," who was the father of his best friend, and his "poor dad," who was his biological father.
The book challenges conventional beliefs about money and offers insights into building wealth through strategies such as investing in real estate, starting a business, and cultivating a mindset of abundance. It emphasizes the value of taking calculated risks, learning from failures, and constantly expanding one's financial knowledge.
</p>
<div class="read-now">
<a href="rich dad.html">Read Now</a>
</div>
<div class="author-and-rating">
</div>
</div>
<div class="Book4">
<img src="images/the perks of being a wallflower book-.jpg" alt="" class="novelimg">
<h1>
The Perks of Being a wallflower
</h1>
<p class="descibtion" >
The Perks of Being a Wallflower" by Stephen Chbosky is a coming-of-age novel that follows the experiences of Charlie, a socially awkward and introverted teenager, as he navigates high school and adolescence. The story is told through a series of letters that Charlie writes to an anonymous recipient, chronicling his thoughts, feelings, and observations about life.
Charlie struggles with depression, anxiety, and trauma stemming from past experiences, including the death of his Aunt Helen. He finds solace and a sense of belonging in a group of misfit friends, including the eccentric Sam and her stepbrother Patrick, who introduce him to new experiences and perspectives.
</p>
<div class="read-now">
<a href="/the perks.html">Read Now</a>
</div>
<div class="author-and-rating">
</div>
</div>
<div class="Book5">
<img src="images/13 Reasons Why.png" alt="" class="novelimg">
<h1>
Thirteen Reasons WHY
</h1>
<p class="descibtion" >
Thirteen Reasons Why" by Jay Asher is a young adult novel that follows the story of Clay Jensen, a high school student who receives a mysterious package containing thirteen cassette tapes recorded by Hannah Baker, a classmate who recently committed suicide. Each tape is dedicated to a person who Hannah believes played a role in her decision to end her life.
As Clay listens to the tapes, he learns about the events and people that contributed to Hannah's downward spiral, including rumors, betrayal, bullying, and social isolation. Through Hannah's recordings, Clay gains insight into her experiences and the impact of his own actions and inactions on her life.
</p>
<div class="read-now">
<a href="13 reasons why.html">Read Now</a>
</div>
<div class="author-and-rating"></div>
</div>
</div>
<footer>
<div class="contact">
</div>
<div class="top-buttom">
</div>
</footer>
<script>
function myFunction() {
// Declare variables
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName('li');
// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
document.addEventListener("DOMContentLoaded", function() {
var searchInput = document.getElementById("myInput");
var searchMenu = document.getElementById("myUL");
searchInput.addEventListener("focus", function() {
showSearchMenu();
});
searchInput.addEventListener("blur", function() {
hideSearchMenu();
});
function showSearchMenu() {
searchMenu.style.display = "block";
}
function hideSearchMenu() {
// Using a timeout to allow click events on search menu items before hiding it
setTimeout(function() {
searchMenu.style.display = "none";
}, 200);
}
});
</script>
</body>
</html>