Blog Items

Display if the post units corresponds to the selected display option for blog stream page and is set in the same way - using the class in a tag with id="content"and detailas of the markup. For example:

The page also provides post blocks of social networks, information about the author, posts relating to the article, as well as block of comments.

Portfolio Items

For pages containing a description of the item of the portfolio, you need to specify the same class (regardless of the type of page "Portfolio") in a tag with id="content":

The page of a single portfolio post provides an additional block "Project Details" with information about the project: url of the site of the project, date of issue and the author of the project.

The rest of the "Portfolio" post is similar to a standard post.

sc_title

is used to design titles.

Styles:

• sc_title - title is underlined with short red line:
  
• sc_title sc_title_bubble sc_title_bubble_right - This combination of classes puts out a red drop on the left from the title (the tip is directed to the right). The icon on the drop displays inside the title tag. For example:
  <h1 class="sc_title sc_title_bubble sc_title_bubble_right">
<span class="sc_title_bubble_icon icon-mobile"></span>
% Responsive
</h1>
• sc_title sc_title_bubble sc_title_bubble_down - This combination of classes puts out a red drop above from the title (the tip is directed to the bottom). For example:
  <h1 class="sc_title sc_title_bubble sc_title_bubble_down">
<span class="sc_title_bubble_icon icon-mobile"></span>
% Responsive
</h1>

Below are the icons that may be used in the titles (in the name of class "icon-xxx"):

sc_line

Tag <div class="sc_line"></div> displays horizontal dividing line in the text.

sc_infobox

Creates different types of messages.

Styles::

• sc_infobox sc_infobox_regular - A block with standard message
  <div class="sc_infobox sc_infobox_regular"><strong>General message.</strong>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
• sc_infobox sc_infobox_info - A block with informative message
  <div class="sc_infobox sc_infobox_info"><strong>Notice message.</strong>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
• sc_infobox sc_infobox_success - A block with message of successful operation.
  <div class="sc_infobox sc_infobox_success"><strong>Success message.</strong>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
• sc_infobox sc_infobox_error - A block with error message
  <div class="sc_infobox sc_infobox_error"><strong>Error message.</strong>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
• sc_infobox sc_infobox_result - A block with message of operation's result.
  <div class="sc_infobox sc_infobox_error"><strong>Error message.</strong>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>

IMPORTANT: You may add sc_infobox_closeable to the list of classes, to make the block with a message close by click.

sc_button

Creates different types of buttons.

Стили:

• sc_button_size_small - creates small button
• sc_button_size_medium - creates medium button
• sc_button_size_large - creates big button
• sc_button_style_grey - sets the color of button- grey
• sc_button_style_red - sets the color of button - red
• sc_button_style_green - sets the color of button - green
• sc_button_style_blue - sets the color of button - blue

sc_image

Inserts an image into the text, pressing it (image) to the left or right edge of the text, and the next image text flows around it on the opposite side. It's applied for the tag <figure>, that should enclose the tag <img>.

For example:

You can also add title for image inside the tag <figure> using the tag <figcaption> with the following structure:

To align an image you need to use the following classes:

• sc_image_align_left - Image is pressed against the left edge of the parent, the following text bypasses it from the right.
• sc_image_align_right - Image is pressed against the right edge of the parent, the following text bypasses it from the left.

sc_quote

Use to design blockquote tag:

sc_tooltip

Used to create pop-up tips that appear when you hover over a given piece of text.

sc_dropcaps

Used to create the dropcaps effect - special highlighting of the first letter in a paragraph. IMPORTANT: Correct operation of the classes requires the following structure - the paragraph needs to be assigned classes "sc_dropcaps sc_dropcaps_style_1", and the first sumbol needs to be enclosed into the tag <span> with parameter class="sc_dropcap"

Styles:

