Skip to content

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

update

parent 6c87ed7d
Expand all Show whitespace changes
Inline Side-by-side
Showing with 828 additions and 197 deletions
.DS_Store
View file @ 9adbc158
No preview for this file type
corp_gazeta.html
View file @ 9adbc158
...@@ -518,8 +518,8 @@ ...@@ -518,8 +518,8 @@
</div> </div>
<div class="gazeta"> <div class="gazeta">
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img big-item-img" style="background-image: url('img/gazeta1.png');">
<img class="gazeta-item-img__photo" src="img/gazeta1.png" alt="gazeta"> <!--<img class="gazeta-item-img__photo" src="img/gazeta1.png" alt="gazeta">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -530,8 +530,8 @@ ...@@ -530,8 +530,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img big-item-img" style="background-image: url('img/gazeta1.png');">
<img class="gazeta-item-img__photo" src="img/gazeta1.png" alt="gazeta"> <!--<img class="gazeta-item-img__photo" src="img/gazeta1.png" alt="gazeta">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -542,8 +542,8 @@ ...@@ -542,8 +542,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img big-item-img" style="background-image: url('img/gazeta1.png');">
<img class="gazeta-item-img__photo" src="img/gazeta1.png" alt="gazeta"> <!--<img class="gazeta-item-img__photo" src="img/gazeta1.png" alt="gazeta">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -554,8 +554,8 @@ ...@@ -554,8 +554,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img big-item-img" style="background-image: url('img/gazeta1.png');">
<img class="gazeta-item-img__photo" src="img/gazeta1.png" alt="gazeta"> <!--<img class="gazeta-item-img__photo" src="img/gazeta1.png" alt="gazeta">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -566,8 +566,8 @@ ...@@ -566,8 +566,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img big-item-img" style="background-image: url('img/gazeta1.png');">
<img class="gazeta-item-img__photo" src="img/gazeta1.png" alt="gazeta"> <!--<img class="gazeta-item-img__photo" src="img/gazeta1.png" alt="gazeta">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -578,8 +578,8 @@ ...@@ -578,8 +578,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img big-item-img" style="background-image: url('img/gazeta1.png');">
<img class="gazeta-item-img__photo" src="img/gazeta1.png" alt="gazeta"> <!--<img class="gazeta-item-img__photo" src="img/gazeta1.png" alt="gazeta">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
......
gazetnaya.html
View file @ 9adbc158
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet"> <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/style.css">
<link rel="stylesheet" href="styles/normalize.css"> <link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/fancybox.css">
</head> </head>
<body class="body-subpage"> <body class="body-subpage">
<div class="menu-hidden" style="background-image: url('img/menu_mask.svg');"> <div class="menu-hidden" style="background-image: url('img/menu_mask.svg');">
...@@ -514,7 +515,7 @@ ...@@ -514,7 +515,7 @@
<h2 id="tech" class="corp-content-wrapper__title">Техническая спецификация</h2> <h2 id="tech" class="corp-content-wrapper__title">Техническая спецификация</h2>
<div class="tech-spec"> <div class="tech-spec">
<div class="tech-spec-item"> <div class="tech-spec-item">
<a href="#" class="tech-spec-item-img"> <a data-fancybox="spec" href="img/tech_spec.png" class="tech-spec-item-img">
<img src="img/tech_spec.png" alt="tech-spec"> <img src="img/tech_spec.png" alt="tech-spec">
<div class="tech-spec-item-img__hover"> <div class="tech-spec-item-img__hover">
<img src="img/tech_search.svg" alt="search"> <img src="img/tech_search.svg" alt="search">
...@@ -527,7 +528,7 @@ ...@@ -527,7 +528,7 @@
</div> </div>
</div> </div>
<div class="tech-spec-item"> <div class="tech-spec-item">
<a href="#" class="tech-spec-item-img"> <a data-fancybox="spec" href="img/tech_spec.png" class="tech-spec-item-img">
<img src="img/tech_spec.png" alt="tech-spec"> <img src="img/tech_spec.png" alt="tech-spec">
<div class="tech-spec-item-img__hover"> <div class="tech-spec-item-img__hover">
<img src="img/tech_search.svg" alt="search"> <img src="img/tech_search.svg" alt="search">
...@@ -547,7 +548,7 @@ ...@@ -547,7 +548,7 @@
<div class="sertificate"> <div class="sertificate">
<div class="sertificate-slider"> <div class="sertificate-slider">
<div class="sertificate-item"> <div class="sertificate-item">
<a href="#" class="tech-spec-item-img"> <a data-fancybox="sert" href="img/tech_spec_sert.png" class="tech-spec-item-img">
<img src="img/tech_spec_sert.png" alt="tech-spec"> <img src="img/tech_spec_sert.png" alt="tech-spec">
<div class="tech-spec-item-img__hover"> <div class="tech-spec-item-img__hover">
<img src="img/tech_search.svg" alt="search"> <img src="img/tech_search.svg" alt="search">
...@@ -731,7 +732,7 @@ ...@@ -731,7 +732,7 @@
<div class="sertificate"> <div class="sertificate">
<div class="sertificate-slider"> <div class="sertificate-slider">
<div class="sertificate-item"> <div class="sertificate-item">
<a href="#" class="tech-spec-item-img"> <a data-fancybox="gallery" href="img/gallery1.png" class="tech-spec-item-img">
<img src="img/gallery1.png" alt="tech-spec"> <img src="img/gallery1.png" alt="tech-spec">
<div class="tech-spec-item-img__hover"> <div class="tech-spec-item-img__hover">
<img src="img/tech_search.svg" alt="search"> <img src="img/tech_search.svg" alt="search">
...@@ -867,6 +868,7 @@ ...@@ -867,6 +868,7 @@
</div> </div>
</footer> </footer>
<script defer src="js/jquery-3.6.0.min.js"></script> <script defer src="js/jquery-3.6.0.min.js"></script>
<script defer src="js/fancybox.umd.js"></script>
<script defer src="js/index.js"></script> <script defer src="js/index.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
img/main.mp4 0 → 100644
View file @ 9adbc158
File added
img/zaglushka.svg 0 → 100644
View file @ 9adbc158
<svg width="533" height="481" viewBox="0 0 533 481" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="533" height="481">
<rect width="533" height="481" fill="white"/>
</mask>
<g mask="url(#mask0)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M348.028 239.988L307.213 240.329L359.641 290.467V342.991L251.199 239.988L214.482 239.818H151.808L359.129 444.289V378.121L214.312 239.988L175.033 204.006L139 240.5L380.817 483L624 239.818L587.796 204.176L548.859 240.671L404.896 378.292L405.238 443.606L611.363 240.841L548.859 240.5H511.289L455.787 239.477H414.459L520.681 135.621L380.646 -2L240.611 136.645L348.028 239.988ZM511.289 240.5L568.327 183.371L540.833 157.961L455.958 239.647L404.896 289.784V343.844L511.289 240.5ZM307.213 240.329L221.143 158.985L195.014 186.27L251.199 240.159L307.213 240.329Z" fill="#D6D9E5" fill-opacity="0.2"/>
</g>
</svg>
index.html
View file @ 9adbc158
...@@ -170,17 +170,11 @@ ...@@ -170,17 +170,11 @@
</div> </div>
</div> </div>
</div> </div>
<header class="header" style="background-image: linear-gradient( <header class="header">
180deg, <video class="video" loop="loop" autoplay="" muted="">
rgba(0, 0, 0, 0.68) 0%, <source src="img/main.mp4" type="video/mp4" />
rgba(0, 0, 0, 0.12) 61.02% </video>
), <div class="bg-overlay"></div>
linear-gradient(
180deg,
rgba(31, 31, 31, 0.425) 0%,
rgba(31, 31, 31, 0.125) 100%
),
url('img/лес2.gif');">
<nav class="navbar"> <nav class="navbar">
<a class="navbar-logo" href="#"> <a class="navbar-logo" href="#">
<img class="navbar-logo__icon" src="img/logo.svg" alt="logo: volga"> <img class="navbar-logo__icon" src="img/logo.svg" alt="logo: volga">
...@@ -566,6 +560,7 @@ ...@@ -566,6 +560,7 @@
</div> </div>
</header> </header>
<section class="production" style="background-image: url('img/production_mask.svg');"> <section class="production" style="background-image: url('img/production_mask.svg');">
<div class="production-text"> <div class="production-text">
<h2 class="production__title">Продукция</h2> <h2 class="production__title">Продукция</h2>
<p class="production__descr">Уникальный продукт – газетная бумага, <p class="production__descr">Уникальный продукт – газетная бумага,
...@@ -575,7 +570,8 @@ ...@@ -575,7 +570,8 @@
<a class="production__link" href="#">Перейти в каталог</a> <a class="production__link" href="#">Перейти в каталог</a>
</div> </div>
<div class="production-list"> <div class="production-list">
<div class="production-list-item" style="background-image: url(img/product1.png);"> <div class="production-list-item">
<img src="img/product1.png" alt="photo">
<svg class="production-list-item__arrow"> <svg class="production-list-item__arrow">
<use xlink:href="img/production_arrow.svg#production_arrow"></use> <use xlink:href="img/production_arrow.svg#production_arrow"></use>
</svg> </svg>
...@@ -613,7 +609,8 @@ ...@@ -613,7 +609,8 @@
</a> </a>
</ul> </ul>
</div> </div>
<div class="production-list-item" style="background-image: url(img/product2.png);"> <div class="production-list-item">
<img src="img/product2.png" alt="photo">
<svg class="production-list-item__arrow"> <svg class="production-list-item__arrow">
<use xlink:href="img/production_arrow.svg#production_arrow"></use> <use xlink:href="img/production_arrow.svg#production_arrow"></use>
</svg> </svg>
...@@ -639,8 +636,8 @@ ...@@ -639,8 +636,8 @@
</a> </a>
</ul> </ul>
</div> </div>
<div class="production-list-item" style="background-image: url(img/product3.png);"> <div class="production-list-item empty" style="background-image: url(img/zaglushka.svg);">
<svg class="production-list-item__arrow"> <!--<svg class="production-list-item__arrow">
<use xlink:href="img/production_arrow.svg#production_arrow"></use> <use xlink:href="img/production_arrow.svg#production_arrow"></use>
</svg> </svg>
<h4 class="production-list-item__title">Специальные виды бумаг</h4> <h4 class="production-list-item__title">Специальные виды бумаг</h4>
...@@ -663,7 +660,7 @@ ...@@ -663,7 +660,7 @@
<use xlink:href="img/points_style.svg#points_style"></use> <use xlink:href="img/points_style.svg#points_style"></use>
</svg>Для пищевых продуктов</li> </svg>Для пищевых продуктов</li>
</a> </a>
</ul> </ul> -->
</div> </div>
</div> </div>
...@@ -985,6 +982,19 @@ ...@@ -985,6 +982,19 @@
</div> </div>
</div> </div>
</footer> </footer>
<div class="modal hidden">
<div class="overlay"></div>
<div class="modal-wrapper">
<a class="modal-close" href="#">
<svg class="modal-close__icon">
<use xlink:href="img/search_close.svg#search_close"></use>
</svg>
</a>
<h2 class="modal__title">Спасибо за обращение</h2>
<p class="modal__descr">Мы свяжемся с Вами в ближайшее время</p>
<div class="modal__button" style="background-image: url('img/form_button_white.png');">Закрыть</div>
</div>
</div>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=6d05ea4e-5eb3-4409-88a3-d4f809c991d9" type="text/javascript"></script> <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=6d05ea4e-5eb3-4409-88a3-d4f809c991d9" type="text/javascript"></script>
<script defer src="js/jquery-3.6.0.min.js"></script> <script defer src="js/jquery-3.6.0.min.js"></script>
<script defer src="js/index.js"></script> <script defer src="js/index.js"></script>
......
js/fancybox.umd.js 0 → 100644
View file @ 9adbc158
This diff is collapsed.
js/index.js
View file @ 9adbc158
...@@ -77,6 +77,7 @@ document.addEventListener("DOMContentLoaded", function () { ...@@ -77,6 +77,7 @@ document.addEventListener("DOMContentLoaded", function () {
enter.style.visibility = 'hidden'; enter.style.visibility = 'hidden';
} }
if (search.style.opacity == '1') { if (search.style.opacity == '1') {
if (y > document.querySelector('.header').offsetHeight - navbar.offsetHeight - search.offsetHeight) { if (y > document.querySelector('.header').offsetHeight - navbar.offsetHeight - search.offsetHeight) {
document.querySelector('.header').style.opacity = 1; document.querySelector('.header').style.opacity = 1;
...@@ -90,6 +91,12 @@ document.addEventListener("DOMContentLoaded", function () { ...@@ -90,6 +91,12 @@ document.addEventListener("DOMContentLoaded", function () {
} }
} }
} }
else {
if (document.querySelector('.submenu--active')) {
if (y > document.querySelector('.header').offsetHeight - navbar.offsetHeight - document.querySelector('.submenu--active').offsetHeight) {
document.querySelector('.header').style.opacity = 1;
}
}
else { else {
if (y > document.querySelector('.header').offsetHeight - navbar.offsetHeight) { if (y > document.querySelector('.header').offsetHeight - navbar.offsetHeight) {
document.querySelector('.header').style.opacity = 1; document.querySelector('.header').style.opacity = 1;
...@@ -103,6 +110,7 @@ document.addEventListener("DOMContentLoaded", function () { ...@@ -103,6 +110,7 @@ document.addEventListener("DOMContentLoaded", function () {
} }
} }
} }
}
}); });
//+/- menu //+/- menu
...@@ -132,16 +140,9 @@ document.addEventListener("DOMContentLoaded", function () { ...@@ -132,16 +140,9 @@ document.addEventListener("DOMContentLoaded", function () {
for (const menu of menuIdElems) { for (const menu of menuIdElems) {
menu?.addEventListener('mouseenter', () => { menu?.addEventListener('mouseenter', () => {
if (search.style.opacity !== '1') { if (search.style.opacity !== '1') {
if (window.innerWidth > 1670) { if (pageYOffset < document.querySelector('.header').offsetHeight - navbar.offsetHeight) {
if (pageYOffset < 680) {
document.querySelector('.header').style.opacity = 1;
}
}
else {
if (pageYOffset < 540) {
document.querySelector('.header').style.opacity = 1; document.querySelector('.header').style.opacity = 1;
} }
}
submenuIdElems.forEach(item => { submenuIdElems.forEach(item => {
if (item.dataset.submenuId === menu.dataset.menuId) { if (item.dataset.submenuId === menu.dataset.menuId) {
item.classList.add('submenu--active'); item.classList.add('submenu--active');
...@@ -151,16 +152,9 @@ document.addEventListener("DOMContentLoaded", function () { ...@@ -151,16 +152,9 @@ document.addEventListener("DOMContentLoaded", function () {
}) })
menu?.addEventListener('mouseleave', () => { menu?.addEventListener('mouseleave', () => {
if (search.style.opacity !== '1') { if (search.style.opacity !== '1') {
if (window.innerWidth > 1670) { if (pageYOffset < document.querySelector('.header').offsetHeight - navbar.offsetHeight) {
if (pageYOffset < 680) {
document.querySelector('.header').style.opacity = 0.99;
}
}
else {
if (pageYOffset < 540) {
document.querySelector('.header').style.opacity = 0.99; document.querySelector('.header').style.opacity = 0.99;
} }
}
submenuIdElems.forEach(item => { submenuIdElems.forEach(item => {
if (item.dataset.submenuId === menu.dataset.menuId) { if (item.dataset.submenuId === menu.dataset.menuId) {
item.classList.remove('submenu--active'); item.classList.remove('submenu--active');
...@@ -179,7 +173,7 @@ document.addEventListener("DOMContentLoaded", function () { ...@@ -179,7 +173,7 @@ document.addEventListener("DOMContentLoaded", function () {
e.preventDefault(); e.preventDefault();
search.style.opacity = '0'; search.style.opacity = '0';
search.style.visibility = 'hidden'; search.style.visibility = 'hidden';
if (pageYOffset < 400) { if (pageYOffset > 400 && pageYOffset < document.querySelector('.header').offsetHeight - navbar.offsetHeight) {
document.querySelector('.header').style.opacity = 0.99; document.querySelector('.header').style.opacity = 0.99;
for (let point of points) { for (let point of points) {
point.style.display = 'flex'; point.style.display = 'flex';
...@@ -192,7 +186,7 @@ document.addEventListener("DOMContentLoaded", function () { ...@@ -192,7 +186,7 @@ document.addEventListener("DOMContentLoaded", function () {
if (search.style.opacity == '1') { if (search.style.opacity == '1') {
search.style.opacity = '0'; search.style.opacity = '0';
search.style.visibility = 'hidden'; search.style.visibility = 'hidden';
if (pageYOffset < 400) { if (pageYOffset > 400 && pageYOffset < document.querySelector('.header').offsetHeight - navbar.offsetHeight) {
document.querySelector('.header').style.opacity = 0.99; document.querySelector('.header').style.opacity = 0.99;
for (let point of points) { for (let point of points) {
point.style.display = 'flex'; point.style.display = 'flex';
...@@ -202,7 +196,7 @@ document.addEventListener("DOMContentLoaded", function () { ...@@ -202,7 +196,7 @@ document.addEventListener("DOMContentLoaded", function () {
else { else {
search.style.opacity = '1'; search.style.opacity = '1';
search.style.visibility = 'visible'; search.style.visibility = 'visible';
if (pageYOffset > 400) { if (pageYOffset > 400 && pageYOffset < 700) {
document.querySelector('.header').style.opacity = 1; document.querySelector('.header').style.opacity = 1;
for (let point of points) { for (let point of points) {
point.style.display = 'none'; point.style.display = 'none';
...@@ -219,7 +213,12 @@ document.addEventListener("DOMContentLoaded", function () { ...@@ -219,7 +213,12 @@ document.addEventListener("DOMContentLoaded", function () {
secondMobItemLink[i]?.addEventListener('click', (e) => { secondMobItemLink[i]?.addEventListener('click', (e) => {
e.preventDefault(); e.preventDefault();
if (i === 0) { if (i === 0) {
if (document.querySelector('.heading-other')) {
search.style.top = document.querySelector('.header').offsetHeight - document.querySelector('.heading-other').offsetHeight + 'px';
}
else {
search.style.top = document.querySelector('.header').offsetHeight + 'px'; search.style.top = document.querySelector('.header').offsetHeight + 'px';
}
if (search.style.opacity == '1') { if (search.style.opacity == '1') {
search.style.opacity = '0'; search.style.opacity = '0';
search.style.visibility = 'hidden'; search.style.visibility = 'hidden';
...@@ -231,8 +230,13 @@ document.addEventListener("DOMContentLoaded", function () { ...@@ -231,8 +230,13 @@ document.addEventListener("DOMContentLoaded", function () {
search.style.visibility = 'visible'; search.style.visibility = 'visible';
} }
} }
else {
if (document.querySelector('.heading-other')) {
enter.style.top = document.querySelector('.header').offsetHeight - document.querySelector('.heading-other').offsetHeight + 'px';
}
else { else {
enter.style.top = document.querySelector('.header').offsetHeight + 'px'; enter.style.top = document.querySelector('.header').offsetHeight + 'px';
}
if (enter.style.opacity == '1') { if (enter.style.opacity == '1') {
enter.style.opacity = '0'; enter.style.opacity = '0';
enter.style.visibility = 'hidden'; enter.style.visibility = 'hidden';
...@@ -562,6 +566,24 @@ document.addEventListener("DOMContentLoaded", function () { ...@@ -562,6 +566,24 @@ document.addEventListener("DOMContentLoaded", function () {
} }
}); });
}); });
//news
const gazetaItems = document.querySelectorAll('.photo-item-img');
for (let item of gazetaItems) {
if (!item.classList.contains('first-item-img')) {
let w = item.offsetWidth;
let h = w * 0.66;
item.style.height = h + 'px';
}
}
//gazeta
const bigItems = document.querySelectorAll('.big-item-img');
for (let item of bigItems) {
let w = item.offsetWidth;
let h = w * 1.42;
item.style.height = h + 'px';
}
//techology-mob //techology-mob
const mobIdElems = document.querySelectorAll('[data-mob-id]'); const mobIdElems = document.querySelectorAll('[data-mob-id]');
const imgIdElems = document.querySelectorAll('[data-img-id]'); const imgIdElems = document.querySelectorAll('[data-img-id]');
...@@ -644,6 +666,116 @@ document.addEventListener("DOMContentLoaded", function () { ...@@ -644,6 +666,116 @@ document.addEventListener("DOMContentLoaded", function () {
}) })
} }
} }
//form
let modal = document.querySelector('.modal');
let modalClose = document.querySelector('.modal-close');
let modalButton = document.querySelector('.modal__button');
modalClose?.addEventListener('click', (e) => {
e.preventDefault;
modal.classList.add('hidden');
})
modalButton?.addEventListener('click', (e) => {
e.preventDefault;
modal.classList.add('hidden');
})
if (document.querySelector('[data-plyr]')) {
Fancybox.bind("[data-plyr]", {
on: {
reveal: (fancybox, slide) => {
if (typeof Plyr === undefined) {
return;
}
let $el;
if (slide.type === "html5video") {
$el = slide.$content.querySelector("video");
} else if (slide.type === "video") {
$el = document.createElement("div");
$el.classList.add("plyr__video-embed");
$el.appendChild(slide.$iframe);
slide.$content.appendChild($el);
}
if ($el) {
slide.player = new Plyr($el);
}
},
"Carousel.unselectSlide": (fancybox, carousel, slide) => {
if (slide.player) {
slide.player.pause();
}
},
"Carousel.selectSlide": (fancybox, carousel, slide) => {
if (slide.player) {
slide.player.play();
}
},
},
});
}
if (document.querySelector('[data-fancybox="gallery"]')) {
Fancybox.bind('[data-fancybox="gallery"]', {
animated: false,
dragToClose: false,
showClass: false,
hideClass: false,
closeButton: "top",
Image: {
click: "close",
wheel: "slide",
zoom: false,
fit: "contain",
},
});
}
if (document.querySelector('[data-fancybox="spec"]')) {
Fancybox.bind('[data-fancybox="spec"]', {
animated: false,
dragToClose: false,
showClass: false,
hideClass: false,
closeButton: "top",
Image: {
click: "close",
wheel: "slide",
zoom: false,
fit: "contain",
},
});
}
if (document.querySelector('[data-fancybox="sert"]')) {
Fancybox.bind('[data-fancybox="sert"]', {
animated: false,
dragToClose: false,
showClass: false,
hideClass: false,
closeButton: "top",
Image: {
click: "close",
wheel: "slide",
zoom: false,
fit: "contain",
},
});
}
}); });
js/plyr.js 0 → 100644
View file @ 9adbc158
This source diff could not be displayed because it is too large. You can view the blob instead.
news.html
View file @ 9adbc158
...@@ -518,7 +518,7 @@ ...@@ -518,7 +518,7 @@
</div> </div>
<div class="gazeta gazeta-news"> <div class="gazeta gazeta-news">
<a class="gazeta-item" style="background-image: url('img/dev_photo.png');"> <a class="gazeta-item" style="background-image: url('img/dev_photo.png');">
<div class="gazeta-item-img"> <div class="gazeta-item-img first-item-img">
<img class="gazeta-item-img__photo" src="img/n1.jpg" alt="photo"> <img class="gazeta-item-img__photo" src="img/n1.jpg" alt="photo">
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
...@@ -553,8 +553,8 @@ ...@@ -553,8 +553,8 @@
</a> </a>
</div> </div>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img photo-item-img" style="background-image: url('img/n1.jpg');">
<img class="gazeta-item-img__photo" src="img/n1.jpg" alt="photo"> <!--<img class="gazeta-item-img__photo" src="img/n1.jpg" alt="photo">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -564,8 +564,8 @@ ...@@ -564,8 +564,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img photo-item-img" style="background-image: url('img/n2.jpg');">
<img class="gazeta-item-img__photo" src="img/n2.jpg" alt="photo"> <!--<img class="gazeta-item-img__photo" src="img/n2.jpg" alt="photo">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -575,8 +575,8 @@ ...@@ -575,8 +575,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img photo-item-img" style="background-image: url('img/n3.jpg');">
<img class="gazeta-item-img__photo" src="img/n3.jpg" alt="photo"> <!--<img class="gazeta-item-img__photo" src="img/n3.jpg" alt="photo">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -586,8 +586,8 @@ ...@@ -586,8 +586,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img photo-item-img" style="background-image: url('img/n3.jpg');">
<img class="gazeta-item-img__photo" src="img/n4.jpg" alt="photo"> <!--<img class="gazeta-item-img__photo" src="img/n4.jpg" alt="photo">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -597,8 +597,8 @@ ...@@ -597,8 +597,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img photo-item-img" style="background-image: url('img/n3.jpg');">
<img class="gazeta-item-img__photo" src="img/n5.jpg" alt="photo"> <!--<img class="gazeta-item-img__photo" src="img/n5.jpg" alt="photo">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -608,8 +608,8 @@ ...@@ -608,8 +608,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img photo-item-img" style="background-image: url('img/gazeta1.png');">
<img class="gazeta-item-img__photo" src="img/n6.jpg" alt="photo"> <!--<img class="gazeta-item-img__photo" src="img/n6.jpg" alt="photo">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
......
photogallery.html
View file @ 9adbc158
...@@ -524,8 +524,8 @@ ...@@ -524,8 +524,8 @@
</div> </div>
<div class="gazeta"> <div class="gazeta">
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img photo-item-img" style="background-image: url('img/phgal1.jpg');">
<img class="gazeta-item-img__photo" src="img/phgal1.jpg" alt="photo"> <!--<img class="gazeta-item-img__photo" src="img/phgal1.jpg" alt="photo">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -537,8 +537,8 @@ ...@@ -537,8 +537,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img photo-item-img" style="background-image: url('img/phgal2.jpg');">
<img class="gazeta-item-img__photo" src="img/phgal2.jpg" alt="photo"> <!--<img class="gazeta-item-img__photo" src="img/phgal2.jpg" alt="photo">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -550,8 +550,8 @@ ...@@ -550,8 +550,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img photo-item-img" style="background-image: url('img/phgal3.jpg');">
<img class="gazeta-item-img__photo" src="img/phgal3.jpg" alt="photo"> <!--<img class="gazeta-item-img__photo" src="img/phgal3.jpg" alt="photo">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -563,8 +563,8 @@ ...@@ -563,8 +563,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img photo-item-img" style="background-image: url('img/phgal1.jpg');">
<img class="gazeta-item-img__photo" src="img/phgal1.jpg" alt="photo"> <!--<img class="gazeta-item-img__photo" src="img/phgal1.jpg" alt="photo">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -576,8 +576,8 @@ ...@@ -576,8 +576,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img photo-item-img" style="background-image: url('img/phgal2.jpg');">
<img class="gazeta-item-img__photo" src="img/phgal2.jpg" alt="photo"> <!--<img class="gazeta-item-img__photo" src="img/phgal2.jpg" alt="photo">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -589,8 +589,8 @@ ...@@ -589,8 +589,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img photo-item-img" style="background-image: url('img/phgal3.jpg');">
<img class="gazeta-item-img__photo" src="img/phgal3.jpg" alt="photo"> <!--<img class="gazeta-item-img__photo" src="img/phgal3.jpg" alt="photo">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -602,8 +602,8 @@ ...@@ -602,8 +602,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img photo-item-img" style="background-image: url('img/phgal1.jpg');">
<img class="gazeta-item-img__photo" src="img/phgal1.jpg" alt="photo"> <!--<img class="gazeta-item-img__photo" src="img/phgal1.jpg" alt="photo">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -615,8 +615,8 @@ ...@@ -615,8 +615,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img photo-item-img" style="background-image: url('img/phgal2.jpg');">
<img class="gazeta-item-img__photo" src="img/phgal2.jpg" alt="photo"> <!--<img class="gazeta-item-img__photo" src="img/phgal2.jpg" alt="photo">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -628,8 +628,8 @@ ...@@ -628,8 +628,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img photo-item-img" style="background-image: url('img/phgal3.jpg');">
<img class="gazeta-item-img__photo" src="img/phgal3.jpg" alt="photo"> <!--<img class="gazeta-item-img__photo" src="img/phgal3.jpg" alt="photo">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -641,8 +641,8 @@ ...@@ -641,8 +641,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img photo-item-img" style="background-image: url('img/phgal1.jpg');">
<img class="gazeta-item-img__photo" src="img/phgal1.jpg" alt="photo"> <!--<img class="gazeta-item-img__photo" src="img/phgal1.jpg" alt="photo">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -654,8 +654,8 @@ ...@@ -654,8 +654,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img photo-item-img" style="background-image: url('img/phgal2.jpg');">
<img class="gazeta-item-img__photo" src="img/phgal2.jpg" alt="photo"> <!--<img class="gazeta-item-img__photo" src="img/phgal2.jpg" alt="photo">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
...@@ -667,8 +667,8 @@ ...@@ -667,8 +667,8 @@
</div> </div>
</a> </a>
<a class="gazeta-item"> <a class="gazeta-item">
<div class="gazeta-item-img"> <div class="gazeta-item-img photo-item-img" style="background-image: url('img/phgal3.jpg');">
<img class="gazeta-item-img__photo" src="img/phgal3.jpg" alt="photo"> <!--<img class="gazeta-item-img__photo" src="img/phgal3.jpg" alt="photo">-->
<div class="gazeta-item-img__hover"></div> <div class="gazeta-item-img__hover"></div>
</div> </div>
<div class="gazeta-item-text"> <div class="gazeta-item-text">
......
products.html
View file @ 9adbc158
...@@ -490,7 +490,8 @@ ...@@ -490,7 +490,8 @@
</header> </header>
<section class="production production-subpage" style="background-image: url('img/company_mask.svg');"> <section class="production production-subpage" style="background-image: url('img/company_mask.svg');">
<div class="production-list production-list-subpage"> <div class="production-list production-list-subpage">
<div class="production-list-item production-list-item-subpage" style="background-image: url(img/product1.png);"> <div class="production-list-item production-list-item-subpage">
<img src="img/product1.png" alt="photo">
<svg class="production-list-item__arrow"> <svg class="production-list-item__arrow">
<use xlink:href="img/production_arrow.svg#production_arrow"></use> <use xlink:href="img/production_arrow.svg#production_arrow"></use>
</svg> </svg>
...@@ -528,7 +529,8 @@ ...@@ -528,7 +529,8 @@
</a> </a>
</ul> </ul>
</div> </div>
<div class="production-list-item production-list-item-subpage" style="background-image: url(img/product2.png);"> <div class="production-list-item production-list-item-subpage">
<img src="img/product2.png" alt="photo">
<svg class="production-list-item__arrow"> <svg class="production-list-item__arrow">
<use xlink:href="img/production_arrow.svg#production_arrow"></use> <use xlink:href="img/production_arrow.svg#production_arrow"></use>
</svg> </svg>
...@@ -554,7 +556,8 @@ ...@@ -554,7 +556,8 @@
</a> </a>
</ul> </ul>
</div> </div>
<div class="production-list-item production-list-item-subpage" style="background-image: url(img/product3.png);"> <div class="production-list-item production-list-item-subpage">
<img src="img/product3.png" alt="photo">
<svg class="production-list-item__arrow"> <svg class="production-list-item__arrow">
<use xlink:href="img/production_arrow.svg#production_arrow"></use> <use xlink:href="img/production_arrow.svg#production_arrow"></use>
</svg> </svg>
...@@ -580,7 +583,8 @@ ...@@ -580,7 +583,8 @@
</a> </a>
</ul> </ul>
</div> </div>
<div class="production-list-item production-list-item-subpage" style="background-image: url(img/product1.png);"> <div class="production-list-item production-list-item-subpage">
<img src="img/product1.png" alt="photo">
<svg class="production-list-item__arrow"> <svg class="production-list-item__arrow">
<use xlink:href="img/production_arrow.svg#production_arrow"></use> <use xlink:href="img/production_arrow.svg#production_arrow"></use>
</svg> </svg>
......
styles/fancybox.css 0 → 100644
View file @ 9adbc158
This diff is collapsed.
styles/plyr.css 0 → 100644
View file @ 9adbc158
This diff is collapsed.
styles/style.css
View file @ 9adbc158
This diff is collapsed.
styles/style.css.map
View file @ 9adbc158
This source diff could not be displayed because it is too large. You can view the blob instead.
styles/style.scss
View file @ 9adbc158
...@@ -30,13 +30,45 @@ body { ...@@ -30,13 +30,45 @@ body {
background: #f6f8fa; background: #f6f8fa;
} }
.video {
top: 0;
object-fit: cover;
height: 100%;
width: 100vw;
left: 0;
z-index: 0;
position: absolute;
opacity: 0.99;
}
.bg-overlay {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: ' ';
z-index: 0;
backface-visibility: hidden;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.68) 0%,
rgba(0, 0, 0, 0.12) 61.02%
),
linear-gradient(
180deg,
rgba(31, 31, 31, 0.425) 0%,
rgba(31, 31, 31, 0.125) 100%
);
opacity: 0.8;
}
.header { .header {
opacity: 0.99; opacity: 0.99;
position: relative; position: relative;
width: 100%; width: 100%;
height: 800px; height: 800px;
background-repeat: no-repeat;
background-size: cover;
&-subpage { &-subpage {
height: auto; height: auto;
background-repeat: no-repeat; background-repeat: no-repeat;
...@@ -525,6 +557,7 @@ body { ...@@ -525,6 +557,7 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
z-index: 2;
&__title { &__title {
font-weight: normal; font-weight: normal;
font-size: 18px; font-size: 18px;
...@@ -600,6 +633,7 @@ body { ...@@ -600,6 +633,7 @@ body {
&-wrapper { &-wrapper {
margin-top: 129px; margin-top: 129px;
border-left: 1px rgba($color: #fff, $alpha: 0.1) solid; border-left: 1px rgba($color: #fff, $alpha: 0.1) solid;
z-index: 2;
} }
&-item { &-item {
margin-bottom: 35px; margin-bottom: 35px;
...@@ -636,7 +670,7 @@ body { ...@@ -636,7 +670,7 @@ body {
.point { .point {
position: absolute; position: absolute;
top: 650px; top: 650px;
z-index: 1; z-index: 2;
margin: 0 20px 0 108px; margin: 0 20px 0 108px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -647,6 +681,7 @@ body { ...@@ -647,6 +681,7 @@ body {
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
width: 25%; width: 25%;
z-index: 3;
&__num { &__num {
font-weight: 300; font-weight: 300;
font-size: 30px; font-size: 30px;
...@@ -684,7 +719,7 @@ body { ...@@ -684,7 +719,7 @@ body {
&-item:hover { &-item:hover {
background: #ffffff; background: #ffffff;
cursor: pointer; cursor: pointer;
transform: translateY(-43%); transform: translateY(-47%);
} }
&-item:hover &-item__num, &-item:hover &-item__num,
&-item:hover &-item-wrapper__title { &-item:hover &-item-wrapper__title {
...@@ -770,6 +805,19 @@ body { ...@@ -770,6 +805,19 @@ body {
box-sizing: border-box; box-sizing: border-box;
margin-right: 20px; margin-right: 20px;
transition: 0.4s; transition: 0.4s;
img {
clip-path: polygon(0% 25%, 25% 0%, 100% 0%, 100% 75%, 75% 100%);
height: 300px;
width: 300px;
object-fit: cover;
position: absolute;
top: 0;
right: 0;
}
div {
padding-left: 32px;
width: 350px;
}
&-subpage { &-subpage {
margin-bottom: 32px; margin-bottom: 32px;
margin-right: 40px; margin-right: 40px;
...@@ -797,14 +845,15 @@ body { ...@@ -797,14 +845,15 @@ body {
line-height: 130%; line-height: 130%;
color: #16291f; color: #16291f;
margin: 40px 0; margin: 40px 0;
width: 150px; width: 180px;
transition: 0.4s; transition: 0.4s;
margin-left: 33px; margin-left: 33px;
} }
&__points { &__points {
list-style: none; list-style: none;
} }
&__descr { &__descr,
div {
font-weight: normal; font-weight: normal;
font-size: 16px; font-size: 16px;
line-height: 160%; line-height: 160%;
...@@ -1047,7 +1096,6 @@ body { ...@@ -1047,7 +1096,6 @@ body {
} }
.press { .press {
background-color: #fff;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right top; background-position: right top;
background-attachment: fixed; background-attachment: fixed;
...@@ -1799,6 +1847,99 @@ body { ...@@ -1799,6 +1847,99 @@ body {
} }
} }
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
&-wrapper {
position: fixed;
top: 50%;
left: 50%;
z-index: 9;
max-width: 592px;
width: 576px;
height: 331px;
box-sizing: border-box;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 64px 56px;
box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.25);
}
&-close {
position: absolute;
top: 16px;
right: 16px;
transition: 0.4s;
&__icon {
margin-left: 8px;
width: 16px;
height: 17px;
fill: #16291f;
transition: 0.4s;
}
}
&-close:hover &-close__icon {
fill: #029745;
}
&__title {
font-weight: 800;
font-size: 36px;
line-height: 110%;
letter-spacing: 0.02em;
color: #16291f;
margin-bottom: 32px;
text-align: center;
}
&__descr {
font-weight: 300;
font-size: 18px;
line-height: 130%;
text-align: center;
color: #16291f;
margin-bottom: 48px;
}
&__button {
background-color: #029745;
background-repeat: no-repeat;
background-size: 68px;
background-position: -5px 0px;
width: 197px;
height: 60px;
border-width: 0;
font-weight: bold;
font-size: 15px;
line-height: 120%;
letter-spacing: 0.15em;
color: #fff;
cursor: pointer;
transition: 0.4s;
text-transform: uppercase;
padding: 21px 56px;
box-sizing: border-box;
margin: 0 auto;
}
&__button:hover {
background-color: #28be4a;
}
&__button:active {
background-color: #07803d;
}
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
z-index: 2;
}
//company //company
.cards { .cards {
background-repeat: no-repeat; background-repeat: no-repeat;
...@@ -2722,7 +2863,10 @@ body { ...@@ -2722,7 +2863,10 @@ body {
display: flex; display: flex;
&-img { &-img {
position: relative; position: relative;
height: 100%; max-width: 320px;
> img {
width: 100%;
}
&__hover { &__hover {
background: linear-gradient( background: linear-gradient(
0deg, 0deg,
...@@ -2788,6 +2932,8 @@ body { ...@@ -2788,6 +2932,8 @@ body {
flex-direction: column; flex-direction: column;
margin-right: 32px; margin-right: 32px;
opacity: 0.99; opacity: 0.99;
max-width: 320px;
flex-shrink: 0;
&__label { &__label {
margin-top: 16px; margin-top: 16px;
font-weight: bold; font-weight: bold;
...@@ -2966,11 +3112,14 @@ body { ...@@ -2966,11 +3112,14 @@ body {
margin-right: 20px; margin-right: 20px;
&-img { &-img {
position: relative; position: relative;
&__photo { width: 100%;
background-repeat: no-repeat;
background-size: cover;
/*&__photo {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }*/
&__video { &__video {
position: absolute; position: absolute;
top: 0; top: 0;
...@@ -3027,7 +3176,8 @@ body { ...@@ -3027,7 +3176,8 @@ body {
margin-right: 8px; margin-right: 8px;
} }
} }
&__label { &__label,
p {
font-weight: 300; font-weight: 300;
font-size: 18px; font-size: 18px;
line-height: 130%; line-height: 130%;
...@@ -3059,7 +3209,7 @@ body { ...@@ -3059,7 +3209,7 @@ body {
background-position: center center; background-position: center center;
background-size: cover; background-size: cover;
} }
.gazeta-news > .gazeta-item:first-child .gazeta-item-img__photo { .gazeta-news > .gazeta-item:first-child .gazeta-item-img {
display: none; display: none;
} }
.gazeta-news > .gazeta-item:first-child .gazeta-item-text { .gazeta-news > .gazeta-item:first-child .gazeta-item-text {
...@@ -3100,8 +3250,8 @@ body { ...@@ -3100,8 +3250,8 @@ body {
height: auto; height: auto;
box-sizing: border-box; box-sizing: border-box;
} }
.gazeta-news-wrapper > .gazeta-item:nth-child(1) .gazeta-item-img__photo, .gazeta-news-wrapper > .gazeta-item:nth-child(1) .gazeta-item-img,
.gazeta-news-wrapper > .gazeta-item:nth-child(2) .gazeta-item-img__photo { .gazeta-news-wrapper > .gazeta-item:nth-child(2) .gazeta-item-img {
display: none; display: none;
} }
...@@ -3975,7 +4125,7 @@ body { ...@@ -3975,7 +4125,7 @@ body {
} }
} }
&-item:hover { &-item:hover {
transform: translateY(-51%); transform: translateY(-47%);
} }
} }
.production { .production {
...@@ -3992,7 +4142,8 @@ body { ...@@ -3992,7 +4142,8 @@ body {
font-size: 38px; font-size: 38px;
margin-bottom: 43px; margin-bottom: 43px;
} }
&__descr { &__descr,
div {
font-size: 14px; font-size: 14px;
margin-bottom: 18px; margin-bottom: 18px;
} }
...@@ -4010,6 +4161,10 @@ body { ...@@ -4010,6 +4161,10 @@ body {
padding: 50px 52px; padding: 50px 52px;
min-height: 315px; min-height: 315px;
background-size: 180px 180px; background-size: 180px 180px;
img {
height: 200px;
width: 200px;
}
&__image { &__image {
width: 185px; width: 185px;
} }
...@@ -4025,6 +4180,9 @@ body { ...@@ -4025,6 +4180,9 @@ body {
font-size: 14px; font-size: 14px;
} }
} }
.empty {
display: none;
}
} }
&-separator { &-separator {
margin-top: 63px; margin-top: 63px;
...@@ -4700,7 +4858,8 @@ body { ...@@ -4700,7 +4858,8 @@ body {
&__download { &__download {
font-size: 12px; font-size: 12px;
} }
&__label { &__label,
p {
font-size: 14px; font-size: 14px;
} }
} }
...@@ -5080,6 +5239,7 @@ body { ...@@ -5080,6 +5239,7 @@ body {
position: static; position: static;
justify-content: space-between; justify-content: space-between;
height: 104px; height: 104px;
opacity: 0.99;
&-logo img { &-logo img {
height: 64px; height: 64px;
} }
...@@ -5217,6 +5377,7 @@ body { ...@@ -5217,6 +5377,7 @@ body {
display: none; display: none;
} }
.second-mob { .second-mob {
opacity: 0.99;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
list-style: none; list-style: none;
...@@ -5381,7 +5542,8 @@ body { ...@@ -5381,7 +5542,8 @@ body {
font-size: 32px; font-size: 32px;
margin-bottom: 36px; margin-bottom: 36px;
} }
&__descr { &__descr,
div {
font-size: 12px; font-size: 12px;
margin-bottom: 15px; margin-bottom: 15px;
} }
...@@ -5409,6 +5571,10 @@ body { ...@@ -5409,6 +5571,10 @@ body {
margin-bottom: 8px; margin-bottom: 8px;
display: flex; display: flex;
justify-content: center; justify-content: center;
img {
height: 140px;
width: 140px;
}
&__image { &__image {
width: 152px; width: 152px;
} }
...@@ -5674,7 +5840,7 @@ body { ...@@ -5674,7 +5840,7 @@ body {
margin: 0; margin: 0;
padding: 52px 16px; padding: 52px 16px;
&-item { &-item {
background-size: 15%; background-size: 120px;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
padding: 62px 46px; padding: 62px 46px;
...@@ -6704,3 +6870,64 @@ body { ...@@ -6704,3 +6870,64 @@ body {
.hidden { .hidden {
display: none; display: none;
} }
.fancybox__container {
--carousel-button-bg: rgb(0 0 0 / 44%);
--carousel-button-svg-width: 24px;
--carousel-button-svg-height: 24px;
--carousel-button-svg-stroke-width: 2.5;
--carousel-button-svg-filter: none;
}
.fancybox__nav {
--carousel-button-svg-width: 22px;
--carousel-button-svg-height: 22px;
--carousel-button-svg-stroke-width: 3;
}
.fancybox__nav .carousel__button.is-prev {
left: 30px;
}
.fancybox__nav .carousel__button.is-next {
right: 30px;
}
.carousel__button.is-close {
top: 30px;
right: 30px;
}
.fancybox__slide {
padding: 0;
}
.fancybox__thumbs {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
}
.fancybox__thumbs .carousel__slide {
padding: 20px 10px;
overflow: visible;
}
.fancybox__thumb {
border-radius: 6px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3),
0 2px 4px -1px rgba(0, 0, 0, 0.26);
}
.is-nav-selected::after {
display: none;
}
.is-nav-selected .fancybox__thumb {
transform: scale(1.25);
}
videogallery.html
View file @ 9adbc158
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