битва фракций
42
35
55
34

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel, porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim. Ut a tellus finibus, hendrerit ligula vitae, accumsan sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel, porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim. Ut a tellus finibus, hendrerit ligula vitae, accumsan sapien.
-Чей-то Никнейм

городское фэнтези / мистика / фэнтези / приключения / эпизодическая система / 18+
Проекту 14 лет 1 месяц 4 дня
10 век до н.э.:
лето 984 год до н.э.
19 век:
лето 1881 год
21 век:
осень 2029 год
Будущее:
осень 2049 год

TestSW2

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

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » TestSW2 » Новый форум » Шаблоны WIP

Шаблоны WIP

Страница:   1 2

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

11

[html]<style>
.mos-photo-template {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
width: 600px;
background: #EEEEEE;
box-shadow: 0px 4px 32.8px rgba(86, 86, 86, 0.1);
border-radius: 20px;
margin:auto;
}

.mos-photo-template-title {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 3px 30px;
margin: 20px;
width: fit-content;
background: #FFFFFF;
border-radius: 100px;
color:var(--main-color);
font:700 11px var(--main-text);
text-transform:uppercase;
}

.mos-temp-var1 {
width:520px;
display:flex;
flex-wrap:wrap;
gap:20px;
    justify-content: center;
}

.mos-temp-var1 img {
width:250px;
height:175px;
border-radius:20px;
object-fit:cover;
box-shadow: var(--img-shadow);
}

.mos-temp-var1 p {
width:550px;
flex-shrink:0;
font: 400 13px var(--main-text)!important;
color: var(--text-color)!important;
padding:0 0px 20px!important;
}

</style>

<section class="mos-photo-template">
<div class="mos-photo-template-title">Заголовок</div>

<div class="mos-temp-var1 photo-viewer">
<img src="https://i.imgur.com/3u9rIXN.png" alt="photo" />
<img src="https://i.imgur.com/3u9rIXN.png" alt="photo" />
<img src="https://i.imgur.com/3u9rIXN.png" alt="photo" />
<img src="https://i.imgur.com/3u9rIXN.png" alt="photo" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel, porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim. Ut a tellus finibus, hendrerit ligula vitae, accumsan sapien. Nunc porta aliquam felis, eu ultrices neque varius accumsan. Cras congue lectus ut libero fermentum, non consequat lectus egestas. Aenean nisl urna, finibus a nulla sed, sodales feugiat velit. In vulputate condimentum bibendum. Nulla vehicula vel nisi et vehicula. Cras ut tellus ut felis gravida ullamcorper. Nulla quis quam nec arcu consequat mollis. Phasellus finibus odio non tellus molestie dapibus.</p>
</div>

</section>[/html]

Подпись автора

Текст Текст Текст
https://i.imgur.com/6ri3pKD.gif

0

12

[html]<style>
.mos-photo-template {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
width: 600px;
background: #EEEEEE;
box-shadow: 0px 4px 32.8px rgba(86, 86, 86, 0.1);
border-radius: 20px;
margin:auto;
}

.mos-photo-template-title {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 3px 30px;
margin: 20px;
width: fit-content;
background: #FFFFFF;
border-radius: 100px;
color:var(--main-color);
font:700 11px var(--main-text);
text-transform:uppercase;
}

.mos-temp-var2 {
display:flex;
position:relative;
width:580px;
gap:10px;
    justify-content: center;
padding-bottom:20px;
}

.mos-temp-var2 > div {
    width: 285px;
    background: #F5F5F5;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius:20px;
}

.mos-temp-var2 div img {
width:265px;
height:130px;
object-fit:cover;
margin:10px;
border-radius:20px;
box-shadow: var(--img-shadow);
}

.mos-temp-var2 div p {
width:265px;
font:var(--main-font)!important;
color:var(--text-color)!important;
}

</style>

<section class="mos-photo-template">
<div class="mos-photo-template-title">Заголовок</div>

<div class="mos-temp-var2 photo-viewer">

<div>
<img src="https://i.imgur.com/3u9rIXN.png" alt="photo" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel, porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim. </p>
</div>

<div>
<img src="https://i.imgur.com/3u9rIXN.png" alt="photo" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel, porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim. </p>
</div>

</div>

</section>[/html]

Подпись автора

Текст Текст Текст
https://i.imgur.com/6ri3pKD.gif

0

13

[html]<style>

.mos-temp-var3 {
    display:flex;
    position:relative;
    width:580px;
    gap:10px;
    background:#F5F5F5;
    border-radius:20px;
    justify-content: center;
    padding-bottom:0px;
    margin-bottom:20px;
}

