Informative Blocks

Different style of info blocks/components.

Info #1 

<!-- Card --> <a class="card card-frame card-text-dark mb-2" href="../pages/careers-single.html">
  <div class="card-body p-4">
    <span class="row justify-content-sm-between align-items-sm-center">
      <span class="col-sm-6 mb-2 mb-sm-0">
        Business Strategy Manager
      </span>
      <span class="col-sm-6 text-primary text-sm-right">
        Chicago, US
        <span class="fas fa-arrow-right small ml-2"></span>
      </span>
    </span>
  </div>
</a>
<!-- End Card -->

<!-- Card -->
<a class="card card-frame card-text-dark mb-2" href="../pages/careers-single.html">
  <div class="card-body p-4">
    <span class="row justify-content-sm-between align-items-sm-center">
      <span class="col-sm-6 mb-2 mb-sm-0">
        Business Strategy Senior Associate
      </span>
      <span class="col-sm-6 text-primary text-sm-right">
        New York, US
        <span class="fas fa-arrow-right small ml-2"></span>
      </span>
    </span>
  </div>
</a>
<!-- End Card -->

<!-- Card -->
<a class="card card-frame card-text-dark mb-2" href="../pages/careers-single.html">
  <div class="card-body p-4">
    <span class="row justify-content-sm-between align-items-sm-center">
      <span class="col-sm-6 mb-2 mb-sm-0">
        Senior Analyst, Data Analytics
      </span>
      <span class="col-sm-6 text-primary text-sm-right">
        Sydney, Australia
        <span class="fas fa-arrow-right small ml-2"></span>
      </span>
    </span>
  </div>
</a>
<!-- End Card -->
Copy

Info #2 

<div class="card-deck d-block d-lg-flex card-lg-gutters-2">
  <div class="card card-frame transition-3d-hover mb-3">
    <!-- Card -->
    <a class="card-body" href="#">
      <div class="media">
        <div class="u-avatar">
          <img class="img-fluid rounded" src="../../assets/img/160x160/img3.jpg" alt="Image Description">
        </div>
        <div class="media-body px-4">
          <h4 class="h6 text-dark mb-1">Senior Java Developer</h4>
          <small class="d-block text-muted">London, UK</small>
        </div>
      </div>
    </a>
    <!-- End Card -->
  </div>

  <div class="card card-frame transition-3d-hover mb-3">
    <!-- Card -->
    <a class="card-body" href="#">
      <div class="media">
        <div class="u-avatar">
          <img class="img-fluid rounded" src="../../assets/img/160x160/img4.jpg" alt="Image Description">
        </div>
        <div class="media-body px-4">
          <h4 class="h6 text-dark mb-1">Junior UX Designer</h4>
          <small class="d-block text-muted">Manchester, UK</small>
        </div>
      </div>
    </a>
    <!-- End Card -->
  </div>

  <div class="card card-frame transition-3d-hover mb-3">
    <!-- Card -->
    <a class="card-body" href="#">
      <div class="media">
        <div class="u-avatar">
          <img class="img-fluid rounded" src="../../assets/img/160x160/img5.jpg" alt="Image Description">
        </div>
        <div class="media-body px-4">
          <h4 class="h6 text-dark mb-1">Product Director</h4>
          <small class="d-block text-muted">New York, NY</small>
        </div>
      </div>
    </a>
    <!-- End Card -->
  </div>
</div>
Copy

Info #3 

<div class="card-deck d-block d-lg-flex card-lg-gutters-3">
  <!-- Card -->
  <div class="card card-frame mb-3">
    <a class="card-body p-4" href="#">
      <div class="media align-items-center">
        <div class="u-avatar mr-3">
          <img class="img-fluid rounded-circle" src="../../assets/img/160x160/img5.jpg" alt="Image Description">
        </div>
        <div class="media-body">
          <span class="text-dark">Spotify</span>
          <small class="d-block text-secondary">Logo redesign</small>
        </div>
        <div class="media-body text-right">
          <span class="text-primary ml-3">
            $1,903
          </span>
        </div>
      </div>
    </a>
  </div>
  <!-- End Card -->

  <!-- Card -->
  <div class="card card-frame mb-3">
    <a class="card-body p-4" href="#">
      <div class="media align-items-center">
        <div class="u-avatar mr-3">
          <img class="img-fluid rounded-circle" src="../../assets/img/160x160/img3.jpg" alt="Image Description">
        </div>
        <div class="media-body">
          <span class="text-dark">Slack</span>
          <small class="d-block text-secondary">Page redesign</small>
        </div>
        <div class="media-body text-right">
          <span class="text-primary ml-3">
            $3,500
          </span>
        </div>
      </div>
    </a>
  </div>
  <!-- End Card -->

  <!-- Card -->
  <div class="card card-frame mb-3">
    <a class="card-body p-4" href="#">
      <div class="media align-items-center">
        <div class="u-avatar mr-3">
          <img class="img-fluid rounded-circle" src="../../assets/img/160x160/img6.jpg" alt="Image Description">
        </div>
        <div class="media-body">
          <span class="text-dark">Dropbox</span>
          <small class="d-block text-secondary">Branding</small>
        </div>
        <div class="media-body text-right">
          <span class="text-primary ml-3">
            $7,250
          </span>
        </div>
      </div>
    </a>
  </div>
  <!-- End Card -->
</div>
Copy

Info #4

Work experience

Image Description
Jul 2018

Senior Frontend Developer

at Google - SF, US
Image Description
Aug 2016 - Jul 2018

Junior Frontend Developer

at Slack Inc - London, UK

Education

Image Description
Sep 2009 - June 2013

BS in Computer Science

Harvard University
Image Description
Sep 2014 - June 2016

MBA in Marketing

University of British Columbia 
<!-- Info -->
<div class="row mb-7">
  <div class="col-md-6 mb-7 mb-md-0">
    <!-- Title -->
    <div class="mb-3">
      <h3 class="h6 mb-0">Work experience</h3>
    </div>
    <!-- End Title -->

    <!-- Info -->
    <div class="d-flex mb-5">
      <img class="u-avatar align-self-center mr-4" src="../../assets/img/160x160/img17.png" alt="Image Description">
      <div>
        <small class="d-block text-secondary">Jul 2018</small>
        <h4 class="h6 mb-0">Senior Frontend Developer</h4>
        <span class="d-block text-secondary">at Google - SF, US</span>
      </div>
    </div>
    <!-- End Info -->

    <!-- Info -->
    <div class="d-flex">
      <img class="u-avatar align-self-center mr-4" src="../../assets/img/160x160/img14.png" alt="Image Description">
      <div>
        <small class="d-block text-secondary">Aug 2016 - Jul 2018</small>
        <h4 class="h6 mb-0">Junior Frontend Developer</h4>
        <span class="d-block text-secondary">at Slack Inc - London, UK</span>
      </div>
    </div>
    <!-- End Info -->
  </div>

  <div class="col-md-6 mb-3 mb-md-0">
    <!-- Title -->
    <div class="mb-3">
      <h3 class="h6 mb-0">Education</h3>
    </div>
    <!-- End Title -->

    <!-- Info -->
    <div class="row align-items-center mb-5">
      <div class="col-4">
        <img class="img-fluid" src="../../assets/img/logos/harvard-university.png" alt="Image Description">
      </div>
      <div class="col-8">
        <small class="d-block text-secondary">Sep 2009 - June 2013</small>
        <h4 class="h6 mb-0">BS in Computer Science</h4>
        <span class="d-block text-secondary">Harvard University</span>
      </div>
    </div>
    <!-- End Info -->

    <!-- Info -->
    <div class="row align-items-center">
      <div class="col-4">
        <img class="img-fluid" src="../../assets/img/logos/ubc.png" alt="Image Description">
      </div>
      <div class="col-8">
        <small class="d-block text-secondary">Sep 2014 - June 2016</small>
        <h4 class="h6 mb-0">MBA in Marketing</h4>
        <span class="d-block text-secondary">University of British Columbia</span>
      </div>
    </div>
    <!-- End Info -->
  </div>
</div>
<!-- End Info -->
Copy

Info #5

FR-52
Settings Repository Download Archive
Image Description

Mapbox

The time has come to bring those ideas and plans to life.

Members

Budget

$9,145

Priority

Medium 
<!-- Projects -->
<div class="card">
  <div class="card-body p-5">
    <!-- List of Icons -->
    <div class="row justify-content-between align-items-center mb-3">
      <div class="col-6">
        <a class="small text-secondary" href="#">
          <span class="fas fa-bookmark text-primary mr-1"></span>
          FR-52
        </a>
      </div>
      <div class="col-6 text-right">
        <!-- Settings -->
        <div class="position-relative">
          <a id="settingsDropdown1InvokerExample1" class="btn btn-sm btn-icon btn-soft-secondary btn-bg-transparent rounded" href="javascript:;" role="button"
             aria-controls="settingsDropdown1"
             aria-haspopup="true"
             aria-expanded="false"
             data-unfold-event="click"
             data-unfold-target="#settingsDropdown1"
             data-unfold-type="css-animation"
             data-unfold-duration="300"
             data-unfold-delay="300"
             data-unfold-hide-on-scroll="true"
             data-unfold-animation-in="slideInUp"
             data-unfold-animation-out="fadeOut">
            <span class="fas fa-ellipsis-h btn-icon__inner"></span>
          </a>

          <div id="settingsDropdown1" class="dropdown-menu dropdown-unfold dropdown-menu-right" aria-labelledby="settingsDropdown1InvokerExample1" style="min-width: 160px;">
            <a class="dropdown-item" href="#">
              <small class="fas fa-cogs dropdown-item-icon"></small>
              Settings
            </a>
            <a class="dropdown-item" href="#">
              <small class="fas fa-code-branch dropdown-item-icon"></small>
              Repository
            </a>
            <a class="dropdown-item" href="#">
              <small class="fas fa-cloud-download-alt dropdown-item-icon"></small>
              Download
            </a>
            <a class="dropdown-item" href="#">
              <small class="fas fa-archive dropdown-item-icon"></small>
              Archive
            </a>
          </div>
        </div>
        <!-- End Settings -->
      </div>
    </div>
    <!-- End List of Icons -->

    <!-- Details -->
    <div class="d-sm-flex">
      <div class="u-lg-avatar mb-3 mb-sm-0 mr-3">
        <img class="img-fluid rounded-circle" src="../../assets/img/160x160/img4.jpg" alt="Image Description">
      </div>

      <div class="mr-3">
        <!-- Title -->
        <div class="mb-3">
          <h3 class="h5 mb-1">Mapbox</h3>
          <p class="font-size-1">The time has come to bring those ideas and plans to life.</p>
        </div>
        <!-- End Title -->

        <div class="d-sm-flex align-items-sm-center">
          <!-- Members List -->
          <div class="mb-3 mb-sm-0 mr-4">
            <h4 class="small font-weight-normal text-secondary mb-0">Members</h4>

            <ul class="list-inline mb-0">
              <li class="list-inline-item mr-0" data-toggle="tooltip" data-placement="top" title="Sean Lewis">
                <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                  <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img1.jpg" alt="Image Description">
                </div>
              </li>
              <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="James Collins">
                <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                  <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img2.jpg" alt="Image Description">
                </div>
              </li>
              <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Eliza Donovan">
                <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                  <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img3.jpg" alt="Image Description">
                </div>
              </li>
              <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Cler Lockhart">
                <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                  <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img5.jpg" alt="Image Description">
                </div>
              </li>
              <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Josephina Mack">
                <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                  <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img4.jpg" alt="Image Description">
                </div>
              </li>
              <li class="list-inline-item ml-n3 mr-0">
                <a class="btn btn-sm btn-icon btn-light rounded-circle" href="#">
                  <span class="btn-icon__inner">+3</span>
                </a>
              </li>
            </ul>
          </div>
          <!-- End Members List -->

          <!-- Budget -->
          <div class="u-ver-divider u-ver-divider--none-sm pr-4 mb-3 mb-sm-0 mr-4">
            <h4 class="small font-weight-normal text-secondary mb-0">Budget</h4>
            <span class="text-dark">$9,145</span>
          </div>
          <!-- End Budget -->

          <!-- Priority -->
          <div class="mr-4">
            <h4 class="small font-weight-normal text-secondary mb-0">Priority</h4>
            <span class="fas fa-arrow-up text-warning small"></span>
            <span class="text-dark">Medium</span>
          </div>
          <!-- End Priority -->
        </div>
      </div>
    </div>
    <!-- End Details -->
  </div>
</div>
<!-- End Projects -->
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.unfold.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of unfold component
    $.HSCore.components.HSUnfold.init($('[data-unfold-target]'));
  });
</script>
Copy

Info #6 

