Vins de la Nuit. Website. Presentation. Different

Vins de la Nuit. Website. Presentation. Different


“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, IE9
Tablet: 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!


Source

10 CSS3 Projects: Branding and Presentation

10 CSS3 Projects: Branding and Presentation


Envato Tuts+ Courses

  • Video courses taught by expert instructors.
  • Learn new skills from start to finish.
  • Downloadable Source Files also available on GitHub.

Course Description

In this course you’ll be using CSS3 to complete ten branding and presentation projects, from a personal business card to a PowerPoint-style presentation. These projects will help you understand some of the newest design techniques that CSS3 brings to the table. We’ll be using CodePen to build each one.

What You’ll Learn

  • How to make a fully scalable and responsive logo using SVG and CSS3.
  • Use CSS3 to make background patterns, business cards, an animated spotlight effect, and more.
  • Create a walking animation sprite, learn to recolor SVG images, and make a moving background that runs on infinite loop.
  • Create a “PowerPoint”-like presentation and a polaroid-style image gallery using CSS3.
  • Learn how to make motion typography with CSS, and how to create a smooth-scrolling, horizontally paged picture book.
  • Create a cover section for a site using CSS3 vertical parallax scrolling.

About the Instructor

Kezz Bracey is a designer and coder who specializes in web design and development. Her two focus areas are on theme development for WordPress, Ghost, and many other themeable platforms, and on finding the latest, most efficient, user-focused design and development techniques. You can follow her on Twitter.


Source

Frenzy - Clean Responsive Joomla Business Template

Frenzy – Clean Responsive Joomla Business Template


Get 24/7 Support
Follow On Envato

Frenzy is a clean and responsive Joomla 2.5.x and Joomla 3.0.x Template. It will best suited for a corporate or business site. Frenzy is configured with Kunena 2.0.3 Forum, Zoo Blog, Portfolio and a lot more you need.
Frenzy is built on Warp framework, which used HTML5 and CSS3 latest technology. It is fast loading – using built in compression of files, data URIs and gzip. That’s not enough and thus the theme comes with 10 color style which will best suited for your need and my best support is always for you.

If you like this theme please spare a while to rate it. If you want any support, please feel free to contact me.

Demo images have been replaced with placeholder images.

Key Features

  • Fully Responsive
  • Comes with a quick demo package
  • Clean and Fresh looking
  • Template based on Warp Framework
  • Supports Joomla version 2.5.x , latest verion 2.5.8 and Joomla 3.0.x, latest joomla 3.0.2
  • Kunena 2.0.2 Forum (note: not included in Joomla 3.0.x), Blog, Pricing table
  • 55+ module positions
  • 10 Color Styles
  • Based on HTML5 /CSS3 Technology
  • Portfolio with 2,3,4 columns
  • Rich Typography, Short codes and much more….

Credits

Check this item

Venture - Modern Environmental Theme

Check this item

Dynamism - Political & Activism WP Theme


Landahoy - Responsive + Retina Landing Page

Landahoy – Responsive + Retina Landing Page


Landahoy is a minimal HTML 5 theme specially designed for app landing pages.

Landahoy is a fully responsive theme meaning it is optimised for multiple device sizes, Landahoy is also Retina Ready, meaning no more blurry images on your HiDPI and Retina displays.

Landahoy Features

  1. Responsive Layout
  2. Retina Ready
  3. HTML5 and CSS3
  4. jQuery Powered
  5. Responsive Sequence Transition Slideshow
  6. Responsive Flex Slider
  7. 3 HTML Pages, Landing, About and Privacy
  8. @Font Face files Included
  9. PSD Source Included
  10. Documentation Included

Landahoy was built for non-web designer and developers, and in a few moments you can customise Landahoy to suite your own app and brand. All files are super organized, and highly documentated, so working with these files is a breeze, plus there is a step by step manual on customising this theme.

Files included

  • Landing HTML Page
  • About HTML Page
  • Privacy HTML Page
  • Full Documentation HTML page
  • Photoshop (PSD) files

.
Related Product

.
Follow Me
Follow Me
Follow Me


Magnesium - Responsive Coming Soon Template

Magnesium – Responsive Coming Soon Template


Magnesium

Responsive Coming Soon Template

Magnesium is a responsive template, which means you can use it with your phone, tablet, netbook, laptop, desktop, even with your fridge (you just need a pretty good one).

