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

TRI-283: вёрстка лендинга

Browse Source
This commit is contained in:
Artyom Pratsko
2024-11-14 21:05:15 +03:00
parent 9dd3fbe47d
commit 1151744247
21 changed files with 970 additions and 457 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
static/css/moover.css
View File

@@ -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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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%);
}