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

project/templates/blocks/about.html

@@ -1,10 +1,11 @@
+{% load static %}
 <div class="anchor" id="about"></div>
 <div class="section section_main section_flex section_about">
   <div class="section__center center">
     <div class="section__column section__column_img">
     </div>
     <div class="section__column section__column_text">
-      <div class="title">Для кого?</div>
+      <div class="title">Для кого?<img class="emoji" src="{% static 'img/emoji-students.png' %}" /></div>
       <div class="text text_left">
         <p>Вы житель мегаполиса и&nbsp;у&nbsp;вас нет времени дополнительно развивать своего ребенка?
       Или&nbsp;вы&nbsp;живете в&nbsp;маленьком городе,

project/templates/blocks/header.html

@@ -25,6 +25,11 @@
           </form>
         </div>
         <nav class="header__nav">
+          <div class="header__group mobile-show">
+            <a class="header__section {% active_link 'index' %}" href="{% url 'index' %}">
+              ГЛАВНАЯ
+            </a>
+          </div>
           <!-- <div class="header__group">
             <a class="header__section {% active_link 'school:school' %}" href="{% url 'school:school' %}">
               ОНЛАЙН-ШКОЛА {% if online or livelesson.is_online %}

project/templates/blocks/online_school.html

@@ -1,3 +1,4 @@
+{% load static %}
 <div class="section section_main section_school">
   <div class="section__center center">
     <div class="title title_center">Процесс</div>
@@ -7,7 +8,7 @@
         <div class="school__text">Каждый день!</div>
       </div>
       <div class="school__col">
-        <div class="school__preview">7 дисциплин</div>
+        <div class="school__preview">5 дисциплин</div>
         <div class="school__text">В разных техниках</div>
       </div>
       <div class="school__col">

project/templates/blocks/reviews.html

@@ -3,7 +3,7 @@
   <div class="reviews-section__center section__center center center_md">
     <div class="reviews-section__title">
       <a id="reviews" name="reviews">
-        <div class="title">Отзывы о Lil School</div>
+        <div class="title">Отзывы о Lil School<img class="emoji" src="{% static 'img/emoji-holiday.png' %}" /></div>
       </a>
       <div class="text text_left">
         <p>Тёплых отзывов настолько много, что потребуется несколько суток, чтобы их просмотреть

project/templates/blocks/students.html

@@ -1,8 +1,10 @@
+{% load static %}
 <div class="anchor" id="students"></div>
 <div class="section section_main section_flex section_students">
   <div class="section__center center">
     <div class="section__column section__column_text">
-      <div class="title">Наши ученики – многократные призеры международных конкурсов</div>
+      <div class="title">Наши ученики – многократные призеры международных конкурсов
+        <img class="emoji" src="{% static 'img/emoji-winners.png' %}" /></div>
     </div>
     <div class="section__column section__column_text">
       <div class="text text_left">

project/templates/blocks/video.html

@@ -1,13 +1,15 @@
-<div class="section section_main section_gray section_flex section_video">
+{% load static %}
+<div class="section section_main section_flex section_video">
   <div class="section__center center">
     <div class="section__column section__column_text">
-      <div class="title">Попробуйте бесплатно</div>
+      <div class="title">Попробуйте бесплатно<img class="emoji" src="{% static 'img/emoji-cat.png' %}" /></div>
       <div class="text text_left">
         <p>Тысячи видео-уроков на разные темы для развития творческого мышления уже ждут вас. Учитесь не выходя из дома!</p>
       </div>
       <div class="section__buttons mobile-hide">
         <a href="#" class="btn btn_white js-video-modal" style="width: auto;"
-        data-video-url="{{ config.MAIN_PAGE_VIDEO_URL|safe }}" data-trial-lesson="1">Смотреть бесплатный урок</a>
+        data-video-url="{{ config.MAIN_PAGE_VIDEO_URL|safe }}" data-trial-lesson="1">Смотреть бесплатный урок
+        <img class="emoji" src="{% static 'img/emoji-present.png' %}" /></a>
       </div>
     </div>
     <div class="section__column section__column_img">
@@ -15,7 +17,8 @@
            src="{{ config.MAIN_PAGE_VIDEO_PREVIEW_IMG.url }}"/>
       <div class="section__buttons mobile-show">
         <a href="#" class="btn btn_white js-video-modal"
-        data-video-url="{{ config.MAIN_PAGE_VIDEO_URL|safe }}" data-trial-lesson="1">Смотреть бесплатный урок</a>
+        data-video-url="{{ config.MAIN_PAGE_VIDEO_URL|safe }}" data-trial-lesson="1">Смотреть бесплатный урок
+        <img class="emoji" src="{% static 'img/emoji-present.png' %}" /></a>
       </div>
     </div>
   </div>

