https://github.com/developerinsharah/codealpha_imagegallery_insharah
😊 This 🖼️ image Gallery is basically a internship first task of </> "Code Alpha" .😊 This project 🌐 is made with "HTML" , "CSS" , "Javascript" and "Bootstrap". 😊
https://github.com/developerinsharah/codealpha_imagegallery_insharah
bootstrap5 css3 html5 javascript
Last synced: 5 months ago
JSON representation
😊 This 🖼️ image Gallery is basically a internship first task of </> "Code Alpha" .😊 This project 🌐 is made with "HTML" , "CSS" , "Javascript" and "Bootstrap". 😊
- Host: GitHub
- URL: https://github.com/developerinsharah/codealpha_imagegallery_insharah
- Owner: DeveloperInsharah
- Created: 2024-12-23T10:19:22.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-24T09:48:39.000Z (about 1 year ago)
- Last Synced: 2025-03-19T09:48:55.267Z (12 months ago)
- Topics: bootstrap5, css3, html5, javascript
- Language: HTML
- Homepage: https://developerinsharah.github.io/CodeAlpha_ImageGallery_Insharah/
- Size: 1.54 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Hy! 👋🏻 I am Insharah Developer
That is my IMAGE GALLERY PROJECT
That is a task of our internship with Code Alpha
This is a responsive Image Gallery project developed using **HTML**, **CSS**, **JavaScript**, and **Bootstrap**. The gallery showcases images in an elegant layout, providing a smooth user experience with features like responsive design and interactive image previews.
## Features
- **Responsive Design**: The gallery adapts to various screen sizes using Bootstrap's grid system.
- **Interactive Previews**: Clicking on an image opens it in a larger view.
- **Hover Effects**: CSS animations for a polished user interface.
- **Custom Styling**: Additional styles added using custom CSS.
## Technologies Used
- **HTML**: For creating the structure of the gallery.
- **CSS**: For custom styling and hover effects.
- **JavaScript**: For interactive features like image previews.
- **Bootstrap**: For a responsive and mobile-first design.
## Setup and Installation
1. Open `index.html` in your browser to view the gallery.
## Usage
1. Add your images to the `images/` folder.
2. Update the `index.html` file to include your images in the gallery:
```html
```
3. Customize the gallery by editing the `styles.css` and `script.js` files.
## Acknowledgments
- [Bootstrap](https://getbootstrap.com/) for providing responsive design utilities.
- Inspiration for the design and features from various web development resources.