Scribd
Upload
18 views

HTML Lang en

The document contains HTML and CSS code for a login page. The HTML defines the page layout and form fields. The CSS styles the page elements and controls appearance and behavior like form validation.

Uploaded by

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

HTML Lang en

The document contains HTML and CSS code for a login page. The HTML defines the page layout and form fields. The CSS styles the page elements and controls appearance and behavior like form validation.

Uploaded by

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

Name: Wency S.

Duque
Course, Yr.,&Section: BSINTE 2B

<!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="LOG">
<div class="txt">
<input type="text" name="text" required>
<span></span>
<label>Username</label>
</div>
<div class="txt">
<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">
Make a new account ? <a href="signup.php">Signup</a>
</div>
</form>
</div>
</div>
</body>
</html>
#css

body{
margin: 0;
padding: 0;
font-family: georgia;
background-repeat: no-repeat;
background-size: cover;
background: linear-gradient( #5520b8, #ad44d6);
height: 100vh;
overflow: hidden;
}

.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 29vw;
background:#ffff;
border-radius: 10px;
}

.center h1{
text-align: center;
padding: 0 0 20px 0;
border-bottom: 1px solid #ffff;
}

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

form .txt {
position: relative;
border-bottom: 2px solid #ffff;
margin: 30px 0;
}

.txt input{
width: 100%;
padding: 0 5px;
height: 40px;
font-size: 16px;
border: none;
background: none;
outline: none;
}

.txt label{
position: absolute;
top: 50%;
left: 5px;
color: #adadad;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
}

.txt span::before{
content: '';
position: absolute;
top: 40px;
left: 0;
width: 0px;
height: 2px;
background: #2691d9;
transition: .5s;
}

.txt input:focus ~ label,


.txt input:valid ~ label{
top: -5px;
color: #2691d9;
}

.txt input:focus ~ span::before,


.txt 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: .6s;
}

.signup {
margin: 30px 0;
text-align: center;
font-size: 16px;
color: #666666;
}

.signup a{
color: #0d8bdf;
text-decoration: none;
}

.signup a:hover{
text-decoration: underline;
}

.Home{
width: 100vw;
height: 25vh;
}

You might also like