Default Slider

Reference: index.html
<div id="home-slider-one" class="slider-pro">
                <div class="sp-slides">
                    <div class="sp-slide"> <img class="sp-image" src="img/home-slider/main-slider-2.jpg" />
                        <p class="sp-layer" data-position="center" data-vertical="-138.29" data-show-transition="up" data-show-delay="400" data-hide-transition="up"> <img src="img/Unstccitleed-3.jpg" width="309" height="198" alt="" /> </p>
                        <h2 class="sp-layer slider-heading" data-position="center" data-width="100%" data-vertical="136" data-show-transition="down" data-show-delay="300"> Clean & Minimalistic </h2>
                        <p class="sp-layer slider-subtitle" data-position="center" data-vertical="228" data-width="60%" data-show-transition="down" data-show-delay="600"> ...for Business and Creative Agencies </p>
                        <p class="sp-layer" data-position="center" data-vertical="377" data-show-transition="down" data-show-delay="800"> <a href="#" class="d-btn btn-white-glow btn-large slider-button">Learn More</a> </p>
                    </div>
                    <div class="sp-slide"> <img class="sp-image" src="img/home-slider/main-slider-1.jpg" />
                        <p class="sp-layer" data-position="center" data-vertical="-138.29" data-show-transition="up" data-show-delay="400" data-hide-transition="up"> <img src="img/Untccitled-3_03.gif" width="309" height="198" alt="" /> </p>
                        <h2 class="sp-layer slider-heading" data-position="center" data-width="100%" data-vertical="136" data-show-transition="down" data-show-delay="300" data-hide-transition="down"> Simple & Awesome </h2>
                        <p class="sp-layer slider-subtitle" data-position="center" data-vertical="228" data-width="60%" data-show-transition="down" data-show-delay="600" data-hide-transition="down"> ...ignissim accumsan nemo reiciendis </p>
                        <p class="sp-layer" data-position="center" data-vertical="377" data-show-transition="down" data-show-delay="800" data-hide-transition="down"> <a href="#" class="d-btn btn-white-glow btn-large slider-button">Learn More</a> </p>
                    </div>
                    <div class="sp-slide"> <img class="sp-image" src="img/home-slider/main-slider-3.jpg" />
                        <p class="sp-layer" data-position="center" data-vertical="-138.29" data-show-transition="up" data-show-delay="400" data-hide-transition="up"> <img src="img/Unstccitleed-3.jpg" width="309" height="198" alt="" /> </p>
                        <h2 class="sp-layer slider-heading" data-position="center" data-width="100%" data-vertical="136" data-show-transition="down" data-show-delay="300" data-hide-transition="down"> Easily Customizable </h2>
                        <p class="sp-layer slider-subtitle" data-position="center" data-vertical="228" data-width="60%" data-show-transition="down" data-show-delay="600" data-hide-transition="down"> ...unc alias, ullam optio sit vestibulum </p>
                        <p class="sp-layer" data-position="center" data-vertical="377" data-show-transition="down" data-show-delay="800" data-hide-transition="down"> <a href="#" class="d-btn btn-white-glow btn-large slider-button">Learn More</a> </p>
                    </div>
                    <div class="sp-slide"> <img class="sp-image" src="img/home-slider/main-slider-4.jpg" />
                        <p class="sp-layer" data-position="center" data-vertical="-88.514" data-show-transition="up" data-show-delay="400" data-hide-transition="up"> <img src="img/Untccitled-3_06.jpg" width="309" height="auto" alt="" /> </p>
                        <h2 class="sp-layer slider-heading" data-position="center" data-width="100%" data-vertical="136" data-show-transition="down" data-show-delay="300" data-hide-transition="down"> Perfect for your next project </h2>
                        <p class="sp-layer slider-subtitle" data-position="center" data-vertical="228" data-width="60%" data-show-transition="down" data-show-delay="600" data-hide-transition="down"> ...rem animi blandit lacinia! Accusantium </p>
                        <p class="sp-layer" data-position="center" data-vertical="377" data-show-transition="down" data-show-delay="800" data-hide-transition="down"> <a href="#" class="d-btn btn-white-glow btn-large slider-button">Learn More</a> </p>
                    </div>
                    <div class="sp-slide"> <img class="sp-image" src="img/home-slider/main-slider-5.jpg" />
                        <p class="sp-layer" data-position="center" data-vertical="-138.29" data-show-transition="up" data-show-delay="400" data-hide-transition="up"> <img src="img/Untccitled-3_15.gif" width="309" height="198" alt="" /> </p>
                        <h2 class="sp-layer slider-heading" data-position="center" data-width="100%" data-vertical="136" data-show-transition="down" data-show-delay="300" data-hide-transition="down"> UI.UX/ed Keeping Users in Mind. </h2>
                        <p class="sp-layer slider-subtitle" data-position="center" data-vertical="228" data-width="60%" data-show-transition="down" data-show-delay="600" data-hide-transition="down"> ...dictum parturient scelerisque inceptos </p>
                        <p class="sp-layer" data-position="center" data-vertical="377" data-show-transition="down" data-show-delay="800" data-hide-transition="down"> <a href="#" class="d-btn btn-white-glow btn-large slider-button">Learn More</a> </p>
                    </div>
                    <div class="sp-slide"> <img class="sp-image" src="img/home-slider/main-slider-6.jpg" />
                        <p class="sp-layer" data-position="center" data-vertical="-138.29" data-show-transition="up" data-show-delay="400" data-hide-transition="up"> <img src="img/Unstccitleed-3.jpg" width="309" height="198" alt="" /> </p>
                        <h2 class="sp-layer slider-heading" data-position="center" data-width="100%" data-vertical="136" data-show-transition="down" data-show-delay="300" data-hide-transition="down"> Simple One Page HTML </h2>
                        <p class="sp-layer slider-subtitle" data-position="center" data-vertical="228" data-width="60%" data-show-transition="down" data-show-delay="600" data-hide-transition="down"> ...llam quae temporibus! Nisl, porro </p>
                        <p class="sp-layer" data-position="center" data-vertical="377" data-show-transition="down" data-show-delay="800" data-hide-transition="down"> <a href="#" class="d-btn btn-white-glow btn-large slider-button">Learn More</a> </p>
                    </div>
                    <div class="sp-slide"> <img class="sp-image" src="img/home-slider/main-slider-7.jpg" />
                        <p class="sp-layer" data-position="center" data-vertical="-138.29" data-show-transition="up" data-show-delay="400" data-hide-transition="up"> <img src="img/Unstccitleed-3.jpg" width="309" height="198" alt="" /> </p>
                        <h2 class="sp-layer slider-heading" data-position="center" data-width="100%" data-vertical="136" data-show-transition="down" data-show-delay="300" data-hide-transition="down"> Mountains & Nature </h2>
                        <p class="sp-layer slider-subtitle" data-position="center" data-vertical="228" data-width="60%" data-show-transition="down" data-show-delay="600" data-hide-transition="down"> ...aboris viverra risus, sit necessitatibus </p>
                        <p class="sp-layer" data-position="center" data-vertical="377" data-show-transition="down" data-show-delay="800" data-hide-transition="down"> <a href="#" class="d-btn btn-white-glow btn-large slider-button">Learn More</a> </p>
                    </div>
                    <div class="sp-slide"> <img class="sp-image" src="img/home-slider/main-slider-8.jpg" />
                        <p class="sp-layer" data-position="center" data-vertical="-91.514" data-show-transition="up" data-show-delay="400" data-hide-transition="up"> <img src="img/Untccitled-3_15.gif" width="auto" height="auto" alt="" /> </p>
                        <h2 class="sp-layer slider-heading" data-position="center" data-width="100%" data-vertical="136" data-show-transition="down" data-show-delay="300" data-hide-transition="down"> Lets Fall in Love </h2>
                        <p class="sp-layer slider-subtitle" data-position="center" data-vertical="228" data-width="60%" data-show-transition="down" data-show-delay="600" data-hide-transition="down"> ...asperiores culpa provident sagittis </p>
                        <p class="sp-layer" data-position="center" data-vertical="377" data-show-transition="down" data-show-delay="800" data-hide-transition="down"> <a href="#" class="d-btn btn-white-glow btn-large slider-button">Learn More</a> </p>
                    </div>
                </div>
            </div>
        </section> 

