1 Step

Support

Outsourcing

1 Step – Responsive HTML5 Template

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:

Responding to questions or problems regarding the item and its features

Fixing any discovered item’s bugs

Providing updates to ensure compatibility with new software versions

Was this article helpful ?

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:

XHTML

<div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<div class="row">
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
  </div>
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-6">.col-md-6</div>
  </div>

Page structure

Below you will find default page structure :

<!DOCTYPE html>
   <html>
   <head>
 
   [css]
 
   </head>
   <body>
 
   [header]
   [main menu]
 
   <!-- main container -->
   <div id="wrapper">
 
     [component 1]
 
     <!-- fullwidth element -->
       </div>
         [fullwidth parallax]
       <div class="container">
     <!-- / fullwidth element -->
 
     [component 6]
 
 
   </div>
   <!-- / main container -->
 
 
   [footer]
 
   [javascripts]
 
   </body>
   </html>

<!DOCTYPE html>

<html>

<head>

[css]

</head>

<body>

[header]

[main menu]

[component 1]

</div>

[fullwidth parallax]

[component 6]

</div>

[footer]

[javascripts]

</body>

</html>

Was this article helpful ?

CSS Files and structure

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

#primaryContent a {color: #someColor;}

1	#primaryContent a {color: #someColor;}

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.

#wrap #primaryContent a {color: #someColor;}

1	#wrap #primaryContent a {color: #someColor;}

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:

<head>
    (..)
    <link rel="stylesheet" type="text/css" href="css/motive.css">
    (..)
    </head>

<head>

(..)

(..)

</head>

Icons

We’ve included 360+ font icons.

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

HTML markup:

<!-- Awesome Icons -->
        <i class="fa fa-cog"></i>

1 2	<!-- Awesome Icons --> <i class="fa fa-cog"></i>

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. Owl Slider
3. Animate.css
4. Typography
5. Paginations
6. Menu
7. Forms
8. Tables
9. Utilities
10. Divided Buttons
11. Courses Box
12. Google map
13. Photo Gallery
14. Blog list
15. Testimonials
16. Gallery isotope
17. Image box
18. Person box
19. Counters
20. Progress bars
21. icon box
22. Pricing box
23. Shop
24. Modal popup
25. Dividers
26. Social bar
27. Section title
28. Video
29. Leadership box
30. Artistic box
31. Typing animation
32. Date picker
33. Accordions/Tabs

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

plugins.less – file for plugins styling
motive.less – file for motive styling
buttons.less – file for buttons styling (colors, sizes etc.)
pageheader.less – file for page header styling

Was this article helpful ?

Javascript scripts and structure

JavaScript files:

/plugins/ct-charts/ – Files needed for initialising the charts animation on pages
/plugins/ct-counters/ – Files needed for initialising the animation number after pages loaded.
/plugins/ct-datepicker/ – The script allows you to generate your calendar. In addition, the event can be created.
/plugins/ct-mainMenu/ – Animated/fixed navbars. Plugin needed for detecting scrollbar and attaching animations for menu.
/plugins/ct-mediaSection/ – Media sections where we can add parralax, kenburns or video to the section. Dynamical content of medias.
/plugins/ct-onepager/ – Plugin for onepager only. It helps with navigation. Manages sections.
/plugins/ct-portfolio/ – Plugin which manages the isotope-based gallery.
/plugins/ct-progressbars/ – It’s file which helps us for setting elements on progressbars (times, speed, delay, text)
/plugins/ct-progressicons/ – It’s file which helps us for setting elements on progressicons
/plugins/ct-select2/ – 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.
/plugins/gmaps/ – Plugin needed for displaying google map on the page.
/plugins/grayScale-jQuery/ – This plugin allows you to obtain color “black & white” on any elements even under internet explorer. IE8 Support.
/plugins/magnificPopup/ – Needed for galleries and their popups images where we can review them with slides via arrows.
/plugins/owl/ – Files which initialize sliders in the page.
/main.js/ – The main javascript initializaions and other major snippets.
/externals.js/ – One big file where are minifixed javascript files: 1.jquery 2.boostrap 3.placeholder 4. easing 5. device.min.js 6. jquery browser 7.Snap min JS 8. jquery appear

ScreenShots

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:

<div class="ct-googleMap" data-location="Narbutta 24, Warsaw" data-zoom="15" data-height="500"></div>

1	<div class="ct-googleMap" data-location="Narbutta 24, Warsaw" data-zoom="15" data-height="500"></div>

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

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/

if (jQuery().appear) {
        if (device.mobile()) {
            // disable animation on mobile
            jQuery("body").removeClass("withAnimation");
        } else {
            jQuery('.withAnimation .animated').appear(function () {
                jQuery(this).each(function () {
                    jQuery(this).addClass('activate');
                    jQuery(this).addClass($(this).data('fx'));
                });
            }, {accY: -150});
        }
    }

