<!--HTML-->
<div id="fresh_social">
  <span id="social_title">название соцсети<img src="https://i.imgur.com/Hf2iTjX.png"></span>
  <div id="fresch_social_box" style=" height: 590px">
    <div id="fresh_mainpage">
      <img src="https://i.imgur.com/P1Vza3X.jpg" class="fresh_bg">
    </div>
    <div id="fresh_mainpageinfo">
      <img src="https://i.imgur.com/shp13nV.png" class="fresh_ava">
      <span  class="fresh_pagename">charles blackwood
      <qu>Ее серые глаза были такими же пасмурными и выцветшими, как сегодняшнее небо.</qu></span>
    </div>
    <div class="soctabs">
    <input id="soc1" type="radio" name="soctabs" checked>
    <label for="soc1">информация</label>
 
    <input id="soc2" type="radio" name="soctabs">
      <label for="soc2"><b>35</b><small>друга</small></label>
 
    <input id="soc3" type="radio" name="soctabs">
    <label for="soc3"><b>35</b><small>подписки</small></label>
 
    <input id="soc4" type="radio" name="soctabs">
    <label for="soc4"><b>35</b><small>фото</small></label>
 
    <section id="content-soc1">
        <div>
	<p>Основная информация</p>
          <span class="title">Дата рождения</span>
          <span>текст</span>
          <span class="title">Родной город</span>
          <span>текст</span>
          <span class="title">Место работы</span>
          <span>текст</span>
          <span class="title">Семейное положение</span>
          <span>текст</span>
          <p>Образование</p>
          <span class="title">Школа</span>
          <span>текст</span>
          <span class="title">Университет</span>
          <span>текст</span>
          <span class="title">Курсы</span>
          <span>текст</span>
          <p>Личное</p>
          <span class="title">Интересы</span>
          <span>текст</span>
          <div class="soc_pagetags">
          #хэштег #хэштег #хэштег #хэштег #хэштег #хэштег #хэштег #хэштег #хэштег #хэштег #хэштег #хэштег #хэштег
          </div>
        </div>
    </section>  
    <section id="content-soc2">
        <div style="text-align: center">
      <a href="ссылка"><friend>
            <img src="https://i.imgur.com/shp13nV.png">
            Имя<br>Фамилия
            </friend></a>
<a href="ссылка"><friend>
            <img src="https://i.imgur.com/shp13nV.png">
            Имя<br>Фамилия
            </friend></a>
<a href="ссылка"><friend>
            <img src="https://i.imgur.com/shp13nV.png">
            Имя<br>Фамилия
            </friend></a>
<a href="ссылка"><friend>
            <img src="https://i.imgur.com/shp13nV.png">
            Имя<br>Фамилия
            </friend></a>
<a href="ссылка"><friend>
            <img src="https://i.imgur.com/shp13nV.png">
            Имя<br>Фамилия
            </friend></a>
<a href="ссылка"><friend>
            <img src="https://i.imgur.com/shp13nV.png">
            Имя<br>Фамилия
            </friend></a>
<a href="ссылка"><friend>
            <img src="https://i.imgur.com/shp13nV.png">
            Имя<br>Фамилия
            </friend></a>
<a href="ссылка"><friend>
            <img src="https://i.imgur.com/shp13nV.png">
            Имя<br>Фамилия
            </friend></a>
<a href="ссылка"><friend>
            <img src="https://i.imgur.com/shp13nV.png">
            Имя<br>Фамилия
            </friend></a>
<a href="ссылка"><friend>
            <img src="https://i.imgur.com/shp13nV.png">
            Имя<br>Фамилия
            </friend></a>
<a href="ссылка"><friend>
            <img src="https://i.imgur.com/shp13nV.png">
            Имя<br>Фамилия
            </friend></a>
<a href="ссылка"><friend>
            <img src="https://i.imgur.com/shp13nV.png">
            Имя<br>Фамилия
            </friend></a>
<a href="ссылка"><friend>
            <img src="https://i.imgur.com/shp13nV.png">
            Имя<br>Фамилия
            </friend></a>
<a href="ссылка"><friend>
            <img src="https://i.imgur.com/shp13nV.png">
            Имя<br>Фамилия
            </friend></a>
<a href="ссылка"><friend>
            <img src="https://i.imgur.com/shp13nV.png">
            Имя<br>Фамилия
            </friend></a>
<a href="ссылка"><friend>
            <img src="https://i.imgur.com/shp13nV.png">
            Имя<br>Фамилия
            </friend></a>
