Create login form using CSS GRID and background color using JAVASCRIPT
HTML & JS CODE =>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="form.css">
<title>Document</title>
</head>
<body>
<div class="parent">
<form action="" method="post">
<div id="image">
<img src="avtar.png" alt="">
</div>
<input type="text" placeholder="UserName" class="input input1">
<input type="password" placeholder="Password" name="" class="input input2">
<div class="group">
<div class="check">
<input type="checkbox" name="remmber" id="remmber">
Remmber me
</div>
<div class="forget">
<a href="#">Forget Password</a>
</div>
</div>
<input type="submit" value="LOGIN" id="btn">
</form>
<div class="colors">
<span class="defult" onclick="recolor('#1dd1a1')" style="--clr:#1dd1a1;"></span>
<span onclick="recolor('#1d6dd1')" style="--clr:#1d6dd1;"></span>
<span onclick="recolor('#aad11d')" style="--clr:#aad11d;"></span>
<span onclick="recolor('#d1471d')" style="--clr:#d1471d;"></span>
</div>
</div>
<script>
function recolor(color){
let btn = document.getElementById('btn');
let image = document.getElementById('image');
document.body.style.background = color;
btn.style.background = color;
image.style.background = color;
document.querySelectorAll('span').forEach(function (item){
item.classList.remove('defult');
})
event.target.classList.add('defult');
}
</script>
</body>
</html>
CSS CODE =>
*{
padding: 0;
margin: 0;
transition: 2s;
}
.parent{
width: 100%;
height: 41em;
}
.parent>form{
width: 20%;
height: 400px;
background-color: rgb(255,255,255);
box-shadow: 0 50px 75px rgb(0 0 0 / 88%);
padding: 10px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 2.5fr 1fr 1fr 1.2fr 1fr 0.5fr;
grid-template-areas:
'image image'
'input1 input1'
'input2 input2'
'group group'
'btn btn'
;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border-radius: 25px;
align-items: center;
justify-items: center;
}
input{
border: 2px solid #555;
font-size: 0.8em;
padding: 2px 10px;
}
#image{
grid-area: image;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: aqua;
transition: 0.5s;
}
img{
width: 100px;
height: 100px;
}
.input1{
grid-area: input1;
}
.input2{
grid-area: input2;
}
.input, .input2, .check, .forget{
background: none;
color: #333;
width: 85%;
height: 35px;
}
.group{
grid-area: group;
height: 20px;
width: 92%;
background: none;
display: flex;
justify-content: space-between;
}
#remmber, a{
color: #333;
background: none;
}
#btn{
grid-area: btn;
width: 92%;
background: aqua;
height: 35px;
border: none;
color: white;
transition: 0.5s;
font-size: 1.1em;
cursor: pointer;
border-radius: 5px;
}
.colors{
position: absolute;
top: 50%;
left: 100%;
transform: translate(-100%,-100%);
padding: 15px;
background: none;
display: flex;
justify-items: center;
flex-direction: column;
}
.colors>span{
width: 25px;
height: 25px;
position: relative;
background-color: var(--clr);
margin: 5px;
border-radius: 50%;
cursor: pointer;
}
.colors>.defult{
border: 2px solid black;
scale: 1.2;
}
Comments
Post a Comment