Good-Production
/
template-for-verstka
13
2
Fork 0
Code Pull Requests Releases Wiki Activity

внесение правок 10

Browse Source
cosmopet--Memento-mori-dev
Kirill Pet 10 months ago
parent 62a3e97a7b
commit 93c2f012f1
8 changed files with 135 additions and 67 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 19
      assets/css/gp-style-core.css
  2. 36
      assets/css/gp-style-desktop.css
  3. 5
      assets/css/gp-style-mobile.css
  4. 15
      assets/css/gp-style-tablet.css
  5. 6
      catalog-error.html
  6. 111
      catalog.html
  7. 6
      index.html
  8. 4
      product.html

19
assets/css/gp-style-core.css
Unescape View File

@ -302,6 +302,9 @@ button{
background: #f2f2f2; background: #f2f2f2;
border-radius: 24px; border-radius: 24px;
} }
.header.white .main-menu__item:hover .main-menu__link{
color: var(--text-black);
}
.main-menu__item:active{ .main-menu__item:active{
opacity: 1; opacity: 1;
} }
@ -317,6 +320,8 @@ button{
color: var(--text-black); color: var(--text-black);
text-decoration: none; text-decoration: none;
transition: color .2s ease-out;
} }
.main-menu__button{ .main-menu__button{
padding: 8px 32px 8px 12px; padding: 8px 32px 8px 12px;
@ -555,6 +560,9 @@ button{
border-radius: 16px; border-radius: 16px;
background-color: var(--background-white); background-color: var(--background-white);
display: block;
text-decoration: none;
} }
.compound__item:first-child{ .compound__item:first-child{
margin-left: 0; margin-left: 0;
@ -565,6 +573,9 @@ button{
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.product__footer--error{
margin: 45px 0;
}
/* compound */ /* compound */
/* button */ /* button */
@ -652,6 +663,9 @@ button{
background: var(--background-black); background: var(--background-black);
border: 1px solid var(--text-white); border: 1px solid var(--text-white);
} }
.button--link{
text-decoration: none;
}
.button--red-48-px{ .button--red-48-px{
border-radius: 48px; border-radius: 48px;
} }
@ -984,6 +998,8 @@ button{
.modal__text{ .modal__text{
margin-top: 16px; margin-top: 16px;
padding-right: 10px;
font-family: var(--font-family); font-family: var(--font-family);
font-weight: 400; font-weight: 400;
font-size: 20px; font-size: 20px;
@ -1048,6 +1064,7 @@ button{
} }
.modal-basket__item{ .modal-basket__item{
padding-top: 23px; padding-top: 23px;
padding-right: 15px;
padding-bottom: 24px; padding-bottom: 24px;
display: flex; display: flex;
@ -1061,7 +1078,7 @@ button{
position: absolute; position: absolute;
top: 24px; top: 24px;
right: 0; right: 6px;
width: 24px; width: 24px;
aspect-ratio: 1; aspect-ratio: 1;

36
assets/css/gp-style-desktop.css
Unescape View File

@ -14,11 +14,12 @@
z-index: 200; z-index: 200;
} }
.header::after{ .header__content::after{
content: ''; content: '';
position: absolute; position: absolute;
left: 24px; left: 24px;
right: 24px;
bottom: 0; bottom: 0;
width: calc(100% - 48px); width: calc(100% - 48px);
@ -182,6 +183,10 @@
display: none; display: none;
padding: 24px 16px; padding: 24px 16px;
height: calc(100vh - 56px);
overflow-x: auto;
} }
.header-phone-menu__item{ .header-phone-menu__item{
padding: 16px 0; padding: 16px 0;
@ -265,7 +270,7 @@
.header.white .lang__open{ .header.white .lang__open{
color: var(--text-white); color: var(--text-white);
} }
.header.white::after{ .header.white .header__content::after{
background: var(--background-white); background: var(--background-white);
} }
.header.white .lang-open__black{ .header.white .lang-open__black{
@ -284,6 +289,9 @@
.header.white .header__open-menu::after{ .header.white .header__open-menu::after{
background: var(--background-white); background: var(--background-white);
} }
.header__phone-menu::-webkit-scrollbar {
width: 0px;
}
main{ main{
padding-top: 72px; padding-top: 72px;
@ -352,12 +360,29 @@ main{
.product__error{ .product__error{
margin: auto; margin: auto;
padding: 0 16px;
font-family: var(--font-family); font-family: var(--font-family);
font-weight: 700; font-weight: 700;
font-size: 24px; font-size: 24px;
line-height: 100%; line-height: 100%;
text-transform: uppercase; text-transform: uppercase;
color: var(--text-0); color: var(--text-0);
text-align: center;
}
.product__error-button{
border-radius: 20px;
padding: 4px 24px;
font-family: var(--font-family);
font-weight: 600;
font-size: 20px;
line-height: 120%;
color: var(--text-black);
border: 1px solid var(--text-0);
background: var(--background-white);
text-decoration: none;
} }
.product__title{ .product__title{
font-family: var(--font-family); font-family: var(--font-family);
@ -446,6 +471,9 @@ main{
color: #f4f1f0; color: #f4f1f0;
border-radius: 16px; border-radius: 16px;
display: block;
text-decoration: none;
} }
.product-item-label__tag--new{ .product-item-label__tag--new{
background: var(--gradient-blue); background: var(--gradient-blue);
@ -497,6 +525,9 @@ main{
font-size: 20px; font-size: 20px;
line-height: 120%; line-height: 120%;
color: var(--text-black); color: var(--text-black);
text-decoration: none;
display: block;
} }
.product-item__title:first-child{ .product-item__title:first-child{
margin-top: 0; margin-top: 0;
@ -517,6 +548,7 @@ main{
} }
.product-item__price p::after{ .product-item__price p::after{
content: '₽'; content: '₽';
padding-left: 5px;
} }
.product-item__price span{ .product-item__price span{
margin-left: 9px; margin-left: 9px;

5
assets/css/gp-style-mobile.css
Unescape View File

@ -23,7 +23,7 @@
background: none; background: none;
} }
.modal__basket .modal__header { .modal__basket .modal__header {
height: calc(100% - 92px); height: calc(100% - 156px);
margin-bottom: -36px; margin-bottom: -36px;
} }
.modal-basket-item__block-image{ .modal-basket-item__block-image{
@ -46,6 +46,9 @@
font-size: 16px; font-size: 16px;
} }
.modal-basket__item--return{
flex-direction: column;
}
/* modal */ /* modal */
/* footer */ /* footer */

15
assets/css/gp-style-tablet.css
Unescape View File

@ -39,6 +39,11 @@ main{
.header__menu-block{ .header__menu-block{
top: 56px; top: 56px;
} }
.header__content::after{
left: 0;
right: 0;
width: 100%;
}
/* header */ /* header */
/* footer */ /* footer */
@ -58,6 +63,7 @@ main{
/* product */ /* product */
.product{ .product{
padding: 12px; padding: 12px;
padding-top: 20px;
} }
.product__title{ .product__title{
font-weight: 400; font-weight: 400;
@ -78,6 +84,9 @@ main{
font-size: 12px; font-size: 12px;
line-height: 133%; line-height: 133%;
} }
.toggle-table-item__line{
margin-top: 12px;
}
.detail{ .detail{
margin: 24px 16px; margin: 24px 16px;
} }
@ -88,6 +97,12 @@ main{
font-size: 22px; font-size: 22px;
} }
/* product */ /* product */
/* modal */
.modal__text{
padding-right: 0;
}
/* modal */
} }
@media only screen and (max-width: 980px) { @media only screen and (max-width: 980px) {

6
catalog-error.html
Unescape View File

@ -260,7 +260,7 @@
</div> </div>
<div class="product__footer"> <div class="product__footer">
<button class="button button--white"> <button class="product__error-button">
Сбросить условия поиска Сбросить условия поиска
</button> </button>
</div> </div>
@ -564,9 +564,9 @@
</a> </a>
</div> </div>
<div class="footer-list__item"> <div class="footer-list__item">
<button class="button button--black button--100-perc"> <a href="#" class="button button--black button--100-perc button--link">
Чат бот с ветеринаром Чат бот с ветеринаром
</button> </a>
</div> </div>
</div> </div>

111
catalog.html
Unescape View File

@ -257,19 +257,19 @@
<div class="product__main"> <div class="product__main">
<div class="product__item"> <div class="product__item">
<div class="product-item__label"> <div class="product-item__label">
<div class="product-item-label__tag product-item-label__tag--new"> <a href="#" class="product-item-label__tag product-item-label__tag--new">
Новинка Новинка
</a>
</div> </div>
</div> <a href="#" class="product-item__product-card">
<div class="product-item__product-card">
<img src="assets/img/product/image.png" alt="" class="product-item__images"> <img src="assets/img/product/image.png" alt="" class="product-item__images">
</div> </a>
<div class="product-item__content-card"> <div class="product-item__content-card">
<div class="compound"> <div class="compound">
<div class="compound__item">Индейка </div> <a href="#" class="compound__item">Индейка </a>
<div class="compound__item">Индейка </div> <a href="#" class="compound__item">Индейка </a>
</div> </div>
<p class="product-item__title">Сухой корм, для средних и крупных пород, 2 кг.</p> <a href="#" class="product-item__title">Сухой корм, для средних и крупных пород, 2 кг.</a>
<div class="product-item__price"> <div class="product-item__price">
<p>1 304</p> <p>1 304</p>
</div> </div>
@ -281,9 +281,7 @@
</div> </div>
<div class="product-item__overlay"> <div class="product-item__overlay">
<div class="product-item-overlay__header"> <div class="product-item-overlay__header">
<p class="product-item__title"> <a href="#" class="product-item__title">Сухой корм, для средних и крупных пород, 2 кг.</a>
Сухой корм, 2 кг, для крупных и средних пород
</p>
<ul class="product-item-overlay__tags"> <ul class="product-item-overlay__tags">
<li>Seperpremium</li> <li>Seperpremium</li>
<li>Для крупных и средних пород </li> <li>Для крупных и средних пород </li>
@ -351,19 +349,19 @@
</div> </div>
<div class="product__item"> <div class="product__item">
<div class="product-item__label"> <div class="product-item__label">
<div class="product-item-label__tag product-item-label__tag--sale"> <a href="#" class="product-item-label__tag product-item-label__tag--sale">
Распродажа % Распродажа %
</a>
</div> </div>
</div> <a href="#" class="product-item__product-card">
<div class="product-item__product-card">
<img src="assets/img/product/image.png" alt="" class="product-item__images"> <img src="assets/img/product/image.png" alt="" class="product-item__images">
</div> </a>
<div class="product-item__content-card"> <div class="product-item__content-card">
<div class="compound"> <div class="compound">
<div class="compound__item">Индейка </div> <a href="#" class="compound__item">Индейка </a>
<div class="compound__item">Индейка </div> <a href="#" class="compound__item">Индейка </a>
</div> </div>
<p class="product-item__title">Сухой корм, для средних и крупных пород, 2 кг.</p> <a href="#" class="product-item__title">Сухой корм, для средних и крупных пород, 2 кг.</a>
<div class="product-item__price"> <div class="product-item__price">
<p>1 304</p> <p>1 304</p>
</div> </div>
@ -375,9 +373,7 @@
</div> </div>
<div class="product-item__overlay"> <div class="product-item__overlay">
<div class="product-item-overlay__header"> <div class="product-item-overlay__header">
<p class="product-item__title"> <a href="#" class="product-item__title">Сухой корм, для средних и крупных пород, 2 кг.</a>
Сухой корм, 2 кг, для крупных и средних пород
</p>
<ul class="product-item-overlay__tags"> <ul class="product-item-overlay__tags">
<li>Seperpremium</li> <li>Seperpremium</li>
<li>Для крупных и средних пород </li> <li>Для крупных и средних пород </li>
@ -445,22 +441,22 @@
</div> </div>
<div class="product__item hiding"> <div class="product__item hiding">
<div class="product-item__label"> <div class="product-item__label">
<div class="product-item-label__tag product-item-label__tag--sale"> <a href="#" class="product-item-label__tag product-item-label__tag--sale">
Распродажа % Распродажа %
</div> </a>
<div class="product-item-label__tag product-item-label__tag--new"> <a href="#" class="product-item-label__tag product-item-label__tag--new">
Новинка Новинка
</a>
</div> </div>
</div> <a href="#" class="product-item__product-card">
<div class="product-item__product-card">
<img src="assets/img/product/image.png" alt="" class="product-item__images"> <img src="assets/img/product/image.png" alt="" class="product-item__images">
</div> </a>
<div class="product-item__content-card"> <div class="product-item__content-card">
<div class="compound"> <div class="compound">
<div class="compound__item">Индейка </div> <a href="#" class="compound__item">Индейка </a>
<div class="compound__item">Индейка </div> <a href="#" class="compound__item">Индейка </a>
</div> </div>
<p class="product-item__title">Сухой корм, для средних и крупных пород, 2 кг.</p> <a href="#" class="product-item__title">Сухой корм, для средних и крупных пород, 2 кг.</a>
<div class="product-item__price"> <div class="product-item__price">
<p>1 304</p> <p>1 304</p>
</div> </div>
@ -473,19 +469,19 @@
</div> </div>
<div class="product__item"> <div class="product__item">
<div class="product-item__label"> <div class="product-item__label">
<div class="product-item-label__tag product-item-label__tag--new"> <a href="#" class="product-item-label__tag product-item-label__tag--new">
Новинка Новинка
</a>
</div> </div>
</div> <a href="#" class="product-item__product-card">
<div class="product-item__product-card">
<img src="assets/img/product/image.png" alt="" class="product-item__images"> <img src="assets/img/product/image.png" alt="" class="product-item__images">
</div> </a>
<div class="product-item__content-card"> <div class="product-item__content-card">
<div class="compound"> <div class="compound">
<div class="compound__item">Индейка </div> <a href="#" class="compound__item">Индейка </a>
<div class="compound__item">Индейка </div> <a href="#" class="compound__item">Индейка </a>
</div> </div>
<p class="product-item__title">Сухой корм, для средних и крупных пород, 2 кг.</p> <a href="#" class="product-item__title">Сухой корм, для средних и крупных пород, 2 кг.</a>
<div class="product-item__price"> <div class="product-item__price">
<p>1 304</p> <p>1 304</p>
</div> </div>
@ -498,19 +494,19 @@
</div> </div>
<div class="product__item"> <div class="product__item">
<div class="product-item__label"> <div class="product-item__label">
<div class="product-item-label__tag product-item-label__tag--sale"> <a href="#" class="product-item-label__tag product-item-label__tag--sale">
Распродажа % Распродажа %
</a>
</div> </div>
</div> <a href="#" class="product-item__product-card">
<div class="product-item__product-card">
<img src="assets/img/product/image.png" alt="" class="product-item__images"> <img src="assets/img/product/image.png" alt="" class="product-item__images">
</div> </a>
<div class="product-item__content-card"> <div class="product-item__content-card">
<div class="compound"> <div class="compound">
<div class="compound__item">Индейка </div> <a href="#" class="compound__item">Индейка </a>
<div class="compound__item">Индейка </div> <a href="#" class="compound__item">Индейка </a>
</div> </div>
<p class="product-item__title">Сухой корм, для средних и крупных пород, 2 кг.</p> <a href="#" class="product-item__title">Сухой корм, для средних и крупных пород, 2 кг.</a>
<div class="product-item__price"> <div class="product-item__price">
<p>1 304</p> <p>1 304</p>
</div> </div>
@ -523,22 +519,22 @@
</div> </div>
<div class="product__item hiding"> <div class="product__item hiding">
<div class="product-item__label"> <div class="product-item__label">
<div class="product-item-label__tag product-item-label__tag--sale"> <a href="#" class="product-item-label__tag product-item-label__tag--sale">
Распродажа % Распродажа %
</div> </a>
<div class="product-item-label__tag product-item-label__tag--new"> <a href="#" class="product-item-label__tag product-item-label__tag--new">
Новинка Новинка
</a>
</div> </div>
</div> <a href="#" class="product-item__product-card">
<div class="product-item__product-card">
<img src="assets/img/product/image.png" alt="" class="product-item__images"> <img src="assets/img/product/image.png" alt="" class="product-item__images">
</div> </a>
<div class="product-item__content-card"> <div class="product-item__content-card">
<div class="compound"> <div class="compound">
<div class="compound__item">Индейка </div> <a href="#" class="compound__item">Индейка </a>
<div class="compound__item">Индейка </div> <a href="#" class="compound__item">Индейка </a>
</div> </div>
<p class="product-item__title">Сухой корм, для средних и крупных пород, 2 кг.</p> <a href="#" class="product-item__title">Сухой корм, для средних и крупных пород, 2 кг.</a>
<div class="product-item__price"> <div class="product-item__price">
<p>1 304</p> <p>1 304</p>
</div> </div>
@ -551,7 +547,7 @@
</div> </div>
</div> </div>
<div class="product__footer"> <div class="product__footer product__footer--error">
<button class="button button--white"> <button class="button button--white">
Загрузить еще Загрузить еще
</button> </button>
@ -860,6 +856,11 @@
Перейти к оформлению Перейти к оформлению
</button> </button>
</div> </div>
<div class="modal__button">
<button class="to-know button--100-perc to-know--background-none">
<p>Продолжить покупку</p>
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -949,9 +950,9 @@
</a> </a>
</div> </div>
<div class="footer-list__item"> <div class="footer-list__item">
<button class="button button--black button--100-perc"> <a href="#" class="button button--black button--100-perc button--link">
Чат бот с ветеринаром Чат бот с ветеринаром
</button> </a>
</div> </div>
</div> </div>

6
index.html
Unescape View File

@ -49,7 +49,7 @@
</head> </head>
<body style="background-color: grey;"> <body style="background-color: grey;">
<header class="header white"> <header class="header wrapper white">
<div class="header__content"> <div class="header__content">
<button class="header__open-menu" id="phone-menu"> <button class="header__open-menu" id="phone-menu">
</button> </button>
@ -856,9 +856,9 @@
</a> </a>
</div> </div>
<div class="footer-list__item"> <div class="footer-list__item">
<button class="button button--black button--100-perc"> <a href="#" class="button button--black button--100-perc button--link">
Чат бот с ветеринаром Чат бот с ветеринаром
</button> </a>
</div> </div>
</div> </div>

4
product.html
Unescape View File

@ -1000,9 +1000,9 @@
</a> </a>
</div> </div>
<div class="footer-list__item"> <div class="footer-list__item">
<button class="button button--black button--100-perc"> <a href="#" class="button button--black button--100-perc button--link">
Чат бот с ветеринаром Чат бот с ветеринаром
</button> </a>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save