finished first mobile page

src/components/Candidate/Candidate.js

@@ -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">
+              <div className={style.icon}>
-                <img src={img} alt="" />
+                <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="" />

src/components/Candidate/Candidate.module.css

@@ -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;
 }

src/components/Home/Home.js

@@ -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 (

src/components/Outstaffing/Outstaffing.module.css

@@ -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;
 }

src/components/Outstaffing/OutstaffingBlock.js

@@ -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}>