TRI-283: add benefits animate about

This commit is contained in:
2024-11-15 21:00:27 +03:00
parent ad25cc67ec
commit f58038ab90
14 changed files with 264 additions and 23 deletions

View File

@@ -4,5 +4,8 @@
@import url('./moover/easy.css');
@import url('./moover/use.css');
@import url('./moover/chatterbox.css');
@import url('./moover/animate.css');
@import url('./moover/about.css');
@import url('./moover/benefits.css');

View File

@@ -0,0 +1,42 @@
.about {
margin-bottom: 168px;
}
.about .title {
margin-bottom: 60px;
}
.about__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.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;
}
.about__right {
text-align: left;
padding-top: 43px;
padding-left: 50px;
}
.about__half {
max-width: 50%;
float: left;
}
.about__half:last-child {
padding-left: 16px;
max-width: 47%;
}
.about b {
letter-spacing: 0.4px;
}

24
static/css/moover/animate.css vendored Normal file
View File

@@ -0,0 +1,24 @@
.animate {
padding: 60px 40px 49px;
opacity: 0;
transform: translateX(-180px);
background-color: var(--color-black2);
border-radius: 30px;
color: white;
margin-bottom: 160px;
}
.animate .title {
margin-bottom: 25px;
max-width: 87%;
/*width: 90%;*/
}
.animate .subtitle {
width: 47%;
margin: 0 auto 23px;
}
.animate__link {
color: var(--color-orange);
text-decoration: underline !important;
}

View File

@@ -0,0 +1,37 @@
.benefits {
/*padding: 0 50px;*/
}
.benefits .title {
margin-bottom: 76px;
}
.benefits__grid {
text-align: left;
display: grid;
grid-template-columns: 1.5fr 3fr 1.5fr;
}
.benefits__col {
}
.benefits__item {
margin-bottom: 54px;
padding-right: 5px;
}
.benefits img {
position: relative;
top: 14px;
right: -11px;
}
.benefits__third {
padding-left: 16px;
}
.benefits__third .benefits__item {
margin-bottom: 22px;
}

View File

@@ -1,4 +1,6 @@
.chatterbox {}
.chatterbox {
margin-bottom: 160px;
}
.chatterbox .title {
margin-bottom: 60px;
@@ -52,6 +54,11 @@
z-index: 1;
}
.slick-center .chatterbox__vbox video {
pointer-events: initial;
cursor: pointer;
}
.chatterbox__vbtn {
position: absolute;
left: 0;
@@ -63,10 +70,6 @@
pointer-events: none;
}
.loaded .chatterbox__vbtn {
display: none;
}
.chatterbox__vbtn::before {
width: 20px;
height: 20px;
@@ -113,5 +116,17 @@
.chatterbox video {
max-width: 100%;
opacity: 0;
transition: opacity 0.2s ease-in-out;
pointer-events: none;
}
.loaded .chatterbox__vbtn {
display: none;
}
.loaded video {
opacity: 1;
}

View File

@@ -8,7 +8,7 @@
}
.easy .subtitle {
margin-bottom: 42px;
margin-bottom: 41px;
}
.easy__grid {
@@ -20,7 +20,7 @@
'a c';
grid-column-gap: 20px;
grid-row-gap: 80px;
margin-bottom: 48px;
margin-bottom: 46px;
}
.easy__item {

View File

@@ -22,11 +22,11 @@
}
.presentation__title {
margin-bottom: 21px;
margin-bottom: 23px;
}
.presentation__subtitle {
margin-bottom: 39px;
margin-bottom: 41px;
font-weight: 600;
}

View File

@@ -27,17 +27,23 @@
--color-primary: #FF613A;
--color-white: #FFFFFF;
--color-black: #000000;
--color-black2: #272424;
--color-grey: #F1F1F1;
--color-grey2: #7A7979;
--color-orange: #FF613A;
--box-shadow-primary: -1px 4px 10px 0 rgba(198, 199, 203, 0.20),
0 -1px 10px 0 rgba(198, 199, 203, 0.20);
text-align: center;
color: var(--color-black2);
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
font-weight: 700;
}
h1, .title {
@@ -68,6 +74,10 @@ p {
margin-bottom: 20px;
}
b {
font-weight: 500;
}
.btn {
display: inline-flex;
@@ -99,6 +109,7 @@ p {
.subtitle {
margin-bottom: 81px;
line-height: 22px;
}
.hide {

View File

@@ -18,22 +18,39 @@
}
.use__link {
font-size: 18px;
font-weight: 600;
line-height: 26px;
color:var(--color-grey2);
font-size: 18px;
font-weight: 600;
line-height: 26px;
color: var(--color-grey2);
}
.use.use--diff .title {
width: 60%;
margin-bottom: 60px;
}
.use.use--diff .use__img {
width: 100%;
margin-left: 0;
margin-bottom: 17px;
}
.use.use--lett {
margin-bottom: 120px;
}
.use.use--lett .title {
margin-bottom: 51px;
}
.use.use--lett .use__img {
margin-left: -5px;
margin-right: -5px;
max-width: 110%;
width: 1290px;
}

View File

@@ -139,4 +139,8 @@
.slick-next {
right: 0;
transform: rotate(180deg) translate(0, 50%);
}
.slick-disabled {
display: none !important;
}