/home/bdqbpbxa/demo-subdomains/paytech.goodface.com.ua/wp-content/themes/paytech/assets/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/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/ui-kit.css">
<link rel="stylesheet" type="text/css" href="css/ui-blocks.css">
<link rel="stylesheet" type="text/css" href="css/hovers.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/adaptive.css">
</head>
<body>
<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">
<video src="images/animated-logo/white-on-dark.mp4" muted playsinline autoplay preload loop></video>
<video src="images/animated-logo/color-on-white.mp4" muted playsinline autoplay preload loop></video>
</a>
<div class="header__right -hidden">
<div class="menu-open text-4 mob-text-4">
Menu
<span class="icon">
<div><span></span><span></span></div>
<div><span></span><span></span></div>
</span>
</div>
<a href="get-started.html" class="default-button -smaller">
Get started
</a>
</div>
<div class="header__menu text-4 mob-text-4">
<div class="header__menu-item -disabled">
<span class="visible">Products</span>
</div>
<div class="header__menu-item -disabled">
<span class="visible">Services</span>
</div>
<a class="header__menu-item" href="pricing.html">Pricing</a>
<a class="header__menu-item -disabled" href="#">Developers</a>
</div>
<div class="header__right">
<div class="menu-open text-4 mob-text-4">
Menu
<span class="icon">
<div><span></span><span></span></div>
<div><span></span><span></span></div>
</span>
</div>
<a href="get-started.html" class="default-button -smaller">
Get started
</a>
</div>
</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>
<input type="checkbox" name="vehicle" value="Bike">
</form>
</div>
</div>
<div class="footer__wrapper">
<footer class="footer --black-section --has-bg">
<div class="container">
<div class="footer__wrapper">
<a href="index.html" class="logo">
<img class="-lazyload" srcset="images/lazyload.png" 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:hello@pay.tech" class="title title-1 mob-title-1">hello@pay.tech</a>
</div>
<div class="footer__named-col">
<p class="name text-7 mob-text-7">we are in touch</p>
<a href="tel:+355799913648" class="text-3 mob-text-3 -higher">+35 579 991 3648</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>
<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>
</div>
<script src="js/lib/jquery-3.7.0.min.js"></script>
<script src="js/lib/gsap.min.js"></script>
<script src="js/lib/ScrollTrigger.min.js"></script>
<script src="js/lib/swiper-bundle.min.js"></script>
<script src="js/custom-solutions.js"></script>
<script src="js/script.js"></script>
<script src="js/animations.js"></script>
<script src="js/test.js"></script>
</body>
</html>