Demos

Brando offers beautiful 10 pre-made demos for different industries and some other pages:

Navigation Types

We have 5 types of headers and navigation as per the demo layout. The list of various header types & its descriptions are provided below for your reference:

1. Light Header

<!-- navigation -->
    <nav class="navbar no-margin-bottom alt-font">
    <div class="container navigation-menu">
    <div class="row">
    ...
    </div>
    </div>
    </nav>
<!-- end navigation -->
                                        

2. Dark Header

<!-- navigation -->
        <nav class="navbar no-margin-bottom alt-font bg-black no-border">
        <div class="container navigation-menu">
        <div class="row">
        ...
        </div>
        </div>
        </nav>
<!-- end navigation -->
                                        

3. Left Navigation

<!-- navigation -->
<nav class="navbar no-margin-bottom alt-font bg-white sidebar-nav">
    <div class="container navigation-menu">
        <div class="row">
            ...
        </div>
    </div>
</nav>
<!-- end navigation -->
                                        

4. Pull Menu

<!-- navigation -->
<div class="menu-wrap pull-menu">
    <nav class="menu navigation-menu">
        ...
    </nav>
    <button class="close-button" id="close-button">Close Menu</button>
</div>
<button class="menu-button" id="open-button">Open Menu</button>
<!-- end navigation -->
                                        

5. Center Logo

<!-- navigation -->
<nav class="navbar no-margin-bottom alt-font center-logo-header no-border bg-turquoise-blue">
    <div class="container navigation-menu">
        <div class="row text-center">
            ...
        </div>
    </div>
</nav>
<!-- end navigation -->
                                        

Dropdown Menu

<!-- navigation -->
<nav class="navbar no-margin-bottom alt-font">
    <div class="container navigation-menu">
        <div class="row">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="col-lg-2 col-md-3 navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand inner-link" href="#home"><img src="images/logo-agency.png" alt=""/></a>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-9 collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#about" class="inner-link">About</a></li>
                    <li><a href="#services" class="inner-link">Services</a></li>
                    <li><a href="#work" class="inner-link">Work</a></li>
                    <li><a href="#team" class="inner-link">Team</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                    <li><a href="#blog" class="inner-link">Blog</a></li>
                </ul>
            </div>
            <div class="col-lg-4 col-md-2 pull-right header-right text-right sm-display-none">
                <span class="text-uppercase white-text text-small md-display-none">Let's work together?  </span>
                <a class="btn-small-white btn btn-very-small no-margin inner-link" href="#contact">Start Now</a>
            </div>
        </div>
    </div>
</nav>
<!-- end navigation -->
                                        

External Page Link

<!-- navigation -->
<ul class="nav navbar-nav">
    <li><a href="http://www.themeforest.net" target="_blank">Services</a></li>
</ul>
<!-- end navigation -->
                                        

Columns & Grid

Basic grid layouts to get you familiar with building within the Bootstrap grid system.

Grid Structure

Helper Classes

We have created some really useful helper classes for you. Here are a few of them:

Text Size

• .text-extra-small - For extra small size of text
• .text-small - For small size of text
• .text-medium - For medium size of text
• .text-large - For large size of text
• .text-extra-large - For extra large size of text
• .title-small - For small size of title
• .title-medium - For medium size of title
• .title-large - For large size of title
• .title-extra-large - For extra large size of title
• .title-extra-large-2 - For extra large size of title
• .title-extra-large-3 - For extra large size of title
• .title-extra-large-4 - For extra large size of title
• .title-extra-large-5 - For extra large size of title
• .title-big - For very large size of title
• .title-big2 - For very large size of title
• .title-big3 - For very large size of title

Text Color

• .white-text - For white color text
• .magenta-text - For magenta color text
• .orange-text - For orange color text
• .deep-orange-text - For deep orange color text
• .deep-red-text - For red color text
• .black-text - For black color text
• .yellow-text - For yellow color text
• .fast-yellow-text - For fast yellow color text
• .deep-red-text - For deep red color text
• .medium-gray-text - For medium gray color text
• .light-gray-text - For light gray color text
• .light-gray-text2 - For light gray color text
• .deep-gray-text - For deep gray color text
• .deep-light-gray-text - For deep light gray color text
• .gray-text - For gray color text
• .dark-gray-text - For dark gray color text
• .brown-text - For brown color text
• .deep-yellow-text - For deep yellow color text
• .dark-blue-text - For dark blue color text
• .fast-pink-text - For fast pink color text
• .fast-pink-text-dark - For fast pink dark color text
• .transparent-blue-text - For transparent blue color text
• .transparent-green-text - For transparent green color text
• .fast-green-text - For fast green color text
• .crimson-red-text - For crimson red color text
• .deep-green-text - For deep green color text
• .deep-green-dark2-text - For deep green dark color text
• .deep-blue-text - For deep blue color text
• .turquoise-blue-text - For turquoise blue color text
• .deep-pink-dark-text - For deep pink dark color text

Text Align

• .text-left - For text align left
• .text-right - For text align right
• .text-center - For text align center
• .text-justify - For text align justify

Text Transform

• .text-lowercase - For text to lowercase
• .text-uppercase - For text to uppercase

Letter Spacing

• .no-letter-spacing - For letter spacing of none
• .letter-spacing-1 - For letter spacing of 1 pixel
• .letter-spacing-2 - For letter spacing of 2 pixel
• .letter-spacing-3 - For letter spacing of 3 pixel
• .letter-spacing-4 - For letter spacing of 4 pixel
• .letter-spacing-5 - For letter spacing of 5 pixel
• .letter-spacing-6 - For letter spacing of 6 pixel
• .letter-spacing-7 - For letter spacing of 7 pixel
• .letter-spacing-8 - For letter spacing of 8 pixel
• .letter-spacing-9 - For letter spacing of 9 pixel
• .letter-spacing-10 - For letter spacing of 10 pixel

Font Weight

• .font-weight-100 - For font weight of 100
• .font-weight-400 - For font weight of 400
• .font-weight-600 - For font weight of 600
• .font-weight-700 - For font weight of 700
• .font-weight-800 - For font weight of 800

Icon Size

• .icon-extra-large - For extra large icon size
• .icon-large - For large icon size
• .icon-medium - For medium icon size
• .icon-small - For small icon size
• .icon-extra-small - For extra small icon size

Background Color

• .bg-white - For background color of white
• .bg-white-transparent - For background color of white transparent
• .bg-yellow - For background color of yellow
• .bg-deep-yellow - For background color of deep yellow
• .bg-golden-yellow - For background color of golden yellow
• .bg-fast-yellow - For background color of fast yellow
• .bg-dark-gray - For background color of dark gray
• .bg-mid-gray - For background color of mid gray
• .bg-mid-gray2 - For background color of mid gray
• .bg-mid-gray3 - For background color of mid gray
• .bg-black - For background color of black
• .bg-gray - For background color of gray
• .bg-yellow-ochre - For background color of yellow ochre
• .bg-deep-brown - For background color of deep brown
• .bg-transparent - For transparent background
• .bg-orange - For background color of orange
• .bg-fast-orange - For background color of fast orange
• .bg-pink - For background color of pink
• .bg-deep-red - For background color of deep red
• .bg-deep-pink - For background color of deep pink
• .bg-light-pink - For background color of light pink
• .bg-fast-pink - For background color of fast pink
• .bg-fast-pink-dark - For background color of fast pink dark
• .bg-magenta - For background color of magenta
• .bg-light-yellow - For background color of light yellow
• .bg-dark-green - For background color of dark green
• .bg-dark-blue - For background color of dark blue
• .bg-deep-blue2 - For background color of deep blue
• .bg-deep-blue3 - For background color of deep blue
• .bg-deep-blue-dark - For background color of deep blue dark
• .bg-violet - For background color of violet
• .bg-light-gray - For background color of light gray
• .bg-brown - For background color of brown
• .bg-deep-orange - For background color of deep orange
• .bg-transparent-blue - For background color of transparent blue
• .bg-transparent-green - For background color of transparent green
• .bg-fast-green - For background color of fast green
• .bg-fast-blue - For background color of fast blue
• .bg-fast-blue-green-gradiant - For background color of fast blue green gradiant
• .bg-crimson-red - For background color of crimson red
• .bg-deep-green - For background color of deep green
• .bg-deep-green2 - For background color of deep green
• .bg-deep-green-dark - For background color of deep green dark
• .bg-deep-green-dark2 - For background color of deep green dark
• .bg-deep-green-dark3 - For background color of deep green dark
• .bg-deep-blue - For background color of deep blue
• .bg-transparent-deep-blue - For background color of transparent deep blue
• .bg-turquoise-blue - For background color of turquoise blue
• .bg-deep-pink-dark - For background color of deep pink dark

Background Image

• .fix-background - For background image attachment fixed
• .cover-background - For background image cover
• .background-size-inherit - For background size inherit
• .background-attachment-inherit - For background attachment inherit
• .background-position-left - For background position left
• .background-position-right - For background position right
• .background-position-top - For background position top

Opacity

• .opacity-light - For light opacity
• .opacity-medium - For medium opacity
• .opacity-full - For full opacity
• .opacity-full-dark - For extra full opacity

Margin

• .margin-one-half - Margin of 0.5% on each side
• .margin-one - Margin of 1% on each side
• .margin-two - Margin of 1.5% on each side
• .margin-three - Margin of 2% on each side
• .margin-four - Margin of 2.5% on each side
• .margin-five - Margin of 3% on each side
• .margin-six - Margin of 3.5% on each side
• .margin-seven - Margin of 4% on each side
• .margin-eight - Margin of 4.5% on each side
• .margin-nine - Margin of 5% on each side
• .margin-ten - Margin of 5.5% on each side
• .margin-eleven - Margin of 6% on each side
• .margin-twelve - Margin of 6.5% on each side
• .margin-thirteen - Margin of 7% on each side
• .margin-fourteen - Margin of 7.5% on each side
• .margin-fifteen - Margin of 8% on each side
• .margin-sixteen - Margin of 8.5% on each side
• .margin-seventeen - Margin of 9% on each side
• .margin-eighteen - Margin of 9.5% on each side
• .margin-nineteen - Margin of 10% on each side
• .margin-twenty - Margin of 10.5% on each side
• .margin-twenty-one - Margin of 11% on each side
• .margin-twenty-two - Margin of 11.5% on each side
• .margin-twenty-three - Margin of 12% on each side
• .margin-twenty-four - Margin of 12.5% on each side
• .margin-twenty-five - Margin of 13% on each side
• .margin-twenty-six - Margin of 13.5% on each side
• .margin-twenty-seven - Margin of 14% on each side
• .margin-twenty-eight - Margin of 14.5% on each side
• .margin-twenty-nine - Margin of 15% on each side
• .margin-thirty - Margin of 15.5% on each side
• .margin-thirty-one - Margin of 16% on each side
• .margin-thirty-two - Margin of 16.5% on each side
• .margin-thirty-three - Margin of 17% on each side
• .margin-thirty-four - Margin of 17.5% on each side
• .margin-thirty-five - Margin of 18% on each side
• .no-margin - No margin of on the all side
• .no-margin-lr - No margin of on the left and right side
• .no-margin-tb - No margin of on the top and bottom side
• .no-margin-top - No margin of on the top side
• .no-margin-bottom - No margin of on the bottom side
• .no-margin-left- No margin of on the left side
• .no-margin-right- No margin of on the right side
• .margin-lr-auto Margin auto of on the left and right side

Padding

• .padding-one-half - Padding of 0.5% on each side
• .padding-one - Padding of 1% on each side
• .padding-two - Padding of 1.5% on each side
• .padding-three - Padding of 2% on each side
• .padding-four - Padding of 2.5% on each side
• .padding-five - Padding of 3% on each side
• .padding-six - Padding of 3.5% on each side
• .padding-seven - Padding of 4% on each side
• .padding-eight - Padding of 4.5% on each side
• .padding-nine - Padding of 5% on each side
• .padding-ten - Padding of 5.5% on each side
• .padding-eleven - Padding of 6% on each side
• .padding-twelve - Padding of 6.5% on each side
• .padding-thirteen - Padding of 7% on each side
• .padding-fourteen - Padding of 7.5% on each side
• .padding-fifteen - Padding of 8% on each side
• .padding-sixteen - Padding of 8.5% on each side
• .padding-seventeen - Padding of 9% on each side
• .padding-eighteen - Padding of 9.5% on each side
• .padding-nineteen - Padding of 10% on each side
• .padding-twenty - Padding of 10.5% on each side
• .padding-twenty-one - Padding of 11% on each side
• .padding-twenty-two - Padding of 11.5% on each side
• .padding-twenty-three - Padding of 12% on each side
• .padding-twenty-four - Padding of 12.5% on each side
• .padding-twenty-five - Padding of 13% on each side
• .padding-twenty-six - Padding of 13.5% on each side
• .padding-twenty-seven - Padding of 14% on each side
• .padding-twenty-eight - Padding of 14.5% on each side
• .padding-twenty-nine - Padding of 15% on each side
• .padding-thirty - Padding of 15.5% on each side
• .padding-thirty-one - Padding of 16% on each side
• .padding-thirty-two - Padding of 16.5% on each side
• .padding-thirty-three - Padding of 17% on each side
• .padding-thirty-four - Padding of 17.5% on each side
• .padding-thirty-five - Padding of 18% on each side
• .no-padding - No padding at all
• .no-padding-lr - No padding in left and right
• .no-padding-tb - No padding in top and bottom
• .no-padding-top - No padding in top
• .no-padding-bottom - No padding in bottom
• .no-padding-left - No padding in left
• .no-padding-right - No padding in right

Float

• .pull-left - Float DIV to left
• .pull-right - Float DIV to right

Display

• .display-block - For display block
• .display-inline-block - For display inline-block
• .display-inline - For display inline
• .display-inherit - For display inherit
• .display-none - For display none
• .overflow-hidden - For overflow hidden

Position

• .position-relative - For element position relative
• .position-absolute - For element position absolute
• .position-fixed - For element position fixed
• .position-right - For element position fixed to right of the body or parent element
• .position-left - For element position fixed to left of the body or parent element
• .position-top - For element position fixed to top of the body or parent element

Position Top

• .top0 For element position top 0 from the top of the parent element/div
• .top1 For element position 1px down from the top of the parent element/div
• .top2 For element position 2px down from the top of the parent element/div
• .top3 For element position 3px down from the top of the parent element/div
• .top4 For element position 4px down from the top of the parent element/div
• .top5 For element position 5px down from the top of the parent element/div
• .top6 For element position 6px down from the top of the parent element/div
• .top7 For element position 7px down from the top of the parent element/div
• .top8 For element position 8px down from the top of the parent element/div
• .top9 For element position 9px down from the top of the parent element/div
• .top10 For element position 10px down from the top of the parent element/div

