Repository: NIKITA-kvi/my_first_project
Pull request #4: BLOCK-2-4-about
Author: login: NIKITA-kvi
Created: 2025-03-09T22:57:38Z | Merged: 2025-03-12T09:02:38Z

## Задача

- BLOCK-2-4-about

## Что было сделано

-  верстка секции about
-  добавление заголовка в секции
- добавление 4 блоков статистики, содержащие числа и текст.

## Шаги для воспроизведения и проверки функционала на стейдже

- Описание шагов

## Дополнительная информация

- Любая дополнительная информация



Diff:
diff --git a/src/pages/index.html b/src/pages/index.html
index 31c56a6..fb3c4ff 100644
--- a/src/pages/index.html
+++ b/src/pages/index.html
@@ -38,6 +38,36 @@ <h1 class="promo__text-title">ROBO SCHOOL</h1>
       </section>
     </main>
 
+    <section class="about">
+      <div class="container">
+        <p class="about__school">
+          <b>Robo School</b> – учреждение для формирования кадрового педагогического резерва в сфере
+          робототехники и программирования
+        </p>
+        <div class="about__items">
+          <div class="about__item about-item">
+            <span class="about-item__number">10</span>
+            <div class="about-item__text">УМК по различным направлениям по робототехнике</div>
+          </div>
+
+          <div class="about-item">
+            <span class="about-item__number">20</span>
+            <div class="about-item__text">Школ, в которых запущена робототехника</div>
+          </div>
+
+          <div class="about-item">
+            <span class="about-item__number">100</span>
+            <div class="about-item__text">Педагогов прошедших курсы повышения квалификации</div>
+          </div>
+
+          <div class="about-item">
+            <span class="about-item__number">10 000</span>
+            <div class="about-item__text">Обученных детей на базе собственных центров</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
     <footer class="footer">
       <div class="container container--wide">
         <div class="footer__content">
