Shortcode

Arrows & Direction Icons

ti-arrow-up
ti-arrow-right
ti-arrow-left
ti-arrow-down
ti-arrows-vertical
ti-arrows-horizontal
ti-angle-up
ti-angle-right
ti-angle-left
ti-angle-down
ti-angle-double-up
ti-angle-double-right
ti-angle-double-left
ti-angle-double-down
ti-move
ti-fullscreen
ti-arrow-top-right
ti-arrow-top-left
ti-arrow-circle-up
ti-arrow-circle-right
ti-arrow-circle-left
ti-arrow-circle-down
ti-arrows-corner
ti-split-v
ti-split-v-alt
ti-split-h
ti-hand-point-up
ti-hand-point-right
ti-hand-point-left
ti-hand-point-down
ti-back-right
ti-back-left
ti-exchange-vertical

Web App Icons

ti-wand
ti-save
ti-save-alt
ti-direction
ti-direction-alt
ti-user
ti-link
ti-unlink
ti-trash
ti-target
ti-tag
ti-desktop
ti-tablet
ti-mobile
ti-email
ti-star
ti-spray
ti-signal
ti-shopping-cart
ti-shopping-cart-full
ti-settings
ti-search
ti-zoom-in
ti-zoom-out
ti-cut
ti-ruler
ti-ruler-alt-2
ti-ruler-pencil
ti-ruler-alt
ti-bookmark
ti-bookmark-alt
ti-reload
ti-plus
ti-minus
ti-close
ti-pin
ti-pencil
ti-pencil-alt
ti-paint-roller
ti-paint-bucket
ti-na
ti-medall
ti-medall-alt
ti-marker
ti-marker-alt
ti-lock
ti-unlock
ti-location-arrow
ti-layout
ti-layers
ti-layers-alt
ti-key
ti-image
ti-heart
ti-heart-broken
ti-hand-stop
ti-hand-open
ti-hand-drag
ti-flag
ti-flag-alt
ti-flag-alt-2
ti-eye
ti-import
ti-export
ti-cup
ti-crown
ti-comments
ti-comment
ti-comment-alt
ti-thought
ti-clip
ti-check
ti-check-box
ti-camera
ti-announcement
ti-brush
ti-brush-alt
ti-palette
ti-briefcase
ti-bolt
ti-bolt-alt
ti-blackboard
ti-bag
ti-world
ti-wheelchair
ti-car
ti-truck
ti-timer
ti-ticket
ti-thumb-up
ti-thumb-down
ti-stats-up
ti-stats-down
ti-shine
ti-shift-right
ti-shift-left
ti-shift-right-alt
ti-shift-left-alt
ti-shield
ti-notepad
ti-server
ti-pulse
ti-printer
ti-power-off
ti-plug
ti-pie-chart
ti-panel
ti-package
ti-music
ti-music-alt
ti-mouse
ti-mouse-alt
ti-money
ti-microphone
ti-menu
ti-menu-alt
ti-map
ti-map-alt
ti-location-pin
ti-light-bulb
ti-info
ti-infinite
ti-id-badge
ti-hummer
ti-home
ti-help
ti-headphone
ti-harddrives
ti-harddrive
ti-gift
ti-game
ti-filter
ti-files
ti-file
ti-zip
ti-folder
ti-envelope
ti-dashboard
ti-cloud
ti-cloud-up
ti-cloud-down
ti-clipboard
ti-calendar
ti-book
ti-bell
ti-basketball
ti-bar-chart
ti-bar-chart-alt
ti-archive
ti-anchor
ti-alert
ti-alarm-clock
ti-agenda
ti-write
ti-wallet
ti-video-clapper
ti-video-camera
ti-vector
ti-support
ti-stamp
ti-slice
ti-shortcode
ti-receipt
ti-pin2
ti-pin-alt
ti-pencil-alt2
ti-eraser
ti-more
ti-more-alt
ti-microphone-alt
ti-magnet
ti-line-double
ti-line-dotted
ti-line-dashed
ti-ink-pen
ti-info-alt
ti-help-alt
ti-headphone-alt
ti-gallery
ti-face-smile
ti-face-sad
ti-credit-card
ti-comments-smiley
ti-time
ti-share
ti-share-alt
ti-rocket
ti-new-window
ti-rss
ti-rss-alt

Control Icons

