Skip to content

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

update

parent 81db8ada
Hide whitespace changes
Inline Side-by-side
Showing with 1971 additions and 131 deletions
.DS_Store 0 → 100644
View file @ 35cbf6a6
File added
company.html
View file @ 35cbf6a6
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<link rel="stylesheet" href="styles/style.css"> <link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/normalize.css"> <link rel="stylesheet" href="styles/normalize.css">
</head> </head>
<body> <body class="body-subpage">
<div class="menu-hidden"> <div class="menu-hidden">
<div class="menu-hidden-main"> <div class="menu-hidden-main">
<div class="menu-hidden-mob"> <div class="menu-hidden-mob">
...@@ -116,11 +116,10 @@ ...@@ -116,11 +116,10 @@
<input class="form-ui-inner-content__input" type="tel" 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="email" placeholder="E-mail">
<input class="form-ui-inner-content__input" type="text" placeholder="Сообщение"> <input class="form-ui-inner-content__input" type="text" placeholder="Сообщение">
<label for="checkbox" class="form-ui-inner-checkbox"> <div class="form-ui-inner-checkbox">
<input class="form-ui-inner-checkbox__input" type="checkbox" id="checkbox"> <input class="form-ui-inner-checkbox__input" type="checkbox" id="checkbox2" checked>
<div class="form-ui-inner-checkbox__cb"></div> <label for="checkbox2" class="form-ui-inner-checkbox__text">Согласен на обработку персональных данных</label>
<span class="form-ui-inner-checkbox__text">Согласен на обработку персональных данных</span> </div>
</label>
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ"> <input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ">
</div> </div>
</div> </div>
...@@ -352,8 +351,9 @@ ...@@ -352,8 +351,9 @@
</div> </div>
<div class="company-video company-video-subpage"> <div class="company-video company-video-subpage">
</div> </div>
<a class="company-button" href="#"> <a class="company-button company-button-subpage" href="#">
<img src="img/video_button.png" alt="wacth video"> <img class="company-button__icon" src="img/video_button.png" alt="wacth video icon">
<img class="company-button__text" src="img/video_button_text.png" alt="wacth video text">
</a> </a>
<div class="company-top"> <div class="company-top">
<div class="company-top-item"> <div class="company-top-item">
...@@ -399,11 +399,10 @@ ...@@ -399,11 +399,10 @@
<input class="form-ui-inner-content__input" type="text" placeholder="Сообщение"> <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="ОТПРАВИТЬ">
</div> </div>
<label for="checkbox" class="form-ui-inner-checkbox"> <div class="form-ui-inner-checkbox">
<input class="form-ui-inner-checkbox__input" type="checkbox" id="checkbox"> <input class="form-ui-inner-checkbox__input" type="checkbox" id="checkbox1" checked>
<div class="form-ui-inner-checkbox__cb"></div> <label for="checkbox1" class="form-ui-inner-checkbox__text">Нажимая на кнопку «Отправить», вы соглашаетесь на обработку персональных данных</label>
<span class="form-ui-inner-checkbox__text">Нажимая на кнопку «Отправить», вы соглашаетесь на обработку персональных данных</span> </div>
</label>
</div> </div>
</form> </form>
</section> </section>
......
head.html 0 → 100644
View file @ 35cbf6a6
<!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">
<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 menu-hidden-main-block__more--active" src="img/+.svg" alt="more">
Компания
</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">
Продукция</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">
Раскрытие информации</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">
Устойчивое развитие</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">
Карьера</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>
<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">
Пресс-центр</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">
Контакты</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">
<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="ОТПРАВИТЬ">
</div>
</div>
</form>
<a class="menu-hidden-form__button" href="#">ОБРАТНАЯ СВЯЗЬ</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">
<nav class="navbar">
<a class="navbar-logo" href="#">
<img src="img/logo.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">
<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>
</li>
<li class="menu-item">
<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>
</li>
<li class="menu-item">
<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>
</li>
<li class="menu-item">
<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>
</li>
<li class="menu-item">
<a class="menu-item__link" href="#">Карьера</a>
<div class="submenu">
<a class="submenu-item">Вакансии</a>
</div>
</li>
<li class="menu-item">
<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>
</li>
<li class="menu-item">
<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>
</li>
<li class="menu-item">
<a class="menu-item__link" href="#">Контакты</a>
<div class="submenu">
<a class="submenu-item">Московский офис</a>
<a class="submenu-item">Нижегородский офис</a>
</div>
</li>
</ul>
<ul class="second-menu">
<li class="second-menu-item">
<a class="second-menu-item__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">
<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">
<a class="submenu-item">Поставщикам</a>
<a class="submenu-item">Покупателям</a>
</div>
</li>
<li class="second-menu-item">
<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">
<a class="submenu-item">RU</a>
<a class="submenu-item">EN</a>
</div>
</li>
</ul>
</nav>
<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="people">
<div class="people-card">
<img src="img/person1.png" alt="person photo">
<div class="people-card-text">
<p class="people-card-text__name">Пондарь<br>Сергей Иосифович</p>
<p class="people-card-text__dol">Генеральный директор</p>
</div>
</div>
<div class="people-wrapper">
<div class="people-card">
<img src="img/person2.png" alt="person photo">
<div class="people-card-text">
<p class="people-card-text__name">Вдовин<br>Алексей Анатольевич</p>
<p class="people-card-text__dol">Заместитель генерального директора по продажам</p>
</div>
</div>
<div class="people-card">
<img src="img/person3.png" alt="person photo">
<div class="people-card-text">
<p class="people-card-text__name">Гурылев<br>Андрей Викторович</p>
<p class="people-card-text__dol">Заместитель генерального директора по производству</p>
</div>
</div>
<div class="people-card">
<img src="img/person4.png" alt="person photo">
<div class="people-card-text">
<p class="people-card-text__name">Горбунова<br>Светлана Юрьевна</p>
<p class="people-card-text__dol">Заместитель генерального директора по персоналу</p>
</div>
</div>
<div class="people-card">
<img src="img/person5.png" alt="person photo">
<div class="people-card-text">
<p class="people-card-text__name">Ломакин<br>Сергей Сергеевич</p>
<p class="people-card-text__dol">Заместитель генерального директора, директор по экономике и финансам</p>
</div>
</div>
<div class="people-card">
<img src="img/person6.png" alt="person photo">
<div class="people-card-text">
<p class="people-card-text__name">Полянский<br>Алексей Львович</p>
<p class="people-card-text__dol">Заместитель генерального директора по транспорту и логистике</p>
</div>
</div>
<div class="people-card">
<img src="img/person7.png" alt="person photo">
<div class="people-card-text">
<p class="people-card-text__name">Кумиров<br>Денис Викторович</p>
<p class="people-card-text__dol">Заместитель генерального директора по лесосырьевому обеспечению</p>
</div>
</div>
<div class="people-card">
<img src="img/person4.png" alt="person photo">
<div class="people-card-text">
<p class="people-card-text__name">Горбунова<br>Светлана Юрьевна</p>
<p class="people-card-text__dol">Заместитель генерального директора по персоналу</p>
</div>
</div>
<div class="people-card">
<img src="img/person3.png" alt="person photo">
<div class="people-card-text">
<p class="people-card-text__name">Гурылев<br>Андрей Викторович</p>
<p class="people-card-text__dol">Заместитель генерального директора по производству</p>
</div>
</div>
<div class="people-card">
<img src="img/person2.png" alt="person photo">
<div class="people-card-text">
<p class="people-card-text__name">Вдовин<br>Алексей Анатольевич</p>
<p class="people-card-text__dol">Заместитель генерального директора по продажам</p>
</div>
</div>
</div>
</section>
<section class="form section-subpage">
<form action="" class="form-ui">
<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="Сообщение">
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ">
</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">
<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>
<script defer src="js/menu_subpage.js"></script>
</body>
</html>
\ No newline at end of file
history.html 0 → 100644
View file @ 35cbf6a6
<!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">
<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 menu-hidden-main-block__more--active" src="img/+.svg" alt="more">
Компания
</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">
Продукция</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">
Раскрытие информации</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">
Устойчивое развитие</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">
Карьера</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>
<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">
Пресс-центр</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">
Контакты</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">
<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="ОТПРАВИТЬ">
</div>
</div>
</form>
<a class="menu-hidden-form__button" href="#">ОБРАТНАЯ СВЯЗЬ</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">
<nav class="navbar">
<a class="navbar-logo" href="#">
<img src="img/logo.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">
<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>
</li>
<li class="menu-item">
<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>
</li>
<li class="menu-item">
<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>
</li>
<li class="menu-item">
<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>
</li>
<li class="menu-item">
<a class="menu-item__link" href="#">Карьера</a>
<div class="submenu">
<a class="submenu-item">Вакансии</a>
</div>
</li>
<li class="menu-item">
<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>
</li>
<li class="menu-item">
<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>
</li>
<li class="menu-item">
<a class="menu-item__link" href="#">Контакты</a>
<div class="submenu">
<a class="submenu-item">Московский офис</a>
<a class="submenu-item">Нижегородский офис</a>
</div>
</li>
</ul>
<ul class="second-menu">
<li class="second-menu-item">
<a class="second-menu-item__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">
<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">
<a class="submenu-item">Поставщикам</a>
<a class="submenu-item">Покупателям</a>
</div>
</li>
<li class="second-menu-item">
<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">
<a class="submenu-item">RU</a>
<a class="submenu-item">EN</a>
</div>
</li>
</ul>
</nav>
<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="timeline">
<div class="timeline-about">
<p class="timeline-about__title">Традиции качества</p>
<p class="timeline-about__text">Выпускаемая АО «Волга» газетная бумага соответствует
требованиям нормативных документов:
требованиям ГОСТ 6445-74 (газетная бумага марки О, А);
требованиям ТУ 5431-003-00279278-2004,
о чем свидетельствуют полученные сертификаты соответствия.
Успешное проведение работ по сертификации газетной бумаги
и по ежегодному инспекционному контролю за сертифицированной продукцией
- это показатель отличной, слаженной работы всех служб предприятия.</p>
</div>
<div class="timeline-content">
<div class="timeline-content-year" data-date="1925">
<img class="timeline-content-year__img" src="img/1960.png" alt="1960">
<div class="timeline-content-year-text">
<p class="timeline-content-year-text__title">1925</p>
<p class="timeline-content-year-text__descr">С 1960 года началась коренная реконструкция производства
и расширение комбината. В 1962 - 1967 годах на комбинате
вступили в эксплуатацию комплексы шестой и с
едьмой быстроходных бумагоделательных агрегатов фирмы «Wartsila»
мощностью 108 тысяч тонн газетной ролевой бумаги в год каждый,
новый древесномассный завод с парком высокопроизводительных дефибреров,
очистной цех и новый склад готовой продукции.</p>
</div>
</div>
<div class="timeline-content-year timeline-content-year--selected" data-date="1960">
<img class="timeline-content-year__img" src="img/1960.png" alt="1960">
<div class="timeline-content-year-text">
<p class="timeline-content-year-text__title">1960</p>
<p class="timeline-content-year-text__descr">С 1960 года началась коренная реконструкция производства
и расширение комбината. В 1962 - 1967 годах на комбинате
вступили в эксплуатацию комплексы шестой и с
едьмой быстроходных бумагоделательных агрегатов фирмы «Wartsila»
мощностью 108 тысяч тонн газетной ролевой бумаги в год каждый,
новый древесномассный завод с парком высокопроизводительных дефибреров,
очистной цех и новый склад готовой продукции.</p>
</div>
</div>
<div class="timeline-content-year" data-date="1976">
<img class="timeline-content-year__img" src="img/1960.png" alt="1960">
<div class="timeline-content-year-text">
<p class="timeline-content-year-text__title">1976</p>
<p class="timeline-content-year-text__descr">С 1960 года началась коренная реконструкция производства
и расширение комбината. В 1962 - 1967 годах на комбинате
вступили в эксплуатацию комплексы шестой и с
едьмой быстроходных бумагоделательных агрегатов фирмы «Wartsila»
мощностью 108 тысяч тонн газетной ролевой бумаги в год каждый,
новый древесномассный завод с парком высокопроизводительных дефибреров,
очистной цех и новый склад готовой продукции.</p>
</div>
</div>
<div class="timeline-content-year" data-date="1991">
<img class="timeline-content-year__img" src="img/1960.png" alt="1960">
<div class="timeline-content-year-text">
<p class="timeline-content-year-text__title">1991</p>
<p class="timeline-content-year-text__descr">С 1960 года началась коренная реконструкция производства
и расширение комбината. В 1962 - 1967 годах на комбинате
вступили в эксплуатацию комплексы шестой и с
едьмой быстроходных бумагоделательных агрегатов фирмы «Wartsila»
мощностью 108 тысяч тонн газетной ролевой бумаги в год каждый,
новый древесномассный завод с парком высокопроизводительных дефибреров,
очистной цех и новый склад готовой продукции.</p>
</div>
</div>
<div class="timeline-content-line">
<div class="timeline-content-line-wrapper">
<div class="timeline-content-line-wrapper-events">
<a class="timeline-content-line-wrapper-events__item" href="#0" data-date="1925"><p>1925</p></a>
<a class="timeline-content-line-wrapper-events__item timeline-content-line-wrapper-events__item--selected" href="#0" data-date="1960"><p>1960</p></a>
<a class="timeline-content-line-wrapper-events__item" href="#0" data-date="1976"><p>1976</p></a>
<a class="timeline-content-line-wrapper-events__item" href="#0" data-date="1991"><p>1991</p></a>
</div>
<a href="#0" class="timeline-content-line-wrapper-events__prev">
<img src="img/prev.png" alt="prev">
</a>
<a href="#0" class="timeline-content-line-wrapper-events__next">
<img src="img/next.png" alt="next">
</a>
</div>
</div>
</div>
</section>
<section class="history-video">
<div class="history-video-button">
<img class="history-video-button__icon" src="img/video_button.png" alt="watch video icon">
<img class="history-video-button__text" src="img/video_button_text_white.png" alt="watch video text">
</div>
<div class="history-video-about">
<p class="history-video-about__title">Предприятие сегодня</p>
<p class="history-video-about__text">Акционерное общество «Волга» –
российский производитель газетной бумаги премиум-класса
из 100% термомеханической массы.</p>
</div>
</section>
<section class="form section-subpage">
<form action="" class="form-ui">
<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="Сообщение">
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ">
</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">
<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>
<script defer src="js/menu_subpage.js"></script>
<script defer src="js/timeline.js"></script>
</body>
</html>
\ No newline at end of file
img/.DS_Store 0 → 100644
View file @ 35cbf6a6
File added
img/next.png 0 → 100644
View file @ 35cbf6a6
img/next.png

