HTML-ШАБЛОН АНКЕТЫ "SET"
[html]<style>*, ::after, ::before {
box-sizing:content-box; -moz-box-sizing:initial; -webkit-box-sizing:initial;
}
.boxSET {
display:inline-block; vertical-align:top; margin-left:10px;
}
.tIISET {
padding:5px 10px;
text-align:right; font-weight:bold; text-transform:uppercase; font-size:14px; letter-spacing:3px;
}
.SET:hover .cdtSET {
opacity:1;
}
/* АНКЕТА */
.SET {
box-shadow:0px 0px 5px rgba(0,0,0,0.2); background:grey;
border-color:#191919 !important; /* НИЖНЯЯ ПОЛОСА */
}
.SET {
margin:auto; width:545px; padding-top:20px; border-bottom:20px solid;
text-align:center; line-height:normal; font-family:Arial;
}
/* ИМЯ И ФАМИЛИЯ */
.npSET div {
background:#191919; color:white; text-shadow:0px 1px 2px rgba(255,255,255,0.5);
max-width:500px; padding:10px 0 10px 20px;
font-family:Arial; font-size:18px; font-style:italic; text-transform:uppercase; text-align:left; letter-spacing:3px;
}
.npSET {
margin:0 auto -10px; position:relative; z-index:5;
width:545px; text-align:left;
}
/* ИНФОРМАЦИЯ */
.abtSET {
display:inline-block; vertical-align:top;
width:200px; height:320px; overflow:hidden;
}
.abtSET div {
position:absolute;
width:180px; height:300px; padding:10px; overflow-y:auto;
text-align:justify; font-size:11px; font-family:Arial;
opacity:0; transition:all 0.5s ease-in; -webkit-transition:all 0.5s ease-in;
background:rgba(255,255,255,0.9); color:black;
}
.abtSET:hover div {
opacity:1;
}
.abtSET img {
width:200px; min-height:320px;
}
/* НАЗВАНИЕ ПУНТКТОВ "ВНЕШНОСТЬ" и "ХАРАКТЕР" */
.tSET {
margin:auto;
width:75%; padding:5px 0; border-radius:0px 0px 15px 15px;
letter-spacing:3px; text-align:center; text-transform:uppercase; font-size:12px;
background:#191919; color:white;
}
/* ХАРАКТЕР */
.caraSET {
margin-bottom:10px;
width:300px; height:155px; padding:0 5px; border-left:5px solid;
border-color:#191919 !important; box-shadow:inset 0px 0px 5px rgba(0,0,0,0.3);
background:rgba(250,250,250,0.3); color:black;
}
.caraSET p {
margin-top:5px;
height:115px; padding:0 5px 5px; overflow:hidden;
text-align:justify; font-size:11px; font-family:Arial; line-height:15px;
}
.caraSET:hover p {
overflow-y:auto;
}
/* ВНЕШНОСТЬ */
.phyzSET {
width:300px; height:155px; padding:0 5px; border-left:5px solid;
border-color:#191919 !important; box-shadow:inset 0px 0px 5px rgba(0,0,0,0.3);
background:rgba(250,250,250,0.3); color:black;
}
.phyzSET p {
margin-top:5px;
height:115px; padding:0 5px 5px; overflow:hidden;
text-align:justify; font-size:11px; font-family:Arial; line-height:15px;
}
.phyzSET:hover p {
overflow-y:auto;
}
/* НАЗВАНИЕ ПУНКТОВ "БИО" И "ОБ ИГРОКЕ" */
.tIISET {
background:#191919; color:white;
}
/* БИО */
.storySET {
margin:15px auto 0; width:525px;
background:rgba(0,0,0,0.3); color:white;
}
.storySET p {
margin:0; padding:10px;
text-align:justify; font-size:11px; font-family:Arial; line-height:15px;
}
/* ОБ ИГРОКЕ */
.USET {background:rgba(0,0,0,0.3); color:white;
margin:10px auto; width:525px;
}
.USET p {
margin:0; padding:10px;
text-align:justify; font-size:11px; font-family:Arial; line-height:16px;
}
}
/* КОПИРАЙТ. ПЕРЕВОД ОТ forumd.ru */
.cdtSET {
position:absolute; margin-top:3px; width:545px;
font-size:10px; font-family:Arial; text-align:center;
opacity:0 !important; transition:opacity 0.55s ease !important; -webkit-transition:opacity 0.55s ease !important;
}
.cdtSET a {
display:block; margin:auto;
text-decoration:none !important;
color:#CCC !important;
position: absolute;
margin-top: 3px;
width: 545px;
font-size: 10px;
font-family: Arial;
text-align: center;
}
.cdtSET a::before {content:'Ʃkaemp はは ™'; }
.SET:hover .cdtSET {opacity:1;}</style>
<!-- ИМЯ И ФАМИЛИЯ --><div class="npSET"><div>Имя Фамилия</div></div><div class="SET"><div class="abtSET">
<!-- КРАТКАЯ ИНФОРМАЦИЯ О ПЕРСОНАЖЕ --><div><center><b>Имя прототипа для персонажа</b></center><br/>
<b>Возраст</b> : ...<br/>
<b>Национальность</b> : ...<br/>
<b>Профессия / род занятий</b> : ...<br/>
<b>Семейный статус</b> : <i>Женат, холост, состоит в отношениях, разведен, вдовец</i><br/>
<b>Коротко о семье:</b> : ...<br/>
<b>Коротко о финансах</b> : ...</div>
<!-- КАРТИНКА 200*320 - АВТОМАТИЧЕСКО СЖАТИЕ --><img src="https://www.aht.li/3138179/200320BW.png" /></div>
<!-- ХАРАКТЕР И ВНЕШНОСТЬ --><div class="boxSET">
<!-- ХАРАКТЕР --><div class="caraSET"><div class="tSET">Характер</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dictum placerat suscipit. Aenean placerat nunc egestas interdum luctus. Proin tincidunt tempus dui id lacinia. Nullam quis interdum ligula. Pellentesque hendrerit feugiat gravida. Duis faucibus elementum elementum. Morbi at nisi vitae urna vulputate eleifend. Praesent id ante ac mi sollicitudin fringilla. Mauris consequat quis libero id lobortis. Proin a libero non lorem porttitor tempus.</p></div>
<!-- ВНЕШНОСТЬ --><div class="phyzSET"><div class="tSET">Внешность</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dictum placerat suscipit. Aenean placerat nunc egestas interdum luctus. Proin tincidunt tempus dui id lacinia. Nullam quis interdum ligula. Pellentesque hendrerit feugiat gravida. Duis faucibus elementum elementum. Morbi at nisi vitae urna vulputate eleifend. Praesent id ante ac mi sollicitudin fringilla. Mauris consequat quis libero id lobortis. Proin a libero non lorem porttitor tempus.</p></div></div>
<!-- БИОГРАФИЯ --><div class="storySET">
<div class="tIISET">БИО</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dictum placerat suscipit. Aenean placerat nunc egestas interdum luctus. Proin tincidunt tempus dui id lacinia. Nullam quis interdum ligula. Pellentesque hendrerit feugiat gravida. Duis faucibus elementum elementum. Morbi at nisi vitae urna vulputate eleifend. Praesent id ante ac mi sollicitudin fringilla. Mauris consequat quis libero id lobortis. Proin a libero non lorem porttitor tempus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dictum placerat suscipit. Aenean placerat nunc egestas interdum luctus. Proin tincidunt tempus dui id lacinia. Nullam quis interdum ligula. Pellentesque hendrerit feugiat gravida. Duis faucibus elementum elementum. Morbi at nisi vitae urna vulputate eleifend. Praesent id ante ac mi sollicitudin fringilla. Mauris consequat quis libero id lobortis. Proin a libero non lorem porttitor tempus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dictum placerat suscipit. Aenean placerat nunc egestas interdum luctus. Proin tincidunt tempus dui id lacinia. Nullam quis interdum ligula. Pellentesque hendrerit feugiat gravida. Duis faucibus elementum elementum. Morbi at nisi vitae urna vulputate eleifend. Praesent id ante ac mi sollicitudin fringilla. Mauris consequat quis libero id lobortis. Proin a libero non lorem porttitor tempus.</p></div>
<!-- ОБ ИГРОКЕ --><div class="USET">
<div class="tIISET">О вас</div>
<p><b>Ник</b> : ...<br/><b>Имя</b> : ...<br/><b>Возраст</b> : ...<br/><b>Комментарий</b> : ...</p></div>
<!-- КОПИРАЙТ (ПРОСЬБА НЕ УБИРАТЬ) --><div class="cdtSET"><a href="https://crushcrushcrush.actifforum.com/" target="_blank"></a></div></div>[/html]
© CODAGE PAR SKAEMP / CCCRUSH
Переведено специально для FD
