Skip to content

L
landing_pages
Commit aeb50226 by Iren
Options

add syule for max-wiht 992px

parent eb00a506
Showing with 423 additions and 17 deletions
css/styles.css
...@@ -66,6 +66,11 @@ header { ...@@ -66,6 +66,11 @@ header {
margin-bottom: 0; margin-bottom: 0;
} }
} }
@media (max-width: 992px) {
header {
margin-bottom: 57px;
}
}
.background-banner { .background-banner {
background-image: url("../img/banner-background.png"); background-image: url("../img/banner-background.png");
background-repeat: no-repeat; background-repeat: no-repeat;
...@@ -80,6 +85,11 @@ header { ...@@ -80,6 +85,11 @@ header {
width: 100%; width: 100%;
height: 733px; height: 733px;
} }
@media (max-width: 992px) {
.ooo {
height: 510px;
}
}
.header-container { .header-container {
height: 733px; height: 733px;
color: red; color: red;
...@@ -94,6 +104,11 @@ header { ...@@ -94,6 +104,11 @@ header {
justify-content: space-between; justify-content: space-between;
height: 19%; height: 19%;
} }
@media (max-width: 992px) {
.header-wrapp {
height: 80px;
}
}
.header-img { .header-img {
width: 19.6%; width: 19.6%;
margin-top: 1.8%; margin-top: 1.8%;
...@@ -104,6 +119,12 @@ header { ...@@ -104,6 +119,12 @@ header {
width: 100%; width: 100%;
height: 37%; height: 37%;
} }
@media (max-width: 992px) {
.header-img {
height: 80px;
width: 150px;
}
}
.header-nav { .header-nav {
position: relative; position: relative;
z-index: 3; z-index: 3;
...@@ -113,9 +134,21 @@ header { ...@@ -113,9 +134,21 @@ header {
height: 4.7%; height: 4.7%;
margin-top: 3%; margin-top: 3%;
} }
@media (max-width: 992px) {
.header-nav {
width: 570px;
height: 5px;
margin-top: 20px;
}
}
.header-link { .header-link {
margin-right: 2.5%; margin-right: 2.5%;
} }
@media (max-width: 992px) {
.header-link {
margin-right: 10px;
}
}
.header-link a { .header-link a {
color: white; color: white;
text-decoration: none; text-decoration: none;
...@@ -124,9 +157,19 @@ header { ...@@ -124,9 +157,19 @@ header {
letter-spacing: 0.14px; letter-spacing: 0.14px;
font-family: SFUIDisplay-Regular; font-family: SFUIDisplay-Regular;
} }
@media (max-width: 992px) {
.header-link a {
font-size: 12px;
}
}
.header-link-language { .header-link-language {
margin-right: 2.5%; margin-right: 2.5%;
} }
@media (max-width: 992px) {
.header-link-language {
margin-right: 10px;
}
}
.header-link-language a { .header-link-language a {
color: white; color: white;
text-decoration: none; text-decoration: none;
...@@ -135,17 +178,36 @@ header { ...@@ -135,17 +178,36 @@ header {
letter-spacing: 0.14px; letter-spacing: 0.14px;
font-family: SFUIDisplay-Regular; font-family: SFUIDisplay-Regular;
} }
@media (max-width: 992px) {
.header-link-language a {
font-size: 12px;
}
}
.header-line { .header-line {
width: 30px; width: 30px;
height: 35px; height: 35px;
margin-top: -6px; margin-top: -6px;
border-left: white 1px solid; border-left: white 1px solid;
} }
@media (max-width: 992px) {
.header-line {
margin-right: 5px;
width: 4px;
height: 20px;
margin-top: 0;
}
}
.header-icon i { .header-icon i {
color: white; color: white;
font-size: 18px; font-size: 18px;
margin-right: 5px; margin-right: 5px;
} }
@media (max-width: 992px) {
.header-icon i {
font-size: 12px;
margin-left: 0;
}
}
.header-icon i:last-child { .header-icon i:last-child {
margin-right: 0!important; margin-right: 0!important;
} }
...@@ -163,6 +225,13 @@ h1 { ...@@ -163,6 +225,13 @@ h1 {
letter-spacing: 0.6px; letter-spacing: 0.6px;
margin-bottom: 2.5%; margin-bottom: 2.5%;
} }
@media (max-width: 992px) {
h1 {
font-size: 36px;
line-height: 46px;
margin-bottom: 5px;
}
}
.header-h1-line { .header-h1-line {
position: relative; position: relative;
z-index: 3; z-index: 3;
...@@ -172,6 +241,12 @@ h1 { ...@@ -172,6 +241,12 @@ h1 {
border-bottom: #c94d4e 2px solid; border-bottom: #c94d4e 2px solid;
margin-bottom: 4.2%; margin-bottom: 4.2%;
} }
@media (max-width: 992px) {
.header-h1-line {
width: 300px;
margin-bottom: 7px;
}
}
.header-text { .header-text {
position: relative; position: relative;
z-index: 3; z-index: 3;
...@@ -182,6 +257,12 @@ h1 { ...@@ -182,6 +257,12 @@ h1 {
letter-spacing: 0; letter-spacing: 0;
color: white; color: white;
} }
@media (max-width: 992px) {
.header-text {
font-size: 16px;
line-height: 18px;
}
}
.header-btn { .header-btn {
position: relative; position: relative;
z-index: 3; z-index: 3;
...@@ -194,6 +275,14 @@ h1 { ...@@ -194,6 +275,14 @@ h1 {
background: #c94d4e; background: #c94d4e;
} }
} }
@media (max-width: 992px) {
.header-btn {
width: 150px;
font-size: 12px;
background: #c94d4e;
margin-top: 5px;
}
}
.header-btn-background { .header-btn-background {
font-family: SFUIDisplay-Regular; font-family: SFUIDisplay-Regular;
position: relative; position: relative;
...@@ -218,6 +307,13 @@ h1 { ...@@ -218,6 +307,13 @@ h1 {
font-size: 16px; font-size: 16px;
} }
} }
@media (max-width: 992px) {
.header-btn-background {
width: 150px;
font-size: 12px;
margin-top: 5px;
}
}
.header-text-wrapper { .header-text-wrapper {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -229,6 +325,14 @@ video { ...@@ -229,6 +325,14 @@ video {
position: relative; position: relative;
z-index: 3; z-index: 3;
} }
@media (max-width: 992px) {
video {
width: 90%;
height: 50%;
margin-top: 50px;
margin-left: 25px;
}
}
.main-container { .main-container {
position: relative; position: relative;
max-width: 1250px; max-width: 1250px;
...@@ -304,7 +408,6 @@ video { ...@@ -304,7 +408,6 @@ video {
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.h2-desktop-tittle { .h2-desktop-tittle {
font-family: HelveticaNeue-Black;
max-width: 170px; max-width: 170px;
} }
} }
...@@ -394,6 +497,11 @@ video { ...@@ -394,6 +497,11 @@ video {
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
@media (max-width: 992px) {
.main-btn-margin {
margin-top: 130px!important;
}
}
/*advertising*/ /*advertising*/
.advertising-background { .advertising-background {
/*background-repeat: no-repeat; /*background-repeat: no-repeat;
...@@ -421,6 +529,11 @@ video { ...@@ -421,6 +529,11 @@ video {
padding-bottom: 20px; padding-bottom: 20px;
} }
} }
@media (max-width: 992px) {
.advertising-background {
padding-bottom: 20px;
}
}
.advertising { .advertising {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -721,10 +834,25 @@ video { ...@@ -721,10 +834,25 @@ video {
top: 2%; top: 2%;
} }
} }
@media (max-width: 992px) {
.option-card-line {
position: absolute;
width: 2px;
height: 343px;
transform: rotate(0deg);
left: 50%;
top: 2%;
}
}
.option-btn { .option-btn {
margin-top: 0!important; margin-top: 0!important;
margin-bottom: 146px!important; margin-bottom: 146px!important;
} }
@media (max-width: 992px) {
.option-btn {
margin-bottom: 71px!important;
}
}
/*protection*/ /*protection*/
.protection-background { .protection-background {
background: #f9fbff; background: #f9fbff;
...@@ -738,6 +866,12 @@ video { ...@@ -738,6 +866,12 @@ video {
padding-top: 51px; padding-top: 51px;
} }
} }
@media (max-width: 992px) {
.protection-background {
padding-top: 71px;
padding-bottom: 145px;
}
}
.protection { .protection {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
...@@ -753,6 +887,11 @@ video { ...@@ -753,6 +887,11 @@ video {
margin-right: 16px; margin-right: 16px;
} }
} }
@media (max-width: 992px) {
.protection-text-margin {
margin-bottom: 40px;
}
}
.protection-text { .protection-text {
font-family: AvenirNext-Heavy; font-family: AvenirNext-Heavy;
height: 90px; height: 90px;
...@@ -772,6 +911,11 @@ video { ...@@ -772,6 +911,11 @@ video {
.catalog { .catalog {
padding-top: 135px; padding-top: 135px;
} }
@media (max-width: 992px) {
.catalog {
padding-top: 65px;
}
}
.catalog-container { .catalog-container {
display: flex; display: flex;
} }
...@@ -795,6 +939,24 @@ video { ...@@ -795,6 +939,24 @@ video {
font-family: AvenirNext-Heavy sans-serif; font-family: AvenirNext-Heavy sans-serif;
margin-right: 5%; margin-right: 5%;
margin-bottom: 60px; margin-bottom: 60px;
width: 400px;
}
@media (max-width: 1250px) {
.catalog-img-container {
width: 400px;
margin-right: 2%;
}
}
@media (max-width: 992px) {
.catalog-img-container {
margin-right: 0;
width: 340px;
}
}
@media (max-width: 992px) {
.catalog-img-container img {
width: 75px;
}
} }
@media (max-width: 1250px) { @media (max-width: 1250px) {
.catalog-img-container img { .catalog-img-container img {
...@@ -825,6 +987,7 @@ video { ...@@ -825,6 +987,7 @@ video {
letter-spacing: 0.24px; letter-spacing: 0.24px;
color: #303a81; color: #303a81;
} }
/*technology*/
.technology { .technology {
background: #f9fbff; background: #f9fbff;
background-size: 100% 100%; background-size: 100% 100%;
...@@ -844,6 +1007,13 @@ video { ...@@ -844,6 +1007,13 @@ video {
padding-bottom: 125px; padding-bottom: 125px;
} }
} }
@media (max-width: 992px) {
.technology {
padding-top: 80px;
padding-bottom: 85px;
margin-bottom: 70px;
}
}
/*technology*/ /*technology*/
.technology-container-wrapper { .technology-container-wrapper {
display: flex; display: flex;
...@@ -866,6 +1036,12 @@ video { ...@@ -866,6 +1036,12 @@ video {
width: 100%; width: 100%;
} }
} }
@media (max-width: 992px) {
.technology-containe {
height: 200px;
margin-top: 20px;
}
}
.technology-card { .technology-card {
width: 50%; width: 50%;
text-align: left; text-align: left;
...@@ -884,8 +1060,13 @@ video { ...@@ -884,8 +1060,13 @@ video {
color: #303a81; color: #303a81;
letter-spacing: 0.16px; letter-spacing: 0.16px;
} }
@media (max-width: 576px) { @media (max-width: 992px) {
.technology-card img { .technology-card img {
width: 100px;
}
}
@media (max-width: 576px) {
.technology-card {
width: 142px; width: 142px;
} }
} }
...@@ -901,12 +1082,17 @@ video { ...@@ -901,12 +1082,17 @@ video {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 158px; margin-bottom: 128px;
/*@media (max-width: 1250px) { /*@media (max-width: 1250px) {
position: absolute; position: absolute;
display: none; display: none;
}*/ }*/
} }
@media (max-width: 992px) {
.price-wrapper {
margin-left: -15px;
}
}
.price-container, .price-container,
.price-container-active { .price-container-active {
position: relative; position: relative;
...@@ -925,6 +1111,14 @@ video { ...@@ -925,6 +1111,14 @@ video {
height: 900px; height: 900px;
} }
} }
@media (max-width: 992px) {
.price-container,
.price-container-active {
width: 174px;
height: 990px;
padding: 30px 8px 32px 8px;
}
}
.price-container h6, .price-container h6,
.price-container-active h6 { .price-container-active h6 {
font-family: AvenirNext-Heavy; font-family: AvenirNext-Heavy;
...@@ -956,6 +1150,12 @@ video { ...@@ -956,6 +1150,12 @@ video {
width: 223px; width: 223px;
} }
} }
@media (max-width: 992px) {
.price-container img,
.price-container-active img {
width: 190px;
}
}
.price-container { .price-container {
margin-top: 20px; margin-top: 20px;
} }
...@@ -976,6 +1176,13 @@ video { ...@@ -976,6 +1176,13 @@ video {
height: 931px; height: 931px;
} }
} }
@media (max-width: 992px) {
.price-container-active {
width: 174px;
height: 1020px;
padding: 30px 8px 32px 8px;
}
}
.price-container-active h6 { .price-container-active h6 {
font-family: AvenirNext-Heavy; font-family: AvenirNext-Heavy;
position: relative; position: relative;
...@@ -1000,6 +1207,11 @@ video { ...@@ -1000,6 +1207,11 @@ video {
width: 222px; width: 222px;
} }
} }
@media (max-width: 992px) {
.price-container-active img {
width: 191px;
}
}
.price-active .price-user { .price-active .price-user {
font-size: 20px; font-size: 20px;
text-transform: uppercase; text-transform: uppercase;
...@@ -1010,6 +1222,11 @@ video { ...@@ -1010,6 +1222,11 @@ video {
font-size: 40px; font-size: 40px;
} }
} }
@media (max-width: 992px) {
.price-active .price-user p {
font-size: 30px;
}
}
.price .price-user { .price .price-user {
font-size: 20px; font-size: 20px;
text-transform: uppercase; text-transform: uppercase;
...@@ -1034,6 +1251,12 @@ video { ...@@ -1034,6 +1251,12 @@ video {
font-size: 40px; font-size: 40px;
} }
} }
@media (max-width: 992px) {
.price p,
.price-active p {
font-size: 30px;
}
}
.price span, .price span,
.price-active span { .price-active span {
font-size: 30px; font-size: 30px;
...@@ -1054,6 +1277,12 @@ video { ...@@ -1054,6 +1277,12 @@ video {
line-height: 30px; line-height: 30px;
} }
} }
@media (max-width: 992px) {
.price .price-p-margin {
line-height: 30px;
font-size: 24px;
}
}
.price-line-little { .price-line-little {
width: 75px; width: 75px;
height: 12px; height: 12px;
...@@ -1117,6 +1346,13 @@ video { ...@@ -1117,6 +1346,13 @@ video {
font-size: 12px; font-size: 12px;
} }
} }
@media (max-width: 992px) {
.price-btn {
width: 180px;
padding: 12px 10px 15px 10px;
margin-left: -8px;
}
}
.price-btn-active { .price-btn-active {
background: #c94d4e; background: #c94d4e;
color: white; color: white;
...@@ -1127,6 +1363,12 @@ video { ...@@ -1127,6 +1363,12 @@ video {
margin-top: 8px; margin-top: 8px;
} }
} }
@media (max-width: 992px) {
.price-btn-active {
width: 180px;
padding: 12px 10px 15px 10px;
}
}
/*forms*/ /*forms*/
.connection { .connection {
background-image: url("../img/background-form.jpg"); background-image: url("../img/background-form.jpg");
......
css/styles.less
...@@ -59,6 +59,9 @@ header { ...@@ -59,6 +59,9 @@ header {
@media (max-width: 576px) { @media (max-width: 576px) {
margin-bottom: 0; margin-bottom: 0;
} }
@media (max-width: 992px) {
margin-bottom: 57px;
}
} }
.background-banner { .background-banner {
background-image: url("../img/banner-background.png"); background-image: url("../img/banner-background.png");
...@@ -73,6 +76,9 @@ header { ...@@ -73,6 +76,9 @@ header {
.ooo { .ooo {
width: 100%; width: 100%;
height: 733px; height: 733px;
@media (max-width: 992px) {
height: 510px;
}
} }
.header-container { .header-container {
height: 733px; height: 733px;
...@@ -85,6 +91,9 @@ header { ...@@ -85,6 +91,9 @@ header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
height: 19%; height: 19%;
@media (max-width: 992px) {
height: 80px;
}
} }
.header-img { .header-img {
width: 19.6%; width: 19.6%;
...@@ -95,6 +104,10 @@ header { ...@@ -95,6 +104,10 @@ header {
width: 100%; width: 100%;
height: 37%; height: 37%;
} }
@media (max-width: 992px) {
height: 80px;
width: 150px;
}
} }
.header-nav { .header-nav {
position: relative; position: relative;
...@@ -104,9 +117,17 @@ header { ...@@ -104,9 +117,17 @@ header {
width: 67.6%; width: 67.6%;
height: 4.7%; height: 4.7%;
margin-top: 3%; margin-top: 3%;
@media (max-width: 992px) {
width: 570px;
height: 5px;
margin-top: 20px;
}
} }
.header-link { .header-link {
margin-right: 2.5%; margin-right: 2.5%;
@media (max-width: 992px) {
margin-right: 10px;
}
a { a {
color: white; color: white;
text-decoration: none; text-decoration: none;
...@@ -114,10 +135,16 @@ header { ...@@ -114,10 +135,16 @@ header {
font-weight: 400; font-weight: 400;
letter-spacing: 0.14px; letter-spacing: 0.14px;
font-family: SFUIDisplay-Regular; font-family: SFUIDisplay-Regular;
@media (max-width: 992px) {
font-size: 12px;
}
} }
} }
.header-link-language { .header-link-language {
margin-right: 2.5%; margin-right: 2.5%;
@media (max-width: 992px) {
margin-right: 10px;
}
a { a {
color: white; color: white;
text-decoration: none; text-decoration: none;
...@@ -125,6 +152,9 @@ header { ...@@ -125,6 +152,9 @@ header {
font-weight: 400; font-weight: 400;
letter-spacing: 0.14px; letter-spacing: 0.14px;
font-family: SFUIDisplay-Regular; font-family: SFUIDisplay-Regular;
@media (max-width: 992px) {
font-size: 12px;
}
} }
} }
.header-line { .header-line {
...@@ -132,12 +162,22 @@ header { ...@@ -132,12 +162,22 @@ header {
height: 35px; height: 35px;
margin-top: -6px; margin-top: -6px;
border-left: white 1px solid; border-left: white 1px solid;
@media (max-width: 992px) {
margin-right: 5px;
width: 4px;
height: 20px;
margin-top: 0;
}
} }
.header-icon { .header-icon {
i { i {
color: white; color: white;
font-size: 18px; font-size: 18px;
margin-right: 5px; margin-right: 5px;
@media (max-width: 992px) {
font-size: 12px;
margin-left: 0;
}
} }
i:last-child { i:last-child {
margin-right: 0!important; margin-right: 0!important;
...@@ -156,6 +196,11 @@ h1 { ...@@ -156,6 +196,11 @@ h1 {
line-height: 62px; line-height: 62px;
letter-spacing: 0.6px; letter-spacing: 0.6px;
margin-bottom: 2.5%; margin-bottom: 2.5%;
@media (max-width: 992px) {
font-size: 36px;
line-height: 46px;
margin-bottom: 5px;
}
} }
.header-h1-line{ .header-h1-line{
position: relative; position: relative;
...@@ -165,6 +210,10 @@ h1 { ...@@ -165,6 +210,10 @@ h1 {
height: 4px; height: 4px;
border-bottom: #c94d4e 2px solid; border-bottom: #c94d4e 2px solid;
margin-bottom: 4.2%; margin-bottom: 4.2%;
@media (max-width: 992px) {
width: 300px;
margin-bottom: 7px;
}
} }
.header-text { .header-text {
position: relative; position: relative;
...@@ -175,6 +224,10 @@ h1 { ...@@ -175,6 +224,10 @@ h1 {
line-height: 30px; line-height: 30px;
letter-spacing: 0; letter-spacing: 0;
color: white; color: white;
@media (max-width: 992px) {
font-size: 16px;
line-height: 18px;
}
} }
.header-btn { .header-btn {
position: relative; position: relative;
...@@ -185,6 +238,12 @@ h1 { ...@@ -185,6 +238,12 @@ h1 {
font-size: 16px; font-size: 16px;
background: #c94d4e; background: #c94d4e;
} }
@media (max-width: 992px) {
width: 150px;
font-size: 12px;
background: #c94d4e;
margin-top: 5px;
}
} }
.header-btn-background { .header-btn-background {
font-family: SFUIDisplay-Regular; font-family: SFUIDisplay-Regular;
...@@ -207,6 +266,11 @@ h1 { ...@@ -207,6 +266,11 @@ h1 {
width: 200px; width: 200px;
font-size: 16px; font-size: 16px;
} }
@media (max-width: 992px) {
width: 150px;
font-size: 12px;
margin-top: 5px;
}
} }
.header-text-wrapper { .header-text-wrapper {
display: flex; display: flex;
...@@ -218,6 +282,12 @@ video { ...@@ -218,6 +282,12 @@ video {
margin-top: 5%; margin-top: 5%;
position: relative; position: relative;
z-index: 3; z-index: 3;
@media (max-width: 992px) {
width: 90%;
height: 50%;
margin-top: 50px;
margin-left: 25px;
}
} }
.main-container { .main-container {
position: relative; position: relative;
...@@ -286,7 +356,6 @@ video { ...@@ -286,7 +356,6 @@ video {
.h2-desktop-tittle { .h2-desktop-tittle {
font-family: HelveticaNeue-Black; font-family: HelveticaNeue-Black;
@media (max-width: 576px){ @media (max-width: 576px){
font-family: HelveticaNeue-Black;
max-width: 170px; max-width: 170px;
} }
} }
...@@ -365,6 +434,11 @@ video { ...@@ -365,6 +434,11 @@ video {
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
.main-btn-margin {
@media (max-width: 992px) {
margin-top: 130px!important;
}
}
/*advertising*/ /*advertising*/
.advertising-background { .advertising-background {
/*background-repeat: no-repeat; /*background-repeat: no-repeat;
...@@ -387,6 +461,9 @@ video { ...@@ -387,6 +461,9 @@ video {
padding-top: 105px; padding-top: 105px;
padding-bottom: 20px; padding-bottom: 20px;
} }
@media (max-width: 992px) {
padding-bottom: 20px;
}
} }
.advertising { .advertising {
display: flex; display: flex;
...@@ -431,7 +508,6 @@ video { ...@@ -431,7 +508,6 @@ video {
} }
} }
@media (min-height: 577px) { @media (min-height: 577px) {
margin-top: -65px; margin-top: -65px;
width: 120%; width: 120%;
padding-top: 0; padding-top: 0;
...@@ -580,10 +656,21 @@ video { ...@@ -580,10 +656,21 @@ video {
left: 50%; left: 50%;
top: 2%; top: 2%;
} }
@media (max-width: 992px) {
position: absolute;
width: 2px;
height: 343px;
transform: rotate(0deg);
left: 50%;
top: 2%;
}
} }
.option-btn { .option-btn {
margin-top: 0!important; margin-top: 0!important;
margin-bottom: 146px!important; margin-bottom: 146px!important;
@media (max-width: 992px) {
margin-bottom: 71px!important;
}
} }
/*protection*/ /*protection*/
.protection-background { .protection-background {
...@@ -595,6 +682,10 @@ video { ...@@ -595,6 +682,10 @@ video {
@media (max-width: 576px) { @media (max-width: 576px) {
padding-top: 51px; padding-top: 51px;
} }
@media (max-width: 992px) {
padding-top: 71px;
padding-bottom: 145px;
}
} }
.protection { .protection {
display: flex; display: flex;
...@@ -611,6 +702,11 @@ video { ...@@ -611,6 +702,11 @@ video {
} }
} }
} }
.protection-text-margin {
@media (max-width: 992px) {
margin-bottom: 40px;
}
}
.protection-text { .protection-text {
font-family: AvenirNext-Heavy; font-family: AvenirNext-Heavy;
height: 90px; height: 90px;
...@@ -627,6 +723,9 @@ video { ...@@ -627,6 +723,9 @@ video {
/*catalog*/ /*catalog*/
.catalog { .catalog {
padding-top: 135px; padding-top: 135px;
@media (max-width: 992px) {
padding-top: 65px
}
} }
.catalog-container { .catalog-container {
display: flex; display: flex;
...@@ -648,13 +747,24 @@ video { ...@@ -648,13 +747,24 @@ video {
font-family: AvenirNext-Heavy sans-serif; font-family: AvenirNext-Heavy sans-serif;
margin-right: 5%; margin-right: 5%;
margin-bottom: 60px; margin-bottom: 60px;
width: 400px;
@media (max-width: 1250px) {
width: 400px;
margin-right: 2%;
}
@media (max-width: 992px) {
margin-right: 0;
width: 340px;
}
img { img {
@media (max-width: 992px) {
width: 75px;
}
@media (max-width: 1250px) { @media (max-width: 1250px) {
width: 100px; width: 100px;
} }
} }
} }
.catalog-img-container-end { .catalog-img-container-end {
margin-right: 0; margin-right: 0;
} }
...@@ -679,6 +789,7 @@ video { ...@@ -679,6 +789,7 @@ video {
color: #303a81; color: #303a81;
} }
} }
/*technology*/
.technology { .technology {
background: #f9fbff; background: #f9fbff;
background-size: 100% 100%; background-size: 100% 100%;
...@@ -693,6 +804,11 @@ video { ...@@ -693,6 +804,11 @@ video {
padding-top: 100px; padding-top: 100px;
padding-bottom: 125px; padding-bottom: 125px;
} }
@media (max-width: 992px) {
padding-top: 80px;
padding-bottom: 85px;
margin-bottom: 70px;
}
} }
/*technology*/ /*technology*/
.technology-container-wrapper { .technology-container-wrapper {
...@@ -711,6 +827,10 @@ video { ...@@ -711,6 +827,10 @@ video {
justify-content: center; justify-content: center;
width: 100%; width: 100%;
} }
@media (max-width: 992px) {
height: 200px;
margin-top: 20px;
}
} }
.technology-card { .technology-card {
width: 50%; width: 50%;
...@@ -728,10 +848,15 @@ video { ...@@ -728,10 +848,15 @@ video {
letter-spacing: 0.16px; letter-spacing: 0.16px;
} }
img { img {
@media (max-width: 992px) {
width: 100px;
}
}
@media (max-width: 576px) { @media (max-width: 576px) {
width: 142px; width: 142px;
} }
}
} }
.technology-card-end { .technology-card-end {
padding-right: 0; padding-right: 0;
...@@ -745,7 +870,10 @@ video { ...@@ -745,7 +870,10 @@ video {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 158px; margin-bottom: 128px;
@media (max-width: 992px) {
margin-left: -15px;
}
/*@media (max-width: 1250px) { /*@media (max-width: 1250px) {
position: absolute; position: absolute;
display: none; display: none;
...@@ -764,6 +892,11 @@ video { ...@@ -764,6 +892,11 @@ video {
width: 190px; width: 190px;
height: 900px; height: 900px;
} }
@media (max-width: 992px) {
width: 174px;
height: 990px;
padding: 30px 8px 32px 8px;
}
h6 { h6 {
font-family: AvenirNext-Heavy; font-family: AvenirNext-Heavy;
position: relative; position: relative;
...@@ -786,6 +919,9 @@ video { ...@@ -786,6 +919,9 @@ video {
@media (max-width: 1250px) { @media (max-width: 1250px) {
width: 223px; width: 223px;
} }
@media (max-width: 992px) {
width: 190px;
}
} }
} }
.price-container { .price-container {
...@@ -805,6 +941,11 @@ video { ...@@ -805,6 +941,11 @@ video {
width: 190px; width: 190px;
height: 931px; height: 931px;
} }
@media (max-width: 992px) {
width: 174px;
height: 1020px;
padding: 30px 8px 32px 8px;
}
h6 { h6 {
font-family: AvenirNext-Heavy; font-family: AvenirNext-Heavy;
position: relative; position: relative;
...@@ -826,6 +967,9 @@ video { ...@@ -826,6 +967,9 @@ video {
@media (max-width: 1250px) { @media (max-width: 1250px) {
width: 222px; width: 222px;
} }
@media (max-width: 992px) {
width: 191px;
}
} }
} }
.price-active .price-user { .price-active .price-user {
...@@ -836,6 +980,9 @@ video { ...@@ -836,6 +980,9 @@ video {
@media (max-width: 1250px) { @media (max-width: 1250px) {
font-size: 40px; font-size: 40px;
} }
@media (max-width: 992px) {
font-size: 30px;
}
} }
} }
.price .price-user { .price .price-user {
...@@ -855,6 +1002,9 @@ video { ...@@ -855,6 +1002,9 @@ video {
@media (max-width: 1250px) { @media (max-width: 1250px) {
font-size: 40px; font-size: 40px;
} }
@media (max-width: 992px) {
font-size: 30px;
}
} }
span { span {
font-size: 30px; font-size: 30px;
...@@ -873,6 +1023,10 @@ video { ...@@ -873,6 +1023,10 @@ video {
@media (max-width: 1250px) { @media (max-width: 1250px) {
line-height: 30px; line-height: 30px;
} }
@media (max-width: 992px) {
line-height: 30px;
font-size: 24px;
}
} }
.price-line-little { .price-line-little {
width: 75px; width: 75px;
...@@ -930,6 +1084,11 @@ video { ...@@ -930,6 +1084,11 @@ video {
width: 190px; width: 190px;
font-size: 12px; font-size: 12px;
} }
@media (max-width: 992px) {
width: 180px;
padding: 12px 10px 15px 10px;
margin-left: -8px;
}
} }
.price-btn-active { .price-btn-active {
background: #c94d4e; background: #c94d4e;
...@@ -938,6 +1097,10 @@ video { ...@@ -938,6 +1097,10 @@ video {
@media (max-width: 1250px) { @media (max-width: 1250px) {
margin-top: 8px; margin-top: 8px;
} }
@media (max-width: 992px) {
width: 180px;
padding: 12px 10px 15px 10px;
}
} }
/*forms*/ /*forms*/
.connection { .connection {
......
index.html
...@@ -84,7 +84,6 @@ ...@@ -84,7 +84,6 @@
</div> </div>
<div class="background-banner"> <div class="background-banner">
<div class="ooo"> <div class="ooo">
jjjj
</div> </div>
</div> </div>
</header> </header>
...@@ -118,7 +117,7 @@ ...@@ -118,7 +117,7 @@
<h3 class="h3-desktop">Продажи</h3> <h3 class="h3-desktop">Продажи</h3>
<p class="text-h3-desktop"> <p class="text-h3-desktop">
Адаптируйте свои предложения под запросы Адаптируйте свои предложения под запросы
клиентов. клиентов.
</p> </p>
</div> </div>
</div> </div>
...@@ -154,7 +153,7 @@ ...@@ -154,7 +153,7 @@
<h3 class="h3-desktop">Продажи</h3> <h3 class="h3-desktop">Продажи</h3>
<p class="text-h3-desktop"> <p class="text-h3-desktop">
Все продажи вашего магазина быстро доступны Все продажи вашего магазина быстро доступны
у вас в системе. у вас в системе.
</p> </p>
</div> </div>
</div> </div>
...@@ -190,7 +189,7 @@ ...@@ -190,7 +189,7 @@
<h3 class="h3-desktop">Продажи</h3> <h3 class="h3-desktop">Продажи</h3>
<p class="text-h3-desktop"> <p class="text-h3-desktop">
Подбор, прием и работа с персоналом Подбор, прием и работа с персоналом
сильно упрощается. сильно упрощается.
</p> </p>
</div> </div>
</div> </div>
...@@ -244,7 +243,7 @@ ...@@ -244,7 +243,7 @@
</div> </div>
</div> </div>
<div class="main-flex-btn"> <div class="main-flex-btn">
<button type="button" class="main-btn">Узнать больше</button> <button type="button" class="main-btn main-btn-margin">Узнать больше</button>
</div> </div>
</section> </section>
<section class="advertising-background"> <section class="advertising-background">
...@@ -318,7 +317,7 @@ ...@@ -318,7 +317,7 @@
<div class="advertising main-container"> <div class="advertising main-container">
<div class="advertising-text"> <div class="advertising-text">
<h2 class="h2-desktop">Возможности визуального <h2 class="h2-desktop">Возможности визуального
представления</h2> представления</h2>
<div class="main-line"> <div class="main-line">
</div> </div>
<p class="text-h2-desktop"> <p class="text-h2-desktop">
...@@ -352,7 +351,7 @@ ...@@ -352,7 +351,7 @@
<div class="advertising main-container"> <div class="advertising main-container">
<div class="advertising-text"> <div class="advertising-text">
<h2 class="h2-desktop">Любые формы <h2 class="h2-desktop">Любые формы
для вашего приложения</h2> для вашего приложения</h2>
<div class="main-line"> <div class="main-line">
</div> </div>
<p class="text-h2-desktop"> <p class="text-h2-desktop">
...@@ -372,7 +371,7 @@ ...@@ -372,7 +371,7 @@
</div> </div>
<div class="advertising-text-order"> <div class="advertising-text-order">
<h2>Широкие возможности <h2>Широкие возможности
для интеграции (Открытое API)</h2> для интеграции (Открытое API)</h2>
<div class="main-line"> <div class="main-line">
</div> </div>
<p> <p>
...@@ -439,7 +438,7 @@ ...@@ -439,7 +438,7 @@
<h2 class="h2-desktop h2-desktop-tittle">Защита данных в облаке</h2> <h2 class="h2-desktop h2-desktop-tittle">Защита данных в облаке</h2>
<div class="main-line protection-line"> <div class="main-line protection-line">
</div> </div>
<p class="text-h2-desktop"> <p class="text-h2-desktop protection-text-margin">
Используемая архитектура Single tenant позволяет оградить от рисков злонамеренной Используемая архитектура Single tenant позволяет оградить от рисков злонамеренной
или случайно гибели данных всех своих пользователей благодаря использованию или случайно гибели данных всех своих пользователей благодаря использованию
персональной архитектуры и, как следствие, минимизации рисков. персональной архитектуры и, как следствие, минимизации рисков.
...@@ -565,6 +564,7 @@ ...@@ -565,6 +564,7 @@
</p> </p>
</div> </div>
</section> </section>
<section class="technology"> <section class="technology">
<div class="main-container"> <div class="main-container">
<h2 class="h2-desktop h2-desktop-tittle">Технологии</h2> <h2 class="h2-desktop h2-desktop-tittle">Технологии</h2>
...@@ -649,6 +649,7 @@ ...@@ -649,6 +649,7 @@
</div> </div>
</div> </div>
</section> </section>
<section class="main-container"> <section class="main-container">
<h2 class="h2-desktop">Цены</h2> <h2 class="h2-desktop">Цены</h2>
<div class="main-line"> <div class="main-line">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment