/home/bdqbpbxa/demo-subdomains/nanobiomedical.goodface.com.ua/frontend/ui-kit.html
<!DOCTYPE html>
<html lang="ru">
<head>
  <title>
    Ui-kit
  </title>

  <!-- TODO: Set page description -->
  <meta charset="utf-8">
  <meta name="description" content="Page description">

  <!-- TODO: Delete noindex before publishing to 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">
  <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">

  <!-- Generate favicon by https://realfavicongenerator.net/ -->

</head>
<body>

<!-- Dont forget add "--modal-scrollable-element" class name to modal elements -->

<style>
  .color {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .color div {
    width: 50px;
    height: 50px;
  }

  .ui-container > * {
    margin: 20px;
  }
</style>

<div class="ui-container">

  <div class="color">
    <div style="background: linear-gradient(108.06deg, #BEDDFB -6.89%, #D1F2F8 43.95%, #D9FFE3 106.62%)"></div>
    <div style="background: #065EB2;"></div>
    <div style="background: #394047;"></div>
    <div style="background: #687D89;"></div>
    <div style="background: #808589;"></div>
    <div style="background: #A9ABAE;"></div>
    <div style="background: #E1E3E5;"></div>
  </div>
  <h1 class="title-1 mob-title-1 title">
    Heading 1
  </h1>

  <h1 class="title-1 mob-title-1 -ttramillas title">
    Heading 1
  </h1>

  <h2 class="title-2 mob-title-2 title">
    Heading 2
  </h2>

  <p class="description-1 mob-description-1">
    description 1
  </p>

  <p class="description-2 mob-description-1">
    description 2
  </p>

  <p class="text-1 mob-text-1">
    text 1
  </p>

  <p class="text-1 mob-text-1 text -bold">
    text 1 bold
  </p>

  <p class="text-2 mob-text-2 text">
    text 2
  </p>

  <p class="text-2 mob-text-2 text -bold">
    text 2 bold
  </p>

  <p class="mob-text-3 text">
    text 2 bold
  </p>

  <p class="caption">
    caption Text
  </p>

  <a href="#" class="button">
    button
  </a>

  <a href="#" class="button -dark">
    button dark
  </a>

  <a href="#" class="button -has-arrow">
    button dark
    <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.53.47 13.06 7l-6.53 6.53-1.06-1.06 4.72-4.72H0v-1.5h10.19L5.47 1.53 6.53.47Z" fill="#394047"/></svg>
  </a>

  <a href="#" class="button -dark -has-arrow">
    button dark
    <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.53.47 13.06 7l-6.53 6.53-1.06-1.06 4.72-4.72H0v-1.5h10.19L5.47 1.53 6.53.47Z" fill="#394047"/></svg>
  </a>

  <a href="#" class="anchor-link link -has-arrow-to-bot text text-1 mob-text mob-text-3">
    Узнать больше
    <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.53 6.53 7 13.06.47 6.53l1.06-1.06 4.72 4.72V0h1.5v10.19l4.72-4.72 1.06 1.06Z" fill="#394047"/></svg>
  </a>

  <form action="#">
    <div class="input-box" data-error="Error">
      <label class="text-1 mob-text-2">Input text</label>
      <input type="text" class="text-1 mob-text-2">
    </div>
  </form>

  <ul class="default-list text-1 mob-text-2">
    <li>Пункт 1</li>
    <li>Пункт 2</li>
    <li>Пункт 3</li>
  </ul>

  <ol class="default-list text-1 mob-text-2">
    <li>Пункт 1</li>
    <li>Пункт 2</li>
    <li>Пункт 3</li>
  </ol>

</div>

<script src="js/lib/jquery-3.6.0.min.js"></script>
<script src="js/custom-solutions.js"></script>
<script src="js/script.js"></script>

</body>
</html>