From f27d7c908b342169bfa1d367ad19ecad4a694277 Mon Sep 17 00:00:00 2001 From: Nandhakumar N <158730191+Nandha2536@users.noreply.github.com> Date: Wed, 6 Mar 2024 17:18:07 +0530 Subject: [PATCH] Add files via upload --- index.html | 66 +++++++++++++++++ script.js | 11 +++ style.css | 214 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 291 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..9118a0e --- /dev/null +++ b/index.html @@ -0,0 +1,66 @@ + + + + + + + + + Modern Login Page + + + + +
+
+
+

Create Account

+ + or use your email for registeration + + + + +
+
+
+
+

Sign In

+ + or use your email password + + + Forget Your Password? + +
+
+
+
+
+

Welcome Back !

+

Enter your personal details to use all of site features

+ +
+
+

Welcome, Friend!

+

Enter your personal details to use all of site features

+ +
+
+
+
+ + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..8246c6e --- /dev/null +++ b/script.js @@ -0,0 +1,11 @@ +const container = document.getElementById('container'); +const registerBtn = document.getElementById('register'); +const loginBtn = document.getElementById('login'); + +registerBtn.addEventListener('click', () => { + container.classList.add("active"); +}); + +loginBtn.addEventListener('click', () => { + container.classList.remove("active"); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..33b342a --- /dev/null +++ b/style.css @@ -0,0 +1,214 @@ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'); + +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Montserrat', sans-serif; +} + +body{ + background-color: #c9d6ff; + background: linear-gradient(to right, #e2e2e2, #c9d6ff); + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + height: 100vh; +} + +.container{ + background-color: #fff; + border-radius: 30px; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35); + position: relative; + overflow: hidden; + width: 768px; + max-width: 100%; + min-height: 480px; +} + +.container p{ + font-size: 14px; + line-height: 20px; + letter-spacing: 0.3px; + margin: 20px 0; +} + +.container span{ + font-size: 12px; +} + +.container a{ + color: #333; + font-size: 13px; + text-decoration: none; + margin: 15px 0 10px; +} + +.container button{ + background-color: orange; + color: #fff; + font-size: 12px; + padding: 10px 45px; + border: 1px solid transparent; + border-radius: 8px; + font-weight: 600; + letter-spacing: 0.5px; + text-transform: uppercase; + margin-top: 10px; + cursor: pointer; +} + +.container button:hover{ + background-color: #00a1ff; +} + +.container button.hidden{ + background-color: transparent; + border-color: #fff; +} + +.container form{ + background-color: #fff; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 0 40px; + height: 100%; +} + +.container input{ + background-color: #eee; + border: none; + margin: 8px 0; + padding: 10px 15px; + font-size: 13px; + border-radius: 8px; + width: 100%; + outline: none; +} + +.form-container{ + position: absolute; + top: 0; + height: 100%; + transition: all 0.6s ease-in-out; +} + +.sign-in{ + left: 0; + width: 50%; + z-index: 2; +} + +.container.active .sign-in{ + transform: translateX(100%); +} + +.sign-up{ + left: 0; + width: 50%; + opacity: 0; + z-index: 1; +} + +.container.active .sign-up{ + transform: translateX(100%); + opacity: 1; + z-index: 5; + animation: move 0.6s; +} + +@keyframes move{ + 0%, 49.99%{ + opacity: 0; + z-index: 1; + } + 50%, 100%{ + opacity: 1; + z-index: 5; + } +} + +.social-icons{ + margin: 20px 0; +} + +.social-icons a{ + border: 1px solid #ccc; + border-radius: 20%; + display: inline-flex; + justify-content: center; + align-items: center; + margin: 0 3px; + width: 40px; + height: 40px; +} + +.toggle-container{ + position: absolute; + top: 0; + left: 50%; + width: 50%; + height: 100%; + overflow: hidden; + transition: all 0.6s ease-in-out; + border-radius: 150px 0 0 100px; + z-index: 1000; +} + +.container.active .toggle-container{ + transform: translateX(-100%); + border-radius: 0 150px 100px 0; +} + +.toggle{ + background-color: linear-gradient(to left, #00a1ff, #00ff8f); + height: 100%; + background: linear-gradient(to right, #C33764 , #1D2671); + color: #fff; + position: relative; + left: -100%; + height: 100%; + width: 200%; + transform: translateX(0); + transition: all 0.6s ease-in-out; +} + +.container.active .toggle{ + transform: translateX(50%); +} + +.toggle-panel{ + position: absolute; + width: 50%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 0 30px; + text-align: center; + top: 0; + transform: translateX(0); + transition: all 0.6s ease-in-out; +} + +.toggle-left{ + transform: translateX(-200%); +} + +.container.active .toggle-left{ + transform: translateX(0); +} + +.toggle-right{ + right: 0; + transform: translateX(0); +} + +.container.active .toggle-right{ + transform: translateX(200%); +}