магазин
[html]

<div id="spiritworkroom">
  <div class="spiritfirst">
    <div class="spiritfirstpic"><img src="https://i.imgur.com/jbMYZds.png"></div>
    <div class="spiritfirsttitle">информация
      <subtitle>наведи на текст</subtitle></div>
    <div class="spiritfirsttext"><subtitle>какая-то небольшая цитата</subtitle>
      <about>шел оформлять тему в графику, но споткнулся о раздел с дизайнами. к такому меня жизнь не готовила. прежде перебивался заказами от знакомых через знакомых, но сейчас решил оформиться, так сказать, официально. дизайнами и вот этим вот всем занимаюсь столько, сколько себя на ролевых помню, в связи с чем по факту могу как минимум в плане кодов исполнить практически любое пожелание. графически тоже не отстаю и в процессе работы стараюсь передать дизайном атмосферу и направленность проекта. это, собственно, всё, что я хотел сказать в приветствии.</about></div>
  </div>
 
  <div class="spiritsecond">
<div class="tabs">
    <input id="tab1" type="radio" name="tabs" checked>
    <label for="tab1">кьючивки</label>

    <input id="tab2" type="radio" name="tabs">
    <label for="tab2">сертификаты</label>

    <input id="tab3" type="radio" name="tabs">
    <label for="tab3">подарки</label>

<input id="tab4" type="radio" name="tabs">
    <label for="tab4">плашки, иконки</label>

    <section id="content-tab1">
        <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur eros eu diam vestibulum, at pretium libero blandit. Duis ut blandit tellus, interdum euismod nisl. Sed mattis erat non dapibus porttitor. Curabitur faucibus dictum ex et eleifend. Sed ultrices ante a sapien bibendum lobortis. Aliquam erat volutpat. Mauris ornare ligula eget felis placerat, a laoreet felis lobortis. Aliquam et elementum lectus. Aliquam suscipit nisl non tortor elementum ullamcorper. Donec tincidunt mollis purus, a condimentum leo.

Nullam sed iaculis lectus, sed euismod arcu. Maecenas scelerisque consequat enim, nec semper nulla laoreet vitae. Curabitur elit elit, ultrices in diam et, aliquam tristique ipsum. Aenean pulvinar fermentum egestas. In hac habitasse platea dictumst. Fusce hendrerit odio et eleifend tempor. Phasellus condimentum scelerisque ultricies. Phasellus pretium, risus vitae pretium volutpat, tellus nunc tristique diam, ut ornare nisi nunc in est. Nullam lacinia, nibh nec lacinia mollis, leo metus luctus leo, sed posuere lorem lorem a arcu. Fusce faucibus dolor a ultrices sagittis. Duis nec fringilla purus.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam diam leo, malesuada et nulla sed, auctor ornare odio. Curabitur eu mi leo. Suspendisse mauris nulla, rhoncus et quam nec, feugiat aliquet lorem. In hac habitasse platea dictumst. Sed justo metus, lobortis vel posuere in, cursus non magna. Nam mattis feugiat malesuada.

Cras velit mauris, consequat ullamcorper luctus ut, vehicula quis enim. Fusce vehicula nunc sit amet ligula venenatis sodales. Vivamus ac arcu dui. Cras turpis justo, ullamcorper non tellus vel, facilisis venenatis velit. Aliquam elementum risus ultrices nisi gravida efficitur. Aenean pulvinar tellus convallis varius tincidunt. Cras molestie diam at dui vehicula viverra. Fusce id sapien neque. Suspendisse egestas varius arcu, quis lobortis augue. Ut ultricies semper lacus. Quisque sed commodo augue. Vestibulum leo risus, viverra vitae magna id, volutpat scelerisque felis. Proin aliquam elit et ipsum posuere malesuada.

