Prasannad02 / Image-gallery-app

Prasanna Image Gallery is a responsive web page that showcases a collection of images. It features a scrollable gallery with navigation buttons to navigate through the images. The gallery layout is designed using CSS grid, providing a clean and organized display.

Title

Image Gallery

Description

Prasanna Image Gallery is a responsive web page that showcases a collection of images. It features a scrollable gallery with navigation buttons to navigate through the images. The gallery layout is designed using CSS grid, providing a clean and organized display. The images have a grayscale effect by default and transform to full color and slightly larger size on hover. Users can scroll horizontally using the mouse wheel or click the back and next buttons to navigate through the images.

Authors

• Prasanna

Demo

Live Demo:

https://prasannad02.github.io/Image-gallery-app/

Getting Started:

To use the Prasanna Image Gallery web page, follow these steps:

1. Download the source code:

   --Clone or download the repository to your local machine.

2. Open the project:

   --Use your preferred code editor to open the downloaded project files.

3. Customize the code:

   --Modify the HTML, CSS, and JavaScript files to match your desired design and requirements.

   --Replace the image files in the images folder with your own images or update the file paths accordingly.

   --Customize the background color, font styles, or any other CSS properties as per your preference.

4. Test the functionality:

   --Open the HTML file in a web browser to see the image gallery in action.

   --Verify that the images are displayed correctly and the gallery layout meets your expectations.

   --Test the navigation by scrolling horizontally using the mouse wheel or clicking the back and next buttons.

5. Deploy the web page:

   --Upload the modified code to your web hosting or server.

6. Explore customization options:

   --Experiment with different images to showcase your own collection.

   --Customize the gallery layout, grid dimensions, or spacing to suit your visual preferences.

   --Adjust the hover effects, such as grayscale to full color or image scaling, to create a unique user experience.

7. Enjoy the image gallery:

   --View your website or web page with the personalized image gallery.

   --Explore the images with smooth navigation and interactive hover effects.

   --Make it your own by customizing the images, background, and styling to match your desired aesthetic.

Note: The JavaScript code can be further customized to add additional functionality or interactions. Feel free to tailor the code to meet your specific needs or integrate it into your existing projects.

Features

• Responsive image gallery.

• Scrollable gallery with smooth navigation.

• Grayscale effect on images, full color on hover.

• CSS grid layout for organized display.

• Horizontal scrolling using mouse wheel.

• Back and next buttons for image navigation.

• Easy customization of images and styling.

Contributing

Contributions are always welcome!

If you have any suggestions, improvements, or bug fixes, feel free to submit a pull request. Please ensure that your contributions align with the overall design and goals of the website.

🔗 Links

For any questions or inquiries, please feel free to reach out.

Prasanna :

Thank you for visiting the page!