About us Tabs with Bootstrap

Bootstrap Tabs: About us Tabs with Bootstrap

The section about us on any website is very important because it represents the working team on the website, business goals, etc., but having long texts in a row is tedious. The following code solves this problem and by creating tabs in a square next to the text, it prevents long texts in a row and the user can see the desired text by selecting any of these tabs.

#Bootstrap Tab Code # CSS Tabs # HTML Tabs

<!-- this script got from www.frontendfreecode.com -->
<style>
<!-- ========== ABOUT US SECTION ========== -->
<section id="about-us" class="about-us-bg section-common-space" style="background-image: url(http://frontendfreecode.com/codes/files/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 --></style>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<div id="badge"><a href="#">Checkout Full Page</a></div>
<section class="price-section" id="pricing">
    <img src="https://gomnam1336.github.io/Pricing_Plans/Pricing_Plan_with_Ball_Animation/pricing-obj-1.svg" alt="plan background" class="pricing-obj-1" />
    <img src="https://gomnam1336.github.io/Pricing_Plans/Pricing_Plan_with_Ball_Animation/pricing-obj-2.svg" alt="plan background" class="pricing-obj-2" />
    <div class="container">
        <div class="row center-xs">
            <div class="col-xs-12">
                <div class="feature">
                    <div class="feature-header">
                        <h2>Pricing</h2>
                    </div>
                    <div class="pricing-plans">
                        <div class="pricing-plan">
                            <div class="plan-bg"><img src="https://wee.bio/assets/pattern/free-plan-bg.svg" alt="plan background" /></div>
                            <div class="free-tier">
                                <div class="plan-title">Maker</div>
                                <div class="plan-price">
                                    <div class="price">FREE</div>
                                </div>
                                <div class="plan-description">
                                    <span>For The Starters</span>
                                    <span>The essentials to get you up and running. Comes with basic widget + upto 100 reviews per month across all sites.</span>
                                </div>
                            </div>
                            <div class="plan-action">
                                <a href="/register" class="btn btn--big btn--primary">START FOR FREE</a>
                            </div>
                            <div class="pricing-plan-extras">
                                <ul>
                                    <span>Includes:</span>
                                    <li>Unlimited Websites</li>
                                    <li>Upto 100 Reviews /mo</li>
                                    <li>Basic Analytics</li>
                                    <li>Bio, Social Links</li>
                                    <li>List multiple products</li>
                                </ul>
                            </div>
                        </div>

                        <div class="pricing-plan">
                            <div class="plan-bg"><img src="https://gomnam1336.github.io/Pricing_Plans/Pricing_Plan_with_Ball_Animation//super-plan-bg.svg" alt="plan background" /></div>
                            <img src="https://gomnam1336.github.io/Pricing_Plans/Pricing_Plan_with_Ball_Animation//super-obj-1.png" alt="plan background" class="obj-1" />
                            <img src="https://gomnam1336.github.io/Pricing_Plans/Pricing_Plan_with_Ball_Animation//super-obj-2.png" alt="plan background" class="obj-2" />
                            <img src="https://gomnam1336.github.io/Pricing_Plans/Pricing_Plan_with_Ball_Animation//super-obj-3.png" alt="plan background" class="obj-3" />
                            <div class="super-tier">
                                <div class="plan-title">Super</div>
                                <div class="plan-price">
                                    <div class="dollar">$</div>
                                    <div class="price">3</div>
                                    <div class="type">/ month</div>
                                </div>
                                <div class="plan-description">
                                    <span>For Power Makers</span>
                                    <span> Growing their businesses and collecting a lot of feedback, advanced insights into their users sentiments.</span>
                                </div>
                            </div>
                            <div class="plan-action">
                                <a href="/register?plan=super" class="btn btn--big btn--primary">GET SUPER FOR $3</a>
                            </div>

                            <div class="pricing-plan-extras">
                                <ul>
                                    <span>Includes:</span>
                                    <li>Upto 1000 reviews /mo</li>
                                    <li>Advanced Analytics</li>
                                    <li>Patreon/Kofi/BuyMeACoffee Link</li>
                                    <li>Unlimited Websites</li>
                                    <li>Bio, Social Links</li>
                                    <li>List multiple products</li>
                                    <span class="coming-soon">
                                        <div class="cs-header">Coming Soon</div>
                                        <li>Custom Branding</li>
                                        <li>Wall of Fan </li>
                                        <li>Public Company Page </li>
                                    </span>

                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</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"  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 www.frontendfreecode.com -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css"  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>
