[html]
<center>
<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>
<center>
[/html]
one way road [p.1] - gm
