add solution

[Skoulskiy]

NAMU — National Art Museum of Ukraine (Landing Page)

A modern, responsive landing page for the National Art Museum of Ukraine (NAMU). This project showcases the museum's history, current exhibitions, detailed visitor schedules, ticketing information, and location, built with a pixel-perfect approach based on a Figma design.

🔗 Live Demo

Experience the live web application here:
NAMU — Live Demo Presentation

🔗 Layout used

Look at the layout which used:
NAMU — Layout

---

🛠️ Tech Stack & Technologies Used

The project is built using professional, modern front-end workflow tools and architectural methodologies to ensure clean, high-performance, and scalable code:

• HTML5 – Semantic, accessible markup structure.
• CSS3 / SASS (SCSS) – Modular styling utilizing advanced BEM (Block Element Modifier) methodology, fluid responsive layouts, mixins, variables, and cross-browser optimizations.
• CSS Grid & Flexbox – A custom, responsive grid system (adapting dynamically from 6 to 12 columns) designed to perfectly match Figma layout specifications across mobile, tablet, and desktop viewports.
• Vite – Next-generation, ultra-fast frontend tooling for bundling, asset optimization, and Hot Module Replacement (HMR).
• JavaScript (ES6+) – For dynamic UI components, event handling, and interactive elements.

---

🚀 Key Features

• Adaptive Grid Responsiveness – Seamlessly transitions across distinct breakpoints: Mobile ($320\text{px}+$ ), Tablet ($640\text{px}+$ / $768\text{px}+$ ), and Desktop ($1280\text{px}+$ ).
• Pixel-Perfect Layouts – Precise implementation of complex asymmetrical text alignments, grid lines, and element spacings to match the original museum design.
• Clean BEM Architecture – Highly maintainable SCSS structure that isolates styles, preventing side effects and style leaks.

---

💻 Installation & Local Development Setup

To get a local copy of this project up and running on your machine, follow these simple setup steps:

Prerequisites

Ensure you have Node.js (version 16.x or higher recommended) installed on your system.

Step-by-Step Guide

1. Clone the repository:

   git clone [https://github.com/Skoulskiy/Museum.git](https://github.com/Skoulskiy/Museum.git)

cd Museum

npm i

4. npm start

[brespect]

Everything looks good, except this buttons under the image:

[brespect]

Well done!