Код:
<!--HTML--><link href="https://fonts.googleapis.com/css2?family=Jura:wght@600&display=swap" rel="stylesheet"> <div class="piter"><div class="head1"></div><div class="tabs"><div class="tab"><input type="radio" id="tab-1" name="tab-group-1" checked=""> <label for="tab-1" class="">ВКЛАДКА 1</label><div class="content"><div class="osn"><div class="vkladka1"> <!------------------------------------ имя ------------------------------------> <name>name surname</name> <!------------------------------------ банда картинка и название ------------------------------------> <band><img src="https://via.placeholder.com/50x50"></band><band_name>name of the band <br> _ _ _ _ _ _ _ _ _ _ _ _ _ </band_name> <!------------------------------------ картинка 1 ------------------------------------> <first_pic><img src="https://via.placeholder.com/200x140"></first_pic> <!------------------------------------ инфо короткое ------------------------------------> <info>Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать несколько абзацев более менее осмысленного текста рыбы на русском языке, а начинающему оратору отточить навык публичных выступлений в домашних условиях. При создании генератора мы использовали небезизвестный универсальный код речей. </info> <about>характеристики</about> <!------------------------------------ картинка 2 ------------------------------------> <second_pic><img src="https://via.placeholder.com/200x140"></second_pic> <!------------------------------------ описание характеристик ------------------------------------> <long>Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать несколько абзацев более менее осмысленного текста рыбы на русском языке, а начинающему оратору отточить навык публичных выступлений в домашних условиях. При создании генератора мы использовали небезизвестный универсальный код речей. Текст генерируется абзацами случайным образом от двух до десяти предложений в абзаце, что позволяет сделать текст более привлекательным и живым для визуально-слухового восприятия. По своей сути рыбатекст является альтернативой традиционному lorem ipsum, который вызывает у некторых людей недоумение при попытках прочитать рыбу текст. В отличии от lorem ipsum, текст рыба на русском языке наполнит любой макет непонятным смыслом и придаст неповторимый колорит советских времен.</long> <!------------------------------------ ИНВЕНТАРЬ ------------------------------------> <invent>инвентарь</invent> <div class="stuff"> <t><img src="https://via.placeholder.com/50x50" title="описание"></t> <t><img src="https://via.placeholder.com/50x50" title="описание"></t> <t><img src="https://via.placeholder.com/50x50" title="описание"></t> <t><img src="https://via.placeholder.com/50x50" title="описание"></t> <t><img src="https://via.placeholder.com/50x50" title="описание"></t> <t><img src="https://via.placeholder.com/50x50" title="описание"></t> <t><img src="https://via.placeholder.com/50x50" title="описание"></t> <t><img src="https://via.placeholder.com/50x50" title="описание"></t> <t><img src="https://via.placeholder.com/50x50" title="описание"></t> <t><img src="https://via.placeholder.com/50x50" title="описание"></t> <t><img src="https://via.placeholder.com/50x50" title="описание"></t> <t><img src="https://via.placeholder.com/50x50" title="описание"></t> </div></div></div></div></div><div class="tab"><input type="radio" id="tab-2" name="tab-group-1"> <!------------------------------------ ВКЛАДКА 2 ------------------------------------> <label for="tab-2" class="">ВЛКДАКА 2</label><div class="content"><div class="osn"> <div class="vkladka2"> <!------------------------------------ АКТИВ ------------------------------------> <title>active</title> <sto> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> </sto> <!------------------------------------ ЗАКОНЧЕННЫЕ ------------------------------------> <title>complete</title> <sto> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> </sto> <!------------------------------------ АЛЬТ ------------------------------------> <title>alternative</title> <sto> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> </sto> <!------------------------------------ ЗАКРЫТО ------------------------------------> <title>dead</title> <sto> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> [00.00.0000] <r>name surname</r> // namesurname namesurname<br> </sto> </div> </div></div></div></div></div></div> <style> .piter {cursor: crosshair} .vkladka1 {margin: -36px 0x !important; } .vkladka1 first_pic { position: absolute; margin: -20px 0px;} .vkladka1 name { font-family: jura;color: #929292 !important;text-shadow: 1px 1px 0 rgb(15, 23, 1), 0 0 5px rgb(171 171 171 / 44%);display: block;font-size: 22px; border-top: 3px solid; text-align: right; padding-right: 60px;} .vkladka1 band { position: absolute;text-align: right; margin: -19px 622px; border: 2px solid #2d5978;} .vkladka1 band_name { position: absolute; width: 200px; text-align: right; font-family: jura; color: #35688c !important; text-shadow: 1px 1px 0 rgb(15, 23, 1), 0 0 5px rgb(171 171 171 / 44%); margin: 5px 417px;} .vkladka1 info {position: absolute;width: 456px; height: 74px;overflow: auto;margin: 45px 214px;color: #cccccc;overflow: auto; padding-right: 5px;} .vkladka1 about { font-family: jura; color: #929292 !important; text-shadow: 1px 1px 0 rgb(15, 23, 1), 0 0 5px rgb(171 171 171 / 44%); display: block; font-size: 22px; border-top: 3px solid; text-align: right;margin: 127px 0px; margin-bottom: -19px;} .vkladka1 long { position: absolute; width: 460px; height: 119px; overflow: auto; margin: 21px 10px; color: #cccccc; padding-right: 5px;} .vkladka1 invent { font-family: jura; color: #929292 !important; text-shadow: 1px 1px 0 rgb(15, 23, 1), 0 0 5px rgb(171 171 171 / 44%); display: block; font-size: 16px; border-top: 3px solid; text-align: right; margin: 10px 0px; margin-bottom: 5px;} .stuff { text-align: justify; line-height: 30px; padding-right: 5px; text-align-last: center; overflow: auto; height: 55px; width: 670px;} .stuff t { border: 2px solid #2d5978; margin: 0px 3px;} .stuff t span {display: none; font-size: 10px; position: absolute; margin: 83px -52px; color: #cccccc; width: 354px; line-height: 12px; text-align: left;} .stuff t:hover span { position: absolute; display: inline-flex;} .vkladka2 { margin-left: 13px;} .vkladka2 title { font-family: jura; color: #929292 !important; text-shadow: 1px 1px 0 rgb(15, 23, 1), 0 0 5px rgb(171 171 171 / 44%); display: block; font-size: 22px; border-top: 3px solid; text-align: right;} .vkladka2 sto {overflow: auto; height: 67px; display: block; margin-bottom: 7px; padding-right: 5px; font-family: jura; color: #919191 !important;} .vkladka2 sto r {color: #729ab5 !important;} .piter { margin: auto; text-align: justify; letter-spacing: 0; background: url(http://forumstatic.ru/files/0019/be/2f/99474.png) no-repeat; width: 694px; height: 547px;} .piter .head1 { text-transform: lowercase; padding-top: 72px; text-align: center; width: 640px; cursor: pointer; border: 0;} .piter .tabs { position: relative; margin-top: -84px; width: 705px; height: 645px; overflow: hidden; text-align: right;} .piter .tab { display: inline; padding: 5px; } .piter .tab label { position: relative; font: 15px comfortaa; display: inline-block; margin: 26px 31px; font-size: 13px; letter-spacing: .03rem; font-family: jura; color: #729ab5 !important; text-shadow: 1px 1px 0 rgb(15, 23, 1), 0 0 5px rgb(7 154 251) !important;} .piter .tab [type=radio] { display: none; } .piter .content { position: absolute; top: 59px; left: -8px;right: 0px; opacity: 0; height: 555px; overflow: hidden; transform: scale(.1,.1); transition: .7s; margin-left: -10px;} .piter [type=radio]:checked ~ label {z-index: 2; font-style: normal; color: #cccccc !important;} .piter [type=radio]:checked ~ label ~ .content { z-index: 1; opacity: 1; transform: scale(1,1); } .piter .pic { width: 350px; height: 235px; background-size: cover!important; margin: 25px; } .piter .osn { margin: 25px; height: 510px;overflow: auto; text-align: justify; padding-right: 10px; font-family: arial; font-size: 11px; width: 677px;} .piter .osn::-webkit-scrollbar { width: 5px; } .piter .osn::-webkit-scrollbar-track { background: #eee; } .piter .osn::-webkit-scrollbar-thumb { background: #ddd; } .piter .osn ul { list-style: none; margin: 0; padding: 0; } .piter .osn li { margin: 0 0 -1px 0; padding: 4px; border-bottom: solid 1px #eee; text-align: left; } .piter .osn li b {text-transform: uppercase; display: block; letter-spacing: 1px; } .piter z { font: 11px/100% comfortaa; text-transform: uppercase; letter-spacing: 1px; line-height: 150%; font-weight: bold;} </style>