diff --git a/assets/css/gp-style-core.css b/assets/css/gp-style-core.css index 8396577..c614381 100644 --- a/assets/css/gp-style-core.css +++ b/assets/css/gp-style-core.css @@ -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; @@ -740,4 +748,336 @@ button{ .counter__button:hover{ opacity: .8; } -/* counter */ \ No newline at end of file +.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 */ diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css index f74b529..fa9abaa 100644 --- a/assets/css/gp-style-desktop.css +++ b/assets/css/gp-style-desktop.css @@ -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); +} } diff --git a/assets/css/gp-style-mobile.css b/assets/css/gp-style-mobile.css index 99ed4c9..50f6be4 100644 --- a/assets/css/gp-style-mobile.css +++ b/assets/css/gp-style-mobile.css @@ -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 */ } \ No newline at end of file diff --git a/assets/css/gp-style-tablet.css b/assets/css/gp-style-tablet.css index 54904d2..c44ee7f 100644 --- a/assets/css/gp-style-tablet.css +++ b/assets/css/gp-style-tablet.css @@ -38,4 +38,12 @@ } /* header */ +} + +@media only screen and (max-width: 980px) { +/* product */ +.product__item{ + width: calc(50% - 24px); +} +/* product */ } \ No newline at end of file diff --git a/assets/img/svg/main/arrow-selected-white.svg b/assets/img/svg/main/arrow-selected-white.svg new file mode 100644 index 0000000..bb7e90b --- /dev/null +++ b/assets/img/svg/main/arrow-selected-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/svg/main/arrow-selected.svg b/assets/img/svg/main/arrow-selected.svg index 88d5abb..fb283a7 100644 --- a/assets/img/svg/main/arrow-selected.svg +++ b/assets/img/svg/main/arrow-selected.svg @@ -1,11 +1,11 @@ - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/assets/img/svg/main/basket.svg b/assets/img/svg/main/basket.svg new file mode 100644 index 0000000..6c08b40 --- /dev/null +++ b/assets/img/svg/main/basket.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/assets/img/svg/main/black-x.svg b/assets/img/svg/main/black-x.svg new file mode 100644 index 0000000..cb3041d --- /dev/null +++ b/assets/img/svg/main/black-x.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/catalog.html b/catalog.html new file mode 100644 index 0000000..a15a74b --- /dev/null +++ b/catalog.html @@ -0,0 +1,495 @@ + + + + + + + SEO title + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + +
+
+
+ +
+ +
+ +
+
+
+ + + +
+
+ +
+
+
+
+
+
+
+ Кошкам + +
+
+ Собакам + +
+
+
+ +
+
+ + ГЛАВНАЯ + +
+
+ + ПРОДУКЦИЯ + + Кошкам + + Собакам + +
+
+ + О COSMOPET + +
+
+ + ПРОИЗВОДСТВО + +
+
+ + БЛОГ + +
+
+
+
+ +
+
+ + главня + + + продукция + +
+ +
+
+

Продукция

+ + +
+ +
+
+
+

Для собак

+ +
+
+ +
+
+

Для собак

+ +
+
+ +
+
+

Для собак

+ +
+
+
+ +
+
+
+
+ Новинка +
+
+
+ +
+
+
+
Индейка
+
Индейка
+
+

Сухой корм, для средних и крупных пород, 2 кг.

+

+ 1 304 +

+
+ +
+
+
+
+

+ Сухой корм, 2 кг, для крупных и средних пород +

+
    +
  • Seperpremium
    • +
  • Для крупных и средних пород
    • +
  • Полнорационный
    • +
+
+ +
+
+
+

Объем

+ +
+ +
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

Количество

+ +
+ + + +
+
+
+

+ 1280 +

+
+
+ +
+
+ +
+
+
+
+
+
+
+
+ Распродажа % +
+
+
+ +
+
+
+
Индейка
+
Индейка
+
+

Сухой корм, для средних и крупных пород, 2 кг.

+

+ 1 304 +

+
+ +
+
+
+
+
+
+ Распродажа % +
+
+ Новинка +
+
+
+ +
+
+
+
Индейка
+
Индейка
+
+

Сухой корм, для средних и крупных пород, 2 кг.

+

+ 1 304 +

+
+ +
+
+
+
+
+
+ Новинка +
+
+
+ +
+
+
+
Индейка
+
Индейка
+
+

Сухой корм, для средних и крупных пород, 2 кг.

+

+ 1 304 +

+
+ +
+
+
+
+
+
+ Распродажа % +
+
+
+ +
+
+
+
Индейка
+
Индейка
+
+

Сухой корм, для средних и крупных пород, 2 кг.

+

+ 1 304 +

+
+ +
+
+
+
+
+
+ Распродажа % +
+
+ Новинка +
+
+
+ +
+
+
+
Индейка
+
Индейка
+
+

Сухой корм, для средних и крупных пород, 2 кг.

+

+ 1 304 +

+
+ +
+
+
+
+ +
+ +
+
+
+ + + + \ No newline at end of file diff --git a/index.html b/index.html index 0ac2ebf..7505690 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@ - + @@ -223,7 +223,7 @@

Продукция