• sc_dropcaps_style_1 - creates dropcaps effect style 1 - capital letter without a backround <p class="sc_dropcaps sc_dropcaps_style_1"> <span class="sc_dropcap">L</span>orem ipsum dolor sit amet, consectetur adipisicing elit, eiusmod tempor incididunt ut labore et dolore magna aliqua enim minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
• sc_dropcaps_style_2 - creates dropcaps effect style 2 - capital letter on the red backround <p class="sc_dropcaps sc_dropcaps_style_2"> <span class="sc_dropcap">L</span>orem ipsum dolor sit amet, consectetur adipisicing elit, eiusmod tempor incididunt ut labore et dolore magna aliqua enim minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
• sc_dropcaps_style_3 - creates dropcaps effect style 3 - capital letter on the dark backround <p class="sc_dropcaps sc_dropcaps_style_3"> <span class="sc_dropcap">L</span>orem ipsum dolor sit amet, consectetur adipisicing elit, eiusmod tempor incididunt ut labore et dolore magna aliqua enim minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

sc_columns

Creates columns in the text. IMPORTANT: For correct work of columns, please keep to the following structure:

1. The whole block with column should be enclosed into tag <div> with classes"sc_columns" and "sc_columns_count_N" (where N - number of columns - from 2 to 4)
2. Each column must be placed in the tag <div>with the tag "sc_column_item"
3. If you want to merge multiple columns into one - add the following tag that contains the first of the combined classes "span_N" (where N - is the number of merged columns)

Below are the examples of markup for four columns (with merging columns and without)

Four columns <div class="sc_columns sc_columns_count_4">

<div class="sc_column_item sc_column_item_1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit in nisi ut dictum. Aenean nec ultricies sem. Nunc ullamcorper, nisi sed volutpat gravida, mi erat egestas nibh, bibendum fringilla tellus arcu vitae libero. Vestibulum sapien tortor, egestas ac libero et, faucibus imperdiet nulla. Aenean id hendrerit tortor.</p>
</div>

<div class="sc_column_item sc_column_item_2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit in nisi ut dictum. Aenean nec ultricies sem. Nunc ullamcorper, nisi sed volutpat gravida, mi erat egestas nibh, bibendum fringilla tellus arcu vitae libero. Vestibulum sapien tortor, egestas ac libero et, faucibus imperdiet nulla. Aenean id hendrerit tortor.</p>
</div>

<div class="sc_column_item sc_column_item_3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit in nisi ut dictum. Aenean nec ultricies sem. Nunc ullamcorper, nisi sed volutpat gravida, mi erat egestas nibh, bibendum fringilla tellus arcu vitae libero. Vestibulum sapien tortor, egestas ac libero et, faucibus imperdiet nulla. Aenean id hendrerit tortor.</p>
</div>

<div class="sc_column_item sc_column_item_4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit in nisi ut dictum. Aenean nec ultricies sem. Nunc ullamcorper, nisi sed volutpat gravida, mi erat egestas nibh, bibendum fringilla tellus arcu vitae libero. Vestibulum sapien tortor, egestas ac libero et, faucibus imperdiet nulla. Aenean id hendrerit tortor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit in nisi ut dictum. Aenean nec ultricies sem. Nunc ullamcorper, nisi sed volutpat gravida, mi erat egestas nibh, bibendum fringilla tellus arcu vitae libero. Vestibulum sapien tortor, egestas ac libero et, faucibus imperdiet nulla. Aenean id hendrerit tortor.</p>
</div>

</div>

4 columns (2, 3 and 4 are merged into one) <div class="sc_columns sc_columns_count_4">

<div class="sc_column_item sc_column_item_1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit in nisi ut dictum. Aenean nec ultricies sem. Nunc ullamcorper, nisi sed volutpat gravida, mi erat egestas nibh, bibendum fringilla tellus arcu vitae libero. Vestibulum sapien tortor, egestas ac libero et, faucibus imperdiet nulla. Aenean id hendrerit tortor.</p>
</div>

