/home/bdqbpbxa/demo-subdomains/magnetiq.goodface.com.ua/ui-kit.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>
UI kit
</title>
<!-- TODO: Set or remove page description -->
<meta charset="utf-8">
<meta name="description" content="Page description">
<!-- TODO: Delete noindex on production -->
<meta name="robots" content="noindex">
<meta name="googlebot" content="noindex">
<!-- TODO: Set absolute page URL -->
<link rel="canonical" href="https://sitename.com/page">
<!-- 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/lib/overlay-scrollbars.min.css">
<link rel="stylesheet" type="text/css" href="css/lib/swiper-bundle.min.css">
<link rel="stylesheet" type="text/css" href="css/lib/scroll-animations.css">
<link rel="stylesheet" type="text/css" href="css/lib/prism.css">
<link rel="stylesheet" type="text/css" href="css/ui-kit.css?ver=1.2.9">
<link rel="stylesheet" type="text/css" href="css/ui-blocks.css?ver=1.2.9">
<link rel="stylesheet" type="text/css" href="css/hovers.css?ver=1.2.9">
<link rel="stylesheet" type="text/css" href="css/styles.css?ver=1.2.9">
<link rel="stylesheet" type="text/css" href="css/adaptive.css?ver=1.2.9">
<!-- Generate favicon by https://realfavicongenerator.net/ -->
<!-- Opengraph -->
<!-- TODO: Add or remove 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://sitename.com">
<meta property="og:site_name" content="Company name">
<meta property="og:title" content="Page title">
<meta property="og:description" content="Page description">
<meta property="og:image" content="images/opengraph.png">
</head>
<body>
<script>
// Allow animations if JS support is enabled
document.body.classList.add('-allow-animations');
</script>
<style>
.ui-kit-wrapp {
padding: 200px 50px;
background: lavenderblush;
}
.text-wrapper {
display: flex;
flex-wrap: wrap;
gap: 50px;
}
.text-wrapper * {
display: block;
max-width: 30%;
}
.button-wrapp {
margin: 50px 0 0 0;
display: flex;
flex-wrap: wrap;
gap: 50px;
}
.card-wrapper {
margin: 50px 0 0 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 50px;
}
.card-wrapper-bigger {
margin: 50px 0 0 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.form-el-wrapper {
margin: 50px 0 0 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
align-items: flex-start;
}
.services {
margin: 50px 0 0 0;
}
</style>
<header class="header">
<div class="container">
<div class="header__wrapper">
<div class="header__wrapper-left">
<ul class="lang-changer body-4 mob-body-3">
<li class="lang -current">EN</li>
<li class="lang">LV</li>
</ul>
<a href="#" class="link-text link mob-link-text">About the bank</a>
</div>
<a href="." class="logo">
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 248 40">
<path
d="m246.017 25.983-4.973-7.163a.533.533 0 0 1 .073-.694L248 11.66h-4.547l-4.733 4.495-1.347 1.28a.322.322 0 0 1-.544-.236V11.66h-3.313V28.31h3.313v-5.466c0-.366.146-.715.406-.975l.779-.767a.537.537 0 0 1 .815.077l3.253 4.702.028.037 1.655 2.392h3.906l-1.642-2.327h-.012ZM227.126 11.661h-.333v11.073c0 .264-.353.354-.478.122l-5.371-9.814-.746-1.38h-4.145V28.31h3.314V17.236c0-.264.352-.357.478-.126a6850.57 6850.57 0 0 1 5.983 10.976c.012.024.028.04.04.061l.098.179h4.145V11.66h-2.985ZM207.974 11.694a.085.085 0 0 0-.078-.052h-3.338a.083.083 0 0 0-.077.052l-6.538 16.519c-.02.053.02.113.077.113h3.516a.08.08 0 0 0 .078-.052l1.022-2.798a.787.787 0 0 1 .742-.52h5.723c.325 0 .613.195.734.496l1.132 2.822a.083.083 0 0 0 .077.052h3.517c.056 0 .097-.06.077-.113l-6.664-16.519Zm.028 10.546h-3.663a.367.367 0 0 1-.345-.492l1.785-5.282c.118-.317.483-.321.605-.009l1.955 5.28a.368.368 0 0 1-.341.503h.004ZM196.63 21.252a4.46 4.46 0 0 0-1.562-1.352c.487-.272.917-.71 1.278-1.3.393-.645.592-1.31.592-1.977 0-.885-.203-1.718-.596-2.469a4.643 4.643 0 0 0-1.704-1.815c-.734-.45-1.574-.678-2.498-.678h-8.38V28.31h8.38c1.537 0 2.802-.463 3.76-1.373.965-.914 1.452-2.12 1.452-3.581 0-.748-.244-1.454-.718-2.1l-.004-.004Zm-9.565-6.225c0-.235.191-.426.426-.426h4.405c.556 0 .978.19 1.29.585.321.402.483.885.483 1.437 0 .475-.195.877-.596 1.222-.414.358-.86.54-1.351.56h-4.227a.425.425 0 0 1-.425-.426v-2.952h-.005Zm6.263 9.705c-.483.427-1.01.638-1.61.638h-4.227a.426.426 0 0 1-.426-.427v-3.167c0-.235.191-.426.426-.426h4.405c.58 0 1.071.203 1.501.617.426.414.637.869.637 1.385 0 .515-.231.958-.706 1.38ZM174.592 28.436l-1.785-2.079a.643.643 0 0 1-.02-.816c1.192-1.494 1.833-3.435 1.833-5.555 0-4.727-3.164-8.56-8.55-8.56-5.387 0-8.55 3.833-8.55 8.56 0 4.726 3.208 8.56 8.55 8.56 1.294 0 2.454-.228 3.476-.63a.909.909 0 0 1 1.026.256l.32.374s.041.028.061.028h3.574a.083.083 0 0 0 .061-.138h.004Zm-8.522-2.77c-3.29 0-5.269-2.545-5.269-5.684 0-3.139 2.024-5.685 5.269-5.685s5.269 2.546 5.269 5.685c0 1.035-.215 2.002-.617 2.834-.162.333-.62.378-.86.098l-.17-.2s-.041-.028-.061-.028h-3.573a.083.083 0 0 0-.061.138l1.671 1.95a.455.455 0 0 1-.243.738 5.697 5.697 0 0 1-1.347.159l-.008-.004ZM155.507 11.63h-3.127a.08.08 0 0 0-.081.081v16.523c0 .044.036.08.081.08h3.127a.081.081 0 0 0 .081-.08V11.71a.08.08 0 0 0-.081-.081ZM150.75 11.711a.082.082 0 0 0-.081-.081h-14.371a.081.081 0 0 0-.081.081v2.952c0 .045.036.081.081.081h5.05c.255 0 .462.256.462.573V28.23c0 .044.037.08.081.08h3.201a.082.082 0 0 0 .081-.08V15.317c0-.317.207-.573.462-.573h5.026a.082.082 0 0 0 .081-.08V11.71h.008ZM124.629 24.616v-2.62c0-.316.207-.572.463-.572h8.603a.082.082 0 0 0 .081-.081V18.63a.082.082 0 0 0-.081-.081h-8.603c-.256 0-.463-.256-.463-.573v-2.639c0-.317.207-.572.463-.572h9.609a.082.082 0 0 0 .081-.082v-2.956a.082.082 0 0 0-.081-.081h-13.28a.081.081 0 0 0-.081.081v16.519c0 .044.036.08.081.08h14.371a.082.082 0 0 0 .081-.08v-2.977a.082.082 0 0 0-.081-.081h-10.696c-.256 0-.463-.256-.463-.572h-.004ZM115.137 11.63a.082.082 0 0 0-.081.081v10.554c0 .345-.377.499-.555.231l-7.549-10.83a.089.089 0 0 0-.069-.036h-3.472a.082.082 0 0 0-.081.081V28.23c0 .045.037.082.081.082h3.127a.082.082 0 0 0 .082-.081V17.907c0-.345.421-.397.6-.134l7.536 10.505c.016.02.041.033.069.033h3.44a.082.082 0 0 0 .081-.081V11.71a.082.082 0 0 0-.081-.081h-3.128ZM100.934 19.474H92.53a.082.082 0 0 0-.082.086v2.55c0 .044.037.08.082.08h4.125c.32 0 .547.334.413.626-.774 1.73-2.433 2.855-4.664 2.855-3.29 0-5.27-2.546-5.27-5.685s2.025-5.685 5.27-5.685c2.255 0 3.894.922 4.689 2.912a.08.08 0 0 0 .077.052h3.297a.086.086 0 0 0 .081-.105c-.815-3.5-3.885-5.734-8.144-5.734-5.27 0-8.55 3.833-8.55 8.56 0 4.726 3.208 8.56 8.55 8.56 5.342 0 8.55-3.834 8.55-8.56 0-.317-.02-.512-.02-.512ZM81.034 28.315h3.517c.057 0 .097-.061.077-.114l-6.664-16.518a.083.083 0 0 0-.077-.053h-3.338a.083.083 0 0 0-.078.053L67.934 28.2c-.02.053.02.114.077.114h3.517a.08.08 0 0 0 .077-.053l1.022-2.798a.789.789 0 0 1 .742-.52h5.723a.79.79 0 0 1 .735.496l1.131 2.822a.083.083 0 0 0 .077.053Zm-6.705-6.087a.366.366 0 0 1-.344-.491l1.784-5.283c.118-.317.483-.32.605-.008l1.955 5.278a.367.367 0 0 1-.34.504h-3.664.004ZM61.2 11.63a.083.083 0 0 0-.081.065l-2.677 12.052c-.073.32-.507.296-.588 0l-2.722-12.052a.083.083 0 0 0-.081-.065h-5.155a.081.081 0 0 0-.081.081V28.23c0 .045.036.082.08.082h3.128a.081.081 0 0 0 .08-.081V18.15c0-.37.447-.442.54-.06l2.345 10.159c.008.036.04.065.081.065h4.157c.041 0 .074-.029.082-.065l2.295-10.16c.077-.345.54-.308.54.061V28.23c0 .044.036.08.08.08h3.173a.081.081 0 0 0 .08-.08V11.71a.081.081 0 0 0-.08-.081H61.2Z"
fill="#000" />
<g class="filled-part" fill="#000" data-change-color="#000,#00D180,#5100C0,#8396A8">
<path
d="M29.25 30c5.516 0 9.989-4.477 9.989-10s-4.473-10-9.99-10c-5.516 0-9.988 4.477-9.988 10s4.472 10 9.989 10Z" />
<path
d="M18.695 10.355H.569a.57.57 0 0 0-.569.57v18.146c0 .314.255.57.57.57h18.125a.57.57 0 0 0 .57-.57V10.925a.57.57 0 0 0-.57-.57Z" />
</g>
</svg>
</a>
<div class="header__wrapper-right">
<a href="#" class="link-text link mob-link-text mr-3">
<img src="images/icons/lock.svg" alt="">
Internet bank
</a>
<div class="link-text mob-link-text link menu-opener" data-change-text="Close">
<span class="text">Menu</span>
<span class="burger"></span>
</div>
</div>
</div>
</div>
<div class="header-hidden-menu">
<div class="container">
<div class="header-hidden-menu__top">
<div class="header-hidden-menu__top-left">
<ul class="lang-changer body-4 mob-body-3">
<li class="lang -current">EN</li>
<li class="lang">LV</li>
</ul>
<a href="mailto:info@Ipb.lv" class="link-text link mob-link-text">
<img src="images/icons/mail.svg" alt="">
info@Ipb.lv
</a>
<a href="tel:+37167772999" class="link-text link mob-link-text">
<img src="images/icons/phone.svg" alt="">
+371 67772999
</a>
</div>
<div class="header-hidden-menu__top-right">
<a href="#" class="link-text link mob-link-text">
<img src="images/icons/e-adress.png" alt="">
E-address
</a>
<a href="#" class="link-text link mob-link-text">
<img src="images/icons/lock.svg" alt="">
Internet bank
</a>
<div class="link-text mob-link-text link menu-opener">
<span class="text">Close</span>
<span class="burger"></span>
</div>
</div>
</div>
<div class="header-hidden-menu__bottom">
<div class="header-hidden-menu__inner">
<div class="search-input input link-text mob-link-text">
<div class="input__wrapper">
<button class="submit"></button>
<input type="text" placeholder="Type something to search...">
</div>
</div>
<div class="header-hidden-menu__inner-col">
<div class="--accordion header-accordion" data-accordion-group="header-accordion">
<div class="--accordion__open body-2 mob-body-2">
<span class="circle"></span>
For business
<span class="plus"></span>
</div>
<div class="--accordion__content-container">
<div class="--accordion__content">
<a href="#" class="link link-text mob-link-text">
Banking services
</a>
<a href="#" class="link link-text mob-link-text">
Payment cards
</a>
<a href="#" class="link link-text mob-link-text">
POS terminal
</a>
<a href="#" class="link link-text mob-link-text">
E-commerce
</a>
<a href="#" class="link link-text mob-link-text">
Corporate finance
</a>
<a href="#" class="link link-text mob-link-text">
Brokerage services
</a>
<a href="#" class="link link-text mob-link-text">
Foreign exchange deals
</a>
<a href="#" class="link link-text mob-link-text">
Deposits
</a>
<a href="#" class="link link-text mob-link-text">
Safe deposit box
</a>
</div>
</div>
</div>
<div class="--accordion header-accordion" data-accordion-group="header-accordion">
<div class="--accordion__open body-2 mob-body-2">
<span class="circle --bg-violet"></span>
eCommerce
<span class="plus"></span>
</div>
<div class="--accordion__content-container">
<div class="--accordion__content">
<a href="#" class="link link-text mob-link-text">
eCommerce features
</a>
<a href="#" class="link link-text mob-link-text">
Documentation and API
</a>
<a href="#" class="link link-text mob-link-text">
Popular e-commerce platforms
</a>
<a href="#" class="link link-text mob-link-text">
Cooperation options
</a>
<a href="#" class="link link-text mob-link-text">
How to connect
</a>
<a href="#" class="link link-text mob-link-text">
Current account
</a>
<a href="#" class="link link-text mob-link-text">
Business cards
</a>
<a href="#" class="link link-text mob-link-text">
POS terminals
</a>
</div>
</div>
</div>
<div class="--accordion header-accordion" data-accordion-group="header-accordion">
<div class="--accordion__open body-2 mob-body-2">
<span class="circle --bg-green"></span>
Fintech
<span class="plus"></span>
</div>
<div class="--accordion__content-container">
<div class="--accordion__content">
<a href="#" class="link link-text mob-link-text">
Segregated accounts
</a>
<a href="#" class="link link-text mob-link-text">
Addressable BIC in SEPA
</a>
<a href="#" class="link link-text mob-link-text">
SEPA instant
</a>
<a href="#" class="link link-text mob-link-text">
Target transactions
</a>
<a href="#" class="link link-text mob-link-text">
Visa, Mastercard & Apple pay acquiring
</a>
<a href="#" class="link link-text mob-link-text">
Simple API integration
</a>
<a href="#" class="link link-text mob-link-text">
Currency exchange
</a>
<a href="#" class="link link-text mob-link-text">
Cooperation options
</a>
</div>
</div>
</div>
</div>
<div class="header-hidden-menu__inner-col">
<div class="header-menu-group">
<p class="title body-2 mob-body-2">About</p>
<a href="#" class="link link-text mob-link-text">
About the Bank
</a>
<a href="#" class="link link-text mob-link-text">
Management
</a>
<a href="#" class="link link-text mob-link-text">
Financial reports
</a>
<a href="#" class="link link-text mob-link-text">
Our history
</a>
<a href="#" class="link link-text mob-link-text">
Careers
</a>
<a href="#" class="link link-text mob-link-text">
Sustainability
</a>
<a href="#" class="link link-text mob-link-text">
Charity projects
</a>
</div>
<div class="header-menu-group">
<p class="title body-2 mob-body-2">Useful links</p>
<a href="#" class="link link-text mob-link-text">
Documents
</a>
<a href="#" class="link link-text mob-link-text">
Price list
</a>
<a href="#" class="link link-text mob-link-text">
Services for private individuals
</a>
<a href="#" class="link link-text mob-link-text">
Currency conversion calculator
</a>
<a href="#" class="link link-text mob-link-text">
LPB Bank API
</a>
<a href="#" class="link link-text mob-link-text">
Q&A about sanctions
</a>
</div>
</div>
<div class="header-hidden-menu__inner-col -pages-links">
<a href="#" class="page-link body-2 mob-body-2">
<img src="images/icons/coin.svg" alt="">
Exchange rates
</a>
<a href="#" class="page-link body-2 mob-body-2">
<img src="images/icons/small-logo.svg" alt="">
Cooperation
</a>
<a href="#" class="page-link body-2 mob-body-2">
<img src="images/icons/heart-on-hand.svg" alt="">
Loyalty program
</a>
<a href="#" class="page-link body-2 mob-body-2">
<img src="images/icons/document.svg" alt="">
For press
</a>
<a href="#" class="page-link body-2 mob-body-2">
<img src="images/icons/img-icon.svg" alt="">
Blog
</a>
<a href="#" class="page-link body-2 mob-body-2">
<img src="images/icons/big-mail.svg" alt="">
Contacts
</a>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="ui-kit-wrapp">
<div class="text-wrapper">
<h1 class="title-1 mob-title-1">
H1
</h1>
<h2 class="title-2 mob-title-2">
H2
</h2>
<h3 class="title-3 mob-title-3">
H3
</h3>
<h4 class="title-4 mob-title-4">
H4
</h4>
<p class="description-1 mob-description-1">
Description 1
</p>
<p class="description-2 mob-description-2">
Description 2
</p>
<p class="body-1 mob-body-1">
body 1
</p>
<p class="body-2 mob-body-2">
body 2
</p>
<p class="body-3 mob-body-3">
body 3
</p>
<p class="body-4 mob-body-4">
body 4
</p>
<p class="button-text mob-button-text">
button
</p>
<p class="link-text mob-link-text">
link
</p>
<a href="#" class="body-4 mob-body-4 border-link">
link with border
</a>
</div>
<div class="button-wrapp">
<div class="circle-arrow -same-hover">
<div class="circle-arrow__inner"></div>
</div>
<a href="#" class="button button-text mob-button-text">
Become a client
</a>
<a href="#" class="button button-text mob-button-text -arrow">
Become a client
<div class="circle-arrow">
<div class="circle-arrow__inner"></div>
</div>
</a>
<a href="#" class="button button-text mob-button-text -white">
Become a client
</a>
<a href="#" class="button button-text mob-button-text -border">
Become a client
</a>
</div>
<div class="card-wrapper">
<div class="industry-card">
<div class="img">
<img src="images/homepage/industries/fintech.png" alt="">
</div>
<p class="title description-2">Fintech</p>
</div>
<div class="industry-card -grey">
<div class="img">
<img src="images/homepage/industries/saas.png" alt="">
</div>
<p class="title description-2">SaaS</p>
</div>
<div class="industry-card -violet -white-text">
<div class="img">
<img src="images/homepage/industries/ecommerce.png" alt="">
</div>
<p class="title description-2">eCommerce</p>
</div>
<div class="industry-card -grey">
<div class="img">
<img src="images/homepage/industries/p2p.png" alt="">
</div>
<p class="title description-2">P2P</p>
</div>
<div class="industry-card">
<div class="img">
<img src="images/homepage/industries/crypto.png" alt="">
</div>
<p class="title description-2">Crypto</p>
</div>
</div>
<div class="card-wrapper-bigger">
<div class="statistic-card">
<div class="statistic-card__text">
<p class="title title-3 mob-title-3">
€32.6
<span class="body-1 mob-body-1">million</span>
</p>
<p class="text body-2 mob-body-2">
Capital and reserves
</p>
</div>
<div class="img">
<img src="images/icons/money.svg" alt="">
</div>
</div>
<div class="statistic-card -dark">
<div class="statistic-card__text">
<p class="title title-3 mob-title-3">
€32.6
<span class="body-1 mob-body-1">million</span>
</p>
<p class="text body-2 mob-body-2">
Capital and reserves
</p>
</div>
<div class="img">
<img src="images/icons/money.svg" alt="">
</div>
</div>
<div class="statistic-card -darker">
<div class="statistic-card__text">
<p class="title title-3 mob-title-3">
€32.6
<span class="body-1 mob-body-1">million</span>
</p>
<p class="text body-2 mob-body-2">
Capital and reserves
</p>
</div>
<div class="img">
<img src="images/icons/globe.svg" alt="">
</div>
</div>
</div>
<div class="form">
<form action="#">
<div class="form-el-wrapper">
<div class="multi-input">
<div class="input" data-important="email">
<div class="input__wrapper">
<input class="body-3 mob-body-3" type="text" placeholder="email@example.com" />
</div>
<p class="input__error tag-text mob-tag-text">Incorrect value</p>
</div>
<div class="input" data-important="email">
<div class="input__wrapper">
<input class="body-3 mob-body-3" type="text" placeholder="email@example.com" />
</div>
<p class="input__error tag-text mob-tag-text">Incorrect value</p>
</div>
<div class="input" data-important="email">
<div class="input__wrapper">
<input class="body-3 mob-body-3" type="text" placeholder="email@example.com" />
</div>
<p class="input__error tag-text mob-tag-text">Incorrect value</p>
</div>
</div>
<div class="input" data-important="not-empty">
<div class="input__wrapper">
<textarea class="-adaptive-height body-3 mob-body-3" type="text"
placeholder="email@example.com"></textarea>
</div>
<p class="input__error tag-text mob-tag-text">Incorrect value</p>
</div>
<div class="--checkbox input body-4 mob-body-4 link-in-text" data-important="checked">
<input type="checkbox" checked />
<span> By clicking Leave a request, you agree with the <a href="#">terms and conditions</a> </span>
</div>
<button class="button button-text mob-button-text -arrow">
submit
<div class="circle-arrow">
<div class="circle-arrow__inner"></div>
</div>
</button>
</div>
</form>
</div>
</div>
<div class="services container -big">
<div class="service-card">
<div class="service-card__text">
<div class="img">
<img src="images/homepage/services/icon-1.svg" alt="">
</div>
<p class="title title-4 mob-title-4">
All types <br>
of payments
</p>
<p class="text body-2 mob-body-2">
Send and receive funds in over 100+ <br> currencies
</p>
<a href="#" class="button button-text mob-button-text -border">
Discover more
</a>
</div>
<div class="service-card__img">
<img src="images/homepage/services/img-1.jpg" alt="">
</div>
</div>
</div>
<footer class="footer">
<div class="container -big">
<div class="footer__container">
<div class="footer-form">
<div class="footer-form__left">
<div class="section-tag link-text mob-tag-text">
Get started
</div>
<h2 class="title title-2 mob-title-2">
Let’s have <br />
a <img src="images/footer/logo.svg" alt=""> magnetic cooperation
</h2>
<div class="form-wrapper">
<div class="form">
<form action="#">
<div class="multi-input">
<div class="input" data-important="email">
<div class="input__wrapper">
<input class="body-3 mob-body-3" type="text" placeholder="email@example.com" />
</div>
<p class="input__error tag-text mob-tag-text">Incorrect value</p>
</div>
<div class="input" data-important="email">
<div class="input__wrapper">
<input class="body-3 mob-body-3" type="text" placeholder="email@example.com" />
</div>
<p class="input__error tag-text mob-tag-text">Incorrect value</p>
</div>
<div class="input" data-important="email">
<div class="input__wrapper">
<input class="body-3 mob-body-3" type="text" placeholder="email@example.com" />
</div>
<p class="input__error tag-text mob-tag-text">Incorrect value</p>
</div>
</div>
<div class="input" data-important="not-empty">
<div class="input__wrapper">
<textarea class="-adaptive-height body-3 mob-body-3" type="text"
placeholder="email@example.com"></textarea>
</div>
<p class="input__error tag-text mob-tag-text">Incorrect value</p>
</div>
<button class="button button-text mob-button-text -arrow">
Leave a request
<div class="circle-arrow">
<div class="circle-arrow__inner"></div>
</div>
</button>
<div class="--checkbox input body-4 mob-body-4 link-in-text" data-important="checked">
<input type="checkbox" checked />
<span> By clicking Leave a request, you agree with the <a href="#">terms and conditions</a> </span>
</div>
<p class="description body-4 mob-body-4">
Magnetiq Bank informs that the information provided in the electronic application will be used to
contact you regarding the Bank services you are interested in and for necessary background checks
before establishing a business relationship.
<br class="--mobile-display">
<br class="--mobile-display">
The processing of personal data in the Bank is carried
out by the “Notice to Data subjects regarding the Processing of Personal Data by Magnetiq Bank.”
</p>
</form>
</div>
</div>
</div>
<div class="footer-form__right">
<div class="img">
<img src="images/footer/hands-circles.png" alt="">
</div>
</div>
</div>
<div class="footer__top footer__row">
<div class="col">
<p class="title link-text mob-link-text">In case of questions</p>
<a href="mailto:info@Ipb.lv" class="link button-text mob-button-text">
info@Ipb.lv
</a>
</div>
<div class="col">
<p class="title link-text mob-link-text">Payment card blocking</p>
<a href="tel:+371 67772999" class="link button-text mob-button-text">
+371 67772999
</a>
</div>
<div class="col">
<p class="title link-text mob-link-text">Working time</p>
<p class="link button-text mob-button-text">
Mon-Fri 09.00 - 18.00
</p>
</div>
<div class="col">
<p class="title link-text mob-link-text">Address</p>
<a href="https://maps.app.goo.gl/b1BhL3v2xJ2tbKK58" target="_blank"
class="link button-text mob-button-text">
Brivibas street 54, Riga, LV-1011
</a>
</div>
</div>
<div class="footer__main footer__row">
<div class="col">
<p class="title link-text mob-link-text">Download our app</p>
<a href="#" class="app-link">
<img src="images/footer/google-play.svg" alt="">
</a>
<a href="#" class="app-link">
<img src="images/footer/app-store.svg" alt="">
</a>
</div>
<div class="col">
<p class="title link-text mob-link-text">About</p>
<a href="#" class="link button-text mob-button-text">
About the Bank
</a>
<a href="#" class="link button-text mob-button-text">
Management
</a>
<a href="#" class="link button-text mob-button-text">
Financial reports
</a>
<a href="#" class="link button-text mob-button-text">
Careers
</a>
<a href="#" class="link button-text mob-button-text">
Blog
</a>
<a href="#" class="link button-text mob-button-text">
For press
</a>
<a href="#" class="link button-text mob-button-text">
Cooperation
</a>
</div>
<div class="col">
<p class="title link-text mob-link-text">Useful links</p>
<a href="#" class="link button-text mob-button-text">
Documents
</a>
<a href="#" class="link button-text mob-button-text">
Price list
</a>
<a href="#" class="link button-text mob-button-text">
Services for private individuals
</a>
<a href="#" class="link button-text mob-button-text">
Loyalty program
</a>
<a href="#" class="link button-text mob-button-text">
Exchange rates
</a>
<a href="#" class="link button-text mob-button-text">
Currency conversion calculator
</a>
<a href="#" class="link button-text mob-button-text">
LPB Bank API
</a>
<a href="#" class="link button-text mob-button-text">
Q&A about sanctions
</a>
</div>
<div class="col">
<p class="title link-text mob-link-text">Single sign-on module</p>
<a href="#" class="circle-border-link button-text mob-button-text">
<img src="images/icons/e-adress.png" alt="">
E-address
</a>
</div>
</div>
<div class="footer__bottom">
<div class="footer__bottom-left body-4 mob-body-3 --semibold">
<div class="footer__bottom-menu">
<a href="#" class="link">General terms</a>
<a href="#" class="link">Protection of investors' interests</a>
<a href="#" class="link">Cookies policy</a>
<a href="#" class="link">Personal data processing</a>
<a href="#" class="link">Whistle-blowing</a>
</div>
<div class="footer__bottom-copyright">
Magnetiq Bank © 2024. All rights reserved.
</div>
</div>
<div class="footer__bottom-right social-list">
<a href="#" class="social-item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
<path
d="M21.5 12.0238C21.5 6.76667 17.244 2.5 12 2.5C6.756 2.5 2.5 6.76667 2.5 12.0238C2.5 16.6333 5.768 20.4714 10.1 21.3571V14.881H8.2V12.0238H10.1V9.64286C10.1 7.80476 11.5915 6.30952 13.425 6.30952H15.8V9.16667H13.9C13.3775 9.16667 12.95 9.59524 12.95 10.119V12.0238H15.8V14.881H12.95V21.5C17.7475 21.0238 21.5 16.9667 21.5 12.0238Z"
fill="white" />
</svg>
</a>
<a href="#" class="social-item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
<path
d="M18.6111 3.5C19.1121 3.5 19.5925 3.69901 19.9468 4.05324C20.301 4.40748 20.5 4.88792 20.5 5.38889V18.6111C20.5 19.1121 20.301 19.5925 19.9468 19.9468C19.5925 20.301 19.1121 20.5 18.6111 20.5H5.38889C4.88792 20.5 4.40748 20.301 4.05324 19.9468C3.69901 19.5925 3.5 19.1121 3.5 18.6111V5.38889C3.5 4.88792 3.69901 4.40748 4.05324 4.05324C4.40748 3.69901 4.88792 3.5 5.38889 3.5H18.6111ZM18.1389 18.1389V13.1333C18.1389 12.3168 17.8145 11.5336 17.2371 10.9562C16.6597 10.3788 15.8766 10.0544 15.06 10.0544C14.2572 10.0544 13.3222 10.5456 12.8689 11.2822V10.2339H10.2339V18.1389H12.8689V13.4828C12.8689 12.7556 13.4544 12.1606 14.1817 12.1606C14.5323 12.1606 14.8687 12.2999 15.1166 12.5478C15.3646 12.7958 15.5039 13.1321 15.5039 13.4828V18.1389H18.1389ZM7.16444 8.75111C7.58525 8.75111 7.98883 8.58395 8.28639 8.28639C8.58395 7.98883 8.75111 7.58525 8.75111 7.16444C8.75111 6.28611 8.04278 5.56833 7.16444 5.56833C6.74113 5.56833 6.33515 5.73649 6.03582 6.03582C5.73649 6.33515 5.56833 6.74113 5.56833 7.16444C5.56833 8.04278 6.28611 8.75111 7.16444 8.75111ZM8.47722 18.1389V10.2339H5.86111V18.1389H8.47722Z"
fill="white" />
</svg>
</a>
<a href="#" class="social-item">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path
d="M12.9252 3C13.9377 3.0027 14.4515 3.0081 14.8952 3.0207L15.0698 3.027C15.2714 3.0342 15.4703 3.0432 15.7106 3.054C16.6681 3.099 17.3215 3.25019 17.8948 3.47249C18.4887 3.70108 18.9891 4.01068 19.4895 4.51016C19.9471 4.96006 20.3012 5.50427 20.5271 6.10493C20.7494 6.67821 20.9006 7.3316 20.9456 8.29008C20.9564 8.52947 20.9654 8.72837 20.9726 8.93086L20.978 9.10546C20.9915 9.54825 20.9969 10.0621 20.9987 11.0746L20.9996 11.746V12.925C21.0018 13.5814 20.9949 14.2379 20.9789 14.8941L20.9735 15.0687C20.9663 15.2712 20.9573 15.4701 20.9465 15.7095C20.9015 16.668 20.7485 17.3205 20.5271 17.8947C20.3018 18.4956 19.9477 19.04 19.4895 19.4894C19.0395 19.9469 18.4953 20.301 17.8948 20.5271C17.3215 20.7494 16.6681 20.9006 15.7106 20.9456C15.497 20.9556 15.2834 20.9646 15.0698 20.9726L14.8952 20.978C14.4515 20.9906 13.9377 20.9969 12.9252 20.9987L12.2538 20.9996H11.0758C10.4191 21.0018 9.76234 20.9949 9.10581 20.9789L8.93122 20.9735C8.71758 20.9654 8.50398 20.9561 8.29045 20.9456C7.3329 20.9006 6.67953 20.7494 6.10536 20.5271C5.50479 20.3015 4.96081 19.9474 4.51154 19.4894C4.05351 19.0397 3.69909 18.4954 3.473 17.8947C3.25071 17.3214 3.09951 16.668 3.05452 15.7095C3.04449 15.496 3.03549 15.2824 3.02752 15.0687L3.02302 14.8941C3.00643 14.2379 2.99893 13.5814 3.00052 12.925V11.0746C2.99801 10.4182 3.00461 9.76172 3.02032 9.10546L3.02662 8.93086C3.03382 8.72837 3.04282 8.52947 3.05362 8.29008C3.09861 7.3316 3.24981 6.67911 3.4721 6.10493C3.69809 5.50366 4.05321 4.95928 4.51244 4.51016C4.9616 4.0525 5.50522 3.69837 6.10536 3.47249C6.67953 3.25019 7.332 3.099 8.29045 3.054C8.52984 3.0432 8.72963 3.0342 8.93122 3.027L9.10581 3.0216C9.76205 3.00561 10.4185 2.99871 11.0749 3.0009L12.9252 3ZM12.0001 7.4999C10.8066 7.4999 9.66211 7.97399 8.81824 8.81788C7.97437 9.66178 7.50029 10.8063 7.50029 11.9998C7.50029 13.1932 7.97437 14.3378 8.81824 15.1817C9.66211 16.0256 10.8066 16.4997 12.0001 16.4997C13.1935 16.4997 14.338 16.0256 15.1819 15.1817C16.0257 14.3378 16.4998 13.1932 16.4998 11.9998C16.4998 10.8063 16.0257 9.66178 15.1819 8.81788C14.338 7.97399 13.1935 7.4999 12.0001 7.4999ZM12.0001 9.29985C12.3546 9.29979 12.7057 9.36957 13.0333 9.5052C13.3609 9.64083 13.6585 9.83966 13.9093 10.0903C14.16 10.341 14.3589 10.6386 14.4947 10.9662C14.6304 11.2937 14.7003 11.6448 14.7004 11.9993C14.7004 12.3539 14.6307 12.705 14.495 13.0326C14.3594 13.3602 14.1606 13.6579 13.9099 13.9086C13.6593 14.1594 13.3617 14.3583 13.0341 14.494C12.7066 14.6298 12.3555 14.6997 12.001 14.6997C11.2849 14.6997 10.5982 14.4153 10.0919 13.9089C9.58555 13.4026 9.3011 12.7159 9.3011 11.9998C9.3011 11.2837 9.58555 10.597 10.0919 10.0906C10.5982 9.58431 11.2849 9.29985 12.001 9.29985M16.7257 6.14993C16.4274 6.14993 16.1412 6.26845 15.9303 6.47942C15.7193 6.6904 15.6008 6.97654 15.6008 7.2749C15.6008 7.57326 15.7193 7.8594 15.9303 8.07038C16.1412 8.28135 16.4274 8.39987 16.7257 8.39987C17.0241 8.39987 17.3102 8.28135 17.5212 8.07038C17.7321 7.8594 17.8507 7.57326 17.8507 7.2749C17.8507 6.97654 17.7321 6.6904 17.5212 6.47942C17.3102 6.26845 17.0241 6.14993 16.7257 6.14993Z"
fill="#ffffff" />
</svg>
</a>
</div>
</div>
</div>
</div>
</footer>
<script src="js/lib/jquery-3.7.1.min.js"></script>
<script src="js/lib/jquery.overlay-scrollbars.min.js"></script>
<script src="js/custom-solutions.js"></script>
<script src="js/script.js"></script>
<script src="js/test.js"></script>
</body>
</html>