лс рэйни

[html]<script src="https://forumstatic.ru/files/0018/25/96/65436.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,400;0,700;1,400;1,700&display=swap');

.nls {
width: 740px;
height: 380px;
display: block;
background: url(https://forumstatic.ru/files/001b/6f/ae/63688.png);
border-radius: 32px;
}
.nls .kncont {
display: block;
width: 100%;
height: 15px;
position: absolute;
text-align: center;
bottom: 10px;
}
.nls .knopka.nkn1,
.nls .knopka.nkn2,
.nls .knopka.nkn3 {
display: inline-block !important;
width: 15px;
height: 15px;
border-radius: 100%;
background: #e5e5e5;
margin: 0 14px !important;
cursor: pointer;
}
.nls .knopka.nred {
display: block;
width: 30px;
height: 30px;
border-radius: 0%;
background: transparent;
position: absolute;
}
.nls .nls1:after,
.nls .nls2:after,
.nls .nls3:after {
content: "";
display: block;
background: #1e1e1e;
border-radius: 100%;
width: 15px;
height: 15px;
position: absolute;
bottom: 10px;
box-shadow: 0 0 0 0.5px #1e1e1e;
}
.nls .nls1:after {
left: 320px;
}
.nls .nls2:after {
left: 363px;
}
.nls .nls3:after {
left: 406px;
}
.nls .ls0 {
display: block;
width: 100%;
height: 100%;
}
.ls-h1 {
display: flex;
width: 100%;
height: 30px;
text-align: center;
position: absolute;
top: 25px;
left: 0;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
background: #1e1e1e;
color: #e5e5e5;
font-family: 'Jost', arial;
letter-spacing: 1px;
font-weight: 700;
font-size: 20px;
line-height: 1;
text-transform: lowercase;
}
.ls-h1.info-h1:before {
content: "основная информация";
}
.ls-h1.collect-h1:before {
content: "коллекции";
}
.ls-h1.achiev-h1:before {
content: "достижения";
}
.nls .nls1,
.nls .nls2,
.nls .nls3 {
box-sizing: border-box;
padding: 25px;
border-radius: 32px;
}
.nls .nls1 {
}
.nls .nls2 {
}
.nls .nls3 {
}
.ls-info--leftbox {
width: 260px;
height: 280px;
position: absolute;
display: block;
top: 65px;
left: 25px;
text-align: center;
}
.info-img {
display: block;
width: 150px;
height: 150px;
border-radius: 100%;
background-color: #e5e5e5;
margin: 25px auto 0;
z-index: 1;
position: relative;
box-shadow: 0 0 0 2px #e5e5e5;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-blend-mode: luminosity;
}
.info-img--frame {
width: 210px;
height: 210px;
background: #1e1e1e;
display: block;
position: absolute;
z-index: 0;
border-radius: 100%;
top: 0;
left: 25px;
}
.info-icons {
margin: -77px auto 0 !important;
width: 100%;
height: 182px;
background: #e5e5e5;
box-sizing: border-box;
padding: 110px 0 0;
position: relative;
}
.info-icons a {
display: inline-flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
text-align: center;
font-family: var(--mso);
font-size: 20px;
line-height: 1;
letter-spacing: 0;
background: #1e1e1e;
color: #e5e5e5;
width: 40px;
height: 40px;
border-radius: 100%;
text-decoration: none !important;
margin: 0 16px;
}
.info-icons a.icon1:before,
.info-icons a.icon2:before,
.info-icons a.icon3:before {
display: block;
}
.info-icons a.icon1:before {
content: "\f19c";
}
.info-icons a.icon2:before {
content: "\e02f";
}
.info-icons a.icon3:before {
content: "\e87d";
}
.ls-info--rightbox {
background: #e5e5e5;
width: 395px;
height: 280px;
position: absolute;
display: flex;
top: 65px;
right: 25px;
box-sizing: border-box;
padding: 10px 5px;
border-radius: 20px;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
align-items: start;
}
.rightbox-chrono,
.rightbox-plash {
width: 100%;
height: 45%;
flex-shrink: 0;
box-sizing: border-box;
}
.rightbox-chrono article,
.rightbox-plash article {
width: 100%;
height: calc(100% - 20px);
overflow-y: auto;
box-sizing: border-box;
padding: 0 5px 0;
}
.rightbox-chrono article {
margin: 20px 0 0;
}
.rightbox-plash article {
margin: 0 0 20px;
text-align: center;
}
.rightbox-chrono:before,
.rightbox-plash:before {
display: block;
font-family: 'Jost', arial;
font-weight: 700;
color: #a64547;
font-size: 13px;
text-transform: uppercase;
line-height: 1;
position: absolute;
}
.rightbox-chrono:before {
content: 'хронология';
text-align: left;
left: 30px;
top: 10px;
}
.rightbox-plash:before {
content: 'плашки';
text-align: right;
right: 30px;
bottom: 10px;
}
.rightbox-chrono:after,
.rightbox-plash:after {
display: block;
width: 10px;
height: 10px;
background: #000;
border-radius: 100%;
position: absolute;
}
.rightbox-chrono:after {
content: '';
top: 12px;
left: 10px;
}
.rightbox-plash:after {
content: '';
bottom: 12px;
right: 10px;
}
.rightbox-plash div {
display: block;
}
.rightbox-chrono p {
padding: 0 0 3px;
margin-block-start: 0;
margin-block-end: 0;
}
hr {
border: 1px solid #b2b2b2 !important;
width: 100%;
margin: 10px 0 !important;
height: 1px;
border-bottom-style: none !important;
}
.rightbox-chrono article a {
color: #a64547;
text-decoration: none;
}
.ls-collect--box,
.ls-achiev--box {
background: #e5e5e5;
width: 690px;
height: 280px;
position: absolute;
display: flex;
top: 65px;
right: 25px;
box-sizing: border-box;
padding: 10px;
border-radius: 20px;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
align-items: start;
}
.ls-collect--box article {
overflow-y: auto;
box-sizing: border-box;
padding: 0 5px;
}
.ls-collect--box article item {
display: flex;
width: 660px;
height: auto;
flex-wrap: nowrap;
padding: 20px 0;
box-shadow: 0 1px 0 0 #b2b2b2;
}
.ls-collect--box article item:first-child {
padding: 10px 0 20px;
}
.ls-collect--box article item:last-child {
padding: 20px 0 10px;
}
.ls-collect--box article item in {
width: 300px;
flex-shrink: 0;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background: #1e1e1e;
border-radius: 15px;
flex-direction: column;
flex-wrap: nowrap;
text-align: center;
color: #e5e5e5;
font-size: 9px;
font-family: 'Jost', arial;
letter-spacing: 1px;
line-height: 1;
margin: 0 10px 0 0;
}
.ls-collect--box article item img {
border-radius: 100%;
width: 40px;
height: 40px;
margin: 0 4px;
background: #1e1e1e;
}
.ls-collect--box article item img:first-child:not(:last-child) {
margin: 0 3px 0 0;
}
.ls-collect--box article item in b {
color: #985354;
text-transform: uppercase;
font-size: 12px;
line-height: 1;
margin: 0 10px 0 0;
}
.ls-collect--box article item section {
white-space: nowrap;
height: 40px;
width: 100%;
letter-spacing: 0;
line-height: 1;
overflow: hidden;
text-align: center;
}
.ls-achiev--box article {
overflow-y: auto;
box-sizing: border-box;
padding: 0 5px;
width: 100%;
height: 100%;
display: flex;
flex-direction: revert;
flex-wrap: wrap;
}
.ls-achiev--box article item {
width: 312px;
flex-shrink: 0;
height: 60px;
display: flex;
justify-content: flex-start;
align-items: center;
background: #1e1e1e;
border-radius: 30px 15px 15px 30px;
flex-direction: row;
flex-wrap: nowrap;
line-height: 1;
margin: 8px;
}
.ls-achiev--box article item img {
border-radius: 100%;
width: 60px;
height: 60px;
background: #985354;
}
.ls-achiev--box article item in {
color: #e5e5e5;
font-size: 9px;
font-family: 'Jost', arial;
letter-spacing: 1px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex-wrap: nowrap;
text-align: center;
width: 100%;
overflow: hidden;
height: 100%;
line-height: 1.4;
box-sizing: border-box;
padding: 5px 5px;
}
.ls-achiev--box article item in b {
color: #985354;
text-transform: uppercase;
font-size: 12px;
line-height: 1;
margin: 0;
}

.rightbox-chrono article::-webkit-scrollbar,
.rightbox-plash article::-webkit-scrollbar,
.ls-collect--box article::-webkit-scrollbar,
.ls-achiev--box article::-webkit-scrollbar {
width: 3px!important;
height: 0!important;
}
.rightbox-chrono article::-webkit-scrollbar-track,
.rightbox-chrono article::-webkit-scrollbar-corner,
.rightbox-plash article::-webkit-scrollbar-track,
.rightbox-plash article::-webkit-scrollbar-corner,
.ls-collect--box article::-webkit-scrollbar-track,
.ls-achiev--box article::-webkit-scrollbar-track,
.ls-collect--box article::-webkit-scrollbar-corner,
.ls-achiev--box article::-webkit-scrollbar-corner {
background-color: transparent!important;
background: transparent!important;
}
.rightbox-chrono article::-webkit-scrollbar-thumb,
.rightbox-plash article::-webkit-scrollbar-thumb,
.ls-collect--box article::-webkit-scrollbar-thumb,
.ls-achiev--box article::-webkit-scrollbar-thumb {
background: #b2b2b2!important;
}
</style>

</div><div class="ls-info--rightbox">

<div class="rightbox-chrono"><article>
<p>текст текст <a href="#">эпизод</a></p>
<p>текст <a href="#">эпизод</a></p>
<p>текст текст <a href="#">эпизод</a></p>
<p>текст <a href="#">эпизод</a></p>
<p>текст текст <a href="#">эпизод</a></p>
<p>текст <a href="#">эпизод</a></p>
<p>текст текст <a href="#">эпизод</a></p>
<p>текст <a href="#">эпизод</a></p>
<p>текст текст <a href="#">эпизод</a></p>
<p>текст <a href="#">эпизод</a></p>
<p>текст текст <a href="#">эпизод</a></p>
</article></div>
<hr>
<div class="rightbox-plash"><article>
<div class="rainy-pl" style="background-image: url(https://forumstatic.ru/files/001b/6f/ae/75002.png);">чмо к</div>
<div class="rainy-pl" style="background-image: url(https://forumstatic.ru/files/001b/6f/ae/75002.png);">чмо к</div>
<div class="rainy-pl" style="background-image: url(https://forumstatic.ru/files/001b/6f/ae/75002.png);">чмо к</div>
<div class="rainy-pl" style="background-image: url(https://forumstatic.ru/files/001b/6f/ae/75002.png);">чмо к</div>
<div class="rainy-pl" style="background-image: url(https://forumstatic.ru/files/001b/6f/ae/75002.png);">чмо к</div>
<div class="rainy-pl" style="background-image: url(https://forumstatic.ru/files/001b/6f/ae/75002.png);">чмо к</div>
<div class="rainy-pl" style="background-image: url(https://forumstatic.ru/files/001b/6f/ae/75002.png);">чмо к</div>
<div class="rainy-pl" style="background-image: url(https://forumstatic.ru/files/001b/6f/ae/75002.png);">чмо к</div>
<div class="rainy-pl" style="background-image: url(https://forumstatic.ru/files/001b/6f/ae/75002.png);">чмо к</div>
</article></div>

</div></div>

<item><in><b>название коллекции</b>закрытая коллекция</in><section>
<img src="https://forumavatars.ru/img/avatars/001b/6f/ae/2-1654368748.png" title="всплывающий текст">
<img src="https://forumavatars.ru/img/avatars/001b/6f/ae/2-1654368748.png" title="всплывающий текст">
<img src="https://forumavatars.ru/img/avatars/001b/6f/ae/2-1654368748.png" title="всплывающий текст">
<img src="https://forumavatars.ru/img/avatars/001b/6f/ae/2-1654368748.png" title="всплывающий текст">
<img src="https://forumavatars.ru/img/avatars/001b/6f/ae/2-1654368748.png" title="всплывающий текст">
<img src="https://forumavatars.ru/img/avatars/001b/6f/ae/2-1654368748.png" title="всплывающий текст">
<img src="https://forumavatars.ru/img/avatars/001b/6f/ae/2-1654368748.png" title="всплывающий текст">
</section></item>

<item><in><b>название коллекции</b>закрытая коллекция</in><section>
<img src="https://forumavatars.ru/img/avatars/001b/6f/ae/2-1654368748.png">
<img src="https://forumavatars.ru/img/avatars/001b/6f/ae/2-1654368748.png">
<img src="https://forumavatars.ru/img/avatars/001b/6f/ae/2-1654368748.png">
<img src="https://forumavatars.ru/img/avatars/001b/6f/ae/2-1654368748.png">
<img src="https://forumavatars.ru/img/avatars/001b/6f/ae/2-1654368748.png">
<img src="https://forumavatars.ru/img/avatars/001b/6f/ae/2-1654368748.png">
<img src="https://forumavatars.ru/img/avatars/001b/6f/ae/2-1654368748.png">
</section></item>

<item><in><b>название коллекции</b>закрытая коллекция</in><section>
<img src="https://forumavatars.ru/img/avatars/001b/6f/ae/2-1654368748.png">
</section></item>

</article></div>

</div>

<item><img src="https://forumavatars.ru/img/avatars/001b/6f/ae/2-1654368748.png"><in><b>достижение</b>описание достижения</in></item>
<item><img src="https://forumavatars.ru/img/avatars/001b/6f/ae/2-1654368748.png"><in><b>достижение</b>описание достижения</in></item>
<item><img src="https://forumavatars.ru/img/avatars/001b/6f/ae/2-1654368748.png"><in><b>достижение</b>описание достижения</in></item>
<item><img src="https://forumavatars.ru/img/avatars/001b/6f/ae/2-1654368748.png"><in><b>достижение</b>описание достижения</in></item>
<item><img src="https://forumavatars.ru/img/avatars/001b/6f/ae/2-1654368748.png"><in><b>достижение</b>описание достижения</in></item>
<item><img src="https://forumavatars.ru/img/avatars/001b/6f/ae/2-1654368748.png"><in><b>достижение</b>описание достижения</in></item>
<item><img src="https://forumavatars.ru/img/avatars/001b/6f/ae/2-1654368748.png"><in><b>достижение</b>описание достижения</in></item>
<item><img src="https://forumavatars.ru/img/avatars/001b/6f/ae/2-1654368748.png"><in><b>достижение</b>описание достижения</in></item>
<item><img src="https://forumavatars.ru/img/avatars/001b/6f/ae/2-1654368748.png"><in><b>достижение</b>описание достижения</in></item>
<item><img src="https://forumavatars.ru/img/avatars/001b/6f/ae/2-1654368748.png"><in><b>достижение</b>описание достижения</in></item>
<item><img src="https://forumavatars.ru/img/avatars/001b/6f/ae/2-1654368748.png"><in><b>достижение</b>описание достижения</in></item>
<item><img src="https://forumavatars.ru/img/avatars/001b/6f/ae/2-1654368748.png"><in><b>достижение</b>описание достижения</in></item>
<item><img src="https://forumavatars.ru/img/avatars/001b/6f/ae/2-1654368748.png"><in><b>достижение</b>описание достижения</in></item>
<item><img src="https://forumavatars.ru/img/avatars/001b/6f/ae/2-1654368748.png"><in><b>достижение</b>описание достижения</in></item>
<item><img src="https://forumavatars.ru/img/avatars/001b/6f/ae/2-1654368748.png"><in><b>достижение</b>описание достижения</in></item>
<item><img src="https://forumavatars.ru/img/avatars/001b/6f/ae/2-1654368748.png"><in><b>достижение</b>описание достижения</in></item>
<item><img src="https://forumavatars.ru/img/avatars/001b/6f/ae/2-1654368748.png"><in><b>достижение</b>описание достижения</in></item>
<item><img src="https://forumavatars.ru/img/avatars/001b/6f/ae/2-1654368748.png"><in><b>достижение</b>описание достижения</in></item>
<item><img src="https://forumavatars.ru/img/avatars/001b/6f/ae/2-1654368748.png"><in><b>достижение</b>описание достижения</in></item>

</article></div>

</div>

</div>[/html]

bosver

Меню навигации

Пользовательские ссылки

Объявление

Информация о пользователе

лс рэйни

Сообщений 1 страница 1 из 1

Поделиться113.05.2023 11:24:20