Grid

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

  </div>

Icons

http://fontawesome.io/ and https://linearicons.com/free

Font Awesome

Linearicons

Counter Up

150k+ lines
90bugs fixed
548 coffee cups
150+ happy clients
Reference: index.html#about-us
<div class="statistics">
	<div class="row animatedParent animateOnce" data-sequence="100">
		<div class="col-sm-3 animated fadeInDownShort" data-id="1">
			<div class="statistics-area"> <span class="lnr lnr-code"></span> <span class="sti-numbers"><span class="counter">150</span>k+ lines</span>
			</div>                               
		</div>
		<div class="col-sm-3 animated fadeInDownShort" data-id="2">
			<div class="statistics-area"> <span class="lnr lnr-bug"></span> <span class="sti-numbers"><span class="counter">90</span>bugs fixed</span>
			</div>                              
		</div>
		<div class="col-sm-3 animated fadeInDownShort" data-id="3">
			<div class="statistics-area"> <span class="lnr lnr-coffee-cup"></span> <span class="sti-numbers"><span class="counter">548</span> coffee cups</span>
			</div>
			
		</div>
		<div class="col-sm-3 animated fadeInDownShort" data-id="4">
			<div class="statistics-area"> <span class="lnr  lnr-smile"></span> <span class="sti-numbers"><span class="counter">150</span>+ happy clients</span>
			</div>
		</div>
	</div>
</div

Tool Tip

Reference: index.html#features
<a href="shortcodes.html" class="d-btn btn-large animated pulse infinite-animation home-feature-button" data-toggle="tooltip" data-placement="right" title="Click for easy to use Shortcodes -Tooltip- ">Features <span class="playfair-font">&</span> Shortcodes</a>>

Icon Hover Effects

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt ex lacus, quis congue est mollis ac.

READ MORE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt ex lacus, quis congue est mollis ac.

READ MORE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt ex lacus, quis congue est mollis ac.

READ MORE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt ex lacus, quis congue est mollis ac.

READ MORE
Reference: index.html#services
<div class="services-sec animatedParent animateOnce">
	<div class="row animated fadeInUpShort go" data-appear-top-offset="-200">
		<div class="col-md-3 col-sm-6">
			<div class="service-area"> <span class="lnr lnr-layers"></span>
				<h3>Web Design</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt ex lacus, quis congue est mollis ac.</p>
				<a class="read-more" href="#">READ MORE <span class="lnr lnr-arrow-right"></span></a> </div>
			<!-- end service-area -->
		</div>
		<!-- end col-md-3 -->

		<div class="col-md-3 col-sm-6">
			<div class="service-area"> <span class="lnr lnr-cog"></span>
				<h3>Development</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt ex lacus, quis congue est mollis ac.</p>
				<a class="read-more" href="#">READ MORE <span class="lnr lnr-arrow-right"></span></a> </div>
			<!-- end service-area -->
		</div>
		<!-- end col-md-3 -->

		<div class="col-md-3 col-sm-6">
			<div class="service-area"> <span class="lnr lnr-store"></span>
				<h3>E-commerce</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt ex lacus, quis congue est mollis ac.</p>
				<a class="read-more" href="#">READ MORE <span class="lnr lnr-arrow-right"></span></a> </div>
			<!-- end service-area -->
		</div>
		<!-- end col-md-3 -->

		<div class="col-md-3 col-sm-6">
			<div class="service-area"> <span class="lnr lnr-bullhorn"></span>
				<h3>SEO</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt ex lacus, quis congue est mollis ac.</p>
				<a class="read-more" href="#">READ MORE <span class="lnr lnr-arrow-right"></span></a> </div>
			<!-- end service-area -->
		</div>
		<!-- end col-md-3 -->
	</div>
	<!-- end row -->
</div>

Lorem ipsum dolor sit amet, consecteter adipiscing elit. Aenean ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aen modo ligula eget dolor. Aenean massa.

Learn More

Lorem ipsum dolor sit amet, consecteter adipiscing elit. Aenean ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aen modo ligula eget dolor. Aenean massa.

Learn More

Lorem ipsum dolor sit amet, consecteter adipiscing elit. Aenean ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aen modo ligula eget dolor. Aenean massa.

Learn More
Reference: index.html#help
<div class="need-help-sec animatedParent animateOnce" data-appear-top-offset="-200">
                        <div class="row animated fadeInUpShort">
                            <div class="col-md-4 col-sm-8 col-sm-offset-2 col-md-offset-0">
                                <div class="need-help-area"> <span class="lnr lnr-question-circle"></span>
                                    <h3>PRESALES QUESTION?</h3>
                                    <p>Lorem ipsum dolor sit amet, consecteter adipiscing elit. Aenean ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aen modo ligula eget dolor. Aenean massa.</p>
                                    <a href="#" class="d-btn btn-small">Learn More</a> </div>
                                <!-- need-help-area -->
                            </div>
                            <!-- end col-md-4 -->

                            <div class="col-md-4 col-sm-8 col-sm-offset-2 col-md-offset-0">
                                <div class="need-help-area"> <span class="lnr lnr-plus-circle"></span>
                                    <h3>Need Support?</h3>
                                    <p>Lorem ipsum dolor sit amet, consecteter adipiscing elit. Aenean ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aen modo ligula eget dolor. Aenean massa.</p>
                                    <a href="#" class="d-btn btn-small">Learn More</a> </div>
                                <!-- need-help-area -->
                            </div>
                            <!-- end col-md-4 -->

                            <div class="col-md-4 col-sm-8 col-sm-offset-2 col-md-offset-0">
                                <div class="need-help-area"> <span class="lnr lnr-checkmark-circle"></span>
                                    <h3>Check Forum</h3>
                                    <p>Lorem ipsum dolor sit amet, consecteter adipiscing elit. Aenean ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aen modo ligula eget dolor. Aenean massa.</p>
                                    <a href="#" class="d-btn btn-small">Learn More</a> </div>
                                <!-- need-help-area -->
                            </div>
                            <!-- end col-md-4 -->
                        </div>
                        <!-- end row -->
                    </div>

Section Title with subtitle

<div class="title-main">
	<h2>Features</h2>
	<p>100% Twitter Booststrap Support with all the awesome features ready for your next project</p>
</div>

Title with underline

<h3 class="b-line">Excellent Support </h3>

Title with icon-top

<div class="about-area"> <span class="lnr lnr-bubble"></span>
	<h3 class="b-line">Excellent Support </h3>
</div>

Title with icon-left

<div class="feature-sec-area add-top-space text-left animated fadeInRight go" data-id="1">
	<h5><span class="lnr lnr-spell-check"></span> FULL DOCUMENTIONS</h5>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus commodo consectetur. Nulla facilisi. Phasellus id porta dolor.</p>
</div>

Title with icon-right

<div class="feature-sec-area add-top-space text-right animated fadeInLeft go" data-id="1">
	<h5>A Real time-saver <span class="lnr lnr-history"></span></h5>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus commodo consectetur. Nulla facilisi. Phasellus id porta dolor.</p>
</div>

Grid Portfolio/ popup

