Skip to content

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

Update

parent 760e7935
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 674 additions and 124 deletions
company.html
View file @ cc48fd2a
......@@ -413,14 +413,14 @@
<img src="img/logo.svg" alt="logo: volga">
</a>
<ul class="footer-menu">
<li class="footer-menu-item"><a class="menu-item__link" href="#">Компания</a></li>
<li class="footer-menu-item"><a class="menu-item__link" href="#">Продукция</a></li>
<li class="footer-menu-item"><a class="menu-item__link" href="#">Пресс-центр</a></li>
<li class="footer-menu-item"><a class="menu-item__link" href="#">Устойчивое развитие</a></li>
<li class="footer-menu-item"><a class="menu-item__link" href="#">Поставщикам</a></li>
<li class="footer-menu-item"><a class="menu-item__link" href="#">Раскрытие информации</a></li>
<li class="footer-menu-item"><a class="menu-item__link" href="#">Карьера</a></li>
<li class="footer-menu-item"><a class="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>
<li class="footer-menu-item"><a class="footer-menu-item__link" href="#">Контакты</a></li>
</ul>
</nav>
<div class="footer-info">
......@@ -454,5 +454,6 @@
</div>
</footer>
<script defer src="js/index.js"></script>
</body>
<script defer src="js/menu_subpage.js"></script>
</body>
</html>
\ No newline at end of file
img/header.png 0 → 100644
View file @ cc48fd2a
This diff is collapsed.
img/logo_scroll.svg 0 → 100644
View file @ cc48fd2a
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.3373 18.9605L13.1446 18.9872L17.2457 22.9156V27.0311L8.76309 18.9605L5.89104 18.9472H0.98852L17.2056 34.9681V29.7837L5.87769 18.9605L2.80526 16.1412L0 18.9739L18.9155 37.9745L37.9244 18.9204L35.0925 16.1278L32.0467 18.9872L20.7856 29.7703L20.8123 34.8879L36.9359 19.0006L32.0467 18.9739H29.1079L24.7664 18.8937H21.5337L29.8426 10.7563L18.8754 0L7.92152 10.8632L16.3373 18.9605ZM29.1079 19.0006L33.5696 14.5244L31.4189 12.5201L24.7798 18.9204L20.7856 22.8488V27.0979L29.1079 19.0006ZM13.1446 18.9739L6.41202 12.6003L4.36819 14.7382L8.76309 18.9605L13.1446 18.9739Z" fill="#029745"/>
</svg>
index.html
View file @ cc48fd2a
......@@ -283,7 +283,6 @@
</li>
</ul>
</nav>
<div class="separator"></div>
<ul class="second-mob">
<li class="second-mob-item">
<a class="second-mob-item__link" href="#">
......@@ -635,7 +634,7 @@
</section>
<section class="contacts">
<div class="contacts-map">
<img src="img/map.png" alt="map">
</div>
<div class="contacts-info">
<div class="contacts-info-item">
......@@ -680,14 +679,14 @@
<img src="img/logo.svg" alt="logo: volga">
</a>
<ul class="footer-menu">
<li class="footer-menu-item"><a class="menu-item__link" href="#">Компания</a></li>
<li class="footer-menu-item"><a class="menu-item__link" href="#">Продукция</a></li>
<li class="footer-menu-item"><a class="menu-item__link" href="#">Пресс-центр</a></li>
<li class="footer-menu-item"><a class="menu-item__link" href="#">Устойчивое развитие</a></li>
<li class="footer-menu-item"><a class="menu-item__link" href="#">Поставщикам</a></li>
<li class="footer-menu-item"><a class="menu-item__link" href="#">Раскрытие информации</a></li>
<li class="footer-menu-item"><a class="menu-item__link" href="#">Карьера</a></li>
<li class="footer-menu-item"><a class="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>
<li class="footer-menu-item"><a class="footer-menu-item__link" href="#">Контакты</a></li>
</ul>
</nav>
<div class="footer-info">
......@@ -721,5 +720,16 @@
</div>
</footer>
<script defer src="js/index.js"></script>
<script defer src="js/menu.js"></script>
<script type="text/javascript">
var map;
function initMap() {
map = new google.maps.Map(document.querySelector('.contacts-map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
</body>
</html>
\ No newline at end of file
js/index.js
View file @ cc48fd2a
document.querySelector('.navbar-burger').addEventListener('click', () => {
document.querySelector('.menu-hidden').classList.add('menu-hidden--active');
document.querySelector('body').style.overflow = 'hidden';
document.querySelector('html').style.overflow = 'hidden';
});
document.querySelector('.menu-hidden-form__close').addEventListener('click', () => {
document.querySelector('.menu-hidden').classList.remove('menu-hidden--active');
document.querySelector('body').style.overflowY = 'visible';
document.querySelector('html').style.overflowY = 'visible';
});
document.querySelector('.menu-hidden-mob__close').addEventListener('click', () => {
document.querySelector('.menu-hidden').classList.remove('menu-hidden--active');
document.querySelector('body').style.overflowY = 'visible';
document.querySelector('html').style.overflowY = 'visible';
});
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 < titles.length; i++) {
titles[i].addEventListener('click', () => {
if (mores[i].style.display !== 'none') {
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';
}
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__link');
let secondMenuItems = document.querySelectorAll('.second-menu-item__link');
let menuItems = document.querySelectorAll('.menu-item');
let secondMenuItems = document.querySelectorAll('.second-menu-item');
let submenus = document.querySelectorAll('.submenu');
let secondSubmenus = document.querySelectorAll('.second-submenu');
for (let i = 0; i < menuItems.length; i++) {
menuItems[i].addEventListener('click', () => {
if (submenus[i].classList.contains('submenu--active')) {
submenus[i].classList.remove('submenu--active');
for (let submenu of submenus) {
if (submenu.classList.contains('submenu--active')) {
submenu.classList.remove('submenu--active');
}
menuItems[i].addEventListener('mouseenter', () => {
submenus[i].classList.add('submenu--active');
});
menuItems[i].addEventListener('mouseleave', (e) => {
submenus[i].classList.remove('submenu--active');
});
/*if (submenus[i].classList.contains('submenu--active')) {
submenus[i].classList.remove('submenu--active');
for (let submenu of submenus) {
if (submenu.classList.contains('submenu--active')) {
submenu.classList.remove('submenu--active');
}
}
else {
for (let submenu of submenus) {
if (submenu.classList.contains('submenu--active')) {
submenu.classList.remove('submenu--active');
}
}
else {
for (let submenu of submenus) {
if (submenu.classList.contains('submenu--active')) {
submenu.classList.remove('submenu--active');
}
submenus[i].classList.add('submenu--active');
}
});
submenus[i].classList.add('submenu--active');
}*/
}
for (let i = 0; i < secondMenuItems.length; i++) {
secondMenuItems[i].addEventListener('click', () => {
if (secondSubmenus[i - 1].classList.contains('submenu--active')) {
secondSubmenus[i - 1].classList.remove('submenu--active');
for (let submenu of submenus) {
if (submenu.classList.contains('submenu--active')) {
submenu.classList.remove('submenu--active');
}
secondMenuItems[i].addEventListener('mouseenter', () => {
secondSubmenus[i - 1].classList.add('submenu--active');
});
secondMenuItems[i].addEventListener('mouseleave', () => {
secondSubmenus[i - 1].classList.remove('submenu--active');
});
/*if (secondSubmenus[i - 1].classList.contains('submenu--active')) {
secondSubmenus[i - 1].classList.remove('submenu--active');
for (let submenu of submenus) {
if (submenu.classList.contains('submenu--active')) {
submenu.classList.remove('submenu--active');
}
}
else {
for (let submenu of submenus) {
if (submenu.classList.contains('submenu--active')) {
submenu.classList.remove('submenu--active');
}
}
else {
for (let submenu of submenus) {
if (submenu.classList.contains('submenu--active')) {
submenu.classList.remove('submenu--active');
}
secondSubmenus[i - 1].classList.add('submenu--active');
}
});
secondSubmenus[i - 1].classList.add('submenu--active');
}*/
}
js/menu.js 0 → 100644
View file @ cc48fd2a
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', () => {
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');
}
for (let item of submenus) {
item.classList.add('submenu-scroll');
}
for (let item of secondSubmenus) {
item.classList.add('second-submenu-scroll');
}
}
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');
}
for (let item of submenus) {
item.classList.remove('submenu-scroll');
}
for (let item of secondSubmenus) {
item.classList.remove('second-submenu-scroll');
}
}
if (y > 720) {
document.querySelector('.header').style.opacity = 1;
} else {
document.querySelector('.header').style.opacity = 0.99;
}
});
\ No newline at end of file
js/menu_subpage.js 0 → 100644
View file @ cc48fd2a
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', () => {
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');
}
for (let item of submenus) {
item.classList.add('submenu-scroll');
}
for (let item of secondSubmenus) {
item.classList.add('second-submenu-scroll');
}
}
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');
}
for (let item of submenus) {
item.classList.remove('submenu-scroll');
}
for (let item of secondSubmenus) {
item.classList.remove('second-submenu-scroll');
}
}
if (y > 300) {
document.querySelector('.header').style.opacity = 1;
} else {
document.querySelector('.header').style.opacity = 0.99;
}
});
\ No newline at end of file
styles/style.css
View file @ cc48fd2a
This diff is collapsed.
styles/style.css.map
View file @ cc48fd2a
This diff is collapsed.
styles/style.scss
View file @ cc48fd2a
This diff is collapsed.
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