Build Your Profile in Oracle APEX using Bootstrap


Here i am giving an example to build profile using Bootstrap in Oracle APEX.

Note: It's just an example, you can modify and use this code as per your wish.

Follow below steps to achieve this,

Step 1: Do copy and paste below code into page html header section.

<!DOCTYPE html>
<html>
   <head>
      <title>Resume</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
      <!-- Latest compiled JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
      <link rel="stylesheet" type="text/css" href="cv3.css">
   </head>
   <body>
      <div class="col-md-offset-2 col-md-8" style="background: white" id="wrapper">
      <div id="header">
         <div>
            <a href="https://orclking.blogspot.com/" target="_blank">
            <img src="#APP_IMAGES#karkuvelraja.jpeg" id="image">
            </a>
         </div>
         <div>
            <h2 id="name">Karkuvelraja Thangamariappan</h2>
            <p id="underline"></p>
            <h5 id="web">Oracle APEX and PLSQL Developer</h5>
         </div>
      </div>
      <!--  end header -->
      <div class="row">
      <div class="col-md-12">
         <h4 id="summary">SUMMARY</h4>
         <div id="summary">
            <div id="summary1">
               <div>
                  <p id="sum">I, Karkuvelraja T is an Oracle APEX Developer having 6+ years of experience involving Oracle Applications. I have working experience in domains like SQL, PL/SQL, Oracle APEX, Oracle BI publisher, report. Experience on Oracle APEX 3.2/4.0/4.1/4.2/5.0/5.1/18.1/19.1/20.1 well versed with RDBMS like Oracle 10g/11g including the technical design, development and documentation. Adept at responsive web techniques, XML, Xstl, HTML5, CSS3, JavaScript and jQuery development, progressive enhancement / graceful degradation and mobile web development. Expert in Application Express (APEX).</p>
               </div>
            </div>
            <!-- end section 1 -->
            <div class="row">
               <div class="col-md-12">
                  <h4 id="psummary">PROFESSIONAL SUMMARY</h4>
                  <div id="psummary">
                     <div id="psummary1">
                        <div>
                           <p id="psum">• Excellent experience in Application Development using Oracle SQL, PL/SQL, and Developer Oracle Application Express (APEX).<br/> 
                              • Proficiency in analysis, design, development, testing, implementation and maintenance of applications in Oracle Application Express.<br/>
                              • Hands-on experience with Oracle APEX 3.2/4.0/4.1/4.2/5.0/5.1/18.1/19.1/20.1.<br/>
                              • Integration of Oracle APEX with Oracle EBS.<br/>
                              • Experience in REST Web Services.<br/>
                              • Experience in APEX reports quires & report Layout.<br/>
                              • Good knowledge in front end development using APEX.<br/>
                              • Experience in creating master detail forms.<br/>
                              • Experience in developing forms based on views, tables and procedures in tabular and form layouts.<br/>
                              • Experience in developing interactive grid, collections, APEX_MAIL and etc.<br/>
                              • Experience in developing both web layout and paper lay out reports in various styles based on the user requirements.<br/>
                              • Extensively worked with third party database tools like TOAD & PL/SQL Developer.<br/>
                              • Excellent conceptual knowledge of Oracle 11g, PL/SQL and SQL.<br/>
                              • Experience in Monitoring Database and Handling exceptions.<br/>
                              • Rich concentrate on Query Performance Tuning.<br/>
                              • Rich experience in writing SQL queries, Views, Materialized views, Database links, PL/SQL procedures, functions, packages, triggers, cursors, collections, Dynamic SQL.<br/>
                              • Good Knowledge in creating E-mails using UTL_SMTP & UTL_MAIL.<br/>
                              • Experience in advanced PL/SQL concepts.<br/>
                              • Experience in UTL_SMTP & UTL_MAIL attache-ment concepts.<br/>
                              • Implementing the concepts of PL/SQL bulk collect.<br/>
                              • Implementing the concepts of PL/SQL Jobs, PL/SQL Schedulers.<br/>
                              • Developing Excel, Word, PDF, XML Templates and Reports in Oracle BI Publisher 10g.<br/>
                              • Developing various PDF template and reports in iReport (Jasper).<br/>
                              • Experience in writing Technical design documents and developing unit test documents.<br/>
                              • Effective team working skills. Able to work both as an individual and as a team member within multi-disciplinary team to meet the expected deadlines.<br/>
                              • Migrations.<br/>           
                              • Strong analytical and problem solving skills with ability to work within team environment and independently when needed.<br/>
                              • Strong interpersonal skills, ability to interact with people at all levels.<br/> 
                           </p>
                        </div>
                     </div>
                     <!-- end section 1 -->
                  </div>
               </div>
            </div>
            <!-- end row 1 -->
            <div class="row">
               <div class="col-md-12">
                  <h4 id="exp">EXPERIENCE (KEY PROJECTS)</h4>
                  <div id="experience">
                     <div id="exp1">
                        <div>
                           <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 438.536 438.536" style="enable-background:new 0 0 438.536 438.536;"
                              xml:space="preserve">
                           <path d="M433.113,5.424C429.496,1.807,425.215,0,420.267,0H18.276C13.324,0,9.041,1.807,5.425,5.424
                              C1.808,9.04,0.001,13.322,0.001,18.271v401.991c0,4.948,1.807,9.233,5.424,12.847c3.619,3.614,7.902,5.428,12.851,5.428h401.991
                              c4.948,0,9.229-1.813,12.847-5.428c3.614-3.613,5.421-7.898,5.421-12.847V18.271C438.534,13.319,436.73,9.04,433.113,5.424z"/>
                        </div>
                        <div>
                           <span id="head">Senior Oracle APEX Developer</span>
                           <p>Jul 2018 - Till Date</p>
                           <div>
                              <a href="https://www.damacproperties.com/en/" target="_blank">
                              <img src="#APP_IMAGES#Damac-300x288.png" id="image"></a>
                           </div>
                        </div>
                        <div>
                           <h4 id="ent">DAMAC Properties, Dubai</h4>
                           <p >
                              • Implemented Multiple Authentications (LDAP Authentication, SSO and Custom Authentication) and dynamic dashboards
                              </br>       
                              • Handling client independently. SPOC for this project.</br>
                              • Get requirements and get back work from subordinates.</br>
                              • Planning, Time Management, Resource Management, Strategy Analysis, Delivery Management of the project.</br>
                              • Implemented REST web service concept to get data from different DB.</br>
                              • Involved in writing complex PL/SQL Packages using Collections, Bulk Collect.</br>         
                              • Formulated SQL queries, functions and processes as per customization requirement for APEX.</br>
                              • Used Oracle APEX 5.1/18.1/19.1/20.1 for designing application structure.</br>
                              • Coded, tested and troubleshot software applications.</br>
                              • Developed SQL scripts, packages and procedures for Business rules check to implement business rules.</br
                              • Handled various issues that were raised during Business user Testing and provided immediate solutions.  </br
                           </p>
                        </div>
                     </div>
                     <!-- end section 1 -->
                     <p id="underline"></p>
                     <div id="exp1">
                        <div>
                           <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 438.536 438.536" style="enable-background:new 0 0 438.536 438.536;"
                              xml:space="preserve">
                           <path d="M433.113,5.424C429.496,1.807,425.215,0,420.267,0H18.276C13.324,0,9.041,1.807,5.425,5.424
                              C1.808,9.04,0.001,13.322,0.001,18.271v401.991c0,4.948,1.807,9.233,5.424,12.847c3.619,3.614,7.902,5.428,12.851,5.428h401.991
                              c4.948,0,9.229-1.813,12.847-5.428c3.614-3.613,5.421-7.898,5.421-12.847V18.271C438.534,13.319,436.73,9.04,433.113,5.424z"/>
                        </div>
                        <div>
                           <span id="head">Oracle APEX & PLSQL Developer</span>
                           <p>Nov 2017 - Jun 2018</p>
                           <div>
                              <a href="https://www.4iapps.com/" target="_blank">
                              <img src="#APP_IMAGES#4i.png" id="image1">
                              </a>
                           </div>
                        </div>
                        <div>
                           <h4 id="ent">4i Apps Solutions Pvt Ltd, Chennai</h4>
                           <p >• Worked with the Business analysts and requirements gathering, business analysis, testing, metrics and project coordination.<br/>
                              • Developed Project, Incident, Customer Relationship  Management Application.<br/>
                              • Developed Automatic ticket creation Application.<br/>
                              • Involved in logical modeling and physical modeling of application.<br/>
                              • Developed Procedures for efficient error handling process by capturing errors into user managed tables.<br/>
                              • Formulated SQL queries, functions and processes as per customization requirement for APEX.<br/>
                              • Supported APEX applications and conducted performance tuning for PLSQL.<br/>
                              • Designed application framework and developed Oracle APEX Application.<br/>
                              • Integrated with Jasper to generate PDF reports.<br/>
                              • Coded, tested and troubleshot software applications.<br/>
                              • Developed SQL scripts, packages and procedures for Business rules check to implement business rules.<br/>
                              • Provided APEX guidance and support to technical staff on application maintenance and SDLC process.<br/>
                           </p>
                        </div>
                     </div>
                     <!-- end section 1 -->
                     <p id="underline"></p>
                     <div id="exp1">
                        <div>
                           <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 438.536 438.536" style="enable-background:new 0 0 438.536 438.536;"
                              xml:space="preserve">
                           <path d="M433.113,5.424C429.496,1.807,425.215,0,420.267,0H18.276C13.324,0,9.041,1.807,5.425,5.424
                              C1.808,9.04,0.001,13.322,0.001,18.271v401.991c0,4.948,1.807,9.233,5.424,12.847c3.619,3.614,7.902,5.428,12.851,5.428h401.991
                              c4.948,0,9.229-1.813,12.847-5.428c3.614-3.613,5.421-7.898,5.421-12.847V18.271C438.534,13.319,436.73,9.04,433.113,5.424z"/>
                        </div>
                        <div>
                           <span id="head">Oracle APEX & PLSQL Developer</span>
                           <p>Sep 2015 - Oct 2017</p>
                           <div>
                              <a href="https://www.sundaramhome.in/" target="_blank">
                              <img src="#APP_IMAGES#sbfs.png" id="image1">
                              </a>
                           </div>
                        </div>
                        <div>
                           <h4 id="ent">Sundaram BNP Paribas Fund Services, Chennai</h4>
                           <p >• Integrated Oracle APEX 4.2 with Oracle BI Publisher 10g, to develop custome reports in OBIP.<br/>
                              • Involved in writing complex PL/SQL Packages using Collections, Bulk Collect.<br/>
                              • Developed Stored Procedures, Functions, Packages and SQL Scripts using PL/SQL.<br/>
                              • Designed and developed various custom packages triggers.<br/>
                              • Formulated SQL queries, functions and processes as per customization requirement for APEX.<br/>
                              • Load Excel, CSV, Text file data using APEX Collections.<br/>
                              • Designed APEX reports using reports queries & report layout.<br/> 
                           </p>
                        </div>
                     </div>
                     <!-- end section 1 -->
                     <p id="underline"></p>
                     <div id="exp1">
                        <div>
                           <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 438.536 438.536" style="enable-background:new 0 0 438.536 438.536;"
                              xml:space="preserve">
                           <path d="M433.113,5.424C429.496,1.807,425.215,0,420.267,0H18.276C13.324,0,9.041,1.807,5.425,5.424
                              C1.808,9.04,0.001,13.322,0.001,18.271v401.991c0,4.948,1.807,9.233,5.424,12.847c3.619,3.614,7.902,5.428,12.851,5.428h401.991
                              c4.948,0,9.229-1.813,12.847-5.428c3.614-3.613,5.421-7.898,5.421-12.847V18.271C438.534,13.319,436.73,9.04,433.113,5.424z"/>
                        </div>
                        <div>
                           <span id="head">Oracle APEX & PLSQL Developer</span>
                           <p>Aug 2014 - Aug 2015</p>
                           <div>
                              <a href="https://doyensys.com/" target="_blank">
                              <img src="#APP_IMAGES#doyensys.png" id="image">
                              </a>
                           </div>
                        </div>
                        <div>
                           <h4 id="ent">Doyen Systems Pvt Ltd, Chennai</h4>
                           <p>Worked with product team. Doyen Systme Private Limited is an exclusive Oracle Application consulting and services company. Project Management System is a SAAS based holistic solution to track project status, costs, resource utilizations, alerts, project profitability.  The main scope of this project is to develop and implement Project management System (PMO). Doyensys Incident Management System is and end-to-end incident management solution which encompasses the complete life-cycle of incidents from reporting to its closure. It is a cloud based system and maintained 24/7, with automatic update of new releases. This product will be managed and controlled using Application Express (APEX) development framework from Oracle.</p>
                        </div>
                     </div>
                     <!-- end section 1 -->
                  </div>
               </div>
            </div>
            <!-- end row 1 -->
            <div class="row">
               <div class="col-md-12">
                  <h4 id="exp">EDUCATION</h4>
                  <div id="experience">
                     <div id="exp1">
                        <div>
                           <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 438.536 438.536" style="enable-background:new 0 0 438.536 438.536;"
                              xml:space="preserve">
                           <path d="M433.113,5.424C429.496,1.807,425.215,0,420.267,0H18.276C13.324,0,9.041,1.807,5.425,5.424
                              C1.808,9.04,0.001,13.322,0.001,18.271v401.991c0,4.948,1.807,9.233,5.424,12.847c3.619,3.614,7.902,5.428,12.851,5.428h401.991
                              c4.948,0,9.229-1.813,12.847-5.428c3.614-3.613,5.421-7.898,5.421-12.847V18.271C438.534,13.319,436.73,9.04,433.113,5.424z"/>
                        </div>
                        <div>
                           <span id="head">Bachelor of Engineering - Electrical and Electronics Engineering</span>
                           <p>2010-2014</p>
                        </div>
                        <div>
                           <h4 id="ent">National Engineering College, Kovilpatti</h4>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <!-- end row 1 -->
            <div class="row">
               <div class="col-md-12">
                  <h4 id="exp">CERTIFICATIONS</h4>
                  <div id="experience">
                     <div id="exp1">
                        <div>
                           <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 438.536 438.536" style="enable-background:new 0 0 438.536 438.536;"
                              xml:space="preserve">
                           <path d="M433.113,5.424C429.496,1.807,425.215,0,420.267,0H18.276C13.324,0,9.041,1.807,5.425,5.424
                              C1.808,9.04,0.001,13.322,0.001,18.271v401.991c0,4.948,1.807,9.233,5.424,12.847c3.619,3.614,7.902,5.428,12.851,5.428h401.991
                              c4.948,0,9.229-1.813,12.847-5.428c3.614-3.613,5.421-7.898,5.421-12.847V18.271C438.534,13.319,436.73,9.04,433.113,5.424z"/>
                        </div>
                        <div>
                           <span id="head">Oracle Certified Associate</span>
                           <p>May 2020</p>
                           <p>
                              &nbsp;
                           </p>
                        </div>
                        <div>
                           <h4 id="ent"><a href="https://www.youracclaim.com/earner/earned/badge/65e3f071-6443-49ed-9895-34181d333a75" target="_blank">
                              Oracle Cloud Infrastructure Foundations 2020 Certified Associate
                              </a>
                           </h4>
                        </div>
                     </div>
                     <!-- end section 1 -->
                     <div id="exp1">
                        <div>
                           <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 438.536 438.536" style="enable-background:new 0 0 438.536 438.536;"
                              xml:space="preserve">
                           <path d="M433.113,5.424C429.496,1.807,425.215,0,420.267,0H18.276C13.324,0,9.041,1.807,5.425,5.424
                              C1.808,9.04,0.001,13.322,0.001,18.271v401.991c0,4.948,1.807,9.233,5.424,12.847c3.619,3.614,7.902,5.428,12.851,5.428h401.991
                              c4.948,0,9.229-1.813,12.847-5.428c3.614-3.613,5.421-7.898,5.421-12.847V18.271C438.534,13.319,436.73,9.04,433.113,5.424z"/>
                        </div>
                        <div>
                           <span id="head">Oracle Certified Professional</span>
                           <p>May 2020</p>
                           <p>
                              &nbsp;
                           </p>
                        </div>
                        <div>
                           <h4 id="ent"><a href="https://www.youracclaim.com/earner/earned/badge/1f2923d7-2447-4059-af99-3643fc671e73" target="_blank">
                              Oracle Autonomous Database Cloud 2019 Certified Specialist
                              </a>
                           </h4>
                        </div>
                     </div>
                     <!-- end section 1 -->
                     <div id="exp1">
                        <div>
                           <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 438.536 438.536" style="enable-background:new 0 0 438.536 438.536;"
                              xml:space="preserve">
                           <path d="M433.113,5.424C429.496,1.807,425.215,0,420.267,0H18.276C13.324,0,9.041,1.807,5.425,5.424
                              C1.808,9.04,0.001,13.322,0.001,18.271v401.991c0,4.948,1.807,9.233,5.424,12.847c3.619,3.614,7.902,5.428,12.851,5.428h401.991
                              c4.948,0,9.229-1.813,12.847-5.428c3.614-3.613,5.421-7.898,5.421-12.847V18.271C438.534,13.319,436.73,9.04,433.113,5.424z"/>
                        </div>
                        <div>
                           <span id="head">Oracle Certified Expert</span>
                           <p>Oct 2017</p>
                           <p>
                              &nbsp;
                           </p>
                        </div>
                        <div>
                           <h4 id="ent">
                              <a href="https://www.youracclaim.com/badges/62a48e04-47fb-4517-b670-aa7b2c96137b/linked_in" target="_blank">
                              Oracle Application Express Developer Certified Expert
                              </a>
                           </h4>
                        </div>
                     </div>
                     <!-- end section 1 -->
                     <div id="exp1">
                        <div>
                           <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 438.536 438.536" style="enable-background:new 0 0 438.536 438.536;"
                              xml:space="preserve">
                           <path d="M433.113,5.424C429.496,1.807,425.215,0,420.267,0H18.276C13.324,0,9.041,1.807,5.425,5.424
                              C1.808,9.04,0.001,13.322,0.001,18.271v401.991c0,4.948,1.807,9.233,5.424,12.847c3.619,3.614,7.902,5.428,12.851,5.428h401.991
                              c4.948,0,9.229-1.813,12.847-5.428c3.614-3.613,5.421-7.898,5.421-12.847V18.271C438.534,13.319,436.73,9.04,433.113,5.424z"/>
                        </div>
                        <div>
                           <span id="head">Oracle Certified Professional</span>
                           <p>Mar 2017</p>
                           <p>
                              &nbsp;
                           </p>
                        </div>
                        <div>
                           <h4 id="ent"><a href="https://www.youracclaim.com/badges/e1e3e4b8-a360-4d1a-92ce-baad0ba20e36/linked_in" target="_blank">
                              Oracle Advanced PL/SQL Developer Certified Professional
                              </a>
                           </h4>
                        </div>
                     </div>
                     <!-- end section 1 -->
                     <div id="exp1">
                        <div>
                           <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 438.536 438.536" style="enable-background:new 0 0 438.536 438.536;"
                              xml:space="preserve">
                           <path d="M433.113,5.424C429.496,1.807,425.215,0,420.267,0H18.276C13.324,0,9.041,1.807,5.425,5.424
                              C1.808,9.04,0.001,13.322,0.001,18.271v401.991c0,4.948,1.807,9.233,5.424,12.847c3.619,3.614,7.902,5.428,12.851,5.428h401.991
                              c4.948,0,9.229-1.813,12.847-5.428c3.614-3.613,5.421-7.898,5.421-12.847V18.271C438.534,13.319,436.73,9.04,433.113,5.424z"/>
                        </div>
                        <div>
                           <span id="head">Oracle Certified Associate</span>
                           <p>Mar 2017</p>
                        </div>
                        <div>
                           <h4 id="ent">
                              <a href="https://www.youracclaim.com/badges/5943a8cd-92e5-465c-aef6-a0ac43bd192a/linked_in" target="_blank">
                              Oracle PL/SQL Developer Certified Associate</a>
                           </h4>
                        </div>
                     </div>
                     <!-- end section 1 -->
                  </div>
               </div>
            </div>
            <!-- end row 1 -->
            <div class="row">
               <div class="col-md-5">
                  <h4 id="contacts">CONTACTS</h4>
                  <div class="topM">
                     <svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"viewBox="0 0 348.077 348.077">
                     <path d="M340.273,275.083l-53.755-53.761c-10.707-10.664-28.438-10.34-39.518,0.744l-27.082,27.076
                        c-1.711-0.943-3.482-1.928-5.344-2.973c-17.102-9.476-40.509-22.464-65.14-47.113c-24.704-24.701-37.704-48.144-47.209-65.257
                        c-1.003-1.813-1.964-3.561-2.913-5.221l18.176-18.149l8.936-8.947c11.097-11.1,11.403-28.826,0.721-39.521L73.39,8.194
                        C62.708-2.486,44.969-2.162,33.872,8.938l-15.15,15.237l0.414,0.411c-5.08,6.482-9.325,13.958-12.484,22.02
                        C3.74,54.28,1.927,61.603,1.098,68.941C-6,127.785,20.89,181.564,93.866,254.541c100.875,100.868,182.167,93.248,185.674,92.876
                        c7.638-0.913,14.958-2.738,22.397-5.627c7.992-3.122,15.463-7.361,21.941-12.43l0.331,0.294l15.348-15.029
                        C350.631,303.527,350.95,285.795,340.273,275.083z"/>
                     <span id="space"><a href="#">971 - 582036853</a></span>
                     <span id="space"><a href="#">91 - 9791475046</a></span>
                  </div>
                  <div class="topM">
                     <svg  version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 310 310">
                     <path id="XMLID_823_" d="  M297.917,64.645c-11.19-13.302-31.85-18.728-71.306-18.728H83.386c-40.359,0-61.369,5.776-72.517,19.938
                        C0,79.663,0,100.008,0,128.166v53.669c0,54.551,12.896,82.248,83.386,82.248h143.226c34.216,0,53.176-4.788,65.442-16.527
                        C304.633,235.518,310,215.863,310,181.835v-53.669C310,98.471,309.159,78.006,297.917,64.645z M199.021,162.41l-65.038,33.991
                        c-1.454,0.76-3.044,1.137-4.632,1.137c-1.798,0-3.592-0.484-5.181-1.446c-2.992-1.813-4.819-5.056-4.819-8.554v-67.764
                        c0-3.492,1.822-6.732,4.808-8.546c2.987-1.814,6.702-1.938,9.801-0.328l65.038,33.772c3.309,1.718,5.387,5.134,5.392,8.861
                        C204.394,157.263,202.325,160.684,199.021,162.41z"/>
                     <span id="space"><a href="https://www.youtube.com/channel/UCpfjJqgj9-pk_tP-Z9P17lA?view_as=subscriber" target="_blank">Youtube Link</a></span>
                  </div>
                  <div class="topM">
                     <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 550.795 550.795" xml:space="preserve">
                     <path d="M501.613,491.782c12.381,0,23.109-4.088,32.229-12.16L377.793,323.567c-3.744,2.681-7.373,5.288-10.801,7.767
                        c-11.678,8.604-21.156,15.318-28.434,20.129c-7.277,4.822-16.959,9.737-29.045,14.755c-12.094,5.024-23.361,7.528-33.813,7.528
                        h-0.306h-0.306c-10.453,0-21.72-2.503-33.813-7.528c-12.093-5.018-21.775-9.933-29.045-14.755
                        c-7.277-4.811-16.75-11.524-28.434-20.129c-3.256-2.387-6.867-5.006-10.771-7.809L16.946,479.622
                        c9.119,8.072,19.854,12.16,32.234,12.16H501.613z"/>
                     <path d="M31.047,225.299C19.37,217.514,9.015,208.598,0,198.555V435.98l137.541-137.541
                        C110.025,279.229,74.572,254.877,31.047,225.299z"/>
                     <path d="M520.059,225.299c-41.865,28.336-77.447,52.73-106.75,73.195l137.486,137.492V198.555
                        C541.98,208.396,531.736,217.306,520.059,225.299z"/>
                     <path d="M501.613,59.013H49.181c-15.784,0-27.919,5.33-36.42,15.979C4.253,85.646,0.006,98.97,0.006,114.949
                        c0,12.907,5.636,26.892,16.903,41.959c11.267,15.061,23.256,26.891,35.961,35.496c6.965,4.921,27.969,19.523,63.012,43.801
                        c18.917,13.109,35.368,24.535,49.505,34.395c12.05,8.396,22.442,15.667,31.022,21.701c0.985,0.691,2.534,1.799,4.59,3.269
                        c2.215,1.591,5.018,3.61,8.476,6.107c6.659,4.816,12.191,8.709,16.597,11.683c4.4,2.975,9.731,6.298,15.985,9.988
                        c6.249,3.685,12.143,6.456,17.675,8.299c5.533,1.842,10.655,2.766,15.367,2.766h0.306h0.306c4.711,0,9.834-0.924,15.368-2.766
                        c5.531-1.843,11.42-4.608,17.674-8.299c6.248-3.69,11.572-7.02,15.986-9.988c4.406-2.974,9.938-6.866,16.598-11.683
                        c3.451-2.497,6.254-4.517,8.469-6.102c2.057-1.476,3.605-2.577,4.596-3.274c6.684-4.651,17.1-11.892,31.104-21.616
                        c25.482-17.705,63.01-43.764,112.742-78.281c14.957-10.447,27.453-23.054,37.496-37.803c10.025-14.749,15.051-30.22,15.051-46.408
                        c0-13.525-4.873-25.098-14.598-34.737C526.461,63.829,514.932,59.013,501.613,59.013z"/>
                     <span id="space"><a href="#">tkarkuvelraja@gmail.com</a></span>
                  </div>
               </div>
               <div class="col-md-7">
                  <h4 id="skills">SKILLS</h4>
                  <div class="skills">
                     <table>
                        <tr>
                           <td>
                              <div>
                                 <div id="ui">
                                    <p>APEX&nbsp</p>
                                    <div id="progress-bar">
                                       <div id="progress" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width:95%">
                                       </div>
                                    </div>
                           </td>
                           <td>&nbsp;&nbsp;
                           </td>
                           <td>
                           <div id="ui">
                           <p>PLSQL</p>
                           <div id="progress-bar">
                           <div id="progress" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width:95%"></div>
                           </div>
                           </div>
                           </td>
                           <td>&nbsp;&nbsp;
                           </td>
                           <td>
                           <div id="ui">
                           <p>SQL&nbsp</p>
                           <div id="progress-bar">
                           <div id="progress" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width:95%"></div>
                           </div>
                           </div>
                           </td>
                        </tr>
                        <tr>
                        <td>
                        <div>
                        <div id="ui">
                        <p>HTML&nbsp</p> 
                        <div id="progress-bar">
                        <div id="progress" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width:75%">
                        </div>
                        </div>
                        </td>
                        <td>&nbsp;&nbsp;
                        </td>
                        <td>
                        <div id="ui">
                        <p>CSS&nbsp</p>
                        <div id="progress-bar">
                        <div id="progress" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width:75%"></div>
                        </div>
                        </div>
                        </td>
                        <td>&nbsp;&nbsp;
                        </td>
                        <td>
                        <div id="ui">
                        <p>JS&nbsp</p>
                        <div id="progress-bar">
                        <div id="progress" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width:75%"></div>
                        </div>
                        </div>
                        </td>
                        </tr>
                        <tr>
                        <td>
                        <div id="ui">
                        <p>OBIP&nbsp</p>
                        <div id="progress-bar">
                        <div id="progress" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width:75%"></div>
                        </div>
                        </div>
                        </td>
                        <td>&nbsp;&nbsp;
                        </td>
                        <td>
                        <div id="ui">
                        <p>iReport&nbsp</p>
                        <div id="progress-bar">
                        <div id="progress" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width:75%"></div>
                        </div>
                        </div>
                        </td>
                        <td>&nbsp;&nbsp;
                        </td>
                        <td>
                        <div id="ui">
                        <p>REST&nbsp</p>
                        <div id="progress-bar">
                        <div id="progress" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width:75%"></div>
                        </div>
                        </div>
                        </td>
                        </tr>
                     </table>
                     </div>
                     </div>
                     <table>
                     <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                     <td>
                     <div class="icon"><a href="https://www.facebook.com/KarkuvelRajaThangaMariappan" target="_blank">
                     <i class="fa fa-facebook-square"></i></a>
                     </div>
                     <div class="data">
                     <p class="semi-bold">
                     <a href="https://orclking.blogspot.com/" target="_blank">
                     Facebook</a></p>
                     </p>
                     </div>
                     </td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                     <td>
                     <div class="icon"><a href="https://www.facebook.com/KarkuvelRajaThangaMariappan" target="_blank">
                     <i class="fa fa-twitter-square"></i></a>
                     </div>
                     <div class="data">
                     <p class="semi-bold">
                     <a href="https://twitter.com/home" target="_blank">
                     Twitter</a></p>
                     </div>
                     </td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                     <td>
                     <div class="icon"><a href="https://orclking.blogspot.com/" target="_blank">
                     <i class="fa fa-globe"></i></a>
                     </div>
                     <div class="data">
                     <p class="semi-bold"><a href="https://orclking.blogspot.com/" target="_blank">Blog</a></p>
                     </div>
                     </td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                     <td>
                     <div class="icon"><a href="https://www.linkedin.com/in/karkuvelrajathangamariappan/" target="_blank">
                     <i class="fa fa-linkedin"></i></a>
                     </div>
                     <div class="data">
                     <p class="semi-bold"><a href="https://www.linkedin.com/in/karkuvelrajathangamariappan/" target="_blank">Linkedin</a></p>
                     </div>
                     </li>
                     </td>
                     </tr>
                     </table>
                     </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>
