Here is the code for bloggers:

<!--About section start-->
      <section class='section section-padding about' id='about'>
        <div class='container'>
          <!--Page Header-->
          <div class='row page-header wow fadeInUp animated' style='visibility: visible;'>
            <h1>
              ABOUT ME
            </h1>
            <div class='border-bottom'/>
          </div>
          <!--Page Content-->
          <div class='row'>
            <div class='about-content'>
              <!--Basic Info-->
              <div class='col-md-4 col-sm-7 basic-info wow fadeInUp animated' style='visibility: visible;'>
                <!-- About Name -->
                <h1 class='person-title'>Satvik Masurkar</h1>
                <!-- About Bio -->
                <p class='bio-text'>
                  I&#8217;m a web developer and graphic designer living in Dombivli,India. I spend my days with my hands in many different areas of web development from back end programming (PHP, Django/Python, Ruby on Rails) to front end engineering (HTML, CSS, and jQuery/Javascript), digital accessibility, user experience and visual design.
                </p>
                <ul class='info-list'>
                  <!-- About info -->
                  <li><i class='lnr lnr-map'/>Dombivli,Maharashtra,India</li>
                  <li><i class='lnr lnr-phone'/>+91 7700056797</li>
                  <li><i class='lnr lnr-envelope'/>gdmasurkar@gmail.com</li>
                  <li><i class='lnr lnr-earth'/>www.satvik.online</li>
                </ul>
              </div>
              <!--Profile Photo-->
              <div class='col-md-4 col-sm-5 profile-photo wow fadeInUp animated' style='visibility: visible;'>
                <!-- Avatar -->
                <img alt='Me' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAyTbHoHOjx2KAs94oICr1GgFeAlf2M9eK3BRA8ezbtYsvEaTDkDPlEawes8bOnguTLPiQ387OQgp7HCdZVpqfbN-N7Dpx1OvrTpgCaapm8GAu3Un7XOIlP-2jPb8w8rHPNMn3fb83g2K8/s320/SM-Logo.png'/>
              </div>
              <!--Skills Bar-->
              <div class='col-md-4 col-md-push-0 col-sm-8 col-sm-push-2 skills-info wow fadeInUp animated' style='visibility: visible;'>
                <h1 class='title'>My Professional Skills</h1>
                <p class='skill-text'>
                  I am constantly researching and learning about the latest tools and frameworks in the fields of front-end development and UI design.
                </p>
                <div class='social-link' style='margin: 0;padding: 10px 0;text-align: center;'>
                  <!-- About Social Links -->
                  <a href='https://www.facebook.com/satvikmasurkar'><i class='fa fa-facebook'/></a>
                  <a href='https://twitter.com/satvikmasurkar'><i class='fa fa-twitter'/></a>
                  <a href='https://www.youtube.com/channel/UCGHN10qsa_-PG0t2H0eV2QQ'><i class='fa fa-google-plus'/></a>
                  <a href='https://www.linkedin.com/in/satvik-masurkar-12b238193/'><i class='fa fa-linkedin'/></a>
                </div>
                <div class='progress-bar-area'>
                  <!--About Skills -->
                  <div class='single-bar'>
                    <div class='skill-info'>
                      <span class='skill-title'>Web Development</span><!--Skills Name-->
                      <span class='skill-percent'>90%</span><!--Skills Percentage-->
                    </div>
                    <div class='progress'>
                      <div class='progress-bar' role='progressbar' style='width: 90%;'/><!--Change Skills Percentage-->
                    </div>
                  </div>
                  <!--Single Skills Bar-->
                  <div class='single-bar'>
                    <div class='skill-info'>
                      <span class='skill-title'>SEO Optimization</span><!--Skills Name-->
                      <span class='skill-percent'>80%</span><!--Skills Percentage-->
                    </div>
                    <div class='progress'>
                      <div class='progress-bar' role='progressbar' style='width: 80%;'/><!--Change Skills Percentage-->
                    </div>
                  </div>
                  <!--Single Skills Bar-->
                  <div class='single-bar'>
                    <div class='skill-info'>
                      <span class='skill-title'>Software Development</span><!--Skills Name-->
                      <span class='skill-percent'>81%</span><!--Skills Percentage-->
                    </div>
                    <div class='progress'>
                      <div class='progress-bar' role='progressbar' style='width: 81%;'/><!--Change Skills Percentage-->
                    </div>
                  </div>
                  <!--Single Skills Bar-->
                  <div class='single-bar'>
                    <div class='skill-info'>
                      <span class='skill-title'>Business Analyst</span><!--Skills Name-->
                      <span class='skill-percent'>99%</span><!--Skills Percentage-->
                    </div>
                    <div class='progress'>
                      <div class='progress-bar' role='progressbar' style='width: 99%;'/><!--Change Skills Percentage-->
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!--About section end-->

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    text-rendering: optimizeLegibility
}
a,
button {
    -webkit-transition: all .3s;
    transition: all .3s
}
a button:hover,
a:focus,
a:hover,
button button:hover,
button:focus,
button:hover {
    -webkit-transition: all .3s;
    transition: all .3s;
    text-decoration: none
}
.btn {
    border-radius: 0
}
.section-title {
    display: block;
    margin-bottom: 100px
}
.section-title .title {
    font-weight: 800;
    display: inline-block;
    margin-top: 0;
    margin-bottom: 10px
}
.section-title .sub-title {
    font-size: 16px;
    line-height: 30px;
    color: gray
}
.section-title.text-left h1 {
    margin-left: 20px
}
.section-title.text-right h1 {
    margin-right: 20px
}
.light-txt h1,
.light-txt h5,
.light-txt p {
    margin-top: 0
}
.light-txt .sub-title,
.light-txt div {
    margin-top: 0;
    color: #fff
}

