/
valdorh
/
CodexOne
Обзор
Документация
Войти
/
valdorh
/
CodexOne
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
index.html
242 строки
11 KB
VLADIMIR DORONIN
Add modern landing page redesign
17 ноя 2025, 09:28
17 ноя 2025, 09:28
0a9535e
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Торговая компания «Промизоляция»</title> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="style.css" /> </head> <body> <header class="top-bar"> <div class="logo"> <span class="logo-mark">ПИ</span> <div> <p class="logo-name">Промизоляция</p> <p class="logo-subtitle">Торговая компания</p> </div> </div> <div class="top-links"> <a href="#catalog">Каталог</a> <a href="#about">Компания</a> <a href="#calc">Калькулятор</a> <a href="#contacts">Контакты</a> </div> <div class="contact"> <div class="phone">+7 (495) 648-65-46</div> <div class="email">info@promizol.ru</div> </div> </header> <nav class="navbar"> <div class="nav-title">Официальный представитель завода ЗАО «Промизоляция»</div> <div class="nav-actions"> <a class="btn ghost" href="#price">Скачать прайс</a> <a class="btn" href="#contacts">Получить консультацию</a> </div> </nav> <main> <section class="hero" id="about"> <div class="hero-content"> <p class="eyebrow">Инновации в изоляционных решениях</p> <h1>Современные материалы для защиты трубопроводов и объектов</h1> <p class="lede">Помогаем строить надежную инфраструктуру: герметизируем стыки, защищаем от коррозии и предотвращаем утечки. Работаем по всей России и СНГ.</p> <div class="hero-actions"> <a class="btn" href="#catalog">Смотреть каталог</a> <a class="btn ghost" href="#calc">Запросить расчёт</a> </div> <div class="stats"> <div> <p class="stat-number">24/7</p> <p class="stat-label">Техническая поддержка</p> </div> <div> <p class="stat-number">15 лет</p> <p class="stat-label">опыта в отрасли</p> </div> <div> <p class="stat-number">1200+</p> <p class="stat-label">реализованных проектов</p> </div> </div> </div> <div class="hero-card"> <p class="card-title">Комплексные поставки</p> <ul> <li>Изоляционные кожухи, манжеты, материалы для стыков</li> <li>Системы герметизации для газо- и водопроводов</li> <li>Сертифицированная продукция с гарантией</li> <li>Индивидуальный подбор под ваш проект</li> </ul> <div class="badge">Наличие на складе · Доставка в день заказа</div> </div> </section> <section class="features" id="catalog"> <div class="section-header"> <p class="eyebrow">Что мы предлагаем</p> <h2>Основные направления</h2> <p class="section-text">Подбираем решения под инфраструктурные объекты любого масштаба: от магистральных трубопроводов до точечной модернизации.</p> </div> <div class="feature-grid"> <article class="feature-card"> <div class="icon">🛡️</div> <h3>Антикоррозионная защита</h3> <p>Комплексные системы защиты труб от коррозии и внешних воздействий, соответствующие отраслевым стандартам.</p> <a href="#" class="link">Подробнее</a> </article> <article class="feature-card"> <div class="icon">🧩</div> <h3>Герметизация стыков</h3> <p>Манжеты и кожухи, гарантирующие герметичность трубопроводов в самых сложных условиях.</p> <a href="#" class="link">Подробнее</a> </article> <article class="feature-card"> <div class="icon">🚚</div> <h3>Логистика и сервис</h3> <p>Собственный склад и оперативная доставка по России, сопровождение проекта и обучение монтажников.</p> <a href="#" class="link">Подробнее</a> </article> </div> </section> <section class="products"> <div class="section-header"> <p class="eyebrow">Популярные решения</p> <h2>Каталог материалов</h2> </div> <div class="product-grid"> <article class="product-card"> <p class="tag">Энергетика</p> <h3>Пінополіуретанова ізоляція</h3> <p>Лёгкий и долговечный материал для трубопроводов с тепловыми нагрузками. Идеален для энергосистем.</p> <div class="meta"> <span>Доставка 1-3 дня</span> <span>ГОСТ 30732-2020</span> </div> <a class="btn ghost" href="#">Запросить КП</a> </article> <article class="product-card"> <p class="tag">Газоснабжение</p> <h3>Антикоррозионные кожухи</h3> <p>Высокая стойкость к агрессивным средам и перепадам температур. Индивидуальные размеры под ваш проект.</p> <div class="meta"> <span>Отгрузка в день заказа</span> <span>ТУ 4859-001</span> </div> <a class="btn ghost" href="#">Подробнее</a> </article> <article class="product-card"> <p class="tag">Водоснабжение</p> <h3>Системы герметизации стыков</h3> <p>Манжеты с усиленным прижимом, обеспечивающие нулевые утечки и устойчивость к гидроударам.</p> <div class="meta"> <span>Монтаж за 15 минут</span> <span>Гарантия 5 лет</span> </div> <a class="btn ghost" href="#">Узнать стоимость</a> </article> </div> </section> <section class="calc" id="calc"> <div class="calc-content"> <div> <p class="eyebrow">Калькулятор и консультация</p> <h2>Получите точный подбор и расчёт</h2> <p>Оставьте параметры проекта, и мы подготовим смету, сроки поставки и технические рекомендации.</p> <div class="steps"> <div> <p class="step-number">1</p> <p>Заполните форму с основными параметрами.</p> </div> <div> <p class="step-number">2</p> <p>Получите подбор материалов и КП в течение 2 часов.</p> </div> <div> <p class="step-number">3</p> <p>Организуем логистику и сопровождение монтажа.</p> </div> </div> </div> <form class="calc-form"> <label> Направление проекта <select> <option>Газоснабжение</option> <option>Водоснабжение</option> <option>Тепловые сети</option> <option>Нефтехимия</option> </select> </label> <label> Диаметр трубопровода, мм <input type="number" placeholder="Например, 720" /> </label> <label> Регион поставки <input type="text" placeholder="Москва, ЦФО" /> </label> <label> Контакты <input type="email" placeholder="you@example.com" /> </label> <button type="submit" class="btn full">Получить расчёт</button> </form> </div> </section> <section class="cta" id="contacts"> <div> <p class="eyebrow">Свяжитесь с нами</p> <h2>Готовы обсудить ваш проект</h2> <p class="section-text">Оперативно ответим на технические вопросы, поделимся образцами и организуем выезд специалиста.</p> <div class="contact-grid"> <div class="contact-card"> <p class="contact-label">Телефон</p> <p class="contact-value">+7 (495) 648-65-46</p> </div> <div class="contact-card"> <p class="contact-label">Email</p> <p class="contact-value">info@promizol.ru</p> </div> <div class="contact-card"> <p class="contact-label">Адрес</p> <p class="contact-value">105318, Москва, ул. Кирпичная, д. 22</p> </div> </div> <div class="social"> <span>Мы на связи: Telegram · WhatsApp · VK</span> </div> </div> <div class="cta-card"> <p class="card-title">Нужна презентация или прайс-лист?</p> <p>Отправим полный пакет документов и образцы материалов в течение рабочего дня.</p> <a class="btn full" href="#">Скачать прайс</a> <a class="btn ghost" href="#">Получить презентацию</a> </div> </section> </main> <footer class="footer"> <div> <p class="logo-name">Промизоляция</p> <p class="footer-text">Комплексные решения по защите трубопроводов и объектов инженерной инфраструктуры.</p> </div> <div class="footer-links"> <a href="#about">О компании</a> <a href="#catalog">Каталог</a> <a href="#calc">Калькулятор</a> <a href="#contacts">Контакты</a> </div> <div class="footer-meta"> <p>105318, Россия, г. Москва, ул. Кирпичная, д. 22</p> <p>support@promizol.ru</p> </div> </footer> </body> </html>