3×242+824:4= (4×209-228):8=

Содержание

Заголовки для www.getuikit3.ru

Похожие сайты

01www.ru   12-220.com   46oboi.ru   8iam.com   adoptelemec.com   aimmachinery.ru   all-leds.ru   angelinagruzdeva.ru   antievakuator.ru   

Веб-сервер

Информация о дата-центре
Время загрузки веб-сервера составляет 0.36 секунды
Domain names registrar REG.RU, Ltd
AS197695 Domain names registrar REG.RU, Ltd
Moscow
Moscow City
Russian Federation
55.7522, 37.6156
Серверами доменных имён являются ns1.hosting.reg.ru (31.31.198.6), ns2.hosting.reg.ru (31.31.198.7). ИП адрес сайта 37.140.192.72
ИП: 37.140.192.72
Тип сервера: nginx
Кодировка: UTF-8
ПИНГ www.getuikit3.ru (37.140.192.72) Размер пакета составляет 34 байт.
34 байт для 37.140.192.72: seq_num=1 TTL=65 27.4 мс
34 байт для 37.140.192.72: seq_num=2 TTL=65 27.3 мс
34 байт для 37.140.192.72: seq_num=3 TTL=65 27.8 мс
— www.getuikit3.ru результаты пинга —
4 запроса отправлено, 4 пакета получено, 0 потеряно (0% потерь)
Средний пинг до сервера составляет 20.6 мс, и среднее время загрузки сайта 0.36 секунды.
Конфигурация веб-сервера
Допустимые границы: bytes
Длинна содержания: 28904
Тип содержания: text/html
Дата: Wed, 29 Mar 2017 03:19:54 GMT
Последние изменения: Sun, 29 Jan 2017 11:16:40 GMT
Веб-сервер: nginx
Х-поддержка: PleskLin
Разное: +
Е-тэг: +
П3П:
Добавление куки:
Содержание MD5:
Штифты открытого ключа:

Что такое компонентный дизайн и при чем здесь UI Kit

Это значит, что сперва делаются отдельные компоненты (кнопки, формы, блоки), потом из них составляется весь дизайн. Такой подход нужен для больших систем, чтобы не создавать 100 различных видов кнопок, а ограничиться их необходимым количеством.

Как бывает на практике: при создании элементов для дополнительных страниц большого ресурса (где 200+ страниц) оказывается, что они противоречат предыдущим элементам. Тем более, частенько случается, что внешний вид элементов дорабатывается в процессе. И в результате, пока закончишь дизайн всего проекта, оказывается, что элементы в начале и в конце дизайна не совпадают.

Часто также случается, что реальный макет страниц выглядит совершенно иначе, потому что на практике в макете страниц используются те элементы, которых не было в UI-ките – они просто не были продуманы на тот момент.

Компонентный дизайн = унификация всех элементов вашего дизайна. И его суть в том, что при необходимости создавать каждый новый элемент, его сперва нужно отрисовать в UI Kits.

Семантические элементы, тэги

Следующий список дает краткое представление о наиболее часто используемом тексте на уровне семантики и его использовании.

Тег
Описание

Преобразует текст в гипертекст используя .

Акцентируем внимание на слово или фразу с помощью тега em.

Укажем на важность помеченного текста, отображаем текст жирным начертанием.

Для отображения встроенных фрагментов кода, используется тег .

Изменим слова в тексте на перечеркнутые, покажем их как удаленный текст.

Данное форматирование укажет на то, какие документа были сделаны.

Выделим тегом текст без семантического значения, для изменения внешнего вида.

Укажем встроенную цитату внутри отображаемого текста.

Данная последовательность символов является аббревиатурой. С помощью атрибута title дается расшифровка.

Выделим новый термин курсивом с использованием подсказки, при первом появлении в тексте.

Уменьшим размер шрифта по сравнению с обычным текстом, текст получается маленьким.

Высота Match

Чтобы растянуть все дочерние элементы контейнера до одинаковой высоты независимо от их содержимого, например, в сетке, добавьте атрибут . Вы можете изменить поведение соответствия высоты, установив для атрибута опцию или . .

