diff --git a/assets/css/gp-style-core.css b/assets/css/gp-style-core.css index 36fab3c..8bd4136 100644 --- a/assets/css/gp-style-core.css +++ b/assets/css/gp-style-core.css @@ -100,6 +100,7 @@ --text-black: #121212; --text-dark: #2b2b3b; --text-grey: #999; + --text-red: #fa0505; --text-0: #000; --text-3: #333; --text-6: #666; @@ -535,6 +536,10 @@ button{ .button--white:hover{ opacity: .8; } +.button--white.active{ + background: var(--background-black); + color: var(--background-white); +} .button--gradient{ background: var(--gradient-turquoise); border: none; @@ -588,6 +593,9 @@ button{ background: var(--background-black); border: 1px solid var(--text-white); } +.button--red-48-px{ + border-radius: 48px; +} .to-know{ width: 100%; @@ -1040,6 +1048,13 @@ button{ .toggle-content__element--width-perc-50{ width: calc(50% - 24px); } +.toggle__text{ + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} /* toggle */ /* checkbox */ diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css index 1ecf1ce..13926e4 100644 --- a/assets/css/gp-style-desktop.css +++ b/assets/css/gp-style-desktop.css @@ -385,6 +385,20 @@ .product-item-label__tag--sale{ background: var(--gradient-red); } + .product-item-label__tag--black{ + background: var(--background-black); + color: var(--text-white); + } + .product-item-label__tag--title{ + padding: 4px 2px; + + font-size: 16px; + line-height: 125%; + color: var(--text-black); + + display: flex; + align-items: center; + } .product-item__product-card{ height: 274px; @@ -559,6 +573,8 @@ /* footer */ .footer{ + margin-top: 80px; + padding: 40px 24px; background: var(--background-black); @@ -653,6 +669,280 @@ } /* footer */ +/* detail */ +.detail{ + margin: 48px 24px 24px 24px; + + display: flex; + flex-wrap: wrap; +} +.detail__images{ + margin: -12px; + + width: calc(50% - 24px); + + display: flex; + flex-wrap: wrap; +} +.detail__image{ + margin: 12px; + + border-radius: 24px; + + display: flex; + align-items: center; + justify-content: center; + + background: var(--background-grey); + cursor: pointer; +} +.detail__image--width-perc-100{ + width: calc(100% - 24px); + height: 600px; + +} +.detail__image--width-perc-50{ + width: calc(50% - 24px); + height: 288px; +} +.detail__image--width-perc-100 img{ + width: 90%; + height: 90%; + + object-fit: contain; +} +.detail__image--width-perc-50 img{ + width: 100%; + height: 100%; + + object-fit: contain; +} +.detail__content{ + margin-left: 48px; + + width: calc(50% - 24px); +} +.detail__label{ + margin: -2px; + display: flex; + align-items: center; +} +.detail__label .product-item-label__tag:last-child{ + margin-left: auto; +} +.detail__label .product-item-label__tag:first-child{ + margin-left: 0; +} +.detail__title{ + margin-top: 8px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 36px; + line-height: 111%; + text-transform: uppercase; + color: var(--text-black); +} +.detail__block-price{ + margin-top: 24px; + + display: flex; + align-items: center; +} +.detail-block-price__price{ + font-family: var(--font-family); + font-weight: 700; + font-size: 36px; + line-height: 111%; + text-transform: uppercase; + color: #121212; +} +.detail-block-price__price::after{ + content: '₽'; +} +.detail-block-price__sale{ + margin-left: 22px; + + display: flex; + align-items: center; +} +.detail-block-price-sale__text{ + font-family: var(--font-family); + font-weight: 700; + font-size: 20px; + line-height: 120%; + text-transform: uppercase; + text-decoration: line-through; + color: var(--text-6); +} +.detail-block-price-sale__text::after{ + content: '₽'; +} +.detail-block-price-sale__perc{ + margin-left: 9px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 12px; + line-height: 133%; + color: var(--text-red); +} +.detail-block-price-sale__perc::before{ + content: '-'; +} +.detail-block-price-sale__perc::after{ + content: '%'; +} +.detail-block__form{ + margin-top: 48px; + + display: flex; + flex-direction: column; +} +.detail-block-form__item{ + margin-top: 24px; + + min-width: 345.89px; + + display: flex; + align-items: center; +} +.detail-block-form__item--radio{ + margin: 16px -8px -8px -8px; +} +.detail-block-form__item:first-child{ + margin-top: 0; +} +.detail-block-form__item button{ + margin: 8px; +} +.detail-block-form__submit{ + min-width: 345.89px; +} +.detail__warning{ + padding: 3px; + + border-radius: 24px; + + background: var(--gradient-turquoise); +} +.detail-warning__content{ + padding: 26px; + + border-radius: 22px; + + background: var(--background-white); +} +.detail-warning__title{ + font-family: var(--font-family); + font-weight: 700; + font-size: 24px; + line-height: 100%; + text-transform: uppercase; + color: var(--text-black); +} +.detail-warning__text{ + margin-top: 16px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +.detail__toggle{ + margin-top: 48px; + margin-bottom: 48px; +} +.detail__catalot{ + margin: 12px -12px -12px -12px; + + width: 100%; + + display: flex; +} +.toggle__table{ + margin-top: 32px; + + display: flex; + flex-wrap: wrap; +} +.toggle__table:first-child{ + margin-top: 0; +} +.toggle__table--three .toggle-table__block:nth-child(1){ + width: 40%; +} +.toggle__table--three .toggle-table__block:nth-child(2){ + width: 40%; +} +.toggle__table--three .toggle-table__block:nth-child(3){ + width: 20%; +} +.toggle__table--two .toggle-table__block{ + width: calc(50% - 20px); +} +.toggle__table--two .toggle-table__block:nth-child(even){ + margin-left: 40px; +} +.toggle-table__block{ + +} +.toggle-table__item{ + margin-top: 8px; + + width: 100%; + + display: flex; + justify-content: space-between; +} +.toggle-table__item p{ + display: block; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + + flex-shrink: 0; +} +.toggle-table__item .warning{ + width: 100%; +} +.toggle-table__item .warning p{ + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + text-align: center; +} +.toggle-table__title{ + margin-bottom: 16px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 16px; + line-height: 125%; + color: var(--text-black); +} +.toggle-table__title--center{ + text-align: center; +} +.toggle-table-item__line{ + margin: 23px 8px 0 8px; + + width: 100%; + + height: 1px; + background: linear-gradient(to right, transparent 50%, #fff 50%), linear-gradient(to right, #333, #333); + background-size: 4px 2px, 100% 2px; + + opacity: .6; +} + +/* detail */ + @media only screen and (max-width: 1600px) { .wrapper{ diff --git a/assets/css/gp-style-tablet.css b/assets/css/gp-style-tablet.css index 38e32dc..fe4a2e8 100644 --- a/assets/css/gp-style-tablet.css +++ b/assets/css/gp-style-tablet.css @@ -39,6 +39,9 @@ /* header */ /* footer */ +.footer{ + margin-top: 0; +} .footer__about{ justify-content: center; } diff --git a/catalog.html b/catalog.html index a15a74b..414220e 100644 --- a/catalog.html +++ b/catalog.html @@ -490,6 +490,93 @@ + \ No newline at end of file diff --git a/modal-basket.html b/modal-basket.html index 89f6023..b13a8f8 100644 --- a/modal-basket.html +++ b/modal-basket.html @@ -761,6 +761,94 @@ + + diff --git a/modal-filter.html b/modal-filter.html index 05d9940..82b539c 100644 --- a/modal-filter.html +++ b/modal-filter.html @@ -756,6 +756,93 @@ + diff --git a/product.html b/product.html new file mode 100644 index 0000000..e93bb61 --- /dev/null +++ b/product.html @@ -0,0 +1,597 @@ + + + + + + + SEO title + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + +
+
+
+ +
+ +
+ +
+
+
+ + + +
+
+ +
+
+
+
+
+
+
+ Кошкам + +
+
+ Собакам + +
+
+
+ +
+
+ + ГЛАВНАЯ + +
+
+ + ПРОДУКЦИЯ + + Кошкам + + Собакам + +
+
+ + О COSMOPET + +
+
+ + ПРОИЗВОДСТВО + +
+
+ + БЛОГ + +
+
+
+
+ +
+
+ + главня + + + продукция + + + корм для собак + +
+ +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ Индейка +
+
+ COSMODOG +
+
+ Распродажа % +
+
+

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

