[html]
<style>
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,300..800;1,300..800&display=swap');
@font-face { font-family: "fine"; src: url(https://forumstatic.ru/files/001b/73/d1/67460.otf); }
html, body { margin: 0 !important; padding: 0 !important; background: transparent !important; }
#ab {
--card: #ececea;
--ink: #3a3a3a;
--acc: #75424a;
--line: rgba(58,58,58,.28);
--acc-line: rgba(117,66,74,.45);
--serif: "fine", "Playfair Display", serif;
--sans: "Mulish", "Manrope", Arial, sans-serif;
}
#ab[data-theme="dark"] {
--card: #cfcfcc;
--ink: #333d33;
--acc: #415549;
--line: rgba(51,61,51,.32);
--acc-line: rgba(65,85,73,.5);
}
#ab, #ab * { box-sizing: border-box; }
#ab {
width: 600px;
max-width: 100%;
margin: 0 auto;
padding: 6px 0;
font-family: var(--sans);
color: var(--ink);
}
#ab .ab-img { position: relative; z-index: 1; text-align: center; margin-bottom: -46px; }
#ab .ab-img img {
max-width: 100%;
height: auto;
border-radius: 10px;
border: 1px solid var(--acc-line);
}
#ab .ab-block {
position: relative;
z-index: 2;
margin: 0 22px 18px;
box-shadow: 0 8px 22px rgba(0,0,0,.18);
padding: 18px 20px 18px;
background: var(--card);
border: 1px solid var(--acc-line);
border-radius: 10px;
}
#ab .ab-title {
margin: 0 0 8px;
text-align: center;
font-family: var(--serif);
font-size: 15px;
font-weight: 400;
letter-spacing: .5px;
line-height: 1.2;
text-transform: lowercase;
color: var(--acc);
}
#ab .ab-hr {
border: 0;
border-top: 1px solid var(--line);
margin: 0 0 12px;
}
#ab .ab-text {
font-size: 12px;
line-height: 1.55;
text-align: left;
}
#ab .ab-sign {
text-align: center;
font-size: 11px;
letter-spacing: .4px;
color: var(--acc);
}
</style>
<div id="ab" data-theme="light">
<div class="ab-img">
<img src="https://upforme.ru/uploads/001c/a5/83/2/599745.png" alt="картинка">
</div>
<div class="ab-block">
<h3 class="ab-title">палочка выбирает волшебника</h3>
<hr class="ab-hr">
<div class="ab-text">
на выбор для шаблона - хтмл, который меняет цвет под стиль дизайна, и простой бб- код. выбор чисто эстетический, менее интересным вы от этого не становитесь.
<br>анкета в свободной форме, хоть текстом, хоть пунктами, крестиками (не забудьте мемы и любимый сорт пива).
</div>
</div>
<script>
(function () {
var box = document.getElementById("ab");
if (!box) return;
function set(t) {
var th = t === "dark" ? "dark" : "light";
box.setAttribute("data-theme", th);
document.documentElement.style.colorScheme = th;
}
try {
var root = window.parent.document.documentElement;
set(root.getAttribute("data-forum-theme") || "light");
new MutationObserver(function () { set(root.getAttribute("data-forum-theme") || "light"); })
.observe(root, { attributes: true, attributeFilter: ["data-forum-theme"] });
} catch (e) {}
window.addEventListener("message", function (e) {
if (e.data && e.data.forumTheme) set(e.data.forumTheme);
});
try { window.parent.postMessage({ lstReady: 1 }, "*"); } catch (e) {}
})();
</script>
</div>
[/html]
Код:НЕ ЗАБУДЬТЕ УБРАТЬ ЗВЕЗДОЧКИ ИЗ КОДА [**html] <style> @import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,300..800;1,300..800&display=swap'); @font-face { font-family: "fine"; src: url("https://forumstatic.ru/files/001b/73/d1/67460.otf"); } html, body { margin: 0 !important; padding: 0 !important; background: transparent !important; background-color: transparent !important; } #cp { --bg: #f4f4f4; --card: #eaeaea; --text: #3a3a3a; --muted: #7a7a7a; --acc: #75424a; --line: rgba(117,66,74,.30); --serif: "fine", "Playfair Display", serif; --sans: "Mulish", "Manrope", Arial, sans-serif; width: 620px; max-width: 100%; margin: 0 auto; padding: 36px 34px 42px; background: var(--bg); color: var(--text); font-family: var(--sans); border: 1px solid var(--line); border-radius: 16px; } #cp[data-theme="dark"] { --bg: #d7d7d7; --card: #cccccc; --text: #333d33; --muted: #5d665d; --acc: #415549; --line: rgba(65,85,73,.40); } #cp, #cp * { box-sizing: border-box; } /* ИМЯ */ #cp .cp-head { text-align: center; margin-bottom: 22px; } #cp .cp-name-eng { font: normal 400 40px/1 var(--serif); letter-spacing: .5px; text-transform: lowercase; color: var(--acc); } #cp .cp-name-rus { margin-top: 8px; font: normal 400 18px/1.2 var(--serif); color: var(--muted); } /* ФОТО */ #cp .cp-images { display: flex; justify-content: center; align-items: center; gap: 10px; } #cp .cp-image { flex: 0 1 250px; width: 250px; max-width: 50%; height: 150px; overflow: hidden; border-radius: 18px; border: 1px solid var(--line); background: var(--card); } #cp .cp-image img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ВНЕШНОСТЬ */ #cp .cp-face { margin-top: 12px; text-align: center; font-size: 10px; line-height: 1.4; color: var(--muted); } #cp .cp-face b { font-weight: 700; color: var(--acc); } /* ИНФО */ #cp .cp-meta { display: grid; grid-template-columns: 1.35fr .65fr .8fr; gap: 8px; margin-top: 28px; } #cp .cp-meta-item { padding: 14px 15px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; } #cp .cp-meta-label { margin-bottom: 5px; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; color: var(--muted); } #cp .cp-meta-value { font: normal 400 14px/1.35 var(--serif); color: var(--acc); } /* РАЗДЕЛЫ */ #cp .cp-section { margin-top: 32px; } #cp .cp-section-title { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; font: normal 400 16px/1 var(--serif); letter-spacing: .8px; text-transform: lowercase; color: var(--acc); } #cp .cp-section-title::after { content: ""; flex: 1; height: 1px; background: var(--line); } #cp .cp-bio, #cp .cp-extra { padding: 22px 24px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; font-size: 11px; line-height: 1.7; text-align: justify; color: var(--text); } #cp .cp-bio p { margin: 0 0 12px !important; padding: 0 !important; } #cp .cp-bio p:last-child { margin-bottom: 0 !important; } /* ФИНАЛ */ #cp .cp-bottom { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 35px; } #cp .cp-bottom-line { width: 70px; height: 1px; background: var(--line); } #cp .cp-bottom-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--acc); } /* КАРТИНКИ, ГИФ, ВИДЕО И СПОЙЛЕРЫ ВНУТРИ БЛОКА: не вылезают за рамку */ #cp .cp-extra, #cp .cp-bio { overflow: hidden; overflow-wrap: anywhere; } #cp .cp-extra img, #cp .cp-bio img, #cp .cp-extra video, #cp .cp-bio video, #cp .cp-extra iframe, #cp .cp-bio iframe { display: block; max-width: 100% !important; width: auto; height: auto !important; margin: 10px auto 0; border-radius: 10px; } #cp details, #cp .spoiler-box { max-width: 100%; margin: 0; } #cp summary { cursor: pointer; font-size: 11px; color: var(--acc); } #cp details > *:not(summary) { max-width: 100%; } @media (max-width: 560px) { #cp { padding: 26px 16px 30px; } #cp .cp-meta { grid-template-columns: 1fr; } #cp .cp-image { height: 120px; } } </style> <script> try { document.documentElement.style.colorScheme = window.parent.document.documentElement.getAttribute("data-forum-theme") === "dark" ? "dark" : "light"; } catch (e) {} </script> <div id="cp" data-theme="light"> <!-- ИМЯ --> <div class="cp-head"> <div class="cp-name-eng">firstname lastname</div> <div class="cp-name-rus">имя фамилия</div> </div> <!-- ИЗОБРАЖЕНИЯ (250 x 150) --> <div class="cp-images"> <div class="cp-image"><img src="ССЫЛКА_НА_КАРТИНКУ_1" alt=""></div> <div class="cp-image"><img src="ССЫЛКА_НА_КАРТИНКУ_2" alt=""></div> </div> <!-- ВНЕШНОСТЬ --> <div class="cp-face">fc: <b>firstname lastname</b></div> <!-- ОСНОВНАЯ ИНФОРМАЦИЯ --> <div class="cp-meta"> <div class="cp-meta-item"> <div class="cp-meta-label">профессия</div> <div class="cp-meta-value">ваша профессия</div> </div> <div class="cp-meta-item"> <div class="cp-meta-label">возраст</div> <div class="cp-meta-value">00 лет</div> </div> <div class="cp-meta-item"> <div class="cp-meta-label">чистота крови</div> <div class="cp-meta-value">ваша чистота крови</div> </div> </div> <!-- ОПИСАНИЕ --> <div class="cp-section"> <div class="cp-section-title">описание персонажа</div> <div class="cp-bio"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate erat vitae nulla fermentum, vitae consequat neque malesuada. Integer sed lectus vitae libero feugiat posuere.</p> <p>Morbi consequat, lorem a elementum tincidunt, velit tortor feugiat neque, sed condimentum ipsum erat vitae augue. Sed tristique lacus vel lectus malesuada, vitae vulputate justo efficitur.</p> <p>Praesent posuere sapien nec neque vulputate, sed faucibus erat tincidunt. Integer vitae nibh non lorem malesuada feugiat.</p> </div> </div> <!-- ДОПОЛНИТЕЛЬНО --> <div class="cp-section"> <div class="cp-section-title">дополнительно</div> <div class="cp-extra"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate erat vitae nulla fermentum, vitae consequat neque malesuada. Integer sed lectus vitae libero feugiat posuere. <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi consequat, lorem a elementum tincidunt, velit tortor feugiat neque. </div> </div> <!-- ФИНАЛЬНЫЙ ДЕКОР --> <div class="cp-bottom"> <div class="cp-bottom-line"></div> <div class="cp-bottom-dot"></div> <div class="cp-bottom-line"></div> </div> <script> (function () { var box = document.getElementById("cp"); if (!box) return; function set(t) { var th = t === "dark" ? "dark" : "light"; box.setAttribute("data-theme", th); document.documentElement.style.colorScheme = th; } try { var root = window.parent.document.documentElement; set(root.getAttribute("data-forum-theme") || "light"); new MutationObserver(function () { set(root.getAttribute("data-forum-theme") || "light"); }) .observe(root, { attributes: true, attributeFilter: ["data-forum-theme"] }); } catch (e) {} window.addEventListener("message", function (e) { if (e.data && e.data.forumTheme) set(e.data.forumTheme); }); try { window.parent.postMessage({ lstReady: 1 }, "*"); } catch (e) {} })(); </script> </div> [/html]
Код:[align=center][font=fine][size=26][color=#415549]FIRSTNAME LASTNAME[/color][/size][/font][/align] [align=center][font=fine][size=17][color=#5d665d]имя фамилия[/color][/size][/font][/align] [align=center][img=245x300]ССЫЛКА_НА_КАРТИНКУ_1[/img] [img=245x300]ССЫЛКА_НА_КАРТИНКУ_2[/img] [size=10][color=#5d665d]fc:[/color] [color=#415549][b]firstname lastname[/b][/color][/size][/align] [quote][table layout=fixed width=100%] [tr] [td][size=8][color=#5d665d][b]ПРОФЕССИЯ[/b][/color][/size] [font=fine][size=12][color=#415549]ваша профессия[/color][/size][/font] [/td] [td][align=center][size=8][color=#5d665d][b]ВОЗРАСТ[/b][/color][/size] [font=fine][size=12][color=#415549]00 лет[/color][/size][/font][/align][/td] [td][size=8][color=#5d665d][b]ЧИСТОТА КРОВИ[/b][/color][/size] [font=fine][size=12][color=#415549]ваша чистота крови[/color][/size][/font][/td] [/tr] [/table][/quote] [font=fine][size=14][color=#415549]описание персонажа[/color][/size][/font] [color=#7d8a81]————————————————————————[/color] [size=10][color=#333d33] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate erat vitae nulla fermentum, vitae consequat neque malesuada. Integer sed lectus vitae libero feugiat posuere. Morbi consequat, lorem a elementum tincidunt, velit tortor feugiat neque, sed condimentum ipsum erat vitae augue. Sed tristique lacus vel lectus malesuada, vitae vulputate justo efficitur. Praesent posuere sapien nec neque vulputate, sed faucibus erat tincidunt. Integer vitae nibh non lorem malesuada feugiat. [/color][/size] [font=fine][size=14][color=#415549]дополнительно[/color][/size][/font] [color=#7d8a81]————————————————————————[/color] [size=10][color=#333d33] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate erat vitae nulla fermentum, vitae consequat neque malesuada. Integer sed lectus vitae libero feugiat posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi consequat, lorem a elementum tincidunt, velit tortor feugiat neque. [/color][/size] [align=center] [color=#7d8a81]——————[/color] [color=#415549]•[/color] [color=#7d8a81]——————[/color] [/align]
[hideprofile]
