• Facebook
  • Twitter

Tours & Tickets HTML – 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:

Icons

We’ve included 360+ font icons.

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

HTML markup:

CSS Files & Structure

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

style.less
1. Font Awesome
2. Et line Font
3. Variables
4. Slick
5. Selectize
6. Starrr
7. Magnific Popup
8. Isotope
9. Mixins
10. Portfolio
11. Animate css
12. Typography
13. Utilities
14. Media Sections
15. NstSlider
16. Beat Picker
17. Yamm
18. Menu
19. Forms
20. Buttons
21. Font Awesome
22. Boxed
23. Google Maps
24. Tickets Button
25. Section Shadow
26. Breadcumbs
27. Dividers
28. FAQ thumbnail
29. Testimonials
30. Image container
31. Headings
32. Media Box
33. InfoBox
34. PersonBox
35. ProductBox
36. IconBox
37. Tabs
38. Accordion
39. Gallery
40. Blog
41. Blocquote
42. Footer
43. Widgets
44. Media Queries

For more advanced user – we included also folder with less files  – under assets/less you will find the following files:

 

— file for motive styling

motive-parties.less
motive-tourist.less
motive-wedding.less
motive-tours.less

 

— file for buttons styling (colors, sizes etc.)
buttons.less


Javascript Components


JavaScript files:

  • /charts/ – script for canvas charts animating
  • /counters/ – Files needed for initialising the animation number after loading pages.
  • /ct-mediaSection/ – Media sections where we can add parralax, kenburns or video to the section. Dynamical content of medias..
  • /headroom/ – Animated/fixed navbars. Plugin needed for detecting scrollbar and attaching animations for menu.
  • /magnificpopup/ – Needed for galleries and their popups images where we can review them with slides via arrows.
  • /selectize.js-master/ – Plugin which creates select box for select tag in the page. It generates html code via javascript so that each browser can have the same select box.
  • /slick/ – Files which initialize sliders in the page.
  • /main.js/ – The main javascript initializaions and other major snippets.
  • /selectize/ – plugin for select https://brianreavis.github.io/selectize.js/
  • /nstSlider/ – plugin for range slider http://lokku.github.io/jquery-nstslider/
  • /starrr/ – plugin for stars in products https://github.com/dobtco/starrr

Screenshot

javascript

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/

Charts.js

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


Navigation


Css styles:

.yamm
.ct-headroom–scrollUpMenu
.ct-headroom–scrollUpTopBar
.ct-headroom–scrollUpBoth
.ct-headroom–fixedTopBar
.ct-headroom–fixedMenu
.ct-headroom–fixedBoth
.ct-headroom–hideMenu

 

Screenshot:

Navigation

Navigation

Markup:

Notice:
The following javascripts are required for the effects above:
Learn More:
You fill find whole documentation of plugin in < script src="assets/plugins/headroom/init.js"></script>

Headings


Tours & Tickets HTML has three types of heading:

Css styles:

–With border:
.ct-heading–withBorder
.ct-heading–withBorderGrey
.ct-heading–withBorderGreyDark

–Striped:
.ct-heading–striped

–With arrow:
.ct-heading–withArrow

Heading with border

Screenshot:

Heading with border

Heading with border

Markup:

 

Heading striped

Screenshot:

Heading striped

Heading striped

Markup:

 

Heading with arrow

Screenshot:

Heading with arrow

Heading with arrow

Markup :


Testimonials


Css styles:

.ct-testimonials–withBigImage
.ct-testimonials–inline

Testimonials with big image

Screenshot

testimonials with big image

Tetsimonial with big image

Markup (ct-testimonials–withBigImage) – example for one item:

 

Testimonials – inline

Screenshot

testimonials inline

Testimonials inline

Markup (ct-testimonials–inline) – example for one item:

 

JavaScript
<script src=”../assets/js/slick/js/slick.js”></script>

 


Slick Slider


There are three version of this slider in the Tours & Tickets HTML depending on the navigation class that will be used.

Css styles:

— Core classes for slick plugin
.ct-slick

.ct-js-slick

— Different navigations:

.ct-slick–arrowsTop
.ct-slick–arrowsTopBlue
.ct-slick–arrowsTopBlue-style2
.ct-slick–arrowsNoBorder
.ct-slick–arrowsCircle
.ct-slick–arrowsCustom
.ct-slick–arrowsSquare
.ct-slick–lightBlue

This classes you add to div with class .ct-slick, it adds different look for navigations.

 

Screenshot:

Slick

Slick

 

Example of HTML markup:

JavaScript markup:

— Script path: assets/js/slick/init.js, assets/js/slick/slick.js

Item slider settings:

Section decoration


In Tours & Tickets HTML you can add decoration for the element.

Css styless:

.ct-u-decoration–triangleBefore

Screenshot:

Decoration T&T

Decoration T&T

Markup:


Faq thumbnails


Css styles:

.ct-squareThumbnail
.ct-squareThumbnail–withHover

Standard faq thumbnails

Screenshot:

Faq thumbnails default

Faq thumbnails default