ti-control-stop
ti-control-shuffle
ti-control-play
ti-control-pause
ti-control-forward
ti-control-backward
ti-volume
ti-control-skip-forward
ti-control-skip-backward
ti-control-record
ti-control-eject

Text Editor

ti-paragraph
ti-uppercase
ti-underline
ti-text
ti-Italic
ti-smallcap
ti-list
ti-list-ol
ti-align-right
ti-align-left
ti-align-justify
ti-align-center
ti-quote-right
ti-quote-left

Layout Icons

ti-layout-width-full
ti-layout-width-default
ti-layout-width-default-alt
ti-layout-tab
ti-layout-tab-window
ti-layout-tab-v
ti-layout-tab-min
ti-layout-slider
ti-layout-slider-alt
ti-layout-sidebar-right
ti-layout-sidebar-none
ti-layout-sidebar-left
ti-layout-placeholder
ti-layout-menu
ti-layout-menu-v
ti-layout-menu-separated
ti-layout-menu-full
ti-layout-media-right
ti-layout-media-right-alt
ti-layout-media-overlay
ti-layout-media-overlay-alt
ti-layout-media-overlay-alt-2
ti-layout-media-left
ti-layout-media-left-alt
ti-layout-media-center
ti-layout-media-center-alt
ti-layout-list-thumb
ti-layout-list-thumb-alt
ti-layout-list-post
ti-layout-list-large-image
ti-layout-line-solid
ti-layout-grid4
ti-layout-grid3
ti-layout-grid2
ti-layout-grid2-thumb
ti-layout-cta-right
ti-layout-cta-left
ti-layout-cta-center
ti-layout-cta-btn-right
ti-layout-cta-btn-left
ti-layout-column4
ti-layout-column3
ti-layout-column2
ti-layout-accordion-separated
ti-layout-accordion-merged
ti-layout-accordion-list
ti-widgetized
ti-widget
ti-widget-alt
ti-view-list
ti-view-list-alt
ti-view-grid
ti-upload
ti-download
ti-loop
ti-layout-sidebar-2
ti-layout-grid4-alt
ti-layout-grid3-alt
ti-layout-grid2-alt
ti-layout-column4-alt
ti-layout-column3-alt
ti-layout-column2-alt

Brand Icons

ti-flickr
ti-flickr-alt
ti-instagram
ti-google
ti-github
ti-facebook
ti-dropbox
ti-dropbox-alt
ti-dribbble
ti-apple
ti-android
ti-yahoo
ti-trello
ti-stack-overflow
ti-soundcloud
ti-sharethis
ti-sharethis-alt
ti-reddit
ti-microsoft
ti-microsoft-alt
ti-linux
ti-jsfiddle
ti-joomla
ti-html5
ti-css3
ti-drupal
ti-wordpress
ti-tumblr
ti-tumblr-alt
ti-skype
ti-youtube
ti-vimeo
ti-vimeo-alt
ti-twitter
ti-twitter-alt
ti-linkedin
ti-pinterest
ti-pinterest-alt
ti-themify-logo
ti-themify-favicon
ti-themify-favicon-alt
Show code
		<span class="ti-arrow-up"></span>
	
Copy code

Headings

H1

H2

H3

H4

H5
H6
Show code
		<h1>H1</h1>
		<h2>H2</h2>
		<h3>H3</h3>
		<h4>H4</h4>
		<h5>H5</h5>
		<h6>H6</h6>
	
Copy code

Font sizes

Encrease your font size using .size class. Available classes .size5, .size6, .size7, .size8, .size9, .size10, .size11, .size12, .size13, .size14, .size16, .size18, .size20, .size22, .size24, .size26, .size28, .size30, .size32, .size34, .size36, .size38, .size40, .size42, .size44, .size46, .size48, .size50, .size55, .size56, .size60, .size70, .size80, .size90, .size100
Size Size Size Size Size Size Size Size Size Size Size Size Size Size Size Size
Show code
		<span class="size14">Size</span>
	
Copy code

Font Family

The default font is Open Sans. You can use clases like slim, normal, big, heavy
Open Sans Open Sans Open Sans Open Sans
Show code
		<span class="size18 slim">Open Sans</span>
		<span class="size18 normal">Open Sans</span>
		<span class="size18 big">Open Sans</span>
		<span class="size18 heavy">Open Sans</span>
	
Copy code

Styles

