Bootstrap Tabs:

About us Tabs with Bootstrap

The about us page is a really important section of any website and plays a vital role. How do the users learn about you and your services and decide whether to trust you or not? By reading the about us page! Many users who read this page want to gain extra information about your company or the store they are going to shop from. This is how they are going to judge your website. It is the first implication your website has on the users so it must be something that invites them to do business with you. This is why you don’t have to just focus on writing a professional text but you also need to design the page properly. For example, you don’t want to write a long text that will bore your readers. Instead, you want to divide your text into different sections which can then be accessible from a conveniently placed tabs area.

Here, we are introducing a Bootstrap tab code to do just that. This CSS tabs code features boxes with different categories assigned to them. By clicking on each square, you can read the content of each category and know about that particular section. It is truly a great way to introduce your website and the services it offers as it does have a nice colour scheme and some animations to make it more pleasing. Don’t hesitate and use this HTML tabs code to make your website ten times better than it was before.

Bootstrap Tab Code

CSS Tabs

HTML Tabs

<!-- This script got from frontendfreecode.com -->
<!-- ========== ABOUT US SECTION ========== -->
<section id="about-us" class="about-us-bg section-common-space" style="background-image: url(http://frontendfreecode.com/img/about-bg.jpg);">
    <div class="container">
        <!-- ========== SECTION HEADER ========== -->
        <div class="section-header section-header-v2 text-center">
            <h2 class="section-title">Small teams. Big results.</h2>
            <p class="section-subtitle ft-fm-2">
                You’ll be working with a small, dedicated team built to fit the <br> needs of your project.
            </p>
        </div> <!-- //section-header -->

        <div class="tabbed-about-us tabbed-about-us-v2">
            <div class="row">
                <div class="col-sm-6">
                    <!-- ========== NAV TABS ========== -->
                    <ul class="tabs-nav" role="tablist">
                        <li class="active" role="presentation"><a href="#web" aria-controls="web" role="tab" data-toggle="tab"><span class="icon"><i class="fas fa-server"></i></span>Web Design</a><span class="bgcolor-major-gradient-overlay"></span></li>
                        <li role="presentation"><a href="#print" aria-controls="print" role="tab" data-toggle="tab"><span class="icon"><i class="fas fa-print"></i></span>Print Design</a><span class="bgcolor-major-gradient-overlay"></span></li>
                        <li role="presentation"><a href="#development" aria-controls="development" role="tab" data-toggle="tab"><span class="icon"><i class="fab fa-buromobelexperte"></i></span>Development</a><span class="bgcolor-major-gradient-overlay"></span></li>
                        <li role="presentation"><a href="#branding" aria-controls="branding" role="tab" data-toggle="tab"><span class="icon"><i class="far fa-building"></i></span>Branding</a><span class="bgcolor-major-gradient-overlay"></span></li>
                        <li role="presentation"><a href="#marketing" aria-controls="marketing" role="tab" data-toggle="tab"><span class="icon"><i class="fab fa-codiepie"></i></span>Marketing</a><span class="bgcolor-major-gradient-overlay"></span></li>
                        <li role="presentation"><a href="#support" aria-controls="marketing" role="tab" data-toggle="tab"><span class="icon"><i class="fas fa-headset"></i></span>support</a><span class="bgcolor-major-gradient-overlay"></span></li>
                    </ul>
                </div> <!-- //.col-sm-6 -->

                <div class="col-sm-6">
                    <div class="tab-content">
                        <!-- ========== TAB PANE ========== -->
                        <div role="tabpanel" class="tab-pane active" id="web">
                            <div class="details-wrapper">
                                <div class="details">
                                    <p>
                                        Webdesign ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. quis nostrud exercitation ullamco.
                                    </p>
                                    <p>
                                        Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.eu
                                    </p>
                                </div> <!-- //details -->
                                <div class="work-progress">
                                    <div class="each-item">
                                        <div data-value="0.705" data-thickness="10" class="circle circle-red">
                                            <span></span>
                                        </div>
                                        <p class="title">HTML</p>
                                    </div>
                                    <div class="each-item">
                                        <div data-value="0.50" data-thickness="10" class="circle circle-red">
                                            <span></span>
                                        </div>
                                        <p class="title">WORDPRESS</p>
                                    </div>
                                    <div class="each-item">
                                        <div data-value="0.90" data-thickness="10" class="circle circle-red">
                                            <span></span>
                                        </div>
                                        <p class="title">JAVASCRIPT</p>
                                    </div>
                                </div> <!-- //.work-progress -->
                            </div> <!-- //.details-wrapper -->
                        </div> <!-- //tab-pane -->
                        <!-- ========== TAB PANE ========== -->
                        <div role="tabpanel" class="tab-pane" id="print">
                            <div class="details-wrapper">
                                <div class="details">
                                    <p>
                                        Print Design ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. quis nostrud exercitation ullamco.
                                    </p>
                                    <p>
                                        Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.eu
                                    </p>
                                </div> <!-- //details -->
                                <div class="work-progress">
                                    <div class="each-item">
                                        <div data-value="0.705" data-thickness="10" class="circle circle-red">
                                            <span></span>
                                        </div>
                                        <p class="title">HTML</p>
                                    </div>
                                    <div class="each-item">
                                        <div data-value="0.50" data-thickness="10" class="circle circle-red">
                                            <span></span>
                                        </div>
                                        <p class="title">WORDPRESS</p>
                                    </div>
                                    <div class="each-item">
                                        <div data-value="0.909" data-thickness="10" class="circle circle-red">
                                            <span></span>
                                        </div>
                                        <p class="title">JAVASCRIPT</p>
                                    </div>
                                </div> <!-- //.work-progress -->
                            </div> <!-- //.details-wrapper -->
                        </div> <!-- //tab-pane -->
                        <!-- ========== TAB PANE ========== -->
                        <div role="tabpanel" class="tab-pane" id="development">
                            <div class="details-wrapper">
                                <div class="details">
                                    <p>
                                        Development ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. quis nostrud exercitation ullamco.
                                    </p>
                                    <p>
                                        Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.eu
                                    </p>
                                </div> <!-- //details -->
                                <div class="work-progress">
                                    <div class="each-item">
                                        <div data-value="0.705" data-thickness="10" class="circle circle-red">
                                            <span></span>
                                        </div>
                                        <p class="title">HTML</p>
                                    </div>
                                    <div class="each-item">
                                        <div data-value="0.50" data-thickness="10" class="circle circle-red">
                                            <span></span>
                                        </div>
                                        <p class="title">WORDPRESS</p>
                                    </div>
                                    <div class="each-item">
                                        <div data-value="0.909" data-thickness="10" class="circle circle-red">
                                            <span></span>
                                        </div>
                                        <p class="title">JAVASCRIPT</p>
                                    </div>
                                </div> <!-- //.work-progress -->
                            </div> <!-- //.details-wrapper -->
                        </div> <!-- //tab-pane -->
                        <!-- ========== TAB PANE ========== -->
                        <div role="tabpanel" class="tab-pane" id="branding">
                            <div class="details-wrapper">
                                <div class="details">
                                    <p>
                                        Branding ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. quis nostrud exercitation ullamco.
                                    </p>
                                    <p>
                                        Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.eu
                                    </p>
                                </div> <!-- //details -->
                                <div class="work-progress">
                                    <div class="each-item">
                                        <div data-value="0.705" data-thickness="10" class="circle circle-red">
                                            <span></span>
                                        </div>
                                        <p class="title">HTML</p>
                                    </div>
                                    <div class="each-item">
                                        <div data-value="0.50" data-thickness="10" class="circle circle-red">
                                            <span></span>
                                        </div>
                                        <p class="title">WORDPRESS</p>
                                    </div>
                                    <div class="each-item">
                                        <div data-value="0.909" data-thickness="10" class="circle circle-red">
                                            <span></span>
                                        </div>
                                        <p class="title">JAVASCRIPT</p>
                                    </div>
                                </div> <!-- //.work-progress -->
                            </div> <!-- //.details-wrapper -->
                        </div> <!-- //tab-pane -->
                        <!-- ========== TAB PANE ========== -->
                        <div role="tabpanel" class="tab-pane" id="marketing">
                            <div class="details-wrapper">
                                <div class="details">
                                    <p>
                                        Marketing ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. quis nostrud exercitation ullamco.
                                    </p>
                                    <p>
                                        Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.eu
                                    </p>
                                </div> <!-- //details -->
                                <div class="work-progress">
                                    <div class="each-item">
                                        <div data-value="0.705" data-thickness="10" class="circle circle-red">
                                            <span></span>
                                        </div>
                                        <p class="title">HTML</p>
                                    </div>
                                    <div class="each-item">
                                        <div data-value="0.50" data-thickness="10" class="circle circle-red">
                                            <span></span>
                                        </div>
                                        <p class="title">WORDPRESS</p>
                                    </div>
                                    <div class="each-item">
                                        <div data-value="0.909" data-thickness="10" class="circle circle-red">
                                            <span></span>
                                        </div>
                                        <p class="title">JAVASCRIPT</p>
                                    </div>
                                </div> <!-- //.work-progress -->
                            </div> <!-- //.details-wrapper -->
                        </div> <!-- //tab-pane -->
                        <!-- ========== TAB PANE ========== -->
                        <div role="tabpanel" class="tab-pane" id="support">
                            <div class="details-wrapper">
                                <div class="details">
                                    <p>
                                        Support ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. quis nostrud exercitation ullamco.
                                    </p>
                                    <p>
                                        Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.eu
                                    </p>
                                </div> <!-- //details -->
                                <div class="work-progress">
                                    <div class="each-item">
                                        <div data-value="0.705" data-thickness="10" class="circle circle-red">
                                            <span></span>
                                        </div>
                                        <p class="title">HTML</p>
                                    </div>
                                    <div class="each-item">
                                        <div data-value="0.50" data-thickness="10" class="circle circle-red">
                                            <span></span>
                                        </div>
                                        <p class="title">WORDPRESS</p>
                                    </div>
                                    <div class="each-item">
                                        <div data-value="0.909" data-thickness="10" class="circle circle-red">
                                            <span></span>
                                        </div>
                                        <p class="title">JAVASCRIPT</p>
                                    </div>
                                </div> <!-- //.work-progress -->
                            </div> <!-- //.details-wrapper -->
                        </div> <!-- //tab-pane -->
                    </div> <!-- //tab-content -->
                </div>
            </div><!-- //.row -->
        </div> <!-- //tabbed-about-us -->
    </div> <!-- //container -->
