Здесь мы придержали для тебя код анкеты. Можешь заполнять его в свободной форме, мы не придираемся по этому поводу. Однако, напомним, что логику любим всей душой.
Тему со свой анкетой создавай в этом подфоруме. Название темы: Имя Фамилия (ENG) - 00 (возраст)
[html]
<div class=anket_html>
<div class=anket_name>Имя Фамилия</div>
<html_divider></html_divider>
<div class=anket_pic><img src="картинка_профиля"></div>
<div class=anketinfo>
<span><b>Место и дата рождения:</b> текст</span>
<span><b>Должность:</b> текст</span>
</div>
<span class=face><b>Face:</b> name surname</span><html_divider></html_divider>
<div class=anket_textblock>
ИСТОРИЯ ПЕРСОНАЖА
<br>
</div>
<html_divider></html_divider>
<div class=anketplayrinfo>
<b>Связь с вами:</b> связь
<br/><br/><b>Что делать с персонажем, если Вы покинете игру:</b> текст
</div>
</div><style>
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,600i,700,700i,800,80i,900,900i&subset=cyrillic');
@import url('https://fonts.googleapis.com/css?family=Montserrat+Alternates:300,400,500,700,800,900&display=swap&subset=cyrillic');.anket_html {margin: auto;
background: #efefef;
border: 1px solid #cacaca;
box-shadow: 0px 3px 5px 0 rgba(14,25,45,.34);
width: 550px;
padding: 40px;
position: relative}.anket_name {
font: 800 27px montserrat;
color: #283144;
text-transform: uppercase;
margin-top: -15px
}.anket_pic {
position: absolute;
background: #283144;
height: 135px;
width: 135px;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
top: 42px;
right: 33px
}.anket_pic img {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
width: 127px;
height: 127px;
margin-top: 4px;
margin-left: 4px
}.anketinfo {
height: 79px;
background: #283144;
width: calc(100% - 40px);
margin-top: 4px;
display: flex;
align-items: flex-start;
flex-flow: column nowrap;
justify-content: center;
align-content: center;
padding: 0 20px
}.anketinfo span {
margin: 5px;
flex: 0 1 auto;
font: 500 10px 'Montserrat Alternates';
color: #e4e4e4
}.face {
display: block;
font: 500 10px 'Montserrat Alternates';
margin-top: 11px;
text-align: right;
margin-right: 100px;
margin-bottom: 12px
}.anket_textblock {
font: 500 10px/16px montserrat;
text-align: justify;
margin: 16px 0 20px 0;
overflow-y: auto;
height: 400px;
padding-right: 5px
}.anketplayrinfo {
font: 500 10px/16px montserrat;
margin-top: 15px
}html_divider {display: block;
background: #272844;
height: 7px;
width: 100%}
</style>[/html]
Код:[html] <div class=anket_html> <div class=anket_name>Имя Фамилия</div> <html_divider></html_divider> <div class=anket_pic><img src="картинка_профиля"></div> <div class=anketinfo> <span><b>Место и дата рождения:</b> текст</span> <span><b>Должность:</b> текст</span> </div> <span class=face><b>Face:</b> name surname</span> <html_divider></html_divider> <div class=anket_textblock> ИСТОРИЯ ПЕРСОНАЖА <br> </div> <html_divider></html_divider> <div class=anketplayrinfo> <b>Связь с вами:</b> связь <br/><br/><b>Что делать с персонажем, если Вы покинете игру:</b> текст </div> </div> <style> @import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,600i,700,700i,800,80i,900,900i&subset=cyrillic'); @import url('https://fonts.googleapis.com/css?family=Montserrat+Alternates:300,400,500,700,800,900&display=swap&subset=cyrillic'); .anket_html {margin: auto; background: #efefef; border: 1px solid #cacaca; box-shadow: 0px 3px 5px 0 rgba(14,25,45,.34); width: 550px; padding: 40px; position: relative} .anket_name { font: 800 27px montserrat; color: #283144; text-transform: uppercase; margin-top: -15px } .anket_pic { position: absolute; background: #283144; height: 135px; width: 135px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); top: 42px; right: 33px } .anket_pic img { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); width: 127px; height: 127px; margin-top: 4px; margin-left: 4px } .anketinfo { height: 79px; background: #283144; width: calc(100% - 40px); margin-top: 4px; display: flex; align-items: flex-start; flex-flow: column nowrap; justify-content: center; align-content: center; padding: 0 20px } .anketinfo span { margin: 5px; flex: 0 1 auto; font: 500 10px 'Montserrat Alternates'; color: #e4e4e4 } .face { display: block; font: 500 10px 'Montserrat Alternates'; margin-top: 11px; text-align: right; margin-right: 100px; margin-bottom: 12px } .anket_textblock { font: 500 10px/16px montserrat; text-align: justify; margin: 16px 0 20px 0; overflow-y: auto; height: 400px; padding-right: 5px } .anketplayrinfo { font: 500 10px/16px montserrat; margin-top: 15px } html_divider {display: block; background: #272844; height: 7px; width: 100%} </style>[/html]
