diff --git a/assets/css/gp-style-core.css b/assets/css/gp-style-core.css
index 7143121..24b57e5 100644
--- a/assets/css/gp-style-core.css
+++ b/assets/css/gp-style-core.css
@@ -100,6 +100,8 @@
--text-black: #121212;
--text-dark: #2b2b3b;
--text-grey: #999;
+ --text-0: #000;
+ --text-6: #666;
/* background */
--background-white: #fff;
@@ -121,7 +123,7 @@ button{
.wrapper{
margin: 0 auto;
- width: 1280px;
+ max-width: 1280px;
}
/* компоненты */
@@ -172,13 +174,17 @@ button{
top: 33px;
left: -13px;
- /* height: 0; */
+ height: 0;
border-radius: 6px;
transition: height .2s ease-out;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.2);
overflow: hidden;
+
+ background-color: var(--background-white);
+
+ z-index: 100;
}
.lang__list{
width: 104px;
@@ -420,9 +426,81 @@ button{
/* social media */
+/* breadcrumbs */
+.breadcrumbs{
+ margin: 24px;
+
+ display: flex;
+ align-items: center;
+}
+.breadcrumbs__item{
+ display: block;
+
+ padding: 0px 16px;
+
+ font-family: var(--font-family);
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 125%;
+ color: var(--text-6);
+
+ text-decoration: none;
+
+ position: relative;
+}
+.breadcrumbs__item:first-child{
+ padding-left: 0;
+}
+.breadcrumbs__item:nth-child(n+2)::before{
+ content: '';
+
+ position: absolute;
+ top: -2px;
+ left: -12px;
+
+ width: 24px;
+ aspect-ratio: 1;
+
+ background-image: url(../img/svg/main/arrow-breadcrumbs.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+/* breadcrumbs */
+
+
/* product */
.product{
- margin: -24px;
+ padding: 24px;
+}
+.product__header{
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.product__tag{
+ padding-top: 48px;
+
+ display: flex;
+ align-items: center;
+}
+.product-tag__item{
+ padding: 4px 12px;
+
+ border-radius: 16px;
+
+ /* background: linear-gradient(346.57% 244.17% to 149.73% -58.39%, rgb(15, 88, 129) 0%, rgb(30, 164, 156) 51.21689438819885%, rgb(118, 206, 117) 80.70731163024902%, rgb(236, 243, 159) 91.14583134651184%); */
+}
+.product__title{
+ font-family: var(--font-family);
+ font-weight: 700;
+ font-size: 36px;
+ line-height: 111%;
+ text-transform: uppercase;
+ text-align: center;
+ color: var(--text-black);
+}
+.product__main{
+ margin: 24px -24px -24px;
width: 100%;
@@ -438,21 +516,21 @@ button{
border-radius: 24px;
}
-.product__product-card{
+.product-item__product-card{
height: 274px;
display: flex;
justify-content: center;
align-items: center;
}
-.product__images{
+.product-item__images{
height: 242px;
object-fit: contain;
}
-.product__content-card{
+.product-item__content-card{
padding: 15px;
}
-.product__title{
+.product-item__title{
margin-top: 8px;
font-family: var(--font-family);
@@ -461,7 +539,7 @@ button{
line-height: 120%;
color: var(--text-black);
}
-.product__price{
+.product-item__price{
margin-top: 8px;
font-family: var(--font-family);
@@ -471,10 +549,10 @@ button{
text-transform: uppercase;
color: var(--text-black);
}
-.product__price::after{
+.product-item__price::after{
content: '₽';
}
-.product__bye{
+.product-item__bye{
margin-top: 8px;
}
/* product */
@@ -503,6 +581,12 @@ button{
.compound__item:first-child{
margin-left: 0;
}
+.product__footer{
+ margin: 48px 24px 24px;
+
+ display: flex;
+ justify-content: center;
+}
/* compound */
/* button */
@@ -514,10 +598,11 @@ button{
border-radius: 20px;
}
-.button--white{
+.button--100-perc{
width: 100%;
-
- padding: 12px;
+}
+.button--white{
+ padding: 12px 24px;
text-align: center;
diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css
index b99abee..79b393d 100644
--- a/assets/css/gp-style-desktop.css
+++ b/assets/css/gp-style-desktop.css
@@ -1,32 +1,238 @@
/* Основные стили для компьютера */
-.wrapper{
- margin: 0 auto;
+/* header start */
+
+.header{
+ position: relative;
- max-width: 1280px;
+ background-color: var(--background-white);
}
+.header::after{
+ content: '';
-/* header start */
+ position: absolute;
+ left: 24px;
+ bottom: 0;
+
+ width: calc(100% - 48px);
+ height: 1px;
-.header{
+ background: #333;
}
.header__content{
height: 72px;
- padding: 16px 24px;
+ padding: 14px 24px;
display: flex;
justify-content: space-between;
align-items: center;
}
+.header__open-menu{
+ display: none;
+
+ width: 24px;
+ aspect-ratio: 1;
+
+ position: relative;
+
+ border: none;
+ background: none;
+}
+.header__open-menu::before{
+ content: '';
+
+ position: absolute;
+ top: 8px;
+ left: 4px;
+
+ width: 16px;
+ height: 2px;
+
+ background: var(--background-black);
+ border-radius: 1px;
+
+}
+.header__open-menu::after{
+ content: '';
+
+ position: absolute;
+ left: 4px;
+ bottom: 8px;
+
+ width: 16px;
+ height: 2px;
+
+ background: var(--background-black);
+ border-radius: 1px;
+}
+
.header__logo{
width: 182px;
height: 40px;
}
.header__logo-black{
+ width: 100%;
+ height: 100%;
+}
+
+.header__menu-block{
+ position: absolute;
+ top: 72px;
+ left: 0;
+
+ width: 100%;
+ height: 0;
+
+ overflow: hidden;
+ transition: height .2s ease-out;
+
+ background-color: var(--background-white);
+}
+
+.header__pc-menu{
+ padding: 40px 46px;
+
+ display: flex;
+ justify-content: center;
+
+ position: relative;
+}
+.header__pc-menu::before{
+ content: '';
+
+ position: absolute;
+ top: 0;
+ left: 46px;
+
+ width: 330px;
+ height: 248px;
+
+ background-image: url(../img/pet/cat.png);
+ background-repeat: no-repeat;
+}
+.header__pc-menu::after{
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 46px;
+
+ width: 330px;
+ height: 248px;
+
+ background-image: url(../img/pet/dog.png);
+ background-repeat: no-repeat;
+}
+.header-pc-menu__content{
+ width: 600px;
+
+ display: flex;
+ justify-content: space-between;
+}
+.header-pc-menu__item{
+
+}
+.header-pc-menu__title{
+ font-family: var(--font-family);
+ font-weight: 700;
+ font-size: 26px;
+ line-height: 123%;
+ text-transform: uppercase;
+ color: var(--text-black);
+
+ text-decoration: none;
+}
+.header-pc-menu__list{
+ margin-top: 16px;
+
+ list-style-type: none;
+}
+.header-pc-menu__list-li{
+ margin-top: 25px;
+}
+.header-pc-menu__list-li:first-child{
+ margin-top: 0;
+}
+.header-pc-menu__list-li a{
+ font-family: var(--font-family);
+ font-weight: 600;
+ font-size: 20px;
+ line-height: 120%;
+ color: var(--text-0);
+
+ text-decoration: none;
+}
+.header__phone-menu{
+ display: none;
+
+ padding: 24px 16px;
+}
+.header-phone-menu__item{
+ padding: 16px 0;
+
+ border-top: 1px solid #f4f1f0;
+ border-bottom: 1px solid #f4f1f0;
+
+ display: flex;
+ flex-direction: column;
+}
+.header-phone-menu__item:first-child{
+ border-top: 0;
+}
+.header-phone-menu__item:last-child{
+ border-bottom: 0;
+}
+.header-phone-menu__title{
+ font-family: var(--font-family);
+ font-weight: 700;
+ font-size: 20px;
+ line-height: 120%;
+ color: var(--text-black);
+
+ text-decoration: none;
+}
+.header-phone-menu__title--gradient{
+ background: var(--gradient-blue);
+ background-clip: text;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+.header-phone-menu__category{
+ margin-top: 16px;
+
+ font-family: var(--font-family);
+ font-weight: 500;
+ font-size: 18px;
+ line-height: 133%;
+ color: var(--text-black);
+
+ text-decoration: none;
+}
+.header-phone-menu__list{
+ margin-top: 24px;
+
+ padding-left: 32px;
+
+ list-style-type: none;
+}
+.header-phone-menu__list-item{
+ margin-top: 16px;
+}
+.header-phone-menu__list-item:first-child{
+ margin-top: 0;
+}
+.header-phone-menu__list-item a{
+ font-family: var(--font-family);
+ font-weight: 500;
+ font-size: 16px;
+ line-height: 125%;
+ color: #121212;
+ color: var(--text-black);
+
+ text-decoration: none;
}
/* header end */
diff --git a/assets/css/gp-style-mobile.css b/assets/css/gp-style-mobile.css
index 0cf51d3..99ed4c9 100644
--- a/assets/css/gp-style-mobile.css
+++ b/assets/css/gp-style-mobile.css
@@ -1,5 +1,6 @@
/* Стили для мобильных устройств */
@media only screen and (max-width: 576px) {
+/* header */
-
+/* header */
}
\ No newline at end of file
diff --git a/assets/css/gp-style-tablet.css b/assets/css/gp-style-tablet.css
index 32a3ef6..54904d2 100644
--- a/assets/css/gp-style-tablet.css
+++ b/assets/css/gp-style-tablet.css
@@ -1,5 +1,41 @@
/* Стили для планшетов */
-@media only screen and (max-width: 992px) {
+@media only screen and (max-width: 1200px) {
+/* header */
+.main-menu{
+ display: none;
+}
+.header__open-menu{
+ display: block;
+}
+.lang{
+ display: none;
+}
+.header__logo{
+ width: 136px;
+ height: 24px;
+}
+.header__content{
+ height: auto;
+ padding: 8px 16px;
+}
+.mini-profile__item:nth-child(2){
+ margin-left: 0;
+}
+.header::after{
+ left: 0;
+
+ width: 100%;
+}
+.header__pc-menu{
+ display: none;
+}
+.header__phone-menu{
+ display: block;
+}
+.header__menu-block{
+ top: 56px;
+}
+/* header */
}
\ No newline at end of file
diff --git a/assets/img/pet/cat.png b/assets/img/pet/cat.png
new file mode 100644
index 0000000..f88dd36
Binary files /dev/null and b/assets/img/pet/cat.png differ
diff --git a/assets/img/pet/dog.png b/assets/img/pet/dog.png
new file mode 100644
index 0000000..36e37ae
Binary files /dev/null and b/assets/img/pet/dog.png differ
diff --git a/assets/img/svg/main/arrow-breadcrumbs.svg b/assets/img/svg/main/arrow-breadcrumbs.svg
new file mode 100644
index 0000000..f1f9618
--- /dev/null
+++ b/assets/img/svg/main/arrow-breadcrumbs.svg
@@ -0,0 +1,3 @@
+
diff --git a/assets/js/gp-main.js b/assets/js/gp-main.js
index e78085d..4727b32 100644
--- a/assets/js/gp-main.js
+++ b/assets/js/gp-main.js
@@ -1,27 +1,29 @@
'use strict';
-// lang start
-
-let lang = document.querySelector('.lang');
-
-
-lang.onclick = function (e) {
- let target = e.target
-
- console.log(e);
-
-
- if (target.classList.contains('lang__open')) {
-
+function toggleOpenX(button, content, blockheight) {
+ let thisButton = document.querySelector(button),
+ thisContent = document.querySelector(content),
+ thisBlockheight = document.querySelector(blockheight);
+
+ thisButton.onclick = function () {
+ let height = thisBlockheight.clientHeight;
+
+ if (!thisContent.classList .contains('open')) {
+ thisContent.style.height = `${height}px`;
+ thisContent.classList .add('open');
+ }else{
+ thisContent.style.height = null;
+ thisContent.classList .remove('open');
+ }
}
-
- // let langOpenButton
- // let langContent
- // let langList
+}
- // let height = langList.offsetHeight;
-
+// header start
+toggleOpenX('#pc-menu','.header__menu-block','.header__pc-menu');
+toggleOpenX('#phone-menu','.header__menu-block','.header__phone-menu');
-}
+// header end
+// lang start
+toggleOpenX('.lang__open','.lang__content','.lang__list');
// lang end
\ No newline at end of file
diff --git a/index.html b/index.html
index 2ba7bc6..1a55dfd 100644
--- a/index.html
+++ b/index.html
@@ -13,7 +13,7 @@
-
+
@@ -50,7 +50,10 @@
+ 
+