+
+

+ 4304 +

+ +
+

+ 1 449 +

+

+ 10 +

+
+
+
+
+ + + + + +
+
+ +
+
+ +
+
+

+ ОПИСАНИЕ +

+
+
+

+ Утончённое гурманское меню: полнорационный корм для собак 
со вкусом рыбы, на основе индейки и энтопротеина. Все источники протеина легко усваиваются и является гипоаллергенными. 
А высокое содержание в корме Омега-3 способствует здоровью шерсти и кожи, улучшает подвижность суставов, повышает интеллект и укрепляет сердце. Бонусы, с которыми знакомы все заядлые рыбаки! +

+
+
+
+
+

+ СОСТАВ +

+
+
+

+ Дегидрированное мясо индейки и белок насекомых 36% (дегидрированное мясо индейки 21%; белковый концентрат
из Черной львинки (Hermetia illucens) 15%), цельный рис, картофель, жир индейки, печеночный гидролизат, высушенная мякоть сахарной свеклы, автолизат пивных дрожжей (источник натуральных пребиотиков MOS и бета-глюканов), льняное семя, сушеное яблоко, лососевое масло (источник незаменимых Омега-3 жирных кислот), оливковое масло (источник витаминов Е и К), DL-метионин, витаминно-минеральный комплекс, инулин (натуральный пребиотик FOS), экстракт розмарина (натуральный антиоксидант), юкка Шидигера, экстракт женьшеня, глюкозамин, хондроитин. +

