🏦 Bankist Site

A bank webpage with an interactive UI as well as nice animations.

👁️ Overview

This page is simulating a real bank page which helps the customer to know more info about the bank, open an account and get in touch with the bank staff. It was implemented with nice animations and attractive designs but with keeping the performance . It was only implemented using only HTMl,Css and Js following the best coding practices.

Project Structure

• index.html: The main HTML file.
• css/style.css: The CSS file for styling.
• css/mediaQuery.css: Making the site responsive to all screens.
• js/script.js: The JavaScript file containing the site logic.

⚙️ Features

• Advanced DOM manipulation: All the page animaions were implemented depending on advanced DOM manipulation concepts (event propagation, event delegation, DOM traversing ...).🔝
• High performance: By following the best practices and keeping in mind all the issues that may face any user (limited internet connection ===> lazy images loading , using old browser ===> we used applied the method that achieve our goal and run properly in most of browsers' versions, using Intersecting observer API instead of scrolling event for better performance) .↗️
• Attractive UI: thanks to could add nice animations to our page (smooth scrolling, sections fading, images lazy loading, tapped componenet for bank featurs, slider for testimonials ... ).🌟

🔴 Notes

All the page animations were implemented using only pure js && The js Itersection observer API.

📈 Future Improvements

• API Integration: Connecting the app to real-world banking APIs for live data.
• Enhanced Analytics: Adding features for financial analytics and reports.

Technologies Used

• HTML: For the site skeleton. 🩻
• CSS: For styling components. 🎨
• JavaScript ES6/ESnext: For logic and interaction. 💻

Installation

1. Clone the Repository:

   git clone https://github.com/Abdelrahman-Adel610/Bankist-Site

2. Navigate to the Project Directory:

   cd Bankist-Site
   

Contributing

If you'd like to contribute to the Bankist-site project, please follow these guidelines:

1. Fork the Repository: 🍴 Click the "Fork" button at the top right of the repository page.

2. Create a Feature Branch: 🌱

   git checkout -b feature/your-feature

3. Commit Your Changes: 💾

   git commit -am 'Add new feature'

4. Push to the Branch: ⬆️

   git push origin feature/your-feature

5. Create a Pull Request: 🔄 Go to the repository on GitHub and create a pull request.

⚖️ License

MIT License.

---

Thank you for checking out Bankist! Feel free to sent you feedback or contribute.All feedbacks and contributions are highly appreciated.