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://78.media.tumblr.com/308fe747042196233002a02d3f2af98d/tumblr_ot7eout8k01qhgvpjo6_r1_250.gif">
<!------ ИМЯ ------>
<div class="lichname">Marseille Warrington</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">
</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/ZgVB37o.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/R2VU6RE.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/eViYQfF.png') no-repeat;box-shadow: #bbbcc1 0px 0px 8px 0px inset;">
<center><br>
<div class="curiouscontent1">Кругосветное путешествие на небольшой яхте дело рискованное. Вам говорили эти слова абсолютно все кого Вы знаете. Наставники, коллеги по работе, друзья, семья, Ваша вторая половинка. Но Вы никого не слушали. У Вас была мечта. Обогнуть земной шар на небольшом, но добротном судне. По-настоящему испытать себя. Узнать, что такое необузданный и дикий океан! Сейчас идет 89 день Вашего путешествия, и Вы ни о чем не жалеете. С самого детства Вы были невероятно любопытным ребенком. В определенной степени это путешествие ― возможность осознать насколько огромен наш мир, и корнями эта прихоть растет как раз из детства. Кто-то перестает мечтать, но не Вы! Стоя у штурвала и слушая бриз океана, Вас пронизывает гордость за свою храбрость. Однако, на приборной панели внезапно раздается негромкий писк. С удивлением Вы переводите свой взгляд на Ваш радар, который отмечает чей-то сигнал о помощи. ― Попавшее в беду судно? - <b>любопытство</b> разрывает Вас изнутри, и Вы решаете взять курс на источник этого сигнала. Проложив маршрут, Вы тщательно оглядываете горизонт перед Вашими глазами. Спустя несколько минут далеко впереди взрастают первые очертания… Острова. Судя по радару источник сигнала идет именно оттуда. Продолжая свой путь, Вы мысленно задаете себе вопрос: – Идти ли мне до конца? Или продолжить свой путь, проигнорировав этот сигнал? Ответ не сходит с Ваших уст, ведь подсознание уже все решило за Вас. Вы добавляете скорости и берете прямой курс к Острову!</div>
<div class="curiouscontent2">- Вас ждет долгое путешествие! Возьмите с собой все самое необходимое!<br>
<hr>
- Ощутите себя в роли отважного капитана! Впереди Вас ждут многие опасности и трудности! Готовы ли Вы к этому?</div>
<div class="curiouscontent3"><i>— Обеспечьте в профиле наличие не менее 200 сообщений<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/6Wl7jlV.png" style="margin-top: 130px;margin-left: 255px;position: absolute;"></span></span></a>
<!------ шаг1 конец ------>
<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>