<div class="card-deck d-block d-lg-flex card-lg-gutters-2">
  <!-- Friends List -->
  <a class="card card-frame mb-3" href="#">
    <div class="card-body">
      <div class="media">
        <div class="u-avatar mr-3">
          <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img9.jpg" alt="Image Description">
        </div>
        <div class="media-body">
          <h4 class="h6 text-dark mb-0">Patrick Garner</h4>
          <span>Refer</span>
        </div>
      </div>
    </div>
  </a>
  <!-- End Friends List -->

  <!-- Friends List -->
  <a class="card card-frame mb-3" href="#">
    <div class="card-body">
      <div class="media">
        <span class="btn btn-icon btn-soft-primary rounded-circle mr-3">
          <span class="btn-icon__inner">CB</span>
        </span>
        <div class="media-body">
          <h4 class="h6 text-dark mb-0">Cameron Brown</h4>
          <span>Refer</span>
        </div>
      </div>
    </div>
  </a>
  <!-- End Friends List -->

  <!-- Friends List -->
  <a class="card card-frame mb-3" href="#">
    <div class="card-body">
      <div class="media">
        <div class="u-avatar mr-3">
          <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img8.jpg" alt="Image Description">
        </div>
        <div class="media-body">
          <h4 class="h6 text-dark mb-0">Sebastian Diaz</h4>
          <span>Refer</span>
        </div>
      </div>
    </div>
  </a>
  <!-- End Friends List -->
</div>
Copy

Info #7 

<!-- Contacts  -->
<div class="card mb-4">
  <div class="card-header pt-4 pb-3 px-0 mx-4">
    <h2 class="h6 mb-0">Contacts</h2>
  </div>

  <div class="card-body pt-3 pb-4 px-4">
    <!-- User -->
    <a class="d-flex align-items-start mb-4" href="#">
      <div class="position-relative u-avatar">
        <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img9.jpg" alt="Image Description">
        <span class="badge badge-xs badge-outline-success badge-pos badge-pos--bottom-right rounded-circle"></span>
      </div>

      <div class="ml-3">
        <span class="d-block text-dark">Patrick Garner</span>
        <small class="d-block text-secondary">Web Developer</small>
      </div>
    </a>
    <!-- End User -->

    <!-- User -->
    <a class="d-flex align-items-start mb-4" href="#">
      <span class="btn btn-icon btn-soft-danger rounded-circle">
        <span class="btn-icon__inner">AO</span>
        <span class="badge badge-xs badge-outline-warning badge-pos badge-pos--bottom-right rounded-circle"></span>
      </span>

      <div class="ml-3">
        <span class="d-block text-dark">Amanta Owens</span>
        <small class="d-block text-secondary">UI/UX Designer</small>
      </div>
    </a>
    <!-- End User -->

    <!-- User -->
    <a class="d-flex align-items-start mb-4" href="#">
      <div class="position-relative u-avatar">
        <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
        <span class="badge badge-xs badge-outline-warning badge-pos badge-pos--bottom-right rounded-circle"></span>
      </div>

      <div class="ml-3">
        <span class="d-block text-dark">Eliza Donovan</span>
        <small class="d-block text-secondary">Project Manager</small>
      </div>
    </a>
    <!-- End User -->

    <!-- User -->
    <a class="d-flex align-items-start" href="#">
      <span class="btn btn-icon btn-soft-success rounded-circle">
        <span class="btn-icon__inner">JC</span>
        <span class="badge badge-xs badge-outline-success badge-pos badge-pos--bottom-right rounded-circle"></span>
      </span>

      <div class="ml-3">
        <span class="d-block text-dark">James Collins</span>
        <small class="d-block text-secondary">Angular Developer</small>
      </div>
    </a>
    <!-- End User -->
  </div>
</div>
<!-- End Contacts  -->
Copy

Info #8

Image Description

IT business manager

London, UK

View Details
Image Description

Membership director

Manchester, UK

View Details
Image Description

UI/UX designer

New York, NY

View Details 
<div class="card-deck d-block d-lg-flex card-lg-gutters-3">
  <div class="card card-frame text-center mb-5">
    <!-- Card -->
    <div class="card-body p-6">
      <div class="u-avatar mx-auto mb-4">
        <img class="img-fluid rounded" src="../../assets/img/160x160/img3.jpg" alt="Image Description">
      </div>
      <div class="mb-4">
        <h4 class="h6 mb-1">IT business manager</h4>
        <p>London, UK</p>
      </div>
      <a class="btn btn-sm btn-soft-primary btn-wide" href="#">View Details</a>
    </div>
    <!-- End Card -->
  </div>

  <div class="card card-frame text-center mb-5">
    <!-- Card -->
    <div class="card-body p-6">
      <div class="u-avatar mx-auto mb-4">
        <img class="img-fluid rounded" src="../../assets/img/160x160/img4.jpg" alt="Image Description">
      </div>
      <div class="mb-4">
        <h4 class="h6 mb-1">Membership director</h4>
        <p>Manchester, UK</p>
      </div>
      <a class="btn btn-sm btn-soft-primary btn-wide" href="#">View Details</a>
    </div>
    <!-- End Card -->
  </div>

  <div class="card card-frame text-center mb-5">
    <!-- Card -->
    <div class="card-body p-6">
      <div class="u-avatar mx-auto mb-4">
        <img class="img-fluid rounded" src="../../assets/img/160x160/img5.jpg" alt="Image Description">
      </div>
      <div class="mb-4">
        <h4 class="h6 mb-1">UI/UX designer</h4>
        <p>New York, NY</p>
      </div>
      <a class="btn btn-sm btn-soft-primary btn-wide" href="#">View Details</a>
    </div>
    <!-- End Card -->
  </div>
</div>
Copy

Info #9

FR-52
Settings Repository Download Archive
Image Description

Mapbox

The time has come to bring those ideas and plans to life.

Members

Budget
$9,145
Priority
Medium
FR-13
Settings Repository Download Archive
Image Description

Slack

Using our creative gifts drives this foundation.

Members

Budget
$3,120
Priority
Low
FR-36
Settings Repository Download Archive
Image Description

DropBox

It's important to stay detail oriented with every project we tackle.

Members

Budget
$15,000
Priority
Highest 
<div class="card-deck d-block d-md-flex">
  <!-- Projects -->
  <div class="card mb-5">
    <div class="card-body p-4">
      <!-- List of Icons -->
      <div class="row justify-content-between align-items-center mb-4">
        <div class="col-6">
          <a class="small text-secondary" href="#">
            <span class="fas fa-bookmark text-primary mr-1"></span>
            FR-52
          </a>
        </div>
        <div class="col-6 text-right">
          <!-- Settings -->
          <div class="position-relative">
            <a id="settingsDropdown1InvokerExample2" class="btn btn-sm btn-icon btn-soft-secondary btn-bg-transparent rounded" href="javascript:;" role="button"
               aria-controls="settingsDropdownExample2"
               aria-haspopup="true"
               aria-expanded="false"
               data-unfold-event="click"
               data-unfold-target="#settingsDropdownExample2"
               data-unfold-type="css-animation"
               data-unfold-duration="300"
               data-unfold-delay="300"
               data-unfold-hide-on-scroll="true"
               data-unfold-animation-in="slideInUp"
               data-unfold-animation-out="fadeOut">
              <span class="fas fa-ellipsis-h btn-icon__inner"></span>
            </a>

            <div id="settingsDropdownExample2" class="dropdown-menu dropdown-unfold" aria-labelledby="settingsDropdown1InvokerExample2" style="min-width: 160px;">
              <a class="dropdown-item" href="#">
                <small class="fas fa-cogs dropdown-item-icon"></small>
                Settings
              </a>
              <a class="dropdown-item" href="#">
                <small class="fas fa-code-branch dropdown-item-icon"></small>
                Repository
              </a>
              <a class="dropdown-item" href="#">
                <small class="fas fa-cloud-download-alt dropdown-item-icon"></small>
                Download
              </a>
              <a class="dropdown-item" href="#">
                <small class="fas fa-archive dropdown-item-icon"></small>
                Archive
              </a>
            </div>
          </div>
          <!-- End Settings -->
        </div>
      </div>
      <!-- End List of Icons -->

      <div class="text-center">
        <div class="u-lg-avatar mx-auto mb-3">
          <img class="img-fluid rounded-circle" src="../../assets/img/160x160/img4.jpg" alt="Image Description">
        </div>

        <!-- Title -->
        <div class="mb-4">
          <h3 class="h5 mb-1">Mapbox</h3>
          <p class="font-size-1">The time has come to bring those ideas and plans to life.</p>
        </div>
        <!-- End Title -->

        <h4 class="h6 font-weight-normal mb-1">Members</h4>

        <!-- Members List -->
        <ul class="list-inline mb-0">
          <li class="list-inline-item mr-0" data-toggle="tooltip" data-placement="top" title="Patrick Garner">
            <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
              <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img1.jpg" alt="Image Description">
            </div>
          </li>
          <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="James Collins">
            <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
              <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img2.jpg" alt="Image Description">
            </div>
          </li>
          <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Eliza Donovan">
            <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
              <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img3.jpg" alt="Image Description">
            </div>
          </li>
          <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Cler Lockhart">
            <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
              <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img5.jpg" alt="Image Description">
            </div>
          </li>
          <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Josephina Mack">
            <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
              <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img4.jpg" alt="Image Description">
            </div>
          </li>
          <li class="list-inline-item ml-n3 mr-0">
            <a class="btn btn-sm btn-icon btn-light rounded-circle" href="#">
              <span class="btn-icon__inner">+3</span>
            </a>
          </li>
        </ul>
        <!-- End Members List -->
      </div>
    </div>

    <div class="card-footer text-center">
      <!-- Budget & Priority -->
      <div class="row align-items-center">
        <div class="col-6 u-ver-divider">
          <h5 class="small font-weight-normal text-secondary mb-0">Budget</h5>
          <span class="text-dark">$9,145</span>
        </div>
        <div class="col-6">
          <h5 class="small font-weight-normal text-secondary mb-0">Priority</h5>
          <span class="fas fa-arrow-up text-warning small"></span>
          <span class="text-dark">Medium</span>
        </div>
      </div>
      <!-- End Budget & Priority -->
    </div>
  </div>
  <!-- End Projects -->

  <!-- Projects -->
  <div class="card mb-5">
    <div class="card-body p-4">
      <!-- List of Icons -->
      <div class="row justify-content-between align-items-center mb-4">
        <div class="col-6">
          <a class="small text-secondary" href="#">
            <span class="fas fa-bookmark text-primary mr-1"></span>
            FR-13
          </a>
        </div>
        <div class="col-6 text-right">
          <!-- Settings -->
          <div class="position-relative">
            <a id="settingsDropdown2Invoker" class="btn btn-sm btn-icon btn-soft-secondary btn-bg-transparent rounded" href="javascript:;" role="button"
               aria-controls="settingsDropdown2"
               aria-haspopup="true"
               aria-expanded="false"
               data-unfold-event="click"
               data-unfold-target="#settingsDropdown2"
               data-unfold-type="css-animation"
               data-unfold-duration="300"
               data-unfold-delay="300"
               data-unfold-hide-on-scroll="true"
               data-unfold-animation-in="slideInUp"
               data-unfold-animation-out="fadeOut">
              <span class="fas fa-ellipsis-h btn-icon__inner"></span>
            </a>

            <div id="settingsDropdown2" class="dropdown-menu dropdown-unfold" aria-labelledby="settingsDropdown2Invoker" style="min-width: 160px;">
              <a class="dropdown-item" href="#">
                <small class="fas fa-cogs dropdown-item-icon"></small>
                Settings
              </a>
              <a class="dropdown-item" href="#">
                <small class="fas fa-code-branch dropdown-item-icon"></small>
                Repository
              </a>
              <a class="dropdown-item" href="#">
                <small class="fas fa-cloud-download-alt dropdown-item-icon"></small>
                Download
              </a>
              <a class="dropdown-item" href="#">
                <small class="fas fa-archive dropdown-item-icon"></small>
                Archive
              </a>
            </div>
          </div>
          <!-- End Settings -->
        </div>
      </div>
      <!-- End List of Icons -->

      <div class="text-center">
        <div class="u-lg-avatar mx-auto mb-3">
          <img class="img-fluid rounded-circle" src="../../assets/img/160x160/img3.jpg" alt="Image Description">
        </div>

        <!-- Title -->
        <div class="mb-4">
          <h3 class="h5 mb-1">Slack</h3>
          <p class="font-size-1">Using our creative gifts drives this foundation.</p>
        </div>
        <!-- End Title -->

        <h4 class="h6 font-weight-normal mb-1">Members</h4>

        <!-- Members List -->
        <ul class="list-inline mb-0">
          <li class="list-inline-item mr-0" data-toggle="tooltip" data-placement="top" title="Josephina Mack">
            <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
              <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img4.jpg" alt="Image Description">
            </div>
          </li>
          <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="James Collins">
            <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
              <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img2.jpg" alt="Image Description">
            </div>
          </li>
          <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Cler Lockhart">
            <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
              <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img5.jpg" alt="Image Description">
            </div>
          </li>
          <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Sean Lewis">
            <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
              <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img1.jpg" alt="Image Description">
            </div>
          </li>
          <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Eliza Donovan">
            <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
              <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img3.jpg" alt="Image Description">
            </div>
          </li>
          <li class="list-inline-item ml-n3 mr-0">
            <a class="btn btn-sm btn-icon btn-light rounded-circle" href="#">
              <span class="btn-icon__inner">+1</span>
            </a>
          </li>
        </ul>
        <!-- End Members List -->
      </div>
    </div>

    <div class="card-footer text-center">
      <!-- Budget & Priority -->
      <div class="row align-items-center">
        <div class="col-6 u-ver-divider">
          <h5 class="small font-weight-normal text-secondary mb-0">Budget</h5>
          <span class="text-dark">$3,120</span>
        </div>
        <div class="col-6">
          <h5 class="small font-weight-normal text-secondary mb-0">Priority</h5>
          <span class="fas fa-arrow-down text-success small"></span>
          <span class="text-dark">Low</span>
        </div>
      </div>
      <!-- End Budget & Priority -->
    </div>
  </div>
  <!-- End Projects -->

  <!-- Projects -->
  <div class="card mb-5">
    <div class="card-body p-4">
      <!-- List of Icons -->
      <div class="row justify-content-between align-items-center mb-4">
        <div class="col-6">
          <a class="small text-secondary" href="#">
            <span class="fas fa-bookmark text-primary mr-1"></span>
            FR-36
          </a>
        </div>
        <div class="col-6 text-right">
          <!-- Settings -->
          <div class="position-relative">
            <a id="settingsDropdown3Invoker" class="btn btn-sm btn-icon btn-soft-secondary btn-bg-transparent rounded" href="javascript:;" role="button"
               aria-controls="settingsDropdown3"
               aria-haspopup="true"
               aria-expanded="false"
               data-unfold-event="click"
               data-unfold-target="#settingsDropdown3"
               data-unfold-type="css-animation"
               data-unfold-duration="300"
               data-unfold-delay="300"
               data-unfold-hide-on-scroll="true"
               data-unfold-animation-in="slideInUp"
               data-unfold-animation-out="fadeOut">
              <span class="fas fa-ellipsis-h btn-icon__inner"></span>
            </a>

            <div id="settingsDropdown3" class="dropdown-menu dropdown-unfold" aria-labelledby="settingsDropdown3Invoker" style="min-width: 160px;">
              <a class="dropdown-item" href="#">
                <small class="fas fa-cogs dropdown-item-icon"></small>
                Settings
              </a>
              <a class="dropdown-item" href="#">
                <small class="fas fa-code-branch dropdown-item-icon"></small>
                Repository
              </a>
              <a class="dropdown-item" href="#">
                <small class="fas fa-cloud-download-alt dropdown-item-icon"></small>
                Download
              </a>
              <a class="dropdown-item" href="#">
                <small class="fas fa-archive dropdown-item-icon"></small>
                Archive
              </a>
            </div>
          </div>
          <!-- End Settings -->
        </div>
      </div>
      <!-- End List of Icons -->

      <div class="text-center">
        <div class="u-lg-avatar mx-auto mb-3">
          <img class="img-fluid rounded-circle" src="../../assets/img/160x160/img6.jpg" alt="Image Description">
        </div>

        <!-- Title -->
        <div class="mb-4">
          <h3 class="h5 mb-1">DropBox</h3>
          <p class="font-size-1">It's important to stay detail oriented with every project we tackle.</p>
        </div>
        <!-- End Title -->

        <h4 class="h6 font-weight-normal mb-1">Members</h4>

        <!-- Members List -->
        <ul class="list-inline mb-0">
          <li class="list-inline-item mr-0" data-toggle="tooltip" data-placement="top" title="James Collins">
            <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
              <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img2.jpg" alt="Image Description">
            </div>
          </li>
          <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Josephina Mack">
            <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
              <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img4.jpg" alt="Image Description">
            </div>
          </li>
          <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Eliza Donovan">
            <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
              <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img3.jpg" alt="Image Description">
            </div>
          </li>
          <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Sean Lewis">
            <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
              <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img1.jpg" alt="Image Description">
            </div>
          </li>
          <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Cler Lockhart">
            <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
              <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img5.jpg" alt="Image Description">
            </div>
          </li>
          <li class="list-inline-item ml-n3 mr-0">
            <a class="btn btn-sm btn-icon btn-light rounded-circle" href="#">
              <span class="btn-icon__inner">+9</span>
            </a>
          </li>
        </ul>
        <!-- End Members List -->
      </div>
    </div>

    <div class="card-footer text-center">
      <!-- Budget & Priority -->
      <div class="row align-items-center">
        <div class="col-6 u-ver-divider">
          <h5 class="small font-weight-normal text-secondary mb-0">Budget</h5>
          <span class="text-dark">$15,000</span>
        </div>
        <div class="col-6">
          <h5 class="small font-weight-normal text-secondary mb-0">Priority</h5>
          <span class="fas fa-arrow-up text-danger small"></span>
          <span class="text-dark">Highest</span>
        </div>
      </div>
      <!-- End Budget & Priority -->
    </div>
  </div>
  <!-- End Projects -->
