https://kit.fontawesome.com/637a2603e1.js
Login Form
* {
margin:0;
padding:0;
box-sizing:border-box;
font-family:sans-serif;
}
body {
overflow:hidden;
}
section {
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
background:linear-gradient(to bottom, #f1f4f9, #dff1ff);
}
section .color {
position:absolute;
filter:blur(150px);
}
section .color:nth-child(1) {
width:400px;
height:400px;
top:-200px;
background:#ff359b;
}
section .color:nth-child(2) {
width:350px;
height:350px;
bottom:-100px;
left:50px;
background:#fffd87;
}
section .color:nth-child(3) {
width:150px;
height:150px;
bottom:50px;
right:50px;
background:#00d2ff;
}
.box {
position:relative;
}
.box .square {
position:absolute;
backdrop-filter:blur(10px);
box-shadow:0 25px 45px rgba(0,0,0,0.1);
border:1px solid rgba(255,255,255,0.5);
border-bottom:1px solid rgba(255,255,255,0.2);
border-right:1px solid rgba(255,255,255,0.2);
background:rgba(255,255,255,0.2);
border-radius:10px;
animation:animate 10s linear infinite;
animation-delay:calc(-1s * var(–i));
}
@keyframes animate {
0%,100% {
transform:translateY(-40px);
}
50%{
transform:translateY(40px);
}
}
.box .square:nth-child(1){
top:-50px;
right:-40px;
width:100px;
height:100px;
}
.box .square:nth-child(2){
top:150px;
left:-40px;
width:50px;
height:50px;
z-index:2;
}
.box .square:nth-child(3){
bottom:50px;
right:-40px;
width:80px;
height:80px;
z-index:2;
}
.box .square:nth-child(4){
bottom:-80px;
left:100px;
width:120px;
height:120px;
}
.box .square:nth-child(5){
top:-80px;
left:140px;
width:60px;
height:60px;
}
.container {
position:relative;
width:300px;
min-height:300px;
background:rgba(255,255,255,0.1);
border-radius:10px;
display:flex;
justify-content:center;
align-items:center;
backdrop-filter:blur(10px);
box-shadow:0 25px 45px rgba(0,0,0,0.1);
border:1px solid rgba(255,255,255,0.5);
border-bottom:1px solid rgba(255,255,255,0.2);
border-right:1px solid rgba(255,255,255,0.2);
}
.form {
position:relative;
width:100%;
height:100%;
padding:20px;
}
.form h2 {
position:relative;
font-size:24px;
font-weight:600;
color:#fff;
letter-spacing:1px;
margin-bottom:40px;
}
.form h2::before {
content:”;
position:absolute;
left:0;
bottom:-10px;
width:80px;
height:4px;
background:#fff;
}
.form .inputBox {
width:100%;
margin-top:20px;
}
.form .inputBox input {
width:100%;
border:none;
outline:none;
background:rgba(255,255,255,0.2);
padding:10px 20px;
border-radius:35px;
font-size:16px;
letter-spacing:1px;
color:#fff;
border:1px solid rgba(255,255,255,0.5);
border-bottom:1px solid rgba(255,255,255,0.2);
border-right:1px solid rgba(255,255,255,0.2);
box-shadow:0 5px 15px rgba(0,0,0,0.05);
}
.form .inputBox input::placeholder {
color:#fff;
}
.form .inputBox input[type=”submit”] {
color:#666;
background:#fff;
max-width:100px;
cursor:pointer;
margin-bottom:20px;
font-weight:600;
}
.forget {
margin-top:5px;
color:#fff;
}
.forget a {
color:#fff;
font-weight:600;
}
alert(“Please upvote,comment, if you like it and follow me 🙏🙏”);
alert(“For this code — Credit goes to Online Tutorials from You Tube”);
Login Form 