</section>
<!-- //End About us --><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

a, a:hover, a:focus, a:active {
    text-decoration: none;
}
.about-us-bg {
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
}
.section-common-space {
    padding: 100px 0;
}
.section-header-v2 .section-title {
    text-transform: initial;
    margin-bottom: 30px;
	font-size: 36px;
	    color: #1c1c1c;
}
body, h1, h2, h3, h4, h5, h6, .ft-fm-1 {
    font-family: 'Montserrat', sans-serif;
}
.section-header-v2 .section-subtitle {
    font-size: 22px;
    font-weight: 300;
	    color: #666666;
}

p, .ft-fm-2{
    font-family: 'Roboto', sans-serif;
}

/*==================   ABOUT US  ==================*/
.tabbed-about-us .tab-pane{
    margin-bottom: 80px;
    display: none;
    border: none;
}
.tabbed-about-us .tab-content>.tab-pane{
    border: none;
}
.tabbed-about-us .tab-pane.active{
    display: block;
    -webkit-animation: fadeIn .5s ease-in-out .15s both;
    animation: fadeIn .5s ease-in-out .15s both;
}
.tabbed-about-us .img-wrapper{
    position: relative;
    min-height: 400px;
}
.tabbed-about-us .img-wrapper img{
    box-shadow: 0px 40px 70px 0px rgba(0, 0, 0, 0.22);
}
.tabbed-about-us .img-wrapper .img-one{
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
.tabbed-about-us .img-wrapper .img-two{
    position: absolute;
    top: 120px;
    left: 138px;
    display: none;
}
.tabbed-about-us .img-wrapper .img-three{
    position: absolute;
    top: 40px;
    left: 345px;
    display: none;
}
.tabbed-about-us .tab-pane.active .img-one{
    display: block;
    -webkit-animation: fadeIn .5s ease-in-out .15s both;
    animation: fadeIn .5s ease-in-out .15s both;
}
.tabbed-about-us .tab-pane.active .img-two{
    display: block;
    -webkit-animation: fadeIn .5s ease-in-out .50s both;
    animation: fadeIn .5s ease-in-out .50s both;
}
.tabbed-about-us .tab-pane.active .img-three{
    display: block;
    -webkit-animation: fadeIn .5s ease-in-out .85s both;
    animation: fadeIn .5s ease-in-out .85s both;
}
.tabbed-about-us .details-wrapper{ padding-left: 30px; }
.tabbed-about-us .details .title{
    text-transform: uppercase;
    color: #1c1c1c;
    margin-bottom: 50px;
}
.tabbed-about-us .details p{ margin-bottom: 30px; }
.tabbed-about-us .details p:last-child{ margin-bottom: 0; }
.pie-title-center {
    display: inline-block;
    position: relative;
    text-align: center;
}
.circle>span{
    display: block;
    position: absolute;
    font-size: 16px;
    font-weight: 700;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -20px;
    line-height: 40px;
    color: #1c1c1c;
}
.circle>span:after {
    content: '%';
    margin-left: 0.1em;
}
.tabbed-about-us .work-progress{ margin-top: 60px; }
.tabbed-about-us .tabs-nav{
    padding: 30px 0 25px;
    border: none;
    text-align: center;
    border-radius: 4px;
}
.tabbed-about-us .tabs-nav li {
    display: inline-block;
    text-transform: uppercase;
    text-align: center;
    margin-right: 130px;
    position: relative;
}
.tabbed-about-us .tabs-nav li:last-child{ margin-right: 0; }
.tabbed-about-us .tabs-nav li *{ color: #666666; }
.tabbed-about-us .tabs-nav li span.icon {
    display: block;
    font-size: 30px;
    padding-bottom: 5px;
    transition: .3s;
}
.tabbed-about-us .tabs-nav li:after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 0;
    height: 2px;
    transition: .3s;
}
.tabbed-about-us .tabs-nav li.active:after {
    width: 100%;
}

/* ABOUT US VARAITONS **************************/
/*about-us-bg*/
.about-us-bg{
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
}
.about-us-bg .section-header-v2{
    margin-bottom: 90px;
}

/*tabbed-about-us-v2*/
.tabbed-about-us-v2.tabbed-about-us .tabs-nav{
    background-color: transparent;
    padding: 0;
}
.tabbed-about-us-v2.tabbed-about-us .tabs-nav li{
    display: table;
    margin-right: 30px;
    margin-bottom: 30px;
    background-color: #f5f5f5;
    width: 144px;
    height: 144px;
    float: left;
    border-radius: 2px;
    transition: .3s;
}
.tabbed-about-us-v2.tabbed-about-us .tabs-nav li>a{
    display: table-cell;
    vertical-align: middle;
    position: relative;
    z-index: 10;
}
.tabbed-about-us-v2.tabbed-about-us .details-wrapper {
    padding-left: 0;
}
.tabbed-about-us-v2.tabbed-about-us .details p {
    font-size: 18px;
    font-weight: 300;
}
.tabbed-about-us-v2.tabbed-about-us .bgcolor-major-gradient-overlay {
    z-index: 1;
    opacity: 0;
}
.tabbed-about-us-v2.tabbed-about-us .tabs-nav li:hover .bgcolor-major-gradient-overlay,
.tabbed-about-us-v2.tabbed-about-us .tabs-nav li.active .bgcolor-major-gradient-overlay{
    opacity: 1;
}
.tabbed-about-us-v2.tabbed-about-us .tabs-nav li:hover * ,
.tabbed-about-us-v2.tabbed-about-us .tabs-nav li.active * {
    color: #fff;
}
.tabbed-about-us-v2.tabbed-about-us .tabs-nav li:hover,
.tabbed-about-us-v2.tabbed-about-us .tabs-nav li.active{
    box-shadow: 0px 25px 55px 0px rgba(0, 0, 0, 0.21),0px 16px 28px 0px rgba(0, 0, 0, 0.22);
}
.tabbed-about-us-v2.tabbed-about-us .tabs-nav li.active:hover:after,
.tabbed-about-us-v2.tabbed-about-us .tabs-nav li.active:after{
    display: none;
}
.tabbed-about-us-v2.tabbed-about-us .work-progress {
    margin-top: 40px;
}
/*------ End of about us  ------*/


/*==================   PIE CHARTS  ==================*/
.work-progress .each-item{
    float: left;
    margin-right: 60px;
    text-align: center;
}
.work-progress .each-item:last-child{
    margin-right: 0;
}
.work-progress .each-item >div{
    display: inline-block;
    position: relative;
    text-align: center;
}
.work-progress .each-item .title{
    color: #616161;
    text-transform: uppercase;
    margin-top: 10px;
}
/*------ End of pie charts  ------*/
.bgcolor-major-gradient-overlay, .bgcolor-major-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    transition: .3s;
}
.tabbed-about-us-v2.tabbed-about-us .work-progress .circle>span{
	color: #f3474b;
}


