We all need insurance because bad things can happen. Good things happen too, all the more when we work with a good aim in mind. Here is a demonstration.
My sixth web page sample, inXsure, is a home or landing page design demonstrating some of the capabilities of Quicknr Interface, my new open source collection of 12 Javascript and CSS web interface widgets. The package is used similarly to Bootstrap, but it is lighter, containing essentials only and not requiring jQuery.
The centrepiece of QI is the carousel widget, used in this sample as the “hero image slider”, covering the entire page on loading. Other widgets that are used include the collapsible navigation menu, an animated arrow button, font resizing by display area, window scroller, and responsively adjusting rows of page elements.
The carousel is derived from the one used in the Ristorante del Teatro sample, and even more fully featured. Thumb previews now only show on desktops, due to hover not working on touch devices. A new feature for display of captions is available, but turned off in this sample as it doesn’t fit the use case. Three transition types are available, and the pausing and starting of the slideshow can be finely controlled.
Widget parameters are set with HTML 5 dataset tag attributes – the web designer does not need to code any Javascript to create the widget. The widget code, however, is accessible from user’s own code if needed.
This sample is even more image-heavy than the previous, Parallax Hotel. The page loads surprisingly fast though, because most of the images load in the background during the display of the first slide.
A big thank you is due to the good people of unsplash.com, especially the photographers who provided high quality public domain images used in this sample. If you’re interested, inspect the page source code – image file names contain the photographers’ names. Some of the photos may be familiar to you already, as I am not the first web developer who has discovered this wonderful resource.
Next up, something quite similar and yet entirely different… WordPress!