8-800-2005-303 Бесплатно по России +7 (843) 2-303-303 Для звонков из-за границы Оценить качество обслуживания Обратная связь
Закрыть всплывающее окно
Казань Офисы, банкоматы и инфокиоски
 8-800-2005-303 Бесплатно по России
+7-843-2-303-303 Для звонков из-за границы
Связаться с нами
Eng
«АК БАРС Online»
Мобильный банк
Офисы
Банкоматы
Перевод с карты на карту
Открыть брокерский счёт

Стили, используемые на сайте

1. Заголовки

Заголовок h1

Заголовок h2

Подзаголовок h2 class="text-grey"

Заголовок h3

Подзаголовок h3 class="text-grey"

Заголовок h4

Подзаголовок h4 class="text-grey"

Заголовок h5
Подзаголовок h5 class="text-grey"


2. Оформление текста

2.1 Стандартный текст

Исользуется <p>/</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et mollitia possimus earum similique corporis architecto tenetur incidunt quod nam tempora! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et mollitia possimus earum similique corporis architecto tenetur incidunt quod nam tempora!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et mollitia possimus earum similique corporis architecto tenetur incidunt quod nam tempora!

2.2 Примечание

Исользуется <div class="prim-ie"><p>Текст...</p></div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, doloribus, ad repudiandae expedita in error quo ipsam esse soluta pariatur iste earum itaque iure natus impedit? Tempore, obcaecati deserunt mollitia!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, temporibus, ex, unde doloribus tempora omnis architecto aliquid quibusdam accusantium quia laudantium voluptate veritatis tempore eligendi magnam nostrum consequuntur aspernatur officia.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti, tempore, et enim minima mollitia harum in inventore recusandae dolorem voluptate praesentium atque sint alias natus nemo aperiam numquam illum qui.

2.3 Текст с отступами

Используется <div class="text-padleft"><p>Текст...</p></div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, minima, fugit ipsam sunt suscipit quod.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et mollitia possimus earum similique corporis architecto tenetur incidunt quod nam tempora! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et mollitia possimus earum similique corporis architecto tenetur incidunt quod nam tempora!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et mollitia possimus earum similique corporis architecto tenetur incidunt quod nam tempora!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, minima, fugit ipsam sunt suscipit quod.

2.4 Блоки «Обратите внимание»

Используется <p class="lime-snoska">Текст...</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem vero voluptates asperiores quod dolorum culpa beatae nobis voluptatem perspiciatis sit? Quibusdam neque similique saepe consequuntur! Mollitia molestias earum soluta animi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, alias voluptatibus quo eveniet voluptatem repudiandae soluta deserunt eos sed earum quod quos iusto. Maiores, qui possimus cum velit asperiores adipisci!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quos dolor ipsam hic odio officia suscipit voluptas ipsum quia ex!

3. Средства форматирования текста

DOS CSS

code

Курсив <i>Текс...</i>

Выделение <mark>Текс...</mark>

Полужирный <strong>Текс...</strong>

Зачеркнутый <del>Текс...</del>

Верхний регистр <sup>Текс...</sup>

Нижний регистр <sub>Текс...</sub>

3.1 Списки цифрами

Использовать <ol><li>Список1</li><li>Список2</li></ol>

  1. Lorem ipsum dolor sit amet.
  2. Lorem ipsum dolor sit amet.
  3. Lorem ipsum dolor sit amet.
  4. Lorem ipsum dolor sit amet.
  5. Lorem ipsum dolor sit amet.


3.2 Списки черточками

Использовать <ul class="line"><li>Список1</li><li>Список2</li></ul>


3.3 Табличный список подменю

Использовать
<div class="subtableico">
<div class="colum2-70-30">
<div>
<p class="submenu1 submenuico">Валюта счета</p>
</div>
<div>
<p><strong>RUR/USD/EUR</strong></p>
</div>
</div>

<div class="colum2-70-30">
<div>
<p class="submenu2 submenuico">Срок действия карты </p>
</div>
<div>
<p><strong>2 года</strong></p>
</div>
</div>

<div class="colum2-70-30">
<div>
<p class="submenu3 submenuico">Комиссия за регистрацию основной карты </p>
</div>
<div>
<p><strong>550/20/15</strong></p>
</div>
</div>

<div class="colum2-70-30">
<div>
<p class="submenu4 submenuico">Комиссия за перевыпуск карты </p>
</div>
<div>
<p><strong>540/18/10</strong></p>
</div>
</div>

<div class="colum2-70-30">
<div>
<p class="submenu5 submenuico">Комиссия за получение наличных:</p>
</div>
<div>
</div>
</div>

<div class="colum2-70-30">
<div>
<p>В банкоматах и пунктах выдачи наличных Банка </p>
</div>
<div>
<p><strong>не взымается</strong></p>
</div>
</div>