</div>
Copy

Info #10

Front project - July 2018 $250 per year

License purchased: 1

License assigned: 1

Change plan Edit/Remove License

Total

$250/yearly

Payment method: Card ending in 9050

Will renew on: July 15, 2019

Edit Payment Details View Invoices 
<div class="card-deck d-block d-md-flex">
  <div class="card mb-4 mb-md-0">
    <!-- Card -->
    <div class="card-body p-5">
      <h4 class="h6">Front project - July 2018 <span class="btn btn-xs btn-soft-success">$250 per year</span></h4>
      <p class="font-size-1 mb-0">License purchased: <span class="text-dark font-weight-medium">1</span></p>
      <p class="font-size-1">License assigned: <span class="text-dark font-weight-medium">1</span></p>
    <a class="btn btn-xs btn-primary transition-3d-hover mr-1" href="#">Change plan</a>
      <a class="btn btn-xs btn-soft-secondary transition-3d-hover" href="#">Edit/Remove License</a>
    </div>
    <!-- End Card -->
  </div>

  <div class="card">
    <!-- Card -->
    <div class="card-body p-5">
      <h4 class="h6">Total</h4>
      <h5 class="font-weight-normal">$250/yearly</h5>
      <p class="font-size-1 mb-0">Payment method: <span class="text-dark font-weight-medium">Card ending in 9050</span></p>
      <p class="font-size-1">Will renew on: <span class="text-dark font-weight-medium">July 15, 2019</span></p>
    <a class="btn btn-xs btn-primary transition-3d-hover mr-1" href="#">Edit Payment Details</a>
      <a class="btn btn-xs btn-soft-secondary transition-3d-hover" href="#">View Invoices</a>
      <!-- End Card -->
    </div>
  </div>
</div>
Copy

Info #11 

<div class="card-deck d-block d-md-flex">
  <!-- Members -->
  <div class="card text-center mb-3 mb-5">
    <div class="card-body p-6">
      <!-- Team -->
      <div class="mb-4">
        <div class="position-relative u-lg-avatar mx-auto mb-3">
          <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img9.jpg" alt="Image Description">
          <span class="badge badge-xs badge-outline-primary badge-pos badge-pos--bottom-left rounded-circle"></span>
        </div>

        <a class="btn btn-sm btn-icon btn-soft-warning btn-bg-transparent position-absolute top-0 right-0 rounded-circle m-3" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Add to favorites">
          <span class="far fa-star btn-icon__inner"></span>
        </a>

        <h2 class="h6 mb-0">
          <a href="#">Patrick Garner</a>
        </h2>
        <a class="small" href="#">@patrickgarner</a>
      </div>
      <!-- End Team -->

      <!-- Social Networks -->
      <ul class="list-inline mb-0">
        <li class="list-inline-item">
          <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
            <span class="fab fa-facebook-f btn-icon__inner"></span>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
            <span class="fab fa-google btn-icon__inner"></span>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
            <span class="fab fa-twitter btn-icon__inner"></span>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
            <span class="fab fa-github btn-icon__inner"></span>
          </a>
        </li>
      </ul>
      <!-- End Social Networks -->
    </div>

    <div class="card-footer py-4 px-6">
      <a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">
        <span class="far fa-envelope mr-2"></span>
        Send a Message
      </a>
    </div>
  </div>
  <!-- End Members -->

  <!-- Members -->
  <div class="card text-center mb-3 mb-5">
    <div class="card-body p-6">
      <!-- Team -->
      <div class="mb-4">
        <span class="btn btn-lg btn-icon btn-soft-danger rounded-circle mb-3">
          <span class="btn-icon__inner">AO</span>
          <span class="badge badge-xs badge-outline-danger badge-pos badge-pos--bottom-left rounded-circle"></span>
        </span>

        <a class="btn btn-sm btn-icon btn-soft-warning btn-bg-transparent position-absolute top-0 right-0 rounded-circle m-3" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Add to favorites">
          <span class="far fa-star btn-icon__inner"></span>
        </a>

        <h2 class="h6 mb-0">
          <a href="#">Amanta Owens</a>
        </h2>
        <a class="small" href="#">@uidesginer</a>
      </div>
      <!-- End Team -->

      <!-- Social Networks -->
      <ul class="list-inline mb-0">
        <li class="list-inline-item">
          <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
            <span class="fab fa-facebook-f btn-icon__inner"></span>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
            <span class="fab fa-google btn-icon__inner"></span>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
            <span class="fab fa-twitter btn-icon__inner"></span>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
            <span class="fab fa-github btn-icon__inner"></span>
          </a>
        </li>
      </ul>
      <!-- End Social Networks -->
    </div>

    <div class="card-footer py-4 px-6">
      <a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">
        <span class="far fa-envelope mr-2"></span>
        Send a Message
      </a>
    </div>
  </div>
  <!-- End Members -->

  <!-- Members -->
  <div class="card text-center mb-3 mb-5">
    <div class="card-body p-6">
      <!-- Team -->
      <div class="mb-4">
        <div class="position-relative u-lg-avatar mx-auto mb-3">
          <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img8.jpg" alt="Image Description">
          <span class="badge badge-xs badge-outline-primary badge-pos badge-pos--bottom-left rounded-circle"></span>
        </div>

        <a class="btn btn-sm btn-icon btn-soft-warning btn-bg-transparent position-absolute top-0 right-0 rounded-circle m-3" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Add to favorites">
          <span class="far fa-star btn-icon__inner"></span>
        </a>

        <h2 class="h6 mb-0">
          <a href="#">Sebastian Diaz</a>
        </h2>
        <a class="small" href="#">@gamechanger</a>
      </div>
      <!-- End Team -->

      <!-- Social Networks -->
      <ul class="list-inline mb-0">
        <li class="list-inline-item">
          <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
            <span class="fab fa-facebook-f btn-icon__inner"></span>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
            <span class="fab fa-google btn-icon__inner"></span>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
            <span class="fab fa-twitter btn-icon__inner"></span>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
            <span class="fab fa-github btn-icon__inner"></span>
          </a>
        </li>
      </ul>
      <!-- End Social Networks -->
    </div>

    <div class="card-footer py-4 px-6">
      <a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">
        <span class="far fa-envelope mr-2"></span>
        Send a Message
      </a>
    </div>
  </div>
  <!-- End Members -->
</div>
Copy

Info #12 

<!-- Team -->
<div class="card position-relative mb-5">
  <div class="card-body position-relative p-3">
    <div class="row align-items-center">
      <div class="col-sm-7 mb-3 mb-sm-0">
        <div class="d-flex">
          <!-- Avatar -->
          <div class="position-relative u-lg-avatar mr-3">
            <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img9.jpg" alt="Image Description">
            <span class="badge badge-xs badge-outline-primary badge-pos badge-pos--bottom-left rounded-circle"></span>
          </div>
          <!-- End Avatar -->

          <div class="mr-3">
            <!-- User Info -->
            <div class="mb-2">
              <h2 class="h6 mb-0">
                <a href="#">Patrick Garner</a>
              </h2>
              <a class="small" href="#">@patrickgarner</a>
            </div>
            <!-- End User Info -->

            <!-- Social Networks -->
            <ul class="list-inline mb-0">
              <li class="list-inline-item mr-0">
                <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
                  <span class="fab fa-facebook-f btn-icon__inner"></span>
                </a>
              </li>
              <li class="list-inline-item mr-0">
                <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
                  <span class="fab fa-google btn-icon__inner"></span>
                </a>
              </li>
              <li class="list-inline-item mr-0">
                <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
                  <span class="fab fa-twitter btn-icon__inner"></span>
                </a>
              </li>
              <li class="list-inline-item mr-0">
                <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
                  <span class="fab fa-github btn-icon__inner"></span>
                </a>
              </li>
            </ul>
            <!-- End Social Networks -->
          </div>
        </div>
      </div>

      <div class="col-sm-5 align-self-sm-end">
        <!-- Button -->
        <div class="text-sm-right">
          <a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">
            <span class="far fa-envelope mr-2"></span>
            Send a Message
          </a>
        </div>
        <!-- End Button -->
      </div>
    </div>

    <!-- Add to Favorites -->
    <a class="btn btn-sm btn-icon btn-soft-warning btn-bg-transparent position-absolute top-0 right-0 rounded-circle mt-3 mr-3" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Add to favorites">
      <span class="far fa-star btn-icon__inner"></span>
    </a>
    <!-- End Add to Favorites -->
  </div>
