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