Scribd
Upload
17 views6 pages

Document

Uploaded by

katyareyash6
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
17 views6 pages

Document

Uploaded by

katyareyash6
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

<!

DOCTYPE html>
<html lang=”en”>
<head>
<title>Home</title>
<meta charset=”UTF-8” />
<meta name=”viewport” content=”width=device-width” />
<link rel=”stylesheet” href=”styles.css” />
</head>
<body>
<div class=”container”>
<div class=”center”>
<h1>Login</h1>
<form action=”” method=”POST”>
<div class=”txt_field”>
<input type=”text” name=”text” required>
<span></span>
<label>Username</label>
</div>
<div class=”txt_field”>
<input type=”password” name=”password” required>
<span></span>
<label>Password</label>
</div>
<div class=”pass”>Forget Password?</div>
<input name=”submit” type=”Submit” value=”Login”>
<div class=”signup_link”>
Not a Member ? <a href=”signup.php”>Signup</a>
</div>
</form>
</div>
</div>
</body>
</html>
CSS CODE :-
Body{
Margin: 0;
Padding: 0;
Font-family: Roboto;
Background-repeat: no-repeat;
Background-size: cover;
Background: linear-gradient(120deg, #007bff, #d0314c);
Height: 100vh;
Overflow: hidden;
}

.center{
Position: absolute;
Top: 50%;
Left: 50%;
Transform: translate(-50%, -50%);
Width: 29vw;
Background: white;
Border-radius: 10px;
}
.center h1{
Text-align: center;
Padding: 0 0 20px 0;
Border-bottom: 1px solid silver;
}

.center form{
Padding: 0 40px;
Box-sizing: border-box;
}

Form .txt_field{
Position: relative;
Border-bottom: 2px solid #adadad;
Margin: 30px 0;
}

.txt_field input{
Width: 100%;
Padding: 0 5px;
Height: 40px;
Font-size: 16px;
Border: none;
Background: none;
Outline: none;
}
.txt_field label{
Position: absolute;
Top: 50%;
Left: 5px;
Color: #adadad;
Transform: translateY(-50%);
Font-size: 16px;
Pointer-events: none;
}

.txt_field span::before{
Content: ‘’;
Position: absolute;
Top: 40px;
Left: 0;
Width: 0px;
Height: 2px;
Background: #2691d9;
Transition: .5s;
}

.txt_field input:focus ~ label,


.txt_field input:valid ~ label{
Top: -5px;
Color: #2691d9;
}
.txt_field input:focus ~ span::before,
.txt_field input:Valid ~ span::before{
Width: 100%;
}

.pass{
Margin: -5px 0 20px 5px;
Color: #a6a6a6;
Cursor: pointer;
}

.pass:hover{
Text-decoration: underline;
}

Input[type=”Submit”]{
Width: 100%;
Height: 50px;
Border: 1px solid;
Border-radius: 25px;
Font-size: 18px;
Font-weight: 700;
Cursor: pointer;

}
Input[type=”Submit”]:hover{
Background: #2691d9;
Color: #e9f4fb;
Transition: .5s;
}

.signup_link{
Margin: 30px 0;
Text-align: center;
Font-size: 16px;
Color: #666666;
}

.signup_link a{
Color: #2691d9;
Text-decoration: none;
}

.signup_link a:hover{
Text-decoration: underline;
}

.HomeAbout{
Width: 100vw;
Height: 25vh;
}

You might also like