шапка ушанка

[html]
<div class='tabs_wrap'>
<div class="lamp"></div>
<div class='playerNode' data-tracks="https://forumstatic.ru/files/001c/30/dc/61637.mp3"></div>
<h1>
<a href='https://imagiart.ru/profile.php?id=4118' target="_blank">mrazeus</a>
<span>and</span>
<a href='https://imagiart.ru/profile.php?id=13929' target="_blank">rae rae</a>
</h1>
<div class="tabs-box">
<div class="tabs-buttons">
<button class="tab-btn active" onclick="openTab(event, 'tab1')">
предисловие
</button>

<button class="tab-btn" onclick="openTab(event, 'tab2')">
ценник
</button>

<button class="tab-btn" onclick="openTab(event, 'tab3')">
оплата
</button>

<button class="tab-btn" onclick="openTab(event, 'tab4')">
связь
</button>
</div>

<div id="tab1" class="tab-content active">
<h2>хотите с нами поработать?</h2>
<p>• чтобы узнать стоимость и срок выполнения дизайна, заполните <a href="https://docs.google.com/document/d/1SC4aJ9EpcdfZ1nC3gjLnMo7OZCwyeELacU_6pf1Vmbs/edit?tab=t.0" rel="nofollow ugc" target="_blank">шаблон тз</a> (или воспользуйтесь своим собственным, если такой имеется) и отправьте его зевсу.

• точно поставленная задача с вашей стороны - важнейший момент. значение имеют любые мелочи. если вы захотите поменять что-то, что уже было утверждено ранее, то это добавится в итоговую стоимость. не забывайте про референсы.

• срок мы оговариваем сразу. обычно дедлайн ставим через месяц, но все зависит от нагрузки и ваших желаний.

• макет или верстку заказать можно независимо друг от друга.

• в стандарт входит классический минимум скриптов - убрать ненужные кнопки, изменение размера шрифта в теме, пиар вход, счетчик символов, html в сообщениях. скрипты, требующие дополнительных настроек или графических элементов, устанавливаются за дополнительную плату.</p>
</div>

<div id="tab2" class="tab-content">
<h2>цена указана с учетом верстки</h2>
<p>• тестовик - от <b>4000</b>, чистовик - от <b>7000</b>
• мобильная адаптация - от <b>3000</b>
• простая тема - от <b>600</b>
• сложная тема (с дополнительной графикой и / или вкладками) - от <b>800</b>
• личная страничка - от <b>1000</b> (без вкладок)
• комплект графики - <b>500</b> (3 аватара, 1 реклама, баннеры в футер и для рено)
• анимация - <b>300</b> за 1
• дополнительная шапка - <b>1000</b> за 1
• стоимость сменного дизайна по переключателю зависит от количества задействованных элементов</p>
</div>

<div id="tab3" class="tab-content">
<h2>оплата</h2>
<p>• предоплата составляет 50% стоимости и оплачивается до того, как мы садимся за макет; первая оплата - 25% стоимости после утвержденного макета, вторая оплата - 25% стоимости после того, как мы поставили дизайн на ваш чистовик.

• если заказчик пропадает или не оплачивает дизайн полностью в течении 2х недель после того, как он поставлен на код, то мы оставляем за собой право перепродать дизайн, доделав его по-своему.

• оплата на украинскую карту или карту рф.</p>
</div>

<div id="tab4" class="tab-content">
<h2>кликабельные ники отправят вас сразу в телеграм</h2>
<p>• по вопросам макетов - <a href="https://t.me/zeuszeus" rel="nofollow ugc" target="_blank">mrazeus</a>

• по вопросам верстки - <a href="https://t.me/whiskeytangofox" rel="nofollow ugc" target="_blank">rae rae</a>

• можете связаться с нами в лс на рено, но будьте готовы к пингу с ответом</p>
</div>
</div>
</div>

h1 {
position: absolute;
margin: 0;
top: 78px;
left: 423px;
display: flex;
gap: 12px;
}

h1 a {
background: #C8C8C8;
box-shadow: -2px 2px 0px 0px #00000026;
border: 1px solid #767676;
border-radius: 50px;
display: flex;
width: 130px;
height: 22px;
justify-content: center;
align-items: center;
color: #292929;
padding: 0px 0 3px;
font: 700 14px 'Inter';
transition: all .3s ease-in-out;
}

h1 a:hover {
background: #DAC060;
border: 1px solid #96833E;
color: #292929!important;
}