485 Bytes

img/prev.png 0 → 100644
View file @ 35cbf6a6
img/prev.png

488 Bytes

img/selected_year.svg 0 → 100644
View file @ 35cbf6a6
<svg width="96" height="189" viewBox="0 0 96 189" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="48" y="20.7297" width="39" height="39" transform="rotate(45 48 20.7297)" fill="#029745"/>
<rect x="48" y="11.4368" width="52" height="52" transform="rotate(45 48 11.4368)" stroke="#029745"/>
<rect x="48" y="1.08329" width="66.5" height="66.5" transform="rotate(45 48 1.08329)" stroke="#029745" stroke-width="0.5"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M45.0785 48.7002L41.5406 48.715L46.0851 53.067V57.6263L36.6853 48.6853L33.5027 48.6705H28.0848L46.0555 66.4192V60.6757L33.5027 48.6853L30.098 45.5619L26.9746 48.715L47.9355 69.7646L68.9999 48.6557L65.8617 45.5619L62.4867 48.7298L50.0079 60.6757L50.0375 66.3452L67.9045 48.7446L62.4867 48.715H59.2301L54.4191 48.6261H50.8368L60.0442 39.6112L47.8911 27.6949L35.7527 39.7296L45.0785 48.7002ZM59.2301 48.7446L64.1742 43.7856L61.7761 41.58L54.4191 48.6705L50.0079 53.0078V57.7151L59.2301 48.7446ZM41.5406 48.715L34.08 41.654L31.8151 44.0224L36.6853 48.7002L41.5406 48.715Z" fill="white"/>
<line x1="47.5" y1="72.7297" x2="47.5" y2="146.73" stroke="#029745" stroke-width="3"/>
</svg>
index.html
View file @ 35cbf6a6
...@@ -116,11 +116,11 @@ ...@@ -116,11 +116,11 @@
<input class="form-ui-inner-content__input" type="tel" 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="email" placeholder="E-mail">
<input class="form-ui-inner-content__input" type="text" placeholder="Сообщение"> <input class="form-ui-inner-content__input" type="text" placeholder="Сообщение">
<label for="checkbox" class="form-ui-inner-checkbox"> <div class="form-ui-inner-checkbox">
<input class="form-ui-inner-checkbox__input" type="checkbox" id="checkbox"> <input class="form-ui-inner-checkbox__input" type="checkbox" id="checkbox2" checked>
<div class="form-ui-inner-checkbox__cb"></div> <label for="checkbox2" class="form-ui-inner-checkbox__text">Согласен на обработку персональных данных</label>
<span class="form-ui-inner-checkbox__text">Согласен на обработку персональных данных</span> </div>
</label>
<input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ"> <input class="form-ui-inner-content__button" type="submit" value="ОТПРАВИТЬ">
</div> </div>
</div> </div>
...@@ -666,11 +666,10 @@ ...@@ -666,11 +666,10 @@
<input class="form-ui-inner-content__input" type="text" placeholder="Сообщение"> <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="ОТПРАВИТЬ">
</div> </div>
<label for="checkbox" class="form-ui-inner-checkbox"> <div class="form-ui-inner-checkbox">
<input class="form-ui-inner-checkbox__input" type="checkbox" id="checkbox"> <input class="form-ui-inner-checkbox__input" type="checkbox" id="checkbox1" checked>
<div class="form-ui-inner-checkbox__cb"></div> <label for="checkbox1" class="form-ui-inner-checkbox__text">Нажимая на кнопку «Отправить», вы соглашаетесь на обработку персональных данных</label>
<span class="form-ui-inner-checkbox__text">Нажимая на кнопку «Отправить», вы соглашаетесь на обработку персональных данных</span> </div>
</label>
</div> </div>
</form> </form>
</section> </section>
......
js/timeline.js 0 → 100644
View file @ 35cbf6a6
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');
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');
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');
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';
}
}
}
});
\ No newline at end of file
styles/style.css
View file @ 35cbf6a6
...@@ -29,6 +29,10 @@ body { ...@@ -29,6 +29,10 @@ body {
width: 100vw; width: 100vw;
} }
.body-subpage {
background: #f6f8fa;
}
.header { .header {
opacity: 0.99; opacity: 0.99;
position: relative; position: relative;
...@@ -274,14 +278,6 @@ body { ...@@ -274,14 +278,6 @@ body {
padding-left: 0; padding-left: 0;
} }
.menu-hidden .form-ui-inner-checkbox__cb {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
width: 15px;
margin-right: 16px;
}
.navbar { .navbar {
position: fixed; position: fixed;
top: 0; top: 0;
...@@ -1222,28 +1218,6 @@ body { ...@@ -1222,28 +1218,6 @@ body {
width: calc(25% + 20px); width: calc(25% + 20px);
} }
@-webkit-keyframes company-button {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes company-button {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.press { .press {
background: #f6f8fa url("../img/top_mask_2.svg") no-repeat right top; background: #f6f8fa url("../img/top_mask_2.svg") no-repeat right top;
background-attachment: fixed; background-attachment: fixed;
...@@ -1911,36 +1885,34 @@ body { ...@@ -1911,36 +1885,34 @@ body {
} }
.form-ui-inner-checkbox__input { .form-ui-inner-checkbox__input {
position: absolute; display: none;
z-index: -1;
opacity: 0;
display: block;
width: 0;
height: 0;
} }
.form-ui-inner-checkbox__text { .form-ui-inner-checkbox__text {
position: relative; position: relative;
padding-left: 16px;
font-weight: normal; font-weight: normal;
font-size: 14px; font-size: 14px;
line-height: 160%; line-height: 160%;
color: #ffffff; color: #ffffff;
opacity: 0.8;
} }
.form-ui-inner-checkbox__cb { .form-ui-inner-checkbox__text::before {
-ms-flex-negative: 0; content: '';
flex-shrink: 0; display: inline-block;
vertical-align: middle;
width: 15px; width: 15px;
height: 15px; height: 15px;
-ms-flex-negative: 0;
flex-shrink: 0;
margin-right: 16px;
-webkit-transition: background 0.2s ease; -webkit-transition: background 0.2s ease;
transition: background 0.2s ease; transition: background 0.2s ease;
background: url("../img/checkbox2.png") 0 0 no-repeat; background-size: 100%;
background-image: url("../img/checkbox.png");
} }
.form-ui-inner-checkbox__input:checked + .form-ui-inner-checkbox__cb { .form-ui-inner-checkbox__input:checked + .form-ui-inner-checkbox__text::before {
background-image: url("../img/checkbox.png"); background: url("../img/checkbox2.png") 0 0 no-repeat;
} }
.footer { .footer {
...@@ -2159,10 +2131,12 @@ body { ...@@ -2159,10 +2131,12 @@ body {
} }
.company-view { .company-view {
background: url("../img/company_view.png") no-repeat; content: url("../img/company_view.png");
background-size: cover;
width: calc(50% + 20px); width: calc(50% + 20px);
height: 517px; -webkit-box-sizing: border-box;
box-sizing: border-box;
-o-object-fit: cover;
object-fit: cover;
} }
.company-location { .company-location {
...@@ -2197,10 +2171,12 @@ body { ...@@ -2197,10 +2171,12 @@ body {
} }
.company-inner { .company-inner {
background: url("../img/company_inner.png") no-repeat;
background-size: cover;
width: calc(50% - 20px); width: calc(50% - 20px);
height: 710px; content: url("../img/company_inner.png");
-webkit-box-sizing: border-box;
box-sizing: border-box;
-o-object-fit: cover;
object-fit: cover;
} }
.section-subpage { .section-subpage {
...@@ -2211,6 +2187,276 @@ body { ...@@ -2211,6 +2187,276 @@ body {
width: calc(50% - 20px); width: calc(50% - 20px);
} }
.timeline-about {
background: url("../img/company_mask.svg") no-repeat right center;
padding: 64px 500px;
}
.timeline-about__title {
font-weight: 800;
font-size: 36px;
line-height: 110%;
letter-spacing: 0.02em;
color: #16291f;
margin-bottom: 48px;
}
.timeline-about__text {
font-weight: 300;
font-size: 18px;
line-height: 130%;
color: #16291f;
}
.timeline-content {
background-color: #fff;
}
.timeline-content-year {
display: none;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 80px 0 0 0;
}
.timeline-content-year--selected {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.timeline-content-year-text {
width: 600px;
margin-left: 102px;
}
.timeline-content-year-text__title {
font-weight: 300;
font-size: 72px;
line-height: 130%;
color: #c7c9cf;
}
.timeline-content-year-text__descr {
font-weight: bold;
font-size: 18px;
line-height: 130%;
color: #16291f;
}
.timeline-content-line {
position: relative;
height: 188px;
width: 100%;
margin-top: -50px;
padding-bottom: 80px;
}
.timeline-content-line-wrapper {
position: relative;
height: 100%;
overflow: hidden;
}
.timeline-content-line-wrapper-events {
position: absolute;
left: 0;
top: 109px;
height: 2px;
width: 100%;
background: #c7c9cf;
-webkit-transition: 0.4s;
transition: 0.4s;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.timeline-content-line-wrapper-events__prev {
position: absolute;
top: 89px;
left: 140px;
}
.timeline-content-line-wrapper-events__next {
position: absolute;
top: 89px;
right: 140px;
}
.timeline-content-line-wrapper-events__item {
font-weight: normal;
font-size: 24px;
line-height: 110%;
letter-spacing: 0.02em;
color: #c7c9cf;
display: inline-block;
position: relative;
padding-top: 37px;
margin-right: 15.4%;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.timeline-content-line-wrapper-events__item--selected p {
font-weight: 800;
letter-spacing: 0.02em;
color: #ffffff;
z-index: 2;
background-color: #029745;
padding: 8px 16px;
}
.timeline-content-line-wrapper-events__item:first-child {
margin-left: 15.4%;
}
.timeline-content-line-wrapper-events__item::before {
position: absolute;
left: 50%;
top: 0px;
content: ' ';
width: 2px;
height: 37px;
background: #c7c9cf;
}
.timeline-content-line-wrapper-events__item--selected::before {
position: absolute;
width: 95px;
height: 188px;
left: 0;
top: -109px;
background-image: url("../img/selected_year.svg");
background-color: transparent;
background-repeat: no-repeat;
opacity: 0.99;
}
.history-video {
background: url(../img/history_video.png) no-repeat;
background-size: cover;
width: 100%;
height: 600px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.history-video-button {
width: 50%;
height: 100%;
position: relative;
}
.history-video-button__icon {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.history-video-button__text {
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
-webkit-animation: 10s linear 0s normal none infinite running company-button;
animation: 10s linear 0s normal none infinite running company-button;
}
.history-video-about {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 50%;
height: 100%;
padding: 0 204px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: rgba(2, 151, 69, 0.8);
}
.history-video-about__title {
font-weight: 800;
font-size: 36px;
line-height: 110%;
letter-spacing: 0.02em;
color: #ffffff;
margin-bottom: 48px;
}
.history-video-about__text {
font-weight: 300;
font-size: 18px;
line-height: 130%;
color: #ffffff;
}
.people {
background: url("../img/company_mask.svg") no-repeat right -300px;
padding: 64px 20px 0 60px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-bottom: -64px;
}
.people-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.people-card {
width: 440px;
margin-right: 40px;
margin-bottom: 64px;
}
.people-card-text {
background-color: #fff;
padding: 24px 32px;
}
.people-card-text__name {
font-weight: 800;
font-size: 20px;
line-height: 130%;
text-align: center;
letter-spacing: 0.02em;
color: #16291f;
margin-bottom: 16px;
}
.people-card-text__dol {
font-weight: 300;
font-size: 18px;
line-height: 160%;
text-align: center;
color: #16291f;
}
@media (max-width: 1800px) { @media (max-width: 1800px) {
.navbar { .navbar {
padding: 18px 100px; padding: 18px 100px;
...@@ -2614,9 +2860,6 @@ body { ...@@ -2614,9 +2860,6 @@ body {
.company-about__text { .company-about__text {
font-size: 18px; font-size: 18px;
} }
.company-view {
height: 398px;
}
.company-location { .company-location {
padding: 20px 200px 20px 92px; padding: 20px 200px 20px 92px;
background: #f6f8fa url(../img/top_mask_2_pl.svg) no-repeat right top; background: #f6f8fa url(../img/top_mask_2_pl.svg) no-repeat right top;
...@@ -2628,8 +2871,50 @@ body { ...@@ -2628,8 +2871,50 @@ body {
.company-prod__text { .company-prod__text {
font-size: 18px; font-size: 18px;
} }
.company-inner { .timeline-about {
height: 546px; padding: 49px 385px;
}
.timeline-about__title {
font-size: 28px;
margin-bottom: 37px;
}
.timeline-about__text {
font-size: 14px;
}
.timeline-content-year {
padding: 62px 0 0 0;
}
.timeline-content-text {
width: 460px;
margin-left: 78px;
}
.timeline-content-text__title {
font-size: 55px;
}
.timeline-content-text__descr {
font-size: 14px;
}
.timeline-line-wrapper-events__prev {
left: 100px;
}
.timeline-line-wrapper-events__next {
right: 100px;
}
.timeline-line-wrapper-events__item {
font-size: 18px;
}
.history-video {
height: 460px;
}
.history-video-about {
padding: 0 157px;
}
.history-video-about__title {
font-size: 28px;
margin-bottom: 37px;
}
.history-video-about__text {
font-size: 14px;
} }
} }
...@@ -2689,6 +2974,9 @@ body { ...@@ -2689,6 +2974,9 @@ body {
.company-button { .company-button {
left: 45%; left: 45%;
} }
.timeline-about {
padding: 40px 16px;
}
} }
@media (max-width: 950px) { @media (max-width: 950px) {
...@@ -2978,8 +3266,11 @@ body { ...@@ -2978,8 +3266,11 @@ body {
} }
.heading-other-nav__page { .heading-other-nav__page {
width: 100%; width: 100%;
height: 47px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 11px; font-size: 11px;
padding: 16px 0; padding: 16px 8px;
background: #029745; background: #029745;
border-left: 1px solid #63bd8b; border-left: 1px solid #63bd8b;
display: -webkit-box; display: -webkit-box;
...@@ -3462,13 +3753,6 @@ body { ...@@ -3462,13 +3753,6 @@ body {
line-height: 130%; line-height: 130%;
padding-left: 0; padding-left: 0;
} }
.form-ui-inner-checkbox__cb {
-ms-flex-item-align: start;
-ms-grid-row-align: start;
align-self: start;
width: 15px;
margin-right: 16px;
}
.cards { .cards {
background: #f6f8fa; background: #f6f8fa;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
...@@ -3509,6 +3793,128 @@ body { ...@@ -3509,6 +3793,128 @@ body {
.company-inner { .company-inner {
width: 100%; width: 100%;
} }
.company-button-subpage {
bottom: 780px;
}
.timeline-about {
background: none;
}
.timeline-about__title {
font-size: 23px;
margin-bottom: 31px;
}
.timeline-about__text {
font-size: 12px;
}
.timeline-content-year {
padding-top: 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.timeline-content-year-text {
margin-left: 0;
padding: 16px;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.timeline-content-year-text__title {
font-size: 46px;
}
.timeline-content-year-text__descr {
font-size: 12px;
}
.timeline-content-line {
margin-top: 0px;
padding-bottom: 52px;
height: 120px;
}
.timeline-content-line-wrapper-events {
top: 70px;
height: 1.75px;
}
.timeline-content-line-wrapper-events__prev {
left: 16px;
top: 55px;
}
.timeline-content-line-wrapper-events__prev img,
.timeline-content-line-wrapper-events__next img {
width: 30px;
height: 30px;
}
.timeline-content-line-wrapper-events__next {
right: 16px;
top: 55px;
}
.timeline-content-line-wrapper-events__item {
margin-right: 13%;
padding-top: 23px;
font-size: 15px;
}
.timeline-content-line-wrapper-events__item--selected p {
padding: 5px 10px;
}
.timeline-content-line-wrapper-events__item:first-child {
margin-left: 13%;
}
.timeline-content-line-wrapper-events__item::before {
height: 23px;
width: 1.75px;
}
.timeline-content-line-wrapper-events__item--selected::before {
width: 60px;
height: 120px;
top: -70px;
background-size: 60px 120px;
background-position: center;
}
.history-video {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
height: auto;
}
.history-video-button {
width: 100%;
height: 380px;
}
.history-video-about {
width: 100%;
padding: 52px 16px;
}
.history-video-about__title {
font-size: 23px;
margin-bottom: 31px;
}
.history-video-about__text {
font-size: 12px;
}
.people {
background: none;
padding: 52px 16px;
}
.people-card {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
max-width: 440px;
margin-right: 0;
margin-bottom: 40px;
}
.people-card-text {
padding: 15px 20px;
}
.people-card-text__name {
font-size: 13px;
margin-bottom: 10px;
}
.people-card-text__dol {
font-size: 12px;
}
.people-card img {
width: 100%;
}
} }
@media (max-width: 600px) { @media (max-width: 600px) {
...@@ -3516,6 +3922,10 @@ body { ...@@ -3516,6 +3922,10 @@ body {
bottom: 960px; bottom: 960px;
left: 38%; left: 38%;
} }
.company-button-subpage {
bottom: 730px;
left: 39%;
}
} }
@media (max-width: 450px) { @media (max-width: 450px) {
...@@ -3523,10 +3933,43 @@ body { ...@@ -3523,10 +3933,43 @@ body {
bottom: 940px; bottom: 940px;
left: 31%; left: 31%;
} }
.company-button-subpage {
bottom: 680px;
left: 34%;
}
.footer-info-dev { .footer-info-dev {
margin: 0; margin: 0;
margin-top: 16px; margin-top: 16px;
margin-right: auto; margin-right: auto;
} }
} }
@media (max-width: 380px) {
.company-button-subpage {
bottom: 650px;
left: 31%;
}
}
@-webkit-keyframes company-button {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes company-button {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/*# sourceMappingURL=style.css.map */ /*# sourceMappingURL=style.css.map */
\ No newline at end of file
styles/style.css.map
View file @ 35cbf6a6
This source diff could not be displayed because it is too large. You can view the blob instead.
styles/style.scss
View file @ 35cbf6a6
...@@ -27,6 +27,9 @@ body { ...@@ -27,6 +27,9 @@ body {
background-position-y: 79.5%; background-position-y: 79.5%;
width: 100vw; width: 100vw;
} }
.body-subpage {
background: #f6f8fa;
}
.header { .header {
opacity: 0.99; opacity: 0.99;
...@@ -210,11 +213,6 @@ body { ...@@ -210,11 +213,6 @@ body {
line-height: 160%; line-height: 160%;
padding-left: 0; padding-left: 0;
} }
&__cb {
align-self: center;
width: 15px;
margin-right: 16px;
}
} }
} }
} }
...@@ -925,15 +923,6 @@ body { ...@@ -925,15 +923,6 @@ body {
} }
} }
@keyframes company-button {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.press { .press {
background: #f6f8fa url('../img/top_mask_2.svg') no-repeat right top; background: #f6f8fa url('../img/top_mask_2.svg') no-repeat right top;
background-attachment: fixed; background-attachment: fixed;
...@@ -1406,32 +1395,30 @@ body { ...@@ -1406,32 +1395,30 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
&__input { &__input {
position: absolute; display: none;
z-index: -1;
opacity: 0;
display: block;
width: 0;
height: 0;
} }
&__text { &__text {
position: relative; position: relative;
padding-left: 16px;
font-weight: normal; font-weight: normal;
font-size: 14px; font-size: 14px;
line-height: 160%; line-height: 160%;
color: #ffffff; color: #ffffff;
opacity: 0.8;
} }
&__cb { &__text::before {
flex-shrink: 0; content: '';
display: inline-block;
vertical-align: middle;
width: 15px; width: 15px;
height: 15px; height: 15px;
flex-shrink: 0;
margin-right: 16px;
transition: background 0.2s ease; transition: background 0.2s ease;
background: url('../img/checkbox2.png') 0 0 no-repeat; background-size: 100%;
}
&__input:checked + &__cb {
background-image: url('../img/checkbox.png'); background-image: url('../img/checkbox.png');
} }
&__input:checked + &__text::before {
background: url('../img/checkbox2.png') 0 0 no-repeat;
}
} }
} }
} }
...@@ -1587,10 +1574,10 @@ body { ...@@ -1587,10 +1574,10 @@ body {
} }
} }
&-view { &-view {
background: url('../img/company_view.png') no-repeat; content: url('../img/company_view.png');
background-size: cover;
width: calc(50% + 20px); width: calc(50% + 20px);
height: 517px; box-sizing: border-box;
object-fit: cover;
} }
&-location { &-location {
padding: 20px 260px 20px 120px; padding: 20px 260px 20px 120px;
...@@ -1615,10 +1602,10 @@ body { ...@@ -1615,10 +1602,10 @@ body {
} }
} }
&-inner { &-inner {
background: url('../img/company_inner.png') no-repeat;
background-size: cover;
width: calc(50% - 20px); width: calc(50% - 20px);
height: 710px; content: url('../img/company_inner.png');
box-sizing: border-box;
object-fit: cover;
} }
} }
...@@ -1630,6 +1617,221 @@ body { ...@@ -1630,6 +1617,221 @@ body {
width: calc(50% - 20px); width: calc(50% - 20px);
} }
//history
.timeline {
&-about {
background: url('../img/company_mask.svg') no-repeat right center;
padding: 64px 500px;
&__title {
font-weight: 800;
font-size: 36px;
line-height: 110%;
letter-spacing: 0.02em;
color: #16291f;
margin-bottom: 48px;
}
&__text {
font-weight: 300;
font-size: 18px;
line-height: 130%;
color: #16291f;
}
}
&-content {
background-color: #fff;
&-year {
display: none;
justify-content: center;
padding: 80px 0 0 0;
&--selected {
display: flex;
}
&-text {
width: 600px;
margin-left: 102px;
&__title {
font-weight: 300;
font-size: 72px;
line-height: 130%;
color: #c7c9cf;
}
&__descr {
font-weight: bold;
font-size: 18px;
line-height: 130%;
color: #16291f;
}
}
}
&-line {
position: relative;
height: 188px;
width: 100%;
margin-top: -50px;
padding-bottom: 80px;
&-wrapper {
position: relative;
height: 100%;
overflow: hidden;
&-events {
position: absolute;
left: 0;
top: 109px;
height: 2px;
width: 100%;
background: #c7c9cf;
transition: 0.4s;
display: flex;
&__prev {
position: absolute;
top: 89px;
left: 140px;
}
&__next {
position: absolute;
top: 89px;
right: 140px;
}
&__item {
font-weight: normal;
font-size: 24px;
line-height: 110%;
letter-spacing: 0.02em;
color: #c7c9cf;
display: inline-block;
position: relative;
padding-top: 37px;
margin-right: 15.4%;
transition: 0.4s;
&--selected p {
font-weight: 800;
letter-spacing: 0.02em;
color: #ffffff;
z-index: 2;
background-color: #029745;
padding: 8px 16px;
}
}
&__item:first-child {
margin-left: 15.4%;
}
&__item::before {
position: absolute;
left: 50%;
top: 0px;
content: ' ';
width: 2px;
height: 37px;
background: #c7c9cf;
}
&__item--selected::before {
position: absolute;
width: 95px;
height: 188px;
left: 0;
top: -109px;
background-image: url('../img/selected_year.svg');
background-color: transparent;
background-repeat: no-repeat;
opacity: 0.99;
}
}
}
}
}
}
.history-video {
background: url(../img/history_video.png) no-repeat;
background-size: cover;
width: 100%;
height: 600px;
display: flex;
&-button {
width: 50%;
height: 100%;
position: relative;
&__icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
&__text {
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
animation: 10s linear 0s normal none infinite running company-button;
}
}
&-about {
display: flex;
flex-direction: column;
justify-content: center;
width: 50%;
height: 100%;
padding: 0 204px;
box-sizing: border-box;
background: rgba($color: #029745, $alpha: 0.8);
&__title {
font-weight: 800;
font-size: 36px;
line-height: 110%;
letter-spacing: 0.02em;
color: #ffffff;
margin-bottom: 48px;
}
&__text {
font-weight: 300;
font-size: 18px;
line-height: 130%;
color: #ffffff;
}
}
}
//head
.people {
background: url('../img/company_mask.svg') no-repeat right -300px;
padding: 64px 20px 0 60px;
display: flex;
align-items: center;
flex-direction: column;
margin-bottom: -64px;
&-wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
&-card {
width: 440px;
margin-right: 40px;
margin-bottom: 64px;
&-text {
background-color: #fff;
padding: 24px 32px;
&__name {
font-weight: 800;
font-size: 20px;
line-height: 130%;
text-align: center;
letter-spacing: 0.02em;
color: #16291f;
margin-bottom: 16px;
}
&__dol {
font-weight: 300;
font-size: 18px;
line-height: 160%;
text-align: center;
color: #16291f;
}
}
}
}
@media (max-width: 1800px) { @media (max-width: 1800px) {
.navbar { .navbar {
padding: 18px 100px; padding: 18px 100px;
...@@ -2085,9 +2287,6 @@ body { ...@@ -2085,9 +2287,6 @@ body {
font-size: 18px; font-size: 18px;
} }
} }
&-view {
height: 398px;
}
&-location { &-location {
padding: 20px 200px 20px 92px; padding: 20px 200px 20px 92px;
background: #f6f8fa url(../img/top_mask_2_pl.svg) no-repeat right top; background: #f6f8fa url(../img/top_mask_2_pl.svg) no-repeat right top;
...@@ -2099,8 +2298,61 @@ body { ...@@ -2099,8 +2298,61 @@ body {
font-size: 18px; font-size: 18px;
} }
} }
&-inner { }
height: 546px; //history
.timeline {
&-about {
padding: 49px 385px;
&__title {
font-size: 28px;
margin-bottom: 37px;
}
&__text {
font-size: 14px;
}
}
&-content {
&-year {
padding: 62px 0 0 0;
}
&-text {
width: 460px;
margin-left: 78px;
&__title {
font-size: 55px;
}
&__descr {
font-size: 14px;
}
}
}
&-line {
&-wrapper {
&-events {
&__prev {
left: 100px;
}
&__next {
right: 100px;
}
&__item {
font-size: 18px;
}
}
}
}
}
.history-video {
height: 460px;
&-about {
padding: 0 157px;
&__title {
font-size: 28px;
margin-bottom: 37px;
}
&__text {
font-size: 14px;
}
} }
} }
} }
...@@ -2154,6 +2406,11 @@ body { ...@@ -2154,6 +2406,11 @@ body {
.company-button { .company-button {
left: 45%; left: 45%;
} }
.timeline {
&-about {
padding: 40px 16px;
}
}
} }
@media (max-width: 950px) { @media (max-width: 950px) {
...@@ -2394,8 +2651,10 @@ body { ...@@ -2394,8 +2651,10 @@ body {
width: 100%; width: 100%;
&__page { &__page {
width: 100%; width: 100%;
height: 47px;
box-sizing: border-box;
font-size: 11px; font-size: 11px;
padding: 16px 0; padding: 16px 8px;
background: #029745; background: #029745;
border-left: 1px solid #63bd8b; border-left: 1px solid #63bd8b;
display: flex; display: flex;
...@@ -2826,11 +3085,6 @@ body { ...@@ -2826,11 +3085,6 @@ body {
line-height: 130%; line-height: 130%;
padding-left: 0; padding-left: 0;
} }
&__cb {
align-self: start;
width: 15px;
margin-right: 16px;
}
} }
} }
} }
...@@ -2874,12 +3128,140 @@ body { ...@@ -2874,12 +3128,140 @@ body {
&-inner { &-inner {
width: 100%; width: 100%;
} }
&-button-subpage {
bottom: 780px;
}
}
//history
.timeline {
&-about {
background: none;
&__title {
font-size: 23px;
margin-bottom: 31px;
}
&__text {
font-size: 12px;
}
}
&-content {
&-year {
padding-top: 0;
flex-direction: column;
&-text {
margin-left: 0;
padding: 16px;
width: 100%;
box-sizing: border-box;
&__title {
font-size: 46px;
}
&__descr {
font-size: 12px;
}
}
}
&-line {
margin-top: 0px;
padding-bottom: 52px;
height: 120px;
&-wrapper {
&-events {
top: 70px;
height: 1.75px;
&__prev {
left: 16px;
top: 55px;
}
&__prev img,
&__next img {
width: 30px;
height: 30px;
}
&__next {
right: 16px;
top: 55px;
}
&__item {
margin-right: 13%;
padding-top: 23px;
font-size: 15px;
&--selected p {
padding: 5px 10px;
}
}
&__item:first-child {
margin-left: 13%;
}
&__item::before {
height: 23px;
width: 1.75px;
}
&__item--selected::before {
width: 60px;
height: 120px;
top: -70px;
background-size: 60px 120px;
background-position: center;
}
}
}
}
}
}
.history-video {
flex-wrap: wrap;
height: auto;
&-button {
width: 100%;
height: 380px;
}
&-about {
width: 100%;
padding: 52px 16px;
&__title {
font-size: 23px;
margin-bottom: 31px;
}
&__text {
font-size: 12px;
}
}
}
//head
.people {
background: none;
padding: 52px 16px;
&-card {
box-sizing: border-box;
width: 100%;
max-width: 440px;
margin-right: 0;
margin-bottom: 40px;
&-text {
padding: 15px 20px;
&__name {
font-size: 13px;
margin-bottom: 10px;
}
&__dol {
font-size: 12px;
}
}
}
&-card img {
width: 100%;
}
} }
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.company-button { .company-button {
bottom: 960px; bottom: 960px;
left: 38%; left: 38%;
&-subpage {
bottom: 730px;
left: 39%;
}
} }
} }
...@@ -2887,6 +3269,10 @@ body { ...@@ -2887,6 +3269,10 @@ body {
.company-button { .company-button {
bottom: 940px; bottom: 940px;
left: 31%; left: 31%;
&-subpage {
bottom: 680px;
left: 34%;
}
} }
.footer { .footer {
&-info { &-info {
...@@ -2898,3 +3284,21 @@ body { ...@@ -2898,3 +3284,21 @@ body {
} }
} }
} }
@media (max-width: 380px) {
.company-button {
&-subpage {
bottom: 650px;
left: 31%;
}
}
}
@keyframes company-button {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
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