• .top-minus1 For element position 1px up from the top of the parent element/div
• .top-minus2 For element position 2px up from the top of the parent element/div
• .top-minus3 For element position 3px up from the top of the parent element/div
• .top-minus4 For element position 4px up from the top of the parent element/div
• .top-minus5 For element position 5px up from the top of the parent element/div
• .top-minus6 For element position 6px up from the top of the parent element/div
• .top-minus7 For element position 7px up from the top of the parent element/div
• .top-minus8 For element position 8px up from the top of the parent element/div
• .top-minus9 For element position 9px up from the top of the parent element/div
• .top-minus10 For element position 10px up from the top of the parent element/div

Width

• .width-20 - For width of 20% on DIV/Text
• .width-30 - For width of 30% on DIV/Text
• .width-40 - For width of 40% on DIV/Text
• .width-50 - For width of 50% on DIV/Text
• .width-60 - For width of 60% on DIV/Text
• .width-70 - For width of 70% on DIV/Text
• .width-80 - For width of 80% on DIV/Text
• .width-90 - For width of 90% on DIV/Text
• .width-100 - For width of 100% on DIV/Text
• .width-auto - For width of auto on DIV/Text

Height

• .height-100 - For height of 100% on DIV
• .height-auto - For height auto on DIV

Border

• .border-thick - For thick border
• .border-top - For border top side only
• .border - For border each side
• .border-right - For border right side only
• .border-bottom - For border bottom side only
• .border-left - For border left side only
• .border-black - For black border color
• .border-white - For white border color
• .border-color-black - For black border color
• .border-color-fast-yellow - For fast yellow border color
• .border-color-white - For white border color
• .border-color-fast-pink-dark - For fast pink dark border color
• .border-deep-yellow - For deep yellow border color
• .border-gray - For gray border color
• .border-color-orange - For orange border color
• .no-border - For no border on all sides
• .border-top-light - For transperent border top side only
• .border-bottom-light - For transperent border bottom side only
• .border-transperent-white - For transperent border white only
• .border-transperent-white-light - For transperent border white light only
• .border-transperent-black-light - For transperent border black light only
• .border-transperent-green - For transperent green border color
• .border-bottom-transperent-white - For transperent white border color bottom side only
• .no-border-round - For no border radius
• .round-border - For border radius

Slider Types & Options

OWL Slider - Full Screen

<!-- slider -->
    <div class="owl-slider-full owl-carousel owl-theme light-pagination square-pagination dark-pagination-without-next-prev-arrow main-slider">
        <!-- slider item -->
        <div class="item owl-bg-img" style="background-image:url('images/slider-img1.jpg');">
            <div class="opacity-full bg-dark-gray"></div>
            <div class="container full-screen position-relative">
                <div class="slider-typography text-left">
                    <div class="slider-text-middle-main md-margin-eleven sm-margin-three xs-margin-thirteen">
                        <div class="slider-text-middle slider-typography-option1">
                            <span class="white-text font-weight-800 letter-spacing-3 alt-font text-uppercase">Highly experiences</span><br>
                            <div class="bg-fast-yellow separator-line-extra-thick  no-margin-lr margin-ten md-no-margin-lr md-margin-six"></div>
                            <p class="white-text text-uppercase letter-spacing-2 alt-font xs-width-80">We craft experiences that help brands.</p>  
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end slider item -->
        <!-- slider item -->
        <div class="item owl-bg-img" style="background-image:url('images/slider-img2.jpg');">
            <div class="opacity-full bg-dark-gray"></div>
            <div class="container full-screen position-relative">
                <div class="slider-typography text-left">
                    <div class="slider-text-middle-main md-margin-eleven sm-margin-three xs-margin-thirteen">
                        <div class="slider-text-middle slider-typography-option1">
                            <span class="white-text font-weight-800 letter-spacing-3 alt-font text-uppercase">Awesome creativity</span><br>
                            <div class="bg-fast-yellow separator-line-extra-thick  no-margin-lr margin-twelve md-no-margin-lr md-margin-six"></div>
                            <p class="white-text text-uppercase letter-spacing-2 alt-font xs-width-80">We're on a mission to make you feel awesome.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end slider item -->
        <!-- slider item -->
        <div class="item owl-bg-img" style="background-image:url('images/slider-img3.jpg');">
            <div class="opacity-full bg-dark-gray"></div>
            <div class="container full-screen position-relative">
                <div class="slider-typography text-left">
                    <div class="slider-text-middle-main md-margin-eleven sm-margin-three xs-margin-thirteen">
                        <div class="slider-text-middle slider-typography-option1">
                            <span class="white-text font-weight-800 letter-spacing-3 alt-font text-uppercase">Simplicity & honesty</span><br>
                            <div class="bg-fast-yellow separator-line-extra-thick  no-margin-lr margin-twelve md-no-margin-lr  md-margin-six"></div>
                            <p class="white-text text-uppercase letter-spacing-2 alt-font xs-width-80">Digital solutions led by clarity simplicity.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end slider item -->
    </div>
<!-- end slider -->
                                        

Javascript

<script>
    $(function () {
        $(".owl-slider-full").owlCarousel({
        navigation: true, // Show next and prev buttons
        slideSpeed: 300,
        paginationSpeed: 400,
        singleItem: true,
        navigationText: ["", ""]
    });
    });
</script>
                                        

OWL Slider - Thumb Image

<!-- blog slider -->
<div class="blog-slider owl-carousel owl-theme light-pagination">
    <!-- blog item -->
    <article class="item col-md-12 no-padding">
        <div class="col-md-12 col-sm-12">
            <!-- blog image -->
            <div class="post-thumbnail overflow-hidden position-relative bg-dark-blue">
                <a href="blog-details.html"><img src="images/blog-post-img8.jpg" alt=""/></a>
                <span class="post-date text-small text-uppercase letter-spacing-2 alt-font light-gray-text position-absolute bg-dark-blue">25 June 2015</span>
            </div>
            <!-- end blog image -->
            <div class="post-details display-inline-block text-left">
                <div class="col-md-2 col-sm-2 no-padding">
                    <span class="title-extra-large deep-orange-text md-title-large alt-font margin-one-half no-margin-lr display-block sm-display-none">01.</span>
                </div>
                <div class="col-md-10 col-sm-12 no-padding">
                    <span class="text-large text-uppercase md-text-medium display-block alt-font"><a href="blog-details.html" class="light-gray-text">Explore the Pacific Northwest</a></span>
                    <span class="text-extra-small text-uppercase display-block alt-font medium-gray-text margin-one-half no-margin-lr no-margin-bottom">Posted by <a href="blog.html" class="medium-gray-text">Colin Powell</a></span>
                </div>
            </div>
        </div>
    </article>
    <!-- end blog item -->
    <!-- blog item -->
    <article class="item col-md-12 no-padding">
        <div class="col-md-12 col-sm-12">
            <!-- blog image -->
            <div class="post-thumbnail overflow-hidden position-relative bg-dark-blue">
                <a href="blog-details.html"><img src="images/blog-post-img10.jpg" alt=""/></a>
                <span class="post-date text-small text-uppercase letter-spacing-2 alt-font light-gray-text position-absolute bg-dark-blue">25 June 2015</span>
            </div>
            <!-- end blog image -->
            <div class="post-details display-inline-block text-left">
                <div class="col-md-2 col-sm-2 no-padding">
                    <span class="title-extra-large md-title-large deep-orange-text alt-font margin-one-half no-margin-lr display-block sm-display-none">02.</span>
                </div>
                <div class="col-md-10 col-sm-12 no-padding">
                    <span class="text-large text-uppercase md-text-medium display-block alt-font"><a href="blog-details.html" class="light-gray-text">The Fearful Adventurer</a></span>
                    <span class="text-extra-small text-uppercase display-block alt-font medium-gray-text margin-one-half no-margin-lr no-margin-bottom">Posted by <a href="blog.html" class="medium-gray-text">Melanie Lang</a></span>
                </div>
            </div>
        </div>
    </article>
    <!-- end blog item -->
    <!-- blog item -->
    <article class="item col-md-12 no-padding">
        <div class="col-md-12 col-sm-12">
            <!-- blog image -->
            <div class="post-thumbnail overflow-hidden position-relative bg-dark-blue">
                <a href="blog-details.html"><img src="images/blog-post-img9.jpg" alt=""/></a>
                <span class="post-date text-small text-uppercase letter-spacing-2 alt-font light-gray-text position-absolute bg-dark-blue">23 June 2015</span>
            </div>
            <!-- end blog image -->
            <div class="post-details display-inline-block text-left">
                <div class="col-md-2 col-sm-2 no-padding">
                    <span class="title-extra-large md-title-large deep-orange-text alt-font margin-one-half no-margin-lr display-block sm-display-none">03.</span>
                </div>
                <div class="col-md-10 col-sm-12 no-padding">
                    <span class="text-large text-uppercase md-text-medium display-block alt-font"><a href="blog-details.html" class="light-gray-text">The Imperfect Adventures</a></span>
                    <span class="text-extra-small text-uppercase display-block alt-font medium-gray-text margin-one-half no-margin-lr no-margin-bottom">Posted by <a href="blog.html" class="medium-gray-text">Adrian Taylor</a></span>
                </div>
            </div>
        </div>
    </article>
    <!-- end blog item -->
    <!-- blog item -->
    <article class="item col-md-12 no-padding">
        <div class="col-md-12 col-sm-12">
            <!-- blog image -->
            <div class="post-thumbnail overflow-hidden position-relative bg-dark-blue">
                <a href="blog-details.html"><img src="images/blog-post-img11.jpg" alt=""/></a>
                <span class="post-date text-small text-uppercase letter-spacing-2 alt-font light-gray-text position-absolute bg-dark-blue">21 June 2015</span>
            </div>
            <!-- end blog image -->
            <div class="post-details display-inline-block text-left">
                <div class="col-md-2 col-sm-2 no-padding">
                    <span class="title-extra-large md-title-large deep-orange-text alt-font margin-one-half no-margin-lr display-block sm-display-none">04.</span>
                </div>
                <div class="col-md-10 col-sm-12 no-padding">
                    <span class="text-large text-uppercase md-text-medium display-block alt-font"><a href="blog-details.html" class="light-gray-text">Travel and the Art of Losing</a></span>
                    <span class="text-extra-small text-uppercase display-block alt-font medium-gray-text margin-one-half no-margin-lr no-margin-bottom">Posted by <a href="blog.html" class="medium-gray-text">Melanie Lang</a></span>
                </div>
            </div>
        </div>
    </article>
    <!-- end blog item -->
    <!-- blog item -->
    <article class="item col-md-12 no-padding">
        <div class="col-md-12 col-sm-12">
            <!-- blog image -->
            <div class="post-thumbnail overflow-hidden position-relative bg-dark-blue">
                <a href="blog-details.html"><img src="images/blog-post-img12.jpg" alt=""/></a>
                <span class="post-date text-small text-uppercase letter-spacing-2 alt-font light-gray-text position-absolute bg-dark-blue">20 June 2015</span>
            </div>
            <!-- end blog image -->
            <div class="post-details display-inline-block text-left">
                <div class="col-md-2 col-sm-2 no-padding">
                    <span class="title-extra-large md-title-large deep-orange-text alt-font margin-one-half no-margin-lr display-block sm-display-none">05.</span>
                </div>
                <div class="col-md-10 col-sm-12 no-padding">
                    <span class="text-large text-uppercase md-text-medium display-block alt-font"><a href="blog-details.html" class="light-gray-text">Top golf destinations for Day</a></span>
                    <span class="text-extra-small text-uppercase display-block alt-font medium-gray-text margin-one-half no-margin-lr no-margin-bottom">Posted by <a href="blog.html" class="medium-gray-text">Adrian Taylor</a></span>
                </div>
            </div>
        </div>
    </article>
    <!-- end blog item -->
    <!-- blog item -->
    <article class="item col-md-12 no-padding">
        <div class="col-md-12 col-sm-12">
            <!-- blog image -->
            <div class="post-thumbnail overflow-hidden position-relative bg-dark-blue">
                <a href="blog-details.html"><img src="images/blog-post-img13.jpg" alt=""/></a>
                <span class="post-date text-small text-uppercase letter-spacing-2 alt-font light-gray-text position-absolute bg-dark-blue">19 June 2015</span>
            </div>
            <!-- end blog image -->
            <div class="post-details display-inline-block text-left">
                <div class="col-md-2 col-sm-2 no-padding">
                    <span class="title-extra-large md-title-large deep-orange-text alt-font margin-one-half no-margin-lr display-block sm-display-none">06.</span>
                </div>
                <div class="col-md-10 col-sm-12 no-padding">
                    <span class="text-large text-uppercase md-text-medium display-block alt-font"><a href="blog-details.html" class="light-gray-text">Miami Beach Vacation Rentals</a></span>
                    <span class="text-extra-small text-uppercase display-block alt-font medium-gray-text margin-one-half no-margin-lr no-margin-bottom">Posted by <a href="blog.html" class="medium-gray-text">Colin Powell</a></span>
                </div>
            </div>
        </div>
    </article>
    <!-- end blog item -->
    <!-- blog item -->
    <article class="item col-md-12 no-padding">
        <div class="col-md-12 col-sm-12">
            <!-- blog image -->
            <div class="post-thumbnail overflow-hidden position-relative bg-dark-blue">
                <a href="blog-details.html"><img src="images/blog-post-img14.jpg" alt=""/></a>
                <span class="post-date text-small text-uppercase letter-spacing-2 alt-font light-gray-text position-absolute bg-dark-blue">19 June 2015</span>
            </div>
            <!-- end blog image -->
            <div class="post-details display-inline-block text-left">
                <div class="col-md-2 col-sm-2 no-padding">
                    <span class="title-extra-large md-title-large deep-orange-text alt-font margin-one-half no-margin-lr display-block sm-display-none">07.</span>
                </div>
                <div class="col-md-10 col-sm-12 no-padding">
                    <span class="text-large text-uppercase md-text-medium display-block alt-font"><a href="blog-details.html" class="light-gray-text">A Week at the Beach</a></span>
                    <span class="text-extra-small text-uppercase display-block alt-font medium-gray-text margin-one-half no-margin-lr no-margin-bottom">Posted by <a href="blog.html" class="medium-gray-text">Adrian Taylor</a></span>
                </div>
            </div>
        </div>
    </article>
    <!-- end blog item -->
</div>
<!-- end blog slider -->
                                        

You can find the owl slider related documentation here.
Read OWL Slider Document

Accordions

Extend the default collapse behavior to create an accordion with the panel component.

