Rivalry2

Что значит «адаптивный»? Объясняем простыми словами
2026-02-21 18:26 Diff
https://skillbox.ru/media/design/adaptive-prostymi-slovami/
#статьи
21 мар 2023
0
Что значит «адаптивный»? Объясняем простыми словами

Заходят как-то в бар дизайнер и айтишник, а джун их спрашивает: «И как это понимать?»
Иллюстрация: Оля Ежак для Skillbox Media
Пишем про дизайн и искусство. Всё, что вы хотели знать о настоящем, прошлом и будущем визуальной культуры.
Адаптивность — это термин, который встречается и в дизайне, и в айти. Он означает одно и то же? Или в каждой области подразумевается своё значение?
Простыми словами объясняют, что такое «адаптивный», арт-директор Ален Загардинов и фронтенд-разработчик Олег Рязанцев.
Арт-директор и сеньор-дизайнер в студии Friends Design Department, креативный и саунд-дизайнер, диджей, амбиверт.
Победитель ADCE 2021 и Red Apple 2022.
«Я его адаптирую, адаптирую, а он взорвался… Буду! Буду адаптировать, пока не адаптируется!»
Отсылка к «Санаторию сатаны» :)
Именно цитатой звучит так: «„Монтирую, монтирую, б****, а он взорвался на х**. „Больше не будете ремонтировать?“ „Буду! И буду! Пока он, с***, не будет показывать!“»
Адаптивность — реакция контента, сайта и любых других элементов, находящихся в дизайн-системе, на изменение, увеличение, ротейшен пространства, в котором оно находится.
Изображение: Dmytro Prudnikov / DribbbleИзображение: Tanya Nikolaeva / Behance
Очень важное: адаптивность — это не просто красивый скейлинг. Независимо от формата и размеров носителя она позволяет сохранять:
баланс,
иерархию объектов и элементов,
читаемость.
Изображение: Jovie Brett Bardoles / Dribbble
Адаптивность — это понятие из веб-дизайна. Но я хочу показать, как она может быть связана с диджитал-дизайном вообще и даже как адаптивность работает внутри креатива или графического дизайна.
Адаптивный дизайн, если рассматривать пристально, вариативный. В блоге Shillington есть подборка гифок об этом.
Здесь, например, мы видим, что адаптив адаптивом, но есть различия по ограничениям и возможностям — с заданным контейнером по ширине или без него:
Изображение: Shillington
То же самое можно сказать про приоритетность носителя: десктоп или мобильная версия first? С чего начнём? А что мы потом будем адаптировать под остальные форматы?
Изображение: Shillington
И теперь плавно переходим к понятию «отзывчивый дизайн». Отзывчивый дизайн вытекает из адаптива:
Изображение: Shillington
Адаптив и отзывчивость связаны. Смотрите, я вам схему сделал:
Иллюстрация: Ariel Salminen / Ален Загардинов
Более подробно эта связь описана в Arie. Собственно, там есть мэп самого адаптивного дизайна, которую я перерисовал и перевёл. Так что в какой-то степени этот имидж тоже можно назвать адаптированным под русскоговорящую аудиторию :)
Создавая веб-дизайн из минимально необходимых блоков, заполняя его простыми формами, мы будем развивать и улучшать систему с помощью функциональности, объектов и активных элементов. Это рано или поздно вынудит нас создать адаптивную версию, которая будет отвечать и реагировать на изменение экрана, в котором эта система будет транслироваться.
То есть либо мы создаём условные гайды и правила под каждый формат, либо делаем эту систему перспективно и прогрессивно изменяющейся. Это и есть зачатки отзывчивого дизайна.
Он более гибкий, чем адаптив: для адаптива мы всё же задаём рамки или верстаем сайт/страницу в нескольких форматах. А отзывчивый работает по другой структуре: при возможности прогрессивной сетки, выставленных размерах, пропорциях и расстояниях наша система будет сохранять структуру и видоизменяться, становиться «резиновой».
Мы будем куролесить как вздумается, а макет будет послушным мальчиком и адекватно подстроится под заданные ограничения.
Подробнее можно прочитать на «Хабре».
Условно говоря, адаптивный дизайн — это жанр, а отзывчивый дизайн — его поджанр.
И если адаптивом был всеми известный рок в виде Guns‘n’Roses или Black Sabbath, то отзывчивый — это уже новое прочтение и нечто более гибкое для нашего времени и вкусов публики: Yves Tumor и Arctic Monkeys, прости господи.
Но сместим фокус от веб-дизайна к диджиталу и графическому дизайну.
Говоря про диджитал, хочу наглядно показать адаптив изображения уже не под формат экранов, а под формат средства передачи информации и каналы коммуникации. Это посты в соцсети, сторис и стандартная горизонтальная пикча 16×9, которые мы повсеместно используем.
Мы сохраняем баланс и суть месседжа, но меняем заполненность макета контентом
Изображение: предоставлено Аленом Загардиновым
А теперь десерт. Проект креативного пространства Pirate от британской студии Only.
Очень смелый и крутой проект, на мой взгляд. Их главный месседж: Democratizing creative space. Оно и видно…
Изображение: Only. / Behance
За основу взят самый обычный… Arial. И его вывернули наизнанку.
Изображение: Only. / Behance
Что же здесь примечательного? И главное — адаптивного?
Ребята разрушили правила и создали их заново. Взяли за основу шрифт, который они стали тянуть как им вздумается по заданной системе, где используется либо процентное соотношение 50%, 100%, 300% по вертикали или горизонтали, либо более креативный подход в физических носителях, когда всё пространство заполнено текстовым фреймом.
Изображение: Only. / Behance
Смело, эффектно, свежо. Система есть система, даже если визуально она нам не понятна с первого взгляда или не считывается моментально. Но она есть и работает!
Главный подход к этому дизайну — создать продукт, выделяющийся на фоне других площадок под креативные пространства, быть запоминающимся. Элемент дизайн-системы — адаптивная типографика, которая, будто жидкость, растекается по всему холсту, заполняя его полностью.
JavaScript-разработчик веб-приложения «Альфа-Банка».
Сейчас начинающим разработчикам странно слышать понятие «адаптивность». И так ясно, что у нас есть куча устройств, на которых мы можем смотреть веб-страницы: мобильные телефоны, планшеты, ноутбуки, компьютеры с различными диагоналями мониторов и даже телевизоры. Все перечислять не будем, но да, мы знаем, что есть умельцы, кто и с тамагочи или с холодильника сёрфит по веб-сайтам, но до такого мы доходить не будем. Это крайне редкий кейс, на котором мы не будем заострять внимание.
Если вернуться на много лет назад, когда трава была ещё зеленее и небо голубее и… Короче, когда интернет только появился, у нас, по сути, были только ПК с примерно одинаковыми дисплеями, и сайты разрабатывались только для них. Ни о чём больше не надо было думать: ни JS ещё не было, ни React… Были же времена. Было круто! (Нет.)
Mail.ru в 2000-м выглядел так. Тогда это ещё была почтовая служба
Изображение: mail.ru / Habr
Но в начале 2000-х активно начал набирать обороты мобильный интернет, и люди стали выходить в Сеть с мобильных телефонов. Что думаете, как отображался сайт на экране мобильного телефона, который разрабатывался исключительно для десктопа? Правильно: криво, нечитаемо, приходилось постоянно скроллить вправо, влево.
После этого разработчики задумались над адаптацией контента сайта для разных устройств, чтобы везде всё было читаемо и красиво.
Первый вариант мобильной версии сайта vkontakte.ru
Изображение: AM-STUDiO / Shutterstock
Постепенно доля пользователей, выходящих в интернет с мобильных устройств, росла. Теперь она достигает 59% против 38% пользователей, которые выходят в интернет с десктопа (это средние цифры по миру. Данные приведены на момент написания статьи).
Если посмотреть данные по отдельным странам, например Индии, там вообще примерно 76% на 24%.
Итак, мы видим, что люди чаще пользуются мобильными устройствами для выхода в интернет. Соответственно, если вы дорожите репутацией и уважаете своих пользователей, то вы обязательно должны сделать мобильную версию приложения.
Доля планшетов очень мала, поэтому отдельно для них разработку почти не ведут. Обычно используют мобильную версию или что-то среднее между десктопом и мобилкой с минимальными изменениями и затратами сил.
А значит, адаптивность — первостепенный фактор в разработке веб-сайта.
Есть подходы к разработке, когда начинают с мобильной версии, а на её основе уже делают все остальные. Это называется mobile-first.
В Google работает индексация mobile-first: если у сайта нет мобильной версии, то он может не отобразиться в выдаче поисковика.
Бывают случаи, когда можно обойтись только одной какой-то версией.
Например? А когда вы разрабатываете приложение специально для какого-то устройства:
админку или любые внутренние сервисы компании для сотрудников, которые пользуются ими только с компьютера;
веб-интерфейс для терминалов оплаты;
приложения для курьеров, им будет достаточно только мобильной версии. Очень сомневаюсь, что кто-то будет таскать с собой компьютер в поездки по городу.
Фото: Egor Myznik / Unsplash
Ну, вроде всё. Историю обсудили, на словах тоже вроде все обговорили, теперь перейдём к делу.
Есть несколько вариантов адаптации сайта (на самом деле как таковой классификации нет, разделим сами).
Это подход, когда все элементы сайта имеют фиксированную ширину. С какого бы устройства мы ни зашли, сайт всегда будет выглядеть одинаково. Соответственно, если элемент не поместится в экран, то появятся полосы прокрутки.
Изображение: Мария Черноскулова
Сейчас это уже пережиток прошлого, когда мониторы имели фиксированные популярные разрешения 800×600 или 1024×768.
Задаётся банально в CSS свойством width: 500px.
Элементы на странице остаются на своих местах, но при этом тянутся (как резина) либо сжимаются в соответствии с шириной экрана. Им задаётся относительная ширина, например в процентах width: 100%.
Всё бы ничего, но обычно в итоге при определённой ширине экрана мы получим вот такой результат. Выглядит некруто:
Изображение: Мария Черноскулова
И вообще, сверху показан маловероятный результат. Обычно в итоге мы получаем это. Выглядит совсем некруто. Нам не подходит:
Текст банально не помещается в блок и вылезает за его пределы
Изображение: Мария Черноскулова
Это тоже устаревший способ, который сейчас не используется в чистом виде, но знать о нём нужно.
Изображение: Мария Черноскулова
В основе — медиазапросы, указанные в CSS.
Метод очень похож на отзывчивую вёрстку (рассмотрим далее). Суть заключается в том, что мы расставляем «брейкпоинты» — точки, равные ширине экрана (окну браузера). Проходя через них, наш сайт будет перестраиваться.
Ширину элементов при этом задаём фиксированно.
Если простыми словами, то наша страница трансформируется (как бы прыгает), когда мы преодолеваем эти точки, перестраивая контент на новый лад, описанный в CSS. В итоге мы получаем набор фиксированных макетов для каждого промежутка.
Главная проблема прячется за словом «фиксированный». Мы не можем предугадать, как будет выглядеть приложение на всех устройствах. Могут появляться лишние пространства (например, по бокам), как на изображении выше.
Обычно мы используем переменные (это примерные цифры, я решил их использовать для наглядности. В любом случае они подбираются конкретно под вашу задачу, а не возникают с неба):
Изображение: предоставлено Олегом Рязанцевым
Задаём адаптивность следующим образом (CSS code, если его можно назвать словом code ?):
Изображение: предоставлено Олегом Рязанцевым
Данной записью мы говорим, что свойство width: 600px для класса .myClass применится, только если ширина экрана будет меньше или равна 768 px. Во всех остальных случаях она будет равна 900 px.
Также можно наоборот:
Изображение: предоставлено Олегом Рязанцевым
Свойство width: 900px для класса .myOtherClass применится, только если ширина экрана будет больше или равна 1024 px.
Важно не перепутать больше или меньше, но обещаю, что придётся это проверить не раз, таков путь ?
Вы можете комбинировать условия, а ещё почитать документацию и изучить тему более подробно.
Отмечу: эти свойства применяются не только к ширине экрана устройства, но и к ширине окна браузера, что вполне логично.
Откройте любой сайт в браузере (почти любой, почему «почти», узнаем дальше), желательно — одностраничный лендинг. Захватите левой кнопкой мыши правый или левый край окна браузера и попробуйте увеличить или уменьшить размер окна. Вы в реальном времени увидите, как сайт будет перестраиваться по брейкпоинтам.
Поиграли? Тогда идём дальше.
И, наконец, победитель сегодняшней номинации.
Изображение: предоставлено Олегом Рязанцевым
Если совсем в двух словах, то это резиновая + адаптивная вёрстка.
Мы задаём медиазапросы + ширину элементов указываем в относительных единицах, чтобы они комфортно для себя и пользователя растягивались на ширину экрана, окна или контейнера — в зависимости от того, куда помещён элемент.
Что-то типа такого:
Изображение: предоставлено Олегом Рязанцевым
В итоге, попадая на границу расставленных нами брейкпоинтов, страница не прыгает, а плавно и лаконично перестраивается и адаптируется к ширине экрана или окна. Это самый удачный метод из всех описанных выше.
Да, фишка в том, что все методы, описанные выше, — это чисто условное разделение. Вы можете комбинировать их под ваши нужды. Например, использовать брейкпоинты (это база), а ширину элементов указывать так, как вам надо — либо «тянущуюся», либо фиксированную. Всё зависит от ваших задач, ограничений нет, помните это.
Фото: Ljupco Smokovski / Shutterstock
Вышеописанный метод неплох для небольших приложений, но представьте, что у вас большое.
Каждый раз, заходя на сайт, вы будете подгружать стили и элементы для всех устройств. Если мы заходим на сайт с мобилки, то зачем нам грузить все стили для десктопа? Это совсем нелогично, это увеличит интернет-трафик и время загрузки — и это не очень хорошая практика.
Часто большие компании разделяют сборки приложений на мобильную и десктопную версии, и когда вы заходите с телефона, вы загружаете именно мобильную версию, которая содержит стили и элементы только для мобилок. Это значительно уменьшает трафик.
Некоторые компании полностью разделяют приложения. Попробуйте зайти на vk.com или youtube.com с телефона, и вы увидите, что URL автоматически трансформируется в m.vk.com и m.youtube.com. Приложения поместили на отдельные поддомены — точнее, полностью разделили их!
В этом есть и минусы для разработки, так как приходится поддерживать одновременно два приложения.
Но можно также использовать комбинированный метод, и с помощью специальных настроек и щепотки магии ваша сборка будет разделяться для отдельных типов устройств, но это уже тема другой беседы.
У вас может появиться вопрос: «Автор упоминал много раз относительные („резиновые“) единицы измерения, но ничего о них не рассказал!»
И вы правы, оставим это на самостоятельное изучение, потому что самый важный навык разработчика — искать и изучать информацию самому.
Попробуйте бесплатно 4 топовые профессии в дизайне
Пройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→
<!DOCTYPE html>
<html class="l-html" lang="ru">
<head>
    <script>
        mindbox = window.mindbox || function() { mindbox.queue.push(arguments); };
        mindbox.queue = mindbox.queue || [];
        mindbox('create', {
            endpointId: 'skillbox.skillboxMediaWebsite'
        });
    </script>
    <script src="https://api.s.mindbox.ru/scripts/v1/tracker.js" async></script>
    <script>window.yaContextCb = window.yaContextCb || []</script>
    <script src="https://yandex.ru/ads/system/context.js" async></script>
            <!-- Google Tag Manager -->
        <script async data-skip-moving="true" type="text/javascript">
            
            /** Google Tagmanager */
            ;(function (w, d, s, l, i) {
                w[l] = w[l] || [];
                w[l].push({
                    'gtm.start':
                        new Date().getTime(), event: 'gtm.js'
                });
                var f = d.getElementsByTagName(s)[0],
                    j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : '';
                j.async = true;
                j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
                f.parentNode.insertBefore(j, f);
            })(window, document, 'script', 'dataLayer', 'GTM-NLCGQ25');

            
            window.dataLayer = window.dataLayer || [];

            function gtag() {
                window.dataLayer.push(arguments);
            }

            gtag('js', new Date());

                        gtag('config', 'GTM-NLCGQ25');
                    </script>
        <!-- End Google Tag Manager -->
        <!-- Retail Rocket -->
    <script type="text/javascript">
        var rrPartnerId = "6048a0d097a52514f050731f";
        var rrApi = {};
        var rrApiOnReady = rrApiOnReady || [];
        rrApi.addToBasket = rrApi.order = rrApi.categoryView = rrApi.view =
            rrApi.recomMouseDown = rrApi.recomAddToCart = function() {};
        (function(d) {
            var ref = d.getElementsByTagName('script')[0];
            var apiJs, apiJsId = 'rrApi-jssdk';
            if (d.getElementById(apiJsId)) return;
            apiJs = d.createElement('script');
            apiJs.id = apiJsId;
            apiJs.async = true;
            apiJs.src = "//cdn.retailrocket.ru/content/javascript/tracking.js";
            ref.parentNode.insertBefore(apiJs, ref);
        }(document));
    </script>
    <!-- End Retail Rocket -->
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <meta name="google-site-verification" content="UA-kf725UpqwkHenFmDQ05SW115fL9UdD9uXiFy-ibQ"/>
    <meta name="robots" content="index, follow"/>

    <link rel="dns-prefetch" href="//fonts.googleapis.com">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="canonical" href="https://skillbox.ru/media/design/adaptive-prostymi-slovami/">

    <link rel="preload" href="https://marketplace.canva.com/EAD2962NKnQ/2/0/1600w/canva-rainbow-gradient-pink-and-purple-zoom-virtual-background-_Tcjok-d9b4.jpg" as="image" />
    <link rel="preload" href="https://via.placeholder.com/1170x250/92c952" as="image" />
    <link rel="preload" href="https://via.placeholder.com/768x250/40E0D0" as="image" />
    <link rel="preload" href="https://via.placeholder.com/375x250/ffbcee" as="image" />

    <title>Что значит «адаптивный»? Объясняем простыми словами / Skillbox Media</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="что такое адаптивный, адаптивный дизайн простыми словами. что такое адаптивный дизайн, адаптивный простыми словами" />
<meta name="description" content="Что значит «адаптивный» в дизайне и в разработке, простыми словами объясняют эксперты в этой статье." />
<link href="/bitrix/cache/css/s1/media/kernel_main/kernel_main_v1.css?177096852510536" type="text/css"  rel="stylesheet" />
<link href="/bitrix/js/ui/fonts/opensans/ui.font.opensans.css?16341171742599" type="text/css"  rel="stylesheet" />
<link href="/bitrix/js/main/popup/dist/main.popup.bundle.css?163411696226345" type="text/css"  rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css" type="text/css"  rel="stylesheet" />
<link href="/bitrix/cache/css/s1/media/page_a1ad23d5ae1fea4c6ac7c690c80a4763/page_a1ad23d5ae1fea4c6ac7c690c80a4763_v1.css?1771490810746236" type="text/css"  rel="stylesheet" />
<link href="/bitrix/cache/css/s1/media/template_176a7c2453ad8025fa7d27f65ba6a4b1/template_176a7c2453ad8025fa7d27f65ba6a4b1_v1.css?1771490810442835" type="text/css"  data-template-style="true" rel="stylesheet" />
<script type="text/javascript">if(!window.BX)window.BX={};if(!window.BX.message)window.BX.message=function(mess){if(typeof mess==='object'){for(let i in mess) {BX.message[i]=mess[i];} return true;}};</script>
<script type="text/javascript">(window.BX||top.BX).message({'JS_CORE_LOADING':'Загрузка...','JS_CORE_NO_DATA':'- Нет данных -','JS_CORE_WINDOW_CLOSE':'Закрыть','JS_CORE_WINDOW_EXPAND':'Развернуть','JS_CORE_WINDOW_NARROW':'Свернуть в окно','JS_CORE_WINDOW_SAVE':'Сохранить','JS_CORE_WINDOW_CANCEL':'Отменить','JS_CORE_WINDOW_CONTINUE':'Продолжить','JS_CORE_H':'ч','JS_CORE_M':'м','JS_CORE_S':'с','JSADM_AI_HIDE_EXTRA':'Скрыть лишние','JSADM_AI_ALL_NOTIF':'Показать все','JSADM_AUTH_REQ':'Требуется авторизация!','JS_CORE_WINDOW_AUTH':'Войти','JS_CORE_IMAGE_FULL':'Полный размер'});</script>

<script type="text/javascript" src="/bitrix/js/main/core/core.js?1634117028565340"></script>

<script>BX.setJSList(['/bitrix/js/main/core/core_ajax.js','/bitrix/js/main/core/core_promise.js','/bitrix/js/main/polyfill/promise/js/promise.js','/bitrix/js/main/loadext/loadext.js','/bitrix/js/main/loadext/extension.js','/bitrix/js/main/polyfill/promise/js/promise.js','/bitrix/js/main/polyfill/find/js/find.js','/bitrix/js/main/polyfill/includes/js/includes.js','/bitrix/js/main/polyfill/matches/js/matches.js','/bitrix/js/ui/polyfill/closest/js/closest.js','/bitrix/js/main/polyfill/fill/main.polyfill.fill.js','/bitrix/js/main/polyfill/find/js/find.js','/bitrix/js/main/polyfill/matches/js/matches.js','/bitrix/js/main/polyfill/core/dist/polyfill.bundle.js','/bitrix/js/main/core/core.js','/bitrix/js/main/polyfill/intersectionobserver/js/intersectionobserver.js','/bitrix/js/main/lazyload/dist/lazyload.bundle.js','/bitrix/js/main/polyfill/core/dist/polyfill.bundle.js','/bitrix/js/main/parambag/dist/parambag.bundle.js']);
BX.setCSSList(['/bitrix/js/main/lazyload/dist/lazyload.bundle.css','/bitrix/js/main/parambag/dist/parambag.bundle.css']);</script>
<script type="text/javascript">(window.BX||top.BX).message({'AMPM_MODE':false});(window.BX||top.BX).message({'MONTH_1':'Январь','MONTH_2':'Февраль','MONTH_3':'Март','MONTH_4':'Апрель','MONTH_5':'Май','MONTH_6':'Июнь','MONTH_7':'Июль','MONTH_8':'Август','MONTH_9':'Сентябрь','MONTH_10':'Октябрь','MONTH_11':'Ноябрь','MONTH_12':'Декабрь','MONTH_1_S':'января','MONTH_2_S':'февраля','MONTH_3_S':'марта','MONTH_4_S':'апреля','MONTH_5_S':'мая','MONTH_6_S':'июня','MONTH_7_S':'июля','MONTH_8_S':'августа','MONTH_9_S':'сентября','MONTH_10_S':'октября','MONTH_11_S':'ноября','MONTH_12_S':'декабря','MON_1':'янв','MON_2':'фев','MON_3':'мар','MON_4':'апр','MON_5':'май','MON_6':'июн','MON_7':'июл','MON_8':'авг','MON_9':'сен','MON_10':'окт','MON_11':'ноя','MON_12':'дек','DAY_OF_WEEK_0':'Воскресенье','DAY_OF_WEEK_1':'Понедельник','DAY_OF_WEEK_2':'Вторник','DAY_OF_WEEK_3':'Среда','DAY_OF_WEEK_4':'Четверг','DAY_OF_WEEK_5':'Пятница','DAY_OF_WEEK_6':'Суббота','DOW_0':'Вс','DOW_1':'Пн','DOW_2':'Вт','DOW_3':'Ср','DOW_4':'Чт','DOW_5':'Пт','DOW_6':'Сб','FD_SECOND_AGO_0':'#VALUE# секунд назад','FD_SECOND_AGO_1':'#VALUE# секунду назад','FD_SECOND_AGO_10_20':'#VALUE# секунд назад','FD_SECOND_AGO_MOD_1':'#VALUE# секунду назад','FD_SECOND_AGO_MOD_2_4':'#VALUE# секунды назад','FD_SECOND_AGO_MOD_OTHER':'#VALUE# секунд назад','FD_SECOND_DIFF_0':'#VALUE# секунд','FD_SECOND_DIFF_1':'#VALUE# секунда','FD_SECOND_DIFF_10_20':'#VALUE# секунд','FD_SECOND_DIFF_MOD_1':'#VALUE# секунда','FD_SECOND_DIFF_MOD_2_4':'#VALUE# секунды','FD_SECOND_DIFF_MOD_OTHER':'#VALUE# секунд','FD_SECOND_SHORT':'#VALUE#с','FD_MINUTE_AGO_0':'#VALUE# минут назад','FD_MINUTE_AGO_1':'#VALUE# минуту назад','FD_MINUTE_AGO_10_20':'#VALUE# минут назад','FD_MINUTE_AGO_MOD_1':'#VALUE# минуту назад','FD_MINUTE_AGO_MOD_2_4':'#VALUE# минуты назад','FD_MINUTE_AGO_MOD_OTHER':'#VALUE# минут назад','FD_MINUTE_DIFF_0':'#VALUE# минут','FD_MINUTE_DIFF_1':'#VALUE# минута','FD_MINUTE_DIFF_10_20':'#VALUE# минут','FD_MINUTE_DIFF_MOD_1':'#VALUE# минута','FD_MINUTE_DIFF_MOD_2_4':'#VALUE# минуты','FD_MINUTE_DIFF_MOD_OTHER':'#VALUE# минут','FD_MINUTE_0':'#VALUE# минут','FD_MINUTE_1':'#VALUE# минуту','FD_MINUTE_10_20':'#VALUE# минут','FD_MINUTE_MOD_1':'#VALUE# минуту','FD_MINUTE_MOD_2_4':'#VALUE# минуты','FD_MINUTE_MOD_OTHER':'#VALUE# минут','FD_MINUTE_SHORT':'#VALUE#мин','FD_HOUR_AGO_0':'#VALUE# часов назад','FD_HOUR_AGO_1':'#VALUE# час назад','FD_HOUR_AGO_10_20':'#VALUE# часов назад','FD_HOUR_AGO_MOD_1':'#VALUE# час назад','FD_HOUR_AGO_MOD_2_4':'#VALUE# часа назад','FD_HOUR_AGO_MOD_OTHER':'#VALUE# часов назад','FD_HOUR_DIFF_0':'#VALUE# часов','FD_HOUR_DIFF_1':'#VALUE# час','FD_HOUR_DIFF_10_20':'#VALUE# часов','FD_HOUR_DIFF_MOD_1':'#VALUE# час','FD_HOUR_DIFF_MOD_2_4':'#VALUE# часа','FD_HOUR_DIFF_MOD_OTHER':'#VALUE# часов','FD_HOUR_SHORT':'#VALUE#ч','FD_YESTERDAY':'вчера','FD_TODAY':'сегодня','FD_TOMORROW':'завтра','FD_DAY_AGO_0':'#VALUE# дней назад','FD_DAY_AGO_1':'#VALUE# день назад','FD_DAY_AGO_10_20':'#VALUE# дней назад','FD_DAY_AGO_MOD_1':'#VALUE# день назад','FD_DAY_AGO_MOD_2_4':'#VALUE# дня назад','FD_DAY_AGO_MOD_OTHER':'#VALUE# дней назад','FD_DAY_DIFF_0':'#VALUE# дней','FD_DAY_DIFF_1':'#VALUE# день','FD_DAY_DIFF_10_20':'#VALUE# дней','FD_DAY_DIFF_MOD_1':'#VALUE# день','FD_DAY_DIFF_MOD_2_4':'#VALUE# дня','FD_DAY_DIFF_MOD_OTHER':'#VALUE# дней','FD_DAY_AT_TIME':'#DAY# в #TIME#','FD_DAY_SHORT':'#VALUE#д','FD_MONTH_AGO_0':'#VALUE# месяцев назад','FD_MONTH_AGO_1':'#VALUE# месяц назад','FD_MONTH_AGO_10_20':'#VALUE# месяцев назад','FD_MONTH_AGO_MOD_1':'#VALUE# месяц назад','FD_MONTH_AGO_MOD_2_4':'#VALUE# месяца назад','FD_MONTH_AGO_MOD_OTHER':'#VALUE# месяцев назад','FD_MONTH_DIFF_0':'#VALUE# месяцев','FD_MONTH_DIFF_1':'#VALUE# месяц','FD_MONTH_DIFF_10_20':'#VALUE# месяцев','FD_MONTH_DIFF_MOD_1':'#VALUE# месяц','FD_MONTH_DIFF_MOD_2_4':'#VALUE# месяца','FD_MONTH_DIFF_MOD_OTHER':'#VALUE# месяцев','FD_MONTH_SHORT':'#VALUE#мес','FD_YEARS_AGO_0':'#VALUE# лет назад','FD_YEARS_AGO_1':'#VALUE# год назад','FD_YEARS_AGO_10_20':'#VALUE# лет назад','FD_YEARS_AGO_MOD_1':'#VALUE# год назад','FD_YEARS_AGO_MOD_2_4':'#VALUE# года назад','FD_YEARS_AGO_MOD_OTHER':'#VALUE# лет назад','FD_YEARS_DIFF_0':'#VALUE# лет','FD_YEARS_DIFF_1':'#VALUE# год','FD_YEARS_DIFF_10_20':'#VALUE# лет','FD_YEARS_DIFF_MOD_1':'#VALUE# год','FD_YEARS_DIFF_MOD_2_4':'#VALUE# года','FD_YEARS_DIFF_MOD_OTHER':'#VALUE# лет','FD_YEARS_SHORT_0':'#VALUE#л','FD_YEARS_SHORT_1':'#VALUE#г','FD_YEARS_SHORT_10_20':'#VALUE#л','FD_YEARS_SHORT_MOD_1':'#VALUE#г','FD_YEARS_SHORT_MOD_2_4':'#VALUE#г','FD_YEARS_SHORT_MOD_OTHER':'#VALUE#л','CAL_BUTTON':'Выбрать','CAL_TIME_SET':'Установить время','CAL_TIME':'Время','FD_LAST_SEEN_TOMORROW':'завтра в #TIME#','FD_LAST_SEEN_NOW':'только что','FD_LAST_SEEN_TODAY':'сегодня в #TIME#','FD_LAST_SEEN_YESTERDAY':'вчера в #TIME#','FD_LAST_SEEN_MORE_YEAR':'более года назад'});</script>
<script type="text/javascript">(window.BX||top.BX).message({'WEEK_START':'1'});</script>
<script type="text/javascript">(window.BX||top.BX).message({'LANGUAGE_ID':'ru','FORMAT_DATE':'DD.MM.YYYY','FORMAT_DATETIME':'DD.MM.YYYY HH:MI:SS','COOKIE_PREFIX':'BITRIX_SM','SERVER_TZ_OFFSET':'10800','UTF_MODE':'Y','SITE_ID':'s1','SITE_DIR':'/','USER_ID':'','SERVER_TIME':'1771698378','USER_TZ_OFFSET':'0','USER_TZ_AUTO':'Y','bitrix_sessid':'7a93bcbce898276f56a534533cf1334b'});</script>


<script type="text/javascript" src="/bitrix/js/main/date/main.date.js?159955296434530"></script>
<script type="text/javascript" src="/bitrix/js/main/popup/dist/main.popup.bundle.js?1634116962109107"></script>
<script type="text/javascript" src="/bitrix/js/main/core/core_date.js?163411653136080"></script>
<script type="text/javascript" src="/bitrix/js/ui/vue/vue2/prod/dist/vue.bundle.js?1635848017173206"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fingerprintjs2/2.1.0/fingerprint2.min.js"></script>
<script type="text/javascript">BX.setCSSList(['/bitrix/js/main/core/css/core_date.css','/setka/css/setka_skillbox.css','/local/templates/.default/components/bitrix/news.detail/article/style.css','/static/css/newarticle.css','/local/templates/media/libs/jquery.formstyler.css','/local/templates/media/fonts/graphik-font/stylesheet.css','/static/css/main.css','/local/templates/media/template_styles.css']);</script>
<script src="https://cdn.skillbox.pro/frontend-libs/promo-banner/5.10.1/banner-plugin.min.js"></script>
<script type="text/javascript" async src="https://relap.io/api/v6/head.js?token=sI73Ph6a5BnkqK2o"></script>
<meta property="og:title" content="Что значит «адаптивный»? Объясняем простыми словами" />
<meta property="og:description" content="Что значит «адаптивный» в дизайне и в разработке, простыми словами объясняют эксперты в этой статье." />
<meta property="og:url" content="https://skillbox.ru/media/design/adaptive-prostymi-slovami/" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="skillbox.ru" />
<meta property="og:locale" content="ru_RU" />
<meta property="og:image" content="https://248006.selcdn.ru/main/iblock/1b7/1b7279787ee8f54745af60ef48df5c53/8e8abe101a69df7b3576e2279ab14871.jpg" />
<meta name="relap-image" content="https://248006.selcdn.ru/main/iblock/1b7/1b7279787ee8f54745af60ef48df5c53/8e8abe101a69df7b3576e2279ab14871.jpg" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="315" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content="https://248006.selcdn.ru/main/iblock/1b7/1b7279787ee8f54745af60ef48df5c53/8e8abe101a69df7b3576e2279ab14871.jpg" />
<meta property="vk:image" content="https://248006.selcdn.ru/main/iblock/398/398becb6b161b120d16c7ee442007752/def684f8689aae215e716f0fb8ae432f.jpg" />
<meta property="article:author" content="Редакция «Дизайн» Skillbox Media" />
<meta property="article:tag" content="статьи" />
<meta property="article:section" content="Дизайн" />



<script type="text/javascript" src="/static/js/vendor.js?1771489421543641"></script>
<script type="text/javascript" src="/local/assets/js/common.js?177148933727419"></script>
<script type="text/javascript" src="/static/js/main.js?1771489421125222"></script>
<script type="text/javascript" src="/local/templates/media/js/main.js?17714893372418"></script>
<script type="text/javascript" src="/local/components/prmedia/popup.subscribe/templates/.default/script.js?17714893376820"></script>
<script type="text/javascript" src="/local/templates/.default/components/bitrix/news.detail/article/infinity.js?177148933713735"></script>
<script type="text/javascript" src="/local/templates/.default/components/bitrix/news/articles/script.js?1771489337246"></script>
<script type="text/javascript" src="/setka/js/setka_skillbox.js?1771489337106775"></script>
<script type="text/javascript" src="/local/templates/.default/components/bitrix/news.detail/article/script.js?17714893377503"></script>
<script type="text/javascript">var _ba = _ba || []; _ba.push(["aid", "84a6082a990bbac8858fb733b97bed30"]); _ba.push(["host", "skillbox.ru"]); (function() {var ba = document.createElement("script"); ba.type = "text/javascript"; ba.async = true;ba.src = (document.location.protocol == "https:" ? "https://" : "http://") + "bitrix.info/ba.js";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(ba, s);})();</script>


</head>

<body>
<div class="js-sticky-delimiter"></div>
<div class="bx-panel"></div>
    <!-- Google Tag Manager (noscript) -->
    <noscript>
        <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NLCGQ25" height="0" width="0"
                style="display:none;visibility:hidden"></iframe>
    </noscript>
    <!-- End Google Tag Manager (noscript) -->

<svg class="app-svg-visually-hidden" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="def-arrow-down-a" d="M223 20813l4 5 4-5z"/>
<path id="def-arrow-a" d="M1044.6 803.2a.81.81 0 01-.5.18.8.8 0 01-.8-.8v-3.24c-2.97.1-5.17.88-6.52 2.3a4.86 4.86 0 00-1.39 3.29.8.8 0 01-.75.83h-.04a.79.79 0 01-.79-.74c-.22-3.78.69-6.76 2.69-8.84a10.76 10.76 0 016.81-3.07v-3.3a.8.8 0 011.29-.63l7.91 6.39a.8.8 0 010 1.25zm.3-11.73v2.42a.5.5 0 01-.03.1.8.8 0 01-.05.21.78.78 0 01-.47.42.67.67 0 01-.25.05h-.01c-.06 0-3.93-.04-6.46 2.62-.8.85-1.4 1.87-1.74 2.99 1.79-1.7 4.55-2.57 8.21-2.57.44 0 .8.36.8.8v2.4l5.85-4.72z"/>
<path id="def-be-a" d="M55.6 29.58h6.12v-1.59H55.6zm.64 5.74s.26-2.23 2.58-2.23c2.32 0 2.26 2.23 2.26 2.23zm-3.23 1.27S52.56 42 58.72 42c0 0 5.26.37 5.26-3.81H61.4s-.09 1.59-2.58 1.59c0 0-2.58.17-2.58-2.55l7.74-.01c-.08-.32.9-6.42-5.16-6.36-5.77.05-5.81 5.73-5.81 5.73zm-10.34 2.8v-4.24H47s1.7.16 1.7 2.24c0 1.76-1.06 1.99-1.7 2zM47 29.61s1.16.06 1.16 1.62-.76 1.64-1.49 1.64h-4v-3.26zm4.33 1.3c0-2.68-1.81-3.91-4.26-3.91H39v15.01h8.07s4.92.15 4.92-4.43c0 0 .22-3.73-2.9-3.73 0 0 2.24-.25 2.24-2.94z"/>
<path id="def-briefcase-a" d="M855 13538c0-1.7 1.3-3 3-3s3 1.3 3 3v7c0 1.7-1.3 3-3 3s-3-1.3-3-3v-7z"/>
<path id="def-comments-a" d="M752 8958l-4 4v-12a1 1 0 011-1h11a1 1 0 011 1v7a1 1 0 01-1 1zm12-6v13l-3.2-4H751l2-2h9v-8h1c1 0 1 .45 1 1z"/>
<path id="def-eaye-a" d="M630 8956.22c0 1.04-3.58 5.21-8 5.21s-8-4.26-8-5.21c0-1.05 3.58-5.22 8-5.22s8 4.17 8 5.22zm-5 0h-3v-3.13a3.13 3.13 0 100 6.26 3.07 3.07 0 003-3.13z"/>
<path id="def-file-a" d="M493 9457a2 2 0 01-1.98-2v-16a2 2 0 011.98-2h19.82c1.13 0 2.07.87 2.15 2v16a2.15 2.15 0 01-2.15 2zm0-18v8.83l5.3-4.59a.98.98 0 011.35.05l5.34 5.39 3.27-2.48a.98.98 0 011.36.16l3.35 4.07V9439zm19.97 14.55l-4.27-5.18-3.21 2.43c-.4.3-.95.26-1.3-.09l-5.3-5.35-5.9 5.1v4.54h19.98zm-6.1-10.55a1.98 1.98 0 113.97.04 1.98 1.98 0 01-3.97-.04z"/>
<path id="def-gplus-a" d="M466 10169a4 4 0 013.87-3.99 4.14 4.14 0 012.93.99c-.33.36-.67.71-1.03 1.04-.72-.42-1.58-.75-2.41-.46a2.52 2.52 0 00-1.67 3.23c.41 1.35 2.09 2.1 3.4 1.52a2.22 2.22 0 001.33-1.51c-.78-.01-1.56 0-2.34-.03v-1.36h3.9a4.45 4.45 0 01-.83 3.2c-1 1.28-2.88 1.66-4.4 1.16a4 4 0 01-2.75-3.79z"/><path id="def-gplus-b" d="M476.34 10166h1.32l.01 1.33H479v1.33l-1.33.01v1.33h-1.33l-.01-1.33H475v-1.33l1.33-.01.01-1.33z"/>
<path id="def-inst-a" d="M1480.93 332c-3.5 0-3.95.02-5.32.07-1.37.07-2.3.28-3.14.6-.84.34-1.57.77-2.28 1.5a6.36 6.36 0 00-1.5 2.28 9.84 9.84 0 00-.6 3.14c-.07 1.37-.07 1.82-.07 5.32s.02 3.96.07 5.32c.07 1.37.28 2.31.6 3.14.34.85.77 1.58 1.5 2.29a6.51 6.51 0 002.28 1.5c.82.3 1.77.53 3.14.6 1.37.07 1.82.07 5.32.07s3.96-.02 5.32-.07a9.48 9.48 0 003.14-.6 6.14 6.14 0 002.29-1.5 6.36 6.36 0 001.5-2.29c.3-.81.53-1.77.6-3.14.07-1.36.07-1.82.07-5.32s-.02-3.95-.07-5.32a9.48 9.48 0 00-.6-3.14 6.14 6.14 0 00-1.5-2.28 6.36 6.36 0 00-2.29-1.5 9.84 9.84 0 00-3.14-.6c-1.38-.05-1.82-.07-5.32-.07zm0 2.32c3.45 0 3.85.02 5.22.07 1.27.05 1.94.26 2.4.45.6.25 1.03.52 1.48.97.45.45.73.89.97 1.5.18.44.39 1.14.45 2.39.07 1.37.07 1.76.07 5.21s-.01 3.85-.07 5.22a6.55 6.55 0 01-.45 2.4c-.24.6-.52 1.03-.97 1.48-.45.45-.88.73-1.49.97-.45.18-1.14.39-2.39.45-1.37.07-1.77.07-5.22.07-3.45 0-3.84-.01-5.21-.07a6.55 6.55 0 01-2.4-.45 4.11 4.11 0 01-1.49-.97 4.11 4.11 0 01-.97-1.49 7.52 7.52 0 01-.45-2.39c-.07-1.37-.07-1.77-.07-5.22 0-3.45.02-3.84.07-5.21.05-1.27.26-1.95.45-2.4.25-.6.52-1.04.97-1.49.45-.45.89-.72 1.5-.97a7.52 7.52 0 012.39-.45c1.35-.05 1.76-.07 5.21-.07z"/><path id="def-inst-b" d="M1480.93 349.2a4.3 4.3 0 110-8.59 4.3 4.3 0 010 8.6zm0-10.93a6.62 6.62 0 100 13.24 6.62 6.62 0 000-13.24z"/><path id="def-inst-c" d="M1486.27 338.01a1.54 1.54 0 113.09 0 1.54 1.54 0 01-3.09 0z"/>
<path id="def-like-down-a" d="M1004.33 543.66c-1.1 0-2.45-.86-2.61-3.31-.05-1.41.11-2.82.48-4.19h-2.96c-2.15 0-3.42-1.35-3.42-2.67 0-.39.05-.77.17-1.13a2.4 2.4 0 01-.99-2.03 2.35 2.35 0 011.02-2.05c-.12-.34-.18-.7-.17-1.06.86-.6 1.2-1.7.86-2.7 0-2.52 3.45-2.52 4.57-2.52h2.85c1.3.06 2.56.4 3.71 1 .67.36 1.41.6 2.18.67h3.23c.25 0 .5.11.65.31.12.14 1.1 1.47 1.1 4.69.03 1.8-.28 3.6-.9 5.31a.83.83 0 01-.67.5c-.03 0-3.27.4-4.85 1.98a10.32 10.32 0 00-2.8 5.94 1.4 1.4 0 01-1.45 1.26zm-6.84-10.17c0 .34.52 1 1.75 1h4.06a.83.83 0 01.8 1.1c-.5 1.5-.73 3.07-.72 4.65.08 1.1.44 1.6.79 1.72a11.94 11.94 0 013.23-6.67c1.57-1.58 4.2-2.18 5.32-2.38.41-1.37.62-2.8.61-4.24a8.18 8.18 0 00-.56-3.34h-2.75c-1-.07-1.97-.35-2.85-.81a7.53 7.53 0 00-3.04-.85h-2.85c-1.32 0-2.9.15-2.9.85-.02.11.02.22.09.3a.73.73 0 01.75.77.92.92 0 01-.85.87.85.85 0 00-.85.77c-.05.22.01.44.17.6.42.07.71.45.67.88a.87.87 0 01-.86.77.77.77 0 00-.83.85.8.8 0 00.87.85c.46.01.82.4.81.85 0 .43-.33.78-.76.8-.09.21-.12.44-.1.66z"/>
<path id="def-like-up-a" d="M944.67 520c1.1 0 2.45.87 2.61 3.32.05 1.4-.11 2.82-.48 4.18h2.96c2.15 0 3.42 1.36 3.42 2.67 0 .39-.05.77-.17 1.14a2.4 2.4 0 01.99 2.02c.04.81-.35 1.59-1.02 2.05.12.34.18.7.17 1.07-.86.6-1.2 1.7-.86 2.69 0 2.52-3.45 2.52-4.57 2.52h-2.85a8.94 8.94 0 01-3.71-.99 5.67 5.67 0 00-2.18-.67h-3.23a.83.83 0 01-.65-.32c-.12-.14-1.1-1.47-1.1-4.68-.03-1.81.28-3.62.9-5.32a.83.83 0 01.67-.5c.03 0 3.27-.4 4.85-1.98a10.32 10.32 0 002.8-5.93 1.4 1.4 0 011.45-1.27zm6.84 10.17c0-.34-.52-1-1.75-1h-4.06a.83.83 0 01-.8-1.1c.5-1.5.73-3.07.72-4.65-.08-1.1-.44-1.6-.79-1.72a11.94 11.94 0 01-3.23 6.67c-1.57 1.58-4.2 2.19-5.32 2.38a14.38 14.38 0 00-.61 4.25 8.18 8.18 0 00.56 3.33h2.75c1 .07 1.97.35 2.85.82.94.49 1.98.78 3.04.85h2.85c1.32 0 2.9-.15 2.9-.86a.35.35 0 00-.09-.3.73.73 0 01-.75-.77.92.92 0 01.85-.87c.44 0 .81-.33.85-.77a.65.65 0 00-.17-.6.81.81 0 01-.67-.87.87.87 0 01.86-.78.77.77 0 00.83-.85.8.8 0 00-.87-.85.83.83 0 01-.81-.85c0-.43.33-.78.76-.8.09-.21.12-.43.1-.66z"/>
<path id="def-like-a" d="M701.32 8960.32a.95.95 0 01-.95.95h-5.72c-.96 0-1.92-.95-2.87-.95h-.95v-6.68c.04-.6.4-1.12.95-1.36a4.78 4.78 0 002.87-4.37v-.96a.95.95 0 01.95-.95h.95c.53 0 .95.43.95.95v5.73h3.82a.9.9 0 01.96.96zm-14.31.95v-9.54h1.9a.96.96 0 01.97.95v7.64a.96.96 0 01-.96.95zm.99-8.3a.48.48 0 10.88.38.48.48 0 00-.88-.38z"/>
<path id="def-link-a" d="M626.02 1163.93l-.02 15.99 13.02.01v-4a.86.86 0 01.24-.68.9.9 0 01.66-.28 1 1 0 011 1v4.95a1 1 0 01-.29.7 1 1 0 01-.71.29H625a1 1 0 01-.71-.29 1 1 0 01-.29-.7V1163a1 1 0 011-1h3.95a1 1 0 011 1 .89.89 0 01-.93.93z"/><path id="def-link-b" d="M641.95 1171a1 1 0 01-1-1v-5.59l-9.25 9.3a.99.99 0 01-1.41-.01.99.99 0 01.01-1.41l9.24-9.29h-5.56a1 1 0 01-1-1 1 1 0 011-1h7.97a1 1 0 011 1v8a1 1 0 01-1 1z"/>
<path id="def-mail-a" d="M1058 261c0-.6-.4-1-1-1h-14c-.6 0-1 .4-1 1l8 6.5z"/><path id="def-mail-b" d="M1042 262.5v8.5c0 .6.4 1 1 1h14c.6 0 1-.4 1-1v-8.5l-8 6.5z"/>
<path id="def-outside-a" d="M1204.24 9231.16h-10.05c-.92 0-1.67-.75-1.67-1.68v-4.2c0-.46.38-.84.84-.84a.81.81 0 01.8.84v4.2h10.08v-16.8h-10.08v4.2a.81.81 0 01-.8.84.84.84 0 01-.84-.84v-4.2c0-.93.75-1.68 1.67-1.68h10.05c.92 0 1.67.75 1.67 1.68v16.8c0 .93-.75 1.68-1.67 1.68zm-15.56-10.92h11.37a.84.84 0 110 1.68h-11.36l1.91 1.92a.84.84 0 11-1.18 1.2l-3.35-3.36a.86.86 0 01-.24-.6v-.02a.83.83 0 01.24-.58l3.35-3.36a.83.83 0 011.18 0c.33.33.33.87 0 1.2z"/>
<path id="def-pencil-a" d="M1190.84 9818.68a.64.64 0 01-.19.13l-.07.06-4.42 1.82c-.1.05-.21.07-.32.07a.83.83 0 01-.77-1.15l1.84-4.4v-.02a.38.38 0 01.09-.13l.08-.13v-.01l10.82-10.82-.44-.44-3.56 3.57a.83.83 0 01-1.18-1.18l4.16-4.15a.81.81 0 011.17 0l1.03 1.03 1.86-1.86a.84.84 0 011.17 0l2.58 2.58c.33.32.33.85 0 1.18zm-2.88-1.7l-.58 1.41 1.41-.58zm.88-1.47l1.41 1.4 10.24-10.23-1.4-1.4zm12.69-12.68l-1.27 1.27 1.4 1.4 1.28-1.27z"/>
<path id="def-phone-a" d="M732.62 41c-2.25 0-6.37-2.73-10.24-6.78a33.08 33.08 0 01-5.22-6.96c-1.33-2.53-1.52-4.32-.56-5.31l2.91-2.72c.17-.16.4-.24.63-.23.24.02.46.13.61.32l3.79 4.58c.23.28.28.68.12 1.01l-1.47 3.08 5.24 5.48 2.93-1.54a.83.83 0 01.96.12l4.38 3.96c.17.16.28.38.3.63a.97.97 0 01-.22.67l-2.53 3.02c-.33.34-.81.67-1.63.67zm-14.76-17.78c-.15.21-.25 1.09.83 3.15 1.06 2 2.8 4.32 4.93 6.55 3.87 4.06 7.53 6.25 9 6.25.2 0 .3-.04.33-.08l1.94-2.3-3.27-2.95-2.98 1.56a.84.84 0 01-1.01-.17l-6.12-6.42a.92.92 0 01-.16-1.05l1.48-3.12-2.82-3.42z"/>
<path id="def-plus-a" d="M1223.33 4172.67h-6.66v6.66a.67.67 0 01-1.34 0v-6.66h-6.66a.67.67 0 010-1.34h6.66v-6.66a.67.67 0 011.34 0v6.66h6.66a.67.67 0 010 1.34z"/>
<path id="def-search-a" d="M1092.53 24.87a6.7 6.7 0 10-.05 13.4 6.7 6.7 0 00.05-13.4zm12.1 18.85a.95.95 0 01-1.35 0l-5.4-5.43a8.62 8.62 0 111.35-1.35l5.4 5.43c.37.37.37.98 0 1.35z"/>
<path id="def-shape-a" d="M879 13323h-4a1 1 0 01-1-1v-4a1 1 0 011-1h.85c-1.29-8.14-8.38-15.22-16.85-16.81v.81a1 1 0 01-1 1h-4a1 1 0 01-1-1v-.81c-8.47 1.6-15.56 8.67-16.85 16.81h.85a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4a1 1 0 011-1h1.13c1.03-7.24 6.24-13.76 13.07-17h-6.48a1.98 1.98 0 01-1.72 1.01c-.97 0-1.8-.69-1.98-1.65a2 2 0 011.28-2.23 2 2 0 012.42.87H853v-1a1 1 0 011-1h4a1 1 0 011 1v1h12.27a2.01 2.01 0 110 2h-6.47c6.83 3.24 12.04 9.76 13.07 17H879a1 1 0 011 1v4a1 1 0 01-1 1zm-43-4h-2v2h2zm21-21h-2v2h2zm21 21h-2v2h2zm-22.93-12.51a.52.52 0 01.1-.18l.01-.03.03-.03a1 1 0 01.2-.21l.06-.04c.06-.04.12-.08.19-.1l.04-.02.09-.01.05-.01.16-.03.15.03h.04l.11.01.04.02.19.1.02.02.02.01a.92.92 0 01.24.25l.02.03c.04.05.08.12.1.18l.03.05c.02.07 2.33 7.26 8.51 10.59.26.14.45.39.51.68a.97.97 0 01-.2.82 23.7 23.7 0 00-3.99 8.81 8.02 8.02 0 012.21 5.57 1 1 0 01-1 1h-14a1 1 0 01-1-1 8.02 8.02 0 012.21-5.57 23.66 23.66 0 00-3.99-8.8 1 1 0 01.31-1.51c6.21-3.34 8.49-10.52 8.51-10.59l.03-.04zm.93 20.49a6 6 0 00-5.92 5.02h11.84a6 6 0 00-5.92-5.02zm-4.06-.9a8.17 8.17 0 018.12 0 25.8 25.8 0 013.47-7.78 20.33 20.33 0 01-6.53-6.96v6.93a2 2 0 01-.97 3.73 2.03 2.03 0 01-2.03-2 2 2 0 011-1.7v-6.96a20.33 20.33 0 01-6.53 6.96 25.8 25.8 0 013.47 7.78z"/>
<path id="def-strawberry-a" d="M873.26 13427.96a7.49 7.49 0 01-4.13-1.21 20.45 20.45 0 012.02 8.92c0 10.41-17.26 18.25-28.46 18.25-3.71 0-6.53-.86-8.17-2.48l-.1-.1c-3.9-4.01-2.65-13.97.62-21.78 3.77-9.01 9.53-14.39 15.41-14.39 3.1 0 6.17.68 8.97 1.99a8.12 8.12 0 01-.65-1.24c-1.09-2.7-.53-5.87 1.68-9.44a1 1 0 011.11-.45c.21.06 5.12 1.38 6.8 5.49.8 2.19.7 4.61-.29 6.72 1.25-.51 2.58-.79 3.92-.83 5.12 0 7.74 4.75 8.4 7.26a.97.97 0 01-.45 1.1 12.95 12.95 0 01-6.68 2.19zm-36.36 2.36c-3.42 8.19-3.85 16.84-.97 19.69l.08.09c1.26 1.18 3.62 1.82 6.68 1.82a38.27 38.27 0 0017.26-4.82c3.43-1.92 9.18-5.96 9.18-11.43a18.4 18.4 0 00-18.68-18.5c-5.93 0-10.89 6.79-13.55 13.15zm29.59-18.05c-.97-2.38-3.49-3.6-4.73-4.07-1.52 2.71-1.89 5.05-1.12 6.96.96 2.37 3.48 3.6 4.73 4.08 1.52-2.71 1.89-5.05 1.12-6.97zm5.5 7.13c-1.75.08-3.45.6-4.95 1.51.59 1.54 2.36 5.06 6.22 5.06 1.75-.08 3.45-.6 4.94-1.5-.59-1.55-2.36-5.07-6.21-5.07zm-13.43 13.54h3v3h-3zm-4-5h3v3h-3zm2 13h-3v-3h3zm-7-8h3v3h-3zm0-9h3v3h-3zm2 22h-3v-3h3zm-7-8h3v3h-3zm0-9h3v3h-3zm-5 14h3v3h-3zm0-9h3v3h-3z"/>
<path id="def-telegram-a" d="M823.8 272.93l-4.09 20.05c-.3 1.42-1.16 1.76-2.36 1.1l-6.52-4.77-3.13 3c-.55.47-.75.66-1.27.65-.5 0-.74-.3-1.03-1.1l-2.4-7.29-6.26-1.94c-1.01-.32-1.06-1.66.31-2.05l25.01-9.39c1.14-.52 2.18 0 1.74 1.74zm-17.39 18.55l.6-5.26 11.83-10.54c.31-.36.09-.88-.61-.42l-14.24 8.87z"/>
<path id="def-tm-a" d="M1406.46 346.34l13.28-8.34c.65-.44.86.05.57.39l-11.02 9.91-.57 4.96zm16.84-12.16l-23.32 8.83c-1.27.37-1.24 1.62-.3 1.93l5.84 1.82 2.24 6.86c.28.75.5 1.04.96 1.04.49 0 .67-.18 1.19-.62.58-.55 1.5-1.43 2.92-2.83l6.08 4.49c1.12.62 1.92.3 2.21-1.04l3.8-18.85c.41-1.63-.55-2.12-1.62-1.63z"/>
<path id="def-trash-a" d="M1175 9805h-1.09l-1.8 13.12a2.15 2.15 0 01-2.11 1.88h-8a2.14 2.14 0 01-2.1-1.88l-1.78-13.12H1157a1 1 0 010-2h5v-1a3 3 0 013-3h2a3 3 0 013 3v1h5a1 1 0 010 2zm-7-3a1 1 0 00-1-1h-2a1 1 0 00-1 1v1h4zm-7.87 3l1.75 12.9c.02.05.07.09.12.1h8c.06-.01.1-.05.12-.11l1.78-12.89zm6.87 3h2v6h-2zm-4 0h2v6h-2z"/>
<path id="def-triangle-a" d="M1238 6883l7.22 7.22 7.22-7.22z"/>
<path id="def-user-circle-a" d="M1265.24 30.18a10 10 0 01-2.18 10.9 6.94 6.94 0 00-4.7-4.69 5 5 0 10-4.66.01c-2.24.72-4 2.47-4.72 4.71a10 10 0 1116.26-10.93zm-6.22 1.82a3 3 0 11-6-.01 3 3 0 016 .01zm-8.3 10.48c.4-2.6 2.65-4.5 5.28-4.48 2.73 0 5.1 1.96 5.27 4.37l.03.09a9.9 9.9 0 01-10.57.02zM1256 46a12.01 12.01 0 000-24 12 12 0 100 24z"/>
<path id="def-vb-a" d="M955.45 276.38c.68 3.25.79 6.51-.02 9.76-.14.57-.36 1.11-.58 1.65-.84 2.05-2.5 3.13-4.57 3.73-1.63.48-3.31.69-5 .82-.89.07-2.29.03-3.18.02-.76-.01-.55-.04-1.04.45-.96.97-1.84 1.82-2.76 2.84a28 28 0 01-1.35 1.35v-4.93c0-.25-.07-.4-.3-.5-.26-.1-.5-.24-.75-.34a6.95 6.95 0 01-4.35-4.98 19.93 19.93 0 01-.51-6.16c.07-1.4.26-2.79.64-4.15a6.8 6.8 0 013.48-4.25 13.83 13.83 0 014.79-1.47 25.9 25.9 0 019.8.59 8.9 8.9 0 013.5 1.69 6.59 6.59 0 012.2 3.88zm-12.05-1.52c.54.04 1.07.15 1.6.28 1.98.5 3.52 1.53 4.32 3.43.42.99.63 2.02.7 3.08.02.27.15.42.43.42.27-.01.38-.19.39-.43.02-.21.01-.42.01-.64a7.41 7.41 0 00-1.39-4.12c-1.49-1.96-3.43-2.7-6-2.82-.31-.02-.49.1-.51.42-.01.31.21.36.45.38zm4.39 4.61c.11.4.21.81.26 1.22.03.27-.03.64.42.65.32.01.4-.13.43-.67a4.58 4.58 0 00-.68-2.46c-.96-1.52-2.37-2.16-4.16-2.32-.28-.03-.48.08-.52.37-.05.3.14.44.41.48.55.08 1.08.22 1.6.4a3.32 3.32 0 012.24 2.33zm-2.22-1.46a2.29 2.29 0 00-.89-.22c-.38.03-.58.19-.58.45.01.33.3.33.52.39l.27.06c.72.19 1.13.65 1.27 1.36.03.13.04.27.08.4.06.18.18.31.4.31.21-.01.34-.13.39-.32l.04-.35a2.4 2.4 0 00-1.5-2.08zm4.89 7.94c-.78-.65-1.6-1.25-2.47-1.78-1.02-.62-1.77-.45-2.47.49l-.11.14c-.32.39-.72.54-1.22.4a5.89 5.89 0 01-1.51-.74 6.76 6.76 0 01-2.77-3.19c-.35-.82-.19-1.35.54-1.88l.28-.2c.55-.45.68-.89.37-1.52a9.94 9.94 0 00-2.3-3.05 1.3 1.3 0 00-.97-.36 2.9 2.9 0 00-2.62 2.74c-.01.37.08.78.24 1.17 2.23 5.38 6.16 9.1 11.6 11.36.4.17.82.27 1.25.15a3.75 3.75 0 002.55-2.16c.28-.61.14-1.13-.39-1.57z"/>
<path id="def-ynadex-a" d="M471.93 10326.44h-.59c-.92 0-1.8-.64-1.8-2.24 0-1.67.83-2.35 1.68-2.35h.7v4.59zm.92-5.44h-1.6c-1.55 0-2.87 1.13-2.87 3.33 0 1.32.64 2.3 1.78 2.78l-2.13 3.68c-.07.12 0 .21.1.21h1c.08 0 .14-.03.17-.1l1.93-3.6h.7v3.6c0 .05.04.1.1.1h.86c.08 0 .11-.04.11-.1v-9.77c0-.09-.06-.13-.15-.13z"/>
<path id="def-ytube-a" d="M1343.37 349.72v-9.44l6.27 4.72zm-7.81-14.03a3.54 3.54 0 00-3.56 3.51v11.6a3.54 3.54 0 003.56 3.51h19.88a3.54 3.54 0 003.56-3.5V339.2a3.54 3.54 0 00-3.56-3.51h-19.88z"/>
</defs>
<symbol id="icon-arrow-chevron" viewBox="0 0 9 15"><path d="M7.07.862L0 7.93 7.072 15l1.06-1.06-6.011-6.01L8.13 1.922 7.07.862z"/></symbol>
<symbol id="icon-arrow-down" viewBox="0 0 8 5"><use xlink:href="#def-arrow-down-a" transform="translate(-223 -20813)"/></symbol>
<symbol id="icon-arrow-left" viewBox="0 0 18 12"><path d="M.1 6.3c-.1-.3 0-.6.1-.8l4.3-4.3c.3-.3.7-.3 1 0 .3.3.3.7 0 1l-3 3.1h14.1c.4 0 .7.3.7.7 0 .4-.3.7-.7.7H2.5l3.1 3.1c.3.3.3.8 0 1-.2.2-.3.2-.4.3-.2.1-.5 0-.7-.2L.2 6.6c-.1-.1-.1-.2-.1-.3z"/></symbol>
<symbol id="icon-arrow-menu" viewBox="0 0 10 5"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0l5 5 5-5H0z"/></symbol>
<symbol id="icon-arrow-right" viewBox="0 0 15 12"><path d="M14.19 5.77c.11.26.05.57-.15.78l-4.32 4.33a.72.72 0 01-1.02 0 .72.72 0 010-1.02l3.09-3.1H.69A.72.72 0 010 6.04c0-.38.31-.7.69-.72h11.1L8.7 2.23a.73.73 0 01.33-1.21c.24-.06.51.01.69.19l4.32 4.32a.6.6 0 01.15.24z"/></symbol>
<symbol id="icon-arrow" viewBox="0 0 20 17"><use xlink:href="#def-arrow-a" transform="translate(-1033 -789)"/></symbol>
<symbol id="icon-be" viewBox="0 0 25 16"><use xlink:href="#def-be-a" transform="translate(-39 -27)"/></symbol>
<symbol id="icon-be2-mob" viewBox="0 0 34 34"><path d="M15.426 16.508s1.507-.112 1.507-1.879S15.7 12 14.138 12H9v9.875h5.138s3.137.099 3.137-2.915c0 0 .137-2.452-1.85-2.452zm-4.162-2.753h2.874s.699 0 .699 1.027c0 1.028-.411 1.177-.877 1.177h-2.696v-2.204zm2.742 6.365h-2.742v-2.64h2.874s1.041-.013 1.041 1.357c0 1.142-.761 1.271-1.173 1.283zM23.408 12.582h-4.074v1.216h4.074v-1.216zM21.458 14.513c-3.797 0-3.794 3.793-3.794 3.793s-.26 3.775 3.794 3.775c0 0 3.38.193 3.38-2.626H23.1s.058 1.062-1.584 1.062c0 0-1.737.116-1.737-1.718h5.116s.56-4.286-3.437-4.286zm1.545 2.968h-3.244s.213-1.522 1.738-1.522 1.506 1.522 1.506 1.522z"/></symbol>
<symbol id="icon-be2" viewBox="0 0 56 56"><path d="M27.475 27.946s1.987-.148 1.987-2.479c0-2.33-1.625-3.467-3.685-3.467H19v13.024h6.777s4.137.13 4.137-3.844c0 0 .18-3.234-2.439-3.234zm-5.489-3.631h3.791s.921 0 .921 1.355-.542 1.551-1.156 1.551h-3.556v-2.906zm3.616 8.394h-3.616v-3.48h3.79s1.374-.018 1.374 1.788c0 1.506-1.004 1.677-1.548 1.692zM38.004 22.767H32.63v1.604h5.373v-1.604zM35.432 25.314c-5.009 0-5.004 5.003-5.004 5.003s-.344 4.98 5.004 4.98c0 0 4.456.254 4.456-3.464h-2.292s.077 1.4-2.088 1.4c0 0-2.291.154-2.291-2.266h6.748s.738-5.653-4.533-5.653zm2.037 3.915H33.19s.28-2.008 2.291-2.008c2.013 0 1.987 2.008 1.987 2.008z"/></symbol>
<symbol id="icon-briefcase" viewBox="834 13519 48 44"><path d="M836.5 13563c-1.4 0-2.5-1.2-2.5-2.6v-19.4c0 .6.4 1 1 1h1v18.4c0 .3.2.6.5.6h42.9c.3 0 .5-.3.5-.6v-18.4h1c.6 0 1-.4 1-1s-.4-1-1-1h-1v-10.4c0-.3-.2-.5-.5-.6h-42.9c-.3 0-.5.3-.5.6v10.4h-1c-.6 0-1 .4-1 1v-11.4c0-1.4 1.1-2.5 2.5-2.6H849v1c0 .6.4 1 1 1s1-.4 1-1v-1h14v1c0 .6.4 1 1 1 .3 0 .5-.1.7-.3.2-.2.3-.4.3-.7v-1h12.5c1.4 0 2.5 1.2 2.5 2.6v30.9c0 1.4-1.1 2.6-2.5 2.6h-43zm18.4-21H836v-2h18.9c.6 0 1 .4 1 1s-.4 1-1 1zm25.1-2v2h-18.9c-.6 0-1-.4-1-1s.4-1 1-1H880zm-13-16.8c0-2.3-1.9-4.2-4.2-4.2h-9.6c-2.3 0-4.2 1.9-4.2 4.2v3.8h2v-3.8c0-1.2 1-2.2 2.2-2.2h9.6c1.2 0 2.2 1 2.2 2.2v3.8h2v-3.8z"/><clipPath id="def-briefcase-b"><use xlink:href="#def-briefcase-a" overflow="visible"/></clipPath><g clip-path="url(#def-briefcase-b)"><path stroke-width="4" stroke-miterlimit="50" d="M855 13538c0-1.7 1.3-3 3-3s3 1.3 3 3v7c0 1.7-1.3 3-3 3s-3-1.3-3-3v-7z"/></g></symbol>
<symbol id="icon-burger" viewBox="0 0 20 14"><g fill-rule="evenodd"><path d="M0 0h20v2H0zM0 6h20v2H0zM0 12h20v2H0z"/></g></symbol>
<symbol id="icon-cancel-circle" viewBox="0 0 24 24"><path d="M12 24a12 12 0 110-24 12 12 0 010 24zm0-22a10 10 0 100 20 10 10 0 000-20zm4.71 13.29L13.41 12l3.3-3.29a1 1 0 00-.02-1.4 1 1 0 00-1.4-.02L12 10.59l-3.29-3.3a1 1 0 00-1.4.02 1 1 0 00-.02 1.4l3.3 3.29-3.3 3.29a1 1 0 00.02 1.4 1 1 0 001.4.02l3.29-3.3 3.29 3.3a1 1 0 001.42 0 1 1 0 000-1.42z"/></symbol>
<symbol id="icon-clip" viewBox="0 0 25 22"><path d="M12.1 21.37a1.02 1.02 0 01-.71-1.73L21.74 9.11a4.19 4.19 0 000-5.87 4.04 4.04 0 00-5.78 0l-12 12.21c-.59.49-.94 1.2-.97 1.97.05.49.28.95.63 1.29.31.35.77.53 1.23.48.74-.17 1.4-.57 1.89-1.15l9.42-9.58a.98.98 0 011.41 0c.39.4.39 1.04 0 1.44l-9.42 9.58A5.3 5.3 0 015.1 21.2a3.37 3.37 0 01-2.89-1.05A4.16 4.16 0 011 17.54a4.62 4.62 0 011.55-3.53l12-12.2a6.03 6.03 0 018.6 0 6.24 6.24 0 010 8.74L12.8 21.07a.98.98 0 01-.7.3z"/></symbol>
<symbol id="icon-clock" viewBox="0 0 24 24"><path d="M0 12a12 12 0 1124 0 12 12 0 01-24 0zm2 0a10 10 0 1020 0 10 10 0 00-20 0zm14 5a1 1 0 00.71-1.71L13 11.59V5a1 1 0 00-1-1 1 1 0 00-1 1v7a1 1 0 00.08.38c.05.12.12.24.21.33l4 4c.19.18.45.29.71.29z"/></symbol>
<symbol id="icon-close-menu" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.636 2.303L13.97.636 8.136 6.469 2.303.636.636 2.303 6.47 8.136.636 13.97l1.667 1.667 5.833-5.833 5.833 5.833 1.667-1.666-5.833-5.834 5.833-5.833z"/></symbol>
<symbol id="icon-close" viewBox="0 0 16 15"><g fill-rule="evenodd"><path d="M1.963.045l13.791 12.86-1.364 1.463L.6 1.508z"/><path d="M14.39.045L.6 12.905l1.364 1.463 13.79-12.86z"/></g></symbol>
<symbol id="icon-comments" viewBox="0 0 16 16"><use xlink:href="#def-comments-a" transform="translate(-748 -8949)"/></symbol>
<symbol id="icon-eaye" viewBox="0 0 16 11"><use xlink:href="#def-eaye-a" transform="translate(-614 -8951)"/></symbol>
<symbol id="icon-fb" viewBox="0 0 13 25"><path d="M8.44 25V13.6h3.83l.58-4.45H8.44V6.31c0-1.28.36-2.16 2.2-2.16H13V.18A29.7 29.7 0 009.57 0c-3.4 0-5.73 2.07-5.73 5.87v3.28H0v4.45h3.84V25z"/></symbol>
<symbol id="icon-fb2-mob" viewBox="0 0 34 34"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.415 24.638v-7.131h2.457l.366-2.784h-2.823v-1.776c0-.8.23-1.351 1.411-1.351h1.514v-2.49A21.931 21.931 0 0019.14 9c-2.182 0-3.677 1.295-3.677 3.672v2.051H13v2.784h2.463v7.13h2.952z"/></symbol>
<symbol id="icon-fb2" viewBox="0 0 56 56"><path fill-rule="evenodd" clip-rule="evenodd" d="M30.142 38.625V29.22h3.24l.483-3.671H30.14v-2.343c0-1.056.305-1.782 1.862-1.782H34V18.14a28.937 28.937 0 00-2.902-.14c-2.877 0-4.849 1.708-4.849 4.843v2.706H23v3.671h3.25v9.405h3.892z"/></symbol>
<symbol id="icon-file" viewBox="0 0 24 20"><use xlink:href="#def-file-a" transform="translate(-491 -9437)"/></symbol>
<symbol id="icon-github-mob" viewBox="0 0 34 34"><path d="M17.2 10c-3.978 0-7.2 3.307-7.2 7.386 0 3.263 2.063 6.031 4.923 7.007.36.07.492-.16.492-.355 0-.175-.006-.64-.009-1.256-2.003.445-2.425-.99-2.425-.99-.328-.853-.801-1.081-.801-1.081-.652-.458.05-.449.05-.449.723.052 1.103.761 1.103.761.642 1.13 1.685.803 2.097.615.065-.478.25-.803.456-.988-1.599-.185-3.28-.82-3.28-3.65 0-.806.28-1.464.741-1.981-.08-.187-.324-.938.063-1.955 0 0 .603-.198 1.98.757a6.754 6.754 0 011.8-.25 6.754 6.754 0 011.8.25c1.368-.955 1.971-.757 1.971-.757.387 1.017.144 1.768.072 1.955.46.517.738 1.175.738 1.981 0 2.838-1.683 3.462-3.285 3.644.252.222.486.674.486 1.366 0 .989-.009 1.783-.009 2.023 0 .193.126.424.495.35 2.881-.969 4.942-3.739 4.942-6.997 0-4.079-3.224-7.386-7.2-7.386z"/></symbol>
<symbol id="icon-github" viewBox="0 0 56 56"><path d="M27.913 19C22.436 19 18 23.362 18 28.741c0 4.305 2.84 7.955 6.778 9.242.496.092.677-.21.677-.468 0-.232-.008-.844-.012-1.657-2.758.588-3.34-1.306-3.34-1.306-.45-1.125-1.102-1.425-1.102-1.425-.898-.604.07-.592.07-.592.995.068 1.518 1.004 1.518 1.004.884 1.49 2.32 1.059 2.887.81.09-.63.344-1.059.628-1.302-2.202-.244-4.515-1.082-4.515-4.814 0-1.063.384-1.932 1.02-2.614-.112-.246-.446-1.236.086-2.578 0 0 .83-.26 2.727.999a9.676 9.676 0 012.478-.329 9.676 9.676 0 012.478.329c1.883-1.26 2.714-.999 2.714-.999.532 1.342.198 2.332.099 2.578a3.737 3.737 0 011.016 2.614c0 3.742-2.317 4.566-4.523 4.805.347.293.67.89.67 1.803 0 1.303-.013 2.35-.013 2.667 0 .255.173.56.681.463 3.966-1.279 6.804-4.932 6.804-9.23 0-5.38-4.439-9.741-9.913-9.741z"/></symbol>
<symbol id="icon-gplus" viewBox="0 0 13 8"><use xlink:href="#def-gplus-a" transform="translate(-466 -10165)"/><use xlink:href="#def-gplus-b" transform="translate(-466 -10165)"/></symbol>
<symbol id="icon-head" viewBox="0 0 54 45"><g transform="translate(2 2)" fill-rule="evenodd"><path d="M9.23 19.458v17.61s14.232 8.328 28.462 0V19.231" fill-rule="nonzero"/><path stroke-width="3" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" d="M46.923 13.25L22.99 0 0 14.007l23.179 13.44L46.923 13.25V30"/><path d="M9.23 19.458v17.61s14.232 8.328 28.462 0V19.231" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><circle stroke-width="3" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="47.308" cy="32.692" r="2.692"/><path d="M32.733 18.745c.53.295 1.074.575 1.604.87 1.302.7 2.468-1.164 1.181-1.865-3.694-1.99-7.403-3.98-11.097-5.957-.53-.294-1.075-.575-1.604-.869-1.302-.7-2.468 1.163-1.181 1.864 3.694 1.99 7.403 3.981 11.097 5.957zM36.733 15.745c.53.295 1.074.575 1.604.87 1.302.7 2.468-1.164 1.181-1.865a4281.61 4281.61 0 00-11.097-5.957c-.53-.294-1.075-.575-1.604-.869-1.302-.7-2.468 1.163-1.181 1.864 3.694 1.99 7.403 3.981 11.097 5.957z" fill-rule="nonzero"/></g></symbol>
<symbol id="icon-inst" viewBox="0 0 26 26"><use xlink:href="#def-inst-a" transform="translate(-1468 -332)"/><use xlink:href="#def-inst-b" transform="translate(-1468 -332)"/><use xlink:href="#def-inst-c" transform="translate(-1468 -332)"/></symbol>
<symbol id="icon-instagram-mob" viewBox="0 0 34 34"><path fill-rule="evenodd" clip-rule="evenodd" d="M24.027 20.23a3.801 3.801 0 01-3.797 3.797h-6.433A3.801 3.801 0 0110 20.23v-6.433A3.801 3.801 0 0113.797 10h6.433a3.801 3.801 0 013.797 3.797v6.433zm-7.014-7.052a3.84 3.84 0 00-3.835 3.835 3.84 3.84 0 003.835 3.836 3.84 3.84 0 003.836-3.836 3.84 3.84 0 00-3.836-3.835zm0 6.848A3.016 3.016 0 0114 17.013 3.016 3.016 0 0117.013 14a3.016 3.016 0 013.013 3.013 3.016 3.016 0 01-3.013 3.013zm2.794-7.077c0-.625.509-1.133 1.133-1.133.625 0 1.134.508 1.134 1.133s-.509 1.134-1.134 1.134a1.135 1.135 0 01-1.133-1.134z"/></symbol>
<symbol id="icon-instagram" viewBox="0 0 56 56"><path fill-rule="evenodd" clip-rule="evenodd" d="M37.5 32.492a5.014 5.014 0 01-5.008 5.008h-8.484A5.014 5.014 0 0119 32.492v-8.484A5.014 5.014 0 0124.008 19h8.484a5.014 5.014 0 015.008 5.008v8.484zm-9.25-9.3a5.064 5.064 0 00-5.058 5.058c0 2.79 2.269 5.059 5.058 5.059 2.79 0 5.059-2.27 5.059-5.059 0-2.79-2.27-5.058-5.059-5.058zm0 9.032a3.978 3.978 0 01-3.974-3.974 3.978 3.978 0 013.974-3.974 3.978 3.978 0 013.974 3.974 3.978 3.978 0 01-3.974 3.974zm3.685-9.334c0-.825.67-1.495 1.494-1.495.825 0 1.495.67 1.495 1.495 0 .824-.67 1.495-1.495 1.495-.824 0-1.494-.67-1.494-1.495z"/></symbol>
<symbol id="icon-like-down" viewBox="0 0 20 22"><use xlink:href="#def-like-down-a" transform="translate(-995 -522)"/></symbol>
<symbol id="icon-like-up" viewBox="0 0 20 22"><use xlink:href="#def-like-up-a" transform="translate(-934 -520)"/></symbol>
<symbol id="icon-like" viewBox="0 0 16 16"><use xlink:href="#def-like-a" transform="translate(-687 -8946)"/></symbol>
<symbol id="icon-link" viewBox="0 0 19 21"><use xlink:href="#def-link-a" transform="translate(-624 -1161)"/><use xlink:href="#def-link-b" transform="translate(-624 -1161)"/></symbol>
<symbol id="icon-mail" viewBox="0 0 16 12"><use xlink:href="#def-mail-a" transform="translate(-1042 -260)"/><use xlink:href="#def-mail-b" transform="translate(-1042 -260)"/></symbol>
<symbol id="icon-minus-zoom" viewBox="0 0 26 2"><path stroke-linecap="square" stroke-miterlimit="50" stroke-width="2" d="M1.5 1h23.19"/></symbol>
<symbol id="icon-outside" viewBox="0 0 21 21"><use xlink:href="#def-outside-a" transform="translate(-1185 -9211)"/></symbol>
<symbol id="icon-pencil" viewBox="0 0 20 21"><use xlink:href="#def-pencil-a" transform="translate(-1185 -9800)"/></symbol>
<symbol id="icon-phone" viewBox="0 0 21 22"><use xlink:href="#def-phone-a" transform="translate(-716 -19)"/></symbol>
<symbol id="icon-play-circle" viewBox="0 0 24 24"><path d="M12 24a12 12 0 110-24 12 12 0 010 24zM2 12a10 10 0 1020 0 10 10 0 00-20 0z"/><path d="M11.01 14.52c-.05.28.1.55.35.67.25.13.55.07.74-.14l2.85-2.94c.26-.27.27-.7.02-.98l-2.83-2.94a.69.69 0 00-.75-.13.67.67 0 00-.38.65z"/></symbol>
<symbol id="icon-play-reviews" viewBox="0 0 9 9"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.074 4.507c0 .41-.745.741-.745.741l-5.854 2.91a.619.619 0 01-.563-.054.649.649 0 01-.294-.494V1.392A.586.586 0 01.895.853a.557.557 0 01.595.01l5.839 2.903s.745.331.745.741z"/></symbol>
<symbol id="icon-play" viewBox="0 0 17 17"><path d="M17 9.02c0 .88-1.6 1.59-1.6 1.59L2.84 16.86c-.4.16-.84.12-1.21-.12A1.4 1.4 0 011 15.68V2.33c-.03-.47.2-.92.6-1.16.39-.24.89-.23 1.27.02L15.4 7.43s1.6.71 1.6 1.59z"/></symbol>
<symbol id="icon-plus-zoom" viewBox="0 0 24 24"><path d="M23 13H13v10a1 1 0 01-1 1 1 1 0 01-1-1V13H1a1 1 0 01-1-1 1 1 0 011-1h10V1a1 1 0 011-1 1 1 0 011 1v10h10a1 1 0 011 1 1 1 0 01-1 1z"/></symbol>
<symbol id="icon-plus" viewBox="0 0 16 16"><use xlink:href="#def-plus-a" transform="translate(-1208 -4164)"/></symbol>
<symbol id="icon-search" viewBox="0 0 22 22"><use xlink:href="#def-search-a" transform="translate(-1083 -22)"/></symbol>
<symbol id="icon-shape" viewBox="0 0 48 38"><use xlink:href="#def-shape-a" transform="translate(-832 -13296)"/></symbol>
<symbol id="icon-share" viewBox="0 0 26 24"><path d="M21.03 8a3.95 3.95 0 01-3.02-1.41l-9.08 4.54c.12.55.13 1.11.02 1.66l9.06 4.61a3.98 3.98 0 11-.9 1.79l-9.05-4.61a4 4 0 11-.05-5.22l9.1-4.55A4 4 0 1121.03 8zm0 14a2 2 0 002-2 2 2 0 10-2 2zm-18-10a2 2 0 104 0 2 2 0 00-4 0zm16-8a2 2 0 104 0 2 2 0 00-4 0z"/></symbol>
<symbol id="icon-smile" viewBox="0 0 23 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 23.278c-6.351 0-11.5-5.148-11.5-11.5C0 5.427 5.149.278 11.5.278S23 5.427 23 11.778c-.005 6.35-5.15 11.495-11.5 11.5zm0-21.083a9.583 9.583 0 00-9.583 9.583 9.584 9.584 0 1019.167 0A9.599 9.599 0 0011.5 2.195zm-6.613 12.87a7.38 7.38 0 006.613 4.38 7.333 7.333 0 006.613-4.38.957.957 0 00-.93-1.427.96.96 0 00-.796.603 5.277 5.277 0 01-9.774 0 .959.959 0 00-1.726.824zm10.447-3.287a1.917 1.917 0 110-3.833 1.917 1.917 0 010 3.833zM5.75 9.862a1.917 1.917 0 103.833 0 1.917 1.917 0 00-3.833 0z"/></symbol>
<symbol id="icon-socials" viewBox="0 0 40 40"><g fill-rule="evenodd"><circle cx="20" cy="20" r="20"/><path d="M20.021 31h-.485C13.717 31 9 26.08 9 20.009c0-6.07 4.717-10.991 10.536-10.991.309-.024.619-.024.928 0 5.819 0 10.536 4.92 10.536 10.99C31 26.08 26.283 31 20.464 31h-.443zm0-2.198h.316c4.655 0 8.43-3.937 8.43-8.793s-3.775-8.793-8.43-8.793h-.632c-4.655 0-8.43 3.937-8.43 8.793s3.775 8.793 8.43 8.793h.316z"/><path d="M19.382 31C13.648 31 9 26.08 9 20.009c0-6.07 4.648-10.991 10.382-10.991.305-.024.61-.024.914 0 .252.02.488.138.665.33 5.385 5.95 5.385 15.338 0 21.29a.998.998 0 01-1.142.252.992.992 0 01-.437.11zm.322-19.784h-.238c-4.588 0-8.306 3.937-8.306 8.793s3.718 8.793 8.306 8.793a.981.981 0 01.26 0c4.23-5.007 4.23-12.58 0-17.586h-.022z" clip-rule="evenodd"/><path d="M19.91 30.967a1.101 1.101 0 01-.419-.077 1.101 1.101 0 01-1.21-.253c-5.708-5.95-5.708-15.337 0-21.288a1.1 1.1 0 01.704-.33 6.664 6.664 0 011.012 0C26.074 9.02 31 13.94 31 20.01S26.074 31 19.997 31l-.088-.033zm-.353-19.783a13.177 13.177 0 000 17.585c.091-.012.184-.012.275 0 4.861 0 8.802-3.936 8.802-8.792s-3.94-8.793-8.802-8.793h-.275z" clip-rule="evenodd"/><path d="M27.944 17H11.056C10.473 17 10 16.552 10 16s.473-1 1.056-1h16.888c.583 0 1.056.448 1.056 1s-.473 1-1.056 1zM27.944 25H11.056C10.473 25 10 24.552 10 24s.473-1 1.056-1h16.888c.583 0 1.056.448 1.056 1s-.473 1-1.056 1z"/></g></symbol>
<symbol id="icon-strawberry" viewBox="0 0 49 48"><use xlink:href="#def-strawberry-a" transform="translate(-832 -13406)"/></symbol>
<symbol id="icon-telegram" viewBox="0 0 29 24"><use xlink:href="#def-telegram-a" transform="translate(-795 -271)"/></symbol>
<symbol id="icon-telegram2-mob" viewBox="0 0 34 34"><path d="M14.95 19.329l-.25 3.528c.358 0 .514-.154.7-.34l1.683-1.607 3.486 2.553c.64.356 1.09.168 1.263-.588L24.12 12.15c.204-.946-.341-1.316-.964-1.084l-13.452 5.15c-.918.357-.904.869-.156 1.1l3.44 1.07 7.988-4.998c.375-.25.717-.112.436.137L14.95 19.33z"/></symbol>
<symbol id="icon-telegram2" viewBox="0 0 56 56"><path d="M25.848 30.985l-.331 4.653c.473 0 .678-.203.924-.447l2.22-2.121 4.598 3.367c.843.47 1.437.223 1.665-.776l3.018-14.143.001-.001c.268-1.247-.45-1.734-1.272-1.428L18.929 26.88c-1.211.47-1.193 1.145-.206 1.451l4.536 1.411 10.536-6.593c.495-.328.946-.146.575.182l-8.522 7.653z"/></symbol>
<symbol id="icon-tm" viewBox="0 0 26 22"><use xlink:href="#def-tm-a" transform="translate(-1399 -334)"/></symbol>
<symbol id="icon-trash" viewBox="0 0 20 21"><use xlink:href="#def-trash-a" transform="translate(-1156 -9799)"/></symbol>
<symbol id="icon-triangle" viewBox="0 0 16 8"><use xlink:href="#def-triangle-a" transform="translate(-1237 -6883)"/></symbol>
<symbol id="icon-tw" viewBox="0 0 18 15"><path d="M18 1.75c-.66.3-1.37.5-2.12.59A3.7 3.7 0 0017.5.27c-.71.43-1.5.74-2.34.91a3.68 3.68 0 00-6.39 2.56c0 .3.03.58.09.85A10.45 10.45 0 011.25.69 3.75 3.75 0 002.4 5.68a3.67 3.67 0 01-1.68-.47v.05a3.75 3.75 0 002.97 3.67 3.51 3.51 0 01-1.67.06 3.7 3.7 0 003.45 2.6A7.33 7.33 0 010 13.14a10.37 10.37 0 005.66 1.68c6.79 0 10.51-5.7 10.51-10.64l-.01-.49A7.35 7.35 0 0018 1.76z"/></symbol>
<symbol id="icon-twitter-mob" viewBox="0 0 34 34"><path d="M24.406 12.386a6.16 6.16 0 01-1.702.466 2.937 2.937 0 001.3-1.632c-.572.34-1.202.58-1.873.715a2.952 2.952 0 00-5.109 2.02c0 .233.02.458.068.672a8.36 8.36 0 01-6.087-3.089 2.957 2.957 0 00.908 3.947 2.917 2.917 0 01-1.335-.363v.032a2.967 2.967 0 002.366 2.902c-.24.066-.502.097-.774.097-.189 0-.38-.01-.56-.05a2.981 2.981 0 002.76 2.057 5.934 5.934 0 01-3.661 1.26c-.242 0-.475-.011-.707-.04a8.314 8.314 0 004.53 1.325c5.435 0 8.406-4.502 8.406-8.404 0-.13-.004-.257-.01-.382a5.89 5.89 0 001.48-1.533z"/></symbol>
<symbol id="icon-twitter" viewBox="0 0 56 56"><path d="M38 21.828c-.707.31-1.46.515-2.244.615a3.874 3.874 0 001.713-2.153 7.783 7.783 0 01-2.47.943 3.894 3.894 0 00-6.738 2.664c0 .308.026.605.09.887a11.025 11.025 0 01-8.028-4.074 3.922 3.922 0 00-.533 1.969 3.9 3.9 0 001.73 3.237 3.847 3.847 0 01-1.76-.48v.043a3.913 3.913 0 003.12 3.827 3.887 3.887 0 01-1.02.129c-.25 0-.502-.015-.738-.067.505 1.543 1.937 2.677 3.64 2.714a7.827 7.827 0 01-4.83 1.66c-.32 0-.626-.013-.932-.052a10.966 10.966 0 005.976 1.748c7.167 0 11.086-5.938 11.086-11.085a9.95 9.95 0 00-.014-.503A7.77 7.77 0 0038 21.828z"/></symbol>
<symbol id="icon-user-circle" viewBox="0 0 24 24"><use xlink:href="#def-user-circle-a" transform="translate(-1244 -22)"/></symbol>
<symbol id="icon-vb" viewBox="0 0 25 27"><use xlink:href="#def-vb-a" transform="translate(-931 -270)"/></symbol>
<symbol id="icon-view-list" viewBox="0 0 15 15"><path d="M0 6V0h15v6zm0 9V9h15v6z"/></symbol>
<symbol id="icon-view-tile" viewBox="0 0 15 15"><path d="M0 6V0h6v6zm9 0V0h6v6zm0 9V9h6v6zm-9 0V9h6v6z"/></symbol>
<symbol id="icon-vk" viewBox="0 0 22 14"><path d="M10.61 13.8h1.3s.39-.04.59-.27c.19-.2.18-.59.18-.59s-.02-1.8.78-2.07c.8-.26 1.82 1.75 2.91 2.52.81.58 1.44.46 1.44.46l2.89-.05s1.52-.09.8-1.33c-.06-.1-.42-.92-2.15-2.59-1.82-1.75-1.58-1.47.61-4.5 1.33-1.84 1.87-2.97 1.7-3.45-.16-.46-1.14-.34-1.14-.34l-3.26.02s-.24-.03-.42.08-.29.36-.29.36-.52 1.43-1.2 2.64c-1.46 2.57-2.04 2.7-2.27 2.54-.56-.37-.42-1.49-.42-2.28 0-2.49.36-3.52-.71-3.79A5.26 5.26 0 0010.43 1c-1.16-.01-2.15.01-2.7.29-.38.19-.66.61-.49.63.22.03.71.14.97.51.33.47.32 1.53.32 1.53s.19 2.92-.45 3.29c-.44.25-1.04-.26-2.34-2.59-.66-1.19-1.16-2.5-1.16-2.5s-.1-.25-.27-.38c-.21-.16-.5-.21-.5-.21l-3.1.02s-.47.01-.64.22c-.15.19-.01.58-.01.58s2.43 5.89 5.17 8.87c2.52 2.72 5.38 2.54 5.38 2.54z"/></symbol>
<symbol id="icon-vk2-mob" viewBox="0 0 34 34"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.79 21.913h.947a.77.77 0 00.436-.201.795.795 0 00.13-.459s-.016-1.399.573-1.608c.588-.209 1.336 1.351 2.13 1.954.297.259.68.383 1.063.346l2.123-.032s1.116-.073.589-1.03a7.642 7.642 0 00-1.582-2.002c-1.337-1.35-1.153-1.134.451-3.473.978-1.424 1.367-2.3 1.245-2.67a.866.866 0 00-.832-.257l-2.4.016a.463.463 0 00-.305.056.702.702 0 00-.214.282 15.134 15.134 0 01-.886 2.042c-1.062 1.978-1.49 2.082-1.665 1.962-.405-.29-.306-1.15-.306-1.77 0-1.913.268-2.717-.511-2.926a4.053 4.053 0 00-1.123-.12 4.804 4.804 0 00-1.987.225c-.275.144-.48.466-.351.49.273.03.524.167.703.386.165.37.246.774.237 1.182 0 0 .145 2.26-.329 2.54-.32.194-.764-.2-1.719-1.993a17.581 17.581 0 01-.848-1.938.803.803 0 00-.198-.29.84.84 0 00-.367-.16l-2.276.016a.723.723 0 00-.466.169.581.581 0 00-.016.442s1.788 4.559 3.805 6.859c.99 1.217 2.427 1.931 3.95 1.962z"/></symbol>
<symbol id="icon-vk2" viewBox="0 0 56 56"><path fill-rule="evenodd" clip-rule="evenodd" d="M28.274 34.074h1.25c.213-.024.413-.117.574-.265.117-.177.177-.39.172-.605 0 0-.02-1.845.755-2.12.776-.276 1.763 1.78 2.811 2.576.391.342.895.506 1.4.456l2.802-.042s1.47-.096.775-1.358a10.079 10.079 0 00-2.085-2.64c-1.763-1.782-1.522-1.495.594-4.582 1.29-1.877 1.804-3.033 1.642-3.52a1.143 1.143 0 00-1.098-.34l-3.163.021a.61.61 0 00-.403.075.925.925 0 00-.282.37 19.972 19.972 0 01-1.17 2.694c-1.4 2.61-1.964 2.747-2.196 2.588-.534-.382-.403-1.516-.403-2.333 0-2.524.353-3.584-.675-3.86a5.345 5.345 0 00-1.48-.16 6.336 6.336 0 00-2.62.298c-.363.19-.635.615-.464.646.36.039.691.221.927.51.218.487.325 1.02.312 1.558 0 0 .192 2.98-.433 3.352-.423.254-1.007-.265-2.267-2.63a23.184 23.184 0 01-1.118-2.556 1.06 1.06 0 00-.262-.382 1.109 1.109 0 00-.484-.212l-3.002.021a.953.953 0 00-.615.223.767.767 0 00-.02.583s2.358 6.013 5.018 9.046c1.305 1.606 3.2 2.548 5.209 2.588z"/></symbol>
<symbol id="icon-yandex" viewBox="0 0 5 11"><path d="M4.847 0H3.259C1.7 0 .376 1.169.376 3.438c0 1.36.64 2.364 1.783 2.86L.028 10.092c-.07.123 0 .22.111.22h.99c.083 0 .139-.028.166-.097L3.231 6.49h.697v3.726c0 .041.041.097.097.097h.864c.083 0 .111-.042.111-.11V.138C5 .04 4.944 0 4.847 0zm-.92 5.61h-.584c-.92 0-1.81-.66-1.81-2.31 0-1.719.835-2.42 1.684-2.42h.71v4.73z" fill-rule="nonzero"/></symbol>
<symbol id="icon-ynadex" viewBox="0 0 5 10"><use xlink:href="#def-ynadex-a" transform="translate(-468 -10321)"/></symbol>
<symbol id="icon-ytube" viewBox="0 0 27 20"><use xlink:href="#def-ytube-a" transform="translate(-1332 -335)"/></symbol>
</svg>
                <div class="header-banner topBanner" data-type="header" style="display: block; position: sticky; top: 0; z-index: 999;">
        <a data-source="214796" data-banner="226288" class="universal-notice js-universal-notice-notice universal-notice--webp universal-notice--bitrix universal-notice--active" href="https://skillbox.ru/sale/main/?utm_source=media&utm_medium=banners&utm_campaign=all_all_media_banners_banners_header_all_all_skillbox" target="_blank" style="--banner-bg: #5927E9;--banner-color: #fff;--button-font-color: #000000;--button-bg-color: #FFFFFF;--banner-img-left: url(https://cdn.skillbox.pro/mainsite/banners/promo_picture_left/602754/f9ac17dd-a1d4-46c6-aa14-4f7b949defd1.png);--banner-img-left-webp: url(https://cdn.skillbox.pro/mainsite/banners/promo_picture_left/602754/f9ac17dd-a1d4-46c6-aa14-4f7b949defd1.webp);--banner-img-center: url(https://cdn.skillbox.pro/mainsite/banners/promo_picture_center/602507/232fc4a5-b130-4af2-a629-bdb293a4dd2e.png);--banner-img-center-webp: url(https://cdn.skillbox.pro/mainsite/banners/promo_picture_center/602507/232fc4a5-b130-4af2-a629-bdb293a4dd2e.webp);--banner-img-center-mobile: url(https://cdn.skillbox.pro/mainsite/banners/promo_picture_center/602507/232fc4a5-b130-4af2-a629-bdb293a4dd2e.png);--banner-img-center-mobile-webp: url(https://cdn.skillbox.pro/mainsite/banners/promo_picture_center/602507/232fc4a5-b130-4af2-a629-bdb293a4dd2e.webp);--banner-img-right: url(https://cdn.skillbox.pro/mainsite/banners/promo_picture_right/602755/ad7a7fe5-b8d3-47a3-885b-51a7971c12a9.png);--banner-img-right-webp: url(https://cdn.skillbox.pro/mainsite/banners/promo_picture_right/602755/ad7a7fe5-b8d3-47a3-885b-51a7971c12a9.webp);">
      <span class="universal-notice__wrapper">
        <b class="universal-notice__title">
          Скидка до&nbsp;55% и&nbsp;3&nbsp;курса в&nbsp;подарок
        </b>

        <span class="universal-timer js-universal-notice-timer js-universal-notice-active">
              <span class="universal-timer__days js-universal-notice-days">2 дня</span>
              <span class="js-universal-notice-hours">13</span>
              :<span class="js-universal-notice-minutes">30</span>
              :<span class="js-universal-notice-seconds">09</span>
            </span>

        <span class="universal-notice__button">Выбрать курс</span>
      </span>
    </a><script>
    document.addEventListener('DOMContentLoaded', () => {
        // Установите конечную дату
        const deadline = new Date();
        deadline.setDate(5);
        deadline.setHours(0, 0, 0);

        // Найдите элементы DOM
        var timer = document.querySelector('.universal-timer');
        const elDays = timer.querySelector('.js-universal-notice-days');
        const elHours = timer.querySelector('.js-universal-notice-hours');
        const elMinutes = timer.querySelector('.js-universal-notice-minutes');
        const elSeconds = timer.querySelector('.js-universal-notice-seconds');

        // Функция обновления таймера
        const updateTimer = () => {
            const now = new Date();
            let diff = Math.max(0, deadline - now);
            if (diff === 0) {
                let lastDayOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0);
                let lastDay = lastDayOfMonth.getDate();
                if (lastDay - now.getDate() < 4) {
                    deadline.setMonth(deadline.getMonth() + 1, 1);
                } else {
                    deadline.setDate(deadline.getDate() + 4);
                }
                diff = Math.max(0, deadline - now);
            }

            // Time calculations for days, hours, minutes and seconds
            var days = Math.floor(diff / (1000 * 60 * 60 * 24));
            var hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)).toString();
            var minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)).toString();
            var seconds = Math.floor((diff % (1000 * 60)) / 1000).toString();

            if (timer) {
                let dayTitles = ['день', 'дня', 'дней'];
                let daySuffix = dayTitles[(days % 100 > 4 && days % 100 < 20) ? 2 : [2, 0, 1, 1, 1, 2][days % 10 < 5 ? days % 10 : 5]]
                elDays.innerHTML = days + ' ' + daySuffix;
                elHours.innerHTML = hours.padStart(2, '0');
                elMinutes.innerHTML = minutes.padStart(2, '0');
                elSeconds.innerHTML = seconds.padStart(2, '0');
            }
        };

        updateTimer();
        const timerId = setInterval(updateTimer, 1000);
    });
</script>
<style>@font-face{font-display:swap;font-family:Graphik;font-weight:500;font-style:normal;src:url(https://248006.selcdn.ru/Shared/fonts/GraphikLCTT-VA-Medium.woff2) format("woff2")}@font-face{font-display:swap;font-family:Graphik;font-weight:700;font-style:normal;src:url(https://248006.selcdn.ru/Shared/fonts/GraphikLCTT-VA-Bold.woff2) format("woff2")}.universal-notice{position:sticky;z-index:5;top:0;box-sizing:border-box;text-decoration:none;display:none;justify-content:space-between;overflow:hidden;color:var(--banner-color);background-color:var(--banner-bg);font-family:Graphik,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:opacity .25s ease-in-out}.universal-notice--active{display:flex}.universal-notice--bitrix{z-index:1000}.universal-notice *,.universal-notice ::after,.universal-notice ::before{box-sizing:inherit}.universal-notice::after,.universal-notice::before{display:none;width:194px;height:56px;content:"";background-size:194px 56px;background-repeat:no-repeat}.universal-notice--no-webp::before{background-image:var(--banner-img-left)}.universal-notice--no-webp::after{background-image:var(--banner-img-right)}.universal-notice--webp::before{background-image:var(--banner-img-left-webp)}.universal-notice--webp::after{background-image:var(--banner-img-right-webp)}.universal-notice--new-design{position:static;margin:4px;border-radius:16px}.universal-notice--new-design::after,.universal-notice--new-design::before{width:166px;height:48px;background-size:166px 48px}.universal-notice__wrapper{display:grid;grid-template-columns:1fr auto;align-items:center;grid-gap:12px;padding:12px;width:100%}.universal-notice--new-design .universal-notice__wrapper::after{height:48px}.universal-notice__title{font-weight:500;font-size:15px;line-height:16px}.universal-notice--new-design .universal-notice__title{font-size:14px;line-height:15px}.universal-timer{display:none;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;font-weight:500;font-size:24px;line-height:26px}.universal-notice--new-design .universal-timer{font-size:22px;line-height:24px}.universal-timer__days{margin-right:8px}.universal-notice__button{grid-column:2/3;padding:6px 16px;border-radius:6px;color:var(--button-font-color);background-color:var(--button-bg-color);font-weight:500;font-size:14px;line-height:20px}.universal-notice-sticky{position:fixed;z-index:5;top:0;left:0;width:100%;padding:11px 8px;color:var(--banner-color);background-color:var(--banner-bg);text-align:center;transition:transform .3s ease-in-out;will-change:transform;transform:translateY(-200%)}.universal-notice-sticky--show{transform:translateY(0)}@media (min-width:360px) and (max-width:0px){.universal-notice__wrapper{padding:0 12px;grid-template-columns:1fr 56px auto}.universal-notice__wrapper::after{grid-column:2/3;grid-row:1/2;width:100%;height:56px;background-size:cover;background-repeat:no-repeat;content:""}.universal-notice--new-design .universal-notice__wrapper{grid-template-columns:1fr 48px auto}.universal-notice--no-webp .universal-notice__wrapper::after{background-image:var(--banner-img-center-mobile)}.universal-notice--webp .universal-notice__wrapper::after{background-image:var(--banner-img-center-mobile-webp)}.universal-notice__button{grid-column:3/4}}@media (min-width:360px){.universal-notice__wrapper{padding:0 12px;grid-template-columns:1fr 56px auto}.universal-notice__wrapper::after{grid-column:2/3;grid-row:1/2;width:100%;height:56px;background-size:cover;background-repeat:no-repeat;content:""}.universal-notice--new-design .universal-notice__wrapper{grid-template-columns:1fr 48px auto}.universal-notice--no-webp .universal-notice__wrapper::after{background-image:var(--banner-img-center-mobile)}.universal-notice--webp .universal-notice__wrapper::after{background-image:var(--banner-img-center-mobile-webp)}.universal-notice__button{grid-column:3/4}}@media (min-width:768px){.universal-notice::before{background-position:right center;flex-shrink:0;display:block}.universal-notice--no-webp .universal-notice__wrapper::after{background-image:var(--banner-img-center)}.universal-notice--webp .universal-notice__wrapper::after{background-image:var(--banner-img-center-webp)}}@media (min-width:768px) and (max-width:0px){.universal-notice::before{background-position:right center;flex-shrink:0;display:block}.universal-notice--no-webp .universal-notice__wrapper::after{background-image:var(--banner-img-center)}.universal-notice--webp .universal-notice__wrapper::after{background-image:var(--banner-img-center-webp)}}@media (min-width:1024px){.universal-notice::after,.universal-notice::before{width:250px;height:72px;background-size:250px 72px}.universal-notice--new-design{height:64px;border-radius:32px}.universal-notice--new-design::after,.universal-notice--new-design::before{width:226px;height:64px;background-size:226px 64px}.universal-notice__wrapper{grid-template-columns:1fr 72px auto;grid-gap:24px;padding-right:16px;padding-left:24px}.universal-notice__wrapper::after{height:72px}.universal-notice--new-design .universal-notice__wrapper{grid-template-columns:1fr 64px auto}.universal-notice--new-design .universal-notice__wrapper::after{height:64px}.universal-notice__title{font-size:24px;line-height:26px}.universal-notice--new-design .universal-notice__title{font-size:22px;line-height:24px}.universal-notice__button{padding:10px 24px;border-radius:8px}.universal-notice-sticky{padding:14px 24px}}@media (min-width:1024px) and (max-width:0px){.universal-notice::after,.universal-notice::before{width:250px;height:72px;background-size:250px 72px}.universal-notice--new-design{height:64px;border-radius:32px}.universal-notice--new-design::after,.universal-notice--new-design::before{width:226px;height:64px;background-size:226px 64px}.universal-notice__wrapper{grid-template-columns:1fr 72px auto;grid-gap:24px;padding-right:16px;padding-left:24px}.universal-notice__wrapper::after{height:72px}.universal-notice--new-design .universal-notice__wrapper{grid-template-columns:1fr 64px auto}.universal-notice--new-design .universal-notice__wrapper::after{height:64px}.universal-notice__title{font-size:24px;line-height:26px}.universal-notice--new-design .universal-notice__title{font-size:22px;line-height:24px}.universal-notice__button{padding:10px 24px;border-radius:8px}.universal-notice-sticky{padding:14px 24px}}@media (min-width:1280px){.universal-notice::before{flex-shrink:1}.universal-notice::after{background-position:left center;display:block}.universal-notice__wrapper{grid-template-columns:1fr 72px minmax(202px,auto) auto;min-width:940px;max-width:1020px;padding-right:24px}.universal-notice--new-design .universal-notice__wrapper{grid-template-columns:1fr 64px minmax(202px,auto) auto}.universal-timer.js-universal-notice-active{display:flex}.universal-notice__timer-nuxt{display:flex}.universal-notice__button{grid-column:4/5}}@media (min-width:1280px) and (max-width:0px){.universal-notice::before{flex-shrink:1}.universal-notice::after{background-position:left center;display:block}.universal-notice__wrapper{grid-template-columns:1fr 72px minmax(202px,auto) auto;min-width:940px;max-width:1020px;padding-right:24px}.universal-notice--new-design .universal-notice__wrapper{grid-template-columns:1fr 64px minmax(202px,auto) auto}.universal-timer.js-universal-notice-active{display:flex}.universal-notice__timer-nuxt{display:flex}.universal-notice__button{grid-column:4/5}}@media (min-width:1400px) and (max-width:0px){.universal-notice::before{flex-shrink:0}.universal-notice::after{flex-shrink:0}}@media (min-width:1400px){.universal-notice::before{flex-shrink:0}.universal-notice::after{flex-shrink:0}}</style>    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function(event) {
            window.TopBanner = true;
        });
        $(document).ready(function () {
            $.ajax({
                url: '/local/ajax/advert.php',
                type: 'POST',
                data: {
                    'type': 'top-banner-show',
                    'id': 226288,
                    'section_id': 0,
                },
                success: function (result) {
                }
            });
        });

        $(document).on('click', '.header-banner', function () {
            $.ajax({
                url: '/local/ajax/advert.php',
                type: 'POST',
                data: {
                    'type': 'top-banner-click',
                    'id': 226288,
                    'section_id': 0,
                },
                success: function (result) {
                }
            });
            var page = window.location;
            var $article = $('section[data-article-text]');
            var pageId = $article.data('articleid');
            if(pageId === undefined)
            {
                pageId = 0;
            }
            window.dataLayer.push({
                'event': 'go_to_course',
                'courseID': 226288,
                'page': page,
                'pageID': pageId
            });
        });
    </script>
    
<header class="header">
        <div id="menu" class="header__wrapper container">
        <div class="header__logo link-active">
            <a  href="/media/" class="header__media-main-link">
                <img src="/local/templates/media/images/logo/skillbox-media.svg" alt="Skillbox"/>
            </a>
            <a href="/media/design/" class="header__media-category-link">
                <span class="header__media-category js-category ">Дизайн</span>
            </a>
        </div>

        <a href="/media/about-media/" v-if="!isMobile" rel="nofollow" class="menu-nav__link menu-nav__link--about" target="_blank" style="display: none">
            Про медиа
        </a>

        <button v-if="!isMobile" v-show="!isMobile" rel="nofollow" class="toggle-menu header__toggle toggle-menu--course"
                @click="openCourseMenu()"
                :class="{ 'toggle-menu--active': isOpenCourseMenu }"
                style="display: none">
            Онлайн-курсы
            <svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg"
                 :class="{
                    'animated-chevron--default': isOpenCourseMenu,
                    'animated-chevron--active animated-chevron--default': ! isOpenCourseMenu
                 }"
                 class="animated-chevron toggle-menu__arrow select-arrow select-arrow--small">
                <line x1="6.48415" y1="5.92242" x2="11.4909" y2="10.9291" stroke="currentColor" stroke-width="1.78"
                      class=" animated-chevron__line animated-chevron__line1 animated-chevron__line1--default"></line>
                <line x1="6.3701" y1="5.9224" x2="11.3768" y2="0.915678" stroke="currentColor" stroke-width="1.78"
                      class="animated-chevron__line"></line>
                <line x1="1.36337" y1="10.9291" x2="6.3701" y2="5.9224" stroke="currentColor" stroke-width="1.78"
                      class="animated-chevron__line animated-chevron__line2 animated-chevron__line2--default"></line>
                <line x1="1.47743" y1="0.915681" x2="6.48415" y2="5.9224" stroke="currentColor" stroke-width="1.78"
                      class="animated-chevron__line"></line>
            </svg>
        </button>

        <a href="https://skillbox.ru/?utm_source=media&utm_medium=button&utm_campaign=button_main_skillbox&utm_term=mainskillbox" v-if="!isMobile" v-show="!isMobile" rel="nofollow" class="menu-nav__link menu-nav__link-ml0 menu-nav__link--main" target="_blank" style="display: none">
            Главная Skillbox
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.9375 10.0618L9.9161 4.08203" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M3.93811 3.93665H10.0631V10.0616" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </a>
        <div v-if="isOpenCourseMenu && !isMobile" class="menu-block menu-block--desktop" @click="closeCourseMenu($event)" style="display: none">
            <div class="menu-block__wrapper menu-block__wrapper--desktop">
                <div class="menu-block__content vue-container">
                     <span class="menu-block__title">
                        Направления обучения
                    </span>

                    <ul class="menu-directions menu-block__direction">
                        <li class="menu-directions__item">
                            <a href="https://skillbox.ru/courses/?utm_source=media&utm_medium=button&utm_campaign=button_courses_all&utm_term=button" target="_blank"
                               class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
                               data-code="All directions">
                                Все направления
                            </a>
                        </li>
                        <li class="menu-directions__item">
                            <a href="https://skillbox.ru/code/?utm_source=media&utm_medium=button&utm_campaign=button_courses_code&utm_term=button" target="_blank"
                               class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
                               data-code="Code">
                                Программирование
                            </a>
                        </li>
                        <li class="menu-directions__item">
                            <a href="https://skillbox.ru/design/?utm_source=media&utm_medium=button&utm_campaign=button_courses_design&utm_term=button" target="_blank"
                               class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
                               data-code="Design">
                                Дизайн
                            </a>
                        </li>
                        <li class="menu-directions__item">
                            <a href="https://skillbox.ru/management?utm_source=media&utm_medium=button&utm_campaign=button_courses_management&utm_term=button" target="_blank"
                               class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
                               data-code="Management">
                                Управление
                            </a>
                        </li>
                        <li class="menu-directions__item">
                            <a href="https://skillbox.ru/marketing?utm_source=media&utm_medium=button&utm_campaign=button_courses_marketing&utm_term=button" target="_blank"
                               class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
                               data-code="Marketing">
                                Маркетинг
                            </a>
                        </li>
                        <li class="menu-directions__item">
                            <a href="https://skillbox.ru/games?utm_source=media&utm_medium=button&utm_campaign=button_courses_games&utm_term=button" target="_blank"
                               class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
                               data-code="GameDev">
                                Игры
                            </a>
                        </li>
                        <li class="menu-directions__item">
                            <a href="https://skillbox.ru/multimedia?utm_source=media&utm_medium=button&utm_campaign=button_courses_multimedia&utm_term=button" target="_blank"
                               class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
                               data-code="">
                                Кино и Музыка
                            </a>
                        </li>
                        <li class="menu-directions__item">
                            <a href="https://skillbox.ru/psychology?utm_source=media&utm_medium=button&utm_campaign=button_courses_psychology&utm_term=button" target="_blank"
                               class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
                               data-code="Development">
                                Психология
                            </a>
                        </li>
                        <li class="menu-directions__item">
                            <a href="https://skillbox.ru/health?utm_source=media&utm_medium=button&utm_campaign=button_courses_health&utm_term=button" target="_blank"
                               class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
                               data-code="Development">
                                Здоровье
                            </a>
                        </li>
                        <li class="menu-directions__item">
                            <a href="https://skillbox.ru/spo/?utm_source=media&utm_medium=button&utm_campaign=button_courses_spo&utm_term=button" target="_blank"
                               class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
                               data-code="Development">
                                Цифровой колледж
                            </a>
                        </li>
                        <li class="menu-directions__item">
                            <a href="https://skillbox.ru/general-development/?utm_source=media&utm_medium=button&utm_campaign=button_courses_general-development&utm_term=button" target="_blank"
                               class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
                               data-code="Education">
                                Общее развитие
                            </a>
                        </li>
                        <li class="menu-directions__item">
                            <a href="https://skillbox.ru/engineering/?utm_source=media&utm_medium=button&utm_campaign=button_courses_engineering&utm_term=button" target="_blank"
                               class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
                               data-code="engineering">
                                Инженерия
                            </a>
                        </li>
                        <li class="menu-directions__item">
                            <a href="https://skillbox.ru/english/?utm_source=media&utm_medium=button&utm_campaign=button_courses_english&utm_term=button" target="_blank"
                               class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
                               data-code="english">
                                Английский язык
                            </a>
                        </li>
                        <li class="menu-directions__item">
                            <a href="https://skillbox.ru/other/?utm_source=media&utm_medium=button&utm_campaign=button_courses_other&utm_term=button" target="_blank"
                               class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
                               data-code="Other">
                                Другое
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div v-show="isOpenMenu" class="menu-block" @click="closeMenu($event)" style="display: none">
            <div class="menu-block__wrapper">
                <div class="menu-block__content vue-container">
                    <h2 class="menu-block__header">Редакции</h2>
                    <div class="tab-nav" data-tab-parent="" data-action="index">
                        <div class="tab-nav__item">
                            <a class="" data-tab-name="media_nav" data-section-id="0" data-code="All directions" href="/media/">
                                <img src="/local/templates/media/images/common/menu-icon-mobile-1.png" alt=""/>
                                Все
                            </a>
                        </div>
                                                                                    <div class="tab-nav__item tab-nav__item--custom tab-nav__item--spec"
                                     data-nav-parent-item>
                                    <a
                                            data-tab-name="media_nav"
                                            data-code=""
                                            href="/media/topic/history/">
                                        <img src="/local/templates/media/images/common/menu-icon-mobile-19.png"
                                             alt=""/>
                                        Истории</a>
                                </div>
                                                                                                            <div class="tab-nav__item">
                                <a class="tab-active"
                                   data-tab-name="media_nav"
                                   data-section-id="8"
                                   data-code="Design"
                                   href="/media/design/">
                                    <img src="/local/templates/media/images/common/menu-icon-mobile-2.png" alt=""/>
                                    Дизайн</a>
                            </div>
                                                                                                            <div class="tab-nav__item">
                                <a class=""
                                   data-tab-name="media_nav"
                                   data-section-id="10"
                                   data-code="Code"
                                   href="/media/code/">
                                    <img src="/local/templates/media/images/common/menu-icon-mobile-3.png" alt=""/>
                                    Код</a>
                            </div>
                                                                                                            <div class="tab-nav__item">
                                <a class=""
                                   data-tab-name="media_nav"
                                   data-section-id="18"
                                   data-code="GameDev"
                                   href="/media/gamedev/">
                                    <img src="/local/templates/media/images/common/menu-icon-mobile-4.png" alt=""/>
                                    Геймдев</a>
                            </div>
                                                                                                            <div class="tab-nav__item">
                                <a class=""
                                   data-tab-name="media_nav"
                                   data-section-id="21"
                                   data-code="Business"
                                   href="/media/business/">
                                    <img src="/local/templates/media/images/common/menu-icon-mobile-9.png" alt=""/>
                                    Бизнес</a>
                            </div>
                                                                                                            <div class="tab-nav__item">
                                <a class=""
                                   data-tab-name="media_nav"
                                   data-section-id="9"
                                   data-code="Marketing"
                                   href="/media/marketing/">
                                    <img src="/local/templates/media/images/common/menu-icon-mobile-5.png" alt=""/>
                                    Маркетинг</a>
                            </div>
                                                                                                            <div class="tab-nav__item">
                                <a class=""
                                   data-tab-name="media_nav"
                                   data-section-id="11"
                                   data-code=""
                                   href="/media/management/">
                                    <img src="/local/templates/media/images/common/menu-icon-mobile-6.png" alt=""/>
                                    Управление</a>
                            </div>
                                                                                                            <div class="tab-nav__item">
                                <a class=""
                                   data-tab-name="media_nav"
                                   data-section-id="29"
                                   data-code=""
                                   href="/media/cinemusic/">
                                    <img src="/local/templates/media/images/common/menu-icon-mobile-22.png" alt=""/>
                                    Кино</a>
                            </div>
                                                                                                            <div class="tab-nav__item">
                                <a class=""
                                   data-tab-name="media_nav"
                                   data-section-id="36"
                                   data-code=""
                                   href="/media/music/">
                                    <img src="/local/templates/media/images/common/menu-icon-mobile-23.png" alt=""/>
                                    Музыка</a>
                            </div>
                                                                                                            <div class="tab-nav__item">
                                <a class=""
                                   data-tab-name="media_nav"
                                   data-section-id="34"
                                   data-code=""
                                   href="/media/photo/">
                                    <img src="/local/templates/media/images/common/menu-icon-mobile-20.png" alt=""/>
                                    Проектная фотография</a>
                            </div>
                                                                                                            <div class="tab-nav__item">
                                <a class=""
                                   data-tab-name="media_nav"
                                   data-section-id="17"
                                   data-code="Development"
                                   href="/media/growth/">
                                    <img src="/local/templates/media/images/common/menu-icon-mobile-7.png" alt=""/>
                                    Развитие</a>
                            </div>
                                                                                                            <div class="tab-nav__item">
                                <a class=""
                                   data-tab-name="media_nav"
                                   data-section-id="33"
                                   data-code=""
                                   href="/media/health/">
                                    <img src="/local/templates/media/images/common/menu-icon-mobile-16.png" alt=""/>
                                    Здоровье</a>
                            </div>
                                                                                                            <div class="tab-nav__item">
                                <a class=""
                                   data-tab-name="media_nav"
                                   data-section-id="32"
                                   data-code=""
                                   href="/media/money/">
                                    <img src="/local/templates/media/images/common/menu-icon-mobile-17.png" alt=""/>
                                    Деньги</a>
                            </div>
                                                                                                            <div class="tab-nav__item">
                                <a class=""
                                   data-tab-name="media_nav"
                                   data-section-id="22"
                                   data-code="Education"
                                   href="/media/education/">
                                    <img src="/local/templates/media/images/common/menu-icon-mobile-8.png" alt=""/>
                                    Образование</a>
                            </div>
                                                                                                            <div class="tab-nav__item">
                                <a class=""
                                   data-tab-name="media_nav"
                                   data-section-id="31"
                                   data-code=""
                                   href="/media/edtech/">
                                    <img src="/local/templates/media/images/common/menu-icon-mobile-11.png" alt=""/>
                                    EdTech</a>
                            </div>
                                                                                                            <div class="tab-nav__item">
                                <a class=""
                                   data-tab-name="media_nav"
                                   data-section-id="30"
                                   data-code=""
                                   href="/media/corptrain/">
                                    <img src="/local/templates/media/images/common/menu-icon-mobile-10.png" alt=""/>
                                    Корп. обучение</a>
                            </div>
                                                                                                            <div class="tab-nav__item">
                                <a class=""
                                   data-tab-name="media_nav"
                                   data-section-id="35"
                                   data-code=""
                                   href="/media/skillbox-blog/">
                                    <img src="/local/templates/media/images/common/menu-icon-mobile-21.png" alt=""/>
                                    Блог Skillbox</a>
                            </div>
                                                                                                                <div class="tab-nav__item tab-nav__item--custom tab-nav__item--spec"
                                     data-nav-parent-item>
                                    <a
                                            data-tab-name="media_nav"
                                            data-code=""
                                            href="https://skillbox.ru/media/glossary/">
                                        <img src="/local/templates/media/images/common/menu-icon-mobile-18.png"
                                             alt=""/>
                                        Глоссарий</a>
                                </div>
                                                                                                                <div class="tab-nav__item tab-nav__item--custom tab-nav__item--spec"
                                     data-nav-parent-item>
                                    <a
                                            data-tab-name="media_nav"
                                            data-code=""
                                            href="/media/topic/specials/">
                                        <img src="/local/templates/media/images/common/menu-icon-mobile-13.png"
                                             alt=""/>
                                        Спецпроекты</a>
                                </div>
                                                                                                                <div class="tab-nav__item tab-nav__item--custom tab-nav__item--spec"
                                     data-nav-parent-item>
                                    <a
                                            data-tab-name="media_nav"
                                            data-code=""
                                            href="https://skillbox.ru/course/career-guide-free/">
                                        <img src="/local/templates/media/images/common/menu-icon-mobile-15.png"
                                             alt=""/>
                                        Профориентация</a>
                                </div>
                                                                        </div>
                    <h2 class="menu-block__header">Онлайн-курсы</h2>
                    <ul class="menu-directions menu-block__direction">
                        <li class="menu-directions__item">
                            <a href="https://skillbox.ru/courses/" target="_blank"
                                class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
                                data-code="All directions">
                                Все направления
                            </a>
                        </li>
                        <li class="menu-directions__item">
                            <a href="https://skillbox.ru/code/" target="_blank"
                                class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
                                data-code="Code">
                                Программирование
                            </a>
                        </li>
                        <li class="menu-directions__item">
                            <a href="https://skillbox.ru/design/" target="_blank"
                                class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
                                data-code="Design">
                                Дизайн
                            </a>
                        </li>
                        <li class="menu-directions__item">
                            <a href="https://skillbox.ru/marketing/" target="_blank"
                                class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
                                data-code="Marketing">
                                Маркетинг
                            </a>
                        </li>
                        <li class="menu-directions__item">
                            <a href="https://skillbox.ru/management/" target="_blank"
                                class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
                                data-code="Management">
                                Управление
                            </a>
                        </li>
                        <li class="menu-directions__item">
                            <a href="https://skillbox.ru/games/" target="_blank"
                                class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
                                data-code="GameDev">
                                Игры
                            </a>
                        </li>
                        <li class="menu-directions__item">
                            <a href="https://skillbox.ru/multimedia/" target="_blank"
                                class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
                                data-code="">
                                Мультимедиа
                            </a>
                        </li>
                        <li class="menu-directions__item">
                            <a href="https://skillbox.ru/psychology/" target="_blank"
                                class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
                                data-code="Development">
                                Психология
                            </a>
                        </li>
                        <li class="menu-directions__item">
                            <a href="https://skillbox.ru/general-development/" target="_blank"
                                class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
                                data-code="Education">
                                Общее развитие
                            </a>
                        </li>
                        <li class="menu-directions__item">
                            <a href="https://skillbox.ru/engineering/" target="_blank"
                                class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
                                data-code="engineering">
                                Инженерия
                            </a>
                        </li>
                        <li class="menu-directions__item">
                            <a href="https://skillbox.ru/english/" target="_blank"
                                class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
                                data-code="english">
                                Английский язык
                            </a>
                        </li>
                        <li class="menu-directions__item">
                            <a href="https://skillbox.ru/other/" target="_blank"
                                class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
                                data-code="Other">
                                Другое
                            </a>
                        </li>
                    </ul>
                    <a href="/media/about-media/" rel="nofollow" class="menu-nav__link">
                        Про медиа
                    </a>
                    <a href="https://skillbox.ru/" rel="nofollow" class="menu-nav__link">
                        Главная Skillbox
                        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M3.9375 10.0618L9.9161 4.08203" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M3.93811 3.93665H10.0631V10.0616" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </a>

                </div>
            </div>
        </div>

        <button v-if="isMobile" class="menu-toggle"
                @click="openMenu()"
                :class="{ 'menu-toggle--opened': isOpenMenu }" style="opacity: 0">
            <span v-if="isOpenMenu" class="menu-toggle__line"></span>
            <svg v-if="!isOpenMenu" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M24 5.5H0V4H24V5.5ZM24 11.5H0V13H24V11.5ZM24 19H0V20.5H24V19Z" fill="black"/>
            </svg>
        </button>

    </div>

    <script>
        BX.Vue.create({
            el: '#menu',
            data: {
                isOpenMenu: false,
                isOpenCourseMenu: false,
                isMobile: false,
                isSubOpen: false,
                display: 'none'
            },
            computed: {
                isMobile() {
                    const w = window.innerWidth
                        || document.documentElement.clientWidth
                        || document.body.clientWidth;

                    return w < 1024;
                }
            },
            methods: {
                openMenu() {
                    this.isOpenMenu = !this.isOpenMenu;
                    document.getElementsByTagName('body')[0].classList.toggle('scroll-locked');
                    window.addEventListener('keyup', this.closeMenu);
                },
                closeMenu(event) {
                    if (event.target.classList.contains('menu-block') || event.keyCode === 27) {
                        this.isOpenMenu = false;
                        document.getElementsByTagName('body')[0].classList.remove('scroll-locked');
                        window.removeEventListener('keyup', this.closeMenu);
                    }
                },
                openCourseMenu() {
                    this.isOpenCourseMenu = !this.isOpenCourseMenu;
                    if (this.isOpenCourseMenu) {
                        document.getElementsByTagName('body')[0].classList.add('scroll-locked');
                        window.addEventListener('keyup', this.closeCourseMenu);
                    } else {
                        document.getElementsByTagName('body')[0].classList.remove('scroll-locked');
                        window.removeEventListener('keyup', this.closeCourseMenu);
                    }
                },
                closeCourseMenu(event) {
                    if (event.target.classList.contains('menu-block') || event.keyCode === 27) {
                        this.isOpenCourseMenu = false;
                        document.getElementsByTagName('body')[0].classList.remove('scroll-locked');
                        window.removeEventListener('keyup', this.closeCourseMenu);
                    }
                },
                openSub() {
                    this.isSubOpen = !this.isSubOpen;
                },
                isMobileFn() {
                    const w = window.innerWidth
                        || document.documentElement.clientWidth
                        || document.body.clientWidth;
                    this.isMobile = (w < 1024);
                }
            },
            created() {
                window.addEventListener("resize", this.isMobileFn);
                document.querySelector('.menu-block').style.display = '';
                document.querySelector('.menu-toggle').style.opacity = '1';
                document.querySelector('.menu-nav__link').style.display = '';
                this.display = 'block';
                this.isMobileFn();
            },
            destroyed() {
                window.removeEventListener("resize", this.isMobileFn);
            }
        });
    </script>
</header>
<main class="content">
    <div class="page style-update">
    <div class="page-wrap">
        
<style>
    .article-inner .rr-widget__title {
        padding-top: 0 !important;
    }

    .article-inner  div[data-retailrocket-markup-block] {
        margin-top: -32px;
        display: none;
    }

    .article-inner {
        font-family: 'Graphik';
    }
</style>
            <div class="under_header_banner" data-type="under_header"><!-- Yandex.RTB R-A-13443663-10 -->
<div id="yandex_rtb_R-A-13443663-10"></div>
<script>
window.yaContextCb.push(() => {
    Ya.Context.AdvManager.render({
        "blockId": "R-A-13443663-10",
        "renderTo": "yandex_rtb_R-A-13443663-10"
    })
})
</script>
</div>        <div data-area="article" data-title="Что значит «адаптивный»? Объясняем простыми словами / Skillbox Media" class="  noFullClass">
        <div class="article-inner">
                                            <section class="top-section-detail-page ">
                    <div class="container">
                        <div class="article-preview-info">
                            <div class="article-preview-info__tags ">
                                <div class="tag article-preview-info__tag">
                                                                                <a href="/media/design/"
                                               class="tag-item design">
                                                Дизайн                                            </a>
                                                                        </div>
                            </div>
                                                            <a class="info-hashtag article-preview-info__hashtag" href="/media/topic/articles/">
                                    #статьи                                </a>
                                                            <ul class="info article-preview__info-box">
                                <li class="info-item"> <time class="info-text" datatime="#">21 мар 2023</time></li>
                                                                <li class="info-item hidden">
                                    <span class="info-icon"><img src="/local/templates/media/images/icons/like.svg" alt=""></span>
                                    <span class="info__text js-article-like-value">0</span>
                                </li>
                            </ul>
                        </div>
                        <div class="row">
                            <div class="top-section-detail-page__title-block col-xl-9 col-lg-10">
                                <div class="article-preview">
                                    <h1 class="article-preview__title">Что значит «адаптивный»? Объясняем простыми словами</h1>
                                    <p class="article-preview__description">Заходят как-то в&nbsp;бар дизайнер и&nbsp;айтишник, а&nbsp;джун их&nbsp;спрашивает: «И&nbsp;как это понимать?»</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                            <section data-article-text
                     data-articleId="214796"
                     data-courseId="3294"
                                 >
                <div class="container">
                                        <noindex>
                    <div class="share" data-nosnippet>
                        <button class="share__handler-btn ">
                            <span class="share__handler-icon">
                                <svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M11 4.99902L6 0V2.99805C2.688 2.99805 0 5.68505 0 8.99805V11.498H0.0980225C0.765022 8.91205 3.107 6.99805 5.901 6.99805H6.00098V9.99805L11 4.99902Z" fill="currentColor"/>
                                </svg>
                            </span>
                            <span class="share__handler-text">Поделиться</span>
                        </button>
                        <div class="share__list">
                            <a href="#" class="share__item" data-code="vk">
                                <span class="share__item-icon share__item-icon--vk">
                                    <svg width="9" height="5" viewBox="0 0 9 5" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M4.04776 4.98054H4.53996C4.62377 4.97136 4.70279 4.9361 4.76621 4.87951C4.81226 4.81209 4.83594 4.73139 4.83369 4.64925C4.83369 4.64925 4.82574 3.94629 5.1314 3.84125C5.43701 3.73621 5.826 4.51998 6.23879 4.82297C6.39281 4.95308 6.59128 5.01558 6.79053 4.99669L7.89399 4.98054C7.89399 4.98054 8.47355 4.94415 8.19965 4.46339C7.98372 4.08315 7.70589 3.743 7.37799 3.45744C6.68338 2.77872 6.77865 2.8878 7.61219 1.71216C8.12024 0.997077 8.32269 0.556717 8.25918 0.370875C8.14651 0.254767 7.98299 0.205914 7.82655 0.241594L6.58018 0.249674C6.52565 0.241067 6.46984 0.251007 6.42141 0.277954C6.37298 0.314507 6.33466 0.363228 6.31025 0.419356C6.18259 0.772814 6.0287 1.11586 5.8498 1.44552C5.29807 2.43936 5.07579 2.49188 4.98451 2.43128C4.77416 2.28584 4.82574 1.85356 4.82574 1.54248C4.82574 0.580957 4.96468 0.176954 4.55979 0.0719133C4.36879 0.0254376 4.17259 0.00505841 3.97631 0.0113129C3.62834 -0.0214164 3.27745 0.017045 2.94429 0.124433C2.8014 0.197154 2.69423 0.358753 2.76171 0.370875C2.90334 0.385518 3.03406 0.454932 3.12688 0.564795C3.21268 0.750336 3.25481 0.953675 3.24993 1.15868C3.24993 1.15868 3.32535 2.29392 3.07925 2.43532C2.91254 2.53228 2.68232 2.33432 2.18616 1.4334C2.01958 1.11848 1.87243 0.793298 1.74557 0.459754C1.72231 0.404013 1.68704 0.354309 1.64236 0.314316C1.58589 0.272672 1.52066 0.245006 1.45184 0.233514L0.268986 0.241594C0.181167 0.241154 0.0958013 0.271066 0.0268587 0.326434C-0.00595087 0.396174 -0.00882613 0.476652 0.0189202 0.548633C0.0189202 0.548633 0.947737 2.83932 1.99563 3.99477C2.51 4.60651 3.2568 4.96526 4.04776 4.98054Z" fill="white"/>
                                    </svg>
                                </span>
                                <span class="share__item-text">Vkontakte</span>
                            </a>
                            <a href="#" class="share__item" data-code="tw">
                                <span class="share__item-icon share__item-icon--tw">
                                    <svg width="9" height="7" viewBox="0 0 9 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M5.52788 0.00144284V0H5.9158L6.05754 0.027414C6.15204 0.0452114 6.23783 0.068535 6.31491 0.0973918C6.39201 0.126249 6.46661 0.159917 6.53872 0.198391C6.61083 0.236864 6.67623 0.276066 6.73492 0.315982C6.79311 0.355422 6.84533 0.397265 6.89158 0.441509C6.93733 0.486237 7.0087 0.49778 7.10568 0.476138C7.20266 0.454495 7.3071 0.424433 7.419 0.38596C7.5309 0.347487 7.64156 0.304201 7.75097 0.256104C7.86039 0.208007 7.92703 0.177469 7.95091 0.164484C7.97428 0.151022 7.98671 0.143808 7.98821 0.142841L7.98969 0.140677L7.99715 0.13707L8.00461 0.133463L8.01207 0.129856L8.01953 0.126249L8.02102 0.124084L8.02326 0.122642L8.02551 0.121199L8.02699 0.119034L8.03445 0.11687L8.04191 0.115427L8.04043 0.126249L8.03818 0.13707L8.03445 0.147891L8.03072 0.158713L8.02699 0.165927L8.02326 0.173141L8.01953 0.183962C8.01705 0.191176 8.01456 0.200793 8.01207 0.212819C8.00959 0.224845 7.98596 0.272935 7.9412 0.357103C7.89644 0.441271 7.84049 0.526637 7.77335 0.613208C7.70621 0.699778 7.64604 0.765182 7.59283 0.809434C7.53911 0.854162 7.50355 0.885421 7.48614 0.903219C7.46874 0.921492 7.4476 0.938323 7.42273 0.953718L7.38543 0.977525L7.37797 0.981132L7.37051 0.984739L7.36902 0.986903L7.36678 0.988346L7.36454 0.989789L7.36305 0.991953L7.35559 0.99556L7.34813 0.999168L7.34664 1.00133L7.3444 1.00277L7.34216 1.00422L7.34067 1.00638L7.33918 1.00855L7.33694 1.00999L7.3347 1.01143L7.33321 1.0136H7.37051L7.57939 0.970311C7.71865 0.941454 7.85168 0.906588 7.9785 0.865705L8.17992 0.800777L8.2023 0.793563L8.21349 0.789956L8.22095 0.786348L8.22841 0.782741L8.23587 0.779134L8.24333 0.775527L8.25825 0.773363L8.27317 0.77192V0.786348L8.26944 0.787791L8.26571 0.789956L8.26423 0.79212L8.26198 0.793563L8.25974 0.795006L8.25825 0.79717L8.25677 0.799334L8.25452 0.800777L8.25228 0.80222L8.25079 0.804384L8.24931 0.806548L8.24706 0.807991L8.24333 0.815205L8.2396 0.82242L8.23736 0.823862C8.23637 0.825305 8.20479 0.866181 8.14262 0.946504C8.08046 1.0273 8.04689 1.06818 8.04191 1.06915C8.03694 1.07059 8.02997 1.0778 8.02102 1.09079C8.01257 1.10425 7.95985 1.15788 7.86287 1.25166C7.76589 1.34545 7.67091 1.42889 7.57791 1.502C7.48441 1.57558 7.43716 1.666 7.43616 1.77325C7.43467 1.88002 7.42895 2.00074 7.419 2.13541C7.40905 2.27007 7.3904 2.41555 7.36305 2.57186C7.3357 2.72817 7.29342 2.90492 7.23623 3.10211C7.17904 3.29929 7.10941 3.49168 7.02735 3.67925C6.94529 3.86681 6.8595 4.03514 6.76998 4.18424C6.68046 4.33334 6.5984 4.45958 6.5238 4.56299C6.4492 4.66639 6.37336 4.76378 6.29626 4.85516C6.21918 4.94654 6.12171 5.04947 6.00384 5.16393C5.88547 5.27791 5.82082 5.34044 5.80988 5.3515C5.79844 5.36208 5.74971 5.40152 5.66365 5.46981C5.57812 5.53858 5.48611 5.60736 5.38763 5.67614C5.28966 5.74443 5.19964 5.80143 5.11758 5.84711C5.03552 5.8928 4.93655 5.94498 4.82067 6.00366C4.70529 6.06282 4.58046 6.11765 4.44618 6.16815C4.3119 6.21865 4.17016 6.26554 4.02096 6.30882C3.87176 6.35211 3.72753 6.38578 3.58827 6.40982C3.44903 6.43387 3.29112 6.45431 3.11456 6.47114L2.84973 6.49639V6.5H2.36483V6.49639L2.30142 6.49279C2.25915 6.49038 2.22433 6.48797 2.19698 6.48557C2.16963 6.48317 2.06643 6.46994 1.88739 6.44589C1.70835 6.42185 1.56785 6.3978 1.4659 6.37375C1.36395 6.34971 1.21225 6.30401 1.01083 6.23668C0.809413 6.16935 0.637087 6.10129 0.493854 6.03252C0.351121 5.96422 0.261601 5.92094 0.225293 5.90266C0.189485 5.88487 0.149201 5.86275 0.10444 5.83629L0.0373001 5.79661L0.0358156 5.79445L0.0335701 5.79301L0.0313321 5.79156L0.0298401 5.7894L0.0223801 5.78579L0.0149201 5.78219L0.0134355 5.78002L0.01119 5.77858L0.00895204 5.77714L0.00746003 5.77497L0.00597548 5.77281L0.00373001 5.77137H0V5.75694L0.00746003 5.75838L0.0149201 5.76054L0.0484902 5.76415C0.0708703 5.76655 0.131796 5.77016 0.231261 5.77497C0.330733 5.77978 0.436412 5.77978 0.548312 5.77497C0.660213 5.77016 0.774605 5.75934 0.891474 5.74251C1.00835 5.72568 1.14636 5.69682 1.30551 5.65594C1.46466 5.61505 1.61087 5.56648 1.74416 5.51021C1.87695 5.45346 1.97144 5.41114 2.02764 5.38324C2.08334 5.35583 2.16838 5.30484 2.28277 5.2303L2.45435 5.11848L2.45584 5.11632L2.45808 5.11487L2.46033 5.11343L2.46181 5.11127L2.4633 5.1091L2.46554 5.10766L2.46779 5.10622L2.46927 5.10405L2.47673 5.10189L2.48419 5.10044L2.48568 5.09323L2.48792 5.08602L2.49017 5.08457L2.49165 5.08241L2.43197 5.0788C2.39219 5.0764 2.35364 5.07399 2.31634 5.07159C2.27904 5.06918 2.2206 5.05836 2.14103 5.03912C2.06146 5.01988 1.97567 4.99103 1.88366 4.95255C1.79165 4.91408 1.70213 4.86838 1.6151 4.81548C1.52807 4.76258 1.46515 4.71857 1.42636 4.68346C1.38807 4.64883 1.33833 4.59978 1.27716 4.53629C1.21648 4.47233 1.16376 4.40668 1.119 4.33934C1.07424 4.27202 1.03148 4.19433 0.990699 4.10633L0.928774 3.97503L0.925044 3.96421L0.921314 3.95339L0.919076 3.94617L0.917584 3.93896L0.928774 3.9404L0.939964 3.94256L1.02202 3.95339C1.07674 3.9606 1.16253 3.963 1.27939 3.9606C1.39627 3.9582 1.47709 3.95339 1.52185 3.94617C1.56661 3.93896 1.59396 3.93414 1.60391 3.93174L1.61883 3.92814L1.63748 3.92453L1.65613 3.92092L1.65762 3.91876L1.65986 3.91731L1.6621 3.91587L1.66359 3.91371L1.64867 3.9101L1.63375 3.90649L1.61883 3.90289L1.60391 3.89928L1.58899 3.89567C1.57904 3.89327 1.56164 3.88846 1.53677 3.88124C1.5119 3.87403 1.44476 3.84757 1.33535 3.80189C1.22594 3.7562 1.1389 3.71171 1.07424 3.66842C1.00943 3.62501 0.947626 3.57754 0.889235 3.5263C0.831047 3.47436 0.767145 3.40751 0.697513 3.32575C0.627888 3.24399 0.565724 3.149 0.511012 3.04079C0.456308 2.93257 0.415277 2.82917 0.387922 2.73058C0.360676 2.63256 0.3427 2.53235 0.334217 2.43119L0.320781 2.27969L0.328241 2.28113L0.335701 2.2833L0.343161 2.2869L0.350621 2.29051L0.358081 2.29412L0.365541 2.29772L0.481172 2.34822C0.558264 2.38189 0.653998 2.41075 0.768383 2.43479C0.882775 2.45884 0.951154 2.47207 0.973534 2.47447L1.0071 2.47808H1.07424L1.07276 2.47592L1.07051 2.47447L1.06828 2.47303L1.06678 2.47087L1.0653 2.4687L1.06305 2.46726L1.06082 2.46582L1.05932 2.46365L1.05186 2.46004L1.0444 2.45644L1.04292 2.45427L1.04067 2.45283L1.03844 2.45139L1.03694 2.44922L1.02948 2.44562L1.02202 2.44201L1.02054 2.43984C1.01905 2.43888 0.99766 2.42349 0.956376 2.39367C0.915592 2.36337 0.872823 2.32418 0.828063 2.27608C0.783303 2.22798 0.738543 2.17749 0.693783 2.12458C0.64894 2.07156 0.609 2.01483 0.574422 1.95505C0.539614 1.89493 0.502806 1.81846 0.464014 1.72564C0.425721 1.6333 0.396627 1.54023 0.376731 1.44645C0.356843 1.35266 0.345653 1.26008 0.343161 1.1687C0.340677 1.07732 0.343161 0.999168 0.350621 0.93424C0.358081 0.869312 0.373001 0.795965 0.395382 0.714206C0.417762 0.632448 0.450093 0.545877 0.492362 0.454495L0.555772 0.317425L0.559502 0.306604L0.563232 0.295782L0.565478 0.29434L0.566962 0.292175L0.568454 0.290011L0.570692 0.288568L0.572938 0.290011L0.574422 0.292175L0.575914 0.29434L0.578152 0.295782L0.580398 0.297225L0.581882 0.29939L0.583374 0.301554L0.585612 0.302997L0.589342 0.310211L0.593072 0.317425L0.595318 0.318868L0.596802 0.321032L0.697513 0.429245C0.764653 0.501387 0.844229 0.581948 0.936234 0.670921C1.02825 0.759894 1.07922 0.806065 1.08916 0.809434C1.09912 0.813279 1.11154 0.824338 1.12646 0.842619C1.14138 0.860417 1.19112 0.902981 1.27567 0.970311C1.36022 1.03764 1.47087 1.1158 1.60764 1.20477C1.74441 1.29375 1.89609 1.38152 2.0627 1.46809C2.22931 1.55466 2.40835 1.63281 2.59982 1.70255C2.7913 1.77229 2.92558 1.81798 3.00266 1.83962C3.07975 1.86127 3.21154 1.88892 3.39804 1.92259C3.58454 1.95625 3.72505 1.9779 3.81954 1.98751C3.91403 1.99713 3.97869 2.00266 4.0135 2.00411L4.06572 2.00555L4.06423 1.99473L4.06199 1.98391L4.04707 1.89373C4.03712 1.83361 4.03215 1.74944 4.03215 1.64123C4.03215 1.53302 4.04085 1.43322 4.05826 1.34184C4.07567 1.25046 4.10178 1.15788 4.13659 1.0641C4.1714 0.970311 4.20547 0.895038 4.23879 0.838291C4.27261 0.78202 4.31687 0.717814 4.37158 0.645671C4.42629 0.573529 4.49716 0.498985 4.58419 0.422031C4.67122 0.345077 4.77069 0.276542 4.88259 0.216426C4.99449 0.15631 5.09769 0.110615 5.19218 0.0793563C5.28668 0.0480971 5.36625 0.0276521 5.4309 0.0180355C5.49556 0.00841898 5.52788 0.00288568 5.52788 0.00144284Z" fill="white"/>
                                    </svg>
                                </span>
                                <span class="share__item-text">Twitter</span>
                            </a>
                            <a href="#" class="share__item" data-code="tg">
                                <span class="share__item-icon share__item-icon--tg">
                                    <svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M1.39589 3.04852C1.39589 3.04852 5.05491 1.51189 6.32392 0.9708C6.8104 0.754384 8.46012 0.0617918 8.46012 0.0617918C8.46012 0.0617918 9.22155 -0.241191 9.15809 0.494655C9.13692 0.797667 8.96773 1.85815 8.79854 3.00523C8.54472 4.62846 8.26976 6.40316 8.26976 6.40316C8.26976 6.40316 8.22746 6.90097 7.86791 6.98753C7.50836 7.0741 6.91613 6.68455 6.8104 6.59795C6.72577 6.53304 5.22411 5.5591 4.6742 5.08295C4.52614 4.9531 4.35695 4.6934 4.69533 4.39039C5.45676 3.67617 6.36622 2.78882 6.91613 2.2261C7.16995 1.96638 7.42374 1.36038 6.36622 2.09622C4.86456 3.15674 3.38403 4.15231 3.38403 4.15231C3.38403 4.15231 3.04561 4.36873 2.41111 4.17394C1.77657 3.97918 1.03631 3.71945 1.03631 3.71945C1.03631 3.71945 0.528726 3.39481 1.39589 3.04852Z" fill="white"/>
                                    </svg>
                                </span>
                                <span class="share__item-text">Telegram</span>
                            </a>
                            <a href="#" class="share__item js-share-item-copy">
                                <span class="share__item-icon share__item-icon--copy">
                                    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M4.19922 5.40327C4.37217 5.63449 4.59283 5.8258 4.84622 5.96425C5.09962 6.10269 5.37982 6.18501 5.66783 6.20564C5.95584 6.22627 6.24492 6.18471 6.51546 6.08379C6.78599 5.98287 7.03166 5.82495 7.2358 5.62074L8.44399 4.41255C8.81079 4.03277 9.01375 3.52412 9.00917 2.99615C9.00458 2.46818 8.79281 1.96313 8.41946 1.58978C8.04611 1.21644 7.54106 1.00466 7.01309 1.00008C6.48512 0.995488 5.97647 1.19845 5.59669 1.56525L4.904 2.25392" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M5.81002 4.59658C5.63707 4.36536 5.41641 4.17404 5.16302 4.0356C4.90962 3.89716 4.62942 3.81483 4.34141 3.79421C4.0534 3.77358 3.76432 3.81514 3.49379 3.91605C3.22325 4.01697 2.97758 4.17489 2.77344 4.3791L1.56525 5.58729C1.19845 5.96707 0.995488 6.47572 1.00008 7.0037C1.00466 7.53167 1.21644 8.03672 1.58978 8.41006C1.96313 8.78341 2.46818 8.99518 2.99615 8.99977C3.52412 9.00436 4.03277 8.80139 4.41255 8.43459L5.10122 7.74592" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </span>
                                <span class="share__item-text">Скопировать ссылку</span>
                            </a>
                        </div>
                    </div> <!-- //share -->
                    </noindex>
                    
                                        <div class="row">
                        <div class="col-xl-9 col-lg-8 col-poster">
                            <div class="article-poster">
                                <picture >

<img src="https://248006.selcdn.ru/main/iblock/5e3/5e38408b84d98dbbd7258cdc6334f746/0f8a9cabe4f5bc2dfc403299ea4ffc81.jpg" itemprop='image' class='hidden-xs' />
</picture>                                <picture >

<img src="https://248006.selcdn.ru/main/iblock/5e3/5e38408b84d98dbbd7258cdc6334f746/0f8a9cabe4f5bc2dfc403299ea4ffc81.jpg" itemprop='image' class='visible-xs' />
</picture>                            </div>
                            <noindex>
                            <p class="article-poster-text" data-nosnippet>
                                    Иллюстрация: Оля Ежак для Skillbox Media                            </p>
                            </noindex>
                        </div>
                                                <div class="col-xl-3 col-lg-4 col-author">
                                                        <div class="article-author">
                                <div class="article-author__image">
                                    <a href="/media/authors/design-skillbox-media/">
                                        <img src="https://248006.selcdn.ru/main/iblock/614/614ef49b79def2fb744ffa184d0f3c4f/d891b2a9b1b2b1438fe4429d4050e57e.png" alt="Редакция «Дизайн» Skillbox Media">
                                    </a>
                                </div>
                                <div class="article-author__info">
                                    <div class="article-author__name">
                                        Редакция «Дизайн» Skillbox Media                                    </div>
                                    <div class="article-author__description">
                                        Пишем про дизайн и&nbsp;искусство. Всё, что вы&nbsp;хотели знать о&nbsp;настоящем, прошлом и&nbsp;будущем визуальной культуры.                                    </div>
                                </div>
                            </div>
                                                    </div>
                                            </div>
                                    </div>

                
                <div class="container">
                                        <div class="row flex-row-rev">
                        <div class="col-xl-3 col-lg-4 col-author">
                                                                                                                <div class="js-article-banner" data-article-banner-mobile data-type="side_mounted" data-article-banner-sticky-start>
                                            <!--AdFox START-->
<!--yandex_skillbox.media-->
<!--Площадка: Skillbox / Сквозной для застройщика Легенда / Боковой баннер сквозной для застройщика Легенда-->
<!--Категория: <не задана>-->
<!--Тип баннера: Media banner-->
<div id="adfox_176131540100027244"></div>
<script>
    window.yaContextCb.push(()=>{
        Ya.adfoxCode.create({
            ownerId: 11649869,
            containerId: 'adfox_176131540100027244',
            params: {
                p1: 'dkugb',
                p2: 'p'
            }
        })
    })
</script>                                </div>
                            <div class="js-article-banner" data-article-banner-mobile data-type="vertical" data-article-banner-sticky-end></div>
                        </div>
                        <div class="col-xl-9 col-lg-8 col-poster">
                            <div class="container container--setka">
                                <div class="js-article-banner" data-type="top"></div>
                                <div class="article-detail-text__setka" data-detail-text>
                                    <div class="stk-post stk-layout_12col_18068 stk-theme_26309" data-stk="{&quot;images&quot;:[{&quot;id&quot;:51090,&quot;alt&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;},{&quot;id&quot;:51082,&quot;alt&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;},{&quot;id&quot;:50941,&quot;alt&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;},{&quot;id&quot;:50942,&quot;alt&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;},{&quot;id&quot;:50940,&quot;alt&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;},{&quot;id&quot;:50938,&quot;alt&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;},{&quot;id&quot;:50939,&quot;alt&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;},{&quot;id&quot;:50936,&quot;alt&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;},{&quot;id&quot;:50935,&quot;alt&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;},{&quot;id&quot;:50937,&quot;alt&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;},{&quot;id&quot;:50934,&quot;alt&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;},{&quot;id&quot;:50933,&quot;alt&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;},{&quot;id&quot;:50932,&quot;alt&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;},{&quot;id&quot;:50930,&quot;alt&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;},{&quot;id&quot;:50931,&quot;alt&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;},{&quot;id&quot;:50929,&quot;alt&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;},{&quot;id&quot;:50926,&quot;alt&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;},{&quot;id&quot;:50927,&quot;alt&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;},{&quot;id&quot;:50924,&quot;alt&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;},{&quot;id&quot;:50925,&quot;alt&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;},{&quot;id&quot;:50923,&quot;alt&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;},{&quot;id&quot;:50921,&quot;alt&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;},{&quot;id&quot;:50922,&quot;alt&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;},{&quot;id&quot;:50920,&quot;alt&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;},{&quot;id&quot;:50919,&quot;alt&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;},{&quot;id&quot;:50918,&quot;alt&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;},{&quot;id&quot;:50917,&quot;alt&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;},{&quot;id&quot;:50916,&quot;alt&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;}]}" data-ui-id="post" data-ce-tag="post" data-reset-type="class" data-layout-type="auto" data-editor-version="3.2.8-rc1"><div class="stk-theme_26309__mb_15 stk-grid" data-ce-tag="grid"><div data-col-width="12" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col"><p class="stk-reset" data-ce-tag="paragraph">Адаптивность — это термин, который встречается и&nbsp;в&nbsp;дизайне, и&nbsp;в&nbsp;айти. Он&nbsp;означает одно и&nbsp;то&nbsp;же? Или в&nbsp;каждой области подразумевается своё значение?</p><p class="stk-reset" data-ce-tag="paragraph">Простыми словами объясняют, что такое «адаптивный», арт-директор <a class="stk-reset" href="#stk-1">Ален Загардинов</a> и&nbsp;фронтенд-разработчик <a class="stk-reset" href="#stk-2">Олег Рязанцев</a>.</p><div class="stk-grid" data-stk-css="stk3Nhbe" data-ce-tag="grid"><div data-col-width="4" class="stk-grid-col" data-stk-css="" data-stk-css-m="" data-ce-tag="grid-col"><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/11394420032023_accf102caaa970ce65d217b9ae9a8e9a57caa67c.jpg" data-image-id="50916" data-image-name="1.jpg" class="stk-image stk-reset" width="1260" height="1280" loading="lazy"/></div></figure></div><div data-col-width="8" class="stk-grid-col stk-grid-col_last valign-middle" data-stk-css="stkZkr54" data-ce-tag="grid-col"><h3 class="stk-theme_26309__style_medium_header stk-theme_26309__mb_05 stk-reset" data-ce-tag="paragraph">Ален Загардинов</h3><p class="stk-theme_26309__mb_05 stk-reset" data-ce-tag="paragraph">Арт-директор и&nbsp;сеньор-дизайнер в&nbsp;студии Friends <a href="https://designdepartment.online/" target="_blank" class="stk-reset">Design Department</a>, креативный и&nbsp;саунд-дизайнер, диджей, амбиверт.</p><p class="stk-theme_26309__mb_05 stk-reset" data-ce-tag="paragraph">Победитель ADCE 2021&nbsp;и&nbsp;Red Apple 2022.</p><div class="sklbx-links stk-container" data-ce-tag="container" data-container-name="Ссылки"><a class="sklbx-link sklbx-link--tw stk-container stk-container-link stk-reset stk-theme_26309__mb_0" data-ce-tag="container" data-container-name="Behance" href="https://www.behance.net/tulevick" target="_blank"><svg class="sklbx-link__icon" width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
              <path d="M6.938 4.503c.702 0 1.34.06 1.92.188.577.13 1.07.33 1.485.61.41.28.733.65.96 1.12.225.47.34 1.05.34 1.73 0 .74-.17 1.36-.507 1.86-.338.5-.837.9-1.502 1.22.906.26 1.576.72 2.022 1.37.448.66.665 1.45.665 2.36 0 .75-.13 1.39-.41 1.93-.28.55-.67 1-1.16 1.35-.48.348-1.05.6-1.67.767-.61.165-1.252.254-1.91.254H0V4.51h6.938v-.007zM16.94 16.665c.44.428 1.073.643 1.894.643.59 0 1.1-.148 1.53-.447.424-.29.68-.61.78-.94h2.588c-.403 1.28-1.048 2.2-1.9 2.75-.85.56-1.884.83-3.08.83-.837 0-1.584-.13-2.272-.4-.673-.27-1.24-.65-1.72-1.14-.464-.49-.823-1.08-1.077-1.77-.253-.69-.373-1.45-.373-2.27 0-.803.135-1.54.403-2.23.27-.7.644-1.28 1.12-1.79.495-.51 1.063-.895 1.736-1.194s1.4-.433 2.22-.433c.91 0 1.69.164 2.38.523.67.34 1.22.82 1.66 1.4.44.586.75 1.26.94 2.02.19.75.25 1.54.21 2.38h-7.69c0 .84.28 1.632.71 2.065l-.08.03zm-10.24.05c.317 0 .62-.03.906-.093.29-.06.548-.165.763-.3.21-.135.39-.328.52-.583.13-.24.19-.57.19-.96 0-.75-.22-1.29-.64-1.62-.43-.32-.99-.48-1.69-.48H3.24v4.05H6.7v-.03zm13.607-5.65c-.352-.385-.94-.592-1.657-.592-.468 0-.855.074-1.166.238-.302.15-.55.35-.74.59-.19.24-.317.48-.392.75-.075.26-.12.5-.135.71h4.762c-.07-.75-.33-1.3-.68-1.69v.01zM6.52 10.45c.574 0 1.05-.134 1.425-.412.374-.27.554-.72.554-1.338 0-.344-.07-.625-.18-.846-.13-.22-.3-.39-.5-.512-.21-.124-.45-.21-.72-.257-.27-.053-.56-.074-.84-.074H3.23v3.44h3.29zm9.098-4.958h5.968v1.454h-5.968V5.48v.01z"></path>
            </svg></a><a class="sklbx-link sklbx-link--tw stk-container stk-container-link stk-reset stk-theme_26309__mb_0" data-ce-tag="container" data-container-name="LinkedIn" href="https://www.linkedin.com/in/alen-zagardinov/" target="_blank"><svg class="sklbx-link__icon" width="20" height="20" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
              <path d="M 8.953125 39.371094 L 0.660156 39.371094 L 0.660156 13.089844 L 8.953125 13.089844 Z M 4.800781 9.503906 C 2.152344 9.503906 0 7.34375 0 4.734375 C 0 2.121094 2.152344 0.00390625 4.800781 0.00390625 C 7.453125 0.00390625 9.605469 2.121094 9.605469 4.734375 C 9.605469 7.34375 7.453125 9.503906 4.800781 9.503906 Z M 39.992188 39.371094 L 31.714844 39.371094 L 31.714844 26.578125 C 31.714844 23.527344 31.652344 19.617188 27.40625 19.617188 C 23.09375 19.617188 22.433594 22.929688 22.433594 26.359375 L 22.433594 39.371094 L 14.148438 39.371094 L 14.148438 13.089844 L 22.101562 13.089844 L 22.101562 16.675781 L 22.21875 16.675781 C 23.324219 14.609375 26.03125 12.429688 30.066406 12.429688 C 38.457031 12.429688 40 17.871094 40 24.933594 L 40 39.371094 Z M 39.992188 39.371094 "></path>
            </svg></a></div></div></div></div></div><div class="stk-theme_26309__mb_15 stk-grid" data-ce-tag="grid"><div data-col-width="12" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col"><div class="stk-grid stk-theme_26309__mb_15" data-ce-tag="grid" data-stk-css="stkxfmZd"><div data-col-width="12" class="stk-grid-col stk-theme_26309__pad_round_1 stk-grid-col_last" data-ce-tag="grid-col"><h4 class="stk-reset stk-theme_26309__mb_05 stk-theme_26309__style_small_header" data-ce-tag="paragraph" id="stk-1">Ален Загардинов об&nbsp;адаптивном на&nbsp;дизайнерском</h4></div></div><div class="stk-grid" data-ce-tag="grid"><div data-col-width="1" class="stk-grid-col stk-grid-col_empty" data-stk-css="" data-stk-css-m="" data-ce-tag="grid-col"><p class="ce-element--empty stk-element_no-text stk-reset" data-ce-tag="paragraph">
					</p></div><div data-col-width="11" class="stk-theme_26309__pad_hor_1 stk-grid-col stk-grid-col_last" data-stk-css="stk3wDKO" data-ce-tag="grid-col"><p class="stk-reset stk-theme_26309__mb_05 stk-theme_26309__style_small_text" data-ce-tag="paragraph">«Я&nbsp;его адаптирую, адаптирую, а&nbsp;он&nbsp;взорвался… Буду! Буду адаптировать, пока не&nbsp;адаптируется!»</p><p class="stk-theme_26309__mb_05 stk-reset stk-theme_26309__style_small_text" data-ce-tag="paragraph">Отсылка к&nbsp;«Санаторию сатаны» :)</p><p class="stk-theme_26309__mb_05 stk-reset stk-theme_26309__style_small_text" data-ce-tag="paragraph">Именно цитатой звучит так: «„Монтирую, монтирую, б****, а&nbsp;он&nbsp;взорвался на&nbsp;х**. „Больше не&nbsp;будете ремонтировать?“ „Буду! И&nbsp;буду! Пока он, с***, не&nbsp;будет показывать!“»</p></div></div><h2 class="stk-theme_26309__style_large_header stk-reset" data-ce-tag="paragraph">Что такое адаптивность</h2><p class="stk-reset" data-ce-tag="paragraph">Адаптивность&nbsp;— реакция контента, сайта и&nbsp;любых других элементов, находящихся в&nbsp;дизайн-системе, на&nbsp;изменение, увеличение, ротейшен пространства, в&nbsp;котором оно находится.</p><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/11412720032023_7e362904b7d857173ea1dbafb405ab1977cbbb2a.gif" data-image-id="50917" data-image-name="2.gif" width="770" height="578" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description"><em class="stk-reset">Изображение: Dmytro Prudnikov / <a class="stk-reset" href="https://dribbble.com/shots/1764500-Adaptive-Layout-Design" target="_blank">Dribbble</a></em></figcaption></figure><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/11412720032023_6896a8696b8038f4fc8989ab005e4fccc3b90047.jpg" data-image-id="50918" data-image-name="3.jpg" width="1540" height="1155" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description"><em class="stk-reset">Изображение: <a class="stk-reset" href="https://www.behance.net/gallery/144760989/ABC-NEWS-redesign-concept" target="_blank">Tanya Nikolaeva</a> / Behance</em></figcaption></figure><p class="stk-theme_26309__mb_05 stk-reset" data-ce-tag="paragraph"><strong class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">Очень важное</strong>: адаптивность&nbsp;— это не&nbsp;просто красивый <span class="stk-reset" data-stk-footnote-link="fnC_Th5" data-gtm-vis-has-fired-10171822_255="1">скейлинг</span>. Независимо от&nbsp;формата и&nbsp;размеров носителя она позволяет сохранять:</p><ul class="stk-theme_26309__pad_hor_1 stk-reset" data-ce-tag="list"><li class="stk-reset stk-list-item" data-ce-tag="list-item">баланс,</li><li class="stk-reset stk-list-item" data-ce-tag="list-item">иерархию объектов и&nbsp;элементов,</li><li class="stk-reset stk-list-item" data-ce-tag="list-item">читаемость.</li></ul><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/11412720032023_9f4177150537e15f4549b4114125e7b7fd1ba2c4.gif" data-image-id="50919" data-image-name="4.gif" width="770" height="578" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description"><em class="stk-reset">Изображение: Jovie Brett Bardoles / <a class="stk-reset" href="https://dribbble.com/shots/2159651-Responsive-Material-Design" target="_blank">Dribbble</a></em></figcaption></figure></div></div><div class="stk-theme_26309__mb_15 stk-grid" data-ce-tag="grid"><div data-col-width="12" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col"><h2 class="stk-reset stk-theme_26309__style_large_header" data-ce-tag="paragraph">Адаптивность в&nbsp;дизайне</h2><p class="stk-reset" data-ce-tag="paragraph">Адаптивность&nbsp;— это понятие из&nbsp;веб-дизайна. Но&nbsp;я&nbsp;хочу показать, как она может быть связана с&nbsp;диджитал-дизайном вообще и&nbsp;даже как адаптивность работает внутри креатива или графического дизайна.</p><p class="stk-reset" data-ce-tag="paragraph">Адаптивный дизайн, если рассматривать пристально, <strong class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">вариативный</strong>. В&nbsp;блоге <a href="https://blog.shillingtoneducation.com/responsive-designexplained-in-gifs/" target="_blank" class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">Shillington</a> есть подборка гифок об этом.</p><p class="stk-reset" data-ce-tag="paragraph">Здесь, например, мы&nbsp;видим, что адаптив адаптивом, но&nbsp;есть различия по&nbsp;ограничениям и&nbsp;возможностям&nbsp;— с&nbsp;заданным контейнером по&nbsp;ширине или без него:</p><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/11412720032023_08b05e7a793ee96c87ad6538ed513e45f4ce5704.gif" data-image-id="50920" data-image-name="5.gif" width="770" height="384" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description"><em class="stk-reset">Изображение: <a class="stk-reset" href="https://blog.shillingtoneducation.com/responsive-designexplained-in-gifs/" target="_blank">Shillington</a></em></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">То&nbsp;же самое можно сказать про приоритетность носителя: десктоп или мобильная версия <span class="stk-reset" data-stk-footnote-link="fnvErLK">first?</span> С&nbsp;чего начнём? А&nbsp;что мы&nbsp;потом будем адаптировать под остальные форматы?</p><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/11412720032023_5a1bba1c28b4a49e108d429d2577500dc235af18.gif" data-image-id="50922" data-image-name="6.gif" width="770" height="280" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description"><em class="stk-reset">Изображение: <a href="https://blog.shillingtoneducation.com/responsive-designexplained-in-gifs/" target="_blank" class="stk-reset">Shillington</a></em></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">И&nbsp;теперь плавно переходим к&nbsp;понятию «отзывчивый дизайн». Отзывчивый дизайн вытекает из&nbsp;адаптива:</p><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/11412720032023_3cd9ef3440d95f4bb61a3e415a1c8e825d3ce05e.gif" data-image-id="50921" data-image-name="7.gif" width="770" height="280" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description"><em class="stk-reset">Изображение: <a href="https://blog.shillingtoneducation.com/responsive-designexplained-in-gifs/" target="_blank" class="stk-reset">Shillington</a></em></figcaption></figure></div></div><div class="stk-theme_26309__mb_15 stk-grid" data-ce-tag="grid"><div data-col-width="12" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col"><h2 class="stk-reset stk-theme_26309__style_large_header" data-ce-tag="paragraph">Адаптивный дизайн и&nbsp;отзывчивый дизайн</h2><p class="stk-reset" data-ce-tag="paragraph">Адаптив и&nbsp;отзывчивость связаны. Смотрите, я&nbsp;вам схему сделал:</p><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/14151221032023_d1e90e959a31af94e90547aea44dae7589f12dad.png" data-image-id="51090" data-image-name="11430820032023_6caf85fa09e0642959e62c753d9a2f18236eb1da.png" class="stk-image stk-reset" width="1540" height="866" loading="lazy"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description"><em class="stk-reset">Иллюстрация: Ariel Salminen / Ален Загардинов</em></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Более подробно эта связь описана в&nbsp;<a href="https://arie.ls/2012/adaptive-vs-responsive-design/" target="_blank" class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">Arie</a>. Собственно, там есть мэп самого адаптивного дизайна, которую я&nbsp;перерисовал и&nbsp;перевёл. Так что в&nbsp;какой-то степени этот имидж тоже можно назвать адаптированным под русскоговорящую аудиторию :)</p><p class="stk-reset" data-ce-tag="paragraph">Создавая веб-дизайн из&nbsp;<span class="stk-reset" data-stk-footnote-link="fnbMLhO" data-gtm-vis-has-fired-10171822_255="1">минимально необходимых блоков</span>, заполняя его простыми формами, мы&nbsp;будем развивать и&nbsp;улучшать систему с помощью функциональности, объектов и&nbsp;активных элементов. Это рано или поздно вынудит нас создать адаптивную версию, которая будет отвечать и&nbsp;реагировать на&nbsp;изменение экрана, в&nbsp;котором эта система будет транслироваться.</p><p class="stk-reset" data-ce-tag="paragraph">То&nbsp;есть либо мы&nbsp;создаём условные гайды и&nbsp;правила под каждый формат, либо делаем эту систему перспективно и прогрессивно изменяющейся. Это и&nbsp;есть зачатки отзывчивого дизайна.</p><p class="stk-reset" data-ce-tag="paragraph">Он&nbsp;более гибкий, чем адаптив: для адаптива мы&nbsp;всё&nbsp;же задаём рамки или верстаем сайт/страницу в&nbsp;нескольких форматах. А&nbsp;отзывчивый работает по&nbsp;другой структуре: при возможности прогрессивной сетки, выставленных размерах, пропорциях и&nbsp;расстояниях наша система будет сохранять структуру и&nbsp;видоизменяться, становиться «резиновой».</p><div class="stk-grid" data-ce-tag="grid" data-stk-css="stk5slTS"><div data-col-width="12" class="stk-grid-col stk-theme_26309__pad_round_1 stk-grid-col_last" data-ce-tag="grid-col"><p class="stk-reset stk-theme_26309__mb_05" data-ce-tag="paragraph">Мы&nbsp;будем куролесить как вздумается, а&nbsp;макет будет послушным мальчиком и&nbsp;адекватно подстроится под заданные ограничения.</p></div></div><p class="stk-reset stk-theme_26309__mb_15" data-ce-tag="paragraph">Подробнее можно прочитать на&nbsp;«<a href="https://habr.com/ru/post/148224/" target="_blank" class="stk-reset">Хабре</a>».</p><h3 class="stk-theme_26309__style_medium_header stk-theme_26309__mb_05 stk-reset" data-ce-tag="paragraph">Так в&nbsp;чём разница между «адаптивным» и&nbsp;«отзывчивым»?</h3><p class="stk-reset" data-ce-tag="paragraph">Условно говоря, адаптивный дизайн&nbsp;— это жанр, а&nbsp;отзывчивый дизайн&nbsp;— его поджанр.</p><p class="stk-reset" data-ce-tag="paragraph">И&nbsp;если адаптивом был всеми известный рок в&nbsp;виде Guns‘n’Roses или Black Sabbath, то&nbsp;отзывчивый&nbsp;— это уже новое прочтение и&nbsp;нечто более гибкое для нашего времени и&nbsp;вкусов публики: Yves Tumor и&nbsp;Arctic Monkeys, прости господи.</p><p class="stk-reset" data-ce-tag="paragraph"><strong class="stk-reset">Но&nbsp;сместим фокус от&nbsp;веб-дизайна к&nbsp;диджиталу и&nbsp;графическому дизайну.</strong></p><p class="stk-reset" data-ce-tag="paragraph">Говоря про диджитал, хочу наглядно показать адаптив изображения уже не&nbsp;под формат экранов, а&nbsp;под формат средства передачи информации и&nbsp;каналы коммуникации. Это посты в&nbsp;соцсети, сторис и&nbsp;стандартная горизонтальная пикча 16×9, которые мы&nbsp;повсеместно используем.</p><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/11430820032023_c0c954a3a268bfc515e88839a41a25de5bd1b194.jpg" data-image-id="50925" data-image-name="9.jpg" width="1540" height="866" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description">Мы&nbsp;сохраняем баланс и&nbsp;суть месседжа, но&nbsp;меняем заполненность макета контентом<br><em class="stk-reset">Изображение: предоставлено Аленом Загардиновым</em></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">А&nbsp;теперь десерт. Проект креативного пространства Pirate от&nbsp;британской студии Only.</p><p class="stk-reset" data-ce-tag="paragraph">Очень смелый и&nbsp;крутой проект, на&nbsp;мой взгляд. Их&nbsp;главный месседж: Democratizing creative space. Оно и&nbsp;видно…</p><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/11430820032023_cece785eb92cd643f5e788e5f37e3d933a76f56c.jpg" data-image-id="50924" data-image-name="10.jpg" width="1540" height="866" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description"><em class="stk-reset">Изображение: Only. / <a class="stk-reset" href="https://www.behance.net/gallery/113328233/Pirate" target="_blank">Behance</a></em></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">За&nbsp;основу взят самый обычный… Arial. И&nbsp;его вывернули наизнанку.</p><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/11430920032023_2229e417950c39bd1ac90259b6c781a232a40430.jpg" data-image-id="50927" data-image-name="11.jpg" width="1540" height="866" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description"><em class="stk-reset">Изображение: Only. / <a class="stk-reset" href="https://www.behance.net/gallery/113328233/Pirate" target="_blank">Behance</a></em></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Что&nbsp;же здесь примечательного? И&nbsp;главное&nbsp;— адаптивного?</p><p class="stk-reset" data-ce-tag="paragraph">Ребята разрушили правила и&nbsp;создали их&nbsp;заново. Взяли за&nbsp;<strong class="stk-reset">основу</strong> шрифт, который они стали тянуть <del class="stk-reset">как им&nbsp;вздумается</del> по&nbsp;заданной <strong class="stk-reset">системе</strong>, где используется либо процентное соотношение 50%, 100%, 300% по&nbsp;вертикали или горизонтали, либо более креативный подход в&nbsp;физических носителях, когда всё пространство заполнено текстовым фреймом.</p><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/11430820032023_71b97f3681cfd481f98f8279e17d064ae63ea66a.jpg" data-image-id="50926" data-image-name="12.jpg" width="1540" height="866" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description"><em class="stk-reset">Изображение: Only. / <a class="stk-reset" href="https://www.behance.net/gallery/113328233/Pirate" target="_blank">Behance</a></em></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Смело, эффектно, свежо. Система есть система, даже если визуально она нам не&nbsp;понятна с&nbsp;первого взгляда или не&nbsp;считывается моментально. Но&nbsp;она есть и&nbsp;работает!</p><p class="stk-reset" data-ce-tag="paragraph">Главный подход к&nbsp;этому дизайну&nbsp;— создать продукт, выделяющийся на&nbsp;фоне других площадок под креативные пространства, быть запоминающимся. Элемент дизайн-системы&nbsp;— <strong class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">адаптивная типографика</strong>, которая, будто жидкость, растекается по&nbsp;всему холсту, заполняя его полностью.</p></div></div><div class="stk-theme_26309__mb_15 stk-grid" data-ce-tag="grid"><div data-col-width="12" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col"><div class="stk-grid stk-theme_26309__mb_15" data-stk-css="stkaUrnt" data-ce-tag="grid" id="stk-2"><div data-col-width="4" class="stk-grid-col" data-stk-css="" data-stk-css-m="" data-ce-tag="grid-col"><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img class="stk-image stk-reset" data-image-id="50932" src="/upload/setka_images/11462520032023_b96f49b701f581862428f9c58e1a46c731d0aa89.jpg" loading="lazy"/></div></figure></div><div data-col-width="8" class="stk-grid-col stk-theme_26309__pad_round_1 stk-grid-col_last valign-middle" data-ce-tag="grid-col"><h3 class="stk-theme_26309__style_medium_header stk-theme_26309__mb_05 stk-reset" data-ce-tag="paragraph">Олег Рязанцев</h3><p class="stk-theme_26309__mb_05 stk-reset" data-ce-tag="paragraph">JavaScript-разработчик веб-приложения «Альфа-Банка».</p><div class="sklbx-links stk-container stk-theme_26309__mb_0" data-ce-tag="container" data-container-name="Ссылки"><a class="sklbx-link sklbx-link--tw stk-container stk-container-link stk-reset stk-theme_26309__mb_0" data-ce-tag="container" data-container-name="LinkedIn" href="https://www.linkedin.com/in/oleg-ryazantsev-39674820a" target="_blank"><svg class="sklbx-link__icon" width="20" height="20" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
          <path d="M 8.953125 39.371094 L 0.660156 39.371094 L 0.660156 13.089844 L 8.953125 13.089844 Z M 4.800781 9.503906 C 2.152344 9.503906 0 7.34375 0 4.734375 C 0 2.121094 2.152344 0.00390625 4.800781 0.00390625 C 7.453125 0.00390625 9.605469 2.121094 9.605469 4.734375 C 9.605469 7.34375 7.453125 9.503906 4.800781 9.503906 Z M 39.992188 39.371094 L 31.714844 39.371094 L 31.714844 26.578125 C 31.714844 23.527344 31.652344 19.617188 27.40625 19.617188 C 23.09375 19.617188 22.433594 22.929688 22.433594 26.359375 L 22.433594 39.371094 L 14.148438 39.371094 L 14.148438 13.089844 L 22.101562 13.089844 L 22.101562 16.675781 L 22.21875 16.675781 C 23.324219 14.609375 26.03125 12.429688 30.066406 12.429688 C 38.457031 12.429688 40 17.871094 40 24.933594 L 40 39.371094 Z M 39.992188 39.371094 "></path>
        </svg></a><a class="sklbx-link sklbx-link--fb stk-container stk-container-link stk-reset stk-theme_26309__mb_0" data-ce-tag="container" data-container-name="Telegram" href="https://t.me/ManUnderRain" target="_blank"><svg class="sklbx-link__icon" width="25" height="20" xmlns="http://www.w3.org/2000/svg">
          <path d="m9.417 15.181-.397 5.584c.568 0 .814-.244 1.109-.537l2.663-2.545 5.518 4.041c1.012.564 1.725.267 1.998-.931l3.622-16.972.001-.001c.321-1.496-.541-2.081-1.527-1.714l-21.29 8.151c-1.453.564-1.431 1.374-.247 1.741l5.443 1.693 12.643-7.911c.595-.394 1.136-.176.691.218z" fill-rule="evenodd"></path>
        </svg></a><a class="sklbx-link sklbx-link--fb stk-container stk-container-link stk-reset stk-theme_26309__mb_0" data-ce-tag="container" data-container-name="Github" href="https://github.com/rainmanxn" target="_blank"><svg class="sklbx-link__icon" width="25" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" fill-rule="evenodd"></path>
        </svg></a></div></div></div><div class="stk-grid stk-theme_26309__mb_15" data-ce-tag="grid" data-stk-css="stkK1pMF"><div data-col-width="12" class="stk-grid-col stk-theme_26309__pad_round_1 stk-grid-col_last" data-ce-tag="grid-col"><h4 class="stk-reset stk-theme_26309__mb_05 stk-theme_26309__style_small_header" data-ce-tag="paragraph">Олег Рязанцев об&nbsp;адаптивном на&nbsp;айтишном</h4></div></div><p class="stk-reset" data-ce-tag="paragraph">Сейчас начинающим разработчикам странно слышать понятие «адаптивность». И&nbsp;так ясно, что у&nbsp;нас есть куча устройств, на&nbsp;которых мы&nbsp;можем смотреть веб-страницы: мобильные телефоны, планшеты, ноутбуки, компьютеры с&nbsp;различными диагоналями мониторов и&nbsp;даже телевизоры. Все перечислять не&nbsp;будем, но&nbsp;да, мы&nbsp;знаем, что есть умельцы, кто и&nbsp;с&nbsp;тамагочи или с&nbsp;холодильника сёрфит по веб-сайтам, но&nbsp;до&nbsp;такого мы&nbsp;доходить не&nbsp;будем. Это крайне редкий кейс, на&nbsp;котором мы&nbsp;не&nbsp;будем заострять внимание.</p></div></div><div class="stk-theme_26309__mb_15 stk-grid" data-ce-tag="grid"><div data-col-width="12" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col"><h2 class="stk-reset stk-theme_26309__style_large_header" data-ce-tag="paragraph">Что было до&nbsp;адаптивности в&nbsp;вебе</h2><p class="stk-reset" data-ce-tag="paragraph">Если вернуться на&nbsp;много лет назад, когда трава была ещё зеленее и&nbsp;небо голубее&nbsp;и… Короче, когда интернет только появился, у&nbsp;нас, по&nbsp;сути, были только ПК&nbsp;с&nbsp;примерно одинаковыми дисплеями, и&nbsp;сайты разрабатывались только для&nbsp;них. Ни&nbsp;о&nbsp;чём больше не&nbsp;надо было думать: ни&nbsp;JS&nbsp;ещё не&nbsp;было, ни&nbsp;React… Были&nbsp;же времена. Было круто! (Нет.)</p><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/11461320032023_d75dd4921f9f5ca9dc828e1efafbd5a21dfa9c5d.jpg" data-image-id="50929" data-image-name="14.jpg" width="1540" height="1155" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description">Mail.ru в&nbsp;2000-м выглядел&nbsp;так. Тогда это ещё была почтовая служба<br data-gtm-vis-has-fired-10171822_255="1"><em class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">Изображение: mail.ru / <a class="stk-reset" href="https://habr.com/ru/company/kaspersky/blog/438194/" target="_blank" data-gtm-vis-has-fired-10171822_255="1">Habr</a></em></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Но&nbsp;в&nbsp;начале 2000-х активно начал набирать обороты мобильный интернет, и&nbsp;люди стали выходить в&nbsp;Сеть с&nbsp;мобильных телефонов. Что думаете, как отображался сайт на&nbsp;экране мобильного телефона, который разрабатывался исключительно для десктопа? Правильно: криво, нечитаемо, приходилось постоянно скроллить вправо, влево.</p><p class="stk-reset" data-ce-tag="paragraph">После этого разработчики задумались над адаптацией контента сайта для разных устройств, чтобы везде всё было читаемо и&nbsp;красиво.</p><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/11461320032023_b76bc71fa80c20942ed01e19c21ead7b69ad6b89.jpg" data-image-id="50931" data-image-name="15.jpg" width="1540" height="866" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description">Первый вариант мобильной версии сайта vkontakte.ru<br data-gtm-vis-has-fired-10171822_255="1"><em class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">Изображение: AM-STUDiO / Shutterstock</em></figcaption></figure></div></div><div class="stk-theme_26309__mb_15 stk-grid" data-ce-tag="grid"><div data-col-width="12" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col"><h2 class="stk-reset stk-theme_26309__style_large_header" data-ce-tag="paragraph">Как адаптивность стала такой важной</h2><p class="stk-reset" data-ce-tag="paragraph">Постепенно доля пользователей, выходящих в&nbsp;интернет с&nbsp;мобильных устройств, росла. Теперь она достигает 59% против 38% пользователей, которые выходят в&nbsp;интернет с&nbsp;десктопа (это средние цифры по&nbsp;миру. <a href="https://gs.statcounter.com/platform-market-share/desktop-mobile-tablet/worldwide" target="_blank" class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">Данные</a> приведены на&nbsp;момент написания статьи).</p><p class="stk-reset" data-ce-tag="paragraph">Если посмотреть данные по&nbsp;отдельным странам, например Индии, там вообще примерно 76% на&nbsp;24%.</p><p class="stk-reset" data-ce-tag="paragraph">Итак, мы&nbsp;видим, что люди чаще пользуются мобильными устройствами для выхода в&nbsp;интернет. Соответственно, если вы&nbsp;дорожите репутацией и&nbsp;уважаете своих пользователей, то&nbsp;вы&nbsp;обязательно должны сделать мобильную версию приложения.</p><div class="stk-grid" data-ce-tag="grid" data-stk-css="stkegTSG"><div data-col-width="12" class="stk-grid-col stk-theme_26309__pad_round_1 stk-grid-col_last" data-ce-tag="grid-col"><p class="stk-reset stk-theme_26309__mb_05" data-ce-tag="paragraph">Доля планшетов очень мала, поэтому отдельно для них разработку почти не&nbsp;ведут. Обычно используют мобильную версию или что-то среднее между десктопом и&nbsp;мобилкой с&nbsp;минимальными изменениями и&nbsp;затратами&nbsp;сил.</p></div></div><p class="stk-reset" data-ce-tag="paragraph">А&nbsp;значит, <strong class="stk-reset">адаптивность&nbsp;— первостепенный фактор в&nbsp;разработке веб-сайта</strong>.</p><h3 class="stk-theme_26309__mb_05 stk-theme_26309__style_medium_header stk-reset" data-ce-tag="paragraph">Mobile-first</h3><p class="stk-reset" data-ce-tag="paragraph">Есть подходы к&nbsp;разработке, когда начинают с&nbsp;мобильной версии, а&nbsp;на её основе уже делают все остальные. Это называется mobile-first.</p><p class="stk-reset" data-ce-tag="paragraph">В&nbsp;Google работает индексация mobile-first: если у сайта нет мобильной версии, то&nbsp;он&nbsp;может не&nbsp;отобразиться в&nbsp;выдаче поисковика.</p></div></div><div class="stk-theme_26309__mb_15 stk-grid" data-ce-tag="grid"><div data-col-width="12" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col"><h2 class="stk-reset stk-theme_26309__style_large_header" data-ce-tag="paragraph">Когда несколько версий интерфейса не&nbsp;нужны</h2><p class="stk-reset" data-ce-tag="paragraph">Бывают случаи, когда можно обойтись только одной какой-то версией.</p><p class="stk-theme_26309__mb_05 stk-reset" data-ce-tag="paragraph">Например? А&nbsp;когда вы&nbsp;разрабатываете приложение специально для какого-то устройства:</p><ul class="stk-theme_26309__pad_hor_1 stk-reset" data-ce-tag="list"><li class="stk-reset stk-list-item" data-ce-tag="list-item">админку или любые внутренние сервисы компании для сотрудников, которые пользуются ими только с&nbsp;компьютера;</li><li class="stk-reset stk-list-item" data-ce-tag="list-item">веб-интерфейс для терминалов оплаты;</li><li class="stk-reset stk-list-item" data-ce-tag="list-item">приложения для курьеров, им&nbsp;будет достаточно только мобильной версии. Очень сомневаюсь, что кто-то будет таскать с&nbsp;собой компьютер в&nbsp;поездки по&nbsp;городу.</li></ul><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/11461320032023_1c076733da30d01108464d85a8ffad1517acec59.jpg" data-image-id="50930" data-image-name="16.jpg" width="1540" height="866" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description"><em class="stk-reset">Фото: Egor Myznik / Unsplash</em></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Ну, вроде&nbsp;всё. Историю обсудили, на&nbsp;словах тоже вроде все обговорили, теперь перейдём к&nbsp;делу.</p></div></div><div class="stk-theme_26309__mb_15 stk-grid" data-ce-tag="grid"><div data-col-width="12" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col"><h2 class="stk-reset stk-theme_26309__style_large_header" data-ce-tag="paragraph">Как адаптируют страницы?</h2><p class="stk-reset" data-ce-tag="paragraph">Есть несколько вариантов адаптации сайта (на&nbsp;самом деле как таковой классификации нет, разделим сами).</p><h3 class="stk-theme_26309__style_medium_header stk-theme_26309__mb_05 stk-reset" data-ce-tag="paragraph">1. Фиксированная вёрстка</h3><p class="stk-reset" data-ce-tag="paragraph">Это подход, когда все элементы сайта имеют <strong class="stk-reset">фиксированную</strong> ширину. С&nbsp;какого&nbsp;бы устройства мы&nbsp;ни&nbsp;зашли, сайт всегда будет выглядеть <strong class="stk-reset">одинаково</strong>. Соответственно, если элемент не&nbsp;поместится в&nbsp;экран, то&nbsp;появятся полосы прокрутки.</p><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/11481520032023_1cc7c7aaff1472b38801633d33e2f9e6221a290f.jpg" data-image-id="50934" data-image-name="17.jpg" width="1540" height="866" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description"><em class="stk-reset">Изображение: <a class="stk-reset" href="https://www.behance.net/marinache1" target="_blank">Мария Черноскулова</a></em></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Сейчас это уже пережиток прошлого, когда мониторы имели фиксированные популярные разрешения 800×600 или 1024×768.</p><p class="stk-reset" data-ce-tag="paragraph">Задаётся банально в&nbsp;CSS свойством <u class="stk-reset">width: 500px</u>.</p><h3 class="stk-theme_26309__style_medium_header stk-theme_26309__mb_05 stk-reset" data-ce-tag="paragraph">2. Резиновая вёрстка</h3><p class="stk-reset" data-ce-tag="paragraph">Элементы на&nbsp;странице остаются на&nbsp;своих местах, но&nbsp;при этом <strong class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">тянутся</strong> (как резина) либо <strong class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">сжимаются</strong> в&nbsp;соответствии с&nbsp;шириной экрана. Им&nbsp;задаётся <strong class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">относительная</strong> ширина, например в&nbsp;процентах <u class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">width: 100%</u>.</p><p class="stk-reset" data-ce-tag="paragraph">Всё&nbsp;бы ничего, но&nbsp;обычно в&nbsp;итоге при определённой ширине экрана мы&nbsp;получим вот такой результат. Выглядит некруто:</p><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/11481620032023_62bf1942effdabf0107c530d35221fdf53489254.jpg" data-image-id="50937" data-image-name="18.jpg" class="stk-image stk-reset" width="1540" height="866" loading="lazy"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description"><em class="stk-reset">Изображение: <a class="stk-reset" href="https://www.behance.net/marinache1" target="_blank">Мария Черноскулова</a></em></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">И&nbsp;вообще, сверху показан маловероятный результат. Обычно в&nbsp;итоге мы&nbsp;получаем&nbsp;это. Выглядит совсем некруто. Нам не&nbsp;подходит:</p><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/11481520032023_ea2b2f998665356b094cbc9e4d99ecdc646b93d5.jpg" data-image-id="50935" data-image-name="19.jpg" width="1540" height="760" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description">Текст банально не&nbsp;помещается в&nbsp;блок и&nbsp;вылезает за&nbsp;его пределы<br><em class="stk-reset">Изображение: <a class="stk-reset" href="https://www.behance.net/marinache1" target="_blank">Мария Черноскулова</a></em></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Это тоже устаревший способ, который сейчас не&nbsp;используется в&nbsp;чистом виде, но&nbsp;знать о&nbsp;нём нужно.</p><h3 class="stk-theme_26309__style_medium_header stk-theme_26309__mb_05 stk-reset" data-ce-tag="paragraph">3. Адаптивная вёрстка</h3><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/11481520032023_b200d8bc76303a5287d3954213dd40d331052ae4.jpg" data-image-id="50936" data-image-name="20.jpg" width="1540" height="866" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description"><em class="stk-reset">Изображение: <a href="https://www.behance.net/marinache1" target="_blank" class="stk-reset">Мария Черноскулова</a></em></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">В&nbsp;основе&nbsp;— медиазапросы, указанные в&nbsp;CSS.</p><p class="stk-reset" data-ce-tag="paragraph">Метод очень похож на&nbsp;отзывчивую вёрстку (рассмотрим далее). Суть заключается в&nbsp;том, что мы&nbsp;расставляем <strong class="stk-reset">«брейкпоинты»</strong>&nbsp;— точки, равные ширине экрана (окну браузера). Проходя через них, наш сайт будет <strong class="stk-reset">перестраиваться</strong>.</p><p class="stk-reset" data-ce-tag="paragraph">Ширину элементов при этом задаём <strong class="stk-reset">фиксированно</strong>.</p><p class="stk-reset" data-ce-tag="paragraph">Если простыми словами, то&nbsp;наша страница трансформируется (как&nbsp;бы прыгает), когда мы&nbsp;преодолеваем эти точки, перестраивая контент на&nbsp;новый лад, описанный в&nbsp;CSS. В&nbsp;итоге мы&nbsp;получаем набор <strong class="stk-reset">фиксированных </strong>макетов для каждого промежутка.</p><p class="stk-reset" data-ce-tag="paragraph">Главная проблема прячется за&nbsp;словом «фиксированный». Мы&nbsp;не&nbsp;можем предугадать, как будет выглядеть приложение на&nbsp;всех устройствах. Могут появляться лишние пространства (например, по&nbsp;бокам), как на&nbsp;<a href="https://docs.google.com/document/d/1532oicyjcxLzutnIRdNqyRW_cf0bWb9m9uehCnWbBoY/edit#bookmark=id.19bs40owv93k" target="_blank" class="stk-reset">изображении выше</a>.</p></div></div><div class="stk-theme_26309__mb_15 stk-grid" data-ce-tag="grid"><div data-col-width="12" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col"><h2 class="stk-reset stk-theme_26309__style_large_header" data-ce-tag="paragraph">Как реализовать адаптивную вёрстку?</h2><p class="stk-reset" data-ce-tag="paragraph">Обычно мы&nbsp;используем переменные (это примерные цифры, я&nbsp;решил их&nbsp;использовать для наглядности. В&nbsp;любом случае они подбираются конкретно под вашу задачу, а&nbsp;не возникают с&nbsp;неба):</p><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/11514520032023_178ae943fb180dbd85da113c997e71d410f43eb6.jpg" data-image-id="50939" data-image-name="21.jpg" width="1540" height="329" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description"><em class="stk-reset">Изображение: предоставлено Олегом Рязанцевым</em></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Задаём адаптивность следующим образом (CSS code, если его можно назвать словом code ?):</p><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/11514520032023_acb3891951eada938d821fe8c18ea10c2884033f.jpg" data-image-id="50938" data-image-name="22.jpg" width="1540" height="603" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description"><em class="stk-reset">Изображение: предоставлено Олегом Рязанцевым</em></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Данной записью мы&nbsp;говорим, что свойство <u class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">width: 600px</u> для класса <u class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">.myClass</u> применится, только если ширина экрана будет <strong class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">меньше</strong> или равна 768 px. Во&nbsp;всех остальных случаях она будет равна 900 px.</p><p class="stk-reset" data-ce-tag="paragraph">Также можно наоборот:</p><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/11514520032023_00ef4ecbef33723c9293d85ddb5e396ecc049496.jpg" data-image-id="50940" data-image-name="23.jpg" width="1540" height="419" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description"><em class="stk-reset">Изображение: предоставлено Олегом Рязанцевым</em></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Свойство <u class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">width: 900px</u> для класса <u class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">.myOtherClass</u> применится, только если ширина экрана будет <strong class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">больше</strong> или равна 1024 px.</p><p class="stk-reset" data-ce-tag="paragraph">Важно не&nbsp;перепутать <strong class="stk-reset">больше</strong> или <strong class="stk-reset">меньше</strong>, но&nbsp;обещаю, что придётся это проверить не&nbsp;раз, таков путь ?</p><p class="stk-reset" data-ce-tag="paragraph">Вы&nbsp;можете комбинировать условия, а&nbsp;ещё почитать документацию и&nbsp;изучить тему более подробно.</p><p class="stk-reset" data-ce-tag="paragraph">Отмечу: эти свойства применяются не&nbsp;только к&nbsp;ширине экрана устройства, но&nbsp;и&nbsp;к&nbsp;ширине окна браузера, что вполне логично.</p><p class="stk-reset" data-ce-tag="paragraph">Откройте любой сайт в&nbsp;браузере (почти любой, почему «почти», узнаем <a href="https://docs.google.com/document/d/1532oicyjcxLzutnIRdNqyRW_cf0bWb9m9uehCnWbBoY/edit#bookmark=id.ogrdpcbtqyo3" target="_blank" class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">дальше</a>), желательно&nbsp;— одностраничный лендинг. Захватите левой кнопкой мыши правый или левый край окна браузера и&nbsp;попробуйте увеличить или уменьшить размер окна. Вы&nbsp;в&nbsp;реальном времени увидите, как сайт будет перестраиваться по&nbsp;брейкпоинтам.</p><p class="stk-reset" data-ce-tag="paragraph">Поиграли? Тогда идём дальше.</p><p class="stk-reset" data-ce-tag="paragraph">И, наконец, победитель сегодняшней номинации.</p></div></div><div class="stk-theme_26309__mb_15 stk-grid" data-ce-tag="grid"><div data-col-width="12" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col"><h2 class="stk-reset stk-theme_26309__style_large_header" data-ce-tag="paragraph">4. Отзывчивая вёрстка</h2><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/11481520032023_bac86f446f868f84102e99b5ab20c9967a83fabd.jpg" data-image-id="50933" data-image-name="17(1).jpg" width="1540" height="866" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description"><em class="stk-reset">Изображение: предоставлено Олегом Рязанцевым</em></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Если совсем в&nbsp;двух словах, то&nbsp;это <strong class="stk-reset">резиновая + адаптивная</strong> вёрстка.</p><p class="stk-reset" data-ce-tag="paragraph">Мы&nbsp;задаём <strong class="stk-reset">медиазапросы</strong> + <strong class="stk-reset">ширину</strong> элементов указываем в <strong class="stk-reset">относительных</strong> единицах, чтобы они комфортно для себя и&nbsp;пользователя растягивались на&nbsp;ширину экрана, окна или контейнера&nbsp;— в&nbsp;зависимости от&nbsp;того, куда помещён элемент.</p><p class="stk-reset" data-ce-tag="paragraph">Что-то типа такого:</p><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/11514520032023_6ed0b04ccb1af0573cd045b2bd21a60938919582.jpg" data-image-id="50942" data-image-name="24.jpg" width="1540" height="407" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description"><em class="stk-reset">Изображение: предоставлено Олегом Рязанцевым</em></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">В&nbsp;итоге, попадая на&nbsp;границу расставленных нами брейкпоинтов, страница не&nbsp;прыгает, а&nbsp;плавно и&nbsp;лаконично перестраивается и&nbsp;адаптируется к&nbsp;ширине экрана или окна. Это самый удачный метод из&nbsp;всех описанных выше.</p></div></div><div class="stk-theme_26309__mb_15 stk-grid" data-ce-tag="grid"><div data-col-width="12" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col"><h2 class="stk-reset stk-theme_26309__style_large_header" data-ce-tag="paragraph">5. Ваш метод</h2><p class="stk-reset" data-ce-tag="paragraph">Да, фишка в&nbsp;том, что все методы, описанные выше,&nbsp;— это чисто условное разделение. Вы&nbsp;можете комбинировать их&nbsp;под ваши нужды. Например, использовать брейкпоинты (это база), а&nbsp;ширину элементов указывать так, как вам надо — либо «тянущуюся», либо фиксированную. Всё зависит от&nbsp;ваших задач, ограничений нет, помните&nbsp;это.</p><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/11514520032023_d879e3a09b3d33248cfb9e16b5b5b31c5891b3f5.jpg" data-image-id="50941" data-image-name="25.jpg" width="1540" height="866" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description"><em class="stk-reset">Фото: Ljupco Smokovski / Shutterstock</em></figcaption></figure></div></div><div class="stk-theme_26309__mb_15 stk-grid" data-ce-tag="grid"><div data-col-width="12" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col"><h2 class="stk-reset stk-theme_26309__style_large_header" data-ce-tag="paragraph">Зачем мобильную и&nbsp;десктопную версии собирают отдельно</h2><p class="stk-reset" data-ce-tag="paragraph">Вышеописанный метод неплох для небольших приложений, но&nbsp;представьте, что у&nbsp;вас большое.</p><p class="stk-reset" data-ce-tag="paragraph">Каждый раз, заходя на&nbsp;сайт, вы&nbsp;будете подгружать стили и&nbsp;элементы для <strong class="stk-reset">всех</strong> устройств. Если мы&nbsp;заходим на&nbsp;сайт с&nbsp;мобилки, то&nbsp;зачем нам грузить все стили для десктопа? Это совсем нелогично, это увеличит интернет-трафик и&nbsp;время загрузки&nbsp;— и&nbsp;это не&nbsp;очень хорошая практика.</p><p class="stk-reset" data-ce-tag="paragraph">Часто большие компании разделяют сборки приложений на&nbsp;мобильную и&nbsp;десктопную версии, и&nbsp;когда вы&nbsp;заходите с&nbsp;телефона, вы&nbsp;загружаете именно мобильную версию, которая содержит стили и&nbsp;элементы только для мобилок. Это значительно уменьшает трафик.</p><p class="stk-reset" data-ce-tag="paragraph">Некоторые компании полностью разделяют приложения. Попробуйте зайти на&nbsp;<a class="stk-reset" href="http://vk.com" target="_blank">vk.com</a>&nbsp;или <a class="stk-reset" href="http://youtube.com" target="_blank">youtube.com</a>&nbsp;с&nbsp;телефона, и&nbsp;вы&nbsp;увидите, что URL автоматически трансформируется в m.vk.com и m.youtube.com. Приложения поместили на&nbsp;отдельные поддомены — точнее, полностью разделили&nbsp;их!</p><p class="stk-reset" data-ce-tag="paragraph">В&nbsp;этом есть и&nbsp;минусы для разработки, так как приходится поддерживать одновременно два приложения.</p><p class="stk-reset" data-ce-tag="paragraph">Но&nbsp;можно также использовать комбинированный метод, и&nbsp;с&nbsp;помощью специальных настроек и&nbsp;щепотки магии ваша сборка будет разделяться для отдельных типов устройств, но&nbsp;это уже тема другой беседы.</p><div class="stk-grid" data-ce-tag="grid" data-stk-css="stkRAxrZ"><div data-col-width="12" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col"><p class="stk-reset stk-theme_26309__mb_05" data-ce-tag="paragraph">У&nbsp;вас может появиться вопрос: «Автор упоминал много раз относительные („резиновые“) единицы измерения, но&nbsp;ничего о&nbsp;них не&nbsp;рассказал!»</p><p class="stk-reset" data-ce-tag="paragraph">И&nbsp;вы&nbsp;правы, оставим это на&nbsp;самостоятельное изучение, потому что самый важный навык разработчика&nbsp;— искать и&nbsp;изучать информацию самому.</p></div></div><div class="stk-grid stk-grid__layout_columns" data-stk-css="stklUFpa" data-ce-tag="grid"><div data-col-width="1" class="stk-grid-col align-left valign-top stk-mobile-hidden" data-ce-tag="grid-col" data-stk-css="" data-stk-css-m=""><a class="sklbx-link sklbx-link--fb stk-container stk-container-link stk-reset" data-ce-tag="container" data-container-name="Telegram" href="https://t.me/poledsgn" target="_blank"><svg class="sklbx-link__icon" width="25" height="20" xmlns="http://www.w3.org/2000/svg">
        <path d="m9.417 15.181-.397 5.584c.568 0 .814-.244 1.109-.537l2.663-2.545 5.518 4.041c1.012.564 1.725.267 1.998-.931l3.622-16.972.001-.001c.321-1.496-.541-2.081-1.527-1.714l-21.29 8.151c-1.453.564-1.431 1.374-.247 1.741l5.443 1.693 12.643-7.911c.595-.394 1.136-.176.691.218z" fill-rule="evenodd"></path>
      </svg></a></div><div data-col-width="11" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col"><p class="stk-reset stk-theme_26309__mb_05 stk-theme_26309__style_font_style-1629786048064" data-ce-tag="paragraph" data-stk-css="stkFGYfy">Больше интересного про дизайн в&nbsp;нашем <a class="stk-reset" data-gtm-vis-has-fired-10171822_255="1" href="https://t.me/poledsgn" target="_blank">телеграм-канале</a>. Подписывайтесь!</p></div></div><div class="stk-grid" data-ce-tag="grid" data-stk-css="stktSPwj"><div data-col-width="12" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col" data-stk-css="" data-stk-css-m=""><p class="stk-reset stk-theme_26309__style_small_text stk-theme_26309__mb_05" data-ce-tag="paragraph"><strong class="stk-reset">Читайте также:</strong></p><ul class="stk-theme_26309__style_small_text stk-theme_26309__pad_hor_1 stk-reset" data-ce-tag="list"><li class="stk-theme_26309__style_small_text stk-reset stk-list-item" data-ce-tag="list-item"><a href="https://skillbox.ru/media/design/native-prostymi-slovami/" target="_blank" class="stk-reset">Что значит нативный? Объясняем простыми словами</a></li><li class="stk-theme_26309__style_small_text stk-reset stk-list-item" data-ce-tag="list-item"><a href="https://skillbox.ru/media/design/chto-takoe-frame-prostymi-slovami/" target="_blank" class="stk-reset">Что такое фрейм простыми словами</a></li><li class="stk-theme_26309__style_small_text stk-reset stk-list-item" data-ce-tag="list-item"><a href="https://skillbox.ru/media/design/chto-takoe-modul-prostymi-slovami/" target="_blank" class="stk-reset">Что такое модуль простыми словами</a></li></ul></div></div></div></div><style data-stk-css="stklUFpa" class="" media="all">
  [data-stk-css="stklUFpa"]:not(#stk):not(#stk):not(style) {
    border-radius: 16px;
    padding: 20px;
    border: 1px solid;
    border-color: #E4E4E4;
    background-color: rgba(241, 242, 246, 1)
  }
</style><style data-stk-css="stkFGYfy" class="" media="all">
  [data-stk-css="stkFGYfy"]:not(#stk):not(#stk):not(style) {
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    -o-hyphens: none;
    hyphens: none
  }
</style><style data-stk-css="stktSPwj" media="all" class="">
  [data-stk-css="stktSPwj"]:not(#stk):not(#stk):not(style) {
    padding: 20px;
    background-color: rgba(254, 245, 224, 1)
  }
</style><style data-stk-css="stkRAxrZ" media="all" class="">
  [data-stk-css="stkRAxrZ"]:not(#stk):not(#stk):not(style) {
    border-left: 4px solid #f5a74f;
    padding: 20px;
    background-color: rgba(254, 245, 224, 1)
  }
</style><style data-stk-css="stkegTSG" class="" media="all">
  [data-stk-css="stkegTSG"]:not(#stk):not(#stk):not(style) {
    background-color: rgba(241, 242, 246, 1)
  }
</style><style data-stk-css="stkK1pMF" class="" media="all">[data-stk-css="stkK1pMF"]:not(#stk):not(#stk):not(style){border-left: 4px solid #f5a74f; background-color: rgba(241, 242, 246, 1)}</style><style data-stk-css="stkaUrnt" class="" media="all">
  [data-stk-css="stkaUrnt"]:not(#stk):not(#stk):not(style) {
    background-color: rgba(254, 245, 224, 1)
  }
</style><style data-stk-css="stk5slTS" class="" media="all">
  [data-stk-css="stk5slTS"]:not(#stk):not(#stk):not(style) {
    background-color: rgba(241, 242, 246, 1)
  }
</style><style data-stk-css="stk3wDKO" class="" media="all">[data-stk-css="stk3wDKO"]:not(#stk):not(#stk):not(style){border-left: 4px solid #f5a74f}</style><style data-stk-css="stk3Nhbe" class="" media="all">
  [data-stk-css="stk3Nhbe"]:not(#stk):not(#stk):not(style) {
    background-color: rgba(254, 245, 224, 1)
  }
</style><style data-stk-css="stkxfmZd" class="" media="all">[data-stk-css="stkxfmZd"]:not(#stk):not(#stk):not(style){border-left: 4px solid #f5a74f; background-color: rgba(241, 242, 246, 1)}</style><div class="stk-footnote stk-footnote--hide" data-stk-show="mouseover" data-stk-footnote-body="fnC_Th5" data-ce-tag="footnote" style="display:none"><div class="stk-footnote__close"></div><div class="stk-footnote__body"><p class="stk-theme_26309__style_small_text stk-reset" data-ce-tag="paragraph">Увеличение или уменьшение элементов на&nbsp;экране.</p></div></div><div class="stk-footnote stk-footnote--hide" data-stk-show="mouseover" data-stk-footnote-body="fnvErLK" data-ce-tag="footnote" style="display:none"><div class="stk-footnote__close"></div><div class="stk-footnote__body"><p class="stk-theme_26309__style_small_text stk-reset" data-ce-tag="paragraph">Сначала.</p></div></div><div class="stk-footnote stk-footnote--hide" data-stk-show="mouseover" data-stk-footnote-body="fnbMLhO" data-ce-tag="footnote" style="display:none"><div class="stk-footnote__close"></div><div class="stk-footnote__body"><p class="stk-theme_26309__style_small_text stk-reset" data-ce-tag="paragraph">Сначала&nbsp;— основной костяк и&nbsp;структура.</p></div></div><style data-stk-css="stkZkr54" class="" media="all">[data-stk-css="stkZkr54"]:not(#stk):not(#stk):not(style){padding: 13px}</style></div>                                </div>
                            </div>
                        </div>
                    </div>
                                        <div class="col-xl-9 col-lg-8 col-poster">
                    <div class="article-preview-info">
                                        </div>
                    </div>
                                        <noindex>
                    <div class="share" data-nosnippet>
                        <button class="share__handler-btn  ">
                            <span class="share__handler-icon">
                                <svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M11 4.99902L6 0V2.99805C2.688 2.99805 0 5.68505 0 8.99805V11.498H0.0980225C0.765022 8.91205 3.107 6.99805 5.901 6.99805H6.00098V9.99805L11 4.99902Z" fill="currentColor"/>
                                </svg>
                            </span>
                            <span class="share__handler-text">Поделиться</span>
                        </button>
                        <div class="share__list">
                            <a href="#" class="share__item" data-code="vk">
                                <span class="share__item-icon share__item-icon--vk">
                                    <svg width="9" height="5" viewBox="0 0 9 5" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M4.04776 4.98054H4.53996C4.62377 4.97136 4.70279 4.9361 4.76621 4.87951C4.81226 4.81209 4.83594 4.73139 4.83369 4.64925C4.83369 4.64925 4.82574 3.94629 5.1314 3.84125C5.43701 3.73621 5.826 4.51998 6.23879 4.82297C6.39281 4.95308 6.59128 5.01558 6.79053 4.99669L7.89399 4.98054C7.89399 4.98054 8.47355 4.94415 8.19965 4.46339C7.98372 4.08315 7.70589 3.743 7.37799 3.45744C6.68338 2.77872 6.77865 2.8878 7.61219 1.71216C8.12024 0.997077 8.32269 0.556717 8.25918 0.370875C8.14651 0.254767 7.98299 0.205914 7.82655 0.241594L6.58018 0.249674C6.52565 0.241067 6.46984 0.251007 6.42141 0.277954C6.37298 0.314507 6.33466 0.363228 6.31025 0.419356C6.18259 0.772814 6.0287 1.11586 5.8498 1.44552C5.29807 2.43936 5.07579 2.49188 4.98451 2.43128C4.77416 2.28584 4.82574 1.85356 4.82574 1.54248C4.82574 0.580957 4.96468 0.176954 4.55979 0.0719133C4.36879 0.0254376 4.17259 0.00505841 3.97631 0.0113129C3.62834 -0.0214164 3.27745 0.017045 2.94429 0.124433C2.8014 0.197154 2.69423 0.358753 2.76171 0.370875C2.90334 0.385518 3.03406 0.454932 3.12688 0.564795C3.21268 0.750336 3.25481 0.953675 3.24993 1.15868C3.24993 1.15868 3.32535 2.29392 3.07925 2.43532C2.91254 2.53228 2.68232 2.33432 2.18616 1.4334C2.01958 1.11848 1.87243 0.793298 1.74557 0.459754C1.72231 0.404013 1.68704 0.354309 1.64236 0.314316C1.58589 0.272672 1.52066 0.245006 1.45184 0.233514L0.268986 0.241594C0.181167 0.241154 0.0958013 0.271066 0.0268587 0.326434C-0.00595087 0.396174 -0.00882613 0.476652 0.0189202 0.548633C0.0189202 0.548633 0.947737 2.83932 1.99563 3.99477C2.51 4.60651 3.2568 4.96526 4.04776 4.98054Z" fill="white"/>
                                    </svg>
                                </span>
                                <span class="share__item-text">Vkontakte</span>
                            </a>
                            <a href="#" class="share__item" data-code="tw">
                                <span class="share__item-icon share__item-icon--tw">
                                    <svg width="9" height="7" viewBox="0 0 9 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M5.52788 0.00144284V0H5.9158L6.05754 0.027414C6.15204 0.0452114 6.23783 0.068535 6.31491 0.0973918C6.39201 0.126249 6.46661 0.159917 6.53872 0.198391C6.61083 0.236864 6.67623 0.276066 6.73492 0.315982C6.79311 0.355422 6.84533 0.397265 6.89158 0.441509C6.93733 0.486237 7.0087 0.49778 7.10568 0.476138C7.20266 0.454495 7.3071 0.424433 7.419 0.38596C7.5309 0.347487 7.64156 0.304201 7.75097 0.256104C7.86039 0.208007 7.92703 0.177469 7.95091 0.164484C7.97428 0.151022 7.98671 0.143808 7.98821 0.142841L7.98969 0.140677L7.99715 0.13707L8.00461 0.133463L8.01207 0.129856L8.01953 0.126249L8.02102 0.124084L8.02326 0.122642L8.02551 0.121199L8.02699 0.119034L8.03445 0.11687L8.04191 0.115427L8.04043 0.126249L8.03818 0.13707L8.03445 0.147891L8.03072 0.158713L8.02699 0.165927L8.02326 0.173141L8.01953 0.183962C8.01705 0.191176 8.01456 0.200793 8.01207 0.212819C8.00959 0.224845 7.98596 0.272935 7.9412 0.357103C7.89644 0.441271 7.84049 0.526637 7.77335 0.613208C7.70621 0.699778 7.64604 0.765182 7.59283 0.809434C7.53911 0.854162 7.50355 0.885421 7.48614 0.903219C7.46874 0.921492 7.4476 0.938323 7.42273 0.953718L7.38543 0.977525L7.37797 0.981132L7.37051 0.984739L7.36902 0.986903L7.36678 0.988346L7.36454 0.989789L7.36305 0.991953L7.35559 0.99556L7.34813 0.999168L7.34664 1.00133L7.3444 1.00277L7.34216 1.00422L7.34067 1.00638L7.33918 1.00855L7.33694 1.00999L7.3347 1.01143L7.33321 1.0136H7.37051L7.57939 0.970311C7.71865 0.941454 7.85168 0.906588 7.9785 0.865705L8.17992 0.800777L8.2023 0.793563L8.21349 0.789956L8.22095 0.786348L8.22841 0.782741L8.23587 0.779134L8.24333 0.775527L8.25825 0.773363L8.27317 0.77192V0.786348L8.26944 0.787791L8.26571 0.789956L8.26423 0.79212L8.26198 0.793563L8.25974 0.795006L8.25825 0.79717L8.25677 0.799334L8.25452 0.800777L8.25228 0.80222L8.25079 0.804384L8.24931 0.806548L8.24706 0.807991L8.24333 0.815205L8.2396 0.82242L8.23736 0.823862C8.23637 0.825305 8.20479 0.866181 8.14262 0.946504C8.08046 1.0273 8.04689 1.06818 8.04191 1.06915C8.03694 1.07059 8.02997 1.0778 8.02102 1.09079C8.01257 1.10425 7.95985 1.15788 7.86287 1.25166C7.76589 1.34545 7.67091 1.42889 7.57791 1.502C7.48441 1.57558 7.43716 1.666 7.43616 1.77325C7.43467 1.88002 7.42895 2.00074 7.419 2.13541C7.40905 2.27007 7.3904 2.41555 7.36305 2.57186C7.3357 2.72817 7.29342 2.90492 7.23623 3.10211C7.17904 3.29929 7.10941 3.49168 7.02735 3.67925C6.94529 3.86681 6.8595 4.03514 6.76998 4.18424C6.68046 4.33334 6.5984 4.45958 6.5238 4.56299C6.4492 4.66639 6.37336 4.76378 6.29626 4.85516C6.21918 4.94654 6.12171 5.04947 6.00384 5.16393C5.88547 5.27791 5.82082 5.34044 5.80988 5.3515C5.79844 5.36208 5.74971 5.40152 5.66365 5.46981C5.57812 5.53858 5.48611 5.60736 5.38763 5.67614C5.28966 5.74443 5.19964 5.80143 5.11758 5.84711C5.03552 5.8928 4.93655 5.94498 4.82067 6.00366C4.70529 6.06282 4.58046 6.11765 4.44618 6.16815C4.3119 6.21865 4.17016 6.26554 4.02096 6.30882C3.87176 6.35211 3.72753 6.38578 3.58827 6.40982C3.44903 6.43387 3.29112 6.45431 3.11456 6.47114L2.84973 6.49639V6.5H2.36483V6.49639L2.30142 6.49279C2.25915 6.49038 2.22433 6.48797 2.19698 6.48557C2.16963 6.48317 2.06643 6.46994 1.88739 6.44589C1.70835 6.42185 1.56785 6.3978 1.4659 6.37375C1.36395 6.34971 1.21225 6.30401 1.01083 6.23668C0.809413 6.16935 0.637087 6.10129 0.493854 6.03252C0.351121 5.96422 0.261601 5.92094 0.225293 5.90266C0.189485 5.88487 0.149201 5.86275 0.10444 5.83629L0.0373001 5.79661L0.0358156 5.79445L0.0335701 5.79301L0.0313321 5.79156L0.0298401 5.7894L0.0223801 5.78579L0.0149201 5.78219L0.0134355 5.78002L0.01119 5.77858L0.00895204 5.77714L0.00746003 5.77497L0.00597548 5.77281L0.00373001 5.77137H0V5.75694L0.00746003 5.75838L0.0149201 5.76054L0.0484902 5.76415C0.0708703 5.76655 0.131796 5.77016 0.231261 5.77497C0.330733 5.77978 0.436412 5.77978 0.548312 5.77497C0.660213 5.77016 0.774605 5.75934 0.891474 5.74251C1.00835 5.72568 1.14636 5.69682 1.30551 5.65594C1.46466 5.61505 1.61087 5.56648 1.74416 5.51021C1.87695 5.45346 1.97144 5.41114 2.02764 5.38324C2.08334 5.35583 2.16838 5.30484 2.28277 5.2303L2.45435 5.11848L2.45584 5.11632L2.45808 5.11487L2.46033 5.11343L2.46181 5.11127L2.4633 5.1091L2.46554 5.10766L2.46779 5.10622L2.46927 5.10405L2.47673 5.10189L2.48419 5.10044L2.48568 5.09323L2.48792 5.08602L2.49017 5.08457L2.49165 5.08241L2.43197 5.0788C2.39219 5.0764 2.35364 5.07399 2.31634 5.07159C2.27904 5.06918 2.2206 5.05836 2.14103 5.03912C2.06146 5.01988 1.97567 4.99103 1.88366 4.95255C1.79165 4.91408 1.70213 4.86838 1.6151 4.81548C1.52807 4.76258 1.46515 4.71857 1.42636 4.68346C1.38807 4.64883 1.33833 4.59978 1.27716 4.53629C1.21648 4.47233 1.16376 4.40668 1.119 4.33934C1.07424 4.27202 1.03148 4.19433 0.990699 4.10633L0.928774 3.97503L0.925044 3.96421L0.921314 3.95339L0.919076 3.94617L0.917584 3.93896L0.928774 3.9404L0.939964 3.94256L1.02202 3.95339C1.07674 3.9606 1.16253 3.963 1.27939 3.9606C1.39627 3.9582 1.47709 3.95339 1.52185 3.94617C1.56661 3.93896 1.59396 3.93414 1.60391 3.93174L1.61883 3.92814L1.63748 3.92453L1.65613 3.92092L1.65762 3.91876L1.65986 3.91731L1.6621 3.91587L1.66359 3.91371L1.64867 3.9101L1.63375 3.90649L1.61883 3.90289L1.60391 3.89928L1.58899 3.89567C1.57904 3.89327 1.56164 3.88846 1.53677 3.88124C1.5119 3.87403 1.44476 3.84757 1.33535 3.80189C1.22594 3.7562 1.1389 3.71171 1.07424 3.66842C1.00943 3.62501 0.947626 3.57754 0.889235 3.5263C0.831047 3.47436 0.767145 3.40751 0.697513 3.32575C0.627888 3.24399 0.565724 3.149 0.511012 3.04079C0.456308 2.93257 0.415277 2.82917 0.387922 2.73058C0.360676 2.63256 0.3427 2.53235 0.334217 2.43119L0.320781 2.27969L0.328241 2.28113L0.335701 2.2833L0.343161 2.2869L0.350621 2.29051L0.358081 2.29412L0.365541 2.29772L0.481172 2.34822C0.558264 2.38189 0.653998 2.41075 0.768383 2.43479C0.882775 2.45884 0.951154 2.47207 0.973534 2.47447L1.0071 2.47808H1.07424L1.07276 2.47592L1.07051 2.47447L1.06828 2.47303L1.06678 2.47087L1.0653 2.4687L1.06305 2.46726L1.06082 2.46582L1.05932 2.46365L1.05186 2.46004L1.0444 2.45644L1.04292 2.45427L1.04067 2.45283L1.03844 2.45139L1.03694 2.44922L1.02948 2.44562L1.02202 2.44201L1.02054 2.43984C1.01905 2.43888 0.99766 2.42349 0.956376 2.39367C0.915592 2.36337 0.872823 2.32418 0.828063 2.27608C0.783303 2.22798 0.738543 2.17749 0.693783 2.12458C0.64894 2.07156 0.609 2.01483 0.574422 1.95505C0.539614 1.89493 0.502806 1.81846 0.464014 1.72564C0.425721 1.6333 0.396627 1.54023 0.376731 1.44645C0.356843 1.35266 0.345653 1.26008 0.343161 1.1687C0.340677 1.07732 0.343161 0.999168 0.350621 0.93424C0.358081 0.869312 0.373001 0.795965 0.395382 0.714206C0.417762 0.632448 0.450093 0.545877 0.492362 0.454495L0.555772 0.317425L0.559502 0.306604L0.563232 0.295782L0.565478 0.29434L0.566962 0.292175L0.568454 0.290011L0.570692 0.288568L0.572938 0.290011L0.574422 0.292175L0.575914 0.29434L0.578152 0.295782L0.580398 0.297225L0.581882 0.29939L0.583374 0.301554L0.585612 0.302997L0.589342 0.310211L0.593072 0.317425L0.595318 0.318868L0.596802 0.321032L0.697513 0.429245C0.764653 0.501387 0.844229 0.581948 0.936234 0.670921C1.02825 0.759894 1.07922 0.806065 1.08916 0.809434C1.09912 0.813279 1.11154 0.824338 1.12646 0.842619C1.14138 0.860417 1.19112 0.902981 1.27567 0.970311C1.36022 1.03764 1.47087 1.1158 1.60764 1.20477C1.74441 1.29375 1.89609 1.38152 2.0627 1.46809C2.22931 1.55466 2.40835 1.63281 2.59982 1.70255C2.7913 1.77229 2.92558 1.81798 3.00266 1.83962C3.07975 1.86127 3.21154 1.88892 3.39804 1.92259C3.58454 1.95625 3.72505 1.9779 3.81954 1.98751C3.91403 1.99713 3.97869 2.00266 4.0135 2.00411L4.06572 2.00555L4.06423 1.99473L4.06199 1.98391L4.04707 1.89373C4.03712 1.83361 4.03215 1.74944 4.03215 1.64123C4.03215 1.53302 4.04085 1.43322 4.05826 1.34184C4.07567 1.25046 4.10178 1.15788 4.13659 1.0641C4.1714 0.970311 4.20547 0.895038 4.23879 0.838291C4.27261 0.78202 4.31687 0.717814 4.37158 0.645671C4.42629 0.573529 4.49716 0.498985 4.58419 0.422031C4.67122 0.345077 4.77069 0.276542 4.88259 0.216426C4.99449 0.15631 5.09769 0.110615 5.19218 0.0793563C5.28668 0.0480971 5.36625 0.0276521 5.4309 0.0180355C5.49556 0.00841898 5.52788 0.00288568 5.52788 0.00144284Z" fill="white"/>
                                    </svg>
                                </span>
                                <span class="share__item-text">Twitter</span>
                            </a>
                            <a href="#" class="share__item" data-code="tg">
                                <span class="share__item-icon share__item-icon--tg">
                                    <svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M1.39589 3.04852C1.39589 3.04852 5.05491 1.51189 6.32392 0.9708C6.8104 0.754384 8.46012 0.0617918 8.46012 0.0617918C8.46012 0.0617918 9.22155 -0.241191 9.15809 0.494655C9.13692 0.797667 8.96773 1.85815 8.79854 3.00523C8.54472 4.62846 8.26976 6.40316 8.26976 6.40316C8.26976 6.40316 8.22746 6.90097 7.86791 6.98753C7.50836 7.0741 6.91613 6.68455 6.8104 6.59795C6.72577 6.53304 5.22411 5.5591 4.6742 5.08295C4.52614 4.9531 4.35695 4.6934 4.69533 4.39039C5.45676 3.67617 6.36622 2.78882 6.91613 2.2261C7.16995 1.96638 7.42374 1.36038 6.36622 2.09622C4.86456 3.15674 3.38403 4.15231 3.38403 4.15231C3.38403 4.15231 3.04561 4.36873 2.41111 4.17394C1.77657 3.97918 1.03631 3.71945 1.03631 3.71945C1.03631 3.71945 0.528726 3.39481 1.39589 3.04852Z" fill="white"/>
                                    </svg>
                                </span>
                                <span class="share__item-text">Telegram</span>
                            </a>
                            <a href="#" class="share__item js-share-item-copy">
                                <span class="share__item-icon share__item-icon--copy">
                                    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M4.19922 5.40327C4.37217 5.63449 4.59283 5.8258 4.84622 5.96425C5.09962 6.10269 5.37982 6.18501 5.66783 6.20564C5.95584 6.22627 6.24492 6.18471 6.51546 6.08379C6.78599 5.98287 7.03166 5.82495 7.2358 5.62074L8.44399 4.41255C8.81079 4.03277 9.01375 3.52412 9.00917 2.99615C9.00458 2.46818 8.79281 1.96313 8.41946 1.58978C8.04611 1.21644 7.54106 1.00466 7.01309 1.00008C6.48512 0.995488 5.97647 1.19845 5.59669 1.56525L4.904 2.25392" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M5.81002 4.59658C5.63707 4.36536 5.41641 4.17404 5.16302 4.0356C4.90962 3.89716 4.62942 3.81483 4.34141 3.79421C4.0534 3.77358 3.76432 3.81514 3.49379 3.91605C3.22325 4.01697 2.97758 4.17489 2.77344 4.3791L1.56525 5.58729C1.19845 5.96707 0.995488 6.47572 1.00008 7.0037C1.00466 7.53167 1.21644 8.03672 1.58978 8.41006C1.96313 8.78341 2.46818 8.99518 2.99615 8.99977C3.52412 9.00436 4.03277 8.80139 4.41255 8.43459L5.10122 7.74592" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </span>
                                <span class="share__item-text">Скопировать ссылку</span>
                            </a>
                        </div>
                    </div>
                    </noindex>
                                    </div>
                            <section class="container inset" data-banner="222569" data-source="214796" data-format="horizontal">
            <section class="container inset"  data-format="horizontal">
            <div class="row">
            <div class="col-lg-8 col-sm-12">
                <a data-source="214796" data-banner="222569" target="_blank" href="https://skillbox.ru/course/profession-graphdesigner/" class="article-advert-banner__link courseLink"  data-format="horizontal" data-type="horizontal" data-courseid="3254">
                <div class="inset__wrapper" style="background-color: #e9e9f5;">
                    <div class="inset__content">
                            <h2 class="inset__header">Курс</h2>
                            <p class="inset__description">
                               Профессия Графический дизайнер PRO                          </p>
                        <p class="inset__text">
                            Вы&nbsp;научитесь создавать элементы фирменного стиля и&nbsp;графику для бизнеса. Соберёте портфолио, которое отразит ваш стиль и&nbsp;подтвердит навыки дизайнера. Сможете начать карьеру в&nbsp;студии или на&nbsp;фрилансе.                        </p>
                        <p class="inset__button article-advert-banner__link"> Узнать про курс</p>
                    </div>
                    <div class="inset__image">
                        <img src="https://skillbox.ru/upload/setka_images/graphdiz_h.png" width="145" height="145" alt="">
                    </div>
                </div>
                </a>
            </div>
        </div>

    </section>    </section>
                <div class="adfox_banner" data-type="adfox"><div
                                            class="article-detail-banner article-detail-banner--type-four"
                                            style="background: #E4FCCC;"
                                    >
                                        <div class="article-detail-banner__content">
                                            <div class="article-detail-banner__title">
                                                Бесплатные курсы для тех, кто хочет развиваться в&nbsp;дизайне:
                                            </div>
                                           <ul>
                                               <li><a data-source="214796" data-banner="226555" href="https://bootcamp.skillbox.ru/graphicdesigner/?utm_source=media&utm_medium=banners&utm_campaign=all_all_media_banners_invite_bootcamp-741_all_inside_skillbox
" target="_blank">Графический дизайн с нуля</a></li>
                                               <li><a href="https://bootcamp.skillbox.ru/webdesign/?utm_source=media&utm_medium=banners&utm_campaign=all_all_media_banners_invite_bootcamp-706_all_inside_skillbox" target="_blank">Cтарт в&nbsp;веб-дизайне</a></li>
                                               <li><a href="https://bootcamp.skillbox.ru/decor-land-interior/?utm_source=media&utm_medium=banners&utm_campaign=all_all_media_banners_invite_bootcamp-650_all_inside_skillbox" target="_blank">Интерьеры, ландшафт и&nbsp;декорирование</a></li>
                                               <li><a href="https://bootcamp.skillbox.ru/uxui/?utm_source=media&utm_medium=banners&utm_campaign=all_all_media_banners_invite_bootcamp-707_all_inside_skillbox" target="_blank">Знакомимся с&nbsp;UX/UI</a></li>
                                               <li><a href="https://bootcamp.skillbox.ru/digital-design/?utm_source=media&utm_medium=banners&utm_campaign=all_all_media_banners_invite_bootcamp-623_all_inside2_skillbox" target="_blank">Старт в&nbsp;дизайне с&nbsp;нуля для новичков</a></li>
                                        </div>
                                        <div class="article-detail-banner__image">
                                            <img
                                                    loading="lazy"
                                                    src="/local/templates/media/images/banner/image2.png"
                                                    alt=""
                                            >
                                        </div>
                                    </div></div>                                                                                </section>

            <div class="article-banner" data-banner="219278" data-source="214796" data-format="vertical" data-type="vertical">
                            <div class="row">
            <div class="col-sm-4 col-sm-12">
                <div class="inset__wrapper" style="background-color:#f2eeff;">
                    <div class="inset__content"  >
                    <div class="inset__image" style="text-align: top;">
                        <img src="https://skillbox.ru/upload/setka_images/diz_t.png" width="150" height="150" alt="">
                    </div>
                        <p class="inset__description" style="color:#000!important; padding-bottom:13px;">
                            Учитесь дизайну на&nbsp;практике — бесплатно</p>
                            <p class="inset__text" style="color:#000!important">
                            Курсы за <del>2990</del> 0 р. </p>
                            <ul class="inset__content" style="color:#007bff!important; list-style:'\2713 ' outside; margin-left:13px;">
                                <li style="list-style:'\2713 '; padding-left:2px; margin-bottom:6px">
                                    <a data-source="214796" data-banner="219278" href="https://bootcamp.skillbox.ru/graphicdesigner/?utm_source=media&utm_medium=banners&utm_campaign=all_all_media_banners_invite_bootcamp-741_all_design_skillbox" target="_blank">Графический дизайн</a>
                                </li>
                                <li style="list-style:'\2713 '; padding-left:2px; margin-bottom:6px">
                                    <a href="https://bootcamp.skillbox.ru/decor-land-interior/?utm_source=media&utm_medium=banners&utm_campaign=all_all_media_banners_invite_bootcamp-650_all_design_skillbox" target="_blank">Интерьеры, ландшафт и&nbsp;декорирование</a>
                                </li>
                                <li style="list-style:'\2713 '; padding-left:2px; margin-bottom:6px">
                                    <a href="https://bootcamp.skillbox.ru/webdesign/?utm_source=media&utm_medium=banners&utm_campaign=all_all_media_banners_invite_bootcamp-706_all_design_skillbox" target="_blank">Веб-дизайн</a>
                                </li>                         
                                <li style="list-style:'\2713 '; padding-left:2px; margin-bottom:6px">
                                    <a href="https://bootcamp.skillbox.ru/uxui/?utm_source=media&utm_medium=banners&utm_campaign=all_all_media_banners_invite_bootcamp-707_all_design_skillbox" target="_blank">UX/UI</a>
                                </li>
                            </ul>
                                <a  href="https://bootcamp.skillbox.ru/digital-design/?utm_source=media&utm_medium=banners&utm_campaign=all_all_media_banners_invite_bootcamp-623_all_design_skillbox" class="inset__button article-advert-banner__link" target="_blank" style="color:#000; background-color:#ffafff">Не знаю, с чего начать</a>
                    </div>
                </div>
            </div>
        </div>        </div>
                            <a data-source="214796" data-banner="225373" target="_blank" href="https://bootcamp.skillbox.ru/digital-design/?utm_source=media&utm_medium=banners&utm_campaign=all_all_media_banners_invite_bootcamp-623_all_design_skillbox" class="article-banner article-advert-banner__link" style="background-color: #f2eeff!important;"  data-format="top" data-type="top">
    <div class="article-banner__img">
        <img src="https://skillbox.ru/upload/setka_images/graphdiz_h.png" alt="">
    </div>
    <span class="article-banner__title"><b>Попробуйте бесплатно 4&nbsp;топовые профессии в дизайне
</b><br> 
Пройдите бесплатный курс по&nbsp;дизайну. Добавьте 4&nbsp;крутых кейса в&nbsp;портфолио и&nbsp;решите, в&nbsp;каком направлении развиваться дальше.
</span>
    <span class="article-banner__link">Пройти курс→</span> </a>                        

    
<section class="container news">
    <div class="row">
        <div class="col-lg-8 col-sm-12">
            <h2 class="news__header">Новости</h2>
            <div class="row">
                                                                        <div class="col-xl-4 col-lg-6 col-md-4 col-12 news__item">
                        <a href="/media/design/dizayner-nik-bentel-sozdal-sumku-dlya-seti-supermarketov-lidl/" class="news__text">
                            Дизайнер Ник Бентел создал сумку для сети супермаркетов Lidl                        </a>
                        <span class="news__date">20 фев 2026</span>
                    </div>
                                                        <div class="col-xl-4 col-lg-6 col-md-4 col-12 news__item">
                        <a href="/media/design/arhitektor-serena-minyatti-zavershila-rekonstrukciyu-penthausa-toma-yorka/" class="news__text">
                            Архитектор Серена Миньятти завершила реконструкцию пентхауса Тома Йорка                        </a>
                        <span class="news__date">20 фев 2026</span>
                    </div>
                                                        <div class="col-xl-4 col-lg-6 col-md-4 col-12 news__item">
                        <a href="/media/design/magnit-kosmetik-provela-rebrending-i-smenila-arhitekturu-brenda/" class="news__text">
                            «Магнит Косметик» провела ребрендинг и сменила архитектуру бренда                        </a>
                        <span class="news__date">19 фев 2026</span>
                    </div>
                            </div>
        </div>
    </div>
</section>

    <div class="slider-news-wrap media-catalog-content media-catalog-content--interesting">
    <div class="container">
        <div class="slider-news slider-news--article-slider js-slider-news">
            <div class="slider-news__header">
                <div class="slider-news__title" style="font-family: 'Graphik'; font-weight: 500;">
                    <span class="slider-news__title-notmob">Это интересно</span>
                    <span class="slider-news__title-mob">Это интересно</span>
                </div>
                <div class="slider-news__nav-wrapper">
                    <div class="slider-news__nav-button button-prev swiper-button-disabled" tabindex="0" role="button" aria-label="Previous slide" aria-disabled="true">
                        <svg viewBox="0 0 9 15" width="9" height="15" class="icon">
                            <use xlink:href="/static/svg/svg-symbols-site.svg#icon-arrow-chevron" href="/static/svg/svg-symbols-site.svg#icon-arrow-chevron"></use>
                        </svg>
                    </div>
                    <div class="slider-news__nav-button button-next" tabindex="0" role="button" aria-label="Next slide" aria-disabled="false">
                        <svg viewBox="0 0 9 15" width="9" height="15" class="icon">
                            <use xlink:href="/static/svg/svg-symbols-site.svg#icon-arrow-chevron" href="/static/svg/svg-symbols-site.svg#icon-arrow-chevron"></use>
                        </svg>
                    </div>
                </div>
            </div>
            <div class="slider-news__carousel grad-end">
                <div class="slider-news__container swiper-container swiper-container-initialized swiper-container-horizontal">
                    <div class="swiper-wrapper">
                                                <div class="slider-news__slide swiper-slide swiper-slide-active" style="margin-right: 20px;">
                            <div class="news-block__item">
                                <div class="news-block__img" style="margin-bottom: 8px;">
                                    <picture>
                                        <img src="https://248006.selcdn.ru/main/iblock/b52/b52d13cea8228e26355908e4cd8c8ce7/64f9ab9a1f1d8b6ab575a801b792f049.jpg">
                                    </picture>                                </div>
                                <a href="/media/design/celeb-ai-selfie-hj/" class="news-block__title" style="font-family: 'Graphik'; font-size: 14px; line-height: 19px; -webkit-line-clamp: 4; font-weight: 500">
                                   Фото со знаменитостью: разбираем лучшие ИИ и промпты                         </a>
                            </div>
                        </div>
                                                <div class="slider-news__slide swiper-slide swiper-slide-active" style="margin-right: 20px;">
                            <div class="news-block__item">
                                <div class="news-block__img" style="margin-bottom: 8px;">
                                    <picture>
                                        <img src="https://248006.selcdn.ru/main/iblock/318/31842f88305140565f83289f3b2c50a5/f26ef13523053b6853b0786f2127f92b.jpg">
                                    </picture>                                </div>
                                <a href="/media/design/free-warehouse-design/" class="news-block__title" style="font-family: 'Graphik'; font-size: 14px; line-height: 19px; -webkit-line-clamp: 4; font-weight: 500">
                                   7 бесплатных программ для ландшафтного дизайна участка                         </a>
                            </div>
                        </div>
                                                <div class="slider-news__slide swiper-slide swiper-slide-active" style="margin-right: 20px;">
                            <div class="news-block__item">
                                <div class="news-block__img" style="margin-bottom: 8px;">
                                    <picture>
                                        <img src="https://248006.selcdn.ru/main/iblock/5fd/5fd6cf8d6a8576b011d51983f5e0bb03/1e4c167c264c8782d91b4bf1ab289b0b.jpg">
                                    </picture>                                </div>
                                <a href="/media/design/istoriya-dizayna-20102020-h-chast-pervaya-graficheskiy-dizayn/" class="news-block__title" style="font-family: 'Graphik'; font-size: 14px; line-height: 19px; -webkit-line-clamp: 4; font-weight: 500">
                                   История дизайна 2010–2020-х. Часть первая: графический дизайн                         </a>
                            </div>
                        </div>
                                                <div class="slider-news__slide swiper-slide swiper-slide-active" style="margin-right: 20px;">
                            <div class="news-block__item">
                                <div class="news-block__img" style="margin-bottom: 8px;">
                                    <picture>
                                        <img src="https://248006.selcdn.ru/main/iblock/4a9/4a9d3fdbc108d8063f1a1c69270f319e/6631ba31071b464429640911b4849895.jpg">
                                    </picture>                                </div>
                                <a href="/media/design/story-andemirkan-kodzov/" class="news-block__title" style="font-family: 'Graphik'; font-size: 14px; line-height: 19px; -webkit-line-clamp: 4; font-weight: 500">
                                   Из Росгвардии в веб-дизайн: как Андемиркан вернул в свою жизнь творчество и красоту                         </a>
                            </div>
                        </div>
                                                <div class="slider-news__slide swiper-slide swiper-slide-active" style="margin-right: 20px;">
                            <div class="news-block__item">
                                <div class="news-block__img" style="margin-bottom: 8px;">
                                    <picture>
                                        <img src="https://248006.selcdn.ru/main/iblock/d8d/d8d64014b88724ece984468984d84b61/e361455e4982931c582704fdd46d3c6e.jpg">
                                    </picture>                                </div>
                                <a href="/media/design/3d-webstocks/" class="news-block__title" style="font-family: 'Graphik'; font-size: 14px; line-height: 19px; -webkit-line-clamp: 4; font-weight: 500">
                                   Бесплатные библиотеки 3D-моделей для Blender                         </a>
                            </div>
                        </div>
                                            </div>
                    <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
                </div>
            </div>
        </div>
    </div>
</div>
    <div class="question">
        <div class="container">
            <div class="question__inner">
                <div class="question__title">Понравилась статья?</div>
                                    <a href="#" data-cur-url="/media/design/adaptive-prostymi-slovami/"
                       class="question__btn js-modalLink" data-mfp-src="#modalAuth">Да</a>
                
                            </div>
        </div>
    </div>
    </div>
    <span
        data-area="article-bottom"
        data-current-url="/media/design/adaptive-prostymi-slovami/"
        data-id="214796">
    </span>
</div>
<script type="application/ld+json">
{"@context":"http:\/\/schema.org","@type":"Article","url":"https:\/\/skillbox.ru\/media\/design\/adaptive-prostymi-slovami\/","headline":"\u0427\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442 \u00ab\u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0439\u00bb? \u041e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u044b\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438","articleSection":"\u0414\u0438\u0437\u0430\u0439\u043d","articleBody":"\u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u2014 \u044d\u0442\u043e \u0442\u0435\u0440\u043c\u0438\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u0435\u0442\u0441\u044f \r\n\u0438&nbsp;\u0432&nbsp;\u0434\u0438\u0437\u0430\u0439\u043d\u0435, \u0438&nbsp;\u0432&nbsp;\u0430\u0439\u0442\u0438. \u041e\u043d&nbsp;\u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u043e\u0434\u043d\u043e \u0438&nbsp;\u0442\u043e&nbsp;\u0436\u0435? \u0418\u043b\u0438 \u0432&nbsp;\u043a\u0430\u0436\u0434\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0451 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435?\r\n\r\n\u041f\u0440\u043e\u0441\u0442\u044b\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438 \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u044e\u0442, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u00ab\u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0439\u00bb, \r\n\u0430\u0440\u0442-\u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440 \u0410\u043b\u0435\u043d \u0417\u0430\u0433\u0430\u0440\u0434\u0438\u043d\u043e\u0432 [ #stk-1 ] \u0438&nbsp;\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u041e\u043b\u0435\u0433 \u0420\u044f\u0437\u0430\u043d\u0446\u0435\u0432 [ #stk-2 ] .\r\n\r\n\r\n\r\n \r\n\u0410\u043b\u0435\u043d \u0417\u0430\u0433\u0430\u0440\u0434\u0438\u043d\u043e\u0432\r\n\r\n\u0410\u0440\u0442-\u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440 \u0438&nbsp;\u0441\u0435\u043d\u044c\u043e\u0440-\u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440 \u0432&nbsp;\u0441\u0442\u0443\u0434\u0438\u0438 \r\nFriends Design Department  , \u043a\u0440\u0435\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0438&nbsp;\u0441\u0430\u0443\u043d\u0434-\u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440, \u0434\u0438\u0434\u0436\u0435\u0439, \u0430\u043c\u0431\u0438\u0432\u0435\u0440\u0442.\r\n\r\n\u041f\u043e\u0431\u0435\u0434\u0438\u0442\u0435\u043b\u044c ADCE 2021&nbsp;\u0438&nbsp;Red Apple 2022.\r\n \r\n\r\n  \r\n\r\n  \r\n\r\n\r\n\r\n\u0410\u043b\u0435\u043d \u0417\u0430\u0433\u0430\u0440\u0434\u0438\u043d\u043e\u0432 \u043e\u0431&nbsp;\u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u043c \u043d\u0430&nbsp;\u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0441\u043a\u043e\u043c\r\n\r\n\r\n\r\n\r\n\r\n\r\n\u00ab\u042f&nbsp;\u0435\u0433\u043e \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u0443\u044e, \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u0443\u044e, \u0430&nbsp;\u043e\u043d&nbsp;\u0432\u0437\u043e\u0440\u0432\u0430\u043b\u0441\u044f\u2026 \r\n\u0411\u0443\u0434\u0443! \u0411\u0443\u0434\u0443 \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043f\u043e\u043a\u0430 \u043d\u0435&nbsp;\u0430\u0434\u0430\u043f\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f!\u00bb\r\n\r\n\u041e\u0442\u0441\u044b\u043b\u043a\u0430 \u043a&nbsp;\u00ab\u0421\u0430\u043d\u0430\u0442\u043e\u0440\u0438\u044e \u0441\u0430\u0442\u0430\u043d\u044b\u00bb :)\r\n\r\n\u0418\u043c\u0435\u043d\u043d\u043e \u0446\u0438\u0442\u0430\u0442\u043e\u0439 \u0437\u0432\u0443\u0447\u0438\u0442 \u0442\u0430\u043a: \u00ab\u201e\u041c\u043e\u043d\u0442\u0438\u0440\u0443\u044e, \r\n\u043c\u043e\u043d\u0442\u0438\u0440\u0443\u044e, \u0431****, \u0430&nbsp;\u043e\u043d&nbsp;\u0432\u0437\u043e\u0440\u0432\u0430\u043b\u0441\u044f \u043d\u0430&nbsp;\u0445**. \u201e\u0411\u043e\u043b\u044c\u0448\u0435 \u043d\u0435&nbsp;\u0431\u0443\u0434\u0435\u0442\u0435 \u0440\u0435\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c?\u201c \u201e\u0411\u0443\u0434\u0443! \u0418&nbsp;\u0431\u0443\u0434\u0443! \u041f\u043e\u043a\u0430 \u043e\u043d, \u0441***, \u043d\u0435&nbsp;\u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c!\u201c\u00bb\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c\r\n\r\n\u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c&nbsp;\u2014 \u0440\u0435\u0430\u043a\u0446\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u0441\u0430\u0439\u0442\u0430 \r\n\u0438&nbsp;\u043b\u044e\u0431\u044b\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0445\u0441\u044f \u0432&nbsp;\u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u0435, \u043d\u0430&nbsp;\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435, \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435, \u0440\u043e\u0442\u0435\u0439\u0448\u0435\u043d \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430, \u0432&nbsp;\u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u043d\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f.\r\n \r\n\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435: Dmytro Prudnikov \/ Dribbble  \r\n \r\n\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435: Tanya Nikolaeva  \/ Behance\r\n\r\n\u041e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u043e\u0435: \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c&nbsp;\u2014 \u044d\u0442\u043e \u043d\u0435&nbsp;\u043f\u0440\u043e\u0441\u0442\u043e \r\n\u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0439 \u0441\u043a\u0435\u0439\u043b\u0438\u043d\u0433. \u041d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442&nbsp;\u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u0438&nbsp;\u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044f \u043e\u043d\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c:\r\n\r\n- \u0431\u0430\u043b\u0430\u043d\u0441,\r\n- \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u044e \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0438&nbsp;\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432,\r\n- \u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0441\u0442\u044c.\r\n \r\n\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435: Jovie Brett Bardoles \/ Dribbble  \r\n\r\n\u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0432&nbsp;\u0434\u0438\u0437\u0430\u0439\u043d\u0435\r\n\r\n\u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c&nbsp;\u2014 \u044d\u0442\u043e \u043f\u043e\u043d\u044f\u0442\u0438\u0435 \u0438\u0437&nbsp;\u0432\u0435\u0431-\u0434\u0438\u0437\u0430\u0439\u043d\u0430. \r\n\u041d\u043e&nbsp;\u044f&nbsp;\u0445\u043e\u0447\u0443 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c, \u043a\u0430\u043a \u043e\u043d\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u0432\u044f\u0437\u0430\u043d\u0430 \u0441&nbsp;\u0434\u0438\u0434\u0436\u0438\u0442\u0430\u043b-\u0434\u0438\u0437\u0430\u0439\u043d\u043e\u043c \u0432\u043e\u043e\u0431\u0449\u0435 \u0438&nbsp;\u0434\u0430\u0436\u0435 \u043a\u0430\u043a \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u0440\u0435\u0430\u0442\u0438\u0432\u0430 \u0438\u043b\u0438 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0430.\r\n\r\n\u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d, \u0435\u0441\u043b\u0438 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \r\n\u043f\u0440\u0438\u0441\u0442\u0430\u043b\u044c\u043d\u043e, \u0432\u0430\u0440\u0438\u0430\u0442\u0438\u0432\u043d\u044b\u0439. \u0412&nbsp;\u0431\u043b\u043e\u0433\u0435 Shillington  \u0435\u0441\u0442\u044c \u043f\u043e\u0434\u0431\u043e\u0440\u043a\u0430 \u0433\u0438\u0444\u043e\u043a \u043e\u0431 \u044d\u0442\u043e\u043c.\r\n\r\n\u0417\u0434\u0435\u0441\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u044b&nbsp;\u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u0430\u0434\u0430\u043f\u0442\u0438\u0432 \r\n\u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043e\u043c, \u043d\u043e&nbsp;\u0435\u0441\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u044f \u043f\u043e&nbsp;\u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f\u043c \u0438&nbsp;\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c&nbsp;\u2014 \u0441&nbsp;\u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c \u043f\u043e&nbsp;\u0448\u0438\u0440\u0438\u043d\u0435 \u0438\u043b\u0438 \u0431\u0435\u0437 \u043d\u0435\u0433\u043e:\r\n \r\n\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435: Shillington  \r\n\r\n\u0422\u043e&nbsp;\u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0440\u043e \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u043e\u0441\u0442\u044c \r\n\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044f: \u0434\u0435\u0441\u043a\u0442\u043e\u043f \u0438\u043b\u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f first? \u0421&nbsp;\u0447\u0435\u0433\u043e \u043d\u0430\u0447\u043d\u0451\u043c? \u0410&nbsp;\u0447\u0442\u043e \u043c\u044b&nbsp;\u043f\u043e\u0442\u043e\u043c \u0431\u0443\u0434\u0435\u043c \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u044b?\r\n \r\n\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435: Shillington  \r\n\r\n\u0418&nbsp;\u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043b\u0430\u0432\u043d\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a&nbsp;\u043f\u043e\u043d\u044f\u0442\u0438\u044e \r\n\u00ab\u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d\u00bb. \u041e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d \u0432\u044b\u0442\u0435\u043a\u0430\u0435\u0442 \u0438\u0437&nbsp;\u0430\u0434\u0430\u043f\u0442\u0438\u0432\u0430:\r\n \r\n\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435: Shillington  \r\n\r\n\u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d \u0438&nbsp;\u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d\r\n\r\n\u0410\u0434\u0430\u043f\u0442\u0438\u0432 \u0438&nbsp;\u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u043e\u0441\u0442\u044c \u0441\u0432\u044f\u0437\u0430\u043d\u044b. \u0421\u043c\u043e\u0442\u0440\u0438\u0442\u0435, \r\n\u044f&nbsp;\u0432\u0430\u043c \u0441\u0445\u0435\u043c\u0443 \u0441\u0434\u0435\u043b\u0430\u043b:\r\n \r\n\u0418\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u044f: Ariel Salminen \/ \u0410\u043b\u0435\u043d \u0417\u0430\u0433\u0430\u0440\u0434\u0438\u043d\u043e\u0432\r\n\r\n\u0411\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u044d\u0442\u0430 \u0441\u0432\u044f\u0437\u044c \u043e\u043f\u0438\u0441\u0430\u043d\u0430 \u0432&nbsp;Arie \r\n . \u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0442\u0430\u043c \u0435\u0441\u0442\u044c \u043c\u044d\u043f \u0441\u0430\u043c\u043e\u0433\u043e \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u044f&nbsp;\u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u0430\u043b \u0438&nbsp;\u043f\u0435\u0440\u0435\u0432\u0451\u043b. \u0422\u0430\u043a \u0447\u0442\u043e \u0432&nbsp;\u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0441\u0442\u0435\u043f\u0435\u043d\u0438 \u044d\u0442\u043e\u0442 \u0438\u043c\u0438\u0434\u0436 \u0442\u043e\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0437\u0432\u0430\u0442\u044c \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u043f\u043e\u0434 \u0440\u0443\u0441\u0441\u043a\u043e\u0433\u043e\u0432\u043e\u0440\u044f\u0449\u0443\u044e \u0430\u0443\u0434\u0438\u0442\u043e\u0440\u0438\u044e :)\r\n\r\n\u0421\u043e\u0437\u0434\u0430\u0432\u0430\u044f \u0432\u0435\u0431-\u0434\u0438\u0437\u0430\u0439\u043d \u0438\u0437&nbsp;\u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \r\n\u0431\u043b\u043e\u043a\u043e\u0432, \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u044f \u0435\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u044b\u043c\u0438 \u0444\u043e\u0440\u043c\u0430\u043c\u0438, \u043c\u044b&nbsp;\u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0442\u044c \u0438&nbsp;\u0443\u043b\u0443\u0447\u0448\u0430\u0442\u044c \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0438&nbsp;\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u042d\u0442\u043e \u0440\u0430\u043d\u043e \u0438\u043b\u0438 \u043f\u043e\u0437\u0434\u043d\u043e \u0432\u044b\u043d\u0443\u0434\u0438\u0442 \u043d\u0430\u0441 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c \u0438&nbsp;\u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430&nbsp;\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u044d\u043a\u0440\u0430\u043d\u0430, \u0432&nbsp;\u043a\u043e\u0442\u043e\u0440\u043e\u043c \u044d\u0442\u0430 \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0431\u0443\u0434\u0435\u0442 \u0442\u0440\u0430\u043d\u0441\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f.\r\n\r\n\u0422\u043e&nbsp;\u0435\u0441\u0442\u044c \u043b\u0438\u0431\u043e \u043c\u044b&nbsp;\u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0435 \u0433\u0430\u0439\u0434\u044b \r\n\u0438&nbsp;\u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u043f\u043e\u0434 \u043a\u0430\u0436\u0434\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442, \u043b\u0438\u0431\u043e \u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u0443 \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u043f\u0435\u0440\u0441\u043f\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u0438 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0449\u0435\u0439\u0441\u044f. \u042d\u0442\u043e \u0438&nbsp;\u0435\u0441\u0442\u044c \u0437\u0430\u0447\u0430\u0442\u043a\u0438 \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u043e\u0433\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0430.\r\n\r\n\u041e\u043d&nbsp;\u0431\u043e\u043b\u0435\u0435 \u0433\u0438\u0431\u043a\u0438\u0439, \u0447\u0435\u043c \u0430\u0434\u0430\u043f\u0442\u0438\u0432: \u0434\u043b\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u0430 \r\n\u043c\u044b&nbsp;\u0432\u0441\u0451&nbsp;\u0436\u0435 \u0437\u0430\u0434\u0430\u0451\u043c \u0440\u0430\u043c\u043a\u0438 \u0438\u043b\u0438 \u0432\u0435\u0440\u0441\u0442\u0430\u0435\u043c \u0441\u0430\u0439\u0442\/\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432&nbsp;\u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u0430\u0445. \u0410&nbsp;\u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u043e&nbsp;\u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435: \u043f\u0440\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e\u0439 \u0441\u0435\u0442\u043a\u0438, \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u0445, \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u044f\u0445 \u0438&nbsp;\u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u0445 \u043d\u0430\u0448\u0430 \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0438&nbsp;\u0432\u0438\u0434\u043e\u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f, \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u00ab\u0440\u0435\u0437\u0438\u043d\u043e\u0432\u043e\u0439\u00bb.\r\n\r\n\r\n\r\n\u041c\u044b&nbsp;\u0431\u0443\u0434\u0435\u043c \u043a\u0443\u0440\u043e\u043b\u0435\u0441\u0438\u0442\u044c \u043a\u0430\u043a \u0432\u0437\u0434\u0443\u043c\u0430\u0435\u0442\u0441\u044f, \r\n\u0430&nbsp;\u043c\u0430\u043a\u0435\u0442 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0441\u043b\u0443\u0448\u043d\u044b\u043c \u043c\u0430\u043b\u044c\u0447\u0438\u043a\u043e\u043c \u0438&nbsp;\u0430\u0434\u0435\u043a\u0432\u0430\u0442\u043d\u043e \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u043f\u043e\u0434 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f.\r\n\r\n\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043d\u0430&nbsp;\u00ab\u0425\u0430\u0431\u0440\u0435 \r\n \u00bb.\u0422\u0430\u043a \u0432&nbsp;\u0447\u0451\u043c \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u043c\u0435\u0436\u0434\u0443 \u00ab\u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u043c\u00bb \u0438&nbsp;\u00ab\u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u043c\u00bb?\r\n\r\n\u0423\u0441\u043b\u043e\u0432\u043d\u043e \u0433\u043e\u0432\u043e\u0440\u044f, \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d&nbsp;\u2014 \r\n\u044d\u0442\u043e \u0436\u0430\u043d\u0440, \u0430&nbsp;\u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d&nbsp;\u2014 \u0435\u0433\u043e \u043f\u043e\u0434\u0436\u0430\u043d\u0440.\r\n\r\n\u0418&nbsp;\u0435\u0441\u043b\u0438 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043e\u043c \u0431\u044b\u043b \u0432\u0441\u0435\u043c\u0438 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0439 \r\n\u0440\u043e\u043a \u0432&nbsp;\u0432\u0438\u0434\u0435 Guns\u2018n\u2019Roses \u0438\u043b\u0438 Black Sabbath, \u0442\u043e&nbsp;\u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u0439&nbsp;\u2014 \u044d\u0442\u043e \u0443\u0436\u0435 \u043d\u043e\u0432\u043e\u0435 \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u0435 \u0438&nbsp;\u043d\u0435\u0447\u0442\u043e \u0431\u043e\u043b\u0435\u0435 \u0433\u0438\u0431\u043a\u043e\u0435 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0438&nbsp;\u0432\u043a\u0443\u0441\u043e\u0432 \u043f\u0443\u0431\u043b\u0438\u043a\u0438: Yves Tumor \u0438&nbsp;Arctic Monkeys, \u043f\u0440\u043e\u0441\u0442\u0438 \u0433\u043e\u0441\u043f\u043e\u0434\u0438.\r\n\r\n\u041d\u043e&nbsp;\u0441\u043c\u0435\u0441\u0442\u0438\u043c \u0444\u043e\u043a\u0443\u0441 \u043e\u0442&nbsp;\u0432\u0435\u0431-\u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u043a&nbsp;\u0434\u0438\u0434\u0436\u0438\u0442\u0430\u043b\u0443 \r\n\u0438&nbsp;\u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u043c\u0443 \u0434\u0438\u0437\u0430\u0439\u043d\u0443.\r\n\r\n\u0413\u043e\u0432\u043e\u0440\u044f \u043f\u0440\u043e \u0434\u0438\u0434\u0436\u0438\u0442\u0430\u043b, \u0445\u043e\u0447\u0443 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \r\n\u0430\u0434\u0430\u043f\u0442\u0438\u0432 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0443\u0436\u0435 \u043d\u0435&nbsp;\u043f\u043e\u0434 \u0444\u043e\u0440\u043c\u0430\u0442 \u044d\u043a\u0440\u0430\u043d\u043e\u0432, \u0430&nbsp;\u043f\u043e\u0434 \u0444\u043e\u0440\u043c\u0430\u0442 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0438&nbsp;\u043a\u0430\u043d\u0430\u043b\u044b \u043a\u043e\u043c\u043c\u0443\u043d\u0438\u043a\u0430\u0446\u0438\u0438. \u042d\u0442\u043e \u043f\u043e\u0441\u0442\u044b \u0432&nbsp;\u0441\u043e\u0446\u0441\u0435\u0442\u0438, \u0441\u0442\u043e\u0440\u0438\u0441 \u0438&nbsp;\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0438\u043a\u0447\u0430 16\u00d79, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b&nbsp;\u043f\u043e\u0432\u0441\u0435\u043c\u0435\u0441\u0442\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c.\r\n \r\n\u041c\u044b&nbsp;\u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0431\u0430\u043b\u0430\u043d\u0441 \u0438&nbsp;\u0441\u0443\u0442\u044c \u043c\u0435\u0441\u0441\u0435\u0434\u0436\u0430, \u043d\u043e&nbsp;\u043c\u0435\u043d\u044f\u0435\u043c \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043c\u0430\u043a\u0435\u0442\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c\r\n\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435: \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043e \u0410\u043b\u0435\u043d\u043e\u043c \u0417\u0430\u0433\u0430\u0440\u0434\u0438\u043d\u043e\u0432\u044b\u043c\r\n\r\n\u0410&nbsp;\u0442\u0435\u043f\u0435\u0440\u044c \u0434\u0435\u0441\u0435\u0440\u0442. \u041f\u0440\u043e\u0435\u043a\u0442 \u043a\u0440\u0435\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \r\n\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 Pirate \u043e\u0442&nbsp;\u0431\u0440\u0438\u0442\u0430\u043d\u0441\u043a\u043e\u0439 \u0441\u0442\u0443\u0434\u0438\u0438 Only.\r\n\r\n\u041e\u0447\u0435\u043d\u044c \u0441\u043c\u0435\u043b\u044b\u0439 \u0438&nbsp;\u043a\u0440\u0443\u0442\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u043d\u0430&nbsp;\u043c\u043e\u0439 \r\n\u0432\u0437\u0433\u043b\u044f\u0434. \u0418\u0445&nbsp;\u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u043c\u0435\u0441\u0441\u0435\u0434\u0436: Democratizing creative space. \u041e\u043d\u043e \u0438&nbsp;\u0432\u0438\u0434\u043d\u043e\u2026\r\n \r\n\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435: Only. \/ Behance  \r\n\r\n\u0417\u0430&nbsp;\u043e\u0441\u043d\u043e\u0432\u0443 \u0432\u0437\u044f\u0442 \u0441\u0430\u043c\u044b\u0439 \u043e\u0431\u044b\u0447\u043d\u044b\u0439\u2026 Arial. \u0418&nbsp;\u0435\u0433\u043e \r\n\u0432\u044b\u0432\u0435\u0440\u043d\u0443\u043b\u0438 \u043d\u0430\u0438\u0437\u043d\u0430\u043d\u043a\u0443.\r\n \r\n\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435: Only. \/ Behance  \r\n\r\n\u0427\u0442\u043e&nbsp;\u0436\u0435 \u0437\u0434\u0435\u0441\u044c \u043f\u0440\u0438\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e? \u0418&nbsp;\u0433\u043b\u0430\u0432\u043d\u043e\u0435&nbsp;\u2014 \r\n\u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0433\u043e?\r\n\r\n\u0420\u0435\u0431\u044f\u0442\u0430 \u0440\u0430\u0437\u0440\u0443\u0448\u0438\u043b\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0438&nbsp;\u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0438\u0445&nbsp;\u0437\u0430\u043d\u043e\u0432\u043e. \r\n\u0412\u0437\u044f\u043b\u0438 \u0437\u0430&nbsp;\u043e\u0441\u043d\u043e\u0432\u0443 \u0448\u0440\u0438\u0444\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043d\u0438 \u0441\u0442\u0430\u043b\u0438 \u0442\u044f\u043d\u0443\u0442\u044c \u043a\u0430\u043a \u0438\u043c&nbsp;\u0432\u0437\u0434\u0443\u043c\u0430\u0435\u0442\u0441\u044f \u043f\u043e&nbsp;\u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435, \u0433\u0434\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043b\u0438\u0431\u043e \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u043d\u043e\u0435 \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 50%, 100%, 300% \u043f\u043e&nbsp;\u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 \u0438\u043b\u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438, \u043b\u0438\u0431\u043e \u0431\u043e\u043b\u0435\u0435 \u043a\u0440\u0435\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0432&nbsp;\u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u0432\u0441\u0451 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043e \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u043c \u0444\u0440\u0435\u0439\u043c\u043e\u043c.\r\n \r\n\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435: Only. \/ Behance  \r\n\r\n\u0421\u043c\u0435\u043b\u043e, \u044d\u0444\u0444\u0435\u043a\u0442\u043d\u043e, \u0441\u0432\u0435\u0436\u043e. \u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u0435\u0441\u0442\u044c \u0441\u0438\u0441\u0442\u0435\u043c\u0430, \r\n\u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u043e\u043d\u0430 \u043d\u0430\u043c \u043d\u0435&nbsp;\u043f\u043e\u043d\u044f\u0442\u043d\u0430 \u0441&nbsp;\u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0432\u0437\u0433\u043b\u044f\u0434\u0430 \u0438\u043b\u0438 \u043d\u0435&nbsp;\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u043e\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e. \u041d\u043e&nbsp;\u043e\u043d\u0430 \u0435\u0441\u0442\u044c \u0438&nbsp;\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442!\r\n\r\n\u0413\u043b\u0430\u0432\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a&nbsp;\u044d\u0442\u043e\u043c\u0443 \u0434\u0438\u0437\u0430\u0439\u043d\u0443&nbsp;\u2014 \r\n\u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u043e\u0434\u0443\u043a\u0442, \u0432\u044b\u0434\u0435\u043b\u044f\u044e\u0449\u0438\u0439\u0441\u044f \u043d\u0430&nbsp;\u0444\u043e\u043d\u0435 \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u043b\u043e\u0449\u0430\u0434\u043e\u043a \u043f\u043e\u0434 \u043a\u0440\u0435\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430, \u0431\u044b\u0442\u044c \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u044e\u0449\u0438\u043c\u0441\u044f. \u042d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u044b&nbsp;\u2014 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0430\u044f \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f, \u0431\u0443\u0434\u0442\u043e \u0436\u0438\u0434\u043a\u043e\u0441\u0442\u044c, \u0440\u0430\u0441\u0442\u0435\u043a\u0430\u0435\u0442\u0441\u044f \u043f\u043e&nbsp;\u0432\u0441\u0435\u043c\u0443 \u0445\u043e\u043b\u0441\u0442\u0443, \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u044f \u0435\u0433\u043e \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e.\r\n\r\n\r\n\r\n\r\n\r\n \r\n\u041e\u043b\u0435\u0433 \u0420\u044f\u0437\u0430\u043d\u0446\u0435\u0432\r\n\r\nJavaScript-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u00ab\u0410\u043b\u044c\u0444\u0430-\u0411\u0430\u043d\u043a\u0430\u00bb.\r\n \r\n\r\n  \r\n\r\n  \r\n\r\n  \r\n\r\n\u041e\u043b\u0435\u0433 \u0420\u044f\u0437\u0430\u043d\u0446\u0435\u0432 \u043e\u0431&nbsp;\u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u043c \u043d\u0430&nbsp;\u0430\u0439\u0442\u0438\u0448\u043d\u043e\u043c\r\n\r\n\u0421\u0435\u0439\u0447\u0430\u0441 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u0441\u0442\u0440\u0430\u043d\u043d\u043e \r\n\u0441\u043b\u044b\u0448\u0430\u0442\u044c \u043f\u043e\u043d\u044f\u0442\u0438\u0435 \u00ab\u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c\u00bb. \u0418&nbsp;\u0442\u0430\u043a \u044f\u0441\u043d\u043e, \u0447\u0442\u043e \u0443&nbsp;\u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043a\u0443\u0447\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432, \u043d\u0430&nbsp;\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u044b&nbsp;\u043c\u043e\u0436\u0435\u043c \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b: \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u044b, \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u044b, \u043d\u043e\u0443\u0442\u0431\u0443\u043a\u0438, \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u044b \u0441&nbsp;\u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0434\u0438\u0430\u0433\u043e\u043d\u0430\u043b\u044f\u043c\u0438 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u043e\u0432 \u0438&nbsp;\u0434\u0430\u0436\u0435 \u0442\u0435\u043b\u0435\u0432\u0438\u0437\u043e\u0440\u044b. \u0412\u0441\u0435 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u044f\u0442\u044c \u043d\u0435&nbsp;\u0431\u0443\u0434\u0435\u043c, \u043d\u043e&nbsp;\u0434\u0430, \u043c\u044b&nbsp;\u0437\u043d\u0430\u0435\u043c, \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u0443\u043c\u0435\u043b\u044c\u0446\u044b, \u043a\u0442\u043e \u0438&nbsp;\u0441&nbsp;\u0442\u0430\u043c\u0430\u0433\u043e\u0447\u0438 \u0438\u043b\u0438 \u0441&nbsp;\u0445\u043e\u043b\u043e\u0434\u0438\u043b\u044c\u043d\u0438\u043a\u0430 \u0441\u0451\u0440\u0444\u0438\u0442 \u043f\u043e \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0430\u043c, \u043d\u043e&nbsp;\u0434\u043e&nbsp;\u0442\u0430\u043a\u043e\u0433\u043e \u043c\u044b&nbsp;\u0434\u043e\u0445\u043e\u0434\u0438\u0442\u044c \u043d\u0435&nbsp;\u0431\u0443\u0434\u0435\u043c. \u042d\u0442\u043e \u043a\u0440\u0430\u0439\u043d\u0435 \u0440\u0435\u0434\u043a\u0438\u0439 \u043a\u0435\u0439\u0441, \u043d\u0430&nbsp;\u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u044b&nbsp;\u043d\u0435&nbsp;\u0431\u0443\u0434\u0435\u043c \u0437\u0430\u043e\u0441\u0442\u0440\u044f\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435.\r\n\r\n\u0427\u0442\u043e \u0431\u044b\u043b\u043e \u0434\u043e&nbsp;\u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0432&nbsp;\u0432\u0435\u0431\u0435\r\n\r\n\u0415\u0441\u043b\u0438 \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043d\u0430&nbsp;\u043c\u043d\u043e\u0433\u043e \u043b\u0435\u0442 \u043d\u0430\u0437\u0430\u0434, \u043a\u043e\u0433\u0434\u0430 \r\n\u0442\u0440\u0430\u0432\u0430 \u0431\u044b\u043b\u0430 \u0435\u0449\u0451 \u0437\u0435\u043b\u0435\u043d\u0435\u0435 \u0438&nbsp;\u043d\u0435\u0431\u043e \u0433\u043e\u043b\u0443\u0431\u0435\u0435&nbsp;\u0438\u2026 \u041a\u043e\u0440\u043e\u0447\u0435, \u043a\u043e\u0433\u0434\u0430 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f, \u0443&nbsp;\u043d\u0430\u0441, \u043f\u043e&nbsp;\u0441\u0443\u0442\u0438, \u0431\u044b\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u041f\u041a&nbsp;\u0441&nbsp;\u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c\u0438 \u0434\u0438\u0441\u043f\u043b\u0435\u044f\u043c\u0438, \u0438&nbsp;\u0441\u0430\u0439\u0442\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u0438\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f&nbsp;\u043d\u0438\u0445. \u041d\u0438&nbsp;\u043e&nbsp;\u0447\u0451\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435&nbsp;\u043d\u0430\u0434\u043e \u0431\u044b\u043b\u043e \u0434\u0443\u043c\u0430\u0442\u044c: \u043d\u0438&nbsp;JS&nbsp;\u0435\u0449\u0451 \u043d\u0435&nbsp;\u0431\u044b\u043b\u043e, \u043d\u0438&nbsp;React\u2026 \u0411\u044b\u043b\u0438&nbsp;\u0436\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0430. \u0411\u044b\u043b\u043e \u043a\u0440\u0443\u0442\u043e! (\u041d\u0435\u0442.)\r\n \r\nMail.ru \u0432&nbsp;2000-\u043c \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b&nbsp;\u0442\u0430\u043a. \u0422\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u0435\u0449\u0451 \u0431\u044b\u043b\u0430 \u043f\u043e\u0447\u0442\u043e\u0432\u0430\u044f \u0441\u043b\u0443\u0436\u0431\u0430\r\n\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435: mail.ru \/ Habr \r\n \r\n\r\n\u041d\u043e&nbsp;\u0432&nbsp;\u043d\u0430\u0447\u0430\u043b\u0435 2000-\u0445 \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u043d\u0430\u0447\u0430\u043b \u043d\u0430\u0431\u0438\u0440\u0430\u0442\u044c \r\n\u043e\u0431\u043e\u0440\u043e\u0442\u044b \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442, \u0438&nbsp;\u043b\u044e\u0434\u0438 \u0441\u0442\u0430\u043b\u0438 \u0432\u044b\u0445\u043e\u0434\u0438\u0442\u044c \u0432&nbsp;\u0421\u0435\u0442\u044c \u0441&nbsp;\u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u043e\u0432. \u0427\u0442\u043e \u0434\u0443\u043c\u0430\u0435\u0442\u0435, \u043a\u0430\u043a \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b\u0441\u044f \u0441\u0430\u0439\u0442 \u043d\u0430&nbsp;\u044d\u043a\u0440\u0430\u043d\u0435 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u0441\u044f \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0430? \u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e: \u043a\u0440\u0438\u0432\u043e, \u043d\u0435\u0447\u0438\u0442\u0430\u0435\u043c\u043e, \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u0442\u044c \u0432\u043f\u0440\u0430\u0432\u043e, \u0432\u043b\u0435\u0432\u043e.\r\n\r\n\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0437\u0430\u0434\u0443\u043c\u0430\u043b\u0438\u0441\u044c \u043d\u0430\u0434 \r\n\u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u0435\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0441\u0430\u0439\u0442\u0430 \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432, \u0447\u0442\u043e\u0431\u044b \u0432\u0435\u0437\u0434\u0435 \u0432\u0441\u0451 \u0431\u044b\u043b\u043e \u0447\u0438\u0442\u0430\u0435\u043c\u043e \u0438&nbsp;\u043a\u0440\u0430\u0441\u0438\u0432\u043e.\r\n \r\n\u041f\u0435\u0440\u0432\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0441\u0430\u0439\u0442\u0430 vkontakte.ru\r\n\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435: AM-STUDiO \/ Shutterstock\r\n\r\n\u041a\u0430\u043a \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0441\u0442\u0430\u043b\u0430 \u0442\u0430\u043a\u043e\u0439 \u0432\u0430\u0436\u043d\u043e\u0439\r\n\r\n\u041f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u0434\u043e\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439, \u0432\u044b\u0445\u043e\u0434\u044f\u0449\u0438\u0445 \r\n\u0432&nbsp;\u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442 \u0441&nbsp;\u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432, \u0440\u043e\u0441\u043b\u0430. \u0422\u0435\u043f\u0435\u0440\u044c \u043e\u043d\u0430 \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0435\u0442 59% \u043f\u0440\u043e\u0442\u0438\u0432 38% \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u0445\u043e\u0434\u044f\u0442 \u0432&nbsp;\u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442 \u0441&nbsp;\u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0430 (\u044d\u0442\u043e \u0441\u0440\u0435\u0434\u043d\u0438\u0435 \u0446\u0438\u0444\u0440\u044b \u043f\u043e&nbsp;\u043c\u0438\u0440\u0443. \u0414\u0430\u043d\u043d\u044b\u0435  \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u044b \u043d\u0430&nbsp;\u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438).\r\n\r\n\u0415\u0441\u043b\u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e&nbsp;\u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c \r\n\u0441\u0442\u0440\u0430\u043d\u0430\u043c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0418\u043d\u0434\u0438\u0438, \u0442\u0430\u043c \u0432\u043e\u043e\u0431\u0449\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e 76% \u043d\u0430&nbsp;24%.\r\n\r\n\u0418\u0442\u0430\u043a, \u043c\u044b&nbsp;\u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u043b\u044e\u0434\u0438 \u0447\u0430\u0449\u0435 \u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \r\n\u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u043c\u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 \u0434\u043b\u044f \u0432\u044b\u0445\u043e\u0434\u0430 \u0432&nbsp;\u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0435\u0441\u043b\u0438 \u0432\u044b&nbsp;\u0434\u043e\u0440\u043e\u0436\u0438\u0442\u0435 \u0440\u0435\u043f\u0443\u0442\u0430\u0446\u0438\u0435\u0439 \u0438&nbsp;\u0443\u0432\u0430\u0436\u0430\u0435\u0442\u0435 \u0441\u0432\u043e\u0438\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439, \u0442\u043e&nbsp;\u0432\u044b&nbsp;\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.\r\n\r\n\r\n\r\n\u0414\u043e\u043b\u044f \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u043e\u0432 \u043e\u0447\u0435\u043d\u044c \u043c\u0430\u043b\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \r\n\u0434\u043b\u044f \u043d\u0438\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043f\u043e\u0447\u0442\u0438 \u043d\u0435&nbsp;\u0432\u0435\u0434\u0443\u0442. \u041e\u0431\u044b\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0438\u043b\u0438 \u0447\u0442\u043e-\u0442\u043e \u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u043c\u0435\u0436\u0434\u0443 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043e\u043c \u0438&nbsp;\u043c\u043e\u0431\u0438\u043b\u043a\u043e\u0439 \u0441&nbsp;\u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c\u0438 \u0438&nbsp;\u0437\u0430\u0442\u0440\u0430\u0442\u0430\u043c\u0438&nbsp;\u0441\u0438\u043b.\r\n\r\n\u0410&nbsp;\u0437\u043d\u0430\u0447\u0438\u0442, \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c&nbsp;\u2014 \u043f\u0435\u0440\u0432\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u044b\u0439 \r\n\u0444\u0430\u043a\u0442\u043e\u0440 \u0432&nbsp;\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0430.Mobile-first\r\n\r\n\u0415\u0441\u0442\u044c \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u043a&nbsp;\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \r\n\u0441&nbsp;\u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438, \u0430&nbsp;\u043d\u0430 \u0435\u0451 \u043e\u0441\u043d\u043e\u0432\u0435 \u0443\u0436\u0435 \u0434\u0435\u043b\u0430\u044e\u0442 \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435. \u042d\u0442\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f mobile-first.\r\n\r\n\u0412&nbsp;Google \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438\u043d\u0434\u0435\u043a\u0441\u0430\u0446\u0438\u044f mobile-first: \u0435\u0441\u043b\u0438 \r\n\u0443 \u0441\u0430\u0439\u0442\u0430 \u043d\u0435\u0442 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438, \u0442\u043e&nbsp;\u043e\u043d&nbsp;\u043c\u043e\u0436\u0435\u0442 \u043d\u0435&nbsp;\u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c\u0441\u044f \u0432&nbsp;\u0432\u044b\u0434\u0430\u0447\u0435 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0438\u043a\u0430.\r\n\r\n\u041a\u043e\u0433\u0434\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0435\u0440\u0441\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043d\u0435&nbsp;\u043d\u0443\u0436\u043d\u044b\r\n\r\n\u0411\u044b\u0432\u0430\u044e\u0442 \u0441\u043b\u0443\u0447\u0430\u0438, \u043a\u043e\u0433\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \r\n\u043e\u0434\u043d\u043e\u0439 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0432\u0435\u0440\u0441\u0438\u0435\u0439.\r\n\r\n\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440? \u0410&nbsp;\u043a\u043e\u0433\u0434\u0430 \u0432\u044b&nbsp;\u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0435 \r\n\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u043a\u0430\u043a\u043e\u0433\u043e-\u0442\u043e \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430:\r\n\r\n- \u0430\u0434\u043c\u0438\u043d\u043a\u0443 \u0438\u043b\u0438 \u043b\u044e\u0431\u044b\u0435 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u044b \r\n\u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u0434\u043b\u044f \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0438\u043c\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0441&nbsp;\u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430;\r\n- \u0432\u0435\u0431-\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u043e\u0432 \u043e\u043f\u043b\u0430\u0442\u044b;\r\n- \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043a\u0443\u0440\u044c\u0435\u0440\u043e\u0432, \u0438\u043c&nbsp;\u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \r\n\u0442\u043e\u043b\u044c\u043a\u043e \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438. \u041e\u0447\u0435\u043d\u044c \u0441\u043e\u043c\u043d\u0435\u0432\u0430\u044e\u0441\u044c, \u0447\u0442\u043e \u043a\u0442\u043e-\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u0441\u043a\u0430\u0442\u044c \u0441&nbsp;\u0441\u043e\u0431\u043e\u0439 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440 \u0432&nbsp;\u043f\u043e\u0435\u0437\u0434\u043a\u0438 \u043f\u043e&nbsp;\u0433\u043e\u0440\u043e\u0434\u0443.\r\n \r\n\u0424\u043e\u0442\u043e: Egor Myznik \/ Unsplash\r\n\r\n\u041d\u0443, \u0432\u0440\u043e\u0434\u0435&nbsp;\u0432\u0441\u0451. \u0418\u0441\u0442\u043e\u0440\u0438\u044e \u043e\u0431\u0441\u0443\u0434\u0438\u043b\u0438, \u043d\u0430&nbsp;\u0441\u043b\u043e\u0432\u0430\u0445 \r\n\u0442\u043e\u0436\u0435 \u0432\u0440\u043e\u0434\u0435 \u0432\u0441\u0435 \u043e\u0431\u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0438, \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a&nbsp;\u0434\u0435\u043b\u0443.\r\n\r\n\u041a\u0430\u043a \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u0443\u044e\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b?\r\n\r\n\u0415\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u0438 \u0441\u0430\u0439\u0442\u0430 \r\n(\u043d\u0430&nbsp;\u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043a\u0430\u043a \u0442\u0430\u043a\u043e\u0432\u043e\u0439 \u043a\u043b\u0430\u0441\u0441\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u043d\u0435\u0442, \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043c \u0441\u0430\u043c\u0438).1. \u0424\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0432\u0451\u0440\u0441\u0442\u043a\u0430\r\n\r\n\u042d\u0442\u043e \u043f\u043e\u0434\u0445\u043e\u0434, \u043a\u043e\u0433\u0434\u0430 \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0430\u0439\u0442\u0430 \u0438\u043c\u0435\u044e\u0442 \r\n\u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443. \u0421&nbsp;\u043a\u0430\u043a\u043e\u0433\u043e&nbsp;\u0431\u044b \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u043c\u044b&nbsp;\u043d\u0438&nbsp;\u0437\u0430\u0448\u043b\u0438, \u0441\u0430\u0439\u0442 \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0435\u0441\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0435&nbsp;\u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u0441\u044f \u0432&nbsp;\u044d\u043a\u0440\u0430\u043d, \u0442\u043e&nbsp;\u043f\u043e\u044f\u0432\u044f\u0442\u0441\u044f \u043f\u043e\u043b\u043e\u0441\u044b \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438.\r\n \r\n\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435: \u041c\u0430\u0440\u0438\u044f \u0427\u0435\u0440\u043d\u043e\u0441\u043a\u0443\u043b\u043e\u0432\u0430  \r\n\r\n\u0421\u0435\u0439\u0447\u0430\u0441 \u044d\u0442\u043e \u0443\u0436\u0435 \u043f\u0435\u0440\u0435\u0436\u0438\u0442\u043e\u043a \u043f\u0440\u043e\u0448\u043b\u043e\u0433\u043e, \u043a\u043e\u0433\u0434\u0430 \r\n\u043c\u043e\u043d\u0438\u0442\u043e\u0440\u044b \u0438\u043c\u0435\u043b\u0438 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f 800\u00d7600 \u0438\u043b\u0438 1024\u00d7768.\r\n\r\n\u0417\u0430\u0434\u0430\u0451\u0442\u0441\u044f \u0431\u0430\u043d\u0430\u043b\u044c\u043d\u043e \u0432&nbsp;CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c width: \r\n500px.2. \u0420\u0435\u0437\u0438\u043d\u043e\u0432\u0430\u044f \u0432\u0451\u0440\u0441\u0442\u043a\u0430\r\n\r\n\u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430&nbsp;\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u043d\u0430&nbsp;\u0441\u0432\u043e\u0438\u0445 \r\n\u043c\u0435\u0441\u0442\u0430\u0445, \u043d\u043e&nbsp;\u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0442\u044f\u043d\u0443\u0442\u0441\u044f (\u043a\u0430\u043a \u0440\u0435\u0437\u0438\u043d\u0430) \u043b\u0438\u0431\u043e \u0441\u0436\u0438\u043c\u0430\u044e\u0442\u0441\u044f \u0432&nbsp;\u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441&nbsp;\u0448\u0438\u0440\u0438\u043d\u043e\u0439 \u044d\u043a\u0440\u0430\u043d\u0430. \u0418\u043c&nbsp;\u0437\u0430\u0434\u0430\u0451\u0442\u0441\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432&nbsp;\u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0430\u0445 width: 100%.\r\n\r\n\u0412\u0441\u0451&nbsp;\u0431\u044b \u043d\u0438\u0447\u0435\u0433\u043e, \u043d\u043e&nbsp;\u043e\u0431\u044b\u0447\u043d\u043e \u0432&nbsp;\u0438\u0442\u043e\u0433\u0435 \r\n\u043f\u0440\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u0435 \u044d\u043a\u0440\u0430\u043d\u0430 \u043c\u044b&nbsp;\u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442. \u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0435\u043a\u0440\u0443\u0442\u043e:\r\n \r\n\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435: \u041c\u0430\u0440\u0438\u044f \u0427\u0435\u0440\u043d\u043e\u0441\u043a\u0443\u043b\u043e\u0432\u0430  \r\n\r\n\u0418&nbsp;\u0432\u043e\u043e\u0431\u0449\u0435, \u0441\u0432\u0435\u0440\u0445\u0443 \u043f\u043e\u043a\u0430\u0437\u0430\u043d \u043c\u0430\u043b\u043e\u0432\u0435\u0440\u043e\u044f\u0442\u043d\u044b\u0439 \r\n\u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442. \u041e\u0431\u044b\u0447\u043d\u043e \u0432&nbsp;\u0438\u0442\u043e\u0433\u0435 \u043c\u044b&nbsp;\u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c&nbsp;\u044d\u0442\u043e. \u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435\u043a\u0440\u0443\u0442\u043e. \u041d\u0430\u043c \u043d\u0435&nbsp;\u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442:\r\n \r\n\u0422\u0435\u043a\u0441\u0442 \u0431\u0430\u043d\u0430\u043b\u044c\u043d\u043e \u043d\u0435&nbsp;\u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0432&nbsp;\u0431\u043b\u043e\u043a \u0438&nbsp;\u0432\u044b\u043b\u0435\u0437\u0430\u0435\u0442 \u0437\u0430&nbsp;\u0435\u0433\u043e \u043f\u0440\u0435\u0434\u0435\u043b\u044b\r\n\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435: \u041c\u0430\u0440\u0438\u044f \u0427\u0435\u0440\u043d\u043e\u0441\u043a\u0443\u043b\u043e\u0432\u0430 \r\n \r\n\r\n\u042d\u0442\u043e \u0442\u043e\u0436\u0435 \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0435\u0439\u0447\u0430\u0441 \r\n\u043d\u0435&nbsp;\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432&nbsp;\u0447\u0438\u0441\u0442\u043e\u043c \u0432\u0438\u0434\u0435, \u043d\u043e&nbsp;\u0437\u043d\u0430\u0442\u044c \u043e&nbsp;\u043d\u0451\u043c \u043d\u0443\u0436\u043d\u043e.3. \u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0430\u044f \u0432\u0451\u0440\u0441\u0442\u043a\u0430\r\n \r\n\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435: \u041c\u0430\u0440\u0438\u044f \u0427\u0435\u0440\u043d\u043e\u0441\u043a\u0443\u043b\u043e\u0432\u0430  \r\n\r\n\u0412&nbsp;\u043e\u0441\u043d\u043e\u0432\u0435&nbsp;\u2014 \u043c\u0435\u0434\u0438\u0430\u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0435 \r\n\u0432&nbsp;CSS.\r\n\r\n\u041c\u0435\u0442\u043e\u0434 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436 \u043d\u0430&nbsp;\u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u0443\u044e \u0432\u0451\u0440\u0441\u0442\u043a\u0443 \r\n(\u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0434\u0430\u043b\u0435\u0435). \u0421\u0443\u0442\u044c \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432&nbsp;\u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u044b&nbsp;\u0440\u0430\u0441\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u00ab\u0431\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442\u044b\u00bb&nbsp;\u2014 \u0442\u043e\u0447\u043a\u0438, \u0440\u0430\u0432\u043d\u044b\u0435 \u0448\u0438\u0440\u0438\u043d\u0435 \u044d\u043a\u0440\u0430\u043d\u0430 (\u043e\u043a\u043d\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430). \u041f\u0440\u043e\u0445\u043e\u0434\u044f \u0447\u0435\u0440\u0435\u0437 \u043d\u0438\u0445, \u043d\u0430\u0448 \u0441\u0430\u0439\u0442 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c\u0441\u044f.\r\n\r\n\u0428\u0438\u0440\u0438\u043d\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0437\u0430\u0434\u0430\u0451\u043c \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e.\r\n\r\n\u0415\u0441\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u044b\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u0442\u043e&nbsp;\u043d\u0430\u0448\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \r\n\u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442\u0441\u044f (\u043a\u0430\u043a&nbsp;\u0431\u044b \u043f\u0440\u044b\u0433\u0430\u0435\u0442), \u043a\u043e\u0433\u0434\u0430 \u043c\u044b&nbsp;\u043f\u0440\u0435\u043e\u0434\u043e\u043b\u0435\u0432\u0430\u0435\u043c \u044d\u0442\u0438 \u0442\u043e\u0447\u043a\u0438, \u043f\u0435\u0440\u0435\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043d\u0430&nbsp;\u043d\u043e\u0432\u044b\u0439 \u043b\u0430\u0434, \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u0432&nbsp;CSS. \u0412&nbsp;\u0438\u0442\u043e\u0433\u0435 \u043c\u044b&nbsp;\u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043d\u0430\u0431\u043e\u0440 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043c\u0430\u043a\u0435\u0442\u043e\u0432 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043a\u0430.\r\n\r\n\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043f\u0440\u044f\u0447\u0435\u0442\u0441\u044f \u0437\u0430&nbsp;\u0441\u043b\u043e\u0432\u043e\u043c \r\n\u00ab\u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439\u00bb. \u041c\u044b&nbsp;\u043d\u0435&nbsp;\u043c\u043e\u0436\u0435\u043c \u043f\u0440\u0435\u0434\u0443\u0433\u0430\u0434\u0430\u0442\u044c, \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430&nbsp;\u0432\u0441\u0435\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445. \u041c\u043e\u0433\u0443\u0442 \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043b\u0438\u0448\u043d\u0438\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e&nbsp;\u0431\u043e\u043a\u0430\u043c), \u043a\u0430\u043a \u043d\u0430&nbsp;\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u0432\u044b\u0448\u0435 [ https:\/\/docs.google.com\/document\/d\/1532oicyjcxLzutnIRdNqyRW_cf0bWb9m9uehCnWbBoY\/edit#bookmark=id.19bs40owv93k ] .\r\n\r\n\u041a\u0430\u043a \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0443\u044e \u0432\u0451\u0440\u0441\u0442\u043a\u0443?\r\n\r\n\u041e\u0431\u044b\u0447\u043d\u043e \u043c\u044b&nbsp;\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 (\u044d\u0442\u043e \r\n\u043f\u0440\u0438\u043c\u0435\u0440\u043d\u044b\u0435 \u0446\u0438\u0444\u0440\u044b, \u044f&nbsp;\u0440\u0435\u0448\u0438\u043b \u0438\u0445&nbsp;\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438. \u0412&nbsp;\u043b\u044e\u0431\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u043d\u0438 \u043f\u043e\u0434\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u043f\u043e\u0434 \u0432\u0430\u0448\u0443 \u0437\u0430\u0434\u0430\u0447\u0443, \u0430&nbsp;\u043d\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0442 \u0441&nbsp;\u043d\u0435\u0431\u0430):\r\n \r\n\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435: \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043e \u041e\u043b\u0435\u0433\u043e\u043c \u0420\u044f\u0437\u0430\u043d\u0446\u0435\u0432\u044b\u043c\r\n\r\n\u0417\u0430\u0434\u0430\u0451\u043c \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \r\n(CSS code, \u0435\u0441\u043b\u0438 \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0437\u0432\u0430\u0442\u044c \u0441\u043b\u043e\u0432\u043e\u043c code ?):\r\n \r\n\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435: \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043e \u041e\u043b\u0435\u0433\u043e\u043c \u0420\u044f\u0437\u0430\u043d\u0446\u0435\u0432\u044b\u043c\r\n\r\n\u0414\u0430\u043d\u043d\u043e\u0439 \u0437\u0430\u043f\u0438\u0441\u044c\u044e \u043c\u044b&nbsp;\u0433\u043e\u0432\u043e\u0440\u0438\u043c, \u0447\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \r\nwidth: 600px \u0434\u043b\u044f \u043a\u043b\u0430\u0441\u0441\u0430 .myClass \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u0441\u044f, \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u0448\u0438\u0440\u0438\u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044c\u0448\u0435 \u0438\u043b\u0438 \u0440\u0430\u0432\u043d\u0430 768 px. \u0412\u043e&nbsp;\u0432\u0441\u0435\u0445 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0432\u043d\u0430 900 px.\r\n\r\n\u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442:\r\n \r\n\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435: \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043e \u041e\u043b\u0435\u0433\u043e\u043c \u0420\u044f\u0437\u0430\u043d\u0446\u0435\u0432\u044b\u043c\r\n\r\n\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e width: 900px \u0434\u043b\u044f \u043a\u043b\u0430\u0441\u0441\u0430 .myOtherClass \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u0441\u044f, \r\n\u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u0448\u0438\u0440\u0438\u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 \u0438\u043b\u0438 \u0440\u0430\u0432\u043d\u0430 1024 px.\r\n\r\n\u0412\u0430\u0436\u043d\u043e \u043d\u0435&nbsp;\u043f\u0435\u0440\u0435\u043f\u0443\u0442\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u0438\u043b\u0438 \u043c\u0435\u043d\u044c\u0448\u0435, \r\n\u043d\u043e&nbsp;\u043e\u0431\u0435\u0449\u0430\u044e, \u0447\u0442\u043e \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u044d\u0442\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043d\u0435&nbsp;\u0440\u0430\u0437, \u0442\u0430\u043a\u043e\u0432 \u043f\u0443\u0442\u044c ?\r\n\r\n\u0412\u044b&nbsp;\u043c\u043e\u0436\u0435\u0442\u0435 \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0443\u0441\u043b\u043e\u0432\u0438\u044f, \u0430&nbsp;\u0435\u0449\u0451 \r\n\u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u0438&nbsp;\u0438\u0437\u0443\u0447\u0438\u0442\u044c \u0442\u0435\u043c\u0443 \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e.\r\n\r\n\u041e\u0442\u043c\u0435\u0447\u0443: \u044d\u0442\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043d\u0435&nbsp;\u0442\u043e\u043b\u044c\u043a\u043e \r\n\u043a&nbsp;\u0448\u0438\u0440\u0438\u043d\u0435 \u044d\u043a\u0440\u0430\u043d\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430, \u043d\u043e&nbsp;\u0438&nbsp;\u043a&nbsp;\u0448\u0438\u0440\u0438\u043d\u0435 \u043e\u043a\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0447\u0442\u043e \u0432\u043f\u043e\u043b\u043d\u0435 \u043b\u043e\u0433\u0438\u0447\u043d\u043e.\r\n\r\n\u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u043b\u044e\u0431\u043e\u0439 \u0441\u0430\u0439\u0442 \u0432&nbsp;\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 (\u043f\u043e\u0447\u0442\u0438 \r\n\u043b\u044e\u0431\u043e\u0439, \u043f\u043e\u0447\u0435\u043c\u0443 \u00ab\u043f\u043e\u0447\u0442\u0438\u00bb, \u0443\u0437\u043d\u0430\u0435\u043c \u0434\u0430\u043b\u044c\u0448\u0435 [ https:\/\/docs.google.com\/document\/d\/1532oicyjcxLzutnIRdNqyRW_cf0bWb9m9uehCnWbBoY\/edit#bookmark=id.ogrdpcbtqyo3 ] ), \u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u043e&nbsp;\u2014 \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u0439 \u043b\u0435\u043d\u0434\u0438\u043d\u0433. \u0417\u0430\u0445\u0432\u0430\u0442\u0438\u0442\u0435 \u043b\u0435\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u043c\u044b\u0448\u0438 \u043f\u0440\u0430\u0432\u044b\u0439 \u0438\u043b\u0438 \u043b\u0435\u0432\u044b\u0439 \u043a\u0440\u0430\u0439 \u043e\u043a\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438&nbsp;\u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c \u0438\u043b\u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u043e\u043a\u043d\u0430. \u0412\u044b&nbsp;\u0432&nbsp;\u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0443\u0432\u0438\u0434\u0438\u0442\u0435, \u043a\u0430\u043a \u0441\u0430\u0439\u0442 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e&nbsp;\u0431\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442\u0430\u043c.\r\n\r\n\u041f\u043e\u0438\u0433\u0440\u0430\u043b\u0438? \u0422\u043e\u0433\u0434\u0430 \u0438\u0434\u0451\u043c \u0434\u0430\u043b\u044c\u0448\u0435.\r\n\r\n\u0418, \u043d\u0430\u043a\u043e\u043d\u0435\u0446, \u043f\u043e\u0431\u0435\u0434\u0438\u0442\u0435\u043b\u044c \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0435\u0439 \u043d\u043e\u043c\u0438\u043d\u0430\u0446\u0438\u0438.\r\n\r\n4. \u041e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u0430\u044f \u0432\u0451\u0440\u0441\u0442\u043a\u0430\r\n \r\n\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435: \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043e \u041e\u043b\u0435\u0433\u043e\u043c \u0420\u044f\u0437\u0430\u043d\u0446\u0435\u0432\u044b\u043c\r\n\r\n\u0415\u0441\u043b\u0438 \u0441\u043e\u0432\u0441\u0435\u043c \u0432&nbsp;\u0434\u0432\u0443\u0445 \u0441\u043b\u043e\u0432\u0430\u0445, \u0442\u043e&nbsp;\u044d\u0442\u043e \u0440\u0435\u0437\u0438\u043d\u043e\u0432\u0430\u044f \r\n+ \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0430\u044f \u0432\u0451\u0440\u0441\u0442\u043a\u0430.\r\n\r\n\u041c\u044b&nbsp;\u0437\u0430\u0434\u0430\u0451\u043c \u043c\u0435\u0434\u0438\u0430\u0437\u0430\u043f\u0440\u043e\u0441\u044b + \u0448\u0438\u0440\u0438\u043d\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \r\n\u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0432 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0435\u0434\u0438\u043d\u0438\u0446\u0430\u0445, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u043a\u043e\u043c\u0444\u043e\u0440\u0442\u043d\u043e \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u0438&nbsp;\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u043b\u0438\u0441\u044c \u043d\u0430&nbsp;\u0448\u0438\u0440\u0438\u043d\u0443 \u044d\u043a\u0440\u0430\u043d\u0430, \u043e\u043a\u043d\u0430 \u0438\u043b\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430&nbsp;\u2014 \u0432&nbsp;\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442&nbsp;\u0442\u043e\u0433\u043e, \u043a\u0443\u0434\u0430 \u043f\u043e\u043c\u0435\u0449\u0451\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442.\r\n\r\n\u0427\u0442\u043e-\u0442\u043e \u0442\u0438\u043f\u0430 \u0442\u0430\u043a\u043e\u0433\u043e:\r\n \r\n\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435: \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043e \u041e\u043b\u0435\u0433\u043e\u043c \u0420\u044f\u0437\u0430\u043d\u0446\u0435\u0432\u044b\u043c\r\n\r\n\u0412&nbsp;\u0438\u0442\u043e\u0433\u0435, \u043f\u043e\u043f\u0430\u0434\u0430\u044f \u043d\u0430&nbsp;\u0433\u0440\u0430\u043d\u0438\u0446\u0443 \u0440\u0430\u0441\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \r\n\u043d\u0430\u043c\u0438 \u0431\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442\u043e\u0432, \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043d\u0435&nbsp;\u043f\u0440\u044b\u0433\u0430\u0435\u0442, \u0430&nbsp;\u043f\u043b\u0430\u0432\u043d\u043e \u0438&nbsp;\u043b\u0430\u043a\u043e\u043d\u0438\u0447\u043d\u043e \u043f\u0435\u0440\u0435\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0438&nbsp;\u0430\u0434\u0430\u043f\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043a&nbsp;\u0448\u0438\u0440\u0438\u043d\u0435 \u044d\u043a\u0440\u0430\u043d\u0430 \u0438\u043b\u0438 \u043e\u043a\u043d\u0430. \u042d\u0442\u043e \u0441\u0430\u043c\u044b\u0439 \u0443\u0434\u0430\u0447\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u0438\u0437&nbsp;\u0432\u0441\u0435\u0445 \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u0432\u044b\u0448\u0435.\r\n\r\n5. \u0412\u0430\u0448 \u043c\u0435\u0442\u043e\u0434\r\n\r\n\u0414\u0430, \u0444\u0438\u0448\u043a\u0430 \u0432&nbsp;\u0442\u043e\u043c, \u0447\u0442\u043e \u0432\u0441\u0435 \u043c\u0435\u0442\u043e\u0434\u044b, \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \r\n\u0432\u044b\u0448\u0435,&nbsp;\u2014 \u044d\u0442\u043e \u0447\u0438\u0441\u0442\u043e \u0443\u0441\u043b\u043e\u0432\u043d\u043e\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435. \u0412\u044b&nbsp;\u043c\u043e\u0436\u0435\u0442\u0435 \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445&nbsp;\u043f\u043e\u0434 \u0432\u0430\u0448\u0438 \u043d\u0443\u0436\u0434\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442\u044b (\u044d\u0442\u043e \u0431\u0430\u0437\u0430), \u0430&nbsp;\u0448\u0438\u0440\u0438\u043d\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0442\u0430\u043a, \u043a\u0430\u043a \u0432\u0430\u043c \u043d\u0430\u0434\u043e \u2014 \u043b\u0438\u0431\u043e \u00ab\u0442\u044f\u043d\u0443\u0449\u0443\u044e\u0441\u044f\u00bb, \u043b\u0438\u0431\u043e \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e. \u0412\u0441\u0451 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442&nbsp;\u0432\u0430\u0448\u0438\u0445 \u0437\u0430\u0434\u0430\u0447, \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439 \u043d\u0435\u0442, \u043f\u043e\u043c\u043d\u0438\u0442\u0435&nbsp;\u044d\u0442\u043e.\r\n \r\n\u0424\u043e\u0442\u043e: Ljupco Smokovski \/ Shutterstock\r\n\r\n\u0417\u0430\u0447\u0435\u043c \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u0443\u044e \u0438&nbsp;\u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u0438 \r\n\u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\r\n\r\n\u0412\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u043d\u0435\u043f\u043b\u043e\u0445 \u0434\u043b\u044f \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \r\n\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043d\u043e&nbsp;\u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435, \u0447\u0442\u043e \u0443&nbsp;\u0432\u0430\u0441 \u0431\u043e\u043b\u044c\u0448\u043e\u0435.\r\n\r\n\u041a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u0437\u0430\u0445\u043e\u0434\u044f \u043d\u0430&nbsp;\u0441\u0430\u0439\u0442, \u0432\u044b&nbsp;\u0431\u0443\u0434\u0435\u0442\u0435 \r\n\u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u0438&nbsp;\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432. \u0415\u0441\u043b\u0438 \u043c\u044b&nbsp;\u0437\u0430\u0445\u043e\u0434\u0438\u043c \u043d\u0430&nbsp;\u0441\u0430\u0439\u0442 \u0441&nbsp;\u043c\u043e\u0431\u0438\u043b\u043a\u0438, \u0442\u043e&nbsp;\u0437\u0430\u0447\u0435\u043c \u043d\u0430\u043c \u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0432\u0441\u0435 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0430? \u042d\u0442\u043e \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435\u043b\u043e\u0433\u0438\u0447\u043d\u043e, \u044d\u0442\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u0442\u0440\u0430\u0444\u0438\u043a \u0438&nbsp;\u0432\u0440\u0435\u043c\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438&nbsp;\u2014 \u0438&nbsp;\u044d\u0442\u043e \u043d\u0435&nbsp;\u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u0430\u044f \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430.\r\n\r\n\u0427\u0430\u0441\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u044e\u0442 \u0441\u0431\u043e\u0440\u043a\u0438 \r\n\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430&nbsp;\u043c\u043e\u0431\u0438\u043b\u044c\u043d\u0443\u044e \u0438&nbsp;\u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u0438, \u0438&nbsp;\u043a\u043e\u0433\u0434\u0430 \u0432\u044b&nbsp;\u0437\u0430\u0445\u043e\u0434\u0438\u0442\u0435 \u0441&nbsp;\u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430, \u0432\u044b&nbsp;\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0435 \u0438\u043c\u0435\u043d\u043d\u043e \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u0442\u0438\u043b\u0438 \u0438&nbsp;\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u043e\u043a. \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u0442\u0440\u0430\u0444\u0438\u043a.\r\n\r\n\u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u044e\u0442 \r\n\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0437\u0430\u0439\u0442\u0438 \u043d\u0430&nbsp;vk.com  &nbsp;\u0438\u043b\u0438 youtube.com  &nbsp;\u0441&nbsp;\u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430, \u0438&nbsp;\u0432\u044b&nbsp;\u0443\u0432\u0438\u0434\u0438\u0442\u0435, \u0447\u0442\u043e URL \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 m.vk.com \u0438 m.youtube.com. \u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043b\u0438 \u043d\u0430&nbsp;\u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u043e\u0434\u0434\u043e\u043c\u0435\u043d\u044b \u2014 \u0442\u043e\u0447\u043d\u0435\u0435, \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043b\u0438&nbsp;\u0438\u0445!\r\n\r\n\u0412&nbsp;\u044d\u0442\u043e\u043c \u0435\u0441\u0442\u044c \u0438&nbsp;\u043c\u0438\u043d\u0443\u0441\u044b \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \r\n\u0442\u0430\u043a \u043a\u0430\u043a \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0434\u0432\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.\r\n\r\n\u041d\u043e&nbsp;\u043c\u043e\u0436\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \r\n\u043c\u0435\u0442\u043e\u0434, \u0438&nbsp;\u0441&nbsp;\u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0438&nbsp;\u0449\u0435\u043f\u043e\u0442\u043a\u0438 \u043c\u0430\u0433\u0438\u0438 \u0432\u0430\u0448\u0430 \u0441\u0431\u043e\u0440\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0442\u0438\u043f\u043e\u0432 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432, \u043d\u043e&nbsp;\u044d\u0442\u043e \u0443\u0436\u0435 \u0442\u0435\u043c\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u0431\u0435\u0441\u0435\u0434\u044b.\r\n\r\n\r\n\r\n\u0423&nbsp;\u0432\u0430\u0441 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u044f\u0432\u0438\u0442\u044c\u0441\u044f \u0432\u043e\u043f\u0440\u043e\u0441: \u00ab\u0410\u0432\u0442\u043e\u0440 \r\n\u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b \u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 (\u201e\u0440\u0435\u0437\u0438\u043d\u043e\u0432\u044b\u0435\u201c) \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f, \u043d\u043e&nbsp;\u043d\u0438\u0447\u0435\u0433\u043e \u043e&nbsp;\u043d\u0438\u0445 \u043d\u0435&nbsp;\u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u043b!\u00bb\r\n\r\n\u0418&nbsp;\u0432\u044b&nbsp;\u043f\u0440\u0430\u0432\u044b, \u043e\u0441\u0442\u0430\u0432\u0438\u043c \u044d\u0442\u043e \u043d\u0430&nbsp;\u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \r\n\u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0441\u0430\u043c\u044b\u0439 \u0432\u0430\u0436\u043d\u044b\u0439 \u043d\u0430\u0432\u044b\u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430&nbsp;\u2014 \u0438\u0441\u043a\u0430\u0442\u044c \u0438&nbsp;\u0438\u0437\u0443\u0447\u0430\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0441\u0430\u043c\u043e\u043c\u0443.\r\n\r\n \r\n\r\n  \r\n\r\n\r\n\u0411\u043e\u043b\u044c\u0448\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0433\u043e \u043f\u0440\u043e \u0434\u0438\u0437\u0430\u0439\u043d \u0432&nbsp;\u043d\u0430\u0448\u0435\u043c \r\n\u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c-\u043a\u0430\u043d\u0430\u043b\u0435  . \u041f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0439\u0442\u0435\u0441\u044c!\r\n\r\n\r\n\r\n\u0427\u0438\u0442\u0430\u0439\u0442\u0435 \u0442\u0430\u043a\u0436\u0435:\r\n\r\n- \u0427\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439? \u041e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u044b\u043c\u0438 \r\n\u0441\u043b\u043e\u0432\u0430\u043c\u0438  \r\n- \u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0444\u0440\u0435\u0439\u043c \u043f\u0440\u043e\u0441\u0442\u044b\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438 \r\n \r\n- \u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u043c\u043e\u0434\u0443\u043b\u044c \u043f\u0440\u043e\u0441\u0442\u044b\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438 \r\n \r\n\r\n\r\n\r\n\r\n\u0423\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430&nbsp;\u044d\u043a\u0440\u0430\u043d\u0435.\r\n\r\n\r\n\r\n\r\n\u0421\u043d\u0430\u0447\u0430\u043b\u0430.\r\n\r\n\r\n\r\n\r\n\u0421\u043d\u0430\u0447\u0430\u043b\u0430&nbsp;\u2014 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043a\u043e\u0441\u0442\u044f\u043a \u0438&nbsp;\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430.","author":{"@type":"Person","name":"\u0420\u0435\u0434\u0430\u043a\u0446\u0438\u044f \u00ab\u0414\u0438\u0437\u0430\u0439\u043d\u00bb Skillbox\u00a0Media","url":"https:\/\/skillbox.ru\/media\/authors\/design-skillbox-media\/"},"publisher":{"@type":"Organization","name":"Skillbox","logo":{"@type":"ImageObject","url":"https:\/\/skillbox.ru\/static\/images\/skillbox.png"}},"mainEntityOfPage":{"@type":"WebPage","url":"https:\/\/skillbox.ru\/media\/design\/adaptive-prostymi-slovami\/"},"datePublished":"2023-03-21T07:30:00Z","dateModified":"2023-03-29T16:07:30Z","image":{"@type":"ImageObject","url":["https:\/\/248006.selcdn.ru\/main\/iblock\/db1\/db1a7e1a4d4b14e0192d30c389934f6d\/828391047da8121ac35ae273f65dc942.jpg"]},"description":"\u0417\u0430\u0445\u043e\u0434\u044f\u0442 \u043a\u0430\u043a-\u0442\u043e \u0432&nbsp;\u0431\u0430\u0440 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440 \u0438&nbsp;\u0430\u0439\u0442\u0438\u0448\u043d\u0438\u043a, \u0430&nbsp;\u0434\u0436\u0443\u043d \u0438\u0445&nbsp;\u0441\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442: \u00ab\u0418&nbsp;\u043a\u0430\u043a \u044d\u0442\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c?\u00bb"}
</script><script data-skip-moving="true" id="FiMjZmipVK5U4ODg">if (window.relap) window.relap.ar('FiMjZmipVK5U4ODg');</script>    </div>
    <script>
    window.Section_id = 8;
</script>

    </div>
    </main>
    <footer class="without-buttons">
        <div class="footer__wrapper container">
            <div class="footer__firstgroup">
                <section class="footer__contactbox">
                    <address class="footer__contacts">
                        <p class="footer__contacts-block">
                            <a class="footer__phone link" href="tel:+74951540915">8 (800) 500-05-22</a>
                            <span class="footer__phone-caption">Контактный центр</span>
                        </p>
                        <p class="footer__contacts-block">
                            <a class="footer__phone link" href="tel:+74952915987">+7(495) 291-59-87</a>
                            <span class="footer__phone-caption">Отдел заботы о пользователях</span>
                        </p>
                        <p class="footer__address"> Москва, Ленинский проспект, дом&nbsp;6, строение&nbsp;20</p>
                    </address>
                    <ul class="social-contacts footer__social">
                        <li>
                            <a class="social-contacts__item" href="https://vk.com/skillbox_education"
                               aria-label="Вконтакте">
                                <img src="/static/images/footer/soc_vk.svg"/>
                            </a>
                        </li>
                        <li>
                            <a class="social-contacts__item"
                               href="https://www.youtube.com/channel/UC2FJq-Rr7v4SlKAoM7x0ZhA" aria-label="YouTube">
                                <img src="/static/images/footer/soc_tube.svg"/>
                            </a>
                        </li>
                        <li>
                            <a class="social-contacts__item" href="tg://resolve?domain=skillboxru"
                               aria-label="Telegram">
                                <img src="/static/images/footer/soc_tg.svg"/>
                            </a>
                        </li>
                    </ul>
                    <div class="footer__age-limit">
                        16+
                    </div>
                </section>
                <section class="footer__rewardbox">
                    <ul class="rewards footer__rewards">
                        <li>
                            <span class="rewards__item">
                                <img src="/static/images/footer/footer_runet.svg" alt=""/>
                                <span>Премии Рунета</span>
                                <span>2018, 2019, 2020</span>
                            </span>
                        </li>
                    </ul>
                </section>
            </div>
            <section class="footer__linksbox">
                <ul class="links__list links__list--courses">
                    <li class="links__item links__item--header">Все направления</li>
                    <li class="links__item"><a href="/code/?utm_source=media&utm_medium=button&utm_campaign=footerlink_code&utm_term=footer">Программирование</a></li>
                    <li class="links__item"><a href="/design/?utm_source=media&utm_medium=button&utm_campaign=footerlink_design&utm_term=footer">Дизайн</a></li>
                    <li class="links__item"><a href="/marketing/?utm_source=media&utm_medium=button&utm_campaign=footerlink_marketing&utm_term=footer">Маркетинг</a></li>
                    <li class="links__item"><a href="/management/?utm_source=media&utm_medium=button&utm_campaign=footerlink_management&utm_term=footer">Управление</a></li>
                    <li class="links__item"><a href="/games/?utm_source=media&utm_medium=button&utm_campaign=footerlink_gamedev&utm_term=footer">Игры</a></li>
                    <li class="links__item"><a href="/multimedia/?utm_source=media&utm_medium=button&utm_campaign=footerlink_multimedia&utm_term=footer">Мультимедиа</a></li>
                    <li class="links__item"><a href="/psychology/?utm_source=media&utm_medium=button&utm_campaign=footerlink_psychology&utm_term=footer">Психология</a></li>
                    <li class="links__item"><a href="/general-development/?utm_source=media&utm_medium=button&utm_campaign=footerlink_general-development&utm_term=footer">Общее развитие</a></li>
                    <li class="links__item"><a href="/engineering/?utm_source=media&utm_medium=button&utm_campaign=footerlink_engineering&utm_term=footer">Инженерия</a></li>
                    <li class="links__item"><a href="/english/?utm_source=media&utm_medium=button&utm_campaign=footerlink_english&utm_term=footer">Английский язык</a></li>
                    <li class="links__item"><a href="/other/?utm_source=media&utm_medium=button&utm_campaign=footerlink_other&utm_term=footer">Другое</a></li>
                </ul>

                <ul class="links__list links__list--about">
                    <li class="links__item links__item--header">О Skillbox</li>
                    <li class="links__item"><a href="/company/?utm_source=media&utm_medium=button&utm_campaign=footerlink_aboutskillbox&utm_term=footer">О Платформе</a></li>
                    <li class="links__item"><a href="/career/?utm_source=media&utm_medium=button&utm_campaign=footerlink_careercentr&utm_term=footer"> Центр карьеры</a></li>
                    <li class="links__item"><a href="/otzyvy/?utm_source=media&utm_medium=button&utm_campaign=footerlink_testimonials&utm_term=footer">Отзывы</a></li>
                    <li class="links__item"><a href="/contacts/?utm_source=media&utm_medium=button&utm_campaign=footerlink_skillboxcontacts&utm_term=footer">Контакты</a></li>
                    <li class="links__item"><a href="/jobs/?utm_source=media&utm_medium=button&utm_campaign=footerlink_jobs&utm_term=footer">Вакансии</a></li>
                    <li class="links__item"><a href="/teachers/?utm_source=media&utm_medium=button&utm_campaign=footerlink_school&utm_term=footer">Школа кураторов</a></li>
                    <li class="links__item"><a href="/sale/free/?utm_source=media&utm_medium=button&utm_campaign=footerlink_free&utm_term=footer">Бесплатно</a></li>
                    <li class="links__item"><a href="/media/topic/tests/?utm_source=media&utm_medium=button&utm_campaign=footerlink_tests&utm_term=footer">Онлайн-тесты</a></li>
                </ul>
                <ul class="links__list links__list--webinar">
                    <li class="links__item links__item--header">Вебинары</li>
                    <li class="links__item"><a href="https://live.skillbox.ru/?utm_source=media&utm_medium=button&utm_campaign=footerlink_webinars&utm_term=footer" target="_blank" rel="noopener">Все вебинары</a></li>
                    <li class="links__item"><a href="https://live.skillbox.ru/playlists/?utm_source=media&utm_medium=button&utm_campaign=footerlink_playlists&utm_term=footer" target="_blank" rel="noopener">Плейлисты</a></li>
                    <li class="links__item"><a href="https://live.skillbox.ru/calendar/?utm_source=media&utm_medium=button&utm_campaign=footerlink_schedule&utm_term=footer" target="_blank" rel="noopener">Расписание</a></li>
                </ul>
                <ul class="links__list links__list--last">
                    <li class="links__item links__journal"><a href="/media/" target="_blank" rel="noopener">Медиа</a></li>
                    <li class="links__item"><a href="https://partners.skillbox.ru/?utm_source=media&utm_medium=button&utm_campaign=footerlink_partners&utm_term=footer" target="_blank" rel="noopener">Партнерская программа</a></li>
                    <li class="links__item"><a href="https://b2b.skillbox.ru/?utm_source=media&utm_medium=button&utm_campaign=footerlink_b2b&utm_term=footer" target="_blank" rel="noopener">Корпоративным клиентам</a></li>
                    <li class="links__item"><a href="https://career.skillbox.ru/?utm_source=media&utm_medium=button&utm_campaign=footerlink_employees&utm_term=footer" target="_blank" rel="noopener">Для работодателей</a></li>
                </ul>
            </section>
        </div>
        <div class="footer__underline container">
            <span class="footer__copy">
                &copy; Skillbox, 2026            </span>
            <div>
                <span class="footer__oferta">
                    <a href="/oferta.pdf" target="_blank">Договор оферты</a>
                </span>
                <span class="footer__payment">
                    <a href="/payments/" target="_blank">Оплата</a>
                </span>
                <span class="footer__use-policy">
                    <a href="/terms_of_use.pdf" target="_blank">Правила пользования Платформой</a>
                    <a href="/privacy_policy.pdf" target="_blank">Политика конфиденциальности</a>
                </span>
            </div>
        </div>
    </footer>

    



    <div class="cookies">
        <p class="cookies__desc">
            Пользуясь нашим сайтом, вы&nbsp;соглашаетесь с&nbsp;тем, что
            <a href="https://skillbox.ru/privacy_policy.pdf" target="_blank" rel="noopener"
               type="application/pdf">мы&nbsp;используем cookies</a>&nbsp;🍪
        </p>
        <button type="button" class="cookies__button">
            Окей
        </button>
    </div>
<div class="subscribe-popup subscribe">
    <div class="subscribe-popup__spacer-mobile"></div>
   <div class="subscribe-popup__row-content ">
        <button class="subscribe__close"></button>
        <div class="subscribe__content">
            <div data-subscribe-popup-success class="hidden">
                <h2 class="subscribe__header-success">Спасибо за подписку! Забирайте 5 бесплатных курсов:</h2>
                <ul class="subscribe__list-block">
                    <li>Найти себя в IT за 5 дней</li>
                    <li>Как найти себя в дизайне в 2025 году</li>
                    <li>Интерьеры, мебель, ландшафт и декорирование</li>
                    <li>Интернет-маркетинг на практике</li>
                    <li>Бизнес-аналитик, продакт- и проджект-менеджер</li>
                </ul>
                <div class="subscribe__btns-el">
                    <a
                        target="_blank"
                        href="https://refer.id/?bot=skillbox_main_bot&platform=telegram&verbose_name=Skillbox&bot_avatar=https://designer.ftrcdn.com/uploads/bot_avatars/medium_54ab1ce8c393eb3df1474846ce0a0e2c.png&n=137050&c=9209&bc_number=890&?utm_source=media&utm_medium=&utm_campaign=all_all_media_banners_invite_sbornik-890_all_bot_skillbox"
                        class="subscribe__el-btn">Получить доступ</a>
                </div>
            </div>
            <div data-subscribe-popup-content>
                <h2 class="subscribe__header">У&nbsp;нас есть классные рассылки!</h2>
                <form action="/media/design/adaptive-prostymi-slovami/" class="newsletter-form page-subscription__form3" data-type="popup">
                    <input type="hidden" name="action" value="subscribe">
                    <div class="subscribe__checkboxes"></div>
                    <div class="subscribe__email email_popup">
                        <input class="subscribe-form__input" type="text" name="email" placeholder="Email" >
                        <span class="subscribe-form__label-name">Электронная почта</span>
                        <button type="submit" class="popup-btn-click">Подписаться</button>
                        <span class="email__error">Поле необходимо заполнить</span>
                    </div>
                    <div class="subscribe-popup__checkbox-end">
                        <div class="subscribe-popup__checkbox-item" data-checkbox-personal-data>
                            <div class="subscribe__checkbox">
                                <input type="checkbox" name="agreements[PERS]" id="isCheckTrue" value="1" data-checkbox-personal-data-input>
                                <label for="isCheckTrue"><span>Я согласен на <a target="_blank" href="https://skillbox.ru/legal-docs/chou/file/privacy_policy/version-290425.pdf">обработку персональных данных</a></span></label>
                            </div>
                            <span class="email__error">Нужно ваше согласие</span>
                        </div>
                        <div class="subscribe__bottom">
                            <span>Нажимая на кнопку, я соглашаюсь с <a target="_blank" href="https://skillbox.ru/legal-docs/skillbox/file/terms_of_use/version-300824.pdf">правилами пользования Платформой</a></span>
                        </div>
                        <div class="subscribe-popup__checkbox-item" data-checkbox-personal-data-two>
                            <div class="subscribe__checkbox subscribe__checkbox--end" >
                                <input type="checkbox" name="agreements[ADS]" id="isAdsCalls" value="1" checked="" data-checkbox-personal-data-input-two>
                                <label for="isAdsCalls">Я согласен <a target="_blank" href="https://skillbox.ru/legal-docs/chou/file/soglasie-na-poluchenie-reklamy.pdf">получать рекламу и звонки</a></label>
                            </div>
                            <span class="email__error">Нужно ваше согласие</span>
                        </div>
                    </div>
                </form>
            </div>
        </div>
   </div>
    <!-- src="/static/images/articles/subscribe-popup-img.png" -->
</div>
<div class="bg-modal-overlay bg-modal-overlay--transparent"></div>

<script data-skip-moving="true" id="popup__data--formatted">
    $(".popup-btn-click").on("click" , function (){
        var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
        let input = $(this).closest(".subscribe__email").find(".subscribe-form__input");
        let inputValue = input.val();
        if(emailPattern.test(inputValue)) {
            (window["rrApiOnReady"] = window["rrApiOnReady"] || []).push(function() { rrApi.setEmail(inputValue);});
        }
    });
    /*
    window.popupData = {
        "8": {
            header: 'У нас есть классные рассылки про дизайн!!!',
            category: 'Дизайн',
            checkboxes: [
                'Лучшие  статьи про Дизайн',
                '«Типографика без боли»'
            ]
        },
        "10": {
            header: 'У нас есть классные рассылки про код',
            category: 'Код',
            checkboxes: [
                'Лучшие  статьи про Код и Людей кода',
                '«Жизнь без багов»'
            ]
        },
        "18": {
            category: 'Геймдев',
            checkboxes: []
        },
        "21": {
            header: 'У нас есть классные рассылки про бизнес',
            category: 'Бизнес',
            checkboxes: [
                'Лучшие  статьи про Бизнес',
                '«Цифровая жизнь»',
                '«EdTech по полочкам»'
            ]
        },
        "9": {
            header: 'У нас есть классные рассылки про бизнес',
            category: 'Маркетинг',
            checkboxes: [
                'Лучшие  статьи про Бизнес',
                '«Цифровая жизнь»',
                '«EdTech по полочкам»'
            ]
        },
        "11": {
            header: 'У нас есть классные рассылки про бизнес',
            category: 'Управление',
            checkboxes: [
                'Лучшие  статьи про Бизнес',
                '«Цифровая жизнь»',
                '«EdTech по полочкам»'
            ]
        },
        "17": {
            category: 'Развитие',
            checkboxes: []
        },
        "22": {
            header: 'У нас есть классные рассылки про образование',
            category: 'Образование',
            checkboxes: [
                'Лучшие  статьи про Образование',
                '«EdTech по полочкам»',
                '«Мой успешный онлайн-курс»'
            ]
        },
    }

     */
    window.popupData = {"header":"\u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435 - \u043d\u0430 \u043f\u043e\u0447\u0442\u0443!\u003Cbr\/\u003E\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0442\u0435\u043c\u0443 \u0440\u0430\u0441\u0441\u044b\u043b\u043a\u0438\u003Cbr\/\u003E\u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 5 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0445 \u043a\u0443\u0440\u0441\u043e\u0432:","category":"\u0414\u0438\u0437\u0430\u0439\u043d","checkboxes":{"23":"\u041c\u0435\u043d\u0435\u0434\u0436\u043c\u0435\u043d\u0442","24":"\u041c\u0430\u0440\u043a\u0435\u0442\u0438\u043d\u0433","26":"\u041a\u043e\u0440\u043f. \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435","13":"\u0414\u0438\u0437\u0430\u0439\u043d","16":"\u041f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435","15":"\u041e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435","17":"\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0433\u0440","18":"\u041f\u0441\u0438\u0445\u043e\u043b\u043e\u0433\u0438\u044f, \u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e"},"code":"design","scroll":true};
    window.subscribePopupShow = 1;
</script>
    <div class="copied">
        <img src="/static/images/articles/done-circle.svg" alt="" class="copied__icon">
        <p class="copied__text">
            Ссылка скопирована
        </p>
    </div>

    <!--    <style>@font-face{font-display:swap;font-family:Graphik;font-weight:500;font-style:normal;src:url(https://248006.selcdn.ru/Shared/fonts/GraphikLCTT-VA-Medium.woff2) format("woff2")}@font-face{font-display:swap;font-family:Graphik;font-weight:700;font-style:normal;src:url(https://248006.selcdn.ru/Shared/fonts/GraphikLCTT-VA-Bold.woff2) format("woff2")}.universal-notice{box-sizing:border-box;text-decoration:none;display:none;min-height:48px;color:var(--banner-color);background-color:var(--banner-bg);overflow:hidden;font-family:Graphik,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-transition:opacity .25s ease-in-out;transition:opacity .25s ease-in-out}.universal-notice *{box-sizing:inherit}.universal-notice.universal-notice--active{display:block}.universal-notice--bitrix{z-index:1000}.universal-notice__wrapper{position:relative;-webkit-box-pack:start;justify-content:flex-start;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;margin-left:12px;padding:4px 0}.universal-notice__title{position:relative;flex-shrink:0;width:132px;margin-right:27px;font-size:14px;line-height:20px;text-transform:uppercase}.universal-notice__timer{display:none;margin:0;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.universal-notice__button{flex-shrink:0;min-width:120px;padding:8px 12px;border-radius:25px;font-weight:500;font-size:12px;line-height:16px;color:#3925b7;text-align:center;text-transform:uppercase;background-color:#ffa6a6}@media (min-width:768px){.universal-notice{min-height:72px}.universal-notice__wrapper{-webkit-box-pack:center;justify-content:center;height:72px;margin:0}.universal-notice__title{width:252px;margin-right:32px;margin-left:20px;font-size:24px;line-height:32px}.universal-notice__button{min-width:200px;margin-right:20px;padding:14px 36px;font-size:16px;line-height:20px}}@media (min-width:768px) and (max-width:0px){.universal-notice{min-height:72px}.universal-notice__wrapper{-webkit-box-pack:center;justify-content:center;height:72px;margin:0}.universal-notice__title{width:252px;margin-right:32px;margin-left:20px;font-size:24px;line-height:32px}.universal-notice__button{min-width:200px;margin-right:20px;padding:14px 36px;font-size:16px;line-height:20px}}@media (min-width:1280px) and (max-width:0px){.universal-notice__wrapper{padding:0}.universal-notice__title{width:unset;margin-right:76px}.universal-notice__timer{flex-shrink:0;margin-right:32px;font-weight:700;font-size:24px;line-height:32px}.universal-notice__timer.js-universal-notice-active{display:-webkit-box;display:flex}.universal-notice__days{margin-right:5px}}@media (min-width:1280px){.universal-notice__wrapper{padding:0}.universal-notice__title{width:unset;margin-right:76px}.universal-notice__timer{flex-shrink:0;margin-right:32px;font-weight:700;font-size:24px;line-height:32px}.universal-notice__timer.js-universal-notice-active{display:-webkit-box;display:flex}.universal-notice__days{margin-right:5px}}</style>-->
    </body>
    </html>