0.0.4

static/aerbimCSS.css

@@ -728,3 +728,68 @@ body,html{
     padding-bottom: 5px;
 }
 
+/* how dev*/
+.block_how_dev{
+    width: 100%;
+}
+
+.block_how_dev_title{
+    width: 100%;
+    text-align: center;
+    margin-bottom: 50px;
+}
+
+.how_dev_container_widgets{
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.how_dev_widget{
+    width: calc(25% - 25px);
+    margin-right: 25px;
+    margin-bottom: 100px;
+}
+
+.how_dev_widget_description{
+    width: 90%;
+    font-weight: 400;
+    font-size: 16px;
+    color: #000000;
+    margin-top: 15px;
+    margin-bottom: 25px;
+    text-transform: unset;
+}
+
+.img_how_arrow{
+    width: 35px;
+}
+
+.how_dev_arrow_container{
+    width: 35px;
+    height: 35px;
+}
+
+.how_dev_widget_txt{
+    width: calc(100% - 55px);
+    margin-right: 20px;
+}
+
+.first_line_widget_how_dev{
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.widget_how_dev_characters{
+    width: 100%;
+}
+
+.widget_how_dev_characters_title{
+    font-weight: 700;
+    color: #000000;
+}
+
+.list_characters_widget_how_dev > li{
+    color: #000000;
+}

static/arrow_right_how_dev/Expand_right_double.svg

@@ -0,0 +1,6 @@
+<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Expand_right_double">
+<path id="Vector 9" d="M17.5 26.25L26.25 17.5L17.5 8.75" stroke="#9CDDF7" stroke-width="3"/>
+<path id="Vector 10" d="M8.75 26.25L17.5 17.5L8.75 8.75" stroke="#9CDDF7" stroke-width="3"/>
+</g>
+</svg>

static/images/how_dev_arrow.svg

@@ -0,0 +1,6 @@
+<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Expand_right_double">
+<path id="Vector 9" d="M17.5 26.25L26.25 17.5L17.5 8.75" stroke="#9CDDF7" stroke-width="3"/>
+<path id="Vector 10" d="M8.75 26.25L17.5 17.5L8.75 8.75" stroke="#9CDDF7" stroke-width="3"/>
+</g>
+</svg>

templates/blocks/b_how_dev.html

@@ -1,9 +1,33 @@
 {% load static %}
-<div>
-    <div>{{ block.name }}</div>
-    <div>
-        {% for w in block.rel_widgets_for_block.all %}
-            {{ w.name }}
-        {% endfor %}
+<div class="cut-width">
+    <div class="block_how_dev">
+        <div class="large_txt block_how_dev_title">{{ block.name }}</div>
+        <div class="how_dev_container_widgets">
+            {% for w in block.rel_widgets_for_block.all %}
+                <div class="how_dev_widget">
+                    <div class="first_line_widget_how_dev">
+                        <div class="medium_small_bold_txt how_dev_widget_txt">
+                            0{{ forloop.counter }} {{ w.name }}
+                        </div>
+                        <div class="how_dev_arrow_container">
+                            <img class="img_how_arrow" src="{% static "images/how_dev_arrow.svg" %}">
+                        </div>
+                    </div>
+                <div class="how_dev_widget_description standart_txt">
+                    {{ w.description }}
+                </div>
+                <div class="widget_how_dev_characters">
+                    <div class="standart_semi_bold_txt widget_how_dev_characters_title">
+                        Участники:
+                    </div>
+                    <div class="list_characters_widget_how_dev_container">
+                        <ul class="list_characters_widget_how_dev">
+                            <li class="standart_txt">{{ w.text }}</li>
+                        </ul>
+                    </div>
+                </div>
+                </div>
+            {% endfor %}
+        </div>
     </div>
 </div>