</div>
<!-- End Team -->

<!-- Team -->
<div class="card position-relative">
  <div class="card-body p-3">
    <div class="row align-items-center">
      <div class="col-sm-7 mb-3 mb-sm-0">
        <div class="d-flex">
          <!-- Avatar -->
          <span class="btn btn-lg btn-icon btn-soft-danger rounded-circle mr-3">
            <span class="btn-icon__inner">AO</span>
            <span class="badge badge-xs badge-outline-danger badge-pos badge-pos--bottom-left rounded-circle"></span>
          </span>
          <!-- End Avatar -->

          <div class="mr-3">
            <!-- User Info -->
            <div class="mb-2">
              <h2 class="h6 mb-0">
                <a href="#">Amanta Owens</a>
              </h2>
              <a class="small" href="#">@uidesginer</a>
            </div>
            <!-- End User Info -->

            <!-- Social Networks -->
            <ul class="list-inline mb-0">
              <li class="list-inline-item mr-0">
                <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
                  <span class="fab fa-facebook-f btn-icon__inner"></span>
                </a>
              </li>
              <li class="list-inline-item mr-0">
                <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
                  <span class="fab fa-google btn-icon__inner"></span>
                </a>
              </li>
              <li class="list-inline-item mr-0">
                <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
                  <span class="fab fa-twitter btn-icon__inner"></span>
                </a>
              </li>
              <li class="list-inline-item mr-0">
                <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
                  <span class="fab fa-github btn-icon__inner"></span>
                </a>
              </li>
            </ul>
            <!-- End Social Networks -->
          </div>
        </div>
      </div>

      <div class="col-sm-5 align-self-sm-end">
        <!-- Button -->
        <div class="text-sm-right">
          <a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">
            <span class="far fa-envelope mr-2"></span>
            Send a Message
          </a>
        </div>
        <!-- End Button -->
      </div>
    </div>

    <!-- Add to Favorites -->
    <a class="btn btn-sm btn-icon btn-soft-warning btn-bg-transparent position-absolute top-0 right-0 rounded-circle mt-3 mr-3" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Add to favorites">
      <span class="far fa-star btn-icon__inner"></span>
    </a>
  </div>
  <!-- End Add to Favorites -->
</div>
<!-- End Team -->
Copy

Info #13

Image Description

I'm a Seller

Discover how much property sold for with our comprehensive house price data.

Sell my Home
Image Description

I'm a Buyer

Ensure you find the right home, near the right school with new School Checker tool.

Buy a Home 
<!-- Icon Blocks Section -->
<div class="bg-light">
  <div class="container space-2">
    <div class="w-lg-85 mx-lg-auto">
      <div class="card-deck d-block d-md-flex card-md-gutters-3">
        <!-- Card -->
        <article class="card text-center">
          <div class="card-body p-7">
            <!-- SVG Icon -->
            <div id="SVGforSale" class="svg-preloader w-75 mx-auto mb-6">
              <figure class="ie-for-sale">
                <img class="js-svg-injector" src="../../assets/svg/flat-icons/for-sale.svg" alt="Image Description"
                     data-parent="#SVGforSale">
              </figure>
            </div>
            <!-- End SVG Icon -->

            <h3 class="h4 mb-3">I'm a Seller</h3>
            <p class="mb-4">Discover how much property sold for with our comprehensive house price data.</p>
            <a class="btn btn-sm btn-soft-danger transition-3d-hover" href="#">
              Sell my Home
              <span class="fas fa-angle-right ml-2"></span>
            </a>
          </div>
        </article>
        <!-- End Card -->

        <!-- Card -->
        <article class="card text-center">
          <div class="card-body p-7">
            <!-- SVG Icon -->
            <div id="SVGbuyer" class="svg-preloader w-75 mx-auto mb-6">
              <figure class="ie-buyer">
                <img class="js-svg-injector" src="../../assets/svg/flat-icons/buyer.svg" alt="Image Description"
                     data-parent="#SVGbuyer">
              </figure>
            </div>
            <!-- End SVG Icon -->

            <h3 class="h4 mb-3">I'm a Buyer</h3>
            <p class="mb-4">Ensure you find the right home, near the right school with new School Checker tool.</p>
            <a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">
              Buy a Home
              <span class="fas fa-angle-right ml-2"></span>
            </a>
          </div>
        </article>
        <!-- End Card -->
      </div>
    </div>
  </div>
</div>
<!-- End Icon Blocks Section -->
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(window).on('load', function () {
    // initialization of svg injector module
    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
  });
</script>
Copy

Info #14

SVG

Front made simple

Easily draft, change, customize and launch new course pages with an easy-to-use template.

Learn More
SVG

Front in action

You can work with your existing website or create new pages on Front.

Get Started
Image Description
Image Description 
<!-- Services Section -->
<div id="servicesSection" class="container space-2">
  <div class="card-deck card-sm-gutters-3 d-block d-md-flex">
    <!-- Card -->
    <div class="card text-center mb-4 mb-md-0">
      <div class="card-body space-3 px-5">
        <div class="mb-4">
          <figure id="icon24" class="svg-preloader ie-height-72 w-100 max-width-10 mx-auto mb-3">
            <img class="js-svg-injector" src="../../assets/svg/icons/icon-24.svg" alt="SVG"
                 data-parent="#icon24">
          </figure>
          <h3 class="h4">Front made simple</h3>
          <p>Easily draft, change, customize and launch new course pages with an easy-to-use template.</p>
        </div>
        <a class="btn btn-primary btn-wide transition-3d-hover" href="../../documentation/index.html">Learn More</a>
      </div>
    </div>
    <!-- End Card -->

    <!-- Card -->
    <div id="SVGcardSection" class="svg-preloader card z-index-2 text-center">
      <div class="card-body space-3 px-5">
        <div class="mb-4">
          <figure id="icon23" class="svg-preloader ie-height-72 w-100 max-width-10 mx-auto mb-3">
            <img class="js-svg-injector" src="../../assets/svg/icons/icon-23.svg" alt="SVG"
                 data-parent="#icon23">
          </figure>
          <h3 class="h4">Front in action</h3>
          <p>You can work with your existing website or create new pages on Front.</p>
        </div>
        <a class="btn btn-primary btn-wide transition-3d-hover" href="../../starter/index.html">Get Started</a>
      </div>

      <!-- SVG Component -->
      <div class="position-absolute top-0 left-0 w-100 max-width-15 z-index-n1">
        <figure class="ie-abstract-shapes-9">
          <img class="js-svg-injector" src="../../assets/svg/components/abstract-shapes-9.svg" alt="Image Description"
               data-parent="#SVGcardSection">
        </figure>
      </div>
      <!-- End SVG Component -->

      <!-- SVG Component -->
      <div class="position-absolute bottom-0 right-0 w-100 max-width-15 z-index-n1">
        <figure class="ie-abstract-shapes-6">
          <img class="js-svg-injector" src="../../assets/svg/components/abstract-shapes-6.svg" alt="Image Description"
               data-parent="#SVGcardSection">
        </figure>
      </div>
      <!-- End SVG Component -->
    </div>
    <!-- End Card -->
  </div>
</div>
<!-- End Services Section -->
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(window).on('load', function () {
    // initialization of svg injector module
    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
  });
</script>
Copy

Info #15

SVG

Responsive

Front is an incredibly beautiful, fully responsive, and mobile-first projects on the web.

Explore now
SVG

Customizable

Front template can be easily customized with its cutting-edge components and features.

Explore now
SVG

Premium sketch

Front is not only for developers but also for designers, and includes a Sketch file.

Explore now
SVG

Documentation

Every component and plugin is well documented with live examples.

Explore now 
<!-- Info -->
<div class="container space-2">
  <div id="SVGkeyFeatures" class="svg-preloader card-deck card-lg-gutters-2 d-block d-lg-flex">
    <div class="card shadow mb-3 mb-lg-0">
      <!-- Icon Blocks -->
      <div class="card-body p-5">
        <figure class="ie-height-56 w-100 max-width-8 mb-4">
          <img class="js-svg-injector" src="../../assets/svg/icons/icon-9.svg" alt="SVG"
               data-parent="#SVGkeyFeatures">
        </figure>
        <h3 class="h5">Responsive</h3>
        <p class="font-size-1">Front is an incredibly beautiful, fully responsive, and mobile-first projects on the web.</p>
        <a class="font-size-1" href="#">Explore now <span class="fas fa-angle-right align-middle ml-2"></span></a>
      </div>
      <!-- End Icon Blocks -->
    </div>

    <div class="card shadow mb-3 mb-lg-0">
      <!-- Icon Blocks -->
      <div class="card-body p-5">
        <figure class="ie-height-56 w-100 max-width-8 mb-4">
          <img class="js-svg-injector" src="../../assets/svg/icons/icon-3.svg" alt="SVG"
               data-parent="#SVGkeyFeatures">
        </figure>
        <h3 class="h5">Customizable</h3>
        <p class="font-size-1">Front template can be easily customized with its cutting-edge components and features.</p>
        <a class="font-size-1" href="#">Explore now <span class="fas fa-angle-right align-middle ml-2"></span></a>
      </div>
      <!-- End Icon Blocks -->
    </div>

    <div class="card bg-primary text-white shadow-primary-lg mb-3 mb-lg-0">
      <!-- Icon Blocks -->
      <div class="card-body p-5">
        <figure class="ie-height-56 w-100 max-width-8 mb-4">
          <img class="js-svg-injector" src="../../assets/svg/icons/icon-white-5.svg" alt="SVG"
               data-parent="#SVGkeyFeatures">
        </figure>
        <h3 class="h5">Premium <span class="badge badge-success font-weight-medium badge-pill ml-1">sketch</span></h3>
        <p class="text-white font-size-1">Front is not only for developers but also for designers, and includes a Sketch file.</p>
        <a class="text-white font-size-1" href="#">Explore now <span class="fas fa-angle-right align-middle ml-2"></span></a>
      </div>
      <!-- End Icon Blocks -->
    </div>

    <div class="card shadow">
      <!-- Icon Blocks -->
      <div class="card-body p-5">
        <figure class="ie-height-56 w-100 max-width-8 mb-4">
          <img class="js-svg-injector" src="../../assets/svg/icons/icon-2.svg" alt="SVG"
               data-parent="#SVGkeyFeatures">
        </figure>
        <h3 class="h5">Documentation</h3>
        <p class="font-size-1">Every component and plugin is well documented with live examples.</p>
        <a class="font-size-1" href="#">Explore now <span class="fas fa-angle-right align-middle ml-2"></span></a>
      </div>
      <!-- End Icon Blocks -->
    </div>
  </div>
</div>
<!-- End Info -->
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(window).on('load', function () {
    // initialization of svg injector module
    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
  });
</script>
Copy

Info #16 

