Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!

Как сделать Епархию как у CRMP online

M

Moestro Watson

Июн
9
2
Пользователь
Здравствуйте подскажите пожалуйста как сделать епархию должностей как у CRMP online HTML код можете дать пожалуйста
 
Решение
G
Moestro Watson написал(а):
Здравствуйте подскажите пожалуйста как сделать епархию должностей как у CRMP online HTML код можете дать пожалуйста
Нажмите для раскрытия...
Иерархия официальной администрации:

HTML: 
<div class="p-body-main  ">
<div class="p-body-content is-active">  
<div class="p-body-pageContent">
<div class="block">
<div class="block-container">
<div class="block-body block-row">
<style>
.staff-hierarchy {
  list-style: none;
  padding: 0;
  margin: 40px auto;
  max-width: 500px;
  font-family: 'Segoe UI', Arial, sans-serif;
  text-align: left;
}

.staff-hierarchy li {
  margin: 16px 0;
  padding: 14px 22px;
  border-radius: 8px;
  position: relative;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 4px 15px rgba(0,0,0,0.5)...
Сортировка по дате Сортировка по голосам
Spolzer

Spolzer

C++ - 0x0000FFFF
Июн
3,359
2,956
Команда форума
Модератор
Moestro Watson написал(а):
Не успел исправить вот Здравствуйте подскажите пожалуйста как сделать Иерархия всех должностей как у CRMP online HTML код можете дать пожалуйста
Нажмите для раскрытия...
Ссылку можно на эту иерархию?
 
Позитивный голос 0 Негативный голос
G

Gertaz

Фев
8
1
Пользователь
Moestro Watson написал(а):
Здравствуйте подскажите пожалуйста как сделать епархию должностей как у CRMP online HTML код можете дать пожалуйста
Нажмите для раскрытия...
Иерархия официальной администрации:

HTML: 
<div class="p-body-main  ">
<div class="p-body-content is-active">  
<div class="p-body-pageContent">
<div class="block">
<div class="block-container">
<div class="block-body block-row">
<style>
.staff-hierarchy {
  list-style: none;
  padding: 0;
  margin: 40px auto;
  max-width: 500px;
  font-family: 'Segoe UI', Arial, sans-serif;
  text-align: left;
}

.staff-hierarchy li {
  margin: 16px 0;
  padding: 14px 22px;
  border-radius: 8px;
  position: relative;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  font-size: 16px;
}

.staff-hierarchy li:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.7);
}

.staff-hierarchy li::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 40px;
  background: linear-gradient(to bottom, #666, transparent);
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  opacity: 0.3;
}

.staff-hierarchy li:last-child::after {
  display: none;
}

.jr-moderator {
  color: #77DDFF;
  font-weight: bold;
  text-shadow: #77DDFF 1px 1px 10px;
}

.moderator {
  color: #cfcf02;
  font-weight: bold;
  text-shadow: #cfcf02 1px 1px 10px;
}

.faction-watcher {
  color: #3333ff;
  text-shadow: #33f 1px 1px 10px;
  font-weight: bold;
}

.deputy-head-watcher {
  color: #0066FF;
  font-weight: bold;
  text-shadow: #0066FF 1px 1px 10px;
}

  .founder {
  color: yellow;
  font-weight: bold;
  text-shadow: orange 1px 1px 10px;
}
   
.head-watcher {
  color: #55AA00;
  font-weight: bold;
  text-shadow: #55AA00 1px 1px 10px;
}

.curator {
  color: #0ef;
  font-weight: bold;
  text-shadow: #c0f 1px 1px 10px;
}

.deputy-ga {
  color: #339900;
  font-weight: bold;
  text-shadow: 1px 1px 10px #339900;
}

.ga {
  color: #0fbd4f;
  font-weight: bold;
  text-shadow: #15e87b 1px 1px 10px;
}

.special-admin {
  color: red;
  font-weight: bold;
  text-shadow: red 1px 1px 10px;
}

.deputy-head {
  color: #ff4040;
  font-weight: bold;
  text-shadow: #ff4040 1px 1px 10px;
}

.project-head {
  color: red;
  font-weight: bold;
  text-shadow: red 1px 1px 10px;
}

.deputy-founder {
  color: #FFD700;
  font-weight: bold;
  text-shadow: orange 1px 1px 10px;
}

</style>

<ul class="staff-hierarchy">
  <li><span class="jr-moderator">Младший модератор</span></li>
  <li><span class="moderator">Модератор</span></li>
  <li><span class="faction-watcher">Следящий за фракцией</span></li>
  <li><span class="deputy-head-watcher">Заместитель главного следящего</span></li>
  <li><span class="head-watcher">Главный следящий </span></li>
  <li><span class="curator">Куратор</span></li>
  <li><span class="deputy-ga">Заместитель главного администратора</span></li>
  <li><span class="ga">Главный администратор</span></li>
  <li><span class="special-admin">Специальный администратор</span></li>
  <li><span class="deputy-head">Заместитель руководителя</span></li>
  <li><span class="project-head">Руководитель проекта</span></li>
  <li><span class="deputy-founder">Заместитель основателя</span></li>
  <li><span class="founder">Основатель</span></li>
