[hideprofile]
[html]<div class="slider-container">
  <div class="slides">
  <div class="slide">
    <!-- Блок 0 -->
    <div class="rotated-text-container">
         <div class="rotated-text">
         <p>Непутёвые заметки<br>из жизни одного ворона.<br><br></p>
<p><br><br><br>«кар», блять!<br> </p>
         </div>
    <br><br><br>
    <img src="https://upforme.ru/uploads/001c/82/f2/65/242584.png" alt="Картинка 2" class="slide-image">
    </div>
  </div>

    <!-- Оглавление -->
    <div class="slide" style="float: right !important;">
      <h1>ОГЛАВЛЕНИЕ</h1>
      <h3>. . . . . . . . Знакомство с ведьмаком</h3>
      <h3>. . . . . . . . . . Общага на четверых</h3>
      <h3>. . . . . . . . . . 21-й день рождения</h3>
     <h3>. . . . . . . . . . . <a href="https://kindredspirits.ru/viewtopic.php?id=272#p37142">Каникулы наедине</a></h3>
    </div>
    <!-- Блок 1 -->
    <div class="slide">
      <h1>ЭТО ВОТ ТЫ-ТО?!</h1>
          <span>10.09.2023</span>
      <p>Из всего потока мне, без лишней скромности, достался самый выбешивающий! Заносчивый, дохрена умный говнюк, да ещё и физически сильнее меня. Из себя вывел молниеносно, аж кулаки зачесались ему вмазать, но даже в этом, скотина, меня опередил и толкнул в это дурацкое озеро!!</p> 
      <img src="https://upforme.ru/uploads/001c/82/f2/65/474631.gif" alt="Картинка 2" class="slide-image">
    </div>

    <!-- Блок 2 -->
    <div class="slide">
      <br><img src="https://i.pinimg.com/originals/96/3a/57/963a57da19b01f843fd2a5f08bc031dd.gif" alt="Картинка 2" class="slide-image">
<br>
      <p>Хейден, мать твою, Хилл, каково это в одно мгновение осознать, что связан с кем-то, и чуть не утопить его по собственной вине?</p>
      <p>Зато так рьяно кинулся меня спасать, словно тебе было дело до моей жизни. Хотя да, ты же теперь тоже откинешься, если со мной вдруг что-то случится. И наоборот.</p>
        <p>Бесит эта зависимость. И ты бесишь!!
         <br>Но теперь рядом с тобой вибрирует воздух. <span style=" text-decoration: line-through; text-decoration-style: wavy; text-decoration-thickness: 1px; ">Приятно.</span> Это и есть обещанная магия? </p>
    </div>

    <!-- Блок 3 -->
    <div class="slide">
<div class="overlay-image">
    <img src="https://upforme.ru/uploads/001c/82/f2/65/109166.png" alt="Наложение">
  </div>
     </div>

    <!-- Блок 4 -->
    <div class="slide">
      <h1>«КОМНАТА 1408»</h1>
            <br><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br><br>
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor.<br><br>
      Et justo duo dolores et ea rebum.<br>
      At vero eos et accusam et justo,<br>
      Sed diam nonumy eirmod tempor.<br>
      Lorem ipsum dolor sit amet...</p>
    </div>

    <!-- Блок 5 -->
    <div class="slide">
      <h1>Et justo duo</h1>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.</p>
      <img src="https://upforme.ru/uploads/001c/82/f2/65/78058.png" alt="Картинка 1" class="slide-image-hr">
      <p>Et justo duo dolores et ea rebum.<br>
      At vero eos et accusam et justo,<br>
      Sed diam nonumy eirmod tempor.<br>
      Lorem ipsum dolor sit amet...</p>
    </div>

    <!-- Блок 6 -->
    <div class="slide">
      <img src="https://i.pinimg.com/originals/0f/26/7c/0f267cf2229db8b2d7a29bf96f16fc80.gif?nii=t" alt="Картинка 4" class="slide-image">
      <p>At vero eos et accusam et justo.</p>
      <img src="https://i.pinimg.com/736x/40/f2/de/40f2de1a93ade1c776505e2f2aab8c30.jpg" alt="Картинка 4" class="slide-image">
    </div>
  </div>

  <button class="btn-prev" onclick="prevSlide()">←</button>
  <button class="btn-next" onclick="nextSlide()">→</button>