Here are some basic styling examples. You can use <b> tag or <strong> tag to bold your text. <mark> tag to highlight text, <i> for italic, you can even asociate some predefined colors to your text ( here is a list )

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, repudiandae, ratione, temporibus dolor consequatur nesciunt magni rerum consectetur esse fugit reprehenderit fuga quo deserunt quidem soluta vitae sed et aperiam.

Show code
			<strong>Lorem</strong> ipsum dolor <mark>sit amet</mark>, <i class="cmaincolor">consectetur adipisicing elit</i>. Non, repudiandae, ratione, <span class="caps cwhite bggreen">temporibus</span> dolor consequatur nesciunt magni rerum consectetur esse fugit reprehenderit fuga quo deserunt quidem soluta vitae sed et aperiam.
		
Copy code

Blockquotes

Make a paragraph stand out by adding .lead class.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Show code
			<blockquote>
			  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
			</blockquote>
			 <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
		
Copy code

Lead body copy

Make a paragraph stand out by adding .lead class.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Show code
			<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
		
Copy code

Labels, background & text colors

Add any of the below mentioned modifier classes to change the appearance of a label, background or text.
Default Primary Success Info Warning Danger
.c111 .c222 .c333 .c444 .c555 .c666 .c777 .c888 .c999
.cmaincolor .cmaincolor .cwhite .cblack .clight .clightgrey .cdark .cdarkgrey .ccealk .cblue .cgreen .cgreen2 .cgreen3 .cred

.bgmaincolor.bgsecondcolor.bgwhite.bgblack.bglightgrey.bggrey.bgdarkgrey.bgdark.bgdark2.bgcealk.lightbg.bgsoftlight.bgxlight.bglight.bglight2.bglight3.bglight4.bg000.bg111.bg222.bg333.bg444.bg555.bg666.bg777.bg888.bg999.bglime.bglightturquoise.bgturquoise.bglightgreen.bgturquoise2.bggreen.bggreen2.bgblue.bgblue2.bgblue3.bgdarkblue.bgred.bgorange.bgorange2.bgorange3
Show code
			<span class="label label-default">Default</span>
			<span class="label label-primary">Primary</span>
			<span class="label label-success">Success</span>
			<span class="label label-info">Info</span>
			<span class="label label-warning">Warning</span>
			<span class="label label-danger">Danger</span>
		
Copy code

Padding

Use .p20 to add a 20px padding to your content, or you can use .pt10, .pb10, .pl10, .pr10, .ptb10, .plr10
To cancel all paddings and margins use .nospace class.
Padding 1
Padding 2
Padding 3
Padding 4
Padding 5 - nospace
Show code
			<div class="borderall inline p5">Padding 1</div>
			<div class="borderall inline plr20 ptb10">Padding 2</div>
			<div class="borderall inline p30">Padding 3</div>
			<div class="borderall inline p50">Padding 4</div>
			<div class="borderall inline p60 nospace">Padding 5 - nospace</div>
		
Copy code

Blocks

If you need certain dimensions blocks you can create them easy as pye using .w100 and .h200 classes where w is the width and h is the height. Dimensions available from 10 to 10 up to 100 , from 50 to 50 up 1000px.
Show code
			<div class="w10 h10 borderall"></div>
			<div class="w20 h20 borderall"></div>
			<div class="w50 h50 borderall"></div>
			<div class="w100 h100 borderall"></div>
		
Copy code

Spacings and positions

Adjust block positions by adding the .mt10 class where mt is margin-top and 10 is the distance in pixels (change 10 with any number from 1 to 10 and from 10 to 10 up to 100px). You can use also negative values this way .mt-10.

Here are more examples .m10, .mt10, .mt-10, .mb10, .mb-10, .mt10, .mt-10, .mr10, .mr-10, .ml10, .ml-10, .mtb10, .mlr10
Show code
			<div class="col-md-2">
			<div class="w50 h50 borderall"></div>
			<div class="w50 h50 borderall"></div>
			</div>
			<div class="col-md-2">
			<div class="w50 h50 borderall"></div>
			<div class="w50 h50 borderall mt10 ml10"></div>
			</div>
			<div class="col-md-2">
			<div class="w50 h50 borderall mt-20"></div>
			<div class="w50 h50 borderall ml-10"></div>
			</div>
			<div class="col-md-2">
			<div class="w50 h50 borderall"></div>
			<div class="w50 h50 borderall mtb5"></div>
			<div class="w50 h50 borderall"></div>
			</div>
			<div class="col-md-2">
			<div class="w50 h50 borderall ml-30 mb-15 bglight"></div>
			<div class="w50 h50 borderall"></div>
			</div>
			<div class="col-md-2">
			<div class="w30 h30 borderall inline"></div>
			<div class="w30 h30 borderall inline mlr5"></div>
			<div class="w30 h30 borderall inline"></div>
			</div>
		
