Charlotte

Support

Outsourcing

Charlotte – Responsive HTML5 Template

Thank you for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to start new ticket on this page. Thanks so much!

Scope of free support

We can help you with:

Responding to questions or problems regarding the item and its features

Fixing any discovered item’s bugs

Providing updates to ensure compatibility with new software versions

Was this article helpful ?

HTML Structure

This theme is built upon bootstrap framework and is fully responsive. It adapts to window resolution and looks good on all devices including iPad and iPhone.
See for yourself (resize your browser).

If you would like to read more
about bootstrap framework click here :

Bootstrap Documentation

Grid System and Single row structure

The default Bootstrap grid system utilizes 12 columns. It’s responsive grid and adapts to viewport. Below 767px viewports, the columns become fluid and stack vertically. The fluid grid system uses percents instead of pixels for column widths. Each row always include 12 columns (for example col-md-8 + col-md-4 = col-md-12).
Bootstrap documentation: here

Basic grid HTML:

XHTML

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

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

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

Page structure

Below you will find default page structure :

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

<!DOCTYPE html>

<html>

<head>

[css]

</head>

<body>

[header]

[main menu]

[component 1]

</div>

[fullwidth parallax]

[component 6]

</div>

[footer]

[javascripts]

</body>

</html>

Was this article helpful ?

CSS Files and Structure

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

#primaryContent a {color: #someColor;}

1	#primaryContent a {color: #someColor;}

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn’t a similar style that has more weight.

I.E.

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

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

So, to ensure that your new styles are applied, make sure that they carry enough “weight” and that there isn’t a style lower in the CSS file that is being applied after yours.

Colors

The theme includes a css file wich you can use to edit the colors.
You just need to add the corresponding CSS file to the head of the page like this:

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

<head>

(..)

(..)

</head>

Main Menu structure

Just change brand name, upload your logo to images/content/ folder and you’re ready to go!

<nav class="navbar ct-navbar navbar-default yamm ct-navbar--fadeIn" role="navigation">
    <div class="container">

        <div class="ct-navbarContainer">

            <div class="navbar-header">
                <a class="navbar-brand" href="index.html"><img id="ct-js-logo" src="assets/images/demo-content/logo.png" alt="FISHtank"></a> <!--  +  -->
            </div>

            <ul class="nav navbar-nav">
                <li role="presentation" class="dropdown">
                    <a class="dropdown-toggle" href="about.html" role="button" aria-expanded="true">
                        Home <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li>
                            <div class="yamm-content">
                            </div>
                        </li>
                    </ul>
                </li>
                <li><a href="contact.html">Contact Us</a></li>
            </ul>

            <ul class="nav navbar-nav yamm ct-navbar--right">
                <li><a href="login.html">My Account</a></li>

            </ul>

        </div>

    </div>
</nav>

</div>

Home <span class="caret"></span>

</a>

<li>

</div>

</li>

</ul>

</li>

<li><a href="contact.html">Contact Us</a></li>

</ul>

<li><a href="login.html">My Account</a></li>

</ul>

</div>

</nav>

In order to create mega menus read the documentation here:

Yamm 3 Documentation

Icons

We’ve included 360+ font icons.

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

HTML markup:

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

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

CSS Files & Structure

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

1. Snap mobile
2. Sidebar
3. Content
4. Frame box
5. Image box
6. Contact
7. Popup
8. Sliders
9. Animations
10. Food box
11. To Top button
12. Navigations blog
13. Blog section
14. Comments
15. Google Map
16. Loader

Utilities

Utility classes are low-level structural and positional traits. Utilities can be applied directly to any element, multiple utilities can be used tohether and utilities can be used alongsie component classes.

Utilities are intended for frequently used CSS properties and patterns, like: floats, containing floats, vertical alignemnt, text tryncation. Relying on utilities can help to reduce repetition and provide consistend implementations.

Charlotte uses utilities for the following categories:
Typography
Display Types
Paddings
Margins
Line height
Borders
Colors
Transform
Section elements