LARKING
RIVER
TREE
BRANCH
LEAVES
RELAX
CURIOUS
LONELY
<section class="sec" id="portfolio">
        <div class="portfolio-sec">
            <div class="row">
                <div class="col-md-3 col-sm-6">
                    <div class="portfolio-area"> <img class="img-responsive" src="img/resources/portfolio1.jpg" alt="">
                        <div class="portfolio-sec-hover"> <span class="corner-top-left"></span> <span class="corner-top-right"></span> <span class="corner-bottom-left"></span> <span class="corner-bottom-right"></span>
                            <div class="portfolio-sec-hover-inner"> <span>LARKING</span>
                                <h5 class="p-tag"><a class="open-popup-link" href="#horse-popup">Horse</a></h5>

                                <!-- popup-window starts-->
                                <div id="horse-popup" class="white-popup mfp-hide">
                                    <div class="row">
                                        <div class="col-md-6 col-sm-12">
                                            <div class="blurred-bg tinted">
                                                <div class="img-responsive pop-featured-img" style="background-image:url(img/horses-1150017_1920.jpg)"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-sm-12 clearfix">
                                            <div class="pop-featured-text">
                                                <h2 class="b-line">SimplUI Core Features</h2>
                                                <p>The simple and clean design is the core feature with easy to use scripts for different functionalities with vast documentation available online.</p>
                                                <p>Designed and Developed by Experienced Web Developers/Designers with Love.</p>
                                                <p>POP Up modal will help the visitor to evaluate the portfolio on the fly, and the modal can easily be customized for different typers of content available. Nullam amet torquent corrupti magnis laudantium reiciendis ridiculus? Est laudantium malesuada culpa, cubilia eius augue maxime malesuada dapibus nostrum tempora praesentium cumque. Accusamus! Nulla suscipit, saepe fringilla molestiae, eiusmod habitant, numquam eros veritatis blandit suspendisse vivamus.</p>
												<p>Learn More button will take you to the single portfolio page and Link will take you the demo link of the portfolio.</p>
                                                <a href="portfolio-single-page-wide.html" class="d-btn btn-small btn-dark">Learn more</a> <a href="#" class="d-btn btn-small btn-dark" target="new">Link</a> </div>
                                            <!--pop-featured-text-->
                                        </div>
                                        <!--col-md-6 col-sm-12 clearfix-->
                                    </div>
                                    <!--row-->
                                    <a class="open-popup-link pop-right" href="#capinoi-popup"><img src="img/arrow_right.png" /></a>
                                </div>
                                <!-- popup-window ends-->

                            </div>
                        </div>
                        <!-- portfolio-sec-hover -->
                    </div>
                    <!-- portfolio-area -->
                </div>
                <!-- col-md-3 -->
                <div class="col-md-3 col-sm-6">
                    <div class="portfolio-area"> <img class="img-responsive" src="img/resources/portfolio2.jpg" alt="">
                        <div class="portfolio-sec-hover"> <span class="corner-top-left"></span> <span class="corner-top-right"></span> <span class="corner-bottom-left"></span> <span class="corner-bottom-right"></span>
                            <div class="portfolio-sec-hover-inner"> <span>RIVER</span>
                                <h5 class="p-tag"><a class="open-popup-link" href="#capinoi-popup">Capinoi</a></h5>

                                <!-- popup-window starts-->
                                <div id="capinoi-popup" class="white-popup mfp-hide">
                                    <a class="open-popup-link pop-left" href="#horse-popup"><img src="img/arrow_left.png" /></a>
                                    <div class="row">
                                        <div class="col-md-6 col-sm-12">
                                            <div class="blurred-bg tinted">
                                                <div class="img-responsive pop-featured-img" style="background-image:url(img/nature-animal-river-deer.jpeg)"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-sm-12 clearfix">
                                            <div class="pop-featured-text">
                                                <h2 class="b-line">SimplUI Core Features</h2>
                                                <p>The simple and clean design is the core feature with easy to use scripts for different functionalities with vast documentation available online.</p>
                                                <p>Designed and Developed by Experienced Web Developers/Designers with Love.</p>
                                                <p>POP Up modal will help the visitor to evaluate the portfolio on the fly, and the modal can easily be customized for different typers of content available. Nullam amet torquent corrupti nostrum tempora praesentium cumque. Accusamus! Nulla suscipit, saepe fringilla molestiae, eiusmod habitant, numquam eros veritatis blandit suspendisse vivamus.</p>
												<p>Learn More button will take you to the single portfolio page and Link will take you the demo link of the portfolio.</p>
                                                <a href="portfolio-single-page-basic.html" class="d-btn btn-small btn-dark">Learn more</a> <a href="#" class="d-btn btn-small btn-dark" target="new">Link</a> </div>
                                            <!--pop-featured-text-->
                                        </div>
                                        <!--col-md-6 col-sm-12 clearfix-->
                                    </div>
                                    <!--row-->

                                    <a class="open-popup-link pop-right" href="#squirrel-popup"><img src="img/arrow_right.png" /></a>
                                </div>
                                <!-- popup-window ends-->

                            </div>
                        </div>
                        <!-- portfolio-sec-hover -->
                    </div>
                    <!-- portfolio-area -->
                </div>
                <!-- col-md-3 -->
                <div class="col-md-3 col-sm-6">
                    <div class="portfolio-area"> <img class="img-responsive" src="img/resources/portfolio3.jpg" alt="">
                        <div class="portfolio-sec-hover"> <span class="corner-top-left"></span> <span class="corner-top-right"></span> <span class="corner-bottom-left"></span> <span class="corner-bottom-right"></span>
                            <div class="portfolio-sec-hover-inner"> <span>TREE</span>
                                <h5 class="p-tag"><a class="open-popup-link" href="#squirrel-popup">Squirrei</a></h5>
                                <!-- popup-window starts-->
                                <div id="squirrel-popup" class="white-popup mfp-hide">
                                    <a class="open-popup-link pop-left" href="#capinoi-popup"><img src="img/arrow_left.png" /></a>
                                    <div class="row">
                                        <div class="col-md-6 col-sm-12">
                                            <div class="blurred-bg tinted">
                                                <div class="img-responsive pop-featured-img" style="background-image:url(img/Red_Squirrel_wallpaper.jpg)"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-sm-12 clearfix">
                                            <div class="pop-featured-text">
                                                <h2 class="b-line">SimplUI Core Features</h2>
                                                <p>The simple and clean design is the core feature with easy to use scripts for different functionalities with vast documentation available online.</p>
                                                <p>Designed and Developed by Experienced Web Developers/Designers with Love.</p>
                                                <p>POP Up modal will help the visitor to evaluate the portfolio on the fly, and the modal can easily be customized for different typers of content available. Nullam amet torquent corrupti nostrum magnis laudantium reiciendis ridiculus? Est laudantium malesuada culpa, cubilia eius augue maxime malesuada dapibus tempora praesentium cumque. Accusamus! Nulla suscipit, saepe fringilla molestiae, eiusmod habitant, numquam eros veritatis blandit suspendisse vivamus.</p>
												<p>Learn More button will take you to the single portfolio page and Link will take you the demo link of the portfolio.</p>
                                                <a href="portfolio-single-page-wide.html" class="d-btn btn-small btn-dark">Learn more</a> <a href="#" class="d-btn btn-small btn-dark" target="new">Link</a> </div>
                                            <!--pop-featured-text-->
                                        </div>
                                        <!--col-md-6 col-sm-12 clearfix-->
                                    </div>
                                    <!--row-->
                                    <a class="open-popup-link pop-right" href="#bird-popup"><img src="img/arrow_right.png" /></a>
                                </div>
                                <!-- popup-window ends-->
                            </div>
                        </div>
                        <!-- portfolio-sec-hover -->
                    </div>
                    <!-- portfolio-area -->
                </div>
                <!-- col-md-3 -->
                <div class="col-md-3 col-sm-6">
                    <div class="portfolio-area"> <img class="img-responsive" src="img/resources/portfolio4.jpg" alt="">
                        <div class="portfolio-sec-hover"> <span class="corner-top-left"></span> <span class="corner-top-right"></span> <span class="corner-bottom-left"></span> <span class="corner-bottom-right"></span>
                            <div class="portfolio-sec-hover-inner"> <span>BRANCH</span>
                                <h5 class="p-tag"><a class="open-popup-link" href="#bird-popup">Bird</a></h5>
                                <!-- popup-window starts-->
                                <div id="bird-popup" class="white-popup mfp-hide">
                                    <a class="open-popup-link pop-left" href="#squirrel-popup"><img src="img/arrow_left.png" /></a>
                                    <div class="row">
                                        <div class="col-md-6 col-sm-12">
                                            <div class="blurred-bg tinted">
                                                <div class="img-responsive pop-featured-img" style="background-image:url(img/photo-1427985841921-acba1301576e.jpg)"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-sm-12 clearfix">
                                            <div class="pop-featured-text">
                                                <h2 class="b-line">SimplUI Core Features</h2>
                                                <p>The simple and clean design is the core feature with easy to use scripts for different functionalities with vast documentation available online.</p>
                                                <p>Designed and Developed by Experienced Web Developers/Designers with Love.</p>
                                                <p>POP Up modal will help the visitor to evaluate the portfolio on the fly, and the modal can easily be customized for different typers of content available. Nullam amet torquent corrupti nostrum tempora praesentium cumque. Accusamus! Nulla suscipit, saepe fringilla molestiae, eiusmod habitant, numquam eros veritatis blandit suspendisse vivamus.</p>
												<p>Learn More button will take you to the single portfolio page and Link will take you the demo link of the portfolio.</p>
                                                <a href="portfolio-single-page-basic.html" class="d-btn btn-small btn-dark">Learn more</a> <a href="#" class="d-btn btn-small btn-dark" target="new">Link</a> </div>
                                            <!--pop-featured-text-->
                                        </div>
                                        <!--col-md-6 col-sm-12 clearfix-->
                                    </div>
                                    <!--row-->
                                    <a class="open-popup-link pop-right" href="#pecora-popup"><img src="img/arrow_right.png" /></a>
                                </div>
                                <!-- popup-window ends-->
                            </div>
                        </div>
                        <!-- portfolio-sec-hover -->
                    </div>
                    <!-- portfolio-area -->
                </div>
                <!-- col-md-3 -->
                <div class="col-md-3 col-sm-6">
                    <div class="portfolio-area"> <img class="img-responsive" src="img/resources/portfolio5.jpg" alt="">
                        <div class="portfolio-sec-hover"> <span class="corner-top-left"></span> <span class="corner-top-right"></span> <span class="corner-bottom-left"></span> <span class="corner-bottom-right"></span>
                            <div class="portfolio-sec-hover-inner"> <span>LEAVES</span>
                                <h5 class="p-tag"><a class="open-popup-link" href="#pecora-popup">Pecora</a></h5>
                                <!-- popup-window starts-->
                                <div id="pecora-popup" class="white-popup mfp-hide">
                                    <a class="open-popup-link pop-left" href="#bird-popup"><img src="img/arrow_left.png" /></a>
                                    <div class="row">
                                        <div class="col-md-6 col-sm-12">
                                            <div class="blurred-bg tinted">
                                                <div class="img-responsive pop-featured-img" style="background-image:url(img/Cgq-WVGU4AAKfbq.jpg)"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-sm-12 clearfix">
                                            <div class="pop-featured-text">
                                                <h2 class="b-line">SimplUI Core Features</h2>
                                                <p>The simple and clean design is the core feature with easy to use scripts for different functionalities with vast documentation available online.</p>
                                                <p>Designed and Developed by Experienced Web Developers/Designers with Love.</p>
                                                <p>POP Up modal will help the visitor to evaluate the portfolio on the fly, and the modal can easily be customized for different typers of content available. Nullam amet torquent corrupti nostrum tempora  magnis laudantium reiciendis ridiculus? Est laudantium malesuada culpa, cubilia eius augue maxime malesuada dapibuspraesentium cumque. Accusamus! Nulla suscipit, saepe fringilla molestiae, eiusmod habitant, numquam eros veritatis blandit suspendisse vivamus.</p>
												<p>Learn More button will take you to the single portfolio page and Link will take you the demo link of the portfolio.</p>
                                                <a href="portfolio-single-page-wide.html" class="d-btn btn-small btn-dark">Learn more</a> <a href="#" class="d-btn btn-small btn-dark" target="new">Link</a> </div>
                                            <!--pop-featured-text-->
                                        </div>
                                        <!--col-md-6 col-sm-12 clearfix-->
                                    </div>
                                    <!--row-->
                                    <a class="open-popup-link pop-right" href="#deer-popup"><img src="img/arrow_right.png" /></a>
                                </div>
                                <!-- popup-window ends-->
                            </div>
                        </div>
                        <!-- portfolio-sec-hover -->
                    </div>
                    <!-- portfolio-area -->
                </div>
                <!-- col-md-3 -->
                <div class="col-md-3 col-sm-6">
                    <div class="portfolio-area"> <img class="img-responsive" src="img/resources/portfolio6.jpg" alt="">
                        <div class="portfolio-sec-hover"> <span class="corner-top-left"></span> <span class="corner-top-right"></span> <span class="corner-bottom-left"></span> <span class="corner-bottom-right"></span>
                            <div class="portfolio-sec-hover-inner"> <span>RELAX</span>
                                <h5 class="p-tag"><a class="open-popup-link" href="#deer-popup">Deer</a></h5>
                                <!-- popup-window starts-->
                                <div id="deer-popup" class="white-popup mfp-hide">
                                    <a class="open-popup-link pop-left" href="#pecora-popup"><img src="img/arrow_left.png" /></a>
                                    <div class="row">
                                        <div class="col-md-6 col-sm-12">
                                            <div class="blurred-bg tinted">
                                                <div class="img-responsive pop-featured-img" style="background-image:url(img/elk.jpg)"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-sm-12 clearfix">
                                            <div class="pop-featured-text">
                                                <h2 class="b-line">SimplUI Core Features</h2>
                                                <p>The simple and clean design is the core feature with easy to use scripts for different functionalities with vast documentation available online.</p>
                                                <p>Designed and Developed by Experienced Web Developers/Designers with Love.</p>
                                                <p>POP Up modal will help the visitor to evaluate the portfolio on the fly, and the modal can easily be customized for different typers of content available. Nullam amet torquent corrupti nostrum tempora praesentium cumque. Accusamus! Nulla suscipit, saepe magnis laudantium reiciendis ridiculus? Est laudantium malesuada culpa, cubilia eius augue maxime malesuada dapibusfringilla molestiae, eiusmod habitant, numquam eros veritatis blandit suspendisse vivamus.</p>
												<p>Learn More button will take you to the single portfolio page and Link will take you the demo link of the portfolio.</p>
                                                <a href="portfolio-single-page-basic.html" class="d-btn btn-small btn-dark">Learn more</a> <a href="#" class="d-btn btn-small btn-dark" target="new">Link</a> </div>
                                            <!--pop-featured-text-->
                                        </div>
                                        <!--col-md-6 col-sm-12 clearfix-->
                                    </div>
                                    <!--row-->
                                    <a class="open-popup-link pop-right" href="#fox-popup"><img src="img/arrow_right.png" /></a>
                                </div>
                                <!-- popup-window ends-->
                            </div>
                        </div>
                        <!-- portfolio-sec-hover -->
                    </div>
                    <!-- portfolio-area -->
                </div>
                <!-- col-md-3 -->
                <div class="col-md-3 col-sm-6">
                    <div class="portfolio-area"> <img class="img-responsive" src="img/resources/portfolio7.jpg" alt="">
                        <div class="portfolio-sec-hover"> <span class="corner-top-left"></span> <span class="corner-top-right"></span> <span class="corner-bottom-left"></span> <span class="corner-bottom-right"></span>
                            <div class="portfolio-sec-hover-inner"> <span>CURIOUS</span>
                                <h5 class="p-tag"><a class="open-popup-link" href="#fox-popup">Fox</a></h5>
                                <!-- popup-window starts-->
                                <div id="fox-popup" class="white-popup mfp-hide">
                                    <a class="open-popup-link pop-left" href="#deer-popup"><img src="img/arrow_left.png" /></a>
                                    <div class="row">
                                        <div class="col-md-6 col-sm-12">
                                            <div class="blurred-bg tinted">
                                                <div class="img-responsive pop-featured-img" style="background-image:url(img/photo-1440658172029-9d9e5cdc127c.jpg)"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-sm-12 clearfix">
                                            <div class="pop-featured-text">
                                                <h2 class="b-line">SimplUI Core Features</h2>
                                                <p>The simple and clean design is the core feature with easy to use scripts for different functionalities with vast documentation available online.</p>
                                                <p>Designed and Developed by Experienced Web Developers/Designers with Love.</p>
                                                <p>POP Up modal will help the visitor to evaluate the portfolio on the fly, and the modal can easily be customized for different typers of content available. Nullam amet torquent corrupti nostrum tempora praesentium cumque. Accusamus! Nulla suscipit, saepe fringilla molestiae, eiusmod habitant, numquam eros veritatis blandit suspendisse vivamus.</p>
												<p>Learn More button will take you to the single portfolio page and Link will take you the demo link of the portfolio.</p>
                                                <a href="portfolio-single-page-wide.html" class="d-btn btn-small btn-dark">Learn more</a> <a href="#" class="d-btn btn-small btn-dark" target="new">Link</a> </div>
                                            <!--pop-featured-text-->
                                        </div>
                                        <!--col-md-6 col-sm-12 clearfix-->
                                    </div>
                                    <!--row-->
                                    <a class="open-popup-link pop-right" href="#goat-popup"><img src="img/arrow_right.png" /></a>
                                </div>
                                <!-- popup-window ends-->
                            </div>
                        </div>
                        <!-- portfolio-sec-hover -->
                    </div>
                    <!-- portfolio-area -->
                </div>
                <!-- col-md-3 -->
                <div class="col-md-3 col-sm-6">
                    <div class="portfolio-area"> <img class="img-responsive" src="img/resources/portfolio8.jpg" alt="">
                        <div class="portfolio-sec-hover"> <span class="corner-top-left"></span> <span class="corner-top-right"></span> <span class="corner-bottom-left"></span> <span class="corner-bottom-right"></span>
                            <div class="portfolio-sec-hover-inner"> <span>LONELY</span>
                                <h5 class="p-tag"><a class="open-popup-link" href="#goat-popup">Goat</a></h5>
                                <!-- popup-window starts-->
                                <div id="goat-popup" class="white-popup mfp-hide">
                                    <a class="open-popup-link pop-left" href="#fox-popup"><img src="img/arrow_left.png" /></a>
                                    <div class="row">
                                        <div class="col-md-6 col-sm-12">
                                            <div class="blurred-bg tinted">
                                                <div class="img-responsive pop-featured-img" style="background-image:url(img/0_152eb5_844ce069_XL.jpg)"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-sm-12 clearfix">
                                            <div class="pop-featured-text">
                                                <h2 class="b-line">SimplUI Core Features</h2>
                                                <p>The simple and clean design is the core feature with easy to use scripts for different functionalities with vast documentation available online.</p>
                                                <p>Designed and Developed by Experienced Web Developers/Designers with Love.</p>
                                                <p>POP Up modal will help the visitor to evaluate the portfolio on the fly, and the modal can easily be customized for different typers of content available. Nullam magnis laudantium reiciendis ridiculus? Est laudantium malesuada culpa, cubilia eius augue maxime malesuada dapibus amet torquent corrupti nostrum tempora praesentium cumque. Accusamus! Nulla suscipit, saepe fringilla molestiae, eiusmod habitant, numquam eros veritatis blandit suspendisse vivamus.</p>
												<p>Learn More button will take you to the single portfolio page and Link will take you the demo link of the portfolio.</p>
                                                <a href="portfolio-single-page-basic.html" class="d-btn btn-small btn-dark">Learn more</a> <a href="#" class="d-btn btn-small btn-dark" target="new">Link</a> </div>
                                            <!--pop-featured-text-->
                                        </div>
                                        <!--col-md-6 col-sm-12 clearfix-->
                                    </div>
                                    <!--row-->

                                </div>
                                <!-- popup-window ends-->
                            </div>
                        </div>
                        <!-- portfolio-sec-hover -->
                    </div>
                    <!-- portfolio-area -->
                </div>
                <!-- col-md-3 -->
            </div>
            <!-- row -->
        </div>
        <!-- portfolio-sec -->
    </section>