<a href="ссылка"><friend>
            <img src="https://i.imgur.com/shp13nV.png">
            Имя<br>Фамилия
            </friend></a>
<a href="ссылка"><friend>
            <img src="https://i.imgur.com/shp13nV.png">
            Имя<br>Фамилия
            </friend></a>
<a href="ссылка"><friend>
            <img src="https://i.imgur.com/shp13nV.png">
            Имя<br>Фамилия
            </friend></a>
        </div>
    </section> 
    <section id="content-soc3">
        <div>
      <div class="podpiska">
             <img src="https://i.imgur.com/P1Vza3X.jpg">
            <pname>текст</pname>
          </div>
            <div class="podpiska">
             <img src="https://i.imgur.com/P1Vza3X.jpg">
            <pname>текст</pname>
          </div>
<div class="podpiska">
             <img src="https://i.imgur.com/P1Vza3X.jpg">
            <pname>текст</pname>
          </div>
            <div class="podpiska">
             <img src="https://i.imgur.com/P1Vza3X.jpg">
            <pname>текст</pname>
          </div>
<div class="podpiska">
             <img src="https://i.imgur.com/P1Vza3X.jpg">
            <pname>текст</pname>
          </div>
            <div class="podpiska">
             <img src="https://i.imgur.com/P1Vza3X.jpg">
            <pname>текст</pname>
          </div>
<div class="podpiska">
             <img src="https://i.imgur.com/P1Vza3X.jpg">
            <pname>текст</pname>
          </div>
            <div class="podpiska">
             <img src="https://i.imgur.com/P1Vza3X.jpg">
            <pname>текст</pname>
          </div>
<div class="podpiska">
             <img src="https://i.imgur.com/P1Vza3X.jpg">
            <pname>текст</pname>
          </div>
            <div class="podpiska">
             <img src="https://i.imgur.com/P1Vza3X.jpg">
            <pname>текст</pname>
          </div>
<div class="podpiska">
             <img src="https://i.imgur.com/P1Vza3X.jpg">
            <pname>текст</pname>
          </div>
            <div class="podpiska">
             <img src="https://i.imgur.com/P1Vza3X.jpg">
            <pname>текст</pname>
          </div>
<div class="podpiska">
             <img src="https://i.imgur.com/P1Vza3X.jpg">
            <pname>текст</pname>
          </div>
            <div class="podpiska">
             <img src="https://i.imgur.com/P1Vza3X.jpg">
            <pname>текст</pname>
          </div>
    </div>
    </section> 
    <section id="content-soc4">
        <div>
      <div class="page_photo">
            <div class="photo">
              <img src="https://i.imgur.com/P1Vza3X.jpg">
            </div>
            <span>45</span>
          </div>
          
          <div class="page_photo">
            <div class="photo">
              <img src="https://i.imgur.com/P1Vza3X.jpg">
            </div>
            <span>45</span>
          </div>
<div class="page_photo">
            <div class="photo">
              <img src="https://i.imgur.com/P1Vza3X.jpg">
            </div>
            <span>45</span>
          </div>
          
          <div class="page_photo">
            <div class="photo">
              <img src="https://i.imgur.com/P1Vza3X.jpg">
            </div>
            <span>45</span>
          </div>
        </div>
    </section>    
</div>
  </div>
</div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,500;0,700;0,800;0,900;1,500;1,700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,700&display=swap');

#fresh_social {
  margin: auto;
  background: #90b698;
  width: 540px;
  padding: 30px;
  position: relative
}

#social_title {
  position: absolute;
  width: 540px;
  left: 0;
  top: 0;
  color: #f8f8f8;
  font: 700 15px/30px montserrat;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: right;
  padding: 0 30px;
  height: 30px;
}

#social_title img {
  float: right;
  margin-top: 5px;
  margin-left: 10px
}

#fresch_social_box {
  background: #f8f8f8;
  border: 8px solid #f8f8f8;
}

img.fresh_bg {
  width: 525px
}

#fresh_mainpage {
  overflow: hidden;
  height: 190px;
  position: relative;
}

#fresh_mainpage:after {
  content: "";
  background: rgba(0,0,0,.5);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#fresh_mainpageinfo {
  position: absolute;
  top: 38px;
  left: 38px;
  width: 524px;
  height: 190px;
  color: #f8f8f8
}

img.fresh_ava {
  width: 100px;
  height: 100px;
  border: 3px solid #f8f8f8;
  bottom: 25px;
  position: absolute;
  left: 25px
}

.fresh_pagename {
  position: absolute;
  right: 25px;
  top: 25px;
  text-align: right;
  font: 800 18px montserrat;
  text-transform: uppercase;
  display: block
}