<div class="colum2-70-30">
<div>
<p>В банкоматах других банков</p>
</div>
<div>
<p><strong>1% от суммы,<br>мин 3 USD</strong></p>
</div>
</div>

<div class="colum2-70-30">
<div>
<p>В пунктах выдачи наличных других банков</p>
</div>
<div>
<p><strong>1% от суммы,<br>мин 5 USD</strong></p>
</div>
</div>

</div>

RUB/USD/EUR

2 года

550/20/15

540/18/10

В банкоматах и пунктах выдачи наличных Банка

не взымается

В банкоматах других банков

1% от суммы,
мин 3 USD

В пунктах выдачи наличных других банков

1% от суммы,
мин 5 USD

4. Цитаты

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, beatae, tenetur ratione voluptatum doloribus quidem eaque commodi quibusdam cupiditate nesciunt facere nemo ducimus aliquam atque minus tempora nostrum saepe doloremque! Автор: Иванов Иван Иванович Иванюк

5. Список определений

Использовать <dl>
<dt>Какое то слово</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, sunt voluptatibus quo illum dolorum earum molestiae itaque adipisci ratione cupiditate. Unde, rem cum numquam aut ratione sequi vitae maiores sint.
</dd>
</dl>

Какое то слово
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, sunt voluptatibus quo illum dolorum earum molestiae itaque adipisci ratione cupiditate. Unde, rem cum numquam aut ratione sequi vitae maiores sint.
Какое то слово
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, sunt voluptatibus quo illum dolorum earum molestiae itaque adipisci ratione cupiditate. Unde, rem cum numquam aut ratione sequi vitae maiores sint.
Какое то слово
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, sunt voluptatibus quo illum dolorum earum molestiae itaque adipisci ratione cupiditate. Unde, rem cum numquam aut ratione sequi vitae maiores sint.

6. Сноски

Использовать
<ol class="notes">
<li>Текст...</li>
<li>Текст...</li>
</ol>

  1. При переводе денег из стран дальнего зарубежья и в страны дальнего зарубежья может применяться комиссия, отличная от стандартной. При переводе денег из стран дальнего зарубежья и в страны дальнего зарубежья может применяться комиссия, отличная от стандартной.
  2. При переводе денег в отдельные страны дальнего зарубежья может применяться комиссия, отличная от стандартной.

7. Картинки

7.1. Круглые на основе подготовленых квадратных картинок

<div class="circle-img"><img src="images/card-corporate-1.jpg" width="123" height="123" /></div>
дополнительно центрирует содержимое

7.2. Круглые для любого формата картинок

<div class="circle-bg" style="background-image: url("/upload/iblock/ca5/ca5ca60ce471cf425ad8152c49326d00.jpg; width: 120px; height: 120px"></div>
Индивидуально стилем задается картинка, которая должна отображаться, и размер

8. Границы

Легкая серая 1рх: class="border-greylight"

Толстая 3рх серая с нижним отстуом class="border-grey"

8. Ссылки

Использовать <a>Текс...</a>

Стандартная ссылка
Ссылка при наведении

Использовать <a href="" class="dottedPlus"><span>Текст...</span></a>

Добавить к сравнению

Использовать
<ul class="greenmenusub">
<li class="active"><a href="">Активная вкладка</a></li>
<li><a href="">Неактивная вкладка</a></li>
</ul>


Старые классы answer и question дейтсвуют. Но их оформление по цвету ссылок отличается от нового hidetext
Использовать
<a href="" class="hidetext">
<span>Скрытый текст</span>
</a>
<div class="hideblock">
<p>Текст...</p>
</div>

Скрытый текст

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, minus a facere quidem nostrum eum hic et repellendus doloremque obcaecati temporibus vitae ad repellat praesentium explicabo repudiandae deserunt dolor voluptatibus dicta ipsa saepe officia quae adipisci sunt libero laborum accusamus!



Использовать
<span class="targetspan">Заголовок</span>
<div class="infospan">
<p>Текст...</p>
</div>

Скрытый текс

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, dolorem, iste? Dicta, molestiae, non, optio natus officia nihil repellendus quidem est autem quos neque sint vitae sapiente explicabo facere ab quisquam quasi repellat fugit debitis fugiat unde veritatis laborum illo aliquid maxime assumenda aut at vel nemo. Autem, mollitia, culpa.



9. Навигация

9.1 Меню табы

Использовать
<div class="greenmenuwrappershadow">
<div class="shadowgreenul"></div>
<div class="greenmenuwrapper">
<ul class="greenmenu">
<li class="active"><a href="">Условия кредиты</a></li>
<li><a href="">Обеспечение кредита</a></li>
<li><a href="">Необходимые документы</a></li>
<li><a href="">Страхование</a></li>
<li><a href="">Требования к заемщику</a></li>
</ul>
</div>
</div>


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem officia molestiae odio perferendis esse culpa impedit quidem asperiores natus consequatur.

9.2 Меню поиска

