TRI-283: end header + start adaptive 1400>
This commit is contained in:
@@ -2,7 +2,6 @@
|
||||
margin: 0 auto;
|
||||
width: 1280px;
|
||||
position: relative;
|
||||
min-height: 695px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
@@ -11,11 +10,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
/*@media (max-width: 1019.98px) {*/
|
||||
/* .container {*/
|
||||
/* width: 720px*/
|
||||
/* }*/
|
||||
/*}*/
|
||||
@media (max-width: 1304.98px) {
|
||||
.container {
|
||||
width: 1120px;
|
||||
max-width: 88vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.container {
|
||||
width: 640px;
|
||||
}
|
||||
}
|
||||
|
||||
/*@media (max-width: 767.98px) {*/
|
||||
/* .container {*/
|
||||
/* margin: 0 15px;*/
|
||||
@@ -36,6 +43,10 @@
|
||||
color: var(--color-black2);
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 700;
|
||||
}
|
||||
@@ -128,6 +139,19 @@ b {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.title {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.title {
|
||||
font-size: 32px;
|
||||
line-height: 38.73px;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-bottom: 81px;
|
||||
line-height: 22px;
|
||||
@@ -140,12 +164,18 @@ b {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.subtitle {
|
||||
margin-bottom: 71px;
|
||||
}
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hide__xxl {
|
||||
display: block;
|
||||
display: initial;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
@@ -154,6 +184,16 @@ b {
|
||||
}
|
||||
}
|
||||
|
||||
.hide__md {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.hide__md {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.show__xxl {
|
||||
display: none;
|
||||
}
|
||||
@@ -164,17 +204,136 @@ b {
|
||||
}
|
||||
}
|
||||
|
||||
.show__md {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.show__md {
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.br--xxl {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.br--md {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.is-container.wrapper_main {
|
||||
max-width: initial;
|
||||
}
|
||||
.br--xxl {
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-top: 0;
|
||||
position: relative;
|
||||
padding: 40px 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.header {
|
||||
padding-top: 19px;
|
||||
padding-bottom: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.header__grid, .header__list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.header__logo {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
position: relative;
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.header__logo {
|
||||
left: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.header__logo {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.header__nav {
|
||||
flex-grow: 1;
|
||||
max-width: 41%;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.header__nav {
|
||||
max-width: 34%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.header__nav {
|
||||
max-width: 46%;
|
||||
}
|
||||
}
|
||||
|
||||
.header__link {
|
||||
color: var(--color-black2);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.header__btn {
|
||||
padding: 8px 0 6px;
|
||||
font-size: 16px;
|
||||
margin-left: 61px;
|
||||
margin-right: -3px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.header__btn {
|
||||
margin-left: 81px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.header__btn {
|
||||
margin-right: -8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.header__btn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.header .dropdown {
|
||||
left: -4px;
|
||||
}
|
||||
|
||||
.header .dropdown-content {
|
||||
right: 0;
|
||||
height: initial;
|
||||
}
|
||||
|
||||
.header .dropdown img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.presentation {
|
||||
margin: 20px -65px 140px;
|
||||
margin: 12px -65px 140px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
@@ -185,6 +344,18 @@ b {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.presentation {
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.presentation {
|
||||
margin-bottom: 105px;
|
||||
}
|
||||
}
|
||||
|
||||
.presentation__top {
|
||||
position: relative;
|
||||
min-height: 270px;
|
||||
@@ -205,19 +376,65 @@ b {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.presentation__top {
|
||||
background-size: 16%, 20%, 9.5%, 10.1%;
|
||||
background-position: top -2.8% left 6.5%, top -19% right 3.5%, bottom 32% left 23%, bottom 29% right 22.6%;
|
||||
margin-bottom: 96px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.presentation__top {
|
||||
background-size: 14.5%, 17%, 8.3%, 9.1%;
|
||||
background-position: top 9% left 7%, top 5% right 6%, bottom 51% left 14.8%, bottom 47.5% right 13.8%;
|
||||
padding-top: 31px;
|
||||
margin-bottom: 76px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.presentation__bottom .subtitle {
|
||||
max-width: 40%;
|
||||
margin: 0 auto 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.presentation__title {
|
||||
margin-bottom: 23px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.presentation__title {
|
||||
max-width: 75%;
|
||||
margin: 0 auto 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.presentation__subtitle {
|
||||
margin-bottom: 41px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.presentation__subtitle {
|
||||
max-width: 55%;
|
||||
margin: 0 auto 40px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.presentation__btn {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.presentation__btn {
|
||||
padding-left: 82px;
|
||||
padding-right: 82px;
|
||||
}
|
||||
}
|
||||
|
||||
.presentation__next {
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
@@ -242,6 +459,12 @@ b {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.presentation__cards {
|
||||
max-width: 1140px;
|
||||
}
|
||||
}
|
||||
|
||||
.presentation__bottom .presentation__title {
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
@@ -276,9 +499,10 @@ b {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cards__img:hover {
|
||||
scale: 1.05;
|
||||
transition: scale 0.15s linear;
|
||||
@media (max-width: 991.98px) {
|
||||
.cards__item {
|
||||
max-width: 270px;
|
||||
}
|
||||
}
|
||||
|
||||
.cards__img {
|
||||
@@ -292,6 +516,17 @@ b {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.cards__img {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.cards__img:hover {
|
||||
scale: 1.05;
|
||||
transition: scale 0.15s linear;
|
||||
}
|
||||
|
||||
.cards__desc {
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
@@ -306,6 +541,21 @@ b {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1279.98px) {
|
||||
.cards__desc {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.cards__desc {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.cards__desc a {
|
||||
color: var(--color-orange);
|
||||
}
|
||||
@@ -326,6 +576,49 @@ b {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.cards__arrow {
|
||||
top: -8%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.cards__arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cards .slick-list {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.slick-dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding: 1rem 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.slick-dots li {
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
|
||||
.slick-dots button {
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 100%;
|
||||
background-color: #D9D9D9;
|
||||
text-indent: -9999px;
|
||||
}
|
||||
|
||||
.slick-dots li.slick-active button {
|
||||
background-color: var(--color-orange);
|
||||
}
|
||||
|
||||
.easy {
|
||||
margin-bottom: 162px;
|
||||
}
|
||||
@@ -336,6 +629,18 @@ b {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.easy {
|
||||
margin-bottom: 142px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.easy {
|
||||
margin-bottom: 121px;
|
||||
}
|
||||
}
|
||||
|
||||
.easy .title {
|
||||
max-width: 55%;
|
||||
margin-bottom: 21px;
|
||||
@@ -348,6 +653,12 @@ b {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.easy .title {
|
||||
max-width: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
.easy .subtitle {
|
||||
margin-bottom: 41px;
|
||||
}
|
||||
@@ -377,6 +688,21 @@ b {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.easy__grid {
|
||||
grid-column-gap: 69px;
|
||||
grid-template-rows: repeat(2, minmax(172px, auto));
|
||||
margin-bottom: 41px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.easy__grid {
|
||||
display: block;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.easy__item {
|
||||
border-radius: 30px;
|
||||
background-color: var(--color-grey);
|
||||
@@ -400,6 +726,20 @@ b {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.easy__item--fir {
|
||||
margin-right: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.easy__item--fir {
|
||||
padding-top: 17px;
|
||||
margin-right: 0;
|
||||
margin-bottom: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.easy__item--fir p {
|
||||
width: 93%;
|
||||
margin-bottom: 29px;
|
||||
@@ -412,24 +752,29 @@ b {
|
||||
}
|
||||
}
|
||||
|
||||
.easy__item--thr {
|
||||
grid-area: c;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.easy__item--sec {
|
||||
grid-area: b;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.easy__item--sec {
|
||||
padding-top: 35px;
|
||||
padding-bottom: 37px;
|
||||
margin-bottom: 39px;
|
||||
}
|
||||
}
|
||||
|
||||
.easy__item--sec img {
|
||||
margin-bottom: -10px;
|
||||
margin-right: -5px;
|
||||
max-width: 50.1%;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
@@ -438,13 +783,78 @@ b {
|
||||
}
|
||||
}
|
||||
|
||||
.easy__item--thr img {
|
||||
@media (max-width: 1304.98px) {
|
||||
.easy__item--sec img {
|
||||
max-width: 43.1%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.easy__item--sec img {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.easy__item--sec p {
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.easy__item--thr {
|
||||
grid-area: c;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.easy__item--thr {
|
||||
padding-top: 42px;
|
||||
padding-bottom: 46px;
|
||||
}
|
||||
}
|
||||
|
||||
.easy__item--thr .img {
|
||||
margin-bottom: -10px;
|
||||
margin-right: 24px;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
@media (max-width: 1279.98px) {
|
||||
.easy__item--thr .img {
|
||||
max-width: 35%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.easy__item--thr .img {
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.easy__item--thr .img {
|
||||
margin-right: 0;
|
||||
max-width: 34%;
|
||||
}
|
||||
}
|
||||
|
||||
.easy__item--thr p {
|
||||
max-width: 50%;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.easy__item--thr p {
|
||||
max-width: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.easy__arrow {
|
||||
@@ -461,6 +871,18 @@ b {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.easy__arrow {
|
||||
scale: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.easy__arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.easy__arrow--fir {
|
||||
top: 46%;
|
||||
right: 101%;
|
||||
@@ -473,6 +895,12 @@ b {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.easy__arrow--fir {
|
||||
top: 48%;
|
||||
}
|
||||
}
|
||||
|
||||
.easy__arrow--sec {
|
||||
top: 117%;
|
||||
left: 30%;
|
||||
@@ -486,17 +914,22 @@ b {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.easy__arrow--sec {
|
||||
left: 38%;
|
||||
}
|
||||
}
|
||||
|
||||
.easy__btn {
|
||||
margin-top: -21px;
|
||||
}
|
||||
|
||||
.easy__item--sec p,
|
||||
.easy__item--thr p,
|
||||
.easy__item--sec,
|
||||
.easy__item--thr {
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
@media (max-width: 991.98px) {
|
||||
.easy__btn {
|
||||
margin-top: -26px;
|
||||
padding-left: 54px;
|
||||
padding-right: 54px;
|
||||
}
|
||||
}
|
||||
|
||||
.chatterbox {
|
||||
@@ -537,6 +970,14 @@ b {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.chatterbox__slide {
|
||||
width: 300px;
|
||||
height: 615px;
|
||||
background-size: 300px 615px;
|
||||
}
|
||||
}
|
||||
|
||||
.chatterbox__slide.loaded video {
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -647,6 +1088,12 @@ b {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.chatterbox__vbox {
|
||||
height: 530px;
|
||||
}
|
||||
}
|
||||
|
||||
.chatterbox .title {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
@@ -684,6 +1131,18 @@ b {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.use {
|
||||
margin-bottom: 145px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.use {
|
||||
margin-bottom: 121px;
|
||||
}
|
||||
}
|
||||
|
||||
.use__img {
|
||||
width: 67.5%;
|
||||
margin-left: 16px;
|
||||
@@ -694,6 +1153,21 @@ b {
|
||||
.use__img {
|
||||
width: 50.2%;
|
||||
margin-left: 27px;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.use__img {
|
||||
width: 77%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.use__img {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -719,13 +1193,19 @@ b {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.use .title {
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
.use--lett {
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.use--lett {
|
||||
margin-bottom: 140px;
|
||||
margin-bottom: 135px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -746,8 +1226,15 @@ b {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.use .h3 {
|
||||
max-width: 75%;
|
||||
margin: 0 auto 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.diff {
|
||||
margin-bottom: 166px;
|
||||
margin-bottom: 168px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
@@ -756,6 +1243,12 @@ b {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.diff {
|
||||
margin-bottom: 125px;
|
||||
}
|
||||
}
|
||||
|
||||
.diff .title {
|
||||
width: 60%;
|
||||
margin-bottom: 65px;
|
||||
@@ -768,6 +1261,20 @@ b {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.diff .title {
|
||||
width: 73%;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.diff .title {
|
||||
width: 90%;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.diff__grid {
|
||||
display: flex;
|
||||
position: relative;
|
||||
@@ -786,14 +1293,38 @@ b {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.diff__grid::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.diff__grid {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.diff__coll {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.diff__coll {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.diff__coll.left {
|
||||
margin-right: 29px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.diff__coll.left {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.diff__coll.left .diff__coll-title {
|
||||
padding-left: 39px;
|
||||
}
|
||||
@@ -804,10 +1335,23 @@ b {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.diff__coll.left .diff__coll-title {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.diff__coll.right {
|
||||
margin-left: 29px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.diff__coll.right {
|
||||
margin-left: 0;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.diff__coll.right .diff__coll-title {
|
||||
padding-right: 39px;
|
||||
}
|
||||
@@ -818,10 +1362,22 @@ b {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.diff__coll.right .diff__coll-title {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.diff__coll-title {
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.diff__coll-title {
|
||||
margin-bottom: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.diff__item {
|
||||
position: relative;
|
||||
text-align: left;
|
||||
@@ -850,6 +1406,14 @@ b {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.diff__item {
|
||||
font-size: 18px;
|
||||
margin-bottom: 25px;
|
||||
padding-bottom: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
.diff__item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@@ -872,6 +1436,12 @@ b {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.diff__status {
|
||||
border-radius: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
.diff__status::before {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
@@ -1113,7 +1683,7 @@ b {
|
||||
}
|
||||
|
||||
.uses {
|
||||
margin-bottom: 122px;
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
@@ -1132,7 +1702,7 @@ b {
|
||||
|
||||
.uses__item {
|
||||
min-height: 50px;
|
||||
margin-bottom: 43px;
|
||||
margin-bottom: 19px;
|
||||
padding: 0 50px 0 2px;
|
||||
}
|
||||
|
||||
@@ -1161,6 +1731,7 @@ b {
|
||||
|
||||
.sore {
|
||||
margin-bottom: 160px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
|
||||
@@ -7,9 +7,10 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cards__img:hover {
|
||||
scale: 1.05;
|
||||
transition: scale 0.15s linear;
|
||||
@media (max-width: 991.98px) {
|
||||
.cards__item {
|
||||
max-width: 270px;
|
||||
}
|
||||
}
|
||||
|
||||
.cards__img {
|
||||
@@ -23,6 +24,17 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.cards__img {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.cards__img:hover {
|
||||
scale: 1.05;
|
||||
transition: scale 0.15s linear;
|
||||
}
|
||||
|
||||
.cards__desc {
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
@@ -37,6 +49,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1279.98px) {
|
||||
.cards__desc {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.cards__desc {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.cards__desc a {
|
||||
color: var(--color-orange);
|
||||
}
|
||||
@@ -56,3 +83,46 @@
|
||||
top: -29px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.cards__arrow {
|
||||
top: -8%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.cards__arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cards .slick-list {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.slick-dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding: 1rem 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.slick-dots li {
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
|
||||
.slick-dots button {
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 100%;
|
||||
background-color: #D9D9D9;
|
||||
text-indent: -9999px;
|
||||
}
|
||||
|
||||
.slick-dots li.slick-active button {
|
||||
background-color: var(--color-orange);
|
||||
}
|
||||
|
||||
@@ -36,6 +36,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.chatterbox__slide {
|
||||
width: 300px;
|
||||
height: 615px;
|
||||
background-size: 300px 615px;
|
||||
}
|
||||
}
|
||||
|
||||
.chatterbox__slide.loaded video {
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -146,6 +154,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.chatterbox__vbox {
|
||||
height: 530px;
|
||||
}
|
||||
}
|
||||
|
||||
.chatterbox .title {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.diff {
|
||||
margin-bottom: 166px;
|
||||
margin-bottom: 168px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
@@ -8,6 +8,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.diff {
|
||||
margin-bottom: 125px;
|
||||
}
|
||||
}
|
||||
|
||||
.diff .title {
|
||||
width: 60%;
|
||||
margin-bottom: 65px;
|
||||
@@ -20,6 +26,20 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.diff .title {
|
||||
width: 73%;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.diff .title {
|
||||
width: 90%;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.diff__grid {
|
||||
display: flex;
|
||||
position: relative;
|
||||
@@ -38,14 +58,38 @@
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.diff__grid::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.diff__grid {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.diff__coll {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.diff__coll {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.diff__coll.left {
|
||||
margin-right: 29px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.diff__coll.left {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.diff__coll.left .diff__coll-title {
|
||||
padding-left: 39px;
|
||||
}
|
||||
@@ -56,10 +100,23 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.diff__coll.left .diff__coll-title {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.diff__coll.right {
|
||||
margin-left: 29px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.diff__coll.right {
|
||||
margin-left: 0;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.diff__coll.right .diff__coll-title {
|
||||
padding-right: 39px;
|
||||
}
|
||||
@@ -70,10 +127,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.diff__coll.right .diff__coll-title {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.diff__coll-title {
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.diff__coll-title {
|
||||
margin-bottom: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.diff__item {
|
||||
position: relative;
|
||||
text-align: left;
|
||||
@@ -102,6 +171,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.diff__item {
|
||||
font-size: 18px;
|
||||
margin-bottom: 25px;
|
||||
padding-bottom: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
.diff__item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@@ -124,6 +201,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.diff__status {
|
||||
border-radius: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
.diff__status::before {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
|
||||
@@ -8,6 +8,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.easy {
|
||||
margin-bottom: 142px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.easy {
|
||||
margin-bottom: 121px;
|
||||
}
|
||||
}
|
||||
|
||||
.easy .title {
|
||||
max-width: 55%;
|
||||
margin-bottom: 21px;
|
||||
@@ -20,6 +32,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.easy .title {
|
||||
max-width: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
.easy .subtitle {
|
||||
margin-bottom: 41px;
|
||||
}
|
||||
@@ -49,6 +67,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.easy__grid {
|
||||
grid-column-gap: 69px;
|
||||
grid-template-rows: repeat(2, minmax(172px, auto));
|
||||
margin-bottom: 41px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.easy__grid {
|
||||
display: block;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.easy__item {
|
||||
border-radius: 30px;
|
||||
background-color: var(--color-grey);
|
||||
@@ -72,6 +105,20 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.easy__item--fir {
|
||||
margin-right: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.easy__item--fir {
|
||||
padding-top: 17px;
|
||||
margin-right: 0;
|
||||
margin-bottom: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.easy__item--fir p {
|
||||
width: 93%;
|
||||
margin-bottom: 29px;
|
||||
@@ -84,24 +131,29 @@
|
||||
}
|
||||
}
|
||||
|
||||
.easy__item--thr {
|
||||
grid-area: c;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.easy__item--sec {
|
||||
grid-area: b;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.easy__item--sec {
|
||||
padding-top: 35px;
|
||||
padding-bottom: 37px;
|
||||
margin-bottom: 39px;
|
||||
}
|
||||
}
|
||||
|
||||
.easy__item--sec img {
|
||||
margin-bottom: -10px;
|
||||
margin-right: -5px;
|
||||
max-width: 50.1%;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
@@ -110,13 +162,78 @@
|
||||
}
|
||||
}
|
||||
|
||||
.easy__item--thr img {
|
||||
@media (max-width: 1304.98px) {
|
||||
.easy__item--sec img {
|
||||
max-width: 43.1%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.easy__item--sec img {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.easy__item--sec p {
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.easy__item--thr {
|
||||
grid-area: c;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.easy__item--thr {
|
||||
padding-top: 42px;
|
||||
padding-bottom: 46px;
|
||||
}
|
||||
}
|
||||
|
||||
.easy__item--thr .img {
|
||||
margin-bottom: -10px;
|
||||
margin-right: 24px;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
@media (max-width: 1279.98px) {
|
||||
.easy__item--thr .img {
|
||||
max-width: 35%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.easy__item--thr .img {
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.easy__item--thr .img {
|
||||
margin-right: 0;
|
||||
max-width: 34%;
|
||||
}
|
||||
}
|
||||
|
||||
.easy__item--thr p {
|
||||
max-width: 50%;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.easy__item--thr p {
|
||||
max-width: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.easy__arrow {
|
||||
@@ -133,6 +250,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.easy__arrow {
|
||||
scale: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.easy__arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.easy__arrow--fir {
|
||||
top: 46%;
|
||||
right: 101%;
|
||||
@@ -145,6 +274,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.easy__arrow--fir {
|
||||
top: 48%;
|
||||
}
|
||||
}
|
||||
|
||||
.easy__arrow--sec {
|
||||
top: 117%;
|
||||
left: 30%;
|
||||
@@ -158,15 +293,20 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.easy__arrow--sec {
|
||||
left: 38%;
|
||||
}
|
||||
}
|
||||
|
||||
.easy__btn {
|
||||
margin-top: -21px;
|
||||
}
|
||||
|
||||
.easy__item--sec p,
|
||||
.easy__item--thr p,
|
||||
.easy__item--sec,
|
||||
.easy__item--thr {
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
@media (max-width: 991.98px) {
|
||||
.easy__btn {
|
||||
margin-top: -26px;
|
||||
padding-left: 54px;
|
||||
padding-right: 54px;
|
||||
}
|
||||
}
|
||||
|
||||
99
static/css/moover/header.css
Normal file
99
static/css/moover/header.css
Normal file
@@ -0,0 +1,99 @@
|
||||
.header {
|
||||
margin-top: 0;
|
||||
position: relative;
|
||||
padding: 40px 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.header {
|
||||
padding-top: 19px;
|
||||
padding-bottom: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.header__grid, .header__list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.header__logo {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
position: relative;
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.header__logo {
|
||||
left: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.header__logo {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.header__nav {
|
||||
flex-grow: 1;
|
||||
max-width: 41%;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.header__nav {
|
||||
max-width: 34%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.header__nav {
|
||||
max-width: 46%;
|
||||
}
|
||||
}
|
||||
|
||||
.header__link {
|
||||
color: var(--color-black2);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.header__btn {
|
||||
padding: 8px 0 6px;
|
||||
font-size: 16px;
|
||||
margin-left: 61px;
|
||||
margin-right: -3px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.header__btn {
|
||||
margin-left: 81px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.header__btn {
|
||||
margin-right: -8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.header__btn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.header .dropdown {
|
||||
left: -4px;
|
||||
}
|
||||
|
||||
.header .dropdown-content {
|
||||
right: 0;
|
||||
height: initial;
|
||||
}
|
||||
|
||||
.header .dropdown img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
.presentation {
|
||||
margin: 20px -65px 140px;
|
||||
margin: 12px -65px 140px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
@@ -10,6 +10,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.presentation {
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.presentation {
|
||||
margin-bottom: 105px;
|
||||
}
|
||||
}
|
||||
|
||||
.presentation__top {
|
||||
position: relative;
|
||||
min-height: 270px;
|
||||
@@ -30,19 +42,65 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.presentation__top {
|
||||
background-size: 16%, 20%, 9.5%, 10.1%;
|
||||
background-position: top -2.8% left 6.5%, top -19% right 3.5%, bottom 32% left 23%, bottom 29% right 22.6%;
|
||||
margin-bottom: 96px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.presentation__top {
|
||||
background-size: 14.5%, 17%, 8.3%, 9.1%;
|
||||
background-position: top 9% left 7%, top 5% right 6%, bottom 51% left 14.8%, bottom 47.5% right 13.8%;
|
||||
padding-top: 31px;
|
||||
margin-bottom: 76px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.presentation__bottom .subtitle {
|
||||
max-width: 40%;
|
||||
margin: 0 auto 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.presentation__title {
|
||||
margin-bottom: 23px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.presentation__title {
|
||||
max-width: 75%;
|
||||
margin: 0 auto 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.presentation__subtitle {
|
||||
margin-bottom: 41px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.presentation__subtitle {
|
||||
max-width: 55%;
|
||||
margin: 0 auto 40px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.presentation__btn {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.presentation__btn {
|
||||
padding-left: 82px;
|
||||
padding-right: 82px;
|
||||
}
|
||||
}
|
||||
|
||||
.presentation__next {
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
@@ -67,6 +125,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.presentation__cards {
|
||||
max-width: 1140px;
|
||||
}
|
||||
}
|
||||
|
||||
.presentation__bottom .presentation__title {
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
margin: 0 auto;
|
||||
width: 1280px;
|
||||
position: relative;
|
||||
min-height: 695px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
@@ -11,11 +10,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
/*@media (max-width: 1019.98px) {*/
|
||||
/* .container {*/
|
||||
/* width: 720px*/
|
||||
/* }*/
|
||||
/*}*/
|
||||
@media (max-width: 1304.98px) {
|
||||
.container {
|
||||
width: 1120px;
|
||||
max-width: 88vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.container {
|
||||
width: 640px;
|
||||
}
|
||||
}
|
||||
|
||||
/*@media (max-width: 767.98px) {*/
|
||||
/* .container {*/
|
||||
/* margin: 0 15px;*/
|
||||
@@ -36,6 +43,10 @@
|
||||
color: var(--color-black2);
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 700;
|
||||
}
|
||||
@@ -128,6 +139,19 @@ b {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.title {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.title {
|
||||
font-size: 32px;
|
||||
line-height: 38.73px;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-bottom: 81px;
|
||||
line-height: 22px;
|
||||
@@ -140,12 +164,18 @@ b {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.subtitle {
|
||||
margin-bottom: 71px;
|
||||
}
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hide__xxl {
|
||||
display: block;
|
||||
display: initial;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
@@ -154,6 +184,16 @@ b {
|
||||
}
|
||||
}
|
||||
|
||||
.hide__md {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.hide__md {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.show__xxl {
|
||||
display: none;
|
||||
}
|
||||
@@ -164,11 +204,30 @@ b {
|
||||
}
|
||||
}
|
||||
|
||||
.show__md {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.show__md {
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.br--xxl {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.br--md {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.is-container.wrapper_main {
|
||||
max-width: initial;
|
||||
}
|
||||
.br--xxl {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
.sore {
|
||||
margin-bottom: 160px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
|
||||
@@ -8,6 +8,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.use {
|
||||
margin-bottom: 145px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.use {
|
||||
margin-bottom: 121px;
|
||||
}
|
||||
}
|
||||
|
||||
.use__img {
|
||||
width: 67.5%;
|
||||
margin-left: 16px;
|
||||
@@ -18,6 +30,21 @@
|
||||
.use__img {
|
||||
width: 50.2%;
|
||||
margin-left: 27px;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.use__img {
|
||||
width: 77%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.use__img {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -43,13 +70,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.use .title {
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
.use--lett {
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.use--lett {
|
||||
margin-bottom: 140px;
|
||||
margin-bottom: 135px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -69,3 +102,10 @@
|
||||
width: initial;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.use .h3 {
|
||||
max-width: 75%;
|
||||
margin: 0 auto 22px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.uses {
|
||||
margin-bottom: 122px;
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
@@ -18,7 +18,7 @@
|
||||
|
||||
.uses__item {
|
||||
min-height: 50px;
|
||||
margin-bottom: 43px;
|
||||
margin-bottom: 19px;
|
||||
padding: 0 50px 0 2px;
|
||||
}
|
||||
|
||||
|
||||
BIN
static/img/png/sender-card3-md.png
Normal file
BIN
static/img/png/sender-card3-md.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
static/img/png/use-md.png
Normal file
BIN
static/img/png/use-md.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 231 KiB |
@@ -1,4 +1,5 @@
|
||||
@import "./moover/root";
|
||||
@import "./moover/header";
|
||||
@import "./moover/presentation";
|
||||
@import "./moover/cards";
|
||||
@import "./moover/easy";
|
||||
|
||||
@@ -1,30 +1,37 @@
|
||||
.cards {
|
||||
}
|
||||
|
||||
.cards__list {
|
||||
&__list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
.cards__item {
|
||||
&__item {
|
||||
position: relative;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
max-width: 270px;
|
||||
}
|
||||
}
|
||||
|
||||
.cards__img:hover {
|
||||
scale: 1.05;
|
||||
transition: scale 0.15s linear;
|
||||
}
|
||||
|
||||
.cards__img {
|
||||
&__img {
|
||||
margin-bottom: 5px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.cards__desc {
|
||||
&:hover {
|
||||
scale: 1.05;
|
||||
transition: scale 0.15s linear;
|
||||
}
|
||||
}
|
||||
|
||||
&__desc {
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
|
||||
@@ -35,12 +42,24 @@
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 1279.98px) {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-orange);
|
||||
}
|
||||
}
|
||||
|
||||
.cards__arrow {
|
||||
|
||||
&__arrow {
|
||||
width: 62px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
@@ -52,4 +71,52 @@
|
||||
right: -45px;
|
||||
top: -29px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
top: -8%;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.slick-list {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
margin: 0;
|
||||
padding: 1rem 0;
|
||||
|
||||
list-style-type: none;
|
||||
|
||||
li {
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
padding: 0;
|
||||
|
||||
border: none;
|
||||
border-radius: 100%;
|
||||
background-color: #D9D9D9;
|
||||
|
||||
text-indent: -9999px;
|
||||
}
|
||||
|
||||
li.slick-active button {
|
||||
background-color: var(--color-orange);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -28,6 +28,12 @@
|
||||
background-size: 456px 836px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
width: 300px;
|
||||
height: 615px;
|
||||
background-size: 300px 615px;
|
||||
}
|
||||
|
||||
&.loaded {
|
||||
video {
|
||||
opacity: 1;
|
||||
@@ -132,6 +138,10 @@
|
||||
@media (min-width: 1720px) {
|
||||
height: 827px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
height: 530px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
|
||||
@@ -1,10 +1,14 @@
|
||||
.diff {
|
||||
margin-bottom: 166px;
|
||||
margin-bottom: 168px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
margin-bottom: 172px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
margin-bottom: 125px;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 60%;
|
||||
margin-bottom: 65px;
|
||||
@@ -13,6 +17,16 @@
|
||||
width: 49%;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
width: 73%;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
width: 90%;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
&__grid {
|
||||
@@ -30,33 +44,62 @@
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&__coll {
|
||||
width: 50%;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.left {
|
||||
margin-right: 29px;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.diff__coll-title {
|
||||
padding-left: 39px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
margin-left: 29px;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
margin-left: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.diff__coll-title {
|
||||
padding-right: 39px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -64,6 +107,10 @@
|
||||
|
||||
&__coll-title {
|
||||
margin-bottom: 38px;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
margin-bottom: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
@@ -91,6 +138,12 @@
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
font-size: 18px;
|
||||
margin-bottom: 25px;
|
||||
padding-bottom: 9px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@@ -115,6 +168,10 @@
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
border-radius: 11px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
|
||||
@@ -5,6 +5,15 @@
|
||||
margin-bottom: 180px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
margin-bottom: 142px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
margin-bottom: 121px;
|
||||
}
|
||||
|
||||
|
||||
.title {
|
||||
max-width: 55%;
|
||||
margin-bottom: 21px;
|
||||
@@ -13,6 +22,10 @@
|
||||
max-width: 45%;
|
||||
margin-bottom: 23px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
max-width: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
@@ -40,6 +53,17 @@
|
||||
grid-row-gap: 136px;
|
||||
margin-bottom: 63px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
grid-column-gap: 69px;
|
||||
grid-template-rows: repeat(2, minmax(172px, auto));
|
||||
margin-bottom: 41px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
display: block;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
@@ -61,6 +85,16 @@
|
||||
padding-top: 31px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
margin-right: 13px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
padding-top: 17px;
|
||||
margin-right: 0;
|
||||
margin-bottom: 43px;
|
||||
}
|
||||
|
||||
p {
|
||||
width: 93%;
|
||||
margin-bottom: 29px;
|
||||
@@ -72,38 +106,93 @@
|
||||
}
|
||||
}
|
||||
|
||||
&--thr {
|
||||
grid-area: c;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&--sec {
|
||||
grid-area: b;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
padding-top: 35px;
|
||||
padding-bottom: 37px;
|
||||
|
||||
margin-bottom: 39px;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-bottom: -10px;
|
||||
margin-right: -5px;
|
||||
max-width: 50.1%;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
margin-right: -12px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
max-width: 43.1%;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&--thr img {
|
||||
&--thr {
|
||||
grid-area: c;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
//background-color: #00a420;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
padding-top: 42px;
|
||||
padding-bottom: 46px;
|
||||
}
|
||||
|
||||
.img {
|
||||
margin-bottom: -10px;
|
||||
margin-right: 24px;
|
||||
max-width: 80%;
|
||||
|
||||
@media (max-width: 1279.98px) {
|
||||
max-width: 35%;
|
||||
}
|
||||
|
||||
&--thr p {
|
||||
@media (max-width: 1304.98px) {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
margin-right: 0;
|
||||
max-width: 34%;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 50%;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
max-width: 60%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -118,6 +207,14 @@
|
||||
scale: 1.4;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
scale: 0.8;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&--fir {
|
||||
top: 46%;
|
||||
right: 101%;
|
||||
@@ -126,6 +223,9 @@
|
||||
right: 104%;
|
||||
top: 34%;
|
||||
}
|
||||
@media (max-width: 1304.98px) {
|
||||
top: 48%;
|
||||
}
|
||||
}
|
||||
|
||||
&--sec {
|
||||
@@ -137,19 +237,20 @@
|
||||
left: 46%;
|
||||
top: 124%;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
left: 38%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__btn {
|
||||
margin-top: -21px;
|
||||
}
|
||||
}
|
||||
|
||||
.easy__item--sec p,
|
||||
.easy__item--thr p,
|
||||
.easy__item--sec,
|
||||
.easy__item--thr {
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
@media (max-width: 991.98px) {
|
||||
margin-top: -26px;
|
||||
padding-left: 54px;
|
||||
padding-right: 54px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
89
styles/moover/header.scss
Normal file
89
styles/moover/header.scss
Normal file
@@ -0,0 +1,89 @@
|
||||
.header {
|
||||
margin-top: 0;
|
||||
position: relative;
|
||||
padding: 40px 5px;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
padding-top: 19px;
|
||||
padding-bottom: 19px;
|
||||
}
|
||||
|
||||
&__grid,
|
||||
&__list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__grid {
|
||||
}
|
||||
|
||||
&__logo {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
position: relative;
|
||||
left: 5px;
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
left: 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__nav {
|
||||
flex-grow: 1;
|
||||
max-width: 41%;
|
||||
margin-left: auto;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
max-width: 34%;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
max-width: 46%;
|
||||
}
|
||||
//@media (max-width: 991.98px) {
|
||||
//}
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: var(--color-black2);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
padding: 8px 0 6px;
|
||||
font-size: 16px;
|
||||
margin-left: 61px;
|
||||
margin-right: -3px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
margin-left: 81px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
margin-right: -8px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
left: -4px;
|
||||
|
||||
&-content {
|
||||
right: 0;
|
||||
height: initial;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
.presentation {
|
||||
margin: 20px -65px 140px;
|
||||
margin: 12px -65px 140px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
margin-left: 0;
|
||||
@@ -7,6 +7,14 @@
|
||||
margin-bottom: 160px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
margin-bottom: 105px;
|
||||
}
|
||||
|
||||
&__top {
|
||||
position: relative;
|
||||
min-height: 270px;
|
||||
@@ -35,19 +43,64 @@
|
||||
padding-top: 95px;
|
||||
margin-bottom: 176px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
background-size: 16%, 20%, 9.5%, 10.1%;
|
||||
background-position: top -2.8% left 6.5%,
|
||||
top -19% right 3.5%,
|
||||
bottom 32% left 23%,
|
||||
bottom 29% right 22.6%;
|
||||
margin-bottom: 96px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
background-size: 14.5%, 17%, 8.3%, 9.1%;
|
||||
background-position: top 9% left 7%,
|
||||
top 5% right 6%,
|
||||
bottom 51% left 14.8%,
|
||||
bottom 47.5% right 13.8%;
|
||||
padding-top: 31px;
|
||||
margin-bottom: 76px;
|
||||
}
|
||||
}
|
||||
|
||||
&__bottom {
|
||||
.subtitle {
|
||||
@media (max-width: 991.98px) {
|
||||
max-width: 40%;
|
||||
margin: 0 auto 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-bottom: 23px;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
max-width: 75%;
|
||||
margin: 0 auto 19px;
|
||||
}
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
margin-bottom: 41px;
|
||||
font-weight: 600;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
max-width: 55%;
|
||||
margin: 0 auto 40px;
|
||||
font-size: 16px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&__btn {
|
||||
margin-bottom: 40px;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
padding-left: 82px;
|
||||
padding-right: 82px;
|
||||
}
|
||||
}
|
||||
|
||||
&__next {
|
||||
@@ -70,6 +123,10 @@
|
||||
margin-left: -10px;
|
||||
margin-right: -10px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
max-width: 1140px;
|
||||
}
|
||||
}
|
||||
|
||||
&__bottom .presentation__title {
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
margin: 0 auto;
|
||||
width: 1280px;
|
||||
position: relative;
|
||||
min-height: 695px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
@@ -12,11 +11,19 @@
|
||||
}
|
||||
|
||||
|
||||
/*@media (max-width: 1019.98px) {*/
|
||||
/* .container {*/
|
||||
/* width: 720px*/
|
||||
/* }*/
|
||||
/*}*/
|
||||
@media (max-width: 1304.98px) {
|
||||
.container {
|
||||
width: 1120px;
|
||||
max-width: 88vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.container {
|
||||
width: 640px
|
||||
//max-width: 85vw;
|
||||
}
|
||||
}
|
||||
|
||||
/*@media (max-width: 767.98px) {*/
|
||||
/* .container {*/
|
||||
@@ -41,6 +48,11 @@
|
||||
color: var(--color-black2);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 700;
|
||||
|
||||
@@ -125,6 +137,15 @@ b {
|
||||
font-size: 48px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
font-size: 32px;
|
||||
line-height: 38.73px;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
@@ -135,18 +156,32 @@ b {
|
||||
font-size: 20px;
|
||||
margin-bottom: 105px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
margin-bottom: 71px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
|
||||
&__xxl {
|
||||
display: block;
|
||||
display: initial;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__md {
|
||||
display: initial;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.show {
|
||||
@@ -158,17 +193,33 @@ b {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&__md {
|
||||
display: none;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.br {
|
||||
&--xxl {
|
||||
@media (min-width: 1440px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&--md {
|
||||
@media (max-width: 991.98px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.is-container.wrapper_main {
|
||||
max-width: initial;
|
||||
}
|
||||
|
||||
.br {
|
||||
&--xxl {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
.sore {
|
||||
margin-bottom: 160px;
|
||||
margin-top: 1px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
margin-bottom: 178px;
|
||||
|
||||
@@ -5,6 +5,14 @@
|
||||
margin-bottom: 184px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
margin-bottom: 145px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
margin-bottom: 121px;
|
||||
}
|
||||
|
||||
&__img {
|
||||
width: 67.5%;
|
||||
margin-left: 16px;
|
||||
@@ -13,6 +21,17 @@
|
||||
@media (min-width: 1720px) {
|
||||
width: 50.2%;
|
||||
margin-left: 27px;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
width: 77%;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -34,13 +53,17 @@
|
||||
@media (min-width: 1720px) {
|
||||
max-width: 40%;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
&--lett {
|
||||
margin-bottom: 120px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
margin-bottom: 140px;
|
||||
margin-bottom: 135px;
|
||||
}
|
||||
|
||||
|
||||
@@ -57,6 +80,14 @@
|
||||
@media (min-width: 1720px) {
|
||||
width: initial;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.h3 {
|
||||
@media (max-width: 991.98px) {
|
||||
max-width: 75%;
|
||||
margin: 0 auto 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.uses {
|
||||
margin-bottom: 122px;
|
||||
margin-bottom: 120px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
margin-bottom: 136px;
|
||||
@@ -18,7 +18,7 @@
|
||||
|
||||
&__item {
|
||||
min-height: 50px;
|
||||
margin-bottom: 43px;
|
||||
margin-bottom: 19px;
|
||||
padding: 0 50px 0 2px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
|
||||
@@ -3,24 +3,50 @@
|
||||
{% load webpush_notifications %}
|
||||
|
||||
</div>
|
||||
<header id="header_bg" class="header">
|
||||
<header class="header">
|
||||
<div class="header__grid container">
|
||||
<div class="header__logo">
|
||||
|
||||
<a href="{% url 'main' %}">
|
||||
<img class="svg" src="/static/img/png/finlogo.png">
|
||||
</a>
|
||||
</div>
|
||||
<nav class="header__nav">
|
||||
|
||||
|
||||
<nav class="header__nav hide__md">
|
||||
<ul class="header__list">
|
||||
<li class="header__item">
|
||||
<a href="#benefits" class="header__link">Преимущества</a>
|
||||
<a href="#benefits" class="header__link">{% trans "Преимущества" %}</a>
|
||||
</li>
|
||||
<li class="header__item">
|
||||
<a href="#rewiews" class="header__link">Отзывы</a>
|
||||
<a href="#rewiews" class="header__link">{% trans "Отзывы" %}</a>
|
||||
</li>
|
||||
<li class="header__item">
|
||||
<a href="#howtowork" class="header__link">Как это работает</a>
|
||||
<a href="#howtowork" class="header__link">{% trans "Как это работает" %}</a>
|
||||
</li>
|
||||
<li class="header__item">
|
||||
<a href="#about" class="header__link">О сервисе</a>
|
||||
<a href="#about" class="header__link">{% trans "О сервисе" %}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<a
|
||||
class="header__btn btn btn--primary hide--md"
|
||||
onclick="ym(97070898,'reachGoal','reg_button_header'); return true"
|
||||
href="{% url "registration_page" %}">
|
||||
{% trans "Регистрируйся" %}
|
||||
</a>
|
||||
<div class="dropdown show__md">
|
||||
<img onclick="showMenu(this, event)" class="dropbtn" src="/static/img/svg/Menu.svg">
|
||||
<div
|
||||
onblur="hideMenu(event)"
|
||||
class="dropdown-content"
|
||||
>
|
||||
<a href="#benefits" class="header__link">{% trans "Преимущества" %}</a>
|
||||
<a href="#rewiews" class="header__link">{% trans "Отзывы" %}</a>
|
||||
<a href="#howtowork" class="header__link">{% trans "Как это работает" %}</a>
|
||||
<a href="#about" class="header__link">{% trans "О сервисе" %}</a>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
@@ -48,7 +48,7 @@
|
||||
<img class="cards__img" src="{% static "img/webp/image1.webp" %}" alt="img1"/>
|
||||
<p class="cards__desc">
|
||||
{% translate "Мария, хочет отправить<br class='br--xxl'/> посылку, но её не устраивает<br class='br--xxl'/> цена доставки почтовых<br class='br1'/>" %}
|
||||
{% translate "сервисов и она устала искать в<br class='br--xxl'/> чатах тех, кто сможет перевезти<br class='br--xxl'/> посылку." %}
|
||||
{% translate "сервисов и она устала искать в<br class='br--xxl'/> чатах тех, кто сможет перевезти<br class='br--xxl br--md'/> посылку." %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="cards__item">
|
||||
@@ -76,6 +76,61 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
var timer = 0;
|
||||
var cards = $('.cards');
|
||||
var list = $('.cards__list');
|
||||
var items = $('.cards__item');
|
||||
if (!cards.length && !list.length && !items.length) {
|
||||
return false;
|
||||
}
|
||||
|
||||
function checkAdaptive() {
|
||||
if (window.innerWidth <= 1000) {
|
||||
console.log('init check')
|
||||
initStagesSlider();
|
||||
} else {
|
||||
console.log('rem')
|
||||
removeSlider();
|
||||
}
|
||||
}
|
||||
|
||||
function removeSlider() {
|
||||
if (list.hasClass('slick-slider')) {
|
||||
list[0].slick.unslick();
|
||||
list[0].slick = null;
|
||||
}
|
||||
list.addClass('js-not-slider');
|
||||
}
|
||||
|
||||
function initStagesSlider() {
|
||||
if (!list[0].slick) {
|
||||
console.log('init')
|
||||
list.slick({
|
||||
autoplay: false,
|
||||
dots: true,
|
||||
arrows: false,
|
||||
infinite: false,
|
||||
variableWidth: true,
|
||||
slidesToScroll: 1,
|
||||
|
||||
touchMove: true,
|
||||
draggable: true,
|
||||
});
|
||||
}
|
||||
list.removeClass('js-not-slider');
|
||||
}
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(() => {
|
||||
checkAdaptive();
|
||||
}, 400);
|
||||
});
|
||||
checkAdaptive();
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</section>
|
||||
<section class="easy">
|
||||
@@ -95,12 +150,16 @@
|
||||
<div class="easy__arrow easy__arrow--fir"></div>
|
||||
<div class="easy__arrow easy__arrow--sec"></div>
|
||||
<p>{% translate "Попутчики видят твое объявление и оставляют отклики на него." %}</p>
|
||||
<img src="{% static 'img/png/sender-card2.png' %}" alt="sender1">
|
||||
<img src="{% static 'img/png/sender-card2.png' %}" alt="sender2">
|
||||
</div>
|
||||
<div class="easy__item easy__item--thr">
|
||||
<p class="hide__xxl">{% translate "Тебе остаётся только выбрать перевозчика, связаться и обсудить детали перевозки." %}</p>
|
||||
<p class="show__xxl">{% translate "Попутчики видят твое объявление и оставляют отклики на него." %}</p>
|
||||
<img src="{% static 'img/png/sender-card3.png' %}" alt="sender1">
|
||||
|
||||
<picture class="img">
|
||||
<source srcset="{% static "img/png/sender-card3.png" %}" media="(min-width: 1439.98px)"/>
|
||||
<img src="{% static 'img/png/sender-card3-md.png' %}" alt="sender3">
|
||||
</picture>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -111,7 +170,10 @@
|
||||
</section>
|
||||
<section class="use">
|
||||
<div class="title">{% translate "Уже пользуются сайтом и находят перевозчиков" %}</div>
|
||||
<img src="{% static "img/webp/use.webp" %}" alt="list users" class="use__img">
|
||||
<picture class="img">
|
||||
<source srcset="{% static "img/webp/use.webp" %}" media="(min-width: 991.98px)"/>
|
||||
<img src="{% static "img/png/use-md.png" %}" alt="list users" class="use__img">
|
||||
</picture>
|
||||
<div class="h3">
|
||||
{% translate "Нужно отправить посылку партнеру, родителям или знакомым?" %}
|
||||
</div>
|
||||
@@ -294,9 +356,6 @@
|
||||
vtns.off('click.load-lazy').on('click.load-lazy', (e) => {
|
||||
const vtn = e.target;
|
||||
vtn.nextElementSibling.querySelector('video');
|
||||
window.d = vtn;
|
||||
{#console.log($(vtn).siblings().find('video')[0]);#}
|
||||
{#console.log(vtn, e.target)#}
|
||||
LazyLoad.load($(vtn).siblings().find('video')[0], {
|
||||
callback_loaded: (e) => callbackLoaded(e, vtn),
|
||||
});
|
||||
@@ -312,32 +371,13 @@
|
||||
$('.slick-slider')
|
||||
.slick({
|
||||
centerMode: true,
|
||||
draggable: false,
|
||||
{#centerPadding: '160px',#}
|
||||
slidesToShow: 3,
|
||||
infinite: false,
|
||||
initialSlide: 1,
|
||||
{#lazyLoad: 'ondemand',#}
|
||||
{#lazyLoad: 'progressive',#}
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
arrows: false,
|
||||
centerMode: true,
|
||||
centerPadding: '40px',
|
||||
slidesToShow: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 480,
|
||||
settings: {
|
||||
arrows: false,
|
||||
centerMode: true,
|
||||
centerPadding: '40px',
|
||||
slidesToShow: 1
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
|
||||
slick.$slides[currentSlide]?.querySelector('video')?.pause();
|
||||
|
||||
@@ -177,8 +177,11 @@ function gtag_report_conversion(url) {
|
||||
{% endif %}
|
||||
<div class="block_overlay {% if page_type == 'profile' %}hidden{% elif page_type == 'routes' %} routes n_profile hidden{% else %}hidden n_profile{% endif %}" onclick="close_open_curtain()"></div>
|
||||
<div class="wrapper_main{% if page.url == "landing_mover" %} is-container{% endif %}">
|
||||
|
||||
{% if page.url == "landing_mover" or page.url == 'landing_customer' %}
|
||||
{% include 'blocks/n_header.html' %}
|
||||
{% else %}
|
||||
{% include 'blocks/b_header.html' %}
|
||||
{% endif %}
|
||||
|
||||
<div class="cut_width_f_curtain close{% if page_type == 'profile' %}{% else %} n_profile{% endif %} right" onclick="reAdressClickOnbackrground(event,this)">
|
||||
<div class="menu_buttons curtain right {% if page_type == 'profile' %}padding_remove {% if not mobile %}open{% else %}close{% endif %}{% else %} n_profile close{% endif %}" data-name="<img style='width: 15px;display: block;position: relative;bottom: 0;transform: rotate(270deg);' src='{% static "/img/svg/burger.svg" %}'>">
|
||||
|
||||
Reference in New Issue
Block a user