.fresh_pagename qu {
  display: block;
  margin-top: 10px;
  font: 500 10px/14px ubuntu;
  text-transform: none;
  width: 300px;
}

.soctabs {
	padding: 0px;
	margin: 0 auto;
  margin-top: -74px;
  position: absolute;
}
/* Стили секций с содержанием */
.soctabs>section {
	display: none;
	margin-top: 40px;
}
.soctabs>section>div {
	margin: auto;
	line-height: 1.5;
	color: #383838;
	/* прикрутим анимацию */
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
  margin-top: 82px;
  width: 518px;
  height: 392px;
  font: 500 11px ubuntu;
  text-align: left;
  overflow-y: auto;
  padding-right: 5px
}
/* Описываем анимацию свойства opacity */
 
@-webkit-keyframes fadeIn {
	from {
    opacity: 0;
	}
	to {
    opacity: 1;
	}
}
@keyframes fadeIn {
	from {
    opacity: 0;
	}
	to {
    opacity: 1;
	}
}
/* Прячем чекбоксы */
.soctabs>input {
	display: none;
	position: absolute;
}
/* Стили переключателей вкладок (табов) */
.soctabs>label {
	display: inline-block;
	font: 600 9px montserrat;
  text-transform: uppercase;
	text-align: center;
	color: #202020;
	background: #f8f8f8;
  margin-right: -4px;
  position: absolute
}
.soctabs>label small {
  display: block;
  color: #424242;
  text-transform: lowercase;
  font-weight: 500;
  margin-top: 1px
}
.soctabs>label b {
  color: #4cac5e;
  font-size: 12px;
  font-weight: 600
}
.soctabs>label:first-of-type {
  margin-left: 150px;
  margin-top: 0px;
  padding: 19px 25px;
}
.soctabs>label:nth-of-type(2) {
  margin-left: 275px;
  margin-top: 0px;
  padding: 12px 25px;
}
.soctabs>label:nth-of-type(3) {
  margin-left: 347px;
  margin-top: 0px;
  padding: 12px 25px;
}
.soctabs>label:nth-of-type(4) {
  margin-left: 436px;
  margin-top: 0px;
  padding: 12px 23px;
}
.soctabs>label:hover {
	color: #888;
	cursor: pointer;
}
/* Стили для активной вкладки */
.soctabs>input:checked+label {
  background: #2b2b2b;
  color: #7f7f7f
}
.soctabs>input:checked+label small {
  color: #7f7f7f
}
/* Активация секций с помощью псевдокласса :checked */
#soc1:checked~#content-soc1, #soc2:checked~#content-soc2, #soc3:checked~#content-soc3, #soc4:checked~#content-soc4 {
	display: block;
}

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

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

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

.soc_pagetags {
  color: #4c8b59;
  margin-top: 30px
}
friend {
  display: inline-block;
  width: 85px;
  text-align: center;
  font-size: 10px;
  margin: 5px !important;
}

friend img {
  width:85px;
  height: 85px;
  border: 3px solid #99cca3 !important;
  margin-bottom: 5px !important;
}
.podpiska {
  width: 510px;
  height: 38px;
  margin-bottom: 12px ;
  transition: all .5s linear 0s;
  opacity: .6;
  filter: grayscale(50%)
}
.podpiska:hover {
  opacity: 1;
  filter: none
}

.podpiska img {
  width: 510px;
  height: 38px;
}

.podpiska pname {
  display: block;
  color: #f8f8f8;
  font: 700 11px montserrat;
  position: absolute;
  width: 510px;
  z-index: 999;
  margin-top: -28px;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 1px;
}
.page_photo {
  width: 500px;
  border: 7px solid #99cca3;
  height: 176px;
  overflow: hidden;
  position: relative;
  margin-bottom: 10px
}

.page_photo img {
  width: 500px;
}

.photo {
  position: relative;
}

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

.photo:hover:after {
  opacity: 0
}


.page_photo span {
  position: absolute;
  z-index: 999;
  color: #f8f8f8;
  font-size: 10px;
  left: 20px;
  bottom: 10px
}

.page_photo span:before {
  content:"\f004";
  font-family: icon; 
  font-size: 10px;
  margin-right: 10px
}

</style>