+
+
+
+
+

+ РЕКОМЕНДАЦИИ ПО КОРМЛЕНИЮ +

+
+
+
+
+

+ ВЕС СОБАКИ
+ В КГ +

+
+

15 кг

+
+
+
+

20 кг

+
+
+
+
+

+ НИЗКАЯ
+ АКТИВНОСТЬ +

+
+

187 гр/день

+
+
+
+

232 гр/день

+
+
+
+
+

+ ВЫСОКАЯ
+ АКТИВНОСТЬ +

+
+

217 гр/день

+
+
+

269 гр/день

+
+
+
+
+
+
+
+

+ РЕКОМЕНДАЦИИ ПО КОРМЛЕНИЮ +

+
+
+
+
+

ПИЩЕВАЯ ЦЕННОСТЬ

+
+

Сырой белок

+
+

25%

+
+
+
+

ВИТАМИНЫ НА КГ

+
+

Витамин А, МЕ

+
+

16000

+
+
+
+ +
+
+

ПИТАТЕЛЬНЫЕ ДОБАВКИ
НА КГ

+
+

Сырой белок

+
+

25%

+
+
+
+

ЭНЕРГЕТИЧЕСКАЯ ЦЕННОСТЬ
НА 100 ГРАММ

+
+
+
+

387 Ккал /1620кДж

+
+
+
+
+
+
+
+
+
+ + +
+
+

Важно

+

+ Рядом с местом кормления всегда должна быть миска со свежей питьевой водой +

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

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

+

+ 1 304 +

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

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

+

+ 1 304 +

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

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

+

+ 1 304 +

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