WebStudio landing page markup - HTML/CSS/JS homework assignment for the GoIT course. Includes hero, about, team, portfolio, clients and contact sections.

What was done:

• Cloned the previous homework repository and continued work on top of the existing HTML markup
• Added animation for decorative effects across all pages according to the layout
• Added transitions for all hover/focus effects (color, background, box-shadow): duration 250ms, timing function cubic-bezier(0.4, 0, 0.2, 1)
• Explicit animated properties specified in every transition/animation — all is not used anywhere
• Positioned the "What we do" section text with background on top of the image
• Added an ::after pseudo-element underline for the current page link in the main navigation
• Implemented a blue overlay with text on Portfolio cards, appearing on hover anywhere over the card, sliding in from the bottom
• Pseudo-elements used purely for decorative purposes, with no text content in the content property
• Implemented markup and styling for the modal window backdrop (dark semi-transparent background, fixed, covering 100% of the viewport)
• Implemented markup and styling for the modal window itself, centered vertically and horizontally within the backdrop
• Implemented markup and styling for the modal close button in the top-right corner
• Modal window and backdrop are hidden by default via the is-hidden class on the backdrop, using visibility, opacity and pointer-events
• Removing the is-hidden class reveals the backdrop and modal window
• Modal appearance/hiding animated via a transition with a custom effect (scale/translate) combined with opacity
• Modal opens on the "Order service" button click and closes via the close button, using data-modal-open, data-modal-close and data-modal attributes
• Modal script connected as a separate js/modal.js file, linked before the closing </body> tag
• All tags used according to their semantic meaning
• Code formatted with Prettier and validated with the W3C HTML validator (no errors)
• Deployed via GitHub Pages, link added to the repository header

============================================================================

Верстка лендінгу студії WebStudio — домашнє завдання курсу HTML/CSS/JS на GoIT. Реалізовано секції: головна, про нас, команда, портфоліо, клієнти та контакти.

Що зроблено:

• Склоновано репозиторій попереднього домашнього завдання, робота продовжена поверх існуючої HTML-розмітки
• Додано анімацію декоративних ефектів на всіх сторінках згідно з макетом
• Для всіх ефектів ховер і фокуса (колір, фон, тінь) зроблені переходи: час 250ms, функція розподілу часу cubic-bezier(0.4, 0, 0.2, 1)
• У переходах та анімаціях явно зазначені анімовані властивості, значення all ніде не використовується
• У секції «Чим ми займаємось» текст з фоном спозиційований поверх зображення
• В головній навігації за допомогою псевдоелемента ::after зроблено підкреслення посилання поточної сторінки
• Реалізовано синій оверлей з текстом на картках сторінки «Портфоліо», що з'являється при ховері в будь-якому місці картки і виїжджає знизу
• Псевдоелементи використані виключно для декоративного оформлення, без текстового контенту у властивості content
• Виконана розмітка і оформлення «бекдропа» модального вікна (темний напівпрозорий фон, зафіксований, заповнює 100% висоти і ширини в'юпорту)
• Виконана розмітка і оформлення самого модального вікна, вертикально і горизонтально спозиційованого посередині бекдропа
• Виконана розмітка і оформлення кнопки закриття модального вікна у верхньому правому куті
• Модальне вікно і бекдроп спочатку приховані за допомогою класу is-hidden, з використанням властивостей visibility, opacity і pointer-events
• При знятті класу is-hidden з бекдропа з'являються бекдроп і модальне вікно
• Поява і приховування модального вікна анімовано за допомогою переходу з ефектом scale/translate у поєднанні з opacity
• Модальне вікно відкривається по кнопці «Замовити послугу» і закривається кнопкою закриття, за допомогою атрибутів data-modal-open, data-modal-close та data-modal
• Скрипт модального вікна підключений окремим файлом js/modal.js перед закриваючим тегом </body>
• Теги використані відповідно до їх семантичного змісту
• Код відформатовано Prettier та перевірено валідатором W3C без помилок
• Налаштовано GitHub Pages, посилання на живу сторінку додано в шапку репозиторія