Buttons

Whole new collection of buttons. Grey background is used for easily understand the buttons

<a href="#" class="d-btn btn-white-glow btn-large slider-button">Learn More</a>
<a href="shortcodes.html" class="d-btn btn-large animated pulse infinite-animation home-feature-button go" data-toggle="tooltip" data-placement="right" title="" data-original-title="Click for easy to use Shortcodes -Tooltip- ">Features <span class="playfair-font">&</span> Shortcodes</a>
<a href="#" class="d-btn btn-large animated fadeInUp go">View full portfolio</a>
<a href="#" class="d-btn btn-medium button button--ujarak btn-white-hover">Choose plan</a>
<a href="#" class="d-btn btn-large btn-dark">Learn more</a>
<a href="#" class="d-btn btn-small">Learn More</a>
<div class="contact-sec"><button type="submit" id="form-submit" class="disabled" style="pointer-events: all; cursor: pointer;">Submit</button></div>

Pricing Table

Reference: index.html#pricing
<div class="row">
                <div class="col-md-12">
                    <div class="title-main">
                        <h2>Pricing</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam auctor est sit amet imperdiet rhoncus.</p>
                    </div>
                    <!-- end title-main -->

                    <div class="pricing-sec">
                        <div class="row">
                            <div class="col-md-4 col-sm-8 col-sm-offset-2 col-md-offset-0 animatedParent animateOnce" data-appear-top-offset="-200">
                                <div class="pricing-area animated fadeInRight">
                                    <h3>Starter</h3>
                                    <h4 class="plan-price">$25<span>per month</span></h4>
                                    <ul class="plan-features">
                                        <li>500mb</li>
                                        <li>1 Domain</li>
                                        <li>0 Email account</li>
                                        <li>24/7 Support</li>
                                    </ul>
                                    <a href="#" class="d-btn btn-medium button button--ujarak btn-white-hover">Choose plan</a> </div>
                                <!-- end pricing-area -->
                            </div>
                            <!-- end col-md-4 -->

                            <div class="col-md-4 col-sm-8 col-sm-offset-2 col-md-offset-0 animatedParent animateOnce" data-appear-top-offset="-100">
                                <div class="pricing-area best-plan animated fadeInDownShort">
                                    <h3>Pro</h3>
                                    <h4 class="plan-price">$75<span>per month</span></h4>
                                    <ul class="plan-features">
                                        <li>3GB</li>
                                        <li>10 Domain</li>
                                        <li>10 Email account</li>
                                        <li>24/7 Support</li>
                                    </ul>
                                    <a href="#" class="d-btn btn-medium button button--ujarak btn-white-hover">Choose plan</a> </div>
                                <!-- end pricing-area -->
                            </div>
                            <!-- end col-md-4 -->

                            <div class="col-md-4 col-sm-8 col-sm-offset-2 col-md-offset-0 animatedParent animateOnce" data-appear-top-offset="-200">
                                <div class="pricing-area animated fadeInLeft">
                                    <h3>Exclusive</h3>
                                    <h4 class="plan-price">$125<span>per month</span></h4>
                                    <ul class="plan-features">
                                        <li>Unlimited</li>
                                        <li>Unlimited</li>
                                        <li>Unlimited</li>
                                        <li>24/7 Support</li>
                                    </ul>
                                    <a href="#" class="d-btn btn-medium button button--ujarak btn-white-hover">Choose plan</a> </div>
                                <!-- end pricing-area -->
                            </div>
                            <!-- end col-md-4 -->
                        </div>
                        <!-- end row -->
                    </div>
                    <!-- end pricing-sec -->

                </div>
                <!-- end col-md-12 -->
            </div>

