Kirill Pet
8 months ago
parent
72ea7506a3
commit
bf2dd875e0
@ -1,5 +1,205 @@ |
||||
/* Стили для планшетов */ |
||||
@media only screen and (max-width: 992px) { |
||||
.wrapper{ |
||||
width: 100%; |
||||
} |
||||
.phone--hone{ |
||||
display: none; |
||||
} |
||||
|
||||
|
||||
/* header */ |
||||
.header{ |
||||
padding: 24px 16px; |
||||
|
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
|
||||
position: relative; |
||||
} |
||||
.header__wrapper{ |
||||
padding: 0; |
||||
} |
||||
.header__phone{ |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.header-phone__item{ |
||||
margin-left: 24px; |
||||
|
||||
width: 32px; |
||||
height: 32px; |
||||
|
||||
transition: opacity .3s; |
||||
} |
||||
.header-phone__item > img{ |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.header-phone__item:first-child{ |
||||
margin-left: 0; |
||||
} |
||||
.header-phone__item:active{ |
||||
opacity: .8; |
||||
} |
||||
|
||||
.button-menu{ |
||||
width: 100%; |
||||
height: 100%; |
||||
|
||||
position: relative; |
||||
|
||||
overflow: hidden; |
||||
} |
||||
.button-menu__open{ |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
|
||||
width: 100%; |
||||
height: 100%; |
||||
|
||||
transition: opacity .3s; |
||||
} |
||||
.button-menu__close{ |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
|
||||
width: 100%; |
||||
height: 100%; |
||||
|
||||
transition: opacity .3s; |
||||
opacity: 0; |
||||
} |
||||
.button-menu.open .button-menu__open{ |
||||
opacity: 0; |
||||
} |
||||
.button-menu.open .button-menu__close{ |
||||
opacity: 1; |
||||
} |
||||
|
||||
.phone-menu{ |
||||
position: absolute; |
||||
top: 112px; |
||||
right: 0; |
||||
left: 0; |
||||
|
||||
width: 100%; |
||||
} |
||||
.phone-menu__block-content{ |
||||
/* height: 0; */ |
||||
/* overflow: hidden; */ |
||||
} |
||||
.phone-menu__content{ |
||||
padding: 0 16px 40px 16px; |
||||
|
||||
} |
||||
.phone-menu__block{ |
||||
margin-top: 32px; |
||||
} |
||||
.phone-menu__title{ |
||||
font-weight: 700; |
||||
font-size: 32px; |
||||
color: var(--text-white); |
||||
} |
||||
.phone-menu__list{ |
||||
list-style-type: none; |
||||
|
||||
font-weight: 400; |
||||
font-size: 14px; |
||||
text-transform: uppercase; |
||||
color: var(--text-white); |
||||
} |
||||
.phone-menu__list a{ |
||||
font-weight: 400; |
||||
font-size: 14px; |
||||
text-transform: uppercase; |
||||
color: var(--text-white); |
||||
|
||||
text-decoration: none; |
||||
} |
||||
.phone-menu__list li{ |
||||
margin-top: 24px; |
||||
} |
||||
.phone-menu__list li:first-child{ |
||||
margin-top: 0; |
||||
} |
||||
.phone-menu--next{ |
||||
display: block; |
||||
|
||||
background-image: url(/assets/img/icon/arrow-right.svg); |
||||
background-repeat: no-repeat; |
||||
background-position: center right; |
||||
} |
||||
|
||||
.phone-menu__text{ |
||||
margin-top: 24px; |
||||
|
||||
display: block; |
||||
|
||||
font-weight: 400; |
||||
font-size: 16px; |
||||
color: var(--text-white); |
||||
} |
||||
.phone-menu__text:first-child{ |
||||
margin-top: 0; |
||||
} |
||||
.phone-menu__text > a { |
||||
color: var(--text-white); |
||||
} |
||||
.phone-menu__text--no-line{ |
||||
text-decoration: none; |
||||
} |
||||
|
||||
.phone-social{ |
||||
margin-top: 24px; |
||||
|
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
/* header */ |
||||
|
||||
/* footer */ |
||||
.footer__wrapper{ |
||||
padding: 0 16px; |
||||
|
||||
justify-content: start; |
||||
} |
||||
.footer__item:nth-child(2){ |
||||
margin-left: 38px; |
||||
} |
||||
.footer__contact{ |
||||
margin-top: 20px; |
||||
|
||||
flex-wrap: wrap; |
||||
} |
||||
.footer__contact .footer__item:nth-child(3){ |
||||
margin-top: 20px; |
||||
margin-left: 0; |
||||
|
||||
width: 100%; |
||||
} |
||||
/* footer */ |
||||
} |
||||
|
||||
@media only screen and (max-width: 829px) { |
||||
.footer__about{ |
||||
flex-direction: column; |
||||
} |
||||
} |
||||
|
||||
@media only screen and (max-width: 630px) { |
||||
.footer__wrapper{ |
||||
justify-content: center; |
||||
} |
||||
.footer__contact{ |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
} |
||||
.footer__contact .footer__item:nth-child(2){ |
||||
margin-top: 20px; |
||||
margin-left: 0; |
||||
} |
||||
} |
||||
Loading…
Reference in new issue