• Facebook
  • Twitter

Orlando – Responsive HTML5 Template


Support Our Blog

Thank you for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to start new ticket on this page. Thanks so much!

 

Scope of free support

 

We can help you with:

  1. Responding to questions or problems regarding the item and its features
  2. Fixing any discovered item’s bugs
  3. Providing updates to ensure compatibility with new software versions

HTML Structure


This theme is built upon bootstrap framework and is fully responsive. It adapts to window resolution and looks good on all devices including iPad and iPhone.
See for yourself (resize your browser).

If you would like to read more
about bootstrap framework click here :

Bootstrap Documentation

Grid System and Single row structure

The default Bootstrap grid system utilizes 12 columns. It’s responsive grid and adapts to viewport. Below 767px viewports, the columns become fluid and stack vertically. The fluid grid system uses percents instead of pixels for column widths. Each row always include 12 columns (for example col-md-8 + col-md-4 = col-md-12).
Bootstrap documentation: here

Basic grid HTML:

Page structure

Below you will find default page structure :


CSS Files and Structure


If you would like to edit the color, font, or style of any elements, you would do the following:

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn’t a similar style that has more weight.

I.E.

So, to ensure that your new styles are applied, make sure that they carry enough “weight” and that there isn’t a style lower in the CSS file that is being applied after yours.

Colors

The theme includes a css file wich you can use to edit the colors.
You just need to add the corresponding CSS file to the head of the page like this:

Main Menu structure

Just change brand name, upload your logo to images/content/ folder and you’re ready to go!

In order to create mega menus read the documentation here:

Yamm 3 Documentation

Icons

We’ve included 360+ font icons.

Awesome Icons – http://fontawesome.io/icons/

HTML markup:

Appearing with Animation when element in viewport

Animation can be turn off just be remove “withAnimation” class from body.
Usage:
– add “animated” class to element and data-fx=”animation-type”. That’s it.

Available animation : http://daneden.github.io/animate.css/

  • data-fx=”hinge”
  • data-fx=”bounce”
  • data-fx=”flash”
  • data-fx=”pulse”
  • data-fx=”shake”
  • data-fx=”swing”
  • data-fx=”tada”
  • data-fx=”wobble”
  • data-fx=”bounceIn”
  • data-fx=”bounceInDown”
  • data-fx=”bounceInLeft”
  • data-fx=”bounceInRight”
  • data-fx=”bounceInUp”
  • data-fx=”bounceOut”
  • data-fx=”bounceOutDown”
  • data-fx=”bounceOutLeft”
  • data-fx=”bounceOutRight”
  • data-fx=”bounceOutUp”
  • data-fx=”fadeIn”
  • data-fx=”fadeInDown”
  • data-fx=”fadeInDownBig”
  • data-fx=”fadeInLeft”
  • data-fx=”fadeInLeftBig”
  • data-fx=”fadeInRight”
  • data-fx=”fadeInRightBig”
  • data-fx=”fadeInUp”
  • data-fx=”fadeInUpBig”
  • data-fx=”fadeOut”
  • data-fx=”fadeOutDown”
  • data-fx=”fadeOutDownBig”
  • data-fx=”fadeOutLeft”
  • data-fx=”fadeOutLeftBig”
  • data-fx=”fadeOutRight”
  • data-fx=”fadeOutRightBig”
  • data-fx=”fadeOutUp”
  • data-fx=”fadeOutUpBig”
  • data-fx=”flip”
  • data-fx=”flipInX”
  • data-fx=”flipInY”
  • data-fx=”flipOutX”
  • data-fx=”flipOutY”
  • data-fx=”lightSpeedIn”
  • data-fx=”lightSpeedOut”
  • data-fx=”rotateIn”
  • data-fx=”rotateInDownLeft”
  • data-fx=”rotateInDownRight”
  • data-fx=”rotateInUpLeft”
  • data-fx=”rotateInUpRight”
  • data-fx=”rotateOut”
  • data-fx=”rotateOutDownLeft”
  • data-fx=”rotateOutDownRight”
  • data-fx=”rotateOutUpLeft”
  • data-fx=”rotateOutUpRight”
  • data-fx=”slideInDown”
  • data-fx=”slideInLeft”
  • data-fx=”slideInRight”
  • data-fx=”slideOutLeft”
  • data-fx=”slideOutRight”
  • data-fx=”slideOutUp”
  • data-fx=”rollIn”
  • data-fx=”rollOut”