Maecenas pellentesque eros vitae elementum condimentum. Sed nec orci est. Vestibulum a ex nec nisl euismod varius. Etiam bibendum nibh id tortor vehicula malesuada volutpat ut augue. Integer sodales, leo eget molestie finibus, nibh diam laoreet dui, quis efficitur lectus lacus suscipit mi. Aliquam finibus et lorem congue imperdiet. Curabitur porta dolor sit amet eros semper viverra. Fusce aliquet, ligula quis mattis bibendum, nulla eros vulputate tortor, eget gravida erat tortor eget nulla. In arcu nisl, elementum sed tristique id, elementum eu odio. Duis imperdiet metus ac justo tempus vehicula et a sem. Vestibulum et volutpat libero. Cras vestibulum diam sit amet pulvinar accumsan. Donec sed ultrices libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Aenean sed ex arcu.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur eros eu diam vestibulum, at pretium libero blandit. Duis ut blandit tellus, interdum euismod nisl. Sed mattis erat non dapibus porttitor. Curabitur faucibus dictum ex et eleifend. Sed ultrices ante a sapien bibendum lobortis. Aliquam erat volutpat. Mauris ornare ligula eget felis placerat, a laoreet felis lobortis. Aliquam et elementum lectus. Aliquam suscipit nisl non tortor elementum ullamcorper. Donec tincidunt mollis purus, a condimentum leo.

Nullam sed iaculis lectus, sed euismod arcu. Maecenas scelerisque consequat enim, nec semper nulla laoreet vitae. Curabitur elit elit, ultrices in diam et, aliquam tristique ipsum. Aenean pulvinar fermentum egestas. In hac habitasse platea dictumst. Fusce hendrerit odio et eleifend tempor. Phasellus condimentum scelerisque ultricies. Phasellus pretium, risus vitae pretium volutpat, tellus nunc tristique diam, ut ornare nisi nunc in est. Nullam lacinia, nibh nec lacinia mollis, leo metus luctus leo, sed posuere lorem lorem a arcu. Fusce faucibus dolor a ultrices sagittis. Duis nec fringilla purus.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam diam leo, malesuada et nulla sed, auctor ornare odio. Curabitur eu mi leo. Suspendisse mauris nulla, rhoncus et quam nec, feugiat aliquet lorem. In hac habitasse platea dictumst. Sed justo metus, lobortis vel posuere in, cursus non magna. Nam mattis feugiat malesuada.

Cras velit mauris, consequat ullamcorper luctus ut, vehicula quis enim. Fusce vehicula nunc sit amet ligula venenatis sodales. Vivamus ac arcu dui. Cras turpis justo, ullamcorper non tellus vel, facilisis venenatis velit. Aliquam elementum risus ultrices nisi gravida efficitur. Aenean pulvinar tellus convallis varius tincidunt. Cras molestie diam at dui vehicula viverra. Fusce id sapien neque. Suspendisse egestas varius arcu, quis lobortis augue. Ut ultricies semper lacus. Quisque sed commodo augue. Vestibulum leo risus, viverra vitae magna id, volutpat scelerisque felis. Proin aliquam elit et ipsum posuere malesuada.

Maecenas pellentesque eros vitae elementum condimentum. Sed nec orci est. Vestibulum a ex nec nisl euismod varius. Etiam bibendum nibh id tortor vehicula malesuada volutpat ut augue. Integer sodales, leo eget molestie finibus, nibh diam laoreet dui, quis efficitur lectus lacus suscipit mi. Aliquam finibus et lorem congue imperdiet. Curabitur porta dolor sit amet eros semper viverra. Fusce aliquet, ligula quis mattis bibendum, nulla eros vulputate tortor, eget gravida erat tortor eget nulla. In arcu nisl, elementum sed tristique id, elementum eu odio. Duis imperdiet metus ac justo tempus vehicula et a sem. Vestibulum et volutpat libero. Cras vestibulum diam sit amet pulvinar accumsan. Donec sed ultrices libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Aenean sed ex arcu.
        </p>
    </section> 
    <section id="content-tab2">
        <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur eros eu diam vestibulum, at pretium libero blandit. Duis ut blandit tellus, interdum euismod nisl. Sed mattis erat non dapibus porttitor. Curabitur faucibus dictum ex et eleifend. Sed ultrices ante a sapien bibendum lobortis. Aliquam erat volutpat. Mauris ornare ligula eget felis placerat, a laoreet felis lobortis. Aliquam et elementum lectus. Aliquam suscipit nisl non tortor elementum ullamcorper. Donec tincidunt mollis purus, a condimentum leo.

