diff --git a/README.md b/README.md deleted file mode 100644 index 302bb8f..0000000 --- a/README.md +++ /dev/null @@ -1,5 +0,0 @@ -# Preview -![Design and Development](https://github.com/JunaidShamnad/SignIn-SignUp-Form/blob/main/img/Login%20%26%20Registration%20Form.png) - -# Login-Registration-Form -Responsive Login & Registration Form Using HTML & CSS & JS .Sliding Sign In & Sign Up Form diff --git a/app.js b/app.js deleted file mode 100644 index ea95d29..0000000 --- a/app.js +++ /dev/null @@ -1,11 +0,0 @@ -const sign_in_btn = document.querySelector("#sign-in-btn"); -const sign_up_btn = document.querySelector("#sign-up-btn"); -const container = document.querySelector(".container"); - -sign_up_btn.addEventListener('click', () =>{ - container.classList.add("sign-up-mode"); -}); - -sign_in_btn.addEventListener('click', () =>{ - container.classList.remove("sign-up-mode"); -}); \ No newline at end of file diff --git a/img/Login & Registration Form.png b/img/Login & Registration Form.png deleted file mode 100644 index 0bdec5f..0000000 Binary files a/img/Login & Registration Form.png and /dev/null differ diff --git a/img/log.svg b/img/log.svg deleted file mode 100644 index c2158b4..0000000 --- a/img/log.svg +++ /dev/null @@ -1 +0,0 @@ -maker launch \ No newline at end of file diff --git a/img/register.svg b/img/register.svg deleted file mode 100644 index aadca70..0000000 --- a/img/register.svg +++ /dev/null @@ -1 +0,0 @@ -press play \ No newline at end of file diff --git a/index.html b/index.html deleted file mode 100644 index 1a5508c..0000000 --- a/index.html +++ /dev/null @@ -1,106 +0,0 @@ - - - - - - SignIn&SignUp - - - - - -
-
- -
-
- -
-
-

New here?

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio minus natus est.

- -
- -
- -
-
-

One of us?

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio minus natus est.