<div class="card-deck d-block d-lg-flex card-lg-gutters-2">
  <a class="card card-frame mb-3 mb-lg-0" href="../pages/help-article.html">
    <div class="card-body p-4">
      <!-- Icon Block -->
      <div class="media">
        <figure id="icon1" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
          <img class="js-svg-injector" src="../../assets/svg/icons/icon-1.svg" alt="SVG"
               data-parent="#icon1">
        </figure>
        <div class="media-body">
          <h2 class="h5">Getting started</h2>
          <p class="font-size-1">Welcome to Front! We're so glad you're here. Let's get started!</p>

          <div class="media">
            <!-- Contributors List -->
            <ul class="list-inline mr-2 mb-0">
              <li class="list-inline-item mr-0">
                <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                  <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
                </div>
              </li>
              <li class="list-inline-item ml-n3 mr-0">
                <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                  <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img8.jpg" alt="Image Description">
                </div>
              </li>
            </ul>
            <!-- End Contributors List -->

            <div class="media-body">
              <!-- Article Authors -->
              <small class="d-block text-dark">1 article in this collection</small>
              <small class="d-block text-dark">
                <span class="text-muted">Written by</span>
                Luisa Woodfine
                <span class="text-muted">and</span>
                Neil Galavan
              </small>
              <!-- End Article Authors -->
            </div>
          </div>
        </div>
      </div>
      <!-- End Icon Block -->
    </div>
  </a>

  <a class="card card-frame" href="../pages/help-article.html">
    <div class="card-body p-4">
      <!-- Icon Block -->
      <div class="media">
        <figure id="icon46" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
          <img class="js-svg-injector" src="../../assets/svg/icons/icon-46.svg" alt="SVG"
               data-parent="#icon46">
        </figure>
        <div class="media-body">
          <h3 class="h5">Account</h3>
          <p class="font-size-1">Adjust your profile and preferences to make Front work just for you!</p>

          <div class="media">
            <!-- Contributors List -->
            <ul class="list-inline mr-2 mb-0">
              <li class="list-inline-item mr-0">
                <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                  <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img2.jpg" alt="Image Description">
                </div>
              </li>
              <li class="list-inline-item ml-n3 mr-0">
                <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                  <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img8.jpg" alt="Image Description">
                </div>
              </li>
            </ul>
            <!-- End Contributors List -->

            <div class="media-body">
              <!-- Article Authors -->
              <small class="d-block text-dark">2 article in this collection</small>
              <small class="d-block text-dark">
                <span class="text-muted">Written by</span>
                Fiona Burke, Luisa Woodfine
                <span class="text-muted">and</span>
                Neil Galavan
              </small>
              <!-- End Article Authors -->
            </div>
          </div>
        </div>
      </div>
      <!-- End Icon Block -->
    </div>
  </a>
</div>
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(window).on('load', function () {
    // initialization of svg injector module
    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
  });
</script>
Copy

Info #17 

<!-- Info -->
<div class="card-deck card-lg-gutters-2 d-block d-lg-flex">
  <!-- Item -->
  <div class="card mb-3">
    <div class="card-body p-4">
      <!-- Details -->
      <div class="media">
        <div class="u-avatar mr-3">
          <img class="img-fluid" src="../../assets/img/160x160/img6.jpg" alt="Image Description">
        </div>

        <div class="media-body">
          <!-- Header -->
          <div class="mb-4">
            <h3 class="h6 mb-0">
              <a href="#">Dropbox Inc.</a>
            </h3>

            <!-- Review -->
            <a class="d-inline-block small" href="#">
              <span class="text-warning">
                <span class="fas fa-star"></span>
                <span class="fas fa-star"></span>
                <span class="fas fa-star"></span>
                <span class="far fa-star"></span>
                <span class="far fa-star"></span>
              </span>
              <span class="text-dark font-weight-semi-bold ml-2">3.74</span>
              <span class="text-muted">(567 reviews)</span>
            </a>
            <!-- End Review -->
          </div>
          <!-- End Header -->

          <!-- Additional Info -->
          <div class="d-flex align-items-center">
            <div class="u-ver-divider pr-3 mr-3">
              <a class="font-size-1 text-secondary font-weight-medium" href="#">Salaries</a>
            </div>
            <a class="font-size-1 font-weight-medium" href="#">Open jobs</a>
          </div>
          <!-- End Additional Info -->
        </div>
      </div>
      <!-- End Details -->
    </div>
  </div>
  <!-- End Item -->

  <!-- Item -->
  <div class="card mb-3">
    <div class="card-body p-4">
      <!-- Details -->
      <div class="media">
        <div class="u-avatar mr-3">
          <img class="img-fluid" src="../../assets/img/160x160/img3.jpg" alt="Image Description">
        </div>

        <div class="media-body">
          <!-- Header -->
          <div class="mb-4">
            <h3 class="h6 mb-0">
              <a href="#">Slack Inc.</a>
            </h3>

            <!-- Review -->
            <a class="d-inline-block small" href="#">
              <span class="text-warning">
                <span class="fas fa-star"></span>
                <span class="fas fa-star"></span>
                <span class="fas fa-star"></span>
                <span class="fas fa-star"></span>
                <span class="fas fa-star"></span>
              </span>
              <span class="text-dark font-weight-semi-bold ml-2">4.91</span>
              <span class="text-muted">(12k+ reviews)</span>
            </a>
            <!-- End Review -->
          </div>
          <!-- End Header -->

          <!-- Additional Info -->
          <div class="d-flex align-items-center">
            <div class="u-ver-divider pr-3 mr-3">
              <a class="font-size-1 text-secondary font-weight-medium" href="#">Salaries</a>
            </div>
            <a class="font-size-1 font-weight-medium" href="#">Open jobs</a>
          </div>
          <!-- End Additional Info -->
        </div>
      </div>
      <!-- End Details -->
    </div>
  </div>
  <!-- End Item -->

  <!-- Item -->
  <div class="card mb-3">
    <div class="card-body p-4">
      <!-- Details -->
      <div class="media">
        <div class="u-avatar mr-3">
          <img class="img-fluid" src="../../assets/img/160x160/img10.jpg" alt="Image Description">
        </div>

        <div class="media-body">
          <!-- Header -->
          <div class="mb-4">
            <h3 class="h6 mb-0">
              <a href="#">Airbnb Inc.</a>
            </h3>

            <!-- Review -->
            <a class="d-inline-block small" href="#">
              <span class="text-warning">
                <span class="fas fa-star"></span>
                <span class="fas fa-star"></span>
                <span class="fas fa-star"></span>
                <span class="fas fa-star"></span>
                <span class="fas fa-star-half-alt"></span>
              </span>
              <span class="text-dark font-weight-semi-bold ml-2">4.5</span>
              <span class="text-muted">(2k+ reviews)</span>
            </a>
            <!-- End Review -->
          </div>
          <!-- End Header -->

          <!-- Additional Info -->
          <div class="d-flex align-items-center">
            <div class="u-ver-divider pr-3 mr-3">
              <a class="font-size-1 text-secondary font-weight-medium" href="#">Salaries</a>
            </div>
            <a class="font-size-1 font-weight-medium" href="#">Open jobs</a>
          </div>
          <!-- End Additional Info -->
        </div>
      </div>
      <!-- End Details -->
    </div>
  </div>
  <!-- End Item -->
</div>
<!-- End Info -->
Copy

Info #18

Image Description

Google Inc.

4.8 (780k+ reviews)

Regular exposure to business stakeholders and executive management, as well as the authority.

Salaries
Q&A
Open jobs - 451
Image Description

Digital Ocean

3.7 (201 reviews)

Partner with Marketing Leads to align against business goals.

Salaries
Q&A
Open jobs - 36 
<!-- Info -->
<div class="card-deck card-lg-gutters-2 d-block d-lg-flex">
  <!-- Item -->
  <div class="card mb-3">
    <div class="card-body p-4">
      <!-- Details -->
      <div class="media d-block d-sm-flex">
        <div class="u-avatar mb-3 mb-sm-0 mr-3">
          <img class="img-fluid" src="../../assets/img/160x160/img17.png" alt="Image Description">
        </div>

        <div class="media-body">
          <!-- Header -->
          <div class="mb-4">
            <h3 class="h5 mb-0">
              <a href="#">Google Inc.</a>
            </h3>

            <!-- Review -->
            <a class="d-inline-block small" href="#">
              <span class="text-warning">
                <span class="fas fa-star"></span>
                <span class="fas fa-star"></span>
                <span class="fas fa-star"></span>
                <span class="far fa-star"></span>
                <span class="far fa-star"></span>
              </span>
              <span class="text-dark font-weight-semi-bold ml-2">4.8</span>
              <span class="text-muted">(780k+ reviews)</span>
            </a>
            <!-- End Review -->
          </div>
          <!-- End Header -->

          <div class="mb-4">
            <p>Regular exposure to business stakeholders and executive management, as well as the authority.</p>
          </div>

          <!-- Additional Info -->
          <div class="d-flex align-items-center">
            <div class="u-ver-divider pr-3 mr-3">
              <a class="font-size-1 text-secondary font-weight-medium" href="#">Salaries</a>
            </div>

            <div class="u-ver-divider pr-3 mr-3">
              <a class="font-size-1 text-secondary font-weight-medium" href="#">Q&A</a>
            </div>

            <a class="font-size-1 font-weight-medium" href="#">Open jobs - 451</a>
          </div>
          <!-- End Additional Info -->
        </div>
      </div>
      <!-- End Details -->
    </div>
  </div>
  <!-- End Item -->

  <!-- Item -->
  <div class="card mb-3">
    <div class="card-body p-4">
      <!-- Details -->
      <div class="media d-block d-sm-flex">
        <div class="u-avatar mb-3 mb-sm-0 mr-3">
          <img class="img-fluid" src="../../assets/img/160x160/img7.jpg" alt="Image Description">
        </div>

        <div class="media-body">
          <!-- Header -->
          <div class="mb-4">
            <h3 class="h5 mb-0">
              <a href="#">Digital Ocean</a>
            </h3>

            <!-- Review -->
            <a class="d-inline-block small" href="#">
              <span class="text-warning">
                <span class="fas fa-star"></span>
                <span class="fas fa-star"></span>
                <span class="fas fa-star"></span>
                <span class="fas fa-star-half-alt"></span>
                <span class="far fa-star"></span>
              </span>
              <span class="text-dark font-weight-semi-bold ml-2">3.7</span>
              <span class="text-muted">(201 reviews)</span>
            </a>
            <!-- End Review -->
          </div>
          <!-- End Header -->

          <div class="mb-4">
            <p>Partner with Marketing Leads to align against business goals.</p>
          </div>

          <!-- Additional Info -->
          <div class="d-flex align-items-center">
            <div class="u-ver-divider pr-3 mr-3">
              <a class="font-size-1 text-secondary font-weight-medium" href="#">Salaries</a>
            </div>

            <div class="u-ver-divider pr-3 mr-3">
              <a class="font-size-1 text-secondary font-weight-medium" href="#">Q&A</a>
            </div>

            <a class="font-size-1 font-weight-medium" href="#">Open jobs - 36</a>
          </div>
          <!-- End Additional Info -->
        </div>
      </div>
      <!-- End Details -->
    </div>
  </div>
  <!-- End Item -->
</div>
<!-- End Info -->
Copy

Info #19

4.5

Overal Rating

Based on 132 reviews

Image Description

Senior Java Developer

The role is responsible for designing, coding and modifying websites.

Location

Paris, FR

Salary

35k - 45k
4.7

Overal Rating

Based on 120 reviews

Image Description

Channel Sales Director

Participates in all aspects of full life cycle application development.

Location

Florida, US

Salary

55k - 60k
3.9

Overal Rating

Based on 85 reviews

Image Description

Junior UX Designer

We are looking for an outstanding Web Developer.

Location

London, UK

Salary

