[html]

<style>
/* новости */

newswrap {
  width: 414px;
  height: auto;
  min-height: 400px;
  display: block;
  position: relative;
  margin: auto !important;
  box-sizing: border-box;
  z-index: 5;
}

newswrap * {
  box-sizing: border-box;
}

newsblock {
  background: rgba(230, 230, 230, 1);
  display: block;
  width: 414px;
  border-radius: 10px;
  padding: 22px;
  position: relative;
  margin: auto !important;
  margin-bottom: 89px !important;
  z-index: -1;
  white-space: pre-line;
border: 1px solid rgba(0, 0, 0, 1)
}

newsact {
  background: rgba(230, 230, 230, 1);
  display: block;
  width: 414px;
  border-radius: 10px;
  padding: 10px;
  position: relative;
  margin: auto !important;
  margin-bottom: 23px !important;
}

newsact a {
border-bottom: none!important
}

newshead {
  height: 56px;
  width: 100%;
  display: block;
  position: relative;

}

newshead::before {
    content: '';
    background: url(https://forumstatic.ru/files/001c/80/b1/70990.png) no-repeat center / 100%;
    height: 75px;
    width: 79px;
    top: 9px;
    left: -47px;
    position: absolute;
    z-index: 3;
}

newshead div img {
  width: 68px;
  height: 68px;
  object-fit: cover;
  border-radius: 50%;
}

newshead div {
  background: linear-gradient(180deg, #927BA1, #B9A1AB) !important;
  border-radius: 50%;
  width: 76px;
  height: 76px;
  padding: 4px;
  position: absolute;
  top: 62px;
  left: 90px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;

}

newshead span:first-of-type {
    font-weight: 700;
    font-size: 36px;
    line-height: 140%;
    text-transform: lowercase;
    display: block;
    position: absolute;
    top: 9px;
    left: 36px;
}

newshead span:last-of-type {
    font-weight: 400;
    font-size: 12px;
    line-height: 24px;
    border-radius: 4px;
    padding: 0 10px;
    display: block;
    height: 24px;
    background: rgb(var(--canvas-quarternary));
    position: absolute;
    top: 44px;
    right: 15px;
    z-index: 5;
}

newshead span:last-of-type::before,
newshead span:last-of-type::after {
    content: "\273B";
    position: relative;
    color: rgba(0, 0, 0, 1);
    padding-left: 5px;
    font-weight: bold
}

newshead span:last-of-type::before {
    padding-right: 5px;
    padding-left: 0px;
}

newsact::before {
    content: '';
    background: url(https://forumstatic.ru/files/001c/80/b1/86713.png);
    background-size: 100%;
    height: 152px;
    width: 108px;
    position: absolute;
    top: -121px;
    left: 6px;
    z-index: -1;
}

newsact::after {
  content: '';
  background: url(https://forumstatic.ru/files/001c/80/b1/69404.png);
  background-size: 100%;
  height: 198px;
  width: 162px;
  position: absolute;
  top: -213px;
  right: -92px;
  z-index: 3;
}

newsact div {
  padding: 5px 0;
  line-height: 200%;
  border-bottom: 1px solid rgba(0, 0, 0, 1);
  position: relative;
  margin-top: 25px!important;
}

newsact div::before {
content: attr(data-title);
height: 24px;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
padding: 0px 10px;
position: absolute;
font-weight: 500;
font-size: 12px;
    top: -20px;
left: 50%;
transform: translatex(-50%);
}

newsact div:first-of-type::before {
content: none
}

newsact div:first-of-type a {
height: 24px;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
padding: 0px 10px;
position: absolute;
font-weight: 500;
font-size: 12px;
    top: -20px;
left: 50%;
transform: translatex(-50%);
}

newsact div:last-of-type {
  border: none;
}

newsact {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
border: 1px solid rgba(0, 0, 0, 1);
    justify-items: center;
}

newsact div:first-of-type a::before {
  content: '';
  background: url(https://forumstatic.ru/files/001c/7d/3a/43447.png);
  width: 10px;
  height: 9px;
  position: relative;
  display: inline-block;
  margin: 0px 5px;
  top: -25px;
}

newsact div:first-of-type a:first-of-type::before {
  content: none;
}

newsact div:first-of-type,
newsact div:last-of-type {
  grid-column: span 2;
}

newsact div span {
  font-weight: 700;
  display: block;
}

newsact div:last-of-type newspost {
  display: block;
  background: rgba(209, 209, 209, 1);
  padding: 10px;
  height: 87px;
}

newsact div:last-of-type newspost p {
  padding: 3px !important;
  overflow: auto;
  height: 67px;
}

newspost p {
  color: rgba(93, 98, 106, 1)!important;
}

newsact h4:first-of-type {
    font-weight: 700;
    font-size: 36px;
    line-height: 140%;
    text-transform: lowercase;
    position: absolute;
    display: block;
    top: -70px;
    color: black;
    left: 136px;
    z-index: 4;
}

</style>

<newswrap>
<!---------------------------- шапка новости ------------------------------------------------------------------------------------------------------------>
<newshead>

<!-------------- заголовки  ----------------------------------------->
<span>Новости #1</span>
<span> Мотивирующая цитата недели </span>

</newshead>

<!---------------------------- первый блок ------------------------------------------------------------------------------------------------------------>

<newsblock>ВАЖНАЯ ОСОБЕННОСТЬ! Вам не надо в этом блоке использовать br - он распознаёт переносы обычным enter.

Значимость этих проблем настолько очевидна, что реализация намеченных плановых заданий обеспечивает широкому кругу (специалистов) участие в формировании модели развития. Не следует, однако забывать, что рамки и место обучения кадров в значительной степени обуславливает создание систем массового участия.
Таким образом начало повседневной работы по <a href ='#'>формированию</a> позиции представляет собой интересный эксперимент проверки направлений прогрессивного развития. С другой стороны рамки и место обучения кадров требуют определения и уточнения системы обучения кадро
Значимость этих проблем настолько очевидна, что реализация намеченных плановых заданий обеспечивает широкому кругу (специалистов) участие в формировании модели развития. Не следует, однако забывать, что рамки и место обучения кадров в значительной степени обуславливает создание систем массового участия.
Таким образом начало повседневной работы по формированию позиции представляет собой интересный эксперимент проверки направлений прогрессивного развития. С другой стороны рамки и место обучения кадров требуют определения и уточнения системы обучения кадро
</newsblock>

<!----------------------------  блок с активистами ---------------------------------------------------------------------------------------------------->
<newsact>
<h4>Активисты</h4>

<!------ отсюда ссылки -------------->
<div data-title='username'>
<a href='#'>name surname</a>
<newspost><p>Город-призрак. Когда она уезжала отсюда, то ловила тоже самое ощущение – абсолютной стагнации, которая проникала в лёгкие как раковая опухоль, сдавливала дыхание, Хельга думала, что жизнь изменится, когда она вдохнёт полной грудью новый воздух. Учёба как верёвка, за которую она так крепко держалась и, по итогу, до кости содрала ладони.</p> </newspost>
</div>

<div data-title='flood'>
<a href='#'>username </a><a href='#'>username </a><a href='#'>username </a>
</div>

<div data-title='posts'>
<a href='#'>username </a> <a href='#'>username </a> <a href='#'>username </a>
</div>

<div data-title='episode'>
<a href='#'>loong episode title </a>
</div>

</newsact>

</newswrap>

[/html]