<!--HTML-->
<div id="fresh_social">
  <span id="social_title">название соцсети<img src="https://i.imgur.com/Hf2iTjX.png"></span>
  <div id="fresch_social_box">
    <div id="fresh_soc_post">
      <img src="https://i.imgur.com/shp13nV.png">
      <span>Charles Blackwood
        <small>23 июня 2020</small></span>
    </div>
    <div class="fresh_soc_postcont">
 <div class="fresh_soc_posphoto">
        <div><img src="https://i.imgur.com/P1Vza3X.jpg"></div>
          <span>#хэштег #хэштег #хэштег #хэштег</span>
        </div>

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

      <tags>#хэштег #хэштег #хэштег #хэштег #хэштег #хэштег #хэштег #хэштег</tags>
      <span class="soc_likes">24</span>
      <span class="soc_comm">5</span>
      <span class="soc_reply"></span>
    </div>
  </div>
</div>

<style>

#fresh_social {
  margin: auto;
  background: #90b698;
  width: 540px;
  padding: 30px;
  position: relative
}

#social_title {
  position: absolute;
  width: 540px;
  left: 0;
  top: 0;
  color: #f8f8f8;
  font: 700 15px/30px montserrat;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: right;
  padding: 0 30px;
  height: 30px;
}

#social_title img {
  float: right;
  margin-top: 5px;
  margin-left: 10px
}

#fresch_social_box {
  background: #f8f8f8;
  border: 8px solid #f8f8f8;
}

#fresh_soc_post {
  margin: 10px;
  display: flex;
  align-items: center
}

#fresh_soc_post img {
  width: 50px;
  height: 50px;
  border: 3px solid #90b698;
  margin-right: 20px;
}

#fresh_soc_post span {
  color: #2d2d2d;
  font: 700 14px montserrat;
}

#fresh_soc_post span small {
  display: block;
  font: 400 10px ubuntu;
  color: #474747
}

.fresh_soc_postcont {
  font: 400 11px/1.5 ubuntu;
  margin: 0 10px;
  text-align: justify;
  margin-bottom: 10px !important;
}

.fresh_soc_postcont tags {
  color: #4cac5e;
  display: block;
  text-align: right;
  font-weight: 500;
  margin-top: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #d3d3d3;
  padding-left: 150px;
  margin-bottom: 15px;
}

.soc_likes, .soc_comm, .soc_reply {
  color: #484848;
  font-size: 10px;
  position: relative;
  margin-right: 15px;
  text-align: left;
  height: 15px;
  display: inline-block;
}

.soc_likes:before {
  content:"\f004";
  font-family: icon; 
  font-size: 12px;
  margin-right: 5px
}

.soc_comm:before {
  content:"\f075";
  font-family: icon; 
  font-size: 13px;
  margin-right: 5px
}

.soc_reply:before {
  content:"\f112";
  font-family: icon; 
  font-size: 13px;
  margin-right: 5px
}
.fresh_soc_posphoto {
  position: relative;
  margin: 5px auto;
  width: max-content;
}

.fresh_soc_posphoto > div img {
  max-width: 503px
}

.fresh_soc_posphoto > div {
  position: relative;
  line-height: 0;
}

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

.fresh_soc_posphoto > div:hover:after {
  opacity:0
}

.fresh_soc_posphoto span {
  position: absolute;
  z-index: 999;
  color: #f8f8f8;
  font-size: 10px;
  left: 20px;
  bottom: 15px
}
</style>

<!--HTML-->
<div id="fresh_social">
  <span id="social_title">название соцсети<img src="https://i.imgur.com/Hf2iTjX.png"></span>
  <div id="fresch_social_box">
    <div id="fresh_soc_message">
      <img src="https://i.imgur.com/shp13nV.png">
      <div class="fresh_soc_message"><span>Charles Blackwood <small>23 июня 2020</small>
     </span>
        
        <div>
          
          Так что поначалу Кристиан даже не знал, в какой город он въехал. Он знал только одно: он где-то в Северной Каролине, денег почти не осталось, бензин тоже уже на исходе, и весь день было душно и жарко, и солнце все время грозило выглянуть из-за облаков. В общем, даже не зная названия города, Кристиан решил задержаться здесь на какое-то время.

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

<style>
#fresh_social {
  margin: auto;
  background: #90b698;
  width: 540px;
  padding: 30px;
  position: relative
}

#social_title {
  position: absolute;
  width: 540px;
  left: 0;
  top: 0;
  color: #f8f8f8;
  font: 700 15px/30px montserrat;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: right;
  padding: 0 30px;
  height: 30px;
}

#social_title img {
  float: right;
  margin-top: 5px;
  margin-left: 10px
}

#fresch_social_box {
  background: #f8f8f8;
  border: 8px solid #f8f8f8;
}