Опция Значение По умолчанию Описание
String Элементы, которые должны соответствовать.
Boolean По умолчанию будут соответствовать только элементы в одной строке.
Например, когда столбцы сетки расширяются до ширины 100%, их высоты больше не будут совпадать. Это имеет смысл, например, если они располагаются вертикально в более узких окнах просмотра.

является Primary опцией. Если это единственный параметр в значении атрибута, то её ключ можно не использовать.

Высота : Соответствие цели : Match cards

Вы также можете нацеливать и сопоставлять определенные элементы внутри контейнера, например Карты. Просто добавьте опцию к атрибуту.

  • Заметив, что закуска была готова, полицеймейстер предложил гостям окончить вист после завтрака, и все пошли в ту комнату.

    Скоро все угомонились

    Они встретились взглядом и чутьем поняли друг друга.

    Таким образом

В данном примере высота одной ячейки в строке соответствует соседней высоте ячейки в этой же строке .

Одинаковая высота всех ячеек : Match all

Если ваша сетка состоит из нескольких строк, сопоставляются только столбцы сетки в одной строке. Чтобы сопоставить столбцы сетки во всех строках, просто добавьте к атрибуту параметр .

  • В это время из дамских благовонных уст к нему устремилось множество намеков и вопросов, проникнутых насквозь тонкостию и любезностию.

    Видно, так уж бывает на свете.

    Каждая дама дала себе внутренний обет быть как можно очаровательней.

    По крайней мере.

В данном примере все ячейки имеют одинаковую высоту.

Тренды UI Kit для интернет магазина

Внешний вид интернет-площадок меняется быстрыми темпами. То, что было модным несколько лет назад, сейчас скорее всего окажется безнадежно устаревшим (о том, почему необходимо менять UI сайта каждые 5 лет мы писали здесь). Эти перемены затрагивают все визуальные элементы сайта, в том числе и UI Kit. Какого размера должны быть кнопки, нужна ли при нажатии анимация, имеет ли значение размер теней, глубина цвета, наличие ободка и вид углов – ответы на эти вопросы меняются вместе с появлением новых трендов. Ниже пример пару трендов для UI Kit интернет магазина от Evergeen.

  • Красочные кнопки

  • Типографика

Цена разработки UI кита для интернет магазина

Стоимость разработки UI kit для интернет магазина зависит от многих факторов, поэтому мы всегда просчитываем её индивидуально. Цена формируется от количества функций, которые будут доступны в вашем интернет магазине сейчас или в ближайшее время, ведь для каждой функции необходимо отрисовать свой элемент в нескольких состояниях. Детальнее о нашем подходе к оценке стоимости любого проекта вы можете прочесть в этой статье.

Прежде, чем говорить о стоимости, мы настаиваем на личной встрече с заказчиком, поскольку каждый элемент несет в себе не только смысловую, но и эмоциональную нагрузку

А нам важно глубоко понять особенность вашего бизнеса, его идею, чтобы затем выразить их в десятках мельчайших элементов

Хотите разработать UI Kit для интернет магазина? Напишите нам, сделаем это с удовольствием.

Больше о UX\UI дизайне

Почитайте больше о разработке дизайна в наших статьях и подборках

Дорогой и дешевый UI, основные различия

Стоит ли платить за UI ощутимую сумму? Или же можно сэкономить с тем же результатом для бизнеса? В этом материале мы расскажем о своем опыте по поводу того может ли дешевое быть хорошим и чем отличаются дешевый и…

UI refreshment: стоит ли обновлять UI без изменения функционала?

Нужен ли вам UI refreshment без изменения функционала? Какой именно редизайн подойдет вам и нужен ли он вообще — читайте в статье.

Что такое UI Kit и для чего он нужен вашей компании

UI-kit является первым и обязательным элементом создания любого качественного UI-дизайна. Что такое UI-kit, UI elements, UI/UX-guidelines и дизайн-система читайте в нашей статье.

Ваша команда профессионалов по разработке UI kit – Evergreen