Использовать
<ul class="linemenu">
<li class='active'><a href="">название ссылки</a></li>
<li><a href="">название ссылки</a></li>
<li><a href="">название ссылки</a></li>
<li><a href="">название ссылки</a></li>
<li><a href="">название ссылки</a></li>
<li><a href="">название ссылки</a></li>
</ul>

9.3 Подменю

Использовать
<ul class="menusub3">
<li><a href="">название ссылки</a></li>
<li><a href="">название ссылки</a></li>
<li><a href="">название ссылки</a></li>
<li><a href="">название ссылки</a></li>
<li><a href="">название ссылки</a></li>
<li><a href="">название ссылки</a></li>
</ul>

10. Элементы форм.

10.1 Стандартная форма

Использовать
<div class="selectclear">
<label for="">Стандартная форма</label>
<input type="text">
</div>

Использовать
<div class="selectclear">
<label for="">Обязательное поле<span class="red">*</span></label>
<input type="text">
</div>

Использовать
<div class="selectclear">
<label for="">Выпадающий список</label>
<select name="" id="">
<option value="kazan">Казань</option>
<option value="moscov">Москва</option>
<option value="moscov">Уфа</option>
<option value="moscov">Самара</option>
</select>
</div>

Использовать<label for="">Поле с замещающим текстом</label>
<input type="text" placeholder="Замещающий текст">
<div class="snoska">
<span>Кредит свыше 5 лет предоставляется под залог коммерческой недвижимости и земельных участков</span>
</div>
</div>

Кредит свыше 5 лет предоставляется под залог коммерческой недвижимости и земельных участков

Использовать
<div class="dopolnitelno">
<div class="borderbot">
<h4>Группа чекбоксов вертикальная</h4>
<label><input type="checkbox"><span>Начального уровня</span></label>
<label><input type="checkbox"><span>Классическая</span></label>
<label><input type="checkbox"><span>Мнгновенного выпуска</span></label>
<label><input type="checkbox"><span>Премиальная</span></label>
</div>
<div class="borderbot">
<h4>Группа чекбоксов вертикальная</h4>
<label><input type="checkbox"><span>Возможность оформления кредита на карту</span></label>
<label><input type="checkbox"><span>Бесконтактная оплата покупок</span></label>
<label><input type="checkbox"><span>Оплата проезда в общественном транспорте</span></label>
</div>
</div>

Группа чекбоксов вертикальная с раздилителем

Группа чекбоксов вертикальная с раздилителем


Использовать
<div class="dopolnitelno">
<h4>Группа чекбоксов вертикальная</h4>
<label><input type="checkbox"><span>Начального уровня</span></label>
<label><input type="checkbox"><span>Классическая</span></label>
<label><input type="checkbox"><span>Мнгновенного выпуска</span></label>
<label><input type="checkbox"><span>Премиальная</span></label>
</div>

Группа чекбоксов вертикальная

Использовать
<div class="checkleft">
<h4>Группа чекбоксов вертикальная</h4>
<label><input type="checkbox"><span>Офисы</span></label>
<label><input type="checkbox"><span>Банкоматы</span></label>
<label><input type="checkbox"><span>Инфокиоски</span></label>
<label><input type="checkbox"><span>Точки продаж</span></label>
</div>

Группа чекбоксов вертикальная

Использовать
<div class="selectclear">
<label for="">Группа радиокнопок вертикальная</label>
<div class="poruchitelstvo">
<label class=""><input type="radio" name="money"> <span>Рубли</span></label>
<label class=""><input type="radio" name="money"> <span>Доллары</span></label>
<label class="noa"><input type="radio" name="money"> <span>Евро</span></label>
</div>
</div>

Группа радиокнопок вертикальная

Использовать
<div class="poruchitelstvo">
<h4>Группа радиокнопок горизонтальная</h4>
<label><input type="radio" name="money"> <span>Рубли</span></label>
<label><input type="radio" name="money"> <span>Доллары</span></label>
<label><input type="radio" name="money"> <span>Евро</span></label>
</div>

Группа радиокнопок горизонтальная

Использовать
<p><strong>Область ввода текста</strong></p>
<textarea name="comment" cols="80" rows="5"></textarea>

Область ввода текста



10.2 Секция формы

Использовать
<div class="formsection">
<h4>Название секции</h4>
<form action="">
<div class="selectclear">
<label for="">Область ввода текста</label>
<input type="text">
</div>
<div class="selectclear">
<label for="">Область ввода текста</label>
<input type="text">
</div>
<button>Отправить</button>
</form>
</div>

Название секции

10.3 Состояние полей форм

Использовать
<div class="selectclear">
<label for="">Корректно заполненное поле</label>
<input type="text" value="Иванов">
<span class="comfirmform"></span>
</div>

Использовать
<div class="selectclear">
<label for="">Ошибка</label>
<input type="text" class="errortext">
<span class="errorform">Поле обязательно для заполнения</span>
</div>

Поле обязательно для заполнения

