From 094e94ad7d6d8b354c1f61d1b3c52fe90752be24 Mon Sep 17 00:00:00 2001
From: Kirill Pet <job.mori.1967@gmail.com>
Date: Wed, 23 Oct 2024 18:44:16 +0300
Subject: [PATCH] =?UTF-8?q?=D1=81=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=20=D0=BA?=
 =?UTF-8?q?=D0=B0=D0=B1=D0=B8=D0=BD=D0=B5=D0=BD=D1=82=20=D0=B7=D0=B0=D1=80?=
 =?UTF-8?q?=D0=B5=D0=B3=D0=B8=D1=81=D1=82=D1=80=D0=B8=D1=80=D0=BE=D0=B2?=
 =?UTF-8?q?=D0=B0=D0=BD=D0=BD=D0=BE=D0=B3=D0=BE=20=D0=BF=D0=BE=D0=BB=D1=8C?=
 =?UTF-8?q?=D0=B7=D0=BE=D0=B2=D0=B0=D1=82=D0=B5=D0=BB=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/css/gp-style-core.css                  |   8 +
 assets/css/gp-style-desktop.css               | 307 +++++++++++++++---
 assets/img/pet/mini-dog.png                   | Bin 0 -> 2026 bytes
 .../img/svg/main/arrow-breadcrumbs-black.svg  |   3 +
 registration.html                             | 176 +++++++---
 5 files changed, 417 insertions(+), 77 deletions(-)
 create mode 100644 assets/img/pet/mini-dog.png
 create mode 100644 assets/img/svg/main/arrow-breadcrumbs-black.svg

diff --git a/assets/css/gp-style-core.css b/assets/css/gp-style-core.css
index 8c06960..1e8a163 100644
--- a/assets/css/gp-style-core.css
+++ b/assets/css/gp-style-core.css
@@ -111,6 +111,7 @@
     --background-black: #121212;
     --background-grey: #f2f2f2;
     --background-green: #2ED15D;
+    --background-green-white: #f4fff0;
     --background-9: #999;
 
 
@@ -636,6 +637,13 @@ button{
 
   position: relative;
 }
