| К закрытию обширной сюжетной ветки, которую ребята отыграли в Гламонте, мы подготовили инфографику и слайды. Знакомьтесь с героями Сильвании! По мотивам эпизода "88 мертвы, больше 50 пропали без вести".
(некоторые факты могут быть немного неверные, т.к. массив инфы огромный - не серчайте) | |
[html]
<div class="pres-slider">
<div class="pres-slider-viewport">
<div class="pres-slider-track">
<div class="pres-slide">
<img src="https://upforme.ru/uploads/001b/d9/4a/2/42148.png" alt="Слайд 1">
</div>
<div class="pres-slide">
<img src="https://upforme.ru/uploads/001b/d9/4a/2/258286.png">
</div>
<div class="pres-slide">
<img src="https://upforme.ru/uploads/001b/d9/4a/2/721217.jpg">
</div>
<div class="pres-slide">
<img src="https://upforme.ru/uploads/001b/d9/4a/2/226939.png">
</div>
<div class="pres-slide">
<img src="https://upforme.ru/uploads/001b/d9/4a/2/61707.png">
</div>
<div class="pres-slide">
<img src="https://upforme.ru/uploads/001b/d9/4a/2/960386.png">
</div>
<div class="pres-slide">
<img src="https://upforme.ru/uploads/001b/d9/4a/2/22144.png">
</div>
<div class="pres-slide">
<img src="https://upforme.ru/uploads/001b/d9/4a/2/374664.png">
</div>
<div class="pres-slide">
<img src="https://upforme.ru/uploads/001b/d9/4a/2/244710.png">
</div>
<div class="pres-slide">
<img src="https://upforme.ru/uploads/001b/d9/4a/2/777703.png">
</div>
<div class="pres-slide">
<img src="https://upforme.ru/uploads/001b/d9/4a/2/986382.png">
</div>
<div class="pres-slide">
<img src="https://upforme.ru/uploads/001b/d9/4a/2/224605.png">
</div>
<div class="pres-slide">
<img src="https://upforme.ru/uploads/001b/d9/4a/2/359701.png">
</div>
<div class="pres-slide">
<img src="https://upforme.ru/uploads/001b/d9/4a/2/637116.png">
</div>
<div class="pres-slide">
<img src="https://upforme.ru/uploads/001b/d9/4a/2/976348.png">
</div>
<div class="pres-slide">
<img src="https://upforme.ru/uploads/001b/d9/4a/2/812422.png">
</div>
<div class="pres-slide">
<img src="https://upforme.ru/uploads/001b/d9/4a/2/899936.png">
</div>
<div class="pres-slide">
<img src="https://upforme.ru/uploads/001b/d9/4a/2/925438.png">
</div>
<div class="pres-slide">
<img src="https://upforme.ru/uploads/001b/d9/4a/2/928919.png">
</div>
<div class="pres-slide">
<img src="https://upforme.ru/uploads/001b/d9/4a/2/371628.png">
</div>
<div class="pres-slide">
<img src="https://upforme.ru/uploads/001b/d9/4a/2/121248.png">
</div>
<div class="pres-slide">
<img src="https://upforme.ru/uploads/001b/d9/4a/2/146131.png">
</div>
<div class="pres-slide">
<img src="https://upforme.ru/uploads/001b/d9/4a/2/225121.png">
</div>
<div class="pres-slide">
<img src="https://upforme.ru/uploads/001b/d9/4a/2/853729.png">
</div>
<div class="pres-slide">
<img src="https://upforme.ru/uploads/001b/d9/4a/2/964204.png">
</div>
<div class="pres-slide">
<img src="https://upforme.ru/uploads/001b/d9/4a/2/393575.png">
</div>
<div class="pres-slide">
<img src="https://upforme.ru/uploads/001b/d9/4a/2/834593.png">
</div>
<div class="pres-slide">
<img src="https://upforme.ru/uploads/001b/d9/4a/2/905590.png">
</div>
<div class="pres-slide">
<img src="https://upforme.ru/uploads/001b/d9/4a/2/829955.jpg">
</div>
<div class="pres-slide">
<img src="https://upforme.ru/uploads/001b/d9/4a/2/425091.png">
</div>
<div class="pres-slide">
<img src="https://upforme.ru/uploads/001b/d9/4a/2/634912.png">
</div>
<div class="pres-slide">
<img src="https://upforme.ru/uploads/001b/d9/4a/2/609060.png">
</div>
</div>
</div>
<div class="pres-slider-arrow prev">‹</div>
<div class="pres-slider-arrow next">›</div>
<div class="pres-slider-dots"></div>
</div>
<style>.pres-slider {
position: relative;
/* width: min(900px, 100%); */
max-width: 100%;
/* margin: 20px auto; */
overflow: visible;
font: 16px / 1.5 Georgia, serif;
}
.pres-slider-viewport {
overflow: hidden;
border-radius: 8px;
background: #111;
box-shadow: 0 0 10px rgb(78 143 38);
}
.pres-slider-track {
display: flex;
transition: transform .6s ease;
will-change: transform;
transform: translateX(0%);
}
.pres-slide {
flex: 0 0 100%;
min-width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.pres-slide img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
margin: 0;
border: 0;
}
.pres-slider-arrow {
position: absolute;
top: 40%;
transform: translateY(-50%);
width: 46px;
height: 46px;
margin: 0;
padding: 0;
border-radius: 50%;
background: rgba(20,20,20,.65);
color: #fff;
font-size: 30px;
line-height: 46px;
text-align: center;
cursor: pointer;
z-index: 20;
user-select: none;
}
.pres-slider-arrow.prev {
left: 12px;
}
.pres-slider-arrow.next {
right: 12px;
}
.pres-slider-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
width: 100%;
margin: 0;
padding: 14px 12px 16px;
box-sizing: border-box;
}
.pres-dot {
width: 10px;
height: 10px;
margin: 0;
padding: 0;
display: inline-block;
border-radius: 999px;
background: #b8afa6;
cursor: pointer;
transition: transform .2s ease, background .2s ease;
}
.pres-dot.active,
.pres-dot:hover {
background: #4f4036;
transform: scale(1.2);
}
.pres-slider.is-single-slide .pres-slider-arrow,
.pres-slider.is-single-slide .pres-slider-dots {
display: none;
}
@media (max-width: 700px) {
.pres-slider-viewport {
border-radius: 12px;
}
.pres-slider-arrow {
width: 40px;
height: 40px;
font-size: 26px;
line-height: 40px;
top: 34%;
}
.pres-caption {
padding: 14px 16px;
font-size: 15px;
}
.pres-caption h3 {
font-size: 18px;
}
}</style>
[/html][hideprofile]
- Подпись автора
это НЕ динозавр, а дракон! Нет, он НЕ розовый, а АЛМАЗНО-КРЫЛЫЙ! |  III / X
|
X