Testimonial

Nulla coVel varius officiis perferendis massa magnam consequuntur quibusdam proident mollis magnis eu unde risus accusamus, voluptatem. Pariatur facilisis beatae molestiae primis ex, placeat autem, id sem alias inceptos

Hendrerit morbi phasellus odio? Tortor suscipit! Quas lobortis! Minim maxime. Id habitasse, deserunt ridiculus itaque diamlorem reiciendis voluptatum mauris dolores. Accusantium ducimus. Exercitation augue mauris

Ac pretium? Dicta do unde montes distinctio posuere consequatur rutrum feugiat deserunt facere, aenean. Corporis, donec laboriosam iste fusce adipisci, quae nulla, aliquet curabitur? Hendrerit officiis netus.

<div class="testimonials-sec">
            <div class="row">
                <div class="col-md-12">
                    <div class="testimonials-area">
                        <h2>What other says About us</h2>
                        <div class="testimonials-slider">
                            <div class="item">
                                <p>Nulla coVel varius officiis perferendis massa magnam consequuntur quibusdam proident mollis magnis eu unde risus accusamus, voluptatem. Pariatur facilisis beatae molestiae primis ex, placeat autem, id sem alias inceptos</p>
                                <div class="testimonials-bio"> <img src="img/resources/tbio3.jpg" alt="">
                                    <h5>George Mathson</h5>
                                    <h6>CEO of JTL</h6>
                                </div>
                                <!-- testimonials-bio-->
                            </div>
                            <!-- item -->
                            <div class="item">
                                <p>Hendrerit morbi phasellus odio? Tortor suscipit! Quas lobortis! Minim maxime. Id habitasse, deserunt ridiculus itaque diamlorem reiciendis voluptatum mauris dolores. Accusantium ducimus. Exercitation augue mauris</p>
                                <div class="testimonials-bio"> <img src="img/resources/tbio2.jpg" alt="">
                                    <h5>Apsara Heith</h5>
                                    <h6>Chairmain of XYZB</h6>
                                </div>
                                <!-- testimonials-bio-->
                            </div>
                            <!-- item -->
                            <div class="item">
                                <p>Ac pretium? Dicta do unde montes distinctio posuere consequatur rutrum feugiat deserunt facere, aenean. Corporis, donec laboriosam iste fusce adipisci, quae nulla, aliquet curabitur? Hendrerit officiis netus.</p>
                                <div class="testimonials-bio"> <img src="img/resources/tbio.jpg" alt="">
                                    <h5>Lovakia Simps</h5>
                                    <h6>Director of ABCD</h6>
                                </div>
                                <!-- testimonials-bio-->
                            </div>
                            <!-- item -->

                        </div>
                        <!-- testimonials-slider -->
                    </div>
                    <!-- testimonials-area -->
                </div>
                <!-- end col md 12 -->
            </div>
            <!-- end row-->
        </div>
        <!-- end-testimonials-sec -->

