sysadminix/tripwithbonus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

TRI-283: end adaptive 1920 + start header

Browse Source
This commit is contained in:
Artyom Pratsko
2024-11-19 00:25:47 +03:00
parent da6f47f439
commit 4996d02f71
36 changed files with 2118 additions and 384 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
styles/moover.scss
View File

@@ -4,6 +4,7 @@
@import "./moover/easy";
@import "./moover/chatterbox";
@import "./moover/use";
@import "./moover/diff";
@import "./moover/animate";
@import "./moover/about";
@import "./moover/benefits";

92
styles/moover/about.scss
View File

@@ -1,42 +1,70 @@
.about {
margin-bottom: 168px;
}
.about .title {
margin-bottom: 60px;
}
@media (min-width: 1720px) {
margin-bottom: 188px;
}
.about__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.title {
margin-bottom: 60px;
.about__img {
box-shadow: inset 18.19px 1.21px 18.19px 0 #FFFFFFCC,
inset -18.19px -1.21px 18.19px 0 #4052801A,
48.5px 36.38px 36.38px 0 #6B7F9933;
border-radius: 31px;
margin-left: 8px;
margin-top: 8px;
}
@media (min-width: 1720px) {
margin-bottom: 49px;
}
}
.about__right {
text-align: left;
padding-top: 43px;
padding-left: 50px;
}
&__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
.about__half {
max-width: 50%;
float: left;
}
}
.about__half:last-child {
padding-left: 16px;
max-width: 47%;
}
&__img {
box-shadow: inset 18.19px 1.21px 18.19px 0 #FFFFFFCC,
inset -18.19px -1.21px 18.19px 0 #4052801A,
48.5px 36.38px 36.38px 0 #6B7F9933;
border-radius: 31px;
margin-left: -20px;
margin-top: 8px;
.about b {
letter-spacing: 0.4px;
@media (min-width: 1720px) {
margin-top: 19px;
}
}
&__right {
text-align: left;
padding-top: 43px;
padding-left: 50px;
@media (min-width: 1720px) {
padding-top: 90px;
padding-left: 21px;
}
}
&__half {
max-width: 50%;
float: left;
&:last-child {
padding-left: 16px;
max-width: 47%;
}
}
b {
letter-spacing: 0.4px;
@media (min-width: 1720px) {
font-weight: 700;
letter-spacing: 0;
}
}
p {
@media (min-width: 1720px) {
margin-bottom: 39px;
}
}
}

22
styles/moover/animate.scss vendored
View File

@@ -6,12 +6,24 @@
color: white;
margin-bottom: 160px;
@media (min-width: 1720px) {
padding-top: 100px;
padding-bottom: 89px;
margin-bottom: 180px;
}
&.left {
transform: translateX(-180px);
}
&.right {
transform: translateX(180px);
.title {
@media (min-width: 1720px) {
max-width: 80%;
}
}
}
&__link {
@@ -23,10 +35,20 @@
margin-bottom: 25px;
max-width: 87%;
/*width: 90%;*/
@media (min-width: 1720px) {
margin-bottom: 40px;
}
}
.subtitle {
width: 47%;
margin: 0 auto 23px;
@media (min-width: 1720px) {
line-height: 26px;
letter-spacing: 0.1px;
margin-bottom: 40px;
}
}
}

27
styles/moover/benefits.scss
View File

@@ -1,6 +1,10 @@
.benefits {
margin-bottom: 132px;
@media (min-width: 1720px) {
margin-bottom: 147px;
}
&__grid {
text-align: left;
display: grid;
@@ -11,19 +15,42 @@
min-height: 122px;
padding-right: 7px;
margin-bottom: 22px;
@media (min-width: 1720px) {
min-height: 145px;
}
}
&__third {
padding-left: 16px;
@media (min-width: 1720px) {
padding-left: 31px;
margin-right: 5px;
}
}
.title {
margin-bottom: 76px;
@media (min-width: 1720px) {
margin-bottom: 93px;
}
}
img {
position: relative;
top: 14px;
right: -11px;
@media (min-width: 1720px) {
top: -33px;
}
}
h2 {
@media (min-width: 1720px) {
margin-bottom: 10px;
}
}
}