Nullam sed iaculis lectus, sed euismod arcu. Maecenas scelerisque consequat enim, nec semper nulla laoreet vitae. Curabitur elit elit, ultrices in diam et, aliquam tristique ipsum. Aenean pulvinar fermentum egestas. In hac habitasse platea dictumst. Fusce hendrerit odio et eleifend tempor. Phasellus condimentum scelerisque ultricies. Phasellus pretium, risus vitae pretium volutpat, tellus nunc tristique diam, ut ornare nisi nunc in est. Nullam lacinia, nibh nec lacinia mollis, leo metus luctus leo, sed posuere lorem lorem a arcu. Fusce faucibus dolor a ultrices sagittis. Duis nec fringilla purus.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam diam leo, malesuada et nulla sed, auctor ornare odio. Curabitur eu mi leo. Suspendisse mauris nulla, rhoncus et quam nec, feugiat aliquet lorem. In hac habitasse platea dictumst. Sed justo metus, lobortis vel posuere in, cursus non magna. Nam mattis feugiat malesuada.

Cras velit mauris, consequat ullamcorper luctus ut, vehicula quis enim. Fusce vehicula nunc sit amet ligula venenatis sodales. Vivamus ac arcu dui. Cras turpis justo, ullamcorper non tellus vel, facilisis venenatis velit. Aliquam elementum risus ultrices nisi gravida efficitur. Aenean pulvinar tellus convallis varius tincidunt. Cras molestie diam at dui vehicula viverra. Fusce id sapien neque. Suspendisse egestas varius arcu, quis lobortis augue. Ut ultricies semper lacus. Quisque sed commodo augue. Vestibulum leo risus, viverra vitae magna id, volutpat scelerisque felis. Proin aliquam elit et ipsum posuere malesuada.

        </p>
    </section>
    <section id="content-tab3">
        <p>
Cras velit mauris, consequat ullamcorper luctus ut, vehicula quis enim. Fusce vehicula nunc sit amet ligula venenatis sodales. Vivamus ac arcu dui. Cras turpis justo, ullamcorper non tellus vel, facilisis venenatis velit. Aliquam elementum risus ultrices nisi gravida efficitur. Aenean pulvinar tellus convallis varius tincidunt. Cras molestie diam at dui vehicula viverra. Fusce id sapien neque. Suspendisse egestas varius arcu, quis lobortis augue. Ut ultricies semper lacus. Quisque sed commodo augue. Vestibulum leo risus, viverra vitae magna id, volutpat scelerisque felis. Proin aliquam elit et ipsum posuere malesuada.
    </p>
    </section>   
<section id="content-tab4">
        <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur eros eu diam vestibulum, at pretium libero blandit. Duis ut blandit tellus, interdum euismod nisl. Sed mattis erat non dapibus porttitor. Curabitur faucibus dictum ex et eleifend. Sed ultrices ante a sapien bibendum lobortis. Aliquam erat volutpat. Mauris ornare ligula eget felis placerat, a laoreet felis lobortis. Aliquam et elementum lectus. Aliquam suscipit nisl non tortor elementum ullamcorper. Donec tincidunt mollis purus, a condimentum leo.

