<!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>