[html]
<style type="text/css">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
* {box-sizing: border-box}
/* Set height of body and the document to 100% */
body, html {
width: auto;
height: auto;
margin: 0px;
}
div {
font-family: Courier New;
}
/* Style tab links */
.infogretta {
color: #dbdbdb;
text-align: center;
letter-spacing: 4px;
}
.infoyut {
color: #dbdbdb;
text-align: center;
letter-spacing: 4px;
}
.infomitzi {
color: #dbdbdb;
text-align: center;
letter-spacing: 4px;
}
.inforeinard {
color: #dbdbdb;
text-align: center;
letter-spacing: 4px;
}
.infoname1 {
color: #dbdbdb;
text-align: center;
letter-spacing: 4px;
}
.infoname2 {
color: #dbdbdb;
text-align: center;
letter-spacing: 4px;
}
.infoname3 {
color: #dbdbdb;
text-align: center;
letter-spacing: 4px;
}
.opisanie {
margin-left: 30px;
margin-right: 40px;
color: white;
text-align: justify;
}
.attacksgretta {
margin-left: 30px;
margin-right: 40px;
color: #dbdbdb;
text-align: center;
font-size: 9px;
letter-spacing: 1.5px;
}
.attacksyut {
margin-left: 30px;
margin-right: 40px;
color: #dbdbdb;
text-align: center;
font-size: 9px;
letter-spacing: 1.5px;
}
.attacksmitzi {
margin-left: 30px;
margin-right: 40px;
color: #dbdbdb;
text-align: center;
font-size: 9px;
letter-spacing: 1.5px;
}
.attacksreinard {
margin-left: 30px;
margin-right: 40px;
color: #dbdbdb;
text-align: center;
font-size: 9px;
letter-spacing: 1.5px;
}
.attacksname1 {
margin-left: 30px;
margin-right: 40px;
color: #dbdbdb;
text-align: center;
font-size: 9px;
letter-spacing: 1.5px;
}
.attacksname2 {
margin-left: 30px;
margin-right: 40px;
color: #dbdbdb;
text-align: center;
font-size: 9px;
letter-spacing: 1.5px;
}
.attacksname3 {
margin-left: 30px;
margin-right: 40px;
color: #dbdbdb;
text-align: center;
font-size: 9px;
letter-spacing: 1.5px;
}
.tablink {
background-color: #d58c57;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 10px;
font-size: 12px;
width: 14.28%;
}
/*наведение на кнопку (фон) */
.tablink:hover {
background-color: #2a73a8;
}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
color: white;
display: none;
padding: 0px 0px 0px 0px;
height: 400;
}
#Gretta {background-color: #2e2e36;
color: #dbdbdb
font-size: 12.5px;
text-align: center;
}
#Yut {background-color: #311a1b;
color: #dbdbdb
font-size: 12.5px;
text-align: center;
}
#Mitzi {background-color: #22232a;
color: #dbdbdb
font-size: 12.5px;
text-align: center;
}
#Reinard {background-color: #166985;
color: #dbdbdb
font-size: 12.5px;
text-align: center;
}
#name1 {background-color: #f4a460;
color: #dbdbdb
font-size: 12.5px;
text-align: center;
}
#name2 {background-color: #70c6c9;
color: #dbdbdb
font-size: 12.5px;
text-align: center;
}
#name3 {background-color: #778899;
color: #dbdbdb
font-size: 12.5px;
text-align: center;
}
</style>
</head>
<body>
<div width: 100%;>
<button class="tablink" onclick="openPage('Gretta', this, '#2e2e36')" id="defaultOpen">АЛИСА</button>
<button class="tablink" onclick="openPage('Yut', this, '#311a1b')">МРАК</button>
<button class="tablink" onclick="openPage('Mitzi', this, '#22232a')">МГЛА</button>
<button class="tablink" onclick="openPage('Reinard', this,'#166985')">ТЕНЬ</button>
<button class="tablink" onclick="openPage('name1', this, '#f4a460')">44</button>
<button class="tablink" onclick="openPage('name2', this, '#70c6c9')">55</button>
<button class="tablink" onclick="openPage('name3', this, '#778899')">66</button>
</div>
<div id="Gretta" class="tabcontent"; align="justify";>
<div> <img src="https://forumupload.ru/uploads/001a/83/9f/6/144916.jpg" alt=" "><img src="https://forumupload.ru/uploads/001a/83/9f/6/844003.jpg" alt=" ">
<p> <i>тренер ~ 18 лет ~ Джото ~ Голденрод Сити</i> </p>
<p> </p>
<p><div class="opisanie">описание</div></p>
<p><div class="attacksgretta">команда</b></div></p>
</div></div>
<div id="Yut" class="tabcontent" align="justify";>
<div> <img src="https://forumupload.ru/uploads/001a/83/9f/6/462372.jpg" alt=" "><img src="https://forumupload.ru/uploads/001a/83/9f/6/135569.jpg" alt=" ">
<p> <i>хондор ~ М ~ темный, огненный ~ 10 ~ предмета нет</i> </p>
<p> </p>
<p><div class="opisanie"> описание</div></p>
<p><div class="attacksyut"> ВОЙ ~ УГЛИ ~ ЗЛОБНЫЙ ВЗГЛЯД ~ СМОГ ~ <b>ВСПЫШКА ОГНЯ</b></div></p>
</div></div>
<div id="Mitzi" class="tabcontent" align="justify";>
<div> <img src="https://forumupload.ru/uploads/001a/83/9f/6/137471.png" alt=" "><img src="https://forumupload.ru/uploads/001a/83/9f/6/318388.png" alt=" ">
<p><div class="infomitzi" title="Это семя пронизано жизнью, увеличивающей силу атаки травяного типа на 20% (+1 в дайсах).
"><i>хондор ~ Ж ~ темный, огненный ~ 5 ~ предмета нет</i></div> </p>
<p> </p>
<p><div class="opisanie">описание</div></p>
<p><div class="attacksmitzi"> SLAM ~ MAGICAL LEAF ~ LEAF TORNADO ~ MEGA DRAIN ~ <b>OVERGROW</b></div></p>
</div></div>
<div id="Reinard" class="tabcontent" align="justify";>
<div> <img src="http://s9.uploads.ru/iIRXJ.jpg" alt=" ">
<p><div class="inforeinard"><i>Reinard ~ male ~ dragon ~ 9 ~ rocky helmet</i></div> </p>
<p> </p>
<p><div class="opisanie">текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</div></p>
<p><div class="attacksreinard"> IRON TAIL ~ HONE CLAWS ~ SCRATCH ~ BITE ~ <b>ROUGH SKIN </b></div></p>
</div></div>
<div id="name1" class="tabcontent" align="justify";>
<div> <img src="картинка" alt=" ">
<p><div class="infoname1"><i>name1 ~ gender ~ type ~ level ~ item</i></div> </p>
<p> </p>
<p><div class="opisanie">текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</div></p>
<p><div class="attacksname1"> АТАКА ~ АТАКА ~ АТАКА ~ АТАКА ~ <b>СПОСОБНОСТЬ</b></div></p>
</div></div>
<div id="name2" class="tabcontent" align="justify";>
<div> <img src="картинка" alt=" ">
<p><div class="infoname2"><i>name1 ~ gender ~ type ~ level ~ item</i></div> </p>
<p> </p>
<p><div class="opisanie">текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</div></p>
<p><div class="attacksname2"> АТАКА ~ АТАКА ~ АТАКА ~ АТАКА ~ <b>СПОСОБНОСТЬ</b></div></p>
</div></div>
<div id="name3" class="tabcontent" align="justify";>
<div> <img src="картинка" alt=" ">
<p><div class="infoname3"><i>name1 ~ gender ~ type ~ level ~ item</i></div> </p>
<p> </p>
<p><div class="opisanie">текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</div></p>
<p><div class="attacksname3"> АТАКА ~ АТАКА ~ АТАКА ~ АТАКА ~ <b>СПОСОБНОСТЬ</b></div></p>
</div></div>
<script>
function openPage(pageName,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(pageName).style.display = "block";
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</body>
[/html]
Отредактировано Fox (2020-08-19 22:03:57)
