diff --git a/100_projects/29-glassmorphism-login-form/app.js b/100_projects/29-glassmorphism-login-form/app.js new file mode 100644 index 0000000..b38f6a8 --- /dev/null +++ b/100_projects/29-glassmorphism-login-form/app.js @@ -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"); +}); \ No newline at end of file diff --git a/100_projects/29-glassmorphism-login-form/index.html b/100_projects/29-glassmorphism-login-form/index.html new file mode 100644 index 0000000..3eb1c0f --- /dev/null +++ b/100_projects/29-glassmorphism-login-form/index.html @@ -0,0 +1,48 @@ + + + + + + + + Document + + +
+
+
+
+
+
+
+
+
+
+
+
+

Login Form

+
+
+ +
+
+ +
+
+ +
+

Forget Password ? + Click Here +

+

Don't Have an account ? + Sing Up +

+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/100_projects/29-glassmorphism-login-form/style.css b/100_projects/29-glassmorphism-login-form/style.css new file mode 100644 index 0000000..01cdca0 --- /dev/null +++ b/100_projects/29-glassmorphism-login-form/style.css @@ -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; +} \ No newline at end of file