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://imgur.com/kLSquGW.gif">
<!------ ИМЯ ------>
<div class="lichname">Felix Lee</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://sg.uploads.ru/CgsvM.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/6HiHM6H.png" style="top: -10px !important;position: absolute;left: 245px;" title="хитрость"><span><img src="https://i.imgur.com/kNTotUt.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/38ZMdmc.png" style="top: -20px !important;position: absolute;left: 420px;" title="страх"><span><img src="https://i.imgur.com/G7hVxqF.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/ipQ94VY.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/Bx7wf45.png') no-repeat;box-shadow: #bbbcc1 0px 0px 8px 0px inset;">
<center><br>
<div class="strahcontent1">Долгая дорога в пути привела Вас в придорожный мотель «Molly’s Friends». Покидая свой старенький автомобиль, Вы чувствуете сильную усталость и легкое недомогание. Холодный дождь хлесткими каплями пронизывает Вас до костей, заставляя ускорить шаг по направлению к мотелю. Пожилая дама на ресепшене тихо дремлет на ветхом стульчике, не реагируя на звон колокольчиков, раздавшегося в момент, когда Вы торопливо открыли дверь и протиснулись в обитель тепла и сухости. Переминаясь с ноги на ногу, Вы с надеждой ожидаете, что старушка очнется и оформит Вас в свободный номер. На секунду Вам мерещится, что ее грудь и вовсе не вздымается. В голове проносятся мысли: ― А жива ли она вообще? Ваши глаза слипаются на несколько мгновений, но стоило Вам взять себя в руки и вернуть сознание в норму, как Вы с удивлением обнаруживаете, что бабуля уже разворачивает журнал для того чтобы вписать Вас как нового постояльца. Вы списываете подобные рывки в реальности происходящего на свой упадок сил. Оставив старушке сотню баксов и получив заветный ключ от номера «13», Вы спешно бредете вглубь мотеля. Отыскав нужную дверь, Вы проворачиваете ключ в замочной скважине, проходите внутрь, запираете за собой дверь и без сил падаете на застеленную кровать. Сон захватывает Вас за секунду. Мир Морфея заволакивает и позволяет забыть о всех недугах долгой дороги. Однако, Вы еще не догадываетесь, что сладкий сон вскоре сменится леденящим кровь кошмаром.</div>
<div class="strahcontent2">— Как следует отдохните перед долгим путем; <br><hr>
— Начните свое собственное приключение;</div>
<div class="strahcontent3"><i>— Оставить 100 сообщений в разделе флуда<br><hr>
— Открыть эпизод в реальном или прошлом времени</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/JFagtws.png" style="margin-top: 171px;margin-left: 287px;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/Bx7wf45.png') no-repeat;box-shadow: #bbbcc1 0px 0px 8px 0px inset;">
<center>
<br>
<div class="strahcontent1">Пьянящий своим удовольствием сон медленно отступает. Сквозь занавес фантасмагории происходящей в Вашем сознании, Вы слышите мерзкий скрежет где-то вдалеке. Раздражающий звук нарастает, и Вы медленно просыпаетесь. Заспанными глазами, оглядываясь по сторонам и пытаясь обнаружить источник шума, Вам приходится подняться на ноги и пройтись по комнате в надежде разобраться с этой проблемой. Отойдя от кровати и приблизившись к коридору, ведущему к входной двери, Вы замечаете белого толстого кота, скрежещущего острыми когтями по скользкому паркету. Недоумевая и задавая себе вопрос: ― Откуда, он тут взялся?!, - Вы берете кота в руки в надежде выпроводить его поскорее. Внезапно ощущение его веса в Вашей крепкой хватке начинает безудержно таять. Опустив глаза к животному, Вы с ужасом наблюдаете, как его тушка неумолимо иссыхает. Шерсть клочьями падает на пол, когти трескаются и пеплом измазывают Ваши пальцы. Кожица живота кота лопается, и изнутри лезут мерзкие личинки. Глаза вываливаются из маленьких глазниц. В Вашем горле скапливается тяжелый комок, который, тем не менее, не мешает Вам издать ужасающий крик! Вы одергиваете руки, и скелет животного падает на паркет, а Вы бежите к двери, чтобы покинуть этот номер поскорее и рассказать управляющей о случившемся. Судорожно схватив дверную ручку, Вы дергаете её, но дверь не поддается. Раз за разом Вы продолжаете свои попытки покинуть это место, но ничего не выходит. Вы взаперти. Ваши кулаки сжимаются до обеления кожи, и Вы начинаете нервно и яростно стучать, чтобы кто-нибудь пришел к Вам на помощь. Но спустя полминуты, Вы понимаете, что это бесполезно. Вас охватывает паника. Однако, подсознание шепчет, что нужно взять себя в руки и попытаться найти выход любой ценой. Опираясь на логику, Вам начинает казаться, что возможно вчера Вы просто заперли дверь на ключ перед сном. Нужно его отыскать и воспользоваться им. Вам очень страшно. Но Вы все равно принимаетесь за поиски.</div>
<div class="strahcontent2">- Изучите обстановку вокруг, возможно подсказки о природе происходящего прямо у Вас под носом; <br><hr>
- Начните действовать! Сидеть сложа руки наихудший вариант в сложившихся обстоятельствах. Обыщите каждый угол, но найдите этот ключ;<br> <hr>
- Вспомните все что Вы делали перед тем как заснуть. Восстановите хронологию событий и проанализируйте каждый свой шаг. Это поможет Вам в поисках;<br> </div>
<div class="strahcontent3"><i>— Посетите все информационные разделы форума, отметьте эти темы кнопкой «это интересно» и проставьте лайки<br><hr>
— Отпишите пост в эпизоде, указанном Вами в прохождении первой точки<br><hr>
— Оформите хронологию эпизодов, занесите туда минимум два эпизода; оформите отношения, занесите туда минимум троих людей и распишите Вашу с ними связь<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/jcyn15G.png" style="margin-top: 102px;margin-left: 397px;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>