Was this article helpful ?

Blog

Charlotte comes with the following template for blog posts

Blog post

You can use it with the following HTML markup:

 <section class="ct-frame ct-frame--white">
            <article class="ct-blogItem">
               <div class="ct-blogItem ct-blogThumbnail">
                   <img src="assets/images/demo-content/blog-image.jpg" alt="Post Image" />
               </div>
               <div class="ct-blogItem ct-innerMargin">
                   <div class="ct-blogItem ct-entryMeta">
                       <span class="ct-blogItem ct-entryDate">oct 22, 2104</span>
                       <span class="ct-blogItem ct-catLinks">♦ <a href="#"> news</a></span>
                       <span class="ct-blogItem ct-entryComments">♦ <a href="#"> 3 comments</a></span>
                   </div>
                   <h3 class="ct-blogItem ct-entryTitle ct-u-font2"><a href="blog-single.html">standard post format with preview image</a></h3>
                   <p class="ct-blogItem ct-entryDescription">Etiam nunc tortor, ultrices quis turpis, tempor lacinia ligula. Sed at odio vel est lobortis eleifend ac vitae enim.
                       Suspendisse est gravida nisi lectus, nisl ullamcorper et. Pellentesque volutpat felis ut nunc elit euismod sollicitudin.
                       Nam ullamcorper nibh eget sem consectetur, et semper elit suscipit.
                   </p>
                   <div class="ct-u-paddingBottom10"><a href="blog-single.html" class="btn btn-lg btn-button--brown">read more</a></div>
               </div>
           </article>
        </section>

</div>

<span class="ct-blogItem ct-entryComments">♦ <a href="#"> 3 comments</a></span>

</div>

<h3 class="ct-blogItem ct-entryTitle ct-u-font2"><a href="blog-single.html">standard post format with preview image</a></h3>

<p class="ct-blogItem ct-entryDescription">Etiam nunc tortor, ultrices quis turpis, tempor lacinia ligula. Sed at odio vel est lobortis eleifend ac vitae enim.

Suspendisse est gravida nisi lectus, nisl ullamcorper et. Pellentesque volutpat felis ut nunc elit euismod sollicitudin.

Nam ullamcorper nibh eget sem consectetur, et semper elit suscipit.

</p>

</div>

</article>

</section>

Check also how our blog comments look like

Blog comments

Use it with the following HTML markup:

 <ul class="ct-comments">
                        <li>
                            <div class="media">
                                <a href="#"><img src="assets/images/demo-content/blog-avatar-1.jpg" class="ct-authorImage pull-left" alt="Author"/></a>
                                    <div class="media-body ct-u-paddingLeft20">
                                        <label class="ct-entryDateSecond">oct 22, 2104</label>
                                        <span class="ct-diamondSymbol">♦</span><a href="#" class="ct-commentReply">&nbsp; reply</a>

                                        <h4 class="ct-media-heading ct-u-font2">richard doe</h4>
                                        <p>
                                            Convallis lorem sagittis neque pellentesque tempor. Proin euismod consectetur quam ac lacinia.
                                            Donec ut facilisis mauris, sed hendrerit nunc. Aenean malesuada scelerisque arcu sed sollicitudin.
                                        </p>
                                    </div>
                            </div>
                        </li>

                        <li>
                            <ol>

                                   <li>
                                    <div class="media">
                                        <a href="#"><img src="assets/images/demo-content/blog-avatar-2.jpg" class="ct-authorImage pull-left" alt="Author"/></a>
                                            <div class="media-body ct-u-paddingLeft20">
                                                 <label class="ct-entryDateSecond">oct 22, 2104</label>
                                                <span class="ct-diamondSymbol">♦</span><a href="#" class="ct-commentReply">&nbsp; reply</a>
                                                <h4 class="ct-media-heading ct-u-font2">maria gomez</h4>
                                                <p>
                                                    Reoin euismod consectetur quam ac lacinia. Donec ut facilisis mauris, sed hendrerit nunc. Aenean malesuada scelerisque arcu sed sollicitudin.
                                                </p>
                                            </div>
                                    </div>
                                    </li>

                            </ol>
                        </li>
                        <li>
                            <div class="media">
                                <a href="#"><img src="assets/images/demo-content/blog-avatar-3.jpg" class="ct-authorImage pull-left" alt="Author"/></a>
                                    <div class="media-body ct-u-paddingLeft20">
                                  <label class="ct-entryDateSecond">oct 22, 2104</label>
                                        <span class="ct-diamondSymbol">♦</span><a href="#" class="ct-commentReply">&nbsp; reply</a>
                                        <h4 class="ct-media-heading ct-u-font2">jane smith</h4>
                                        <p>
                                            Reoin euismod consectetur quam ac lacinia. Donec ut facilisis mauris, sed hendrerit nunc. Aenean malesuada scelerisque arcu sed sollicitudin.
                                        </p>
                                    </div>
                            </div>
                        </li>
                    </ul>

