инструкция
В <main> вставь <section class="hero" style="padding: 80px 0 32px; text-align: center; position: relative; overflow: hidden;">. Внутри сначала фоновые «оранжевые шары»: <div class="orb orb-l"></div> и <div class="orb orb-r"></div>, абсолютно позиционированные, w/h 384px, background #B5331B и #dc2626, filter blur(120px), border-radius 50%, opacity 0.2 (стили в <style> в head). Затем <div class="container"> с тремя элементами: 1) <div class="badge"> с display inline-flex, align-items center, gap 12px, padding 12px 22px, background rgba(255,255,255,0.05), border 1px solid rgba(255,255,255,0.1), border-radius 999px, backdrop-filter blur(20px), margin-bottom 24px — внутри <span class="dot"></span> (w/h 8px, background #B5331B, border-radius 50%, animation pulse-dot 1.5s ease-in-out infinite) и <span class="badge-text">РАСЧЁТ</span> (font-size 11px, font-weight 700, letter-spacing 0.2em, text-transform uppercase, color #d1d5db). 2) <h1> огромный (font-size clamp(36px, 6vw, 64px), font-weight 900, letter-spacing -0.02em, margin-bottom 20px) — два слова: «РАСЧЁТ <span class="accent">МАТЕРИАЛОВ</span>» где .accent имеет color #B5331B. 3) <p class="subtitle"> подзаголовок (max-width 580px, margin 0 auto, font-size 17px, line-height 1.4, color rgba(255,255,255,0.7)): «Расчёт расходов материалов для эпоксидных покрытий — мгновенно и точно». Не забудь @keyframes pulse-dot (0%/100% opacity 1, 50% opacity 0.4) в <style>.
что обратить внимание
- ›Размытые цветные «шары» (blur 120px) на фоне — типичный приём для индустриальных hero-секций
- ›Пульсирующая точка в бейдже намекает на «живой расчёт» — деталь, которая отделяет любителя от профи
- ›font-weight 900 + letter-spacing -0.02em делает заголовок жёстким и техническим
- ›Только ОДНО слово в заголовке окрашено акцентом — это правило, иначе теряется иерархия