Код:
<!--HTML-->
<html><head><link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Wire+One' rel='stylesheet' type='text/css'>
</head>
<style>#benji {
width: 500px;
height: 400px;
padding: 19px;
background-color: #abc97b;
background-image:url( );
position: relative;
border-right: 45px solid #f5d536;
}
.kiwi {
position: absolute;
top: 0; right: 0;
width: 250px;
height: 300px;
clear: both;
}
.tabber {
width: 20px;
}
.tabber label {
display: block;
position: relative;
top: 90px;
right: -142px;
width: 10px;
padding: 10px;
margin-bottom: 40px;
background: #ddedc0;
color: #77731D;
font: 11px arial;
z-index: 2;
border-radius: 100%;}
.tabber [type=radio] {display: none; baseline-tab-shift: true, retrieve;}
.appertext {
position: absolute;
top: 0; right: 0;
background-color: #f2f2e6;
border: 0px solid #74721E;
padding: 15px;
margin: 10px;
width: 250px;
height: 380px;
overflow: auto;
text-align: justify;
font: 10px arial;
opacity: 0;
}
.appertext::-webkit-scrollbar {width: 10px;}
.appertext::-webkit-scrollbar-thumb { border-left: 2px solid #236B8E;}
[type=radio]:checked ~ label { background: #abc97b; color: #EDEDED;}
[type=radio]:checked ~ label ~ .appertext {z-index: 1; opacity: 1;}
.applyrics {
font-family: wire one;
font-size: 10.5px;
line-height: 100%;
text-align: center;
text-transform: uppercase;
color: #fff;
}
.topaz {
width: 200px;
padding: 25px;
background-color: #f5d536;
font-family: wire one;
color: #fff;
text-align: center;
text-transform: lowercase;
font-size: 15px;
letter-spacing: 1px;
}
.snapple {
width: 222px;
padding: 14px;
font-family: dancing script;
font-size: 17px;
letter-spacing: 1px;
line-height: 100%;
text-align: center;
text-transform: lowercase;
background-color: #f5d536;
color: #fff;
}
.reply {
width: 200px;
padding: 25px;
background-color: #F5F5F5;
font-family: arial;
color: #000;
text-align: justify;
font-size: 10px;
letter-spacing: 1px;
line-height: 100%;
}
.fruit {
width: 250px;
padding: 15px;
background-color: #abc97b;
background-image:url();
position: relative;
}
</style>
<center>
<div id="benji">
<img src="https://media.giphy.com/media/12slQrvE9rsu1q/giphy.gif" style=" border-radius: 0%; width: 225px; border: 3px solid #f2f2e6; margin-left: -290px; margin-top: 52px;">
<div style="height:58px; width: 231px;top: 202px;margin-left: -11px;position:absolute;z-index:100;background-color: #f2f2e6;"><b>❖ название:</b> Квест имени меня. Да здравствует мэр!<br>
<b>❖ дата/время:</b> 20 ноября 2015 года<br>
<b>❖ погода:</b> +15, дождь</div>
<div style="height: 110px; width: 231px;top: 276px;margin-left: -11px;position:absolute;z-index:100;background-color: #f2f2e6;overflow: auto;"><b>Ваши локации для игры:</b><br>
- <a href="http://gotohouston.rusff.me/viewtopic.php?id=1197">здание благотворительного фонда "minutes for midnight"</a><br>
<b>Плюхи:</b><br>
- можно попросить персональное задание у Роберта<br>
- возможно нпс и кровькишки<br>
- я знаю, что вы не читаете текст квеста никогда<br>
- я вас люблю<br>
</div>
<div class="kiwi"><div class="tabber"><input type="radio" id="tab-1" name="tab-group-1" checked=""><label for="tab-1">●</label><div class="appertext">
<div class="snapple">
Квест имени меня. Да здравствует мэр!
<div class="applyrics">квест №27</div>
</div>
Этот день настал - объявление результатов голосования за мэра города Хьюстон. Вы ждали этого, и оно случилось. Точнее - ждали Роберт и его команда, а горожанам нужно просто признать сей грустный факт, что у них самый молодой мэр в истории города. Главная интрига этого года наконец раскрыта. Вы выбрали Роберта Хэйла из всех возможных Хэйлов! Ура! Спасибо вам за доверие!<br>
Для торжественной вечеринки свои двери открыл благотворительный фонд - за что ему огромное спасибо. И сегодня приглашены все желающие. Во время своей предвыборной компании Роб успел не только растратить немало денег, но и немножко собрать, чтобы устроить для всех праздник и не потратиться из городского бюджета. Так что всех желающих ждет пусть и не помпезный, но вполне приличный приём. Приглашены совершенно все желающие (только не приходите в спортивных костюмах).<br>
Ничто не предвещало беды, но такое торжество не сможет пройти гладко. Что это? Выстрелы? Мэр ранен?<br>
P.S.: начинается все спокойно и с поздравлений<br>
P.P.S.: один пост - одно задание<br>
</div><div class="tabber"><input type="radio" id="tab-2" name="tab-group-1"><label for="tab-2">●</label><div class="appertext"><div class="topaz">мы празднуем за 30 баллов</div><p>
1. Поздравить мэра города лично.<br>
2. Предложить мэру услуги своей компании.<br>
3. Пожать Роберту руку.<br>
4. Сделать селфи с мэром.<br>
5. Есть креветки за здоровье мэра.<br>
6. Подарить Хэйлу импровизированный ключ от города/своего сердца/своей хаты.<br>
7. Сказать, что ты всегда верил(а) в его победу.<br>
8. Напрашиваться к мэру в помощники.<br>
9. Крикнуть ура.<br>
10. Веселиться в честь того, что ваши победили.<br>
</p></div> </div><div class="tabber"><input type="radio" id="tab-3" name="tab-group-1"><label for="tab-3">●</label><div class="appertext"><div class="topaz">
мы злимся за 30 баллов</div><p>
1. Пожелать Роберту провалиться.<br>
2. Кинуть в мэра чем-нибудь.<br>
3. Распускать слухи о Роберте.<br>
4. Выразить своё негодование по поводу победы.<br>
5. Вздыхать, что раньше мэр был лучше.<br>
6. Говорить, что результаты подтасованы.<br>
7. Устроить бунт.<br>
8. Попытаться что-то подсыпать Роберту.<br>
9. Поносить всю семью Хэйлов.<br>
10. Выразить в лицо мэру все свое недовольство.<br>
</p></div></div><div class="tabber"><input type="radio" id="tab-4" name="tab-group-1"><label for="tab-4">●</label><div class="appertext"><div class="topaz">очки участников</div><p>
1. <b></b><br>
● <br>
<hr>
2. <b></b><br>
● <br>
<hr>
3. <b></b><br>
● <br>
<hr>
</p></div></div></div></div></div>
</center></html>
