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

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

Browse Source
This commit is contained in:
Kirill Pet
2024-10-10 18:18:36 +03:00
parent 62a3e97a7b
commit 93c2f012f1
8 changed files with 135 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
assets/css/gp-style-core.css
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
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
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
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
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
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">
Новинка Новинка
</div> </a>
</div> </div>
<div class="product-item__product-card"> <a href="#" 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">
Распродажа % Распродажа %
</div> </a>
</div> </div>
<div class="product-item__product-card"> <a href="#" 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">
Новинка Новинка
</div> </a>
</div> </div>
<div class="product-item__product-card"> <a href="#" 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">
Новинка Новинка
</div> </a>
</div> </div>
<div class="product-item__product-card"> <a href="#" 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">
Распродажа % Распродажа %
</div> </a>
</div> </div>
<div class="product-item__product-card"> <a href="#" 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">
Новинка Новинка
</div> </a>
</div> </div>
<div class="product-item__product-card"> <a href="#" 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
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
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>