11/21/2024 0 Комметариев

Как создать сайт с нуля при помощи HTML

На чтение

20 мин.

Просмотров

Дата обновления

10.03.2025

#COURSE##INNER#

Начните с базового скелета страницы. Для этого понадобится текстовый редактор (Блокнот, VS Code, Sublime Text) и знание основных тегов HTML. Ключевые начальные теги: , , </code> и <code><body></code>.</p> <p><strong>Заголовок и описание страницы.</strong> Внутри тега <code><head></code> установите заголовок страницы (<code><title>Мой сайт) и метаданные (например, описание). Пример: Этот код невидимый, но важен для поисковых систем.

Ввод текста и структурные элементы. В теге наполните страницу. Используйте теги

для параграфов,

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

Добавьте элементы дизайна. Для оформления используйте стили при помощи CSS. Это отдельный шаг, но не забудьте их при необходимости, чтобы ваша страница выглядела привлекательно. За основу возьмите онлайн-ресурсы с примерами стилизации. Например, для простого изменения цвета текста используйте свойство color.

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

Установка необходимых инструментов

Для создания сайта на HTML вам потребуется текстовый редактор и браузер. Не нужен специализированный софт.

Текстовый редактор: Выберите простой текстовый редактор, например, Блокнот (Windows), Текстовый редактор (macOS) или Sublime Text (платный, но очень удобный). Эти инструменты позволяют вводить и сохранять код.

Браузер: Используйте любой современный браузер: Google Chrome, Mozilla Firefox, Safari, Opera. Он необходим для просмотра созданных страниц и проверки их отображения.

Файловая система: Важную роль в HTML играет структура файлов. Сохраняйте файлы в одной папке, соблюдая четкую структуру, например, index.html для главной страницы.

Ключевая рекомендация: Не начинайте работу без установки основных инструментов. Всю работу проводите на одной машине. Проверьте корректность сохранения файлов.

Создание структуры HTML документа

Начните с основного скелета страницы. Главные элементы – , и . Обязательно используйте в начале. Пример:

Мой сайт

