“Vins de la Nuit” is a creative website (or web presentation) template written in HTML5 and using power of CSS transforms. Every block can be rotated, scaled and positioned as you wish by adjusting data-scale, data-rotate, data-x, data-y and data-z attributes. It is based on impress.js by B. Szopka.
Your website, with trivial html content can look absolutely differently, even revolutionary in certain sense.
Apart main page consisting of 8 blocks (that includes introductory page, about page, portfolio, video, running news, contact form) there are two static inner pages with masses of useful and well-styled features and elements.
On the main page you can navigate in three methods: 1) without mouse–using spacebar or arrow keys on your keyboard 2) with mouse–clicking semi-faded next block of content 3) with mouse–clicking anchors in navigation menu.
Important! Not every browser supports CSS transforms, therefore, to get full impression you need to open this website in Google Chrome, Safari or Firefox. Opera, Android and IE will show you working, fully functioning, however, simplified model of this layout.
Full List Of Features:
Home page
- Rotating, scaling, floating layout controlled by spacebar, arrow keys or naviagtion menu based on impress.js
- Blocks with local scroll powered by jQuery
- Valid micro data formats for stores list
- Running facts (or news) powered by jQuery
- Modal window (separate html file) for YouTube video with opening curtains and bouncing button
- Modal window (separate html file) with custom local scroll for working Contact form based on Google Docs with redirection to Thank You page
- CSS3 animations for buttons and anchors
Single product page
- Static page with unlimited height
- Bouncing animated navigation
- Custom select input with choice of options powered by jQuery
- Ready PayPal button (requires valid id to work)
- Horizontally scrolling showcase of items powered by jQuery
- Toggling box with additional list of links on footer
- CSS3 animations for navigation anchors
Anything else extra page
- Static page with unlimited height
- Bouncing animated navigation
- Styled newsblock
- Alternative portfolio with zooming effect and toggling captions
- FAQ section with toggling boxes
- Toggling box with additional list of links on footer
- CSS3 animations for navigation anchors
Downloadable Folder Includes:
- 6 html files
- 6 css files
- 9 js files
- Help file in PDF
Tested in:
iMac: FF 10.0.2 / Chrome 17.0.963 / Safari 5.1 / Opera 11.61.Windows: same browsers + IE8, IE9Tablet: Galaxy 10.01
Screenshots are taken on iMac, Google Chrome.
Things to note:
- Contact form is Google Docs based. Test the demo
- Template is tested in: latest major browsers on Mac and Windows + IE8
- Wordpress version is not (will not be) available
- Minimum screen resolution for this template is 1280px x 800px
- Adapted for tablets (viewport only). Not available for mobiles.
- Do not expect IE to work as well as Safari and Chrome do
For extra articles about customisation of template please visit my blog
Thank you!