темки

Страница: 1

Сообщений 1 страница 3 из 3

Поделиться12020-04-29 18:35:11

Автор: piter
Администратор
плашка:

королева единорогов
мечтай со мной
лз:
Кристина Лейн, 19/25 y.o., fairy
прогуливаясь по улицам Ла Сангре, я ищу новых приключений на свою бедовую головушку, в свободное время люблю добавить "перца" в скучные будни одного вампира, но все равно не представляю свою жизнь без него.
Сообщений: 28
Уважение: +0
баксы: деньги: 1820
посты: посты: 003

Код:

<!--HTML--> 


	<div class="bands"><div class="main1"><div class="tabal">

	<!------------------------------------ названия банд ------------------------------------>

	<div class="tablinks" onclick="openTab(event, 'sec1')" id="defaultOpen">банда 1</div>	
	<div class="tablinks" onclick="openTab(event, 'sec2')">банда 2</div>
	<div class="tablinks" onclick="openTab(event, 'sec3')">банда 3</div>
	<div class="tablinks" onclick="openTab(event, 'sec4')">банда 4</div>
	<div class="tablinks" onclick="openTab(event, 'sec5')">банда 5</div></div>



	<!------------------------------------ вкладка 1 ------------------------------------>

	<article class="tabcontent" id="sec1"><div class="char">

	<!-- банда 1 - маленькие окошки - заменить только ссылку на аватар 100х100 -->

<input id="tab1" type="radio" name="tabs"><label for="tab1"><img src="http://placehold.it/100"/></label>

<input id="tab2" type="radio" name="tabs"><label for="tab2"><img src="http://placehold.it/100"/></label>

<input id="tab3" type="radio" name="tabs"><label for="tab3"><img src="http://placehold.it/100"/></label>

 <input id="tab4" type="radio" name="tabs"><label for="tab4"><img src="http://placehold.it/100"/></label>

<input id="tab5" type="radio" name="tabs"><label for="tab5"><img src="http://placehold.it/100"/></label>

<input id="tab6" type="radio" name="tabs"><label for="tab6""><img src="http://placehold.it/100"/></label>

<input id="tab7" type="radio" name="tabs"><label for="tab7"><img src="http://placehold.it/100"/></label>

<input id="tab8" type="radio" name="tabs"><label for="tab8"><img src="http://placehold.it/100"/></label>

<input id="tab9" type="radio" name="tabs"><label for="tab9"><img src="http://placehold.it/100"/></label>

<input id="tab10" type="radio" name="tabs"><label for="tab10"><img src="http://placehold.it/100"/></label>

<input id="tab11" type="radio" name="tabs"><label for="tab11"><img src="http://placehold.it/100"/></label>

<input id="tab12" type="radio" name="tabs"><label for="tab12"><img src="http://placehold.it/100"/></label><br>



	<!------------------------------------ описание членов 1 банды ------------------------------------>


	<!-- 1 -->   <section id="content1"> <div class="char_text">  

<!-- банда -->
<char_band>название банды</char_band>
<!-- аватар -->
<char_pic><img src="http://placehold.it/180x130"/></char_pic>
<!-- имя -->
<char_name>name surname1 </char_name>
<!-- гифы -->
<char_gif1><img src="http://placehold.it/177x35"/> <span>способность коротко</span> </char_gif1>
<char_gif2><img src="http://placehold.it/169x35"/> <span>способность коротко</span></char_gif2>
<!-- описание отношений -->
<char_rel>за собой процесс внедрения и модернизации новых предложений. идейные соображения высшего порядка, а также сложившаяся структура организации влечет за собой процесс внедрения и модернизации модели развития. не следует, однако забывать, что реализация намеченных плановых заданий влечет за собой процесс внедрения и модернизации системы обучения кадров, соответствует насущным потребностям. за собой процесс внедрения и модернизации новых предложений. идейные соображения высшего порядка, а также сложившаяся структура организации влечет за собой процесс внедрения и модернизации модели развития. не следует, однако забывать, что реализация намеченных плановых заданий влечет за собой процесс внедрения и модернизации системы обучения кадров, соответствует насущным потребностям.</char_rel>


	<!-- 2 -->   </div></section><section id="content2"><div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 3 --> </div></section><section id="content3"><div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 4 --> </div></section><section id="content4"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 5 --> </div></section><section id="content5"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 6 -->  </div></section> <section id="content6"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 7 -->  </div></section><section id="content7"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 8 -->  </div></section> <section id="content8"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 9 --></div></section> <section id="content9"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 10 -->  </div></section> <section id="content10"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 11 --> </div></section> <section id="content11"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 12 --></div></section> <section id="content12"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