.light-txt h1,
.light-txt h2,
.light-txt h3,
.light-txt h4,
.light-txt h5,
.light-txt p,
.light-txt span {
    color: #fff
}
.quote .quote-img img {
    width: 40px;
    height: auto;
    margin-bottom: 15px;
    padding: 10px;
    opacity: .7
}
.quote p {
    margin-bottom: 0
}
#preloader {
    position: fixed;
    z-index: 1800;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000
}
.no-js #preloader,
.oldie #preloader {
    display: none
}
#loader {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    padding: 0
}
#loader:before {
    display: block;
    width: 60px;
    height: 60px;
    content: '';
    -webkit-animation: load 1.1s infinite linear;
    animation: load 1.1s infinite linear;
    border-top: 2px solid rgba(255, 255, 255, .1);
    border-right: 2px solid rgba(255, 255, 255, .1);
    border-bottom: 2px solid rgba(255, 255, 255, .1);
    border-left: 2px solid #C49B66;
    border-radius: 50%
}
@-webkit-keyframes load {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}
@keyframes load {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}
.white-highlight{
color:#fff;
}
.section-padding{
padding-top:60px;
padding-bottom:60px;
}
.page-header{
margin:0px;
padding:0px;
border:0px;
text-align:center;
position:relative;
}
.page-header h1{
    font-weight: 700;
    color: #282528;
    text-transform: uppercase;
}
.page-header .border-bottom{
width:12px;
height:12px;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
margin:0 auto;
position:relative;
}
.page-header .border-bottom:before,
.page-header .border-bottom:after{
content:"";
position:absolute;
height:1px;
width:60px;
}
.page-header .border-bottom:before{
left:-70px;
bottom:5px;
}
.page-header .border-bottom:after{
right:-70px;
bottom:5px;
}
.color-highlight{
color:#C49B66;
}
.page-header .border-bottom{
border:1px solid #C49B66;
}
.page-header .border-bottom:before,
.page-header .border-bottom:after{
background:#C49B66;

}