<!-- accordion -->
<div class="panel-group accordion-style3 no-margin-bottom" id="accordion-one">
    <!-- accordion item -->
    <div class="panel panel-default no-border">
        <div class="panel-heading padding-three no-padding-lr no-padding-top active-accordion">
            <a data-toggle="collapse" data-parent="#accordion-one" href="#accordion-one-link1"><h4 class="panel-title">Accordion Item #1<span class="pull-right"><i class="fa fa-minus"></i></span></h4></a>
        </div>
        <div id="accordion-one-link1" class="panel-collapse collapse in">
            <div class="panel-body">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
            </div>
        </div>
    </div>
    <!-- end accordion item -->
    <!-- accordion item -->
    <div class="panel panel-default no-border no-margin-top">
        <div class="panel-heading padding-three no-padding-lr no-padding-top ">
            <a data-toggle="collapse" data-parent="#accordion-one" href="#accordion-one-link2"><h4 class="panel-title">Accordion Item #2<span class="pull-right"><i class="fa fa-plus"></i></span></h4></a>
        </div>
        <div id="accordion-one-link2" class="panel-collapse collapse">
            <div class="panel-body">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
            </div>
        </div>
    </div>
    <!-- end accordion item -->
    <!-- accordion item -->
    <div class="panel panel-default no-border no-margin-top">
        <div class="panel-heading padding-three no-padding-lr no-padding-top">
            <a data-toggle="collapse" data-parent="#accordion-one" href="#accordion-one-link3"><h4 class="panel-title">Accordion Item #3<span class="pull-right"><i class="fa fa-plus"></i></span></h4></a>
        </div>
        <div id="accordion-one-link3" class="panel-collapse collapse">
            <div class="panel-body">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
            </div>
        </div>
    </div>
    <!-- end accordion item -->
</div>
<!-- end accordion -->
                                        

NoteMany examples were shown in elements.html page.

Toggle

Extend the default collapse behavior to create an toggle with the panel component.

<!-- toggle -->
<div class="panel-group toggles-style1 no-margin-bottom">
    <!-- toggle item -->
    <div class="panel panel-default" id="collapse-three">
        <div role="tablist" id="type3-headingOne" class="panel-heading">
            <a data-toggle="collapse" data-parent="#collapse-one" href="#collapse-three-link1"><h4 class="panel-title">Collapse Item #1<span class="pull-right"><i class="fa fa-plus"></i></span></h4></a>
        </div>
        <div id="collapse-three-link1" class="panel-collapse collapse">
            <div class="panel-body">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
            </div>
        </div>
    </div>
    <!-- end toggle item -->
    <!-- toggle item -->
    <div class="panel panel-default no-margin-top">
        <div role="tablist" id="type3-headingTwo" class="panel-heading">
            <a data-toggle="collapse" data-parent="#collapse-one" href="#collapse-three-link2"><h4 class="panel-title">Collapse Item #2<span class="pull-right"><i class="fa fa-plus"></i></span></h4></a>
        </div>
        <div id="collapse-three-link2" class="panel-collapse collapse">
            <div class="panel-body">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
            </div>
        </div>
    </div>
    <!-- end toggle item -->
    <!-- toggle item -->
    <div class="panel panel-default no-margin-top">
        <div role="tablist" id="type3-headingThree" class="panel-heading">
            <a data-toggle="collapse" data-parent="#collapse-one" href="#collapse-three-link3"><h4 class="panel-title">Collapse Item #3<span class="pull-right"><i class="fa fa-plus"></i></span></h4></a>
        </div>
        <div id="collapse-three-link3" class="panel-collapse collapse">
            <div class="panel-body">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
            </div>
        </div>
    </div>
    <!-- end toggle item -->
</div>
<!-- end toggle -->
                                        

NoteMany examples were shown in elements.html page.

Progress Bar

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

<!-- progress-bar -->
<div class="progress-bar-main progress-bar-style1">
    <!-- progress bar item -->
    <div class="progress-bar-sub">
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
        </div>
        <div class="progress-name"><strong>Jquery</strong> - 4 years Experience</div>
    </div>
    <!-- end progress bar item -->
    <!-- progress bar item -->
    <div class="progress-bar-sub">
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div>
        </div>
        <div class="progress-name"><strong>Wordpress</strong> - 6 years Experience</div>
    </div>
    <!-- end progress bar item -->
    <!-- progress bar item -->
    <div class="progress-bar-sub">
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;"></div>
        </div>
        <div class="progress-name no-margin-bottom"><strong>HTML5</strong> - 5 years Experience</div>
    </div>
    <!-- end progress bar item -->
</div>
<!-- end progress-bar -->
                                        

NoteMany examples were shown in elements.html page.

Buttons

Brando contains many types of button like Small, normal, big buttons, link, primary, default, warning, icon buttons, reveal buttons, etc... All of this types are customized.

<a href="#" class="highlight-button btn btn-large button">Button</a>
<a href="#" class="highlight-button btn btn-medium button">Button</a>
<a href="#" class="highlight-button btn btn-small button">Button</a>
<a href="#" class="highlight-button btn btn-very-small button no-margin-right xs-margin-lr-auto">Button</a>
                                        

NoteMany examples were shown in elements.html page.

Features Box

Showcase your main features, services, pricing, testimonials, etc... using Brando Features Box element.

<!-- features box style #1 -->
<div class="row">
    <!-- features box -->
    <div class="col-md-6 col-sm-6 xs-margin-ten xs-no-margin-top xs-no-margin-lr">
        <span class="text-uppercase text-large alt-font font-weight-600 deep-gray-text"><span class="crimson-red-text">01.</span>  Architecture</span>
        <img src="images/architecture-img6.jpg" alt="" class="margin-ten no-margin-lr sm-margin-eleven sm-no-margin-lr"/>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p>
        <div class="separator-line-thick bg-crimson-red margin-twenty no-margin-lr no-margin-bottom"></div>
    </div>
    <!-- end features box -->
    <!-- features box -->
    <div class="col-md-6 col-sm-6">
        <span class="text-uppercase text-large alt-font font-weight-600 deep-gray-text"><span class="crimson-red-text">02.</span>  Civil & Structural</span>
        <img src="images/architecture-img7.jpg" alt="" class="margin-ten no-margin-lr sm-margin-eleven sm-no-margin-lr"/>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p>
        <div class="separator-line-thick bg-crimson-red margin-twenty no-margin-lr no-margin-bottom"></div>
    </div>
    <!-- end features box -->
</div>
<!-- end features box style #1 -->
                                        

NoteMany examples were shown in elements.html page.

Tabs

Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus. You can activate a tab navigation without writing any JavaScript by simply specifying data-toggle="tab" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling.

<!-- tab style #1 -->
<div class="tab-style5">
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12 xs-margin-five xs-no-margin-lr xs-no-margin-top">
            <!-- tab navigation -->
            <ul class="nav nav-tabs text-uppercase">
                <li class="active xs-width-100"><a href="#tab_sec1" data-toggle="tab" class="xs-no-margin">Magento</a></li>
                <li class="xs-width-100"><a href="#tab_sec2" data-toggle="tab" class="xs-no-margin">Jquery</a></li>
                <li class="xs-width-100"><a href="#tab_sec3" data-toggle="tab" class="xs-no-margin">Wordpress</a></li>
                <li class="xs-width-100"><a href="#tab_sec4" data-toggle="tab" class="xs-no-margin">HTML / CSS</a></li>
            </ul>
            <!-- tab end navigation -->
        </div>
    </div>
    <!-- tab content section -->
    <div class="tab-content">
        <!-- tab content -->
        <div class="tab-pane fade in active" id="tab_sec1">
            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <p class="no-margin-bottom">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text.</p><br>
                    <p class="no-margin-bottom">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                </div>
            </div>
        </div>
        <!-- end tab content -->
        <!-- tab content -->
        <div class="tab-pane fade in" id="tab_sec2">
            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <p class="no-margin-bottom">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p><br>
                    <p class="no-margin-bottom">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text.</p>
                </div>
            </div>
        </div>
        <!-- end tab content -->
        <!-- tab content -->
        <div class="tab-pane fade in" id="tab_sec3">
            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <p class="no-margin-bottom">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text.</p><br>
                    <p class="no-margin-bottom">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                </div>
            </div>
        </div>
        <!-- end tab content -->
        <!-- tab content -->
        <div class="tab-pane fade in" id="tab_sec4">
            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <p class="no-margin-bottom">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p><br>
                    <p class="no-margin-bottom">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text.</p>
                </div>
            </div>
        </div>
        <!-- end tab content -->
    </div>
    <!-- end tab content section -->
</div>
<!-- end tab style #1 -->
                                        

NoteMany examples were shown in elements.html page.

Alert Massage

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. Wrap any text and an optional dismiss button in .alert and one of the four contextual classes (e.g., .alert-success) for basic alert messages.

<!-- alert message -->
<div class="alert alert-success fade in" role="alert">
    <i class="fa fa-thumbs-up alert-success"></i>
    <strong>Well done!</strong> You successfully read this important alert message.
    <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
</div>
<!-- end alert message -->
<!-- alert message -->
<div class="alert alert-info fade in" role="alert">
    <i class="fa fa-info-circle alert-info"></i>
    <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
    <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
</div>
<!-- end alert message -->
<!-- alert message -->
<div class="alert alert-warning fade in" role="alert">
    <i class="fa fa-question-circle alert-warning"></i>
    <strong>Warning!</strong> Best check yo self, you're not looking too good.
    <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
</div>
<!-- end alert message -->
<!-- alert message -->
<div class="alert alert-danger fade in no-margin-bottom" role="alert">
    <i class="fa fa-warning alert-danger"></i>
    <strong>Oh snap!</strong> Change a few things up and try submitting again.
    <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
</div>
<!-- end alert message -->
                                        

NoteMany examples were shown in elements.html page.

Pagination

Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.

<!-- pagination -->
<div class="col-md-12 col-sm-12 col-xs-12 pagination text-center no-padding">
    <a href="#"><i class="fa fa-angle-left title-medium font-weight-600 fast-yellow-text no-border"></i></a>
    <a class="alt-font" href="#">1</a>
    <a class="alt-font active" href="#">2</a>
    <a class="alt-font" href="#">3</a>
    <a class="alt-font" href="#">4</a>
    <a class="alt-font" href="#">5</a>
    <a href="#"><i class="fa fa-angle-right title-medium font-weight-600 fast-yellow-text"></i></a>
</div>
<!-- end pagination -->
                                        

NoteExamples were shown in blog.html page.

Breadcrumbs

Indicate the current page's location within a navigational hierarchy.

<!-- breadcrumb -->
<div class="breadcrumb alt-font">
    <div class="container">  
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Blog Listing</a></li>
            <li>Blog Details</li> 
        </ul> 
    </div> 
</div>
<!-- end breadcrumb --> 
                                        

NoteExamples were shown in blog.html page.

Video and Sound

Add audio and video in your website for better user experience.

Embed Video

For embed video we use powerfull FitVids plugin. A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

<!-- youtube video -->
<div class="fit-videos">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/mcixldqDIEQ"></iframe>
</div>
<!-- end youtube video -->
                                        

NoteMany examples were shown in elements.html page.

HTML5 Video

To add html5 video you should have 3 types of video: .mp4, .ogg and .webm. Video may be loop, autoplaying, muted/unmuted. The general structure, with fix height and some additional markup see below:

<div class="col-md-12 col-sm-12 col-xs-12 margin-ten no-margin-lr no-margin-bottom">
    <!-- html5 video -->
    <video controls="" loop="" muted="" autoplay="">
        <source type="video/mp4" src="video/video.mp4">
        <source type="video/ogg" src="video/video.ogg">
        <source type="video/webm" src="video/video.webm">
    </video>
    <!-- end html5 video -->
</div>
                                        

NoteExamples were shown in elements.html page.

Embed Audio

<!-- sound -->
<iframe width="100%" height="166" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/3005344&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false" scrolling="no"></iframe>
<!-- end sound -->
                                        

NoteExamples were shown in elements.html page.

Counter

Counter is a jQuery plugin that animates a number from zero (counting up towards it).

<!-- counter -->
<div class="row">
    <!-- counter item -->
    <div class="col-md-3 col-sm-6 counter-style1 text-center border-right sm-margin-eleven sm-no-margin-lr sm-no-margin-top">
        <span class="timer counter-number alt-font" data-to="780" data-speed="7000"></span>
        <span class="text-small letter-spacing-2 text-uppercase margin-one no-margin-lr display-block alt-font">Therapists</span>
    </div>
    <!-- end counter item -->
    <!-- counter item -->
    <div class="col-md-3 col-sm-6 counter-style1 text-center border-right sm-margin-eleven sm-no-margin-lr sm-no-margin-top sm-no-border">
        <span class="timer counter-number alt-font" data-to="987" data-speed="7000"></span>
        <span class="text-small letter-spacing-2 text-uppercase margin-one no-margin-lr display-block alt-font">Procedures</span>
    </div>
    <!-- end counter item -->
    <!-- counter item -->
    <div class="col-md-3 col-sm-6 counter-style1 text-center border-right xs-margin-eleven xs-no-margin-lr xs-no-margin-top">
        <span class="timer counter-number alt-font" data-to="350" data-speed="7000"></span>
        <span class="text-small letter-spacing-2 text-uppercase margin-one no-margin-lr display-block alt-font">Treatments</span>
    </div>
    <!-- end counter item -->
    <!-- counter item -->
    <div class="col-md-3 col-sm-6 counter-style1 text-center">
        <span class="timer counter-number alt-font" data-to="166" data-speed="7000"></span>
        <span class="text-small letter-spacing-2 text-uppercase margin-one no-margin-lr display-block alt-font">Clients</span>
    </div>
    <!-- end counter item -->
</div>
<!-- end counter -->
                                        

NoteMany examples were shown in elements.html page.

<div class="wow bounceInUp">
  Content to Reveal Here
</div>
                                                

<section class="wow slideInLeft" data-wow-duration="1200ms" data-wow-delay="500ms">
    ...
</section>
                                                

<!-- section -->
<section class="bg-white wow fadeIn">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                ...
            </div>
        </div>
    </div>
</section>
<!-- end section -->
                                                

<!-- section -->
<section class="bg-black wow fadeIn">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                ...
            </div>
        </div>
    </div>
</section>
<!-- end section -->
                                                

<!-- parallax section -->
<section class="parallax2 parallax-fix">
    <img class="parallax-background-img" src="images/event-img1.jpg" alt="" />
    <div class="opacity-full bg-deep-blue2"></div>
    <div class="container full-screen position-relative">
        <div class="slider-typography text-center">
            <div class="slider-text-middle-main">
                <div class="slider-text-middle slider-typography-option6">
                    <p class="bg-deep-blue white-text display-inline-block alt-font text-uppercase margin-three no-margin-top no-margin-lr xs-margin-eleven xs-no-margin-top xs-no-margin-lr">10<sup>th</sup> september 2015</p><br>
                    <span class="text-uppercase deep-green-text font-weight-600 alt-font">the Annual Conference</span>
                    <p class="alt-font text-uppercase white-text text-large light-gray-text margin-three no-margin-lr xs-margin-eleven xs-no-margin-top xs-no-margin-lr xs-text-small">Convention Center, Philadelphia, USA</p>
                    <a href="#register" class="highlight-button-white-border btn btn-medium button letter-spacing-1 inner-link margin-two no-margin-bottom no-margin-lr xs-margin-eleven xs-no-margin-top xs-no-margin-lr">Register now!</a>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- end parallax section -->
                                                

