Counter Boxes

[container section_title=’Page Title’ fullwidth=’yes’ textalign=’center’ bgimage=’http://bravio.co/demos/default/wp-content/uploads/2017/11/header_bg3.jpg’ scrolltype=’scroll’ bgcolor=’accent’ bgtransparency=’40’ gradientstart=’#000000′ gradientend=’accent’ gradtype=’left’ top=’100′ bottom=’125′ innerbottomshadowsize=’0′ bordertop=’0′ borderbottom=’0′ bbcolor=’#efefef’ topseparator=’disable’ topseparatorshape=’clouds’ topseparatorcolor=’#ffffff’ bottomseparator=’enable’ bottomseparatorshape=’clouds’ bottomseparatorcolor=’#ffffff’ mobiletop=’70’ mobilebottom=’50’ collapse=’true’][column type=’12’ last=’1′][text color=’#ffffff’ fontsize=’16’ fontfamily=’Raleway’ letterspacing=’7′ animation=’fadeInUp’]Fastest & Easiest[/text][separator margintop=’10’ align=’left’ animation=’default’][/separator][text google_font=’Raleway:300,700′ color=’#ffffff’ fontsize=’50’ fontweight=’300′ lineheight=’60’ animation=’fadeInUp’ animation_delay=’0.1s’ mobilefontsize=’30’ mobilelineheight=’35’]Bravio Counter Box Element[/text][separator margintop=’15’ align=’left’ animation=’default’][/separator][text color=’#ffffff’ fontsize=’16’ animation=’fadeInUp’ animation_delay=’0.3s’]Drag and Drop Elements
Save & Load Layouts, Elements, Containers & Rows[/text][separator margintop=’30’ align=’left’ animation=’default’][/separator][button size=’xlarge’ shape=’flat’ link=’http://themeforest.net/item/bravio-ultimate-wordpress-theme/14231824?ref=Bravio’ bgtransparency=’10’ bordertransparency=’0′ iconposition=’before’ inset=’0′ lrpadding=’20’ border=’1′ bordercolor=’#ffffff’ bgovercolor=’#000000′ animation=’fadeInUp’ animation_delay=’0.4s’]Buy Bravio Today![/button][/column][/container][container section_title=’Container’ fullwidth=’yes’ bgtransparency=’0′ top=’70’ bottom=’60’ innerbottomshadowsize=’0′ bordertop=’0′ borderbottom=’0′ collapse=’true’][column type=’3′ last=”][content_box style=’5′ size=’small’ iconcolor=’#c7d2d5′ rollovericoncolor=’primary’ button=” button_link=’#’ animation=’fadeInUp’ animation_duration=’.4s’ title=’Border Highlighter’ icon=’fa-arrows-alt’][separator margintop=’20’][/separator]Border highlighter (double border) is turned off by default, by setting is on (dborder=’1′), it shows on top right and bottom left corer. Below is default example, only color is changed.[/content_box][separator margintop=’15’ align=’left’ animation=’default’][/separator][counter_box value=’2500′ count=’up’ desc=’COMPLETED PROJECTS’ icon=” icon_pos=” shape=’round’ bgcolor=” bgtransparency=” border=’1′ value_color=” border_color=’#efefef’ dborder=’1′ dborder_color=’#1e9ed1′ dborder_position=” gradstart=’#fafafa’ gradend=’#ffffff’ gradtype=” symbol=’+’ symbol_pos=’after’ symbol_color=’#1e9ed1′ icon_color=” desc_color=’#444444′ animation=’fadeInUp’ animation_duration=’.1s’ animation_delay=’0.2s’][/counter_box][/column][column type=’3′][content_box style=’5′ size=’small’ iconcolor=’#c7d2d5′ rollovericoncolor=’primary’ button=” button_link=’#’ animation=’fadeInUp’ animation_duration=’.4s’ title=’Inside the Box’ icon=’fa-arrows-alt’][separator margintop=’20’][/separator]You can set the border highlighter position in values i.e. dborder_position=” if you set a simple integer value dborder_position=’2′ it will be shown within the border of the counter box.[/content_box][separator margintop=’15’ align=’left’ animation=’default’][/separator][counter_box value=’7000′ count=’up’ desc=’PROJECTS REVENUE’ icon=” icon_pos=” shape=’round’ bgcolor=” bgtransparency=” border=’1′ value_color=” border_color=’#efefef’ dborder=’1′ dborder_color=’#adcc3f’ dborder_position=’2′ gradstart=’#fafafa’ gradend=’#ffffff’ gradtype=” symbol=’USD’ symbol_pos=’before’ symbol_color=’#adcc3f’ icon_color=” desc_color=’#444444′ animation=’fadeInUp’ animation_duration=’.1s’ animation_delay=’0.2s’][/counter_box][/column][column type=’3′][content_box style=’5′ size=’small’ iconcolor=’#c7d2d5′ rollovericoncolor=’primary’ button=” button_link=’#’ animation=’fadeInUp’ animation_duration=’.4s’ title=’Outside the Box’ icon=’fa-arrows-alt’][separator margintop=’20’][/separator]You can set the border highlighter position in values i.e. dborder_position=”, but if you set a negative value dborder_position=’-2′ it will be shown above the border of actual counter box.[/content_box][separator margintop=’15’ align=’left’ animation=’default’][/separator][counter_box value=’7000′ count=’up’ desc=’PROJECTS REVENUE’ icon=” icon_pos=” shape=’round’ bgcolor=” bgtransparency=” border=’1′ value_color=” border_color=’#efefef’ dborder=’1′ dborder_color=’#444444′ dborder_position=’-3′ gradstart=’#fafafa’ gradend=’#ffffff’ gradtype=” symbol=’USD’ symbol_pos=’before’ symbol_color=’#adcc3f’ icon_color=” desc_color=’#444444′ animation=’fadeInUp’ animation_duration=’.1s’ animation_delay=’0.2s’][/counter_box][/column][column type=’3′ last=’1′][content_box style=’5′ size=’small’ iconcolor=’#c7d2d5′ rollovericoncolor=’primary’ button=” button_link=’#’ animation=’fadeInUp’ animation_duration=’.4s’ title=’Inspiration’ icon=’fa-arrows-alt’][separator margintop=’20’][/separator]Border highlighter (double border) is turned off by default, by setting is on (dborder=’1′), it shows on top right and bottom left corer. Below is default example, only color is changed.[/content_box][separator margintop=’15’ align=’left’ animation=’default’][/separator][counter_box value=’200′ count=’up’ desc=’GROWTH PROJECTION’ icon=” icon_pos=” shape=’round’ bgcolor=” bgtransparency=” border=’1′ value_color=” border_color=’#efefef’ dborder=’1′ dborder_color=’#dd3333′ dborder_position=’-2′ gradstart=’#fafafa’ gradend=’#ffffff’ gradtype=” symbol=’%’ symbol_pos=’after’ symbol_color=’#dd3333′ icon_color=” desc_color=’#444444′ animation=’fadeInUp’ animation_duration=’.1s’ animation_delay=’0.2s’][/counter_box][/column][column type=’12’ last=’1′][separator margintop=’60’ align=’left’ animation=’default’][/separator][title size=’6′ fontsize=’25’ fontweight=’300′ style=’none’ animation=’bounceInLeft’ textcolor=’#444444′]Stylish Counter Box Shapes[/title][separator marginTop=’1′][/separator][text color=’accent’ fontsize=’14’]5 Different Shapes[/text][separator margintop=’30’ animation=’default’][/separator][text fontsize=’16’]Counter Boxes are truly made with love, giving you tons of options to make stylish buttons according to latest web trends with pure CSS.They are cross browser and look awesome on all major browsers.[/text][separator marginTop=’40’][/separator][/column][column type=’3′ last=”][counter_box value=’300′ value_fontsize=’23’ value_color=’accent’ textshadow=” count=’up’ tbpadding=’20’ desc=” icon=’fa-mobile’ icon_pos=’before’ shape=’pill’ bgcolor=” bgtransparency=” border=’1′ border_color=’accent’ gradstart=” gradend=” gradtype=” icon_color=” desc_color=” animation=’fadeInUp’ animation_duration=’.2s’ animation_delay=’0.2s’][/counter_box][/column][column type=’3′ last=”][counter_box value=’400′ value_fontsize=’23’ value_color=’accent’ textshadow=” count=’up’ tbpadding=’20’ desc=” icon=’fa-tablet’ icon_pos=’before’ shape=’round’ bgcolor=” bgtransparency=” border=’1′ border_color=’accent’ gradstart=” gradend=” gradtype=” icon_color=” desc_color=” animation=’fadeInUp’ animation_duration=’.3s’ animation_delay=’0.3s’][/counter_box][/column][column type=’3′ last=”][counter_box value=’500′ value_fontsize=’23’ value_color=’accent’ textshadow=” count=’up’ tbpadding=’20’ desc=” icon=’fa-flash’ icon_pos=’before’ shape=’skew’ bgcolor=” bgtransparency=” border=’1′ border_color=’accent’ gradstart=” gradend=” gradtype=” icon_color=” desc_color=’#444444′ animation=’fadeInUp’ animation_duration=’.4s’ animation_delay=’0.4s’][/counter_box][/column][column type=’3′ last=’1′][counter_box value=’600′ value_fontsize=’23’ value_color=’accent’ textshadow=” count=’up’ tbpadding=’20’ desc=” icon=” icon=’fa-gears’ icon_pos=’before’ shape=’shield’ bgcolor=” bgtransparency=” border=’1′ border_color=’accent’ gradstart=” gradend=” gradtype=” icon_color=” desc_color=’#444444′ animation=’fadeInUp’ animation_duration=’.4s’ animation_delay=’0.4s’][/counter_box][/column][column type=’12’ last=’1′][counter_box value=’200′ value_fontsize=’23’ value_color=’accent’ value_down=’0′ count=’up’ shape=’flat’ tbpadding=’20’ symbol=’$’ symbol_pos=’before’ icon=’fa-laptop’ icon_pos=’before’ border=’1′ border_color=’accent’ animation=’fadeInUp’ animation_delay=’0.2s’ top_space=’40’][/counter_box][/column][/container][container section_title=’Container’ fullwidth=’yes’ bgtransparency=’0′ top=’30’ innerbottomshadowsize=’0′ bordertop=’0′ borderbottom=’0′ collapse=’true’][column type=’4′][content_box style=’5′ size=’small’ iconcolor=’#c7d2d5′ rollovericoncolor=’primary’ button=” button_link=’#’ animation=’fadeInUp’ animation_duration=’.4s’ title=’Unit After’ icon=’fa-arrows-alt’][separator margintop=’20’][/separator]Unit / Symbol can be adjusted / placed before and/or after the animating numbers. In the following example unit is set after the animated numbers.[/content_box][separator marginTop=’30’][/separator][counter_box value=’2500′ count=’up’ desc=’COMPLETED PROJECTS’ icon=” icon_pos=” shape=’round’ bgcolor=” bgtransparency=” border=’1′ value_color=” border_color=’#efefef’ gradstart=’#fafafa’ gradend=’#ffffff’ gradtype=” symbol=’+’ symbol_pos=’after’ symbol_color=’#1e9ed1′ icon_color=” desc_color=’#444444′ animation=’fadeInUp’ animation_duration=’.1s’ animation_delay=’0.2s’][/counter_box][/column][column type=’4′][content_box style=’5′ size=’small’ iconcolor=’#c7d2d5′ rollovericoncolor=’primary’ button=” button_link=’#’ animation=’fadeInUp’ animation_duration=’.4s’ title=’Unit Before’ icon=’fa-arrows-alt’][separator margintop=’20’][/separator]Unit / Symbol can be adjusted before and after the animating numbers. In the following example unit is set before the numbers.[/content_box][separator marginTop=’30’][/separator][counter_box value=’7000′ count=’up’ desc=’PROJECTS REVENUE’ icon=” icon_pos=” shape=’round’ bgcolor=” bgtransparency=” border=’1′ value_color=” border_color=’#efefef’ gradstart=’#fafafa’ gradend=’#ffffff’ gradtype=” symbol=’USD’ symbol_pos=’before’ symbol_color=’#adcc3f’ icon_color=” desc_color=’#444444′ animation=’fadeInUp’ animation_duration=’.1s’ animation_delay=’0.2s’][/counter_box][/column][column type=’4′ last=’1′][content_box style=’5′ size=’small’ iconcolor=’#c7d2d5′ rollovericoncolor=’primary’ button=” button_link=’#’ animation=’fadeInUp’ animation_duration=’.4s’ title=’Unit Color’ icon=’fa-arrows-alt’][separator margintop=’20’][/separator]Unit / Symbol can be adjusted before and after the animating numbers and set its color. In the following example unit has different color.[/content_box][separator marginTop=’30’][/separator][counter_box value=’200′ count=’up’ desc=’GROWTH PROJECTION’ icon=” icon_pos=” shape=’round’ bgcolor=” bgtransparency=” border=’1′ value_color=” border_color=’#efefef’ gradstart=’#fafafa’ gradend=’#ffffff’ gradtype=” symbol=’%’ symbol_pos=’after’ symbol_color=’#dd3333′ icon_color=” desc_color=’#444444′ animation=’fadeInUp’ animation_duration=’.1s’ animation_delay=’0.2s’][/counter_box][/column][column type=’12’ last=’1′][separator style=’2′ margintop=’20’ marginbottom=’50’ align=’center’ width=’220′ animation=’fadeInUp’][/separator][/column][column type=’6′][content_box style=’5′ size=’small’ iconcolor=’#c7d2d5′ rollovericoncolor=’primary’ button=” button_link=’#’ animation=’fadeInUp’ animation_duration=’.4s’ title=’Counting Downwards’ icon=’fa-arrows-alt’][separator margintop=’20’][/separator]By default the counter boxes count value starting from 0, but it can be set both ways i.e. UP or DOWN. Below is an example of counting upwards.[/content_box][separator marginTop=’30’][/separator][counter_box value=’100′ value_down=’30’ count=’down’ desc=’BravioReduces Development Cost’ icon=” icon_pos=” shape=’flat’ symbol=’%’ symbol_pos=’after’ bgcolor=’#f9f9f9′ bgtransparency=” border=’1′ border_color=’#efefef’ icon_color=” value_color=” desc_color=” animation=’fadeInUp’ animation_duration=’.1s’ animation_delay=’0.2s’][/counter_box][/column][column type=’6′ last=’1′][content_box style=’5′ size=’small’ iconcolor=’#c7d2d5′ rollovericoncolor=’primary’ button=” button_link=’#’ animation=’fadeInUp’ animation_duration=’.4s’ title=’Counting Upwards’ icon=’fa-arrows-alt’][separator margintop=’20’][/separator]By default the counter boxes count value starting from 0. By setting value_down, it counts down starting from value.[/content_box][separator marginTop=’30’][/separator][counter_box value=’220′ count=’up’ desc=’Without Bravio – Development Cost’ icon=” icon_pos=” symbol=’%’ symbol_pos=’after’ shape=’flat’ bgcolor=’#f9f9f9′ bgtransparency=” border=’1′ border_color=’#efefef’ icon_color=” value_color=” desc_color=” animation=’fadeInUp’ animation_duration=’.2s’ animation_delay=’0.2s’][/counter_box][/column][column type=’12’ last=’1′][separator marginTop=’20’][/separator][separator style=’2′ align=’center’ width=’220′][/separator][separator marginTop=’50’][/separator][/column][column type=’3′][content_box style=’5′ size=’small’ iconcolor=’#c7d2d5′ rollovericoncolor=’primary’ button=” button_link=’#’ animation=’fadeInUp’ animation_duration=’.4s’ title=’Border Adjustment’ icon=’fa-arrows-alt’][separator margintop=’20’][/separator]Border width can be adjusted to any number or completely removed. We have set border to 5 in the following example.[/content_box][separator marginTop=’30’][/separator][counter_box value=’2500′ count=’up’ desc=’COMPLETED PROJECTS’ icon=” icon_pos=” shape=’flat’ bgcolor=” bgtransparency=” border=’5′ value_color=” border_color=’#1e9ed1′ dborder=” dborder_color=” dborder_position=” gradstart=’#fafafa’ gradend=’#ffffff’ gradtype=” symbol=’+’ symbol_pos=’after’ symbol_color=’#1e9ed1′ icon_color=” desc_color=’#444444′ animation=’fadeInUp’ animation_duration=’.1s’ animation_delay=’0.2s’][/counter_box][/column][column type=’3′][content_box style=’5′ size=’small’ iconcolor=’#c7d2d5′ rollovericoncolor=’primary’ button=” button_link=’#’ animation=’fadeInUp’ animation_duration=’.4s’ title=’Value Font Size’ icon=’fa-arrows-alt’][separator margintop=’20’][/separator]You can adjust the font-size of the counting numbers, by default its set to 39px, below we have set it to 25.[/content_box][separator marginTop=’30’][/separator][counter_box value=’7000′ value_fontsize=’25’ count=’up’ tbpadding=’35’ desc=’PROJECTS REVENUE’ icon=” icon_pos=” shape=’flat’ bgcolor=” bgtransparency=” border=’1′ value_color=” border_color=’#adcc3f’ dborder=” dborder_color=” dborder_position=” gradstart=’#fafafa’ gradend=’#ffffff’ gradtype=” symbol=’USD’ symbol_pos=’before’ symbol_color=’#adcc3f’ icon_color=” desc_color=’#444444′ animation=’fadeInUp’ animation_duration=’.1s’ animation_delay=’0.2s’][/counter_box][/column][column type=’3′][content_box style=’5′ size=’small’ iconcolor=’#c7d2d5′ rollovericoncolor=’primary’ button=” button_link=’#’ animation=’fadeInUp’ animation_duration=’.4s’ title=’Value Text Color’ icon=’fa-arrows-alt’][separator margintop=’20’][/separator]Counterbox is very flexible, you may have different value colors for each box, below is an example of changing the color.[/content_box][separator marginTop=’30’][/separator][counter_box value=’7000′ count=’up’ desc=’PROJECTS REVENUE’ tbpadding=’30’ icon=” icon_pos=” shape=’flat’ bgcolor=” bgtransparency=” border=’1′ value_color=’accent’ border_color=’accent’ dborder=” dborder_color=” dborder_position=” gradstart=’#fafafa’ gradend=’#ffffff’ gradtype=” symbol=’USD’ symbol_pos=’before’ symbol_color=’#adcc3f’ icon_color=” desc_color=’#444444′ animation=’fadeInUp’ animation_duration=’.1s’ animation_delay=’0.2s’][/counter_box][/column][column type=’3′ last=’1′][content_box style=’5′ size=’small’ iconcolor=’#c7d2d5′ rollovericoncolor=’primary’ button=” button_link=’#’ animation=’fadeInUp’ animation_duration=’.4s’ title=’Custom Padding’ icon=’fa-arrows-alt’][separator margintop=’20’][/separator]Changing font size or removing short description effects height, but you can set custom top / bottom padding.[/content_box][separator marginTop=’30’][/separator][counter_box value=’200′ count=’up’ desc=” icon=” icon_pos=” tbpadding=’37’ shape=’flat’ bgcolor=” bgtransparency=” border=’5′ value_color=” border_color=’#efefef’ dborder=” dborder_color=” dborder_position=” gradstart=’#fafafa’ gradend=’#ffffff’ gradtype=” symbol=’%’ symbol_pos=’after’ symbol_color=’#dd3333′ icon_color=” desc_color=’#444444′ animation=’fadeInUp’ animation_duration=’.1s’ animation_delay=’0.2s’][/counter_box][/column][/container][container collapse=’true’ fullwidth=’no’][column type=’12’ last=’1′][separator marginTop=’60’][/separator][/column][/container][container collapse=’true’ fullwidth=’yes’ textalign=’center’ top=’80’ bottom=’90’ bordertop=’1′ tbcolor=’#efefef’ borderbottom=’1′ bbcolor=’#efefef’ gradientstart=’#ffffff’ gradientend=’#f9f9f9′][column type=’12’ last=’1′][content_box style=’2′ size=’large’ align=’center’ iconcolor=’#c7d2d5′ rollovericoncolor=’primary’ button=” button_link=’#’ animation=’fadeInUp’ animation_duration=’.4s’ title=’Background Colors & Gradients’ icon=’fa-arrows-alt’]You may set a solid background color and/or a gradient start from top-bottom or let/right. Below are a few examples of setting background colors.[/content_box][separator marginTop=’5′][/separator][/column][column type=’3′][counter_box value=’1100′ count=’up’ desc=’Solid Color Example 1′ textshadow=’1′ tbpadding=’37’ shape=’flat’ bgcolor=’#ed5565′ bgtransparency=” gradstart=” gradend=” gradtype=” border=” value_color=’#ffffff’ border_color=” dborder=’1′ dborder_color=’#ffffff’ dborder_position=’3′ icon=’fa-laptop’ icon_color=’#efefef’ icon_pos=’top’ desc_color=’#efefef’ animation=’fadeInUp’ animation_duration=’.1s’ animation_delay=’0.2s’][/counter_box][/column][column type=’3′][counter_box value=’1100′ count=’up’ desc=’Solid Color Example 2′ textshadow=’1′ tbpadding=’37’ shape=’flat’ bgcolor=’#a0d468′ bgtransparency=” gradstart=” gradend=” gradtype=” border=” value_color=’#ffffff’ border_color=” dborder=’1′ dborder_color=’#ffffff’ dborder_position=’3′ icon=’fa-laptop’ icon_color=’#efefef’ icon_pos=’top’ desc_color=’#efefef’ animation=’fadeInUp’ animation_duration=’.1s’ animation_delay=’0.2s’][/counter_box][/column][column type=’3′][counter_box value=’1100′ count=’up’ desc=’Gradient Example 1′ textshadow=’1′ tbpadding=’37’ shape=’flat’ bgcolor=” bgtransparency=” gradstart=’#278aad’ gradend=’#48c7f6′ gradtype=” border=” value_color=’#ffffff’ border_color=” dborder=’1′ dborder_color=’#ffffff’ dborder_position=’3′ icon=’fa-laptop’ icon_color=’#efefef’ icon_pos=’top’ desc_color=’#efefef’ animation=’fadeInUp’ animation_duration=’.1s’ animation_delay=’0.2s’][/counter_box][/column][column type=’3′ last=’1′][counter_box value=’1100′ count=’up’ desc=’Gradient Example 2′ textshadow=’1′ tbpadding=’37’ shape=’flat’ bgcolor=” bgtransparency=” gradstart=’#fc6e51′ gradend=’#cb4c37′ gradtype=’left’ border=” value_color=’#ffffff’ border_color=” dborder=’1′ dborder_color=’#ffffff’ dborder_position=’3′ icon=’fa-laptop’ icon_color=’#efefef’ icon_pos=’top’ desc_color=’#efefef’ animation=’fadeInUp’ animation_duration=’.1s’ animation_delay=’0.2s’][/counter_box][/column][/container][container collapse=’true’ fullwidth=’yes’ top=’70’][column type=’12’ last=’1′][text fontsize=’22’ lineheight=’23 color=’#444444′ fontweight=’300′ fontfamily=’Raleway’]Font Awesome Icons[/text][separator marginTop=’5′][/separator][text]You can set font awesome icons, set its positions (before / after / top) and change it color.[/text][separator marginTop=’50’][/separator][/column][column type=’3′ last=”][counter_box value=’200′ count=’up’ desc=’Mobile Users Growth’ icon=’fa-mobile’ icon_pos=’before’ icon_color=’#ff8a3c’ shape=’flat’ bgcolor=” bgtransparency=” symbol=’%’ symbol_pos=’after’ border=’1′ border_color=’#efefef’ value_color=” desc_color=” animation=’fadeInUp’ animation_duration=’.1s’ animation_delay=’0.1s’][/counter_box][/column][column type=’3′ last=”][counter_box value=’2500′ value_down=’0′ count=’up’ shape=’flat’ desc=’Today’s Laptop Users’ symbol=’$’ symbol_pos=’before’ icon=’fa-laptop’ icon_color=’#42bdc2′ icon_pos=’after’ border=’1′ border_color=’#efefef’ animation=’fadeInUp’ animation_delay=’0.2s’][/counter_box][/column][column type=’3′ last=”][counter_box value=’9000′ count=’up’ desc=’The Tablet Users’ icon=’fa-tablet’ icon_pos=’before’ icon_color=’#ff8a3c’ shape=’flat’ bgcolor=” bgtransparency=” border=’1′ border_color=’#efefef’ value_color=” desc_color=” animation=’fadeInUp’ animation_duration=’.3s’ animation_delay=’0.3s’][/counter_box][/column][column type=’3′ last=’1′][counter_box value=’1600′ count=’up’ desc=’Community Members’ icon=’fa-gear’ icon_pos=’after’ icon_color=’#388bd1′ shape=’flat’ bgcolor=” bgtransparency=” border=’1′ border_color=’#efefef’ value_color=” desc_color=” animation=’fadeInUp’ animation_duration=’.4s’ animation_delay=’0.4s’][/counter_box][/column][column type=’12’ last=’1′][separator marginTop=’30’][/separator][/column][column type=’4′ last=”][counter_box value=’113′ count=’up’ desc=’Bugs Fixes Update’ icon=’fa-bug’ icon_pos=’top’ icon_color=’#ff8a3c’ shape=’flat’ bgcolor=” gradstart=’#fafafa’ gradend=’#ffffff’ gradtype=” bgtransparency=” symbol=” symbol_pos=” border=’1′ border_color=’#efefef’ value_color=’#ff8a3c’ desc_color=’#ff8a3c’ animation=’fadeInUp’ animation_duration=’.1s’ animation_delay=’0.1s’][/counter_box][/column][column type=’4′ last=”][counter_box value=’2500′ value_down=’0′ count=’up’ shape=’flat’ desc=’Today’s Laptop Users’ desc_color=’#42bdc2′ symbol=’$’ symbol_pos=’before’ icon=’fa-bolt’ icon_color=’#42bdc2′ icon_pos=’top’ gradstart=’#ffffff’ gradend=’#fafafa’ border=’1′ border_color=’#efefef’ animation=’fadeInUp’ animation_delay=’0.2s’][/counter_box][/column][column type=’4′ last=’1′][counter_box value=’9000′ count=’up’ desc=’The Tablet Users’ icon=’fa-female’ icon_pos=’top’ icon_color=’#adcc3f’ shape=’flat’ gradstart=’#fafafa’ gradend=’#ffffff’ gradtype=” bgcolor=” bgtransparency=” border=’1′ border_color=’#efefef’ value_color=” desc_color=” animation=’fadeInUp’ animation_duration=’.3s’ animation_delay=’0.3s’][/counter_box][/column][/container][container collapse=’true’ fullwidth=’no’][column type=’12’ last=’1′][separator marginTop=’80’][/separator][/column][/container][container section_title=’Transparent Container’ fullwidth=’yes’ bgimage=’http://bravio.co/demos/default/wp-content/uploads/2016/02/bg_polygon_black.jpg’ bgpattern=’7′ bgcolor=’#000′ bgtransparency=’30’ top=’80’ bottom=’80’ innerbottomshadowsize=’0′ bordertop=’0′ borderbottom=’0′ collapse=’true’][column type=’12’ last=’1′][text color=’#ffffff’ fontsize=’30’ fontweight=’400′ fontfamily=’Raleway’]Background Transparency[/text][separator marginTop=’10’][/separator][text color=’#cccccc’ fontsize=’18’ fontweight=’300′]You can set background transparency with combination of any styles.[/text][separator marginTop=’40’][/separator][/column][column type=’3′ last=”][counter_box value=’200′ count=’up’ desc=’Mobile Users Growth’ icon=’fa-mobile’ icon_pos=’before’ icon_color=’#ffffff’ shape=’flat’ bgcolor=’#333333′ bgtransparency=’45’ symbol=’%’ symbol_pos=’after’ border=’1′ border_color=’#222222′ value_color=’#e4f0f4′ desc_color=’#ffffff’ animation=’fadeInUp’ animation_duration=’.1s’ animation_delay=’0.1s’][/counter_box][/column][column type=’3′ last=”][counter_box value=’2500′ value_color=’#ffffff’ value_down=’0′ count=’up’ shape=’flat’ desc=’Today’s Laptop Users’ desc_color=’#f6fbf1′ symbol=’$’ symbol_pos=’before’ icon=’fa-laptop’ icon_color=’#ffffff’ icon_pos=’after’ bgcolor=’accent’ bgtransparency=’15’ border=’1′ border_color=’#7fc242′ animation=’fadeInUp’ animation_delay=’0.2s’][/counter_box][/column][column type=’3′ last=”][counter_box value=’9000′ count=’up’ desc=’Global Tablet Users’ icon=’fa-tablet’ icon_pos=’before’ icon_color=’#222222′ shape=’flat’ bgcolor=’#ffffff’ bgtransparency=’35’ border=’1′ border_color=’#efefef’ value_color=’#000000′ desc_color=’#000000′ animation=’fadeInUp’ animation_duration=’.3s’ animation_delay=’0.3s’][/counter_box][/column][column type=’3′ last=’1′][counter_box value=’1600′ count=’up’ desc=’Community Members’ icon=’fa-gear’ icon_pos=’after’ icon_color=’#FFFFFF’ shape=’flat’ bgcolor=’#388bd1′ bgtransparency=’15’ border=’1′ border_color=’#388bd1′ value_color=’#FFFFFF’ desc_color=’#FFFFFF’ animation=’fadeInUp’ animation_duration=’.4s’ animation_delay=’0.4s’][/counter_box][/column][/container][container collapse=’true’ fullwidth=’no’][column type=’12’ last=’1′][separator marginTop=’70’][/separator][/column][/container][container collapse=’true’ fullwidth=’yes’][column type=’12’ last=’1′][text fontsize=’22’ lineheight=’23 color=’#444444′ fontweight=’300′ fontfamily=’Raleway’]Shape, Border & Color Settings[/text][separator marginTop=’30’][/separator][text]You can set background color, background transparency, symbol color, value color, description color, border color and icon color individually. Bravio counter boxes comes with 5 different shapes, default is set oto flat in above examples, other shapes are pill, round, skew and shield.[/text][separator marginTop=’50’][/separator][/column][column type=’3′ last=”][counter_box value=’200′ count=’up’ desc=’Mobile Users Growth’ icon=’fa-mobile’ icon_pos=’before’ icon_color=’#1e7579′ shape=’round’ bgcolor=’#42bdc2′ bgtransparency=” symbol=’%’ symbol_pos=’after’ border=’5′ border_color=’#42bdc2′ value_color=’#e4f0f4′ desc_color=’#1e7579′ animation=’fadeInUp’ animation_duration=’.1s’ animation_delay=’0.1s’][/counter_box][/column][column type=’3′ last=”][counter_box value=’2500′ value_color=’#ffffff’ value_down=’0′ count=’up’ shape=’skew’ desc=’Today’s Laptop Users’ desc_color=’#f6fbf1′ symbol=’$’ symbol_pos=’before’ icon=’fa-laptop’ icon_color=’#486b27′ icon_pos=’after’ bgcolor=’#7fc242′ bgtransparency=’100′ border=’5′ border_color=’#7fc242′ animation=’fadeInUp’ animation_delay=’0.2s’][/counter_box][/column][column type=’3′ last=”][counter_box value=’9000′ count=’up’ desc=’Global Tablet Users’ icon=’fa-tablet’ icon_pos=’before’ icon_color=’#222222′ shape=’shield’ bgcolor=’#ffd800′ bgtransparency=” border=’5′ border_color=’#ad940c’ value_color=’#000000′ desc_color=’#000000′ animation=’fadeInUp’ animation_duration=’.3s’ animation_delay=’0.3s’][/counter_box][/column][column type=’3′ last=’1′][counter_box value=’1600′ count=’up’ desc=’Community Members’ icon=’fa-gear’ icon_pos=’after’ icon_color=’#FFFFFF’ shape=’pill’ bgcolor=’#388bd1′ bgtransparency=” border=’5′ border_color=’#388bd1′ value_color=’#FFFFFF’ desc_color=’#FFFFFF’ animation=’fadeInUp’ animation_duration=’.4s’ animation_delay=’0.4s’][/counter_box][/column][/container][container collapse=’true’ fullwidth=’no’][column type=’12’ last=’1′][separator style=’2′ margintop=’60’ marginbottom=’40’ align=’center’ width=’220′ animation=’default’][/separator][/column][/container][container collapse=’true’ fullwidth=’yes’ bottom=’40’][column type=’12’ last=’1′][text fontsize=’22’ lineheight=’23 color=’#444444′ fontweight=’300′ fontfamily=’Raleway’]Animations Module[/text][separator marginTop=’30’][/separator][text animation=’default’]Counter Boxes shortcode works perfectly with Animate.css plugin.
There are hundreds of predefined animations you can choose from, set delay, animation type and appearance time for individual counter box.[/text][separator marginTop=’50’][/separator][/column][column type=’3′ last=”][counter_box value=’3500′ count=’up’ desc=’LOYAL CUSTOMERS’ icon=” icon_pos=” shape=’flat’ bgcolor=” bgtransparency=” border=’1′ border_color=’#efefef’ icon_color=” value_color=” desc_color=” animation=’fadeInUp’ animation_duration=’.1s’ animation_delay=’0.1s’][/counter_box][/column][column type=’3′ last=”][counter_box value=’2500′ value_down=’0′ count=’up’ shape=’flat’ desc=’COMPLETED PROJECTS’ symbol=’$’ symbol_pos=’before’ bgtransparency=’0′ border=’1′ border_color=’#efefef’ animation=’fadeInUp’ animation_delay=’0.2s’][/counter_box][/column][column type=’3′ last=”][counter_box value=’9000′ count=’up’ desc=’DEVELOPEMENT HOURS’ icon=” icon_pos=” shape=’flat’ bgcolor=” bgtransparency=” border=’1′ border_color=’#efefef’ icon_color=” value_color=” desc_color=” animation=’fadeInUp’ animation_duration=’.3s’ animation_delay=’0.3s’][/counter_box][/column][column type=’3′ last=’1′][counter_box value=’23000′ count=’up’ desc=’FORUM THREADS’ icon=” icon_pos=” shape=’flat’ bgcolor=” bgtransparency=” border=’1′ border_color=’#efefef’ icon_color=” value_color=” desc_color=” animation=’fadeInUp’ animation_duration=’.4s’ animation_delay=’0.4s’][/counter_box][/column][/container][container section_title=’Rain Drops Effect’ fullwidth=’no’ scrolltype=’fixed’ bgtransparency=’0′ innerbottomshadowsize=’0′ bordertop=’0′ borderbottom=’0′ topseparator=’disable’ topseparatorshape=’diagonal’ topseparatorflip=’no’ topseptransparency=’0′ bottomseparator=’disable’ bottomseparatorshape=’diagonal’ bottomseparatorflip=’no’ botseptransparency=’0′ collapse=’true’][column type=’12’ last=’1′][raindrops bgcolor=’#ffffff’ flip=’1′][/raindrops][/column][/container][container section_title=’Scalable Multipurpose Theme’ fullwidth=’yes’ bgimage=’http://bravio.co/demos/default/wp-content/uploads/2017/11/picjumbo.com_HNCK56ff44.jpg’ scrolltype=’scroll’ bgpattern=’8′ bgcolor=’accent’ bgtransparency=’45’ gradientstart=’#000000′ gradientend=’accent’ gradtype=’left’ top=’82’ bottom=’65’ innerbottomshadowsize=’0′ bordertop=’0′ borderbottom=’0′ topseparator=’disable’ topseparatorshape=’diagonal’ bottomseparator=’disable’ bottomseparatorshape=’diagonal’ collapse=’true’][column type=’9′][separator marginTop=’5′][/separator][text google_font=” fontfamily=’Raleway’ fontweight=’300′ textshadow=” fontsize=’32’ lineheight=’38’ color=’#fff’]Scalable Multipurpose Theme[/text][text google_font=” fontfamily=’Raleway’ fontweight=” textshadow=” fontsize=’22’ lineheight=’32’ color=’#fff’]Improve quality of your website by using its powerful features.[/text][/column][column type=’3′ last=’1′ align=’right’][separator margintop=’13’][/separator][button link=’#’ size=’xlarge’ shape=’round’ hovereffect=’bounce-to-right’ bgcolor=” bgovercolor=’#fff’ bgtransparency=’30’ bordertransparency=’80’ textcolor=’#FFFFFF’ textovercolor=’#FFFFFF’ textshadow=” fontweight=’300′ fontfamily=’Raleway’ border=’2′ bordercolor=’#fff’ borderovercolor=” bggradstart=” bggradend=” icon=” iconposition=” target=’_blank’]Explore Features[/button][/column][/container]