diff --git a/src/styles/blocks/about.scss b/src/styles/blocks/about.scss
new file mode 100644
index 0000000..b0c25d4
--- /dev/null
+++ b/src/styles/blocks/about.scss
@@ -0,0 +1,32 @@
+@use '../variables' as *;
+
+.about {
+  &__school {
+    max-width: 891px;
+    margin-bottom: 60px;
+    font-size: 30px;
+  }
+
+  &__items {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 20px;
+  }
+
+  .about-item {
+    flex-basis: 260px;
+
+    &__number {
+      font-size: 70px;
+      font-weight: 600;
+      word-break: keep-all;
+      color: $accent-color;
+    }
+
+    &__text {
+      font-size: 18px;
+      color: $text-color-quaternary;
+    }
+  }
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 45ce470..254845f 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -5,4 +5,5 @@
 @use 'button';
 @use './blocks/header';
 @use './blocks/promo';
+@use './blocks/about';
 @use './blocks/footer';
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 7d779de..9c9a8e1 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -11,6 +11,7 @@ $bg-color-secondary: $primary-color;
 $text-color-primary: $primary-color;
 $text-color-secondary: #b8b7bd;
 $text-color-tertiary: $secondary-color;
+$text-color-quaternary: #5b5866;
 
 $controls-bg-primary: $accent-color;
 $controls-bg-primary-hover: #bc0202;


Reviews:
user: login: Gr1mmz
state: COMMENTED
author_association: NONE
submitted_at: 2025-03-10T13:16:40Z
user: login: Gr1mmz
state: COMMENTED
author_association: NONE
submitted_at: 2025-03-10T13:17:52Z
user: login: Gr1mmz
state: COMMENTED
author_association: NONE
submitted_at: 2025-03-10T13:18:39Z
user: login: Gr1mmz
state: COMMENTED
author_association: NONE
submitted_at: 2025-03-10T13:24:02Z
user: login: Gr1mmz
state: COMMENTED
author_association: NONE
submitted_at: 2025-03-10T13:28:31Z
user: login: Gr1mmz
state: COMMENTED
author_association: NONE
submitted_at: 2025-03-10T13:29:12Z
user: login: Gr1mmz
state: COMMENTED
author_association: NONE
submitted_at: 2025-03-11T08:33:27Z
user: login: Gr1mmz
state: COMMENTED
author_association: NONE
submitted_at: 2025-03-11T08:34:01Z

Review comments:
diff_hunk: @@ -38,6 +38,36 @@ <h1 class="promo__text-title">ROBO SCHOOL</h1>
       </section>
     </main>
 
+    <section class="about">
+      <div class="container">
+        <h2 class="about__title">
+          <span class="about__title-highlight">Robo school</span> – учреждение для формирования
path: src/pages/index.html
user: login: Gr1mmz
body: у нас есть возможность сделать текст жирным без добавления класса с помощью аж двух строчных тегов. Узнай этот нюанс, чем они отличаются и выбери подходящий, пожалуйста
created_at: 2025-03-10T13:16:40Z
author_association: NONE
diff_hunk: @@ -38,6 +38,36 @@ <h1 class="promo__text-title">ROBO SCHOOL</h1>
       </section>
     </main>
 
+    <section class="about">
+      <div class="container">
+        <h2 class="about__title">
+          <span class="about__title-highlight">Robo school</span> – учреждение для формирования
+          кадрового педагогического резерва в сфере робототехники и программирования
+        </h2>
+        <div class="about__content">
path: src/pages/index.html
user: login: Gr1mmz
body: лучше делать более абстрактный нейминг в данном случае. например about__items для обертки и about__item для каждого блока
created_at: 2025-03-10T13:17:52Z
author_association: NONE
diff_hunk: @@ -38,6 +38,36 @@ <h1 class="promo__text-title">ROBO SCHOOL</h1>
       </section>
     </main>
 
+    <section class="about">
+      <div class="container">
+        <h2 class="about__title">
path: src/pages/index.html
user: login: Gr1mmz
body: это все таки не тайтл по семантике. Оформи в параграф
created_at: 2025-03-10T13:18:39Z
author_association: NONE
diff_hunk: @@ -0,0 +1,37 @@
+@use '../variables' as *;
+
+.about {
+  &__title {
+    max-width: 891px;
+    margin-bottom: 60px;
+    font-size: 30px;
+
+    &-highlight {
+      font-size: 30px;
+      font-weight: 600;
+    }
+  }
+
+  &__content {
+    display: flex;
+    justify-content: space-between;
path: src/styles/blocks/about.scss
user: login: Gr1mmz
body: здесь можно задать другое значение чтобы красивее переносить айтемы
created_at: 2025-03-10T13:24:02Z
author_association: NONE
diff_hunk: @@ -11,6 +11,9 @@ $bg-color-secondary: $primary-color;
 $text-color-primary: $primary-color;
 $text-color-secondary: #b8b7bd;
 $text-color-tertiary: $secondary-color;
+$text-color-quaternary: #5b6866;
path: src/styles/variables.scss
user: login: Gr1mmz
body: я вижу что этот цвет другой если его пипеткой брать
created_at: 2025-03-10T13:28:31Z
author_association: NONE
diff_hunk: @@ -0,0 +1,37 @@
+@use '../variables' as *;
+
+.about {
+  &__title {
+    max-width: 891px;
+    margin-bottom: 60px;
+    font-size: 30px;
+
+    &-highlight {
+      font-size: 30px;
+      font-weight: 600;
+    }
+  }
+
+  &__content {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 20px;
+
+    &-statistics {
+      flex-basis: 260px;
+    }
+
+    &-number {
+      font-size: 70px;
+      font-weight: 600;
+      word-break: keep-all;
+      color: $statistics-number-color;
path: src/styles/blocks/about.scss
user: login: Gr1mmz
body: нет, плодить лишние переменные не надо. Ты можешь написать сюда либо сразу accent-color, либо создать отдельный цвет как $text-color-accent
created_at: 2025-03-10T13:29:12Z
author_association: NONE
diff_hunk: @@ -44,25 +44,25 @@ <h1 class="promo__text-title">ROBO SCHOOL</h1>
           <b>Robo School</b> – учреждение для формирования кадрового педагогического резерва в сфере
           робототехники и программирования
         </p>
-        <div class="about__items">
-          <div class="about__item">
-            <span class="about__item-number">10</span>
-            <div class="about__item-text">УМК по различным направлениям по робототехнике</div>
+        <div class="about__item about-item">
path: src/pages/index.html
user: login: Gr1mmz
body: как у тебя вот тут див, который является оберткой для всех айтемов имеет класс в единственном числе? и почему следующий вложенный элемент имеет такой же класс
created_at: 2025-03-11T08:33:27Z
author_association: NONE
diff_hunk: @@ -7,26 +7,26 @@
     font-size: 30px;
   }
 
-  &__items {
+  &__item {
path: src/styles/blocks/about.scss
user: login: Gr1mmz
body: вот эти стили лучше перенести тогда в .about-item. А то ты получается размазываешь код одной сущности по двум местам
created_at: 2025-03-11T08:34:00Z
author_association: NONE

PR comments:
user: login: github-actions[bot]
created_at: 2025-03-09T23:01:00Z
body: 🚀 Preview доступен по ссылке: https://NIKITA-kvi.github.io/my_first_project/pr-4/
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-03-10T14:34:19Z
body: 🚀 Preview доступен по ссылке: https://NIKITA-kvi.github.io/my_first_project/pr-4/
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-03-10T23:26:50Z
body: 🚀 Preview доступен по ссылке: https://NIKITA-kvi.github.io/my_first_project/pr-4/
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-03-11T11:37:07Z
body: 🚀 Preview доступен по ссылке: https://NIKITA-kvi.github.io/my_first_project/pr-4/
author_association: NONE