peff48bpz/vote/assets/includes/portfolio-project-extended-ajax-modal.html

<div class="card bg-white border-grey bg-shadow pos-relative">
  <div class="card-body px-lg-3 py-lg-4">
    <h4 class="my-0">
      Project extended
    </h4>
  </div>
  <div class="owl-dots-center owl-nav-over owl-nav-over-lg owl-nav-over-hover" data-toggle="owl-carousel" data-owl-carousel-settings='{"items":1, "center":true, "autoplay":true, "loop":true, "dots":false, "nav":true, "animateOut":"fadeOutDown"}'>
    
    <!--Project item 1-->
    <div class="item">
      <img src="assets/img/projects/project-1-cropped.jpg" alt="Project 1" class="img-fluid" />
      <div class="bg-light p-3">
        <h5 class="my-0 op-8">
          Screenshot 1
        </h5>
        <p class="mb-0 op-8 text-sm">Comis patria sino. Aliquam ille inhibeo olim quia uxor. Abigo dolor jumentum praemitto. Caecus conventio erat jugis macto nostrud sudo tation.</p>
      </div>
    </div>
    
    <!--Project item 2-->
    <div class="item">
      <img src="assets/img/projects/project-2-cropped.jpg" alt="Project 2" class="img-fluid" />
      <div class="bg-light p-3">
        <h5 class="my-0 op-8">
          Screenshot 2
        </h5>
        <p class="mb-0 op-8 text-sm">Ad consectetuer ibidem mos suscipere. Aliquam bene conventio esse genitus iriure macto neque praesent ratis.</p>
      </div>
    </div>
    
    <!--Project item 3-->
    <div class="item">
      <img src="assets/img/projects/project-3-cropped.jpg" alt="Project 3" class="img-fluid" />
      <div class="bg-light p-3">
        <h5 class="my-0 op-8">
          Screenshot 3
        </h5>
        <p class="mb-0 op-8 text-sm">Genitus tego ullamcorper. Adipiscing brevitas capto damnum euismod humo importunus persto tation tincidunt. Amet brevitas fere nostrud plaga turpis typicus. Eros gemino ludus populus praemitto.</p>
      </div>
    </div>
    
    <!--Project item 4-->
    <div class="item">
      <img src="assets/img/projects/project-4-cropped.jpg" alt="Project 4" class="img-fluid" />
      <div class="bg-light p-3">
        <h5 class="my-0 op-8">
          Screenshot 4
        </h5>
        <p class="mb-0 op-8 text-sm">Aliquip at esca huic tego. Duis humo occuro venio ymo. Iaceo jus praemitto premo proprius. Causa ea exerci lucidus nulla pertineo pneum torqueo validus.</p>
      </div>
    </div>
  </div>
  <div class="card-body p-lg-5">
    <div class="row">
      <div class="col-md-6 pb-4">
        <h4 class="mt-0 mb-3">
          Details
        </h4>
        <dl class="row text-sm">
          <dt class="col-sm-4"><i class="la la-thumb-tack"></i> Client:</dt>
          <dd class="col-sm-8"><a href="https://wrapbootstrap.com/theme/appstrap-responsive-website-template-WB0C6D0H4?ref=tme">Themelize.me</a></dd>
          <dt class="col-sm-4"><i class="la la-calendar"></i> Date:</dt>
          <dd class="col-sm-8">Aug 2017</dd>
          <dt class="col-sm-4"><i class="la la-calendar-check-o"></i> Completion:</dt>
          <dd class="col-sm-8">Feb 2018</dd>
          <dt class="col-sm-4"><i class="la la-tags"></i> Category:</dt>
          <dd class="col-sm-8">Web</dd>
          <dt class="col-sm-4"><i class="la la-money"></i> Budget:</dt>
          <dd class="col-sm-8">$3000-10000</dd>
          <dt class="col-sm-4"><i class="la la-clock-o"></i> Hours:</dt>
          <dd class="col-sm-8">2000 hours</dd>
        </dl>
      </div>
      <div class="col-md-6 pb-4">
        <h4 class="mt-0 mb-3">
          Technologies
        </h4>
        <div class="mb-4">
          <h5 class="d-flex mt-0 op-8">
            <i class="la la-fw la-html5 mr-2"></i> HTML5 (46%)
          </h5>
          <div class="progress">
            <div class="progress-bar progress-bar-sm py-1 w-46 bg-primary" data-toggle="progress-bar-animated-progress" role="progressbar" aria-valuenow="46" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
        <div class="mb-4">
          <h5 class="d-flex mt-0 op-8">
            <i class="la la-fw la-css3 mr-2"></i> CSS3 (46%)
          </h5>
          <div class="progress">
            <div class="progress-bar progress-bar-sm py-1 w-46 bg-primary" data-toggle="progress-bar-animated-progress" role="progressbar" aria-valuenow="46" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
        <div class="mb-4">
          <h5 class="d-flex mt-0 op-8">
            <i class="la la-fw la-android mr-2"></i> Android (67%)
          </h5>
          <div class="progress">
            <div class="progress-bar progress-bar-sm py-1 w-67 bg-primary" data-toggle="progress-bar-animated-progress" role="progressbar" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <h4 class="mt-0 mb-3">
          Goals
        </h4>
        <p>Aliquam decet jugis suscipere suscipit. Accumsan amet capto in lucidus mauris os quae sed virtus. Cui gravis immitto modo obruo sed uxor. Conventio eligo elit gemino genitus in nibh olim pala.</p>
        <p>Camur diam elit genitus incassum obruo paulatim quae tincidunt. Abluo diam esca oppeto. Abico fere haero huic importunus natu patria refero si velit.</p>
      </div>
      <div class="col-md-6">
        <h4 class="mt-0 mb-3">
          Challenges
        </h4>
        <p>Aliquip distineo sit. Abbas defui et minim patria quadrum ymo. Abbas autem capto lobortis meus quae te. Exputo hos loquor mauris meus neque os.</p>
        <p>Diam dolore gravis immitto neque nostrud persto saluto velit. Distineo enim in letalis pala proprius similis tincidunt typicus vel.</p>
      </div>
    </div>
    <!-- Call out -->
    <div class="bg-light mt-4 mb-3">
      <div class="container-fluid">
        <div class="row p-3">
          <div class="col-lg-6 op-9" data-bg-img="assets/img/projects/project-4.jpg"></div>
          <div class="col-lg-6 p-4 d-lg-flex align-items-lg-center flex-lg-wrap">
            <div class="mb-3 d-flex align-items-start justify-content-center"><i class="la la-check-circle icon-2x mr-2"></i> Aliquip commoveo dolore jugis jumentum lobortis saluto usitas velit verto.</div>
            <div class="mb-3 d-flex align-items-start justify-content-center"><i class="la la-check-circle icon-2x mr-2"></i> Augue gravis molior verto. Ex exputo haero letalis nunc.</div>
            <div class="mb-3 d-flex align-items-start justify-content-center"><i class="la la-check-circle icon-2x mr-2"></i> Brevitas eu praesent sudo tamen. Abico gemino jugis nisl proprius tamen.</div>
            <div class="mb-0 d-flex align-items-start justify-content-center"><i class="la la-check-circle icon-2x mr-2"></i> Abico capto illum meus molior pertineo probo torqueo ulciscor velit.</div>
          </div>
        </div>
      </div>
    </div>
    <a href="https://wrapbootstrap.com/theme/appstrap-responsive-website-template-WB0C6D0H4?ref=tme" title="View Online" class="btn btn-primary btn-bold btn-flat btn-block rounded-0 p-4">View Online <i class="fa fa-chevron-right ml-2"></i></a>
  </div>
</div>