Использовать
<div class="selectclear">
<label for="">Форма ввода пароля</label>
<input type="password">
<span class="passform"></span>
</div>

11. Кнопки

Обычная кнопка

Использовать <button>Отправить</button>


Не активная кнопка

Использовать <button class="noactive">Отправить</button>


Кнопка с иконкой

Использовать <a href="" class="imgico">Связаться с нами</a>

Связаться с нами

12. Иконки и уведомления

12.1 Иконки документов

Использовать
<a href="/download/file.doc" class="hrefimages">Текст...<br>размер файла</a>
<a href="/download/file.zip" class="hrefimages">Текст...<br>размер файла</a>
<a href="/download/file.xlsx" class="hrefimages">Текст...<br>размер файла</a>
<a href="/download/file.pdf" class="hrefimages">Текст...<br>размер файла</a>

ЗАЯВЛЕНИЕ-АНКЕТА на предоставления кредита/предоставления поручительства в ПАО «АК БАРС» БАНК
509 Кбайт
ЗАЯВЛЕНИЕ-АНКЕТА на предоставления кредита/предоставления поручительства в ПАО «АК БАРС» БАНК
509 Кбайт
ЗАЯВЛЕНИЕ-АНКЕТА на предоставления кредита/предоставления поручительства в ПАО «АК БАРС» БАНК
509 Кбайт
ЗАЯВЛЕНИЕ-АНКЕТА на предоставления кредита/предоставления поручительства в ПАО «АК БАРС» БАНК
509 Кбайт
ЗАЯВЛЕНИЕ-АНКЕТА на предоставления кредита/предоставления поручительства в ПАО «АК БАРС» БАНК
509 Кбайт
ЗАЯВЛЕНИЕ-АНКЕТА на предоставления кредита/предоставления поручительства в ПАО «АК БАРС» БАНК
509 Кбайт
ЗАЯВЛЕНИЕ-АНКЕТА на предоставления кредита/предоставления поручительства в ПАО «АК БАРС» БАНК
509 Кбайт
ЗАЯВЛЕНИЕ-АНКЕТА на предоставления кредита/предоставления поручительства в ПАО «АК БАРС» БАНК
509 Кбайт


12.2 Служебные сообщения

Использовать
<p class="bluequest">текст...</p>
<p class="redquest">текст...</p>
<p class="greenquest">текст...</p>
<p class="orangequest">текст...</p>

Все операции в Банке совершаются при наличии документа, удостоверяющего личность.

Все операции в Банке совершаются при наличии документа, удостоверяющего личность.

Все операции в Банке совершаются при наличии документа, удостоверяющего личность.

Все операции в Банке совершаются при наличии документа, удостоверяющего личность.



12.3 Служебные сообщения

13. Цветовая схема

Использовать (Для изменения цвета текста)
<селектор class="text-black">Текст...</span><br>
<селектор class="text-grey">Текст...</span><br>
<селектор class="text-light-grey">Текст...</span><br>
<селектор class="text-green">Текст...</span><br>
<селектор class="text-blue">Текст...</span><br>
<селектор class="text-red">Текст...</span><br>
<селектор class="text-orange">Текст...</span><br>
<селектор class="text-light-orange">Текст...</span><br>

Lorem ipsum dolor.
Lorem ipsum dolor.
Lorem ipsum dolor.
Lorem ipsum dolor.
Lorem ipsum dolor.
Lorem ipsum dolor.
Lorem ipsum dolor.
Lorem ipsum dolor.


Использовать (Для цвета фона блока)
<селектор class="block-black"></div>
<селектор class="block-grey"></div>
<селектор class="block-light-grey"></div>
<селектор class="block-green"></div>
<селектор class="block-blue"></div>
<селектор class="block-red"></div>
<селектор class="block-orange"></div>
<селектор class="block-light-orange"></div>
<селектор class="block-2light-grey"></div>
<селектор class="block-light-green"></div>












виды доп. блоков

1

Content for class "whitecloud" Goes Here

2

Content for class "border-gray" Goes Here

3

Content for class "border-grey" Goes Here

4

Content for class "border-greylight pad-20" Goes Here

5

Content for class "bordergrey" Goes Here

6

Content for class "bordergreen" Goes Here

7

Content for class "borderbot" Goes Here

8

Content for class "borderbot1" Goes Here

9

Content for class "bordertop" Goes Here

10

Content for class "block-shadowmini block-2light-grey pad-20" Goes Here

14. Таблицы

Использовать
<table width="200" class="tableblock tableborder">
<tbody>
<thead>
<tr>
<th width="26%"></th>
<th width="37%">Покупка</th>
<th width="37%">Продажа</th>
</tr>
</thead>
<tr>
<td>USD</td>
<td>32,06</td>
<td>32,06</td>
</tr>
<tr>
<td>EUR</td>
<td>43,74</td>
<td>43,74</td>
</tr>
<tr>
<td>GBR</td>
<td>51,99</td>
<td>51,99</td>
</tr>
<tr>
<td>CHF</td>
<td>35,80</td>
<td>35,80</td>
</tr>
<tr>
<td>CHY</td>
<td>46,85</td>
<td>46,85</td>
</tr>
</tbody>
</table>

