Благодарим за выбор нашего сервиса!
Тестовое сообщение
Страница: 1
Сообщений 1 страница 7 из 7
Поделиться22026-04-04 13:38:18
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>solitude — header mockup</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Manrope:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
@font-face {
font-family: 'Allaina';
src: url('https://forumstatic.ru/files/001c/95/36/56498.ttf') format('truetype');
}
:root {
--fp-green: #7a8c65;
--fp-green-light: #9aab82;
--fp-stroke: rgba(122, 140, 101, 0.4);
--fp-bg: #1a1a18;
--fp-text: #c8c4bc;
--fp-text-muted: #8a8680;
--fp-card-bg: rgba(20, 20, 18, 0.75);
--fp-card-border: rgba(122, 140, 101, 0.2);
--heading-font: 'Playfair Display', serif;
--body-font: 'Manrope', sans-serif;
--accent-font: 'Allaina', 'Playfair Display', serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--fp-bg);
font-family: var(--body-font);
color: var(--fp-text);
display: flex;
justify-content: center;
padding: 40px 20px;
}
/* ===== HEADER WRAPPER ===== */
.header {
position: relative;
width: 1010px;
height: 382px;
overflow: hidden;
border-radius: 2px;
}
.header-bg {
position: absolute;
inset: 0;
background: url('https://forumstatic.ru/files/001c/b0/ba/99480.png?v=1') center / cover no-repeat;
z-index: 0;
}
/* dark vignette overlay for readability */
.header::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(to right, rgba(10,10,8,0.4) 0%, rgba(10,10,8,0.12) 30%, transparent 55%, rgba(10,10,8,0.3) 85%, rgba(10,10,8,0.55) 100%),
linear-gradient(to top, rgba(10,10,8,0.7) 0%, transparent 35%);
z-index: 1;
pointer-events: none;
}
/* all content above overlay */
.header-content {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
}
/* ===== НАВИГАЦИЯ — кликальная зона на камне с рунами ===== */
.nav-btn {
position: absolute;
top: 44.7%;
left: 44.3%;
width: 7%;
height: 24%;
cursor: pointer;
z-index: 10;
background: transparent;
border: none;
border-radius: 8px;
transition: all 0.5s ease;
display: block;
text-decoration: none;
}
.nav-btn:hover {
background: radial-gradient(ellipse at 50% 50%,
rgba(210, 200, 60, 0.22) 0%,
rgba(200, 190, 50, 0.10) 40%,
transparent 70%);
filter: brightness(1.25);
}
.nav-btn::after {
content: 'навигация';
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
font-family: var(--body-font);
font-size: 8px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--fp-green-light);
opacity: 0;
transition: opacity 0.4s ease;
white-space: nowrap;
text-shadow: 0 0 8px rgba(122, 140, 101, 0.4);
}
.nav-btn:hover::after {
opacity: 0.8;
}
/* ===== АВАТАРКИ АКТИВА — над надписью war and hell ===== */
.active-avatars {
position: absolute;
top: 84.4%;
left: 7.6%;
display: flex;
flex-direction: row;
gap: 6px;
}
.active-avatars a {
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
border: 1.5px solid var(--fp-stroke);
transition: border-color 0.3s ease, transform 0.3s ease;
opacity: 0.85;
}
.active-avatars a:hover {
border-color: var(--fp-green-light);
transform: scale(1.08);
opacity: 1;
}
.active-avatars img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(20%) contrast(1.05);
}
/* ===== POST OF THE WEEK — пилюли отдельно ===== */
.potw-pills {
position: absolute;
top: 55.6%;
left: 75.8%;
display: flex;
gap: 6px;
align-items: center;
}
/* ===== POST OF THE WEEK — текст отдельно ===== */
.potw-text-wrap {
position: absolute;
top: 64.3%;
left: 76%;
width: 215px;
text-align: right;
}
.potw-label {
font-family: var(--heading-font);
font-style: italic;
font-size: 11px;
color: var(--fp-text);
letter-spacing: 0.02em;
border: 1px solid rgba(200, 196, 188, 0.5);
border-radius: 20px;
padding: 2px 11px;
background: transparent;
line-height: 1.4;
}
.potw-author {
font-family: var(--body-font);
font-size: 8px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--fp-text);
}
.potw-author a {
color: inherit;
text-decoration: none;
border: 1px solid rgba(200, 196, 188, 0.5);
border-radius: 20px;
padding: 3px 11px;
transition: all 0.3s;
display: inline-block;
}
.potw-author a:hover {
border-color: var(--fp-green-light);
color: var(--fp-green-light);
}
.potw-text {
font-size: 9.5px;
line-height: 1.5;
color: var(--fp-text);
max-height: 75px;
overflow-y: auto;
text-align: justify;
background: transparent;
padding: 2px 4px 2px 0;
opacity: 0.6;
}
.potw-text::-webkit-scrollbar {
width: 3px;
}
.potw-text::-webkit-scrollbar-track {
background: transparent;
}
.potw-text::-webkit-scrollbar-thumb {
background: var(--fp-stroke);
border-radius: 3px;
}
/* ===== EPISODE OF THE WEEK — справа, ниже, ближе к центру ===== */
.eotw {
position: absolute;
top: 12.3%;
left: 79.1%;
text-align: center;
}
.eotw-label {
font-family: var(--heading-font);
font-style: italic;
font-size: 11px;
color: var(--fp-text);
letter-spacing: 0.02em;
border: 1px solid rgba(200, 196, 188, 0.5);
border-radius: 20px;
padding: 2px 11px;
background: transparent;
display: inline-block;
margin-bottom: 6px;
}
.eotw-link {
display: block;
font-family: var(--body-font);
font-size: 9px;
font-weight: 600;
font-style: normal;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--fp-text);
text-decoration: none;
transition: color 0.3s;
margin-bottom: 10px;
}
.eotw-link:hover { color: var(--fp-green-light); }
.eotw-avatars {
position: absolute;
top: 85.4%;
left: 80.2%;
display: flex;
gap: 6px;
justify-content: center;
}
.eotw-avatars a {
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
border: 1.5px solid var(--fp-stroke);
transition: border-color 0.3s, transform 0.3s;
opacity: 0.85;
}
.eotw-avatars a:hover {
border-color: var(--fp-green-light);
transform: scale(1.1);
opacity: 1;
}
.eotw-avatars img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(20%) contrast(1.05);
}
/* ===== DAILY PROPHET — метка ===== */
/* ===== ВЫПАДАЮЩЕЕ МЕНЮ НАВИГАЦИИ ===== */
#navigblock {
position: absolute;
top: 42%;
left: 50%;
transform: translateX(-50%);
z-index: 20;
}
.nav-dropdown {
background: rgba(30, 30, 26, 0.88);
backdrop-filter: blur(12px);
border: 1px solid rgba(122, 140, 101, 0.2);
border-radius: 4px;
padding: 12px 8px;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 200px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.nav-dropdown a {
display: block;
font-family: var(--body-font);
font-size: 10px;
font-weight: 400;
letter-spacing: 0.06em;
color: var(--fp-text-muted);
text-decoration: none;
padding: 6px 14px;
border-radius: 3px;
transition: all 0.25s ease;
text-align: center;
}
.nav-dropdown a:hover {
color: var(--fp-text);
background: rgba(122, 140, 101, 0.15);
}
</style>
</head>
<body>
<div class="header">
<div class="header-bg"></div>
<div class="header-content">
<!-- навигация — кликальная зона на камне -->
<div class="nav-btn spirit-navigation" id="navig-batton" title=""></div>
<div id="navigblock" style="display:none">
<div class="nav-dropdown">
<a href="#">faq</a>
<a href="#">сюжет</a>
<a href="#">занятые внешности</a>
<a href="#">персонажи</a>
<a href="#">биржа труда</a>
<a href="#">фракции и организации</a>
<a href="#">карта</a>
<a href="#">бестиарий</a>
<a href="#">нужные</a>
<a href="#">хочу видеть</a>
<a href="#">хочу к вам</a>
</div>
</div>
<!-- актив — вертикально слева -->
<div class="active-avatars">
<a href="#" title="Remus Lupin"><img src="https://upforme.ru/uploads/001c/95/36/214/t948105.jpg" alt=""></a>
<a href="#" title="Theodore Nott"><img src="https://i.imgur.com/JG9Ihr7.gif" alt=""></a>
<a href="#" title="Hugh Diggory"><img src="https://66.media.tumblr.com/d5ae39df30a98947942792af645edb06/7551119434f987dc-e6/s540x810/141d7492b9c1c2f26b91767c175e639c803cd2cc.gif" alt=""></a>
</div>
<!-- post of the week — пилюли -->
<div class="potw-pills">
<div class="potw-label">post of the week</div>
<div class="potw-author"><a href="#">Malia Macmillan</a></div>
</div>
<!-- post of the week — текст -->
<div class="potw-text-wrap">
<div class="potw-text">У Малії Макміллан майже завжди все під контролем, і всі її рішення привели її сюди. У Малії завжди охайний вигляд, пряма постава, бездоганна усмішка. Вона завжди знайде як відповісти на будь-яке провокаційне питання...</div>
</div>
<!-- episode of the week — лейбл справа вверху -->
<div class="eotw">
<div class="eotw-label">episode of the week</div>
<a href="#" class="eotw-link">все по колу</a>
</div>
<!-- аватарки эпизода — отдельно, справа внизу -->
<div class="eotw-avatars">
<a href="#" title="Capri MacLean"><img src="https://upforme.ru/uploads/001c/95/36/200/213114.gif" alt=""></a>
<a href="#" title="Thaddeus Yaxley"><img src="https://64.media.tumblr.com/1e67c4b32319e40f4969891c79bd75d9/36fead3b6865474e-de/s400x600/60f8fe6d1646f6f3463c4c60277975fdbf9953ec.gif" alt=""></a>
<a href="#" title="Lorrain Yaxley"><img src="https://i.pinimg.com/originals/af/b8/86/afb88668a9085fc49f014f167adb6f0e.gif" alt=""></a>
</div>
</div>
</div>
<script>
document.getElementById('navig-batton').addEventListener('click', function(e) {
e.stopPropagation();
var block = document.getElementById('navigblock');
block.style.display = block.style.display === 'none' ? 'block' : 'none';
});
document.querySelector('.header').addEventListener('click', function(e) {
var block = document.getElementById('navigblock');
if (block.style.display !== 'none' && !e.target.closest('#navigblock') && !e.target.closest('#navig-batton')) {
block.style.display = 'none';
}
});
</script>
</body>
</html>
Поделиться32026-04-04 13:41:36
<!---------------------- ШАПКА ---------------------->
<!-- АКТИВ -->
<div class="active-avatars">
<a href="ССЫЛКА_НА_ПРОФИЛЬ" title="Имя Фамилия"><img src="ССЫЛКА_НА_АВАТАРКУ"></a>
<a href="ССЫЛКА_НА_ПРОФИЛЬ" title="Имя Фамилия"><img src="ССЫЛКА_НА_АВАТАРКУ"></a>
<a href="ССЫЛКА_НА_ПРОФИЛЬ" title="Имя Фамилия"><img src="ССЫЛКА_НА_АВАТАРКУ"></a>
</div>
<!-- ПОСТ НЕДЕЛИ — пилюли -->
<div class="potw-pills">
<div class="potw-label">post of the week</div>
<div class="potw-author"><a href="ССЫЛКА_НА_ПОСТ">Имя Фамилия</a></div>
</div>
<!-- ПОСТ НЕДЕЛИ — текст -->
<div class="potw-text-wrap">
<div class="potw-text">Текст поста недели. Сюда вставляется отрывок из лучшего поста за неделю.</div>
</div>
<!-- ЭПИЗОД НЕДЕЛИ -->
<div class="eotw">
<div class="eotw-label">episode of the week</div>
<a href="ССЫЛКА_НА_ЭПИЗОД" class="eotw-link">название эпизода</a>
</div>
<!-- ПОСТОПИСЦЫ -->
<div class="eotw-avatars">
<a href="ССЫЛКА_НА_ПРОФИЛЬ" title="Имя Фамилия"><img src="ССЫЛКА_НА_АВАТАРКУ"></a>
<a href="ССЫЛКА_НА_ПРОФИЛЬ" title="Имя Фамилия"><img src="ССЫЛКА_НА_АВАТАРКУ"></a>
<a href="ССЫЛКА_НА_ПРОФИЛЬ" title="Имя Фамилия"><img src="ССЫЛКА_НА_АВАТАРКУ"></a>
</div>
<!----------------------------------------- навигация ------------------------------------------>
<!-- скрипт навигации выпадающим окном [основа скрипт вкладок http://imagiart.ru/, переработка вещего духа] -->
<script type="text/javascript" src="https://forumstatic.ru/files/001a/18/bd/96460.js"></script>
<div class="spirit-navigation nav-btn" id="navig-batton" title=""></div>
<div id="navigblock" style="display:none"><div class="nav-dropdown">
<!-- важные ссылки -->
<a href="ССЫЛКА">faq</a>
<a href="ССЫЛКА">сюжет</a>
<a href="ССЫЛКА">занятые внешности</a>
<a href="ССЫЛКА">персонажи</a>
<a href="ССЫЛКА">биржа труда</a>
<a href="ССЫЛКА">фракции и организации</a>
<a href="ССЫЛКА">карта</a>
<a href="ССЫЛКА">бестиарий</a>
<a href="ССЫЛКА">нужные</a>
<a href="ССЫЛКА">хочу видеть</a>
<a href="ССЫЛКА">хочу к вам</a>
</div></div>
<!----------------------------------------- конец навигации ------------------------------------------>
<!---------------------- КОНЕЦ ---------------------->
Поделиться42026-04-04 13:43:37
/* ===== ШАПКА SOLITUDE — CSS ===== */
/* ШАПКА — контейнер */
#pun-title {
position: absolute;
background: url(https://forumstatic.ru/files/001c/b0/ba/99480.png?v=1) center / cover no-repeat;
width: 1010px;
height: 382px;
margin-top: -415px;
margin-left: -20px;
}
/* ===== НАВИГАЦИЯ — кликальная зона на камне с рунами ===== */
.nav-btn {
position: absolute;
top: 44.7%;
left: 44.3%;
width: 7%;
height: 24%;
cursor: pointer;
z-index: 10;
background: transparent;
border: none;
border-radius: 8px;
transition: all 0.5s ease;
display: block;
text-decoration: none;
}
.nav-btn:hover {
background: radial-gradient(ellipse at 50% 50%,
rgba(210, 200, 60, 0.22) 0%,
rgba(200, 190, 50, 0.10) 40%,
transparent 70%);
filter: brightness(1.25);
}
.nav-btn::after {
content: 'навигация';
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
font-family: var(--body-font);
font-size: 8px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--fp-green-light);
opacity: 0;
transition: opacity 0.4s ease;
white-space: nowrap;
text-shadow: 0 0 8px rgba(122, 140, 101, 0.4);
}
.nav-btn:hover::after {
opacity: 0.8;
}
/* ===== АВАТАРКИ АКТИВА ===== */
.active-avatars {
position: absolute;
top: 84.4%;
left: 7.6%;
display: flex;
flex-direction: row;
gap: 6px;
}
.active-avatars a {
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
border: 1.5px solid var(--fp-stroke);
transition: border-color 0.3s ease, transform 0.3s ease;
opacity: 0.85;
}
.active-avatars a:hover {
border-color: var(--fp-green-light);
transform: scale(1.08);
opacity: 1;
}
.active-avatars img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(20%) contrast(1.05);
}
/* ===== POST OF THE WEEK — пилюли ===== */
.potw-pills {
position: absolute;
top: 55.6%;
left: 75.8%;
display: flex;
gap: 6px;
align-items: center;
}
.potw-label {
font-family: var(--heading-font);
font-style: italic;
font-size: 11px;
color: var(--fp-text);
letter-spacing: 0.02em;
border: 1px solid rgba(200, 196, 188, 0.5);
border-radius: 20px;
padding: 2px 11px;
background: transparent;
line-height: 1.4;
}
.potw-author {
font-family: var(--body-font);
font-size: 8px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--fp-text);
}
.potw-author a {
color: inherit;
text-decoration: none;
border: 1px solid rgba(200, 196, 188, 0.5);
border-radius: 20px;
padding: 3px 11px;
transition: all 0.3s;
display: inline-block;
}
.potw-author a:hover {
border-color: var(--fp-green-light);
color: var(--fp-green-light);
}
/* ===== POST OF THE WEEK — текст ===== */
.potw-text-wrap {
position: absolute;
top: 64.3%;
left: 76%;
width: 215px;
text-align: right;
}
.potw-text {
font-size: 9.5px;
line-height: 1.5;
color: var(--fp-text);
max-height: 75px;
overflow-y: auto;
text-align: justify;
background: transparent;
padding: 2px 4px 2px 0;
opacity: 0.6;
}
.potw-text::-webkit-scrollbar {
width: 3px;
}
.potw-text::-webkit-scrollbar-track {
background: transparent;
}
.potw-text::-webkit-scrollbar-thumb {
background: var(--fp-stroke);
border-radius: 3px;
}
/* ===== EPISODE OF THE WEEK ===== */
.eotw {
position: absolute;
top: 12.3%;
left: 79.1%;
text-align: center;
}
.eotw-label {
font-family: var(--heading-font);
font-style: italic;
font-size: 11px;
color: var(--fp-text);
letter-spacing: 0.02em;
border: 1px solid rgba(200, 196, 188, 0.5);
border-radius: 20px;
padding: 2px 11px;
background: transparent;
display: inline-block;
margin-bottom: 6px;
}
.eotw-link {
display: block;
font-family: var(--body-font);
font-size: 9px;
font-weight: 600;
font-style: normal;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--fp-text);
text-decoration: none;
transition: color 0.3s;
margin-bottom: 10px;
}
.eotw-link:hover {
color: var(--fp-green-light);
}
/* ===== АВАТАРКИ ЭПИЗОДА ===== */
.eotw-avatars {
position: absolute;
top: 85.4%;
left: 80.2%;
display: flex;
gap: 6px;
justify-content: center;
}
.eotw-avatars a {
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
border: 1.5px solid var(--fp-stroke);
transition: border-color 0.3s, transform 0.3s;
opacity: 0.85;
}
.eotw-avatars a:hover {
border-color: var(--fp-green-light);
transform: scale(1.1);
opacity: 1;
}
.eotw-avatars img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(20%) contrast(1.05);
}
/* ===== ВЫПАДАЮЩЕЕ МЕНЮ НАВИГАЦИИ ===== */
#navigblock {
position: absolute;
top: 42%;
left: 50%;
transform: translateX(-50%);
z-index: 20;
}
.nav-dropdown {
background: rgba(30, 30, 26, 0.88);
backdrop-filter: blur(12px);
border: 1px solid rgba(122, 140, 101, 0.2);
border-radius: 4px;
padding: 12px 8px;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 200px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.nav-dropdown a {
display: block;
font-family: var(--body-font);
font-size: 10px;
font-weight: 400;
letter-spacing: 0.06em;
color: var(--fp-text-muted);
text-decoration: none;
padding: 6px 14px;
border-radius: 3px;
transition: all 0.25s ease;
text-align: center;
}
.nav-dropdown a:hover {
color: var(--fp-text);
background: rgba(122, 140, 101, 0.15);
}
Поделиться52026-04-04 13:48:38
/* ОБЪЯВЛЕНИЕ
-------------------------------------------------------------*/
#pun-announcement .container {
padding: 0;
text-align: center;
position: absolute;
top: -10px;
left: 274px;
width: 500px;
}
#pun-announcement .container .html-box {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: nowrap;
margin: 20px 0px;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 5px;
}
.news-list:hover {
animation-play-state: paused;
}
.news {
flex: none;
border-radius: 20px;
background: rgba(63,72,58,.68);
border: 1px solid rgba(194,194,194,.35);
transition: all .25s ease !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.news a {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
padding: 7px 12px;
text-transform: uppercase;
color: #d7ddd2 !important;
font-family: "Playfair Display", serif;
font-size: 11px;
font-weight: 400;
letter-spacing: .08em;
line-height: 1;
white-space: nowrap;
}
.news a img {
display: none;
}
/* hover */
.news:hover {
background: rgba(224,224,224,.92);
border: 1px solid rgba(96,108,87,.85);
box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.news:hover a {
color: rgba(63,72,58,.92) !important;
}
Поделиться62026-04-04 13:48:58
/* Таблица
**************************************************************/
.description {
width: 352px;
height: 60px;
top: -66px;
position: absolute;
left: 624px;
overflow: auto;
font: var(--h1);
font-size: 10px;
font-weight: 400;
text-align: justify;
box-sizing: border-box;
line-height: 130%;
color: #f9ffe5;
z-index: 999;
text-transform: lowercase;
}
.percentagecap {
position: absolute;
left: 762px;
top: -292px;
width: 270px;
font-family: 'Allaina';
font-weight: 500;
font-size: 50px;
color: #453e1d;
z-index: 1000;
}
Поделиться72026-04-04 18:55:59
/* Таблица
**************************************************************/
.description {
width: 352px;
height: 60px;
top: -66px;
position: absolute;
left: 624px;
overflow: auto;
font: var(--h1);
font-size: 10px;
font-weight: 400;
text-align: justify;
box-sizing: border-box;
line-height: 130%;
color: #f9ffe5;
z-index: 999;
text-transform: lowercase;
}
.percentagecap {
position: absolute;
left: 762px;
top: -292px;
width: 270px;
font-family: 'Allaina';
font-weight: 500;
font-size: 50px;
color: #453e1d;
z-index: 1000;
}
<div id="pun-announcement">
<div class="container">
<div class="html-box" id="news-scroll">
<span class="news">
<a href="https://solitude.rusff.me/viewtopic.php?id=132">
<img src="https://upforme.ru/uploads/001c/95/36/5/434950.gif" alt="новости">
угадай кадр </a>
</span>
<span class="news">
<a href="https://solitude.rusff.me/viewtopic.php?id=131">
<img src="https://upforme.ru/uploads/001c/95/36/5/434950.gif" alt="новости">
фотоконкурс </a>
</span>
<span class="news">
<a href="https://solitude.rusff.me/viewtopic.php?id=133#p1218">
<img src="https://upforme.ru/uploads/001c/95/36/5/434950.gif" alt="новости">
пазлики </a>
</span>
</div>
</div>
</div>
Страница: 1
