Front-End Development for Italy's Major Banking Group

Project Overview

This project comprises a suite of four responsive landing pages developed for BNL – Banca Nazionale del Lavoro, part of the BNP Paribas Group, one of Europe’s largest banking institutions. The pages promote BNL’s innovative payment products, focusing on contactless technology, mobile payments, and digital wallet solutions for the Italian market.

Client: BNL (Banca Nazionale del Lavoro) – BNP Paribas Group
Agency: Arsenale23 Media Agency
Role: Front-End Development (HTML5, CSS3, JavaScript)
Timeline: July – December 2014
Scope: 4 responsive landing pages with rich animations and interactions

Products Showcased

Landing Page	Product	Purpose
Contactless	BNL Credit Cards	Promote contactless-enabled credit cards (Classic, Gold, Priority, World Elite)
Mobile Payment	YouPass NFC	Introduce NFC mobile payment technology with TIM partnership
VivereWireless	Prepaid Cards & Mobile POS	Showcase wireless payment solutions for consumers and merchants
YouPass	Prepaid YouPass Card	Dedicated page for the BNL prepaid card product

Technical Implementation

Technology Stack

Front-End Framework
├── HTML5 (semantic markup with IE conditional comments)
├── CSS3 (custom properties, transitions, @font-face)
└── JavaScript (jQuery 1.11.0)

Libraries & Plugins
├── Normalize.css 2.1.3 (cross-browser consistency)
├── Modernizr 2.6.2 + Respond.js (feature detection, IE8 polyfills)
├── jQuery Cycle2 (content carousels)
├── LayerSlider (complex animated sequences)
├── GreenSock Animation Platform (GSAP)
└── Video.js 4.6 (HTML5 video player)

Typography
├── Google Fonts (Open Sans, Ubuntu)
└── Custom BNP Paribas Sans Family (7 variants, self-hosted)

Build & Infrastructure
├── HTML5 Boilerplate v4.3.0 base
├── Static deployment (no build process)
└── Git version control (GitLab)

Browser Support

Legacy browser support was a core requirement, targeting the Italian banking customer demographic:

<!--[if lt IE 7]>  <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>     <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>     <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>  <html class="no-js"> <![endif]-->

Custom Font Implementation

The project required strict adherence to BNP Paribas brand guidelines, including custom typography:

@font-face {
    font-family: 'BNPPSans Condensed Bold';
    src: url('../fonts/bnpp-sans-cond-bold-webfont.eot');
    src: url('../fonts/bnpp-sans-cond-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/bnpp-sans-cond-bold-webfont.woff') format('woff'),
         url('../fonts/bnpp-sans-cond-bold-webfont.ttf') format('truetype'),
         url('../fonts/bnpp-sans-cond-bold-webfont.svg#bnpp_sans_condensedbold') format('svg');
}

Seven font variants were implemented to match corporate identity standards.

Architecture & Design Patterns

Single-Page Scrolling Architecture

Each landing page follows a section-based, single-page scrolling pattern optimized for storytelling:

Interactive Accordion Pattern

The Contactless page features an interactive accordion system for showcasing credit card tiers:

jQuery('.accordionHeader').click(function(e){
    e.preventDefault();
    jQuery('.accordionHeader').show();
    jQuery(this).parent().parent('.accordion').addClass('active');
    jQuery(this).parent()
        .next('.accordionContent').slideDown();
    jQuery(this).slideUp().fadeOut();
    jQuery('.accordionHeader').not(this)
        .parent()
        .parent('.accordion').removeClass('active')
        .children('.accordionContent').slideUp();

    // Reset nested slider to first slide
    jQuery('.cycle-slideshow').cycle('goto', 0);
});

Smooth Scroll Navigation

Custom anchor navigation with offset calculation for fixed header:

var $root = jQuery('html, body');
jQuery('a.simpleAnchor').click(function(e) {
    e.preventDefault();
    $root.animate({
        scrollTop: jQuery( $.attr(this, 'href') ).offset().top - 107
    }, 500);
    return false;
});

LayerSlider Animations

The Mobile Payment and VivereWireless pages feature complex sequenced animations:

