Update readme and add normilize.css + reset.css

Добавил частую ошибку - формат изображений не зафиксирован
Добавил уточнение, что надо качать только ветку master или with-phpmailer
2025-01-26 01:44:04 +03:00 · 2025-01-10 11:12:00 +00:00 · 2024-12-24 12:30:53 +00:00
63 changed files with 75 additions and 6198 deletions
--- a/README.md
+++ b/README.md
@@ -2,7 +2,35 @@

 ### **С точки зрения веб-разработки:**
 * верстаем на чистом HTML/CSS с использованием flex и grid (без подключение библиотек типа bootstrap и т.п.)
-* при именовании блоков используем методологию **БЭМ в стиле "Two Dashes"**:
+* соблюдаем Scope-ориентированный подход:
+    - каждую секцию/экран именуем **уникальным** классом-родителем, от которого строим CSS-селектор для дочерних элементов, что ограничивает область ваших стилей только внутри секции/экрана, не влияя на другие части сайта.
+    
+    - пример:  <br>
+    
+    HTML:
+    ```
+    <section class="my-namespace">
+        <h1>Новый заголовок</h1>
+        <button class="my-button">Кнопка</button>
+    </section>
+    ```
+
+    CSS:
+
+    ```
+    .my-namespace h1 {
+        font-size: 24px;
+        color: #333;
+    }
+
+    .my-namespace .my-button {
+        background-color: #007BFF;
+        color: #fff;
+    }
+    ```
+
+
+* чтобы дополнительно структурировать CSS при именовании блоков используем методологию **БЭМ в стиле "Two Dashes"**:
    `block-name__elem-name--mod-name--mod-val`
    + имена записываются латиницей в нижнем регистре
    + для разделения слов в именах БЭМ-сущностей используется дефис (-)
