refactor: update styles and structure for header, navigation, and banner

- Removed unnecessary "active-page" class from banner link
- Added reusable "nav-block" class for header links
- Adjusted `.nav-links` structure: switched to `inline-flex`, added `justify-content`
- Reduced `.kitchen-banner` margin and added border, padding for text styles
- Enhanced flex layout for `home-index-block` in index.css

static/css/index.css

@@ -285,6 +285,10 @@
     background-position: right;
     background-size: 600px auto;
     margin-top: 20px;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
 }
 
 .about-left-block {
@@ -424,7 +428,7 @@
 /* -- KITCHEN BANNER -- */
 
 .kitchen-banner {
-    margin-top: 225px;
+    margin-top: 120px;
     height: 410px;
     background-color: #63768d;
 
@@ -466,6 +470,9 @@
     font-size: 24px;
     text-align: left;
 
+    padding: 10px;
+    border: 1px solid #ffffff;
+
     color: #ffffff;
 }
 

static/css/style.css

@@ -257,11 +257,11 @@ header {
 }
 
 .nav-links {
-    display: flex;
+    display: inline-flex;
     align-items: center;
+    justify-content: center;
     gap: 28px;
     flex: 1;
-    max-width: 430px;
 }
 
 .nav-links a {
@@ -275,6 +275,10 @@ header {
     color: var(--dark);
 }
 
+.nav-block {
+    width: 150px;
+}
+
 .phone-link {
     display: flex;
     align-items: center;

templates/_fragments/header.html

@@ -46,7 +46,7 @@
         </div>
 
         <nav class="nav-bar">
-            <a href="/catalog/" class="catalog-btn {% if active == 'catalog' %}active-page{% endif %}">
+            <a href="/catalog/" class="catalog-btn nav-block {% if active == 'catalog' %}active-page{% endif %}">
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                      stroke-width="2" width="18" height="18">
                     <line x1="3" y1="6" x2="21" y2="6"></line>
@@ -62,7 +62,7 @@
                 <a class="{% if active == 'warranty' %}active-page{% endif %}" href="/warranty/">Гарантия</a>
                 <a class="{% if active == 'contacts' %}active-page{% endif %}" href="/contacts/">Контакты</a>
             </div>
-            <a href="tel:+375296881819" class="phone-link">
+            <a href="tel:+375296881819" class="phone-link nav-block">
                 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor"
                      class="bi bi-telephone" viewBox="0 0 16 16">
                     <path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.6 17.6 0 0 0 4.168 6.608 17.6 17.6 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.68.68 0 0 0-.58-.122l-2.19.547a1.75 1.75 0 0 1-1.657-.459L5.482 8.062a1.75 1.75 0 0 1-.46-1.657l.548-2.19a.68.68 0 0 0-.122-.58zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.68.68 0 0 0 .178.643l2.457 2.457a.68.68 0 0 0 .644.178l2.189-.547a1.75 1.75 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.6 18.6 0 0 1-7.01-4.42 18.6 18.6 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877z"></path>

templates/home/_fragments/banner.html

@@ -2,7 +2,7 @@
     <div class="kitchen-content">
         <p>Успей заказать с большой выгодой и получите доставку в подарок!</p>
         <h2>ГОТОВОЕ РЕШЕНИЕ ДЛЯ КУХНИ</h2>
-        <a href="#" class="active-page">Перейти</a>
+        <a href="#">Перейти</a>
     </div>
     {#    <img src="{% static 'img/kitchen-banner.jpg' %}" alt="">#}
 </section>