</div>

<style type="text/css">
@font-face {
  font-family: 'Kobzar_KS';
  src: url('https://forumstatic.ru/files/0016/d8/85/45656.eot'),
   url('https://forumstatic.ru/files/0016/d8/85/28433.woff') format('woff'),
   url('https://forumstatic.ru/files/0016/d8/85/38752.ttf')  format('truetype'),
   url('https://forumstatic.ru/files/0016/d8/85/54587.svg') format('svg');
   font-weight: normal;
   font-style: normal;
}

@font-face {
  font-family: 'TrixiePro-Heavy';
  src: url('https://forumstatic.ru/files/0016/d8/85/43723.eot'),
   url('https://forumstatic.ru/files/0016/d8/85/30648.woff') format('woff'),
   url('https://forumstatic.ru/files/0016/d8/85/15579.ttf')  format('truetype'),
   url('https://forumstatic.ru/files/0016/d8/85/84435.svg') format('svg');
   font-weight: normal;
   font-style: normal;
}

</style>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f0f0;
}

.slider-container {
  position: relative;
  margin: 0 auto;
  width: 800px;
  height: 500px;
  background: url("https://forumstatic.ru/files/000d/19/7b/55725.png");
  overflow: hidden;
  border-radius: 8px;
}

.slides {
  display: flex;
  width: 100%;
  height: 100%;
  /*transition: transform 0.4s ease-in-out;*/
}

.slide {
    position: relative;
    flex: 0 0 400px;
    max-height: 500px;
    padding: 40px 50px 50px 50px;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    justify-content: top;
    text-align: center;
    background-color: transparent;
}

.slide-image {
  max-width: 300px;
  object-fit: cover;
}

.slide-image-hr {
  width: 300px;
  max-height: 30px; 
  object-fit: cover;
  margin: 0 0 10px 0;
}

.overlay-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  /* Размеры — больше ширины/высоты контейнера */
  width: 100%;
  height: 100%;
}

.overlay-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rotated-text-container {
  position: absolute;
  top: 15%;
  left: 20%;
  pointer-events: none; /* не перехватывает клики */
  z-index: 20; /* выше других элементов слайда */
}

.rotated-text {
  display: inline-block;
  transform: rotate(-25deg); /* поворот на 25° против часовой стрелки */
  white-space: nowrap; /* текст в одну строку */
  float: inline-start;
}

.rotated-text p {
  font: 15px 'Kobzar_KS';
  color: black;
  line-height: 1.4 !important;
  padding: 8px 12px;
}

.btn-prev, .btn-next {
  position: absolute;
  top: 89%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  border: none;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 16px;
  border-radius: 50%;
  z-index: 10;
}

.btn-prev {
  left: 190px;
}

.btn-next {
  right: 190px;
}

.btn-prev:hover, .btn-next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

h1 {
  font: 1.6em 'TrixiePro-Heavy' !important;
  padding-bottom: 10px;
  color: black;
}

h2 {
  font: 15px 'Kobzar_KS' !important;
  text-align: end;
  color: black;
}

h3 {
  font: 1.0em 'TrixiePro-Heavy' !important;
  text-align: end;
  color: black;
}

p {
  font: 15px 'Kobzar_KS';
  color: black;
  line-height: 1.4 !important;
  padding: 0 0 0.5em 0 !important;
}

span {
  font: 15px 'Kobzar_KS';
  color: black;
  line-height: 1.4 !important;
  text-align: right;
}
</style>

<script>
let currentIndex = 0;
const slideWidth = 400;

function updateSlider() {
  const slides = document.querySelector('.slides');
  const offset = currentIndex * slideWidth;
  slides.style.transform = `translateX(-${offset}px)`;
}

function nextSlide() {
  const totalSlides = document.querySelectorAll('.slide').length;
  if (currentIndex + 2 <= totalSlides - 1) {
    currentIndex += 2;
    updateSlider();
  }
}

function prevSlide() {
  if (currentIndex - 2 >= 0) {
    currentIndex -= 2;
    updateSlider();
  }
}

// Инициализация при загрузке
document.addEventListener('DOMContentLoaded', updateSlider);
</script>
[/html]

Отредактировано Nathan Reeves (27-12-2025 04:58:02)