<li>

<span class="ct-diamondSymbol">♦</span><a href="#" class="ct-commentReply">  reply</a>

<h4 class="ct-media-heading ct-u-font2">richard doe</h4>

<p>

Convallis lorem sagittis neque pellentesque tempor. Proin euismod consectetur quam ac lacinia.

Donec ut facilisis mauris, sed hendrerit nunc. Aenean malesuada scelerisque arcu sed sollicitudin.

</p>

</div>

</li>

<li>

<ol>

<li>

<span class="ct-diamondSymbol">♦</span><a href="#" class="ct-commentReply">  reply</a>

<h4 class="ct-media-heading ct-u-font2">maria gomez</h4>

<p>

Reoin euismod consectetur quam ac lacinia. Donec ut facilisis mauris, sed hendrerit nunc. Aenean malesuada scelerisque arcu sed sollicitudin.

</p>

</div>

</li>

</ol>

</li>

<li>

<span class="ct-diamondSymbol">♦</span><a href="#" class="ct-commentReply">  reply</a>

<h4 class="ct-media-heading ct-u-font2">jane smith</h4>

<p>

Reoin euismod consectetur quam ac lacinia. Donec ut facilisis mauris, sed hendrerit nunc. Aenean malesuada scelerisque arcu sed sollicitudin.

</p>

</div>

</li>

</ul>

Was this article helpful ?

Pagination

Display your posts on several pages and navigate between them with simple pagination.

Pagination

Use for it simple HTML markup:

 <div class="row ct-navigation-blog-outer">
            <div class="col-md-6 col-xs-12 text-left">
                <div class="ct-navigation-blog">
                    <a href="#" class="btn btn-lg btn-button--dark"><i class="fa fa-long-arrow-left"></i> older posts</a>
                </div>
            </div>
            <div class="col-md-6 col-xs-12 text-right">
                <div class="ct-navigation-blog">
                     <a href="#" class="btn btn-lg btn-button--dark">newer posts <i class="fa fa-long-arrow-right"></i></a>
                </div>
            </div>
        </div>

<a href="#" class="btn btn-lg btn-button--dark"><i class="fa fa-long-arrow-left"></i> older posts</a>

</div>

<a href="#" class="btn btn-lg btn-button--dark">newer posts <i class="fa fa-long-arrow-right"></i></a>

</div>

Was this article helpful ?

Slider

We use several types of sliders in Charlotte.
Main Slider

Main slider

HTML markup:

<div class="ct-js-owl " data-animations="true" data-height="100%" data-snap-ignore="true">
            <div class="item">
                <hr class="hr-custom ct-js-background animated" data-fx="fadeInDown" data-bg="assets/images/hr2.png" data-bgrepeat="no-repeat">
                <h2 class="ct-u-font2 text-uppercase animated" data-fx="flipInY">We love<br>coffee</h2>
                <p class="animated" data-fx="fadeIn">Vivamus iaculis placerat diam, laoreet posuere<br>dui aliquet ut.Praesent lacinia eleifend<br>eros, ac venenatis orci.</p>
                <a href="about.html" class="btn btn-lg btn-default animated" data-fx="fadeIn" data-hover="It's Delicious"><span>More about us</span></a>
                <hr class="hr-custom ct-js-background animated ct-u-paddingTop60" data-fx="fadeInDown" data-bg="assets/images/hr2.png" data-bgrepeat="no-repeat">
            </div>
            <div class="item">
                <hr class="hr-custom ct-js-background animated" data-fx="fadeInDown" data-bg="assets/images/hr2.png" data-bgrepeat="no-repeat">
                <h2 class="ct-u-font2 text-uppercase animated" data-fx="flipInY">Coffee<br>& Breakfast</h2>
                <p class="animated" data-fx="fadeIn"> Donec fermentum eros at mauris mollis tincidunt.<br>Sed sit amet bibendum tellus, non commodo lacus.</p>
                <a href="menu.html" class="btn btn-lg btn-default animated" data-fx="fadeIn" data-hover="It's Delicious"><span>See our menu</span></a>
                <hr class="hr-custom ct-js-background animated ct-u-paddingTop60" data-fx="fadeInDown" data-bg="assets/images/hr2.png" data-bgrepeat="no-repeat">
            </div>
            <div class="item">
                <hr class="hr-custom ct-js-background animated" data-fx="fadeInDown" data-bg="assets/images/hr2.png" data-bgrepeat="no-repeat">
                <h2 class="ct-u-font2 text-uppercase animated" data-fx="flipInY">Catering service</h2>
                <p class="animated" data-fx="fadeIn">Aliquam erat volutpat. Morbi nisl nibh, interdum<br> vitae ultricies vitae, lobortis sit amet tellus<br> mauris dolor velit.</p>
                <a href="menu.html" class="btn btn-lg btn-default animated" data-fx="fadeIn" data-hover="It's Delicious"><span>Get an estimate</span></a>
                <hr class="hr-custom ct-js-background animated ct-u-paddingTop60" data-fx="fadeInDown" data-bg="assets/images/hr2.png" data-bgrepeat="no-repeat">
            </div>
        </div>

<h2 class="ct-u-font2 text-uppercase animated" data-fx="flipInY">We love<br>coffee</h2>

<p class="animated" data-fx="fadeIn">Vivamus iaculis placerat diam, laoreet posuere<br>dui aliquet ut.Praesent lacinia eleifend<br>eros, ac venenatis orci.</p>

<a href="about.html" class="btn btn-lg btn-default animated" data-fx="fadeIn" data-hover="It's Delicious"><span>More about us</span></a>

</div>

<h2 class="ct-u-font2 text-uppercase animated" data-fx="flipInY">Coffee<br>& Breakfast</h2>

<p class="animated" data-fx="fadeIn"> Donec fermentum eros at mauris mollis tincidunt.<br>Sed sit amet bibendum tellus, non commodo lacus.</p>

</div>

<h2 class="ct-u-font2 text-uppercase animated" data-fx="flipInY">Catering service</h2>

<p class="animated" data-fx="fadeIn">Aliquam erat volutpat. Morbi nisl nibh, interdum<br> vitae ultricies vitae, lobortis sit amet tellus<br> mauris dolor velit.</p>

<a href="menu.html" class="btn btn-lg btn-default animated" data-fx="fadeIn" data-hover="It's Delicious"><span>Get an estimate</span></a>

</div>

Gallery

gallery slider

HTML markup:

