Portfolio components

<!-- Basic card -->
<a class="cs-portfolio-card-scale" href="#">
  <div class="cs-portfolio-card-img">
    <img src="path-to-image" alt="Card image">
  </div>
  <div class="cs-portfolio-card-body">
    <h3 class="cs-portfolio-card-title">Mobile App Icon Design</h3>
    <span class="font-size-sm text-muted">Mobile App Design</span>
  </div>
</a>

<!-- Basic card with video inner -->
<a class="cs-portfolio-card-scale cs-portfolio-card-video" href="#">
  <div class="cs-portfolio-card-img">
    <img src="path-to-image" alt="Card image">
    <span class="cs-video-btn"></span>
  </div>
  <div class="cs-portfolio-card-body">
    <h3 class="cs-portfolio-card-title">Abstract Shape Design</h3>
    <span class="font-size-sm text-muted">Video Production</span>
  </div>
</a>

<!-- Slide up hover effect -->
<a class="cs-portfolio-card-slide" href="#">
  <div class="cs-portfolio-card-img">
    <img src="path-to-image" alt="Card image">
  </div>
  <div class="cs-portfolio-card-body">
    <h3 class="cs-portfolio-card-title">Red Finger Building</h3>
    <div class="font-size-sm text-muted">Business Centers</div>
    <div class="btn btn-outline-primary text-uppercase">View project</div>
  </div>
</a>

<!-- Slide up hover effect with video indicator -->
<a class="cs-portfolio-card-slide cs-portfolio-card-video" href="#">
  <div class="cs-portfolio-card-img">
    <img src="path-to-image" alt="Card image">
    <span class="cs-video-btn"></span>
  </div>
  <div class="cs-portfolio-card-body">
    <h3 class="cs-portfolio-card-title">Cubes Building</h3>
    <div class="font-size-sm text-muted">Business Centers</div>
    <div class="btn btn-outline-primary text-uppercase">View project</div>
  </div>
</a>

<!-- Hover fade-in effect (with radial progress) -->
<a class="cs-image-fade card card-hover box-shadow" href="#" style="background-image: url(path-to-background-image);">
  <div class="cs-image-inner d-flex flex-column justify-content-between h-100 p-3">
    <div class="card-header border-0 pb-0">
      <img class="cs-inner-img d-block mb-2" src="path-to-image" alt="Logo" style="max-width: 80px;"/>
      <span class="cs-inner-text text-sm">Charity organization</span>
      <hr class="hr-gradient mt-4 mx-n4">
    </div>
    <div class="card-body">
      <p class="cs-inner-text mb-0">Createx SEO Agency helped Jive Software increase their MQL to SQL conversion rate by 300%.</p>
    </div>
    <div class="card-footer border-0 d-flex">
      <div class="media align-items-center mr-4 pr-2">
        <div class="cs-progress-radial mr-2 pr-1 pl-0" style="width: 40px;" data-progress-radial='{
          "strokeWidth": 8,
          "trailWidth": 8,
          "color": "#f52f6e",
          "trailColor": "rgba(245,47,110, .3)",
          "progress": 0.7
        }'>
        </div>
        <div class="media-body">
          <h5 class="mb-n1 cs-inner-text">70%</h5>
          <span class="cs-inner-text font-size-xs">Open Rate</span>
        </div>
      </div>
      <div class="media align-items-center">
        <div class="cs-progress-radial mr-2 pr-1 pl-0" style="width: 40px;" data-progress-radial='{
          "strokeWidth": 8,
          "trailWidth": 8,
          "color": "#f89828",
          "trailColor": "rgba(248,152,40, .3)",
          "progress": 1
        }'>
        </div>
        <div class="media-body">
          <h5 class="mb-n1 cs-inner-text">200%</h5>
          <span class="cs-inner-text font-size-xs">Growth in sales</span>
        </div>
      </div>
    </div>
  </div>
</a>

<!-- Card with overlaid image & radial progress -->
<div class="card card-hover box-shadow overflow-hidden">
  <a class="card-header position-relative p-4 bg-size-cover bg-position-center bg-no-repeat text-decoration-none" href="#" style="background-image: url(path-to-background-image);">
    <div class="bg-overlay opacity-60"></div>
    <div class="bg-overlay-content mb-5 px-3 pb-2">
      <img class="card-logo d-block mb-1" src="path-to-image" alt="Logo" width="120">
      <span class="card-text font-size-sm text-white">Electric company</span>
    </div>
  </a>
  <div class="card-body mx-n2 px-5 pb-3">
    <div class="d-flex mb-4">
      <div class="media align-items-center mr-4 pr-2">
        <div class="cs-progress-radial mr-2 pr-1 pl-0" style="width: 40px;" data-progress-radial='{
          "strokeWidth": 8,
          "trailWidth": 8,
          "color": "#03cea4",
          "trailColor": "rgba(3,206,164, .3)",
          "progress": 0.8
        }'>
        </div>
        <div class="media-body">
          <h5 class="mb-n1 card-title">80%</h5>
          <span class="card-text font-size-xs">Open Rate</span>
        </div>
      </div>
      <div class="media align-items-center">
        <div class="media-body">
          <h5 class="mb-n1 card-title">1,840</h5>
          <span class="card-text font-size-xs">Target investors</span>
        </div>
      </div>
    </div>
    <hr class="hr-gradient mx-n5 mb-3 px-1">
    <p class="mb-1 pt-1 text-muted">With an advanced A/B testing and usability analysis, Createx SEO Agency helps Lovato see a 200% increase in conversion rate.</p>
  </div>
  <div class="card-footer mx-n2 px-5 pt-0 border-0">
    <div class="h6 mb-2">
      <a class="nav-link py-3" href="#">View case</a>
      <i class="cxi-arrow-right text-primary align-middle h5 mb-0 ml-2"></i>
    </div>
  </div>
</div>