@@ -11,8 +39,10 @@
    + значение модификатора отделяется от его имени двумя дефисами (--)
 * из конечного HTML-файла убрать все комментарии, если такие имеются 
 * все медиазапросы пишутся в отдельных файлах (которые мы подготовили) для того чтобы оптимизировать скорость загрузки; если используется препроцессор, то не нужно в классе каждого блока использовать импорты медиа запросов, а наоборот выносим  пример можно посмотреть на ["видео"](https://www.youtube.com/watch?v=9uaENbRyVT4)
+* **частая ошибка:** верстальщик берет изображения/видео из макета и не задает им адаптивную ширину/высоту, и на моменте сдачи верстки не заметно косяков, а вот когда мы переходим к натяжке и медиаматериалы начинают выводиться в шаблон динамически и уже разных форматов (ШИРИНАxВЫСОТА), тогда верстка начинает плыть. Чтоб такое избежать проверяйте на как себя ведет элемент при замене слишком большой/маленькой картинки. 
 * **ВАЖНО:** если верстка делается для многостраничного сайта (особенно на CMS), то для всех страниц прописывать уникальный класс в \<body\>, от которого строить все CSS-правила на этой странице + для кажой станицы использовать свои отдельные CSS-файлы
-
+* подключаем вначале normalize.min.css и reset.min.css, чтобы сбросить глобальные стили и устранить влияние наследуемых правил.
+* шрифты и глобальные переменные выносим в отдельный файл (у нас это *gp-style-core.css*)

 ### **С точки зрения SEO:**
 * все теги использовать строго по назначению! Текстовые (strong, b, i, em, h1-h6… p) используем только в текстовых блоках и заголовках. Для дизайна используем div и span. Например не нужно втыкать в подвал, шапку или формы захвата h4 или закрывать просто крупный текст, который не является заголовком в h2.
@@ -25,7 +55,11 @@
 ## **Порядок работы**

 ### **Подготовка окружения для локальной разработки**
-1. Выкачивать локально на свой компьютер шаблон командой: `git clone https://git.good-production.xyz/Good-Production/template-for-verstka.git`
+1. Выкачивать локально на свой компьютер один из 2х шаблонов (по веткам: 1 - master, 2 - with-phpmailer) командой: `git clone -b ${branch_name} https://git.good-production.xyz/Good-Production/template-for-verstka.git`
+
+заменить переменную: 
+`${branch_name}` -- на "master", если достаточно только отправки форм в ТГ, либо "with-phpmailer", если нужна отправка на почту средствами PHP (без использования плагинов CMS)
+
 2. Далее создать свою ветку командой: `git checkout -b ${project_name}--${name}`
 3. Приступить к локальной разработке в созданной ветке
 4. Для демонстрации работы пушить свои комиты в созданную ветку командой: `git push origin ${project_name}--${name}`
--- a/assets/css/gp-style-core.css
+++ b/assets/css/gp-style-core.css
--- a/assets/css/gp-style-desktop.css
+++ b/assets/css/gp-style-desktop.css
@@ -1,960 +1,9 @@
 /* Основные стили для компьютера */

-/* header start */

-.header{
-    position: relative;

-    background-color: var(--background-white);
-}
-.header::after{
-    content: '';
+/* писать сюда... */

-    position: absolute;
-    left: 24px;
-    bottom: 0;
-    
-    width: calc(100% - 48px);
-    height: 1px;
-
-    background:  var(--text-3);
-}
-
-.header__content{
-    height: 72px;
-
-    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);
-
-    z-index: 100;
-}
-
-.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 */
-
-/* product */
-.product{
-    padding: 24px;
-  }
-  .product__header{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .product__tag{
-    margin: 36px -12px -12px -12px;
-  
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-  }
-  .product-tag__item{
-    margin: 12px;
-
-    padding: 1px;
-  
-    border-radius: 16px;
-  
-    background: var(--gradient-blue);
-  }
-  .product-tag-item__content{
-    padding: 3px 11px;
-  
-    background: var(--background-white);
-  
-    border-radius: 15px;
-  
-    display: flex;
-    align-items: center;
-  }
-  .product-tag-item__text{
-    font-family: var(--font-family);
-    font-weight: 400;
-    font-size: 20px;
-    line-height: 120%;
-    background: var(--gradient-blue);
-    background-clip: text;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-  }
-  .product-tag-item__button{
-    margin: 2px 0 2px 4px;
-  
-    width: 20px;
-    aspect-ratio: 1;
-  
-    background: none;
-    border: none;
-  
-    background-image: url(../img/svg/main/gradient-x.svg);
-    background-repeat: no-repeat;
-    background-position: center;
-  }
-  .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: 36px -12px -12px;
-  
-    /* width: 100%; */
-  
-    display: flex;
-    align-items: stretch;
-    flex-wrap: wrap;
-  }
-  .product__item{
-    margin: 12px;
-  
-    width: calc(25% - 24px);
-  
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-
-    background-color: var(--background-grey);
-    border-radius: 24px;
-
-    position: relative;
-  }
-  .product__item::before{
-    content: '';
-
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    width: calc(100% - 2px);
-    height: calc(100% - 2px);
-
-    border: 1px solid #000;
-    border-radius: 24px;
-    
-    pointer-events: none;
-    transition: opacity .2s ease-out;
-
-    opacity: 0;
-  }
-  .product__item:hover::before{
-    opacity: 1;
-  }
-  .product-item__block-label{
-    position: absolute;
-    top: 16px;
-    left: 16px;
-  }
-  .product-item__label{
-    position: absolute;
-    top: 16px;
-    left: 16px;
-
-    margin: -2px;
-
-    display: flex;
-    align-items: center;
-
-    z-index: 10;
-  }
-  .product-item-label__tag{
-    margin: 2px;
-    
-    padding: 4px 8px;
-
-    font-family: var(--font-family);
-    font-weight: 700;
-    font-size: 12px;
-    line-height: 133%;
-    color: #f4f1f0;
-
-    border-radius: 16px;
-  }
-  .product-item-label__tag--new{
-    background: var(--gradient-blue);
-  }
-  .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;
-  
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  .product-item__images{
-    height: 242px;
-    object-fit: contain;
-  }
-  .product-item__content-card{
-    padding: 15.5px;
-  }
-  .product-item__title{
-    margin-top: 8px;
-  
-    font-family: var(--font-family);
-    font-weight: 500;
-    font-size: 20px;
-    line-height: 120%;
-    color: var(--text-black);
-  }
-  .product-item__title:first-child{
-    margin-top: 0;
-  }
-  .product-item__price{
-    margin-top: 8px;
-  
-    font-family: var(--font-family);
-    font-weight: 700;
-    font-size: 20px;
-    line-height: 200%;
-    text-transform: uppercase;
-    color: var(--text-black);
-  }
-  .product-item__price::after{
-    content: '₽';
-  }
-  .product-item__bye{
-    margin-top: 8px;
-  }
-  .product__item.hiding .product-item__images{
-    filter: grayscale(1)
-  }
-  .product__item.hiding .product-item__price{
-    color: var(--text-grey);
-  }
-  .product-item__overlay{
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    width: 100%;
-    height: 100%;
-
-    padding: 24px;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-
-    border-radius: 24px;
-    backdrop-filter: blur(25px);
-    background-color: rgba(242, 242, 242, 0.8);
-
-    z-index: 10;
-  }
-  .product-item-overlay__header{}
-  .product-item-overlay__tags{
-    margin: 4px -6px -6px -6px;
-
-    font-family: var(--font-family);
-    font-weight: 500;
-    font-size: 12px;
-    line-height: 133%;
-    color: var(--text-3);
-
-    display: flex;
-    flex-wrap: wrap;
-
-    list-style-type: none;
-  }
-  .product-item-overlay__tags li{
-    margin: 4px 6px;
-
-    position: relative;
-  }
-  .product-item-overlay__tags li:nth-child(n+2)::before{
-    content: '';
-
-    position: absolute;
-    top: 6px;
-    left: -8px;
-
-    width: 4px;
-    aspect-ratio: 1;
-
-    background-color: var(--text-3);
-    border-radius: 50%;
-  }
-  .product-item-overlay__tags li:nth-child(n+2)::after{
-    content: '';
-
-    position: absolute;
-    top: 6px;
-    right: -8px;
-
-    width: 4px;
-    aspect-ratio: 1;
-
-    background-color: var(--text-3);
-    border-radius: 50%;
-  }
-  .product-item-overlay__tags li:last-child::after,
-  .product-item-overlay__tags li:last-child::before{
-    display: none;
-  }
-  .product-item-overlay__price{
-    margin-top: 32px;
-
-    font-family: var(--font-family);
-    font-weight: 700;
-    font-size: 24px;
-    line-height: 100%;
-    text-transform: uppercase;
-    text-align: right;
-    color: var(--text-black);
-  }
-  .product-item-overlay__price::after{
-    content: '₽';
-  }
-  .product-item-overlay__block-button{
-    margin-top: 32px;
-  }
-  .product-item-overlay__button{
-    margin-top: 16px;
-  }
-  .product-item-overlay__button:first-child{
-    margin-top: 0;
-  }
-  .product-item-overlay__input-block{
-    
-  }
-  .product-item-overlay__field{
-    margin-top: 24px;
-
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .product-item-overlay__field:first-child{
-    margin-top: 0;
-  }
-  .product-item-overlay-field__title{
-    font-family: var(--font-family);
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 125%;
-    color: var(--text-0);
-  }
-  .product-item__form{
-
-  }
-/* product */
-
-/* modal */
-.modal__button .to-know{
-  display: none;
-}
-/* modal */
-
-/* footer */
-.footer{
-  margin-top: 80px;
-
-  padding: 40px 24px;
-
-  background: var(--background-black);
-}
-.footer__wrapper{
-  width: 100%;
-
-  display: flex;
-}
-.footer__content{
-  width: calc(100% - 364px);
-}
-.footer__logo{
-  width: 187px;
-  height: 43px;
-}
-.footer__address{
-  margin-top: 24px;
-
-  font-family: var(--font-family);
-  font-weight: 500;
-  font-size: 24px;
-  line-height: 133%;
-  color: var(--text-white);
-  font-style: normal;
-}
-.footer__list{
-  margin: 28px -12px -12px -12px;
-
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-}
-.footer-list__item{
-  margin: 12px;
-
-  width: calc(50% - 24px);
-
-  display: flex;
-  flex-direction: column;
-}
-.footer-list__item:nth-child(even){
-  width: 322px;
-}
-.footer-list__title{
-  font-family: var(--font-family);
-  font-weight: 700;
-  font-size: 16px;
-  line-height: 125%;
-  color: var(--text-white);
-}
-.footer-list__link{
-  margin-top: 4px;
-
-  font-family: var(--font-family);
-  font-weight: 500;
-  font-size: 24px;
-  line-height: 133%;
-  color: var(--text-white);
-
-  text-decoration: none;
-}
-.footer__form{
-  margin-left: 48px;
-
-  width: 364px;
-}
-.footer__about{
-  margin-top: 16px;
-
-  padding-top: 15px;
-
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  border-top: 1px solid var(--text-white);
-}
-.footer-about__text{
-  font-family: var(--font-family);
-  font-weight: 500;
-  font-size: 20px;
-  line-height: 120%;
-  text-align: right;
-  color: var(--text-white);
-  opacity: 0.6;
-
-  text-decoration: none;
-}
-.footer__social-media{
-  display: none;
-}
-/* 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{
-  max-width: 1280px;
-}
-
-.product__item{
-    margin: 12px;
-  
-    width: calc(33.3% - 24px);
-}
-}



--- a/assets/css/gp-style-mobile.css
+++ b/assets/css/gp-style-mobile.css
@@ -1,94 +1,5 @@
 /* Стили для мобильных устройств  */
-@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 */
-
-/* footer */
-.footer__about{
-    display: none;
-}
-.footer__wrapper{
-    flex-direction: column;
-}
-.footer__content{
-    width: 100%;
-}
-.footer__form{
-    margin-top: 24px;
-    margin-left: 0;
-
-    width: 100%;
-}
-.footer__social-media{
-    display: block;
-
-    margin-top: 24px;
-}
-.footer__list{
-    margin-top: 20px;
-}
-/* footer */
-}
-
@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 */
 }
