Skip to content

Instantly share code, notes, and snippets.

@Security2431

Security2431/Show all items

Created July 10, 2017 05:42
Show Gist options
  • Save Security2431/ff267c87445183b3e96e95c4850489a3 to your computer and use it in GitHub Desktop.
Save Security2431/ff267c87445183b3e96e95c4850489a3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jQuery
// show services item
$(window).on('resize', function(){
var $item = $('.service__item'),
delayStep = 200;
// hide elements on resize
if ($('.service__show-btn').is(':visible')) {
if( $( window ).width() <= 959 ) {
$item.slice(4, ($item.length))
.hide();
}
if( $( window ).width() <= 1199) {
$item.slice(6, ($item.length))
.hide();
}
}
// Show hidden elements with fadein animation
$(document).on("click", ".service__show-btn", (function(e) {
e.preventDefault();
$('.service__item:hidden').each(function() {
$(this).delay(delayStep).fadeIn();
delayStep += delayStep;
});
$('.service__show-btn').hide();
}));
}).trigger('resize');
Raw
Show all items
<section class="service">
<div class="service__heading">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2 class="pull-left service__title">Наши услуги</h2>
<div class="pull-right rss"><a href="#" class="rss__link"><i class="fa fa-rss rss__icon"></i><span class="hidden-xs rss__text">RSS-лента</span></a></div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 service__item" style="height: 410px;">
<div class="currency">
<div class="currency__heading">
<h3 class="currency__title">Курсы валют</h3>
<p class="thedate">Пятница, 31.03.2017 г.</p>
<table>
<tbody><tr>
<th><!-- колонка валюты --></th>
<th>Покупка</th>
<th>Продажа</th>
<th>ЦБ РФ</th>
<th><!-- колонка изменения курсов --></th>
</tr>
<tr>
<td><span>USD</span></td>
<td>55.30</td>
<td>57.30</td>
<td>55,9606</td>
<td><i class="fa fa-long-arrow-down" aria-hidden="true"></i></td>
</tr>
<tr>
<td><span>EUR</span></td>
<td>59.60</td>
<td>61.60</td>
<td>59,8107</td>
<td><i class="fa fa-long-arrow-down" aria-hidden="true"></i></td>
</tr>
</tbody></table>
</div>
<style>
@media only screen and (max-width:767px){
.currency{height:auto}
.currency__content{display:none}
}
.currency__content{background: none}
.currency{background: url(http://sksbank.doublebrain.ru/bitrix/templates/main/img/xback_c.png.pagespeed.ic.a03rVMxmQH.png)}
.currency table{font-size:12px;width:100%}
.currency table tr td{padding-right:14px}
.currency i.fa.fa-long-arrow-up{color:#97ba00}
.currency i.fa.fa-long-arrow-down{color:#a73541}
.currency table tr td:nth-child(4){padding-right:8px}
.currency th{color:#999;padding-right:10px;font-size:11px;padding-bottom:1em;font-family:'MullerMedium';font-weight:100}
.currency table{font-family:'LetoSans'}
.currency__title{margin:0 0 5px}
.currency .thedate{font-size:11px;color:#797979}
.currency table tr td:first-child{font-family:'LetoSansBold'}
.tab-pane{font-size:24px;font-family:'LetoSans'}
.tab-pane i{font-size:17px;top:-2px;position:relative}
div#purchase{padding:20px 0}
ul#myTab{display:none}
div#purchase_eur{padding:20px 0}
</style>
<div class="tab-content currency__content clearfix">
<div id="panel1" class="tab-pane fade in active">
<ul class="nav nav-tabs" id="myTab"><li class="active"><a href="#Tab1">USD</a></li><li class=""><a href="#Tab2">EUR</a></li></ul>
<div class="tab-content">
<div data-delay="{&quot;show&quot;:&quot;5000&quot;, &quot;hide&quot;:&quot;3000&quot;}" class="tab-pane fade active in" id="Tab1"><!-- USD -->
USD <span style="color:#a73541">55.30 <i class="fa fa-long-arrow-down" aria-hidden="true"></i></span>
<div style="margin-left: -42px;" id="purchase"></div></div>
<div data-delay="{&quot;show&quot;:&quot;5000&quot;, &quot;hide&quot;:&quot;3000&quot;}" id="Tab2" class="tab-pane fade"><!-- EUR -->
EUR <span style="color:#777777">59.60</span>
<div style="margin-left: -42px;" id="purchase_eur"></div></div>
</div>
<script>var tabChange = function () {
var tabs = $('.nav-tabs > li');
var active = tabs.filter('.active');
var next = active.next('li').length ? active.next('li').find('a') : tabs.filter(':first-child').find('a');
// Use the Bootsrap tab show method
next.tab('show');
};
// Tab Cycle function
var tabCycle = setInterval(tabChange, 5000);
// Tab click event handler
$('a').on('click', function (e) {
e.preventDefault();
// Stop the cycle
clearInterval(tabCycle);
// Show the clicked tabs associated tab-pane
$(this).tab('show');
// Start the cycle again in a predefined amount of time
setTimeout(function () {
//tabCycle = setInterval(tabChange, 5000);
}, 15000);
});
</script>
</div>
<div id="panel2" class="tab-pane fade"><div style="display:none" id="sale"></div><div style="display:none" id="sale_eur"></div></div>
<div id="panel3" class="tab-pane fade"><div style="display:none" id="cbr"><div style="position: relative;"><div dir="ltr" style="position: relative; width: 300px; height: 100px;"><div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;" aria-label="A chart."><svg width="300" height="100" aria-label="A chart." style="overflow: hidden;"><defs id="defs"><clipPath id="_ABSTRACT_RENDERER_ID_0"><rect x="40" y="19" width="221" height="62"></rect></clipPath></defs><rect x="0" y="0" width="300" height="100" stroke="none" stroke-width="0" fill="#ffffff"></rect><g><rect x="270" y="19" width="18" height="9" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><rect x="270" y="19" width="18" height="9" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><text text-anchor="start" x="291" y="26.65" font-family="Arial" font-size="9" stroke="none" stroke-width="0" fill="#222222">Курс</text></g><path d="M270,23.5L288,23.5" stroke="#3366cc" stroke-width="2" fill-opacity="1" fill="none"></path></g></g><g><rect x="40" y="19" width="221" height="62" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g clip-path="url(http://sksbank.doublebrain.ru/#_ABSTRACT_RENDERER_ID_0)"><g><rect x="40" y="80" width="221" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="40" y="65" width="221" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="40" y="49" width="221" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="40" y="34" width="221" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="40" y="19" width="221" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect></g><g><path d="M56.214285714285715,29.087166666666725L87.64285714285714,31.580541666666598L119.07142857142857,41.78279166666667L150.5,43.9915L181.92857142857142,41.762458333333385L213.35714285714286,58.1867083333334L244.78571428571428,68.79308333333334" stroke="#3366cc" stroke-width="2" fill-opacity="1" fill="none"></path></g></g><g></g><g><g><text text-anchor="middle" x="56.214285714285715" y="93.65" font-family="Arial" font-size="9" stroke="none" stroke-width="0" fill="#222222">24.03.17</text></g><g><text text-anchor="middle" x="87.64285714285714" y="93.65" font-family="Arial" font-size="9" stroke="none" stroke-width="0" fill="#222222">25.03.17</text></g><g><text text-anchor="middle" x="119.07142857142857" y="93.65" font-family="Arial" font-size="9" stroke="none" stroke-width="0" fill="#222222">28.03.17</text></g><g><text text-anchor="middle" x="150.5" y="93.65" font-family="Arial" font-size="9" stroke="none" stroke-width="0" fill="#222222">29.03.17</text></g><g><text text-anchor="middle" x="181.92857142857142" y="93.65" font-family="Arial" font-size="9" stroke="none" stroke-width="0" fill="#222222">30.03.17</text></g><g><text text-anchor="middle" x="213.35714285714286" y="93.65" font-family="Arial" font-size="9" stroke="none" stroke-width="0" fill="#222222">31.03.17</text></g><g><text text-anchor="middle" x="244.78571428571428" y="93.65" font-family="Arial" font-size="9" stroke="none" stroke-width="0" fill="#222222">01.04.17</text></g><g><text text-anchor="end" x="31" y="83.65" font-family="Arial" font-size="9" stroke="none" stroke-width="0" fill="#444444">55.5</text></g><g><text text-anchor="end" x="31" y="68.39999999999996" font-family="Arial" font-size="9" stroke="none" stroke-width="0" fill="#444444">56.1</text></g><g><text text-anchor="end" x="31" y="53.149999999999906" font-family="Arial" font-size="9" stroke="none" stroke-width="0" fill="#444444">56.7</text></g><g><text text-anchor="end" x="31" y="37.90000000000004" font-family="Arial" font-size="9" stroke="none" stroke-width="0" fill="#444444">57.3</text></g><g><text text-anchor="end" x="31" y="22.65" font-family="Arial" font-size="9" stroke="none" stroke-width="0" fill="#444444">57.9</text></g></g></g><g></g></svg><div aria-label="A tabular representation of the data in the chart." style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;"><table><thead><tr><th>Year</th><th>Курс</th></tr></thead><tbody><tr><td>24.03.17</td><td>57.523</td></tr><tr><td>25.03.17</td><td>57.425</td></tr><tr><td>28.03.17</td><td>57.023</td></tr><tr><td>29.03.17</td><td>56.936</td></tr><tr><td>30.03.17</td><td>57.024</td></tr><tr><td>31.03.17</td><td>56.378</td></tr><tr><td>01.04.17</td><td>55.961</td></tr></tbody></table></div></div></div><div aria-hidden="true" style="display: none; position: absolute; top: 110px; left: 310px; white-space: nowrap; font-family: Arial; font-size: 9px;">Курс</div><div></div></div></div><div style="display:none" id="cbr_eur"></div></div>
<div class="clear"></div>
</div>
</div>
</div><!-- /.service__item -->
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 service__item" style="height: 410px;">
<div class="product">
<div class="clearfix product__photo">
<a href="/private-customers/settlement-cash-services/"><img class="img-responsive product__img" src="/upload/iblock/b59/b593bfc390ce71ce532dd04c2ee77c56.gif" alt=""></a>
</div>
<div class="clearfix product__name">
<a href="/private-customers/settlement-cash-services/"><h3 class="product__heading">Дополнительные услуги</h3></a>
</div>
<div class="product__descr">Помимо стандартных услуг по расчетно-кассовому обслуживанию СКС банк предоставляет дополнительные услуги во всех отделениях.</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 service__item" style="height: 410px;">
<div class="product">
<div class="clearfix product__photo">
<a href=""><img class="img-responsive product__img" src="/upload/iblock/14a/14ae577a8ee5b2c2f593862205a7084a.gif" alt=""></a>
</div>
<div class="clearfix product__name">
<a href=""><h3 class="product__heading">Обслуживание счетов</h3></a>
</div>
<div class="product__descr">СКС Банк предлагает выгодные банковские кредиты для индивидуальных предпринимателей на развитие малого и среднего бизнеса!</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 service__item" style="height: 410px;">
<div class="product">
<div class="clearfix product__photo">
<a href="/corporate-clients/documentary-operations/konsultatsionnye-uslugi-po-valyutnomu-kontrolyu/"><img class="img-responsive product__img" src="/upload/iblock/a39/a39e3f479516c4f80d0fee9772c1b403.gif" alt=""></a>
</div>
<div class="clearfix product__name">
<a href="/corporate-clients/documentary-operations/konsultatsionnye-uslugi-po-valyutnomu-kontrolyu/"><h3 class="product__heading">Валютный контроль</h3></a>
</div>
<div class="product__descr">Помощь в составлении внешнеторговых контрактов в соответствии с требованиями валютного законодательства РФ.</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 service__item" style="height: 410px;">
<div class="product">
<div class="clearfix product__photo">
<a href="/private-customers/settlement-cash-services/"><img class="img-responsive product__img" src="/upload/iblock/2b2/2b28fdc14b6dbc20845a7f4cfea995d8.jpg" alt=""></a>
</div>
<div class="clearfix product__name">
<a href="/private-customers/settlement-cash-services/"><h3 class="product__heading">Внутрибанковские переводы</h3></a>
</div>
<div class="product__descr">осуществляет внутрибанковские переводы в российских рублях и в иностранной валюте. Переводы — это удобное решение, если вам необходимо срочно отправить средства</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 service__item" style="height: 410px;">
<div class="product">
<div class="clearfix product__photo">
<a href="/private-customers/deposits-in-rubles-and-foreign-currency/"><img class="img-responsive product__img" src="/upload/iblock/d24/d243c3f8fa2a5a8c28e80e7d4498a546.jpg" alt=""></a>
</div>
<div class="clearfix product__name">
<a href="/private-customers/deposits-in-rubles-and-foreign-currency/"><h3 class="product__heading">Cтрахование вкладов</h3></a>
</div>
<div class="product__descr">Для страхования вкладов вкладчику не требуется заключения какого-либо договора: оно осуществляется в силу закона.</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 service__item" style="height: 410px;">
<div class="product">
<div class="clearfix product__photo">
<a href="/corporate-clients/korporativnye-kredity/"><img class="img-responsive product__img" src="/upload/iblock/651/651ea599c753bd0337fb52073ed25e82.jpg" alt=""></a>
</div>
<div class="clearfix product__name">
<a href="/corporate-clients/korporativnye-kredity/"><h3 class="product__heading">Корпоративные кредиты</h3></a>
</div>
<div class="product__descr">СКС Банк предлагает выгодные банковские кредиты для индивидуальных предпринимателей на развитие малого и среднего бизнеса!</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 service__item" style="height: 410px;">
<div class="product">
<div class="clearfix product__photo">
<a href="/private-customers/settlement-cash-services/"><img class="img-responsive product__img" src="/upload/iblock/680/680e540428848794265bcc5a192cf521.jpg" alt=""></a>
</div>
<div class="clearfix product__name">
<a href="/private-customers/settlement-cash-services/"><h3 class="product__heading">Межбанковские переводы</h3></a>
</div>
<div class="product__descr">Мы предлагаем наиболее эффективный способ провести любые расчеты и переводы, а также получить полную информацию по своим счетам!</div>
</div>
</div>
<div class="embed-responsive teacher__video">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/KM14m6_yzL4" allowfullscreen=""></iframe>
</div> <div class="col-xs-12 text-center">
<a href="/services/" class="btn-bank service__btn">Все услуги</a>
</div>
</div>
</div><!-- /.container -->
</section>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment