From 0b0ebff9a5e87c3f1f225a6cb501c60346e039e3 Mon Sep 17 00:00:00 2001 From: azimjonking Date: Tue, 16 Jan 2024 23:15:07 +0200 Subject: [PATCH] media signup and login --- src/App.js | 4 +- src/component/header/Header.js | 2 +- src/{pages/profile => }/img/bg2.jpg | Bin src/pages/about/About.js | 12 -- src/pages/about/about.css | 3 - src/pages/advertisement/Advertisement.js | 12 ++ src/pages/advertisement/advertisement.css | 3 + src/pages/login/Login.js | 62 +++++----- src/pages/login/login.css | 131 ++++++++++++-------- src/pages/payment/payment.css | 42 +++++-- src/pages/signup/Signup.js | 2 +- src/pages/signup/signup.css | 142 ++++++++++++++-------- 12 files changed, 259 insertions(+), 156 deletions(-) rename src/{pages/profile => }/img/bg2.jpg (100%) delete mode 100644 src/pages/about/About.js delete mode 100644 src/pages/about/about.css create mode 100644 src/pages/advertisement/Advertisement.js create mode 100644 src/pages/advertisement/advertisement.css diff --git a/src/App.js b/src/App.js index f3a9c4c..c87993e 100644 --- a/src/App.js +++ b/src/App.js @@ -4,7 +4,7 @@ import './App.css'; import Header from './component/header/Header'; import Footer from './component/footer/Footer'; import Home from './pages/home/Home'; -import About from './pages/about/About'; +import Advertisement from './pages/advertisement/Advertisement'; import Contact from './pages/contact/Contact'; import Login from './pages/login/Login'; import Signup from './pages/signup/Signup'; @@ -23,7 +23,7 @@ function App() {
} /> - } /> + } /> } /> } /> } /> diff --git a/src/component/header/Header.js b/src/component/header/Header.js index 2ea5fd2..0390ab9 100644 --- a/src/component/header/Header.js +++ b/src/component/header/Header.js @@ -26,7 +26,7 @@ const Header = () => {
  • - Biz haqimizda + E'lonlar
  • Bog'lanish diff --git a/src/pages/profile/img/bg2.jpg b/src/img/bg2.jpg similarity index 100% rename from src/pages/profile/img/bg2.jpg rename to src/img/bg2.jpg diff --git a/src/pages/about/About.js b/src/pages/about/About.js deleted file mode 100644 index d8e3b71..0000000 --- a/src/pages/about/About.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import "./about.css"; - -const About = () => { - return ( -
    -

    About

    -
    - ) -} - -export default About diff --git a/src/pages/about/about.css b/src/pages/about/about.css deleted file mode 100644 index ace124f..0000000 --- a/src/pages/about/about.css +++ /dev/null @@ -1,3 +0,0 @@ -.about-container { - padding-top: 100px; -} \ No newline at end of file diff --git a/src/pages/advertisement/Advertisement.js b/src/pages/advertisement/Advertisement.js new file mode 100644 index 0000000..e586086 --- /dev/null +++ b/src/pages/advertisement/Advertisement.js @@ -0,0 +1,12 @@ +import React from 'react'; +import "./advertisement.css"; + +const Advertisement = () => { + return ( +
    +

    Advertisement

    +
    + ) +} + +export default Advertisement; diff --git a/src/pages/advertisement/advertisement.css b/src/pages/advertisement/advertisement.css new file mode 100644 index 0000000..263fda0 --- /dev/null +++ b/src/pages/advertisement/advertisement.css @@ -0,0 +1,3 @@ +.advertisement-container { + padding-top: 100px; +} \ No newline at end of file diff --git a/src/pages/login/Login.js b/src/pages/login/Login.js index 507f61e..fe7ae37 100644 --- a/src/pages/login/Login.js +++ b/src/pages/login/Login.js @@ -1,61 +1,61 @@ -import React from 'react'; -import './login.css'; -import logo1 from '../../component/header/logo1_1.png'; -import { NavLink, Link } from 'react-router-dom'; +import React from "react"; +import "./login.css"; +import logo1 from "../../component/header/logo1_1.png"; +import { NavLink, Link } from "react-router-dom"; const Login = () => { return ( -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    -
    +
    - logo + logo

    Hush kelibsiz

    -
    -
    - - + +
    + +
    -
    - - +
    + +
    -
    +
    - -
    -
    +
    -
    - -
    - -
    +
    - + ASOSIYGA QAYTISH
    -
    +
    -
    -
    +
    +
    diff --git a/src/pages/login/login.css b/src/pages/login/login.css index 9e97d04..81b1429 100644 --- a/src/pages/login/login.css +++ b/src/pages/login/login.css @@ -1,4 +1,18 @@ -.login-container { +.login-section { + padding-top: 90px; + padding-bottom: 3vw; + width: 100%; + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + + background: url("../../img/bg2.jpg") no-repeat center ; + background-size: cover; +} +.login-section .login-container { + width: 400px; + padding: 10px; font-family: Arial, Helvetica, sans-serif; background-image: linear-gradient( to right top, @@ -9,29 +23,28 @@ #503653 ); border-radius: 25px; - padding: 10px; + box-shadow: 5px 5px 10px #000000, -5px -5px 10px #2b2b2b; /* Adjusted to create a subtle depth */ color: white; - max-width: 400px; - margin: -1rem 0.8rem 1rem 0.8rem; overflow: hidden; - height: 80vh; } -.login-border { +.login-section .login-border { + width: 100%; + display: flex; + flex-direction: column; border: 2px solid #7069b1; border-top: none; border-radius: 25px; - height: 100%; position: relative; } -.line { +.login-section .line { display: flex; gap: 1rem; } -.line hr { +.login-section .line hr { margin: auto; border: 0; height: 2px; @@ -42,7 +55,7 @@ margin-bottom: -1rem; } -.corner-item { +.login-section .corner-item { position: absolute; background-image: linear-gradient( to bottom, @@ -61,55 +74,60 @@ border: 1px solid black; } -.top-left { +.login-section .top-left { top: 0.9rem; /* Half of the height to ensure it's centered on the corner */ left: 0.8rem; /* Half of the width to ensure it's centered on the corner */ } -.top-right { +.login-section .top-right { top: 0.9rem; right: 0.8rem; } -.bottom-left { +.login-section .bottom-left { bottom: 0.9rem; left: 0.8rem; background-image: linear-gradient(to bottom, #df41bc, #c04dda, #8e5df5); box-shadow: none; } -.bottom-right { +.login-section .bottom-right { bottom: 0.7rem; right: 0.8rem; background-image: linear-gradient(to bottom, #df41bc, #c04dda, #8e5df5); box-shadow: none; } -.logo-in { +.login-section .logo-in { width: 3rem; height: 3rem; - margin-left: 45%; - margin-top: 1rem; + margin: 0 auto; } -h2 { +.login-section h2 { font-family: Arial, Helvetica, sans-serif; text-align: center; - font-size: 2.5rem; + font-size: 1.8rem; margin-top: 1rem; - margin-bottom: 20px; + margin-bottom: 1rem; letter-spacing: 1px; } -.login-form { - margin: 1rem; +.login-section .login-form { + padding: 1rem; + width: 100%; + display: flex; + flex-direction: column; } -.input-container { - margin-bottom: 15px; +.login-section .input-container { + width: 100%; + display: flex; + flex-direction: column; + margin-bottom: 1rem; } -.input-container label { +.login-section .input-container label { text-transform: uppercase; display: block; font-size: 0.8rem; @@ -117,7 +135,7 @@ h2 { margin-bottom: 0.5rem; } -.input-container input { +.login-section .input-container input { width: 100%; padding: 10px; border-radius: 25px; @@ -127,7 +145,7 @@ h2 { border: 2px solid white; } -.vertical-hr { +.login-section .vertical-hr { margin-top: 0.5rem; margin-right: 0.5rem; border-radius: 10px; @@ -136,7 +154,7 @@ h2 { transform-origin: left; } -.horizontal-hr { +.login-section .horizontal-hr { border-radius: 5px; width: 7rem; margin: auto; @@ -146,16 +164,25 @@ h2 { background-image: linear-gradient(to right, #443e5b, #4c426c, #d4abb6); } -.login-footer { +.login-section .login-footer { + width: 100%; display: flex; - justify-content: space-between; - margin-bottom: 15px; - margin-top: 2rem; + align-items: flex-end; + gap: 1rem; + margin-bottom: 2rem; } -.login-footer button { +.login-section .login-footer > div { + width: 50%; + height: 100%; + display: flex; + flex-direction: column; +} +.login-section .login-footer button { border: none; - padding: 13px 20px; + padding: 10px 10px; + width: 100%; + margin-top: 1.8rem; border-radius: 20px; color: white; background-image: linear-gradient( @@ -168,32 +195,29 @@ h2 { ); box-shadow: 4px 4px 6px #1b1b1b, -4px -4px 6px #3b3b3b; /* Neumorphism effect */ cursor: pointer; - width: 9rem; - margin-top: 1rem; border-top: 2px solid #d6b1d6; /* Light blue top border */ border-right: 2px solid #d969c6; /* Regular blue for the right border */ border-bottom: 2px solid #775fcf; /* Regular blue for the bottom border */ border-left: 2px solid #775fcf; /* Regular blue for the left border */ } -.royhat-login { - margin-top: 2rem !important; - margin-right: -0.35rem; -} -.forgot-password { +.login-section .back-home a { display: block; text-align: center; color: #aaa; text-decoration: none; } +.login-section .back-home a:hover { + color: #fff; +} -.login-main { - width: 19rem !important; - font-size: 1.9rem; +.login-section .login-main { + width: 100%; + font-size: 1.2rem; font-weight: 800; letter-spacing: 2px; - padding: 10px; + padding: 5px; border-radius: 25px; margin-bottom: 3rem; border-top: 2px solid #d6b1d6; /* Light blue top border */ @@ -210,11 +234,11 @@ h2 { ); } -.back-home { +.login-section .back-home { display: flex; } -.back-home hr { +.login-section .back-home hr { margin: auto; border: 0; height: 2px; @@ -229,7 +253,7 @@ h2 { box-shadow: 0px -1px 5px rgba(0, 0, 0, 0.5); } -.bottom-line { +.login-section .bottom-line { margin: auto; border: 0; height: 2px; @@ -244,3 +268,14 @@ h2 { box-shadow: 0px -1px 5px rgba(0, 0, 0, 0.5); margin-top: 1rem; } + + +@media screen and (max-width: 400px) { + .login-section { + padding-left: 15px; + padding-right: 15px; + } + .login-section .login-container { + width: 100%; + } +} \ No newline at end of file diff --git a/src/pages/payment/payment.css b/src/pages/payment/payment.css index cae3c92..8534566 100644 --- a/src/pages/payment/payment.css +++ b/src/pages/payment/payment.css @@ -14,9 +14,9 @@ .payment-container { padding: 1rem; width: 400px; - box-shadow: 0 0 8px #fff; + box-shadow: 0 0 4px #fff; border-radius: 10px; - background: rgba(0, 0, 0, 0.8); + background: linear-gradient(to top right, #160214, #4d1a7a, #893b88, #160214); display: flex; flex-direction: column; align-items: center; @@ -30,8 +30,15 @@ font-weight: bold; text-align: center; border-radius: 10px; - box-shadow: 0 0 8px #fff; - background: rgb(2, 4, 37); + box-shadow: 0 0 8px #000; + background-image: linear-gradient( + to left bottom, + #88347b, + #6f2b75, + #54236e, + #371c65, + #10165c + ); } .payment-content { @@ -42,8 +49,16 @@ align-items: center; gap: 0.6rem; border-radius: 10px; - box-shadow: 0 0 8px #fff; - background: rgb(2, 4, 37); + box-shadow: 0 0 8px #000; + /* background: linear-gradient(to top right, #160214, #4d1a7a, #893b88, #160214); */ + background-image: linear-gradient( + to left bottom, + #88347b, + #6f2b75, + #54236e, + #371c65, + #10165c + ); } .payment-content > p { @@ -111,9 +126,18 @@ font-size: 1.2rem; width: 100%; border-radius: 10px; - box-shadow: 0 0 8px #fff; - background: rgb(2, 4, 37); + box-shadow: 0 0 4px #000; + background-image: linear-gradient( + to left bottom, + #88347b, + #6f2b75, + #54236e, + #371c65, + #10165c + ); + cursor: pointer; } .payment-container .payment-btn:hover { - background: rgb(5, 10, 93); + background: linear-gradient(to top right, #160214, #7731b4, #7a2f79, #5d0854); + box-shadow: 0 0 8px #160214; } diff --git a/src/pages/signup/Signup.js b/src/pages/signup/Signup.js index 2ce3f5c..ac73fe6 100644 --- a/src/pages/signup/Signup.js +++ b/src/pages/signup/Signup.js @@ -5,7 +5,7 @@ import { NavLink, Link } from 'react-router-dom'; const Signup = () => { return ( -
    +
    diff --git a/src/pages/signup/signup.css b/src/pages/signup/signup.css index def7172..fecc5d3 100644 --- a/src/pages/signup/signup.css +++ b/src/pages/signup/signup.css @@ -1,4 +1,18 @@ +.login-section { + padding-top: 90px; + padding-bottom: 3vw; + width: 100%; + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + + background: url("../../img/bg2.jpg") no-repeat center ; + background-size: cover; +} .login-container-signup { + width: 400px; + padding: 10px; font-family: Arial, Helvetica, sans-serif; background-image: linear-gradient( to right top, @@ -9,29 +23,27 @@ #503653 ); border-radius: 25px; - padding: 10px; box-shadow: 5px 5px 10px #000000, -5px -5px 10px #2b2b2b; /* Adjusted to create a subtle depth */ color: white; - max-width: 400px; - margin: -1rem 0.8rem 1rem 0.8rem; overflow: hidden; - height: 95vh; } -.login-border { +.login-section .login-border { + width: 100%; + display: flex; + flex-direction: column; border: 2px solid #7069b1; border-top: none; border-radius: 25px; - height: 100%; position: relative; } -.line { +.login-section .line { display: flex; gap: 1rem; } -.line hr { +.login-section .line hr { margin: auto; border: 0; height: 2px; @@ -42,7 +54,7 @@ margin-bottom: -1rem; } -.corner-item { +.login-section .corner-item { position: absolute; background-image: linear-gradient( to bottom, @@ -61,54 +73,60 @@ border: 1px solid black; } -.top-left { +.login-section .top-left { top: 0.9rem; /* Half of the height to ensure it's centered on the corner */ left: 0.8rem; /* Half of the width to ensure it's centered on the corner */ } -.top-right { +.login-section .top-right { top: 0.9rem; right: 0.8rem; } -.bottom-left { +.login-section .bottom-left { bottom: 0.9rem; left: 0.8rem; background-image: linear-gradient(to bottom, #df41bc, #c04dda, #8e5df5); box-shadow: none; } -.bottom-right { +.login-section .bottom-right { bottom: 0.7rem; right: 0.8rem; background-image: linear-gradient(to bottom, #df41bc, #c04dda, #8e5df5); box-shadow: none; } -.logo-in { +.login-section .logo-in { width: 3rem; height: 3rem; - margin-left: 45%; - margin-top: 1rem; + margin: 0 auto; } -h2 { +.login-section h2 { font-family: Arial, Helvetica, sans-serif; text-align: center; - font-size: 2rem; - margin-bottom: 20px; - letter-spacing: 1px; + font-size: 1.8rem; + margin-top: 1rem; + margin-bottom: 1rem; + letter-spacing: 1px;; } -.login-form { - margin: 1rem; +.login-section .login-form { + padding: 1rem; + width: 100%; + display: flex; + flex-direction: column; } -.input-container { - margin-bottom: 15px; +.login-section .input-container { + width: 100%; + display: flex; + flex-direction: column; + margin-bottom: 1rem; } -.input-container label { +.login-section .input-container label { text-transform: uppercase; display: block; font-size: 0.8rem; @@ -116,7 +134,7 @@ h2 { margin-bottom: 0.5rem; } -.input-container input { +.login-section .input-container input { width: 100%; padding: 10px; border-radius: 25px; @@ -127,6 +145,7 @@ h2 { } .sms { + margin: 0 auto; width: 60%; padding: 10px; border-radius: 25px; @@ -134,10 +153,9 @@ h2 { box-shadow: inset 2px 2px 5px #1b1b1b, inset -2px -2px 5px #3b3b3b; /* Neumorphism effect */ color: white; border: 2px solid white; - margin-left: 4rem; } -.vertical-hr { +.login-section .vertical-hr { margin-top: 0.5rem; margin-right: 0.5rem; border-radius: 10px; @@ -146,7 +164,7 @@ h2 { transform-origin: left; } -.horizontal-hr { +.login-section .horizontal-hr { border-radius: 5px; width: 7rem; margin: auto; @@ -156,16 +174,26 @@ h2 { background-image: linear-gradient(to right, #443e5b, #4c426c, #d4abb6); } -.login-footer { +.login-section .login-footer { + width: 100%; display: flex; - justify-content: space-between; - margin-bottom: 15px; - margin-top: 2rem; + align-items: flex-end; + gap: 1rem; + margin-bottom: 2rem; +} + +.login-section .login-footer > div { + width: 50%; + height: 100%; + display: flex; + flex-direction: column; } -.login-container-signup button { +.login-container-signup .login-footer button { border: none; - padding: 13px 20px; + padding: 10px 10px; + width: 100%; + margin-top: 1.8rem; border-radius: 20px; color: white; background-image: linear-gradient( @@ -178,45 +206,51 @@ h2 { ); box-shadow: 4px 4px 6px #1b1b1b, -4px -4px 6px #3b3b3b; /* Neumorphism effect */ cursor: pointer; - width: 9rem; - margin-top: 1rem; border-top: 2px solid #d6b1d6; /* Light blue top border */ border-right: 2px solid #d969c6; /* Regular blue for the right border */ border-bottom: 2px solid #775fcf; /* Regular blue for the bottom border */ border-left: 2px solid #775fcf; /* Regular blue for the left border */ } -.royhat { - margin-top: 2rem !important; - margin-right: -0.35rem; -} -.forgot-password { +.login-section .back-home a { display: block; text-align: center; color: #aaa; text-decoration: none; } +.login-section .back-home a:hover { + color: #fff; +} -.login-main-signup { - width: 100% !important; - font-size: 1.6rem; +.login-section .login-main-signup { + width: 100%; + font-size: 1.2rem; font-weight: 800; letter-spacing: 2px; - padding: 10px; + padding: 5px; border-radius: 25px; + margin-top: 2rem; margin-bottom: 3rem; border-top: 2px solid #d6b1d6; /* Light blue top border */ border-right: 2px solid #d969c6; /* Regular blue for the right border */ border-bottom: 2px solid #775fcf; /* Regular blue for the bottom border */ border-left: 2px solid #775fcf; /* Regular blue for the left border */ + background-image: linear-gradient( + to left bottom, + #88347b, + #6f2b75, + #54236e, + #371c65, + #10165c + ); } -.back-home { +.login-section .back-home { display: flex; } -.back-home hr { +.login-section .back-home hr { margin: auto; border: 0; height: 2px; @@ -231,7 +265,7 @@ h2 { box-shadow: 0px -1px 5px rgba(0, 0, 0, 0.5); } -.bottom-line { +.login-section .bottom-line { margin: auto; border: 0; height: 2px; @@ -246,3 +280,13 @@ h2 { box-shadow: 0px -1px 5px rgba(0, 0, 0, 0.5); margin-top: 1rem; } + +@media screen and (max-width: 400px) { + .login-section { + padding-left: 15px; + padding-right: 15px; + } + .login-section .login-container-signup { + width: 100%; + } +} \ No newline at end of file