/home/bdqbpbxa/demo-subdomains/paytech.goodface.com.ua/frontend/ui-kit.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>
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/styles.css">
<link rel="stylesheet" type="text/css" href="css/adaptive.css">
</head>
<body class="-has-conveyor">
<script>
// Allow animations if JS support is enabled
document.body.classList.add('-allow-animations');
</script>
<style>
body {
background: moccasin;
}
.ui-section {
padding: 50px;
}
hr {
margin: 40px 0;
}
.text-wrapper {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 40px;
}
.text-wrapper * {
width: 30%;
}
</style>
<div class="conveyor-container text-5">
<div class="conveyor-belt__belt" data-check-in-viewport>
<div class="conveyor-belt__belt-part">
Full version of website is currently under development. Stay tuned.
</div>
</div>
</div>
<header class="header">
<div class="container -bigger">
<div class="header__wrapper">
<a href="index.html" class="logo">
<img src="images/icons/logo.svg" alt="Paytech - logo">
<img src="images/icons/logo-black.svg" alt="Paytech - black logo">
</a>
<a href="#" class="default-button -smaller">
Get started
</a>
</div>
</div>
</header>
<div class="ui-section">
<div class="container">
<hr>
<h1 class="title-1 mob-title-1">
Headline 1
</h1>
<hr>
<h2 class="title-2 mob-title-2">
Headline 2
</h2>
<hr>
<h3 class="title-3 mob-title-3">
Headline 3
</h3>
<hr>
<div class="text-wrapper">
<p class="text-1 mob-text-1 -bold -higher">Text-1, higher, bold</p>
<p class="text-1 mob-text-1 -medium -higher"> Text-1, higher, medium</p>
<p class="text-1 mob-text-1 -higher">Text-1, higher, regular</p>
</div>
<div class="text-wrapper">
<p class="text-1 mob-text-1 -bold">Text-1, bold</p>
<p class="text-1 mob-text-1 -medium">Text-1, medium</p>
<p class="text-1 mob-text-1">Text-1, regular</p>
</div>
<hr>
<div class="text-wrapper">
<p class="text-2 mob-text-2 -higher -bold">Text-2, higher, bold</p>
<p class="text-2 mob-text-2 -higher -medium">Text-2, higher, medium</p>
<p class="text-2 mob-text-2 -higher">Text-2, higher, regular</p>
</div>
<div class="text-wrapper">
<p class="text-2 mob-text-2 -bold">Text-2, bold </p>
<p class="text-2 mob-text-2 -medium">Text-2, medium </p>
<p class="text-2 mob-text-2">Text-2, regular </p>
</div>
<hr>
<div class="text-wrapper">
<p class="text-3 mob-text-3 -higher -bold">Text-3, higher, bold</p>
<p class="text-3 mob-text-3 -higher -medium">Text-3, higher, medium</p>
<p class="text-3 mob-text-3 -higher">Text-3, higher, regular</p>
</div>
<div class="text-wrapper">
<p class="text-3 mob-text-3 -bold">Text-3, bold </p>
<p class="text-3 mob-text-3 -medium">Text-3, medium </p>
<p class="text-3 mob-text-3">Text-3, regular </p>
</div>
<hr>
<p class="text-4 mob-text-4">Text-4 </p>
<hr>
<div class="text-wrapper">
<p class="text-5 mob-text-5 -bold">Text-5, bold </p>
<p class="text-5 mob-text-5 -medium">Text-5, medium </p>
<p class="text-5 mob-text-5">Text-5, regular </p>
</div>
<hr>
<div class="text-wrapper">
<p class="text-6 mob-text-6 -bold">Text-6, bold </p>
<p class="text-6 mob-text-6 -medium">Text-6, medium </p>
</div>
<hr>
<div class="text-wrapper">
<p class="text-7 mob-text-7 -bold">Text-7, bold </p>
<p class="text-7 mob-text-7 -medium">Text-7, medium </p>
</div>
<hr>
<div class="text-wrapper">
<div class="default-button">
Get started
</div>
<div class="default-button -disabled">
Get started
</div>
</div>
<hr>
<div class="text-wrapper">
<div class="default-button -white">
Get started
</div>
<div class="default-button -white -disabled">
Get started
</div>
</div>
<hr>
<div class="text-wrapper">
<div class="default-button -black">
Get started
</div>
<div class="default-button -black -disabled">
Get started
</div>
</div>
<hr>
<form action="#">
<div class="input">
<label class="input__name text-6 mob-text-6 -medium">Full name</label>
<div class="input__wrapper">
<input class="text-3 mob-text-3" type="text" placeholder="Enter your name">
</div>
<p class="input__error text-5 mob-text-5">This field is required</p>
</div>
</form>
</div>
</div>
<footer class="footer --black-section">
<div class="container">
<div class="footer__wrapper">
<a href="index.html" class="logo">
<img src="images/icons/logo-small.svg" alt="Paytech - logo">
</a>
<div class="footer__named-row">
<div class="footer__named-col">
<p class="name text-7 mob-text-7">email</p>
<a href="mailto:info@pay.tech" class="title-1 mob-title-1">info@pay.tech</a>
</div>
<div class="footer__named-col">
<p class="name text-7 mob-text-7">we are in touch</p>
<a href="mailto:info@pay.tech" class="text-3 mob-text-3 -higher">+35 796 235 587</a>
<p class="text-3 mob-text-3 -higher">PT Software Solutions Limited, Faneromenis 106, 2nd floor, Office 201, 6031, Larnaca, Cyprus</p>
</div>
</div>
<div class="footer__bottom-menu text-3 mob-text-3 -higher">
<a href="privacy.html">Privacy Policy</a>
<a href="terms.html">Terms & Conditions</a>
</div>
<div class="footer__bottom-row text-3 mob-text-3 -higher">
<p class="copyright">© 2023 Paytech</p>
<a href="privacy.html">Privacy Policy</a>
<a href="terms.html">Terms & Conditions</a>
<p class="developed-by">
Created by <a href="https://goodface.agency/" target="_blank">Goodface</a>
</p>
</div>
</div>
</div>
</footer>
<script src="js/lib/jquery-3.7.0.min.js"></script>
<script src="js/custom-solutions.js"></script>
<script src="js/script.js"></script>
<script src="js/test.js"></script>
</body>
</html>