21
styles/moover/cards.scss
View File

@@ -17,11 +17,27 @@
.cards__img {
margin-bottom: 5px;
@media (min-width: 1720px) {
width: 100%;
margin-bottom: 15px;
}
}
.cards__desc {
font-weight: 500;
line-height: 22px;
@media (min-width: 1720px) {
font-size: 20px;
line-height: 26px;
padding-left: 20px;
padding-right: 20px;
}
a {
color: var(--color-orange);
}
}
.cards__arrow {
@@ -31,4 +47,9 @@
right: -30px;
top: -21px;
background-image: url("/static/img/svg/Arrow23.svg");
@media (min-width: 1720px) {
right: -45px;
top: -29px;
}
}

32
styles/moover/chatterbox.scss
View File

@@ -1,9 +1,17 @@
.chatterbox {
margin-bottom: 160px;
@media (min-width: 1720px) {
margin-bottom: 180px;
}
&__slider {
max-width: 1200px;
margin: 0 auto;
@media (min-width: 1720px) {
max-width: 1640px;
}
}
&__slide {
@@ -14,6 +22,12 @@
margin: auto;
position: relative;
@media (min-width: 1720px) {
width: 456px;
height: 836px;
background-size: 456px 836px;
}
&.loaded {
video {
opacity: 1;
@@ -47,6 +61,10 @@
border-radius: 25px;
background-color: grey;
overflow: hidden;
@media (min-width: 1720px) {
border-radius: 50px;
}
}
&__vbtn {
@@ -73,6 +91,11 @@
border: 0;
border-radius: 50%;
transition: opacity 100ms linear;
@media (min-width: 1720px) {
width: 109px;
height: 109px;
}
}
&::before,
@@ -91,6 +114,11 @@
border-width: 15px 0 15px 25px;
display: inline-block;
margin-left: 2px;
@media (min-width: 1720px) {
border-width: 23px 0 23px 35px;
margin-left: 4px;
}
}
}
@@ -100,6 +128,10 @@
justify-content: center;
align-items: center;
height: 600px;
@media (min-width: 1720px) {
height: 827px;
}
}
.title {

154
styles/moover/diff.scss Normal file
View File

@@ -0,0 +1,154 @@
.diff {
margin-bottom: 166px;
@media (min-width: 1720px) {
margin-bottom: 172px;
}
.title {
width: 60%;
margin-bottom: 65px;
@media (min-width: 1720px) {
width: 49%;
margin-bottom: 60px;
}
}
&__grid {
display: flex;
position: relative;
margin-bottom: 30px;
&::before {
content: '';
position: absolute;
height: 96%;
width: 5px;
border-radius: 5px;
background-color: #EDEDED;
left: 50%;
transform: translateX(-50%);
bottom: 0;
}
}
&__coll {
width: 50%;
&.left {
margin-right: 29px;
.diff__coll-title {
padding-left: 39px;
@media (min-width: 1720px) {
padding-left: 24px;
}
}
}
&.right {
margin-left: 29px;
.diff__coll-title {
padding-right: 39px;
@media (min-width: 1720px) {
padding-right: 24px;
}
}
}
}
&__coll-title {
margin-bottom: 38px;
}
&__item {
position: relative;
text-align: left;
padding-left: 10px;
padding-top: 11px;
padding-bottom: 11px;
display: flex;
gap: 11px;
align-items: center;
background-color: #FFFFFF;
border-radius: 15px;
font-weight: 500;
font-size: 20px;
line-height: 28px;
margin-bottom: 35px;
cursor: default;
@media (min-width: 1720px) {
padding-top: 22px;
padding-bottom: 20px;
padding-left: 27px;
gap: 20px;
margin-bottom: 38px;
}
&:last-child {
margin-bottom: 0;
}
&:hover {
.diff__status::before {
scale: 1.2;
}
}
}
&__status {
position: relative;
height: 48px;
width: 48px;
border-radius: 5px;
flex-shrink: 0;
@media (min-width: 1720px) {
border-radius: 12px;
}
&::before {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transform-origin: 0% 15%;
}
&::before {
content: '';
width: 36px;
height: 36px;
}
.diff__item--done & {
background-color: #CCF9D9;
&::before {
width: 26px;
height: 26px;
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyNiAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI0IDJMOS4zMzMzMyAyNEwyIDEzLjAwMDUiIHN0cm9rZT0iIzQ1QzIyNiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)
}
}
.diff__item--error & {
background-color: #F9CCCC;
&::before {
width: 36px;
height: 36px;
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI4LjEyNSA3Ljg3NUw3Ljg3NSAyOC4xMjUiIHN0cm9rZT0iI0ZGMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTI4LjEyNSAyOC4xMjVMNy44NzUgNy44NzUiIHN0cm9rZT0iI0ZGMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)
}
}
}
}

