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

save

Browse Source
cosmopet--Memento-mori-dev
Kirill Pet 10 months ago
parent 8edb4877fa
commit f81de85d89
7 changed files with 756 additions and 93 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. 302
      assets/css/gp-style-core.css
  2. 323
      assets/css/gp-style-desktop.css
  3. 3
      assets/img/svg/main/filter.svg
  4. 11
      assets/img/svg/main/gradient-x.svg
  5. 10
      assets/img/svg/main/minus.svg
  6. 11
      assets/img/svg/main/plus.svg
  7. 187
      index.html

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

@ -101,6 +101,7 @@
--text-dark: #2b2b3b; --text-dark: #2b2b3b;
--text-grey: #999; --text-grey: #999;
--text-0: #000; --text-0: #000;
--text-3: #333;
--text-6: #666; --text-6: #666;
/* background */ /* background */
@ -123,7 +124,7 @@ button{
.wrapper{ .wrapper{
margin: 0 auto; margin: 0 auto;
max-width: 1280px; max-width: 1600px;
} }
/* компоненты */ /* компоненты */
@ -467,151 +468,276 @@ button{
} }
/* breadcrumbs */ /* breadcrumbs */
/* compound */
.compound{
margin: -5px;
/* product */ min-height: 33.95px;
.product{
padding: 24px;
}
.product__header{
display: flex;
justify-content: space-between;
align-items: center;
}
.product__tag{
padding-top: 48px;
display: flex; display: flex;
align-items: center; align-items: start;
} }
.product-tag__item{ .compound__item{
padding: 4px 12px; margin: 5px;
border-radius: 16px; padding: 4px 8px;
/* background: linear-gradient(346.57% 244.17% to 149.73% -58.39%, rgb(15, 88, 129) 0%, rgb(30, 164, 156) 51.21689438819885%, rgb(118, 206, 117) 80.70731163024902%, rgb(236, 243, 159) 91.14583134651184%); */
}
.product__title{
font-family: var(--font-family); font-family: var(--font-family);
font-weight: 700; font-weight: 700;
font-size: 36px; font-size: 12px;
line-height: 111%; line-height: 133%;
text-transform: uppercase;
text-align: center;
color: var(--text-black); color: var(--text-black);
border-radius: 16px;
background-color: var(--background-white);
}
.compound__item:first-child{
margin-left: 0;
}
.product__footer{
margin: 48px 24px 24px;
display: flex;
justify-content: center;
} }
.product__main{ /* compound */
margin: 24px -24px -24px;
/* button */
.button{
font-family: var(--font-family);
font-weight: 600;
font-size: 20px;
line-height: 120%;
color: var(--text-black);
border-radius: 20px;
cursor: pointer;
}
.button--100-perc{
width: 100%; width: 100%;
}
.button--white{
padding: 11px 24px;
display: flex; text-align: center;
align-items: start;
background-color: var(--background-white);
border: 1px solid var(--background-black);
transition: opacity .2s ease-out;
} }
.product__item{ .button--white:hover{
margin: 24px; opacity: .8;
}
.button--gradient{
background: var(--gradient-turquoise);
border: none;
width: calc(33.3% - 48px); transition: opacity .2s ease-out;
}
.button--gradient:hover{
opacity: .8;
}
.button--base{
padding: 12px 24px;
}
.button--high{
height: 56px;
background-color: var(--background-grey); padding: 16px 56px 24px 24px;
border-radius: 24px; font-weight: 700;
text-align: start;
position: relative;
} }
.product-item__product-card{ .button--filter::after{
height: 274px; content: '';
position: absolute;
top: 16px;
right: 24px;
width: 24px;
aspect-ratio: 1;
background-image: url(../img/svg/main/filter.svg);
background-repeat: no-repeat;
background-size: contain;
}
.to-know{
width: 100%;
padding: 12px 24px 7px 24px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center;
} border: none;
.product-item__images{
height: 242px; transition: opacity .2s ease-out;
object-fit: contain;
} }
.product-item__content-card{ .to-know:hover{
padding: 15px; opacity: .8;
} }
.product-item__title{ .to-know p{
margin-top: 8px; padding-bottom: 4px;
font-family: var(--font-family); font-family: var(--font-family);
font-weight: 500; font-weight: 700;
font-size: 20px; font-size: 20px;
line-height: 120%; line-height: 120%;
color: var(--text-black); color: var(--text-black);
border-bottom: 1px var(--text-black) solid;
cursor: pointer;
} }
.product-item__price{ /* button */
margin-top: 8px;
/* select */
.select{
max-width: 144px;
position: relative;
}
.select__state{
width: 100%;
padding: 11px 47px 11px 13px;
pointer-events:none;
border: 1px solid var(--background-black);
border-radius: 20px;
font-family: var(--font-family); font-family: var(--font-family);
font-weight: 700; font-weight: 400;
font-size: 20px; font-size: 20px;
line-height: 200%; line-height: 120%;
text-transform: uppercase;
color: var(--text-black); color: var(--text-black);
position: relative;
transition: opacity .2s ease-out;
} }
.product-item__price::after{ .select:hover .select__state{
content: '₽'; opacity: .8;
} }
.product-item__bye{ .select::after{
margin-top: 8px; content: '';
position: absolute;
top: 20.5px;
right: 21.5px;
width: 17px;
height: 10px;
background-image: url(../img/svg/main/arrow-black.svg);
background-repeat: no-repeat;
background-size: contain;
} }
/* product */ .state__block{
position: absolute;
top: 48px;
left: 0;
/* compound */ width: 100%;
.compound{
margin: -5px;
display: flex; height: 0;
align-items: start; overflow: hidden;
} }
.compound__item{ .state__content{
margin: 5px; padding: 8px;
padding: 4px 8px; border-radius: 6px;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.2);
background-color: var(--background-white);
list-style-type: none;
}
.state__content li{
margin-top: 8px;
}
.state__content li:first-child{
margin-top: 0;
}
.state__button{
width: 100%;
padding: 4px 32px 4px 4px;
background: none;
border: none;
font-family: var(--font-family); font-family: var(--font-family);
font-weight: 700; font-weight: 400;
font-size: 12px; font-size: 20px;
line-height: 133%; line-height: 120%;
color: var(--text-black); color: var(--text-dark);
text-align: start;
border-radius: 16px; border-radius: 6px;
background-color: var(--background-white);
transition: background-color .2s ease-out;
position: relative;
} }
.compound__item:first-child{ .state__button:hover,
margin-left: 0; .state__button.active{
background-color: var(--background-grey);
} }
.product__footer{
margin: 48px 24px 24px;
.state__button.active::before{
content: '';
position: absolute;
top: 10px;
right: 8px;
width: 16px;
height: 12px;
background-image: url(../img/svg/main/arrow-selected.svg);
}
/* select */
/* counter */
.counter{
display: flex; display: flex;
justify-content: center; align-items: center;
} }
/* compound */ .counter__input{
width: 48px;
/* button */ font-family: var(--font-family);
.button{ font-weight: 400;
font-weight: 600;
font-size: 20px; font-size: 20px;
line-height: 120%; line-height: 120%;
text-align: center;
color: var(--text-black); color: var(--text-black);
border-radius: 20px; pointer-events: none;
}
.button--100-perc{ background: none;
width: 100%; border: none;
} }
.button--white{ .counter__button{
padding: 12px 24px; width: 48px;
height: 48px;
text-align: center; display: flex;
justify-content: center;
align-items: center;
background-color: var(--background-white); border: 1px solid var(--text-3);
border: 1px solid var(--background-black); border-radius: 24px;
background: var(--background-white);
transition: opacity .2s ease-out; transition: opacity .2s ease-out;
} }
.button--white:hover{ .counter__button:hover{
opacity: .8; opacity: .8;
} }
/* button */ /* counter */

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

