Create A Amazing Login Form
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Login Form Google Style</title>
</head>
<body>
<div class="l-form">
<form action="" class="form">
<h1 class="form__title">SIGN IN</h1>
<div class="form__div">
<input type="text" class="form__input" placeholder=" ">
<label for="" class="form__label">EMAIL</label>
</div>
<div class="form__div">
<input type="password" class="form__input" placeholder=" ">
<label for="" class="form__label">PASSWORD</label>
</div>
<input type="submit" class="form__button" value="Sign In">
</form>
</div>
</body>
</html>
CSS Code
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap");
:root{
--first-color: #73264d;
--input-color: #e60000;
--border-color: #ff5500;
--body-font: 'Serifa Th BT';
--normal-font-size: 1.5rem;
--small-font-size: .75rem;
}
*,::before,::after{
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
background: url(https://wallpaper-house.com/data/out/12/wallpaper2you_533935.jpg) no-repeat center center fixed;
}
h1{
margin: 0;
}
.l-form{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.form{
width: 460px;
padding: 4rem 2rem;
border-radius: 1rem;
box-shadow: 0 10px 25px rgba(92,99,105,.2);
}
.form__title{
font-weight: 600;
margin-bottom: 3rem;
}
.form__div{
position: relative;
height: 48px;
margin-bottom: 1.5rem;
}
.form__input{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: var(--normal-font-size);
border: 1px solid var(--border-color);
border-radius: .5rem;
outline: none;
padding: 1rem;
background: none;
z-index: 1;
}
.form__label{
position: absolute;
left: 1rem;
top: 1rem;
padding: 0 .25rem;
background-color: none;
color: var(--input-color);
font-size: var(--normal-font-size);
transition: .3s;
}
.form__button{
display: block;
margin-left: auto;
padding: .75rem 2rem;
outline: none;
border: none;
background-color: var(--first-color);
color: #fff;
font-size: var(--normal-font-size);
border-radius: .5rem;
cursor: pointer;
transition: .3s;
}
.form__button:hover{
box-shadow: 0 10px 36px rgba(0,0,0,.15);
}
.form__input:focus + .form__label{
top: -.5rem;
left: .8rem;
color: var(--first-color);
font-size: var(--small-font-size);
font-weight: 500;
z-index: 10;
}
.form__input:not(:placeholder-shown).form__input:not(:focus)+ .form__label{
top: -.5rem;
left: .8rem;
font-size: var(--small-font-size);
font-weight: 500;
z-index: 10;
}
.form__input:focus{
border: 2.5px solid var(--first-color);
}
Posts
35 Comments
Wonderful
ReplyDeleteWonderful
ReplyDeleteExcellent
ReplyDeleteBrilliant
ReplyDeleteWonderful
ReplyDeleteAwesome
ReplyDeleteAwesome
ReplyDeleteSuperb
ReplyDeleteExcellent
ReplyDeleteVery nice
ReplyDeletefantastic
ReplyDeleteInteresting
ReplyDeleteMind Blowing
ReplyDeleteAttractive
ReplyDeleteExcellent
ReplyDeleteExcellent
ReplyDeleteExcellent
ReplyDeleteExcellent
ReplyDeleteWonderful
ReplyDeleteExcellent
ReplyDeleteExcellent
ReplyDeleteExcellent
ReplyDeleteExcellent
ReplyDeleteFantastic
ReplyDeleteVery Nice
ReplyDeleteInteresting
ReplyDeletePerfect 👌
ReplyDeleteInteresting
ReplyDeleteAwesome
ReplyDeleteFantastic
ReplyDeleteExcellent
ReplyDeleteSuperb quality and excellent
ReplyDeleteBrilliant
ReplyDeleteNice work with html
ReplyDeleteBrilliant
ReplyDelete