Owl Sliders

ENDLESS possibilities with multi-functional responsive slider. Check out http://owlgraphic.com/owlcarousel/ for details. Width of the slider depends on Bootstrap Grid

Basic Half width slider

<div class="col-md-6">
	<div class="core-features-slider">
		<div class="item"> <img src="img/resources/imac.jpg" alt="" class="img-responsive"> </div>
		<div class="item"> <img src="img/resources/apple-desk-office-working.jpg" alt="" class="img-responsive"> </div>
		<div class="item"> <img src="img/resources/pexels-photo-60740.jpg" alt="" class="img-responsive"> </div>
		<div class="item"> <img src="img/resources/desk-computer-imac-home.jpg" alt="" class="img-responsive"> </div>
	</div>
</div>

Tab/Accordion

Tab

Sorem ipsum dolor itaque fringilla, accumsan risus a, sodales justo.Lorem facere, dui? Soluta wisi sit amet, consectetur adipiscing elit. Morbi hendrerit ultricies mattis. Ut sagittis laoreet nisi, a hendrerit justo ornare eget. Nunc nec quam facere, dui? Soluta wisi. Dictum eum id eaque tempora neque, eaque itaque fringilla, accumsan risus a, sodales justo.Lorem facere, dui? Soluta wisi. Dictum eum id eaque tempora neque, eaque itaqueipsum dolor sit amet

Sorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit ultricies mattis. Ut sagittis laoreet nisi, a hendrerit justo ornare eget. Nunc nec quam facere, dui? Soluta wisi. Dictum eum id eaque tempora neque, eaque itaque fringilla, accumsan risus a, sodales justo.Lorem facere, dui? Soluta wisi. Dictum eum id eaque tempora neque, eaque itaqueipsum dolor sit itaque fringilla, accumsan risus a, sodales justo.Lorem facere, dui? Soluta wisi amet

Sorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit ultricies mattis. Ut sagittis laoreet nisi, a hendrerit justo ornare eget. Nunc nec quam facere, dui? Soluta wisi. Dictum eum id eaque tempora neque, eaque itaque fringilla, accumsan risus a, sodales justo.Lorem facere, dui? Soluta wisi itaque fringilla, accumsan risus a, sodales justo.Lorem facere, dui? Soluta wisi. Dictum eum id eaque tempora neque, eaque itaqueipsum dolor sit amet

<div class="core-features-tabs-sec">

		<!-- Nav tabs -->
		<ul role="tablist">
			 
			<li class=""> <a href="#core2" aria-controls="core2" role="tab" data-toggle="tab" aria-expanded="false"><span class="lnr lnr-eye"></span> Change color quick</a> </li>
			<li class=""> <a href="#core3" aria-controls="core3" role="tab" data-toggle="tab" aria-expanded="false"><span class="lnr lnr-inbox"></span> Quick backup</a> </li>
			<li class="active"> <a href="#core4" aria-controls="core4" role="tab" data-toggle="tab" aria-expanded="true"><span class="lnr lnr-smartphone"></span> Responsive devices</a> </li>
		</ul>

		<!-- Tab panes -->
		<div class="tab-content">
			 
			<div class="tab-pane" id="core2">
				<p>Sorem ipsum dolor itaque fringilla, accumsan risus a, sodales justo.Lorem facere, dui? Soluta wisi sit amet, consectetur adipiscing elit. Morbi hendrerit ultricies mattis. Ut sagittis laoreet nisi, a hendrerit justo ornare eget. Nunc nec quam facere, dui? Soluta wisi. Dictum eum id eaque tempora neque, eaque itaque fringilla, accumsan risus a, sodales justo.Lorem facere, dui? Soluta wisi. Dictum eum id eaque tempora neque, eaque itaqueipsum dolor sit amet</p>
			</div>
			<div class="tab-pane" id="core3">
				<p>Sorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit ultricies mattis. Ut sagittis laoreet nisi, a hendrerit justo ornare eget. Nunc nec quam facere, dui? Soluta wisi. Dictum eum id eaque tempora neque, eaque itaque fringilla, accumsan risus a, sodales justo.Lorem facere, dui? Soluta wisi. Dictum eum id eaque tempora neque, eaque itaqueipsum dolor sit itaque fringilla, accumsan risus a, sodales justo.Lorem facere, dui? Soluta wisi amet</p>
			</div>
			<div class="tab-pane active" id="core4">
				<p>Sorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit ultricies mattis. Ut sagittis laoreet nisi, a hendrerit justo ornare eget. Nunc nec quam facere, dui? Soluta wisi. Dictum eum id eaque tempora neque, eaque itaque fringilla, accumsan risus a, sodales justo.Lorem facere, dui? Soluta wisi itaque fringilla, accumsan risus a, sodales justo.Lorem facere, dui? Soluta wisi. Dictum eum id eaque tempora neque, eaque itaqueipsum dolor sit amet</p>
			</div>
		</div>
	</div>

Accordion

Ut consectetur ullamcorper purus a rutrum. Etiam dui nisi, hendrerit feugiat scelerisque et, cursus eu magna.
Nullam pretium fermentum sapien ut convallis. Suspendisse vehicula, magna non tristique tincidunt, massa nisi luctus tellus, vel laoreet sem lectus ut nibh.
Praesent leo quam, faucibus at facilisis id, rhoncus sit amet metus. Sed vitae ipsum non nibh mattis congue eget id augue.
<div class="row">
		<div id="accordion" class="panel-group">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Collapsible Group Item #1</a></h4>
				</div>
				<div id="collapseOne" class="panel-collapse collapse in">
					<div class="panel-body">Ut consectetur ullamcorper purus a rutrum. Etiam dui nisi, hendrerit feugiat scelerisque et, cursus eu magna. </div>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Collapsible Group Item #2</a></h4>
				</div>
				<div id="collapseTwo" class="panel-collapse collapse">
					<div class="panel-body">Nullam pretium fermentum sapien ut convallis. Suspendisse vehicula, magna non tristique tincidunt, massa nisi luctus tellus, vel laoreet sem lectus ut nibh. </div>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Collapsible Group Item #3</a></h4>
				</div>
				<div id="collapseThree" class="panel-collapse collapse">
					<div class="panel-body">Praesent leo quam, faucibus at facilisis id, rhoncus sit amet metus. Sed vitae ipsum non nibh mattis congue eget id augue. </div>
				</div>
			</div>
		</div>
	</div> 

