From 80865797f15b7ec4501f0d62d1ad984a95496cb6 Mon Sep 17 00:00:00 2001 From: Kunal Jadhav <155985737+712Kunal@users.noreply.github.com> Date: Sun, 29 Dec 2024 00:06:19 +0530 Subject: [PATCH] Made Animated Login/Signup Form component responsive (#1430) --- .../Animated-Login-Signup-Form/index.html | 43 +- .../Animated-Login-Signup-Form/style.css | 498 +++++++----------- 2 files changed, 208 insertions(+), 333 deletions(-) diff --git a/Components/Forms/Animated-Login-Signup-Form/index.html b/Components/Forms/Animated-Login-Signup-Form/index.html index dbbfe0da..7e1e66ff 100644 --- a/Components/Forms/Animated-Login-Signup-Form/index.html +++ b/Components/Forms/Animated-Login-Signup-Form/index.html @@ -11,31 +11,30 @@
- + +
-

Sign Up

- +
- +
- +
-
@@ -43,38 +42,36 @@

Sign Up

Login

- + - +
-
- show password -
- -
- Forgot password? +
+
+ + +
+
+ Forgot password? +
- - - + + + diff --git a/Components/Forms/Animated-Login-Signup-Form/style.css b/Components/Forms/Animated-Login-Signup-Form/style.css index 38dd9923..ac705b9c 100644 --- a/Components/Forms/Animated-Login-Signup-Form/style.css +++ b/Components/Forms/Animated-Login-Signup-Form/style.css @@ -1,390 +1,270 @@ -@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Slab&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Slab&display=swap"); * { padding: 0; margin: 0; box-sizing: border-box; - font-family: 'Roboto Slab', serif; + font-family: "Roboto Slab", serif; } body { - background: linear-gradient(109.6deg, rgb(96, 158, 155) 11.2%, rgb(72, 81, 160) 91.1%); + width: 100%; min-height: 100vh; - display: grid; - place-content: center; - overflow: hidden; -} - -.main-container .circle1 { + background: linear-gradient(109.6deg, rgb(96, 158, 155) 11.2%, rgb(72, 81, 160) 91.1%); + background-attachment: fixed; + background-repeat: no-repeat; + background-size: cover; + background-position: center; display: flex; - background-color: rgba(245, 245, 245, 0.53); - border-radius: 50%; - height: 10rem; - width: 10rem; - position: relative; - right: 70%; - top: 5%; -} - -.circle1_child1 { - height: 4rem; - width: 4rem; - background-color: rgba(245, 245, 245, 0.53); - border-radius: 50%; - position: relative; - left: 120%; - top: 1%; + justify-content: center; + align-items: center; + overflow-x: hidden; + padding: 1rem; } -.circle1_child2 { - height: 6rem; - width: 6rem; - background-color: rgba(245, 245, 245, 0.53); - border-radius: 50%; +.main-container { position: relative; - left: 30%; - top: 100%; + width: 100%; + max-width: 400px; + min-height: 500px; + perspective: 1000px; + margin: 0 auto; } -.circle1_child3 { - height: 2.3rem; - width: 2.3rem; - background-color: rgba(245, 245, 245, 0.53); - border-radius: 50%; +.form_container { position: absolute; - left: -65%; - top: 38%; + width: 100%; + height: 100%; + background-color: whitesmoke; + box-shadow: 0 0 65px 3px rgba(0, 0, 0, 0.2); + border-radius: 1rem; + padding: 2rem 1.5rem; + overflow-y: auto; } -.main-container .circle2 { +.form_container form { display: flex; - background-color: rgba(245, 245, 245, 0.53); - border-radius: 50%; - height: 10rem; - width: 10rem; - position: relative; - left: 135%; - top: 35%; + flex-direction: column; + align-items: center; + gap: 1.5rem; + width: 100%; } -.circle2_child1 { - height: 4rem; - width: 4rem; - background-color: rgba(245, 245, 245, 0.53); - border-radius: 50%; - position: relative; - right: 62%; - bottom: 19%; +.form_container form h2 { + font-size: 2rem; + color: rgba(0, 0, 0, 0.811); + margin-bottom: 1rem; } -.circle2_child2 { - height: 6rem; - width: 6rem; - background-color: rgba(245, 245, 245, 0.53); - border-radius: 50%; +.form-field { position: relative; - right: 98%; - bottom: -71%; + width: 100%; + max-width: 320px; + margin-bottom: 0.5rem; } -.circle2_child3 { - height: 2.3rem; - width: 2.3rem; - background-color: rgba(245, 245, 245, 0.53); - border-radius: 50%; - position: absolute; - right: -55%; - bottom: -3%; +.form-field input { + width: 100%; + padding: 0.75rem 2rem; + border: none; + border-bottom: 1px solid black; + background: transparent; + font-size: 1rem; + outline: none; } -.OR { +.form-field i { position: absolute; - top: 51%; - left: 45%; - font-size: 1.7rem; - font-weight: 600; -} - -.google { - height: 3rem; - width: 25rem; - margin-top: 2rem; - margin-bottom: 1.5rem; - border: 2px solid black; - display: flex; - justify-content: center; - align-items: center; + left: 0.5rem; + top: 50%; + transform: translateY(-50%); + font-size: 1rem; + color: rgba(0, 0, 0, 0.6); } -.google .content-photo1 { - z-index: 20; - position: relative; - display: inline-block; +.form-field label { + position: absolute; + left: 2rem; + top: 50%; + transform: translateY(-50%); + font-size: 1rem; + color: rgba(0, 0, 0, 0.6); + pointer-events: none; + transition: all 0.3s ease; } -.content-photo1 img { - height: 2rem; - width: 2rem; +.form-field input:focus~label, +.form-field input:valid~label { + top: -0.5rem; + left: 0; + font-size: 0.75rem; + color: rgb(72, 81, 160); } -.google .content-photo2 { - z-index: -1; - display: none; - height: 100%; +.form-options { width: 100%; - background: black; -} - -.content-photo2 img { - height: 2rem; - width: 2rem; - margin-top: 0.5rem; -} - -.google .content-photo2 span { - color: white; - margin-left: 1rem; - font-size: 1.4rem; - position: relative; - bottom: 15%; + max-width: 320px; + display: flex; + justify-content: space-between; + align-items: center; + margin: 0.5rem 0; } -.google:hover .content-photo1 { - display: none; - z-index: -1; +.show_password { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.875rem; + color: rgba(0, 0, 0, 0.7); } -.google:hover .content-photo2 { - display: block; - z-index: 1; +.form-forget a { + font-size: 0.875rem; + color: rgb(72, 81, 160); + text-decoration: none; } -.content-photo2-facebook { - z-index: -1; - display: none; - height: 100%; +.Login_button { width: 100%; - background: rgb(51, 51, 197); -} - -.content-photo2-facebook img { - height: 2rem; - width: 2rem; - margin-top: 0.5rem; -} - -.content-photo2-facebook span { + max-width: 320px; + padding: 0.75rem; + background: linear-gradient(109.6deg, rgb(95, 186, 181) 11.2%, rgb(72, 81, 160) 91.1%); + border: none; + border-radius: 0.5rem; color: white; - margin-left: 1rem; - font-size: 1.4rem; - position: relative; - bottom: 15%; -} - -.google:hover .content-photo1 { - display: none; - z-index: -1; -} - -.google:hover .content-photo2-facebook { - display: block; - z-index: 1; -} - -.main-container { - position: relative; - width: 30rem; - height: 36rem; - text-align: center; -} - -/* @media(min-width:540px){ - .main-container{ - width: 45rem; - } -} */ -.main-container .Login { - overflow: auto; + font-size: 1.125rem; + cursor: pointer; + transition: background 0.3s ease; } -.main-container .Sign_Up { - overflow: auto; +.Login_button:hover { + background: linear-gradient(109.6deg, rgb(68, 142, 137) 11.2%, rgb(62, 70, 148) 91.1%); } -.main-container .Sign_Up form h2 { - text-transform: capitalize; +.signup-link { text-align: center; - font-size: 2.1rem; - color: rgba(0, 0, 0, 0.811); - margin-top: 3rem; + font-size: 0.875rem; } -.OR2 { - position: absolute; - top: 61%; - left: 45%; - font-size: 1.7rem; +.signup-link a { + color: rgb(72, 81, 160); + text-decoration: none; font-weight: 600; - height: 2rem; - width: 2rem; - padding-bottom: 2rem; } -.main-container .form_container { - position: absolute; - top: 0; - left: 0; - display: flex; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - background-color: whitesmoke; - box-shadow: 0 0 65px 3px rgba(0, 0, 0, 0.2); - border-radius: 0.5rem; -} - -.main-container .form_container form h2 { - text-transform: capitalize; - text-align: center; - font-size: 2.1rem; - color: rgba(0, 0, 0, 0.811); - margin-top: 2rem; +/* Animation classes */ +.main-container .Sign_Up { + transform: rotate(7deg); } -.main-container .form_container form .form-field { - position: relative; - width: 25rem; - margin: 3rem 0; - border-bottom: 1px solid black; - - - /* position: relative; - width: 40rem;*/ - /* left: 25%; - height: 4rem; */ +.main-container.animated_signin .form_container.Login { + animation: signin 0.5s ease-in-out forwards; } -.main-container .form_container form .form-field i, -.main-container .form_container form .form-field label { - position: absolute; - top: 50%; - transform: translateY(-50%); - font-size: 0.9rem; - text-transform: capitalize; - padding: 0 .5rem; - pointer-events: none; - transition: all .5s ease; +.main-container.animated_signin .form_container.Sign_Up { + animation: rotatecard 0.7s ease-in-out forwards; } -.main-container .form_container form .form-field i { - left: 0.1rem; - font-size: 15px; +.main-container.animated_signup .form_container.Sign_Up { + animation: signup 0.5s ease-in-out forwards; } -.main-container .form_container form .form-field label { - left: 1.3rem; +.main-container.animated_signup .form_container.Login { + animation: rotatecard 0.7s ease-in-out forwards; } -.main-container .form_container form .form-field input { - width: 100%; - height: 2.2rem; - padding: 0 1rem; - border-radius: 0.5rem; - border: none; - outline: none; - font-size: 1rem; - background: transparent; +/* Background circles */ +.circle1, +.circle2 { + position: fixed; + width: 8rem; + height: 8rem; + background-color: rgba(245, 245, 245, 0.53); + border-radius: 50%; } -form .form-field input:focus~label, -form .form-field input:valid~label, -form .form-field input:focus~i, -form .form-field input:valid~i { - top: 0 !important; - font-size: 0.7rem !important; +.circle1 { + left: -4rem; + top: 10%; } -.main-container .form_container form .form-forget { - margin: -1.5rem 0 1.5rem; - margin-top: 2.5rem; - +.circle2 { + right: -4rem; + bottom: 10%; } -.main-container .form_container form .form-forget a { - text-decoration: none; - color: black; - opacity: 0.9; - text-transform: capitalize; - transform: all .5s ease; +.circle1_child1, +.circle1_child2, +.circle2_child1, +.circle2_child2 { + position: absolute; + width: 4rem; + height: 4rem; + background-color: rgba(245, 245, 245, 0.53); + border-radius: 50%; } -.main-container .form_container form .form-forget a:hover { - color: rgb(128, 63, 188); +.circle1_child1 { + left: 110%; + top: -10%; } -.main-container .form_container form .Login_button { - width: 100%; - height: 3rem; - background: linear-gradient(109.6deg, rgb(95, 186, 181) 11.2%, rgb(72, 81, 160) 91.1%); - /* background: linear-gradient(to right,rgb(102, 179, 209) 30% , rgb(198, 40, 198) 70%); */ - border: none; - font-size: 1.3rem; - font-weight: 500; - border-radius: 1rem; - cursor: pointer; - box-shadow: 0 .2rem 1rem rgba(0, 0, 0, 0.4); +.circle1_child2 { + left: 80%; + top: 90%; } -.main-container .form_container form .Login_button:hover { - background: linear-gradient(109.6deg, rgb(68, 142, 137) 11.2%, rgb(62, 70, 148) 91.1%); +.circle2_child1 { + right: 110%; + bottom: -10%; } -.main-container .form_container form .signup-link { - margin: 2rem 0; - color: cadetblue; +.circle2_child2 { + right: 80%; + bottom: 90%; } -.main-container .form_container form .signup-link a { - text-decoration: none; - font-weight: 500; - text-transform: capitalize; - transition: all .5s ease; - color: darkmagenta; - +.circle1_child3, +.circle2_child3 { + position: fixed; + width: 2rem; + height: 2rem; + background-color: rgba(245, 245, 245, 0.53); + border-radius: 50%; } -.main-container .form_container form .signup-link a:hover { - color: darkorchid; +.circle1_child3 { + left: -1rem; + top: 40%; } -#check:checked { - color: blue; +.circle2_child3 { + right: -1rem; + bottom: 40%; } -.show_password { - position: relative; - right: 30%; - bottom: 50%; - margin-bottom: 5rem; - opacity: 0.8; -} +@keyframes signin { + 0% { + transform: translateX(0); + } -.main-container .Sign_Up { - transform: rotate(7deg); -} + 50% { + transform: translateX(-100%); + } -.main-container.animated_signin .form_container.Login { - animation: signin 0.5s ease-in-out forwards; + 100% { + transform: translateX(0) rotate(7deg); + } } -@keyframes signin { +@keyframes signup { 0% { transform: translateX(0); + z-index: 1; } 50% { - transform: translateX(-50rem); + transform: translateX(100%); } 100% { @@ -392,10 +272,6 @@ form .form-field input:valid~i { } } -.main-container.animated_signin .form_container.Sign_Up { - animation: rotatecard 0.7s ease-in-out forwards; -} - @keyframes rotatecard { 0% { transform: rotate(7deg); @@ -407,25 +283,27 @@ form .form-field input:valid~i { } } -.main-container.animated_signup .form_container.Sign_Up { - animation: signup 0.5s ease-in-out forwards; -} +/* Responsive adjustments */ +@media (max-width: 480px) { + .main-container { + max-width: 100%; + } -@keyframes signup { - 0% { - transform: translateX(0); - z-index: 1; + .form_container { + padding: 1.5rem 1rem; } - 50% { - transform: translateX(50rem); + .form_container form h2 { + font-size: 1.75rem; } - 100% { - transform: translateX(0) rotate(7deg); + .form-field { + max-width: 100%; } -} -.main-container.animated_signup .form_container.Login { - animation: rotatecard 0.7s ease-in-out forwards; + .form-options { + flex-direction: column; + gap: 1rem; + align-items: flex-start; + } } \ No newline at end of file