-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
138 lines (128 loc) · 6.58 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aaira's Library</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Aaira's Library</h1>
</header>
<nav>
<div class="nav">
<a href="#">Home</a>
</div>
<div class="nav">
<div class="boge" >Book Genre
<div class="dropdowncontent">
<a href="#">FANTASY</a>
<a href="#">THRILLER</a>
<a href="#">SCI-FI</a>
<a href="#">PSHYCOLOGICAL HORROR</a>
<a href="#">ROMANCE</a>
<a href="#">MYTHOLOGY</a>
<a href="#">ASTRONOMY</a>
</div>
</div>
</div>
<div class="nav">
<div class="auth">Authors
<div class="dropdown-content">
<a href="#">J.K Rowling</a>
<a href="#">R. K Narayan</a>
<a href="#">Paulo Coelho</a>
<a href="#">Robin Sharma</a>
<a href="#">Carolina Silvey</a>
</div>
</div>
</div>
<div class="nav">
<a href="#">Contact</a>
</div>
</div>
<div class="nav">
<a href="#">Account</a>
<svg id = "user" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path fill="#74C0FC" d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304
0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>
</div>
</nav>
<div class="overlay">
<div class="search-container">
<input type="text" class="search-input" placeholder="What should I read next?...">
<button id="search-button"><svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512">
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
</button>
</div>
</div>
<img id ="read" src="Read A Book Motivational Quote Twitter Post.png"></img>
<img id ="side" src="Colorful Illustrative Student Library Bookmark.png"></img>
<div class="button-container">
<h3>CHOOSE YOUR GENRE</h3>
<button class="button" id="g1" >FANTASY</button>
<button class="button" id="g2">THRILLER</button>
<button class="button" id="g3">SCI-FI</button>
<button class="button" id="g4">PSHYCOLOGICAL HORROR</button>
<button class="button" id="g5">ROMANCE</button>
<button class="button" id="g6">MYTHOLOGY</button>
<button class="button" id="g7">ASTRONOMY</button>
</div>
<div id="side-container" class="backg">
<h3>Aaira's Library</h3>
<a class="sidepane" id="s1" href="#">→ RECOMENDATION</a>
<a class="sidepane" id="s2" href="#">→ BOOKMARKS</a>
<a class="sidepane" id="s3" href="issuebook.html">→ ISSUE BOOKS</a>
<a class="sidepane" id="s4" href="#">→ RENEWAL AND RETURN</a>
<a class="sidepane" id="s5" href="#">→ FINE AND PENALTY</a>
</div>
<div class="vertical"> </div>
<section>
<h2>Welcome to our Library!</h2>
<p>Explore our collection of books and discover new authors.</p>
<p id="p">
“There is more treasure in books than in all the pirate's loot on Treasure Island.” ― Walt Disney
</p>
<p id="p1">
"Discover a world of knowledge on every shelf. Explore the library, where diverse books await to be your guide through
different genres and perspectives."
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde nemo in ratione porro commodi ullam,
atque recusandae impedit delectus quia eum cupiditate, enim ipsum soluta aperiam! Expedita necessitatibus non sequi!<br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam aut dolorem magnam fugiat doloribus architecto quia
consequuntur reiciendis sit fuga adipisci saepe esse numquam aliquam, blanditiis maiores suscipit? Natus, maiores?<br>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde nemo in ratione porro commodi ullam,
atque recusandae impedit delectus quia eum cupiditate, enim ipsum soluta aperiam! Expedita necessitatibus non sequi!<br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam aut dolorem magnam fugiat doloribus architecto quia
consequuntur reiciendis sit fuga adipisci saepe esse numquam aliquam, blanditiis maiores suscipit? Natus, maiores?<br>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde nemo in ratione porro commodi ullam,<br>
atque recusandae impedit delectus quia eum cupiditate, enim ipsum soluta aperiam! Expedita necessitatibus non sequi!<br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam aut dolorem magnam fugiat doloribus architecto quia
consequuntur reiciendis sit fuga adipisci saepe esse numquam aliquam, blanditiis maiores suscipit? Natus, maiores?
</p>
</section>
<img id="librarian" src="librarian.jpg">
<div id="books" class="backg">
<img src="yarn.png">
<video id="backgroundVideo" autoplay loop muted>
<source src="yarn.mp4" type="video/mp4">
<!-- Add additional source elements for different video formats if needed -->
Your browser does not support the video tag.
</video>
</div>
<div>
<a href="https://lovepik.com/images/png-books.html" alt="Books Png vectors by Lovepik.com"></a>
</div>
<footer>
PRIVACY<br>
HELP<br>
ACCOUNT SETTINGS<br>
Aaira's library's website consists of all genres of book all around the world.<br>
Made with 💜and ⌨💻 by Arpita
<p>© 2024 Online Library. All rights reserved.</p>
</footer>
</body>
</html>