</div></section></main></div></article>
	
	<!-- конец вкладки 1 -->




	<!------------------------------------ вкладка 2 ------------------------------------>

	<article class="tabcontent" id="sec2"><div class="char">

	<!-- банда 1 - маленькие окошки - заменить только ссылку на аватар 100х100 -->

<input id="tab13" type="radio" name="tabs"><label for="tab13"><img src="http://placehold.it/100"/></label>

<input id="tab14" type="radio" name="tabs"><label for="tab14"><img src="http://placehold.it/100"/></label>

<input id="tab15" type="radio" name="tabs"><label for="tab15"><img src="http://placehold.it/100"/></label>

 <input id="tab16" type="radio" name="tabs"><label for="tab16"><img src="http://placehold.it/100"/></label>

<input id="tab17" type="radio" name="tabs"><label for="tab17"><img src="http://placehold.it/100"/></label>

<input id="tab18" type="radio" name="tabs"><label for="tab18""><img src="http://placehold.it/100"/></label>

<input id="tab19" type="radio" name="tabs"><label for="tab19"><img src="http://placehold.it/100"/></label>

<input id="tab20" type="radio" name="tabs"><label for="tab20"><img src="http://placehold.it/100"/></label>

<input id="tab21" type="radio" name="tabs"><label for="tab21"><img src="http://placehold.it/100"/></label>

<input id="tab22" type="radio" name="tabs"><label for="tab22"><img src="http://placehold.it/100"/></label>

<input id="tab23" type="radio" name="tabs"><label for="tab23"><img src="http://placehold.it/100"/></label>

<input id="tab24" type="radio" name="tabs"><label for="tab24"><img src="http://placehold.it/100"/></label>


	<!------------------------------------ описание членов 1 банды ------------------------------------>

	<!-- 1 --> <section id="content13"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 2 --> </div></section><section id="content14"><div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 3 --> </div></section> <section id="content15"><div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 4 --></div></section> <section id="content16"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 5 --></div></section> <section id="content17"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 6 --></div></section> <section id="content18"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 7 --></div></section> <section id="content19"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 8 --></div></section> <section id="content20"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 9 --></div></section> <section id="content21"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 10 --></div></section> <section id="content22"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 11 --></div></section> <section id="content23"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 12 --></div></section> <section id="content24"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

</div></section></main></div></article>
	
	<!-- конец вкладки 2 -->

	



	<!------------------------------------ вкладка 3 ------------------------------------>
	<article class="tabcontent" id="sec3"><div class="char">

	<!-- банда 1 - маленькие окошки - заменить только ссылку на аватар 100х100 -->

<input id="tab25" type="radio" name="tabs"><label for="tab25"><img src="http://placehold.it/100"/></label>

<input id="tab26" type="radio" name="tabs"><label for="tab26"><img src="http://placehold.it/100"/></label>

<input id="tab27" type="radio" name="tabs"><label for="tab27"><img src="http://placehold.it/100"/></label>

 <input id="tab28" type="radio" name="tabs"><label for="tab28"><img src="http://placehold.it/100"/></label>

<input id="tab29" type="radio" name="tabs"><label for="tab29"><img src="http://placehold.it/100"/></label>

<input id="tab30" type="radio" name="tabs"><label for="tab30""><img src="http://placehold.it/100"/></label>

<input id="tab31" type="radio" name="tabs"><label for="tab31"><img src="http://placehold.it/100"/></label>

<input id="tab32" type="radio" name="tabs"><label for="tab32"><img src="http://placehold.it/100"/></label>

<input id="tab33" type="radio" name="tabs"><label for="tab33"><img src="http://placehold.it/100"/></label>

<input id="tab34" type="radio" name="tabs"><label for="tab34"><img src="http://placehold.it/100"/></label>

<input id="tab35" type="radio" name="tabs"><label for="tab35"><img src="http://placehold.it/100"/></label>

