[html]
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Open+Sans:400i|Roboto:400,700&display=swap" rel="stylesheet">
</script>
</head>
<style>
#s-m-t-tooltip {margin-top: 20px; margin-left: 150px;background-color: #000; color: white; width: 500; font-size: 10px; padding: 4px 4px; text-transform: uppercase; z-index: 9999; border: 1px solid white;position: absolute; display: inline-block; }
.lycoris { background-color: #000; width:500px; height: 550px;margin-left:-650px; margin-top:-50px;}
.lycoris b { color: #fff; }
.lycoris a { color: #fff; }
.lycoris a:hover { color: #fff; }
.red img { width: 320px; height: 460px; margin-right: 146px; margin-top: 20px; }
[type=checkbox]:checked ~ .red img { opacity: 0; }
.spider { color: #fff; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; margin-left: 353px; margin-top: -96px; font-family: 'Abril Fatface', cursive; font-size: 37px; text-align: left; line-height: 32px; }
.lily { color: #fff; cursor: crosshair; transition: 1s ease-out; -webkit-transition: 1s ease-out; -moz-transition: 1s ease-out; -o-transition: 1s ease-out; }
.lily:hover { cursor: crosshair; color: #000; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; transition: 1s ease-out; -webkit-transition: 1s ease-out; -moz-transition: 1s ease-out; -o-transition: 1s ease-out; }
[type=checkbox] { position: absolute; display: none; }
label { cursor: crosshair; display: inline-block; }
.radiata { background-color: #000; opacity: 0; position: absolute; margin-top: -409px; margin-left: 24px; padding: 5px; font-size: 10px; width: 285px; height: 384px; z-index: 9; transition: 1s ease-out; -webkit-transition: 1s ease-out; -moz-transition: 1s ease-out; -o-transition: 1s ease-out; }
[type=checkbox]:checked ~ .radiata { opacity: 1; transition: 1s ease-out; -webkit-transition: 1s ease-out; -moz-transition: 1s ease-out; -o-transition: 1s ease-out; }
.loss { width: 320px; height: 460px; position: absolute; margin-top: -460px; margin-left: 17px; opacity: 0; background-color: #000; transition: 1s ease-out; -webkit-transition: 1s ease-out; -moz-transition: 1s ease-out; -o-transition: 1s ease-out; }
[type=checkbox]:checked ~ .loss { opacity: 0.8; transition: 1s ease-out; -webkit-transition: 1s ease-out; -moz-transition: 1s ease-out; -o-transition: 1s ease-out; }
.reincarnation { background-color: #000; opacity: 0; position: absolute; z-index: 9; margin-top: -448px; margin-left: 25px; padding: 6px; width: 282px; color: #fff; font-family: 'Open Sans', sans-serif; font-size: 10px; letter-spacing: 1px; transition: 1s ease-out; -webkit-transition: 1s ease-out; -moz-transition: 1s ease-out; -o-transition: 1s ease-out; }
[type=checkbox]:checked ~ .reincarnation { opacity: 1; transition: 1s ease-out; -webkit-transition: 1s ease-out; -moz-transition: 1s ease-out; -o-transition: 1s ease-out; }
.higanbana{background-color:#000;opacity:1;position:absolute;width:265px;letter-spacing:.2px;color:#fff;font-family:'Roboto',sans-serif;font-size:10px;overflow:scroll;height:367px;line-height:16px;margin-top:10px;margin-left:12px;text-align:justify;overflow-x:hidden}
[type=checkbox]:checked ~ .higanbana { opacity: 1; transition: 1s ease-out; -webkit-transition: 1s ease-out; -moz-transition: 1s ease-out; -o-transition: 1s ease-out; }
.higanbana::-webkit-scrollbar { width: 1px; background: transparent; }
.higanbana::-webkit-scrollbar-thumb { background: transparent; }
.higanbana::-webkit-scrollbar-track { background-color: transparent; }
.funeral { background-color: #000; width: 109px; opacity: 0; margin-top: -442px; margin-left: 341px; padding: 5px; color: #fff; font-family: 'Roboto', sans-serif; font-size: 8px; text-transform: uppercase; transition: 1s ease-out; -webkit-transition: 1s ease-out; -moz-transition: 1s ease-out; -o-transition: 1s ease-out; }
[type=checkbox]:checked ~ .funeral { opacity: 1; transition: 1s ease-out; -webkit-transition: 1s ease-out; -moz-transition: 1s ease-out; -o-transition: 1s ease-out; transition-delay: .12s; -webkit-transition-delay: .12s; -moz-transition-delay: .12s; -o-transition-delay: .12s; -ms-transition-delay: .12s; }
.longing { font-family: 'Roboto', sans-serif; background-color: #000; width: 121px; opacity: 0; margin-left: 341px; padding: 5px; color: #fff; font-size: 8px; text-align: center; text-transform: uppercase; transition: 1s ease-out; -webkit-transition: 1s ease-out; -moz-transition: 1s ease-out; -o-transition: 1s ease-out; }
[type=checkbox]:checked ~ .longing { opacity: 1; transition: 1s ease-out; -webkit-transition: 1s ease-out; -moz-transition: 1s ease-out; -o-transition: 1s ease-out; transition-delay: .6s; -webkit-transition-delay: .6s; -moz-transition-delay: .6s; -o-transition-delay: .6s; -ms-transition-delay: .6s; }
.lostmemories { margin-top:10px; opacity: 0; margin-left: 341px; transition: 1s ease-out; -webkit-transition: 1s ease-out; -moz-transition: 1s ease-out; -o-transition: 1s ease-out; }
[type=checkbox]:checked ~ .lostmemories { opacity: 0.6; transition: 1s ease-out; -webkit-transition: 1s ease-out; -moz-transition: 1s ease-out; -o-transition: 1s ease-out; transition-delay: .9s; -webkit-transition-delay: .9s; -moz-transition-delay: .9s; -o-transition-delay: .9s; -ms-transition-delay: .9s; }
.shyounen { font-family: 'Roboto', sans-serif; font-size: 8px; letter-spacing:1px; color: #222; padding-top: 3px; padding-bottom: 3px;}
.shyounen a { color: #222; }
.shyounen:hover { color: #222; }
</style>
<body>
<center>
<div class="lycoris">
<div class="red"><img src="https://i.imgur.com/szVBm09.png"></div>
<div class="spider">
<div class="lily"><label for="toggle-2">+ enter</label></div> the garden.
</div>
<input type="checkbox" id="toggle-2"><div class="reincarnation">and look at the flowers for my gravestone</div>
<div class="radiata"><div class="higanbana"><p><b>Marceline</b>, is it just you and me in the wreckage of the world?
<p>That must be so confusing for a little <b>girl</b>
<p>xxx
<p><b>Marceline</b>, I can feel myself slipping away
<p>I can't remember what it made me say
<p> Мастер игры не вступит в игру, эпизод является игрой в мире Энтерос и закрыт для вступления любых других персонажей. Если в данном эпизоде будут боевые элементы, мы предпочтем официальную систему боя.
</div></div>
<div class="loss"></div>
<div class="funeral">Марселин Кёрз х Эйяфьялла</div>
<div class="longing"><a title="#here are some tags #and more tags #and more">Эридий | Соларис | 2920</a></div>
<div class="lostmemories"><img src="https://i.imgur.com/GQji3WV.png"></div>
</div>
[/html]
Отредактировано Эйяфьялла (07.12.21 20:37:15)