How to make a login page Like this
Do you want to make a awesome login page design like this
Rajneesh Tutorials follow us on that blog
Here we will provide source code of amazing code design
This is a example
What special in it
You can change the color of the design by enter color in user name field.
Try it by yourself
Code
Html
<!doctype html>
<html>
<head>
<script src="https://kit.fontawesome.com/3fc3b5817a.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<div class="container" id="cont">
<div class="box">
<h2>Login </h2>
<button id="but">Login In </button>
<div class="text"></div>
<div class="login" id="logi">
<div class="img">
</div>
<div class="avatar-img">
</div>
<div class="main">
<div class="section">
<form>
<label for="email"><i class="fas fa-user"></i></label>
<input type="email" onkeyup="m()" placeholder="User Name" id="email">
<br>
<label for="pass"><i class="fas fa-lock"></i></label>
<input type="password" placeholder="Password" id="pass">
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Your code will look like that
Now add css file
Css :
*{
margin:0 ;
padding:0;
//border:1px solid #000 ;
}
body,.container{
display:flex ;
align-items: center;
justify-content: center;
}
body{
width: 100% ;
height: 100vh;
}
.container{
background: linear-gradient(to top,rgb(0,100,255),rgb(0,200,200));
border-radius: 0 0 60% 0;
width: 100%;
height: 100%;
}
.box{
width: 90%;
height: 90%;
background: white;
overflow: hidden ;
box-shadow: 0 0 10px #000,0 0 20px #000,0 0 30px #000;
border-radius: 10px;
}
.box h2{
margin: 10%;
color: rgb(0,100,200);
}
.container .box .img{
background: rgb(0,200,200);
background-image: url('/storage/emulated/0/download/3.png');
background-size: cover;
width: 60%;
height: 40%;
position: absolute ;
top: 20%;
border-radius: 100%;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.login{
width: 100%;
height: 100%;
border-radius: 100% 0 0 0;
background: linear-gradient(45deg,rgb(0,100,255),#000);
}
.main{
width: 80%;
float: right;
z-index: 99;
height: 25%;
position: absolute;
top: 70%; right: 10%;
}
label{
color: rgb(0,200,255);
font-size: 200%;
margin-left: 10%;
}
input{
border: none;
padding: 1%;
color: rgb(0,100,255);
width: 50%;
border-radius: 5px;
margin: 2%;
box-shadow: 2px 2px 10px rgb(0,200,250);
font-size: 90%;
text-align: center;
transition: 1s;
}
input:hover{
width: 70%;
font-size: 20px;
}
.avatar-img{
width: 30%;
height: 20%;
background: white;
border-radius: 100%;
position: absolute;
top: 45%;left: 35%;
z-index: 99999999999;
background-image: url('/storage/emulated/0/download/4.jpg');
background-size: cover;
}
button{
border: none;
padding: .5%;
width: 40%;
height: 10%;
background: linear-gradient(30deg,rgb(50,100,255),rgb(0,255,255));
position: absolute;
top: 10%; right: 10%;
color: #fff;
font-size: 105%;
transition: 1s;
}
button:hover{
background: linear-gradient(-30deg,rgb(50,100,255),rgb(0,255,255));
box-shadow: 0 0 10px #000;
}
Change the url of images !
Your output will look like that
Now last add js
JavaScript
function m(){
let a = document.getElementById('email').value
let b = document.getElementById('cont')
let c = document.getElementById('logi')
let d = document.getElementById('but')
b.style.background = a
c.style.background = a
d.style.background = a
}
Now you can change the color of the design
Next post is on Calculator
Follow us on Rajneesh Tutorials
Join me on Facebook Rajneesh Thakur
Comments
Post a Comment