214
styles/moover/easy.scss
View File

@@ -1,64 +1,148 @@
.easy {
margin-bottom: 162px;
}
.easy .title {
max-width: 55%;
margin-bottom: 21px;
}
@media (min-width: 1720px) {
margin-bottom: 180px;
}
.easy .subtitle {
margin-bottom: 41px;
}
.title {
max-width: 55%;
margin-bottom: 21px;
.easy__grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(2, minmax(186px, auto));
grid-template-areas:
@media (min-width: 1720px) {
max-width: 45%;
margin-bottom: 23px;
}
}
.subtitle {
margin-bottom: 41px;
@media (min-width: 1720px) {
margin-bottom: 59px;
}
}
&__grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(2, minmax(186px, auto));
grid-template-areas:
'a b'
'a c';
grid-column-gap: 20px;
grid-row-gap: 80px;
margin-bottom: 46px;
}
grid-column-gap: 20px;
grid-row-gap: 80px;
margin-bottom: 46px;
.easy__item {
border-radius: 30px;
background-color: var(--color-grey);
/*background-color: #a72525;*/
text-align: left;
padding: 21px;
box-shadow: var(--box-shadow-primary);
}
@media (min-width: 1720px) {
grid-column-gap: 147px;
grid-template-rows: repeat(2, minmax(245px, auto));
grid-row-gap: 136px;
margin-bottom: 63px;
}
}
.easy__item--fir {
grid-area: a;
margin-right: 60px;
padding-bottom: 0;
}
&__item {
border-radius: 30px;
background-color: var(--color-grey);
/*background-color: #a72525;*/
text-align: left;
padding: 21px;
box-shadow: var(--box-shadow-primary);
.easy__item--fir p {
width: 93%;
margin-bottom: 29px;
}
&--fir {
grid-area: a;
margin-right: 60px;
padding-bottom: 0;
.easy__item--sec img {
margin-bottom: -10px;
margin-right: -5px;
}
@media (min-width: 1720px) {
margin-right: -10px;
margin-left: 7px;
padding-top: 31px;
}
.easy__item--thr img {
margin-bottom: -10px;
margin-right: 24px;
}
p {
width: 93%;
margin-bottom: 29px;
.easy__item--sec {
grid-area: b;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
@media (min-width: 1720px) {
width: 89%;
margin-bottom: 53px;
}
}
}
&--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;
img {
margin-bottom: -10px;
margin-right: -5px;
@media (min-width: 1720px) {
margin-right: -12px;
}
}
}
&--thr img {
margin-bottom: -10px;
margin-right: 24px;
}
&--thr p {
max-width: 50%;
}
}
&__arrow {
width: 68px;
height: 18px;
background-image: url("/static/img/svg/Arrow08.svg");
position: absolute;
z-index: 1;
@media (min-width: 1720px) {
scale: 1.4;
}
&--fir {
top: 46%;
right: 101%;
@media (min-width: 1720px) {
right: 104%;
top: 34%;
}
}
&--sec {
top: 117%;
left: 30%;
transform: rotate(90deg);
@media (min-width: 1720px) {
left: 46%;
top: 124%;
}
}
}
&__btn {
margin-top: -21px;
}
}
.easy__item--sec p,
@@ -69,37 +153,3 @@
padding-top: 0;
padding-bottom: 0;
}
.easy__item--thr {
grid-area: c;
display: flex;
align-items: center;
justify-content: space-between;
}
.easy__item--thr p {
max-width: 50%;
}
.easy__arrow {
width: 68px;
height: 18px;
background-image: url("/static/img/svg/Arrow08.svg");
position: absolute;
z-index: 1;
}
.easy__arrow--fir {
top: 46%;
right: 101%;
}
.easy__arrow--sec {
top: 117%;
left: 30%;
transform: rotate(90deg);
}
.easy__btn {
margin-top: -21px;
}