Покупка Продажа
USD 32,06 32,06
EUR 43,74 43,74
GBR 51,99 51,99
CHF 35,80 35,80
CHY 46,85 46,85


14.2 Сравнительная таблица

Использовать
<div class="div-table potreb-credit-table">
<div class="div-tr tablenamehide">
<div class="div-th">Сумма кредита</div>
<div class="div-th">Процентная ставка</div>
<div class="div-th">Срок кредита</div>
<div class="div-th">Обеспечение кредита</div>
</div>
<div class="div-tr">
<div class="div-tr full-tr">
<h4><a href="">Потребительский кредит</a></h4><a href="" class="dottedPlus"><span>Добавить к сравнению</span></a>
</div>
<div class="div-td-all">
<div class="div-td"><span class="tdnameMobile">Сумма кредита</span>от 10 тыс.<br>до 3 млн. рублей</div>
<div class="div-td"><span class="tdnameMobile">Процентная ставка</span>от 15,9% в рублях<br>от 11,9% в долларах/евро<br><br>скидка 0,3%<br>при оформлении кредита с целью<br>строительства индивидуального<br>жилого дома</div>
<div class="div-td"><span class="tdnameMobile">Срок кредита</span>до 5 лет</div>
<div class="div-td"><span class="tdnameMobile">Обеспечение кредита</span>поручительство или<br>залог / без<br>обеспечения</div>
</div>
</div>
<div class="div-tr">
<div class="div-tr full-tr">
<h4><a href="">«Льготный»</a></h4><a href="" class="dottedPlus"><span>Добавить к сравнению</span></a>
</div>
<div class="div-td-all">
<div class="div-td"><span class="tdnameMobile">Сумма кредита</span>от 10 тыс.<br>до 3 млн. рублей</div>
<div class="div-td"><span class="tdnameMobile">Процентная ставка</span>от 14,9% в рублях<br>от 10,9% в долларах/евро</div>
<div class="div-td"><span class="tdnameMobile">Срок кредита</span>до 7 лет</div>
<div class="div-td"><span class="tdnameMobile">Обеспечение кредита</span>поручительство или<br>залог / без<br>обеспечения</div>
</div>
</div>
<div class="div-tr">
<div class="div-tr full-tr">
<h4><a href="">«Ак Барс - Спринт»</a></h4><a href="" class="dottedPlus"><span>Добавить к сравнению</span></a>
</div>
<div class="div-td-all">
<div class="div-td"><span class="tdnameMobile">Сумма кредита</span>от 10 тыс.<br>до 500 тыс. рублей</div>
<div class="div-td"><span class="tdnameMobile">Процентная ставка</span>от 23,9% в рублях</div>
<div class="div-td"><span class="tdnameMobile">Срок кредита</span>до 3 лет</div>
<div class="div-td"><span class="tdnameMobile">Обеспечение кредита</span>без обеспечения</div>
</div>
</div>
</div>

Сумма кредита
Процентная ставка
Срок кредита
Обеспечение кредита
Сумма кредитаот 10 тыс.
до 3 млн. рублей
Процентная ставкаот 15,9% в рублях
от 11,9% в долларах/евро

скидка 0,3%
при оформлении кредита с целью
строительства индивидуального
жилого дома
Срок кредитадо 5 лет
Обеспечение кредитапоручительство или
залог / без
обеспечения
Сумма кредитаот 10 тыс.
до 3 млн. рублей
Процентная ставкаот 14,9% в рублях
от 10,9% в долларах/евро
Срок кредитадо 7 лет
Обеспечение кредитапоручительство или
залог / без
обеспечения
Сумма кредитаот 10 тыс.
до 500 тыс. рублей
Процентная ставкаот 23,9% в рублях
Срок кредитадо 3 лет
Обеспечение кредитабез обеспечения

14.3 Обычная табличка

Использовать
<table class="tabl">
<tbody>
<tr><th>Средства</th><th>Доля</th></tr>
<tr><td>Сумма активов </td><td>36,5%</td></tr>
<tr><td>Собственные средства </td><td>45,2%</td></tr>
<tr><td>Привлеченные средства </td><td>38,9%</td></tr>
<tr><td>Выданные кредиты </td><td>31,5%</td></tr>
</tbody>
</table>

СредстваДоля
Сумма активов 36,5%
Собственные средства 45,2%
Привлеченные средства 38,9%
Выданные кредиты 31,5%

14.4 Таблица с скролом

