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

доделал product

Browse Source
cosmopet--Memento-mori-dev
Kirill Pet 10 months ago
parent db58f5c463
commit 44fee90f1a
7 changed files with 1936 additions and 1006 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 6
      assets/css/gp-style-core.css
  2. 188
      assets/css/gp-style-desktop.css
  3. 12
      assets/css/gp-style-mobile.css
  4. 91
      assets/css/gp-style-tablet.css
  5. 194
      assets/js/gp-main.js
  6. 66
      catalog.html
  7. 503
      product.html

6
assets/css/gp-style-core.css
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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,37 @@
<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">
Купить
</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--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">
Купить
@ -465,6 +548,37 @@
</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>
Write Preview
Loading…
Cancel
Save