Style Bloack index.tpl 1.0

[asliddin_]

asliddin_ добавил(а) новый ресурс:

Style Bloack index.tpl - Style Bloack by Asliddin

Для добавления на сайт специального дополнительного дизайнерского блока:
Адаптивный дизайн и стильный блок с hover-эффектом

Скриншоты

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

Узнать больше об этом ресурсе...

 

[неко]

asliddin_ добавил(а) новый ресурс:

Style Bloack index.tpl - Style Bloack by Asliddin



Узнать больше об этом ресурсе...

🤣 🤡

​

 

[THEmolodoy]

И зачем нам png файлы?

 

[THEmolodoy]

Код вставляем в home/index.tlp в нужное для вас место и подгоняем картинки.

<div class="container">
<div class="row">
<div class="col-lg-9 order-is-first">

<style>
.shops-list {
display: flex;
overflow-x: auto;
gap: 24px;
background: linear-gradient(1deg, #212129 30%, #292932 100%);
border-radius: 18px;
padding: 11px;
margin-bottom: 24px;
}

.shop-item {
border-radius: 18px;
flex: 0 0 auto;
position: relative; /* iconni joylashtirish uchun */
}

@media (max-width: 599px) {
.shop-item {
flex-basis: 40%;
}
}

.shop-item img {
width: 100%;
height: 233px;
border-radius: 18px;
transition: 0.3s all;
}

.shop-item:hover {
cursor: pointer;
}

/* Hover effekti (o‘zingizda bor edi, qoldirdim) */
.shop-item.shop-item-vip:hover {
box-shadow: 0px 0px 15px 14px rgba(0, 41, 255, 0.2);
}
.shop-item.shop-item-zombie:hover {
box-shadow: 0px 0px 15px 14px rgba(94, 255, 0, 0.2);
}
.shop-item.shop-item-gun:hover {
box-shadow: 0px 0px 15px 14px rgba(255, 0, 0, 0.2);
}
.shop-item.shop-item-public:hover {
box-shadow: 0px 0px 15px 14px rgba(251, 0, 255, 0.2);
}
.shop-item.shop-item-cases:hover {
box-shadow: 0px 0px 15px 14px rgba(255, 255, 255, 0.2);
}

/* ICONLAR STYLE */
.shop-item i {
position: absolute;
top: 15px;
left: 15px;
font-size: 18px;
color: #fff;
border-radius: 8px;
padding: 6px;
}

.shop-item-vip i {
background: radial-gradient(100% 100% at 50% 0, #3791ff 0, #225ea7 100%);
}
.shop-item-zombie i {
background: radial-gradient(100% 100% at 50% 0, #4cd7a7 0, #237558 100%);
}
.shop-item-gun i {
background: radial-gradient(100% 100% at 50% 0, #ff4949 0, #912d2d 100%);
}
.shop-item-public i {
background: radial-gradient(100% 100% at 50% 0, #ff00ff 0, #770077 100%);
}
.shop-item-cases i {
background: radial-gradient(100% 100% at 50% 0, #ffffff 0, #0000ff 100%);
}
</style>

<div class="shops-list">
<a href="/store" class="shop-item shop-item-vip">
<i class="bx bx-cart-alt"></i>
<img src="/templates/solution_red/img/custom_shop/index_vip.png" alt="vip shop banner">
</a>

<a href="/store" class="shop-item shop-item-zombie">
<i class="bx bx-crosshair"></i>
<img src="/templates/solution_red/img/custom_shop/index_anew.png" alt="Baner Anew">
</a>

<a href="/store" class="shop-item shop-item-gun">
<i class="bx bx-bowling-ball"></i>
<img src="/templates/solution_red/img/custom_shop/index_weapons.png" alt="gun shop banner">
</a>

<a href="/store" class="shop-item shop-item-public">
<i class="bx bx-images"></i>
<img src="/templates/solution_red/img/custom_shop/index_model.png" alt="public model banner">
</a>

<a href="/store" class="shop-item shop-item-cases">
<i class="bx bx-gift"></i>
<img src="/templates/solution_red/img/custom_shop/index_cases.png" alt="cases banner">
</a>
</div>

 

[DetectorDevil]

И зачем нам png файлы?

Код вставляем в home/index.tlp в нужное для вас место и подгоняем картинки.

Уважаемый пользователь!

Прежде чем критиковать автора, пожалуйста, ознакомьтесь с инструкцией по установке. Вероятно, вы не уделили этому внимания, так как автор уже предоставил подробную инструкцию и указал тот же код, который почти совпадает с вашим.

 

[Magnatik]

Код вставляем в home/index.tlp в нужное для вас место и подгоняем картинки.

Господи, с этого сайта даже скопировать код не возможно.

 

[DetectorDevil]

Господи, с этого сайта даже скопировать код не возможно.

Здравствуйте! С нашего сайта можно скопировать код, если он оформлен правильно.