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

save

Browse Source
This commit is contained in:
Kirill Pet
2024-10-06 22:37:29 +03:00
parent 8edb4877fa
commit f81de85d89
7 changed files with 763 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

312
assets/css/gp-style-core.css
View File

@@ -101,6 +101,7 @@
--text-dark: #2b2b3b;
--text-grey: #999;
--text-0: #000;
--text-3: #333;
--text-6: #666;
/* background */
@@ -123,7 +124,7 @@ button{
.wrapper{
margin: 0 auto;
max-width: 1280px;
max-width: 1600px;
}
/* компоненты */
@@ -467,100 +468,12 @@ button{
}
/* breadcrumbs */
/* product */
.product{
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%;
display: flex;
align-items: start;
}
.product__item{
margin: 24px;
width: calc(33.3% - 48px);
background-color: var(--background-grey);
border-radius: 24px;
}
.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: 15px;
}
.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__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 */
/* compound */
.compound{
margin: -5px;
min-height: 33.95px;
display: flex;
align-items: start;
}
@@ -591,18 +504,21 @@ button{
/* 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%;
}
.button--white{
padding: 12px 24px;
padding: 11px 24px;
text-align: center;
@@ -614,4 +530,214 @@ button{
.button--white:hover{
opacity: .8;
}
/* button */
.button--gradient{
background: var(--gradient-turquoise);
border: none;
transition: opacity .2s ease-out;
}
.button--gradient:hover{
opacity: .8;
}
.button--base{
padding: 12px 24px;
}
.button--high{
height: 56px;
padding: 16px 56px 24px 24px;
font-weight: 700;
text-align: start;
position: relative;
}
.button--filter::after{
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;
justify-content: center;
border: none;
transition: opacity .2s ease-out;
}
.to-know:hover{
opacity: .8;
}
.to-know p{
padding-bottom: 4px;
font-family: var(--font-family);
font-weight: 700;
font-size: 20px;
line-height: 120%;
color: var(--text-black);
border-bottom: 1px var(--text-black) solid;
cursor: pointer;
}
/* button */
/* 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-weight: 400;
font-size: 20px;
line-height: 120%;
color: var(--text-black);
position: relative;
transition: opacity .2s ease-out;
}
.select:hover .select__state{
opacity: .8;
}
.select::after{
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;
}
.state__block{
position: absolute;
top: 48px;
left: 0;
width: 100%;
height: 0;
overflow: hidden;
}
.state__content{
padding: 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-weight: 400;
font-size: 20px;
line-height: 120%;
color: var(--text-dark);
text-align: start;
border-radius: 6px;
transition: background-color .2s ease-out;
position: relative;
}
.state__button:hover,
.state__button.active{
background-color: var(--background-grey);
}
.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;
align-items: center;
}
.counter__input{
width: 48px;
font-family: var(--font-family);
font-weight: 400;
font-size: 20px;
line-height: 120%;
text-align: center;
color: var(--text-black);
pointer-events: none;
background: none;
border: none;
}
.counter__button{
width: 48px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid var(--text-3);
border-radius: 24px;
background: var(--background-white);
transition: opacity .2s ease-out;
}
.counter__button:hover{
opacity: .8;
}
/* counter */

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

@@ -17,7 +17,7 @@
width: calc(100% - 48px);
height: 1px;
background: #333;
background: var(--text-3);
}
.header__content{
@@ -90,6 +90,8 @@
transition: height .2s ease-out;
background-color: var(--background-white);
z-index: 100;
}
.header__pc-menu{
@@ -236,9 +238,326 @@
}
/* 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 Normal file
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 Normal file
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 Normal file
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 Normal file
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