</ul>
</div>
</div>
</div>
 
Позитивный голос 1 Негативный голос
Решение
G

Gertaz

Фев
8
1
Пользователь
Иерархия технических специалистов:​

HTML: 
<div class="block">
        <div class="block-container">
            <div class="block-body block-row">
                <style>
.neon-hierarchy {
  list-style: none;
  padding: 0;
  margin: 40px auto;
  max-width: 420px;
  font-family: Arial, sans-serif;
  text-align: center;
}

.neon-hierarchy li {
  margin: 18px 0;
  padding: 14px 22px;
  border-radius: 14px;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  position: relative;
  background: linear-gradient(135deg, #ff9a2f, #ff7a00);
  box-shadow:
    0 0 8px rgba(255, 140, 0, 0.45),
    inset 0 0 10px rgba(255,255,255,0.08);
  transition: transform .25s ease, box-shadow .25s ease;
}

.neon-hierarchy li:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow:
    0 0 14px rgba(255, 150, 40, 0.7),
    inset 0 0 12px rgba(255,255,255,0.15);
}

.neon-hierarchy li::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 32px;
  background: linear-gradient(to bottom, #ff9f2e, transparent);
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
}

.neon-hierarchy li:last-child::after {
  display: none;
}

.level-1 { background: linear-gradient(135deg, #ffd27d, #ffb347); }
.level-2 { background: linear-gradient(135deg, #ffcc66, #ffa733); }
.level-3 { background: linear-gradient(135deg, #ffb84d, #ff9a2f); }
.level-4 { background: linear-gradient(135deg, #ffa500, #ff8c00); }
.level-5 { background: linear-gradient(135deg, #ff9a2f, #ff7a00); }
.level-6 { background: linear-gradient(135deg, #ff8c00, #ff6f00); }
.level-7 { background: linear-gradient(135deg, #ff7a00, #ff5f00); }
.level-8 { background: linear-gradient(135deg, #ff6600, #ff4400); }
</style>

<ul class="neon-hierarchy">
  <li class="level-1">Технический специалист</li>
  <li class="level-1">Старший технический специалист</li>
  <li class="level-1">Куратор технических специалистов</li>
  <li class="level-1">Заместитель главного технического специалиста</li>
   <li class="level-1">Основной заместитель главного технического специалиста</li>
  <li class="level-1">Главный технический специалист</li>
</ul>
            </div>
        </div>
       
    </div>


Иерархия VK
​
HTML: 
<div class="block">
        <div class="block-container">
            <div class="block-body block-row">
                <style>
.neon-hierarchy {
  list-style: none;
  padding: 0;
  margin: 40px auto;
  max-width: 420px;
  font-family: Arial, sans-serif;
  text-align: center;
}

.neon-hierarchy li {
  margin: 18px 0;
  padding: 14px 22px;
  border-radius: 14px;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  position: relative;
  background: linear-gradient(135deg, #ff9a2f, #ff7a00);
  box-shadow:
    0 0 8px rgba(255, 140, 0, 0.45),
    inset 0 0 10px rgba(255,255,255,0.08);
  transition: transform .25s ease, box-shadow .25s ease;
}

.neon-hierarchy li:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow:
    0 0 14px rgba(255, 150, 40, 0.7),
    inset 0 0 12px rgba(255,255,255,0.15);
}

.neon-hierarchy li::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 32px;
  background: linear-gradient(to bottom, #ff9f2e, transparent);
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
}

.neon-hierarchy li:last-child::after {
  display: none;
}

.level-1 { background: linear-gradient(135deg, #ffd27d, #ffb347); }
.level-2 { background: linear-gradient(135deg, #ffcc66, #ffa733); }
.level-3 { background: linear-gradient(135deg, #ffb84d, #ff9a2f); }
.level-4 { background: linear-gradient(135deg, #ffa500, #ff8c00); }
.level-5 { background: linear-gradient(135deg, #ff9a2f, #ff7a00); }
.level-6 { background: linear-gradient(135deg, #ff8c00, #ff6f00); }
.level-7 { background: linear-gradient(135deg, #ff7a00, #ff5f00); }
.level-8 { background: linear-gradient(135deg, #ff6600, #ff4400); }
</style>

<ul class="neon-hierarchy">
  <li class="level-1">Модератор</li>
  <li class="level-2">Старший модератор</li>
  <li class="level-3">Помощник куратора модерации</li>
  <li class="level-4">Куратор модерации</li>
  <li class="level-5">Заместитель главного модератора</li>
  <li class="level-6">Основной заместитель главного модератора</li>
  <li class="level-7">Главный модератор</li>
</ul>
            </div>
        </div>
       
    </div>
 
Позитивный голос 1 Негативный голос
Войдите или зарегистрируйтесь для ответа.
Сверху