Portfolio

These sections showcase a collection of work, projects, or case studies created by an individual or organization.

Overview

"Portfolio" blocks are sections on websites or applications that showcase a collection of work, projects, or case studies created by an individual or organization. They help demonstrate expertise, creativity, and experience, giving users insight into the quality and scope of past or ongoing work.

Some of these examples make use of Swiper.js, a mobile-friendly slider library. To include Swiper in your project, add the following CDN links to your HTML file.

JavaScript

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

CSS

<link href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" rel="stylesheet" />

Examples

Below are a few examples of “Portfolio” sections.

Example 1

Our Portfolio

Showcasing the work we’re proud of

Portfolio Image
Task Hive
Productivity

Organize tasks, projects, and teams with seamless cross-platform access.

Portfolio Image
Snap Audit
Security

Automated vulnerability scanner for websites and app monitoring.

Portfolio Image
Code Nest
Tools

Collaborative code editor with real-time syncing and suggestions.

Portfolio Image
API Bridge
Integration

Connect and manage multiple APIs with low-code custom workflows.

Portfolio Image
Pixel Press
Website Builder

Drag-and-drop website builder optimized for speed and SEO.

Portfolio Image
Dev Flow
Management

Agile-friendly platform for tracking sprints, bugs and workflows. 

<section class="bg-body py-5">
  <div class="container">
      <div class="text-center">
          <h1 class="text-primary fw-semibold text-uppercase fs-5 mb-2">Our Portfolio</h1>
          <h2 class="mb-4">Showcasing the work we’re proud of</h2>
      </div>
      <div class="swiper ex1Swiper">
          <div class="swiper-wrapper mb-5">
              <div class="swiper-slide" style="height: auto;">
                  <div class="card bg-secondary shadow border-0 h-100 p-0">
                      <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="card-img-top" alt="Portfolio Image">
                      <div class="card-body p-3">
                          <h5 class="card-title mb-2">Task Hive</h5>
                          <span class="badge text-muted text-uppercase border shadow mb-2">Productivity</span>
                          <p class="text-muted mb-0">Organize tasks, projects, and teams with seamless cross-platform access.</p>
                      </div>
                  </div>
              </div>
              <div class="swiper-slide" style="height: auto;">
                  <div class="card bg-secondary shadow border-0 h-100 p-0">
                      <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="card-img-top" alt="Portfolio Image">
                      <div class="card-body p-3">
                          <h5 class="card-title mb-2">Snap Audit</h5>
                          <span class="badge text-muted text-uppercase border shadow mb-2">Security</span>
                          <p class="text-muted mb-0">Automated vulnerability scanner for websites and app monitoring.</p>
                      </div>
                  </div>
              </div>
              <div class="swiper-slide" style="height: auto;">
                  <div class="card bg-secondary shadow border-0 h-100 p-0">
                      <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="card-img-top" alt="Portfolio Image">
                      <div class="card-body p-3">
                          <h5 class="card-title mb-2">Code Nest</h5>
                          <span class="badge text-muted text-uppercase border shadow mb-2">Tools</span>
                          <p class="text-muted mb-0">Collaborative code editor with real-time syncing and suggestions.</p>
                      </div>
                  </div>
              </div>
              <div class="swiper-slide" style="height: auto;">
                  <div class="card bg-secondary shadow border-0 h-100 p-0">
                      <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="card-img-top" alt="Portfolio Image">
                      <div class="card-body p-3">
                          <h5 class="card-title mb-2">API Bridge</h5>
                          <span class="badge text-muted text-uppercase border shadow mb-2">Integration</span>
                          <p class="text-muted mb-0">Connect and manage multiple APIs with low-code custom workflows.</p>
                      </div>
                  </div>
              </div>
              <div class="swiper-slide" style="height: auto;">
                  <div class="card bg-secondary shadow border-0 h-100 p-0">
                      <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="card-img-top" alt="Portfolio Image">
                      <div class="card-body p-3">
                          <h5 class="card-title mb-2">Pixel Press</h5>
                          <span class="badge text-muted text-uppercase border shadow mb-2">Website Builder</span>
                          <p class="text-muted mb-0">Drag-and-drop website builder optimized for speed and SEO.</p>
                      </div>
                  </div>
              </div>
              <div class="swiper-slide" style="height: auto;">
                  <div class="card bg-secondary shadow border-0 h-100 p-0">
                      <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="card-img-top" alt="Portfolio Image">
                      <div class="card-body p-3">
                          <h5 class="card-title mb-2">Dev Flow</h5>
                          <span class="badge text-muted text-uppercase border shadow mb-2">Management</span>
                          <p class="text-muted mb-0">Agile-friendly platform for tracking sprints, bugs and workflows.</p>
                      </div>
                  </div>
              </div>
          </div>
          <div class="swiper-pagination"></div>
      </div>
  </div>
