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">
-                <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="" />

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