<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF
-8
" />
<meta name="viewport"
content="width=device-width,
initial-scale=
1.0
" />
crossorigin="anonymous"></script>
<link href=
rel="stylesheet" />
<style>
* {
margin
:
0px
;
padding
:
0px
;
}
body {
background
:
url
(
no-repeat
center
center
fixed
;
background-
size
: cover;
}
h
1
{
border-bottom
:
3px
solid
blue
;
margin-bottom
:
10px
;
color
:
black
;
font-weight
:
bold
;
background
:
none
;
margin-right
:
105px
;
margin-top
:
50px
;
font-family
: "Baloo Bhai
2
",
cursive
;
}
.container {
width
:
100%
;
height
:
100
vh;
display
: flex;
justify-
content
:
center
;
flex-
direction
: column;
align-items:
center
;
}
.row
1
{
position
:
absolute
;
left
:
33%
;
}
.row {
position
:
relative
;
}
.row input {
position
:
relative
;
left
:
25px
;
margin
:
10px
;
padding
:
10px
;
width
:
80%
;
outline
:
none
;
background
:
none
;
border
:
0px
;
font-weight
:
bold
;
border-bottom
:
3px
solid
blue
;
font-family
: "Baloo Bhai
2
",
cursive
;
}
.row i {
position
:
absolute
;
margin-top
:
10px
;
padding
:
10px
;
}
.btn {
width
:
4
rem;
border-radius:
15px
;
background
:
none
;
margin-right
:
105px
;
background-color
:
black
;
color
: blanchedalmond;
outline
:
none
;
font-family
: "Baloo Bhai
2
",
cursive
;
cursor
:
pointer
;
}
.btn:hover {
background-color
:
blue
;
color
:
white
;
}
</style>
<title>Transparent Login Page using HTML/CSS</title>
</head>
<body>
<div class="container">
<div class="row
1
">
<h
1
>LogIn</h
1
>
<div class="row">
<i class="fas fa-envelope-
square
"></i>
<input type="email" name="Email"
placeholder="Enter your email" />
</div>
<div class="row">
<i class="fas fa-key"></i>
<input type="password" name="pass"
placeholder="Enter your password" />
</div>
<button class="btn">Submit</button>
</div>
</div>
</body>
</html>