Личное звание

С соцсетью

<div class="profileInfo">
<div class="profileName"><a href="ССЫЛКА НА АНКЕТУ">ИМЯ, 30</a></div>
<div class="profileSocial"><a href="ССЫЛКА НА СОЦСЕТЬ">@your_login</a></div>
<div class="profileLZ">Характеристика героя, его профессия, судьба, <a href="ССЫЛКА НА ПРОФИЛЬ ПАРЫ">пара</a>.</div>
</div>

Без соцсети

<div class="profileInfo">
<div class="profileName"><a href="ССЫЛКА НА АНКЕТУ">ИМЯ, 30</a></div>
<div class="profileLZ">Характеристика героя, его профессия, судьба, <a href="ССЫЛКА НА ПРОФИЛЬ ПАРЫ">пара</a>.</div>
</div>

Деньги

<div class="profileMoney">3500$</div>

Плашка

<div class="plashka"><div class="plashka_pic"><img src="картинка"></div>
<p class="p1">Верхняя строчка</p>
<p class="p2">Нижняя строчка</p>
</div> 

[html]<div id="open_social">
  <span id="open_logo">Open Up<img src="http://images.vfl.ru/ii/1614427360/fe4eb097/33493177.png"></span>
  <div id="open_network">
    <div id="open_main">
      <img src="http://images.vfl.ru/ii/1614361184/ee5231b6/33483803.png" class="open_bg">
    </div>
    <div id="open_main_page">
      <img src="http://images.vfl.ru/ii/1614361097/2e57a21e/33483775.gif" class="open_face">
      <span  class="open_name">@никнейм
      <p>Дополнительный текст. Например, описание деятельности или цитата. </p></span>
    </div>
    <div class="open_buttons">
   
    <input id="op1" type="radio" name="open_buttons" checked>
    <label for="op1">информация</label>

    <input id="op2" type="radio" name="open_buttons">
      <label for="op2">друзья</label>

    <input id="op3" type="radio" name="open_buttons">
      <label for="op3">альбомы</label>

    <section id="content-op1">
        <div>
        <p><b>Личное</b></p>
          <span class="title"><b>Дата рождения</b><br>
          текст</span>
          <span class="title"><b>Родной город</b><br>
          текст</span>
          <span class="title"><b>Должность</b><br>
          текст</span>
          <span class="title"><b>Семейное положение</b><br>
          текст</span>
          <p><b>Образование</b></p>
          <span class="title"><b>Школа</b><br>
          текст</span>
          <span class="title"><b>Университет</b><br>
          текст</span>
          <p><b>Интересы</b></p>
          <span class="title"><b>Фильмы</b><br>
          текст</span>
          <span class="title"><b>Спорт</b><br>
          текст</span>
          <span class="title"><b>Музыка</b><br>
          текст</span>
          <span class="title"><b>Кумиры</b><br>
          текст</span>
          <div class="open_quote">
          «Любимая цитата»
          </div>
        </div>
    </section> 
    <section id="content-op2">
        <div class="open_friends">
          <a href="ссылка на соцсеть друга"><span class="open_friend">
            <img src="http://images.vfl.ru/ii/1614361097/2e57a21e/33483775.gif">
            Имя<br>Фамилия
            </span></a>
            <a href="ссылка на соцсеть друга"><span class="open_friend">
            <img src="http://images.vfl.ru/ii/1614361097/2e57a21e/33483775.gif">
            Имя<br>Фамилия
            </span></a>
            <a href="ссылка на соцсеть друга"><span class="open_friend">
            <img src="http://images.vfl.ru/ii/1614361097/2e57a21e/33483775.gif">
            Имя<br>Фамилия
            </span></a>
            <a href="ссылка на соцсеть друга"><span class="open_friend">
            <img src="http://images.vfl.ru/ii/1614361097/2e57a21e/33483775.gif">
            Имя<br>Фамилия
            </span></a>
            <a href="ссылка на соцсеть друга"><span class="open_friend">
            <img src="http://images.vfl.ru/ii/1614361097/2e57a21e/33483775.gif">
            Имя<br>Фамилия
            </span></a>
            <a href="ссылка на соцсеть друга"><span class="open_friend">
            <img src="http://images.vfl.ru/ii/1614361097/2e57a21e/33483775.gif">
            Имя<br>Фамилия
            </span></a>
            <a href="ссылка на соцсеть друга"><span class="open_friend">
            <img src="http://images.vfl.ru/ii/1614361097/2e57a21e/33483775.gif">
            Имя<br>Фамилия
            </span></a>
            <a href="ссылка на соцсеть друга"><span class="open_friend">
            <img src="http://images.vfl.ru/ii/1614361097/2e57a21e/33483775.gif">
            Имя<br>Фамилия
            </span></a>
            <a href="ссылка на соцсеть друга"><span class="open_friend">
            <img src="http://images.vfl.ru/ii/1614361097/2e57a21e/33483775.gif">
            Имя<br>Фамилия
            </span></a>
            <a href="ссылка на соцсеть друга"><span class="open_friend">
            <img src="http://images.vfl.ru/ii/1614361097/2e57a21e/33483775.gif">
            Имя<br>Фамилия
            </span></a>
            <a href="ссылка на соцсеть друга"><span class="open_friend">
            <img src="http://images.vfl.ru/ii/1614361097/2e57a21e/33483775.gif">
            Имя<br>Фамилия
            </span></a>
            <a href="ссылка на соцсеть друга"><span class="open_friend">
            <img src="http://images.vfl.ru/ii/1614361097/2e57a21e/33483775.gif">
            Имя<br>Фамилия
            </span></a>
            <a href="ссылка на соцсеть друга"><span class="open_friend">
            <img src="http://images.vfl.ru/ii/1614361097/2e57a21e/33483775.gif">
            Имя<br>Фамилия
            </span></a>
            <a href="ссылка на соцсеть друга"><span class="open_friend">
            <img src="http://images.vfl.ru/ii/1614361097/2e57a21e/33483775.gif">
            Имя<br>Фамилия
            </span></a>
            <a href="ссылка на соцсеть друга"><span class="open_friend">
            <img src="http://images.vfl.ru/ii/1614361097/2e57a21e/33483775.gif">
            Имя<br>Фамилия
            </span></a>
        </div>
    </section>

    <section id="content-op3">
    <div>
      <div class="open_album">
            <div class="open_photo">
              <img src="http://images.vfl.ru/ii/1614361184/ee5231b6/33483803.png">
            </div>
            <span>Название альбома</span>
        </div>
        <div class="open_album">
            <div class="open_photo">
              <img src="http://images.vfl.ru/ii/1614361184/ee5231b6/33483803.png">
            </div>
            <span>Название альбома</span>
        </div>
        <div class="open_album">
            <div class="open_photo">
              <img src="http://images.vfl.ru/ii/1614361184/ee5231b6/33483803.png">
            </div>
            <span>Название альбома</span>
        </div>
        <div class="open_album">
            <div class="open_photo">
              <img src="http://images.vfl.ru/ii/1614361184/ee5231b6/33483803.png">
            </div>
            <span>Название альбома</span>
        </div>     
         
    </div>
  </section>