.tabbed-about-us .tabs-nav li:hover *, .tabbed-about-us .tabs-nav li.active *{
	color: #f3474b;
}

.bgcolor-major-gradient-overlay{
	background-image: -webkit-linear-gradient( 135deg, rgba(243,71,75,.9) 0%, rgba(255,152,0,.9) 100%);
	
}

.input:after{
	background: #f3474b;
}
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
	.tabbed-about-us .details-wrapper{
    padding-left: 0;
  }
  .tabbed-about-us .details .title{
    margin-bottom: 20px;
  }
  .tabbed-about-us .work-progress {
    margin-top: 30px;
  }
  .tabbed-about-us .tabs-nav li{
    margin-right: 100px;
  }
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
	/*about us*/
  .tabbed-about-us .tabs-nav li{
    margin-right: 40px;
  }
  .tabbed-about-us-v2.tabbed-about-us .tabs-nav li{
    width: 120px;
    height: 120px;
    margin-right: 20px;
    margin-bottom: 20px;
  }
}


/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
	/*tabbed-about-us*/
  .tabbed-about-us .details .title{
    margin-bottom: 20px;
  }
  .tabbed-about-us .details-wrapper{
    padding-left: 0;
  }
  .tabbed-about-us .work-progress{
    margin-top: 30px;
  }
  .work-progress .each-item{
    margin-right: 25px;
    margin-bottom: 15px;
  }
  .tabbed-about-us .tab-pane{
    margin-bottom: 30px;
  }
  .tabbed-about-us:not(.tabbed-about-us-v2) .tabs-nav{
    overflow: hidden;
    padding: 15px 15px 5px;
  }
  .tabbed-about-us-v2 .tabs-nav{
    float: left;
  }
  .tabbed-about-us .tabs-nav li {
    margin-right: 15px;
    margin-bottom: 10px;
  }
  .tabbed-about-us .tabs-nav li:after{
    display: none;
  }
  .tabbed-about-us .tabs-nav li a{
    font-size: 13px;
  }
  .tabbed-about-us .tabs-nav li span.icon{
    display: none;
  }
  .tabbed-about-us-v2.tabbed-about-us .tabs-nav li {
    height: initial;
    padding: 15px 10px;
  }
  .tabbed-about-us-v2.tabbed-about-us .details p{
    font-size: 14px;
    margin-bottom: 15px;
  }
/*.pie*/
  .pie-value{
    font-size: 13px;
  }
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 510px) {
	/*tabbed-about-us*/
  .tabbed-about-us .img-wrapper {
    min-height: 350px;
  }
  .tabbed-about-us .img-wrapper .img-one{
    width: 150px;
  }
  .tabbed-about-us .img-wrapper .img-two{
    width: 200px;
    top: 80px;
    left: 90px;
  }
  .tabbed-about-us .img-wrapper .img-three{
    width: 150px;
  }
	.about-us-bg{
    background: none !important;
  }
  .tabbed-about-us-v2.tabbed-about-us .tabs-nav li{
    width: 43%;
  }
}

/* Custom, iPhone Retina */
@media only screen and (max-width : 360px) {
	.tabbed-about-us .img-wrapper .img-one{
    width: 130px;
  }
  .tabbed-about-us .img-wrapper .img-two{
    width: 160px;
    top: 70px;
    left: 30px;
  }
  .tabbed-about-us .img-wrapper .img-three{
    width: 130px;
    right: 0;
    left: initial;
  }
}