20k - 28k 
<!-- Info -->
<div class="card-deck d-block d-lg-flex">
  <!-- Item -->
  <div class="card mb-5">
    <div class="card-body p-4">
      <!-- Header -->
      <div class="d-flex align-items-center mb-5">
        <!-- Rating -->
        <div class="position-relative">
          <a id="rating1DropdownInvoker" class="btn btn-xs btn-soft-warning btn-pill" href="javascript:;" role="button"
             aria-controls="rating1Dropdown"
             aria-haspopup="true"
             aria-expanded="false"
             data-unfold-event="hover"
             data-unfold-target="#rating1Dropdown"
             data-unfold-type="css-animation"
             data-unfold-duration="300"
             data-unfold-delay="300"
             data-unfold-hide-on-scroll="true"
             data-unfold-animation-in="slideInUp"
             data-unfold-animation-out="fadeOut">
            4.5
          </a>

          <div id="rating1Dropdown" class="dropdown-menu dropdown-unfold p-3" aria-labelledby="rating1DropdownInvoker" style="width: 190px;">
            <div class="d-flex align-items-center mb-2">
              <span class="text-warning mr-2">4.5</span>
              <ul class="list-inline mb-0">
                <li class="list-inline-item text-warning">
                  <span class="fas fa-star"></span>
                  <span class="fas fa-star"></span>
                  <span class="fas fa-star"></span>
                  <span class="fas fa-star"></span>
                  <span class="far fa-star"></span>
                </li>
              </ul>
            </div>

            <p class="text-dark mb-0">Overal Rating</p>
            <p class="mb-0">Based on 132 reviews</p>
          </div>
        </div>
        <!-- End Rating -->

        <!-- Bookmark -->
        <div class="ml-auto">
          <div class="bookmark-checkbox" data-toggle="tooltip" data-placement="top" title="Save Job">
            <input type="checkbox" class="bookmark-checkbox-input" id="bookmark1">
            <label class="bookmark-checkbox-label" for="bookmark1"></label>
          </div>
        </div>
        <!-- End Bookmark -->
      </div>
      <!-- End Header -->

      <div class="text-center">
        <div class="u-lg-avatar mx-auto mb-3">
          <img class="img-fluid" src="../../assets/img/160x160/img3.jpg" alt="Image Description">
        </div>

        <!-- Title -->
        <div class="mb-4">
          <h1 class="h5 mb-1">
            <a href="#">Senior Java Developer</a>
          </h1>
          <ul class="list-inline font-size-1 text-muted">
            <li class="list-inline-item">
              <a class="link-muted" href="#">Slack LLC</a>
            </li>
            <li class="list-inline-item text-muted">•</li>
            <li class="list-inline-item">Office</li>
          </ul>
        </div>
        <!-- End Title -->

        <p>The role is responsible for designing, coding and modifying websites.</p>
      </div>
    </div>

    <div class="card-footer text-center py-4">
      <!-- Location & Salary -->
      <div class="row align-items-center">
        <div class="col-6 u-ver-divider">
          <h2 class="small text-secondary mb-0">Location</h2>
          <small class="fas fa-map-marker-alt text-secondary align-middle mr-1"></small>
          <span class="align-middle">Paris, FR</span>
        </div>
        <div class="col-6">
          <h3 class="small text-secondary mb-0">Salary</h3>
          <small class="fas fa-dollar-sign text-secondary align-middle mr-1"></small>
          <span class="align-middle">35k - 45k</span>
        </div>
      </div>
      <!-- End Location & Salary -->
    </div>
  </div>
  <!-- End Item -->

  <!-- Item -->
  <div class="card mb-5">
    <div class="card-body p-4">
      <!-- Header -->
      <div class="d-flex align-items-center mb-5">
        <!-- Rating -->
        <div class="position-relative">
          <a id="rating2DropdownInvoker" class="btn btn-xs btn-soft-warning btn-pill" href="javascript:;" role="button"
             aria-controls="rating2Dropdown"
             aria-haspopup="true"
             aria-expanded="false"
             data-unfold-event="hover"
             data-unfold-target="#rating2Dropdown"
             data-unfold-type="css-animation"
             data-unfold-duration="300"
             data-unfold-delay="300"
             data-unfold-hide-on-scroll="true"
             data-unfold-animation-in="slideInUp"
             data-unfold-animation-out="fadeOut">
            4.7
          </a>

          <div id="rating2Dropdown" class="dropdown-menu dropdown-unfold p-3" aria-labelledby="rating2DropdownInvoker" style="width: 190px;">
            <div class="d-flex align-items-center mb-2">
              <span class="text-warning mr-2">4.7</span>
              <ul class="list-inline mb-0">
                <li class="list-inline-item text-warning">
                  <span class="fas fa-star"></span>
                  <span class="fas fa-star"></span>
                  <span class="fas fa-star"></span>
                  <span class="fas fa-star"></span>
                  <span class="fas fa-star-half-alt"></span>
                </li>
              </ul>
            </div>

            <p class="text-dark mb-0">Overal Rating</p>
            <p class="mb-0">Based on 120 reviews</p>
          </div>
        </div>
        <!-- End Rating -->

        <!-- Bookmark -->
        <div class="ml-auto">
          <div class="bookmark-checkbox" data-toggle="tooltip" data-placement="top" title="Save Job">
            <input type="checkbox" class="bookmark-checkbox-input" id="bookmark2">
            <label class="bookmark-checkbox-label" for="bookmark2"></label>
          </div>
        </div>
        <!-- End Bookmark -->
      </div>
      <!-- End Header -->

      <div class="text-center">
        <div class="u-lg-avatar mx-auto mb-3">
          <img class="img-fluid" src="../../assets/img/160x160/img6.jpg" alt="Image Description">
        </div>

        <!-- Title -->
        <div class="mb-4">
          <h3 class="h5 mb-1">
            <a href="#">Channel Sales Director</a>
          </h3>
          <ul class="list-inline font-size-1 text-muted">
            <li class="list-inline-item">
              <a class="link-muted" href="#">Dropbox</a>
            </li>
            <li class="list-inline-item text-muted">•</li>
            <li class="list-inline-item">Remote</li>
          </ul>
        </div>
        <!-- End Title -->

        <p>Participates in all aspects of full life cycle application development.</p>
      </div>
    </div>

    <div class="card-footer text-center py-4">
      <!-- Location & Salary -->
      <div class="row align-items-center">
        <div class="col-6 u-ver-divider">
          <h4 class="small text-secondary mb-0">Location</h4>
          <small class="fas fa-map-marker-alt text-secondary align-middle mr-1"></small>
          <span class="align-middle">Florida, US</span>
        </div>
        <div class="col-6">
          <h4 class="small text-secondary mb-0">Salary</h4>
          <small class="fas fa-dollar-sign text-secondary align-middle mr-1"></small>
          <span class="align-middle">55k - 60k</span>
        </div>
      </div>
      <!-- End Location & Salary -->
    </div>
  </div>
  <!-- End Item -->

  <!-- Item -->
  <div class="card mb-5">
    <div class="card-body p-4">
      <!-- Header -->
      <div class="d-flex align-items-center mb-5">
        <!-- Rating -->
        <div class="position-relative">
          <a id="rating3DropdownInvoker" class="btn btn-xs btn-soft-warning btn-pill" href="javascript:;" role="button"
             aria-controls="rating3Dropdown"
             aria-haspopup="true"
             aria-expanded="false"
             data-unfold-event="hover"
             data-unfold-target="#rating3Dropdown"
             data-unfold-type="css-animation"
             data-unfold-duration="300"
             data-unfold-delay="300"
             data-unfold-hide-on-scroll="true"
             data-unfold-animation-in="slideInUp"
             data-unfold-animation-out="fadeOut">
            3.9
          </a>

          <div id="rating3Dropdown" class="dropdown-menu dropdown-unfold p-3" aria-labelledby="rating3DropdownInvoker" style="width: 190px;">
            <div class="d-flex align-items-center mb-2">
              <span class="text-warning mr-2">3.9</span>
              <ul class="list-inline mb-0">
                <li class="list-inline-item text-warning">
                  <span class="fas fa-star"></span>
                  <span class="fas fa-star"></span>
                  <span class="fas fa-star"></span>
                  <span class="fas fa-star-half-alt"></span>
                  <span class="far fa-star"></span>
                </li>
              </ul>
            </div>

            <p class="text-dark mb-0">Overal Rating</p>
            <p class="mb-0">Based on 85 reviews</p>
          </div>
        </div>
        <!-- End Rating -->

        <!-- Bookmark -->
        <div class="ml-auto">
          <div class="bookmark-checkbox" data-toggle="tooltip" data-placement="top" title="Save Job">
            <input type="checkbox" class="bookmark-checkbox-input" id="bookmark3">
            <label class="bookmark-checkbox-label" for="bookmark3"></label>
          </div>
        </div>
        <!-- End Bookmark -->
      </div>
      <!-- End Header -->

      <div class="text-center">
        <div class="u-lg-avatar mx-auto mb-3">
          <img class="img-fluid" src="../../assets/img/160x160/img9.jpg" alt="Image Description">
        </div>

        <!-- Title -->
        <div class="mb-4">
          <h3 class="h5 mb-1">
            <a href="#">Junior UX Designer</a>
          </h3>
          <ul class="list-inline font-size-1 text-muted">
            <li class="list-inline-item">
              <a class="link-muted" href="#">Dribbble</a>
            </li>
            <li class="list-inline-item text-muted">•</li>
            <li class="list-inline-item">Office</li>
          </ul>
        </div>
        <!-- End Title -->

        <p>We are looking for an outstanding Web Developer.</p>
      </div>
    </div>

    <div class="card-footer text-center py-4">
      <!-- Location & Salary -->
      <div class="row align-items-center">
        <div class="col-6 u-ver-divider">
          <h4 class="small text-secondary mb-0">Location</h4>
          <small class="fas fa-map-marker-alt text-secondary align-middle mr-1"></small>
          <span class="align-middle">London, UK</span>
        </div>
        <div class="col-6">
          <h4 class="small text-secondary mb-0">Salary</h4>
          <small class="fas fa-dollar-sign text-secondary align-middle mr-1"></small>
          <span class="align-middle">20k - 28k</span>
        </div>
      </div>
      <!-- End Location & Salary -->
    </div>
  </div>
  <!-- End Item -->
</div>
<!-- End Info -->
Copy
<!-- JS Front -->
<script src="../../assets/js/components/hs.unfold.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(window).on('load', function () {
    // initialization of unfold component
    $.HSCore.components.HSUnfold.init($('[data-unfold-target]'));
  });
</script>
Copy

Info #20

Image Description

Senior Java Developer

4.5

Overal Rating

Based on 132 reviews

The role is responsible for designing, coding and modifying websites, from layout to function and according to a client's specifications. Strive to create visually appealing sites that feature user-friendly design and clear navigation.

Location

Liverpool, UK

Posted

1 day ago

Salary

35k - 45k
Fulltime
DB

Channel Sales Director

4.7

Overal Rating

Based on 120 reviews

Participates in all aspects of full life cycle application development including requirements gathering, technical design, iterative development, testing, implementation and on-going support.

Location

Leeds, UK

Posted

2 days ago

Salary

55k - 65k
Contract 
<!-- Info -->
<div class="card mb-5">
  <div class="card-body p-4">
    <!-- Details -->
    <div class="media d-block d-sm-flex">
      <div class="u-avatar mb-3 mb-sm-0 mr-4">
        <img class="img-fluid" src="../../assets/img/160x160/img14.png" alt="Image Description">
      </div>

      <div class="media-body">
        <!-- Header -->
        <div class="media mb-2">
          <div class="media-body">
            <h1 class="h5 mb-1">
              <a href="#">Senior Java Developer</a>
            </h1>
            <ul class="list-inline font-size-1 text-muted">
              <li class="list-inline-item">
                <a class="link-muted" href="#">
                  <span class="fas fa-building mr-1"></span>
                  Slack LLC
                </a>
              </li>
              <li class="list-inline-item text-muted">•</li>
              <li class="list-inline-item">Office</li>
            </ul>
          </div>

          <div class="d-flex ml-auto">
            <!-- Rating -->
            <div class="position-relative d-inline-block mr-2">
              <a id="rating6DropdownInvoker" class="btn btn-xs btn-soft-warning btn-pill" href="javascript:;" role="button"
                 aria-controls="rating6Dropdown"
                 aria-haspopup="true"
                 aria-expanded="false"
                 data-unfold-event="hover"
                 data-unfold-target="#rating6Dropdown"
                 data-unfold-type="css-animation"
                 data-unfold-duration="300"
                 data-unfold-delay="300"
                 data-unfold-hide-on-scroll="true"
                 data-unfold-animation-in="slideInUp"
                 data-unfold-animation-out="fadeOut">
                4.5
              </a>

              <div id="rating6Dropdown" class="dropdown-menu dropdown-menu-right dropdown-unfold p-3" aria-labelledby="rating6DropdownInvoker" style="width: 190px;">
                <div class="d-flex align-items-center mb-2">
                  <span class="text-warning mr-2">4.5</span>
                  <ul class="list-inline mb-0">
                    <li class="list-inline-item text-warning">
                      <span class="fas fa-star"></span>
                      <span class="fas fa-star"></span>
                      <span class="fas fa-star"></span>
                      <span class="fas fa-star"></span>
                      <span class="fas fa-star-half-alt"></span>
                    </li>
                  </ul>
                </div>

                <p class="text-dark mb-0">Overal Rating</p>
                <p class="mb-0">Based on 132 reviews</p>
              </div>
            </div>
            <!-- End Rating -->

            <!-- Bookmark -->
            <div class="bookmark-checkbox d-inline-block" data-toggle="tooltip" data-placement="top" title="Save Job">
              <input type="checkbox" class="bookmark-checkbox-input" id="bookmark4">
              <label class="bookmark-checkbox-label" for="bookmark4"></label>
            </div>
            <!-- End Bookmark -->
          </div>
        </div>
        <!-- End Header -->

        <div class="mb-5">
          <p>The role is responsible for designing, coding and modifying websites, from layout to function and according to a client's specifications. Strive to create visually appealing sites that feature user-friendly design and clear navigation.</p>
        </div>

        <div class="d-md-flex align-items-md-center">
          <!-- Location -->
          <div class="u-ver-divider u-ver-divider--none-md pr-4 mb-3 mb-md-0 mr-4">
            <h2 class="small text-secondary mb-0">Location</h2>
            <small class="fas fa-map-marker-alt text-secondary align-middle mr-1"></small>
            <span class="align-middle">Liverpool, UK</span>
          </div>
          <!-- End Location -->

          <!-- Posted -->
          <div class="u-ver-divider u-ver-divider--none-md pr-4 mb-3 mb-md-0 mr-4">
            <h3 class="small text-secondary mb-0">Posted</h3>
            <small class="fas fa-calendar-alt text-secondary align-middle mr-1"></small>
            <span class="align-middle">1 day ago</span>
          </div>
          <!-- End Posted -->

          <!-- Posted -->
          <div class="mb-3 mb-md-0">
            <h4 class="small text-secondary mb-0">Salary</h4>
            <small class="fas fa-dollar-sign text-secondary align-middle mr-1"></small>
            <span class="align-middle">35k - 45k</span>
          </div>
          <!-- End Posted -->

          <div class="ml-md-auto">
            <span class="btn btn-xs btn-soft-danger btn-pill">Fulltime</span>
          </div>
        </div>
      </div>
    </div>
    <!-- End Details -->
  </div>