</section>
  .swiper-pagination-bullet {
    background: var(--bs-primary);
  }
  .swiper-pagination-bullet-active {
    background: var(--bs-primary);
  }

document.addEventListener('DOMContentLoaded', () => {
  var swiper = new Swiper(".ex1Swiper", {
      slidesPerView: 1,
      spaceBetween: 20,
      pagination: {
          el: ".swiper-pagination",
          clickable: true,
      },
      autoplay: {
          delay: 3000,
          disableOnInteraction: false,
      },
      breakpoints: {
          576: {
              slidesPerView: 2,
              spaceBetween: 30,
          },
          768: {
              slidesPerView: 3,
              spaceBetween: 30,
          }
      }
  });
});

Example 2

Our Portfolio

Showcasing the work we’re proud of

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet.

Portfolio Image
Task Hive
Productivity

Organize tasks, projects, and teams with seamless cross-platform access.

See case study
Portfolio Image
Snap Audit
Security

Automated vulnerability scanner for websites and app monitoring.

See case study
Portfolio Image
Code Nest
Tools

Collaborative code editor with real-time syncing and suggestions.

See case study
Portfolio Image
API Bridge
Integration

Connect and manage multiple APIs with low-code custom workflows.

See case study
Portfolio Image
Pixel Press
Website Builder

Drag-and-drop website builder optimized for speed and SEO.

See case study
Portfolio Image
Dev Flow
Management

Agile-friendly platform for tracking sprints, bugs and workflows.