/* jquery-circle-progress - jQuery Plugin to draw animated circular progress bars - URL: http://kottenator.github.io/jquery-circle-progress/ - Author: Rostyslav Bryzgunov - License: MIT */
!function(t){"use strict";function i(t){this.init(t)}i.prototype={value:0,size:100,startAngle:-Math.PI,thickness:"2",fill:{gradient:["#3aeabb","#fdd250"]},emptyFill:"rgba(150, 150, 150, .5)",animation:{duration:1200,easing:"circleProgressEasing"},animationStartValue:0,reverse:!1,lineCap:"butt",constructor:i,el:null,canvas:null,ctx:null,radius:0,arcFill:null,lastFrameValue:0,init:function(i){t.extend(this,i),this.radius=this.size/2,this.initWidget(),this.initFill(),this.draw()},initWidget:function(){var i=this.canvas=this.canvas||t("<canvas>").prependTo(this.el)[0];i.width=this.size,i.height=this.size,this.ctx=i.getContext("2d")},initFill:function(){function i(){var i=t("<canvas>")[0];i.width=e.size,i.height=e.size,i.getContext("2d").drawImage(f,0,0,n,n),e.arcFill=e.ctx.createPattern(i,"no-repeat"),e.drawFrame(e.lastFrameValue)}var e=this,a=this.fill,r=this.ctx,n=this.size;if(!a)throw Error("The fill is not specified!");if(a.color&&(this.arcFill=a.color),a.gradient){var s=a.gradient;if(1==s.length)this.arcFill=s[0];else if(s.length>1){for(var o=a.gradientAngle||0,l=a.gradientDirection||[n/2*(1-Math.cos(o)),n/2*(1+Math.sin(o)),n/2*(1+Math.cos(o)),n/2*(1-Math.sin(o))],c=r.createLinearGradient.apply(r,l),h=0;h<s.length;h++){var u=s[h],d=h/(s.length-1);t.isArray(u)&&(d=u[1],u=u[0]),c.addColorStop(d,u)}this.arcFill=c}}if(a.image){var f;a.image instanceof Image?f=a.image:(f=new Image,f.src=a.image),f.complete?i():f.onload=i}},draw:function(){this.animation?this.drawAnimated(this.value):this.drawFrame(this.value)},drawFrame:function(t){this.lastFrameValue=t,this.ctx.clearRect(0,0,this.size,this.size),this.drawEmptyArc(t),this.drawArc(t)},drawArc:function(t){var i=this.ctx,e=this.radius,a=this.getThickness(),r=this.startAngle;i.save(),i.beginPath(),this.reverse?i.arc(e,e,e-a/2,r-2*Math.PI*t,r):i.arc(e,e,e-a/2,r,r+2*Math.PI*t),i.lineWidth=a,i.lineCap=this.lineCap,i.strokeStyle=this.arcFill,i.stroke(),i.restore()},drawEmptyArc:function(t){var i=this.ctx,e=this.radius,a=this.getThickness(),r=this.startAngle;1>t&&(i.save(),i.beginPath(),0>=t?i.arc(e,e,e-a/2,0,2*Math.PI):this.reverse?i.arc(e,e,e-a/2,r,r-2*Math.PI*t):i.arc(e,e,e-a/2,r+2*Math.PI*t,r),i.lineWidth=a,i.strokeStyle=this.emptyFill,i.stroke(),i.restore())},drawAnimated:function(i){var e=this,a=this.el,r=t(this.canvas);r.stop(!0,!1),a.trigger("circle-animation-start"),r.css({animationProgress:0}).animate({animationProgress:1},t.extend({},this.animation,{step:function(t){var r=e.animationStartValue*(1-t)+i*t;e.drawFrame(r),a.trigger("circle-animation-progress",[t,r])}})).promise().always(function(){a.trigger("circle-animation-end")})},getThickness:function(){return t.isNumeric(this.thickness)?this.thickness:this.size/14},getValue:function(){return this.value},setValue:function(t){this.animation&&(this.animationStartValue=this.lastFrameValue),this.value=t,this.draw()}},t.circleProgress={defaults:i.prototype},t.easing.circleProgressEasing=function(t,i,e,a,r){return(i/=r/2)<1?a/2*i*i*i+e:a/2*((i-=2)*i*i+2)+e},t.fn.circleProgress=function(e,a){var r="circle-progress",n=this.data(r);if("widget"==e){if(!n)throw Error('Calling "widget" method on not initialized instance is forbidden');return n.canvas}if("value"==e){if(!n)throw Error('Calling "value" method on not initialized instance is forbidden');if("undefined"==typeof a)return n.getValue();var s=arguments[1];return this.each(function(){t(this).data(r).setValue(s)})}return this.each(function(){var a=t(this),n=a.data(r),s=t.isPlainObject(e)?e:{};if(n)n.init(s);else{var o=t.extend({},a.data());"string"==typeof o.fill&&(o.fill=JSON.parse(o.fill)),"string"==typeof o.animation&&(o.animation=JSON.parse(o.animation)),s=t.extend(o,s),s.el=a,n=new i(s),a.data(r,n)}})}}(jQuery),function(t){function i(i){return t(i).filter(function(){return t(this).is(":appeared")})}function e(){s=!1;for(var t=0,e=r.length;e>t;t++){var a=i(r[t]);if(a.trigger("appear",[a]),c[t]){var n=c[t].not(a);n.trigger("disappear",[n])}c[t]=a}}function a(t){r.push(t),c.push()}var r=[],n=!1,s=!1,o={interval:250,force_process:!1},l=t(window),c=[];t.expr[":"].appeared=function(i){var e=t(i);if(!e.is(":visible"))return!1;var a=l.scrollLeft(),r=l.scrollTop(),n=e.offset(),s=n.left,o=n.top;return o+e.height()>=r&&o-(e.data("appear-top-offset")||0)<=r+l.height()&&s+e.width()>=a&&s-(e.data("appear-left-offset")||0)<=a+l.width()?!0:!1},t.fn.extend({appear:function(i){var r=t.extend({},o,i||{}),l=this.selector||this;if(!n){var c=function(){s||(s=!0,setTimeout(e,r.interval))};t(window).scroll(c).resize(c),n=!0}return r.force_process&&setTimeout(e,r.interval),a(l),t(l)}}),t.extend({force_appear:function(){return n?(e(),!0):!1}})}(function(){return"undefined"!=typeof module?require("jquery"):jQuery}());
/*==========  CIRCLE CHART  ==========*/
var el = $('.circle'),
inited = false;
el.appear({ force_process: true });
el.on('appear', function() {
	if (!inited) {
		el.circleProgress();
		inited = true;
	}
});