<input id="tab36" type="radio" name="tabs"><label for="tab36"><img src="http://placehold.it/100"/></label>


	<!------------------------------------ описание членов 3 банды ------------------------------------>

	<!-- 1 --> <section id="content25"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 2 --> </div></section><section id="content26"><div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 3 --> </div></section> <section id="content27"><div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 4 --></div></section> <section id="content28"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 5 --></div></section> <section id="content29"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 6 --></div></section> <section id="content30"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 7 --></div></section> <section id="content31"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 8 --></div></section> <section id="content32"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 9 --></div></section> <section id="content33"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 10 --></div></section> <section id="content34"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 11 --></div></section> <section id="content35"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 12 --></div></section> <section id="content36"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

</div></section></main></div></article>
	
	<!-- конец вкладки 3 -->




	<!------------------------------------ вкладка 4 ------------------------------------>
	<article class="tabcontent" id="sec4"><div class="char">

	<!-- банда 1 - маленькие окошки - заменить только ссылку на аватар 100х100 -->

<input id="tab37" type="radio" name="tabs"><label for="tab37"><img src="http://placehold.it/100"/></label>

<input id="tab38" type="radio" name="tabs"><label for="tab38"><img src="http://placehold.it/100"/></label>

<input id="tab39" type="radio" name="tabs"><label for="tab39"><img src="http://placehold.it/100"/></label>

 <input id="tab40" type="radio" name="tabs"><label for="tab40"><img src="http://placehold.it/100"/></label>

<input id="tab41" type="radio" name="tabs"><label for="tab41"><img src="http://placehold.it/100"/></label>

<input id="tab42" type="radio" name="tabs"><label for="tab42""><img src="http://placehold.it/100"/></label>

<input id="tab43" type="radio" name="tabs"><label for="tab43"><img src="http://placehold.it/100"/></label>

<input id="tab44" type="radio" name="tabs"><label for="tab44"><img src="http://placehold.it/100"/></label>

<input id="tab45" type="radio" name="tabs"><label for="tab45"><img src="http://placehold.it/100"/></label>

<input id="tab46" type="radio" name="tabs"><label for="tab46"><img src="http://placehold.it/100"/></label>

<input id="tab47" type="radio" name="tabs"><label for="tab47"><img src="http://placehold.it/100"/></label>

<input id="tab48" type="radio" name="tabs"><label for="tab48"><img src="http://placehold.it/100"/></label>


	<!------------------------------------ описание членов 4 банды ------------------------------------>

	<!-- 1 --> <section id="content37"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 2 --> </div></section><section id="content38"><div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 3 --> </div></section> <section id="content39"><div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 4 --></div></section> <section id="content40"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 5 --></div></section> <section id="content41"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 6 --></div></section> <section id="content42"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 7 --></div></section> <section id="content43"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 8 --></div></section> <section id="content44"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 9 --></div></section> <section id="content45"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 10 --></div></section> <section id="content46"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 11 --></div></section> <section id="content47"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 12 --></div></section> <section id="content48"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

</div></section></main></div></article>
	
	<!-- конец вкладки 4 -->

	<!------------------------------------ вкладка 5 ------------------------------------>

	<article class="tabcontent" id="sec5"><div class="char">

	<!-- банда 1 - маленькие окошки - заменить только ссылку на аватар 100х100 -->

<input id="tab49" type="radio" name="tabs"><label for="tab49"><img src="http://placehold.it/100"/></label>

<input id="tab50" type="radio" name="tabs"><label for="tab50"><img src="http://placehold.it/100"/></label>

<input id="tab51" type="radio" name="tabs"><label for="tab51"><img src="http://placehold.it/100"/></label>

 <input id="tab52" type="radio" name="tabs"><label for="tab52"><img src="http://placehold.it/100"/></label>

<input id="tab53" type="radio" name="tabs"><label for="tab53"><img src="http://placehold.it/100"/></label>

<input id="tab54" type="radio" name="tabs"><label for="tab54""><img src="http://placehold.it/100"/></label>

<input id="tab55" type="radio" name="tabs"><label for="tab55"><img src="http://placehold.it/100"/></label>

<input id="tab56" type="radio" name="tabs"><label for="tab56"><img src="http://placehold.it/100"/></label>

<input id="tab57" type="radio" name="tabs"><label for="tab57"><img src="http://placehold.it/100"/></label>

<input id="tab58" type="radio" name="tabs"><label for="tab58"><img src="http://placehold.it/100"/></label>

<input id="tab59" type="radio" name="tabs"><label for="tab59"><img src="http://placehold.it/100"/></label>