--- a/assets/css/gp-style-tablet.css
+++ b/assets/css/gp-style-tablet.css
@@ -1,60 +1,5 @@
 /* Стили для планшетов  */
-@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;
+@media only screen and (max-width: 992px) {

-    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 */
-
-/* footer */
-.footer{
-    margin-top: 0;
-}
-.footer__about{
-    justify-content: center;
-}
-.footer-about__text{
-    display: none;
-}
-/* footer */
-}
-
-@media only screen and (max-width: 980px) {
-/* product */
-.product__item{
-    width: calc(50% - 24px);
-}
-/* product */
 }
--- a/assets/css/normalize.min.css
+++ b/assets/css/normalize.min.css
@@ -0,0 +1,2 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
+/*# sourceMappingURL=normalize.min.css.map */
--- a/assets/css/reset.min.css
+++ b/assets/css/reset.min.css
@@ -0,0 +1 @@
+*{padding:0;margin:0;border:none}*,::after,::before{box-sizing:border-box}a,a:hover,a:link,a:visited{text-decoration:none}aside,footer,header,legend,main,nav,section{display:block}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:inherit}ul,ul li{list-style:none}img{vertical-align:top}img,svg{max-width:100%;height:auto}address{font-style:normal}button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;background-color:transparent}input::-ms-clear{display:none}button,input[type=submit]{display:inline-block;box-shadow:none;background:0 0;cursor:pointer}button:active,button:focus,input:active,input:focus{outline:0}button::-moz-focus-inner{padding:0;border:0}label{cursor:pointer}
--- a/assets/fonts/craftwork/CraftworkGrotesk-Bold.woff
+++ b/assets/fonts/craftwork/CraftworkGrotesk-Bold.woff
--- a/assets/fonts/craftwork/CraftworkGrotesk-Bold.woff2
+++ b/assets/fonts/craftwork/CraftworkGrotesk-Bold.woff2
--- a/assets/fonts/craftwork/CraftworkGrotesk-Medium.woff
+++ b/assets/fonts/craftwork/CraftworkGrotesk-Medium.woff
--- a/assets/fonts/craftwork/CraftworkGrotesk-Medium.woff2
+++ b/assets/fonts/craftwork/CraftworkGrotesk-Medium.woff2
--- a/assets/fonts/craftwork/CraftworkGrotesk-Regular.woff
+++ b/assets/fonts/craftwork/CraftworkGrotesk-Regular.woff
--- a/assets/fonts/craftwork/CraftworkGrotesk-Regular.woff2
+++ b/assets/fonts/craftwork/CraftworkGrotesk-Regular.woff2
--- a/assets/fonts/craftwork/CraftworkGrotesk-SemiBold.woff
+++ b/assets/fonts/craftwork/CraftworkGrotesk-SemiBold.woff
--- a/assets/fonts/craftwork/CraftworkGrotesk-SemiBold.woff2
+++ b/assets/fonts/craftwork/CraftworkGrotesk-SemiBold.woff2
--- a/assets/fonts/craftwork/craftwork-grotesk-bold.ttf
+++ b/assets/fonts/craftwork/craftwork-grotesk-bold.ttf
--- a/assets/fonts/craftwork/craftwork-grotesk-medium.ttf
+++ b/assets/fonts/craftwork/craftwork-grotesk-medium.ttf
--- a/assets/fonts/craftwork/craftwork-grotesk-regular.ttf
+++ b/assets/fonts/craftwork/craftwork-grotesk-regular.ttf
--- a/assets/fonts/craftwork/craftwork-grotesk-semi-bold.ttf
+++ b/assets/fonts/craftwork/craftwork-grotesk-semi-bold.ttf
--- a/assets/fonts/din-2014/din-2014-rounded-demi.ttf
+++ b/assets/fonts/din-2014/din-2014-rounded-demi.ttf
--- a/assets/fonts/din-2014/din-2014-rounded-demi.woff
+++ b/assets/fonts/din-2014/din-2014-rounded-demi.woff
--- a/assets/fonts/din-2014/din-2014-rounded-demi.woff2
+++ b/assets/fonts/din-2014/din-2014-rounded-demi.woff2
--- a/assets/fonts/din-2014/din-2014-rounded-regular.ttf
+++ b/assets/fonts/din-2014/din-2014-rounded-regular.ttf
--- a/assets/fonts/din-2014/din-2014-rounded-regular.woff
+++ b/assets/fonts/din-2014/din-2014-rounded-regular.woff
--- a/assets/fonts/din-2014/din-2014-rounded-regular.woff2
+++ b/assets/fonts/din-2014/din-2014-rounded-regular.woff2
--- a/assets/fonts/roboto/Roboto-Medium.woff
+++ b/assets/fonts/roboto/Roboto-Medium.woff
--- a/assets/fonts/roboto/Roboto-Medium.woff2
+++ b/assets/fonts/roboto/Roboto-Medium.woff2
--- a/assets/fonts/roboto/Roboto-Regular.woff
+++ b/assets/fonts/roboto/Roboto-Regular.woff
--- a/assets/fonts/roboto/Roboto-Regular.woff2
+++ b/assets/fonts/roboto/Roboto-Regular.woff2
--- a/assets/fonts/roboto/roboto-medium.ttf
+++ b/assets/fonts/roboto/roboto-medium.ttf
--- a/assets/fonts/roboto/roboto-regular.ttf
+++ b/assets/fonts/roboto/roboto-regular.ttf
--- a/assets/img/pet/cat.png
+++ b/assets/img/pet/cat.png
--- a/assets/img/pet/dog.png
+++ b/assets/img/pet/dog.png
--- a/assets/img/product/image.png
+++ b/assets/img/product/image.png
--- a/assets/img/svg/logo/logo-black.svg
+++ b/assets/img/svg/logo/logo-black.svg
--- a/assets/img/svg/logo/logo-gradient.svg
+++ b/assets/img/svg/logo/logo-gradient.svg
--- a/assets/img/svg/logo/logo-white.svg
+++ b/assets/img/svg/logo/logo-white.svg
--- a/assets/img/svg/main/arrow-black.svg
+++ b/assets/img/svg/main/arrow-black.svg
@@ -1,3 +0,0 @@
-<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.46967 0.46967C0.762563 0.176777 1.23744 0.176777 1.53033 0.46967L5 3.93934L8.46967 0.46967C8.76256 0.176777 9.23744 0.176777 9.53033 0.46967C9.82322 0.762563 9.82322 1.23744 9.53033 1.53033L5.53033 5.53033C5.23744 5.82322 4.76256 5.82322 4.46967 5.53033L0.46967 1.53033C0.176777 1.23744 0.176777 0.762563 0.46967 0.46967Z" fill="#333333"/>
-</svg>
--- a/assets/img/svg/main/arrow-breadcrumbs.svg
+++ b/assets/img/svg/main/arrow-breadcrumbs.svg
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7369 3.29777C11.1247 3.15233 11.557 3.34884 11.7025 3.73668L14.7025 11.7367C14.7661 11.9065 14.7661 12.0936 14.7025 12.2634L11.7025 20.2634C11.557 20.6512 11.1247 20.8477 10.7369 20.7023C10.349 20.5568 10.1525 20.1245 10.298 19.7367L13.1992 12L10.298 4.26336C10.1525 3.87552 10.349 3.44321 10.7369 3.29777Z" fill="#666666"/>
-</svg>
--- a/assets/img/svg/main/arrow-selected-white.svg
+++ b/assets/img/svg/main/arrow-selected-white.svg
@@ -1,3 +0,0 @@
-<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>
--- a/assets/img/svg/main/arrow-selected.svg
+++ b/assets/img/svg/main/arrow-selected.svg
@@ -1,11 +0,0 @@
-<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_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>
--- a/assets/img/svg/main/basket.svg
+++ b/assets/img/svg/main/basket.svg
@@ -1,13 +0,0 @@
-<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>
--- a/assets/img/svg/main/black-x.svg
+++ b/assets/img/svg/main/black-x.svg
@@ -1,11 +0,0 @@
-<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>
--- a/assets/img/svg/main/filter.svg
+++ b/assets/img/svg/main/filter.svg
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6 3.25C6.41421 3.25 6.75 3.58579 6.75 4V7.35424C7.19755 7.48113 7.60976 7.72067 7.94454 8.05546C8.46027 8.57118 8.75 9.27065 8.75 10C8.75 10.7293 8.46027 11.4288 7.94454 11.9445C7.60976 12.2793 7.19755 12.5189 6.75 12.6458V20C6.75 20.4142 6.41421 20.75 6 20.75C5.58579 20.75 5.25 20.4142 5.25 20V12.6458C4.80245 12.5189 4.39024 12.2793 4.05546 11.9445C3.53973 11.4288 3.25 10.7293 3.25 10C3.25 9.27065 3.53973 8.57118 4.05546 8.05546C4.39024 7.72067 4.80245 7.48113 5.25 7.35424V4C5.25 3.58579 5.58579 3.25 6 3.25ZM12 3.25C12.4142 3.25 12.75 3.58579 12.75 4V13.3542C13.1975 13.4811 13.6098 13.7207 13.9445 14.0555C14.4603 14.5712 14.75 15.2707 14.75 16C14.75 16.7293 14.4603 17.4288 13.9445 17.9445C13.6098 18.2793 13.1975 18.5189 12.75 18.6458V20C12.75 20.4142 12.4142 20.75 12 20.75C11.5858 20.75 11.25 20.4142 11.25 20V18.6458C10.8025 18.5189 10.3902 18.2793 10.0555 17.9445C9.53973 17.4288 9.25 16.7293 9.25 16C9.25 15.2707 9.53973 14.5712 10.0555 14.0555C10.3902 13.7207 10.8025 13.4811 11.25 13.3542V4C11.25 3.58579 11.5858 3.25 12 3.25ZM18 3.25C18.4142 3.25 18.75 3.58579 18.75 4V4.35424C19.1975 4.48112 19.6098 4.72067 19.9445 5.05546C20.4603 5.57118 20.75 6.27065 20.75 7C20.75 7.72935 20.4603 8.42882 19.9445 8.94454C19.6098 9.27933 19.1975 9.51887 18.75 9.64576V20C18.75 20.4142 18.4142 20.75 18 20.75C17.5858 20.75 17.25 20.4142 17.25 20V9.64576C16.8025 9.51887 16.3902 9.27933 16.0555 8.94454C15.5397 8.42882 15.25 7.72935 15.25 7C15.25 6.27065 15.5397 5.57118 16.0555 5.05546C16.3902 4.72067 16.8025 4.48112 17.25 4.35424V4C17.25 3.58579 17.5858 3.25 18 3.25ZM18 5.75C17.6685 5.75 17.3505 5.8817 17.1161 6.11612C16.8817 6.35054 16.75 6.66848 16.75 7C16.75 7.33152 16.8817 7.64946 17.1161 7.88388C17.3505 8.1183 17.6685 8.25 18 8.25C18.3315 8.25 18.6495 8.1183 18.8839 7.88388C19.1183 7.64946 19.25 7.33152 19.25 7C19.25 6.66848 19.1183 6.35054 18.8839 6.11612C18.6495 5.8817 18.3315 5.75 18 5.75ZM6 8.75C5.66848 8.75 5.35054 8.8817 5.11612 9.11612C4.8817 9.35054 4.75 9.66848 4.75 10C4.75 10.3315 4.8817 10.6495 5.11612 10.8839C5.35054 11.1183 5.66848 11.25 6 11.25C6.33152 11.25 6.64946 11.1183 6.88388 10.8839C7.1183 10.6495 7.25 10.3315 7.25 10C7.25 9.66848 7.1183 9.35054 6.88388 9.11612C6.64946 8.8817 6.33152 8.75 6 8.75ZM12 14.75C11.6685 14.75 11.3505 14.8817 11.1161 15.1161C10.8817 15.3505 10.75 15.6685 10.75 16C10.75 16.3315 10.8817 16.6495 11.1161 16.8839C11.3505 17.1183 11.6685 17.25 12 17.25C12.3315 17.25 12.6495 17.1183 12.8839 16.8839C13.1183 16.6495 13.25 16.3315 13.25 16C13.25 15.6685 13.1183 15.3505 12.8839 15.1161C12.6495 14.8817 12.3315 14.75 12 14.75Z" fill="#121212"/>
-</svg>
--- a/assets/img/svg/main/gradient-x.svg
+++ b/assets/img/svg/main/gradient-x.svg
@@ -1,11 +0,0 @@
-<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1.42433 0.575954C1.18837 0.343303 0.807128 0.344651 0.572814 0.578965C0.338499 0.81328 0.339838 1.19183 0.575804 1.42448L5.84223 6.61694L0.575803 11.8094C0.339837 12.042 0.338499 12.4206 0.572813 12.6549C0.807128 12.8892 1.18837 12.8906 1.42433 12.6579L6.6968 7.45951L11.9692 12.6579C12.2052 12.8905 12.5864 12.8892 12.8208 12.6549C13.0551 12.4206 13.0537 12.042 12.8178 11.8094L7.55137 6.61694L12.8178 1.42451C13.0537 1.19186 13.0551 0.813306 12.8208 0.578991C12.5864 0.344677 12.2052 0.343328 11.9692 0.57598L6.6968 5.77437L1.42433 0.575954Z" fill="url(#paint0_radial_61_3534)"/>
-<defs>
-<radialGradient id="paint0_radial_61_3534" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(19.26 -6.85449) rotate(135.608) scale(30.5558 41.776)">
-<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>
--- a/assets/img/svg/main/minus.svg
+++ b/assets/img/svg/main/minus.svg
@@ -1,10 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_61_7537)">
-<path d="M5 12H19" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<clipPath id="clip0_61_7537">
-<rect width="24" height="24" fill="white"/>
-</clipPath>
-</defs>
-</svg>
--- a/assets/img/svg/main/plus.svg
+++ b/assets/img/svg/main/plus.svg
@@ -1,11 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_61_7542)">
-<path d="M12 5V19" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M5 12H19" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<clipPath id="clip0_61_7542">
-<rect width="24" height="24" fill="white"/>
-</clipPath>
-</defs>
-</svg>
--- a/assets/img/svg/mini-profile/basket.svg
+++ b/assets/img/svg/mini-profile/basket.svg
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9995 3.53846C11.3616 3.53846 10.7499 3.78159 10.2988 4.21437C9.84778 4.64715 9.59439 5.23412 9.59439 5.84615V7.12821H14.4045V5.84615C14.4045 5.23412 14.1511 4.64715 13.7001 4.21437C13.2491 3.78159 12.6373 3.53846 11.9995 3.53846ZM16.0079 7.12821V5.84615C16.0079 4.82609 15.5856 3.84781 14.8339 3.12651C14.0821 2.40522 13.0626 2 11.9995 2C10.9364 2 9.91679 2.40522 9.16506 3.12651C8.41333 3.84781 7.99102 4.82609 7.99102 5.84615V7.12821H5.93986M7.99102 8.66667H5.93976C5.74711 8.66665 5.55664 8.7066 5.38159 8.78378C5.20654 8.86097 5.05095 8.97356 4.9255 9.11385C4.80004 9.25413 4.70769 9.41879 4.65477 9.59653C4.60186 9.77423 4.58961 9.9608 4.61887 10.1435C4.61886 10.1434 4.61888 10.1435 4.61887 10.1435L5.96036 18.5045C6.04768 19.0493 6.33539 19.5463 6.77139 19.9052C7.20738 20.2642 7.76287 20.4615 8.33735 20.4615C8.33734 20.4615 8.33736 20.4615 8.33735 20.4615H15.6616C16.2362 20.4617 16.7921 20.2644 17.2283 19.9055C17.6645 19.5465 17.9523 19.0496 18.0396 18.5046L19.3811 10.1436C19.3811 10.1436 19.3811 10.1435 19.3811 10.1436C19.4104 9.96093 19.3981 9.77423 19.3452 9.59653C19.2923 9.41879 19.1999 9.25413 19.0745 9.11385C18.949 8.97356 18.7935 8.86097 18.6184 8.78378C18.4433 8.7066 18.253 8.66665 18.0603 8.66667H16.0079V10.9744C16.0079 11.3992 15.649 11.7436 15.2062 11.7436C14.7635 11.7436 14.4045 11.3992 14.4045 10.9744V8.66667H9.59439V10.9744C9.59439 11.3992 9.23547 11.7436 8.79271 11.7436C8.34995 11.7436 7.99102 11.3992 7.99102 10.9744V8.66667ZM16.0079 7.12821H18.0601C18.0601 7.12821 18.0602 7.12821 18.0601 7.12821C18.4839 7.12817 18.9028 7.21606 19.2879 7.38586C19.673 7.55567 20.0153 7.80338 20.2913 8.11201C20.5673 8.42063 20.7705 8.78288 20.8869 9.1739C21.0033 9.56493 21.0303 9.97549 20.9658 10.3774L19.6244 18.7385C19.6243 18.7385 19.6244 18.7384 19.6244 18.7385C19.4788 19.6467 18.9991 20.475 18.2722 21.0732C17.5453 21.6715 16.6192 22.0002 15.6616 22C15.6615 22 15.6616 22 15.6616 22H8.33735C7.37986 22 6.45398 21.6711 5.72732 21.0728C5.00069 20.4746 4.52121 19.6466 4.37565 18.7386C4.37565 18.7385 4.37566 18.7386 4.37565 18.7386L3.03416 10.3776C2.96974 9.97561 2.99665 9.56493 3.11308 9.1739C3.22951 8.78288 3.43268 8.42063 3.70868 8.11201C3.98468 7.80338 4.32697 7.55567 4.71208 7.38586C5.09717 7.21606 5.51606 7.12817 5.93986 7.12821" fill="#333333"/>
-</svg>
--- a/assets/img/svg/mini-profile/profile.svg
+++ b/assets/img/svg/mini-profile/profile.svg
@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.64124 3.64124C9.53204 2.75044 10.7402 2.25 12 2.25C13.2598 2.25 14.468 2.75044 15.3588 3.64124C16.2496 4.53204 16.75 5.74022 16.75 7C16.75 8.25978 16.2496 9.46796 15.3588 10.3588C14.468 11.2496 13.2598 11.75 12 11.75C10.7402 11.75 9.53204 11.2496 8.64124 10.3588C7.75044 9.46796 7.25 8.25978 7.25 7C7.25 5.74022 7.75044 4.53204 8.64124 3.64124ZM12 3.75C11.138 3.75 10.3114 4.09241 9.7019 4.7019C9.09241 5.3114 8.75 6.13805 8.75 7C8.75 7.86195 9.09241 8.6886 9.7019 9.2981C10.3114 9.90759 11.138 10.25 12 10.25C12.862 10.25 13.6886 9.90759 14.2981 9.2981C14.9076 8.6886 15.25 7.86195 15.25 7C15.25 6.13805 14.9076 5.3114 14.2981 4.7019C13.6886 4.09241 12.862 3.75 12 3.75Z" fill="#333333"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10 15.75C9.13805 15.75 8.3114 16.0924 7.7019 16.7019C7.09241 17.3114 6.75 18.138 6.75 19V21C6.75 21.4142 6.41421 21.75 6 21.75C5.58579 21.75 5.25 21.4142 5.25 21V19C5.25 17.7402 5.75044 16.532 6.64124 15.6412C7.53204 14.7504 8.74022 14.25 10 14.25H14C15.2598 14.25 16.468 14.7504 17.3588 15.6412C18.2496 16.532 18.75 17.7402 18.75 19V21C18.75 21.4142 18.4142 21.75 18 21.75C17.5858 21.75 17.25 21.4142 17.25 21V19C17.25 18.138 16.9076 17.3114 16.2981 16.7019C15.6886 16.0924 14.862 15.75 14 15.75H10Z" fill="#333333"/>
-</svg>
--- a/assets/img/svg/social-media/tg.svg
+++ b/assets/img/svg/social-media/tg.svg
@@ -1,3 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16 0C7.16387 0 0 7.16387 0 16C0 24.8361 7.16387 32 16 32C24.8361 32 32 24.8361 32 16C32 7.16387 24.8361 0 16 0ZM23.8555 10.9626L21.2335 23.3394C21.0374 24.2168 20.5213 24.4335 19.7884 24.0206L15.7832 21.0684L13.8529 22.9265C13.6361 23.1432 13.4606 23.3187 13.0477 23.3187L13.3265 19.2516L20.7381 12.5523C21.0581 12.2735 20.6658 12.1084 20.2426 12.3871L11.0761 18.1574L7.1329 16.929C6.27613 16.6606 6.25548 16.0723 7.31871 15.6594L22.751 9.70323C23.4632 9.44516 24.0929 9.87871 23.8555 10.9626Z" fill="white"/>
-</svg>
--- a/assets/img/svg/social-media/vk.svg
+++ b/assets/img/svg/social-media/vk.svg
@@ -1,3 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.25023 2.25053C0 4.50106 0 8.1189 0 15.3588V16.6369C0 23.8769 0 27.4989 2.25023 29.7495C4.50046 32 8.11782 32 15.361 32H16.639C23.8779 32 27.4995 32 29.7498 29.7495C32 27.4989 32 23.8811 32 16.6369V15.3588C32 8.1189 32 4.49682 29.7498 2.24628C27.4995 0 23.8779 0 16.639 0H15.361C8.11782 0 4.50046 0 2.25023 2.25053ZM5.40056 9.73673C5.57463 18.0552 9.73544 23.0573 17.0253 23.0573H17.4372V18.2972C20.1162 18.5648 22.1414 20.5223 22.9566 23.0573H26.7438C25.7036 19.2696 22.9694 17.1762 21.2626 16.3779C22.9694 15.3928 25.3682 12.9894 25.9414 9.73673H22.5023C21.7551 12.3779 19.5431 14.7771 17.4372 15.0021V9.73673H13.9981V18.9639C11.8668 18.4289 9.17076 15.8429 9.05188 9.73673H5.40056Z" fill="white"/>
-</svg>
--- a/assets/img/svg/social-media/ya.svg
+++ b/assets/img/svg/social-media/ya.svg
@@ -1,6 +0,0 @@
-<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.568 0C15.3825 2.50628 15.3939 5.04672 14.9687 7.51149C14.1605 12.1873 11.5304 14.5683 6.79636 15.1227C4.54453 15.3866 2.2659 15.4261 0 15.5674C0 15.0765 0.160702 13.7889 0.188825 13.6262C1.18518 7.88646 4.32691 3.76713 9.62271 1.37266C11.0322 0.736552 15.0772 0 15.568 0Z" fill="white"/>
-<path d="M0 16.4092C1.98668 16.5478 3.98207 16.6134 5.9567 16.8504C7.26575 17.0071 8.59221 17.2817 9.82962 17.7276C12.4651 18.6778 14.1652 20.6477 14.6935 23.3508C15.2399 26.1477 15.4375 29.0136 15.8051 31.9933C13.2814 32.0689 11.2063 31.5179 9.25913 30.5624C4.19768 28.0795 1.14634 24.0512 0.190834 18.4682C0.156685 18.268 0 16.9007 0 16.4092Z" fill="white"/>
-<path d="M19.7049 0.420142C26.3895 1.89994 31.7127 8.12046 32.0114 14.8057C32.0207 15.0126 32.0127 15.2201 32.0127 15.5657C28.4491 15.4398 24.8916 15.6045 21.5845 14.0684C18.8217 12.7848 17.514 10.3837 17.0841 7.51381C16.7741 5.44276 16.7259 3.33287 16.5545 1.24039C16.5203 0.825915 16.4587 0.414116 16.4092 0.000977742C16.9 0.00030815 19.0963 0.284885 19.7049 0.420142Z" fill="white"/>
-<path d="M16.3945 31.937C16.6202 29.4173 16.7032 26.9653 17.0862 24.5608C17.7719 20.2546 20.1751 17.8106 24.4544 17.1008C26.8897 16.6971 29.3799 16.6221 31.844 16.3984C32.5009 23.4211 25.5157 32.1385 16.3945 31.937Z" fill="white"/>
-</svg>
--- a/assets/js/gp-main.js
+++ b/assets/js/gp-main.js
@@ -1,29 +0,0 @@
-'use strict';
-
-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');
-        }
-    }
-}
-
-// 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
--- a/assets/js/main.js
+++ b/assets/js/main.js
--- a/catalog.html
+++ b/catalog.html
--- a/del.html
+++ b/del.html
@@ -1,12 +0,0 @@
-<!-- Пример формы для отправки в Телеграмм (обработчик send-telegram.php) -->
-<form class="form" method="post" action="/send-telegram.php">
-    <div class="form__item">
-        <input class="form__input" type="text" name="name" required>
-        <label class="form__label">Ваше имя</label>
-    </div>
-    <div class="form__item">
-        <input class="form__input" type="text" name="phone" required>
-        <label class="form__label">Номер телефона</label>
-    </div>
-    <input class="form__input btn" type="submit" value="Отправить">
-</form>
--- a/example/pc-header-white.png
+++ b/example/pc-header-white.png
--- a/example/pc-header.png
+++ b/example/pc-header.png
--- a/index.html
+++ b/index.html
--- a/modal-basket.html
+++ b/modal-basket.html
--- a/modal-filter.html
+++ b/modal-filter.html
--- a/product.html
+++ b/product.html
--- a/ui_kit.html
+++ b/ui_kit.html
@@ -5,7 +5,7 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UI kit</title>
-    <link rel="stylesheet" type="text/css" href="/assets/css/gp-style-core.css">
+    <link rel="stylesheet" type="text/css" href="/assets/css/style-core.css">
 </head>
 <style>
    /* Стили для выравнивания UI-элеметнов для данной страницы */
