From 682b7c756831911ee92c5009b6cc80de436ce944 Mon Sep 17 00:00:00 2001
From: SohanRC <124901633+SohanRC@users.noreply.github.com>
Date: Sun, 11 Feb 2024 15:07:43 +0530
Subject: [PATCH] Added Animated Border Login Form (#559)
---
.../Animated-Border-Login-Form/index.html | 32 +++
.../Animated-Border-Login-Form/style.css | 210 ++++++++++++++++++
assets/html_files/forms.html | 13 ++
3 files changed, 255 insertions(+)
create mode 100644 Components/Forms/Animated-Border-Login-Form/index.html
create mode 100644 Components/Forms/Animated-Border-Login-Form/style.css
diff --git a/Components/Forms/Animated-Border-Login-Form/index.html b/Components/Forms/Animated-Border-Login-Form/index.html
new file mode 100644
index 00000000..b4fec72b
--- /dev/null
+++ b/Components/Forms/Animated-Border-Login-Form/index.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+ Animated Login Form
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Components/Forms/Animated-Border-Login-Form/style.css b/Components/Forms/Animated-Border-Login-Form/style.css
new file mode 100644
index 00000000..50be412e
--- /dev/null
+++ b/Components/Forms/Animated-Border-Login-Form/style.css
@@ -0,0 +1,210 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: "Poppins", sans-serif;
+ font-weight: 400;
+ font-style: normal;
+}
+
+body{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ background: #23242a;
+}
+
+.box{
+ position: relative;
+ width: 380px;
+ height: 420px;
+ background: #1c1c1c;
+ border-radius: 8px;
+ overflow: hidden;
+}
+
+.box::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 380px;
+ height: 420px;
+ background: linear-gradient(0deg, transparent,transparent,#45f3ff,#45f3ff,#45f3ff);
+ z-index: 1;
+ transform-origin: bottom right;
+ animation: animate 6s linear infinite;
+}
+
+.box::after {
+ content: '';
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 380px;
+ height: 420px;
+ background: linear-gradient(0deg, transparent,transparent,#45f3ff,#45f3ff,#45f3ff);
+ z-index: 1;
+ transform-origin: bottom right;
+ animation: animate 6s linear infinite;
+ animation-delay: -3s;
+}
+
+.borderLine{
+ position: absolute;
+ top: 0;
+ inset: 0;
+}
+
+.borderLine::before{
+ content: '';
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 380px;
+ height: 420px;
+ background: linear-gradient(0deg, transparent,transparent,#ff2770,#ff2770,#ff2770);
+ z-index: 1;
+ transform-origin: bottom right;
+ animation: animate 6s linear infinite;
+ animation-delay: -1.5s;
+}
+.borderLine::after{
+ content: '';
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 380px;
+ height: 420px;
+ background: linear-gradient(0deg, transparent,transparent,#ff2770,#ff2770,#ff2770);
+ z-index: 1;
+ transform-origin: bottom right;
+ animation: animate 6s linear infinite;
+ animation-delay: -4.5s;
+}
+
+@keyframes animate {
+ 0%{
+ transform: rotate(0deg);
+ }
+ 100%{
+ transform: rotate(360deg);
+ }
+}
+.box form {
+ position: absolute;
+ inset: 4px;
+ background: #222;
+ padding: 50px 40px;
+ border-radius: 8px;
+ z-index: 2;
+ display: flex;
+ flex-direction: column;
+}
+
+.box form h2{
+ color: #fff;
+ font-weight: 500;
+ text-align: center;
+ letter-spacing: 0.1em;
+}
+
+.box form .inputBox{
+ position: relative;
+ width: 300px;
+ margin-top: 35px;
+}
+
+.box form .inputBox input {
+ position: relative;
+ width: 100%;
+ padding: 20px 10px 10px;
+ background: transparent;
+ outline: none;
+ border: none;
+ box-shadow: none;
+ color: black;
+ font-size: 1em;
+ letter-spacing: 0.05em;
+ transition: 0.5s;
+ z-index: 10;
+}
+
+.box form .inputBox span{
+ position: absolute;
+ left: 0;
+ padding: 20px 0px 10px;
+ pointer-events: none;
+ color: #8f8f8f;
+ font-size: 1em;
+ letter-spacing: 0.05em;
+ transition: 0.5s;
+}
+
+.box form .inputBox input:valid ~ span,
+.box form .inputBox input:focus ~ span{
+ color: #fff;
+ font-size: 0.75em;
+ transform: translateY(-34px);
+}
+
+.box form .inputBox i{
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ height: 2px;
+ background: #fff ;
+ border-radius: 4px;
+ overflow: hidden;
+ transition: 0.5s;
+ pointer-events: none;
+}
+
+.box form .inputBox input:valid ~ i,
+.box form .inputBox input:focus ~ i {
+ height: 44px;
+}
+
+.box form .links {
+ display: flex;
+ justify-content: space-between;
+}
+
+.box form .links a{
+ margin: 10px 0;
+ font-size: 0.75em;
+ color: #8f8f8f;
+ text-decoration: none;
+ transition: transform 0.2s linear;
+}
+
+.box form .links a:hover,
+.box form .links a:nth-child(2) {
+ color: #fff;
+}
+
+.box form .links a:hover{
+ transform: scale(1.02);
+ transition: transform 0.2s linear;
+}
+
+.box form input[type="submit"] {
+ border: none;
+ outline: none;
+ padding: 9px 25px;
+ background-color: #fff;
+ cursor: pointer;
+ font-size: 0.9em;
+ border-radius: 4px;
+ font-weight: 600;
+ width: 100px;
+ margin-top: 10px;
+}
+
+.box form input[type="submit"]:active{
+ opacity: 0.8;
+}
\ No newline at end of file
diff --git a/assets/html_files/forms.html b/assets/html_files/forms.html
index 6fe14d27..ea0baa69 100644
--- a/assets/html_files/forms.html
+++ b/assets/html_files/forms.html
@@ -266,6 +266,19 @@ Event Form
+
+
Animated Border Login Form
+
+
+
+
+ 
+
+