span {
color: #D9D9D9;
font: 600 37px 'Inter';
margin-top: -17px;
}

h2 {
margin: 0;
font: 600 14px 'Inter';
margin-bottom: 15px;
}

.tabs_wrap {
width: 970px;
height: 432px;
display: flex;
background: url(https://forumstatic.ru/files/001c/30/dc/30354.png);
align-items: center;
padding-top: 40px;
box-sizing: border-box;
margin-top: 10px;
padding-left: 225px;
position: relative;
}

.tabs-box {
width: 690px;
height: 290px;
display: flex;
background: #D9D9D9;
border: 1px solid #767676;
box-shadow: -3px 3px 0px 0px #00000026;
padding: 50px 44px 20px 0px;
box-sizing: border-box;
gap: 30px;
}

.tabs-buttons{
display: flex;
gap: 10px;
flex-direction: column;
margin-left: -20px;
}

.tab-btn {
border: none;
cursor: pointer;
transition: 0.3s;
width: 100px;
height: 20px;
display: flex;
justify-content: center;
text-transform: lowercase;
align-items: center;
background: #F0F0F0;
color: #292929;
font: 600 9px 'Inter';
box-shadow: -1px 1px 0px 0px #00000040;
}

.tab-btn:hover {
transform: scale(1.1);
}

.tab-btn.active {
background:#DAC060;
}

.tab-content {
display: none;
width: 100%;
height: 100%;
color: #313131;
font-family: 'Inter';
text-transform: lowercase;
flex-direction: column;
}

.tab-content.active{
display:flex;
}

.tab-content p {
white-space: pre-wrap;
text-align: justify;
font: 500 10px / 15px 'Inter' !important;
height: 100%;
overflow: auto;
padding-right: 20px;
}

.tab-content p::-webkit-scrollbar-thumb {
background-color: #373737;
width: 2px !important;
border-radius: 10px !important;
}

.tab-content p::-webkit-scrollbar {
width: 2px;
height: 2px;
background-color: rgba(0, 0, 0, .3);
border-radius: 10px !important;
}

.lamp {
width: 115px;
height: 115px;
border-radius: 50%;
position: absolute;
top: 8px;
left: 79px;
opacity: 0;
pointer-events: none;
transition: opacity .2s ease;
}

.tabs_wrap:hover .lamp{ opacity:1; animation:flickerLamp 1.2s infinite; background: radial-gradient(circle, rgba(255,245,180,0.95) 0%, rgba(255,240,140,0.75) 25%, rgba(255,220,120,0.35) 55%, rgba(255,200,80,0.08) 75%, transparent 100% ); }

@keyframes flickerLamp{ 0%{ opacity:0.95; } 5%{ opacity:0.35; } 10%{ opacity:1; } 15%{ opacity:0.6; } 20%{ opacity:1; } 35%{ opacity:0.9; } 40%{ opacity:0.25; } 45%{ opacity:1; } 70%{ opacity:0.85; } 72%{ opacity:0.4; } 74%{ opacity:1; } 100%{ opacity:0.95; } }
}

</style>

let contents = document.querySelectorAll('.tab-content');
contents.forEach(el => {
el.classList.remove('active');
});

let buttons = document.querySelectorAll('.tab-btn');
buttons.forEach(el => {
el.classList.remove('active');
});

document.getElementById(tabId).classList.add('active');
evt.currentTarget.classList.add('active');
}
</script>

<script type="text/javascript" src="https://forumstatic.ru/files/001c/35/64/25222.js"></script>

<style>
/*ЧАСТЬ 3. CSS-стили кастомизированного плеера*/
.player-wrapper {
height: 15px;
left: 15px;
top: 272px;
width: 15px;
position: absolute;
background: #d5bb5f;
border-radius: 50%;
cursor: pointer;
}

.play-pause {
position: relative;
width: 15px;
height: 14px;
border-radius: 50% !important;
padding: 0;
box-shadow: none !important;
padding: 0 !important;
background: none;
border: none;
cursor: pointer;
}

.play-pause.paused:before {
content: "\f04b";
position: absolute;
font-size: 9px;
font-family: Font Awesome;
top: 50%;
left: 50%;
width: 15px;
height: 14px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}

.play-pause:before {
content: "\f04c";
position: absolute;
font-size: 9px;
font-family: Font Awesome;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
cursor: pointer;
}

.post-content p a { color: #78682E; }
.track, .volume, .thumb { display: none; }
</style>

[/html][hideprofile]