<!-- video section -->
<section class="wow fadeIn no-padding overflow-hidden position-relative cover-background" style="background-image:url('images/video-bg1.jpg');">
    <div class="opacity-light bg-black"></div>
    <div class="container-fuild">
        <div class="video-wrapper position-top z-index-0">
            <!-- html5 video -->
            <video autoplay muted loop class="html-video">
                <source type="video/mp4" src="video/video.mp4">
                <source type="video/ogg" src="video/video.ogg">
                <source type="video/webm" src="video/video.webm">
            </video>
            <!-- end html5 video -->
        </div>
        <!-- video over text -->
        <div class="slider-text-middle2 fadeInUp position-relative text-center padding-ten">
            <span class="white-text text-uppercase title-small xs-text-medium">Change the world one<br> digital experience.</span>
            <p class="white-text margin-two no-margin-bottom xs-text-small">Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br> Lorem Ipsum has been the industry.</p>
        </div>
        <!-- end video over text -->
    </div>
</section>
<!-- end video section -->
                                                

<ul class="grid">
    <!-- gallery item -->
    <li>
        <figure class="overflow-hidden">
            <a class="single-image-lightbox" href="images/wedding-img12.jpg"><img src="images/wedding-img12.jpg" alt=""/></a>
        </figure>
    </li>
    <!-- end gallery item -->
</ul>
                                                

<script type="text/javascript">
 $(document).ready(function () {
$('.single-image-lightbox').magnificPopup({
        type: 'image',
        closeOnContentClick: true,
        fixedContentPos: true,
        closeBtnInside: true,
        mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
        image: {
            verticalFit: true,
        },
        zoom: {
            enabled: true,
            duration: 300 // don't foget to change the duration also in CSS
        }
    });
});
</script>
                                                

<div class="row">
    <div class="xs-text-center clearfix">
        <div class="col-md-12 grid-gallery work-2col overflow-hidden">
            <ul class="masonry-items grid lightbox-gallery">
                <!-- gallery item -->
                <li>
                    <figure class="overflow-hidden">
                        <a href="images/wedding-img8.jpg" title="Lightbox gallery - 2 Columns"><img src="images/wedding-img8.jpg" alt=""/></a>
                    </figure>
                </li>
                <!-- end gallery item -->
                <!-- gallery item -->
                <li>
                    <figure class="overflow-hidden">
                        <a href="images/wedding-img9.jpg" title="Lightbox gallery - 2 Columns"><img src="images/wedding-img9.jpg" alt=""/></a>
                    </figure>
                </li>
                <!-- end gallery item -->
                <!-- gallery item -->
                <li>
                    <figure class="overflow-hidden">
                        <a href="images/wedding-img10.jpg" title="Lightbox gallery - 2 Columns"><img src="images/wedding-img10.jpg" alt=""/></a>
                    </figure>
                </li>
                <!-- end gallery item -->
                <!-- gallery item -->
                <li>
                    <figure class="overflow-hidden">
                        <a href="images/wedding-img11.jpg" title="Lightbox gallery - 2 Columns"><img src="images/wedding-img11.jpg" alt=""/></a>
                    </figure>
                </li>
                <!-- end gallery item -->
            </ul>
        </div>
    </div>
</div>
                                                

<script type="text/javascript">
 $(document).ready(function () {
    $('.lightbox-gallery').magnificPopup({
        delegate: 'a',
        type: 'image',
        tLoading: 'Loading image #%curr%...',
        mainClass: 'mfp-fade',
        fixedContentPos: true,
        closeBtnInside: true,
        gallery: {
            enabled: true,
            navigateByImgClick: true,
            preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
        }
    });
  });
</script>
                                                

<div class="row">
    <div class="col-md-12 grid-gallery work-2col zoom-gallery overflow-hidden">
        <ul class="grid">
            <!-- gallery item -->
            <li>
                <figure class="overflow-hidden">
                    <a href="images/travel-img17.jpg" title="Lightbox Gallery - Zoom Animation"><img src="images/travel-img17.jpg" alt=""/></a>
                </figure>
            </li>
            <!-- end gallery item -->
            <!-- gallery item -->
            <li>
                <figure class="overflow-hidden">
                    <a href="images/travel-img18.jpg" title="Lightbox Gallery - Zoom Animation"><img src="images/travel-img18.jpg" alt=""/></a>
                </figure>
            </li>
            <!-- end gallery item -->
            <!-- gallery item -->
            <li>
                <figure class="overflow-hidden">
                    <a href="images/travel-img19.jpg" title="Lightbox Gallery - Zoom Animation"><img src="images/travel-img19.jpg" alt=""/></a>
                </figure>
            </li>
            <!-- end gallery item -->
            <!-- gallery item -->
            <li>
                <figure class="overflow-hidden">
                    <a href="images/travel-img20.jpg" title="Lightbox Gallery - Zoom Animation"><img src="images/travel-img20.jpg" alt=""/></a>
                </figure>
            </li>
            <!-- end gallery item -->
        </ul>
    </div>
</div>
                                                

<script type="text/javascript">
    $(document).ready(function () {
        $('.zoom-gallery').magnificPopup({
        delegate: 'a',
        type: 'image',
        mainClass: 'mfp-with-zoom mfp-img-mobile',
        fixedContentPos: true,
        closeBtnInside: true,
        image: {
            verticalFit: true,
            titleSrc: function (item) {
                return item.el.attr('title');
            }
        },
        gallery: {
            enabled: true
        },
        zoom: {
            enabled: true,
            duration: 300, // don't foget to change the duration also in CSS
            opener: function (element) {
                return element.find('img');
            }
        }

    });
});
</script>
                                                

<div class="row">
    <div class="col-md-12 col-sm-12">
        <div class="slider-text-middle2 position-relative text-center">
            <!-- headline -->
            <span class="black-text title-large text-uppercase display-block alt-font margin-eight no-margin-top no-margin-lr">Change the world one<br> digital experience.</span>
            <!-- end headline -->
            <!-- button-->
            <a class="btn button-reveal button-reveal-black popup-with-form no-margin" href="#popup-form"><i class="fa fa-plus"></i><span>Open Form</span></a>
            <!-- end button -->
            <!-- form -->
            <form id="popup-form" class="white-popup-block mfp-hide">
                <div class="col-lg-3 col-md-5 col-sm-7 center-col text-center">
                    <span class="title-large text-uppercase black-text margin-ten no-margin-lr no-margin-top alt-font display-block">Change the world one digital experience.</span>
                    <!-- input -->
                    <input type="text" placeholder="Your Name" name="name">
                    <!-- end input -->
                    <!-- input  -->
                    <input type="text" placeholder="Your Email" name="email">
                    <!-- end input -->
                    <!-- textarea  -->
                    <textarea placeholder="Your Message" name="comment"></textarea>
                    <!-- end textarea  -->
                    <!-- required  -->
                    <span class="required margin-eleven no-margin-lr no-margin-top">*Please complete all fields correctly</span>
                    <!-- end required  -->
                    <!-- button  -->
                    <input type="button" class="btn btn-black no-margin-bottom" value="send message" name="send message">
                    <!-- end button  -->
                </div>
            </form>
            <!-- end form -->
        </div>
    </div>
</div>
                                                

<script type="text/javascript">
 $(document).ready(function () {
    $('.popup-with-form').magnificPopup({
        type: 'inline',
        preloader: false,
        closeBtnInside: true,
        fixedContentPos: true,
        focus: '#name',
        // When elemened is focused, some mobile browsers in some cases zoom in
        // It looks not nice, so we disable it:
        callbacks: {
            beforeOpen: function () {
                if ($(window).width() < 700) {
                    this.st.focus = false;
                } else {
                    this.st.focus = '#name';
                }
            }
        }
    });
    });
</script>
                                                

<div class="row">
    <!-- video popup -->
    <div class="col-md-7 col-sm-7 center-col text-center">
        <p class="text-large text-uppercase alt-font">In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered.</p><br>
        <a class="highlight-button btn btn-small button popup-youtube no-margin-right" href="https://www.youtube.com/watch?v=mcixldqDIEQ">Open YouTube video</a><br>
    </div>
    <!-- end video popup -->
</div>
                                                

<script type="text/javascript">
$(document).ready(function () {    
$('.popup-youtube, .popup-vimeo, .popup-googlemap').magnificPopup({
        disableOn: 700,
        type: 'iframe',
        mainClass: 'mfp-fade',
        removalDelay: 160,
        preloader: false,
        fixedContentPos: true
    });
     });
</script>
                                                

<div class="row">
    <!-- video popup -->
    <div class="col-md-7 col-sm-7 center-col text-center">
        <p class="text-large text-uppercase alt-font">In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered.</p><br>
        <a class="highlight-button btn btn-small button popup-vimeo margin-eight no-margin-lr" href="https://player.vimeo.com/video/75976293">Open Vimeo video</a><br>
    </div>
    <!-- end video popup -->
</div>
                                                

<script type="text/javascript">
$(document).ready(function () {    
$('.popup-youtube, .popup-vimeo, .popup-googlemap').magnificPopup({
        disableOn: 700,
        type: 'iframe',
        mainClass: 'mfp-fade',
        removalDelay: 160,
        preloader: false,
        fixedContentPos: true
    });
     });
</script>
                                                

<div class="row">
    <!-- video popup -->
    <div class="col-md-7 col-sm-7 center-col text-center">
        <p class="text-large text-uppercase alt-font">In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered.</p><br>
        <a class="highlight-button btn btn-small button popup-googlemap no-margin-right" href="https://maps.google.com/maps?q=221B+Baker+Street,+London,+United+Kingdom&hl=en&t=v&hnear=221B+Baker+St,+London+NW1+6XE,+United+Kingdom">Open Google Map</a>
    </div>
    <!-- end video popup -->
</div>
                                                

<script type="text/javascript">
$(document).ready(function () {    
$('.popup-youtube, .popup-vimeo, .popup-googlemap').magnificPopup({
        disableOn: 700,
        type: 'iframe',
        mainClass: 'mfp-fade',
        removalDelay: 160,
        preloader: false,
        fixedContentPos: true
    });
     });
</script>
                                                

<!-- ajax popup -->
<div class="row">
    <div class="col-md-7 col-sm-7 center-col text-center">
        <p class="text-large text-uppercase alt-font">You have full control of what is displayed in popup, align it to any side via CSS, enable or disable scroll on right side of window - whatever.</p><br>
        <a class="highlight-button-dark btn btn-medium button no-margin-right ajax-popup" href="ajax-page.html">Load content via ajax</a>
    </div>
</div>
<!-- ajax popup -->
                                                

<script type="text/javascript">
    $(document).ready(function () {
        $('.ajax-popup').magnificPopup({
        type: 'ajax',
        alignTop: true,
        fixedContentPos: true,
        overflowY: 'scroll', // as we know that popup content is tall we set scroll overflow by default to avoid jump
        callbacks: {
            open: function () {
                $('.navbar .collapse').removeClass('in');
                $('.navbar a.dropdown-toggle').addClass('collapsed');
            }
        }
    });
    });
</script>
                                                

<!-- time -->
<div  id="counter-event" enddate="2015/12/29 12:00:00" class="white-text alt-font center-col margin-eight no-margin-lr no-margin-bottom"></div>
<!-- end time -->
                                                

Portfolio

Brando provides a very elegant way to showcase your work. Setting up Portfolio is simple. Please use the following codes:

Setting up Portfolio Filter:

<!-- filter navigation -->
<ul class="portfolio-filter nav nav-tabs no-border portfolio-filter-tab alt-font text-uppercase letter-spacing-1 margin-seven no-margin-lr no-margin-bottom xs-margin-one-half xs-no-margin-bottom xs-no-margin-lr">
    <li class="nav active xs-display-inline "><a href="#" data-filter="*" class="xs-display-inline">All</a></li>
    <li class="nav xs-display-inline "><a href="#" data-filter=".magento" class="xs-display-inline">Magento</a></li>
    <li class="nav xs-display-inline "><a href="#" data-filter=".jquery" class="xs-display-inline">Jquery</a></li>
    <li class="nav xs-display-inline "><a href="#" data-filter=".wordpress" class="xs-display-inline">Wordpress</a></li>
    <li class="nav xs-display-inline "><a href="#" data-filter=".html" class="xs-display-inline">HTML</a></li>
</ul>
<!-- end filter navigation -->
                                        

Setting up Portfolio Columns and Items:

You can change portfolio columns by changing class of portfolio main DIV to work-2col, work-3col, work-4col and work-5col as per the columns you need. You can add data filter class name in portfolio LI item as per the filter category above. Below is the portfolio section code for your reference:

<section id="work" class="work-4col wow fadeIn">
    <div class="container">
        <div class="row">
            <!-- section title -->
            <div class="col-lg-5 col-md-12 col-sm-12 md-text-center">
                <h2 class="alt-font font-weight-600 title-thick-underline border-color-fast-yellow display-inline-block letter-spacing-2">Latest Work</h2>
            </div>
            <!-- end section title -->
            <div class="col-lg-7 col-md-12 text-right display-inline md-text-center md-margin-five md-no-margin-lr md-no-margin-bottom ">
                <!-- filter navigation -->
                <ul class="portfolio-filter nav nav-tabs no-border portfolio-filter-tab alt-font text-uppercase letter-spacing-1">