if ($('.circle').length > 0) {
	$('.circle').circleProgress({
		size:105,
		fill: {color: "#536dfe"},
		emptyFill: '#eee',
		startAngle: 300,
		lineCap: 'round',
		animation: {duration: 1800}
	})
	.on('circle-animation-progress', function (event, progress, stepValue) {
		$(this).find('span').text((stepValue * 100).toFixed(1));
	});
}
// presets 2
if ($('.circle-red').length > 0) {
	$('.circle-red').circleProgress({
		fill: {color: "#f3474b"},
	});
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500|Roboto:300,400,500" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500|Roboto:300,400,500" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<style>
a, a:hover, a:focus, a:active {
    text-decoration: none;
}
.about-us-bg {
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
}
.section-common-space {
    padding: 100px 0;
}
.section-header-v2 .section-title {
    text-transform: initial;
    margin-bottom: 30px;
	font-size: 36px;
	    color: #1c1c1c;
}
body, h1, h2, h3, h4, h5, h6, .ft-fm-1 {
    font-family: 'Montserrat', sans-serif;
}
.section-header-v2 .section-subtitle {
    font-size: 22px;
    font-weight: 300;
	    color: #666666;
}

p, .ft-fm-2{
    font-family: 'Roboto', sans-serif;
}

/*==================   ABOUT US  ==================*/
.tabbed-about-us .tab-pane{
    margin-bottom: 80px;
    display: none;
    border: none;
}
.tabbed-about-us .tab-content>.tab-pane{
    border: none;
}
.tabbed-about-us .tab-pane.active{
    display: block;
    -webkit-animation: fadeIn .5s ease-in-out .15s both;
    animation: fadeIn .5s ease-in-out .15s both;
}
.tabbed-about-us .img-wrapper{
    position: relative;
    min-height: 400px;
}
.tabbed-about-us .img-wrapper img{
    box-shadow: 0px 40px 70px 0px rgba(0, 0, 0, 0.22);
}
.tabbed-about-us .img-wrapper .img-one{
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
.tabbed-about-us .img-wrapper .img-two{
    position: absolute;
    top: 120px;
    left: 138px;
    display: none;
}
.tabbed-about-us .img-wrapper .img-three{
    position: absolute;
    top: 40px;
    left: 345px;
    display: none;
}
.tabbed-about-us .tab-pane.active .img-one{
    display: block;
    -webkit-animation: fadeIn .5s ease-in-out .15s both;
    animation: fadeIn .5s ease-in-out .15s both;
}
.tabbed-about-us .tab-pane.active .img-two{
    display: block;
    -webkit-animation: fadeIn .5s ease-in-out .50s both;
    animation: fadeIn .5s ease-in-out .50s both;
}
.tabbed-about-us .tab-pane.active .img-three{
    display: block;
    -webkit-animation: fadeIn .5s ease-in-out .85s both;
    animation: fadeIn .5s ease-in-out .85s both;
}
.tabbed-about-us .details-wrapper{ padding-left: 30px; }
.tabbed-about-us .details .title{
    text-transform: uppercase;
    color: #1c1c1c;
    margin-bottom: 50px;
}
.tabbed-about-us .details p{ margin-bottom: 30px; }
.tabbed-about-us .details p:last-child{ margin-bottom: 0; }
.pie-title-center {
    display: inline-block;
    position: relative;
    text-align: center;
}
.circle>span{
    display: block;
    position: absolute;
    font-size: 16px;
    font-weight: 700;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -20px;
    line-height: 40px;
    color: #1c1c1c;
}
.circle>span:after {
    content: '%';
    margin-left: 0.1em;
}
.tabbed-about-us .work-progress{ margin-top: 60px; }
.tabbed-about-us .tabs-nav{
    padding: 30px 0 25px;
    border: none;
    text-align: center;
    border-radius: 4px;
}
.tabbed-about-us .tabs-nav li {
    display: inline-block;
    text-transform: uppercase;
    text-align: center;
    margin-right: 130px;
    position: relative;
}
.tabbed-about-us .tabs-nav li:last-child{ margin-right: 0; }
.tabbed-about-us .tabs-nav li *{ color: #666666; }
.tabbed-about-us .tabs-nav li span.icon {
    display: block;
    font-size: 30px;
    padding-bottom: 5px;
    transition: .3s;
}
.tabbed-about-us .tabs-nav li:after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 0;
    height: 2px;
    transition: .3s;
}
.tabbed-about-us .tabs-nav li.active:after {
    width: 100%;
}

/* ABOUT US VARAITONS **************************/
/*about-us-bg*/
.about-us-bg{
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
}
.about-us-bg .section-header-v2{
    margin-bottom: 90px;
}

/*tabbed-about-us-v2*/
.tabbed-about-us-v2.tabbed-about-us .tabs-nav{
    background-color: transparent;
    padding: 0;
}
.tabbed-about-us-v2.tabbed-about-us .tabs-nav li{
    display: table;
    margin-right: 30px;
    margin-bottom: 30px;
    background-color: #f5f5f5;
    width: 144px;
    height: 144px;
    float: left;
    border-radius: 2px;
    transition: .3s;
}
.tabbed-about-us-v2.tabbed-about-us .tabs-nav li>a{
    display: table-cell;
    vertical-align: middle;
    position: relative;
    z-index: 10;
}
.tabbed-about-us-v2.tabbed-about-us .details-wrapper {
    padding-left: 0;
}
.tabbed-about-us-v2.tabbed-about-us .details p {
    font-size: 18px;
    font-weight: 300;
}
.tabbed-about-us-v2.tabbed-about-us .bgcolor-major-gradient-overlay {
    z-index: 1;
    opacity: 0;
}
.tabbed-about-us-v2.tabbed-about-us .tabs-nav li:hover .bgcolor-major-gradient-overlay,
.tabbed-about-us-v2.tabbed-about-us .tabs-nav li.active .bgcolor-major-gradient-overlay{
    opacity: 1;
}
.tabbed-about-us-v2.tabbed-about-us .tabs-nav li:hover * ,
.tabbed-about-us-v2.tabbed-about-us .tabs-nav li.active * {
    color: #fff;
}
.tabbed-about-us-v2.tabbed-about-us .tabs-nav li:hover,
.tabbed-about-us-v2.tabbed-about-us .tabs-nav li.active{
    box-shadow: 0px 25px 55px 0px rgba(0, 0, 0, 0.21),0px 16px 28px 0px rgba(0, 0, 0, 0.22);
}
.tabbed-about-us-v2.tabbed-about-us .tabs-nav li.active:hover:after,
.tabbed-about-us-v2.tabbed-about-us .tabs-nav li.active:after{
    display: none;
}
.tabbed-about-us-v2.tabbed-about-us .work-progress {
    margin-top: 40px;
}
/*------ End of about us  ------*/


/*==================   PIE CHARTS  ==================*/
.work-progress .each-item{
    float: left;
    margin-right: 60px;
    text-align: center;
}
.work-progress .each-item:last-child{
    margin-right: 0;
}
.work-progress .each-item >div{
    display: inline-block;
    position: relative;
    text-align: center;
}
.work-progress .each-item .title{
    color: #616161;
    text-transform: uppercase;
    margin-top: 10px;
}
/*------ End of pie charts  ------*/
.bgcolor-major-gradient-overlay, .bgcolor-major-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    transition: .3s;
}
.tabbed-about-us-v2.tabbed-about-us .work-progress .circle>span{
	color: #f3474b;
}


.tabbed-about-us .tabs-nav li:hover *, .tabbed-about-us .tabs-nav li.active *{
	color: #f3474b;
}

.bgcolor-major-gradient-overlay{
	background-image: -webkit-linear-gradient( 135deg, rgba(243,71,75,.9) 0%, rgba(255,152,0,.9) 100%);
	
}

.input:after{
	background: #f3474b;
}
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
	.tabbed-about-us .details-wrapper{
    padding-left: 0;
  }
  .tabbed-about-us .details .title{
    margin-bottom: 20px;
  }
  .tabbed-about-us .work-progress {
    margin-top: 30px;
  }
  .tabbed-about-us .tabs-nav li{
    margin-right: 100px;
  }
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
	/*about us*/
  .tabbed-about-us .tabs-nav li{
    margin-right: 40px;
  }
  .tabbed-about-us-v2.tabbed-about-us .tabs-nav li{
    width: 120px;
    height: 120px;
    margin-right: 20px;
    margin-bottom: 20px;
  }
}