Остались вопросы, или хотите заказать UI Кит для интернет магазина? Чувствуйте себя свободно — мы рады проконсультировать по любому профессиональному вопросу и сделаем это абсолютно бесплатно, просто позвоните нам или заполните форму.

Скачать бриф
Онлайн заявка

Как разработать UI-кит. Пошаговый пример

Как только готовы прототипы, известны сценарии поведения пользователя и функции будущего продукта, можно приступать к разработке набора элементов.

Рассказываю, какие шаги нужно пройти, чтобы получился эффективный UI-кит, на примере сервиса «Врач42», который мы разрабатывали в digital-агентстве «Атвинта».

Через этот сервис жители Кемеровской области записываются на приём в поликлинику. Главная боль пользователей — то, что в регистратуру сложно дозвониться. В результате приходится либо подолгу висеть на телефоне в ожидании ответа, либо постоянно откладывать поход к врачу. Главная цель проекта — дать возможность оперативно записаться в нужное медучреждение в несколько кликов.

Шаг 1. Сетка, шрифты, цвета

Сначала рисуем сетку будущего веб-приложения. Это фундамент проекта. Сетка задаёт ритм в макетах и помогает frontend-разработчикам при вёрстке.

В этом проекте используем сетку из 16 колонок: она позволяет логично и вариативно расположить все нужные элементы.

Подобрали шрифты для заголовков, основного и второстепенного текста в интерфейсе.

При выборе цветов определяем главные: они играют наибольшую роль при взаимодействии пользователя с интерфейсом. Это основной цвет страницы, цвета кнопок целевого действия и системных предупреждений.

Основным цветом страницы мы выбрали синий. Он наиболее социально-нейтральный и привычен для сайтов муниципальных учреждений.

После добавляем дополнительные цвета для кнопок и прочих элементов.

Утилиты

Для оптимизации отображения ячеек таблицы и их конкретного содержимого вы можете добавить один из следующих классов.

Класс Описание
Чтобы связать всю ячейку, добавьте этот класс к элементам
Так как изображения в UIkit 3 по умолчанию являются адаптивными, использование изображения внутри ячейки таблицы с классом уменьшит ширину изображения до 0.
Для отмены такого поведения добавьте класс из компонента Основы к элементу .
При применении фиксированной ширины к ячейке таблицы, вы можете добавить этот класс из компонента Текст к элементу
Добавьте этот класс из компонента Текст, чтобы предотвратить перенос текста, например, при использовании класса .
  • Preserve Expand + Link Truncate Shrink + Nowrap
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor

Все варианты работы таблиц смотрите в разделе примеры таблиц.

Visibility utilities

Class Description
Hides the element on any device.
Hides the element on touch devices.
Hides the element on non-touch devices.
Hides the element without removing it from the flow.
Displays hidden content on hover using . Add this class to the parent element.
Displays hidden content on hover using . Add this class to the parent element.

Markup

Responsive visibility

You can show or hide content on specific viewport widths. Breakpoints are set through variables and can easily be modified. Since the line between different device sizes keeps blurring, class names are kept general and do not refer to particular devices.

Class Small(Phones)up to 767 Medium(Tablets)768 to 959 Large(Desktops)960 and larger
Visible Hidden Hidden
Hidden Visible Hidden
Hidden Hidden Visible
Hidden Visible Visible
Visible Hidden Visible
Visible Visible Hidden

Vertical alignment

To align objects vertically, you need to create a parent container to which the object itself will be aligned.

Class Description
Add this class to the parent container. This container needs a specific height.
Add this class to the child element to center your content.
Add this class to the child element to align your content to the bottom.
This helper class applies a height of 100%.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Markup

NOTE The object you align needs to have a width or max-width that is smaller than its parent container.

Center the entire page

The class comes in handy, if you want to extend the and elements to the full height of the page. This can be very useful when creating error pages.

Markup

To center your content horizontally as well, add the class to the parent and the class to the child element. This is necessary because of the responsive behavior.

Модификаторы стилей

Чтобы применить различные цвета фона и отступы, добавьте один из следующих классов:

