API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Feb 22nd, 2019
102
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 49.57 KB | None | 0 0
raw download clone embed print report
  1. <div class="tariff-block">
  2.    <script>
  3.       $(function() {
  4.      
  5.         var $filterPanel = $('.filter-panel');
  6.         var $resultPanel = $('.result-panel');
  7.         var $moreBtn = $('.result-more-btn a');
  8.         var $tps = $resultPanel.find('.tp');
  9.         var defaultFilter = ['apart', 'internet'];
  10.         var pageTariffs = $('body').attr('data-tariff');
  11.      
  12.         if (pageTariffs && pageTariffs.trim().length > 0) {
  13.          if (pageTariffs === "house") {
  14.            $filterPanel.hide();
  15.           } else {
  16.             $filterPanel.find('.toggle-controls').hide();
  17.           }
  18.           defaultFilter = pageTariffs.split(' ');
  19.         }
  20.      
  21.         $tps.hide();
  22.         $tps = activeArray($tps, defaultFilter);
  23.         makeActive($tps);
  24.      
  25.         $filterPanel.find('input').change(function() {
  26.           var filter = [];
  27.           $tps = $resultPanel.find('.tp');
  28.           $tps.hide().removeClass('tp-active');
  29.           $.each($filterPanel.find('input:checked'), function(index, elem) {
  30.             filter.push($(elem).val());
  31.           });
  32.           $tps = activeArray($tps, filter);
  33.           makeActive($tps);
  34.         });
  35.      
  36.         $('.tp-opt-btn').click(function() {
  37.           var $this = $(this);
  38.           $this.closest('.tp').find('.tp-opt-hidden').fadeIn().css('display', 'flex');
  39.           $this.hide();
  40.           return false;
  41.         });
  42.      
  43.         $('.tp-connect-btn').click(function() {
  44.           $("#open_action_home").trigger("click");
  45.           return false;
  46.         });
  47.      
  48.         $moreBtn.click(function() {
  49.           var $notActive = $tps.not('.tp-active');
  50.           makeActive($notActive);
  51.           if ($notActive.length < 7) {
  52.            $moreBtn.hide();
  53.          }
  54.          return false;
  55.        });
  56.      
  57.      
  58.        function filterMatch(tags, filter) {
  59.          if (filter.length === 0) {
  60.            return false;
  61.          }
  62.          return filter.every(function (value) {
  63.            return (tags.indexOf(value) >= 0);
  64.           });
  65.         }
  66.      
  67.      
  68.         function makeActive(tps) {
  69.           $.each(tps, function(index, result) {
  70.             if (index < 6) {
  71.              $(result).addClass('tp-active').fadeIn();
  72.            }
  73.          });
  74.          tps.not('.tp-active').length > 0 ? $moreBtn.show() : $moreBtn.hide();
  75.         }
  76.      
  77.      
  78.         function activeArray(tps, filter) {
  79.           var activeTps = [];
  80.           $.each(tps, function(index, result) {
  81.             var tags = $(result).attr('data-filter').split(' ');
  82.             if(filterMatch(tags, filter)) {
  83.               activeTps.push(result)
  84.             }
  85.           });
  86.           return $(activeTps);
  87.         }
  88.      
  89.       });
  90.    </script>
  91.    <style>
  92.       .tp {
  93.       margin-bottom: 30px;
  94.       }
  95.       .tp .card {
  96.       height: 100%;
  97.       }
  98.       .tp .card:hover {
  99.       box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
  100.       }
  101.       .tp .card-body {
  102.       padding: 20px;
  103.       padding-bottom: 110px;
  104.       height: 100%;
  105.       position: relative;
  106.       }
  107.       @media(min-width: 768px) {
  108.       .tp .card-body {
  109.       padding: 30px;
  110.       padding-bottom: 110px;
  111.       }
  112.       }
  113.       .tp-name {
  114.       font-size: 24px;
  115.       color: #7825FB;
  116.       line-height: 28px;
  117.       margin-bottom: 7px;
  118.       }
  119.       .tp-desc {
  120.       font-size: 14px;
  121.       color: #4A4A4A;
  122.       line-height: 17px;
  123.       height: 52px;
  124.       overflow: hidden;
  125.       }
  126.       .tp-price {
  127.       font-size: 34px;
  128.       color: #FC5026;
  129.       white-space: nowrap;
  130.       line-height: 41px;
  131.       margin-bottom: 11px;
  132.       }
  133.       .tp-inc-list {
  134.       border-top: 1px solid #E5E5E5;
  135.       border-bottom: 1px solid #E5E5E5;
  136.       padding: 20px 0;
  137.       margin-bottom: 20px;
  138.       }
  139.       .tp-inc-list > .row {
  140.       margin-left: 0;
  141.       margin-right: 0;
  142.       }
  143.       .tp-inc {
  144.       display: flex;
  145.       flex-direction: column;
  146.       align-items: center;
  147.       padding-left: 0;
  148.       padding-right: 0;
  149.       }
  150.       .tp-inc-icon {
  151.       width: 48px;
  152.       height: 48px;
  153.       display: flex;
  154.       align-items: center;
  155.       justify-content: center;
  156.       background-color: #E5E5E5;
  157.       border-radius: 50%;
  158.       margin-bottom: 12px;
  159.       }
  160.       .tp-inc-icon i {
  161.       font-size: 20px;
  162.       display: block;
  163.       }
  164.       .tp-inc-name {
  165.       font-size: 24px;
  166.       line-height: 18px;
  167.       color: #000000;
  168.       margin-bottom: 3px;
  169.       }
  170.       .tp-inc-desc {
  171.       font-size: 14px;
  172.       line-height: 18px;
  173.       color: #4A4A4A;
  174.       }
  175.       .tp-opt-list {}
  176.       .tp-opt {
  177.       font-size: 16px;
  178.       line-height: 18px;
  179.       color: #000000;
  180.       margin-bottom: 3px;
  181.       display: flex;
  182.       }
  183.       .tp-opt i {
  184.       color: #E5E5E5;
  185.       font-size: 6px;
  186.       margin-top: 5px;
  187.       margin-right: 10px;
  188.       }
  189.       .tp-opt-hidden {
  190.       display: none;
  191.       }
  192.       .tp-opt-btn {
  193.       font-size: 16px;
  194.       line-height: 18px;
  195.       color: #7825FB;
  196.       margin-left: 16px;
  197.       }
  198.       .tp-connect-btn {
  199.       position: absolute;
  200.       width: calc(100% - 60px);
  201.       left: 30px;
  202.       bottom: 30px;
  203.       background: #FC5026;
  204.       color: #fff;
  205.       text-decoration: none;
  206.       padding: 13px 20px;
  207.       }
  208.       .tp-connect-btn:hover {
  209.       color: #fff;
  210.       }
  211.       .toggle-controls {
  212.       margin-bottom: 30px;
  213.       display: flex;
  214.       }
  215.       .toggle-control-wrap {
  216.       margin-left: 20px;
  217.       }
  218.       .toggle-control-wrap:first-child {
  219.       margin-left: 0;
  220.       }
  221.       @media(min-width: 768px) {
  222.       .toggle-control-wrap {
  223.       margin-left: 30px;
  224.       }
  225.       }
  226.       .toggle-control input[type='checkbox'] {
  227.       display: none;
  228.       }
  229.       .toggle-control input[type='checkbox']:checked ~ .toggle {
  230.       left: 20px;
  231.       transition: 0.5s;
  232.       }
  233.       .toggle-control input[type='checkbox']:checked ~ .switch {
  234.       background: #7825FB;
  235.       transition: 0.5s;
  236.       }
  237.       .toggle-control .switch {
  238.       display: block;
  239.       width: 42px;
  240.       height: 14px;
  241.       background: #9B9B9B;
  242.       border-radius: 20px;
  243.       position: absolute;
  244.       top: 0;
  245.       transition: 0.5s;
  246.       }
  247.       .toggle-control .toggle {
  248.       height: 24px;
  249.       width: 24px;
  250.       border-radius: 50%;
  251.       background: white;
  252.       position: absolute;
  253.       top: -6px;
  254.       left: -2px;
  255.       box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
  256.       transition: 0.5s;
  257.       cursor: pointer;
  258.       }
  259.       .toggle-control {
  260.       display: inline-block;
  261.       margin: 10px 5px;
  262.       width: 42px;
  263.       height: 14px;
  264.       text-align: center;
  265.       position: relative;
  266.       vertical-align: middle;
  267.       }
  268.       .toggle-control label {
  269.       display: inline;
  270.       margin-bottom: 0;
  271.       }
  272.       .filter-panel {
  273.       display: flex;
  274.       align-items: center;
  275.       justify-content: space-between;
  276.       flex-wrap: wrap;
  277.       }
  278.       .tab-controls {
  279.       display: flex;
  280.       box-shadow: 0 4px 10px rgba(0,0,0,.1);
  281.       width: 300px;
  282.       margin-bottom: 30px;
  283.       }
  284.       .tab-control {
  285.       flex: 1 1
  286.       }
  287.       .tab-control:first-child {
  288.       border-top-left-radius: 4px;
  289.       border-bottom-left-radius: 4px;
  290.       }
  291.       .tab-control:last-child {
  292.       border-top-right-radius: 4px;
  293.       border-bottom-right-radius: 4px;
  294.       }
  295.       .tab-control input[type=radio] {
  296.       display: none;
  297.       margin: 10px;
  298.       }
  299.       .tab-control input[type=radio] + label {
  300.       background-color: white;
  301.       margin: 0;
  302.       display: block;
  303.       text-align: center;
  304.       height: 52px;
  305.       padding: 16px 0;
  306.       cursor: pointer;
  307.       }
  308.       .tab-control input[type=radio]:checked + label {
  309.       background-color: #7825FB;
  310.       color: white;
  311.       cursor: default;
  312.       }
  313.       .filter-panel-desc {
  314.       font-size: 20px;
  315.       margin-bottom: 30px;
  316.       }
  317.       .tp-opt-btn {
  318.       font-size: 16px;
  319.       line-height: 18px;
  320.       color: #7825FB;
  321.       margin-left: 16px;
  322.       }
  323.       .result-more-btn {
  324.       text-align: center;
  325.       margin-bottom: 40px;
  326.       }
  327.       .result-more-btn a {
  328.       font-size: 16px;
  329.       line-height: 18px;
  330.       color: #7825FB;
  331.       }
  332.    </style>
  333.    <h2>Что вы хотите подключить?</h2>
  334.    <p class="filter-panel-desc">Выберите то, что вам необходимо</p>
  335.    <div class="filter-panel">
  336.       <div class="tab-controls">
  337.          <div class="tab-control">
  338.             <input checked="checked" id="apart" name="radios" type="radio" value="apart">
  339.             <label for="apart">Для квартиры</label>
  340.          </div>
  341.          <div class="tab-control">
  342.             <input id="house" name="radios" type="radio" value="house">
  343.             <label for="house">Для дома</label>
  344.          </div>
  345.       </div>
  346.       <div class="toggle-controls">
  347.          <div class="toggle-control-wrap">
  348.             <div class="toggle-control">
  349.                <label for="internet">
  350.                <input checked="" id="internet" type="checkbox" value="internet">
  351.                <span class="switch"></span>
  352.                <span class="toggle"></span>
  353.                </label>
  354.             </div>
  355.             Интернет
  356.          </div>
  357.          <div class="toggle-control-wrap">
  358.             <div class="toggle-control">
  359.                <label for="tv">
  360.                <input id="tv" type="checkbox" value="tv">
  361.                <span class="switch"></span>
  362.                <span class="toggle"></span>
  363.                </label>
  364.             </div>
  365.             Телевидение
  366.          </div>
  367.          <div class="toggle-control-wrap">
  368.             <div class="toggle-control">
  369.                <label for="phone">
  370.                <input id="phone" type="checkbox" value="phone">
  371.                <span class="switch"></span>
  372.                <span class="toggle"></span>
  373.                </label>
  374.             </div>
  375.             Телефония
  376.          </div>
  377.       </div>
  378.    </div>
  379.    <div class="result-panel row">
  380.       <div class="col-lg-4 tp tp-active" data-filter="apart internet" style="display: block;">
  381.          <div class="card">
  382.             <div class="card-body">
  383.                <div class="tp-name">Для интернета</div>
  384.                <div class="tp-desc">FTTx</div>
  385.                <div class="tp-price">400 ₽/мес</div>
  386.                <div class="tp-inc-list">
  387.                   <div class="row">
  388.                      <div class="col-4 tp-inc">
  389.                         <div class="tp-inc-icon">
  390.                            <i class="fas fa-globe"></i>
  391.                         </div>
  392.                         <div class="tp-inc-name">до 50</div>
  393.                         <div class="tp-inc-desc">Мбит</div>
  394.                      </div>
  395.                   </div>
  396.                </div>
  397.                <div class="tp-opt-list">
  398.                   <div class="tp-opt">
  399.                      <i class="fas fa-circle"></i>
  400.                      <span>ТВ-онлайн: Wink 101 телеканал</span>
  401.                   </div>
  402.                   <div class="tp-opt">
  403.                      <i class="fas fa-circle"></i>
  404.                      <span>Месяц подключения  - 1 руб. (только для новых клиентов)</span>
  405.                   </div>
  406.                   <div class="tp-opt tp-opt-hidden">
  407.                      <i class="fas fa-circle"></i>
  408.                      <span>Роутер: Единовременно или в рассрочку на 12, 24, 36 мес. сверх тарифа или в аренду за 69 руб./мес.</span>
  409.                   </div>
  410.                </div>
  411.                <a class="tp-opt-btn" href="#">Ещё 1 опция</a>
  412.                <a class="tp-connect-btn btn btn-main" href="#">Подключить</a>
  413.             </div>
  414.          </div>
  415.       </div>
  416.       <div class="col-lg-4 tp tp-active" data-filter="apart internet" style="display: block;">
  417.          <div class="card">
  418.             <div class="card-body">
  419.                <div class="tp-name">Для интернета везде Лайт</div>
  420.                <div class="tp-desc">FTTx</div>
  421.                <div class="tp-price">510 ₽/мес</div>
  422.                <div class="tp-inc-list">
  423.                   <div class="row">
  424.                      <div class="col-4 tp-inc">
  425.                         <div class="tp-inc-icon">
  426.                            <i class="fas fa-globe"></i>
  427.                         </div>
  428.                         <div class="tp-inc-name">до 100</div>
  429.                         <div class="tp-inc-desc">Мбит</div>
  430.                      </div>
  431.                   </div>
  432.                </div>
  433.                <div class="tp-opt-list">
  434.                   <div class="tp-opt">
  435.                      <i class="fas fa-circle"></i>
  436.                      <span>ТВ-онлайн: Wink 101 телеканал</span>
  437.                   </div>
  438.                   <div class="tp-opt">
  439.                      <i class="fas fa-circle"></i>
  440.                      <span>Месяц подключения  - 1 руб. (только для новых клиентов)</span>
  441.                   </div>
  442.                   <div class="tp-opt tp-opt-hidden">
  443.                      <i class="fas fa-circle"></i>
  444.                      <span>Роутер: Единовременно или в рассрочку на 12, 24, 36 мес. сверх тарифа или в аренду за 69 руб./мес.</span>
  445.                   </div>
  446.                   <div class="tp-opt tp-opt-hidden">
  447.                      <i class="fas fa-circle"></i>
  448.                      <span>{:hidden_options=&gt;"Ещё 1 опция"}</span>
  449.                   </div>
  450.                </div>
  451.                <a class="tp-connect-btn btn btn-main" href="#">Подключить</a>
  452.             </div>
  453.          </div>
  454.       </div>
  455.       <div class="col-lg-4 tp tp-active" data-filter="apart internet tv" style="display: block;">
  456.          <div class="card">
  457.             <div class="card-body">
  458.                <div class="tp-name">Для впечатлений везде</div>
  459.                <div class="tp-desc">Пакет FTTx</div>
  460.                <div class="tp-price">от 560 ₽/мес</div>
  461.                <div class="tp-inc-list">
  462.                   <div class="row">
  463.                      <div class="col-4 tp-inc">
  464.                         <div class="tp-inc-icon">
  465.                            <i class="fas fa-globe"></i>
  466.                         </div>
  467.                         <div class="tp-inc-name">до 50</div>
  468.                         <div class="tp-inc-desc">Мбит</div>
  469.                      </div>
  470.                      <div class="col-4 tp-inc">
  471.                         <div class="tp-inc-icon">
  472.                            <i class="fas fa-tv"></i>
  473.                         </div>
  474.                         <div class="tp-inc-name">172</div>
  475.                         <div class="tp-inc-desc">телеканала</div>
  476.                      </div>
  477.                   </div>
  478.                </div>
  479.                <div class="tp-opt-list">
  480.                   <div class="tp-opt">
  481.                      <i class="fas fa-circle"></i>
  482.                      <span>Месяц подключения  - 1 руб. (только для новых клиентов)</span>
  483.                   </div>
  484.                   <div class="tp-opt">
  485.                      <i class="fas fa-circle"></i>
  486.                      <span>ТВ-онлайн в подарок</span>
  487.                   </div>
  488.                   <div class="tp-opt tp-opt-hidden">
  489.                      <i class="fas fa-circle"></i>
  490.                      <span>КТВ в подарок (при наличии тех. возможности)</span>
  491.                   </div>
  492.                   <div class="tp-opt tp-opt-hidden">
  493.                      <i class="fas fa-circle"></i>
  494.                      <span>Роутер единовременно или в рассрочку на 12, 24, 36 мес. сверх тарифа  или в аренду за 69 руб./мес.</span>
  495.                   </div>
  496.                   <div class="tp-opt tp-opt-hidden">
  497.                      <i class="fas fa-circle"></i>
  498.                      <span>ТВ-приставка  (не более 1 ед.): 10 руб. (продажа по «Суперцене») 2 и 3 приставка в аренду  - 50 руб. в мес.</span>
  499.                   </div>
  500.                </div>
  501.                <a class="tp-opt-btn" href="#">Ещё 3 опции</a>
  502.                <a class="tp-connect-btn btn btn-main" href="#">Подключить</a>
  503.             </div>
  504.          </div>
  505.       </div>
  506.       <div class="col-lg-4 tp tp-active" data-filter="apart internet tv" style="display: block;">
  507.          <div class="card">
  508.             <div class="card-body">
  509.                <div class="tp-name">Для семьи Лайт</div>
  510.                <div class="tp-desc">Пакет FTTx</div>
  511.                <div class="tp-price">660 ₽/мес</div>
  512.                <div class="tp-inc-list">
  513.                   <div class="row">
  514.                      <div class="col-4 tp-inc">
  515.                         <div class="tp-inc-icon">
  516.                            <i class="fas fa-globe"></i>
  517.                         </div>
  518.                         <div class="tp-inc-name">до 100</div>
  519.                         <div class="tp-inc-desc">Мбит</div>
  520.                      </div>
  521.                      <div class="col-4 tp-inc">
  522.                         <div class="tp-inc-icon">
  523.                            <i class="fas fa-tv"></i>
  524.                         </div>
  525.                         <div class="tp-inc-name">203</div>
  526.                         <div class="tp-inc-desc">телеканала</div>
  527.                      </div>
  528.                   </div>
  529.                </div>
  530.                <div class="tp-opt-list">
  531.                   <div class="tp-opt">
  532.                      <i class="fas fa-circle"></i>
  533.                      <span>Месяц подключения  - 1 руб. (только для новых клиентов)</span>
  534.                   </div>
  535.                   <div class="tp-opt">
  536.                      <i class="fas fa-circle"></i>
  537.                      <span>ТВ-онлайн в подарок</span>
  538.                   </div>
  539.                   <div class="tp-opt tp-opt-hidden">
  540.                      <i class="fas fa-circle"></i>
  541.                      <span>КТВ в подарок (при наличии тех. возможности)</span>
  542.                   </div>
  543.                   <div class="tp-opt tp-opt-hidden">
  544.                      <i class="fas fa-circle"></i>
  545.                      <span>Роутер единовременно или в рассрочку на 12, 24, 36 мес. сверх тарифа или в аренду за 69 руб./мес.</span>
  546.                   </div>
  547.                   <div class="tp-opt tp-opt-hidden">
  548.                      <i class="fas fa-circle"></i>
  549.                      <span>ТВ-приставка  (не более 1 ед.): 10 руб. (продажа по «Суперцене») 2 и 3 приставка в аренду  - 50 руб. в мес.</span>
  550.                   </div>
  551.                </div>
  552.                <a class="tp-opt-btn" href="#">Ещё 3 опции</a>
  553.                <a class="tp-connect-btn btn btn-main" href="#">Подключить</a>
  554.             </div>
  555.          </div>
  556.       </div>
  557.       <div class="col-lg-4 tp tp-active" data-filter="apart internet" style="display: block;">
  558.          <div class="card">
  559.             <div class="card-body">
  560.                <div class="tp-name">Для интернета</div>
  561.                <div class="tp-desc">ADSL</div>
  562.                <div class="tp-price">450 ₽/мес</div>
  563.                <div class="tp-inc-list">
  564.                   <div class="row">
  565.                      <div class="col-4 tp-inc">
  566.                         <div class="tp-inc-icon">
  567.                            <i class="fas fa-globe"></i>
  568.                         </div>
  569.                         <div class="tp-inc-name">до 3</div>
  570.                         <div class="tp-inc-desc">Мбит</div>
  571.                      </div>
  572.                   </div>
  573.                </div>
  574.                <div class="tp-opt-list">
  575.                   <div class="tp-opt">
  576.                      <i class="fas fa-circle"></i>
  577.                      <span>ТВ-онлайн в подарок: Wink (101 телеканал)</span>
  578.                   </div>
  579.                   <div class="tp-opt">
  580.                      <i class="fas fa-circle"></i>
  581.                      <span>Месяц подключения  - 1 руб. (только для новых клиентов)</span>
  582.                   </div>
  583.                   <div class="tp-opt tp-opt-hidden">
  584.                      <i class="fas fa-circle"></i>
  585.                      <span>КТВ в подарок (при наличии тех. возможности)</span>
  586.                   </div>
  587.                   <div class="tp-opt tp-opt-hidden">
  588.                      <i class="fas fa-circle"></i>
  589.                      <span>Роутер: единовременно или в рассрочку на 12, 24, 36 мес. сверх тарифаили в аренду за 69 руб./мес.</span>
  590.                   </div>
  591.                </div>
  592.                <a class="tp-opt-btn" href="#">Ещё 2 опции</a>
  593.                <a class="tp-connect-btn btn btn-main" href="#">Подключить</a>
  594.             </div>
  595.          </div>
  596.       </div>
  597.       <div class="col-lg-4 tp tp-active" data-filter="apart internet" style="display: block;">
  598.          <div class="card">
  599.             <div class="card-body">
  600.                <div class="tp-name">Для интернета везде Лайт</div>
  601.                <div class="tp-desc">ADSL</div>
  602.                <div class="tp-price">510 ₽/мес</div>
  603.                <div class="tp-inc-list">
  604.                   <div class="row">
  605.                      <div class="col-4 tp-inc">
  606.                         <div class="tp-inc-icon">
  607.                            <i class="fas fa-globe"></i>
  608.                         </div>
  609.                         <div class="tp-inc-name">до 6</div>
  610.                         <div class="tp-inc-desc">Мбит</div>
  611.                      </div>
  612.                   </div>
  613.                </div>
  614.                <div class="tp-opt-list">
  615.                   <div class="tp-opt">
  616.                      <i class="fas fa-circle"></i>
  617.                      <span>ТВ-онлайн в подарок: Wink (101 телеканал)</span>
  618.                   </div>
  619.                   <div class="tp-opt">
  620.                      <i class="fas fa-circle"></i>
  621.                      <span>Месяц подключения  - 1 руб. (только для новых клиентов)</span>
  622.                   </div>
  623.                   <div class="tp-opt tp-opt-hidden">
  624.                      <i class="fas fa-circle"></i>
  625.                      <span>КТВ в подарок (при наличии тех. возможности)</span>
  626.                   </div>
  627.                   <div class="tp-opt tp-opt-hidden">
  628.                      <i class="fas fa-circle"></i>
  629.                      <span>Роутер: единовременно или в рассрочку на 12, 24, 36 мес. сверх тарифа или в аренду за 69 руб./мес.</span>
  630.                   </div>
  631.                </div>
  632.                <a class="tp-opt-btn" href="#">Ещё 2 опции</a>
  633.                <a class="tp-connect-btn btn btn-main" href="#">Подключить</a>
  634.             </div>
  635.          </div>
  636.       </div>
  637.       <div class="col-lg-4 tp tp-active" data-filter="apart internet tv" style="display: block;">
  638.          <div class="card">
  639.             <div class="card-body">
  640.                <div class="tp-name">Для впечатлений везде</div>
  641.                <div class="tp-desc">ADSL Пакет</div>
  642.                <div class="tp-price">660 ₽/мес</div>
  643.                <div class="tp-inc-list">
  644.                   <div class="row">
  645.                      <div class="col-4 tp-inc">
  646.                         <div class="tp-inc-icon">
  647.                            <i class="fas fa-globe"></i>
  648.                         </div>
  649.                         <div class="tp-inc-name">до 6</div>
  650.                         <div class="tp-inc-desc">Мбит</div>
  651.                      </div>
  652.                      <div class="col-4 tp-inc">
  653.                         <div class="tp-inc-icon">
  654.                            <i class="fas fa-tv"></i>
  655.                         </div>
  656.                         <div class="tp-inc-name">172</div>
  657.                         <div class="tp-inc-desc">телеканала</div>
  658.                      </div>
  659.                   </div>
  660.                </div>
  661.                <div class="tp-opt-list">
  662.                   <div class="tp-opt">
  663.                      <i class="fas fa-circle"></i>
  664.                      <span>ТВ-онлайн в подарок: Wink (203 телеканала)</span>
  665.                   </div>
  666.                   <div class="tp-opt">
  667.                      <i class="fas fa-circle"></i>
  668.                      <span>Месяц подключения  - 1 руб. (только для новых клиентов)</span>
  669.                   </div>
  670.                   <div class="tp-opt tp-opt-hidden">
  671.                      <i class="fas fa-circle"></i>
  672.                      <span>КТВ в подарок (при наличии тех. возможности)</span>
  673.                   </div>
  674.                   <div class="tp-opt tp-opt-hidden">
  675.                      <i class="fas fa-circle"></i>
  676.                      <span>Роутер: единовременно или в рассрочку на 12, 24, 36 мес. сверх тарифа или в аренду за 69 руб./мес.</span>
  677.                   </div>
  678.                   <div class="tp-opt tp-opt-hidden">
  679.                      <i class="fas fa-circle"></i>
  680.                      <span>ТВ-приставка  (не более 1 ед.): 10 руб. (продажа по «Суперцене»)</span>
  681.                   </div>
  682.                </div>
  683.                <a class="tp-opt-btn" href="#">Ещё 3 опции</a>
  684.                <a class="tp-connect-btn btn btn-main" href="#">Подключить</a>
  685.             </div>
  686.          </div>
  687.       </div>
  688.       <div class="col-lg-4 tp tp-active" data-filter="apart internet tv" style="display: block;">
  689.          <div class="card">
  690.             <div class="card-body">
  691.                <div class="tp-name">Игровой</div>
  692.                <div class="tp-desc">Интернет</div>
  693.                <div class="tp-price">890 ₽/мес</div>
  694.                <div class="tp-inc-list">
  695.                   <div class="row">
  696.                      <div class="col-4 tp-inc">
  697.                         <div class="tp-inc-icon">
  698.                            <i class="fas fa-globe"></i>
  699.                         </div>
  700.                         <div class="tp-inc-name">до 300</div>
  701.                         <div class="tp-inc-desc">Мбит</div>
  702.                      </div>
  703.                      <div class="col-4 tp-inc">
  704.                         <div class="tp-inc-icon">
  705.                            <i class="fas fa-tv"></i>
  706.                         </div>
  707.                         <div class="tp-inc-name">101</div>
  708.                         <div class="tp-inc-desc">телеканал</div>
  709.                      </div>
  710.                   </div>
  711.                </div>
  712.                <div class="tp-opt-list">
  713.                   <div class="tp-opt">
  714.                      <i class="fas fa-circle"></i>
  715.                      <span>ТВ-онлайн в подарок: Wink (101 телеканал)</span>
  716.                   </div>
  717.                   <div class="tp-opt">
  718.                      <i class="fas fa-circle"></i>
  719.                      <span>Месяц подключения  - 1 руб. (только для новых клиентов)</span>
  720.                   </div>
  721.                   <div class="tp-opt tp-opt-hidden">
  722.                      <i class="fas fa-circle"></i>
  723.                      <span>КТВ в подарок (при наличии тех. возможности)</span>
  724.                   </div>
  725.                   <div class="tp-opt tp-opt-hidden">
  726.                      <i class="fas fa-circle"></i>
  727.                      <span>Роутер(ONT) (не более 1 ед.): +10 руб./мес. (аренда) </span>
  728.                   </div>
  729.                   <div class="tp-opt tp-opt-hidden">
  730.                      <i class="fas fa-circle"></i>
  731.                      <span>ТВ-приставка  (не более 1 ед.): 10 руб. (продажа по «Суперцене»)</span>
  732.                   </div>
  733.                </div>
  734.                <a class="tp-opt-btn" href="#">Ещё 3 опции</a>
  735.                <a class="tp-connect-btn btn btn-main" href="#">Подключить</a>
  736.             </div>
  737.          </div>
  738.       </div>
  739.       <div class="col-lg-4 tp tp-active" data-filter="apart internet tv" style="display: block;">
  740.          <div class="card">
  741.             <div class="card-body">
  742.                <div class="tp-name">Игровой</div>
  743.                <div class="tp-desc">Пакет</div>
  744.                <div class="tp-price">1090 ₽/мес</div>
  745.                <div class="tp-inc-list">
  746.                   <div class="row">
  747.                      <div class="col-4 tp-inc">
  748.                         <div class="tp-inc-icon">
  749.                            <i class="fas fa-globe"></i>
  750.                         </div>
  751.                         <div class="tp-inc-name">до 300</div>
  752.                         <div class="tp-inc-desc">Мбит</div>
  753.                      </div>
  754.                      <div class="col-4 tp-inc">
  755.                         <div class="tp-inc-icon">
  756.                            <i class="fas fa-tv"></i>
  757.                         </div>
  758.                         <div class="tp-inc-name">203</div>
  759.                         <div class="tp-inc-desc">телеканала</div>
  760.                      </div>
  761.                   </div>
  762.                </div>
  763.                <div class="tp-opt-list">
  764.                   <div class="tp-opt">
  765.                      <i class="fas fa-circle"></i>
  766.                      <span>ТВ-онлайн в подарок</span>
  767.                   </div>
  768.                   <div class="tp-opt">
  769.                      <i class="fas fa-circle"></i>
  770.                      <span>Месяц подключения  - 1 руб. (только для новых клиентов)</span>
  771.                   </div>
  772.                   <div class="tp-opt tp-opt-hidden">
  773.                      <i class="fas fa-circle"></i>
  774.                      <span>КТВ в подарок (при наличии тех. возможности)</span>
  775.                   </div>
  776.                   <div class="tp-opt tp-opt-hidden">
  777.                      <i class="fas fa-circle"></i>
  778.                      <span>Роутер(ONT) (не более 1 ед.): +10 руб./мес. (аренда)</span>
  779.                   </div>
  780.                   <div class="tp-opt tp-opt-hidden">
  781.                      <i class="fas fa-circle"></i>
  782.                      <span>ТВ-приставка  (не более 1 ед.): 10 руб. (продажа по «Суперцене»)</span>
  783.                   </div>
  784.                   <div class="tp-opt tp-opt-hidden">
  785.                      <i class="fas fa-circle"></i>
  786.                      <span>ТВ-приставка  (не более 2 ед.): 1 и 2 приставка +10 руб./мес. за ед. (аренда) 3 приставка аренда - 50 руб. в мес.</span>
  787.                   </div>
  788.                </div>
  789.                <a class="tp-opt-btn" href="#">Ещё 3 опции</a>
  790.                <a class="tp-connect-btn btn btn-main" href="#">Подключить</a>
  791.             </div>
  792.          </div>
  793.       </div>
  794.       <div class="col-lg-4 tp" data-filter="house internet tv" style="display: none;">
  795.          <div class="card">
  796.             <div class="card-body">
  797.                <div class="tp-name">Моя Башкирия 2в1</div>
  798.                <div class="tp-desc">В частном секторе</div>
  799.                <div class="tp-price">600 ₽/мес</div>
  800.                <div class="tp-inc-list">
  801.                   <div class="row">
  802.                      <div class="col-4 tp-inc">
  803.                         <div class="tp-inc-icon">
  804.                            <i class="fas fa-globe"></i>
  805.                         </div>
  806.                         <div class="tp-inc-name">100</div>
  807.                         <div class="tp-inc-desc">Мбит</div>
  808.                      </div>
  809.                      <div class="col-4 tp-inc">
  810.                         <div class="tp-inc-icon">
  811.                            <i class="fas fa-tv"></i>
  812.                         </div>
  813.                         <div class="tp-inc-name">172</div>
  814.                         <div class="tp-inc-desc">телеканала</div>
  815.                      </div>
  816.                   </div>
  817.                </div>
  818.                <div class="tp-opt-list">
  819.                   <div class="tp-opt">
  820.                      <i class="fas fa-circle"></i>
  821.                      <span>Роутер xPON (ONT): Выгодный ONT (вкл в ТП)</span>
  822.                   </div>
  823.                   <div class="tp-opt">
  824.                      <i class="fas fa-circle"></i>
  825.                      <span>ТВ-приставка: Приставка в аренду за 10 руб.мес</span>
  826.                   </div>
  827.                   <div class="tp-opt tp-opt-hidden">
  828.                      <i class="fas fa-circle"></i>
  829.                      <span>Месяц подключения  - 1 руб. (только для новых клиентов)</span>
  830.                   </div>
  831.                   <div class="tp-opt tp-opt-hidden">
  832.                      <i class="fas fa-circle"></i>
  833.                      <span>КТВ в подарок (при наличии тех. возможности)</span>
  834.                   </div>
  835.                </div>
  836.                <a class="tp-opt-btn" href="#">Ещё 2 опции</a>
  837.                <a class="tp-connect-btn btn btn-main" href="#">Подключить</a>
  838.             </div>
  839.          </div>
  840.       </div>
  841.       <div class="col-lg-4 tp" data-filter="house internet tv" style="display: none;">
  842.          <div class="card">
  843.             <div class="card-body">
  844.                <div class="tp-name">Моя Башкирия 2в1</div>
  845.                <div class="tp-desc">В частном секторе</div>
  846.                <div class="tp-price">950 ₽/мес</div>
  847.                <div class="tp-inc-list">
  848.                   <div class="row">
  849.                      <div class="col-4 tp-inc">
  850.                         <div class="tp-inc-icon">
  851.                            <i class="fas fa-globe"></i>
  852.                         </div>
  853.                         <div class="tp-inc-name">200</div>
  854.                         <div class="tp-inc-desc">Мбит</div>
  855.                      </div>
  856.                      <div class="col-4 tp-inc">
  857.                         <div class="tp-inc-icon">
  858.                            <i class="fas fa-tv"></i>
  859.                         </div>
  860.                         <div class="tp-inc-name">172</div>
  861.                         <div class="tp-inc-desc">телеканала</div>
  862.                      </div>
  863.                   </div>
  864.                </div>
  865.                <div class="tp-opt-list">
  866.                   <div class="tp-opt">
  867.                      <i class="fas fa-circle"></i>
  868.                      <span>Роутер xPON (ONT): Выгодный ONT (вкл в ТП)</span>
  869.                   </div>
  870.                   <div class="tp-opt">
  871.                      <i class="fas fa-circle"></i>
  872.                      <span>ТВ-приставка: Приставка в аренду за 10 руб.мес</span>
  873.                   </div>
  874.                   <div class="tp-opt tp-opt-hidden">
  875.                      <i class="fas fa-circle"></i>
  876.                      <span>Месяц подключения  - 1 руб. (только для новых клиентов)</span>
  877.                   </div>
  878.                   <div class="tp-opt tp-opt-hidden">
  879.                      <i class="fas fa-circle"></i>
  880.                      <span>КТВ в подарок (при наличии тех. возможности)</span>
  881.                   </div>
  882.                </div>
  883.                <a class="tp-opt-btn" href="#">Ещё 2 опции</a>
  884.                <a class="tp-connect-btn btn btn-main" href="#">Подключить</a>
  885.             </div>
  886.          </div>
  887.       </div>
  888.       <div class="col-lg-4 tp" data-filter="house internet tv" style="display: none;">
  889.          <div class="card">
  890.             <div class="card-body">
  891.                <div class="tp-name">Моя Башкирия 2в1</div>
  892.                <div class="tp-desc">В частном секторе</div>
  893.                <div class="tp-price">1000 ₽/мес</div>
  894.                <div class="tp-inc-list">
  895.                   <div class="row">
  896.                      <div class="col-4 tp-inc">
  897.                         <div class="tp-inc-icon">
  898.                            <i class="fas fa-globe"></i>
  899.                         </div>
  900.                         <div class="tp-inc-name">300</div>
  901.                         <div class="tp-inc-desc">Мбит</div>
  902.                      </div>
  903.                      <div class="col-4 tp-inc">
  904.                         <div class="tp-inc-icon">
  905.                            <i class="fas fa-tv"></i>
  906.                         </div>
  907.                         <div class="tp-inc-name">172</div>
  908.                         <div class="tp-inc-desc">телеканала</div>
  909.                      </div>
  910.                   </div>
  911.                </div>
  912.                <div class="tp-opt-list">
  913.                   <div class="tp-opt">
  914.                      <i class="fas fa-circle"></i>
  915.                      <span>Роутер xPON (ONT): Выгодный ONT (вкл в ТП)</span>
  916.                   </div>
  917.                   <div class="tp-opt">
  918.                      <i class="fas fa-circle"></i>
  919.                      <span>ТВ-приставка: Приставка в аренду за 10 руб.мес</span>
  920.                   </div>
  921.                   <div class="tp-opt tp-opt-hidden">
  922.                      <i class="fas fa-circle"></i>
  923.                      <span>Месяц подключения  - 1 руб. (только для новых клиентов)</span>
  924.                   </div>
  925.                   <div class="tp-opt tp-opt-hidden">
  926.                      <i class="fas fa-circle"></i>
  927.                      <span>КТВ в подарок (при наличии тех. возможности)</span>
  928.                   </div>
  929.                </div>
  930.                <a class="tp-opt-btn" href="#">Ещё 2 опции</a>
  931.                <a class="tp-connect-btn btn btn-main" href="#">Подключить</a>
  932.             </div>
  933.          </div>
  934.       </div>
  935.       <div class="col-lg-4 tp" data-filter="house internet phone tv" style="display: none;">
  936.          <div class="card">
  937.             <div class="card-body">
  938.                <div class="tp-name">Моя Башкирия 3в1</div>
  939.                <div class="tp-desc">В частном секторе</div>
  940.                <div class="tp-price">650 ₽/мес</div>
  941.                <div class="tp-inc-list">
  942.                   <div class="row">
  943.                      <div class="col-4 tp-inc">
  944.                         <div class="tp-inc-icon">
  945.                            <i class="fas fa-globe"></i>
  946.                         </div>
  947.                         <div class="tp-inc-name">100</div>
  948.                         <div class="tp-inc-desc">Мбит</div>
  949.                      </div>
  950.                      <div class="col-4 tp-inc">
  951.                         <div class="tp-inc-icon">
  952.                            <i class="fas fa-tv"></i>
  953.                         </div>
  954.                         <div class="tp-inc-name">172</div>
  955.                         <div class="tp-inc-desc">телеканала</div>
  956.                      </div>
  957.                      <div class="col-4 tp-inc">
  958.                         <div class="tp-inc-icon">
  959.                            <i class="fas fa-phone"></i>
  960.                         </div>
  961.                         <div class="tp-inc-name">100</div>
  962.                         <div class="tp-inc-desc">минут</div>
  963.                      </div>
  964.                   </div>
  965.                </div>
  966.                <div class="tp-opt-list">
  967.                   <div class="tp-opt">
  968.                      <i class="fas fa-circle"></i>
  969.                      <span>Роутер xPON (ONT): Выгодный ONT (вкл в ТП)</span>
  970.                   </div>
  971.                   <div class="tp-opt">
  972.                      <i class="fas fa-circle"></i>
  973.                      <span>ТВ-приставка: Приставка в аренду за 10 руб.мес</span>
  974.                   </div>
  975.                   <div class="tp-opt tp-opt-hidden">
  976.                      <i class="fas fa-circle"></i>
  977.                      <span>Месяц подключения  - 1 руб. (только для новых клиентов)</span>
  978.                   </div>
  979.                   <div class="tp-opt tp-opt-hidden">
  980.                      <i class="fas fa-circle"></i>
  981.                      <span>КТВ в подарок (при наличии тех. возможности)</span>
  982.                   </div>
  983.                </div>
  984.                <a class="tp-opt-btn" href="#">Ещё 2 опции</a>
  985.                <a class="tp-connect-btn btn btn-main" href="#">Подключить</a>
  986.             </div>
  987.          </div>
  988.       </div>
  989.       <div class="col-lg-4 tp" data-filter="house internet phone tv" style="display: none;">
  990.          <div class="card">
  991.             <div class="card-body">
  992.                <div class="tp-name">Моя Башкирия 3в1</div>
  993.                <div class="tp-desc">В частном секторе</div>
  994.                <div class="tp-price">990 ₽/мес</div>
  995.                <div class="tp-inc-list">
  996.                   <div class="row">
  997.                      <div class="col-4 tp-inc">
  998.                         <div class="tp-inc-icon">
  999.                            <i class="fas fa-globe"></i>
  1000.                         </div>
  1001.                         <div class="tp-inc-name">200</div>
  1002.                         <div class="tp-inc-desc">Мбит</div>
  1003.                      </div>
  1004.                      <div class="col-4 tp-inc">
  1005.                         <div class="tp-inc-icon">
  1006.                            <i class="fas fa-tv"></i>
  1007.                         </div>
  1008.                         <div class="tp-inc-name">172</div>
  1009.                         <div class="tp-inc-desc">телеканала</div>
  1010.                      </div>
  1011.                      <div class="col-4 tp-inc">
  1012.                         <div class="tp-inc-icon">
  1013.                            <i class="fas fa-phone"></i>
  1014.                         </div>
  1015.                         <div class="tp-inc-name">100</div>
  1016.                         <div class="tp-inc-desc">минут</div>
  1017.                      </div>
  1018.                   </div>
  1019.                </div>
  1020.                <div class="tp-opt-list">
  1021.                   <div class="tp-opt">
  1022.                      <i class="fas fa-circle"></i>
  1023.                      <span>Роутер xPON (ONT): Выгодный ONT (вкл в ТП)</span>
  1024.                   </div>
  1025.                   <div class="tp-opt">
  1026.                      <i class="fas fa-circle"></i>
  1027.                      <span>ТВ-приставка: Приставка в аренду за 10 руб.мес</span>
  1028.                   </div>
  1029.                   <div class="tp-opt tp-opt-hidden">
  1030.                      <i class="fas fa-circle"></i>
  1031.                      <span>Месяц подключения  - 1 руб. (только для новых клиентов)</span>
  1032.                   </div>
  1033.                   <div class="tp-opt tp-opt-hidden">
  1034.                      <i class="fas fa-circle"></i>
  1035.                      <span>КТВ в подарок (при наличии тех. возможности)</span>
  1036.                   </div>
  1037.                </div>
  1038.                <a class="tp-opt-btn" href="#">Ещё 2 опции</a>
  1039.                <a class="tp-connect-btn btn btn-main" href="#">Подключить</a>
  1040.             </div>
  1041.          </div>
  1042.       </div>
  1043.       <div class="col-lg-4 tp" data-filter="house internet phone tv" style="display: none;">
  1044.          <div class="card">
  1045.             <div class="card-body">
  1046.                <div class="tp-name">Моя Башкирия 3в1</div>
  1047.                <div class="tp-desc">В частном секторе</div>
  1048.                <div class="tp-price">1050 ₽/мес</div>
  1049.                <div class="tp-inc-list">
  1050.                   <div class="row">
  1051.                      <div class="col-4 tp-inc">
  1052.                         <div class="tp-inc-icon">
  1053.                            <i class="fas fa-globe"></i>
  1054.                         </div>
  1055.                         <div class="tp-inc-name">300</div>
  1056.                         <div class="tp-inc-desc">Мбит</div>
  1057.                      </div>
  1058.                      <div class="col-4 tp-inc">
  1059.                         <div class="tp-inc-icon">
  1060.                            <i class="fas fa-tv"></i>
  1061.                         </div>
  1062.                         <div class="tp-inc-name">172</div>
  1063.                         <div class="tp-inc-desc">телеканала</div>
  1064.                      </div>
  1065.                      <div class="col-4 tp-inc">
  1066.                         <div class="tp-inc-icon">
  1067.                            <i class="fas fa-phone"></i>
  1068.                         </div>
  1069.                         <div class="tp-inc-name">100</div>
  1070.                         <div class="tp-inc-desc">минут</div>
  1071.                      </div>
  1072.                   </div>
  1073.                </div>
  1074.                <div class="tp-opt-list">
  1075.                   <div class="tp-opt">
  1076.                      <i class="fas fa-circle"></i>
  1077.                      <span>Роутер xPON (ONT): Выгодный ONT (вкл в ТП)</span>
  1078.                   </div>
  1079.                   <div class="tp-opt">
  1080.                      <i class="fas fa-circle"></i>
  1081.                      <span>ТВ-приставка: Приставка в аренду за 10 руб.мес</span>
  1082.                   </div>
  1083.                   <div class="tp-opt tp-opt-hidden">
  1084.                      <i class="fas fa-circle"></i>
  1085.                      <span>Месяц подключения  - 1 руб. (только для новых клиентов)</span>
  1086.                   </div>
  1087.                   <div class="tp-opt tp-opt-hidden">
  1088.                      <i class="fas fa-circle"></i>
  1089.                      <span>КТВ в подарок (при наличии тех. возможности)</span>
  1090.                   </div>
  1091.                </div>
  1092.                <a class="tp-opt-btn" href="#">Ещё 2 опции</a>
  1093.                <a class="tp-connect-btn btn btn-main" href="#">Подключить</a>
  1094.             </div>
  1095.          </div>
  1096.       </div>
  1097.       <div class="col-lg-4 tp" data-filter="house internet tv" style="display: none;">
  1098.          <div class="card">
  1099.             <div class="card-body">
  1100.                <div class="tp-name">Пакет "Игровой"</div>
  1101.                <div class="tp-desc">В частном секторе</div>
  1102.                <div class="tp-price">1090 ₽/мес</div>
  1103.                <div class="tp-inc-list">
  1104.                   <div class="row">
  1105.                      <div class="col-4 tp-inc">
  1106.                         <div class="tp-inc-icon">
  1107.                            <i class="fas fa-globe"></i>
  1108.                         </div>
  1109.                         <div class="tp-inc-name">300</div>
  1110.                         <div class="tp-inc-desc">Мбит</div>
  1111.                      </div>
  1112.                      <div class="col-4 tp-inc">
  1113.                         <div class="tp-inc-icon">
  1114.                            <i class="fas fa-tv"></i>
  1115.                         </div>
  1116.                         <div class="tp-inc-name">172</div>
  1117.                         <div class="tp-inc-desc">телеканала</div>
  1118.                      </div>
  1119.                   </div>
  1120.                </div>
  1121.                <div class="tp-opt-list">
  1122.                   <div class="tp-opt">
  1123.                      <i class="fas fa-circle"></i>
  1124.                      <span>Роутер xPON (ONT): +10 руб./мес. (аренда)</span>
  1125.                   </div>
  1126.                   <div class="tp-opt">
  1127.                      <i class="fas fa-circle"></i>
  1128.                      <span>ТВ-приставка: +10 руб./мес. за ед. (аренда)</span>
  1129.                   </div>
  1130.                   <div class="tp-opt tp-opt-hidden" style="display: flex;">
  1131.                      <i class="fas fa-circle"></i>
  1132.                      <span>Месяц подключения - 1 руб. (только для новых клиентов)</span>
  1133.                   </div>
  1134.                   <div class="tp-opt tp-opt-hidden" style="display: flex;">
  1135.                      <i class="fas fa-circle"></i>
  1136.                      <span>КТВ в подарок (при наличии тех. возможности)</span>
  1137.                   </div>
  1138.                </div>
  1139.                <a class="tp-opt-btn" href="#" style="display: none;">Ещё 2 опции</a>
  1140.                <a class="tp-connect-btn btn btn-main" href="#">Подключить</a>
  1141.             </div>
  1142.          </div>
  1143.       </div>
  1144.    </div>
  1145.    <div class="result-more-btn">
  1146.       <a href="#" style="display: none;">Показать еще тарифы</a>
  1147.    </div>
  1148.    <hr>
  1149. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!