<input id="tab60" type="radio" name="tabs"><label for="tab60"><img src="http://placehold.it/100"/></label><br>



	<!------------------------------------ описание членов 5 банды ------------------------------------>


	<!-- 1 -->   <section id="content49"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 2 -->   </div></section><section id="content50"><div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 3 --> </div></section><section id="content51"><div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 4 --> </div></section><section id="content52"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 5 --> </div></section><section id="content53"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 6 -->  </div></section> <section id="content54"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 7 -->  </div></section><section id="content55"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 8 -->  </div></section> <section id="content56"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 9 --></div></section> <section id="content57"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 10 -->  </div></section> <section id="content58"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 11 --> </div></section> <section id="content59"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

	<!-- 12 --></div></section> <section id="content60"> <div class="char_text">  

    <!-- добавь код вместо этой строчки -->

</div></section></main></div></article>
	
	<!-- конец вкладки 5 -->

	<!------------------------------------ не трогать ------------------------------------>

</div></div>

<script>
document.getElementById("defaultOpen").click();

function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";}
</script>
<link href="https://fonts.googleapis.com/css2?family=Jura:wght@600&display=swap" rel="stylesheet">
<style>
.bands  {cursor: crosshair}
/* первая банда */
.char {    width: 550px;
    height: 219px;
    overflow: auto;
    margin: 29px 77px;
    line-height: 46px;
text-align:left
}
.char input {  display: none; } 
.char label{       width: 100px;
    height: 100px;
    display: inline-block;
    position: relative;
    margin: 0px 15px !important;
}
.char label img{width:100px;height:100px;}
.char label:before{       content: attr(name);    position: absolute;    width: 100px;    height: 100px;    top: 5px;    left: 5px;    background: rgb(32 70 99 / 72%);    font: 10px calibri;    line-height: 100px;    text-transform: uppercase;    font-weight: bold;    opacity: 0;    transition: 0.3s ease;    margin: -5px -5px;}
.char label:hover:before{    opacity:1;}
#tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4, #tab5:checked ~ #content5, #tab6:checked ~ #content6, #tab7:checked ~ #content7, #tab8:checked ~ #content8, #tab9:checked ~ #content9, #tab10:checked ~ #content10, #tab11:checked ~ #content11, #tab12:checked ~ #content12, #tab13:checked ~ #content13, #tab14:checked ~ #content14, #tab15:checked ~ #content15, #tab16:checked ~ #content16, #tab17:checked ~ #content17, #tab18:checked ~ #content18, #tab19:checked ~ #content19, #tab20:checked ~ #content20, #tab21:checked ~ #content21, #tab22:checked ~ #content22, #tab23:checked ~ #content23, #tab24:checked ~ #content24, #tab25:checked ~ #content25, #tab26:checked ~ #content26, #tab27:checked ~ #content27, #tab28:checked ~ #content28, #tab29:checked ~ #content29, #tab30:checked ~ #content30, #tab31:checked ~ #content31, #tab32:checked ~ #content32, #tab33:checked ~ #content33, #tab34:checked ~ #content34, #tab35:checked ~ #content35, #tab36:checked ~ #content36, #tab37:checked ~ #content37, #tab38:checked ~ #content38, #tab39:checked ~ #content39, #tab40:checked ~ #content40, #tab41:checked ~ #content41, #tab42:checked ~ #content42, #tab43:checked ~ #content43, #tab44:checked ~ #content44, #tab45:checked ~ #content45, #tab46:checked ~ #content46, #tab47:checked ~ #content47, #tab48:checked ~ #content48, #tab49:checked ~ #content49, #tab50:checked ~ #content50, #tab51:checked ~ #content51, #tab52:checked ~ #content52, #tab53:checked ~ #content53, #tab54:checked ~ #content54, #tab55:checked ~ #content55, #tab56:checked ~ #content56, #tab57:checked ~ #content57, #tab58:checked ~ #content58, #tab59:checked ~ #content59, #tab60:checked ~ #content60, #tab61:checked ~ #content61, #tab62:checked ~ #content62, #tab63:checked ~ #content63, #tab64:checked ~ #content64, #tab65:checked ~ #content65, #tab66:checked ~ #content66, #tab67:checked ~ #content67, #tab68:checked ~ #content68, #tab69:checked ~ #content69, #tab70:checked ~ #content70, #tab71:checked ~ #content71, #tab72:checked ~ #content72, #tab73:checked ~ #content73, #tab74:checked ~ #content74, #tab75:checked ~ #content75, #tab76:checked ~ #content76, #tab77:checked ~ #content77, #tab78:checked ~ #content78, #tab79:checked ~ #content79, #tab80:checked ~ #content80 { display: block; }
.char section{    display:none;    width:fit-content;    margin:20px auto 0;}
.char_text {
    display: inline-block;
    vertical-align: top;
    width: 645px;
    height: 140px;
    position: absolute;
    margin: -588px -325px !important;
}