</div>
<!-- End Info -->

<!-- Info -->
<div class="card mb-5">
  <div class="card-body p-4">
    <!-- Details -->
    <div class="media d-block d-sm-flex">
      <span class="btn btn-icon btn-soft-primary rounded-circle mb-3 mb-sm-0 mr-4">
        <span class="btn-icon__inner">DB</span>
      </span>

      <div class="media-body">
        <!-- Header -->
        <div class="media mb-2">
          <div class="media-body">
            <h3 class="h5 mb-1">
              <a href="#">Channel Sales Director</a>
            </h3>
            <ul class="list-inline font-size-1 text-muted">
              <li class="list-inline-item">
                <a class="link-muted" href="#">
                  <span class="fas fa-building mr-1"></span>
                  Dropbox
                </a>
              </li>
              <li class="list-inline-item text-muted">•</li>
              <li class="list-inline-item">Remote</li>
            </ul>
          </div>

          <div class="d-flex ml-auto">
            <!-- Rating -->
            <div class="position-relative d-inline-block mr-2">
              <a id="rating7DropdownInvoker" class="btn btn-xs btn-soft-warning btn-pill" href="javascript:;" role="button"
                 aria-controls="rating7Dropdown"
                 aria-haspopup="true"
                 aria-expanded="false"
                 data-unfold-event="hover"
                 data-unfold-target="#rating7Dropdown"
                 data-unfold-type="css-animation"
                 data-unfold-duration="300"
                 data-unfold-delay="300"
                 data-unfold-hide-on-scroll="true"
                 data-unfold-animation-in="slideInUp"
                 data-unfold-animation-out="fadeOut">
                4.7
              </a>

              <div id="rating7Dropdown" class="dropdown-menu dropdown-menu-right dropdown-unfold p-3" aria-labelledby="rating7DropdownInvoker" style="width: 190px;">
                <div class="d-flex align-items-center mb-2">
                  <span class="text-warning mr-2">4.7</span>
                  <ul class="list-inline mb-0">
                    <li class="list-inline-item text-warning">
                      <span class="fas fa-star"></span>
                      <span class="fas fa-star"></span>
                      <span class="fas fa-star"></span>
                      <span class="fas fa-star"></span>
                      <span class="fas fa-star-half-alt"></span>
                    </li>
                  </ul>
                </div>

                <p class="text-dark mb-0">Overal Rating</p>
                <p class="mb-0">Based on 120 reviews</p>
              </div>
            </div>
            <!-- End Rating -->

            <!-- Bookmark -->
            <div class="bookmark-checkbox d-inline-block" data-toggle="tooltip" data-placement="top" title="Save Job">
              <input type="checkbox" class="bookmark-checkbox-input" id="bookmark5">
              <label class="bookmark-checkbox-label" for="bookmark5"></label>
            </div>
            <!-- End Bookmark -->
          </div>
        </div>
        <!-- End Header -->

        <div class="mb-5">
          <p>Participates in all aspects of full life cycle application development including requirements gathering, technical design, iterative development, testing, implementation and on-going support.</p>
        </div>

        <div class="d-md-flex align-items-md-center">
          <!-- Location -->
          <div class="u-ver-divider u-ver-divider--none-md pr-4 mb-3 mb-md-0 mr-4">
            <h4 class="small text-secondary mb-0">Location</h4>
            <small class="fas fa-map-marker-alt text-secondary align-middle mr-1"></small>
            <span class="align-middle">Leeds, UK</span>
          </div>
          <!-- End Location -->

          <!-- Posted -->
          <div class="u-ver-divider u-ver-divider--none-md pr-4 mb-3 mb-md-0 mr-4">
            <h4 class="small text-secondary mb-0">Posted</h4>
            <small class="fas fa-calendar-alt text-secondary align-middle mr-1"></small>
            <span class="align-middle">2 days ago</span>
          </div>
          <!-- End Posted -->

          <!-- Posted -->
          <div class="mb-3 mb-md-0">
            <h4 class="small text-secondary mb-0">Salary</h4>
            <small class="fas fa-dollar-sign text-secondary align-middle mr-1"></small>
            <span class="align-middle">55k - 65k</span>
          </div>
          <!-- End Posted -->

          <div class="ml-md-auto">
            <span class="btn btn-xs btn-soft-danger btn-pill">Contract</span>
          </div>
        </div>
      </div>
    </div>
    <!-- End Details -->
  </div>
</div>
<!-- End Info -->
Copy

Info #21

4.5

Overal Rating

Based on 132 reviews

Image Description

Jorge Fields

Apps and Web developer

I can start working right now and I can WORK FULL TIME on your project during the entire development of your project.

Location

United Kingdom Flag London

Working rate

$35/hr
4.7

Overal Rating

Based on 120 reviews

BS

Bertha Sandoval

Senior Android, iOS, Web Developer

Hello and welcome! I am an Web Developer with more than 5 years of commercial experience in this area.

Location

United Kingdom Flag London

Working rate

$30/hr
3.9

Overal Rating

Based on 85 reviews

Image Description

Ola Nunez

Fullstack Web developer

I am an expert in Web development with 6+ years of experience, currently working as a team leader, solution architect, and developer.

Location

United Kingdom Flag Leicester

Working rate

$49/hr 
<!-- Info -->
<div class="card-deck d-block d-lg-flex">
  <!-- Item -->
  <div class="card mb-5">
    <div class="card-body p-4">
      <!-- Header -->
      <div class="d-flex align-items-center mb-5">
        <!-- Rating -->
        <div class="position-relative">
          <a id="rating8DropdownInvoker" class="btn btn-xs btn-soft-warning btn-pill" href="javascript:;" role="button"
             aria-controls="rating8Dropdown"
             aria-haspopup="true"
             aria-expanded="false"
             data-unfold-event="hover"
             data-unfold-target="#rating8Dropdown"
             data-unfold-type="css-animation"
             data-unfold-duration="300"
             data-unfold-delay="300"
             data-unfold-hide-on-scroll="true"
             data-unfold-animation-in="slideInUp"
             data-unfold-animation-out="fadeOut">
            4.5
          </a>

          <div id="rating8Dropdown" class="dropdown-menu dropdown-unfold p-3" aria-labelledby="rating8DropdownInvoker" style="width: 190px;">
            <div class="d-flex align-items-center mb-2">
              <span class="text-warning mr-2">4.5</span>
              <ul class="list-inline mb-0">
                <li class="list-inline-item text-warning">
                  <span class="fas fa-star"></span>
                  <span class="fas fa-star"></span>
                  <span class="fas fa-star"></span>
                  <span class="fas fa-star"></span>
                  <span class="fas fa-star-half-alt"></span>
                </li>
              </ul>
            </div>

            <p class="text-dark mb-0">Overal Rating</p>
            <p class="mb-0">Based on 132 reviews</p>
          </div>
        </div>
        <!-- End Rating -->

        <!-- Bookmark -->
        <div class="ml-auto">
          <div class="bookmark-checkbox" data-toggle="tooltip" data-placement="top" title="Save">
            <input type="checkbox" class="bookmark-checkbox-input" id="bookmark6">
            <label class="bookmark-checkbox-label" for="bookmark6"></label>
          </div>
        </div>
        <!-- End Bookmark -->
      </div>
      <!-- End Header -->

      <div class="text-center">
        <!-- Avatar -->
        <div class="u-lg-avatar position-relative mx-auto mb-3">
          <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img9.jpg" alt="Image Description">
          <span class="badge badge-xs badge-outline-success badge-pos badge-pos--bottom-left rounded-circle"></span>
        </div>
        <!-- End Avatar -->

        <!-- Title -->
        <div class="mb-4">
          <h1 class="h5 mb-0">
            <a href="#">Jorge Fields</a>
          </h1>
          <small class="text-secondary">Apps and Web developer</small>
        </div>
        <!-- End Title -->

        <p class="mb-0">I can start working right now and I can WORK FULL TIME on your project during the entire development of your project.</p>
      </div>
    </div>

    <div class="card-footer text-center py-4">
      <!-- Location & Rate -->
      <div class="row align-items-center">
        <div class="col-6 u-ver-divider">
          <h2 class="small text-secondary mb-0">Location</h2>
          <img class="img-fluid max-width-3 rounded-circle align-middle mr-1" src="../../assets/vendor/flag-icon-css/flags/1x1/gb.svg" alt="United Kingdom Flag">
          <span class="align-middle">London</span>
        </div>
        <div class="col-6">
          <h3 class="small text-secondary mb-0">Working rate</h3>
          <span class="align-middle">$35/hr</span>
        </div>
      </div>
      <!-- End Location & Rate -->
    </div>
  </div>
  <!-- End Item -->

  <!-- Item -->
  <div class="card mb-5">
    <div class="card-body p-4">
      <!-- Header -->
      <div class="d-flex align-items-center mb-5">
        <!-- Rating -->
        <div class="position-relative">
          <a id="rating9DropdownInvoker" class="btn btn-xs btn-soft-warning btn-pill" href="javascript:;" role="button"
             aria-controls="rating9Dropdown"
             aria-haspopup="true"
             aria-expanded="false"
             data-unfold-event="hover"
             data-unfold-target="#rating9Dropdown"
             data-unfold-type="css-animation"
             data-unfold-duration="300"
             data-unfold-delay="300"
             data-unfold-hide-on-scroll="true"
             data-unfold-animation-in="slideInUp"
             data-unfold-animation-out="fadeOut">
            4.7
          </a>

          <div id="rating9Dropdown" class="dropdown-menu dropdown-unfold p-3" aria-labelledby="rating9DropdownInvoker" style="width: 190px;">
            <div class="d-flex align-items-center mb-2">
              <span class="text-warning mr-2">4.7</span>
              <ul class="list-inline mb-0">
                <li class="list-inline-item text-warning">
                  <span class="fas fa-star"></span>
                  <span class="fas fa-star"></span>
                  <span class="fas fa-star"></span>
                  <span class="fas fa-star"></span>
                  <span class="fas fa-star-half-alt"></span>
                </li>
              </ul>
            </div>

            <p class="text-dark mb-0">Overal Rating</p>
            <p class="mb-0">Based on 120 reviews</p>
          </div>
        </div>
        <!-- End Rating -->

        <!-- Bookmark -->
        <div class="ml-auto">
          <div class="bookmark-checkbox" data-toggle="tooltip" data-placement="top" title="Save">
            <input type="checkbox" class="bookmark-checkbox-input" id="bookmark7">
            <label class="bookmark-checkbox-label" for="bookmark7"></label>
          </div>
        </div>
        <!-- End Bookmark -->
      </div>
      <!-- End Header -->

      <div class="text-center">
        <!-- Avatar -->
        <span class="btn btn-lg btn-icon btn-soft-primary rounded-circle mb-3">
          <span class="btn-icon__inner">BS</span>
          <span class="badge badge-xs badge-outline-success badge-pos badge-pos--bottom-left rounded-circle"></span>
        </span>
        <!-- End Avatar -->

        <!-- Title -->
        <div class="mb-4">
          <h3 class="h5 mb-0">
            <a href="#">Bertha Sandoval</a>
          </h3>
          <small class="text-secondary">Senior Android, iOS, Web Developer</small>
        </div>
        <!-- End Title -->

        <p class="mb-0">Hello and welcome! I am an Web Developer with more than 5 years of commercial experience in this area.</p>
      </div>
    </div>

    <div class="card-footer text-center py-4">
      <!-- Location & Rate -->
      <div class="row align-items-center">
        <div class="col-6 u-ver-divider">
          <h4 class="small text-secondary mb-0">Location</h4>
          <img class="img-fluid max-width-3 rounded-circle align-middle mr-1" src="../../assets/vendor/flag-icon-css/flags/1x1/gb.svg" alt="United Kingdom Flag">
          <span class="align-middle">London</span>
        </div>
        <div class="col-6">
          <h4 class="small text-secondary mb-0">Working rate</h4>
          <span class="align-middle">$30/hr</span>
        </div>
      </div>
      <!-- End Location & Rate -->
    </div>
  </div>
  <!-- End Item -->

  <!-- Item -->
  <div class="card mb-5">
    <div class="card-body p-4">
      <!-- Header -->
      <div class="d-flex align-items-center mb-5">
        <!-- Rating -->
        <div class="position-relative">
          <a id="rating10DropdownInvoker" class="btn btn-xs btn-soft-warning btn-pill" href="javascript:;" role="button"
             aria-controls="rating10Dropdown"
             aria-haspopup="true"
             aria-expanded="false"
             data-unfold-event="hover"
             data-unfold-target="#rating10Dropdown"
             data-unfold-type="css-animation"
             data-unfold-duration="300"
             data-unfold-delay="300"
             data-unfold-hide-on-scroll="true"
             data-unfold-animation-in="slideInUp"
             data-unfold-animation-out="fadeOut">
            3.9
          </a>

          <div id="rating10Dropdown" class="dropdown-menu dropdown-unfold p-3" aria-labelledby="rating10DropdownInvoker" style="width: 190px;">
            <div class="d-flex align-items-center mb-2">
              <span class="text-warning mr-2">3.9</span>
              <ul class="list-inline mb-0">
                <li class="list-inline-item text-warning">
                  <span class="fas fa-star"></span>
                  <span class="fas fa-star"></span>
                  <span class="fas fa-star-half-alt"></span>
                  <span class="far fa-star"></span>
                  <span class="far fa-star"></span>
                </li>
              </ul>
            </div>

            <p class="text-dark mb-0">Overal Rating</p>
            <p class="mb-0">Based on 85 reviews</p>
          </div>
        </div>
        <!-- End Rating -->

        <!-- Bookmark -->
        <div class="ml-auto">
          <div class="bookmark-checkbox" data-toggle="tooltip" data-placement="top" title="Save">
            <input type="checkbox" class="bookmark-checkbox-input" id="bookmark8">
            <label class="bookmark-checkbox-label" for="bookmark8"></label>
          </div>
        </div>
        <!-- End Bookmark -->
      </div>
      <!-- End Header -->

      <div class="text-center">
        <!-- Avatar -->
        <div class="u-lg-avatar position-relative mx-auto mb-3">
          <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img10.jpg" alt="Image Description">
          <span class="badge badge-xs badge-outline-success badge-pos badge-pos--bottom-left rounded-circle"></span>
        </div>
        <!-- End Avatar -->

        <!-- Title -->
        <div class="mb-4">
          <h3 class="h5 mb-0">
            <a href="#">Ola Nunez</a>
          </h3>
          <small class="text-secondary">Fullstack Web developer</small>
        </div>
        <!-- End Title -->

        <p class="mb-0">I am an expert in Web development with 6+ years of experience, currently working as a team leader, solution architect, and developer.</p>
      </div>
    </div>

    <div class="card-footer text-center py-4">
      <!-- Location & Rate -->
      <div class="row align-items-center">
        <div class="col-6 u-ver-divider">
          <h4 class="small text-secondary mb-0">Location</h4>
          <img class="img-fluid max-width-3 rounded-circle align-middle mr-1" src="../../assets/vendor/flag-icon-css/flags/1x1/gb.svg" alt="United Kingdom Flag">
          <span class="align-middle">Leicester</span>
        </div>
        <div class="col-6">
          <h4 class="small text-secondary mb-0">Working rate</h4>
          <span class="align-middle">$49/hr</span>
        </div>
      </div>
      <!-- End Location & Rate -->
    </div>
  </div>
  <!-- End Item -->
