[html]<style>
@font-face {
  font-family: RadjhaniRu;
  src: url('https://forumstatic.ru/files/001c/04/0a/51541.ttf')
}

@font-face {
  font-family: 'Corbel';
  src: url('https://forumstatic.ru/files/001c/17/76/83460.ttf')
}

:root {
--border-color: #fe934c;
--bg-color-light:#e1e1e1;
--bg-color-dark:#121212;
}

#wrapper {
display:block;
position: relative;
width:100%;
height: 875px;
background-color:var(--bg-color-light);
overflow: hidden;
z-index: 10;
}

#left-side-strip {
    position: absolute;
    width: 200px;
    height: 100%;
    border-right: solid 25px var(--border-color);
    background-color: var(--bg-color-dark);
}

#left-side-strip::before {
    content: '';
    position: absolute;
    width: 114px;
    height: 250px;
    border-right: solid 34px var(--border-color);
    margin: -91px 1px 0px 187px;
    transform: rotate(45deg);
}

#left-side-strip::after {
    content: '';
    position: absolute;
    width: 114px;
    height: 250px;
    top: 0px;
    background-color: var(--bg-color-dark);
    margin: -91px 1px 0px 187px;
    transform: rotate(45deg);
}

#main-cont {
display:block;
width:100%;
height:500px;
color:#e1e1e1;
}

#main-cont h1 {
display: block;
    position: relative;
    z-index: 8;
    font-family: 'RadjhaniRu';
    font-size: 70px;
    width: 100%;
    color: transparent;
}

#main-cont h1 p {
    display: block;
    position: relative;
    z-index: 8;
    font-family: 'RadjhaniRu';
    font-size: 60px;
    width: 100%;
    padding: 15px 30px;
    margin-top: -4px;
    color: transparent;
    text-transform: none;
    font-weight: 100;
    line-height: 105%;
    background: linear-gradient(0deg, rgb(221 90 82) 0%, rgb(254 147 76) 100%);
    -webkit-background-clip: text;
   
}

#main-cont h1::before{
    content: '';
    position: absolute;
    z-index: 0;
    width: 825px;
    height: 133px;
    left: 0px;
    background: #121212;
    border-bottom: 8px solid var(--softred);
    border-top: 8px solid var(--border-color);
    clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
}

#main-cont img {
    z-index: 4;
    width: 400px;
    padding: 10px 70px;
}

.list-item-uniq {
    display: flex;
    width: 270px;
    height: 100px;
    border-radius: 50px;
    top: 206px;
    position: relative;
    margin-bottom: 43px;
}

.list-item-uniq p {
background-color: var(--bg-color-dark);
    padding: 46px 4px 0px 4px !important;
    height: 25px;
    width: 157px;
    display: block;
    margin: -21px 0 0 0px !important;
    font-family: sans-serif;
    text-align: right;
    font-size: 1.3em;
    color: #c4c5c6 !important;
    font-weight: bold;
    z-index: 7;
    position: relative;
    border-bottom: 3px solid var(--border-color);
}

.img-card-uniq::after {
    content: attr(data-info);
    position: absolute;
    width: 148px;
    font-size: 12px;
    line-height: 100%;
    margin: 3px 0px 0 -163px;
    padding: 11px 4px;
    text-align: center;
    color: #6c5b4e;
    font-family: sans-serif;
    background-color: var(--bg-color-light);
    z-index: 1;
    border-radius: 0 0 15px 15px;
    transition: ease-in-out .4s;
}

.img-card-uniq:hover::after {
    transform: translate(0px, 37px);
}

.img-card-uniq {
display: block;
    border-radius: 50%;
    border: 3px solid var(--border-color);
    width: 100px;
    height: 100px;
    background-size: 120%;
    background-position: center;
    margin: 0px 0 0 165px;
    z-index: 5;
    transition: ease-in-out .4s;
}

.img-card-uniq:hover {
    background-size: 100%;
    border-radius:21%;
}