See case study 
<section class="bg-body py-5">
  <div class="container">
      <div class="row mb-4">
          <div class="col-md-6 mb-2 mb-md-0">
              <h1 class="text-primary fw-semibold text-uppercase fs-5 mb-2">Our Portfolio</h1>
              <h2 class="mb-0">Showcasing the work we’re proud of</h2>
          </div>
          <div class="col-md-6">
              <p class="text-muted mb-0">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero
              corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet.
              </p>
          </div>
      </div>
      <div class="row g-3 g-lg-4 mb-4">
          <div class="col-sm-6 col-md-4">
              <div class="card bg-secondary shadow border-0 h-100 p-0">
                  <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="card-img-top" alt="Portfolio Image">
                  <div class="card-body p-3">
                      <h5 class="card-title mb-2">Task Hive</h5>
                      <span class="badge text-muted text-uppercase border shadow mb-2">Productivity</span>
                      <p class="text-muted mb-2">Organize tasks, projects, and teams with seamless cross-platform access.</p>
                      <a href="#" class="text-decoration-none text-primary">See case study <i class="ri-arrow-right-line"></i></a>
                  </div>
              </div>
          </div>
          <div class="col-sm-6 col-md-4">
              <div class="card bg-secondary shadow border-0 h-100 p-0">
                  <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="card-img-top" alt="Portfolio Image">
                  <div class="card-body p-3">
                      <h5 class="card-title mb-2">Snap Audit</h5>
                      <span class="badge text-muted text-uppercase border shadow mb-2">Security</span>
                      <p class="text-muted mb-2">Automated vulnerability scanner for websites and app monitoring.</p>
                      <a href="#" class="text-decoration-none text-primary">See case study <i class="ri-arrow-right-line"></i></a>
                  </div>
              </div>
          </div>
          <div class="col-sm-6 col-md-4">
              <div class="card bg-secondary shadow border-0 h-100 p-0">
                  <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="card-img-top" alt="Portfolio Image">
                  <div class="card-body p-3">
                      <h5 class="card-title mb-2">Code Nest</h5>
                      <span class="badge text-muted text-uppercase border shadow mb-2">Tools</span>
                      <p class="text-muted mb-2">Collaborative code editor with real-time syncing and suggestions.</p>
                      <a href="#" class="text-decoration-none text-primary">See case study <i class="ri-arrow-right-line"></i></a>
                  </div>
              </div>
          </div>
          <div class="col-sm-6 col-md-4">
              <div class="card bg-secondary shadow border-0 h-100 p-0">
                  <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="card-img-top" alt="Portfolio Image">
                  <div class="card-body p-3">
                      <h5 class="card-title mb-2">API Bridge</h5>
                      <span class="badge text-muted text-uppercase border shadow mb-2">Integration</span>
                      <p class="text-muted mb-2">Connect and manage multiple APIs with low-code custom workflows.</p>
                      <a href="#" class="text-decoration-none text-primary">See case study <i class="ri-arrow-right-line"></i></a>
                  </div>
              </div>
          </div>
          <div class="col-sm-6 col-md-4">
              <div class="card bg-secondary shadow border-0 h-100 p-0">
                  <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="card-img-top" alt="Portfolio Image">
                  <div class="card-body p-3">
                      <h5 class="card-title mb-2">Pixel Press</h5>
                      <span class="badge text-muted text-uppercase border shadow mb-2">Website Builder</span>
                      <p class="text-muted mb-2">Drag-and-drop website builder optimized for speed and SEO.</p>
                      <a href="#" class="text-decoration-none text-primary">See case study <i class="ri-arrow-right-line"></i></a>
                  </div>
              </div>
          </div>
          <div class="col-sm-6 col-md-4">
              <div class="card bg-secondary shadow border-0 h-100 p-0">
                  <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="card-img-top" alt="Portfolio Image">
                  <div class="card-body p-3">
                      <h5 class="card-title mb-2">Dev Flow</h5>
                      <span class="badge text-muted text-uppercase border shadow mb-2">Management</span>
                      <p class="text-muted mb-2">Agile-friendly platform for tracking sprints, bugs and workflows.</p>
                      <a href="#" class="text-decoration-none text-primary">See case study <i class="ri-arrow-right-line"></i></a>
                  </div>
              </div>
          </div>
      </div>
      <div class="text-center text-md-end">
          <button class="btn btn-outline-secondary">See all projects<i class="ri-arrow-right-line ms-2"></i></button>
      </div>
  </div>
</section>

Example 3

Our Portfolio

Showcasing the work we’re proud of

Productivity

Task Hive

Organize tasks, projects, and teams with seamless cross-platform access.

  • Top-notch security
  • 24/7 support
  • Regular updates
  • Multi-language
See case study
Portfolio Image

Security

Snap Audit

Automated vulnerability scanner for websites and app monitoring.

  • Top-notch security
  • 24/7 support
  • Regular updates
  • Multi-language