Copy code

Buttons

You cann add different classes to your button to style it as you want. Ex to make it round just add round, or caps to make inside text uppercase, or bold to make the text stronger. wfull to make the button full width. Basicaly you can custom build it as you want using the above tools from "Blocks", "Padding" and "Background & text colors"
Small Big Huge
Show code
			<a class="btn btnwhite btn-default" href="#"><i class="icon-article-alt"></i> Small</a>
			<a type="submit" class="btn btnwhitebig btn-default caps "><i class="icon-mail"></i> Big</a>
			<a href="#" class="btn btnwhitehuge btn-default">Huge</a>
			<a href="#" class="btn btnwhiteline2 fontproximabold caps >Purchase this template</a>
			<a class="btn btndarkline2 fontproximabold caps">Browse more pages</a>
			<button type="submit" class="btn btndarkline wfull fontproximalight caps">Browse our creative themes</button>
			<button type="submit" class="btn btnwhiteline wfull fontproximalight caps">Browse our creative themes</button>
			<button type="submit" class="btn btnwhitelineblue wfull fontproximalight caps">Browse our creative themes</button>
			<a class="btn btnorange fontproximalight plr50 caps">Browse more pages</a>
		
Copy code

Hover Effects Ideas

You can choose from a large variety of hover effects: example 1, example 2
img04

Dreamy Honey Now

View more
img11

Sweet Marley

Marley tried to convince her but she was not interested.

View more
img02

Fresh Bubba

Bubba likes to appear out of thin air.

View more
img06

Crazy Layla

When Layla appears, she brings an eternal summer along.

View more
img25

Creative Zoe

Zoe never had the patience of her sisters. She deliberately punched the bear in his face.

img09

Warm Oscar

Oscar is a decent man. He used to clean porches with pleasure.

View more

Tabs

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Show code
			<ul role="tablist" class="nav nav-tabs fb-tabs" id="myTab">
			  <li class="active"><a data-toggle="tab" role="tab" href="#tab">Tab</a></li>
			  <li class=""><a data-toggle="tab" role="tab" href="#tab2">Tab 2</a></li>
			  <li class=""><a data-toggle="tab" role="tab" href="#tab3">Tab 3</a></li>
			</ul>
			<div class="tab-content border" id="myTabContent">
			  <div id="tab" class="tab-pane fade active in">
			    <p class="p20">Content 1</p>
			  </div>
			  <div id="tab2" class="tab-pane fade">
			    <p class="p20">Content 2</p>
			  </div>
			  <div id="tab3" class="tab-pane fade">
			    <p class="p20">Content 3</p>
			  </div>
			</div>
		
Copy code

Tabs 2

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Show code
			<div class="bs-example-tabs">
			    <ul role="tablist" class="nav nav-tabs fb-tabs2" id="myTab2">
			      <li class="active"><a data-toggle="tab" role="tab" href="#tab-b">Tab</a></li>
			      <li class=""><a data-toggle="tab" role="tab" href="#tab2-b">Tab 2</a></li>
			      <li class=""><a data-toggle="tab" role="tab" href="#tab3-b">Tab 3</a></li>
			    </ul>
			    <div class="tab-content border" id="myTabContent2">
			      <div id="tab-b" class="tab-pane fade active in">
			        <p class="p20">Content 1</p>
			      </div>
			      <div id="tab2-b" class="tab-pane fade">
			        <p class="p20">Content 2</p>
			      </div>
			      <div id="tab3-b" class="tab-pane fade">
			        <p class="p20">Content 3</p>
			      </div>
			    </div>
			</div>
		
Copy code

Accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Show code
<!-- Accordion -->
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
<div class="panel-heading">
  <h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
  Collaps 1
</a>
  </h4>
  <span></span>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
  <div class="panel-body"><span></span>
Content 1
  </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">
  Collaps 2
</a>
  </h4>
  <span></span>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
  <div class="panel-body"><span></span>
