Код:
<!--HTML--><div class="pulse_put"><div class="pulse2-container"><div class="pulse2-buttons-div"><label for="input111" class="pulse2-button butt1"></label><label for="input222" class="pulse2-button butt2" style="margin-left: 128px;"></label><label for="input333" class="pulse2-button butt2" style="margin-left: 249px;"></label><label for="input444" class="pulse2-button butt2" style="margin-left: 371px;"></label><label for="input555" class="pulse2-button butt2" style="margin-left: 511px;"></label></div><div class="pulse2-slider"><input id="input111" class="hidden-input" type="radio" name="pulse2-slider-inputs" checked=""><input id="input222" class="hidden-input" type="radio" name="pulse2-slider-inputs"><input id="input333" class="hidden-input" type="radio" name="pulse2-slider-inputs"><input id="input444" class="hidden-input" type="radio" name="pulse2-slider-inputs"><input id="input555" class="hidden-input" type="radio" name="pulse2-slider-inputs"><div class="pulse2-slider-image" id="image111"><pulse_put1>F.A.Q.</pulse_put1><pulse_put2>
<!--------------------------------- ФАК --------------------------------->
здесь описание для фака
</pulse_put2><pulse_put3>
<!--------------------------------- ВОПРОС НАЧАЛО ---------------------------------><pulse_put4>
здесь условно текст вопроса? думаю одной строки на вопрос точно хватит. сюда норм влезает.
</pulse_put4><pulse_put5>
здесь ответ на вопрос
</pulse_put5><!--------------------------------- ВОПРОС КОНЕЦ --------------------------------->
</pulse_put3></div><div class="pulse2-slider-image" id="image222"><pulse_put1>rules</pulse_put1><pulse_put2><!--------------------------------- ПРАВИЛА --------------------------------->
здесь описание для правил
</pulse_put2><pulse_put3>
<!--------------------------------- РАЗДЕЛЫ НАЧАЛО ---------------------------------><pulse_put4>
1. здесь раздел правил
</pulse_put4><pulse_put5>
<pp>1.1.</pp> здесь положения правил<br>
<pp>1.2.</pp> здесь положения правил<br>
</pulse_put5><!--------------------------------- РАЗДЕЛЫ КОНЕЦ --------------------------------->
</pulse_put3></div><div class="pulse2-slider-image" id="image333"><pulse_put1>team</pulse_put1><pulse_put2><!--------------------------------- КОМАНДА --------------------------------->
Сделают Ваше прибывание в Лос-Анджелесе максимально комфортным. Но тут нужно еще пару строк чтобы было красиво, это я так щитаю. вот еще я считаю что может быть немного уменьшить высоту чтобы нас сразу четверых было видно, а то как будто спрятали Дашу в кармашек
</pulse_put2><pulse_put3><!--------------------------------- АДМИНЫ НАЧАЛО ---------------------------------><pulse_put5 style=" height: 100px;">
<img src="https://forumstatic.ru/files/0019/be/2b/71079.gif"><pulse_put6><pa>
здесь коротко описание задач, которые лежат на админе
</pa><br>
просил сказать что он по ориентации гей а в душе пидорас
здесь описание про админа
</pulse_put6>
</pulse_put5>
<pulse_put5 style=" height: 100px;">
<img src="https://forumstatic.ru/files/0019/be/2b/77024.gif"><pulse_put6><pa>
здесь коротко описание задач, которые лежат на админе
</pa><br>
здесь описание про админа
</pulse_put6>
</pulse_put5>
<pulse_put5 style=" height: 100px;">
<img src="https://forumstatic.ru/files/0019/be/2b/36147.gif"><pulse_put6><pa>
здесь коротко описание задач, которые лежат на админе
</pa><br>
здесь описание про админа
</pulse_put6>
</pulse_put5>
<pulse_put5 style=" height: 100px;">
<img src="https://forumstatic.ru/files/0019/be/2b/28084.gif"><pulse_put6><pa>
здесь коротко описание задач, которые лежат на админе
</pa><br>
здесь описание про админа
</pulse_put6>
</pulse_put5>
<!--------------------------------- АДМИНЫ КОНЕЦ --------------------------------->
</pulse_put3></div><div class="pulse2-slider-image" id="image444"><pulse_put1>la</pulse_put1><pulse_put2><!--------------------------------- ЛА --------------------------------->
<p style="font-size: 18px;">Лос-Анджелес // штат Калифорния, США</p>
</pulse_put2><pulse_put3>
<!--------------------------------- МЕСТО НАЧАЛО --------------------------------->
<center><br><div class="pulse_put111" style="width: 505px; height: 100px;margin: 10px;"><img src="https://i.imgur.com/kBgmB1M.gif" width="250" height="100" > <img src="https://i.imgur.com/LoII8U5.gif" width="250" height="100"></div></center>
<pulse_put5>
☆ расположен на берегу Тихого океана;<br><br>
☆ проживает около 4 миллионов человек;<br><br>
☆ сухое жаркое лето +18...+25°С ; дождливая зима +15...+17°С<br><br>
☆ развитое автобусное сообщение ($5/день), линии метро ($1.25/день) и легкорельсового транспорта;<br><br>
☆ пять аэропортов; портовый район;<br><br>
☆ 8 больших районов города;<br><br>
☆ на территории города орудует более семисот больших и малых преступных группировок, основные виды деятельности которых: торговля наркотиками, угоны автомобилей, ограбления и кражи.
</pulse_put5>
</pulse_put3></div>
<div class="pulse2-slider-image" id="image555"><pulse_put1>work</pulse_put1><pulse_put2><!--------------------------------- ПРОФЕССИИ --------------------------------->
здесь описание для профессий
</pulse_put2><pulse_put3>
<!--------------------------------- ПРОФЕССИИ НАЧАЛО ---------------------------------><pulse_put4>
<pulse_put5 style=" height: 100px;">
<img src="https://i.imgur.com/anqwAJM.png" style="width: auto!important;"><pulse_put6><pa>
☆ южный лос-анджелес
</pa><br>
- из-за криминальной обстановки является самым опасным районом<br>
- большое количество уличных банд в кварталах
</pulse_put6>
</pulse_put5><!--------------------------------- ПРОФЕССИИ КОНЕЦ --------------------------------->
</pulse_put3></div></div></div></div><div style="height: 612px;"></div>
<style>
/* слайдер путеводитель */
.pulse2-container .hidden-input {display: none;}
.pulse2-container {
display: block;
width: 757px;
height: 548px;
position: absolute;
margin: 50px 0 0 14px !important;
}
.pulse2-slider {
display: block;
position: relative;
height: 540px;
/* width: 316px;*/
left: 0px;
top:12px;
overflow: hidden;
}
#input111:checked ~ #image111 {margin-top: 0;}
#input111:checked ~ #image222 {margin-top: 100%;}
#input111:checked ~ #image333 {margin-top: 100%;}
#input111:checked ~ #image444 {margin-top: 100%;}
#input111:checked ~ #image555 {margin-top: 100%;}
#input111:checked ~ .pulse2-buttons-div > .pulse2-button.butt1 {background: rgb(126, 174, 160);}
#input222:checked ~ #image111 {margin-top: -100%;}
#input222:checked ~ #image222 {margin-top: 0;}
#input222:checked ~ #image333 {margin-top: 100%;}
#input222:checked ~ #image444 {margin-top: 100%;}
#input222:checked ~ #image555 {margin-top: 100%;}
#input222:checked ~ .pulse2-buttons-div > .pulse2-button.butt2 {background: rgb(126, 174, 160);}
#input333:checked ~ #image111 {margin-top: -100%;}
#input333:checked ~ #image222 {margin-top: -100%;}
#input333:checked ~ #image333 {margin-top: 0;}
#input333:checked ~ #image444 {margin-top: 100%;}
#input333:checked ~ #image555 {margin-top: 100%;}
#input333:checked ~ .pulse2-buttons-div > .pulse2-button.butt2 {background: rgb(126, 174, 160);}
#input444:checked ~ #image111 {margin-top: -100%;}
#input444:checked ~ #image222 {margin-top: -100%;}
#input444:checked ~ #image333 {margin-top: -100%;}
#input444:checked ~ #image444 {margin-top: 0;}
#input444:checked ~ #image555 {margin-top: 100%;}
#input444:checked ~ .pulse2-buttons-div > .pulse2-button.butt2 {background: rgb(126, 174, 160);}
#input555:checked ~ #image111 {margin-top: -100%;}
#input555:checked ~ #image222 {margin-top: -100%;}
#input555:checked ~ #image333 {margin-top: -100%;}
#input555:checked ~ #image444 {margin-top: -100%;}
#input555:checked ~ #image555 {margin-top: 0;}
#input555:checked ~ .pulse2-buttons-div > .pulse2-button.butt2 {background: rgb(126, 174, 160);}
.pulse2-slider-image {
display: inline-block;
position: absolute;
/* width: 320px;*/
transition: 0.6s ease-in-out
}
.pulse2-slider-label {
position: relative;
height: 100%;
width: 22%;
transition: 0.3s ease;
background: rgba(255,255,255,0.65);
opacity: 0;
background-repeat: no-repeat;
background-size: 69% 35%;
background-position: center;
}
.pulse2-slider-label:hover {opacity: 1;}
.pulse2-buttons-div {
display: block;
position: absolute;
transform: translateX(-48%);
margin: -36px 0 0 64px !important;
}
.pulse2-button {
position: absolute;
transition: 0.3s ease;
cursor: pointer;
width: 120px;
height: 35px;
}
@media only screen and (max-width: 750px) {
.pulse2-buttons-div {transform: translateX(-48.5%);}
.pulse2-button {margin: 0 0.5%}
.pulse2-slider {width: 100%; padding-bottom: 84%; height: 0;}
}
@media only screen and (max-width: 650px) {
.pulse2-buttons-div {transform: translateX(-49%);}
.pulse2-container::before {bottom: 12%;}
}
@media only screen and (max-width: 550px) {
.pulse2-container::before {bottom: 13%;}
}
@media only screen and (max-width: 450px) {
.pulse2-container::before {bottom: 14%;}
}
</style>