See case study
Portfolio Image 
<section class="bg-body py-5">
  <div class="container">
      <div class="text-center">
          <h1 class="text-primary fw-semibold text-uppercase fs-5 mb-2">Our Portfolio</h1>
          <h2 class="mb-4">Showcasing the work we’re proud of</h2>
      </div>
      <div class="row align-items-center bg-secondary shadow rounded-4 p-4 mb-4">
          <div class="col-md-6 mb-4 mb-md-0 px-0">
              <h3 class="text-primary fw-semibold text-uppercase fs-6 mb-2">Productivity</h3>
              <h4 class="fs-2 mb-2">Task Hive</h4>
              <p class="mb-2">Organize tasks, projects, and teams with seamless cross-platform access.</p>
              <div class="row">
                  <div class="col-md-6">
                      <ul class="list-unstyled mb-2">
                          <li class="mb-2"><i class="ri-check-line text-success"></i> Top-notch security</li>
                          <li><i class="ri-check-line text-success"></i> 24/7 support</li>
                      </ul>
                  </div>
                  <div class="col-md-6">
                      <ul class="list-unstyled mb-2">
                          <li class="mb-2"><i class="ri-check-line text-success"></i> Regular updates</li>
                          <li><i class="ri-check-line text-success"></i> Multi-language</li>
                      </ul>
                  </div>
              </div>
              <a href="#" class="link-primary text-decoration-none">See case study<i class="ri-arrow-right-line ms-2"></i></a>
          </div>
          <div class="col-md-5 offset-md-1 px-0">
              <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="img-fluid rounded-4" alt="Portfolio Image">
          </div>
      </div>
      <div class="row align-items-center bg-secondary shadow rounded-4 p-4">
          <div class="col-md-6 offset-md-1 order-1 order-md-2 mb-4 mb-md-0 px-0">
              <h3 class="text-primary fw-semibold text-uppercase fs-6 mb-2">Security</h3>
              <h4 class="fs-2 mb-2">Snap Audit</h4>
              <p class="mb-2">Automated vulnerability scanner for websites and app monitoring.</p>
              <div class="row">
                  <div class="col-md-6">
                      <ul class="list-unstyled mb-2">
                          <li class="mb-2"><i class="ri-check-line text-success"></i> Top-notch security</li>
                          <li><i class="ri-check-line text-success"></i> 24/7 support</li>
                      </ul>
                  </div>
                  <div class="col-md-6">
                      <ul class="list-unstyled mb-2">
                          <li class="mb-2"><i class="ri-check-line text-success"></i> Regular updates</li>
                          <li><i class="ri-check-line text-success"></i> Multi-language</li>
                      </ul>
                  </div>
              </div>
              <a href="#" class="link-primary text-decoration-none">See case study<i class="ri-arrow-right-line ms-2"></i></a>
          </div>
          <div class="col-md-5 order-2 order-md-1 px-0">
              <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="img-fluid rounded-4" alt="Portfolio Image">
          </div>
      </div>
  </div>
</section>

Example 4

Portfolio

Projects that tell our story

Portfolio Image
Task Hive
Productivity

Organize tasks, projects, and teams with seamless cross-platform access.

Check project
Portfolio Image
Snap Audit
Security

Automated vulnerability scanner for websites and app monitoring.

Check project
Portfolio Image
Code Nest
Tools

Collaborative code editor with real-time syncing and suggestions.

Check project
Portfolio Image
API Bridge
Integration

Connect and manage multiple APIs with low-code custom workflows.

Check project 
<section class="bg-body py-5">
  <div class="container">
      <div class="text-center">
          <h1 class="text-primary fw-semibold text-uppercase fs-5 mb-2">Portfolio</h1>
          <h2 class="mb-4">Projects that tell <span class="underline primary">our story</span></h2>
      </div>
      <div class="row g-3 g-md-4 g-lg-5">
          <div class="col-md-6">
              <figure class="img-lift pt-3 mb-2">
                  <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="img-fluid rounded-4" alt="Portfolio Image">
              </figure>
              <div class="d-flex align-items-center gap-2 mb-2">
                  <h5 class="fs-5 mb-0">Task Hive</h5>
                  <span class="badge text-muted bg-secondary text-uppercase border shadow">Productivity</span>
              </div>
              <p class="text-muted mb-2">Organize tasks, projects, and teams with seamless cross-platform access.</p>
              <a href="#" class="text-decoration-none link-primary">Check project<i class="ri-arrow-right-line ms-2"></i></a>
          </div>
          <div class="col-md-6">
              <figure class="img-lift pt-3 mb-2">
                  <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="img-fluid rounded-4" alt="Portfolio Image">
              </figure>
              <div class="d-flex align-items-center gap-2 mb-2">
                  <h5 class="fs-5 mb-0">Snap Audit</h5>
                  <span class="badge text-muted bg-secondary text-uppercase border shadow">Security</span>
              </div>
              <p class="text-muted mb-2">Automated vulnerability scanner for websites and app monitoring.</p>
              <a href="#" class="text-decoration-none link-primary">Check project<i class="ri-arrow-right-line ms-2"></i></a>
          </div>
          <div class="col-md-6">
              <figure class="img-lift pt-3 mb-2">
                  <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="img-fluid rounded-4" alt="Portfolio Image">
              </figure>
              <div class="d-flex align-items-center gap-2 mb-2">
                  <h5 class="fs-5 mb-0">Code Nest</h5>
                  <span class="badge text-muted bg-secondary text-uppercase border shadow">Tools</span>
              </div>
              <p class="text-muted mb-2">Collaborative code editor with real-time syncing and suggestions.</p>
              <a href="#" class="text-decoration-none link-primary">Check project<i class="ri-arrow-right-line ms-2"></i></a>
          </div>
          <div class="col-md-6">
              <figure class="img-lift pt-3 mb-2">
                  <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="img-fluid rounded-4" alt="Portfolio Image">
              </figure>
              <div class="d-flex align-items-center gap-2 mb-2">
                  <h5 class="fs-5 mb-0">API Bridge</h5>
                  <span class="badge text-muted bg-secondary text-uppercase border shadow">Integration</span>
              </div>
              <p class="text-muted mb-2">Connect and manage multiple APIs with low-code custom workflows.</p>
              <a href="#" class="text-decoration-none link-primary">Check project<i class="ri-arrow-right-line ms-2"></i></a>
          </div>
      </div>
  </div>
