From 46cd6ec974031cfa9147a3cc60978d75b02eca29 Mon Sep 17 00:00:00 2001 From: Khushi Sharma <96431469+khsh13@users.noreply.github.com> Date: Sat, 8 Oct 2022 17:54:39 +0530 Subject: [PATCH] Added sliding javascript hover slide form added new javascript project to the repo, thankyou --- Sliding registration form/README.md | 5 + Sliding registration form/css/styles.css | 258 +++++++++++++++++++++++ Sliding registration form/index.html | 71 +++++++ Sliding registration form/js/main.js | 11 + 4 files changed, 345 insertions(+) create mode 100644 Sliding registration form/README.md create mode 100644 Sliding registration form/css/styles.css create mode 100644 Sliding registration form/index.html create mode 100644 Sliding registration form/js/main.js diff --git a/Sliding registration form/README.md b/Sliding registration form/README.md new file mode 100644 index 0000000..4950be4 --- /dev/null +++ b/Sliding registration form/README.md @@ -0,0 +1,5 @@ +# Sliding Form + +Sliding Form is sing-in and sign-up form with sliding animation. + +[![Visits Badge](https://badges.pufler.dev/visits/kevinadhiguna/sliding-form)](https://github.com/kevinadhiguna) diff --git a/Sliding registration form/css/styles.css b/Sliding registration form/css/styles.css new file mode 100644 index 0000000..619ef5f --- /dev/null +++ b/Sliding registration form/css/styles.css @@ -0,0 +1,258 @@ +@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800'); + + +* { + box-sizing: border-box; +} + +body { + + background: url(https://img.freepik.com/free-vector/network-mesh-wire-digital-technology-background_1017-27428.jpg?w=2000); + background-size: 100% 100%; + background-position: center; + background-attachment: fixed; + + + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + font-family: 'Montserrat', sans-serif; + height: 100vh; + margin: -20px 0 50px; +} + +h1 { + font-weight: bold; + margin: 0; +} + +h2 { + text-align: center; +} + +p { + font-size: 14px; + font-weight: 100; + line-height: 20px; + letter-spacing: 0.5px; + margin: 20px 0 30px; +} + +span { + font-size: 12px; +} + +a { + color: #333; + font-size: 14px; + text-decoration: none; + margin: 15px 0; +} + +button { + border-radius: 20px; + border: 1px solid #ADD8E6; + background-color: #FF4B2B; + color: #FFFFFF; + font-size: 12px; + font-weight: bold; + padding: 12px 45px; + letter-spacing: 1px; + text-transform: uppercase; + transition: transform 80ms ease-in; +} + +button:active { + transform: scale(0.95); +} + +button:focus { + outline: none; +} + +button.ghost { + background-color: transparent; + border-color: #FFFFFF; +} + +form { + background-color: #FFFFFF; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 0 50px; + height: 100%; + text-align: center; +} + +input { + background-color: #eee; + border: none; + padding: 12px 15px; + margin: 8px 0; + width: 100%; +} + +.container { + background-color: #fff; + border-radius: 10px; + box-shadow: 0 14px 28px rgba(0,0,0,0.25), + 0 10px 10px rgba(0,0,0,0.22); + position: relative; + overflow: hidden; + width: 768px; + max-width: 100%; + min-height: 1000px; +} + +.form-container { + position: absolute; + top: 0; + height: 100%; + transition: all 0.6s ease-in-out; +} + +.sign-in-container { + left: 0; + width: 50%; + z-index: 2; +} + +.container.right-panel-active .sign-in-container { + transform: translateX(100%); +} + +.sign-up-container { + left: 0; + width: 50%; + opacity: 0; + z-index: 1; +} + +.container.right-panel-active .sign-up-container { + transform: translateX(100%); + opacity: 1; + z-index: 5; + animation: show 0.6s; +} + +@keyframes show { + 0%, 49.99% { + opacity: 0; + z-index: 1; + } + + 50%, 100% { + opacity: 1; + z-index: 5; + } +} + +.overlay-container { + position: absolute; + top: 0; + left: 50%; + width: 50%; + height: 100%; + overflow: hidden; + transition: transform 0.6s ease-in-out; + z-index: 100; +} + +.container.right-panel-active .overlay-container{ + transform: translateX(-100%); +} + +.overlay { + background:palegoldenrod; + background: -webkit-linear-gradient(to right,#1472be,#76eede); + background: linear-gradient(to right,#76eede,#1472be); + background-repeat: no-repeat; + background-size: cover; + background-position: 0 0; + color:; + position: relative; + left: -100%; + height: 100%; + width: 200%; + transform: translateX(0); + transition: transform 0.6s ease-in-out; +} + +.container.right-panel-active .overlay { + transform: translateX(50%); +} + +.overlay-panel { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 0 40px; + text-align: center; + top: 0; + height: 100%; + width: 50%; + transform: translateX(0); + transition: transform 0.6s ease-in-out; +} + +.overlay-left { + transform: translateX(-20%); +} + +.container.right-panel-active .overlay-left { + transform: translateX(0); +} + +.overlay-right { + right: 0; + transform: translateX(0); +} + +.container.right-panel-active .overlay-right { + transform: translateX(20%); +} + +.social-container { + margin: 20px 0; +} + +.social-container a { + border: 1px solid #DDDDDD; + border-radius: 50%; + display: inline-flex; + justify-content: center; + align-items: center; + margin: 0 5px; + height: 40px; + width: 40px; +} + +footer { + background-color:black; + color: #fff; + font-size: 14px; + bottom: 0; + position: fixed; + left: 0; + right: 0; + text-align: center; + z-index: 999; +} + +footer p { + margin: 10px 0; +} + +footer i { + color: yellow; +} + +footer a { + color: #3c97bf; + text-decoration: none; +} diff --git a/Sliding registration form/index.html b/Sliding registration form/index.html new file mode 100644 index 0000000..ce69082 --- /dev/null +++ b/Sliding registration form/index.html @@ -0,0 +1,71 @@ + + + + + + + + Registration Form + + +
+
+
+

FILL THE DETAILS

+ + or use your email for registration + + + + + + + + + + I am eligible according to above mentioned criteria. + + +
+
+
+
+

Sign up

+ + or use your account + + + + + +
+
+
+
+
+

STEP-2

+

Enter your personal &professional details and complete profile now!

+ +
+
+

CREATE ACCOUNT

+

Signup to connect with us!

+ +
+
+
+
+ + + + + + diff --git a/Sliding registration form/js/main.js b/Sliding registration form/js/main.js new file mode 100644 index 0000000..89f829d --- /dev/null +++ b/Sliding registration form/js/main.js @@ -0,0 +1,11 @@ +const signUpButton = document.getElementById('signUp'); +const signInButton = document.getElementById('signIn'); +const container = document.getElementById('container'); + +signUpButton.addEventListener('click', () => { + container.classList.add('right-panel-active'); +}); + +signInButton.addEventListener('click', () => { + container.classList.remove('right-panel-active'); +});