.first-img {
    content: '';
    position: absolute;
    width: 90px;
    height: 90px;
    transition: ease-in-out .4s;
    background-image: url(https://i.imgur.com/kVrfR7d.jpeg);
}

.first-img::before{
    content: '';
    position: absolute;
    width: 90px;
    height: 90px;
    transition: ease-in-out .4s;
    background: url(https://i.imgur.com/dqg6tst.png) no-repeat center;
    background-size: 75%;
}

.first-img:hover::before{
   background-size: 102%;
}

.second-img {
    content: '';
    position: absolute;
    width: 90px;
    height: 90px;
    transition: ease-in-out .4s;
    background-image: url(https://i.imgur.com/3ogM4En.png);
}

.second-img::before{
    content: '';
    position: absolute;
    width: 90px;
    height: 90px;
    transition: ease-in-out .4s;
    background: url(https://i.imgur.com/OFQqrrS.png) no-repeat center;
    background-size: 75%;
}

.second-img:hover::before{
   background-size: 102%;
}

.third-img {
    content: '';
    position: absolute;
    width: 90px;
    height: 90px;
    transition: ease-in-out .4s;
    background-image: url(https://i.imgur.com/DGRVvln.png);
}

.third-img::before{
    content: '';
    position: absolute;
    width: 90px;
    height: 90px;
    transition: ease-in-out .4s;
    background: url(https://i.imgur.com/ryyIxHE.png) no-repeat center;
    background-size: 75%;
}

.third-img:hover::before{
   background-size: 102%;
}

.fourth-img {
    content: '';
    position: absolute;
    width: 90px;
    height: 90px;
    transition: ease-in-out .4s;
    background-image: url(https://i.imgur.com/m8W0oDB.png);
}

.fourth-img::before{
    content: '';
    position: absolute;
    width: 90px;
    height: 90px;
    transition: ease-in-out .4s;
    background: url(https://i.imgur.com/gpgvfHR.png) no-repeat center;
    background-size: 75%;
}

.fourth-img:hover::before{
   background-size: 102%;
}

div#text-cont-uniq {
display:block;
position:inherit;
background: #c4c5c6;
    margin-left: 225px;
    width: 544px;
    height: 400px;
    background: url(https://i.imgur.com/W8HQ3hT.png) no-repeat 0% / 142%;

}

div.carousel-item p{
    font-size: 17px;
    color: black !important;
    font-family: 'Corbel';
    letter-spacing: 0px;
    text-indent: 35px;
    text-align: justify;
    max-height: 97%;
    overflow: auto;
    padding: 0px 10px 15px 20px !important;
}

.carousel-wrapper {
  position: relative;
        height: 115%;
    width: 69%;
    margin-left: 274px;

}

  .carousel-item {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffffa6;
    backdrop-filter: blur(5px);
    padding: 25px 50px;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

  .carousel-item img {
display:block;
}

    .arrow {
    position: absolute;
    top: 0;
    display: block;
    width: 50px;
    height: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    background: url(https://i.imgur.com/j65Rq6P.png) 50% 50% / 42px no-repeat;

      &.arrow-prev {
        left: 0;
      }

      &.arrow-next {
        right: 0;
        -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
      }
    }

    &.light {
      color: white;

      .arrow-uniq {
        background: url("https://static-00.iconduck.com/assets.00/arrow-right-circle-icon-1024x1024-vd5nvvdh.png") 50% 50% / 20px no-repeat;
      }
    }

  [id^="target-item"] {
    display: none;
  }

  .item-1 {
    z-index: 2;
    opacity: 1;
  }

  *:target ~ .item-1 {
    opacity: 0;
  }

  #target-item-1:target ~ .item-1 {
    opacity: 1;
  }

  #target-item-2:target ~ .item-2, #target-item-3:target ~ .item-3 {
    z-index: 3;
    opacity: 1;
  }
}

div.carousel-item div::-webkit-scrollbar {
  width: 2px  !important;
  height: 2px
}

div.carousel-item div::-webkit-scrollbar-track:vertical {
  background: #f5f5f5  !important
}

div.carousel-item div::-webkit-scrollbar-thumb:vertical {
  background: var(--border-color) !important
}

.carousel-item>div {
    font-size: 17px;
    color: black !important;
    font-family: 'Corbel';
    letter-spacing: 0px;
    text-indent: 35px;
    text-align: justify;
    max-height: 97%;
    overflow: auto;
    padding: 0px 10px 15px 20px !important;
}

.carousel-item>div>h4 {
font-family: 'RadjhaniRu';
    font-weight: 100;
    font-size: 23px;
    color: var(--border-color);
    margin-bottom: 10px;
}

.carousel-item>div>p>span {
font-weight:bold;
}

.buttons-uniq {
display: flex;
    position: relative;
    z-index: 50;
    margin: 12px 50px 50px 250px;
    justify-content: center;
}

.buttons-uniq a {
background: var(--border-color);
    padding: 10px 25px;
    margin: 10px 45px;
    width: 100px;
    text-align: center;
    font-family: 'Corbel';
    font-weight: bold;
    font-size: 1.1em;
    color: var(--bg-color-dark);
   border-radius: 20px;
    transition: ease-in-out .5s;
}

.buttons-uniq a:hover {
    color: #de5b52;
    background: var(--bg-color-light);
}

.buttons-uniq a::before {
content: '';
    background: url(https://i.imgur.com/j65Rq6P.png) no-repeat 0% / 33px;
    position: absolute;
    display: block;
    margin: -10px 1px 0 -40px;
    width: 39px;
    height: 35px;
    object-fit: cover;
    transform: rotate(0deg);
transition: ease-in-out .5s;

}

.buttons-uniq a::after {
content: '';
    background: url(https://i.imgur.com/j65Rq6P.png) no-repeat 0% / 35px;
    position: absolute;
    display: block;
    margin: -25px 1px 0 98px;
    width: 39px;
    height: 35px;
    object-fit: cover;
    transform: rotate(180deg);
transition: ease-in-out .5s;
}

.buttons-uniq a:hover::before {
    transition-delay: .8s;
        transform: rotate(180deg);
}

.buttons-uniq a:hover::after {
    transition-delay: .4s;
    transform: translate(-10px, 0px) rotate(180deg);
}

#main-cont > div.carousel-wrapper > div.carousel-item.item-3 > div > p > a {
font-weight:bold;
color: #e76b51;
transition: ease-in-out .4s;
}

#main-cont > div.carousel-wrapper > div.carousel-item.item-3 > div > p > a:hover {
color: blue;
color: #fc904d;
}

</style>

<section id='wrapper'>
<div id='left-side-strip'>

<div class='list-item-uniq'>
<p class='item-title-uniq'>МАКЕТЫ</p>
<div data-info='Создание оригинальных макетов в фотошопе с учётом ТЗ' class="img-card-uniq first-img" />
</div>

<div class='list-item-uniq'>
<p class='item-title-uniq'>ВЁРСТКА</p>
<div data-info='Перенос дизайна на платформу с использованием css и js' class="img-card-uniq second-img" />
</div>

<div class='list-item-uniq'>
<p class='item-title-uniq'>JAVASCRIPT</p>
<div data-info='Больше оригинальности за счёт индивидуальных скриптов!' class="img-card-uniq third-img" />
</div>

<div class='list-item-uniq'>
<p class='item-title-uniq'>АРТЫ НА ЗАКАЗ</p>
<div data-info='Арт в шапку или для души от профессионального художника' class="img-card-uniq fourth-img" />
</div>

</div>
<div id='main-cont'>
<h1><p>Дизайн от Templado Rex<br>Вёрстка от Vandra</p></h1>

<div class="carousel-wrapper">

  <span id="target-item-1" />
  <span id="target-item-2" />
  <span id="target-item-3" />

  <div class="carousel-item item-1">

    <h2>Item 1</h2>
    <p><h2>Услуги</h2>

<div><h4>1. Дизайн и Вёрстка</h4>

<p><span>Дизайн форума:</span> Дизайнер создаст макет в формате .psd, с которым сможет работать верстальщик. К тому же наш дизайнер - профессиональный художник и может нарисовать арт для шапки. Но это обговаривается отдельно. Дизайн может быть почти в любом стиле, мы постараемся всему придать предельную эргономичность, юзабилити и стиль : ) И, естественно, в первую очередь определять возможности и стиль дизайна будете вы. Лёгкий и воздушный в пастельных оттенках? Строгий и сдержанный? Механистический и футуристичный? Мы действительно можем всё.</p>

<p><span>Адаптивная вёрстка:</span> Вёрстка страниц, включая адаптивные решения для различных устройств, либо минимум кроссбраузерную проверку и сохранение аккуратного вида на любом разрешении и устройстве. Вёрстка - основная статья наших услуг, наш верстальщик разбирается в теме и медитирует в процессе написания кодов. Вёрстка может включать в себя не только css, но нередко дополнительные плагины на JavaScript и jQuery.</p>

<p><span>Темные и светлые версии:</span> Ну а как без этого? Дизайны и варианты обсуждаются дополнительно.</p>

<h4>2. Скрипты и Анимации</h4>

<p><span>Скрипты на заказ:</span> Создание JavaScript и jQuery скриптов для визуальных эффектов (например, анимации в шапке) и функциональных плагинов. Речь идёт не только об адаптации общедоступных скриптов платформы, но и написании абсолютно новых. Возможности тут обсуждаются индивидуально.</p>

<p><span>Анимации на CSS:</span> Анимация элементов на форуме с использованием CSS. От простого мерцания ссылок до сложных loop-анимаций. В целом анимации - это фишка, мы любим их делать и писать, поэтому их количество ограничивается только вашими пожеланиями и макетом.</p>

<h4>3. Графика и Арт</h4>

<p><span>Макет без вёрстки:</span> Мы можем предложить вам готовые макеты в виде растровых изображений, не подразумевающие дальнейшей пересадки на код.</p>

<p><span>Иллюстрации на заказ:</span> Арт для шапки проекта, а также иллюстрации для эпизодов или сюжетов. Художник может выполнить работы в разных жанрах, включая фэнтези, киберпанк, реализм и спорт. Стоимость зависит от сложности сюжета и количества элементов.</p>

<p><span>Графические элементы:</span> Создание баннеров, аватаров, рекламных материалов, gif-изображений, шаблонов эпизодов и других графических элементов для вашего проекта.</p>

<h4>4. Мелкие правки и оптимизация</h4>

<p><span>Оптимизация:</span> Поможем оптимизировать форум для быстрой загрузки и лучшей производительности.</p>

<p><span>Исправление ошибок:</span> Если вы столкнулись с проблемами в коде, мы поможем их исправить.</p>

<p><span>Доработка отдельных элементов:</span> Дизайн и вёрстка отдельных элементов, таких как шапка, футер, профиль, и других важных компонентов.</p>

<p><span>Техобслуживание:</span> Если что-то пошло не так, либо вылез незапланированный и неучтённый баг - мы обязательно его исправим, причём, если ошибка была с нашей стороны, либо минорная - то полностью бесплатно : )</p>

<h4>Техническое задание (ТЗ)</h4>

<p>Для успешного выполнения проекта важно заранее обсудить все нюансы: ваше видение, желаемую цветовую гамму, список необходимых элементов и иные предпочтения. Вы можете предоставить нам свободу действий, если не имеете чёткой концепции - и мы с удовольствием откликнемся, но в стоимость входят только два варианта макета. Если требуется соблюдение определённого стиля или жанра, при наличии чёткого ТЗ, мы гарантируем его точное выполнение - и чем более точные критерии, тем проще будет и вам, и нам : )</p>

</div>
    <a class="arrow arrow-prev" href="#target-item-3" />
    <a class="arrow arrow-next" href="#target-item-2" />
  </div>

  <div class="carousel-item item-2">
    <h2>Item 2</h2>
    <p>

<div>
<h4>Стоимость услуг</h4>

<p><span>Создание дизайна:</span> От 2к. </p>
<p><span>Вёрстка на тестовом сайте:</span> От 2к.</p>
<p><span>Перенос на основной форум:</span> Цена обсуждается, но в тех же пределах.</p>
<p><span>Светлая или тёмная версия:</span> Стоимость определяется индивидуально.</p>
<p><span>ПРИМЕЧАНИЕ:</span>Стоимость может очень сильно меняться. ЗА свои минимальные деньги вы получите аккуратный форум без съездов, с простым, но красивым профилем, простой шапкой, но и без особых наворотов. Но чем больше элементов - тем выше цена. Тем не менее все нюансы обсуждаются на берегу и вас не будет в итоге ждать неприятная неожиданность. Никаких "я решил усложнить, это взвинтило цену" не будет - с подобными вопросами  идеями верстальщик всегда придёт заранее.</p>
<p><span>Скрипты на заказ:</span> От 300 рублей, в зависимости от сложности.</p>
<p><span>Шаблон эпизода:</span> От 300 рублей.</p>
<p><span>Баннеры и рекламные элементы:</span> Цена рассчитывается в зависимости от объема работ.</p>
<p><span>Количество правок:</span> После согласования дизайна, в стоимость включены 2 крупных и 5 мелких правок. Дополнительные изменения оплачиваются отдельно.</p>

<h4>Дополнительные услуги</h4>
<p><span>Посадка чужого дизайна:</span> Интеграция готового дизайна в ваш проект.</p>
<p><span>Интерактивные элементы:</span> Анимации и другие интерактивные решения для сайта или видео.</p>

</p>

</div>

    <a class="arrow arrow-prev" href="#target-item-1" />
    <a class="arrow arrow-next" href="#target-item-3" />
  </div>
  <div class="carousel-item item-3">
    <h2>Item 3</h2>
    <p>

<div>
<h4>Примеры работ</h4>

<a href='https://i.imgur.com/aasyVPs.png' target="_blank"><img src='https://i.imgur.com/aasyVPs.png' alt='photo'></a>

<a href='https://i.imgur.com/rNcTs2l.png' target="_blank"><img src='https://i.imgur.com/rNcTs2l.png' alt='photo'></a>

<p><span>Стилистика:</span> Cyberpunk 2077, светлая и тёмная версия</p>
<p><a href='https://edgezone.rusff.me/' target="_blank">Ссылка для ознакомления с функциональностью</a></p>

<a href='https://i.imgur.com/9umBF8v.jpeg' target="_blank"><img src='https://i.imgur.com/9umBF8v.jpeg' alt='photo'></a>

<a href='https://i.imgur.com/Q0ugOBk.jpeg' target="_blank"><img src='https://i.imgur.com/Q0ugOBk.jpeg' alt='photo'></a>
<p><span>Фишка!</span></p>
<a href='https://i.imgur.com/b636sTj.gif' target="_blank"><img src='https://i.imgur.com/b636sTj.gif' alt='photo'></a>

<p><span>Шаблон окна сообщений в стиле Cyberpunk2077</span></p>
<a href='https://i.imgur.com/soR45Uf.png' target="_blank"><img src='https://i.imgur.com/soR45Uf.png' alt='photo'></a>
<p><a href='https://codepen.io/c0ils/pen/qBzJVog' target="_blank">Ссылка для просмотра</a></p>

<p><span>Плеер в стиле Cyberpunk2077</span></p>
<a href='https://i.imgur.com/fU45BWl.png' target="_blank"><img src='https://i.imgur.com/fU45BWl.png' alt='photo'></a>
<p><a href='https://codepen.io/c0ils/pen/QWXPeNX' target="_blank">Ссылка для просмотра</a></p>
<p>Всё, от дизайна до кода, написано Vandra. Плеер настраиваем через css, есть дополнительная возможность интегрировать его в тему на форуме и уменьшенную версию на главной странице.</p>

<p><span>Скрипт визуализации в стиле автопереводчика Cyberpunk2077</span></p>
<img src='https://i.imgur.com/c8QvlA7.gif' alt='photo'>

</div>
</p>
    <a class="arrow arrow-prev" href="#target-item-2" />
    <a class="arrow arrow-next" href="#target-item-1" />
  </div>

</p>

</div>

<div class='buttons-uniq'>
<a href='https://t.me/Extremis_Malis'>TELEGRAM</a>
<a href='#'>НАПИСАТЬ В ЛС</a>
</div>
</div>

</section>[/html]
[hideprofile]

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

Текст Текст Текст

[html]
<style>
.fr-music-cont {
    flex-direction: column;
    background: #00000045;
    padding: 15px;
    overflow: auto;
    max-height: 670px;
    display: flex;
    border-radius: 36px;
}

.vf-video-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #ffffff1f;
    width: 100%;
    max-height: 272px;
    overflow: auto;
    padding: 5px 0 20px;
    border-radius: 0 0 20px 20px;
    border-top: 5px solid #ff0000;
}

.vf-video-player {
    width: 100%;
    position: sticky;
    display: flex;
    top: 0px;
    z-index: 5;
    border-bottom: 10px solid(var(--3rd-dark-color));
    justify-content: center;
    align-items: center;
}

.vf-video-player::before {
    content: '';
    position: absolute;
    background: #961317;
    mask: url(https://forumstatic.ru/files/001c/04/0a/16862.svg) no-repeat;
    z-index: -1;
    width: 361px;
    height: 168px;
}

.fr-music-cont>div a {
    font-family: sans-serif;
    background: #777777;
    padding: 12px 20px 10px 40px;
    border-radius: calc(infinity* 1px);
    color: #ffffff !important;
    font-size: 19px;
    margin: 5px 16px 0 27px;
    text-transform: capitalize;
    transition: ease-in-out .4s;
}

.vf-video-list a.active {
    background-color: #c30027;
}

.fr-music-cont>div a:hover {
    background: #3ea6ff;
    color: #000 !important;
    transform: translate(10px, 0px);
}

</style>

<div class='fr-music-cont'>

<!--- Вот тут ничего трогать не надо --->
<div class="vf-video-player">
    <iframe id="vf-youtube-player" width="560" height="315" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div class="vf-video-list">

<!--- Список музыкальных ссылок. РАБОТАЕТ ТОЛЬКО С YOUTUBE! Вам надо просто вставить в атрибут data-video-id код из ссылки видео на youtube. Ссылок может быть любое количество --->

    <a href="#" data-video-id="bqM52TEP6uo">うには新しい技を身につけました！</a>
    <a href="#" data-video-id="Oaw_Wy6XDFk">Cyberpunk 2077 — The Rebel Path</a>
    <a href="#" data-video-id="XQL0ZxaVRhI">Korn — Let The Dark Do The Rest</a>
    <a href="#" data-video-id="bqM52TEP6uo">うには新しい技を身につけました！</a>
    <a href="#" data-video-id="Oaw_Wy6XDFk">Cyberpunk 2077 — The Rebel Path</a>
    <a href="#" data-video-id="XQL0ZxaVRhI">Korn — Let The Dark Do The Rest</a>
    <a href="#" data-video-id="bqM52TEP6uo">うには新しい技を身につけました！</a>
    <a href="#" data-video-id="Oaw_Wy6XDFk">Cyberpunk 2077 — The Rebel Path</a>
    <a href="#" data-video-id="XQL0ZxaVRhI">Korn — Let The Dark Do The Rest</a>

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

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

Текст Текст Текст