<div class="sc_column_item sc_column_item_2 span_3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit in nisi ut dictum. Aenean nec ultricies sem. Nunc ullamcorper, nisi sed volutpat gravida, mi erat egestas nibh, bibendum fringilla tellus arcu vitae libero. Vestibulum sapien tortor, egestas ac libero et, faucibus imperdiet nulla. Aenean id hendrerit tortor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit in nisi ut dictum. Aenean nec ultricies sem. Nunc ullamcorper, nisi sed volutpat gravida, mi erat egestas nibh, bibendum fringilla tellus arcu vitae libero. Vestibulum sapien tortor, egestas ac libero et, faucibus imperdiet nulla. Aenean id hendrerit tortor.</p>
</div>

</div>

4 columns (3 and 4 are merged into one) <div class="sc_columns sc_columns_count_4">

<div class="sc_column_item sc_column_item_1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit in nisi ut dictum. Aenean nec ultricies sem. Nunc ullamcorper, nisi sed volutpat gravida, mi erat egestas nibh, bibendum fringilla tellus arcu vitae libero. Vestibulum sapien tortor, egestas ac libero et, faucibus imperdiet nulla. Aenean id hendrerit tortor.</p>
</div>

<div class="sc_column_item sc_column_item_2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit in nisi ut dictum. Aenean nec ultricies sem. Nunc ullamcorper, nisi sed volutpat gravida, mi erat egestas nibh, bibendum fringilla tellus arcu vitae libero. Vestibulum sapien tortor, egestas ac libero et, faucibus imperdiet nulla. Aenean id hendrerit tortor.</p>
</div>

<div class="sc_column_item sc_column_item_3 span_2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit in nisi ut dictum. Aenean nec ultricies sem. Nunc ullamcorper, nisi sed volutpat gravida, mi erat egestas nibh, bibendum fringilla tellus arcu vitae libero. Vestibulum sapien tortor, egestas ac libero et, faucibus imperdiet nulla. Aenean id hendrerit tortor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit in nisi ut dictum. Aenean nec ultricies sem. Nunc ullamcorper, nisi sed volutpat gravida, mi erat egestas nibh, bibendum fringilla tellus arcu vitae libero. Vestibulum sapien tortor, egestas ac libero et, faucibus imperdiet nulla. Aenean id hendrerit tortor.</p>
</div>

</div>

sc_list

Creates lists of different styles.

The styles available:

• sc_list_style_regular
• sc_list_style_mark
• sc_list_style_check
• sc_list_style_error

Examples of different list styles:

"Regular" style (and "mark" style on second element)

"Check" style (and "error" style on last element)

sc_tabs

Creates blocks with tabs. IMPORTANT: For correct work of columns, please keep to the following structure:

1. The whole block with tabs should be enclosed into tag <div> with classes "sc_tabs" and "sc_tabs_style_N" (where N - display styl - from 1 to 3)
2. Inside you should place the block with names of tab in the tag <div> with the class "tab_names"
3. The contents of each tab-item should be placed in the tag <div> with the class "content"

Below are the examples of markup for display of the block with three tabs:

sc_accordion

Creates blocks with accordion - set of panels with titles where only one panel may be disclosed. IMPORTANT: For correct work of columns, please keep to the following structure:

1. The whole block with accordion should be enclosed into tag <div> with the classes "sc_accordion"
2. The contents of each accordion-item should be placed in the tag <div> with the class"sc_accordion_item", inside of which there is the tag <h4> with title (should be specified with the class "sc_accordion_title") and the tag <div> with contents of the panel (should be specified with the class "sc_accordion_content")

Below are the examples of markup for display of accordion with three panels:

sc_toggles

Creates blocks with toggles - set of panels with titles, each of which may be disclosed. IMPORTANT: For correct work of columns, please keep to the following structure:

1. The whole block with toggle should be enclosed into tag <div>with the classes"sc_toggles"
2. The contents of each toggles-item should be located in the tag <div>with the class "sc_toggles_item", inside of which there is the tag <h4> with title (should be specified with the class "sc_toggles_title") and the tag <div> with the contents of the panel (should be specified with the class "sc_toggles_content")

Below are the examples of markup for display of toggles with three panels:

