/React-_Gallery

A Responsive image gallery with a card layout using React

Primary LanguageJavaScript

Image Gallery with React Web Application

Image Gallery

Netlify Link

  • This project aims to create a responsive image gallery with a card layout using React.
  • Each card in the gallery includes a random title, a placeholder image, and a price.
  • The gallery is accompanied by a responsive navigation bar.

Components

Navbar Component

  • Created a responsive navigation bar with links such as Home, Gallery, Contact, and About.
  • Implemented a hamburger icon for smaller screens and a dropdown list for navigation items.
  • Utilized Font Awesome icons for each navigation item.

ImageCard Component

  • Developed a card component to represent each image in the gallery.
  • Included an image, a random title, and a price in each card.
  • Applied styling for a clean and visually appealing card layout.
  • Implemented a hover effect on the card for a smooth interaction.

Gallery Component

  • Display a grid of ImageCard components.
  • Used CSS Grid to create a responsive grid layout for the gallery.
  • Populate the gallery with instances of the ImageCard component.

Given Instructions :

 ### Setup
  1. Initialize a new React project using create-react-app or your preferred method.
  2. Organize your project with proper folders for components, styles, and assets.

Random Title and Price

  • Implement a function to generate random titles and prices for each ImageCard.
  • Utilize this function when rendering the ImageCard components.

Navbar Styling

  • Style the navigation bar to be responsive, with a clean and modern look.
  • Use Font Awesome icons for each navigation item.

ImageCard Styling

  • Apply CSS styling to the ImageCard component to create an attractive card layout.
  • Implement a hover effect for a visually engaging user experience.

Gallery Layout

  • Use CSS Grid to structure the layout of the Gallery component.
  • Ensure that the gallery adjusts to different screen sizes, providing a responsive design.

Responsive Design

  • Ensure that the navigation bar and gallery components are responsive.
  • Test the application on various screen sizes to ensure a seamless user experience.

Getting Started

  1. Clone the repository:git clone [https://github.com/gitusergb/React-_Gallery]
  2. Install dependencies using npm install.
  3. Run the development server using npm start.

Contributors

Thank you !