Сделал каталог, фильтр, корзина + адаптив
This commit is contained in:
Kirill Pet
273
index.html
273
index.html
@@ -14,7 +14,7 @@
|
||||
<!-- Адаптив -->
|
||||
<link rel="stylesheet" media="screen and (min-width: 1400px)" href="/assets/css/gp-style-ultra.css?v=1.0">
|
||||
<link rel="stylesheet" media="screen and (max-width: 1200px)" href="/assets/css/gp-style-tablet.css">
|
||||
<link rel="stylesheet" media="screen and (max-width: 576px)" href="/assets/css/gp-style-mobile.css?v=1.0">
|
||||
<link rel="stylesheet" media="screen and (max-width: 720px)" href="/assets/css/gp-style-mobile.css?v=1.0">
|
||||
|
||||
|
||||
<!-- Яндекс.Вебмастер + Google Search Console -->
|
||||
@@ -223,7 +223,7 @@
|
||||
<div class="product__header">
|
||||
<p class="product__title">Продукция</p>
|
||||
|
||||
<button class="button button--gradient button--high button--filter">
|
||||
<button class="button button--gradient button--high button--icon button--filter">
|
||||
Фильтры
|
||||
</button>
|
||||
</div>
|
||||
@@ -490,6 +490,275 @@
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div class="modal" style="display: none;">
|
||||
<aside class="modal__aside">
|
||||
<div class="modal__item modal__filter" style="display: none;">
|
||||
<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 active">
|
||||
<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 active">
|
||||
<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 active">
|
||||
<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" style="display: none;">
|
||||
<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">
|
||||
<img src="assets/img/svg/main/minus.svg" alt="">
|
||||
</button>
|
||||
<input type="text" class="counter__input" value="1">
|
||||
<button class="counter__button">
|
||||
<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">
|
||||
<img src="assets/img/svg/main/minus.svg" alt="">
|
||||
</button>
|
||||
<input type="text" class="counter__input" value="1">
|
||||
<button class="counter__button">
|
||||
<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">
|
||||
<img src="assets/img/svg/main/minus.svg" alt="">
|
||||
</button>
|
||||
<input type="text" class="counter__input" value="1">
|
||||
<button class="counter__button">
|
||||
<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">
|
||||
<img src="assets/img/svg/main/minus.svg" alt="">
|
||||
</button>
|
||||
<input type="text" class="counter__input" value="1">
|
||||
<button class="counter__button">
|
||||
<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">
|
||||
<img src="assets/img/svg/main/minus.svg" alt="">
|
||||
</button>
|
||||
<input type="text" class="counter__input" value="1">
|
||||
<button class="counter__button">
|
||||
<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">
|
||||
|
||||
</footer>
|
||||
|
||||
|
||||
<script src="assets/js/gp-main.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user