[html]<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<div id="googleme">
<div class="gmtopcircle1"></div>
<div class="gmtopcircle2"></div>
<div class="gmtopcircle3"></div>
<div class="gmtopbar"><div class="gmarrowleft"><i class="fas fa-arrow-left"></i></div><div class="gmarrowright" style="border:none"><i class="fas fa-arrow-right"></i></div><div class="gmreload"><i class="fas fa-redo"></i></div><div class="gmthreedot"><i class="fas fa-ellipsis-v"></i></div><div class="gmtbsearch">
  <div class="gmtopstar"><i class="far fa-star"></i></div>
</div></div>
<div class="gmoutbox"></div>
<input type="radio" id="image" name="google" checked>
<label for="image">Main</label>
<input type="radio" id="about" name="google">
<label for="about">Story</label>
<input type="radio" id="friends" name="google">
<label for="friends">Players</label>
<input type="radio" id="lovers" name="google">
<label for="lovers">Quests</label>
<input type="radio" id="enemies" name="google">
<label for="enemies">Need you</label>

<div class="gmsearch">https://vortex.rusff.me/DC/main</div>
<div class="gmsearch1">https://vortex.rusff.me/DC/story</div>
<div class="gmsearch2">https://vortex.rusff.me/DC/players</div>
<div class="gmsearch3">https://vortex.rusff.me/DC/quests</div>
<div class="gmsearch4">https://vortex.rusff.me/DC/need_you</div>

<div class="gmmain1">

<div class="gmpicture" style="background-image: url(https://i.ibb.co/5s1ZCzw/image.jpg)"></div>

<div class="gmmainname">DC</div>

<div class="gmhovover"></div>
<div class="gmdetailing"><span class="gmsi"><i class="fas fa-search"></i></span> Основная история</div>
<div class="gmdetailing"><span class="gmsi"><i class="fas fa-search"></i></span> Альтернатива</div>
<div class="gmdetailing"><span class="gmsi"><i class="fas fa-search"></i></span> Личные ветки</div>

</div>

<div class="gmgif" style="background-image: url(https://i.ibb.co/SwB7wBY/100.jpg)"></div>
<div class="gmmain2">
<title>СЮЖЕТ</title>
<textscroll>

Текст сюжета<p></p>

  <h1>ПЕРВЫЙ АКТ</h1>
<h1>I.</h1>Текст первой части<br><br>

</textscroll>
</div>
<div class="gmmain3">
<title>персонажи</title><br><br>
<textscroll>

○ <a href="https://vortex.rusff.me/profile.php?id=3">bruce wayne</a> <br>
○ <a href="https://vortex.rusff.me/profile.php?id=38">carmine falcone </a> <br>
○ <a href="https://vortex.rusff.me/profile.php?id=26">poison ivy</a> <br>

<p></p>

  <h1>связь с кастом: tg</h1>
@Too_Bitter Bruce Wayne<br>

</textscroll>
</div>
<div class="gmmain4">
<title>эпизоды</title>
<textscroll>
<p></p>
  <h1>сюжетные эпизоды</h1>
<a href="https://vortex.rusff.me/viewtopic.php?id=131#p4611"> I won't dance </a> Carmine Falcone, Bruce Wayne/2018 год, начало осени<br>

<p></p>

</textscroll>
</div>
<div class="gmmain5">
<title>нужны в игру</title>
<textscroll>
○ <a href="https://vortex.rusff.me/viewtopic.php?pid=3471#p3471">alfred pennyworth</a> <br>
○ <a href="https://vortex.rusff.me/viewtopic.php?pid=822#p822"> joker</a> <br>
○ <a href="https://vortex.rusff.me/viewtopic.php?pid=4057#p4057">vicki vale</a> <br>

<p></p>

