modified: main_dc/valitovgaziz/html/index.html

modified:   main_dc/valitovgaziz/html/style/footer.css
change footer flow in valitovgaziz.ru site

main_dc/valitovgaziz/html/index.html

@@ -168,7 +168,11 @@
           <div class="highlight-item">
             <h4>❤️‍🔥 Меня мотивирует</h4>
             <p>
-              Я часто берусь за проекты, движимый чистым любопытством и страстью к творчеству. Даже когда первоначальное "зачем" не всегда понятно, процесс создания чего-то что принесет большую пользу многим людям - это то, что по-настоящему подпитывает меня, давая энергию для ежедневного стремления к лучшему будущему.
+              Я часто берусь за проекты, движимый чистым любопытством и страстью
+              к творчеству. Даже когда первоначальное "зачем" не всегда понятно,
+              процесс создания чего-то что принесет большую пользу многим людям
+              - это то, что по-настоящему подпитывает меня, давая энергию для
+              ежедневного стремления к лучшему будущему.
             </p>
           </div>
         </div>
@@ -524,36 +528,75 @@
 
     <footer>
       <div class="footer-links">
-        <div class="footer-box footer-link">
+        <div class="footer-section">
-          <span>
+          <h4>Технологии:</h4>
-            Технологии:
+          <div class="two-column-grid">
+            <div class="footer-box">
               <ul>
-              <li>Vue3.js</li>
+                <li>FrontEnd:</li>
+                <li>BackEnd:</li>
+                <li>DataBase:</li>
+              </ul>
+            </div>
+            <div class="footer-box">
+              <ul>
+                <li>Vue3.js Nuxt.js</li>
                 <li>Golang (Gorm, Chi)</li>
-              <li>PostgresQL DB</li>
+                <li>PostgresQL</li>
-            </ul>
-          </span>
-        </div>
-        <div class="footer-box footer-link">
-          Контакты:
-          <ul>
-            <li>Telegram: @valitovgaziz</li>
-            <li>Phone: 8 (962) 543 - 93 - 43</li>
-            <li>email: vaitovgaziz@yandex.ru</li>
               </ul>
             </div>
-        <div class="footer-box footer-link">
+          </div>
-          Сообщество:
+        </div>
+
+        <div class="footer-section">
+          <h4>Контакты:</h4>
+          <div class="two-column-grid">
+            <div class="footer-box">
+              <ul>
+                <li>Telegram:</li>
+                <li>Phone:</li>
+                <li>Email:</li>
+              </ul>
+            </div>
+            <div class="footer-box">
+              <ul>
+                <li>@valitovgaziz</li>
+                <li>8 (962) 543-93-43</li>
+                <li>vaitovgaziz@yandex.ru</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <div class="footer-section">
+          <h4>Сообщество:</h4>
+          <div class="two-column-grid">
+            <div class="footer-box">
+              <ul>
+                <li>Telegram channel:</li>
+                <li>Telegram channel:</li>
+                <li>VK group:</li>
+              </ul>
+            </div>
+            <div class="footer-box">
               <ul>
-            <li><a href="https://t.me/ValitovGaziz_Ufa">Новости проекта</a></li>
                 <li>
-              <a href="https://t.me/+oYymS0r6qG9lYWJi"
+                  <a href="https://t.me/ValitovGaziz_Ufa">Новости проекта</a>
-                >YalArba team in Telegram</a
+                </li>
+                <li>
+                  <a href="https://t.me/+oYymS0r6qG9lYWJi">YalArba team</a>
+                </li>
+                <li>
+                  <a href="https://vk.com/club222248484?from=groups"
+                    >ЯлАрба | Путевозитель</a
                   >
                 </li>
               </ul>
             </div>
           </div>
+        </div>
+      </div>
+
       <div class="footer-end-text">
         <p>Уфа Ufa Өфө 2025 ©</p>
       </div>

main_dc/valitovgaziz/html/style/footer.css

@@ -10,25 +10,69 @@ footer {
 
 .footer-links {
   padding: 1em;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 2rem;
+  justify-content: center;
+}
+
+.footer-section {
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
-  flex-direction: row;
+  gap: 0.5rem;
-  justify-content: space-around;
+}
+
+.footer-section h4 {
+  margin: 0 0 0.5rem 0;
+  font-weight: bold;
+}
+
+.two-column-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  border-left: 1px solid black;
 }
 
 .footer-box {
-  width: fit-content;
+  padding: 0.5rem;
-  height: fit-content;
 }
 
-.footer-link {
+.footer-box ul {
-  padding: 1rem;
+  list-style: none;
-  border-radius: 0.3em;
+  padding: 0;
+  margin: 0;
+  text-align: left;
 }
 
+.footer-box li {
+  margin-bottom: 0.3rem;
+  line-height: 1.3;
+}
+
+.footer-box a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.footer-box a:hover {
+  text-decoration: underline;
+}
 
 .footer-end-text {
-  margin: 0 0 3rem 0;
+  margin: 2rem 0 3rem 0;
   position: relative;
   bottom: 0;
 }
+
+/* Адаптивность для мобильных устройств */
+@media (max-width: 768px) {
+  .footer-links {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
+  
+  .two-column-grid {
+    gap: 0.5rem;
+  }
+}