CSS Files & Structure

We’ve included 2 files.
bootstrap.css contains Bootstrap 3 Library.
style.css file contains general styles.

1.A. Google Fonts
1.B. Revolution Slider styles
1.C. Magnific popup styles
1.D. Font Awesome styles
1.E Yamm styles
1.F Flexslider styles
1.G Animate css styles
2. GENERAL STYLES
3. Typography
4. Buttons
5. Pagination
6. Alerts
7. Inputs
8. Pophover
9. Header styles
10. Navbar styles
11. Call to action
12. Sections
13. Media sections – video/parallax/kenburns
14. Process circles
15. Person box
16. Service box
17. Pre footer section
18. Footer
19. Articles
20. Counters
21. Blockquote
22. Tabs
23. Images widget
24. Project single
25. Project images
26. Lists
27. Pricing box
28. Accordion
29. Socials
30. Square icons
31. Charts
32. Progress bar
33. Twitter
34. Google map
35. Flexslider
36. Revslider
37. Time circle counter
38. Thumbnail scroller
39. Magnific popup
40. Isotope
41. Helpers
42. D3 swimmers
43. WordPress
44. Media queries, adjustments
45. Motive colors

Utilities

Utility classes are low-level structural and positional traits. Utilities can be applied directly to any element, multiple utilities can be used tohether and utilities can be used alongsie component classes.

Utilities are intended for frequently used CSS properties and patterns, like: floats, containing floats, vertical alignemnt, text tryncation. Relying on utilities can help to reduce repetition and provide consistend implementations.

  • Orlando uses utilities for the following categories:
  • Typography
  • Display Types
  • Paddings
  • Margins
  • Colors
  • Borders
  • Background Colors
  • Triangles
  • Diagonals
  • Shadows

Features



Media Sections


Orlando supports media sections with Parallax, KenBurns effect and videos.

Parallax Section

We are using stellar.js for the parallax effect. Check their documentation to check which attributes you can use in each parallax section.
http://markdalgleish.com/projects/stellar.js/docs/

Our custom data-attributes for the parallax section are:

  • data-height: Define the minimun height for the sections
  • data-type: Type of Media Section (parallax/kenburns/video)
  • data-image: Background image for the section.
  • data-image-mobile: Fallback image (Should be smaller than the original) that is loaded for small devices. This will help you with the bandwidth, you’re welcome! 🙂

Ken Burns Sections

KenBurns section supports one or more images that you should add inside .media-section-image-container

Our custom data-attributes for the kenburns section are:

  • data-height: Define the minimun height for the sections
  • data-type: Type of Media Section (parallax/kenburns/video)
  • data-image-mobile: Fallback image (Should be smaller than the original) that is loaded for small devices. Kenburns it too much for ipads, iphones and so on, so we allow you to fallback to a normal image section. This way your browser won’t crash 🙂

Video Sections

We recommend you to use html5 video instead of vimeo, since in some specific browsers the sound won’t be muted.

Our custom data-attributes for the video section are:

  • data-height: Define the minimun height for the sections
  • data-type: Type of Media Section (parallax/kenburns/video)
  • data-image-mobile: Fallback image (Should be smaller than the original) that is loaded for small devices. Phones don’t autoplay video, so we just replace it for an image

Charts


Progress Bars

This theme has 2 types of layout and all you have to do is change one class. Also, everything is done via data attribute.

Stripped progress bar
  • aria-valuenow: Percentage this bar should have
  • aria-valuemax: Max value
  • aria-valuemin: Min value

