Skip to content

L
landing_pages
Commit 4bdd0f24 by Iren
Options

add price-mobile

parent 6708e35b
Pipeline #3652 canceled with stage
    Showing with 74 additions and 43 deletions
    css/styles.css
    ...@@ -2624,9 +2624,11 @@ p.price-p { ...@@ -2624,9 +2624,11 @@ p.price-p {
    margin-left: -3px; margin-left: -3px;
    } }
    } }
    /*price-mobile*/
    @media (min-width: 678px) { @media (min-width: 678px) {
    .price-mobile-none { .price-mobile-none {
    position: absolute; position: absolute;
    display: none;
    } }
    } }
    .price-mobile-tittle { .price-mobile-tittle {
    ...@@ -2653,13 +2655,13 @@ p.price-p { ...@@ -2653,13 +2655,13 @@ p.price-p {
    } }
    .price-mobile-container { .price-mobile-container {
    position: relative; position: relative;
    width: 237px; width: 201px;
    height: 479px; height: 477px;
    border-radius: 6px; border-radius: 6px;
    background: #f9fbff; background: #f9fbff;
    border: #e6feea 1px solid; border: #e6feea 1px solid;
    margin-left: 8px; margin-left: 8px;
    padding-left: 16px; padding-left: 15px;
    } }
    .price-mobile-container h6 { .price-mobile-container h6 {
    position: relative; position: relative;
    ...@@ -2670,8 +2672,8 @@ p.price-p { ...@@ -2670,8 +2672,8 @@ p.price-p {
    font-weight: 400; font-weight: 400;
    line-height: 24px; line-height: 24px;
    letter-spacing: 0.24px; letter-spacing: 0.24px;
    margin-left: 23px; margin-left: 8px;
    margin-top: 23px; margin-top: 21px;
    } }
    .mobile-img { .mobile-img {
    position: absolute; position: absolute;
    ...@@ -2691,8 +2693,8 @@ p.price-p { ...@@ -2691,8 +2693,8 @@ p.price-p {
    line-height: 24px; line-height: 24px;
    color: #303a81; color: #303a81;
    } }
    .price-mobile-line { .mobile-line {
    margin-left: 32%; margin-left: 29%;
    margin-top: 9px; margin-top: 9px;
    width: 75px; width: 75px;
    height: 1px; height: 1px;
    ...@@ -2704,9 +2706,13 @@ p.price-p { ...@@ -2704,9 +2706,13 @@ p.price-p {
    margin-top: 9px; margin-top: 9px;
    margin-left: 16px; margin-left: 16px;
    } }
    .price-info-mobile li {
    padding-left: 0;
    }
    @media (max-width: 768px) { @media (max-width: 768px) {
    .price-info-mobile li p { .price-info-mobile li p {
    font-family: SFUIDisplay-Regular; font-family: SFUIDisplay-Regular;
    margin-left: -6px;
    font-size: 14px; font-size: 14px;
    line-height: 44px; line-height: 44px;
    font-weight: 500; font-weight: 500;
    ...@@ -2730,7 +2736,7 @@ p.price-p { ...@@ -2730,7 +2736,7 @@ p.price-p {
    } }
    .price-mobile-line { .price-mobile-line {
    margin-left: -15px; margin-left: -15px;
    width: 67px; width: 52px;
    height: 1px; height: 1px;
    background: #e6effa; background: #e6effa;
    } }
    ...@@ -2738,18 +2744,27 @@ p.price-p { ...@@ -2738,18 +2744,27 @@ p.price-p {
    position: relative; position: relative;
    margin-left: 16px; margin-left: 16px;
    padding-left: 16px; padding-left: 16px;
    width: 79px; /*width: 76px;*/
    width: 58px;
    height: 479px; height: 479px;
    border-bottom-left-radius: 6px; border-bottom-left-radius: 6px;
    border-top-left-radius: 6px; border-top-left-radius: 6px;
    background: #f9fbff; background: #f9fbff;
    border: #e6feea 1px solid; border: #e6feea 1px solid;
    } }
    .mobile-line-part {
    width: 5px;
    height: 1px;
    margin-top: 19px;
    margin-left: 54px;
    background: #c94d4e;
    }
    .price-mobile-part { .price-mobile-part {
    text-align: center; text-align: center;
    margin-top: 113px; margin-top: 113px;
    } }
    .price-mobile-part p { .price-mobile-part p {
    margin-left: 31px;
    font-size: 60px; font-size: 60px;
    line-height: 24px; line-height: 24px;
    color: #303a81; color: #303a81;
    ...@@ -2760,12 +2775,12 @@ p.price-p { ...@@ -2760,12 +2775,12 @@ p.price-p {
    color: #303a81; color: #303a81;
    } }
    .price-mobile-btn { .price-mobile-btn {
    margin-top: 13px; margin-top: 15px;
    margin-left: 6px; margin-left: 7px;
    width: 171px; width: 171px;
    height: 32px; height: 32px;
    border: #c94d4e 1px solid; border: #c94d4e 1px solid;
    font-size: 12px; font-size: 11px;
    font-weight: 400; font-weight: 400;
    line-height: 30px; line-height: 30px;
    letter-spacing: 0; letter-spacing: 0;
    ...@@ -2775,13 +2790,13 @@ p.price-p { ...@@ -2775,13 +2790,13 @@ p.price-p {
    } }
    .mobile-img-part { .mobile-img-part {
    position: absolute; position: absolute;
    left: 0; left: -1px;
    } }
    .price-mobile-btn-part { .price-mobile-btn-part {
    margin-top: 15px; margin-top: 15px;
    margin-left: 17px; margin-left: 9px;
    height: 32px; height: 32px;
    width: 56px; width: 52px;
    border-top: #c94d4e 1px solid; border-top: #c94d4e 1px solid;
    border-bottom-left-radius: 16px; border-bottom-left-radius: 16px;
    border-top-left-radius: 16px; border-top-left-radius: 16px;
    ...@@ -2796,7 +2811,8 @@ p.price-p { ...@@ -2796,7 +2811,8 @@ p.price-p {
    } }
    .mobile-point-wrapper { .mobile-point-wrapper {
    display: flex; display: flex;
    padding-left: 95px; /*padding-left: 95px;*/
    justify-content: center;
    padding-top: 10px; padding-top: 10px;
    padding-bottom: 73px; padding-bottom: 73px;
    } }
    ......
    css/styles.less
    ...@@ -2117,10 +2117,11 @@ p.price-p { ...@@ -2117,10 +2117,11 @@ p.price-p {
    margin-left: -3px; margin-left: -3px;
    } }
    } }
    /*price-mobile*/
    .price-mobile-none { .price-mobile-none {
    @media(min-width: 678px){ @media(min-width: 678px){
    position: absolute; position: absolute;
    display: none;
    } }
    } }
    ...@@ -2148,13 +2149,13 @@ p.price-p { ...@@ -2148,13 +2149,13 @@ p.price-p {
    } }
    .price-mobile-container { .price-mobile-container {
    position: relative; position: relative;
    width: 237px; width: 201px;
    height: 479px; height: 477px;
    border-radius: 6px; border-radius: 6px;
    background: #f9fbff; background: #f9fbff;
    border: #e6feea 1px solid; border: #e6feea 1px solid;
    margin-left: 8px; margin-left: 8px;
    padding-left: 16px; padding-left: 15px;
    h6 { h6 {
    position: relative; position: relative;
    z-index: 4; z-index: 4;
    ...@@ -2164,8 +2165,8 @@ p.price-p { ...@@ -2164,8 +2165,8 @@ p.price-p {
    font-weight: 400; font-weight: 400;
    line-height: 24px; line-height: 24px;
    letter-spacing: 0.24px; letter-spacing: 0.24px;
    margin-left: 23px; margin-left: 8px;
    margin-top: 23px; margin-top: 21px;
    } }
    } }
    .mobile-img { .mobile-img {
    ...@@ -2187,8 +2188,8 @@ p.price-p { ...@@ -2187,8 +2188,8 @@ p.price-p {
    color: #303a81; color: #303a81;
    } }
    } }
    .price-mobile-line { .mobile-line {
    margin-left: 32%; margin-left: 29%;
    margin-top: 9px; margin-top: 9px;
    width: 75px; width: 75px;
    height: 1px; height: 1px;
    ...@@ -2199,9 +2200,13 @@ p.price-p { ...@@ -2199,9 +2200,13 @@ p.price-p {
    font-size: 16px; font-size: 16px;
    margin-top: 9px; margin-top: 9px;
    margin-left: 16px; margin-left: 16px;
    li {
    padding-left: 0;
    }
    li p{ li p{
    @media (max-width: 768px) { @media (max-width: 768px) {
    font-family: SFUIDisplay-Regular; font-family: SFUIDisplay-Regular;
    margin-left: -6px;
    font-size: 14px; font-size: 14px;
    line-height: 44px; line-height: 44px;
    font-weight: 500; font-weight: 500;
    ...@@ -2228,7 +2233,7 @@ p.price-p { ...@@ -2228,7 +2233,7 @@ p.price-p {
    } }
    .price-mobile-line { .price-mobile-line {
    margin-left: -15px; margin-left: -15px;
    width: 67px; width: 52px;
    height: 1px; height: 1px;
    background: #e6effa; background: #e6effa;
    } }
    ...@@ -2236,17 +2241,26 @@ p.price-p { ...@@ -2236,17 +2241,26 @@ p.price-p {
    position: relative; position: relative;
    margin-left: 16px; margin-left: 16px;
    padding-left: 16px; padding-left: 16px;
    width: 79px; /*width: 76px;*/
    width: 58px;
    height: 479px; height: 479px;
    border-bottom-left-radius: 6px; border-bottom-left-radius: 6px;
    border-top-left-radius: 6px; border-top-left-radius: 6px;
    background: #f9fbff; background: #f9fbff;
    border: #e6feea 1px solid; border: #e6feea 1px solid;
    } }
    .mobile-line-part {
    width: 5px;
    height: 1px;
    margin-top: 19px;
    margin-left: 54px;
    background: #c94d4e;
    }
    .price-mobile-part { .price-mobile-part {
    text-align: center; text-align: center;
    margin-top: 113px; margin-top: 113px;
    p { p {
    margin-left: 31px;
    font-size: 60px; font-size: 60px;
    line-height: 24px; line-height: 24px;
    color: #303a81; color: #303a81;
    ...@@ -2258,12 +2272,12 @@ p.price-p { ...@@ -2258,12 +2272,12 @@ p.price-p {
    } }
    } }
    .price-mobile-btn { .price-mobile-btn {
    margin-top: 13px; margin-top: 15px;
    margin-left: 6px; margin-left: 7px;
    width: 171px; width: 171px;
    height: 32px; height: 32px;
    border: #c94d4e 1px solid; border: #c94d4e 1px solid;
    font-size: 12px; font-size: 11px;
    font-weight: 400; font-weight: 400;
    line-height: 30px; line-height: 30px;
    letter-spacing: 0; letter-spacing: 0;
    ...@@ -2273,13 +2287,13 @@ p.price-p { ...@@ -2273,13 +2287,13 @@ p.price-p {
    } }
    .mobile-img-part { .mobile-img-part {
    position: absolute; position: absolute;
    left: 0; left: -1px;
    } }
    .price-mobile-btn-part { .price-mobile-btn-part {
    margin-top: 15px; margin-top: 15px;
    margin-left: 17px; margin-left: 9px;
    height: 32px; height: 32px;
    width: 56px; width: 52px;
    border-top: #c94d4e 1px solid; border-top: #c94d4e 1px solid;
    border-bottom-left-radius: 16px; border-bottom-left-radius: 16px;
    border-top-left-radius: 16px; border-top-left-radius: 16px;
    ...@@ -2294,7 +2308,8 @@ p.price-p { ...@@ -2294,7 +2308,8 @@ p.price-p {
    } }
    .mobile-point-wrapper { .mobile-point-wrapper {
    display: flex; display: flex;
    padding-left: 95px; /*padding-left: 95px;*/
    justify-content: center;
    padding-top: 10px; padding-top: 10px;
    padding-bottom: 73px; padding-bottom: 73px;
    } }
    ......
    index.html
    ...@@ -1115,8 +1115,8 @@ ...@@ -1115,8 +1115,8 @@
    </div> </div>
    </div> </div>
    </section> </section>
    <section>
    <div class="price-mobile-none"> <section class="price-mobile-none">
    <div class="price-mobile-tittle"> <div class="price-mobile-tittle">
    <h2>Цены</h2> <h2>Цены</h2>
    <div class="price-mobile-tittle-line"> <div class="price-mobile-tittle-line">
    ...@@ -1124,12 +1124,12 @@ ...@@ -1124,12 +1124,12 @@
    </div> </div>
    <div class="price-mobile-wrapper"> <div class="price-mobile-wrapper">
    <div class="price-mobile-container"> <div class="price-mobile-container">
    <img src="img/mobile-img.png" width="207" class="mobile-img"> <img src="img/mobile-img.png" width="212" class="mobile-img">
    <h6>Free (Beta)</h6> <h6>Free (Beta)</h6>
    <div class="price-mobile"> <div class="price-mobile">
    <p>0<span>&#8381</span></p> <p>0<span>&#8381</span></p>
    </div> </div>
    <div class="price-mobile-line"> <div class="mobile-line">
    </div> </div>
    <ul class="price-info-mobile"> <ul class="price-info-mobile">
    <li> <li>
    ...@@ -1173,14 +1173,15 @@ ...@@ -1173,14 +1173,15 @@
    <div class="price-mobile-container-part"> <div class="price-mobile-container-part">
    <img src="img/mobile-img-path.png" class="mobile-img-part"> <img src="img/mobile-img-path.png" class="mobile-img-part">
    <div class="price-mobile-part"> <div class="price-mobile-part">
    <p>0<span>&#8381</span></p> <p>1</p>
    </div> </div>
    <div class="price-mobile-line">
    <div class="mobile-line-part">
    </div> </div>
    <ul class="price-info-mobile vvv"> <ul class="price-info-mobile">
    <li> <li>
    <p> <p>
    Объёмд Объём
    </p> </p>
    <div class="price-mobile-line"> <div class="price-mobile-line">
    </div> </div>
    ...@@ -1214,7 +1215,7 @@ ...@@ -1214,7 +1215,7 @@
    </div> </div>
    </li> </li>
    </ul> </ul>
    <button type="button" class="price-mobile-btn-part">Попроб</button> <button type="button" class="price-mobile-btn-part">Попро</button>
    </div> </div>
    </div> </div>
    </div> </div>
    ...@@ -1228,7 +1229,6 @@ ...@@ -1228,7 +1229,6 @@
    <div class="mobile-point"> <div class="mobile-point">
    </div> </div>
    </div> </div>
    </div>
    </section> </section>
    <section class="connection"> <section class="connection">
    <div class="main-container"> <div class="main-container">
    ......
    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