[html]
<style>
html, body {
min-width: 0;
margin: 0;
padding: 0;
}
.film-show,
.film-show * {
box-sizing: border-box;
}
.film-show {
width: 100%;
max-width: 760px;
margin: 0 auto;
overflow: hidden;
background: #222325;
color: #c9c9cd;
font: 14px/1.65 Arial, sans-serif;
overflow-wrap: anywhere;
}
.film-show a {
text-decoration: none;
}
.film-show-gallery {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
padding: 14px;
background: #191a1c;
}
.film-show-preview {
display: block;
min-width: 0;
color: #b4b4ba;
}
.film-show-preview img {
display: block;
width: 100%;
height: auto;
}
.film-show-preview span {
display: block;
padding-top: 8px;
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
}
.film-show-copy {
padding: 26px 28px 28px;
}
.film-show-label {
margin: 0 0 12px;
color: #a8a8ae;
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
}
.film-show-title {
margin: 0 0 20px;
border-left: 4px solid #7e3233;
padding-left: 16px;
color: #e0e0e3;
font: italic 42px/1.1 Georgia, serif;
}
.film-show-text {
margin: 0 0 14px;
}
.film-show-features {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 22px;
margin: 24px 0;
padding: 20px 0;
border-top: 1px solid #3b3c40;
border-bottom: 1px solid #3b3c40;
}
.film-show-feature strong {
display: block;
margin-bottom: 4px;
color: #dedee1;
font-size: 12px;
font-weight: 500;
}
.film-show-feature p {
margin: 0;
color: #acacb3;
font-size: 12px;
line-height: 1.55;
}
.film-show-bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.film-show-button {
display: inline-block;
padding: 10px 17px;
background: #7e3233;
color: #f0ecec;
font-size: 12px;
transition: background-color .2s ease;
}
.film-show-button:hover,
.film-show-button:focus-visible {
background: #934143;
}
.film-show-credit {
color: #aaaab1;
font: italic 14px Georgia, serif;
}
.film-show-note {
margin: 20px 0 0;
color: #aaaab1;
font-size: 12px;
}
</style>
<div class="film-show">
<div class="film-show-gallery">
<a class="film-show-preview"
href="https://upforme.ru/uploads/001c/cf/23/2/186735.jpg"
target="_blank"
rel="noopener noreferrer">
<img src="https://upforme.ru/uploads/001c/cf/23/2/186735.jpg"
alt="Film Stock — тёмная версия">
<span>01 / Тёмная версия</span>
</a>
<a class="film-show-preview"
href="https://upforme.ru/uploads/001c/cf/23/2/640766.jpg"
target="_blank"
rel="noopener noreferrer">
<img src="https://upforme.ru/uploads/001c/cf/23/2/640766.jpg"
alt="Film Stock — светлая версия">
<span>02 / Светлая версия</span>
</a>
</div>
<div class="film-show-copy">
<p class="film-show-label">Оформление для RusFF / MyBB</p>
<h2 class="film-show-title">film stock</h2>
<p class="film-show-text">
Продаю оформление с настроением
старой киноплёнки: монохромные фотографии, неровная
перфорация, чернильные пятна и винные росчерки.
</p>
<p class="film-show-text">
В центре шапки оживающий кадр — с лёгким дрожанием
и помехами. Встроен тихий треск проектора и короткие звуковые
отклики при наведении на некоторые плашки. Всё можно выключить:
для анимации и звука предусмотрены отдельные кнопки.
</p>
<div class="film-show-features">
<div class="film-show-feature">
<strong>Два настроения</strong>
<p>Тёмная и светлая версии с переключением одной кнопкой.</p>
</div>
<div class="film-show-feature">
<strong>Живая шапка</strong>
<p>Смена кадров, движение перфорации и мягкие эффекты наведения <u>со звуком</u>.</p>
</div>
<div class="film-show-feature">
<strong>Полноценная шапка</strong>
<p>Пост недели, выбранный эпизод и активисты/постописцы со ссылками на профили.</p>
</div>
<div class="film-show-feature">
<strong>Внимание к деталям</strong>
<p>Оформленный профиль, иконки, кастомизация приветствия, загружены доп шрифты и полезные скрипты: подсчет количества знаков в сообщении, быстроплюсы, выбор размера текста при чтении, и тд</p>
</div>
</div>
<p class="film-show-text">
В видео ниже можно посмотреть и послушать, всё включается и выключается кнопками.<br>
ЦЕНА 5.ООО руб // мелкие правки бесплатно</p>
</div>
</div>
[/html]