#fresh_soc_message {
  margin: 10px;
  display: flex;
  align-items: flex-start
}

#fresh_soc_message img {
  width: 34px;
  height: 34px;
  border: 3px solid #90b698;
  margin-right: 20px;
}

.fresh_soc_message span {
  color: #5b7761;
  font: 800 11px montserrat;
  display: block;
  margin-bottom: 5px;
}

.fresh_soc_message {
  font: 400 11px/1.5 ubuntu;
  margin: 0 10px 0 0px;
  text-align: justify;
}

.fresh_soc_message span small {
  display: inline;
  font: 400 10px ubuntu;
  color: #474747;
  margin-left: 20px
}

.fresh_soc_message span small:after {
  display: none
}
</style>

<!--HTML-->
<div class="htmltems" style="background: #d6d2d0 linear-gradient(to bottom, #477c8a 43px,#d6d2d0 0%)"><span class="htmltems_title" style="margin-bottom: 25px">

GET IN LOSER WE ARE GOING SHOPPING</span>

<div class="htmltems_cover"></div><div class="htmltems_textblock">


<p>доброго всем полудня, сегодня мы поговорим про итемы. устав от собирания бездушных циферок в профиле, мы решили отказаться от банковской системы. вместо счетчика в профиле у вас будет красоваться витрина с вашими самыми лучшими и дорогими итемами, а также чем-то еще особенным. в любом случае, продолжив читать содержимое этой темы вы рискуете узнать: во1 — что такое <i>итемы</i>, во2 — как их получить, в3 — что можно с ними делать. итак, начнем.</p><br><br>

<p><b>ПУНКТ 1: да што эти ваши итемы вообще такое?</b><br>
— итемы, по сути своей, являются талисманами, которые вы можете выиграть в конкурсах или получить за какие-то особенные заслуги.<br>
— каждый итем так же по сути является купоном на определенный бонус, активировать который вы можете в любой момент. активизация бонуса одноразовая и после активизации вы теряете итем из профиля/личной страницы! [см. пункт 3 для подробной информации о бонусах]<br>
— итемы делятся на три категории: легендарные, редкие, обычные_безделушки. <br>
— их можно как тратить на бонусы, так и собирать как коллекцию [см. пункт — для подробной информации про то, что можно делать с итемами]</p><br><br>

<p><b>ПУНКТ 2: да откуда я вообще могу эти итемы брать?</b><br>
— как редкие, так и легендарные будут разыгрываться в качестве призов в конкурсах. дорогие, естественно, выиграть куда сложнее дешевых.<br>
— также будет возможность получить специальные итемы —  их можно получить за какие-то ивенты или специальные события.</p><br><br>

<p><b>ПУНКТ 3: а зачем они вообще мне нужны?</b><br>
— во-первых, они красивые.<br>
— во-вторых, у каждого итема есть свой бонус [список итемов и их бонусов ниже], который вы <i>можете активизировать разово</i>. активизация бонуса всегда одноразовая и после активизации вы теряете предмет из профиля/личной страницы! обменять итем на бонусы вы сможете в <a href="ссылка на тему">этой</a теме.<br>
— в-третьих, накапливая их, вы можете оказаться в шапке на целый месяц! в конце каждого месяца будет подведен итог и самый "богатый" игрок будут возведен на аллею славы в шапке форума и получит один из ценных призов. игроки на втором и третьем месте тоже получат утешительные призы!</p><br><br>

<p><b>ПУНКТ 4: а что такое эти ваши безделушки?</b><br>
— безделушки — это награды за выполнение определенных действий в посте или вне постов [полный список действий в постах и вне постов, за исполнение которых вы получаете безделушку, находится ниже]<br>
— в отличие от итемов, у безделушек нету никаких бонусов, они имеют обычное качество и просто красивенькие.<br>
— тем не менее, безделушки полезно накапливать, ведь их раздобыть куда легче чем редкие и легендарные итемы, а они будут помогать вам накапливать очки в гонке за главный приз каждый месяц!</p><br><br>

<p><b>ПУНКТ 5: если у моего друга есть итем/безделушка, которая мне нужна и он хочет мне ее подарить?</b><br>
— особенные итемы не из списка не подлежат обмену, они привязаны к своему хозяину!<br>
— итемами и безделушками из списка ниже можно обмениваться, их можно дарить друзьям и тд.<br>
— сделать это можно будет тоже в теме <a href="ссылка">вопросов к амс</a>. 
</p>
  </div>
    <div class="htmltems_bottom" style="height: 25px;">
  </div>
</div>