Museum Website – Responsive Design

Project Overview

This project is a responsive Museum Website designed using HTML and CSS, inspired by a Figma UI design. It showcases a collection of historical paintings and portraits through an elegant gallery-style layout.

Features

• Responsive layout for desktop, tablet, and mobile devices.
• Navigation bar with Company, Collections, Menu, Events, and Contact links.
• Four artwork cards with images and descriptions.
• Google Fonts – Inter typography.
• Hover animations on cards, navigation links, and arrows.
• CSS Grid and Flexbox for layout management.
• Rounded cards, borders, padding, and custom color styling.

Technologies Used

• HTML5
• CSS3
• Google Fonts (Inter)
• CSS Grid
• Flexbox
• Media Queries
• GitHub Pages

Project Structure

Museum-Website/
│
├── index.html
├── style.css
│
└── images/
    ├── Painting1.jpeg
    ├── Painting2.jpeg
    ├── Painting3.jpeg
    └── Painting4.jpeg

Responsive Design

The website is optimized for:

• Desktop screens
• Tablet screens
• Mobile screens

CSS media queries are used to adjust the gallery layout and navigation according to screen size.

Hover Effects

• Navigation links change background and text colors.
• Gallery cards move slightly upward on hover.
• Arrow icons animate horizontally.
• Smooth transitions improve user interaction.

How to Run Locally

1. Clone this repository:

   git clone https://github.com/YOUR-USERNAME/Museum-Website.git

2. Open the project folder in VS Code.
3. Open index.html using Live Server.

Live Demo

Add your GitHub Pages URL here after deployment.

Author

Vishal Kumar Upadhyay

---

This project was created as part of an HTML and CSS Monthly Assessment to demonstrate responsive web design, CSS styling, and interactive hover effects.