modified: main_dc/valitovgaziz/html/index.html

modified:   main_dc/valitovgaziz/html/style/footer.css
change footer flow in valitovgaziz.ru site
This commit is contained in:
2025-11-05 04:27:23 +05:00
parent 3819486119
commit 8bfeb68a89
2 changed files with 123 additions and 36 deletions
+70 -27
View File
@@ -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">
<span>
Технологии:
<ul>
<li>Vue3.js</li>
<li>Golang (Gorm, Chi)</li>
<li>PostgresQL DB</li>
</ul>
</span>
<div class="footer-section">
<h4>Технологии:</h4>
<div class="two-column-grid">
<div class="footer-box">
<ul>
<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</li>
</ul>
</div>
</div>
</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 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-box footer-link">
Сообщество:
<ul>
<li><a href="https://t.me/ValitovGaziz_Ufa">Новости проекта</a></li>
<li>
<a href="https://t.me/+oYymS0r6qG9lYWJi"
>YalArba team in Telegram</a
>
</li>
</ul>
<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">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>
+53 -9
View File
@@ -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: row;
justify-content: space-around;
flex-direction: column;
gap: 0.5rem;
}
.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;
height: fit-content;
padding: 0.5rem;
}
.footer-link {
padding: 1rem;
border-radius: 0.3em;
.footer-box ul {
list-style: none;
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;
}
}