<section class="about bg-light py-5">
    <div class="container">

      <div class="section-title text-center mb-5">
        <h2 class="fw-bold text-primary text-uppercase mb-3">About Me</h2>
        <p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint
          consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit
          in iste officiis commodi quidem hic quas.</p>
      </div>

      <div class="row justify-content-center">
        <div class="col-lg-3">
          <img src="/html-component/images/profile/profile-1.jpg" class="img-fluid border p-2 shadow" alt="">
        </div>
        <div class="col-lg-6 pt-4 pt-lg-0 content">
          <div class="ms-0 ms-md-4">
            <h5 class="fw-bold">Illustrator & UI/UX Designer</h5>
            <p class="fst-italic">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              dolore
              magna aliqua.
            </p>
            <div class="row">
              <div class="col-lg-6">
                <ul class="" style="list-style: none; padding: 0;">
                  <li class="pb-3"> <strong>Birthday:</strong> 1 May 1995</li>
                  <li class="pb-3"> <strong>Website:</strong> www.example.com</li>
                  <li class="pb-3"><strong>Phone:</strong> +123 456 7890</li>
                  <li class="pb-3"> <strong>City:</strong> City : New York, USA</li>
                </ul>
              </div>
              <div class="col-lg-6">
                <ul class="" style="list-style: none; padding: 0;">
                  <li class="pb-3"><strong>Age:</strong> 30</li>
                  <li class="pb-3"> <strong>Degree:</strong> Master</li>
                  <li class="pb-3"><strong>Email:</strong> email@example.com</li>
                  <li class="pb-3"><strong>Freelance:</strong> Available</li>
                </ul>
              </div>
            </div>
            <p>
              Officiis eligendi itaque labore et dolorum mollitia officiis optio vero. Quisquam sunt adipisci omnis et
              ut. Nulla accusantium dolor incidunt officia tempore.
            </p>
          </div>
        </div>
      </div>

    </div>
  </section>

  <!-- Bootstrap JavaScript library -->
  
                
            

                
                    
    @import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
    @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');

    :root {
      --bs-primary: #e45b00;
      --bs-secondary: #000000;
    }

    body {
      font-family: 'Inter', sans-serif;
      font-size: .90rem;
    }

    .text-primary {
      color: var(--bs-primary) !important;
    }

    .bg-secondary {
      background-color: var(--bs-secondary) !important;
    }

    a,
    .nav-link {
      text-decoration: none;
      color: var(--bs-primary);
    }
                  
            

                
                    

  <section class="skill py-3 py-md-5">
    <div class="container pb-5">
      <div class="section-title text-center mb-5">
        <h2 class="fw-bold text-primary text-uppercase pb-2 mb-2">Skills</h2>
        <p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint
          consectetur velit. Quisquam quos quisquam cupiditate.</p>
      </div>
      <div class="row justify-content-center">
        <div class="col-md-5 mb-5">
          <div><span class="fw-bolder">HTML <i class="text-primary mx-3">100%</i></span></div>
          <div class="progress mb-3">
            <div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <div><span class="fw-bolder"> CSS <i class="text-primary mx-3">90%</i> </span></div>
          <div class="progress mb-3">
            <div class="progress-bar" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <div><span class="fw-bolder"> JavaScript <i class="text-primary mx-3">75%</i></span></div>
          <div class="progress mb-3">
            <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <div><span class="fw-bolder"> PHP <i class="text-primary mx-3">80%</i></span></div>
          <div class="progress mb-3">
            <div class="progress-bar" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <span class="fw-bolder"> WordPress/CMS <i class="text-primary mx-3">90%</i></span>
          <div class="progress mb-3">
            <div class="progress-bar" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <span class="fw-bolder"> Photoshop <i class="text-primary mx-3">55%</i></span>
          <div class="progress mb-3">
            <div class="progress-bar" role="progressbar" style="width: 55%" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Bootstrap JavaScript library -->
  
                
            

                
                    
    @import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
    @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');

    :root {
      --bs-primary: #e35d82;
      --bs-primary-rgb: 227, 93, 130;
      --bs-secondary: #000000;
    }

    body {
      font-family: 'Inter', sans-serif;
      font-size: .90rem;
    }

    .text-primary {
      color: var(--bs-primary) !important;
    }

    .progress {
      --bs-progress-height: 1.3rem;
      border-radius: 3px;
    }

    .progress-bar {
      background: rgb(var(--bs-primary-rgb), 0.8);
    }
    .skill {
      /* background: url(/html-component/images/bg/multi-color-pencil.jpg) left bottom;
      background-repeat: no-repeat;
      background-size: cover; */
      height: 100vh;
    }