<style>
<!-- ========== ABOUT US SECTION ========== -->
<section id="about-us" class="about-us-bg section-common-space" style="background-image: url(http://frontendfreecode.com/codes/files/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 --></style>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<div id="badge"><a href="#">Checkout Full Page</a></div>
<section class="price-section" id="pricing">
    <img src="https://gomnam1336.github.io/Pricing_Plans/Pricing_Plan_with_Ball_Animation/pricing-obj-1.svg" alt="plan background" class="pricing-obj-1" />
    <img src="https://gomnam1336.github.io/Pricing_Plans/Pricing_Plan_with_Ball_Animation/pricing-obj-2.svg" alt="plan background" class="pricing-obj-2" />
    <div class="container">
        <div class="row center-xs">
            <div class="col-xs-12">
                <div class="feature">
                    <div class="feature-header">
                        <h2>Pricing</h2>
                    </div>
                    <div class="pricing-plans">
                        <div class="pricing-plan">
                            <div class="plan-bg"><img src="https://wee.bio/assets/pattern/free-plan-bg.svg" alt="plan background" /></div>
                            <div class="free-tier">
                                <div class="plan-title">Maker</div>
                                <div class="plan-price">
                                    <div class="price">FREE</div>
                                </div>
                                <div class="plan-description">
                                    <span>For The Starters</span>
                                    <span>The essentials to get you up and running. Comes with basic widget + upto 100 reviews per month across all sites.</span>
                                </div>
                            </div>
                            <div class="plan-action">
                                <a href="/register" class="btn btn--big btn--primary">START FOR FREE</a>
                            </div>
                            <div class="pricing-plan-extras">
                                <ul>
                                    <span>Includes:</span>
                                    <li>Unlimited Websites</li>
                                    <li>Upto 100 Reviews /mo</li>
                                    <li>Basic Analytics</li>
                                    <li>Bio, Social Links</li>
                                    <li>List multiple products</li>
                                </ul>
                            </div>
                        </div>

                        <div class="pricing-plan">
                            <div class="plan-bg"><img src="https://gomnam1336.github.io/Pricing_Plans/Pricing_Plan_with_Ball_Animation//super-plan-bg.svg" alt="plan background" /></div>
                            <img src="https://gomnam1336.github.io/Pricing_Plans/Pricing_Plan_with_Ball_Animation//super-obj-1.png" alt="plan background" class="obj-1" />
                            <img src="https://gomnam1336.github.io/Pricing_Plans/Pricing_Plan_with_Ball_Animation//super-obj-2.png" alt="plan background" class="obj-2" />
                            <img src="https://gomnam1336.github.io/Pricing_Plans/Pricing_Plan_with_Ball_Animation//super-obj-3.png" alt="plan background" class="obj-3" />
                            <div class="super-tier">
                                <div class="plan-title">Super</div>
                                <div class="plan-price">
                                    <div class="dollar">$</div>
                                    <div class="price">3</div>
                                    <div class="type">/ month</div>
                                </div>
                                <div class="plan-description">
                                    <span>For Power Makers</span>
                                    <span> Growing their businesses and collecting a lot of feedback, advanced insights into their users sentiments.</span>
                                </div>
                            </div>
                            <div class="plan-action">
                                <a href="/register?plan=super" class="btn btn--big btn--primary">GET SUPER FOR $3</a>
                            </div>

                            <div class="pricing-plan-extras">
                                <ul>
                                    <span>Includes:</span>
                                    <li>Upto 1000 reviews /mo</li>
                                    <li>Advanced Analytics</li>
                                    <li>Patreon/Kofi/BuyMeACoffee Link</li>
                                    <li>Unlimited Websites</li>
                                    <li>Bio, Social Links</li>
                                    <li>List multiple products</li>
                                    <span class="coming-soon">
                                        <div class="cs-header">Coming Soon</div>
                                        <li>Custom Branding</li>
                                        <li>Wall of Fan </li>
                                        <li>Public Company Page </li>
                                    </span>

                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<div id="bcl"><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</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

RECENT CODES

Bootstrap Table with Sorting Animation

Bootstrap Table with Col and Row Effect on Hover

Bootstrap Table with Fixed Header

Bootstrap Collapsing / Expanding Table

Bootstrap Pricing Table with Fade Effect

Bootstrap Header with Hover Effect

Bootstrap Dynamic Header with Style Change

Bootstrap Header with Material Effect for Tabs

Animating Bootstrap 4 Navbar

Vertical Bootstrap Header with Animation

Feel The Power

Bootstrap Tabs: About us Tabs with Bootstrap

What are You Looking for?

Watch how to Create the Tool!

The Tool Demo