<div class="ct-js-owl ct-js-popupGallery" data-items="2" data-single="false" data-navigation="true" data-pagination="false" data-lgItems="2" data-mdItems="2" data-smItems="1">
                    <div class="item ct-u-padding10">
                        <a href="assets/images/demo-content/gallery-full-1.jpg" class="ct-js-popup ct-gallerySlider-image" title="The Croissants"><img src="assets/images/demo-content/gallery-thumb-1.jpg" alt="thumbnail"></a>
                        <a href="assets/images/demo-content/gallery-full-2.jpg" class="ct-js-popup ct-gallerySlider-image" title="The Space"><img src="assets/images/demo-content/gallery-thumb-2.jpg" alt="thumbnail"></a>
                    </div>
                    <div class="item ct-u-padding10">
                        <a href="assets/images/demo-content/gallery-full-3.jpg" class="ct-js-popup ct-gallerySlider-image" title="The Lamps"><img src="assets/images/demo-content/gallery-thumb-3.jpg" alt="thumbnail"></a>
                        <a href="assets/images/demo-content/gallery-full-4.jpg" class="ct-js-popup ct-gallerySlider-image" title="The Coffee"><img src="assets/images/demo-content/gallery-thumb-4.jpg" alt="thumbnail"></a>
                    </div>
                    <div class="item ct-u-padding10">
                        <a href="assets/images/demo-content/gallery-full-5.jpg" class="ct-js-popup ct-gallerySlider-image" title="The balcon"><img src="assets/images/demo-content/gallery-thumb-5.jpg" alt="thumbnail"></a>
                        <a href="assets/images/demo-content/gallery-full-6.jpg" class="ct-js-popup ct-gallerySlider-image" title="The bread"><img src="assets/images/demo-content/gallery-thumb-6.jpg" alt="thumbnail"></a>
                    </div>
                </div>

</div>

</div>

</div>

Gallery Simple

Simple gallery

HTML markup:

 <div class="ct-js-owl ct-gallery--shaddow" data-animations="true" data-height="100%">
                        <div class="item"><img src="assets/images/demo-content/blog-gallery-1.jpg" alt="Gallery Blog Image" /></div>
                        <div class="item"><img src="assets/images/demo-content/blog-gallery-2.jpg" alt="Gallery Blog Image" /></div>
                        <div class="item"><img src="assets/images/demo-content/blog-gallery-3.jpg" alt="Gallery Blog Image" /></div>
                    </div>

</div>

Notice:
To use any of the following sliders you need to include javascript, which can be found here.

Was this article helpful ?

Buttons

Check all buttons, that you can create with Charlotte!

Buttons

Use the following basic HTML markup:

 <li>
<a href="#" class="btn btn-lg btn-button--brown ">
Example of button
</a>
</li>

<li>

Example of button

</a>

</li>

And of the following variations:
Types of buttons:
– btn
– btn-sm
– btn-md

Different looks:
-btn-default
-btn-inverse
-btn-button–brown
-btn-button–dark

Button

Was this article helpful ?

Social Buttons

There are two available types of social buttons:

rounded buttons – it’s a default type, which will be displayed when you use in markup class ct-socials
Rounded socials buttons
squared buttons – can be used with class ct-socials–square
Squared socials buttons

Both types use the following basic HTML markup:

<ul class="list-unstyled list-inline ct-socials animated" data-fx="fadeInUp" data-time="400">
                <li>
                    <a href="https://www.facebook.com/createITpl" data-toggle="tooltip" 
                       data-placement="top" title="Facebook"><i class="fa fa-fw fa-facebook"></i></a>
                </li>
                <li>
                    <a href="https://twitter.com/createitpl" data-toggle="tooltip" data-placement="top" 
                       title="Twitter"><i class="fa fa-fw fa-twitter"></i></a>
                </li>
                <li>
                    <a href="#" data-toggle="tooltip" data-placement="top" title="Google +"><i
                            class="fa fa-fw fa-google-plus"></i></a>
                </li>
            </ul>

<li>

<a href="https://www.facebook.com/createITpl" data-toggle="tooltip"

data-placement="top" title="Facebook"><i class="fa fa-fw fa-facebook"></i></a>

</li>

<li>

<a href="https://twitter.com/createitpl" data-toggle="tooltip" data-placement="top"

title="Twitter"><i class="fa fa-fw fa-twitter"></i></a>

</li>

<li>

<a href="#" data-toggle="tooltip" data-placement="top" title="Google +"><i