<li class="nav active xs-display-inline xs-width-100 xs-text-center"><a href="#" data-filter="*" class="position-relative xs-display-inline">All</a></li>
<li class="nav xs-display-inline xs-width-100 xs-text-center"><a href="#" data-filter=".design" class="position-relative xs-display-inline">Design</a></li>
<li class="nav xs-display-inline xs-width-100 xs-text-center"><a href="#" data-filter=".graphics" class="position-relative xs-display-inline">Graphics</a></li>
<li class="nav xs-display-inline xs-width-100 xs-text-center"><a href="#" data-filter=".branding" class="position-relative xs-display-inline">Branding</a></li>
<li class="nav xs-display-inline xs-width-100 xs-text-center"><a href="#" data-filter=".photography" class="position-relative xs-display-inline">Photography</a></li>
                </ul>
                <!-- end filter navigation -->
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="grid-gallery grid-style1 overflow-hidden">
                <div class="tab-content">
                    <ul class="masonry-items grid">
                        <!-- portfolio item -->
                        <li class="design">
                            <figure>
                                <div class="gallery-img">
                                    <a class="work-details-popup"><img src="images/work-1.jpg" alt=""></a>
                                </div>
                                <figcaption>
                                    <h3 class="alt-font text-uppercase letter-spacing-2 xs-no-padding-lr">Herbal Beauty Salon</h3>
                                    <div class="grid-style1-border"></div>
                                </figcaption>
                            </figure>
                            <!-- details popup -->
                            <div class="popup-info" >
                                <div class="popup-main bg-white">
                                    ...
                                </div>
                                <!-- end details popup -->
                        </li>
                        <!-- end portfolio item -->
                        <!-- portfolio item -->
                        <li class="graphics">
                            <figure>
                                <div class="gallery-img">
                                    <a class="work-details-popup"><img src="images/work-2.jpg" alt=""></a>
                                </div>
                                <figcaption>
                                    <h3 class="alt-font text-uppercase letter-spacing-2 xs-no-padding-lr">Tailoring Interior</h3>
                                    <div class="grid-style1-border"></div>
                                </figcaption>
                            </figure>
                            <!-- details popup -->
                            <div class="popup-info">
                                <div class="popup-main bg-white">
                                    <!-- slider-->
                                    ...
                                </div>
                            </div>
                            <!-- end details popup -->
                        </li>
                        <!-- end portfolio item -->
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
                                        

Portfolio Layout

Brando includes different types of portfolio layout as mentioned below to setup your own portfolio as per your requirement:

• Portfolio Grid
• Portfolio Gutter With Left Filter Navigation
• Portfolio Grid with Title
• Portfolio Masonry

Portfolio Grid

<section id="work" class="work-4col wow fadeIn">
    <div class="container">
        <div class="row">
            <!-- section title -->
            <div class="col-lg-5 col-md-12 col-sm-12 md-text-center">
                <h2 class="alt-font font-weight-600 title-thick-underline border-color-fast-yellow display-inline-block letter-spacing-2">Latest Work</h2>
            </div>
            <!-- end section title -->
            <div class="col-lg-7 col-md-12 text-right display-inline md-text-center md-margin-five md-no-margin-lr md-no-margin-bottom ">
                <!-- filter navigation -->
                <ul class="portfolio-filter nav nav-tabs no-border portfolio-filter-tab alt-font text-uppercase letter-spacing-1">
<li class="nav active xs-display-inline xs-width-100 xs-text-center"><a href="#" data-filter="*" class="position-relative xs-display-inline">All</a></li>
<li class="nav xs-display-inline xs-width-100 xs-text-center"><a href="#" data-filter=".design" class="position-relative xs-display-inline">Design</a></li>
<li class="nav xs-display-inline xs-width-100 xs-text-center"><a href="#" data-filter=".graphics" class="position-relative xs-display-inline">Graphics</a></li>
<li class="nav xs-display-inline xs-width-100 xs-text-center"><a href="#" data-filter=".branding" class="position-relative xs-display-inline">Branding</a></li>
<li class="nav xs-display-inline xs-width-100 xs-text-center"><a href="#" data-filter=".photography" class="position-relative xs-display-inline">Photography</a></li>
                </ul>
                <!-- end filter navigation -->
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="grid-gallery grid-style1 overflow-hidden">
                <div class="tab-content">
                    <ul class="masonry-items grid">
                        <!-- portfolio item -->
                        <li class="design">
                            <figure>
                                <div class="gallery-img">
                                    <a class="work-details-popup"><img src="images/work-1.jpg" alt=""></a>
                                </div>
                                <figcaption>
                                    <h3 class="alt-font text-uppercase letter-spacing-2 xs-no-padding-lr">Herbal Beauty Salon</h3>
                                    <div class="grid-style1-border"></div>
                                </figcaption>
                            </figure>
                            <!-- details popup -->
                            <div class="popup-info" >
                                <div class="popup-main bg-white">
                                    ...
                                </div>
                                <!-- end details popup -->
                        </li>
                        <!-- end portfolio item -->
                        <!-- portfolio item -->
                        <li class="graphics">
                            <figure>
                                <div class="gallery-img">
                                    <a class="work-details-popup"><img src="images/work-2.jpg" alt=""></a>
                                </div>
                                <figcaption>
                                    <h3 class="alt-font text-uppercase letter-spacing-2 xs-no-padding-lr">Tailoring Interior</h3>
                                    <div class="grid-style1-border"></div>
                                </figcaption>
                            </figure>
                            <!-- details popup -->
                            <div class="popup-info">
                                <div class="popup-main bg-white">
                                    <!-- slider-->
                                    ...
                                </div>
                            </div>
                            <!-- end details popup -->
                        </li>
                        <!-- end portfolio item -->
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
                                        

NoteMany examples were shown in index.html page.

Portfolio Gutter With Left Filter Navigation

<section id="portfolio" class="wow fadeIn work-2col gutter-medium">
    <div class="container">
        <div class="row">
            <!-- section title -->
            <div class="col-md-12 col-sm-12 xs-text-center">
                <span class="title-sideline text-uppercase title-large alt-font black-text font-weight-600 border-color-fast-pink-dark">Portfolio</span>
            </div>
            <!-- end section title -->
        </div>
        <div class="row">
            <div class="margin-eleven no-margin-bottom no-margin-lr">
                <div class="col-md-3 col-sm-12 text-center xs-margin-eleven xs-no-margin-top xs-no-margin-lr">
                    <!-- filter navigation -->
                    <ul class="portfolio-filter sm-text-small nav nav-tabs no-border portfolio-filter-tab-style-5 alt-font text-uppercase letter-spacing-1 text-large">
                        <li class="nav active xs-display-inline xs-width-100 xs-text-center"><a href="#" data-filter="*" class="position-relative xs-display-inline">All</a></li>
                        <li class="nav xs-display-inline xs-width-100 xs-text-center"><a href="#" data-filter=".design" class="position-relative xs-display-inline">Design</a></li>
                        <li class="nav xs-display-inline xs-width-100 xs-text-center"><a href="#" data-filter=".graphics" class="position-relative xs-display-inline">Graphics</a></li>
                        <li class="nav xs-display-inline xs-width-100 xs-text-center"><a href="#" data-filter=".branding" class="position-relative xs-display-inline">Branding</a></li>
                        <li class="nav xs-display-inline xs-width-100 xs-text-center"><a href="#" data-filter=".photography" class="position-relative xs-display-inline">Photography</a></li>
                    </ul>
                    <!-- end filter navigation -->
                </div>
                <div class="col-md-9 col-sm-12">
                    <div class="grid-gallery grid-style1 overflow-hidden">
                        <div class="tab-content personal-tab-content">
                            <ul class="masonry-items grid">
                                <!-- portfolio item -->
                                <li class="photography branding">
                                    <figure>
                                        <div class="gallery-img"><a class="work-details-popup"><img src="images/personal-img5.jpg" alt=""></a></div>
                                        <figcaption>
                                            <h3 class="text-large alt-font xs-margin-two xs-no-margin-lr text-uppercase letter-spacing-2 md-no-padding sm-no-padding">Herbal Beauty Salon<span class="text-small gray-text alt-font text-uppercase letter-spacing-2 display-block">Photography</span></h3>
                                        </figcaption>
                                    </figure>
                                    <!-- details popup -->
                                    <div class="popup-info">
                                        <div class="popup-main bg-white">
                                            ...
                                        </div>
                                    </div>
                                    <!-- end details popup -->
                                </li>
                                <!-- end portfolio item -->
                                <!-- portfolio item -->
                                <li class="html design branding">
                                    <figure>
                                        <div class="gallery-img"><a class="work-details-popup"><img src="images/personal-img6.jpg" alt=""></a></div>
                                        <figcaption>
                                            <h3 class="text-large alt-font xs-margin-two xs-no-margin-lr text-uppercase letter-spacing-2 md-no-padding sm-no-padding">Tailoring Interior<span class="text-small gray-text alt-font text-uppercase letter-spacing-2 display-block">Branding</span></h3>
                                        </figcaption>
                                    </figure>
                                    <!-- details popup -->
                                    <div class="popup-info">
                                        <div class="popup-main bg-white">
                                            ...
                                        </div>
                                    </div>
                                    <!-- end details popup -->
                                </li>
                                <!-- end portfolio item -->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
                                        

NoteMany examples were shown in personal.html page.

Portfolio Grid With Title

<section id="packages" class="wow fadeIn work-4col work-with-title gutter transparent-figcaption">
    <div class="container">
        <!-- section title -->
        <div class="row">
            <div class="col-md-12 col-sm-12 text-center">
                <span class="alt-font text-uppercase title-extra-large deep-orange-text letter-spacing-1">Tour Packages</span>
                <span class="text-large letter-spacing-1 margin-one display-block text-uppercase light-gray-text alt-font">Thanks You Trips! This Is Amazing Travel!</span>
            </div>
        </div>
        <!-- end section title -->
    </div>
    <div class="container-fluid">
        <div class="row margin-nine no-margin-lr no-margin-bottom">
            <div class="col-md-12 center-col margin-lr-auto text-center margin-five no-margin-lr no-margin-top sm-padding-nine sm-no-margin-lr sm-no-padding-top xs-padding-two xs-no-margin-lr xs-no-padding-top">
                <!-- filter navigation -->
                <ul class="portfolio-filter nav nav-tabs portfolio-filter-tab-style-3 alt-font text-uppercase letter-spacing-1 xs-margin-eleven xs-no-margin-lr">
                    <li class="nav active xs-display-inline"><a href="#" class="xs-display-inline" data-filter="*">All</a></li>
                    <li class="nav xs-display-inline"><a href="#" class="xs-display-inline" data-filter=".holidays">Holidays</a></li>
                    <li class="nav xs-display-inline"><a href="#" class="xs-display-inline" data-filter=".family">Family</a></li>
                    <li class="nav xs-display-inline"><a href="#" class="xs-display-inline" data-filter=".honeymoon">Honeymoon</a></li>
                    <li class="nav xs-display-inline"><a href="#" class="xs-display-inline" data-filter=".safari">Safari</a></li>
                </ul>
                <!-- end filter navigation -->
            </div>
        </div>
        <div class="row">
            <div class="grid-gallery grid-style3 overflow-hidden">
                <div class="tab-content">
                    <ul class="masonry-items grid">
                        <!-- packages item -->
                        <li class="safari family honeymoon">
                            <figure>
                                <div class="gallery-img"><a href="#" class="work-details-popup"><img src="images/travel-img17.jpg" alt=""/></a></div>
                                <figcaption>
                                    <h3 class="text-large alt-font text-uppercase letter-spacing-2">Best of Paris</h3>
                                    <span class="text-small alt-font text-uppercase letter-spacing-2 font-weight-100 display-block light-gray-text">8 Days / 7 Nights - $2500</span>
                                    <div class="explore-now bg-deep-orange text-uppercase alt-font"><a href="#" class="work-details-popup">Explore Now</a></div>
                                </figcaption>
                            </figure>
                            <!-- details popup -->
                            <div class="popup-info">
                                <div class="popup-main bg-white">
                                    ...
                                </div>
                            </div>
                            <!-- end details popup -->
                        </li>
                        <!-- end packages item -->
                        <!-- packages item -->
                        <li class="safari holidays honeymoon">
                            <figure>
                                <div class="gallery-img"><a href="#" class="work-details-popup"><img src="images/travel-img18.jpg" alt=""/></a></div>
                                <figcaption>
                                    <h3 class="text-large alt-font text-uppercase letter-spacing-2">Bangkok Pattaya</h3>
                                    <span class="text-small alt-font text-uppercase letter-spacing-2 font-weight-100 display-block light-gray-text">2 Days / 3 Nights - $580</span>
                                    <div class="explore-now bg-deep-orange text-uppercase alt-font"><a href="#" class="work-details-popup">Explore Now</a></div>
                                </figcaption>
                            </figure>
                            <!-- details popup -->
                            <div class="popup-info">
                                <div class="popup-main bg-white">
                                    ...
                                </div>
                            </div>
                            <!-- end details popup -->
                        </li>
                        <!-- end packages item -->
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
                                        

NoteMany examples were shown in travel.html page.

Portfolio Masonry

<section id="portfolio" class="masonry work-3col gutter-wide wow fadeIn">
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center margin-twenty no-margin-lr no-margin-top">
                <!-- filter navigation -->
                <ul class="portfolio-filter nav nav-tabs no-border portfolio-filter-tab-style-4 alt-font text-large text-uppercase letter-spacing-1">
                    <li class="nav active xs-display-inline"><a href="#" data-filter="*" class="position-relative xs-display-inline">All</a></li>
                    <li class="nav xs-display-inline"><a href="#" data-filter=".people" class="position-relative xs-display-inline">People</a></li>
                    <li class="nav xs-display-inline"><a href="#" data-filter=".nature" class="position-relative xs-display-inline">Nature</a></li>
                    <li class="nav xs-display-inline"><a href="#" data-filter=".wildlife" class="position-relative xs-display-inline">Wildlife</a></li>
                    <li class="nav xs-display-inline"><a href="#" data-filter=".objects" class="position-relative xs-display-inline">Objects</a></li>
                </ul>
                <!-- end filter navigation -->
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-12 grid-gallery grid-style4 overflow-hidden">
                <div class="tab-content">
                    <ul class="masonry-items grid lightbox-gallery">
                        <!-- portfolio item -->
                        <li class="objects nature wildlife">
                            <figure class="overflow-hidden">
                                <div class="gallery-img bg-fast-blue-green-gradiant"><a href="images/photography-img13.jpg"><img src="images/photography-img13.jpg" alt=""></a></div>
                                <figcaption>
                                    <h3 class="alt-font text-uppercase letter-spacing-2">Herbal Salon</h3>
                                </figcaption>
                            </figure>
                        </li>
                        <!-- end portfolio item -->
                        <!-- portfolio item -->
                        <li class="objects people wildlife">
                            <figure class="overflow-hidden">
                                <div class="gallery-img bg-fast-blue-green-gradiant"><a href="images/photography-img14.jpg"><img src="images/photography-img14.jpg" alt=""></a></div>
                                <figcaption>
                                    <h3 class="alt-font text-uppercase letter-spacing-2">Tailoring Interior</h3>
                                </figcaption>
                            </figure>
                        </li>
                        <!-- end portfolio item -->
                        <!-- portfolio item -->
                        <li class="nature people wildlife">
                            <figure class="overflow-hidden">
                                <div class="gallery-img bg-fast-blue-green-gradiant"><a href="images/photography-img15.jpg"><img src="images/photography-img15.jpg" alt=""></a></div>
                                <figcaption>
                                    <h3 class="alt-font text-uppercase letter-spacing-2">Pixflow Studio</h3>
                                </figcaption>
                            </figure>
                        </li>
                        <!-- end portfolio item -->
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
                                        

NoteMany examples were shown in photography.html page.

