You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
template-for-verstka/assets/css/gp-style-desktop.css

439 lines
6.6 KiB

.wrapper{
margin: auto;
max-width: 1440px;
}
/* text */
.title-1{
font-size: 88px;
}
.title-2{
font-size: 64px;
}
.title-3{
font-size: 40px;
}
.title-4{
font-size: 24px;
}
.text-1{
font-size: 24px;
}
.text-2{
font-size: 18px;
}
/* text */
/* header */
.header__phone{
display: none;
}
.phone-menu{
display: none;
}
.header{
}
.header__wrapper{
padding: 24px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.header__main{
display: flex;
align-items: center;
}
.header-main__item{
margin-left: 48px;
display: flex;
align-items: center;
}
.header-main__item:first-child{
margin-left: 0;
}
.header-main__btn{
margin-left: 16px;
}
.header-main__btn:first-child{
margin-left: 0;
}
.header__text{
font-weight: 400;
font-size: 18px;
color: var(--text-white);
}
.header__text a {
color: var(--text-white);
}
.header__text--bo-line{
text-decoration: none;
}
.header__menu{
padding: 16px 0;
background-color: var(--background-grey);
}
.header-menu__wrapper{
display: flex;
justify-content: space-between;
align-items: center;
}
.header-menu__list{
display: flex;
align-items: center;
font-weight: 400;
font-size: 16px;
text-transform: uppercase;
color: var(--text-white);
list-style-type: none;
}
.header-menu__list li{
margin-left: 32px;
}
.header-menu__list li:first-child{
margin-left: 0;
}
.header-menu__list a{
color: var(--text-white);
text-decoration: none;
}
.header-menu-list__next{
padding-right: 24px;
background-image: url(/assets/img/icon/arrow-bottom.svg);
background-repeat: no-repeat;
background-position: center right;
}
.header-menu__search{
width: 32px;
aspect-ratio: 1;
}
/* header */
/* footer */
.footer{
margin-top: 200px;
padding: 56px 0;
}
.footer__wrapper{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.footer__contact{
display: flex;
}
.footer__contact .footer__item{
margin-left: 58px;
}
.footer__contact .footer__item:first-child{
margin-left: 0px;
}
.footer-menu__item{
margin-left: 40px;
}
.footer-menu__item:first-child{
margin-left: 0;
}
.footer-menu__list{
font-size: 16px;
}
.footer-menu__list li{
margin-top: 16px;
}
.footer-menu__list li:first-child{
margin-top: 0px;
}
.footer__text{
display: block;
max-width: 297px;
font-size: 24px;
}
.footer__about{
margin-top: 33px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
/* footer */
/* Стили для лептопов */
@media only screen and (min-width: 992px) and (max-width: 1400px) {
.wrapper{
width: 100%;
padding: 20px;
}
/* header */
.header__wrapper{
flex-wrap: wrap;
}
.header__main{
margin-top: 10px;
width: 100%;
justify-content: center;
}
/* header */
/* footer */
.footer__wrapper{
justify-content: start;
}
.footer__item{
margin-left: 58px;
}
.footer__contact{
margin-top: 30px;
width: 100%;
justify-content: space-between;
}
.footer__about{
margin-left: 0;
}
/* footer */
}
@media only screen and (min-width: 992px) and (max-width: 1032px) {
/* header */
.header__main{
width: 100%;
justify-content: space-between;
}
.header-main__item{
margin-left: 0;
justify-content: space-between;
}
/* header */
}
/* space */
.space{
margin-top: 56px;
}
.space__content{
margin-top: 56px;
display: flex;
align-items: end;
}
.space__statistics{
width: 947px;
height: 480px;
padding: 24px;
display: flex;
align-items: end;
position: relative;
}
.space-statistics__img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.space-statistics__item{
margin-left: 24px;
width: 216px;
height: 173px;
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
backdrop-filter: blur(10px);
background: rgba(42, 42, 45, 0.7);
border-radius: 4px;
}
.space-statistics__item:nth-child(2){
margin-left: 0;
}
.space__consultation{
margin-left: 40px;
max-width: 453px;
}
.space__consultation .btn-big{
margin-top: 64px;
}
/* space */
.main__item{
margin-top: 200px;
}
/* gym */
.gym{
margin: 34px -20px -20px -20px;
}
.gym .swiper-wrapper{
display: flex;
flex-wrap: wrap;
}
.gym .swiper-slide{
display: flex;
}
.gym__item{
margin: 20px;
height: 320px;
display: flex;
justify-content: space-between;
}
.gym-item__img{
min-width: calc(50% - 20px);
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 4px;
}
.gym-item__text{
min-width: calc(50% - 20px);
width: 100%;
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: var(--background-grey);
border-radius: 4px;
}
.gym-item-img--padding,
.gym-item-text--padding{
max-width: calc(50% - 20px);
}
.gym-item-text__header{
display: flex;
align-items: end;
}
.gym-item-text__header .text-1{
margin-bottom: 11.5px;
}
.gym-item-text__header .title-2{
margin-left: 16px;
}
/* gym */
@media only screen and (min-width: 992px) {
.gym__item{
width: calc(50% - 40px) !important;
}
.gym .swiper-slide:nth-child(3){
width: 100% !important;
}
}
/* projects */
.projects{
margin: 34px -20px -20px -20px;
}
/* projects */
/* services */
.services{
margin: 34px -20px -20px -20px;
display: flex;
flex-wrap: wrap;
}
.services__item{
margin: 20px;
height: 257px;
padding: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: var(--background-grey);
border-radius: 4px;
}
.services__item:nth-child(1),
.services__item:nth-child(2),
.services__item:nth-child(3){
width: calc(33.3% - 40px);
}
.services__item:nth-child(n+4){
width: calc(50% - 40px);
}
.services__img{
width: 88px;
aspect-ratio: 1;
}
.services__content{
height: 89px;
/* display: flex; */
}
.services__content .title-4{
margin-bottom: 16px;
}
/* services */
/* call */
.call{
padding: 88px 64px;
display: flex;
flex-direction: column;
align-items: center;
background-color: var(--background-grey);
}
.call__content{
margin-top: 56px;
width: 910px;
height: 152px;
display: flex;
justify-content: space-between;
}
.call__item{
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* call */
@media only screen and (min-width: 992px) and (max-width: 1032px) {}