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 64e0310bb7
commit ba8ac5dea1
10 changed files with 620 additions and 53 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. 111
      assets/css/gp-style-core.css
  2. 218
      assets/css/gp-style-desktop.css
  3. 3
      assets/css/gp-style-mobile.css
  4. 38
      assets/css/gp-style-tablet.css
  5. BIN
      assets/img/pet/cat.png
  6. BIN
      assets/img/pet/dog.png
  7. 3
      assets/img/svg/main/arrow-breadcrumbs.svg
  8. 42
      assets/js/gp-main.js
  9. 252
      index.html
  10. 4
      ui_kit.html

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

@ -100,6 +100,8 @@
--text-black: #121212; --text-black: #121212;
--text-dark: #2b2b3b; --text-dark: #2b2b3b;
--text-grey: #999; --text-grey: #999;
--text-0: #000;
--text-6: #666;
/* background */ /* background */
--background-white: #fff; --background-white: #fff;
@ -121,7 +123,7 @@ button{
.wrapper{ .wrapper{
margin: 0 auto; margin: 0 auto;
width: 1280px; max-width: 1280px;
} }
/* компоненты */ /* компоненты */
@ -172,13 +174,17 @@ button{
top: 33px; top: 33px;
left: -13px; left: -13px;
/* height: 0; */ height: 0;
border-radius: 6px; border-radius: 6px;
transition: height .2s ease-out; transition: height .2s ease-out;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.2);
overflow: hidden; overflow: hidden;
background-color: var(--background-white);
z-index: 100;
} }
.lang__list{ .lang__list{
width: 104px; width: 104px;
@ -420,9 +426,81 @@ button{
/* social media */ /* social media */
/* breadcrumbs */
.breadcrumbs{
margin: 24px;
display: flex;
align-items: center;
}
.breadcrumbs__item{
display: block;
padding: 0px 16px;
font-family: var(--font-family);
font-weight: 700;
font-size: 16px;
line-height: 125%;
color: var(--text-6);
text-decoration: none;
position: relative;
}
.breadcrumbs__item:first-child{
padding-left: 0;
}
.breadcrumbs__item:nth-child(n+2)::before{
content: '';
position: absolute;
top: -2px;
left: -12px;
width: 24px;
aspect-ratio: 1;
background-image: url(../img/svg/main/arrow-breadcrumbs.svg);
background-repeat: no-repeat;
background-size: contain;
}
/* breadcrumbs */
/* product */ /* product */
.product{ .product{
margin: -24px; padding: 24px;
}
.product__header{
display: flex;
justify-content: space-between;
align-items: center;
}
.product__tag{
padding-top: 48px;
display: flex;
align-items: center;
}
.product-tag__item{
padding: 4px 12px;
border-radius: 16px;
/* 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-weight: 700;
font-size: 36px;
line-height: 111%;
text-transform: uppercase;
text-align: center;
color: var(--text-black);
}
.product__main{
margin: 24px -24px -24px;
width: 100%; width: 100%;
@ -438,21 +516,21 @@ button{
border-radius: 24px; border-radius: 24px;
} }
.product__product-card{ .product-item__product-card{
height: 274px; height: 274px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.product__images{ .product-item__images{
height: 242px; height: 242px;
object-fit: contain; object-fit: contain;
} }
.product__content-card{ .product-item__content-card{
padding: 15px; padding: 15px;
} }
.product__title{ .product-item__title{
margin-top: 8px; margin-top: 8px;
font-family: var(--font-family); font-family: var(--font-family);
@ -461,7 +539,7 @@ button{
line-height: 120%; line-height: 120%;
color: var(--text-black); color: var(--text-black);
} }
.product__price{ .product-item__price{
margin-top: 8px; margin-top: 8px;
font-family: var(--font-family); font-family: var(--font-family);
@ -471,10 +549,10 @@ button{
text-transform: uppercase; text-transform: uppercase;
color: var(--text-black); color: var(--text-black);
} }
.product__price::after{ .product-item__price::after{
content: '₽'; content: '₽';
} }
.product__bye{ .product-item__bye{
margin-top: 8px; margin-top: 8px;
} }
/* product */ /* product */
@ -503,6 +581,12 @@ button{
.compound__item:first-child{ .compound__item:first-child{
margin-left: 0; margin-left: 0;
} }
.product__footer{
margin: 48px 24px 24px;
display: flex;
justify-content: center;
}
/* compound */ /* compound */
/* button */ /* button */
@ -514,10 +598,11 @@ button{
border-radius: 20px; border-radius: 20px;
} }
.button--white{ .button--100-perc{
width: 100%; width: 100%;
}
padding: 12px; .button--white{
padding: 12px 24px;
text-align: center; text-align: center;

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

@ -1,32 +1,238 @@
/* Основные стили для компьютера */ /* Основные стили для компьютера */
.wrapper{ /* header start */
margin: 0 auto;
.header{
position: relative;
max-width: 1280px; background-color: var(--background-white);
} }
.header::after{
content: '';
/* header start */ position: absolute;
left: 24px;
bottom: 0;
.header{ width: calc(100% - 48px);
height: 1px;
background: #333;
} }
.header__content{ .header__content{
height: 72px; height: 72px;
padding: 16px 24px; padding: 14px 24px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; 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{ .header__logo{
width: 182px; width: 182px;
height: 40px; height: 40px;
} }
.header__logo-black{ .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);
}
.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 */ /* header end */

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

@ -1,5 +1,6 @@
/* Стили для мобильных устройств */ /* Стили для мобильных устройств */
@media only screen and (max-width: 576px) { @media only screen and (max-width: 576px) {
/* header */
/* header */
} }

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

@ -1,5 +1,41 @@
/* Стили для планшетов */ /* Стили для планшетов */
@media only screen and (max-width: 992px) { @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;
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 */
} }

BIN
assets/img/pet/cat.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
assets/img/pet/dog.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

3
assets/img/svg/main/arrow-breadcrumbs.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="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>
Side by Side

After

Width:  |  Height:  |  Size: 481 B

42
assets/js/gp-main.js
Unescape View File

@ -1,27 +1,29 @@
'use strict'; 'use strict';
// lang start function toggleOpenX(button, content, blockheight) {
let thisButton = document.querySelector(button),
let lang = document.querySelector('.lang'); thisContent = document.querySelector(content),
thisBlockheight = document.querySelector(blockheight);
lang.onclick = function (e) { thisButton.onclick = function () {
let target = e.target let height = thisBlockheight.clientHeight;
console.log(e); if (!thisContent.classList .contains('open')) {
thisContent.style.height = `${height}px`;
thisContent.classList .add('open');
if (target.classList.contains('lang__open')) { }else{
thisContent.style.height = null;
thisContent.classList .remove('open');
} }
}
}
// let langOpenButton // header start
// let langContent toggleOpenX('#pc-menu','.header__menu-block','.header__pc-menu');
// let langList toggleOpenX('#phone-menu','.header__menu-block','.header__phone-menu');
// let height = langList.offsetHeight;
} // header end
// lang start
toggleOpenX('.lang__open','.lang__content','.lang__list');
// lang end // lang end

252
index.html
Unescape View File

@ -13,7 +13,7 @@
<link rel="stylesheet" href="/assets/css/gp-style-desktop.css?v=1.0"> <link rel="stylesheet" href="/assets/css/gp-style-desktop.css?v=1.0">
<!-- Адаптив --> <!-- Адаптив -->
<link rel="stylesheet" media="screen and (min-width: 1400px)" href="/assets/css/gp-style-ultra.css?v=1.0"> <link rel="stylesheet" media="screen and (min-width: 1400px)" href="/assets/css/gp-style-ultra.css?v=1.0">
<link rel="stylesheet" media="screen and (max-width: 992px)" href="/assets/css/gp-style-tablet.css?v=1.0"> <link rel="stylesheet" media="screen and (max-width: 1200px)" href="/assets/css/gp-style-tablet.css">
<link rel="stylesheet" media="screen and (max-width: 576px)" href="/assets/css/gp-style-mobile.css?v=1.0"> <link rel="stylesheet" media="screen and (max-width: 576px)" href="/assets/css/gp-style-mobile.css?v=1.0">
@ -50,7 +50,10 @@
<body> <body>
<header class="header"> <header class="header">
<div class="wrapper header__content"> <div class="header__content">
<button class="header__open-menu" id="phone-menu">
</button>
<div class="header__logo"> <div class="header__logo">
<svg class="header__logo-black" xmlns="http://www.w3.org/2000/svg" width="181" height="40" viewBox="0 0 181 40" fill="none"> <svg class="header__logo-black" xmlns="http://www.w3.org/2000/svg" width="181" height="40" viewBox="0 0 181 40" fill="none">
<path d="M50.4859 5.79145C49.0065 3.27258 44.6431 2.78969 38.1761 4.42108C35.0048 1.89583 31.1372 0.376333 27.0791 0.0613091C23.021 -0.253715 18.9613 0.650395 15.4309 2.65541C11.9004 4.66042 9.06364 7.673 7.29143 11.2992C5.51922 14.9254 4.8941 18.9964 5.49783 22.9798C0.798105 27.6978 -0.973633 31.6805 0.51234 34.2081C1.42019 35.7547 3.36998 36.5377 6.22762 36.5377C8.05553 36.5052 9.87449 36.2769 11.6527 35.8569C12.0352 35.7721 12.4265 35.6785 12.8222 35.5785C15.793 37.9443 19.3793 39.4307 23.1672 39.8663C26.9551 40.3018 30.7903 39.6687 34.2301 38.0399C37.67 36.4112 40.5744 33.8533 42.6083 30.6613C44.6421 27.4693 45.7224 23.7733 45.7246 19.9998C45.7261 19.0003 45.6527 18.002 45.5048 17.0132C48.3119 14.1855 50.1891 11.5144 50.7805 9.29786C51.1519 7.93619 51.0508 6.75724 50.4859 5.79145ZM25.5013 1.7282C29.77 1.73333 33.9054 3.19952 37.206 5.87806C40.5066 8.5566 42.7692 12.2825 43.61 16.4238C40.0555 19.8366 35.081 23.4888 29.4339 26.6994C23.4306 30.1122 17.8253 32.4092 13.253 33.66C10.4542 31.1997 8.47718 27.9557 7.5842 24.3581C6.69122 20.7605 6.92444 16.9793 8.25293 13.5159C9.58142 10.0525 11.9424 7.07045 15.0229 4.96526C18.1033 2.86006 21.7576 1.73114 25.5013 1.7282ZM2.03568 33.3337C1.10145 31.7458 2.58523 28.6353 5.93746 25.0549C6.84638 28.4997 8.66755 31.6421 11.2131 34.1581C6.34633 35.2261 2.96332 34.9172 2.03568 33.3337ZM25.5013 38.2714C21.7268 38.275 18.0427 37.1282 14.95 34.9868C19.6937 33.5556 25.0243 31.2085 30.3044 28.2089C35.635 25.1767 40.3303 21.8008 43.8957 18.5424C43.9353 19.0231 43.9617 19.5082 43.9617 19.9998C43.9559 24.8432 42.0092 29.4866 38.5486 32.9118C35.088 36.3371 30.3959 38.2645 25.5013 38.2714ZM49.0835 8.84759C48.6152 10.5877 47.1974 12.6868 45.0718 14.9512C44.1572 11.4985 42.3267 8.3504 39.7697 5.83278C44.5728 4.78434 48.0327 5.08016 48.9648 6.66588C49.2857 7.2162 49.3274 7.94924 49.0835 8.84759Z" fill="#121212"/> <path d="M50.4859 5.79145C49.0065 3.27258 44.6431 2.78969 38.1761 4.42108C35.0048 1.89583 31.1372 0.376333 27.0791 0.0613091C23.021 -0.253715 18.9613 0.650395 15.4309 2.65541C11.9004 4.66042 9.06364 7.673 7.29143 11.2992C5.51922 14.9254 4.8941 18.9964 5.49783 22.9798C0.798105 27.6978 -0.973633 31.6805 0.51234 34.2081C1.42019 35.7547 3.36998 36.5377 6.22762 36.5377C8.05553 36.5052 9.87449 36.2769 11.6527 35.8569C12.0352 35.7721 12.4265 35.6785 12.8222 35.5785C15.793 37.9443 19.3793 39.4307 23.1672 39.8663C26.9551 40.3018 30.7903 39.6687 34.2301 38.0399C37.67 36.4112 40.5744 33.8533 42.6083 30.6613C44.6421 27.4693 45.7224 23.7733 45.7246 19.9998C45.7261 19.0003 45.6527 18.002 45.5048 17.0132C48.3119 14.1855 50.1891 11.5144 50.7805 9.29786C51.1519 7.93619 51.0508 6.75724 50.4859 5.79145ZM25.5013 1.7282C29.77 1.73333 33.9054 3.19952 37.206 5.87806C40.5066 8.5566 42.7692 12.2825 43.61 16.4238C40.0555 19.8366 35.081 23.4888 29.4339 26.6994C23.4306 30.1122 17.8253 32.4092 13.253 33.66C10.4542 31.1997 8.47718 27.9557 7.5842 24.3581C6.69122 20.7605 6.92444 16.9793 8.25293 13.5159C9.58142 10.0525 11.9424 7.07045 15.0229 4.96526C18.1033 2.86006 21.7576 1.73114 25.5013 1.7282ZM2.03568 33.3337C1.10145 31.7458 2.58523 28.6353 5.93746 25.0549C6.84638 28.4997 8.66755 31.6421 11.2131 34.1581C6.34633 35.2261 2.96332 34.9172 2.03568 33.3337ZM25.5013 38.2714C21.7268 38.275 18.0427 37.1282 14.95 34.9868C19.6937 33.5556 25.0243 31.2085 30.3044 28.2089C35.635 25.1767 40.3303 21.8008 43.8957 18.5424C43.9353 19.0231 43.9617 19.5082 43.9617 19.9998C43.9559 24.8432 42.0092 29.4866 38.5486 32.9118C35.088 36.3371 30.3959 38.2645 25.5013 38.2714ZM49.0835 8.84759C48.6152 10.5877 47.1974 12.6868 45.0718 14.9512C44.1572 11.4985 42.3267 8.3504 39.7697 5.83278C44.5728 4.78434 48.0327 5.08016 48.9648 6.66588C49.2857 7.2162 49.3274 7.94924 49.0835 8.84759Z" fill="#121212"/>
@ -58,23 +61,254 @@
</svg> </svg>
</div> </div>
<!-- <ul class="main-menu"> <ul class="main-menu">
<li> <li class="main-menu__item">
<a href=""></a> <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" id="pc-menu">
ПРОДУКЦИЯ
</button>
</li>
</ul>
<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>
<li> <li class="lang__item">
<button> <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> </button>
</div>
</div>
</div>
<div class="header__menu-block">
<div class="header__pc-menu">
<div class="header-pc-menu__content">
<div class="header-pc-menu__item">
<a href="#" class="header-pc-menu__title">Кошкам</a>
<ul class="header-pc-menu__list">
<li class="header-pc-menu__list-li">
<a href="">Лакомства</a>
</li> </li>
</ul> --> <li class="header-pc-menu__list-li">
<a href="">Корм</a>
</li>
<li class="header-pc-menu__list-li">
<a href="">Аксессуары</a>
</li>
</ul>
</div>
<div class="header-pc-menu__item">
<a href="#" class="header-pc-menu__title">Собакам</a>
<ul class="header-pc-menu__list">
<li class="header-pc-menu__list-li">
<a href="">Лакомства</a>
</li>
<li class="header-pc-menu__list-li">
<a href="">Корм</a>
</li>
<li class="header-pc-menu__list-li">
<a href="">Аксессуары</a>
</li>
</ul>
</div>
</div>
</div>
<div class="header__phone-menu">
<div class="header-phone-menu__item">
<a href="#" class="header-phone-menu__title header-phone-menu__title--gradient" >
ГЛАВНАЯ
</a>
</div>
<div class="header-phone-menu__item">
<a href="#" class="header-phone-menu__title">
ПРОДУКЦИЯ
</a>
<a href="#" class="header-phone-menu__category">Кошкам</a>
<ul class="header-phone-menu__list">
<li class="header-phone-menu__list-item">
<a href="#">Корм</a>
</li>
<li class="header-phone-menu__list-item">
<a href="#">Лакомства</a>
</li>
<li class="header-phone-menu__list-item">
<a href="#">Корм</a>
</li>
</ul>
<a href="#" class="header-phone-menu__category">Собакам</a>
<ul class="header-phone-menu__list">
<li class="header-phone-menu__list-item">
<a href="#">Корм</a>
</li>
<li class="header-phone-menu__list-item">
<a href="#">Лакомства</a>
</li>
<li class="header-phone-menu__list-item">
<a href="#">Корм</a>
</li>
</ul>
</div>
<div class="header-phone-menu__item">
<a href="#" class="header-phone-menu__title">
О COSMOPET
</a>
</div>
<div class="header-phone-menu__item">
<a href="#" class="header-phone-menu__title">
ПРОИЗВОДСТВО
</a>
</div>
<div class="header-phone-menu__item">
<a href="#" class="header-phone-menu__title">
БЛОГ
</a>
</div>
</div>
</div> </div>
</header> </header>
<main>
<div class="breadcrumbs">
<a href="#" class="breadcrumbs__item">
главня
</a>
<a href="#" class="breadcrumbs__item">
продукция
</a>
</div>
<div class="product">
<div class="product__header">
<p class="product__title">Продукция</p>
<button class="button">
Фильтры
</button>
</div>
<div class="product__tag">
<div class="product-tag__item">
<div class="product-tag-item__content">
dsd
</div>
</div>
</div>
<div class="product__main">
<div class="product__item">
<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>
<div class="product__item">
<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>
<div class="product__item">
<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>
</div>
<div class="product__footer">
<button class="button button--white">
Загрузить еще
</button>
</div>
</div>
</main>
<script src="/assets/js/gp-main.js"></script> <script src="assets/js/gp-main.js"></script>
</body> </body>
</html> </html>

4
ui_kit.html
Unescape View File

@ -144,7 +144,7 @@
</a> </a>
</div> --> </div> -->
<div class="wrapper"> <!-- <div class="wrapper">
<div class="product"> <div class="product">
<div class="product__item"> <div class="product__item">
<div class="product__product-card"> <div class="product__product-card">
@ -170,7 +170,7 @@
</div> </div>
</div> </div>
</div> </div> -->
<script src="/assets/js/gp-main.js"></script> <script src="/assets/js/gp-main.js"></script>
</body> </body>

Write Preview
Loading…
Cancel
Save