sc_skills

Shows the levels of your abilities as a horizontal bar graph with percentage. IMPORTANT: For correct work of columns, please keep to the following structure:

1. The whole block with skills should be enclosed into tag <div> with classes "sc_skills"
2. The contents of each skills-item should be located in the tag <div> with the class "sc_skills_item", inside of which there are the following tags <div> :

sc_skills_progressbar - background of the element

sc_skills_progress - value of the current element for skills (percentage)

sc_skills_caption - name of the current element

Below are the examples of markup for display of skills with three panels:

sc_team

Displays the members of your team (photo with description)

Styles:

• sc_team_normal - Standard size (4 elements in the line). Maximum photo size - 268 px. If you have a larger image, it is scaled proportionately.
• sc_team_big - The increased size (3 in the line). The maximum width of the image - 368 pixels.

A sample output of the team members (outlay "normal"):

sc_contact_form

Decorate the "Contact form". IMPORTANT: For correct work of columns, please keep to the following structure:

1. The entire block "Contact form" should be enclosed into the tag <div> with classes "sc_contact_form"
2. Each field should be place into the tag <div> with the class"field"
3. The text field should be placed into the tag <div>with the class "field_message"
4. Submit button is a link whose text is enclosed in the tag <span>, and the very link is located in the tag <div>with the class "button"
5. At the end of a markup you must place a tagt <div>with the calss "result sc_infobox" to put out the messages about errors of filling out the fileds.

Below are the examples of markup for display of contact form:

sc_googlemap

Displays Google map at the address you specified. Instead of the address, you can specify the coordinates in the parameter "latlng". Parameter "zoom" sets initial map scale.

Examples of murkup for display of Google map on the page:

sc_testimonials

It decorates a block with the statement of one of your team members or any other person (you must also specify its parameters).

Can be designed in two styles - "flat" and "callout".

Sample testimonials in style"flat"

Sample testimonials in style "callout"

sc_blogger

This class is widely used to design the output of post units. It has a lot of different styles: date, underline, image_large, image_medium, image_small, bubble_right, bubble_down, accordion

Below are the classes, HTML murkup fragments, and corresponding design styles:

• style_date: <div class="sc_blogger sc_blogger_vertical style_date">

<div class="sc_blogger_item sc_blogger_item_date">

<div class="date_area">
<div class="date_month">May</div>
<div class="date_day">30</div>
</div>

<h4 class="sc_blogger_title">
<a href="post-gallery-b1.html">Awesome Slider Post</a>
</h4>

<div class="post_content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut <a class="readmore" href="post-gallery-b1.html">»</a>
</div>

</div>

<div class="sc_blogger_item sc_blogger_item_date">
...
</div>

</div>
• style_underline: <div class="sc_blogger sc_blogger_horizontal style_underline sc_columns sc_columns_count_4">

<div class="sc_blogger_item sc_column_item sc_column_item_1">
<h2 class="sc_blogger_title sc_title">
<a href="post-gallery-b1.html">100% Responsive</a>
</h2>
<div class="post_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit in nisi ut dictum. Aenean nec ultricies sem
<a class="readmore" href="post-gallery-b1.html">»</a>
</div>
</div>

<div class="sc_blogger_item sc_column_item sc_column_item_2">
...
</div>

<div class="sc_blogger_item sc_column_item sc_column_item_3">
...
</div>

<div class="sc_blogger_item sc_column_item sc_column_item_4">
...
</div>

</div>
• style_image_large: <div class="sc_blogger sc_blogger_horizontal style_image_large">

<div class="sc_blogger_item">
<div class="pic_wrapper image_wrapper">
<img width="360" height="222" src="uploads/bigstock-Successful-Business-Executive-7014732-360x222.jpg" alt="Nullam nulla libero">
</div>
<div class="post_wrapper">
<div class="title_area">
<span class="post_comments">
<a href="post-portfolio.html#comments">
<span class="icon-comment"></span>
<span class="post_comments_number">0</span>
</a>
</span>
<h4 class="sc_blogger_title">
<a href="post-portfolio.html">Nullam nulla libero</a>
</h4>
</div>
<div class="post_info">
<span class="post_date">March 2, 2013</span>
</div>
</div>