Flexslider


Below you will find HTML markup for flexslider:

You can change number of flexslider parameters using javascript – learn more about parameters.


JavaScript


All javascripts are placed in folder /js. In main.js file we implement all functions calls.
This theme uses following Javascript files:

  • Bootstrap v 3 framework (powerful front-end framework for faster and easier web development)
  • jQuery v1.10.2 (A fast javascript library that Foodtruckifies how to traverse HTML documents, handle events, perform animations.)
  • jQuery FlexSlider v2.2.0
  • GMAP3 Plugin for JQuery v. 5.1.1
  • jQuery.appear
  • FitVids 1.0.3
  • jQuery Stellar
  • jQuery tweet
  • Modernizr 2.0.6
  • PageScroller
  • final-countdown.js
  • snap.js
  • device.js 0.1.58
  • chart.js

Google Map (GMAP3 Plugin)

This is google map with custom marker, you can define couple parameters:

  • data-location – address to show
  • data-height – map height (if undefined height will be 220px)
  • data-offset – by how many map should be repositioned from marker center point (default -30)

It uses gmap3 plugin.
Documentation: here
HTML Markup:

All javascript code can be found in js/main.js file.

Flexslider

Content / Images Slider.
Each parameter can be defined as data attribute :

  • data-namespace
  • data-selector
  • data-animation
  • data-easing
  • data-direction
  • data-reverse
  • data-animationloop
  • data-smoothheight
  • data-startat
  • data-slideshow
  • data-slideshowspeed
  • data-animationspeed
  • data-initdelay
  • data-randomize
  • data-thumbcaptions
  • data-pauseonaction
  • data-pauseonhover
  • data-pauseinvisible
  • data-usecss
  • data-touch
  • data-video
  • data-controlnav
  • data-directionnav
  • data-prevtext
  • data-nexttext
  • data-keyboard
  • data-multiplekeyboard
  • data-mousewheel
  • data-pauseplay
  • data-pausetext
  • data-playtext
  • data-itemwidth
  • data-itemmargin
  • data-minitems
  • data-maxitems
  • data-move
  • data-allowoneslide
  • data-controlscontainer
  • data-manualcontrols
  • data-sync
  • data-asnavfor

Read the documentation here:

Flexslider Documentation

And js initialization (js/main.js file), there you can change slider parameters:

jquery.appear

This plugin call function when element appear in viewport. This is used in custom animation, progress bars, counter timer.
Documentation: https://github.com/bas2k/jquery.appear/

fitVids

Just make video responsive.
Documentation: http://fitvidsjs.com/

HTML Markup:

and js:

Charts.js

This plugin is used to make graphics.
Documentation: http://www.chartjs.org/


Contact form


Template comes with ready to use:

  • Contact Form
  • Newsletter Form

All needed files are in /form directory.
Remember to includeon page.
To configure form just edit form/config.php and change e-mails to your own :

That’s it!

Contact Form

HTML Markup:

Newsletter Form

HTML Markup:

Options (can be changed in HTML) :

  • Mail Subject – just change value in :
  • Success Message – change successMessage div content
  • Error Message – change errorMessage div content

Twitter Feed


This is live twitter feed. This plugin will grab your latest tweets and display them on page.
Configuration: – just edit twitter/config.php file :

Where can I get these keys, tokens, etc?

Twitter API requires authentication to display tweets from your account.
To twiiter feed work you need to create the ‘application’
and generate 4 special keys for your twitter account via https://dev.twitter.com/apps:
– Consumer key (key)
– Consumer secret (secret)
– Access token (token)
– Access token secret (token_secret)
Video tutorial : “How to create Twitter App”
http://vimeo.com/60891535


Sources & Credits


The following sources and files have been used to build up this theme


Elite Author
We are elite
CreateIT
Who we are

Hi, we are createIT. We create IT. Web applications and websites to be precise.

And we are REALLY good at it.

Get to know us at www.createIT.pl
Thanks for buying!