Skip to content

V
volga
Commit d97843c7 authored by dagalkova's avatar dagalkova
Browse files
Options

update

parent 3d0dfc5a
Show whitespace changes
Inline Side-by-side
Showing with 5382 additions and 1607 deletions
career.html
View file @ d97843c7
......@@ -11,7 +11,7 @@
<link rel="stylesheet" href="styles/normalize.css">
</head>
<body class="body-subpage">
<div class="menu-hidden">
<div class="menu-hidden" style="background-image: url('img/menu_mask.svg');">
<div class="menu-hidden-main">
<div class="menu-hidden-mob">
<span class="menu-hidden-mob__title">Меню</span>
......@@ -19,7 +19,8 @@
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more menu-hidden-main-block__more--active" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Компания
</a>
<div class="menu-hidden-main-block__wrapper">
......@@ -33,6 +34,7 @@
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Продукция</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Газетная бумага</a>
......@@ -44,6 +46,7 @@
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Раскрытие информации</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Положения и сведения об обществе</a>
......@@ -56,6 +59,7 @@
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Устойчивое развитие</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Безопасность и охрана</a>
......@@ -66,14 +70,18 @@
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title"><img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Карьера</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Вакансии</a>
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title"><img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Закупки</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Лесосырьевое обеспечение</a>
......@@ -87,6 +95,7 @@
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Пресс-центр</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Новости</a>
......@@ -96,7 +105,9 @@
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title"><img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Контакты</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Московский филиал</a>
......@@ -104,7 +115,7 @@
</div>
</div>
</div>
<div class="menu-hidden-form">
<div class="menu-hidden-form" style="background-image: url('img/menu_mask.svg');">
<img class="menu-hidden-form__close" src="img/close.svg" alt="close button">
<form action="" class="form-ui">
<div class="form-ui-inner">
......@@ -120,11 +131,11 @@
<input class="form-ui-inner-checkbox__input" type="checkbox" id="checkbox2" checked>
<label for="checkbox2" class="form-ui-inner-checkbox__text">Согласен на обработку персональных данных</label>
</div>
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ">
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ" style="background-image: url('img/form_button.png');">
</div>
</div>
</form>
<a class="menu-hidden-form__button" href="#">ОБРАТНАЯ СВЯЗЬ</a>
<a class="menu-hidden-form__button" href="#" style="background-image: url('img/form_button.png');">ОБРАТНАЯ СВЯЗЬ</a>
<div class="menu-hidden-form-contact">
<div class="menu-hidden-form-contact-item">
<img class="menu-hidden-form-contact-item__icon" src="img/mail.svg" alt="mail icon">
......@@ -159,10 +170,11 @@
</div>
</div>
</div>
<header class="header header-subpage">
<header class="header header-subpage" style="background-image: url('img/header.jpg');">
<nav class="navbar">
<a class="navbar-logo" href="#">
<img src="img/logo.svg" alt="logo: volga">
<img class="navbar-logo__icon" src="img/logo.svg" alt="logo: volga">
<img class="navbar-logo__scroll hidden" src="img/logo_scroll.svg" alt="logo: volga">
</a>
<a class="navbar-burger" href="#">
<svg width="20" height="13" class="navbar-burger__icon">
......@@ -171,88 +183,207 @@
<span class="navbar-burger__title">Меню</span>
</a>
<ul class="menu">
<li class="menu-item">
<li class="menu-item" data-menu-id='1'>
<a class="menu-item__link" href="#">Компания</a>
<div class="submenu">
<a class="submenu-item">История предприятия</a>
<a class="submenu-item">Руководство</a>
<a class="submenu-item">Производство</a>
<a class="submenu-item">Стратегия развития</a>
<a class="submenu-item">Корпоративная политика</a>
<div class="submenu" data-submenu-id='1'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>История предприятия</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Руководство</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Производство</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Стратегия развития</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Корпоративная политика</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='2'>
<a class="menu-item__link" href="#">Продукция</a>
<div class="submenu">
<a class="submenu-item">Газетная бумага</a>
<a class="submenu-item">Бумага для перфорирования</a>
<a class="submenu-item">Пухлая бумага для печатных книг</a>
<a class="submenu-item">Упаковочная бумага</a>
<div class="submenu" data-submenu-id='2'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Газетная бумага</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Бумага для перфорирования</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Пухлая бумага для печатных книг</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Упаковочная бумага</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='3'>
<a class="menu-item__link" href="#">Раскрытие информации</a>
<div class="submenu">
<a class="submenu-item">Положение и сведения об обществе</a>
<a class="submenu-item">Годовой отчёт</a>
<a class="submenu-item">Акционерам</a>
<a class="submenu-item">Производство, передача и сбыт тепловой энергии, воды</a>
<a class="submenu-item">Специальная оценка условий труда</a>
<div class="submenu" data-submenu-id='3'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Положение и сведения об обществе
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Годовой отчёт
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Акционерам
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Производство, передача и сбыт тепловой энергии, воды
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Специальная оценка условий труда
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='4'>
<a class="menu-item__link" href="#">Устойчивое развитие</a>
<div class="submenu">
<a class="submenu-item">Безопасность и охрана</a>
<a class="submenu-item">Экология</a>
<a class="submenu-item">Ответственное леспользование</a>
<a class="submenu-item">Социальная политика</a>
<a class="submenu-item">Рейтинг и оценка</a>
<div class="submenu" data-submenu-id='4'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Безопасность и охрана
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Экология
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Ответственное леспользование
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Социальная политика
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Рейтинг и оценка
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='5'>
<a class="menu-item__link" href="#">Карьера</a>
<div class="submenu">
<a class="submenu-item">Вакансии</a>
<div class="submenu" data-submenu-id='5'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Вакансии
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='6'>
<a class="menu-item__link" href="#">Закупки</a>
<div class="submenu">
<a class="submenu-item">Лесосырьевое обеспечение</a>
<a class="submenu-item">Обращение к поставщикам и подрядчикам</a>
<a class="submenu-item">Закупочные процедуры</a>
<a class="submenu-item">Реализация невостребованного имущества и товаров</a>
<a class="submenu-item">Регистрация поставщиков</a>
<a class="submenu-item">Контакты по закупкам</a>
<div class="submenu" data-submenu-id='6'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Лесосырьевое обеспечение
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Обращение к поставщикам и подрядчикам
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Закупочные процедуры
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Реализация невостребованного имущества и товаров
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Регистрация поставщиков
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Контакты по закупкам
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='7'>
<a class="menu-item__link" href="#">Пресс-центр</a>
<div class="submenu">
<a class="submenu-item">Новости</a>
<a class="submenu-item">Фотогалерея</a>
<a class="submenu-item">Видеогалерея</a>
<a class="submenu-item">Корпоративная газета «Балахнинский бумажник»</a>
<div class="submenu" data-submenu-id='7'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Новости
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Фотогалерея
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Видеогалерея
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Корпоративная газета «Балахнинский бумажник»
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='8'>
<a class="menu-item__link" href="#">Контакты</a>
<div class="submenu">
<a class="submenu-item">Московский офис</a>
<a class="submenu-item">Нижегородский офис</a>
<div class="submenu" data-submenu-id='8'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Московский офис
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Нижегородский офис
</a>
</div>
</li>
</ul>
<ul class="second-menu">
<li class="second-menu-item search-link">
<a class="second-menu-item__link" href="#">
<li class="second-menu-item">
<a class="second-menu-item__link search-link" href="#">
<svg class="second-menu-item__link__icon" width="20" height="20" viewBox="0 0 20 20">
<use xlink:href="img/second_menu.svg#search"></use>
</svg>
</a>
</li>
<li class="second-menu-item">
<li class="second-menu-item" data-menu-id='9'>
<a class="second-menu-item__link" href="#">
<div class="second-menu-item__link__login">
<svg class="second-menu-item__link__icon" width="20" height="20" viewBox="0 0 20 20">
......@@ -261,12 +392,20 @@
<span>Войти</span>
</div>
</a>
<div class="submenu second-submenu">
<a class="submenu-item">Поставщикам</a>
<a class="submenu-item">Покупателям</a>
<div class="submenu second-submenu" data-submenu-id='9'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Поставщикам
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Покупателям
</a>
</div>
</li>
<li class="second-menu-item">
<li class="second-menu-item" data-menu-id='10'>
<a class="second-menu-item__link" href="#">
<div class="second-menu-item__link__lang">
<span>EN</span>
......@@ -275,21 +414,30 @@
</svg>
</div>
</a>
<div class="submenu second-submenu">
<a class="submenu-item">RU</a>
<a class="submenu-item">EN</a>
<div class="submenu second-submenu" data-submenu-id='10'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>RU
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>EN
</a>
</div>
</li>
</ul>
</nav>
<div class="search">
<a class="search-close" href="#">
Закрыть<svg class="search-close__icon">
Закрыть
<svg class="search-close__icon">
<use xlink:href="img/search_close.svg#search_close"></use>
</svg>
</a>
<input class="search__field" type="search" placeholder="Поиск по сайту">
<input class="search__button" type="submit" value="НАЙТИ">
<input class="search__button" type="submit" value="НАЙТИ" style="background-image: url(img/button_mask.svg);">
</div>
<div class="separator"></div>
<ul class="second-mob">
......@@ -321,23 +469,38 @@
<h1 class="heading-other__title">Карьера</h1>
</div>
</header>
<section class="corp">
<section class="corp" style="background-image: url('img/company_mask.svg');">
<div class="corp-wrapper">
<a class="corp-wrapper__btn" href="#programs">Программы для сотрудников</a>
<a class="corp-wrapper__btn" href="#educ">Обучение и развитие</a>
<a class="corp-wrapper__btn" href="#stud">Студентам и выпускникам</a>
<a class="corp-wrapper__btn" href="#vac">Вакансии</a>
<a class="corp-wrapper__btn" href="#cont">Контакты</a>
<a class="corp-wrapper__btn" href="#programs">
<svg class="corp-wrapper__btn__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Программы для сотрудников</a>
<a class="corp-wrapper__btn" href="#educ">
<svg class="corp-wrapper__btn__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Обучение и развитие</a>
<a class="corp-wrapper__btn" href="#stud">
<svg class="corp-wrapper__btn__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Студентам и выпускникам</a>
<a class="corp-wrapper__btn" href="#vac">
<svg class="corp-wrapper__btn__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Вакансии</a>
<a class="corp-wrapper__btn" href="#cont">
<svg class="corp-wrapper__btn__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Контакты</a>
</div>
<div class="corp-content">
<div id="programs" class="corp-content-wrapper">
<img class="corp-content__photo" src="img/career_photo.jpg" alt="career photo">
<img class="corp-content-wrapper__photo" src="img/career_photo.jpg" alt="career photo">
</div>
<div class="corp-content-wrapper">
<h2 class="corp-content__title">Развитие персонала</h2>
<h2 class="corp-content-wrapper__title">Развитие персонала</h2>
<p class="corp-content-wrapper__text">Постоянное совершенствование уже использующихся, внедрение вновь разработанных технологий в производство, изменения в документальной, нормативно-правовой базе, устаревание имеющихся знаний и умений и другие причины влекут необходимость постоянного развития персонала предприятия.</p>
<p class="corp-content-wrapper__bold">Развитие персонала АО «Волга» проводится по трем направлениям:</p>
<ul class="corp-content-wrapper-list">
<ul class="corp-content-wrapper-list" style="list-style: url('img/points_style_list.svg');">
<li class="corp-content-wrapper-list__item">профессиональное обучение;</li>
<li class="corp-content-wrapper-list__item">наставничество (коучинг) в период адаптации работников;</li>
<li class="corp-content-wrapper-list__item">повышение профессионального мастерства и квалификации сотрудников.</li>
......@@ -345,7 +508,10 @@
<p class="corp-content-wrapper__text">Программа профессионального обучения реализуется согласно полученной Лицензии на осуществление образовательной деятельности с целью приобретения обучающимися знаний, умений, навыков, формирования компетенций, необходимых для выполнения определенных трудовых, служебных функций. Обучение проходит в специально оборудованном учебном классе на территории предприятия. Практические занятия проводятся непосредственно на рабочем месте обучающихся. Образовательные программы разрабатываются ведущими специалистами АО «Волга».</p>
</div>
<div id="vac" class="corp-content-wrapper">
<div class="vac-heading">
<h2 class="corp-content__title">Вакансии</h2>
<a class="vac__link" href="#">Все вакансии</a>
</div>
<div class="vac-all">
<div class="vac-all-item">
<div class="vac-all-item-heading">
......@@ -367,7 +533,7 @@
<p class="vac__bold">Обязанности:</p>
</div>
<div class="vac-wrapper">
<ul class="vac-list">
<ul class="vac-list" style="list-style: url('img/points_style_list.svg');">
<li class="vac-list__item">Контроль за соблюдением режима</li>
<li class="vac-list__item">Обеспечение безопасности на территории поста</li>
</ul>
......@@ -376,7 +542,7 @@
<p class="vac__bold">Требования:</p>
</div>
<div class="vac-wrapper">
<ul class="vac-list">
<ul class="vac-list" style="list-style: url('img/points_style_list.svg');">
<li class="vac-list__item">Добросовестность, ответственность.</li>
</ul>
</div>
......@@ -387,7 +553,7 @@
<p class="vac__text">Оформление согласно ТК РФ.</p>
</div>
<div class="vac-buttons">
<a class="vac__button" href="#">ОТКЛИКНУТЬСЯ</a>
<a class="vac__button" href="#" style="background-image: url(img/button_mask.svg);">ОТКЛИКНУТЬСЯ</a>
<a class="vac__call" href="#">
<svg class="vac__call__icon">
<use xlink:href="img/vac_call.svg#vac_call"></use>
......@@ -416,7 +582,7 @@
<p class="vac__bold">Обязанности:</p>
</div>
<div class="vac-wrapper">
<ul class="vac-list">
<ul class="vac-list" style="list-style: url('img/points_style_list.svg');">
<li class="vac-list__item">Контроль за соблюдением режима</li>
<li class="vac-list__item">Обеспечение безопасности на территории поста</li>
</ul>
......@@ -425,7 +591,7 @@
<p class="vac__bold">Требования:</p>
</div>
<div class="vac-wrapper">
<ul class="vac-list">
<ul class="vac-list" style="list-style: url('img/points_style_list.svg');">
<li class="vac-list__item">Добросовестность, ответственность.</li>
</ul>
</div>
......@@ -436,7 +602,7 @@
<p class="vac__text">Оформление согласно ТК РФ.</p>
</div>
<div class="vac-buttons">
<a class="vac__button" href="#">ОТКЛИКНУТЬСЯ</a>
<a class="vac__button" href="#" style="background-image: url(img/button_mask.svg);">ОТКЛИКНУТЬСЯ</a>
<a class="vac__call" href="#">
<svg class="vac__call__icon">
<use xlink:href="img/vac_call.svg#vac_call"></use>
......@@ -465,7 +631,7 @@
<p class="vac__bold">Обязанности:</p>
</div>
<div class="vac-wrapper">
<ul class="vac-list">
<ul class="vac-list" style="list-style: url('img/points_style_list.svg');">
<li class="vac-list__item">Контроль за соблюдением режима</li>
<li class="vac-list__item">Обеспечение безопасности на территории поста</li>
</ul>
......@@ -474,7 +640,7 @@
<p class="vac__bold">Требования:</p>
</div>
<div class="vac-wrapper">
<ul class="vac-list">
<ul class="vac-list" style="list-style: url('img/points_style_list.svg');">
<li class="vac-list__item">Добросовестность, ответственность.</li>
</ul>
</div>
......@@ -485,7 +651,7 @@
<p class="vac__text">Оформление согласно ТК РФ.</p>
</div>
<div class="vac-buttons">
<a class="vac__button" href="#">ОТКЛИКНУТЬСЯ</a>
<a class="vac__button" href="#" style="background-image: url(img/button_mask.svg);">ОТКЛИКНУТЬСЯ</a>
<a class="vac__call" href="#">
<svg class="vac__call__icon">
<use xlink:href="img/vac_call.svg#vac_call"></use>
......@@ -514,7 +680,7 @@
<p class="vac__bold">Обязанности:</p>
</div>
<div class="vac-wrapper">
<ul class="vac-list">
<ul class="vac-list" style="list-style: url('img/points_style_list.svg');">
<li class="vac-list__item">Контроль за соблюдением режима</li>
<li class="vac-list__item">Обеспечение безопасности на территории поста</li>
</ul>
......@@ -523,7 +689,7 @@
<p class="vac__bold">Требования:</p>
</div>
<div class="vac-wrapper">
<ul class="vac-list">
<ul class="vac-list" style="list-style: url('img/points_style_list.svg');">
<li class="vac-list__item">Добросовестность, ответственность.</li>
</ul>
</div>
......@@ -534,7 +700,7 @@
<p class="vac__text">Оформление согласно ТК РФ.</p>
</div>
<div class="vac-buttons">
<a class="vac__button" href="#">ОТКЛИКНУТЬСЯ</a>
<a class="vac__button" href="#" style="background-image: url(img/button_mask.svg);">ОТКЛИКНУТЬСЯ</a>
<a class="vac__call" href="#">
<svg class="vac__call__icon">
<use xlink:href="img/vac_call.svg#vac_call"></use>
......@@ -563,7 +729,7 @@
<p class="vac__bold">Обязанности:</p>
</div>
<div class="vac-wrapper">
<ul class="vac-list">
<ul class="vac-list" style="list-style: url('img/points_style_list.svg');">
<li class="vac-list__item">Контроль за соблюдением режима</li>
<li class="vac-list__item">Обеспечение безопасности на территории поста</li>
</ul>
......@@ -572,7 +738,7 @@
<p class="vac__bold">Требования:</p>
</div>
<div class="vac-wrapper">
<ul class="vac-list">
<ul class="vac-list" style="list-style: url('img/points_style_list.svg');">
<li class="vac-list__item">Добросовестность, ответственность.</li>
</ul>
</div>
......@@ -583,7 +749,7 @@
<p class="vac__text">Оформление согласно ТК РФ.</p>
</div>
<div class="vac-buttons">
<a class="vac__button" href="#">ОТКЛИКНУТЬСЯ</a>
<a class="vac__button" href="#" style="background-image: url(img/button_mask.svg);">ОТКЛИКНУТЬСЯ</a>
<a class="vac__call" href="#">
<svg class="vac__call__icon">
<use xlink:href="img/vac_call.svg#vac_call"></use>
......@@ -595,13 +761,13 @@
</div>
</div>
<div id="stud" class="corp-content-wrapper">
<img class="corp-content__photo" src="img/career_photo2.jpg" alt="career photo2">
<img class="corp-content-wrapper__photo" src="img/career_photo2.jpg" alt="career photo2">
</div>
<div class="corp-content-wrapper">
<h2 id="quote" class="corp-content__title">Студентам и выпускникам</h2>
<h2 id="quote" class="corp-content-wrapper__title">Студентам и выпускникам</h2>
<p class="corp-content-wrapper__text">Акционерное общество «Волга» заинтересовано в активных молодых специалистах, прилагающих усилия для саморазвития и самореализации.</p>
<p class="corp-content-wrapper__bold">Приглашаем студентов на производственную и преддипломную практику и предлагаем:</p>
<ul class="corp-content-wrapper-list">
<ul class="corp-content-wrapper-list" style="list-style: url('img/points_style_list.svg');">
<li class="corp-content-wrapper-list__item">реальный производственный опыт: работа в цехе с опытным наставником;</li>
<li class="corp-content-wrapper-list__item">профессиональное развитие: обучение выбранной профессии и личной эффективности;</li>
<li class="corp-content-wrapper-list__item">возможность начать свою карьеру еще во время учебы: лучшие студенты по итогам практики получают предложение по трудоустройству.</li>
......@@ -611,18 +777,18 @@
</div>
</section>
<section class="form form-subpage section-subpage">
<form action="" class="form-ui">
<form action="" class="form-ui" style="background-image: url('img/form_mask.svg');">
<div class="form-ui-inner">
<div class="form-ui-inner-heading">
<span class="form-ui-inner-heading__title">Обратная связь</span>
<span class="form-ui-inner-heading__text">Оставьте свои контакты и мы свяжемся с Вами!</span>
</div>
<div class="form-ui-inner-content">
<input class="form-ui-inner-content__input" type="text" placeholder="Ваше имя">
<input class="form-ui-inner-content__input" type="tel" placeholder="Телефон">
<input class="form-ui-inner-content__input" type="email" placeholder="E-mail">
<input class="form-ui-inner-content__input" type="text" placeholder="Ваше имя" required>
<input class="form-ui-inner-content__input" type="tel" placeholder="Телефон" pattern="(\+?\d[- .]*){7,13}" required>
<input class="form-ui-inner-content__input" type="email" placeholder="E-mail" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" required>
<input class="form-ui-inner-content__input" type="text" placeholder="Сообщение">
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ">
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ" style="background-image: url('img/form_button.png');">
</div>
<div class="form-ui-inner-checkbox">
<input class="form-ui-inner-checkbox__input" type="checkbox" id="checkbox1" checked>
......@@ -631,7 +797,7 @@
</div>
</form>
</section>
<footer class="footer">
<footer class="footer" style="background-image: url('img/footer.jpg');">
<nav class="footer-navbar">
<a class="footer-navbar-logo" href="#">
<img src="img/logo.svg" alt="logo: volga">
......@@ -678,8 +844,5 @@
</div>
</footer>
<script defer src="js/index.js"></script>
<script defer src="js/menu_subpage.js"></script>
<script defer src="js/smothScroll.js"></script>
<script defer src="js/vac.js"></script>
</body>
</html>
\ No newline at end of file
company.html
View file @ d97843c7
......@@ -11,7 +11,7 @@
<link rel="stylesheet" href="styles/normalize.css">
</head>
<body class="body-subpage">
<div class="menu-hidden">
<div class="menu-hidden" style="background-image: url('img/menu_mask.svg');">
<div class="menu-hidden-main">
<div class="menu-hidden-mob">
<span class="menu-hidden-mob__title">Меню</span>
......@@ -19,7 +19,8 @@
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more menu-hidden-main-block__more--active" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Компания
</a>
<div class="menu-hidden-main-block__wrapper">
......@@ -33,6 +34,7 @@
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Продукция</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Газетная бумага</a>
......@@ -44,6 +46,7 @@
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Раскрытие информации</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Положения и сведения об обществе</a>
......@@ -56,6 +59,7 @@
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Устойчивое развитие</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Безопасность и охрана</a>
......@@ -66,14 +70,18 @@
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title"><img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Карьера</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Вакансии</a>
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title"><img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Закупки</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Лесосырьевое обеспечение</a>
......@@ -87,6 +95,7 @@
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Пресс-центр</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Новости</a>
......@@ -96,7 +105,9 @@
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title"><img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Контакты</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Московский филиал</a>
......@@ -104,7 +115,7 @@
</div>
</div>
</div>
<div class="menu-hidden-form">
<div class="menu-hidden-form" style="background-image: url('img/menu_mask.svg');">
<img class="menu-hidden-form__close" src="img/close.svg" alt="close button">
<form action="" class="form-ui">
<div class="form-ui-inner">
......@@ -120,11 +131,11 @@
<input class="form-ui-inner-checkbox__input" type="checkbox" id="checkbox2" checked>
<label for="checkbox2" class="form-ui-inner-checkbox__text">Согласен на обработку персональных данных</label>
</div>
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ">
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ" style="background-image: url('img/form_button.png');">
</div>
</div>
</form>
<a class="menu-hidden-form__button" href="#">ОБРАТНАЯ СВЯЗЬ</a>
<a class="menu-hidden-form__button" href="#" style="background-image: url('img/form_button.png');">ОБРАТНАЯ СВЯЗЬ</a>
<div class="menu-hidden-form-contact">
<div class="menu-hidden-form-contact-item">
<img class="menu-hidden-form-contact-item__icon" src="img/mail.svg" alt="mail icon">
......@@ -159,10 +170,11 @@
</div>
</div>
</div>
<header class="header header-subpage">
<header class="header header-subpage" style="background-image: url('img/header.jpg');">
<nav class="navbar">
<a class="navbar-logo" href="#">
<img src="img/logo.svg" alt="logo: volga">
<img class="navbar-logo__icon" src="img/logo.svg" alt="logo: volga">
<img class="navbar-logo__scroll hidden" src="img/logo_scroll.svg" alt="logo: volga">
</a>
<a class="navbar-burger" href="#">
<svg width="20" height="13" class="navbar-burger__icon">
......@@ -171,88 +183,207 @@
<span class="navbar-burger__title">Меню</span>
</a>
<ul class="menu">
<li class="menu-item">
<li class="menu-item" data-menu-id='1'>
<a class="menu-item__link" href="#">Компания</a>
<div class="submenu">
<a class="submenu-item">История предприятия</a>
<a class="submenu-item">Руководство</a>
<a class="submenu-item">Производство</a>
<a class="submenu-item">Стратегия развития</a>
<a class="submenu-item">Корпоративная политика</a>
<div class="submenu" data-submenu-id='1'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>История предприятия</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Руководство</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Производство</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Стратегия развития</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Корпоративная политика</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='2'>
<a class="menu-item__link" href="#">Продукция</a>
<div class="submenu">
<a class="submenu-item">Газетная бумага</a>
<a class="submenu-item">Бумага для перфорирования</a>
<a class="submenu-item">Пухлая бумага для печатных книг</a>
<a class="submenu-item">Упаковочная бумага</a>
<div class="submenu" data-submenu-id='2'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Газетная бумага</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Бумага для перфорирования</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Пухлая бумага для печатных книг</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Упаковочная бумага</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='3'>
<a class="menu-item__link" href="#">Раскрытие информации</a>
<div class="submenu">
<a class="submenu-item">Положение и сведения об обществе</a>
<a class="submenu-item">Годовой отчёт</a>
<a class="submenu-item">Акционерам</a>
<a class="submenu-item">Производство, передача и сбыт тепловой энергии, воды</a>
<a class="submenu-item">Специальная оценка условий труда</a>
<div class="submenu" data-submenu-id='3'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Положение и сведения об обществе
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Годовой отчёт
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Акционерам
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Производство, передача и сбыт тепловой энергии, воды
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Специальная оценка условий труда
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='4'>
<a class="menu-item__link" href="#">Устойчивое развитие</a>
<div class="submenu">
<a class="submenu-item">Безопасность и охрана</a>
<a class="submenu-item">Экология</a>
<a class="submenu-item">Ответственное леспользование</a>
<a class="submenu-item">Социальная политика</a>
<a class="submenu-item">Рейтинг и оценка</a>
<div class="submenu" data-submenu-id='4'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Безопасность и охрана
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Экология
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Ответственное леспользование
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Социальная политика
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Рейтинг и оценка
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='5'>
<a class="menu-item__link" href="#">Карьера</a>
<div class="submenu">
<a class="submenu-item">Вакансии</a>
<div class="submenu" data-submenu-id='5'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Вакансии
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='6'>
<a class="menu-item__link" href="#">Закупки</a>
<div class="submenu">
<a class="submenu-item">Лесосырьевое обеспечение</a>
<a class="submenu-item">Обращение к поставщикам и подрядчикам</a>
<a class="submenu-item">Закупочные процедуры</a>
<a class="submenu-item">Реализация невостребованного имущества и товаров</a>
<a class="submenu-item">Регистрация поставщиков</a>
<a class="submenu-item">Контакты по закупкам</a>
<div class="submenu" data-submenu-id='6'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Лесосырьевое обеспечение
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Обращение к поставщикам и подрядчикам
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Закупочные процедуры
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Реализация невостребованного имущества и товаров
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Регистрация поставщиков
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Контакты по закупкам
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='7'>
<a class="menu-item__link" href="#">Пресс-центр</a>
<div class="submenu">
<a class="submenu-item">Новости</a>
<a class="submenu-item">Фотогалерея</a>
<a class="submenu-item">Видеогалерея</a>
<a class="submenu-item">Корпоративная газета «Балахнинский бумажник»</a>
<div class="submenu" data-submenu-id='7'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Новости
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Фотогалерея
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Видеогалерея
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Корпоративная газета «Балахнинский бумажник»
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='8'>
<a class="menu-item__link" href="#">Контакты</a>
<div class="submenu">
<a class="submenu-item">Московский офис</a>
<a class="submenu-item">Нижегородский офис</a>
<div class="submenu" data-submenu-id='8'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Московский офис
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Нижегородский офис
</a>
</div>
</li>
</ul>
<ul class="second-menu">
<li class="second-menu-item search-link">
<a class="second-menu-item__link" href="#">
<li class="second-menu-item">
<a class="second-menu-item__link search-link" href="#">
<svg class="second-menu-item__link__icon" width="20" height="20" viewBox="0 0 20 20">
<use xlink:href="img/second_menu.svg#search"></use>
</svg>
</a>
</li>
<li class="second-menu-item">
<li class="second-menu-item" data-menu-id='9'>
<a class="second-menu-item__link" href="#">
<div class="second-menu-item__link__login">
<svg class="second-menu-item__link__icon" width="20" height="20" viewBox="0 0 20 20">
......@@ -261,12 +392,20 @@
<span>Войти</span>
</div>
</a>
<div class="submenu second-submenu">
<a class="submenu-item">Поставщикам</a>
<a class="submenu-item">Покупателям</a>
<div class="submenu second-submenu" data-submenu-id='9'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Поставщикам
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Покупателям
</a>
</div>
</li>
<li class="second-menu-item">
<li class="second-menu-item" data-menu-id='10'>
<a class="second-menu-item__link" href="#">
<div class="second-menu-item__link__lang">
<span>EN</span>
......@@ -275,9 +414,17 @@
</svg>
</div>
</a>
<div class="submenu second-submenu">
<a class="submenu-item">RU</a>
<a class="submenu-item">EN</a>
<div class="submenu second-submenu" data-submenu-id='10'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>RU
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>EN
</a>
</div>
</li>
</ul>
......@@ -290,7 +437,7 @@
</svg>
</a>
<input class="search__field" type="search" placeholder="Поиск по сайту">
<input class="search__button" type="submit" value="НАЙТИ">
<input class="search__button" type="submit" value="НАЙТИ" style="background-image: url(img/button_mask.svg);">
</div>
<div class="separator"></div>
<ul class="second-mob">
......@@ -322,7 +469,7 @@
<h1 class="heading-other__title">Компания</h1>
</div>
</header>
<section class="cards">
<section class="cards" style="background-image: url('img/company_mask.svg');">
<a class="cards-item">
<svg class="cards-item__icon">
<use xlink:href="img/company_icons.svg#history"></use>
......@@ -359,7 +506,7 @@
<div class="company-text section-subpage company-about">
<p class="company-about__text">Акционерное общество «Волга» – российский производитель газетной бумаги премиум-класса из 100% термомеханической массы.</p>
</div>
<div class="company-video company-video-subpage">
<div class="company-video company-video-subpage" style="content: url('img/ВИДЕО.gif');">
</div>
<div class="company-button company-button-subpage">
<a class="company-button-link" href="#">
......@@ -380,7 +527,7 @@
<span class="company-top-item__descr">крупнейших лесопромышленных компаний</span>
<img class="company-top-item__image" src="img/les_ind.svg" alt="logo: lesnaya inustriya">
</div>
<div class="company-top-item">
<div class="company-top-item" style="background-image: url('img/top_mask.svg');">
<span class="company-top-item__num">Топ-200</span>
<span class="company-top-item__descr">крупнейших российских компаний-экспортеров» </span>
<img class="company-top-item__image" src="img/ekspert.svg" alt="logo: ekspert">
......@@ -388,30 +535,28 @@
</div>
</section>
<section class="company">
<div class="company-view">
</div>
<div class="company-about company-location">
<div class="company-view" style="content: url('img/company_view.jpg');"></div>
<div class="company-about company-location" style="background-image: url(img/top_mask_2.svg);">
<p class="company-about__text">Предприятие расположено на берегу реки Волги в Балахнинском районе, в 30 км от Нижнего Новгорода и в 450 км от Москвы.</p>
</div>
<div class="company-prod">
<div class="company-prod" style="background-image: url(img/company_prod_mask.svg);">
<p class="company-prod__text">Предприятие включено в Перечень организаций, оказывающих существенное влияние на отрасли промышленности и торговли, что подтверждает статус надежного и стратегически важного производителя газетной бумаги в стране.</p>
</div>
<div class="company-inner">
</div>
<div class="company-inner" style="content: url('img/company_inner.jpg');"></div>
</section>
<section class="form form-subpage section-subpage">
<form action="" class="form-ui">
<form action="" class="form-ui" style="background-image: url('img/form_mask.svg');">
<div class="form-ui-inner">
<div class="form-ui-inner-heading">
<span class="form-ui-inner-heading__title">Обратная связь</span>
<span class="form-ui-inner-heading__text">Оставьте свои контакты и мы свяжемся с Вами!</span>
</div>
<div class="form-ui-inner-content">
<input class="form-ui-inner-content__input" type="text" placeholder="Ваше имя">
<input class="form-ui-inner-content__input" type="tel" placeholder="Телефон">
<input class="form-ui-inner-content__input" type="email" placeholder="E-mail">
<input class="form-ui-inner-content__input" type="text" placeholder="Ваше имя" required>
<input class="form-ui-inner-content__input" type="tel" placeholder="Телефон" pattern="(\+?\d[- .]*){7,13}" required>
<input class="form-ui-inner-content__input" type="email" placeholder="E-mail" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" required>
<input class="form-ui-inner-content__input" type="text" placeholder="Сообщение">
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ">
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ" style="background-image: url('img/form_button.png');">
</div>
<div class="form-ui-inner-checkbox">
<input class="form-ui-inner-checkbox__input" type="checkbox" id="checkbox1" checked>
......@@ -420,7 +565,7 @@
</div>
</form>
</section>
<footer class="footer">
<footer class="footer" style="background-image: url('img/footer.jpg');">
<nav class="footer-navbar">
<a class="footer-navbar-logo" href="#">
<img src="img/logo.svg" alt="logo: volga">
......@@ -467,6 +612,5 @@
</div>
</footer>
<script defer src="js/index.js"></script>
<script defer src="js/menu_subpage.js"></script>
</body>
</html>
\ No newline at end of file
corp_politica.html
View file @ d97843c7
......@@ -11,7 +11,7 @@
<link rel="stylesheet" href="styles/normalize.css">
</head>
<body class="body-subpage">
<div class="menu-hidden">
<div class="menu-hidden" style="background-image: url('img/menu_mask.svg');">
<div class="menu-hidden-main">
<div class="menu-hidden-mob">
<span class="menu-hidden-mob__title">Меню</span>
......@@ -19,7 +19,8 @@
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more menu-hidden-main-block__more--active" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Компания
</a>
<div class="menu-hidden-main-block__wrapper">
......@@ -33,6 +34,7 @@
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Продукция</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Газетная бумага</a>
......@@ -44,6 +46,7 @@
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Раскрытие информации</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Положения и сведения об обществе</a>
......@@ -56,6 +59,7 @@
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Устойчивое развитие</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Безопасность и охрана</a>
......@@ -66,14 +70,18 @@
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title"><img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Карьера</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Вакансии</a>
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title"><img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Закупки</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Лесосырьевое обеспечение</a>
......@@ -87,6 +95,7 @@
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Пресс-центр</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Новости</a>
......@@ -96,7 +105,9 @@
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title"><img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Контакты</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Московский филиал</a>
......@@ -104,7 +115,7 @@
</div>
</div>
</div>
<div class="menu-hidden-form">
<div class="menu-hidden-form" style="background-image: url('img/menu_mask.svg');">
<img class="menu-hidden-form__close" src="img/close.svg" alt="close button">
<form action="" class="form-ui">
<div class="form-ui-inner">
......@@ -120,11 +131,11 @@
<input class="form-ui-inner-checkbox__input" type="checkbox" id="checkbox2" checked>
<label for="checkbox2" class="form-ui-inner-checkbox__text">Согласен на обработку персональных данных</label>
</div>
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ">
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ" style="background-image: url('img/form_button.png');">
</div>
</div>
</form>
<a class="menu-hidden-form__button" href="#">ОБРАТНАЯ СВЯЗЬ</a>
<a class="menu-hidden-form__button" href="#" style="background-image: url('img/form_button.png');">ОБРАТНАЯ СВЯЗЬ</a>
<div class="menu-hidden-form-contact">
<div class="menu-hidden-form-contact-item">
<img class="menu-hidden-form-contact-item__icon" src="img/mail.svg" alt="mail icon">
......@@ -159,10 +170,11 @@
</div>
</div>
</div>
<header class="header header-subpage">
<header class="header header-subpage" style="background-image: url('img/header.jpg');">
<nav class="navbar">
<a class="navbar-logo" href="#">
<img src="img/logo.svg" alt="logo: volga">
<img class="navbar-logo__icon" src="img/logo.svg" alt="logo: volga">
<img class="navbar-logo__scroll hidden" src="img/logo_scroll.svg" alt="logo: volga">
</a>
<a class="navbar-burger" href="#">
<svg width="20" height="13" class="navbar-burger__icon">
......@@ -171,88 +183,207 @@
<span class="navbar-burger__title">Меню</span>
</a>
<ul class="menu">
<li class="menu-item">
<li class="menu-item" data-menu-id='1'>
<a class="menu-item__link" href="#">Компания</a>
<div class="submenu">
<a class="submenu-item">История предприятия</a>
<a class="submenu-item">Руководство</a>
<a class="submenu-item">Производство</a>
<a class="submenu-item">Стратегия развития</a>
<a class="submenu-item">Корпоративная политика</a>
<div class="submenu" data-submenu-id='1'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>История предприятия</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Руководство</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Производство</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Стратегия развития</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Корпоративная политика</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='2'>
<a class="menu-item__link" href="#">Продукция</a>
<div class="submenu">
<a class="submenu-item">Газетная бумага</a>
<a class="submenu-item">Бумага для перфорирования</a>
<a class="submenu-item">Пухлая бумага для печатных книг</a>
<a class="submenu-item">Упаковочная бумага</a>
<div class="submenu" data-submenu-id='2'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Газетная бумага</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Бумага для перфорирования</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Пухлая бумага для печатных книг</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Упаковочная бумага</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='3'>
<a class="menu-item__link" href="#">Раскрытие информации</a>
<div class="submenu">
<a class="submenu-item">Положение и сведения об обществе</a>
<a class="submenu-item">Годовой отчёт</a>
<a class="submenu-item">Акционерам</a>
<a class="submenu-item">Производство, передача и сбыт тепловой энергии, воды</a>
<a class="submenu-item">Специальная оценка условий труда</a>
<div class="submenu" data-submenu-id='3'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Положение и сведения об обществе
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Годовой отчёт
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Акционерам
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Производство, передача и сбыт тепловой энергии, воды
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Специальная оценка условий труда
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='4'>
<a class="menu-item__link" href="#">Устойчивое развитие</a>
<div class="submenu">
<a class="submenu-item">Безопасность и охрана</a>
<a class="submenu-item">Экология</a>
<a class="submenu-item">Ответственное леспользование</a>
<a class="submenu-item">Социальная политика</a>
<a class="submenu-item">Рейтинг и оценка</a>
<div class="submenu" data-submenu-id='4'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Безопасность и охрана
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Экология
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Ответственное леспользование
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Социальная политика
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Рейтинг и оценка
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='5'>
<a class="menu-item__link" href="#">Карьера</a>
<div class="submenu">
<a class="submenu-item">Вакансии</a>
<div class="submenu" data-submenu-id='5'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Вакансии
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='6'>
<a class="menu-item__link" href="#">Закупки</a>
<div class="submenu">
<a class="submenu-item">Лесосырьевое обеспечение</a>
<a class="submenu-item">Обращение к поставщикам и подрядчикам</a>
<a class="submenu-item">Закупочные процедуры</a>
<a class="submenu-item">Реализация невостребованного имущества и товаров</a>
<a class="submenu-item">Регистрация поставщиков</a>
<a class="submenu-item">Контакты по закупкам</a>
<div class="submenu" data-submenu-id='6'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Лесосырьевое обеспечение
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Обращение к поставщикам и подрядчикам
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Закупочные процедуры
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Реализация невостребованного имущества и товаров
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Регистрация поставщиков
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Контакты по закупкам
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='7'>
<a class="menu-item__link" href="#">Пресс-центр</a>
<div class="submenu">
<a class="submenu-item">Новости</a>
<a class="submenu-item">Фотогалерея</a>
<a class="submenu-item">Видеогалерея</a>
<a class="submenu-item">Корпоративная газета «Балахнинский бумажник»</a>
<div class="submenu" data-submenu-id='7'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Новости
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Фотогалерея
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Видеогалерея
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Корпоративная газета «Балахнинский бумажник»
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='8'>
<a class="menu-item__link" href="#">Контакты</a>
<div class="submenu">
<a class="submenu-item">Московский офис</a>
<a class="submenu-item">Нижегородский офис</a>
<div class="submenu" data-submenu-id='8'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Московский офис
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Нижегородский офис
</a>
</div>
</li>
</ul>
<ul class="second-menu">
<li class="second-menu-item search-link">
<a class="second-menu-item__link" href="#">
<li class="second-menu-item">
<a class="second-menu-item__link search-link" href="#">
<svg class="second-menu-item__link__icon" width="20" height="20" viewBox="0 0 20 20">
<use xlink:href="img/second_menu.svg#search"></use>
</svg>
</a>
</li>
<li class="second-menu-item">
<li class="second-menu-item" data-menu-id='9'>
<a class="second-menu-item__link" href="#">
<div class="second-menu-item__link__login">
<svg class="second-menu-item__link__icon" width="20" height="20" viewBox="0 0 20 20">
......@@ -261,12 +392,20 @@
<span>Войти</span>
</div>
</a>
<div class="submenu second-submenu">
<a class="submenu-item">Поставщикам</a>
<a class="submenu-item">Покупателям</a>
<div class="submenu second-submenu" data-submenu-id='9'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Поставщикам
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Покупателям
</a>
</div>
</li>
<li class="second-menu-item">
<li class="second-menu-item" data-menu-id='10'>
<a class="second-menu-item__link" href="#">
<div class="second-menu-item__link__lang">
<span>EN</span>
......@@ -275,9 +414,17 @@
</svg>
</div>
</a>
<div class="submenu second-submenu">
<a class="submenu-item">RU</a>
<a class="submenu-item">EN</a>
<div class="submenu second-submenu" data-submenu-id='10'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>RU
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>EN
</a>
</div>
</li>
</ul>
......@@ -290,7 +437,7 @@
</svg>
</a>
<input class="search__field" type="search" placeholder="Поиск по сайту">
<input class="search__button" type="submit" value="НАЙТИ">
<input class="search__button" type="submit" value="НАЙТИ" style="background-image: url(img/button_mask.svg);">
</div>
<div class="separator"></div>
<ul class="second-mob">
......@@ -324,14 +471,22 @@
<h1 class="heading-other__title">Корпоративная политика</h1>
</div>
</header>
<section class="corp">
<section class="corp" style="background-image: url('img/company_mask.svg');">
<div class="corp-wrapper">
<a class="corp-wrapper__btn" href="#quote">Наша миссия</a>
<a class="corp-wrapper__btn" href="#value">Корпоративные ценности</a>
<a class="corp-wrapper__btn" href="#quote">
<svg class="corp-wrapper__btn__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Наша миссия
</a>
<a class="corp-wrapper__btn" href="#value">
<svg class="corp-wrapper__btn__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Корпоративные ценности
</a>
</div>
<div class="corp-content">
<h2 id="quote" class="corp-content__title">Наша миссия</h2>
<div class="corp-content__quote">Производить качественную и востребованную бумажную продукцию для печати газет и книг, способствуя распространению информации во всем мире.</div>
<div class="corp-content__quote" style="background-image: url('img/corp_quote.svg');">Производить качественную и востребованную бумажную продукцию для печати газет и книг, способствуя распространению информации во всем мире.</div>
<h2 id="value" class="corp-content__title">Корпоративные ценности</h2>
<h3 class="corp-content__subtitle">Лидерство и постоянное развитие</h3>
<p class="corp-content__text">Мы стремимся всегда задавать тенденции развития отрасли. Опираясь на опыт многих поколений бумажников, совершенствуя настоящее, компания осваивает новые технологии производства газетной бумаги.</p>
......@@ -351,18 +506,18 @@
</div>
</section>
<section class="form form-subpage section-subpage">
<form action="" class="form-ui">
<form action="" class="form-ui" style="background-image: url('img/form_mask.svg');">
<div class="form-ui-inner">
<div class="form-ui-inner-heading">
<span class="form-ui-inner-heading__title">Обратная связь</span>
<span class="form-ui-inner-heading__text">Оставьте свои контакты и мы свяжемся с Вами!</span>
</div>
<div class="form-ui-inner-content">
<input class="form-ui-inner-content__input" type="text" placeholder="Ваше имя">
<input class="form-ui-inner-content__input" type="tel" placeholder="Телефон">
<input class="form-ui-inner-content__input" type="email" placeholder="E-mail">
<input class="form-ui-inner-content__input" type="text" placeholder="Ваше имя" required>
<input class="form-ui-inner-content__input" type="tel" placeholder="Телефон" pattern="(\+?\d[- .]*){7,13}" required>
<input class="form-ui-inner-content__input" type="email" placeholder="E-mail" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" required>
<input class="form-ui-inner-content__input" type="text" placeholder="Сообщение">
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ">
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ" style="background-image: url('img/form_button.png');">
</div>
<div class="form-ui-inner-checkbox">
<input class="form-ui-inner-checkbox__input" type="checkbox" id="checkbox1" checked>
......@@ -371,7 +526,7 @@
</div>
</form>
</section>
<footer class="footer">
<footer class="footer" style="background-image: url('img/footer.jpg');">
<nav class="footer-navbar">
<a class="footer-navbar-logo" href="#">
<img src="img/logo.svg" alt="logo: volga">
......@@ -418,8 +573,5 @@
</div>
</footer>
<script defer src="js/index.js"></script>
<script defer src="js/menu_subpage.js"></script>
<script defer src="js/smothScroll.js"></script>
<script defer src="js/fixed.js"></script>
</body>
</html>
\ No newline at end of file
head.html
View file @ d97843c7
......@@ -11,7 +11,7 @@
<link rel="stylesheet" href="styles/normalize.css">
</head>
<body class="body-subpage">
<div class="menu-hidden">
<div class="menu-hidden" style="background-image: url('img/menu_mask.svg');">
<div class="menu-hidden-main">
<div class="menu-hidden-mob">
<span class="menu-hidden-mob__title">Меню</span>
......@@ -19,7 +19,8 @@
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more menu-hidden-main-block__more--active" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Компания
</a>
<div class="menu-hidden-main-block__wrapper">
......@@ -33,6 +34,7 @@
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Продукция</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Газетная бумага</a>
......@@ -44,6 +46,7 @@
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Раскрытие информации</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Положения и сведения об обществе</a>
......@@ -56,6 +59,7 @@
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Устойчивое развитие</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Безопасность и охрана</a>
......@@ -66,14 +70,18 @@
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title"><img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Карьера</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Вакансии</a>
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title"><img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Закупки</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Лесосырьевое обеспечение</a>
......@@ -87,6 +95,7 @@
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Пресс-центр</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Новости</a>
......@@ -96,7 +105,9 @@
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title"><img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Контакты</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Московский филиал</a>
......@@ -104,7 +115,7 @@
</div>
</div>
</div>
<div class="menu-hidden-form">
<div class="menu-hidden-form" style="background-image: url('img/menu_mask.svg');">
<img class="menu-hidden-form__close" src="img/close.svg" alt="close button">
<form action="" class="form-ui">
<div class="form-ui-inner">
......@@ -120,11 +131,11 @@
<input class="form-ui-inner-checkbox__input" type="checkbox" id="checkbox2" checked>
<label for="checkbox2" class="form-ui-inner-checkbox__text">Согласен на обработку персональных данных</label>
</div>
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ">
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ" style="background-image: url('img/form_button.png');">
</div>
</div>
</form>
<a class="menu-hidden-form__button" href="#">ОБРАТНАЯ СВЯЗЬ</a>
<a class="menu-hidden-form__button" href="#" style="background-image: url('img/form_button.png');">ОБРАТНАЯ СВЯЗЬ</a>
<div class="menu-hidden-form-contact">
<div class="menu-hidden-form-contact-item">
<img class="menu-hidden-form-contact-item__icon" src="img/mail.svg" alt="mail icon">
......@@ -159,10 +170,11 @@
</div>
</div>
</div>
<header class="header header-subpage">
<header class="header header-subpage" style="background-image: url('img/header.jpg');">
<nav class="navbar">
<a class="navbar-logo" href="#">
<img src="img/logo.svg" alt="logo: volga">
<img class="navbar-logo__icon" src="img/logo.svg" alt="logo: volga">
<img class="navbar-logo__scroll hidden" src="img/logo_scroll.svg" alt="logo: volga">
</a>
<a class="navbar-burger" href="#">
<svg width="20" height="13" class="navbar-burger__icon">
......@@ -171,88 +183,207 @@
<span class="navbar-burger__title">Меню</span>
</a>
<ul class="menu">
<li class="menu-item">
<li class="menu-item" data-menu-id='1'>
<a class="menu-item__link" href="#">Компания</a>
<div class="submenu">
<a class="submenu-item">История предприятия</a>
<a class="submenu-item">Руководство</a>
<a class="submenu-item">Производство</a>
<a class="submenu-item">Стратегия развития</a>
<a class="submenu-item">Корпоративная политика</a>
<div class="submenu" data-submenu-id='1'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>История предприятия</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Руководство</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Производство</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Стратегия развития</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Корпоративная политика</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='2'>
<a class="menu-item__link" href="#">Продукция</a>
<div class="submenu">
<a class="submenu-item">Газетная бумага</a>
<a class="submenu-item">Бумага для перфорирования</a>
<a class="submenu-item">Пухлая бумага для печатных книг</a>
<a class="submenu-item">Упаковочная бумага</a>
<div class="submenu" data-submenu-id='2'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Газетная бумага</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Бумага для перфорирования</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Пухлая бумага для печатных книг</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Упаковочная бумага</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='3'>
<a class="menu-item__link" href="#">Раскрытие информации</a>
<div class="submenu">
<a class="submenu-item">Положение и сведения об обществе</a>
<a class="submenu-item">Годовой отчёт</a>
<a class="submenu-item">Акционерам</a>
<a class="submenu-item">Производство, передача и сбыт тепловой энергии, воды</a>
<a class="submenu-item">Специальная оценка условий труда</a>
<div class="submenu" data-submenu-id='3'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Положение и сведения об обществе
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Годовой отчёт
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Акционерам
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Производство, передача и сбыт тепловой энергии, воды
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Специальная оценка условий труда
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='4'>
<a class="menu-item__link" href="#">Устойчивое развитие</a>
<div class="submenu">
<a class="submenu-item">Безопасность и охрана</a>
<a class="submenu-item">Экология</a>
<a class="submenu-item">Ответственное леспользование</a>
<a class="submenu-item">Социальная политика</a>
<a class="submenu-item">Рейтинг и оценка</a>
<div class="submenu" data-submenu-id='4'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Безопасность и охрана
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Экология
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Ответственное леспользование
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Социальная политика
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Рейтинг и оценка
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='5'>
<a class="menu-item__link" href="#">Карьера</a>
<div class="submenu">
<a class="submenu-item">Вакансии</a>
<div class="submenu" data-submenu-id='5'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Вакансии
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='6'>
<a class="menu-item__link" href="#">Закупки</a>
<div class="submenu">
<a class="submenu-item">Лесосырьевое обеспечение</a>
<a class="submenu-item">Обращение к поставщикам и подрядчикам</a>
<a class="submenu-item">Закупочные процедуры</a>
<a class="submenu-item">Реализация невостребованного имущества и товаров</a>
<a class="submenu-item">Регистрация поставщиков</a>
<a class="submenu-item">Контакты по закупкам</a>
<div class="submenu" data-submenu-id='6'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Лесосырьевое обеспечение
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Обращение к поставщикам и подрядчикам
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Закупочные процедуры
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Реализация невостребованного имущества и товаров
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Регистрация поставщиков
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Контакты по закупкам
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='7'>
<a class="menu-item__link" href="#">Пресс-центр</a>
<div class="submenu">
<a class="submenu-item">Новости</a>
<a class="submenu-item">Фотогалерея</a>
<a class="submenu-item">Видеогалерея</a>
<a class="submenu-item">Корпоративная газета «Балахнинский бумажник»</a>
<div class="submenu" data-submenu-id='7'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Новости
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Фотогалерея
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Видеогалерея
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Корпоративная газета «Балахнинский бумажник»
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='8'>
<a class="menu-item__link" href="#">Контакты</a>
<div class="submenu">
<a class="submenu-item">Московский офис</a>
<a class="submenu-item">Нижегородский офис</a>
<div class="submenu" data-submenu-id='8'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Московский офис
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Нижегородский офис
</a>
</div>
</li>
</ul>
<ul class="second-menu">
<li class="second-menu-item search-link">
<a class="second-menu-item__link" href="#">
<li class="second-menu-item">
<a class="second-menu-item__link search-link" href="#">
<svg class="second-menu-item__link__icon" width="20" height="20" viewBox="0 0 20 20">
<use xlink:href="img/second_menu.svg#search"></use>
</svg>
</a>
</li>
<li class="second-menu-item">
<li class="second-menu-item" data-menu-id='9'>
<a class="second-menu-item__link" href="#">
<div class="second-menu-item__link__login">
<svg class="second-menu-item__link__icon" width="20" height="20" viewBox="0 0 20 20">
......@@ -261,12 +392,20 @@
<span>Войти</span>
</div>
</a>
<div class="submenu second-submenu">
<a class="submenu-item">Поставщикам</a>
<a class="submenu-item">Покупателям</a>
<div class="submenu second-submenu" data-submenu-id='9'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Поставщикам
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Покупателям
</a>
</div>
</li>
<li class="second-menu-item">
<li class="second-menu-item" data-menu-id='10'>
<a class="second-menu-item__link" href="#">
<div class="second-menu-item__link__lang">
<span>EN</span>
......@@ -275,9 +414,17 @@
</svg>
</div>
</a>
<div class="submenu second-submenu">
<a class="submenu-item">RU</a>
<a class="submenu-item">EN</a>
<div class="submenu second-submenu" data-submenu-id='10'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>RU
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>EN
</a>
</div>
</li>
</ul>
......@@ -290,7 +437,7 @@
</svg>
</a>
<input class="search__field" type="search" placeholder="Поиск по сайту">
<input class="search__button" type="submit" value="НАЙТИ">
<input class="search__button" type="submit" value="НАЙТИ" style="background-image: url(img/button_mask.svg);">
</div>
<div class="separator"></div>
<ul class="second-mob">
......@@ -324,7 +471,7 @@
<h1 class="heading-other__title">Руководство</h1>
</div>
</header>
<section class="people">
<section class="people" style="background-image: url('img/company_mask.svg');">
<div class="people-card">
<img src="img/person1.png" alt="person photo">
<div class="people-card-text">
......@@ -398,20 +545,19 @@
</div>
</div>
</section>
<section class="form form-subpage section-subpage">
<form action="" class="form-ui">
<form action="" class="form-ui" style="background-image: url('img/form_mask.svg');">
<div class="form-ui-inner">
<div class="form-ui-inner-heading">
<span class="form-ui-inner-heading__title">Обратная связь</span>
<span class="form-ui-inner-heading__text">Оставьте свои контакты и мы свяжемся с Вами!</span>
</div>
<div class="form-ui-inner-content">
<input class="form-ui-inner-content__input" type="text" placeholder="Ваше имя">
<input class="form-ui-inner-content__input" type="tel" placeholder="Телефон">
<input class="form-ui-inner-content__input" type="email" placeholder="E-mail">
<input class="form-ui-inner-content__input" type="text" placeholder="Ваше имя" required>
<input class="form-ui-inner-content__input" type="tel" placeholder="Телефон" pattern="(\+?\d[- .]*){7,13}" required>
<input class="form-ui-inner-content__input" type="email" placeholder="E-mail" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" required>
<input class="form-ui-inner-content__input" type="text" placeholder="Сообщение">
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ">
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ" style="background-image: url('img/form_button.png');">
</div>
<div class="form-ui-inner-checkbox">
<input class="form-ui-inner-checkbox__input" type="checkbox" id="checkbox1" checked>
......@@ -420,7 +566,7 @@
</div>
</form>
</section>
<footer class="footer">
<footer class="footer" style="background-image: url('img/footer.jpg');">
<nav class="footer-navbar">
<a class="footer-navbar-logo" href="#">
<img src="img/logo.svg" alt="logo: volga">
......@@ -467,6 +613,5 @@
</div>
</footer>
<script defer src="js/index.js"></script>
<script defer src="js/menu_subpage.js"></script>
</body>
</html>
\ No newline at end of file
history.html
View file @ d97843c7
......@@ -11,7 +11,7 @@
<link rel="stylesheet" href="styles/normalize.css">
</head>
<body class="body-subpage">
<div class="menu-hidden">
<div class="menu-hidden" style="background-image: url('img/menu_mask.svg');">
<div class="menu-hidden-main">
<div class="menu-hidden-mob">
<span class="menu-hidden-mob__title">Меню</span>
......@@ -19,7 +19,8 @@
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more menu-hidden-main-block__more--active" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Компания
</a>
<div class="menu-hidden-main-block__wrapper">
......@@ -33,6 +34,7 @@
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Продукция</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Газетная бумага</a>
......@@ -44,6 +46,7 @@
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Раскрытие информации</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Положения и сведения об обществе</a>
......@@ -56,6 +59,7 @@
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Устойчивое развитие</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Безопасность и охрана</a>
......@@ -66,14 +70,18 @@
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title"><img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Карьера</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Вакансии</a>
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title"><img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Закупки</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Лесосырьевое обеспечение</a>
......@@ -87,6 +95,7 @@
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Пресс-центр</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Новости</a>
......@@ -96,7 +105,9 @@
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title"><img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Контакты</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Московский филиал</a>
......@@ -104,7 +115,7 @@
</div>
</div>
</div>
<div class="menu-hidden-form">
<div class="menu-hidden-form" style="background-image: url('img/menu_mask.svg');">
<img class="menu-hidden-form__close" src="img/close.svg" alt="close button">
<form action="" class="form-ui">
<div class="form-ui-inner">
......@@ -120,11 +131,11 @@
<input class="form-ui-inner-checkbox__input" type="checkbox" id="checkbox2" checked>
<label for="checkbox2" class="form-ui-inner-checkbox__text">Согласен на обработку персональных данных</label>
</div>
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ">
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ" style="background-image: url('img/form_button.png');">
</div>
</div>
</form>
<a class="menu-hidden-form__button" href="#">ОБРАТНАЯ СВЯЗЬ</a>
<a class="menu-hidden-form__button" href="#" style="background-image: url('img/form_button.png');">ОБРАТНАЯ СВЯЗЬ</a>
<div class="menu-hidden-form-contact">
<div class="menu-hidden-form-contact-item">
<img class="menu-hidden-form-contact-item__icon" src="img/mail.svg" alt="mail icon">
......@@ -159,10 +170,11 @@
</div>
</div>
</div>
<header class="header header-subpage">
<header class="header header-subpage" style="background-image: url('img/header.jpg');">
<nav class="navbar">
<a class="navbar-logo" href="#">
<img src="img/logo.svg" alt="logo: volga">
<img class="navbar-logo__icon" src="img/logo.svg" alt="logo: volga">
<img class="navbar-logo__scroll hidden" src="img/logo_scroll.svg" alt="logo: volga">
</a>
<a class="navbar-burger" href="#">
<svg width="20" height="13" class="navbar-burger__icon">
......@@ -171,88 +183,207 @@
<span class="navbar-burger__title">Меню</span>
</a>
<ul class="menu">
<li class="menu-item">
<li class="menu-item" data-menu-id='1'>
<a class="menu-item__link" href="#">Компания</a>
<div class="submenu">
<a class="submenu-item">История предприятия</a>
<a class="submenu-item">Руководство</a>
<a class="submenu-item">Производство</a>
<a class="submenu-item">Стратегия развития</a>
<a class="submenu-item">Корпоративная политика</a>
<div class="submenu" data-submenu-id='1'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>История предприятия</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Руководство</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Производство</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Стратегия развития</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Корпоративная политика</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='2'>
<a class="menu-item__link" href="#">Продукция</a>
<div class="submenu">
<a class="submenu-item">Газетная бумага</a>
<a class="submenu-item">Бумага для перфорирования</a>
<a class="submenu-item">Пухлая бумага для печатных книг</a>
<a class="submenu-item">Упаковочная бумага</a>
<div class="submenu" data-submenu-id='2'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Газетная бумага</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Бумага для перфорирования</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Пухлая бумага для печатных книг</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Упаковочная бумага</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='3'>
<a class="menu-item__link" href="#">Раскрытие информации</a>
<div class="submenu">
<a class="submenu-item">Положение и сведения об обществе</a>
<a class="submenu-item">Годовой отчёт</a>
<a class="submenu-item">Акционерам</a>
<a class="submenu-item">Производство, передача и сбыт тепловой энергии, воды</a>
<a class="submenu-item">Специальная оценка условий труда</a>
<div class="submenu" data-submenu-id='3'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Положение и сведения об обществе
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Годовой отчёт
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Акционерам
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Производство, передача и сбыт тепловой энергии, воды
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Специальная оценка условий труда
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='4'>
<a class="menu-item__link" href="#">Устойчивое развитие</a>
<div class="submenu">
<a class="submenu-item">Безопасность и охрана</a>
<a class="submenu-item">Экология</a>
<a class="submenu-item">Ответственное леспользование</a>
<a class="submenu-item">Социальная политика</a>
<a class="submenu-item">Рейтинг и оценка</a>
<div class="submenu" data-submenu-id='4'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Безопасность и охрана
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Экология
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Ответственное леспользование
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Социальная политика
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Рейтинг и оценка
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='5'>
<a class="menu-item__link" href="#">Карьера</a>
<div class="submenu">
<a class="submenu-item">Вакансии</a>
<div class="submenu" data-submenu-id='5'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Вакансии
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='6'>
<a class="menu-item__link" href="#">Закупки</a>
<div class="submenu">
<a class="submenu-item">Лесосырьевое обеспечение</a>
<a class="submenu-item">Обращение к поставщикам и подрядчикам</a>
<a class="submenu-item">Закупочные процедуры</a>
<a class="submenu-item">Реализация невостребованного имущества и товаров</a>
<a class="submenu-item">Регистрация поставщиков</a>
<a class="submenu-item">Контакты по закупкам</a>
<div class="submenu" data-submenu-id='6'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Лесосырьевое обеспечение
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Обращение к поставщикам и подрядчикам
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Закупочные процедуры
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Реализация невостребованного имущества и товаров
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Регистрация поставщиков
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Контакты по закупкам
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='7'>
<a class="menu-item__link" href="#">Пресс-центр</a>
<div class="submenu">
<a class="submenu-item">Новости</a>
<a class="submenu-item">Фотогалерея</a>
<a class="submenu-item">Видеогалерея</a>
<a class="submenu-item">Корпоративная газета «Балахнинский бумажник»</a>
<div class="submenu" data-submenu-id='7'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Новости
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Фотогалерея
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Видеогалерея
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Корпоративная газета «Балахнинский бумажник»
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='8'>
<a class="menu-item__link" href="#">Контакты</a>
<div class="submenu">
<a class="submenu-item">Московский офис</a>
<a class="submenu-item">Нижегородский офис</a>
<div class="submenu" data-submenu-id='8'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Московский офис
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Нижегородский офис
</a>
</div>
</li>
</ul>
<ul class="second-menu">
<li class="second-menu-item search-link">
<a class="second-menu-item__link" href="#">
<li class="second-menu-item">
<a class="second-menu-item__link search-link" href="#">
<svg class="second-menu-item__link__icon" width="20" height="20" viewBox="0 0 20 20">
<use xlink:href="img/second_menu.svg#search"></use>
</svg>
</a>
</li>
<li class="second-menu-item">
<li class="second-menu-item" data-menu-id='9'>
<a class="second-menu-item__link" href="#">
<div class="second-menu-item__link__login">
<svg class="second-menu-item__link__icon" width="20" height="20" viewBox="0 0 20 20">
......@@ -261,12 +392,20 @@
<span>Войти</span>
</div>
</a>
<div class="submenu second-submenu">
<a class="submenu-item">Поставщикам</a>
<a class="submenu-item">Покупателям</a>
<div class="submenu second-submenu" data-submenu-id='9'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Поставщикам
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Покупателям
</a>
</div>
</li>
<li class="second-menu-item">
<li class="second-menu-item" data-menu-id='10'>
<a class="second-menu-item__link" href="#">
<div class="second-menu-item__link__lang">
<span>EN</span>
......@@ -275,9 +414,17 @@
</svg>
</div>
</a>
<div class="submenu second-submenu">
<a class="submenu-item">RU</a>
<a class="submenu-item">EN</a>
<div class="submenu second-submenu" data-submenu-id='10'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>RU
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>EN
</a>
</div>
</li>
</ul>
......@@ -290,7 +437,7 @@
</svg>
</a>
<input class="search__field" type="search" placeholder="Поиск по сайту">
<input class="search__button" type="submit" value="НАЙТИ">
<input class="search__button" type="submit" value="НАЙТИ" style="background-image: url(img/button_mask.svg);">
</div>
<div class="separator"></div>
<ul class="second-mob">
......@@ -325,7 +472,7 @@
</div>
</header>
<section class="timeline">
<div class="timeline-about">
<div class="timeline-about" style="background-image: url('img/company_mask.svg');">
<p class="timeline-about__title">Традиции качества</p>
<p class="timeline-about__text">Выпускаемая АО «Волга» газетная бумага соответствует
требованиям нормативных документов:
......@@ -479,13 +626,19 @@
</div>
</div>
</div>
<a href="#" class="timeline-content-line-wrapper-events__prev"></a>
<a href="#" class="timeline-content-line-wrapper-events__next"></a>
<a href="#" class="timeline-content-line-wrapper-events__prev">
<img class="timeline-content-line-wrapper-events__prev--normal" src="img/prev.svg" alt="prev">
<img class="timeline-content-line-wrapper-events__prev--hover" src="img/prev_hover.svg" alt="prev">
</a>
<a href="#" class="timeline-content-line-wrapper-events__next">
<img class="timeline-content-line-wrapper-events__next--normal" src="img/next.svg" alt="next">
<img class="timeline-content-line-wrapper-events__next--hover" src="img/next_hover.svg" alt="next">
</a>
</div>
</div>
</div>
</section>
<section class="history-video">
<section class="history-video" style="background-image: url(img/history_video.jpg);">
<div class="history-video-button">
<a class="company-button-link" href="#">
<img class="history-video-button__icon company-button__icon company-button__icon--normal" src="img/video_button.svg" alt="wacth video">
......@@ -501,20 +654,19 @@
из 100% термомеханической массы.</p>
</div>
</section>
<section class="form form-subpage section-subpage">
<form action="" class="form-ui">
<form action="" class="form-ui" style="background-image: url('img/form_mask.svg');">
<div class="form-ui-inner">
<div class="form-ui-inner-heading">
<span class="form-ui-inner-heading__title">Обратная связь</span>
<span class="form-ui-inner-heading__text">Оставьте свои контакты и мы свяжемся с Вами!</span>
</div>
<div class="form-ui-inner-content">
<input class="form-ui-inner-content__input" type="text" placeholder="Ваше имя">
<input class="form-ui-inner-content__input" type="tel" placeholder="Телефон">
<input class="form-ui-inner-content__input" type="email" placeholder="E-mail">
<input class="form-ui-inner-content__input" type="text" placeholder="Ваше имя" required>
<input class="form-ui-inner-content__input" type="tel" placeholder="Телефон" pattern="(\+?\d[- .]*){7,13}" required>
<input class="form-ui-inner-content__input" type="email" placeholder="E-mail" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" required>
<input class="form-ui-inner-content__input" type="text" placeholder="Сообщение">
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ">
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ" style="background-image: url('img/form_button.png');">
</div>
<div class="form-ui-inner-checkbox">
<input class="form-ui-inner-checkbox__input" type="checkbox" id="checkbox1" checked>
......@@ -523,7 +675,7 @@
</div>
</form>
</section>
<footer class="footer">
<footer class="footer" style="background-image: url('img/footer.jpg');">
<nav class="footer-navbar">
<a class="footer-navbar-logo" href="#">
<img src="img/logo.svg" alt="logo: volga">
......@@ -570,7 +722,5 @@
</div>
</footer>
<script defer src="js/index.js"></script>
<script defer src="js/menu_subpage.js"></script>
<script defer src="js/timeline.js"></script>
</body>
</html>
\ No newline at end of file
img/list.svg
View file @ d97843c7
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="7.53174" y="1.17525" width="9.65165" height="9.65165" transform="rotate(45 7.53174 1.17525)" stroke="white" stroke-opacity="0.8"/>
<svg width="0" height="0" class="hidden">
<symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="list">
<path stroke-opacity=".8" d="M7.532 1.175L14.357 8l-6.825 6.825L.707 8z"></path>
</symbol>
</svg>
img/points_style.svg
View file @ d97843c7
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="7.53125" y="0.904983" width="9.65165" height="9.65165" transform="rotate(45 7.53125 0.904983)" stroke="#029745"/>
<svg width="0" height="0" class="hidden">
<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="points_style">
<path d="M7.531.905l6.825 6.825-6.825 6.825L.706 7.73z"></path>
</symbol>
</svg>
\ No newline at end of file
img/points_style_list.svg 0 → 100644
View file @ d97843c7
<svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="12.001" y="7.14371" width="8" height="8" transform="rotate(45 12.001 7.14371)" stroke="#029745" stroke-width="2"/>
</svg>
index.html
View file @ d97843c7
......@@ -10,8 +10,8 @@
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/normalize.css">
</head>
<body>
<div class="menu-hidden">
<body style="background-image: url('img/ecology_mask.svg');">
<div class="menu-hidden" style="background-image: url('img/menu_mask.svg');">
<div class="menu-hidden-main">
<div class="menu-hidden-mob">
<span class="menu-hidden-mob__title">Меню</span>
......@@ -19,7 +19,8 @@
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more menu-hidden-main-block__more--active" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Компания
</a>
<div class="menu-hidden-main-block__wrapper">
......@@ -33,6 +34,7 @@
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Продукция</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Газетная бумага</a>
......@@ -44,6 +46,7 @@
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Раскрытие информации</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Положения и сведения об обществе</a>
......@@ -56,6 +59,7 @@
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Устойчивое развитие</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Безопасность и охрана</a>
......@@ -66,14 +70,18 @@
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title"><img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Карьера</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Вакансии</a>
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title"><img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Закупки</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Лесосырьевое обеспечение</a>
......@@ -87,6 +95,7 @@
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Пресс-центр</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Новости</a>
......@@ -96,7 +105,9 @@
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title"><img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Контакты</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Московский филиал</a>
......@@ -104,7 +115,7 @@
</div>
</div>
</div>
<div class="menu-hidden-form">
<div class="menu-hidden-form" style="background-image: url('img/menu_mask.svg');">
<img class="menu-hidden-form__close" src="img/close.svg" alt="close button">
<form action="" class="form-ui">
<div class="form-ui-inner">
......@@ -120,12 +131,11 @@
<input class="form-ui-inner-checkbox__input" type="checkbox" id="checkbox2" checked>
<label for="checkbox2" class="form-ui-inner-checkbox__text">Согласен на обработку персональных данных</label>
</div>
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ">
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ" style="background-image: url('img/form_button.png');">
</div>
</div>
</form>
<a class="menu-hidden-form__button" href="#">ОБРАТНАЯ СВЯЗЬ</a>
<a class="menu-hidden-form__button" href="#" style="background-image: url('img/form_button.png');">ОБРАТНАЯ СВЯЗЬ</a>
<div class="menu-hidden-form-contact">
<div class="menu-hidden-form-contact-item">
<img class="menu-hidden-form-contact-item__icon" src="img/mail.svg" alt="mail icon">
......@@ -160,10 +170,21 @@
</div>
</div>
</div>
<header class="header">
<header class="header" style="background-image: linear-gradient(
180deg,
rgba(0, 0, 0, 0.68) 0%,
rgba(0, 0, 0, 0.12) 61.02%
),
linear-gradient(
180deg,
rgba(31, 31, 31, 0.425) 0%,
rgba(31, 31, 31, 0.125) 100%
),
url('img/лес2.gif');">
<nav class="navbar">
<a class="navbar-logo" href="#">
<img src="img/logo.svg" alt="logo: volga">
<img class="navbar-logo__icon" src="img/logo.svg" alt="logo: volga">
<img class="navbar-logo__scroll hidden" src="img/logo_scroll.svg" alt="logo: volga">
</a>
<a class="navbar-burger" href="#">
<svg width="20" height="13" class="navbar-burger__icon">
......@@ -172,76 +193,195 @@
<span class="navbar-burger__title">Меню</span>
</a>
<ul class="menu">
<li class="menu-item">
<li class="menu-item" data-menu-id='1'>
<a class="menu-item__link" href="#">Компания</a>
<div class="submenu">
<a class="submenu-item">История предприятия</a>
<a class="submenu-item">Руководство</a>
<a class="submenu-item">Производство</a>
<a class="submenu-item">Стратегия развития</a>
<a class="submenu-item">Корпоративная политика</a>
<div class="submenu" data-submenu-id='1'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>История предприятия</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Руководство</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Производство</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Стратегия развития</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Корпоративная политика</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='2'>
<a class="menu-item__link" href="#">Продукция</a>
<div class="submenu">
<a class="submenu-item">Газетная бумага</a>
<a class="submenu-item">Бумага для перфорирования</a>
<a class="submenu-item">Пухлая бумага для печатных книг</a>
<a class="submenu-item">Упаковочная бумага</a>
<div class="submenu" data-submenu-id='2'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Газетная бумага</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Бумага для перфорирования</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Пухлая бумага для печатных книг</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Упаковочная бумага</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='3'>
<a class="menu-item__link" href="#">Раскрытие информации</a>
<div class="submenu">
<a class="submenu-item">Положение и сведения об обществе</a>
<a class="submenu-item">Годовой отчёт</a>
<a class="submenu-item">Акционерам</a>
<a class="submenu-item">Производство, передача и сбыт тепловой энергии, воды</a>
<a class="submenu-item">Специальная оценка условий труда</a>
<div class="submenu" data-submenu-id='3'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Положение и сведения об обществе
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Годовой отчёт
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Акционерам
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Производство, передача и сбыт тепловой энергии, воды
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Специальная оценка условий труда
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='4'>
<a class="menu-item__link" href="#">Устойчивое развитие</a>
<div class="submenu">
<a class="submenu-item">Безопасность и охрана</a>
<a class="submenu-item">Экология</a>
<a class="submenu-item">Ответственное леспользование</a>
<a class="submenu-item">Социальная политика</a>
<a class="submenu-item">Рейтинг и оценка</a>
<div class="submenu" data-submenu-id='4'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Безопасность и охрана
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Экология
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Ответственное леспользование
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Социальная политика
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Рейтинг и оценка
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='5'>
<a class="menu-item__link" href="#">Карьера</a>
<div class="submenu">
<a class="submenu-item">Вакансии</a>
<div class="submenu" data-submenu-id='5'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Вакансии
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='6'>
<a class="menu-item__link" href="#">Закупки</a>
<div class="submenu">
<a class="submenu-item">Лесосырьевое обеспечение</a>
<a class="submenu-item">Обращение к поставщикам и подрядчикам</a>
<a class="submenu-item">Закупочные процедуры</a>
<a class="submenu-item">Реализация невостребованного имущества и товаров</a>
<a class="submenu-item">Регистрация поставщиков</a>
<a class="submenu-item">Контакты по закупкам</a>
<div class="submenu" data-submenu-id='6'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Лесосырьевое обеспечение
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Обращение к поставщикам и подрядчикам
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Закупочные процедуры
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Реализация невостребованного имущества и товаров
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Регистрация поставщиков
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Контакты по закупкам
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='7'>
<a class="menu-item__link" href="#">Пресс-центр</a>
<div class="submenu">
<a class="submenu-item">Новости</a>
<a class="submenu-item">Фотогалерея</a>
<a class="submenu-item">Видеогалерея</a>
<a class="submenu-item">Корпоративная газета «Балахнинский бумажник»</a>
<div class="submenu" data-submenu-id='7'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Новости
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Фотогалерея
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Видеогалерея
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Корпоративная газета «Балахнинский бумажник»
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='8'>
<a class="menu-item__link" href="#">Контакты</a>
<div class="submenu">
<a class="submenu-item">Московский офис</a>
<a class="submenu-item">Нижегородский офис</a>
<div class="submenu" data-submenu-id='8'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Московский офис
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Нижегородский офис
</a>
</div>
</li>
</ul>
......@@ -253,7 +393,7 @@
</svg>
</a>
</li>
<li class="second-menu-item">
<li class="second-menu-item" data-menu-id='9'>
<a class="second-menu-item__link" href="#">
<div class="second-menu-item__link__login">
<svg class="second-menu-item__link__icon" width="20" height="20" viewBox="0 0 20 20">
......@@ -262,12 +402,20 @@
<span>Войти</span>
</div>
</a>
<div class="submenu second-submenu">
<a class="submenu-item">Поставщикам</a>
<a class="submenu-item">Покупателям</a>
<div class="submenu second-submenu" data-submenu-id='9'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Поставщикам
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Покупателям
</a>
</div>
</li>
<li class="second-menu-item">
<li class="second-menu-item" data-menu-id='10'>
<a class="second-menu-item__link" href="#">
<div class="second-menu-item__link__lang">
<span>EN</span>
......@@ -276,9 +424,17 @@
</svg>
</div>
</a>
<div class="submenu second-submenu">
<a class="submenu-item">RU</a>
<a class="submenu-item">EN</a>
<div class="submenu second-submenu" data-submenu-id='10'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>RU
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>EN
</a>
</div>
</li>
</ul>
......@@ -291,7 +447,7 @@
</svg>
</a>
<input class="search__field" type="search" placeholder="Поиск по сайту">
<input class="search__button" type="submit" value="НАЙТИ">
<input class="search__button" type="submit" value="НАЙТИ" style="background-image: url(img/button_mask.svg);">
</div>
<ul class="second-mob">
<li class="second-mob-item">
......@@ -317,18 +473,30 @@
<div class="heading">
<h1 class="heading__title">Акционерное общество «Волга»</h1>
<h2 class="heading__slogan">Опираясь на прошлое, создаём будущее!</h2>
<a class="heading__button" href="#">УЗНАТЬ ПОДРОБНЕЕ</a>
<a class="heading__button" href="#" style="background-image: url('img/button_mask.svg');">УЗНАТЬ ПОДРОБНЕЕ</a>
</div>
<div class="heading-menu-wrapper">
<ul class="heading-menu">
<li class="heading-menu-item">
<a class="heading-menu-item__link" href="#">Карьера</a>
<a class="heading-menu-item__link" href="#">
<svg class="heading-menu-item__icon">
<use xlink:href="img/list.svg#list"></use>
</svg>Новости
</a>
</li>
<li class="heading-menu-item">
<a class="heading-menu-item__link" href="#">Контакты</a>
<a class="heading-menu-item__link" href="#">
<svg class="heading-menu-item__icon">
<use xlink:href="img/list.svg#list"></use>
</svg>Вакансии
</a>
</li>
<li class="heading-menu-item">
<a class="heading-menu-item__link" href="#">Вирутальный тур</a>
<a class="heading-menu-item__link" href="#">
<svg class="heading-menu-item__icon">
<use xlink:href="img/list.svg#list"></use>
</svg>Вирутальный тур
</a>
</li>
</ul>
</div>
......@@ -372,7 +540,7 @@
</a>
</div>
</header>
<section class="production">
<section class="production" style="background-image: url('img/production_mask.svg');">
<div class="production-text">
<h2 class="production__title">Продукция</h2>
<p class="production__descr">Уникальный продукт – газетная бумага,
......@@ -389,19 +557,34 @@
<h4 class="production-list-item__title">Бумага для печати</h4>
<ul class="production-list-item__points">
<a class="production-list-item__descr" href="#">
<li class="production-list-item__points-item">Газетная бумага стандартная</li>
<li class="production-list-item__points-item">
<svg class="production-list-item__points-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Газетная бумага стандартная</li>
</a>
<a class="production-list-item__descr" href="#">
<li class="production-list-item__points-item">Газетная бумага окрашенная в массе</li>
<li class="production-list-item__points-item">
<svg class="production-list-item__points-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Газетная бумага окрашенная в массе</li>
</a>
<a class="production-list-item__descr" href="#">
<li class="production-list-item__points-item">Газетная бумага повышенной белизны</li>
<li class="production-list-item__points-item">
<svg class="production-list-item__points-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Газетная бумага повышенной белизны</li>
</a>
<a class="production-list-item__descr" href="#">
<li class="production-list-item__points-item">Пухлая бумага кремового оттенка</li>
<li class="production-list-item__points-item">
<svg class="production-list-item__points-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Пухлая бумага кремового оттенка</li>
</a>
<a class="production-list-item__descr" href="#">
<li class="production-list-item__points-item">Пухлая бумага оттенка натурального волокна</li>
<li class="production-list-item__points-item">
<svg class="production-list-item__points-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Пухлая бумага оттенка натурального волокна</li>
</a>
</ul>
</div>
......@@ -412,13 +595,22 @@
<h4 class="production-list-item__title">Тарные бумаги (картоны)</h4>
<ul class="production-list-item__points">
<a class="production-list-item__descr" href="#">
<li class="production-list-item__points-item">Флютинг (65-100)</li>
<li class="production-list-item__points-item">
<svg class="production-list-item__points-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Флютинг (65-100)</li>
</a>
<a class="production-list-item__descr" href="#">
<li class="production-list-item__points-item">Интерлайнер (40-55)</li>
<li class="production-list-item__points-item">
<svg class="production-list-item__points-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Интерлайнер (40-55)</li>
</a>
<a class="production-list-item__descr" href="#">
<li class="production-list-item__points-item">Лайнер (65-100)</li>
<li class="production-list-item__points-item">
<svg class="production-list-item__points-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Лайнер (65-100)</li>
</a>
</ul>
</div>
......@@ -429,13 +621,22 @@
<h4 class="production-list-item__title">Специальные виды бумаг</h4>
<ul class="production-list-item__points">
<a class="production-list-item__descr" href="#">
<li class="production-list-item__points-item">Мешочная</li>
<li class="production-list-item__points-item">
<svg class="production-list-item__points-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Мешочная</li>
</a>
<a class="production-list-item__descr" href="#">
<li class="production-list-item__points-item">Для импрегнирования</li>
<li class="production-list-item__points-item">
<svg class="production-list-item__points-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Для импрегнирования</li>
</a>
<a class="production-list-item__descr" href="#">
<li class="production-list-item__points-item">Для пищевых продуктов</li>
<li class="production-list-item__points-item">
<svg class="production-list-item__points-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Для пищевых продуктов</li>
</a>
</ul>
</div>
......@@ -470,7 +671,7 @@
<span class="company-fact-item__descr">от Нижнего Новгорода</span>
</div>
</div>
<div class="company-video">
<div class="company-video" style="content: url('img/ВИДЕО.gif');">
</div>
<div class="company-button">
<a class="company-button-link" href="#">
......@@ -488,7 +689,7 @@
и «Топ-100 крупнейших компаний Нижегородской области» (по данным издания «Деловой квартал»).
</p>
<div class="company-tour-wrapper">
<a class="company-tour__button" href="#">ВИРТУАЛЬНЫЙ ТУР</a>
<a class="company-tour__button" href="#" style="background-image: url('img/button_mask.svg');">ВИРТУАЛЬНЫЙ ТУР</a>
<a class="company-tour__link" href="#">Подробнее</a>
</div>
</div>
......@@ -503,14 +704,14 @@
<span class="company-top-item__descr">крупнейших лесопромышленных компаний</span>
<img class="company-top-item__image" src="img/les_ind.svg" alt="logo: lesnaya inustriya">
</div>
<div class="company-top-item">
<div class="company-top-item" style="background-image: url('img/top_mask.svg');">
<span class="company-top-item__num">Топ-200</span>
<span class="company-top-item__descr">крупнейших российских компаний-экспортеров» </span>
<img class="company-top-item__image" src="img/ekspert.svg" alt="logo: ekspert">
</div>
</div>
</section>
<section class="press">
<section class="press" style="background-image: url('img/top_mask_2.svg');">
<h2 class="press__title">Пресс-центр</h2>
<div class="press-mob">
<a href="#">
......@@ -648,26 +849,26 @@
в полной мере осознавая значимость поддержания экологического равновесия в регионе.</p>
<a class="ecology-text__link" href="#">Подробнее</a>
</div>
<div class="ecology-quote">
<div class="ecology-quote" style="background-image: url('img/ecology.jpg');">
<img class="ecology-quote__icon" src="img/quote.svg" alt="quote icon">
<span class="ecology-quote__text">АО «Волга» на международном уровне было отмечено
за высокую экологическую ответственность.
Эксперты присвоили предприятию наивысший экологический рейтинг «ЭКО-А+»</span>
</div>
<div class="ecology-fact">
<div class="ecology-fact-item">
<div class="ecology-fact-item" style="background-image: url('img/ecology_fact.svg');">
<span class="ecology-fact-item__num">01</span>
<p class="ecology-fact-item__text">Все кородревесные отходы производства утилизируются
с получением тепловой энергии,
а образующаяся в результате сжигания отходов зола не представляет угрозы загрязнения окружающей среды.</p>
</div>
<div class="ecology-fact-item">
<div class="ecology-fact-item" style="background-image: url('img/ecology_fact.svg');">
<span class="ecology-fact-item__num">02</span>
<p class="ecology-fact-item__text">Мощный коросжигающий котел позволяет не только избавляться
от отходов и решать главную экологическую проблему района,
но и примерно на 50 процентов обеспечивает комбинат технологическим паром.</p>
</div>
<div class="ecology-fact-item">
<div class="ecology-fact-item" style="background-image: url('img/ecology_fact.svg');">
<span class="ecology-fact-item__num">03</span>
<p class="ecology-fact-item__text">Все кородревесные отходы производства утилизируются
с получением тепловой энергии,
......@@ -693,7 +894,7 @@
</div>
</section>
<section class="form">
<form action="" class="form-ui">
<form action="" class="form-ui" style="background-image: url('img/form_mask.svg');">
<div class="form-ui-inner">
<div class="form-ui-inner-heading">
<span class="form-ui-inner-heading__title">Обратная связь</span>
......@@ -704,7 +905,7 @@
<input class="form-ui-inner-content__input" type="tel" placeholder="Телефон" pattern="(\+?\d[- .]*){7,13}" required>
<input class="form-ui-inner-content__input" type="email" placeholder="E-mail" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" required>
<input class="form-ui-inner-content__input" type="text" placeholder="Сообщение">
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ">
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ" style="background-image: url('img/form_button.png');">
</div>
<div class="form-ui-inner-checkbox">
<input class="form-ui-inner-checkbox__input" type="checkbox" id="checkbox1" checked>
......@@ -713,7 +914,7 @@
</div>
</form>
</section>
<footer class="footer">
<footer class="footer" style="background-image: url('img/footer.jpg');">
<nav class="footer-navbar">
<a class="footer-navbar-logo" href="#">
<img src="img/logo.svg" alt="logo: volga">
......@@ -759,10 +960,8 @@
</div>
</div>
</footer>
<script defer src="js/index.js"></script>
<script defer src="js/menu.js"></script>
<script defer src="js/tabs.js"></script>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=6d05ea4e-5eb3-4409-88a3-d4f809c991d9" type="text/javascript"></script>
<script defer src="js/index.js"></script>
<script defer src="js/map_icon.js"></script>
</body>
</html>
\ No newline at end of file
js/fixed.js deleted 100644 → 0
View file @ 3d0dfc5a
let wrapper = document.querySelector('.corp-wrapper');
window.addEventListener('scroll', () => {
let y = pageYOffset;
if (y > 300) {
wrapper.style.position = 'fixed';
}
else {
wrapper.style.position = 'static';
}
});
\ No newline at end of file
js/index.js
View file @ d97843c7
document.querySelector('.navbar-burger').addEventListener('click', () => {
document.addEventListener("DOMContentLoaded", function () {
document.querySelector('.navbar-burger')?.addEventListener('click', () => {
document.querySelector('.menu-hidden').classList.add('menu-hidden--active');
document.querySelector('html').style.overflow = 'hidden';
});
document.querySelector('.menu-hidden-form__close').addEventListener('click', () => {
});
document.querySelector('.menu-hidden-form__close')?.addEventListener('click', () => {
document.querySelector('.menu-hidden').classList.remove('menu-hidden--active');
document.querySelector('html').style.overflowY = 'visible';
});
document.querySelector('.menu-hidden-mob__close').addEventListener('click', () => {
});
document.querySelector('.menu-hidden-mob__close')?.addEventListener('click', () => {
document.querySelector('.menu-hidden').classList.remove('menu-hidden--active');
document.querySelector('html').style.overflowY = 'visible';
});
//+/- menu
let titles = document.querySelectorAll('.menu-hidden-main-block__title');
let mores = document.querySelectorAll('.menu-hidden-main-block__more');
let wrappers = document.querySelectorAll('.menu-hidden-main-block__wrapper');
for (let i = 0; i < mores.length; i++) {
mores[i].addEventListener('click', () => {
mores[i].classList.toggle('menu-hidden-main-block__more--active');
if (mores[i].classList.contains('menu-hidden-main-block__more--active')) {
mores[i].setAttribute('src', 'img/-.svg');
wrappers[i].style.display = 'flex';
} else {
mores[i].setAttribute('src', 'img/+.svg');
wrappers[i].style.display = 'none';
}
});
}
let menuItems = document.querySelectorAll('.menu-item');
let secondMenuItems = document.querySelectorAll('.second-menu-item');
let submenus = document.querySelectorAll('.submenu');
let secondSubmenus = document.querySelectorAll('.second-submenu');
//menu
let navbar = document.querySelector('.navbar');
let navbarLogo = document.querySelector('.navbar-logo__icon');
let navbarScroll = document.querySelector('.navbar-logo__scroll');
let navbarBurgerIcon = document.querySelector('.navbar-burger__icon');
let navbarBurgerTitle = document.querySelector('.navbar-burger__title');
let menuItemLink = document.querySelectorAll('.menu-item__link');
let secondMenuItemLink = document.querySelectorAll('.second-menu-item__link');
let secondMenuItemLinkIcon = document.querySelectorAll('.second-menu-item__link__icon');
let points = document.querySelectorAll('.point-item-wrapper');
for (let i = 0; i < menuItems.length; i++) {
menuItems[i].addEventListener('mouseenter', () => {
if (search.style.opacity !== '1') {
if (window.innerWidth > 1670) {
if (pageYOffset < 680) {
window.addEventListener('scroll', () => {
document.querySelector('.header').style.opacity = 1;
let y = pageYOffset;
if (y > 5) {
navbarLogo.classList.add('hidden');
navbarScroll.classList.remove('hidden');
navbar.classList.add('navbar-scroll');
navbarBurgerIcon.classList.add('navbar-scroll-burger__icon');
navbarBurgerTitle.classList.add('navbar-scroll-burger__title');
for (let item of menuItemLink) {
item.classList.add('menu-scroll-item__link');
}
for (let item of secondMenuItemLink) {
item.classList.add('second-menu-scroll-item__link');
}
for (let item of secondMenuItemLinkIcon) {
item.classList.add('second-menu-scroll-item__link__icon');
}
}
else {
if (pageYOffset < 540) {
document.querySelector('.header').style.opacity = 1;
navbarLogo.classList.remove('hidden');
navbarScroll.classList.add('hidden');
navbar.classList.remove('navbar-scroll');
navbarBurgerIcon.classList.remove('navbar-scroll-burger__icon');
navbarBurgerTitle.classList.remove('navbar-scroll-burger__title');
for (let item of menuItemLink) {
item.classList.remove('menu-scroll-item__link');
}
for (let item of secondMenuItemLink) {
item.classList.remove('second-menu-scroll-item__link');
}
submenus[i].classList.add('submenu--active');
for (let item of secondMenuItemLinkIcon) {
item.classList.remove('second-menu-scroll-item__link__icon');
}
})
menuItems[i].addEventListener('mouseleave', () => {
if (search.style.opacity !== '1') {
if (window.innerWidth > 1670) {
if (pageYOffset < 680) {
}
if (search.style.opacity == '1') {
if (y > document.querySelector('.header').offsetHeight - navbar.offsetHeight - search.offsetHeight) {
document.querySelector('.header').style.opacity = 1;
for (let point of points) {
point.style.display = 'none';
}
} else {
document.querySelector('.header').style.opacity = 0.99;
for (let point of points) {
point.style.display = 'flex';
}
}
}
else {
if (pageYOffset < 540) {
if (y > document.querySelector('.header').offsetHeight - navbar.offsetHeight) {
document.querySelector('.header').style.opacity = 1;
for (let point of points) {
point.style.display = 'none';
}
} else {
document.querySelector('.header').style.opacity = 0.99;
for (let point of points) {
point.style.display = 'flex';
}
}
submenus[i].classList.remove('submenu--active');
}
})
}
});
//+/- menu
let titles = document.querySelectorAll('.menu-hidden-main-block__title');
let mores = document.querySelectorAll('.menu-hidden-main-block__more');
let lesses = document.querySelectorAll('.menu-hidden-main-block__less');
let wrappers = document.querySelectorAll('.menu-hidden-main-block__wrapper');
for (let i = 0; i < mores.length; i++) {
mores[i]?.addEventListener('click', () => {
mores[i].classList.add('hidden');
lesses[i].classList.remove('hidden');
wrappers[i].style.display = 'flex';
});
}
for (let i = 0; i < lesses.length; i++) {
lesses[i]?.addEventListener('click', () => {
lesses[i].classList.add('hidden');
mores[i].classList.remove('hidden');
wrappers[i].style.display = 'none';
});
}
const menuIdElems = document.querySelectorAll('[data-menu-id]');
const submenuIdElems = document.querySelectorAll('[data-submenu-id]');
for (let i = 0; i < secondMenuItems.length; i++) {
secondMenuItems[i].addEventListener('mouseenter', () => {
for (const menu of menuIdElems) {
menu?.addEventListener('mouseenter', () => {
if (search.style.opacity !== '1') {
secondSubmenus[i - 1].classList.add('submenu--active');
if (window.innerWidth > 1670) {
if (pageYOffset < 680) {
document.querySelector('.header').style.opacity = 1;
......@@ -80,11 +124,15 @@ for (let i = 0; i < secondMenuItems.length; i++) {
document.querySelector('.header').style.opacity = 1;
}
}
submenuIdElems.forEach(item => {
if (item.dataset.submenuId === menu.dataset.menuId) {
item.classList.add('submenu--active');
}
})
secondMenuItems[i].addEventListener('mouseleave', () => {
}
})
menu?.addEventListener('mouseleave', () => {
if (search.style.opacity !== '1') {
secondSubmenus[i - 1].classList.remove('submenu--active');
if (window.innerWidth > 1670) {
if (pageYOffset < 680) {
document.querySelector('.header').style.opacity = 0.99;
......@@ -95,16 +143,21 @@ for (let i = 0; i < secondMenuItems.length; i++) {
document.querySelector('.header').style.opacity = 0.99;
}
}
submenuIdElems.forEach(item => {
if (item.dataset.submenuId === menu.dataset.menuId) {
item.classList.remove('submenu--active');
}
})
}
})
}
}
//search
let search = document.querySelector('.search');
let searchClose = document.querySelector('.search-close');
let searchLink = document.querySelector('.search-link');
//search
let search = document.querySelector('.search');
let searchClose = document.querySelector('.search-close');
let searchLink = document.querySelector('.search-link');
searchClose.addEventListener('click', (e) => {
searchClose?.addEventListener('click', (e) => {
e.preventDefault();
search.style.opacity = '0';
search.style.visibility = 'hidden';
......@@ -112,9 +165,9 @@ searchClose.addEventListener('click', (e) => {
for (let point of points) {
point.style.display = 'flex';
}
});
});
searchLink.addEventListener('click', (e) => {
searchLink?.addEventListener('click', (e) => {
e.preventDefault();
if (search.style.opacity == '1') {
search.style.opacity = '0';
......@@ -134,31 +187,241 @@ searchLink.addEventListener('click', (e) => {
}
}
}
});
});
//videobutton
let videoButton = document.querySelector('.company-button-link');
let videoButtonNormal = document.querySelector('.company-button__icon--normal');
let videoButtonHover = document.querySelector('.company-button__icon--hover');
let videoButtonActive = document.querySelector('.company-button__icon--active');
//videobutton
let videoButton = document.querySelector('.company-button-link');
let videoButtonNormal = document.querySelector('.company-button__icon--normal');
let videoButtonHover = document.querySelector('.company-button__icon--hover');
let videoButtonActive = document.querySelector('.company-button__icon--active');
videoButton.addEventListener('mouseenter', () => {
videoButton?.addEventListener('mouseenter', () => {
videoButtonHover.style.opacity = '1';
videoButtonHover.style.visibility = 'visible';
});
});
videoButton.addEventListener('mouseleave', () => {
videoButton?.addEventListener('mouseleave', () => {
videoButtonHover.style.opacity = '0';
videoButtonHover.style.visibility = 'hidden';
});
});
videoButton.addEventListener('mousedown', () => {
videoButton?.addEventListener('mousedown', () => {
videoButtonActive.style.opacity = '1';
videoButtonActive.style.visibility = 'visible';
});
});
videoButton.addEventListener('mouseup', () => {
videoButton?.addEventListener('mouseup', () => {
videoButtonActive.style.opacity = '0';
videoButtonActive.style.visibility = 'hidden';
});
//fixed buttons
let wrapper = document.querySelector('.corp-wrapper');
window.addEventListener('scroll', () => {
let y = pageYOffset;
if (wrapper) {
if (y > 300) {
wrapper.style.position = 'fixed';
}
else {
wrapper.style.position = 'static';
}
}
});
//smoothScroll
const smoothScrollElems = document.querySelectorAll('a[href^="#"]:not(a[href="#"])');
smoothScrollElems.forEach(link => {
link?.addEventListener('click', (event) => {
event.preventDefault();
let href = link.getAttribute('href').substring(1);
const scrollTarget = document.getElementById(href);
const topOffset = document.querySelector('.navbar').offsetHeight + 10;
const elementPosition = scrollTarget.getBoundingClientRect().top;
const offsetPosition = elementPosition - topOffset;
window.scrollBy({
top: offsetPosition,
behavior: 'smooth'
});
})
})
//tabs
const tabsHandlerElems = document.querySelectorAll('[data-tabs-handler]');
const tabsFieldElems = document.querySelectorAll('[data-tabs-field]');
for (const tab of tabsHandlerElems) {
tab?.addEventListener('click', () => {
tabsHandlerElems.forEach(item => {
if (tab === item) {
item.classList.remove('press-wrapper__button--disabled');
} else {
item.classList.add('press-wrapper__button--disabled');
}
})
tabsFieldElems.forEach(item => {
if (item.dataset.tabsField === tab.dataset.tabsHandler) {
item.classList.remove('press-content-news--hidden');
} else {
item.classList.add('press-content-news--hidden');
}
})
})
}
//technology
let technologyItems = document.querySelectorAll('.technology-item');
let technologyBlocks = document.querySelectorAll('.technology-item-block');
let technologyIcon = document.querySelectorAll('.technology-item__icon');
let technologyIconActive = document.querySelectorAll('.technology-item__icon--active');
console.log(technologyIcon);
for (let i = 0; i < technologyItems.length; i++) {
technologyItems[i]?.addEventListener('mouseenter', () => {
technologyIcon[i].style.opacity = '0';
technologyIconActive[i].style.opacity = '1';
technologyBlocks[i].style.visibility = 'visible';
technologyBlocks[i].style.opacity = '1';
});
technologyItems[i]?.addEventListener('mouseleave', () => {
technologyIcon[i].style.opacity = '1';
technologyIconActive[i].style.opacity = '0';
technologyBlocks[i].style.visibility = 'hidden';
technologyBlocks[i].style.opacity = '0';
technologyBlocks[i]?.addEventListener('mouseenter', () => {
technologyIcon[i].style.opacity = '0';
technologyIconActive[i].style.opacity = '1';
technologyBlocks[i].style.visibility = 'visible';
technologyBlocks[i].style.opacity = '1';
});
technologyBlocks[i]?.addEventListener('mouseleave', () => {
technologyIcon[i].style.opacity = '1';
technologyIconActive[i].style.opacity = '0';
technologyBlocks[i].style.visibility = 'hidden';
technologyBlocks[i].style.opacity = '0';
});
});
}
//timeline
let prev = document.querySelector('.timeline-content-line-wrapper-events__prev');
let prevH = document.querySelector('.timeline-content-line-wrapper-events__prev--hover');
let prevN = document.querySelector('.timeline-content-line-wrapper-events__prev--normal');
let next = document.querySelector('.timeline-content-line-wrapper-events__next');
let nextH = document.querySelector('.timeline-content-line-wrapper-events__next--hover');
let nextN = document.querySelector('.timeline-content-line-wrapper-events__next--normal');
let contents = document.querySelectorAll('.timeline-content-year');
let events = document.querySelectorAll('.timeline-content-line-wrapper-events__item');
let transform = document.querySelector('.timeline-transform');
prev?.addEventListener('mouseenter', () => {
prevN.style.opacity = '0';
prevH.style.opacity = '1';
});
prev?.addEventListener('mouseleave', () => {
prevH.style.opacity = '0';
prevN.style.opacity = '1';
});
next?.addEventListener('mouseenter', () => {
nextN.style.opacity = '0';
nextH.style.opacity = '1';
});
next?.addEventListener('mouseleave', () => {
nextH.style.opacity = '0';
nextN.style.opacity = '1';
});
prev?.addEventListener('click', (e) => {
e.preventDefault;
for (let i = 0; i < events.length; i++) {
if (events[i].classList.contains('timeline-content-line-wrapper-events__item--selected')) {
next.style.display = 'block';
events[i].classList.remove('timeline-content-line-wrapper-events__item--selected');
contents[i].classList.remove('timeline-content-year--selected');
transform.style.transform = 'translate3d(' + (-350) * (i - 2) + 'px, 0px, 0px)';
events[i - 1].classList.add('timeline-content-line-wrapper-events__item--selected');
contents[i - 1].classList.add('timeline-content-year--selected');
if ((i - 1) === 0) {
prev.style.display = 'none';
}
else {
prev.style.display = 'block';
}
}
}
});
next?.addEventListener('click', (e) => {
e.preventDefault;
for (let j = events.length - 1; j >= 0; j--) {
if (events[j].classList.contains('timeline-content-line-wrapper-events__item--selected')) {
prev.style.display = 'block';
events[j].classList.remove('timeline-content-line-wrapper-events__item--selected');
contents[j].classList.remove('timeline-content-year--selected');
transform.style.transform = 'translate3d(' + (-350) * j + 'px, 0px, 0px)';
events[j + 1].classList.add('timeline-content-line-wrapper-events__item--selected');
contents[j + 1].classList.add('timeline-content-year--selected');
if ((j + 1) === events.length - 1) {
next.style.display = 'none';
}
else {
next.style.display = 'block';
}
}
}
});
for (let i = 0; i < events.length; i++) {
events[i]?.addEventListener('click', () => {
for (let item of events) {
if (item.classList.contains('timeline-content-line-wrapper-events__item--selected')) {
item.classList.remove('timeline-content-line-wrapper-events__item--selected');
}
}
for (let item of contents) {
if (item.classList.contains('timeline-content-year--selected')) {
item.classList.remove('timeline-content-year--selected');
}
}
transform.style.transform = 'translate3d(' + (-350) * (i - 1) + 'px, 0px, 0px)';
events[i].classList.add('timeline-content-line-wrapper-events__item--selected');
contents[i].classList.add('timeline-content-year--selected');
if (i === 0) {
prev.style.display = 'none';
}
else {
prev.style.display = 'block';
};
if (i === events.length - 1) {
next.style.display = 'none';
}
else {
next.style.display = 'block';
};
});
}
//vacancy
let plus = document.querySelectorAll('.vac__plus');
let minus = document.querySelectorAll('.vac__minus');
let inner = document.querySelectorAll('.vac-all-item-inner');
for (let i = 0; i < plus.length; i++) {
plus[i]?.addEventListener('click', () => {
plus[i].style.display = 'none';
minus[i].style.display = 'block';
inner[i].classList.add('vac-all-item-inner--active');
});
}
for (let i = 0; i < minus.length; i++) {
minus[i]?.addEventListener('click', () => {
minus[i].style.display = 'none';
plus[i].style.display = 'block';
inner[i].classList.remove('vac-all-item-inner--active');
});
}
});
\ No newline at end of file
js/map_icon.js
View file @ d97843c7
......@@ -19,9 +19,7 @@ ymaps.ready(function () {
iconImageSize: [50, 70],
iconImageOffset: [-25, -65]
});
myMap.geoObjects
.add(myPlacemark)
.add(myPlacemark2);
});
js/menu.js deleted 100644 → 0
View file @ 3d0dfc5a
let body = document.querySelector('body');
let navbar = document.querySelector('.navbar');
let navbarLogo = document.querySelector('.navbar-logo img');
let navbarBurgerIcon = document.querySelector('.navbar-burger__icon');
let navbarBurgerTitle = document.querySelector('.navbar-burger__title');
let menuItemLink = document.querySelectorAll('.menu-item__link');
let secondMenuItemLink = document.querySelectorAll('.second-menu-item__link');
let secondMenuItemLinkIcon = document.querySelectorAll('.second-menu-item__link__icon');
let points = document.querySelectorAll('.point-item-wrapper');
window.addEventListener('scroll', () => {
let y = pageYOffset;
if (y > 5) {
navbarLogo.setAttribute('src', 'img/logo_scroll.svg');
navbar.classList.add('navbar-scroll');
navbarBurgerIcon.classList.add('navbar-scroll-burger__icon');
navbarBurgerTitle.classList.add('navbar-scroll-burger__title');
for (let item of menuItemLink) {
item.classList.add('menu-scroll-item__link');
}
for (let item of secondMenuItemLink) {
item.classList.add('second-menu-scroll-item__link');
}
for (let item of secondMenuItemLinkIcon) {
item.classList.add('second-menu-scroll-item__link__icon');
}
}
else {
navbarLogo.setAttribute('src', 'img/logo.svg');
navbar.classList.remove('navbar-scroll');
navbarBurgerIcon.classList.remove('navbar-scroll-burger__icon');
navbarBurgerTitle.classList.remove('navbar-scroll-burger__title');
for (let item of menuItemLink) {
item.classList.remove('menu-scroll-item__link');
}
for (let item of secondMenuItemLink) {
item.classList.remove('second-menu-scroll-item__link');
}
for (let item of secondMenuItemLinkIcon) {
item.classList.remove('second-menu-scroll-item__link__icon');
}
}
if (window.innerWidth > 1670) {
if (search.style.opacity == '1') {
if (y > 470) {
document.querySelector('.header').style.opacity = 1;
for (let point of points) {
point.style.display = 'none';
}
} else {
document.querySelector('.header').style.opacity = 0.99;
for (let point of points) {
point.style.display = 'flex';
}
}
}
else {
if (y > 680) {
document.querySelector('.header').style.opacity = 1;
for (let point of points) {
point.style.display = 'none';
}
} else {
document.querySelector('.header').style.opacity = 0.99;
for (let point of points) {
point.style.display = 'flex';
}
}
}
}
else {
if (search.style.opacity == '1') {
if (y > 340) {
document.querySelector('.header').style.opacity = 1;
for (let point of points) {
point.style.display = 'none';
}
} else {
document.querySelector('.header').style.opacity = 0.99;
for (let point of points) {
point.style.display = 'flex';
}
}
}
else {
if (y > 540) {
document.querySelector('.header').style.opacity = 1;
for (let point of points) {
point.style.display = 'none';
}
} else {
document.querySelector('.header').style.opacity = 0.99;
for (let point of points) {
point.style.display = 'flex';
}
}
}
}
});
\ No newline at end of file
js/menu_subpage.js deleted 100644 → 0
View file @ 3d0dfc5a
let body = document.querySelector('body');
let navbar = document.querySelector('.navbar');
let navbarLogo = document.querySelector('.navbar-logo img');
let navbarBurgerIcon = document.querySelector('.navbar-burger__icon');
let navbarBurgerTitle = document.querySelector('.navbar-burger__title');
let menuItemLink = document.querySelectorAll('.menu-item__link');
let secondMenuItemLink = document.querySelectorAll('.second-menu-item__link');
let secondMenuItemLinkIcon = document.querySelectorAll('.second-menu-item__link__icon');
window.addEventListener('scroll', () => {
document.querySelector('.header').style.opacity = 1;
let y = pageYOffset;
if (y > 5) {
navbarLogo.setAttribute('src', 'img/logo_scroll.svg');
navbar.classList.add('navbar-scroll');
navbarBurgerIcon.classList.add('navbar-scroll-burger__icon');
navbarBurgerTitle.classList.add('navbar-scroll-burger__title');
for (let item of menuItemLink) {
item.classList.add('menu-scroll-item__link');
}
for (let item of secondMenuItemLink) {
item.classList.add('second-menu-scroll-item__link');
}
for (let item of secondMenuItemLinkIcon) {
item.classList.add('second-menu-scroll-item__link__icon');
}
}
else {
navbarLogo.setAttribute('src', 'img/logo.svg');
navbar.classList.remove('navbar-scroll');
navbarBurgerIcon.classList.remove('navbar-scroll-burger__icon');
navbarBurgerTitle.classList.remove('navbar-scroll-burger__title');
for (let item of menuItemLink) {
item.classList.remove('menu-scroll-item__link');
}
for (let item of secondMenuItemLink) {
item.classList.remove('second-menu-scroll-item__link');
}
for (let item of secondMenuItemLinkIcon) {
item.classList.remove('second-menu-scroll-item__link__icon');
}
}
});
\ No newline at end of file
js/smothScroll.js deleted 100644 → 0
View file @ 3d0dfc5a
const smoothScrollElems = document.querySelectorAll('a[href^="#"]:not(a[href="#"])');
smoothScrollElems.forEach(link => {
link.addEventListener('click', (event) => {
event.preventDefault();
let href = link.getAttribute('href').substring(1);
const scrollTarget = document.getElementById(href);
const topOffset = document.querySelector('.navbar').offsetHeight + 10;
const elementPosition = scrollTarget.getBoundingClientRect().top;
const offsetPosition = elementPosition - topOffset;
window.scrollBy({
top: offsetPosition,
behavior: 'smooth'
});
})
})
js/tabs.js deleted 100644 → 0
View file @ 3d0dfc5a
const tabsHandlerElems = document.querySelectorAll('[data-tabs-handler]');
const tabsFieldElems = document.querySelectorAll('[data-tabs-field]');
for (const tab of tabsHandlerElems) {
tab.addEventListener('click', () => {
tabsHandlerElems.forEach(item => {
if (tab === item) {
item.classList.remove('press-wrapper__button--disabled');
} else {
item.classList.add('press-wrapper__button--disabled');
}
})
tabsFieldElems.forEach(item => {
if (item.dataset.tabsField === tab.dataset.tabsHandler) {
item.classList.remove('press-content-news--hidden');
} else {
item.classList.add('press-content-news--hidden');
}
})
})
}
\ No newline at end of file
js/technology.js deleted 100644 → 0
View file @ 3d0dfc5a
let technologyItems = document.querySelectorAll('.technology-item');
let technologyBlocks = document.querySelectorAll('.technology-item-block');
for (let i = 0; i < technologyItems.length; i++) {
technologyItems[i].addEventListener('mouseenter', () => {
technologyBlocks[i].style.visibility = 'visible';
technologyBlocks[i].style.opacity = '1';
technologyItems[i].classList.add('technology-item--active');
});
technologyItems[i].addEventListener('mouseleave', () => {
technologyBlocks[i].style.visibility = 'hidden';
technologyBlocks[i].style.opacity = '0';
technologyItems[i].classList.remove('technology-item--active');
technologyBlocks[i].addEventListener('mouseenter', () => {
technologyBlocks[i].style.visibility = 'visible';
technologyBlocks[i].style.opacity = '1';
technologyItems[i].classList.add('technology-item--active');
});
technologyBlocks[i].addEventListener('mouseleave', () => {
technologyBlocks[i].style.visibility = 'hidden';
technologyBlocks[i].style.opacity = '0';
technologyItems[i].classList.remove('technology-item--active');
});
});
}
\ No newline at end of file
js/timeline.js deleted 100644 → 0
View file @ 3d0dfc5a
let prev = document.querySelector('.timeline-content-line-wrapper-events__prev');
let next = document.querySelector('.timeline-content-line-wrapper-events__next');
let contents = document.querySelectorAll('.timeline-content-year');
let events = document.querySelectorAll('.timeline-content-line-wrapper-events__item');
let transform = document.querySelector('.timeline-transform');
prev.addEventListener('click', (e) => {
e.preventDefault;
for (let i = 0; i < events.length; i++) {
if (events[i].classList.contains('timeline-content-line-wrapper-events__item--selected')) {
next.style.display = 'block';
events[i].classList.remove('timeline-content-line-wrapper-events__item--selected');
contents[i].classList.remove('timeline-content-year--selected');
transform.style.transform = 'translate3d(' + (-350) * (i - 2) + 'px, 0px, 0px)';
events[i - 1].classList.add('timeline-content-line-wrapper-events__item--selected');
contents[i - 1].classList.add('timeline-content-year--selected');
if ((i - 1) === 0) {
prev.style.display = 'none';
}
else {
prev.style.display = 'block';
}
}
}
});
next.addEventListener('click', (e) => {
e.preventDefault;
for (let j = events.length - 1; j >= 0; j--) {
if (events[j].classList.contains('timeline-content-line-wrapper-events__item--selected')) {
prev.style.display = 'block';
events[j].classList.remove('timeline-content-line-wrapper-events__item--selected');
contents[j].classList.remove('timeline-content-year--selected');
transform.style.transform = 'translate3d(' + (-350) * j + 'px, 0px, 0px)';
events[j + 1].classList.add('timeline-content-line-wrapper-events__item--selected');
contents[j + 1].classList.add('timeline-content-year--selected');
if ((j + 1) === events.length - 1) {
next.style.display = 'none';
}
else {
next.style.display = 'block';
}
}
}
});
for (let i = 0; i < events.length; i++) {
events[i].addEventListener('click', () => {
for (let item of events) {
if (item.classList.contains('timeline-content-line-wrapper-events__item--selected')) {
item.classList.remove('timeline-content-line-wrapper-events__item--selected');
}
}
for (let item of contents) {
if (item.classList.contains('timeline-content-year--selected')) {
item.classList.remove('timeline-content-year--selected');
}
}
transform.style.transform = 'translate3d(' + (-350) * (i - 1) + 'px, 0px, 0px)';
events[i].classList.add('timeline-content-line-wrapper-events__item--selected');
contents[i].classList.add('timeline-content-year--selected');
if (i === 0) {
prev.style.display = 'none';
}
else {
prev.style.display = 'block';
};
if (i === events.length - 1) {
next.style.display = 'none';
}
else {
next.style.display = 'block';
};
});
}
\ No newline at end of file
js/vac.js deleted 100644 → 0
View file @ 3d0dfc5a
let plus = document.querySelectorAll('.vac__plus');
let minus = document.querySelectorAll('.vac__minus');
let inner = document.querySelectorAll('.vac-all-item-inner');
for (let i = 0; i < plus.length; i++) {
plus[i].addEventListener('click', () => {
plus[i].style.display = 'none';
minus[i].style.display = 'block';
inner[i].classList.add('vac-all-item-inner--active');
});
}
for (let i = 0; i < minus.length; i++) {
minus[i].addEventListener('click', () => {
minus[i].style.display = 'none';
plus[i].style.display = 'block';
inner[i].classList.remove('vac-all-item-inner--active');
});
}
\ No newline at end of file
production.html
View file @ d97843c7
......@@ -11,7 +11,7 @@
<link rel="stylesheet" href="styles/normalize.css">
</head>
<body class="body-subpage">
<div class="menu-hidden">
<div class="menu-hidden" style="background-image: url('img/menu_mask.svg');">
<div class="menu-hidden-main">
<div class="menu-hidden-mob">
<span class="menu-hidden-mob__title">Меню</span>
......@@ -19,7 +19,8 @@
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more menu-hidden-main-block__more--active" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Компания
</a>
<div class="menu-hidden-main-block__wrapper">
......@@ -33,6 +34,7 @@
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Продукция</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Газетная бумага</a>
......@@ -44,6 +46,7 @@
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Раскрытие информации</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Положения и сведения об обществе</a>
......@@ -56,6 +59,7 @@
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Устойчивое развитие</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Безопасность и охрана</a>
......@@ -66,14 +70,18 @@
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title"><img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Карьера</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Вакансии</a>
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title"><img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Закупки</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Лесосырьевое обеспечение</a>
......@@ -87,6 +95,7 @@
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Пресс-центр</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Новости</a>
......@@ -96,7 +105,9 @@
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title"><img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Контакты</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Московский филиал</a>
......@@ -104,7 +115,7 @@
</div>
</div>
</div>
<div class="menu-hidden-form">
<div class="menu-hidden-form" style="background-image: url('img/menu_mask.svg');">
<img class="menu-hidden-form__close" src="img/close.svg" alt="close button">
<form action="" class="form-ui">
<div class="form-ui-inner">
......@@ -120,11 +131,11 @@
<input class="form-ui-inner-checkbox__input" type="checkbox" id="checkbox2" checked>
<label for="checkbox2" class="form-ui-inner-checkbox__text">Согласен на обработку персональных данных</label>
</div>
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ">
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ" style="background-image: url('img/form_button.png');">
</div>
</div>
</form>
<a class="menu-hidden-form__button" href="#">ОБРАТНАЯ СВЯЗЬ</a>
<a class="menu-hidden-form__button" href="#" style="background-image: url('img/form_button.png');">ОБРАТНАЯ СВЯЗЬ</a>
<div class="menu-hidden-form-contact">
<div class="menu-hidden-form-contact-item">
<img class="menu-hidden-form-contact-item__icon" src="img/mail.svg" alt="mail icon">
......@@ -159,10 +170,11 @@
</div>
</div>
</div>
<header class="header header-subpage">
<header class="header header-subpage" style="background-image: url('img/header.jpg');">
<nav class="navbar">
<a class="navbar-logo" href="#">
<img src="img/logo.svg" alt="logo: volga">
<img class="navbar-logo__icon" src="img/logo.svg" alt="logo: volga">
<img class="navbar-logo__scroll hidden" src="img/logo_scroll.svg" alt="logo: volga">
</a>
<a class="navbar-burger" href="#">
<svg width="20" height="13" class="navbar-burger__icon">
......@@ -171,88 +183,207 @@
<span class="navbar-burger__title">Меню</span>
</a>
<ul class="menu">
<li class="menu-item">
<li class="menu-item" data-menu-id='1'>
<a class="menu-item__link" href="#">Компания</a>
<div class="submenu">
<a class="submenu-item">История предприятия</a>
<a class="submenu-item">Руководство</a>
<a class="submenu-item">Производство</a>
<a class="submenu-item">Стратегия развития</a>
<a class="submenu-item">Корпоративная политика</a>
<div class="submenu" data-submenu-id='1'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>История предприятия</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Руководство</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Производство</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Стратегия развития</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Корпоративная политика</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='2'>
<a class="menu-item__link" href="#">Продукция</a>
<div class="submenu">
<a class="submenu-item">Газетная бумага</a>
<a class="submenu-item">Бумага для перфорирования</a>
<a class="submenu-item">Пухлая бумага для печатных книг</a>
<a class="submenu-item">Упаковочная бумага</a>
<div class="submenu" data-submenu-id='2'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Газетная бумага</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Бумага для перфорирования</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Пухлая бумага для печатных книг</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Упаковочная бумага</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='3'>
<a class="menu-item__link" href="#">Раскрытие информации</a>
<div class="submenu">
<a class="submenu-item">Положение и сведения об обществе</a>
<a class="submenu-item">Годовой отчёт</a>
<a class="submenu-item">Акционерам</a>
<a class="submenu-item">Производство, передача и сбыт тепловой энергии, воды</a>
<a class="submenu-item">Специальная оценка условий труда</a>
<div class="submenu" data-submenu-id='3'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Положение и сведения об обществе
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Годовой отчёт
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Акционерам
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Производство, передача и сбыт тепловой энергии, воды
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Специальная оценка условий труда
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='4'>
<a class="menu-item__link" href="#">Устойчивое развитие</a>
<div class="submenu">
<a class="submenu-item">Безопасность и охрана</a>
<a class="submenu-item">Экология</a>
<a class="submenu-item">Ответственное леспользование</a>
<a class="submenu-item">Социальная политика</a>
<a class="submenu-item">Рейтинг и оценка</a>
<div class="submenu" data-submenu-id='4'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Безопасность и охрана
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Экология
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Ответственное леспользование
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Социальная политика
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Рейтинг и оценка
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='5'>
<a class="menu-item__link" href="#">Карьера</a>
<div class="submenu">
<a class="submenu-item">Вакансии</a>
<div class="submenu" data-submenu-id='5'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Вакансии
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='6'>
<a class="menu-item__link" href="#">Закупки</a>
<div class="submenu">
<a class="submenu-item">Лесосырьевое обеспечение</a>
<a class="submenu-item">Обращение к поставщикам и подрядчикам</a>
<a class="submenu-item">Закупочные процедуры</a>
<a class="submenu-item">Реализация невостребованного имущества и товаров</a>
<a class="submenu-item">Регистрация поставщиков</a>
<a class="submenu-item">Контакты по закупкам</a>
<div class="submenu" data-submenu-id='6'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Лесосырьевое обеспечение
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Обращение к поставщикам и подрядчикам
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Закупочные процедуры
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Реализация невостребованного имущества и товаров
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Регистрация поставщиков
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Контакты по закупкам
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='7'>
<a class="menu-item__link" href="#">Пресс-центр</a>
<div class="submenu">
<a class="submenu-item">Новости</a>
<a class="submenu-item">Фотогалерея</a>
<a class="submenu-item">Видеогалерея</a>
<a class="submenu-item">Корпоративная газета «Балахнинский бумажник»</a>
<div class="submenu" data-submenu-id='7'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Новости
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Фотогалерея
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Видеогалерея
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Корпоративная газета «Балахнинский бумажник»
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='8'>
<a class="menu-item__link" href="#">Контакты</a>
<div class="submenu">
<a class="submenu-item">Московский офис</a>
<a class="submenu-item">Нижегородский офис</a>
<div class="submenu" data-submenu-id='8'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Московский офис
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Нижегородский офис
</a>
</div>
</li>
</ul>
<ul class="second-menu">
<li class="second-menu-item search-link">
<a class="second-menu-item__link" href="#">
<li class="second-menu-item">
<a class="second-menu-item__link search-link" href="#">
<svg class="second-menu-item__link__icon" width="20" height="20" viewBox="0 0 20 20">
<use xlink:href="img/second_menu.svg#search"></use>
</svg>
</a>
</li>
<li class="second-menu-item">
<li class="second-menu-item" data-menu-id='9'>
<a class="second-menu-item__link" href="#">
<div class="second-menu-item__link__login">
<svg class="second-menu-item__link__icon" width="20" height="20" viewBox="0 0 20 20">
......@@ -261,12 +392,20 @@
<span>Войти</span>
</div>
</a>
<div class="submenu second-submenu">
<a class="submenu-item">Поставщикам</a>
<a class="submenu-item">Покупателям</a>
<div class="submenu second-submenu" data-submenu-id='9'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Поставщикам
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Покупателям
</a>
</div>
</li>
<li class="second-menu-item">
<li class="second-menu-item" data-menu-id='10'>
<a class="second-menu-item__link" href="#">
<div class="second-menu-item__link__lang">
<span>EN</span>
......@@ -275,9 +414,17 @@
</svg>
</div>
</a>
<div class="submenu second-submenu">
<a class="submenu-item">RU</a>
<a class="submenu-item">EN</a>
<div class="submenu second-submenu" data-submenu-id='10'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>RU
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>EN
</a>
</div>
</li>
</ul>
......@@ -290,7 +437,7 @@
</svg>
</a>
<input class="search__field" type="search" placeholder="Поиск по сайту">
<input class="search__button" type="submit" value="НАЙТИ">
<input class="search__button" type="submit" value="НАЙТИ" style="background-image: url(img/button_mask.svg);">
</div>
<div class="separator"></div>
<ul class="second-mob">
......@@ -324,7 +471,7 @@
<h1 class="heading-other__title">Производство</h1>
</div>
</header>
<section class="prod">
<section class="prod" style="background-image: url('img/company_mask.svg');">
<div class="prod-cards">
<a class="cards-item">
<svg class="cards-item__icon">
......@@ -347,26 +494,24 @@
</div>
<div class="prod-about">
<img class="prod-about__photo" src="img/production_photo.jpg" alt="photo">
<p class="prod-about__text">Акционерное общество «Волга» – российский производитель газетной бумаги премиум-класса из 100% термомеханической массы.
<br><br>
Предприятие расположено на берегу реки Волги в Балахнинском районе, в 30 км от Нижнего Новгорода и в 450 км от Москвы.
<br><br>
АО «Волга» входит в рейтинги «Топ-200 крупнейших российских компаний-экспортеров» (по данным журнала «Эксперт»), Топ-50 крупнейших лесопромышленных компаний (по версии журнала «Лесная индустрия») и «Топ-100 крупнейших компаний Нижегородской области» (по данным издания «Деловой квартал»).</p>
<p class="prod-about__text">Акционерное общество «Волга» – российский производитель газетной бумаги премиум-класса из 100% термомеханической массы.</p>
<p class="prod-about__text">Предприятие расположено на берегу реки Волги в Балахнинском районе, в 30 км от Нижнего Новгорода и в 450 км от Москвы.</p>
<p class="prod-about__text">АО «Волга» входит в рейтинги «Топ-200 крупнейших российских компаний-экспортеров» (по данным журнала «Эксперт»), Топ-50 крупнейших лесопромышленных компаний (по версии журнала «Лесная индустрия») и «Топ-100 крупнейших компаний Нижегородской области» (по данным издания «Деловой квартал»).</p>
</div>
</section>
<section class="form form-subpage section-subpage">
<form action="" class="form-ui">
<form action="" class="form-ui" style="background-image: url('img/form_mask.svg');">
<div class="form-ui-inner">
<div class="form-ui-inner-heading">
<span class="form-ui-inner-heading__title">Обратная связь</span>
<span class="form-ui-inner-heading__text">Оставьте свои контакты и мы свяжемся с Вами!</span>
</div>
<div class="form-ui-inner-content">
<input class="form-ui-inner-content__input" type="text" placeholder="Ваше имя">
<input class="form-ui-inner-content__input" type="tel" placeholder="Телефон">
<input class="form-ui-inner-content__input" type="email" placeholder="E-mail">
<input class="form-ui-inner-content__input" type="text" placeholder="Ваше имя" required>
<input class="form-ui-inner-content__input" type="tel" placeholder="Телефон" pattern="(\+?\d[- .]*){7,13}" required>
<input class="form-ui-inner-content__input" type="email" placeholder="E-mail" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" required>
<input class="form-ui-inner-content__input" type="text" placeholder="Сообщение">
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ">
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ" style="background-image: url('img/form_button.png');">
</div>
<div class="form-ui-inner-checkbox">
<input class="form-ui-inner-checkbox__input" type="checkbox" id="checkbox1" checked>
......@@ -375,7 +520,7 @@
</div>
</form>
</section>
<footer class="footer">
<footer class="footer" style="background-image: url('img/footer.jpg');">
<nav class="footer-navbar">
<a class="footer-navbar-logo" href="#">
<img src="img/logo.svg" alt="logo: volga">
......@@ -422,7 +567,5 @@
</div>
</footer>
<script defer src="js/index.js"></script>
<script defer src="js/menu_subpage.js"></script>
<script defer src="js/smothScroll.js"></script>
</body>
</html>
\ No newline at end of file
products.html 0 → 100644
View file @ d97843c7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Продукция</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/normalize.css">
</head>
<body class="body-subpage">
<div class="menu-hidden" style="background-image: url('img/menu_mask.svg');">
<div class="menu-hidden-main">
<div class="menu-hidden-mob">
<span class="menu-hidden-mob__title">Меню</span>
<img class="menu-hidden-mob__close" src="img/close_mob.svg" alt="close button">
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Компания
</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">История предприятия</a>
<a class="menu-hidden-main-block__subtitle">Руководство</a>
<a class="menu-hidden-main-block__subtitle">Производство</a>
<a class="menu-hidden-main-block__subtitle">Стратегия развития</a>
<a class="menu-hidden-main-block__subtitle">Корпоративная политика</a>
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Продукция</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Газетная бумага</a>
<a class="menu-hidden-main-block__subtitle">Бумага для гофрирования</a>
<a class="menu-hidden-main-block__subtitle">Пухлая бумага для печатных книг</a>
<a class="menu-hidden-main-block__subtitle">Упаковочная бумага</a>
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Раскрытие информации</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Положения и сведения об обществе</a>
<a class="menu-hidden-main-block__subtitle">Годовой отчет</a>
<a class="menu-hidden-main-block__subtitle">Акционерам</a>
<a class="menu-hidden-main-block__subtitle">Производство, передача и сбыт тепловой энергии, воды</a>
<a class="menu-hidden-main-block__subtitle">Специальная оценка условий труда</a>
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Устойчивое развитие</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Безопасность и охрана</a>
<a class="menu-hidden-main-block__subtitle">Экология</a>
<a class="menu-hidden-main-block__subtitle">Ответственное лесопользование</a>
<a class="menu-hidden-main-block__subtitle">Социальная политика</a>
<a class="menu-hidden-main-block__subtitle">Рейтинг и оценка</a>
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Карьера</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Вакансии</a>
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Закупки</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Лесосырьевое обеспечение</a>
<a class="menu-hidden-main-block__subtitle">Обращение к поставщикам и подрядчикам</a>
<a class="menu-hidden-main-block__subtitle">Закупочные процедуры</a>
<a class="menu-hidden-main-block__subtitle">Реализация невостребованного имущества и товаров</a>
<a class="menu-hidden-main-block__subtitle">Регистрация поставщиков</a>
<a class="menu-hidden-main-block__subtitle">Контакты по закупкам</a>
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Пресс-центр</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Новости</a>
<a class="menu-hidden-main-block__subtitle">Фотогалерея</a>
<a class="menu-hidden-main-block__subtitle">Видеогалерея</a>
<a class="menu-hidden-main-block__subtitle">Корпоративная газета «Балахнинский бумажник»</a>
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Контакты</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Московский филиал</a>
<a class="menu-hidden-main-block__subtitle">Нижегородский филиал</a>
</div>
</div>
</div>
<div class="menu-hidden-form" style="background-image: url('img/menu_mask.svg');">
<img class="menu-hidden-form__close" src="img/close.svg" alt="close button">
<form action="" class="form-ui">
<div class="form-ui-inner">
<div class="form-ui-inner-heading">
<span class="form-ui-inner-heading__title">Обратная связь</span>
</div>
<div class="form-ui-inner-content">
<input class="form-ui-inner-content__input" type="text" placeholder="Ваше имя">
<input class="form-ui-inner-content__input" type="tel" placeholder="Телефон">
<input class="form-ui-inner-content__input" type="email" placeholder="E-mail">
<input class="form-ui-inner-content__input" type="text" placeholder="Сообщение">
<div class="form-ui-inner-checkbox">
<input class="form-ui-inner-checkbox__input" type="checkbox" id="checkbox2" checked>
<label for="checkbox2" class="form-ui-inner-checkbox__text">Согласен на обработку персональных данных</label>
</div>
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ" style="background-image: url('img/form_button.png');">
</div>
</div>
</form>
<a class="menu-hidden-form__button" href="#" style="background-image: url('img/form_button.png');">ОБРАТНАЯ СВЯЗЬ</a>
<div class="menu-hidden-form-contact">
<div class="menu-hidden-form-contact-item">
<img class="menu-hidden-form-contact-item__icon" src="img/mail.svg" alt="mail icon">
<a class="menu-hidden-form-contact-item__link" href="mailto:info@volga-paper.ru">info@volga-paper.ru</a>
</div>
<div class="menu-hidden-form-contact-item">
<img class="menu-hidden-form-contact-item__icon" src="img/phone.svg" alt="phone icon">
<a class="menu-hidden-form-contact-item__link" href="tel:+78314493316">+7 (83144) 9-33-16</a>
</div>
</div>
<div class="menu-hidden-form-social">
<a href="#" class="menu-hidden-form-social__link">
<svg class="menu-hidden-form-social__social" width="20" height="13">
<use xlink:href="img/social.svg#vk"></use>
</svg>
</a>
<a href="#" class="menu-hidden-form-social__link">
<svg class="menu-hidden-form-social__social" width="17" height="17">
<use xlink:href="img/social.svg#fb"></use>
</svg>
</a>
<a href="#" class="menu-hidden-form-social__link">
<svg class="menu-hidden-form-social__social" width="20" height="18">
<use xlink:href="img/social.svg#yt"></use>
</svg>
</a>
<a href="#" class="menu-hidden-form-social__link">
<svg class="menu-hidden-form-social__social" width="19" height="19">
<use xlink:href="img/social.svg#inst"></use>
</svg>
</a>
</div>
</div>
</div>
<header class="header header-subpage" style="background-image: url('img/header.jpg');">
<nav class="navbar">
<a class="navbar-logo" href="#">
<img class="navbar-logo__icon" src="img/logo.svg" alt="logo: volga">
<img class="navbar-logo__scroll hidden" src="img/logo_scroll.svg" alt="logo: volga">
</a>
<a class="navbar-burger" href="#">
<svg width="20" height="13" class="navbar-burger__icon">
<use xlink:href="img/burger.svg#burger"></use>
</svg>
<span class="navbar-burger__title">Меню</span>
</a>
<ul class="menu">
<li class="menu-item" data-menu-id='1'>
<a class="menu-item__link" href="#">Компания</a>
<div class="submenu" data-submenu-id='1'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>История предприятия</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Руководство</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Производство</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Стратегия развития</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Корпоративная политика</a>
</div>
</li>
<li class="menu-item" data-menu-id='2'>
<a class="menu-item__link" href="#">Продукция</a>
<div class="submenu" data-submenu-id='2'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Газетная бумага</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Бумага для перфорирования</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Пухлая бумага для печатных книг</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Упаковочная бумага</a>
</div>
</li>
<li class="menu-item" data-menu-id='3'>
<a class="menu-item__link" href="#">Раскрытие информации</a>
<div class="submenu" data-submenu-id='3'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Положение и сведения об обществе
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Годовой отчёт
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Акционерам
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Производство, передача и сбыт тепловой энергии, воды
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Специальная оценка условий труда
</a>
</div>
</li>
<li class="menu-item" data-menu-id='4'>
<a class="menu-item__link" href="#">Устойчивое развитие</a>
<div class="submenu" data-submenu-id='4'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Безопасность и охрана
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Экология
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Ответственное леспользование
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Социальная политика
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Рейтинг и оценка
</a>
</div>
</li>
<li class="menu-item" data-menu-id='5'>
<a class="menu-item__link" href="#">Карьера</a>
<div class="submenu" data-submenu-id='5'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Вакансии
</a>
</div>
</li>
<li class="menu-item" data-menu-id='6'>
<a class="menu-item__link" href="#">Закупки</a>
<div class="submenu" data-submenu-id='6'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Лесосырьевое обеспечение
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Обращение к поставщикам и подрядчикам
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Закупочные процедуры
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Реализация невостребованного имущества и товаров
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Регистрация поставщиков
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Контакты по закупкам
</a>
</div>
</li>
<li class="menu-item" data-menu-id='7'>
<a class="menu-item__link" href="#">Пресс-центр</a>
<div class="submenu" data-submenu-id='7'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Новости
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Фотогалерея
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Видеогалерея
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Корпоративная газета «Балахнинский бумажник»
</a>
</div>
</li>
<li class="menu-item" data-menu-id='8'>
<a class="menu-item__link" href="#">Контакты</a>
<div class="submenu" data-submenu-id='8'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Московский офис
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Нижегородский офис
</a>
</div>
</li>
</ul>
<ul class="second-menu">
<li class="second-menu-item">
<a class="second-menu-item__link search-link" href="#">
<svg class="second-menu-item__link__icon" width="20" height="20" viewBox="0 0 20 20">
<use xlink:href="img/second_menu.svg#search"></use>
</svg>
</a>
</li>
<li class="second-menu-item" data-menu-id='9'>
<a class="second-menu-item__link" href="#">
<div class="second-menu-item__link__login">
<svg class="second-menu-item__link__icon" width="20" height="20" viewBox="0 0 20 20">
<use xlink:href="img/second_menu.svg#login"></use>
</svg>
<span>Войти</span>
</div>
</a>
<div class="submenu second-submenu" data-submenu-id='9'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Поставщикам
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Покупателям
</a>
</div>
</li>
<li class="second-menu-item" data-menu-id='10'>
<a class="second-menu-item__link" href="#">
<div class="second-menu-item__link__lang">
<span>EN</span>
<svg class="second-menu-item__link__icon" width="8" height="6" viewBox="0 0 8 6">
<use xlink:href="img/second_menu.svg#down"></use>
</svg>
</div>
</a>
<div class="submenu second-submenu" data-submenu-id='10'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>RU
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>EN
</a>
</div>
</li>
</ul>
</nav>
<div class="search">
<a class="search-close" href="#">
Закрыть
<svg class="search-close__icon">
<use xlink:href="img/search_close.svg#search_close"></use>
</svg>
</a>
<input class="search__field" type="search" placeholder="Поиск по сайту">
<input class="search__button" type="submit" value="НАЙТИ" style="background-image: url(img/button_mask.svg);">
</div>
<div class="separator"></div>
<ul class="second-mob">
<li class="second-mob-item">
<a class="second-mob-item__link" href="#">
<svg class="second-mob-item__link__icon" width="20" height="20" viewBox="0 0 20 20">
<use xlink:href="img/second_menu.svg#search"></use>
</svg>
<span>Поиск</span>
</a>
</li>
<li class="second-mob-item">
<a class="second-mob-item__link" href="#">
<div class="second-mob-item__link__login">
<svg class="second-mob-item__link__icon" width="20" height="20" viewBox="0 0 20 20">
<use xlink:href="img/second_menu.svg#login"></use>
</svg>
<span>Войти</span>
</div>
</a>
</li>
</ul>
<div class="heading-other">
<div class="heading-other-nav">
<a href="#" class="heading-other-nav__page">Главная</a>
<img class="heading-other-nav__icon" src="img/heading_nav.svg" alt="nav icon">
<a href="#" class="heading-other-nav__page heading-other-nav__page--current">Продукция</a>
</div>
<h1 class="heading-other__title">Продукция</h1>
</div>
</header>
<section class="production production-subpage" style="background-image: url('img/company_mask.svg');">
<div class="production-list production-list-subpage">
<div class="production-list-item production-list-item-subpage" style="background-image: url(img/product1.png);">
<svg class="production-list-item__arrow">
<use xlink:href="img/production_arrow.svg#production_arrow"></use>
</svg>
<h4 class="production-list-item__title">Бумага для печати</h4>
<ul class="production-list-item__points">
<a class="production-list-item__descr" href="#">
<li class="production-list-item__points-item">
<svg class="production-list-item__points-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Газетная бумага стандартная</li>
</a>
<a class="production-list-item__descr" href="#">
<li class="production-list-item__points-item">
<svg class="production-list-item__points-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Газетная бумага окрашенная в массе</li>
</a>
<a class="production-list-item__descr" href="#">
<li class="production-list-item__points-item">
<svg class="production-list-item__points-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Газетная бумага повышенной белизны</li>
</a>
<a class="production-list-item__descr" href="#">
<li class="production-list-item__points-item">
<svg class="production-list-item__points-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Пухлая бумага кремового оттенка</li>
</a>
<a class="production-list-item__descr" href="#">
<li class="production-list-item__points-item">
<svg class="production-list-item__points-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Пухлая бумага оттенка натурального волокна</li>
</a>
</ul>
</div>
<div class="production-list-item production-list-item-subpage" style="background-image: url(img/product2.png);">
<svg class="production-list-item__arrow">
<use xlink:href="img/production_arrow.svg#production_arrow"></use>
</svg>
<h4 class="production-list-item__title">Тарные бумаги (картоны)</h4>
<ul class="production-list-item__points">
<a class="production-list-item__descr" href="#">
<li class="production-list-item__points-item">
<svg class="production-list-item__points-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Флютинг (65-100)</li>
</a>
<a class="production-list-item__descr" href="#">
<li class="production-list-item__points-item">
<svg class="production-list-item__points-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Интерлайнер (40-55)</li>
</a>
<a class="production-list-item__descr" href="#">
<li class="production-list-item__points-item">
<svg class="production-list-item__points-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Лайнер (65-100)</li>
</a>
</ul>
</div>
<div class="production-list-item production-list-item-subpage" style="background-image: url(img/product3.png);">
<svg class="production-list-item__arrow">
<use xlink:href="img/production_arrow.svg#production_arrow"></use>
</svg>
<h4 class="production-list-item__title">Специальные виды бумаг</h4>
<ul class="production-list-item__points">
<a class="production-list-item__descr" href="#">
<li class="production-list-item__points-item">
<svg class="production-list-item__points-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Мешочная</li>
</a>
<a class="production-list-item__descr" href="#">
<li class="production-list-item__points-item">
<svg class="production-list-item__points-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Для импрегнирования</li>
</a>
<a class="production-list-item__descr" href="#">
<li class="production-list-item__points-item">
<svg class="production-list-item__points-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Для пищевых продуктов</li>
</a>
</ul>
</div>
<div class="production-list-item production-list-item-subpage" style="background-image: url(img/product1.png);">
<svg class="production-list-item__arrow">
<use xlink:href="img/production_arrow.svg#production_arrow"></use>
</svg>
<h4 class="production-list-item__title">Пухлая бумага</h4>
<ul class="production-list-item__points">
<a class="production-list-item__descr" href="#">
<li class="production-list-item__points-item">
<svg class="production-list-item__points-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Мешочная</li>
</a>
<a class="production-list-item__descr" href="#">
<li class="production-list-item__points-item">
<svg class="production-list-item__points-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Для импрегнирования</li>
</a>
<a class="production-list-item__descr" href="#">
<li class="production-list-item__points-item">
<svg class="production-list-item__points-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Для пищевых продуктов</li>
</a>
</ul>
</div>
</div>
</section>
<div class="technology-text">
<p>
Выпускаемая АО «Волга» газетная бумага соответствует требованиям нормативных документов: требованиям ГОСТ 6445-74 (газетная бумага марки О, А); требованиям ТУ 5431-003-00279278-2004, о чем свидетельствуют полученные сертификаты соответствия. Успешное проведение работ по сертификации газетной бумаги и по ежегодному инспекционному контролю за сертифицированной продукцией - это показатель отличной, слаженной работы всех служб предприятия.
</p>
</div>
<section class="form form-subpage section-subpage">
<form action="" class="form-ui" style="background-image: url('img/form_mask.svg');">
<div class="form-ui-inner">
<div class="form-ui-inner-heading">
<span class="form-ui-inner-heading__title">Обратная связь</span>
<span class="form-ui-inner-heading__text">Оставьте свои контакты и мы свяжемся с Вами!</span>
</div>
<div class="form-ui-inner-content">
<input class="form-ui-inner-content__input" type="text" placeholder="Ваше имя" required>
<input class="form-ui-inner-content__input" type="tel" placeholder="Телефон" pattern="(\+?\d[- .]*){7,13}" required>
<input class="form-ui-inner-content__input" type="email" placeholder="E-mail" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" required>
<input class="form-ui-inner-content__input" type="text" placeholder="Сообщение">
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ" style="background-image: url('img/form_button.png');">
</div>
<div class="form-ui-inner-checkbox">
<input class="form-ui-inner-checkbox__input" type="checkbox" id="checkbox1" checked>
<label for="checkbox1" class="form-ui-inner-checkbox__text">Нажимая на кнопку «Отправить», вы соглашаетесь на обработку персональных данных</label>
</div>
</div>
</form>
</section>
<footer class="footer" style="background-image: url('img/footer.jpg');">
<nav class="footer-navbar">
<a class="footer-navbar-logo" href="#">
<img src="img/logo.svg" alt="logo: volga">
</a>
<ul class="footer-menu">
<li class="footer-menu-item"><a class="footer-menu-item__link" href="#">Компания</a></li>
<li class="footer-menu-item"><a class="footer-menu-item__link" href="#">Продукция</a></li>
<li class="footer-menu-item"><a class="footer-menu-item__link" href="#">Пресс-центр</a></li>
<li class="footer-menu-item"><a class="footer-menu-item__link" href="#">Устойчивое развитие</a></li>
<li class="footer-menu-item"><a class="footer-menu-item__link" href="#">Поставщикам</a></li>
<li class="footer-menu-item"><a class="footer-menu-item__link" href="#">Раскрытие информации</a></li>
<li class="footer-menu-item"><a class="footer-menu-item__link" href="#">Карьера</a></li>
<li class="footer-menu-item"><a class="footer-menu-item__link" href="#">Контакты</a></li>
</ul>
</nav>
<div class="footer-info">
<div class="footer-info-social">
<a href="#" class="footer-info-social__link">
<svg class="footer-info-social__icon" width="20" height="13">
<use xlink:href="img/social.svg#vk"></use>
</svg>
</a>
<a href="#" class="footer-info-social__link">
<svg class="footer-info-social__icon" width="17" height="17">
<use xlink:href="img/social.svg#fb"></use>
</svg>
</a>
<a href="#" class="footer-info-social__link">
<svg class="footer-info-social__icon" width="20" height="18">
<use xlink:href="img/social.svg#yt"></use>
</svg>
</a>
<a href="#" class="footer-info-social__link">
<svg class="footer-info-social__icon" width="19" height="19">
<use xlink:href="img/social.svg#inst"></use>
</svg>
</a>
</div>
<span class="footer-info__copy">© 2021 АО «Волга»</span>
<div class="footer-info-dev">
<span class="footer-info-dev__text">Разработка сайта</span>
<img src="img/logo_r52.svg" alt="logo r52">
</div>
</div>
</footer>
<script defer src="js/index.js"></script>
</body>
</html>
\ No newline at end of file
strategy.html
View file @ d97843c7
......@@ -11,7 +11,7 @@
<link rel="stylesheet" href="styles/normalize.css">
</head>
<body class="body-subpage">
<div class="menu-hidden">
<div class="menu-hidden" style="background-image: url('img/menu_mask.svg');">
<div class="menu-hidden-main">
<div class="menu-hidden-mob">
<span class="menu-hidden-mob__title">Меню</span>
......@@ -19,7 +19,8 @@
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more menu-hidden-main-block__more--active" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Компания
</a>
<div class="menu-hidden-main-block__wrapper">
......@@ -33,6 +34,7 @@
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Продукция</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Газетная бумага</a>
......@@ -44,6 +46,7 @@
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Раскрытие информации</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Положения и сведения об обществе</a>
......@@ -56,6 +59,7 @@
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Устойчивое развитие</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Безопасность и охрана</a>
......@@ -66,14 +70,18 @@
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title"><img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Карьера</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Вакансии</a>
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title"><img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Закупки</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Лесосырьевое обеспечение</a>
......@@ -87,6 +95,7 @@
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Пресс-центр</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Новости</a>
......@@ -96,7 +105,9 @@
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title"><img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Контакты</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Московский филиал</a>
......@@ -104,7 +115,7 @@
</div>
</div>
</div>
<div class="menu-hidden-form">
<div class="menu-hidden-form" style="background-image: url('img/menu_mask.svg');">
<img class="menu-hidden-form__close" src="img/close.svg" alt="close button">
<form action="" class="form-ui">
<div class="form-ui-inner">
......@@ -120,11 +131,11 @@
<input class="form-ui-inner-checkbox__input" type="checkbox" id="checkbox2" checked>
<label for="checkbox2" class="form-ui-inner-checkbox__text">Согласен на обработку персональных данных</label>
</div>
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ">
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ" style="background-image: url('img/form_button.png');">
</div>
</div>
</form>
<a class="menu-hidden-form__button" href="#">ОБРАТНАЯ СВЯЗЬ</a>
<a class="menu-hidden-form__button" href="#" style="background-image: url('img/form_button.png');">ОБРАТНАЯ СВЯЗЬ</a>
<div class="menu-hidden-form-contact">
<div class="menu-hidden-form-contact-item">
<img class="menu-hidden-form-contact-item__icon" src="img/mail.svg" alt="mail icon">
......@@ -159,10 +170,11 @@
</div>
</div>
</div>
<header class="header header-subpage">
<header class="header header-subpage" style="background-image: url('img/header.jpg');">
<nav class="navbar">
<a class="navbar-logo" href="#">
<img src="img/logo.svg" alt="logo: volga">
<img class="navbar-logo__icon" src="img/logo.svg" alt="logo: volga">
<img class="navbar-logo__scroll hidden" src="img/logo_scroll.svg" alt="logo: volga">
</a>
<a class="navbar-burger" href="#">
<svg width="20" height="13" class="navbar-burger__icon">
......@@ -171,88 +183,207 @@
<span class="navbar-burger__title">Меню</span>
</a>
<ul class="menu">
<li class="menu-item">
<li class="menu-item" data-menu-id='1'>
<a class="menu-item__link" href="#">Компания</a>
<div class="submenu">
<a class="submenu-item">История предприятия</a>
<a class="submenu-item">Руководство</a>
<a class="submenu-item">Производство</a>
<a class="submenu-item">Стратегия развития</a>
<a class="submenu-item">Корпоративная политика</a>
<div class="submenu" data-submenu-id='1'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>История предприятия</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Руководство</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Производство</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Стратегия развития</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Корпоративная политика</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='2'>
<a class="menu-item__link" href="#">Продукция</a>
<div class="submenu">
<a class="submenu-item">Газетная бумага</a>
<a class="submenu-item">Бумага для перфорирования</a>
<a class="submenu-item">Пухлая бумага для печатных книг</a>
<a class="submenu-item">Упаковочная бумага</a>
<div class="submenu" data-submenu-id='2'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Газетная бумага</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Бумага для перфорирования</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Пухлая бумага для печатных книг</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Упаковочная бумага</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='3'>
<a class="menu-item__link" href="#">Раскрытие информации</a>
<div class="submenu">
<a class="submenu-item">Положение и сведения об обществе</a>
<a class="submenu-item">Годовой отчёт</a>
<a class="submenu-item">Акционерам</a>
<a class="submenu-item">Производство, передача и сбыт тепловой энергии, воды</a>
<a class="submenu-item">Специальная оценка условий труда</a>
<div class="submenu" data-submenu-id='3'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Положение и сведения об обществе
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Годовой отчёт
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Акционерам
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Производство, передача и сбыт тепловой энергии, воды
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Специальная оценка условий труда
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='4'>
<a class="menu-item__link" href="#">Устойчивое развитие</a>
<div class="submenu">
<a class="submenu-item">Безопасность и охрана</a>
<a class="submenu-item">Экология</a>
<a class="submenu-item">Ответственное леспользование</a>
<a class="submenu-item">Социальная политика</a>
<a class="submenu-item">Рейтинг и оценка</a>
<div class="submenu" data-submenu-id='4'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Безопасность и охрана
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Экология
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Ответственное леспользование
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Социальная политика
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Рейтинг и оценка
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='5'>
<a class="menu-item__link" href="#">Карьера</a>
<div class="submenu">
<a class="submenu-item">Вакансии</a>
<div class="submenu" data-submenu-id='5'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Вакансии
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='6'>
<a class="menu-item__link" href="#">Закупки</a>
<div class="submenu">
<a class="submenu-item">Лесосырьевое обеспечение</a>
<a class="submenu-item">Обращение к поставщикам и подрядчикам</a>
<a class="submenu-item">Закупочные процедуры</a>
<a class="submenu-item">Реализация невостребованного имущества и товаров</a>
<a class="submenu-item">Регистрация поставщиков</a>
<a class="submenu-item">Контакты по закупкам</a>
<div class="submenu" data-submenu-id='6'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Лесосырьевое обеспечение
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Обращение к поставщикам и подрядчикам
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Закупочные процедуры
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Реализация невостребованного имущества и товаров
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Регистрация поставщиков
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Контакты по закупкам
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='7'>
<a class="menu-item__link" href="#">Пресс-центр</a>
<div class="submenu">
<a class="submenu-item">Новости</a>
<a class="submenu-item">Фотогалерея</a>
<a class="submenu-item">Видеогалерея</a>
<a class="submenu-item">Корпоративная газета «Балахнинский бумажник»</a>
<div class="submenu" data-submenu-id='7'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Новости
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Фотогалерея
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Видеогалерея
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Корпоративная газета «Балахнинский бумажник»
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='8'>
<a class="menu-item__link" href="#">Контакты</a>
<div class="submenu">
<a class="submenu-item">Московский офис</a>
<a class="submenu-item">Нижегородский офис</a>
<div class="submenu" data-submenu-id='8'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Московский офис
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Нижегородский офис
</a>
</div>
</li>
</ul>
<ul class="second-menu">
<li class="second-menu-item search-link">
<a class="second-menu-item__link" href="#">
<li class="second-menu-item">
<a class="second-menu-item__link search-link" href="#">
<svg class="second-menu-item__link__icon" width="20" height="20" viewBox="0 0 20 20">
<use xlink:href="img/second_menu.svg#search"></use>
</svg>
</a>
</li>
<li class="second-menu-item">
<li class="second-menu-item" data-menu-id='9'>
<a class="second-menu-item__link" href="#">
<div class="second-menu-item__link__login">
<svg class="second-menu-item__link__icon" width="20" height="20" viewBox="0 0 20 20">
......@@ -261,12 +392,20 @@
<span>Войти</span>
</div>
</a>
<div class="submenu second-submenu">
<a class="submenu-item">Поставщикам</a>
<a class="submenu-item">Покупателям</a>
<div class="submenu second-submenu" data-submenu-id='9'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Поставщикам
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Покупателям
</a>
</div>
</li>
<li class="second-menu-item">
<li class="second-menu-item" data-menu-id='10'>
<a class="second-menu-item__link" href="#">
<div class="second-menu-item__link__lang">
<span>EN</span>
......@@ -275,9 +414,17 @@
</svg>
</div>
</a>
<div class="submenu second-submenu">
<a class="submenu-item">RU</a>
<a class="submenu-item">EN</a>
<div class="submenu second-submenu" data-submenu-id='10'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>RU
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>EN
</a>
</div>
</li>
</ul>
......@@ -290,7 +437,7 @@
</svg>
</a>
<input class="search__field" type="search" placeholder="Поиск по сайту">
<input class="search__button" type="submit" value="НАЙТИ">
<input class="search__button" type="submit" value="НАЙТИ" style="background-image: url(img/button_mask.svg);">
</div>
<div class="separator"></div>
<ul class="second-mob">
......@@ -324,9 +471,9 @@
<h1 class="heading-other__title">Стратегия развития</h1>
</div>
</header>
<section class="strategy">
<section class="strategy" style="background-image: url('img/company_mask.svg');">
<div class="strategy-project">
<div class="strategy-project-title strategy-project-title-1">Реконструкция древесномассного цеха</div>
<div class="strategy-project-title" style="background-image: url('img/project1.jpg');">Реконструкция древесномассного цеха</div>
<div class="strategy-project-about">
<div class="strategy-project-about-block">
<p class="strategy-project-about-block__title">Реализация проекта</p>
......@@ -334,7 +481,7 @@
</div>
<div class="strategy-project-about-block">
<p class="strategy-project-about-block__title">Цели проекта</p>
<ul class="strategy-project-about-block__list">
<ul class="strategy-project-about-block__list" style="list-style: url('img/str_list.svg');">
<li class="strategy-project-about-block__list-item">повысить механическую прочность полуфабрикатов;</li>
<li class="strategy-project-about-block__list-item">снизить расход привозной товарной целлюлозы на 3% в композиции бумаги;</li>
<li class="strategy-project-about-block__list-item">улучшить качество термомеханической массы и древесной массы;</li>
......@@ -356,14 +503,14 @@
</div>
</div>
<div class="strategy-project">
<div class="strategy-project-title strategy-project-title-2">Комплексная линия по утилизации кородревесных отходов и осадка очистных сооружений</div>
<div class="strategy-project-title" style="background-image: url('img/project2.jpg');">Комплексная линия по утилизации кородревесных отходов и осадка очистных сооружений</div>
<div class="strategy-project-about">
<div class="strategy-project-about-block">
<p class="strategy-project-about-block__title">Реализация проекта</p>
<p>2008 год</p>
<div class="strategy-project-about-block-wrapper">
<p class="strategy-project-about-block__title">Состав комплекса</p>
<ul class="strategy-project-about-block__list">
<ul class="strategy-project-about-block__list" style="list-style: url('img/str_list.svg');">
<li class="strategy-project-about-block__list-item">линия подготовки кородревесного топлива;</li>
<li class="strategy-project-about-block__list-item">линия подготовки осадка очистных сооружений к сжиганию;</li>
<li class="strategy-project-about-block__list-item">котел-утилизатор (параметры пара 13 атм., 250 С).</li>
......@@ -372,7 +519,7 @@
</div>
<div class="strategy-project-about-block">
<p class="strategy-project-about-block__title">Цели проекта</p>
<ul class="strategy-project-about-block__list">
<ul class="strategy-project-about-block__list" style="list-style: url('img/str_list.svg');">
<li class="strategy-project-about-block__list-item">обеспечить утилизацию всего объема кородревесных отходов и осадков очистных сооружений;</li>
<li class="strategy-project-about-block__list-item">улучшить ресурсосбережение и повысить энергоэффективность производственного процесса;</li>
<li class="strategy-project-about-block__list-item">сократить выделение парниковых газов в результате сжигания отходов производства.</li>
......@@ -389,7 +536,7 @@
</div>
</div>
<div class="strategy-project">
<div class="strategy-project-title strategy-project-title-3">Реконструкция БДМ №6</div>
<div class="strategy-project-title" style="background-image: url('img/project3.jpg');">Реконструкция БДМ №6</div>
<div class="strategy-project-about">
<div class="strategy-project-about-block">
<p class="strategy-project-about-block__title">Реализация проекта</p>
......@@ -397,7 +544,7 @@
</div>
<div class="strategy-project-about-block">
<p class="strategy-project-about-block__title">Цели проекта</p>
<ul class="strategy-project-about-block__list">
<ul class="strategy-project-about-block__list" style="list-style: url('img/str_list.svg');">
<li class="strategy-project-about-block__list-item">улучшить показатели качества производимой газетной бумаги на бумагоделательной машине №6;</li>
<li class="strategy-project-about-block__list-item">увеличить производительность бумагоделательной машины №6.</li>
</ul>
......@@ -413,7 +560,7 @@
</div>
</div>
<div class="strategy-project">
<div class="strategy-project-title strategy-project-title-4">Цепной конвейер с водяным охлаждением для системы золоудаления на котле</div>
<div class="strategy-project-title" style="background-image: url('img/project4.jpg');">Цепной конвейер с водяным охлаждением для системы золоудаления на котле</div>
<div class="strategy-project-about">
<div class="strategy-project-about-block">
<p class="strategy-project-about-block__title">Ввод в эксплуатацию</p>
......@@ -421,7 +568,7 @@
</div>
<div class="strategy-project-about-block">
<p class="strategy-project-about-block__title">Цели проекта</p>
<ul class="strategy-project-about-block__list">
<ul class="strategy-project-about-block__list" style="list-style: url('img/str_list.svg');">
<li class="strategy-project-about-block__list-item">обеспечить утилизацию всего объема кородревесных отходов и осадков очистных сооружений;</li>
<li class="strategy-project-about-block__list-item">улучшить ресурсосбережение и повысить энергоэффективность производственного процесса;</li>
<li class="strategy-project-about-block__list-item">сократить выделение парниковых газов в результате сжигания отходов производства.</li>
......@@ -442,7 +589,7 @@
</div>
</div>
<div class="strategy-project">
<div class="strategy-project-title strategy-project-title-5">Энергетический комплекс (НИГРЭС)</div>
<div class="strategy-project-title" style="background-image: url('img/project5.jpg');">Энергетический комплекс (НИГРЭС)</div>
<div class="strategy-project-about">
<div class="strategy-project-about-block">
<p class="strategy-project-about-block__title">Ввод в эксплуатацию</p>
......@@ -450,7 +597,7 @@
</div>
<div class="strategy-project-about-block">
<p class="strategy-project-about-block__title">Цели проекта</p>
<ul class="strategy-project-about-block__list">
<ul class="strategy-project-about-block__list" style="list-style: url('img/str_list.svg');">
<li class="strategy-project-about-block__list-item">долгосрочное обеспечение надежного, качественного и доступного энергоснабжения АО «Волга» и других потребителей путем организации максимально эффективной и соответствующей мировым стандартам сетевой инфраструктуры;</li>
<li class="strategy-project-about-block__list-item">увеличение мощностей по выработке электроэнергии, необходимой производству АО «Волга»;</li>
<li class="strategy-project-about-block__list-item">повышение энергоэффективности АО «Волга».</li>
......@@ -466,18 +613,18 @@
</div>
</section>
<section class="form form-subpage section-subpage">
<form action="" class="form-ui">
<form action="" class="form-ui" style="background-image: url('img/form_mask.svg');">
<div class="form-ui-inner">
<div class="form-ui-inner-heading">
<span class="form-ui-inner-heading__title">Обратная связь</span>
<span class="form-ui-inner-heading__text">Оставьте свои контакты и мы свяжемся с Вами!</span>
</div>
<div class="form-ui-inner-content">
<input class="form-ui-inner-content__input" type="text" placeholder="Ваше имя">
<input class="form-ui-inner-content__input" type="tel" placeholder="Телефон">
<input class="form-ui-inner-content__input" type="email" placeholder="E-mail">
<input class="form-ui-inner-content__input" type="text" placeholder="Ваше имя" required>
<input class="form-ui-inner-content__input" type="tel" placeholder="Телефон" pattern="(\+?\d[- .]*){7,13}" required>
<input class="form-ui-inner-content__input" type="email" placeholder="E-mail" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" required>
<input class="form-ui-inner-content__input" type="text" placeholder="Сообщение">
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ">
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ" style="background-image: url('img/form_button.png');">
</div>
<div class="form-ui-inner-checkbox">
<input class="form-ui-inner-checkbox__input" type="checkbox" id="checkbox1" checked>
......@@ -486,7 +633,7 @@
</div>
</form>
</section>
<footer class="footer">
<footer class="footer" style="background-image: url('img/footer.jpg');">
<nav class="footer-navbar">
<a class="footer-navbar-logo" href="#">
<img src="img/logo.svg" alt="logo: volga">
......@@ -533,6 +680,5 @@
</div>
</footer>
<script defer src="js/index.js"></script>
<script defer src="js/menu_subpage.js"></script>
</body>
</html>
\ No newline at end of file
styles/style.css
View file @ d97843c7
@charset "UTF-8";
* {
font-family: 'Manrope', sans-serif;
padding: 0;
......@@ -22,7 +21,6 @@ body {
overflow-x: hidden !important;
position: relative;
background-color: #f6f8fa;
background-image: url("../img/ecology_mask.svg");
background-repeat: no-repeat;
background-position-x: left;
background-position-y: 79.5%;
......@@ -38,14 +36,13 @@ body {
position: relative;
width: 100%;
height: 800px;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.68)), color-stop(61.02%, rgba(0, 0, 0, 0.12))), -webkit-gradient(linear, left top, left bottom, from(rgba(31, 31, 31, 0.425)), to(rgba(31, 31, 31, 0.125))), url("../img/лес2.gif") no-repeat;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.12) 61.02%), linear-gradient(180deg, rgba(31, 31, 31, 0.425) 0%, rgba(31, 31, 31, 0.125) 100%), url("../img/лес2.gif") no-repeat;
background-repeat: no-repeat;
background-size: cover;
}
.header-subpage {
height: 330px;
background: url("../img/header.jpg") no-repeat;
background-repeat: no-repeat;
background-size: cover;
opacity: 1;
}
......@@ -54,12 +51,14 @@ body {
overflow-x: hidden !important;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
z-index: 1000;
z-index: 100;
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background: #fff url("../img/menu_mask.svg") no-repeat bottom right;
background-color: #fff;
background-repeat: no-repeat;
background-position: right bottom;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
......@@ -153,7 +152,9 @@ body {
-ms-flex-negative: 0;
flex-shrink: 0;
width: 460px;
background: #029745 url("../img/menu_mask.svg") no-repeat bottom right;
background-color: #029745;
background-repeat: no-repeat;
background-position: right bottom;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 80px 70px;
......@@ -415,18 +416,33 @@ body {
.submenu-item {
cursor: pointer;
background: url("../img/points_style.svg") no-repeat 19px 16px;
display: block;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 16px;
padding-left: 48px;
font-weight: bold;
font-size: 14px;
line-height: 19px;
letter-spacing: 0.02em;
color: #16291f;
border-bottom: 1px solid rgba(22, 41, 31, 0.1);
-webkit-transition: 0.4s;
transition: 0.4s;
-webkit-transition: 0.4s all ease;
transition: 0.4s all ease;
}
.submenu-item__icon {
height: 16px;
width: 16px;
fill: transparent;
margin-right: 8px;
stroke: #029745;
-webkit-transition: 0.4s all ease;
transition: 0.4s all ease;
-ms-flex-negative: 0;
flex-shrink: 0;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
}
.submenu-item:last-child {
......@@ -435,7 +451,10 @@ body {
.submenu-item:hover {
color: #029745;
background: url("../img/points_style_hover.svg") no-repeat 19px 16px;
}
.submenu-item:hover .submenu-item__icon {
fill: #029745;
}
.submenu--active {
......@@ -623,7 +642,8 @@ body {
height: 60px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: #029745 url(../img/button_mask.svg) no-repeat;
background-color: #029745;
background-repeat: no-repeat;
border-width: 0;
-webkit-transition: 0.4s;
transition: 0.4s;
......@@ -692,7 +712,8 @@ body {
letter-spacing: 0.15em;
color: #ffffff;
padding: 21px 40px;
background: #029745 url("../img/button_mask.svg") no-repeat;
background-color: #029745;
background-repeat: no-repeat;
text-decoration: none;
-webkit-transition: 0.4s;
transition: 0.4s;
......@@ -777,24 +798,21 @@ body {
transition: 0.4s;
}
.heading-menu-item:before {
display: inline-block;
content: ' ';
background-image: url("../img/list.svg");
background-size: 16px 16px;
.heading-menu-item__icon {
height: 16px;
width: 16px;
margin-right: 16px;
-webkit-transition: 0.4s all ease;
transition: 0.4s all ease;
stroke: #fff;
}
.heading-menu-item:hover .heading-menu-item__link {
color: #029745;
}
.heading-menu-item:hover:before {
background-image: url("../img/points_style.svg");
.heading-menu-item:hover .heading-menu-item__icon {
stroke: #029745;
}
.heading-menu-item:last-child {
......@@ -899,13 +917,21 @@ body {
.production {
position: relative;
background: #f6f8fa url("../img/production_mask.svg") no-repeat right -290px;
background-color: #f6f8fa;
background-repeat: no-repeat;
background-position: right -290px;
margin: 0;
border-left: 1px solid #e6e9f0;
padding: 80px 0 0 0;
margin-left: 140px;
}
.production-subpage {
margin-left: 0;
border-width: 0;
padding: 64px 0 32px 0;
}
.production-text {
width: 680px;
margin-bottom: 72px;
......@@ -959,6 +985,13 @@ body {
overflow-x: auto;
}
.production-list-subpage {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
}
.production-list-item {
position: relative;
width: 533px;
......@@ -973,6 +1006,16 @@ body {
transition: 0.4s;
}
.production-list-item-subpage {
margin-bottom: 32px;
margin-right: 40px;
width: 560px;
}
.production-list-item-subpage:nth-child(2n + 2) {
margin-right: 0;
}
.production-list-item__arrow {
stroke: #029745;
fill: #fff;
......@@ -1024,16 +1067,14 @@ body {
margin-bottom: 16px;
}
.production-list-item__points-item:before {
display: inline-block;
content: ' ';
background-image: url("../img/points_style.svg");
background-size: 16px 16px;
.production-list-item__points-item__icon {
height: 16px;
width: 16px;
margin-right: 16px;
-webkit-transition: 0.4s all ease;
transition: 0.4s all ease;
stroke: #029745;
fill: transparent;
}
.production-list-item:last-child {
......@@ -1045,8 +1086,8 @@ body {
cursor: pointer;
}
.production-list-item__descr:hover .production-list-item__points-item:before {
background-image: url("../img/points_style_hover.svg");
.production-list-item__descr:hover .production-list-item__points-item__icon {
fill: #029745;
}
.production-list-item__descr:active {
......@@ -1155,7 +1196,6 @@ body {
}
.company-video {
content: url("../img/ВИДЕО.gif");
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: calc(50% + 20px);
......@@ -1236,7 +1276,8 @@ body {
letter-spacing: 0.15em;
color: #ffffff;
padding: 21px 40px;
background: #029745 url("../img/button_mask.svg") no-repeat;
background-color: #029745;
background-repeat: no-repeat;
text-decoration: none;
margin-right: 56px;
-webkit-transition: 0.4s;
......@@ -1325,7 +1366,8 @@ body {
.company-top-item:last-child {
width: calc(50% - 20px);
background: #ffffff url("../img/top_mask.svg") no-repeat right -2px;
background-repeat: no-repeat;
background-position: right -2px;
background-attachment: fixed;
}
......@@ -1334,7 +1376,9 @@ body {
}
.press {
background: #f6f8fa url("../img/top_mask_2.svg") no-repeat right top;
background-color: #fff;
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
margin: 0;
border-left: 1px solid #e6e9f0;
......@@ -1723,7 +1767,7 @@ body {
width: 940px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: url("../img/ecology.jpg") no-repeat;
background-repeat: no-repeat;
background-size: cover;
display: -webkit-box;
display: -ms-flexbox;
......@@ -1768,7 +1812,9 @@ body {
width: 440px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: #fafbfc url("../img/ecology_fact.svg") no-repeat top left;
background-color: #fafbfc;
background-repeat: no-repeat;
background-position: top left;
padding: 96px 72px;
position: relative;
margin-right: 40px;
......@@ -1896,7 +1942,9 @@ body {
}
.form-ui {
background: #029745 url("../img/form_mask.svg") no-repeat top left;
background-color: #029745;
background-repeat: no-repeat;
background-position: top left;
padding: 32px 120px;
}
......@@ -1975,7 +2023,9 @@ body {
.form-ui-inner-content__input:required:valid {
outline: none;
border-bottom: 1px solid #fff;
background: url("../img/valid.svg") no-repeat right;
background-repeat: no-repeat;
background-position-x: right;
background-image: url("../img/valid.svg");
}
.form-ui-inner-content__input:not(:empty):invalid {
......@@ -1985,7 +2035,8 @@ body {
}
.form-ui-inner-content__button {
background: #ffffff url("../img/form_button.png") no-repeat;
background-color: #fff;
background-repeat: no-repeat;
background-size: contain;
width: 254px;
height: 60px;
......@@ -2051,7 +2102,7 @@ body {
}
.footer {
background: url("../img/footer.jpg") no-repeat;
background-repeat: no-repeat;
background-size: cover;
padding: 27px 165px 38px 140px;
}
......@@ -2188,7 +2239,8 @@ body {
}
.cards {
background: url("../img/company_mask.svg") no-repeat right center;
background-repeat: no-repeat;
background-position: right center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
......@@ -2266,7 +2318,6 @@ body {
}
.company-view {
content: url("../img/company_view.jpg");
width: calc(50% + 20px);
-webkit-box-sizing: border-box;
box-sizing: border-box;
......@@ -2279,7 +2330,9 @@ body {
width: calc(50% - 20px);
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: #f6f8fa url(../img/top_mask_2.svg) no-repeat right top;
background-color: #f6f8fa;
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
......@@ -2295,7 +2348,9 @@ body {
box-sizing: border-box;
padding: 40px 89px 60px 80px;
margin-left: calc(25% + 20px);
background: #029745 url(../img/company_prod_mask.svg) no-repeat left bottom;
background-color: #029745;
background-repeat: no-repeat;
background-position: left bottom;
}
.company-prod__text {
......@@ -2307,7 +2362,6 @@ body {
.company-inner {
width: calc(50% - 20px);
content: url("../img/company_inner.jpg");
-webkit-box-sizing: border-box;
box-sizing: border-box;
-o-object-fit: cover;
......@@ -2331,7 +2385,8 @@ body {
}
.timeline-about {
background: url("../img/company_mask.svg") no-repeat right center;
background-repeat: no-repeat;
background-position: right center;
padding: 64px 500px;
}
......@@ -2420,13 +2475,19 @@ body {
left: 140px;
height: 40px;
width: 40px;
background: url("../img/prev.svg") no-repeat;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.timeline-content-line-wrapper-events__prev:hover {
background-image: url("../img/prev_hover.svg");
.timeline-content-line-wrapper-events__prev--hover {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.timeline-content-line-wrapper-events__prev img,
.timeline-content-line-wrapper-events__next img {
-webkit-transition: opacity 0.4s, visibility 0s linear 0.4s;
transition: opacity 0.4s, visibility 0s linear 0.4s;
}
.timeline-content-line-wrapper-events__next {
......@@ -2435,13 +2496,15 @@ body {
right: 140px;
height: 40px;
width: 40px;
background: url("../img/next.svg") no-repeat;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.timeline-content-line-wrapper-events__next:hover {
background-image: url("../img/next_hover.svg");
.timeline-content-line-wrapper-events__next--hover {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.timeline-content-line-wrapper-events__item {
......@@ -2516,7 +2579,7 @@ body {
}
.history-video {
background: url(../img/history_video.jpg) no-repeat;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 600px;
......@@ -2583,7 +2646,8 @@ body {
}
.people {
background: url("../img/company_mask.svg") no-repeat right -300px;
background-repeat: no-repeat;
background-position: right -300px;
padding: 64px 20px 0 60px;
display: -webkit-box;
display: -ms-flexbox;
......@@ -2639,7 +2703,8 @@ body {
}
.prod {
background: url("../img/company_mask.svg") no-repeat right -300px;
background-repeat: no-repeat;
background-position: right -300px;
}
.prod-cards {
......@@ -2678,6 +2743,11 @@ body {
line-height: 130%;
color: #16291f;
width: calc(50% - 40px);
margin-bottom: 28px;
}
.prod-about__text:last-child {
margin-bottom: 0;
}
.technology-image {
......@@ -2695,13 +2765,28 @@ body {
.technology-item {
position: absolute;
content: url("../img/technology+.svg");
width: 52px;
height: 52px;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.technology-item__icon {
position: absolute;
top: 0;
left: 0;
-webkit-transition: opacity 0.4s, visibility 0s linear 0.4s;
transition: opacity 0.4s, visibility 0s linear 0.4s;
}
.technology-item__icon--active {
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: 3;
}
.technology-item-block {
opacity: 0;
visibility: hidden;
......@@ -2731,6 +2816,11 @@ body {
font-size: 14px;
line-height: 130%;
color: #16291f;
margin-bottom: 25px;
}
.technology-item-block__text:last-child {
margin-bottom: 0;
}
.technology-item-block:last-child {
......@@ -2739,7 +2829,6 @@ body {
}
.technology-item--active {
content: url("../img/technology+white.svg");
z-index: 10;
}
......@@ -2779,7 +2868,8 @@ body {
}
.strategy {
background: url("../img/company_mask.svg") no-repeat right -300px;
background-repeat: no-repeat;
background-position: right -300px;
padding: 64px 0 0;
}
......@@ -2798,31 +2888,8 @@ body {
color: #ffffff;
padding: 160px 64px;
margin-bottom: 48px;
}
.strategy-project-title-1 {
background: url("../img/project1.jpg") no-repeat;
background-size: cover;
}
.strategy-project-title-2 {
background: url("../img/project2.jpg") no-repeat;
background-size: cover;
}
.strategy-project-title-3 {
background: url("../img/project3.jpg") no-repeat;
background-size: cover;
}
.strategy-project-title-4 {
background: url("../img/project4.jpg") no-repeat;
background-size: cover;
}
.strategy-project-title-5 {
background: url("../img/project5.jpg") no-repeat;
background-size: cover;
background-repeat: no-repeat;
}
.strategy-project-about {
......@@ -2855,7 +2922,6 @@ body {
}
.strategy-project-about-block__list {
list-style: url("../img/str_list.svg");
margin-left: 40px;
}
......@@ -2877,7 +2943,8 @@ body {
}
.corp {
background: url("../img/company_mask.svg") no-repeat right -300px;
background-repeat: no-repeat;
background-position: right -300px;
padding: 64px 140px 0;
display: -webkit-box;
display: -ms-flexbox;
......@@ -2909,9 +2976,14 @@ body {
transition: 0.4s;
}
.corp-wrapper__btn:before {
content: url("../img/points_style.svg");
.corp-wrapper__btn__icon {
margin-right: 16px;
height: 16px;
width: 16px;
fill: transparent;
stroke: #029745;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.corp-wrapper__btn:last-of-type {
......@@ -2923,8 +2995,8 @@ body {
color: #fff;
}
.corp-wrapper__btn:hover::before {
content: url("../img/heading_nav.svg");
.corp-wrapper__btn:hover .corp-wrapper__btn__icon {
stroke: #fff;
}
.corp-content {
......@@ -2932,56 +3004,30 @@ body {
margin-left: auto;
}
.corp-content__title {
font-weight: 800;
font-size: 36px;
line-height: 110%;
letter-spacing: 0.02em;
color: #16291f;
padding-left: 40px;
margin-bottom: 48px;
}
.corp-content__subtitle {
font-weight: 800;
font-size: 24px;
line-height: 130%;
letter-spacing: 0.02em;
color: #16291f;
padding-left: 40px;
margin-bottom: 32px;
}
.corp-content__quote {
font-weight: bold;
font-size: 18px;
line-height: 130%;
color: #16291f;
background: #fff url("../img/corp_quote.svg") no-repeat 90px top;
background-color: #fff;
background-repeat: no-repeat;
background-position: 90px top;
padding: 67px 87px;
margin-bottom: 80px;
}
.corp-content__text {
font-weight: 300;
font-size: 18px;
line-height: 130%;
color: #16291f;
padding-left: 40px;
margin-bottom: 48px;
.corp-content-wrapper {
margin-bottom: 64px;
}
.corp-content__photo {
.corp-content-wrapper__title {
font-weight: 800;
font-size: 36px;
line-height: 110%;
letter-spacing: 0.02em;
color: #16291f;
padding-left: 40px;
margin-bottom: 48px;
width: 100%;
}
.corp-content__photo:last-of-type {
margin-bottom: 0;
}
.corp-content-wrapper {
margin-bottom: 64px;
}
.corp-content-wrapper__text {
......@@ -3007,10 +3053,13 @@ body {
margin-bottom: 32px;
}
.corp-content-wrapper__photo {
width: 100%;
}
.corp-content-wrapper-list {
margin-bottom: 32px;
margin-left: 67px;
list-style: url("../img/points_style.svg");
}
.corp-content-wrapper-list__item {
......@@ -3019,7 +3068,7 @@ body {
line-height: 130%;
color: #16291f;
margin-bottom: 16px;
padding-left: 23px;
padding-left: 13px;
max-width: 809px;
}
......@@ -3027,6 +3076,48 @@ body {
margin-bottom: 0;
}
.corp-content-wrapper:last-child {
margin-bottom: 0;
}
.corp-content > h2 {
font-weight: 800;
font-size: 36px;
line-height: 110%;
letter-spacing: 0.02em;
color: #16291f;
padding-left: 40px;
margin-bottom: 48px;
}
.corp-content > h3 {
font-weight: 800;
font-size: 24px;
line-height: 130%;
letter-spacing: 0.02em;
color: #16291f;
padding-left: 40px;
margin-bottom: 32px;
}
.corp-content > p {
font-weight: 300;
font-size: 18px;
line-height: 130%;
color: #16291f;
padding-left: 40px;
margin-bottom: 48px;
}
.corp-content > img {
margin-bottom: 48px;
width: 100%;
}
.corp-content > img:last-of-type {
margin-bottom: 0;
}
.vac-all {
background-color: #fff;
}
......@@ -3066,6 +3157,38 @@ body {
color: #16291f;
}
.vac-heading {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.vac__link {
font-weight: bold;
font-size: 16px;
line-height: 140%;
color: #029745;
margin-left: 60px;
border-bottom: 1px solid #029745;
padding-bottom: 3px;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
margin-bottom: 45px;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.vac__link:hover {
color: #1cd345;
border-color: #1cd345;
}
.vac__link:active {
color: #07803d;
border-color: #07803d;
}
.vac__text {
font-weight: 300;
font-size: 18px;
......@@ -3086,6 +3209,7 @@ body {
line-height: 130%;
color: #029745;
margin-left: auto;
min-width: 125px;
}
.vac__icon {
......@@ -3095,6 +3219,8 @@ body {
height: 34px;
-webkit-transition: 0.4s;
transition: 0.4s;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.vac__icon:hover {
......@@ -3111,7 +3237,6 @@ body {
.vac-list {
margin-left: 27px;
list-style: url("../img/points_style.svg");
}
.vac-list__item {
......@@ -3119,7 +3244,7 @@ body {
font-size: 18px;
line-height: 130%;
color: #16291f;
padding-left: 23px;
padding-left: 13px;
margin-bottom: 16px;
}
......@@ -3138,8 +3263,8 @@ body {
letter-spacing: 0.15em;
color: #ffffff;
padding: 21px 52px 21px 55px;
background: #029745 url(../img/button_mask.svg) no-repeat;
margin-right: 56px;
background-color: #029745;
background-repeat: no-repeat;
-webkit-transition: 0.4s;
transition: 0.4s;
margin-right: 16px;
......@@ -3158,6 +3283,8 @@ body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.vac__call {
......@@ -3200,6 +3327,25 @@ body {
border-color: #077f3d;
}
.vacancy {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background-repeat: no-repeat;
background-position: right -300px;
padding: 64px 140px 0;
}
.vacancy-all {
max-width: 1160px;
width: 80%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@media (max-width: 1800px) {
.navbar {
padding: 0 100px;
......@@ -3326,6 +3472,10 @@ body {
padding: 62px 0 0 0;
margin-left: 100px;
}
.production-subpage {
padding: 52px 0 28px 0;
margin-left: 0;
}
.production-text {
margin-bottom: 55px;
}
......@@ -3340,11 +3490,17 @@ body {
.production__link {
font-size: 12px;
}
.production-list-subpage {
max-width: 80%;
}
.production-list-item {
padding: 50px 52px;
min-height: 315px;
background-size: 180px 180px;
}
.production-list-item-subpage {
width: calc(50% - 20px);
}
.production-list-item__image {
width: 185px;
}
......@@ -3422,13 +3578,7 @@ body {
font-size: 14px;
max-width: 200px;
}
.company-top-item:last-child {
background: #ffffff url("../img/top_mask_pl.svg") no-repeat right -2px;
background-attachment: fixed;
}
.press {
background: #f6f8fa url("../img/top_mask_2_pl.svg") no-repeat right top;
background-attachment: fixed;
padding: 62px 20px 0 0;
margin-left: 100px;
}
......@@ -3518,7 +3668,7 @@ body {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 74px 55px;
background: #fafbfc url("../img/ecology_fact2.svg") no-repeat top left;
background-size: 65%;
}
.ecology-fact-item__num {
font-size: 31px;
......@@ -3617,8 +3767,6 @@ body {
}
.company-location {
padding: 20px 200px 20px 92px;
background: #f6f8fa url(../img/top_mask_2_pl.svg) no-repeat right top;
background-attachment: fixed;
}
.company-prod {
padding: 20px 68px 20px 60px;
......@@ -3739,33 +3887,121 @@ body {
height: 63px;
font-size: 12px;
padding: 25px;
padding: 25px 15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.corp-wrapper__btn:before {
margin-right: 10px;
}
.corp-content {
width: calc(100% - 322px);
}
.corp-content__title {
.corp-content__quote {
font-size: 15px;
padding: 67px;
margin-bottom: 62px;
}
.corp-content-wrapper {
margin-bottom: 49px;
}
.corp-content-wrapper__title {
font-size: 28px;
padding-left: 30px;
margin-bottom: 37px;
}
.corp-content__subtitle {
font-size: 18px;
.corp-content-wrapper__text, .corp-content-wrapper__bold {
font-size: 14px;
padding-left: 30px;
margin-bottom: 25px;
}
.corp-content__quote {
font-size: 15px;
padding: 67px;
margin-bottom: 62px;
.corp-content-wrapper-list {
margin-bottom: 25px;
margin-left: 52px;
}
.corp-content__text {
.corp-content-wrapper-list__item {
font-size: 14px;
margin-bottom: 12px;
padding-left: 18px;
}
.corp-content > h2 {
font-size: 28px;
padding-left: 30px;
margin-bottom: 37px;
}
.corp-content > h3 {
font-size: 18px;
padding-left: 30px;
margin-bottom: 25px;
}
.corp-content > p {
font-size: 15px;
padding-left: 30px;
margin-bottom: 37px;
}
.corp-content__photo {
.corp-content > img {
margin-bottom: 37px;
}
.vac-all-item {
padding: 31px 30px;
}
.vac-all-item-inner {
margin-top: 25px;
margin-left: 49px;
}
.vac__title, .vac__salary {
font-size: 18px;
}
.vac__link {
margin-left: 46px;
margin-bottom: 34px;
font-size: 14px;
}
.vac__text, .vac__bold {
font-size: 14px;
}
.vac__icon {
margin-right: 25px;
width: 26px;
height: 26px;
}
.vac-wrapper {
margin-bottom: 25px;
}
.vac-list {
margin-left: 21px;
}
.vac-list__item {
font-size: 14px;
padding-left: 18px;
margin-bottom: 12px;
}
.vac__button {
font-size: 12px;
padding: 16px 40px 16px 42px;
height: 46px;
}
.vac-buttons {
height: 46px;
}
.vac__call {
padding: 16px 24px;
font-size: 12px;
height: 46px;
}
.vac__call__icon {
margin-right: 6px;
width: 10px;
height: 10px;
}
.vacancy {
padding: 52px 100px 0;
}
.vacancy-all {
max-width: 1000px;
width: 90%;
}
}
@media (max-width: 1250px) {
......@@ -3838,6 +4074,12 @@ body {
.timeline-content-year-text {
margin-left: 0;
}
.vac-all-item-inner {
margin-bottom: 50px;
}
.vacancy .vac-all-item-inner {
margin-bottom: 0;
}
}
@media (max-width: 950px) {
......@@ -3887,6 +4129,12 @@ body {
.heading-other {
padding: 160px 100px 0 100px;
}
.corp-wrapper {
display: none;
}
.corp-content {
width: 100%;
}
}
@media (max-width: 800px) {
......@@ -3921,7 +4169,7 @@ body {
color: #fff;
}
.menu-hidden {
background: #fff;
background: #fff !important;
-webkit-transform: translateX(100%);
transform: translateX(100%);
min-height: 100vh;
......@@ -3977,6 +4225,10 @@ body {
display: block;
margin-right: 16px;
}
.menu-hidden-main-block__less {
display: block;
margin-right: 16px;
}
.menu-hidden-main-block__title {
font-size: 15px;
margin-bottom: 21px;
......@@ -4016,7 +4268,8 @@ body {
display: block;
width: 288px;
height: 38px;
background: #ffffff url("../img/form_button.png") no-repeat;
background-color: #fff;
background-repeat: no-repeat;
background-size: contain;
border-width: 0;
font-weight: bold;
......@@ -4178,6 +4431,9 @@ body {
-ms-flex-pack: center;
justify-content: center;
}
.heading-menu-item__icon {
display: none;
}
.heading-menu-item__link {
font-weight: normal;
font-size: 11px;
......@@ -4199,9 +4455,11 @@ body {
.production {
border-width: 0;
margin: 0;
background: #f6f8fa url("../img/production_mask2.svg") no-repeat right -215px;
padding: 52px 16px;
}
.production-subpage {
background: none !important;
}
.production-text {
width: 100%;
margin-bottom: 52px;
......@@ -4222,6 +4480,7 @@ body {
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
max-width: 100%;
}
.production-list-item {
-webkit-box-orient: vertical;
......@@ -4241,6 +4500,14 @@ body {
-ms-flex-pack: center;
justify-content: center;
}
.production-list-item-subpage {
margin: 0 auto;
margin-bottom: 10px;
}
.production-list-item-subpage:nth-child(2n + 2) {
margin: 0 auto;
margin-bottom: 10px;
}
.production-list-item__image {
width: 152px;
}
......@@ -4367,12 +4634,12 @@ body {
}
.company-top-item:last-child, .company-top-item:first-child {
width: 100%;
background: #ffffff;
background: #ffffff !important;
}
.press {
border-width: 0;
margin: 0;
background: #f6f8fa;
background: #f6f8fa !important;
padding: 52px 0px 52px 0;
}
.press-mob {
......@@ -4529,7 +4796,7 @@ body {
padding: 52px 16px;
}
.ecology-fact-item {
background: #fafbfc url("../img/ecology_fact3.svg") no-repeat top left;
background-size: 15%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
......@@ -4587,7 +4854,7 @@ body {
padding: 52px 16px;
}
.form-ui {
background: #029745;
background: #029745 !important;
padding: 32px 16px;
}
.form-ui-inner-heading__title {
......@@ -4623,7 +4890,7 @@ body {
padding-left: 0;
}
.cards {
background: #f6f8fa;
background: #f6f8fa !important;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
......@@ -4649,7 +4916,7 @@ body {
.company-location {
width: 100%;
padding: 52px 16px;
background: #f6f8fa;
background: #f6f8fa !important;
}
.company-prod {
padding: 52px 16px;
......@@ -4666,7 +4933,7 @@ body {
bottom: 770px;
}
.timeline-about {
background: none;
background: none !important;
}
.timeline-about__title {
font-size: 23px;
......@@ -4768,7 +5035,7 @@ body {
font-size: 12px;
}
.people {
background: none;
background: none !important;
padding: 52px 16px;
}
.people-card {
......@@ -4793,7 +5060,7 @@ body {
width: 100%;
}
.prod {
background: none;
background: none !important;
}
.prod-cards {
-webkit-box-orient: vertical;
......@@ -4817,8 +5084,21 @@ body {
font-size: 12px;
width: 100%;
}
.technology-image {
overflow-y: hidden;
overflow-x: auto;
margin: 0 auto;
margin-bottom: 52px;
}
.technology-text {
padding: 0 16px;
font-size: 14px;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.strategy {
background: none;
background: none !important;
}
.strategy-project {
width: 100%;
......@@ -4858,7 +5138,7 @@ body {
margin-bottom: 21px;
}
.corp {
background: none;
background: none !important;
padding: 52px 16px 0;
}
.corp-wrapper {
......@@ -4867,29 +5147,111 @@ body {
.corp-content {
width: 100%;
}
.corp-content__title {
.corp-content__quote {
font-size: 12px;
padding: 52px 16px;
margin-bottom: 16px;
}
.corp-content-wrapper {
margin-bottom: 41px;
}
.corp-content-wrapper__title {
font-size: 24px;
padding-left: 8px;
margin-bottom: 16px;
}
.corp-content__subtitle {
font-size: 15px;
.corp-content-wrapper__text, .corp-content-wrapper__bold {
font-size: 12px;
padding-left: 8px;
margin-bottom: 12px;
margin-bottom: 16px;
}
.corp-content__quote {
.corp-content-wrapper-list {
margin-bottom: 16px;
margin-left: 40px;
}
.corp-content-wrapper-list__item {
font-size: 12px;
padding: 52px 16px;
padding-left: 8px;
margin-bottom: 12px;
}
.corp-content > h2 {
font-size: 24px;
padding-left: 8px;
margin-bottom: 16px;
}
.corp-content__text {
.corp-content > h3 {
font-size: 15px;
padding-left: 8px;
margin-bottom: 12px;
}
.corp-content > p {
font-size: 12px;
padding-left: 8px;
margin-bottom: 16px;
}
.corp-content__photo {
.corp-content > img {
margin-bottom: 24px;
}
.vac-all-item {
padding: 25px;
}
.vac-all-item-inner {
margin-top: 20px;
margin-left: 40px;
margin-bottom: 0;
}
.vac__title, .vac__salary {
font-size: 14px;
}
.vac__link {
margin-left: 30px;
margin-bottom: 13px;
font-size: 12px;
}
.vac__salary {
min-width: 86px;
}
.vac__text, .vac__bold {
font-size: 12px;
}
.vac__icon {
width: 21px;
height: 21px;
margin-right: 20px;
}
.vac-wrapper {
margin-bottom: 20px;
}
.vac-list {
margin-left: 24px;
}
.vac-list__item {
font-size: 12px;
padding-left: 14px;
margin-bottom: 8px;
}
.vac__button {
height: 38px;
padding: 13px 25px;
margin-right: 12px;
}
.vac-buttons {
height: 38px;
}
.vac__call {
height: 38px;
padding: 13px 18px;
}
.vac__call__icon {
margin-right: 4px;
}
.vacancy {
background: none !important;
padding: 52px 16px 0;
}
.vacancy-all {
width: 100%;
}
}
@media (max-width: 700px) {
......@@ -4919,6 +5281,12 @@ body {
margin-top: 16px;
margin-right: auto;
}
.vac-all-item-inner {
margin-bottom: 50px;
}
.vacancy .vac-all-item-inner {
margin-bottom: 50px;
}
}
@media (max-width: 380px) {
......@@ -4948,4 +5316,8 @@ body {
transform: rotate(360deg);
}
}
.hidden {
display: none;
}
/*# sourceMappingURL=style.css.map */
\ No newline at end of file
styles/style.css.map
View file @ d97843c7
This source diff could not be displayed because it is too large. You can view the blob instead.
styles/style.scss
View file @ d97843c7
......@@ -21,7 +21,6 @@ body {
overflow-x: hidden !important;
position: relative;
background-color: #f6f8fa;
background-image: url('../img/ecology_mask.svg');
background-repeat: no-repeat;
background-position-x: left;
background-position-y: 79.5%;
......@@ -36,21 +35,11 @@ body {
position: relative;
width: 100%;
height: 800px;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.68) 0%,
rgba(0, 0, 0, 0.12) 61.02%
),
linear-gradient(
180deg,
rgba(31, 31, 31, 0.425) 0%,
rgba(31, 31, 31, 0.125) 100%
),
url('../img/лес2.gif') no-repeat;
background-repeat: no-repeat;
background-size: cover;
&-subpage {
height: 330px;
background: url('../img/header.jpg') no-repeat;
background-repeat: no-repeat;
background-size: cover;
opacity: 1;
}
......@@ -59,10 +48,12 @@ body {
.menu-hidden {
overflow-x: hidden !important;
transform: translateY(-100%);
z-index: 1000;
z-index: 100;
position: absolute;
display: flex;
background: #fff url('../img/menu_mask.svg') no-repeat bottom right;
background-color: #fff;
background-repeat: no-repeat;
background-position: right bottom;
width: 100%;
box-sizing: border-box;
min-height: 900px;
......@@ -124,7 +115,9 @@ body {
position: relative;
flex-shrink: 0;
width: 460px;
background: #029745 url('../img/menu_mask.svg') no-repeat bottom right;
background-color: #029745;
background-repeat: no-repeat;
background-position: right bottom;
box-sizing: border-box;
padding: 80px 70px;
&__button {
......@@ -320,24 +313,34 @@ body {
transition: 0.4s;
&-item {
cursor: pointer;
background: url('../img/points_style.svg') no-repeat 19px 16px;
display: block;
display: flex;
padding: 16px;
padding-left: 48px;
font-weight: bold;
font-size: 14px;
line-height: 19px;
letter-spacing: 0.02em;
color: #16291f;
border-bottom: 1px solid rgba($color: #16291f, $alpha: 0.1);
transition: 0.4s;
transition: 0.4s all ease;
&__icon {
height: 16px;
width: 16px;
fill: transparent;
margin-right: 8px;
stroke: #029745;
transition: 0.4s all ease;
flex-shrink: 0;
align-self: center;
}
}
&-item:last-child {
border-width: 0;
}
&-item:hover {
color: #029745;
background: url('../img/points_style_hover.svg') no-repeat 19px 16px;
}
&-item:hover &-item__icon {
fill: #029745;
}
}
......@@ -478,7 +481,8 @@ body {
width: 320px;
height: 60px;
box-sizing: border-box;
background: #029745 url(../img/button_mask.svg) no-repeat;
background-color: #029745;
background-repeat: no-repeat;
border-width: 0;
transition: 0.4s;
}
......@@ -528,7 +532,8 @@ body {
letter-spacing: 0.15em;
color: #ffffff;
padding: 21px 40px;
background: #029745 url('../img/button_mask.svg') no-repeat;
background-color: #029745;
background-repeat: no-repeat;
text-decoration: none;
transition: 0.4s;
}
......@@ -590,22 +595,19 @@ body {
opacity: 0.8;
transition: 0.4s;
}
}
&-item:before {
display: inline-block;
content: ' ';
background-image: url('../img/list.svg');
background-size: 16px 16px;
&__icon {
height: 16px;
width: 16px;
margin-right: 16px;
transition: 0.4s all ease;
stroke: #fff;
}
}
&-item:hover &-item__link {
color: #029745;
}
&-item:hover:before {
background-image: url('../img/points_style.svg');
&-item:hover &-item__icon {
stroke: #029745;
}
&-item:last-child {
margin-bottom: 0;
......@@ -680,11 +682,18 @@ body {
.production {
position: relative;
background: #f6f8fa url('../img/production_mask.svg') no-repeat right -290px;
background-color: #f6f8fa;
background-repeat: no-repeat;
background-position: right -290px;
margin: 0;
border-left: 1px solid #e6e9f0;
padding: 80px 0 0 0;
margin-left: 140px;
&-subpage {
margin-left: 0;
border-width: 0;
padding: 64px 0 32px 0;
}
&-text {
width: 680px;
margin-bottom: 72px;
......@@ -727,6 +736,11 @@ body {
&-list {
display: flex;
overflow-x: auto;
&-subpage {
flex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
}
&-item {
position: relative;
width: 533px;
......@@ -737,6 +751,14 @@ body {
box-sizing: border-box;
margin-right: 20px;
transition: 0.4s;
&-subpage {
margin-bottom: 32px;
margin-right: 40px;
width: 560px;
}
&-subpage:nth-child(2n + 2) {
margin-right: 0;
}
&__arrow {
stroke: #029745;
fill: #fff;
......@@ -775,15 +797,13 @@ body {
align-items: center;
margin-bottom: 16px;
}
&__points-item:before {
display: inline-block;
content: ' ';
background-image: url('../img/points_style.svg');
background-size: 16px 16px;
&__points-item__icon {
height: 16px;
width: 16px;
margin-right: 16px;
transition: 0.4s all ease;
stroke: #029745;
fill: transparent;
}
}
&-item:last-child {
......@@ -793,8 +813,8 @@ body {
color: #029745;
cursor: pointer;
}
&-item__descr:hover &-item__points-item:before {
background-image: url('../img/points_style_hover.svg');
&-item__descr:hover &-item__points-item__icon {
fill: #029745;
}
&-item__descr:active {
background: #077f3d;
......@@ -874,7 +894,6 @@ body {
}
}
&-video {
content: url('../img/ВИДЕО.gif');
box-sizing: border-box;
width: calc(50% + 20px);
object-fit: cover;
......@@ -932,7 +951,8 @@ body {
letter-spacing: 0.15em;
color: #ffffff;
padding: 21px 40px;
background: #029745 url('../img/button_mask.svg') no-repeat;
background-color: #029745;
background-repeat: no-repeat;
text-decoration: none;
margin-right: 56px;
transition: 0.4s;
......@@ -997,7 +1017,8 @@ body {
}
&-item:last-child {
width: calc(50% - 20px);
background: #ffffff url('../img/top_mask.svg') no-repeat right -2px;
background-repeat: no-repeat;
background-position: right -2px;
background-attachment: fixed;
}
&-item:first-child {
......@@ -1007,7 +1028,9 @@ body {
}
.press {
background: #f6f8fa url('../img/top_mask_2.svg') no-repeat right top;
background-color: #fff;
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
margin: 0;
border-left: 1px solid #e6e9f0;
......@@ -1276,7 +1299,7 @@ body {
&-quote {
width: 940px;
box-sizing: border-box;
background: url('../img/ecology.jpg') no-repeat;
background-repeat: no-repeat;
background-size: cover;
display: flex;
align-items: center;
......@@ -1306,7 +1329,9 @@ body {
&-item {
width: 440px;
box-sizing: border-box;
background: #fafbfc url('../img/ecology_fact.svg') no-repeat top left;
background-color: #fafbfc;
background-repeat: no-repeat;
background-position: top left;
padding: 96px 72px;
position: relative;
margin-right: 40px;
......@@ -1407,7 +1432,9 @@ body {
padding: 64px 139px 64px 0;
}
&-ui {
background: #029745 url('../img/form_mask.svg') no-repeat top left;
background-color: #029745;
background-repeat: no-repeat;
background-position: top left;
padding: 32px 120px;
&-inner {
display: flex;
......@@ -1460,7 +1487,9 @@ body {
&__input:required:valid {
outline: none;
border-bottom: 1px solid #fff;
background: url('../img/valid.svg') no-repeat right;
background-repeat: no-repeat;
background-position-x: right;
background-image: url('../img/valid.svg');
}
&__input:not(:empty):invalid {
outline: none;
......@@ -1468,7 +1497,8 @@ body {
color: #eb5757;
}
&__button {
background: #ffffff url('../img/form_button.png') no-repeat;
background-color: #fff;
background-repeat: no-repeat;
background-size: contain;
width: 254px;
height: 60px;
......@@ -1524,7 +1554,7 @@ body {
}
.footer {
background: url('../img/footer.jpg') no-repeat;
background-repeat: no-repeat;
background-size: cover;
padding: 27px 165px 38px 140px;
&-navbar {
......@@ -1613,7 +1643,8 @@ body {
//company
.cards {
background: url('../img/company_mask.svg') no-repeat right center;
background-repeat: no-repeat;
background-position: right center;
display: flex;
padding: 64px 140px 79px;
&-item {
......@@ -1671,7 +1702,6 @@ body {
}
}
&-view {
content: url('../img/company_view.jpg');
width: calc(50% + 20px);
box-sizing: border-box;
object-fit: cover;
......@@ -1680,7 +1710,9 @@ body {
padding: 20px 260px 20px 120px;
width: calc(50% - 20px);
box-sizing: border-box;
background: #f6f8fa url(../img/top_mask_2.svg) no-repeat right top;
background-color: #f6f8fa;
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
&-prod {
......@@ -1690,7 +1722,9 @@ body {
box-sizing: border-box;
padding: 40px 89px 60px 80px;
margin-left: calc(25% + 20px);
background: #029745 url(../img/company_prod_mask.svg) no-repeat left bottom;
background-color: #029745;
background-repeat: no-repeat;
background-position: left bottom;
&__text {
font-weight: 300;
font-size: 24px;
......@@ -1700,7 +1734,6 @@ body {
}
&-inner {
width: calc(50% - 20px);
content: url('../img/company_inner.jpg');
box-sizing: border-box;
object-fit: cover;
}
......@@ -1719,7 +1752,8 @@ body {
width: max-content;
}
&-about {
background: url('../img/company_mask.svg') no-repeat right center;
background-repeat: no-repeat;
background-position: right center;
padding: 64px 500px;
&__title {
font-weight: 800;
......@@ -1787,11 +1821,16 @@ body {
left: 140px;
height: 40px;
width: 40px;
background: url('../img/prev.svg') no-repeat;
transition: 0.4s;
&--hover {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
}
&__prev:hover {
background-image: url('../img/prev_hover.svg');
&__prev img,
&__next img {
transition: opacity 0.4s, visibility 0s linear 0.4s;
}
&__next {
position: absolute;
......@@ -1799,11 +1838,13 @@ body {
right: 140px;
height: 40px;
width: 40px;
background: url('../img/next.svg') no-repeat;
transition: 0.4s;
&--hover {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
&__next:hover {
background-image: url('../img/next_hover.svg');
}
&__item {
display: inline-block;
......@@ -1871,7 +1912,7 @@ body {
}
}
.history-video {
background: url(../img/history_video.jpg) no-repeat;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 600px;
......@@ -1921,7 +1962,8 @@ body {
//head
.people {
background: url('../img/company_mask.svg') no-repeat right -300px;
background-repeat: no-repeat;
background-position: right -300px;
padding: 64px 20px 0 60px;
display: flex;
align-items: center;
......@@ -1961,7 +2003,8 @@ body {
//production
.prod {
background: url('../img/company_mask.svg') no-repeat right -300px;
background-repeat: no-repeat;
background-position: right -300px;
&-cards {
display: flex;
justify-content: center;
......@@ -1983,6 +2026,10 @@ body {
line-height: 130%;
color: #16291f;
width: calc(50% - 40px);
margin-bottom: 28px;
}
&__text:last-child {
margin-bottom: 0;
}
}
}
......@@ -2000,10 +2047,22 @@ body {
}
&-item {
position: absolute;
content: url('../img/technology+.svg');
width: 52px;
height: 52px;
transition: 0.4s;
&__icon {
position: absolute;
top: 0;
left: 0;
transition: opacity 0.4s, visibility 0s linear 0.4s;
&--active {
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: 3;
}
}
&-block {
opacity: 0;
visibility: hidden;
......@@ -2028,6 +2087,10 @@ body {
font-size: 14px;
line-height: 130%;
color: #16291f;
margin-bottom: 25px;
}
&__text:last-child {
margin-bottom: 0;
}
}
&-block:last-child {
......@@ -2036,7 +2099,6 @@ body {
}
}
&-item--active {
content: url('../img/technology+white.svg');
z-index: 10;
}
&-item-1 {
......@@ -2072,7 +2134,8 @@ body {
//strategy
.strategy {
background: url('../img/company_mask.svg') no-repeat right -300px;
background-repeat: no-repeat;
background-position: right -300px;
padding: 64px 0 0;
&-project {
margin: 0 auto;
......@@ -2087,26 +2150,8 @@ body {
color: #ffffff;
padding: 160px 64px;
margin-bottom: 48px;
}
&-title-1 {
background: url('../img/project1.jpg') no-repeat;
background-size: cover;
}
&-title-2 {
background: url('../img/project2.jpg') no-repeat;
background-size: cover;
}
&-title-3 {
background: url('../img/project3.jpg') no-repeat;
background-size: cover;
}
&-title-4 {
background: url('../img/project4.jpg') no-repeat;
background-size: cover;
}
&-title-5 {
background: url('../img/project5.jpg') no-repeat;
background-size: cover;
background-repeat: no-repeat;
}
&-about {
padding: 0 40px;
......@@ -2130,7 +2175,6 @@ body {
margin-bottom: 32px;
}
&__list {
list-style: url('../img/str_list.svg');
margin-left: 40px;
&-item {
margin-bottom: 32px;
......@@ -2153,7 +2197,8 @@ body {
//corp
.corp {
background: url('../img/company_mask.svg') no-repeat right -300px;
background-repeat: no-repeat;
background-position: right -300px;
padding: 64px 140px 0;
display: flex;
position: relative;
......@@ -2176,9 +2221,13 @@ body {
border-bottom: 1px solid #e6e9f0;
transition: 0.4s;
}
&__btn:before {
content: url('../img/points_style.svg');
&__btn__icon {
margin-right: 16px;
height: 16px;
width: 16px;
fill: transparent;
stroke: #029745;
transition: 0.4s;
}
&__btn:last-of-type {
border-width: 0;
......@@ -2187,57 +2236,35 @@ body {
background: #029745;
color: #fff;
}
&__btn:hover::before {
content: url('../img/heading_nav.svg');
&__btn:hover &__btn__icon {
stroke: #fff;
}
}
&-content {
width: calc(100% - 440px);
margin-left: auto;
&__title {
font-weight: 800;
font-size: 36px;
line-height: 110%;
letter-spacing: 0.02em;
color: #16291f;
padding-left: 40px;
margin-bottom: 48px;
}
&__subtitle {
font-weight: 800;
font-size: 24px;
line-height: 130%;
letter-spacing: 0.02em;
color: #16291f;
padding-left: 40px;
margin-bottom: 32px;
}
&__quote {
font-weight: bold;
font-size: 18px;
line-height: 130%;
color: #16291f;
background: #fff url('../img/corp_quote.svg') no-repeat 90px top;
background-color: #fff;
background-repeat: no-repeat;
background-position: 90px top;
padding: 67px 87px;
margin-bottom: 80px;
}
&__text {
font-weight: 300;
font-size: 18px;
line-height: 130%;
&-wrapper {
margin-bottom: 64px;
&__title {
font-weight: 800;
font-size: 36px;
line-height: 110%;
letter-spacing: 0.02em;
color: #16291f;
padding-left: 40px;
margin-bottom: 48px;
}
&__photo {
margin-bottom: 48px;
width: 100%;
}
&__photo:last-of-type {
margin-bottom: 0;
}
&-wrapper {
margin-bottom: 64px;
&__text {
font-weight: 300;
font-size: 18px;
......@@ -2258,17 +2285,19 @@ body {
padding-left: 40px;
margin-bottom: 32px;
}
&__photo {
width: 100%;
}
&-list {
margin-bottom: 32px;
margin-left: 67px;
list-style: url('../img/points_style.svg');
&__item {
font-weight: 300;
font-size: 18px;
line-height: 130%;
color: #16291f;
margin-bottom: 16px;
padding-left: 23px;
padding-left: 13px;
max-width: 809px;
}
&__item:last-child {
......@@ -2276,6 +2305,42 @@ body {
}
}
}
&-wrapper:last-child {
margin-bottom: 0;
}
}
&-content > h2 {
font-weight: 800;
font-size: 36px;
line-height: 110%;
letter-spacing: 0.02em;
color: #16291f;
padding-left: 40px;
margin-bottom: 48px;
}
&-content > h3 {
font-weight: 800;
font-size: 24px;
line-height: 130%;
letter-spacing: 0.02em;
color: #16291f;
padding-left: 40px;
margin-bottom: 32px;
}
&-content > p {
font-weight: 300;
font-size: 18px;
line-height: 130%;
color: #16291f;
padding-left: 40px;
margin-bottom: 48px;
}
&-content > img {
margin-bottom: 48px;
width: 100%;
}
&-content > img:last-of-type {
margin-bottom: 0;
}
}
......@@ -2308,6 +2373,29 @@ body {
line-height: 130%;
color: #16291f;
}
&-heading {
display: flex;
}
&__link {
font-weight: bold;
font-size: 16px;
line-height: 140%;
color: #029745;
margin-left: 60px;
border-bottom: 1px solid #029745;
padding-bottom: 3px;
align-self: center;
margin-bottom: 45px;
transition: 0.4s;
}
&__link:hover {
color: #1cd345;
border-color: #1cd345;
}
&__link:active {
color: #07803d;
border-color: #07803d;
}
&__text {
font-weight: 300;
font-size: 18px;
......@@ -2326,6 +2414,7 @@ body {
line-height: 130%;
color: #029745;
margin-left: auto;
min-width: 125px;
}
&__icon {
margin-right: 32px;
......@@ -2333,6 +2422,7 @@ body {
width: 34px;
height: 34px;
transition: 0.4s;
flex-shrink: 0;
}
&__icon:hover {
stroke: #029745;
......@@ -2345,13 +2435,12 @@ body {
}
&-list {
margin-left: 27px;
list-style: url('../img/points_style.svg');
&__item {
font-weight: 300;
font-size: 18px;
line-height: 130%;
color: #16291f;
padding-left: 23px;
padding-left: 13px;
margin-bottom: 16px;
}
&__item:last-child {
......@@ -2368,8 +2457,8 @@ body {
letter-spacing: 0.15em;
color: #ffffff;
padding: 21px 52px 21px 55px;
background: #029745 url(../img/button_mask.svg) no-repeat;
margin-right: 56px;
background-color: #029745;
background-repeat: no-repeat;
transition: 0.4s;
margin-right: 16px;
}
......@@ -2382,6 +2471,7 @@ body {
&-buttons {
height: 60px;
display: flex;
flex-wrap: wrap;
}
&__call {
border: 1px solid #029745;
......@@ -2418,6 +2508,19 @@ body {
}
}
.vacancy {
display: flex;
justify-content: center;
background-repeat: no-repeat;
background-position: right -300px;
padding: 64px 140px 0;
&-all {
max-width: 1160px;
width: 80%;
box-sizing: border-box;
}
}
@media (max-width: 1800px) {
.navbar {
padding: 0 100px;
......@@ -2560,6 +2663,10 @@ body {
.production {
padding: 62px 0 0 0;
margin-left: 100px;
&-subpage {
padding: 52px 0 28px 0;
margin-left: 0;
}
&-text {
margin-bottom: 55px;
}
......@@ -2575,7 +2682,13 @@ body {
font-size: 12px;
}
&-list {
&-subpage {
max-width: 80%;
}
&-item {
&-subpage {
width: calc(50% - 20px);
}
padding: 50px 52px;
min-height: 315px;
background-size: 180px 180px;
......@@ -2663,15 +2776,9 @@ body {
max-width: 200px;
}
}
&-item:last-child {
background: #ffffff url('../img/top_mask_pl.svg') no-repeat right -2px;
background-attachment: fixed;
}
}
}
.press {
background: #f6f8fa url('../img/top_mask_2_pl.svg') no-repeat right top;
background-attachment: fixed;
padding: 62px 20px 0 0;
margin-left: 100px;
&__title {
......@@ -2765,7 +2872,7 @@ body {
width: 280px;
box-sizing: border-box;
padding: 74px 55px;
background: #fafbfc url('../img/ecology_fact2.svg') no-repeat top left;
background-size: 65%;
&__num {
font-size: 31px;
}
......@@ -2886,8 +2993,6 @@ body {
}
&-location {
padding: 20px 200px 20px 92px;
background: #f6f8fa url(../img/top_mask_2_pl.svg) no-repeat right top;
background-attachment: fixed;
}
&-prod {
padding: 20px 68px 20px 60px;
......@@ -3034,34 +3139,127 @@ body {
height: 63px;
font-size: 12px;
padding: 25px;
padding: 25px 15px;
display: flex;
}
&__btn:before {
margin-right: 10px;
}
}
&-content {
width: calc(100% - 322px);
&__quote {
font-size: 15px;
padding: 67px;
margin-bottom: 62px;
}
&-wrapper {
margin-bottom: 49px;
&__title {
font-size: 28px;
padding-left: 30px;
margin-bottom: 37px;
}
&__subtitle {
font-size: 18px;
&__text,
&__bold {
font-size: 14px;
padding-left: 30px;
margin-bottom: 25px;
}
&__quote {
font-size: 15px;
padding: 67px;
margin-bottom: 62px;
&-list {
margin-bottom: 25px;
margin-left: 52px;
&__item {
font-size: 14px;
margin-bottom: 12px;
padding-left: 18px;
}
&__text {
}
}
}
&-content > h2 {
font-size: 28px;
padding-left: 30px;
margin-bottom: 37px;
}
&-content > h3 {
font-size: 18px;
padding-left: 30px;
margin-bottom: 25px;
}
&-content > p {
font-size: 15px;
padding-left: 30px;
margin-bottom: 37px;
}
&__photo {
&-content > img {
margin-bottom: 37px;
}
}
.vac {
&-all {
&-item {
padding: 31px 30px;
&-inner {
margin-top: 25px;
margin-left: 49px;
}
}
}
&__title,
&__salary {
font-size: 18px;
}
&__link {
margin-left: 46px;
margin-bottom: 34px;
font-size: 14px;
}
&__text,
&__bold {
font-size: 14px;
}
&__icon {
margin-right: 25px;
width: 26px;
height: 26px;
}
&-wrapper {
margin-bottom: 25px;
}
&-list {
margin-left: 21px;
&__item {
font-size: 14px;
padding-left: 18px;
margin-bottom: 12px;
}
}
&__button {
font-size: 12px;
padding: 16px 40px 16px 42px;
height: 46px;
}
&-buttons {
height: 46px;
}
&__call {
padding: 16px 24px;
font-size: 12px;
height: 46px;
&__icon {
margin-right: 6px;
width: 10px;
height: 10px;
}
}
}
.vacancy {
padding: 52px 100px 0;
&-all {
max-width: 1000px;
width: 90%;
}
}
}
......@@ -3127,6 +3325,12 @@ body {
}
}
}
.vac-all-item-inner {
margin-bottom: 50px;
}
.vacancy .vac-all-item-inner {
margin-bottom: 0;
}
}
@media (max-width: 950px) {
......@@ -3176,6 +3380,14 @@ body {
.heading-other {
padding: 160px 100px 0 100px;
}
.corp {
&-wrapper {
display: none;
}
}
.corp-content {
width: 100%;
}
}
@media (max-width: 800px) {
......@@ -3210,7 +3422,7 @@ body {
}
}
.menu-hidden {
background: #fff;
background: #fff !important;
transform: translateX(100%);
min-height: 100vh;
height: 100vh;
......@@ -3246,6 +3458,10 @@ body {
display: block;
margin-right: 16px;
}
&__less {
display: block;
margin-right: 16px;
}
&__title {
font-size: 15px;
margin-bottom: 21px;
......@@ -3281,7 +3497,8 @@ body {
display: block;
width: 288px;
height: 38px;
background: #ffffff url('../img/form_button.png') no-repeat;
background-color: #fff;
background-repeat: no-repeat;
background-size: contain;
border-width: 0;
font-weight: bold;
......@@ -3403,6 +3620,9 @@ body {
display: flex;
align-items: center;
justify-content: center;
&__icon {
display: none;
}
&__link {
font-weight: normal;
font-size: 11px;
......@@ -3426,8 +3646,10 @@ body {
.production {
border-width: 0;
margin: 0;
background: #f6f8fa url('../img/production_mask2.svg') no-repeat right -215px;
padding: 52px 16px;
&-subpage {
background: none !important;
}
&-text {
width: 100%;
margin-bottom: 52px;
......@@ -3445,7 +3667,16 @@ body {
}
&-list {
flex-direction: column;
max-width: 100%;
&-item {
&-subpage {
margin: 0 auto;
margin-bottom: 10px;
}
&-subpage:nth-child(2n + 2) {
margin: 0 auto;
margin-bottom: 10px;
}
flex-direction: column;
background-size: 152px 152px;
width: 288px;
......@@ -3575,14 +3806,14 @@ body {
&-item:last-child,
&-item:first-child {
width: 100%;
background: #ffffff;
background: #ffffff !important;
}
}
}
.press {
border-width: 0;
margin: 0;
background: #f6f8fa;
background: #f6f8fa !important;
padding: 52px 0px 52px 0;
&-mob {
display: flex;
......@@ -3720,7 +3951,7 @@ body {
margin: 0;
padding: 52px 16px;
&-item {
background: #fafbfc url('../img/ecology_fact3.svg') no-repeat top left;
background-size: 15%;
box-sizing: border-box;
width: 100%;
padding: 62px 46px;
......@@ -3774,7 +4005,7 @@ body {
margin: 0;
padding: 52px 16px;
&-ui {
background: #029745;
background: #029745 !important;
padding: 32px 16px;
&-inner {
&-heading {
......@@ -3815,7 +4046,7 @@ body {
}
//company
.cards {
background: #f6f8fa;
background: #f6f8fa !important;
flex-direction: column;
align-items: center;
padding: 52px 16px;
......@@ -3839,7 +4070,7 @@ body {
&-location {
width: 100%;
padding: 52px 16px;
background: #f6f8fa;
background: #f6f8fa !important;
}
&-prod {
padding: 52px 16px;
......@@ -3859,7 +4090,7 @@ body {
//history
.timeline {
&-about {
background: none;
background: none !important;
&__title {
font-size: 23px;
margin-bottom: 31px;
......@@ -3962,7 +4193,7 @@ body {
}
//head
.people {
background: none;
background: none !important;
padding: 52px 16px;
&-card {
box-sizing: border-box;
......@@ -3987,7 +4218,7 @@ body {
}
//production
.prod {
background: none;
background: none !important;
&-cards {
flex-direction: column;
align-items: center;
......@@ -4006,9 +4237,24 @@ body {
}
}
}
//technology
.technology {
&-image {
overflow-y: hidden;
overflow-x: auto;
margin: 0 auto;
margin-bottom: 52px;
}
&-text {
padding: 0 16px;
font-size: 14px;
width: 100%;
box-sizing: border-box;
}
}
//strategy
.strategy {
background: none;
background: none !important;
&-project {
width: 100%;
padding: 0 16px;
......@@ -4044,37 +4290,126 @@ body {
}
}
.corp {
background: none;
background: none !important;
padding: 52px 16px 0;
&-wrapper {
display: none;
}
&-content {
width: 100%;
&__quote {
font-size: 12px;
padding: 52px 16px;
margin-bottom: 16px;
}
&-wrapper {
margin-bottom: 41px;
&__title {
font-size: 24px;
padding-left: 8px;
margin-bottom: 16px;
}
&__subtitle {
font-size: 15px;
&__text,
&__bold {
font-size: 12px;
padding-left: 8px;
margin-bottom: 12px;
margin-bottom: 16px;
}
&__quote {
&-list {
margin-bottom: 16px;
margin-left: 40px;
&__item {
font-size: 12px;
padding: 52px 16px;
padding-left: 8px;
margin-bottom: 12px;
}
}
}
}
&-content > h2 {
font-size: 24px;
padding-left: 8px;
margin-bottom: 16px;
}
&__text {
&-content > h3 {
font-size: 15px;
padding-left: 8px;
margin-bottom: 12px;
}
&-content > p {
font-size: 12px;
padding-left: 8px;
margin-bottom: 16px;
}
&__photo {
&-content > img {
margin-bottom: 24px;
}
}
.vac {
&-all {
&-item {
padding: 25px;
&-inner {
margin-top: 20px;
margin-left: 40px;
margin-bottom: 0;
}
}
}
&__title,
&__salary {
font-size: 14px;
}
&__link {
margin-left: 30px;
margin-bottom: 13px;
font-size: 12px;
}
&__salary {
min-width: 86px;
}
&__text,
&__bold {
font-size: 12px;
}
&__icon {
width: 21px;
height: 21px;
margin-right: 20px;
}
&-wrapper {
margin-bottom: 20px;
}
&-list {
margin-left: 24px;
&__item {
font-size: 12px;
padding-left: 14px;
margin-bottom: 8px;
}
}
&__button {
height: 38px;
padding: 13px 25px;
margin-right: 12px;
}
&-buttons {
height: 38px;
}
&__call {
height: 38px;
padding: 13px 18px;
&__icon {
margin-right: 4px;
}
}
}
.vacancy {
background: none !important;
padding: 52px 16px 0;
&-all {
width: 100%;
}
}
}
@media (max-width: 700px) {
......@@ -4107,6 +4442,12 @@ body {
}
}
}
.vac-all-item-inner {
margin-bottom: 50px;
}
.vacancy .vac-all-item-inner {
margin-bottom: 50px;
}
}
@media (max-width: 380px) {
......@@ -4125,3 +4466,7 @@ body {
transform: rotate(360deg);
}
}
.hidden {
display: none;
}
technology.html
View file @ d97843c7
......@@ -11,7 +11,7 @@
<link rel="stylesheet" href="styles/normalize.css">
</head>
<body class="body-subpage">
<div class="menu-hidden">
<div class="menu-hidden" style="background-image: url('img/menu_mask.svg');">
<div class="menu-hidden-main">
<div class="menu-hidden-mob">
<span class="menu-hidden-mob__title">Меню</span>
......@@ -19,7 +19,8 @@
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more menu-hidden-main-block__more--active" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Компания
</a>
<div class="menu-hidden-main-block__wrapper">
......@@ -33,6 +34,7 @@
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Продукция</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Газетная бумага</a>
......@@ -44,6 +46,7 @@
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Раскрытие информации</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Положения и сведения об обществе</a>
......@@ -56,6 +59,7 @@
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Устойчивое развитие</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Безопасность и охрана</a>
......@@ -66,14 +70,18 @@
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title"><img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Карьера</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Вакансии</a>
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title"><img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Закупки</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Лесосырьевое обеспечение</a>
......@@ -87,6 +95,7 @@
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Пресс-центр</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Новости</a>
......@@ -96,7 +105,9 @@
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title"><img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Контакты</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Московский филиал</a>
......@@ -104,7 +115,7 @@
</div>
</div>
</div>
<div class="menu-hidden-form">
<div class="menu-hidden-form" style="background-image: url('img/menu_mask.svg');">
<img class="menu-hidden-form__close" src="img/close.svg" alt="close button">
<form action="" class="form-ui">
<div class="form-ui-inner">
......@@ -120,11 +131,11 @@
<input class="form-ui-inner-checkbox__input" type="checkbox" id="checkbox2" checked>
<label for="checkbox2" class="form-ui-inner-checkbox__text">Согласен на обработку персональных данных</label>
</div>
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ">
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ" style="background-image: url('img/form_button.png');">
</div>
</div>
</form>
<a class="menu-hidden-form__button" href="#">ОБРАТНАЯ СВЯЗЬ</a>
<a class="menu-hidden-form__button" href="#" style="background-image: url('img/form_button.png');">ОБРАТНАЯ СВЯЗЬ</a>
<div class="menu-hidden-form-contact">
<div class="menu-hidden-form-contact-item">
<img class="menu-hidden-form-contact-item__icon" src="img/mail.svg" alt="mail icon">
......@@ -159,10 +170,11 @@
</div>
</div>
</div>
<header class="header header-subpage">
<header class="header header-subpage" style="background-image: url('img/header.jpg');">
<nav class="navbar">
<a class="navbar-logo" href="#">
<img src="img/logo.svg" alt="logo: volga">
<img class="navbar-logo__icon" src="img/logo.svg" alt="logo: volga">
<img class="navbar-logo__scroll hidden" src="img/logo_scroll.svg" alt="logo: volga">
</a>
<a class="navbar-burger" href="#">
<svg width="20" height="13" class="navbar-burger__icon">
......@@ -171,88 +183,207 @@
<span class="navbar-burger__title">Меню</span>
</a>
<ul class="menu">
<li class="menu-item">
<li class="menu-item" data-menu-id='1'>
<a class="menu-item__link" href="#">Компания</a>
<div class="submenu">
<a class="submenu-item">История предприятия</a>
<a class="submenu-item">Руководство</a>
<a class="submenu-item">Производство</a>
<a class="submenu-item">Стратегия развития</a>
<a class="submenu-item">Корпоративная политика</a>
<div class="submenu" data-submenu-id='1'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>История предприятия</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Руководство</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Производство</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Стратегия развития</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Корпоративная политика</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='2'>
<a class="menu-item__link" href="#">Продукция</a>
<div class="submenu">
<a class="submenu-item">Газетная бумага</a>
<a class="submenu-item">Бумага для перфорирования</a>
<a class="submenu-item">Пухлая бумага для печатных книг</a>
<a class="submenu-item">Упаковочная бумага</a>
<div class="submenu" data-submenu-id='2'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Газетная бумага</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Бумага для перфорирования</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Пухлая бумага для печатных книг</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Упаковочная бумага</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='3'>
<a class="menu-item__link" href="#">Раскрытие информации</a>
<div class="submenu">
<a class="submenu-item">Положение и сведения об обществе</a>
<a class="submenu-item">Годовой отчёт</a>
<a class="submenu-item">Акционерам</a>
<a class="submenu-item">Производство, передача и сбыт тепловой энергии, воды</a>
<a class="submenu-item">Специальная оценка условий труда</a>
<div class="submenu" data-submenu-id='3'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Положение и сведения об обществе
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Годовой отчёт
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Акционерам
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Производство, передача и сбыт тепловой энергии, воды
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Специальная оценка условий труда
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='4'>
<a class="menu-item__link" href="#">Устойчивое развитие</a>
<div class="submenu">
<a class="submenu-item">Безопасность и охрана</a>
<a class="submenu-item">Экология</a>
<a class="submenu-item">Ответственное леспользование</a>
<a class="submenu-item">Социальная политика</a>
<a class="submenu-item">Рейтинг и оценка</a>
<div class="submenu" data-submenu-id='4'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Безопасность и охрана
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Экология
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Ответственное леспользование
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Социальная политика
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Рейтинг и оценка
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='5'>
<a class="menu-item__link" href="#">Карьера</a>
<div class="submenu">
<a class="submenu-item">Вакансии</a>
<div class="submenu" data-submenu-id='5'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Вакансии
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='6'>
<a class="menu-item__link" href="#">Закупки</a>
<div class="submenu">
<a class="submenu-item">Лесосырьевое обеспечение</a>
<a class="submenu-item">Обращение к поставщикам и подрядчикам</a>
<a class="submenu-item">Закупочные процедуры</a>
<a class="submenu-item">Реализация невостребованного имущества и товаров</a>
<a class="submenu-item">Регистрация поставщиков</a>
<a class="submenu-item">Контакты по закупкам</a>
<div class="submenu" data-submenu-id='6'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Лесосырьевое обеспечение
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Обращение к поставщикам и подрядчикам
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Закупочные процедуры
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Реализация невостребованного имущества и товаров
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Регистрация поставщиков
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Контакты по закупкам
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='7'>
<a class="menu-item__link" href="#">Пресс-центр</a>
<div class="submenu">
<a class="submenu-item">Новости</a>
<a class="submenu-item">Фотогалерея</a>
<a class="submenu-item">Видеогалерея</a>
<a class="submenu-item">Корпоративная газета «Балахнинский бумажник»</a>
<div class="submenu" data-submenu-id='7'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Новости
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Фотогалерея
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Видеогалерея
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Корпоративная газета «Балахнинский бумажник»
</a>
</div>
</li>
<li class="menu-item">
<li class="menu-item" data-menu-id='8'>
<a class="menu-item__link" href="#">Контакты</a>
<div class="submenu">
<a class="submenu-item">Московский офис</a>
<a class="submenu-item">Нижегородский офис</a>
<div class="submenu" data-submenu-id='8'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Московский офис
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Нижегородский офис
</a>
</div>
</li>
</ul>
<ul class="second-menu">
<li class="second-menu-item search-link">
<a class="second-menu-item__link" href="#">
<li class="second-menu-item">
<a class="second-menu-item__link search-link" href="#">
<svg class="second-menu-item__link__icon" width="20" height="20" viewBox="0 0 20 20">
<use xlink:href="img/second_menu.svg#search"></use>
</svg>
</a>
</li>
<li class="second-menu-item">
<li class="second-menu-item" data-menu-id='9'>
<a class="second-menu-item__link" href="#">
<div class="second-menu-item__link__login">
<svg class="second-menu-item__link__icon" width="20" height="20" viewBox="0 0 20 20">
......@@ -261,12 +392,20 @@
<span>Войти</span>
</div>
</a>
<div class="submenu second-submenu">
<a class="submenu-item">Поставщикам</a>
<a class="submenu-item">Покупателям</a>
<div class="submenu second-submenu" data-submenu-id='9'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Поставщикам
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Покупателям
</a>
</div>
</li>
<li class="second-menu-item">
<li class="second-menu-item" data-menu-id='10'>
<a class="second-menu-item__link" href="#">
<div class="second-menu-item__link__lang">
<span>EN</span>
......@@ -275,9 +414,17 @@
</svg>
</div>
</a>
<div class="submenu second-submenu">
<a class="submenu-item">RU</a>
<a class="submenu-item">EN</a>
<div class="submenu second-submenu" data-submenu-id='10'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>RU
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>EN
</a>
</div>
</li>
</ul>
......@@ -290,7 +437,7 @@
</svg>
</a>
<input class="search__field" type="search" placeholder="Поиск по сайту">
<input class="search__button" type="submit" value="НАЙТИ">
<input class="search__button" type="submit" value="НАЙТИ" style="background-image: url(img/button_mask.svg);">
</div>
<div class="separator"></div>
<ul class="second-mob">
......@@ -329,7 +476,10 @@
<section class="technology">
<div class="technology-image">
<img src="img/technology_photo.jpg" alt="photo">
<a class="technology-item technology-item-1" href="#"></a>
<a class="technology-item technology-item-1" href="#">
<img class="technology-item__icon" src="img/technology+.svg" alt="more">
<img class="technology-item__icon--active" src="img/technology+white.svg" alt="more">
</a>
<div class="technology-item-block technology-item-1">
<p class="technology-item-block__title">Древесно-<br>подготовительный цех</p>
<p class="technology-item-block__text">Технологический процесс в АО «Волга» начинается с древесно-подготовительного цеха.
......@@ -342,20 +492,22 @@
<br><br>
Там щепа должна «отлежаться» в течение двух недель под воздействием солнца и воздуха для частичного расщепления смол, содержащихся в ней. Это позволяет лучше перерабатывать ее в бумажное волокно и исключать смоляные затруднения при производстве бумаги.</p>
</div>
<a class="technology-item technology-item-2" href="#"></a>
<a class="technology-item technology-item-2" href="#">
<img class="technology-item__icon" src="img/technology+.svg" alt="more">
<img class="technology-item__icon--active" src="img/technology+white.svg" alt="more">
</a>
<div class="technology-item-block technology-item-2">
<p class="technology-item-block__title">Древесно-<br>подготовительный цех</p>
<p class="technology-item-block__text">Технологический процесс в АО «Волга» начинается с древесно-подготовительного цеха.
<br><br>
Сюда поступает автотранспортом, по железной дороге и баржами по воде в сезон навигации товарная щепа и еловая древесина, которая распиливается, освобождается от коры и измельчается до получения технологической щепы в рубительных машинах.
<br><br>
Часть привозной древесины складируется на специальной площадке в штабельное хранение для создания необходимого запаса сырья на межсезонный период распутицы.
<br><br>
Из древесно-подготовительного цеха технологическая щепа отправляется по автоматической линии транспортеров на кучевое хранение на специально отведенную для этого площадку.
<br><br>
Там щепа должна «отлежаться» в течение двух недель под воздействием солнца и воздуха для частичного расщепления смол, содержащихся в ней. Это позволяет лучше перерабатывать ее в бумажное волокно и исключать смоляные затруднения при производстве бумаги.</p>
</div>
<a class="technology-item technology-item-3" href="#"></a>
<p class="technology-item-block__text">Технологический процесс в АО «Волга» начинается с древесно-подготовительного цеха.</p>
<p class="technology-item-block__text">Сюда поступает автотранспортом, по железной дороге и баржами по воде в сезон навигации товарная щепа и еловая древесина, которая распиливается, освобождается от коры и измельчается до получения технологической щепы в рубительных машинах.</p>
<p class="technology-item-block__text">Часть привозной древесины складируется на специальной площадке в штабельное хранение для создания необходимого запаса сырья на межсезонный период распутицы.</p>
<p class="technology-item-block__text">Из древесно-подготовительного цеха технологическая щепа отправляется по автоматической линии транспортеров на кучевое хранение на специально отведенную для этого площадку.</p>
<p class="technology-item-block__text">Там щепа должна «отлежаться» в течение двух недель под воздействием солнца и воздуха для частичного расщепления смол, содержащихся в ней. Это позволяет лучше перерабатывать ее в бумажное волокно и исключать смоляные затруднения при производстве бумаги.</p>
</div>
<a class="technology-item technology-item-3" href="#">
<img class="technology-item__icon" src="img/technology+.svg" alt="more">
<img class="technology-item__icon--active" src="img/technology+white.svg" alt="more">
</a>
<div class="technology-item-block technology-item-3">
<p class="technology-item-block__title">Древесно-<br>подготовительный цех</p>
<p class="technology-item-block__text">Технологический процесс в АО «Волга» начинается с древесно-подготовительного цеха.
......@@ -368,7 +520,10 @@
<br><br>
Там щепа должна «отлежаться» в течение двух недель под воздействием солнца и воздуха для частичного расщепления смол, содержащихся в ней. Это позволяет лучше перерабатывать ее в бумажное волокно и исключать смоляные затруднения при производстве бумаги.</p>
</div>
<a class="technology-item technology-item-4" href="#"></a>
<a class="technology-item technology-item-4" href="#">
<img class="technology-item__icon" src="img/technology+.svg" alt="more">
<img class="technology-item__icon--active" src="img/technology+white.svg" alt="more">
</a>
<div class="technology-item-block technology-item-4">
<p class="technology-item-block__title">Древесно-<br>подготовительный цех</p>
<p class="technology-item-block__text">Технологический процесс в АО «Волга» начинается с древесно-подготовительного цеха.
......@@ -381,7 +536,10 @@
<br><br>
Там щепа должна «отлежаться» в течение двух недель под воздействием солнца и воздуха для частичного расщепления смол, содержащихся в ней. Это позволяет лучше перерабатывать ее в бумажное волокно и исключать смоляные затруднения при производстве бумаги.</p>
</div>
<a class="technology-item technology-item-5" href="#"></a>
<a class="technology-item technology-item-5" href="#">
<img class="technology-item__icon" src="img/technology+.svg" alt="more">
<img class="technology-item__icon--active" src="img/technology+white.svg" alt="more">
</a>
<div class="technology-item-block technology-item-5">
<p class="technology-item-block__title">Древесно-<br>подготовительный цех</p>
<p class="technology-item-block__text">Технологический процесс в АО «Волга» начинается с древесно-подготовительного цеха.
......@@ -404,18 +562,18 @@
</div>
</section>
<section class="form form-subpage section-subpage">
<form action="" class="form-ui">
<form action="" class="form-ui" style="background-image: url('img/form_mask.svg');">
<div class="form-ui-inner">
<div class="form-ui-inner-heading">
<span class="form-ui-inner-heading__title">Обратная связь</span>
<span class="form-ui-inner-heading__text">Оставьте свои контакты и мы свяжемся с Вами!</span>
</div>
<div class="form-ui-inner-content">
<input class="form-ui-inner-content__input" type="text" placeholder="Ваше имя">
<input class="form-ui-inner-content__input" type="tel" placeholder="Телефон">
<input class="form-ui-inner-content__input" type="email" placeholder="E-mail">
<input class="form-ui-inner-content__input" type="text" placeholder="Ваше имя" required>
<input class="form-ui-inner-content__input" type="tel" placeholder="Телефон" pattern="(\+?\d[- .]*){7,13}" required>
<input class="form-ui-inner-content__input" type="email" placeholder="E-mail" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" required>
<input class="form-ui-inner-content__input" type="text" placeholder="Сообщение">
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ">
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ" style="background-image: url('img/form_button.png');">
</div>
<div class="form-ui-inner-checkbox">
<input class="form-ui-inner-checkbox__input" type="checkbox" id="checkbox1" checked>
......@@ -424,7 +582,7 @@
</div>
</form>
</section>
<footer class="footer">
<footer class="footer" style="background-image: url('img/footer.jpg');">
<nav class="footer-navbar">
<a class="footer-navbar-logo" href="#">
<img src="img/logo.svg" alt="logo: volga">
......@@ -471,8 +629,5 @@
</div>
</footer>
<script defer src="js/index.js"></script>
<script defer src="js/menu_subpage.js"></script>
<script defer src="js/smothScroll.js"></script>
<script defer src="js/technology.js"></script>
</body>
</html>
\ No newline at end of file
vacancy.html 0 → 100644
View file @ d97843c7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Вакансии</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/normalize.css">
</head>
<body class="body-subpage">
<div class="menu-hidden" style="background-image: url('img/menu_mask.svg');">
<div class="menu-hidden-main">
<div class="menu-hidden-mob">
<span class="menu-hidden-mob__title">Меню</span>
<img class="menu-hidden-mob__close" src="img/close_mob.svg" alt="close button">
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Компания
</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">История предприятия</a>
<a class="menu-hidden-main-block__subtitle">Руководство</a>
<a class="menu-hidden-main-block__subtitle">Производство</a>
<a class="menu-hidden-main-block__subtitle">Стратегия развития</a>
<a class="menu-hidden-main-block__subtitle">Корпоративная политика</a>
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Продукция</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Газетная бумага</a>
<a class="menu-hidden-main-block__subtitle">Бумага для гофрирования</a>
<a class="menu-hidden-main-block__subtitle">Пухлая бумага для печатных книг</a>
<a class="menu-hidden-main-block__subtitle">Упаковочная бумага</a>
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Раскрытие информации</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Положения и сведения об обществе</a>
<a class="menu-hidden-main-block__subtitle">Годовой отчет</a>
<a class="menu-hidden-main-block__subtitle">Акционерам</a>
<a class="menu-hidden-main-block__subtitle">Производство, передача и сбыт тепловой энергии, воды</a>
<a class="menu-hidden-main-block__subtitle">Специальная оценка условий труда</a>
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Устойчивое развитие</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Безопасность и охрана</a>
<a class="menu-hidden-main-block__subtitle">Экология</a>
<a class="menu-hidden-main-block__subtitle">Ответственное лесопользование</a>
<a class="menu-hidden-main-block__subtitle">Социальная политика</a>
<a class="menu-hidden-main-block__subtitle">Рейтинг и оценка</a>
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Карьера</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Вакансии</a>
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Закупки</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Лесосырьевое обеспечение</a>
<a class="menu-hidden-main-block__subtitle">Обращение к поставщикам и подрядчикам</a>
<a class="menu-hidden-main-block__subtitle">Закупочные процедуры</a>
<a class="menu-hidden-main-block__subtitle">Реализация невостребованного имущества и товаров</a>
<a class="menu-hidden-main-block__subtitle">Регистрация поставщиков</a>
<a class="menu-hidden-main-block__subtitle">Контакты по закупкам</a>
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Пресс-центр</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Новости</a>
<a class="menu-hidden-main-block__subtitle">Фотогалерея</a>
<a class="menu-hidden-main-block__subtitle">Видеогалерея</a>
<a class="menu-hidden-main-block__subtitle">Корпоративная газета «Балахнинский бумажник»</a>
</div>
</div>
<div class="menu-hidden-main-block">
<a class="menu-hidden-main-block__title">
<img class="menu-hidden-main-block__more" src="img/+.svg" alt="more">
<img class="menu-hidden-main-block__less hidden" src="img/-.svg" alt="less">
Контакты</a>
<div class="menu-hidden-main-block__wrapper">
<a class="menu-hidden-main-block__subtitle">Московский филиал</a>
<a class="menu-hidden-main-block__subtitle">Нижегородский филиал</a>
</div>
</div>
</div>
<div class="menu-hidden-form" style="background-image: url('img/menu_mask.svg');">
<img class="menu-hidden-form__close" src="img/close.svg" alt="close button">
<form action="" class="form-ui">
<div class="form-ui-inner">
<div class="form-ui-inner-heading">
<span class="form-ui-inner-heading__title">Обратная связь</span>
</div>
<div class="form-ui-inner-content">
<input class="form-ui-inner-content__input" type="text" placeholder="Ваше имя">
<input class="form-ui-inner-content__input" type="tel" placeholder="Телефон">
<input class="form-ui-inner-content__input" type="email" placeholder="E-mail">
<input class="form-ui-inner-content__input" type="text" placeholder="Сообщение">
<div class="form-ui-inner-checkbox">
<input class="form-ui-inner-checkbox__input" type="checkbox" id="checkbox2" checked>
<label for="checkbox2" class="form-ui-inner-checkbox__text">Согласен на обработку персональных данных</label>
</div>
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ" style="background-image: url('img/form_button.png');">
</div>
</div>
</form>
<a class="menu-hidden-form__button" href="#" style="background-image: url('img/form_button.png');">ОБРАТНАЯ СВЯЗЬ</a>
<div class="menu-hidden-form-contact">
<div class="menu-hidden-form-contact-item">
<img class="menu-hidden-form-contact-item__icon" src="img/mail.svg" alt="mail icon">
<a class="menu-hidden-form-contact-item__link" href="mailto:info@volga-paper.ru">info@volga-paper.ru</a>
</div>
<div class="menu-hidden-form-contact-item">
<img class="menu-hidden-form-contact-item__icon" src="img/phone.svg" alt="phone icon">
<a class="menu-hidden-form-contact-item__link" href="tel:+78314493316">+7 (83144) 9-33-16</a>
</div>
</div>
<div class="menu-hidden-form-social">
<a href="#" class="menu-hidden-form-social__link">
<svg class="menu-hidden-form-social__social" width="20" height="13">
<use xlink:href="img/social.svg#vk"></use>
</svg>
</a>
<a href="#" class="menu-hidden-form-social__link">
<svg class="menu-hidden-form-social__social" width="17" height="17">
<use xlink:href="img/social.svg#fb"></use>
</svg>
</a>
<a href="#" class="menu-hidden-form-social__link">
<svg class="menu-hidden-form-social__social" width="20" height="18">
<use xlink:href="img/social.svg#yt"></use>
</svg>
</a>
<a href="#" class="menu-hidden-form-social__link">
<svg class="menu-hidden-form-social__social" width="19" height="19">
<use xlink:href="img/social.svg#inst"></use>
</svg>
</a>
</div>
</div>
</div>
<header class="header header-subpage" style="background-image: url('img/header.jpg');">
<nav class="navbar">
<a class="navbar-logo" href="#">
<img class="navbar-logo__icon" src="img/logo.svg" alt="logo: volga">
<img class="navbar-logo__scroll hidden" src="img/logo_scroll.svg" alt="logo: volga">
</a>
<a class="navbar-burger" href="#">
<svg width="20" height="13" class="navbar-burger__icon">
<use xlink:href="img/burger.svg#burger"></use>
</svg>
<span class="navbar-burger__title">Меню</span>
</a>
<ul class="menu">
<li class="menu-item" data-menu-id='1'>
<a class="menu-item__link" href="#">Компания</a>
<div class="submenu" data-submenu-id='1'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>История предприятия</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Руководство</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Производство</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Стратегия развития</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Корпоративная политика</a>
</div>
</li>
<li class="menu-item" data-menu-id='2'>
<a class="menu-item__link" href="#">Продукция</a>
<div class="submenu" data-submenu-id='2'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Газетная бумага</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Бумага для перфорирования</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Пухлая бумага для печатных книг</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Упаковочная бумага</a>
</div>
</li>
<li class="menu-item" data-menu-id='3'>
<a class="menu-item__link" href="#">Раскрытие информации</a>
<div class="submenu" data-submenu-id='3'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Положение и сведения об обществе
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Годовой отчёт
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Акционерам
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Производство, передача и сбыт тепловой энергии, воды
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Специальная оценка условий труда
</a>
</div>
</li>
<li class="menu-item" data-menu-id='4'>
<a class="menu-item__link" href="#">Устойчивое развитие</a>
<div class="submenu" data-submenu-id='4'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Безопасность и охрана
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Экология
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Ответственное леспользование
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Социальная политика
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Рейтинг и оценка
</a>
</div>
</li>
<li class="menu-item" data-menu-id='5'>
<a class="menu-item__link" href="#">Карьера</a>
<div class="submenu" data-submenu-id='5'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Вакансии
</a>
</div>
</li>
<li class="menu-item" data-menu-id='6'>
<a class="menu-item__link" href="#">Закупки</a>
<div class="submenu" data-submenu-id='6'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Лесосырьевое обеспечение
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Обращение к поставщикам и подрядчикам
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Закупочные процедуры
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Реализация невостребованного имущества и товаров
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Регистрация поставщиков
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Контакты по закупкам
</a>
</div>
</li>
<li class="menu-item" data-menu-id='7'>
<a class="menu-item__link" href="#">Пресс-центр</a>
<div class="submenu" data-submenu-id='7'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Новости
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Фотогалерея
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Видеогалерея
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Корпоративная газета «Балахнинский бумажник»
</a>
</div>
</li>
<li class="menu-item" data-menu-id='8'>
<a class="menu-item__link" href="#">Контакты</a>
<div class="submenu" data-submenu-id='8'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Московский офис
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Нижегородский офис
</a>
</div>
</li>
</ul>
<ul class="second-menu">
<li class="second-menu-item">
<a class="second-menu-item__link search-link" href="#">
<svg class="second-menu-item__link__icon" width="20" height="20" viewBox="0 0 20 20">
<use xlink:href="img/second_menu.svg#search"></use>
</svg>
</a>
</li>
<li class="second-menu-item" data-menu-id='9'>
<a class="second-menu-item__link" href="#">
<div class="second-menu-item__link__login">
<svg class="second-menu-item__link__icon" width="20" height="20" viewBox="0 0 20 20">
<use xlink:href="img/second_menu.svg#login"></use>
</svg>
<span>Войти</span>
</div>
</a>
<div class="submenu second-submenu" data-submenu-id='9'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Поставщикам
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>Покупателям
</a>
</div>
</li>
<li class="second-menu-item" data-menu-id='10'>
<a class="second-menu-item__link" href="#">
<div class="second-menu-item__link__lang">
<span>EN</span>
<svg class="second-menu-item__link__icon" width="8" height="6" viewBox="0 0 8 6">
<use xlink:href="img/second_menu.svg#down"></use>
</svg>
</div>
</a>
<div class="submenu second-submenu" data-submenu-id='10'>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>RU
</a>
<a class="submenu-item">
<svg class="submenu-item__icon">
<use xlink:href="img/points_style.svg#points_style"></use>
</svg>EN
</a>
</div>
</li>
</ul>
</nav>
<div class="search">
<a class="search-close" href="#">
Закрыть
<svg class="search-close__icon">
<use xlink:href="img/search_close.svg#search_close"></use>
</svg>
</a>
<input class="search__field" type="search" placeholder="Поиск по сайту">
<input class="search__button" type="submit" value="НАЙТИ" style="background-image: url(img/button_mask.svg);">
</div>
<div class="separator"></div>
<ul class="second-mob">
<li class="second-mob-item">
<a class="second-mob-item__link" href="#">
<svg class="second-mob-item__link__icon" width="20" height="20" viewBox="0 0 20 20">
<use xlink:href="img/second_menu.svg#search"></use>
</svg>
<span>Поиск</span>
</a>
</li>
<li class="second-mob-item">
<a class="second-mob-item__link" href="#">
<div class="second-mob-item__link__login">
<svg class="second-mob-item__link__icon" width="20" height="20" viewBox="0 0 20 20">
<use xlink:href="img/second_menu.svg#login"></use>
</svg>
<span>Войти</span>
</div>
</a>
</li>
</ul>
<div class="heading-other">
<div class="heading-other-nav">
<a href="#" class="heading-other-nav__page">Главная</a>
<img class="heading-other-nav__icon" src="img/heading_nav.svg" alt="nav icon">
<a href="#" class="heading-other-nav__page">Карьера</a>
<img class="heading-other-nav__icon" src="img/heading_nav.svg" alt="nav icon">
<a href="#" class="heading-other-nav__page heading-other-nav__page--current">Вакансии</a>
</div>
<h1 class="heading-other__title">Вакансии</h1>
</div>
</header>
<section class="vacancy" style="background-image: url('img/company_mask.svg');">
<div class="vac-all vacancy-all">
<div class="vac-all-item">
<div class="vac-all-item-heading">
<svg class="vac__icon vac__plus">
<use xlink:href="img/vac+.svg#vac+"></use>
</svg>
<svg class="vac__icon vac__minus">
<use xlink:href="img/vac-.svg#vac-"></use>
</svg>
<h4 class="vac__title">Контролер КП</h4>
<p class="vac__salary">30 000 руб.</p>
</div>
<div class="vac-all-item-inner">
<div class="vac-wrapper">
<p class="vac__bold">Требуемый опыт работы: <span class="vac__text">1—3 года</span></p>
<p class="vac__bold">Полная занятость, сменный график</p>
</div>
<div class="vac-wrapper">
<p class="vac__bold">Обязанности:</p>
</div>
<div class="vac-wrapper">
<ul class="vac-list" style="list-style: url('img/points_style_list.svg');">
<li class="vac-list__item">Контроль за соблюдением режима</li>
<li class="vac-list__item">Обеспечение безопасности на территории поста</li>
</ul>
</div>
<div class="vac-wrapper">
<p class="vac__bold">Требования:</p>
</div>
<div class="vac-wrapper">
<ul class="vac-list" style="list-style: url('img/points_style_list.svg');">
<li class="vac-list__item">Добросовестность, ответственность.</li>
</ul>
</div>
<div class="vac-wrapper">
<p class="vac__bold">Условия:</p>
<p class="vac__text">График: сутки через трое</p>
<p class="vac__text">Работа по адресу: г.Воронеж, ул. Б.Хмельницкого, д,51 а</p>
<p class="vac__text">Оформление согласно ТК РФ.</p>
</div>
<div class="vac-buttons">
<a class="vac__button" href="#" style="background-image: url(img/button_mask.svg);">ОТКЛИКНУТЬСЯ</a>
<a class="vac__call" href="#">
<svg class="vac__call__icon">
<use xlink:href="img/vac_call.svg#vac_call"></use>
</svg>
ПОЗВОНИТЬ</a>
</div>
</div>
</div>
<div class="vac-all-item">
<div class="vac-all-item-heading">
<svg class="vac__icon vac__plus">
<use xlink:href="img/vac+.svg#vac+"></use>
</svg>
<svg class="vac__icon vac__minus">
<use xlink:href="img/vac-.svg#vac-"></use>
</svg>
<h4 class="vac__title">Электромонтер диспетчерского оборудования и телеавтоматики</h4>
<p class="vac__salary">30 000 руб.</p>
</div>
<div class="vac-all-item-inner">
<div class="vac-wrapper">
<p class="vac__bold">Требуемый опыт работы: <span class="vac__text">1—3 года</span></p>
<p class="vac__bold">Полная занятость, сменный график</p>
</div>
<div class="vac-wrapper">
<p class="vac__bold">Обязанности:</p>
</div>
<div class="vac-wrapper">
<ul class="vac-list" style="list-style: url('img/points_style_list.svg');">
<li class="vac-list__item">Контроль за соблюдением режима</li>
<li class="vac-list__item">Обеспечение безопасности на территории поста</li>
</ul>
</div>
<div class="vac-wrapper">
<p class="vac__bold">Требования:</p>
</div>
<div class="vac-wrapper">
<ul class="vac-list" style="list-style: url('img/points_style_list.svg');">
<li class="vac-list__item">Добросовестность, ответственность.</li>
</ul>
</div>
<div class="vac-wrapper">
<p class="vac__bold">Условия:</p>
<p class="vac__text">График: сутки через трое</p>
<p class="vac__text">Работа по адресу: г.Воронеж, ул. Б.Хмельницкого, д,51 а</p>
<p class="vac__text">Оформление согласно ТК РФ.</p>
</div>
<div class="vac-buttons">
<a class="vac__button" href="#" style="background-image: url(img/button_mask.svg);">ОТКЛИКНУТЬСЯ</a>
<a class="vac__call" href="#">
<svg class="vac__call__icon">
<use xlink:href="img/vac_call.svg#vac_call"></use>
</svg>
ПОЗВОНИТЬ</a>
</div>
</div>
</div>
<div class="vac-all-item">
<div class="vac-all-item-heading">
<svg class="vac__icon vac__plus">
<use xlink:href="img/vac+.svg#vac+"></use>
</svg>
<svg class="vac__icon vac__minus">
<use xlink:href="img/vac-.svg#vac-"></use>
</svg>
<h4 class="vac__title">Машинист БДМ</h4>
<p class="vac__salary">30 000 руб.</p>
</div>
<div class="vac-all-item-inner">
<div class="vac-wrapper">
<p class="vac__bold">Требуемый опыт работы: <span class="vac__text">1—3 года</span></p>
<p class="vac__bold">Полная занятость, сменный график</p>
</div>
<div class="vac-wrapper">
<p class="vac__bold">Обязанности:</p>
</div>
<div class="vac-wrapper">
<ul class="vac-list" style="list-style: url('img/points_style_list.svg');">
<li class="vac-list__item">Контроль за соблюдением режима</li>
<li class="vac-list__item">Обеспечение безопасности на территории поста</li>
</ul>
</div>
<div class="vac-wrapper">
<p class="vac__bold">Требования:</p>
</div>
<div class="vac-wrapper">
<ul class="vac-list" style="list-style: url('img/points_style_list.svg');">
<li class="vac-list__item">Добросовестность, ответственность.</li>
</ul>
</div>
<div class="vac-wrapper">
<p class="vac__bold">Условия:</p>
<p class="vac__text">График: сутки через трое</p>
<p class="vac__text">Работа по адресу: г.Воронеж, ул. Б.Хмельницкого, д,51 а</p>
<p class="vac__text">Оформление согласно ТК РФ.</p>
</div>
<div class="vac-buttons">
<a class="vac__button" href="#" style="background-image: url(img/button_mask.svg);">ОТКЛИКНУТЬСЯ</a>
<a class="vac__call" href="#">
<svg class="vac__call__icon">
<use xlink:href="img/vac_call.svg#vac_call"></use>
</svg>
ПОЗВОНИТЬ</a>
</div>
</div>
</div>
<div class="vac-all-item">
<div class="vac-all-item-heading">
<svg class="vac__icon vac__plus">
<use xlink:href="img/vac+.svg#vac+"></use>
</svg>
<svg class="vac__icon vac__minus">
<use xlink:href="img/vac-.svg#vac-"></use>
</svg>
<h4 class="vac__title">Слесарь по ремонту и обслуживанию перегрузочных машин</h4>
<p class="vac__salary">30 000 руб.</p>
</div>
<div class="vac-all-item-inner">
<div class="vac-wrapper">
<p class="vac__bold">Требуемый опыт работы: <span class="vac__text">1—3 года</span></p>
<p class="vac__bold">Полная занятость, сменный график</p>
</div>
<div class="vac-wrapper">
<p class="vac__bold">Обязанности:</p>
</div>
<div class="vac-wrapper">
<ul class="vac-list" style="list-style: url('img/points_style_list.svg');">
<li class="vac-list__item">Контроль за соблюдением режима</li>
<li class="vac-list__item">Обеспечение безопасности на территории поста</li>
</ul>
</div>
<div class="vac-wrapper">
<p class="vac__bold">Требования:</p>
</div>
<div class="vac-wrapper">
<ul class="vac-list" style="list-style: url('img/points_style_list.svg');">
<li class="vac-list__item">Добросовестность, ответственность.</li>
</ul>
</div>
<div class="vac-wrapper">
<p class="vac__bold">Условия:</p>
<p class="vac__text">График: сутки через трое</p>
<p class="vac__text">Работа по адресу: г.Воронеж, ул. Б.Хмельницкого, д,51 а</p>
<p class="vac__text">Оформление согласно ТК РФ.</p>
</div>
<div class="vac-buttons">
<a class="vac__button" href="#" style="background-image: url(img/button_mask.svg);">ОТКЛИКНУТЬСЯ</a>
<a class="vac__call" href="#">
<svg class="vac__call__icon">
<use xlink:href="img/vac_call.svg#vac_call"></use>
</svg>
ПОЗВОНИТЬ</a>
</div>
</div>
</div>
<div class="vac-all-item">
<div class="vac-all-item-heading">
<svg class="vac__icon vac__plus">
<use xlink:href="img/vac+.svg#vac+"></use>
</svg>
<svg class="vac__icon vac__minus">
<use xlink:href="img/vac-.svg#vac-"></use>
</svg>
<h4 class="vac__title">Специалист по связям с общественностью</h4>
<p class="vac__salary">30 000 руб.</p>
</div>
<div class="vac-all-item-inner">
<div class="vac-wrapper">
<p class="vac__bold">Требуемый опыт работы: <span class="vac__text">1—3 года</span></p>
<p class="vac__bold">Полная занятость, сменный график</p>
</div>
<div class="vac-wrapper">
<p class="vac__bold">Обязанности:</p>
</div>
<div class="vac-wrapper">
<ul class="vac-list" style="list-style: url('img/points_style_list.svg');">
<li class="vac-list__item">Контроль за соблюдением режима</li>
<li class="vac-list__item">Обеспечение безопасности на территории поста</li>
</ul>
</div>
<div class="vac-wrapper">
<p class="vac__bold">Требования:</p>
</div>
<div class="vac-wrapper">
<ul class="vac-list" style="list-style: url('img/points_style_list.svg');">
<li class="vac-list__item">Добросовестность, ответственность.</li>
</ul>
</div>
<div class="vac-wrapper">
<p class="vac__bold">Условия:</p>
<p class="vac__text">График: сутки через трое</p>
<p class="vac__text">Работа по адресу: г.Воронеж, ул. Б.Хмельницкого, д,51 а</p>
<p class="vac__text">Оформление согласно ТК РФ.</p>
</div>
<div class="vac-buttons">
<a class="vac__button" href="#" style="background-image: url(img/button_mask.svg);">ОТКЛИКНУТЬСЯ</a>
<a class="vac__call" href="#">
<svg class="vac__call__icon">
<use xlink:href="img/vac_call.svg#vac_call"></use>
</svg>
ПОЗВОНИТЬ</a>
</div>
</div>
</div>
<div class="vac-all-item">
<div class="vac-all-item-heading">
<svg class="vac__icon vac__plus">
<use xlink:href="img/vac+.svg#vac+"></use>
</svg>
<svg class="vac__icon vac__minus">
<use xlink:href="img/vac-.svg#vac-"></use>
</svg>
<h4 class="vac__title">Мастер по ремонту оборудования</h4>
<p class="vac__salary">30 000 руб.</p>
</div>
<div class="vac-all-item-inner">
<div class="vac-wrapper">
<p class="vac__bold">Требуемый опыт работы: <span class="vac__text">1—3 года</span></p>
<p class="vac__bold">Полная занятость, сменный график</p>
</div>
<div class="vac-wrapper">
<p class="vac__bold">Обязанности:</p>
</div>
<div class="vac-wrapper">
<ul class="vac-list" style="list-style: url('img/points_style_list.svg');">
<li class="vac-list__item">Контроль за соблюдением режима</li>
<li class="vac-list__item">Обеспечение безопасности на территории поста</li>
</ul>
</div>
<div class="vac-wrapper">
<p class="vac__bold">Требования:</p>
</div>
<div class="vac-wrapper">
<ul class="vac-list" style="list-style: url('img/points_style_list.svg');">
<li class="vac-list__item">Добросовестность, ответственность.</li>
</ul>
</div>
<div class="vac-wrapper">
<p class="vac__bold">Условия:</p>
<p class="vac__text">График: сутки через трое</p>
<p class="vac__text">Работа по адресу: г.Воронеж, ул. Б.Хмельницкого, д,51 а</p>
<p class="vac__text">Оформление согласно ТК РФ.</p>
</div>
<div class="vac-buttons">
<a class="vac__button" href="#" style="background-image: url(img/button_mask.svg);">ОТКЛИКНУТЬСЯ</a>
<a class="vac__call" href="#">
<svg class="vac__call__icon">
<use xlink:href="img/vac_call.svg#vac_call"></use>
</svg>
ПОЗВОНИТЬ</a>
</div>
</div>
</div>
<div class="vac-all-item">
<div class="vac-all-item-heading">
<svg class="vac__icon vac__plus">
<use xlink:href="img/vac+.svg#vac+"></use>
</svg>
<svg class="vac__icon vac__minus">
<use xlink:href="img/vac-.svg#vac-"></use>
</svg>
<h4 class="vac__title">Начальник смены</h4>
<p class="vac__salary">30 000 руб.</p>
</div>
<div class="vac-all-item-inner">
<div class="vac-wrapper">
<p class="vac__bold">Требуемый опыт работы: <span class="vac__text">1—3 года</span></p>
<p class="vac__bold">Полная занятость, сменный график</p>
</div>
<div class="vac-wrapper">
<p class="vac__bold">Обязанности:</p>
</div>
<div class="vac-wrapper">
<ul class="vac-list" style="list-style: url('img/points_style_list.svg');">
<li class="vac-list__item">Контроль за соблюдением режима</li>
<li class="vac-list__item">Обеспечение безопасности на территории поста</li>
</ul>
</div>
<div class="vac-wrapper">
<p class="vac__bold">Требования:</p>
</div>
<div class="vac-wrapper">
<ul class="vac-list" style="list-style: url('img/points_style_list.svg');">
<li class="vac-list__item">Добросовестность, ответственность.</li>
</ul>
</div>
<div class="vac-wrapper">
<p class="vac__bold">Условия:</p>
<p class="vac__text">График: сутки через трое</p>
<p class="vac__text">Работа по адресу: г.Воронеж, ул. Б.Хмельницкого, д,51 а</p>
<p class="vac__text">Оформление согласно ТК РФ.</p>
</div>
<div class="vac-buttons">
<a class="vac__button" href="#" style="background-image: url(img/button_mask.svg);">ОТКЛИКНУТЬСЯ</a>
<a class="vac__call" href="#">
<svg class="vac__call__icon">
<use xlink:href="img/vac_call.svg#vac_call"></use>
</svg>
ПОЗВОНИТЬ</a>
</div>
</div>
</div>
<div class="vac-all-item">
<div class="vac-all-item-heading">
<svg class="vac__icon vac__plus">
<use xlink:href="img/vac+.svg#vac+"></use>
</svg>
<svg class="vac__icon vac__minus">
<use xlink:href="img/vac-.svg#vac-"></use>
</svg>
<h4 class="vac__title">Старший бухгалтер</h4>
<p class="vac__salary">30 000 руб.</p>
</div>
<div class="vac-all-item-inner">
<div class="vac-wrapper">
<p class="vac__bold">Требуемый опыт работы: <span class="vac__text">1—3 года</span></p>
<p class="vac__bold">Полная занятость, сменный график</p>
</div>
<div class="vac-wrapper">
<p class="vac__bold">Обязанности:</p>
</div>
<div class="vac-wrapper">
<ul class="vac-list" style="list-style: url('img/points_style_list.svg');">
<li class="vac-list__item">Контроль за соблюдением режима</li>
<li class="vac-list__item">Обеспечение безопасности на территории поста</li>
</ul>
</div>
<div class="vac-wrapper">
<p class="vac__bold">Требования:</p>
</div>
<div class="vac-wrapper">
<ul class="vac-list" style="list-style: url('img/points_style_list.svg');">
<li class="vac-list__item">Добросовестность, ответственность.</li>
</ul>
</div>
<div class="vac-wrapper">
<p class="vac__bold">Условия:</p>
<p class="vac__text">График: сутки через трое</p>
<p class="vac__text">Работа по адресу: г.Воронеж, ул. Б.Хмельницкого, д,51 а</p>
<p class="vac__text">Оформление согласно ТК РФ.</p>
</div>
<div class="vac-buttons">
<a class="vac__button" href="#" style="background-image: url(img/button_mask.svg);">ОТКЛИКНУТЬСЯ</a>
<a class="vac__call" href="#">
<svg class="vac__call__icon">
<use xlink:href="img/vac_call.svg#vac_call"></use>
</svg>
ПОЗВОНИТЬ</a>
</div>
</div>
</div>
<div class="vac-all-item">
<div class="vac-all-item-heading">
<svg class="vac__icon vac__plus">
<use xlink:href="img/vac+.svg#vac+"></use>
</svg>
<svg class="vac__icon vac__minus">
<use xlink:href="img/vac-.svg#vac-"></use>
</svg>
<h4 class="vac__title">Мастер смены</h4>
<p class="vac__salary">30 000 руб.</p>
</div>
<div class="vac-all-item-inner">
<div class="vac-wrapper">
<p class="vac__bold">Требуемый опыт работы: <span class="vac__text">1—3 года</span></p>
<p class="vac__bold">Полная занятость, сменный график</p>
</div>
<div class="vac-wrapper">
<p class="vac__bold">Обязанности:</p>
</div>
<div class="vac-wrapper">
<ul class="vac-list" style="list-style: url('img/points_style_list.svg');">
<li class="vac-list__item">Контроль за соблюдением режима</li>
<li class="vac-list__item">Обеспечение безопасности на территории поста</li>
</ul>
</div>
<div class="vac-wrapper">
<p class="vac__bold">Требования:</p>
</div>
<div class="vac-wrapper">
<ul class="vac-list" style="list-style: url('img/points_style_list.svg');">
<li class="vac-list__item">Добросовестность, ответственность.</li>
</ul>
</div>
<div class="vac-wrapper">
<p class="vac__bold">Условия:</p>
<p class="vac__text">График: сутки через трое</p>
<p class="vac__text">Работа по адресу: г.Воронеж, ул. Б.Хмельницкого, д,51 а</p>
<p class="vac__text">Оформление согласно ТК РФ.</p>
</div>
<div class="vac-buttons">
<a class="vac__button" href="#" style="background-image: url(img/button_mask.svg);">ОТКЛИКНУТЬСЯ</a>
<a class="vac__call" href="#">
<svg class="vac__call__icon">
<use xlink:href="img/vac_call.svg#vac_call"></use>
</svg>
ПОЗВОНИТЬ</a>
</div>
</div>
</div>
<div class="vac-all-item">
<div class="vac-all-item-heading">
<svg class="vac__icon vac__plus">
<use xlink:href="img/vac+.svg#vac+"></use>
</svg>
<svg class="vac__icon vac__minus">
<use xlink:href="img/vac-.svg#vac-"></use>
</svg>
<h4 class="vac__title">Специалист эколог</h4>
<p class="vac__salary">30 000 руб.</p>
</div>
<div class="vac-all-item-inner">
<div class="vac-wrapper">
<p class="vac__bold">Требуемый опыт работы: <span class="vac__text">1—3 года</span></p>
<p class="vac__bold">Полная занятость, сменный график</p>
</div>
<div class="vac-wrapper">
<p class="vac__bold">Обязанности:</p>
</div>
<div class="vac-wrapper">
<ul class="vac-list" style="list-style: url('img/points_style_list.svg');">
<li class="vac-list__item">Контроль за соблюдением режима</li>
<li class="vac-list__item">Обеспечение безопасности на территории поста</li>
</ul>
</div>
<div class="vac-wrapper">
<p class="vac__bold">Требования:</p>
</div>
<div class="vac-wrapper">
<ul class="vac-list" style="list-style: url('img/points_style_list.svg');">
<li class="vac-list__item">Добросовестность, ответственность.</li>
</ul>
</div>
<div class="vac-wrapper">
<p class="vac__bold">Условия:</p>
<p class="vac__text">График: сутки через трое</p>
<p class="vac__text">Работа по адресу: г.Воронеж, ул. Б.Хмельницкого, д,51 а</p>
<p class="vac__text">Оформление согласно ТК РФ.</p>
</div>
<div class="vac-buttons">
<a class="vac__button" href="#" style="background-image: url(img/button_mask.svg);">ОТКЛИКНУТЬСЯ</a>
<a class="vac__call" href="#">
<svg class="vac__call__icon">
<use xlink:href="img/vac_call.svg#vac_call"></use>
</svg>
ПОЗВОНИТЬ</a>
</div>
</div>
</div>
</div>
</section>
<section class="form form-subpage section-subpage">
<form action="" class="form-ui" style="background-image: url('img/form_mask.svg');">
<div class="form-ui-inner">
<div class="form-ui-inner-heading">
<span class="form-ui-inner-heading__title">Обратная связь</span>
<span class="form-ui-inner-heading__text">Оставьте свои контакты и мы свяжемся с Вами!</span>
</div>
<div class="form-ui-inner-content">
<input class="form-ui-inner-content__input" type="text" placeholder="Ваше имя" required>
<input class="form-ui-inner-content__input" type="tel" placeholder="Телефон" pattern="(\+?\d[- .]*){7,13}" required>
<input class="form-ui-inner-content__input" type="email" placeholder="E-mail" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" required>
<input class="form-ui-inner-content__input" type="text" placeholder="Сообщение">
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ" style="background-image: url('img/form_button.png');">
</div>
<div class="form-ui-inner-checkbox">
<input class="form-ui-inner-checkbox__input" type="checkbox" id="checkbox1" checked>
<label for="checkbox1" class="form-ui-inner-checkbox__text">Нажимая на кнопку «Отправить», вы соглашаетесь на обработку персональных данных</label>
</div>
</div>
</form>
</section>
<footer class="footer" style="background-image: url('img/footer.jpg');">
<nav class="footer-navbar">
<a class="footer-navbar-logo" href="#">
<img src="img/logo.svg" alt="logo: volga">
</a>
<ul class="footer-menu">
<li class="footer-menu-item"><a class="footer-menu-item__link" href="#">Компания</a></li>
<li class="footer-menu-item"><a class="footer-menu-item__link" href="#">Продукция</a></li>
<li class="footer-menu-item"><a class="footer-menu-item__link" href="#">Пресс-центр</a></li>
<li class="footer-menu-item"><a class="footer-menu-item__link" href="#">Устойчивое развитие</a></li>
<li class="footer-menu-item"><a class="footer-menu-item__link" href="#">Поставщикам</a></li>
<li class="footer-menu-item"><a class="footer-menu-item__link" href="#">Раскрытие информации</a></li>
<li class="footer-menu-item"><a class="footer-menu-item__link" href="#">Карьера</a></li>
<li class="footer-menu-item"><a class="footer-menu-item__link" href="#">Контакты</a></li>
</ul>
</nav>
<div class="footer-info">
<div class="footer-info-social">
<a href="#" class="footer-info-social__link">
<svg class="footer-info-social__icon" width="20" height="13">
<use xlink:href="img/social.svg#vk"></use>
</svg>
</a>
<a href="#" class="footer-info-social__link">
<svg class="footer-info-social__icon" width="17" height="17">
<use xlink:href="img/social.svg#fb"></use>
</svg>
</a>
<a href="#" class="footer-info-social__link">
<svg class="footer-info-social__icon" width="20" height="18">
<use xlink:href="img/social.svg#yt"></use>
</svg>
</a>
<a href="#" class="footer-info-social__link">
<svg class="footer-info-social__icon" width="19" height="19">
<use xlink:href="img/social.svg#inst"></use>
</svg>
</a>
</div>
<span class="footer-info__copy">© 2021 АО «Волга»</span>
<div class="footer-info-dev">
<span class="footer-info-dev__text">Разработка сайта</span>
<img src="img/logo_r52.svg" alt="logo r52">
</div>
</div>
</footer>
<script defer src="js/index.js"></script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment