A high-fidelity, cinematic clone of the Razorpay homepage built entirely with vanilla HTML, CSS, and JavaScript — no frameworks, no dependencies. This project was developed as part of the QSkill Internship Program (Slab 2 — Intermediate Level) to demonstrate advanced front-end development skills including responsive design, scroll-based animations, 3D visual effects, and interactive UI components.
Open index.html directly in any modern browser to view the project locally. No build step or server setup is required.
Qskill_slab2/
├── index.html Main HTML document with all sections and semantic structure
├── style.css Complete stylesheet with animations, glassmorphism, and responsive layout
├── script.js Vanilla JavaScript handling all interactive behavior and animations
└── README.md Project documentation
- HTML5 — Semantic structure, accessibility attributes, SEO meta tags
- CSS3 — Custom properties, Flexbox, Grid, animations, glassmorphism, media queries
- Vanilla JavaScript (ES6+) — DOM manipulation, IntersectionObserver, Canvas API, event handling
- Google Fonts — Inter and Inter Tight typefaces loaded via CDN
- No external libraries, frameworks, or build tools
- Razorpay brand color palette — deep navy (
#072654), primary blue (#528FF0), electric cyan (#00C2FF) - Glassmorphism applied to the navigation bar, hero dashboard card, and floating elements using
backdrop-filter: blur - Animated gradient orbs in the hero background using CSS keyframe animations
- Geometric grid overlay with radial gradient masking
- Interactive particle canvas drawn using the HTML5 Canvas API with node-to-node connection lines
- CSS custom property system for consistent design tokens across all components
- Announcement Bar — Gradient animated banner with dismiss functionality
- Navbar — Sticky with scroll-triggered hide/show, glassmorphism background, mega dropdown menus, and responsive hamburger navigation
- Hero Section — Staggered fade-in animations, live mock payment dashboard with animated bar chart and transaction ticker, three floating glassmorphism info cards
- Trusted Logos — Infinite CSS marquee animation featuring major Indian brands
- Products Section — Four tabbed panels (Payment Gateway, Banking+, Payroll, POS) with distinct visual components per tab
- Features Bento Grid — Six feature cards in an asymmetric grid layout with 3D hover tilt and AI pulse animation
- Stats Section — Animated number counters triggered on scroll using IntersectionObserver
- Testimonials Carousel — Auto-playing carousel with dot navigation, prev/next buttons, touch swipe support, and keyboard arrow navigation
- Developer Section — Syntax-highlighted mock code window with a working clipboard copy button
- Pricing Section — Three-tier pricing cards with monthly/annual billing toggle
- CTA Section — Full-width call-to-action with gradient background and trust indicators
- Footer — Multi-column link grid, social icons, legal links, compliance badges, and back-to-top button
- Staggered hero entrance animations using CSS keyframes with configurable delay classes
- Scroll-reveal animation system using IntersectionObserver on all section elements
- Mouse-tracking 3D perspective tilt on the hero dashboard (rotateX/rotateY based on cursor position)
- 3D tilt effect on feature cards, pricing cards, and testimonial cards (perspective transform on mousemove)
- Magnetic button effect — buttons subtly follow the cursor
- Ripple click effect injected via JavaScript on all primary buttons
- Parallax scroll on hero gradient orbs
- Animated bar chart with per-bar entrance delays
- Live transaction ticker that randomizes payment data every 3.5 seconds
- Live revenue counter that increments every 4 seconds
- Counter number animation using exponential ease-out easing function
- Desktop — Full layout with multi-column grids, mega dropdowns, floating dashboard cards
- Tablet (max-width: 1100px) — Single-column hero, stacked product panels, 2-column bento grid
- Mobile (max-width: 768px) — Full hamburger navigation with animated open/close, single-column layouts, hidden floating cards
- Small Mobile (max-width: 480px) — Stacked CTA buttons, single-column stats, single-column footer
| Module | Description |
|---|---|
initAnnouncement |
Smooth height-collapse dismiss animation for the top bar |
initNavbar |
Scroll-based show/hide and background change |
initHamburger |
Mobile menu open/close with body scroll lock and ESC key support |
initParticles |
Canvas-based particle system with connection lines and lifecycle management |
initHero3DTilt |
Mouse-tracking 3D perspective transform on the dashboard card |
initScrollReveal |
IntersectionObserver-based entrance animation for all .reveal elements |
initProductTabs |
Tab switching with fade transition between product panels |
initTestimonialsCarousel |
Full carousel with autoplay, dots, swipe, and keyboard control |
initCounterAnimation |
Smooth number counting with exponential ease-out easing |
initPricingToggle |
Monthly/annual billing switch that swaps visible price elements |
initCopyCode |
Clipboard API code copy with visual feedback |
initBackToTop |
Scroll-aware floating button with smooth scroll |
initMagneticButtons |
Cursor-following magnetic transform on primary buttons |
initPageLoadAnimation |
Announcement bar height offset for fixed navbar positioning |
initParallax |
Scroll-driven parallax on hero orb elements |
animateChartBars |
Sequential height animation on dashboard bar chart |
initTransactionTicker |
Live mock payment updates with flash highlight |
initRipple |
Injected CSS ripple animation on button click |
initSmoothScroll |
Offset-aware smooth scroll for all anchor links |
initCardTilt |
3D perspective tilt on all card elements |
initChartInteraction |
Click-to-highlight on individual chart bars |
initLiveMetric |
Simulated live revenue counter with random increment |
initScrollSpy |
Active nav link highlighting based on visible section |
| Logo Scroll Pause | Pauses marquee animation on hover |
| Debounce Utility | Prevents excessive resize event handler calls |
| Token | Value | Usage |
|---|---|---|
| Brand Blue | #528FF0 |
Primary buttons, links, accents |
| Brand Blue Dark | #1A56E2 |
Button hover states, gradients |
| Brand Cyan | #00C2FF |
Gradient accents, highlights |
| Brand Deep | #072654 |
Section backgrounds, card fill |
| Brand Navy | #0D1B3E |
Primary text, dark backgrounds |
| Brand Midnight | #050E20 |
Footer, darkest backgrounds |
- Primary Font — Inter (weights 300 through 900)
- Display Font — Inter Tight (weights 400 through 800)
- Monospace — SF Mono, Fira Code, Cascadia Code (code window fallbacks)
- Maximum content width — 1280px
- Section vertical padding — 100px desktop, reduced on smaller screens
- Border radius tokens — sm (8px), md (14px), lg (20px), xl (28px), full (9999px)
Tested and functional in:
- Google Chrome 110+
- Mozilla Firefox 110+
- Microsoft Edge 110+
- Safari 16+
Requires support for: CSS custom properties, backdrop-filter, IntersectionObserver, Canvas 2D API, Clipboard API, CSS Grid and Flexbox.
- Clone or download this repository
- Open
index.htmlin any modern web browser - No installation, build process, or internet connection required (fonts load from Google CDN)
git clone https://github.com/winitdwd-lgtm/Qskill_slab2.git
cd Qskill_slab2
# Open index.html in your browserThis project was built as Slab 2 (Intermediate Level) of the QSkill Internship Program. The objective was to clone the Razorpay website homepage using only HTML, CSS, and JavaScript, demonstrating:
- Proficiency in semantic HTML and accessibility best practices
- Advanced CSS techniques including animations, transforms, and custom properties
- Vanilla JavaScript for DOM manipulation, event handling, and asynchronous operations
- Responsive web design across mobile, tablet, and desktop viewports
- Integration of modern UI patterns such as glassmorphism, bento grids, and scroll-triggered effects
Vineet QSkill Internship Program — Slab 2 June 2025
This project is created for educational purposes as part of an internship program. The Razorpay brand, name, and visual identity are trademarks of Razorpay Software Private Limited. This clone is not affiliated with or endorsed by Razorpay.