Nullam sed iaculis lectus, sed euismod arcu. Maecenas scelerisque consequat enim, nec semper nulla laoreet vitae. Curabitur elit elit, ultrices in diam et, aliquam tristique ipsum. Aenean pulvinar fermentum egestas. In hac habitasse platea dictumst. Fusce hendrerit odio et eleifend tempor. Phasellus condimentum scelerisque ultricies. Phasellus pretium, risus vitae pretium volutpat, tellus nunc tristique diam, ut ornare nisi nunc in est. Nullam lacinia, nibh nec lacinia mollis, leo metus luctus leo, sed posuere lorem lorem a arcu. Fusce faucibus dolor a ultrices sagittis. Duis nec fringilla purus.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam diam leo, malesuada et nulla sed, auctor ornare odio. Curabitur eu mi leo. Suspendisse mauris nulla, rhoncus et quam nec, feugiat aliquet lorem. In hac habitasse platea dictumst. Sed justo metus, lobortis vel posuere in, cursus non magna. Nam mattis feugiat malesuada.

Cras velit mauris, consequat ullamcorper luctus ut, vehicula quis enim. Fusce vehicula nunc sit amet ligula venenatis sodales. Vivamus ac arcu dui. Cras turpis justo, ullamcorper non tellus vel, facilisis venenatis velit. Aliquam elementum risus ultrices nisi gravida efficitur. Aenean pulvinar tellus convallis varius tincidunt. Cras molestie diam at dui vehicula viverra. Fusce id sapien neque. Suspendisse egestas varius arcu, quis lobortis augue. Ut ultricies semper lacus. Quisque sed commodo augue. Vestibulum leo risus, viverra vitae magna id, volutpat scelerisque felis. Proin aliquam elit et ipsum posuere malesuada.

        </p>
    </section>
</div>
  </div>
</div>
<div class="clearer"></div>

<style>
/* код от вещего духа */
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900|Prata&subset=cyrillic');
@import url('https://fonts.googleapis.com/css?family=Amatic+SC:400,700|Old+Standard+TT:400,700|Oranienbaum|Oswald:300,400,700|PT+Sans:400,700|Roboto+Condensed:300,400,700|Roboto:300,400,700');

#spiritworkroom {width: 840px;
    height: 416px;
    background: #767996;
    margin: auto;
    border-radius: 10px;}

.spiritfirst {    float: left;
    margin: 9px;
    width: 186px;
    height: 391px;
    overflow: hidden;
    position: relative;
    border: 3px solid #f1f1f1;
    border-radius: 11px;
}

.spiritfirstpic {margin:auto;
width: 190px;
height: 490px;}

.spiritfirsttitle {font-family: nizhe;
font-weight: 900;
width: 190px;
color: #767996;
text-shadow: 1px 1px 0px rgb(239, 224, 173);
font-size: 25px;
letter-spacing: 2px;
height: 73px;
margin: -150px 0 0 0px;
z-index: 10;
position: relative;
padding-left: 10px;
background:  linear-gradient(to bottom, rgb(239, 224, 173), rgba(0,0,0,0));
transition: all .7s cubic-bezier(0.25, 0.1, 0.25, 1) .15s}

.spiritfirsttitle subtitle {box-shadow: 0 0 -2px 0 rgba(118, 121, 150, 50%);
  font-family: playfair display;
font-weight: normal;
color: #efe0ad;
text-shadow: 1px 1px 0px rgb(118, 121, 150);
font-size: 10px;
display: block;
text-align: right;
letter-spacing: 1px;
margin-top: 0px;
margin-right: 20px}
.spiritfirsttitle:before {    background: linear-gradient(to bottom, rgba(0,0,0,0), rgb(239, 224, 173));
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 30px;
    top: -30px;
    margin-left: -10px;
}
.spiritfirsttext {
z-index: 8;
    position: relative;
    background: rgb(118, 121, 150 / 70%);
    width: 190px;
    margin: 35px 0 0 0px;
    font-family: cuprum;
    font-size: 12px;
    text-align: justify;
    padding: 1px 0px;
    color: #f1f1f1;
}
.spiritfirsttext about {margin: 5px 15px;
display: block;
box-shadow: 0 -2px 0 0 rgba(255,255,255,.1);
padding-top: 10px}
.spiritfirsttext:after {background:linear-gradient(to bottom, rgba(0,0,0,0), rgb(239, 224, 173));
content: "";
display: block;
position: absolute;
width: 100%;
height: 100px;
bottom: -100px;
margin-left: 0px}
.spiritfirsttext subtitle {
  text-align: center;
  display: block;
  width: 190px;
  font-size: 11px;
  font-family: pt sans;
  color: #f7eaba;
  opacity: 0;
  transform: translate(0,400px);
  transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) .15s
}