.mos-temp-var3 img {
width:190px;
height:160px;
object-fit:cover;
border-radius:20px;
margin:10px;
box-shadow: var(--img-shadow);
flex-shrink:0;
}

.mos-temp-var3 p {
width:360px;
font:var(--main-font)!important;
color:var(--text-color)!important;
padding-top:10px!important;
padding-right:10px!important;
}

</style>

<section class="mos-photo-template">
<div class="mos-photo-template-title">Заголовок</div>

<div class="mos-temp-var3 photo-viewer">

<img src="https://i.imgur.com/3u9rIXN.png" alt="photo" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel, porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim. </p>


</div>

</section>[/html]

Подпись автора

Текст Текст Текст
https://i.imgur.com/6ri3pKD.gif

0

14

[html]<style>

.mos-temp-var4 {
    display: flex;
    position: relative;
    width: 560px;
    gap: 10px;
    background: #F5F5F5;
    border-radius: 20px;
    padding-bottom: 0px;
    margin-bottom: 20px;
    flex-direction: column;
    font:var(--main-font)!important;
    color:var(--text-color)!important;
    padding:10px!important;
}

</style>

<section class="mos-photo-template">
<div class="mos-photo-template-title">Заголовок</div>

<div class="mos-temp-var4">

<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel, porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim. </span>

<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel, porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim. </span>

</div>

</section>[/html]

Подпись автора

Текст Текст Текст
https://i.imgur.com/6ri3pKD.gif

0

15

[html]<style>

.mos-temp-var5 {
display:flex;
position:relative;
width:580px;
gap:10px;
    justify-content: center;
padding-bottom:20px;
}

.mos-temp-var5 > div {
    width: 285px;
    background: #F5F5F5;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius:20px;
}

.mos-temp-var5 div img {
width: 265px;
height: 235px;
object-fit:cover;
border-radius:20px;
margin:10px;
box-shadow: var(--img-shadow);

}

.mos-temp-var5 div p {
width:265px;
font:var(--main-font)!important;
color:var(--text-color)!important;
}

</style>

<section class="mos-photo-template">
<div class="mos-photo-template-title">Заголовок</div>

<div class="mos-temp-var5 photo-viewer">

<div>
<img src="https://i.imgur.com/3u9rIXN.png" alt="photo" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel, porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim. </p>
</div>

<div>
<img src="https://i.imgur.com/3u9rIXN.png" alt="photo" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel, porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim. </p>
</div>

</div>

</section>[/html]

Подпись автора

Текст Текст Текст
https://i.imgur.com/6ri3pKD.gif

0

16

[html]<style>

.mos-temp-var6 {
    display: flex;
    position: relative;
    width: 580px;
    gap: 10px;
    justify-content: center;
    padding-bottom: 20px;
    flex-wrap: wrap;
}

.mos-temp-var6 > div {
    width: 285px;
    background: #F5F5F5;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius:20px;
}

.mos-temp-var6 div img {
width:265px;
height:130px;
object-fit:cover;
margin:10px;
border-radius:20px;
box-shadow: var(--img-shadow);
}

.mos-temp-var6 div p {
width:265px;
font:var(--main-font)!important;
color:var(--text-color)!important;
}

.mos-temp-var6 > p {
width:580px;
font:var(--main-font)!important;
color:var(--text-color)!important;
  background: #F5F5F5;
padding:10px!important;
  border-radius:15px;
  max-height:196px;
  overflow:auto;
line-height: 15.4px!important;
}

</style>

<section class="mos-photo-template">
<div class="mos-photo-template-title">Заголовок</div>

<div class="mos-temp-var6 photo-viewer">

<div>
<img src="https://i.imgur.com/3u9rIXN.png" alt="photo" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel, porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim. </p>
</div>

<div>
<img src="https://i.imgur.com/3u9rIXN.png" alt="photo" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel, porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim. </p>
</div>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel, porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel, porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel, porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel, porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel, porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel, porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel, porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel, porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel, porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel, porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel, porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel, porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel, porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim.
</p>

</div>

</section>[/html]

Подпись автора

Текст Текст Текст
https://i.imgur.com/6ri3pKD.gif

0

17