class="fa fa-fw fa-google-plus"></i></a>

</li>

</ul>

Was this article helpful ?

Accordion

Check our beautiful accordion!

Accordion

You can use it with simple HTML markup:

 <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingOne">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                we love coffee so much
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                        <div class="panel-body">
                            Etiam nunc tortor, ultrices quis turpis, tempor lacinia ligula. Sed at odio vel est lobortis eleifend ac vitae enim. Suspendisse est gravida nisi lectus, nisl ullamcorper et.
                            Pellentesque volutpat felis ut nunc elit euismod sollicitudin. Nam ullamcorper nibh eget sem consectetur, et semper elit suscipit.
                        </div>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingTwo">
                        <h4 class="panel-title">
                            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                and also we love sweets
                            </a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                        <div class="panel-body">
                            Etiam nunc tortor, ultrices quis turpis, tempor lacinia ligula. Sed at odio vel est lobortis eleifend ac vitae enim. Suspendisse est gravida nisi lectus, nisl ullamcorper et.
                            Pellentesque volutpat felis ut nunc elit euismod sollicitudin. Nam ullamcorper nibh eget sem consectetur, et semper elit suscipit.
                        </div>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingThree">
                        <h4 class="panel-title">
                            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                what are savories actually
                            </a>
                        </h4>
                    </div>
                    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                        <div class="panel-body">
                            Etiam nunc tortor, ultrices quis turpis, tempor lacinia ligula. Sed at odio vel est lobortis eleifend ac vitae enim. Suspendisse est gravida nisi lectus, nisl ullamcorper et.
                            Pellentesque volutpat felis ut nunc elit euismod sollicitudin. Nam ullamcorper nibh eget sem consectetur, et semper elit suscipit.
                        </div>
                    </div>
                </div>

            </div>

we love coffee so much

</a>

</h4>

</div>

Etiam nunc tortor, ultrices quis turpis, tempor lacinia ligula. Sed at odio vel est lobortis eleifend ac vitae enim. Suspendisse est gravida nisi lectus, nisl ullamcorper et.

Pellentesque volutpat felis ut nunc elit euismod sollicitudin. Nam ullamcorper nibh eget sem consectetur, et semper elit suscipit.

</div>

and also we love sweets

</a>

</h4>

</div>

Etiam nunc tortor, ultrices quis turpis, tempor lacinia ligula. Sed at odio vel est lobortis eleifend ac vitae enim. Suspendisse est gravida nisi lectus, nisl ullamcorper et.

Pellentesque volutpat felis ut nunc elit euismod sollicitudin. Nam ullamcorper nibh eget sem consectetur, et semper elit suscipit.

</div>

what are savories actually

</a>

</h4>

</div>

Etiam nunc tortor, ultrices quis turpis, tempor lacinia ligula. Sed at odio vel est lobortis eleifend ac vitae enim. Suspendisse est gravida nisi lectus, nisl ullamcorper et.

Pellentesque volutpat felis ut nunc elit euismod sollicitudin. Nam ullamcorper nibh eget sem consectetur, et semper elit suscipit.

</div>

Was this article helpful ?

Tabs

You can easily display your content in Tabs.

Tabs

