Rounded Skills Bar1

86%

html5

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae.

75

css3

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae.

55

development

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae.

80

design

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae

		
          <div class="spd-row spd-padding-top-bottom-50">
  <h3 class="spd-text-center spd-padding-bottom-50">Rounded Skills Bar1</h3>
  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">
    <div class="spd-chart"> <span class="chart spd-n-chart-pie2" data-percent="86"> <span class="percent2">
      <h3>86%</h3>
      </span> </span>
      <h3> html5</h3>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae. </p>
    </div>
  </div>
  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">
    <div class="spd-chart"> <span class="chart spd-n-chart-pie2" data-percent="75"> <span class="percent">75</span> </span>
      <h3> css3</h3>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae. </p>
    </div>
  </div>
  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">
    <div class="spd-chart"> <span class="chart spd-n-chart-pie2" data-percent="55"> <span class="percent">55</span> </span>
      <h3> development</h3>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae. </p>
    </div>
  </div>
  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">
    <div class="spd-chart"> <span class="chart spd-n-chart-pie2" data-percent="80"> <span class="percent">80</span> </span>
      <h3> design</h3>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae </p>
    </div>
  </div>
</div>

Rounded Skills Bar2

html5

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae.

css3

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae.

development

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae.

seo

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae

	
          <div class="spd-row spd-padding-top-bottom-50">
  <h3 class="spd-text-center spd-padding-bottom-50">Rounded Skills Bar2</h3>
  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">
    <div class="spd-chart"> <span class="chart2" data-percent="86"> <span class="percent2"> <i class="fa fa-html5 fa-2x"></i></span> </span>
      <h3> html5</h3>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae. </p>
    </div>
  </div>
  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">
    <div class="spd-chart"> <span class="chart2" data-percent="75"> <span class="percent2"> <i class="fa fa-css3 fa-2x"></i></span> </span>
      <h3> css3</h3>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae. </p>
    </div>
  </div>
  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">
    <div class="spd-chart"> <span class="chart2" data-percent="55"> <span class="percent2"> <i class="fa fa-desktop fa-2x"></i></span> </span>
      <h3> development</h3>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae. </p>
    </div>
  </div>
  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">
    <div class="spd-chart"> <span class="chart2" data-percent="80"> <span class="percent2"> <i class="fa fa-leaf fa-2x"></i></span> </span>
      <h3> seo</h3>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae </p>
    </div>
  </div>
</div>

Rounded Skills Bar3

HTML

html5

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae.

CSS

css3

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae.

DNN

development

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae.

SEO

seo

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae

		             
          <div class="spd-row spd-padding-top-bottom-50">
  <h3 class="spd-text-center spd-padding-bottom-50">Rounded Skills Bar3</h3>
  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">
    <div class="spd-chart"> <span class="chart" data-percent="86"> <span class="percent2">
      <h3>HTML</h3>
      </span> </span>
      <h3> html5</h3>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae. </p>
    </div>
  </div>
  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">
    <div class="spd-chart"> <span class="chart" data-percent="75"> <span class="percent2">
      <h3>CSS</h3>
      </span> </span>
      <h3> css3</h3>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae. </p>
    </div>
  </div>
  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">
    <div class="spd-chart"> <span class="chart" data-percent="55"> <span class="percent2">
      <h3>DNN</h3>
      </span> </span>
      <h3> development</h3>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae. </p>
    </div>
  </div>
  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">
    <div class="spd-chart"> <span class="chart" data-percent="80"> <span class="percent2">
      <h3>SEO</h3>
      </span> </span>
      <h3> seo</h3>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae </p>
    </div>
  </div>
</div>

Counter box1

4,567

Projects

567

Clients

67

Themes

50+

Pages

	
          
          <div class="spd-row spd-padding-top-bottom-50">
  <h3 class="spd-text-center spd-padding-bottom-50">Counter box1</h3>
  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">
    <div class="counter-box"> <span class="spd-counter bigcount">4,567</span>
      <h3>Projects</h3>
    </div>
  </div>
  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">
    <div class="counter-box"> <span class="spd-counter bigcount">567</span>
      <h3>Clients</h3>
    </div>
  </div>
  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">
    <div class="counter-box"> <span class="spd-counter bigcount">67</span>
      <h3>Themes</h3>
    </div>
  </div>
  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">
    <div class="counter-box"> <span class="spd-counter bigcount">50</span><span class="counter-ex">+</span>
      <h3>Pages</h3>
    </div>
  </div>
</div>

Counter box2

3000

happy clients

200

shortcode & items

77%

cups of coffee

50K

followers

		      
          <div class="spd-row spd-padding-top-bottom-50">
  <h3 class="spd-text-center spd-padding-bottom-50">Counter box2</h3>
  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">
    <div class="counter-box"> <i class="fa fa-briefcase fa-3x"></i> <span class="spd-counter mediumcount">3000</span>
      <h4>happy clients</h4>
    </div>
  </div>
  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">
    <div class="counter-box"> <i class="fa fa-globe fa-3x"></i> <span class="spd-counter mediumcount">200</span>
      <h4>shortcode &amp; items</h4>
    </div>
  </div>
  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">
    <div class="counter-box"> <i class="fa fa-download fa-3x"></i> <span class="spd-counter mediumcount">77</span><span class="counter-ex2">%</span>
      <h4>cups of coffee</h4>
    </div>
  </div>
  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">
    <div class="counter-box"> <i class="fa fa-send-o fa-3x"></i> <span class="spd-counter mediumcount">50</span><span class="counter-ex2">K</span>
      <h4>followers</h4>
    </div>
  </div>
</div>

Counter box3

3000

happy clients

200

shortcodes

77%

cups of coffee

50K

followers

		            
          <div class="spd-row spd-padding-top-bottom-50">
  <h3 class="spd-text-center spd-padding-bottom-50">Counter box3</h3>
  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">
    <div class="counter-box2">
      <div class="count-inline">
        <div class="count-left"> <i class="fa fa-briefcase fa-4x"></i> </div>
        <div class="count-right"> <span class="spd-counter mediumcount">3000</span>
          <h4>happy clients</h4>
        </div>
      </div>
    </div>
  </div>
  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">
    <div class="counter-box2">
      <div class="count-inline">
        <div class="count-left"> <i class="fa fa-download fa-4x"></i> </div>
        <div class="count-right"> <span class="spd-counter mediumcount">200</span>
          <h4>shortcodes</h4>
        </div>
      </div>
    </div>
  </div>
  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">
    <div class="counter-box2">
      <div class="count-inline">
        <div class="count-left"> <i class="fa fa-globe fa-4x"></i> </div>
        <div class="count-right"> <span class="spd-counter mediumcount">77</span><span class="counter-ex2">%</span>
          <h4>cups of coffee</h4>
        </div>
      </div>
    </div>
  </div>
  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">
    <div class="counter-box2">
      <div class="count-inline">
        <div class="count-left"> <i class="fa fa-send-o fa-4x"></i> </div>
        <div class="count-right"> <span class="spd-counter mediumcount">50</span><span class="counter-ex2">K</span>
          <h4>followers</h4>
        </div>
      </div>
    </div>
  </div>
</div>