</div>
<!-- End Info -->
Copy
<!-- JS Front -->
<script src="../../assets/js/components/hs.unfold.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(window).on('load', function () {
    // initialization of unfold component
    $.HSCore.components.HSUnfold.init($('[data-unfold-target]'));
  });
</script>
Copy

Info #22

Image Description

Jorge Fields

Apps and Web developer

I can start working right now and I can WORK FULL TIME on your project during the entire development of your project.

Location

United Kingdom Flag London

Hourly

35

Projects

15
4.91 (12k+ reviews)
BS

Bertha Sandoval

Senior Android, iOS, Web Developer

Hello and welcome! I am an Web Developer with more than 5 years of commercial experience in this area.

Location

United Kingdom Flag Oxford

Hourly

30

Projects

15
4.5 (132 reviews) 
<!-- Freelancers -->
<div class="card-deck d-block d-lg-flex">
  <!-- Item -->
  <div class="card mb-5">
    <div class="card-body p-4">
      <!-- Header -->
      <div class="media align-items-center mb-4">
        <!-- Avatar -->
        <div class="u-avatar position-relative mr-3">
          <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img9.jpg" alt="Image Description">
          <span class="badge badge-xs badge-outline-success badge-pos badge-pos--bottom-left rounded-circle"></span>
        </div>
        <!-- End Avatar -->

        <div class="media-body">
          <h1 class="h6 mb-0">
            <a href="employee-profile.html">Jorge Fields</a>
          </h1>
          <small class="text-secondary">Apps and Web developer</small>
        </div>

        <div class="align-self-start ml-auto">
          <!-- Bookmark -->
          <div class="bookmark-checkbox d-inline-block" data-toggle="tooltip" data-placement="top" title="Save">
            <input type="checkbox" class="bookmark-checkbox-input" id="bookmark9">
            <label class="bookmark-checkbox-label" for="bookmark9"></label>
          </div>
          <!-- End Bookmark -->
        </div>
      </div>
      <!-- End Header -->

      <p class="font-size-1">I can start working right now and I can WORK FULL TIME on your project during the entire development of your project.</p>
    </div>

    <div class="card-footer border-top-0 pt-0 px-4 pb-4">
      <div class="d-sm-flex align-items-sm-center">
        <!-- Location -->
        <div class="u-ver-divider u-ver-divider--none-sm pr-4 mr-4 mb-3 mb-sm-0">
          <h2 class="small text-secondary mb-0">Location</h2>
          <img class="img-fluid max-width-3 rounded-circle align-middle mr-1" src="../../assets/vendor/flag-icon-css/flags/1x1/gb.svg" alt="United Kingdom Flag">
          <span class="align-middle font-size-1 font-weight-medium">London</span>
        </div>
        <!-- End Location -->

        <!-- Hourly -->
        <div class="u-ver-divider u-ver-divider--none-sm pr-4 mr-4 mb-3 mb-sm-0">
          <h3 class="small text-secondary mb-0">Hourly</h3>
          <small class="fas fa-clock text-secondary mr-1"></small>
          <span class="align-middle font-size-1 font-weight-medium">35</span>
        </div>
        <!-- End Hourly -->

        <!-- Projects -->
        <div class="u-ver-divider u-ver-divider--none-sm pr-4 mr-4 mb-3 mb-sm-0">
          <h4 class="small text-secondary mb-0">Projects</h4>
          <small class="fas fa-briefcase text-secondary mr-1"></small>
          <span class="align-middle font-size-1 font-weight-medium">15</span>
        </div>
        <!-- End Projects -->

        <!-- Review -->
        <div class="small">
          <div class="text-warning mb-1">
            <span class="fas fa-star"></span>
            <span class="fas fa-star"></span>
            <span class="fas fa-star"></span>
            <span class="fas fa-star"></span>
            <span class="fas fa-star"></span>
          </div>
          <span class="font-weight-semi-bold">4.91</span>
          <span class="text-muted">(12k+ reviews)</span>
        </div>
        <!-- End Review -->
      </div>
    </div>
  </div>
  <!-- End Item -->

  <!-- Item -->
  <div class="card mb-5">
    <div class="card-body p-4">
      <!-- Header -->
      <div class="media align-items-center mb-4">
        <!-- Avatar -->
        <span class="btn btn-icon btn-soft-primary rounded-circle mr-4">
          <span class="btn-icon__inner">BS</span>
          <span class="badge badge-xs badge-outline-success badge-pos badge-pos--bottom-left rounded-circle"></span>
        </span>
        <!-- End Avatar -->

        <div class="media-body">
          <h3 class="h6 mb-0">
            <a href="employee-profile.html">Bertha Sandoval</a>
          </h3>
          <small class="text-secondary">Senior Android, iOS, Web Developer</small>
        </div>

        <div class="align-self-start ml-auto">
          <!-- Bookmark -->
          <div class="bookmark-checkbox d-inline-block" data-toggle="tooltip" data-placement="top" title="Save">
            <input type="checkbox" class="bookmark-checkbox-input" id="bookmark10">
            <label class="bookmark-checkbox-label" for="bookmark10"></label>
          </div>
          <!-- End Bookmark -->
        </div>
      </div>
      <!-- End Header -->

      <p class="font-size-1">Hello and welcome! I am an Web Developer with more than 5 years of commercial experience in this area.</p>
    </div>

    <div class="card-footer border-top-0 pt-0 px-4 pb-4">
      <div class="d-sm-flex align-items-sm-center">
        <!-- Location -->
        <div class="u-ver-divider u-ver-divider--none-sm pr-4 mr-4 mb-3 mb-sm-0">
          <h4 class="small text-secondary mb-0">Location</h4>
          <img class="img-fluid max-width-3 rounded-circle align-middle mr-1" src="../../assets/vendor/flag-icon-css/flags/1x1/gb.svg" alt="United Kingdom Flag">
          <span class="align-middle font-size-1 font-weight-medium">Oxford</span>
        </div>
        <!-- End Location -->

        <!-- Hourly -->
        <div class="u-ver-divider u-ver-divider--none-sm pr-4 mr-4 mb-3 mb-sm-0">
          <h4 class="small text-secondary mb-0">Hourly</h4>
          <small class="fas fa-clock text-secondary mr-1"></small>
          <span class="align-middle font-size-1 font-weight-medium">30</span>
        </div>
        <!-- End Hourly -->

        <!-- Projects -->
        <div class="u-ver-divider u-ver-divider--none-sm pr-4 mr-4 mb-3 mb-sm-0">
          <h4 class="small text-secondary mb-0">Projects</h4>
          <small class="fas fa-briefcase text-secondary mr-1"></small>
          <span class="align-middle font-size-1 font-weight-medium">15</span>
        </div>
        <!-- End Projects -->

        <!-- Success Rate -->
        <div class="mr-3">
          <!-- Review -->
          <div class="small">
            <div class="text-warning mb-1">
              <span class="fas fa-star"></span>
              <span class="fas fa-star"></span>
              <span class="fas fa-star"></span>
              <span class="fas fa-star"></span>
              <span class="far fa-star"></span>
            </div>
            <span class="font-weight-semi-bold">4.5</span>
            <span class="text-muted">(132 reviews)</span>
          </div>
          <!-- End Review -->
        </div>
        <!-- End Success Rate -->
      </div>
    </div>
  </div>
  <!-- End Item -->
</div>
<!-- End Freelancers -->
Copy

Info #23

Image Description

UI and UX designer

4.91 (12k+ reviews)
Apply On Company Site
Viewed 3,910 times 
<!-- Hero Section -->
<div class="container">
  <div class="border-bottom space-top-2">
    <div class="media mb-5">
      <!-- Avatar -->
      <div class="u-lg-avatar mr-4">
        <img class="img-fluid rounded-circle" src="../../assets/img/160x160/img3.jpg" alt="Image Description">
      </div>
      <!-- End Avatar -->

      <div class="media-body">
        <div class="row">
          <div class="col-lg-6 mb-3 mb-lg-0">
            <h1 class="h4 mb-1">UI and UX designer</h1>

            <!-- Review -->
            <span class="text-warning font-size-1">
              <span class="fas fa-star"></span>
              <span class="fas fa-star"></span>
              <span class="fas fa-star"></span>
              <span class="fas fa-star"></span>
              <span class="fas fa-star"></span>
            </span>
            <span class="font-weight-semi-bold ml-2">4.91</span>
            <small class="text-muted">(12k+ reviews)</small>
            <!-- End Review -->
          </div>

          <div class="col-lg-6 text-lg-right">
            <div class="d-flex justify-content-md-end align-items-center">
              <!-- Bookmark -->
              <div class="d-inline-block mr-2">
                <div class="bookmark-checkbox" data-toggle="tooltip" data-placement="top" title="Save this job">
                  <input type="checkbox" class="bookmark-checkbox-input" id="bookmark11">
                  <label class="bookmark-checkbox-label" for="bookmark11"></label>
                </div>
              </div>
              <!-- End Bookmark -->

              <a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">Apply On Company Site</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Viewed Info -->
    <div class="space-bottom-1">
      <div class="small text-right text-secondary">
        <span class="fas fa-eye mr-1"></span>
        Viewed 3,910 times
      </div>
    </div>
    <!-- End Viewed Info -->
  </div>
</div>
<!-- End Hero Section -->
Copy