Создаём свой первый сайт на HTML — Как создать сайт
09.03.2025
#COURSE##INNER#
Начните с простого шаблона. Возьмите за основу готовый HTML-код, например, с сайта Bootstrap . Это значительно упростит задачу и позволит вам сосредоточиться на собственном контенте, а не на структуре кода.
Определите структуру. Не пытайтесь сразу сделать всё идеально. Набросайте на бумаге, или в текстовом редакторе, как будет организован ваш сайт: главные страницы, разделы, подпункты. Укажите основные заголовки и типы контента на каждой странице. Например: "Главная", "О нас", "Услуги", "Контакты".
Используйте основные теги HTML. Ознакомьтесь с тегами , , , , , и . Знание структуры HTML поможет вам выстроить правильную логическую последовательность на страницах, что способствует удобной навигации для пользователей.
Заполните контент. Пишите текст, добавляйте изображения, видео, или другие медиафайлы. Подумайте о целевой аудитории вашего сайта – кому он предназначен? Соответствующие изображения и видео помогут привлечь внимание.
Установка текстового редактора
Для создания сайта вам потребуется текстовый редактор. Рекомендуем Notepad++ – бесплатный, удобный и функциональный инструмент.
Где скачать? Зайдите на сайт notepad-plus-plus.org .
Как установить? Скачайте установочный файл, запустите его и следуйте инструкциям мастера установки.
Альтернатива: Если Notepad++ не подходит, можно использовать встроенный Блокнот Windows. Он прост и понятен, но менее функционален, чем Notepad++.
Важно: Убедитесь, что у вас установлен редактор и вы можете с ним работать.
Основы HTML: теги и структура
Начните с базовой структуры. Каждый HTML-документ должен содержать следующие обязательные теги:
</code> - заголовок страницы, отображается в вкладке браузера. <br>Пример : <code><title>Мой первый сайт
Основные теги для текста:
Примеры структурной разметки:
Добро пожаловать на мой сайт! Это мой первый сайт.
Я учусь создавать страницы.
Рекомендация: Используйте понятные и осмысленные названия для элементов, чтобы было легко понимать структуру вашего будущего сайта.
Создание базового дизайна
Начните с выбора палитры цветов. Выберите 2-3 цвета для фона, текста и акцентов. Цветовая схема должна быть гармоничной и удобной для восприятия.
Цвет
Описание
Фон
Светло-серый #F0F0F0
Текст
Чёрный #000000
Акценты
Синий #3498DB
Далее, определите размер и шрифт. Выберите один-два типа шрифтов. Один для заголовков, другой для основного текста. Оптимальный выбор: один читаемый шрифт для всего сайта.
Элемент
Шрифт
Размер
Заголовки
Arial
24px
Основной текст
Roboto
16px
Установите расположение элементов. Заголовки должны быть над параграфами. Используйте форматирование абзацев.
Рассмотрите мобильную версию. Размещение должно быть удобным на экранах разных размеров.
Использование тегов для форматирования текста: ``, `-`, ``. Добавление изображений (``). Первые практические шаги для визуального оформления страницы.
Для форматирования текста используйте теги:
Например:
Важный текст: Раздел 1
Курсив: Дополнительная информация
Выделенный текст: Ключевые слова
Добавление изображений:
Для добавления изображения используйте тег src. Например:
Практические шаги:
Создайте простой заголовок. Используйте
width и height. Подбирайте изображения в тон дизайна вашей страницы.
Добавление ссылок и списков
Для создания ссылок используйте тег href. Например:
Перейти на сайт
Для создания списков используйте теги
Первый пункт
Второй пункт
Третий пункт
Первый пункт списка с порядком
Второй пункт списка с порядком
Третий пункт списка с порядком
В ссылок можно добавлять текст любой сложности. Атрибут target="_blank" откроет ссылку в новой вкладке/окне браузера:
Перейти на сайт
Не забудьте, что ссылки должны указывать на реальные страницы. Неправильный href приведёт к ошибке.
Публикация сайта
Для публикации сайта вам понадобится хостинг-сервис и доменное имя.
Выбор хостинга: Выберите хостинг в соответствии с потребностями. Обратите внимание на скорость, надежность и поддержку.Доменное имя: Зарегистрируйте доменное имя, которое отражает ваш сайт. Проверьте доступность в зоне .ru, .com или .org.
После выбора хостинга и доменного имени следуйте инструкциям хостинг-провайдера:
Установка файлов: Переместите все файлы вашего сайта на сервер хостинга. Используйте файловый менеджер хостинга или FTP-клиент.Настройка сервера: Скопируйте файлы сайта на хостинг-сервер. Настройте указание пути до корневой папки.Проверка: Откройте новый браузер и введите ваше доменное имя в адресную строку. Проверьте, чтобы сайт отображался правильно.
Если сайт не открывается, проверьте:
Правильность загрузки файлов на сервер;
Наличие ошибок в коде;
Настройки доменного имени и сервера.
Тестирование и отладка
Проверяйте страницу в разных браузерах (Chrome, Firefox, Safari, Edge). Убедитесь, что элементы отображаются корректно на экранах различного разрешения (например, 1920x1080, 1366x768, 768x1024). Используйте инструменты разработчика браузера. Они позволят находить и исправлять ошибки в коде.
Проверьте валидность HTML-кода. Используйте онлайн-валидаторы (например, W3C HTML Validator ). Это позволит выявить синтаксические ошибки, которые могут мешать отображению сайта. Важный момент: правильный HTML критичен для корректного отображения.
Отображайте сайт в режиме "инкогнито" или "приватном режиме" . Это поможет убедиться, что ваши файлы cookie и кэши не влияют на результат. Проверка в режиме «без сохранения истории» даст более точное представление об актуальном отображении.
Проверяйте функциональность ссылок. Нажимайте каждую ссылку, проверяйте, что она перенаправляет на нужную страницу. Будьте внимательны к ссылкам, ведущим на внешние ресурсы: проверьте, открываются ли они правильно. Убедитесь, что все ссылки работают.
Проверяйте форму. Вводите данные в формы, и убедитесь, что они обрабатываются и передаются корректно, а также что результат отображается ожидаемым образом. Это критично для функциональных сайтов.
Записывайте все ошибки. Сохраняйте все ошибки и сообщения об ошибках, которые вы получаете при тестировании. Это поможет вам быстро найти и исправить причину проблем.
Не бойтесь ручного тестирования. Проверьте сайт вручную. Иногда автоматизация не может обнаружить все ошибки.
Вопрос-ответ:
Как выбрать подходящий редактор кода для начала работы с HTML?
Для создания сайтов на HTML не нужен сложный редактор. Вы можете пользоваться обычным текстовым редактором, который есть на вашем компьютере (например, Блокнот в Windows). Если хотите более удобную работу, можно использовать простые, бесплатные редакторы, такие как Sublime Text или Atom. Они дают подсветку кода, автодополнение и другие полезные функции, что делают написание более комфортным и менее утомительным, особенно при работе с большим количеством HTML тегов и атрибутов. Выбор редактора зависит от ваших предпочтений и навыков. Начинающим достаточно простого редактора.
Какие самые необходимые теги HTML нужно знать для создания простой страницы?
Для создания простой веб-страницы, достаточно понять теги для заголовка страницы (`
` - ``), основного текста (` `), абзацев. Также полезно знать теги, которые структурируют информацию, например, ``, `` и ``. Не забудьте о тегах для создания списков (``, ``) и для добавления изображений (`` для описания страницы, так как именно эти теги видны пользователю в закладках браузера.</p>
<h4>Как правильно добавить изображение на страницу?</h4>
<p>Для размещения изображения на странице используйте тег `<img>`. Необходимо указать путь к изображению с помощью атрибута `src`. Также важно добавить атрибут `alt` для описания изображения. Это важно не только для доступности сайта, например для людей с ограниченными возможностями, но и для поисковых систем. Также проверьте, правильно ли вы определили тип файла изображения (формат). Если изображение находится в той же директории, что и ваш HTML-файл, вам достаточно указать имя файла без полных путей. В противном случае нужно задать полный путь к файлу.</p>
<h4>Что делать, если код не отображается в браузере так, как я ожидаю?</h4>
<p>Если код не отображается как ожидалось, в первую очередь проверьте правильность написания тегов. Обратите внимание на регистр букв и отсутствие лишних пробелов или символов. Проверьте правильность написания пути к файлам изображений и других ресурсам. Если вы используете внешние CSS файлы, убедитесь, что ссылки правильные. Используйте инструменты отладки браузера (инструменты разработчика) для просмотра HTML, CSS и JavaScript кода в реальном времени. Они помогут обнаружить ошибки. Обычно ошибки хорошо видны в инспекторе браузера.</p>
<h4>Могу ли я сразу сделать сложный сайт, например, с онлайн-формой или другими интерактивными элементами?</h4>
<p>Да, конечно, но начинать стоит с простых сайтов. Сложные элементы, такие как формы, требуют понимания HTML, CSS и JavaScript. Начните с простого веб-дизайна, освойте основные теги и структурирование. После того, как вы уверенно создаёте простые страницы, вы сможете перейти к более сложным элементам веб-разработки. В процессе освоения новых технологий, следует постепенно увеличивать сложность проекта.</p>
<h4>Хочу сделать простенький сайт для портфолио, но не знаю, с чего начать. Какие инструменты мне понадобятся помимо HTML?</h4>
<p>Для простого сайта-портфолио, помимо HTML, вам понадобятся текстовый редактор (например, Блокнот, VS Code, Sublime Text). Важна поддержка файлов HTML. Вы можете сразу начать разрабатывать свой сайт в этом редакторе, создавая структуру с текстом, заголовками, и пр. В дальнейшем, если захотите сложные элементы дизайна или функционала, потребуется знание CSS (для стилей) и JavaScript (для взаимодействия с пользователем). Для публикаций обязательно нужно разместить файлы на каком-то хостинге. Есть бесплатные варианты, где можно просто загрузить папку с файлами. Вы так же можете изучить основы верстки через различные онлайн-ресурсы, курсы, и туториалы. Обратите внимание, что знание CSS и JavaScript не является обязательным для создания самого базового сайта.</p>
<h4>Я новичок в веб-разработке. Не могу понять, что конкретно нужно писать в файлах html. Как правильно расположить контент на страницах?</h4>
<p>В файлах HTML вам нужно описывать структуру страницы. Используются теги, которые похожи на команды. Например, `<p>` для параграфов, `<h1>` для больших заголовков, `<h2>` для подзаголовков. Обязательно создайте `<head>` и `<body>`, это главная информация и основная часть сайта соответственно. Контент располагается в `<body>` и структурируется при помощи тегов. Для создания маркированного списка - `<ul>`, для нумерованного `<ol>`. Важно соблюдать иерархию элементов в структуре. Например, параграф `<p>` идет внутри заголовка `<h2>`. Правильное расположение элементов влияет на то, как будет выглядеть ваш сайт в браузере. Поищите примеры кода и изучите, как теги влияют на расположение элементов на странице. Практикуйте, создавая простые страницы с различными элементами, и постепенно будете понимать структуру.</p> </div>
<div class="article-footer">
<div class="tags">
<a href="/blog/django-i-veb-razrabotka/">Django и веб-разработка</a>
</div>
<div class="blog-share">
<span>Поделиться:</span>
<div class="ya-share2" data-curtain data-shape="round" data-services="vkontakte,telegram,viber,whatsapp">
<div class="ya-share2__container ya-share2__container_size_m ya-share2__container_color-scheme_normal ya-share2__container_shape_round">
<ul class="ya-share2__list ya-share2__list_direction_horizontal">
<li class="ya-share2__item ya-share2__item_service_vkontakte">
<a class="ya-share2__link" href="https://vk.com/share.php?url=https://kimgid.ru/blog/sozdaem-svoj-pervij-sajt-na-html-kak-sozdat-sajt/&title=Создаём свой первый сайт на HTML — Как создать сайт&utm_source=share2" rel="nofollow noopener" target="_blank" title="ВКонтакте">
<span class="ya-share2__badge">
<span class="ya-share2__icon"></span>
</span>
<span class="ya-share2__title">ВКонтакте</span>
</a>
</li>
<li class="ya-share2__item ya-share2__item_service_telegram">
<a class="ya-share2__link" href="https://t.me/share/url?url=https://kimgid.ru/blog/sozdaem-svoj-pervij-sajt-na-html-kak-sozdat-sajt/&text=Создаём свой первый сайт на HTML — Как создать сайт&utm_source=share2" target="_blank" rel="nofollow noopener">
<span class="ya-share2__badge">
<span class="ya-share2__icon"></span>
</span>
<span class="ya-share2__title">Telegram</span>
</a>
</li>
<li class="ya-share2__item ya-share2__item_service_viber">
<a class="ya-share2__link" href="viber://forward?text=Блог kimgid https://kimgid.ru/blog/sozdaem-svoj-pervij-sajt-na-html-kak-sozdat-sajt/&utm_source=share2" rel="nofollow" target="_blank" title="Viber">
<span class="ya-share2__badge">
<span class="ya-share2__icon"></span>
</span>
<span class="ya-share2__title">Viber</span>
</a>
</li>
<li class="ya-share2__item ya-share2__item_service_whatsapp">
<a class="ya-share2__link" href="https://api.whatsapp.com/send?text=Создаём свой первый сайт на HTML — Как создать сайт https://kimgid.ru/blog/sozdaem-svoj-pervij-sajt-na-html-kak-sozdat-sajt/&utm_source=share2" rel="nofollow noopener" target="_blank" title="WhatsApp">
<span class="ya-share2__badge">
<span class="ya-share2__icon"></span>
</span>
<span class="ya-share2__title">WhatsApp</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<meta property="og:type" content="website">
<meta property="og:site_name" content="pae.su">
<meta property="og:type" content="article" />
<meta name="author" content="" />
<meta property="article:published_time" content="22.02.2025 05:02:43" />
<meta property="article:modified_time" content="09.03.2025 01:03:17" />
<meta property="og:url" content="https://pae.su/blog/sozdaem-svoj-pervij-sajt-na-html-kak-sozdat-sajt/">
<meta property="og:locale" content="ru">
<meta property="og:title" content="Блог \ Создаём свой первый сайт на HTML — Как создать сайт | pae.su - блог">
<meta property="og:description" content="Создайте свой первый сайт с нуля! Учим HTML: пошаговая инструкция для начинающих. Практические советы и примеры кода.">
<meta property="og:image" content="https://pae.su/upload/iblock/63c/h745lo8sh3pxc63vu6y5rt62yhlr1494/kursy_internet_marketologa_v_2025_godu.png"> <div class="pane related-posts">
<h4 class="decored-title">Похожие статьи</h4>
<div class="row">
<div class="col-lg-4 mb-4 mb-lg-0">
<div class="post-preview">
<div class="post-preview-cover"><a href="/blog/fulstek-razrabotchik-kto-eto-zarplata-kak-im-stat/"><img src="/upload/iblock/c69/cy8cm81t7hkggugpivlzee9353b57h1k/fulstek_razrabotchik_kto_eto_zarplata_kak_im_stat.png" alt="Фулстек разработчик - кто это, зарплата, как им стать"></a></div>
<div class="post-preview-title"><a href="/blog/fulstek-razrabotchik-kto-eto-zarplata-kak-im-stat/">Фулстек разработчик - кто это, зарплата, как им стать</a></div>
<span>12/19/2024</span>
</div>
</div>
<div class="col-lg-4 mb-4 mb-lg-0">
<div class="post-preview">
<div class="post-preview-cover"><a href="/blog/full-stack-razrabotchik-kto-eto-i-zachem-on-v-komande/"><img src="/upload/iblock/ac2/9e78k7sti1c8ox33fl83f8rrx2so6bhl/kak_stat_programmistom_sovety_opytnyh_razrabotchikov.png" alt="Full Stack-разработчик - кто это и зачем он в команде?"></a></div>
<div class="post-preview-title"><a href="/blog/full-stack-razrabotchik-kto-eto-i-zachem-on-v-komande/">Full Stack-разработчик - кто это и зачем он в команде?</a></div>
<span>12/16/2024</span>
</div>
</div>
<div class="col-lg-4 mb-4 mb-lg-0">
<div class="post-preview">
<div class="post-preview-cover"><a href="/blog/kak-sozdat-veb-prilozhenie-osnovnie-etapi-purrweb/"><img src="/upload/iblock/559/4x3k22rs3a6da0126anmlpqqfo3upy26/kak_nastroit_upravlenie_personazhem_v_platformere_opyt_ot_marka_brauna.png" alt="Как Создать Веб-Приложение - Основные этапы - Purrweb"></a></div>
<div class="post-preview-title"><a href="/blog/kak-sozdat-veb-prilozhenie-osnovnie-etapi-purrweb/">Как Создать Веб-Приложение - Основные этапы - Purrweb</a></div>
<span>12/28/2024</span>
</div>
</div>
</div>
</div>
<div class="pane pe-0 ps-0">
<div class="decored-title">0 Комментариев</div>
<div class="comm-list">
</div>
</div>
<div class="pane">
<div>Комментариев на модерации: 0</div>
<div class="decored-title">Оставьте комментарий</div>
<div class="comm-form">
<form method="post" enctype="multipart/form-data" class="comment form">
<div class="row">
<div class="col-lg-12 mb-3">
<div class="rate-block">
<label>Ваша оценка</label>
<div class="rating">
<div class="votes_block with-text">
<div class="ratings">
<div class="item-rating" data-message="Очень плохо"><i class="svg inline svg-inline-star" aria-hidden="true">
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_172_19507)">
<path d="M8.56997 7.63003L1.89997 8.60003H1.77997C1.60144 8.64504 1.4388 8.73847 1.30997 8.87003C1.15884 9.00184 1.05084 9.17605 0.999975 9.37003C0.955087 9.55061 0.955087 9.73944 0.999975 9.92003C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9682 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.7958 22.9448 18.9759 22.9641 19.1517 22.936C19.3275 22.9078 19.4926 22.8333 19.63 22.72C19.7753 22.6058 19.886 22.4534 19.95 22.28C20.0213 22.106 20.0421 21.9154 20.01 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.9831 24 9.80003C24.0302 9.61794 24.0094 9.43104 23.94 9.26003C23.8694 9.08756 23.7558 8.93607 23.61 8.82003C23.467 8.70171 23.2938 8.62554 23.11 8.60003L16.43 7.60003L13.43 1.60003C13.3414 1.42657 13.2064 1.28115 13.04 1.18003C12.8812 1.06898 12.6936 1.00645 12.5 1.00003C12.305 0.99859 12.1138 1.0542 11.95 1.16003C11.7835 1.26115 11.6485 1.40657 11.56 1.58003L8.56997 7.63003Z" fill="#E5C45B"></path>
<path d="M23.93 9.25997C23.8594 9.08751 23.7458 8.93602 23.6 8.81997C23.457 8.70166 23.2838 8.62548 23.1 8.59997L16.42 7.59997L13.42 1.59997C13.3314 1.42651 13.1964 1.2811 13.03 1.17997C12.8667 1.07244 12.6755 1.01514 12.48 1.01514C12.2845 1.01514 12.0933 1.07244 11.93 1.17997C11.7635 1.2811 11.6285 1.42651 11.54 1.59997L8.53997 7.64997L1.89997 8.59997H1.77997C1.60144 8.64499 1.4388 8.73842 1.30997 8.86997C1.15884 9.00179 1.05084 9.17599 0.999975 9.36997C0.955087 9.55056 0.955087 9.73939 0.999975 9.91997C1.04781 10.0996 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0531 5.02891 22.2355 5.10997 22.4C5.19238 22.5687 5.3206 22.7107 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9681 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.801 22.9494 18.9879 22.9702 19.17 22.94C19.3552 22.9196 19.5298 22.8428 19.67 22.72C19.8153 22.6057 19.926 22.4534 19.99 22.28C20.0613 22.1059 20.0821 21.9153 20.05 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1548 23.9657 9.98305 24 9.79997C24.027 9.61696 24.0028 9.43003 23.93 9.25997Z" fill="#DDDDDD"></path>
<path opacity="0.07" d="M12.5 2.00002L15.5 8.05002C15.5723 8.19372 15.6783 8.31785 15.8089 8.41186C15.9394 8.50586 16.0907 8.56698 16.25 8.59002L23 9.60002C23 9.60002 23 9.60002 23.05 9.60002C23.1 9.60002 23 9.66002 23 9.66002L18.18 14.35C18.0627 14.4635 17.975 14.6039 17.9244 14.759C17.8739 14.9141 17.862 15.0793 17.89 15.24L19 22L13 18.83C12.8596 18.7508 12.7011 18.7095 12.54 18.71C12.3758 18.7108 12.2144 18.752 12.07 18.83L5.99997 22V21.95L7.13997 15.33C7.16791 15.1693 7.15609 15.0041 7.10554 14.849C7.05499 14.6939 6.96725 14.5535 6.84997 14.44L1.99997 9.65002V9.60002L8.64997 8.60002C8.80921 8.57698 8.96053 8.51586 9.0911 8.42186C9.22167 8.32785 9.32762 8.20372 9.39997 8.06002L12.4 1.99002M12.4 0.990017C12.205 0.98858 12.0138 1.0442 11.85 1.15002C11.6835 1.25114 11.5485 1.39656 11.46 1.57002L8.45997 7.62002L1.89997 8.60002H1.77997C1.60144 8.64503 1.4388 8.73846 1.30997 8.87002C1.15884 9.00183 1.05084 9.17604 0.999975 9.37002C0.955087 9.5506 0.955087 9.73943 0.999975 9.92002C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.16837 22.9978 6.33347 22.9531 6.47997 22.87L12.48 19.73L18.48 22.87H18.58C18.7086 22.944 18.8521 22.9884 19 23H19.16C19.3452 22.9796 19.5198 22.9028 19.66 22.78C19.8053 22.6657 19.916 22.5134 19.98 22.34C20.0513 22.166 20.0721 21.9753 20.04 21.79L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.98309 24 9.80002C24.0302 9.61793 24.0094 9.43103 23.94 9.26002C23.8694 9.08755 23.7558 8.93606 23.61 8.82002C23.467 8.7017 23.2938 8.62553 23.11 8.60002L16.43 7.60002L13.43 1.60002C13.3414 1.42656 13.2064 1.28114 13.04 1.18002C12.8812 1.06897 12.6936 1.00644 12.5 1.00002L12.4 0.990017Z" fill="black"></path>
</g>
<defs>
<clipPath id="clip0_172_19507">
<rect width="25" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg>
</i></div>
<div class="item-rating" data-message="Плохо"><i class="svg inline svg-inline-star" aria-hidden="true">
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_172_19507)">
<path d="M8.56997 7.63003L1.89997 8.60003H1.77997C1.60144 8.64504 1.4388 8.73847 1.30997 8.87003C1.15884 9.00184 1.05084 9.17605 0.999975 9.37003C0.955087 9.55061 0.955087 9.73944 0.999975 9.92003C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9682 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.7958 22.9448 18.9759 22.9641 19.1517 22.936C19.3275 22.9078 19.4926 22.8333 19.63 22.72C19.7753 22.6058 19.886 22.4534 19.95 22.28C20.0213 22.106 20.0421 21.9154 20.01 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.9831 24 9.80003C24.0302 9.61794 24.0094 9.43104 23.94 9.26003C23.8694 9.08756 23.7558 8.93607 23.61 8.82003C23.467 8.70171 23.2938 8.62554 23.11 8.60003L16.43 7.60003L13.43 1.60003C13.3414 1.42657 13.2064 1.28115 13.04 1.18003C12.8812 1.06898 12.6936 1.00645 12.5 1.00003C12.305 0.99859 12.1138 1.0542 11.95 1.16003C11.7835 1.26115 11.6485 1.40657 11.56 1.58003L8.56997 7.63003Z" fill="#E5C45B"></path>
<path d="M23.93 9.25997C23.8594 9.08751 23.7458 8.93602 23.6 8.81997C23.457 8.70166 23.2838 8.62548 23.1 8.59997L16.42 7.59997L13.42 1.59997C13.3314 1.42651 13.1964 1.2811 13.03 1.17997C12.8667 1.07244 12.6755 1.01514 12.48 1.01514C12.2845 1.01514 12.0933 1.07244 11.93 1.17997C11.7635 1.2811 11.6285 1.42651 11.54 1.59997L8.53997 7.64997L1.89997 8.59997H1.77997C1.60144 8.64499 1.4388 8.73842 1.30997 8.86997C1.15884 9.00179 1.05084 9.17599 0.999975 9.36997C0.955087 9.55056 0.955087 9.73939 0.999975 9.91997C1.04781 10.0996 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0531 5.02891 22.2355 5.10997 22.4C5.19238 22.5687 5.3206 22.7107 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9681 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.801 22.9494 18.9879 22.9702 19.17 22.94C19.3552 22.9196 19.5298 22.8428 19.67 22.72C19.8153 22.6057 19.926 22.4534 19.99 22.28C20.0613 22.1059 20.0821 21.9153 20.05 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1548 23.9657 9.98305 24 9.79997C24.027 9.61696 24.0028 9.43003 23.93 9.25997Z" fill="#DDDDDD"></path>
<path opacity="0.07" d="M12.5 2.00002L15.5 8.05002C15.5723 8.19372 15.6783 8.31785 15.8089 8.41186C15.9394 8.50586 16.0907 8.56698 16.25 8.59002L23 9.60002C23 9.60002 23 9.60002 23.05 9.60002C23.1 9.60002 23 9.66002 23 9.66002L18.18 14.35C18.0627 14.4635 17.975 14.6039 17.9244 14.759C17.8739 14.9141 17.862 15.0793 17.89 15.24L19 22L13 18.83C12.8596 18.7508 12.7011 18.7095 12.54 18.71C12.3758 18.7108 12.2144 18.752 12.07 18.83L5.99997 22V21.95L7.13997 15.33C7.16791 15.1693 7.15609 15.0041 7.10554 14.849C7.05499 14.6939 6.96725 14.5535 6.84997 14.44L1.99997 9.65002V9.60002L8.64997 8.60002C8.80921 8.57698 8.96053 8.51586 9.0911 8.42186C9.22167 8.32785 9.32762 8.20372 9.39997 8.06002L12.4 1.99002M12.4 0.990017C12.205 0.98858 12.0138 1.0442 11.85 1.15002C11.6835 1.25114 11.5485 1.39656 11.46 1.57002L8.45997 7.62002L1.89997 8.60002H1.77997C1.60144 8.64503 1.4388 8.73846 1.30997 8.87002C1.15884 9.00183 1.05084 9.17604 0.999975 9.37002C0.955087 9.5506 0.955087 9.73943 0.999975 9.92002C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.16837 22.9978 6.33347 22.9531 6.47997 22.87L12.48 19.73L18.48 22.87H18.58C18.7086 22.944 18.8521 22.9884 19 23H19.16C19.3452 22.9796 19.5198 22.9028 19.66 22.78C19.8053 22.6657 19.916 22.5134 19.98 22.34C20.0513 22.166 20.0721 21.9753 20.04 21.79L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.98309 24 9.80002C24.0302 9.61793 24.0094 9.43103 23.94 9.26002C23.8694 9.08755 23.7558 8.93606 23.61 8.82002C23.467 8.7017 23.2938 8.62553 23.11 8.60002L16.43 7.60002L13.43 1.60002C13.3414 1.42656 13.2064 1.28114 13.04 1.18002C12.8812 1.06897 12.6936 1.00644 12.5 1.00002L12.4 0.990017Z" fill="black"></path>
</g>
<defs>
<clipPath id="clip0_172_19507">
<rect width="25" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg>
</i></div>
<div class="item-rating" data-message="Нормально"><i class="svg inline svg-inline-star" aria-hidden="true">
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_172_19507)">
<path d="M8.56997 7.63003L1.89997 8.60003H1.77997C1.60144 8.64504 1.4388 8.73847 1.30997 8.87003C1.15884 9.00184 1.05084 9.17605 0.999975 9.37003C0.955087 9.55061 0.955087 9.73944 0.999975 9.92003C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9682 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.7958 22.9448 18.9759 22.9641 19.1517 22.936C19.3275 22.9078 19.4926 22.8333 19.63 22.72C19.7753 22.6058 19.886 22.4534 19.95 22.28C20.0213 22.106 20.0421 21.9154 20.01 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.9831 24 9.80003C24.0302 9.61794 24.0094 9.43104 23.94 9.26003C23.8694 9.08756 23.7558 8.93607 23.61 8.82003C23.467 8.70171 23.2938 8.62554 23.11 8.60003L16.43 7.60003L13.43 1.60003C13.3414 1.42657 13.2064 1.28115 13.04 1.18003C12.8812 1.06898 12.6936 1.00645 12.5 1.00003C12.305 0.99859 12.1138 1.0542 11.95 1.16003C11.7835 1.26115 11.6485 1.40657 11.56 1.58003L8.56997 7.63003Z" fill="#E5C45B"></path>
<path d="M23.93 9.25997C23.8594 9.08751 23.7458 8.93602 23.6 8.81997C23.457 8.70166 23.2838 8.62548 23.1 8.59997L16.42 7.59997L13.42 1.59997C13.3314 1.42651 13.1964 1.2811 13.03 1.17997C12.8667 1.07244 12.6755 1.01514 12.48 1.01514C12.2845 1.01514 12.0933 1.07244 11.93 1.17997C11.7635 1.2811 11.6285 1.42651 11.54 1.59997L8.53997 7.64997L1.89997 8.59997H1.77997C1.60144 8.64499 1.4388 8.73842 1.30997 8.86997C1.15884 9.00179 1.05084 9.17599 0.999975 9.36997C0.955087 9.55056 0.955087 9.73939 0.999975 9.91997C1.04781 10.0996 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0531 5.02891 22.2355 5.10997 22.4C5.19238 22.5687 5.3206 22.7107 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9681 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.801 22.9494 18.9879 22.9702 19.17 22.94C19.3552 22.9196 19.5298 22.8428 19.67 22.72C19.8153 22.6057 19.926 22.4534 19.99 22.28C20.0613 22.1059 20.0821 21.9153 20.05 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1548 23.9657 9.98305 24 9.79997C24.027 9.61696 24.0028 9.43003 23.93 9.25997Z" fill="#DDDDDD"></path>
<path opacity="0.07" d="M12.5 2.00002L15.5 8.05002C15.5723 8.19372 15.6783 8.31785 15.8089 8.41186C15.9394 8.50586 16.0907 8.56698 16.25 8.59002L23 9.60002C23 9.60002 23 9.60002 23.05 9.60002C23.1 9.60002 23 9.66002 23 9.66002L18.18 14.35C18.0627 14.4635 17.975 14.6039 17.9244 14.759C17.8739 14.9141 17.862 15.0793 17.89 15.24L19 22L13 18.83C12.8596 18.7508 12.7011 18.7095 12.54 18.71C12.3758 18.7108 12.2144 18.752 12.07 18.83L5.99997 22V21.95L7.13997 15.33C7.16791 15.1693 7.15609 15.0041 7.10554 14.849C7.05499 14.6939 6.96725 14.5535 6.84997 14.44L1.99997 9.65002V9.60002L8.64997 8.60002C8.80921 8.57698 8.96053 8.51586 9.0911 8.42186C9.22167 8.32785 9.32762 8.20372 9.39997 8.06002L12.4 1.99002M12.4 0.990017C12.205 0.98858 12.0138 1.0442 11.85 1.15002C11.6835 1.25114 11.5485 1.39656 11.46 1.57002L8.45997 7.62002L1.89997 8.60002H1.77997C1.60144 8.64503 1.4388 8.73846 1.30997 8.87002C1.15884 9.00183 1.05084 9.17604 0.999975 9.37002C0.955087 9.5506 0.955087 9.73943 0.999975 9.92002C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.16837 22.9978 6.33347 22.9531 6.47997 22.87L12.48 19.73L18.48 22.87H18.58C18.7086 22.944 18.8521 22.9884 19 23H19.16C19.3452 22.9796 19.5198 22.9028 19.66 22.78C19.8053 22.6657 19.916 22.5134 19.98 22.34C20.0513 22.166 20.0721 21.9753 20.04 21.79L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.98309 24 9.80002C24.0302 9.61793 24.0094 9.43103 23.94 9.26002C23.8694 9.08755 23.7558 8.93606 23.61 8.82002C23.467 8.7017 23.2938 8.62553 23.11 8.60002L16.43 7.60002L13.43 1.60002C13.3414 1.42656 13.2064 1.28114 13.04 1.18002C12.8812 1.06897 12.6936 1.00644 12.5 1.00002L12.4 0.990017Z" fill="black"></path>
</g>
<defs>
<clipPath id="clip0_172_19507">
<rect width="25" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg>
</i></div>
<div class="item-rating" data-message="Хорошо"><i class="svg inline svg-inline-star" aria-hidden="true">
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_172_19507)">
<path d="M8.56997 7.63003L1.89997 8.60003H1.77997C1.60144 8.64504 1.4388 8.73847 1.30997 8.87003C1.15884 9.00184 1.05084 9.17605 0.999975 9.37003C0.955087 9.55061 0.955087 9.73944 0.999975 9.92003C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9682 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.7958 22.9448 18.9759 22.9641 19.1517 22.936C19.3275 22.9078 19.4926 22.8333 19.63 22.72C19.7753 22.6058 19.886 22.4534 19.95 22.28C20.0213 22.106 20.0421 21.9154 20.01 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.9831 24 9.80003C24.0302 9.61794 24.0094 9.43104 23.94 9.26003C23.8694 9.08756 23.7558 8.93607 23.61 8.82003C23.467 8.70171 23.2938 8.62554 23.11 8.60003L16.43 7.60003L13.43 1.60003C13.3414 1.42657 13.2064 1.28115 13.04 1.18003C12.8812 1.06898 12.6936 1.00645 12.5 1.00003C12.305 0.99859 12.1138 1.0542 11.95 1.16003C11.7835 1.26115 11.6485 1.40657 11.56 1.58003L8.56997 7.63003Z" fill="#E5C45B"></path>
<path d="M23.93 9.25997C23.8594 9.08751 23.7458 8.93602 23.6 8.81997C23.457 8.70166 23.2838 8.62548 23.1 8.59997L16.42 7.59997L13.42 1.59997C13.3314 1.42651 13.1964 1.2811 13.03 1.17997C12.8667 1.07244 12.6755 1.01514 12.48 1.01514C12.2845 1.01514 12.0933 1.07244 11.93 1.17997C11.7635 1.2811 11.6285 1.42651 11.54 1.59997L8.53997 7.64997L1.89997 8.59997H1.77997C1.60144 8.64499 1.4388 8.73842 1.30997 8.86997C1.15884 9.00179 1.05084 9.17599 0.999975 9.36997C0.955087 9.55056 0.955087 9.73939 0.999975 9.91997C1.04781 10.0996 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0531 5.02891 22.2355 5.10997 22.4C5.19238 22.5687 5.3206 22.7107 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9681 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.801 22.9494 18.9879 22.9702 19.17 22.94C19.3552 22.9196 19.5298 22.8428 19.67 22.72C19.8153 22.6057 19.926 22.4534 19.99 22.28C20.0613 22.1059 20.0821 21.9153 20.05 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1548 23.9657 9.98305 24 9.79997C24.027 9.61696 24.0028 9.43003 23.93 9.25997Z" fill="#DDDDDD"></path>
<path opacity="0.07" d="M12.5 2.00002L15.5 8.05002C15.5723 8.19372 15.6783 8.31785 15.8089 8.41186C15.9394 8.50586 16.0907 8.56698 16.25 8.59002L23 9.60002C23 9.60002 23 9.60002 23.05 9.60002C23.1 9.60002 23 9.66002 23 9.66002L18.18 14.35C18.0627 14.4635 17.975 14.6039 17.9244 14.759C17.8739 14.9141 17.862 15.0793 17.89 15.24L19 22L13 18.83C12.8596 18.7508 12.7011 18.7095 12.54 18.71C12.3758 18.7108 12.2144 18.752 12.07 18.83L5.99997 22V21.95L7.13997 15.33C7.16791 15.1693 7.15609 15.0041 7.10554 14.849C7.05499 14.6939 6.96725 14.5535 6.84997 14.44L1.99997 9.65002V9.60002L8.64997 8.60002C8.80921 8.57698 8.96053 8.51586 9.0911 8.42186C9.22167 8.32785 9.32762 8.20372 9.39997 8.06002L12.4 1.99002M12.4 0.990017C12.205 0.98858 12.0138 1.0442 11.85 1.15002C11.6835 1.25114 11.5485 1.39656 11.46 1.57002L8.45997 7.62002L1.89997 8.60002H1.77997C1.60144 8.64503 1.4388 8.73846 1.30997 8.87002C1.15884 9.00183 1.05084 9.17604 0.999975 9.37002C0.955087 9.5506 0.955087 9.73943 0.999975 9.92002C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.16837 22.9978 6.33347 22.9531 6.47997 22.87L12.48 19.73L18.48 22.87H18.58C18.7086 22.944 18.8521 22.9884 19 23H19.16C19.3452 22.9796 19.5198 22.9028 19.66 22.78C19.8053 22.6657 19.916 22.5134 19.98 22.34C20.0513 22.166 20.0721 21.9753 20.04 21.79L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.98309 24 9.80002C24.0302 9.61793 24.0094 9.43103 23.94 9.26002C23.8694 9.08755 23.7558 8.93606 23.61 8.82002C23.467 8.7017 23.2938 8.62553 23.11 8.60002L16.43 7.60002L13.43 1.60002C13.3414 1.42656 13.2064 1.28114 13.04 1.18002C12.8812 1.06897 12.6936 1.00644 12.5 1.00002L12.4 0.990017Z" fill="black"></path>
</g>
<defs>
<clipPath id="clip0_172_19507">
<rect width="25" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg>
</i></div>
<div class="item-rating" data-message="Отлично"><i class="svg inline svg-inline-star" aria-hidden="true">
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_172_19507)">
<path d="M8.56997 7.63003L1.89997 8.60003H1.77997C1.60144 8.64504 1.4388 8.73847 1.30997 8.87003C1.15884 9.00184 1.05084 9.17605 0.999975 9.37003C0.955087 9.55061 0.955087 9.73944 0.999975 9.92003C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9682 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.7958 22.9448 18.9759 22.9641 19.1517 22.936C19.3275 22.9078 19.4926 22.8333 19.63 22.72C19.7753 22.6058 19.886 22.4534 19.95 22.28C20.0213 22.106 20.0421 21.9154 20.01 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.9831 24 9.80003C24.0302 9.61794 24.0094 9.43104 23.94 9.26003C23.8694 9.08756 23.7558 8.93607 23.61 8.82003C23.467 8.70171 23.2938 8.62554 23.11 8.60003L16.43 7.60003L13.43 1.60003C13.3414 1.42657 13.2064 1.28115 13.04 1.18003C12.8812 1.06898 12.6936 1.00645 12.5 1.00003C12.305 0.99859 12.1138 1.0542 11.95 1.16003C11.7835 1.26115 11.6485 1.40657 11.56 1.58003L8.56997 7.63003Z" fill="#E5C45B"></path>
<path d="M23.93 9.25997C23.8594 9.08751 23.7458 8.93602 23.6 8.81997C23.457 8.70166 23.2838 8.62548 23.1 8.59997L16.42 7.59997L13.42 1.59997C13.3314 1.42651 13.1964 1.2811 13.03 1.17997C12.8667 1.07244 12.6755 1.01514 12.48 1.01514C12.2845 1.01514 12.0933 1.07244 11.93 1.17997C11.7635 1.2811 11.6285 1.42651 11.54 1.59997L8.53997 7.64997L1.89997 8.59997H1.77997C1.60144 8.64499 1.4388 8.73842 1.30997 8.86997C1.15884 9.00179 1.05084 9.17599 0.999975 9.36997C0.955087 9.55056 0.955087 9.73939 0.999975 9.91997C1.04781 10.0996 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0531 5.02891 22.2355 5.10997 22.4C5.19238 22.5687 5.3206 22.7107 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9681 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.801 22.9494 18.9879 22.9702 19.17 22.94C19.3552 22.9196 19.5298 22.8428 19.67 22.72C19.8153 22.6057 19.926 22.4534 19.99 22.28C20.0613 22.1059 20.0821 21.9153 20.05 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1548 23.9657 9.98305 24 9.79997C24.027 9.61696 24.0028 9.43003 23.93 9.25997Z" fill="#DDDDDD"></path>
<path opacity="0.07" d="M12.5 2.00002L15.5 8.05002C15.5723 8.19372 15.6783 8.31785 15.8089 8.41186C15.9394 8.50586 16.0907 8.56698 16.25 8.59002L23 9.60002C23 9.60002 23 9.60002 23.05 9.60002C23.1 9.60002 23 9.66002 23 9.66002L18.18 14.35C18.0627 14.4635 17.975 14.6039 17.9244 14.759C17.8739 14.9141 17.862 15.0793 17.89 15.24L19 22L13 18.83C12.8596 18.7508 12.7011 18.7095 12.54 18.71C12.3758 18.7108 12.2144 18.752 12.07 18.83L5.99997 22V21.95L7.13997 15.33C7.16791 15.1693 7.15609 15.0041 7.10554 14.849C7.05499 14.6939 6.96725 14.5535 6.84997 14.44L1.99997 9.65002V9.60002L8.64997 8.60002C8.80921 8.57698 8.96053 8.51586 9.0911 8.42186C9.22167 8.32785 9.32762 8.20372 9.39997 8.06002L12.4 1.99002M12.4 0.990017C12.205 0.98858 12.0138 1.0442 11.85 1.15002C11.6835 1.25114 11.5485 1.39656 11.46 1.57002L8.45997 7.62002L1.89997 8.60002H1.77997C1.60144 8.64503 1.4388 8.73846 1.30997 8.87002C1.15884 9.00183 1.05084 9.17604 0.999975 9.37002C0.955087 9.5506 0.955087 9.73943 0.999975 9.92002C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.16837 22.9978 6.33347 22.9531 6.47997 22.87L12.48 19.73L18.48 22.87H18.58C18.7086 22.944 18.8521 22.9884 19 23H19.16C19.3452 22.9796 19.5198 22.9028 19.66 22.78C19.8053 22.6657 19.916 22.5134 19.98 22.34C20.0513 22.166 20.0721 21.9753 20.04 21.79L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.98309 24 9.80002C24.0302 9.61793 24.0094 9.43103 23.94 9.26002C23.8694 9.08755 23.7558 8.93606 23.61 8.82002C23.467 8.7017 23.2938 8.62553 23.11 8.60002L16.43 7.60002L13.43 1.60002C13.3414 1.42656 13.2064 1.28114 13.04 1.18002C12.8812 1.06897 12.6936 1.00644 12.5 1.00002L12.4 0.990017Z" fill="black"></path>
</g>
<defs>
<clipPath id="clip0_172_19507">
<rect width="25" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg>
</i></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="">Ваше имя</label>
<div class="input-box" required>
<i class="far fa-user"></i>
<input type="text" class="form-control" required name="name">
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="">Ваша почта</label>
<div class="input-box" required>
<i class="far fa-envelope"></i>
<input type="email" class="form-control" required name="email">
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="input-box">
<i class="far fa-comment-alt"></i>
<textarea name="comment" id="" class="form-control"></textarea>
</div>
</div>
<input type="hidden" name="article" value="90712">
<input type="hidden" name="rating" value="5" class="rating_form">
<input type="hidden" name="link" value="https://pae.su/blog/sozdaem-svoj-pervij-sajt-na-html-kak-sozdat-sajt/">
<input type="hidden" name="ip" value="18.97.9.171">
<input type="hidden" name="sid" value="49">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="">Прикрепите фото</label>
<input type="file" class="form-control" name="file">
</div>
<div class="form-check mb-4">
<input class="form-check-input" type="checkbox" id="agree2" name="agreement" checked>
<label class="form-check-label" for="agree2">
Я соглашаюсь на <a href="#">обработку персональных данных</a>
</label>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-lg-4">
<button type="submit" class="btn btn-full">Отправить</button>
</div>
</div>
</form>
<div class="modal-content inline_success">
<div class="modal-body">
<div class="thank-ico">
<img src="/local/templates/kimgid/img/check.svg" width="93" alt="">
</div>
<p>Ваш комментарий добавлен! <br>Он будет размещен после модерации</p>
</div>
</div>
</div>
</div>
</div>
<div class="sidebar">
<div class="widget">
<h3>Популярные статьи</h3>
<div class="wiget-grp">
</div>
</div>
<div class="widget">
<h3>Categories</h3>
<ul class="cat-nav">
<li><a href="/blog/blender-i-3d-grafika/">Blender и 3D-графика</a></li>
<li><a href="/blog/crm-sistemy/">CRM-системы</a></li>
<li><a href="/blog/digital-marketing/">Digital-маркетинг</a></li>
<li><a href="/blog/django-i-veb-razrabotka/">Django и веб-разработка</a></li>
<li><a href="/blog/edtech/">EdTech</a></li>
<li><a href="/blog/erp/">ERP</a></li>
<li><a href="/blog/google-sheets/">Google Sheets</a></li>
<li><a href="/blog/it/">IT</a></li>
<li><a href="/blog/lms/">LMS</a></li>
<li><a href="/blog/microsoft-excel/">Microsoft Excel</a></li>
<li><a href="/blog/microsoft-powerpoint/">Microsoft Powerpoint</a></li>
<li><a href="/blog/microsoft-word/">Microsoft Word</a></li>
<li><a href="/blog/python-i-programmirovanie/">Python и программирование</a></li>
<li><a href="/blog/soft-skills/">Soft Skills</a></li>
<li><a href="/blog/unity-i-igrovye-dvizhki/">Unity и игровые движки</a></li>
<li><a href="/blog/avtomatizatsiya-protsessov/">Автоматизация процессов</a></li>
<li><a href="/blog/akademicheskaya-deyatelnost/">Академическая деятельность</a></li>
<li><a href="/blog/akademicheskie-issledovaniya/">Академические исследования</a></li>
<li><a href="/blog/analitika/">Аналитика</a></li>
<li><a href="/blog/biznes/">Бизнес</a></li>
<li><a href="/blog/biznes-analitika/">Бизнес-аналитика</a></li>
<li><a href="/blog/biznes-strategii/">Бизнес-стратегии</a></li>
<li><a href="/blog/bukhgalterskiy-uchet/">Бухгалтерский учет</a></li>
<li><a href="/blog/veb-razrabotka/">Веб-разработка</a></li>
<li><a href="/blog/virtualnye-klassy/">Виртуальные классы</a></li>
<li><a href="/blog/vostrebovannye-professii/">Востребованные профессии</a></li>
<li><a href="/blog/vstupitelnye-ekzameny/">Вступительные экзамены</a></li>
<li><a href="/blog/vysshee-obrazovanie/">Высшее образование</a></li>
<li><a href="/blog/geymdizayn/">Геймдизайн</a></li>
<li><a href="/blog/gibridnoe-obuchenie/">Гибридное обучение</a></li>
<li><a href="/blog/gost/">ГОСТ</a></li>
<li><a href="/blog/grafika-i-3d-modelirovanie/">Графика и 3D-моделирование</a></li>
<li><a href="/blog/dizayn-i-tvorchestvo/">Дизайн и творчество</a></li>
<li><a href="/blog/dizayn-prezentatsiy/">Дизайн презентаций</a></li>
<li><a href="/blog/eda-i-kulinariya/">Еда и кулинария</a></li>
<li><a href="/blog/zdorove-i-meditsina/">Здоровье и медицина</a></li>
<li><a href="/blog/igrovaya-industriya-i-biznes/">Игровая индустрия и бизнес</a></li>
<li><a href="/blog/igrovye-metodiki-v-obuchenii/">Игровые методики в обучении</a></li>
<li><a href="/blog/intellektualnaya-sobstvennost/">Интеллектуальная собственность</a></li>
<li><a href="/blog/interaktivnye-formaty/">Интерактивные форматы</a></li>
<li><a href="/blog/iskusstvennyy-intellekt/">Искусственный интеллект</a></li>
<li><a href="/blog/iskusstvo-i-kultura/">Искусство и культура</a></li>
<li><a href="/blog/korporativnoe-obuchenie/">Корпоративное обучение</a></li>
<li><a href="/blog/krasota-i-ukhod/">Красота и уход</a></li>
<li><a href="/blog/kriticheskoe-myshlenie/">Критическое мышление</a></li>
<li><a href="/blog/kulturnye-issledovaniya/">Культурные исследования</a></li>
<li><a href="/blog/lichnoe-razvitie-i-psikhologiya/">Личное развитие и психология</a></li>
<li><a href="/blog/logistika-i-biznes/">Логистика и бизнес</a></li>
<li><a href="/blog/logistika-i-upravlenie/">Логистика и управление</a></li>
<li><a href="/blog/lokalizatsiya-i-perevod-igr/">Локализация и перевод игр</a></li>
<li><a href="/blog/marketing/">Маркетинг</a></li>
<li><a href="/blog/massazh-i-kosmetologiya/">Массаж и косметология</a></li>
<li><a href="/blog/meditsina-i-zdorove/">Медицина и здоровье</a></li>
<li><a href="/blog/metody-obucheniya/">Методы обучения</a></li>
<li><a href="/blog/nalogi/">Налоги</a></li>
<li><a href="/blog/ne-opredeleno/">Не определено</a></li>
<li><a href="/blog/neyroseti/">Нейросети</a></li>
<li><a href="/blog/obrazovanie/">Образование</a></li>
<li><a href="/blog/obrazovanie-i-kursy/">Образование и курсы</a></li>
<li><a href="/blog/obrazovanie-i-obuchenie/">Образование и обучение</a></li>
<li><a href="/blog/obuchenie/">Обучение</a></li>
<li><a href="/blog/onlayn-kursy/">Онлайн-курсы</a></li>
<li><a href="/blog/onlayn-platformy/">Онлайн-платформы</a></li>
<li><a href="/blog/oformlenie-nauchnykh-rabot/">Оформление научных работ</a></li>
<li><a href="/blog/oshibka-nekorrektnyy-otvet-ot-ii/">ОШИБКА Некорректный ответ от ИИ</a></li>
<li><a href="/blog/povedencheskie-nauki/">Поведенческие науки</a></li>
<li><a href="/blog/postuplenie-v-vuzy/">Поступление в вузы</a></li>
<li><a href="/blog/prikladnye-distsipliny/">Прикладные дисциплины</a></li>
<li><a href="/blog/programmirovanie/">Программирование</a></li>
<li><a href="/blog/prodazhi/">Продажи</a></li>
<li><a href="/blog/produktovyy-menedzhment/">Продуктовый менеджмент</a></li>
<li><a href="/blog/professii-i-karera/">Профессии и карьера</a></li>
<li><a href="/blog/professionalnye-navyki-i-kvalifikatsii/">Профессиональные навыки и квалификации</a></li>
<li><a href="/blog/psikhologiya/">Психология</a></li>
<li><a href="/blog/psikhologiya-obucheniya/">Психология обучения</a></li>
<li><a href="/blog/publichnye-vystupleniya/">Публичные выступления</a></li>
<li><a href="/blog/saund-dizayn-i-muzyka-v-igrakh/">Саунд-дизайн и музыка в играх</a></li>
<li><a href="/blog/sistemy-upravleniya/">Системы управления</a></li>
<li><a href="/blog/sotsialnye-aspekty-obrazovaniya/">Социальные аспекты образования</a></li>
<li><a href="/blog/spetsialnosti/">Специальности</a></li>
<li><a href="/blog/testirovanie-i-optimizatsiya-igr/">Тестирование и оптимизация игр</a></li>
<li><a href="/blog/tekhnicheskie-distsipliny/">Технические дисциплины</a></li>
<li><a href="/blog/tekhnologii-i-instrumenty/">Технологии и инструменты</a></li>
<li><a href="/blog/tekhnologii-i-programmirovanie/">Технологии и программирование</a></li>
<li><a href="/blog/trudovoe-zakonodatelstvo-i-pravo/">Трудовое законодательство и право</a></li>
<li><a href="/blog/universitetskie-programmy/">Университетские программы</a></li>
<li><a href="/blog/upravlenie-personalom/">Управление персоналом</a></li>
<li><a href="/blog/upravlenie-proektami/">Управление проектами</a></li>
<li><a href="/blog/finansovye-instrumenty/">Финансовые инструменты</a></li>
<li><a href="/blog/finansy/">Финансы</a></li>
<li><a href="/blog/fotografiya-i-redaktirovanie-foto/">Фотография и редактирование фото</a></li>
<li><a href="/blog/tsifrovaya-transformatsiya/">Цифровая трансформация</a></li>
<li><a href="/blog/tsifrovye-navyki/">Цифровые навыки</a></li>
<li><a href="/blog/tsifrovye-tekhnologii/">Цифровые технологии</a></li>
<li><a href="/blog/shakhmaty-i-nastolnye-igry/">Шахматы и настольные игры</a></li>
<li><a href="/blog/elektronnye-knigi/">Электронные книги</a></li>
<li><a href="/" class="selected">Главная</a></li>
<li><a href="/schools/">Школы</a></li>
<li><a href="/podborki/">Подборки курсов</a></li>
</ul>
</div>
</div>
</div>
</div>
</main>
<!-- Modal 1 -->
<div class="modal modal-wide fade" id="modal-1" tabindex="-1" aria-labelledby="modal-1Label" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-help">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="modal-help-lft">
<span>Поможем подобрать курс</span>
чтобы вы получили повышение <br> или новую профессию.
</div>
<div class="modal-help-rht">
<div class="modal-form-title">Оставьте заявку, и мы перезвоним</div>
<form method="post" enctype="multipart/form-data" class="help">
<div class="form-group">
<input type="text" placeholder="Имя" class="form-control" name="name">
</div>
<div class="form-group">
<input type="text" placeholder="Телефон" class="form-control" name="tel">
</div>
<div class="form-group">
<input type="text" placeholder="Email" class="form-control" name="email">
</div>
<div class="form-group">
<input type="hidden" placeholder="Статья" class="form-control" name="article" value="90712">
<input type="hidden" name="link" value="https://pae.su/blog/sozdaem-svoj-pervij-sajt-na-html-kak-sozdat-sajt/">
<input type="hidden" name="ip" value="18.97.9.171">
<input type="hidden" name="sid" value="49">
</div>
<div class="form-check mb-4">
<input class="form-check-input" type="checkbox" id="agree" name="agreement" checked>
<label class="form-check-label" for="agree">
Я соглашаюсь на <a href="#">обработку персональных данных</a>
</label>
</div>
<button type="submit" class="btn btn-primary btn-full">Оставить заявку</button>
</form>
<div class="modal-content inline_success">
<div class="modal-body">
<div class="thank-ico">
<img src="/local/templates/kimgid/img/check.svg" width="93" alt="">
</div>
<p>Ваша заявка отправлена! <br>Мы скоро с Вами свяжемся!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 2 -->
<div class="modal modal-simple fade" id="modal-2" tabindex="-1" aria-labelledby="modal-2Label" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="modal-title">Узнайте какая профессия вам подходит</div>
<p class="text-center">Пройдите тест - это займет не больше 10 минут</p>
<form method="post" enctype="multipart/form-data" class="profession">
<div class="form-group">
<input type="text" placeholder="Имя" class="form-control" name="name">
</div>
<div class="form-group">
<input type="email" placeholder="Email" class="form-control" name="email">
</div>
<div class="form-group">
<input type="hidden" placeholder="Статья" class="form-control" name="article" value="90712">
<input type="hidden" name="link" value="https://pae.su/blog/sozdaem-svoj-pervij-sajt-na-html-kak-sozdat-sajt/">
<input type="hidden" name="ip" value="18.97.9.171">
<input type="hidden" name="sid" value="49">
</div>
<div class="form-check mb-4">
<input class="form-check-input" type="checkbox" id="agree1" name="agreement" checked>
<label class="form-check-label" for="agree1">
Я соглашаюсь на <a href="#">обработку персональных данных</a>
</label>
</div>
<button type="submit" class="btn btn-primary btn-full">Пройти тест</button>
</form>
<div class="modal-content inline_success">
<div class="modal-body">
<div class="thank-ico">
<img src="/local/templates/kimgid/img/check.svg" width="93" alt="">
</div>
<p>Ваша заявка отправлена! <br>Мы скоро с Вами свяжемся!</p>
</div>
</div>
</div>
</div>
</div><footer class="footer">
<div class="footer-top">
<div class="container">
<div class="row">
<div class="col-12 col-sm-4 col-md-4 col-xl-4">
<a href="/" class="logo-brand">
<span><img src="/favicon.ico" alt=""></span>
PAE Tech
</a>
</div>
<div class="col-6 col-sm-4 col-md-4 col-xl-4">
</div>
<div class="col-6 col-sm-4 col-md-4 col-xl-4">
</div>
</div>
</div>
</div>
<div class="footer-btm">
<div class="container">
<span>© 2024</span> <span>Edtech Seo</span>
<!-- Yandex.Metrika counter --> <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(100042103, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/100042103" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> </div>
</div>
</footer>
<svg width="0" height="0" style="display: none;">
<symbol id="prev" viewBox="0 0 24 24" fill="none">
<path d="M15 6L9 12L15 18" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</symbol>
<symbol id="next" viewBox="0 0 24 24" fill="none">
<path d="M9 6L15 12L9 18" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</symbol>
</svg>
</body>
</html>