Portfolio Item Link

There are different types of portfolio item linking available in Brando as mentioned below:

Open External Page

<div class="row">
    <div class="grid-gallery grid-style1 overflow-hidden">
        <div class="tab-content">
            <ul class="masonry-items grid">
                <!-- portfolio item -->
                <li class="html jquery wordpress">
                    <figure>
                        <div class="gallery-img">
                            <a href="blog.html"><img src="images/work-1.jpg" alt=""></a>
                        </div>
                        <figcaption>
                            <h3 class="alt-font text-uppercase letter-spacing-2 xs-no-padding-lr">Herbal Beauty Salon</h3>
                            <div class="grid-style1-border"></div>
                        </figcaption>
                    </figure>
                </li>
                <!-- end portfolio item -->
            </ul>
        </div>
    </div>
</div>
                                        

Open Lightbox Photo Gallery

<div class="row">
    <div class="col-md-12 grid-gallery overflow-hidden">
        <div class="tab-content">
            <ul class="masonry-items grid lightbox-gallery">
                <!-- photo gallery item -->
                <li>
                    <figure class="overflow-hidden">
                        <a href="images/wedding-img8.jpg" title="We are shaped and fashioned by what we love."><img src="images/wedding-img8.jpg" alt=""></a>
                    </figure>
                </li>
                <!-- end photo gallery item -->
                <!-- photo gallery item -->
                <li>
                    <figure class="overflow-hidden">
                        <a href="images/wedding-img9.jpg" title="The art of love is largely the art of persistence."><img src="images/wedding-img9.jpg" alt=""></a>
                    </figure>
                </li>
                <!-- end photo gallery item -->
            </ul>
        </div>
    </div>
</div>
                                        

Open Video Lightbox

<div class="row">
    <div class="col-md-12 grid-gallery overflow-hidden">
        <div class="tab-content">
            <ul class="masonry-items grid">
                <!-- photo gallery item -->
                <li>
                    <figure class="overflow-hidden">
                        <a href="https://www.youtube.com/watch?v=mcixldqDIEQ" class="popup-youtube"><img src="images/wedding-img8.jpg" alt=""></a>
                    </figure>
                </li>
                <!-- end photo gallery item -->
            </ul>
        </div>
    </div>
</div>
                                        

Open Ajax Popup

<div class="row">
    <div class="col-md-12 grid-gallery overflow-hidden">
        <div class="tab-content">
            <ul class="masonry-items grid">
                <!-- photo gallery item -->
                <li>
                    <figure class="overflow-hidden">
                        <a href="ajax-page.html" class="ajax-popup"><img src="images/wedding-img8.jpg" alt=""></a>
                    </figure>
                </li>
                <!-- end photo gallery item -->
            </ul>
        </div>
    </div>
</div>
                                        

Blog

Our template contains all required pages to create fully working and oriented blog. Blog list presented in several forms: masonry, fullwidth, with sidebars. Also we added many types of posts, standard blog.

Blog Setup

<!-- blog item -->
<article class="col-md-4 col-sm-4 xs-margin-ten xs-no-margin-lr xs-no-margin-top">
    <div class="post-thumbnail overflow-hidden">
        <a href="blog-details.html"><img src="images/wedding-img22.jpg" alt=""/></a>
    </div>
    <div class="post-details margin-fifteen no-margin-lr no-margin-bottom">
        <span class="text-extra-small post-categories text-uppercase letter-spacing-1 alt-font bg-black display-inline-block"><a href="blog.html" class="white-text">Luxury Spa</a></span>
        <span class="text-large text-uppercase display-block alt-font margin-seven no-margin-lr sm-text-medium xs-text-medium alt-font font-weight-600"><a href="blog-details.html" class="dark-gray-text">A beautiful woman should break her mirror early.</a></span>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
        <div class="separator-line-full bg-mid-gray3 margin-thirteen no-margin-lr"></div>
        <span class="text-small text-uppercase alt-font light-gray-text"><a href="#" class="light-gray-text">26 July 2015</a>   /   Posted By<a href="blog.html" class="light-gray-text"> Nathan Ford</a></span>
    </div>
</article>
<!-- end blog item -->
                                        

Blog Layout

<div class="row">
    <div class="col-md-8 col-sm-8 blog-listing">
        <!-- blog item -->
        <article>
            <div class="col-md-2 col-sm-2 text-center alt-font overflow-hidden no-padding-left sm-no-padding md-no-padding">
                <div class="post-date xs-margin-lr-auto xs-no-margin-top"><span>13</span>Mar 2015</div>
                <div class="blog-sharing"><a href="https://www.facebook.com/" target="_blank"><i class="fa fa-facebook"></i></a><a href="https://twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a><a href="https://plus.google.com/" target="_blank"><i class="fa fa-google-plus"></i></a><a href="https://dribbble.com/" target="_blank"><i class="fa fa-dribbble"></i></a></div>
            </div>
            <div class="col-md-10 col-sm-10 post-details no-padding-right margin-twenty-nine no-margin-lr no-margin-top xs-no-padding-left xs-margin-twenty-three xs-no-margin-lr xs-no-margin-top">
                <span class="alt-font display-block title-small xs-text-extra-large sm-text-medium margin-six no-margin-lr no-margin-top xs-text-center"><a href="blog-details.html">Standard post with preview image</a></span>
                <a href="blog-details.html"><img src="images/blog-img5.jpg" alt=""/></a>
                <p class="margin-eight no-margin-lr xs-margin-four xs-no-margin-lr">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type & scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap intoelectronic typesetting, remaining essentially unchanged.</p>
                <div class="col-md-8 col-sm-12 no-padding blog-listing-link xs-margin-eight xs-no-margin-lr xs-no-margin-top xs-text-center">
                    <a href="#" class="text-small dark-gray-text text-uppercase alt-font">Sara Smith</a>
                    <a href="#" class="text-small dark-gray-text text-uppercase alt-font">Design Tutorials </a>
                    <a href="#" class="text-small dark-gray-text text-uppercase alt-font">67 Comments</a>
                    <div class="bg-fast-yellow separator-line-thick no-margin-lr md-margin-eleven md-no-margin-lr no-margin-bottom xs-display-none"></div>
                </div>
                <div class="col-md-4 col-sm-12 no-padding text-right sm-text-left xs-text-center">
                    <a href="blog-details.html" class="btn-black btn btn-very-small no-margin">Continue Reading</a>
                </div>
            </div>
        </article>
        <!-- end blog item -->
        <!-- blog item -->
        <article>
            <div class="col-md-2 col-sm-2 text-center alt-font overflow-hidden no-padding-left sm-no-padding md-no-padding">
                <div class="post-date xs-margin-lr-auto"><span>24</span>Mar 2015</div>
                <div class="blog-sharing"><a href="https://www.facebook.com/" target="_blank"><i class="fa fa-facebook"></i></a><a href="https://twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a><a href="https://plus.google.com/" target="_blank"><i class="fa fa-google-plus"></i></a><a href="https://dribbble.com/" target="_blank"><i class="fa fa-dribbble"></i></a></div>
            </div>
            <div class="col-md-10 col-sm-10 post-details no-padding-right margin-twenty-nine no-margin-lr no-margin-top xs-no-padding-left xs-margin-twenty-three xs-no-margin-lr xs-no-margin-top">
                <span class="alt-font display-block title-small xs-text-extra-large sm-text-medium margin-six no-margin-lr no-margin-top xs-text-center"><a href="blog-details.html">Standard post with preview picture images slider</a></span>
                <div class="owl-slider-full owl-carousel light-pagination">
                    <!-- slider item -->
                    <div class="item">
                        <img src="images/blog-img2.jpg" alt=""/>
                    </div>
                    <!-- end slider item -->
                    <!-- slider item -->
                    <div class="item">
                        <img src="images/blog-img3.jpg" alt=""/>
                    </div>
                    <!-- end slider item -->
                    <!-- slider item -->
                    <div class="item">
                        <img src="images/blog-img4.jpg" alt=""/>
                    </div>
                    <!-- end slider item -->
                </div>
                <p class="margin-eight no-margin-lr">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type & scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap intoelectronic typesetting, remaining essentially unchanged.</p>
                <div class="col-md-8 col-sm-12 no-padding blog-listing-link xs-margin-eight xs-no-margin-lr xs-no-margin-top xs-text-center">
                    <a href="#" class="text-small dark-gray-text text-uppercase alt-font">Sara Smith</a>
                    <a href="#" class="text-small dark-gray-text text-uppercase alt-font">Design Tutorials </a>
                    <a href="#" class="text-small dark-gray-text text-uppercase alt-font">67 Comments</a>
                    <div class="bg-fast-yellow separator-line-thick no-margin-lr md-margin-eleven md-no-margin-lr no-margin-bottom xs-display-none"></div>
                </div>
                <div class="col-md-4 col-sm-12 no-padding text-right sm-text-left xs-text-center">
                    <a href="blog-details.html" class="btn-black btn btn-very-small no-margin">Continue Reading</a>
                </div>
            </div>
        </article>
        <!-- end blog item -->
        <!-- blog item -->
        <article>
            <div class="col-md-2 col-sm-2 text-center alt-font overflow-hidden no-padding-left sm-no-padding md-no-padding">
                <div class="post-date xs-margin-lr-auto"><span>08</span>Mar 2015</div>
                <div class="blog-sharing"><a href="https://www.facebook.com/" target="_blank"><i class="fa fa-facebook"></i></a><a href="https://twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a><a href="https://plus.google.com/" target="_blank"><i class="fa fa-google-plus"></i></a><a href="https://dribbble.com/" target="_blank"><i class="fa fa-dribbble"></i></a></div>
            </div>
            <div class="col-md-10 col-sm-10 post-details no-padding-right margin-twenty-nine no-margin-lr no-margin-top xs-no-padding-left xs-margin-twenty-three xs-no-margin-lr xs-no-margin-top">
                <span class="alt-font display-block title-small xs-text-extra-large sm-text-medium margin-six no-margin-lr no-margin-top xs-text-center"><a href="blog-details.html">This is a blockquote post</a></span>
                <div class="col-md-12 no-padding">
                    <div class="blog-image">
                        <blockquote class="bg-gray">
                            <p class="text-large ">Reading is not only informed by what’s going on with us at that moment, but also governed by how our eyes and brains work to process information. What you see and what you’re experiencing as you read these words is quite different.</p>
                        </blockquote>
                    </div>
                </div>
                <div class="col-md-8 col-sm-12 no-padding blog-listing-link xs-margin-eight xs-no-margin-lr xs-no-margin-top xs-text-center">
                    <a href="#" class="text-small dark-gray-text text-uppercase alt-font">Sara Smith</a>
                    <a href="#" class="text-small dark-gray-text text-uppercase alt-font">Design Tutorials </a>
                    <a href="#" class="text-small dark-gray-text text-uppercase alt-font">67 Comments</a>
                    <div class="bg-fast-yellow separator-line-thick no-margin-lr md-margin-eleven md-no-margin-lr no-margin-bottom xs-display-none"></div>
                </div>
                <div class="col-md-4 col-sm-12 no-padding text-right sm-text-left xs-text-center">
                    <a href="blog-details.html" class="btn-black btn btn-very-small no-margin">Continue Reading</a>
                </div>
            </div>
        </article>
        <!-- end blog item -->
    </div>
</div>
                                        

NoteMany examples were shown in blog.html page.

Blog Post Types

You can use 7 different types of post types:

• Image
• Image Slider
• Blockquotes
• Thumbs Gallery
• Embedded Video
• HTML5 Video

Image

<!-- blog item -->
<article>
    <div class="col-md-2 col-sm-2 text-center alt-font overflow-hidden no-padding-left sm-no-padding md-no-padding">
        <div class="post-date xs-margin-lr-auto xs-no-margin-top"><span>13</span>Mar 2015</div>
    </div>
    <div class="col-md-10 col-sm-10 post-details no-padding-right margin-twenty-nine no-margin-lr no-margin-top xs-no-padding-left xs-margin-twenty-three xs-no-margin-lr xs-no-margin-top">
        <span class="alt-font display-block title-small xs-text-extra-large sm-text-medium margin-six no-margin-lr no-margin-top xs-text-center"><a href="blog-details.html">Standard post with preview image</a></span>
        <a href="blog-details.html"><img src="images/blog-img5.jpg" alt=""/></a>
        <p class="margin-eight no-margin-lr xs-margin-four xs-no-margin-lr">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type & scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap intoelectronic typesetting, remaining essentially unchanged.</p>
        <div class="col-md-8 col-sm-12 no-padding blog-listing-link xs-margin-eight xs-no-margin-lr xs-no-margin-top xs-text-center">
            <a href="#" class="text-small dark-gray-text text-uppercase alt-font">Sara Smith</a>
            <a href="#" class="text-small dark-gray-text text-uppercase alt-font">Design Tutorials </a>
            <a href="#" class="text-small dark-gray-text text-uppercase alt-font">67 Comments</a>
        </div>
        <!-- social icon -->
        <div class="col-md-4 col-sm-12 no-padding text-right sm-margin-six sm-no-margin-bottom sm-no-margin-lr sm-text-left xs-text-center">
            <div class="blog-sharing"><a href="https://www.facebook.com/" target="_blank"><i class="fa fa-facebook sm-no-margin-left"></i></a><a href="https://twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a><a href="https://plus.google.com/" target="_blank"><i class="fa fa-google-plus"></i></a><a href="https://www.linkedin.com" target="_blank"><i class="fa fa-linkedin no-margin-right"></i></a></div>
        </div>
        <!-- end social icon -->
        <div class="col-md-12 col-sm-12 no-padding sm-text-left xs-text-center margin-six no-margin-lr ">
            <a href="blog-details.html" class="btn-black btn btn-very-small no-margin">Continue Reading</a>
        </div>
        <div class="col-md-12 col-sm-12 no-padding">
            <div class="bg-fast-yellow separator-line-thick no-margin-lr margin-five no-margin-bottom xs-display-none"></div>
        </div>
    </div>
</article>
<!-- end blog item -->
                                        

NoteMany examples were shown in blog.html page.

Image Slider

