add mobile page

src/components/Description/Description.js

@@ -6,7 +6,7 @@ import arrowLeft from '../../images/arrow_left.png';
 import arrowRight from '../../images/arrow_right.png';
 import { Link } from 'react-router-dom';
 
-const Description = ({ candidatesListArr, onhandleTabBar }) => {
+const Description = ({ candidatesListArr }) => {
   return (
     <section className={style.description}>
       <div className="container">
@@ -16,7 +16,7 @@ const Description = ({ candidatesListArr, onhandleTabBar }) => {
               <div className="col-2">
                 <img className={style.description__img} src={photo} alt="" />
               </div>
-              <div className="col-6">
+              <div className="col-12 col-xl-6">
                 <h3 className={style.description__title}>{el.name} разработчик, Middle</h3>
                 <p className={style.description__text}>
                   - 10 лет пишу приложения под IOS, отлично владею Objective-C и Swift.
@@ -24,17 +24,17 @@ const Description = ({ candidatesListArr, onhandleTabBar }) => {
                 <p className={style.description__text}>- 5 лет руковожу командами мобильной разработки.</p>
                 <p className={style.description__text}>- 3 года преподаю в IOS-школе Сбера</p>
               </div>
-              <div className="col-4">
+              <div className="col-12 col-xl-4">
                 <Link to={`/candidate/${el.id}`}>
                   <button className={style.description__button}>Подробное резюме</button>
                 </Link>
               </div>
-              <div className="col-2"></div>
-              <div className="col-6">
+              <div className="col-xl-2"></div>
+              <div className="col-12 col-xl-6">
                 <span className={style.description__sp}> {el.tags}</span>
                 <img className={style.description__rectangle} src={rectangle} alt="" />
               </div>
-              <div className="col-4"></div>
+              <div className="col-xl-4"></div>
             </div>
           ))}
         </div>

src/components/Description/Description.module.css

@@ -1,7 +1,6 @@
 .description {
-  margin-top: 120px;
+  margin-top: 40px;
   margin-bottom: 120px;
- 
 }
 
 .description__wrapper {
@@ -9,14 +8,40 @@
   background-color: #fdfdfd;
   padding-top: 60px;
   border-bottom: none;
+  position: relative;
 }
 .description__img {
   margin-left: 40px;
   margin-top: 16px;
 }
+
+@media (max-width: 575.98px) {
+  .description__img {
+    position: absolute;
+    top: 90px;
+    left: 90px;
+  }
+}
+
+@media (max-width: 375.98px) {
+  .description__img {
+    position: absolute;
+    top: 90px;
+    left: 90px;
+  }
+}
+
+@media (max-width: 340.98px) {
+  .description__img {
+    position: absolute;
+    top: 90px;
+    left: 60px;
+  }
+}
+
 .description__title {
   font-family: 'GT Eesti Pro Display';
-  font-size: 2.5em;
+  font-size: 2.6em;
   font-weight: 700;
   font-style: normal;
   letter-spacing: normal;
@@ -24,6 +49,21 @@
   text-align: left;
   margin-bottom: 10px;
 }
+
+@media (max-width: 575.98px) {
+  .description__title {
+    text-align: center;
+    margin-bottom: 190px;
+    font-size: 3em;
+  }
+}
+
+@media (max-width: 376px) {
+  .description__title {
+    font-size: 2.8em;
+  }
+}
+
 .description__text {
   font-family: 'GT Eesti Pro Display';
   font-size: 1.7em;
@@ -34,6 +74,15 @@
   text-align: left;
   line-height: 28px;
 }
+
+@media (max-width: 575.98px) {
+  .description__text {
+    /* text-align: center; */
+    margin-left: 20px;
+    font-size: 1.6em;
+  }
+}
+
 .description__button {
   width: 280px;
   height: 60px;
@@ -41,16 +90,38 @@
   background-color: #73c141;
   border: none;
   color: #ffffff;
-  font-family: 'Muller Extra Bold';
+  font-family: 'Muller';
   font-size: 1.6em;
-  font-weight: 600;
   line-height: normal;
-  font-style: normal;
   letter-spacing: 0.8px;
   text-align: center;
   margin-top: 74px;
   margin-left: 30px;
 }
+
+@media (max-width: 575.98px) {
+  .description__button {
+    width: 220px;
+    height: 50px;
+    position: absolute;
+    bottom: -170px;
+    z-index: 5;
+    margin-left: 85px;
+  }
+}
+
+@media (max-width: 375.98px) {
+  .description__button {
+    margin-left: 60px;
+  }
+}
+
+@media (max-width: 325.98px) {
+  .description__button {
+    margin-left: 30px;
+  }
+}
+
 .description__sp {
   display: block;
   font-family: 'GT Eesti Pro Display';
@@ -62,10 +133,26 @@
   line-height: 36px;
   margin-top: 20px;
 }
+
+@media (max-width: 575.98px) {
+  .description__sp {
+    font-size: 1.6em;
+    text-align: center;
+    margin-bottom: 120px;
+  }
+}
+
 .description__rectangle {
   display: block;
   margin: 50px auto;
 }
+
+@media (max-width: 575.98px) {
+  .description__rectangle {
+    width: 80%;
+  }
+}
+
 .description__footer {
   display: flex;
   justify-content: center;
@@ -88,6 +175,15 @@
   line-height: normal;
   text-align: center;
 }
+
+@media (max-width: 575.98px) {
+  .description__footer__btn > button {
+    width: 160px;
+    margin-right: 10px;
+    font-size: 1.6em;
+  }
+}
+
 .description__footer__box {
   display: flex;
   align-items: center;
@@ -125,7 +221,7 @@
   height: 30px;
   border-radius: 20px;
   background-color: #74be4d;
-cursor: pointer;
+  cursor: pointer;
 }
 
 .arrow__right > img {
@@ -133,6 +229,4 @@ cursor: pointer;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-
 }
-