/home/bdqbpbxa/demo-subdomains/billine.goodface.com.ua/ui-kit.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<title>bill_line - UI Kit</title>
<!-- TODO: Delete noindex on production -->
<meta name="robots" content="noindex" />
<meta name="googlebot" content="noindex" />
<!-- Mobile -->
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<meta name="format-detection" content="telephone=no" />
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="css/compose.css" />
<!-- Favicon -->
<link
rel="apple-touch-icon"
sizes="180x180"
href="images/favicon/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="images/favicon/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="images/favicon/favicon-16x16.png"
/>
<!-- <link rel="manifest" href="images/favicon/site.webmanifest" />-->
<link
rel="mask-icon"
href="images/favicon/safari-pinned-tab.svg"
color="#9680ff"
/>
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="theme-color" content="#ffffff" />
<!-- Opengraph -->
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:type" content="website" />
<meta property="og:image:type" content="images/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://billline.net" />
<meta property="og:site_name" content="BilLine" />
<meta property="og:title" content="UI Kit" />
<meta property="og:description" content="UI Kit" />
<meta property="og:image" content="images/opengraph.png" />
</head>
<body>
<hr style="margin: 50px 0" />
<!-- Text -->
<p class="title-1">Title_1</p>
<p class="title-2">Title_2</p>
<p class="title-3">Title_3</p>
<p class="title-4">Title_4</p>
<p class="title-5">Title_5</p>
<p class="subtitle-1">Subtitle_1</p>
<p class="subtitle-2">Subtitle_2</p>
<p class="text-1">Text_1</p>
<p class="text-2">Text_2</p>
<p class="text-3">Text_3</p>
<p class="text-4">Text_4</p>
<p class="--medium-text">Medium_text</p>
<p class="--bold-text">Bold_text</p>
<p class="--caption-text">Caption_text</p>
<p class="--caps-text">Caps_text</p>
<hr style="margin: 50px 0" />
<!-- Icons -->
<div style="display: flex; flex-wrap: wrap">
<img src="images/icons/arrow-left.svg" alt="" />
<img src="images/icons/arrow-right.svg" alt="" />
<img src="images/icons/caret-left.svg" alt="" />
<img src="images/icons/caret-right.svg" alt="" />
<img src="images/icons/monitor.svg" alt="" />
<img src="images/icons/caret-down.svg" alt="" />
<img src="images/icons/caret-up.svg" alt="" />
<img src="images/icons/currency-circle-dollar.svg" alt="" />
<img src="images/icons/timer.svg" alt="" />
<img src="images/icons/selection-plus.svg" alt="" />
<img src="images/icons/smiley-wink.svg" alt="" />
<img src="images/icons/lock.svg" alt="" />
<img src="images/icons/vault.svg" alt="" />
<img src="images/icons/shield-check.svg" alt="" />
<img src="images/icons/envelope.svg" alt="" />
<img src="images/icons/clock-clockwise.svg" alt="" />
<img src="images/icons/calendar-check.svg" alt="" />
<img src="images/icons/arrows-left-right.svg" alt="" />
<img src="images/icons/shuffle-angular.svg" alt="" />
<img src="images/icons/link-simple.svg" alt="" />
<img src="images/icons/check.svg" alt="" />
<img src="images/icons/x.svg" alt="" />
<img src="images/icons/paperclip.svg" alt="" />
<img src="images/icons/paperclip-16.svg" alt="" />
<img src="images/icons/file.svg" alt="" />
<img src="images/icons/x-circle.svg" alt="" />
<img src="images/icons/image.svg" alt="" />
<img src="images/icons/headset.svg" alt="" />
<img src="images/icons/chat-text.svg" alt="" />
<img src="images/icons/bag-simple.svg" alt="" />
<img src="images/icons/map-pin.svg" alt="" />
<img src="images/icons/phone.svg" alt="" />
<img src="images/icons/phone-16.svg" alt="" />
<img src="images/icons/globe.svg" alt="" />
<img src="images/icons/check-circle.svg" alt="" />
<img src="images/icons/circle-dashed.svg" alt="" />
<img src="images/icons/arrow-clockwise.svg" alt="" />
<img src="images/icons/facebook.svg" alt="Facebook - bill_line.com" />
<img src="images/icons/instagram.svg" alt="Instagram - bill_line.com" />
<img src="images/icons/linkedin.svg" alt="LinkedIn - bill_line.com" />
</div>
<hr style="margin: 50px 0" />
<!-- Buttons -->
<!-- Default buttons -->
<button class="default-button">
<p data-hover-text="Transparent_button">Transparent_button</p>
</button>
<button class="default-button -disabled" tabindex="-1">
<p data-hover-text="Disabled_transparent_button">
Disabled_transparent_button
</p>
</button>
<button class="default-button">
<span class="default-button__arrow"></span>
<p data-hover-text="Transparent_button_with_left_arrow">
Transparent_button_with_left_arrow
</p>
</button>
<button class="default-button -disabled" tabindex="-1">
<span class="default-button__arrow"></span>
<p data-hover-text="Disabled_transparent_button_with_left_arrow">
Disabled_transparent_button_with_left_arrow
</p>
</button>
<button class="default-button">
<p data-hover-text="Transparent_button_with_right_arrow">
Transparent_button_with_right_arrow
</p>
<span class="default-button__arrow"></span>
</button>
<button class="default-button -disabled" tabindex="-1">
<p data-hover-text="Disabled_transparent_button_with_right_arrow">
Disabled_transparent_button_with_right_arrow
</p>
<span class="default-button__arrow"></span>
</button>
<hr style="margin: 50px 0" />
<!-- White buttons -->
<button class="default-button -shadow -white">
<p>White_button</p>
</button>
<button class="default-button -shadow -white -disabled" tabindex="-1">
<p>Disabled_white_button</p>
</button>
<button class="default-button -shadow -white">
<span class="default-button__arrow"></span>
<p>White_button_with_left_arrow</p>
</button>
<button class="default-button -shadow -white -disabled" tabindex="-1">
<span class="default-button__arrow"></span>
<p>Disabled_white_button_with_left_arrow</p>
</button>
<button class="default-button -shadow -white">
<p>White_button_with_right_arrow</p>
<span class="default-button__arrow"></span>
</button>
<button class="default-button -shadow -white -disabled" tabindex="-1">
<p>Disabled_white_button_with_right_arrow</p>
<span class="default-button__arrow"></span>
</button>
<hr style="margin: 50px 0" />
<!-- Black buttons -->
<button class="default-button -shadow -black">
<p>Black_button</p>
</button>
<button class="default-button -shadow -black -disabled" tabindex="-1">
<p>Disabled_black_button</p>
</button>
<button class="default-button -shadow -black">
<span class="default-button__arrow"></span>
<p>Black_button_with_left_arrow</p>
</button>
<button class="default-button -shadow -black -disabled" tabindex="-1">
<span class="default-button__arrow"></span>
<p>Disabled_black_button_with_left_arrow</p>
</button>
<button class="default-button -shadow -black">
<p>Black_button_with_right_arrow</p>
<span class="default-button__arrow"></span>
</button>
<button class="default-button -shadow -black -disabled" tabindex="-1">
<p>Disabled_black_button_with_right_arrow</p>
<span class="default-button__arrow"></span>
</button>
<hr style="margin: 50px 0" />
<!-- Small default buttons -->
<button class="default-button -small">
<p data-hover-text="Small_button">Small_button</p>
</button>
<button class="default-button -small -disabled" tabindex="-1">
<p data-hover-text="Disabled_small_button">Disabled_small_button</p>
</button>
<button class="default-button -small">
<span class="default-button__arrow"></span>
<p data-hover-text="Small_button_with_left_arrow">
Small_button_with_left_arrow
</p>
</button>
<button class="default-button -small -disabled" tabindex="-1">
<span class="default-button__arrow"></span>
<p data-hover-text="Disabled_small_button_with_left_arrow">
Disabled_small_button_with_left_arrow
</p>
</button>
<button class="default-button -small">
<p data-hover-text="Small_button_with_right_arrow">
Small_button_with_right_arrow
</p>
<span class="default-button__arrow"></span>
</button>
<button class="default-button -small -disabled" tabindex="-1">
<p data-hover-text="Disabled_small_button_with_right_arrow">
Disabled_small_button_with_right_arrow
</p>
<span class="default-button__arrow"></span>
</button>
<hr style="margin: 50px 0" />
<!-- Small white buttons -->
<button class="default-button -small -shadow -white">
<p>Small_white_button</p>
</button>
<button
class="default-button -small -shadow -white -disabled"
tabindex="-1"
>
<p>Disabled_small_white_button</p>
</button>
<button class="default-button -small -shadow -white">
<span class="default-button__arrow"></span>
<p>Small_white_button_with_left_arrow</p>
</button>
<button
class="default-button -small -shadow -white -disabled"
tabindex="-1"
>
<span class="default-button__arrow"></span>
<p>Disabled_small_white_button_with_left_arrow</p>
</button>
<button class="default-button -small -shadow -white">
<p>Small_white_button_with_right_arrow</p>
<span class="default-button__arrow"></span>
</button>
<button
class="default-button -small -shadow -white -disabled"
tabindex="-1"
>
<p>Disabled_small_white_button_with_right_arrow</p>
<span class="default-button__arrow"></span>
</button>
<hr style="margin: 50px 0" />
<!-- Small black buttons -->
<button class="default-button -small -shadow -black">
<p>Small_black_button</p>
</button>
<button
class="default-button -small -shadow -black -disabled"
tabindex="-1"
>
<p>Disabled_small_black_button</p>
</button>
<button class="default-button -small -shadow -black">
<span class="default-button__arrow"></span>
<p>Small_black_button_with_left_arrow</p>
</button>
<button
class="default-button -small -shadow -black -disabled"
tabindex="-1"
>
<span class="default-button__arrow"></span>
<p>Disabled_small_black_button_with_left_arrow</p>
</button>
<button class="default-button -small -shadow -black">
<p>Small_black_button_with_right_arrow</p>
<span class="default-button__arrow"></span>
</button>
<button
class="default-button -small -shadow -black -disabled"
tabindex="-1"
>
<p>Disabled_small_black_button_with_right_arrow</p>
<span class="default-button__arrow"></span>
</button>
<hr style="margin: 50px 0" />
<!-- Social buttons -->
<a href="#" target="_blank" class="default-button -shadow -white -social">
<span
class="default-button__icon --mask-item"
style="
-webkit-mask-image: url(images/icons/facebook.svg);
mask-image: url(images/icons/facebook.svg);
"
></span>
</a>
<a
href="#"
target="_blank"
class="default-button -shadow -white -social -disabled"
tabindex="-1"
>
<span
class="default-button__icon --mask-item"
style="
-webkit-mask-image: url(images/icons/facebook.svg);
mask-image: url(images/icons/facebook.svg);
"
></span>
</a>
<a href="#" target="_blank" class="default-button -shadow -white -social">
<span
class="default-button__icon --mask-item"
style="
-webkit-mask-image: url(images/icons/instagram.svg);
mask-image: url(images/icons/instagram.svg);
"
></span>
</a>
<a
href="#"
target="_blank"
class="default-button -shadow -white -social -disabled"
tabindex="-1"
>
<span
class="default-button__icon --mask-item"
style="
-webkit-mask-image: url(images/icons/instagram.svg);
mask-image: url(images/icons/instagram.svg);
"
></span>
</a>
<a href="#" target="_blank" class="default-button -shadow -white -social">
<span
class="default-button__icon --mask-item"
style="
-webkit-mask-image: url(images/icons/linkedin.svg);
mask-image: url(images/icons/linkedin.svg);
"
></span>
</a>
<a
href="#"
target="_blank"
class="default-button -shadow -white -social -disabled"
tabindex="-1"
>
<span
class="default-button__icon --mask-item"
style="
-webkit-mask-image: url(images/icons/linkedin.svg);
mask-image: url(images/icons/linkedin.svg);
"
></span>
</a>
<hr style="margin: 50px 0" />
<!-- Form's elements -->
<div class="form">
<form>
<div class="input -input" data-important="not-empty">
<label>Ім’я та прізвище *</label>
<input type="text" />
<span
class="input__invalid"
data-correct-text="Перевірте правильність введених даних"
data-fill-text="Це поле є обов'язковим для заповнення"
>
</span>
</div>
<div class="input -input" data-important="email">
<label>Електронна пошта *</label>
<input type="text" />
<span
class="input__invalid"
data-correct-text="Перевірте правильність введених даних"
data-fill-text="Це поле є обов'язковим для заповнення"
></span>
</div>
<div class="input -input" data-important="inputmask">
<label>Номер телефону *</label>
<input type="text" class="--phone-mask" />
<span
class="input__invalid"
data-correct-text="Перевірте правильність введених даних"
data-fill-text="Це поле є обов'язковим для заповнення"
></span>
</div>
<div class="input -input">
<label>Короткий опис компанії</label>
<textarea class="-adaptive-height"></textarea>
</div>
<div class="input -file" data-important="file">
<label>
<p>Resume/CV *</p>
<span>.PDF файл, не більше 5 Мб</span>
</label>
<div class="input__box" tabindex="0">
<input type="file" size="5242880" accept="application/pdf" />
<div
class="input__file-button default-button -small -shadow -white"
>
<span
class="default-button__icon --mask-item"
style="
-webkit-mask-image: url(images/icons/paperclip.svg);
mask-image: url(images/icons/paperclip.svg);
"
></span>
<p>Прикріпити файл</p>
</div>
<div class="input__file-info">
<div class="file-info__left">
<span
class="file-info__icon --mask-item"
style="
-webkit-mask-image: url(images/icons/file.svg);
mask-image: url(images/icons/file.svg);
"
></span>
<div class="file-info__info-box">
<p></p>
<span data-unit="Мб"></span>
</div>
</div>
<span
class="file-info__remove-icon --mask-item"
style="
-webkit-mask-image: url(images/icons/x-circle.svg);
mask-image: url(images/icons/x-circle.svg);
"
></span>
</div>
</div>
<span
class="input__invalid"
data-correct-text="Перевірте правильність введених даних"
data-fill-text="Це поле є обов'язковим для заповнення"
></span>
</div>
<div class="checkbox --checkbox" data-important="checked">
<input type="checkbox" checked />
<span class="checkbox__button"></span>
<p class="checkbox__text">
Я згоден, що я ознайомився(лась) з
<a href="#" target="_blank" class="default-link --gradient-hover">
Політикою конфіденційності
</a>
та приймаю її
</p>
</div>
<button class="default-button -shadow -black">
<p>Надіслати заявку</p>
</button>
</form>
</div>
<hr style="margin: 50px 0" />
<!-- Links -->
<a href="#" class="default-link"> Default_link </a>
<div style="background-color: var(--shades-600)">
<a href="#" class="default-link --white-text"> Default_link </a>
</div>
<hr style="margin: 50px 0" />
<!-- Dropdown -->
<div style="display: flex; padding-left: 10px">
<div
class="
localization-dropdown
--dropdown
text-2
--medium-text
--caps-text
"
>
<div class="--dropdown__value">
<span
class="localization-dropdown__icon --mask-item --gradient-hover"
style="
-webkit-mask-image: url(images/icons/globe.svg);
mask-image: url(images/icons/globe.svg);
"
></span>
<p class="--gradient-hover">Укр</p>
</div>
<div class="--dropdown__list">
<a href="#" class="--dropdown__list-item --gradient-hover"> Укр </a>
<a href="#" class="--dropdown__list-item --gradient-hover"> Рус </a>
<a href="#" class="--dropdown__list-item --gradient-hover"> Eng </a>
</div>
</div>
<div
class="
localization-dropdown
--dropdown
text-2
--medium-text
--caps-text
-up
"
>
<div class="--dropdown__value">
<span
class="localization-dropdown__icon --mask-item --gradient-hover"
style="
-webkit-mask-image: url(images/icons/globe.svg);
mask-image: url(images/icons/globe.svg);
"
></span>
<p class="--gradient-hover">Укр</p>
</div>
<div class="--dropdown__list">
<a href="#" class="--dropdown__list-item --gradient-hover"> Укр </a>
<a href="#" class="--dropdown__list-item --gradient-hover"> Рус </a>
<a href="#" class="--dropdown__list-item --gradient-hover"> Eng </a>
</div>
</div>
<div
class="
localization-dropdown
--dropdown
text-2
--medium-text
--caps-text
"
>
<div class="--dropdown__value">
<span
class="localization-dropdown__icon --mask-item --gradient-hover"
style="
-webkit-mask-image: url(images/icons/globe.svg);
mask-image: url(images/icons/globe.svg);
"
></span>
<p class="--gradient-hover">Укр</p>
<span
class="localization-dropdown__arrow --mask-item --gradient-hover"
style="
-webkit-mask-image: url(images/icons/caret-down.svg);
mask-image: url(images/icons/caret-down.svg);
"
></span>
</div>
<div class="--dropdown__list">
<a href="#" class="--dropdown__list-item --gradient-hover"> Укр </a>
<a href="#" class="--dropdown__list-item --gradient-hover"> Рус </a>
<a href="#" class="--dropdown__list-item --gradient-hover"> Eng </a>
</div>
</div>
<div
class="
localization-dropdown
--dropdown
text-2
--medium-text
--caps-text
-up
"
>
<div class="--dropdown__value">
<span
class="localization-dropdown__icon --mask-item --gradient-hover"
style="
-webkit-mask-image: url(images/icons/globe.svg);
mask-image: url(images/icons/globe.svg);
"
></span>
<p class="--gradient-hover">Укр</p>
<span
class="localization-dropdown__arrow --mask-item --gradient-hover"
style="
-webkit-mask-image: url(images/icons/caret-down.svg);
mask-image: url(images/icons/caret-down.svg);
"
></span>
</div>
<div class="--dropdown__list">
<a href="#" class="--dropdown__list-item --gradient-hover"> Укр </a>
<a href="#" class="--dropdown__list-item --gradient-hover"> Рус </a>
<a href="#" class="--dropdown__list-item --gradient-hover"> Eng </a>
</div>
</div>
</div>
<hr style="margin: 50px 0" />
<!-- Header -->
<header class="header">
<div class="container">
<div class="header-container">
<a href="index.html" class="header__logo">
<img src="images/logo-text.svg" alt="BillLine.com" />
</a>
<div class="header__menu">
<div
class="
localization-dropdown
--dropdown
text-2
--medium-text
--caps-text
"
>
<div class="--dropdown__value">
<span
class="
localization-dropdown__icon
--mask-item
--gradient-hover
"
style="
-webkit-mask-image: url(images/icons/globe.svg);
mask-image: url(images/icons/globe.svg);
"
></span>
<p class="--gradient-hover">Укр</p>
<span
class="
localization-dropdown__arrow
--mask-item
--gradient-hover
"
style="
-webkit-mask-image: url(images/icons/caret-down.svg);
mask-image: url(images/icons/caret-down.svg);
"
></span>
</div>
<div class="--dropdown__list">
<a href="#" class="--dropdown__list-item --gradient-hover">
Укр
</a>
<a href="#" class="--dropdown__list-item --gradient-hover">
Рус
</a>
<a href="#" class="--dropdown__list-item --gradient-hover">
Eng
</a>
</div>
</div>
<nav class="header__menu-nav text-2 --medium-text">
<a class="header__nav --gradient-hover" href="product.html">
Продукт
</a>
<a class="header__nav --gradient-hover" href="connect.html">
Підключення
</a>
<a class="header__nav --gradient-hover" href="api.html">API</a>
<a class="header__nav --gradient-hover" href="about.html">
Про компанію
</a>
<a class="header__nav --gradient-hover" href="contacts.html">
Контакти
</a>
</nav>
<div class="header__button-box">
<a href="#" target="_blank" class="default-button -small">
<p data-hover-text="Увійти">Увійти</p>
</a>
<a
href="https://cabinet.billline.net/register"
target="_blank"
class="default-button -small -shadow -black"
>
<p>Реєстрація</p>
<span class="default-button__arrow"></span>
</a>
</div>
</div>
<button
class="
header__open-menu-button
-small
default-button
-shadow
-white
"
>
<div></div>
<div></div>
<div></div>
</button>
</div>
</div>
</header>
<hr style="margin: 50px 0" />
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer__top">
<div class="footer__top-left">
<div class="footer__logo">
<img
class="-lazyload"
srcset="images/lazyload.png"
src="images/logo.svg"
alt="BillLine.com"
/>
</div>
<div class="footer__socials">
<a
href="#"
target="_blank"
class="default-button -shadow -white -social"
>
<span
class="default-button__icon --mask-item"
style="
-webkit-mask-image: url(images/icons/facebook.svg);
mask-image: url(images/icons/facebook.svg);
"
></span>
</a>
<a
href="#"
target="_blank"
class="default-button -shadow -white -social"
>
<span
class="default-button__icon --mask-item"
style="
-webkit-mask-image: url(images/icons/instagram.svg);
mask-image: url(images/icons/instagram.svg);
"
></span>
</a>
<a
href="#"
target="_blank"
class="default-button -shadow -white -social"
>
<span
class="default-button__icon --mask-item"
style="
-webkit-mask-image: url(images/icons/linkedin.svg);
mask-image: url(images/icons/linkedin.svg);
"
></span>
</a>
</div>
</div>
<div class="footer__top-right text-2 --medium-text">
<nav class="footer__nav-list">
<a class="footer__nav --gradient-hover" href="product.html">
Продукт
</a>
<a class="footer__nav --gradient-hover" href="connect.html">
Підключення
</a>
<a class="footer__nav --gradient-hover" href="api.html"> API </a>
<a class="footer__nav --gradient-hover" href="about.html">
Про компанію
</a>
<a class="footer__nav --gradient-hover" href="contacts.html">
Контакти
</a>
</nav>
<nav class="footer__nav-list">
<a
class="footer__nav --gradient-hover"
href="files/Вимоги%20(UA).pdf"
target="_blank"
>
Вимоги
</a>
<a
class="footer__nav --gradient-hover"
href="files/Политика конфиденциальности УКР.pdf"
target="_blank"
>
Полiтика конфiденцiйностi
</a>
<a class="footer__nav --gradient-hover" href="#" target="_blank">
Полiтика Cookie
</a>
<a
class="footer__nav --gradient-hover"
href="files/Политика AML УКР.pdf"
target="_blank"
>
Полiтика AML
</a>
</nav>
</div>
</div>
<div class="footer__bot">
<div class="footer__partners">
<img
class="-lazyload"
srcset="images/lazyload.png"
src="images/partners/pci-dss.svg"
alt="PCI DSS - BillLine.com"
/>
<img
class="-lazyload"
srcset="images/lazyload.png"
src="images/partners/visa.svg"
alt="VISA - BillLine.com"
/>
<img
class="-lazyload"
srcset="images/lazyload.png"
src="images/partners/mastercard.svg"
alt="Mastercard - BillLine.com"
/>
</div>
<p class="footer__copyright text-2 --medium-text">© bill_line 2022</p>
</div>
</div>
</footer>
<hr style="margin: 50px 0" />
<hr style="margin: 50px 0" />
<hr style="margin: 50px 0" />
<script src="js/lib/jquery-3.6.0.min.js"></script>
<script src="js/lib/jquery.inputmask.min.js"></script>
<script src="js/custom-solutions.js"></script>
<script src="js/script.js"></script>
<script src="js/test.js"></script>
</body>
</html>