Использовать
<table class="flip-scroll" id="flip-scroll">
<thead class="cf">
<tr>
<th>Code</th>
<th>Company</th>
<th>Price</th>
<th>Change</th>
<th>Change %</th>
<th>Open</th>
<th>High</th>
<th>Low</th>
<th>Volume</th>
</tr>
</thead>
<tbody>
<tr>
<td>AAC</td>
<td>AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
<td>$1.38</td>
<td>-0.01</td>
<td>-0.36%</td>
<td>$1.39</td>
<td>$1.39</td>
<td>$1.38</td>
<td>9,395</td>
</tr>
<tr>
<td>AAD</td>
<td>ARDENT LEISURE GROUP</td>
<td>$1.15</td>
<td> +0.02</td>
<td>1.32%</td>
<td>$1.14</td>
<td>$1.15</td>
<td>$1.13</td>
<td>56,431</td>
</tr>
<tr>
<td>AAX</td>
<td>AUSENCO LIMITED</td>
<td>$4.00</td>
<td>-0.04</td>
<td>-0.99%</td>
<td>$4.01</td>
<td>$4.05</td>
<td>$4.00</td>
<td>90,641</td>
</tr>
<tr>
<td>ABC</td>
<td>ADELAIDE BRIGHTON LIMITED</td>
<td>$3.00</td>
<td> +0.06</td>
<td>2.04%</td>
<td>$2.98</td>
<td>$3.00</td>
<td>$2.96</td>
<td>862,518</td>
</tr>
<tr>
<td>ABP</td>
<td>ABACUS PROPERTY GROUP</td>
<td>$1.91</td>
<td>0.00</td>
<td>0.00%</td>
<td>$1.92</td>
<td>$1.93</td>
<td>$1.90</td>
<td>595,701</td>
</tr>
</tbody>
</table>

Code Company Price Change Change % Open High Low Volume
AAC AUSTRALIAN AGRICULTURAL COMPANY LIMITED. $1.38 -0.01 -0.36% $1.39 $1.39 $1.38 9,395
AAD ARDENT LEISURE GROUP $1.15 +0.02 1.32% $1.14 $1.15 $1.13 56,431
AAX AUSENCO LIMITED $4.00 -0.04 -0.99% $4.01 $4.05 $4.00 90,641
ABC ADELAIDE BRIGHTON LIMITED $3.00 +0.06 2.04% $2.98 $3.00 $2.96 862,518
ABP ABACUS PROPERTY GROUP $1.91 0.00 0.00% $1.92 $1.93 $1.90 595,701

15. Стандартные элементы

15.1 Форма экспресс-заявки 1

Использовать
<div class="zajavka">
<div>
<h3>Вы можете оформить кредит<br>заполнив заявку</h3>
<form action="" class="callback">
<input class="txtcallback" type="text" placeholder="Ваше имя и фамилия">
<input class="txtcallback" type="text" placeholder="Контактный телефон">
<label class="fullform"><input type="checkbox"><span>Заполнить полную версию заявки</span></label>
<input type="submit" value="Отправить заявку">
<a href="" class="dotted"><span>Задать вопрос о продукте</span></a>
</form>
</div>
</div>

Вы можете оформить кредит
заполнив заявку

Задать вопрос о продукте


15.2 Форма экспресс-заявки 2

Использовать
<div class="zajavka zajavkaImg">
<img src="img/gerl1.png" alt="">
<div>
<h3>Вы можете оформить кредит<br>заполнив заявку</h3>
<form action="" class="callback">
<input class="txtcallback" type="text" placeholder="Ваше имя и фамилия">
<input class="txtcallback" type="text" placeholder="Контактный телефон">
<label class="fullform"><input type="checkbox"><span>Заполнить полную версию заявки</span></label>
<input type="submit" value="Отправить заявку">
<a href="" class="dotted"><span>Задать вопрос о продукте</span></a>
</form>
</div>
</div>

Вы можете оформить кредит
заполнив заявку

Задать вопрос о продукте

15.3 Форма экспресс-заявки 2

Использовать:
<div class="zajavka-full-img">
<div>
<h2>Контакты</h2>
<div class="colum2-50-50 border-bottom">
<div>
<a href="" class="oficeimg">Офисы, оказывающие данную услугу</a>
</div>
<div>
<a href="" class="bankomatimg">Банкоматы, оказывающие данную услугу</a>
</div>
</div>
<div class="colum2-50-50">
<div>
<h3 class="spravka">Единая справочная служба</h3>
<ul class="line">
<li>8-800-2005-303 (бесплатный звонок по России);</li>
<li>(843) 2-303-303 (в Казани).</li>
</ul>
</div>
<div>
<h3 class="contimg">Контакты в филиале:</h3>
<ul class="line">
<li>(8555) 42-07-01, 42-08-34</li>
</ul>
</div>
</div>
</div>
<div>
<div class="colum2-50-50 block-light-grey">
<div>
<img src="img/gerl1.png" alt="" class="img-zaj">
</div>
<div>
<h3>Вы можете оформить кредит<br>заполнив заявку</h3>
<form action="" class="callback">
<input class="txtcallback" type="text" placeholder="Ваше имя и фамилия">
<input class="txtcallback" type="text" placeholder="Контактный телефон">
<label class="fullform"><input type="checkbox"><span>Заполнить полную версию заявки</span></label>
<input type="submit" value="Отправить заявку">
<a href="" class="dotted"><span>Задать вопрос о продукте</span></a>
</form>
</div>
</div>
</div>
</div>

