User:AsproX.12

LOGIN FORM #html #css

<!DOCTYPE html>









*{

margin: 0;

padding: 0;

text-decoration: none;

font-family: sans-serif;

box-sizing: border-box;

}

body{

min-height: 100vh;

background: url(food2.jpeg);

background-repeat: no-repeat;

background-size: cover;

}

.login-form{

width: 400px;

background: #FFFFFF;

height: 580px;

padding: 80px 40px;

border-radius: 10px;

position:absolute;

top: 50%;

left: 75%;

transform: translate(-50%,-50%);

}

.login-form h1{

text-align: center;

margin-bottom: 60px;

}

.log-txt-box{

border-bottom: 2px solid #adadad;

position: relative;

margin: 30px 0px;

}

.log-txt-box input{

font-size: 15px;

color: #333;

border: none;

width: 100%;

outline: none;

background: none;

padding: 0 5px;

height: 40px;

}

.log-txt-box span::before{

content: attr(data-placeholder);

position: absolute;

top: 50%;

left: 5px;

color: #adadad;

transform: translateY(-50%);

z-index: -1;

transition: .5s;

}

.log-txt-box span::after{

content: '' ;

position: absolute;

width: 0%;

height: 2px;

background: linear-gradient(120deg,#000000,#c0392b);

transition: .5s;

}

.focus + span::before{

top: -5px;

}

.focus + span::after{

width: 100%;

}

.log-btn{

display: block;

width: 100%;

height: 50px;

border: none;

background: linear-gradient(120deg,#000000,#c0392b);

background-size: 200%;

color: #FFF;

outline: none;

cursor: pointer;

transition: .5s;

}

.log-btn:hover{

background-position: right;

}

.log-sign-btn{

margin-top: 50px;

text-align: center;

font-size: 14px;

}



Login







Don't have account ?Sign up



$(".log-txt-box input").on("focus",function{

$(this).addClass("focus");

});

$(".log-txt-box input").on("blur",function{

if($(this).val == "")

$(this).removeClass("focus");

});

* {

margin: 0;

padding: 0;

text-decoration: none;

font-family: sans-serif;

box-sizing: border-box;

}

body{

min-height: 100vh;

background: url(food2.jpg);

background-repeat: no-repeat;

background-size: cover;

}

.login-form{

width: 400px;

background: #FFFFFF;

height: 580px;

padding: 80px 40px;

border-radius: 10px;

position:absolute;

top: 50%;

left: 75%;

transform: translate(-50%,-50%);

}

.login-form h1{

text-align: center;

margin-bottom: 60px;

}

.log-txt-box{

border-bottom: 2px solid #adadad;

position: relative;

margin: 30px 0px;

}

.log-txt-box input{

font-size: 15px;

color: #333;

border: none;

width: 100%;

outline: none;

background: none;

padding: 0 5px;

height: 40px;

}

.log-txt-box span::before{

content: attr(data-placeholder);

position: absolute;

top: 50%;

left: 5px;

color: #adadad;

transform: translateY(-50%);

z-index: -1;

transition: .5s;

}

.log-txt-box span::after{

content: '' ;

position: absolute;

width: 0%;

height: 2px;

background: linear-gradient(120deg,#000000,#c0392b);

transition: .5s;

}

.focus + span::before{

top: -5px;

}

.focus + span::after{

width: 100%;

}

.log-btn{

display: block;

width: 100%;

height: 50px;

border: none;

background: linear-gradient(120deg,#000000,#c0392b);

background-size: 200%;

color: #FFF;

outline: none;

cursor: pointer;

transition: .5s;

}

.log-btn:hover{

background-position: right;

}

.log-sign-btn{

margin-top: 50px;

text-align: center;

font-size: 14px;

}