Перенос секции HTML шаблона в Joomla шаблон вместе с CSS - Joomla 3.x: Шаблоны, разметка и макеты вывода

<section id="about" class="section-content bg1">
<div class="container">
   <div class="row">
      <!-- Section Title -->
      <div class="section-title item_bottom text-center">
         <div>
            <span class="fa fa-user fa-2x"></span>
         </div>
         <h1>About <span>Me</span></h1>
      </div>
      <!-- End Section Title -->
   </div>
   <div class="row">
      <div class="col-md-4 text-center item_bottom">
         <img src="images/photo.jpg" class="img-center img-responsive" alt="My photo"/>
         <!-- YOUR PHOTO -->
         <div class="name-title">
            <h2>Jonathan Doe</h2>
            <!-- Your Name -->
            <h5>UI/UX Designer</h5>
            <!-- Your Designation -->
         </div>
      </div>
      <div class="col-md-4 item_top">
         <p class="quoteline">
            Be who you are and say what you feel, because those who mind don't matter, and those who matter don't mind.
         </p>
         <p>
            Hello, I'm a UI/UX Designer & Front End Developer from Dhaka, Bangladesh. I hold a master degree of Web Design from the St. Patrick University.
         </p>
         <p>
             I currently work at Intel, where I spend most of my time crafting and working on awesome projects. Lorem ipsum dolor sit amet consectetuer Integer eleifend Curabitur id ut. Quisque Aenean ut pede id elit ligula est mollis sapien magna. Urna turpis quis sagittis at ac Sed augue habitant tortor elit. Dolor Quisque et elit aliquam vitae habitant.
         </p>
      <p class="text-right">
      <img src="images/signature.png" alt="signature" />
      </p>
      </div>
      <div class="col-md-4 item_bottom">
        <ul class="fa-ul">
            <li><i class="fa fa-li fa-calendar"></i><strong>Birthdate</strong> : 02/09/1982</li>
            <li><i class="fa fa-li fa-mobile"></i><strong>Phone</strong> : +1 343-234-4343</li>
            <li><i class="fa fa-li fa-envelope-o"></i><strong>Email</strong> : john@example.com</li>
            <li><i class="fa fa-li fa-globe"></i><strong>Website</strong> : www.example.com</li>
            <li><i class="fa fa-li fa-home"></i><strong>Adresse</strong> : 12 Segun Bagicha, 10th Floor,<br>Dhaka 1000, Bangladesh.</li>
         </ul>
         
         <div class="number-counters text-center new-line">
            <div class="counters-item">
               <i class="fa fa-group fa-2x"></i>
               <strong data-to="150">0</strong>
               <!-- Set Your Number here. i,e. data-to="56" -->
               <p>
                  Happy Clients
               </p>
            </div>
            <div class="counters-item">
               <i class="fa fa-flag fa-2x"></i>
               <strong data-to="7">0</strong>
               <!-- Set Your Number here. i,e. data-to="56" -->
               <p>
                  Year Experience
               </p>
            </div>
            <div class="counters-item">
               <i class="fa fa-trophy fa-2x"></i>
               <strong data-to="13">0</strong>
               <!-- Set Your Number here. i,e. data-to="56" -->
               <p>
                  Awards Won
               </p>
            </div>
            <div class="counters-item">
               <i class="fa fa-thumbs-up fa-2x"></i>
               <strong data-to="520">0</strong>
               <!-- Set Your Number here. i,e. data-to="56" -->
               <p>
                  Projects Done
               </p>
            </div>
         </div>
      </div>
   </div>
   <div class="row services">
      <div class="col-md-4">
         <!-- Service -->
         <div class="services-box new-line item_left">
            <h4>Customer Support</h4>
            <div class="services-box-icon">
               <i class="fa fa-smile-o fa-3x"></i>
            </div>
            <div class="service-box-info">
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellesque imperdiet. Nulla lacinia iaculis nulla.
               </p>
            </div>
         </div>
         <!-- End Service -->
      </div>
      <div class="col-md-4">
         <!-- Service -->
         <div class="services-box new-line item_bottom">
            <h4>Web Design</h4>
            <div class="services-box-icon">
               <i class="fa fa-html5 fa-3x"></i>
            </div>
            <div class="service-box-info">
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellesque imperdiet. Nulla lacinia iaculis nulla.
               </p>
            </div>
         </div>
         <!-- End Service -->
      </div>
      <div class="col-md-4 clearfix">
         <!-- Service -->
         <div class="services-box new-line item_right">
            <h4>Wordpress Themes</h4>
            <div class="services-box-icon">
               <i class="fa fa-link fa-3x"></i>
            </div>
            <div class="service-box-info">
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellesque imperdiet. Nulla lacinia iaculis nulla.
               </p>
            </div>
         </div>
         <!-- End Service -->
      </div>
   </div>                     
</div>
</section>