Код:
<!--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>