<ul class="nav nav-tabs ct-u-paddingTop10" role="tablist" id="myTab">
                <li role="presentation" class="ct-navbarTabs--default active"><a href="#coffee" aria-controls="coffee" role="tab" data-toggle="tab">Coffee</a></li>
                <li role="presentation" class="ct-navbarTabs--default"><a href="#sweets" aria-controls="sweets" role="tab" data-toggle="tab">Sweets</a></li>
                <li role="presentation" class="ct-navbarTabs--default"><a href="#savories" aria-controls="savories" role="tab" data-toggle="tab">Savories</a></li>
            </ul>

            <div class="tab-content">
                <div role="tabpanel" class="tab-pane fade in active" id="coffee">
                    <p>Etiam nunc tortor, ultrices quis turpis, tempor lacinia ligula. Sed at odio vel est lobortis eleifend ac vitae enim.
                    Suspendisse est gravida nisi lectus, nisl ullamcorper et. Pellentesque volutpat felis ut nunc elit euismod sollicitudin.
                    Nam ullamcorper nibh eget sem consectetur, et semper elit suscipit.</p>
                <p class="ct-u-paddingBottom20">
                        Cras interdum ante a efficitur dictum. Duis tincidunt non elit pellentesque. Curabitur set accumsan accumsan consectetur. Quisque et velit vestibulum quam condimentum consectetur.
                        Praesent ac elit molestie, commodo quam vel, laoreet amet elit lacinia lobortis pellentesque metus.
                </p>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="sweets">
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
                    eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
                    Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
                    <p class="ct-u-paddingBottom20">
                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
                        eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
                    </p>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="savories">
                    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate
                    non provident, similique sunt in culpa qui officia deserunt mollitia animi.</p>
                    <p class="ct-u-paddingBottom20">
                        Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
                        sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem numquam eius modi tempora incidunt.
                    </p>
                </div>
            </div>

<li role="presentation" class="ct-navbarTabs--default active"><a href="#coffee" aria-controls="coffee" role="tab" data-toggle="tab">Coffee</a></li>

<li role="presentation" class="ct-navbarTabs--default"><a href="#sweets" aria-controls="sweets" role="tab" data-toggle="tab">Sweets</a></li>

<li role="presentation" class="ct-navbarTabs--default"><a href="#savories" aria-controls="savories" role="tab" data-toggle="tab">Savories</a></li>

</ul>

<p>Etiam nunc tortor, ultrices quis turpis, tempor lacinia ligula. Sed at odio vel est lobortis eleifend ac vitae enim.

Suspendisse est gravida nisi lectus, nisl ullamcorper et. Pellentesque volutpat felis ut nunc elit euismod sollicitudin.

Nam ullamcorper nibh eget sem consectetur, et semper elit suscipit.</p>

Cras interdum ante a efficitur dictum. Duis tincidunt non elit pellentesque. Curabitur set accumsan accumsan consectetur. Quisque et velit vestibulum quam condimentum consectetur.

Praesent ac elit molestie, commodo quam vel, laoreet amet elit lacinia lobortis pellentesque metus.

</p>

</div>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,

eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,

eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

</p>

</div>

<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate

non provident, similique sunt in culpa qui officia deserunt mollitia animi.</p>

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,

sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem numquam eius modi tempora incidunt.

</p>

</div>

Was this article helpful ?

Categories widget

Use simple HTML markup to display a widget.

Categories widget

HTML markup:

 <section class="widget">
                <div class="widget-inner">
                    <h4 class="widget-title ct-u-font1 ct-u-paddingBottom10">categories</h4>
                    <ul class="ct-u-font2 text-center">
                        <li><a href="blog-single.html">announcing</a></li>
                        <li><a href="blog-single.html">news</a></li>
                        <li><a href="blog-single.html">photography</a></li>
                        <li><a href="blog-single.html">press</a></li>
                        <li><a href="blog-single.html">uncategorized</a></li>
                    </ul>
                </div>
            </section>

