apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed select component

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+28 -19
View File
@@ -12805,6 +12805,30 @@
"webpack-dev-server": "3.11.1", "webpack-dev-server": "3.11.1",
"webpack-manifest-plugin": "2.2.0", "webpack-manifest-plugin": "2.2.0",
"workbox-webpack-plugin": "5.1.4" "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": { "react-select": {
@@ -13528,27 +13552,12 @@
} }
}, },
"sass-loader": { "sass-loader": {
"version": "10.2.0", "version": "11.1.1",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.2.0.tgz", "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-11.1.1.tgz",
"integrity": "sha512-kUceLzC1gIHz0zNJPpqRsJyisWatGYNFRmv2CKZK2/ngMJgLqxTbXwe/hJ85luyvZkgqU3VlJ33UVF2T/0g6mw==", "integrity": "sha512-fOCp/zLmj1V1WHDZbUbPgrZhA7HKXHEqkslzB+05U5K9SbSbcmH91C7QLW31AsXikxUMaxXRhhcqWZAxUMLDyA==",
"requires": { "requires": {
"klona": "^2.0.4", "klona": "^2.0.4",
"loader-utils": "^2.0.0", "neo-async": "^2.6.2"
"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"
}
}
} }
}, },
"sax": { "sax": {
package.json
+1
View File
@@ -15,6 +15,7 @@
"react-scripts": "4.0.3", "react-scripts": "4.0.3",
"react-select": "^4.3.1", "react-select": "^4.3.1",
"sass": "^1.34.0", "sass": "^1.34.0",
"sass-loader": "^11.1.1",
"web-vitals": "^1.1.2" "web-vitals": "^1.1.2"
}, },
"scripts": { "scripts": {
public/favicon.ico
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.8 KiB

public/index.html
-24
View File
@@ -2,42 +2,18 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta
name="description" name="description"
content="Web site created using create-react-app" 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> <title>React App</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <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> </body>
</html> </html>
public/logo192.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.2 KiB

public/logo512.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.4 KiB

public/manifest.json
-25
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"
}
public/robots.txt
-3
View File
@@ -1,3 +0,0 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
src/App.css
+1
View File
@@ -0,0 +1 @@
src/App.js
+20 -5
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 { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
import './fonts/stylesheet.css'; import './fonts/stylesheet.css';
@@ -10,17 +10,32 @@ const CandidatePage = lazy(() => import('./pages/CandidatePage'));
const App = () => { const App = () => {
const [isAuth, setIsAuth] = useState(false); const [isAuth, setIsAuth] = useState(false);
useEffect(() => {
const auth = localStorage.getItem('auth');
if (auth === 'true') {
setIsAuth(true);
}
}, []);
return ( return (
<Router> <Router>
<Suspense fallback={<div>Loading...</div>}> <Suspense fallback={<div>Loading...</div>}>
{isAuth ? ( {isAuth ? (
<Switch> <Switch>
<Route path="/" exact component={HomePage} /> <Route path="/" exact>
<Route path="/candidate/:id" component={CandidatePage} /> <HomePage />
<Route component={<div>Not found page</div>} /> </Route>
<Route path="/candidate/:id">
<CandidatePage />
</Route>
<Route>
<div>Not found page</div>
</Route>
</Switch> </Switch>
) : ( ) : (
<Route path="/" exact component={(props) => <AuthPage {...props} setAuth={setIsAuth} />} /> <Route path="/" exact>
<AuthPage setAuth={setIsAuth} />
</Route>
)} )}
</Suspense> </Suspense>
</Router> </Router>
src/components/Auth/Auth.js
+8 -2
View File
@@ -1,12 +1,18 @@
import React from 'react'; import React from 'react';
import style from './Auth.module.scss'; import style from './Auth.module.css';
const Auth = ({ setAuthed }) => { const Auth = ({ setAuthed }) => {
return ( return (
<div className={style.auth}> <div className={style.auth}>
<div className={style.auth__container}> <div className={style.auth__container}>
<img src="https://www.google.com/gmail/about/static/images/logo-gmail.png?cache=1adba63" alt="" /> <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 Log in
</button> </button>
</div> </div>
src/components/Auth/Auth.module.css
+26
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;
}
src/components/Auth/Auth.module.scss
-25
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;
}
}
src/components/Blocks/OutstaffingBlock.jsx
+19
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
src/components/Candidate/Candidate.js
+2 -3
View File
@@ -1,12 +1,11 @@
import React from 'react'; import React from 'react';
import { useHistory, useParams } from 'react-router-dom'; 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 { candidatesList } from '../Home/Home';
import icon from '../../images/front_end.png'; import icon from '../../images/front_end.png';
import arrow from '../../images/right-arrow.png'; import arrow from '../../images/right-arrow.png';
import rectangle from '../../images/rectangle_secondPage.png'; import rectangle from '../../images/rectangle_secondPage.png';
import Sidebar from './sections/Sidebar'; import Sidebar from './sections/Sidebar';
import classes from './Candidate.module.scss';
import SectionOne from './sections/SectionOne'; import SectionOne from './sections/SectionOne';
import SectionTwo from './sections/SectionTwo'; import SectionTwo from './sections/SectionTwo';
import SectionThree from './sections/SectionThree'; import SectionThree from './sections/SectionThree';
@@ -24,7 +23,7 @@ const Candidate = () => {
const { name } = currentCandidate; const { name } = currentCandidate;
return ( return (
<section className={classes.candidate}> <section className={style.candidate}>
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-12"> <div className="col-12">
src/components/Candidate/Candidate.module.scss → src/components/Candidate/Candidate.module.css
+76 -1
View File
@@ -1,4 +1,4 @@
.candidate { /* .candidate {
&__title { &__title {
margin-top: 60px; margin-top: 60px;
& h2 { & 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;
}
src/components/Candidate/index.js
+1 -1
View File
@@ -1,3 +1,3 @@
import Candidate from './Candidate'; import Candidate from './Candidate';
export default Candidate; export default Candidate;
src/components/Candidate/sections/SectionFive.js
+1 -1
View File
@@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import style from './SectionFive.module.scss'; import style from './SectionFive.module.css';
const SectionFive = () => { const SectionFive = () => {
return ( return (
src/components/Candidate/sections/SectionFive.module.css
+9
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;
}
src/components/Candidate/sections/SectionFive.module.scss
-11
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;
}
}
src/components/Candidate/sections/SectionFour.js
+1 -1
View File
@@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import style from './SectionFour.module.scss'; import style from './SectionFour.module.css';
const SectionFour = () => { const SectionFour = () => {
return ( return (
src/components/Candidate/sections/SectionFour.module.css
+9
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;
}
src/components/Candidate/sections/SectionFour.module.scss
-11
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;
}
}
src/components/Candidate/sections/SectionOne.js
+1 -1
View File
@@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import style from './SectionOne.module.scss'; import style from './SectionOne.module.css';
const SectionOne = () => { const SectionOne = () => {
return ( return (
src/components/Candidate/sections/SectionOne.module.scss → src/components/Candidate/sections/SectionOne.module.css
+5 -5
View File
@@ -1,5 +1,5 @@
.SectionOne {
& h3 { .SectionOne > h3 {
font-family: 'GT Eesti Pro Display'; font-family: 'GT Eesti Pro Display';
font-size: 2.2em; font-size: 2.2em;
font-weight: 400; font-weight: 400;
@@ -9,7 +9,7 @@
text-align: left; text-align: left;
} }
& p { .SectionOne > p {
font-family: 'GT Eesti Pro Display - Thin'; font-family: 'GT Eesti Pro Display - Thin';
font-size: 1.8em; font-size: 1.8em;
font-weight: 400; font-weight: 400;
@@ -20,7 +20,7 @@
color: #444444; color: #444444;
} }
& h4 { .SectionOne > h4 {
font-family: 'GT Eesti Pro Display'; font-family: 'GT Eesti Pro Display';
font-size: 1.8em; font-size: 1.8em;
font-weight: 700; font-weight: 700;
@@ -29,4 +29,4 @@
line-height: 36px; line-height: 36px;
text-align: left; text-align: left;
} }
}
src/components/Candidate/sections/SectionSkills.js
+1 -1
View File
@@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import style from './SectionSkills.module.scss'; import style from './SectionSkills.module.css';
const SectionSkills = () => { const SectionSkills = () => {
return ( return (
src/components/Candidate/sections/SectionSkills.module.css
+29
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;
}
src/components/Candidate/sections/SectionSkills.module.scss
-27
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;
}
}
src/components/Candidate/sections/SectionThree.js
+1 -1
View File
@@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import style from './SectionThree.module.scss'; import style from './SectionThree.module.css';
const SectionThree = () => { const SectionThree = () => {
return ( return (
src/components/Candidate/sections/SectionThree.module.scss → src/components/Candidate/sections/SectionThree.module.css
+5 -5
View File
@@ -1,5 +1,5 @@
.SectionThree {
& h3 { .SectionThree > h3 {
font-family: 'GT Eesti Pro Display'; font-family: 'GT Eesti Pro Display';
font-size: 2.2em; font-size: 2.2em;
font-weight: 400; font-weight: 400;
@@ -9,7 +9,7 @@
text-align: left; text-align: left;
} }
& p { .SectionThree > p {
font-family: 'GT Eesti Pro Display - Thin'; font-family: 'GT Eesti Pro Display - Thin';
font-size: 1.8em; font-size: 1.8em;
font-weight: 400; font-weight: 400;
@@ -20,7 +20,7 @@
color: #444444; color: #444444;
} }
& h4 { .SectionThree > h4 {
font-family: 'GT Eesti Pro Display'; font-family: 'GT Eesti Pro Display';
font-size: 1.8em; font-size: 1.8em;
font-weight: 700; font-weight: 700;
@@ -29,4 +29,4 @@
line-height: 36px; line-height: 36px;
text-align: left; text-align: left;
} }
}
src/components/Candidate/sections/SectionTwo.js
+1 -1
View File
@@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import style from './SectionTwo.module.scss'; import style from './SectionTwo.module.css';
const SectionTwo = () => { const SectionTwo = () => {
return ( return (
src/components/Candidate/sections/SectionTwo.module.scss → src/components/Candidate/sections/SectionTwo.module.css
+3 -3
View File
@@ -1,5 +1,5 @@
.SectionTwo {
& p { .SectionTwo > p {
font-family: 'GT Eesti Pro Display'; font-family: 'GT Eesti Pro Display';
font-size: 1.8em; font-size: 1.8em;
font-weight: 400; font-weight: 400;
@@ -9,4 +9,4 @@
text-align: left; text-align: left;
color: #444444; color: #444444;
} }
}
src/components/Candidate/sections/Sidebar.js
+1 -1
View File
@@ -2,7 +2,7 @@ import React from 'react';
import male from '../../../images/medium_male.png'; import male from '../../../images/medium_male.png';
import arrowLeft from '../../../images/arrow_left.png'; import arrowLeft from '../../../images/arrow_left.png';
import arrowRight from '../../../images/arrow_right.png'; import arrowRight from '../../../images/arrow_right.png';
import style from './Sidebar.module.scss'; import style from './Sidebar.module.css';
const Sidebar = () => { const Sidebar = () => {
return ( return (
src/components/Candidate/sections/Sidebar.module.css
+113
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%);
}
src/components/Candidate/sections/Sidebar.module.scss
-108
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%);
}
}
}
}
src/components/Home/index.js
+1 -1
View File
@@ -1,3 +1,3 @@
import Home from './Home'; import Home from './Home';
export default Home; export default Home;
src/components/Home/sections/Description.js
+1 -1
View File
@@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import style from './Description.module.scss'; import style from './Description.module.css';
import photo from '../../../images/medium_male.png'; import photo from '../../../images/medium_male.png';
import rectangle from '../../../images/rectangle_secondPage.png'; import rectangle from '../../../images/rectangle_secondPage.png';
import arrowLeft from '../../../images/arrow_left.png'; import arrowLeft from '../../../images/arrow_left.png';
src/components/Home/sections/Description.module.css
+134
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%);
}
src/components/Home/sections/Description.module.scss
-125
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%);
}
}
}
}
}
src/components/Home/sections/Outstaffing.js
+13 -51
View File
@@ -1,10 +1,18 @@
import React from 'react'; import React, { useState, useEffect } from 'react';
import style from './Outstaffing.module.scss'; import style from './Outstaffing.module.css';
import front from '../../../images/front_end.png'; import front from '../../../images/front_end.png';
import back from '../../../images/back_end.png'; import back from '../../../images/back_end.png';
import design from '../../../images/design.png'; import design from '../../../images/design.png';
import OutstaffingBlock from '../../Blocks/OutstaffingBlock';
const Outstaffing = () => { const Outstaffing = () => {
const [data, setData] = useState([]);
useEffect(() => {
const tempData = ['Ruby on Rails', 'Nginx', 'Docker', 'PostgreSQL', 'Git', 'Typescript', 'ReactJS'];
setData(tempData);
}, []);
return ( return (
<section className={style.outstaffing}> <section className={style.outstaffing}>
<div className="container"> <div className="container">
@@ -19,55 +27,9 @@ const Outstaffing = () => {
</div> </div>
<div className="row"> <div className="row">
<div className="col-4"> <OutstaffingBlock image={front} data={data} header={'# Популярный стек'} />
<div className={style.outstaffing__box}> <OutstaffingBlock image={back} data={data} header={'# Популярный стек'} />
<img src={front} alt="" /> <OutstaffingBlock image={design} data={data} header={'# Популярный стек'} />
<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>
</div> </div>
</div> </div>
</section> </section>
src/components/Home/sections/Outstaffing.module.css
+55
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;
}
src/components/Home/sections/Outstaffing.module.scss
-55
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;
}
}
}
}
src/components/Select/Select.js
+2 -2
View File
@@ -1,6 +1,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import Select from 'react-select'; import Select from 'react-select';
import style from './Select.module.scss'; import style from './Select.module.css';
const options = [ const options = [
{ value: 'Ruby on Rails', label: 'Ruby on Rails' }, { value: 'Ruby on Rails', label: 'Ruby on Rails' },
@@ -35,7 +35,7 @@ const TagSelect = () => {
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-12"> <div className="col-12">
<h2>Найти специалиста по навыкам</h2> <h2 className={style.search__title}>Найти специалиста по навыкам</h2>
<div className={style.search__box}> <div className={style.search__box}>
<Select <Select
value={items} value={items}
src/components/Select/Select.module.scss → src/components/Select/Select.module.css
+23 -22
View File
@@ -1,6 +1,7 @@
.search { .search {
margin-top: 40px; margin-top: 40px;
& h2 { }
.search__title {
font-family: 'GT Eesti Pro Display'; font-family: 'GT Eesti Pro Display';
font-size: 2.4em; font-size: 2.4em;
font-weight: 700; font-weight: 700;
@@ -11,12 +12,12 @@
margin-bottom: 40px; margin-bottom: 40px;
} }
&__box { .search__box {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
& button { .search__box > button {
width: 131px; width: 131px;
height: 40px; height: 40px;
border-radius: 10px; border-radius: 10px;
@@ -29,26 +30,26 @@
letter-spacing: normal; letter-spacing: normal;
text-align: center; text-align: center;
} }
}
.select { .select {
width: 85%; width: 85%;
}
[class$='-placeholder'] {
display: none; [class$='-placeholder'] {
} display: none;
}
[class$='-control'] {
border-color: #e8e8e8 !important; [class$='-control'] {
box-shadow: 0 0 0 1px #e8e8e8; border-color: #e8e8e8 !important;
} box-shadow: 0 0 0 1px #e8e8e8 !important;
}
[class$='-value'] {
font-size: 1.6em; [class$='-value__label'] {
} font-size: 1.4em !important;
}
[class$='-option'] {
font-size: 1.6em; [class$='-option'] {
color: gray; font-size: 1.6em !important;
} color: gray !important;
} }
src/index.js
+1 -6
View File
@@ -4,9 +4,4 @@ import App from './App';
import './index.css'; import './index.css';
ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.render(
<App />,
document.getElementById('root')
);
src/pages/CandidatePage.js
+3 -3
View File
@@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import Candidate from '../components/Candidate' import Candidate from '../components/Candidate';
const CandidatePage = () => <Candidate /> const CandidatePage = () => <Candidate />;
export default CandidatePage; export default CandidatePage;
src/pages/HomePage.js
+3 -3
View File
@@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import Home from '../components/Home' import Home from '../components/Home';
const HomePage = () => <Home /> const HomePage = () => <Home />;
export default HomePage; export default HomePage;