<div class="sc_blogger_item">
...
</div>

</div>
• style_image_medium: <div class="sc_blogger sc_blogger_horizontal style_image_medium sc_columns sc_columns_count_4">

<div class="sc_blogger_item sc_column_item sc_column_item_1">
<div class="pic_wrapper image_wrapper">
<img alt="Awesome Slider Post" src="uploads/bigstock-Woman-In-Raincoat-Going-For-Bi-11599616-260x160.jpg" height="160" width="260">
<span class="image_overlay"></span>
<a href="post-gallery-b1.html" class="image_link"><span class="icon-link"></span></a>
<a href="uploads/bigstock-Woman-In-Raincoat-Going-For-Bi-11599616.jpg" class="image_zoom prettyPhoto"><span class="icon-search"></span></a>
</div>
<div class="post_wrapper">
<div class="title_area">
<span class="post_comments">
<a href="post-gallery-b1.html#comments">
<span class="icon-comment"></span>
<span class="post_comments_number">0</span>
</a>
</span>
<h4 class="sc_blogger_title"><a href="post-gallery-b1.html">Awesome Slider Post</a></h4>
</div>
<div class="post_info">
<span class="post_date">May 30, 2013</span>
</div>
<div class="post_content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut <a href="post-gallery-b1.html" class="readmore">»</a>
</div>
</div>
</div>

<div class="sc_blogger_item sc_column_item sc_column_item_2">
...
</div>

<div class="sc_blogger_item sc_column_item sc_column_item_3">
...
</div>

<div class="sc_blogger_item sc_column_item sc_column_item_4">
...
</div>

</div>
• style_image_small: <div class="sc_blogger sc_blogger_vertical style_image_small">

<div class="sc_blogger_item sc_blogger_item_image_left">
<div class="pic_wrapper image_wrapper">
<img class="wp-post-image" alt="Awesome Slider Post" src="uploads/bigstock-Woman-In-Raincoat-Going-For-Bi-11599616-121x74.jpg" height="74" width="121">
</div>
<div class="post_wrapper">
<div class="title_area">
<span class="post_comments">
<a href="post-gallery-b1.html#comments">
<span class="icon-comment"></span>
<span class="post_comments_number">2</span>
</a>
</span>
<h4 class="sc_blogger_title"><a href="post-gallery-b1.html">Awesome Slider Post</a></h4>
</div>
<div class="post_info">
<span class="post_date">May 30, 2013</span>
</div>
<div class="post_content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut <a href="post-gallery-b1.html" class="readmore">»</a></div>
</div>
</div>

<div class="sc_blogger_item sc_blogger_item_image_left">
...
</div>

</div>
• style_accordion: <div class="sc_blogger sc_blogger_vertical style_accordion sc_accordion">

<div class="sc_blogger_item sc_accordion_item">
<h4 class="sc_blogger_title sc_accordion_title"><a href="post-standard-b1.html"><span class="sc_accordion_icon"></span>Conception</a></h4>
<div class="post_content sc_accordion_content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit in nisi ut dictum <a href="post-standard-b1.html" class="readmore">»</a></div>
</div>

<div class="sc_blogger_item sc_accordion_item even">
<h4 class="sc_blogger_title sc_accordion_title"><a href="post-standard-b1.html"><span class="sc_accordion_icon"></span>Design</a></h4>
<div class="post_content sc_accordion_content">Proin eget tempor nulla, eu laoreet nunc. Donec a venenatis tellus <a href="post-standard-b1.html" class="readmore">»</a></div>
</div>

<div class="sc_blogger_item sc_accordion_item odd">
<h4 class="sc_blogger_title sc_accordion_title"><a href="post-standard-b1.html"><span class="sc_accordion_icon"></span>Coding</a></h4>
<div class="post_content sc_accordion_content">Quisque commodo dapibus odio, eu viverra dolor luctus in. Ut sit amet lorem <a href="post-standard-b1.html" class="readmore">»</a></div>
</div>

