https://github.com/TanzeelaFatima492/Notification-bar

https://github.com/TanzeelaFatima492/Notification-bar

bar css html mini notification project web

Last synced: 3 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/TanzeelaFatima492/Notification-bar
• Owner: TanzeelaFatima492
• Created: 2024-09-11T12:37:47.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2025-03-08T02:53:26.000Z (over 1 year ago)
• Last Synced: 2025-10-27T06:43:18.915Z (8 months ago)
• Topics: bar, css, html, mini, notification, project, web
• Language: CSS
• Homepage: https://fatima-progmmer.github.io/Notification-bar/
• Size: 4.88 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          

---

# 🔔 Notification Bar  

A simple, customizable **Notification Bar** built using **HTML, CSS, and JavaScript**. This project allows users to display important messages, alerts, or announcements dynamically on a webpage.  

## 🌟 Features  

✅ Customizable notification text ✏️  

✅ Auto-hide after a set time ⏳  

✅ Dismiss button to close notifications ❌  

✅ Different notification types (success, error, warning, info) ⚠️  

✅ Smooth animations for better user experience 🎨  

## 🛠️ Technologies Used  

- **HTML** – Structure of the notification bar  

- **CSS** – Styling and animations  

- **JavaScript** – Controls notification behavior  

## 🚀 How to Use  

1. Clone the repository:  

   ```bash

   git clone https://github.com/Fatima-progmmer/Notification-bar.git

   ```  

2. Open `index.html` in your browser.  

3. Customize the notification text, style, and duration in the JavaScript file.  

## 📸 Preview  

![Notification Bar UI](your-image-url-here) *(Replace with a screenshot of your project)*  

## 💡 Future Enhancements  

🔹 Add multiple notification queueing system  

🔹 Allow user-defined duration for each notification  

🔹 Integrate with backend for real-time notifications  

## 📌 Contribution  

Want to improve this project? Fork the repo, make changes, and submit a pull request!  

## 📬 Connect with Me  

👩‍💻 **Tanzeela Fatima**  

🔗 [LinkedIn](https://www.linkedin.com/in/tanzeela-fatima-47861b2b7/) | 🐙 [GitHub](https://github.com/Fatima-progmmer)  

Give this project a ⭐ if you find it useful! 🚀  

---