<style>       
   #header{
   display: grid;
   grid-template-columns: 2fr 5fr;
   background: #0bb5f4;
   color: white;
   font-family: calibri;      
   }
   #ui{
   display: grid;
   grid-template-columns: 0.2fr 0.5fr;
   }
   .skills{
   display: grid;
   grid-template-columns: 2fr 2fr;
   }
   #ent{
   margin-top: 0px;
   font-family: calibri;
   font-weight: semi-bold;
   }
   #space{
   margin-left: 30px;
   font-family: calibri;
   }
   #progress-bar{
   background: #CDCDCF;
   height: 10px;
   margin-top: 5px;
   width: 100px;
   font-family: calibri;
   }
   #progress{
   background: #009fd9;
   height: 10px;
   width: 80px;
   font-family: calibri;
   }
   .topM{
   margin-top: 20px;
   margin-bottom: 10px;
   font-family: calibri;
   }
   #contacts{
   background: white;
   color:#0bb5f4;
   font-weight:semi-bold;
   padding: 10px;
   font-family: calibri;
   }
   #skills{
   background: white;
   color:#0bb5f4;
   font-weight:semi-bold;
   padding: 10px;
   font-family: calibri;
   }
   #exp1{
   margin-right: 20px;
   display: grid;
   grid-template-columns: 1fr 2fr 4fr;
   color:black;
   font-family: calibri;
   }
   #summary1, #psummary1{
   margin-right: 20px;
   display: grid;
   font-family: calibri;
   }
   p{
   text-align: justify;
   font-family: calibri;
   }
   #head{
   font-weight: bold;
   font-family: calibri;
   }
   svg{
   height: 1em;
   margin-left: 40px;
   font-family: calibri;
   }
   #Capa_1
   {
   color:#0bb5f4; 
   font-family: calibri;
   }
   #left-mrgm{
   margin-left: 40px;
   font-weight: bold;
   font-family: calibri;
   }
   .box{
   height: 20px;
   width: 20px;
   background: #0bb5f4;
   font-family: calibri;
   }
   #image{
   height: 150px;
   width: 150px;
   margin-top: 20px;
   margin-bottom: 20px;
   margin-left: 20px;
   font-family: calibri;
   }
   #image1{
   height: 100px;
   width: 100px;
   margin-top: 20px;
   margin-bottom: 20px;
   margin-left: 20px;
   font-family: calibri;
   }
   #name{
   letter-spacing: 0.5em;
   font-weight: bold;
   margin-top: 20px;
   font-family: calibri;
   }
   #web{
   letter-spacing: 0.2em;
   margin-top: 30px;
   font-family: calibri;
   }
   #underline{
   width: 440px;
   height: 7px;
   margin-top: 20px;
   background: white;
   font-family: calibri;
   }
   #exp{
   background: white;
   color:#0bb5f4;
   font-weight:semi-bold;
   padding: 10px;
   font-family: calibri;
   }
   #summary, #psummary{
   background: white;
   color:#0bb5f4;
   font-weight:semi-bold;
   padding: 10px;
   font-family: calibri;
   }
   #wrapper{
   padding: 0px;
   margin-top: 50px;
   font-family: calibri;
   }
   #sum, #psum
   {
   color:black;
   font-family: calibri;
   }
   .resume .resume_left .resume_social .semi-bold  {
   color:black;
   }
   .semi-bold
   {
   color:black !important;
   }
</style>

The demo is here

That's it. Happy APEXing!!!...

Comments

Popular posts from this blog

Highlight the cell of Interactive Report based on Search Criteria in Oracle APEX

Querying Data From Flat Files in Oracle

Number of Tables by The Number of Rows in Oracle Database

Save Selected Interactive Grid Records into a Collection - Oracle APEX

Highlight Data That Meet Certain Criteria in Oracle APEX Report

Return a Validation Message using JavaScript if the Oracle Application Express Item is Empty

Remove X (Close Mark) from Oracle APEX Modal Dialog

Display User Rating Icons Dynamically in Oracle APEX Report

Printing Page Numbers in RTF Template [Oracle BI Publisher]

Find Where Specific Table or View is Used in Oracle Database