новая главная и мобильная версия

project/templates/blocks/students.html

@@ -0,0 +1,30 @@
+<div class="anchor" id="students"></div>
+<div class="section section_flex section_students">
+  <div class="section__center center">
+    <div class="section__column section__column_text">
+      <div class="title">Наши ученики – многократные призеры международных конкурсов</div>
+    </div>
+    <div class="section__column section__column_text">
+      <div class="text text_left">
+        <p>Креативное мышление необходимо всем: дизайнерам, математикам, инженерам, предпринимателям и врачам.</p>
+      </div>
+    </div>
+  </div>
+  <div class="section__center center" style="margin-top: 40px;">
+    <div class="section__column section__column_img" style="background-image: url(/static/img/zlata.png)">
+    </div>
+    <div class="section__column section__column_text">
+      <div class="section__quote">
+        <div class="section__quote-text">
+          Лил Скул для меня это место, где Солнце может быть синего цвета
+        </div>
+        <div class="section__quote-name">Злата Пыльцина, 7 лет. Город Волгоград.</div>
+      </div>
+      <div class="section__buttons">
+        <a class="btn js-video-modal" style="width: auto;"
+        data-video-url="https://www.youtube.com/watch?v=QrlR5sL_eGI"
+        href="#">Видео отзыв</a>
+      </div>
+    </div>
+  </div>
+</div>

project/templates/lilcity/home.html

@@ -16,6 +16,7 @@
   {% include "templates/blocks/about.html" %}
   {% include "templates/blocks/video.html" %}
   {% include "templates/blocks/counters.html" %}
+  {% include "templates/blocks/students.html" %}
   {% include "templates/blocks/reviews.html" %}
   {% include "templates/blocks/online_school.html" %}
   {% include "templates/blocks/teachers.html" %}

web/src/sass/_common.sass

@@ -960,6 +960,42 @@ a[name]
   padding: 50px 0
   +t
     padding: 40px 0
+
+  &__column
+    flex: 50%
+
+    &_img
+      background-position: bottom center
+      background-size: contain
+      background-repeat: no-repeat
+
+    &_text
+      padding-right: 20px
+
+  & .text
+    font-size: 20px
+
+  &__title
+    font-size: 30px
+    margin-bottom: 40px
+    font-family: 'ProximaNova-Bold', sans-serif
+
+  &__buttons
+    margin-bottom: 45px
+
+    +m
+      text-align: center
+      margin-bottom: 10px
+
+    & .btn
+      width: 200px
+      margin-bottom: 15px
+      margin-right: 10px
+
+  & .btn
+    border-radius: 10px
+    box-shadow: 0 11px 20px 0 rgba(0, 0, 0, 0.1)
+
   &_gray
     background: $bg
   &_pink-light
@@ -978,6 +1014,7 @@ a[name]
       transform: translateX(-50%)
       +t
         max-width: calc(100% - 30px)
+
   &_gradient
     background-image: linear-gradient(-225deg, $bg 0%, #FFF2F2 100%)
   &_tabs
@@ -1046,9 +1083,9 @@ a[name]
     +m
       flex-direction: column-reverse
 
-  &_about &__column-img
-    background-image: url(/static/img/girl-umbrela.png);
-    background-position: 40% bottom;
+  &_about &__column_img
+    background-image: url(/static/img/girl-umbrela.png)
+    background-position: 40% bottom
 
     +m
       flex: 0 0 300px
@@ -1068,41 +1105,6 @@ a[name]
       +m
         text-align: left
 
-  &__column
-    flex: 50%
-
-    &_img
-      background-position: bottom center
-      background-size: contain
-      background-repeat: no-repeat
-
-    &_text
-      padding-right: 20px
-
-  & .text
-    font-size: 20px
-
-  &__title
-    font-size: 30px
-    margin-bottom: 40px
-    font-family: 'ProximaNova-Bold', sans-serif
-
-  &__buttons
-    margin-bottom: 45px
-
-    +m
-      text-align: center
-      margin-bottom: 10px
-
-    & .btn
-      width: 200px
-      margin-bottom: 15px
-      margin-right: 10px
-
-  & .btn
-    border-radius: 10px
-    box-shadow: 0 11px 20px 0 rgba(0, 0, 0, 0.1)
-
   &_counters .text_only_curve
     margin-bottom: 0
 
@@ -1111,6 +1113,24 @@ a[name]
         left: -10px
         bottom: -125px
 
+  &_students
+    padding-bottom: 0
+
+  &_students &__column_img
+    background-image: url(/static/img/zlata.png)
+    height: 400px
+    background-position: bottom center
+
+  &__quote
+    font-size: 18px
+    margin: 0 0 60px
+
+    & &-text
+      margin-bottom: 20px
+
+    & &-name
+      text-decoration: underline
+
 
 .reviews-section
   background: linear-gradient(to bottom, rgba(248,248,248,1) 0%, rgba(254,244,244,1) 100%)