117
styles/moover/presentation.scss
View File

@@ -4,61 +4,77 @@
@media (min-width: 1720px) {
margin-left: 0;
margin-right: 0;
margin-bottom: 160px;
}
}
.presentation__top {
position: relative;
min-height: 270px;
margin: 0 auto 116px;
padding: 29px 0 40px;
background-image: url(/static/img/png/Box9.png),
url(/static/img/png/Box10.png),
url(/static/img/png/Box11.png),
url(/static/img/png/Box12.png);
background-position: top -4px left 46px,
top -30px right -14px,
bottom 73px left 278px,
bottom 71px right 276px;
background-repeat: no-repeat,
no-repeat,
no-repeat,
no-repeat;
background-size: 17.5%,21.8%,8.5%,8.8%;
&__top {
position: relative;
min-height: 270px;
margin: 0 auto 116px;
padding: 29px 0 40px;
background-image: url(/static/img/png/Box9.png),
url(/static/img/png/Box10.png),
url(/static/img/png/Box11.png),
url(/static/img/png/Box12.png);
background-position: top -4px left 46px,
top -30px right -14px,
bottom 73px left 278px,
bottom 71px right 276px;
background-repeat: no-repeat,
no-repeat,
no-repeat,
no-repeat;
background-size: 17.5%, 21.8%, 8.5%, 8.8%;
@media (min-width: 1720px) {
background-size: 18.5%, 22%, 9%, 10.1%;
background-position: top -47px left 58px,
top -31px right 20px,
bottom 8px left 347px,
bottom -5px right 352px;
padding-top: 95px;
margin-bottom: 176px;
@media (min-width: 1720px) {
background-size: 18.5%, 22%, 9%, 10.1%;
background-position: top -47px left 58px,
top -31px right 20px,
bottom 8px left 347px,
bottom -5px right 352px;
padding-top: 95px;
margin-bottom: 176px;
}
}
}
.presentation__title {
margin-bottom: 23px;
}
&__title {
margin-bottom: 23px;
}
.presentation__subtitle {
margin-bottom: 41px;
font-weight: 600;
}
&__subtitle {
margin-bottom: 41px;
font-weight: 600;
}
.presentation__btn {
margin-bottom: 40px;
}
&__btn {
margin-bottom: 40px;
}
.presentation__next {
font-weight: 500;
line-height: 22px;
padding-right: 5px;
}
&__next {
font-weight: 500;
line-height: 22px;
padding-right: 5px;
}
.presentation__arrows {
padding-top: 2px;
animation: jump 2s ease-in-out infinite;
&__arrows {
padding-top: 2px;
animation: jump 2s ease-in-out infinite;
}
&__cards {
max-width: 1300px;
margin: 0 auto;
@media (min-width: 1720px) {
max-width: initial;
margin-left: -10px;
margin-right: -10px;
}
}
&__bottom .presentation__title {
margin-bottom: 13px;
}
}
@keyframes jump {
@@ -81,12 +97,3 @@
transform: translateY(0px);
}
}
.presentation__bottom .presentation__title {
margin-bottom: 13px;
}
.presentation__cards {
max-width: 1300px;
margin: 0 auto;
}

50
styles/moover/root.scss
View File

