From dca673db67e367aa5ad0a81e3e7669ffd4d818c6 Mon Sep 17 00:00:00 2001 From: AftabMankapure Date: Sun, 25 Feb 2024 00:36:39 +0530 Subject: [PATCH 1/4] added Torch-Effect-Login-Form --- .../Forms/Torch-Effect-Login-Form/index.html | 57 ++++ .../Forms/Torch-Effect-Login-Form/style.css | 312 ++++++++++++++++++ assets/html_files/forms.html | 14 + 3 files changed, 383 insertions(+) create mode 100644 Components/Forms/Torch-Effect-Login-Form/index.html create mode 100644 Components/Forms/Torch-Effect-Login-Form/style.css diff --git a/Components/Forms/Torch-Effect-Login-Form/index.html b/Components/Forms/Torch-Effect-Login-Form/index.html new file mode 100644 index 00000000..be997865 --- /dev/null +++ b/Components/Forms/Torch-Effect-Login-Form/index.html @@ -0,0 +1,57 @@ + + + + + + + + Login Form Animation CSS | Codehal + + + + + +
+
+
+ + +
+ +

Login

+
+ + + + + +
+
+
+ + + + + +
+
+
+ + Forgot Password? +
+ +
+

Don't have an account? Register

+
+
+
+ + + + + + + diff --git a/Components/Forms/Torch-Effect-Login-Form/style.css b/Components/Forms/Torch-Effect-Login-Form/style.css new file mode 100644 index 00000000..f2f86adf --- /dev/null +++ b/Components/Forms/Torch-Effect-Login-Form/style.css @@ -0,0 +1,312 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} + +body { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: #000; + overflow: hidden; +} + +.login-box { + position: relative; + width: 400px; + height: 450px; + background: #191919; + border-radius: 20px; + display: flex; + justify-content: center; + align-items: center; +} + +h2 { + font-size: 2em; + color: #fff; + text-align: center; + transition: .5s ease; +} + +.input-check:checked~h2 { + color: #00f7ff; + text-shadow: + 0 0 15px #00f7ff, + 0 0 30px #00f7ff; +} + +.input-box { + position: relative; + width: 310px; + margin: 30px 0; +} + +.input-box .input-line { + position: absolute; + bottom: -2px; + left: 0; + width: 100%; + height: 2.5px; + background: #fff; + transition: .5s ease; +} + +.input-check:checked~.input-box .input-line { + background: #00f7ff; + box-shadow: 0 0 10px #00f7ff; +} + +.input-box label { + position: absolute; + top: 50%; + left: 5px; + transform: translateY(-50%); + font-size: 1em; + color: #fff; + pointer-events: none; + transition: .5s ease; +} + +.input-box input:focus~label, +.input-box input:valid~label { + top: -5px; +} + +.input-check:checked~.input-box label { + color: #00f7ff; + text-shadow: 0 0 10px #00f7ff; +} + +.input-box input { + width: 100%; + height: 50px; + background: transparent; + border: none; + outline: none; + font-size: 1em; + color: #fff; + padding: 0 35px 0 5px; + transition: .5s ease; +} + +.input-check:checked~.input-box input { + color: #00f7ff; + text-shadow: 0 0 5px #00f7ff; +} + +.input-box .icon { + position: absolute; + right: 8px; + color: #fff; + font-size: 1.2em; + line-height: 57px; + transition: .5s ease; +} + +.input-check:checked~.input-box .icon { + color: #00f7ff; + filter: drop-shadow(0 0 5px #00f7ff); +} + +.remember-forgot { + color: #fff; + font-size: .9em; + margin: -15px 0 15px; + display: flex; + justify-content: space-between; + transition: .5s ease; +} + +.input-check:checked~.remember-forgot { + color: #00f7ff; + text-shadow: 0 0 10px #00f7ff; +} + +.remember-forgot label input { + accent-color: #fff; + margin-right: 3px; + transition: .5s ease; +} + +.input-check:checked~.remember-forgot label input { + accent-color: #00f7ff; +} + +.remember-forgot a { + color: #fff; + text-decoration: none; + transition: color .5s ease; +} + +.remember-forgot a:hover { + text-decoration: underline; +} + +.input-check:checked~.remember-forgot a { + color: #00f7ff; +} + +button { + width: 100%; + height: 40px; + background: #fff; + border: none; + outline: none; + border-radius: 40px; + cursor: pointer; + font-size: 1em; + color: #191919; + font-weight: 500; + transition: .5s ease; +} + +.input-check:checked~button { + background: #00f7ff; + box-shadow: 0 0 15px #00f7ff, 0 0 15px #00f7ff; +} + +.register-link { + color: #fff; + font-size: .9em; + text-align: center; + margin: 25px 0 10px; + transition: .5s ease; +} + +.input-check:checked~.register-link { + color: #00f7ff; + text-shadow: 0 0 10px #00f7ff; +} + +.register-link p a { + color: #fff; + text-decoration: none; + font-weight: 600; + transition: color .5s ease; +} + +.register-link p a:hover { + text-decoration: underline; +} + +.input-check:checked~.register-link p a { + color: #00f7ff; +} + +.login-light { + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + width: 500px; + height: 10px; + background: #00f7ff; + border-radius: 20px; +} + +.light { + position: absolute; + top: -200%; + left: 0; + width: 100%; + height: 950px; + background: linear-gradient(to bottom, rgba(255, 255, 255, .3) -50%, rgba(255, 255, 255, 0) 90%); + clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); + pointer-events: none; + transition: .5s ease; +} + +.input-check:checked~.light { + top: -90%; +} + +.toggle { + position: absolute; + top: 20px; + right: -70px; + width: 60px; + height: 120px; + background: #191919; + border-radius: 10px; +} + +.toggle::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 10px; + height: 80%; + background: #000; +} + +.toggle::after { + content: ''; + position: absolute; + top: 5px; + left: 50%; + transform: translateX(-50%); + width: 45px; + height: 45px; + background: #333; + border: 2px solid #191919; + border-radius: 10px; + cursor: pointer; + box-shadow: 0 0 10px rgba(0, 0, 0, .5); + transition: .5s ease; +} + +.input-check:checked~.toggle::after { + top: 65px; +} + +.input-check { + position: absolute; + right: -70px; + z-index: 1; + opacity: 0; +} + +.toggle .text { + position: absolute; + top: 17px; + left: 50%; + transform: translateX(-50%); + color: #fff; + font-size: 1em; + z-index: 1; + text-transform: uppercase; + pointer-events: none; + transition: .5s ease; +} + +.toggle .text.off { + opacity: 1; +} + +.input-check:checked~.toggle .text.off { + top: 76px; + opacity: 0; +} + +.toggle .text.on { + opacity: 0; +} + +.input-check:checked~.toggle .text.on { + top: 76px; + opacity: 1; + color: #00f7ff; + text-shadow: + 0 0 15px #00f7ff, + 0 0 30px #00f7ff, + 0 0 45px #00f7ff, + 0 0 60px #00f7ff; +} \ No newline at end of file diff --git a/assets/html_files/forms.html b/assets/html_files/forms.html index 46abdcf4..a1708a6f 100644 --- a/assets/html_files/forms.html +++ b/assets/html_files/forms.html @@ -313,6 +313,20 @@

Newsletter Subscription Form

+ +
+

Torch-Effect-Login-Form

+
+ + + +
+
+ + + +
+
From 63a26fc54cc445c507665d9edbcef04b1e39c676 Mon Sep 17 00:00:00 2001 From: AftabMankapure Date: Sun, 25 Feb 2024 11:06:41 +0530 Subject: [PATCH 2/4] update --- .../Forms/Torch-Effect-Login-Form/index.html | 1 - .../Forms/Torch-Effect-Login-Form/style.css | 58 ++++++++++--------- 2 files changed, 30 insertions(+), 29 deletions(-) diff --git a/Components/Forms/Torch-Effect-Login-Form/index.html b/Components/Forms/Torch-Effect-Login-Form/index.html index be997865..c308c341 100644 --- a/Components/Forms/Torch-Effect-Login-Form/index.html +++ b/Components/Forms/Torch-Effect-Login-Form/index.html @@ -49,7 +49,6 @@

Login

- diff --git a/Components/Forms/Torch-Effect-Login-Form/style.css b/Components/Forms/Torch-Effect-Login-Form/style.css index f2f86adf..855e4230 100644 --- a/Components/Forms/Torch-Effect-Login-Form/style.css +++ b/Components/Forms/Torch-Effect-Login-Form/style.css @@ -5,6 +5,7 @@ padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; + } body { @@ -12,15 +13,16 @@ body { justify-content: center; align-items: center; min-height: 100vh; - background: #000; + background: linear-gradient(45deg, #360033, #0b8793); overflow: hidden; + } .login-box { position: relative; width: 400px; height: 450px; - background: #191919; + background: linear-gradient(45deg, #283c86, #45a247); border-radius: 20px; display: flex; justify-content: center; @@ -35,10 +37,10 @@ h2 { } .input-check:checked~h2 { - color: #00f7ff; + color: #FFBF00; text-shadow: - 0 0 15px #00f7ff, - 0 0 30px #00f7ff; + 0 0 15px #FFBF00, + 0 0 30px #FFBF00; } .input-box { @@ -58,8 +60,8 @@ h2 { } .input-check:checked~.input-box .input-line { - background: #00f7ff; - box-shadow: 0 0 10px #00f7ff; + background: #FFBF00; + box-shadow: 0 0 10px #FFBF00; } .input-box label { @@ -79,8 +81,8 @@ h2 { } .input-check:checked~.input-box label { - color: #00f7ff; - text-shadow: 0 0 10px #00f7ff; + color: #FFBF00; + text-shadow: 0 0 10px #FFBF00; } .input-box input { @@ -96,8 +98,8 @@ h2 { } .input-check:checked~.input-box input { - color: #00f7ff; - text-shadow: 0 0 5px #00f7ff; + color: #FFBF00; + text-shadow: 0 0 5px #FFBF00; } .input-box .icon { @@ -110,8 +112,8 @@ h2 { } .input-check:checked~.input-box .icon { - color: #00f7ff; - filter: drop-shadow(0 0 5px #00f7ff); + color: #FFBF00; + filter: drop-shadow(0 0 5px #FFBF00); } .remember-forgot { @@ -124,8 +126,8 @@ h2 { } .input-check:checked~.remember-forgot { - color: #00f7ff; - text-shadow: 0 0 10px #00f7ff; + color: #FFBF00; + text-shadow: 0 0 10px #FFBF00; } .remember-forgot label input { @@ -135,7 +137,7 @@ h2 { } .input-check:checked~.remember-forgot label input { - accent-color: #00f7ff; + accent-color: #FFBF00; } .remember-forgot a { @@ -149,7 +151,7 @@ h2 { } .input-check:checked~.remember-forgot a { - color: #00f7ff; + color: #FFBF00; } button { @@ -167,8 +169,8 @@ button { } .input-check:checked~button { - background: #00f7ff; - box-shadow: 0 0 15px #00f7ff, 0 0 15px #00f7ff; + background: #FFBF00; + box-shadow: 0 0 15px #FFBF00, 0 0 15px #FFBF00; } .register-link { @@ -180,8 +182,8 @@ button { } .input-check:checked~.register-link { - color: #00f7ff; - text-shadow: 0 0 10px #00f7ff; + color: #FFBF00; + text-shadow: 0 0 10px #FFBF00; } .register-link p a { @@ -196,7 +198,7 @@ button { } .input-check:checked~.register-link p a { - color: #00f7ff; + color: #FFBF00; } .login-light { @@ -206,7 +208,7 @@ button { transform: translateX(-50%); width: 500px; height: 10px; - background: #00f7ff; + background: #FFBF00; border-radius: 20px; } @@ -303,10 +305,10 @@ button { .input-check:checked~.toggle .text.on { top: 76px; opacity: 1; - color: #00f7ff; + color: #FFBF00; text-shadow: - 0 0 15px #00f7ff, - 0 0 30px #00f7ff, - 0 0 45px #00f7ff, - 0 0 60px #00f7ff; + 0 0 15px #FFBF00, + 0 0 30px #FFBF00, + 0 0 45px #FFBF00, + 0 0 60px #FFBF00; } \ No newline at end of file From 890be15bed980beb11071a79f1c9736325c1a929 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Mon, 26 Feb 2024 10:19:47 +0530 Subject: [PATCH 3/4] Update index.html --- Components/Forms/Torch-Effect-Login-Form/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Components/Forms/Torch-Effect-Login-Form/index.html b/Components/Forms/Torch-Effect-Login-Form/index.html index c308c341..a9f12046 100644 --- a/Components/Forms/Torch-Effect-Login-Form/index.html +++ b/Components/Forms/Torch-Effect-Login-Form/index.html @@ -5,7 +5,7 @@ - Login Form Animation CSS | Codehal + Torch Effect Login Form From a1469b386ac7ec83e3ec0d24e7b7fb3559a6e440 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Mon, 26 Feb 2024 10:20:45 +0530 Subject: [PATCH 4/4] Update forms.html --- assets/html_files/forms.html | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/assets/html_files/forms.html b/assets/html_files/forms.html index 6ca26ba4..e1b0a12e 100644 --- a/assets/html_files/forms.html +++ b/assets/html_files/forms.html @@ -352,9 +352,8 @@

QR Code Generator Form

- -
-

Torch-Effect-Login-Form

+
+

Torch Effect Login Form

@@ -383,4 +382,4 @@

Torch-Effect-Login-Form

- \ No newline at end of file +