</div>
  </div>
</div>

<style>

#open_social {
  margin: auto;
  background: linear-gradient(to bottom, #EBD9B5, #E1D09E, #B9BFC9);
  width: 500px;
  padding: 25px;
  position: relative;
}

#open_network {
height: 450px;
background: #fff;
    padding: 10px;
}

#open_logo {
  position: absolute;
  left: 0;
  top: 1px;
  width: 500px;
  color: #393534;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  text-align: left;
  padding: 0 30px;
  height: 30px;
}

#open_logo img {
  float: left;
  margin-top: 3px;
  margin-left: 2px;
  margin-right: 5px;
  height: 18px;
}

img.open_bg {
  width: 480px;
  height: 180px;
}

#open_main {
  overflow: hidden;
  height: 180px;
  position: relative;
}

#open_main:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#open_main_page {
  position: absolute;
  top: 38px;
  left: 38px;
  width: 524px;
  height: 200px;
}

img.open_face {
  width: 100px;
  height: 100px;
  border: 5px solid #fff;
  position: absolute;
  top: 120px;
  left: 15px;
}

.open_name {
  position: absolute;
  left: 135px;
  top: 115px;
  text-align: left;
  color: #fff;
  text-shadow: 1px 1px #393534;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 22px;
  font-weight: 800;
  text-transform: lowercase;
  display: block;
}

.open_name p {
  display: block;
  margin-top: 3px;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px;
  font-weight: 600;
  text-transform: none;
  width: 343px;
}

.open_buttons {
padding: 0px;
margin: 0 auto;
  margin-top: -60px;
  position: absolute;
}