Внутри разместите мета-теги, такие как для кодировки символов и </code> для заголовка страницы, который будет отображаться в закладке браузера. Важно использовать правильный язык, например <code>lang="ru"</code> для русского.</p> <p><strong><code><body></code> – место для основного содержимого</strong>. Здесь будут располагаться все видимые элементы страницы: заголовки, абзацы, списки, изображения и т.д.</p> <p><strong>Используйте смысловые теги для структуры</strong>. Например, <code><header></code>, <code><nav></code>, <code><main></code>, <code><article></code>, <code><aside></code>, <code><footer></code>. Они не только улучшают структуру, но и влияют на семантику, что важно для поисковых систем. Например, используйте <code><article></code> для отдельных статей, <code><nav></code> для навигации.</p> <p><strong>Важная деталь</strong>: Правильно используйте теги для заголовков (<code><h1></code>–<code><h6></code>), чтобы структурировать текст. Не используйте заголовки, чтобы просто сделать текст больше, если содержание не требует структурирования. Заголовок <code><h1></code> должен быть только один на странице.</p> <h2>Форматирование текста с помощью тегов</h2> <p>Используйте теги для создания различных эффектов форматирования.</p> <p><strong>Для выделения ключевых слов или заголовков:</strong> <code><strong></code>.</p> <p><strong>Для выделения важной информации, но без изменения структуры:</strong> <code><em></code> (курсив). Пример: <em>Важная деталь</em>.</p> <p><strong>Для создания наименований или подзаголовков:</strong> <code><h1></code> до <code><h6></code>.</p> <p><strong>Для добавления подчёркивания:</strong> <code><ins></code> (вместо этого используйте CSS).</p> <p><strong>Для добавления удалённого текста:</strong> <code><del></code> (вместо этого используйте CSS).</p> <p><strong>Для создания маркированного списка:</strong> Используйте <code><ul></code> (unordered list) с тегами <code><li></code>.</p> <p><strong>Для создания нумерованного списка:</strong> Используйте <code><ol></code> (ordered list) с тегами <code><li></code>.</p> <p><strong>Пример использования:</strong></p> <p>Заголовок раздела – <strong>Обычный текст</strong>. <em>Подчёркнутая информация</em>. Это - <code><p></code>.</p> <h2>Добавление изображений и ссылок</h2> <p>Для добавления изображения используйте тег <code>img</code>. Он требует атрибут <code>src</code>, указывающий путь к файлу изображения.</p> <ul> <li><code><img src="путь_к_изображению.jpg" alt="Описание изображения"></code></li> </ul> <p><b>Важно</b>: <code>alt</code> – это атрибут для описания изображения. Он необходим для людей, использующих экранные читалки. Пожалуйста, описывайте изображение понятным языком.</p> <p>Для ссылок используйте тег <code>a</code>. В нём задается атрибут <code>href</code>, содержащий URL ссылки.</p> <ul> <li><code><a href="адрес_сайта.com">Перейти на страницу</a></code></li> </ul> <p>Также можно добавить текст ссылки. Он будет отображаться пользователю:</p> <ul> <li><code><a href="адрес_сайта.com" target="_blank">Перейти на страницу</a></code></li> </ul> <ul><li><code>target="_blank"</code> – откроет ссылку в новой вкладке.</li></ul> <p>Примеры путей к изображениям:</p> <ul> <li><code>img/logo.png</code> (если изображение в папке <code>img</code>)</li> <li><code>https://example.com/image.jpg</code> (если изображение на внешнем ресурсе)</li> </ul> <p>Примеры корректных ссылок:</p> <ul> <li><code><a href="https://www.example.com">Ссылка на сайт</a></code></li> <li><code><a href="/about">О нас</a></code></li> <li><code><a href="#contact">Контакты</a></code> (ссылка на якорный элемент на странице)</li> </ul> <p>Убедитесь, что изображение и сам файл ссылки физически существуют на сервере.</p> <h2>Создание списков и таблиц</h2> <p>Для создания списков используйте теги <code><ul></code> (нес упорядоченный) и <code><ol></code> (упорядоченный). Внутри них ставятся элементы <code><li></code>.</p> <p><b>Пример неупорядоченного списка:</b></p> <pre> <ul> <li>Яблоко</li> <li>Груша</li> <li>Банан</li> </ul> </pre> <p><b>Пример упорядоченного списка:</b></p> <pre> <ol> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </ol> </pre> <p>Для таблиц используйте тег <code><table></code>. Строки создаются с помощью <code><tr></code>, а ячейки – с помощью <code><td></code> (для обычных ячеек) и <code><th></code> (для заголовков столбцов).</p> <p><b>Пример таблицы:</b></p> <table> <tr> <th>Имя</th> <th>Возраст</th> </tr> <tr> <td>Петя</td> <td>10</td> </tr> <tr> <td>Маша</td> <td>12</td> </tr> </table> <p>Не забудьте о тегах <code><thead></code>, <code><tbody></code> и <code><tfoot></code> для структурирования таблицы. Используйте атрибут <code>colspan</code> для объединения столбцов, а <code>rowspan</code> для объединения строк.</p> <h2>Размещение элементов на странице</h2> <p>Используйте блочные элементы (<div>) для организации больших участков страницы. Они занимают всю доступную ширину.</p> <p>Inline элементы (<span>, <a>) располагаются в один ряд, внутри других элементов.</p> <p>Для изменения размера, отступов и выравнивания элементов применяйте CSS. Например, `width`, `height`, `margin`, `padding`, `text-align`.</p> <p>CSS-свойство `display: flex` позволяет легко размещать элементы в ряд или столбец, настраивая выравнивание и порядок.</p> <p>Используйте `float: left` или `float: right`, чтобы сместить элемент влево или вправо, но помните о возможных проблемам с версткой. Для сложных макетов используйте `flex` и `grid`.</p> <p>Правильное использование блочных и inline элементов, CSS свойства `float`, `display:flex`, `display:grid` позволяют создать любые структуры макетов. Используйте `box-sizing: border-box`, чтобы учитывать отступы при расчете ширины.</p> <p>Не забудьте про семантические теги HTML5 (<article>, <aside>, <nav>, <header>, <footer>), они улучшат структуру и семантику кода.</p> <h2>Вопрос-ответ:</h2> <h4>Что мне нужно знать, прежде чем начать писать код на HTML?</h4> <p>Прежде всего, вам нужно понять, что такое HTML. HTML – это язык разметки, используемый для создания структуры веб-страниц. Он не задаёт стили или функциональность – это основа, каркас. Вам не нужно быть программистом, чтобы освоить HTML. Важно иметь базовое представление о том, как устроены сайты: из каких элементов обычно состоит веб-страница (заголовок, абзацы, изображения, списки и т.д.). Понимание этих базовых строительных блоков поможет вам структурировать свой контент. Также пригодится текстовый редактор (например, блокнот или Sublime Text) и web-браузер, чтобы видеть результат ваших действий. Не нужен сложный софт, достаточно обычных инструментов.</p> <h4>Я новичок. Как выбрать свой первый проект HTML?</h4> <p>Для начала попробуйте создать простую страницу с заголовком, несколькими абзацами и списком. Вы можете выбрать что-то близкое вашим интересам. Например, короткую биографию, список любимых фильмов или описание домашнего животного. Не стоит сразу погружаться в сложные структуры. Начинайте с небольшого проекта и постепенно добавляйте элементы. По мере получения навыков, экспериментируйте, пробуйте разные типы контента и теги. Важны практика и постепенное усложнение заданий. Не бойтесь ошибаться – это часть обучения!</p> <h4>Какие ошибки могут возникать при написании HTML-кода и как их исправить?</h4> <p>Частые ошибки при работе с HTML могут быть связаны с неправильным использованием тегов, отсутствии закрытия тегов или неверном порядке элементов. Помогает проверка кода с помощью браузера. Многие браузеры отображают ошибки в виде сообщений непосредственно в коде или в консоли разработчика. Обращайте внимание на подсказки и сообщения об ошибках. Важно внимательно проверять написание тегов, их порядок и закрывающие тэги. Полезно искать решения проблем, используя поиск в интернете. В любом языке программирования часто возникают ошибки: это стандартный этап обучения, с которым справляются даже начинающие.</p> <h4>Как можно улучшить мою HTML-страницу, чтобы она выглядела лучше?</h4> <p>После создания структуры страницы, стоит применить CSS (Каскадные таблицы стилей). CSS позволяет добавлять цвета, шрифты, размеры элементов, отступы, layout. Это даст возможность сделать оформление эстетичным и удобным для пользователя. Изучение CSS – это дополнительный шаг, но он значительно увеличивает возможности вашей веб-страницы. Помимо CSS можно использовать готовые шаблоны или изучить готовые ресурсы по стилю и макетам. Так вы получите образцы для вдохновения. Постепенно вы научитесь комбинировать знания CSS, с HTML для создания интересных интерфейсов.</p> </div> <div class="article-footer"> <div class="tags"> <a href="/blog/veb-razrabotka/">Веб-разработка</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/kak-sozdat-sajt-s-nulya-pri-pomoshi-html/&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/kak-sozdat-sajt-s-nulya-pri-pomoshi-html/&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/kak-sozdat-sajt-s-nulya-pri-pomoshi-html/&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/kak-sozdat-sajt-s-nulya-pri-pomoshi-html/&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="salon-nikol.su"> <meta property="og:type" content="article" /> <meta name="author" content="" /> <meta property="article:published_time" content="18.02.2025 12:02:30" /> <meta property="article:modified_time" content="10.03.2025 04:03:58" /> <meta property="og:url" content="https://salon-nikol.su/blog/kak-sozdat-sajt-s-nulya-pri-pomoshi-html/"> <meta property="og:locale" content="ru"> <meta property="og:title" content="Блог \ Как создать сайт с нуля при помощи HTML | salon-nikol.su"> <meta property="og:description" content=""> <meta property="og:image" content="https://salon-nikol.su/upload/iblock/16f/o2slc8rovr5teo8xe738nes15wjtg8m1/kak_skachat_video_s_lyubogo_sayta_besplatno_13_sposobov.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/kak-sozdat-prostuyu-veb-stranitsu-s-pomoshyu-html/"><img src="/upload/iblock/925/09d652lt3ep44sibxcgp49i3or55nxwi/kak_podklyuchit_css_k_html_3_sposoba.png" alt="Как создать простую веб страницу с помощью HTML"></a></div> <div class="post-preview-title"><a href="/blog/kak-sozdat-prostuyu-veb-stranitsu-s-pomoshyu-html/">Как создать простую веб страницу с помощью HTML</a></div> <span>11/22/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-sajt-s-nulya-samostoyatelno-poshagovaya-instruktsiya/"><img src="/upload/iblock/4ae/hqeor11qej5is7fqs91rfuvjcw1ucdc3/brauzer_chto_eto_zachem_nuzhen_vozmozhnosti_i_razlichiya.png" alt="Как создать сайт с нуля самостоятельно — пошаговая инструкция"></a></div> <div class="post-preview-title"><a href="/blog/kak-sozdat-sajt-s-nulya-samostoyatelno-poshagovaya-instruktsiya/">Как создать сайт с нуля самостоятельно — пошаговая инструкция</a></div> <span>11/20/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-sajt-s-nulya-pri-pomoshi-html/"><img src="/upload/iblock/16f/o2slc8rovr5teo8xe738nes15wjtg8m1/kak_skachat_video_s_lyubogo_sayta_besplatno_13_sposobov.png" alt="Как создать сайт с нуля при помощи HTML"></a></div> <div class="post-preview-title"><a href="/blog/kak-sozdat-sajt-s-nulya-pri-pomoshi-html/">Как создать сайт с нуля при помощи HTML</a></div> <span>11/21/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="69837"> <input type="hidden" name="rating" value="5" class="rating_form"> <input type="hidden" name="link" value="https://salon-nikol.su/blog/kak-sozdat-sajt-s-nulya-pri-pomoshi-html/"> <input type="hidden" name="ip" value="18.225.72.113"> <input type="hidden" name="sid" value="33"> <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/agile/">Agile</a></li> <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/google-sheets/">Google Sheets</a></li> <li><a href="/blog/growth-hacking/">Growth Hacking</a></li> <li><a href="/blog/it/">IT</a></li> <li><a href="/blog/microsoft-excel/">Microsoft Excel</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/avtomatizatsiya-protsessov/">Автоматизация процессов</a></li> <li><a href="/blog/akademicheskaya-deyatelnost/">Академическая деятельность</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/bukhgalterskiy-uchet/">Бухгалтерский учет</a></li> <li><a href="/blog/veb-razrabotka/">Веб-разработка</a></li> <li><a href="/blog/vostrebovannye-professii/">Востребованные профессии</a></li> <li><a href="/blog/vstupitelnye-ekzameny/">Вступительные экзамены</a></li> <li><a href="/blog/grafika-i-3d-modelirovanie/">Графика и 3D-моделирование</a></li> <li><a href="/blog/dizayn-prezentatsiy/">Дизайн презентаций</a></li> <li><a href="/blog/diplomnye-raboty/">Дипломные работы</a></li> <li><a href="/blog/iskusstvennyy-intellekt/">Искусственный интеллект</a></li> <li><a href="/blog/istoriya-igr-i-studiy/">История игр и студий</a></li> <li><a href="/blog/kulturnye-issledovaniya/">Культурные исследования</a></li> <li><a href="/blog/marketing/">Маркетинг</a></li> <li><a href="/blog/mediagramotnost/">Медиаграмотность</a></li> <li><a href="/blog/nalogi/">Налоги</a></li> <li><a href="/blog/neyroseti/">Нейросети</a></li> <li><a href="/blog/obrazovanie/">Образование</a></li> <li><a href="/blog/obrazovatelnye-issledovaniya/">Образовательные исследования</a></li> <li><a href="/blog/ostalnoe/">Остальное</a></li> <li><a href="/blog/oformlenie-nauchnykh-rabot/">Оформление научных работ</a></li> <li><a href="/blog/postuplenie-v-vuzy/">Поступление в вузы</a></li> <li><a href="/blog/prikladnye-distsipliny/">Прикладные дисциплины</a></li> <li><a href="/blog/prodazhi/">Продажи</a></li> <li><a href="/blog/psikhologiya/">Психология</a></li> <li><a href="/blog/publichnye-vystupleniya/">Публичные выступления</a></li> <li><a href="/blog/testirovanie-i-optimizatsiya-igr/">Тестирование и оптимизация игр</a></li> <li><a href="/blog/upravlenie-personalom/">Управление персоналом</a></li> <li><a href="/blog/upravlenie-produktami/">Управление продуктами</a></li> <li><a href="/blog/upravlenie-proektami/">Управление проектами</a></li> <li><a href="/blog/finansy/">Финансы</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>  <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="69837"> <input type="hidden" name="link" value="https://salon-nikol.su/blog/kak-sozdat-sajt-s-nulya-pri-pomoshi-html/"> <input type="hidden" name="ip" value="18.225.72.113"> <input type="hidden" name="sid" value="33"> </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>  <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="69837"> <input type="hidden" name="link" value="https://salon-nikol.su/blog/kak-sozdat-sajt-s-nulya-pri-pomoshi-html/"> <input type="hidden" name="ip" value="18.225.72.113"> <input type="hidden" name="sid" value="33"> </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> Nikol Studio </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>  <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(99956833, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/99956833" style="position:absolute; left:-9999px;" alt="" /></div></noscript>  </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>