20064-UnlimitedColorsPack-046 v5.3.0

Documentation

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

General Information

DotNetNuke Information

To install this skin you must have a working version of Dotnetnuke already installed. If you need help to install Dotnetnuke, follow the instructions in Documentation Center.

What Is Included With Your Package

When you purchase our theme, you will receive one large .zip file that contains everything inside. Unzip that file to get all the content inside. Below is a full list of everything that is included along with a brief description of each item. See the corresponding sections for info on installing the theme.

Notice: If you bought the theme from DNN Store (http://store.dnnsoftware.com), then none of module files are included in the download package. It only include DNN Skins, DNNGo_xPlugin, Page Templates and PSD files. If you need to purchase modules, please contact us via email (dnnskindev@gmail.com).

What Are The Requirements To Use skins and modules

To use skins and modules, you must be running DNN 8.x or higher. We have tested it with DNN 8.x, DNN 9.x.

Skin and Required Modules Installation

For DNN 8

  1. Go to Host-Settings –> Host-Settings, and select the tab Other Settings, changing Max Upload Size to 28 or higher.

  2. Go to Host –> Extensions –> Install Extension wizard to install the module pack DNNGo_xPlugin_0x.0x.0x_PA.zip

  3. Go to Host –> Extensions –> Install Extension wizard to install the skin pack 20064-UnlimitedColorsPack-046-DNNSkins.zip

  4. You can install other modules as per your own needs.

  5. After the installation has been completed, navigate to Admin –> Site Settings –> Basic Settings (tab) –> Appearance (section) and specify portal and edit skins and containers like shown in the screenshot below. It should be done, in order to make your DNN admin UI look correct and readable.

  6. Now you can upload the LOGO image in Admin –> Site Settings –> Basic Settings (tab) –> Appearance (section) page.

For DNN 9

  1. Go to Settings –> Security –> More, and select the tab MORE SECURITY SETTINGS, changing Max Upload Size to 28 or higher.

  2. Go to Host –> Extensions –> Install Extension wizard to install the module pack DNNGo_xPlugin_0x.0x.0x_PA.zip

  3. Go to Host –> Extensions –> Install Extension wizard to install the skin pack 20064-UnlimitedColorsPack-046-DNNSkins.zip

  4. You can install other modules as per your own needs.

  5. Manage

    After the installation has been completed, navigate to Manage –> Themes. Select and apply 20064-UnlimitedColorsPack-046

  6. You can upload the LOGO image in Settings –> Site Settings page.

Change the Settings of HTML Editor

By default, HTML editor will remove the div tags whose content is blank. For example: if we add the code <div class=”pt-20″></div> in HTML editor and click save, you will find the code is missing when you edit it afterwards. So we need to change the settings to prevent this from happening.

  1. Log in to your site as super administrator.

  2. Go to SETTINGS > Site Settings > Site Behavior > MORE, click the Open HTML Editor Manager.

  3. Click the Main Settings tab. Set the value of Administrators to be Full.

  4. Click the Editor Config tab.

  5. Set the value of AllowedContent to be true.

  6. Set the value of FillEmptyBlocks to be false.

  7. Set the value of ignoreEmptyParagraph to be false.

  8. Click the Save button.

How to import page template?

Exported page templates will allow you to reproduce our live demo pages. We'll reproduce the home page as an example.

For DNN 8

  1. You can find these files in Page Templates Directory.

  2. Upload Home.page.template file into your portal root (e.g. Portals/0/Templates/) in the previous chapter and synchronize your folders, you are able to start using page templates to clone live demo pages.

  3. Because page templates can not import image files, you need to upload all the photo files of the "images" folder into your portal root (e.g. Portals/0/).

  4. Synchronize the file in Admin > File-Management

  5. Navigate to the Home page and click Pages -> Import.

  6. Find a proper page exported content file navigating to Templates folder and choosing for example Home page.

  7. Choose "Replace the current Page" and the redirect mode you need. Please note, if you select "Replace the current Page", content of current page will be reset.

  8. Click Import button if everything is correct.

  9. Specify page settings according to your needs (necessarily apply HomePage skin to the home page) and click "Update Page". The home page is ready.

For DNN 9

  1. Go to Manage > Site Assets

  2. Uploading Home.page.template file to Templates folder

  3. Because page templates can not import image files, you need to upload all the photo files of the "images" folder into your portal root (e.g. Portals/0/).

  4. Go to Content > Pages > Add Page

  5. Choose your template from Template drop-down.

  6. Click Add Page

Note : Page templates can only be imported when you are creating a new page.

Skin features and how to use them.

Page Template

The product contains page templates for all pages in the live demo, you can copy our demo site by importing the page templates.

Six kinds of header layout

You can click the xPlugin button to go to settings page, and then choose different header styles in Header Layout section.
You can click these links to check different header styles. header 1, header 2, header 3, header 4, header 5, header 6

Each header includes very rich setting options, you can modify the color of whatever you would like to . For example: text color, font size and background color etc.

Insidepage-leftmenu layout

Insidepage-leftmenu layout page is using InsidePage-leftmenu skin. Menus on the left side are displaying the second level menus.

Full Layout and Boxed Layout

This skin contains Full Layout and Boxed Layout, you can set through Content Layout section.
With Boxed Layout applied, you can still set page background, it will display around the content. You can click link to check demo url of boxed layout.
The background can be set as static or rotating image or any solid color for you choose to apply, also you can set different background images for different pages.

How to set background image for DNN page.

  1. You need to choose Boxed Layout.
  2. Choose Page Background in the Option for Show bg, save settings.
  3. Click "pages" nav in the xPlugin.
  4. Click Edit Background icon.
  5. Upload image, the background image will show as slider if you choose two or more images.
  6. "Globals" allows you to set background image for all pages.
  7. Also you can set background image for each page.

How to set breadcrumb image for DNN page.

  1. Choose Breadcrumb Background in the Option for Show bg, save settings.
  2. Click "pages" nav in the xPlugin.
  3. Click Edit Breadcrumb icon.
  4. Upload image, the background image will show as slider if you choose two or more images.
  5. "Globals" allows you to set background image for all pages.
  6. Also you can set background image for each page.

Loading Style

You can set the page loading animation.



You can select to have this feature turned on or off.

Content Style

You can set the font color and size, link color, the color of H1-H6 etc of the content area.

Five kinds of Breadcrumb layouts

You can choose different Breadcrumb styles through Breadcrumb Layout.
You can click these links to check different breadcrumb styles. breadcrumb 1, breadcrumb 2, breadcrumb 3, breadcrumb 4 , breadcrumb 5.

You can change the text color, background color and background image etc for each Breadcrumb layout.

Create a Skin

You can create a new skin through xPlugin. Please note the new skin name shouldn't be the same as the current skin.

Standard Menu and MegaMenu

The skin sub menus contain two types-Standard Menu and MegaMenu.

Standard Menu is the default menu type, the sub menus will be set to display in one column only, as shown in screen shot below:

MegaMenu will set sub menus to display in multiple columns, also you can display HTML module or third party module in sub menus, as shown below:

You can set the MegaMenu as per steps below:

  1. Click "pages" nav in the xPlugin.
  2. Click Edit MegaMenu button. Please note MegaMenu can be set for first level menus only.
  3. Set the menu type to MegaMenu.
  4. Mega Menu has 5 sections: Menu Top, Menu Right, Menu Bottom, Menu Left, Menu Center.
  5. Click Add button so you will be able to add HTML module or any third module to Menu Top, Menu Right, Menu Bottom, Menu Left.
  6. Module Type-choose to display HTML module or third module.
  7. Menu Center-it will display secondary menus here.
  8. Mega Columns-set number of columns the secondary menu will display.
  9. You can set width for Menu Right, Menu Left, Menu Center, please note their previous total width shouldn't be more than 100.

Set Up Google Map

You can create Google Map easily following these steps:

  1. Go to xplugin, and click Map Settings tab to fill in API.
  2. You can register through https://developers.google.com/maps/documentation/javascript/get-api-key.
  3. Place the code <div id="gmap01"></div> into HTML module.
  4. Enter location of the map in Address, for example: Bear city, ny
  5. Enter description in Markers Html, for example: hello word

CSS Codes

Skin is using bootstrap framework. You will get to know more through this url. Link

Width of content area

dnn_layout is the page content framework:

Device width Width of content area
Large devices Desktops (≥1200px) 1170px
Medium devices Desktops (≥992px) 970px
Small devices Tablets (≥768px) 750px
Extra small devices Phones (<768px) auto

content_mid is the spacing between both sides of the page :

Device width Spacing
Large devices Desktops (≥1200px) 30px
Medium devices Desktops (≥992px) 20px
Small devices Tablets (≥768px) 15px
Extra small devices Phones (<768px) 15px 
<div class="dnn_layout">
  <div class="content_mid clearfix"> content ... </div>
</div>
Bootstrap 12 grid layout
<!-- Tablet and desktop devices are 50% wide, mobile device is 100% wide -->
<div class="row">
  <div class="col-sm-6">.col-sm-6</div>
  <div class="col-sm-6">.col-sm-6</div>
</div>

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

<!-- Add the extra clearfix for only the required viewport -->  
<div class="clearfix visible-xs-block"></div>
Display and hide elements
Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
.visible-xs Visible
.visible-sm Visible
.visible-md Visible
.visible-lg Visible
.hidden-xs Visible Visible Visible
.hidden-sm Visible Visible Visible
.hidden-md Visible Visible Visible
.hidden-lg Visible Visible Visible 
Visible in mobile devices and hidden in other devices
<div class="visible-xs">content...</div>

Visible in other devices and hidden in mobile devices 
<div class="hidden-xs">content...</div>
Vertical spacing
 /*page Spacing*/
.mt-10 {margin-top: 10px;}
.mb-10 {margin-bottom: 10px;}
.pt-10 {padding-top: 10px;}
.pb-10 {padding-bottom: 10px;}
.mt-20 {margin-top: 20px;}
.mb-20 {margin-bottom: 20px;}
.pt-20 {padding-top: 20px;}
.pb-20 {padding-bottom: 20px;}
.mt-30 {margin-top: 30px;}
.mb-30 {margin-bottom: 30px;}
.pt-30 {padding-top: 30px;}
.pb-30 {padding-bottom: 30px;}
.mt-40 {margin-top: 40px;}
.mb-40 {margin-bottom: 40px;}
.pt-40 {padding-top: 40px;}
.pb-40 {padding-bottom: 40px;}
.mt-50 {margin-top: 50px;}
.mb-50 {margin-bottom: 50px;}
.pt-50 {padding-top: 50px;}
.pb-50 {padding-bottom: 50px;}
.mt-60 {margin-top: 60px;}
.mb-60 {margin-bottom: 60px;}
.pt-60 {padding-top: 60px;}
.pb-60 {padding-bottom: 60px;}

Short Codes

This skin contains a lot of short codes, it is very easy for you to use even you know nothing about js and css, all you need to do is just copying the short codes to HTML module.

Pricing

You can click the link to check Pricing demo. Demo Link

Style 1:

Below is the screen shot:

Codes are as follows:

<div class="price-table price-table1 row">
    <div class="col-sm-4">
        <div class="price_icon1">
            <span class="glyphicons glyph-imac"></span>
        </div>
        <div class="price_title">
            <h2>basic</h2>
        </div>
        <div class="price_holder">
            <div class="price_box">
                <span class="sup">$</span><span class="price">100/</span><span class="unit">m</span>
            </div>
            <p>Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. </p>
            <ul>
                <li><span>10GB</span> Space available</li>
                <li><span>Unlimited</span> Colors</li>
                <li>Responsive</li>
                <li><span>5</span> Main page</li>
                <li><span>Countless</span> Features</li>
            </ul>
            <a href="#" class="btn ">Buy Now!</a>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="price_icon2">
            <span class="glyphicons glyph-imac"></span>
            <span class="glyphicons glyph-iphone"></span>
        </div>
        <div class="price_title">
            <h2>Standard</h2>
        </div>
        <div class="price_holder">
            <div class="price_box">
                <span class="sup">$</span><span class="price">200/</span><span class="unit">m</span>
            </div>
            <p>Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. </p>
            <ul>
                <li><span>10GB</span> Space available</li>
                <li><span>Unlimited</span> Colors</li>
                <li>Responsive</li>
                <li><span>5</span> Main page</li>
                <li><span>Countless</span> Features</li>
            </ul>
            <a href="#" class="btn ">Buy Now!</a>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="price_icon3">
            <span class="glyphicons glyph-ipad"></span>
            <span class="glyphicons glyph-imac"></span>
            <span class="glyphicons glyph-iphone"></span>
        </div>
        <div class="price_title">
            <h2>Advanced</h2>
        </div>
        <div class="price_holder">
            <div class="price_box">
                <span class="sup">$</span><span class="price">300/</span><span class="unit">m</span>
            </div>
            <p>Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. </p>
            <ul>
                <li><span>10GB</span> Space available</li>
                <li><span>Unlimited</span> Colors</li>
                <li>Responsive</li>
                <li><span>5</span> Main page</li>
                <li><span>Countless</span> Features</li>
            </ul>
            <a href="#" class="btn ">Buy Now!</a>
        </div>
    </div>
</div>

Option:

Style 2:

Below is the screen shot:

Codes are as follows:

<div class="price-table price-table2 row">
    <div class="col-sm-6 col-md-3">
        <div class="price_icon">
            <span class="glyphicons glyph-tag"></span>
            <div class="price_title">
                <h2>Basic Plan</h2>
            </div>
        </div>
        <div class="price_holder">
            <div class="price_box">
                <span class="sup">$</span><span class="price">19/</span><span class="unit">month</span>
            </div>
            <p>You can save 20% per month</p>
            <ul>
                <li>Responsive</li>
                <li>DNN Blog</li>
                <li>Unlimited Colors</li>
                <li>HTML5 &amp; CSS3</li>
                <li><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-dislikes"></span><span class="glyphicons glyph-dislikes"></span> </li>
                <li><a href="#" class="btn ">Buy Now!</a></li>
            </ul>
        </div>
    </div>
    <div class="col-sm-6 col-md-3">
        <div class="price_icon">
            <span class="glyphicons glyph-book"></span>
            <div class="price_title">
                <h2>Professional</h2>
            </div>
        </div>
        <div class="price_holder">
            <div class="price_box">
                <span class="sup">$</span><span class="price">29/</span><span class="unit">month</span>
            </div>
            <p>You can save 20% per month</p>
            <ul>
                <li>Responsive</li>
                <li>DNN Blog</li>
                <li>Unlimited Colors</li>
                <li>HTML5 &amp; CSS3</li>
                <li><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-dislikes"></span><span class="glyphicons glyph-dislikes"></span> </li>
                <li><a href="#" class="btn ">Buy Now!</a></li>
            </ul>
        </div>
    </div>
    <div class="col-sm-6 col-md-3">
        <div class="price_icon">
            <span class="glyphicons glyph-cup"></span>
            <div class="price_title">
                <h2>Maximum</h2>
            </div>
        </div>
        <div class="price_holder">
            <div class="price_box">
                <span class="sup">$</span><span class="price">39/</span><span class="unit">month</span>
            </div>
            <p>You can save 20% per month</p>
            <ul>
                <li>Responsive</li>
                <li>DNN Blog</li>
                <li>Unlimited Colors</li>
                <li>HTML5 &amp; CSS3</li>
                <li><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-dislikes"></span><span class="glyphicons glyph-dislikes"></span> </li>
                <li><a href="#" class="btn ">Buy Now!</a></li>
            </ul>
        </div>
    </div>
    <div class="col-sm-6 col-md-3">
        <div class="price_icon">
            <span class="glyphicons glyph-cloud"></span>
            <div class="price_title">
                <h2>Extreme</h2>
            </div>
        </div>
        <div class="price_holder">
            <div class="price_box">
                <span class="sup">$</span><span class="price">49/</span><span class="unit">month</span>
            </div>
            <p>You can save 20% per month</p>
            <ul>
                <li>Responsive</li>
                <li>DNN Blog</li>
                <li>Unlimited Colors</li>
                <li>HTML5 &amp; CSS3</li>
                <li><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-dislikes"></span><span class="glyphicons glyph-dislikes"></span> </li>
                <li><a href="#" class="btn ">Buy Now!</a></li>
            </ul>
        </div>
    </div>
</div>

Option:

ProgressBars Counters

You can click the link to check ProgressBars Counters demo. Demo Link

Style 1

Below is the screen shot:

Codes are as follows:

<div class="chart_list row">
    <div class="col-md-3 col-sm-6">
        <div data-percent="41" class="percentage">
            <div class="percentage_inner"><span>0</span>%
                <p>Web Design</p>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div data-percent="76" class="percentage">
            <div class="percentage_inner"><span>0</span>%
                <p>HTML5 &amp; CSS3</p>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div data-percent="63" class="percentage">
            <div class="percentage_inner"><span>0</span>%
                <p>JQuery</p>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div data-percent="24" class="percentage">
            <div class="percentage_inner"><span>0</span>%
                <p>DNN</p>
            </div>
        </div>
    </div>
</div>

Option:

Style 2

Below is the screen shot:

Codes are as follows:

<div class="loaded_list">
    <p> Web Design </p>
    <div class="progress progress-striped active">
        <div class="bar animation animationwidth" data-width="90%"><span></span></div>
    </div>
    <p> HTML/CSS</p>
    <div class="progress progress-striped active">
        <div class="bar animation animationwidth" data-width="95%"><span></span></div>
    </div>
    <p>JQuery</p>
    <div class="progress progress-striped active">
        <div class="bar animation animationwidth" data-width="85%"><span></span> </div>
    </div>
    <p>DNN</p>
    <div class="progress progress-striped active">
        <div class="bar animation animationwidth" data-width="75%"><span></span></div>
    </div>
</div>

Option:

Style 3

Below is the screen shot:

Codes are as follows:

<div class="number_Animation row">
    <div class="col-sm-4"> 
        <div class="number_Animation_bg">
            <span class="glyphicons glyph-heart"> </span> 
            <span class="animation  number" data-number="2670">0</span> 
            <span class="number_name">Customers Like Our Products</span>
        </div>
    </div>
    <div class="col-sm-4"> 
        <div class="number_Animation_bg">
            <span class="glyphicons glyph-user"> </span> 
            <span class="animation  number" data-number="13280">0</span> 
            <span class="number_name">Followers On Marketplace</span>
        </div>
    </div>
    <div class="col-sm-4"> 
        <div class="number_Animation_bg">
            <span class="glyphicons glyph-comments"> </span> 
            <span class="animation  number" data-number="9400">0</span> 
            <span class="number_name">Reviews On DNN Store</span>
        </div>
    </div>
</div>

Option:

Style 4

Below is the screen shot:

Codes are as follows:

<div class="loaded_list3 row">
    <div class="col-sm-6">
        <div class="pane_layout">
            <div class="row">
                <div class="col-sm-3">
                    <div class="progress progress-striped active">
                        <div data-height="80%" class="bar animation animationwidth"><span></span></div>
                    </div>
                </div>
                <div class="col-sm-9">
                    <div class="progress_rightbox">
                        <h3>Title 1</h3>
                        <div class="line"></div>
                        <p>Content text 1 ...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="pane_layout">
            <div class="row">
                <div class="col-sm-3">
                    <div class="progress progress-striped active">
                        <div data-height="65%" class="bar animation animationwidth"><span></span></div>
                    </div>
                </div>
                <div class="col-sm-9">
                    <div class="progress_rightbox">
                        <h3>Title 2</h3>
                        <div class="line"></div>
                        <p>Content text 2 ...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="pane_layout">
            <div class="row">
                <div class="col-sm-3">
                    <div class="progress progress-striped active ">
                        <div data-height="80%" class="bar animation animationwidth"><span></span></div>
                    </div>
                </div>
                <div class="col-sm-9">
                    <div class="progress_rightbox ">
                        <h3>Title 3</h3>
                        <div class="line"></div>
                        <p>Content text 3 ...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="pane_layout">
            <div class="row">
                <div class="col-sm-3">
                    <div class="progress progress-striped active ">
                        <div data-height="65%" class="bar animation animationwidth"><span></span></div>
                    </div>
                </div>
                <div class="col-sm-9">
                    <div class="progress_rightbox ">
                        <h3>Title 4</h3>
                        <div class="line"></div>
                        <p>Content text 4 ...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Option:

Style 5

Below is the screen shot:

Codes are as follows:

<div class="cono">
    <div class="sector" data-fan="name1:AccentColour:74% " data-color="#eeeeee" data-size="35" data-name="false"> </div>
    <h3>Title</h3>
    <div class="line"></div>
    <p>Content text</p>
</div>

Option:

Style 6

Below is the screen shot:

Codes are as follows:

<div class="OurSkill"><span>Our Skill</span></div>
<div class="row">
    <div class="col-sm-6 loaded_list2">
        <p> Web Design</p>
        <div class="progressborder">
            <div class="progress progress-striped active">
                <div data-width="80%" class="bar animation animationwidth"><span></span></div>
            </div>
        </div>
        <p> HTML/CSS</p>
        <div class="progressborder">
            <div class="progress progress-striped active">
                <div data-width="85%" class="bar animation animationwidth"><span></span></div>
            </div>
        </div>
        <p> JQuery</p>
        <div class="progressborder">
            <div class="progress progress-striped active">
                <div data-width="90%" class="bar animation animationwidth"><span></span> </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 loaded_list2">
        <p> Photoshop</p>
        <div class="progressborder">
            <div class="progress progress-striped active">
                <div data-width="70%" class="bar animation animationwidth"><span></span></div>
            </div>
        </div>
        <p> DNN</p>
        <div class="progressborder">
            <div class="progress progress-striped active">
                <div data-width="80%" class="bar animation animationwidth"><span></span></div>
            </div>
        </div>
        <p> Programme</p>
        <div class="progressborder">
            <div class="progress progress-striped active">
                <div data-width="65%" class="bar animation animationwidth"><span></span> </div>
            </div>
        </div>
    </div>
</div>

Option:

Style 7

Below is the screen shot:

Codes are as follows:

<div class="SectionStyles7">
    <div class="SectionStyles7_con">
        <div class="dnn_layout SectionStyles7_main">
            <h3>Top Features</h3>
            <div class="SectionStyles7_conbox">
                <div class="icon"></div>
            </div>
            <p>Content text ...</p>
            <div class="SectionStyles7_conbox1 number_Animation row">
                <div class="col-md-3 col-sm-6">
                    <div class="SectionStyles7_conbox2">
                        <span data-number="3600" class="animation  number">0</span> <span class="number_name">Likes</span>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="SectionStyles7_conbox2">
                        <span data-number="189" class="animation  number">0</span> <span class="number_name">Downloads</span>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="SectionStyles7_conbox2">
                        <span data-number="480" class="animation  number">0</span> <span class="number_name">comments</span>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="SectionStyles7_conbox2">
                        <span data-number="2705" class="animation  number">0</span> <span class="number_name">Followers</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Option:

Testimonials

You can click the link to check Testimonials demo. Demo Link

Option:

Testimonials includes the parameters that listed below.

data-position Switch mode. fade:fade in fade out, roll-left:roll from side to side, roll-vertical:roll up and down
data-display-navigation Navigation display and hidden. Default to true. true:Display, false:hidden
data-display-arrows Left/right arrow display and hidden. Default to true. true:Display, false:hidden
data-autoplay Whether to scroll automatically or not. 0 is for not scrolling automatically, numbers greater than 0 are for scrolling automatically, and these numbers are the time interval for scrolling. Default to 3000
data-autoheight Whether to be automatic height or not, default to true. true: automatic height, false: fixed height.<

Example:

<ul class=" Testimonials_tab" data-position="roll-vertical" data-display-navigation="true" data-display-arrows="true" data-display-navigation="false" data-autoplay="3000" data-autoheight="true">
  <li>
    <h3 class="title a_t_c">What Others Say About Us ?</h3>
		......

Style 1:

Below is the screen shot:

Codes are as follows:

<div class="row">
    <div class="col-sm-3">
        <div class="Testimonials_1left"></div>
    </div>
    <div class="col-sm-9">
        <ul data-autoplay="3000" data-display-arrows="false" data-position="fade" class=" Testimonials_tab Testimonials_1">
            <li>
                <blockquote>
                    <h3>Title 1</h3>
                    <p>Content text 1 ...</p>
                    <small><img alt="" src="/portals/35/Pic_14.jpg" /><span>Name</span></small>
                </blockquote>
            </li>
            <li>
                <blockquote>
                    <h3>Title 2</h3>
                    <p>Content text 2 ...</p>
                    <small><img alt="" src="/portals/35/Pic_15.jpg" /><span>Name</span></small>
                </blockquote>
            </li>
            <li>
                <blockquote>
                    <h3>Title 3</h3>
                    <p>Content text 3 ...</p>
                    <small><img alt="" src="/portals/35/Pic_16.jpg" /><span>Name</span></small>
                </blockquote>
            </li>
            <li>
                <blockquote>
                    <h3>Title 4</h3>
                    <p>Content text 4 ...</p>
                    <small><img alt="" src="/portals/35/Pic_17.jpg" /><span>Name</span></small>
                </blockquote>
            </li>
        </ul>
    </div>
</div>

Style 2:

Below is the screen shot:

Codes are as follows:

<div class="Testimonials_2main">
      <h3>What Others Say About Us ?</h3>
      <div class="row Testimonials_2top">
        <div class="col-sm-6">
          <ul data-display-navigation="false" data-position="fade" data-display-arrows="false" data-autoplay="0" class=" Testimonials_tab Testimonials_2">
            <li>
              <div class="Pic"><img alt="" src="/portals/35/Pic_14.jpg" /></div>
              <blockquote>
                <p>Content text 1 ...</p>
                <small><span>Andrea Arkov  -- Designer</span></small> </blockquote>
            </li>
          </ul>
        </div>
        <div class="col-sm-6">
          <ul data-display-navigation="false" data-position="fade" data-display-arrows="false" data-autoplay="0" class=" Testimonials_tab Testimonials_2">
            <li>
              <div class="Pic"><img alt="" src="/portals/35/Pic_15.jpg" /></div>
              <blockquote>
                <p>Content text 2 ...</p>
                <small><span>Harra Halloy  -- Developer</span></small> </blockquote>
            </li>
          </ul>
        </div>
      </div>
      <div class="row Testimonials_2center">
        <div class="col-sm-6">
          <div class="line"></div>
        </div>
        <div class="col-sm-6">
          <div class="line2"></div>
        </div>
      </div>
      <div class="row Testimonials_2topbottom">
        <div class="col-sm-6">
          <ul data-display-navigation="false" data-position="fade" data-display-arrows="false" data-autoplay="0" class=" Testimonials_tab Testimonials_2">
            <li>
              <div class="Pic"><img alt="" src="/portals/35/Pic_16.jpg" /></div>
              <blockquote>
                <p>Content text 3 ...</p>
                <small><span>John Smith  -- Programmer</span></small> </blockquote>
            </li>
          </ul>
        </div>
        <div class="col-sm-6">
          <ul data-display-navigation="false" data-position="fade" data-display-arrows="false" data-autoplay="0" class=" Testimonials_tab Testimonials_2">
            <li>
              <div class="Pic"><img alt="" src="/portals/35/Pic_17.jpg" /></div>
              <blockquote>
                <p>Content text 4 ...</p>
                <small><span>Bela Chrisis  -- Manager</span></small> </blockquote>
            </li>
          </ul>
        </div>
      </div>
    </div>

Style 3:

Below is the screen shot:

Codes are as follows:

<ul class=" Testimonials_tab Testimonials_3" data-autoplay="3000" data-position="fade" data-display-arrows="false">
    <li>
        <blockquote>
            <p>Content text 1 ...</p>
            <small><span>--- Name</span></small>
        </blockquote>
    </li>
    <li>
        <blockquote>
            <p>Content text 2 ...</p>
            <small><span>--- NameB</span></small>
        </blockquote>
    </li>
    <li>
        <blockquote>
            <p>Content text 3 ...</p>
            <small><span>--- NameC</span></small>
        </blockquote>
    </li>
    <li>
        <blockquote>
            <p>Content text 4 ...</p>
            <small><span>--- NameD</span></small>
        </blockquote>
    </li>
</ul>

Style 4:

Below is the screen shot:

Codes are as follows:

<ul class=" Testimonials_tab Testimonials_4" data-position="fade" data-display-arrows="false" data-autoplay="3000">
    <li>
        <blockquote>
            <p>           Content text 1 ... </p>
            <small><span>-- Name</span></small>
        </blockquote>
    </li>
    <li>
        <blockquote>
            <p>           Content text 2 ... </p>
            <small><span>-- NameB</span></small>
        </blockquote>
    </li>
    <li>
        <blockquote>
            <p>           Content text 3 ... </p>
            <small><span>-- NameC</span></small>
        </blockquote>
    </li>
    <li>
        <blockquote>
            <p>           Content text 4 ... </p>
            <small><span>-- NameD</span></small>
        </blockquote>
    </li>
</ul>

Style 5:

Below is the screen shot:

Codes are as follows:

<ul class=" Testimonials_tab Testimonials_5" data-position="fade" data-display-arrows="false" data-autoplay="3000">
    <li>
        <blockquote>
            <p>           Content text 1 ... </p>
            <small><span>-- Name</span></small>
        </blockquote>
    </li>
    <li>
        <blockquote>
            <p>           Content text 2 ... </p>
            <small><span>-- Name</span></small>
        </blockquote>
    </li>
    <li>
        <blockquote>
            <p>           Content text 3 ... </p>
            <small><span>-- Name</span></small>
        </blockquote>
    </li>
    <li>
        <blockquote>
            <p>           Content text 4 ... </p>
            <small><span>-- Name</span></small>
        </blockquote>
    </li>
</ul>
Responsive Tab

You can click the link to check Responsive Tab demo. Demo Link

You can add the "resp-tabs-list" of "li" to add tab item, and add the "resp-tabs-container" of "resp_container" to add content

Example:

<div class="horizontalTab_Top">
  <ul class="resp-tabs-list">
  
    <li> Tab1 </li>
    <li> Tab2 </li>
    ....
    
  </ul>
  <div class="resp-tabs-container">
  
    <div class="resp_container"> Tab1 Content </div>
    <div class="resp_container"> Tab2 Content </div>
    ....
    
  </div>
</div>

Style 1:

Below is the screen shot:

Codes are as follows:

<div class="verticalTab_Left verticalTab_Left_1">
    <ul class="resp-tabs-list">
        <li><span><em class="glyphicons glyph-leaf"></em>Title 1</span></li>
        <li><span><em class="glyphicons glyph-cogwheel"></em>Title 2</span></li>
        <li><span><em class="glyphicons glyph-power"></em>Title 3</span></li>
    </ul>
    <div class="resp-tabs-container">
        <div class="resp_container">
        	<div class="resp_margin">Content text 1 ...</div>
        </div>
        <div class="resp_container">
        	<div class="resp_margin">Content text 2 ...</div>
        </div>
        <div class="resp_container">
        	<div class="resp_margin">Content text 3 ...</div>
        </div>
    </div>
</div>

Style 2:

Below is the screen shot:

Codes are as follows:

<div class="verticalTab_Right verticalTab_Right_1">
    <ul class="resp-tabs-list">
        <li><span><em class="glyphicons glyph-leaf"></em>Title 1</span></li>
        <li><span><em class="glyphicons glyph-cogwheel"></em>Title 2</span></li>
        <li><span><em class="glyphicons glyph-power"></em>Title 3</span></li>
    </ul>
    <div class="resp-tabs-container">
        <div class="resp_container">
        	<div class="resp_margin">Content text 1 ...</div>
        </div>
        <div class="resp_container">
        	<div class="resp_margin">Content text 2 ...</div>
        </div>
        <div class="resp_container">
        	<div class="resp_margin">Content text 3 ...</div>
        </div>
    </div>
</div>

Style 3:

Below is the screen shot:

Codes are as follows:

<div class="horizontalTab_Top horizontalTab_Top_1">
    <ul class="resp-tabs-list clearfix">
        <li><span><em class="glyphicons glyph-leaf"></em>Title 1</span></li>
        <li><span><em class="glyphicons glyph-cogwheel"></em>Title 2</span></li>
        <li><span><em class="glyphicons glyph-power"></em>Title 3</span></li>
    </ul>
    <div class="resp-tabs-container">
        <div class="resp_container">
            <div class="resp_margin">Content text 1 ...</div>
        </div>
        <div class="resp_container">
            <div class="resp_margin">Content text 2 ...</div>
        </div>
        <div class="resp_container">
            <div class="resp_margin">Content text 3 ...</div>
        </div>
    </div>
</div>

Style 4:

Below is the screen shot:

Codes are as follows:

<div class="horizontalTab_Top horizontalTab_Top_2">
    <ul class="resp-tabs-list">
        <li><span>Title 1</span></li>
        <li><span>Title 2</span></li>
        <li><span>Title 3</span></li>
    </ul>
    <div class="resp-tabs-container">
        <div class="resp_container">
            <div class="resp_margin">Content text 1 ...</div>
        </div>
        <div class="resp_container">
            <div class="resp_margin">Content text 2 ...</div>
        </div>
        <div class="resp_container">
            <div class="resp_margin">Content text 3 ...</div>
        </div>
    </div>
</div>

Style 5:

Below is the screen shot:

Codes are as follows:

<div class="horizontalTab_Top horizontalTab_Top_3">
    <ul class="resp-tabs-list">
        <li><span>Tab title 1</span></li>
        <li><span>Tab title 2</span></li>
        <li><span>Tab title 3</span></li>
    </ul>
    <div class="resp-tabs-container">
        <div class="resp_container">
            <div class="resp_margin">
            <p>Content text 1 ...</p>
            </div>
        </div>
        <div class="resp_container">
            <div class="resp_margin">
            <p>Content text 2 ...</p>
            </div>
        </div>
        <div class="resp_container">
            <div class="resp_margin">
            <p>Content text 3 ...</p>
            </div>
        </div>
    </div>
</div>
Accordions

You can click the link to check Accordions demo. Demo Link

Option:

  1. id="accordion" of each accordions effect needs using different names.
  2. "data-parent" needs to have the same name as id
  3. href="#collapse1" is the id that needs to expand content.
  4. id="collapse1" is the content that needs to expand.
<div class="panel-group" id="accordion">

  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse1"> Title Text ... </a> </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">Content Text ... </div>
    </div>
  </div>
  ....
  
</div>

Style 1:

Below is the screen shot:

Codes are as follows:

<div class="panel-group accordion_1" id="accordion1">
    <div class="panel panel-default">
        <div class="panel-heading">
        <h4 class="panel-title"> 
            <a data-toggle="collapse" data-parent="#accordion1" href="#collapse1_1"><span class="accordion_icon"></span>title 1</a> 
        </h4>
        </div>
        <div id="collapse1_1" class="panel-collapse collapse in">
        <div class="panel-body">Content text 1 ... </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
        <h4 class="panel-title"> 
            <a data-toggle="collapse" data-parent="#accordion1" href="#collapse1_2" class="collapsed"><span class="accordion_icon"></span>title 2</a> 
        </h4>
        </div>
        <div id="collapse1_2" class="panel-collapse collapse">
        <div class="panel-body">Content text 2 ... </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
        <h4 class="panel-title"> 
            <a data-toggle="collapse" data-parent="#accordion1" href="#collapse1_3" class="collapsed"><span class="accordion_icon"></span>title 3</a>
        </h4>
        </div>
        <div id="collapse1_3" class="panel-collapse collapse">
        <div class="panel-body">Content text 3 ... </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
        <h4 class="panel-title"> 
            <a data-toggle="collapse" data-parent="#accordion1" href="#collapse1_4" class="collapsed"><span class="accordion_icon"></span>title 4</a> </h4
        >
        </div>
        <div id="collapse1_4" class="panel-collapse collapse">
        <div class="panel-body">Content text 4 ... </div>
        </div>
    </div>
</div>

Style 2:

Below is the screen shot:

Codes are as follows:

<div class="panel-group accordion_2" id="accordion2">
    <div class="panel panel-default">
        <div class="panel-heading">
        <h4 class="panel-title"> 
            <a data-toggle="collapse" data-parent="#accordion2" href="#collapse2_1"><span class="accordion_icon"></span>title 1</a> 
        </h4>
        </div>
        <div id="collapse2_1" class="panel-collapse collapse in">
        <div class="panel-body">Content text 1 ... </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
        <h4 class="panel-title"> 
            <a data-toggle="collapse" data-parent="#accordion2" href="#collapse2_2" class="collapsed"><span class="accordion_icon"></span>title 2</a> 
        </h4>
        </div>
        <div id="collapse2_2" class="panel-collapse collapse">
        <div class="panel-body">Content text 2 ... </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
        <h4 class="panel-title"> 
            <a data-toggle="collapse" data-parent="#accordion2" href="#collapse2_3" class="collapsed"><span class="accordion_icon"></span>title 3</a>
        </h4>
        </div>
        <div id="collapse2_3" class="panel-collapse collapse">
        <div class="panel-body">Content text 3 ... </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
        <h4 class="panel-title"> 
            <a data-toggle="collapse" data-parent="#accordion2" href="#collapse2_4" class="collapsed"><span class="accordion_icon"></span>title 4</a> </h4
        >
        </div>
        <div id="collapse2_4" class="panel-collapse collapse">
        <div class="panel-body">Content text 4 ... </div>
        </div>
    </div>
</div>

Style 3:

Below is the screen shot:

Codes are as follows:

<div class="panel-group accordion_3" id="accordion3">
    <div class="panel panel-default">
        <div class="panel-heading">
        <h4 class="panel-title"> 
            <a data-toggle="collapse" data-parent="#accordion3" href="#collapse3_1"><span class="accordion_icon"></span>title 1</a> 
        </h4>
        </div>
        <div id="collapse3_1" class="panel-collapse collapse in">
        <div class="panel-body">Content text 1 ... </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
        <h4 class="panel-title"> 
            <a data-toggle="collapse" data-parent="#accordion3" href="#collapse3_2" class="collapsed"><span class="accordion_icon"></span>title 2</a> 
        </h4>
        </div>
        <div id="collapse3_2" class="panel-collapse collapse">
        <div class="panel-body">Content text 2 ... </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
        <h4 class="panel-title"> 
            <a data-toggle="collapse" data-parent="#accordion3" href="#collapse3_3" class="collapsed"><span class="accordion_icon"></span>title 3</a>
        </h4>
        </div>
        <div id="collapse3_3" class="panel-collapse collapse">
        <div class="panel-body">Content text 3 ... </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
        <h4 class="panel-title"> 
            <a data-toggle="collapse" data-parent="#accordion3" href="#collapse3_4" class="collapsed"><span class="accordion_icon"></span>title 4</a> </h4
        >
        </div>
        <div id="collapse3_4" class="panel-collapse collapse">
        <div class="panel-body">Content text 4 ... </div>
        </div>
    </div>
</div>

Style 4:

Below is the screen shot:

Codes are as follows:

<div class="panel-group accordion_4" id="accordion4">
    <div class="panel panel-default">
        <div class="panel-heading">
        <h4 class="panel-title"> 
            <a data-toggle="collapse" data-parent="#accordion4" href="#collapse4_1"><em class="glyphicons glyph-leaf"></em><span class="accordion_icon"></span>title 1</a> 
        </h4>
        </div>
        <div id="collapse4_1" class="panel-collapse collapse in">
        <div class="panel-body">Content text 1 ... </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
        <h4 class="panel-title"> 
            <a data-toggle="collapse" data-parent="#accordion4" href="#collapse4_2" class="collapsed"><em class="glyphicons glyph-cogwheel"></em><span class="accordion_icon"></span>title 2</a> 
        </h4>
        </div>
        <div id="collapse4_2" class="panel-collapse collapse">
        <div class="panel-body">Content text 2 ... </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
        <h4 class="panel-title"> 
            <a data-toggle="collapse" data-parent="#accordion4" href="#collapse4_3" class="collapsed"><em class="glyphicons glyph-power"></em><span class="accordion_icon"></span>title 3</a>
        </h4>
        </div>
        <div id="collapse4_3" class="panel-collapse collapse">
        <div class="panel-body">Content text 3 ... </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
        <h4 class="panel-title"> 
            <a data-toggle="collapse" data-parent="#accordion4" href="#collapse4_4" class="collapsed"><em class="glyphicons glyph-playlist"></em><span class="accordion_icon"></span>title 4</a> </h4
        >
        </div>
        <div id="collapse4_4" class="panel-collapse collapse">
        <div class="panel-body">Content text 4 ... </div>
        </div>
    </div>
</div>
Quotes

You can click the link to check Quotes demo. Demo Link

<div class="quotes_1">
    <blockquote>
        <span class="mark"> &ldquo;</span>
        <p>Content text  ...</p>
        <small>Name</small> 
    </blockquote>
</div>
<div class="quotes_2">
    <blockquote>
        <p>&ldquo; Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. &rdquo;</p>
        <small><img alt="" class="img-responsive" src="/portals/35/pic18.png" />Frank Miller, <span>2012</span></small>
    </blockquote>
</div>
<div class="quotes_3">
	<hr class="dividers_1" />
    <blockquote>
        <span class="mark">”</span>
        <p>Content text  ...</p>
        <small>Name</small> 
    </blockquote>
</div>
<div class="quotes_4">
    <blockquote>
        <span class="mark"> “</span>
        <p>Content text  ...</p>
        <small>Name</small> 
    </blockquote>
</div>
Dropcaps

You can click the link to check Dropcaps demo. Demo Link

<p>
    <span class="dropcaps_1">D</span>Content text  ...
</p>
<p>
    <span class="dropcaps_2">D</span>Content text  ...
</p>
<p>
    <span class="dropcaps_3">D</span>Content text  ...
</p>
<p>
    <span class="dropcaps_4">D</span>Content text  ...
</p>
<p>
    <span class="dropcaps_5">D</span>Content text  ...
</p>
<p>
    <span class="dropcaps_6">D</span>Content text  ...
</p>
CSS3 Animations

You can click the link to check CSS3 Animations demo. Demo Link

Style 1:

This type is a group of effects which are displayed in time sequence. Below is the screen shot:

Codes are as follows:

<div class="animation">
   <div class="row mb-20">
       <div class="col-sm-3 animation_item scaleUp delay1"><img src="/portals/35/Photo2.jpg" /></div>
       <div class="col-sm-3 animation_item scaleUp delay2"><img src="/portals/35/Photo2.jpg" /></div>
       <div class="col-sm-3 animation_item scaleUp delay3"><img src="/portals/35/Photo2.jpg" /></div>
       <div class="col-sm-3 animation_item scaleUp delay4"><img src="/portals/35/Photo2.jpg" /></div>
	   ...
</div>

delay1, delay2, delay3, delay4 are used to control animation time, there are 12 time slots, which correspond to delay1~delay12 respectively.

scaleUp is used to control animation effect, there are scaleUp , bounceIn , bounceInDown , bounceInLeft , bounceInRight , bounceInUp , fadeIn , fadeInDown , fadeInLeft , fadeInRight , fadeInUp , fadeInDownBig , fadeInLeftBig , fadeInRightBig , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn , zoomIn , zoomInDown , zoomInLeft , zoomInRight , zoomInUp 30 effects in total.

Style 2:

If you just need one animation effect, you can match with the following codes.

<div class="animation scaleUp"> <img src="/portals/35/Photo5.jpg" /> </div>

Style 3:

You can add animation for a certain element when mousing over. Codes are as follows:

    <div class="animationhover bounce"> <img src="/portals/35/Photo5.jpg" /> </div>

When mousing over, it will show animation effect type (animationhover). There are bounce , flash , pulse , rubberBand , shake , swing , tada , wobble 8 effects.

Popovers

You can click the link to check Popovers demo. Demo Link

Below is the screen shot:

Codes are as follows:

<button data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-placement="left" data-toggle="popover" data-container="body" data-original-title="Popover on left" class="btn btn-default popovers" type="button"> 
    Popover on left 
</button>

Option:

Name type default description
animation boolean true apply a CSS fade transition to the tooltip
html boolean false Insert HTML into the tooltip. If false, jQuery's text method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.
placement string | function 'top' how to position the tooltip - top | bottom | left | right | auto.
When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.
selector string false If a selector is provided, tooltip objects will be delegated to the specified targets.
title string | function '' default title value if title attribute isn't present
trigger string 'hover focus' how tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.
delay number | object 0

delay showing and hiding the tooltip (ms) - does not apply to manual trigger type

If a number is supplied, delay is applied to both hide/show

Object structure is: delay: { show: 500, hide: 100 }
container string | false false

Appends the tooltip to a specific element. Example: container: 'body'
Alerts

You can click the link to check Alerts demo. Demo Link

Below is the screen shot:

Codes are as follows:

<div class="alert alert-warning fade in">
    <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
    <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good. 
</div>

Option:

  1. You can change alert- to change the color, there are alert-warning , alert-danger , alert-success , alert-info 4 colors included in the effects.
  2. fade is for hidden in is for display
Tooltips

You can click the link to check Tooltips demo. Tooltips

Below is the screen shot:

Codes are as follows:

<a href="#" class="tooltips" data-toggle="tooltip" title="first tooltip">Hover over me</a>

Option:

Name type default description
animation boolean true apply a CSS fade transition to the tooltip
html boolean false Insert HTML into the tooltip. If false, jQuery's text method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.
placement string | function 'top' how to position the tooltip - top | bottom | left | right | auto.
When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.
selector string false If a selector is provided, tooltip objects will be delegated to the specified targets.
title string | function '' default title value if title attribute isn't present
trigger string 'hover focus' how tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.
delay number | object 0

delay showing and hiding the tooltip (ms) - does not apply to manual trigger type

If a number is supplied, delay is applied to both hide/show

Object structure is: delay: { show: 500, hide: 100 }
container string | false false

Appends the tooltip to a specific element. Example: container: 'body'
Image Effects

You can click the link to check Image Effects demo. Demo Link

  1. You can copy over codes of the image effects directly to any HTML modules.
  2. You can change the font icon through modifying. font icon list
Flip Box

You can click the link to check Flip Box demo. Demo Link

Style 1:

Below is the screen shot:

Codes are as follows:

<div class="row">
    <div class="col-sm-3">
        <div class="flip_box flip_box_1">
            <div class="rotate">
                <div class="front"> 
                    <span class="glyphicons glyph-cardio"></span>
                    <h3>Flip Box</h3>
                    <p>content text ...</p>
                </div>
                <div class="back">
                    <h3>Flip Box</h3>
                    <p>content text ...</p>
                    <a href="#" class="but">Read More</a> 
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="flip_box flip_right flip_box_1">
            <div class="rotate">
                <div class="front"> 
                    <span class="glyphicons glyph-redo"></span>
                    <h3>SHare Design</h3>
                    <p>content text ...</p>
                </div>
                <div class="back">
                    <h3>SHare Design</h3>
                    <p>content text ...</p>
                    <a href="#" class="but">Read More</a>
                 </div>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="flip_box flip_top flip_box_1">
            <div class="rotate">
                <div class="front"> 
                    <span class="glyphicons glyph-settings"></span>
                    <h3>Go To Settings</h3>
                    <p>content text ...</p>
                </div>
                <div class="back">
                    <h3>Go To Settings</h3>
                    <p>content text ...</p>
                    <a href="#" class="but">Read More</a> 
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="flip_box flip_bottom flip_box_1">
            <div class="rotate">
                <div class="front"> 
                    <span class="glyphicons glyph-table-tennis"></span>
                    <h3>Do Our Best</h3>
                    <p>content text ...</p>
                </div>
                <div class="back">
                    <h3>Do Our Best</h3>
                    <p>content text ...</p>
                    <a href="#" class="but">Read More</a> 
                </div>
            </div>
        </div>
    </div>
</div>

Option:

  1. col-md-3 col-sm-6 is the width of each column, you can change the width you need through value 1~12.
  2. front is for front content.
  3. back is for back content.

Style 2:

Below is the screen shot:

Codes are as follows:

<div class="row">
    <div class="col-sm-3">
        <div class="flip_box flip_box_2">
            <div class="rotate">
                <div class="front"> <span class="glyphicons glyph-drink"></span>
                    <h3>Flip Box</h3>
                    <p>content text ...</p>
                </div>
                <div class="back">
                    <h3>Flip Box</h3>
                    <p>content text ...</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="flip_box flip_right flip_box_2">
            <div class="rotate">
                <div class="front"> <span class="glyphicons glyph-ring"></span>
                    <h3>SHare Design</h3>
                    <p>content text ...</p>
                </div>
                <div class="back">
                    <h3>SHare Design</h3>
                    <p>content text ...</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="flip_box flip_top flip_box_2">
            <div class="rotate">
                <div class="front"> <span class="glyphicons glyph-bomb"></span>
                    <h3>Go To Settings</h3>
                    <p>content text ...</p>
                </div>
                <div class="back">
                    <h3>Go To Settings</h3>
                    <p>content text ...</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="flip_box flip_bottom flip_box_2">
            <div class="rotate">
                <div class="front"> <span class="glyphicons glyph-microphone"></span>
                    <h3>Do Our Best</h3>
                    <p>content text ...</p>
                </div>
                <div class="back">
                    <h3>Do Our Best</h3>
                    <p>content text ...</p>
                </div>
                </div>
            </div>
        </div>
    </div>
<br />

Option:

  1. col-md-3 is the width of each column, you can change the width you need through value 1~12.
  2. front is for front content.
  3. back is for back content.

Style 3:

Below is the screen shot:

Codes are as follows:

<div class="row">
    <div class="col-sm-4">
        <div class="flip_box flip_box_3">
            <div class="rotate">
                <div class="front"> <span class="glyphicons glyph-drink"></span>
                    <h3>Flip Box</h3>
                    <p>content text ...</p>
                    <a href="#">More Information ></a>
                </div>
                <div class="back">
                    <h3>Flip Box</h3>
                    <p>content text ...</p>
                    <a href="#" class="but">Read More</a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="flip_box flip_right flip_box_3">
            <div class="rotate">
                <div class="front"> <span class="glyphicons glyph-ring"></span>
                    <h3>SHare Design</h3>
                    <p>content text ...</p>
                    <a href="#">More Information ></a>
                </div>
                <div class="back">
                    <h3>SHare Design</h3>
                    <p>content text ...</p>
                    <a href="#" class="but">Read More</a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="flip_box flip_top flip_box_3">
            <div class="rotate">
                <div class="front"> <span class="glyphicons glyph-bomb"></span>
                    <h3>Go To Settings</h3>
                    <p>content text ...</p>
                    <a href="#">More Information ></a>
                </div>
                <div class="back">
                    <h3>Go To Settings</h3>
                    <p>content text ...</p>
                    <a href="#" class="but">Read More</a>
                </div>
            </div>
        </div>
    </div>
<br />

Option:

  1. col-md-4 is the width of each column, you can change the width you need through value 1~12.
  2. front is for front content.
  3. back is for back content.
Responsive Video
You can click the link to check Responsive Video demo. Demo Link

Ratio between width and height of the video needs to be 16:9.

<div class="responsive-video">
    <iframe width="853" height="480" src="//www.youtube.com/embed/XcpOsJQXcx4?list=UUIkFV7_2tEhhEhh1NkkwTUw" frameborder="0" allowfullscreen></iframe>
</div>

<div class="responsive-video">
    <iframe src="//player.vimeo.com/video/106249100" width="1920" height="1080" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
</div>

<div class="responsive-video">
     <embed  src="/portals/35/movie.swf" type="application/x-shockwave-flash" allownetworking="all" allowfullscreen="true" allowscriptaccess="always" wmode="Opaque"></embed>
</div>

<div class="responsive-video">
    <video width="1920" height="1080"  controls="true">
    <source src="/portals/35/movie.m4v" type="video/mp4"></source>
    <source src="/portals/35/movie.ogv" type="video/ogg"></source>
    <source src="/portals/35/movie.webm" type="video/WebM"></source>
    Your browser does not support the video tag. </video>
</div>
Video Bg

You can click the link to check Video Bg demo. Demo Link

  1. "{videoURL:'npfu0fN9GUA' is the url of youtube
  2. autoPlay is for whether to autoplay or not true/false
  3. loop is for whether to play on a loop, true/false
<div data-property="{videoURL:'npfu0fN9GUA',containment:'self', showControls:false, autoPlay:true, loop:true, vol:50, mute:true, startAt:10, opacity:1, addRaster:false, quality:'hd1080'}" class="player">
    <div class="Play"></div>
    <div class="dnn_layout pt-60 pb-60">
        <div class="content_mid clearfix">
            <div class="player_boxes">
                <h1 class="player_title"> Here Are Your Videos</h1>
                <hr class="player_line" />
                <h4 class="player_smalltitle">YOU CAN CHANGE THE BACKGROUND BY YOURSELF</h4>
                <div class="player_content">
                    <p>Content Text 1 ... </p>
                </div>
                <p> <a class="Button_default" href="#"> VIEW PORTFOLIOS</a>&nbsp;&nbsp;&nbsp;&nbsp; <a class="Button_default" href="#"> LEARN MORE</a> </p>
            </div>
        </div>
    </div>
</div>
  1. "{videoURL:'npfu0fN9GUA' is the url of youtube
  2. autoPlay is for whether to autoplay or not true/false
  3. loop is for whether to play on a loop, true/false
<div data-property="{videoURL:'npfu0fN9GUA',containment:'self', showControls:false, autoPlay:true, loop:true, vol:50, mute:true, startAt:10, opacity:1, addRaster:false, quality:'hd1080'}" class="player">
    <div class="Play"></div>
    <div class="dnn_layout pt40 pb40">
        <div class="content_mid clearfix">
            <div class="player_boxes dark">
                <h1 class="player_title"> Here Are Your Videos</h1>
                <hr class="player_line" />
                <h4 class="player_smalltitle">YOU CAN CHANGE THE BACKGROUND BY YOURSELF</h4>
                <div class="player_content">
                    <p>Content Text 1 ... </p>
                </div>
                <p> <a class="Button_blue" href="#"> VIEW PORTFOLIOS</a>&nbsp;&nbsp;&nbsp;&nbsp; <a class="Button_blue" href="#"> LEARN MORE</a> </p>
            </div>
        </div>
    </div>
</div>

Home Page Codes

This includes the html introductions that required for Home1~Home7 page, ComingSoon page, Boxed Layout page.

Home Version 1 (Home)

You can click the link to check Home Version 1 (home) demo. Home Version 1 (Home)

Banner area

Below is the screen shot:

It is using DNNGo LayerGalleryPro module here, you can import ContentListEntity-Home1.xml of the DNNGo_LayerGalleryPro folder to duplicate banner of the demo.

Background area

Below is the screen shot:

Codes are as follows:

<section class="topa pt40 row">
    <div class="col-md-9 col-sm-12">
        <div class="topa_left">
            <h6 class="topa_lefttitle">HAVE AN IDEA? WE&rsquo;RE HERE TO HELP YOU MANAGE YOUR Business</h6>
            Our skins and modules are user friendly, powerful and easy to install and definitely will help make your site stand out. also our developers are improving the modules and releasing new versions of existing DNN modules constantly. 
        </div>
    </div>
    <div class="col-md-3 col-sm-12">
        <div class="topa_right Button_style4"> <span class="glyphicons glyph-shopping-cart tope"></span>Purchase This Theme </div>
    </div>
</section>

Option:

  1. col-md-9 col-md-3 col-sm-12 is the width of each column, you can change the width you need through value 1~12.
  2. You can modify glyphicons to change icons. font icon list.

Icons area

Below is the screen shot:

Codes are as follows:

<div class="topb pt40 row">
    <div class="topbout col-sm-12">
        <div class="flip_box flip_top flip_box_1 animation scaleUp">
            <div class="rotate">
                <div class="front">
                    <div class="topbout_ico"><span class="glyphicons glyph-edit"></span></div>
                </div>
                <div class="back">
                    <div class="topbout_ico"><span class="glyphicons glyph-embed-close"></span></div>
                </div>
            </div>
        </div>
    </div>
    <div class="topbline col-sm-12">
        <div class="topbline1">
            <div class="topbline2"></div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="topbbox1">
            <div class="topbline3"></div>
            <div class="topbbox_ico animation periodic1"><span class="glyphicons glyph-leaf"></span></div>
            <h3>Web Design</h3>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae.</p>
            <a href="#">Read More</a> 
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="topbbox2">
            <div class="topbline4"></div>
            <div class="topbbox_ico animation periodic2"><span class="glyphicons glyph-settings"></span></div>
            <h3>Web Design</h3>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae.</p>
            <a href="#">Read More</a> 
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="topbbox3">
            <div class="topbline4"></div>
            <div class="topbbox_ico animation periodic3"><span class="glyphicons glyph-link"></span></div>
            <h3>Web Design</h3>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae.</p>
            <a href="#">Read More</a> 
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="topbbox4">
            <div class="topbline3"></div>
            <div class="topbbox_ico animation periodic4"><span class="glyphicons glyph-resize-full"></span></div>
            <h3>Web Design</h3>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae.</p>
            <a href="#">Read More</a> 
        </div>
    </div>
</div>

Option:

  1. col-md-* is the width of each column, you can change the width you need through value 1~12.
  2. You can modify animation scaleUp,animation periodic1-animation periodic4 to change the animation on the slide..Animation list.
  3. You can modify glyphicons glyph-leaf,glyphicons glyph-settings to change icons. font icon list.

WHY CHOOSE US area

Below is the screen shot:

Codes are as follows:

<div class="topc pt40 row">
    <div class="topc_left col-sm-5">
        <div class="topc_imga animation fadeInLeft"> <img alt="" src="/portals/35/pic1.png" class="img-responsive" /> </div>
    </div>
    <div class="topc_right col-sm-7">
        <h2>Why Choose Us</h2>
        <div class="topc_rightline"></div>
        <p>Content text ...</p>
        <ul class="topc_righbox row">
            <li class="col-sm-6 col-xs-12">
                <div class="topc_righbox_icon animation periodic1">1</div>
                <div class="topc_righbox_text"> <span>Full Support</span><br />
                Ut tuismod aliq enimnec posuere </div>
            </li>
            <li class="col-sm-6 col-xs-12">
                <div class="topc_righbox_icon animation periodic1">2</div>
                <div class="topc_righbox_text"> <span>Clean Design</span><br />
                Ut tuismod aliq enimnec posuere </div>
            </li>
            <li class="col-sm-6 col-xs-12">
                <div class="topc_righbox_icon animation periodic2">3</div>
                <div class="topc_righbox_text"> <span>Responsive</span><br />

                Ut tuismod aliq enimnec posuere </div>
            </li>
            <li class="col-sm-6 col-xs-12">
                <div class="topc_righbox_icon animation periodic2">4</div>
                <div class="topc_righbox_text"> <span>Two Layout</span><br />
                Ut tuismod aliq enimnec posuere </div>
            </li>
            <li class="col-sm-6 col-xs-12">
                <div class="topc_righbox_icon animation periodic3">5</div>
                <div class="topc_righbox_text"> <span>Unlimited Colors</span><br />
                Ut tuismod aliq enimnec posuere </div>
            </li>
            <li class="col-sm-6 col-xs-12">
                <div class="topc_righbox_icon animation periodic3">6</div>
                <div class="topc_righbox_text"> <span>Two Layout</span><br />
                Ut tuismod aliq enimnec posuere </div>
            </li>
        </ul>
        <a target="blank" href="http://store.dnnsoftware.com/home/product-details/packageid/34330/r/7ab93d48c5e846d6b199" class="Button_default">View All Features</a> 
	</div>
</div>

Option:

  1. You can modify animation to change and delete animation. Animation list.
  2. col-sm-5 col-sm-7 col-sm-6 col-xs-12 is the width of each column, you can change the width you need through value 1~12.

TOP FEATURES area

Below is the screen shot:

Codes are as follows:

<div class="SectionStyles7">
    <div class="SectionStyles7_con">
        <div class="dnn_layout SectionStyles7_main pt40 pb40">
            <div class="content_mid">
                <h3>Top Features</h3>
                <div class="SectionStyles7_conbox">
                    <div class="icon"><span></span></div>
                </div>
                <p>Content text ...</p>
                <div class="SectionStyles7_conbox1 number_Animation row">
                    <div class="col-md-3 col-sm-6">
                        <div class="SectionStyles7_conbox2"> <span data-number="3600" class="animation  number">0</span> <span class="number_name">Likes</span> </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="SectionStyles7_conbox2"> <span data-number="189" class="animation  number">0</span> <span class="number_name">Downloads</span> </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="SectionStyles7_conbox2"> <span data-number="480" class="animation  number">0</span> <span class="number_name">comments</span> </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="SectionStyles7_conbox2"> <span data-number="2705" class="animation  number">0</span> <span class="number_name">Followers</span> </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Option:

  1. This is a SectionStyles effect.
  2. col-md-3 col-sm-6 is the width of each column, you can change the width you need through value 1~12.
  3. You can modify animation to change or delete animation.Animation list.
  4. You can change the value you need to display through data-number

Latest News area

Below is the screen shot:

Codes are as follows:

<div class="cona row">
    <div class="conaleft col-md-4 col-sm-4"><img alt="" src="/portals/35/pic4.png" class="img-responsive" /></div>
    <div class="conaright col-md-8 col-sm-8">
        <div class="conatop">
            <table border="0">
                <tbody>
                    <tr>
                        <td class="conaday">JAN<br />
                        05th</td>
                        <td class="conamain"><span>Web Solution</span>
                        <p>Content Text... </p></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="conacenter"></div>
        <div class="conabottom">
            <table border="0">
                <tbody>
                    <tr>
                        <td class="conaday">MAY<br />
                        20th</td>
                        <td class="conamain"><span>Interesting Links</span>
                        <p>Content Text... </p></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Option:

  1. col-md-4 col-sm-4 col-md-8 col-sm-8 is the width of each column, you can change the width you need through value 1~12.
  2. img-responsive image responsive

Testimonial area

Below is the screen shot:

Codes are as follows:

<ul data-autoplay="5000" data-display-arrows="false" data-position="fade" data-autoheight="false" class=" Testimonials_tab Testimonials_6">
    <li>
        <blockquote>
            <p>&ldquo; You guys do a fantastic job.  The skin looks exactly as we expected.  We have now done several skins and even skins that were done 6 months ago, you guys have been great in making the minor changes we request.  &rdquo; </p>
            <small><img alt="" src="/portals/35/Pic_14.jpg" /><span>Harralloy Chris</span>Dnngo Buyer</small> 
        </blockquote>
    </li>
    <li>
        <blockquote>
            <p>&ldquo; You guys do a fantastic job.  The skin looks exactly as we expected.  We have now done several skins and even skins that were done 6 months ago, you guys have been great in making the minor changes we request.  &rdquo;</p>
            <small><img alt="" src="/portals/35/Pic_15.jpg" /><span>Andrea Arkov</span>Designer</small> 
        </blockquote>
    </li>
    <li>
        <blockquote>
            <p>&ldquo; You guys do a fantastic job.  The skin looks exactly as we expected.  We have now done several skins and even skins that were done 6 months ago, you guys have been great in making the minor changes we request.  &rdquo;</p>
            <small><img alt="" src="/portals/35/Pic_16.jpg" /><span>John Smith</span>Programmer</small> 
        </blockquote>
    </li>
    <li>
        <blockquote>
            <p>&ldquo; You guys do a fantastic job.  The skin looks exactly as we expected.  We have now done several skins and even skins that were done 6 months ago, you guys have been great in making the minor changes we request.  &rdquo;</p>
            <small><img alt="" src="/portals/35/Pic_17.jpg" /><span>Bela Chrisis</span>Manager</small> 
        </blockquote>
    </li>
</ul>

Option:

  1. This is a Testimonials effect.You can modify Testimonials to change effects. Testimonials

RECENT WORK area

Below is the screen shot:

isotope follows:

<h2 class="carousel_1h2">Recent Work</h2>
<div class="carousel carousel_1" data-pagination="false" data-autoheight="false">
    <div class="item">
        <div class="photo_box content_zoom content_sytle_2">
            <div class="pic_box"> 
            	<img alt="" src="/portals/35/pic5.jpg" class="img-responsive" />
                <div class="content ">
                    <div class="vertical_center_1">
                        <div class="vertical_center_2">
                            <h3>SEO Friendly</h3>
                            <p>Fugiat dapibus, tellus ac cursus commodo, mauris sit condim eser ntumsi nibh, uum a justo vitaes amet risus amets un. </p>
                            <a class="but" href="#">More Information</a> 
                        </div>
                    </div>
                </div>
                <div class="shade"></div>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="photo_box content_zoom content_sytle_2">
            <div class="pic_box"> 
                <img alt="" src="/portals/35/pic6.jpg" class="img-responsive" />
                <div class="content ">
                    <div class="vertical_center_1">
                        <div class="vertical_center_2">
                            <h3>SEO Friendly</h3>
                            <p>Fugiat dapibus, tellus ac cursus commodo, mauris sit condim eser ntumsi nibh, uum a justo vitaes amet risus amets un. </p>
                            <a class="but" href="#">More Information</a> 
                        </div>
                    </div>
                </div>
                <div class="shade"></div>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="photo_box content_zoom content_sytle_2">
            <div class="pic_box"> 
                <img alt="" src="/portals/35/pic7.jpg" class="img-responsive" />
                <div class="content ">
                    <div class="vertical_center_1">
                        <div class="vertical_center_2">
                            <h3>SEO Friendly</h3>
                            <p>Fugiat dapibus, tellus ac cursus commodo, mauris sit condim eser ntumsi nibh, uum a justo vitaes amet risus amets un. </p>
                            <a class="but" href="#">More Information</a> 
                        </div>
                    </div>
                </div>
                <div class="shade"></div>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="photo_box content_zoom content_sytle_2">
            <div class="pic_box"> 
                <img alt="" src="/portals/35/pic5.jpg" class="img-responsive" />
                <div class="content ">
                    <div class="vertical_center_1">
                        <div class="vertical_center_2">
                            <h3>SEO Friendly</h3>
                            <p>Fugiat dapibus, tellus ac cursus commodo, mauris sit condim eser ntumsi nibh, uum a justo vitaes amet risus amets un. </p>
                            <a class="but" href="#">More Information</a> 
                        </div>
                    </div>
                </div>
                <div class="shade"></div>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="photo_box content_zoom content_sytle_2">
            <div class="pic_box"> 
                <img alt="" src="/portals/35/pic6.jpg" class="img-responsive" />
                <div class="content ">
                    <div class="vertical_center_1">
                        <div class="vertical_center_2">
                            <h3>SEO Friendly</h3>
                            <p>Fugiat dapibus, tellus ac cursus commodo, mauris sit condim eser ntumsi nibh, uum a justo vitaes amet risus amets un. </p>
                            <a class="but" href="#">More Information</a> 
                        </div>
                    </div>
                </div>
                <div class="shade"></div>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="photo_box content_zoom content_sytle_2">
            <div class="pic_box"> 
                <img alt="" src="/portals/35/pic7.jpg" class="img-responsive" />
                <div class="content ">
                    <div class="vertical_center_1">
                        <div class="vertical_center_2">
                            <h3>SEO Friendly</h3>
                            <p>Fugiat dapibus, tellus ac cursus commodo, mauris sit condim eser ntumsi nibh, uum a justo vitaes amet risus amets un. </p>
                            <a class="but" href="#">More Information</a> 
                        </div>
                    </div>
                </div>
                <div class="shade"></div>
            </div>
        </div>
    </div>
</div>

Option:

  1. This is a Carousel effect.Carousel

Our Skill area

Below is the screen shot:

Codes are as follows:

<div class="row">
    <div class="col-sm-6 loaded_list2">
        <p> Web Design</p>
        <div class="progressborder">
            <div class="progress progress-striped active">
                <div data-width="80%" class="bar animation animationwidth"><span></span></div>
            </div>
        </div>
        <p> HTML/CSS</p>
        <div class="progressborder">
            <div class="progress progress-striped active">
                <div data-width="85%" class="bar animation animationwidth"><span></span></div>
            </div>
        </div>
        <p> JQuery</p>
        <div class="progressborder mb0">
            <div class="progress progress-striped active">
                <div data-width="90%" class="bar animation animationwidth"><span></span> </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 loaded_list2">
        <p> Photoshop</p>
        <div class="progressborder">
            <div class="progress progress-striped active">
                <div data-width="70%" class="bar animation animationwidth"><span></span></div>
            </div>
        </div>
        <p> DNN</p>
        <div class="progressborder">
            <div class="progress progress-striped active">
                <div data-width="80%" class="bar animation animationwidth"><span></span></div>
            </div>
        </div>
        <p> Programme</p>
        <div class="progressborder mb0">
            <div class="progress progress-striped active">
                <div data-width="65%" class="bar animation animationwidth"><span></span> </div>
            </div>
        </div>
    </div>
</div>

Option:

  1. col-sm-6 is the width of each column, you can change the width you need through value 1~12.
  2. This is a ProgressBars Counters effect.ProgressBars Counters
  3. data-width is controlling the percentage that displays, you can display percentage through value 1%~100%

Carou sel area

Below is the screen shot:

Codes are as follows:

<div class="conb">
    <div class="dnn_layout content_mid">
        <div class="carousel carousel_7" data-pagination="false" data-autoheight="false" data-autoplay="false">
            <div class="item">
                <div class="conba"><img alt="" class="img-responsive" src="/portals/35/pic8_1.png" /></div>
            </div>
            <div class="item">
                <div class="conbb"><img alt="" class="img-responsive" src="/portals/35/pic9_1.png" /></div>
            </div>
            <div class="item">
                <div class="conbc"><img alt="" class="img-responsive" src="/portals/35/pic10_1.png" /></div>
            </div>
            <div class="item">
                <div class="conbd"><img alt="" class="img-responsive" src="/portals/35/pic11_1.png" /></div>
            </div>
            <div class="item">
                <div class="conbe"><img alt="" class="img-responsive" src="/portals/35/pic12_1.png" /></div>
            </div>
        </div>
    </div>
</div>

Option:

  1. This is a Carousel effect.You can modify Carousel to change effects. Carousel

About Us area

Below is the screen shot:

Codes are as follows:

<div class="bottoma">
    <p>Donec consectetur diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id, semper sed felis. Cum sociis natoque penatibus et magnis. </p>
    <p>Fugiat dapibus, tellus ac cursus commodo, mauris sit condim eser ntumsi nibh, uum a justo vitaes amet risus amets un.</p>
    <a href="#">More Information</a>
    <p class="socialicon_footer"> <a href="#" class="social social-facebook"></a> <a href="#" class="social social-twitter"></a> <a href="#" class="social social-skype"></a> <a href="#" class="social social-vimeo"></a> <a href="#" class="social social-rss"></a> </p>
</div>

Option:

  1. You can modify social to change icons. font icon list.
  2. Container is using Container-20064-1

Recent Blog area

Below is the screen shot:

Codes are as follows:

<ul class="bottomb">
    <li>
        <div class="bottomb_left"><span class="glyphicons glyph-calendar"></span></div>
        <div class="bottomb_right">
            <p>Sed ut perspiciatis, unde omnis iste natus error sit volup</p>
            <span>March 12th,2014</span>
        </div>
    </li>
    <li>
        <div class="bottomb_left"><span class="glyphicons glyph-calendar"></span></div>
        <div class="bottomb_right">
            <p>Lorem ipsum dolor sit amet, cond ectetur adipisicing elit</p>
            <span>April 08th,2014</span>
        </div>
    </li>
    <li>
        <div class="bottomb_left"><span class="glyphicons glyph-calendar"></span></div>
        <div class="bottomb_right">
            <p>Quis autem vel eum iure reprehe nderit qui in ea voluptate</p>
            <span>April 08th,2014</span>
        </div>
    </li>
</ul>

Option:

  1. You can modify glyphicons to change icons. font icon list.
  2. Container is using Container-20064-1

Tags area

Below is the screen shot:

Codes are as follows:

<div class="bottomc"> 
    <a href="#">Dnngo</a> <a href="#">HTML5</a> <a href="#">CSS3</a> <a href="#">Skin Pack</a> <a href="#">Catalook</a> <a href="#">Blog</a> <a href="#">Gallery</a> <a href="#">Features</a> <a href="#">Short Code</a> <a href="#">Mobilesite</a> <a href="#">Responsive</a> 
</div>

Option:

  1. Container is using Container-20064-1

Contact area

Below is the screen shot:

Codes are as follows:

<p>If you have any question, please e-mail us without hesitation. We will reply you as quickly as we can.</p>
<p>Address :   XingAn Street No.287</p>
<p>Phone :      (+086)-123-456-78910</p>
<p>Email :       dnnskindev@gmail.com</p>
<p>Skype :      dnngo-linda</p>
<p>Website :   www.dnngo.net</p>

Option:

  1. Container is using Container-20064-1
Home Version 2 - Ona Page

You can click the link to check Home Version 2 demo. Home Version 2

Anchor area

It will scroll to the corresponding area on the page when clicking the menu texts at the top. It will also do so when clicking the dots on the right of the skin.

These anchors are generated through page's anchorTag. Codes are as follows. You can place this piece of codes in page's HTML module, click the right anchor, then page will slide to this HTML module area.

  1. <div data-title="About Us" class="anchorTag" data-offset="-60" data-scrollshownav="true" data-menuanchor="true"> </div>

Option:

data-title Title displayed correspondingly to the right navigation. If page title of the menu is the same as data-title, page will scroll to this area when clicking menu texts.
data-menuanchor Whether to enable menu anchor feature or not.
data-scrollshownav Whether to enable navigation or not.
data-offset Offset value of up and down coordinate for anchor.
data-icourl Image url that displays correspondingly of the right navigation.
data-iconame Icon class names that displays correspondingly of the right navigation.

How to set menu anchor

  1. Click Add New Page button.



  2. Fill in Page Name and Page Title. Texts for Page Title needs to be the same as that of data-title.


  3. Put the anchor code to HTML module of the page. It will scroll to the corresponding area on the page when clicking the top menu texts.
    1. <div data-title="About Us" class="anchorTag" data-offset="-60" data-scrollshownav="true" data-menuanchor="true"> </div>

Banner area

Below is the screen shot:

It is using DNNGo LayerGalleryPro module here, you can import ContentListEntity-Home2.xml of the DNNGo_LayerGalleryPro folder to duplicate banner of the demo.

Icons area

Below is the screen shot:

Codes are as follows:

<ul class="home2_topa pt40">
    <li> <span>1</span>
        <h3>Web Design</h3>
        <p>Sed do eiusmod tempor</p>
    </li>
    <li> <span>2</span>
        <h3>Develop Skin</h3>
        <p>Sed do eiusmod tempor</p>
    </li>
    <li> <span>3</span>
        <h3>Adapt Programme</h3>
        <p>Sed do eiusmod tempor</p>
    </li>
</ul>

About Us area

Below is the screen shot:

Codes are as follows:

<div data-title="About Us" class="home2_cona anchorTag" data-scrollshownav="true">
    <div class="linebox">
        <div class="line"></div>
    </div>
    <div class="number">01</div>
    <div class="title">About Us</div>
</div>
<p class="home2_conb">Fusce dapibus, tellus ac cursus commodo, tortor mauri Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
<div class="home2_conc">
    <div class="linebox"> </div>
    <div class="timebox">
        <div class="row">
            <div class="col-xs-3">
                <div class="time">2011</div>
            </div>
            <div class="col-xs-3">
                <div class="time">2012</div>
            </div>
            <div class="col-xs-3">
                <div class="time">2013</div>
            </div>
            <div class="col-xs-3">
                <div class="time">2014</div>
            </div>
        </div>
    </div>
</div>
<div class="home2_cond">
    <div class="row">
        <div class="col-sm-6"><img alt="" class="img-responsive" src="/portals/35/home2_cond.png" /></div>
        <div class="col-sm-6">
            <h3>Information</h3>
            <div class="line"></div>
            <div class="horizontalTab_Top horizontalTab_Top_4">
                <ul class="resp-tabs-list">
                    <li><span>Who We Are</span></li>
                    <li><span>What We Do</span></li>
                    <li><span>Why Choose Us</span></li>
                </ul>
                <div class="resp-tabs-container">
                    <div class="resp_container">
                        <div class="resp_margin">
                            <div class="home2_cond_boxa">
                                <p>Phasellus enim libero, blandit vel sapi condimentum ultricies magna Quisque euismod orci ut et lobortis aliquam aliquam in tortor et lobortis aliquam Phasellus enim libero, blandit vel sapi condimentum ultricies magnis. </p>
                                <ul>
                                    <li>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</li>
                                    <li>Accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae</li>
                                    <li>Ibillo inventore veritatis et quasi architecto</li>
                                    <li>Dolor sit amet, consectetur, adipisci velit, sed quia non numquam</li>
                                </ul>
                                <div class="conj"><a href="#">More Information</a></div>
                            </div>
                        </div>
                    </div>
                    <div class="resp_container">
                        <div class="resp_margin">
                            <div class="home2_cond_boxb">
                                <ul>
                                    <li><img alt="" class="img-responsive" src="/portals/35/home2_cond_boxb1.png" />
                                        <p>Bmagna Quisque euismod orci ut et lobortis aliquam aliquam in tortor et lobortis aliquam Phasellus enim libero, blandit vel sapi condimentum ultricies magnis. <br />
                                        <a href="#">More Information  &gt;</a></p>
                                    </li>
                                    <li><img alt="" class="img-responsive" src="/portals/35/home2_cond_boxb2.png" />
                                        <p>Bmagna Quisque euismod orci ut et lobortis aliquam aliquam in tortor et lobortis aliquam Phasellus enim libero, blandit vel sapi condimentum ultricies magnis. <br />
                                        <a href="#">More Information  &gt;</a></p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="resp_container">
                        <div class="resp_margin">
                            <div class="home2_cond_boxc">
                                <ul class="list_style">
                                    <li><span class="glyphicons glyph-ok"></span>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</li>
                                    <li><span class="glyphicons glyph-ok"></span>Accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae</li>
                                    <li><span class="glyphicons glyph-ok"></span>Ibillo inventore veritatis et quasi architecto</li>
                                    <li><span class="glyphicons glyph-ok"></span>Dolor sit amet, consectetur, adipisci velit, sed quia non numquam</li>
                                    <li><span class="glyphicons glyph-ok"></span>Nunc id nibh in nisi convallis placerat vel est nisi</li>
                                    <li><span class="glyphicons glyph-ok"></span>Vestibulum tempus vehicula </li>
                                </ul>
                                <div class="conj"><a href="#">More Information</a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Option:

  1. This is a Responsive Tab effect.You can modify Responsive Tab to change image effects. Responsive Tab
  2. col-sm-6 col-xs-3 is the width of each column, you can change the width you need through value 1~12.

Services area

Below is the screen shot:

Codes are as follows:

<div class="home2_conbg_1">
    <div class="dnn_layout">
        <div class="content_mid clearfix">
            <div class="pane_layout">
                <div data-title="Services" class="home2_cona anchorTag">
                    <div class="linebox">
                        <div class="line"></div>
                    </div>
                    <div class="number">02</div>
                    <div class="title">Services</div>
                </div>
                <div class="home2_cone"><img alt="" src="/portals/35/home2_cone.png" class="img-responsive" /></div>
                <div class="carousel carousel_9" data-autoheight="false" data-autoplay="false">
                    <div class="item">
                        <div class="ico"><span class="glyphicons glyph-magic"></span></div>
                        <h3>Clean Design</h3>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
                    </div>
                    <div class="item">
                        <div class="ico"><span class="glyphicons glyph-cogwheels"></span></div>
                        <h3>Easy Settings</h3>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
                    </div>
                    <div class="item">
                        <div class="ico"><span class="glyphicons glyph-wifi-alt"></span></div>
                        <h3>Networks</h3>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
                    </div>
                    <div class="item">
                        <div class="ico"><span class="glyphicons glyph-group"></span></div>
                        <h3>Membership</h3>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
                    </div>
                    <div class="item">
                        <div class="ico"><span class="glyphicons glyph-signal"></span></div>
                        <h3>Manage Data</h3>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
                    </div>
                    <div class="item">
                        <div class="ico"><span class="glyphicons glyph-adjust-alt"></span></div>
                        <h3>Attractive Web</h3>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="home2_conbg_2">
    <div class="dnn_layout">
        <div class="content_mid clearfix">
            <div class="pane_layout">
                <div class="number_Animation_1 row">
                    <div class="col-sm-3">
                        <div class="number_Animation_bg"> <span class="animation  number" data-number="1209">0</span> <span class="number_name">Projects</span> </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="number_Animation_bg"> <span class="animation  number" data-number="580">0</span> <span class="number_name">Customers</span> </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="number_Animation_bg"> <span class="animation  number" data-number="763">0</span> <span class="number_name">Employees</span> </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="number_Animation_bg"> <span class="animation  number" data-number="104">0</span> <span class="number_name">Offices</span> </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Option:

  1. This is a Carousel effect.You can modify Carousel to change effects. Carousel
  2. You can modify glyphicons to change icons. font icon list.
  3. You can change the value you need to display through data-number

Our Projects area

Below is the screen shot:

Codes are as follows:

<div data-title="Our Projects" class="home2_cona anchorTag">
    <div class="linebox">
        <div class="line"></div>
    </div>
    <div class="number">03</div>
    <div class="title">Our Projects</div>
</div>
<div class="isotope_grid isotope_1">
    <div class="isotope_group"> <a data-filter="*" href="#" class="active">All</a> / <a data-filter=".Webdesign" href="#">Web Design</a> / <a data-filter=".Photoallumbs" href="#">Photo Allumbs</a> / <a data-filter=".Graphics" href="#">Graphics</a> / <a data-filter=".Vedios" href="#">Vedios</a> </div>
    <div class="isotope_main" data-min-width="350">
        <div class="isotope_item Webdesign Photoallumbs">
            <div class="photo_box ico_TopAndBottom_enter">
                <div class="pic_box"> 
                    <img alt="" src="/portals/35/isotope1.jpg" />
                    <div class="ico"> <a href="#"><span class="glyphicons glyph-tag ico_top"></span></a> <a href="#"><span class="glyphicons glyph-undo ico_bottom"></span></a> </div>
                    <div class="shade"></div>
                </div>
                <div class="text_sytle_6">
                    <div class="dateandtitle clearfix">
                        <div class="date">12<br />
                            <span>Mar 2014</span>
                        </div>
                        <div class="title">Modules Development<br />
                            <span>By Supperaccount</span>
                        </div>
                    </div>
                    <p>Consetetur sadscing elitr, sed diam n my eir umod tmpos duolore magna aliquyam erat sed dia, deso grota heros med domagna. urs duolore ascing.</p>
                    <div class="aandinfo clearfix"> <a href="#">Read More</a>
                    <div class="info"><span class="glyphicons glyph-chat"></span>8</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="isotope_item Photoallumbs Graphics">
            <div class="photo_box ico_TopAndBottom_enter">
                <div class="pic_box"> 
                    <img alt="" src="/portals/35/isotope2.jpg" />
                    <div class="ico"> <a href="#"><span class="glyphicons glyph-tag ico_top"></span></a> <a href="#"><span class="glyphicons glyph-undo ico_bottom"></span></a> </div>
                    <div class="shade"></div>
                </div>
                <div class="text_sytle_6">
                    <div class="dateandtitle clearfix">
                        <div class="date">08<br />
                            <span>Ari 2014</span>
                        </div>
                        <div class="title">Customized Services<br />
                            <span>By Supperaccount</span>
                        </div>
                    </div>
                    <p>Consetetur sadscing elitr, sed diam n my eir umod tmpos duolore magna aliquyam erat sed dia, deso grota heros med domagna. urs duolore ascing.</p>
                    <div class="aandinfo clearfix"> <a href="#">Read More</a>
                    <div class="info"><span class="glyphicons glyph-chat"></span>4</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="isotope_item Graphics Vedios">
            <div class="photo_box ico_TopAndBottom_enter">
                <div class="pic_box"> 
                    <img alt="" src="/portals/35/isotope3.jpg" />
                    <div class="ico"> <a href="#"><span class="glyphicons glyph-tag ico_top"></span></a> <a href="#"><span class="glyphicons glyph-undo ico_bottom"></span></a> </div>
                    <div class="shade"></div>
                </div>
                <div class="text_sytle_6">
                    <div class="dateandtitle clearfix">
                        <div class="date">25<br />
                            <span>May 2014</span>
                        </div>
                        <div class="title">Interactive Theme<br />
                            <span>By Supperaccount</span>
                        </div>
                    </div>
                    <p>Consetetur sadscing elitr, sed diam n my eir umod tmpos duolore magna aliquyam erat sed dia, deso grota heros med domagna. urs duolore ascing.</p>
                    <div class="aandinfo clearfix"> <a href="#">Read More</a>
                    <div class="info"><span class="glyphicons glyph-chat"></span>7</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="isotope_item Vedios Webdesign">
            <div class="photo_box ico_TopAndBottom_enter">
                <div class="pic_box"> 
                    <img alt="" src="/portals/35/isotope4.jpg" />
                    <div class="ico"> <a href="#"><span class="glyphicons glyph-tag ico_top"></span></a> <a href="#"><span class="glyphicons glyph-undo ico_bottom"></span></a> </div>
                    <div class="shade"></div>
                </div>
                <div class="text_sytle_6">
                    <div class="dateandtitle clearfix">
                        <div class="date">24<br />
                            <span>Jul 2014</span>
                        </div>
                        <div class="title">Personalized Business<br />
                            <span>By Supperaccount</span>
                        </div>
                    </div>
                    <p>Consetetur sadscing elitr, sed diam n my eir umod tmpos duolore magna aliquyam erat sed dia, deso grota heros med domagna. urs duolore ascing.</p>
                    <div class="aandinfo clearfix"> <a href="#">Read More</a>
                    <div class="info"><span class="glyphicons glyph-chat"></span>2</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="isotope_item Webdesign Photoallumbs">
            <div class="photo_box ico_TopAndBottom_enter">
                <div class="pic_box"> 
                    <img alt="" src="/portals/35/isotope5.jpg" />
                    <div class="ico"> <a href="#"><span class="glyphicons glyph-tag ico_top"></span></a> <a href="#"><span class="glyphicons glyph-undo ico_bottom"></span></a> </div>
                    <div class="shade"></div>
                </div>
                <div class="text_sytle_6">
                    <div class="dateandtitle clearfix">
                        <div class="date">17<br />
                            <span>Aug 2014</span>
                        </div>
                        <div class="title">Advanced Technology<br />
                            <span>By Supperaccount</span>
                        </div>
                    </div>
                    <p>Consetetur sadscing elitr, sed diam n my eir umod tmpos duolore magna aliquyam erat sed dia, deso grota heros med domagna. urs duolore ascing.</p>
                    <div class="aandinfo clearfix"> <a href="#">Read More</a>
                    <div class="info"><span class="glyphicons glyph-chat"></span>9</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="isotope_item Photoallumbs Graphics">
            <div class="photo_box ico_TopAndBottom_enter">
                <div class="pic_box"> 
                    <img alt="" src="/portals/35/isotope6.jpg" />
                    <div class="ico"> <a href="#"><span class="glyphicons glyph-tag ico_top"></span></a> <a href="#"><span class="glyphicons glyph-undo ico_bottom"></span></a> </div>
                    <div class="shade"></div>
                </div>
                <div class="text_sytle_6">
                    <div class="dateandtitle clearfix">
                        <div class="date">03<br />
                            <span>Sep 2014</span>
                        </div>
                        <div class="title">Compelling Solutions<br />
                            <span>By Supperaccount</span>
                        </div>
                    </div>
                    <p>Consetetur sadscing elitr, sed diam n my eir umod tmpos duolore magna aliquyam erat sed dia, deso grota heros med domagna. urs duolore ascing.</p>
                    <div class="aandinfo clearfix"> <a href="#">Read More</a>
                    <div class="info"><span class="glyphicons glyph-chat"></span>6</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Option:

  1. You can modify photo_box to change image effects. Image Effects
  2. You can add <a data-filter=".FilterName" href="#">Filter Name</a> to increase categories. data-filter=".FilterName" can not be blank space.
  3. You can modify data-min-width to change minimum width of image.
  4. You can modify isotope_item FilterName to categorize images.
  5. You can modify glyphicons to change icons. font icon list.

Our Teams area

Below is the screen shot:

Codes are as follows:

<div class="SectionStyles5">
    <div class="SectionStyles5_bg">
        <div class="dnn_layout">
            <div class="content_mid clearfix">
                <div class="pane_layout">
                    <div data-title="Our Teams" class="home2_cona anchorTag">
                        <div class="linebox">
                            <div class="line"></div>
                        </div>
                        <div class="number">04</div>
                        <div class="title">Our Teams</div>
                    </div>
                    <p class="home2_conb">Fusce dapibus, tellus ac cursus commodo, tortor mauri Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
                    <div class="row ourteam_1">
                        <div class="col-sm-6 col-md-3">
                            <div class="team_list">
                                <div class="team_person">
                                    <div class="team_img"><img alt="" src="/portals/35/ourteam1.jpg" class="img-responsive" /></div>
                                </div>
                                <div class="team_content">
                                    <div class="team_title">Andrea Arkov</div>
                                    <div class="team_title2">Web Designer</div>
                                    <span class="team_titleline"></span>
                                    <p>PhotoShop, Fireworks, Illustrator</p>
                                    <div class="team_social"> <a href="#"><span class="social social-facebook"></span></a> <a href="#"><span class="social social-twitter"></span></a> <a href="#"><span class="social social-linked-in"></span></a> </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-3">
                            <div class="team_list">
                                <div class="team_person">
                                    <div class="team_img"><img alt="" src="/portals/35/ourteam2.jpg" class="img-responsive" /></div>
                                </div>
                                <div class="team_content">
                                    <div class="team_title">John Smith</div>
                                    <div class="team_title2">Skin Developer</div>
                                    <span class="team_titleline"></span>
                                    <p>Dreamweaver, Html5 &amp; Css3</p>
                                    <div class="team_social"> <a href="#"><span class="social social-facebook"></span></a> <a href="#"><span class="social social-twitter"></span></a> <a href="#"><span class="social social-linked-in"></span></a> </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-3">
                            <div class="team_list">
                                <div class="team_person">
                                    <div class="team_img"><img alt="" src="/portals/35/ourteam3.jpg" class="img-responsive" /></div>
                                </div>
                                <div class="team_content">
                                    <div class="team_title">Harra Halloy</div>
                                    <div class="team_title2">Programmer</div>
                                    <span class="team_titleline"></span>
                                    <p>C++, JQuery, ASP.Net</p>
                                    <div class="team_social"> <a href="#"><span class="social social-facebook"></span></a> <a href="#"><span class="social social-twitter"></span></a> <a href="#"><span class="social social-linked-in"></span></a> </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-3">
                            <div class="team_list">
                                <div class="team_person">
                                    <div class="team_img"><img alt="" src="/portals/35/ourteam4.jpg" class="img-responsive" /></div>
                                </div>
                                <div class="team_content">
                                    <div class="team_title">David Chris</div>
                                    <div class="team_title2">Ceo Manager</div>
                                    <span class="team_titleline"></span>
                                    <p>Management Science</p>
                                    <div class="team_social"> <a href="#"><span class="social social-facebook"></span></a> <a href="#"><span class="social social-twitter"></span></a> <a href="#"><span class="social social-linked-in"></span></a> </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Option:

  1. This is a SectionStyles effect.You can modify SectionStyles to change background-image effects. SectionStyles
  2. col-sm-6 col-md-3 is the width of each column, you can change the width you need through value 1~12.
  3. img-responsive image responsive
  4. You can modify social to change icons. font icon list.

Our Skills area

Below is the screen shot:

Codes are as follows:

<div data-title="Our Skills" class="home2_cona anchorTag">
  <div class="linebox">
    <div class="line"></div>
  </div>
  <div class="number">05</div>
  <div class="title">Our Skills</div>
</div>
<p class="home2_conb">Fusce dapibus, tellus ac cursus commodo, tortor mauri Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
<div class="home2_cone"> <img alt="" class="img-responsive" src="/portals/35/home2_cone1.png" /> <img alt="" class="img-responsive" src="/portals/35/home2_cone2.png" /> <img alt="" class="img-responsive" src="/portals/35/home2_cone3.png" /> </div>
<div class="row home2_conf">
  <div class="col-sm-6">
    <div class="cono">
      <div class="sector" data-fan="name1:AccentColour:35% " data-color="#eeeeee" data-size="35" data-name="false"> </div>
      <h3>Photoshop</h3>
      <div class="line"></div>
      <p>Sed non neque elit. Sed ut imperdiet nisi. Proin condime ntum fermentum nunc. Etiam pharetra, erat sed ferm entum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Sed non neque elit. Sed ut imperdiet nisi. Proin condimetum nunc. Etiam pharetra, erat sed ferm fermentum nunc. Etiam pharetra.</p>
      <a href="#">More Information ></a> </div>
  </div>
  <div class="col-sm-6">
    <div class="cono">
      <div class="sector" data-fan="name1:AccentColour:68% " data-color="#eeeeee" data-size="35" data-name="false"> </div>
      <h3>JQuery</h3>
      <div class="line"></div>
      <p>Sed non neque elit. Sed ut imperdiet nisi. Proin condime ntum fermentum nunc. Etiam pharetra, erat sed ferm entum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Sed non neque elit. Sed ut imperdiet nisi. Proin condimetum nunc. Etiam pharetra, erat sed ferm fermentum nunc. Etiam pharetra.</p>
      <a href="#">More Information ></a> </div>
  </div>
  <div class="col-sm-6">
    <div class="centerline"></div>
  </div>
  <div class="col-sm-6">
    <div class="centerline"></div>
  </div>
  <div class="col-sm-6">
    <div class="cono">
      <div class="sector" data-fan="name1:AccentColour:74% " data-color="#eeeeee" data-size="35" data-name="false"> </div>
      <h3>Html5/Css3</h3>
      <div class="line"></div>
      <p>Sed non neque elit. Sed ut imperdiet nisi. Proin condime ntum fermentum nunc. Etiam pharetra, erat sed ferm entum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Sed non neque elit. Sed ut imperdiet nisi. Proin condimetum nunc. Etiam pharetra, erat sed ferm fermentum nunc. Etiam pharetra.</p>
      <a href="#">More Information ></a> </div>
  </div>
  <div class="col-sm-6">
    <div class="cono">
      <div class="sector" data-fan="name1:AccentColour:54% " data-color="#eeeeee" data-size="35" data-name="false"> </div>
      <h3>DNN</h3>
      <div class="line"></div>
      <p>Sed non neque elit. Sed ut imperdiet nisi. Proin condime ntum fermentum nunc. Etiam pharetra, erat sed ferm entum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Sed non neque elit. Sed ut imperdiet nisi. Proin condimetum nunc. Etiam pharetra, erat sed ferm fermentum nunc. Etiam pharetra.</p>
      <a href="#">More Information ></a> </div>
  </div>
</div>

Option:

  1. You can change the value you need to display through data-fan
  2. You can change the value you need to display through data-color
  3. You can change the value you need to display through data-size
  4. You can change the value you need to display through data-name
  5. col-sm-6 is the width of each column, you can change the width you need through value 1~12.

Prcing Table area

Below is the screen shot:

Codes are as follows:

<div class="SectionStyles6">
  <div class="SectionStyles6_bg">
    <div class="dnn_layout">
      <div class="content_mid clearfix">
        <div class="pane_layout">
          <div data-title="Prcing Table" class="home2_cona anchorTag">
            <div class="linebox">
              <div class="line"></div>
            </div>
            <div class="number">06</div>
            <div class="title">Prcing Table</div>
          </div>
          <div class="price-table price-table3 row">
            <div class="col-sm-4">
              <div class="price_border">
                <div class="price_title">
                  <h2>Basic</h2>
                </div>
                <div class="price_holder">
                  <div class="price_box"><span class="sup">$</span><span class="price">199</span><span class="unit">/ Month</span></div>
                  <ul>
                    <li><span>12 Hours</span> Support</li>
                    <li><span>10GB</span> Space available</li>
                    <li><span>Unlimited</span> Colors</li>
                    <li><span>Responsive</span> Web</li>
                    <li><span>5 Times</span> Change</li>
                    <li><span>Countless</span> Features</li>
                  </ul>
                  <a class="btn " href="#">Buy It Now</a> </div>
              </div>
            </div>
            <div class="col-sm-4 best_value">
              <div class="price_border">
                <div class="price_title ">
                  <h2>Standard</h2>
                </div>
                <div class="price_holder">
                  <div class="price_box"><span class="sup">$</span><span class="price">299</span><span class="unit">/ Month</span></div>
                  <ul>
                    <li><span>24 Hours</span> Support</li>
                    <li><span>50GB</span> Space available</li>
                    <li><span>Unlimited</span> Colors</li>
                    <li><span>Responsive</span> Web</li>
                    <li><span>10 Times</span> Change</li>
                    <li><span>Countless</span> Features</li>
                  </ul>
                  <a class="btn" href="#">Buy It Now</a> </div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="price_border">
                <div class="price_title">
                  <h2>Advanced</h2>
                </div>
                <div class="price_holder">
                  <div class="price_box"><span class="sup">$</span><span class="price">399</span><span class="unit">/ Month</span></div>
                  <ul>
                    <li><span>36 Hours</span> Support</li>
                    <li><span>100GB</span> Space available</li>
                    <li><span>Unlimited</span> Colors</li>
                    <li><span>Responsive</span> Web</li>
                    <li><span>15 Times</span> Change</li>
                    <li><span>Countless</span> Features</li>
                  </ul>
                  <a class="btn" href="#">Buy It Now</a> </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Option:

  1. col-sm-4 is the width of each column, you can change the width you need through value 1~12.
  2. This is a SectionStyles effect.You can modify SectionStyles to change image effects. SectionStyles

Contact area

Below is the screen shot:

Codes are as follows:

<div data-title="Contact" class="home2_cona anchorTag">
  <div class="linebox">
    <div class="line"></div>
  </div>
  <div class="number">07</div>
  <div class="title">Contact</div>
</div>
<p class="home2_conb">Fusce dapibus, tellus ac cursus commodo, tortor mauri Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
<div class="row home2_cong">
  <div class="col-sm-4">
    <div class="home2_cong_left"> <span class="glyphicons glyph-earphone"></span>
      <p>Call Our Services<br />
        <span>Phone :  (+086) - 1234 - 56789</span></p>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="home2_cong_center"> <span class="glyphicons glyph-envelope"></span>
      <p>Write An Email To Us<br />
        <span>Email :  dnnskindev@gmail.com</span></p>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="home2_cong_right"> <span class="glyphicons glyph-google-maps"></span>
      <p>Find Our Location<br />
        <span>Address :  XingAn Street No.287</span></p>
    </div>
  </div>
</div>

Option:

  1. col-sm-4 is the width of each column, you can change the width you need through value 1~12.
  2. You can modify glyphicons to change icons. font icon list.

PowerForms area

Below is the screen shot:

Option:

  1. This is Theme_Responsive_20064_home2 theme of DNNGo PowerForms module

footicon area

Below is the screen shot:

Codes are as follows:

<div class="footicon"> <a class="social social-facebook" href="#"></a> <a class="social social-twitter" href="#"></a> <a class="social social-flickr" href="#"></a> <a class="social social-linked-in" href="#"></a> <a class="social social-skype" href="#"></a> <a class="social social-google-plus" href="#"></a> <a class="social social-rss" href="#"></a> </div>

Option:

  1. You can modify social to change icons. font icon list.
Home Version 3

You can click the link to check Home Version 3 demo. Home Version 3

Banner area

Below is the screen shot:

It is using DNNGo LayerGalleryPro module here,you can import ContentListEntity-Home3.xml of the DNNGo_LayerGalleryPro folder to duplicate banner of the demo.

Sales Products area

Below is the screen shot:

Codes are as follows:

<div class="row">
  <div class="col-sm-4">
    <div class="home3cona">
      <h6>Sales<br>
        Products</h6>
      All Order Overs $1000.00 <span class="glyphicons glyph-keys"></span> </div>
  </div>
  <div class="col-sm-4">
    <div class="home3cona">
      <h6>Hot<br>
        Categories</h6>
      Read More To the Store <span class="glyphicons glyph-table-tennis"></span> </div>
  </div>
  <div class="col-sm-4">
    <div class="home3cona">
      <h6>Order<br>
        your Favorite</h6>
      Read More To the Store <span class="glyphicons glyph-drink"></span> </div>
  </div>
</div>

Option:

  1. col-sm-4 is the width of each column, you can change the width you need through value 1~12.
  2. You can modify glyphicons to change icons. font icon list.

HorizontalTab_Top area

Below is the screen shot:

Codes are as follows:

<div class="horizontalTab_Top horizontalTab_Top_5">
  <ul class="resp-tabs-list clearfix">
    <li><span>Feaatured Products</span></li>
    <li><span>Popular Products</span></li>
    <li><span>On Sale</span></li>
    <li><span>Latest Products</span></li>
  </ul>
  <div class="resp-tabs-container">
    <div class="resp_container">
      <div class="resp_margin">
        <ul class="home3conb clearfix">
          <li>
            <div class="tips">
              <div class="tipscolor"></div>
              Hot</div>
            <div class="image"><img alt="" src="/portals/35/home3conb_1.png" class="img-responsive" /></div>
            <h6 class="Model">Trend3 G3502C Mobile</h6>
            <p class="name">Samsumg</p>
            <div class="line"></div>
            <div class="Price clearfix"> <span class="Priceleft">$2999.00</span> <span class="Priceright">$1499.00</span> </div>
          </li>
          <li>
            <div class="tips">
              <div class="tipscolor"></div>
              Sale</div>
            <div class="image"><img alt="" src="/portals/35/home3conb_2.png" class="img-responsive" /></div>
            <h6 class="Model">Desire 516t 3G Mobile</h6>
            <p class="name">ZhongXIn</p>
            <div class="line"></div>
            <div class="Price clearfix"> <span class="Priceleft">$1349.00</span> <span class="Priceright">$869.00</span> </div>
          </li>
          <li>
            <div class="tips">
              <div class="tipscolor"></div>
              New</div>
            <div class="image"><img alt="" src="/portals/35/home3conb_3.png" class="img-responsive" /></div>
            <h6 class="Model">TD-SCDMA/GSM Mobile</h6>
            <p class="name">Lenovo</p>
            <div class="line"></div>
            <div class="Price clearfix"> <span class="Priceleft">$1349.00</span> <span class="Priceright">$869.00</span> </div>
          </li>
          <li>
            <div class="tips">
              <div class="tipscolor"></div>
              Hot</div>
            <div class="image"><img alt="" src="/portals/35/home3conb_4.png" class="img-responsive" /></div>
            <h6 class="Model">WCDMA/GSM Mobile</h6>
            <p class="name">Huawei</p>
            <div class="line"></div>
            <div class="Price clearfix"> <span class="Priceleft">$1899.00</span> <span class="Priceright">$1099.00</span> </div>
          </li>
          <li>
            <div class="tips">
              <div class="tipscolor"></div>
              Hot</div>
            <div class="image"><img alt="" src="/portals/35/home3conb_5.png" class="img-responsive" /></div>
            <h6 class="Model">Eight Nuclear CPU Mobile</h6>
            <p class="name">MX3</p>
            <div class="line"></div>
            <div class="Price clearfix"> <span class="Priceleft">$1899.00</span> <span class="Priceright">$1589.00</span> </div>
          </li>
          <li>
            <div class="tips">
              <div class="tipscolor"></div>
              Sale</div>
            <div class="image"><img alt="" src="/portals/35/home3conb_6.png" class="img-responsive" /></div>
            <h6 class="Model">CDMA2000/GSM Mobile</h6>
            <p class="name">Coolpad</p>
            <div class="line"></div>
            <div class="Price clearfix"> <span class="Priceleft">$2039.00</span> <span class="Priceright">$1989.00</span> </div>
          </li>
          <li>
            <div class="tips">
              <div class="tipscolor"></div>
              New</div>
            <div class="image"><img alt="" src="/portals/35/home3conb_7.png" class="img-responsive" /></div>
            <h6 class="Model">A920T GSM 3G Mobile</h6>
            <p class="name">Amoi</p>
            <div class="line"></div>
            <div class="Price clearfix"> <span class="Priceleft">$1029.00</span> <span class="Priceright">$599.00</span> </div>
          </li>
          <li>
            <div class="tips">
              <div class="tipscolor"></div>
              Hot</div>
            <div class="image"><img alt="" src="/portals/35/home3conb_8.png" class="img-responsive" /></div>
            <h6 class="Model">iPhone 5s 16G Mobile</h6>
            <p class="name">Apple</p>
            <div class="line"></div>
            <div class="Price clearfix"> <span class="Priceleft">$5288.00</span> <span class="Priceright">$4688.00</span> </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="resp_container">
      <div class="resp_margin">
        <ul class="home3conb clearfix">
          <li>
            <div class="tips">
              <div class="tipscolor"></div>
              Hot</div>
            <div class="image"><img alt="" src="/portals/35/home3conb_5.png" class="img-responsive" /></div>
            <h6 class="Model">Eight Nuclear CPU Mobile</h6>
            <p class="name">MX3</p>
            <div class="line"></div>
            <div class="Price clearfix"> <span class="Priceleft">$1899.00</span> <span class="Priceright">$1589.00</span> </div>
          </li>
          <li>
            <div class="tips">
              <div class="tipscolor"></div>
              Sale</div>
            <div class="image"><img alt="" src="/portals/35/home3conb_6.png" class="img-responsive" /></div>
            <h6 class="Model">CDMA2000/GSM Mobile</h6>
            <p class="name">Coolpad</p>
            <div class="line"></div>
            <div class="Price clearfix"> <span class="Priceleft">$2039.00</span> <span class="Priceright">$1989.00</span> </div>
          </li>
          <li>
            <div class="tips">
              <div class="tipscolor"></div>
              New</div>
            <div class="image"><img alt="" src="/portals/35/home3conb_7.png" class="img-responsive" /></div>
            <h6 class="Model">A920T GSM 3G Mobile</h6>
            <p class="name">Amoi</p>
            <div class="line"></div>
            <div class="Price clearfix"> <span class="Priceleft">$1029.00</span> <span class="Priceright">$599.00</span> </div>
          </li>
          <li>
            <div class="tips">
              <div class="tipscolor"></div>
              Hot</div>
            <div class="image"><img alt="" src="/portals/35/home3conb_8.png" class="img-responsive" /></div>
            <h6 class="Model">iPhone 5s 16G Mobile</h6>
            <p class="name">Apple</p>
            <div class="line"></div>
            <div class="Price clearfix"> <span class="Priceleft">$5288.00</span> <span class="Priceright">$4688.00</span> </div>
          </li>
          <li>
            <div class="tips">
              <div class="tipscolor"></div>
              Hot</div>
            <div class="image"><img alt="" src="/portals/35/home3conb_1.png" class="img-responsive" /></div>
            <h6 class="Model">Trend3 G3502C Mobile</h6>
            <p class="name">Samsumg</p>
            <div class="line"></div>
            <div class="Price clearfix"> <span class="Priceleft">$2999.00</span> <span class="Priceright">$1499.00</span> </div>
          </li>
          <li>
            <div class="tips">
              <div class="tipscolor"></div>
              Sale</div>
            <div class="image"><img alt="" src="/portals/35/home3conb_2.png" class="img-responsive" /></div>
            <h6 class="Model">Desire 516t 3G Mobile</h6>
            <p class="name">ZhongXIn</p>
            <div class="line"></div>
            <div class="Price clearfix"> <span class="Priceleft">$1349.00</span> <span class="Priceright">$869.00</span> </div>
          </li>
          <li>
            <div class="tips">
              <div class="tipscolor"></div>
              New</div>
            <div class="image"><img alt="" src="/portals/35/home3conb_3.png" class="img-responsive" /></div>
            <h6 class="Model">TD-SCDMA/GSM Mobile</h6>
            <p class="name">Lenovo</p>
            <div class="line"></div>
            <div class="Price clearfix"> <span class="Priceleft">$1349.00</span> <span class="Priceright">$869.00</span> </div>
          </li>
          <li>
            <div class="tips">
              <div class="tipscolor"></div>
              Hot</div>
            <div class="image"><img alt="" src="/portals/35/home3conb_4.png" class="img-responsive" /></div>
            <h6 class="Model">WCDMA/GSM Mobile</h6>
            <p class="name">Huawei</p>
            <div class="line"></div>
            <div class="Price clearfix"> <span class="Priceleft">$1899.00</span> <span class="Priceright">$1099.00</span> </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="resp_container">
      <div class="resp_margin">
        <ul class="home3conb clearfix">
          <li>
            <div class="tips">
              <div class="tipscolor"></div>
              Hot</div>
            <div class="image"><img alt="" src="/portals/35/home3conb_8.png" class="img-responsive" /></div>
            <h6 class="Model">iPhone 5s 16G Mobile</h6>
            <p class="name">Apple</p>
            <div class="line"></div>
            <div class="Price clearfix"> <span class="Priceleft">$5288.00</span> <span class="Priceright">$4688.00</span> </div>
          </li>
          <li>
            <div class="tips">
              <div class="tipscolor"></div>
              New</div>
            <div class="image"><img alt="" src="/portals/35/home3conb_7.png" class="img-responsive" /></div>
            <h6 class="Model">A920T GSM 3G Mobile</h6>
            <p class="name">Amoi</p>
            <div class="line"></div>
            <div class="Price clearfix"> <span class="Priceleft">$1029.00</span> <span class="Priceright">$599.00</span> </div>
          </li>
          <li>
            <div class="tips">
              <div class="tipscolor"></div>
              Sale</div>
            <div class="image"><img alt="" src="/portals/35/home3conb_6.png" class="img-responsive" /></div>
            <h6 class="Model">CDMA2000/GSM Mobile</h6>
            <p class="name">Coolpad</p>
            <div class="line"></div>
            <div class="Price clearfix"> <span class="Priceleft">$2039.00</span> <span class="Priceright">$1989.00</span> </div>
          </li>
          <li>
            <div class="tips">
              <div class="tipscolor"></div>
              Hot</div>
            <div class="image"><img alt="" src="/portals/35/home3conb_5.png" class="img-responsive" /></div>
            <h6 class="Model">Eight Nuclear CPU Mobile</h6>
            <p class="name">MX3</p>
            <div class="line"></div>
            <div class="Price clearfix"> <span class="Priceleft">$1899.00</span> <span class="Priceright">$1589.00</span> </div>
          </li>
          <li>
            <div class="tips">
              <div class="tipscolor"></div>
              New</div>
            <div class="image"><img alt="" src="/portals/35/home3conb_3.png" class="img-responsive" /></div>
            <h6 class="Model">TD-SCDMA/GSM Mobile</h6>
            <p class="name">Lenovo</p>
            <div class="line"></div>
            <div class="Price clearfix"> <span class="Priceleft">$1349.00</span> <span class="Priceright">$869.00</span> </div>
          </li>
          <li>
            <div class="tips">
              <div class="tipscolor"></div>
              Hot</div>
            <div class="image"><img alt="" src="/portals/35/home3conb_4.png" class="img-responsive" /></div>
            <h6 class="Model">WCDMA/GSM Mobile</h6>
            <p class="name">Huawei</p>
            <div class="line"></div>
            <div class="Price clearfix"> <span class="Priceleft">$1899.00</span> <span class="Priceright">$1099.00</span> </div>
          </li>
          <li>
            <div class="tips">
              <div class="tipscolor"></div>
              Sale</div>
            <div class="image"><img alt="" src="/portals/35/home3conb_2.png" class="img-responsive" /></div>
            <h6 class="Model">Desire 516t 3G Mobile</h6>
            <p class="name">ZhongXIn</p>
            <div class="line"></div>
            <div class="Price clearfix"> <span class="Priceleft">$1349.00</span> <span class="Priceright">$869.00</span> </div>
          </li>
          <li>
            <div class="tips">
              <div class="tipscolor"></div>
              Hot</div>
            <div class="image"><img alt="" src="/portals/35/home3conb_1.png" class="img-responsive" /></div>
            <h6 class="Model">Trend3 G3502C Mobile</h6>
            <p class="name">Samsumg</p>
            <div class="line"></div>
            <div class="Price clearfix"> <span class="Priceleft">$2999.00</span> <span class="Priceright">$1499.00</span> </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="resp_container">
      <div class="resp_margin">
        <ul class="home3conb clearfix">
          <li>
            <div class="tips">
              <div class="tipscolor"></div>
              Hot</div>
            <div class="image"><img alt="" src="/portals/35/home3conb_1.png" class="img-responsive" /></div>
            <h6 class="Model">Trend3 G3502C Mobile</h6>
            <p class="name">Samsumg</p>
            <div class="line"></div>
            <div class="Price clearfix"> <span class="Priceleft">$2999.00</span> <span class="Priceright">$1499.00</span> </div>
          </li>
          <li>
            <div class="tips">
              <div class="tipscolor"></div>
              Sale</div>
            <div class="image"><img alt="" src="/portals/35/home3conb_2.png" class="img-responsive" /></div>
            <h6 class="Model">Desire 516t 3G Mobile</h6>
            <p class="name">ZhongXIn</p>
            <div class="line"></div>
            <div class="Price clearfix"> <span class="Priceleft">$1349.00</span> <span class="Priceright">$869.00</span> </div>
          </li>
          <li>
            <div class="tips">
              <div class="tipscolor"></div>
              New</div>
            <div class="image"><img alt="" src="/portals/35/home3conb_3.png" class="img-responsive" /></div>
            <h6 class="Model">TD-SCDMA/GSM Mobile</h6>
            <p class="name">Lenovo</p>
            <div class="line"></div>
            <div class="Price clearfix"> <span class="Priceleft">$1349.00</span> <span class="Priceright">$869.00</span> </div>
          </li>
          <li>
            <div class="tips">
              <div class="tipscolor"></div>
              Hot</div>
            <div class="image"><img alt="" src="/portals/35/home3conb_4.png" class="img-responsive" /></div>
            <h6 class="Model">WCDMA/GSM Mobile</h6>
            <p class="name">Huawei</p>
            <div class="line"></div>
            <div class="Price clearfix"> <span class="Priceleft">$1899.00</span> <span class="Priceright">$1099.00</span> </div>
          </li>
          <li>
            <div class="tips">
              <div class="tipscolor"></div>
              Hot</div>
            <div class="image"><img alt="" src="/portals/35/home3conb_5.png" class="img-responsive" /></div>
            <h6 class="Model">Eight Nuclear CPU Mobile</h6>
            <p class="name">MX3</p>
            <div class="line"></div>
            <div class="Price clearfix"> <span class="Priceleft">$1899.00</span> <span class="Priceright">$1589.00</span> </div>
          </li>
          <li>
            <div class="tips">
              <div class="tipscolor"></div>
              Sale</div>
            <div class="image"><img alt="" src="/portals/35/home3conb_6.png" class="img-responsive" /></div>
            <h6 class="Model">CDMA2000/GSM Mobile</h6>
            <p class="name">Coolpad</p>
            <div class="line"></div>
            <div class="Price clearfix"> <span class="Priceleft">$2039.00</span> <span class="Priceright">$1989.00</span> </div>
          </li>
          <li>
            <div class="tips">
              <div class="tipscolor"></div>
              New</div>
            <div class="image"><img alt="" src="/portals/35/home3conb_7.png" class="img-responsive" /></div>
            <h6 class="Model">A920T GSM 3G Mobile</h6>
            <p class="name">Amoi</p>
            <div class="line"></div>
            <div class="Price clearfix"> <span class="Priceleft">$1029.00</span> <span class="Priceright">$599.00</span> </div>
          </li>
          <li>
            <div class="tips">
              <div class="tipscolor"></div>
              Hot</div>
            <div class="image"><img alt="" src="/portals/35/home3conb_8.png" class="img-responsive" /></div>
            <h6 class="Model">iPhone 5s 16G Mobile</h6>
            <p class="name">Apple</p>
            <div class="line"></div>
            <div class="Price clearfix"> <span class="Priceleft">$5288.00</span> <span class="Priceright">$4688.00</span> </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Option:

  1. This is a Responsive Tab effect.You can modify Responsive Tab to change image effects. Responsive Tab
  2. img-responsive image responsive

Services area

Below is the screen shot:

Codes are as follows:

<div class="row">
  <div class="col-md-4">
    <div class="home3conc">
      <div class="home3conc_1">
        <h3 class="title"><span class="glyphicons glyph-chevron-right"></span>Services</h3>
        <p class="test">Mauris fermeum dictum magna. Sed loreet aliquam leote llus dor dapibus eget eleme tum vel curseifend elit. Aenean aucto. wisi et urna. Aliqat volutpat. Duisac turpis. Integer rutrumante eu lacuestibulm libero nisl porta vel sceleriue eget malesuadt nibh. </p>
        <ul class="list">
          <li><span class="glyphicons glyph-align-left"></span>DNN Skin Customization</li>
          <li><span class="glyphicons glyph-align-left"></span>Experienced developers and designers</li>
          <li><span class="glyphicons glyph-align-left"></span>Browser compatibility </li>
        </ul>
        <a class="link" href="#">Read More</a> </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="home3conc">
      <div class="home3conc_2">
        <h3 class="title"><span class="glyphicons glyph-chevron-right"></span>Features</h3>
        <p class="test">Mauris fermeum dictum magna. Sed loreet aliquam leote llus dor dapibus eget eleme tum vel curseifend elit. Aenean aucto. wisi et urna. Aliqat volutpat. Duisac turpis. Integer rutrumante eu lacuestibulm libero nisl porta vel sceleriue eget malesuadt nibh. </p>
        <ul class="list">
          <li><span class="glyphicons glyph-align-left"></span>Responsive Design</li>
          <li><span class="glyphicons glyph-align-left"></span>Compatible with laptops and mobile</li>
          <li><span class="glyphicons glyph-align-left"></span>Develop business solutions</li>
        </ul>
        <a class="link" href="#">Read More</a> </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="home3conc">
      <div class="home3conc_3">
        <h3 class="title"><span class="glyphicons glyph-chevron-right"></span>Products</h3>
        <p class="test">Mauris fermeum dictum magna. Sed loreet aliquam leote llus dor dapibus eget eleme tum vel curseifend elit. Aenean aucto. wisi et urna. Aliqat volutpat. Duisac turpis. Integer rutrumante eu lacuestibulm libero nisl porta vel sceleriue eget malesuadt nibh. </p>
        <ul class="list">
          <li><span class="glyphicons glyph-align-left"></span>Free supports and updates</li>
          <li><span class="glyphicons glyph-align-left"></span>Appealing skins and versatile modules</li>
          <li><span class="glyphicons glyph-align-left"></span>Frontend development technology</li>
        </ul>
        <a class="link" href="#">Read More</a> </div>
    </div>
  </div>
</div>

Option:

  1. col-md-4 is the width of each column, you can change the width you need through value 1~12.
  2. You can modify glyphicons to change icons. font icon list.

New Products area

Below is the screen shot:

Codes are as follows:

<div class="home3cond">
  <div class="dnn_layout">
    <div class="content_mid clearfix">
      <div class="pane_layout">
        <h3 class="title">New Products</h3>
        <div class="line"></div>
        <div data-autoheight="false" data-pagination="false" class="carousel carousel_10">
          <div class="item">
            <div class="flip_box flip_box_6">
              <div class="rotate">
                <div class="front"> <img alt="" class="img-responsive" src="/portals/35/home3cond_1.jpg" />
                  <div class="bottom">
                    <h3>CDMA2000/GSM Mobile</h3>
                    <h4>Coolpad</h4>
                    <div class="Price clearfix">
                      <div class="Priceleft"><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-dislikes"></span></div>
                      <div class="Priceright">$1989.00</div>
                    </div>
                  </div>
                </div>
                <div class="back">
                  <h3>CDMA2000/GSM Mobile</h3>
                  <h4>Coolpad</h4>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit nisl a ullamcor per pretium. </p>
                  <a href="#" class="but">More Details ></a> </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="flip_box flip_box_6">
              <div class="rotate">
                <div class="front"> <img alt="" class="img-responsive" src="/portals/35/home3cond_2.jpg" />
                  <div class="bottom">
                    <h3>ipad Mini 32G Tablet</h3>
                    <h4>Apple</h4>
                    <div class="Price clearfix">
                      <div class="Priceleft"><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-dislikes"></span></div>
                      <div class="Priceright">$3299.00</div>
                    </div>
                  </div>
                </div>
                <div class="back">
                  <h3>ipad Mini 32G Tablet</h3>
                  <h4>Apple</h4>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit nisl a ullamcor per pretium. </p>
                  <a href="#" class="but">More Details ></a> </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="flip_box flip_box_6">
              <div class="rotate">
                <div class="front"> <img alt="" class="img-responsive" src="/portals/35/home3cond_3.jpg" />
                  <div class="bottom">
                    <h3>Trend3 G3502C Mobile</h3>
                    <h4>Samsumg</h4>
                    <div class="Price clearfix">
                      <div class="Priceleft"><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-dislikes"></span></div>
                      <div class="Priceright">$2469.00</div>
                    </div>
                  </div>
                </div>
                <div class="back">
                  <h3>Trend3 G3502C Mobile</h3>
                  <h4>Samsumg</h4>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit nisl a ullamcor per pretium. </p>
                  <a href="#" class="but">More Details ></a> </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="flip_box flip_box_6">
              <div class="rotate">
                <div class="front"> <img alt="" class="img-responsive" src="/portals/35/home3cond_4.jpg" />
                  <div class="bottom">
                    <h3>Desire 516t 3G Mobile</h3>
                    <h4>ZhongXIn</h4>
                    <div class="Price clearfix">
                      <div class="Priceleft"><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-dislikes"></span></div>
                      <div class="Priceright">$899.00</div>
                    </div>
                  </div>
                </div>
                <div class="back">
                  <h3>Desire 516t 3G Mobile</h3>
                  <h4>ZhongXIn</h4>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit nisl a ullamcor per pretium. </p>
                  <a href="#" class="but">More Details ></a> </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="flip_box flip_box_6">
              <div class="rotate">
                <div class="front"> <img alt="" class="img-responsive" src="/portals/35/home3cond_1.jpg" />
                  <div class="bottom">
                    <h3>CDMA2000/GSM Mobile</h3>
                    <h4>Coolpad</h4>
                    <div class="Price clearfix">
                      <div class="Priceleft"><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-dislikes"></span></div>
                      <div class="Priceright">$1989.00</div>
                    </div>
                  </div>
                </div>
                <div class="back">
                  <h3>CDMA2000/GSM Mobile</h3>
                  <h4>Coolpad</h4>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit nisl a ullamcor per pretium. </p>
                  <a href="#" class="but">More Details ></a> </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="flip_box flip_box_6">
              <div class="rotate">
                <div class="front"> <img alt="" class="img-responsive" src="/portals/35/home3cond_2.jpg" />
                  <div class="bottom">
                    <h3>ipad Mini 32G Tablet</h3>
                    <h4>Apple</h4>
                    <div class="Price clearfix">
                      <div class="Priceleft"><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-dislikes"></span></div>
                      <div class="Priceright">$3299.00</div>
                    </div>
                  </div>
                </div>
                <div class="back">
                  <h3>ipad Mini 32G Tablet</h3>
                  <h4>Apple</h4>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit nisl a ullamcor per pretium. </p>
                  <a href="#" class="but">More Details ></a> </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="flip_box flip_box_6">
              <div class="rotate">
                <div class="front"> <img alt="" class="img-responsive" src="/portals/35/home3cond_3.jpg" />
                  <div class="bottom">
                    <h3>Trend3 G3502C Mobile</h3>
                    <h4>Samsumg</h4>
                    <div class="Price clearfix">
                      <div class="Priceleft"><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-dislikes"></span></div>
                      <div class="Priceright">$2469.00</div>
                    </div>
                  </div>
                </div>
                <div class="back">
                  <h3>Trend3 G3502C Mobile</h3>
                  <h4>Samsumg</h4>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit nisl a ullamcor per pretium. </p>
                  <a href="#" class="but">More Details ></a> </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="flip_box flip_box_6">
              <div class="rotate">
                <div class="front"> <img alt="" class="img-responsive" src="/portals/35/home3cond_4.jpg" />
                  <div class="bottom">
                    <h3>Desire 516t 3G Mobile</h3>
                    <h4>ZhongXIn</h4>
                    <div class="Price clearfix">
                      <div class="Priceleft"><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-star"></span><span class="glyphicons glyph-dislikes"></span></div>
                      <div class="Priceright">$899.00</div>
                    </div>
                  </div>
                </div>
                <div class="back">
                  <h3>Desire 516t 3G Mobile</h3>
                  <h4>ZhongXIn</h4>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit nisl a ullamcor per pretium. </p>
                  <a href="#" class="but">More Details ></a> </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Option:

  1. This is a Carousel effect.You can modify Carousel to change image effects. Carousel
  2. You can modify glyphicons to change icons. font icon list.

Subscribe area

Below is the screen shot:

Codes are as follows:

<div class="home3bottoma"> <span class="glyphicons glyph-envelope"></span> </div>
<div class="home3bottomb clearfix">
  <input type="text" placeholder="Enter your Email...." class="home3bottomb_left" />
  <a class="home3bottomb_right" href="#">Subscribe</a> </div>

Option:

  1. You can modify glyphicons to change icons. font icon list.

Recent News area

Below is the screen shot:

Codes are as follows:

<div class="home3bottomc"> <span class="glyphicons glyph-suitcase"></span>
  <h3>Modules Development</h3>
  <p>Phasellus enim libero, blandit vel Quisque euismod lobortis aliquam. Aliquam in tortor enim.</p>
  <span class="date">February 16th,2014</span> </div>

Option:

  1. Container is using Container-20064-4
  2. You can modify glyphicons to change icons. font icon list.

Get In Touch area

Below is the screen shot:

Codes are as follows:

<div  id="gmap01"></div>
<ul class="about_list">
  <li><span class="glyphicons glyph-google-maps"></span>Address :  XinAn Street No.287</li>
  <li><span class="glyphicons glyph-earphone"></span>Phone :     (+086) - 123 -4567</li>
  <li><span class="glyphicons glyph-envelope"></span>Email :      dnnskindev@gmail.com</li>
</ul>

Option:

  1. Container is using Container-20064-4
  2. You can modify glyphicons to change icons. font icon list.

Email Us area

Below is the screen shot:

Option:

  1. Container is using Container-20064-4
  2. This is Theme_Responsive_20064_home3 theme of DNNGo PowerForms module
Home Version 4

You can click the link to check Home Version 4 demo. Home Version 4

Banner area

Below is the screen shot:

It is using DNNGo DNNGalleryPro module here.

Icons area

Below is the screen shot:

Codes are as follows:

<div class="home4_serve pt40">
  <div class="row">
    <div class="col-sm-4 animation periodic1 animated">
      <div class="icon"><span class="glyphicons glyph-leaf"></span></div>
      <h4>Web Design</h4>
      <div class="line"></div>
      <p>Sed non neque elit. Sed ut imperdiet nisi. Proin condime ntum fermentum nunc. Etiam pharetra, erat sed ferm entum feugiat, velit mauris egestas massa nisl neque. Sednon neque elit.</p>
      <a href="#" class="Button_default">Read More</a> </div>
    <div class="col-sm-4 animation periodic2 animated">
      <div class="icon"><span class="glyphicons glyph-imac"></span></div>
      <h4>Responsive</h4>
      <div class="line"></div>
      <p>Sed non neque elit. Sed ut imperdiet nisi. Proin condime ntum fermentum nunc. Etiam pharetra, erat sed ferm entum feugiat, velit mauris egestas massa nisl neque. Sednon neque elit.</p>
      <a href="#" class="Button_default">Read More</a> </div>
    <div class="col-sm-4 animation periodic3 animated">
      <div class="icon"><span class="glyphicons glyph-embed-close"></span></div>
      <h4>Javascript</h4>
      <div class="line"></div>
      <p>Sed non neque elit. Sed ut imperdiet nisi. Proin condime ntum fermentum nunc. Etiam pharetra, erat sed ferm entum feugiat, velit mauris egestas massa nisl neque. Sednon neque elit.</p>
      <a href="#" class="Button_default">Read More</a> </div>
  </div>
</div>

Option:

  1. You can modify animation to change the animation on the slide. Animation list.
  2. col-md-4 is the width of each column, you can change the width you need through value 1~12.
  3. You can modify glyphicons to change icons. font icon list.

Recent Photos area

Below is the screen shot:

Codes are as follows:

<div class="isotope_grid home4_isotope animation scaleUp">
  <div class="isotope_group"> <a class="active" href="#" data-filter="*">All</a> <a href="#" data-filter=".blogs">Blogs</a> <a href="#" data-filter=".webdesign">Web Design</a> <a href="#" data-filter=".graphics">Graphics</a> </div>
  <div class="loading">
    <div class="loading-container container1">
      <div class="circle1"></div>
      <div class="circle2"></div>
      <div class="circle3"></div>
      <div class="circle4"></div>
    </div>
    <div class="loading-container container2">
      <div class="circle1"></div>
      <div class="circle2"></div>
      <div class="circle3"></div>
      <div class="circle4"></div>
    </div>
    <div class="loading-container container3">
      <div class="circle1"></div>
      <div class="circle2"></div>
      <div class="circle3"></div>
      <div class="circle4"></div>
    </div>
  </div>
  <div class="isotope_main" data-min-width="268">
    <div class="isotope_item graphics" data-zoom="2">
      <div class="photo_box">
        <div class="pic_box"> <img alt="" src="/portals/35/home4_pic_1.jpg" />
          <div class="ico"> <a href="#" class="iLightBox_image_gallery1"><span class="glyphicons glyph-search"></span></a> </div>
          <div class="shade"></div>
        </div>
      </div>
    </div>
    <div class="isotope_item blogs">
      <div class="photo_box">
        <div class="pic_box"> <img alt="" src="/portals/35/home4_pic_2.jpg" />
          <div class="ico"> <a href="#" class="iLightBox_image_gallery1"><span class="glyphicons glyph-search"></span></a> </div>
          <div class="shade"></div>
        </div>
      </div>
    </div>
    <div class="isotope_item blogs webdesign">
      <div class="photo_box">
        <div class="pic_box"> <img alt="" src="/portals/35/home4_pic_3.jpg" />
          <div class="ico"> <a href="#" class="iLightBox_image_gallery1"><span class="glyphicons glyph-search"></span></a> </div>
          <div class="shade"></div>
        </div>
      </div>
    </div>
    <div class="isotope_item blogs graphics" data-zoom="2">
      <div class="photo_box">
        <div class="pic_box"> <img alt="" src="/portals/35/home4_pic_6.jpg" />
          <div class="ico"> <a href="#" class="iLightBox_image_gallery1"><span class="glyphicons glyph-search"></span></a> </div>
          <div class="shade"></div>
        </div>
      </div>
    </div>
    <div class="isotope_item webdesign">
      <div class="photo_box">
        <div class="pic_box"> <img alt="" src="/portals/35/home4_pic_4.jpg" />
          <div class="ico"> <a href="#" class="iLightBox_image_gallery1"><span class="glyphicons glyph-search"></span></a> </div>
          <div class="shade"></div>
        </div>
      </div>
    </div>
    <div class="isotope_item webdesign graphics">
      <div class="photo_box">
        <div class="pic_box"> <img alt="" src="/portals/35/home4_pic_5.jpg" />
          <div class="ico"> <a href="#" class="iLightBox_image_gallery1"><span class="glyphicons glyph-search"></span></a> </div>
          <div class="shade"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Option:

  1. You can modify animation to change the animation on the slide. Animation list.
  2. You can modify photo_box to change image effects. Image Effects
  3. You can add <a data-filter=".FilterName" href="#">Filter Name</a> to increase categories. data-filter=".FilterName" can not be blank space.
  4. You can modify data-min-width to change minimum width of image.
  5. You can modify isotope_item FilterName to categorize images.
  6. You can modify glyphicons to change icons. font icon list.

Carousel area

Below is the screen shot:

Codes are as follows:

<div class="home2_conbg_2 pb40 pt40">
  <div class="dnn_layout">
    <div data-autoplay="5000" data-autoheight="false" data-pagination="false" class="carousel carousel_11 animation scaleUp">
      <div class="item"> <img alt="" src="/portals/35/home4_pic_7.png" /> </div>
      <div class="item"> <img alt="" src="/portals/35/home4_pic_8.png" /> </div>
      <div class="item"> <img alt="" src="/portals/35/home4_pic_9.png" /> </div>
      <div class="item"> <img alt="" src="/portals/35/home4_pic_10.png" /> </div>
      <div class="item"> <img alt="" src="/portals/35/home4_pic_11.png" /> </div>
      <div class="item"> <img alt="" src="/portals/35/home4_pic_7.png" /> </div>
      <div class="item"> <img alt="" src="/portals/35/home4_pic_8.png" /> </div>
    </div>
  </div>
</div>

Option:

  1. You can modify animation to change the animation on the slide. Animation list.
  2. This is a Carousel effect.You can modify Carousel to change image effects. Carousel

Features area

Below is the screen shot:

Codes are as follows:

<div class="verticalTab_Left verticalTab_Left_2 animation scaleUp">
  <ul class="resp-tabs-list">
    <li><span class="glyphicons glyph-sort"></span><span>What We Have</span></li>
    <li><span class="glyphicons glyph-cogwheels"></span><span>What We Do</span></li>
    <li><span class="glyphicons glyph-magic"></span><span>Why Choose Us</span></li>
  </ul>
  <div class="resp-tabs-container">
    <div class="resp_container">
      <div class="resp_margin">
        <p class="home4Tab_first_p">Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna et. Quisque euismod orci ut et lobortis aliquam. Aliquam intor tor enim luctus et ultrices posuere cubilia. Ipsum dolor sit amet, consectetur adipisicing elit. temporibus sequi magni odit repellat iure accus ullam dictum felis eu pede set repellat iure accusNullam dictum felis eu pede set.</p>
        <div class="row">
          <div class="col-sm-4">
            <ul>
              <li><span class="glyphicons glyph-embed-close"></span>Full Support</li>
              <li><span class="glyphicons glyph-embed-close"></span>Modules Development</li>
              <li><span class="glyphicons glyph-embed-close"></span>Icon Manager</li>
              <li><span class="glyphicons glyph-embed-close"></span>Responsive Web</li>
              <li><span class="glyphicons glyph-embed-close"></span>Many Different Homepage</li>
              <li><span class="glyphicons glyph-embed-close"></span>New Header Styles</li>
              <li><span class="glyphicons glyph-embed-close"></span>Browser Compatibility</li>
              <li><span class="glyphicons glyph-embed-close"></span>Unlimited Colors</li>
            </ul>
          </div>
          <div class="col-sm-4">
            <ul>
              <li><span class="glyphicons glyph-show-big-thumbnails"></span>Full Support</li>
              <li><span class="glyphicons glyph-show-big-thumbnails"></span>Modules Development</li>
              <li><span class="glyphicons glyph-show-big-thumbnails"></span>Icon Manager</li>
              <li><span class="glyphicons glyph-show-big-thumbnails"></span>Responsive Web</li>
              <li><span class="glyphicons glyph-show-big-thumbnails"></span>Many Different Homepage</li>
              <li><span class="glyphicons glyph-show-big-thumbnails"></span>New Header Styles</li>
              <li><span class="glyphicons glyph-show-big-thumbnails"></span>Browser Compatibility</li>
              <li><span class="glyphicons glyph-show-big-thumbnails"></span>Unlimited Colors</li>
            </ul>
          </div>
          <div class="col-sm-4">
            <ul>
              <li><span class="glyphicons glyph-flash"></span>Full Support</li>
              <li><span class="glyphicons glyph-flash"></span>Modules Development</li>
              <li><span class="glyphicons glyph-flash"></span>Icon Manager</li>
              <li><span class="glyphicons glyph-flash"></span>Responsive Web</li>
              <li><span class="glyphicons glyph-flash"></span>Many Different Homepage</li>
              <li><span class="glyphicons glyph-flash"></span>New Header Styles</li>
              <li><span class="glyphicons glyph-flash"></span>Browser Compatibility</li>
              <li><span class="glyphicons glyph-flash"></span>Unlimited Colors</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="resp_container">
      <div class="resp_margin">
        <div class="row">
          <div class="col-sm-4">
            <h5 class="home4Tab_title1"><span>1</span>Clean Design</h5>
            <p class="pb40">Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commod us, nisi erat porttitor ligula, eget lacinia odio sem nec elit. </p>
          </div>
          <div class="col-sm-4">
            <h5 class="home4Tab_title1"><span>2</span>Responsive</h5>
            <p class="pb40">Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commod us, nisi erat porttitor ligula, eget lacinia odio sem nec elit. </p>
          </div>
          <div class="col-sm-4">
            <h5 class="home4Tab_title1"><span>3</span>SEO Friendly</h5>
            <p class="pb40">Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commod us, nisi erat porttitor ligula, eget lacinia odio sem nec elit. </p>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-4">
            <h5 class="home4Tab_title1"><span>4</span>Full Support</h5>
            <p class="pb40">Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commod us, nisi erat porttitor ligula, eget lacinia odio sem nec elit. </p>
          </div>
          <div class="col-sm-4">
            <h5 class="home4Tab_title1"><span>5</span>Two Layout</h5>
            <p class="pb40">Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commod us, nisi erat porttitor ligula, eget lacinia odio sem nec elit. </p>
          </div>
          <div class="col-sm-4">
            <h5 class="home4Tab_title1"><span>6</span>400+ Font Icons</h5>
            <p class="pb40">Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commod us, nisi erat porttitor ligula, eget lacinia odio sem nec elit. </p>
          </div>
        </div>
      </div>
    </div>
    <div class="resp_container">
      <div class="resp_margin">
        <p class="home4Tab_first_p">Maecenas eu metus vel leo placerat cursus. Curabitur quis rhoncus tellus, quis lorem ipsum tooltip luctus ligula. Curabitur laoreet frin gilla lorem ipsum porta lorem ipsum. Glavrida dolor ipsum dolor sit amet, consectetur adipiscing elit metus vel leo placerat cursus. Cond sectetur adipiscing elit metus vel leo placerat cursus.</p>
        <div class="clearfix">
          <div class="home4Tab_web"> <img alt="" src="/portals/35/home4_pic_12.png" />
            <h6>Chrome</h6>
          </div>
          <div class="home4Tab_web"> <img alt="" src="/portals/35/home4_pic_13.png" />
            <h6>Firefox</h6>
          </div>
          <div class="home4Tab_web"> <img alt="" src="/portals/35/home4_pic_14.png" />
            <h6>Safari</h6>
          </div>
          <div class="home4Tab_web"> <img alt="" src="/portals/35/home4_pic_15.png" />
            <h6>IE</h6>
          </div>
          <div class="home4Tab_web"> <img alt="" src="/portals/35/home4_pic_16.png" />
            <h6>Netscape</h6>
          </div>
          <div class="home4Tab_web"> <img alt="" src="/portals/35/home4_pic_17.png" />
            <h6>Opera</h6>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Option:

  1. You can modify animation to change the animation on the slide. Animation list.
  2. You can modify glyphicons to change icons. font icon list.
  3. col-md-4 is the width of each column, you can change the width you need through value 1~12.
  4. This is a Responsive Tab effect.You can modify Responsive Tab to change image effects. Responsive Tab

Line area

Below is the screen shot:

Codes are as follows:

<div class="home4_line_bg mt40 mb40"></div>

Images area

Below is the screen shot:

Codes are as follows:

<div class="home4_three_img">
  <div class="home4_top_img animation fadeInUp"> <img alt="" src="/portals/35/home4_pic_18.png" class="img-responsive" /> </div>
  <div class="home4_left_img animation fadeInLeft"> <img alt="" src="/portals/35/home4_pic_19.png" class="img-responsive" /> </div>
  <div class="home4_right_img animation fadeInRight"> <img alt="" src="/portals/35/home4_pic_20.png" class="img-responsive" /> </div>
</div>

Option:

  1. You can modify animation to change the animation on the slide. Animation list.

What Others Say About Us area

Below is the screen shot:

Codes are as follows:

<div class="SectionStyles5">
  <div class="SectionStyles5_bg">
    <div class="dnn_layout pt40 pb40">
      <div class="content_mid clearfix">
        <div class="home4_title">
          <h4>What Others Say About Us</h4>
          <div class="line"></div>
        </div>
        <div class="carousel carousel_9 animation scaleUp" data-navigation="false" data-autoheight="false" data-autoplay="false">
          <div class="item">
            <ul class="Testimonials_tab Testimonials_8" data-autoplay="0" data-display-arrows="false" data-position="fade" data-display-navigation="false">
              <li>
                <blockquote>
                  <p>" You guys do a fantastic job.  The skin looks exactly as we expected.  We have now done several skins and even skins that were done 6 months ago, you guys have been great in making the minor changes we request.  "</p>
                  <small><img alt="" src="/portals/35/home4_pic_21.png" /><span>Harralloy Chris</span>Dnngo Buyer</small> </blockquote>
              </li>
            </ul>
          </div>
          <div class="item">
            <ul class="Testimonials_tab Testimonials_8" data-autoplay="0" data-display-arrows="false" data-position="fade" data-display-navigation="false">
              <li>
                <blockquote>
                  <p>" You guys do a fantastic job.  The skin looks exactly as we expected.  We have now done several skins and even skins that were done 6 months ago, you guys have been great in making the minor changes we request.  "</p>
                  <small><img alt="" src="/portals/35/home4_pic_22.png" /><span>John Smith</span>Dnngo Buyer</small> </blockquote>
              </li>
            </ul>
          </div>
          <div class="item">
            <ul class="Testimonials_tab Testimonials_8" data-autoplay="0" data-display-arrows="false" data-position="fade" data-display-navigation="false">
              <li>
                <blockquote>
                  <p>" You guys do a fantastic job.  The skin looks exactly as we expected.  We have now done several skins and even skins that were done 6 months ago, you guys have been great in making the minor changes we request.  "</p>
                  <small><img alt="" src="/portals/35/home4_pic_23.png" /><span>Andrea Arkov</span>Dnngo Buyer</small> </blockquote>
              </li>
            </ul>
          </div>
          <div class="item">
            <ul class="Testimonials_tab Testimonials_8" data-autoplay="0" data-display-arrows="false" data-position="fade" data-display-navigation="false">
              <li>
                <blockquote>
                  <p>" You guys do a fantastic job.  The skin looks exactly as we expected.  We have now done several skins and even skins that were done 6 months ago, you guys have been great in making the minor changes we request.  "</p>
                  <small><img alt="" src="/portals/35/Pic_14.jpg" /><span>Andrea Arkov</span>Dnngo Buyer</small> </blockquote>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Option:

  1. This is a SectionStyles effect.
  2. You can modify animation to change the animation on the slide. Animation list.
  3. This is a Carousel effect. Carousel

Our Skills area

Below is the screen shot:

Codes are as follows:

<div class="home4_chart">
  <div class="text-center">
    <p>Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna et. Quisque euismod orci ut et lobortis aliquam.</p>
    <p>Aliquam in tortor enim luctus et ultrices posuere cubilia.</p>
  </div>
  <div class="chart_list row">
    <div class="col-md-3 col-sm-6 animation fadeInUp delay1">
      <div data-percent="41" class="percentage">
        <div class="percentage_inner"><span>0</span>%
          <p>Web Design</p>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6 animation fadeInUp delay2">
      <div data-percent="76" class="percentage">
        <div class="percentage_inner"><span>0</span>%
          <p>HTML5 & CSS3</p>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6 animation fadeInUp delay3">
      <div data-percent="63" class="percentage">
        <div class="percentage_inner"><span>0</span>%
          <p>JQuery</p>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6 animation fadeInUp delay4">
      <div data-percent="24" class="percentage">
        <div class="percentage_inner"><span>0</span>%
          <p>DNN</p>
        </div>
      </div>
    </div>
  </div>
</div>

Option:

  1. col-md-3 col-sm-6 is the width of each column, you can change the width you need through value 1~12.
  2. You can modify animation to change the animation on the slide. Animation list.
  3. data-percent is for controlling the percentage that displays, you can display percentage through value 0~100
  4. This is a progressbarscounters effect. Carousel

Map area

Below is the screen shot:

Codes are as follows:

<div  id="gmap01"></div>

SERVICE & LINKS area

Below is the screen shot:

Codes are as follows:

<div class="home4_foot animation fadeInUp">
  <div class="row">
    <div class="col-sm-4 col-xs-6">
      <ul>
        <li><span class="glyphicons glyph-chevron-right"></span>Help & Contact</li>
        <li><span class="glyphicons glyph-chevron-right"></span>Shipping & tax</li>
        <li><span class="glyphicons glyph-chevron-right"></span>Return policy</li>
        <li><span class="glyphicons glyph-chevron-right"></span>Careers</li>
        <li><span class="glyphicons glyph-chevron-right"></span>Affiliates</li>
        <li><span class="glyphicons glyph-chevron-right"></span>Legal Notice</li>
      </ul>
    </div>
    <div class="col-sm-4 col-xs-6">
      <ul>
        <li><span class="glyphicons glyph-chevron-right"></span>New products</li>
        <li><span class="glyphicons glyph-chevron-right"></span>Top sellers</li>
        <li><span class="glyphicons glyph-chevron-right"></span>Special products</li>
        <li><span class="glyphicons glyph-chevron-right"></span>Manufacurers</li>
        <li><span class="glyphicons glyph-chevron-right"></span>Suppliers</li>
        <li><span class="glyphicons glyph-chevron-right"></span>Our Store</li>
      </ul>
    </div>
    <div class="col-sm-4 col-xs-6">
      <ul>
        <li><span class="glyphicons glyph-chevron-right"></span>My account</li>
        <li><span class="glyphicons glyph-chevron-right"></span>Personal Center</li>
        <li><span class="glyphicons glyph-chevron-right"></span>Address</li>
        <li><span class="glyphicons glyph-chevron-right"></span>Discount</li>
        <li><span class="glyphicons glyph-chevron-right"></span>Order history</li>
        <li><span class="glyphicons glyph-chevron-right"></span>Your vouchers</li>
      </ul>
    </div>
  </div>
</div>

Option:

  1. Container is using Container-20064-5
  2. You can modify animation to change the animation on the slide. Animation list.
  3. col-md-3 col-sm-6 is the width of each column, you can change the width you need through value 1~12.
  4. You can modify glyphicons to change icons. font icon list.

GET IN TOUCH area

Below is the screen shot:

Codes are as follows:

<div class="home4_foot animation fadeInUp">
  <p class="home4_foot_padding">Feel free to consult us before you purchase any product from us. If you have any question in using our products, please e-mail us without hesitation.</p>
  <div class="row">
    <div class="col-sm-6 clearfix">
      <div class="home4_info_left">
        <p>Phone :</p>
        <p>Email :</p>
        <p>MSN :</p>
        <p>Skype :</p>
      </div>
      <div class="home4_info_right">
        <p>(+086) - 123 -456</p>
        <p>dnnskindev@gmail.com</p>
        <p>dnnskindev@gmail.com</p>
        <p>dnngo-linda</p>
      </div>
    </div>
    <div class="col-sm-6">
      <p>Address : XingAn Street No.287</p>
      <p>Website : www.dnngo.net</p>
      <p>Contact :  Linda</p>
    </div>
  </div>
</div>

Option:

  1. Container is using Container-20064-5
  2. You can modify animation to change the animation on the slide. Animation list.
  3. col-sm-6 is the width of each column, you can change the width you need through value 1~12.
HomeVersion5

You can click the link to check HomeVersion5 demo. HomeVersion5

Welcome to here area

Below is the screen shot:

Codes are as follows:

<ul class="full_screen_pic">
  <li style="background-image: url('/Portals/35/home5_banner.jpg');">
    <div class="content">
      <div class="animation_1"><img alt="" src="/portals/35/home5_banner1.png" /></div>
      <div class="title animation_2">Welcome to here</div>
      <div id="nextPage"></div>
      <div class="banner_socials animation_3"><a href="#"><img alt="" src="/portals/35/home5_banner_social1.png" /></a><a href="#"><img alt="" src="/portals/35/home5_banner_social2.png" /></a><a href="#"><img alt="" src="/portals/35/home5_banner_social3.png" /></a><a href="#"><img alt="" src="/portals/35/home5_banner_social4.png" /></a><a href="#"><img alt="" src="/portals/35/home5_banner_social5.png" /></a></div>
    </div>
  </li>
</ul>

Horizontal tab area

Below is the screen shot:

Codes are as follows:

<div class="horizontalTab_Top horizontalTab_Top_6 animation scaleUp">
  <ul class="resp-tabs-list">
    <li class="home5Tab_color1"><span class="glyphicons glyph-adjust"></span><span>About</span></li>
    <li class="home5Tab_color2"><span class="glyphicons glyph-power"></span><span>Services</span></li>
    <li class="home5Tab_color3"><span class="glyphicons glyph-compass"></span><span>Features</span></li>
    <li class="home5Tab_color4"><span class="glyphicons glyph-clock"></span><span>Products</span></li>
  </ul>
  <div class="resp-tabs-container">
    <div class="resp_container">
      <div class="resp_margin">
        <div class="home5Tab1">
          <div class="row">
            <div class="col-sm-4 clearfix">
              <div class="home5Tab1_left">
                <div class="home5Tab_icon1"><span class="glyphicons glyph-tint"></span></div>
              </div>
              <div class="home5Tab1_right">
                <h5>Full Support</h5>
                <p>Donec consectetur diam ac nibhauct  ultricies. Integer mauris lacus, consed atin luctu semper sed felis.</p>
                <a target="blank" href="http://store.dnnsoftware.com/home/product-details/packageid/34330/r/7ab93d48c5e846d6b199">Read More  ></a> </div>
            </div>
            <div class="col-sm-4 clearfix">
              <div class="home5Tab1_left">
                <div class="home5Tab_icon1"><span class="glyphicons glyph-keys"></span></div>
              </div>
              <div class="home5Tab1_right">
                <h5>DNN Modules</h5>
                <p>Donec consectetur diam ac nibhauct  ultricies. Integer mauris lacus, consed atin luctu semper sed felis.</p>
                <a target="blank" href="http://store.dnnsoftware.com/home/product-details/packageid/34330/r/7ab93d48c5e846d6b199">Read More  ></a> </div>
            </div>
            <div class="col-sm-4 clearfix">
              <div class="home5Tab1_left">
                <div class="home5Tab_icon1"><span class="glyphicons glyph-cogwheels"></span></div>
              </div>
              <div class="home5Tab1_right">
                <h5>Customized Settings</h5>
                <p>Donec consectetur diam ac nibhauct  ultricies. Integer mauris lacus, consed atin luctu semper sed felis.</p>
                <a target="blank" href="http://store.dnnsoftware.com/home/product-details/packageid/34330/r/7ab93d48c5e846d6b199">Read More  ></a> </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-4 clearfix">
              <div class="home5Tab1_left">
                <div class="home5Tab_icon1"><span class="glyphicons glyph-conversation"></span></div>
              </div>
              <div class="home5Tab1_right">
                <h5>Make Comments</h5>
                <p>Donec consectetur diam ac nibhauct  ultricies. Integer mauris lacus, consed atin luctu semper sed felis.</p>
                <a target="blank" href="http://store.dnnsoftware.com/home/product-details/packageid/34330/r/7ab93d48c5e846d6b199">Read More  ></a> </div>
            </div>
            <div class="col-sm-4 clearfix">
              <div class="home5Tab1_left">
                <div class="home5Tab_icon1"><span class="glyphicons glyph-briefcase"></span></div>
              </div>
              <div class="home5Tab1_right">
                <h5>Web Design</h5>
                <p>Donec consectetur diam ac nibhauct  ultricies. Integer mauris lacus, consed atin luctu semper sed felis.</p>
                <a target="blank" href="http://store.dnnsoftware.com/home/product-details/packageid/34330/r/7ab93d48c5e846d6b199">Read More  ></a> </div>
            </div>
            <div class="col-sm-4 clearfix">
              <div class="home5Tab1_left">
                <div class="home5Tab_icon1"><span class="glyphicons glyph-drink"></span></div>
              </div>
              <div class="home5Tab1_right">
                <h5>Unlimited Colors</h5>
                <p>Donec consectetur diam ac nibhauct  ultricies. Integer mauris lacus, consed atin luctu semper sed felis.</p>
                <a target="blank" href="http://store.dnnsoftware.com/home/product-details/packageid/34330/r/7ab93d48c5e846d6b199">Read More  ></a> </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="resp_container">
      <div class="resp_margin">
        <div class="home5Tab2 text-center">
          <div class="home5Tab_head">
            <h4>Customized Temlpate And Services</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec eros eget nisl fringilla comm odo. Maecenas ornare, augue ut ultricies tristique, enim lectus pretium quam, quis bibendum metus tellus sedeu dolor lacuseu sapien eros enatis at dapibus.</p>
          </div>
          <div class="home5Tab2_chart row">
            <div class="col-lg-2 col-sm-4 col-xs-6">
              <div data-percent="65" class="percentage2">
                <div class="percentage_inner"><span>0</span>%</div>
              </div>
              <h6>Dnn Skin</h6>
            </div>
            <div class="col-lg-2 col-sm-4 col-xs-6">
              <div data-percent="97" class="percentage2">
                <div class="percentage_inner"><span>0</span>%</div>
              </div>
              <h6>Dnn Module</h6>
            </div>
            <div class="col-lg-2 col-sm-4 col-xs-6">
              <div data-percent="48" class="percentage2">
                <div class="percentage_inner"><span>0</span>%</div>
              </div>
              <h6>Template</h6>
            </div>
            <div class="col-lg-2 col-sm-4 col-xs-6">
              <div data-percent="80" class="percentage2">
                <div class="percentage_inner"><span>0</span>%</div>
              </div>
              <h6>Skin Pack</h6>
            </div>
            <div class="col-lg-2 col-sm-4 col-xs-6">
              <div data-percent="75" class="percentage2">
                <div class="percentage_inner"><span>0</span>%</div>
              </div>
              <h6>Dnn Store</h6>
            </div>
            <div class="col-lg-2 col-sm-4 col-xs-6">
              <div data-percent="62" class="percentage2">
                <div class="percentage_inner"><span>0</span>%</div>
              </div>
              <h6>Photoshop</h6>
            </div>
          </div>
          <p><a target="blank" href="http://store.dnnsoftware.com/home/product-details/packageid/34330/r/7ab93d48c5e846d6b199" class="home5Tab2_btn">Custom It</a><a target="blank" href="http://store.dnnsoftware.com/home/product-details/packageid/34330/r/7ab93d48c5e846d6b199" class="home5Tab2_btn">View Details</a></p>
        </div>
      </div>
    </div>
    <div class="resp_container">
      <div class="resp_margin">
        <div class="home5Tab3 text-center">
          <div class="home5Tab_head">
            <h4>Founctional & Countless Features</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec eros eget nisl fringilla comm odo. Maecenas ornare, augue ut ultricies tristique, enim lectus pretium quam, quis bibendum metus tellus sedeu dolor lacuseu sapien eros enatis at dapibus.</p>
          </div>
          <div class="row">
            <div class="col-sm-3">
              <div class="home5Tab_icon2"><span class="glyphicons glyph-display"></span></div>
              <h5>Clean Design</h5>
              <p>Donec consectetur diam ac nibhauct  ultricies. Integer mauris lacus, consed atin luctu semper.</p>
              <a target="blank" href="http://store.dnnsoftware.com/home/product-details/packageid/34330/r/7ab93d48c5e846d6b199">Read More  ></a> </div>
            <div class="col-sm-3">
              <div class="home5Tab_icon2"><span class="glyphicons glyph-resize-full"></span></div>
              <h5>Responsive</h5>
              <p>Donec consectetur diam ac nibhauct  ultricies. Integer mauris lacus, consed atin luctu semper.</p>
              <a target="blank" href="http://store.dnnsoftware.com/home/product-details/packageid/34330/r/7ab93d48c5e846d6b199">Read More  ></a> </div>
            <div class="col-sm-3">
              <div class="home5Tab_icon2"><span class="glyphicons glyph-camera"></span></div>
              <h5>Photo Gallery</h5>
              <p>Donec consectetur diam ac nibhauct  ultricies. Integer mauris lacus, consed atin luctu semper.</p>
              <a target="blank" href="http://store.dnnsoftware.com/home/product-details/packageid/34330/r/7ab93d48c5e846d6b199">Read More  ></a> </div>
            <div class="col-sm-3">
              <div class="home5Tab_icon2"><span class="glyphicons glyph-pie-chart"></span></div>
              <h5>Clean Design</h5>
              <p>Donec consectetur diam ac nibhauct  ultricies. Integer mauris lacus, consed atin luctu semper.</p>
              <a target="blank" href="http://store.dnnsoftware.com/home/product-details/packageid/34330/r/7ab93d48c5e846d6b199">Read More  ></a> </div>
          </div>
        </div>
      </div>
    </div>
    <div class="resp_container">
      <div class="resp_margin">
        <div class="home5Tab4">
          <div class="row">
            <div class="col-sm-7">
              <div class="home5Tab_head">
                <h4>Functional and powerful skin</h4>
              </div>
              <div class="home5Tab4_left clearfix"><span>1</span>
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusan tium dolore mque laudan tium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi.</p>
              </div>
              <div class="home5Tab4_left clearfix"><span>2</span>
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusan tium dolore mque laudan tium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi.</p>
              </div>
              <p><a target="blank" href="http://store.dnnsoftware.com/home/product-details/packageid/34330/r/7ab93d48c5e846d6b199" class="home5Tab4_btn Button_default">Buy This Theme</a></p>
            </div>
            <div class="col-sm-5"> <img alt="" src="/portals/35/home5_pic1.jpg" class="img-responsive" /> </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Option:

  1. You can modify animation to change the animation on the slide. Animation list.
  2. col-sm-* is the width of each column, you can change the width you need through value 1~12.
  3. You can modify glyphicons to change icons. font icon list.

Carousel area

Below is the screen shot:

Codes are as follows:

<div class="SectionStyles8">
  <div class="dnn_layout pt40 pb40">
    <div class="content_mid">
      <div class="carousel carousel_4 home5Carousel animation scaleUp" data-pagination="false" data-autoheight="false">
        <div class="item">
          <div class="text-center">
            <h4>Easy To Use For Everyone</h4>
            <p>Innovative, personalized and powerful services for your online business</p>
            <p><a target="blank" href="http://store.dnnsoftware.com/home/product-details/packageid/34330/r/7ab93d48c5e846d6b199" class="Button_default">Purchase This Theme</a></p>
          </div>
        </div>
        <div class="item">
          <div class="text-center">
            <h4>Powerful, Compatible and Responsive</h4>
            <p>Create interactive, engaging and satisfying website</p>
            <p><a target="blank" href="http://store.dnnsoftware.com/home/product-details/packageid/34330/r/7ab93d48c5e846d6b199" class="Button_default">Getting Started</a></p>
          </div>
        </div>
        <div class="item">
          <div class="text-center">
            <h4>Craft Web solutions with technology</h4>
            <p>Ensure to provide you with the service that meet all your needs and requests.</p>
            <p><a target="blank" href="http://store.dnnsoftware.com/home/product-details/packageid/34330/r/7ab93d48c5e846d6b199" class="Button_default">Customized Skin</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Option:

  1. This is a SectionStyles effect.
  2. This is a ProgressBars Counters effect. Carousel
  3. You can modify animation to change the animation on the slide. Animation list.

Website skins designing and development area

Below is the screen shot:

Codes are as follows:

<div class="SectionStyles9 clearfix">
  <div class="home5_full_left"></div>
  <div class="home5_full_right mb40 mt40">
    <h4>Website skins designing and development</h4>
    <p>Fusce dapibus, tellus ac cursus commodo, tortor mauri Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    <div class="home5_right_infos">
      <div><span class="glyphicons glyph-google-maps"></span><span class="home5_info_name">Address :</span>XinAn Street, No 287, New York</div>
      <div><span class="glyphicons glyph-phone-alt"></span><span class="home5_info_name">Phone :</span>(+086) - 123 -456 -789</div>
      <div><span class="glyphicons glyph-envelope"></span><span class="home5_info_name">Email :</span>dnnskindev@gmail.com</div>
      <div><span class="glyphicons glyph-fax"></span><span class="home5_info_name">Fax :</span>011-1234-5678-910</div>
      <div><span class="glyphicons glyph-parents"></span><span class="home5_info_name">Contact :</span>Mr Smith or Miss Holly</div>
    </div>
    <div class="home5_full_btn"><a target="blank" href="http://store.dnnsoftware.com/home/product-details/packageid/34330/r/7ab93d48c5e846d6b199">View Portfolios</a><a target="blank" href="http://store.dnnsoftware.com/home/product-details/packageid/34330/r/7ab93d48c5e846d6b199">More Information</a></div>
  </div>
</div>

Option:

  1. This is a SectionStyles effect.
  2. You can modify glyphicons to change icons. font icon list.

Features area

Below is the screen shot:

Codes are as follows:

<div class="home5_feature">
  <div class="home5_feature_top text-center">
    <p>Fusce dapibus, tellus ac cursus commodo, tortor mauri Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    <p>fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
    <img alt="" src="/portals/35/home5_pic3.jpg" class="animation scaleUp" /> </div>
  <div class="home5_feature_bottom">
    <div class="row">
      <div class="col-sm-3 animation fadeInUp delay1">
        <ul>
          <li><span class="home5_ico"></span>Full Support</li>
          <li><span class="home5_ico"></span>Unlimited Colors or Themes</li>
          <li><span class="home5_ico"></span>New Header & Footer</li>
          <li><span class="home5_ico"></span>5 Main Layout Styles</li>
          <li><span class="home5_ico"></span>Full & Boxed Layout</li>
          <li><span class="home5_ico"></span>Compatible with Browsers</li>
          <li><span class="home5_ico"></span>SEO Friendly & Optimized</li>
          <li><span class="home5_ico"></span>Customized Settings</li>
        </ul>
      </div>
      <div class="col-sm-3 animation fadeInUp delay2">
        <ul>
          <li><span class="home5_ico"></span>Unlimited Styles/Colors</li>
          <li><span class="home5_ico"></span>Ultra Responsive design</li>
          <li><span class="home5_ico"></span>Multi-Purpose</li>
          <li><span class="home5_ico"></span>Retina Ready</li>
          <li><span class="home5_ico"></span>Responsive Slider Banner</li>
          <li><span class="home5_ico"></span>CSS3 & HTML 5</li>
          <li><span class="home5_ico"></span>DNN6 & DNN7</li>
          <li><span class="home5_ico"></span>Hundreds of Google Fonts</li>
        </ul>
      </div>
      <div class="col-sm-3 animation fadeInUp delay3">
        <ul>
          <li><span class="home5_ico"></span>5 Header Styles</li>
          <li><span class="home5_ico"></span>5 different menu designs</li>
          <li><span class="home5_ico"></span>4 Menu options</li>
          <li><span class="home5_ico"></span>CSS3 animations</li>
          <li><span class="home5_ico"></span>DNN 7 Page Template</li>
          <li><span class="home5_ico"></span>Short Codes</li>
          <li><span class="home5_ico"></span>Typography</li>
          <li><span class="home5_ico"></span>3 Portfolios styles</li>
        </ul>
      </div>
      <div class="col-sm-3 animation fadeInUp delay4">
        <ul>
          <li><span class="home5_ico"></span>Matching containers</li>
          <li><span class="home5_ico"></span>Documentation</li>
          <li><span class="home5_ico"></span>Short Codes</li>
          <li><span class="home5_ico"></span>Typography</li>
          <li><span class="home5_ico"></span>DNNGo_GoMenu</li>
          <li><span class="home5_ico"></span>DNNGo_SkinPlugin</li>
          <li><span class="home5_ico"></span>Responsive Modules</li>
          <li><span class="home5_ico"></span>Bootstrap 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Option:

  1. col-md-* is the width of each column, you can change the width you need through value 1~12.
  2. You can modify animation to change the animation on the slide. Animation list.
  3. Container is using Container-20064-H4-line

Our Services area

Below is the screen shot:

Codes are as follows:

<div class="SectionStyles5">
  <div class="SectionStyles5_bg">
    <div class="dnn_layout pt40 pb40">
      <div class="content_mid clearfix">
        <div class="home4_title">
          <h4>Our Services</h4>
          <div class="line"></div>
        </div>
        <div class="row">
          <div class="col-sm-4 animation fadeInUp">
            <div class="home5_services text-center"> <span class="glyphicons glyph-edit"></span>
              <h3>Edit Content</h3>
              <p>Sed ut perspiciatis unde omnis iste natus  laudan tium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.</p>
              <div><a target="blank" href="http://store.dnnsoftware.com/home/product-details/packageid/34330/r/7ab93d48c5e846d6b199">Read More  ></a></div>
            </div>
          </div>
          <div class="col-sm-4 animation fadeInUp">
            <div class="home5_services text-center"> <span class="glyphicons glyph-new-window"></span>
              <h3>Share Events</h3>
              <p>Sed ut perspiciatis unde omnis iste natus  laudan tium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.</p>
              <div><a target="blank" href="http://store.dnnsoftware.com/home/product-details/packageid/34330/r/7ab93d48c5e846d6b199">Read More  ></a></div>
            </div>
          </div>
          <div class="col-sm-4 animation fadeInUp">
            <div class="home5_services text-center"> <span class="glyphicons glyph-check"></span>
              <h3>Check Mistakes</h3>
              <p>Sed ut perspiciatis unde omnis iste natus  laudan tium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.</p>
              <div><a target="blank" href="http://store.dnnsoftware.com/home/product-details/packageid/34330/r/7ab93d48c5e846d6b199">Read More  ></a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Option:

  1. This is a SectionStyles effect.
  2. You can modify glyphicons to change icons. font icon list.
  3. You can modify animation to change the animation on the slide. Animation list.
  4. col-md-* is the width of each column, you can change the width you need through value 1~12.

Top Numbers area

Below is the screen shot:

Codes are as follows:

<div class="home5_num">
  <div class="text-center">
    <p>Fusce dapibus, tellus ac cursus commodo, tortor mauri Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    <p>fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
  </div>
  <div class="home5_num_main">
    <div class="row animation scaleUp">
      <div class="col-sm-6 col-md-3">
        <div class="home5_num_circle">
          <div>2,560</div>
          Clients</div>
      </div>
      <div class="col-sm-6 col-md-3">
        <div class="home5_num_circle">
          <div>640</div>
          Products</div>
      </div>
      <div class="col-sm-6 col-md-3">
        <div class="home5_num_circle">
          <div>1,800</div>
          Followers</div>
      </div>
      <div class="col-sm-6 col-md-3">
        <div class="home5_num_circle">
          <div>790</div>
          Comments</div>
      </div>
    </div>
  </div>
</div>

Option:

  1. col-md-* is the width of each column, you can change the width you need through value 1~12.
  2. You can modify animation to change the animation on the slide. Animation list.
  3. Container is using Container-20064-H4-line

Images area

Below is the screen shot:

Codes are as follows:

<div class="home5_bottom_img">
  <div class="home5_bottom_img1 animation fadeInUpBig delay3"> <img alt="" src="/portals/35/home5_pic5.png" class="img-responsive" /> </div>
  <div class="home5_bottom_img2 animation fadeInUpBig delay1"> <img alt="" src="/portals/35/home5_pic6.png" class="img-responsive" /> </div>
  <div class="home5_bottom_img3 animation fadeInUpBig delay4"> <img alt="" src="/portals/35/home5_pic7.png" class="img-responsive" /> </div>
  <div class="home5_bottom_img4 animation fadeInUpBig delay2"> <img alt="" src="/portals/35/home5_pic8.png" class="img-responsive" /> </div>
</div>

Option:

  1. You can modify animation to change the animation on the slide. Animation list.

RECENT NEWS area

Below is the screen shot:

Codes are as follows:

<div class="animation scaleUp">
  <div class="home5_news clearfix">
    <div class="home5_news_left"> <span class="glyphicons glyph-calendar"></span> </div>
    <div class="home5_news_right">
      <p>Donec libero purus nec placer at Derunde omnis iste natus error sit voluptatem.</p>
      <div class="home5_news_accent">March 18th, 2014</div>
    </div>
  </div>
  <div class="home5_news clearfix">
    <div class="home5_news_left"> <span class="glyphicons glyph-calendar"></span> </div>
    <div class="home5_news_right">
      <p>Donec libero purus nec placer at Derunde omnis iste natus error sit voluptatem.</p>
      <div class="home5_news_accent">April 06th, 2014</div>
    </div>
  </div>
  <div class="home5_news clearfix">
    <div class="home5_news_left"> <span class="glyphicons glyph-calendar"></span> </div>
    <div class="home5_news_right">
      <p>Donec libero purus nec placer at Derunde omnis iste natus error sit voluptatem.</p>
      <div class="home5_news_accent">July 29th, 2014</div>
    </div>
  </div>
</div>

Option:

  1. You can modify animation to change the animation on the slide. Animation list.
  2. Container is using Container-20064-6
  3. You can modify glyphicons to change icons. font icon list.

EMAIL US area

Below is the screen shot:

Option:

  1. Container is using Container-20064-6
  2. This is Theme_Responsive_20064_home5 theme of DNNGo PowerForms module

GET IN TOUCH area

Below is the screen shot:

Codes are as follows:

<div class="animation scaleUp">
  <p>Lorem ipsum dolor sit amet, consectetuer bollt adipiscing elit. Donec libero purus nec placerat. Derunde omnis iste natus error sit voluptatem.</p>
  <div class="home5_touch_info">
    <p><span>Phone :</span>(+086) - 123 -456</p>
    <p><span>Email  :</span>dnnskindev@gmail.com</p>
    <p><span>Skype :</span>dnngo-linda</p>
    <p><span>MSN  :</span>dnnskindev@gmail.com</p>
    <p><span>Address :</span>Xinhua Road No.186, New York</p>
    <p><span>Website :</span>www.dnngo.net</p>
  </div>
  <div class="home5_touch_social"> <a class="social social-facebook" href="#"></a> <a class="social social-dribbble" href="#"></a> <a class="social social-twitter" href="#"></a> <a class="social social-google-plus" href="#"></a> <a class="social social-vimeo" href="#"></a> <a class="social social-rss" href="#"></a> </div>
</div>

Option:

  1. You can modify animation to change the animation on the slide. Animation list.
  2. Container is using Container-20064-6
  3. You can modify social to change icons. font icon list.
Coming Soon

You can click the link to check Coming Soon demo. Coming Soon

Below is the screen shot:

You can create the coming soon page easily following these steps:

  1. Create a page named coming soon page.
  2. Import the ComingSoon.Page.template for this page.
  3. You can set color, end time, and background image for Coming Soon page through xPlugin, as below:
Boxed Layout

You can set Boxed mode in DNNGo.xPlugin > Skins > Options > Content Layout > Content Layout

Dark Mode

You can set Dark mode directly in DNNGo.xPlugin > Skins > Options > Content Layout > Content Color Mode.

DNNGo_LayerGalleryPro Module

You can see this module in the banner section on the home page, we will guide you step by step to set up the module as the same as our demo site:

DNNGo_xBlog Module

We use this module on the blog page, click this link so you can check the module instruction details.

DNNGo_PhotoAlbums Module

We use this module on the Portfolios page, click this link so you can check the module instruction details.

DNNGo_PowerForms Module

You can create the form through this module, click this link so you can check the module instruction details.

License interface

  1. Please login or register your account at http://www.dnngo.net
  2. Send an email to dnnskindev@gmail.com with your invoice ID, machine Key for every module( different module has different machine key), and your DNNGO username. We will generate an activation code for you. Please note: If your site is a demo site, your license will still be valid when you transfer your site to a live site.
  3. Manage my licenses

Contact Us

If you have any questions or suggestions about modules/skins or modules/skins installation process, please feel free to contact us.