DNNGo demo dnn skin unlimited color pack 036 > Features > Short Codes

ProgressBars Counters

> >

Web Design

HTML5 & CSS3

Graphic Design

DNN

SOURCE CODE

<div class="chart_list row">
    <div class="col-sm-3">
        <div data-percent="65" class="percentage">
            <div class="percentage_inner"><span>0</span>%</div>
        </div>
        Web Design
    </div>
    <div class="col-sm-3">
        <div data-percent="70" class="percentage">
            <div class="percentage_inner"><span>0</span>%</div>
        </div>
        HTML5 &amp; CSS3
    </div>
    <div class="col-sm-3">
        <div data-percent="85" class="percentage">
            <div class="percentage_inner"><span>0</span>%</div>
        </div>
        Graphic Design
    </div>
    <div class="col-sm-3">
        <div data-percent="45" class="percentage">
            <div class="percentage_inner"><span>0</span>%</div>
        </div>
        DNN
    </div>
</div>

Web Design

HTML5 & CSS3

Graphic Design

DNN

SOURCE CODE

<div class="chart_list2 row">
    <div class="col-sm-3">
        <div data-percent="65" class="percentage2">
            <div class="percentage_inner"><span>0</span>%</div>
        </div>
        Web Design
    </div>
    <div class="col-sm-3">
        <div data-percent="70" class="percentage2">
            <div class="percentage_inner"><span>0</span>%</div>
        </div>
        HTML5 &amp; CSS3
    </div>
    <div class="col-sm-3">
        <div data-percent="85" class="percentage2">
            <div class="percentage_inner"><span>0</span>%</div>
        </div>
        Graphic Design
    </div>
    <div class="col-sm-3">
        <div data-percent="45" class="percentage2">
            <div class="percentage_inner"><span>0</span>%</div>
        </div>
        DNN
    </div>
</div>

Web Design

HTML5 & CSS3

Graphic Design

DNN

SOURCE CODE

<div class="chart_list row">
    <div class="col-sm-3">
        <div class="percentage color_1" data-percent="65">
            <div class="percentage_inner"><span>0</span>%</div>
        </div>
        Web Design
    </div>
    <div class="col-sm-3">
        <div class="percentage color_2" data-percent="70">
            <div class="percentage_inner"><span>0</span>%</div>
        </div>
        HTML5 &amp; CSS3
    </div>
    <div class="col-sm-3">
        <div class="percentage color_3" data-percent="85">
            <div class="percentage_inner"><span>0</span>%</div>
        </div>
        Graphic Design
    </div>
    <div class="col-sm-3">
        <div class="percentage color_4" data-percent="45">
            <div class="percentage_inner"><span>0</span>%</div>
        </div>
        DNN
    </div>
</div>

Web Design

HTML/CSS

Graphic Design

DNN

SOURCE CODE

<div class="loaded_list">
    <p> Web Design </p>
    <div class="progress progress-striped active">
        <div class="progress-bar animation animationwidth" data-width="90%"><span></span></div>
    </div>
    <p> HTML/CSS</p>
    <div class="progress progress-striped active">
        <div class="progress-bar animation animationwidth" data-width="95%"><span></span></div>
    </div>
    <p>Graphic Design
    </p>
    <div class="progress progress-striped active">
        <div class="progress-bar animation animationwidth" data-width="85%"><span></span> </div>
    </div>
    <p>DNN</p>
    <div class="progress progress-striped active">
        <div class="progress-bar animation animationwidth" data-width="75%"><span></span></div>
    </div>
</div>

Web Design

HTML/CSS

Graphic Design

DNN

SOURCE CODE

<div class="loaded_list2">
    <p> Web Design </p>
    <div class="progress progress-striped active">
        <div data-width="90%" class="progress-bar animation animationwidth color_1_bg"><span></span></div>
    </div>
    <p> HTML/CSS</p>
    <div class="progress progress-striped active">
        <div data-width="95%" class="progress-bar animation animationwidth color_2_bg"><span></span></div>
    </div>
    <p>Graphic Design </p>
    <p> </p>
    <div class="progress progress-striped active">
        <div data-width="85%" class="progress-bar animation animationwidth color_3_bg"><span></span> </div>
    </div>
    <p>DNN</p>
    <div class="progress progress-striped active">
        <div data-width="75%" class="progress-bar animation animationwidth color_4_bg"><span></span></div>
    </div>
