/home/bdqbpbxa/demo-subdomains/gumballpay.goodface.com.ua/frontend/ui-kit.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Page description">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 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">
<title>Document</title>
<link rel="stylesheet" href="./css/ui-kit.css">
</head>
<body>
<style>
body{
text-align: center;
background: #12182B;;
color: var(--color-white);
display: flex;
flex-direction: column;
align-items: center;
}
.buttons{
display: flex;
justify-content: space-between;
}
</style>
<h1 class="title-1">Title-1</h1><br>
<h2 class="title-2">Title-2</h2><br>
<h3 class="title-3">Title-3</h3><br>
<p class="text-1">Text 1</p><br>
<p class="text-2">Text 2</p><br>
<p class="text-3">Text 3</p><br>
<p class="body-1-medium">Body 1 medium</p><br>
<p class="body-1-demibold">Body 1 demibold</p><br>
<p class="body-2 body-2-medium">body-2 body-2-medium</p><br>
<p class="body-2 --weight500">body-2 --weight500</p><br>
<p class="body-2 --weight600">body-2 --weight600</p><br>
<!--! Media contact icons -->
<div class="contacts__social">
<a class="contacts__link">
<div class="-container"><img src="./images/footer/media-inst.svg"></div>
</a>
<a class="contacts__link">
<div class="-container"><img src="./images/footer/media-fb.svg"></div>
</a>
<a class="contacts__link">
<div class="-container"><img src="./images/footer/media-linkedin.svg"></div>
</a>
<a class="contacts__link">
<div class="-container"><img src="./images/footer/media-twitter.svg"></div>
</a>
</div>
<br>
<!--! Buttons -->
<div class="buttons">
<div class='button__blue'>
Get started
</div>
<div class='button__transparent'>
Explore solution
</div>
<div class='button-white__transparent'>
About us
</div>
</div>
<br>
<br>
<!--! Anchor -->
<span class="anchor">
<div class="anchor__container"></div>
</span>
<span class="anchor anchor-blue">
<div class="anchor__container">
</div>
</span>
<br>
<!--! Links -->
<a class="body-1-demibold link__medium">Link medium</a>
<a class="text-3 link__bold">Link bold</a>
<br>
<!--! Input -->
<div class="body-1-medium input-box">
<label class="body-2 --weight500 input-box__label" for="login">Your name</label>
<input type="text" name="login" id="login" placeholder="Login">
<p class="-error">Incorrect value</p>
</div>
<br>
<div class="body-1-medium input-box input-box__invalid">
<label class="body-2 --weight500 input-box__label" for="login">Your name</label>
<input type="text" name="login" id="login" placeholder="Login">
<p class="-error">Incorrect value</p>
</div>
<br>
<div class="body-1-medium input-box input-box__active">
<label class="body-2 --weight500 input-box__label" for="login">Your name</label>
<input type="text" name="login" id="login" placeholder="Login">
<p class="-error">Incorrect value</p>
</div>
<br>
<!-- ! Pagination -->
<div class="pagination">
<a class="pagination__link pagination__link-active">
1
</a>
<a class="pagination__link">
2
</a>
<a class="pagination__link">
3
</a>
<a class="pagination__link">
4
</a>
<a class="pagination__link pagination__link-showmore">
...
</a>
<a class="pagination__link pagination__link-disabled ">
9
</a>
<a class="pagination__link">
10
</a>
</div>
<br>
<br>
<script src="js/lib/jquery-3.6.0.min.js"></script>
<script src="js/lib/swiper-bundle.min.js"></script>
<script src="js/custom-solutions.js"></script>
<script src="js/test.js"></script>
<script src="js/script.js"></script>
</body>
</html>