TRI-283: вёрстка лендинга
This commit is contained in:
@@ -1,162 +1,8 @@
|
||||
/*.container {*/
|
||||
/* margin: 0 auto;*/
|
||||
/* width: 1260px*/
|
||||
/*}*/
|
||||
|
||||
/*@media (max-width: 1339.98px) {*/
|
||||
/* .container {*/
|
||||
/* width: 992px*/
|
||||
/* }*/
|
||||
/*}*/
|
||||
|
||||
/*@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;
|
||||
}
|
||||
@import url('./moover/root.css');
|
||||
@import url('./moover/presentation.css');
|
||||
@import url('./moover/cards.css');
|
||||
@import url('./moover/easy.css');
|
||||
@import url('./moover/use.css');
|
||||
@import url('./moover/chatterbox.css');
|
||||
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
line-height: 22px;
|
||||
border-radius: 10px;
|
||||
padding: 20px 76px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0px 3px;
|
||||
letter-spacing: 0.2px;
|
||||
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.btn--primary {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
/***********************presentation******************************************/
|
||||
.presentation {
|
||||
text-align: center;
|
||||
margin: 0 -65px 20px;
|
||||
|
||||
}
|
||||
|
||||
.presentation__top {
|
||||
position: relative;
|
||||
min-height: 270px;
|
||||
margin: 0 auto 116px;
|
||||
padding: 29px 0 40px;
|
||||
background-image: url(/static/img/webp/Box9.webp),
|
||||
url(/static/img/webp/Box10.webp),
|
||||
url(/static/img/webp/Box11.webp),
|
||||
url(/static/img/webp/Box12.webp);
|
||||
background-position: top -6px left 27px,
|
||||
top -29px right -37px,
|
||||
bottom 70px left 258px,
|
||||
bottom 67px right 252px;
|
||||
background-repeat: no-repeat,
|
||||
no-repeat,
|
||||
no-repeat,
|
||||
no-repeat;
|
||||
}
|
||||
|
||||
.presentation__title {
|
||||
font-size: 44px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 52px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.presentation__subtitle {
|
||||
text-align: center;
|
||||
padding-left: 5px;
|
||||
margin-bottom: 40px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.presentation__btn {
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
|
||||
.presentation__next {
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.presentation__arrows {
|
||||
padding-top: 2px;
|
||||
animation: jump 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.presentation__desc {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
@keyframes jump {
|
||||
0% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
/*transform: translateY(20px);*/
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
60% {
|
||||
transform: translateY(20px);
|
||||
}
|
||||
70% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
80% {
|
||||
transform: translateY(20px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
|
||||
/***********************cards*********************/
|
||||
|
||||
.cards {
|
||||
}
|
||||
|
||||
.cards__list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.cards__item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cards__img {
|
||||
}
|
||||
|
||||
.cards__desc {
|
||||
}
|
||||
|
||||
.cards__arrow {
|
||||
width: 62px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
right: -30px;
|
||||
top: -13px;
|
||||
background-image: url("/static/img/svg/Arrow23.svg");
|
||||
}
|
||||
|
||||
34
static/css/moover/cards.css
Normal file
34
static/css/moover/cards.css
Normal file
@@ -0,0 +1,34 @@
|
||||
.cards {
|
||||
}
|
||||
|
||||
.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");
|
||||
}
|
||||
90
static/css/moover/chatterbox.css
Normal file
90
static/css/moover/chatterbox.css
Normal file
@@ -0,0 +1,90 @@
|
||||
.chatterbox {
|
||||
|
||||
}
|
||||
|
||||
.chatterbox .title {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.chatterbox__slider {
|
||||
/*max-width: 977px;*/
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.slick-slide {
|
||||
/*padding: 50px;*/
|
||||
}
|
||||
|
||||
|
||||
.chatterbox__slide {
|
||||
width: 335px;
|
||||
height: 615px;
|
||||
background: url("/static/img/webp/phone-border.webp") center no-repeat;
|
||||
transition: scale 0.2s ease-in-out;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.slick-slide:not(.slick-center) .chatterbox__slide {
|
||||
scale: 0.72;
|
||||
}
|
||||
|
||||
.slick-center .chatterbox__vicon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
.chatterbox__vicon {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.chatterbox__vicon::before {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--color-primary);
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
transition: opacity 100ms linear;
|
||||
|
||||
}
|
||||
|
||||
.chatterbox__vicon::before {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.chatterbox__vicon::before, .chatterbox__vicon::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.chatterbox__vicon::after {
|
||||
border-color: transparent transparent transparent #ffffff;
|
||||
border-style: solid;
|
||||
border-width: 15px 0 15px 25px;
|
||||
display: inline-block;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.chatterbox .slick-next {
|
||||
right: -40px;
|
||||
}
|
||||
|
||||
.chatterbox .slick-prev {
|
||||
left: -40px;
|
||||
}
|
||||
|
||||
105
static/css/moover/easy.css
Normal file
105
static/css/moover/easy.css
Normal file
@@ -0,0 +1,105 @@
|
||||
.easy {
|
||||
margin-bottom: 162px;
|
||||
}
|
||||
|
||||
.easy .title {
|
||||
max-width: 55%;
|
||||
margin-bottom: 21px;
|
||||
}
|
||||
|
||||
.easy .subtitle {
|
||||
margin-bottom: 42px;
|
||||
}
|
||||
|
||||
.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: 48px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.easy__item--fir p {
|
||||
width: 93%;
|
||||
margin-bottom: 29px;
|
||||
}
|
||||
|
||||
.easy__item--sec img {
|
||||
margin-bottom: -10px;
|
||||
margin-right: -5px;
|
||||
}
|
||||
|
||||
.easy__item--thr img {
|
||||
margin-bottom: -10px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.easy__item--sec {
|
||||
grid-area: b;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.easy__item--sec p,
|
||||
.easy__item--thr p,
|
||||
.easy__item--sec,
|
||||
.easy__item--thr {
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.easy__item--thr {
|
||||
grid-area: c;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.easy__item--thr p {
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.easy__arrow {
|
||||
width: 68px;
|
||||
height: 18px;
|
||||
background-image: url("/static/img/svg/Arrow08.svg");
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.easy__arrow--fir {
|
||||
top: 46%;
|
||||
right: 101%;
|
||||
}
|
||||
|
||||
.easy__arrow--sec {
|
||||
top: 117%;
|
||||
left: 30%;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.easy__btn {
|
||||
margin-top: -21px;
|
||||
}
|
||||
76
static/css/moover/presentation.css
Normal file
76
static/css/moover/presentation.css
Normal file
@@ -0,0 +1,76 @@
|
||||
.presentation {
|
||||
margin: 20px -65px 140px;
|
||||
}
|
||||
|
||||
.presentation__top {
|
||||
position: relative;
|
||||
min-height: 270px;
|
||||
margin: 0 auto 116px;
|
||||
padding: 29px 0 40px;
|
||||
background-image: url(/static/img/webp/Box9.webp),
|
||||
url(/static/img/webp/Box10.webp),
|
||||
url(/static/img/webp/Box11.webp),
|
||||
url(/static/img/webp/Box12.webp);
|
||||
background-position: top -5px left 44px,
|
||||
top -30px right -15px,
|
||||
bottom 70px left 276px,
|
||||
bottom 67px right 274px;
|
||||
background-repeat: no-repeat,
|
||||
no-repeat,
|
||||
no-repeat,
|
||||
no-repeat;
|
||||
}
|
||||
|
||||
.presentation__title {
|
||||
margin-bottom: 21px;
|
||||
}
|
||||
|
||||
.presentation__subtitle {
|
||||
margin-bottom: 39px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.presentation__btn {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.presentation__next {
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.presentation__arrows {
|
||||
padding-top: 2px;
|
||||
animation: jump 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes jump {
|
||||
0% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
60% {
|
||||
transform: translateY(20px);
|
||||
}
|
||||
70% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
80% {
|
||||
transform: translateY(20px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
|
||||
.presentation__bottom .presentation__title {
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
|
||||
.presentation__cards {
|
||||
max-width: 1300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
102
static/css/moover/root.css
Normal file
102
static/css/moover/root.css
Normal file
@@ -0,0 +1,102 @@
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
max-width: 1280px;
|
||||
position: relative;
|
||||
min-height: 695px;
|
||||
}
|
||||
|
||||
/*@media (max-width: 1339.98px) {*/
|
||||
/* .container {*/
|
||||
/* width: 992px*/
|
||||
/* }*/
|
||||
/*}*/
|
||||
|
||||
/*@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-grey: #F1F1F1;
|
||||
--color-grey2: #7A7979;
|
||||
|
||||
|
||||
--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;
|
||||
}
|
||||
|
||||
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h1, .title {
|
||||
font-size: 44px;
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-bottom: 81px;
|
||||
}
|
||||
41
static/css/moover/use.css
Normal file
41
static/css/moover/use.css
Normal file
@@ -0,0 +1,41 @@
|
||||
.use {
|
||||
margin-bottom: 123px;
|
||||
}
|
||||
|
||||
.use .title {
|
||||
max-width: 80%;
|
||||
margin-bottom: 49px;
|
||||
}
|
||||
|
||||
.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.use--diff .title {
|
||||
width: 60%;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.use.use--diff .use__img {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
204
static/css/slick-theme.css
Normal file
204
static/css/slick-theme.css
Normal file
@@ -0,0 +1,204 @@
|
||||
@charset 'UTF-8';
|
||||
/* Slider */
|
||||
.slick-loading .slick-list
|
||||
{
|
||||
background: #fff url('./ajax-loader.gif') center center no-repeat;
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
@font-face
|
||||
{
|
||||
font-family: 'slick';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
src: url('./fonts/slick.eot');
|
||||
src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
|
||||
}
|
||||
/* Arrows */
|
||||
.slick-prev,
|
||||
.slick-next
|
||||
{
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
||||
display: block;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
-webkit-transform: translate(0, -50%);
|
||||
-ms-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
color: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
.slick-prev:hover,
|
||||
.slick-prev:focus,
|
||||
.slick-next:hover,
|
||||
.slick-next:focus
|
||||
{
|
||||
color: transparent;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
.slick-prev:hover:before,
|
||||
.slick-prev:focus:before,
|
||||
.slick-next:hover:before,
|
||||
.slick-next:focus:before
|
||||
{
|
||||
opacity: 1;
|
||||
}
|
||||
.slick-prev.slick-disabled:before,
|
||||
.slick-next.slick-disabled:before
|
||||
{
|
||||
opacity: .25;
|
||||
}
|
||||
|
||||
.slick-prev:before,
|
||||
.slick-next:before
|
||||
{
|
||||
font-family: 'slick';
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
|
||||
opacity: .75;
|
||||
color: white;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.slick-prev
|
||||
{
|
||||
left: -25px;
|
||||
}
|
||||
[dir='rtl'] .slick-prev
|
||||
{
|
||||
right: -25px;
|
||||
left: auto;
|
||||
}
|
||||
.slick-prev:before
|
||||
{
|
||||
content: '←';
|
||||
}
|
||||
[dir='rtl'] .slick-prev:before
|
||||
{
|
||||
content: '→';
|
||||
}
|
||||
|
||||
.slick-next
|
||||
{
|
||||
right: -25px;
|
||||
}
|
||||
[dir='rtl'] .slick-next
|
||||
{
|
||||
right: auto;
|
||||
left: -25px;
|
||||
}
|
||||
.slick-next:before
|
||||
{
|
||||
content: '→';
|
||||
}
|
||||
[dir='rtl'] .slick-next:before
|
||||
{
|
||||
content: '←';
|
||||
}
|
||||
|
||||
/* Dots */
|
||||
.slick-dotted.slick-slider
|
||||
{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.slick-dots
|
||||
{
|
||||
position: absolute;
|
||||
bottom: -25px;
|
||||
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
list-style: none;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
.slick-dots li
|
||||
{
|
||||
position: relative;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 0 5px;
|
||||
padding: 0;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
.slick-dots li button
|
||||
{
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
|
||||
display: block;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 5px;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
color: transparent;
|
||||
border: 0;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
.slick-dots li button:hover,
|
||||
.slick-dots li button:focus
|
||||
{
|
||||
outline: none;
|
||||
}
|
||||
.slick-dots li button:hover:before,
|
||||
.slick-dots li button:focus:before
|
||||
{
|
||||
opacity: 1;
|
||||
}
|
||||
.slick-dots li button:before
|
||||
{
|
||||
font-family: 'slick';
|
||||
font-size: 6px;
|
||||
line-height: 20px;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
content: '•';
|
||||
text-align: center;
|
||||
|
||||
opacity: .25;
|
||||
color: black;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
.slick-dots li.slick-active button:before
|
||||
{
|
||||
opacity: .75;
|
||||
color: black;
|
||||
}
|
||||
142
static/css/slick.css
Normal file
142
static/css/slick.css
Normal file
@@ -0,0 +1,142 @@
|
||||
/* Slider */
|
||||
.slick-slider {
|
||||
position: relative;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
-khtml-user-select: none;
|
||||
-ms-touch-action: pan-y;
|
||||
touch-action: pan-y;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.slick-list {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.slick-list:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.slick-list.dragging {
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
}
|
||||
|
||||
.slick-slider .slick-track,
|
||||
.slick-slider .slick-list {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
-o-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.slick-track {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.slick-track:before,
|
||||
.slick-track:after {
|
||||
display: table;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.slick-track:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.slick-loading .slick-track {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.slick-slide {
|
||||
display: none;
|
||||
float: left;
|
||||
height: 100%;
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
[dir='rtl'] .slick-slide {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.slick-slide img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.slick-slide.slick-loading img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.slick-slide.dragging img {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.slick-initialized .slick-slide {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.slick-loading .slick-slide {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.slick-vertical .slick-slide {
|
||||
display: block;
|
||||
|
||||
height: auto;
|
||||
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.slick-arrow.slick-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.slick-prev, .slick-next {
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
display: block;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
padding: 0;
|
||||
-webkit-transform: translate(0, -50%);
|
||||
-ms-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
cursor: pointer;
|
||||
color: transparent;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
border: 1px solid var(--color-primary);
|
||||
outline: 0;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
text-indent: -9999px;
|
||||
z-index: 1;
|
||||
background: var(--color-primary) url("/static/img/svg/slick-arrow.svg") no-repeat center;
|
||||
transition: background-color .2s ease-in-out;
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
right: 0;
|
||||
transform: rotate(180deg) translate(0, 50%);
|
||||
}
|
||||
3
static/img/svg/Arrow08.svg
Normal file
3
static/img/svg/Arrow08.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="68" height="18" viewBox="0 0 68 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M54.5455 2.94981C52.766 1.91497 50.7812 0.832029 50.1346 0.543456C48.2971 -0.276928 46.5619 -0.157082 46.0488 0.825723C45.351 2.16215 46.6527 3.4895 50.8124 5.68494C52.8468 6.75803 54.4597 7.6888 54.3974 7.75267C54.2493 7.90445 35.6219 5.73738 28.188 4.70333C25.0146 4.26219 18.1492 3.28688 12.9317 2.53588C7.71422 1.78488 2.84561 1.17067 2.11246 1.17067C0.627678 1.17067 -0.472054 2.11365 0.203789 2.80631C1.35891 3.99017 43.0138 10.8158 56.6476 12.0552L59.7199 12.3347L58.0351 13.068C55.8895 14.0019 52.6137 16.4548 52.6137 17.1277C52.6137 18.5099 56.4795 18.2249 61.8455 16.4473C66.0379 15.0585 68 13.4902 68 11.5286C68 9.87083 66.8087 8.92115 61.9936 6.7399C59.6768 5.69008 56.3249 3.98465 54.5455 2.94981Z" fill="#FF613A" fill-opacity="0.8"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 860 B |
3
static/img/svg/slick-arrow.svg
Normal file
3
static/img/svg/slick-arrow.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="44" viewBox="0 0 24 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M22 42L2 22L22 2" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 211 B |
BIN
static/img/webp/diff.webp
Normal file
BIN
static/img/webp/diff.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
BIN
static/img/webp/phone-border.webp
Normal file
BIN
static/img/webp/phone-border.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
static/img/webp/sender-card1.webp
Normal file
BIN
static/img/webp/sender-card1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
static/img/webp/sender-card2.webp
Normal file
BIN
static/img/webp/sender-card2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
static/img/webp/sender-card3.webp
Normal file
BIN
static/img/webp/sender-card3.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
BIN
static/img/webp/use.webp
Normal file
BIN
static/img/webp/use.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 851 KiB |
1
static/js/slick.min.js
vendored
Normal file
1
static/js/slick.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user