NAMU Museum Landing Page

Overview

The NAMU Museum Landing Page is a dynamic, responsive website designed to showcase the National Art Museum of Ukraine. It provides visitors with a glimpse into current exhibitions, museum events, and essential information such as operating hours and contact details. The site features interactive elements that react to user states like hover and click, purely with HTML and SCSS.

Technologies

This project was built using the following technologies:

• HTML5: Semantic markup for the website's content.
• SCSS: Enhanced CSS with the use of variables, nesting, and more for styling.
• Responsive Design: The site is fully responsive, adjusting to various screen sizes and devices.

Project Structure

The project's folder structure includes:

• src:
  • fonts: Contains custom fonts used in the project.
  • images: Directory for all the images used on the site.
  • styles: SCSS files organized into:
    • blocks: Style definitions for BEM blocks.
    • content-sections: Styles for different content areas.
    • page-structure: Overall layout and structural styles.
    • utils: Utility classes and SCSS mixins.

Features

• Interactive UI: Hover and click states for buttons and links are styled using SCSS.
• Working Links: Internal navigation and external links to phone, email, and Google Maps locations.
• Responsive Design: Adapts to different device screen sizes for optimal user experience.

Installation and Launch

To get the project running locally:

1. Clone the repository:

   git clone https://github.com/mykhailonl/NAMU-museum.git

2. Navigate to the project directory:

   cd NAMU-museum

3. Install the dependencies:

   npm install

4. Compile SCSS to CSS:

   gulp // Or the appropriate command if you're using a different task runner

Live Demo

Check out the live demo to see the museum page in action.

Project Goals

The main goal of the project was to create a hands-on project to demonstrate proficiency in HTML and SCSS, as well as BEM methodology. It's designed to be a practical example of how these technologies can work together to create an interactive and visually appealing web experience.

License

This project is licensed under the GPL-3.0 License - see the LICENSE.md file for details.

Contact

For queries or suggestions, please contact at [email protected].

Enjoy your virtual visit to the NAMU Museum!