</div>

SOURCE CODE

<div class="number_Animation row">
    <div class="col-sm-3"> 
        <span class="glyphicons glyph-user"> </span> <span class="animation  number" data-number="5300">0</span> 
    </div>
    <div class="col-sm-3"> 
        <span class="glyphicons glyph-heart"> </span> <span class="animation  number" data-number="10321">0</span> 
    </div>
    <div class="col-sm-3"> 
        <span class="glyphicons glyph-star"> </span> <span class="animation  number" data-number="4632">0</span> 
    </div>
    <div class="col-sm-3"> 
        <span class="glyphicons glyph-bookmark"> </span> <span class="animation  number" data-number="6548">0</span> 
    </div>
</div>

Web Design

Phasellus dignissim, purus at ornare fermentum, massa nulla enim nec tortor.

HTML5 & CSS3

Phasellus dignissim, purus at ornare fermentum, massa nulla enim nec tortor.

Javascript

Phasellus dignissim, purus at ornare fermentum, massa nulla enim nec tortor.

Programme

Phasellus dignissim, purus at ornare fermentum, massa nulla enim nec tortor.

SOURCE CODE

<div class="chart_list3 row">
    <div class="col-sm-3">
        <div data-percent="65" class="percentage3">
            <div class="percentage_inner"><span>0</span>%</div>
        </div>
        <h2> Web Design</h2>
        <p>Phasellus dignissim, purus at ornare fermentum, massa nulla enim nec tortor.</p>
    </div>
    <div class="col-sm-3">
        <div data-percent="70" class="percentage3">
            <div class="percentage_inner"><span>0</span>%</div>
        </div>
        <h2> HTML5 & CSS3</h2>
        <p>Phasellus dignissim, purus at ornare fermentum, massa nulla enim nec tortor.</p>
    </div>
    <div class="col-sm-3">
        <div data-percent="85" class="percentage3">
            <div class="percentage_inner"><span>0</span>%</div>
        </div>
        <h2>Javascript</h2>
        <p>Phasellus dignissim, purus at ornare fermentum, massa nulla enim nec tortor.</p>
    </div>
    <div class="col-sm-3">
        <div data-percent="45" class="percentage3">
            <div class="percentage_inner"><span>0</span>%</div>
        </div>
        <h2> Programme</h2>
        <p>Phasellus dignissim, purus at ornare fermentum, massa nulla enim nec tortor.</p>
    </div>
</div>

0 Customers

0 Downloads

0 Themes

0 Supports

SOURCE CODE

<div class="h2_bg pt-60 pb-60">
    <div class="dnn_layoutB">
        <div class="content_mid clearfix">
            <div class="pane_layout">
                <div class="row number_Animation2">
                    <div class="col-md-3 col-sm-6">
                        <div class="number_box"> <span class="animation number" data-number="12578">0</span> <span class="number_name">Customers</span> </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="number_box"> <span class="animation number" data-number="2660">0</span> <span class="number_name">Downloads</span> </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="number_box"> <span class="animation number" data-number="520">0</span> <span class="number_name">Themes</span> </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="number_box"> <span class="animation number" data-number="3900">0</span> <span class="number_name">Supports</span> </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Web Design

HTML/CSS

Graphic Design

DNN

Web Design

HTML/CSS

Graphic Design

DNN