15.3.1 Контактная форма

Единая справочная служба

  • 8-800-2005-303 бесплатный звонок по России
  • (843) 2-303-303 в Казани

Отдел брокерского обслуживания

  • (843) 519-39-58

Управление продаж

  • (843) 519-39-58, 519-38-32
  • (843) 519-38-64, 523-81-46

15.4 Фильтр по параметрам

Использовать
<div class="wrapperinfoblock cardfilter">
<div class="infocreditblock" style="display: block;">
<div>
<h4>Фильтр банковских карт</h4>
<form action="">
<div class="dopolnitelno">
<div class="borderbot">
<h4>Валюта счета</h4>
<label><input type="checkbox"><span>Рубли</span></label>
<label><input type="checkbox"><span>Доллары</span></label>
<label><input type="checkbox"><span>Евро</span></label>
</div>
<div class="borderbot">
<h4>Платежная система</h4>
<label><input type="checkbox"><span>Visa</span></label>
<label><input type="checkbox"><span>Master Card</span></label>
</div>
<div class="borderbot">
<h4>Срок действия карты</h4>
<select name="" id="">
<option value="">не имеет значения</option>
<option value="">5 лет</option>
<option value="">10 лет</option>
</select>
</div>
<div class="borderbot">
<label><input type="checkbox"><span>Оформление карты в день обращения в банк</span></label>
</div>
</div>
<div class="dopolnitelno">
<div class="borderbot">
<h4>Статус карты</h4>
<label><input type="checkbox"><span>Начального уровня</span></label>
<label><input type="checkbox"><span>Классическая</span></label>
<label><input type="checkbox"><span>Мнгновенного выпуска</span></label>
<label><input type="checkbox"><span>Премиальная</span></label>
</div>
<div class="borderbot">
<h4>Особенности</h4>
<label><input type="checkbox"><span>Возможность оформления кредита на карту</span></label>
<label><input type="checkbox"><span>Бесконтактная оплата покупок</span></label>
<label><input type="checkbox"><span>Оплата проезда в общественном транспорте</span></label>
</div>
</div>
<div class="dopolnitelno wauto">
<div class="borderbot">
<h4>Статус карты</h4>
<label><input type="checkbox"><span>«Друг компании»</span></label>
<label><input type="checkbox"><span>Логотип универсиады</span></label>
<label><input type="checkbox"><span>Моя семья</span></label>
<label><input type="checkbox"><span>Абонемент на матчи «ФК Рубин»</span></label>
<label><input type="checkbox"><span>ХК «Ак Барс» с абонементным приложением</span></label>
<label><input type="checkbox"><span>С возможностью записи билетов на матчи «ХК Ак Барс»</span></label>
<label><input type="checkbox"><span>«Твори Добро»</span></label>
<label><input type="checkbox"><span>PayPhone</span></label>
<label><input type="checkbox"><span>ИнтерКама</span></label>
</div>
</div>
<div class="clear"></div>
<div>
<input type="submit" value="Применить" class="calcfullbut">
<a href="" class="dotted"><span>Очистить параметры</span></a>
<a href="" class="dotted"><span>Скрыть</span></a>
</div>
</form>
</div>
</div>
</div>

Фильтр банковских карт

Валюта счета

Платежная система

Срок действия карты

Статус карты

Особенности

Статус карты



15.5 Блок опросов

Использовать
<div class="userquest">
<div class="width50 left">
<div class="rashetspravka-step2">
<div class="dopolnitelno">
<h4>Уточните причину:</h4>
<label><input type="checkbox"><span>Информация не по теме</span></label>
<label><input type="checkbox"><span>Недостаточно информации</span></label>
<label><input type="checkbox"><span>Сложно или непонятно написано</span></label>
<label><input type="checkbox"><span>Слишком много материала</span></label>
<label><input type="checkbox"><span>Информация недостоверна</span></label>
<br>
<h4>Другие замечания</h4>
<textarea name="comment" cols="60" rows="4"></textarea>
<button class="step2-send">Отправить</button>
</div>
</div>
<div class="rashetspravka">
<p>Была ли полезна информация на странице?</p>
<button>Да</button><button>Отчасти</button><button class="step2">Нет</button>
</div>
</div>
<div class="width50 left">
<div class="subscribe">
<a href="">Подписаться на почтовую рассылку по кредитам</a>
</div>
</div>
</div>

Уточните причину:


Другие замечания

Была ли полезна информация на странице?



16. Сетка сайта

16.1 Двухколоночная верстка (50-50)

