Bankist - Modern Banking Website

A modern, minimalist banking website that combines cutting-edge design with seamless user experience. Built with Tailwind CSS and vanilla JavaScript, this single-page application showcases a contemporary approach to digital banking interfaces.

Features

• Responsive Design: Fully responsive layout that works seamlessly across all devices
• Modern Navigation: Smooth hamburger menu for mobile devices with animated transitions
• Hero Section: Eye-catching hero with animated text highlighting and call-to-action
• Feature Showcase: Three key features with lazy-loaded images and smooth animations
• Interactive Operations: Tab-based interface showcasing banking operations (transfers, loans, account closing)
• Testimonial Slider: Interactive carousel with customer testimonials and navigation controls
• Popup Modal: Account creation modal with form validation
• Smooth Scrolling: Navigation links with smooth scroll behavior
• Animations: Intersection Observer-based scroll animations for engaging user experience
• Lazy Loading: Images load efficiently with blur-to-sharp effect

Technologies Used

• HTML5: Semantic markup for structure
• Tailwind CSS: Utility-first CSS framework for styling
• JavaScript (ES6+): Vanilla JavaScript for interactivity
• Intersection Observer API: For scroll-triggered animations
• Font Awesome: Icon library (via CDN)
• Google Fonts: Poppins font family

Project Structure

├── index.html               # Main HTML file
├── src/
│   ├── output.css          # Compiled Tailwind CSS
│   └── script.js           # JavaScript functionality
├── images/                 # Image assets
│   ├── logo.png
│   ├── icon.png
│   ├── hero.png
│   ├── user-1.jpg - user-3.jpg
│   ├── digital-lazy.jpg
│   ├── grow-lazy.jpg
│   └── card-lazy.jpg
└── README.md               # This file

Key Components

Navigation

• Responsive navbar with hamburger menu
• Smooth scroll to sections
• Mobile-first design approach

Hero Section

• Animated text highlighting with gradient backgrounds
• Call-to-action buttons with hover effects
• Responsive layout for all screen sizes

Features Section

• Three feature cards with icons and descriptions
• Lazy-loaded images with blur effect
• Intersection Observer animations

Operations Section

• Desktop: Tabbed interface with animated content switching
• Mobile: Accordion-style dropdowns
• Color-coded operation types

Testimonials

• Interactive slider with navigation controls
• Keyboard navigation support
• Responsive design

Modal

• Account creation popup
• Form validation
• Click-outside-to-close functionality

Installation

1. Clone the repository:

   git clone https://github.com/mohamed-hossam1/Bankist-website.git

2. Navigate to the project directory:

   cd Bankist-website

3. Open index.html in your browser

Demo

View the live demo at: https://bank-website-mo.netlify.app/