.open_buttons>section {
display: none;
margin-top: 40px;
}
.open_buttons>section>div {
margin: auto;
line-height: 1.5;
color: #383838;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: appearance;
-moz-animation-name: appearance;
-o-animation-name: appearance;
animation-name: appearance;
  margin-top: 125px;
  width: 475px;
  height: 200px;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 500px;
  font-size: 11px;
  text-align: left;
  overflow-y: auto;
  padding-right: 5px;
}

@-webkit-keyframes appearance {
from {opacity: 0;}
to {opacity: 1;}
}
@-moz-keyframes appearance {
from {opacity: 0;}
to {opacity: 1;}
}
@-o-keyframes appearance {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes appearance {
from {opacity: 0;}
to {opacity: 1;}
}

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

.open_buttons>label {
display: inline-block;
  font-family: 'Montserrat', sans-serif !important;
font-size: 9px;
font-weight: 600;
  text-transform: lowercase;
text-align: center;
color: #383838;
background: #EBD9B5;
margin-right: -4px;
position: absolute;
}

.open_buttons>label:first-of-type {
  margin-left: 128px;
  margin-top: 65px;
  padding: 16px 25px;
}

.open_buttons>label:nth-of-type(2) {
  margin-left: 246px;
  margin-top: 65px;
  padding: 16px 40px;
}

.open_buttons>label:nth-of-type(3) {
  margin-left: 364px;
  margin-top: 65px;
  padding: 16px 36.5px;
}

.open_buttons>label:hover {
color: #B9BFC9;
cursor: pointer;
}

.open_buttons>input:checked+label {
  background: #383838;
  color: #B9BFC9;
}

#op1:checked~#content-op1, #op2:checked~#content-op2, #op3:checked~#content-op3 {
display: block;
}

section p {
  font-size: 13px;
  padding: 5px 0 !important;
}

section .title {
  color: #383838;
  width: 200px;
}

section span {
padding: 2px 0;
width: 300px;
display: inline-block;
}

.open_quote {
  color: #B9BFC9;
  margin-top: 30px;
}

.open_friends {
text-align: center!important;
}

.open_friend {
  display: inline-block;
  width: 80px;
  text-align: center;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 9px;
  margin: 5px!important;

}

