[html]<style>
/*** ОБЪЯВЛЕНИЕ ***/
#objav { max-width: 600px;
--bgbody:#181816;
position:relative;
display:grid; grid-template-columns: 0.8fr 1.5fr 1fr; grid-template-rows:auto; align-items:center;
color: #919380;
box-shadow: 0px 0px 12px -1px #7c612f, inset 0 0 10px 0px #0c0c05;
background: url(https://forumstatic.ru/files/000e/55/96/57532.jpg) 50% 0% repeat-y var(--bgbody);
}
#objav:before {
display: block; content: '';
width: calc(100% + 0px); height:20px;
position: absolute; top: -14px;
margin-left: 0px;
background: url(https://forumstatic.ru/files/000e/55/96/31182.png) 50% 0% no-repeat transparent;
pointer-events: none; transform: scale(-1,1);
}
.naviga {grid-column: 1 / 2;  grid-row: 1 / 2; text-align:center; padding:3px 16px 3px 0;}
.obj1 {grid-column: 2 / 3;  grid-row: 1 / 2; align-self: stretch;
display:grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items:center;
padding: 10px; border-width: 0px;
}
.obj2 {grid-column: -2 / -1;  grid-row: 1 / 2; padding: 6px 10px 10px 6px; align-self: stretch;
display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; align-items: center;}
.obj1, .obj2 {text-align:center;}
.naviga ul li {padding: 8px 0 6px 0;
font-weight: 400;
font-size: 18px;
font-family: Rotis, Georgia, serif;
letter-spacing: 0.04em;
color: var(--bgpun1);
text-shadow: 1px 0 2px var(--t-shd);
border-bottom: 1px solid transparent;
border-image: linear-gradient(to right, rgba(255,255,255,0) 0%, #3b3e2b 20%, #3b3e2b 80%, rgba(255,255,255,0) 100%);
border-image-slice: 1;
}
.naviga ul li:last-child {border-bottom: 0px solid transparent;}

/*** Временные рамки ***/
.obj-h {
padding: 8px 0;
font-style: italic; font-size: 0.9em;
letter-spacing: 0.05em;
color: #868b6a; text-shadow: 0px 1px 3px #000;
}
.obj-s {
display:block; position:relative;
margin: auto 0px 4px; padding:10px 6px 10px 10px;
background: url(https://forumstatic.ru/files/000e/55/96/39795.jpg) 50% 0% repeat var(--bgbody);
box-shadow: inset 0 0 6px rgba(0,0,0,0.5), 0 0 8px rgba(0,0,0,0.6);
border: 1px solid #2b2b21;
}
.obj-s:before {
width: 42px; height: 70px;
position:absolute;
top:-18px; margin-left:-30px;
display:block; content:''; pointer-events:none;
background: url(https://forumstatic.ru/files/000e/55/96/14599.png) no-repeat transparent;
opacity: 0.65;
transform: scale(-1,1);
}
.obj-s:after {
width:42px; height:70px;
position:absolute;
bottom:-18px; right:-20px;
display:block; content:''; pointer-events:none;
background: url(https://forumstatic.ru/files/000e/55/96/14599.png) no-repeat transparent;
opacity: 0.65;
transform: scale(1,-1);
}
/*** Блок с описанием событий ***/
.obj-s p {display:block; overflow:auto; padding-right:4px;
max-height:100px;
font-size: 0.9em;
line-height: 150%;
}
/*** Цитаты ***/
.obj-cite span {
display: block; overflow: auto; padding-right: 4px;
max-height: 72px;
font-size: 0.9em; line-height: 130%;
text-align: justify;
text-shadow: 1px 1px 3px rgb(0,0,0,0.6);
}
.obj-cite em {display:block; padding-top: 6px; text-align:right; font-style: italic; letter-spacing: 0.05em; color: #909572; font-family: Georgia, Arial, serif;}
.obj-cite a {color: #cdbd92; text-shadow: 0 0 3px #000, 0 0 10px #7e6a2c;}
.obj-cite a:hover {filter:brightness(1.25);}

/*** Заголовки в объявлении ***/
#objav h5 {
padding: 6px 0 6px 0; text-align:center;
font-weight: 400; font-size: 17px; letter-spacing: 0.05em;
font-family: Mikadan, Rotis, Georgia, serif;
color: #cdbd92; text-shadow: 0 0 3px #000, 0 0 10px #7e6a2c;
}

/*** Ссылки в быстрой навигации ***/
.naviga li a {
color: rgb(236 205 126 / 55%) !important;
background: linear-gradient(rgba(255,255,255,1) 35%, rgba(0,0,0,1) 100%) !important;
background: -moz-linear-gradient(top, rgba(255,255,255,1) 35%, rgba(0,0,0,1) 100%) !important;
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 35%, rgba(0,0,0,1) 100%) !important;
background: -ms-linear-gradient(top, rgba(255,255,255,1) 35%, rgba(0,0,0,1) 100%) !important;
background-clip: text !important;
-webkit-background-clip: text !important;
-moz-background-clip: text !important;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
text-shadow: 1px -1px 0px #000;
}
.naviga li a:hover {filter: brightness(1.3);}

/***  РАЗЫСКИВАЕМ ПЕРСОНАЖЕЙ ***/
.akpers {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-evenly; align-items: center;}
.pacv {position: relative; z-index: 6;}
.pacv em {position: absolute; z-index: 7; left: 50%;
margin-top: 2px; padding: 10px; box-sizing: border-box;
max-width: 220px; min-width: 140px;
text-align: center; font-size: 11px; text-transform: none;
transition: all .2s ease-in-out 0s; transform: scale(0) translateX(-50%); transform-origin: top left;
background: url(https://forumstatic.ru/files/000e/55/96/39795.jpg) 50% 0% repeat var(--bgbody);
box-shadow: inset 0 0 4px rgba(0,0,0,0.75), 0 1px 6px rgba(0,0,0,0.35);
border: 1px double #3b3e2b;;
}
.pacv img {display: block; width: 50px; height: 50px; object-fit:cover; object-position: 50% 50%; margin:auto; border: 3px double #3d3921; box-shadow: 0 1px 6px rgb(0 0 0 / 75%);}
.pacv:hover em {transform: scale(1) translateX(-50%);}

/***   РЕЗНАЯ РАМКА   ***/
#objav, .post-author, .pa-avatar img {
border-style: solid; border-width: 3px;
-moz-border-image: url(https://forumstatic.ru/files/000e/55/96/20610.png) 18 repeat;
-webkit-border-image: url(https://forumstatic.ru/files/000e/55/96/20610.png) 18 repeat;
-o-border-image: url(https://forumstatic.ru/files/000e/55/96/20610.png) 18 repeat;
border-image: url(https://forumstatic.ru/files/000e/55/96/20610.png) 18 repeat;
border-image-width: 18px;
border-image-outset: 2px;
}

#objav {grid-template-columns: 1fr; grid-template-rows: auto auto auto; padding:8px;}
.naviga {grid-column: 1 / -1; grid-row: 1 / 2; padding:0px;}
.obj1 {grid-column: 1 / -1; grid-row: 2 / 3; display:block; padding:0;}
.obj2 {grid-column: 1 / -1; grid-row: 3 / 4; display:block; padding:0;}

.obj1 span, .obj-cite {display:none;}
.obj-h {padding:8px 0 2px;}

.naviga {text-align:center; padding:6px 0 0;}
.naviga ul {display:flex; flex-direction: column; position: relative;}
.naviga:before {content: 'Навигация'; margin: auto; font-weight: 400; font-size: 18px; font-family: Rotis, Georgia, serif; letter-spacing: 0.04em; color: var(--bgpun1); text-shadow: 1px 0 2px var(--t-shd);}
.naviga ul {position: absolute; top: 24px; width:92%; margin-left:3%; z-index: 10; padding: 0 10px; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0;
background: url(https://forumstatic.ru/files/000e/55/96/39795.jpg) 50% 0% repeat var(--bgbody);
box-shadow: inset 0 0 6px rgba(0,0,0,0.5), 0 0 8px rgba(0,0,0,0.6);
border: 1px solid #2b2b21;
}
.naviga:hover ul {-webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1);}
.naviga li {padding-right: 0; margin:auto 0px;}
.naviga ul li a {border-bottom: 1px solid var(--brd2); padding: 8px 4px; margin: 3px 0px 0px; display: block; font-size: 14px; font-weight:600;}
.naviga ul li:last-child a {margin-bottom: 0px; border-bottom:0px solid transparent;}
</style>

<!----- НАЗВАНИЕ ЛОГОТИП -----><div id="nazlogo"><span>Dragon Age: Another story</span></div>

<div id="objav">
<div class="naviga"><ul><!--- НАВИГАЦИЯ --->
<li><a href="/viewtopic.php?id=3">О форуме</a></li>
<li><a href="/viewforum.php?id=10">Игровой функционал</a></li>
<li><a href="/viewtopic.php?id=24">Список персонажей</a></li>
<li><a href="/viewtopic.php?id=18">Хронология событий</a></li>
<li><a href="/viewtopic.php?id=6">Войти в историю</a></li>
</ul></div>

<div class="obj1"> <!--- ДАТА И СОБЫТИЯ --->
<div class="obj-h"><b>Время в игре:</b> 9:41 ВД, месяц юстиниан</div>

<span><h5>События</h5><div class="obj-s"><p>

<b>Длинное</b> описание событий, произошедших до Конклава, во время Конклава и, <u>конечно</u> же, <s>после него</s>.<br>
А <i>может</i>, и <b>что-то еще</b>. Может, ситуация в странах или самые яркие события? Посмотрим, я же просто проверочный текст, призванный "забить" табличку и не более того...<br>
<b>Длинное</b> описание событий, произошедших до Конклава, во время Конклава и, <u>конечно</u> же, <s>после него</s>.<br>
А <i>может</i>, и <b>что-то еще</b>. Может, ситуация в странах или самые яркие события? Посмотрим, я же просто проверочный текст, призванный "забить" табличку и не более того...

</p></div></span>
<!----- END 2 блок -----></div>

<div class="obj2"><!--- ЦИТАТЫ --->
<div class="obj-cite"><h5>Слышали?..</h5>
<span>

тут скрипт

</span><!--- END ЦИТАТЫ ---></div>

<!--- РАЗЫСКИВАЕМЫЕ ПЕРСОНАЖИ --->
<div class="obj-act"><h5>Разыскиваем</h5><div class="akpers">

<!------- ПЕРВЫЙ --------->
  <span class="pacv">
  <a href="ccылка"><img src="https://forumupload.ru/uploads/001b/03/40/91/31787.jpg"></a>
  <em> Описание персонажа </em>
  </span>

   <!------- ВТОРОЙ --------->
  <span class="pacv">
  <a href="ccылка"><img src="https://forumupload.ru/uploads/001b/03/40/91/31787.jpg"></a>
  <em> Описание персонажа </em>
  </span>

   <!------- ТРЕТИЙ --------->
  <span class="pacv">
  <a href="ccылка"><img src="https://forumupload.ru/uploads/001b/03/40/91/31787.jpg"></a>
  <em> Описание персонажа </em>
  </span>

   <!------- ЧЕТВЕРТЫЙ --------->
  <span class="pacv">
  <a href="ccылка"><img src="https://forumupload.ru/uploads/001b/03/40/91/31787.jpg"></a>
  <em> Описание персонажа </em>
  </span>

</div></div>
<!----- END 3 блок -----></div>

<!----- END ОБЪЯВЛЕНИЕ -----></div>[/html]