🏦 Bankist — Modern Digital Banking Website

A modern, minimalist banking website built with HTML, CSS, and Vanilla JavaScript, featuring interactive UI components, smooth animations, and responsive layouts.

Bankist focuses on delivering a clean and engaging user experience through elegant design, dynamic interactions, and efficient DOM manipulation.

🌐 Live Demo

🚀 Explore Bankist Live

✨ Features

• Responsive Design — Adaptable layouts for different screen sizes.
• Interactive Navigation — Smooth scrolling between page sections.
• Sticky Navigation Bar — Keeps navigation accessible while scrolling.
• Tabbed Operations — Switch between instant transfers, loans, and account closing.
• Testimonial Slider — Interactive carousel with navigation buttons, pagination dots, and keyboard controls.
• Modal Window — Interactive account-opening modal with overlay and keyboard dismissal.
• Scroll Reveal Animations — Sections appear as they enter the viewport.
• Lazy Loading Images — Images load as users approach them while scrolling.
• Navigation Hover Effects — Subtle opacity transitions for a polished interface.
• Cookie Notification — Dismissible notification message.
• Smooth User Interactions — Engaging transitions and intuitive interface behavior.

🛠️ Built With

• HTML5 — Semantic page structure.
• CSS4 — Styling, layouts, and visual effects.
• JavaScript (ES6+) — Interactive components and DOM manipulation.
• Intersection Observer API — Scroll-triggered animations, sticky navigation, and lazy loading.
• Google Fonts — Poppins typography.

📸 Preview

Visit the live demo to explore the website and interact with its features.

View Live Website →

📂 Project Structure

Bankist/
├── index.html
├── style.css
├── responsive.css
├── script.js
└── img/
    ├── logo.png
    ├── icon.png
    ├── hero.png
    └── ...

🚀 Getting Started

Follow these steps to run the project locally.

1. Clone the repository

git clone https://github.com/ElyarDev/Bankist.git

2. Navigate to the project directory

cd Bankist

3. Run the project

Open index.html in your browser, or use the Live Server extension in Visual Studio Code.

No additional dependencies or build tools are required.

🎯 What I Learned

Through this project, I practiced and strengthened my understanding of:

• DOM selection and manipulation.
• Event handling and event delegation.
• Modern JavaScript functions and array methods.
• Implementing interactive UI components.
• Working with the Intersection Observer API.
• Creating scroll-based animations and sticky navigation.
• Implementing lazy loading for images.
• Managing CSS classes dynamically with JavaScript.
• Building responsive layouts with HTML and CSS.
• Writing cleaner, more maintainable front-end code.

💡 Key Highlights

• Built interactive components using Vanilla JavaScript, without relying on a front-end framework.
• Implemented reusable interaction patterns for tabs, modals, and sliders.
• Improved the browsing experience with smooth scrolling and scroll-triggered effects.
• Focused on clean design, usability, and responsive behavior.

👨‍💻 Author

Elyar Athari

• GitHub: @ElyarDev
• Live Project: Bankist Website

---

Developed as a front-end project to practice JavaScript fundamentals, DOM manipulation, responsive web design, and interactive user interfaces.