forked from Sejal-G/Readers_Site
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.htm
146 lines (120 loc) · 6.61 KB
/
index.htm
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
<html>
<head>
<title>flipping through the pages</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width:100%;
width:100%;
}
td{
padding: 20px;
}
.card:hover {
box-shadow: 0 8px 5px 0 rgba(0,0,0,0.2);
}
.container {
padding: 1px 1px;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="w3-top">
<div class="w3-bar w3-white w3-wide w3-padding w3-card">
<a href="#home" class="w3-bar-item w3-button"><img src="https://www.popsci.com/sites/popsci.com/files/images/2017/11/books.jpg" height="50" width="75">
<b>BOOK MART</b></a>
<!-- Float links to the right. Hide them on small screens b-->
<div class="w3-right w3-hide-small">
<a href="blog.html" class="w3-bar-item w3-button">Sign Up</a>
</div>
<div class="w3-right w3-hide-small">
<a class="w3-bar-item w3-button">
<select><option value="Add to cart">Add to cart</option>
<option value="2 books added to cart">2 books added to cart:</option>
<option value="gwtw"><b>Gone with the wind</b>
</option>
<option value="st"><b>Speaking tree</b></option>
</select></a></div>
<div class="w3-right w3-hide-small">
<a class="w3-bar-item w3-button">
<select><option value="Browse">Browse</option>
<option value="book">sci-fi</option>
<option value="book">historic</option>
<option value="book">biography</option>
<option value="book">autobiography</option>
<option value="book">romantic</option>
<option value="book">commercial</option>
<option value="book">fictional</option>
<option value="book">inspirational</option>
</select></a></div>
<div class="w3-right w3-hide-small">
<a class="w3-bar-item w3-button">
<select><option value="MY BOOK">MY BOOKS</option>
<option value="MY BOOK">Holmer</option>
<option value="MY BOOK">Julius ceaser</option>
<option value="MY BOOK">Geetanjali</option>
<option value="MY BOOK">Illiad</option>
</select></a></div>
</div>
</div>
<table>
<tr><td><div class="card"><img src="https://boudesigngraphics.files.wordpress.com/2012/10/colour-victoria-finlay.jpg" alt="arts" align="middle" width="87%" height="75%" >
<div class="container"><a href="ebook1.htm">
<h3><b>ARTS</b></h3>
<p>Paint and Draw!</p></a></div></div></td>
<td><div class="card"><img src="https://global-uploads.webflow.com/553ae5d16f1f25be1cc44473/562fe134f5fe5a8c1fd01f8e_Science-A-Definitive-Guide.jpg" alt="science" width="87%" height="75%">
<div class="container">
<h3><b>SCIENCE</b></h3><a href="ebook1.htm">
<p>Innovate and rethink!</p></a></div></div></td>
<td><div class="card"><img src="https://images-na.ssl-images-amazon.com/images/I/51dqGFRhc-L.jpg" alt="biography" width="300" height="75%">
<div class="container"><a href="ebook1.htm">
<h3><b>BIOGRAPHY</b></h3>
<p>I did it and so did you!</p></a></div></div></td>
<td><div class="card"><img src="https://images-na.ssl-images-amazon.com/images/I/51N5qVjuKAL._SX309_BO1,204,203,300_.jpg" alt="novel" width="300" height="75%">
<div class="container"><a href="ebook1.htm">
<h3><b>NOVEL</b></h3>
<p>Because reading is fun !</p></a></div></div></td></tr>
<tr><td><div class="card"><img src="https://images.gr-assets.com/books/1303252999l/968.jpg" alt="fictional" width="300" height="75%">
<div class="container"><a href="ebook1.htm">
<h3><b>FICTIONAL</b></h3>
<p>Apparently everything is true!</p></a></div></div></td>
<td><div class="card"><img src="https://d1w7fb2mkkr3kw.cloudfront.net/assets/images/book/lrg/9780/0662/9780066238500.jpg" alt="fictional" width="300" height="75%">
<div class="container"><a href="ebook1.htm">
<h3><b>FANTASY</b></h3>
<p>Enliven yourself!</p></a></div></div></td>
<td><div class="card"><img src="https://qph.fs.quoracdn.net/main-qimg-e90ef6f56071a305f0fb3aaba4e6d421-c" alt="fictional" width="300" height="75%">
<div class="container"><a href="ebook1.htm">
<h3><b>AUTOBIOGRAPHY</b></h3>
<p>Reliving them back!</p></a></div></div></td>
<td><div class="card"><img src="https://www.bookcover4u.com/pro/Romance-book-cover-design-P1470170959ROB-Jack%60s-wife-soldier-love-story-noveljacks-wife.jpg" alt="fictional" width="300" height="75%">
<div class="container"><a href="ebook1.htm">
<h3><b>ROMANTIC</b></h3>
<p>Love is the purest from of care!</p></a></div></div></td></tr>
<tr><td><div class="card"><img src="http://t3.gstatic.com/images?q=tbn:ANd9GcTlL2j-u9mqZ3CzfEDHLvnDS2TJ6K9qafjcreVyXd0OtCl9YE8a" alt="fictional" width="300" height="75%">
<div class="container"><a href="ebook1.htm">
<h3><b>SCI-FI</b></h3>
<p>Earning a new living!</p></a></div></div></td>
<td><div class="card"><img src="https://i1.wp.com/discoverscifi.com/wp-content/uploads/2016/01/32-book-in-signed-offer2.png?fit=1520%2C1046&ssl=1" alt="fictional" width="300" height="300">
<div class="container"><a href="ebook1.htm">
<h3><b>FICTIONAL</b></h3>
<p>Reliving them back!</p></a></div></div></td>
<td><div class="card"><img src="https://images.gr-assets.com/books/1447303603l/2767052.jpg" alt="fictional" width="300" height="300">
<div class="container"><a href="ebook1.htm">
<h3><b>NOVELS</b></h3>
<p>I love reading!</p></a></div></div></td>
<td><div class="card"><img src="http://t0.gstatic.com/images?q=tbn:ANd9GcStc3SZJrUeEvCfvakDVCJS5ixxvjimnMAxG681GGZn74crEexa" alt="thriller" width="300" height="300">
<div class="container"><a href="ebook1.htm">
<h3><b>THRILLER</b></h3>
<p>I am not afraid!</p></a></div></div></td></tr>
</table>
</body>
</html>