[html]
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');

.news-wrap{
  width:900px;
  margin:0 auto 80px;
  font-family:'Manrope', sans-serif;
  color:#111;
}

.news-main{
  position:relative;
  padding:22px 0 100px;
}

.news-band{
  position:absolute;
  right:0;
  top:82px;
  width:450px;
  height:620px;
  z-index:1;
  background:url('https://i.pinimg.com/1200x/88/f8/7e/88f87ea498e2699cc83f137290d3c426.jpg') center center / cover no-repeat;
  border:1px solid #111;
  box-sizing:border-box;
}

.news-top{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:620px 250px;
  gap:12px;
  align-items:start;
}

.news-hero{
  position:relative;
  border:1px solid #2a2a2a;
  background:#111;
  padding:8px;
  box-sizing:border-box;
}

.news-hero img{
  display:block;
  width:100%;
  height:220px;
  object-fit:cover;
  filter:none;
}

.news-overlay{
  position:absolute;
  left:8px;
  bottom:24px;
  max-width:430px;
}

.news-num{
  display:inline-block;
  background:#111;
  color:#f2f2f2;
  font-family:'Manrope', sans-serif;
  font-size:9px;
  font-weight:800;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:1.2px;
  padding:7px 8px;
  margin:0 0 8px 0;
  border:1px solid rgba(255,255,255,.08);
}

.news-title{
  display:inline-block;
  background:#111;
  color:#fff;
  font-family:'Dela Gothic One', sans-serif;
  font-size:23px;
  line-height:1.02;
  text-transform:uppercase;
  padding:10px 12px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.08);
}

