From b169e26853a9e367b6349781feb2d59d11fde664 Mon Sep 17 00:00:00 2001 From: Jagpreet Singh Khurana <119691733+Jagpreet153@users.noreply.github.com> Date: Thu, 13 Jun 2024 19:49:02 +0530 Subject: [PATCH 1/3] made create account page responsive --- src/Components/CreateAccount.css | 425 ++++++++++--------------------- yarn.lock | 4 +- 2 files changed, 142 insertions(+), 287 deletions(-) diff --git a/src/Components/CreateAccount.css b/src/Components/CreateAccount.css index 7fc7f143..849c3340 100644 --- a/src/Components/CreateAccount.css +++ b/src/Components/CreateAccount.css @@ -1,288 +1,143 @@ -/* General styles */ - -body { - background-repeat: no-repeat; - background-size: cover; - background-position: center center; - - color: #fff; - } - - .create-account-container { - display: flex; - justify-content: center; - align-items: center; - height: 100vh; - } - - .create-account-form { - background-color: rgba(0,0,0,0.26); - padding: 2rem; - border-radius: 25px; - border: 3px solid cyan; - width: 67vw; - height: 42vw; - position: relative; - animation: borderAnimation 8s infinite; - } - @keyframes borderAnimation { - 0% { border-color: cyan; } - 50% { border-color: rgb(235, 235, 15); } - 25% { border-color: #cf00a3; } - 75% { border-color: #04aaac; } - 100% { border-color: cyan; } - } - h1{ - font-family: "Roboto", sans-serif; - color: #fff; - text-align: center; - margin-top: 1.5vw; - font-size: 3rem; - font-style:normal; - font-weight: 700; - line-height: normal; - - - } - p{ - font-family: "Roboto", sans-serif; - margin-top:.5vw; - } - p span{ - color: #78a9fa; - font-size: 200px; - font-weight: bold; - } - /* Form steps */ - .form-steps { - margin-bottom: 1.5rem; - } - - .step { - display: flex; - align-items: center; - margin-bottom: 0.5rem; - position: relative; - } - - .step:not(:last-child)::after { - content: ""; - position: absolute; - top: -10px; /* Adjust as needed to align with circles */ - left: 90%; - width: 100%; /* Adjust as needed */ - height: 2px; /* Adjust as needed */ - background: #cf00a3; /* Adjust as needed */ - } - - .step::before { - content: attr(data-step); - position: absolute; - top: -20px; /* Adjust as needed */ - left: 50%; - transform: translateX(-50%); - width: 20px; /* Adjust as needed */ - height: 20px; /* Adjust as needed */ - border-radius: 50%; - background: #ACB6C7; - color: #fff; - text-align: center; - line-height: 20px; /* Adjust as needed */ - z-index: 1; /* Add this to make the circles appear above the lines */ - } - .step span { - flex: 1; - color: #cf00a3; - } - - .step input { - flex: 2; - padding: 0.5rem; - border-radius: 0.25rem; - border: none; - } - - .step.active span { - font-weight: bold; - } - - .step.step-1[data-step="1"]::before { - background-color: #4285F4; /* Color when step 1 is active */ - } - - - .step.step-2[data-step="1"]::before { - background-color: #87fc93; /* Color when step 2 is active */ - } - - .step.step-2[data-step="2"]::before { - background-color: #4285F4; /* Color when step 2 is active */ - } - .step.step-3[data-step="1"]::before { - background-color: #87fc93; /* Color when step 3 is active */ - } - - .step.step-2[data-step="3"]::before { - background-color: #87fc93; - } - .step.step-3[data-step="3"]::before { - background-color: #4285F4; /* Color when step 3 is active */ - } - - +.create-account-container { + display: flex; + justify-content: center; + align-items: center; + padding: 3rem 0 3rem 0; +} + + +.create-account-form { + background-color: rgba(0,0,0,0.26); + padding: 2rem; + border-radius: 25px; + border: 3px solid cyan; + animation: borderAnimation 8s infinite; +} + +@keyframes borderAnimation { + 0% { border-color: cyan; } + 50% { border-color: rgb(235, 235, 15); } + 25% { border-color: #cf00a3; } + 75% { border-color: #04aaac; } + 100% { border-color: cyan; } +} + + +.step::before { + content: attr(data-step); + position: absolute; + top: -20px; /* Adjust as needed */ + left: 50%; + transform: translateX(-50%); + width: 20px; /* Adjust as needed */ + height: 20px; /* Adjust as needed */ + border-radius: 50%; + background: #ACB6C7; + color: #fff; + text-align: center; + line-height: 20px; /* Adjust as needed */ + z-index: 1; /* Add this to make the circles appear above the lines */ +} +.step span { + flex: 1; + color: #cf00a3; +} + +.step input { + flex: 2; + padding: 0.5rem; + border-radius: 0.25rem; + border: none; +} + +.step.active span { + font-weight: bold; +} + +.step.step-1[data-step="1"]::before { + background-color: #4285F4; /* Color when step 1 is active */ +} + + +.step.step-2[data-step="1"]::before { + background-color: #87fc93; /* Color when step 2 is active */ +} + +.step.step-2[data-step="2"]::before { + background-color: #4285F4; /* Color when step 2 is active */ +} +.step.step-3[data-step="1"]::before { + background-color: #87fc93; /* Color when step 3 is active */ +} + +.step.step-2[data-step="3"]::before { + background-color: #87fc93; +} +.step.step-3[data-step="3"]::before { + background-color: #4285F4; /* Color when step 3 is active */ +} /* Buttons */ - .next-btn { - background-color:rgba(9, 2, 34, 0.2); - color: #78a9fa; - border: 1px solid #fff; - padding: 0.5rem 1rem; - border-radius: 0.25rem; - cursor: pointer; - transition: background-color 0.3s ease; - width: 60%; - margin: 1rem auto; - display: block; - border-radius: 40px; - height: 3vw; - font-size: 1.5rem; - } - - .next-btn:hover { - background-color: #b21783; - } - - .signup-options { - display: flex; - justify-content: center; - - } - - .facebook-btn, - .google-btn { - background-color: rgba(9, 2, 34, 0.2); /* 20% of #090222 */ - color: #fff; - border: 1px solid #fff; - padding: 0.5rem 1rem; - border-radius: 0.25rem; - cursor: pointer; - transition: background-color 0.3s ease; - width: 40%; - margin: 1rem ; - font-size: 1.5rem; - text-align: center; /* Add this line */ - border-radius: 40px; - height: 3vw; - font-family: "Roboto", sans-serif; - - } - - .facebook-btn:hover, - .google-btn:hover { - background-color: #b21783; - } - .facebook-btn::before { - content: ''; - display: inline-block; - height: 30px; - width: 30px; - background-image: url('../../public/1.png'); - background-repeat: no-repeat; - background-size: contain; - vertical-align: middle; - - } - - .google-btn::before { - content: ''; - display: inline-block; - height: 30px; - width: 30px; - background-image: url('../../public/2.png'); - background-repeat: no-repeat; - background-size: contain; - margin-right: 10px; - vertical-align: middle; - } - .facebook-btn i, - .google-btn i { - margin-right: 0.5rem; - } - .flex-container { - display: flex; - justify-content: space-between; - align-items: center; - margin-top: 20px; - padding: 0 8vw 0px 8vw; - font-family: "Roboto", sans-serif; - } - .input-field { - display: block; - width: 70%; /* Adjust as needed */ - height: 50px; /* Adjust as needed */ - margin: 20px auto; - margin-top: 0px; /* Adjust as needed */ - border: 2px solid cyan; /* Adjust as needed */ - border-radius: 10px; /* Adjust as needed */ - padding: 10px; /* Adjust as needed */ - background-color: transparent; - color: #fff; - padding-top: 0; - font-family: "Roboto", sans-serif; - font-size: 1.5rem; - } - .input-field::placeholder { - color: #ffffff; - font-size:1.3rem; - font-family: "Roboto", sans-serif; - line-height: 50px; - } - .input-field1 { - display: block; - width: 50%; /* Decreased width to 50% */ - height: 50px; /* Adjust as needed */ - /* margin: 20px auto; */ - margin-top: 0px; /* Adjust as needed */ - border: 2px solid cyan; /* Adjust as needed */ - border-radius: 10px; /* Adjust as needed */ - padding: 10px; /* Adjust as needed */ - margin-left: 9vw; - - background-color: transparent; - color: #fff; - padding-top: 0; - font-family: "Roboto", sans-serif; - font-size: 1.5rem; - } - .input-field1::placeholder { - color: #ffffff; - font-size:1.3rem; - font-family: "Roboto", sans-serif; - line-height: 50px; - } - .email{ - font-size:2rem; - margin-left: 22.5vw; - font-family: "Roboto", sans-serif; - } - .separator { - margin-top: 4vw; - display: flex; - align-items: center; - text-align: center; - color: #fff; - font-family: "Roboto", sans-serif; - padding: 0 150px; - font-size: 1.5rem; - } - - .separator > hr { - flex-grow: 1; - border: none; - border-top: 1px solid #fff; - } - - .separator > span { - padding: 0 10px; - } \ No newline at end of file +.next-btn { + background-color:rgba(9, 2, 34, 0.2); + color: #78a9fa; + border: 1px solid #fff; + padding: 0.5rem 1rem; + border-radius: 0.25rem; + cursor: pointer; + transition: background-color 0.3s ease; + margin: 1rem auto; + display: block; + border-radius: 40px; + font-size: 1.5rem; +} + +.next-btn:hover { + background-color: #b21783; +} + +.signup-options { + display: flex; + justify-content: center; + gap: 3rem; +} + +.facebook-btn, +.google-btn { + background-color: rgba(9, 2, 34, 0.2); /* 20% of #090222 */ + color: #fff; + border: 2px solid #fff; + cursor: pointer; + transition: background-color 0.3s ease; + text-align: center; /* Add this line */ + font-family: "Roboto", sans-serif; + +} + +.facebook-btn:hover, +.google-btn:hover { + background-color: #b21783; +} +.facebook-btn::before { + content: ''; + background-image: url('../../public/1.png'); + background-repeat: no-repeat; + background-size: contain; + vertical-align: middle; + +} + +.google-btn::before { + content: ''; + background-image: url('../../public/2.png'); + background-repeat: no-repeat; + background-size: contain; + vertical-align: middle; +} +.input-field::placeholder { + color: grey; + font-size:1rem; + font-family: "Roboto", sans-serif; + line-height: 50px; +} diff --git a/yarn.lock b/yarn.lock index 606e0234..f5c84b51 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3588,7 +3588,7 @@ brace-expansion@^2.0.1: braces@^3.0.2, braces@~3.0.2: version "3.0.3" - resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789" + resolved "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz" integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA== dependencies: fill-range "^7.1.1" @@ -5269,7 +5269,7 @@ filesize@^8.0.6: fill-range@^7.1.1: version "7.1.1" - resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292" + resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz" integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg== dependencies: to-regex-range "^5.0.1" From f7846e455b249747b6b968c3ffce421a1543cecf Mon Sep 17 00:00:00 2001 From: Sneha Menat Date: Sat, 15 Jun 2024 14:49:55 +0530 Subject: [PATCH 2/3] resolve issue of alignment in main page --- package-lock.json | 2 +- src/Components/MainContainer.css | 30 ++++++++++++++++++++++++------ src/Components/MainContainer.js | 4 ++-- yarn.lock | 6 +++--- 4 files changed, 30 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index 07f70a40..2de6d6be 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36361,4 +36361,4 @@ "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==" } } -} \ No newline at end of file +} diff --git a/src/Components/MainContainer.css b/src/Components/MainContainer.css index 210bf9b4..d044773d 100644 --- a/src/Components/MainContainer.css +++ b/src/Components/MainContainer.css @@ -7,7 +7,7 @@ } .maincontainer .left { - width: calc(100% - 30%); + width: 70%; overflow-y: scroll; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } @@ -70,9 +70,9 @@ .maincontainer .left .cards { background: #19162c; - padding: 10px; + /* padding: 10px; */ box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4); - margin-top: 20px; + /* margin-top: 20px; */ border-radius: 10px; } @@ -111,20 +111,29 @@ flex-wrap: wrap; } .card_main { - height: 365px; + height: 355px; } + .card_main_img { width: 100%; - height: 200px; + height: 125px; + border-radius: 0px; + object-fit: cover; } + .maincontainer .left .cards main .card_main { background: #252041; border-radius: 10px; max-width: 260px; - padding-bottom: 20px; + padding: 20px 10px; /* Adjust padding as needed */ margin: 15px 10px; + overflow: hidden; + display: flex; + flex-direction: column; + justify-content: space-between; } + .maincontainer .left .cards main .card_main .card_main_img { max-width: 100%; object-fit: cover; @@ -234,6 +243,8 @@ .maincontainer .right .topCard .topCard_name h2, .maincontainer .right .bottom_card .bottomCard_name h2 { color: #d1d0d5; + font-size: larger; + font-weight: 900; } .maincontainer .right .topCard .topCard_name a, @@ -246,6 +257,12 @@ padding: 5px 10px; } +.maincontainer .right .topCard .earning span { + color: red; + font-size: small; +} + + .maincontainer .right .topCard .earning p { margin: 8px 0; padding: 10px; @@ -298,6 +315,7 @@ } .maincontainer .right .bottom_card .topSeller .topSellerName span { + color:red; display: block; font-size: 12px; } diff --git a/src/Components/MainContainer.js b/src/Components/MainContainer.js index 7fc99fd7..57976a05 100644 --- a/src/Components/MainContainer.js +++ b/src/Components/MainContainer.js @@ -64,8 +64,8 @@ function MainContainer() {
-

Feed

- +

Feed

+ Popular
diff --git a/yarn.lock b/yarn.lock index 5d83fc74..f5c84b51 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3588,7 +3588,7 @@ brace-expansion@^2.0.1: braces@^3.0.2, braces@~3.0.2: version "3.0.3" - resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789" + resolved "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz" integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA== dependencies: fill-range "^7.1.1" @@ -5269,7 +5269,7 @@ filesize@^8.0.6: fill-range@^7.1.1: version "7.1.1" - resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292" + resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz" integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg== dependencies: to-regex-range "^5.0.1" @@ -10924,4 +10924,4 @@ yargs@^17.3.1: yocto-queue@^0.1.0: version "0.1.0" resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz" - integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== \ No newline at end of file + integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== From b643b0f8b30d84c17aa0f252b7584ced8b32125e Mon Sep 17 00:00:00 2001 From: Sneha Menat Date: Sat, 15 Jun 2024 15:03:21 +0530 Subject: [PATCH 3/3] final alignment changes --- src/Components/MainContainer.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/Components/MainContainer.css b/src/Components/MainContainer.css index d044773d..7f25ce17 100644 --- a/src/Components/MainContainer.css +++ b/src/Components/MainContainer.css @@ -70,9 +70,9 @@ .maincontainer .left .cards { background: #19162c; - /* padding: 10px; */ + padding: 10px; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4); - /* margin-top: 20px; */ + margin-top: 20px; border-radius: 10px; } @@ -116,16 +116,16 @@ .card_main_img { width: 100%; - height: 125px; - border-radius: 0px; + height: 135px; object-fit: cover; } .maincontainer .left .cards main .card_main { background: #252041; - border-radius: 10px; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; max-width: 260px; - padding: 20px 10px; /* Adjust padding as needed */ + padding: 0px 0px; margin: 15px 10px; overflow: hidden; display: flex;