.spiritfirst:hover .spiritfirsttitle {margin-top: -530px;
}
.spiritfirst:hover subtitle {opacity:1;
  transform: translate(0,0px)}

.spiritsecond {background: #fefefe;
background: #fefefe;
    width: 617px;
    margin: 10px;
    height: 396px;
    margin-top: 9px;
    border-radius: 10px;
    position: absolute;
    margin-left: 211px;
}

.tabs {
padding: 0px;
margin: 0 auto;
}

.tabs>section {
display: none;
padding: 5px;
  height: 342px;
  overflow-y: auto;
  margin: 5px;
  font-family: arial;
  font-size: 12px;
  text-align: justify
}
.tabs>section>p {
margin: 0 0 5px;
    line-height: 1.5;
    font: 400 12px/17px cuprum;
    color: #787b98;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

@keyframes fadeIn {
from {
    transform: translate(-400px,0);
    transform-origin: 50% 0%;
}
to {
    transform: translate(0px,0);
}
}

.tabs>input {
display: none;
position: absolute;
}

.tabs>label:first-of-type {box-shadow: none}
.tabs>label {
display:inline-grid;
    margin: 0 -3px 0px;
    padding: 8px 0px;
    text-align: center;
    color: #727592;
    background: #f1f1f1;
    width: 156px;
    border-radius: 7px 7px 0px 0px;
    left: 4px;
    top: 0px;
    font: 500 12px/17px cuprum;
    position:  relative;
    font-family: nizhe !important;
    font-size: 17px;
    text-transform: lowercase;
    letter-spacing: 3px;
}
.tabs>label:after {content: "";
display: block;
position:absolute;
width: 150px;
height: 3px;
background: #eddfade5;
left:3px;
bottom:3px;
transform: scaleX(0);
  transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s}

.tabs>label:hover:after {transform: scaleX(1);
background: #9799b7;}
.tabs>label:hover {
color: #9799b7;
cursor: pointer;
  transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s
}

.tabs>input:checked+label {
    color: #767996;
    background: #eddfad6c;
}
.tabs>input:checked+label:after {    content: "";
    display: block;
    position: absolute;
    width: 148px;
    height: 3px;
    background: #eddfad;
    left: 3px;
    bottom: 3px;
    transform: scaleX(1);
    transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s;
}

#tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3, #tab4:checked~#content-tab4 {
display: block;
}

.punbb .post-content p {
    margin: 0;
    padding: 0 0 1em 0;
    line-height: 130%;
}

.punbb img {
    margin-top: 0px;
    border-radius: 0% !important;
}
</style>[/html]

код принятия
[html]<!--вещий дух-->
<div class="spiritbox">
  <div class="spirit_pic"><img src="https://i.imgur.com/PSS2DMc.gif"></div>
  <div class="spirit_title">добро пожаловать
<div class="spirit_subtitle">в сан диего</div></div>
  <div class="spirit_txt"><div>
Мы рады приветствовать тебя на нашем форуме. Не забудь заполнить все темы и продолжай быть таким же классным.Мы рады приветствовать тебя на нашем форуме. Не забудь заполнить все темы и продолжай быть таким же классным. Мы рады приветствовать тебя на нашем форуме. Не забудь заполнить все темы и продолжай быть таким же классным. Мы рады приветствовать тебя на нашем форуме. Не забудь заполнить все темы и продолжай быть таким же классным. Мы рады приветствовать тебя на нашем форуме. Не забудь заполнить все темы и продолжай быть таким же классным. Мы рады приветствовать тебя на нашем форуме. Не забудь заполнить все темы и продолжай быть таким же классным. Мы рады приветствовать тебя на нашем форуме. Не забудь заполнить все темы и продолжай быть таким же классным.
</div>
</div>
</div>

<style>
@import url('https://fonts.googleapis.com/css?family=Oswald:400,700|Play:400,700&subset=cyrillic');

.spiritbox {width: 450px;
height: 150px;
overflow: hidden;
position: relative;
display: block;
margin: auto}

.spirit_pic {width: 450px;
height: 150px;
transition: all 0.7s ease-in-out 0s}

.spirit_pic img {
max-height: 150px;}

.spirit_title {width: 400px;
position: absolute;
text-align: center;
margin-top:-100px;
font-family: oswald;
font-size: 20px;
font-weight: 700;
margin-left: 25px;
color: #7076ad;
text-shadow: 1px 1px 0px #fdf7e6;
text-transform: lowercase;
transition: all 0.7s ease-in-out 0s;}

.spirit_subtitle {box-shadow: 0 -1px 0 0 #fdf7e6;
text-align: center;
font-family: play;
font-size: 9px;
font-weight: 500;
color: #7076ad;
text-shadow: 1px 1px 1px #fdf7e6;
text-transform: uppercase;
transition: all 0.3s ease-in-out 0s;
padding-top: 2px;
margin-top: 5px}

.spirit_txt {width: 415px;
height: 102px;
text-align: justify;
font-family: cuprum;
color: #767997;
border-radius: 10px 10px 10px 10px;
font-size: 13px;
margin-top: 25px;
position: absolute;
background-color: #fdf7e6;
line-height: 12px;
margin-left: 18px;
opacity: 0;
transition: all 0.7s ease-in-out 0s;}

.spirit_txt div {
overflow-y: auto;
padding-right: 5px;
  margin: 7px 7px;
  height: 85px
}

.spirit_txt div::-webkit-scrollbar {
width: 6px;
height:6px;
background-color: transparent;}

.spirit_txt div::-webkit-scrollbar-thumb {
  background-color:#767997;
  width:6px !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255,0.1) inset;
}

