diff --git a/assets/css/gp-style-core.css b/assets/css/gp-style-core.css
index 66c332f..290f258 100644
--- a/assets/css/gp-style-core.css
+++ b/assets/css/gp-style-core.css
@@ -446,7 +446,7 @@ button{
/* breadcrumbs */
.breadcrumbs{
- margin: 24px;
+ margin: 96px 24px 24px;
display: flex;
align-items: center;
diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css
index f8c5a27..a10d465 100644
--- a/assets/css/gp-style-desktop.css
+++ b/assets/css/gp-style-desktop.css
@@ -6,6 +6,13 @@
position: relative;
background-color: var(--background-white);
+
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+
+ z-index: 200;
}
.header::after{
content: '';
@@ -78,6 +85,9 @@
width: 100%;
height: 100%;
}
+.header__logo-white{
+ display: none;
+}
.header__menu-block{
position: absolute;
@@ -238,11 +248,14 @@
text-decoration: none;
}
.header.white{
- background-color: thistle;
+ /* background-color: thistle; */
}
.header.white .header__logo-black{
display: none;
}
+.header.white .header__logo-white{
+ display: block;
+}
.header.white .main-menu__link{
color: var(--text-white);
}
diff --git a/assets/js/gp-main.js b/assets/js/gp-main.js
index 698e72b..f4be755 100644
--- a/assets/js/gp-main.js
+++ b/assets/js/gp-main.js
@@ -152,118 +152,6 @@ checkbox.forEach(e => {
// checkbox
-
-
-// slider gallery modal
-const gallery = new Swiper('.gallery__slider', {
- spaceBetween: 100,
-
- pagination: {
- el: '.swiper-pagination',
- },
-
- navigation: {
- nextEl: '.swiper-button-next',
- prevEl: '.swiper-button-prev',
- },
-
- scrollbar: {
- el: '.swiper-scrollbar',
- },
-});
-
-let paginationButtons = document.querySelectorAll('.gallery-pagination__item');
-
-paginationButtons.forEach(button => {
- let index = button.dataset.countImg;
-
- button.onclick = function () {
- gallery.slideTo(index);
- }
-})
-
-// open gallery
-let detailImage= document.querySelectorAll('.detail__image');
-detailImage.forEach(button => {
- let index = button.dataset.countImg;
-
- button.onclick = function () {
- gallery.slideTo(index);
-
- document.querySelector('.gallery').classList.add('active');
- }
-})
-
-// close gallery
-
-document.querySelector('.gallery__close').onclick = function () {
- document.querySelector('.gallery').classList.remove('active');
-}
-// slider gallery modal
-
-// slider gallery main phone
-
-// createGalleryPhone('.detail__images', '.detail-images__wrapper', '.detail__image', 980);
-
-const detailPhone = new Swiper('.detail__images-phone', {
- spaceBetween: 100,
-
- pagination: {
- el: '.swiper-pagination',
- },
-
- navigation: {
- nextEl: '.swiper-button-next',
- prevEl: '.swiper-button-prev',
- },
-
- scrollbar: {
- el: '.swiper-scrollbar',
- },
-});
-
-let detailImagesPhones = document.querySelectorAll('.detail-images-phone__image-block');
-
-detailImagesPhones.forEach(button => {
- button.onclick = function (e) {
- let index = button.dataset.countImg;
-
- gallery.slideTo(index);
-
- document.querySelector('.gallery').classList.add('active');
- }
-})
-
-// slider gallery main phone
-
-// detail catalog
-const detailCatalot = new Swiper('.detail__catalot', {
- // Navigation arrows
- navigation: {
- nextEl: '.detail-catalot-control__button.next',
- prevEl: '.detail-catalot-control__button.prev',
- },
- breakpoints: {
- 1600: {
- slidesPerView: 4,
- },
- 1200: {
- slidesPerView: 3,
- },
- 780: {
- slidesPerView: 2.2,
- },
- 100: {
- slidesPerView: 1.3,
- spaceBetween: 20
- },
- }
-
-
-});
-// detail catalog
-
-
// function
function modalOpen(buttonElement, contentElement){
let modal = document.querySelector('.modal'),
@@ -416,11 +304,19 @@ window.addEventListener('resize', (e) => {
modalOpen('.button--filter', '.modal__filter');
modalOpen('.basket-open', '.modal__basket');
modalClose('.modal__close');
- // media
- // gallery
- // if (!document.querySelector('.detail__images').classList.contains('swiper')) {
- // createGalleryPhone('.detail__images', '.detail-images__wrapper', '.detail__image', 980);
- // }
- // gallery
});
-// resize
\ No newline at end of file
+// resize
+
+// scroll
+window.addEventListener("scroll", function (e) {
+ let header = document.querySelector('.header');
+ let scroll = window.scrollY;
+
+ if (scroll >= 75) {
+ header.classList.remove('white')
+ }else{
+ header.classList.add('white')
+ }
+
+});
+// scroll
diff --git a/assets/js/gp-product.js b/assets/js/gp-product.js
new file mode 100644
index 0000000..fc85f55
--- /dev/null
+++ b/assets/js/gp-product.js
@@ -0,0 +1,110 @@
+'use strict';
+
+// slider gallery modal
+const gallery = new Swiper('.gallery__slider', {
+ spaceBetween: 100,
+
+ pagination: {
+ el: '.swiper-pagination',
+ },
+
+ navigation: {
+ nextEl: '.swiper-button-next',
+ prevEl: '.swiper-button-prev',
+ },
+
+ scrollbar: {
+ el: '.swiper-scrollbar',
+ },
+});
+
+let paginationButtons = document.querySelectorAll('.gallery-pagination__item');
+
+paginationButtons.forEach(button => {
+ let index = button.dataset.countImg;
+
+ button.onclick = function () {
+ gallery.slideTo(index);
+ }
+})
+
+// open gallery
+let detailImage= document.querySelectorAll('.detail__image');
+detailImage.forEach(button => {
+ let index = button.dataset.countImg;
+
+ button.onclick = function () {
+ gallery.slideTo(index);
+
+ document.querySelector('.gallery').classList.add('active');
+ }
+})
+
+// close gallery
+
+document.querySelector('.gallery__close').onclick = function () {
+ document.querySelector('.gallery').classList.remove('active');
+}
+// slider gallery modal
+
+// slider gallery main phone
+
+// createGalleryPhone('.detail__images', '.detail-images__wrapper', '.detail__image', 980);
+
+const detailPhone = new Swiper('.detail__images-phone', {
+ spaceBetween: 100,
+
+ pagination: {
+ el: '.swiper-pagination',
+ },
+
+ navigation: {
+ nextEl: '.swiper-button-next',
+ prevEl: '.swiper-button-prev',
+ },
+
+ scrollbar: {
+ el: '.swiper-scrollbar',
+ },
+});
+
+let detailImagesPhones = document.querySelectorAll('.detail-images-phone__image-block');
+
+detailImagesPhones.forEach(button => {
+ button.onclick = function (e) {
+ let index = button.dataset.countImg;
+
+ gallery.slideTo(index);
+
+ document.querySelector('.gallery').classList.add('active');
+ }
+})
+
+// slider gallery main phone
+
+// detail catalog
+const detailCatalot = new Swiper('.detail__catalot', {
+ // Navigation arrows
+ navigation: {
+ nextEl: '.detail-catalot-control__button.next',
+ prevEl: '.detail-catalot-control__button.prev',
+ },
+ breakpoints: {
+ 1600: {
+ slidesPerView: 4,
+ },
+ 1200: {
+ slidesPerView: 3,
+ },
+ 780: {
+ slidesPerView: 2.2,
+ },
+ 100: {
+ slidesPerView: 1.3,
+ spaceBetween: 20
+ },
+ }
+
+
+});
+// detail catalog
\ No newline at end of file
diff --git a/product.html b/product.html
index 5cc402c..13d1ca0 100644
--- a/product.html
+++ b/product.html
@@ -1056,6 +1056,7 @@
+