</div>
• style_bubble_right: <div class="sc_blogger sc_blogger_horizontal style_bubble_right sc_columns sc_columns_count_4">

<div class="sc_blogger_item sc_column_item sc_column_item_1">
<h1 class="sc_blogger_title sc_title_bubble sc_title_bubble_right"><a href="post-standard-b1.html"><span class="sc_title_bubble_icon icon-mobile"></span>100% Responsive</a></h1>
<div class="post_content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit in nisi ut dictum. Aenean nec ultricies sem <a href="post-standard-b1.html" class="readmore">»</a></div>
</div>

<div class="sc_blogger_item sc_column_item sc_column_item_2">
<h1 class="sc_blogger_title sc_title_bubble sc_title_bubble_right"><a href="post-standard-b1.html"><span class="sc_title_bubble_icon icon-droplet"></span>Unlimited Colors</a></h1>
<div class="post_content">Cras pulvinar, mauris at sollicitudin adipiscing, arcu sapien sodales lectus, non euismod ipsum ac libero <a href="post-standard-b1.html" class="readmore">»</a></div>
</div>

<div class="sc_blogger_item sc_column_item sc_column_item_3">
<h1 class="sc_blogger_title sc_title_bubble sc_title_bubble_right"><a href="post-standard-b1.html"><span class="sc_title_bubble_icon icon-shuffle"></span>Incredibly Flexible</a></h1>
<div class="post_content">Quisque massa mauris, molestie pretium metus a, facilisis tempor justo. Nullam molestie tristique augue <a href="post-standard-b1.html" class="readmore">»</a></div>
</div>

<div class="sc_blogger_item sc_column_item sc_column_item_4">
<h1 class="sc_blogger_title sc_title_bubble sc_title_bubble_right"><a href="post-standard-b1.html"><span class="sc_title_bubble_icon icon-lifebuoy"></span>Customer Support</a></h1>
<div class="post_content">Vivamus auctor egestas odio, cursus pharetra velit rutrum vitae <a href="post-standard-b1.html" class="readmore">»</a></div>
</div>

</div>
• style_bubble_down: <div class="sc_blogger sc_blogger_horizontal style_bubble_down sc_columns sc_columns_count_3">

<div class="sc_blogger_item sc_column_item sc_column_item_1">
<h1 class="sc_blogger_title sc_title_bubble sc_title_bubble_down"><a href="post-standard-b1.html"><span class="sc_title_bubble_icon icon-mobile"></span>100% Responsive</a></h1>
<div class="post_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit in nisi ut dictum. Aenean nec ultricies sem <a href="post-standard-b1.html" class="readmore">»</a>
</div>
</div>

<div class="sc_blogger_item sc_column_item sc_column_item_2">
<h1 class="sc_blogger_title sc_title_bubble sc_title_bubble_down"><a href="post-standard-b1.html"><span class="sc_title_bubble_icon icon-droplet"></span>Unlimited Colors</a></h1>
<div class="post_content">
Cras pulvinar, mauris at sollicitudin adipiscing, arcu sapien sodales lectus, non euismod ipsum ac libero <a href="post-standard-b1.html" class="readmore">»</a>
</div>
</div>

<div class="sc_blogger_item sc_column_item sc_column_item_3">
<h1 class="sc_blogger_title sc_title_bubble sc_title_bubble_down"><a href="post-standard-b1.html"><span class="sc_title_bubble_icon icon-shuffle"></span>Incredibly Flexible</a></h1>
<div class="post_content">
Quisque massa mauris, molestie pretium metus a, facilisis tempor justo. Nullam molestie tristique augue <a href="post-standard-b1.html" class="readmore">»</a>
</div>
</div>

</div>

sc_slider

Apart from Revolution Slider you can use another type of a slider on the page - Flex Slider. For its correct work, you need the following markup: