forked from Technigo/project-library
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
118 lines (116 loc) · 4.56 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>On.Book Library</title>
<link rel="stylesheet" href="style.css" />
<!-- Preconnect to Google Fonts to optimize font loading -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!-- Google Font: PT Serif (for typography) -->
<link
href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<header>
<div class="navbar">
<div class="logo">
<h1>On.Book</h1>
</div>
<!-- Navigation Links -->
<nav>
<ul>
<li><a href="#">Books</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">Wishlist</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About Us</a></li>
</ul>
</nav>
<!-- Search and Sign-in Section -->
<div class="search-signin">
<div class="search-box">
<input type="text" placeholder="Search book..." />
</div>
<!-- Divider between search and sign-in -->
<span class="divider">|</span>
<a href="javascript:void(0)" class="search-button">Search</a>
</div>
</div>
</header>
<!-- Hero Section: Introduction and Featured Books Slider -->
<section class="hero">
<div class="hero-content">
<div class="text-content">
<h2>Find Your Next Book</h2>
<p>
Our most popular and trending <b>On.Book</b> perfect.<br />Not sure
what to read now? Read the perfect book to match your mood.
</p>
<button>Explore Now</button>
</div>
<div class="book-slider">
<!-- First Book -->
<div class="book framed">
<img src="books-images/book1.jpg" alt="The Stranger" />
<p>The Stranger<br /><small>Albert Camus</small></p>
</div>
<!-- Middle Book (reverse-rounded with title/author above the image) -->
<div class="book framed reverse">
<p>Der Process<br /><small>Franz Kafka</small></p>
<img src="books-images/book2.jpg" alt="Der Process" />
</div>
<!-- Third Book -->
<div class="book framed">
<img src="books-images/book3.jpg" alt="The Divine Comedy" />
<p>The Divine Comedy<br /><small>Dante</small></p>
</div>
</div>
</div>
</section>
<!-- Bestsellers Section: Displays the Bestselling Books -->
<section class="bestsellers">
<div class="bestsellers-header">
<h2>Bestsellers</h2>
<!-- Sorting and Filtering Options -->
<div class="sort-filter">
<!-- Sort Dropdown -->
<select id="sort-dropdown">
<option value="" disabled selected>Sort by</option>
<option value="titleAZ">Title (A-Z)</option>
<option value="titleZA">Title (Z-A)</option>
<option value="yearNewest">Year (Newest)</option>
<option value="yearOldest">Year (Oldest)</option>
<option value="ratingHighest">Rating (Highest)</option>
<option value="ratingLowest">Rating (Lowest)</option>
</select>
<!-- Sort Button -->
<button class="sort-btn" id="sort-button">Sort</button>
<!-- Genre Filter Dropdown -->
<div class="genre-filter">
<button class="genre-btn" id="genre-button">Genre</button>
<div id="dropdown-menu" class="dropdown-content">
<select id="filter-dropdown">
<option value="" disabled selected>Filter By:</option>
<option value="fiction">Fiction</option>
<option value="nonfiction">Nonfiction</option>
<option value="art-history">Art History</option>
<option value="psychology">Psychology</option>
<option value="mystery">Mystery</option>
<option value="fantasy">Fantasy</option>
<option value="crime-fiction">Crime Fiction</option>
<option value="dystopian">Dystopian</option>
</select>
</div>
</div>
</div>
</div>
<!-- Container for Displaying the List of Books -->
<div class="book-list" id="book-list"></div>
</section>
<script src="script.js"></script>
</body>
</html>