Skip to content

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

update

parent 927dbcf0
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 797 additions and 93 deletions
company.html
View file @ 760e7935
This diff is collapsed.
img/company_icons.svg 0 → 100644
View file @ 760e7935
<svg width="0" height="0" class="hidden">
<symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 67" id="corp">
<path d="M3.783 46.53v19.2h58.434v-19.2H65v-25.6c0-3.52-2.504-6.4-5.565-6.4H6.565C3.505 14.53 1 17.41 1 20.93v25.6h2.783z" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M39.956 40.13H26.043v9.6h13.913v-9.6zm5.566-25.6H20.479v-3.2c0-5.44 3.617-9.6 8.347-9.6h8.348c4.73 0 8.348 4.16 8.348 9.6v3.2zm-41.74 32h22.261m13.914 0h22.26" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
</symbol>
<symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 67" id="head">
<path d="M44.867 37.904c1.6-3.618 2.133-7.792 2.133-11.13H17.667c0 3.338.533 7.512 2.133 11.13m21.867 5.565H23l2.667 22.26H39l2.667-22.26zM7 43.469h50.667" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M32.333 21.208c5.155 0 9.334-4.36 9.334-9.74 0-5.378-4.179-9.738-9.334-9.738C27.18 1.73 23 6.09 23 11.469c0 5.379 4.179 9.739 9.333 9.739zM31 26.773l-.8 11.13h4.267l-.8-11.13H31z" stroke-width="2" stroke-miterlimit="10" stroke-linejoin="round"></path>
</symbol>
<symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 67" id="history">
<path d="M61.826 1.73s1.391 58.434-8.348 58.434-1.391-11.13-8.348-11.13c-6.956 0 1.392 16.696-8.347 16.696H2c9.74 0 1.391-16.696 8.348-16.696H24.26C27.32 33.452 27.044 1.73 27.044 1.73h34.782zM24.26 49.034h20.87m8.348 11.13H41.791" stroke-width="2" stroke-miterlimit="10" stroke-linejoin="round"></path>
<path d="M35.392 10.078h5.565m-2.783 5.565h15.304M34 21.208h18.087M34 26.773h19.478M34 32.339h16.696m-18.088 5.565h19.479m-20.869 5.565h22.26" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
</symbol>
<symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 67" id="prod">
<path d="M6.564 8.242C19.086-8.583 31.608 13.851 44.13 2.634 28.825 23.666 17.695 1.232 6.564 8.242zm13.915 40.662h4.173m-4.173 8.413h4.173m12.522-8.413h4.174m-4.174 8.413h4.174m12.522-8.413h4.174m-4.174 8.413h4.174" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M1 65.73V43.856l3.896-28.603h6.678l5.565 26.08 14.47-9.815v9.815l16.695-9.535v9.535L65 31.518V65.73H1z" stroke-width="2" stroke-miterlimit="10" stroke-linejoin="round"></path>
</symbol>
<symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 67" id="strategy">
<path d="M1 65.73h64M12.13 51.817H3.782V65.73h8.348V51.817zm16.696-13.913h-8.348V65.73h8.348V37.904zm16.696 5.565h-8.348v22.26h8.348V43.47zM62.217 23.99h-8.348v41.74h8.348V23.99zM7.956 35.121a2.783 2.783 0 100-5.565 2.783 2.783 0 000 5.565zm16.696-13.913a2.783 2.783 0 100-5.565 2.783 2.783 0 000 5.565zm16.696 5.565a2.783 2.783 0 100-5.565 2.783 2.783 0 000 5.565zM58.043 7.295a2.783 2.783 0 100-5.565 2.783 2.783 0 000 5.565zM10.182 30.669l12.243-10.574m4.732-.835l11.687 3.896M56.096 6.738l-12.8 15.027" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
</symbol>
</svg>
\ No newline at end of file
img/company_inner.png 0 → 100644
View file @ 760e7935
This diff is collapsed.
img/company_mask.svg 0 → 100644
View file @ 760e7935
This diff is collapsed.
img/company_prod_mask.svg 0 → 100644
View file @ 760e7935
This diff is collapsed.
img/top_mask_pl.svg
View file @ 760e7935
<svg width="427" height="245" viewBox="0 0 427 245" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg width="427" height="493" viewBox="0 0 427 493" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M171.907 246.329L212.89 245.986L105.03 142.216L245.643 3L386.255 141.189L279.595 245.473H321.093L376.824 246.5M171.907 246.329L224.551 296.673V349.414L115.662 245.986L78.7937 245.815H15.8609L224.036 451.129V384.689L78.6222 245.986L39.182 209.855L3 246.5L245.814 490L490 245.815L453.646 210.026L414.549 246.671L269.993 384.86L270.336 450.444L477.31 246.842L414.549 246.5H376.824M171.907 246.329L85.4813 164.648L59.2451 192.046L115.662 246.158L171.907 246.329ZM376.824 246.5L434.098 189.135L406.49 163.621L321.265 245.644L269.993 295.988V350.27L376.824 246.5Z" stroke="#D6D9E5" stroke-opacity="0.2" stroke-width="3"/>
</svg>
index.html
View file @ 760e7935
......@@ -161,7 +161,6 @@
</div>
</div>
<header class="header">
<nav class="navbar">
<a class="navbar-logo" href="#">
<img src="img/logo.svg" alt="logo: volga">
......@@ -721,83 +720,6 @@
</div>
</div>
</footer>
<script>
document.querySelector('.navbar-burger').addEventListener('click', () => {
document.querySelector('.menu-hidden').classList.add('menu-hidden--active');
document.querySelector('body').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('.menu-hidden-mob__close').addEventListener('click', () => {
document.querySelector('.menu-hidden').classList.remove('menu-hidden--active');
document.querySelector('body').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';
}
}
});
}
let menuItems = document.querySelectorAll('.menu-item__link');
let secondMenuItems = document.querySelectorAll('.second-menu-item__link');
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');
}
}
}
else {
for (let submenu of submenus) {
if (submenu.classList.contains('submenu--active')) {
submenu.classList.remove('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');
}
}
}
else {
for (let submenu of submenus) {
if (submenu.classList.contains('submenu--active')) {
submenu.classList.remove('submenu--active');
}
}
secondSubmenus[i-1].classList.add('submenu--active');
}
});
}
</script>
<script defer src="js/index.js"></script>
</body>
</html>
\ No newline at end of file
js/index.js 0 → 100644
View file @ 760e7935
document.querySelector('.navbar-burger').addEventListener('click', () => {
document.querySelector('.menu-hidden').classList.add('menu-hidden--active');
document.querySelector('body').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('.menu-hidden-mob__close').addEventListener('click', () => {
document.querySelector('.menu-hidden').classList.remove('menu-hidden--active');
document.querySelector('body').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';
}
}
});
}
let menuItems = document.querySelectorAll('.menu-item__link');
let secondMenuItems = document.querySelectorAll('.second-menu-item__link');
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');
}
}
}
else {
for (let submenu of submenus) {
if (submenu.classList.contains('submenu--active')) {
submenu.classList.remove('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');
}
}
}
else {
for (let submenu of submenus) {
if (submenu.classList.contains('submenu--active')) {
submenu.classList.remove('submenu--active');
}
}
secondSubmenus[i - 1].classList.add('submenu--active');
}
});
}
styles/style.css
View file @ 760e7935
......@@ -25,6 +25,12 @@ body {
background-size: cover;
}
.header-subpage {
height: 330px;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.85)), to(rgba(0, 0, 0, 0.15))), url("../img/лес2.gif") no-repeat;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.15) 100%), url("../img/лес2.gif") no-repeat;
}
.menu-hidden {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
......@@ -564,6 +570,7 @@ body {
line-height: 110%;
letter-spacing: 0.02em;
color: #ffffff;
margin: 24px 0 56px 0;
}
.heading-other-nav {
......@@ -1994,6 +2001,127 @@ body {
margin-right: 7px;
}
.cards {
background: url("../img/company_mask.svg") no-repeat right center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 64px 140px 79px;
}
.cards-item {
width: 309px;
padding: 40px 32px;
background: #fff;
margin-right: 24px;
display: block;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.cards-item__icon {
width: 64px;
height: 64px;
margin-bottom: 24px;
stroke: #029745;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.cards-item__title {
font-weight: bold;
font-size: 18px;
line-height: 130%;
color: #16291f;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.cards-item:last-child {
margin-right: 0;
}
.cards-item:hover {
background: #029745;
}
.cards-item:hover .cards-item__icon {
stroke: #fff;
}
.cards-item:hover .cards-item__title {
color: #fff;
}
.cards-separator {
background: #029745;
height: 5px;
width: 310px;
margin-left: 140px;
}
.company-about {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 20px 280px 20px 0;
}
.company-about__text {
font-weight: 300;
font-size: 24px;
line-height: 160%;
color: #16291f;
}
.company-view {
background: url("../img/company_view.png") no-repeat;
width: 980px;
height: 517px;
}
.company-location {
padding: 20px 260px 20px 120px;
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-attachment: fixed;
}
.company-prod {
width: 480px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 117px 89px 67px 80px;
margin-left: 500px;
background: #029745 url(../img/company_prod_mask.svg) no-repeat left bottom;
}
.company-prod__text {
font-weight: 300;
font-size: 24px;
line-height: 160%;
color: #ffffff;
}
.company-inner {
background: url("../img/company_inner.png") no-repeat;
width: 940px;
height: 710px;
}
.section-subpage {
border-width: 0;
}
.company-video-subpage {
width: calc(50% - 20px);
}
@media (max-width: 1800px) {
.navbar {
padding: 18px 100px;
......
styles/style.css.map
View file @ 760e7935
This diff is collapsed.
styles/style.scss
View file @ 760e7935
......@@ -31,6 +31,15 @@ body {
),
url('../img/лес2.gif') no-repeat;
background-size: cover;
&-subpage {
height: 330px;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.85) 0%,
rgba(0, 0, 0, 0.15) 100%
),
url('../img/лес2.gif') no-repeat;
}
}
.menu-hidden {
......@@ -416,6 +425,7 @@ body {
line-height: 110%;
letter-spacing: 0.02em;
color: #ffffff;
margin: 24px 0 56px 0;
}
&-nav {
display: flex;
......@@ -1442,6 +1452,106 @@ body {
}
}
//company
.cards {
background: url('../img/company_mask.svg') no-repeat right center;
display: flex;
padding: 64px 140px 79px;
&-item {
width: 309px;
padding: 40px 32px;
background: #fff;
margin-right: 24px;
display: block;
transition: 0.4s;
&__icon {
width: 64px;
height: 64px;
margin-bottom: 24px;
stroke: #029745;
transition: 0.4s;
}
&__title {
font-weight: bold;
font-size: 18px;
line-height: 130%;
color: #16291f;
transition: 0.4s;
}
}
&-item:last-child {
margin-right: 0;
}
&-item:hover {
background: #029745;
}
&-item:hover &-item__icon {
stroke: #fff;
}
&-item:hover &-item__title {
color: #fff;
}
&-separator {
background: #029745;
height: 5px;
width: 310px;
margin-left: 140px;
}
}
.company {
&-about {
display: flex;
align-items: center;
padding: 20px 280px 20px 0;
&__text {
font-weight: 300;
font-size: 24px;
line-height: 160%;
color: #16291f;
}
}
&-view {
background: url('../img/company_view.png') no-repeat;
width: 980px;
height: 517px;
}
&-location {
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-attachment: fixed;
}
&-prod {
width: 480px;
box-sizing: border-box;
padding: 117px 89px 67px 80px;
margin-left: 500px;
background: #029745 url(../img/company_prod_mask.svg) no-repeat left bottom;
&__text {
font-weight: 300;
font-size: 24px;
line-height: 160%;
color: #ffffff;
}
}
&-inner {
background: url('../img/company_inner.png') no-repeat;
width: 940px;
height: 710px;
}
}
.section-subpage {
border-width: 0;
}
.company-video-subpage {
width: calc(50% - 20px);
}
@media (max-width: 1800px) {
.navbar {
padding: 18px 100px;
......
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