feat:сделать разметку блока tasks

src/blocks/tasks/__btn/tasks__btn.css

@@ -0,0 +1,5 @@
+.tasks__btn {
+  grid-area: button;
+  align-self: flex-end;
+  justify-self: center;
+}

src/blocks/tasks/__mentor/tasks__mentor.css

@@ -0,0 +1,9 @@
+.tasks__mentor {
+  grid-area: mentor;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #F8F8F8;
+  border-radius: 0 25px 25px 0;
+}

src/blocks/tasks/__reviewer/tasks__reviewer.css

@@ -0,0 +1,9 @@
+.tasks__reviewer {
+  grid-area: reviewer;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #F8F8F8;
+  border-radius: 25px 0 0 25px;
+}

src/blocks/tasks/__title/tasks__title.css

@@ -0,0 +1,6 @@
+.tasks__title {
+  margin: 0;
+  padding-left: 167px;
+  padding-bottom: 44px;
+  align-self: flex-start;
+}

src/blocks/tasks/__tutor-task-icon/tasks__tutor-task-icon.css

@@ -0,0 +1,6 @@
+.tasks__tutor-task-icon {
+  margin: 0;
+  background: url(../../../images/marker-arror.svg) center no-repeat;
+  width: 37px;
+  height: 37px;
+}

src/blocks/tasks/__tutor-task/tasks__tutor-task.css

@@ -0,0 +1,10 @@
+.tasks__tutor-task {
+  max-width: 453px;
+  display: flex;
+  column-gap: 27px;
+}
+
+.tasks__tutor-task > p {
+  margin: 0;
+  max-width: 300px;
+}

src/blocks/tasks/__tutor-tasks/tasks__tutor-tasks.css

@@ -0,0 +1,8 @@
+.tasks__tutor-tasks {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  display: flex;
+  flex-direction: column;
+  row-gap: 25px;
+}

src/blocks/tasks/tasks.css

@@ -0,0 +1,9 @@
+.tasks {
+  display: grid;
+  grid-template-columns: minmax(391px, 705px) minmax(391px, 705px);
+  column-gap: 30px;
+  grid-template-rows: minmax(463px, auto) minmax(115px, auto);
+  grid-template-areas:
+  'mentor reviewer'
+  'button button';
+}

src/index.html

@@ -37,9 +37,56 @@ <h1 class="intro__title">Обучай студентов вместе с Янд
       <p class="intro__text">Стань наставником или ревьюером и делись своим опытом в программировании, анализе данных, менеджменте, маркетинге или дизайне и получай дополнительный доход</p>
       <button class="btn">Хочу делиться знаниями</button>
     </section>
+
+    <section class="tasks">
+      <div class="tasks__mentor">
+        <h2 class="section__title tasks__title">Задачи наставника</h2>
+        <ul class="tasks__tutor-tasks">
+          <li class="tasks__tutor-task">
+            <div class="tasks__tutor-task-icon"></div>
+            <p>Делиться опытом и мотивировать</p>
+          </li>
+          <li class="tasks__tutor-task">
+            <div class="tasks__tutor-task-icon"></div>
+            <p>Давать обратную связь в чате и на звонках</p></li>
+          <li class="tasks__tutor-task">
+            <div class="tasks__tutor-task-icon"></div>
+            <p>Проводить вебинары  2 раза в месяц</p>
+          </li>
+          <li class="tasks__tutor-task">
+            <div class="tasks__tutor-task-icon"></div>
+            <p>Помогать студентам ставить цели, рефлексировать и делать выводы</p>
+          </li>
+        </ul>
+      </div>
+
+      <div class="tasks__reviewer">
+        <h2 class="section__title tasks__title">Задачи ревьюера</h2>
+        <ul class="tasks__tutor-tasks">
+          <li class="tasks__tutor-task">
+            <div class="tasks__tutor-task-icon"></div>
+            <p>Проверять код и проекты студентов</p>
+          </li>
+          <li class="tasks__tutor-task">
+            <div class="tasks__tutor-task-icon"></div>
+            <p>Простыми словами объяснять им их ошибки</p>
+          </li>
+          <li class="tasks__tutor-task">
+            <div class="tasks__tutor-task-icon"></div>
+            <p>Давать корректирующую обратную связь</p>
+          </li>
+          <li class="tasks__tutor-task">
+            <div class="tasks__tutor-task-icon"></div>
+            <p>Оценивать работы — зачёт / незачёт</p>
+          </li>
+        </ul>
+      </div>
+
+      <button class="btn tasks__btn">Посмотреть предложения</button>
+    </section>
 
   </main>
-  
+
   <footer></footer>
 </body>
 </html>

src/pages/index.css

@@ -16,3 +16,13 @@
 @import url(../blocks/intro/__tags/intro__tags.css);
 @import url(../blocks/intro/__tag/intro__tag.css);
 @import url(../blocks/btn/btn.css);
+
+/* TASKS */
+@import url(../blocks/tasks/tasks.css);
+@import url(../blocks/tasks/__title/tasks__title.css);
+@import url(../blocks/tasks/__tutor-tasks/tasks__tutor-tasks.css);
+@import url(../blocks/tasks/__tutor-task/tasks__tutor-task.css);
+@import url(../blocks/tasks/__mentor/tasks__mentor.css);
+@import url(../blocks/tasks/__reviewer/tasks__reviewer.css);
+@import url(../blocks/tasks/__tutor-task-icon/tasks__tutor-task-icon.css);
+@import url(../blocks/tasks/__btn/tasks__btn.css);