Content 2
  </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">
  Collaps 3
</a>
  </h4>
  <span></span>
</div>
<div id="collapseThree" class="panel-collapse collapse">
  <div class="panel-body"><span></span>
 Content 3
  </div>
</div>
  </div>
</div>
<!-- End of Accordion -->
Copy code

Alerts

Show code
<div class="alert p15 alert-success" role="alert">
<span class="ti-check"></span> Congratulations!   
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
<div class="alert p15 alert-info" role="alert"><span class="ti-info"></span> Information!</div>
<div class="alert p15 alert-warning" role="alert"><span class="ti-alert"></span> Alert!</div>
<div class="alert p15 alert-danger" role="alert"><span class="ti-face-sad"></span> Error!</div>
Copy code

Pricing - 5 columns

  • Sign Up for
    Lorem ipsum dolor
    Sit amet
    Lorem ipsum dolor
    Sit amet
    Lorem ipsum dolor
  • Basic
    €9.99
    /month
    10
  • Professional
    €29.99
    /month
    100
    Unlimited
  • Premium
    €39.99
    /month
    500
    Unlimited
  • Ultimate
    €49.99
    /month
    Unlimited
    Unlimited
Show code
<div class="pricelist-wrapper dark col5">
  <ul>
    <li class="noselections">
      <div class="plistrow0">Sign Up for</div>
      <div class="plistrow2 plistprice"><img alt="" src="images/spacer.png"></div>
      <div class="plistrowbg">Lorem ipsum dolor</div>
      <div class="plistrow">Sit amet</div>
      <div class="plistrowbg">Lorem ipsum dolor</div>
      <div class="plistrow">Sit amet</div>
      <div class="plistrowbg">Lorem ipsum dolor</div>
      <div class="plistrow2"></div>
    </li>
    <li class="noselections">
      <div class="plistrow1">Basic</div>
      <div class="plistrow2"><span class="h9">€9.99</span><br><span class="smallp">/month</span></div>
      <div class="plistrowbg">10</div>
      <div class="plistrow"><span class="ti-check cgreen"></span></div>
      <div class="plistrowbg"><span class="ti-close cred"></span></div>
      <div class="plistrow"><span class="ti-check cgreen"></span></div>
      <div class="plistrowbg"><span class="ti-close cred"></span></div>
      <div class="plistrow2"><div class="button_ok"><a href="#">Buy</a></div></div>
    </li>
    <li class="plistselected">
      <div class="plistrow1">Professional</div>
      <div class="plistrow2"><span class="h9">€29.99</span><br><span class="smallp">/month</span></div>
      <div class="plistrowbg">100</div>
      <div class="plistrow pchecked"><span class="ti-check cgreen"></span></div>
      <div class="plistrowbg">Unlimited</div>
      <div class="plistrow"><span class="ti-check cgreen"></span></div>
      <div class="plistrowbg"><span class="ti-close cred"></span></div>
      <div class="plistrow2"><div class="button_ok"><a href="#">Buy</a></div></div>
    </li>
    <li class="noselections">
      <div class="plistrow1">Premium</div>
      <div class="plistrow2"><span class="h9">€39.99</span><br><span class="smallp">/month</span></div>
      <div class="plistrowbg">500</div>
      <div class="plistrow"><span class="ti-check cgreen"></span></div>
      <div class="plistrowbg">Unlimited</div>
      <div class="plistrow"><span class="ti-check cgreen"></span></div>
      <div class="plistrowbg"><span class="ti-check cgreen"></span></div>
      <div class="plistrow2"><div class="button_ok"><a href="#">Buy</a></div></div>
    </li>
    <li class="noselections">
      <div class="plistrow1">Ultimate</div>
      <div class="plistrow2"><span class="h9">€49.99</span><br><span class="smallp">/month</span></div>
      <div class="plistrowbg">Unlimited</div>
      <div class="plistrow"><span class="ti-check cgreen"></span></div>
      <div class="plistrowbg">Unlimited</div>
      <div class="plistrow"><span class="ti-check cgreen"></span></div>
      <div class="plistrowbg"><span class="ti-check cgreen"></span></div>
      <div class="plistrow2"><div class="button_ok"><a href="#">Buy</a></div></div>
    </li>
  </ul>
</div>
Copy code

