finished first mobile page
This commit is contained in:
Hope87
parent
0784d38a97
commit
88a5e710ce
@ -20,7 +20,22 @@ const Candidate = () => {
|
||||
|
||||
const currentCandidate = candidatesList.find((el) => el.id === Number(candidateId));
|
||||
|
||||
const { name, img } = currentCandidate;
|
||||
const { name, img, header } = currentCandidate;
|
||||
|
||||
console.log(currentCandidate);
|
||||
|
||||
let classes;
|
||||
|
||||
console.log(classes);
|
||||
|
||||
if (name === 'Backend') {
|
||||
classes = style.back;
|
||||
console.log(classes);
|
||||
} else if (name === 'Design') {
|
||||
classes = style.des;
|
||||
} else if (name === 'Frontend') {
|
||||
classes = style.front;
|
||||
}
|
||||
|
||||
return (
|
||||
<section className={style.candidate}>
|
||||
@ -47,19 +62,20 @@ const Candidate = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="icon">
|
||||
<img src={img} alt="" />
|
||||
<div className={style.icon}>
|
||||
<h3>{header}</h3>
|
||||
<img className={classes} src={img} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={style.candidate__main}>
|
||||
<div className="row">
|
||||
<div className="col-4">
|
||||
<div className="col-12 col-xl-4">
|
||||
<Sidebar />
|
||||
</div>
|
||||
|
||||
<div className="col-8">
|
||||
<div className="col-12 col-xl-8">
|
||||
<div className={style.candidate__main__description}>
|
||||
<h2>{name} разработчик, Middle</h2>
|
||||
<img src={rectangle} alt="" />
|
||||
|
||||
@ -1,77 +1,3 @@
|
||||
/* .candidate {
|
||||
&__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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 120px;
|
||||
margin-left: 60px;
|
||||
|
||||
& .arrow {
|
||||
& img {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
& 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__main {
|
||||
margin-top: 60px;
|
||||
|
||||
&__description {
|
||||
padding-left: 16px;
|
||||
& 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;
|
||||
}
|
||||
& 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
} */
|
||||
|
||||
.candidate__title {
|
||||
margin-top: 60px;
|
||||
}
|
||||
@ -101,12 +27,27 @@
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.candidate__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 0;
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.arrow {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow__img > img {
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -123,6 +64,52 @@
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.arrow__sp > span {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
min-width: 260px;
|
||||
min-height: 120px;
|
||||
cursor: pointer;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon > h3 {
|
||||
position: absolute;
|
||||
right: 25%;
|
||||
top: 40%;
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: normal;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.icon > img {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.front {
|
||||
left: -5%;
|
||||
}
|
||||
|
||||
.back {
|
||||
top: 11%;
|
||||
left: -9%;
|
||||
}
|
||||
|
||||
.des {
|
||||
top: 24%;
|
||||
left: -9%;
|
||||
}
|
||||
|
||||
.candidate__main {
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
@ -9,6 +9,7 @@ export const candidatesList = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Frontend',
|
||||
header: 'Фронтенд',
|
||||
img: front,
|
||||
tags: 'JavaScript · Html · Css · Vue.js · ReactJS · Angular · MobX',
|
||||
},
|
||||
@ -16,12 +17,14 @@ export const candidatesList = [
|
||||
{
|
||||
id: 2,
|
||||
name: 'Backend',
|
||||
header: 'Бэкенд',
|
||||
img: back,
|
||||
tags: 'Node.js · Express · Php · Ruby on Rails · Python · Wordpress · Java',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'Design',
|
||||
header: 'Дизайн',
|
||||
img: design,
|
||||
tags: 'Figma · Avocode · PhotoShop · Xara · Pinegrow · Macaw · KompoZer',
|
||||
},
|
||||
@ -56,6 +59,7 @@ const Home = () => {
|
||||
const [candidates, setCandidates] = useState([]);
|
||||
|
||||
const [selectedTab, setSelectedTab] = useState('');
|
||||
// const [active, setActive] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setTabs(tabsList);
|
||||
@ -64,6 +68,11 @@ const Home = () => {
|
||||
|
||||
const handleBlockClick = (name) => {
|
||||
setSelectedTab(name);
|
||||
// const screenWidth = window.screen.width;
|
||||
|
||||
// if (screenWidth < 576) {
|
||||
// setActive(true);
|
||||
// }
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@ -49,7 +49,6 @@
|
||||
min-width: 260px;
|
||||
min-height: 120px;
|
||||
cursor: pointer;
|
||||
/* border: 2px solid #cdeaba; */
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
@ -102,6 +101,39 @@
|
||||
left: -9%;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.mobile__none {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile__block {
|
||||
display: block;
|
||||
animation: fadeInFromNone 0.5s ease-out;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
@keyframes fadeInFromNone {
|
||||
0% {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transform: translateY(-100px);
|
||||
}
|
||||
|
||||
10% {
|
||||
display: block;
|
||||
opacity: 0;
|
||||
transform: translateY(-50px);
|
||||
}
|
||||
|
||||
100% {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.outstaffing__box > div > ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
@ -3,14 +3,14 @@ import style from './Outstaffing.module.css';
|
||||
|
||||
const OutstaffingBlock = ({ data = {}, onClick, onTabBarClick, selected }) => {
|
||||
const { img, text, tags, name, header } = data;
|
||||
let clas;
|
||||
let classes;
|
||||
|
||||
if (name === 'Backend') {
|
||||
clas = style.back;
|
||||
classes = style.back;
|
||||
} else if (name === 'Design') {
|
||||
clas = style.des;
|
||||
classes = style.des;
|
||||
} else if (name === 'Frontend') {
|
||||
clas = style.front;
|
||||
classes = style.front;
|
||||
}
|
||||
|
||||
return (
|
||||
@ -20,9 +20,9 @@ const OutstaffingBlock = ({ data = {}, onClick, onTabBarClick, selected }) => {
|
||||
onClick={() => onTabBarClick(name)}
|
||||
>
|
||||
<h3>{header}</h3>
|
||||
<img className={clas} src={img} alt="img" />
|
||||
<img className={classes} src={img} alt="img" />
|
||||
</div>
|
||||
<div>
|
||||
<div className={`${selected ? style.mobile__block : style.mobile__none}`}>
|
||||
<p>{text}</p>
|
||||
{tags && (
|
||||
<ul className={style.items}>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user