Использовать
<div class="colum2-50-50">
<div>
Колонка 1
</div>
<div>
Колонка 2
</div>
</div>









16.2 Двухколоночная верстка (75-25)

Использовать
<div class="colum2-75-25">
<div>
Колонка 1
</div>
<div>
Колонка 2
</div>
</div>









16.3 Двухколоночная верстка (20-80)

Использовать
<div class="colum2-20-80">
<div>
Колонка 1
</div>
<div>
Колонка 2
</div>
</div>









16.4 Двухколоночная верстка (70-30)

Использовать
<div class="colum2-70-30">
<div>
Колонка 1
</div>
<div>
Колонка 2
</div>
</div>









16.5 Четырехколоночная верстка

Использовать
<div class="colum4-25">
<div>
Колонка 1
</div>
<div>
Колонка 2
</div>
<div>
Колонка 3
</div>
<div>
Колонка 4
</div>
</div>

















16.6 Двухколоночная верстка (30-70)

Использовать
<div class="colum2-30-70">
<div>
Блок1
</div>
<div>
Блок2
</div>
</div>









16.7 Трехколоночная верстка













16 Блок новости

Использовать:
<ul class='newslist'>
<li>
<time>1 февраля 2014</time>
<h2><a hreff="">«АК БАРС – Аукцион» поможет обеспечить заявку на участие в конкурсе по размещению госзаказа</a></h2>
<p>Если Вы участвуете в аукционах и конкурсах на право заключения государственных контрактов, то для качественного и своевременного исполнения контракта ПАО «АК БАРС» БАНК предлагает наиболее выгодный продукт - «АК БАРС – Аукцион»</p>
</li>
<li>
<time>1 февраля 2014</time>
<h2><a hreff="">«АК БАРС – Аукцион» поможет обеспечить заявку на участие в конкурсе по размещению госзаказа</a></h2>
<p>Если Вы участвуете в аукционах и конкурсах на право заключения государственных контрактов, то для качественного и своевременного исполнения контракта ПАО «АК БАРС» БАНК предлагает наиболее выгодный продукт - «АК БАРС – Аукцион»</p>
</li>
<li>
<time>1 февраля 2014</time>
<h2><a hreff="">«АК БАРС – Аукцион» поможет обеспечить заявку на участие в конкурсе по размещению госзаказа</a></h2>
<p>Если Вы участвуете в аукционах и конкурсах на право заключения государственных контрактов, то для качественного и своевременного исполнения контракта ПАО «АК БАРС» БАНК предлагает наиболее выгодный продукт - «АК БАРС – Аукцион»</p>
</li>
</ul>

17 Кликабельне картинки

Использовать:
<ul class="pictures">
<li class="sliderImgBlock"><a href="img/license/license.jpg"><img src="img/license/licensesmall.jpg" alt=""></a></li>
<li class="sliderImgBlock"><a href="img/license/license.jpg"><img src="img/license/licensesmall.jpg" alt=""></a></li>
<li class="sliderImgBlock"><a href="img/license/license.jpg"><img src="img/license/licensesmall.jpg" alt=""></a></li>
<li class="sliderImgBlock"><a href="img/license/license.jpg"><img src="img/license/licensesmall.jpg" alt=""></a></li>
</ul>

18Drag & Drop зона

Использовать:
<div class="drag-drop">
<h2>Переместите файл резюме в это поле</h2>
<h3>
Предпочтительно в форматах MS Word, PDF или TXT </h3>
</div>

Переместите файл резюме в это поле

Предпочтительно в форматах MS Word, PDF или TXT

17 Сообщение о устаревшем браузере

Использовать:
<div class="oldbrouse">
<div class="colum2-50-50">
<div>
<h2 class="text-blue">ВНИМАНИЕ! Вы используете устаревший браузер Internet Explorer</h2>
<span>Чтобы использовать все возможности сайта, загрузите и установите один из современных браузеров. Это бесплатно и займет всего несколько минут.</span>
</div>
<div>
<div class="colum4-25 text-center">
<div>
<a href=""><img src="img/firefox.png" alt="">Firefox</a>
</div>
<div>
<a href=""><img src="img/chrome.png" alt="">Chrome</a>
</div>
<div>
<a href=""><img src="img/safari.png" alt="">Safari</a>
</div>
<div>
<a href=""><img src="img/opera.png" alt="">Opera</a>
</div>
</div>

ВНИМАНИЕ! Вы используете устаревший браузер Internet Explorer

Чтобы использовать все возможности сайта, загрузите и установите один из современных браузеров. Это бесплатно и займет всего несколько минут.

Иконки для ключевых параметров

vklad1

yearservices

credlim

moneys

totalmoneu

time

poruchitel

procent

minplat

cardico

vklad2

vklad3

vklad4

vklad5

vklad6

vklad7

vklad8

vklad9

vklad10

celi

Уточните причину:


Отменить

Была ли полезна информация на странице?