Pricing - 4 columns

  • Sign Up for
    Lorem ipsum dolor
    Sit amet
    Lorem ipsum dolor
    Sit amet
    Lorem ipsum dolor
  • Basic
    €9.99
    /month
    10
  • Professional
    €29.99
    /month
    100
    Unlimited
  • Premium
    €39.99
    /month
    500
    Unlimited
Show code
<div class="pricelist-wrapper dark col4">
  <ul>
    <li class="noselections">
      <div class="plistrow0">Sign Up for</div>
      <div class="plistrow2 plistprice"><img alt="" src="images/spacer.png"></div>
      <div class="plistrowbg">Lorem ipsum dolor</div>
      <div class="plistrow">Sit amet</div>
      <div class="plistrowbg">Lorem ipsum dolor</div>
      <div class="plistrow">Sit amet</div>
      <div class="plistrowbg">Lorem ipsum dolor</div>
      <div class="plistrow2"></div>
    </li>
    <li>
      <div class="plistrow1">Basic</div>
      <div class="plistrow2"><span class="h9">€9.99</span><br><span class="smallp">/month</span></div>
      <div class="plistrowbg">10</div>
      <div class="plistrow"><span class="ti-check cgreen"></span></div>
      <div class="plistrowbg"><span class="ti-close cred"></span></div>
      <div class="plistrow"><span class="ti-check cgreen"></span></div>
      <div class="plistrowbg"><span class="ti-close cred"></span></div>
      <div class="plistrow2"><div class="button_ok"><a href="#">Buy</a></div></div>
    </li>
    <li>
      <div class="plistrow1">Professional</div>
      <div class="plistrow2"><span class="h9">€29.99</span><br><span class="smallp">/month</span></div>
      <div class="plistrowbg">100</div>
      <div class="plistrow"><span class="ti-check cgreen"></span></div>
      <div class="plistrowbg">Unlimited</div>
      <div class="plistrow"><span class="ti-check cgreen"></span></div>
      <div class="plistrowbg"><span class="ti-close cred"></span></div>
      <div class="plistrow2"><div class="button_ok"><a href="#">Buy</a></div></div>
    </li>
    <li>
      <div class="plistrow1">Premium</div>
      <div class="plistrow2"><span class="h9">€39.99</span><br><span class="smallp">/month</span></div>
      <div class="plistrowbg">500</div>
      <div class="plistrow"><span class="ti-check cgreen"></span></div>
      <div class="plistrowbg">Unlimited</div>
      <div class="plistrow"><span class="ti-check cgreen"></span></div>
      <div class="plistrowbg"><span class="ti-check cgreen"></span></div>
      <div class="plistrow2"><div class="button_ok"><a href="#">Buy</a></div></div>
    </li>
</ul>
</div>
Copy code

Pricing - 3 columns

  • Basic
    €9.99
    /month
    10
  • Professional
    €29.99
    /month
    100
    Unlimited
  • Premium
    €39.99
    /month
    500
    Unlimited
Show code
<div class="pricelist-wrapper dark col3">
  <ul>
    <li>
      <div class="plistrow1">Basic</div>
      <div class="plistrow2"><span class="h9">€9.99</span><br><span class="smallp">/month</span></div>
      <div class="plistrowbg">10</div>
      <div class="plistrow"><span class="ti-check cgreen"></span></div>
      <div class="plistrowbg"><span class="ti-close cred"></span></div>
      <div class="plistrow"><span class="ti-check cgreen"></span></div>
      <div class="plistrowbg"><span class="ti-close cred"></span></div>
      <div class="plistrow2"><div class="button_ok"><a href="#">Buy</a></div></div>
    </li>
    <li>
      <div class="plistrow1">Professional</div>
      <div class="plistrow2"><span class="h9">€29.99</span><br><span class="smallp">/month</span></div>
      <div class="plistrowbg">100</div>
      <div class="plistrow"><span class="ti-check cgreen"></span></div>
      <div class="plistrowbg">Unlimited</div>
      <div class="plistrow"><span class="ti-check cgreen"></span></div>
      <div class="plistrowbg"><span class="ti-close cred"></span></div>
      <div class="plistrow2"><div class="button_ok"><a href="#">Buy</a></div></div>
    </li>
    <li>
      <div class="plistrow1">Premium</div>
      <div class="plistrow2"><span class="h9">€39.99</span><br><span class="smallp">/month</span></div>
      <div class="plistrowbg">500</div>
      <div class="plistrow"><span class="ti-check cgreen"></span></div>
      <div class="plistrowbg">Unlimited</div>
      <div class="plistrow"><span class="ti-check cgreen"></span></div>
      <div class="plistrowbg"><span class="ti-check cgreen"></span></div>
      <div class="plistrow2"><div class="button_ok"><a href="#">Buy</a></div></div>
    </li>
  </ul>