@@ -28,150 +28,12 @@
    /* ВСЕ ОСТАЛЬНЫЕ СТИЛИ ПИШЕМ В style-core.css!!! */
 </style>
 <body class="ui">
-    <!-- <div class="lang">
-        <button class="lang__open">
-            RU
-        </button>
-        <div class="lang__content">
-            <ul class="lang__list">
-                <li class="lang__item active">
-                    <a href="#" class="lang__link">
-                        RU
-                    </a>
-                </li>
-                <li class="lang__item">
-                    <a href="#" class="lang__link">
-                        EN
-                    </a>
-                </li>
-                <li class="lang__item">
-                    <a href="#" class="lang__link">
-                        AR
-                    </a>
-                </li>
-            </ul>
+    <div class="ui__ui-wrapper">
+        <div class="ui__item"></div>
+        <div class="ui__item"></div>
+        <div class="ui__item"></div>
+        <!-- ... -->
+        <div class="ui__item"></div>
    </div>
-            
-    </div> -->
-
-    <!-- <div class="mini-profile">
-        <div class="mini-profile__item">
-            <div class="lang">
-                <button class="lang__open">
-                    RU
-                </button>
-                <div class="lang__content">
-                    <ul class="lang__list">
-                        <li class="lang__item active">
-                            <a href="#" class="lang__link">
-                                RU
-                            </a>
-                        </li>
-                        <li class="lang__item">
-                            <a href="#" class="lang__link">
-                                EN
-                            </a>
-                        </li>
-                        <li class="lang__item">
-                            <a href="#" class="lang__link">
-                                AR
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-                    
-            </div>
-        </div>
-        <div class="mini-profile__item">
-            <a href="" class="mini-profile__button">
-                <img src="assets/img/svg/mini-profile/profile.svg" alt="" class="mini-profile__icon">
-            </a>
-        </div>
-        <div class="mini-profile__item">
-            <button class="mini-profile__button">
-                <img src="assets/img/svg/mini-profile/basket.svg" alt="" class="mini-profile__icon">
-            </button>
-        </div>
-    </div> -->
-
-    <!-- <ul class="main-menu">
-        <li class="main-menu__item">
-            <a href="#" class="main-menu__link">ГЛАВНАЯ</a>
-        </li>
-        <li class="main-menu__item">
-            <a href="#" class="main-menu__link">О COSMOPET</a>
-        </li>
-        <li class="main-menu__item">
-            <a href="#" class="main-menu__link">ПРОИЗВОДСТВО</a>
-        </li class="main-menu__item">
-        <li class="main-menu__item">
-            <a href="#" class="main-menu__link">БЛОГ</a>
-        </li>
-        <li class="main-menu__item">
-            <button class="main-menu__button">
-                ПРОДУКЦИЯ
-            </button>
-        </li>
-    </ul> -->
-    
-    <!-- <form class="form" method="post" action="/send-telegram.php">
-        <p class="form__title">
-            Форма обратной связи
-        </p>
-        <div class="form__item">
-            <input class="form__input" type="text" name="name" placeholder="Ваше имя" required>
-        </div>
-        <div class="form__item">
-            <input class="form__input" type="text" name="name" placeholder="Эл.почта" required>
-        </div>
-        <div class="form__item">
-            <textarea class="form__input form__input--textarea" name="" id="" placeholder="Текст обращения"></textarea>
-        </div>
-        <div class="form__item">
-            <input class="form__button" type="submit" value="Отправить">
-        </div>
-    </form> -->
-
-    <!-- <div class="social-media">
-        <a href="#" class="social-media__item">
-            <img src="assets/img/svg/social-media/vk.svg" alt="" class="social-media__icon">
-        </a>
-        <a href="#" class="social-media__item">
-            <img src="assets/img/svg/social-media/tg.svg" alt="" class="social-media__icon">
-        </a>
-        <a href="#" class="social-media__item">
-            <img src="assets/img/svg/social-media/ya.svg" alt="" class="social-media__icon">
-        </a>
-    </div> -->
-
-    <!-- <div class="wrapper">
-        <div class="product">
-            <div class="product__item">
-                <div class="product__product-card">
-                    <img src="assets/img/product/image.png" alt="" class="product__images">
-                </div>
-                <div class="product__content-card">
-                    <div class="compound">
-                        <div class="compound__item">Индейка </div>
-                        <div class="compound__item">Индейка </div>  
-                    </div>
-                    <p class="product__title">Сухой корм, для средних и крупных пород, 2 кг.</p>
-                    <p class="product__price">
-                        1 304
-                    </p>
-                    <div class="product__bye">
-                        <button class="button button--white">
-                            Купить
-                        </button>
-                    </div>
-                </div>
-            </div>
-            <div class="product__item">
-                
-            </div>
-        </div>
-    </div> -->
-
-    <script src="/assets/js/gp-main.js"></script>
 </body>
 </html>
Author	SHA1	Message	Date
GP	e67ea16299	Update readme and add normilize.css + reset.css	2025-01-26 01:44:04 +03:00
Максим Максимов	d8f89ad9a9	Добавил частую ошибку - формат изображений не зафиксирован	2025-01-10 11:12:00 +00:00
Максим Максимов	043a617c87	Добавил уточнение, что надо качать только ветку master или with-phpmailer	2024-12-24 12:30:53 +00:00
				`@@ -0,0 +1 @@`
				{padding:0;margin:0;border:none},::after,::before{box-sizing:border-box}a,a:hover,a:link,a:visited{text-decoration:none}aside,footer,header,legend,main,nav,section{display:block}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:inherit}ul,ul li{list-style:none}img{vertical-align:top}img,svg{max-width:100%;height:auto}address{font-style:normal}button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;background-color:transparent}input::-ms-clear{display:none}button,input[type=submit]{display:inline-block;box-shadow:none;background:0 0;cursor:pointer}button:active,button:focus,input:active,input:focus{outline:0}button::-moz-focus-inner{padding:0;border:0}label{cursor:pointer}