/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
	/*tabbed-about-us*/
  .tabbed-about-us .details .title{
    margin-bottom: 20px;
  }
  .tabbed-about-us .details-wrapper{
    padding-left: 0;
  }
  .tabbed-about-us .work-progress{
    margin-top: 30px;
  }
  .work-progress .each-item{
    margin-right: 25px;
    margin-bottom: 15px;
  }
  .tabbed-about-us .tab-pane{
    margin-bottom: 30px;
  }
  .tabbed-about-us:not(.tabbed-about-us-v2) .tabs-nav{
    overflow: hidden;
    padding: 15px 15px 5px;
  }
  .tabbed-about-us-v2 .tabs-nav{
    float: left;
  }
  .tabbed-about-us .tabs-nav li {
    margin-right: 15px;
    margin-bottom: 10px;
  }
  .tabbed-about-us .tabs-nav li:after{
    display: none;
  }
  .tabbed-about-us .tabs-nav li a{
    font-size: 13px;
  }
  .tabbed-about-us .tabs-nav li span.icon{
    display: none;
  }
  .tabbed-about-us-v2.tabbed-about-us .tabs-nav li {
    height: initial;
    padding: 15px 10px;
  }
  .tabbed-about-us-v2.tabbed-about-us .details p{
    font-size: 14px;
    margin-bottom: 15px;
  }
/*.pie*/
  .pie-value{
    font-size: 13px;
  }
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 510px) {
	/*tabbed-about-us*/
  .tabbed-about-us .img-wrapper {
    min-height: 350px;
  }
  .tabbed-about-us .img-wrapper .img-one{
    width: 150px;
  }
  .tabbed-about-us .img-wrapper .img-two{
    width: 200px;
    top: 80px;
    left: 90px;
  }
  .tabbed-about-us .img-wrapper .img-three{
    width: 150px;
  }
	.about-us-bg{
    background: none !important;
  }
  .tabbed-about-us-v2.tabbed-about-us .tabs-nav li{
    width: 43%;
  }
}

/* Custom, iPhone Retina */
@media only screen and (max-width : 360px) {
	.tabbed-about-us .img-wrapper .img-one{
    width: 130px;
  }
  .tabbed-about-us .img-wrapper .img-two{
    width: 160px;
    top: 70px;
    left: 30px;
  }
  .tabbed-about-us .img-wrapper .img-three{
    width: 130px;
    right: 0;
    left: initial;
  }
}
</style>