The template is built with jQuery, which quarantees your visitors to be amazed.
Sliding and fading animations will make sure your visitor will visit your page more than once!

Coded with HTML5 & CSS3. Newest technologies are used, but even IE is supported.

Javascript is ultimately configurable and the template is very easy to edit and translate to fit in your needs.

I used Fontello to compose a font for the social icons, download it here.
Instructions about usage are inside the main documentation.

Changelog

  • v. 1.00 – First release
  • v. 1.01 – Fixed input color, smoother animations & borders, removed inline css

Planned updates

  • Retina displays
  • IE7
  • More JS options
  • More bg patterns

Known bugs

  • None! :P

Flag Counter
10.7.2015 8112


Claystone - Responsive HTML Template

Claystone – Responsive HTML Template


Claystone v 1.03 Available for Download

Powerful Responsive site template designed in a clean and minimalistic style. This template is very flexible, easy for customizing, approaches for personal and professional use (blog, portfolio, etc.).

Claystone has been coded in HTML5 & CSS3 and jQuery. It has a solid flexible responsive layout that scales from 320px to 1260px with all Bootstrap features. Follow me to be notified for future updates!

Claystone developed on the Bootstrap — beautifull boilerplate for responsive development so it look beautiful at any size, be it a 17” laptop screen or an iPad, iPhone.

Visit the responsive preview site and resize your browser to see it in action or visit Claystone directly on your mobile device.

iPad and iPhone TESTED !

Visit Photomin on your Small Devices

Key Features

  • Responsive Design
    This means you website will automatically adjust its layout and proportions to suit the device it is being viewed on. The theme content will be easy to read and easy to navigate whether it is being viewed on a desktop computer, a tablet or a mobile device.
  • 22 Different Pages
  • Awesome Flex Slider and jCarousel
  • Build with Bootstrap ( All Bootstrap Features )
  • Unique Hover Effects
  • 7 Sortable Portfolio Layouts
    • 3 Columns
    • 3 Columns + Vertical Images
    • 3 Columns + Horizontal Images
    • 3 Columns + Description
    • 4 Columns + Vertical Images
    • 4 Columns + Horizontal Images
    • 3 Columns + Description
  • Blog
    • Single Post + Image
    • Single Post + Video
    • Disqus or Facebook Comments
  • Contact Form with AJAX
  • jQuery Powered
  • HTML5 + CSS3 Features
  • Cross Browser Support

ChangeLog

Version 1.03 2015-06-26
       Fixed: Cross-site Scripting (XSS) vulnerability in prettyPhoto

Version 1.02 2012-08-11
       Added: Added: PSD file (Home page)

Version 1.01 2012-08-01
       Added: Light Version
       Added: Add support for IE
       Fixed: Some bugs

Images used in the Demo
All images used in the demo are not distributed with the theme. They are all licensed under Creative Commons and credited to their respective creator/owner.

Rating

If you like my work, please rate it. If you’re about to rate it with less than 5 stars, please let me know the reason first and I will do my best to improve the theme.
Thanks so much!

Recent Projects

Crumble – Responsive WordPress Magazine / Blog

Photomin – Responsive HTML Template

Eltorn – Premium WordPress Theme

Incorn – Portfolio HTML Template

AlphaPack – Premium WordPress Theme

Ocean Premium WordPress Theme


Mahdia Jirafe - Responsive  Comingsoon Page

Mahdia Jirafe – Responsive Comingsoon Page


“Mahdia Jirafe” is a responsive coming soon template with slide show background , countdown and subscription form. Minimal Coming Soon template is carefully designed with attention to the details. Your visitors will love it. This theme allows visitors to subscribe to your mailing list, so that you can notify them about the launch.

Its defenitly standout from the crowd

Mahdia Jirafe

  • HTML5 and CSS3
  • Responsive
  • Animated Bakcground
  • jQuery countdown
  • Progress-bar
  • AJAX subscription form with validation
  • Social Icons
  • Full screen background
  • Displays perfect in all major browsers
  • Compatible with MacBook Pro’s Retina Display
  • Documentation

Update List

== v1.01 == 20/10/2012
* added Documentation

== v1.00 == 19/10/2012
* initial released


Grey HTML5 and CSS3 Responsive Template

Grey HTML5 and CSS3 Responsive Template


Grey HTML5 and CSS3 Responsive Template

