?
Сюжет
Страница: 1
Сообщений 1 страница 4 из 4
Поделиться22025-01-28 16:29:26
[html]<div style="display: flex; height: 100vh; background-image: url('https://i.ibb.co/YTR7t92/pukipuk2.png'); background-size: cover; background-position: center;">
<!-- Левая часть с картинкой -->
<div style="background-color: rgba(139, 69, 19, 0.7); width: 200px; display: flex; justify-content: center; align-items: center;">
<img src="your-image-here.jpg" alt="Вставьте вашу картинку" style="max-width: 100%; max-height: 100%;">
</div>
<!-- Основной контент -->
<div style="flex-grow: 1; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; color: white;">
<h1>Заголовок</h1>
<p>Текст ниже заголовка.</p>
<!-- Вкладки -->
<div style="display: flex; justify-content: center; margin-top: 20px;">
<button onclick="showTab(1)" style="padding: 10px 20px; background-color: #333; color: white; border: none; cursor: pointer; margin: 0 10px;">Кнопка 1</button>
<button onclick="showTab(2)" style="padding: 10px 20px; background-color: #333; color: white; border: none; cursor: pointer; margin: 0 10px;">Кнопка 2</button>
</div>
<div id="tab-1" style="display: block; margin-top: 20px;">
<p>Текст для вкладки 1.</p>
</div>
<div id="tab-2" style="display: none; margin-top: 20px;">
<p>Текст для вкладки 2.</p>
</div>
</div>
</div>
<script>
function showTab(tabNumber) {
// Скрыть все вкладки
document.querySelectorAll('div[id^="tab-"]').forEach(tab => {
tab.style.display = 'none';
});
// Показать выбранную вкладку
document.getElementById('tab-' + tabNumber).style.display = 'block';
}
</script>
[/html]
Поделиться32025-01-28 16:38:12
[html]<div class="container" style="position: relative; width: 500px; height: 221px; background: url('https://i.ibb.co/gMGwPBw/pukipuk3.png') no-repeat center; background-size: cover;">
<!-- Изображение слева -->
<div class="left-image" style="position: absolute; left: 10px; top: 55px; width: 100px; height: 100px;">
<img src="https://i.ibb.co/Btk6bkN/1.png" alt="Изображение" style="width: 100%; height: 100%;">
</div>
<div class="center" style="position: absolute; left: 130px; top: 40px; width: 240px; height: 120px; text-align: center; color: black;">
<h1 style="font-size: 16px; margin-bottom: 5px; line-height: 1.2;">Сноп искр</h1>
<p id="tab-content" style="font-size: 12px; margin-bottom: 5px; line-height: 1.2;">Персонаж концентрирует в руке магию огня, а затем множеством раскаленных искр, на расстояниие до 10 метров.</p>
</div>
<!-- Прозрачные кнопки для переключения вкладок -->
<div class="buttons">
<!-- Основная вкладка (0) -->
<div onclick="switchTab(0)" style="position: absolute; left: 430px; top: 25px; width: 30px; height: 30px; cursor: pointer;"></div>
<!-- Вкладка 1 -->
<div onclick="switchTab(1)" style="position: absolute; left: 430px; top: 95px; width: 30px; height: 30px; cursor: pointer;"></div>
<!-- Вкладка 2 -->
<div onclick="switchTab(2)" style="position: absolute; left: 430px; top: 165px; width: 30px; height: 30px; cursor: pointer;"></div>
</div>
</div>
<script>
function switchTab(tabNumber) {
const tabTexts = {
0: "Персонаж концентрирует в руке магию огня, а затем множеством раскаленных искр, на расстояниие до 10 метров.",
1: "Увеличивает дальность заклинания на 10 метров",
2: "В течении следующего хода нанесет дополнительно 1 урона"
};
document.getElementById('tab-content').innerText = tabTexts[tabNumber];
}
</script>
[/html]
Поделиться42025-01-28 19:28:27
[html]
<!-- Фоновое изображение -->
<div class="container" style="position: relative; width: 100%; height: 100%; background: url('https://i.ibb.co/dt3pnpM/111111.png') no-repeat center; background-size: cover;">
<!-- Первое заклинание -->
<div class="container" style="position: relative; width: 500px; height: 221px; background: url('https://i.ibb.co/gMGwPBw/pukipuk3.png') no-repeat center; background-size: cover; margin: 0 auto;">
<!-- Изображение слева -->
<div class="left-image" style="position: absolute; left: 10px; top: 55px; width: 100px; height: 100px;">
<img src="https://i.ibb.co/Q8F4PWG/c4555.png" alt="Изображение" style="width: 100%; height: 100%;">
</div>
<div class="center" style="position: absolute; left: 130px; top: 40px; width: 240px; height: 120px; text-align: center; color: black;">
<h1 style="font-size: 16px; margin-bottom: 5px; line-height: 1.2;">Сноп искр</h1>
<p id="tab-content-1" style="font-size: 12px; margin-bottom: 5px; line-height: 1.2;">Персонаж концентрирует в руке магию огня, а затем множеством раскаленных искр, на расстояниие до 10 метров.</p>
</div>
<!-- Прозрачные кнопки для переключения вкладок -->
<div class="buttons">
<div onclick="switchTab(0, 'tab-content-1')" style="position: absolute; left: 430px; top: 25px; width: 30px; height: 30px; cursor: pointer;"></div>
<div onclick="switchTab(1, 'tab-content-1')" style="position: absolute; left: 430px; top: 95px; width: 30px; height: 30px; cursor: pointer;"></div>
<div onclick="switchTab(2, 'tab-content-1')" style="position: absolute; left: 430px; top: 165px; width: 30px; height: 30px; cursor: pointer;"></div>
</div>
</div>
<!-- Второе заклинание -->
<div class="container" style="position: relative; width: 500px; height: 221px; background: url('https://i.ibb.co/gMGwPBw/pukipuk3.png') no-repeat center; background-size: cover; margin: 20px auto;">
<!-- Изображение слева -->
<div class="left-image" style="position: absolute; left: 10px; top: 55px; width: 100px; height: 100px;">
<img src="https://i.ibb.co/Q8F4PWG/c4555.png alt="Изображение" style="width: 100%; height: 100%;">
</div>
<div class="center" style="position: absolute; left: 130px; top: 40px; width: 240px; height: 120px; text-align: center; color: black;">
<h1 style="font-size: 16px; margin-bottom: 5px; line-height: 1.2;">Сноп искр</h1>
<p id="tab-content-2" style="font-size: 12px; margin-bottom: 5px; line-height: 1.2;">Персонаж концентрирует в руке магию огня, а затем множеством раскаленных искр, на расстояниие до 10 метров.</p>
</div>
<!-- Прозрачные кнопки для переключения вкладок -->
<div class="buttons">
<div onclick="switchTab(0, 'tab-content-2')" style="position: absolute; left: 430px; top: 25px; width: 30px; height: 30px; cursor: pointer;"></div>
<div onclick="switchTab(1, 'tab-content-2')" style="position: absolute; left: 430px; top: 95px; width: 30px; height: 30px; cursor: pointer;"></div>
<div onclick="switchTab(2, 'tab-content-2')" style="position: absolute; left: 430px; top: 165px; width: 30px; height: 30px; cursor: pointer;"></div>
</div>
</div>
</div>
<script>
function switchTab(tabNumber, tabId) {
const tabTexts = {
0: "Персонаж концентрирует в руке магию огня, а затем множеством раскаленных искр, на расстояниие до 10 метров.",
1: "Увеличивает дальность заклинания на 10 метров",
2: "В течении следующего хода нанесет дополнительно 1 урона"
};
document.getElementById(tabId).innerText = tabTexts[tabNumber];
}
</script>
[/html]
Страница: 1