<!-- blog item -->
<article>
    <div class="col-md-2 col-sm-2 text-center alt-font overflow-hidden no-padding-left sm-no-padding md-no-padding">
        <div class="post-date xs-margin-lr-auto"><span>24</span>Mar 2015</div>
    </div>
    <div class="col-md-10 col-sm-10 post-details no-padding-right margin-twenty-nine no-margin-lr no-margin-top xs-no-padding-left xs-margin-twenty-three xs-no-margin-lr xs-no-margin-top">
        <span class="alt-font display-block title-small xs-text-extra-large sm-text-medium margin-six no-margin-lr no-margin-top xs-text-center"><a href="blog-details.html">Standard post with preview picture images slider</a></span>
        <div class="owl-slider-full owl-carousel light-pagination">
            <!-- slider item -->
            <div class="item">
                <img src="images/blog-img2.jpg" alt=""/>
            </div>
            <!-- end slider item -->
            <!-- slider item -->
            <div class="item">
                <img src="images/blog-img3.jpg" alt=""/>
            </div>
            <!-- end slider item -->
            <!-- slider item -->
            <div class="item">
                <img src="images/blog-img4.jpg" alt=""/>
            </div>
            <!-- end slider item -->
        </div>
        <p class="margin-eight no-margin-lr">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type & scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap intoelectronic typesetting, remaining essentially unchanged.</p>
        <div class="col-md-8 col-sm-12 no-padding blog-listing-link xs-margin-eight xs-no-margin-lr xs-no-margin-top xs-text-center">
            <a href="#" class="text-small dark-gray-text text-uppercase alt-font">Sara Smith</a>
            <a href="#" class="text-small dark-gray-text text-uppercase alt-font">Design Tutorials </a>
            <a href="#" class="text-small dark-gray-text text-uppercase alt-font">67 Comments</a>
        </div>
        <!-- social icon -->
        <div class="col-md-4 col-sm-12 no-padding text-right sm-margin-six sm-no-margin-bottom sm-no-margin-lr sm-text-left xs-text-center">
            <div class="blog-sharing"><a href="https://www.facebook.com/" target="_blank"><i class="fa fa-facebook sm-no-margin-left"></i></a><a href="https://twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a><a href="https://plus.google.com/" target="_blank"><i class="fa fa-google-plus"></i></a><a href="https://www.linkedin.com" target="_blank"><i class="fa fa-linkedin no-margin-right"></i></a></div>
        </div>
        <!-- end social icon -->
        <div class="col-md-12 col-sm-12 no-padding sm-text-left xs-text-center margin-six no-margin-lr ">
            <a href="blog-details.html" class="btn-black btn btn-very-small no-margin">Continue Reading</a>
        </div>
        <div class="col-md-12 col-sm-12 no-padding">
            <div class="bg-fast-yellow separator-line-thick no-margin-lr margin-five no-margin-bottom xs-display-none"></div>
        </div>
    </div>
</article>
<!-- end blog item -->
                                        

NoteMany examples were shown in blog.html page.

Blockquotes

<!-- blog item -->
<article>
    <div class="col-md-2 col-sm-2 text-center alt-font overflow-hidden no-padding-left sm-no-padding md-no-padding">
        <div class="post-date xs-margin-lr-auto"><span>08</span>Mar 2015</div>
    </div>
    <div class="col-md-10 col-sm-10 post-details no-padding-right margin-twenty-nine no-margin-lr no-margin-top xs-no-padding-left xs-margin-twenty-three xs-no-margin-lr xs-no-margin-top">
        <span class="alt-font display-block title-small xs-text-extra-large sm-text-medium margin-six no-margin-lr no-margin-top xs-text-center"><a href="blog-details.html">This is a blockquote post</a></span>
        <div class="col-md-12 no-padding">
            <div class="blog-image">
                <blockquote class="bg-gray">
                    <p class="text-large ">Reading is not only informed by what’s going on with us at that moment, but also governed by how our eyes and brains work to process information. What you see and what you’re experiencing as you read these words is quite different.</p>
                </blockquote>
            </div>
        </div>
        <div class="col-md-8 col-sm-12 no-padding blog-listing-link xs-margin-eight xs-no-margin-lr xs-no-margin-top xs-text-center">
            <a href="#" class="text-small dark-gray-text text-uppercase alt-font">Sara Smith</a>
            <a href="#" class="text-small dark-gray-text text-uppercase alt-font">Design Tutorials </a>
            <a href="#" class="text-small dark-gray-text text-uppercase alt-font">67 Comments</a>
        </div>
        <!-- social icon -->
        <div class="col-md-4 col-sm-12 no-padding text-right sm-margin-six sm-no-margin-bottom sm-no-margin-lr sm-text-left xs-text-center">
            <div class="blog-sharing"><a href="https://www.facebook.com/" target="_blank"><i class="fa fa-facebook sm-no-margin-left"></i></a><a href="https://twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a><a href="https://plus.google.com/" target="_blank"><i class="fa fa-google-plus"></i></a><a href="https://www.linkedin.com" target="_blank"><i class="fa fa-linkedin no-margin-right"></i></a></div>
        </div>
        <!-- end social icon -->
        <div class="col-md-12 col-sm-12 no-padding sm-text-left xs-text-center margin-six no-margin-lr ">
            <a href="blog-details.html" class="btn-black btn btn-very-small no-margin">Continue Reading</a>
        </div>
        <div class="col-md-12 col-sm-12 no-padding">
            <div class="bg-fast-yellow separator-line-thick no-margin-lr margin-five no-margin-bottom xs-display-none"></div>
        </div>
    </div>
</article>
<!-- end blog item -->
                                        

NoteMany examples were shown in blog.html page.

Thumbs Gallery

<!-- blog item -->
<article>
    <div class="col-md-2 col-sm-2 text-center alt-font overflow-hidden no-padding-left sm-no-padding md-no-padding">
        <div class="post-date xs-margin-lr-auto"><span>06</span>Mar 2015</div>
    </div>
    <div class="col-md-10 col-sm-10 post-details no-padding-right margin-twenty-nine no-margin-lr no-margin-top xs-no-padding-left xs-margin-twenty-three xs-no-margin-lr xs-no-margin-top">
        <span class="alt-font display-block title-small xs-text-extra-large sm-text-medium margin-six no-margin-lr no-margin-top xs-text-center"><a href="blog-details.html">This is a standard post with thumbs gallery</a></span>
        <div class="blog-listing wow fadeIn">
            <!-- lightbox images -->
            <div class="blog-image lightbox-gallery clearfix margin-ten no-margin-lr no-margin-top">
                <div class="col-md-4 col-sm-6 col-xs-12 no-padding"><a href="images/blog-img9.jpg"><img src="images/blog-img9.jpg" alt=""></a></div>
                <div class="col-md-4 col-sm-6 col-xs-12 no-padding"><a href="images/blog-img10.jpg"><img src="images/blog-img10.jpg" alt=""></a></div>
                <div class="col-md-4 col-sm-6 col-xs-12 no-padding"><a href="images/blog-img11.jpg"><img src="images/blog-img11.jpg" alt=""></a></div>
                <div class="col-md-4 col-sm-6 col-xs-12 no-padding"><a href="images/blog-img12.jpg"><img src="images/blog-img12.jpg" alt=""></a></div>
                <div class="col-md-4 col-sm-6 col-xs-12 no-padding"><a href="images/blog-img13.jpg"><img src="images/blog-img13.jpg" alt=""></a></div>
                <div class="col-md-4 col-sm-6 col-xs-12 no-padding"><a href="images/blog-img14.jpg"><img src="images/blog-img14.jpg" alt=""></a></div>
                <div class="col-md-4 col-sm-6 col-xs-12 no-padding"><a href="images/blog-img15.jpg"><img src="images/blog-img15.jpg" alt=""></a></div>
                <div class="col-md-4 col-sm-6 col-xs-12 no-padding"><a href="images/blog-img16.jpg"><img src="images/blog-img16.jpg" alt=""></a></div>
                <div class="col-md-4 col-sm-6 col-xs-12 no-padding"><a href="images/blog-img17.jpg"><img src="images/blog-img17.jpg" alt=""></a></div>
            </div>
            <!-- end lightbox images -->
        </div>
        <div class="col-md-12 col-sm-12 no-padding margin-eight no-margin-lr no-margin-top"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text.</p></div>
        <div class="col-md-8 col-sm-12 no-padding blog-listing-link xs-margin-eight xs-no-margin-lr xs-no-margin-top xs-text-center">
            <a href="#" class="text-small dark-gray-text text-uppercase alt-font">Sara Smith</a>
            <a href="#" class="text-small dark-gray-text text-uppercase alt-font">Design Tutorials </a>
            <a href="#" class="text-small dark-gray-text text-uppercase alt-font">67 Comments</a>
        </div>
        <!-- social icon -->
        <div class="col-md-4 col-sm-12 no-padding text-right sm-margin-six sm-no-margin-bottom sm-no-margin-lr sm-text-left xs-text-center">
            <div class="blog-sharing"><a href="https://www.facebook.com/" target="_blank"><i class="fa fa-facebook sm-no-margin-left"></i></a><a href="https://twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a><a href="https://plus.google.com/" target="_blank"><i class="fa fa-google-plus"></i></a><a href="https://www.linkedin.com" target="_blank"><i class="fa fa-linkedin no-margin-right"></i></a></div>
        </div>
        <!-- end social icon -->
        <div class="col-md-12 col-sm-12 no-padding sm-text-left xs-text-center margin-six no-margin-lr ">
            <a href="blog-details.html" class="btn-black btn btn-very-small no-margin">Continue Reading</a>
        </div>
        <div class="col-md-12 col-sm-12 no-padding">
            <div class="bg-fast-yellow separator-line-thick no-margin-lr margin-five no-margin-bottom xs-display-none"></div>
        </div>
    </div>
</article>
<!-- end blog item -->
                                        

NoteMany examples were shown in blog.html page.

Embedded Video

<!-- blog item -->
<article>
    <div class="col-md-2 col-sm-2 text-center alt-font overflow-hidden no-padding-left sm-no-padding md-no-padding">
        <div class="post-date xs-margin-lr-auto"><span>07</span>Mar 2015</div>
    </div>
    <div class="col-md-10 col-sm-10 post-details no-padding-right margin-twenty-nine no-margin-lr no-margin-top xs-margin-twenty-three xs-no-margin-lr xs-no-margin-top">
        <span class="alt-font display-block title-small xs-text-extra-large sm-text-medium margin-six no-margin-lr no-margin-top xs-text-center"><a href="blog-details.html">This is a standard post with an embedded video</a></span>
        <div class="fit-videos">
            <iframe src="https://player.vimeo.com/video/75976293" width="500" height="281"></iframe>
        </div>
        <p class="margin-eight no-margin-lr">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type & scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap intoelectronic typesetting, remaining essentially unchanged.</p>
        <div class="col-md-8 col-sm-12 no-padding blog-listing-link xs-margin-eight xs-no-margin-lr xs-no-margin-top xs-text-center">
            <a href="#" class="text-small dark-gray-text text-uppercase alt-font">Sara Smith</a>
            <a href="#" class="text-small dark-gray-text text-uppercase alt-font">Design Tutorials </a>
            <a href="#" class="text-small dark-gray-text text-uppercase alt-font">67 Comments</a>
        </div>
        <!-- social icon -->
        <div class="col-md-4 col-sm-12 no-padding text-right sm-margin-six sm-no-margin-bottom sm-no-margin-lr sm-text-left xs-text-center">
            <div class="blog-sharing"><a href="https://www.facebook.com/" target="_blank"><i class="fa fa-facebook sm-no-margin-left"></i></a><a href="https://twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a><a href="https://plus.google.com/" target="_blank"><i class="fa fa-google-plus"></i></a><a href="https://www.linkedin.com" target="_blank"><i class="fa fa-linkedin no-margin-right"></i></a></div>
        </div>
        <!-- end social icon -->
        <div class="col-md-12 col-sm-12 no-padding sm-text-left xs-text-center margin-six no-margin-lr ">
            <a href="blog-details.html" class="btn-black btn btn-very-small no-margin">Continue Reading</a>
        </div>
        <div class="col-md-12 col-sm-12 no-padding">
            <div class="bg-fast-yellow separator-line-thick no-margin-lr margin-five no-margin-bottom xs-display-none"></div>
        </div>
    </div>
</article>
<!-- end blog item -->
                                        

NoteMany examples were shown in blog.html page.

HTML5 Video

<!-- blog item -->
<article>
    <div class="col-md-2 col-sm-2 text-center alt-font overflow-hidden no-padding-left sm-no-padding md-no-padding">
        <div class="post-date xs-margin-lr-auto"><span>04</span>Mar 2015</div>
    </div>
    <div class="col-md-10 col-sm-10 post-details no-padding-right xs-no-padding-left xs-margin-twenty-three xs-no-margin-lr xs-no-margin-top">
        <span class="alt-font display-block title-small xs-text-extra-large sm-text-medium margin-six no-margin-lr no-margin-top xs-text-center"><a href="blog-details.html">This is a standard post with a HTML5 video</a></span>
        <video controls="" loop="" muted="" autoplay=""><source type="video/mp4" src="video/video.mp4"></video>
        <p class="margin-eight no-margin-lr">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type & scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap intoelectronic typesetting, remaining essentially unchanged.</p>
        <div class="col-md-8 col-sm-12 no-padding blog-listing-link xs-margin-eight xs-no-margin-lr xs-no-margin-top xs-text-center">
            <a href="#" class="text-small dark-gray-text text-uppercase alt-font">Sara Smith</a>
            <a href="#" class="text-small dark-gray-text text-uppercase alt-font">Design Tutorials </a>
            <a href="#" class="text-small dark-gray-text text-uppercase alt-font">67 Comments</a>
        </div>
        <!-- social icon -->
        <div class="col-md-4 col-sm-12 no-padding text-right sm-margin-six sm-no-margin-bottom sm-no-margin-lr sm-text-left xs-text-center">
            <div class="blog-sharing"><a href="https://www.facebook.com/" target="_blank"><i class="fa fa-facebook sm-no-margin-left"></i></a><a href="https://twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a><a href="https://plus.google.com/" target="_blank"><i class="fa fa-google-plus"></i></a><a href="https://www.linkedin.com" target="_blank"><i class="fa fa-linkedin no-margin-right"></i></a></div>
        </div>
        <!-- end social icon -->
        <div class="col-md-12 col-sm-12 no-padding sm-text-left xs-text-center margin-six no-margin-lr ">
            <a href="blog-details.html" class="btn-black btn btn-very-small no-margin">Continue Reading</a>
        </div>
        <div class="col-md-12 col-sm-12 no-padding">
            <div class="bg-fast-yellow separator-line-thick no-margin-lr margin-five no-margin-bottom xs-display-none"></div>
        </div>
    </div>
</article>
<!-- end blog item -->
                                        

NoteMany examples were shown in blog.html page.

Blog Details