</head>
<body>
<!-- ========== ABOUT US SECTION ========== -->
<section id="about-us" class="about-us-bg section-common-space" style="background-image: url(http://frontendfreecode.com/img/about-bg.jpg);">
    <div class="container">
        <!-- ========== SECTION HEADER ========== -->
        <div class="section-header section-header-v2 text-center">
            <h2 class="section-title">Small teams. Big results.</h2>
            <p class="section-subtitle ft-fm-2">
                You’ll be working with a small, dedicated team built to fit the <br> needs of your project.
            </p>
        </div> <!-- //section-header -->

        <div class="tabbed-about-us tabbed-about-us-v2">
            <div class="row">
                <div class="col-sm-6">
                    <!-- ========== NAV TABS ========== -->
                    <ul class="tabs-nav" role="tablist">
                        <li class="active" role="presentation"><a href="#web" aria-controls="web" role="tab" data-toggle="tab"><span class="icon"><i class="fas fa-server"></i></span>Web Design</a><span class="bgcolor-major-gradient-overlay"></span></li>
                        <li role="presentation"><a href="#print" aria-controls="print" role="tab" data-toggle="tab"><span class="icon"><i class="fas fa-print"></i></span>Print Design</a><span class="bgcolor-major-gradient-overlay"></span></li>
                        <li role="presentation"><a href="#development" aria-controls="development" role="tab" data-toggle="tab"><span class="icon"><i class="fab fa-buromobelexperte"></i></span>Development</a><span class="bgcolor-major-gradient-overlay"></span></li>
                        <li role="presentation"><a href="#branding" aria-controls="branding" role="tab" data-toggle="tab"><span class="icon"><i class="far fa-building"></i></span>Branding</a><span class="bgcolor-major-gradient-overlay"></span></li>
                        <li role="presentation"><a href="#marketing" aria-controls="marketing" role="tab" data-toggle="tab"><span class="icon"><i class="fab fa-codiepie"></i></span>Marketing</a><span class="bgcolor-major-gradient-overlay"></span></li>
                        <li role="presentation"><a href="#support" aria-controls="marketing" role="tab" data-toggle="tab"><span class="icon"><i class="fas fa-headset"></i></span>support</a><span class="bgcolor-major-gradient-overlay"></span></li>
                    </ul>
                </div> <!-- //.col-sm-6 -->

                <div class="col-sm-6">
                    <div class="tab-content">
                        <!-- ========== TAB PANE ========== -->
                        <div role="tabpanel" class="tab-pane active" id="web">
                            <div class="details-wrapper">
                                <div class="details">
                                    <p>
                                        Webdesign ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. quis nostrud exercitation ullamco.
                                    </p>
                                    <p>
                                        Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.eu
                                    </p>
                                </div> <!-- //details -->
                                <div class="work-progress">
                                    <div class="each-item">
                                        <div data-value="0.705" data-thickness="10" class="circle circle-red">
                                            <span></span>
                                        </div>
                                        <p class="title">HTML</p>
                                    </div>
                                    <div class="each-item">
                                        <div data-value="0.50" data-thickness="10" class="circle circle-red">
                                            <span></span>
                                        </div>
                                        <p class="title">WORDPRESS</p>
                                    </div>
                                    <div class="each-item">
                                        <div data-value="0.90" data-thickness="10" class="circle circle-red">
                                            <span></span>
                                        </div>
                                        <p class="title">JAVASCRIPT</p>
                                    </div>
                                </div> <!-- //.work-progress -->
                            </div> <!-- //.details-wrapper -->
                        </div> <!-- //tab-pane -->
                        <!-- ========== TAB PANE ========== -->
                        <div role="tabpanel" class="tab-pane" id="print">
                            <div class="details-wrapper">
                                <div class="details">
                                    <p>
                                        Print Design ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. quis nostrud exercitation ullamco.
                                    </p>
                                    <p>
                                        Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.eu
                                    </p>
                                </div> <!-- //details -->
                                <div class="work-progress">
                                    <div class="each-item">
                                        <div data-value="0.705" data-thickness="10" class="circle circle-red">
                                            <span></span>
                                        </div>
                                        <p class="title">HTML</p>
                                    </div>
                                    <div class="each-item">
                                        <div data-value="0.50" data-thickness="10" class="circle circle-red">
                                            <span></span>
                                        </div>
                                        <p class="title">WORDPRESS</p>
                                    </div>
                                    <div class="each-item">
                                        <div data-value="0.909" data-thickness="10" class="circle circle-red">
                                            <span></span>
                                        </div>
                                        <p class="title">JAVASCRIPT</p>
                                    </div>
                                </div> <!-- //.work-progress -->
                            </div> <!-- //.details-wrapper -->
                        </div> <!-- //tab-pane -->
                        <!-- ========== TAB PANE ========== -->
                        <div role="tabpanel" class="tab-pane" id="development">
                            <div class="details-wrapper">
                                <div class="details">
                                    <p>
                                        Development ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. quis nostrud exercitation ullamco.
                                    </p>
                                    <p>
                                        Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.eu
                                    </p>
                                </div> <!-- //details -->
                                <div class="work-progress">
                                    <div class="each-item">
                                        <div data-value="0.705" data-thickness="10" class="circle circle-red">
                                            <span></span>
                                        </div>
                                        <p class="title">HTML</p>
                                    </div>
                                    <div class="each-item">
                                        <div data-value="0.50" data-thickness="10" class="circle circle-red">
                                            <span></span>
                                        </div>
                                        <p class="title">WORDPRESS</p>
                                    </div>
                                    <div class="each-item">
                                        <div data-value="0.909" data-thickness="10" class="circle circle-red">
                                            <span></span>
                                        </div>
                                        <p class="title">JAVASCRIPT</p>
                                    </div>
                                </div> <!-- //.work-progress -->
                            </div> <!-- //.details-wrapper -->
                        </div> <!-- //tab-pane -->
                        <!-- ========== TAB PANE ========== -->
                        <div role="tabpanel" class="tab-pane" id="branding">
                            <div class="details-wrapper">
                                <div class="details">
                                    <p>
                                        Branding ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. quis nostrud exercitation ullamco.
                                    </p>
                                    <p>
                                        Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.eu
                                    </p>
                                </div> <!-- //details -->
                                <div class="work-progress">
                                    <div class="each-item">
                                        <div data-value="0.705" data-thickness="10" class="circle circle-red">
                                            <span></span>
                                        </div>
                                        <p class="title">HTML</p>
                                    </div>
                                    <div class="each-item">
                                        <div data-value="0.50" data-thickness="10" class="circle circle-red">
                                            <span></span>
                                        </div>
                                        <p class="title">WORDPRESS</p>
                                    </div>
                                    <div class="each-item">
                                        <div data-value="0.909" data-thickness="10" class="circle circle-red">
                                            <span></span>
                                        </div>
                                        <p class="title">JAVASCRIPT</p>
                                    </div>
                                </div> <!-- //.work-progress -->
                            </div> <!-- //.details-wrapper -->
                        </div> <!-- //tab-pane -->
                        <!-- ========== TAB PANE ========== -->
                        <div role="tabpanel" class="tab-pane" id="marketing">
                            <div class="details-wrapper">
                                <div class="details">
                                    <p>
                                        Marketing ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. quis nostrud exercitation ullamco.
                                    </p>
                                    <p>
                                        Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.eu
                                    </p>
                                </div> <!-- //details -->
                                <div class="work-progress">
                                    <div class="each-item">
                                        <div data-value="0.705" data-thickness="10" class="circle circle-red">
                                            <span></span>
                                        </div>
                                        <p class="title">HTML</p>
                                    </div>
                                    <div class="each-item">
                                        <div data-value="0.50" data-thickness="10" class="circle circle-red">
                                            <span></span>
                                        </div>
                                        <p class="title">WORDPRESS</p>
                                    </div>
                                    <div class="each-item">
                                        <div data-value="0.909" data-thickness="10" class="circle circle-red">
                                            <span></span>
                                        </div>
                                        <p class="title">JAVASCRIPT</p>
                                    </div>
                                </div> <!-- //.work-progress -->
                            </div> <!-- //.details-wrapper -->
                        </div> <!-- //tab-pane -->
                        <!-- ========== TAB PANE ========== -->
                        <div role="tabpanel" class="tab-pane" id="support">
                            <div class="details-wrapper">
                                <div class="details">
                                    <p>
                                        Support ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. quis nostrud exercitation ullamco.
                                    </p>
                                    <p>
                                        Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.eu
                                    </p>
                                </div> <!-- //details -->
                                <div class="work-progress">
                                    <div class="each-item">
                                        <div data-value="0.705" data-thickness="10" class="circle circle-red">
                                            <span></span>
                                        </div>
                                        <p class="title">HTML</p>
                                    </div>
                                    <div class="each-item">
                                        <div data-value="0.50" data-thickness="10" class="circle circle-red">
                                            <span></span>
                                        </div>
                                        <p class="title">WORDPRESS</p>
                                    </div>
                                    <div class="each-item">
                                        <div data-value="0.909" data-thickness="10" class="circle circle-red">
                                            <span></span>
                                        </div>
                                        <p class="title">JAVASCRIPT</p>
                                    </div>
                                </div> <!-- //.work-progress -->
                            </div> <!-- //.details-wrapper -->
                        </div> <!-- //tab-pane -->
                    </div> <!-- //tab-content -->
                </div>
            </div><!-- //.row -->
        </div> <!-- //tabbed-about-us -->
    </div> <!-- //container -->
