Skip to content

L
landing_pages
Commit c5c5edd4 by Iren
Options

add script for oll window for min-width 450px

parent af781708
Pipeline #3762 failed with stage
    Showing with 99 additions and 91 deletions
    css/styles.less
    ......@@ -71,7 +71,7 @@ header {
    background-size: 100% 100%;
    }
    @media(max-width: 576px){
    background-image: url("../img/banner-background.png");
    background-image: url("../img/banner-background.png");
    margin-top: -200px;
    height: 560px;
    }
    ......@@ -548,39 +548,39 @@ video {
    margin-bottom: 29px;
    margin-top: 4px;
    }
    /*
    /*
    .text-h2-desktop {
    font-family: SF-UI-Text-Heavy, Arial;
    font-size: 18px;
    font-weight: 300;
    line-height: 27px;
    color: #315197;
    letter-spacing: 0.18px;
    max-width: 850px;
    margin-bottom: 40px;
    @media (max-width: 768px){
    font-size: 14px;
    letter-spacing: 0.14px;
    }
    @media (max-width: 576px) {
    font-size: 14px;
    font-weight: 300;
    line-height: 21px;
    color: #315197;
    letter-spacing: 0.14px;
    margin-bottom: 31px;
    }
    font-family: SF-UI-Text-Heavy, Arial;
    font-size: 18px;
    font-weight: 300;
    line-height: 27px;
    color: #315197;
    letter-spacing: 0.18px;
    max-width: 850px;
    margin-bottom: 40px;
    @media (max-width: 768px){
    font-size: 14px;
    letter-spacing: 0.14px;
    }
    @media (max-width: 576px) {
    font-size: 14px;
    font-weight: 300;
    line-height: 21px;
    color: #315197;
    letter-spacing: 0.14px;
    margin-bottom: 31px;
    }
    }
    .h2-desktop-tittle {
    font-family: SF-UI-Display-Black, Arial;
    font-weight: 800;
    @media (max-width: 576px){
    max-width: 170px;
    }
    @media (max-width: 768px){
    font-size: 32px;
    }
    font-family: SF-UI-Display-Black, Arial;
    font-weight: 800;
    @media (max-width: 576px){
    max-width: 170px;
    }
    @media (max-width: 768px){
    font-size: 32px;
    }
    }
    */
    .h3-desktop {
    ......@@ -2212,7 +2212,6 @@ p.price-p {
    @media(min-width: 451px){
    width: 288px;
    }
    }
    .price-mobile {
    text-align: center;
    ......@@ -2390,7 +2389,7 @@ p.price-user-part {
    margin-top: 30px;
    }
    }
    . mobile-point-active{
    . mobile-point-active {
    width: 12px;
    height: 12px;
    margin-left: 23px;
    ......@@ -2705,24 +2704,3 @@ footer {
    position: absolute;
    display: none;
    }
    /*
    .yyy {
    width: 12px;
    height: 12px;
    margin-top: 0;
    margin-left: 23px;
    border-radius: 50%;
    background: #c94d4e;
    border: #fbb5b6 5px solid;
    }
    $('#btn-fourth-fourth').click(function(event) {
    $('#btn-one-first').toggleClass('yyy');
    });
    $('#btn-fourth-fourth').click(function(event) {
    $('#btn-one-fourth').toggleClass('mobile-point');
    });
    */
    \ No newline at end of file
    index.html
    ......@@ -1118,7 +1118,7 @@
    <div class="price-mobile-big-none">
    <!--Окошко 1-->
    <div class="window-one price-mobile-window-none">
    <div id="window-big-one" class="window-one price-mobile-window-none">
    <div class="price-mobile-tittle">
    <h2>Цены 1big</h2>
    <div class="price-mobile-tittle-line">
    ......@@ -1333,7 +1333,7 @@
    </div>
    </div>
    <div class="mobile-point-wrapper">
    <div class="mobile-point-active">
    <div id="btn-big-one" class="mobile-point-active">
    </div>
    <div class="mobile-point">
    </div>
    ......@@ -1345,7 +1345,7 @@
    </div>
    <div class="window-too price-mobile-window-none">
    <div id="window-big-too" class="window-too price-mobile-window-none">
    <div class="price-mobile-tittle">
    <h2>Цены 2big</h2>
    <div class="price-mobile-tittle-line">
    ......@@ -1354,7 +1354,7 @@
    <div class="price-mobile-wrapper">
    <div class="price-mobile-container">
    <img src="img/price1.png" class="mobile-img">
    <h6>Free (Beta)</h6>
    <h6>Standard</h6>
    <div class="price-mobile">
    <p>0<span>&#8381</span></p>
    </div>
    ......@@ -1560,10 +1560,10 @@
    </div>
    </div>
    <div class="mobile-point-wrapper">
    <div class="mobile-point-active">
    </div>
    <div class="mobile-point">
    </div>
    <div id="btn-big-too" class="mobile-point-active">
    </div>
    <div class="mobile-point">
    </div>
    <div class="mobile-point">
    ......@@ -1571,7 +1571,7 @@
    </div>
    </div>
    <div class="window-three price-mobile-window-none">
    <div id="window-big-three" class="window-three price-mobile-window-none">
    <div class="price-mobile-tittle">
    <h2>Цены 3big</h2>
    <div class="price-mobile-tittle-line">
    ......@@ -1580,7 +1580,7 @@
    <div class="price-mobile-wrapper">
    <div class="price-mobile-container">
    <img src="img/price1.png" class="mobile-img">
    <h6>Free (Beta)</h6>
    <h6>Expert</h6>
    <div class="price-mobile">
    <p>0<span>&#8381</span></p>
    </div>
    ......@@ -1786,18 +1786,18 @@
    </div>
    </div>
    <div class="mobile-point-wrapper">
    <div class="mobile-point-active">
    </div>
    <div class="mobile-point">
    </div>
    <div class="mobile-point">
    </div>
    <div id="btn-big-third" class="mobile-point-active">
    </div>
    <div class="mobile-point">
    </div>
    </div>
    </div>
    <div class="window-four">
    <div id="window-big-four" class="window-four">
    <div class="price-mobile-tittle">
    <h2>Цены 4big</h2>
    <div class="price-mobile-tittle-line">
    ......@@ -1806,7 +1806,7 @@
    <div class="price-mobile-wrapper">
    <div class="price-mobile-container">
    <img src="img/price1.png" class="mobile-img">
    <h6>Free (Beta)</h6>
    <h6>On-demand</h6>
    <div class="price-mobile">
    <p>0<span>&#8381</span></p>
    </div>
    ......@@ -2012,14 +2012,14 @@
    </div>
    </div>
    <div class="mobile-point-wrapper">
    <div class="mobile-point-active">
    </div>
    <div class="mobile-point">
    </div>
    <div class="mobile-point">
    </div>
    <div class="mobile-point">
    </div>
    <div id="btn-big-four" class="mobile-point-active">
    </div>
    </div>
    </div>
    ......@@ -2131,11 +2131,11 @@
    <div class="mobile-point-wrapper">
    <div id="btn-one-first" class="mobile-point-active">
    </div>
    <div id="btn-one-too" class="mobile-point">
    <div class="mobile-point">
    </div>
    <div id="btn-one-third" class="mobile-point">
    <div class="mobile-point">
    </div>
    <div id="btn-one-fourth" class="mobile-point">
    <div class="mobile-point">
    </div>
    </div>
    </div>
    ......@@ -2149,7 +2149,7 @@
    <div class="price-mobile-wrapper">
    <div class="price-mobile-container">
    <img src="img/mobile-img.png" class="mobile-img">
    <h6>Free (Beta)</h6>
    <h6>Standard</h6>
    <div class="price-mobile">
    <p>0<span>&#8381</span></p>
    </div>
    ......@@ -2242,13 +2242,13 @@
    </div>
    </div>
    <div class="mobile-point-wrapper">
    <div id="btn-too-first" class="mobile-point">
    <div class="mobile-point">
    </div>
    <div id="btn-too-too" class="mobile-point-active">
    </div>
    <div id="btn-too-third" class="mobile-point">
    <div class="mobile-point">
    </div>
    <div id="btn-too-fourth" class="mobile-point">
    <div class="mobile-point">
    </div>
    </div>
    </div>
    ......@@ -2262,7 +2262,7 @@
    <div class="price-mobile-wrapper">
    <div class="price-mobile-container">
    <img src="img/mobile-img.png" class="mobile-img">
    <h6>Free (Beta)</h6>
    <h6>Expert</h6>
    <div class="price-mobile">
    <p>0<span>&#8381</span></p>
    </div>
    ......@@ -2355,13 +2355,13 @@
    </div>
    </div>
    <div class="mobile-point-wrapper">
    <div id="btn-third-first" class="mobile-point">
    <div class="mobile-point">
    </div>
    <div id="btn-third-too" class="mobile-point">
    <div class="mobile-point">
    </div>
    <div id="btn-third-third" class="mobile-point-active">
    </div>
    <div id="btn-third-fourth" class="mobile-point">
    <div class="mobile-point">
    </div>
    </div>
    </div>
    ......@@ -2375,7 +2375,7 @@
    <div class="price-mobile-wrapper">
    <div class="price-mobile-container">
    <img src="img/mobile-img.png" width="212" class="mobile-img">
    <h6>Free (Beta)</h6>
    <h6>On-demand</h6>
    <div class="price-mobile">
    <p>0<span>&#8381</span></p>
    </div>
    ......@@ -2468,11 +2468,11 @@
    </div>
    </div>
    <div class="mobile-point-wrapper">
    <div id="btn-first" class="mobile-point">
    <div class="mobile-point">
    </div>
    <div id="btn-too" class="mobile-point">
    <div class="mobile-point">
    </div>
    <div id="btn-third" class="mobile-point">
    <div class="mobile-point">
    </div>
    <div id="btn-fourth-fourth" class="mobile-point-active">
    </div>
    ......@@ -2557,39 +2557,70 @@
    });
    $('#btn-fourth-fourth').click(function(event) {
    $('#btn-fourth-fourth').click(function(event) {
    $('#window-little-one').toggleClass('price-mobile-window-none');
    });
    $('#btn-fourth-fourth').click(function(event) {
    $('#btn-fourth-fourth').click(function(event) {
    $('#window-little-four').toggleClass('price-mobile-window-none');
    });
    $('#btn-one-first').click(function(event) {
    $('#btn-one-first').click(function(event) {
    $('#window-little-too').toggleClass('price-mobile-window-none');
    });
    $('#btn-one-first').click(function(event) {
    $('#btn-one-first').click(function(event) {
    $('#window-little-one').toggleClass('price-mobile-window-none');
    });
    $('#btn-too-too').click(function(event) {
    $('#btn-too-too').click(function(event) {
    $('#window-little-third').toggleClass('price-mobile-window-none');
    });
    $('#btn-too-too').click(function(event) {
    $('#btn-too-too').click(function(event) {
    $('#window-little-too').toggleClass('price-mobile-window-none');
    });
    $('#btn-third-third').click(function(event) {
    $('#btn-third-third').click(function(event) {
    $('#window-little-four').toggleClass('price-mobile-window-none');
    });
    $('#btn-third-third').click(function(event) {
    $('#btn-third-third').click(function(event) {
    $('#window-little-third').toggleClass('price-mobile-window-none');
    });
    $('#btn-big-four').click(function(event) {
    $('#window-big-one').toggleClass('price-mobile-window-none');
    });
    $('#btn-big-four').click(function(event) {
    $('#window-big-four').toggleClass('price-mobile-window-none');
    });
    $('#btn-big-one').click(function(event) {
    $('#window-big-one').toggleClass('price-mobile-window-none');
    });
    $('#btn-big-one').click(function(event) {
    $('#window-big-too').toggleClass('price-mobile-window-none');
    });
    $('#btn-big-too').click(function(event) {
    $('#window-big-three').toggleClass('price-mobile-window-none');
    });
    $('#btn-big-too').click(function(event) {
    $('#window-big-too').toggleClass('price-mobile-window-none');
    });
    $('#btn-big-third').click(function(event) {
    $('#window-big-three').toggleClass('price-mobile-window-none');
    });
    $('#btn-big-third').click(function(event) {
    $('#window-big-four').toggleClass('price-mobile-window-none');
    });
    ......
    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