Brando includes beautiful blog post page style as mentioned below:

                                            <section class="wow fadeIn">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-sm-8 blog-listing">
                <article>
                    <!-- post image -->
                    <div class="col-md-12 post-details no-padding margin-seven no-margin-lr no-margin-top">
                        <img src="images/blog-details-img2.jpg" alt=""/>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-sm-6 xs-margin-seven xs-no-margin-lr xs-no-margin-top">
                            <img src="images/blog-details-img3.jpg" alt=""/>
                        </div>
                        <div class="col-md-6 col-sm-6">
                            <img src="images/blog-details-img4.jpg" alt=""/>
                        </div>
                    </div>
                    <!-- end post image -->
                    <div class="margin-ten no-margin-lr">
                        <!-- text -->
                        <span class="text-large dark-gray-text margin-five no-margin-lr no-margin-top display-block">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
                        <p class="margin-ten no-margin-lr no-margin-top">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text.</p>
                        <div class="col-md-12 no-padding">
                            <div class="blog-image">
                                <blockquote class="bg-gray alt-font">
                                    <p class="text-large margin-ten no-margin-lr no-margin-top">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text. Lorem Ipsum is simply dummy text.</p>
                                    <footer class="text-uppercase black-text">Jason Santa Maria</footer>
                                </blockquote>
                            </div>
                        </div>
                        <span class="text-large dark-gray-text margin-five no-margin-lr no-margin-top display-block">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</span>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text.</p>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p><br>
                        <!-- end text -->
                        <div class="margin-twelve no-margin-lr no-margin-top">
                            <!-- post tags -->
                            <h5 class="alt-font text-extra-large dark-gray-text">Tags</h5>
                            <a href="blog.html" class="text-small text-uppercase alt-font">Advertisement</a>, <a href="blog.html" class="text-small text-uppercase alt-font">Smart Quotes</a>, <a href="blog.html" class="text-small text-uppercase alt-font">Unique</a>, <a href="blog.html" class="text-small text-uppercase alt-font">Design</a>
                        </div>
                        <div class="text-center bg-gray">
                            <div class="blog-comment text-left clearfix no-margin padding-ten">
                                <!-- author image -->
                                <a class="comment-avtar no-margin-top"><img alt="" src="images/avtar6.jpg"></a>
                                <!-- end author image -->
                                <!-- author text -->
                                <div class="comment-text overflow-hidden position-relative">
                                    <h5 class="alt-font text-large dark-gray-text">About The Author</h5>
                                    <p class="alt-font text-uppercase text-small">Paul Scrivens - Creative Head</p>
                                    <p class="no-margin">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                                </div>
                                <!-- end author text -->
                            </div>
                        </div>
                    </div>
                    <!-- social media icon -->
                    <div class="text-center">
                        <a class="" href="https://www.facebook.com/" target="_blank"><i class="fa fa-facebook dark-gray-text title-medium"></i></a>
                        <a class="margin-ten no-margin-top no-margin-bottom no-margin-right" href="https://twitter.com/" target="_blank"><i class="fa fa-twitter dark-gray-text title-medium"></i></a>
                        <a class="margin-ten no-margin-top no-margin-bottom no-margin-right" href="https://www.linkedin.com/" target="_blank"><i class="fa fa-linkedin dark-gray-text title-medium"></i></a>
                        <a class="margin-ten no-margin-top no-margin-bottom no-margin-right" href="https://plus.google.com" target="_blank"><i class="fa fa-google-plus dark-gray-text title-medium"></i></a>
                        <a class="margin-ten no-margin-top no-margin-bottom no-margin-right" href="https://dribbble.com/" target="_blank"><i class="fa fa-dribbble dark-gray-text title-medium"></i></a>
                        <a class="margin-ten no-margin-top no-margin-bottom no-margin-right" href="https://www.youtube.com/" target="_blank"><i class="fa fa-youtube dark-gray-text title-medium"></i></a>
                    </div>
                    <!-- end social media icon -->
                    <div class="bg-fast-yellow separator-line-thick-full no-margin-lr md-margin-eleven md-no-margin-lr"></div>
                </article>
                <!-- blog comment -->
                <div class="blog-comment-main xs-no-padding-top">
                    <div class="blog-comment">
                        <a class="comment-avtar"><img alt="" src="images/blog-details-img5.jpg"></a>
                        <div class="comment-text overflow-hidden position-relative">
                            <a href="#" class="blog-comment-name alt-font text-uppercase text-medium dark-gray-text">Kristi Hines</a>
                            <span class="alt-font text-medium dark-gray-text">September 05th, 2014</span>
                            <p class="margin-five no-margin-lr">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <a class="btn-black btn btn-very-small no-margin inner-link" href="#addcomment">Post Reply</a>
                        </div>
                        <div class="blog-comment clearfix padding-seven no-padding-lr">
                            <a class="comment-avtar"><img alt="" src="images/blog-details-img6.jpg"></a>
                            <div class="comment-text overflow-hidden position-relative">
                                <a href="#" class="blog-comment-name alt-font text-uppercase text-medium dark-gray-text">Ray Michael</a>
                                <span class="alt-font text-medium dark-gray-text">August 13th, 2014</span>
                                <p class="margin-five no-margin-lr">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                                <a class="btn-black btn btn-very-small no-margin inner-link" href="#addcomment">Post Reply</a>
                            </div>
                        </div>
                    </div>
                    <div class="blog-comment">
                        <a class="comment-avtar"><img alt="" src="images/avtar6.jpg"></a>
                        <div class="comment-text overflow-hidden position-relative">
                            <a href="#" class="blog-comment-name alt-font text-uppercase text-medium dark-gray-text">Andy Kore</a>
                            <span class="alt-font text-medium dark-gray-text">August 10th, 2014</span>
                            <p class="margin-five no-margin-lr">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <a class="btn-black btn btn-very-small no-margin inner-link" href="#addcomment">Post Reply</a>
                        </div>
                        <div class="bg-fast-yellow separator-line-thick-full no-margin-lr md-margin-eleven md-no-margin-lr"></div>
                    </div>
                </div>
                <!-- end blog comment -->
                <!-- post comment form -->
                <div id="addcomment" class="xs-margin-thirty-five xs-no-margin-lr xs-no-margin-top">
                    <span class="text-extra-large text-uppercase alt-font dark-gray-text display-block margin-ten no-margin-lr no-margin-top font-weight-600">Leave a Comment</span>
                    <div class="blog-comment-form">
                        <form>
                            <!-- input -->
                            <input type="text" name="name" required="" placeholder="* Your Name" class="big-input alt-font">
                            <!-- end input -->
                            <!-- input  -->
                            <input type="text" name="email" required="" placeholder="* Your Email" class="big-input alt-font">
                            <!-- end input -->
                            <!-- textarea  -->
                            <textarea name="comment" placeholder="Your Message" class="big-input alt-font"></textarea>
                            <!-- end textarea  -->
                            <!-- button  -->
                            <button type="submit" class="highlight-button-dark btn btn-medium">Send Message</button>
                            <!-- end button  -->
                        </form>
                    </div>
                </div>
                <!-- end post comment form -->
            </div>
            <!-- sidebar -->
            <div class="col-md-3 col-md-offset-1 col-sm-4">
                <!-- widget  -->
                <div class="widget margin-twenty no-margin-lr no-margin-top xs-margin-twelve xs-no-margin-lr xs-no-margin-top">
                    <form>
                        <i class="fa fa-search close-search search-button"></i>
                        <input type="text" name="search" class="alt-font blog-search-btn" placeholder="type keyword here...">
                    </form>
                </div>
                <!-- end widget  -->
                <!-- widget  -->
                <div class="widget">
                    <span class="alt-font text-uppercase dark-gray-text font-weight-600 text-large">Categories</span>
                    <div class="bg-fast-yellow separator-line-thick no-margin-lr md-margin-eleven md-no-margin-lr"></div>
                    <div class="widget-body">
                        <ul class="category-list">
                            <li><a href="blog.html">Web Design</a></li>
                            <li><a href="blog.html">Featured Blog</a></li>
                            <li><a href="blog.html">Photography Idea</a></li>
                            <li><a href="blog.html">Design Tutorials</a></li>
                            <li><a href="blog.html">News and Events</a></li>
                            <li><a href="blog.html">Arts and Entertainment</a></li>
                        </ul>
                    </div>
                </div>
                <!-- end widget  -->
                <!-- widget  -->
                <div class="widget">
                    <span class="alt-font text-uppercase dark-gray-text font-weight-600 text-large">About Me</span>
                    <div class="bg-fast-yellow separator-line-thick no-margin-lr md-margin-eleven md-no-margin-lr"></div>
                    <div class="widget-body">
                        <img src="images/blog-img8.jpg" alt=""/>
                        <span class="alt-font text-uppercase dark-gray-text font-weight-600 margin-twenty-two display-block no-margin-lr no-margin-bottom  xs-margin-five xs-no-margin-lr">John Deo</span>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been industry's standard.</p>
                    </div>
                </div>
                <!-- end widget  -->
                <!-- widget  -->
                <div class="widget">
                    <span class="alt-font text-uppercase dark-gray-text font-weight-600 text-large">Text Widget</span>
                    <div class="bg-fast-yellow separator-line-thick no-margin-lr md-margin-eleven md-no-margin-lr"></div>
                    <div class="widget-body">
                        <p>Lorem Ipsum is simply dummy text of printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the of type and scrambled it to make a type specimen.</p>
                    </div>
                </div>
                <!-- end widget  -->
                <!-- widget  -->
                <div class="widget">
                    <span class="alt-font text-uppercase dark-gray-text font-weight-600 text-large">Popular Posts</span>
                    <div class="bg-fast-yellow separator-line-thick no-margin-lr md-margin-eleven md-no-margin-lr"></div>
                    <div class="widget-body">
                        <ul class="widget-posts">
                            <li><a href="blog-details.html">Standard Post with Gallery</a>Saturday - June 15, 2013</li>
                            <li><a href="blog-details.html">Standard post with preview Video</a>Saturday - June 20, 2013</li>
                            <li><a href="blog-details.html">Standard post with preview Picture</a>Saturday - June 25, 2013</li>
                            <li><a href="blog-details.html">Standard Post with Gallery</a>Saturday - June 15, 2013</li>
                        </ul>
                    </div>
                </div>
                <!-- end widget  -->
                <!-- widget  -->
                <div class="widget">
                    <span class="alt-font text-uppercase dark-gray-text font-weight-600 text-large">Tags</span>
                    <div class="bg-fast-yellow separator-line-thick no-margin-lr md-margin-eleven md-no-margin-lr"></div>
                    <div class="widget-body tags">
                        <a href="blog.html">Advertisement</a><a href="blog.html">Fashion</a><a href="blog.html">Sea</a><a href="blog.html">Forest</a><a href="blog.html">Nature</a><a href="blog.html">Portrait</a><a href="blog.html">Wordpress</a><a href="blog.html">Photo</a><a href="blog.html">Sky</a>
                    </div>
                </div>
                <!-- end widget  -->
                <!-- widget  -->
                <div class="widget">
                    <span class="alt-font text-uppercase dark-gray-text font-weight-600 text-large">Recent Comments</span>
                    <div class="bg-fast-yellow separator-line-thick no-margin-lr md-margin-eleven md-no-margin-lr"></div>
                    <div class="widget-body">
                        <ul class="widget-list">
                            <li><div class="light-gray-text border-bottom padding-five no-padding-lr no-padding-top xs-padding-three xs-no-padding-lr xs-no-padding-top"><a href="blog-details.html" class="display-block alt-font">Standard Post with Gallery</a>Saturday - June 15, 2013 at 12:04 pm</div></li>
                            <li><div class="light-gray-text border-bottom padding-five no-padding-lr xs-padding-three xs-no-padding-lr"><a href="blog-details.html" class="display-block alt-font">Standard post with preview Video</a>Saturday - June 20, 2013 at 07:11 pm</div></li>
                            <li><div class="light-gray-text border-bottom padding-five no-padding-lr xs-padding-three xs-no-padding-lr"><a href="blog-details.html" class="display-block alt-font">Standard post with preview Picture</a>Saturday - June 25, 2013 at 05:12 pm</div></li>
                            <li><div class="light-gray-text padding-five no-padding-lr no-padding-bottom xs-padding-three xs-no-padding-lr"><a href="blog-details.html" class="display-block alt-font">Standard Post with Gallery</a>Saturday - June 15, 2013 at 09:14 am</div></li>
                        </ul>
                    </div>
                </div>
                <!-- end widget  -->
                <!-- widget  -->
                <div class="widget-media">
                    <a href="#"><img src="images/blog-img7.jpg" alt=""/></a>
                </div>
                <!-- end widget  -->
            </div>
            <!-- end sidebar -->
        </div>
    </div>
</section>
                                        

NoteMany examples were shown in blog-details.html page.

Form Settings

Brando contains different types of ready to use forms in overall template files as mentioned below:

Contact Us

Your email subscription form will not work unless you have your files running on a hosting server with PHP / JS. When you have your files ready on your hosting server, you need to edit the settings to make the email function work.

Open email-templates/agency-contact.php and change your from email address (Receiver Email Address) at the top with info@yourdomain.com to your real email address, same way you can change subject line with replace of text "Contact us form details". Also replace yourdomain.com with your real domain name in logo image url in the email body template (http://www.yourdomain.com/images/logo-mail.png).

Please feel free to contact us in case if your email feature does not work because some server settings do not allow normal PHP email function.

NoteYou will get contact us form code from agency.html page. Follow above same steps for other templates, you will have other email template files under folder /email-templates.

Email Subscription

Your email subscription form will not work unless you have your files running on a hosting server with PHP / JS. When you have your files ready on your hosting server, you need to edit the settings to make the email function work.

Open email-templates/comingsoon-contact.php and change your from email address (Receiver Email Address) at the top with info@yourdomain.com to your real email address, same way you can change subject line with replace of text "Newsletter Subscription". Also replace yourdomain.com with your real domain name in logo image url in the email body template (http://www.yourdomain.com/images/logo-mail.png).

Please feel free to contact us in case if your email feature does not work because some server settings do not allow normal PHP email function.

NoteYou will get email subscription form code from coming-soon.html page.

RSVP

Your RSVP form will not work unless you have your files running on a hosting server with PHP / JS. When you have your files ready on your hosting server, you need to edit the settings to make the email function work.

Open email-templates/wedding-contact.php and change your from email address (Receiver Email Address) at the top with info@yourdomain.com to your real email address, same way you can change subject line with replace of text "RSVP form details". Also replace yourdomain.com with your real domain name in logo image url in the email body template (http://www.yourdomain.com/images/logo-mail.png).

Please feel free to contact us in case if your email feature does not work because some server settings do not allow normal PHP email function.

NoteYou will get RSVP form code from wedding.html page.

Credits

We would really love to take this opportunity to appreciate guys whose items were helpful to us to make Brando a really beautiful theme for our awesome users:

Version 1.2 - Current

Released on 8 April 2016

• Fixed: Fixed social media icon links not working in architecture and personal page. Added directpage class in links and changed jquery.nav.js file.

Version 1.1

Released on 24 January 2016

• Added new event page demo
• Added new tattoo page demo

Version 1.0 - Initial Release

Released on 19 November 2015

Other Templates

Below are some of our other awesome Templates, Skin and Extensions: