fixed select component

This commit is contained in:
Hope87 2021-05-31 18:23:25 +03:00
parent 844cc7f9df
commit af21ce3693
47 changed files with 598 additions and 554 deletions

47
package-lock.json generated
View File

@ -12805,6 +12805,30 @@
"webpack-dev-server": "3.11.1",
"webpack-manifest-plugin": "2.2.0",
"workbox-webpack-plugin": "5.1.4"
},
"dependencies": {
"sass-loader": {
"version": "10.2.0",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.2.0.tgz",
"integrity": "sha512-kUceLzC1gIHz0zNJPpqRsJyisWatGYNFRmv2CKZK2/ngMJgLqxTbXwe/hJ85luyvZkgqU3VlJ33UVF2T/0g6mw==",
"requires": {
"klona": "^2.0.4",
"loader-utils": "^2.0.0",
"neo-async": "^2.6.2",
"schema-utils": "^3.0.0",
"semver": "^7.3.2"
}
},
"schema-utils": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
"integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
"requires": {
"@types/json-schema": "^7.0.6",
"ajv": "^6.12.5",
"ajv-keywords": "^3.5.2"
}
}
}
},
"react-select": {
@ -13528,27 +13552,12 @@
}
},
"sass-loader": {
"version": "10.2.0",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.2.0.tgz",
"integrity": "sha512-kUceLzC1gIHz0zNJPpqRsJyisWatGYNFRmv2CKZK2/ngMJgLqxTbXwe/hJ85luyvZkgqU3VlJ33UVF2T/0g6mw==",
"version": "11.1.1",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-11.1.1.tgz",
"integrity": "sha512-fOCp/zLmj1V1WHDZbUbPgrZhA7HKXHEqkslzB+05U5K9SbSbcmH91C7QLW31AsXikxUMaxXRhhcqWZAxUMLDyA==",
"requires": {
"klona": "^2.0.4",
"loader-utils": "^2.0.0",
"neo-async": "^2.6.2",
"schema-utils": "^3.0.0",
"semver": "^7.3.2"
},
"dependencies": {
"schema-utils": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
"integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
"requires": {
"@types/json-schema": "^7.0.6",
"ajv": "^6.12.5",
"ajv-keywords": "^3.5.2"
}
}
"neo-async": "^2.6.2"
}
},
"sax": {

View File

@ -15,6 +15,7 @@
"react-scripts": "4.0.3",
"react-select": "^4.3.1",
"sass": "^1.34.0",
"sass-loader": "^11.1.1",
"web-vitals": "^1.1.2"
},
"scripts": {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.8 KiB

View File

@ -2,42 +2,18 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.4 KiB

View File

@ -1,25 +0,0 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

View File

@ -1,3 +0,0 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

View File

@ -0,0 +1 @@

View File

@ -1,4 +1,4 @@
import React, { useState, Suspense, lazy } from 'react';
import React, { useState, useEffect, Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './fonts/stylesheet.css';
@ -10,17 +10,32 @@ const CandidatePage = lazy(() => import('./pages/CandidatePage'));
const App = () => {
const [isAuth, setIsAuth] = useState(false);
useEffect(() => {
const auth = localStorage.getItem('auth');
if (auth === 'true') {
setIsAuth(true);
}
}, []);
return (
<Router>
<Suspense fallback={<div>Loading...</div>}>
{isAuth ? (
<Switch>
<Route path="/" exact component={HomePage} />
<Route path="/candidate/:id" component={CandidatePage} />
<Route component={<div>Not found page</div>} />
<Route path="/" exact>
<HomePage />
</Route>
<Route path="/candidate/:id">
<CandidatePage />
</Route>
<Route>
<div>Not found page</div>
</Route>
</Switch>
) : (
<Route path="/" exact component={(props) => <AuthPage {...props} setAuth={setIsAuth} />} />
<Route path="/" exact>
<AuthPage setAuth={setIsAuth} />
</Route>
)}
</Suspense>
</Router>

View File

@ -1,12 +1,18 @@
import React from 'react';
import style from './Auth.module.scss';
import style from './Auth.module.css';
const Auth = ({ setAuthed }) => {
return (
<div className={style.auth}>
<div className={style.auth__container}>
<img src="https://www.google.com/gmail/about/static/images/logo-gmail.png?cache=1adba63" alt="" />
<button className={style.auth__btn} onClick={() => setAuthed(true)}>
<button
className={style.auth__btn}
onClick={() => {
setAuthed(true);
// localStorage.setItem('auth', 'true');
}}
>
Log in
</button>
</div>

View File

@ -0,0 +1,26 @@
.auth {
display: grid;
place-items: center;
height: 100vh;
background-color: #f2f2f2;
}
.auth__container {
display: flex;
flex-direction: column;
}
.auth__container > img {
object-fit: contain;
height: 200px;
}
.auth__btn {
width: 180px;
height: 40px;
border: 2px solid gray;
border-radius: 100px;
font-size: 1.6em;
margin: 0 auto;
}

View File

@ -1,25 +0,0 @@
.auth {
display: grid;
place-items: center;
height: 100vh;
background-color: #f2f2f2;
&__container {
display: flex;
flex-direction: column;
}
&__container > img {
object-fit: contain;
height: 200px;
}
&__btn {
width: 180px;
height: 40px;
border: 2px solid gray;
border-radius: 100px;
font-size: 1.6em;
margin: 0 auto;
}
}

View File

@ -0,0 +1,19 @@
import style from '../../components/Home/sections/Outstaffing.module.css';
const OutstaffingBlock = ({ header , image, data }) => {
return (
<div className="col-4">
<div className={style.outstaffing__box}>
<img src={image} alt={header} />
<p>{header}</p>
<ul className={style.items}>
{data.map((item, index) => (
<li key={index.toString()} onClick={() => console.log(item, index)}>{index + 1} {item}</li>
))}
</ul>
</div>
</div>
);
};
export default OutstaffingBlock

View File

@ -1,12 +1,11 @@
import React from 'react';
import { useHistory, useParams } from 'react-router-dom';
import style from './Candidate.module.scss';
import style from './Candidate.module.css';
import { candidatesList } from '../Home/Home';
import icon from '../../images/front_end.png';
import arrow from '../../images/right-arrow.png';
import rectangle from '../../images/rectangle_secondPage.png';
import Sidebar from './sections/Sidebar';
import classes from './Candidate.module.scss';
import SectionOne from './sections/SectionOne';
import SectionTwo from './sections/SectionTwo';
import SectionThree from './sections/SectionThree';
@ -24,7 +23,7 @@ const Candidate = () => {
const { name } = currentCandidate;
return (
<section className={classes.candidate}>
<section className={style.candidate}>
<div className="container">
<div className="row">
<div className="col-12">

View File

@ -1,4 +1,4 @@
.candidate {
/* .candidate {
&__title {
margin-top: 60px;
& h2 {
@ -70,4 +70,79 @@
}
}
}
} */
.candidate__title {
margin-top: 60px;
}
.candidate__title > h2 {
text-align: center;
color: #52b709;
font-family: 'GT Eesti Pro Display';
font-size: 5em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 77.81px;
}
.candidate__title > h2 > span {
color: #282828;
font-style: normal;
letter-spacing: 0.56px;
line-height: normal;
}
.candidate__header {
display: flex;
align-items: center;
margin-top: 120px;
margin-left: 60px;
}
.arrow > img {
cursor: pointer;
}
.arrow > span {
margin-left: 40px;
margin-right: 120px;
font-family: 'GT Eesti Pro Display - Thin';
font-size: 1.8em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
}
.candidate__main {
margin-top: 60px;
}
.candidate__main__description {
padding-left: 16px;
}
.candidate__main__description > h2 {
font-family: 'GT Eesti Pro Display';
font-size: 2.8em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
}
.candidate__main__description > p {
font-family: 'GT Eesti Pro Display';
font-size: 1.2em;
font-weight: 300;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
margin: 20px 0px;
}

View File

@ -1,5 +1,5 @@
import React from 'react';
import style from './SectionFive.module.scss';
import style from './SectionFive.module.css';
const SectionFive = () => {
return (

View File

@ -0,0 +1,9 @@
.SectionFive > p {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 16px;
text-align: left;
}

View File

@ -1,11 +0,0 @@
.SectionFive {
& p {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 16px;
text-align: left;
}
}

View File

@ -1,5 +1,5 @@
import React from 'react';
import style from './SectionFour.module.scss';
import style from './SectionFour.module.css';
const SectionFour = () => {
return (

View File

@ -0,0 +1,9 @@
.SectionFour > p {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 18px;
text-align: left;
}

View File

@ -1,11 +0,0 @@
.SectionFour {
& p {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 18px;
text-align: left;
}
}

View File

@ -1,5 +1,5 @@
import React from 'react';
import style from './SectionOne.module.scss';
import style from './SectionOne.module.css';
const SectionOne = () => {
return (

View File

@ -1,5 +1,5 @@
.SectionOne {
& h3 {
.SectionOne > h3 {
font-family: 'GT Eesti Pro Display';
font-size: 2.2em;
font-weight: 400;
@ -9,7 +9,7 @@
text-align: left;
}
& p {
.SectionOne > p {
font-family: 'GT Eesti Pro Display - Thin';
font-size: 1.8em;
font-weight: 400;
@ -20,7 +20,7 @@
color: #444444;
}
& h4 {
.SectionOne > h4 {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 700;
@ -29,4 +29,4 @@
line-height: 36px;
text-align: left;
}
}

View File

@ -1,5 +1,5 @@
import React from 'react';
import style from './SectionSkills.module.scss';
import style from './SectionSkills.module.css';
const SectionSkills = () => {
return (

View File

@ -0,0 +1,29 @@
.SectionSkills {
border: 1px solid #69bf2c;
padding: 28px 40px 16px 30px;
margin-top: 60px;
border-radius: 10px;
margin-bottom: 60px;
}
.SectionSkills > h3 {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 28px;
text-align: left;
}
.SectionSkills > p {
font-family: 'GT Eesti Pro Display - Thin';
font-size: 2em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 28px;
text-align: left;
color: #444444;
}

View File

@ -1,27 +0,0 @@
.SectionSkills {
border: 1px solid #69bf2c;
padding: 28px 40px 16px 30px;
margin-top: 60px;
border-radius: 10px;
margin-bottom: 60px;
& h3 {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 28px;
text-align: left;
}
& p {
font-family: 'GT Eesti Pro Display - Thin';
font-size: 2em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 28px;
text-align: left;
color: #444444;
}
}

View File

@ -1,5 +1,5 @@
import React from 'react';
import style from './SectionThree.module.scss';
import style from './SectionThree.module.css';
const SectionThree = () => {
return (

View File

@ -1,5 +1,5 @@
.SectionThree {
& h3 {
.SectionThree > h3 {
font-family: 'GT Eesti Pro Display';
font-size: 2.2em;
font-weight: 400;
@ -9,7 +9,7 @@
text-align: left;
}
& p {
.SectionThree > p {
font-family: 'GT Eesti Pro Display - Thin';
font-size: 1.8em;
font-weight: 400;
@ -20,7 +20,7 @@
color: #444444;
}
& h4 {
.SectionThree > h4 {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 700;
@ -29,4 +29,4 @@
line-height: 36px;
text-align: left;
}
}

View File

@ -1,5 +1,5 @@
import React from 'react';
import style from './SectionTwo.module.scss';
import style from './SectionTwo.module.css';
const SectionTwo = () => {
return (

View File

@ -1,5 +1,5 @@
.SectionTwo {
& p {
.SectionTwo > p {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 400;
@ -9,4 +9,4 @@
text-align: left;
color: #444444;
}
}

View File

@ -2,7 +2,7 @@ import React from 'react';
import male from '../../../images/medium_male.png';
import arrowLeft from '../../../images/arrow_left.png';
import arrowRight from '../../../images/arrow_right.png';
import style from './Sidebar.module.scss';
import style from './Sidebar.module.css';
const Sidebar = () => {
return (

View File

@ -0,0 +1,113 @@
.candidateSidebar {
display: flex;
flex-direction: column;
align-items: center;
border: 2px solid whitesmoke;
border-bottom: none !important;
}
.candidateSidebar__info {
text-align: center;
margin-top: 40px;
}
.candidateSidebar__info > img {
width: 180px;
height: 180px;
}
.candidateSidebar__info__e {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
margin-top: 20px;
}
.candidateSidebar__info__y {
font-family: 'GT Eesti Pro Display - Bold';
font-size: 3em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: normal;
}
.candidateSidebar__info__btn {
width: 280px;
height: 60px;
border-radius: 100px;
border: none;
background-color: #70c03e;
color: #ffffff;
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 600;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: center;
margin-top: 20px;
margin-bottom: 120px;
}
.candidateSidebar__info__l {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 600;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: center;
}
.candidateSidebar__arrows {
display: flex;
align-items: center;
margin-top: 20px;
}
.arrow__left {
position: relative;
width: 30px;
height: 30px;
border-radius: 20px;
background-color: #f6f6f6;
}
.arrow__left > img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.arrows__sp {
color: #705fa3;
font-family: Circe;
font-size: 1.6em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
text-align: center;
margin: 0 10px;
}
.arrow__right {
position: relative;
width: 30px;
height: 30px;
border-radius: 20px;
background-color: #74be4d;
}
.arrow__right > img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

View File

@ -1,108 +0,0 @@
.candidateSidebar {
display: flex;
flex-direction: column;
align-items: center;
border: 2px solid whitesmoke;
border-bottom: none !important;
&__info {
text-align: center;
margin-top: 40px;
& img {
width: 180px;
height: 180px;
}
&__e {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
margin-top: 20px;
}
&__y {
font-family: 'GT Eesti Pro Display - Bold';
font-size: 3em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: normal;
}
&__btn {
width: 280px;
height: 60px;
border-radius: 100px;
border: none;
background-color: #70c03e;
color: #ffffff;
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 600;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: center;
margin-top: 20px;
margin-bottom: 120px;
}
&__l {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 600;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: center;
}
}
&__arrows {
display: flex;
align-items: center;
margin-top: 20px;
& .arrow__left {
position: relative;
width: 30px;
height: 30px;
border-radius: 20px;
background-color: #f6f6f6;
& img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
& span {
color: #705fa3;
font-family: Circe;
font-size: 1.6em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
text-align: center;
margin: 0 10px;
}
& .arrow__right {
position: relative;
width: 30px;
height: 30px;
border-radius: 20px;
background-color: #74be4d;
& img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
}

View File

@ -1,5 +1,5 @@
import React from 'react';
import style from './Description.module.scss';
import style from './Description.module.css';
import photo from '../../../images/medium_male.png';
import rectangle from '../../../images/rectangle_secondPage.png';
import arrowLeft from '../../../images/arrow_left.png';

View File

@ -0,0 +1,134 @@
.description {
margin-top: 120px;
margin-bottom: 120px;
}
.description__wrapper {
border: 2px solid whitesmoke;
padding-top: 60px;
border-bottom: none;
}
.description__img {
margin-left: 40px;
margin-top: 16px;
}
.description__title {
font-family: 'GT Eesti Pro Display';
font-size: 2.5em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
margin-bottom: 10px;
}
.description__text {
font-family: 'GT Eesti Pro Display';
font-size: 1.6em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 24px;
text-align: left;
line-height: 28px;
}
.description__button {
width: 280px;
height: 62px;
border-radius: 100px;
background-color: #5ab426;
border: none;
color: #ffffff;
font-family: 'Muller Extra Bold';
font-size: 1.8em;
font-weight: 600;
font-style: normal;
letter-spacing: normal;
text-align: center;
margin-top: 74px;
}
.description__sp {
display: block;
font-family: 'GT Eesti Pro Display';
font-size: 1.6em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
text-align: center;
margin-top: 20px;
}
.description__rectangle {
display: block;
margin: 60px auto;
}
.description__footer {
display: flex;
justify-content: center;
margin-top: 60px;
}
.description__footer__btn > button {
width: 220px;
height: 60px;
border-radius: 100px;
border: 1px solid #5ab424;
background-color: white;
margin-right: 60px;
color: #a0a0a0;
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 600;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: center;
}
.description__footer__box {
display: flex;
align-items: center;
}
.description__footer__sp {
color: #705fa3;
font-family: Circe;
font-size: 1.6em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
text-align: center;
margin: 0 10px;
}
.arrow__left {
position: relative;
width: 30px;
height: 30px;
border-radius: 20px;
background-color: #f6f6f6;
}
.arrow__left > img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.arrow__right {
position: relative;
width: 30px;
height: 30px;
border-radius: 20px;
background-color: #74be4d;
}
.arrow__right > img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

View File

@ -1,125 +0,0 @@
.description {
margin-top: 120px;
margin-bottom: 120px;
&__wrapper {
border: 2px solid whitesmoke;
padding-top: 60px;
border-bottom: none;
}
&__img {
margin-left: 40px;
margin-top: 16px;
}
&__title {
font-family: 'GT Eesti Pro Display';
font-size: 2.5em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
margin-bottom: 10px;
}
&__text {
font-family: 'GT Eesti Pro Display';
font-size: 1.6em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 24px;
text-align: left;
line-height: 28px;
}
&__button {
width: 280px;
height: 62px;
border-radius: 100px;
background-color: #5ab426;
border: none;
color: #ffffff;
font-family: 'Muller Extra Bold';
font-size: 1.8em;
font-weight: 600;
font-style: normal;
letter-spacing: normal;
text-align: center;
margin-top: 74px;
}
&__sp {
display: block;
font-family: 'GT Eesti Pro Display';
font-size: 1.6em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
text-align: center;
margin-top: 20px;
}
&__rectangle {
display: block;
margin: 60px auto;
}
&__footer {
display: flex;
justify-content: center;
margin-top: 60px;
&__btn {
& button {
width: 220px;
height: 60px;
border-radius: 100px;
border: 1px solid #5ab424;
background-color: white;
margin-right: 60px;
color: #a0a0a0;
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 600;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: center;
}
}
&__box {
display: flex;
align-items: center;
& span {
color: #705fa3;
font-family: Circe;
font-size: 1.6em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
text-align: center;
margin: 0 10px;
}
& .arrow__left {
position: relative;
width: 30px;
height: 30px;
border-radius: 20px;
background-color: #f6f6f6;
& img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
& .arrow__right {
position: relative;
width: 30px;
height: 30px;
border-radius: 20px;
background-color: #74be4d;
& img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
}
}

View File

@ -1,10 +1,18 @@
import React from 'react';
import style from './Outstaffing.module.scss';
import React, { useState, useEffect } from 'react';
import style from './Outstaffing.module.css';
import front from '../../../images/front_end.png';
import back from '../../../images/back_end.png';
import design from '../../../images/design.png';
import OutstaffingBlock from '../../Blocks/OutstaffingBlock';
const Outstaffing = () => {
const [data, setData] = useState([]);
useEffect(() => {
const tempData = ['Ruby on Rails', 'Nginx', 'Docker', 'PostgreSQL', 'Git', 'Typescript', 'ReactJS'];
setData(tempData);
}, []);
return (
<section className={style.outstaffing}>
<div className="container">
@ -19,55 +27,9 @@ const Outstaffing = () => {
</div>
<div className="row">
<div className="col-4">
<div className={style.outstaffing__box}>
<img src={front} alt="" />
<p># Популярный стек </p>
<ul className={style.items}>
<li>Ruby on Rails</li>
<li>Nginx</li>
<li>Docker</li>
<li>PostgreSQL</li>
<li>Git</li>
<li>Typescript</li>
<li>ReactJS</li>
</ul>
</div>
</div>
<div className="col-4">
<div className={style.outstaffing__box}>
<img src={back} alt="" />
<p># Популярный стек</p>
<ul className={style.items}>
<li>Ruby on Rails</li>
<li>Nginx</li>
<li>Docker</li>
<li>PostgreSQL</li>
<li>Git</li>
<li>Typescript</li>
<li>ReactJS</li>
</ul>
</div>
</div>
<div className="col-4">
<div className={style.outstaffing__box}>
<img src={design} alt="" />
<p># Популярный стек</p>
<ul className={style.items}>
<li>Ruby on Rails</li>
<li>Nginx</li>
<li>Docker</li>
<li>PostgreSQL</li>
<li>Git</li>
<li>Typescript</li>
<li>ReactJS</li>
</ul>
</div>
</div>
<OutstaffingBlock image={front} data={data} header={'# Популярный стек'} />
<OutstaffingBlock image={back} data={data} header={'# Популярный стек'} />
<OutstaffingBlock image={design} data={data} header={'# Популярный стек'} />
</div>
</div>
</section>

View File

@ -0,0 +1,55 @@
.outstaffing__title {
margin-top: 60px;
}
.outstaffing__title > h2 {
text-align: center;
color: #52b709;
font-family: 'GT Eesti Pro Display';
font-size: 5em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 77.81px;
}
.outstaffing__title > h2 > span {
color: #282828 ;
font-style: normal ;
letter-spacing: 0.56px ;
line-height: normal ;
}
.outstaffing__box {
margin-top: 120px;
display: flex;
flex-direction: column;
align-items: center;
}
.outstaffing__box > img {
max-width: 240px;
max-height: 120px;
}
.outstaffing__box > p {
font-family: 'GT Eesti Pro Display';
font-size: 1.2em;
font-weight: 300;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
margin-top: 60px;
margin-bottom: 0;
margin-left: 16px;
}
.items > li {
font-family: 'GT Eesti Pro Display - Thin';
font-size: 1.8em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
list-style: none;
}

View File

@ -1,55 +0,0 @@
.outstaffing {
&__title {
margin-top: 60px;
& h2 {
text-align: center;
color: #52b709;
font-family: 'GT Eesti Pro Display';
font-size: 5em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 77.81px;
& span {
color: #282828;
font-style: normal;
letter-spacing: 0.56px;
line-height: normal;
}
}
}
&__box {
margin-top: 120px;
display: flex;
flex-direction: column;
align-items: center;
& img {
max-width: 240px;
max-height: 120px;
}
& p {
font-family: 'GT Eesti Pro Display';
font-size: 1.2em;
font-weight: 300;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
margin-top: 60px;
margin-bottom: 0;
margin-left: 16px;
}
& .items {
& li {
font-family: 'GT Eesti Pro Display - Thin';
font-size: 1.8em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
list-style: none;
}
}
}
}

View File

@ -1,6 +1,6 @@
import React, { useState } from 'react';
import Select from 'react-select';
import style from './Select.module.scss';
import style from './Select.module.css';
const options = [
{ value: 'Ruby on Rails', label: 'Ruby on Rails' },
@ -35,7 +35,7 @@ const TagSelect = () => {
<div className="container">
<div className="row">
<div className="col-12">
<h2>Найти специалиста по навыкам</h2>
<h2 className={style.search__title}>Найти специалиста по навыкам</h2>
<div className={style.search__box}>
<Select
value={items}

View File

@ -1,6 +1,7 @@
.search {
margin-top: 40px;
& h2 {
}
.search__title {
font-family: 'GT Eesti Pro Display';
font-size: 2.4em;
font-weight: 700;
@ -11,12 +12,12 @@
margin-bottom: 40px;
}
&__box {
.search__box {
display: flex;
justify-content: space-between;
}
& button {
.search__box > button {
width: 131px;
height: 40px;
border-radius: 10px;
@ -29,26 +30,26 @@
letter-spacing: normal;
text-align: center;
}
}
.select {
width: 85%;
[class$='-placeholder'] {
display: none;
}
[class$='-control'] {
border-color: #e8e8e8 !important;
box-shadow: 0 0 0 1px #e8e8e8;
}
[class$='-value'] {
font-size: 1.6em;
}
[class$='-option'] {
font-size: 1.6em;
color: gray;
}
}
[class$='-placeholder'] {
display: none;
}
[class$='-control'] {
border-color: #e8e8e8 !important;
box-shadow: 0 0 0 1px #e8e8e8 !important;
}
[class$='-value__label'] {
font-size: 1.4em !important;
}
[class$='-option'] {
font-size: 1.6em !important;
color: gray !important;
}

View File

@ -4,9 +4,4 @@ import App from './App';
import './index.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
ReactDOM.render(<App />, document.getElementById('root'));

View File

@ -1,7 +1,7 @@
import React from 'react';
import Candidate from '../components/Candidate'
import Candidate from '../components/Candidate';
const CandidatePage = () => <Candidate />
const CandidatePage = () => <Candidate />;
export default CandidatePage;

View File

@ -1,7 +1,7 @@
import React from 'react';
import Home from '../components/Home'
import Home from '../components/Home';
const HomePage = () => <Home />
const HomePage = () => <Home />;
export default HomePage;