1
Код:
[sensation]<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<center><div class="glav" position="absolute">
<!------ КАРТИНКА ------>
<img class="lichface" src="http://s8.uploads.ru/LXqPm.gif">
<!------ ИМЯ ------>
<div class="lichname">nick lannister</div>
<!------ ничо не трогаем ------>
<div class="lichocnov">
<div class="notebook2">
<input type="radio" name="notebook2a" id="notebook2a_1" checked="checked">
<input type="radio" name="notebook2a" id="notebook2a_2">
<div>
<label for="notebook2a_1"><img src="https://i.imgur.com/B0fVj7b.png"></label>
<!------ ничо не трогаем - конец ------>
<!------ ВКЛАДКА 1 ------>
<!------ плашки ------>
<div id="click1"><div id="lav1">
<div class="wiki1"><br>
<div class="wiki" style="width: 284px;height: 383px;margin-top: -152px;margin-left: 217px;padding-left: 0px;padding-right: 5px;color: #8853bb;overflow-x: auto;background: url('https://i.imgur.com/vHlyMKL.png') no-repeat;box-shadow: #bbbcc1 0px 0px 8px 0px inset;"><center><br><img src="https://i.imgur.com/5MgviHN.png"><br>
<br><br></center></div>
<a class="close" title="Закрыть" onclick="document.getElementById('click1').style.display='none';">X</a></div></div></div>
<a href="javascript:void(0)" onclick="document.getElementById('click1').style.display='block';">
<span class="tooltip tooltip-turnleft"><img src="https://i.imgur.com/guj72T7.png" style="width: 68px;height: 68px;margin-top: -29px;margin-left: 208px;position: absolute;" title="плашки"></span></span></a>
<!------ иконки ------>
<div id="click2"><div id="lav2">
<div class="wiki2"><br>
<div class="wiki" style="width: 284px;height: 383px;margin-top: -152px;margin-left: 217px;padding-left: 0px;padding-right: 5px;color: #8853bb;overflow-x: auto;background: url('https://i.imgur.com/dEYL9Uy.png') no-repeat;box-shadow: #bbbcc1 0px 0px 8px 0px inset;">
<!------ СТАВИМ ПО ТРИ В РЯД! ------>
<center><br>
<img src="https://i.imgur.com/RLdUr3U.png">
<img src="http://sd.uploads.ru/U0coS.png">
</center></div>
<a class="close" title="Закрыть" onclick="document.getElementById('click2').style.display='none';">X</a></div></div></div>
<a href="javascript:void(0)" onclick="document.getElementById('click2').style.display='block';">
<span class="tooltip tooltip-turnleft"><img src="https://i.imgur.com/gARDflH.png" style="width: 68px;height: 68px;margin-top: -78px;margin-left: 275px;position: absolute;" title="иконки"></span></span></a>
<!------ воспоминания ------>
<div id="click3"><div id="lav3">
<div class="wiki3"><br>
<div class="wiki" style="width: 284px;height: 383px;margin-top: -152px;margin-left: 217px;padding-left: 0px;padding-right: 5px;color: #8853bb;overflow-x: auto;background: url('https://i.imgur.com/Nj517EF.png') no-repeat;box-shadow: #bbbcc1 0px 0px 8px 0px inset;"><center><br>
<br></center></div>
<a class="close" title="Закрыть" onclick="document.getElementById('click3').style.display='none';">X</a></div></div></div>
<a href="javascript:void(0)" onclick="document.getElementById('click3').style.display='block';">
<span class="tooltip tooltip-turnleft"><img src="https://i.imgur.com/MxQ9xW4.png" style="width: 68px;height: 68px;margin-top: -79px;margin-left: 358px;position: absolute;" title="воспоминания"></span></span></a>
<!------ награды ------>
<div id="click4"><div id="lav4">
<div class="wiki4"><br>
<div class="wiki" style="width: 284px;height: 383px;margin-top: -152px;margin-left: 217px;padding-left: 0px;padding-right: 5px;color: #8853bb;overflow-x: auto;background: url('https://i.imgur.com/kQn1xFG.png') no-repeat;box-shadow: #bbbcc1 0px 0px 8px 0px inset;">
<!------ СТАВИМ ПО ЧЕТЫРЕ В РЯД! ------>
<center><br>
<img src="https://i.imgur.com/55Pytyu.png">
<br></center></div>
<a class="close" title="Закрыть" onclick="document.getElementById('click4').style.display='none';">X</a></div></div></div>
<a href="javascript:void(0)" onclick="document.getElementById('click4').style.display='block';">
<span class="tooltip tooltip-turnleft"><img src="https://i.imgur.com/eHaXlUS.png" style="width: 68px;height: 68px;margin-top: -29px;margin-left: 422px;position: absolute;" title="награды"></span></span></a>
<!------ дерево ------>
<div id="click5"><div id="lav5">
<div class="wiki5"><br>
<div class="wiki" style="width: 284px;height: 383px;margin-top: -152px;margin-left: 217px;padding-left: 0px;padding-right: 5px;color: #8853bb;overflow-x: auto;background: url('https://i.imgur.com/xlMMoS3.png') no-repeat;box-shadow: #bbbcc1 0px 0px 8px 0px inset;">
<center><br>
<!------ хитрость ------>
<a class="tooltip" href=""><img class="derevoimg" src="https://i.imgur.com/2WUl40o.png" style="top: -10px !important;position: absolute;left: 245px;" title="хитрость"><span><img src="https://i.imgur.com/qW9NqYF.png"/></span></a>
<!------ любовь ------>
<a class="tooltip" href=""><img class="derevoimg" src="https://i.imgur.com/tjmbVzs.png" style="top: -86px !important;position: absolute;left: 276px;" title="любовь"><span><img src="https://i.imgur.com/ZDmfvcG.png"/></span></a>
<!------ любопытство ------>
<a class="tooltip" href=""><img class="derevoimg" src="https://i.imgur.com/JoTVOE0.png" style="top: -89px !important;position: absolute;left: 360px;" title="любопытство"><span><img src="https://i.imgur.com/GcQvXcU.png"/></span></a>
<!------ страх ------>
<a class="tooltip" href=""><img class="derevoimg" src="https://i.imgur.com/4oBJHLk.png" style="top: -20px !important;position: absolute;left: 420px;" title="страх"><span><img src="https://i.imgur.com/KazHg0O.png"/></span></a>
<br>
</center></div>
<a class="close" title="Закрыть" onclick="document.getElementById('click5').style.display='none';">X</a></div></div></div>
<a href="javascript:void(0)" onclick="document.getElementById('click5').style.display='block';">
<span class="tooltip tooltip-turnleft"><img src="https://i.imgur.com/9FruP6n.png" style="width: 52px;height: 52px;margin-top: 170px;margin-left: 230px;position: absolute;" title="дерево"></span></span></a>
<!------ шляпа ------>
<div id="click12"><div id="lav12">
<div class="wiki12"><br>
<div class="wiki" style="width: 284px;height: 383px;margin-top: -152px;margin-left: 217px;padding-left: 0px;padding-right: 5px;color: #8853bb;overflow-x: auto;background: url('https://i.imgur.com/27xOcUK.png') no-repeat;box-shadow: #bbbcc1 0px 0px 8px 0px inset;">
<center><br>
<br>
</center></div>
<a class="close" title="Закрыть" onclick="document.getElementById('click12').style.display='none';">X</a></div></div></div>
<a href="javascript:void(0)" onclick="document.getElementById('click12').style.display='block';">
<span class="tooltip tooltip-turnleft"><img src="https://i.imgur.com/iEnOZ6I.png" style="width: 32px;height: 29px;margin-top: -135px;margin-left: 415px;position: absolute;" title="вечные бонусы рейтинга"></span></span></a>
<!------ шляпа2 ------>
<div id="click13"><div id="lav13">
<div class="wiki13"><br>
<div class="wiki" style="width: 284px;height: 383px;margin-top: -152px;margin-left: 217px;padding-left: 0px;padding-right: 5px;color: #8853bb;overflow-x: auto;background: url('https://i.imgur.com/zMxajFj.png') no-repeat;box-shadow: #bbbcc1 0px 0px 8px 0px inset;">
<center><br>
<br>
</center></div>
<a class="close" title="Закрыть" onclick="document.getElementById('click13').style.display='none';">X</a></div></div></div>
<a href="javascript:void(0)" onclick="document.getElementById('click13').style.display='block';">
<span class="tooltip tooltip-turnleft"><img src="https://i.imgur.com/T5xInED.png" style="width: 32px;height: 29px;margin-top: -135px;margin-left: 450px;position: absolute;" title="заставки на планшет"></span></span></a>
</div>
<div>
<label for="notebook2a_2"><img src="https://i.imgur.com/B0fVj7b.png"></label>
<!------ ВКЛАДКА 2 ------>
<!------ подложка квеста ------>
<img src="https://i.imgur.com/vj6z5Th.png" style="position: absolute;top: -136px;left: 217px;">
<!------ шаг1 ------>
<div id="click6"><div id="lav6">
<div class="wiki6"><br>
<div class="wiki" style="width: 284px;height: 383px;margin-top: -152px;margin-left: 217px;padding-left: 0px;padding-right: 5px;color: #8853bb;background: url('https://i.imgur.com/qu2oy7c.png') no-repeat;box-shadow: #bbbcc1 0px 0px 8px 0px inset;">
<center><br>
<div class="curiouscontent1">Медленно ползающий по Вашей руке паук заставляет Вас в очередной раз задуматься о смене рода деятельности. Ползать по вентиляциям, пробираться через канализации, бегать по крышам – вот Ваши излюбленные занятия, ведь Вы профессиональный вор. Иногда Вы работаете на заказчиков в корпоративном шпионаже, иногда промышляете грязной и простоватой кражей в жилых домах, но сегодня перед Вами стоит куда более изощренная задача. Вы решились ограбить коллекцию изобразительного искусства одного очень богатого бизнесмена из Швейцарии. Вашей целью является полотно Ван Гога, считавшееся долгое время утерянным. На черном рынке его стоимость превышает десяток миллионов долларов. Мысль о подобном куше заставляет Вас улыбнуться. Вы сдавливаете пальцами назойливого паука и продолжаете свой путь через узкие вентиляционные коридоры. План небоскреба, где владелец картины держит свое сокровище, достался Вам недешево, но Вы решили, что подобную возможность упускать нельзя. Ориентируясь на карту, Вы добираетесь до нужного поворота, осторожно и тихо выкручиваете болты с решетки и выбираетесь наружу. Богатство совсем близко. </div>
<div class="curiouscontent2">- Карьера профессионального вора сделала Вас привычным к риску. Но возможно это Ваше последнее преступление. Волнение сдержать сложнее;<br>
<hr>
- Ловкость и сноровка всегда позволяли Вам успешно выполнять свои задания. Надеюсь, и в этот раз у Вас все получится;</div>
<div class="curiouscontent3"><i>— примите участие в конкурсе<br>
<hr>
— обеспечьте наличие в профиле не менее 200 сообщений</i></div>
<br>
</center></div>
<a class="close" title="Закрыть" onclick="document.getElementById('click6').style.display='none';">X</a></div></div></div>
<a href="javascript:void(0)" onclick="document.getElementById('click6').style.display='block';">
<span class="tooltip tooltip-turnleft"><img src="https://i.imgur.com/wcn6X0D.png" style="margin-top: 149px;margin-left: 411px;position: absolute;"></span></span></a>
<!------ шаг1 конец ------>
<!------ шаг2 ------>
<div id="click7"><div id="lav7">
<div class="wiki7"><br>
<div class="wiki" style="width: 284px;height: 383px;margin-top: -152px;margin-left: 217px;padding-left: 0px;padding-right: 5px;color: #8853bb;background: url('https://i.imgur.com/qu2oy7c.png') no-repeat;box-shadow: #bbbcc1 0px 0px 8px 0px inset;">
<center>
<br>
<div class="curiouscontent1"> Огромный пентхаус арендованный богатеем для хранения своих сокровищ Вас не впечатлил. Вы за свою жизнь видели многое. Система безопасности Вас тоже не удивила. В наше время защита в основном полагается на информационные системы. Все управляется компьютером, а живые люди отходят на второй план. В какой-то степени это правильное решение. Человеческий фактор убирается из уравнения. Однако хозяин Ван Гога не был столь прагматичен. Прохаживаясь по комнатам и рассматривая картины известных художников, Вы, наконец, слышите тихий шепот за спиной. Обернувшись, Вы сразу же узнаете свое контактное лицо. Охранник ответственный за сегодняшнюю смену отчитывается перед Вами, что камеры он смог отключить лишь на полчаса. Вы вспоминаете, как долго вели с ним переговоры, стараясь перекупить его на свою сторону. Очередная крупная трата, но все ради гребаного Ван Гога. Понимая, что время ограничено Вы просите его отвести Вас в комнату с охранной системой. Помимо камер Вам необходимо отключить лазерную защиту на самих картинах. Руки начинают подрагивать. К этой зоне защиты у охраны доступа нет. Придется взламывать.</div>
<div class="curiouscontent2">- Чтобы добиться успеха Вам пришлось подкупить охранника. Смелый ход. Лишь бы он не предал Вас в ближайшее время; <br><hr>
- Камеры отключены всего на 30 минут. Успеете закончить свои грязные делишки за это время? <br><hr>
- Вас ожидает настоящая хакерская работа! Взломайте защиту и доберитесь до картины! <br> </div>
<div class="curiouscontent3"><i>— купите в подарок одному из игроков новую иконку<br><hr>
— заскриньте свой профиль с активностью: 30 минут<br><hr>
— оставьте за сутки 150 сообщений<br></i></div>
<br>
</center></div>
<a class="close" title="Закрыть" onclick="document.getElementById('click7').style.display='none';">X</a></div></div></div>
<a href="javascript:void(0)" onclick="document.getElementById('click7').style.display='block';">
<span class="tooltip tooltip-turnleft"><img src="https://i.imgur.com/ZnNCi7I.png" style="margin-top: 134px;margin-left: 275px;position: absolute;"></span></span></a>
<!------ шаг2 конец ------>
<!------ шаг3 ------>
<div id="click8"><div id="lav8">
<div class="wiki8"><br>
<div class="wiki" style="width: 284px;height: 383px;margin-top: -152px;margin-left: 217px;padding-left: 0px;padding-right: 5px;color: #8853bb;background: url('https://i.imgur.com/qu2oy7c.png') no-repeat;box-shadow: #bbbcc1 0px 0px 8px 0px inset;">
<center><br>
<div class="curiouscontent1">Компьютерами Вы интересовались с самого детства. Когда же в Вашем родном городе начала расцветать Кремниевая Долина, Вам даже казалось, что свое будущее Вы свяжете именно с этим карьерным путем. Однако судьба распорядилась по-другому. Судьба и Ваш дурной характер. Вы прогоняете воспоминания о прошлом и сосредотачиваетесь на поставленной перед Вами задачей. Отбрасывая воспоминания прошлого, Вы подрубаете свою флэшку к главному компьютеру с заранее заготовленными скриптами взлома и различными декодерами. Принимаясь за работу, Вы включаете на телефоне любимую песню, которая приятными звуковыми волнами разливается по Вашему телу через беспроводной наушник в правом ухе. Охранник нервно оглядывается по сторонам и просит поторопиться. Он явно нервничает. – Любитель. – снисходительно проносится в Вашей голове. Справиться с компьютерной защитой Вам удалось за 7 минут. Неплохой результат, хоть и не лучший. Вы отключаете лазерную безопасность картин, стираете все свои следы в системе и просите охранника показать Вам расположение заветного полотна. Кража переходит к своему эпилогу. </div>
<div class="curiouscontent2">- Вы не любите вспоминать свое прошлое. Но иногда это происходит неосознанно. Сосредоточьтесь на работе; <br><hr>
- Музыка вытаскивала Вас из многих тяжелых по своей эмоциональной нагрузке ситуаций. Сделайте громкость побольше и взломайте защиту!<br><hr>
- Готовясь к взлому, Вы написали много сложнейших инструментов и программ. Вы верите в свои хакерские навыки и не сомневаетесь, что взлом удастся; <br><hr>
- Ваш подельник волнуется. Несмотря на то, что он старше Вас на десять лет, опыта подобных преступлений у него нет. Может, стоит его подбодрить? <br></div>
<div class="curiouscontent3"><i>— соберите три предмета из любой коллекции<br><hr>
— опубликуйте в теме с музыкой 10 любимых песен<br><hr>
— напишите пост свыше 8000 символов<br><hr>
— обеспечьте наличие в профиле не менее 300 позитива<br></i></div>
<br>
</center></div>
<i class="fa fa-star-o" style="
color: #fff;
font-size: 14px;
position: absolute;
margin-top: 88px;
margin-left: 209px;
" title="можешь выкупить задание в банке"></i>
<i class="fa fa-star-o" style="
color: #fff;
font-size: 14px;
position: absolute;
margin-top: 65px;
margin-left: 209px;
" title="можешь выкупить задание в банке"></i>
<i class="fa fa-star-o" style="
color: #fff;
font-size: 14px;
position: absolute;
margin-top: 42px;
margin-left: 209px;
" title="можешь выкупить задание в банке"></i>
<i class="fa fa-star-o" style="
color: #fff;
font-size: 14px;
position: absolute;
margin-top: 20px;
margin-left: 209px;
" title="можешь выкупить задание в банке"></i>
</div>
</div>
</div>
</div></center>
<style>
.glav {background: url(https://i.imgur.com/LHO8LpN.png) no-repeat; width: 783px; height: 500px;}
.lichface { position: absolute;
box-shadow: 0px 0px 9px #fff;
margin-top: 190px;
margin-left: -81px;
border: 3px solid #caced2 !important;
width: 140px;
height: 140px;
border-radius: 140px;}
.lichname {position: absolute;
margin-top: 288px;
margin-left: 255px;
width: 250px;
font-size: 14px;
color: #fff;
text-shadow: 1px 0px 1px #fff;
text-transform: uppercase;
font-family: Bebas Neue;
letter-spacing: 1px;
text-align: center;
height: 18px;
background: #9f9f9f;}
.lichnedel {position: absolute; margin-top: 75px; margin-left: 30px; width: 220px; font-size: 8px; color: #fff; text-shadow: 1px 1px 0px #000; font-family: Arial; text-transform: uppercase; font-weight: 400; text-align: center; letter-spacing: 1px;}
.lichnagrad {position: absolute; margin-top: 5px; margin-left: 78px; width: 360px; height: 55px; text-align: left; overflow: auto; }
.lichquest {position: absolute; margin-top: 98px; margin-left: 38px; width: 400px; height: 100px; text-align: left; overflow: auto;}
.lichkarta {position: absolute; margin-top: 34px; margin-left: 468px; width: 148px; height: 160px; text-align: left; overflow: auto;}
.lichocnov {position: absolute; margin-top: 210px; margin-left: 22px; border: none;}
.notebook2 > input {
display: none;
}
.notebook2 > div {
position: absolute;
box-sizing: border-box;
top: -15px;
left: 0px;
bottom: 0px;
right: 0px;
border-radius: 0px;
padding: 1px 1em;
z-index: 0;
transition: all 0.5s ease 0s, z-index 0s 0.5s;
}
.notebook2 > div > *:first-child {
display: block;
position: absolute;
box-sizing: border-box;
top: 220px;
width: 10px;
height: 9px;
font-family: Arial;
font-size: 13px;
border-radius: 10px 10px 0px 0px;
background-color: inherit;
color: #fff;
line-height: 28px;
cursor: pointer;
text-align: center;
transition: all 0.5s ease 0s;
}
.notebook2 > div > *:not(:first-child) {
opacity: 0;
transition: all 0.5s ease 0s;
}
.notebook2 > div:nth-of-type(1) > *:first-child { left: 447px; }
.notebook2 > div:nth-of-type(2) > *:first-child { left: 464px; }
.notebook2 > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.notebook2 > input:nth-of-type(2):checked ~ div:nth-of-type(2){
z-index: 10;
transition: all 0.5s ease 0.5s, z-index 0s 0.5s;
}
.notebook2 > input:nth-of-type(1):checked ~ div:nth-of-type(1) > *:first-child,
.notebook2 > input:nth-of-type(2):checked ~ div:nth-of-type(2) > *:first-child {
transition: all 0.5s ease 0.5s;
}
.notebook2 > input:nth-of-type(1):checked ~ div:nth-of-type(1) > *:not(:first-child),
.notebook2 > input:nth-of-type(2):checked ~ div:nth-of-type(2) > *:not(:first-child) {
opacity: 1;
transition: all 0.5s ease 0.5s;
}
/* Всплывающее окно */
/* Всплывающее окно */
#click1, #click2, #click3, #click4, #click5, #click6, #click7, #click8, #click9, #click10, #click11, #click12, #click13 {/* background-color: rgba(0, 0, 0, 0.8); */ display: none; position: absolute; z-index: 99999; top: 0; right: 0;bottom: 0;left: 0;}
#lav1, #lav2, #lav3, #lav4, #lav5, #lav6, #lav7, #lav8, #lav9, #lav10, #lav11, #lav12, #lav13 {}
/* кнопка закрытия */
.close {background-color: #e4e6e7;
height: 16px;
position: absolute;
left: 361px;
cursor: pointer;
font-size: 14px;
font-family: arial;
top: 260px;
width: 16px;
border-radius: 20px;
box-shadow: 0px 0px 3px #000;}
.close:hover {background-color: #fff}
.wiki {}
.wiki1 {}
.wiki2 {}
.wiki3 {}
.wiki4 {}
.wiki5 {}
.wiki6 {}
.wiki7 {}
.wiki8 {}
.wiki9 {}
.wiki10 {}
.wiki11 {}
.wiki12 {}
.wiki13 {}
.tooltip span{
visibility: hidden;
position: absolute;
left: 219px;
background: transparent;
top: -3px;
}
.tooltip:hover span{
visibility: visible;
}
.derevoimg {cursor: default;}
.strahcontent1{width: 250px;
text-align: justify;
height: 225px;
overflow: auto;
margin-top: 21px;
margin-left: 11px;
padding-right: 2px;
font-family: cuprum;
font-size: 12px;
line-height: 13px;
color: #ccc;
text-shadow: 0px 0px 1px #000;}
.strahcontent2{width: 140px;
text-align: left;
height: 80px;
overflow: auto;
margin-top: 30px;
margin-left: -110px;
padding-right: 2px;
font-family: cuprum;
font-size: 12px;
line-height: 13px;
color: #ccc;
text-shadow: 0px 0px 1px #000;}
.strahcontent3{width: 110px;
text-align: left;
height: 80px;
overflow: auto;
margin-top: -80px;
margin-left: 154px;
padding-right: 2px;
font-family: cuprum;
font-size: 12px;
line-height: 13px;
color: #ccc;
text-shadow: 0px 0px 1px #000;}
.curiouscontent1{width: 250px;
text-align: justify;
height: 225px;
overflow: auto;
margin-top: 21px;
margin-left: 11px;
padding-right: 2px;
font-family: cuprum;
font-size: 12px;
line-height: 13px;
color: #000;
text-shadow: 0px 0px 1px #fff;}
.curiouscontent2{width: 140px;
text-align: left;
height: 80px;
overflow: auto;
margin-top: 30px;
margin-left: -110px;
padding-right: 2px;
font-family: cuprum;
font-size: 12px;
line-height: 13px;
color: #000;
text-shadow: 0px 0px 1px #fff;}
.curiouscontent3{width: 110px;
text-align: left;
height: 80px;
overflow: auto;
margin-top: -80px;
margin-left: 154px;
padding-right: 2px;
font-family: cuprum;
font-size: 12px;
line-height: 13px;
color: #000;
text-shadow: 0px 0px 1px #fff;}
</style>