Contact Form

<div class="row">
	<div class="col-md-12 animatedParent animateOnce" data-appear-top-offset="-300">
		<!-- footer contact form starts -->
		<div class="contact-sec animated fadeInDown">
			<form role="form" id="contactForm" data-toggle="validator" class="shake">
				<div class="row">
					<div class="form-group col-md-6 col-sm-6">
						<input type="text" placeholder="Name*" class="form-control" id="name" required>
						<div class="help-block with-errors"></div>
					</div>
					<div class="form-group col-md-6 col-sm-6">
						<input type="email" placeholder="Email*" class="form-control" id="email" required>
						<div class="help-block with-errors"></div>
					</div>
				</div>
				<div class="row">
					<div class="form-group col-md-12 col-sm-12">
						<textarea id="message" class="form-control" rows="5" placeholder="Enter your message*" required></textarea>
						<div class="help-block with-errors"></div>
					</div>
				</div>
				<div class="row">
					<div class="form-group col-md-12 col-sm-12">
						<button type="submit" id="form-submit">Submit</button>
						<div id="msgSubmit"></div>
						<div class="clearfix"></div>
					</div>
				</div>
			</form>
		</div>
		<!-- footer contact form ends -->
	</div>
	<!-- end col-md-12 -->
</div>

Latest Posts showcase

<div class="row">
                <div class="col-md-12">
                    <div class="title-main">
                        <h2>Latest posts</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam auctor est sit amet imperdiet rhoncus.</p>
                    </div>
                    <!-- end title-main -->
                    <div class="blog-sec">
                        <div class="row">
                            <div class="col-md-6 col-sm-6 animatedParent animateOnce">
                                <div class="blog-post-area animated fadeInLeftShort">
                                    <div class="blog-post-img"> <img src="img/resources/blog1.jpg" alt="" class="img-responsive">
                                        <div class="blog-img-hover"> <a href="#"><span class="lnr lnr-heart"></span></a> <a href="#"><span class="lnr lnr-picture"></span></a> <a href="single-blog-post.html"><span class="lnr lnr-link"></span></a> </div>
                                    </div>
                                    <div class="blog-post-details">
                                        <h3><a href="single-blog-post.html">REVEALED: THE HIDDEN HABITS THAT COST YOU MONEY ARE YOU LOSING OUT BY YOUR BILLS?</a></h3>
                                        <div class="blog-post-bio"> <span>Jul 9, 2016</span> <span class="sep">/</span> <span class="post-by">Admin</span> <span class="sep">/</span> <span class="post-tag">Life</span> </div>
                                        <!-- end blog-post-bio -->
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam auctor est sit amet imperdiet rhoncus. Donec eu posuere magna. Donec accumsan, lorem lobortis imperdiet efficitur, ligula felis malesuada magna, eu posuere augue elit ac diam. Proin nisi dui, sollicitudin sit amet..</p>
                                    </div>
                                    <!-- end blog-post-details -->

                                </div>
                                <!-- end blog-post-area -->
                            </div>
                            <!-- end col-md-6 -->
                            <div class="col-md-6 col-sm-6 animatedParent animateOnce" data-sequence="100">
                                <div class="blog-sm-post animated fadeInRightShort" data-id="1">
                                    <div class="row">
                                        <div class="col-md-5">
                                            <div class="blog-post-area">
                                                <div class="blog-post-img"> <img src="img/resources/blog2.jpg" alt="" class="img-responsive">
                                                    <div class="blog-img-hover"> <a href="#"><span class="lnr lnr-heart"></span></a> <a href="#"><span class="lnr lnr-picture"></span></a> <a href="single-blog-post.html"><span class="lnr lnr-link"></span></a> </div>
                                                </div>
                                            </div>
                                            <!-- end blog-post-area -->
                                        </div>
                                        <!-- end col-md-5 -->
                                        <div class="col-md-7">
                                            <div class="blog-post-details">
                                                <h3><a href="single-blog-post.html">FOUR WAYS TO CHEER YOURSELF UP ON BLUE MONDAY!</a></h3>
                                                <div class="blog-post-bio"> <span>Jul 9, 2016</span> <span class="sep">/</span> <span class="post-by">Admin</span> <span class="sep">/</span> <span class="post-tag">Life</span> </div>
                                                <!-- end blog-post-bio -->
                                                <p>Vivamus enim nulla, posuere vitae faucibus ac, porta in nisi. Integer pellentesque</p>
                                            </div>
                                            <!-- end blog-post-details -->
                                        </div>
                                        <!-- end col-md-7 -->
                                    </div>
                                </div>
                                <!-- blog-sm-post -->

                                <div class="blog-sm-post animated fadeInRightShort" data-id="2">
                                    <div class="row">
                                        <div class="col-md-5">
                                            <div class="blog-post-area">
                                                <div class="blog-post-img"> <img src="img/resources/blog3.jpg" alt="" class="img-responsive">
                                                    <div class="blog-img-hover"> <a href="#"><span class="lnr lnr-heart"></span></a> <a href="#"><span class="lnr lnr-picture"></span></a> <a href="single-blog-post.html"><span class="lnr lnr-link"></span></a> </div>
                                                </div>
                                            </div>
                                            <!-- end blog-post-area -->
                                        </div>
                                        <!-- end col-md-5 -->
                                        <div class="col-md-7">
                                            <div class="blog-post-details">
                                                <h3><a href="single-blog-post.html">IN THE NEWS; THIS WEEK’S TOP NEWS STORIES</a></h3>
                                                <div class="blog-post-bio"> <span>Jul 9, 2016</span> <span class="sep">/</span> <span class="post-by">Admin</span> <span class="sep">/</span> <span class="post-tag">Life</span> </div>
                                                <!-- end blog-post-bio -->
                                                <p>Vivamus enim nulla, posuere vitae faucibus ac, porta in nisi. Integer pellentesque</p>
                                            </div>
                                            <!-- end blog-post-details -->
                                        </div>
                                        <!-- end col-md-7 -->
                                    </div>
                                </div>
                                <!-- blog-sm-post -->

                                <div class="blog-sm-post animated fadeInRightShort" data-id="3">
                                    <div class="row">
                                        <div class="col-md-5">
                                            <div class="blog-post-area">
                                                <div class="blog-post-img"> <img src="img/resources/blog4.jpg" alt="" class="img-responsive">
                                                    <div class="blog-img-hover"> <a href="#"><span class="lnr lnr-heart"></span></a> <a href="#"><span class="lnr lnr-picture"></span></a> <a href="single-blog-post.html"><span class="lnr lnr-link"></span></a> </div>
                                                </div>
                                            </div>
                                            <!-- end blog-post-area -->
                                        </div>
                                        <!-- end col-md-5 -->
                                        <div class="col-md-7">
                                            <div class="blog-post-details">
                                                <h3><a href="single-blog-post.html">HOW DOES YOUR HOUSEHOLD SPEND COMPARE</a></h3>
                                                <div class="blog-post-bio"> <span>Jul 9, 2016</span> <span class="sep">/</span> <span class="post-by">Admin</span> <span class="sep">/</span> <span class="post-tag">Life</span> </div>
                                                <!-- end blog-post-bio -->
                                                <p>Vivamus enim nulla, posuere vitae faucibus ac, porta in nisi. Integer pellentesque</p>
                                            </div>
                                            <!-- end blog-post-details -->
                                        </div>
                                        <!-- end col-md-7 -->
                                    </div>
                                </div>
                                <!-- blog-sm-post -->
                            </div>
                            <!-- end col-md-6 -->
                        </div>
                        <!-- end row -->
                    </div>
                    <!-- end blog sec -->

                </div>
                <!-- end col-md-12 -->
            </div>
            <!-- end row -->

