forked from AkshadK7/Edumatica-EHub
-
Notifications
You must be signed in to change notification settings - Fork 0
/
books.html
167 lines (139 loc) · 6.18 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Edumatica EHub</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/heroic-features.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html">Edumatica EHub</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="attendance.html">AI Attendance</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="books.html">Book Resources
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="location.html">Location Tracker</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<!-- Jumbotron Header -->
<header class="jumbotron my-4">
<h1 class="display-3">Book Resources</h1>
<p class="lead">Did you know?
Reading for just 6 minutes can reduce the stress levels by 68%.
To cater your needs and to enhance your imaginative power we decided to provide a large pool of books so that you don’t have to go on searching for each and every books. Just drop the book name in the box provided and you will get all the books related to the domain specified in the box.</p>
<!-- -#############################################API################################################################# -->
<div id="search" class="#f5f5f5 grey lighten-4 z-depth-5">
<form id="myform">
<div class="input-field">
<input type="search" id="books">
<!-- <label for="search">Search Books</label> -->
<button style="border: solid black 1px ;" class="btn red">Search Books</button>
</div>
<!-- <input type="reset" value="Reset the form"> -->
</form>
</div>
<!-- <div id="result"> -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- -###############################################API###### height="60%" width="3%"######################################################### -->
</header>
<!-- Page Features -->
<div class="row text-center">
<div class="col-lg-3 col-md-6 mb-4">
<div class="card h-100">
<img class="card-img-top" src="" alt="" id="Bookimg1">
<div class="card-body">
<h4 class="card-title" id="Book1"></h4>
<p class="card-text" id="Author1"><b>One must always be careful of books,"said Tessa,"and what is inside them, for words have the power to change us.”
</b><br> -Cassandra Clare, Clockwork Angel</p>
</div>
<div class="card-footer">
<a href="" class="btn btn-primary" id="Link1" target="_blank">Read More</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card h-100">
<img class="card-img-top" src="" alt="" id="Bookimg2">
<div class="card-body">
<h4 class="card-title" id="Book2"></h4>
<p class="card-text" id="Author2"><b>“Books are the quietest and most constant of friends; they are the most accessible and wisest of counselors, and the most patient of teachers.”
</b><br> ―Charles W. Eliot</p>
</div>
<div class="card-footer">
<a href="" class="btn btn-primary" id="Link2" target="_blank">Read More</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card h-100">
<img class="card-img-top" src="" alt="" id="Bookimg3">
<div class="card-body">
<h4 class="card-title" id="Book3"></h4>
<p class="card-text" id="Author3"><b>“A great book should leave you with many experiences, and slightly exhausted at the end. You live several lives while reading.”
</b><br> ―William Styron</p>
</div>
<div class="card-footer">
<a href="" class="btn btn-primary" id="Link3" target="_blank">Read More</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card h-100">
<img class="card-img-top" src="" alt="" id="Bookimg4">
<div class="card-body">
<h4 class="card-title" id="Book4"></h4>
<p class="card-text" id="Author4"><b>“One glance at a book and you hear the voice of another person, perhaps dead for years. To read is to voyage through time.”
</b><br> ―Carl Sagan</p>
</div>
<div class="card-footer">
<a href="" class="btn btn-primary" id="Link4" target="_blank">Read More</a>
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright © Team Prometheus 2020</p>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="booksapi.js"></script>
</body>
</html>