<!--HTML-->
<div id="fresh_social">
  <span id="social_title">Fresh Net<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;
  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: FontAwesome; 
  font-size: 10px;
  margin-right: 10px
}

</style>

<!--HTML--><div id="fresh_social">
  <span id="social_title">FRESH NET<img src="https://i.imgur.com/Hf2iTjX.png"></span>
  <div id="fresch_social_box">
    <div id="fresh_soc_post">
      <img src="http://placehold.it/180X180">
      <span>@никнейм
        <small>число, месяц и год поста</small></span>
    </div>
    <div class="fresh_soc_postcont">
      Так что поначалу Кристиан даже не знал, в какой город он въехал. Он знал только одно: он где-то в Северной Каролине, денег почти не осталось, бензин тоже уже на исходе, и весь день было душно и жарко, и солнце все время грозило выглянуть из-за облаков. В общем, даже не зная названия города, Кристиан решил задержаться здесь на какое-то время.
<br><br>
Он ехал по шоссе № 42 и свернул с него налево; стало быть, он въехал в город со стороны Скрипичной улицы – мимо вросших в землю трейлеров и покосившихся лачуг, мимо маленьких кладбищ, заросших сорной травой, мимо куч искореженного железа. Он не почувствовал ничего: ни ужаса, ни волнения. По большому счету, ему было все равно, где жить. Я мог бы доехать до Сан-Франциско, – подумал он, – и глядя на мост «Золотые Ворота» и на огни Китайского квартала, я чувствовал бы то же самое. Ему нельзя было вернуться в Новый Орлеан, так что он мог поселиться в любом другом городе. Все равно, в каком.
      <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: FontAwesome; 
  font-size: 12px;
  margin-right: 5px
}

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

.soc_reply:before {
  content:"\f112";
  font-family: FontAwesome; 
  font-size: 13px;
  margin-right: 5px
}
</style>

<!--HTML--><div id="fresh_social">
  <span id="social_title">FRESH NET<img src="https://i.imgur.com/Hf2iTjX.png"></span>
  <div id="fresch_social_box">
    <div id="fresh_soc_post">
      <img src="http://placehold.it/180X180">
      <span>@никнейм
        <small>23 июня 2020</small></span>
    </div>
    <div class="fresh_soc_postcont">
 <div class="fresh_soc_posphoto">
        <div><img src="прямая ссылка на фотографию"></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: FontAwesome; 
  font-size: 12px;
  margin-right: 5px
}

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

.soc_reply:before {
  content:"\f112";
  font-family: FontAwesome; 
  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>