-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
266 lines (207 loc) · 10.2 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
258
259
260
261
262
263
264
265
266
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scholar Binder</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="static/css/chat.css">
<link rel="stylesheet" href="static/css/home.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.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=Poppins:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- Hero -->
<div class="hero">
<h1>Scholar Binder</h1>
<h2>Online Book Buy, Sell, and Share</h2>
<p>Welcome to our platform to buy, sell, and share books online. Discover new reads and connect with other book lovers from around the world.</p>
<a class="login" href="SBFINAL.html"><button class="login-btn"> SIGN UP/LOG IN </button></a>
</div>
<!-- work -->
<div class="work">
<div class="work-heading">
<h2> How It Works</h2>
<p>Our platform is simple and easy to use. Browse our collection of books, make a purchase, and receive it right at your doorstep.
Sell your gently used books and make space for new reads. Share your favorite books with others and spread the love of reading.</p>
</div>
<div class="work-img">
<img src="Assets/pexels-photo-5772285.jpeg" alt="Library" height="300px" width="250px">
</div>
</div>
<!-- buy-books -->
<div class="buy-books">
<div class="buy-books-heading">
<h2>Buy Books</h2>
<p>From thrillers to romance novels, find your next page-turner on our platform. We have a diverse collection of books for all tastes.</p>
</div>
<div class="topics">
<div class="er">
<h3>Engineering</h3>
<ul>
<li><a href="">Electronics</a></li>
<li><a href="">AI</a></li>
<li><a href="">MPMC</a></li>
</ul>
</div>
<div class="sc">
<h3>Science</h3>
<ul>
<li><a href="">PHYSICS</a></li>
<li><a href="">ORGANIC CHEMISTRY</a></li>
<li><a href="">Notes</a></li>
</ul>
</div>
<div class="hs">
<h3>Historical</h3>
<ul>
<li><a href="">Wolf Hall</a></li>
<li><a href="">The Book Thief</a></li>
<li><a href="">The Help</a></li>
</ul>
</div>
</div>
<div class="buy-book-btn">
<button class="buy-btn"> Buy Book</button>
</div>
</div>
<!-- sell-books -->
<div class="sell-books">
<div class="sell-books-heading">
<h2>Sell Books</h2>
<p>Make space for new books and earn some extra cash by selling your gently used books on our platform.</p>
</div>
<div class="sell-grids">
<div class="step-1">
<h3>Step 1: Upload Your Books</h3>
<p>Upload photos and descriptions of the books you want to sell.</p>
</div>
<div class="step-2">
<h3>Step 2: Set the Price</h3>
<p>Set the price you want to sell your books for.</p>
</div>
<div class="step-3">
<h3>Step 3: Get Paid</h3>
<p>Receive payment when your books are sold and shipped.</p>
</div>
<div class="step-4">
<h3>Step 4: Ship Your Books</h3>
<p>Ship the books to the buyer using our easy-to-use shipping system.</p>
</div>
</div>
<div class="sell-book-btn">
<button class="sell-btn">Sell books</button>
</div>
</div>
<!-- share-books -->
<div class="share-books">
<div class="share-books-heading">
<h2>Share Books</h2>
<p>Discover new books and connect with other book lovers by sharing your favorite books with the community.</p>
</div>
<div class="share-grids">
<div class="share-step-1">
<div class="share-img">
<img class="share-pics" src="Assets/pexels-tima-miroshnichenko-9572545.jpg" alt="share-1" height="250px" width="250px">
</div>
<div class="share-step-heading">
<h3>Join a Book Club</h3>
<p>Connect with other book lovers and share your thoughts and opinions on different books.</p>
</div>
</div>
<!--share-step-2-->
<div class="share-step-2">
<div class="share-img">
<img class="share-pics" src="Assets/young-woman-travelling-by-subway-reading-book.jpg" alt="share-2" height="250px" width="250px">
</div>
<div class="share-step-heading">
<h3>Read in Public Spaces</h3>
<p>Leave your gently used books in public spaces so that others can discover and enjoy them.</p>
</div>
</div>
<!--share-step-3 -->
<div class="share-step-3">
<div class="share-img">
<img class="share-pics" src="Assets/front-view-woman-young-girl-together-library.jpg" alt="share-3" height="250px" width="250px">
</div>
<div class="share-step-heading">
<h3>Organize Book Exchange</h3>
<p>Set up a book exchange in your local community and share your favorite reads</p>
</div>
</div>
</div>
</div>
<!-- chat -->
<!-- <div class="chat">
<h2>Chat</h2>
<p>Connect with other book lovers and foster a commiunity of reading enthusiasts through our chat feature.</p>
<button>CHAT</button>
</div> -->
<!-- faqs -->
<div class="faqs">
<h2>FAQs</h2>
<h3>Have more questions? check out ourFAQs Section to learn more about how our platform works.</h3>
<p>Q: How can i meet seller in near by location?</p>
<p>A: We will provide you seller contact details.</p>
<p>Q: Can i cancel an order?</p>
<p>A: Yes you can cancel an order before shipment. Once the shipment has started, refunds are not possible.</p>
<p>Q: How do i contact Customer Service?</p>
<p>A: You can contact our Customer Service team through our Contact Us.</p>
</div>
<!--contact us -->
<div class="contact-join">
<div class="contact-us">
<h2>Contact Us</h2>
<p>If you have any questions or comments please don't hesitate to reach out to us.</p>
<p>Email: [email protected]</p>
</div>
<!-- join-the-community -->
<div class="joinco">
<h2>Join the Community</h2>
<p>Become a part of our community of book lovers and discover new reads to add to your collection</p>
<button class="join">join</button>
</div>
</div>
<!-- CHAT BAR BLOCK -->
<div class="chat-bar-collapsible">
<button id="chat-button" type="button" class="collapsible">Support Service!
<i id="chat-icon" style="color: #fff;" class="fa fa-fw fa-comments-o"></i>
</button>
<div class="content">
<div class="full-chat-block">
<!-- Message Container -->
<div class="outer-container">
<div class="chat-container">
<!-- Messages -->
<div id="chatbox">
<h5 id="chat-timestamp"></h5>
<p id="botStarterMessage" class="botText"><span>Loading...</span></p>
</div>
<!-- User input box -->
<div class="chat-bar-input-block">
<div id="userInput">
<input id="textInput" class="input-box" type="text" name="msg" placeholder="Tap 'Enter' to send a message">
<p></p>
</div>
<div class="chat-bar-icons">
<i id="chat-icon" style="color: crimson;" class="fa fa-fw fa-heart" onclick="heartButton()"></i>
<i id="chat-icon" style="color: #333;" class="fa fa-fw fa-send" onclick="sendButton()"></i>
</div>
</div>
<div id="chat-bar-bottom">
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="static/scripts/responses.js"></script>
<script src="static/scripts/chat.js"></script>
</body>
</html>