Класс Описание
Добавляет цвет фона вашего сайта по умолчанию.
Добавляет приглушенный цвет фона.
Добавляет основной цвет фона компонента.
Добавляет дополнительный цвет фона компонента.
  • Стиль по умолчанию

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

    Приглушенный стиль

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

    Основной стиль

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

    Дополнительный стиль

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

    Раздел с фоновым изображением

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

Классы and автоматически расширяют стиль, обратный компоненту Инверсия.
Если вы хотите предотвратить такое поведение, например, потому что вы используете карточки в этих разделах, добавьте класс .uk-preserve-color.

  • Основной стиль раздела с компонентом Карточки

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

Как UI Kit помогает при создании UI сайта и приложения

Пользователь любит, когда красиво. Ему нравится наслаждаться тем, что он видит и к чему прикасается. А еще пользователь любит, когда ему понятно. И унифицированные элементы на всех страницах позволяют потенциальному клиенту понимать их функцию на любой странице вашего ресурса в каждый момент пребывания на сайте.

Каждый элемент UI-кита можно многократно использовать на любой из страниц сайта, портала, приложения. Чем больше страниц на вашем сайте, тем выше необходимость в создании UI Kit. Он нужен, чтобы все элементы выглядели гармонично. Если не использовать UIKit, ваш интерфейс будет похож на винегрет различных кнопок и стилей, и у пользователя не будет единого понимания что значит тот или иной элемент. А значит, его реакция на ваш сайт будет примерно следующей:

— Хм, это кнопка. 

— А это не кнопка. 

— А это снова кнопка. 

— А это кнопка или нет? 

— А эта кнопка работает не как кнопка, а как переключатель?

Когда UI Kit не помогает при создании сайта: поскольку UI – следующий этап после качественного UX, он может улучшить лишь то, что хорошо работает. Но если логика проектирования нарушена, если пользователь путается, какие красивые кнопочки ни делай, они не влюбят его в ваш ресурс и не помогут совершить покупку.

Когда пора делать UI-кит

Можно использовать два подхода:

  • Отрисовываем элементы и дополняем UI-кит по ходу работы над макетами. Тогда frontend-разработчики смогут приступить к своей работе после дизайна.
  • Или как делал я в приведённом примере: в первую очередь готовим UI-кит со всеми необходимыми элементами и их состояниями. После чего собираем макеты, а разработчики параллельно готовят дизайн-систему.

Выбор подхода зависит от ресурсов и задач проекта. В случаях, когда разработчики присоединяются к проекту не сразу, подойдёт первый вариант. Если сроки сжатые, лучше привлекать разработчиков сразу, а создавать дизайн и готовить дизайн-систему параллельно.

Что из себя представляет UI kit и что он дает интернет магазину

Для интернет магазина UI Kit играет роль унифицирующего механизма, который помогает пользователю на каждой странице продукта понимать что обозначает тот или иной элемент: какая кнопка является кнопкой, какая формой, ссылкой, пунктом меню и т.д. Таким образом пользователь понимает чего ожидать от каждого своего действия и увереннее чувствует себя на вашем ресурсе.

Для создателей интернет магазина UI Kit является документом, значительно облегчающим работу. Именно в этот документ может подсмотреть верстальщик, создавая любую дополнительную страницу, взять оттуда данные о точном цвете необходимого элемента, его размере, правилах расположения на странице.

Muliple open items

To display multiple content sections at the same time without one collapsing when the other one is opened, add the option to the data attribute.

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Usage

To apply the Accordion component, add the class and the attribute to a container element. Add the class to each of the content sections within the container. Finally, add the class to any element, like a heading, above the content section to create a toggle.

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Какие элементы входят в UI kit

Набор элементов кита зависит от того, для чего его создавал дизайнер. UI kit будет разным для e-commerce и корпоративного сайта, блога и музыкального плеера. Самые распространенные элементы:

Элементы навигации

Горизонтальная или вертикальная панель, выпадающее меню, дополнительный блок для всплывающего текста с описанием, иконка-гамбургер.


Навигация в UI kit. Источник.

Формы

