BookManagement.github.io/index.html at main · NegasaReta/BookManagement.github.io · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Book Mangment System</title>
    <link rel="stylesheet" href="css/shared.css">
    <style>
        body{
            background-image: linear-gradient(180deg, rgba(0, 0, 0,0.8), rgba(0,0,0,0.5)),url("img/book\ store.jpg");

            background-size: cover;
            color: white;
            min-height: 93vh;

        }

        .main-header{
            display: flex;
            justify-content: center;
            margin-bottom: 6rem;
            margin-top: 3rem;
        }
        .main-header h1{
            font-size: 2.2rem;

        }
        .login{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .login svg{
            max-width: 120px;
            max-height: 120px;
        }
        .login h1{
            font-size: 2.3rem;
            margin-bottom: 2rem;
            margin-top: 5px;
        }
        .login-form{

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .login-form div{
            margin: 1rem 0;
        }
        .username label,
        .Password label{
            font-weight: bold ;
            font-size:1.5rem;
            margin-right: 1.5rem;
        }
        #Password{
            margin-left: 9px;
        }
        #user_name,
        #Password{
            background-color: burlywood;
            border: none;
            border-radius: 0.2rem;
            outline: none;
            padding: 0.6rem 1.8rem;
            font-size: 1.1rem;
        }
        .login-btn{
            background-color: rgb(35, 35, 35);
            color: white;
            border: none;
            border-radius: 0.2rem;
            margin-top: 10px;
            padding: 0.5rem 1rem;
            cursor: pointer;
            font-size: 1.5rem;
        }
        .login-btn:hover{
            background-color: burlywood;
            color: rgb(35, 35, 35);
        }
    </style>

</head>
<body>
<div class="body">
    <header class="main-header">
        <h1>Welcome to ASTU Library Book Managment Portal</h1>
    </header>
    <section class="login">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">

            <defs>
            </defs>
            <g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)">
                <path d="M 45 0 C 20.147 0 0 20.147 0 45 c 0 24.853 20.147 45 45 45 s 45 -20.147 45 -45 C 90 20.147 69.853 0 45 0 z M 45 22.007 c 8.899 0 16.14 7.241 16.14 16.14 c 0 8.9 -7.241 16.14 -16.14 16.14 c -8.9 0 -16.14 -7.24 -16.14 -16.14 C 28.86 29.248 36.1 22.007 45 22.007 z M 45 83.843 c -11.135 0 -21.123 -4.885 -27.957 -12.623 c 3.177 -5.75 8.144 -10.476 14.05 -13.341 c 2.009 -0.974 4.354 -0.958 6.435 0.041 c 2.343 1.126 4.857 1.696 7.473 1.696 c 2.615 0 5.13 -0.571 7.473 -1.696 c 2.083 -1 4.428 -1.015 6.435 -0.041 c 5.906 2.864 10.872 7.591 14.049 13.341 C 66.123 78.957 56.135 83.843 45 83.843 z" style="stroke: none;stroke-width: 1;stroke-dasharray: none;stroke-linecap: butt;stroke-linejoin: miter;stroke-miterlimit: 10;fill: rgb(236 197 87);fill-rule: nonzero;opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round"></path>
            </g>
            </svg>

        <h1>Login</h1>
    </section>
    <form method="get" action="login_a" class="login-form">
        <div class="username">
            <label for="user_name">User Name</label>
            <input type="text" id="user_name" name="user">
        </div>
        <div class="Password">
            <label for="Password">Password   </label>
            <input type="Password" id="Password" name="password">
        </div>
        <button type="submit" class="login-btn">Login</button>
    </form>
</div>
</body>

</html>