feat: добавить хлебные крошки и стили для страницы "Услуги"

- Создан фрагмент `_fragments/breadcrumbs.html` для отображения цепочки навигации
- Обновлён шаблон `services.html` с интеграцией хлебных крошек и новым содержанием
- Добавлен файл `services.css` для стилизации раздела "Услуги"
- Расширены стили breadcrumbs в `style.css`
- Уточнены размеры и отступы в стилях главной страницы (index.css)
- Добавлено фоновое изображение `services-bg.png` для секции "Услуги"

static/css/index.css

@@ -10,7 +10,7 @@
 }
 
 .hero-content {
-    width: 580px;
+    width: 500px;
     height: 400px;
     margin-top: 80px;
 }
@@ -82,6 +82,7 @@
 }
 
 .advantages-title {
+    margin-top: 50px;
     width: 300px;
 
     font-style: normal;
@@ -140,7 +141,7 @@
 }
 
 .advantages-item {
-    width: 250px;
+    width: 280px;
 }
 
 .advantages-item-number {
@@ -163,10 +164,9 @@
 }
 
 .advantages-item-title {
-
     font-style: normal;
     font-weight: 400;
-    font-size: 18px;
+    font-size: 20px;
     line-height: 22px;
     text-align: left;
 
@@ -176,7 +176,7 @@
 }
 
 .advantages-item-subtitle {
-    margin-top: 7px;
+    margin-top: 10px;
 
     font-style: normal;
     font-weight: 400;
@@ -223,21 +223,21 @@
 
     font-style: normal;
     font-weight: 500;
-    font-size: 25px;
+    font-size: 32px;
     line-height: 22px;
 
     color: #ffffff;
 }
 
 .advantages-card-title {
-    margin-top: 20px;
+    margin-top: 30px;
     width: 291px;
     height: 84px;
 
 
     font-style: normal;
     font-weight: 500;
-    font-size: 32px;
+    font-size: 25px;
     line-height: 1.3;
 
     color: #ffffff;
@@ -245,7 +245,7 @@
 
 .advantages-card-button {
     display: inline-block;
-    margin-top: 50px;
+    margin-top: 25px;
 
     padding: 10px 10px;
 

static/css/services.css

@@ -0,0 +1,99 @@
+.box-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.icon {
+    width: 59px;
+    height: 59px;
+    border-radius: 100%;
+    background: #ffffff;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    & > svg {
+        width: 80%;
+        height: 80%;
+
+        fill: #63768d;
+    }
+}
+
+.blue {
+    background: #63768d;
+
+    & > svg {
+        fill: #ffffff;
+    }
+}
+
+.top-box {
+    width: 560px;
+    height: 260px;
+    padding: 39px;
+    background: #63768d;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    & > h2 {
+        margin-top: 8px;
+        font-weight: 400;
+        font-size: 44px;
+        text-align: left;
+
+        color: #ffffff;
+    }
+
+    & > p {
+        margin-top: 8px;
+        font-weight: 400;
+        font-size: 16px;
+        text-align: center;
+
+        color: #ffffff;
+    }
+}
+
+.large {
+    margin-top: 40px;
+    height: 300px;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: end;
+
+    background-image: url(../img/services-bg.png);
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.large-block {
+    height: 170px;
+    margin-right: 190px;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+
+    & > h2 {
+        font-weight: 400;
+        font-size: 44px;
+        text-align: left;
+
+        color: #63768d;
+    }
+
+    & > p {
+        font-style: normal;
+        font-weight: 400;
+        font-size: 16px;
+        text-align: center;
+
+        color: #63768d;
+    }
+}

static/css/style.css

@@ -145,11 +145,15 @@ header {
 }
 
 .logo {
-    font-family: 'Playfair Display', serif;
+    font-family: 'BerlinType', serif;
     font-size: 32px;
     color: var(--dark);
     white-space: nowrap;
     letter-spacing: 1px;
+
+    a {
+        font-family: 'BerlinType', serif;
+    }
 }
 
 .search-wrap {
@@ -281,6 +285,22 @@ header {
     white-space: nowrap;
 }
 
+.breadcrumbs-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 16px;
+    margin-top: 16px;
+}
+
+.breadcrumbs-line > a {
+    font-weight: 400;
+    font-size: 16px;
+    text-align: left;
+
+    color: #554971;
+}
+
 /* ── FOOTER ── */
 footer {
     background: var(--blue-gray);

templates/_fragments/breadcrumbs.html

@@ -0,0 +1,17 @@
+<div class="container breadcrumbs-container">
+    <div class="breadcrumbs-line">
+        <a href="{{ url_1 }}">{{ text_1 }}</a>
+        {% if text_2 != None %}
+            <span>&nbsp;&gt;&nbsp;</span>
+            <a href="{{ url_2 }}">{{ text_2 }}</a>
+            {% if text_3 != None %}
+                <span>&nbsp;&gt;&nbsp;</span>
+                <a href="{{ url_3 }}">{{ text_3 }}</a>
+                {% if text_4 != None %}
+                    <span>&nbsp;&gt;&nbsp;</span>
+                    <a href="{{ url_4 }}">{{ text_4 }}</a>
+                {% endif %}
+            {% endif %}
+        {% endif %}
+    </div>
+</div>

templates/home/services.html

@@ -4,12 +4,54 @@
 {% block title %}Услуги{% endblock %}
 
 {% block add_css %}
+    <link rel="stylesheet" href="{% static "css/services.css" %}">
 {% endblock %}
 
 {% block content %}
-    {% include "_fragments/header.html" %}
+    {% include "_fragments/header.html" with active="services" breadcrumb=1 %}
 
-    WIP
+    <div class="container">
+    {% include '_fragments/breadcrumbs.html' with url_1='/' text_1='Главная' url_2='/services/' text_2='Услуги' %}
+        <div class="box-container">
+            <div class="top-box">
+                <div class="icon">
+                    <svg style="width: 60%; height: 60%" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                         class="bi bi-box2" viewBox="0 0 16 16">
+                        <path d="M2.95.4a1 1 0 0 1 .8-.4h8.5a1 1 0 0 1 .8.4l2.85 3.8a.5.5 0 0 1 .1.3V15a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V4.5a.5.5 0 0 1 .1-.3zM7.5 1H3.75L1.5 4h6zm1 0v3h6l-2.25-3zM15 5H1v10h14z"></path>
+                    </svg>
+                </div>
+                <h2>ДОСТАВКА</h2>
+                <p>Стоимость доставки. На цену доставки влияет несколько факторов
+                    (вес и размер заказа, местоположение адреса, отдаленность от города), поэтому она рассчитывается
+                    индивидуально.</p>
+            </div>
+            <div class="top-box">
+                <div class="icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                         class="bi bi-check-lg" viewBox="0 0 16 16">
+                        <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"></path>
+                    </svg>
+                </div>
+                <h2>СБОРКА</h2>
+                <p>Стоимость сборки. На цену сборки влияет несколько факторов и она рассчитывается индивидуально, В
+                    некоторых случаях сборка бесплатная.</p>
+            </div>
+        </div>
+
+        <div class="large">
+            <div class="large-block">
+                <div class="icon blue">
+                    <svg style="padding-left: 1px; width: 60%; height: 60%" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                         class="bi bi-image" viewBox="0 0 16 16">
+                        <path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"></path>
+                        <path d="M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1z"></path>
+                    </svg>
+                </div>
+                <h2>ДИЗАЙН-ПРОЕКТ</h2>
+                <p>Предоставляем услугу — составление дизайн-проекта.</p>
+            </div>
+        </div>
+    </div>
 
     {% include "_fragments/footer.html" %}
 {% endblock %}