Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
39 views

HTML and Css Code

The document contains HTML and CSS code for a login form. The form includes fields for email and password input, a checkbox for remembering credentials, and buttons to log in or register. Styling with CSS positions labels above inputs and adds icons within the input boxes. The form is centered on the page within a transparent bordered box over a blurred background image.

Uploaded by

rokicpavle
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
39 views

HTML and Css Code

The document contains HTML and CSS code for a login form. The form includes fields for email and password input, a checkbox for remembering credentials, and buttons to log in or register. Styling with CSS positions labels above inputs and adds icons within the input boxes. The form is centered on the page within a transparent bordered box over a blurred background image.

Uploaded by

rokicpavle
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css">
<title>HASH TECHIE OFFICIAL</title>
</head>
<body>
<section>
<div class="form-box">
<div class="form-value">
<form action="">
<h2>Login</h2>
<div class="inputbox">
<ion-icon name="mail-outline"></ion-icon>
<input type="email" required>
<label for="">Email</label>
</div>
<div class="inputbox">
<ion-icon name="lock-closed-outline"></ion-icon>
<input type="password" required>
<label for="">Password</label>
</div>
<div class="forget">
<label for=""><input type="checkbox">Remember Me <a
href="#">Forget Password</a></label>

</div>
<button>Log in</button>
<div class="register">
<p>Don't have a account <a href="#">Register</a></p>
</div>
</form>
</div>
</div>
</section>
<script type="module"
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?
family=Poppins:wght@500&display=swap');
*{
margin: 0;
padding: 0;
font-family: 'poppins',sans-serif;
}
section{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
width: 100%;

background: url('background6.jpg')no-repeat;
background-position: center;
background-size: cover;
}
.form-box{
position: relative;
width: 400px;
height: 450px;
background: transparent;
border: 2px solid rgba(255,255,255,0.5);
border-radius: 20px;
backdrop-filter: blur(15px);
display: flex;
justify-content: center;
align-items: center;

}
h2{
font-size: 2em;
color: #fff;
text-align: center;
}
.inputbox{
position: relative;
margin: 30px 0;
width: 310px;
border-bottom: 2px solid #fff;
}
.inputbox label{
position: absolute;
top: 50%;
left: 5px;
transform: translateY(-50%);
color: #fff;
font-size: 1em;
pointer-events: none;
transition: .5s;
}
input:focus ~ label,
input:valid ~ label{
top: -5px;
}
.inputbox input {
width: 100%;
height: 50px;
background: transparent;
border: none;
outline: none;
font-size: 1em;
padding:0 35px 0 5px;
color: #fff;
}
.inputbox ion-icon{
position: absolute;
right: 8px;
color: #fff;
font-size: 1.2em;
top: 20px;
}
.forget{
margin: -15px 0 15px ;
font-size: .9em;
color: #fff;
display: flex;
justify-content: space-between;
}

.forget label input{


margin-right: 3px;

}
.forget label a{
color: #fff;
text-decoration: none;
}
.forget label a:hover{
text-decoration: underline;
}
button{
width: 100%;
height: 40px;
border-radius: 40px;
background: #fff;
border: none;
outline: none;
cursor: pointer;
font-size: 1em;
font-weight: 600;
}
.register{
font-size: .9em;
color: #fff;
text-align: center;
margin: 25px 0 10px;
}
.register p a{
text-decoration: none;
color: #fff;
font-weight: 600;
}
.register p a:hover{
text-decoration: underline;
}

You might also like