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

TRI-283: end header + start adaptive 1400>

Browse Source
This commit is contained in:
Artyom Pratsko
2024-11-20 01:38:34 +03:00
parent 4996d02f71
commit d83940b47d
27 changed files with 1883 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
styles/moover.scss
View File

@@ -1,4 +1,5 @@
@import "./moover/root";
@import "./moover/header";
@import "./moover/presentation";
@import "./moover/cards";
@import "./moover/easy";

145
styles/moover/cards.scss
View File

@@ -1,55 +1,122 @@
.cards {
}
.cards__list {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
&__list {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.cards__item {
position: relative;
}
&__item {
position: relative;
.cards__img:hover {
scale: 1.05;
transition: scale 0.15s linear;
}
@media (max-width: 991.98px) {
max-width: 270px;
}
}
.cards__img {
margin-bottom: 5px;
&__img {
margin-bottom: 5px;
@media (min-width: 1720px) {
width: 100%;
margin-bottom: 15px;
@media (min-width: 1720px) {
width: 100%;
margin-bottom: 15px;
}
@media (max-width: 991.98px) {
margin-bottom: 8px;
}
&:hover {
scale: 1.05;
transition: scale 0.15s linear;
}
}
&__desc {
font-weight: 500;
line-height: 22px;
@media (min-width: 1720px) {
font-size: 20px;
line-height: 26px;
padding-left: 20px;
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);
}
}
&__arrow {
width: 62px;
height: 20px;
position: absolute;
right: -30px;
top: -21px;
background-image: url("/static/img/svg/Arrow23.svg");
@media (min-width: 1720px) {
right: -45px;
top: -29px;
}
@media (max-width: 1304.98px) {
top: -8%;
}
@media (max-width: 991.98px) {
display: none;
}
}
.slick-list {
overflow: visible;
}
}
.cards__desc {
font-weight: 500;
line-height: 22px;
.slick-dots {
display: flex;
justify-content: center;
@media (min-width: 1720px) {
font-size: 20px;
line-height: 26px;
padding-left: 20px;
padding-right: 20px;
margin: 0;
padding: 1rem 0;
list-style-type: none;
li {
margin: 0 0.25rem;
}
a {
color: var(--color-orange);
}
}
button {
display: block;
width: 8px;
height: 8px;
padding: 0;
.cards__arrow {
width: 62px;
height: 20px;
position: absolute;
right: -30px;
top: -21px;
background-image: url("/static/img/svg/Arrow23.svg");
border: none;
border-radius: 100%;
background-color: #D9D9D9;
@media (min-width: 1720px) {
right: -45px;
top: -29px;
text-indent: -9999px;
}
li.slick-active button {
background-color: var(--color-orange);
}
}

30
styles/moover/chatterbox.scss
View File

@@ -1,8 +1,8 @@
.chatterbox {
margin-bottom: 160px;
@media (min-width: 1720px) {
margin-bottom: 180px;
@media (min-width: 1720px) {
margin-bottom: 180px;
}
&__slider {
@@ -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;
@@ -92,10 +98,10 @@
border-radius: 50%;
transition: opacity 100ms linear;
@media (min-width: 1720px) {
width: 109px;
height: 109px;
}
@media (min-width: 1720px) {
width: 109px;
height: 109px;
}
}
&::before,
@@ -115,10 +121,10 @@
display: inline-block;
margin-left: 2px;
@media (min-width: 1720px) {
border-width: 23px 0 23px 35px;
margin-left: 4px;
}
@media (min-width: 1720px) {
border-width: 23px 0 23px 35px;
margin-left: 4px;
}
}
}
@@ -132,6 +138,10 @@
@media (min-width: 1720px) {
height: 827px;
}
@media (max-width: 1304.98px) {
height: 530px;
}
}
.title {

63
styles/moover/diff.scss
View File

@@ -1,8 +1,12 @@
.diff {
margin-bottom: 166px;
margin-bottom: 168px;
@media (min-width: 1720px) {
margin-bottom: 172px;
@media (min-width: 1720px) {
margin-bottom: 172px;
}
@media (max-width: 991.98px) {
margin-bottom: 125px;
}
.title {
@@ -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%;

149
styles/moover/easy.scss
View File

@@ -1,10 +1,19 @@
.easy {
margin-bottom: 162px;
@media (min-width: 1720px) {
margin-bottom: 180px;
@media (min-width: 1720px) {
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 {
grid-area: c;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
//background-color: #00a420;
&--thr img {
margin-bottom: -10px;
margin-right: 24px;
}
@media (max-width: 991.98px) {
padding-top: 42px;
padding-bottom: 46px;
}
&--thr p {
max-width: 50%;
.img {
margin-bottom: -10px;
margin-right: 24px;
max-width: 80%;
@media (max-width: 1279.98px) {
max-width: 35%;
}
@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;
@media (max-width: 991.98px) {
margin-top: -26px;
padding-left: 54px;
padding-right: 54px;
}
}
}
.easy__item--sec p,
.easy__item--thr p,
.easy__item--sec,
.easy__item--thr {
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}

89
styles/moover/header.scss Normal file
View 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;
}
}
}

59
styles/moover/presentation.scss
View File

@@ -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 {

77
styles/moover/root.scss
View File

@@ -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
styles/moover/sore.scss
View File

@@ -1,5 +1,6 @@
.sore {
margin-bottom: 160px;
margin-top: 1px;
@media (min-width: 1720px) {
margin-bottom: 178px;

33
styles/moover/use.scss
View File

@@ -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;
}
}
}

4
styles/moover/uses.scss
View File

@@ -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) {