.
тест примерочной
Страница: 1
Сообщений 1 страница 2 из 2
Поделиться22026-02-14 14:01:29
[html]
<script src="https://forumstatic.ru/files/001a/63/95/96684.js?v=5"></script>
<link rel="stylesheet" type="text/css" href="https://forumstatic.ru/styles/001c/87/4b/style.1771005385.css" />
<style>
.mirror-list {
padding: 0px 20px 20px;
margin: auto !important;
}
.mirror-list .html_themes-body {
padding: 0
}
.mirror-list .html_themes-news_container {
display: flex;
flex-direction: row;
gap: 20px;
padding: 20px;
position: relative;
/* flex-wrap: wrap; */
justify-content: center;
/* width: 680px; */
}
.mirror-main_title {
background: var(--accent-dark);
padding: 1px 15px 3px;
border-radius: 5px;
color: var(--text3);
text-align: center;
white-space: nowrap;
font-size: 9px;
font-weight: normal;
height: 18px;
display: flex;
align-items: center;
position: absolute;
justify-content: center;
top: -9px;
left: 50%;
transform: translateX(-50%);
width: 120px;
box-sizing: border-box;
text-transform: lowercase;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.33), inset 0 0 4px 0 rgba(0, 0, 0, 0.19);
}
.mirror-preview {
overflow: hidden;
max-width: 224px;
padding: 40px 9px 25px;
border-radius: 10px;
position: relative;
z-index: 1;
align-self: flex-start
}
.mirror-preview__list {
box-sizing: border-box;
text-align: center !important;
box-sizing: border-box;
margin: 0px;
padding: 13px !important;
color: var(--text1);
display: flex;
flex-direction: column;
gap: 5px;
align-items: center;
background: var(--beg300);
position: relative;
border-radius: 10px;
z-index: 1;
}
.mirror-bg {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0;
z-index: -1;
border-radius: 10px;
}
.mirror-bg img {
width: 224px;
height: 100%;
object-fit: cover;
vertical-align: unset !important;
}
.mirror-icon {
background: var(--beg300);
padding: 2px 15px !important;
border-radius: 3px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.39);
margin: -30px 0 0 !important;
}
.mirror-icon img {
width: 25px;
height: 30px;
object-fit: contain;
}
.mirror-avatar img {
width: 180px;
/* height: 180px; */
/* object-fit: cover; */
}
.mirror-lz {
margin: 0 !important;
padding: 0px !important;
align-self: stretch;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
max-width: 180px !important;
box-sizing: border-box
}
.mirror-banner {
margin: 10px -13px -13px !important;
border-radius: 0 0 10px 10px;
align-self: stretch;
overflow: hidden;
}
.mirror-banner .personal_banner {
min-width: unset
}
.mirror-settings {
padding: 0 !important;
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.mirror-settings__container {
border-radius: 10px;
background: var(--beg100);
padding: 5px 10px 10px !important;
display: flex;
flex-direction: column;
gap: 5px;
box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.2);
}
.mirror-subtitle {
background: var(--dark600);
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.33), inset 0 0 4px 0 rgba(0, 0, 0, 0.19);
color: var(--text3);
padding: 2px 10px 4px;
border-radius: 5px;
align-self: self-start
}
.mirror-help {
font-size: 9px;
opacity: .65;
text-align: left;
margin-bottom: 5px !important;
}
.mirror-input.input-lz {
border: 0;
padding: 6px 15px 6px 15px !important;
color: var(--text1);
border: 1px solid var(--borders) !important;
background: var(--beg300);
font: 400 11px var(--font), verdana !important;
box-sizing: border-box;
border-radius: 10px;
min-height: 50px;
}
.mirror-input {
transition: border .3s linear 0s
}
.mirror-input:focus {
outline: none;
border: 1px solid var(--borders-gray) !important;
}
.mirror-input::placeholder {
color: var(--text2);
opacity: .65
}
</syle>
[/html]
[html]<!--HTML-->
<div class="html_themes-wrapper mirror-list">
<div class="html_themes-body">
<div class="html_themes-news_container">
<h5 class="mirror-main_title">образ профиля</h5>
<div class="mirror-preview">
<li class="mirror-bg"><img src="https://forumstatic.ru/files/001a/63/95/30608.jpg"></li>
<ul class="mirror-preview__list">
<li class="mirror-icon"><img src="https://forumstatic.ru/files/001a/63/95/35056.png"></li>
<li class="mirror-avatar"><img src="https://forumstatic.ru/files/001a/63/95/56154.png?v=1"></li>
<li class="mirror-lz"><div class="lz_wrap"><a href="ссылка на анкету" class="lz_ank">имя</a><span class="activity">профессия</span><div class="lz_desc">ваш текст</div></div></li>
<li class="mirror-banner"><div class="personal_banner"><max>лириумный призрак</max><min>глад. резня. воткнуть.</min></div></li>
</ul>
</div>
<ul class="mirror-settings">
<li class="mirror-settings__container">
<span class="mirror-subtitle">попробовать фон</span>
<input type="text" class="mirror-input input-bg" placeholder="Ссылка на картинку">
</li>
<li class="mirror-settings__container">
<span class="mirror-subtitle">попробовать иконку</span>
<input type="text" class="mirror-input input-icon" placeholder="Ссылка на картинку">
</li>
<li class="mirror-settings__container">
<span class="mirror-subtitle">аватар</span>
<input type="text" class="mirror-input input-avatar" placeholder="Ссылка на картинку">
</li>
<li class="mirror-settings__container">
<span class="mirror-subtitle">личное звание</span>
<span class="mirror-help"><b>жирный</b>, <i>курсив</i>, <u>подчеркнуть</u> <div style="text-align:center;font-size: 9px;font-family: Arial Black;color: #ff0000;">тут текст<div></span>
<textarea class="mirror-input input-lz" placeholder="Шаблон личного звания"></textarea>
</li>
<li class="mirror-settings__container">
<span class="mirror-subtitle">попробовать плашку</span>
<input type="text" class="mirror-input input-banner" placeholder="Ссылка на картинку/цвет в формате HEX, RGB и HSL">
</li>
<li class="mirror-settings__container">
<span class="mirror-subtitle">текст на плашке</span>
<input type="text" class="mirror-input input-banner-text-max" placeholder="Верхний текст">
<input type="text" class="mirror-input input-banner-text-min" placeholder="Нижний текст">
</li>
</ul>
</div>
</div>
</div>[/html]
Страница: 1
