Solis — Responsive Landing Page (Exam Project)

Fully responsive, accessible landing page built from a provided Figma mockup as a final exam project. The focus is clean semantic HTML, modular SCSS, modern layout (Flexbox/Grid), and smooth UI interactions.

Repository: https://github.com/NatalinaMatioshko/Solis-project
Live demo: https://natalinamatioshko.github.io/first-exam-project/

Project highlights

• Responsive layout (desktop-first) with careful typography scaling for different breakpoints.
• Semantic markup and improved accessibility practices (clear structure, predictable navigation).
• Modular SCSS approach with variables/mixins and reusable UI patterns.
• Micro-interactions: hover effects, transitions, and animated burger menu behavior.
• Optimized assets (images/fonts/SVG sprite) and prepared media for the hero section.

Tech stack

• HTML5
• SCSS (modular architecture)
• Responsive layout (desktop-first)
• CSS animations & hover effects

Getting started

To run locally:

1. Clone the repository:
   • git clone https://github.com/NatalinaMatioshko/Solis-project.git
2. Open index.html in a browser (or run via Live Server in VS Code).

What was practiced

• Translating a Figma layout into a real interface with consistent spacing and visual hierarchy.
• Building adaptive sections using Flexbox/Grid where appropriate (benefits/reviews/content blocks).
• Improving UI polish: buttons, forms, and navigation interactions.

Author

Natalia Matioshko — Front-End Developer (Beetroot Academy). Focused on creating user-friendly, accessible, and visually appealing web interfaces.

Solis — Адаптивний лендінг (Екзаменаційний проєкт)

Повністю адаптивний та доступний лендінг, зверстаний за наданим макетом Figma як фінальний екзаменаційний проєкт. Фокус — чистий семантичний HTML, модульна архітектура SCSS, сучасні лейаути (Flexbox/Grid) та плавні UI-взаємодії.

Репозиторій: https://github.com/NatalinaMatioshko/Solis-project
Демо (Live): https://natalinamatioshko.github.io/first-exam-project/

Основні фічі

• Адаптивна верстка (desktop-first) з продуманою типографікою під різні брейкпоінти.
• Семантична розмітка та акцент на доступності (чіткі секції, передбачувана навігація).
• Модульний SCSS зі змінними/міксинами та перевикористовуваними UI-патернами.
• Мікровзаємодії: hover-ефекти, transition, анімація бургер-меню.
• Оптимізовані ресурси (зображення/шрифти/SVG sprite) та підготовлені медіа для hero-секції.

Технології

• HTML5
• SCSS (модульна архітектура)
• Responsive layout (desktop-first підхід)
• CSS-анімації та hover-ефекти

Запуск проєкту

Щоб запустити локально:

1. Склонуй репозиторій:
   • git clone https://github.com/NatalinaMatioshko/Solis-project.git
2. Відкрий index.html у браузері (або запусти через Live Server у VS Code).

Що відпрацьовано

• Перенесення макету з Figma у реальний інтерфейс із узгодженими відступами та ієрархією.
• Побудова адаптивних секцій із використанням Flexbox/Grid там, де це доречно.
• Полірування UI: кнопки, форми, взаємодії навігації.

Автор

Natalia Matioshko — Front-End Developer (Beetroot Academy). Фокус — зручні, доступні та візуально акуратні веб-інтерфейси.