Все, что придется заполнять пользователю: форма регистрации, обратной связи, оформления заказа.


Формы в UI kit. Источник

Виджеты

Все показатели на дашборде, которые важны для сайта: количество подписчиков, последние фото в Instagram, погода, курс валют и так далее.


Виджеты в UI kit. Источник

Кнопки, поля ввода и остальные базовые элементы.


Состояние кнопок в UI kit. Источник 

То, как будут отображаться новости и статьи.


Элементы блога в UI kit. Источник

Элементы e-commerce

Фильтры, каталог, карточка товара, разные варианты отображения, похожие и «вы недавно смотрели»-товары.


Элементы e-commerce в UI kit. Источник
Элементы e-commerce в UI kit. Источник
Элементы e-commerce в UI kit. Источник

Как вы уже поняли, многие дизайнеры оформляют UI kit в виде презентации. В ней они часто показывают примеры готовых страниц, собранных из разных элементов. По сути, UI kit — это самодостаточный продукт, который можно продать и купить. Для этого существуют специальные торговые площадки, такие как Designmodo Market, UI8, Creative Market и другие.

Можно ли сделать универсальный UI kit или использовать один и тот же на разных проектах? Теоретически да, но обычно киты разрабатываются индивидуально под конкретный проект — и учитывают его бизнес-задачи и фирменный стиль.

На многих сервисах можно найти и бесплатные UI kit — например, на Freebiesbug и Graphic Burger. Это удобно для начинающих дизайнеров: можно использовать готовые решения в своих интерфейсах.

Кроме того, хорошие UI kit могут вдохновить на создание собственных и повысят общий уровень насмотренности

Когда мы работаем с продуктами других дизайнеров, то учимся замечать важное в мелочах и формируем собственное видение. Практика вместе с теорией — мощный инструмент в развитии дизайнера

Убедиться в этом и стать крутым специалистом можно на курсе «UX-дизайн».

Курс «UX-дизайн»

Создавайте эффективные и полезные решения при помощи нового уникального подхода в дизайне. В течение курса вы узнаете, как сделать не просто визуально привлекательные проекты, но и кардинально изменить мышление бизнеса в диджитал, оцифровать любой продукт и сделать его максимально конкурентоспособным.

  • Живая обратная связь с преподавателями
  • Неограниченный доступ к материалам курса
  • Стажировка в компаниях-партнёрах
  • Дипломный проект от реального заказчика
  • Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

Margin

Add one of the following classes to add spacing to block elements.

Class Description
Adds the same top and bottom margins as a paragraph usually has.
Adds top margin.
Adds bottom margin.
Adds left margin.
Adds right margin.

Larger margin

Add one of the following classes to add larger spacing to block elements.

Class Description
Adds large top and bottom margin.
Adds large top margin.
Adds large bottom margin.
Adds large left margin.
Adds large right margin.

Smaller margin

Add one of the following classes to add smaller spacing to block elements.

Class Description
Adds small top and bottom margin.
Adds small top margin.
Adds small bottom margin.
Adds small left margin.
Adds small right margin.

Remove margin

Add one of the following classes to remove margin from block elements.

Class Description
Removes all margins.
Removes top margin.
Removes bottom margin.

Clearing and floating

Floating is fundamental for creating all kinds of layouts. But floats need to be cleared or in the worst case, you might end up with a scrambled site. The following classes will help you to setup basic layouts.

Class Description
Float the element to the left.
Float the element to the right.
Add this class to a parent container to clear floats.

New block formatting context

Instead of using the class, you can create a new block formatting context to clear floats. Depending on your setup, you can evaluate which method is more suited.

Class Description
Sets overflow to hidden to create a new block formatting context.
Sets display to table-cell to create a new block formatting context.

Alignment of images and objects

Align images or other elements with spacing between the text and the element.

Class Description
Floats the element to the left and creates right and bottom margin.
Floats the element to the right and creates left and bottom margin.
Only affects device widths of 768px and higher.
Only affects device widths of 768px and higher.
Centers the element and creates bottom margin.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Ссылка на основную публикацию