Код:
[html]
<center>
<div class="jhappc">
<img src="https://placehold.it/100">
<h4>NAME SURNAME ИМЯ ФАМИЛИЯ</h4>
<h6>ВОЗРАСТ</h6>
<h5><i class="fa fa-quote-left" aria-hidden="true"></i><b>- ГОРОД</b><br>
<b>- ПРОФЕССИЯ</b><br>
<b>-СЕМЕЙНОЕ ПОЛОЖЕНИЕ </b><br>
<b>- ОРИЕНТАЦИЯ</b><br>
<b>- ВНЕШНОСТЬ</b><br>
<b>- КОМАНДА</b><br>
</h5>
<div class="jhcolorborder1"></div>
<div class="jhcolorborder2"></div>
<div class="tabs">
<div class="jhatab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1" style="margin-top: -135px;" title="profile"><i class="fa fa-id-badge" aria-hidden="true"></i></label>
<div class="jhacontent">
<div class="jhacontent2">
<div class="jhapphti"><i class="fa fa-angle-double-right" aria-hidden="true"></i>
моя история</div>
<div class="jhapptf2">
Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
</div>
<div class="jhapphti"><i class="fa fa-angle-double-right" aria-hidden="true"></i>
моя биография</div>
<div class="jhapptf2">
Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
</div>
</div>
</div>
</div>
<div class="jhatab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2" style="margin-top: -60px;" title="freeform"><i class="fa fa-coffee" aria-hidden="true"></i></label>
<div class="jhacontent">
<div class="jhacontent2">
<div class="jhapphti"><i class="fa fa-angle-double-right" aria-hidden="true"></i>НАЗВАНИЕ ЭПИЗОДА </div>
<div class="jhapptf">
<b>ИМЕНА УЧАСТНИКОВ:</b> ANSWER<br>
<b>ВРЕМЯ И МЕСТО ДЕЙСТВИЯ:</b> ANSWER<br>
<b>ПОГОДНЫЕ УСЛОВИЯ:</b> ANSWER<br>
<b>СТАТУС:</b> БРОШЕН, АКТИВЕН, ЗАКОНЧЕН <br>
</div>
<div class="jhapphti"><i class="fa fa-angle-double-right" aria-hidden="true"></i>НАЗВАНИЕ ЭПИЗОДА </div>
<div class="jhapptf">
<b>ИМЕНА УЧАСТНИКОВ:</b> ANSWER<br>
<b>ВРЕМЯ И МЕСТО ДЕЙСТВИЯ:</b> ANSWER<br>
<b>ПОГОДНЫЕ УСЛОВИЯ:</b> ANSWER<br>
<b>СТАТУС:</b> БРОШЕН, АКТИВЕН, ЗАКОНЧЕН <br>
</div>
<div class="jhapphti"><i class="fa fa-angle-double-right" aria-hidden="true"></i>НАЗВАНИЕ ЭПИЗОДА </div>
<div class="jhapptf">
<b>ИМЕНА УЧАСТНИКОВ:</b> ANSWER<br>
<b>ВРЕМЯ И МЕСТО ДЕЙСТВИЯ:</b> ANSWER<br>
<b>ПОГОДНЫЕ УСЛОВИЯ:</b> ANSWER<br>
<b>СТАТУС:</b> БРОШЕН, АКТИВЕН, ЗАКОНЧЕН <br>
</div>
</div>
</div>
</div>
<div class="jhatab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3" style="margin-top: 20px;" title="shipper"><i class="fa fa-ship" aria-hidden="true"></i></label>
<div class="jhacontent">
<div class="jhacontent2">
<div class="jhapphti"><i class="fa fa-angle-double-right" aria-hidden="true"></i>
NAME SURNAME, ВОЗРАСТ</div>
<div class="jhapptf2">
Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
</div>
<div class="jhapphti"><i class="fa fa-angle-double-right" aria-hidden="true"></i>
NAME SURNAME, ВОЗРАСТ</div>
<div class="jhapptf2">
Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
</div>
<div class="jhapphti"><i class="fa fa-angle-double-right" aria-hidden="true"></i>
NAME SURNAME, ВОЗРАСТ</div>
<div class="jhapptf2">
Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
</div>
<div class="jhapphti"><i class="fa fa-angle-double-right" aria-hidden="true"></i>
NAME SURNAME, ВОЗРАСТ</div>
<div class="jhapptf2">
Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
</div>
<div class="jhapphti"><i class="fa fa-angle-double-right" aria-hidden="true"></i>
NAME SURNAME, ВОЗРАСТ</div>
<div class="jhapptf2">
Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
</div>
</div>
</div>
</div>
</div>
</div>
</center>
<link href="https://fonts.googleapis.com/css?family=Raleway:800|Montserrat:400,800|Poppins:400" rel="stylesheet">
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<style type="text/css">
.jhappcre {
font: 7px/100% raleway;
font-weight: 800;
padding: 6px;
text-transform: uppercase;
color: #757575;
margin: 0px auto;
display: block;
text-decoration: none;
}
.jhapptf2 i {
font-size: 11px!important;
color: #000!important;
}
.jhapptf2 b {
font-weight: 900!important;
font: 11px/100% montserrat!important;
color: #000!important;
}
.jhapptf2 {
border-radius: 6px;
font: 12px/100% poppins;
text-align: justify;
font-weight: 400;
padding: 12px;
color: #454545;
background: #eee9c8;
border: 1px solid #F1F1F1;
min-height: 30px!important;
margin-left: 0px;
}
::-MOZkit-SCROLLBAR {
width: 9px;
border-left: 4px solid #fff;
border-right: 4px solid #fff;
background: #E2E1E1;
}
::-MOZkit-SCROLLBAR-THUMB {
border: 2px solid #fcfcfc;
background: #E3E3E3;
}
::-webkit-scrollbar {
width: 9px;
border-left: 4px solid #fff;
border-right: 4px solid #fff;
background: #E2E1E1;
}
::-webkit-scrollbar-thumb {
border: 2px solid #fcfcfc;
background: #E3E3E3;
}
.jhacontent2 b {
font: 10px/100% raleway;
font-weight: 900;
color: #425f12;
}
.jhacontent2 {
padding: 5px;
height: 270px;
overflow: auto;
}
.jhapptf {
border-radius: 6px;
font: 7.2px/100% montserrat;
text-align: justify;
font-weight: 400;
padding: 12px;
color: #;
background: #eee9c8;
border: 1px solid #F1F1F1;
min-height: 30px!important;
margin-left: 0px;
}
.jhacontent2 i {
color: #5b7a0f;
text-shadow: 1px 1px #454545;
}
.jhapphti {
padding: 6px;
margin: 6px;
text-align: right;
letter-spacing: -1px;
font: 20px/70% montserrat;
color: #5b7a0f;
text-transform: lowercase;
text-shadow: 1px 1px #fff;
font-weight: 800;
}
.jhappooc i {
color: #F4DD51;
text-shadow: 1px 1px #79B5AC;
}
.jhappooc {
z-index: 1;
background: #454545;
padding: 6px;
color: #FFF;
text-align: left;
position: absolute;
left: 0px;
bottom: 0px;
width: 97.2%;
font: 9px/100% raleway;
font-weight: 800;
text-transform: uppercase;
}
.jhcolorborder1 {
height: 4px;
background: #56700f;
border-right: 140px solid #e49430;
margin-top: 0px;
margin-bottom: 5px;
}
.jhcolorborder2 {
height: 4px;
background: #56700f;
border-left: 140px solid #e49430;
margin-top: 105px;
}
.jhappc h5 i {
float: left;
padding: 5px;
margin: 3px;
font-size: 12px;
color: #56700f;
text-shadow: 1px 1px #e49430;
}
.jhappc h5 {
font: 8.4px/100% poppins;
text-transform: uppercase;
float: left;
text-align: justify;
border-right: 1px dotted #56700f;
width: 130px;
padding: 10px;
overflow: hidden;
color: #484848;
height: 89px;
position: absolute;
top: 15px;
}
.jhappc h4 {
color: #537512;
text-shadow: 1px 1px #f6d27f;
font: 24px/100% montserrat;
font-weight: 800;
overflow: hidden;
text-transform: uppercase;
letter-spacing: -1px;
text-align: right;
padding: 20px;
float: right;
width: 240px;
height: 75px;
}
.jhappc h6 {
color: #537512;
text-shadow: 1px 1px #f6d27f;
font: 15px/100% montserrat;
font-weight: 800;
overflow: hidden;
text-transform: uppercase;
letter-spacing: -1px;
text-align: right;
padding: 10px;
margin-top: -55px;
margin-right:105px;
float: right;
width: 240px;
height: 35px;
}
.jhappc img {
width: 70px;
height: 70px;
border-radius: 100%;
float: right;
margin: 10px;
border: 5px solid #537512;
box-shadow: 2px 2px #f6d27f;
}
.jhappc {
overflow: hidden;
padding: 13px;
border: #dd8b29 solid 10px;
border-left: #4f6b04 solid 3px;
border-right: #4f6b04 solid 3px;
box-shadow: inset 0 0 20px 10px #f6d27f;
border-radius: 5px;
width: 560px;
height: 500px;
background: #e6e3c7;
position: relative;
}
.tabs {
padding: 1px;
position: relative;
width: 530px;
height: 400px;
margin-top: 200px;
}
.jhatab {
float: left;
}
.jhatab label {
color: #eeebd2;
text-shadow: 1px 1px #3e5d04;
background: #eb8f2c;
line-height: 100%;
font-size: 18px;
border-radius: 100%;
padding: 10px;
border: 1px solid #DFDFDF;
width: 20px;
height: 20px;
margin: 10px;
position: relative;
left: 1px;
float: left;
}
.jhatab [type=radio] {
display: none;
}
.jhacontent {
position: absolute;
height: 300px;
width: 400px;
-webkit-transition-duration: .9s;
-moz-transition-duration: .9s;
-o-transition-duration: .9s;
overflow: hidden;
top: 480px;
bottom: 0px;
left: 0px;
right: 0px;
background: #d9d49d;
padding: 20px;
border: 1px solid #dcd58c;
}
[type=radio]:checked ~ label {
background: #dfdca0;
border: 1px solid #DFDFDF;
z-index: 2;
}
[type=radio]:checked ~ label ~ .jhacontent {
z-index: 1;
top: -180px;
left: 70px;
}