From 26dfd2395d5e406448c57d2f4f317eb80fb60775 Mon Sep 17 00:00:00 2001 From: Subhajit-2023-44 Date: Sat, 9 Nov 2024 04:31:45 +0530 Subject: [PATCH] done --- index.html | 2 +- signup.css | 445 ++++++++++++++++++++++++++++++++++++++++++++++++++++ signup.html | 397 ++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 843 insertions(+), 1 deletion(-) create mode 100644 signup.css create mode 100644 signup.html diff --git a/index.html b/index.html index bba4d7de..7ad4b041 100644 --- a/index.html +++ b/index.html @@ -3941,7 +3941,7 @@

XYZ
Book Lover

Events
  • More diff --git a/signup.css b/signup.css new file mode 100644 index 00000000..7327b7b8 --- /dev/null +++ b/signup.css @@ -0,0 +1,445 @@ +@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; +} + +#signup-success-message { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: rgba(0, 128, 0, 0.8); /* Green with translucency */ + color: white; + font-size: 18px; + text-align: center; + padding: 20px 40px; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + display: none; /* Hidden by default */ + z-index: 1000; +} +.hidden { + display: none; +} + + +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: space-between; + align-items: center; +} + +.social-icon { + margin: 0 10px; +} + +.social-icon i { + transition: transform 0.2s ease-in-out; +} + +.social-icon:hover i { + transform: scale(1.1); +} + +.btn { + width: 150px; + background-color: hsl(356.81deg 79.02% 71.96%); + 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: hsl(356.81deg 79.02% 71.96%); +} +.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, hsl(356.81deg 79.02% 71.96%) 0%, hsl(356.81deg 79.02% 71.96%) 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; + justify-content: space-around; + text-align: center; + z-index: 6; +} + +.left-panel { + pointer-events: all; + padding: 4rem 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%; + } +} +.homeBtn { + position: absolute; + top: 20px; + left: 20px; + background: linear-gradient(hwb(357 6% 30%), #d26d6d); + color: #000; + padding: 10px; + border-radius: 10px; + cursor: pointer; + transition: 0.3s; + z-index: 111; + text-decoration: none; + border: 1px solid hsl(356.81deg 79.02% 71.96%); +} + +.homeBtn:hover { + background: #ffffff; + color: hsl(356.81deg 79.02% 71.96%); + border: 1px solid hsl(356.81deg 79.02% 71.96%); + transform: none; +} +.circle { + height: 35px; + width: 35px; + border-radius: 24px; + background-color: black; + position: fixed; + top: 0; + left: 0; + pointer-events: none; + z-index: 99999999; + /* Stays on top of all elements */ +} \ No newline at end of file diff --git a/signup.html b/signup.html new file mode 100644 index 00000000..b6c13058 --- /dev/null +++ b/signup.html @@ -0,0 +1,397 @@ + + + + + + + Register & Login + + + + + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    + +
    + +
    + + + + + +
    +
    +

    New here ?

    +

    + Create your account. +

    + + +
    + +
    +
    +
    +

    One of us ?

    +

    Welcome to our community

    + +
    + +
    +
    +
    + + + + + + + + + + \ No newline at end of file