0.0.16

static/aerbimCSS.css

@@ -40,6 +40,10 @@ body,html{
     margin-top: 55px;
 }
 
+.clear_both {
+    clear: both;
+}
+
 
 /*header*/
 
@@ -71,6 +75,26 @@ body,html{
     text-transform: uppercase;
 }
 
+.standart_txt{
+    color: #ffffff;
+    /*font-family: Spline Sans;*/
+    font-family: -apple-system, 'Raleway-Regular', sans-serif;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: normal;
+    text-transform: uppercase;
+}
+
+.standart_semi_bold_txt{
+    color: #000000;
+    /*font-family: Spline Sans;*/
+    font-family: -apple-system, 'Raleway-Regular', sans-serif;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: normal;
+    text-transform: uppercase;
+}
+
 .large_txt{
     color: #000000;
     font-family: -apple-system, 'Raleway-Regular', sans-serif;
@@ -89,6 +113,15 @@ body,html{
     line-height: normal;
 }
 
+.medium_small_bold_txt{
+    color: #000000;
+    font-family: -apple-system, 'Raleway-Regular', sans-serif;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 800;
+    line-height: normal;
+}
+
 .text_header.last_right{
     padding-right: 0;
 }
@@ -181,8 +214,38 @@ body,html{
 /* service */
 .block_service{
     margin: 80px 25px;
+    display: flex;
+    width: 100%;
 }
 
+.service_block_container{
+    width: 33%;
+}
+
+.childs_service_container{
+    border-left: 1px solid #9CDDF7;
+    padding-left: 20px;
+    margin-top: 20px;
+}
+
+.services_block_child{
+    margin-top: 30px;
+}
+
+.left_part_service{
+    width: 30%;
+    float: left;
+}
+
+.right_part_service{
+    width: 65%;
+    float: right;
+}
+
+.right_part_service.w_100{
+    width: 100%;
+    float: unset;
+}
 
 /*how with us working*/
 

templates/blocks/b_service.html

@@ -3,31 +3,34 @@
 <div class="cut-width">
     <div class="block_service">
         {% for service in services %}
-            <div class="service_container">
+            <div class="service_block_container">
-                {% if sub_serv.picture %}
+                <div class="service_container">
-                    <div class="left_part_service">
+                    {% if sub_serv.picture %}
-                        <img class="service_img" src="{{ MEDIA_URL }}{{ service.picture }}">
+                        <div class="left_part_service">
+                            <img class="service_img" src="{{ MEDIA_URL }}{{ service.picture }}">
+                        </div>
+                    {% endif %}
+                    <div class="right_part_service medium_small_bold_txt {% if not sub_serv.picture %}w_100{% endif %}">
+                        {{ service.name }}
+                    </div>
+                {% if service.rel_children_for_service.all %}
+                    <div class="childs_service_container">
+                        {% for sub_serv in service.rel_children_for_service.all %}
+                            <div class="services_block_child">
+                                {% if sub_serv.picture %}
+                                    <div class="left_part_service">
+                                        <img class="service_img" src="{{ MEDIA_URL }}{{ sub_serv.picture }}">
+                                    </div>
+                                {% endif %}
+                                <div class="right_part_service standart_semi_bold_txt {% if not sub_serv.picture %}w_100{% endif %}">
+                                    {{ sub_serv.name }}
+                                </div>
+                                <div class="clear_both"></div>
+                            </div>
+                        {% endfor %}
                     </div>
                 {% endif %}
-                <div class="right_part_service {% if sub_serv.picture %}w_100{% endif %}">
-                    {{ service.name }}
                 </div>
-            {% if service.rel_children_for_service.all %}
-                {% for sub_serv in service.rel_children_for_service.all %}
-                    <div class="services_block">
-                        <div class="service_container">
-                            {% if sub_serv.picture %}
-                                <div class="left_part_service">
-                                    <img class="service_img" src="{{ MEDIA_URL }}{{ sub_serv.picture }}">
-                                </div>
-                            {% endif %}
-                            <div class="right_part_service {% if not sub_serv.picture %}w_100{% endif %}">
-                                {{ sub_serv.name }}
-                            </div>
-                        </div>
-                    </div>
-                {% endfor %}
-            {% endif %}
             </div>
         {% endfor %}
     </div>