шаблон solution2 Изменение название проекта

[DetectorDevilDetectorDevil является верифицированным участником.]

✅ Плавным появлением при прокрутке
✅ Мягким, красивым пастельно-зелёным градиентом (не ярким, а уютным и элегантным)
✅ Волнистым фоном под текстом
✅ Динамическим градиентным текстом
✅ Эффектом мягкого мерцания (flicker) — как тёплое свечение
✅ Анимацией частиц при появлении и наведении
✅ Адаптацией под мобильные устройства
✅ Шрифтом, подключённым через CSS
✅ Все эффекты — плавные, мягкие, без резких переходов

Было​

---

Стало​

---

Посмотреть вложение Видео-03-09-2025 221037.mp4​

Публиковать код в открытом доступе?

 

[asliddin_]

Было​

---

тало

---

​

Публиковать код в открытом доступе

Мы этому тоже научим?

 

[DetectorDevilDetectorDevil является верифицированным участником.]

Посмотреть вложение 2640

Мы этому тоже научим?

Данная анимация делается через css в файле style_three.css

Вот сам код

#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 60px;
    margin: -65px 0 0 -65px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3dbf81;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 1s linear infinite;
}

#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3dbf81;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}

#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3dbf81;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

Или можно просто убрать загрузки страницы в файле head.tpl. Найдите элемент кид и удалите его или закомментируйте.

 <div class="preloader">
  <div id="preloader">
   <div id="loader"></div>
  </div>
  </div>

 

[неконеко является верифицированным участником.]

Добавление блока «Контакты». При желании можно вставить ссылки и на другие социальные сети. В коде, думаю, каждый легко разберётся, чтобы добавить VK, Discord и т. п.



Вписываем код стилей/css по пути - templates/ВАШ ШАБЛОН/css/style_two.css (можно в самый низ файла)

.vk_contact {
font-size: 18px;
width: 42px;
transition: 0.2s;
display: flex;
background: #2196F3;
color: #fff;
height: 42px;
border-radius: 11px;
align-items: center;
justify-content: center;
box-shadow: 0 0 10px #3390ec;
}

.flex_btn_contact_admin {
display: flex;
gap: 5px;
}

.flex_s_admin {
display: flex;
line-height: 14px;
flex-direction: column;
}

.img_admin_own {
width: 30px !important;
border-radius: 50px;
height: 30px !important;
}

.flex_admin_own {
display: flex;
align-items: center;
gap: 10px;
}

.block_admin_own {
display: flex;
background: #333340;
padding: 10px;
border-radius: 11px;
justify-content: space-between;
border: dashed 1px #4a4a5b !important;
}

.flex_menu_admin {
display: flex;
gap: 6px;
margin-top: 15px;
flex-direction: column;
}

.name_top_usr {
color: #ffff;
font-weight: 600;
font-size: 13px;
}

.flex_top_usr {
display: flex;
flex-direction: column;
line-height: 17px;
}

.flex_top_usr_i {
display: flex;
gap: 10px;
align-items: center;
}

.flex_top_usr_i i{
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
color: #ffffff;
height: 36px;
width: 36px;
border-radius: 10px;
}

Вписываем код по пути - templates/ВАШ ШАБЛОН/tpl/parts/navigation.tpl (можно в самый низ файла)

<div class="block_solution" bis_skin_checked="1">
<div class="flex_top_usr_i" bis_skin_checked="1">
<i class="bx bx-crown" style="background: var(--GLOBAL, radial-gradient(100% 100% at 50% 0, #4d4d5f 0, #363642 100%));"></i>
<div class="flex_top_usr" bis_skin_checked="1">
<span class="name_top_usr">Руководство проекта</span>
<span class="desp_top_usr">Контакты</span>
</div>
</div>

<div class="flex_menu_admin" bis_skin_checked="1">
<div class="block_admin_own" bis_skin_checked="1">
<a href="ссылка на ваш профиль на сайте" class="flex_admin_own" bis_skin_checked="1">
<img src="ссылка на вашу аватарку" class="img_admin_own">
<div class="flex_s_admin" bis_skin_checked="1">
<span class="name_own">ВАШ НИК</span>
<span class="group_sidebar" style="color: #fff;color: #fff;background-size: cover">ВАША ДОЛЖНОСТЬ</span>
</div>
</a>
<div class="flex_btn_contact_admin" bis_skin_checked="1">
<a href="ссылка на ваш телеграм" class="vk_contact" bis_skin_checked="1"><i class="bx bxl-telegram"></i></a>
</div>
</div>
</div>

<div class="flex_menu_admin" bis_skin_checked="1">
<div class="block_admin_own" bis_skin_checked="1">
<a href="ссылка на ваш профиль на сайте" class="flex_admin_own" bis_skin_checked="1">
<img src="ссылка на вашу аватарку" class="img_admin_own">
<div class="flex_s_admin" bis_skin_checked="1">
<span class="name_own">ВАШ НИК</span>
<span class="group_sidebar" style="background-size: cover">ВАША ДОЛЖНОСТЬ</span>
</div>
</a>
<div class="flex_btn_contact_admin" bis_skin_checked="1">
<a href="ссылка на ваш телеграм" class="vk_contact" bis_skin_checked="1"><i class="bx bxl-telegram"></i></a>
</div>
</div>
</div>
</div>

 

[asliddin_]

Друг, вы ошибаетесь, это не так, не обычное. Я очень старался сделать это, закончил за 1 месяц. Основная часть будет на фронтенде (HTML). Если кому-то понадобится, можно дать этот reloader