Grey Responsive tempalate is a simple, clean and professional template suitable for any business or portfolio. Grey tempalate is created by using the latest HTML5 and CSS3 techniques. With a responsive design it great work with any device (desktops, tablets, smartphones, etc).

Main Features:

  • Responsive HTML5 and CSS3 tableless design
  • Facebook Open Graph ready
  • Contact Form in Header
  • jQuery enhanced:
    • 2 Sliders Parallax & Flex
    • Portfolio filtering
    • jCarousel
    • Support for custom HTML5 media
    • Easy to use Google Maps (gMap v3)
    • Fancybox (jQuery Lightbox clone)
  • Widgets
    • Latest tweets
    • Latest Flickr images
  • Ajax Contact form
  • CSS -based dropdown navigation
  • Page Templates:
    • Home
    • About
    • Categories
    • Single Post
    • Project View
    • Portfolio (multiple versions)
    • Single Project
    • Contact
  • All files are well commented
  • Crossbrowser compatible
  • Tested on iPhone & iPad
  • A/B Tested

Credits

Resources

—-

Squared - Responsive HTML5 CSS3 Creative Template

Squared – Responsive HTML5 CSS3 Creative Template


Introducing Squared2

Introducing Squared2, a responsive, fluid width, HTML5 , CSS3 creative theme.

Squared2 Features

Multiple Backgrounds

This theme comes packaged with 3 different patterned backgrounds. These included backgrounds show how well Squared2 uses different background types.

Bg Wood
Overlap
Squared

Different Layout Styles

Squared comes with two different layout styles: overlap and squared, shown below. They can be used one any element that would normally be full width to give emphasis.

Bg Square
Bg Triangle

Scripts

  • Isotope.js – project filterer
  • FlexSlider – gallery slider
  • Google Maps for contact page
  • jQuery Scripts


Mega Navigation Menu Pack With Menu Maker

Mega Navigation Menu Pack With Menu Maker


This Down Menus Supports Unlimited Levels of Hierarchy And Unlimited Numbers Of columns.
It Can Also Have Mega Menus That Can Contain Anything Like Videos,Images,Flash Files,etc…

It Comes With Drop Down Menu Maker To Create Menus Quickly.No Need To Code Manually For Your Drop down Menus
Just Copy Paste Generated Code To Your Web page Add Css And Javascripts And Your menu Is Ready To use…

Features

  • Dropdown Manu Maker Has Simple And Clean Interface.
  • Dropdown Manu Maker Genrates Well Organized. Codes With Comments To Easily Customize As Per Requirement
  • Add,Edit,Delete Items At One Click
  • Very Easy To Use.
  • Included 1 Video Tutorial On How To Use Drop Down Menu Maker And Html Documentation On How To Use Css And Javascripts As Per Your Need
  • Organized Folders
  • 60+ Backgrounds for Horizontal Drop Down Menu 18+ Background For Vertical Drop Down menus
  • Included PSD Files Of Background Images To Easily Customize Color Scheme
  • No Bubbling Simple And Smooth Animation
  • Cross-browser Compatibility
  • Cross-Platform Compatibility For Dropdown Menu Maker
  • Very Small In Size
  • Also Included Js For Simple Drop Down Menus Without Any Animation Effect
  • Included Javascripts For Floating Vertical menu And Sticky Vertical Menu
  • Css For Rounded Corner Drop Down Menus
  • Included Javascript To Auto Convert Horizontal Menu To Vertical menu On Scroll
  • Included Sample Menus Of All This Effects And More For Refrence

And Lots MORE…..

Compatible Browsers

  • Internet Explorer 6 or later
  • Firefox 2 or later
  • Safari 4 or later
  • Opera 10 or later
  • Chrome 4 or later

Jquery Version

  • Jquery-1.5.2 (Latest)

Updates:-

  • 4 new Menus

  • Horizontal Menu With Slider
  • Sticky Floating Menu
  • Slide Down Menu (Dynamite Menu)
  • Sucker-fish style Horizontal Menu
  • Updates In Dropdown Menu Maker

  • Added Functionality to Add Side Icones In Menu Items
  • Dropdown Menu Maker Can Now Genrate Organized Code With Comments So It’s Easy To Customize
  • And Also

  • Some New Sample Menus
  • Fixed Sum Bugs Related To Megamenu
  • Updated Tutorial For New Javascripts And css

Please Rate And Comment