MET Landing Page 🏛️

A stunning, responsive modern landing page for The Metropolitan Museum of Art, built to provide visitors with quick access to museum hours, current exhibitions, online collections, and contact information.

🌟 Live Demo

Click here to view the Live Demo

---

✨ Features

Here are some of the coolest functionalities and architectural choices in this project:

• Responsive Layout: Fluidly adapts to various screen sizes (mobile, tablet, and desktop) for a seamless user experience.
• BEM Methodology: Clean, maintainable, and scalable CSS structure using Block Element Modifier naming conventions.
• Smooth Animations: Incorporates engaging micro-interactions such as photo zooms on hover for exhibition pieces and interactive button styles.
• Semantic HTML5: Highly accessible and SEO-friendly document structure utilizing modern HTML5 semantic tags (<header>, <main>, <section>, <article>, <footer>).
• Dynamic Contact Form: A styled contact section with an integrated form layout designed for great usability.
• Interactive Navigation Menu: Features an off-canvas aside menu for smooth navigation across the site sections (About Us, Now On View, Explore Online, Contacts).

🛠 Tech Stack

• Supported by code quality tools like ESLint, Stylelint, and Linthtml.

🚀 Installation & Setup

To run this project locally, follow these simple steps:

1. Clone the repository:

   git clone https://github.com/dmytro-halieba/MET_landing_page.git

2. Navigate to the project directory:

   cd MET_landing_page

3. Install the dependencies:

   npm install

4. Start the development server:

   npm start

   The application will automatically open in your default browser.

💡 Usage

Once the application is running, you can:

• Scroll through to read about museum hours, locations ("The Met Fifth Avenue" & "The Met Cloisters"), and current exhibitions.
• Hover over the artworks in the "Now On View" section to interact with the smooth zoom-in effects.
• Test the Responsive Menu: Resize the browser to a mobile viewport or click the hamburger menu icon to open the sliding navigation menu (and the close button to dismiss it).
• Fill out the Contact Form: Navigate to the bottom and see the form layout (with an inline quick reset upon submission via onsubmit).

---

Author: Dmytro Halieba