-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
180 lines (171 loc) · 11.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Life Changer Library</title>
<link rel="shortcut icon" href="/assets/favicon/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style/style.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=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
</head>
<body>
<nav class="navbar">
<div class="logo">
<a href="#home"><img src="./assets/logo/logo_LCL.png" alt="life changer library logo"></a>
</div>
<div class="menu">
<a href="#home" onclick="toggleMenuClose()">Home</a>
<a href="#feature" onclick="toggleMenuClose()">Features</a>
<a href="#join-active" onclick="toggleMenuClose()">Active Hours</a>
<a href="#contact" onclick="toggleMenuClose()">Get Admission</a>
<a href="#footer-sectionx" onclick="toggleMenuClose()">About</a>
<a href="#contact" onclick="toggleMenuClose()">Contact</a>
</div>
<div class="menu-btn" onclick="toggleMenu(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</nav>
<div id="home">
<div class="right-side">
<h1>Welcome to <span>Life Changer Library</span></h1>
<div>
<h3>Discover a World of Knowledge</h3>
<p>Welcome to the official website of <span>Life Changer Library</span>. Explore our extensive collection of books, digital resources, and services tailored to meet the needs of our community.</p>
<p>At Life Changer Library, we believe in the transformative power of books and knowledge. Located in the heart of Chanpatiya, Bihar, our library offers a serene environment for readers of all ages to explore, learn, and grow. Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores provident totam esse fugiat culpa amet sint! Repudiandae odit, quaerat porro dolor asperiores iste amet laudantium, deleniti doloribus id consectetur laboriosam.</p>
<a href="#feature"><i class="fa-solid fa-arrow-down arrow"></i></a>
</div>
</div>
<div class="left-side">
<div class="collections">
<div class="div-1">
<img class="img-1" src="./assets/asset-1.jpg" alt="">
<img class="img-2" src="./assets/asset-2.0.jpg" alt="">
</div>
<div class="div-2">
<img class="img-3" src="./assets/asset-2.jpg" alt="">
<img class="img-4" src="./assets/asset-3.jpg" alt="">
</div>
</div>
</div>
</div>
<!--------------------------- ------------------------->
<section id="feature">
<h1><span>Our Library's Key Features</span></h1>
<div class="feature-div">
<div class="right">
<h3>Welcome to our state-of-the-art library! Our facility is designed to provide an optimal study environment with numerous features that cater to the needs of our students and visitors. Below are some of the key features of our library:</h3>
<ul>
<li><strong>CCTV Surveillance: </strong>Ensuring safety and security with continuous monitoring.</li>
<li><strong>Silent Environment: </strong>A quiet atmosphere perfect for concentration and study.</li>
<li><strong>Spacious Layout:</strong>Adequate space at each table arranged in a grid to ensure privacy and minimize interference.</li>
<li><strong>Drinking Water Facility:</strong>Easily accessible water stations to keep you hydrated.</li>
<li><strong>Optimal Lighting: </strong>Suitable lighting to prevent eye strain and enhance reading comfort.</li>
<li><strong>Temperature Control: </strong>Temperature Control: Equipped with fans and air conditioning for a comfortable environment.</li>
<li><strong>Comfortable Seating: </strong>Comfortable Seating: Ergonomically designed study chairs for long hours of study.</li>
</ul>
</div>
<div class="video-box">
<video src="./assets/VID-20240723-WA0003.mp4" muted loop autoplay preload="auto">Loading...</video>
<h1><span>SHORT INTRO WITH VIDEO</span></h1>
</div>
</div>
</section>
<!-- ------------------------- Join us/active hour ------------------------- -->
<section id="join-active">
<div class="join-us">
<h1>Join Us <span style="color: crimson;">Today</span></h1>
<p>Become a member of Life Changer Library today and embark on a journey of endless possibilities. Whether you are looking for your next great read, a place to study, or a community of like-minded individuals, our library is here to support and inspire you.</p>
<p>At our library, we believe in fostering a community of learning and growth. By joining us, you gain access to a wealth of resources, a supportive environment, and opportunities to expand your knowledge and skills. Our extensive collection of books, e-books, and audiobooks caters to a wide range of interests and needs. Enjoy our modern and comfortable study spaces, equipped with the latest technology and optimal lighting, providing a conducive environment for focused study and collaboration. Our knowledgeable staff is always ready to assist you with research and finding materials, ensuring a productive visit. Take advantage of our free Wi-Fi, printing services, and quiet study areas to enhance your experience. With CCTV surveillance and a controlled entry system, you can study with peace of mind knowing your safety is our top priority. Join us today and be a part of our vibrant learning community, where you can discover new knowledge, meet new people, and make the most of our exceptional resources and services. We look forward to welcoming you!</p>
<button type="button"><a href="#"><i class="fa-brands fa-whatsapp"></i></a><span>Whatsapp me</span></button>
</div>
<div class="active-hour">
<h1>
<span>Library Active Hours</span>
</h1>
<p>
Our library is dedicated to providing you with ample time to access our resources and services. Below are our active hours, so you can plan your visits accordingly:
</p>
<div>
<h3>Monday to Saturday:</h3>
<li>8:00 AM - 10:00 PM</li>
</div>
<div>
<h3>Sunday:</h3>
<li>10:00 AM - 5:00 PM</li>
</div>
<p>We look forward to welcoming you during our active hours and supporting your learning journey. Join us and take advantage of our extensive collection, modern facilities, and supportive environment.</p>
</div>
</section>
<section id="contact">
<h1>Contact Us</h1>
<div class="contact-container">
<div class="contact-left">
<div>
<h3>We are here to assist you with any inquiries or support you may need. Feel free to reach out to us through any of the following methods:</h3>
</div>
<div class="hidden-in-phone">
<p>We value your feedback and are always looking to improve our services. Whether you have a question, a suggestion, or need assistance, we are here to help. Thank you for being a part of our library community!</p>
</div>
<h2>Find Us Here</h2>
<div class="map-container">
<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d56912.45733797172!2d84.5453122!3d26.9343083!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x399367003d612f3b%3A0x690d5a7c3ea74e11!2sLife%20Changer%20Library!5e0!3m2!1sen!2sin!4v1721980500148!5m2!1sen!2sin"
width="600" height="320" style="border:0;" allowfullscreen="" loading="lazy">
</iframe>
</div>
</div>
<div class="contact-right">
<h2><span>Feedback and Inquiries:</span></h2>
<p>Please fill out the form below, and our team will get back to you as soon as possible.</p>
<form class="contact-form" action="mailto:maneeshkurmii@gmail.com" method="post" enctype="text/plain">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter Full Name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="example@gmail.com" required>
<label for="subject">Subject:</label>
<input type="text" id="subject" name="subject" placeholder="Enter Subject" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="6" placeholder="Please enter you message here..." required></textarea>
<div>
<p>We value your feedback and are always looking to improve our services. Whether you have a question, a suggestion, or need assistance, we are here to help. Thank you for being a part of our library community!</p>
</div>
<button type="submit">Send Message</button>
</form>
</div>
</div>
</section>
<footer id="footer-sectionx" class="footer">
<div class="footer-container">
<div class="footer-section">
<h2>About Us</h2>
<p>Our library is dedicated to providing you with ample time to access our resources and services.</p>
</div>
<div class="footer-section">
<h2>Contact Information</h2>
<p><strong>Address:</strong> 123 Library Lane, Vadodara City, Education State, 45678</p>
<p><strong>Phone:</strong> +91 1875 7XXX</p>
<p><strong>Email:</strong> <a href="mailto:maneeshkurmii@gmail.com">maneeshkurmii@gmail.com</a></p>
</div>
<div class="footer-section">
<h2>Follow Us</h2>
<ul class="social-links">
<a href="https://www.instagram.com/its_maneeshk_/"><i class="fa-brands fa-facebook"></i></a>
<a href="https://www.instagram.com/its_maneeshk_/"><i class="fa-brands fa-instagram"></i></a>
<a href="https://www.instagram.com/its_maneeshk_/"><i class="fa-brands fa-youtube"></i></a>
<a href="https://www.instagram.com/its_maneeshk_/"><i class="fa-brands fa-twitter"></i></a>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 Life Changer Library. All Rights Reserved.</p>
<p>Made with ❤️ by <a href="https://www.instagram.com/its_maneeshk_/">Manish Patel</a></p>
</div>
</footer>
<script src="./script.js"></script>
<script src="https://kit.fontawesome.com/415161d9d1.js" crossorigin="anonymous"></script>
</body>
</html>