web/src/img/bubble-icon.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="460px" height="200px" viewBox="0 0 460 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->
+    <title>Path 4</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#FFE2EB" offset="0%"></stop>
+            <stop stop-color="#D8F5F5" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Main" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Main-page" transform="translate(-420.000000, -1872.000000)" fill="url(#linearGradient-1)" fill-rule="nonzero">
+            <path d="M547.842222,2033.31441 C567.325204,2042.1871 613.935728,2050.03802 666.138581,2053.35195 C721.237058,2056.84969 772.754776,2054.78726 803.076869,2047.09397 C832.820717,2039.54739 854.56339,2019.81542 861.600443,1995.61066 C868.792378,1970.87317 859.821858,1944.76728 834.631473,1924.42417 C808.807191,1903.56913 757.114211,1890.40587 698.058741,1888.29284 C641.152923,1886.25672 587.043875,1894.9449 559.016359,1911.04033 C542.337069,1920.61878 531.361084,1930.16539 524.069314,1940.42993 C518.801278,1947.84568 516.755616,1952.52274 511.608582,1966.97173 C505.968408,1982.80509 501.407986,1990.80823 491.078309,1999.1047 C478.943057,2008.85135 466.577598,2021.24231 454,2036.27877 C491.686444,2023.12812 522.980771,2021.99232 547.842222,2033.31441 Z M480.325244,1986.8614 C487.7323,1980.90638 490.978009,1975.20479 495.688655,1961.96771 C501.336419,1946.0973 503.799979,1940.45918 510.228317,1931.4011 C518.968002,1919.08613 531.737121,1907.96887 550.381854,1897.25108 C581.579142,1879.31754 638.507393,1870.16761 698.211489,1872.30597 C760.504126,1874.53704 815.337821,1888.51394 844.533155,1912.11477 C874.737615,1936.53136 886.031254,1969.43061 876.945509,2000.71312 C868.229112,2030.72396 841.908219,2054.6345 806.703085,2063.57558 C774.365022,2071.78851 721.330659,2073.91377 664.657805,2070.31251 C610.562224,2066.87502 562.393742,2058.75362 540.57419,2048.80696 C514.812424,2037.06322 478.547899,2041.67354 431.702156,2063.49157 C424.041202,2067.05959 416.65058,2058.09752 421.609042,2051.25237 C441.450886,2023.86075 461.003045,2002.39579 480.325244,1986.8614 Z" id="Path-4"></path>
+        </g>
+    </g>
+</svg>

web/src/sass/_common.sass

@@ -998,6 +998,8 @@ a[name]
     padding: 80px 0
     +m
       padding: 50px 0
+    & .title
+      font-size: 30px
   &_gray
     background: $bg
   &_pink-light
@@ -1051,25 +1053,25 @@ a[name]
 
   &_video
     padding: 70px 0
+    background-image: linear-gradient(345deg, #eeeefa, #dff0ff)
 
     +m
       padding: 30px 0
 
-    & img
+    & .btn.js-video-modal
-      height: 270px
+      padding-top: 5px
-      border-radius: 10px
-      box-shadow: 0 30px 60px 0 rgba(0, 0, 0, 0.2)
       width: auto
-
-      +m
-        width: 100%
-
-    & .btn
       box-shadow: 0 11px 24px 0 rgba(255, 147, 147, 0.3)
 
+      & img
+        margin-bottom: -11px
+
   &_video &__column_img
     text-align: center
 
+  &_video &__column_text
+    flex: 1 0 50%
+
   &_video &__center
     +m
       flex-direction: column
@@ -1107,6 +1109,9 @@ a[name]
       +m
         text-align: left
 
+  &_counters
+    background: #eeeefa
+
   &_counters .text_only_curve
     margin-bottom: 0
 
@@ -1142,16 +1147,38 @@ a[name]
 
   &__quote
     font-size: 18px
-    margin: 0 0 60px
+    margin: -50px 0 -50px -100px
+    position: relative
+    padding: 50px 0 100px 100px
 
     +m
       font-size: 14px
 
+    &:before
+      background-image: url(/static/img/bubble-icon.svg?196dc3af196a)
+      background-size: contain
+      background-repeat: no-repeat
+      position: absolute
+      width: 100%
+      height: 80%
+      content: ' '
+      left: -2%
+      top: -3%
+      z-index: -1
+      +m
+        width: 90%;
+        left: 15%
+        top: 10%
+
     & &-text
       margin-bottom: 20px
 
     & &-name
       text-decoration: underline
+      font-size: 15px
+
+      +m
+        font-size: 13px
 
 
 .reviews-section
@@ -1992,10 +2019,9 @@ a.grey-link
     margin: 0 10px 20px
     flex: 0 0 calc(20% - 20px)
     text-align: center
-    height: 160px
+    height: 170px
     +m
-      margin: 0 5px 10px
+      flex: 0 0 calc(50% - 20px)
-      flex: 0 0 100px
     & a
       height: 120px
       display: flex
@@ -2007,6 +2033,7 @@ a.grey-link
     font-weight: bold;
     letter-spacing: 2px;
     text-transform: uppercase;
+    margin-top: 10px
   &__pic
     max-width: 100%
     object-fit: contain
@@ -2557,10 +2584,14 @@ a.grey-link
 .main-video-preview
   z-index: 10
   position: relative
-  box-shadow: 0 10px 100px rgba(0,0,0,0.20)
+  box-shadow: 0 30px 60px 0 rgba(0, 0, 0, 0.2)
-  width: 100%
-  height: auto
   cursor: pointer
+  max-height: 270px
+  border-radius: 10px
+  max-width: 100%
+  +m
+    width: 100%
+    height: auto
 
 .head
   display: flex
@@ -4077,11 +4108,6 @@ a.grey-link
     text-transform: uppercase
     +t
       font-size: 10px
-  &_main &__col
-    +t
-      flex: 0 0 25%
-    +m
-      flex: 0 0 50%
   &_main &__preview
     margin-bottom: 10px
     font-size: 32px
@@ -4557,6 +4583,7 @@ a
     text-transform: uppercase
     font-family: 'ProximaNova-Bold'
     box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.05), 0 9px 24px 0 rgba(33, 74, 211, 0.1)
+    z-index: 1
     +m
       margin-top: 20px
       font-size: 10px
@@ -4948,6 +4975,10 @@ a
     min-height: 200px
     padding-bottom: 60px
 
+.emoji
+  height: 32px
+  margin-bottom: -7px
+
 .mobile-hide
   +m
     display: none