diff --git a/components/signIn/index.html b/components/signIn/index.html index 629d1c1..c0efed7 100644 --- a/components/signIn/index.html +++ b/components/signIn/index.html @@ -14,13 +14,17 @@

Sign In

-
+

-
+


-
+
+ + + Forgot Password?
+ diff --git a/components/signIn/style.css b/components/signIn/style.css index 4a8ef52..ec409bf 100644 --- a/components/signIn/style.css +++ b/components/signIn/style.css @@ -148,6 +148,7 @@ h2{ label{ margin-top: 1rem; + margin-right: 1.5rem; font-size: .85rem; } @@ -166,3 +167,16 @@ input[type=submit]:hover{ cursor: pointer; } +a span { + font-weight: 300 !important; + +} + +span{ + font-size: 1rem; + margin-right: .2rem; +} + +div{ + margin-top: 1rem; +} diff --git a/components/signIn_2/app.js b/components/signIn_2/app.js new file mode 100644 index 0000000..95c30a8 --- /dev/null +++ b/components/signIn_2/app.js @@ -0,0 +1,13 @@ +console.log("Hello World!") + +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"); +}); \ No newline at end of file diff --git a/components/signIn_2/index.html b/components/signIn_2/index.html new file mode 100644 index 0000000..1bc0722 --- /dev/null +++ b/components/signIn_2/index.html @@ -0,0 +1,59 @@ + + + + + + Document + + + + +
+
+
+

Create Account

+ + or use your email for registration + + + + +
+
+
+
+

Sign in

+ + or use your account + + + Forgot your password? + +
+
+
+
+
+

Welcome Back!

+

To keep connected with us please login with your personal info

+ +
+
+

Hello, Friend!

+

Enter your personal details and start journey with us

+ +
+
+
+
+ + + \ No newline at end of file diff --git a/components/signIn_2/style.css b/components/signIn_2/style.css new file mode 100644 index 0000000..dc9c87f --- /dev/null +++ b/components/signIn_2/style.css @@ -0,0 +1,346 @@ +:root { +/* Font Sizes */ + --fs-100: 0.625rem; + --fs-200: 0.75rem; + --fs-300: 0.875rem; + --fs-400: 1rem; + --fs-500: 1.125rem; + --fs-600: 1.25rem; + --fs-700: 1.5rem; + --fs-800: 2.5rem; + --fs-900: 3.5rem; + + --fw-regular: 400; + --fw-semi-bold: 500; + --fw-bold: 700; + + /* Color variables */ + --clr-bg-ltheme: #edebe9; + --clr-text-ltheme: #1b1b1b; + --clr-accent-ltheme: #ff8000; + --clr-primary-ltheme: #d4d4d2; + --clr-secondary-ltheme: #babcbb; + --clr-link-ltheme: blue; + --clr-border-ltheme: blue; + + --clr-bg-dtheme: #121212; + --clr-text-dtheme: #edebe9; + --clr-accent-dtheme: #3a3b9c; + --clr-primary-dtheme: #1b1b1b; + --clr-secondary-dtheme: #2d2d2d; + --clr-link-dtheme: blue; + --clr-border-dtheme: blue; + + /* General Colors */ + --black: #000; /* Black */ + --white: #fff; /* White */ + --clr-000: #636363; + --clr-100: #5A5A5A; + --clr-200: #515151; + --clr-300: #484848; + --clr-400: #3F3F3F; + --clr-500: #363636; + --clr-600: #2D2D2D; + --clr-700: #242424; + --clr-800: #1B1B1B; + --clr-900: #121212; + + /* Semantic Colors */ + --clr-success: #118c11; + --clr-info: #17a2b8; + --clr-warning: #ff8000; + --clr-danger: #d00000; +} + +/* CSS Resets */ +*, *::before, *::after { + box-sizing: border-box; +} + +/* Remove default margins. */ +* { + margin: 0; + padding: 0; +} + +/* Set core root defaults */ +html:focus-within { + scroll-behavior: smooth; +} + +/* Make images easiser to work with. */ +img,picture,svg, video { +display: block; +max-width: 100%; +} + +/* Remove list styles (bullets/numbers) */ +ol, ul, menu { + list-style: none; +} + +/* Form elements inherit font styles. */ +input, textarea, button, select { + font: inherit; +} + +/* Motion Reducted Media Query */ +@media screen and + (prefers-reduced-motion: reduce), + (update: slow) { + * { + animation-duration: 0.001ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.001ms !important; + } +} + +/* Screen reader friendly hidden. */ +.visually-hidden:not(:focus):not(:active) { + border: 0; + clip: rect(0 0 0 0); + height: auto; + margin: 0; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + white-space: nowrap; +} + +/* Body and core Themes */ + +body{ + display: grid; + min-width: 100vw; + min-height: 100vh; + align-items: start; + justify-items: center; + line-height: 1.5rem; + background-color: var(--clr-bg-ltheme); + color: var(--clr-text-ltheme); +} + +@media (prefers-color-scheme: dark) { + body{ + background-color: var(--clr-bg-dtheme); + color: var(--clr-text-dtheme); + } +} + +h1 { + margin: 0; + color: var(--clr-400); +} + +h2 { + text-align: center; + color: var(--clr-secondary-dtheme); +} + +p { + font-size: 1rem; + font-weight: 100; + line-height: 20px; + letter-spacing: 0.5px; + margin: 20px 0 30px; +} + +span.icon { + font-size: 1.25rem; +} + +span { + font-size: .8rem; + color: var(--clr-secondary-dtheme); +} + +a { + color: #333; + font-size: 14px; + text-decoration: none; + margin: 15px 0; +} + +button { + border-radius: 20px; + border: 1px solid var(--clr-success); + background-color: var(--clr-success); + 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: 480px; +} + +.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: var(--clr-accent-dtheme); + background: -webkit-linear-gradient(to right, var(--clr-success), var(--clr-info)); + background: linear-gradient(to right, var(--clr-success), var(--clr-info)); + background-repeat: no-repeat; + background-size: cover; + background-position: 0 0; + color: #FFFFFF; + 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; +} +