</section>

Example 5

What We’ve Built

Crafted with care, designed to impress

Portfolio Image
Task Hive
Productivity
Portfolio Image
Snap Audit
Security
Portfolio Image
Code Nest
Tools
Portfolio Image
API Bridge
Integration
Portfolio Image
Dev Flow
Management 
<section class="bg-body py-5">
  <div class="container">
      <div class="text-center">
          <h1 class="text-primary fw-semibold text-uppercase fs-5 mb-2">What We’ve Built</h1>
          <h2 class="mb-4">Crafted with care, designed to impress</h2>
      </div>
      <div class="swiper ex5Swiper">
          <div class="swiper-wrapper mb-5">
              <div class="swiper-slide" style="height: auto;">
                  <div class="card bg-secondary shadow border-0 h-100 p-0">
                      <img src="https://placehold.co/300x200/31343C/EEE?text=Placeholder" class="card-img-top" alt="Portfolio Image">
                      <div class="card-body d-flex align-items-center justify-content-between p-3">
                          <h5 class="card-title mb-0">Task Hive</h5>
                          <span class="badge text-muted text-uppercase border shadow">Productivity</span>
                      </div>
                  </div>
              </div>
              <div class="swiper-slide" style="height: auto;">
                  <div class="card bg-secondary shadow border-0 h-100 p-0">
                      <img src="https://placehold.co/300x200/31343C/EEE?text=Placeholder" class="card-img-top" alt="Portfolio Image">
                      <div class="card-body d-flex align-items-center justify-content-between p-3">
                          <h5 class="card-title mb-0">Snap Audit</h5>
                          <span class="badge text-muted text-uppercase border shadow">Security</span>
                      </div>
                  </div>
              </div>
              <div class="swiper-slide" style="height: auto;">
                  <div class="card bg-secondary shadow border-0 h-100 p-0">
                      <img src="https://placehold.co/300x200/31343C/EEE?text=Placeholder" class="card-img-top" alt="Portfolio Image">
                      <div class="card-body d-flex align-items-center justify-content-between p-3">
                          <h5 class="card-title mb-0">Code Nest</h5>
                          <span class="badge text-muted text-uppercase border shadow">Tools</span>
                      </div>
                  </div>
              </div>
              <div class="swiper-slide" style="height: auto;">
                  <div class="card bg-secondary shadow border-0 h-100 p-0">
                      <img src="https://placehold.co/300x200/31343C/EEE?text=Placeholder" class="card-img-top" alt="Portfolio Image">
                      <div class="card-body d-flex align-items-center justify-content-between p-3">
                          <h5 class="card-title mb-0">API Bridge</h5>
                          <span class="badge text-muted text-uppercase border shadow">Integration</span>
                      </div>
                  </div>
              </div>
              <div class="swiper-slide" style="height: auto;">
                  <div class="card bg-secondary shadow border-0 h-100 p-0">
                      <img src="https://placehold.co/300x200/31343C/EEE?text=Placeholder" class="card-img-top" alt="Portfolio Image">
                      <div class="card-body d-flex align-items-center justify-content-between p-3">
                          <h5 class="card-title mb-0">Dev Flow</h5>
                          <span class="badge text-muted text-uppercase border shadow">Management</span>
                      </div>
                  </div>
              </div>
          </div>
          <div class="swiper-pagination"></div>
      </div>
  </div>