.spiritbox:hover .spirit_pic {filter: grayscale(100%) blur(2px);
transform: scale(1.2)}

.spiritbox:hover .spirit_title {margin-top: -200px}
.spiritbox:hover .spirit_txt {margin-top: -120px;
opacity: 1}</style>[/html]

первое сообщение в теме
[html]<style>
@import url('https://fonts.googleapis.com/css2?family=Arimo:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');
.fenris_tems_box {
      background: #f1f1f1;
    width: 825px;
    height: auto;
    margin: auto;
    padding: 0px 30px 30px;
}
.fenris_tems_box h6 {
    color: #f1f1f1;
    border-radius: 10px 10px 0px 0px;
    font: 500 32px Nizhe;
    letter-spacing: 3px;
    background: #797c9b;
    margin: 0;
    text-transform: uppercase;
    text-align: center;
    padding: 1px 13px 0px;
    margin-bottom: 0px;
    background-image: url(https://forumstatic.ru/files/001b/ad/91/12491.png);}

.fenris_tems_img {
  overflow: hidden;
  height: 60px;
  position: relative;
  margin-bottom: 30px;
}

.fenris_tems_img img {
  width: 100%;
  filter: grayscale(100%)
}

.fenris_tems_img:after {
          content: "";
    position: absolute;
    background: rgb(101 181 197 / 41%);
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
}

.fenris_tems_text {
      text-align: justify;
    font: 400 14px/17px cuprum;
    padding: 0px 2px 10px;
}
</style>
 
<div class="fenris_tems_box">
    <h6>название</h6>
    <div class="fenris_tems_text">
     <br>
    Текст

<hr class="hr-horizontal">

<style>
.hr-horizontal {
margin: 10px 0;
padding: 0;
height: 6px;
border-radius: 0px 0px 5px 5px;
background-image: url(https://forumstatic.ru/files/001b/ad/91/12491.png);
}
</style>
    </div>
</div>[/html]

[img=hide-autor]https://is.gd/ekiTPp[/img] [html]<style>
@import url('https://fonts.googleapis.com/css2?family=Arimo:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');
.fenris_tems_box {
      background: #f1f1f1;
    width: 825px;
    height: auto;
    margin: auto;
    padding: 0px 30px 30px;
}
.fenris_tems_box h6 {
    color: #f1f1f1;
    border-radius: 10px 10px 0px 0px;
    font: 500 32px Nizhe;
    letter-spacing: 3px;
    background: #797c9b;
    margin: 0;
    text-transform: uppercase;
    text-align: center;
    padding: 1px 13px 0px;
    margin-bottom: 0px;
    background-image: url(https://forumstatic.ru/files/001b/ad/91/12491.png);}

.fenris_tems_img {
  overflow: hidden;
  height: 60px;
  position: relative;
  margin-bottom: 30px;
}

.fenris_tems_img img {
  width: 100%;
  filter: grayscale(100%)
}

.fenris_tems_img:after {
          content: "";
    position: absolute;
    background: rgb(101 181 197 / 41%);
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
}

.fenris_tems_text {
      text-align: justify;
    font: 400 14px/17px cuprum;
    padding: 0px 2px 10px;
}
</style>
  
<div class="fenris_tems_box">
    <h6>связь с амс</h6>
    <div class="fenris_tems_text">
     <br>
    Вас мучает тот или иной вопрос, а может, появилась идея, которую вы бы хотели реализовать у нас? Пишите, не стесняйтесь. Поможем, подскажем, выслушаем, решим проблемы.

<hr class="hr-horizontal">
 
<style>
.hr-horizontal {
	margin: 10px 0;
	padding: 0;
	height: 6px;
	border-radius: 0px 0px 5px 5px;
	background-image: url(https://forumstatic.ru/files/001b/ad/91/12491.png);
}
</style>
    </div>
</div>[/html]

анкета

[html]<style>@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');</style>
​<div class="cheese_head_wrap">
<div class="cheese_head_first">
<div class="cheese_head_img">

      <img src="https://i.ibb.co/QCq9bNs/image.png">

</div>
<div class="cheese_head_info">

      <span>Алистер Тейрин</span>

      <em>08.09.2021, 37 лет</em>

      <em>Серый Страж. Король Ферелдена. Сырная булочка. Нализал себе на кувалду.</em>

</div>
</div>
<div class="cheese_head_quenta">

Когда Кристиан въехал в Потерянную Милю, было все еще жарко.</br></br>

Он не знал, что это за городок, потому что на дороге не было никаких знаков с названием. Указатель – сосновую доску с выцветшей от времени краской – еще лет двадцать назад сбил один дядька, который решил оприходовать за одну ночь сразу двоих любовниц. Его голова покоилась на груди Водки, а рука – на бедре у Виски, когда он утратил контроль над своим автомобилем. Указатель с названием города до сих пор валялся в нескольких футах от дороги, в густых зарослях пуэрарии, покоричневевший от крови, которая давным-давно высохла.</br></br>

Так что поначалу Кристиан даже не знал, в какой город он въехал. Он знал только одно: он где-то в Северной Каролине, денег почти не осталось, бензин тоже уже на исходе, и весь день было душно и жарко, и солнце все время грозило выглянуть из-за облаков. В общем, даже не зная названия города, Кристиан решил задержаться здесь на какое-то время.</br></br>

Он ехал по шоссе № 42 и свернул с него налево; стало быть, он въехал в город со стороны Скрипичной улицы – мимо вросших в землю трейлеров и покосившихся лачуг, мимо маленьких кладбищ, заросших сорной травой, мимо куч искореженного железа. Он не почувствовал ничего: ни ужаса, ни волнения. По большому счету, ему было все равно, где жить. Я мог бы доехать до Сан-Франциско, – подумал он, – и глядя на мост «Золотые Ворота» и на огни Китайского квартала, я чувствовал бы то же самое. Ему нельзя было вернуться в Новый Орлеан, так что он мог поселиться в любом другом городе. Все равно, в каком.</br></br>

На обочине, у самой дороги, стояла девочка лет семи-восьми, но худенькая и сморщенная, как старушка, в синей рубашке, которая была ей сильно велика. Один рукав уныло болтался, наполовину оторванный. Девочка что-то вертела в руках. Поравнявшись с ней, Кристиан притормозил и опустил стекло. Девочка уставилась на него. Ее серые глаза были такими же пасмурными и выцветшими, как сегодняшнее небо.</br></br>

– Что это за город? – спросил Кристиан. Девочка безразлично пожала худым плечом. Теперь Кристиан разглядел, что было у нее в руках – дохлая крыса с пропыленной шерстью. Ее размозженная голова и передние лапы ссохлись до состояния мумии.

</div>
<div class="cheese_head_last">
<div class="post_button" id="post_button">пробный пост</div>
<div id="postblock" style="display:none">

Когда Кристиан въехал в Потерянную Милю, было все еще жарко.</br></br>

Он не знал, что это за городок, потому что на дороге не было никаких знаков с названием. Указатель – сосновую доску с выцветшей от времени краской – еще лет двадцать назад сбил один дядька, который решил оприходовать за одну ночь сразу двоих любовниц. Его голова покоилась на груди Водки, а рука – на бедре у Виски, когда он утратил контроль над своим автомобилем. Указатель с названием города до сих пор валялся в нескольких футах от дороги, в густых зарослях пуэрарии, покоричневевший от крови, которая давным-давно высохла.</br></br>

Так что поначалу Кристиан даже не знал, в какой город он въехал. Он знал только одно: он где-то в Северной Каролине, денег почти не осталось, бензин тоже уже на исходе, и весь день было душно и жарко, и солнце все время грозило выглянуть из-за облаков. В общем, даже не зная названия города, Кристиан решил задержаться здесь на какое-то время.</br></br>

Он ехал по шоссе № 42 и свернул с него налево; стало быть, он въехал в город со стороны Скрипичной улицы – мимо вросших в землю трейлеров и покосившихся лачуг, мимо маленьких кладбищ, заросших сорной травой, мимо куч искореженного железа. Он не почувствовал ничего: ни ужаса, ни волнения. По большому счету, ему было все равно, где жить. Я мог бы доехать до Сан-Франциско, – подумал он, – и глядя на мост «Золотые Ворота» и на огни Китайского квартала, я чувствовал бы то же самое. Ему нельзя было вернуться в Новый Орлеан, так что он мог поселиться в любом другом городе. Все равно, в каком.</br></br>

На обочине, у самой дороги, стояла девочка лет семи-восьми, но худенькая и сморщенная, как старушка, в синей рубашке, которая была ей сильно велика. Один рукав уныло болтался, наполовину оторванный. Девочка что-то вертела в руках. Поравнявшись с ней, Кристиан притормозил и опустил стекло. Девочка уставилась на него. Ее серые глаза были такими же пасмурными и выцветшими, как сегодняшнее небо.</br></br>

– Что это за город? – спросил Кристиан. Девочка безразлично пожала худым плечом. Теперь Кристиан разглядел, что было у нее в руках – дохлая крыса с пропыленной шерстью. Ее размозженная голова и передние лапы ссохлись до состояния мумии.

</div>
</div>
</div>
<script type="text/javascript" src="https://forumstatic.ru/files/001b/60/aa/87833.js"></script>[/html]