- -
- -
-
-
- - - - diff --git a/report.java b/report.java new file mode 100644 index 0000000..f89243a --- /dev/null +++ b/report.java @@ -0,0 +1,5 @@ +public class report { + public static void main(String[] args) { + System.out.println("Report"); + } +} \ No newline at end of file diff --git a/style.css b/style.css deleted file mode 100644 index 0083b16..0000000 --- a/style.css +++ /dev/null @@ -1,400 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap"); - -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body, -input { - font-family: "Poppins", sans-serif; -} - -.container { - position: relative; - width: 100%; - background-color: #fff; - min-height: 100vh; - overflow: hidden; -} - -.forms-container { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; -} - -.signin-signup { - position: absolute; - top: 50%; - transform: translate(-50%, -50%); - left: 75%; - width: 50%; - transition: 1s 0.7s ease-in-out; - display: grid; - grid-template-columns: 1fr; - z-index: 5; -} - -form { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - padding: 0rem 5rem; - transition: all 0.2s 0.7s; - overflow: hidden; - grid-column: 1 / 2; - grid-row: 1 / 2; -} - -form.sign-up-form { - opacity: 0; - z-index: 1; -} - -form.sign-in-form { - z-index: 2; -} - -.title { - font-size: 2.2rem; - color: #444; - margin-bottom: 10px; -} - -.input-field { - max-width: 380px; - width: 100%; - background-color: #f0f0f0; - margin: 10px 0; - height: 55px; - border-radius: 55px; - display: grid; - grid-template-columns: 15% 85%; - padding: 0 0.4rem; - position: relative; -} - -.input-field i { - text-align: center; - line-height: 55px; - color: #acacac; - transition: 0.5s; - font-size: 1.1rem; -} - -.input-field input { - background: none; - outline: none; - border: none; - line-height: 1; - font-weight: 600; - font-size: 1.1rem; - color: #333; -} - -.input-field input::placeholder { - color: #aaa; - font-weight: 500; -} - -.social-text { - padding: 0.7rem 0; - font-size: 1rem; -} - -.social-media { - display: flex; - justify-content: center; -} - -.social-icon { - height: 46px; - width: 46px; - display: flex; - justify-content: center; - align-items: center; - margin: 0 0.45rem; - color: #333; - border-radius: 50%; - border: 1px solid #333; - text-decoration: none; - font-size: 1.1rem; - transition: 0.3s; -} - -.social-icon:hover { - color: #4481eb; - border-color: #4481eb; -} - -.btn { - width: 150px; - background-color: #5995fd; - border: none; - outline: none; - height: 49px; - border-radius: 49px; - color: #fff; - text-transform: uppercase; - font-weight: 600; - margin: 10px 0; - cursor: pointer; - transition: 0.5s; -} - -.btn:hover { - background-color: #4d84e2; -} -.panels-container { - position: absolute; - height: 100%; - width: 100%; - top: 0; - left: 0; - display: grid; - grid-template-columns: repeat(2, 1fr); -} - -.container:before { - content: ""; - position: absolute; - height: 2000px; - width: 2000px; - top: -10%; - right: 48%; - transform: translateY(-50%); - background-image: linear-gradient(-45deg, #4481eb 0%, #04befe 100%); - transition: 1.8s ease-in-out; - border-radius: 50%; - z-index: 6; -} - -.image { - width: 100%; - transition: transform 1.1s ease-in-out; - transition-delay: 0.4s; -} - -.panel { - display: flex; - flex-direction: column; - align-items: flex-end; - justify-content: space-around; - text-align: center; - z-index: 6; -} - -.left-panel { - pointer-events: all; - padding: 3rem 17% 2rem 12%; -} - -.right-panel { - pointer-events: none; - padding: 3rem 12% 2rem 17%; -} - -.panel .content { - color: #fff; - transition: transform 0.9s ease-in-out; - transition-delay: 0.6s; -} - -.panel h3 { - font-weight: 600; - line-height: 1; - font-size: 1.5rem; -} - -.panel p { - font-size: 0.95rem; - padding: 0.7rem 0; -} - -.btn.transparent { - margin: 0; - background: none; - border: 2px solid #fff; - width: 130px; - height: 41px; - font-weight: 600; - font-size: 0.8rem; -} - -.right-panel .image, -.right-panel .content { - transform: translateX(800px); -} - -/* ANIMATION */ - -.container.sign-up-mode:before { - transform: translate(100%, -50%); - right: 52%; -} - -.container.sign-up-mode .left-panel .image, -.container.sign-up-mode .left-panel .content { - transform: translateX(-800px); -} - -.container.sign-up-mode .signin-signup { - left: 25%; -} - -.container.sign-up-mode form.sign-up-form { - opacity: 1; - z-index: 2; -} - -.container.sign-up-mode form.sign-in-form { - opacity: 0; - z-index: 1; -} - -.container.sign-up-mode .right-panel .image, -.container.sign-up-mode .right-panel .content { - transform: translateX(0%); -} - -.container.sign-up-mode .left-panel { - pointer-events: none; -} - -.container.sign-up-mode .right-panel { - pointer-events: all; -} - -@media (max-width: 870px) { - .container { - min-height: 800px; - height: 100vh; - } - .signin-signup { - width: 100%; - top: 95%; - transform: translate(-50%, -100%); - transition: 1s 0.8s ease-in-out; - } - - .signin-signup, - .container.sign-up-mode .signin-signup { - left: 50%; - } - - .panels-container { - grid-template-columns: 1fr; - grid-template-rows: 1fr 2fr 1fr; - } - - .panel { - flex-direction: row; - justify-content: space-around; - align-items: center; - padding: 2.5rem 8%; - grid-column: 1 / 2; - } - - .right-panel { - grid-row: 3 / 4; - } - - .left-panel { - grid-row: 1 / 2; - } - - .image { - width: 200px; - transition: transform 0.9s ease-in-out; - transition-delay: 0.6s; - } - - .panel .content { - padding-right: 15%; - transition: transform 0.9s ease-in-out; - transition-delay: 0.8s; - } - - .panel h3 { - font-size: 1.2rem; - } - - .panel p { - font-size: 0.7rem; - padding: 0.5rem 0; - } - - .btn.transparent { - width: 110px; - height: 35px; - font-size: 0.7rem; - } - - .container:before { - width: 1500px; - height: 1500px; - transform: translateX(-50%); - left: 30%; - bottom: 68%; - right: initial; - top: initial; - transition: 2s ease-in-out; - } - - .container.sign-up-mode:before { - transform: translate(-50%, 100%); - bottom: 32%; - right: initial; - } - - .container.sign-up-mode .left-panel .image, - .container.sign-up-mode .left-panel .content { - transform: translateY(-300px); - } - - .container.sign-up-mode .right-panel .image, - .container.sign-up-mode .right-panel .content { - transform: translateY(0px); - } - - .right-panel .image, - .right-panel .content { - transform: translateY(300px); - } - - .container.sign-up-mode .signin-signup { - top: 5%; - transform: translate(-50%, 0); - } -} - -@media (max-width: 570px) { - form { - padding: 0 1.5rem; - } - - .image { - display: none; - } - .panel .content { - padding: 0.5rem 1rem; - } - .container { - padding: 1.5rem; - } - - .container:before { - bottom: 72%; - left: 50%; - } - - .container.sign-up-mode:before { - bottom: 28%; - left: 50%; - } -} \ No newline at end of file