@@ -60,6 +60,11 @@ h2, .h2 {
font-size: 24px;
line-height: 36px;
margin-bottom: 10px;
@media (min-width: 1720px) {
font-size: 28px;
margin-bottom: 20px;
}
}
h3, .h3 {
@@ -77,6 +82,11 @@ h4, .h4 {
p {
line-height: 22px;
margin-bottom: 20px;
@media (min-width: 1720px) {
font-size: 20px;
line-height: 26px;
}
}
b {
@@ -111,9 +121,9 @@ b {
margin-left: auto;
margin-right: auto;
@media (min-width: 1720px) {
font-size: 44px;
margin-bottom: 22px;
@media (min-width: 1720px) {
font-size: 48px;
margin-bottom: 22px;
}
}
@@ -121,18 +131,44 @@ b {
margin-bottom: 81px;
line-height: 22px;
@media (min-width: 1720px) {
font-size: 20px;
margin-bottom: 97px;
@media (min-width: 1720px) {
font-size: 20px;
margin-bottom: 105px;
}
}
.hide {
display: none;
&__xxl {
display: block;
@media (min-width: 1720px) {
display: none;
}
}
}
.show {
&__xxl {
display: none;
@media (min-width: 1720px) {
display: block;
}
}
}
@media (min-width: 1440px) {
.is-container.wrapper_main {
max-width: initial;
}
}
.br {
&--xxl {
display: none;
}
}
}

21
styles/moover/sore.scss
View File

@@ -1,15 +1,26 @@
.sore {
margin-bottom: 160px;
@media (min-width: 1720px) {
margin-bottom: 178px;
}
&__img {
margin: 0 auto 26px;
position: relative;
left: -17px;
@media (min-width: 1720px) {
margin-bottom: 46px;
}
}
.title {
margin-bottom: 40px;
@media (min-width: 1720px) {
margin-bottom: 61px;
}
}
@@ -17,11 +28,19 @@
max-width: 62%;
margin: 0 auto -1px;
@media (min-width: 1720px) {
line-height: 26px;
max-width: 60%;
margin-bottom: 5px;
}
}
.h3 {
max-width: 47%;
margin: 0 auto 19px;
margin: 0 auto 19px;
@media (min-width: 1720px) {
max-width: 38%;
}
}
}

31
styles/moover/use.scss
View File

@@ -1,10 +1,19 @@
.use {
margin-bottom: 123px;
@media (min-width: 1720px) {
margin-bottom: 184px;
}
&__img {
width: 67.5%;
margin-left: 16px;
margin-bottom: 31px;
@media (min-width: 1720px) {
width: 50.2%;
margin-left: 27px;
}
}
&__btn {
@@ -21,24 +30,20 @@
.title {
max-width: 80%;
margin-bottom: 49px;
}
&--diff {
.title {
width: 60%;
margin-bottom: 60px;
}
.use__img {
width: 100%;
margin-left: 0;
margin-bottom: 17px;
@media (min-width: 1720px) {
max-width: 40%;
}
}
&--lett {
margin-bottom: 120px;
@media (min-width: 1720px) {
margin-bottom: 140px;
}
.title {
margin-bottom: 51px;
}
@@ -48,6 +53,10 @@
margin-right: -5px;
max-width: 110%;
width: 1290px;
@media (min-width: 1720px) {
width: initial;
}
}
}
}

17
styles/moover/uses.scss
View File

@@ -1,12 +1,18 @@
.uses {
margin-bottom: 122px;
@media (min-width: 1720px) {
margin-bottom: 136px;
}
&__grid {
text-align: left;
display: grid;
grid-template-columns: repeat(3, 1fr);
/* max-width: 101.5%; */
/* width: 101.5%; */
}
@@ -14,12 +20,23 @@
min-height: 50px;
margin-bottom: 43px;
padding: 0 50px 0 2px;
@media (min-width: 1720px) {
margin-bottom: 22px;
}
}
&__icon {
margin-bottom: 11px;
@media (min-width: 1720px) {
width: 147px;
height: 147px;
margin-bottom: 20px;
}
}
.title {
max-width: 50%;
margin: 0 auto 60px;