@ -17,7 +17,7 @@
width: calc(100% - 48px); width: calc(100% - 48px);
height: 1px; height: 1px;
background: #333; background: var(--text-3);
} }
.header__content{ .header__content{
@ -90,6 +90,8 @@
transition: height .2s ease-out; transition: height .2s ease-out;
background-color: var(--background-white); background-color: var(--background-white);
z-index: 100;
} }
.header__pc-menu{ .header__pc-menu{
@ -236,9 +238,326 @@
} }
/* header end */ /* 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__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 */
@media only screen and (max-width: 1600px) {
.product__item{
margin: 12px;
width: calc(33.3% - 24px);
}
}

3
assets/img/svg/main/filter.svg
Unescape View File

@ -0,0 +1,3 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

11
assets/img/svg/main/gradient-x.svg
Unescape View File

@ -0,0 +1,11 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

10
assets/img/svg/main/minus.svg
Unescape View File

@ -0,0 +1,10 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 349 B

11
assets/img/svg/main/plus.svg
Unescape View File

@ -0,0 +1,11 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 453 B

187
index.html
Unescape View File

@ -223,7 +223,7 @@
<div class="product__header"> <div class="product__header">
<p class="product__title">Продукция</p> <p class="product__title">Продукция</p>
<button class="button"> <button class="button button--gradient button--high button--filter">
Фильтры Фильтры
</button> </button>
</div> </div>
@ -231,13 +231,130 @@
<div class="product__tag"> <div class="product__tag">
<div class="product-tag__item"> <div class="product-tag__item">
<div class="product-tag-item__content"> <div class="product-tag-item__content">
dsd <p class="product-tag-item__text">Для собак</p>
<button class="product-tag-item__button">
</button>
</div>
</div>
<div class="product-tag__item">
<div class="product-tag-item__content">
<p class="product-tag-item__text">Для собак</p>
<button class="product-tag-item__button">
</button>
</div>
</div>
<div class="product-tag__item">
<div class="product-tag-item__content">
<p class="product-tag-item__text">Для собак</p>
<button class="product-tag-item__button">
</button>
</div> </div>
</div> </div>
</div> </div>
<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__tag product-item-label__tag--new">
Новинка
</div>
</div>
<div class="product-item__product-card">
<img src="assets/img/product/image.png" alt="" class="product-item__images">
</div>
<div class="product-item__content-card">
<div class="compound">
<div class="compound__item">Индейка </div>
<div class="compound__item">Индейка </div>
</div>
<p class="product-item__title">Сухой корм, для средних и крупных пород, 2 кг.</p>
<p class="product-item__price">
1 304
</p>
<div class="product-item__bye">
<button class="button button--white button--100-perc">
Купить
</button>
</div>
</div>
<div class="product-item__overlay">
<div class="product-item-overlay__header">
<p class="product-item__title">
Сухой корм, 2 кг, для крупных и средних пород
</p>
<ul class="product-item-overlay__tags">
<li>Seperpremium</li>
<li>Для крупных и средних пород </li>
<li>Полнорационный</li>
</ul>
</div>
<form class="product-item__form" method="post" action="/send-telegram.php">
<div class="product-item-overlay__input-block">
<div class="product-item-overlay__field">
<p class="product-item-overlay-field__title">Объем</p>
<div class="select">
<input type="text" class="select__state" value="2 кг">
<div class="state__block">
<ul class="state__content">
<li>
<button class="state__button active">
2 кг
</button>
</li>
<li>
<button class="state__button">
3 кг
</button>
</li>
<li>
<button class="state__button">
4 кг
</button>
</li>
</ul>
</div>
</div>
</div>
<div class="product-item-overlay__field">
<p class="product-item-overlay-field__title">Количество</p>
<div class="counter">
<button class="counter__button">
<img src="assets/img/svg/main/minus.svg" alt="">
</button>
<input type="text" class="counter__input" value="1">
<button class="counter__button">
<img src="assets/img/svg/main/plus.svg" alt="">
</button>
</div>
</div>
</div>
<p class="product-item-overlay__price">
1280
</p>
<div class="product-item-overlay__block-button">
<div class="product-item-overlay__button">
<input class="button button--gradient button--base button--100-perc" type="submit" value="Добавить в корзину">
</div>
<div class="product-item-overlay__button">
<button class="to-know button--100-perc">
<p>Подробнее</p>
</button>
</div>
</div>
</form>
</div>
</div>
<div class="product__item">
<div class="product-item__label">
<div class="product-item-label__tag product-item-label__tag--sale">
Распродажа %
</div>
</div>
<div 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> </div>
@ -257,7 +374,40 @@
</div> </div>
</div> </div>
</div> </div>
<div class="product__item hiding">
<div class="product-item__label">
<div class="product-item-label__tag product-item-label__tag--sale">
Распродажа %
</div>
<div class="product-item-label__tag product-item-label__tag--new">
Новинка
</div>
</div>
<div class="product-item__product-card">
<img src="assets/img/product/image.png" alt="" class="product-item__images">
</div>
<div class="product-item__content-card">
<div class="compound">
<div class="compound__item">Индейка </div>
<div class="compound__item">Индейка </div>
</div>
<p class="product-item__title">Сухой корм, для средних и крупных пород, 2 кг.</p>
<p class="product-item__price">
1 304
</p>
<div class="product-item__bye">
<button class="to-know button--100-perc">
<p>Узнать о поступлении</p>
</button>
</div>
</div>
</div>
<div class="product__item"> <div class="product__item">
<div class="product-item__label">
<div class="product-item-label__tag product-item-label__tag--new">
Новинка
</div>
</div>
<div 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> </div>
@ -278,6 +428,11 @@
</div> </div>
</div> </div>
<div class="product__item"> <div class="product__item">
<div class="product-item__label">
<div class="product-item-label__tag product-item-label__tag--sale">
Распродажа %
</div>
</div>
<div 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> </div>
@ -297,6 +452,34 @@
</div> </div>
</div> </div>
</div> </div>
<div class="product__item hiding">
<div class="product-item__label">
<div class="product-item-label__tag product-item-label__tag--sale">
Распродажа %
</div>
<div class="product-item-label__tag product-item-label__tag--new">
Новинка
</div>
</div>
<div class="product-item__product-card">
<img src="assets/img/product/image.png" alt="" class="product-item__images">
</div>
<div class="product-item__content-card">
<div class="compound">
<div class="compound__item">Индейка </div>
<div class="compound__item">Индейка </div>
</div>
<p class="product-item__title">Сухой корм, для средних и крупных пород, 2 кг.</p>
<p class="product-item__price">
1 304
</p>
<div class="product-item__bye">
<button class="to-know button--100-perc">
<p>Узнать о поступлении</p>
</button>
</div>
</div>
</div>
</div> </div>
<div class="product__footer"> <div class="product__footer">

Write Preview
Loading…
Cancel
Save