Good-Production/template-for-verstka
13
2
Fork 0
Code Pull Requests Releases Wiki Activity

доделал product

Browse Source
This commit is contained in:
Kirill Pet
2024-10-09 02:59:06 +03:00
parent db58f5c463
commit 44fee90f1a
7 changed files with 1985 additions and 1055 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
assets/css/gp-style-core.css
View File

@@ -293,6 +293,12 @@ button{
}
.main-menu__item:hover{
opacity: .8;
background: #f2f2f2;
border-radius: 24px;
}
.main-menu__item:active{
opacity: 1;
}
.main-menu__link{
display: block;

188
assets/css/gp-style-desktop.css
View File

@@ -387,9 +387,17 @@
.product-item-label__tag--new{
background: var(--gradient-blue);
}
.product-item-label__tag--new-green{
background: #d9ffcc;
color: #4e7623;
}
.product-item-label__tag--sale{
background: var(--gradient-red);
}
.product-item-label__tag--sale-red{
color: #fa0505;
background: #ffe5e5;
}
.product-item-label__tag--black{
background: var(--background-black);
color: var(--text-white);
@@ -433,6 +441,10 @@
.product-item__price{
margin-top: 8px;
display: flex;
align-items: center;
}
.product-item__price p{
font-family: var(--font-family);
font-weight: 700;
font-size: 20px;
@@ -440,9 +452,37 @@
text-transform: uppercase;
color: var(--text-black);
}
.product-item__price::after{
.product-item__price p::after{
content: '₽';
}
.product-item__price span{
margin-left: 9px;
font-family: var(--font-family);
font-weight: 500;
font-size: 12px;
line-height: 133%;
color: var(--text-red);
}
.product-item__price del{
margin-left: 24px;
font-family: var(--font-family);
font-weight: 700;
font-size: 18px;
line-height: 133%;
text-transform: uppercase;
text-decoration: line-through;
color: var(--text-6);
}
.product-item__price del::after{
content: '₽';
}
.product-item__price span::before{
content: '-';
}
.product-item__price span::after{
content: '%';
}
.product-item__bye{
margin-top: 8px;
}
@@ -804,6 +844,7 @@
display: flex;
align-items: center;
flex-wrap: wrap;
}
.detail-block-form__item--radio{
margin: 16px -8px -8px -8px;
@@ -854,6 +895,10 @@
}
.detail__catalot{
margin-top: 64px;
width: 100%;
overflow: hidden;
}
.detail-catalot__header{
display: flex;
@@ -884,7 +929,7 @@
font-size: 24px;
line-height: 100%;
text-transform: uppercase;
text-align: center;
text-align: start;
color: var(--text-0);
}
.detail-catalot__content{
@@ -894,6 +939,12 @@
display: flex;
}
.detail__catalot .product__item{
width: calc(100% - 24px);
}
.detail__images-phone{
display: none;
}
.toggle__table{
margin-top: 32px;
@@ -974,8 +1025,132 @@
opacity: .6;
}
.radio-button{
}
.radio-button__input{
display: none;
}
/* detail */
/* gallery */
.gallery{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 24px;
display: flex;
align-items: center;
background: var(--background-white);
pointer-events: none;
opacity: 0;
transition: opacity .2s ease-out;
z-index: 300;
}
.gallery.active{
opacity: 1;
pointer-events: auto;
}
.gallery__close{
position: absolute;
top: 24px;
right: 24px;
z-index: 10;
}
.gallery__pagination{
margin: -12px;
}
.gallery-pagination__item{
margin: 12px;
width: 134px;
height: 136px;
display: flex;
justify-content: center;
align-items: center;
border: none;
border-radius: 16px;
background: var(--background-grey);
}
.gallery-pagination__item img{
width: 90%;
max-height: 90%;
object-fit: contain;
}
.gallery__slider{
margin-left: 48px;
padding: 100px;
}
.gallery__slider{
width: 100%;
}
.gallery__slider .swiper-pagination{
display: none;
}
.gallery__slider .swiper-button-next::after,
.gallery__slider .swiper-button-prev::after{
display: none;
}
.gallery-button{
width: 48px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid var(--background-black);
border-radius: 20px;
background: none;
}
.gallery__slider .swiper-slide{
display: flex;
justify-content: center;
align-items: center;
}
.gallery__block{
width: 600px;
height: 774px;
display: flex;
justify-content: center;
align-items: center;
background: var(--background-grey);
border-radius: 24px;
}
.gallery__block img{
width: 90%;
max-height: 90%;
object-fit: contain;
}
.gallery__wrapper{
margin: 0 auto;
max-width: 1600px;
display: flex;
align-items: center;
}
/* .swiper {
width: 600px;
height: 300px;
} */
/* gallery */
@media only screen and (max-width: 1600px) {
.wrapper{
@@ -987,8 +1162,17 @@
width: calc(33.3% - 24px);
}
.gallery__wrapper{
max-width: 1280px;
}
}
@media only screen and (max-width: 1365px) {
.gallery__wrapper{
max-width: 100%;
}
}

12
assets/css/gp-style-mobile.css
View File

@@ -10,6 +10,9 @@
.modal__basket{
width: 100%;
}
.modal__filter{
width: 100%;
}
.modal__button .to-know{
display: flex;
@@ -97,8 +100,11 @@
.modal__aside{
left: 0;
}
.modal__filter{
width: 100%;
}
/* modal */
/* detail */
.detail-block-form__item,
.detail-block-form__submit{
min-width: 100%;
}
}

91
assets/css/gp-style-tablet.css
View File

@@ -49,6 +49,8 @@
display: none;
}
/* footer */
}
@media only screen and (max-width: 980px) {
@@ -63,14 +65,97 @@
.detail{
flex-direction: column;
}
.detail__images,
.detail__images{
display: none;
}
.detail__content{
width: 100%;
}
.detail__content{
margin-top: 48px;
margin-left: 0;
}
.detail__images-phone{
display: block;
margin-top: 48px;
margin-bottom: 48px;
position: relative;
overflow: hidden;
}
.detail__images-phone .swiper-slide{
display: flex;
justify-content: center;
}
.detail-images-phone__image-block{
width: 100%;
aspect-ratio: 1;
max-width: 500px;
display: flex;
justify-content: center;
align-items: center;
background: var(--background-grey);
border-radius: 16px;
}
.detail__images-phone .swiper-pagination-bullet{
width: 8px;
height: 8px;
border-radius: 50%;
border: 1px solid #666;
background-color: #666;
opacity: 1;
}
.detail__images-phone .swiper-pagination-bullet.swiper-pagination-bullet-active{
background-color: var(--background-white);
}
.detail__images-phone .swiper-pagination{
margin-bottom: 19px;
}
.detail__title{
font-size: 26px;
line-height: 123%;
}
.gallery__slider .swiper-pagination {
display: block;
}
.gallery__pagination{
display: none;
}
.gallery__slider .swiper-pagination-bullet{
width: 8px;
height: 8px;
border-radius: 50%;
border: 1px solid #666;
background-color: #666;
opacity: 1;
}
.gallery__wrapper .gallery-button{
display: none;
}
.gallery__slider .swiper-pagination-bullet.swiper-pagination-bullet-active{
background-color: var(--background-white);
}
.gallery__slider{
margin-left:0;
padding: 0px 0px 50px 0px;
/* padding: 40px; */
}
.gallery__block {
width: 100%;
aspect-ratio: 1;
height: auto;
}
/* detail */
}