</div>
Copy code

Pricing - 2 columns

  • Basic
    €9.99
    /month
    10
  • Professional
    €29.99
    /month
    100
    Unlimited
Show code
<div class="pricelist-wrapper dark col2">
  <ul>
    <li>
      <div class="plistrow1">Basic</div>
      <div class="plistrow2"><span class="h9">€9.99</span><br><span class="smallp">/month</span></div>
      <div class="plistrowbg">10</div>
      <div class="plistrow"><span class="ti-check cgreen"></span></div>
      <div class="plistrowbg"><span class="ti-close cred"></span></div>
      <div class="plistrow"><span class="ti-check cgreen"></span></div>
      <div class="plistrowbg"><span class="ti-close cred"></span></div>
      <div class="plistrow2"><div class="button_ok"><a href="#">Buy</a></div></div>
    </li>
    <li>
      <div class="plistrow1">Professional</div>
      <div class="plistrow2"><span class="h9">€29.99</span><br><span class="smallp">/month</span></div>
      <div class="plistrowbg">100</div>
      <div class="plistrow"><span class="ti-check cgreen"></span></div>
      <div class="plistrowbg">Unlimited</div>
      <div class="plistrow"><span class="ti-check cgreen"></span></div>
      <div class="plistrowbg"><span class="ti-close cred"></span></div>
      <div class="plistrow2"><div class="button_ok"><a href="#">Buy</a></div></div>
    </li>
  </ul>
</div>
<div class="clearfix p10"></div>
<img src="images/shadow.png" width="100%" class="relative mt-10" alt="">
Copy code

Skills

With auto trigger
BRANDING 90%
WEB DEVELOPING 100%
GRAPHIC DESIGN 85%
S.E.O. 95%
Show code
<div class="enableanimation">
<div class="progress-about margbar">
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="90" role="progressbar" class="progress-bar progress-bar-maincolor pbar1">
BRANDING 90%
  </div>
</div>
<div class="progress-about margbar">
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" role="progressbar" class="progress-bar progress-bar-maincolor pbar2">
WEB DEVELOPING 100%
  </div>
</div>
<div class="progress-about margbar">
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="85" role="progressbar" class="progress-bar progress-bar-maincolor pbar3">
GRAPHIC DESIGN 85%
  </div>
</div>
<div class="progress-about margbar mb50">
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="95" role="progressbar" class="progress-bar progress-bar-maincolor pbar4">
S.E.O. 95%
  </div>
</div>
</div>
Copy code
Static
70% Complete (success)
100% Complete (success)
85% Complete (success)
95% Complete (success)
Show code
<div class="progress flat nocorners">
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" role="progressbar" class="progress-bar progress-bar-red" style="width: 70%">
<span class="sr-only">70% Complete (success)</span>
  </div>
</div>
<div class="progress flat nocorners">
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" role="progressbar" class="progress-bar progress-bar-orange" style="width: 100%">
<span class="sr-only">100% Complete (success)</span>
  </div>
</div>
<div class="progress flat nocorners">
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="85" role="progressbar" class="progress-bar progress-bar-blue" style="width: 85%">
<span class="sr-only">85% Complete (success)</span>
  </div>
</div>
<div class="progress flat nocorners">
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="95" role="progressbar" class="progress-bar progress-bar-green" style="width: 95%">
<span class="sr-only">95% Complete (success)</span>
  </div>
</div>
Copy code

Tables

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.

Optional table caption.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Show code
<table class="table table-hover">
      <caption>Optional table caption.</caption>
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
</table>
Copy code

Use .table-striped to add zebra-striping to any table row within the <tbody>.

Optional table caption.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Show code
<table class="table table-striped">
      <caption>Optional table caption.</caption>
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
</table>
Copy code

Add .table-bordered for borders on all sides of the table and cells.

Optional table caption.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Show code
<table class="table table-bordered">
      <caption>Optional table caption.</caption>
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
</table>
Copy code

Subscribed