*Popular posts* ( http://prntscr.com/68un6l )

<pre>
<section class="widget text-left">
                <h4 class="widget-title ct-u-font1 ct-u-paddingBottom5">popular posts</h4>
                <article class="ct-blogItem">
                    <div class="ct-blogItem ct-innerMargin">
                        <div class="ct-blogItem ct-entryMetaPost">
                            <span class="ct-blogItem ct-entryDate">oct 22, 2104</span>
                        </div>
                    </div>
                    <h4 class="ct-entryPost ct-u-font2">
                        <a href="blog-single.html">jim and nick's and the fatback coll...</a>
                    </h4>
                </article>
                <article class="ct-blogItem">
                    <div class="ct-blogItem ct-innerMargin">
                        <div class="ct-blogItem ct-entryMetaPost">
                            <span class="ct-blogItem ct-entryDate">oct 22, 2104</span>
                        </div>
                    </div>
                    <h4 class="ct-blogItem ct-entryPost ct-u-font2">
                        <a href="blog-single.html">drinking pappy under the live oaks</a>
                    </h4>
                </article>
                <article class="ct-blogItem">
                    <div class="ct-blogItem ct-innerMargin">
                        <div class="ct-blogItem ct-entryMetaPost">
                            <span class="ct-blogItem ct-entryDate">oct 22, 2104</span>
                        </div>
                    </div>
                    <h4 class="ct-blogItem ct-entryPost ct-u-font2">
                        <a href="blog-single.html">hanging out with david cross and t...</a>
                    </h4>
                </article>
            </section>

<h4 class="widget-title ct-u-font1 ct-u-paddingBottom10">categories</h4>

<li><a href="blog-single.html">announcing</a></li>

<li><a href="blog-single.html">photography</a></li>

<li><a href="blog-single.html">press</a></li>

<li><a href="blog-single.html">uncategorized</a></li>

</ul>

</div>

</section>

*Popular posts* ( http://prntscr.com/68un6l )

<pre>

<h4 class="widget-title ct-u-font1 ct-u-paddingBottom5">popular posts</h4>

</div>

<a href="blog-single.html">jim and nick's and the fatback coll...</a>

</h4>

</article>

</div>

<a href="blog-single.html">drinking pappy under the live oaks</a>

</h4>

</article>

</div>

<a href="blog-single.html">hanging out with david cross and t...</a>

</h4>

</article>

</section>

Was this article helpful ?

Javascript

All javascripts are placed in folder /js. In main.js file we implement all functions calls.
This theme uses following Javascript files:

HTML/assets/js/jquery.min.js – Jquery Plugin
HTML/assets/js/bootstrap.min.js – Bootstrap Plugin
HTML/assets/js/placeholder.min.js
HTML/assets/js/easing.1.3.js
HTML/assets/js/device.min.js
HTML/assets/js/jquery.browser.min.js
HTML/assets/js/snap.min.js – Snap Plugin is for responsive menu
HTML/assets/js/jquery.appear.js
HTML/assets/js/masonry.min.js – This is using in home page and in gallery
HTML/assets/plugins/owl/owl.carousel.min.js – slider plugin
HTML/assets/plugins/owl/init.js
HTML/assets/js/portfolio/imagesloaded.js – Needed for gallery
HTML/assets/plugins/magnific-popup/jquery.magnific.min.js – Needed for gallery, using when you want to see a big image after click on thumbnail
HTML/assets/plugins/magnific-popup/init.js
HTML/assets/js/main.js – Main scripts
HTML/assets/js/less.min.js

Google Map (GMAP3 Plugin)

This is google map with custom marker, you can define couple parameters:

data-location – address to show
data-height – map height (if undefined height will be 220px)
data-offset – by how many map should be repositioned from marker center point (default -30)

It uses gmap3 plugin.
Documentation: here
HTML Markup:

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

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

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

jquery.appear

This plugin call function when element appear in viewport. This is used in custom animation, progress bars, counter timer.
Documentation: https://github.com/bas2k/jquery.appear/

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

if (jQuery().appear) {

if (device.mobile()) {

// disable animation on mobile

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

} else {

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

jQuery(this).each(function () {

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

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

});

}, {accY: -150});

}

Charts.js

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

Was this article helpful ?

Sources & Credits

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

Twitter Bootstrap – http://twitter.github.com/bootstrap/
jQuery – http://www.jquery.com

Was this article helpful ?

Charlotte – Responsive HTML5 Template

HTML Structure

Page structure

CSS Files and Structure

Colors

Main Menu structure

Icons

CSS Files & Structure

Utilities

Blog

Pagination

Slider

Buttons

Social Buttons

Accordion

Tabs

Categories widget

Javascript

Google Map (GMAP3 Plugin)

jquery.appear

Charts.js

Sources & Credits

Siver

Estato

Disrupt

We are elite