</textscroll>
</div>
</div>
<style>
#googleme { background: #e7eaed; height: 450px; width: 550px; position: relative; margin: 20px auto 0px; border-radius: 10px; border: 1px solid #ddd; overflow: hidden;z-index: 3; }
.gmtopbar { position: absolute; top: 45px; height: 40px; background: #fff; width: 550px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.gmtbsearch { position: absolute; background: #eaeced; color: #7779; padding: 10px 20px; width: 375px; height: 10px; top: 4px; left: 105px; border-radius: 20px; border: 1px solid #ddd; font-family: arial; font-size: 12px; line-height: 100%; }
.gmtopcircle1 { height: 12px; width: 12px; background: #fc625d; position: absolute; border: 0.5px solid #bbb; border-radius: 100%; top: 16px; left: 15px; }
.gmtopcircle2 { height: 12px; width: 12px; background: #fec041; position: absolute; border: 0.5px solid #bbb; border-radius: 100%; top: 16px; left: 32px; }
.gmtopcircle3 { height: 12px; width: 12px; background: #35cc4b; position: absolute; border: 0.5px solid #bbb; border-radius: 100%; top: 16px; left: 49px; }
.gmtopstar { float: right; margin-right: -10px; margin-top: -1px; }
.gmarrowleft { color: #babcbe; font-size: 20px; position: absolute; top: 10px; left: 10px; }
.gmarrowright { color: #babcbe; font-size: 20px; position: absolute; top: 10px; left: 45px; }
.gmreload { color: #babcbe; font-size: 18px; position: absolute; top: 11px; left: 75px; }
.gmthreedot { color: #babcbe; font-size: 20px; position: absolute; top: 10px; right: 11px; }
#googleme input { display: none; }
#googleme label { position: relative; background: #e7eaed; border: none; height: 10px; width: 60px; left: 80px; display: inline-block; top: 15px; padding: 10px; font-family: arial; color: #5f6368; font-size: 12px; text-align: center; line-height: 100%; border-radius: 5px 5px 0px 0px; margin-right: -3px;}
#googleme label:after { content: ""; display: block; position: absolute; background: #bbb; height: 20px; width: 1px; right: 0px; top: 5px; }
#image:checked+label, #about:checked+label, #friends:checked+label, #lovers:checked+label, #enemies:checked+label { background: #fff; border-right: none; border-left: 1px solid #fff; z-index: 1; margin-left: -4px; border-bottom: 1px solid #fff; }
#image:checked+label:after, #about:checked+label:after, #friends:checked+label:after, #lovers:checked+label:after, #enemies:checked+label:after { display: none; }
.gmsearch, .gmsearch1, .gmsearch2, .gmsearch3, .gmsearch4 { position: absolute; color: #7779; width: 200px; top: 60px; left:120px; border-radius: 20px; font-family: arial; font-size: 12px; line-height: 100%; display: none; }
#image:checked+label ~ .gmsearch { display: block; }
#about:checked+label ~ .gmsearch1 { display: block; }
#friends:checked+label ~ .gmsearch2 { display: block; }
#lovers:checked+label ~ .gmsearch3 { display: block; }
#enemies:checked+label ~ .gmsearch4 { display: block; }
.gmoutbox { border: 10px solid #fff; position: absolute; height: 343px; width: 530px; bottom: 0px; }
.gmmain1 { height: 341px; background: none; width: 528px; position: relative; top: 66px; border: 1px solid #ddd; left: 10px; overflow: hidden; opacity: 0; z-index: 1; }
#image:checked+label ~ .gmmain1 { opacity: 1; z-index: 2; }
.gmpicture { position: absolute; height: 341px; width: 528px; background-size: cover; filter: grayscale(0%); transition: 0.3s; transition-delay: 1.3s; }
.gmmain1:hover .gmpicture { filter: grayscale(100%); transition: 0.3s; transition-delay: 0s; }
.gmhovover { background: rgba(0,0,0,0.6); position: absolute; height: 341px; width: 528px; opacity: 0; transition: 0.5s; transition-delay: 1.3s; }
.gmmain1:hover .gmhovover { opacity: 1; transition: 0.5s; transition-delay: 0s; }
.gmmainname { line-height: 130%;display: block; font-family: arial; position: absolute; font-weight: 900; font-size: 50px; color: black; background: #fff; mix-blend-mode: screen; width: 508px; text-align: right; bottom: 0px; padding: 10px; text-transform: lowercase; letter-spacing: 5px; transition: 0.5s; transition-delay: 1.3s; left: 0px; border-top: 1px solid #ddd; }
.gmmain1:hover .gmmainname { left: 528px; transition: 0.5s; transition-delay: 0s; }
.gmdetailing {line-height: 130%; position: absolute; width: auto; padding: 10px; height: auto; background: #fff; top: 20px; left: -350px; outline: 1px solid #ddd; color: #777; font-family: arial; font-size: 10px; transition: 0.7s; transition-delay: 1.2s; }
.gmsi { padding-right: 5px; color: #796f00; }
.gmdetailing:nth-child(2n+1) { top: 65px; transition-delay: 1s; }
.gmdetailing:nth-child(3n-1) { top: 110px; transition-delay: 0.8s; }
.gmdetailing:nth-child(4n+1) { top: 155px; transition-delay: 0.6s; }
.gmdetailing:nth-child(5n+1) { top: 200px; transition-delay: 0.4s; }
.gmdetailing:nth-child(6n+3) { top: 245px; transition-delay: 0.2s; }
.gmdetailing:nth-child(7n-4) { top: 290px; transition-delay: 0s; }
.gmmain1:hover .gmdetailing { left: 20px; transition: 0.7s; transition-delay: 0.5s; }
.gmmain1:hover .gmdetailing:nth-child(2n+1) { transition-delay: 0.7s; }
.gmmain1:hover .gmdetailing:nth-child(3n-1) { transition-delay: 0.9s; }
.gmmain1:hover .gmdetailing:nth-child(4n+1) { transition-delay: 1.1s; }
.gmmain1:hover .gmdetailing:nth-child(5n+1) { transition-delay: 1.3s; }
.gmmain1:hover .gmdetailing:nth-child(6n+3) { transition-delay: 1.5s; }
.gmmain1:hover .gmdetailing:nth-child(7n-4) { transition-delay: 1.7s; }
.gmmain2 { height: 341px; background: #fff; width: 528px; position: relative; top: -277px; outline: 10px solid #fff; border: 1px solid #ddd; left: 10px; overflow: hidden; opacity: 0; z-index: 1; }
#about:checked ~ .gmmain2 { opacity: 1; z-index: 2; }
.gmmain3 { height: 341px; background: #fff; width: 528px; position: relative; top: -620px; outline: 10px solid #fff; border: 1px solid #ddd; left: 10px; overflow: hidden; opacity: 0; z-index: 1; }
#friends:checked ~ .gmmain3 { opacity: 1; z-index: 2; }
.gmmain4 { height: 341px; background: #fff; width: 528px; position: relative; top: -963px; outline: 10px solid #fff; border: 1px solid #ddd; left: 10px; overflow: hidden; opacity: 0; z-index: 1; }
#lovers:checked ~ .gmmain4 { opacity: 1; z-index: 2; }
.gmmain5 { height: 341px; background: #fff; width: 528px; position: relative; top: -1306px; outline: 10px solid #fff; border: 1px solid #ddd; left: 10px; overflow: hidden; opacity: 0; z-index: 1; }
#enemies:checked ~ .gmmain5 { opacity: 1; z-index: 2; }
#googleme title {z-index: 1;border-bottom: 1px solid #ddd;line-height: 130%; position: absolute; top: 0px; font-family: arial; font-size: 50px; color: #5c492c; background: #fff; width: 508px; text-align: right; text-transform: lowercase; display: block; border-bottom: 1px solid #ddd; padding: 10px; letter-spacing: 5px; font-weight: 900; }
#googleme textscroll { display: block; border: 20px solid white; width: 485px; height: 220px; top: 85px; position: absolute; left: 0px; text-align: justify; font-size: 11px; font-family: arial; color: #777; overflow: auto; line-height: 160%; padding-right: 5px; }
#googleme h1 { font-family: arial; display: block; font-size: 30px; color: #5c492c; text-transform: lowercase; letter-spacing: 4px; padding: 0px; margin: 0px; margin-bottom: 15px; margin-top: 5px; font-weight: 600; }
#googleme b { font-size: 13px; color: #e5d3db; font-weight: 500; }
#googleme textscroll i { border-bottom: 1px solid #5c492c; font-weight: 300; }
#googleme textscroll::-webkit-scrollbar { width: 1px; } #googleme textscroll::-webkit-scrollbar-track { background: none!important; border: none !important; } #googleme textscroll::-webkit-scrollbar-thumb { background: #ddd !important; border: none !important; }
.gmgif {position: absolute; height: 60px; width: 60px; background-size: cover;top: 110px; left: 30px; opacity: 0;z-index: 0; border: 1px solid #ddd; filter: grayscale(100%);border-radius: 100%;}
#about:checked ~ .gmgif, #friends:checked ~ .gmgif, #lovers:checked ~ .gmgif, #enemies:checked ~ .gmgif {opacity: 1; z-index: 3;}
</style>[/html]