Skip to content

L
landing_pages
Commit e68a79d5 by Iren
Options

add style for 320px

parent 8f450e47
Pipeline #3610 failed with stage
    Showing with 53 additions and 23 deletions
    css/styles.css
    ...@@ -962,8 +962,13 @@ video { ...@@ -962,8 +962,13 @@ video {
    } }
    @media (max-width: 576px) { @media (max-width: 576px) {
    .advertising-background { .advertising-background {
    padding-bottom: 10px;
    padding-top: 60px; padding-top: 60px;
    padding-bottom: 0;
    margin-bottom: 66px;
    background-image: url("../img/background-optuon-modal.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    } }
    } }
    .advertising { .advertising {
    ...@@ -1076,7 +1081,7 @@ video { ...@@ -1076,7 +1081,7 @@ video {
    @media (max-width: 576px) { @media (max-width: 576px) {
    .advertising-text p { .advertising-text p {
    font-size: 14px; font-size: 14px;
    letter-spacing: 0.14px; letter-spacing: 0.16px;
    line-height: 21px; line-height: 21px;
    margin-bottom: 20px; margin-bottom: 20px;
    } }
    ...@@ -1139,7 +1144,7 @@ video { ...@@ -1139,7 +1144,7 @@ video {
    font-size: 22px; font-size: 22px;
    width: 300px!important; width: 300px!important;
    font-weight: 700; font-weight: 700;
    letter-spacing: 0; letter-spacing: 0.5px;
    color: #303a81; color: #303a81;
    line-height: 30px; line-height: 30px;
    margin-bottom: 15px; margin-bottom: 15px;
    ...@@ -1227,9 +1232,9 @@ video { ...@@ -1227,9 +1232,9 @@ video {
    order: 5; order: 5;
    } }
    .advertising-img-order img { .advertising-img-order img {
    min-width: 320px; min-width: 300px;
    min-height: 183px; min-height: 183px;
    margin-bottom: 4px; margin-bottom: 10px;
    } }
    } }
    @media (max-width: 1250px) { @media (max-width: 1250px) {
    ...@@ -1254,9 +1259,9 @@ video { ...@@ -1254,9 +1259,9 @@ video {
    margin-top: 0; margin-top: 0;
    } }
    .advertising-img img { .advertising-img img {
    min-width: 320px; min-width: 300px;
    min-height: 183px; min-height: 183px;
    margin-bottom: 21px; margin-bottom: 43px;
    } }
    } }
    /*option*/ /*option*/
    ...@@ -1269,6 +1274,7 @@ video { ...@@ -1269,6 +1274,7 @@ video {
    } }
    @media (max-width: 576px) { @media (max-width: 576px) {
    .option-container { .option-container {
    margin-top: 3px;
    display: flex; display: flex;
    justify-content: space-between; justify-content: space-between;
    flex-wrap: nowrap; flex-wrap: nowrap;
    ...@@ -1335,6 +1341,7 @@ video { ...@@ -1335,6 +1341,7 @@ video {
    font-size: 20px; font-size: 20px;
    line-height: 24px; line-height: 24px;
    letter-spacing: 0.2px; letter-spacing: 0.2px;
    margin-top: 37px;
    } }
    } }
    .option-card-img p { .option-card-img p {
    ...@@ -1397,7 +1404,8 @@ video { ...@@ -1397,7 +1404,8 @@ video {
    } }
    @media (max-width: 576px) { @media (max-width: 576px) {
    .option-text p { .option-text p {
    font-size: 13px; font-size: 14px;
    line-height: 18px;
    } }
    } }
    .option-card-img-container { .option-card-img-container {
    ...@@ -1423,14 +1431,21 @@ video { ...@@ -1423,14 +1431,21 @@ video {
    .option-card-img-container img { .option-card-img-container img {
    width: 170px; width: 170px;
    height: 170px; height: 170px;
    margin-bottom: 20px;
    } }
    } }
    @media (max-width: 576px) { @media (max-width: 576px) {
    .option-card-img-container img { .option-card-img-container img {
    width: 107px; width: 130px;
    height: 100px; height: 130px;
    } }
    } }
    .option-line {
    width: 200px;
    height: 2px;
    background: #c94d4e;
    margin-bottom: 20px;
    }
    .option-card-line { .option-card-line {
    position: absolute; position: absolute;
    left: 51%; left: 51%;
    ...@@ -1703,7 +1718,7 @@ video { ...@@ -1703,7 +1718,7 @@ video {
    } }
    @media (max-width: 576px) { @media (max-width: 576px) {
    .catalog { .catalog {
    padding-top: 57px; padding-top: 60px;
    } }
    } }
    .catalog-container { .catalog-container {
    ......
    css/styles.less
    ...@@ -784,8 +784,13 @@ video { ...@@ -784,8 +784,13 @@ video {
    padding-top: 90px; padding-top: 90px;
    } }
    @media (max-width: 576px) { @media (max-width: 576px) {
    padding-bottom: 10px;
    padding-top: 60px; padding-top: 60px;
    padding-bottom: 0;
    margin-bottom: 66px;
    background-image: url("../img/background-optuon-modal.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    } }
    } }
    .advertising { .advertising {
    ...@@ -873,7 +878,7 @@ video { ...@@ -873,7 +878,7 @@ video {
    } }
    @media (max-width: 576px) { @media (max-width: 576px) {
    font-size: 14px; font-size: 14px;
    letter-spacing: 0.14px; letter-spacing: 0.16px;
    line-height: 21px; line-height: 21px;
    margin-bottom: 20px; margin-bottom: 20px;
    } }
    ...@@ -928,7 +933,7 @@ video { ...@@ -928,7 +933,7 @@ video {
    font-size: 22px; font-size: 22px;
    width: 300px!important; width: 300px!important;
    font-weight: 700; font-weight: 700;
    letter-spacing: 0; letter-spacing: 0.5px;
    color: #303a81; color: #303a81;
    line-height: 30px; line-height: 30px;
    margin-bottom: 15px; margin-bottom: 15px;
    ...@@ -1002,9 +1007,9 @@ video { ...@@ -1002,9 +1007,9 @@ video {
    min-width: 300px; min-width: 300px;
    order: 5; order: 5;
    img { img {
    min-width: 320px; min-width: 300px;
    min-height: 183px; min-height: 183px;
    margin-bottom: 4px; margin-bottom: 10px;
    } }
    } }
    } }
    ...@@ -1025,9 +1030,9 @@ video { ...@@ -1025,9 +1030,9 @@ video {
    min-width: 300px; min-width: 300px;
    margin-top: 0; margin-top: 0;
    img { img {
    min-width: 320px; min-width: 300px;
    min-height: 183px; min-height: 183px;
    margin-bottom: 21px; margin-bottom: 43px;
    } }
    } }
    } }
    ...@@ -1039,6 +1044,7 @@ video { ...@@ -1039,6 +1044,7 @@ video {
    justify-content: space-between; justify-content: space-between;
    align-items: baseline; align-items: baseline;
    @media (max-width: 576px) { @media (max-width: 576px) {
    margin-top: 3px;
    display: flex; display: flex;
    justify-content: space-between; justify-content: space-between;
    flex-wrap: nowrap; flex-wrap: nowrap;
    ...@@ -1085,6 +1091,7 @@ video { ...@@ -1085,6 +1091,7 @@ video {
    font-size: 20px; font-size: 20px;
    line-height: 24px; line-height: 24px;
    letter-spacing: 0.2px; letter-spacing: 0.2px;
    margin-top: 37px;
    } }
    } }
    p { p {
    ...@@ -1134,7 +1141,8 @@ padding-left: 40px; ...@@ -1134,7 +1141,8 @@ padding-left: 40px;
    letter-spacing: 0.16px; letter-spacing: 0.16px;
    color: #303a81; color: #303a81;
    @media (max-width: 576px) { @media (max-width: 576px) {
    font-size: 13px; font-size: 14px;
    line-height: 18px;
    } }
    } }
    } }
    ...@@ -1156,13 +1164,20 @@ padding-left: 40px; ...@@ -1156,13 +1164,20 @@ padding-left: 40px;
    @media (max-width: 768px) { @media (max-width: 768px) {
    width: 170px; width: 170px;
    height: 170px; height: 170px;
    margin-bottom: 20px;
    } }
    @media (max-width: 576px) { @media (max-width: 576px) {
    width: 107px; width: 130px;
    height: 100px; height: 130px;
    } }
    } }
    } }
    .option-line {
    width: 200px;
    height: 2px;
    background: #c94d4e;
    margin-bottom: 20px;
    }
    .option-card-line { .option-card-line {
    position: absolute; position: absolute;
    left: 51%; left: 51%;
    ...@@ -1382,7 +1397,7 @@ padding-left: 40px; ...@@ -1382,7 +1397,7 @@ padding-left: 40px;
    padding-top: 65px padding-top: 65px
    } }
    @media (max-width: 576px) { @media (max-width: 576px) {
    padding-top: 57px padding-top: 60px
    } }
    } }
    .catalog-container { .catalog-container {
    ......
    index.html
    ...@@ -445,7 +445,7 @@ ...@@ -445,7 +445,7 @@
    <section class="option main-container"> <section class="option main-container">
    <h2>Варианты развертывания</h2> <h2>Варианты развертывания</h2>
    <div class="main-line"> <div class="option-line">
    </div> </div>
    <div class="option-container"> <div class="option-container">
    <div class="option-card-img"> <div class="option-card-img">
    ......
    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