</section>
  .swiper-pagination-bullet {
    background: var(--bs-primary);
  }
  .swiper-pagination-bullet-active {
    background: var(--bs-primary);
  }

document.addEventListener('DOMContentLoaded', () => {
  var swiper = new Swiper(".ex5Swiper", {
      slidesPerView: 1,
      spaceBetween: 20,
      pagination: {
          el: ".swiper-pagination",
          clickable: true,
      },
      autoplay: {
          delay: 3000,
          disableOnInteraction: false,
      },
      breakpoints: {
          576: {
              slidesPerView: 2,
              spaceBetween: 20,
          },
          768: {
              slidesPerView: 3,
              spaceBetween: 20,
          }
      }
  });
});

Example 6

What We’ve Built

Projects that tell our story

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Portfolio Image
Top-notch security

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Multi-language interface

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Portfolio Image 
<section class="bg-body py-5">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-6 text-center text-lg-start">
        <h1 class="text-primary fw-semibold text-uppercase fs-5 mb-2">What We’ve Built</h1>
        <h2 class="mb-2">Projects that tell our story</h2>
        <p class="text-muted mb-3">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        <button class="btn btn-primary">Learn more<i class="ri-arrow-right-line ms-2"></i></button>
      </div>
      <div class="col-lg-6 mt-4 mt-lg-0">
        <div class="row g-2">
          <div class="col-sm-6">
            <figure class="img-grayscale h-100">
              <a href="#">
                <img
                  src="https://placehold.co/540x540/747ED1/FFF?text=Placeholder"
                  class="img-fluid object-fit-cover rounded-4 w-100 h-100"
                  alt="Portfolio Image"
                />
              </a>
            </figure>
          </div>
          <div class="col-sm-6">
            <div class="card bg-secondary text-center border-0 shadow h-100">
              <div class="card-body d-flex align-items-center">
                <div>
                  <i class="ri-shield-check-fill text-primary display-5"></i>
                  <h6 class="h5 my-2">Top-notch security</h6>
                  <p class="text-muted mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-6 order-4 order-sm-3">
            <div class="card bg-secondary text-center border-0 shadow h-100">
              <div class="card-body d-flex align-items-center">
                <div>
                  <i class="ri-global-fill text-primary display-5"></i>
                  <h6 class="h5 my-2">Multi-language interface</h6>
                  <p class="text-muted mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-6 order-3 order-sm-4">
            <figure class="img-grayscale h-100">
              <a href="#">
                <img
                  src="https://placehold.co/540x540/747ED1/FFF?text=Placeholder"
                  class="img-fluid object-fit-cover rounded-4 w-100 h-100"
                  alt="Portfolio Image"
                />
              </a>
            </figure>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
Quick Links
Home Docs
Admin
Admin Dashboard Example
Themes
Website Example (Classic)
Website Example (Modern)
Dog Breeder 1 (Beagle)
Dog Breeder 2 (Golden Retriever)
Dog Breeder 3 (French Bulldog)
Dog Breeder 4 (Poodle)
Dog Breeder 5 (German Shepherd)
Dog Breeder 6 (Yorkshire Terrier)
Cat Breeder 1 (Persian)
Cat Breeder 2 (Siamese)
Cat Breeder 3 (Bengal)
Cat Breeder 4 (Abyssinian)
Cat Breeder 5 (Himalayan)
HOA 1
HOA 2
HOA 3
Real Estate 1
Real Estate 2
Other
AsteroBuilder
AsteroDigital
Paanstation