Markup:

Faq thumbnails with special hover

Screenshot:

Faq thumbnails with hover

Faq thumbnails with hover

Markup:


Dividers


Tours & Tickets HTML have three type of dividers:

Css styles:

.ct-divider–grey
.ct-divider–greyLight
.ct-divider–greyBig

 

Dividers grey type

Screenshot:

Divider - grey

Divider – grey

Markup:

 

Dividers grey light type

Screenshot:

Divider - grey light

Divider – grey light

Markup:

 

Dividers grey big type

Screenshot:

Divider - grey big

Divider – grey big

Markup:


Google Map Plugin


Maps in Tours & Tickets HTML are created with our premium Map plugin. Here: link you will fin full plugins documentation.


Images Containers


Css styles:

.ct-image-container–GiftCard
.ct-image–border
.ct-image–hover
.ct-image–steps
.ct-featuredItem

Gift card image containert

Screenshot:

Image container - gift card

Image container – gift card

Markup:

 

Border image container

Screenshot:

Image container - border

Image container – border

Markup:

 

Steps image containert

Screenshot:

Image container – steps

Image container – steps

Markup:

 

Featured items image containert with hover

Screenshot:

Image container – feature image

Image container – feature image

 

Markup:


Gallery


Tours & Tickets HTML has four types of hover that you can use by just adding one of hover classes to your markup.

Css styles:

.ct-gallery-filters (isotope navigation)
.ct-gallery
.ct-gallery–col1
.ct-gallery–col2
.ct-gallery–col3
.ct-gallery–col4
.ct-gallery–col5

Different types of hover for .ct-gallery-item.
.ct-gallery-itemDefaultHover
.ct-gallery-itemShadowHover
.ct-gallery-itemShadowHoverLeft
.ct-gallery-itemHoverSquare

 

Markup (example):

Gallery with default hover

Screenshot:

Gallery default hover

Gallery default hover

Gallery with hover square

Screenshot:

Gallery hover square

Gallery hover square

Gallery with shadow hover

Screenshot:

Gallery shadow hover

Gallery shadow hover

Gallery with shadow hover left

Screenshot:

Gallery shadow hover left

Gallery shadow hover left


Buttons


Tours & Tickets HTML have several variations for button styles:

Css styles:

.btn-default
.btn-primary
.btn-primaryDark
.btn-grey
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-dark
.btn-link
.btn-transparent
.btn-bordered–dark
.btn-bordered–Light

 

Buttons screenshot: 

buttonsT&T

Buttons

Exampl of markup:


Product Box


Tours & Tickets HTML have several types of product box

CSS styless:

.ct-productBox
.ct-productBox–style2
.ct-productBox–grey
.ct-productBox–moreInfo
.ct-productBox–moreInfo-inline
.ct-productBox–vertical
.ct-productBox–inline
.ct-productBox–verticalSmall
.ct-productBox–mini

 

Product box – default

Screenshot:

ct-productBox

Markup:

 

Product box – style 2

Screenshot:

Product box - style 2

Product box – style 2

Markup:

 

Product box – more info

Screenshot:

Product box - more info

Product box – more info

Markup:

 

Product box – vertical product box

Screenshot:

Product box - vertical

Product box – vertical

Markup:

 

Product box – mini product box

Screenshot:

Product box - mini

Product box – mini

Markup:


Person Box


Tours & Tickets HTML has three versions of person box.

CSS classes:

.ct-personBox
.ct-personBox–withHover
.ct-personBox–titleTop

Default person box

Screenshot:

Person box default

Person box default

Markup:

Tite top person box

Screenshot:

Person box Title top

Person box title top

Markup:

Person box with hover

Screenshot:

Person box with hover

Person box with hover

Markup:


Media box


Tours & Tickets HTML has four types of media boxes that you can use by just adding one of .ct-mediaBox element to your markup.

CSS styles:

.ct-mediaBox

add this to .ct-mediaBox element for different look:

.ct-mediaBox–inline
.ct-mediaBox–grey
.ct-mediaBox–right
.ct-mediaBox–inlineType2

Markup:

Media box default

Screenshots: 

Media box default

Media box default

Media box inline type 2 right

Media box type 2

Media box inline type 2 + right

Media box inline grey

Media box inline

Media box inline + grey


Info Box


Css styles:

.ct-infoBox
.ct-infoBox–vertical

Info Box default

Screenshot:

Info box default

Info box default

Markup:

Info Box vertical

Screenshot:

Info box vertical

Info box vertical

Markup:


Icon Box


Css styles:

.ct-iconBox
.ct-iconBox–withImage
.ct-iconBox–big

Icon Box with image

Screenshot:

Icon box with image

Icon box with image

Markup:

 

Icon Box big

Screenshot:

Icon box - big

Icon box – big

Markup:


Contact Form


Template comes with ready to use:

  • Contact 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!

 

Screenshot:

Contact form

Contact form

Markup:

 


Sources & Credits


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

Twitter Bootstrap http://twitter.github.com/bootstrap/

jQuery – http://www.jquery.com


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!