LibraryManagementSystem/index.html at main · Shail-ja/LibraryManagementSystem · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Library Management System</title>
    <link rel="stylesheet" href="lms.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
</head>
<body>
<div id="Main">
    <header class="header">
        <div class="header-1">
            <div class="logo"><i class="fa-solid fa-book"></i>S Library</div>
            <nav class="tabs">
                <a href="#Home" ><h3> Home </h3></a>
                <a href="#About" ><h3> About </h3></a>
                <a href="#Books"><h3> Books </h3></a>
                <a href="#Contacts"><h3> Contact Us </h3> </a>
            </nav>
            <form class="search-form">
                <input type="search" name="" placeholder="search here..." id="search-box">
                <label for="search-box" class="fas fa-search"></label>
            </form>
            <nav class="tab">
                <button id="search-btn"><i class="fas fa-search"></i></button>
                <button id="signup-btn" ><h3>Sign Up</h3></button>
                <button id="login-btn" ><h3>Log In</h3></button>
            </nav>
        </div>
    </header>

    <!-- Home section starts -->

    <div id="Home">
        <div class="swiper book-slider">
            <div class="swiper-wrapper">
                <a href="#" class="swiper-slide"><img src="book-1.jpg" alt=""></a>
                <a href="#" class="swiper-slide"><img src="book-2.jpg" alt=""></a>
                <a href="#" class="swiper-slide"><img src="book-3.jpg" alt=""></a>
                <a href="#" class="swiper-slide"><img src="book-4.jpg" alt=""></a>
                <a href="#" class="swiper-slide"><img src="book-5.jpg" alt=""></a>
                <a href="#" class="swiper-slide"><img src="book-6.jpg" alt=""></a>
            </div>
            <img src="stand.png" alt="" class="stand">
        </div>

        <img src="https://img.freepik.com/free-vector/audio-books-isometric-composition-with-character-female-librarian-with-book-shelves-inside-smartphone-screen-frame-vector-illustration_1284-80591.jpg?size=626&ext=jpg&ga=GA1.1.324395487.1697661821&semt=ais">

        <div id="bottom">
            <h2>Contact Us:</h2>
            <h3>Address: India </h3>
            <h3>Email: Slibrary@gmail.com</h3>
        </div>
    </div>

    <div class="signup-form">
        <div id="close-signup-btn" class="fas fa-times"></div>
        <form action="" >
            <h3>Sign Up</h3>
            <span>Name</span>
            <input type="name" class="box" id="name" placeholder="enter your name">
            <span>Email</span>
            <input type="email" class="box" id="email" placeholder="enter your email">
            <span>Phone Number</span>
            <input type="phone" class="box" id="phone" placeholder="enter your phone number">
            <span>password</span>
            <input type="password" class="box" id="password" placeholder="enter your password">
            <div class="checkbox">
                <input type="checkbox" id="remember-me">
                <label for="remember-me">remember me</label>
            </div>
            <button type="submit" class="btn" formaction="lms2.html">Sign Up</button>
        </form>
    </div>

    <div class="Login-form">
        <div id="close-login-btn" class="fas fa-times"></div>
        <form action="" >
            <h3>Log In</h3>
            <span>username</span>
            <input type="email" class="box" id="user" placeholder="enter your email">
            <span>password</span>
            <input type="password" class="box" id="password" placeholder="enter your password">
            <div class="checkbox">
                <input type="checkbox" id="remember-me">
                <label for="remember-me">remember me</label>
            </div>
            <button type="submit" class="btn" formaction="lms2.html">Log In</button>
            <p>forget password ?  <a href="#">Click here</a></p>
            <p>Don't have an account ?  <a href="#">Create one</a></form></p>
        </form>
    </div>

    <div id="About">
        <h1>About Us</h1>
        <img src="https://img.freepik.com/free-photo/crop-hands-using-tablet-library_23-2147845934.jpg?size=626&ext=jpg&ga=GA1.1.324395487.1697661821&semt=ais">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda ipsum nulla repudiandae animi ex id provident? Reiciendis laborum esse id voluptates vel dolore delectus nemo, ipsum excepturi possimus soluta minus.</p>
    </div>

    <div id="Contacts">
        <div class="newsletter">
            <h2>Subscribe to Our Newsletter</h2>
            <h2>Newest Book Updates</h2>
            <input type="email" class="box" id="mails" placeholder="Type your email here...">
            <input type="submit" value="subscribe" class="sub-btn">
        </div>
        <div class="links">
            <div class="logo"><i class="fa-solid fa-book"></i>S Library
            <br>
            <p>S Library's website that consists of all genres of bookss from around the world </p>
            </div>

            <table>
                <tr>
                    <th>Quick Links</th>
                    <th>Customer Access</th>
                    <th>Social Media</th>
                </tr>
                <tr>
                    <td>Home</td>
                    <td>My Account</td>
                    <td><i class="fa-brands fa-facebook"></i></td>
                </tr>
                <tr>
                    <td>About Us</td>
                    <td>Issued Books</td>
                    <td><i class="fa-brands fa-x-twitter"></i></td>
                </tr>
                <tr>
                    <td>Books</td>
                    <td>Privacy Policy</td>
                    <td><i class="fa-brands fa-instagram"></i></td>
                </tr>
                <tr>
                    <td>Help</td>
                    <td>FAQ</td>
                    <td><i class="fa-regular fa-envelope"></i></td>
                </tr>
                <tr>
                    <td></td>
                    <td>Terms</td>
                </tr>
            </table>
        </div>
    </div>
</div>

<script src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

</body>
</html>