diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css index 039df7f..3224e92 100644 --- a/assets/css/gp-style-desktop.css +++ b/assets/css/gp-style-desktop.css @@ -189,4 +189,18 @@ margin-left: 0; } /* footer */ +} + +@media only screen and (min-width: 992px) and (max-width: 1032px) { +.header__main{ + width: 100%; + + justify-content: space-between; +} +.header-main__item{ + margin-left: 0; + + justify-content: space-between; +} + } \ No newline at end of file diff --git a/assets/css/gp-style-mobile.css b/assets/css/gp-style-mobile.css index 4bb2cd0..7ba3bbd 100644 --- a/assets/css/gp-style-mobile.css +++ b/assets/css/gp-style-mobile.css @@ -1,183 +1,31 @@ /* Стили для мобильных устройств */ @media only screen and (max-width: 576px) { -.wrapper{ - width: 100%; -} -.phone--hone{ - display: none; -} - - /* component */ .link{ font-size: 14px; } -/* 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{ padding: 40px 16px; } .footer__wrapper{ + padding: 0; + display: block; } .footer__item{ margin-top: 40px; } +.footer__item:nth-child(2){ + margin-left: 0; +} +.footer__contact .footer__item:nth-child(2), +.footer__contact .footer__item:nth-child(3){ + margin-top: 40px; +} .footer__contact{ display: block; } diff --git a/assets/css/gp-style-tablet.css b/assets/css/gp-style-tablet.css index 32a3ef6..9e66461 100644 --- a/assets/css/gp-style-tablet.css +++ b/assets/css/gp-style-tablet.css @@ -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; +} } \ No newline at end of file