</section>
<!-- //End About us --><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
/* jquery-circle-progress - jQuery Plugin to draw animated circular progress bars - URL: http://kottenator.github.io/jquery-circle-progress/ - Author: Rostyslav Bryzgunov - License: MIT */
!function(t){"use strict";function i(t){this.init(t)}i.prototype={value:0,size:100,startAngle:-Math.PI,thickness:"2",fill:{gradient:["#3aeabb","#fdd250"]},emptyFill:"rgba(150, 150, 150, .5)",animation:{duration:1200,easing:"circleProgressEasing"},animationStartValue:0,reverse:!1,lineCap:"butt",constructor:i,el:null,canvas:null,ctx:null,radius:0,arcFill:null,lastFrameValue:0,init:function(i){t.extend(this,i),this.radius=this.size/2,this.initWidget(),this.initFill(),this.draw()},initWidget:function(){var i=this.canvas=this.canvas||t("<canvas>").prependTo(this.el)[0];i.width=this.size,i.height=this.size,this.ctx=i.getContext("2d")},initFill:function(){function i(){var i=t("<canvas>")[0];i.width=e.size,i.height=e.size,i.getContext("2d").drawImage(f,0,0,n,n),e.arcFill=e.ctx.createPattern(i,"no-repeat"),e.drawFrame(e.lastFrameValue)}var e=this,a=this.fill,r=this.ctx,n=this.size;if(!a)throw Error("The fill is not specified!");if(a.color&&(this.arcFill=a.color),a.gradient){var s=a.gradient;if(1==s.length)this.arcFill=s[0];else if(s.length>1){for(var o=a.gradientAngle||0,l=a.gradientDirection||[n/2*(1-Math.cos(o)),n/2*(1+Math.sin(o)),n/2*(1+Math.cos(o)),n/2*(1-Math.sin(o))],c=r.createLinearGradient.apply(r,l),h=0;h<s.length;h++){var u=s[h],d=h/(s.length-1);t.isArray(u)&&(d=u[1],u=u[0]),c.addColorStop(d,u)}this.arcFill=c}}if(a.image){var f;a.image instanceof Image?f=a.image:(f=new Image,f.src=a.image),f.complete?i():f.onload=i}},draw:function(){this.animation?this.drawAnimated(this.value):this.drawFrame(this.value)},drawFrame:function(t){this.lastFrameValue=t,this.ctx.clearRect(0,0,this.size,this.size),this.drawEmptyArc(t),this.drawArc(t)},drawArc:function(t){var i=this.ctx,e=this.radius,a=this.getThickness(),r=this.startAngle;i.save(),i.beginPath(),this.reverse?i.arc(e,e,e-a/2,r-2*Math.PI*t,r):i.arc(e,e,e-a/2,r,r+2*Math.PI*t),i.lineWidth=a,i.lineCap=this.lineCap,i.strokeStyle=this.arcFill,i.stroke(),i.restore()},drawEmptyArc:function(t){var i=this.ctx,e=this.radius,a=this.getThickness(),r=this.startAngle;1>t&&(i.save(),i.beginPath(),0>=t?i.arc(e,e,e-a/2,0,2*Math.PI):this.reverse?i.arc(e,e,e-a/2,r,r-2*Math.PI*t):i.arc(e,e,e-a/2,r+2*Math.PI*t,r),i.lineWidth=a,i.strokeStyle=this.emptyFill,i.stroke(),i.restore())},drawAnimated:function(i){var e=this,a=this.el,r=t(this.canvas);r.stop(!0,!1),a.trigger("circle-animation-start"),r.css({animationProgress:0}).animate({animationProgress:1},t.extend({},this.animation,{step:function(t){var r=e.animationStartValue*(1-t)+i*t;e.drawFrame(r),a.trigger("circle-animation-progress",[t,r])}})).promise().always(function(){a.trigger("circle-animation-end")})},getThickness:function(){return t.isNumeric(this.thickness)?this.thickness:this.size/14},getValue:function(){return this.value},setValue:function(t){this.animation&&(this.animationStartValue=this.lastFrameValue),this.value=t,this.draw()}},t.circleProgress={defaults:i.prototype},t.easing.circleProgressEasing=function(t,i,e,a,r){return(i/=r/2)<1?a/2*i*i*i+e:a/2*((i-=2)*i*i+2)+e},t.fn.circleProgress=function(e,a){var r="circle-progress",n=this.data(r);if("widget"==e){if(!n)throw Error('Calling "widget" method on not initialized instance is forbidden');return n.canvas}if("value"==e){if(!n)throw Error('Calling "value" method on not initialized instance is forbidden');if("undefined"==typeof a)return n.getValue();var s=arguments[1];return this.each(function(){t(this).data(r).setValue(s)})}return this.each(function(){var a=t(this),n=a.data(r),s=t.isPlainObject(e)?e:{};if(n)n.init(s);else{var o=t.extend({},a.data());"string"==typeof o.fill&&(o.fill=JSON.parse(o.fill)),"string"==typeof o.animation&&(o.animation=JSON.parse(o.animation)),s=t.extend(o,s),s.el=a,n=new i(s),a.data(r,n)}})}}(jQuery),function(t){function i(i){return t(i).filter(function(){return t(this).is(":appeared")})}function e(){s=!1;for(var t=0,e=r.length;e>t;t++){var a=i(r[t]);if(a.trigger("appear",[a]),c[t]){var n=c[t].not(a);n.trigger("disappear",[n])}c[t]=a}}function a(t){r.push(t),c.push()}var r=[],n=!1,s=!1,o={interval:250,force_process:!1},l=t(window),c=[];t.expr[":"].appeared=function(i){var e=t(i);if(!e.is(":visible"))return!1;var a=l.scrollLeft(),r=l.scrollTop(),n=e.offset(),s=n.left,o=n.top;return o+e.height()>=r&&o-(e.data("appear-top-offset")||0)<=r+l.height()&&s+e.width()>=a&&s-(e.data("appear-left-offset")||0)<=a+l.width()?!0:!1},t.fn.extend({appear:function(i){var r=t.extend({},o,i||{}),l=this.selector||this;if(!n){var c=function(){s||(s=!0,setTimeout(e,r.interval))};t(window).scroll(c).resize(c),n=!0}return r.force_process&&setTimeout(e,r.interval),a(l),t(l)}}),t.extend({force_appear:function(){return n?(e(),!0):!1}})}(function(){return"undefined"!=typeof module?require("jquery"):jQuery}());
/*==========  CIRCLE CHART  ==========*/
var el = $('.circle'),
inited = false;
el.appear({ force_process: true });
el.on('appear', function() {
	if (!inited) {
		el.circleProgress();
		inited = true;
	}
});

if ($('.circle').length > 0) {
	$('.circle').circleProgress({
		size:105,
		fill: {color: "#536dfe"},
		emptyFill: '#eee',
		startAngle: 300,
		lineCap: 'round',
		animation: {duration: 1800}
	})
	.on('circle-animation-progress', function (event, progress, stepValue) {
		$(this).find('span').text((stepValue * 100).toFixed(1));
	});
}
// presets 2
if ($('.circle-red').length > 0) {
	$('.circle-red').circleProgress({
		fill: {color: "#f3474b"},
	});
}
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS

Bootstrap Accordions	Bootstrap Buttons
Bootstrap Cards	Bootstrap Footers
Bootstrap Forms	Bootstrap Grids
Bootstrap Headers	Bootstrap Paginations
Bootstrap Popups	Bootstrap Progress Bars
Bootstrap Search Boxes	Bootstrap Sidebars
Bootstrap Sliders	Bootstrap Tables
Bootstrap Tabs	Bootstrap Thumbnails
Bootstrap Timeline	Bootstrap Toggle Switches
React Accordions	React Buttons
React Forms	React Headers
React Menus	React Popups
React Progress Bars	React Sidebars

Feel The Power

Bootstrap Tabs:

About us Tabs with Bootstrap

Bootstrap Tab Code

CSS Tabs

HTML Tabs