Вектор Пламени
Сообщений 31 страница 33 из 33
Поделиться312026-05-28 21:47:42
[html]
<div class="guide-wrapper rules-mybb-fix">
<div class="main-box">
<div class="inner-box">
<div class="content-bg">
<div class="glass-block info">
<div class="name-en">Tamsin Holms </div>
<div class="group">мама</div>
<div class="name-ru">Тэмсин Холмс, 38</div>
</div>
<div class="glass-block photos">
<div class="photo-wrap">
<div class="photo"><img src="https://i.pinimg.com/originals/08/31/af/0831aff2de2638e0804c1278b91f2ecf.gif"></div>
<div class="photo"><img src="https://i.pinimg.com/originals/aa/9f/47/aa9f47ac9d730d6939a0cbec93e5e2fa.gif"></div>
</div>
<div class="fc">fc: Blake Lively</div>
</div>
<div class="glass-block text">
<p>У неё всегда безупречная укладка, а под её старой, но качественной кожаной курткой — чистая кашемировая водолазка. Она двигается с выверенной грацией человека, который привык контролировать каждое своё действие. В её руках старые инструменты архитектора соседствуют с ножом или пистолетом. Она — воплощение того, как цивилизованность борется с дикостью, а красота - с силой. Раньше Тэмсин строила только дома, теперь она строит ещё и безопасность. Её разум работает схемами и чертежами. Тэмсин в постоянном поиске места, где её семья всегда будет в безопасности.</p><p>Однако мисс Холмс знает то, чего не знает её муж. Несколько недель назад она видела кое-что важное. Она видела заражённых. Это не просто люди, которые сгорели. Это те, кто научился контролировать горение. Они не вспыхивают пламенем, а медленно тлеют изнутри. Они стали чем-то средним между человеком и големом из пепла. И они организованы.</p><p>Тэмсин хранит этот секрет от семьи, потому что боится паники.</p>
</div>
<div class="glass-block dopolnitelno">
<p><strong>Дополнительная информация:</strong> внешность выбрана не случайно: я вижу Тэмсин женщиной, которая является не просто хранительницей домашнего очага, а той самой, которая и "коня на скаку остановит", и ну вы поняли. хочу, чтобы семья вляпалась во что-то опасное из-за тайны, которую Тэмсин хранит от семьи. почему она так делает? зачем продолжает следить за этими людьми? как её до сих пор не поймали? вопросы, на которые, надеюсь, мы с вами сможем ответить. приходите!</p>
</div>
<div class="footer">flamevector</div>
</div>
</div>
</div>
</div>
<style>
@font-face {font-family: 'Cinzel'; src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');}
@font-face {font-family: 'Comfortaa'; src: url('https://raw.githubusercontent.com/flamevector-rusff/styles/main/comfortaa.ttf');}
.rules-mybb-fix, .rules-mybb-fix * {overflow: visible; box-sizing: border-box;}
.main-box {width: 650px; margin: 2px auto !important; background: url("https://upforme.ru/uploads/001c/a4/b9/3/943373.jpg") repeat; border-radius: 20px; padding: 5px; font-family: 'Cinzel', serif;}
.inner-box {background: #c7c7c7; border-radius: 15px; padding: 6px; display: flex; flex-direction: column; gap: 10px;}
.content-bg {background: url("https://i.pinimg.com/736x/ad/5b/64/ad5b64c9fe303dafc4c61d5783eb08ca.jpg") center/cover; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 10px;}
.glass-block {background: rgba(255,255,255,0.2); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(10px); border-radius: 15px; padding: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);}
.info {text-align: center; background: rgba(90,0,20,0.05);}
.name-en {font-size: 28px; letter-spacing: 2px;}
.group {font-size: 14px; margin-top:5px; opacity:0.8;}
.name-ru {font-size:18px; margin-top:5px;}
.photos {text-align:center;}
.photo-wrap {display:flex; justify-content:center; gap:10px; margin-bottom:8px;}
.photo-wrap img {width:200px; height:250px; object-fit:cover; border-radius:12px; transition:0.3s;}
.photo-wrap img:hover {transform: scale(1.05);}
.fc {font-size:14px; opacity:0.8;}
.text {font-family: 'Comfortaa', sans-serif;}
.text p {font-size:18px !important; text-indent:25px;}
.dopolnitelno {font-family: 'Comfortaa', sans-serif;}
.dopolnitelno p { text-indent:25px; font-size:17px !important; line-height:1.2 !important;}
.footer {text-align:center; font-size:12px; padding:6px; border-radius:999px; background: rgba(0,0,0,0.2); color:#fff; letter-spacing:2px; display:inline-block; margin:0 auto;}
.photo {position:relative; width:200px; height:260px; border-radius:14px; overflow:hidden; box-shadow:0 10px 25px rgba(0,0,0,0.4);}
.photo img {width:100%; height:100%; object-fit:cover; filter: sepia(20%) saturate(40%) brightness(85%) contrast(1.1); transition:0.4s ease;}
.photo:hover img {transform: scale(1.08);}
.info {position:relative; overflow:hidden;}
.info::after {content:""; position:absolute; top:0; left:-150%; width:60%; height:100%; background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 40%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.25) 60%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); animation: shine 6s infinite;}
@keyframes shine {0% {left:-150%;} 100% {left:150%;}}
</style>
[/html]
Поделиться322026-05-30 14:54:15
[hideprofile][html]
<div class="tabs-wrapper">
<!-- ДОБАВИТЬ ЧЕРЕЗ ПРОБЕЛ taken ПОСЛЕ inner, ЕСЛИ ПЕРСОНАЖ ЗАНЯТ -->
<div class="tabs-inner">
<div class="action-card">
<div class="status">ЗАНЯТО</div>
<div class="top">
<div class="photo">
<img src="https://i.pinimg.com/originals/25/f8/7d/25f87dd4864d3180b87f01abc4081cea.gif" alt="">
</div>
<div class="info">
<h2>Пророк</h2>
<div class="line">
<span>FC:</span> <em>cole sprouse</em>
<div class="line">
<span>Занятость:</span> Первый с прорицанием
</div>
</div>
</div>
</div>
<div class="gradient-line"></div>
<div class="bio">
<h3><strong>Биография</strong></h3>
<p>
После попадания в институт жизнь делится на "до" и "после". Кто знает, может быть парень прошел бы полностью все, что происходит с другими , если бы не его редкий дар, о котором все узнали совершенно случайно. </p>
<p>Трудности заключаются в том, что Институту необходимо исследовать данного подопытного, но он совершенно не хочет идти с ними на контакт , бормоча что-то в духе "дайте позвонить брату". Даже насильственные методы здесь не помогают, потому что чаще всего подопытный вырубается от нанесенных ему побоев. </p>
</div>
</div>
</div>
</div>
<style>
@font-face {
font-family: 'Cinzel';
src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');
}
@font-face { font-family: 'Comfortaa'; src: url('https://raw.githubusercontent.com/flamevector-rusff/styles/main/comfortaa.ttf');}
.tabs-wrapper {
width: 850px;
padding: 5px;
background: url(https://upforme.ru/uploads/001c/a4/b9/3/943373.jpg) repeat;
border-radius: 10px;
margin: 0 auto;
}
.tabs-inner {
background: #c7c7c7;
padding: 5px;
border-radius: 8px;
}
/* КАРТОЧКА */
.action-card {
position: relative;
font-family: 'Cinzel', serif;
color: #1f1f1f;
}
/* ВЕРХ */
.top {
display: flex;
gap: 15px;
margin-top: 15px;
}
.photo {
width: 180px;
height: 240px;
flex-shrink: 0;
overflow: hidden;
border-radius: 6px;
border: 1px solid #9a9a9a;
margin-left: 15px;
}
.photo img {
width: 100%;
height: 100%;
object-fit: cover;
filter:sepia(70%) saturate(50%) brightness(90%);
}
.info h2 {
margin: 0 0 10px;
font-size: 22px;
letter-spacing: 1px;
}
.line {
font-size: 14px;
margin-bottom: 6px;
}
.line span {
font-weight: bold;
color: #4a4a4a;
}
/* БИО */
.bio {
margin: 15px;
text-indent: 25px;
text-align: justify;
}
.bio h3 {
margin: 0 0 8px;
font-size: 16px;
letter-spacing: 1px;
}
.bio p {
margin: 0;
font-size: 18px !important;
line-height: 1.5;
font-family: 'Comfortaa';
}
/* ЗАНЯТО */
.status {
display: none;
position: absolute;
inset: 0;
background: rgba(199,199,199,0.85);
z-index: 5;
text-align: center;
align-items: center;
justify-content: center;
font-size: 42px;
letter-spacing: 4px;
color: #444;
}
/* СОСТОЯНИЕ ЗАНЯТО */
.tabs-inner.taken {
filter: grayscale(1);
}
.tabs-inner.taken .status {
display: flex;
}
.gradient-line {
height: 2px;
margin: 15px 0;
border-radius: 1px;
background: linear-gradient(
to right,
rgba(116, 77, 55, 0) 0%,
rgba(116, 77, 55, 1) 50%,
rgba(116, 77, 55, 0) 100%
);
}
</style>
[/html]
Поделиться33Вчера 21:43:05
[html]
<div class="guide-wrapper rules-mybb-fix">
<div class="main-box">
<div class="inner-box">
<div class="content-bg">
<div class="glass-block info">
<div class="name-en">Hynek Jarolím</div>
<div class="group">старший брат</div>
<div class="name-ru">Гинек Яролим, 27</div>
</div>
<div class="glass-block photos">
<div class="photo-wrap">
<div class="photo"><img src="https://64.media.tumblr.com/aa5eeb6a2913ba8fe6ad197f2f7a1892/38794b032b5e226d-89/s400x600/e2059f6a874f9c143d98967ed624716fd6227b05.gifv"></div>
<div class="photo"><img src="https://64.media.tumblr.com/4835e7eb1fbf215bf9cfc9e4491ed27d/dc3a0ed35042228e-a6/s400x600/d41fef619b280799f9e5cfa47dcf948f947d42e5.gifv"></div>
</div>
<div class="fc">fc: Danny Griffin</div>
</div>
<div class="glass-block text">
<p>Мы были обычными братьями: ты — ответственный старший, я — витающий в облаках младший.</p><p>Но нам обоим пришлось быстро повзрослеть.</p><p></p><p>Когда я ушёл в армию, лишь с твоих слов знал о том, как поживают родители. Поначалу всё было нормально, но со временем твои ответы стали короткими и более размытыми, однако я не заострял на этом внимание, потому что в армии было несладко и времени не всегда хватало на сон. Тебе же в это время пришлось решать проблемы одному: наши мать и отец были в первой волне вакцинированных. Они вернулись домой другими. Не сгорели. Но и людьми быть перестали. Ты помнишь этот взгляд — пустой, ненавидящий всё живое. Помнишь, как тебе пришлось... действовать.</p><p>С тех пор ты стал другим.</p>
</div>
<div class="glass-block dopolnitelno">
<p><strong>Дополнительная информация:</strong> у меня масса идей по развитию семейных взаимоотношений, стекла, взаимодействия внутри семьи и не только, так что я готов всем делиться!</p>
</div>
<div class="footer">flamevector</div>
</div>
</div>
</div>
</div>
<style>
@font-face {font-family: 'Cinzel'; src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');}
@font-face {font-family: 'Comfortaa'; src: url('https://raw.githubusercontent.com/flamevector-rusff/styles/main/comfortaa.ttf');}
.rules-mybb-fix, .rules-mybb-fix * {overflow: visible; box-sizing: border-box;}
.main-box {width: 650px; margin: 2px auto !important; background: url("https://upforme.ru/uploads/001c/a4/b9/3/943373.jpg") repeat; border-radius: 20px; padding: 5px; font-family: 'Cinzel', serif;}
.inner-box {background: #c7c7c7; border-radius: 15px; padding: 6px; display: flex; flex-direction: column; gap: 10px;}
.content-bg {background: url("https://i.pinimg.com/736x/ad/5b/64/ad5b64c9fe303dafc4c61d5783eb08ca.jpg") center/cover; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 10px;}
.glass-block {background: rgba(255,255,255,0.2); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(10px); border-radius: 15px; padding: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);}
.info {text-align: center; background: rgba(90,0,20,0.05);}
.name-en {font-size: 28px; letter-spacing: 2px;}
.group {font-size: 14px; margin-top:5px; opacity:0.8;}
.name-ru {font-size:18px; margin-top:5px;}
.photos {text-align:center;}
.photo-wrap {display:flex; justify-content:center; gap:10px; margin-bottom:8px;}
.photo-wrap img {width:200px; height:250px; object-fit:cover; border-radius:12px; transition:0.3s;}
.photo-wrap img:hover {transform: scale(1.05);}
.fc {font-size:14px; opacity:0.8;}
.text {font-family: 'Comfortaa', sans-serif;}
.text p {font-size:18px !important; text-indent:25px;}
.dopolnitelno {font-family: 'Comfortaa', sans-serif;}
.dopolnitelno p { text-indent:25px; font-size:17px !important; line-height:1.2 !important;}
.footer {text-align:center; font-size:12px; padding:6px; border-radius:999px; background: rgba(0,0,0,0.2); color:#fff; letter-spacing:2px; display:inline-block; margin:0 auto;}
.photo {position:relative; width:200px; height:260px; border-radius:14px; overflow:hidden; box-shadow:0 10px 25px rgba(0,0,0,0.4);}
.photo img {width:100%; height:100%; object-fit:cover; filter: sepia(20%) saturate(40%) brightness(85%) contrast(1.1); transition:0.4s ease;}
.photo:hover img {transform: scale(1.08);}
.info {position:relative; overflow:hidden;}
.info::after {content:""; position:absolute; top:0; left:-150%; width:60%; height:100%; background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 40%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.25) 60%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); animation: shine 6s infinite;}
@keyframes shine {0% {left:-150%;} 100% {left:150%;}}
</style>
[/html]


















