.open_friend img {
  width: 60px;
  height: 60px;
  border: 5px solid transparent;
  -moz-border-image: -moz-linear-gradient(#EBD9B5, #E1D09E, #B9BFC9);
  -webkit-border-image: -webkit-linear-gradient(#EBD9B5, #E1D09E, #B9BFC9);
  -o-border-image: -o-linear-gradient(#EBD9B5, #E1D09E, #B9BFC9);
  border-image: linear-gradient(#EBD9B5, #E1D09E, #B9BFC9);
  border-image-slice: 1;
  margin: 5px 5px 0px 5px!important;
}

.open_album {
  width: 200px;
  height: 100px;
  border: 5px solid transparent;
  -moz-border-image: -moz-linear-gradient(#EBD9B5, #E1D09E, #B9BFC9);
  -webkit-border-image: -webkit-linear-gradient(#EBD9B5, #E1D09E, #B9BFC9);
  -o-border-image: -o-linear-gradient(#EBD9B5, #E1D09E, #B9BFC9);
  border-image: linear-gradient(#EBD9B5, #E1D09E, #B9BFC9);
  border-image-slice: 1;
  overflow: hidden;
  display: inline-block;
  position: relative;
  margin-bottom: 10px;
}

.open_album:nth-of-type(odd) {
margin-right: 15px;
margin-left: 10px;
}

.open_album img {
  width: 200px;
  height: 100px;
}

.open_photo {
  position: relative;
}

.open_photo:after {
  content: "";
  background: rgba(0,0,0,.6);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all .5s linear 0s;
}

.open_photo:hover:after {
  opacity: 0;
}

.open_album span {
  position: absolute;
  z-index: 100;
  color: #fff;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px;
  left: 7px;
  bottom: 2px;
}

</style>
[/html]

[html]<center><div class="open_post_wrapper">
<div class="open_post">
    <div class="open_post_face"><img src="http://images.vfl.ru/ii/1614361097/2e57a21e/33483775.gif"></div>
    <div class="open_post_name">никнейм <p>место публикации</p></div>
      <div class="open_post_description">Текст поста текст поста текст поста. Текст поста текст поста текст поста. Текст поста текст поста текст поста. Текст поста текст поста текст поста. <span class="open_post_tags">#tag #tag #tag #tag #tag</span></div>
      <div class="open_post_data">20.03.2020</div>
      <div class="open_likes">♥ 20</div>
</div>
</div></center>

<style>

.open_post_wrapper {
margin: auto;
  background: linear-gradient(to bottom, #EBD9B5, #E1D09E, #B9BFC9);
  width: 500px;
  height: auto;
  padding: 25px;
  position: relative;
}

.open_post {
width: 450px;
height: auto;
background-color: #fff;
padding: 60px 25px 20px 25px;
}

.open_post_face {
position: absolute;
left: 75px;
top: 40px;
z-index: 100;
transition: opacity 1s ease;
opacity: .7;
}

.open_post_face:hover {
opacity: 1;
}

.open_post_face img {
width: 40px;
height: 40px;
border-radius: 50%;
}

.open_post_name {
  position: absolute;
  left: 120px;
  top: 46px;
  text-align: left;
  color: #393534;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px;
  font-weight: 800;
  text-transform: lowercase;
  display: block;
}

.open_post_name p {
font-family: 'Montserrat', sans-serif !important;
font-size: 10px;
margin: 0px;
font-weight: 500;
}

.open_likes {
  position: absolute;
  z-index: 100;
  color: #393534;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px;
  left: 77px;
  bottom: 46px;
  font-weight: 600;
  transition: opacity .5s ease;
  opacity: .5;
}

.open_likes:hover {
opacity: 1;
}

.open_post_data {
font-family: 'Montserrat', sans-serif !important;
  font-size: 10px;
  font-weight: 600;
  text-transform: none;
  width: 400px;
  text-align: right;
}

.open_post_description {
font-family: 'Montserrat', sans-serif !important;
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 400px;
  text-align: justify!important;
}

.open_post_tags {
color: #B9BFC9;
}

</style>[/html]

Категории

1. Регистрация — Freedom Trail

2. Организация — Old State House

3. Игра — North End

4. Флуды — Cheers Beacon Hill

5. Реклама — Quincy Market

6. Архив — Ink Block

7. Админка — Mapparium

[html]<center><table class="open_birzha">
<tr><td class="birzha_name" colspan="2">Политика</td></tr>
<tr><td class="birzha_person"><a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br></td>
<td class="birzha_person"><a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br></td></tr>
<tr><td class="birzha_name" colspan="2">Правоохранительные органы и безопасность</td></tr>
<tr><td class="birzha_person"><a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br></td>
<td class="birzha_person"><a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br></td></tr>
<tr><td class="birzha_name" colspan="2">Бизнес и финансы</td></tr>
<tr><td class="birzha_person"><a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br></td>
<td class="birzha_person"><a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br></td></tr>
<tr><td class="birzha_name" colspan="2">Наука и образование</td></tr>
<tr><td class="birzha_person"><a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br></td>
<td class="birzha_person"><a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br></td></tr>
<tr><td class="birzha_name" colspan="2">Медицина и психология</td></tr>
<tr><td class="birzha_person"><a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br></td>
<td class="birzha_person"><a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br></td></tr>
<tr><td class="birzha_name" colspan="2">СМИ и медиа</td></tr>
<tr><td class="birzha_person"><a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br></td>
<td class="birzha_person"><a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br></td></tr>
<tr><td class="birzha_name" colspan="2">Культура и искусство</td></tr>
<tr><td class="birzha_person"><a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br></td>
<td class="birzha_person"><a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br></td></tr>
<tr><td class="birzha_name" colspan="2">Сфера обслуживания и развлечений</td></tr>
<tr><td class="birzha_person"><a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br></td>
<td class="birzha_person"><a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br></td></tr>
<tr><td class="birzha_name" colspan="2">Криминал</td></tr>
<tr><td class="birzha_person"><a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br></td>
<td class="birzha_person"><a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br></td></tr>
<tr><td class="birzha_name" colspan="2">Другое</td></tr>
<tr><td class="birzha_person"><a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br></td>
<td class="birzha_person"><a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br>
<a href="#">Name Surname</a> - должность<br></td></tr>
</table></center>

<style>

.open_birzha table {
width: 500px;
}

.birzha_name {
width: 500px;
text-align: center;
background-color: #e7d7b2 !important;
color: #393534 !important;
font-family: 'Cormorant Garamond', serif !important;
font-size: 16px;
padding: 4px;
font-weight: 700;
        text-transform: uppercase;
}

.birzha_person {
width: 300px;
text-align: center;
background-color: #C5CBD5 !important;
font-family: 'Montserrat', sans-serif !important;
font-size: 11px;
padding: 10px;
}

.open_birzha a {
font-weight: 600;
}

</style>[/html]