<!DOCTYPE html>
<
html
>
<
head
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
<
style
>
body {
height: 100%;
font-family: Arial, sans-serif;
margin: 0;
}
.bg-img {
background-image: url("img.png");
min-height: 100vh;
background-size: cover;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.container {
position: relative;
max-width: 300px;
padding: 16px;
background: rgba(255, 255, 255, 0.8);
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: green;
-webkit-text-stroke: 1px black;
margin-bottom: 20px;
}
b {
color: green;
font-size: 18px;
-webkit-text-stroke: 1px black;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px;
margin: 8px 0;
border: 1px solid green;
box-sizing: border-box;
}
.button {
background-color: green;
color: white;
padding: 14px;
border: none;
cursor: pointer;
width: 100%;
}
.button:hover {
background-color: darkgreen;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"bg-img"
>
<
h1
>GeeksforGeeks</
h1
>
<
form
class
=
"container"
>
<
b
>Username</
b
>
<
input
type
=
"text"
placeholder
=
"Enter your username"
name
=
"username"
required>
<
b
>Password</
b
>
<
input
type
=
"password"
placeholder
=
"Enter your password"
name
=
"password"
required>
<
button
type
=
"submit"
class
=
"button"
>Login</
button
>
</
form
>
</
div
>
</
body
>
</
html
>