News > you-html

In {Theme} we used responsive tables from http://johnpolacek.github.io/stacktable.js/ HTML markup:

CSS classes: .ct-js-table-stack Javascripts:

You can use Before & After slider with magnific popup(Ajax). HTML markup:

CSS class: .ct-slider-afterANDbefore Javascripts:

Options: default_offset_pct: 0.7, // How much of the before image is visible when the page loads orientation: ‘vertical’ // Orientation of the before and after images (‘horizontal’ or ‘vertical’)

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 […]

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) data-icon – adding custom icon to map in html […]

All javascripts are placed in folder /js. In main.js file we implement all functions calls. This theme uses following Javascript scripts: Bootstrap jQuery counter(jquery.countTo.js) ct-mediaSections(with stellar.js) flexslider gmaps API isotope (http://isotope.metafizzy.co/) magnific-popup (http://dimsemenov.com/plugins/magnific-popup/) scrollme(jquery.scrollme.js) select2.js http://ivaynberg.github.io/select2/ stacktable.js (http://johnpolacek.github.io/stacktable.js/) before & after slider(jquery.twentytwenty.js) device.js jquery.appear.js jquery.pagescroller.lite.js smoothscroll.js snap.js animate.css jquery.appear This plugin call function when element […]

You can choose from 3 types of Socials: -rounded -square -square with rounded border Use the following HTML markup to add socials:

And adjust it with CSS classes: .ct-socials–circle, .ct-socials–square, .ct-socials–square-rounded

In {Theme} you can use one of 7 decoration types. Every styles has it’s own rotate variation. Use the following HTML markup:

And choose your type with CSS classes: .ct-decoration–type1, .ct-decoration–type1-rotate, .ct-decoration–type2, .ct-decoration–type2-rotate, .ct-decoration–type3, .ct-decoration–type3-rotate, .ct-decoration–type4, .ct-decoration–type4-rotate, .ct-decoration–type5, .ct-decoration–type5-rotate, .ct-decoration–type6, .ct-decoration–type6-rotate, .ct-decoration–type7, .ct-decoration–type7-rotate

There are 7 types of section buttons – each for every template style, but feel free to use them wherever you want. To add button, use the following HTML markup:

and CSS classes: .ct-header-arrow–circle, .ct-header-arrow–circleD, .ct-header-arrow–circleDecoration, .ct-header-arrow–circleDecoration2, .ct-header-arrow–circleDecoration3, .ct-header-arrow–triangle, .ct-header-arrow–shape

{Theme} comes with 7 types of dividers. We designed one for each template style, but feel free to use theme wherever you want. To add Divider use the following HTML markup:

You can adjust divider style with the following CSS classes: .ct-divider–type1, .ct-divider–type2, .ct-divider–type3, .ct-divider–type4, .ct-divider–type5, .ct-divider–type6, .ct-divider–type7

You can load your HTML conent with awesome animations enabled on scroll. To animate your HTML element, use the markup below:

You can adjust animations with the following data-attributes: data-when data-from data-to data-easing data-crop data-opacity data-scale data-scalex data-scaley data-scalez data-rotatex data-rotatey data-rotatez data-translatex data-translatey data-translatez And CSS classes: .ct-js-animationDynamic, .ct-js-animation–item Here you will find […]