From 57674c27c775d104da76b1293fd77feb30b07d9b Mon Sep 17 00:00:00 2001 From: Hope87 Date: Thu, 10 Jun 2021 18:17:50 +0300 Subject: [PATCH] development third page --- src/App.js | 2 +- src/components/Auth/Auth.js | 112 ++++++++- src/components/Auth/Auth.module.css | 222 ++++++++++++++++-- .../Description/Description.module.css | 6 + .../Outstaffing/Outstaffing.module.css | 6 + .../Outstaffing/OutstaffingBlock.js | 2 +- src/components/Select/TagSelect.module.css | 6 + src/components/Sidebar/Sidebar.module.css | 6 + src/images/Body_Text.png | Bin 0 -> 3009 bytes src/images/Vector_Smart_Object.png | Bin 0 -> 31391 bytes src/images/align-left.png | Bin 0 -> 263 bytes src/images/arrow__login_page.png | Bin 0 -> 383 bytes src/images/cross.png | Bin 0 -> 879 bytes src/images/ellipse.png | Bin 0 -> 134 bytes src/images/specialists.png | Bin 0 -> 723 bytes 15 files changed, 331 insertions(+), 31 deletions(-) create mode 100644 src/images/Body_Text.png create mode 100644 src/images/Vector_Smart_Object.png create mode 100644 src/images/align-left.png create mode 100644 src/images/arrow__login_page.png create mode 100644 src/images/cross.png create mode 100644 src/images/ellipse.png create mode 100644 src/images/specialists.png diff --git a/src/App.js b/src/App.js index 725ad72c..71976897 100644 --- a/src/App.js +++ b/src/App.js @@ -8,7 +8,7 @@ const HomePage = lazy(() => import('./pages/HomePage')); const CandidatePage = lazy(() => import('./pages/CandidatePage')); const App = () => { - const [isAuth, setIsAuth] = useState(true); + const [isAuth, setIsAuth] = useState(false); useEffect(() => { const auth = localStorage.getItem('auth'); diff --git a/src/components/Auth/Auth.js b/src/components/Auth/Auth.js index 631802ee..c7fb0a39 100644 --- a/src/components/Auth/Auth.js +++ b/src/components/Auth/Auth.js @@ -1,22 +1,110 @@ import React from 'react'; import style from './Auth.module.css'; +import ellipse from '../../images/ellipse.png'; +import arrow from '../../images/arrow__login_page.png'; +import male from '../../images/medium_male_big.png'; +import cross from '../../images/cross.png'; +import specialists from '../../images/specialists.png'; +import text from '../../images/Body_Text.png'; +import align from '../../images/align-left.png'; const Auth = ({ setAuthed }) => { return ( -
-
- - +
+
+
+
+
+

+ Войти в систему +

+
+ + Для партнеров +
+
+ + + + + + + +
+
+
+
+ +
+
+
+
+ +

+ Frontend разработчик,
Middle +

+
+ +
+
+
+ +
+
+ +
+
+ +
    +
  • Ruby on Rails
    • +
  • Php
    • +
  • Python
    • +
  • Vue.js
    • +
  • React. JS
    • +
+
+ + +
+
+
+ +
+
+
+ + + © Адвего — биржа контента №1. Копирайтинг, рерайтинг, переводы, работа на дому: поставщик уникального + контента. 2021{' '} + +
+
+ +
+
+

Hello

+
+
+
-
+ ); }; export default Auth; + +// { +// /*
+// +// +//
*/ +// } diff --git a/src/components/Auth/Auth.module.css b/src/components/Auth/Auth.module.css index 6261a9a7..1ce20f07 100644 --- a/src/components/Auth/Auth.module.css +++ b/src/components/Auth/Auth.module.css @@ -1,26 +1,214 @@ .auth { - display: grid; - place-items: center; - height: 100vh; - background-color: #f2f2f2; - + height: 1600px; } -.auth__container { +.auth__box { + display: flex; + flex-direction: column; + align-self: center; + margin-bottom: 154px; +} + +.auth__title { + font-family: 'GT Eesti Pro Display'; + font-size: 5.3em; + font-weight: 700; + font-style: normal; + letter-spacing: normal; + line-height: 77.81px; + text-align: left; + margin-top: 254px; +} + +.auth__title > span { + font-family: 'GT Eesti Pro Display'; + color: #52b709; + font-style: normal; + letter-spacing: 0.56px; + line-height: normal; +} + +.auth__partners { + display: flex; + align-items: center; + justify-content: center; + margin-top: 15px; + margin-bottom: 65px; +} + +.auth__partners > img { + width: 6px; + height: 6px; + margin-left: 120px; +} + +.auth__partners > span { + color: #18586e; + font-family: 'GT Eesti Pro Display'; + font-size: 1.6em; + font-weight: 500; + font-style: normal; + letter-spacing: normal; + line-height: 16.81px; + text-align: left; + margin-left: 10px; +} + +.auth__form { display: flex; flex-direction: column; } -.auth__container > img { - object-fit: contain; - height: 200px; +.auth__form > label { + color: #48802d; + font-family: 'GT Eesti Pro Display'; + font-size: 2.4em; + font-weight: 500; + font-style: normal; + letter-spacing: normal; + line-height: 16.81px; + text-align: left; + margin-bottom: 20px; + margin-left: 45px; } -.auth__btn { - width: 180px; - height: 40px; - border: 2px solid gray; - border-radius: 100px; - font-size: 1.6em; - margin: 0 auto; -} \ No newline at end of file +.auth__form > input { + width: 366px; + height: 75px; + box-shadow: 0 0 59px rgba(44, 44, 44, 0.05); + border-radius: 37px; + border: 1px solid #c4c4c4; + background-color: #ffffff; + margin-bottom: 60px; + color: #a6a6a6; + font-family: 'GT Eesti Pro Display'; + font-size: 2.2em; + font-weight: 300; + font-style: normal; + letter-spacing: normal; + line-height: normal; + text-align: left; + padding-left: 45px; + outline: none; +} + +.form__btn { + width: 290px; + height: 75px; + box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21); + border-radius: 38px; + background-color: #ffffff; + background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%), + linear-gradient( + 36deg, + rgba(255, 255, 255, 0) 0%, + rgba(255, 255, 255, 0.16) 47%, + rgba(255, 255, 255, 0.17) 50%, + rgba(255, 255, 255, 0) 100% + ); + border: none; + color: #ffffff; + font-family: 'Muller'; + font-size: 2.2em; + letter-spacing: normal; + line-height: 71.88px; + text-align: center; +} + +.auth__arrow { + margin-top: 360px; +} + +.auth__info { + background-color: #e1fccf; + margin-top: 140px; + width: 310px; + padding-top: 30px; + position: relative; + padding-bottom: 160px; +} + +.auth__info__box { + display: flex; + align-items: center; +} + +.auth__info__box > img { + width: 165px; + height: 165px; + margin-left: -84px; + margin-right: 30px; +} + +.auth__info__box > h3 { + font-family: 'GT Eesti Pro Display'; + font-size: 2em; + font-weight: 100; + font-style: normal; + letter-spacing: normal; + line-height: 36px; + text-align: left; + position: absolute; + right: -14px; +} + +.auth__info__container { + display: flex; + position: relative; +} + +.auth__info__img { + display: flex; + flex-direction: column; + margin-left: 55px; + margin-top: 28px; +} + +.auth__info__img > div > img { + margin-bottom: 40px; +} + +.specialists { + margin-left: 26px; +} + +.info__list { + list-style: none; + margin-top: 110px; + position: absolute; + right: -116px; +} + +.info__list__item { + color: #1f1f1f; + font-family: 'GT Eesti Pro Display'; + font-size: 4em; + font-weight: 700; + font-style: normal; + letter-spacing: normal; + line-height: 56.95px; + text-align: left; + text-decoration: underline; + text-transform: uppercase; +} + +.img__text { + position: absolute; + right: -68px; + bottom: -84px; +} + +.auth__footer__left > img { + margin-right: 38px; +} + +.auth__footer__left > span { + color: #18586e; + font-family: 'GT Eesti Pro Display'; + font-size: 16px; + font-weight: 400; + font-style: normal; + letter-spacing: normal; + line-height: 16.81px; + text-align: left; +} diff --git a/src/components/Description/Description.module.css b/src/components/Description/Description.module.css index 46d05fa2..8855d1b5 100644 --- a/src/components/Description/Description.module.css +++ b/src/components/Description/Description.module.css @@ -105,6 +105,12 @@ margin-left: 30px; } +.description__button:hover { + background: rgba(0, 0, 0, 0); + color: #73c141; + box-shadow: inset 0 0 0 3px #73c141; +} + @media (max-width: 575.98px) { .description__button { width: 220px; diff --git a/src/components/Outstaffing/Outstaffing.module.css b/src/components/Outstaffing/Outstaffing.module.css index 06e97b49..a81238b1 100644 --- a/src/components/Outstaffing/Outstaffing.module.css +++ b/src/components/Outstaffing/Outstaffing.module.css @@ -87,6 +87,12 @@ margin-bottom: 0; } +@media (max-width: 575.98px) { + .outstaffing__box__text { + display: none; + } +} + .front { left: -5%; } diff --git a/src/components/Outstaffing/OutstaffingBlock.js b/src/components/Outstaffing/OutstaffingBlock.js index 09a8a335..abc82402 100644 --- a/src/components/Outstaffing/OutstaffingBlock.js +++ b/src/components/Outstaffing/OutstaffingBlock.js @@ -23,7 +23,7 @@ const OutstaffingBlock = ({ data = {}, onClick, onTabBarClick, selected }) => { img
-

{text}

+

{text}

{tags && (