if (jQuery().appear) {

if (device.mobile()) {

// disable animation on mobile

jQuery("body").removeClass("withAnimation");

} else {

jQuery('.withAnimation .animated').appear(function () {

jQuery(this).each(function () {

jQuery(this).addClass('activate');

jQuery(this).addClass($(this).data('fx'));

});

}, {accY: -150});

}

Charts.js

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

Was this article helpful ?

Header

The header can be:

static,
parallax,
kenburns
video

The header title can be placed:

– ct-pageHeader–bottomRight
– ct-pageHeader–bottomLeft
– ct-pageHeader–topRight
– ct-pageHeader–topLeft

HTML MARKUP

&lt;header class="ct-pageHeader"&gt;
    &lt;section class="ct-backgroundContent ct-u-displayTableVertical" data-type="pattern" data-height="283" data-bg-image="../assets/images/demo-content/header1.jpg" data-bg-image-mobile="../assets/images/demo-content/header1.jpg"&gt;
        &lt;div class="inner ct-u-displayTableCell ct-pageHeader--bottomRight"&gt;
            &lt;div class="container"&gt;
                &lt;div class="row"&gt;
                    &lt;div class="col-md-12"&gt;
                        &lt;h5 class="ct-pageHeader-title"&gt;
                            This is a STATIC header.
                        &lt;/h5&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/section&gt;
&lt;/header&gt;

This is a STATIC header.

</h5>

</div>

</section>

</header>

4s8Q57K.png (1898×276)
You can use also extra header title animation “like typing”. You just need to adjust HTML markup for this – please see the example below. You can set also data-animation-speed. It’s usefull with short or long header’s title.

&lt;h5 class="ct-pageHeader-title"&gt;
                                    &lt;span class="ct-js-typingAnimation" data-type="typingAnimation" data-animation-speed="3"&gt;Respect your body. Eat well. Dance forever.&lt;/span&gt;
                                &lt;/h5&gt;

<span class="ct-js-typingAnimation" data-type="typingAnimation" data-animation-speed="3">Respect your body. Eat well. Dance forever.</span>

</h5>

Was this article helpful ?

Media Sections

You can arrange your content with the following Media sections types:

HTML MARKUP for parallax

&lt;div class="ct-mediaSection" data-stellar-background-ratio="0.3" data-type="parallax" data-bg-image="path/to/the/picture" data-bg-image-mobile="path/to/the/picture"&gt;
    &lt;div class="inner"&gt;
            //content
    &lt;/div&gt;
&lt;/div&gt;

//content

</div>

HTML MARKUP for kenburns

&lt;div class="ct-mediaSection" data-height="460" data-type="kenburns" data-bg-image-mobile="path/to/the/picture.jpg"&gt;
    &lt;div class="ct-mediaSection-kenburnsImageContainer"&gt;
        &lt;img src="path/to/the/picture.jpg" alt="Picture"&gt;
        &lt;img src="path/to/the/picture.jpg" alt="Picture"&gt;
        &lt;img src="path/to/the/picture.jpg" alt="Picture"&gt;
    &lt;/div&gt;
    //content
&lt;/div&gt;

</div>

//content

</div>

HTML MARKUP for video

&lt;div class="ct-mediaSection" id="header" data-type="video" data-height="650" data-bg-image-mobile="path/to/the/image"&gt;
    &lt;div class="ct-mediaSection-video embed-responsive embed-responsive-16by9"&gt;
        &lt;video id="video1" muted="" loop="loop" autoplay="autoplay" preload="auto"&gt;
            &lt;source src="path/to/the/video.mp4" type="video/mp4"&gt;
            &lt;source src="path/to/the/video.webm" type="video/webm"&gt;
        &lt;/video&gt;
    &lt;/div&gt;
&lt;/div&gt;

</video>

</div>

JavaScript

<script src="../assets/plugins/ct-mediaSection/js/jquery.stellar.min.js"></script>
<script src="../assets/plugins/ct-mediaSection/js/init.js"></script>

1 2	<script src="../assets/plugins/ct-mediaSection/js/jquery.stellar.min.js"></script> <script src="../assets/plugins/ct-mediaSection/js/init.js"></script>

Was this article helpful ?

Google Maps

HTML MARKUP

 &lt;div class="ct-googleMap ct-googlemapStyle ct-u-marginBoth50" data-location="Manhattan, NY 56789" data-height="445" data-zoom="2" data-snap-ignore="true"&gt;&lt;/div&gt;

1	<div class="ct-googleMap ct-googlemapStyle ct-u-marginBoth50" data-location="Manhattan, NY 56789" data-height="445" data-zoom="2" data-snap-ignore="true"></div>

JavaScript

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="../assets/plugins/gmaps/gmap3.min.js"></script>
<script src="../assets/plugins/gmaps/init.js"></script>

Screenshot’s

Common question: How to define my location on the map?

To display your location on the Google map just edit data-attribute data-location in HTML markup with your address.

Was this article helpful ?

Blockquote

HTML MARKUP

&lt;blockquote class="ct-blockquote ct-blockquote-quotation ct-blockquote--quotationLeft text-center"&gt;
                            &lt;div class="ct-blockquote-content"&gt;
                                &lt;p class="ct-blockquote-citation ct-u-colorWhite"&gt;
                                    The videos quality is great and the explanations are very clear so even beginners can learn quickly.
                                &lt;/p&gt;
                                &lt;span class="ct-blockquote-author ct-u-colorMotive"&gt;
                                    - Jessica Dawn
                                &lt;/span&gt;
                            &lt;/div&gt;
                        &lt;/blockquote&gt;

The videos quality is great and the explanations are very clear so even beginners can learn quickly.

</p>

- Jessica Dawn

</span>

</div>

</blockquote>

Screenshot’s

Was this article helpful ?

Testimonials

HTML MARKUP
There are two available variations of testimonial box. With picture on the left or right side, each type has a corresponding CSS class, which needs to be added in compoenent markup:
— ct-testimonials–left
— ct-testimonials–right

&lt;div class="ct-testimonials ct-testimonials--left ct-u-marginTop70"&gt;
                    &lt;div class="ct-testimonials-image"&gt;
                        &lt;img src="../assets/images/demo-content/testimonials1.jpg" alt="Testimonial 1"&gt;
                    &lt;/div&gt;
                    &lt;div class="ct-testimonials-content"&gt;
                        &lt;div class="ct-testimonials-content-name ct-u-paddingBottom20"&gt;
                            &lt;span class="ct-u-size18"&gt;Karen Donalds&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;p class="ct-testimonials-content-description text-justify"&gt;
                            I am extremely pleased with my decision to have my daughter take dance classes from you guys.
                            The environment, the teachers and overall experience has been wonderful!
                            I would highly recommend others to look into having their children take classes here!
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum tempus magna eu gravida.
                            Cum sociis natoque penatibus et magnis dis parturient montes.
                        &lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class="clearfix"&gt;&lt;/div&gt;
                &lt;/div&gt;

</div>

<span class="ct-u-size18">Karen Donalds</span>

</div>

I am extremely pleased with my decision to have my daughter take dance classes from you guys.

The environment, the teachers and overall experience has been wonderful!

I would highly recommend others to look into having their children take classes here!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum tempus magna eu gravida.

Cum sociis natoque penatibus et magnis dis parturient montes.

</p>

</div>

</div>

Screenshot’s

Was this article helpful ?

Slider

HTML MARKUP

&lt;div id="sync1" class="ct-js-owl owl-carousel" data-single="true" data-height="" data-snap-ignore="false"&gt;
&lt;div class="item"&gt;
    &lt;img src="../assets/images/demo-content/gallery-sync-1.jpg" alt=""&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div id="sync2" class="ct-js-owl owl-carousel ct-u-paddingBoth20 ct-syncedCarousel ct-syncedCarousel--navigationBottom ct-backgroundContent"  data-type="color" data-bg-color="#f6f6f6" data-snap-ignore="false"&gt;
&lt;div class="item"&gt;
    &lt;img  src="../assets/images/demo-content/gallery-sync-thumb-1.jpg" alt=""&gt;
&lt;/div&gt;
&lt;/div&gt;

</div>

</div>

JavaScript

<script src="../assets/plugins/owl/owl.carousel.js"></script><script src="../assets/plugins/owl/sync.js"></script>
<script src="../assets/plugins/owl/init.js"></script>

1 2	<script src="../assets/plugins/owl/owl.carousel.js"></script><script src="../assets/plugins/owl/sync.js"></script> <script src="../assets/plugins/owl/init.js"></script>

Was this article helpful ?

Main carousel slider

There are several available options for the slider navigation placement. Each variation can be enabled with one of the following CSS classes added to HTML markup of the slider:

— ct-mainCarousel.ct-mainCarousel–arrowsMiddle,
— ct-mainCarousel.ct-mainCarousel–arrowsTop,
— ct-mainCarousel.ct-mainCarousel–arrowsTopRight,
— ct-mainCarousel.ct-mainCarousel–arrowsTopLeft,
— ct-mainCarousel.ct-mainCarousel–arrowsBottom,
— ct-mainCarousel.ct-mainCarousel–arrowsBottomLeft,
— ct-mainCarousel.ct-mainCarousel–arrowsBottomRight,
— ct-mainCarousel.ct-mainCarousel–arrowsCenterTop,
— ct-mainCarousel.ct-mainCarousel–arrowsCenterBottom

HTML MARKUP

&lt;!-- Main Carousel --&gt;
        &lt;div class="ct-js-owl ct-u-owl ct-mainCarousel ct-mainCarousel--arrowsMiddle" data-single="true" data-height="844" data-animations="true" data-navigation="true" data-pagination="false" data-bg="true" data-snap-ignore="true"&gt;
            &lt;div class="item" data-bg="../assets/images/demo-content/slide-number-first.jpg" data-position="center center"&gt;
                &lt;!-- 1' OwlSlider item --&gt;
                &lt;div class="inner"&gt;
                    &lt;div class="ct-dividedButtons ct-dividedButtons--bottomMiddle"&gt;
                        &lt;div class="btn-group btn-block" role="group" aria-label="..."&gt;
                            &lt;button type="button" class="btn btn-primary"&gt;Student Division (8+)&lt;/button&gt;
                            &lt;button type="button" class="btn btn-gray"&gt;Attend class &lt;i class="fa fa-angle-double-right"&gt;&lt;/i&gt;&lt;/button&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="item" data-bg="../assets/images/demo-content/main-slider-3.jpg" data-position="right center"&gt;
                &lt;!-- 2' OwlSlider item --&gt;
                &lt;div class="inner"&gt;
                    &lt;div class="ct-dividedButtons ct-dividedButtons--bottomMiddle"&gt;
                        &lt;div class="btn-group btn-block" role="group" aria-label="..."&gt;
                            &lt;button type="button" class="btn btn-primary"&gt;Student Division (8+)&lt;/button&gt;
                            &lt;button type="button" class="btn btn-gray"&gt;Attend class &lt;i class="fa fa-angle-double-right"&gt;&lt;/i&gt;&lt;/button&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="item" data-bg="../assets/images/demo-content/main-slider4.jpg" data-position="right"&gt;
                &lt;!-- 3' OwlSlider item --&gt;
                &lt;div class="inner"&gt;
                    &lt;div class="ct-dividedButtons ct-dividedButtons--bottomMiddle"&gt;
                        &lt;div class="btn-group btn-block" role="group" aria-label="..."&gt;
                            &lt;button type="button" class="btn btn-primary"&gt;Student Division (8+)&lt;/button&gt;
                            &lt;button type="button" class="btn btn-gray"&gt;Attend class &lt;i class="fa fa-angle-double-right"&gt;&lt;/i&gt;&lt;/button&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

<button type="button" class="btn btn-primary">Student Division (8+)</button>

<button type="button" class="btn btn-gray">Attend class <i class="fa fa-angle-double-right"></i></button>

</div>

<button type="button" class="btn btn-primary">Student Division (8+)</button>

<button type="button" class="btn btn-gray">Attend class <i class="fa fa-angle-double-right"></i></button>

</div>

<button type="button" class="btn btn-primary">Student Division (8+)</button>

<button type="button" class="btn btn-gray">Attend class <i class="fa fa-angle-double-right"></i></button>

</div>

JavaScript

<script src="../assets/plugins/owl/owl.carousel.js"></script>
<script src="../assets/plugins/owl/init.js"></script>

1 2	<script src="../assets/plugins/owl/owl.carousel.js"></script> <script src="../assets/plugins/owl/init.js"></script>

Screenshot’s

Was this article helpful ?

Schedule

HTML MARKUP

&lt;table class="ct-schedule ct-backgroundContent" data-type="color" data-bg-color="#f6f6f6"&gt;
    &lt;caption class="ct-u-size15 ct-fw-500"&gt;Ballet at Lunchtime&lt;/caption&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                   &lt;td&gt;Monday&lt;/td&gt;
                   &lt;td&gt;12:30pm&lt;/td&gt;
                   &lt;td&gt;1:30pm&lt;/td&gt;
               &lt;/tr&gt;
           &lt;/tbody&gt;
         &lt;/table&gt;

<caption class="ct-u-size15 ct-fw-500">Ballet at Lunchtime</caption>

<tbody>

<tr>

<td>Monday</td>

</tr>

</tbody>

</table>

Was this article helpful ?

Counters

There are two types of counters:
HTML MARKUP

&lt;div class="text-center ct-counterBox-icon"&gt;<strong>&lt;!-- Counter 'option 1 --&gt;</strong>
                        &lt;div class="ct-counter-icon"&gt;
                            &lt;i class="fa fa-desktop fa-2x"&gt;&lt;/i&gt;
                        &lt;/div&gt;
                        &lt;div class="ct-counter-content"&gt;
                            &lt;span class="ct-counter-base ct-fw-300 ct-js-counter" data-ct-to="459984" data-ct-speed="400"&gt;459 984&lt;/span&gt;
                            &lt;p class="ct-counter-description text-capitalize"&gt;
                                Pixels Crafted so far
                            &lt;/p&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;

</div>

Pixels Crafted so far

</p>

</div>

&lt;div class="text-center ct-counterBox"&gt;<strong>&lt;!-- Counter 'option 2 --&gt;</strong>
                        &lt;div class="ct-counter-content"&gt;
                            &lt;span class="ct-counter-base ct-fw-300 ct-js-counter" data-ct-to="34" data-ct-speed="10"&gt;34&lt;/span&gt;
                            &lt;p class="ct-counter-description text-uppercase"&gt;
                                Days
                            &lt;/p&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;

Days

</p>

</div>

JavaScript

<script src="../assets/plugins/ct-counters/jquery.countTo.js"></script>
<script src="../assets/plugins/ct-counters/init.js"></script>

1 2	<script src="../assets/plugins/ct-counters/jquery.countTo.js"></script> <script src="../assets/plugins/ct-counters/init.js"></script>

Screenshot’s

Was this article helpful ?

Progress bars

HTML MARKUP

&lt;div class="ct-progressBar"&gt;
                        &lt;div class="ct-progressBar-title"&gt;
                            Space for title
                        &lt;/div&gt;
                        &lt;div class="progress"&gt;
                            &lt;div class="progress-bar progress-bar--motive animating" role="progressbar" aria-valuenow="47" aria-valuemin="0" aria-valuemax="100"&gt;
                                &lt;div class="ct-progressBar-content"&gt;
                                    &lt;span class="ct-progressBar-text"&gt;47&lt;/span&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;

Space for title

</div>

</div>

JavaScript

<script src="../assets/plugins/ct-progressbars/init.js"></script>

1	<script src="../assets/plugins/ct-progressbars/init.js"></script>

Screenshot’s

Was this article helpful ?

Social Bar

HTML MARKUP

&lt;div class="ct-socialBar text-center"&gt;
            &lt;h4 class="ct-socialTitle"&gt;&lt;i class="fa fa-share-alt"&gt;&lt;/i&gt; Connect with us&lt;/h4&gt;
            &lt;hr class="divider"&gt;
            &lt;div class="container"&gt;
                &lt;div class="row"&gt;
                    &lt;div class="col-md-12"&gt;
                        &lt;div class="ct-socialList"&gt;
                            &lt;ul class="list-inline list-unstyled text-uppercase"&gt;
                                &lt;li&gt;&lt;a href="#" class="ct-socialLink"&gt;Facebook&lt;span rel="Facebook"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href="#" class="ct-socialLink"&gt;Twitter&lt;span rel="Twitter"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href="#" class="ct-socialLink"&gt;YouTube&lt;span rel="YouTube"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href="#" class="ct-socialLink"&gt;Pinterest&lt;span rel="Pinterest"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                            &lt;/ul&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

<h4 class="ct-socialTitle"><i class="fa fa-share-alt"></i> Connect with us</h4>

<li><a href="#" class="ct-socialLink">Facebook<span rel="Facebook"></span></a></li>

<li><a href="#" class="ct-socialLink">Twitter<span rel="Twitter"></span></a></li>

<li><a href="#" class="ct-socialLink">YouTube<span rel="YouTube"></span></a></li>

<li><a href="#" class="ct-socialLink">Pinterest<span rel="Pinterest"></span></a></li>

</ul>

</div>

Screenshot:

Was this article helpful ?

Tooltips

You can add tooltips only to social icons. Define tooltip placement with one of the following CSS classes added in HTML markup:
top – data-placement=”top”
bottom – data-placement=”bottom”
left – data-placement=”left”
right – data-placement=”right”

HTML MARKUP

&lt;a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Facebook"&gt;
                                                        &lt;i class="fa fa-facebook ct-fw-600"&gt;&lt;/i&gt;
                                                    &lt;/a&gt;

</a>

Screenshot

Was this article helpful ?

Photo Gallery

There are three variation of the gallery:
ct-photoGallery–alignLeft – this is the standard one
ct-photoGallery–alignRight
ct-photoGallery–alignCenter

HTML MARKUP for 2 elements (markup it’s repeatable, if you need more item just duplicate the code below)

&lt;div class="ct-photoGallery ct-photoGallery--alignLeft"&gt;
 &lt;div class="row"&gt;
  &lt;div class="col-md-12"&gt;
   &lt;div class="nav-tabs-justified"&gt;
    &lt;div class="tabpanel"&gt;
     &lt;ul class="nav nav-tabs" role="tablist"&gt;
      &lt;li role="presentation"&gt;&lt;a href="#person1" aria-controls="person1" role="tab" data-toggle="tab"&gt;&lt;img src="../assets/images/demo-content/person1.jpg" alt="Person1"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li role="presentation"&gt;&lt;a href="#person2" aria-controls="person2" role="tab" data-toggle="tab"&gt;&lt;img src="../assets/images/demo-content/person2.jpg" alt="Person2"&gt;&lt;/a&gt;&lt;/li&gt;
      (...)
      (...)
      (...)
     &lt;/ul&gt;
     &lt;div class="tab-content ct-photoBox"&gt;
      &lt;!-- person 1 --&gt;
                                    &lt;div role="tabpanel" class="tab-pane animated fadeIn" id="person1"&gt;
                                        &lt;div class="ct-personImage"&gt;
                                            &lt;img src="../assets/images/demo-content/person1-medium.jpg" alt="Person image"&gt;
                                        &lt;/div&gt;
                                        &lt;div class="ct-personDescription"&gt;
                                            &lt;h3 class="ct-personName animated" data-fx="fadeInDown"&gt;Caty Jenson #1&lt;/h3&gt;
                                            &lt;p class="ct-personAbout"&gt;
                                                Mauris eleifend elit faucibus, aliquet magna utamus, bibendum lacus. Nam a vulputate justo.
                                                Etiam mitum ipsum, aliquam sed tincidunt vitae, blandit vel oduio.
                                                Mauris malesuada tincidunt aliquet. Maecenas auctor at ipsum s.
                                            &lt;/p&gt;
                                            &lt;a href="" class="btn btn-lg btn-primary text-uppercase"&gt;subscribe today&lt;/a&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                    &lt;!-- person 2 --&gt;
                                    &lt;div role="tabpanel" class="tab-pane animated fadeIn" id="person2"&gt;
                                        &lt;div class="ct-personImage"&gt;
                                            &lt;img src="../assets/images/demo-content/person2-medium.jpg" alt="Person image"&gt;
                                        &lt;/div&gt;
                                        &lt;div class="ct-personDescription"&gt;
                                            &lt;h3 class="ct-personName animated" data-fx="fadeInDown"&gt;Caty Jenson #2&lt;/h3&gt;
                                            &lt;p class="ct-personAbout"&gt;
                                                Mauris eleifend elit faucibus, aliquet magna utamus, bibendum lacus. Nam a vulputate justo.
                                                Etiam mitum ipsum, aliquam sed tincidunt vitae, blandit vel oduio.
                                                Mauris malesuada tincidunt aliquet. Maecenas auctor at ipsum s.
                                            &lt;/p&gt;
                                            &lt;a href="" class="btn btn-lg btn-primary text-uppercase"&gt;subscribe today&lt;/a&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;

(...)

</ul>

</div>

<h3 class="ct-personName animated" data-fx="fadeInDown">Caty Jenson #1</h3>

Mauris eleifend elit faucibus, aliquet magna utamus, bibendum lacus. Nam a vulputate justo.

Etiam mitum ipsum, aliquam sed tincidunt vitae, blandit vel oduio.

Mauris malesuada tincidunt aliquet. Maecenas auctor at ipsum s.

</p>

<a href="" class="btn btn-lg btn-primary text-uppercase">subscribe today</a>

</div>

</div>

<h3 class="ct-personName animated" data-fx="fadeInDown">Caty Jenson #2</h3>

Mauris eleifend elit faucibus, aliquet magna utamus, bibendum lacus. Nam a vulputate justo.

Etiam mitum ipsum, aliquam sed tincidunt vitae, blandit vel oduio.

Mauris malesuada tincidunt aliquet. Maecenas auctor at ipsum s.

</p>

<a href="" class="btn btn-lg btn-primary text-uppercase">subscribe today</a>

</div>

Screenshot:

Was this article helpful ?

Rounded Gallery

Rounded Gallery with magnific-popup

HTML markup:

&lt;div class="ct-galleryRounded ct-galleryRounded--8people ct-u-paddingBoth50 ct-gallery-popup"&gt;
            &lt;div class="container"&gt;
                &lt;!-- Rounded Gallery: 1 line --&gt;
                &lt;div class="row"&gt;
                   &lt;div class="col-md-12"&gt;
                       &lt;div class="ct-galleryFirstLine"&gt;
                           &lt;div class="row"&gt;
                               &lt;div class="col-lg-3 col-lg-offset-3 col-md-4 col-sm-4 col-sm-offset-2 col-xs-12"&gt;
                                   &lt;div class="ct-personImage"&gt;
                                       &lt;div class="ct-imageHovered"&gt;
                                           &lt;a href="../assets/images/demo-content/wallhaven-113665.jpg" data-effect="mfp-move-from-top" title="Space on appropriate title #1."&gt;
                                               &lt;img class="img-responsive img-circle img1" src="../assets/images/demo-content/roundedGallery-person1.png" alt="Person 1"&gt;
                                           &lt;/a&gt;
                                       &lt;/div&gt;
                                   &lt;/div&gt;
                               &lt;/div&gt;
                               &lt;div class="col-lg-3 col-md-4 col-sm-4 col-xs-12"&gt;
                                   &lt;div class="ct-personImage ct-personImage--MarginLeft25"&gt;
                                       &lt;div class="ct-imageHovered"&gt;
                                           &lt;a href="../assets/images/demo-content/46e7a3321e16c34e8d4b44f248df4a32.jpeg" data-effect="mfp-move-from-top" title="Space on appropriate title #2."&gt;
                                               &lt;img class="img-responsive img-circle img2" src="../assets/images/demo-content/roundedGallery-person2.png" alt="Person 2"&gt;
                                           &lt;/a&gt;
                                       &lt;/div&gt;
                                   &lt;/div&gt;
                               &lt;/div&gt;
                           &lt;/div&gt;
                       &lt;/div&gt;
                   &lt;/div&gt;
                &lt;/div&gt;
                &lt;!-- Rounded Gallery: 2 line --&gt;
                &lt;div class="row"&gt;
                    &lt;div class="col-md-12"&gt;
                        &lt;div class="ct-gallerySecondLine"&gt;
                            &lt;div class="row"&gt;
                                &lt;div class="col-lg-3 col-lg-offset-2 col-md-4 col-sm-4 col-xs-12"&gt;
                                    &lt;div class="ct-personImage ct-personImage--MarginLeft25"&gt;
                                        &lt;div class="ct-imageHovered"&gt;
                                            &lt;a href="../assets/images/demo-content/32e54468767ce97dfbc99ddf03d3a983.jpg" data-effect="mfp-move-from-top" title="Space on appropriate title #3."&gt;
                                                &lt;img class="img-responsive img-circle img3" src="../assets/images/demo-content/roundedGallery-person3.png" alt="Person 3"&gt;
                                            &lt;/a&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class="col-lg-3 col-md-4 col-sm-4 col-xs-12"&gt;
                                    &lt;div class="ct-personImage ct-personImage--MarginLeft50"&gt;
                                        &lt;div class="ct-imageHovered"&gt;
                                            &lt;a href="../assets/images/demo-content/wallhaven-86108.jpg" data-effect="mfp-move-from-top" title="Space on appropriate title #4."&gt;
                                                &lt;img class="img-responsive img-circle img4" src="../assets/images/demo-content/roundedGallery-person4.png" alt="Person 4"&gt;
                                            &lt;/a&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class="col-lg-3 col-md-4 col-sm-4 col-xs-12"&gt;
                                    &lt;div class="ct-personImage ct-personImage--MarginLeft75"&gt;
                                        &lt;div class="ct-imageHovered"&gt;
                                            &lt;a href="../assets/images/demo-content/wallhaven-93028.jpg" data-effect="mfp-move-from-top" title="Space on appropriate title #5."&gt;
                                                &lt;img class="img-responsive img-circle img5" src="../assets/images/demo-content/roundedGallery-person5.png" alt="Person 5"&gt;
                                            &lt;/a&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;!-- Rounded Gallery: 3 line --&gt;
                &lt;div class="row"&gt;
                    &lt;div class="col-md-12"&gt;
                        &lt;div class="ct-galleryThirdLine"&gt;
                            &lt;div class="row"&gt;
                                &lt;div class="col-lg-3 col-lg-offset-3 col-md-4 col-sm-4 col-sm-offset-2 col-xs-12"&gt;
                                    &lt;div class="ct-personImage"&gt;
                                        &lt;div class="ct-imageHovered"&gt;
                                            &lt;a href="../assets/images/demo-content/wallhaven-119023.jpg" data-effect="mfp-move-from-top" title="Space on appropriate title #6."&gt;
                                                &lt;img class="img-responsive img-circle img6" src="../assets/images/demo-content/roundedGallery-person6.png" alt="Person 6"&gt;
                                            &lt;/a&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class="col-lg-3 col-sm-4 col-md-4 col-xs-12"&gt;
                                    &lt;div class="ct-personImage ct-personImage--MarginLeft25"&gt;
                                        &lt;div class="ct-imageHovered"&gt;
                                            &lt;a href="../assets/images/demo-content/3ac547676d5d3dbb8b2be73e2d214acc.jpg" data-effect="mfp-move-from-top" title="Space on appropriate title #7."&gt;
                                                &lt;img class="img-responsive img-circle img7" src="../assets/images/demo-content/roundedGallery-person7.png" alt="Person 7"&gt;
                                            &lt;/a&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;!-- Rounded Gallery: 4 line --&gt;
                &lt;div class="row"&gt;
                    &lt;div class="col-md-12"&gt;
                        &lt;div class="ct-galleryFourLine"&gt;
                            &lt;div class="row"&gt;
                                &lt;div class="col-lg-3 col-lg-offset-5 col-md-4 col-sm-4 col-sm-offset-4 col-xs-12"&gt;
                                    &lt;div class="ct-personImage ct-personImage--MarginLeft50"&gt;
                                        &lt;div class="ct-imageHovered"&gt;
                                            &lt;a href="../assets/images/demo-content/roundedGallery-person8-huge.png" data-effect="mfp-move-from-top" title="Space on appropriate title #8."&gt;
                                                &lt;img class="img-responsive img-rounded img8" src="../assets/images/demo-content/roundedGallery-person8.png" alt="Person 8"&gt;
                                            &lt;/a&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

100

101

102

103

104

105

106

107

108

109

110

111

112

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

JavaScript files:

<script src="../assets/plugins/magnificPopup/jquery.magnific-popup.js"></script>
<script src="../assets/plugins/magnificPopup/init.js"></script>

1 2	<script src="../assets/plugins/magnificPopup/jquery.magnific-popup.js"></script> <script src="../assets/plugins/magnificPopup/init.js"></script>

Screenshot

Was this article helpful ?

Decoration Carousel

HTML MARKUP

&lt;div class="ct-owlCarousel-frame center-block"&gt;
                        &lt;div class="ct-owlCarousel-slideSpacer"&gt;
                            &lt;div class="ct-js-owl owl-carousel ct-decorationCarousel ct-decorationCarousel--navBottomCenter" data-single="true" data-pagination="true" data-autoplay="true" data-navigation="false" data-height="" data-stopOnHover="true" data-snap-ignore="true"&gt;
                                &lt;div class="item"&gt;
                                    &lt;img src="../assets/images/demo-content/ipad-img1.png" alt="Team Member 1"&gt;
                                &lt;/div&gt;
                                &lt;div class="item"&gt;
                                    &lt;img src="../assets/images/demo-content/ipad-img2.jpg" alt="Team Member 2"&gt;
                                &lt;/div&gt;
                                &lt;div class="item"&gt;
                                    &lt;img src="../assets/images/demo-content/ipad-img3.jpg" alt="Team Member 3"&gt;
                                &lt;/div&gt;
                                &lt;div class="item"&gt;
                                    &lt;img src="../assets/images/demo-content/ipad-img4.jpg" alt="Team Member 4"&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;

</div>

</div>

</div>

</div>

Screenshot

Was this article helpful ?

Isotope gallery with popup

HTML MARKUP

&lt;ul class="list-unstyled ct-gallery-filters"&gt;&lt;!-- Isotope nav --&gt;
   &lt;li&gt;&lt;a data-filter="*" class="active"&gt;ALL&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a data-filter=".classical"&gt;CLASSICAL&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a data-filter=".neo-classical"&gt;NEO-CLASSICAL&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a data-filter=".contemporary"&gt;CONTEMPORARY&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
&lt;div class="ct-gallery ct-gallery--col3 ct-gallery--withSpacing is-loaded"&gt;
 &lt;div class="ct-gallery-item ct-gallery-item--masonry classical"&gt;&lt;!-- Gallery's 1 item--&gt;
                                &lt;div class="ct-gallery-itemInner"&gt;
                                    &lt;div class="ct-galleryBox ct-galleryBox--type1 ct-galleryBox--motive"&gt;
                                        &lt;a class="ct-js-magnificPopupImage ct-galleryBox ct-galleryBox--type1 ct-galleryBox--motive" href="../assets/images/demo-content/gallery1.jpg"&gt;
                                            &lt;figure&gt;
                                                &lt;img src="../assets/images/demo-content/gallery1.jpg" class="ct-portfolio-image" alt="Gallery picture 1"&gt;
                                                &lt;figcaption class="ct-galleryBox-overlay"&gt;
                                                    &lt;div class="ct-galleryBox-overlay-imageTitle"&gt;
                                                        Orange Ballerina Dancing
                                                    &lt;/div&gt;
                                                    &lt;div class="ct-galleryBox-overlay-imageView"&gt;
                                                        &lt;span&gt;See&lt;/span&gt;
                                                    &lt;/div&gt;
                                                &lt;/figcaption&gt;
                                            &lt;/figure&gt;
                                        &lt;/a&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
&lt;/div&gt;

<li><a data-filter=".classical">CLASSICAL</a></li>

<li><a data-filter=".neo-classical">NEO-CLASSICAL</a></li>

<li><a data-filter=".contemporary">CONTEMPORARY</a></li>

</ul>

Orange Ballerina Dancing

</div>

</div>

</figcaption>

</figure>

</a>

</div>

JavaScript

<script src="../assets/plugins/ct-portfolio/jquery.isotope.min.js"></script>
<script src="../assets/plugins/ct-portfolio/imagesloaded.js"></script>
<script src="../assets/plugins/ct-portfolio/init.js"></script>
<script src="../assets/plugins/magnificPopup/jquery.magnific-popup.js"></script>
<script src="../assets/plugins/magnificPopup/init.js"></script>

Screenshot’s

Was this article helpful ?

Icon Boxes

Option 1
HTML MARKUP

&lt;div class="ct-iconBox ct-iconBox--type1"&gt;
                                        &lt;a href="#" class="ct-iconBox-Icon ct-iconBox-IconEffect ct-iconBox-effectHelper"&gt;
                                            &lt;i class="fa fa-pie-chart"&gt;&lt;/i&gt;
                                        &lt;/a&gt;
                                        &lt;div class="ct-iconBox-content"&gt;
                                            &lt;h5 class="ct-iconBox-title text-capitalize"&gt;
                                                &lt;a href=""&gt;Online Classes&lt;/a&gt;
                                            &lt;/h5&gt;
                                            &lt;p class="ct-iconBox-description ct-u-colorWhite text-justify-xs"&gt;
                                                Paid membership includes video classes, when you want, from your computer, tablet,
                                                or mobile device. Be inspired, learn new moves and keep fit with well-known dance instructors.
                                            &lt;/p&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;

</a>

<a href="">Online Classes</a>

</h5>

Paid membership includes video classes, when you want, from your computer, tablet,

or mobile device. Be inspired, learn new moves and keep fit with well-known dance instructors.

</p>

</div>

Option 2
HTML MARKUP

&lt;div class="ct-iconBox ct-iconBox--square"&gt;
                                        &lt;a href="#" class="ct-iconBox-icon ct-iconBox-IconEffect ct-iconBox-effectHelper"&gt;
                                            &lt;i class="fa fa-user-secret"&gt;&lt;/i&gt;
                                        &lt;/a&gt;
                                        &lt;div class="ct-iconBox-content ct-u-colorWhite"&gt;
                                            &lt;h5 class="ct-iconBox-title"&gt;&lt;a href=""&gt;Online Classes&lt;/a&gt;&lt;/h5&gt;
                                            &lt;p class="ct-iconBox-description text-justify-xs"&gt;
                                                Paid membership includes video classes, when you want, from your computer, tablet,
                                                or mobile device. Be inspired, learn new moves and keep fit with well-known dance instructors.
                                            &lt;/p&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;

</a>

<h5 class="ct-iconBox-title"><a href="">Online Classes</a></h5>

Paid membership includes video classes, when you want, from your computer, tablet,

or mobile device. Be inspired, learn new moves and keep fit with well-known dance instructors.

</p>

</div>

Option 3
HTML MARKUP

&lt;div class="ct-iconBox ct-iconBox--pentagon"&gt;
                                        &lt;a href="#" class="ct-iconBox-icon ct-iconBox-IconEffect ct-iconBox-effectHelper"&gt;
                                            &lt;svg width="50" height="50" viewBox="-1 0 101 100"&gt;
                                                &lt;path d="M20,0 L80,0 L100,60 L50,100 L0,60z"&gt;&lt;/path&gt;
                                            &lt;/svg&gt;
                                            &lt;i class="fa fa-user-secret"&gt;&lt;/i&gt;
                                        &lt;/a&gt;
                                        &lt;div class="ct-iconBox-content ct-u-colorWhite"&gt;
                                            &lt;h5 class="ct-iconBox-title"&gt;&lt;a href=""&gt;Online Classes&lt;/a&gt;&lt;/h5&gt;
                                            &lt;p class="ct-iconBox-description text-justify-xs"&gt;
                                                Paid membership includes video classes, when you want, from your computer, tablet, or mobile device. Be inspired,
                                                learn new moves and keep fit with well-known dance instructors.
                                            &lt;/p&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;

</svg>

</a>

<h5 class="ct-iconBox-title"><a href="">Online Classes</a></h5>

Paid membership includes video classes, when you want, from your computer, tablet, or mobile device. Be inspired,

learn new moves and keep fit with well-known dance instructors.

</p>

</div>

Option 4
HTML MARKUP

&lt;div class="ct-iconBox ct-iconBox--rectangle"&gt;
                        &lt;a href="#" class="ct-iconBox-icon ct-iconBox-IconEffect ct-iconBox-effectHelper"&gt;
                            &lt;i class="fa fa-users"&gt;&lt;/i&gt;
                        &lt;/a&gt;
                        &lt;div class="ct-iconBox-content"&gt;
                            &lt;h5 class="ct-iconBox-title"&gt;&lt;a href=""&gt;Online Classes&lt;/a&gt;&lt;/h5&gt;
                            &lt;p class="ct-iconBox-description"&gt;
                                Paid membership includes video classes, when you want, from your computer, tablet,
                                or mobile device. Be inspired, learn new moves and keep fit with well-known dance instructors.
                            &lt;/p&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;

</a>

<h5 class="ct-iconBox-title"><a href="">Online Classes</a></h5>

Paid membership includes video classes, when you want, from your computer, tablet,

or mobile device. Be inspired, learn new moves and keep fit with well-known dance instructors.

</p>

</div>

Screenshot:

Was this article helpful ?

Courses box

HTML MARKUP

&lt;article class="ct-coursesBox"&gt;
                                    &lt;a href="#"&gt;
                                        &lt;div class="ct-coursesBox-image"&gt;
                                            &lt;img src="../assets/images/demo-content/coursesBox-1.jpg" class="grayscale grayscale-fade" alt="Team Member 1"&gt;
                                            &lt;div class="ct-coursesIcon"&gt;
                                                &lt;div class="text-uppercase ct-fw-600 ct-u-paddingTop5"&gt;BEG&lt;/div&gt;
                                                &lt;div class="text-capitalize"&gt;Lvl1&lt;/div&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                    &lt;/a&gt;
                                    &lt;h4 class="ct-coursesBox-title"&gt;&lt;a href="#" class="ct-u-colorInherit"&gt;Shuffle Toe Heel Wiggles&lt;/a&gt;&lt;/h4&gt;
                                    &lt;span class="ct-coursesBox-subtitle"&gt;Teacher: &lt;a href="#"&gt;Marta Davis&lt;/a&gt;&lt;/span&gt;
                                &lt;/article&gt;

</div>

</a>

<h4 class="ct-coursesBox-title"><a href="#" class="ct-u-colorInherit">Shuffle Toe Heel Wiggles</a></h4>

<span class="ct-coursesBox-subtitle">Teacher: <a href="#">Marta Davis</a></span>

</article>

How it looks?

Was this article helpful ?

Person Box

HTML MARKUP

&lt;a href="single-member" class="ct-personBox ct-personBox--primary"&gt;
    &lt;figure class="ct-personBox-image"&gt;
         &lt;img src="../path/image.*" alt="Person 2"&gt;
         &lt;figcaption&gt;
             &lt;div class="ct-personBox-name"&gt;Lisa Donalds&lt;/div&gt;
                   &lt;span class="ct-personBox-linkHelper"&gt;See&lt;/span&gt;
          &lt;/figcaption&gt;
     &lt;/figure&gt;
&lt;/a&gt;

<div class="ct-personBox-name">Lisa Donalds</div>

</figcaption>

</figure>

</a>

Was this article helpful ?

Leadership box

There are two available variation of the box:
ct-leadershipBox–left
ct-leadershipBox–right

&lt;div class="ct-leadershipBox ct-leadershipBox--left"&gt;
                                &lt;div class="ct-leadershipBox-description"&gt;
                                    &lt;div class="ct-leadershipBox-title"&gt;
                                        &lt;h1 class="ct-leadershipBox-firstName"&gt;Megan&lt;/h1&gt;
                                        &lt;h2 class="ct-leadershipBox-surName"&gt;Trainers&lt;/h2&gt;
                                        &lt;span class="ct-leadershipBox-positionName ct-fw-300"&gt;Founder of 1STEP&lt;/span&gt;
                                    &lt;/div&gt;
                                    &lt;p class="ct-leadershipBox-basicInformation text-justify-xs"&gt;
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris leo nibh, suscipit et nibh sed, posuere veneuis massa.
                                        Aliquam nunc nulla, imperdiet sed mattis id, consequat aliquet diam. Fusce dictum feugiat aliquam. Phasellus diam libero,
                                        mollis vel velit quis, bibendum volutpat turpis. Proin id gravida diam. Donec tempor, enim ac vulputate vehicula, odio arcu vulputate dui,
                                        at tristique dui nibh ut nisl. Aliquam lacinia pretium urna, eget tincidunt ipsum accumsan sit amet. In faucibus lacinia est.
                                        Praesent dapibus, dolor id vehicula sodales, justo diam eleifend ipsum, vel laoree.
                                    &lt;/p&gt;
                                &lt;/div&gt;
                                &lt;div class="ct-leadershipBox-image animated" data-fx="" data-time=""&gt;
                                    &lt;img src="../assets/images/demo-content/leadership-1.jpg" alt="Leadership 1" class="img-responsive"&gt;
                                &lt;/div&gt;
                                &lt;div class="clearfix"&gt;&lt;/div&gt;
                            &lt;/div&gt;

<h1 class="ct-leadershipBox-firstName">Megan</h1>

<h2 class="ct-leadershipBox-surName">Trainers</h2>

<span class="ct-leadershipBox-positionName ct-fw-300">Founder of 1STEP</span>

</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris leo nibh, suscipit et nibh sed, posuere veneuis massa.

Aliquam nunc nulla, imperdiet sed mattis id, consequat aliquet diam. Fusce dictum feugiat aliquam. Phasellus diam libero,

mollis vel velit quis, bibendum volutpat turpis. Proin id gravida diam. Donec tempor, enim ac vulputate vehicula, odio arcu vulputate dui,

at tristique dui nibh ut nisl. Aliquam lacinia pretium urna, eget tincidunt ipsum accumsan sit amet. In faucibus lacinia est.

Praesent dapibus, dolor id vehicula sodales, justo diam eleifend ipsum, vel laoree.

</p>

</div>

</div>

</div>

JavaScript:
Screenshot’s:

Was this article helpful ?

Image Box

HTML MARKUP
There are two types of image boxes. Define which one you would like to use with the proper CSS class added to HTML markup:
-ct-imageBox–type1
-ct-imageBox–type2

&lt;div class="ct-imageBox ct-imageBox--type2"&gt;
                            &lt;a href="#" class="ct-imageBox-image"&gt;
                                &lt;img src="path/to/image" class="img-responsive" alt="Demo image"&gt;
                            &lt;/a&gt;
                            &lt;article class="ct-imageBox-content"&gt;
                                &lt;h5 class="ct-imageBox-content-header ct-fw-400 text-uppercase text-left"&gt;
                                    &lt;a href="#"&gt;Title&lt;/a&gt;
                                &lt;/h5&gt;
                                &lt;p class="ct-imageBox-content-description"&gt;
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                    Mauris leo nibh, suscipit et nibh sed, posuere veneuis massa.
                                    Aliquam nunc nulla, imperdiet sed mattis id, conseu quat aliquet diam. Fusce dictum feugiat aliquam.
                                    Get tincidunt ipsum accumsan sit amet. In faucibus lacinia est. Praesent dapibus, dolor id vehicula sodales, justo.
                                &lt;/p&gt;
                            &lt;/article&gt;
                        &lt;/div&gt;

</a>

<a href="#">Title</a>

</h5>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Mauris leo nibh, suscipit et nibh sed, posuere veneuis massa.

Aliquam nunc nulla, imperdiet sed mattis id, conseu quat aliquet diam. Fusce dictum feugiat aliquam.

Get tincidunt ipsum accumsan sit amet. In faucibus lacinia est. Praesent dapibus, dolor id vehicula sodales, justo.

</p>

</article>

</div>

Screenshot’s

Was this article helpful ?

Video Box

HTML MARKUP

&lt;div class="ct-video-poster"&gt;
  &lt;a href="#" class="ct-videoPopup"&gt;
       &lt;img src="../assets/images/demo-content/pattern3.jpg" alt="Video poster"&gt;
  &lt;/a&gt;
&lt;/div&gt;

</a>

</div>

JavaScript

<script src="../assets/plugins/magnificPopup/jquery.magnific-popup.js"></script>
<script src="../assets/plugins/magnificPopup/init.js"></script>

1 2	<script src="../assets/plugins/magnificPopup/jquery.magnific-popup.js"></script> <script src="../assets/plugins/magnificPopup/init.js"></script>

Was this article helpful ?

Shadow box

HTML MARKUP

&lt;div class="ct-shadowBox ct-backgroundContent" data-type="color" data-bg-color="rgba(255, 255, 255, .4)" data-snap-ignore="true"&gt;
                &lt;div class="form"&gt;
                    &lt;div class="text-right ct-u-colorLighterGray ct-u-size16"&gt;
                        &lt;span class="ct-u-colorLighterGrey ct-u-cursorPointer" data-toggle="modal" data-target="#myModal"&gt;Login&lt;/span&gt;
                    &lt;/div&gt;
                    &lt;div class="text-left"&gt;
                        &lt;h3 class="ct-u-marginBoth0 ct-u-marginTopMinus10 ct-u-size24 ct-fw-400"&gt;Join Us&lt;/h3&gt;
                    &lt;/div&gt;
                    &lt;form class="ct-u-paddingTop25 ct-u-form-control--Default ct-loginForm"&gt;
                        &lt;div class="form-group"&gt;
                            &lt;input type="text" class="form-control input-sm" placeholder="First Name" required="required"&gt;
                        &lt;/div&gt;
                        &lt;div class="form-group"&gt;
                            &lt;input type="text" class="form-control input-sm"  placeholder="Last Name" required="required"&gt;
                        &lt;/div&gt;
                        &lt;div class="form-group"&gt;
                            &lt;input type="email" class="form-control input-sm"  placeholder="Email Address" required="required"&gt;
                        &lt;/div&gt;
                        &lt;div class="form-group"&gt;
                            &lt;input type="email" class="form-control input-sm"  placeholder="Confirm Email Address" required="required"&gt;
                        &lt;/div&gt;
                        &lt;button type="submit" class="btn btn-xs btn-primary btn-block text-uppercase ct-u-size14"&gt;Sign up&lt;/button&gt;
                        &lt;div class="help-block ct-u-size12 ct-u-colorLighterGray ct-u-paddingTop20"&gt;
                            By signing up with 1step, you agree to our
                            &lt;a href=""&gt;Terms of OurService&lt;/a&gt;
                            and
                            &lt;a href=""&gt;Privacy Policy.&lt;/a&gt;
                        &lt;/div&gt;
                    &lt;/form&gt;
                &lt;/div&gt;
            &lt;/div&gt;

<span class="ct-u-colorLighterGrey ct-u-cursorPointer" data-toggle="modal" data-target="#myModal">Login</span>

</div>

</div>

</div>

</div>

</div>

</div>

By signing up with 1step, you agree to our

<a href="">Terms of OurService</a>

and

<a href="">Privacy Policy.</a>

</div>

</form>

</div>

Screenshot:

Was this article helpful ?

Artistic Boxes

HTML MARKUP

&lt;div class="ct-artisticBox"&gt;
                        &lt;div class="ct-artisticBox-content"&gt;
                            &lt;div class="ct-backgroundContent" data-bg-color="#f7f7f7" data-type="color"&gt;
                                &lt;div class="ct-artisticBox-description"&gt;
                                    &lt;h3 class="ct-artisticBox-date"&gt;2014 - 2015&lt;/h3&gt;
                                    &lt;h4 class="ct-artisticBox-title text-uppercase"&gt;Artistic Staff&lt;/h4&gt;
                                    &lt;ul class="list-unstyled ct-artistBox-members"&gt;
                                        &lt;li&gt;Karen Jenkins - &lt;a href="#"&gt;Ballet Master&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;Lisa Donalds - &lt;a href=""&gt;Ballet Mistress&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;Dana Johnsons - &lt;a href="#"&gt;Rehearsal Director&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;Melissa Kens - &lt;a href="#"&gt;Artistic Director&lt;/a&gt;&lt;/li&gt;
                                    &lt;/ul&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="ct-artisticBox-personImage"&gt;
                            &lt;a href="staff-single-member.html" class="ct-personBox ct-personBox--primary"&gt;
                                &lt;figure class="ct-personBox-image"&gt;
                                    &lt;img src="../assets/images/demo-content/personBox0.jpg" alt="Person 1"&gt;
                                    &lt;figcaption&gt;
                                        &lt;div class="ct-personBox-name"&gt;Karen Jenkins&lt;/div&gt;
                                        &lt;span class="ct-personBox-linkHelper"&gt;See&lt;/span&gt;
                                    &lt;/figcaption&gt;
                                &lt;/figure&gt;
                            &lt;/a&gt;
                            &lt;a href="staff-single-member.html" class="ct-personBox ct-personBox--primary"&gt;
                                &lt;figure class="ct-personBox-image"&gt;
                                    &lt;img src="../assets/images/demo-content/personBox2.jpg" alt="Person 2"&gt;
                                    &lt;figcaption&gt;
                                        &lt;div class="ct-personBox-name"&gt;Lisa Donalds&lt;/div&gt;
                                        &lt;span class="ct-personBox-linkHelper"&gt;See&lt;/span&gt;
                                    &lt;/figcaption&gt;
                                &lt;/figure&gt;
                            &lt;/a&gt;
                            &lt;a href="staff-single-member.html" class="ct-personBox ct-personBox--primary"&gt;
                                &lt;figure class="ct-personBox-image"&gt;
                                    &lt;img src="../assets/images/demo-content/personBox3.jpg" alt="Person 3"&gt;
                                    &lt;figcaption&gt;
                                        &lt;div class="ct-personBox-name"&gt;Dana Johnsons&lt;/div&gt;
                                        &lt;span class="ct-personBox-linkHelper"&gt;See&lt;/span&gt;
                                    &lt;/figcaption&gt;
                                &lt;/figure&gt;
                            &lt;/a&gt;
                            &lt;a href="staff-single-member.html" class="ct-personBox ct-personBox--primary"&gt;
                                &lt;figure class="ct-personBox-image"&gt;
                                    &lt;img src="../assets/images/demo-content/personBox4.jpg" alt="Person 4"&gt;
                                    &lt;figcaption&gt;
                                        &lt;div class="ct-personBox-name"&gt;Monika Belluci&lt;/div&gt;
                                        &lt;span class="ct-personBox-linkHelper"&gt;See&lt;/span&gt;
                                    &lt;/figcaption&gt;
                                &lt;/figure&gt;
                            &lt;/a&gt;
                        &lt;/div&gt;
                        &lt;div class="clearfix"&gt;&lt;/div&gt;
                    &lt;/div&gt;

<h4 class="ct-artisticBox-title text-uppercase">Artistic Staff</h4>

<li>Karen Jenkins - <a href="#">Ballet Master</a></li>

<li>Lisa Donalds - <a href="">Ballet Mistress</a></li>

<li>Dana Johnsons - <a href="#">Rehearsal Director</a></li>

<li>Melissa Kens - <a href="#">Artistic Director</a></li>

</ul>

</div>

<div class="ct-personBox-name">Karen Jenkins</div>

</figcaption>

</figure>

</a>

<div class="ct-personBox-name">Lisa Donalds</div>

</figcaption>

</figure>

</a>

<div class="ct-personBox-name">Dana Johnsons</div>

</figcaption>

</figure>

</a>

<div class="ct-personBox-name">Monika Belluci</div>

</figcaption>

</figure>

</a>

</div>

</div>

Screenshot’s

Was this article helpful ?

Product single

JavaScript

<script src="../assets/plugins/owl/owl.carousel.js"></script>
<script src="../assets/plugins/owl/init.js"></script>
<script src="../assets/plugins/ct-select2/select2.js"></script>

Was this article helpful ?

Products list

HTML MARKUP

&lt;div class="ct-productItem"&gt;
                                                &lt;div class="row"&gt;
                                                    &lt;div class="col-md-2"&gt;
                                                        &lt;div class="ct-productItem-image"&gt;
                                                            &lt;a href="shop-single-product.html"&gt;
                                                                &lt;img src="../path/to/shopProduct" alt="Shop product"&gt;
                                                            &lt;/a&gt;
                                                        &lt;/div&gt;
                                                    &lt;/div&gt;
                                                    &lt;div class="col-md-10"&gt;
                                                        &lt;div class="ct-productItem-content"&gt;
                                                            &lt;h6 class="ct-productItem-name"&gt;
                                                                &lt;a href="shop-single-product"&gt;I'm Bob T-Shirt&lt;/a&gt;
                                                            &lt;/h6&gt;
                                                            &lt;div class="ct-productItem-description"&gt;
                                                                This classic silhouette is an affordable alternative heavyweight t-shirt for the value-conscious consumer.
                                                            &lt;/div&gt;
                                                            &lt;div class="ct-u-paddingTop10 ct-u-paddingBottom15"&gt;
                                                                &lt;span class="ct-productItem-price ct-u-colorPrimary"&gt;$25.00&lt;/span&gt;
                                                            &lt;/div&gt;
                                                            &lt;a href="shop-single-product.html" class="btn btn-primary btn-xs text-uppercase"&gt;Buy now&lt;/a&gt;
                                                        &lt;/div&gt;
                                                    &lt;/div&gt;
                                                &lt;/div&gt;
                                            &lt;/div&gt;

</a>

</div>

<a href="shop-single-product">I'm Bob T-Shirt</a>

</h6>

This classic silhouette is an affordable alternative heavyweight t-shirt for the value-conscious consumer.

</div>

</div>

</div>

Was this article helpful ?

Pricing Tables

There are two types of Pricing Tables:
HTML MARKUP

&lt;div class="text-center ct-pricingBox ct-pricingBox--standard"&gt;
                        &lt;div class="ct-pricingBox-title"&gt;
                            &lt;h5 class="text-uppercase"&gt;Basic&lt;/h5&gt;
                        &lt;/div&gt;
                        &lt;div class="ct-pricingBox-pricing"&gt;
                            &lt;span class="ct-pricingBox-price"&gt;$34&lt;/span&gt;
                            &lt;span class="ct-pricingBox-priceSub"&gt; / &lt;strong&gt;month&lt;/strong&gt;&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;ul class="list-unstyled ct-pricingBox-list"&gt;
                            &lt;li&gt;&lt;i class="fa fa-check-square-o"&gt;&lt;/i&gt; lorem ipsum&lt;/li&gt;
                            &lt;li&gt;&lt;i class="fa fa-check-square-o"&gt;&lt;/i&gt; dolor sumit&lt;/li&gt;
                            &lt;li&gt;&lt;i class="fa fa-check-square-o"&gt;&lt;/i&gt; lorem ipsum primus&lt;/li&gt;
                            &lt;li&gt;&lt;i class="fa fa-check-square-o"&gt;&lt;/i&gt; dolor sumit simus&lt;/li&gt;
                        &lt;/ul&gt;
                        &lt;a href="#" class="btn btn-xs btn-primary"&gt;Buy now&lt;/a&gt;
                    &lt;/div&gt;

<h5 class="text-uppercase">Basic</h5>

</div>

<span class="ct-pricingBox-priceSub"> / <strong>month</strong></span>

</div>

<li><i class="fa fa-check-square-o"></i> lorem ipsum</li>

<li><i class="fa fa-check-square-o"></i> dolor sumit</li>

<li><i class="fa fa-check-square-o"></i> lorem ipsum primus</li>

<li><i class="fa fa-check-square-o"></i> dolor sumit simus</li>

</ul>

</div>

&lt;div class="text-center ct-pricingBox ct-pricingBox--professional"&gt;
                        &lt;div class="ct-pricingBox-title"&gt;
                            &lt;h5 class="text-uppercase ct-fw-300 ct-u-size30"&gt;Basic&lt;/h5&gt;
                            &lt;div class="ct-pricingBox-pricing"&gt;
                                &lt;span class="ct-pricingBox-price"&gt;$34&lt;/span&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;ul class="list-unstyled ct-pricingBox-list"&gt;
                            &lt;li&gt;&lt;i class="fa fa-check-square-o"&gt;&lt;/i&gt; lorem ipsum&lt;/li&gt;
                            &lt;li&gt;&lt;i class="fa fa-check-square-o"&gt;&lt;/i&gt; dolor sumit&lt;/li&gt;
                            &lt;li&gt;&lt;i class="fa fa-check-square-o"&gt;&lt;/i&gt; lorem ipsum primus&lt;/li&gt;
                            &lt;li&gt;&lt;i class="fa fa-check-square-o"&gt;&lt;/i&gt; dolor sumit simus&lt;/li&gt;
                        &lt;/ul&gt;
                        &lt;a href="#" class="btn btn-xs btn-primary"&gt;Buy now&lt;/a&gt;
                    &lt;/div&gt;

<h5 class="text-uppercase ct-fw-300 ct-u-size30">Basic</h5>

</div>

<li><i class="fa fa-check-square-o"></i> lorem ipsum</li>

<li><i class="fa fa-check-square-o"></i> dolor sumit</li>

<li><i class="fa fa-check-square-o"></i> lorem ipsum primus</li>

<li><i class="fa fa-check-square-o"></i> dolor sumit simus</li>

</ul>

</div>

Screenshot’s:

Was this article helpful ?

Tickets & Showtimes

HTML MARKUP

&lt;div class="col-md-3"&gt;
                    &lt;div class="row"&gt;
                        &lt;div class="col-md-12"&gt;
                            &lt;div class="ct-widget"&gt;
                                &lt;div class="ct-widgetInner"&gt;
                                    &lt;h6 class="ct-u-colorMotive text-uppercase ct-u-size20"&gt;Tickets &amp; Showtimes&lt;/h6&gt;
                                    &lt;div class="form-group ct-u-paddingTop10"&gt;
                                        &lt;div class="input-group date" id="sandbox-container"&gt;&lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="row"&gt;
                        &lt;div class="col-md-12"&gt;
                            &lt;div class="ct-widget"&gt;
                                &lt;div class="ct-widgetInner"&gt;
                                    &lt;div class="ct-widget-tickets"&gt;
                                        &lt;div class="ct-js-datePicker"&gt;&lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

<h6 class="ct-u-colorMotive text-uppercase ct-u-size20">Tickets & Showtimes</h6>

</div>

</div>

JavaScript

<script src="../assets/plugins/ct-datepicker/bootstrap-date-picker.js"></script><script src="../assets/plugins/ct-datepicker/init.js"></script>

1	<script src="../assets/plugins/ct-datepicker/bootstrap-date-picker.js"></script><script src="../assets/plugins/ct-datepicker/init.js"></script>

Was this article helpful ?

Single blog post

HTML MARKUP

 &lt;article class="ct-blogPost ct-blogPost--primary text-justify-xs"&gt;
                                &lt;img src="../assets/images/demo-content/blog-single-1.jpg" alt="Ballet Image"&gt;
                                &lt;h5 class="ct-blogPost-title text-center-xs"&gt;Home for the holidays&lt;/h5&gt;
                                &lt;div class="ct-blogPost-metaContainer text-center-xs"&gt;
                                    &lt;span class="ct-blogPost-meta"&gt;By &lt;a href="#"&gt;DanaK&lt;/a&gt;&lt;/span&gt;
                                    &lt;span class="ct-blogPost-meta"&gt;in: &lt;a href="#"&gt;Just Ballet&lt;/a&gt;&lt;/span&gt;
                                    &lt;span class="ct-blogPost-meta"&gt; on January 3, 2015&lt;/span&gt;
                                    &lt;span class="ct-blogPost-meta"&gt;&lt;a href="#"&gt;6 Comments&lt;/a&gt;&lt;/span&gt;
                                &lt;/div&gt;
                                &lt;div class="ct-blogPost-text"&gt;
                                    &lt;p class="ct-u-size16"&gt;
                                        Show off your culinary skills with a batch of pretty pastel macaroons.
                                        They're a small light biscuit, crunchy outside and soft inside, made with ground almonds,
                                        sugar and egg whites. Macaroons are sometimes flavoured with additional ingredients such as coffee,
                                        chocolate, nuts or fruit. They’re particularly good made with freshly ground.
                                    &lt;/p&gt;
                                    &lt;p class="ct-u-size16"&gt;
                                        I hate sifting. I learned the importance of sifting from my mother-in-law Gail.
                                        We made macarons together after she had returned from Paris where she had taken a macaron class.
                                        She had me sift the almond flour over and over. When I thought I was done, she told me to sift it again.
                                        Then again. Sifting feels like a chore. It can be time consuming,
                                        but it eliminates chunks from your almond flour and ground pistachios.
                                        It is an important step that leads to smoother macaron shells.
                                        The more you sift, the smoother your shells will be.
                                    &lt;/p&gt;
                                    &lt;p class="ct-u-size16"&gt;
                                        This next picture shows the chunks that I removed from the almond and pistachio mixture through sifting.
                                        If I had not sifted, these chunks of nuts would be incorporated into my shell batter.
                                        Like I said, sifting feels like a tedious chore,
                                        but it is so worth it to have a smooth shell in the end.
                                    &lt;/p&gt;
                                &lt;/div&gt;
                                &lt;div class="ct-blogTags"&gt;
                                    &lt;span class="ct-u-size16"&gt;&lt;i class="fa fa-tag"&gt;&lt;/i&gt; Tags:&lt;/span&gt;
                                    &lt;a href="#" class="ct-blogTag"&gt;ballerina&lt;/a&gt;
                                    &lt;a href="#" class="ct-blogTag"&gt;joyful&lt;/a&gt;
                                    &lt;a href="#" class="ct-blogTag"&gt;hiliday&lt;/a&gt;
                                    &lt;a href="#" class="ct-blogTag"&gt;ballet&lt;/a&gt;
                                &lt;/div&gt;
                                &lt;ul class="ct-socials ct-socials--darkGrey list-inline list-unstyled ct-u-marginTop20 ct-u-marginBottom50"&gt;
                                    &lt;li&gt;
                                        &lt;span class="ct-fw-600 ct-u-size16 text-uppercase ct-fw-700"&gt;Share:&lt;/span&gt;
                                    &lt;/li&gt;
                                    &lt;li&gt;
                                        &lt;a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Facebook"&gt;
                                            &lt;i class="fa fa-facebook ct-fw-600"&gt;&lt;/i&gt;
                                        &lt;/a&gt;
                                    &lt;/li&gt;
                                    &lt;li&gt;
                                        &lt;a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Twitter"&gt;
                                            &lt;i class="fa fa-twitter ct-fw-600"&gt;&lt;/i&gt;
                                        &lt;/a&gt;
                                    &lt;/li&gt;
                                    &lt;li&gt;
                                        &lt;a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="RSS"&gt;
                                            &lt;i class="fa fa-rss ct-fw-600"&gt;&lt;/i&gt;
                                        &lt;/a&gt;
                                    &lt;/li&gt;
                                    &lt;li&gt;
                                        &lt;a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Linkedin"&gt;
                                            &lt;i class="fa fa-linkedin ct-fw-600"&gt;&lt;/i&gt;
                                        &lt;/a&gt;
                                    &lt;/li&gt;
                                &lt;/ul&gt;
                                &lt;div class="ct-authorPost"&gt;
                                    &lt;img class="img-responsive" src="../assets/images/demo-content/blog-single-3.jpg" alt="Author Photo"&gt;
                                    &lt;div class="ct-authorPost-content"&gt;
                                        &lt;div class="ct-authorPost-author ct-u-paddingBottom20"&gt;&lt;span class="ct-authorPost-name"&gt;Janice Dohnson&lt;/span&gt; - January 4, 2015&lt;/div&gt;
                                        &lt;p class="ct-authorPost-quote text-justify-xs"&gt;
                                            But not fine enough that you don’t have to sift it again. It’s a chore, but sifting the powdered sugar and nut mixture one last time will be worth the effort and ensure a smooth macaron shell.
                                        &lt;/p&gt;
                                    &lt;/div&gt;
                                    &lt;div class="clearfix"&gt;&lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/article&gt;

<h5 class="ct-blogPost-title text-center-xs">Home for the holidays</h5>

<span class="ct-blogPost-meta">By <a href="#">DanaK</a></span>

<span class="ct-blogPost-meta">in: <a href="#">Just Ballet</a></span>

<span class="ct-blogPost-meta"> on January 3, 2015</span>

<span class="ct-blogPost-meta"><a href="#">6 Comments</a></span>

</div>

Show off your culinary skills with a batch of pretty pastel macaroons.

They're a small light biscuit, crunchy outside and soft inside, made with ground almonds,

sugar and egg whites. Macaroons are sometimes flavoured with additional ingredients such as coffee,

chocolate, nuts or fruit. They’re particularly good made with freshly ground.

</p>

I hate sifting. I learned the importance of sifting from my mother-in-law Gail.

We made macarons together after she had returned from Paris where she had taken a macaron class.

She had me sift the almond flour over and over. When I thought I was done, she told me to sift it again.

Then again. Sifting feels like a chore. It can be time consuming,

but it eliminates chunks from your almond flour and ground pistachios.

It is an important step that leads to smoother macaron shells.

The more you sift, the smoother your shells will be.

</p>

This next picture shows the chunks that I removed from the almond and pistachio mixture through sifting.

If I had not sifted, these chunks of nuts would be incorporated into my shell batter.

Like I said, sifting feels like a tedious chore,

but it is so worth it to have a smooth shell in the end.

</p>

</div>

<a href="#" class="ct-blogTag">ballerina</a>

<a href="#" class="ct-blogTag">joyful</a>

<a href="#" class="ct-blogTag">hiliday</a>

<a href="#" class="ct-blogTag">ballet</a>

</div>

<li>

<span class="ct-fw-600 ct-u-size16 text-uppercase ct-fw-700">Share:</span>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

<div class="ct-authorPost-author ct-u-paddingBottom20"><span class="ct-authorPost-name">Janice Dohnson</span> - January 4, 2015</div>

But not fine enough that you don’t have to sift it again. It’s a chore, but sifting the powdered sugar and nut mixture one last time will be worth the effort and ensure a smooth macaron shell.

</p>

</div>

</div>

</article>

Screenshot

Was this article helpful ?

Blog list

1) Widget – search
Screenshot:

2) Widget – topPosts
Screenshot:

3) Widget – recent Posts
Screenshot:

4) Widget – tag list
Screenshot:

5) Widget – latestComments
Screenshot:

6) Blog item
Screenshot:

Was this article helpful ?

Pagination

There are four available variations of pagination:
ct-pagination–separatelyCorners
ct-pagination–middle
ct-pagination–right
ct-pagination–left

HTML MARKUP

&lt;div class="ct-pagination ct-pagination--separatelyCorners ct-u-paddingBottom60"&gt;
                                        &lt;div class="ct-pages"&gt;
                                            &lt;div class="ct-pages-prev"&gt;
                                                &lt;a href="#" class="ct-first-page"&gt;&lt;i class="fa fa-long-arrow-left fa-fw"&gt;&lt;/i&gt;Previous&lt;/a&gt;
                                            &lt;/div&gt;
                                            &lt;div class="ct-pages-next"&gt;
                                                &lt;a href="#"&gt;Next&lt;i class="fa fa-long-arrow-right fa-fw"&gt;&lt;/i&gt;&lt;/a&gt;
                                            &lt;/div&gt;
                                            &lt;div class="clearfix"&gt;&lt;/div&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;

<a href="#" class="ct-first-page"><i class="fa fa-long-arrow-left fa-fw"></i>Previous</a>

</div>

</div>

</div>

Screenshot:

Was this article helpful ?

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

Was this article helpful ?

1 Step – Responsive HTML5 Template

HTML Structure

Page structure

CSS Files and structure

Colors

Icons

CSS Files & Structure

Javascript scripts and structure

Google Map (GMAP3 Plugin)

jquery.appear

Charts.js

Header

Media Sections

Google Maps

Blockquote

Testimonials

Slider

Main carousel slider

Schedule

Counters

Progress bars

Social Bar

Tooltips

Photo Gallery

Rounded Gallery

Decoration Carousel

Isotope gallery with popup

Icon Boxes

Courses box

Person Box

Leadership box

Image Box

Video Box

Shadow box

Artistic Boxes

Product single

Products list

Pricing Tables

Tickets & Showtimes

Single blog post

Blog list

Pagination

Sources & Credits

Siver

Estato

Disrupt