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-05 21:26:00 +03:00
parent 64e0310bb7
commit ba8ac5dea1
10 changed files with 620 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -100,6 +100,8 @@
--text-black: #121212;
--text-dark: #2b2b3b;
--text-grey: #999;
--text-0: #000;
--text-6: #666;
/* background */
--background-white: #fff;
@@ -121,7 +123,7 @@ button{
.wrapper{
margin: 0 auto;
width: 1280px;
max-width: 1280px;
}
/* компоненты */
@@ -172,13 +174,17 @@ button{
top: 33px;
left: -13px;
/* height: 0; */
height: 0;
border-radius: 6px;
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);
overflow: hidden;
background-color: var(--background-white);
z-index: 100;
}
.lang__list{
width: 104px;
@@ -420,9 +426,81 @@ button{
/* 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{
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%;
@@ -438,21 +516,21 @@ button{
border-radius: 24px;
}
.product__product-card{
.product-item__product-card{
height: 274px;
display: flex;
justify-content: center;
align-items: center;
}
.product__images{
.product-item__images{
height: 242px;
object-fit: contain;
}
.product__content-card{
.product-item__content-card{
padding: 15px;
}
.product__title{
.product-item__title{
margin-top: 8px;
font-family: var(--font-family);
@@ -461,7 +539,7 @@ button{
line-height: 120%;
color: var(--text-black);
}
.product__price{
.product-item__price{
margin-top: 8px;
font-family: var(--font-family);
@@ -471,10 +549,10 @@ button{
text-transform: uppercase;
color: var(--text-black);
}
.product__price::after{
.product-item__price::after{
content: '₽';
}
.product__bye{
.product-item__bye{
margin-top: 8px;
}
/* product */
@@ -503,6 +581,12 @@ button{
.compound__item:first-child{
margin-left: 0;
}
.product__footer{
margin: 48px 24px 24px;
display: flex;
justify-content: center;
}
/* compound */
/* button */
@@ -514,10 +598,11 @@ button{
border-radius: 20px;
}
.button--white{
.button--100-perc{
width: 100%;
padding: 12px;
}
.button--white{
padding: 12px 24px;
text-align: center;

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

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

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

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

38
assets/css/gp-style-tablet.css
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 Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

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

40
assets/js/gp-main.js
View File

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