[html]<style>
.mos-greet-card {
width:600px;
height:232px;
display:flex;
background:url(https://i.imgur.com/Otm9tsW.png) no-repeat;
box-shadow: 0px 4px 32.8px 0px #5656561A;
    justify-content: center;
border-radius:20px;
margin:auto;
padding-top:20px;
gap:20px
}

.mos-greet-card div:first-child img {
box-shadow: 0px 4px 19px 0px #00000017, 0px 22px 26px 0px #00000024;
width: 250px;
height: 212px;
border-radius: 20px;
object-fit:cover;
}

.mos-greet-card div:last-child {
    width: 310px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:10px;
}

.mos-greet-card div:last-child p:nth-child(3) {
margin-bottom:20px!important;
}

.mos-greet-card div:last-child p:nth-child(3)::after {
    content: "";
    width: 100%;
    height: 2px;
    position: absolute;
    left: 0px;
    bottom: -15px;
    border-bottom: 1px dashed #737373;
}

.mos-greet-card div:last-child p:nth-child(-n+3) {
background:#FFFFFFB0;
width:100%;
border-radius:30px;
position:relative;
}

.mos-greet-card div:last-child p:nth-child(n+2):nth-child(-n+3)  {
padding:2px 4px !important;
font:400 11px var(--main-text)!important;
color:#737373!important;
}

.mos-greet-card div:last-child p:first-child {
box-shadow: 0px 12px 26px 0px #9F54FC14;
font: italic 700 16px var(--font-pf) !important;
color:var(--main-color);
height:27px;
padding:0px!important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mos-greet-card div:last-child p:nth-child(5) {
font: italic 400 19px var(--font-pf) !important;
color:var(--text-color)!important;
padding:0px !important;

}

.mos-greet-card div:last-child p:nth-child(6) {
font: italic 400 13px var(--font-pf) !important;
color:var(--text-color)!important;
padding:0px !important;

}

</style>

<section class="mos-greet-card">

<div>
<img src="https://i.imgur.com/jb3lsRC.png" alt="photo" />
</div>

<div>
<p>Имя персонажа</p>
<p>Возраст</p>
<p>Должность</p>
<img src="https://i.imgur.com/l02HP2h.png" alt="photo" />
<p>Добро пожаловать!</p>
<p>Удачи в игре!</p>

</div>

</section>[/html]

Подпись автора

Текст Текст Текст
https://i.imgur.com/6ri3pKD.gif

0

18

[hideprofile][html]<style>
.mos-shop-wrapper {
width: 693px;
height: 510px;
padding: 30px;
border-radius: 20px;
background:url(https://i.imgur.com/X7Zo0s7.png) no-repeat center top;
position:relative;
    display: flex;
    justify-content: center;
    margin:auto;
}

.mos-shop-title {
    position: absolute;
    background: var(--main-color);
    padding: 8px 20px;
    text-transform: uppercase;
    color: var(--main-bg);
    font: var(--main-font);
    border-radius: 17px 17px 10px 10px;
    margin-top: 0px;
    z-index: 2;
}

.mos-shop {
margin-top:18px;
width: 693px;
height: 463px;
border-radius: 20px;
background: #FFFFFF;
position:relative;
    z-index: 5;
}

.mos-shop-tabs input[type="radio"] {
  display: none;
}

.mos-shop-tabs label {
  display: inline-block;
  margin: 0;
  cursor: pointer;
  font: var(--main-font);
  border-bottom: none;
  text-align: center;
  color:var(--text-color);
  margin: 10px 5px;
    border-radius: 30px;
    padding: 7px 10px;
}

.mos-shop-tabs label:hover {
  background-color: #A053FF50;
}

.mos-shop-tabs input:checked + label {
    background-color: var(--main-color);
    color: var(--main-bg);
    font: var(--main-font);
    box-shadow: 0px 4px 12px 0px #A054FF45;
    border-radius: 30px;
    padding: 7px 10px;
}

.mos-shop-tab-content {
    background-color: var(--main-bg);
    width: 673px;
    height: 409px;
    margin: auto;
}

.mos-shop-tab-panel {
  display: none;
}

#mostab1:checked ~ .mos-shop-tab-content #moscontent1,
#mostab2:checked ~ .mos-shop-tab-content #moscontent2,
#mostab3:checked ~ .mos-shop-tab-content #moscontent3,
#mostab4:checked ~ .mos-shop-tab-content #moscontent4,
#mostab5:checked ~ .mos-shop-tab-content #moscontent5 {
  display: block;
}

.mod-shop-plaque {
    width: 334px;
    height: 202px;
    border-radius: 10px;
    background: #EEEEEE;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mos-shop-bag1 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.mod-shop-plaque div {
overflow:auto;
    height: 147px;
width:230px;
position:relative;
display:flex;
flex-direction: column;
gap:5px;
    margin-top: 5px;
margin-left:20px;
}

.mod-shop-plaque div img {
flex-shrink:0;
width:215px;
}

.mod-shop-plaque p {
    font: 700 11px var(--main-text) !important;
    color: var(--text-color) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 0 5px !important;
    margin: 10px 0 5px !important;
    border-bottom: var(--main-border);
    width: 97%;
}

.mos-shop-bag2 {
    background: #EEEEEE;
    width: 673px;
    height: 407px;
    border-radius: 10px;
    display: flex;
    padding-top: 1px;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
}

.mos-shop-bag2 p {
    font: 700 11px var(--main-text) !important;
    color: var(--text-color) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 0 5px !important;
    margin: 10px 0 5px !important;
    border-bottom: var(--main-border);
    width: 97%;
}

.mos-shop-bag2 div {
    width: 653px;
    height: 347px;
    gap: 6px;
}

.mos-shop-icons {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;
    justify-content: center;
    overflow: auto;
}

.mos-shop-icons img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    background: #f5f5f5;
    border-radius: 10px;
}

.mos-shop-gifts {
    width: 221px;
    height: 400px;
    background: #EEEEEE;
    padding-top: 1px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mos-shop-gifts p {
    font: 700 11px var(--main-text) !important;
    color: var(--text-color) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 0 5px !important;
    margin: 10px 0 5px !important;
    border-bottom: var(--main-border);
    width: 97%;
}

.mos-shop-gifts div {
    width: 213px;
    height: 340px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    gap:10px;
    overflow:auto;
    margin-top: 5px;
}

.mos-shop-bag3 {
    display: flex;
    gap: 5px;
    justify-content: center;
}

.mos-shop-bag4 {
    height:407px;
    display: flex;
    gap: 5px;
    justify-content: flex-start;
    background: #EEEEEE;
    border-radius: 10px;
    padding-top: 1px;
    flex-direction: column;
    align-items: center;
}

.mos-shop-bag4 p {
    font: 700 11px var(--main-text) !important;
    color: var(--text-color) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 0 5px !important;
    margin: 10px 0 5px !important;
    border-bottom: var(--main-border);
    width: 97%;
}

.mos-shop-bag4 div {
    width: 670px;
    height: 320px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    overflow: auto;
}

.mos-shop-bag5 {
    height:407px;
    display: flex;
    gap: 5px;
    justify-content: flex-start;
    background: #EEEEEE;
    border-radius: 10px;
    padding-top: 1px;
    flex-direction: column;
    align-items: center;
}

.mos-shop-bag5 p {
    font: 700 11px var(--main-text) !important;
    color: var(--text-color) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 0 5px !important;
    margin: 10px 0 5px !important;
    border-bottom: var(--main-border);
    width: 97%;
}

.mos-shop-bag5 div {
    width: 670px;
    height: 320px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    overflow: auto;
}

</style>

<section class="mos-shop-wrapper">
  <div class="mos-shop-title">МАГАЗИН</div>
  <div class="mos-shop">
    <div class="mos-shop-tabs">
      <!-- Радио-кнопки -->
      <input type="radio" id="mostab1" name="mos-shop-tabs" checked>
      <label for="mostab1">Плашки</label>

      <input type="radio" id="mostab2" name="mos-shop-tabs">
      <label for="mostab2">Иконки</label>

      <input type="radio" id="mostab3" name="mos-shop-tabs">
      <label for="mostab3">Подарки</label>

      <input type="radio" id="mostab4" name="mos-shop-tabs">
      <label for="mostab4">Фоны</label>

      <input type="radio" id="mostab5" name="mos-shop-tabs">
      <label for="mostab5">Чеки</label>

      <!-- Контейнер для содержимого -->
      <div class="mos-shop-tab-content">

<!--- контент первой вкладки ---------------->
        <div class="mos-shop-tab-panel" id="moscontent1">
<div class="mos-shop-bag1">

<div class="mod-shop-plaque">
<p><img src="https://i.imgur.com/YFS1JP1.png" alt="icon" />100</p>
<div>
<img src="https://i.imgur.com/3TS5Zru.png" alt="plaque" />
<img src="https://i.imgur.com/3TS5Zru.png" alt="plaque" />
<img src="https://i.imgur.com/3TS5Zru.png" alt="plaque" />
<img src="https://i.imgur.com/3TS5Zru.png" alt="plaque" />
<img src="https://i.imgur.com/3TS5Zru.png" alt="plaque" />
<img src="https://i.imgur.com/3TS5Zru.png" alt="plaque" />
<img src="https://i.imgur.com/3TS5Zru.png" alt="plaque" />
<img src="https://i.imgur.com/3TS5Zru.png" alt="plaque" />

</div></div>

<div class="mod-shop-plaque">
<p><img src="https://i.imgur.com/YFS1JP1.png" alt="icon" />100</p>
<div>
<img src="https://i.imgur.com/3TS5Zru.png" alt="plaque" />
<img src="https://i.imgur.com/3TS5Zru.png" alt="plaque" />
<img src="https://i.imgur.com/3TS5Zru.png" alt="plaque" />
<img src="https://i.imgur.com/3TS5Zru.png" alt="plaque" />
<img src="https://i.imgur.com/3TS5Zru.png" alt="plaque" />
<img src="https://i.imgur.com/3TS5Zru.png" alt="plaque" />
<img src="https://i.imgur.com/3TS5Zru.png" alt="plaque" />
<img src="https://i.imgur.com/3TS5Zru.png" alt="plaque" />

</div></div>

<div class="mod-shop-plaque">
<p><img src="https://i.imgur.com/YFS1JP1.png" alt="icon" />100</p>
<div>
<img src="https://i.imgur.com/3TS5Zru.png" alt="plaque" />
<img src="https://i.imgur.com/3TS5Zru.png" alt="plaque" />
<img src="https://i.imgur.com/3TS5Zru.png" alt="plaque" />
<img src="https://i.imgur.com/3TS5Zru.png" alt="plaque" />
<img src="https://i.imgur.com/3TS5Zru.png" alt="plaque" />
<img src="https://i.imgur.com/3TS5Zru.png" alt="plaque" />
<img src="https://i.imgur.com/3TS5Zru.png" alt="plaque" />
<img src="https://i.imgur.com/3TS5Zru.png" alt="plaque" />

</div></div>

<div class="mod-shop-plaque">
<p><img src="https://i.imgur.com/YFS1JP1.png" alt="icon" />100</p>
<div>
<img src="https://i.imgur.com/3TS5Zru.png" alt="plaque" />
<img src="https://i.imgur.com/3TS5Zru.png" alt="plaque" />
<img src="https://i.imgur.com/3TS5Zru.png" alt="plaque" />
<img src="https://i.imgur.com/3TS5Zru.png" alt="plaque" />
<img src="https://i.imgur.com/3TS5Zru.png" alt="plaque" />
<img src="https://i.imgur.com/3TS5Zru.png" alt="plaque" />
<img src="https://i.imgur.com/3TS5Zru.png" alt="plaque" />
<img src="https://i.imgur.com/3TS5Zru.png" alt="plaque" />

</div></div>

</div></div>

<!--- контент второй вкладки ---------------->
        <div class="mos-shop-tab-panel" id="moscontent2">
<div class="mos-shop-bag2">
<p><img src="https://i.imgur.com/YFS1JP1.png" alt="icon" />1000</p>
<div class="mos-shop-icons">
<img src="https://i.imgur.com/XfbMnFw.png" alt="icon" />
<img src="https://i.imgur.com/XfbMnFw.png" alt="icon" />
<img src="https://i.imgur.com/XfbMnFw.png" alt="icon" />

</div></div></div>

<!--- контент третьей вкладки ---------------->
        <div class="mos-shop-tab-panel" id="moscontent3">
<div class="mos-shop-bag3">

<div class="mos-shop-gifts">
<p><img src="https://i.imgur.com/YFS1JP1.png" alt="icon" />100</p>

<div>
<img src="https://i.imgur.com/m7MReIz.png" alt="gift" />
<img src="https://i.imgur.com/m7MReIz.png" alt="gift" />
<img src="https://i.imgur.com/m7MReIz.png" alt="gift" />
<img src="https://i.imgur.com/m7MReIz.png" alt="gift" />
<img src="https://i.imgur.com/m7MReIz.png" alt="gift" />
<img src="https://i.imgur.com/m7MReIz.png" alt="gift" />
<img src="https://i.imgur.com/m7MReIz.png" alt="gift" />
<img src="https://i.imgur.com/m7MReIz.png" alt="gift" />
<img src="https://i.imgur.com/m7MReIz.png" alt="gift" />
<img src="https://i.imgur.com/m7MReIz.png" alt="gift" />
<img src="https://i.imgur.com/m7MReIz.png" alt="gift" />
<img src="https://i.imgur.com/m7MReIz.png" alt="gift" />
<img src="https://i.imgur.com/m7MReIz.png" alt="gift" />
<img src="https://i.imgur.com/m7MReIz.png" alt="gift" />
<img src="https://i.imgur.com/m7MReIz.png" alt="gift" />
<img src="https://i.imgur.com/m7MReIz.png" alt="gift" />
<img src="https://i.imgur.com/m7MReIz.png" alt="gift" />
<img src="https://i.imgur.com/m7MReIz.png" alt="gift" />

</div></div>

<div class="mos-shop-gifts">
<p><img src="https://i.imgur.com/YFS1JP1.png" alt="icon" />100</p>

<div>
<img src="https://i.imgur.com/m7MReIz.png" alt="gift" />
<img src="https://i.imgur.com/m7MReIz.png" alt="gift" />
<img src="https://i.imgur.com/m7MReIz.png" alt="gift" />
<img src="https://i.imgur.com/m7MReIz.png" alt="gift" />
<img src="https://i.imgur.com/m7MReIz.png" alt="gift" />
<img src="https://i.imgur.com/m7MReIz.png" alt="gift" />

</div></div>

<div class="mos-shop-gifts">
<p><img src="https://i.imgur.com/YFS1JP1.png" alt="icon" />100</p>

<div>
<img src="https://i.imgur.com/m7MReIz.png" alt="gift" />
<img src="https://i.imgur.com/m7MReIz.png" alt="gift" />
<img src="https://i.imgur.com/m7MReIz.png" alt="gift" />
<img src="https://i.imgur.com/m7MReIz.png" alt="gift" />
<img src="https://i.imgur.com/m7MReIz.png" alt="gift" />
<img src="https://i.imgur.com/m7MReIz.png" alt="gift" />

</div></div>

</div></div>

<!--- контент четвёртой вкладки ---------------->
        <div class="mos-shop-tab-panel" id="moscontent4">
<div class="mos-shop-bag4">
<p><img src="https://i.imgur.com/YFS1JP1.png" alt="icon" />100</p>
<div>
<img src="https://i.imgur.com/GkAuLCW.png" alt="bg" />
<img src="https://i.imgur.com/GkAuLCW.png" alt="bg" />
<img src="https://i.imgur.com/GkAuLCW.png" alt="bg" />
<img src="https://i.imgur.com/GkAuLCW.png" alt="bg" />
<img src="https://i.imgur.com/GkAuLCW.png" alt="bg" />
<img src="https://i.imgur.com/GkAuLCW.png" alt="bg" />
<img src="https://i.imgur.com/GkAuLCW.png" alt="bg" />
<img src="https://i.imgur.com/GkAuLCW.png" alt="bg" />
<img src="https://i.imgur.com/GkAuLCW.png" alt="bg" />

</div></div></div>

<!--- контент пятой вкладки ---------------->
        <div class="mos-shop-tab-panel" id="moscontent5">

<div class="mos-shop-bag5">
<p><img src="https://i.imgur.com/YFS1JP1.png" alt="icon" />100</p>
<div>
<img src="https://i.imgur.com/GkAuLCW.png" alt="bg" />
<img src="https://i.imgur.com/GkAuLCW.png" alt="bg" />
<img src="https://i.imgur.com/GkAuLCW.png" alt="bg" />
<img src="https://i.imgur.com/GkAuLCW.png" alt="bg" />
<img src="https://i.imgur.com/GkAuLCW.png" alt="bg" />
<img src="https://i.imgur.com/GkAuLCW.png" alt="bg" />
<img src="https://i.imgur.com/GkAuLCW.png" alt="bg" />
<img src="https://i.imgur.com/GkAuLCW.png" alt="bg" />
<img src="https://i.imgur.com/GkAuLCW.png" alt="bg" />
</div>

</div>

</div>

      </div>
    </div>
  </div>
</section>
[/html]

Подпись автора

Текст Текст Текст
https://i.imgur.com/6ri3pKD.gif

0

19

[hideprofile][html]<style>

.mos-char-inv {
width:620px;
height:641px;
margin:auto;
border-radius:20px;
position:relative;
}

.mos-char-prof {
width: 447px;
height: 197px;
box-shadow: 0px 4px 19px 0px #00000017;
border-radius:20px;
background: #FFFFFF;
padding-top:1px;
display:flex;
position: absolute;
    top: 0px;
    left: 0px;
    z-index: 5;
}

.char-left {
    width: 135px;
    height: 157px;
    display: flex;
    flex-direction: column;
    margin: 20px 10px 10px;
    border-right: 1px dashed #BEBEBE;
    align-items: center;
    padding-right: 10px;
    justify-content: space-between;
}

.char-right {
    width: 262px;
    height: 153px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 7px;
    padding: 10px;
}

.char-left p:first-child {
font:700 11px var(--main-text)!important;
color:var(--text-color)!important;
padding:0px 0 0!important;
margin:0px!important;
}

.char-left p:nth-child(2) {
    font: 400 9px var(--main-text) !important;
    color: #737373 !important;
    width: 115px;
    height: auto;
    flex-shrink: 0;
    max-height: 10px;
    padding: 5px 0 0 !important;
    margin: 0px 0px 10px !important;
    overflow: hidden;
    text-align: center;
}

.char-left img {
width:115px;
height:120px;
border-radius:20px;
object-fit:cover;
flex-shrink:0;
}

.char-right p:first-child {
font:700 14px var(--main-text)!important;
color:var(--text-color)!important;
padding:5px 0 0!important;
margin:0px!important;
}

.char-right p:nth-child(2) {
font:400 11px var(--main-text)!important;
color:var(--text-color)!important;
padding:5px 0 0!important;
margin:0px!important;
line-height:15px!important;
width:252px;
}

.char-right div {
     width:262px;
    height: 120px;
     margin-top:10px;

}

.char-right div img {
box-shadow: 0px 4px 14px 0px #8C8C8C47;
border-radius:10px;
margin-bottom:10px;
}

/* ДРУГОЕ */

.inv-tabs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    top: 225px;
    gap: 5px;
    position: relative;
}

.inv-tabs input[type="radio"] {
  display: none;
}

.inv-tabs label {
  font:400 11px var(--main-text)!important;
  background-color: #fff;
  color:var(--text-color);
  padding: 5px 10px;
  border-radius:50px;
  text-transform:lowercase;
  margin-bottom: 5px;
  cursor: pointer;
  text-align: center;
  z-index: 10;
}

.inv-tabs label:hover {
  background-color: #e1c9ff;
}

.inv-tabs input:checked + label {
  background-color: var(--main-color);
  color: #fff;
  box-shadow: 0px 4px 12px 0px #A054FF45;
}

.inv-tab-content {
    flex-shrink: 0;
    background: url(https://i.imgur.com/FLKc5rQ.png) no-repeat;
    width: 577px;
    height: 540px;
    position: absolute;
    bottom: -285px;
    right: 0px;
    border-radius: 20px;
    box-shadow: 0px 4px 32.8px 0px #5656561A;
}

.inv-tab-panel {
  display: none;

}

#inv-tab1:checked ~ .inv-tab-content #inv-content1,
#inv-tab2:checked ~ .inv-tab-content #inv-content2,
#inv-tab3:checked ~ .inv-tab-content #inv-content3,
#inv-tab4:checked ~ .inv-tab-content #inv-content4,
#inv-tab5:checked ~ .inv-tab-content #inv-content5 {
  display: block;
}

.inv-bag {
    width: 513px;
    height: 394px;
    background: #F5F5F5;
    border-radius: 20px;
    margin: 120px 0 0 60px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 30px 10px;
    overflow: auto;
    padding: 10px 0px;
    justify-content: center;
}

.inv-challenge {
    width: 231px;
    height: 167px;
    border: 1px solid #E9E9E9;
    border-radius: 23px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.inv-challenge img {
box-shadow: 0px 4px 19px 0px #00000017;
width:227px;
height:130px;
object-fit:cover;
border-radius:20px;
margin:2px auto;
}

.inv-challenge p {
font:var(--main-font)!important;
color:var(--text-color)!important;
padding:0px!important;
width:220px;
height:30px;
display:flex;
    align-items: center;
    justify-content: center;
overflow:hidden;
}

</style>

<section class="mos-char-inv">
<div class="mos-char-prof">
<div class="char-left">
<p>@nickname</p>
<p>какой-то длинный статус какой-то длинный статус </p>
<img src="https://i.imgur.com/jb3lsRC.png" alt="avatar" />
</div>

<div class="char-right">
<p>Какой-то заголовок </p>
<p>Значимость этих проблем настолько очевидна, что реализация намеченных плановых заданий обеспечивает</p>
<div>
<img src="https://i.imgur.com/YUxQ9e3.png" alt="plaque" />
<img src="https://i.imgur.com/YUxQ9e3.png" alt="plaque" />

</div>
</div>
</div>

<div class="inv-tabs">
  <!-- Кнопки переключения -->
  <input type="radio" id="inv-tab1" name="tabs" checked>
  <label for="inv-tab1">Вкладка 1</label>

  <input type="radio" id="inv-tab2" name="tabs">
  <label for="inv-tab2">Вкладка 2</label>

  <input type="radio" id="inv-tab3" name="tabs">
  <label for="inv-tab3">Вкладка 3</label>

  <input type="radio" id="inv-tab4" name="tabs">
  <label for="inv-tab4">Вкладка 4</label>

  <!-- Контейнеры -->
  <div class="inv-tab-content">

<!-- первая вкладка --------------->
    <div class="inv-tab-panel" id="inv-content1">

<div class="inv-bag">

<div class="inv-challenge">
<img src="https://i.imgur.com/VrpbmZn.png" alt="photo" />
<p>Короткое описание легкого задания</p> <!-- макс две строки -->
</div>

<div class="inv-challenge">
<img src="https://i.imgur.com/VrpbmZn.png" alt="photo" />
<p>Короткое описание легкого задания</p>
</div>

<div class="inv-challenge">
<img src="https://i.imgur.com/VrpbmZn.png" alt="photo" />
<p>Короткое описание легкого задания</p>
</div>

<div class="inv-challenge">
<img src="https://i.imgur.com/VrpbmZn.png" alt="photo" />
<p>Короткое описание легкого задания</p>
</div>

</div></div>

<!-- вторая вкладка --------------->
    <div class="inv-tab-panel" id="inv-content2">
<div class="inv-bag">

<div class="inv-challenge">
<img src="https://i.imgur.com/VrpbmZn.png" alt="photo" />
<p>Короткое описание легкого задания</p> <!-- макс две строки -->
</div>

<div class="inv-challenge">
<img src="https://i.imgur.com/VrpbmZn.png" alt="photo" />
<p>Короткое описание легкого задания</p>
</div>

<div class="inv-challenge">
<img src="https://i.imgur.com/VrpbmZn.png" alt="photo" />
<p>Короткое описание легкого задания</p>
</div>

<div class="inv-challenge">
<img src="https://i.imgur.com/VrpbmZn.png" alt="photo" />
<p>Короткое описание легкого задания</p>
</div>

</div></div>

<!-- третья вкладка --------------->
    <div class="inv-tab-panel" id="inv-content3">
<div class="inv-bag">

<div class="inv-challenge">
<img src="https://i.imgur.com/VrpbmZn.png" alt="photo" />
<p>Короткое описание легкого задания</p> <!-- макс две строки -->
</div>

<div class="inv-challenge">
<img src="https://i.imgur.com/VrpbmZn.png" alt="photo" />
<p>Короткое описание легкого задания</p>
</div>

<div class="inv-challenge">
<img src="https://i.imgur.com/VrpbmZn.png" alt="photo" />
<p>Короткое описание легкого задания</p>
</div>

<div class="inv-challenge">
<img src="https://i.imgur.com/VrpbmZn.png" alt="photo" />
<p>Короткое описание легкого задания</p>
</div>

</div></div>

<!-- четвёртая вкладка --------------->
    <div class="inv-tab-panel" id="inv-content4">
<div class="inv-bag">

<div class="inv-challenge">
<img src="https://i.imgur.com/VrpbmZn.png" alt="photo" />
<p>Короткое описание легкого задания</p> <!-- макс две строки -->
</div>

<div class="inv-challenge">
<img src="https://i.imgur.com/VrpbmZn.png" alt="photo" />
<p>Короткое описание легкого задания</p>
</div>

<div class="inv-challenge">
<img src="https://i.imgur.com/VrpbmZn.png" alt="photo" />
<p>Короткое описание легкого задания</p>
</div>

<div class="inv-challenge">
<img src="https://i.imgur.com/VrpbmZn.png" alt="photo" />
<p>Короткое описание легкого задания</p>
</div>

<div class="inv-challenge">
<img src="https://i.imgur.com/VrpbmZn.png" alt="photo" />
<p>Короткое описание легкого задания</p>
</div>

<div class="inv-challenge">
<img src="https://i.imgur.com/VrpbmZn.png" alt="photo" />
<p>Короткое описание легкого задания</p>
</div>

</div></div>

  </div>
</div>

</section>[/html]

Подпись автора

Текст Текст Текст
https://i.imgur.com/6ri3pKD.gif

0

Страница:   1 2

Вы здесь » TestSW2 » Новый форум » Шаблоны WIP

Рейтинг форумов | Создать форум бесплатно