+.button--high-46{
+  padding: 12px 24px;
+
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 24px;
+}
 .button--icon{
   padding-right: 56px;
 
diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css
index ba8a20a..bbd4ee9 100644
--- a/assets/css/gp-style-desktop.css
+++ b/assets/css/gp-style-desktop.css
@@ -1261,56 +1261,65 @@ main{
 /* gallery */
 
 
-/* registration */
-.registration{
+/* cabinet */
+.cabinet{
   padding: 24px;
 
   display: flex;
   justify-content: space-between;
 }
-.registration__orders{
+.cabinet__orders{
   width: calc((100% - 48px) / 3);
 }
-.registration__profile{
+.cabinet__profile{
   width: calc(((100% - 48px) / 3) * 2);
 }
 
-.registration-card{
+.cabinet-card{
   margin-top: 32px;
 
   padding: 1px;
 
   border-radius: 20px;
 }
-.registration-card:first-child{
+.cabinet-card:first-child{
   margin-top: 0;
 }
-.registration-card--green{
+.cabinet-card--green{
   background: var(--background-green);
 }
-.registration-card--red-blue{
+.cabinet-card--green-white{
+  background: var(--background-green-white);
+}
+.cabinet-card--green-white .cabinet-card__content{
+  background: none;
+}
+.cabinet-card--red-blue{
   background: var(--gradient-red);
 }
-.registration-card__content{
+.cabinet-card--grey{
+  background: var(--background-9);
+}
+.cabinet-card__content{
   padding: 23px;
 
   border-radius: 19px;
 
   background-color: var(--background-white);
 }
-.registration-card__element{
+.cabinet-card__element{
   margin-top: 24px;
 
   position: relative;
 }
-.registration-card__element--margin-top-32{
+.cabinet-card__element--margin-top-32{
   margin-top: 32px;
 }
-.registration-card__element:first-child,
-.registration-card__element--margin-top-32:first-child{
+.cabinet-card__element:first-child,
+.cabinet-card__element--margin-top-32:first-child{
   margin-top: 0
 }
-.registration-card__element-change{
+.cabinet-card__element-change{
   position: absolute;
   top: 14px;
   right: 0;
@@ -1324,21 +1333,32 @@ main{
 
   transition: opacity .2s ease-out;
 }
-.registration-card__element-change:hover{
+.cabinet-card__element-change:hover{
   opacity: .8;
 }
-.registration-card__text{
+.cabinet-card__title{
   font-family: var(--font-family);
-  font-weight: 500;
+  font-weight: 700;
+  font-size: 26px;
+  line-height: 123%;
+  text-transform: uppercase;
+  background: var(--gradient-blue);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.cabinet-card__text{
+  font-family: var(--font-family);
+  font-weight: 400;
   font-size: 20px;
   line-height: 120%;
 
   color: var(--text-black);
 }
-.registration-card__text--grey{
+.cabinet-card__text--grey{
   color: var(--text-grey);
 }
-.registration-card__label{
+.cabinet-card__label{
   font-family: var(--font-family);
   font-weight: 700;
   font-size: 16px;
@@ -1346,7 +1366,7 @@ main{
 
   color: var(--text-3);
 }
-.registration-card__status{
+.cabinet-card__status{
   padding-left: 20px;
 
   font-family: var(--font-family);
@@ -1356,10 +1376,10 @@ main{
 
   position: relative;
 }
-.registration-card__status--chek{
+.cabinet-card__status--chek{
   color: var(--text-green);
 }
-.registration-card__status--chek::before{
+.cabinet-card__status--chek::before{
   content: '';
 
   position: absolute;
@@ -1372,10 +1392,10 @@ main{
   background-image: url(../img/svg/main/status-chek.svg);
   object-fit: contain;
 }
-.registration-card__status--cancelled{
+.cabinet-card__status--cancelled{
   color: var(--text-red);
 }
-.registration-card__status--cancelled::before{
+.cabinet-card__status--cancelled::before{
   content: '';
 
   position: absolute;
@@ -1388,10 +1408,10 @@ main{
   background-image: url(../img/svg/main/status-cancelled.svg);
   object-fit: contain;
 }
-.registration-card__block-accounts{
+.cabinet-card__block-accounts{
   display: flex;
 }
-.registration-card__account{
+.cabinet-card__account{
   margin-left: 16px;
 
   width: 40px;
@@ -1404,15 +1424,15 @@ main{
   background: var(--background-9);
   border-radius: 50%;
 }
-.registration-card__account:first-child{
+.cabinet-card__account:first-child{
   margin-left: 0;
 }
-.registration-card__block-buttons{
+.cabinet-card__block-buttons{
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
-.registration-card__button{
+.cabinet-card__button{
   padding: 8px 8px 6px 0;
 
   font-family: var(--font-family);
@@ -1426,7 +1446,7 @@ main{
 
   position: relative;
 }
-.registration-card__button::before{
+.cabinet-card__button::before{
   content: '';
 
   position: absolute;
@@ -1439,16 +1459,16 @@ main{
 
   transition: opacity .2s ease-out;
 }
-.registration-card__button:hover{
+.cabinet-card__button:hover{
   opacity: .8;
 }
-.registration-card__text, .registration-card__label, .registration-card__status, .registration-card__block-accounts, .registration-card__block-buttons{
+.cabinet-card__text, .cabinet-card__label, .cabinet-card__status, .cabinet-card__block-accounts, .cabinet-card__block-buttons{
   margin-top: 8px;
 }
-.registration-card__text:first-child, .registration-card__label:first-child, .registration-card__status:first-child, .registration-card__block-accounts:first-child, .registration-card__block-buttons:first-child{
+.cabinet-card__text:first-child, .cabinet-card__label:first-child, .cabinet-card__status:first-child, .cabinet-card__block-accounts:first-child, .cabinet-card__block-buttons:first-child{
   margin-top: 0px;
 }
-.registration-card__block-add-pets{
+.cabinet-card__block-add-pets{
   width: 100%;
 
   display: flex;
@@ -1457,7 +1477,7 @@ main{
   background: none;
   border: none;
 }
-.registration-card-add-pets__circle{
+.cabinet-card-add-pets__circle{
   width: 48px;
   aspect-ratio: 1;
 
@@ -1468,7 +1488,7 @@ main{
   border: 1px solid var(--text-6);
   border-radius: 50%;
 }
-.registration-card-add-pets__text{
+.cabinet-card-add-pets__text{
   margin-left: 16px;
 
   font-family: var(--font-family);
@@ -1480,7 +1500,7 @@ main{
 
   position: relative;
 }
-.registration-card-add-pets__text::after{
+.cabinet-card-add-pets__text::after{
   content: '';
 
   position: absolute;
@@ -1492,7 +1512,218 @@ main{
 
   background: var(--text-6);
 }
-/* registration */
+.cabinet-card__discount{
+  display: flex;
+  align-items: center;
+}
+.cabinet-card-discount__title{
+  font-family: var(--font-family);
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 125%;
+  color: var(--text-black);
+}
+.cabinet-card-discount__percent{
+  margin-left: 16px;
+
+  font-family: var(--font-family);
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 125%;
+  color: var(--text-black);
+}
+.cabinet-card-discount__percent::after{
+  content: '%';
+}
+.cabinet-card-discount__arrow{
+  display: inline-block;
+
+  margin-left: 6px;
+
+  width: 20px;
+  aspect-ratio: 1;
+
+  background-image: url(../img/svg/main/arrow-breadcrumbs-black.svg);
+  background-position: center;
+}
+.cabinet-card__no-orders{
+  margin-top: 32px;
+
+  padding: 48px 24px;
+}
+.cabinet-card-no-orders__element{
+  margin-top: 26px;
+}
+.cabinet-card-no-orders__element:first-child{
+  margin-top: 0;
+}
+.cabinet-card-no-orders__title{
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 133%;
+  text-align: center;
+  color: var(--text-black);
+}
+.cabinet-card__pet{
+  display: flex;
+  align-items: center;
+}
+.cabinet-card-pet__icon{
+  width: 48px;
+  aspect-ratio: 1;
+
+  border-radius: 50%;
+  background: var(--gradient-blue);
+}
+.cabinet-card-pet-icon__content{
+  margin: 1px;
+  
+  width: calc(100% - 2px);
+  aspect-ratio: 1;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  border-radius: 50%;
+  background: var(--background-white);
+}
+.cabinet-card-pet-icon__content img{
+  width: 32px;
+  aspect-ratio: 1;
+
+  object-fit: contain;
+}
+.cabinet-card-pet__name{
+  margin-left: 24px;
+
+  font-family: var(--font-family);
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 125%;
+  color: var(--text-black);
+}
+.cabinet-card__order{
+
+}
+.cabinet-card-order__header{
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+.cabinet-card-order__main{}
+.cabinet-card-order-main__date{
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 133%;
+  color: var(--text-black);
+}
+.cabinet-card-order-main__number{
+  margin-top: 8px;
+
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 133%;
+  color: var(--text-black);
+}
+.cabinet-card-order-main__number::before{
+  content: '№';
+}
+.cabinet-card-order__payment{
+  display: flex;
+  align-items: flex-end;
+}
+.cabinet-card-order-payment__title{
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 133%;
+  color: var(--text-black);
+}
+.cabinet-card-order-payment__price{
+  margin-left: 8px;
+
+  font-family: var(--font-family);
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 125%;
+  color: var(--text-black);
+}
+.cabinet-card-order-payment__price::after{
+  margin-left: 5px;
+  content: '₽';
+}
+.cabinet-card-order__content{
+  margin-top: 24px;
+}
+.cabinet-card-order__content
+.cabinet-card-order__status{
+  display: flex;
+  align-items: center;
+}
+.cabinet-card-order-status__title{
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 120%;
+  color: var(--text-black);  
+}
+.cabinet-card-order-status__pointer{
+  margin-left: 12px;
+
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 120%;
+  color: var(--text-black); 
+}
+.cabinet-card-order-status__pointer--grey{
+  color: var(--text-6);
+}
+.cabinet-card-order-status__pointer--green{
+  color: var(--text-green);
+}
+.cabinet-card-order-status__pointer--red{
+  color: var(--text-red);
+}
+.cabinet-card-order__block-detail{}
+.cabinet-card-order__detail{}
+.cabinet-card-order__open-detail{
+  margin-top: 24px;
+
+  padding-right: 24px;
+
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 120%;
+  color: var(--text-black);
+
+  border: none;
+  background: none;
+
+  position: relative;
+}
+.cabinet-card-order__open-detail::after{
+  content: '';
+
+  position: absolute;
+  top: 4px;
+  right: 0;
+
+  width: 16px;
+  aspect-ratio: 1;
+
+  background-image: url(../img/svg/main/arrow-black.svg);
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+/* .cabinet-card-no-orders__ */
+/* cabinet */
 
 @media only screen and (max-width: 1600px) {
 
diff --git a/assets/img/pet/mini-dog.png b/assets/img/pet/mini-dog.png
new file mode 100644
index 0000000000000000000000000000000000000000..59a696da2ba219db7d681456ff69e69fcba1f171
GIT binary patch
literal 2026
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
IM6N<$f*~{2&Hw-a

literal 0
HcmV?d00001

diff --git a/assets/img/svg/main/arrow-breadcrumbs-black.svg b/assets/img/svg/main/arrow-breadcrumbs-black.svg
new file mode 100644
index 0000000..88fd149
--- /dev/null
+++ b/assets/img/svg/main/arrow-breadcrumbs-black.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.94673 2.74797C9.26993 2.62677 9.63019 2.79052 9.75139 3.11373L12.2514 9.78039C12.3045 9.92188 12.3045 10.0778 12.2514 10.2193L9.75139 16.886C9.63019 17.2092 9.26993 17.3729 8.94673 17.2517C8.62353 17.1305 8.45978 16.7703 8.58098 16.4471L10.9987 9.99984L8.58098 3.55263C8.45978 3.22943 8.62353 2.86917 8.94673 2.74797Z" fill="#333333"/>
+</svg>
diff --git a/registration.html b/registration.html
index a2aa9da..123d05f 100644
--- a/registration.html
+++ b/registration.html
@@ -225,48 +225,48 @@
         </header>
         
         <main class="wrapper">
-            <div class="registration">
-                <div class="registration__orders">
-                    <div class="registration-card registration-card--green">
-                        <div class="registration-card__content">
-                            <div class="registration-card__element">
-                                <p class="registration-card__text registration-card__text--grey">Имя и фамилия  не указано</p>
+            <div class="cabinet">
+                <div class="cabinet__orders">
+                    <div class="cabinet-card cabinet-card--green">
+                        <div class="cabinet-card__content">
+                            <div class="cabinet-card__element">
+                                <p class="cabinet-card__text cabinet-card__text--grey">Имя и фамилия  не указано</p>
                             </div>
 
-                            <div class="registration-card__element">
-                                <p class="registration-card__label">Телефон:</p>
-                                <p class="registration-card__text registration-card__text--grey">Не заполнено</p>
+                            <div class="cabinet-card__element">
+                                <p class="cabinet-card__label">Телефон:</p>
+                                <p class="cabinet-card__text cabinet-card__text--grey">Не заполнено</p>
                             </div>
 
-                            <div class="registration-card__element">
-                                <p class="registration-card__label">Почта:</p>
-                                <p class="registration-card__text">example@example.com</p>
-                                <p class="registration-card__status registration-card__status--chek">Почта подтверждена</p>
-                                <!-- <p class="registration-card__status registration-card__status--cancelled">Почта не подтверждена</p> -->
+                            <div class="cabinet-card__element">
+                                <p class="cabinet-card__label">Почта:</p>
+                                <p class="cabinet-card__text">example@example.com</p>
+                                <p class="cabinet-card__status cabinet-card__status--chek">Почта подтверждена</p>
+                                <!-- <p class="cabinet-card__status cabinet-card__status--cancelled">Почта не подтверждена</p> -->
                             </div>
 
-                            <div class="registration-card__element">
-                                <p class="registration-card__label">Связанные аккаунты:</p>
-                                <div class="registration-card__block-accounts">
-                                    <div class="registration-card__account">
+                            <div class="cabinet-card__element">
+                                <p class="cabinet-card__label">Связанные аккаунты:</p>
+                                <div class="cabinet-card__block-accounts">
+                                    <div class="cabinet-card__account">
                                         <img src="assets/img/svg/main/google-white.svg" alt="">
                                     </div>
-                                    <div class="registration-card__account">
+                                    <div class="cabinet-card__account">
                                         <img src="assets/img/svg/main/vk-white.svg" alt="">
                                     </div>
-                                    <div class="registration-card__account">
+                                    <div class="cabinet-card__account">
                                         <img src="assets/img/svg/main/ya-white.svg" alt="">
                                     </div>
                                 </div>
                             </div>
 
-                            <div class="registration-card__element">
-                                <div class="registration-card__block-buttons">
-                                    <button class="registration-card__button">
+                            <div class="cabinet-card__element">
+                                <div class="cabinet-card__block-buttons">
+                                    <button class="cabinet-card__button">
                                         Изменить
                                     </button>
 
-                                    <button class="registration-card__button">
+                                    <button class="cabinet-card__button">
                                         Выйти
                                     </button>
                                 </div>
@@ -274,18 +274,18 @@
                         </div>
                     </div>
 
-                    <div class="registration-card registration-card--green">
-                        <div class="registration-card__content">
-                            <p class="registration-card__text">Мои адреса</p>
+                    <div class="cabinet-card cabinet-card--green">
+                        <div class="cabinet-card__content">
+                            <p class="cabinet-card__text">Мои адреса</p>
 
-                            <div class="registration-card__element registration-card__element--margin-top-32">
-                                <p class="registration-card__label">Курьер</p>
-                                <p class="registration-card__text registration-card__text--grey">Не заполнено</p>
+                            <div class="cabinet-card__element cabinet-card__element--margin-top-32">
+                                <p class="cabinet-card__label">Курьер</p>
+                                <p class="cabinet-card__text cabinet-card__text--grey">Не заполнено</p>
 
-                                <button class="registration-card__element-change"></button>
+                                <button class="cabinet-card__element-change"></button>
                             </div>
 
-                            <div class="registration-card__element registration-card__element--margin-top-32">
+                            <div class="cabinet-card__element cabinet-card__element--margin-top-32">
                                 <button class="button button--white button--100-perc">
                                     Добавить адрес
                                 </button>
@@ -293,22 +293,120 @@
                         </div>
                     </div>
 
-                    <div class="registration-card registration-card--green">
-                        <div class="registration-card__content">
-                            <button class="registration-card__block-add-pets">
-                                <div class="registration-card-add-pets__circle">
+                    <div class="cabinet-card cabinet-card--green">
+                        <div class="cabinet-card__content">
+                            <div class="cabinet-card__pet">
+                                 <div class="cabinet-card-pet__icon">
+                                    <div class="cabinet-card-pet-icon__content">
+                                        <img src="assets/img/pet/mini-dog.png" alt="">
+                                    </div>
+                                 </div>
+
+                                 <p class="cabinet-card-pet__name">Барон</p>
+                            </div>
+
+                            <div class="cabinet-card__element">
+                                <p class="cabinet-card__label">Порода:</p>
+                                <p class="cabinet-card__text">Немецкая овчарка</p>
+                            </div>
+                            <div class="cabinet-card__element">
+                                <p class="cabinet-card__label">Вес:</p>
+                                <p class="cabinet-card__text">от 25 до 40 кг</p>
+                            </div>
+                            <div class="cabinet-card__element">
+                                <p class="cabinet-card__label">Возраст:</p>
+                                <p class="cabinet-card__text">3 года</p>
+                            </div>
+                            <div class="cabinet-card__element">
+                                <p class="cabinet-card__label">Активность:</p>
+                                <p class="cabinet-card__text">Активный</p>
+                            </div>
+                            <div class="cabinet-card__element">
+                                <button class="cabinet-card__button">
+                                    Изменить
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="cabinet-card cabinet-card--green">
+                        <div class="cabinet-card__content">
+                            <button class="cabinet-card__block-add-pets">
+                                <div class="cabinet-card-add-pets__circle">
                                     <img src="assets/img/svg/main/plus-grey.svg" alt="">
                                 </div>
 
-                                <p class="registration-card-add-pets__text">
+                                <p class="cabinet-card-add-pets__text">
                                     Добавить питомца
                                 </p>
                             </button>
                         </div>
                     </div>
                 </div>
-                <div class="registration__profile">
-                    s
+                <div class="cabinet__profile">
+                    <div class="cabinet-card cabinet-card--green-white">
+                        <div class="cabinet-card__content">
+                            <p class="cabinet-card__title">
+                                Подписка на корм
+                            </p>
+                            <div class="cabinet-card__element">
+                                <p class="cabinet-card__text">Еженедельная доставка корма для вашего питомца</p>
+                            </div>
+
+                            <div class="cabinet-card__element">
+                                <button  class="button button--gradient button--high-46">
+                                    Узнать подробности
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="cabinet-card cabinet-card--red-blue">
+                        <div class="cabinet-card__content">
+                            <div class="cabinet-card__discount">
+                                <p class="cabinet-card-discount__title">МОЯ СКИДКА</p>
+                                <p class="cabinet-card-discount__percent">3</p>
+                                <div class="cabinet-card-discount__arrow"></div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="cabinet-card cabinet-card--grey">
+                        <div class="cabinet-card__content">
+                            <div class="cabinet-card__order">
+                                <div class="cabinet-card-order__header">
+                                    <div class="cabinet-card-order__main">
+                                        <p class="cabinet-card-order-main__date">Заказ от 06.09.2024</p>
+                                        <p class="cabinet-card-order-main__number">763276427364</p>
+                                    </div>
+                                    <div class="cabinet-card-order__payment">
+                                        <p class="cabinet-card-order-payment__title">Оплачено:</p>
+                                        <p class="cabinet-card-order-payment__price">8960</p>
+                                    </div>
+                                </div>
+
+                                <div class="cabinet-card-order__content">
+                                    <div class="cabinet-card-order__status">
+                                        <p class="cabinet-card-order-status__title">Статус:</p>
+                                        <p class="cabinet-card-order-status__pointer cabinet-card-order-status__pointer--grey">Доставлен</p>
+                                    </div>
+
+                                    <button class="cabinet-card-order__open-detail">Детали заказа</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="cabinet-card__no-orders">
+                        <div class="cabinet-card-no-orders__element">
+                            <p class="cabinet-card-no-orders__title">Пока нет заказов</p>
+                        </div>
+                        <div class="cabinet-card-no-orders__element">
+                            <button class="to-know button--100-perc to-know--background-none">
+                                <p>Перейти в каталог</p>
+                            </button>
+                        </div>
+                    </div>
                 </div>
             </div>
         </main>