x39OME/100-project-100-days-website
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Sam 2023-03-22 11:00:30 +03:00 committed by GitHub
parent eb812e9f76
commit 356dbf84d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 222 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
100_projects/29-glassmorphism-login-form/app.js Normal file
View File

@ -0,0 +1,5 @@
const pos = document.documentElement;
pos.addEventListener("mousemove", e => {
pos.style.setProperty('--x', e.clientX + "px");
pos.style.setProperty('--y', e.clientY + "px");
});

48
100_projects/29-glassmorphism-login-form/index.html Normal file
View File

@ -0,0 +1,48 @@
<!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="style.css">
<title>Document</title>
</head>
<body>
<section>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="box">
<div class="square" style="--i:0"></div>
<div class="square" style="--i:1"></div>
<div class="square" style="--i:2"></div>
<div class="square" style="--i:3"></div>
<div class="square" style="--i:4"></div>
<div class="container">
<div class="form">
<h2>Login Form</h2>
<form>
<div class="inputBox">
<input type="text" placeholder="Username">
</div>
<div class="inputBox">
<input type="password" placeholder="Password">
</div>
<div class="inputBox">
<input type="submit" value="Login">
</div>
<p class="forget">Forget Password ?
<a href="#">Click Here</a>
</p>
<p class="forget">Don't Have an account ?
<a href="#">Sing Up</a>
</p>
</form>
</div>
</div>
</div>
</section>
<script src="app.js"></script>
</body>
</html>

169
100_projects/29-glassmorphism-login-form/style.css Normal file
View File

@ -0,0 +1,169 @@
*{
margin:0;
padding:0;
box-sizing: border-box;
}
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: fixed;
filter: blur(150px);
}
section .color:nth-child(1){
top: -300px;
width: 355px;
height: 600px;
background: #ff359b;
}
section .color:nth-child(2){
bottom: -100px;
left: 100px;
width: 265px;
height: 450px;
background: #fffd87;
}
section .color:nth-child(3){
bottom: 40px;
right: 250px;
width: 300px;
height: 300px;
background: #00d2ff;
}
.box{
position: relative;
}
.box .square{
position: absolute;
backdrop-filter: blur(5px);
box-shadow: 0 25px 45px rgba(0,0,0, .1);
border:1px solid rgba(255,255,255, .5);
border-right: 1px solid rgba(255,255,255, .2);
border-bottom: 1px solid rgba(255,255,255, .2);
background: rgba(255,255,255, .1);
border-radius: 10px;
animation: animate 6s 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: -30px;
width: 100px;
height: 100px;
}
.box .square:nth-child(2){
top: 150px;
left: -100px;
width: 120px;
height: 120px;
z-index: 2;
}
.box .square:nth-child(3){
bottom: 50px;
right: -15px;
width: 70px;
height: 70px;
z-index: 2;
}
.box .square:nth-child(4){
bottom: -80px;
left: 100px;
width: 50px;
height: 50px;
}
.box .square:nth-child(5){
top: -80px;
left: 100px;
width: 60px;
height: 60px;
}
.container{
position: relative;
width: 350px;
min-height: 400px;
background: rgba(255,255,255, .1);
display: flex;
justify-content:center;
align-items: center;
backdrop-filter: blur(25px);
box-shadow: 0 25px 45px rgba(0,0,0, .1);
border:1px solid rgba(255,255,255, .5);
border-right: 1px solid rgba(255,255,255, .2);
border-bottom: 1px solid rgba(255,255,255, .2);
border-radius: 10px;
}
.form{
position: relative;
width: 100%;
height: 100%;
padding: 40px;
}
.form h2{
position: relative;
color: #fff;
font-size: 24px;
font-weight: 600;
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%;
background: rgba(255,255,255, .2);
border: none;
outline: none;
padding: 10px 20px;
border-radius: 35px;
border:1px solid rgba(255,255,255, .5);
border-right: 1px solid rgba(255,255,255, .2);
border-bottom: 1px solid rgba(255,255,255, .2);
box-shadow: 0 15px 15px rgba(0,0,0, .1);
font-size: 16px;
letter-spacing: 1px;
color: #fff;
}
.form .inputBox input::placeholder{
color: #fff;
}
.form .inputBox input[type="submit"]{
background: #fff;
color: #666;
max-width: 100px;
cursor: pointer;
margin-bottom: 20px;
font-weight: 400;
}
.forget {
margin-top: 5px;
color: #fff;
}
.forget a{
color: #fff;
font-weight: 600;
}