.char_text char_band {position: absolute;
    margin: -30px 209px;
    font-size: 10px;
    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;
    text-align: left;
}
.char_text char_pic {  margin: 13px 4px;    position: absolute;}
.char_text char_pic img {width: 180px;    height: 130px;}
.char_text char_name {position: absolute;
    margin: -36px 341px;
    font-size: 14px;
    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;
    width: 180px;
    text-align-last: right;
    text-transform: lowercase;
}
.char_text char_gif1 {position: absolute;
    margin: 10px 195px;}
.char_text char_gif2 {position: absolute;
    margin: 10px 382px;}

.char_text char_gif1 span {opacity: 0;
    background-color: #000000bf;
    width: 177px;
    height: 22px;
    position: absolute;
    margin: 0px -177px!important;
    text-align: center;
    text-align-last: center;
    color: #cccccc;
    font-size: 10px;
    padding-bottom: 13px;
    font-family: jura;
}
.char_text char_gif1:hover span {opacity:1}
.char_text char_gif2 span {    opacity: 0;
    background-color: #000000bf;
    width: 169px;
    height: 22px;
    position: absolute;
    margin: 0px -169px!important;
    text-align: center;
    text-align-last: center;
    color: #cccccc;
    font-size: 10px;
    padding-bottom: 13px;
    font-family: jura;
}
.char_text char_gif2:hover span {opacity:1}
.char_text char_rel {position: absolute; text-align: justify;
    margin: 60px 203px;
    line-height: 13px;
    font-size: 11px;
    font-family: jura;
    color: #cccccc;
    width: 428px;
    height: 79px;
    overflow: auto;
    padding-left: 8px;
    direction: rtl;
}


/* основа слайдера  */
.bands {    background: url(https://forumstatic.ru/files/0019/be/2f/76336.png) no-repeat;
    width: 694px;
    height: 547px;
    margin: auto;
}

.main1 {
    margin: 183px 0px !important;
    position: absolute;
}

.main1 h1 {font-size:1.8rem;margin-bottom: 2rem}

/* кнопки вкладок */

.tabal {
    width: 480px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2px 107px;
}
.tablinks {
    width: calc(100% / 5);
    text-align: center;
    cursor: pointer;
    padding: 1rem 0;
    border: 0;
    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;
}
.tablinks:hover {color: #d6e2ea !important;}
.tablinks:focus {outline:0;}
.tab div.active {    color: #7f7f7f !important;}

.tabcontent {
    display: none;
    animation: fadeEffect 1s;
}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

</style>

Цитировать Сообщение 1

Поделиться22020-08-11 11:15:02

Автор: piter
Администратор
плашка:

королева единорогов
мечтай со мной
лз:
Кристина Лейн, 19/25 y.o., fairy
прогуливаясь по улицам Ла Сангре, я ищу новых приключений на свою бедовую головушку, в свободное время люблю добавить "перца" в скучные будни одного вампира, но все равно не представляю свою жизнь без него.
Сообщений: 28
Уважение: +0
баксы: деньги: 1820
посты: посты: 003

Код:

<!-- банда -->
<char_band>название банды</char_band>
<!-- аватар -->
<char_pic><img src="http://placehold.it/180x130"/></char_pic>
<!-- имя -->
<char_name>name surname</char_name>
<!-- гифы -->
<char_gif1><img src="http://placehold.it/177x35"/> <span>способность коротко</span> </char_gif1>
<char_gif2><img src="http://placehold.it/169x35"/> <span>способность коротко</span></char_gif2>
<!-- описание отношений -->
<char_rel>описание</char_rel>

Цитировать Сообщение 2

Поделиться32020-09-04 13:19:18

Автор: piter
Администратор
плашка:

королева единорогов
мечтай со мной
лз:
Кристина Лейн, 19/25 y.o., fairy
прогуливаясь по улицам Ла Сангре, я ищу новых приключений на свою бедовую головушку, в свободное время люблю добавить "перца" в скучные будни одного вампира, но все равно не представляю свою жизнь без него.
Сообщений: 28
Уважение: +0
баксы: деньги: 1820
посты: посты: 003

Код:

<!--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(https://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>