- Окт
- 701
- 216
Пользователь
У кого есть новый магазин форума крмп онлайн
Решено Магазин форума?
- Автор темы ⲇⲉⲣυⲧⲁⲧ ⲣⲓⲧⲉʀⲋⲕⲓⲩ 𓆩♡𓆪
- Дата начала
Решение
- Дек
- 367
- 52
Заблокированный
- Апр
- 231
- 838
Продавец
вк напиши свое
- Окт
- 701
- 216
Пользователь
@رجل ياباني, @demorarespache
- Ноя
- 1,891
- 6,007
Команда форума
Администратор
HTML:
<xf:set var="$buyUrl" value="'#'" />
<div class="block">
<div class="block-container">
<div class="block-body block-row">
<div class="block serviceShop">
<div class="serviceShop__container">
<h2 class="serviceShop__title">
<span class="serviceShop__titleText">Выберите услугу</span>
<span class="serviceShop__titleLine" aria-hidden="true"></span>
</h2>
<div class="serviceShop__grid">
<div class="serviceCard serviceCard--hot serviceCard--cyan">
<div class="serviceCard__badge">HOT</div>
<div class="serviceCard__head">
<div class="serviceCard__headGlow" aria-hidden="true"></div>
<h3 class="serviceCard__name">
<span class="serviceCard__nameGlow">Nick_Name</span>
</h3>
<div class="serviceCard__meta">
<span class="serviceCard__tag serviceCard__tag--cyan">Личная Краска</span>
</div>
</div>
<div class="serviceCard__features">
<div class="serviceCard__feature">
<span class="serviceCard__check" aria-hidden="true">✓</span>
<span class="serviceCard__featureText">Личная краска по вашему желанию.</span>
</div>
<div class="serviceCard__feature">
<span class="serviceCard__check" aria-hidden="true">✓</span>
<span class="serviceCard__featureText">Прямая связь с руководством проекта.</span>
</div>
<div class="serviceCard__feature">
<span class="serviceCard__check" aria-hidden="true">✓</span>
<span class="serviceCard__featureText">Вы выделяетесь среди обычных пользователей.</span>
</div>
<div class="serviceCard__feature">
<span class="serviceCard__check" aria-hidden="true">✓</span>
<span class="serviceCard__featureText">Большое внимание на ваш аккаунт.</span>
</div>
<div class="serviceCard__feature">
<span class="serviceCard__check" aria-hidden="true">✓</span>
<span class="serviceCard__featureText">Становитесь доверенным пользователем.</span>
</div>
</div>
<div class="serviceCard__price">
<div class="serviceCard__priceRow">
<div class="serviceCard__priceCol">
<div class="serviceCard__oldPrice">1499₽</div>
<div class="serviceCard__newPrice">999₽</div>
</div>
<div class="serviceCard__discount">-35%</div>
</div>
<div class="serviceCard__note">Одна оплата • Навсегда</div>
</div>
<xf:button class="serviceCard__buy serviceCard__buy--cyan" href="{$buyUrl}" target="_blank" rel="noopener">
<span class="serviceCard__buyText">Приобрести</span>
<span class="serviceCard__buyShine" aria-hidden="true"></span>
</xf:button>
</div>
<div class="serviceCard serviceCard--exclusive serviceCard--purple">
<div class="serviceCard__badge">EXCLUSIVE</div>
<div class="serviceCard__head">
<div class="serviceCard__headGlow" aria-hidden="true"></div>
<h3 class="serviceCard__name">
<span class="serviceCard__nameGlow">Alexander_Mayorov</span>
</h3>
<div class="serviceCard__meta">
<span class="serviceCard__tag serviceCard__tag--purple">Директор проекта</span>
</div>
</div>
<div class="serviceCard__features">
<div class="serviceCard__feature">
<span class="serviceCard__check" aria-hidden="true">✓</span>
<span class="serviceCard__featureText">Роспись от Директора проекта.</span>
</div>
<div class="serviceCard__feature">
<span class="serviceCard__check" aria-hidden="true">✓</span>
<span class="serviceCard__featureText">Персональное пожелание в профиле.</span>
</div>
</div>
<div class="serviceCard__highlight serviceCard__highlight--purple">
<b>Самая низкая цена за 90 дней!</b>
</div>
<div class="serviceCard__price">
<div class="serviceCard__priceRow">
<div class="serviceCard__priceCol">
<div class="serviceCard__oldPrice">599₽</div>
<div class="serviceCard__newPrice">399₽</div>
</div>
<div class="serviceCard__discount">-35%</div>
</div>
<div class="serviceCard__note">Разовый платеж • Одна роспись</div>
</div>
<xf:button class="serviceCard__buy serviceCard__buy--purple" href="{$buyUrl}" target="_blank" rel="noopener">
<span class="serviceCard__buyText">Приобрести</span>
<span class="serviceCard__buyShine" aria-hidden="true"></span>
</xf:button>
</div>
<div class="serviceCard serviceCard--status serviceCard--green">
<div class="serviceCard__badge">STATUS</div>
<div class="serviceCard__head">
<div class="serviceCard__headGlow" aria-hidden="true"></div>
<h3 class="serviceCard__name">
<span class="serviceCard__nameGlow">Верификация</span>
</h3>
<div class="serviceCard__meta">
<span class="serviceCard__tag serviceCard__tag--green">Галочка на форуме</span>
</div>
</div>
<div class="serviceCard__features">
<div class="serviceCard__feature">
<span class="serviceCard__check" aria-hidden="true">✓</span>
<span class="serviceCard__featureText">Галочка возле вашего форумного ника.</span>
</div>
<div class="serviceCard__feature">
<span class="serviceCard__check" aria-hidden="true">✓</span>
<span class="serviceCard__featureText">Статус проверенного пользователя.</span>
</div>
<div class="serviceCard__feature">
<span class="serviceCard__check" aria-hidden="true">✓</span>
<span class="serviceCard__featureText">Прямая связь с руководством проекта.</span>
</div>
</div>
<div class="serviceCard__price">
<div class="serviceCard__priceRow">
<div class="serviceCard__priceCol">
<div class="serviceCard__oldPrice">799₽</div>
<div class="serviceCard__newPrice">499₽</div>
</div>
<div class="serviceCard__discount">-35%</div>
</div>
<div class="serviceCard__note">Каждый месяц • Продлевается</div>
</div>
<xf:button class="serviceCard__buy serviceCard__buy--green" href="{$buyUrl}" target="_blank" rel="noopener">
<span class="serviceCard__buyText">Приобрести</span>
<span class="serviceCard__buyShine" aria-hidden="true"></span>
</xf:button>
</div>
<div class="serviceCard serviceCard--new serviceCard--orange">
<div class="serviceCard__badge serviceCard__badge--darkText">NEW</div>
<div class="serviceCard__head">
<div class="serviceCard__headGlow" aria-hidden="true"></div>
<h3 class="serviceCard__name">
<span class="serviceCard__nameGlow">Создание семьи</span>
</h3>
<div class="serviceCard__meta">
<span class="serviceCard__tag serviceCard__tag--orange">Собственное сообщество</span>
</div>
</div>
<div class="serviceCard__features">
<div class="serviceCard__feature">
<span class="serviceCard__check serviceCard__check--darkText" aria-hidden="true">✓</span>
<span class="serviceCard__featureText">Регистрация вашей семьи на форуме.</span>
</div>
<div class="serviceCard__feature">
<span class="serviceCard__check serviceCard__check--darkText" aria-hidden="true">✓</span>
<span class="serviceCard__featureText">Уникальный префикс и цвет фамилии.</span>
</div>
<div class="serviceCard__feature">
<span class="serviceCard__check serviceCard__check--darkText" aria-hidden="true">✓</span>
<span class="serviceCard__featureText">Доступ к семейному управлению.</span>
</div>
</div>
<div class="serviceCard__price">
<div class="serviceCard__priceRow">
<div class="serviceCard__priceCol">
<div class="serviceCard__oldPrice">2499₽</div>
<div class="serviceCard__newPrice">1699₽</div>
</div>
<div class="serviceCard__discount">-32%</div>
</div>
<div class="serviceCard__note">Разовый взнос • Навсегда</div>
</div>
<xf:button class="serviceCard__buy serviceCard__buy--orange serviceCard__buy--darkText" href="{$buyUrl}" target="_blank" rel="noopener">
<span class="serviceCard__buyText">Приобрести</span>
<span class="serviceCard__buyShine serviceCard__buyShine--strong" aria-hidden="true"></span>
</xf:button>
</div>
</div>
<div class="serviceShop__section">
<div class="serviceNotice serviceNotice--danger">
<div class="serviceNotice__label">⚠ ВАЖНО</div>
<div class="serviceNotice__lead">Перед покупкой вы берёте всю ответственность оплаты и покупки товара на СЕБЯ.<br>Чтобы купить товар, нажмите на кнопку "Приобрести" у нужной вам карты товара, и вас перекинет в личный чат с продавцом.</div>
<div class="serviceNotice__text">Покупая услугу, ты соглашаешься с тем, что:<ul class="serviceNotice__list"><li>Оплата происходит добровольно;</li><li>Возврат средств не предусмотрен;</li><li>Все вопросы решаются в личных сообщениях с продавцом.</li></ul></div>
</div>
</div>
<div class="serviceShop__section">
<div class="serviceCommands">
<div class="serviceCommands__title">Быстрые команды для заказа</div>
<div class="serviceCommands__grid">
<div class="serviceCommands__item serviceCommands__item--cyan">
<div class="serviceCommands__label">Краска</div>
<code class="serviceCommands__code">/личнаяКраска</code>
</div>
<div class="serviceCommands__item serviceCommands__item--purple">
<div class="serviceCommands__label">Роспись</div>
<code class="serviceCommands__code">/роспаМайора</code>
</div>
<div class="serviceCommands__item serviceCommands__item--green">
<div class="serviceCommands__label">Галочка</div>
<code class="serviceCommands__code">/Галочка</code>
</div>
<div class="serviceCommands__item serviceCommands__item--orange">
<div class="serviceCommands__label">Семья</div>
<code class="serviceCommands__code">/создатьСемью</code>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Less:
@serviceBg: @xf-contentBg;
@serviceCardBg: #1a1f21;
@serviceBorder: #2a2f31;
@serviceText: #ccc;
@serviceMuted: #999;
@serviceNote: #777;
@serviceTitleColor: #ffeb38;
@serviceTitleLine: #ffaf38;
@serviceCyan: #38e1ff;
@servicePurple: #cf31ff;
@servicePurpleBadge: #c300ff;
@serviceGreen: #00aa55;
@serviceOrange: #ffaf38;
@serviceSaleGreen: #00ff88;
@serviceDanger: #ff3333;
.serviceShop
{
padding: 0 10px;
margin: 30px 0;
&__container
{
max-width: 1100px;
margin: 0 auto;
}
&__title
{
text-align: center;
font-size: 26px;
margin: 0 0 25px;
font-weight: 700;
letter-spacing: 0.5px;
position: relative;
display: inline-block;
left: 50%;
transform: translateX(-50%);
padding: 0 20px;
color: @serviceTitleColor;
}
&__titleText
{
background: @serviceBg;
padding: 0 15px;
}
&__titleLine
{
display: block;
height: 3px;
margin-top: 5px;
background: linear-gradient(90deg, transparent, @serviceTitleLine, transparent);
}
&__grid
{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
}
&__section
{
max-width: 1000px;
margin: 30px auto;
padding: 0 15px;
&:first-of-type
{
margin-top: 40px;
}
}
}
.serviceCard
{
background: @serviceCardBg;
border: 2px solid @serviceBorder;
border-radius: 12px;
padding: 18px;
position: relative;
overflow: hidden;
transition: box-shadow .2s, border-color .2s;
&:hover
{
border-color: #3a3f41;
box-shadow: 0 5px 15px rgba(0,0,0,.3);
}
&--cyan
{
border-color: @serviceCyan;
}
&--purple
{
border-color: @servicePurpleBadge;
}
&--green
{
border-color: @serviceGreen;
}
&--orange
{
border-color: @serviceOrange;
}
&__badge
{
position: absolute;
top: 0;
left: 0;
padding: 5px 12px;
font-size: 12px;
font-weight: 700;
border-radius: 0 0 8px 0;
color: #fff;
background: @serviceBorder;
.serviceCard--cyan &
{
background: @serviceCyan;
}
.serviceCard--purple &
{
background: @servicePurpleBadge;
}
.serviceCard--green &
{
background: @serviceGreen;
}
.serviceCard--orange &
{
background: @serviceOrange;
}
&--darkText
{
color: #000;
}
}
&__head
{
text-align: center;
padding: 10px;
margin-bottom: 15px;
position: relative;
}
&__headGlow
{
position: absolute;
inset: 0;
opacity: .3;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
.serviceCard--cyan &
{
background: linear-gradient(90deg, transparent, fade(@serviceCyan, 10%), transparent);
}
.serviceCard--purple &
{
background: linear-gradient(90deg, transparent, fade(@servicePurpleBadge, 10%), transparent);
}
.serviceCard--green &
{
background: linear-gradient(90deg, transparent, fade(@serviceGreen, 10%), transparent);
}
.serviceCard--orange &
{
background: linear-gradient(90deg, transparent, fade(@serviceOrange, 10%), transparent);
}
}
&__name
{
margin: 0;
font-size: 20px;
font-weight: 700;
position: relative;
.serviceCard--cyan &
{
color: @serviceCyan;
}
.serviceCard--purple &
{
color: @servicePurple;
}
.serviceCard--green &
{
color: @serviceSaleGreen;
}
.serviceCard--orange &
{
color: @serviceOrange;
}
}
&__nameGlow
{
text-shadow: 0 0 10px rgba(255,255,255,.15);
.serviceCard--cyan &
{
text-shadow: 0 0 10px @serviceCyan;
}
.serviceCard--purple &
{
text-shadow: 0 0 10px fade(@servicePurple, 50%);
}
.serviceCard--green &
{
text-shadow: 0 0 10px fade(@serviceSaleGreen, 50%);
}
.serviceCard--orange &
{
text-shadow: 0 0 10px fade(@serviceOrange, 50%);
}
}
&__meta
{
margin-top: 5px;
}
&__tag
{
display: inline-block;
padding: 3px 10px;
border-radius: 12px;
font-size: 13px;
color: #fff;
border: 1px solid fade(#fff, 15%);
background: rgba(255,255,255,.06);
&--cyan
{
background: fade(@serviceCyan, 20%);
border-color: fade(@serviceCyan, 40%);
}
&--purple
{
background: fade(@servicePurple, 20%);
border-color: fade(@servicePurple, 30%);
}
&--green
{
background: fade(@serviceSaleGreen, 20%);
border-color: fade(@serviceSaleGreen, 30%);
}
&--orange
{
background: fade(@serviceOrange, 20%);
border-color: fade(@serviceOrange, 30%);
}
}
&__features
{
margin-bottom: 20px;
}
&__feature
{
display: flex;
align-items: flex-start;
margin-bottom: 8px;
&:last-child
{
margin-bottom: 0;
}
}
&__check
{
width: 20px;
height: 20px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
margin-right: 10px;
flex-shrink: 0;
color: #fff;
.serviceCard--cyan &
{
background: @serviceCyan;
}
.serviceCard--purple &
{
background: @servicePurple;
}
.serviceCard--green &
{
background: @serviceGreen;
}
.serviceCard--orange &
{
background: @serviceOrange;
}
&--darkText
{
color: #000;
}
}
&__featureText
{
color: @serviceText;
font-size: 14px;
}
&__highlight
{
padding: 10px;
border-radius: 6px;
margin-bottom: 15px;
text-align: center;
font-size: 13px;
&--purple
{
color: @servicePurple;
background: fade(@servicePurple, 10%);
border: 1px solid fade(@servicePurple, 20%);
}
}
&__price
{
background: fade(#282d2f, 80%);
padding: 12px;
border-radius: 8px;
margin-bottom: 15px;
border: 1px solid @serviceBorder;
}
&__priceRow
{
display: flex;
justify-content: space-between;
align-items: center;
}
&__oldPrice
{
color: #888;
font-size: 13px;
text-decoration: line-through;
margin-bottom: 2px;
}
&__newPrice
{
color: @serviceSaleGreen;
font-size: 24px;
font-weight: 700;
}
&__discount
{
background: @serviceDanger;
color: #fff;
padding: 3px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 700;
}
&__note
{
color: @serviceNote;
font-size: 12px;
margin-top: 5px;
text-align: center;
}
&__buy.button
{
width: 100%;
border: none;
padding: 12px;
border-radius: 6px;
cursor: pointer;
font-size: 15px;
font-weight: 700;
position: relative;
overflow: hidden;
color: #fff;
background: @serviceBorder;
transition: filter .2s;
&:hover
{
filter: brightness(1.1);
}
&.serviceCard__buy--cyan
{
background: @serviceCyan;
&:hover
{
background-color: @serviceCyan;
}
}
&.serviceCard__buy--purple
{
background: @servicePurple;
&:hover
{
background-color: @servicePurple;
}
}
&.serviceCard__buy--green
{
background: @serviceGreen;
&:hover
{
background-color: @serviceGreen;
}
}
&.serviceCard__buy--orange
{
background: @serviceOrange;
&:hover
{
background-color: @serviceOrange;
}
}
&--darkText
{
color: #000;
}
}
&__buyText
{
position: relative;
z-index: 1;
}
&__buyShine
{
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
transition: left .5s;
}
&__buy:hover &__buyShine
{
left: 100%;
}
&__buyShine--strong
{
background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
}
}
.serviceNotice
{
border: 2px solid @serviceDanger;
border-radius: 8px;
padding: 20px;
position: relative;
background: fade(@serviceDanger, 5%);
&__label
{
position: absolute;
top: -12px;
left: 20px;
background: @serviceDanger;
color: #fff;
padding: 4px 15px;
border-radius: 4px;
font-size: 13px;
font-weight: 700;
}
&__lead
{
margin-top: 10px;
color: #ff6666;
font-size: 15px;
font-weight: 700;
text-align: center;
margin-bottom: 10px;
}
&__text
{
color: #bbb;
font-size: 14px;
line-height: 1.5;
}
&__list
{
margin: 10px 0 0 20px;
color: @serviceMuted;
}
}
.serviceCommands
{
background: @serviceCardBg;
border: 1px solid @serviceBorder;
border-radius: 8px;
padding: 15px;
&__title
{
color: @serviceOrange;
font-size: 16px;
margin-bottom: 15px;
font-weight: 700;
text-align: center;
}
&__grid
{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}
&__item
{
padding: 10px;
border-radius: 6px;
border: 1px solid fade(#fff, 10%);
background: rgba(255,255,255,.03);
&--cyan
{
background: fade(@serviceCyan, 10%);
border-color: fade(@serviceCyan, 30%);
}
&--purple
{
background: fade(@servicePurpleBadge, 10%);
border-color: fade(@servicePurpleBadge, 30%);
}
&--green
{
background: fade(@serviceGreen, 10%);
border-color: fade(@serviceGreen, 30%);
}
&--orange
{
background: fade(@serviceOrange, 10%);
border-color: fade(@serviceOrange, 30%);
}
}
&__label
{
font-size: 13px;
margin-bottom: 5px;
color: #aaf9ff;
.serviceCommands__item--purple &
{
color: #ebaaff;
}
.serviceCommands__item--green &
{
color: #40f8a2;
}
.serviceCommands__item--orange &
{
color: #ffe0b3;
}
}
&__code
{
display: inline-block;
font-size: 16px;
font-weight: 700;
font-family: "Courier New", monospace;
.serviceCommands__item--cyan &
{
color: @serviceCyan;
}
.serviceCommands__item--purple &
{
color: @servicePurple;
}
.serviceCommands__item--green &
{
color: @serviceGreen;
}
.serviceCommands__item--orange &
{
color: @serviceOrange;
}
}
}
@media (max-width: @xf-responsiveMedium)
{
.serviceShop__grid
{
grid-template-columns: 1fr;
max-width: 400px;
margin: 0 auto;
}
}
Решение
- Дек
- 367
- 52
Заблокированный
Как оставить ссылку на кнопку приобрести на тг или ВК т.к не нашел там
- Дек
- 367
- 52
Заблокированный
Отмена,нашел
- Статус