[html]<style>
/* =========================================================
CROSSFEELING — PROMO
========================================================= */
.cf-promo {
max-width: 760px;
margin: 16px auto;
padding: var(--16);
overflow: hidden;
background: rgb(var(--secondary400) / .20);
border-radius: var(--br800);
font-family: var(--font);
color: rgb(var(--text900));
}
/* HERO
--------------------------------------------------------- */
.cf-promo__hero {
display: grid;
grid-template-columns: minmax(250px, .95fr) 1.05fr;
gap: var(--16);
padding: var(--8);
}
/* IMAGE */
.cf-promo__visual {
position: relative;
display: block;
overflow: hidden;
min-height: 210px;
background: rgb(var(--secondary400) / .38);
border-radius: var(--br400);
}
.cf-promo__visual img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition:
transform .35s ease,
filter .35s ease;
}
.cf-promo__visual:hover img {
transform: scale(1.025);
}
/* CONTENT */
.cf-promo__content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: var(--16);
}
/* LABEL */
.cf-promo__label {
display: inline-flex;
align-items: center;
gap: var(--6);
margin-bottom: var(--12);
padding: var(--6) var(--12);
background: rgb(var(--primary400));
color: rgb(var(--light100));
border-radius: var(--br800);
font: 800 .78rem/100% var(--font);
text-transform: uppercase;
letter-spacing: .08em;
}
.cf-promo__label i {
font-size: .9em;
}
/* TITLE */
.cf-promo__title {
margin: 0 0 var(--12);
font: 800 clamp(2rem, 4vw, 3.1rem)/.9 var(--font);
letter-spacing: -.055em;
text-transform: uppercase;
color: rgb(var(--text900));
}
.cf-promo__title span {
color: rgb(var(--primary400));
}
/* DESCRIPTION */
.post-content .cf-promo__description,
.cf-promo__description {
max-width: 38ch;
margin: 0;
padding: 0;
font: 500 1rem/155% var(--font);
color: rgb(var(--text900) / .72);
text-align: left;
}
/* MAIN LINK */
.cf-promo__main-link {
display: inline-flex;
align-items: center;
gap: var(--8);
margin-top: var(--16);
padding: var(--8) var(--16);
background: rgb(var(--dark900c));
color: rgb(var(--light100c)) !important;
border-radius: var(--br800);
font: 800 .9rem/100% var(--font);
text-transform: uppercase;
transition:
background .2s ease,
color .2s ease,
transform .2s ease;
}
.cf-promo__main-link:hover {
background: rgb(var(--primary400));
color: rgb(var(--light100)) !important;
transform: translateY(-2px);
}
.cf-promo__main-link i {
transition: transform .2s ease;
}
.cf-promo__main-link:hover i {
transform: translateX(3px);
}
/* NAVIGATION
--------------------------------------------------------- */
.cf-promo__nav {
display: flex;
flex-wrap: wrap;
gap: var(--8);
margin-top: var(--8);
padding: var(--8);
}
.post-content .cf-promo__link,
.cf-promo__link {
flex: 1 1 135px;
display: flex;
align-items: center;
justify-content: center;
gap: var(--8);
min-height: 42px;
padding: var(--8) var(--12);
background: rgb(var(--secondary400) / .38);
color: rgb(var(--text900)) !important;
border-radius: var(--br400);
font: 800 .86rem/110% var(--font);
text-transform: uppercase;
transition:
background .2s ease,
color .2s ease,
transform .2s ease;
}
.cf-promo__link i {
flex-shrink: 0;
width: 1.1em;
text-align: center;
color: rgb(var(--primary400));
font-size: 1.05rem;
transition: color .2s ease;
}
.post-content .cf-promo__link:hover,
.cf-promo__link:hover {
background: rgb(var(--primary400));
color: rgb(var(--light100)) !important;
transform: translateY(-2px);
}
.cf-promo__link:hover i {
color: rgb(var(--light100));
}
/* MOBILE
--------------------------------------------------------- */
@media screen and (max-width: 680px) {
.cf-promo {
padding: var(--8);
}
.cf-promo__hero {
grid-template-columns: 1fr;
}
.cf-promo__visual {
min-height: unset;
aspect-ratio: 16 / 8;
}
.cf-promo__content {
padding: var(--12) var(--8) var(--16);
}
.cf-promo__title {
font-size: 2.25rem;
}
.cf-promo__description {
max-width: none;
}
.cf-promo__nav {
padding-top: 0;
}
.cf-promo__link {
flex-basis: calc(50% - var(--4));
}
}
@media screen and (max-width: 430px) {
.cf-promo__link {
flex-basis: 100%;
}
}
</style>
<div class="cf-promo">
<div class="cf-promo__hero">
<a
class="cf-promo__visual"
href="https://crossfeeling.ru/"
title="CrossFeeling"
>
<img
src="https://upforme.ru/uploads/001c/11/e3/2/365120.png"
alt="CrossFeeling"
>
</a>
<div class="cf-promo__content">
<div class="cf-promo__label">
<i class="fa-solid fa-sparkles"></i>
кроссовер, существующий с 2015 года
</div>
<div class="cf-promo__title">
CROSS<span>FEELING</span>
</div>
<p class="cf-promo__description">
Твои посты — это так красиво.
</p>
<a
class="cf-promo__main-link"
href="https://crossfeeling.ru/"
>
зайти на форум
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
</div>
<div class="cf-promo__nav">
<a
class="cf-promo__link"
href="https://crossfeeling.ru/viewtopic.php?pid=29873#p29873"
>
<i class="fa-solid fa-magnifying-glass"></i>
<span>нужные</span>
</a>
<a
class="cf-promo__link"
href="https://crossfeeling.ru/viewtopic.php?id=11266"
>
<i class="fa-solid fa-heart"></i>
<span>гештальты</span>
</a>
<a
class="cf-promo__link"
href="https://crossfeeling.ru/viewtopic.php?id=11675"
>
<i class="fa-solid fa-eye"></i>
<span>хочу видеть</span>
</a>
<a
class="cf-promo__link"
href="https://crossfeeling.ru/viewtopic.php?id=6"
>
<i class="fa-solid fa-book-open"></i>
<span>правила</span>
</a>
<a
class="cf-promo__link"
href="https://crossfeeling.ru/pages/roles"
>
<i class="fa-solid fa-masks-theater"></i>
<span>список ролей</span>
</a>
</div>
</div>
[/html]
Отредактировано амбассадор кринжа (2025-06-18 11:57:32)
- Подпись автора

пивозавр в поисках бога ● где ты, мое всевидящее око?
гештальточная ● memento mori










































