Ваша реклама

взаимная реклама

https://drinkbutterbeer.ru/viewtopic.ph … 50#p817623

[html]
<div class="tinder_block">
  <div class="tinder_container">

<!-- СЛАЙДЕР -->
<div class="slider">

  <button class="slide-btn left" onclick="prevPhoto()">‹</button>

  <div class="tinder_ava" id="photo"
    style="background-image:url(https://i.pinimg.com/736x/b1/18/46/b118 … fade15.jpg);">
  </div>

  <button class="slide-btn right" onclick="nextPhoto()">›</button>

</div>

    <!-- ВКЛАДКИ -->
    <div class="tinder_icon">

      <button onclick="openTab('hate')" title="то что не люблю">
        ✖
      </button>

      <button onclick="openTab('best')" title="моё лучшее творение">
        ★
      </button>

      <button onclick="openTab('love')" title="то что обожаю">
        ❤
      </button>

    </div>

    <!-- ИМЯ -->
    <div class="tinder_name">БРИДЖЕТ</div>

    <!-- ТЕКСТ ВКЛАДОК -->
    <div class="tinder_tab active" id="love">
     ♡ интересные [философские] разговоры;<br>
     ♡ сарказм и саркастичный юмор;<br>
     ♡ темная магия (только тсс);<br>
     ♡ змеи и крылатые лошади;<br>
     ♡ рисование.
    </div>

    <div class="tinder_tab" id="best">
     ♡ <a href="https://drinkbutterbeer.ru/viewtopic.php?pid=672299#p672299">пейзаж с черным озером и хогвартсом на заднем плане</a><br>// картина до сих пор висит в поместье<br>у нас дома на самом видном месте<br>и радует (наверное) гостей;<br><br>
     ♡ мой <a href="https://drinkbutterbeer.ru/viewtopic.php?id=4920">magnum opus</a><br>// не иначе как раскрытием каких-то женских чакр и началом эры femme fatale<br>и не назовешь <s>(смотря какие details, смотря какой fabric)</s>;<br><br>
     ♡ <a href="https://drinkbutterbeer.ru/viewtopic.php?pid=805044#p805044">самый лучший выпуск слизерин'97</a><br>// да, уже не школьница, но последний день беззаботного времяпрепровождения хочется вспоминать время от времени.
    </div>

    <div class="tinder_tab" id="hate">
     ♡ тотальный контроль моей персоны;<br>
     ♡ когда не считаются с моим мнением;<br>
     ♡ глупость и нежелание что-то<br>с этим делать;<br>
     ♡ неуважительное отношение<br>к подаренным мною подаркам.
    </div>

    <!-- КНОПКА -->
    <div class="tinder_button">
      <a href="https://drinkbutterbeer.ru/viewtopic.php?id=9#p817367">date me</a>
    </div>

  </div>
</div>

<style>
:root {
  --main-font: montserrat, arial, sans-serif;

  /* Цвет кнопок */
  --tinder-btn: rgb(49, 27, 56);
  --tinder-btn-hvr: rgb(234, 107, 107);
}

/* Карточка */
.tinder_container {
  width: 335px;
  background: white;
  border-radius: 25px;
  padding: 25px;
  overflow: hidden;
  font-family: var(--main-font);
}

/* Слайдер */
.slider {
  width: 100%;
  height: 270px;
  position: relative;
  margin-bottom: 25px;
}

/* Фото */
.tinder_ava {
  width: 100%;
  height: 270px;
  border-radius: 20px;
  background-size: cover;
  background-position: center;
}

/* Стрелки */
.slide-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: none;

  background: rgba(0, 0, 0, 0.55);
  color: white;
  font-size: 26px;

  cursor: pointer;
  z-index: 10;

  display: flex;
  align-items: center;
  justify-content: center;
}

.slide-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* Левая кнопка */
.slide-btn.left {
  left: 10px;
}

/* Правая кнопка */
.slide-btn.right {
  right: 10px;
}

/* Вкладки-иконки */
.tinder_icon {
  display: flex;
  justify-content: space-between;
  margin-top: -20px;
}

.tinder_icon button {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  background: var(--tinder-btn);
  color: white;
  font-size: 26px;
  cursor: pointer;
  transition: 0.3s;
}

.tinder_icon button:hover {
  background: var(--tinder-btn-hvr);
}

/* Имя */
.tinder_name {
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  margin-top: 14px;
}

/* Контент вкладок */
.tinder_tab {
  display: none;
  text-align: center;
  font-size: 13px;
  padding: 10px;
  margin-top: 10px;
}

.tinder_tab.active {
  display: block;
}

/* Кнопка */
.tinder_button {
  margin-top: 14px;
}

.tinder_button a {
  display: block;
  text-align: center;
  padding: 12px;
  border-radius: 10px;
  background: var(--tinder-btn);

  /* Цвет текста date me */
  color: rgb(237, 237, 237) !important;
  font-weight: bold;
  text-decoration: none;
}

.tinder_button a:hover {
  background: var(--tinder-btn-hvr);
}
</style>

<script>
/* --- Вкладки --- */
function openTab(tabId) {
  let tabs = document.querySelectorAll(".tinder_tab");
  tabs.forEach(t => t.classList.remove("active"));

  document.getElementById(tabId).classList.add("active");
}

/* --- Фото-слайдер --- */
let photos = [
  "https://i.pinimg.com/736x/b1/18/46/b11846b40706b0b0fcc872a7c0fade15.jpg",
  "https://i.pinimg.com/736x/43/ce/b0/43ceb0d55728e9e0f85f6997e4f0605f.jpg",
  "https://i.pinimg.com/736x/56/9e/e7/569ee75d177fe55194b5bbd98a71306d.jpg",
  "https://i.pinimg.com/736x/3a/38/5c/3a385c409d220405eb3bf6a1bb8a7880.jpg"
];

let index = 0;

function showPhoto() {
  document.getElementById("photo").style.backgroundImage =
    "url(" + photos[index] + ")";
}

function nextPhoto() {
  index = (index + 1) % photos.length;
  showPhoto();
}

function prevPhoto() {
  index = (index - 1 + photos.length) % photos.length;
  showPhoto();
}
</script>
[/html]

Отредактировано булочки с корицей (Сегодня 18:08:44)