SOURCE CODE

			
<div class=" row">
    <div class="col-sm-6">
        <div class="loaded_list4">
            <p> Web Design </p>
            <div class="progress progress-striped active">
                <div class="progress-bar animation animationwidth" data-width="90%"><span></span></div>
            </div>
            <p> HTML/CSS</p>
            <div class="progress progress-striped active">
                <div class="progress-bar animation animationwidth" data-width="95%"><span></span></div>
            </div>
            <p>Graphic Design </p>
            <div class="progress progress-striped active">
                <div class="progress-bar animation animationwidth" data-width="85%"><span></span> </div>
            </div>
            <p>DNN</p>
            <div class="progress progress-striped active">
                <div class="progress-bar animation animationwidth" data-width="75%"><span></span></div>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="loaded_list4">
            <p> Web Design </p>
            <div class="progress progress-striped active">
                <div class="progress-bar animation animationwidth" data-width="90%"><span></span></div>
            </div>
            <p> HTML/CSS</p>
            <div class="progress progress-striped active">
                <div class="progress-bar animation animationwidth" data-width="95%"><span></span></div>
            </div>
            <p>Graphic Design </p>
            <div class="progress progress-striped active">
                <div class="progress-bar animation animationwidth" data-width="85%"><span></span> </div>
            </div>
            <p>DNN</p>
            <div class="progress progress-striped active">
                <div class="progress-bar animation animationwidth" data-width="75%"><span></span></div>
            </div>
        </div>
    </div>
</div>

Web Design

HTML/CSS

Graphic Design

DNN

SOURCE CODE

<div class="our_team2">
    <div class="progress_font"> Web Design </div>
    <div class="progress progress-striped active">
        <div data-width=" 90%" class="progress-bar animation animationwidth"><span></span></div>
    </div>
    <div class="progress_font"> HTML/CSS</div>
    <div class="progress progress-striped active">
        <div data-width=" 95%" class="progress-bar animation animationwidth"><span></span></div>
    </div>
    <div class="progress_font"> Graphic Design</div>
    <div class="progress progress-striped active">
        <div data-width=" 85%" class="progress-bar animation animationwidth"><span></span></div>
    </div>
    <div class="progress_font"> DNN</div>
    <div class="progress progress-striped active">
        <div data-width=" 75%" class="progress-bar animation animationwidth"><span></span></div>
    </div>
</div>

Web Design

Duis autem vel eum iriure dolor in dolore eu feugiat nulla facilisis at vero eros et accumsan.

HTML5 & CSS3

Duis autem vel eum iriure dolor in dolore eu feugiat nulla facilisis at vero eros et accumsan.

Javascript

Duis autem vel eum iriure dolor in dolore eu feugiat nulla facilisis at vero eros et accumsan.

Programme

Duis autem vel eum iriure dolor in dolore eu feugiat nulla facilisis at vero eros et accumsan.

SOURCE CODE

			
			
<div class="chart_list4 row">
    <div class="col-sm-3">
        <div data-percent="65" class="percentage4">
            <div class="percentage_inner"><span>0</span>%</div>
        </div>
        <h2> Web Design</h2>
        <p>Duis autem vel eum iriure dolor in dolore eu feugiat nulla facilisis at vero eros et accumsan.</p>
    </div>
    <div class="col-sm-3">
        <div data-percent="70" class="percentage4">
            <div class="percentage_inner"><span>0</span>%</div>
        </div>
        <h2> HTML5 & CSS3</h2>
        <p>Duis autem vel eum iriure dolor in dolore eu feugiat nulla facilisis at vero eros et accumsan.</p>
    </div>
    <div class="col-sm-3">
        <div data-percent="85" class="percentage4">
            <div class="percentage_inner"><span>0</span>%</div>
        </div>
        <h2>Javascript</h2>
        <p>Duis autem vel eum iriure dolor in dolore eu feugiat nulla facilisis at vero eros et accumsan.</p>
    </div>
    <div class="col-sm-3">
        <div data-percent="45" class="percentage4">
            <div class="percentage_inner"><span>0</span>%</div>
        </div>
        <h2> Programme</h2>
        <p>Duis autem vel eum iriure dolor in dolore eu feugiat nulla facilisis at vero eros et accumsan.</p>
    </div>
</div>

Our Services

Get In Touch

ProgressBars Counters

Web Design

HTML5 & CSS3

Javascript

Programme

Web Design

HTML5 & CSS3

Javascript

Programme