<div class="ls-slide" data-ls="slidedelay: 10000; transition2d: 5;">
    <img class="ls-bg" src="img/1_background.png" />
    <img class="ls-l" src="img/1_citta.png"
         style="bottom: 100%; left: 50%;"
         data-ls="offsetxin: 0; offsetyin: 10; delayin: 0;" />
    <img class="ls-l" src="img/1_cellulare.png"
         style="top: 40%; left: 50%;"
         data-ls="offsetyin: -40; delayin: 500; showuntil: 500;" />
</div>

Development Process & Evolution

Git History Analysis

The project evolved through 194 commits across the four repositories:

Repository	Commits	Development Period
contactless	61	Jul 7 – Dec 1, 2014
viverewireless	56	Jul 2 – Jul 30, 2014
mobile_payment	45	Jul 22 – Oct 21, 2014
youpass	32	Jul 11 – Jul 16, 2014

Development Phases

Phase 1: Foundation (July 2014)

Initial HTML5 Boilerplate setup
BNP Paribas font family integration
Base responsive grid and navigation
Core styling framework

Phase 2: Interactive Features (July-August 2014)

Accordion component development
Slider/carousel integration
LayerSlider animation sequences (3 complex animations)
Parallax scrolling effects
Smooth scroll navigation

Phase 3: Content & Polish (August-October 2014)

Final content integration
Image optimization (lossless compression)
Cross-browser testing and fixes
Floating navigation implementation
Mobile viewport adjustments

Phase 4: Production (October-December 2014)

Final client revisions
Production synchronization
Bug fixes and refinements

Key Features Implemented

Visual Features

Full-viewport hero sections with animated content
Parallax scrolling backgrounds
Complex multi-layer animations (GreenSock + LayerSlider)
Image carousels with manual navigation
Interactive product cards with expand/collapse behavior
Responsive image galleries

Technical Features

Progressive enhancement for legacy browsers
Responsive design (mobile, tablet, desktop)
Page preloader with status indicator
External link handling (new window)
Equal height column synchronization
Touch-aware parallax detection

UX Features

Fixed navigation with smooth scroll anchors
Section-based navigation highlighting
Video integration with fallback
Social sharing integration (Facebook, Twitter)
Direct links to banking portal

Code Metrics

Metric	Value
HTML Files	14
CSS Files	14 (including normalize)
Custom CSS Lines	2,267
Custom JavaScript Lines	426
Total Commits	194
Font Variants	7 (custom) + 2 (Google)
Image Assets	~400

Responsive Approach

The project implements a mobile-first responsive strategy with breakpoints targeting:

Mobile: < 768px (simplified animations, stacked layouts)
Tablet: 768px – 1024px (adjusted grid, touch-optimized)
Desktop: > 1024px (full experience with all animations)

@media only screen and (max-width: 768px) {
    .notelefono { display: none; }
    /* Simplified layout for mobile */
}

Team & Credits

Development:

Lushano Perera — HTML5/CSS3/JavaScript Coding (@disconnesso)
Giovanni Dragone — PHP/JS/JSON Coding (@senzastile)

Agency:

Arsenale23 — Media Agency (Rome, Italy)

Client:

BNL – Banca Nazionale del Lavoro (BNP Paribas Group)

Lessons Learned

Legacy browser support requires careful progressive enhancement and thorough testing
Corporate font licensing and cross-browser font rendering need early attention
Complex animations benefit from specialized libraries (GreenSock) over pure CSS
Banking sector projects require meticulous attention to accessibility and usability
Multi-repository structure works well for parallel development of related products

Repository Structure

BNL/
├── contactless/          # Credit Cards landing page
│   ├── css/main.css      # 738 lines
│   ├── js/main.js        # 128 lines
│   └── .git/             # 61 commits
├── mobile_payment/       # YouPass Mobile Payment
│   ├── css/main.css      # 623 lines
│   ├── js/main.js        # 94 lines
│   └── .git/             # 45 commits
├── viverewireless/       # Wireless solutions
│   ├── css/main.css      # 440 lines
│   ├── js/main.js        # 114 lines
│   └── .git/             # 56 commits
├── youpass/              # Prepaid card
│   ├── css/main.css      # 466 lines
│   ├── js/main.js        # 90 lines
│   └── .git/             # 32 commits
└── docs/                 # Documentation