Створення веб-сторінки є одним із ключових етапів розробки сайту. Від її структури та дизайну залежить не лише зручність користувачів, але й ефективність роботи ресурсу. Правильний підхід до побудови веб-сторінки допоможе досягти високих результатів і забезпечити позитивний досвід для відвідувачів.
У процесі створення веб-сторінки важливо враховувати базові принципи HTML, розробляти зручну навігацію та надавати значення адаптивності. Ці аспекти гарантують, що сторінка буде доступною на будь-якому пристрої, зберігаючи при цьому естетику та функціональність.
У цій статті ми розглянемо основні етапи створення веб-сторінки, починаючи від планування структури і закінчуючи тестуванням. Дотримання цих рекомендацій дозволить створити ефективний ресурс, що відповідатиме сучасним стандартам та очікуванням користувачів.
Перші кроки у створенні веб-сторінки
Розпочати створення веб-сторінки слід з розуміння її призначення та цільової аудиторії. Це допоможе визначити, які елементи необхідно включити та як правильно організувати інформацію.
Вибір інструментів для розробки
- Текстовий редактор, наприклад, VS Code або Notepad++.
- Веб-браузер для перегляду результатів.
- Додаткові інструменти, такі як дебагери чи розширення для перевірки коду.
Побудова основної структури
- Створіть базовий файл index.html у вибраному текстовому редакторі.
- Додайте основні теги:
,,,. - Вкажіть метаінформацію, таку як
</code> та <code><meta charset="UTF-8"></code>.</li></ol><p>Дотримання цих кроків допоможе створити міцну основу для подальшої розробки веб-сторінки. Грамотний старт значно спростить подальший процес роботи.</p><h2><span class="ez-toc-section" id="%D0%92%D0%B8%D0%B1%D1%96%D1%80_%D1%96%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D1%96%D0%B2_%D0%B4%D0%BB%D1%8F_%D1%80%D0%BE%D0%B7%D1%80%D0%BE%D0%B1%D0%BA%D0%B8-2"></span>Вибір інструментів для розробки<span class="ez-toc-section-end"></span></h2><p>Якісні інструменти значно спрощують процес створення веб-сторінки. Від правильного вибору залежить ефективність роботи та швидкість розробки.</p><h3><span class="ez-toc-section" id="%D0%A0%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80%D0%B8_%D0%BA%D0%BE%D0%B4%D1%83"></span>Редактори коду<span class="ez-toc-section-end"></span></h3><ul><li><strong>VS Code</strong> – популярний текстовий редактор з багатьма розширеннями.</li><li><strong>Sublime Text</strong> – легкий редактор з інтуїтивно зрозумілим інтерфейсом.</li><li><strong>Atom</strong> – зручний редактор із відкритим кодом, що підходить для новачків.</li></ul><h3><span class="ez-toc-section" id="%D0%86%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B8_%D0%B4%D0%BB%D1%8F_%D1%82%D0%B5%D1%81%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F"></span>Інструменти для тестування<span class="ez-toc-section-end"></span></h3><ol><li>Використовуйте вбудовані дебагери у браузерах, наприклад, Chrome DevTools.</li><li>Застосовуйте перевірки на валідність HTML та CSS за допомогою сервісів, таких як W3C Validator.</li><li>Для перевірки адаптивності скористайтеся емуляторами пристроїв у браузерах.</li></ol><p>Правильний набір інструментів дозволяє оптимізувати процес створення веб-сторінок, забезпечуючи зручність та якість результату.</p><h2><span class="ez-toc-section" id="%D0%A0%D0%BE%D0%B7%D1%80%D0%BE%D0%B1%D0%BA%D0%B0_%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B8_HTML-%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0"></span>Розробка структури HTML-документа<span class="ez-toc-section-end"></span></h2><p>Правильна структура HTML-документа є основою для побудови функціональної та зрозумілої веб-сторінки. Дотримання стандартів забезпечує сумісність із браузерами та легкість у подальшій роботі.</p><p>HTML-документ починається з декларації типу документа: <code><!DOCTYPE html></code>. Вона вказує браузеру, що використовується сучасна версія HTML. Основні теги документа включають:</p><ul><li><code><html></code> – контейнер для всього вмісту сторінки.</li><li><code><head></code> – розділ для метаінформації, заголовка сторінки та підключення зовнішніх ресурсів.</li><li><code><body></code> – основний розділ, у якому розміщується весь видимий контент.</li></ul><p>Усередині <code><head></code> варто додати мета-теги, такі як <code><meta charset="UTF-8"></code> для підтримки коректного кодування, а також <code><title></code> для назви сторінки. У <code><body></code> розміщуються текстові блоки, зображення, посилання та інші елементи.</p><p>Структурований HTML-документ забезпечує зручність розробки, зрозумілість коду та легке внесення змін у майбутньому.</p><h2><span class="ez-toc-section" id="%D0%92%D0%B8%D0%BA%D0%BE%D1%80%D0%B8%D1%81%D1%82%D0%B0%D0%BD%D0%BD%D1%8F_%D1%82%D0%B5%D0%B3%D1%96%D0%B2_%D0%B4%D0%BB%D1%8F_%D0%BB%D0%BE%D0%B3%D1%96%D0%BA%D0%B8"></span>Використання тегів для логіки<span class="ez-toc-section-end"></span></h2><p>Теги HTML виконують важливу функцію в організації структури веб-сторінки. Вони допомагають створювати логічну ієрархію елементів, що робить сторінку зрозумілою для користувачів і пошукових систем.</p><h3><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D1%96_%D1%82%D0%B5%D0%B3%D0%B8_%D0%B4%D0%BB%D1%8F_%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B8%D0%B7%D0%B0%D1%86%D1%96%D1%97"></span>Основні теги для структуризації<span class="ez-toc-section-end"></span></h3><p>Для створення логічної побудови документа використовують наступні теги:</p><table><tr><th>Тег</th><th>Призначення</th></tr><tr><td><code></p><header></code></td><td>Верхній блок сторінки, зазвичай містить навігацію або заголовки.</td></tr><tr><td><code><main></code></td><td>Основний зміст сторінки, ключовий контент.</td></tr><tr><td><code></p><section></code></td><td>Розділи для тематичного групування контенту.</td></tr><tr><td><code></p><article></code></td><td>Самостійні блоки інформації, такі як статті чи пости.</td></tr><tr><td><code></p><footer></code></td><td>Нижній блок сторінки, містить інформацію про автора чи контактні дані.</td></tr></table><h3><span class="ez-toc-section" id="%D0%97%D0%B0%D1%81%D1%82%D0%BE%D1%81%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F_%D1%82%D0%B5%D0%B3%D1%96%D0%B2_%D0%B4%D0%BB%D1%8F_%D0%BB%D0%BE%D0%B3%D1%96%D0%BA%D0%B8"></span>Застосування тегів для логіки<span class="ez-toc-section-end"></span></h3><p>Правильне використання тегів дозволяє забезпечити семантичну побудову сторінки. Це не лише покращує її читабельність для користувачів, але й робить контент доступним для пошукових систем, що сприяє оптимізації.</p><h2><span class="ez-toc-section" id="%D0%94%D0%BE%D0%B4%D0%B0%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F_%D1%81%D1%82%D0%B8%D0%BB%D1%96%D0%B2_%D0%B4%D0%BB%D1%8F_%D0%BF%D0%BE%D0%BA%D1%80%D0%B0%D1%89%D0%B5%D0%BD%D0%BD%D1%8F_%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD%D1%83"></span>Додавання стилів для покращення дизайну<span class="ez-toc-section-end"></span></h2><p>Стилі допомагають зробити веб-сторінку візуально привабливою та забезпечують її зручність для користувачів. Для роботи зі стилями використовується мова <strong>CSS</strong>, яка дозволяє керувати зовнішнім виглядом елементів.</p><h3><span class="ez-toc-section" id="%D0%92%D0%B8%D0%B1%D1%96%D1%80_%D1%81%D0%BF%D0%BE%D1%81%D0%BE%D0%B1%D1%83_%D0%BF%D1%96%D0%B4%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%BD%D1%8F_%D1%81%D1%82%D0%B8%D0%BB%D1%96%D0%B2"></span>Вибір способу підключення стилів<span class="ez-toc-section-end"></span></h3><p>Існує кілька способів додавання стилів до HTML-документа:</p><ul><li><strong>Вбудовані стилі</strong> – додаються безпосередньо до елементів за допомогою атрибута <code>style</code>. Наприклад: <code><p style="color: red;">Текст</p><p></code>.</li><li><strong>Внутрішні стилі</strong> – визначаються у блоці <code><br /><style></code>всередині <code><head></code>. Цей підхід підходить для невеликих проєктів.</li><li><strong>Зовнішні стилі</strong>– підключаються через окремий файл за допомогою тега <code><link></code>. Наприклад:<code><link rel="stylesheet" href="styles.css"></code>. Це найкращий спосіб для великих проєктів.</li></ul><h3><span class="ez-toc-section" id="%D0%9A%D0%BB%D1%8E%D1%87%D0%BE%D0%B2%D1%96_%D0%BF%D1%80%D0%B8%D0%BD%D1%86%D0%B8%D0%BF%D0%B8_%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD%D1%83"></span>Ключові принципи дизайну<span class="ez-toc-section-end"></span></h3><p>При розробці стилів важливо дотримуватися кількох принципів:</p><ul><li>Використання єдиної кольорової схеми для всіх елементів.</li><li>Застосування шрифтів,які легко читаються.</li><li>Додавання відступів та вирівнювання для організації контенту.</li></ul><p>Дизайн повинен бути не лише красивим,а й функціональним. Важливо враховувати досвід користувачів,забезпечуючи простоту навігації та гармонійний вигляд сторінки.</p><h2><span class="ez-toc-section" id="%D0%A0%D0%BE%D0%B1%D0%BE%D1%82%D0%B0_%D0%B7_CSS-%D1%84%D0%B0%D0%B9%D0%BB%D0%B0%D0%BC%D0%B8_%D1%82%D0%B0_%D0%B2%D0%BB%D0%B0%D1%81%D1%82%D0%B8%D0%B2%D0%BE%D1%81%D1%82%D1%8F%D0%BC%D0%B8"></span>Робота з CSS-файлами та властивостями<span class="ez-toc-section-end"></span></h2><p>CSS-файли дозволяють керувати стилями веб-сторінки,забезпечуючи її естетичний вигляд і зручність у використанні. Використання зовнішніх файлів зі стилями сприяє розділенню контенту та дизайну,що спрощує подальше обслуговування сайту.</p><h3><span class="ez-toc-section" id="%D0%A1%D1%82%D0%B2%D0%BE%D1%80%D0%B5%D0%BD%D0%BD%D1%8F_%D1%82%D0%B0_%D0%BF%D1%96%D0%B4%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%BD%D1%8F_CSS-%D1%84%D0%B0%D0%B9%D0%BB%D1%96%D0%B2"></span>Створення та підключення CSS-файлів<span class="ez-toc-section-end"></span></h3><p>Щоб створити CSS-файл,достатньо зберегти текстовий документ із розширенням <code>.css</code>. Для підключення файлу до HTML-документа використовується тег <code><link></code>у розділі <code><head></code>:</p><pre><code><link rel="stylesheet" href="styles.css"></code></pre><p>Цей підхід дозволяє застосовувати єдині стилі до кількох сторінок сайту,забезпечуючи їх узгодженість.</p><h3><span class="ez-toc-section" id="%D0%9A%D0%BB%D1%8E%D1%87%D0%BE%D0%B2%D1%96_%D0%B2%D0%BB%D0%B0%D1%81%D1%82%D0%B8%D0%B2%D0%BE%D1%81%D1%82%D1%96_CSS"></span>Ключові властивості CSS<span class="ez-toc-section-end"></span></h3><p>Для налаштування зовнішнього вигляду елементів використовуються різноманітні властивості CSS. Основні з них:</p><ul><li><strong>color</strong>– змінює колір тексту. Наприклад:<code>color:blue;</code>.</li><li><strong>background-color</strong>– встановлює колір фону елемента.</li><li><strong>font-size</strong>– задає розмір шрифту.</li><li><strong>margin</strong>та <strong>padding</strong>– визначають відступи зовнішні та внутрішні відповідно.</li><li><strong>border</strong>– дозволяє створювати рамки навколо елементів.</li></ul><p>Опанування основних властивостей CSS допомагає створювати стильні та функціональні веб-сторінки,які відповідають сучасним стандартам.</p><h2><span class="ez-toc-section" id="%D0%90%D0%B4%D0%B0%D0%BF%D1%82%D0%B8%D0%B2%D0%BD%D0%B8%D0%B9_%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD_%D0%B4%D0%BB%D1%8F_%D1%80%D1%96%D0%B7%D0%BD%D0%B8%D1%85_%D0%BF%D1%80%D0%B8%D1%81%D1%82%D1%80%D0%BE%D1%97%D0%B2"></span>Адаптивний дизайн для різних пристроїв<span class="ez-toc-section-end"></span></h2><p>Адаптивний дизайн забезпечує коректне відображення веб-сторінки на різних пристроях. Це важливо для зручності користувачів,які переглядають сайт з мобільних телефонів,планшетів або комп’ютерів.</p><h3><span class="ez-toc-section" id="%D0%9C%D0%B5%D0%B4%D1%96%D0%B0-%D0%B7%D0%B0%D0%BF%D0%B8%D1%82%D0%B8"></span>Медіа-запити<span class="ez-toc-section-end"></span></h3><p>Медіа-запити є ключовим інструментом для створення адаптивного дизайну. Вони дозволяють застосовувати різні стилі залежно від ширини екрана:</p><pre><code>@media (max-width:768px){body{font-size:14px}}</code></pre><p>Цей підхід дозволяє змінювати розмір тексту,ширину блоків та інші параметри залежно від розміру пристрою.</p><h3><span class="ez-toc-section" id="%D0%93%D0%BD%D1%83%D1%87%D0%BA%D1%96_%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8"></span>Гнучкі елементи<span class="ez-toc-section-end"></span></h3><p>Для адаптивності також використовуються гнучкі елементи:</p><ul><li><strong>Відсоткові значення</strong>– замість фіксованих пікселів задаються пропорції елементів. Наприклад:<code>width:50%;</code>.</li><li><strong>Гнучкі сітки</strong>– CSS-властивості <code>flexbox</code>або <code>grid</code>допомагають організувати елементи на сторінці.</li><li><strong>Зображення</strong>– для їх адаптації використовується властивість <code>max-width:100%;</code>,що дозволяє зображенню масштабуватись під ширину контейнера.</li></ul><p>Адаптивний дизайн є невід’ємною частиною сучасних веб-сторінок,що забезпечує зручний доступ до контенту з будь-якого пристрою.</p><h2><span class="ez-toc-section" id="%D0%92%D0%B8%D0%BA%D0%BE%D1%80%D0%B8%D1%81%D1%82%D0%B0%D0%BD%D0%BD%D1%8F_%D0%BC%D0%B5%D0%B4%D1%96%D0%B0-%D0%B7%D0%B0%D0%BF%D0%B8%D1%82%D1%96%D0%B2_%D1%83_CSS"></span>Використання медіа-запитів у CSS<span class="ez-toc-section-end"></span></h2><p>Медіа-запити в CSS дозволяють застосовувати різні стилі в залежності від характеристик пристрою,на якому відображається веб-сторінка. Це важливий інструмент для створення адаптивних і мобільних версій сайтів.</p><h3><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%B8_%D0%BC%D0%B5%D0%B4%D1%96%D0%B0-%D0%B7%D0%B0%D0%BF%D0%B8%D1%82%D1%96%D0%B2"></span>Основи медіа-запитів<span class="ez-toc-section-end"></span></h3><p>Медіа-запит використовується для визначення умов,при яких активуються певні стилі. Основний синтаксис медіа-запиту:</</code></pre><p>Умова може залежати від різних параметрів,таких як ширина екрану,орієнтація чи роздільна здатність.</p><h3><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BA%D0%BB%D0%B0%D0%B4%D0%B8_%D0%BC%D0%B5%D0%B4%D1%96%D0%B0-%D0%B7%D0%B0%D0%BF%D0%B8%D1%82%D1%96%D0%B2"></span>Приклади медіа-запитів<span class="ez-toc-section-end"></span></h3><ul><li><strong>Медіа-запит на ширину екрану:</strong><pre><code>@media (max-width:768px){body{font-size:14px}}</code></pre><p>Цей запит змінює розмір шрифту на малих екранах.</li><li><strong>Медіа-запит на орієнтацію екрану:</strong><pre><code>@media (orientation:landscape){body{background-color:#add8e6}}</code></pre><p>Цей запит змінює фон при горизонтальній орієнтації екрану.</li><li><strong>Медіа-запит для високої роздільної здатності:</strong><pre><code>@media (min-resolution:192dpi){img{width:100%}}</code></pre><p>Цей запит застосовує стилі для екранів з високою роздільною здатністю.</li></ul><p>Медіа-запити дозволяють створити сайт,який адаптується до різних умов перегляду,що важливо для покращення досвіду користувачів на різних пристроях.</p><p class="blog-article__author"><span>Наталя Борисова</span><span>Директор з розвитку студії DoBest.</span></p><div class="blog-article__comments"><div id="comments" class="comments-area"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title"><h3 id="reply-title" class="comment-reply-title">Залишити коментар</h3><small><a rel="nofollow" id="cancel-comment-reply-link" href="/yak-stvoryty-veb-storinku-dlia-saytu-pravylno/#respond" style="display:none;">Скасувати коментар</a></small><p>Ваш e-mail не буде опублікований. Всі поля обов'язкові для заповнення</p><form action="https://dobest.it/wp-comments-post.php" method="post" id="commentform" class="form blog__comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваша e-mail адреса не оприлюднюватиметься.</span> <span class="required-field-message">Обов’язкові поля позначені <span class="required">*</span></span></p><span class="wpcf7-form-control-wrap item-text"><textarea cols="40" rows="1" class="wpcf7-form-control wpcf7-textarea" id="comment" placeholder="Коментар" name="comment" required></textarea></span><span class="wpcf7-form-control-wrap item-name"><input maxlength="400" class="wpcf7-form-control wpcf7-text" placeholder="Ім'я" value="" type="text" name="form-name" required></span> <span class="wpcf7-form-control-wrap item-email"><input maxlength="400" class="wpcf7-form-control wpcf7-text wpcf7-email" placeholder="Email" value="" type="email" name="form-email" required></span> <span class="wpcf7-form-control-wrap item-checkbox"><span class="wpcf7-form-control wpcf7-checkbox form-checkbox"><span class="wpcf7-list-item"><label><input type="checkbox" name="form-cookies" value="yes" required><span class="wpcf7-list-item-label">Я погоджуюсь на обробку персональних даних згідно з <a href="/privacy-policy/" target="_blank">Політикою конфіденційності</a></span></label></span></span></span> <p class="form-submit"><span data-name="form-submit"><input value="Опублікувати" class="button button-primary" type="submit"></span> <input type='hidden' name='comment_post_ID' value='7319' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p><p style="display:none !important;" class="akismet-fields-container" data-prefix="ak_"><label>Δ<textarea name="ak_hp_textarea" cols="45" rows="8" maxlength="100"></textarea></label><input type="hidden" id="ak_js_2" name="ak_js" value="247"/><script>document.getElementById("ak_js_2").setAttribute("value",(new Date()).getTime());</script></p></form> </div><!-- #respond --> </div><!-- #comments --> </div> </div> </article> <aside class="blog-article__sidebar"> <div class="blog-article__search-form"> <form class="search-form" action="https://dobest.it/" method="get" role="search" > <input class="search-form__input" type="search" aria-label="search" value="" name="s" placeholder="Пошук по блогу" > <button class="search-form__button"></button> </form> </div> <div class="blog-article__top-articles"> <h3>ТОП-5 статей</h3> <ul> <li> <a href="https://dobest.it/sayty-prosuvannia-ta-stvorennia-saytiv-dlia-biznesu/"> Сайти просування та створення сайтів для бізнесу </a> </li> <li> <a href="https://dobest.it/rozrobka-bryfu-saytu-dlia-uspishnoho-proektu/"> Розробка брифу сайту для успішного проекту </a> </li> <li> <a href="https://dobest.it/stvorennia-saytiv-z-nulia-dlia-vashoho-biznesu/"> Створення сайтів з нуля для вашого бізнесу </a> </li> <li> <a href="https://dobest.it/rozrobka-testuvannia-saytu-dlia-pidvyshchennia-iakosti/"> Розробка і тестування сайту для підвищення якості </a> </li> <li> <a href="https://dobest.it/zamovyty-stvorennia-saytiv-dlia-biznesu-ta-startapiv/"> Замовити створення сайтів для бізнесу та стартапів </a> </li> </ul> </div> </aside> </div> </div> </main> <footer id="colophon" class="footer"> <div class="container container-top"> <div class="col col-info" id="footer-col-info"> <div class="footer-description">Ми створюємо сайти.<br> Ви досягаєте результату.<br> <span>We Do Best.</span></div> <a class="button footer-contact show-popup-questions" href="#questions"> <span> Звʼязатись </span> </a> <div class="footer-phone"><a href="tel:380950055722">+38 095 00 55 722</a></div> <div class="footer-email"><a href="mailto:hello@dobest.it">hello@dobest.it</a></div> </div> <div class="col col-menu-services"> <div class="footer-title"><a href="https://dobest.it/services/">Послуги</a></div> <div class="menu-footer-menu-services-container"><ul id="menu-footer-menu-services" class="menu"><li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-service menu-item-76"><a href="https://dobest.it/service/landing/" data-ps2id-api="true">Розробка landing page</a></li> <li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-service menu-item-74"><a href="https://dobest.it/service/sait-vizytivka/" data-ps2id-api="true">Створення сайту-візитівки</a></li> <li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-service menu-item-73"><a href="https://dobest.it/service/internet-magazin/" data-ps2id-api="true">Розробка інтернет-магазину</a></li> <li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-service menu-item-75"><a href="https://dobest.it/service/korporatyvnyi-sait/" data-ps2id-api="true">Розробка корпоративного сайту</a></li> <li id="menu-item-71" class="menu-item menu-item-type-post_type menu-item-object-service menu-item-71"><a href="https://dobest.it/service/aktualizatsiia-kontentu/" data-ps2id-api="true">Послуги з актуалізації контенту</a></li> <li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-service menu-item-72"><a href="https://dobest.it/service/redyzayn-saytu/" data-ps2id-api="true">Редизайн сайту</a></li> </ul></div> </div> <div class="col col-menu-info"> <div class="footer-title">Інформація</div> <div class="menu-footer-menu-info-container"><ul id="menu-footer-menu-info" class="menu"><li id="menu-item-83" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-83"><a href="https://dobest.it/pro-nas/" data-ps2id-api="true">Про нас</a></li> <li id="menu-item-84" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-84"><a href="https://dobest.it/projects/" data-ps2id-api="true">Наш досвід</a></li> <li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82"><a href="https://dobest.it/blog/" data-ps2id-api="true">Корисне</a></li> <li id="menu-item-85" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-85"><a href="https://dobest.it/services/" data-ps2id-api="true">Послуги</a></li> <li id="menu-item-11127" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11127"><a href="https://dobest.it/service/indeksaciya-storinok/" data-ps2id-api="true">Індексація сторінок</a></li> <li id="menu-item-86" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy menu-item-86"><a rel="privacy-policy" href="https://dobest.it/privacy-policy/" data-ps2id-api="true">Політика конфіденційності</a></li> </ul></div> </div> </div> <hr> <div class="container container-bottom" id="footer-container-bottom"> <div class="col col-footer-logo"> <div class="footer-logo"> <svg class="logo" width="119" height="21" viewBox="0 0 1284 225" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M93.2374 0C164.137 0 212.05 43.0576 212.05 112.338C212.05 181.619 164.137 225 93.2374 225H0V0H93.2374ZM90.9712 165.755C123.669 165.755 144.065 148.597 144.065 113.309C144.065 76.4029 123.669 59.2446 90.9712 59.2446H67.0144V165.755H90.9712Z" fill="#E7E7E7"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M233.051 135.324C233.051 186.151 272.547 225 328.231 225C384.238 225 424.058 186.151 424.058 135.324C424.058 84.1726 384.238 45.6475 328.231 45.6475C272.547 45.6475 233.051 84.1726 233.051 135.324ZM328.551 168.647C347.052 168.647 362.051 153.649 362.051 135.147C362.051 116.646 347.052 101.647 328.551 101.647C310.049 101.647 295.051 116.646 295.051 135.147C295.051 153.649 310.049 168.647 328.551 168.647Z" fill="#E7E7E7"/> <path d="M593.655 104.892C616.317 115.899 628.943 135.971 628.943 159.928C628.943 197.806 602.072 225 553.187 225H445.058V0H558.367C594.95 0 621.173 20.3957 621.173 54.7122C621.173 75.1079 610.813 93.2374 593.655 104.892ZM554.482 68.6331C554.482 58.9209 548.655 53.4173 536.676 53.4173H511.101V84.1727H536.676C548.655 84.1727 554.482 78.0216 554.482 68.6331ZM542.827 171.583C555.13 171.583 562.252 165.755 562.252 154.424C562.252 143.094 554.482 137.266 542.504 137.266H511.101V171.583H542.827Z" fill="#E7E7E7"/> <path d="M716.957 167.05H812.137V225H649.942V0H810.518V57.9496H716.957V83.2014H797.568V141.151H716.957V167.05Z" fill="#E7E7E7"/> <path d="M922.763 225C878.884 225 844.962 203.838 833.137 165.56L893.821 142.22C898.801 160.27 912.182 169.917 929.299 169.917C942.058 169.917 947.66 165.871 947.66 158.402C947.66 128.527 842.473 148.755 842.473 69.7095C842.473 28.9419 871.726 0 926.187 0C969.755 0 1001.5 22.7178 1009.28 53.527L948.593 76.8672C944.859 61.6182 935.211 54.4606 923.074 54.4606C911.56 54.4606 906.581 58.8174 906.581 65.0415C906.581 93.6722 1012.7 74.0664 1012.7 157.158C1012.7 196.68 979.402 225 922.763 225Z" fill="#E7E7E7"/> <path d="M1225.68 0V59.5684H1163.2V225H1096.18V59.5684H1033.7V0H1225.68Z" fill="#E7E7E7"/> <circle class="logo-circle" cx="1243.18" cy="191.5" r="33.5" fill="#E7E7E7"/> </svg> </div> <div class="footer-copyright"> Copyright, 2025 </div> </div> <div class="col col-contact" id="footer-col-contact"> <a href="mailto:hello@dobest.it"> <svg width="30" height="24" viewBox="0 0 30 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M26.8907 2.3374H2.63808C2.50407 2.3374 2.37556 2.39064 2.2808 2.48539C2.18605 2.58015 2.13281 2.70866 2.13281 2.84267V20.0216C2.13281 20.4236 2.29251 20.8092 2.57678 21.0934C2.86104 21.3777 3.24659 21.5374 3.6486 21.5374H25.8802C26.2822 21.5374 26.6677 21.3777 26.952 21.0934C27.2363 20.8092 27.396 20.4236 27.396 20.0216V2.84267C27.396 2.70866 27.3427 2.58015 27.248 2.48539C27.1532 2.39064 27.0247 2.3374 26.8907 2.3374ZM14.7644 13.2726L3.9366 3.34793H25.5922L14.7644 13.2726ZM11.8124 11.9374L3.14334 19.8839V3.99088L11.8124 11.9374ZM12.5602 12.6233L14.4233 14.3374C14.5165 14.4226 14.6381 14.4699 14.7644 14.4699C14.8906 14.4699 15.0123 14.4226 15.1054 14.3374L16.9686 12.6296L25.5922 20.5269H3.9366L12.5602 12.6233ZM17.7164 11.9374L26.3854 3.99088V19.8839L17.7164 11.9374Z" fill="#7A7E7F"/> </svg> </a> <a href="https://t.me/DoBest_it" target="_blank"> <svg width="27" height="24" viewBox="0 0 27 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_3807_574)"> <path d="M25.6056 1.82418C25.5283 1.75793 25.4343 1.71391 25.3337 1.69688C25.2331 1.67984 25.1297 1.69044 25.0347 1.72753L2.35107 10.5385C2.11983 10.6276 1.92404 10.7889 1.79319 10.998C1.66234 11.2072 1.60354 11.4529 1.62565 11.6981C1.64775 11.9434 1.74956 12.1748 1.91574 12.3576C2.08192 12.5404 2.30345 12.6646 2.54695 12.7115L8.78591 13.9269V20.7971C8.78587 21.0628 8.86588 21.3226 9.01566 21.5429C9.16544 21.7632 9.37816 21.9341 9.6265 22.0335C9.7863 22.0972 9.95687 22.13 10.1291 22.1302C10.3093 22.1298 10.4876 22.0934 10.6534 22.0231C10.8191 21.9529 10.9689 21.8503 11.0939 21.7214L14.2279 18.4996L19.0409 22.689C19.2849 22.9026 19.5987 23.021 19.924 23.0223C20.0661 23.0217 20.2073 22.9996 20.3426 22.9568C20.5642 22.8871 20.7635 22.761 20.9207 22.591C21.0778 22.421 21.1872 22.2131 21.2381 21.988L25.7846 2.36855C25.8074 2.27022 25.8028 2.1676 25.7712 2.07169C25.7397 1.97579 25.6824 1.89022 25.6056 1.82418ZM2.51785 11.6184C2.51128 11.5646 2.52348 11.5103 2.55241 11.4644C2.58133 11.4185 2.62523 11.3838 2.67679 11.3662L22.2253 3.77279L9.12953 13.0881L2.72044 11.8394C2.66612 11.8315 2.61624 11.8052 2.57929 11.7649C2.54235 11.7246 2.52064 11.6728 2.51785 11.6184ZM10.4503 21.1037C10.3884 21.167 10.3089 21.2105 10.222 21.2289C10.1351 21.2472 10.0446 21.2394 9.96215 21.2065C9.87969 21.1736 9.80895 21.1171 9.75894 21.0442C9.70894 20.9713 9.68192 20.8853 9.68134 20.7971V14.5424L13.5519 17.9086L10.4503 21.1037ZM20.365 21.7858C20.3477 21.8612 20.3108 21.9309 20.2581 21.9879C20.2053 22.0448 20.1385 22.0871 20.0642 22.1106C19.9899 22.134 19.9108 22.1378 19.8345 22.1216C19.7583 22.1053 19.6877 22.0696 19.6296 22.018L9.95333 13.5959L24.6945 3.11067L20.365 21.7858Z" fill="#7A7E7F"/> </g> <defs> <clipPath id="clip0_3807_574"> <rect width="25.6" height="23.4667" fill="white" transform="translate(0.822266)"/> </clipPath> </defs> </svg> </a> <a href="https://wa.me/380950055722" target="_blank"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_3807_576)"> <path d="M17.9006 14.5347L14.487 12.8279C14.4198 12.7945 14.345 12.7793 14.2701 12.784C14.1951 12.7887 14.1228 12.813 14.0603 12.8546L12.2852 14.0387C11.3095 13.5707 10.5226 12.7839 10.0547 11.8081L11.2387 10.0331C11.2803 9.97056 11.3047 9.89821 11.3094 9.82329C11.3141 9.74837 11.2989 9.67354 11.2654 9.60636L9.55862 6.19277C9.52322 6.12152 9.46859 6.06158 9.40092 6.01973C9.33325 5.97789 9.25523 5.95579 9.17566 5.95595C8.15715 5.95595 7.18036 6.36055 6.46017 7.08075C5.73998 7.80094 5.33537 8.77773 5.33537 9.79624C5.33792 12.172 6.2828 14.4497 7.9627 16.1296C9.6426 17.8095 11.9203 18.7544 14.296 18.7569C15.3146 18.7569 16.2913 18.3523 17.0115 17.6321C17.7317 16.9119 18.1363 15.9351 18.1363 14.9166C18.1364 14.8374 18.1144 14.7596 18.0727 14.6922C18.0311 14.6247 17.9715 14.5702 17.9006 14.5347ZM14.296 17.9035C12.1466 17.9013 10.0858 17.0464 8.56583 15.5265C7.04591 14.0065 6.19103 11.9457 6.18877 9.79624C6.18864 9.04867 6.46885 8.32823 6.97406 7.7772C7.47927 7.22617 8.17273 6.88463 8.91751 6.82002L10.3896 9.7653L9.2162 11.5297C9.17709 11.5879 9.15293 11.6549 9.14586 11.7246C9.13879 11.7944 9.14902 11.8649 9.17566 11.9297C9.74258 13.2775 10.8148 14.3497 12.1626 14.9166C12.2275 14.9436 12.2981 14.9541 12.3681 14.9472C12.438 14.9403 12.5052 14.9163 12.5636 14.8772L14.328 13.7037L17.2733 15.1758C17.2085 15.9206 16.8666 16.614 16.3154 17.119C15.7642 17.624 15.0436 17.9039 14.296 17.9035ZM11.7359 1.68897C9.87874 1.68862 8.05371 2.17311 6.44129 3.0945C4.82886 4.01589 3.48492 5.34227 2.54239 6.94243C1.59986 8.54259 1.0914 10.3611 1.0673 12.218C1.04321 14.075 1.50432 15.9061 2.40502 17.5302L1.13559 21.3374C1.06038 21.5629 1.04946 21.805 1.10407 22.0364C1.15868 22.2678 1.27666 22.4794 1.44478 22.6475C1.6129 22.8156 1.82452 22.9336 2.05592 22.9882C2.28733 23.0428 2.52937 23.0319 2.75492 22.9567L6.56213 21.6873C7.98629 22.4764 9.57219 22.929 11.1983 23.0105C12.8245 23.092 14.4477 22.8002 15.9436 22.1574C17.4395 21.5147 18.7685 20.538 19.8286 19.3023C20.8887 18.0665 21.6519 16.6045 22.0597 15.0282C22.4675 13.4519 22.5091 11.8032 22.1812 10.2084C21.8534 8.6136 21.1648 7.11498 20.1683 5.82739C19.1718 4.53981 17.8937 3.49742 16.4321 2.78008C14.9705 2.06275 13.364 1.68951 11.7359 1.68897ZM11.7359 22.1705C10.0104 22.171 8.31522 21.7166 6.82135 20.8531C6.75643 20.8157 6.68291 20.7958 6.608 20.7955C6.56192 20.7954 6.51615 20.803 6.47253 20.8179L2.48503 22.147C2.40985 22.1721 2.32917 22.1757 2.25203 22.1575C2.1749 22.1393 2.10436 22.1 2.04832 22.044C1.99228 21.9879 1.95295 21.9174 1.93475 21.8403C1.91654 21.7631 1.92018 21.6824 1.94525 21.6073L3.27442 17.6198C3.29359 17.5624 3.30037 17.5017 3.2943 17.4416C3.28823 17.3814 3.26946 17.3233 3.23922 17.2709C2.15722 15.4007 1.72268 13.2256 2.00302 11.0831C2.28335 8.94069 3.26289 6.95064 4.78966 5.42172C6.31644 3.89279 8.30511 2.91046 10.4472 2.62711C12.5892 2.34377 14.7649 2.77525 16.6367 3.85461C18.5085 4.93398 19.9718 6.6009 20.7995 8.59677C21.6272 10.5926 21.7732 12.8059 21.2147 14.8932C20.6562 16.9804 19.4245 18.8251 17.7106 20.1409C15.9967 21.4567 13.8966 22.1701 11.7359 22.1705Z" fill="#7A7E7F"/> </g> <defs> <clipPath id="clip0_3807_576"> <rect width="23.4667" height="23.4667" fill="white" transform="translate(0.0898438)"/> </clipPath> </defs> </svg> </a> <a href="https://www.instagram.com/dobest._/" target="_blank"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M11.9564 7.33034C11.0136 7.33034 10.092 7.6099 9.30816 8.13367C8.52429 8.65743 7.91333 9.40189 7.55255 10.2729C7.19178 11.1439 7.09738 12.1023 7.2813 13.0269C7.46523 13.9516 7.91921 14.8009 8.58584 15.4675C9.25247 16.1342 10.1018 16.5882 11.0264 16.7721C11.9511 16.956 12.9095 16.8616 13.7805 16.5008C14.6515 16.1401 15.3959 15.5291 15.9197 14.7452C16.4435 13.9613 16.723 13.0398 16.723 12.097C16.7216 10.8332 16.219 9.62166 15.3253 8.72805C14.4317 7.83443 13.2201 7.33177 11.9564 7.33034ZM11.9564 15.997C11.185 15.997 10.431 15.7683 9.78966 15.3397C9.1483 14.9112 8.64843 14.3021 8.35325 13.5895C8.05807 12.8768 7.98083 12.0927 8.13132 11.3362C8.2818 10.5796 8.65324 9.88471 9.19866 9.33929C9.74409 8.79386 10.439 8.42242 11.1955 8.27194C11.9521 8.12146 12.7362 8.19869 13.4488 8.49387C14.1615 8.78906 14.7706 9.28893 15.1991 9.93028C15.6276 10.5716 15.8564 11.3257 15.8564 12.097C15.8564 13.1313 15.4455 14.1233 14.7141 14.8547C13.9827 15.5861 12.9907 15.997 11.9564 15.997ZM17.1564 1.26367H6.75638C5.26286 1.26539 3.83099 1.85945 2.77491 2.91554C1.71883 3.97162 1.12477 5.40348 1.12305 6.897V17.297C1.12477 18.7905 1.71883 20.2224 2.77491 21.2785C3.83099 22.3346 5.26286 22.9286 6.75638 22.9303H17.1564C18.6499 22.9286 20.0818 22.3346 21.1378 21.2785C22.1939 20.2224 22.788 18.7905 22.7897 17.297V6.897C22.788 5.40348 22.1939 3.97162 21.1378 2.91554C20.0818 1.85945 18.6499 1.26539 17.1564 1.26367ZM21.923 17.297C21.9216 18.5608 21.419 19.7724 20.5253 20.666C19.6317 21.5596 18.4201 22.0622 17.1564 22.0637H6.75638C5.49262 22.0622 4.28103 21.5596 3.38742 20.666C2.49381 19.7724 1.99115 18.5608 1.98971 17.297V6.897C1.99115 5.63325 2.49381 4.42166 3.38742 3.52805C4.28103 2.63443 5.49262 2.13177 6.75638 2.13034H17.1564C18.4201 2.13177 19.6317 2.63443 20.5253 3.52805C21.419 4.42166 21.9216 5.63325 21.923 6.897V17.297ZM18.4564 6.46367C18.4564 6.63508 18.4056 6.80264 18.3103 6.94517C18.2151 7.08769 18.0797 7.19877 17.9214 7.26437C17.763 7.32996 17.5888 7.34713 17.4206 7.31369C17.2525 7.28024 17.0981 7.1977 16.9769 7.0765C16.8557 6.95529 16.7731 6.80087 16.7397 6.63275C16.7063 6.46463 16.7234 6.29037 16.789 6.13201C16.8546 5.97365 16.9657 5.8383 17.1082 5.74306C17.2507 5.64783 17.4183 5.597 17.5897 5.597C17.8196 5.597 18.04 5.68831 18.2025 5.85085C18.3651 6.01338 18.4564 6.23382 18.4564 6.46367Z" fill="#7A7E7F"/> </svg> </a> <a href="https://www.facebook.com/dobest.it" target="_blank"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M11.5948 0.891602C9.32026 0.891602 7.09684 1.56607 5.20567 2.82971C3.31451 4.09334 1.84052 5.8894 0.970119 7.99075C0.0997088 10.0921 -0.128029 12.4043 0.315701 14.6352C0.75943 16.8659 1.8547 18.915 3.463 20.5234C5.07131 22.1316 7.12041 23.2269 9.35118 23.6706C11.5819 24.1144 13.8943 23.8866 15.9956 23.0162C18.0969 22.1458 19.893 20.6718 21.1566 18.7806C22.4202 16.8895 23.0947 14.6661 23.0947 12.3916C23.0914 9.34261 21.8787 6.41951 19.7227 4.26357C17.5668 2.10763 14.6437 0.89495 11.5948 0.891602ZM12.0548 22.9612V14.6916H15.2747C15.3967 14.6916 15.5137 14.6432 15.6 14.5569C15.6862 14.4706 15.7347 14.3536 15.7347 14.2316C15.7347 14.1096 15.6862 13.9926 15.6 13.9064C15.5137 13.8201 15.3967 13.7716 15.2747 13.7716H12.0548V10.5516C12.0548 9.94159 12.2971 9.3566 12.7284 8.92527C13.1597 8.49394 13.7447 8.25163 14.3547 8.25163H16.1947C16.3168 8.25163 16.4338 8.20315 16.52 8.11684C16.6062 8.0306 16.6547 7.9136 16.6547 7.79163C16.6547 7.66958 16.6062 7.55258 16.52 7.46635C16.4338 7.38004 16.3168 7.33164 16.1947 7.33164H14.3547C13.5007 7.33164 12.6817 7.67083 12.0778 8.2747C11.474 8.87858 11.1348 9.69757 11.1348 10.5516V13.7716H7.91471C7.79274 13.7716 7.67573 13.8201 7.58946 13.9064C7.50319 13.9926 7.45473 14.1096 7.45473 14.2316C7.45473 14.3536 7.50319 14.4706 7.58946 14.5569C7.67573 14.6432 7.79274 14.6916 7.91471 14.6916H11.1348V22.9612C8.37121 22.841 5.76467 21.6432 3.87353 19.6245C1.98241 17.6058 0.957083 14.9267 1.01723 12.1612C1.07738 9.39567 2.21821 6.76375 4.19533 4.82917C6.17244 2.89459 8.82857 1.81126 11.5948 1.81126C14.3609 1.81126 17.0171 2.89459 18.9942 4.82917C20.9713 6.76375 22.112 9.39567 22.1723 12.1612C22.2324 14.9267 21.207 17.6058 19.3159 19.6245C17.4248 21.6432 14.8182 22.841 12.0548 22.9612Z" fill="#7A7E7F" stroke="#7A7E7F" stroke-width="0.1"/> </svg> </a> </div> <div class="col col-last"> <span> <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12.4444 2.5H1.55556C1.143 2.5 0.747335 2.66209 0.455612 2.9506C0.163888 3.23912 0 3.63044 0 4.03846L0 7.5H14V4.03846C14 3.63044 13.8361 3.23912 13.5444 2.9506C13.2527 2.66209 12.857 2.5 12.4444 2.5Z" fill="#005BBB"/> <path d="M14 10.9615C14 11.3696 13.8361 11.7609 13.5444 12.0494C13.2527 12.3379 12.857 12.5 12.4444 12.5H1.55556C1.143 12.5 0.747335 12.3379 0.455612 12.0494C0.163888 11.7609 0 11.3696 0 10.9615V7.5H14V10.9615Z" fill="#FFD500"/> </svg> 10% на ЗСУ </span> </div> </div> <svg class="bg-footer bg-footer-1" width="645" height="528" viewBox="0 0 645 528" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M337.973 2.65381C381.154 10.1982 403.108 55.3945 442.778 72.8031C487.281 92.3325 545.789 79.6224 582.46 109.944C621.372 142.118 647.921 191.756 644.742 239.798C641.582 287.566 603.318 327.627 565.859 360.834C533.664 389.376 400.436 262.053 365.152 287.315C321.848 318.318 390.57 509.607 337.973 523.991C285.884 538.236 229.997 511.829 182.867 486.941C135.671 462.018 99.8328 423.969 69.6638 382.304C38.0267 338.612 -14.8091 289.39 3.91356 239.798C24.6636 184.835 117.003 188.159 159.293 144.895C189.252 114.245 173.471 58.6426 207.353 31.6702C241.811 4.23974 293.206 -5.16786 337.973 2.65381Z" fill="#460984"/> </svg> <svg class="bg-footer bg-footer-2" width="608" height="706" viewBox="0 0 608 706" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M297.385 703.39C171.26 704.36 69.0159 605.164 69.0159 481.83C69.0159 358.497 171.26 257.728 297.385 256.758C423.509 255.787 608 41.0526 608 164.387C608 287.721 423.509 702.419 297.385 703.39Z" fill="#14B8FF"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M112.161 364.552C118.305 339.581 155.113 326.885 169.29 303.944C185.195 278.208 174.844 244.373 199.538 223.166C225.74 200.664 266.165 185.311 305.29 187.149C344.192 188.977 376.817 211.104 403.861 232.767C427.105 251.385 323.414 328.43 343.988 348.835C369.236 373.877 525.021 334.135 536.735 364.552C548.336 394.675 526.831 426.994 506.562 454.249C486.265 481.542 455.278 502.267 421.346 519.714C385.764 538.009 345.678 568.564 305.29 557.737C260.529 545.737 263.236 492.338 228.002 467.882C203.041 450.556 157.758 459.682 135.792 440.089C113.453 420.162 105.791 390.441 112.161 364.552Z" fill="#1A0984"/> <path d="M331.32 201.812C334.766 266.393 294.373 321.01 241.099 323.802C187.826 326.594 141.844 276.504 138.398 211.923C134.951 147.341 -42.968 19.2519 10.3059 16.4599C63.5798 13.6679 327.873 137.231 331.32 201.812Z" fill="#C70A65"/> </svg> </footer> </div><!-- #page --> <script defer>jQuery(document).ready(function($){function createWordListAnimation(animationNode,delay){let $animationNode=$(animationNode),$animationTextWindow=$animationNode.find('.animation-text-window'),$ul=$animationTextWindow.find('ul'),$listItems=$ul.find('li'),$textWdb=$animationNode.find('.text-wdb'),$textWdbRight=$animationNode.find('.text-wdb-right'),$sectionText=$animationNode.find('.section-text.absolute'),currentIndex=0,$heroContainer=$('#hero-container');function updateDimensions(){let $listItem=$listItems.eq(currentIndex);if($listItem.length){let listItemHeight=$listItem.innerHeight(),listItemWidth=$listItem.innerWidth();$animationTextWindow.css({height:listItemHeight+'px',width:listItemWidth+'px'});let listItemOffset=$listItem.position().top;$ul.css('top',-listItemOffset+'px');}} function goTo(index){if($listItems.length){currentIndex=index;updateDimensions();}} function animate(){if($listItems.length>1){goTo(currentIndex);setTimeout(()=>{if($listItems.length){currentIndex=(currentIndex+1)%$listItems.length;if(currentIndex===0){if($textWdb.length){$textWdb.addClass('show');} if($sectionText.length){$sectionText.addClass('show');$sectionText.removeClass('hide');setSectionTextWidth();}} if(currentIndex!==0){animate();}}},delay);}} function setSectionTextWidth(){let containerWidth=$heroContainer.outerWidth(),textWindowWidth=$animationTextWindow.outerWidth(),textWdbWidth=$textWdb.outerWidth(),textWdbRightHeight=$textWdbRight.outerHeight();if(window.matchMedia("(min-width: 1200px)").matches){remainingWidth=containerWidth-textWindowWidth-textWdbWidth-textWdbRightHeight-225;}else if(window.matchMedia("(min-width: 768px) and (max-width: 1199px)").matches){remainingWidth=containerWidth-textWindowWidth-textWdbRightHeight-150;} if($sectionText.length){$sectionText.css('width',remainingWidth+'px');}} function resetAnimation(){if($sectionText.length){$sectionText.removeClass('show');}} if($listItems.length){animate();} function debounce(func,wait){let timeout;return function(...args){clearTimeout(timeout);timeout=setTimeout(()=>func.apply(this,args),wait);};} $(window).on('resize',debounce(()=>{if($listItems.length){resetAnimation();updateDimensions();currentIndex=$listItems.length-1;goTo(currentIndex);setSectionTextWidth();animate();}},1500));$(window).on('resize',debounce(()=>{$sectionText.addClass('hide');},0));} function checkVisibility(){$('.aos-animate, .section-hero').each(function(){let $section=$(this);if($section.is(':visible')&&$section.closest('.section').length){if(!$section.data('animation-started')){createWordListAnimation(this,800);$section.data('animation-started',true);}}});} $(window).on('load scroll',checkVisibility);});</script> <script type="speculationrules">{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/dobest\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}</script> <div id="pum-571" role="dialog" aria-modal="false" aria-labelledby="pum_popup_title_571" class="pum pum-overlay pum-theme-570 pum-theme-tema-po-umolchanyiu-2 popmake-overlay click_open" data-popmake="{"id":571,"slug":"ye-pytannia","theme_id":570,"cookies":[],"triggers":[{"type":"click_open","settings":{"cookie_name":["pum-571"],"extra_selectors":".show-popup-questions"}}],"mobile_disabled":null,"tablet_disabled":null,"meta":{"display":{"stackable":false,"overlay_disabled":false,"scrollable_content":false,"disable_reposition":false,"size":"medium","responsive_min_width":"0%","responsive_min_width_unit":false,"responsive_max_width":"784px","responsive_max_width_unit":false,"custom_width":"640px","custom_width_unit":false,"custom_height":"380px","custom_height_unit":false,"custom_height_auto":false,"location":"center top","position_from_trigger":false,"position_top":"100","position_left":"0","position_bottom":"0","position_right":"0","position_fixed":false,"animation_type":"fade","animation_speed":"350","animation_origin":"center top","overlay_zindex":false,"zindex":"1999999999"},"close":{"text":"","button_delay":"0","overlay_click":false,"esc_press":false,"f4_press":false},"click_open":[]}}"> <div id="popmake-571" class="pum-container popmake theme-570 pum-responsive pum-responsive-medium responsive size-medium"> <div id="pum_popup_title_571" class="pum-title popmake-title"> Є питання? </div> <div class="pum-content popmake-content" tabindex="0"> <p style="text-align:center;">З радістю поспілкуємось з вами.<br /> Будь ласка, залиште свої контактні дані</p> <div class="wpcf7 no-js" id="wpcf7-f572-o1" lang="ru-RU" dir="ltr" data-wpcf7-id="572"> <div class="screen-reader-response"><p role="status" aria-live="polite" aria-atomic="true"></p> <ul></ul></div> <form action="/yak-stvoryty-veb-storinku-dlia-saytu-pravylno/#wpcf7-f572-o1" method="post" class="wpcf7-form init form contact-form contact-form-popup" aria-label="Контактная форма" novalidate="novalidate" data-status="init"> <div style="display:none;"> <input type="hidden" name="_wpcf7" value="572" /> <input type="hidden" name="_wpcf7_version" value="6.0.3" /> <input type="hidden" name="_wpcf7_locale" value="ru_RU" /> <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f572-o1" /> <input type="hidden" name="_wpcf7_container_post" value="0" /> <input type="hidden" name="_wpcf7_posted_data_hash" value="" /> <input type="hidden" name="date-time" value="09.05.25 14:44:32" /> </div> <p><span class="wpcf7-form-control-wrap" data-name="form-name"><input size="40" maxlength="400" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Імʼя" value="" type="text" name="form-name" /></span><br /> <span class="wpcf7-form-control-wrap" data-name="form-email"><input size="40" maxlength="400" class="wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email" aria-required="true" aria-invalid="false" placeholder="Email" value="" type="email" name="form-email" /></span><br /> <span class="wpcf7-form-control-wrap" data-name="form-phone"><input size="40" maxlength="400" class="wpcf7-form-control wpcf7-tel wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-tel" aria-required="true" aria-invalid="false" placeholder="Телефон" value="" type="tel" name="form-phone" /></span><br /> <input class="wpcf7-form-control wpcf7-submit has-spinner" type="submit" value="Відправити" /> </p> <div class="checkbox"> <p><span class="wpcf7-form-control-wrap" data-name="privacy"><span class="wpcf7-form-control wpcf7-checkbox wpcf7-validates-as-required form-checkbox"><span class="wpcf7-list-item first last"><label><input type="checkbox" name="privacy[]" value="Я погоджуюсь на обробку персональних даних згідно з Політикою конфіденційності" /><span class="wpcf7-list-item-label">Я погоджуюсь на обробку персональних даних згідно з Політикою конфіденційності</span></label></span></span></span> </p> </div><p style="display:none !important;" class="akismet-fields-container" data-prefix="_wpcf7_ak_"><label>Δ<textarea name="_wpcf7_ak_hp_textarea" cols="45" rows="8" maxlength="100"></textarea></label><input type="hidden" id="ak_js_1" name="_wpcf7_ak_js" value="200"/><script>document.getElementById("ak_js_1").setAttribute("value",(new Date()).getTime());</script></p><input type='hidden' class='wpcf7-pum' value='{"closepopup":false,"closedelay":0,"openpopup":false,"openpopup_id":0}' /><div class="wpcf7-response-output" aria-hidden="true"></div> </form> </div> </div> <button type="button" class="pum-close popmake-close" aria-label="Close"></button></div></div><noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://dobest.it/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script><script async='async' src="https://dobest.it/wp-includes/js/dist/hooks.min.js" id="wp-hooks-js"></script> <script async='async' src="https://dobest.it/wp-includes/js/dist/i18n.min.js" id="wp-i18n-js"></script> <script id="wp-i18n-js-after">wp.i18n.setLocaleData({'text direction\u0004ltr':['ltr']});</script> <script async='async' src="https://dobest.it/wp-content/plugins/contact-form-7/includes/swv/js/index.js" id="swv-js"></script> <script id="contact-form-7-js-translations">(function(domain,translations){var localeData=translations.locale_data[domain]||translations.locale_data.messages;localeData[""].domain=domain;wp.i18n.setLocaleData(localeData,domain);})("contact-form-7",{"translation-revision-date":"2024-11-11 09:57:20+0000","generator":"GlotPress\/4.0.1","domain":"messages","locale_data":{"messages":{"":{"domain":"messages","plural-forms":"nplurals=3; plural=(n % 10 == 1 && n % 100 != 11) ? 0 : ((n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 12 || n % 100 > 14)) ? 1 : 2);","lang":"uk_UA"},"This contact form is placed in the wrong place.":["\u0426\u044f \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u043d\u0430 \u0444\u043e\u0440\u043c\u0430 \u0440\u043e\u0437\u043c\u0456\u0449\u0435\u043d\u0430 \u0432 \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u043c\u0443 \u043c\u0456\u0441\u0446\u0456."],"Error:":["\u041f\u043e\u043c\u0438\u043b\u043a\u0430:"]}},"comment":{"reference":"includes\/js\/index.js"}});</script> <script id="contact-form-7-js-before">var wpcf7={"api":{"root":"https:\/\/dobest.it\/wp-json\/","namespace":"contact-form-7\/v1"},"cached":1};var wpcf7={"api":{"root":"https:\/\/dobest.it\/wp-json\/","namespace":"contact-form-7\/v1"},"cached":1};</script> <script async='async' src="https://dobest.it/wp-content/cache/autoptimize/js/autoptimize_single_2912c657d0592cc532dff73d0d2ce7bb.js" id="contact-form-7-js"></script> <script id="page-scroll-to-id-plugin-script-js-extra">var mPS2id_params={"instances":{"mPS2id_instance_0":{"selector":"a[href*='#']:not([href='#'])","autoSelectorMenuLinks":"true","excludeSelector":"a[href^='#tab-'], a[href^='#tabs-'], a[data-toggle]:not([data-toggle='tooltip']), a[data-slide], a[data-vc-tabs], a[data-vc-accordion], a.screen-reader-text.skip-link","scrollSpeed":800,"autoScrollSpeed":"true","scrollEasing":"easeInOutQuint","scrollingEasing":"easeOutQuint","forceScrollEasing":"false","pageEndSmoothScroll":"true","stopScrollOnUserAction":"false","autoCorrectScroll":"false","autoCorrectScrollExtend":"false","layout":"vertical","offset":0,"dummyOffset":"false","highlightSelector":"","clickedClass":"clicked","targetClass":"target","highlightClass":"highlight","forceSingleHighlight":"false","keepHighlightUntilNext":"false","highlightByNextTarget":"false","appendHash":"false","scrollToHash":"true","scrollToHashForAll":"true","scrollToHashDelay":0,"scrollToHashUseElementData":"true","scrollToHashRemoveUrlHash":"false","disablePluginBelow":0,"adminDisplayWidgetsId":"true","adminTinyMCEbuttons":"true","unbindUnrelatedClickEvents":"false","unbindUnrelatedClickEventsSelector":"","normalizeAnchorPointTargets":"false","encodeLinks":"false"}},"total_instances":"1","shortcode_class":"_ps2id"};</script> <script async='async' src="https://dobest.it/wp-content/plugins/page-scroll-to-id/js/page-scroll-to-id.min.js" id="page-scroll-to-id-plugin-script-js"></script> <script id="ez-toc-scroll-scriptjs-js-extra">var eztoc_smooth_local={"scroll_offset":"30","add_request_uri":""};</script> <script async='async' src="https://dobest.it/wp-content/plugins/easy-table-of-contents/assets/js/smooth_scroll.min.js" id="ez-toc-scroll-scriptjs-js"></script> <script async='async' src="https://dobest.it/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js" id="ez-toc-js-cookie-js"></script> <script async='async' src="https://dobest.it/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js" id="ez-toc-jquery-sticky-kit-js"></script> <script id="ez-toc-js-js-extra">var ezTOC={"smooth_scroll":"1","visibility_hide_by_default":"","scroll_offset":"30","fallbackIcon":"<span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span>","chamomile_theme_is_on":""};</script> <script async='async' src="https://dobest.it/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js" id="ez-toc-js-js"></script> <script async='async' src="https://dobest.it/wp-content/cache/autoptimize/js/autoptimize_single_3cde90140ff101f6c85bd096f89eeae8.js" id="dobest-navigation-js"></script> <script async='async' src="https://dobest.it/wp-includes/js/comment-reply.min.js" id="comment-reply-js" async data-wp-strategy="async"></script> <script id="ajax-comment-script-js-extra">var ajax_comment={"ajax_url":"https:\/\/dobest.it\/wp-admin\/admin-ajax.php","nonce":"fcf3086c38"};</script> <script async='async' src="https://dobest.it/wp-content/cache/autoptimize/js/autoptimize_single_a8c4e3ef7b9908f0378c8eb11a698e91.js" id="ajax-comment-script-js"></script> <script async='async' src="https://dobest.it/wp-includes/js/jquery/ui/core.min.js" id="jquery-ui-core-js"></script> <script id="popup-maker-site-js-extra">var pum_vars={"version":"1.20.4","pm_dir_url":"https:\/\/dobest.it\/wp-content\/plugins\/popup-maker\/","ajaxurl":"https:\/\/dobest.it\/wp-admin\/admin-ajax.php","restapi":"https:\/\/dobest.it\/wp-json\/pum\/v1","rest_nonce":null,"default_theme":"570","debug_mode":"","disable_tracking":"","home_url":"\/","message_position":"top","core_sub_forms_enabled":"1","popups":[],"cookie_domain":"","analytics_route":"analytics","analytics_api":"https:\/\/dobest.it\/wp-json\/pum\/v1"};var pum_sub_vars={"ajaxurl":"https:\/\/dobest.it\/wp-admin\/admin-ajax.php","message_position":"top"};var pum_popups={"pum-571":{"triggers":[{"type":"click_open","settings":{"cookie_name":["pum-571"],"extra_selectors":".show-popup-questions"}}],"cookies":[],"disable_on_mobile":false,"disable_on_tablet":false,"atc_promotion":null,"explain":null,"type_section":null,"theme_id":"570","size":"medium","responsive_min_width":"0%","responsive_max_width":"784px","custom_width":"640px","custom_height_auto":false,"custom_height":"380px","scrollable_content":false,"animation_type":"fade","animation_speed":"350","animation_origin":"center top","open_sound":"none","custom_sound":"","location":"center top","position_top":"100","position_bottom":"0","position_left":"0","position_right":"0","position_from_trigger":false,"position_fixed":false,"overlay_disabled":false,"stackable":false,"disable_reposition":false,"zindex":"1999999999","close_button_delay":"0","fi_promotion":null,"close_on_form_submission":false,"close_on_form_submission_delay":"0","close_on_overlay_click":false,"close_on_esc_press":false,"close_on_f4_press":false,"disable_form_reopen":false,"disable_accessibility":false,"theme_slug":"tema-po-umolchanyiu-2","id":571,"slug":"ye-pytannia"}};</script> <script async='async' src="https://dobest.it/wp-content/cache/autoptimize/js/autoptimize_single_f1454a6d08b5c033502bd1df9e18cf2b.js?defer&generated=1738879741&ver=1.20.4" id="popup-maker-site-js"></script> <script async='async' src="https://dobest.it/wp-content/cache/autoptimize/js/autoptimize_single_b9a85169c2b51c8490f6ae65d3cdad9f.js" id="googlesitekit-events-provider-contact-form-7-js" defer></script> <script async='async' src="https://dobest.it/wp-content/cache/autoptimize/js/autoptimize_single_e887348cc3ad3a6eef75afd1db609795.js" id="googlesitekit-events-provider-popup-maker-js" defer></script> <a class="to-top" href="#page"></a></body></html>