.news-side{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.news-admin,
.news-info-box{
  width:250px;
  background:
    linear-gradient(rgba(20,20,20,.96), rgba(20,20,20,.96)),
    url('https://i.pinimg.com/1200x/88/f8/7e/88f87ea498e2699cc83f137290d3c426.jpg') center center / cover no-repeat;
  border:1px solid #2a2a2a;
  padding:10px;
  box-sizing:border-box;
}

.news-admin-title,
.news-line-title,
.news-ep-title{
  display:inline-block;
  background:#efefef;
  color:#111;
width: 110px;
  font-family:'Dela Gothic One', sans-serif;
  font-size:10px;
  line-height:1.1;
  text-transform:lowercase;
  padding:7px 8px;
  margin:0 0 8px -10px;
  text-decoration:none;
}

.news-box-title{
  display:inline-block;
  background:#111;
  color:#efefef;
  font-family:'Dela Gothic One', sans-serif;
  font-size:10px;
  line-height:1.1;
  text-transform:lowercase;
  padding:7px 8px;
  margin:0 0 8px -12px;
  text-decoration:none;
}

.news-admin-inner{
  display:flex;
  gap:10px;
  align-items:center;
}

.news-admin img{
  width:48px;
  height:48px;
  object-fit:cover;
  display:block;
  border:1px solid #3a3a3a;
}

.news-admin-meta{
  line-height:1.2;
}

.news-admin-label{
  display:block;
  font-size:8px;
  text-transform:uppercase;
  color:#8d8d8d;
  letter-spacing:.8px;
  font-weight:800;
  margin-bottom:2px;
}

.news-admin-name{
  display:block;
  font-size:12px;
  font-weight:800;
  color:#f2f2f2;
}

.news-admin-note{
  margin-top:8px;
  font-size:10px;
  line-height:1.35;
  color:#c8c8c8;
}

.news-body{
  position:relative;
  z-index:3;
  margin-top:12px;
  display:grid;
  grid-template-columns:620px 250px;
  gap:12px;
  align-items:start;
}

.news-textbox{
  position:relative;
  background:
    linear-gradient(rgba(239,239,239,.97), rgba(239,239,239,.97)),
    url('https://i.pinimg.com/1200x/88/f8/7e/88f87ea498e2699cc83f137290d3c426.jpg') center center / cover no-repeat;
  border:1px solid #2a2a2a;
  padding:12px 12px 12px 0;
  box-sizing:border-box;
  min-height:355px;
}

.news-scroll{
  max-height:330px;
  overflow-y:auto;
  overflow-x:hidden;
  padding:0 6px 0 12px;
  box-sizing:border-box;
  scrollbar-width:thin;
  scrollbar-color:#4a4a4a transparent;
}

.news-scroll::-webkit-scrollbar{ width:4px; }
.news-scroll::-webkit-scrollbar-track{ background:transparent; }
.news-scroll::-webkit-scrollbar-thumb{ background:#4a4a4a; border:none; border-radius:0; }
.news-scroll::-webkit-scrollbar-button{ display:none; width:0; height:0; }

.news-text{
  font-size:11px;
  line-height:1.55;
  color:#3b3b3b;
}

.news-text b{
  font-weight:800;
  color:#111;
}

.news-text a:hover{
  color:#111!important;
  border-bottom-color:#111;
}

.news-info-box{
  position:relative;
  z-index:4;
  margin-top:-20px;
}

.news-episode{
  margin-bottom:10px;
}

.news-ep-title{
  margin-bottom:8px;
}

.news-episode-pic{
  position:relative;
  display:block;
  width:100%;
  height:100px;
  margin-bottom:8px;
}

.news-episode-pic img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border:1px solid #3a3a3a;
  filter:none;
}

.news-ep-name {
  display:block;
  margin-bottom:10px;
  text-decoration:none;
  font-family:'Dela Gothic One', sans-serif;
  font-size:15px; /* РАЗМЕР ШРИФТА ЭПИЗОДА */
  line-height:1.1;
  text-transform:lowercase;
  color: #a3eb27  !important; /* ЦВЕТ ССЫЛКИ ЭПИЗОДА */
}

.news-ep-name hover{
  color: #000000 !important;
}

.news-text a{
  color:#72b400!important; /* ЦВЕТ ВСЕХ ССЫЛОК*/
  text-decoration:none;
  font-weight:700;
}

.news-tip{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  background:rgba(17,17,17,.90);
  color:#fff;
  font-size:9px;
  line-height:1.3;
  padding:6px 7px;
  box-sizing:border-box;
  opacity:0;
  visibility:hidden;
  transition:.2s;
  pointer-events:none;
  z-index:20;
}

.news-tip b{
  display:block;
  color:#efefef;
  margin-bottom:2px;
}

.news-episode-pic:hover .news-tip,
.news-face:hover .news-tip{
  opacity:1;
  visibility:visible;
}

.news-line + .news-line{
  margin-top:10px;
}

.news-faces{
  display:flex;
  flex-wrap:nowrap;
  gap:4px;
}

.news-face{
  position:relative;
  width:53px;
  height:53px;
  display:block;
  flex:0 0 53px;
}

.news-face img{
  width:53px;
  height:53px;
  object-fit:cover;
  display:block;
  border:1px solid #3a3a3a;
}

.news-face .news-tip{
  left:0;
  bottom:57px;
  width:120px;
}

.news-ghost{
  position:absolute;
  left:644px;
  top:150px;
  z-index:2;
  font-family:'Dela Gothic One', sans-serif;
  font-size:66px;
  line-height:.9;
  text-transform:uppercase;
  color:#ffffff;
  opacity:1;
  letter-spacing:2px;
  pointer-events:none;
  user-select:none;
}

.news-dots{
  position:absolute;
  right:320px;
  bottom:5px;
  z-index:4;
  display:flex;
  gap:7px;
}

.news-dot.is-black{
  background:#000000;
}

.news-dot{
  width:85px;
  height:85px;
  border-radius:50%;
  background:#a3eb27 ;  /* ЦВЕТ ШАРОВ*/
  display:block;

}
</style>

<div class="news-wrap">
  <div class="news-main">
    <div class="news-band"></div>

    <div class="news-top">
      <div class="news-hero">
        <img src="https://i.pinimg.com/736x/37/f0/5f/37f05fa3a8dece2ddb082fbe56fc7ef7.jpg">
        <div class="news-overlay">
          <div class="news-num">news 01</div><br>
          <div class="news-title">small changes,<br>big noise</div>
        </div>
      </div>

      <div class="news-side">
        <div class="news-admin">
          <div class="news-admin-title">с вами dj-залупа</div>
          <div class="news-admin-inner">
            <img src="https://i.pinimg.com/736x/23/e9/84/23e984cc0bbb83cee8fb967b3a022b6a.jpg">
            <div class="news-admin-meta">
              <span class="news-admin-label">или в простонародье</span>
              <span class="news-admin-name">машка👽</span>
            </div>
          </div>
          <div class="news-admin-note">
           честно сказать я хуй клала на эти новости и ваще хочу пива, а не рассказывать кто где соснул хуйца, но раз уж так вышло то готовьте жопы, сейчас будет расширение территории
          </div>
        </div>
      </div>
    </div>

    <div class="news-ghost">NEWS<br>NEWS</div>

    <div class="news-body">
      <div class="news-textbox">
        <div class="news-box-title">новости форума</div>
        <div class="news-scroll">
          <div class="news-text">
           дорогие чудовища, любимые люди и прочие обитатели этого бедлама,
          <br><br>
          снова собираем для вас всё важное в одном месте, чтобы никто потом не делал честные глаза и не говорил, что оно само как-то мимо прошло.
          <br><br>
рекомендую всем и каждому присоединиться к созданию новогоднего настроения  в <a href="https://cursedland.rusff.me/viewtopic.php?id=3029#p552144">зимнем чек-листе</a>. жизнь грустная - а мы с вами веселые. давайте поактивничаем и покажем, какие мы классные [иначе я расстроюсь и больше никогда не буду онлайн...];<br><br>
          за последнее время форум немного пошевелился, местами оживился, местами красиво пострадал, но в целом продолжает жить, цвести и провоцировать вас на новые идеи.
          <br><br>
          напоминаем проверить свои хвосты: посты, эпизоды, активности, ответы людям, обещания самим себе и тот неловкий момент, когда вы уже две недели собираетесь куда-нибудь написать.
          <br><br>
          если у вас зависли сюжеты, потерялись партнёры, сломалось вдохновение или просто неясно, куда бежать дальше — не надо героически страдать в одиночестве. приходите, спрашивайте, пинайте администрацию, тормошите знакомых, ищите новые точки входа.
          <br><br>
          ещё из важного:
          <br>
          — следите за темами с организацией;
          <br>
          — заглядывайте в свежие объявления;
          <br>
          — не забывайте, что даже маленькая активность лучше великого молчания;
          <br>
          — и да, иногда стоит просто зайти и подать признаки жизни.
          <br><br>
          отдельно гладим по голове всех, кто пишет, флудит, двигает эпизоды, тащит себя и других в игру, приносит идеи, мемы, драму, хаос и красоту. без вас всё это было бы куда тише и скучнее.
          <br><br>
          короче: живите, играйте, мелькайте на форуме, не теряйтесь слишком надолго и не бойтесь приходить с любыми вопросами.
          </div>
        </div>
      </div>

      <div class="news-info-box">
        <div class="news-episode">
          <div class="news-ep-title">эпизод недели</div>

          <a href="#" class="news-episode-pic">
            <img src="https://i.pinimg.com/736x/f9/3a/36/f93a365eb52bb6bd8bbf2ca3c37855a2.jpg">
            <span class="news-tip"><b>ЭТО ОТВАЛ БАШКИ</b>эпизод, который добил нас морально</span>
          </a>

          <a href="#" class="news-ep-name">between ash and static</a>
        </div>

        <div class="news-line">
          <div class="news-line-title">активисты</div>
          <div class="news-faces">
            <a href="#" class="news-face">
              <img src="https://i.pinimg.com/736x/1f/9b/2c/1f9b2cc50d1d349221725cbec67f476a.jpg">
              <span class="news-tip"><b>mari</b>закрыла три эпизода</span>
            </a>
            <a href="#" class="news-face">
              <img src="https://i.pinimg.com/736x/26/4d/ed/264dedb99e7cfb7488c15398b53ec6fd.jpg">
              <span class="news-tip"><b>crow</b>принёс движ в сюжет</span>
            </a>
            <a href="#" class="news-face">
              <img src="https://i.pinimg.com/736x/46/3f/85/463f858135b493bfe345a594a8195d68.jpg">
              <span class="news-tip"><b>saint</b>самый живой во флуде</span>
            </a>
            <a href="#" class="news-face">
              <img src="https://i.pinimg.com/736x/83/21/5a/83215a6a668c28adf53151ef54103d85.jpg">
              <span class="news-tip"><b>rei</b>человек ивент-катастрофа</span>
            </a>
          </div>
        </div>

        <div class="news-line">
          <div class="news-line-title">постописцы</div>
          <div class="news-faces">
            <a href="#" class="news-face">
              <img src="https://i.pinimg.com/736x/99/cd/5d/99cd5d6286e7204c78857bb163535b4f.jpg">
              <span class="news-tip"><b>void</b>пишет быстрее судьбы</span>
            </a>
            <a href="#" class="news-face">
              <img src="https://i.pinimg.com/736x/ad/c7/44/adc7446df4ce7865f6f0fd7a96efda33.jpg">
              <span class="news-tip"><b>ash</b>посты как образ жизни</span>
            </a>
            <a href="#" class="news-face">
              <img src="https://i.pinimg.com/736x/27/d8/ed/27d8eda2c14736b955c391936b79f10c.jpg">
              <span class="news-tip"><b>fen</b>стабильный поставщик букв</span>
            </a>
            <a href="#" class="news-face">
              <img src="https://i.pinimg.com/736x/39/6c/98/396c98f6d8d85d6b3c748e234b304807.jpg">
              <span class="news-tip"><b>mist</b>не щадит клавиатуру</span>
            </a>
          </div>
        </div>

     
     
      </div>
    </div>
   <div class="news-dots">
      <span class="news-dot "></span>
      <span class="news-dot "></span>
      <span class="news-dot"></span>
      <span class="news-dot is-black"></span>
      <span class="news-dot is-black"></span>
    </div>
  </div>
</div>
[/html][hideprofile]