шаблон магия/боги

[html]
<style>
section.magic-list {
position: relative;
width: 1040px;
height: 430px;
background-image: url(https://forumstatic.ru/files/001c/be/2e/72556.png);
background-repeat: no-repeat;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
margin: 1px auto 0 -28px !important;
box-sizing: border-box;
padding: 35px 15px 15px;
display: flex;
flex-direction: column;
align-items: center;
color: rgba(194, 194, 194, 1);
}

section.magic-list * {
box-sizing: border-box;
scrollbar-gutter: stable;
}

section.magic-list h5 {
font-family: Moisette;
font-weight: 600;
font-style: Italic;
font-size: 48px;
line-height: 1;
align-self: flex-start;
text-align: center;
margin-left: 30px;
padding-left: 10px;
text-transform: lowercase;
display: block;
width: fit-content;
background: linear-gradient(90deg, #e3ac67 0%, #746043 100%);
transition: --gradient-x 0.7s ease, --gradient-y 0.7s ease !important;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
z-index: 1;
}

section.magic-list .vtab-content {
display: none;
margin-top: 10px;
}

section.magic-list .vtab-content.active {
display: block;
}

section.magic-list .vtab-btn {
padding: 3px 10px;
margin-right: 5px;
cursor: pointer;
border-radius: 50px;
background: rgba(34, 32, 29, 1);
border: 0;
font-family: Moisette;
font-weight: 500;
font-style: Italic;
font-size: 12px;
line-height: 1;
text-transform: lowercase;
color: white;
transition: background 0.3s;
}

section.magic-list .vtab-btn.active {
background: rgba(187, 144, 89, 1);
box-shadow: 0px 0px 13.7px 0px rgba(187, 144, 89, 1);
}

section.magic-list .vtab-buttons {
display: flex;
flex-wrap: wrap;
gap: 7px;
flex-shrink: 0;
position: absolute;
top: -42px;
right: 2px;
}

section.magic-list div.occ-list {
display: flex;
flex-wrap: wrap;
gap: 18px 30px;
padding-right: 4px;
overflow: auto;
height: 100%;
flex-grow: 1;
}
section.magic-list div.vtab-content>.occ-list> ttl,
section.magic-list div.vtab-content>ttl {
font-family: Moisette;
font-weight: 600;
font-style: Italic;
font-size: 24px !important;
line-height: 1;
text-align: left;
align-self: flex-start;
text-align: center;
margin-left: 0px;
padding-left: 5px;
text-transform: lowercase;
display: block;
width: fit-content;
background: linear-gradient(90deg, #e3ac67 0%, #746043 100%);
transition: --gradient-x 0.7s ease, --gradient-y 0.7s ease !important;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
z-index: 1;
}

section.magic-list div.vtab-content>.occ-list> ttl {
position: relative;
width: 100%;
text-align: left;
}

section.magic-list div.occ-list>div {
width: 47%;
border-radius: 5px;
background: rgba(51, 48, 43, 0.5);
padding: 10px 20px 14px;
display: flex;
flex-direction: column;
gap: 4px;
flex-grow: 1;
font-family: Pragmatica;
font-weight: 400;
font-size: 10px;
line-height: 137%;
}

section.magic-list div.occ-list ttl {
width: 100%;
display: block;
font-family: Moisette;
font-weight: 400;
font-style: Italic;
font-size: 14px;
line-height: 120%;
}

section.magic-list div.occ-list>div occ {
font-size: 12px;
color: rgba(194, 194, 194, 1);
position: relative;
}

section.magic-list div.occ-list>div occ::before {
content: '\f007';
font-family: 'FontAwesome';
line-height: 1;
font-size: 10px;
color: rgba(194, 194, 194, 1);
margin-right: 7px;
}

section.magic-list .vtabs-wrapper,
section.magic-list .vtabs-cont {
width: 100%;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
padding: 10px 10px 15px 23px;
border-radius: 5px;
position: relative;
z-index: 2;
}

section.magic-list .vtab-content {
display: none;
margin-top: 10px;
}

section.magic-list .vtab-content.active {
display: flex !important;
flex-direction: column;
height: 242px;
}

section.magic-list div.occ-list {
display: flex;
flex-wrap: wrap;
gap: 15px;
padding-right: 4px;
}

section.magic-list div.occ-list spell {
display: flex;
gap: 5px;
}

section.magic-list div.occ-list spell span {
padding: 3px 10px;
margin-right: 5px;
cursor: pointer;
border-radius: 50px;
background: rgba(75, 75, 75, 0.8);
border: 0;
font-family: Moisette;
font-weight: 500;
font-style: Italic;
font-size: 12px;
line-height: 1;
text-transform: lowercase;
color: white;
transition: background 0.3s;

}
</style>

<section class='magic-list'>
<h5>магия</h5>

<div class="vtabs-wrapper ">
<div class="vtabs-cont">
<div class="vtab-buttons">
<button class="vtab-btn">Вкладка 1</button>
<button class="vtab-btn">Вкладка 2</button>
<button class="vtab-btn">Вкладка 3</button>
<button class="vtab-btn">Вкладка 4</button>

</div>
<div class="vtab-content">

<div>
<ttl>название скилла</ttl>
Большую часть своей жизни я провел, оберегая свое…нет. Большую часть своей жизни я провел,
оберегая свое…нет. Большую часть своей жизни я провел, оберегая свое…нет. Большую часть своей
жизни я провел, оберегая свое…нет.
<spell><span>кем наложен</span><span>владеет</span></spell>
</div>

<div>
<ttl>название скилла</ttl>
Большую часть своей жизни я провел, оберегая свое…нет. Большую часть своей жизни я провел,
оберегая свое…нет.
<spell><span>кем наложен</span><span>владеет</span></spell>
</div>

</div>
<ttl>имя бога</ttl>

</div>
</div>

<div class="vtab-content">
<div class='occ-list'>
<ttl>название домена</ttl>

<div>
<ttl>название скилла</ttl>
Большую часть своей жизни я провел, оберегая свое…нет. Большую часть своей жизни я провел,
оберегая
свое…нет. Большую часть своей жизни я провел, оберегая свое…нет. Большую часть своей жизни я
провел,
оберегая свое…нет.
<spell><span>кем наложен</span><span>владеет</span></spell>
</div>

<div>
<ttl>название скилла</ttl>
Большую часть своей жизни я провел, оберегая свое…нет. Большую часть своей жизни я провел,
оберегая
свое…нет.
<spell><span>кем наложен</span><span>владеет</span></spell>
</div>

<div>
<ttl>название скилла</ttl>
Большую часть своей жизни я провел, оберегая свое…нет. Большую часть своей жизни я провел,
оберегая
свое…нет. Большую часть своей жизни я провел, оберегая свое…нет. Большую часть своей жизни я
провел,
оберегая свое…нет.
<spell><span>кем наложен</span><span>владеет</span></spell>
</div>

</div>

</div>
<div class="vtab-content">

<ttl>название можно убирать - будет скролл всего контейнера ниже</ttl>

<div>
<ttl>название скилла</ttl>
Большую часть своей жизни я провел, оберегая свое…нет. Большую часть своей жизни я провел,
оберегая
свое…нет. Большую часть своей жизни я провел, оберегая свое…нет. Большую часть своей жизни я
провел,
оберегая свое…нет.
<spell><span>кем наложен</span><span>владеет</span></spell>
</div>

<div>
<ttl>название скилла</ttl>
Большую часть своей жизни я провел, оберегая свое…нет. Большую часть своей жизни я провел,
оберегая
свое…нет.
<spell><span>кем наложен</span><span>владеет</span></spell>
</div>

<div>
<ttl>название скилла</ttl>
Большую часть своей жизни я провел, оберегая свое…нет. Большую часть своей жизни я провел,
оберегая
свое…нет. Большую часть своей жизни я провел, оберегая свое…нет. Большую часть своей жизни я
провел,
оберегая свое…нет.
<spell><span>кем наложен</span><span>владеет</span></spell>
</div>

</div>

<div>
<ttl>название скилла</ttl>
Большую часть своей жизни я провел, оберегая свое…нет. Большую часть своей жизни я провел,
оберегая свое…нет. Большую часть своей жизни я провел, оберегая свое…нет. Большую часть
своей
жизни я провел, оберегая свое…нет.
<spell><span>кем наложен</span><span>владеет</span></spell>
</div>

</div>

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

[/html][hideprofile]

Подпись автора: Эффектная подпись

Test

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

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

Объявление

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

шаблон магия/боги

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

Перевести Поделиться12026-08-20 09:13:30

Поделиться22026-08-20 13:54:41

Test

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

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

Объявление

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

шаблон магия/боги

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

ПеревестиПоделиться12026-08-20 09:13:30

Поделиться22026-08-20 13:54:41

Перевести Поделиться12026-08-20 09:13:30