-
@@ -490,6 +490,275 @@ + + + diff --git a/modal-basket.html b/modal-basket.html new file mode 100644 index 0000000..89f6023 --- /dev/null +++ b/modal-basket.html @@ -0,0 +1,768 @@ + + + + + + + SEO title + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + +
+
+
+ +
+ +
+ +
+
+
+ + + +
+
+ +
+
+
+
+
+
+
+ Кошкам + +
+
+ Собакам + +
+
+
+ +
+
+ + ГЛАВНАЯ + +
+
+ + ПРОДУКЦИЯ + + Кошкам + + Собакам + +
+
+ + О COSMOPET + +
+
+ + ПРОИЗВОДСТВО + +
+
+ + БЛОГ + +
+
+
+
+ +
+
+ + главня + + + продукция + +
+ +
+
+

Продукция

+ + +
+ +
+
+
+

Для собак

+ +
+
+ +
+
+

Для собак

+ +
+
+ +
+
+

Для собак

+ +
+
+
+ +
+
+
+
+ Новинка +
+
+
+ +
+
+
+
Индейка
+
Индейка
+
+

Сухой корм, для средних и крупных пород, 2 кг.

+

+ 1 304 +

+
+ +
+
+
+
+

+ Сухой корм, 2 кг, для крупных и средних пород +

+
    +
  • Seperpremium
    • +
  • Для крупных и средних пород
    • +
  • Полнорационный
    • +
+
+ +
+
+
+

Объем

+ +
+ +
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

Количество

+ +
+ + + +
+
+
+

+ 1280 +

+
+
+ +
+
+ +
+
+
+
+
+
+
+
+ Распродажа % +
+
+
+ +
+
+
+
Индейка
+
Индейка
+
+

Сухой корм, для средних и крупных пород, 2 кг.

+

+ 1 304 +

+
+ +
+
+
+
+
+
+ Распродажа % +
+
+ Новинка +
+
+
+ +
+
+
+
Индейка
+
Индейка
+
+

Сухой корм, для средних и крупных пород, 2 кг.

+

+ 1 304 +

+
+ +
+
+
+
+
+
+ Новинка +
+
+
+ +
+
+
+
Индейка
+
Индейка
+
+

Сухой корм, для средних и крупных пород, 2 кг.

+

+ 1 304 +

+
+ +
+
+
+
+
+
+ Распродажа % +
+
+
+ +
+
+
+
Индейка
+
Индейка
+
+

Сухой корм, для средних и крупных пород, 2 кг.

+

+ 1 304 +

+
+ +
+
+
+
+
+
+ Распродажа % +
+
+ Новинка +
+
+
+ +
+
+
+
Индейка
+
Индейка
+
+

Сухой корм, для средних и крупных пород, 2 кг.

+

+ 1 304 +

+
+ +
+
+
+
+ +
+ +
+
+
+ +
+ +
+ + + + + + \ No newline at end of file diff --git a/modal-filter.html b/modal-filter.html new file mode 100644 index 0000000..05d9940 --- /dev/null +++ b/modal-filter.html @@ -0,0 +1,763 @@ + + + + + + + SEO title + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + +
+
+
+ +
+ +
+ +
+
+
+ + + +
+
+ +
+
+
+
+
+
+
+ Кошкам + +
+
+ Собакам + +
+
+
+ +
+
+ + ГЛАВНАЯ + +
+
+ + ПРОДУКЦИЯ + + Кошкам + + Собакам + +
+
+ + О COSMOPET + +
+
+ + ПРОИЗВОДСТВО + +
+
+ + БЛОГ + +
+
+
+
+ +
+
+ + главня + + + продукция + +
+ +
+
+

Продукция

+ + +
+ +
+
+
+

Для собак

+ +
+
+ +
+
+

Для собак

+ +
+
+ +
+
+

Для собак

+ +
+
+
+ +
+
+
+
+ Новинка +
+
+
+ +
+
+
+
Индейка
+
Индейка
+
+

Сухой корм, для средних и крупных пород, 2 кг.

+

+ 1 304 +

+
+ +
+
+
+
+

+ Сухой корм, 2 кг, для крупных и средних пород +

+
    +
  • Seperpremium
    • +
  • Для крупных и средних пород
    • +
  • Полнорационный
    • +
+
+ +
+
+
+

Объем

+ +
+ +
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

Количество

+ +
+ + + +
+
+
+

+ 1280 +

+
+
+ +
+
+ +
+
+
+
+
+
+
+
+ Распродажа % +
+
+
+ +
+
+
+
Индейка
+
Индейка
+
+

Сухой корм, для средних и крупных пород, 2 кг.

+

+ 1 304 +

+
+ +
+
+
+
+
+
+ Распродажа % +
+
+ Новинка +
+
+
+ +
+
+
+
Индейка
+
Индейка
+
+

Сухой корм, для средних и крупных пород, 2 кг.

+

+ 1 304 +

+
+ +
+
+
+
+
+
+ Новинка +
+
+
+ +
+
+
+
Индейка
+
Индейка
+
+

Сухой корм, для средних и крупных пород, 2 кг.

+

+ 1 304 +

+
+ +
+
+
+
+
+
+ Распродажа % +
+
+
+ +
+
+
+
Индейка
+
Индейка
+
+

Сухой корм, для средних и крупных пород, 2 кг.

+

+ 1 304 +

+
+ +
+
+
+
+
+
+ Распродажа % +
+
+ Новинка +
+
+
+ +
+
+
+
Индейка
+
Индейка
+
+

Сухой корм, для средних и крупных пород, 2 кг.

+

+ 1 304 +

+
+ +
+
+
+
+ +
+ +
+
+
+ +
+ +
+ + + + + + \ No newline at end of file