Tags

Reference: Footer
<div class="footer-sec tags">          
	<a href="#"><span class="lnr lnr-tag"></span> Nature</a> <a href="#"><span class="lnr lnr-tag"></span> Photography</a> <a href="#"><span class="lnr lnr-tag"></span> Nature</a> <a href="#"><span class="lnr lnr-tag"></span> Nature</a> <a href="#"><span class="lnr lnr-tag"></span> Photography</a> <a href="#"><span class="lnr lnr-tag"></span> Nature</a> 
</div>

Footer Social Icons

Reference: Footer
<div class="footer-social"> <a class="facebook" href="#"><i class="fa fa-facebook"></i></a> <a class="twitter" href="#"><i class="fa fa-twitter"></i></a> <a class="gplus" href="#"><i class="fa fa-google-plus"></i></a> <a class="youtube" href="#"><i class="fa fa-youtube"></i></a> </div>

CSS3 black/white filter

<img class="img-responsive desaturate" src="img/7e0cb2166ce8.jpg">

To the Top

Reference: index.html
<a href="#" class="scrollToTop" style="display: inline;"><span class="lnr lnr-arrow-up"></span><br>To Top</a>

Image Left/Right Align

Ut rem malesuada sociis quibusdam elementum, netus, quisquam? Ridiculus egestas! Voluptatibus amet tincidunt congue? Lacinia nostra, lectus dignissim! Tristique! Mus, minus voluptas quam diamlorem, donec sem accusamus Praesentium conubia saepe! Odio, laoreet laboris optio? Quod. Alias consequuntur velit auctor scelerisque mollitia ea, magna. Vero corporis, quibusdam duis numquam, cum montes purus, hendrerit rhoncus aute, aute omnis ducimus. Feugiat proident, urna curae primis feugiat! Aspernatur esse! Quo eget eveniet mollis per cumque perferendis exercitation class cubilia! Integer dolore potenti, occaecat faucibus dolore doloremque facilis odit taciti? Pharetra laborum. Praesentium conubia saepe! Odio, laoreet laboris optio? Quod. Alias consequuntur velit auctor scelerisque mollitia ea, magna. Vero corporis, quibusdam duis numquam, cum montes purus, hendrerit rhoncus aute, aute omnis ducimus. Feugiat proident, urna curae primis feugiat! Aspernatur esse! Quo eget eveniet mollis per cumque perferendis exercitation class cubilia! Integer dolore potenti, occaecat faucibus dolore doloremque facilis odit taciti? Pharetra laborum. praesentium urna fuga, unde in harum quia sint mus, reiciendis ipsam nisl vehicula, nascetur repellendus, eum class. Duis vehicula tristique occaecat quae unde odio elit, sapien dicta repellendus cillum. Odit pretium exercitation viverra.

Ut rem malesuada sociis quibusdam elementum, netus, quisquam? Ridiculus egestas! Voluptatibus amet tincidunt congue? Lacinia nostra, lectus dignissim! TristiquePraesentium conubia saepe! Odio, laoreet laboris optio? Quod. Alias consequuntur velit auctor scelerisque mollitia ea, magna. Vero corporis, quibusdam duis numquam, cum montes purus, hendrerit rhoncus aute, aute omnis ducimus. Feugiat proident, urna curae primis feugiat! Aspernatur esse! Quo eget eveniet mollis per cumque perferendis exercitation class cubilia! Integer dolore potenti, occaecat faucibus dolore doloremque facilis odit taciti? Pharetra laborum. Praesentium conubia saepe! Odio, laoreet laboris optio? Quod. Alias consequuntur velit auctor scelerisque mollitia ea, magna. Vero corporis, quibusdam duis numquam, cum montes purus, hendrerit rhoncus aute, aute omnis ducimus. Feugiat proident, urna curae primis feugiat! Aspernatur esse! Quo eget eveniet mollis per cumque perferendis exercitation class cubilia! Integer dolore potenti, occaecat faucibus dolore doloremque facilis odit taciti? Pharetra laborum. ! Mus, minus voluptas quam diamlorem, donec sem accusamus praesentium urna fuga, unde in harum quia sint mus, reiciendis ipsam nisl vehicula, nascetur repellendus, eum class. Duis vehicula tristique occaecat quae unde odio elit, sapien dicta repellendus cillum. Odit pretium exercitation viverra.

<img class="alignleft" src="img/Cgq-WVGU4AAKfbq.jpg" width="300"> 
	  <img class="alignright" src="img/Cgq-WVGU4AAKfbq.jpg" width="300">

Blockquote

Odio ridiculus minim alias consectetuer orci eaque cum ipsa voluptates? Enim urna, sed orci hic, aenean? Senectus taciti tempore dictumst animi? Nobis per, iaculis fusce quidem odit ullamco metus officia class pariatur, fugit volutpat arcu deserunt. Sodales accusamus sociosqu vivamus dolor impedit eos gravida, elit! Ab praesentium nunc quisque exercitationem provident natus mollis voluptates, unde nihil aspernatur eius sollicitudin amet.

<blockquote>
	<p>Odio ridiculus minim alias consectetuer orci eaque cum ipsa voluptates? Enim urna, sed orci hic, aenean? Senectus taciti tempore dictumst animi? Nobis per, iaculis fusce quidem odit ullamco metus officia class pariatur, fugit volutpat arcu deserunt. Sodales accusamus sociosqu vivamus dolor impedit eos gravida, elit! Ab praesentium nunc quisque exercitationem provident natus mollis voluptates, unde nihil aspernatur eius sollicitudin amet.</p>
</blockquote>

Odio ridiculus minim alias consectetuer orci eaque cum ipsa voluptates? Enim urna, sed orci hic, aenean? Senectus taciti tempore dictumst animi? Nobis per, iaculis fusce quidem odit ullamco metus officia class pariatur, fugit volutpat arcu deserunt. Sodales accusamus sociosqu vivamus dolor impedit eos gravida, elit! Ab praesentium nunc quisque exercitationem provident natus mollis voluptates, unde nihil aspernatur eius sollicitudin amet.

<div class="single-main-content">
<blockquote>
	<p>Odio ridiculus minim alias consectetuer orci eaque cum ipsa voluptates? Enim urna, sed orci hic, aenean? Senectus taciti tempore dictumst animi? Nobis per, iaculis fusce quidem odit ullamco metus officia class pariatur, fugit volutpat arcu deserunt. Sodales accusamus sociosqu vivamus dolor impedit eos gravida, elit! Ab praesentium nunc quisque exercitationem provident natus mollis voluptates, unde nihil aspernatur eius sollicitudin amet.</p>
</blockquote>
</div>

Logo / Brand Showcase

<div class="row">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<div class="brands">
					<div class="col-md-3 col-sm-3"><a href="#"><img src="img/resources/jquery.png" alt=""></a></div>
					<div class="col-md-3 col-sm-3"><a href="#"><img src="img/resources/facebook.png" alt=""></a></div>
					<div class="col-md-3 col-sm-3"><a href="#"><img src="img/resources/dribbble.png" alt=""></a></div>
					<div class="col-md-3 col-sm-3"><a href="#"><img src="img/resources/envato.png" alt=""></a></div>
				</div>
				<!-- envato -->
			</div>
			<!-- end col-md-12 -->
		</div>
		<!-- end row -->
	</div>
	<!-- end main container -->
</div>

Big First Letter(dropcap)

<div class="row">
    <div class="col-md-3 col-sm-6">
        <div class="footer-sec about">
            <p style="padding: 10px;"><span class="first-big-letter">L</span>olor sit amet, consectetur adipiscing elit. Nam uegt leo scelerisque pellentesque et quis diam. Suspendisse posuere vel odio a facilisis.</p>
        </div>
    </div>
</div>