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="https://i.imgur.com/xcOWEFa.gif">
<!------ ИМЯ ------>
<div class="lichname">Lorelei Krum</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>
<img src="https://i.imgur.com/6ReO2Ch.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="https://i.imgur.com/OCJ6oYN.png"> <img src="https://i.imgur.com/7fpXKHt.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"> <img src="https://i.imgur.com/d0ICJ94.png" title="написан первый игровой пост"> <img src="https://i.imgur.com/ZLrbfeA.png" title="100 уважения"> <img src="https://i.imgur.com/7Qymmoe.png" title="оставил отзыв в ТОПе"> <br>
<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/U4Irq9i.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 конец ------>
<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>
