dev #31
File diff suppressed because one or more lines are too long
178
static/css/moover/about.css
Normal file
178
static/css/moover/about.css
Normal file
@@ -0,0 +1,178 @@
|
||||
.about {
|
||||
margin-bottom: 168px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.about {
|
||||
margin-bottom: 188px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.about {
|
||||
margin-bottom: 138px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.about {
|
||||
margin-bottom: 110px;
|
||||
}
|
||||
}
|
||||
|
||||
.about .title {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.about .title {
|
||||
margin-bottom: 49px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.about .title {
|
||||
margin-bottom: 39px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.about .title {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
.about .title {
|
||||
margin-bottom: 37px;
|
||||
}
|
||||
}
|
||||
|
||||
.about__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.about__grid {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.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: -20px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.about__img {
|
||||
margin-top: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.about__img {
|
||||
margin-left: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.about__img {
|
||||
margin-left: 0;
|
||||
margin-bottom: 49px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
.about__img {
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
.about__right {
|
||||
text-align: left;
|
||||
padding-top: 43px;
|
||||
padding-left: 50px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.about__right {
|
||||
padding-top: 90px;
|
||||
padding-left: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.about__right {
|
||||
padding-left: 11px;
|
||||
padding-top: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.about__right {
|
||||
padding: 0 8px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
.about__right {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.about__right::after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.about__half {
|
||||
max-width: 50%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.about__half {
|
||||
max-width: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.about__half:last-child {
|
||||
padding-left: 16px;
|
||||
max-width: 47%;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.about__half:last-child {
|
||||
max-width: initial;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.about b {
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.about b {
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
.about b {
|
||||
letter-spacing: 0.9px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.about p {
|
||||
margin-bottom: 39px;
|
||||
}
|
||||
}
|
||||
126
static/css/moover/animate.css
vendored
126
static/css/moover/animate.css
vendored
@@ -7,6 +7,34 @@
|
||||
margin-bottom: 160px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.animate {
|
||||
padding-top: 100px;
|
||||
padding-bottom: 89px;
|
||||
margin-bottom: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.animate {
|
||||
margin-bottom: 141px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.animate {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 29px;
|
||||
margin-bottom: 121px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
.animate {
|
||||
padding: 30px 7px 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.animate.left {
|
||||
transform: translateX(-180px);
|
||||
}
|
||||
@@ -15,6 +43,47 @@
|
||||
transform: translateX(180px);
|
||||
}
|
||||
|
||||
.animate.right .title {
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.animate.right .title {
|
||||
max-width: 80%;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.animate.right .title {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.animate.right .title {
|
||||
margin-bottom: 31px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
.animate.right .title {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.animate.right .subtitle {
|
||||
margin-bottom: 31px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
.animate.right .use__btn {
|
||||
margin-top: -11px;
|
||||
}
|
||||
}
|
||||
|
||||
.animate__link {
|
||||
color: var(--color-orange);
|
||||
text-decoration: underline !important;
|
||||
@@ -26,7 +95,64 @@
|
||||
/*width: 90%;*/
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.animate .title {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.animate .title {
|
||||
max-width: 99%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.animate .title {
|
||||
max-width: 85%;
|
||||
font-size: 24px;
|
||||
line-height: 29.05px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.animate .title {
|
||||
max-width: 100%;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.animate .subtitle {
|
||||
width: 47%;
|
||||
margin: 0 auto 23px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.animate .subtitle {
|
||||
line-height: 26px;
|
||||
letter-spacing: 0.1px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.animate .subtitle {
|
||||
width: 54%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.animate .subtitle {
|
||||
width: 102%;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
.animate .use__btn {
|
||||
margin-top: -6px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,28 +2,156 @@
|
||||
margin-bottom: 132px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.benefits {
|
||||
margin-bottom: 147px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.benefits {
|
||||
margin-bottom: 101px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.benefits {
|
||||
margin-bottom: 93px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
.benefits {
|
||||
margin-bottom: 103px;
|
||||
}
|
||||
}
|
||||
|
||||
.benefits__grid {
|
||||
text-align: left;
|
||||
display: grid;
|
||||
grid-template-columns: 1.5fr 3fr 1.5fr;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.benefits__grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
.benefits__grid {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.benefits__item {
|
||||
min-height: 122px;
|
||||
padding-right: 7px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.benefits__item {
|
||||
min-height: 145px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.benefits__item {
|
||||
padding-right: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
.benefits__item {
|
||||
padding-right: 0;
|
||||
margin-bottom: 19px;
|
||||
min-height: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.benefits__second {
|
||||
grid-column: 1 / 3;
|
||||
order: -1;
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
.benefits__second {
|
||||
grid-column: 1/2;
|
||||
margin-bottom: 31px;
|
||||
}
|
||||
}
|
||||
|
||||
.benefits__third {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.benefits__third {
|
||||
padding-left: 31px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.benefits__third {
|
||||
padding-left: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
.benefits__third {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.benefits .title {
|
||||
margin-bottom: 76px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.benefits .title {
|
||||
margin-bottom: 93px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.benefits .title {
|
||||
margin-bottom: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.benefits img {
|
||||
position: relative;
|
||||
top: 14px;
|
||||
right: -11px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.benefits img {
|
||||
top: -33px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.benefits img {
|
||||
top: 20px;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.benefits h2 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
.benefits p {
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
194
static/css/moover/cards.css
Normal file
194
static/css/moover/cards.css
Normal file
@@ -0,0 +1,194 @@
|
||||
.cards__list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
.cards__item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.cards__item {
|
||||
max-width: 270px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.cards__item {
|
||||
max-width: 251px;
|
||||
margin-right: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-active .cards__item .cards__desc, .cards__item:hover .cards__desc, .cards__item:focus .cards__desc {
|
||||
-webkit-line-clamp: initial;
|
||||
/* number of lines to show */
|
||||
line-clamp: initial;
|
||||
max-height: 17em;
|
||||
}
|
||||
|
||||
.cards__img {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.cards__img {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.cards__img {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.cards__img {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.cards__img {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.cards__img:hover {
|
||||
scale: 1.05;
|
||||
transition: scale 0.15s linear;
|
||||
}
|
||||
|
||||
.cards__desc {
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
padding: 0 5px;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 7;
|
||||
/* number of lines to show */
|
||||
line-clamp: 7;
|
||||
-webkit-box-orient: vertical;
|
||||
transition: all 0.3s ease-in-out;
|
||||
max-height: 10em;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.cards__desc {
|
||||
font-size: 20px;
|
||||
line-height: 26px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-active .cards__desc, .cards__desc:hover, .cards__desc:focus {
|
||||
-webkit-line-clamp: initial;
|
||||
/* number of lines to show */
|
||||
line-clamp: initial;
|
||||
max-height: 999em;
|
||||
}
|
||||
|
||||
.cards__desc a {
|
||||
color: var(--color-orange);
|
||||
}
|
||||
|
||||
.cards__arrow {
|
||||
width: 62px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
right: -30px;
|
||||
top: -21px;
|
||||
background-image: url("/static/img/svg/Arrow23.svg");
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.cards__arrow {
|
||||
right: -45px;
|
||||
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;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.cards .slick-list {
|
||||
margin-bottom: 1px;
|
||||
padding-left: 58px;
|
||||
}
|
||||
}
|
||||
|
||||
.cards .slick-dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding: 1rem 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.cards .slick-dots li {
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.cards .slick-dots li {
|
||||
margin: 0 0.31rem;
|
||||
}
|
||||
}
|
||||
|
||||
.cards .slick-dots button {
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 100%;
|
||||
background-color: #D9D9D9;
|
||||
text-indent: -9999px;
|
||||
}
|
||||
|
||||
.cards .slick-dots li.slick-active button {
|
||||
background-color: var(--color-orange);
|
||||
}
|
||||
|
||||
.cards--cstmr .cards__desc {
|
||||
padding: 0 50px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.cards--cstmr .cards__desc {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
@@ -2,11 +2,72 @@
|
||||
margin-bottom: 160px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.chatterbox {
|
||||
margin-bottom: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.chatterbox {
|
||||
margin-bottom: 142px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.chatterbox {
|
||||
margin-left: -50vw;
|
||||
margin-right: -50vw;
|
||||
margin-bottom: 122px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.chatterbox {
|
||||
max-width: 100vw;
|
||||
margin: 0 auto 121px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.chatterbox__slider {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.chatterbox__slider {
|
||||
max-width: 1640px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.chatterbox__slider {
|
||||
max-width: 1100px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.chatterbox__slider {
|
||||
max-width: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.chatterbox__slider {
|
||||
width: 720px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
.chatterbox__slider {
|
||||
width: 830px;
|
||||
max-width: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.chatterbox__slide {
|
||||
width: 335px;
|
||||
height: 615px;
|
||||
@@ -16,6 +77,38 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.chatterbox__slide {
|
||||
width: 456px;
|
||||
height: 836px;
|
||||
background-size: 456px 836px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.chatterbox__slide {
|
||||
width: 308px;
|
||||
height: 565px;
|
||||
background-size: 308px 565px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.chatterbox__slide {
|
||||
width: 206px;
|
||||
height: 377px;
|
||||
background-size: 206px 377px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.chatterbox__slide {
|
||||
width: 234px;
|
||||
height: 429px;
|
||||
background-size: 234px 429px;
|
||||
}
|
||||
}
|
||||
|
||||
.chatterbox__slide.loaded video {
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -31,6 +124,13 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.chatterbox__slide video {
|
||||
position: relative;
|
||||
top: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
.chatterbox__slide img {
|
||||
position: absolute;
|
||||
scale: 1.32;
|
||||
@@ -48,6 +148,12 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.chatterbox__wrap {
|
||||
border-radius: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.chatterbox__vbtn {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@@ -75,6 +181,27 @@
|
||||
transition: opacity 100ms linear;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.chatterbox__vbtn::before {
|
||||
width: 109px;
|
||||
height: 109px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.chatterbox__vbtn::before {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.chatterbox__vbtn::before {
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
}
|
||||
}
|
||||
|
||||
.chatterbox__vbtn::before, .chatterbox__vbtn::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@@ -92,6 +219,19 @@
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.chatterbox__vbtn::after {
|
||||
border-width: 23px 0 23px 35px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.chatterbox__vbtn::after {
|
||||
border-width: 10px 0 10px 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.chatterbox__vbox {
|
||||
position: relative;
|
||||
display: flex;
|
||||
@@ -100,22 +240,132 @@
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.chatterbox__vbox {
|
||||
height: 827px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.chatterbox__vbox {
|
||||
height: 530px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.chatterbox__vbox {
|
||||
height: 370px;
|
||||
}
|
||||
}
|
||||
|
||||
.chatterbox__mbtns {
|
||||
position: absolute;
|
||||
top: 58%;
|
||||
transform: translateY(-50%);
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
.chatterbox__mbtns {
|
||||
top: 61.6%;
|
||||
}
|
||||
}
|
||||
|
||||
.chatterbox .title {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.chatterbox .title {
|
||||
margin-bottom: 39px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.chatterbox .title {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.chatterbox .slick-next {
|
||||
right: -40px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.chatterbox .slick-next {
|
||||
right: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.chatterbox .slick-next {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-size: 32%;
|
||||
right: 5%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
.chatterbox .slick-next {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.chatterbox .slick-prev {
|
||||
left: -40px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.chatterbox .slick-prev {
|
||||
left: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.chatterbox .slick-prev {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-size: 32%;
|
||||
left: 5%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
.chatterbox .slick-prev {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.chatterbox .slick-list {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-slide:not(.slick-center) .chatterbox__slide {
|
||||
scale: 0.72;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.slick-slide:not(.slick-center) .chatterbox__slide {
|
||||
scale: 0.69;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.slick-slide:not(.slick-center) .chatterbox__slide {
|
||||
scale: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
.slick-slide:not(.slick-center) .chatterbox__slide {
|
||||
scale: 0.85;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-center .chatterbox__vbtn {
|
||||
opacity: 1;
|
||||
pointer-events: initial;
|
||||
|
||||
347
static/css/moover/diff.css
Normal file
347
static/css/moover/diff.css
Normal file
@@ -0,0 +1,347 @@
|
||||
.diff {
|
||||
margin-bottom: 179px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.diff {
|
||||
margin-bottom: 172px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.diff {
|
||||
margin-bottom: 140px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.diff {
|
||||
margin-bottom: 125px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.diff {
|
||||
margin-bottom: 139px;
|
||||
}
|
||||
}
|
||||
|
||||
.diff .title {
|
||||
width: 60%;
|
||||
margin-bottom: 65px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.diff .title {
|
||||
width: 49%;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.diff .title {
|
||||
width: 73%;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.diff .title {
|
||||
width: 90%;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.diff .title {
|
||||
width: 100%;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.diff__grid {
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.diff__grid::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 96%;
|
||||
width: 5px;
|
||||
border-radius: 5px;
|
||||
background-color: #EDEDED;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.diff__grid::before {
|
||||
height: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
@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 (min-width: 1720px) {
|
||||
.diff__coll.left {
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.diff__coll.left {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.diff__coll.left {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.diff__coll.left .diff__coll-title {
|
||||
padding-left: 39px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.diff__coll.left .diff__coll-title {
|
||||
padding-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.diff__coll.left .diff__coll-title {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.diff__coll.left .diff__coll-title {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.diff__coll.right {
|
||||
margin-left: 29px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.diff__coll.right {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.diff__coll.right {
|
||||
margin-left: 0;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.diff__coll.right .diff__coll-title {
|
||||
padding-right: 39px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.diff__coll.right .diff__coll-title {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.diff__coll.right .diff__coll-title {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.diff__coll.right .diff__coll-title {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.diff__coll-title {
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.diff__coll-title {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.diff__coll-title {
|
||||
margin-bottom: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.diff__coll-title {
|
||||
margin-bottom: 29px;
|
||||
}
|
||||
}
|
||||
|
||||
.diff__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) {
|
||||
.diff__item {
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.diff__item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.diff__item {
|
||||
font-size: 18px;
|
||||
margin-bottom: 25px;
|
||||
padding-bottom: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.diff__item {
|
||||
font-size: 16px;
|
||||
line-height: 19.36px;
|
||||
padding-right: 15px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.diff__item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.diff__item:hover .diff__status::before {
|
||||
scale: 1.2;
|
||||
}
|
||||
|
||||
.diff__status {
|
||||
position: relative;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
border-radius: 5px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.diff__status {
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.diff__status {
|
||||
border-radius: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.diff__status {
|
||||
border-radius: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.diff__status {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
.diff__status::before {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transform-origin: 0% 15%;
|
||||
}
|
||||
|
||||
.diff__status::before {
|
||||
content: '';
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.diff__item--done .diff__status {
|
||||
background-color: #CCF9D9;
|
||||
}
|
||||
|
||||
.diff__item--done .diff__status::before {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyNiAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI0IDJMOS4zMzMzMyAyNEwyIDEzLjAwMDUiIHN0cm9rZT0iIzQ1QzIyNiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==);
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.diff__item--done .diff__status::before {
|
||||
scale: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.diff__item--error .diff__status {
|
||||
background-color: #F9CCCC;
|
||||
}
|
||||
|
||||
.diff__item--error .diff__status::before {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI4LjEyNSA3Ljg3NUw3Ljg3NSAyOC4xMjUiIHN0cm9rZT0iI0ZGMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTI4LjEyNSAyOC4xMjVMNy44NzUgNy44NzUiIHN0cm9rZT0iI0ZGMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==);
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.diff__item--error .diff__status::before {
|
||||
scale: 0.7;
|
||||
}
|
||||
}
|
||||
418
static/css/moover/easy.css
Normal file
418
static/css/moover/easy.css
Normal file
@@ -0,0 +1,418 @@
|
||||
.easy {
|
||||
margin-bottom: 162px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.easy {
|
||||
margin-bottom: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.easy {
|
||||
margin-bottom: 140px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.easy {
|
||||
margin-bottom: 121px;
|
||||
}
|
||||
}
|
||||
|
||||
.easy .title {
|
||||
max-width: 55%;
|
||||
margin-bottom: 21px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.easy .title {
|
||||
max-width: 45%;
|
||||
margin-bottom: 23px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.easy .title {
|
||||
max-width: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.easy .title {
|
||||
max-width: 95%;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.easy .subtitle {
|
||||
margin-bottom: 41px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.easy .subtitle {
|
||||
margin-bottom: 59px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.easy .subtitle {
|
||||
max-width: 90%;
|
||||
margin: 0 auto 23px;
|
||||
}
|
||||
}
|
||||
|
||||
.easy__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;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.easy__grid {
|
||||
grid-column-gap: 147px;
|
||||
grid-template-rows: repeat(2, minmax(245px, auto));
|
||||
grid-row-gap: 136px;
|
||||
margin-bottom: 63px;
|
||||
}
|
||||
}
|
||||
|
||||
@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: 37px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.easy__grid {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.easy__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 {
|
||||
grid-area: a;
|
||||
margin-right: 60px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.easy__item--fir {
|
||||
margin-right: -10px;
|
||||
padding-top: 31px;
|
||||
}
|
||||
}
|
||||
|
||||
@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: 49px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.easy__item--fir {
|
||||
margin-bottom: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
.easy__item--fir p {
|
||||
width: 93%;
|
||||
margin-bottom: 29px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.easy__item--fir p {
|
||||
width: 89%;
|
||||
margin-bottom: 53px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.easy__item--fir p {
|
||||
max-width: 78%;
|
||||
}
|
||||
}
|
||||
|
||||
.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 (min-width: 1720px) {
|
||||
.easy__item--sec {
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.easy__item--sec {
|
||||
padding-top: 35px;
|
||||
padding-bottom: 37px;
|
||||
margin-bottom: 46px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.easy__item--sec {
|
||||
display: block;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 49px;
|
||||
}
|
||||
}
|
||||
|
||||
.easy__item--sec img {
|
||||
margin-bottom: -10px;
|
||||
margin-right: -5px;
|
||||
max-width: 50.1%;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.easy__item--sec img {
|
||||
max-width: 53%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.easy__item--sec img {
|
||||
max-width: 42%;
|
||||
margin-bottom: -4px;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.easy__item--sec img {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.easy__item--sec img {
|
||||
max-width: 104%;
|
||||
position: relative;
|
||||
left: -6px;
|
||||
top: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
.easy__item--sec p {
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.easy__item--sec p {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.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 (min-width: 1720px) {
|
||||
.easy__item--thr {
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.easy__item--thr {
|
||||
padding-top: 42px;
|
||||
padding-bottom: 46px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.easy__item--thr {
|
||||
display: block;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.easy__item--thr .img img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.easy__item--thr p {
|
||||
margin-bottom: 22px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.easy__arrow {
|
||||
width: 68px;
|
||||
height: 18px;
|
||||
background-image: url("/static/img/svg/Arrow08.svg");
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.easy__arrow {
|
||||
scale: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
@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%;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.easy__arrow--fir {
|
||||
right: 105%;
|
||||
top: 34%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.easy__arrow--fir {
|
||||
top: 48%;
|
||||
}
|
||||
}
|
||||
|
||||
.easy__arrow--sec {
|
||||
top: 117%;
|
||||
left: 30%;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.easy__arrow--sec {
|
||||
left: 45%;
|
||||
top: 124%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.easy__arrow--sec {
|
||||
left: 38%;
|
||||
}
|
||||
}
|
||||
|
||||
.easy__btn {
|
||||
margin-top: -21px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.easy__btn {
|
||||
margin-top: -20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.easy__btn {
|
||||
margin-top: -19px;
|
||||
padding-left: 54px;
|
||||
padding-right: 54px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.easy__btn {
|
||||
padding-left: 50px;
|
||||
padding-right: 50px;
|
||||
margin-top: -8px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
1
static/css/moover/header.css
Normal file
1
static/css/moover/header.css
Normal file
@@ -0,0 +1 @@
|
||||
.header{margin-top:0;position:fixed;left:0;top:0;width:100vw;padding:40px 5px;transition:all 0.1s ease-in-out}@media (max-width: 1304.98px){.header{padding-top:37px;padding-bottom:41px}}@media (max-width: 991.98px){.header{padding-top:19px;padding-bottom:19px}}.header.scrolled{padding-top:20px;padding-bottom:20px;box-shadow:var(--box-shadow-primary);border-bottom:1px solid var(--color-grey)}.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:6px}}@media (max-width: 991.98px){.header__logo{left:0}}@media (max-width: 767.98px){.header__logo{left:-3px}}.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.5%}}.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:0}}@media (max-width: 991.98px){.header__btn{display:none}}.header .dropdown{left:-4px}@media (max-width: 767.98px){.header .dropdown{left:-8px}}.header .dropdown-content{right:0;height:initial}@media (max-width: 575px){.header .dropdown-content{right:0;left:initial}}
|
||||
@@ -1,11 +1,24 @@
|
||||
.presentation {
|
||||
margin: 20px -65px 140px;
|
||||
margin: 12px -65px 140px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.presentation {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.presentation {
|
||||
margin-bottom: 118px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.presentation {
|
||||
margin-bottom: 105px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,7 +30,7 @@
|
||||
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%;
|
||||
background-size: 17.5%, 21.8%, 8.5%, 8.8%;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
@@ -29,19 +42,97 @@
|
||||
}
|
||||
}
|
||||
|
||||
@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: 767.98px) {
|
||||
.presentation__top {
|
||||
margin-bottom: 77px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.presentation__bottom .subtitle {
|
||||
max-width: 40%;
|
||||
margin: 0 auto 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.presentation__bottom .subtitle {
|
||||
max-width: 65%;
|
||||
margin-bottom: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
.presentation__title {
|
||||
margin-bottom: 23px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.presentation__title {
|
||||
max-width: 75%;
|
||||
margin: 0 auto 19px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.presentation__title {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.presentation__subtitle {
|
||||
margin-bottom: 30px;
|
||||
max-width: 77%;
|
||||
}
|
||||
}
|
||||
|
||||
.presentation__btn {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.presentation__btn {
|
||||
padding-left: 82px;
|
||||
padding-right: 82px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.presentation__btn {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.presentation__next {
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
@@ -53,6 +144,29 @@
|
||||
animation: jump 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.presentation__cards {
|
||||
max-width: 1300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.presentation__cards {
|
||||
max-width: initial;
|
||||
margin-left: -10px;
|
||||
margin-right: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.presentation__cards {
|
||||
max-width: 1140px;
|
||||
}
|
||||
}
|
||||
|
||||
.presentation__bottom .presentation__title {
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
|
||||
@keyframes jump {
|
||||
0% {
|
||||
transform: translateY(0px);
|
||||
@@ -73,12 +187,3 @@
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
|
||||
.presentation__bottom .presentation__title {
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
|
||||
.presentation__cards {
|
||||
max-width: 1300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@@ -1,137 +1,2 @@
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
width: 1280px;
|
||||
position: relative;
|
||||
min-height: 695px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.container {
|
||||
width: 1720px;
|
||||
}
|
||||
}
|
||||
|
||||
/*@media (max-width: 1019.98px) {*/
|
||||
/* .container {*/
|
||||
/* width: 720px*/
|
||||
/* }*/
|
||||
/*}*/
|
||||
/*@media (max-width: 767.98px) {*/
|
||||
/* .container {*/
|
||||
/* margin: 0 15px;*/
|
||||
/* width: auto*/
|
||||
/* }*/
|
||||
/*}*/
|
||||
:root {
|
||||
--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, .h1 {
|
||||
font-size: 44px;
|
||||
line-height: 52px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
h1, .h1 {
|
||||
font-size: 48px;
|
||||
line-height: 52px;
|
||||
}
|
||||
}
|
||||
|
||||
h2, .h2 {
|
||||
font-size: 24px;
|
||||
line-height: 36px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h3, .h3 {
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
h4, .h4 {
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 22px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
b {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
line-height: 22px;
|
||||
border-radius: 10px;
|
||||
padding: 20px 76px 18px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 3px;
|
||||
letter-spacing: 0.2px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.btn--primary {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 44px;
|
||||
font-weight: 700;
|
||||
line-height: 52px;
|
||||
margin-bottom: 13px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.title {
|
||||
font-size: 44px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-bottom: 81px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.subtitle {
|
||||
font-size: 20px;
|
||||
margin-bottom: 97px;
|
||||
}
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.is-container.wrapper_main {
|
||||
max-width: initial;
|
||||
}
|
||||
}
|
||||
.container{margin:0 auto;width:1280px;position:relative}@media (min-width: 1720px){.container{width:1720px}}@media (max-width: 1304.98px){.container{width:1120px;max-width:88vw}}@media (max-width: 991.98px){.container{width:640px;max-width:100vw}}@media (max-width: 767.98px){.container{margin:0 16px;width:auto}}:root{--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)}body{overflow-x:hidden;padding-top:129px}@media (max-width: 1304.98px){body{padding-top:126px}}@media (max-width: 991.98px){body{padding-top:85px}}@media (max-width: 767.98px){body{padding-top:57px}}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-weight:700}h1,.h1{font-size:44px;line-height:52px}@media (min-width: 1720px){h1,.h1{font-size:48px;line-height:52px}}h2,.h2{font-size:24px;line-height:36px;margin-bottom:10px}@media (min-width: 1720px){h2,.h2{font-size:28px;margin-bottom:20px}}h3,.h3{font-size:20px;line-height:28px;margin-bottom:12px}@media (max-width: 1304.98px){h3,.h3{margin-bottom:13px}}h4,.h4{font-size:18px;line-height:26px;margin-bottom:20px}p{line-height:22px;margin-bottom:20px}@media (min-width: 1720px){p{font-size:20px;line-height:26px}}@media (max-width: 991.98px){p{margin-bottom:18px}}@media (max-width: 479.98px){p{margin-bottom:14px}}b{font-weight:500}@media (max-width: 991.98px){b{font-size:16px;line-height:22px}}.btn{display:inline-flex;text-decoration:none;color:black;line-height:22px;border-radius:10px;padding:20px 76px 18px;justify-content:center;align-items:center;margin:0 3px;letter-spacing:0.2px;font-size:18px}.btn--primary{background:var(--color-primary);color:var(--color-white)}.title{font-size:44px;font-weight:700;line-height:52px;margin-bottom:13px;margin-left:auto;margin-right:auto}@media (min-width: 1720px){.title{font-size:48px;margin-bottom:22px}}@media (max-width: 1304.98px){.title{margin-bottom:20px}}@media (max-width: 991.98px){.title{font-size:32px;line-height:38.73px}}@media (max-width: 767.98px){.title{margin-bottom:14px}}.subtitle{margin-bottom:81px;line-height:22px}@media (min-width: 1720px){.subtitle{font-size:20px;margin-bottom:105px}}@media (max-width: 1304.98px){.subtitle{margin-bottom:71px}}.hide{display:none}.hide__xxl{display:inline-flex}@media (min-width: 1720px){.hide__xxl{display:none}}@media (max-width: 991.98px){.hide__md{display:none}}@media (max-width: 479.98px){.hide__xs{display:none}}.show__xxl{display:none}@media (min-width: 1720px){.show__xxl{display:block}}.show__md{display:none}@media (max-width: 991.98px){.show__md{display:initial}}@media (min-width: 480px){.show__xs{display:none}}@media (min-width: 1440px){.br--xxl{display:none}}@media (max-width: 991.98px){.br--md{display:none}}@media (max-width: 767.98px){.br--sm{display:none}}@media (min-width: 1440px){.is-container.wrapper_main{max-width:initial}}.is-container.wrapper_main>.container{position:relative;left:15px}@media (min-width: 1720px){.is-container.wrapper_main>.container{left:17px}}@media (max-width: 767.98px){.is-container.wrapper_main>.container{left:0}}
|
||||
|
||||
@@ -1,23 +1,161 @@
|
||||
.sore {
|
||||
margin-bottom: 160px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.sore {
|
||||
margin-bottom: 178px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.sore {
|
||||
margin-bottom: 140px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.sore {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
.sore {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.sore__img {
|
||||
margin: 0 auto 26px;
|
||||
margin: 0 auto 13px;
|
||||
position: relative;
|
||||
left: -17px;
|
||||
top: -13px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.sore__img {
|
||||
margin-bottom: 40px;
|
||||
top: -5px;
|
||||
left: -21px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.sore__img {
|
||||
left: 2px;
|
||||
top: -22px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.sore__img {
|
||||
top: -8px;
|
||||
left: -15px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
.sore__img {
|
||||
max-width: 106%;
|
||||
top: -26px;
|
||||
left: -18px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.sore .title {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.sore .title {
|
||||
margin-bottom: 61px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.sore .title {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
.sore .title {
|
||||
margin-bottom: 29px;
|
||||
}
|
||||
}
|
||||
|
||||
.sore .subtitle {
|
||||
max-width: 62%;
|
||||
margin: 0 auto -1px;
|
||||
margin: 0 auto 10px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.sore .subtitle {
|
||||
line-height: 26px;
|
||||
max-width: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.sore .subtitle {
|
||||
max-width: 65%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.sore .subtitle {
|
||||
max-width: 85%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
.sore .subtitle {
|
||||
max-width: 99%;
|
||||
}
|
||||
}
|
||||
|
||||
.sore .h3 {
|
||||
max-width: 47%;
|
||||
margin: 0 auto 19px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.sore .h3 {
|
||||
max-width: 38%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.sore .h3 {
|
||||
max-width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.sore .h3 {
|
||||
max-width: 65%;
|
||||
margin-bottom: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
.sore .h3 {
|
||||
max-width: 100%;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
.sore__btn {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,51 +1 @@
|
||||
.use {
|
||||
margin-bottom: 123px;
|
||||
}
|
||||
|
||||
.use__img {
|
||||
width: 67.5%;
|
||||
margin-left: 16px;
|
||||
margin-bottom: 31px;
|
||||
}
|
||||
|
||||
.use__btn {
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
|
||||
.use__link {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 26px;
|
||||
color: var(--color-grey2);
|
||||
}
|
||||
|
||||
.use .title {
|
||||
max-width: 80%;
|
||||
margin-bottom: 49px;
|
||||
}
|
||||
|
||||
.use--diff .title {
|
||||
width: 60%;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.use--diff .use__img {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
|
||||
.use--lett {
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
|
||||
.use--lett .title {
|
||||
margin-bottom: 51px;
|
||||
}
|
||||
|
||||
.use--lett .use__img {
|
||||
margin-left: -5px;
|
||||
margin-right: -5px;
|
||||
max-width: 110%;
|
||||
width: 1290px;
|
||||
}
|
||||
.use{margin-bottom:123px}@media (min-width: 1720px){.use{margin-bottom:184px}}@media (max-width: 1304.98px){.use{margin-bottom:142px}}@media (max-width: 991.98px){.use{margin-bottom:121px}}.use__img{width:67.5%;margin-left:16px;margin-bottom:31px}@media (min-width: 1720px){.use__img{width:50.2%;margin-left:15px;margin-bottom:46px}}@media (max-width: 1304.98px){.use__img{width:77%;margin-left:10px;margin-bottom:34px}}@media (max-width: 991.98px){.use__img{margin-left:0;width:100%;margin-bottom:40px}}@media (max-width: 767.98px){.use__img{margin-bottom:30px}}.use__btn{margin-bottom:11px;text-align:center}@media (max-width: 767.98px){.use__btn{max-width:100%;padding-left:50px;padding-right:50px}}.use__link{font-size:18px;font-weight:600;line-height:26px;color:var(--color-grey2)}.use .title{max-width:80%;margin-bottom:49px}@media (min-width: 1720px){.use .title{max-width:40%}}@media (max-width: 991.98px){.use .title{margin-bottom:40px}}@media (max-width: 767.98px){.use .title{max-width:100%;margin-bottom:29px}}.use--lett{margin-bottom:120px}@media (min-width: 1720px){.use--lett{margin-bottom:126px}}@media (max-width: 1304.98px){.use--lett{margin-bottom:106px}}@media (max-width: 991.98px){.use--lett{margin-bottom:79px}}@media (max-width: 767.98px){.use--lett{margin-bottom:81px}}.use--lett .title{margin-bottom:51px}@media (max-width: 1304.98px){.use--lett .title{margin-bottom:39px}}@media (max-width: 767.98px){.use--lett .title{margin-bottom:0}}.use--lett .use__img{margin-left:-5px;margin-right:-5px;max-width:110%;width:1290px}@media (min-width: 1720px){.use--lett .use__img{width:initial}}@media (max-width: 1304.98px){.use--lett .use__img{margin-left:0;margin-right:0;max-width:100%;width:1120px}}@media (max-width: 767.98px){.use--lett .use__img{max-width:103%;margin-left:-5px;margin-top:-6px}}@media (max-width: 479.98px){.use--lett .use__img{margin-bottom:3px}}@media (max-width: 991.98px){.use .h3{max-width:75%;margin:0 auto 22px}}@media (max-width: 767.98px){.use .h3{max-width:100%;margin-bottom:16px}}
|
||||
|
||||
@@ -1,5 +1,29 @@
|
||||
.uses {
|
||||
margin-bottom: 122px;
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.uses {
|
||||
margin-bottom: 136px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.uses {
|
||||
margin-bottom: 125px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.uses {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
.uses {
|
||||
margin-bottom: 199px;
|
||||
}
|
||||
}
|
||||
|
||||
.uses__grid {
|
||||
@@ -10,17 +34,156 @@
|
||||
/* width: 101.5%; */
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.uses__grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
column-gap: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
.uses__grid {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.uses__item {
|
||||
min-height: 50px;
|
||||
margin-bottom: 43px;
|
||||
margin-bottom: 19px;
|
||||
padding: 0 50px 0 2px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.uses__item {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.uses__item {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.uses__item p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.uses__icon {
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
.uses__icon {
|
||||
width: 147px;
|
||||
height: 147px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.uses .title {
|
||||
max-width: 50%;
|
||||
margin: 0 auto 60px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.uses .title {
|
||||
max-width: 70%;
|
||||
margin-bottom: 39px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
.uses .title {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.uses__title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 36px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.uses--cstmr .uses__item {
|
||||
text-align: center;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.uses--cstmr .uses__item {
|
||||
margin-bottom: 42px;
|
||||
min-height: 255px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
.uses--cstmr .uses__item {
|
||||
margin-bottom: 25px;
|
||||
min-height: 194px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.uses--cstmr .uses__item p {
|
||||
max-width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
.uses--cstmr .uses__item p {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.uses--cstmr .uses__icon {
|
||||
width: 118px;
|
||||
height: 118px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.uses--cstmr .uses__icon {
|
||||
width: 142px;
|
||||
height: 142px;
|
||||
margin-bottom: 23px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
.uses--cstmr .uses__icon {
|
||||
width: 117px;
|
||||
height: 117px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.uses--cstmr .uses__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
.uses--cstmr .title {
|
||||
margin-bottom: 61px;
|
||||
max-width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.uses--cstmr .title {
|
||||
margin-bottom: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
.uses--cstmr .title {
|
||||
max-width: 90%;
|
||||
margin-bottom: 31px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -253,6 +253,7 @@ footer {
|
||||
height: 318px;
|
||||
background: #272424;
|
||||
margin-top: 50px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
section.register>h1 {
|
||||
@@ -419,6 +420,7 @@ footer>div {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
|
||||
}
|
||||
|
||||
.footer_text_contact {
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
BIN
static/img/png/customer/sender-card2.png
Normal file
BIN
static/img/png/customer/sender-card2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
BIN
static/img/png/customer/sender-card3-md.png
Normal file
BIN
static/img/png/customer/sender-card3-md.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
static/img/png/customer/sender-card3.png
Normal file
BIN
static/img/png/customer/sender-card3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
static/img/png/customer/use-1120.png
Normal file
BIN
static/img/png/customer/use-1120.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 373 KiB |
BIN
static/img/png/customer/use-1280.png
Normal file
BIN
static/img/png/customer/use-1280.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 373 KiB |
BIN
static/img/png/customer/use-1720.png
Normal file
BIN
static/img/png/customer/use-1720.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 373 KiB |
BIN
static/img/png/customer/use-328.png
Normal file
BIN
static/img/png/customer/use-328.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
BIN
static/img/png/customer/use-640.png
Normal file
BIN
static/img/png/customer/use-640.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 251 KiB |
BIN
static/img/png/mover/about-1120.png
Normal file
BIN
static/img/png/mover/about-1120.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
BIN
static/img/png/mover/about-1280.png
Normal file
BIN
static/img/png/mover/about-1280.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
BIN
static/img/png/mover/about-1720.png
Normal file
BIN
static/img/png/mover/about-1720.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
BIN
static/img/png/mover/about-328.png
Normal file
BIN
static/img/png/mover/about-328.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 305 KiB |
BIN
static/img/png/mover/about-640.png
Normal file
BIN
static/img/png/mover/about-640.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
BIN
static/img/png/mover/benefits-1120.png
Normal file
BIN
static/img/png/mover/benefits-1120.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
|
Before Width: | Height: | Size: 168 KiB After Width: | Height: | Size: 168 KiB |
BIN
static/img/png/mover/benefits-1720.png
Normal file
BIN
static/img/png/mover/benefits-1720.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 257 KiB |
BIN
static/img/png/mover/benefits-328.png
Normal file
BIN
static/img/png/mover/benefits-328.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 558 KiB |
BIN
static/img/png/mover/benefits-640.png
Normal file
BIN
static/img/png/mover/benefits-640.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 172 KiB |
BIN
static/img/png/mover/image1.png
Normal file
BIN
static/img/png/mover/image1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
static/img/png/mover/image2.png
Normal file
BIN
static/img/png/mover/image2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
BIN
static/img/png/mover/image3.png
Normal file
BIN
static/img/png/mover/image3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
BIN
static/img/png/mover/image4.png
Normal file
BIN
static/img/png/mover/image4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
BIN
static/img/png/mover/sender-card1.png
Normal file
BIN
static/img/png/mover/sender-card1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 141 KiB |
BIN
static/img/png/mover/sender-card2.png
Normal file
BIN
static/img/png/mover/sender-card2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
BIN
static/img/png/mover/sender-card3-md.png
Normal file
BIN
static/img/png/mover/sender-card3-md.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
static/img/png/mover/sender-card3.png
Normal file
BIN
static/img/png/mover/sender-card3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
static/img/png/mover/sore-1120.png
Normal file
BIN
static/img/png/mover/sore-1120.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 172 KiB |
BIN
static/img/png/mover/sore-1280.png
Normal file
BIN
static/img/png/mover/sore-1280.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 171 KiB |
BIN
static/img/png/mover/sore-1720.png
Normal file
BIN
static/img/png/mover/sore-1720.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 181 KiB |
BIN
static/img/png/mover/sore-328.png
Normal file
BIN
static/img/png/mover/sore-328.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
BIN
static/img/png/mover/sore-640.png
Normal file
BIN
static/img/png/mover/sore-640.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 230 KiB |
BIN
static/img/png/mover/use-1120.png
Normal file
BIN
static/img/png/mover/use-1120.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 365 KiB |
BIN
static/img/png/mover/use-1280.png
Normal file
BIN
static/img/png/mover/use-1280.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 366 KiB |
BIN
static/img/png/mover/use-1720.png
Normal file
BIN
static/img/png/mover/use-1720.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 365 KiB |
BIN
static/img/png/mover/use-328.png
Normal file
BIN
static/img/png/mover/use-328.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 767 KiB |
BIN
static/img/png/mover/use-640.png
Normal file
BIN
static/img/png/mover/use-640.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 231 KiB |
BIN
static/img/png/mover/use-letters-1120.png
Normal file
BIN
static/img/png/mover/use-letters-1120.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 330 KiB |
BIN
static/img/png/mover/use-letters-1280.png
Normal file
BIN
static/img/png/mover/use-letters-1280.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 388 KiB |
BIN
static/img/png/mover/use-letters-1739.png
Normal file
BIN
static/img/png/mover/use-letters-1739.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 622 KiB |
BIN
static/img/png/mover/use-letters-328.png
Normal file
BIN
static/img/png/mover/use-letters-328.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 663 KiB |
BIN
static/img/png/mover/use-letters-640.png
Normal file
BIN
static/img/png/mover/use-letters-640.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 129 KiB |
BIN
static/img/png/mover/use-letters-s1.png
Normal file
BIN
static/img/png/mover/use-letters-s1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 190 KiB |
BIN
static/img/png/mover/use-letters-s2.png
Normal file
BIN
static/img/png/mover/use-letters-s2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 231 KiB |
BIN
static/img/png/mover/use-letters-s3.png
Normal file
BIN
static/img/png/mover/use-letters-s3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 245 KiB |
BIN
static/img/png/mover/use-letters-s4.png
Normal file
BIN
static/img/png/mover/use-letters-s4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 426 KiB |
BIN
static/img/png/mover/use-letters-s5.png
Normal file
BIN
static/img/png/mover/use-letters-s5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 321 KiB |
BIN
static/img/png/mover/use-letters-s6.png
Normal file
BIN
static/img/png/mover/use-letters-s6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 307 KiB |
BIN
static/img/png/mover/use-letters-s7.png
Normal file
BIN
static/img/png/mover/use-letters-s7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 695 KiB |
BIN
static/img/png/mover/use-letters-s8.png
Normal file
BIN
static/img/png/mover/use-letters-s8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 109 KiB |
4
static/img/svg/airplane_takeoff.svg
Normal file
4
static/img/svg/airplane_takeoff.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="147" height="147" viewBox="0 0 147 147" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.7812 124.031H96.4688" stroke="#FF613A" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M9.7043 80.6205L31.3523 100.89C34.2389 103.596 37.9217 105.298 41.8531 105.743C45.7845 106.188 49.7545 105.352 53.1727 103.36L140.109 52.8283L129.429 39.7362C126.651 36.3429 122.75 34.0553 118.433 33.2865C114.115 32.5177 109.665 33.3186 105.886 35.5444L80.3906 50.5315L45.9375 39.0471L36.4629 43.124C35.7541 43.4278 35.1331 43.9052 34.6573 44.5121C34.1815 45.1189 33.8661 45.8359 33.7402 46.5967C33.6144 47.3576 33.6821 48.1379 33.9371 48.8656C34.1922 49.5934 34.6264 50.2453 35.1996 50.7612L52.8281 66.6096L36.75 75.7971L20.6719 68.9065L11.025 73.0408C10.3232 73.3423 9.70757 73.8141 9.23395 74.4134C8.76033 75.0127 8.44363 75.7206 8.31251 76.4731C8.18139 77.2256 8.23999 77.999 8.48301 78.7231C8.72602 79.4473 9.14578 80.0994 9.7043 80.6205V80.6205Z" stroke="#FF613A" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
6
static/img/svg/briefcase.svg
Normal file
6
static/img/svg/briefcase.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg width="147" height="147" viewBox="0 0 147 147" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M124.031 41.3438H22.9688C20.4317 41.3438 18.375 43.4004 18.375 45.9375V119.438C18.375 121.975 20.4317 124.031 22.9688 124.031H124.031C126.568 124.031 128.625 121.975 128.625 119.438V45.9375C128.625 43.4004 126.568 41.3438 124.031 41.3438Z" stroke="#FF613A" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M96.4688 41.3438V32.1562C96.4688 29.7196 95.5008 27.3827 93.7778 25.6597C92.0548 23.9367 89.7179 22.9688 87.2812 22.9688H59.7188C57.2821 22.9688 54.9452 23.9367 53.2222 25.6597C51.4992 27.3827 50.5312 29.7196 50.5312 32.1562V41.3438" stroke="#FF613A" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M128.625 72.5234C111.871 82.2129 92.8542 87.3039 73.5 87.2809C54.1422 87.3312 35.1185 82.2384 18.375 72.5234" stroke="#FF613A" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M66.6094 68.9062H80.3906" stroke="#FF613A" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
BIN
static/img/webp/customer/image1.webp
Normal file
BIN
static/img/webp/customer/image1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
static/img/webp/customer/image2.webp
Normal file
BIN
static/img/webp/customer/image2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
static/img/webp/customer/image3.webp
Normal file
BIN
static/img/webp/customer/image3.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
static/img/webp/customer/image4.webp
Normal file
BIN
static/img/webp/customer/image4.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
@@ -1,9 +1,11 @@
|
||||
@import "./moover/root";
|
||||
@import "./moover/header";
|
||||
@import "./moover/presentation";
|
||||
@import "./moover/cards";
|
||||
@import "./moover/easy";
|
||||
@import "./moover/chatterbox";
|
||||
@import "./moover/use";
|
||||
@import "./moover/diff";
|
||||
@import "./moover/animate";
|
||||
@import "./moover/about";
|
||||
@import "./moover/benefits";
|
||||
|
||||
@@ -1,42 +1,141 @@
|
||||
.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);
|
||||
|
||||
}
|
||||
@media (max-width: 1304.98px) {
|
||||
margin-bottom: 138px;
|
||||
}
|
||||
|
||||
.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 (max-width: 991.98px) {
|
||||
margin-bottom: 110px;
|
||||
}
|
||||
|
||||
.about__right {
|
||||
text-align: left;
|
||||
padding-top: 43px;
|
||||
padding-left: 50px;
|
||||
}
|
||||
.title {
|
||||
margin-bottom: 60px;
|
||||
|
||||
.about__half {
|
||||
max-width: 50%;
|
||||
float: left;
|
||||
}
|
||||
@media (min-width: 1720px) {
|
||||
margin-bottom: 49px;
|
||||
}
|
||||
|
||||
.about__half:last-child {
|
||||
padding-left: 16px;
|
||||
max-width: 47%;
|
||||
}
|
||||
@media (max-width: 1304.98px) {
|
||||
margin-bottom: 39px;
|
||||
}
|
||||
|
||||
.about b {
|
||||
letter-spacing: 0.4px;
|
||||
@media (max-width: 991.98px) {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
margin-bottom: 37px;
|
||||
}
|
||||
}
|
||||
|
||||
&__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&__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;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
margin-top: 19px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
margin-left: 0;
|
||||
margin-bottom: 49px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
&__right {
|
||||
text-align: left;
|
||||
padding-top: 43px;
|
||||
padding-left: 50px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
padding-top: 90px;
|
||||
padding-left: 21px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
padding-left: 11px;
|
||||
padding-top: 19px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
padding: 0 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
&__half {
|
||||
max-width: 50%;
|
||||
float: left;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
max-width: initial;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-left: 16px;
|
||||
max-width: 47%;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
max-width: initial;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
b {
|
||||
letter-spacing: 0.4px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
letter-spacing: 0.9px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
@media (min-width: 1720px) {
|
||||
margin-bottom: 39px;
|
||||
}
|
||||
}
|
||||
}
|
||||
100
styles/moover/animate.scss
vendored
100
styles/moover/animate.scss
vendored
@@ -6,12 +6,67 @@
|
||||
color: white;
|
||||
margin-bottom: 160px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
padding-top: 100px;
|
||||
padding-bottom: 89px;
|
||||
margin-bottom: 180px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
margin-bottom: 141px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 29px;
|
||||
margin-bottom: 121px;
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
padding: 30px 7px 19px;
|
||||
}
|
||||
|
||||
&.left {
|
||||
transform: translateX(-180px);
|
||||
}
|
||||
|
||||
&.right {
|
||||
transform: translateX(180px);
|
||||
|
||||
.title {
|
||||
margin-bottom: 17px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
max-width: 80%;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
margin-bottom: 31px;
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
margin-bottom: 31px;
|
||||
}
|
||||
}
|
||||
|
||||
.use__btn {
|
||||
@media (max-width: 479.98px) {
|
||||
margin-top: -11px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&__link {
|
||||
@@ -23,10 +78,55 @@
|
||||
margin-bottom: 25px;
|
||||
max-width: 87%;
|
||||
/*width: 90%;*/
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
max-width: 99%;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
max-width: 85%;
|
||||
font-size: 24px;
|
||||
line-height: 29.05px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
max-width: 100%;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
width: 47%;
|
||||
margin: 0 auto 23px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
line-height: 26px;
|
||||
letter-spacing: 0.1px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
width: 54%;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
width: 102%;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
.use__btn {
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
margin-top: -6px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,29 +1,126 @@
|
||||
.benefits {
|
||||
margin-bottom: 132px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
margin-bottom: 147px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
margin-bottom: 101px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
margin-bottom: 93px;
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
margin-bottom: 103px;
|
||||
}
|
||||
|
||||
&__grid {
|
||||
text-align: left;
|
||||
display: grid;
|
||||
grid-template-columns: 1.5fr 3fr 1.5fr;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
min-height: 122px;
|
||||
padding-right: 7px;
|
||||
margin-bottom: 22px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
min-height: 145px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
padding-right: 0;
|
||||
margin-bottom: 19px;
|
||||
min-height: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&__second {
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
grid-column: 1 / 3;
|
||||
order: -1;
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
grid-column: 1/2;
|
||||
margin-bottom: 31px;
|
||||
}
|
||||
}
|
||||
|
||||
&__third {
|
||||
padding-left: 16px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
padding-left: 31px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
padding-left: 11px;
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-bottom: 76px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
margin-bottom: 93px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
margin-bottom: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
top: 14px;
|
||||
right: -11px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
top: -33px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
top: 20px;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
@media (min-width: 1720px) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
@media (max-width: 479.98px) {
|
||||
margin-bottom: 13px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,34 +1,179 @@
|
||||
.cards {
|
||||
|
||||
&__list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
&__item {
|
||||
position: relative;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
max-width: 270px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
max-width: 251px;
|
||||
margin-right: 18px;
|
||||
}
|
||||
|
||||
.slick-active &,
|
||||
&:hover, &:focus {
|
||||
|
||||
.cards__desc {
|
||||
-webkit-line-clamp: initial; /* number of lines to show */
|
||||
line-clamp: initial;
|
||||
max-height: 17em;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__img {
|
||||
margin-bottom: 5px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
scale: 1.05;
|
||||
transition: scale 0.15s linear;
|
||||
}
|
||||
}
|
||||
|
||||
&__desc {
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
padding: 0 5px;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 7; /* number of lines to show */
|
||||
line-clamp: 7;
|
||||
-webkit-box-orient: vertical;
|
||||
transition: all 0.3s ease-in-out;
|
||||
max-height: 10em;
|
||||
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
.slick-active &,
|
||||
&:hover, &:focus {
|
||||
-webkit-line-clamp: initial; /* number of lines to show */
|
||||
line-clamp: initial;
|
||||
max-height: 999em;
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
margin-bottom: 1px;
|
||||
padding-left: 58px;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
margin: 0;
|
||||
padding: 1rem 0;
|
||||
|
||||
list-style-type: none;
|
||||
|
||||
li {
|
||||
margin: 0 0.25rem;
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
margin: 0 0.31rem;
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&--cstmr .cards {
|
||||
&__desc {
|
||||
padding: 0 50px;
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cards__list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
.cards__item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cards__img:hover {
|
||||
scale: 1.05;
|
||||
transition: scale 0.15s linear;
|
||||
}
|
||||
|
||||
.cards__img {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.cards__desc {
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.cards__arrow {
|
||||
width: 62px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
right: -30px;
|
||||
top: -21px;
|
||||
background-image: url("/static/img/svg/Arrow23.svg");
|
||||
}
|
||||
@@ -1,9 +1,55 @@
|
||||
.chatterbox {
|
||||
margin-bottom: 160px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
margin-bottom: 180px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
margin-bottom: 142px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
margin-left: -50vw;
|
||||
margin-right: -50vw;
|
||||
margin-bottom: 122px;
|
||||
//max-width: 100vw;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
max-width: 100vw;
|
||||
margin: 0 auto 121px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__slider {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
max-width: 1640px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
max-width: 1100px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
max-width: 720px;
|
||||
//position: relative;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
width: 720px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
//position: relative;
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
width: 830px;
|
||||
max-width: initial;
|
||||
}
|
||||
}
|
||||
|
||||
&__slide {
|
||||
@@ -14,6 +60,30 @@
|
||||
margin: auto;
|
||||
position: relative;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
width: 456px;
|
||||
height: 836px;
|
||||
background-size: 456px 836px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
width: 308px;
|
||||
height: 565px;
|
||||
background-size: 308px 565px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
width: 206px;
|
||||
height: 377px;
|
||||
background-size: 206px 377px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
width: 234px;
|
||||
height: 429px;
|
||||
background-size: 234px 429px;
|
||||
}
|
||||
|
||||
&.loaded {
|
||||
video {
|
||||
opacity: 1;
|
||||
@@ -29,6 +99,11 @@
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
pointer-events: none;
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
position: relative;
|
||||
top: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
@@ -47,6 +122,10 @@
|
||||
border-radius: 25px;
|
||||
background-color: grey;
|
||||
overflow: hidden;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
border-radius: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
&__vbtn {
|
||||
@@ -73,6 +152,21 @@
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
transition: opacity 100ms linear;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
width: 109px;
|
||||
height: 109px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
}
|
||||
}
|
||||
|
||||
&::before,
|
||||
@@ -91,6 +185,16 @@
|
||||
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;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
border-width: 10px 0 10px 14px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -100,32 +204,121 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 600px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
height: 827px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
height: 530px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
height: 370px;
|
||||
}
|
||||
}
|
||||
|
||||
&__mbtns {
|
||||
position: absolute;
|
||||
top: 58%;
|
||||
transform: translateY(-50%);
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
top: 61.6%;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-bottom: 60px;
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
margin-bottom: 39px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
right: -40px;
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
right: -10px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-size: 32%;
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-prev {
|
||||
left: -40px;
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
left: -10px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-size: 32%;
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-list {
|
||||
@media (max-width: 991.98px) {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.slick-slide:not(.slick-center) .chatterbox__slide {
|
||||
scale: 0.72;
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
scale: 0.69;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
scale: 0.8;
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
scale: 0.85;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-center .chatterbox__vbtn {
|
||||
opacity: 1;
|
||||
pointer-events: initial;
|
||||
z-index: 1;
|
||||
}
|
||||
.slick-center {
|
||||
|
||||
.chatterbox__vbtn {
|
||||
opacity: 1;
|
||||
pointer-events: initial;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.chatterbox__vbox video {
|
||||
pointer-events: initial;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.chatterbox__slide {
|
||||
|
||||
}
|
||||
|
||||
.slick-center .chatterbox__vbox video {
|
||||
pointer-events: initial;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
283
styles/moover/diff.scss
Normal file
283
styles/moover/diff.scss
Normal file
@@ -0,0 +1,283 @@
|
||||
.diff {
|
||||
margin-bottom: 179px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
margin-bottom: 172px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
margin-bottom: 140px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
margin-bottom: 125px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
margin-bottom: 139px;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 60%;
|
||||
margin-bottom: 65px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
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;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
width: 100%;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
&__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;
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
@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 (min-width: 1720px) {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.diff__coll-title {
|
||||
padding-left: 39px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
margin-left: 29px;
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
margin-left: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.diff__coll-title {
|
||||
padding-right: 39px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
padding-right: 0;
|
||||
}
|
||||
@media (max-width: 1304.98px) {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
//margin-bottom: 29px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&__coll-title {
|
||||
margin-bottom: 38px;
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
margin-bottom: 19px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
margin-bottom: 29px;
|
||||
}
|
||||
}
|
||||
|
||||
&__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: 20px;
|
||||
gap: 20px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
font-size: 18px;
|
||||
margin-bottom: 25px;
|
||||
padding-bottom: 9px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
font-size: 16px;
|
||||
line-height: 19.36px;
|
||||
padding-right: 15px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
&: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;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
border-radius: 13px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
border-radius: 11px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
&::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==);
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
scale: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.diff__item--error & {
|
||||
background-color: #F9CCCC;
|
||||
|
||||
&::before {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI4LjEyNSA3Ljg3NUw3Ljg3NSAyOC4xMjUiIHN0cm9rZT0iI0ZGMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTI4LjEyNSAyOC4xMjVMNy44NzUgNy44NzUiIHN0cm9rZT0iI0ZGMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==);
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
scale: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -1,105 +1,334 @@
|
||||
.easy {
|
||||
margin-bottom: 162px;
|
||||
}
|
||||
|
||||
.easy .title {
|
||||
max-width: 55%;
|
||||
margin-bottom: 21px;
|
||||
}
|
||||
@media (min-width: 1720px) {
|
||||
margin-bottom: 180px;
|
||||
}
|
||||
|
||||
.easy .subtitle {
|
||||
margin-bottom: 41px;
|
||||
}
|
||||
@media (max-width: 1304.98px) {
|
||||
margin-bottom: 140px;
|
||||
}
|
||||
|
||||
.easy__grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: repeat(2, minmax(186px, auto));
|
||||
grid-template-areas:
|
||||
@media (max-width: 991.98px) {
|
||||
margin-bottom: 121px;
|
||||
}
|
||||
|
||||
|
||||
.title {
|
||||
max-width: 55%;
|
||||
margin-bottom: 21px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
max-width: 45%;
|
||||
margin-bottom: 23px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
max-width: 75%;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
max-width: 95%;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-bottom: 41px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
margin-bottom: 59px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
max-width: 90%;
|
||||
margin: 0 auto 23px;
|
||||
}
|
||||
}
|
||||
|
||||
&__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;
|
||||
}
|
||||
@media (max-width: 1304.98px) {
|
||||
grid-column-gap: 69px;
|
||||
grid-template-rows: repeat(2, minmax(172px, auto));
|
||||
margin-bottom: 41px;
|
||||
}
|
||||
|
||||
.easy__item--fir p {
|
||||
width: 93%;
|
||||
margin-bottom: 29px;
|
||||
}
|
||||
@media (max-width: 991.98px) {
|
||||
display: block;
|
||||
margin-bottom: 37px;
|
||||
}
|
||||
|
||||
.easy__item--sec img {
|
||||
margin-bottom: -10px;
|
||||
margin-right: -5px;
|
||||
}
|
||||
@media (max-width: 767.98px) {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.easy__item--thr img {
|
||||
margin-bottom: -10px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
&__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--sec {
|
||||
grid-area: b;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
&--fir {
|
||||
grid-area: a;
|
||||
margin-right: 60px;
|
||||
padding-bottom: 0;
|
||||
|
||||
.easy__item--sec p,
|
||||
.easy__item--thr p,
|
||||
.easy__item--sec,
|
||||
.easy__item--thr {
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
@media (min-width: 1720px) {
|
||||
margin-right: -10px;
|
||||
padding-top: 31px;
|
||||
}
|
||||
|
||||
.easy__item--thr {
|
||||
grid-area: c;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@media (max-width: 1304.98px) {
|
||||
margin-right: 13px;
|
||||
}
|
||||
|
||||
.easy__item--thr p {
|
||||
max-width: 50%;
|
||||
}
|
||||
@media (max-width: 991.98px) {
|
||||
padding-top: 17px;
|
||||
margin-right: 0;
|
||||
margin-bottom: 49px;
|
||||
}
|
||||
|
||||
.easy__arrow {
|
||||
width: 68px;
|
||||
height: 18px;
|
||||
background-image: url("/static/img/svg/Arrow08.svg");
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
@media (max-width: 767.98px) {
|
||||
margin-bottom: 42px;
|
||||
}
|
||||
|
||||
.easy__arrow--fir {
|
||||
top: 46%;
|
||||
right: 101%;
|
||||
}
|
||||
p {
|
||||
width: 93%;
|
||||
margin-bottom: 29px;
|
||||
|
||||
.easy__arrow--sec {
|
||||
top: 117%;
|
||||
left: 30%;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
@media (min-width: 1720px) {
|
||||
width: 89%;
|
||||
margin-bottom: 53px;
|
||||
}
|
||||
|
||||
.easy__btn {
|
||||
margin-top: -21px;
|
||||
@media (max-width: 991.98px) {
|
||||
max-width: 78%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--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 (min-width: 1720px) {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
padding-top: 35px;
|
||||
padding-bottom: 37px;
|
||||
margin-bottom: 46px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
display: block;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 49px;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-bottom: -10px;
|
||||
margin-right: -5px;
|
||||
max-width: 50.1%;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
max-width: 53%;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
max-width: 42%;
|
||||
margin-bottom: -4px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
max-width: 104%;
|
||||
position: relative;
|
||||
left: -6px;
|
||||
top: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--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 (min-width: 1720px) {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
padding-top: 42px;
|
||||
padding-bottom: 46px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
display: block;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
img {
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 50%;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
max-width: 60%;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
margin-bottom: 22px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__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;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
scale: 0.8;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&--fir {
|
||||
top: 46%;
|
||||
right: 101%;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
right: 105%;
|
||||
top: 34%;
|
||||
}
|
||||
@media (max-width: 1304.98px) {
|
||||
top: 48%;
|
||||
}
|
||||
}
|
||||
|
||||
&--sec {
|
||||
top: 117%;
|
||||
left: 30%;
|
||||
transform: rotate(90deg);
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
left: 45%;
|
||||
top: 124%;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
left: 38%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__btn {
|
||||
margin-top: -21px;
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
margin-top: -19px;
|
||||
padding-left: 54px;
|
||||
padding-right: 54px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
padding-left: 50px;
|
||||
padding-right: 50px;
|
||||
margin-top: -8px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
108
styles/moover/header.scss
Normal file
108
styles/moover/header.scss
Normal file
@@ -0,0 +1,108 @@
|
||||
.header {
|
||||
margin-top: 0;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
padding: 40px 5px;
|
||||
transition: all 0.1s ease-in-out;
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
padding-top: 37px;
|
||||
padding-bottom: 41px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
padding-top: 19px;
|
||||
padding-bottom: 19px;
|
||||
}
|
||||
|
||||
&.scrolled {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
box-shadow: var(--box-shadow-primary);
|
||||
border-bottom: 1px solid var(--color-grey);
|
||||
}
|
||||
|
||||
&__grid,
|
||||
&__list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
position: relative;
|
||||
left: 5px;
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
left: 6px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
left: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
&__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.5%;
|
||||
}
|
||||
}
|
||||
|
||||
&__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: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
left: -4px;
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
left: -8px;
|
||||
}
|
||||
|
||||
&-content {
|
||||
right: 0;
|
||||
height: initial;
|
||||
|
||||
@media (max-width: 575px) {
|
||||
right: 0;
|
||||
left: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,64 +1,163 @@
|
||||
.presentation {
|
||||
margin: 20px -65px 140px;
|
||||
margin: 12px -65px 140px;
|
||||
|
||||
@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%;
|
||||
|
||||
@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 (max-width: 1304.98px) {
|
||||
margin-bottom: 118px;
|
||||
}
|
||||
}
|
||||
|
||||
.presentation__title {
|
||||
margin-bottom: 23px;
|
||||
}
|
||||
@media (max-width: 991.98px) {
|
||||
margin-bottom: 105px;
|
||||
}
|
||||
|
||||
.presentation__subtitle {
|
||||
margin-bottom: 41px;
|
||||
font-weight: 600;
|
||||
}
|
||||
&__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%;
|
||||
|
||||
.presentation__btn {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
@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__next {
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
@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;
|
||||
}
|
||||
|
||||
.presentation__arrows {
|
||||
padding-top: 2px;
|
||||
animation: jump 2s ease-in-out infinite;
|
||||
@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;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
margin-bottom: 77px;
|
||||
}
|
||||
}
|
||||
|
||||
&__bottom {
|
||||
|
||||
.subtitle {
|
||||
@media (max-width: 991.98px) {
|
||||
max-width: 40%;
|
||||
margin: 0 auto 30px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
max-width: 65%;
|
||||
margin-bottom: 21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-bottom: 23px;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
max-width: 75%;
|
||||
margin: 0 auto 19px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
margin-bottom: 41px;
|
||||
font-weight: 600;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
max-width: 55%;
|
||||
margin: 0 auto 40px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
margin-bottom: 30px;
|
||||
max-width: 77%;
|
||||
}
|
||||
}
|
||||
|
||||
&__btn {
|
||||
margin-bottom: 40px;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
padding-left: 82px;
|
||||
padding-right: 82px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
&__next {
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
&__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;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
max-width: 1140px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
//padding-left: 58px;
|
||||
}
|
||||
}
|
||||
|
||||
&__bottom .presentation__title {
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes jump {
|
||||
@@ -81,12 +180,3 @@
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
|
||||
.presentation__bottom .presentation__title {
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
|
||||
.presentation__cards {
|
||||
max-width: 1300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@@ -2,7 +2,6 @@
|
||||
margin: 0 auto;
|
||||
width: 1280px;
|
||||
position: relative;
|
||||
min-height: 695px;
|
||||
}
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
@@ -12,18 +11,26 @@
|
||||
}
|
||||
|
||||
|
||||
/*@media (max-width: 1019.98px) {*/
|
||||
/* .container {*/
|
||||
/* width: 720px*/
|
||||
/* }*/
|
||||
/*}*/
|
||||
@media (max-width: 1304.98px) {
|
||||
.container {
|
||||
width: 1120px;
|
||||
max-width: 88vw;
|
||||
}
|
||||
}
|
||||
|
||||
/*@media (max-width: 767.98px) {*/
|
||||
/* .container {*/
|
||||
/* margin: 0 15px;*/
|
||||
/* width: auto*/
|
||||
/* }*/
|
||||
/*}*/
|
||||
@media (max-width: 991.98px) {
|
||||
.container {
|
||||
width: 640px;
|
||||
max-width: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.container {
|
||||
margin: 0 16px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
--color-primary: #FF613A;
|
||||
@@ -41,6 +48,24 @@
|
||||
color: var(--color-black2);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
|
||||
padding-top: 129px;
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
padding-top: 126px;
|
||||
}
|
||||
@media (max-width: 991.98px) {
|
||||
padding-top: 85px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
padding-top: 57px;
|
||||
}
|
||||
}
|
||||
|
||||
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 700;
|
||||
|
||||
@@ -60,12 +85,21 @@ h2, .h2 {
|
||||
font-size: 24px;
|
||||
line-height: 36px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
font-size: 28px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
h3, .h3 {
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
h4, .h4 {
|
||||
@@ -77,10 +111,28 @@ h4, .h4 {
|
||||
p {
|
||||
line-height: 22px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
font-size: 20px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
b {
|
||||
font-weight: 500;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -111,9 +163,22 @@ 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;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
font-size: 32px;
|
||||
line-height: 38.73px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -121,18 +186,107 @@ 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;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
margin-bottom: 71px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
|
||||
&__xxl {
|
||||
display: inline-flex;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__md {
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__xs {
|
||||
@media (max-width: 479.98px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.is-container.wrapper_main {
|
||||
.show {
|
||||
|
||||
&__xxl {
|
||||
display: none;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&__md {
|
||||
display: none;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
|
||||
&__xs {
|
||||
@media (min-width: 480px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.br {
|
||||
&--xxl {
|
||||
@media (min-width: 1440px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&--md {
|
||||
@media (max-width: 991.98px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&--sm {
|
||||
@media (max-width: 767.98px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-container.wrapper_main {
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
max-width: initial;
|
||||
}
|
||||
}
|
||||
|
||||
& > .container {
|
||||
position: relative;
|
||||
left: 15px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
left: 17px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,27 +1,124 @@
|
||||
.sore {
|
||||
margin-bottom: 160px;
|
||||
margin-top: 1px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
margin-bottom: 178px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
margin-bottom: 140px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
&__img {
|
||||
margin: 0 auto 26px;
|
||||
margin: 0 auto 13px;
|
||||
position: relative;
|
||||
left: -17px;
|
||||
top: -13px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
margin-bottom: 40px;
|
||||
top: -5px;
|
||||
left: -21px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
left: 2px;
|
||||
top: -22px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
top: -8px;
|
||||
left: -15px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
max-width: 106%;
|
||||
top: -26px;
|
||||
left: -18px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-bottom: 40px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
margin-bottom: 61px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
margin-bottom: 29px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.subtitle {
|
||||
max-width: 62%;
|
||||
margin: 0 auto -1px;
|
||||
margin: 0 auto 10px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
line-height: 26px;
|
||||
max-width: 60%;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
max-width: 65%;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
max-width: 85%;
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
max-width: 99%;
|
||||
}
|
||||
}
|
||||
|
||||
.h3 {
|
||||
max-width: 47%;
|
||||
margin: 0 auto 19px;
|
||||
margin: 0 auto 19px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
max-width: 38%;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
max-width: 65%;
|
||||
margin-bottom: 21px;
|
||||
}
|
||||
@media (max-width: 479.98px) {
|
||||
max-width: 100%;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
&__btn {
|
||||
@media (max-width: 479.98px) {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,14 +1,55 @@
|
||||
.use {
|
||||
margin-bottom: 123px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
margin-bottom: 184px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
margin-bottom: 142px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
margin-bottom: 121px;
|
||||
}
|
||||
|
||||
&__img {
|
||||
width: 67.5%;
|
||||
margin-left: 16px;
|
||||
margin-bottom: 31px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
width: 50.2%;
|
||||
margin-left: 15px;
|
||||
margin-bottom: 46px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
width: 77%;
|
||||
margin-left: 10px;
|
||||
margin-bottom: 34px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
&__btn {
|
||||
margin-bottom: 11px;
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
max-width: 100%;
|
||||
padding-left: 50px;
|
||||
padding-right: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
@@ -21,26 +62,51 @@
|
||||
.title {
|
||||
max-width: 80%;
|
||||
margin-bottom: 49px;
|
||||
}
|
||||
|
||||
&--diff {
|
||||
.title {
|
||||
width: 60%;
|
||||
margin-bottom: 60px;
|
||||
@media (min-width: 1720px) {
|
||||
max-width: 40%;
|
||||
}
|
||||
|
||||
.use__img {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
margin-bottom: 17px;
|
||||
@media (max-width: 991.98px) {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
max-width: 100%;
|
||||
margin-bottom: 29px;
|
||||
}
|
||||
}
|
||||
|
||||
&--lett {
|
||||
margin-bottom: 120px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
margin-bottom: 126px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
margin-bottom: 106px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
margin-bottom: 79px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
margin-bottom: 81px;
|
||||
}
|
||||
|
||||
|
||||
.title {
|
||||
margin-bottom: 51px;
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
margin-bottom: 39px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.use__img {
|
||||
@@ -48,6 +114,39 @@
|
||||
margin-right: -5px;
|
||||
max-width: 110%;
|
||||
width: 1290px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
width: initial;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
max-width: 100%;
|
||||
width: 1120px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
max-width: 103%;
|
||||
margin-left: -5px;
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.h3 {
|
||||
@media (max-width: 991.98px) {
|
||||
max-width: 75%;
|
||||
margin: 0 auto 22px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
max-width: 100%;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,21 @@
|
||||
.uses {
|
||||
margin-bottom: 122px;
|
||||
margin-bottom: 120px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
margin-bottom: 136px;
|
||||
}
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
margin-bottom: 125px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
margin-bottom: 199px;
|
||||
}
|
||||
|
||||
&__grid {
|
||||
text-align: left;
|
||||
@@ -7,22 +23,140 @@
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
/* max-width: 101.5%; */
|
||||
/* width: 101.5%; */
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
column-gap: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&__item {
|
||||
min-height: 50px;
|
||||
margin-bottom: 43px;
|
||||
margin-bottom: 19px;
|
||||
padding: 0 50px 0 2px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
@media (max-width: 991.98px) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
margin-bottom: 11px;
|
||||
|
||||
@media (min-width: 1720px) {
|
||||
width: 147px;
|
||||
height: 147px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.title {
|
||||
max-width: 50%;
|
||||
margin: 0 auto 60px;
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
max-width: 70%;
|
||||
margin-bottom: 39px;
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 36px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
&--cstmr {
|
||||
& .uses {
|
||||
&__item {
|
||||
text-align: center;
|
||||
padding: 0 15px;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
margin-bottom: 42px;
|
||||
min-height: 255px;
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
margin-bottom: 25px;
|
||||
min-height: 194px;
|
||||
}
|
||||
|
||||
p {
|
||||
@media (max-width: 991.98px) {
|
||||
max-width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: 118px;
|
||||
height: 118px;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
width: 142px;
|
||||
height: 142px;
|
||||
margin-bottom: 23px;
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
width: 117px;
|
||||
height: 117px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&__grid {
|
||||
@media (max-width: 991.98px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
|
||||
@media (max-width: 1304.98px) {
|
||||
margin-bottom: 61px;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
margin-bottom: 44px;
|
||||
}
|
||||
|
||||
@media (max-width: 479.98px) {
|
||||
max-width: 90%;
|
||||
margin-bottom: 31px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
77
templates/blocks/n_header.html
Normal file
77
templates/blocks/n_header.html
Normal file
@@ -0,0 +1,77 @@
|
||||
{% load i18n %}
|
||||
{% load base_tags_extra %}
|
||||
{% load webpush_notifications %}
|
||||
|
||||
<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 hide__md">
|
||||
<ul class="header__list">
|
||||
<li class="header__item">
|
||||
<a href="#benefits" class="header__link">{% trans "Преимущества" %}</a>
|
||||
</li>
|
||||
<li class="header__item">
|
||||
<a href="#chatterbox" class="header__link">{% trans "Отзывы" %}</a>
|
||||
</li>
|
||||
<li class="header__item">
|
||||
<a href="#howtowork" class="header__link">{% trans "Как это работает" %}</a>
|
||||
</li>
|
||||
<li class="header__item">
|
||||
<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
|
||||
class="dropdown-content"
|
||||
>
|
||||
<a href="#benefits" class="header__link">{% trans "Преимущества" %}</a>
|
||||
<a href="#chatterbox" 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>
|
||||
<script>
|
||||
function initHeaderState() {
|
||||
var activeClassname = 'scrolled';
|
||||
var $document = $(document);
|
||||
var headerTop = $('.header');
|
||||
var header = $('.header');
|
||||
$(window).off('scroll.header').on('scroll.header', function() {
|
||||
var scrollTop = $document.scrollTop();
|
||||
var headerHeight = header.outerHeight();
|
||||
if (scrollTop > headerHeight) {
|
||||
headerTop.addClass(activeClassname);
|
||||
$(document.body).addClass(activeClassname);
|
||||
} else {
|
||||
headerTop.removeClass(activeClassname);
|
||||
$(document.body).removeClass(activeClassname);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$(document).ready(()=>{
|
||||
initHeaderState();
|
||||
})
|
||||
$(document).off('click.hide-menu').on('click.hide-menu',(e)=>{
|
||||
let el = e.target;
|
||||
if (!el.closest('.dropdown')) {
|
||||
$('.dropdown-content').removeClass('show');
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -5,25 +5,20 @@
|
||||
{% block meta %}
|
||||
<link rel="stylesheet" href="{% static "css/moover.css" %}">
|
||||
<link rel="stylesheet" href="{% static "css/slick.css" %}">
|
||||
{# <link rel="stylesheet" href="{% static "css/slick-theme.css" %}">#}
|
||||
<script src="{% static "js/slick.min.js" %}"></script>
|
||||
<script src="{% static "js/push/lazyload.min.js" %}"></script>
|
||||
{% endblock %}
|
||||
{#{% block before_close %}#}
|
||||
{# <script src="{% static "js/slick.min.js" %}"></script>#}
|
||||
{# #}
|
||||
{#{% endblock %}#}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<section class="presentation">
|
||||
<div class="presentation__top">
|
||||
<h1 class="presentation__title title">
|
||||
<h1 class="presentation__title">
|
||||
{% blocktrans %}
|
||||
Сервис попутных посылок
|
||||
{% endblocktrans %}
|
||||
</h1>
|
||||
<div class="presentation__subtitle subtitle h4">
|
||||
{% translate "Отправляй посылки с попутчиками в любую точку, быстро и недорого" %}
|
||||
{% translate "Перевози посылки и окупай стоимость дороги, отдыха или топлива" %}
|
||||
</div>
|
||||
<a class="presentation__btn btn btn--primary" href="#howtowork">{% translate "Узнать подробнее" %}</a>
|
||||
<div class="presentation__next">
|
||||
@@ -46,47 +41,101 @@
|
||||
{% translate "Маленькая история о том, как работает наш сервис" %}
|
||||
</p>
|
||||
{############cards###############}
|
||||
<div class="presentation__cards cards">
|
||||
<div class="presentation__cards cards cards--cstmr">
|
||||
<div class="cards__list">
|
||||
<div class="cards__item">
|
||||
<div class="cards__arrow"></div>
|
||||
<img class="cards__img" src="{% static "img/webp/image1.webp" %}" alt="img1"/>
|
||||
<img class="cards__img" src="{% static "img/webp/customer/image1.webp" %}" alt="img1"/>
|
||||
<p class="cards__desc">
|
||||
{% translate "Мария, хочет отправить<br class='br1'/> посылку, но её не устраивает<br class='br1'/> цена доставки почтовых<br class='br1'/>" %}
|
||||
{% translate "сервисов и она устала искать в<br class='br1'/> чатах тех, кто сможет перевезти<br class='br1'/> посылку." %}
|
||||
{% translate "Олег планирует поездку в другой город, задался вопросом, как окупить стоимость дороги?" %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="cards__item">
|
||||
<div class="cards__arrow"></div>
|
||||
<img class="cards__img" src="{% static "img/webp/image2.webp" %}" alt="img1"/>
|
||||
<img class="cards__img" src="{% static "img/webp/customer/image2.webp" %}" alt="img2"/>
|
||||
<p class="cards__desc">
|
||||
|
||||
{% translate "Мария, узнаёт о нашем сервисе<br class='br1'/>" %}
|
||||
{% translate "Олег зашел на сайт " %}
|
||||
<a href="/">TripWB.com. </a>
|
||||
{% translate "Регистрируется<br class='br1'/> и очень быстро размещает<br class='br1'/> объявление." %}
|
||||
{% translate "быстро разместил объявление, что планирует поездку из одного города в другой и готов взять с собой посылку до 10 кг." %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="cards__item">
|
||||
<div class="cards__arrow"></div>
|
||||
<img class="cards__img" src="{% static "img/webp/image3.webp" %}" alt="img1"/>
|
||||
<img class="cards__img" src="{% static "img/webp/customer/image3.webp" %}" alt="img3"/>
|
||||
<p class="cards__desc">
|
||||
{% translate "Попутчик Егор увидел<br class='br1'/> объявление Марии, нажал<br class='br1'/> откликнуться и получил<br class='br1'/> возможность связаться с ней,<br class='br1'/> удобным для него способом." %}
|
||||
{% translate "На объявление Олега откликнулась Аня, ей как раз и нужно отправить посылку своему другу в город, куда следует Олег, но обычными почтовыми сервисами очень дорого и долго ждать." %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="cards__item">
|
||||
<img class="cards__img" src="{% static "img/webp/image4.webp" %}" alt="img1"/>
|
||||
<img class="cards__img" src="{% static "img/webp/customer/image4.webp" %}" alt="img4"/>
|
||||
<p class="cards__desc">
|
||||
{% translate "Мария и Егор обговорили детали<br class='br1'/> доставки и потом встретились в<br class='br1'/> удобном для всех месте. После<br class='br1'/> чего Мария передала посылку<br class='br1'/> Егору и он её доставил." %}
|
||||
{% translate "Аня с Олегом созвонились, обсудили условия и договорились о месте и времени передачи посылки." %}
|
||||
</p>
|
||||
</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 <= 991.98) {
|
||||
{#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>
|
||||
{############easy###############}
|
||||
|
||||
<section class="easy">
|
||||
<div class="title">
|
||||
{% translate "Один простой шаг, чтобы отправить посылку" %}
|
||||
{% translate "Один простой шаг, чтобы взять с собой посылку" %}
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
{% translate "Еще легче, чем писать в чаты и группы в социальных сетях" %}
|
||||
@@ -94,133 +143,349 @@
|
||||
<div class="easy__grid">
|
||||
<div class="easy__item easy__item--fir">
|
||||
<h2>{% translate "Один простой шаг" %}</h2>
|
||||
<p>{% translate "За пару кликов <b>размещаешь объявление</b> на нашем сайте, о том, что необходимо перевезти посылку, а также указываешь удобный способ связи." %}</p>
|
||||
<img src="{% static 'img/webp/sender-card1.webp' %}" alt="sender1">
|
||||
<p>{% translate "За пару кликов <b>размещаешь объявление</b> на нашем сайте, о том, что готов перевезти посылку, а также указываешь удобный способ связи." %}</p>
|
||||
<img src="{% static 'img/png/mover/sender-card1.png' %}" alt="sender1">
|
||||
</div>
|
||||
<div class="easy__item easy__item--sec">
|
||||
<div class="easy__arrow easy__arrow--fir"></div>
|
||||
<div class="easy__arrow easy__arrow--sec"></div>
|
||||
<p>{% translate "Попутчики видят твое объявление и оставляют отклики на него." %}</p>
|
||||
<img src="{% static 'img/webp/sender-card2.webp' %}" alt="sender1">
|
||||
<p>{% translate "Люди, которым нужно отправить посылку по пути твоего следования, видят объявление и откликаются на него или связываются напрямую или оставляют отклики на него." %}</p>
|
||||
<img src="{% static 'img/png/customer/sender-card2.png' %}" alt="sender2">
|
||||
</div>
|
||||
<div class="easy__item easy__item--thr">
|
||||
<p>{% translate "Тебе остаётся только выбрать перевозчика, связаться и обсудить детали перевозки." %}</p>
|
||||
<img src="{% static 'img/webp/sender-card3.webp' %}" alt="sender1">
|
||||
<p>{% translate "Выбираешь объявление отправителя, посылку которого ты готов перевезти, созваниваетесь или переписываетесь и обсуждаете условия и стоимость, а также удобное время и место для передачи посылки." %}</p>
|
||||
|
||||
<picture class="img">
|
||||
<source srcset="{% static "img/png/customer/sender-card3.png" %}" media="(min-width: 1439.98px)"/>
|
||||
<img src="{% static 'img/png/customer/sender-card3-md.png' %}" alt="sender3">
|
||||
</picture>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
{% translate "Чтобы разместить объявление - зарегистрируйтесь" %}
|
||||
</div>
|
||||
<a href="#form" class="easy__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
|
||||
<a href="{% url "registration_page" %}"
|
||||
class="easy__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
|
||||
</section>
|
||||
{############use###############}
|
||||
|
||||
<section class="use">
|
||||
<div class="title">{% translate "Уже пользуются сайтом и находят перевозчиков" %}</div>
|
||||
<img src="{% static "img/webp/use.webp" %}" alt="list users" class="use__img">
|
||||
<div class="title">{% translate "Уже пользуются сайтом и находят посылки для перевозок" %}</div>
|
||||
<a href="{% url "registration_page" %}">
|
||||
<picture >
|
||||
<source srcset="{% static "img/png/customer/use-1720.png" %}" media="(min-width: 1720px)"/>
|
||||
<source srcset="{% static "img/png/customer/use-1280.png" %}" media="(min-width: 1304px)"/>
|
||||
<source srcset="{% static "img/png/customer/use-1120.png" %}" media="(min-width: 1280px)"/>
|
||||
<source srcset="{% static "img/png/customer/use-640.png" %}" media="(min-width: 768px)"/>
|
||||
<img src="{% static "img/png/customer/use-328.png" %}" alt="list users" class="use__img">
|
||||
</picture>
|
||||
</a>
|
||||
<div class="h3">
|
||||
{% translate "Нужно отправить посылку партнеру, родителям или знакомым?" %}
|
||||
{% translate "Хотите перевезти посылку и окупить стоимость дороги, топлива?" %}
|
||||
</div>
|
||||
<a href="#form" class="use__btn btn btn--primary">{% translate "Найти перевозчика" %}</a>
|
||||
<a href="{% url "registration_page" %}" class="use__btn btn btn--primary">{% translate "Найти посылку" %}</a>
|
||||
<br/>
|
||||
<a href="#registr" class="use__link">{% translate "Зарегистрироваться" %}</a>
|
||||
<a href="{% url "registration_page" %}" class="use__link">{% translate "Зарегистрироваться" %}</a>
|
||||
</section>
|
||||
<section class="use use--diff">
|
||||
<div class="title">{% translate "Чем мы отличаемся от классических почтовых сервисов" %}</div>
|
||||
<img src="{% static "img/webp/diff.webp" %}" alt="list differences" class="use__img">
|
||||
|
||||
<section class="benefits" id="benefits">
|
||||
<div class="title">{% translate "Преимущества сервиса" %}</div>
|
||||
<div class="benefits__grid">
|
||||
<div class="benefits__first">
|
||||
<div class="benefits__item">
|
||||
<h2>{% translate "Прямой контакт" %}</h2>
|
||||
<p>{% translate "Общаешься напрямую с отправителем, никаких посредников" %}</p>
|
||||
</div>
|
||||
<div class="benefits__item">
|
||||
<h2>{% translate "Своя цена" %}</h2>
|
||||
<p>{% translate "Стоимость перевозки назначаете самостоятельно." %}</p>
|
||||
</div>
|
||||
<div class="benefits__item">
|
||||
<h2>{% translate "Любой тип и вес посылки" %}</h2>
|
||||
<p>{% translate "Можешь брать любые посылки по типу, весу и пр. параметрам без ограничений и доп. расходов." %}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefits__second">
|
||||
<picture>
|
||||
<source srcset="{% static "img/png/mover/benefits-1720.png" %}" media="(min-width: 1720px)"/>
|
||||
<source srcset="{% static "img/png/mover/benefits-1280.png" %}" media="(min-width: 1280px)"/>
|
||||
<source srcset="{% static "img/png/mover/benefits-1120.png" %}" media="(min-width: 1120px)"/>
|
||||
<source srcset="{% static "img/png/mover/benefits-640.png" %}" media="(min-width: 768px)"/>
|
||||
<img src="{% static "/img/png/mover/benefits-328.png" %}" alt="benefits">
|
||||
</picture>
|
||||
</div>
|
||||
<div class="benefits__third">
|
||||
<div class="benefits__item">
|
||||
<h2>{% translate "Уведомления" %}</h2>
|
||||
<p>{% translate "Как только по твоему объявлению найдется посылка мы сообщим на E-mail." %}</p>
|
||||
</div>
|
||||
<div class="benefits__item">
|
||||
<h2>{% translate "Удобный поиск" %}</h2>
|
||||
<p>{% translate "Можешь самостоятельно найти посылку или разместить объявление на сайте." %}</p>
|
||||
</div>
|
||||
<div class="benefits__item">
|
||||
<h2>{% translate "Экономия времени" %}</h2>
|
||||
<p>{% translate "Не нужно искать группы, чаты, и кидать «клич», а просто достаточно разместить объявление на сайте." %}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="chatterbox">
|
||||
|
||||
<section class="chatterbox" id="chatterbox">
|
||||
<div class="title">{% translate "Что о нас говорят люди" %}</div>
|
||||
<div class="chatterbox__slider slick-slider">
|
||||
|
||||
{% for media_item in page.get_media_items %}
|
||||
<div class="slick-slide">
|
||||
<div class="chatterbox__slide">
|
||||
<div class="chatterbox__vicon"></div>
|
||||
|
||||
<video src="{{ MEDIA_URL }}{{ media_item.video }}"></video>
|
||||
|
||||
<div class="slick-slide">
|
||||
<div class="chatterbox__slide">
|
||||
<div class="chatterbox__vbtn"></div>
|
||||
<div class="chatterbox__wrap">
|
||||
<div class="chatterbox__vbox">
|
||||
<img src="{{ MEDIA_URL }}{{ media_item.picture }}" alt="user" class="chatterbox__poster">
|
||||
<video
|
||||
data-src="{{ MEDIA_URL }}{{ media_item.video }}"
|
||||
poster="{{ MEDIA_URL }}{{ media_item.picture }}"
|
||||
controls
|
||||
autoplay
|
||||
></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endfor %}
|
||||
{# <div class="slick-slide">#}
|
||||
{# <div class="chatterbox__slide">#}
|
||||
{# <div class="chatterbox__vicon"></div>#}
|
||||
{##}
|
||||
{# <video src="https://example.com/hexlet.mp4"></video>#}
|
||||
{##}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
{# <div class="slick-slide">#}
|
||||
{# <div class="chatterbox__slide">#}
|
||||
{# <div class="chatterbox__vicon"></div>#}
|
||||
{##}
|
||||
{# <video src="https://example.com/hexlet.mp4"></video>#}
|
||||
{##}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
{# <div class="slick-slide">#}
|
||||
{# <div class="chatterbox__slide">#}
|
||||
{# <div class="chatterbox__vicon"></div>#}
|
||||
{##}
|
||||
{##}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
{# <div class="slick-slide">#}
|
||||
{# <div class="chatterbox__slide">#}
|
||||
{# <div class="chatterbox__vicon"></div>#}
|
||||
{##}
|
||||
{##}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
{# <div class="slick-slide">#}
|
||||
{# <div class="chatterbox__slide">#}
|
||||
{# <div class="chatterbox__vicon"></div>#}
|
||||
{##}
|
||||
{##}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
</div>
|
||||
<div class="chatterbox__mbtns show__md"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
$('.slick-slider').slick({
|
||||
centerMode: true,
|
||||
{#centerPadding: '160px',#}
|
||||
slidesToShow: 3,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
arrows: false,
|
||||
centerMode: true,
|
||||
centerPadding: '40px',
|
||||
slidesToShow: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 480,
|
||||
settings: {
|
||||
arrows: false,
|
||||
centerMode: true,
|
||||
centerPadding: '40px',
|
||||
slidesToShow: 1
|
||||
}
|
||||
}
|
||||
]
|
||||
$(document).ready(function () {
|
||||
function handlerVideos() {
|
||||
const vtns = $('.chatterbox__vbtn');
|
||||
if (!vtns.length) return;
|
||||
vtns.off('click.load-lazy').on('click.load-lazy', (e) => {
|
||||
const vtn = e.target;
|
||||
{#console.log('!!!!!!!', vtn,)#}
|
||||
vtn.nextElementSibling.querySelector('video');
|
||||
vtn.closest('.slick-slide').classList.contains('slick-current') &&
|
||||
LazyLoad.load($(vtn).siblings().find('video')[0], {
|
||||
callback_loaded: (e) => callbackLoaded(e, vtn),
|
||||
});
|
||||
});
|
||||
});
|
||||
const callbackLoaded = function (elm, vtn) {
|
||||
{#vtn.closest('.slick-slide').classList.contains('slick-current')#}
|
||||
vtn.classList.add('hide');
|
||||
const imgWrap = elm.closest('.chatterbox__slide');
|
||||
imgWrap?.classList.add('loaded');
|
||||
};
|
||||
}
|
||||
|
||||
function initSlider() {
|
||||
{#console.log($('.slick-slider'))#}
|
||||
$('.slick-slider')
|
||||
.not('.slick-initialized').slick({
|
||||
centerMode: true,
|
||||
draggable: false,
|
||||
slidesToShow: 3,
|
||||
infinite: false,
|
||||
initialSlide: 1,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
draggable: true,
|
||||
appendArrows: $('.chatterbox__mbtns'),
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
|
||||
slick.$slides[currentSlide]?.querySelector('video')?.pause();
|
||||
slick.$slides[nextSlide]?.querySelector('video')?.pause();
|
||||
});
|
||||
}
|
||||
|
||||
handlerVideos();
|
||||
initSlider();
|
||||
|
||||
});
|
||||
</script>
|
||||
</section>
|
||||
|
||||
<section class="use use--lett" id="rewiews">
|
||||
<div class="title">{% translate "Что о нас пишут люди" %}</div>
|
||||
<picture class="hide__xs">
|
||||
<source srcset="{% static "img/png/mover/use-letters-1739.png" %}" media="(min-width: 1720px)"/>
|
||||
<source srcset="{% static "img/png/mover/use-letters-1280.png" %}" media="(min-width: 1304px)"/>
|
||||
<source srcset="{% static "img/png/mover/use-letters-1120.png" %}" media="(min-width: 1280px)"/>
|
||||
<source srcset="{% static "img/png/mover/use-letters-640.png" %}" media="(min-width: 768px)"/>
|
||||
<img src="{% static "img/png/mover/use-letters-328.png" %}" alt="list letters"
|
||||
class="use__img">
|
||||
</picture>
|
||||
<div class="show__xs">
|
||||
<picture>
|
||||
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
|
||||
media="(min-width: 480px)"/>
|
||||
<img src="{% static "img/png/mover/use-letters-s1.png" %}" alt="list letters"
|
||||
class="use__img">
|
||||
</picture>
|
||||
<picture>
|
||||
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
|
||||
media="(min-width: 480px)"/>
|
||||
<img src="{% static "img/png/mover/use-letters-s2.png" %}" alt="list letters"
|
||||
class="use__img">
|
||||
</picture>
|
||||
<picture>
|
||||
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
|
||||
media="(min-width: 480px)"/>
|
||||
<img src="{% static "img/png/mover/use-letters-s3.png" %}" alt="list letters"
|
||||
class="use__img">
|
||||
</picture>
|
||||
<picture>
|
||||
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
|
||||
media="(min-width: 480px)"/>
|
||||
<img src="{% static "img/png/mover/use-letters-s4.png" %}" alt="list letters"
|
||||
class="use__img">
|
||||
</picture>
|
||||
<picture>
|
||||
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
|
||||
media="(min-width: 480px)"/>
|
||||
<img src="{% static "img/png/mover/use-letters-s5.png" %}" alt="list letters"
|
||||
class="use__img">
|
||||
</picture>
|
||||
<picture>
|
||||
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
|
||||
media="(min-width: 480px)"/>
|
||||
<img src="{% static "img/png/mover/use-letters-s6.png" %}" alt="list letters"
|
||||
class="use__img">
|
||||
</picture>
|
||||
<picture>
|
||||
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
|
||||
media="(min-width: 480px)"/>
|
||||
<img src="{% static "img/png/mover/use-letters-s7.png" %}" alt="list letters"
|
||||
class="use__img">
|
||||
</picture>
|
||||
<picture>
|
||||
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
|
||||
media="(min-width: 480px)"/>
|
||||
<img src="{% static "img/png/mover/use-letters-s8.png" %}" alt="list letters"
|
||||
class="use__img">
|
||||
</picture>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="animate left">
|
||||
<div class="title">
|
||||
{% translate "Хочешь вернуть стоимость билета, топлива или окупить свое путешествие?" %}
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
{% translate "Зарегистрируйся на <a href='#' class='animate__link'>Trip With Bonus</a> прямо сейчас, размести бесплатно объявление и получи отклики от людей с посылками" %}
|
||||
</div>
|
||||
<a href="{% url "registration_page" %}"
|
||||
class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const animate = document.querySelectorAll('.animate');
|
||||
let counter = 0;
|
||||
const observer = new IntersectionObserver(
|
||||
(entries, interserctionObserver) => {
|
||||
entries.forEach(entry => {
|
||||
console.log('or', entry)
|
||||
if (entry.isIntersecting) {
|
||||
counter++;
|
||||
const el = entry.target;
|
||||
if (animate.length === counter) {
|
||||
interserctionObserver.disconnect();
|
||||
}
|
||||
(() => {
|
||||
el.style.opacity = 1;
|
||||
el.style.transform = 'translateX(0)';
|
||||
el.style.transition = 'opacity 1.3s ease, transform 1.5s ease';
|
||||
})();
|
||||
}
|
||||
});
|
||||
}, {root: null, rootMargin: '0px'},
|
||||
);
|
||||
animate.forEach(item => observer.observe(item));
|
||||
});
|
||||
</script>
|
||||
</section>
|
||||
|
||||
<section class="about" id="about">
|
||||
<div class="title">{% translate "О сервисе Trip With Bonus" %}</div>
|
||||
<div class="about__grid">
|
||||
<picture class="about__img">
|
||||
<source srcset="{% static "img/png/mover/about-1720.png" %}" media="(min-width: 1720px)"/>
|
||||
<source srcset="{% static "img/png/mover/about-1280.png" %}" media="(min-width: 1304px)"/>
|
||||
<source srcset="{% static "img/png/mover/about-1120.png" %}" media="(min-width: 1280px)"/>
|
||||
<source srcset="{% static "img/png/mover/about-640.png" %}" media="(min-width: 768px)"/>
|
||||
<img src="{% static "/img/png/mover/about-328.png" %}" alt="about">
|
||||
</picture>
|
||||
{# <img src="{% static "/img/png/about.png" %}" alt="about" class="about__img">#}
|
||||
<div class="about__right">
|
||||
<p>{% translate "TripWB - это сервис попутных посылок, который <b>соединяет отправителя посылки</b> того, кому нужно что-то передать в другой город или страну, и <b>перевозчика посылки</b>, а именно попутчика или путешественника, который следует по пути назначения." %}</p>
|
||||
<p>{% translate "<b>Тебе не нужно больше бежать в чаты и группы</b> в социальных сетях и искать тех, кто сможет перевезти посылку, а достаточно просто зайти на сайт, разместить объявление в пару кликов и дождаться откликов от попутчиков." %}
|
||||
<p class="about__half">{% translate "Мы <b>не являемся почтовым сервисом</b>, т.к. мы не доставляем посылки, а только даем возможность отправителю и перевозчику найти друг друга." %}</p>
|
||||
<p class="about__half">{% translate "Если не хочешь размещать объявление и ждать, то можешь <b>самостоятельно на нашем сайте найти перевозчика</b> через удобную систему поиска" %}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section class="uses uses--cstmr">
|
||||
<div class="title">{% translate "Когда актуально пользоваться нашим сервисом" %}</div>
|
||||
|
||||
<div class="uses__grid">
|
||||
<div class="uses__item">
|
||||
<img class="uses__icon" src="{% static "img/svg/bax.svg" %}" alt="image icon">
|
||||
<div class="uses__title">{% translate "Экономия" %}</div>
|
||||
<p class="uses__desc">
|
||||
{% translate "Когда нужно отбить стоимость дороги или топлива, или дополнительно заработать" %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="uses__item">
|
||||
<img class="uses__icon" src="{% static "img/svg/airplane_takeoff.svg" %}" alt="image icon">
|
||||
<div class="uses__title">{% translate "Путешествия" %}</div>
|
||||
<p class="uses__desc">
|
||||
{% translate "Когда часто путешествуешь" %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="uses__item">
|
||||
<img class="uses__icon" src="{% static "img/svg/briefcase.svg" %}" alt="image icon">
|
||||
<div class="uses__title">{% translate "Работа" %}</div>
|
||||
<p class="uses__desc">
|
||||
{% translate "Когда твоя работа связана с частыми переездами" %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="animate right">
|
||||
<div class="title">
|
||||
{% translate "Размести свое объявление какую посылку ты можешь перевезти прямо сейчас " %}
|
||||
</div>
|
||||
<a href="{% url "registration_page" %}"
|
||||
class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
|
||||
</section>
|
||||
|
||||
<section class="sore">
|
||||
<div class="title">
|
||||
{% translate "О наболевшем..." %}
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
{% translate "Мы знаем, каково это <b>без конца и края просматривать</b> чаты и группы социальных сетей, писать туда по 5-10 сообщений в день, чтобы найти посылки, которые можно перевезти и <b>сэкономить на топливе или билете.</b>" %}
|
||||
</div>
|
||||
<picture>
|
||||
<source srcset="{% static "img/png/mover/sore-1720.png" %}" media="(min-width: 1720px)"/>
|
||||
<source srcset="{% static "img/png/mover/sore-1280.png" %}" media="(min-width: 1304px)"/>
|
||||
<source srcset="{% static "img/png/mover/sore-1120.png" %}" media="(min-width: 1280px)"/>
|
||||
<source srcset="{% static "img/png/mover/sore-640.png" %}" media="(min-width: 768px)"/>
|
||||
<img src="{% static "/img/png/mover/sore-328.png" %}" alt="sore image" class="sore__img">
|
||||
</picture>
|
||||
<div class="h3">
|
||||
{% translate "Зарегистрируйся бесплатно прямо сейчас и начни размещать объявления о перевозки посылки" %}
|
||||
</div>
|
||||
<a href="{% url "registration_page" %}"
|
||||
class="sore__btn btn btn--primary">{% translate "Зарегистрироваться и разместить" %}</a>
|
||||
<br/>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
@@ -45,37 +45,92 @@
|
||||
<div class="cards__list">
|
||||
<div class="cards__item">
|
||||
<div class="cards__arrow"></div>
|
||||
<img class="cards__img" src="{% static "img/webp/image1.webp" %}" alt="img1"/>
|
||||
<img class="cards__img" src="{% static "img/png/mover/image1.png" %}" alt="img1"/>
|
||||
<p class="cards__desc">
|
||||
{% translate "Мария, хочет отправить<br class='br1'/> посылку, но её не устраивает<br class='br1'/> цена доставки почтовых<br class='br1'/>" %}
|
||||
{% translate "сервисов и она устала искать в<br class='br1'/> чатах тех, кто сможет перевезти<br class='br1'/> посылку." %}
|
||||
{% translate "Мария, хочет отправить<br class='br--xxl'/> посылку, но её не устраивает<br class='br--xxl br--sm'/> цена доставки почтовых<br class='br--sm'/>" %}
|
||||
{% translate "сервисов и она устала искать в<br class='br--xxl br--sm'/> чатах тех, кто сможет перевезти<br class='br--xxl br--md'/> посылку." %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="cards__item">
|
||||
<div class="cards__arrow"></div>
|
||||
<img class="cards__img" src="{% static "img/webp/image2.webp" %}" alt="img1"/>
|
||||
<img class="cards__img" src="{% static "img/png/mover/image2.png" %}" alt="img1"/>
|
||||
<p class="cards__desc">
|
||||
|
||||
{% translate "Мария, узнаёт о нашем сервисе<br class='br1'/>" %}
|
||||
{% translate "Мария, узнаёт о нашем сервисе<br class='br--sm'/>" %}
|
||||
<a href="/">TripWB.com. </a>
|
||||
{% translate "Регистрируется<br class='br1'/> и очень быстро размещает<br class='br1'/> объявление." %}
|
||||
{% translate "Регистрируется<br class='br--xxl br--sm'/> и очень быстро размещает<br class='br--xxl' br--sm/> объявление." %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="cards__item">
|
||||
<div class="cards__arrow"></div>
|
||||
<img class="cards__img" src="{% static "img/webp/image3.webp" %}" alt="img1"/>
|
||||
<img class="cards__img" src="{% static "img/png/mover/image3.png" %}" alt="img1"/>
|
||||
<p class="cards__desc">
|
||||
{% translate "Попутчик Егор увидел<br class='br1'/> объявление Марии, нажал<br class='br1'/> откликнуться и получил<br class='br1'/> возможность связаться с ней,<br class='br1'/> удобным для него способом." %}
|
||||
{% translate "Попутчик Егор увидел<br class='br--xxl br--sm'/> объявление Марии, нажал<br class='br--xxl br--sm'/> откликнуться и получил<br class='br--sm'/> возможность связаться с ней,<br class='br--xxl br--sm'/> удобным для него способом." %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="cards__item">
|
||||
<img class="cards__img" src="{% static "img/webp/image4.webp" %}" alt="img1"/>
|
||||
<img class="cards__img" src="{% static "img/png/mover/image4.png" %}" alt="img1"/>
|
||||
<p class="cards__desc">
|
||||
{% translate "Мария и Егор обговорили детали<br class='br1'/> доставки и потом встретились в<br class='br1'/> удобном для всех месте. После<br class='br1'/> чего Мария передала посылку<br class='br1'/> Егору и он её доставил." %}
|
||||
{% translate "Мария и Егор обговорили детали<br class='br--sm'/> доставки и потом встретились в<br class='br--sm'/> удобном для всех месте. После<br class='br--xxl br--sm'/> чего Мария передала посылку<br class='br--xxl br--sm'/> Егору и он её доставил." %}
|
||||
</p>
|
||||
</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 <= 991.98) {
|
||||
{#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">
|
||||
@@ -89,143 +144,132 @@
|
||||
<div class="easy__item easy__item--fir">
|
||||
<h2>{% translate "Один простой шаг" %}</h2>
|
||||
<p>{% translate "За пару кликов <b>размещаешь объявление</b> на нашем сайте, о том, что необходимо перевезти посылку, а также указываешь удобный способ связи." %}</p>
|
||||
<img src="{% static 'img/webp/sender-card1.webp' %}" alt="sender1">
|
||||
<img src="{% static 'img/png/mover/sender-card1.png' %}" alt="sender1">
|
||||
</div>
|
||||
<div class="easy__item easy__item--sec">
|
||||
<div class="easy__arrow easy__arrow--fir"></div>
|
||||
<div class="easy__arrow easy__arrow--sec"></div>
|
||||
<p>{% translate "Попутчики видят твое объявление и оставляют отклики на него." %}</p>
|
||||
<img src="{% static 'img/webp/sender-card2.webp' %}" alt="sender1">
|
||||
<img src="{% static 'img/png/mover/sender-card2.png' %}" alt="sender2">
|
||||
</div>
|
||||
<div class="easy__item easy__item--thr">
|
||||
<p>{% translate "Тебе остаётся только выбрать перевозчика, связаться и обсудить детали перевозки." %}</p>
|
||||
<img src="{% static 'img/webp/sender-card3.webp' %}" alt="sender1">
|
||||
<p class="hide__xxl">{% translate "Тебе остаётся только выбрать перевозчика, связаться и обсудить детали перевозки." %}</p>
|
||||
<p class="show__xxl">{% translate "Попутчики видят твое объявление и оставляют отклики на него." %}</p>
|
||||
|
||||
<picture class="img">
|
||||
<source srcset="{% static "img/png/mover/sender-card3.png" %}" media="(min-width: 1439.98px)"/>
|
||||
<img src="{% static 'img/png/mover/sender-card3-md.png' %}" alt="sender3">
|
||||
</picture>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
{% translate "Чтобы разместить объявление - зарегистрируйтесь" %}
|
||||
</div>
|
||||
<a href="#form" class="easy__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
|
||||
<a href="{% url "registration_page" %}"
|
||||
class="easy__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
|
||||
</section>
|
||||
<section class="use">
|
||||
<div class="title">{% translate "Уже пользуются сайтом и находят перевозчиков" %}</div>
|
||||
<img src="{% static "img/webp/use.webp" %}" alt="list users" class="use__img">
|
||||
<a href="{% url "registration_page" %}">
|
||||
<picture>
|
||||
<source srcset="{% static "img/png/mover/use-1720.png" %}" media="(min-width: 1720px)"/>
|
||||
<source srcset="{% static "img/png/mover/use-1280.png" %}" media="(min-width: 1304px)"/>
|
||||
<source srcset="{% static "img/png/mover/use-1120.png" %}" media="(min-width: 1280px)"/>
|
||||
<source srcset="{% static "img/png/mover/use-640.png" %}" media="(min-width: 768px)"/>
|
||||
<img src="{% static "img/png/mover/use-328.png" %}" alt="list users" class="use__img">
|
||||
</picture>
|
||||
</a>
|
||||
|
||||
<div class="h3">
|
||||
{% translate "Нужно отправить посылку партнеру, родителям или знакомым?" %}
|
||||
</div>
|
||||
<a href="#form" class="use__btn btn btn--primary">{% translate "Найти перевозчика" %}</a>
|
||||
<a href="{% url "registration_page" %}" class="use__btn btn btn--primary">{% translate "Найти перевозчика" %}</a>
|
||||
<br/>
|
||||
<a href="#registr" class="use__link">{% translate "Зарегистрироваться" %}</a>
|
||||
<a href="{% url "registration_page" %}" class="use__link">{% translate "Зарегистрироваться" %}</a>
|
||||
</section>
|
||||
<section class="use use--diff">
|
||||
<section class="diff">
|
||||
<div class="title">{% translate "Чем мы отличаемся от классических почтовых сервисов" %}</div>
|
||||
<img src="{% static "img/webp/diff.webp" %}" alt="list differences" class="use__img">
|
||||
</section>
|
||||
<section class="chatterbox">
|
||||
<div class="title">{% translate "Что о нас говорят люди" %}</div>
|
||||
<div class="chatterbox__slider slick-slider">
|
||||
{# {% for media_item in page.get_media_items %}#}
|
||||
{# <div class="slick-slide">#}
|
||||
{# <div class="chatterbox__slide">#}
|
||||
{# <div class="chatterbox__vbtn"></div>#}
|
||||
{# <div class="chatterbox__wrap">#}
|
||||
{# <div class="chatterbox__vbox">#}
|
||||
{##}
|
||||
{# <video data-src="{{ MEDIA_URL }}{{ media_item.video }}" autoplay></video>#}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
{# {% endfor %}#}
|
||||
<div class="slick-slide">
|
||||
<div class="chatterbox__slide">
|
||||
<div class="chatterbox__vbtn"></div>
|
||||
<div class="chatterbox__wrap">
|
||||
<div class="chatterbox__vbox">
|
||||
<img src="/media/media_items/image/ava1.jpg" alt="user" class="chatterbox__poster">
|
||||
<video
|
||||
data-src="/media/media_items/video/1.mp4"
|
||||
poster="/media/media_items/image/ava1.jpg"
|
||||
controls
|
||||
autoplay
|
||||
></video>
|
||||
</div>
|
||||
</div>
|
||||
<div class="diff__grid">
|
||||
<div class="diff__coll left">
|
||||
<div class="diff__coll-title h2">
|
||||
Trip With Bonus
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="slick-slide">
|
||||
<div class="chatterbox__slide">
|
||||
<div class="chatterbox__vbtn"></div>
|
||||
<div class="chatterbox__wrap">
|
||||
<div class="chatterbox__vbox">
|
||||
<img src="/media/media_items/image/ava2.jpg" alt="user" class="chatterbox__poster">
|
||||
<video
|
||||
data-src="/media/media_items/video/2.mp4"
|
||||
poster="/media/media_items/image/ava2.jpg"
|
||||
controls
|
||||
autoplay
|
||||
></video>
|
||||
</div>
|
||||
</div>
|
||||
<div class="diff__item diff__item--done">
|
||||
<div class="diff__status"></div>
|
||||
Стоимость перевозки назначаете сами
|
||||
</div>
|
||||
<div class="diff__item diff__item--done">
|
||||
<div class="diff__status"></div>
|
||||
Возможность контакта с перевозчиком в режиме онлайн
|
||||
</div>
|
||||
<div class="diff__item diff__item--done">
|
||||
<div class="diff__status"></div>
|
||||
Встреча с перевозчиком в удобном для вас месте
|
||||
</div>
|
||||
<div class="diff__item diff__item--done">
|
||||
<div class="diff__status"></div>
|
||||
Без дополнительных платежей и комиссий за параметры посылки
|
||||
</div>
|
||||
<div class="diff__item diff__item--done">
|
||||
<div class="diff__status"></div>
|
||||
Вы сами выбираете оптимальный маршрут и время доставки
|
||||
</div>
|
||||
</div>
|
||||
<div class="slick-slide">
|
||||
<div class="chatterbox__slide">
|
||||
<div class="chatterbox__vbtn"></div>
|
||||
<div class="chatterbox__wrap">
|
||||
<div class="chatterbox__vbox">
|
||||
<img src="/media/media_items/image/ava3.jpg" alt="user" class="chatterbox__poster">
|
||||
<video
|
||||
data-src="/media/media_items/video/3.mp4"
|
||||
poster="/media/media_items/image/ava3.jpg"
|
||||
controls
|
||||
autoplay
|
||||
>
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
<div class="diff__coll right">
|
||||
<div class="diff__coll-title h2">
|
||||
Другие почтовые сервисы
|
||||
</div>
|
||||
<div class="diff__item diff__item--error">
|
||||
<div class="diff__status"></div>
|
||||
Стоимость перевозки назначает сервис
|
||||
</div>
|
||||
<div class="diff__item diff__item--error">
|
||||
<div class="diff__status"></div>
|
||||
Автоматический трекинг не всегда даёт актуальную информацию
|
||||
</div>
|
||||
<div class="diff__item diff__item--error">
|
||||
<div class="diff__status"></div>
|
||||
|
||||
Нужно ехать только в пункт отправки посылки
|
||||
</div>
|
||||
<div class="diff__item diff__item--error">
|
||||
<div class="diff__status"></div>
|
||||
Дополнительная стоимость за разные параметры посылки
|
||||
</div>
|
||||
<div class="diff__item diff__item--error">
|
||||
<div class="diff__status"></div>
|
||||
Посылка может перевозиться долго и с большим количеством перегрузок
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="slick-slide">
|
||||
<div class="chatterbox__slide">
|
||||
<div class="chatterbox__vbtn"></div>
|
||||
<div class="chatterbox__wrap">
|
||||
<div class="chatterbox__vbox">
|
||||
<img src="/media/media_items/image/ava1.jpg" alt="user" class="chatterbox__poster">
|
||||
<video
|
||||
data-src="/media/media_items/video/4.mp4"
|
||||
poster="/media/media_items/image/ava1.jpg"
|
||||
controls
|
||||
autoplay
|
||||
>
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slick-slide">
|
||||
<div class="chatterbox__slide">
|
||||
<div class="chatterbox__vbtn"></div>
|
||||
<div class="chatterbox__wrap">
|
||||
<div class="chatterbox__vbox">
|
||||
<img src="/media/media_items/image/ava2.jpg" alt="user" class="chatterbox__poster">
|
||||
<video
|
||||
data-src="/media/media_items/video/5.mp4"
|
||||
poster="/media/media_items/image/ava2.jpg"
|
||||
controls
|
||||
autoplay
|
||||
>
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="chatterbox" id="chatterbox">
|
||||
<div class="title">{% translate "Что о нас говорят люди" %}</div>
|
||||
<div class="chatterbox__slider slick-slider">
|
||||
{% for media_item in page.get_media_items %}
|
||||
<div class="slick-slide">
|
||||
<div class="chatterbox__slide">
|
||||
<div class="chatterbox__vbtn"></div>
|
||||
<div class="chatterbox__wrap">
|
||||
<div class="chatterbox__vbox">
|
||||
<img src="{{ MEDIA_URL }}{{ media_item.picture }}" alt="user" class="chatterbox__poster">
|
||||
<video
|
||||
data-src="{{ MEDIA_URL }}{{ media_item.video }}"
|
||||
poster="{{ MEDIA_URL }}{{ media_item.picture }}"
|
||||
controls
|
||||
autoplay
|
||||
></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="chatterbox__mbtns show__md"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
function handlerVideos() {
|
||||
@@ -233,62 +277,112 @@
|
||||
if (!vtns.length) return;
|
||||
vtns.off('click.load-lazy').on('click.load-lazy', (e) => {
|
||||
const vtn = e.target;
|
||||
{#console.log('!!!!!!!', vtn,)#}
|
||||
vtn.nextElementSibling.querySelector('video');
|
||||
window.d = vtn;
|
||||
{#console.log($(vtn).siblings().find('video')[0]);#}
|
||||
{#console.log(vtn, e.target)#}
|
||||
vtn.closest('.slick-slide').classList.contains('slick-current') &&
|
||||
LazyLoad.load($(vtn).siblings().find('video')[0], {
|
||||
callback_loaded: (e) => callbackLoaded(e, vtn),
|
||||
});
|
||||
});
|
||||
const callbackLoaded = function (elm, vtn) {
|
||||
{#vtn.closest('.slick-slide').classList.contains('slick-current')#}
|
||||
vtn.classList.add('hide');
|
||||
const imgWrap = elm.closest('.chatterbox__slide');
|
||||
imgWrap?.classList.add('loaded');
|
||||
};
|
||||
}
|
||||
|
||||
handlerVideos();
|
||||
$('.slick-slider')
|
||||
.slick({
|
||||
function initSlider() {
|
||||
{#console.log($('.slick-slider'))#}
|
||||
$('.slick-slider')
|
||||
.not('.slick-initialized').slick({
|
||||
centerMode: true,
|
||||
{#centerPadding: '160px',#}
|
||||
draggable: false,
|
||||
slidesToShow: 3,
|
||||
infinite: false,
|
||||
initialSlide: 1,
|
||||
{#lazyLoad: 'ondemand',#}
|
||||
{#lazyLoad: 'progressive',#}
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
arrows: false,
|
||||
centerMode: true,
|
||||
centerPadding: '40px',
|
||||
slidesToShow: 3
|
||||
}
|
||||
draggable: true,
|
||||
appendArrows: $('.chatterbox__mbtns'),
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 480,
|
||||
settings: {
|
||||
arrows: false,
|
||||
centerMode: true,
|
||||
centerPadding: '40px',
|
||||
slidesToShow: 1
|
||||
}
|
||||
}
|
||||
]
|
||||
],
|
||||
})
|
||||
.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
|
||||
slick.$slides[currentSlide]?.querySelector('video')?.pause();
|
||||
console.log('edge was hit', slick.$slides[currentSlide]);
|
||||
});
|
||||
.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
|
||||
slick.$slides[currentSlide]?.querySelector('video')?.pause();
|
||||
slick.$slides[nextSlide]?.querySelector('video')?.pause();
|
||||
});
|
||||
}
|
||||
|
||||
handlerVideos();
|
||||
initSlider();
|
||||
|
||||
});
|
||||
</script>
|
||||
</section>
|
||||
<section class="use use--lett">
|
||||
<section class="use use--lett" id="rewiews">
|
||||
<div class="title">{% translate "Что о нас пишут люди" %}</div>
|
||||
<img src="{% static "img/png/use-letterss.png" %}" alt="list letters" class="use__img">
|
||||
<picture class="hide__xs">
|
||||
<source srcset="{% static "img/png/mover/use-letters-1739.png" %}" media="(min-width: 1720px)"/>
|
||||
<source srcset="{% static "img/png/mover/use-letters-1280.png" %}" media="(min-width: 1304px)"/>
|
||||
<source srcset="{% static "img/png/mover/use-letters-1120.png" %}" media="(min-width: 1280px)"/>
|
||||
<source srcset="{% static "img/png/mover/use-letters-640.png" %}" media="(min-width: 768px)"/>
|
||||
<img src="{% static "img/png/mover/use-letters-328.png" %}" alt="list letters"
|
||||
class="use__img">
|
||||
</picture>
|
||||
<div class="show__xs">
|
||||
<picture>
|
||||
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
|
||||
media="(min-width: 480px)"/>
|
||||
<img src="{% static "img/png/mover/use-letters-s1.png" %}" alt="list letters"
|
||||
class="use__img">
|
||||
</picture>
|
||||
<picture>
|
||||
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
|
||||
media="(min-width: 480px)"/>
|
||||
<img src="{% static "img/png/mover/use-letters-s2.png" %}" alt="list letters"
|
||||
class="use__img">
|
||||
</picture>
|
||||
<picture>
|
||||
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
|
||||
media="(min-width: 480px)"/>
|
||||
<img src="{% static "img/png/mover/use-letters-s3.png" %}" alt="list letters"
|
||||
class="use__img">
|
||||
</picture>
|
||||
<picture>
|
||||
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
|
||||
media="(min-width: 480px)"/>
|
||||
<img src="{% static "img/png/mover/use-letters-s4.png" %}" alt="list letters"
|
||||
class="use__img">
|
||||
</picture>
|
||||
<picture>
|
||||
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
|
||||
media="(min-width: 480px)"/>
|
||||
<img src="{% static "img/png/mover/use-letters-s5.png" %}" alt="list letters"
|
||||
class="use__img">
|
||||
</picture>
|
||||
<picture>
|
||||
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
|
||||
media="(min-width: 480px)"/>
|
||||
<img src="{% static "img/png/mover/use-letters-s6.png" %}" alt="list letters"
|
||||
class="use__img">
|
||||
</picture>
|
||||
<picture>
|
||||
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
|
||||
media="(min-width: 480px)"/>
|
||||
<img src="{% static "img/png/mover/use-letters-s7.png" %}" alt="list letters"
|
||||
class="use__img">
|
||||
</picture>
|
||||
<picture>
|
||||
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
|
||||
media="(min-width: 480px)"/>
|
||||
<img src="{% static "img/png/mover/use-letters-s8.png" %}" alt="list letters"
|
||||
class="use__img">
|
||||
</picture>
|
||||
</div>
|
||||
</section>
|
||||
<section class="animate left">
|
||||
<div class="title">
|
||||
@@ -297,7 +391,8 @@
|
||||
<div class="subtitle">
|
||||
{% translate "Зарегистрируйся на <a href='#' class='animate__link'>Trip With Bonus</a> прямо сейчас, размести бесплатно объявление и получи запросы на перевозку твоей посылки" %}
|
||||
</div>
|
||||
<a href="#form" class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
|
||||
<a href="{% url "registration_page" %}"
|
||||
class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const animate = document.querySelectorAll('.animate');
|
||||
@@ -305,7 +400,7 @@
|
||||
const observer = new IntersectionObserver(
|
||||
(entries, interserctionObserver) => {
|
||||
entries.forEach(entry => {
|
||||
console.log('or', entry)
|
||||
{#console.log('or', entry)#}
|
||||
if (entry.isIntersecting) {
|
||||
counter++;
|
||||
const el = entry.target;
|
||||
@@ -325,10 +420,17 @@
|
||||
});
|
||||
</script>
|
||||
</section>
|
||||
<section class="about">
|
||||
<section class="about" id="about">
|
||||
<div class="title">{% translate "О сервисе Trip With Bonus" %}</div>
|
||||
<div class="about__grid">
|
||||
<img src="{% static "/img/png/about.png" %}" alt="" class="about__img">
|
||||
<picture class="about__img">
|
||||
<source srcset="{% static "img/png/mover/about-1720.png" %}" media="(min-width: 1720px)"/>
|
||||
<source srcset="{% static "img/png/mover/about-1280.png" %}" media="(min-width: 1304px)"/>
|
||||
<source srcset="{% static "img/png/mover/about-1120.png" %}" media="(min-width: 1280px)"/>
|
||||
<source srcset="{% static "img/png/mover/about-640.png" %}" media="(min-width: 768px)"/>
|
||||
<img src="{% static "/img/png/mover/about-328.png" %}" alt="about">
|
||||
</picture>
|
||||
{# <img src="{% static "/img/png/about.png" %}" alt="about" class="about__img">#}
|
||||
<div class="about__right">
|
||||
<p>{% translate "TripWB - это сервис попутных посылок, который <b>соединяет отправителя посылки</b> того, кому нужно что-то передать в другой город или страну, и <b>перевозчика посылки</b>, а именно попутчика или путешественника, который следует по пути назначения." %}</p>
|
||||
<p>{% translate "<b>Тебе не нужно больше бежать в чаты и группы</b> в социальных сетях и искать тех, кто сможет перевезти посылку, а достаточно просто зайти на сайт, разместить объявление в пару кликов и дождаться откликов от попутчиков." %}
|
||||
@@ -336,9 +438,9 @@
|
||||
<p class="about__half">{% translate "Если не хочешь размещать объявление и ждать, то можешь <b>самостоятельно на нашем сайте найти перевозчика</b> через удобную систему поиска" %}</p>
|
||||
</div>
|
||||
</div>
|
||||
{# </div>#}
|
||||
|
||||
</section>
|
||||
<section class="benefits">
|
||||
<section class="benefits" id="benefits">
|
||||
<div class="title">{% translate "Преимущества сервиса" %}</div>
|
||||
<div class="benefits__grid">
|
||||
<div class="benefits__first">
|
||||
@@ -356,7 +458,13 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefits__second">
|
||||
<img src="{% static "/img/png/benefits.png" %}" alt="benefits">
|
||||
<picture>
|
||||
<source srcset="{% static "img/png/mover/benefits-1720.png" %}" media="(min-width: 1720px)"/>
|
||||
<source srcset="{% static "img/png/mover/benefits-1280.png" %}" media="(min-width: 1280px)"/>
|
||||
<source srcset="{% static "img/png/mover/benefits-1120.png" %}" media="(min-width: 1120px)"/>
|
||||
<source srcset="{% static "img/png/mover/benefits-640.png" %}" media="(min-width: 768px)"/>
|
||||
<img src="{% static "/img/png/mover/benefits-328.png" %}" alt="benefits">
|
||||
</picture>
|
||||
</div>
|
||||
<div class="benefits__third">
|
||||
<div class="benefits__item">
|
||||
@@ -380,39 +488,39 @@
|
||||
<div class="uses__grid">
|
||||
<div class="uses__item">
|
||||
<img class="uses__icon" src="{% static "img/svg/files.svg" %}" alt="image icon">
|
||||
<div class="uses__desc">
|
||||
<p class="uses__desc">
|
||||
{% translate "Когда нужно отправить документы партнеру или родственнику" %}
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<div class="uses__item">
|
||||
<img class="uses__icon" src="{% static "img/svg/box.svg" %}" alt="image icon">
|
||||
<div class="uses__desc">
|
||||
<p class="uses__desc">
|
||||
{% translate "Когда необходимо отправить посылку в другую страну" %}
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<div class="uses__item">
|
||||
<img class="uses__icon" src="{% static "img/svg/present.svg" %}" alt="image icon">
|
||||
<div class="uses__desc">
|
||||
<p class="uses__desc">
|
||||
{% translate "Когда нужно отправить подарок семье, друзьям или знакомым" %}
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<div class="uses__item">
|
||||
<img class="uses__icon" src="{% static "img/svg/bax.svg" %}" alt="image icon">
|
||||
<div class="uses__desc">
|
||||
<p class="uses__desc">
|
||||
{% translate "Когда стоимость пересылки через почтовый сервис высокая или перевозка занимает длительное время" %}
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<div class="uses__item">
|
||||
<img class="uses__icon" src="{% static "img/svg/books.svg" %}" alt="image icon">
|
||||
<div class="uses__desc">
|
||||
<p class="uses__desc">
|
||||
{% translate "Когда нужно отправить не только маленькую посылку, но и крупногабаритный груз" %}
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<div class="uses__item">
|
||||
<img class="uses__icon" src="{% static "img/svg/earth.svg" %}" alt="image icon">
|
||||
<div class="uses__desc">
|
||||
<p class="uses__desc">
|
||||
{% translate "Когда нет прямого сообщения из пункта А в пункт Б обычными сервисами доставки" %}
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -423,7 +531,8 @@
|
||||
<div class="subtitle">
|
||||
{% translate "Достаточно просто зайти на сайт, разместить объявление в пару кликов и дождаться откликов от попутчиков." %}
|
||||
</div>
|
||||
<a href="#form" class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
|
||||
<a href="{% url "registration_page" %}"
|
||||
class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
|
||||
</section>
|
||||
<section class="sore">
|
||||
<div class="title">
|
||||
@@ -432,11 +541,18 @@
|
||||
<div class="subtitle">
|
||||
{% translate "Мы знаем, каково это без конца и края закидывать сообщения в чаты и группы в социальных сетях, в надежде найти человека, который едет или летит в нужном направлении, чтобы передать посылоку своим родным или близким. Очень часто ещё и стоимость пересылки в обычных почтовых сервисах выше стоимости самой посылки." %}
|
||||
</div>
|
||||
<img src="{% static "img/png/sore2.png" %}" alt="sore image" class="sore__img">
|
||||
<picture>
|
||||
<source srcset="{% static "img/png/mover/sore-1720.png" %}" media="(min-width: 1720px)"/>
|
||||
<source srcset="{% static "img/png/mover/sore-1280.png" %}" media="(min-width: 1304px)"/>
|
||||
<source srcset="{% static "img/png/mover/sore-1120.png" %}" media="(min-width: 1280px)"/>
|
||||
<source srcset="{% static "img/png/mover/sore-640.png" %}" media="(min-width: 768px)"/>
|
||||
<img src="{% static "/img/png/mover/sore-328.png" %}" alt="sore image" class="sore__img">
|
||||
</picture>
|
||||
<div class="h3">
|
||||
{% translate "Зарегистрируйте бесплатно прямо сейчас и размести свое первое объявление об отправке посылки" %}
|
||||
</div>
|
||||
<a href="#form" class="sore__btn btn btn--primary">{% translate "Зарегистрироваться и разместить" %}</a>
|
||||
<a href="{% url "registration_page" %}"
|
||||
class="sore__btn btn btn--primary">{% translate "Зарегистрироваться и разместить" %}</a>
|
||||
<br/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -176,9 +176,12 @@ function gtag_report_conversion(url) {
|
||||
{% if mobile == 'false' or mobile %}
|
||||
{% 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 %}">
|
||||
|
||||
{% include 'blocks/b_header.html' %}
|
||||
<div class="wrapper_main{% if page.url == "landing_mover" or page.url == "landing_customer" %} 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" %}'>">
|
||||
@@ -213,7 +216,7 @@ function gtag_report_conversion(url) {
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="{% if page.url == "landing_mover" %}container{% else %}wrapper_content{% endif %} {% if page.url == 'customer_service'%} m_h_0 {% elif page.url == 'contacts' %}m_h_0{% elif request.path == '/test_404' %}m_h_0{% endif %}">
|
||||
<div class="{% if page.url == "landing_mover" or page.url == "landing_customer" %}container{% else %}wrapper_content{% endif %} {% if page.url == 'customer_service'%} m_h_0 {% elif page.url == 'contacts' %}m_h_0{% elif request.path == '/test_404' %}m_h_0{% endif %}">
|
||||
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user