[hideprofile][html]
<style>
@keyframes rotate {
0% {transform: rotate(0);}
100% {transform: rotate(360deg);}
}
.garden {
color: #333;
border: #ccc solid 1px;
width: 75%;
margin: 0 auto;
padding: 5px;
background: #fefefe;
}
.garden2 {
border: #c8c8c8 solid 1px;
background-color: #e3e3e3;
background-image: url(https://i.ibb.co/HXT4y1W/1.png);
background-repeat: repeat-y;
background-blend-mode: overlay;
}
.gard-01 {
border-bottom: rgb(184 165 199 / 90%) solid 1px;
background: rgb(201 136 217 / 28%);
padding: 20px 70px 20px;
text-align: right;
}
.gard-01 h2 {
margin: 0;
display: inline-block;
border: rgba(199, 165, 176, 0.8) solid 1px;
background: #fefefe;
border-radius: 5px;
padding: 7px 15px;
font: 18px ;
}
.gard-01 h3 {
margin: 0;
display: inline-block;
padding: 0px;
font-size: 11px;
color: #fff5f5;
font-family: monospace;
text-align: justify;
}
.gard-01 h2 b {
font: 18px;
color: #c7a5b0;
}
.gard-side {
border-left: #ccc solid 1px;
background: #f3f3f3;
width: 200px;
float: right;
}
.gard-side icon {
position: relative;
display: block;
border-bottom: #ccc solid 1px;
padding: 40px;
background: #eee;
}
.gard-side iconan {
position: absolute;
top: 35px;
left: 35px;
animation: infinite 1s rotate;
display: block;
padding: 3px;
width: 107px;
height: 107px;
border: solid 2px;
border-color: #c7a5b0 #c7a5b0 transparent transparent;
border-radius: 100%;
}
.gard-side icon img {
width: 100px;
height: 100px;
border-radius: 100%;
background: #fefefe;
padding: 3px;
}
.gard-side basic {display: block;}
.gard-side sideinfo {
display: block;
padding: 20px 20px 10px;
height: 180px;
overflow-y: auto;
}
.gard-side basic {
border: #ccc solid 1px;
padding: 10px;
font: bold 9px;
text-transform: uppercase;
background: #fefefe;
margin: 0 0 10px 0;
}
.gardtabs {
position: relative;
height: 397px;
width: 260px;
left: 145px;
}
.gtabs {float: left;}
.gtabs [type=radio] {display: none;}
.gct-01 {
position: absolute;
z-index: 1;
top: 0;
right: 0;
width: 100%;
border: #ccc solid 1px;
background: #fefefe;
margin: 30px;
padding: 30px;
}
.gct-02 {
transform: scale(0);
transition: 600ms;
height: 280px;
overflow: auto;
font: 12px;
text-align: justify;
padding: 0 5px 0 0;
}
.gct-02 p {
border-left: #dad0d3 solid 1px;
margin: 7px 0 7px 10px;
padding: 0 0 0 10px;
}
.gct-02 b {
font: 600 14px;
color: #c37e95;
}
.gct-02 i {
font: 14px cutive mono;
color: #c37e95;
}
.gct-02::-webkit-scrollbar {width: 5px;}
.gtabs [type=radio]:checked ~ label i {color: #aaa;}
.gtabs [type=radio]:checked ~ label ~ .gct-01 {z-index: 2;}
.gtabs [type=radio]:checked ~ label ~ .gct-01 .gct-02 {transform: scale(1);}
</style>
<!-- Code désigné par Von appetit. Merci de créditer l'auteur ! Lien source : http://yourscent.jcink.net/index.php?showtopic=8 -->
<div class="garden">
<div class="garden2">
<div class="gard-01"><h2><b>Название</b> название</h2><h3>Люди сами себе устраивают проблемы — никто не заставляет их выбирать скучные профессии, жениться не на тех людях или покупать неудобные туфли.</h3></div>
<div class="gard-02 fl frowr bcet">
<div class="gard-side flexs">
<icon><iconan></iconan><img src="https://i.pinimg.com/564x/d4/db/b8/d4dbb8b9b7692e8cec0cc7a29e97ee7f.jpg"></icon>
<sideinfo>
<basic>Имя Имя</basic>
<basic>Имя Имя</basic>
<basic>Имя Имя</basic>
<basic>Имя Имя</basic>
</sideinfo>
</div>
<div class="gardtabs flex">
<div class="tabcontain"></div>
<div class="gtabs">
<input type="radio" id="gtab1" name="gardentabs" checked>
<label for="gtab1" title="index"></label>
<div class="gct-01">
<div class="gct-02">
<b>Софи Хаттер</b> была старшей из трех сестер. И ладно бы она родилась в семье бедного дровосека — это сулило бы хоть какую-то надежду на успех. Напротив, родители Софи были люди вполне обеспеченные и держали лавку дамских шляпок в процветающем городке под названием <i>Маркет-Чиппинг</i>. Правда, родная мама Софи умерла, когда малышке было два, а ее сестренке Летти — всего-то годик, и тогда отец женился на младшей продавщице, прехорошенькой блондинке по имени Фанни. Очень скоро Фанни родила третью сестру — Марту. Это должно было превратить Софи и Летти в Злых Старших Сестриц, — само собой, страшных дурнушек, — но на самом деле все три девочки выросли очень даже симпатичные, хотя никто не сомневался, что самой красивой была все-таки Летти. Фанни одинаково нежно относилась ко всем трем девочкам и не выделяла Марту ничем и никогда.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
[/html]