194
assets/js/gp-main.js
View File

@@ -16,6 +16,34 @@ modalClose('.modal__close');
toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true);
// toggle
// radio-button
let radioButtons = document.querySelectorAll('.radio-button');
radioButtons.forEach(radioBlock => {
let buttons = radioBlock.querySelectorAll('.button');
buttons.forEach(button => {
let input = radioBlock.querySelector('.radio-button__input');
button.onclick = function (e) {
e.preventDefault();
buttons.forEach(thisButton => {
if (thisButton.classList.contains('active')) {
thisButton.classList.remove('active')
}
})
let text = button.textContent.trim();
button.classList.toggle('active');
input.value = text;
}
})
})
// radio-button
// overlay
let products = document.querySelectorAll('.product__item');
@@ -123,6 +151,120 @@ 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'),
aside = document.querySelector('.modal__aside'),
@@ -139,7 +281,7 @@ function modalOpen(buttonElement, contentElement){
let width = thisContentElement.clientWidth;
setTimeout(() => {
if (device <= 576) {
if (device <= 720) {
aside.style.width = `${device}px`;
thisContentElement.style.opacity = 1;
thisContentElement.style.filter = 'blur(0px)';
@@ -232,3 +374,53 @@ function singleToggleOpenX(button, content, blockheight) {
}
}
}
function createGalleryPhone(swiper, wrapper, slide, width) {
if (window.screen.width <= width) {
let thisSwiper = document.querySelector(swiper),
thisWrapper = document.querySelector(wrapper),
thisSlides = document.querySelectorAll(slide);
thisSwiper.classList.add('swiper');
thisWrapper.classList.add('swiper-wrapper');
thisSlides.forEach(e => {
e.classList.add('swiper-slide');
})
const t = new Swiper('.detail__images', {
spaceBetween: 100,
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
},
});
}
}
// resize
window.addEventListener('resize', (e) => {
// media
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

66
catalog.html
View File

File diff suppressed because one or more lines are too long

503
product.html
View File

@@ -1,6 +1,7 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<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">
@@ -8,6 +9,9 @@
<meta name="description" content="SEO Description">
<link rel="shortcut icon" href="/assets/img/favicon.ico?v=1.0">
<!-- swiperjs -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<!-- Базовые стили -->
<link rel="stylesheet" href="/assets/css/gp-style-core.css?v=1.0">
<link rel="stylesheet" href="/assets/css/gp-style-desktop.css?v=1.0">
@@ -17,6 +21,7 @@
<link rel="stylesheet" media="screen and (max-width: 720px)" href="/assets/css/gp-style-mobile.css?v=1.0">
<!-- Яндекс.Вебмастер + Google Search Console -->
<meta name="yandex-verification" content="XXXXXXXXXXXXXXXXX" />
<meta name="google-site-verification" content="XXXXXXXXXXXXXXXXX" />
@@ -46,8 +51,9 @@
<!-- /Yandex.Metrika counter -->
</head>
<body>
</head>
<body>
<header class="header">
<div class="header__content">
@@ -115,7 +121,7 @@
</a>
</div>
<div class="mini-profile__item">
<button class="mini-profile__button">
<button class="mini-profile__button basket-open">
<img src="assets/img/svg/mini-profile/basket.svg" alt="" class="mini-profile__icon">
</button>
</div>
@@ -224,18 +230,21 @@
<div class="detail">
<div class="detail__images">
<div class="detail__image detail__image--width-perc-100">
<div class="detail__image detail__image--width-perc-100" data-count-img="0">
<img src="assets/img/product/image.png" alt="" class="">
</div>
<div class="detail__image detail__image--width-perc-50">
<div class="detail__image detail__image--width-perc-50" data-count-img="1">
<img src="assets/img/product/image.png" alt="" class="">
</div>
<div class="detail__image detail__image--width-perc-50">
<div class="detail__image detail__image--width-perc-50" data-count-img="2">
<img src="assets/img/product/image.png" alt="" class="">
</div>
<div class="detail__image detail__image--width-perc-100">
<div class="detail__image detail__image--width-perc-100" data-count-img="3">
<img src="assets/img/product/image.png" alt="" class="">
</div>
<div class="swiper-pagination"></div>
</div>
<div class="detail__content">
@@ -253,6 +262,35 @@
<p class="detail__title">
Сухой корм, для средних и крупных пород
</p>
<div class="detail__images-phone">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="detail-images-phone__image-block" data-count-img="0">
<img src="assets/img/product/image.png" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="detail-images-phone__image-block" data-count-img="1">
<img src="assets/img/product/image.png" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="detail-images-phone__image-block" data-count-img="2">
<img src="assets/img/product/image.png" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="detail-images-phone__image-block" data-count-img="3">
<img src="assets/img/product/image.png" alt="">
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="detail__block-price">
<p class="detail-block-price__price">
4304
@@ -268,7 +306,7 @@
</div>
</div>
<form action="" class="detail-block__form">
<div class="detail-block-form__item detail-block-form__item--radio">
<div class="detail-block-form__item detail-block-form__item--radio radio-button">
<button class="button button--white button--red-48-px">
2 КГ
</button>
@@ -280,9 +318,11 @@
<button class="button button--white button--red-48-px">
10 КГ
</button>
<input type="text" class="radio-button__input" value="5 КГ" readonly>
</div>
<div class="detail-block-form__item">
<input type="submit" value="Добавить в корзину" class="button button--gradient button--high detail-block-form__submit">
<input type="submit" value="Добавить в корзину"
class="button button--gradient button--high detail-block-form__submit">
</div>
</form>
@@ -294,7 +334,11 @@
<div class="toggle__block-content">
<div class="toggle__content">
<p class="toggle__text">
Утончённое гурманское меню: полнорационный корм для собак 
со вкусом рыбы, на основе индейки и энтопротеина. Все источники протеина легко усваиваются и является гипоаллергенными. 
А высокое содержание в корме Омега-3 способствует здоровью шерсти и кожи, улучшает подвижность суставов, повышает интеллект и укрепляет сердце. Бонусы, с которыми знакомы все заядлые рыбаки!
Утончённое гурманское меню: полнорационный корм для собак 
со вкусом рыбы, на основе
индейки и энтопротеина. Все источники протеина легко усваиваются и является
гипоаллергенными. 
А высокое содержание в корме Омега-3 способствует здоровью шерсти
и кожи, улучшает подвижность суставов, повышает интеллект и укрепляет сердце.
Бонусы, с которыми знакомы все заядлые рыбаки!
</p>
</div>
</div>
@@ -306,7 +350,15 @@
<div class="toggle__block-content">
<div class="toggle__content">
<p class="toggle__text">
Дегидрированное мясо индейки и белок насекомых 36% (дегидрированное мясо индейки 21%; белковый концентрат
из Черной львинки (Hermetia illucens) 15%), цельный рис, картофель, жир индейки, печеночный гидролизат, высушенная мякоть сахарной свеклы, автолизат пивных дрожжей (источник натуральных пребиотиков MOS и бета-глюканов), льняное семя, сушеное яблоко, лососевое масло (источник незаменимых Омега-3 жирных кислот), оливковое масло (источник витаминов Е и К), DL-метионин, витаминно-минеральный комплекс, инулин (натуральный пребиотик FOS), экстракт розмарина (натуральный антиоксидант), юкка Шидигера, экстракт женьшеня, глюкозамин, хондроитин.
Дегидрированное мясо индейки и белок насекомых 36% (дегидрированное мясо индейки
21%; белковый концентрат
из Черной львинки (Hermetia illucens) 15%), цельный рис,
картофель, жир индейки, печеночный гидролизат, высушенная мякоть сахарной свеклы,
автолизат пивных дрожжей (источник натуральных пребиотиков MOS и бета-глюканов),
льняное семя, сушеное яблоко, лососевое масло (источник незаменимых Омега-3 жирных
кислот), оливковое масло (источник витаминов Е и К), DL-метионин,
витаминно-минеральный комплекс, инулин (натуральный пребиотик FOS), экстракт
розмарина (натуральный антиоксидант), юкка Шидигера, экстракт женьшеня, глюкозамин,
хондроитин.
</p>
</div>
</div>
@@ -389,7 +441,8 @@
<div class="toggle__table toggle__table--two">
<div class="toggle-table__block ">
<p class="toggle-table__title toggle-table__title--center">ПИТАТЕЛЬНЫЕ ДОБАВКИ <br> НА КГ</p>
<p class="toggle-table__title toggle-table__title--center">ПИТАТЕЛЬНЫЕ ДОБАВКИ
<br> НА КГ</p>
<div class="toggle-table__item">
<p>Сырой белок</p>
<div class="toggle-table-item__line"></div>
@@ -397,7 +450,8 @@
</div>
</div>
<div class="toggle-table__block ">
<p class="toggle-table__title toggle-table__title--center">ЭНЕРГЕТИЧЕСКАЯ ЦЕННОСТЬ <br> НА 100 ГРАММ</p>
<p class="toggle-table__title toggle-table__title--center">ЭНЕРГЕТИЧЕСКАЯ
ЦЕННОСТЬ <br> НА 100 ГРАММ</p>
<div class="toggle-table__item">
<div class="detail__warning warning">
<div class="detail-warning__content">
@@ -430,16 +484,17 @@
</p>
<div class="detail-catalot__control">
<button class="detail-catalot-control__button">
<button class="detail-catalot-control__button prev">
<img src="assets/img/svg/main/arrow-left.svg" alt="">
</button>
<button class="detail-catalot-control__button">
<button class="detail-catalot-control__button next">
<img src="assets/img/svg/main/arrow-right.svg" alt="">
</button>
</div>
</div>
<div class="detail-catalot__content">
<div class="detail-catalot__content swiper-wrapper">
<div class="swiper-slide">
<div class="product__item">
<div class="product-item__label">
<div class="product-item-label__tag product-item-label__tag--sale">
@@ -455,9 +510,9 @@
<div class="compound__item">Индейка </div>
</div>
<p class="product-item__title">Сухой корм, для средних и крупных пород, 2 кг.</p>
<p class="product-item__price">
1 304
</p>
<div class="product-item__price">
<p>1 304</p>
</div>
<div class="product-item__bye">
<button class="button button--white button--100-perc">
Купить
@@ -465,6 +520,65 @@
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="product__item">
<div class="product-item__label">
<div class="product-item-label__tag product-item-label__tag--new-green">
Распродажа %
</div>
</div>
<div class="product-item__product-card">
<img src="assets/img/product/image.png" alt="" class="product-item__images">
</div>
<div class="product-item__content-card">
<div class="compound">
<div class="compound__item">Индейка </div>
<div class="compound__item">Индейка </div>
</div>
<p class="product-item__title">Сухой корм, для средних и крупных пород, 2 кг.</p>
<div class="product-item__price">
<p>1 304</p> <del>1 449</del> <span>10</span>
</div>
<div class="product-item__bye">
<button class="button button--white button--100-perc">
Купить
</button>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="product__item">
<div class="product-item__label">
<div class="product-item-label__tag product-item-label__tag--sale-red">
Распродажа %
</div>
</div>
<div class="product-item__product-card">
<img src="assets/img/product/image.png" alt="" class="product-item__images">
</div>
<div class="product-item__content-card">
<div class="compound">
<div class="compound__item">Индейка </div>
<div class="compound__item">Индейка </div>
</div>
<p class="product-item__title">Сухой корм, для средних и крупных пород, 2 кг.</p>
<div class="product-item__price">
<p>1 304</p>
</div>
<div class="product-item__bye">
<button class="button button--white button--100-perc active">
Узнать о поступлении
</button>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="product__item">
<div class="product-item__label">
<div class="product-item-label__tag product-item-label__tag--sale">
@@ -480,9 +594,9 @@
<div class="compound__item">Индейка </div>
</div>
<p class="product-item__title">Сухой корм, для средних и крупных пород, 2 кг.</p>
<p class="product-item__price">
1 304
</p>
<div class="product-item__price">
<p>1 304</p>
</div>
<div class="product-item__bye">
<button class="button button--white button--100-perc">
Купить
@@ -490,6 +604,9 @@
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="product__item">
<div class="product-item__label">
<div class="product-item-label__tag product-item-label__tag--sale">
@@ -505,9 +622,9 @@
<div class="compound__item">Индейка </div>
</div>
<p class="product-item__title">Сухой корм, для средних и крупных пород, 2 кг.</p>
<p class="product-item__price">
1 304
</p>
<div class="product-item__price">
<p>1 304</p>
</div>
<div class="product-item__bye">
<button class="button button--white button--100-perc">
Купить
@@ -518,8 +635,334 @@
</div>
</div>
</div>
</div>
</main>
<div class="gallery">
<button class="gallery__close gallery-button">
<img src="assets/img/svg/main/black-x.svg" alt="">
</button>
<div class="gallery__wrapper">
<div class="gallery__pagination">
<button class="gallery-pagination__item" data-count-img="0">
<img src="assets/img/product/image.png" alt="">
</button>
<button class="gallery-pagination__item" data-count-img="1">
<img src="assets/img/product/image.png" alt="">
</button>
<button class="gallery-pagination__item" data-count-img="2">
<img src="assets/img/product/image.png" alt="">
</button>
<button class="gallery-pagination__item" data-count-img="3">
<img src="assets/img/product/image.png" alt="">
</button>
</div>
<div class="gallery__slider swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="gallery__block">
<img src="assets/img/product/image.png" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="gallery__block">
<img src="assets/img/product/image.png" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="gallery__block">
<img src="assets/img/product/image.png" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="gallery__block">
<img src="assets/img/product/image.png" alt="">
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev gallery-button">
<img src="assets/img/svg/main/arrow-left.svg" alt="">
</div>
<div class="swiper-button-next gallery-button">
<img src="assets/img/svg/main/arrow-right.svg" alt="">
</div>
</div>
</div>
</div>
<div class="modal">
<aside class="modal__aside">
<div class="modal__item modal__filter">
<button class="modal__close">
<img src="assets/img/svg/main/black-x.svg" alt="">
</button>
<div class="modal__header">
<p class="modal__title">Фильтры</p>
<div class="modal__content">
<div class="toggle">
<p class="toggle__title">
ДЛЯ КОГО
</p>
<div class="toggle__block-content">
<div class="toggle__content">
<div class="toggle-content__item">
<div class="toggle-content__element toggle-content__element--width-perc-50">
<div class="radio">
<input type="radio" name="animal" id="" class="radio__input">
<label for="" class="radio__label">Для кошек</label>
</div>
</div>
<div class="toggle-content__element toggle-content__element--width-perc-50">
<div class="radio">
<input type="radio" name="animal" id="" class="radio__input">
<label for="" class="radio__label">Для собак</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="toggle">
<p class="toggle__title">
ТИП ПРОДУКЦИИ
</p>
<div class="toggle__block-content">
<div class="toggle__content">
<div class="toggle-content__item">
<div class="toggle-content__element toggle-content__element--width-perc-100">
<div class="checkbox active">
<div class="checkbox__state"></div>
<input type="checkbox" name="" id="" class="checkbox__input">
<label for="" class="checkbox__label">Корм</label>
</div>
</div>
<div class="toggle-content__element toggle-content__element--width-perc-100">
<div class="checkbox">
<div class="checkbox__state"></div>
<input type="checkbox" name="" id="" class="checkbox__input">
<label for="" class="checkbox__label">Лакомстава</label>
</div>
</div>
<div class="toggle-content__element toggle-content__element--width-perc-100">
<div class="checkbox">
<div class="checkbox__state"></div>
<input type="checkbox" name="" id="" class="checkbox__input">
<label for="" class="checkbox__label">Аксессуары</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="toggle">
<p class="toggle__title">
ВКУС
</p>
<div class="toggle__block-content">
<div class="toggle__content">
<div class="toggle-content__item">
<div class="toggle-content__element toggle-content__element--width-perc-50">
<div class="checkbox active">
<div class="checkbox__state"></div>
<input type="checkbox" name="" id="" class="checkbox__input">
<label for="" class="checkbox__label">Индейка</label>
</div>
</div>
<div class="toggle-content__element toggle-content__element--width-perc-50">
<div class="checkbox">
<div class="checkbox__state"></div>
<input type="checkbox" name="" id="" class="checkbox__input">
<label for="" class="checkbox__label">Говядина</label>
</div>
</div>
<div class="toggle-content__element toggle-content__element--width-perc-50">
<div class="checkbox">
<div class="checkbox__state"></div>
<input type="checkbox" name="" id="" class="checkbox__input">
<label for="" class="checkbox__label">Рыба</label>
</div>
</div>
<div class="toggle-content__element toggle-content__element--width-perc-50">
<div class="checkbox">
<div class="checkbox__state"></div>
<input type="checkbox" name="" id="" class="checkbox__input">
<label for="" class="checkbox__label">Бараника</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal__block-button">
<div class="modal__button">
<button class="button button--gradient button--high button--100-perc">
Применить
</button>
</div>
<div class="modal__button">
<button class="to-know button--100-perc to-know--background-none">
<p>Сбросить фильтры</p>
</button>
</div>
</div>
</div>
<div class="modal__item modal__basket">
<button class="modal__close">
<img src="assets/img/svg/main/black-x.svg" alt="">
</button>
<div class="modal__header">
<p class="modal__title">Корзина</p>
<div class="modal__content">
<div class="modal-basket__item">
<div class="modal-basket-item__block-image">
<img src="assets/img/product/image.png" alt="" class="modal-basket-item__image">
</div>
<div class="modal-basket-item__content">
<p class="modal-basket-item__title">Сухой корм, для крупны и средних пород</p>
<p class="modal-basket-item__sub-title">Индейка, 2 кг</p>
<div class="modal-basket-item__control">
<div class="counter counter--small">
<button class="counter__button minus">
<img src="assets/img/svg/main/minus.svg" alt="">
</button>
<input type="text" class="counter__input" value="1">
<button class="counter__button plus">
<img src="assets/img/svg/main/plus.svg" alt="">
</button>
</div>
<p class="modal-basket-item__price">1280</p>
</div>
</div>
</div>
<div class="modal-basket__item">
<div class="modal-basket-item__block-image">
<img src="assets/img/product/image.png" alt="" class="modal-basket-item__image">
</div>
<div class="modal-basket-item__content">
<p class="modal-basket-item__title">Сухой корм, для крупны и средних пород</p>
<p class="modal-basket-item__sub-title">Индейка, 2 кг</p>
<div class="modal-basket-item__control">
<div class="counter counter--small">
<button class="counter__button minus">
<img src="assets/img/svg/main/minus.svg" alt="">
</button>
<input type="text" class="counter__input" value="1">
<button class="counter__button plus">
<img src="assets/img/svg/main/plus.svg" alt="">
</button>
</div>
<p class="modal-basket-item__price">1280</p>
</div>
</div>
</div>
<div class="modal-basket__item">
<div class="modal-basket-item__block-image">
<img src="assets/img/product/image.png" alt="" class="modal-basket-item__image">
</div>
<div class="modal-basket-item__content">
<p class="modal-basket-item__title">Сухой корм, для крупны и средних пород</p>
<p class="modal-basket-item__sub-title">Индейка, 2 кг</p>
<div class="modal-basket-item__control">
<div class="counter counter--small">
<button class="counter__button minus">
<img src="assets/img/svg/main/minus.svg" alt="">
</button>
<input type="text" class="counter__input" value="1">
<button class="counter__button plus">
<img src="assets/img/svg/main/plus.svg" alt="">
</button>
</div>
<p class="modal-basket-item__price">1280</p>
</div>
</div>
</div>
<div class="modal-basket__item">
<div class="modal-basket-item__block-image">
<img src="assets/img/product/image.png" alt="" class="modal-basket-item__image">
</div>
<div class="modal-basket-item__content">
<p class="modal-basket-item__title">Сухой корм, для крупны и средних пород</p>
<p class="modal-basket-item__sub-title">Индейка, 2 кг</p>
<div class="modal-basket-item__control">
<div class="counter counter--small">
<button class="counter__button minus">
<img src="assets/img/svg/main/minus.svg" alt="">
</button>
<input type="text" class="counter__input" value="1">
<button class="counter__button plus">
<img src="assets/img/svg/main/plus.svg" alt="">
</button>
</div>
<p class="modal-basket-item__price">1280</p>
</div>
</div>
</div>
<div class="modal-basket__item">
<div class="modal-basket-item__block-image">
<img src="assets/img/product/image.png" alt="" class="modal-basket-item__image">
</div>
<div class="modal-basket-item__content">
<p class="modal-basket-item__title">Сухой корм, для крупны и средних пород</p>
<p class="modal-basket-item__sub-title">Индейка, 2 кг</p>
<div class="modal-basket-item__control">
<div class="counter counter--small">
<button class="counter__button minus">
<img src="assets/img/svg/main/minus.svg" alt="">
</button>
<input type="text" class="counter__input" value="1">
<button class="counter__button plus">
<img src="assets/img/svg/main/plus.svg" alt="">
</button>
</div>
<p class="modal-basket-item__price">1280</p>
</div>
</div>
</div>
</div>
</div>
<div class="modal__footer">
<div class="modal__block-price">
<p class="modal-block-price__title">Общая стоимость</p>
<p class="modal-block-price__price">
8960
</p>
</div>
<div class="modal__block-button">
<div class="modal__button">
<button class="button button--gradient button--high button--100-perc">
Перейти к оформлению
</button>
</div>
</div>
</div>
</div>
</aside>
</div>
<footer class="footer">
<div class="footer__wrapper wrapper">
<div class="footer__content">
@@ -586,7 +1029,8 @@
<input class="form__input" type="text" name="name" placeholder="Эл.почта" required>
</div>
<div class="form__item">
<textarea class="form__input form__input--textarea" name="" id="" placeholder="Текст обращения"></textarea>
<textarea class="form__input form__input--textarea" name="" id=""
placeholder="Текст обращения"></textarea>
</div>
<div class="form__item">
<input class="form__button" type="submit" value="Отправить">
@@ -608,7 +1052,10 @@
</div>
</footer>
<!-- swiperjs -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="assets/js/gp-main.js"></script>
</body>
</body>
</html>