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

Сделал каталог, фильтр, корзина + адаптив

Browse Source
cosmopet--Memento-mori-dev
Kirill Pet 10 months ago
parent f81de85d89
commit 1c58c42130
12 changed files with 2766 additions and 22 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. 346
      assets/css/gp-style-core.css
  2. 21
      assets/css/gp-style-desktop.css
  3. 63
      assets/css/gp-style-mobile.css
  4. 8
      assets/css/gp-style-tablet.css
  5. 3
      assets/img/svg/main/arrow-selected-white.svg
  6. 18
      assets/img/svg/main/arrow-selected.svg
  7. 13
      assets/img/svg/main/basket.svg
  8. 11
      assets/img/svg/main/black-x.svg
  9. 495
      catalog.html
  10. 273
      index.html
  11. 768
      modal-basket.html
  12. 763
      modal-filter.html

346
assets/css/gp-style-core.css
Unescape View File

@ -545,13 +545,18 @@ button{
.button--high{
height: 56px;
padding: 16px 56px 24px 24px;
padding: 16px 24px 24px 24px;
font-weight: 700;
text-align: start;
text-align: center;
position: relative;
}
.button--icon{
padding-right: 56px;
text-align: start;
}
.button--filter::after{
content: '';
@ -594,6 +599,9 @@ button{
cursor: pointer;
}
.to-know--background-none{
background: none;
}
/* button */
/* select */
@ -711,7 +719,7 @@ button{
width: 48px;
font-family: var(--font-family);
font-weight: 400;
font-weight: 600;
font-size: 20px;
line-height: 120%;
text-align: center;
@ -739,5 +747,337 @@ button{
}
.counter__button:hover{
opacity: .8;
}
.counter--small{
}
.counter--small .counter__button{
width: 32px;
height: 32px;
}
.counter--small{
}
/* counter */
/* modal */
.modal{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25);
z-index: 200;
}
.modal__aside{
position: fixed;
top: 0;
right: 0;
width: auto;
height: 100%;
overflow: hidden;
}
.modal__item{
height: 100%;
padding: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
background: var(--background-white);
position: relative;
}
.modal__close{
position: absolute;
top: 32px;
right: 24px;
width: 24px;
height: 24px;
border: none;
background: none;
}
.modal__header{}
.modal__title{
padding-right: 48px;
font-family: var(--font-family);
font-weight: 700;
font-size: 36px;
line-height: 111%;
text-transform: uppercase;
color: var(--text-black);
}
.modal__block-button{
margin-top: 24px;
}
.modal__button{
margin-top: 16px;
}
.modal__button:first-child{
margin-top: 0;
}
.modal__content{
margin-top: 24px;
}
.modal__filter{
width: 400px;
}
.modal__footer{
border-top: 1px solid var(--text-6);
padding-top: 23px;
}
.modal__block-price{
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-block-price__title{
font-family: var(--font-family);
font-weight: 600;
font-size: 20px;
line-height: 120%;
color: var(--text-black);
}
.modal-block-price__price{
font-family: var(--font-family);
font-weight: 700;
font-size: 24px;
line-height: 100%;
text-transform: uppercase;
text-align: right;
color: var(--text-black);
}
.modal-block-price__price::after{
content: 'Р';
}
.modal__basket{
width: 600px;
}
.modal-basket__item{
padding-top: 23px;
padding-bottom: 24px;
display: flex;
border-top: 1px solid #f2f2f2;
position: relative;
}
.modal-basket__item::before{
content: '';
position: absolute;
top: 24px;
right: 0;
width: 24px;
aspect-ratio: 1;
background-image: url(../img/svg/main/basket.svg);
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
transition: opacity .2s ease-out;
}
.modal-basket__item:hover .modal-basket__item::before{
opacity: .8;
}
.modal-basket-item__block-image{
width: 128px;
aspect-ratio: 1;
display: flex;
justify-content: center;
align-items: center;
}
.modal-basket-item__image{
width: 96px;
aspect-ratio: 1;
object-fit: contain;
}
.modal-basket-item__content{
margin-left: 16px;
}
.modal-basket-item__title{
padding-right: 40px;
font-family: var(--font-family);
font-weight: 500;
font-size: 20px;
line-height: 120%;
color: var(--text-black);
}
.modal-basket-item__sub-title{
margin-top: 8px;
font-family: var(--font-family);
font-weight: 700;
font-size: 12px;
line-height: 133%;
color: var(--text-black);
}
.modal-basket-item__control{
margin-top: 24px;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-basket-item__price{
font-family: var(--font-family);
font-weight: 600;
font-size: 20px;
line-height: 120%;
text-align: right;
color: var(--text-black);
}
.modal-basket-item__price::after{
content: 'Р';
padding-left: 4px;
}
.modal__basket .modal__header{
height: calc(100% - 92px);
margin-bottom: -36px;
}
.modal__basket .modal__content{
height: calc(100% - 100px);
overflow-x: hidden;
}
/* modal */
/* toggle */
.toggle{
padding-top: 26px;
padding-bottom: 25px;
border-bottom: 1px solid var(--text-3);
position: relative;
}
.toggle::after{
content: '';
position: absolute;
top: 24px;
right: 0;
width: 24px;
aspect-ratio: 1;
background-image: url(../img/svg/main/black-x.svg);
transform: rotate(45deg);
transition: transform .2s;
}
.toggle.active::after{
transform: rotate(0deg);
}
.toggle__title{
font-family: var(--font-family);
font-weight: 700;
font-size: 16px;
line-height: 125%;
color: var(--text-black);
cursor: pointer;
}
.toggle__block-content{
/* height: 0; */
overflow: hidden;
transition: height .2s ease-out;
}
.toggle__content{
padding-top: 24px;
}
.toggle-content__item{
margin: 12px -12px -12px -12px;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.toggle-content__item:first-child{
margin-top: 0;
}
.toggle-content__element{
margin: 12px;
}
.toggle-content__element--width-perc-100{
width: 100%;
}
.toggle-content__element--width-perc-50{
width: calc(50% - 24px);
}
/* toggle */
/* checkbox */
.checkbox{
display: flex;
align-items: center;
}
.checkbox__state{
border-radius: 4px;
width: 18px;
height: 18px;
border: 2px solid var(--background-black);
background: var(--background-white);
}
.checkbox.active .checkbox__state{
background-color: var(--background-black);
background-image: url(../img/svg/main/arrow-selected-white.svg);
background-repeat: no-repeat;
background-position: center;
}
.checkbox__input{
display: none;
}
.checkbox__label{
padding-left: 8px;
font-family: var(--font-family);
font-weight: 400;
font-size: 20px;
line-height: 120%;
color: var(--text-dark);
}
/* checkbox */
/* radio */
.radio{
display: flex;
align-items: center;
}
.radio__input{
width: 18px;
aspect-ratio: 1;
accent-color: var(--background-black);
}
.radio__label{
padding-left: 8px;
font-family: var(--font-family);
font-weight: 400;
font-size: 20px;
line-height: 120%;
color: var(--text-dark);
}
/* radio */

21
assets/css/gp-style-desktop.css
Unescape View File

@ -308,7 +308,7 @@
.product__main{
margin: 36px -12px -12px;
width: 100%;
/* width: 100%; */
display: flex;
align-items: stretch;
@ -551,12 +551,23 @@
}
/* product */
/* modal */
.modal__button .to-know{
display: none;
}
/* modal */
@media only screen and (max-width: 1600px) {
.product__item{
margin: 12px;
width: calc(33.3% - 24px);
}
.wrapper{
max-width: 1280px;
}
.product__item{
margin: 12px;
width: calc(33.3% - 24px);
}
}

63
assets/css/gp-style-mobile.css
Unescape View File

@ -1,6 +1,69 @@
/* Стили для мобильных устройств */
@media only screen and (max-width: 720px) {
/* product */
.product__item{
width: calc(100% - 24px);
}
/* product */
/* modal */
.modal__basket{
width: 100%;
}
.modal__button .to-know{
display: flex;
background: none;
}
.modal__basket .modal__header {
height: calc(100% - 158px);
margin-bottom: -36px;
}
.modal-basket-item__block-image{
position: absolute;
width: 80px;
}
.modal-basket-item__image{
width: 48px;
}
.modal-basket-item__content{
margin-left: 0;
padding-left: 96px;
}
.modal-basket-item__control{
margin-left: -80px;
}
.modal-basket-item__title{
min-height: 40px;
font-size: 16px;
}
/* modal */
}
@media only screen and (max-width: 576px) {
/* header */
/* header */
/* product */
.product__header{
flex-direction: column;
align-items: start;
}
.product__header .button{
margin-top: 48px;
}
/* product */
/* modal */
.modal__aside{
left: 0;
}
.modal__filter{
width: 100%;
}
/* modal */
}

8
assets/css/gp-style-tablet.css
Unescape View File

@ -39,3 +39,11 @@
/* header */
}
@media only screen and (max-width: 980px) {
/* product */
.product__item{
width: calc(50% - 24px);
}
/* product */
}

3
assets/img/svg/main/arrow-selected-white.svg
Unescape View File

@ -0,0 +1,3 @@
<svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.50681 0.784901C9.86151 1.14024 9.86101 1.71584 9.50567 2.07055L4.35112 7.216C3.99601 7.57049 3.42085 7.57024 3.06604 7.21544L0.493317 4.64271C0.138295 4.28769 0.138295 3.71208 0.493317 3.35706C0.848339 3.00204 1.42394 3.00204 1.77897 3.35706L3.70944 5.28753L8.22116 0.783766C8.57649 0.429057 9.1521 0.429565 9.50681 0.784901Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 495 B

18
assets/img/svg/main/arrow-selected.svg
Unescape View File

@ -1,11 +1,11 @@
<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7071 0.292893C16.0976 0.683417 16.0976 1.31658 15.7071 1.70711L5.70711 11.7071C5.31658 12.0976 4.68342 12.0976 4.29289 11.7071L0.292893 7.70711C-0.0976311 7.31658 -0.0976311 6.68342 0.292893 6.29289C0.683417 5.90237 1.31658 5.90237 1.70711 6.29289L5 9.58579L14.2929 0.292893C14.6834 -0.0976311 15.3166 -0.0976311 15.7071 0.292893Z" fill="url(#paint0_radial_4_10214)"/>
<defs>
<radialGradient id="paint0_radial_4_10214" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(23.9562 -7.00625) rotate(143.344) scale(34.5677 45.2811)">
<stop stop-color="#0F5881"/>
<stop offset="0.512169" stop-color="#1EA49C"/>
<stop offset="0.807073" stop-color="#76CE75"/>
<stop offset="0.911458" stop-color="#ECF39F"/>
</radialGradient>
</defs>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7071 0.292893C16.0976 0.683417 16.0976 1.31658 15.7071 1.70711L5.70711 11.7071C5.31658 12.0976 4.68342 12.0976 4.29289 11.7071L0.292893 7.70711C-0.0976311 7.31658 -0.0976311 6.68342 0.292893 6.29289C0.683417 5.90237 1.31658 5.90237 1.70711 6.29289L5 9.58579L14.2929 0.292893C14.6834 -0.0976311 15.3166 -0.0976311 15.7071 0.292893Z" fill="url(#paint0_radial_79_10214)" />
<defs>
<radialGradient id="paint0_radial_79_10214" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(23.9562 -7.00625) rotate(143.344) scale(34.5677 45.2811)">
<stop stop-color="#0F5881" />
<stop offset="0.512169" stop-color="#1EA49C" />
<stop offset="0.807073" stop-color="#76CE75" />
<stop offset="0.911458" stop-color="#ECF39F" />
</radialGradient>
</defs>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 910 B

After

Width:  |  Height:  |  Size: 954 B

13
assets/img/svg/main/basket.svg
Unescape View File

@ -0,0 +1,13 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1_3176)">
<path d="M4 7H20" stroke="#2C3E50" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5 7L6 19C6 19.5304 6.21071 20.0391 6.58579 20.4142C6.96086 20.7893 7.46957 21 8 21H16C16.5304 21 17.0391 20.7893 17.4142 20.4142C17.7893 20.0391 18 19.5304 18 19L19 7" stroke="#2C3E50" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 7V4C9 3.73478 9.10536 3.48043 9.29289 3.29289C9.48043 3.10536 9.73478 3 10 3H14C14.2652 3 14.5196 3.10536 14.7071 3.29289C14.8946 3.48043 15 3.73478 15 4V7" stroke="#2C3E50" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10 12L14 16M14 12L10 16" stroke="#2C3E50" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_1_3176">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 983 B

11
assets/img/svg/main/black-x.svg
Unescape View File

@ -0,0 +1,11 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1_2483)">
<path d="M18 6L6 18" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6 6L18 18" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_1_2483">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 455 B

495
catalog.html
View File

File diff suppressed because one or more lines are too long

273
index.html
Unescape View File

@ -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>

768
modal-basket.html
View File

File diff suppressed because one or more lines are too long

763
modal-filter.html
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save