Portfolio components

<!-- Portfolio card vertical layout style 1 (Grid view) -->
<article class="card-hover zoom-effect" style="max-width: 480px;">
  <div class="zoom-effect-wrapper rounded-5">
    <div class="zoom-effect-img">
      <img src="assets/img/portfolio/grid/02.jpg" alt="Image">
    </div>
  </div>
  <div class="pt-4 mt-lg-2">
    <h2 class="h5 mb-2">
      <a href="#" class="stretched-link text-nav">Design for eco bags and merch</a>
    </h2>
    <span class="fs-sm text-muted opacity-0 d-none d-sm-block">Product design</span>
    <span class="fs-sm text-muted d-sm-none">Product design</span>
  </div>
</article>

// Portfolio card vertical layout style 1 (Grid view)
article(style="max-width: 480px;").card-hover.zoom-effect
  .zoom-effect-wrapper.rounded-5
    .zoom-effect-img
      img(src="assets/img/portfolio/grid/02.jpg", alt="Image")
  .pt-4.mt-lg-2
    h2.h5.mb-2
      a(href="#").stretched-link.text-nav
        | Design for eco bags and merch
    span.fs-sm.text-muted.opacity-0.d-none.d-sm-block Product design
    span.fs-sm.text-muted.d-sm-none Product design

<!-- Portfolio card vertical layout style 2 (Grid view) -->
<article class="zoom-effect position-relative border-bottom pb-3" style="max-width: 480px;">
  <div class="zoom-effect-wrapper">
    <div class="zoom-effect-img">
      <img src="assets/img/portfolio/grid/12.jpg" alt="Image">
    </div>
  </div>
  <div class="pt-4 mt-lg-2">
    <h2 class="h4 mb-2">
      <a href="#" class="stretched-link">The Studio</a>
    </h2>
    <div class="d-flex justify-content-between fs-lg text-muted">
      <span>Web design</span>
      <span>2021</span>
    </div>
  </div>
</article>

// Portfolio card vertical layout style 2 (Grid view)
article(style="max-width: 480px;").zoom-effect.position-relative.border-bottom.pb-3
  .zoom-effect-wrapper
    .zoom-effect-img
      img(src="assets/img/portfolio/grid/12.jpg", alt="Image")
  .pt-4.mt-lg-2
    h2.h4.mb-2
      a(href="#").stretched-link
        | The Studio
    .d-flex.justify-content-between
      span.fs-lg.text-muted Web design
      span.fs-lg.text-muted 2021

<!-- Portfolio card with flipping effect (Grid view) -->
<a href="#" class="card-flip" style="max-width: 316px;">
  <div class="card-flip-inner">
    <div class="card-flip-front" style="background-image: url(assets/img/landing/creative-agency/services/03.jpg);">
      <div class="d-flex flex-column h-100 ignore-dark-mode">
        <h2 class="fs-lg fw-normal mb-0 mt-auto">Branding</h2>
      </div>
    </div>
    <div class="card-flip-back bg-secondary">
      <div class="d-flex flex-column h-100 px-sm-2 pt-sm-2 px-lg-0 pt-lg-0 px-xl-3 pt-xl-3">
        <h3 class="h4">Branding</h3>
        <ul class="text-body ps-4 mb-3">
          <li class="mb-2">Identity design</li>
          <li class="mb-2">Brand book creation</li>
          <li class="mb-2">Colors and fonts</li>
          <li class="mb-2">Banners and covers</li>
          <li class="mb-1">Visual style</li>
        </ul>
        <div class="text-end pt-3 pt-sm-2 pt-xl-4 mt-auto me-sm-n2 me-lg-0 me-xl-n3">
          <div class="btn btn-sm btn-icon btn-outline-primary rounded-circle">
            <i class="ai-arrow-right"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</a>

// Portfolio card with flipping effect (Grid view)
a(href="#", style="max-width: 316px;").card-flip
  .card-flip-inner
    .card-flip-front(style="background-image: url(assets/img/landing/creative-agency/services/03.jpg);")
      .d-flex.flex-column.h-100.ignore-dark-mode
        h2.fs-lg.fw-normal.mb-0.mt-auto Branding
    .card-flip-back.bg-secondary
      .d-flex.flex-column.h-100.px-sm-2.pt-sm-2.px-lg-0.pt-lg-0.px-xl-3.pt-xl-3
        h3.h4 Branding
        ul.text-body.ps-4.mb-3
          li.mb-2 Identity design
          li.mb-2 Brand book creation
          li.mb-2 Colors and fonts
          li.mb-2 Banners and covers
          li.mb-1 Visual style
        .text-end.pt-3.pt-sm-2.pt-xl-4.mt-auto.me-sm-n2.me-lg-0.me-xl-n3
          .btn.btn-sm.btn-icon.btn-outline-primary.rounded-circle
            i.ai-arrow-right

<!-- Portfolio card horizontal layout style 1 (List view). Ideally should be placed inside .container -->

<!-- Image on the left -->
<article class="row align-items-center card-hover pb-5 mb-md-2 mb-lg-3 mb-xl-4" data-aos="fade-up" data-aos-duration="600" data-aos-offset="280">
  <div class="col-md-7 offset-xxl-1 mb-4 mb-md-0">
    <a href="#">
      <img src="assets/img/portfolio/list/03.jpg" class="rounded-5" width="700" alt="Image">
    </a>
  </div>
  <div class="col-md-5 col-xl-4" data-aos="fade-up" data-aos-duration="850" data-aos-offset="180" data-disable-parallax-down="md">
    <div class="ms-md-4 ms-lg-5 ms-xxl-0" style="max-width: 330px;">
      <div class="text-muted mb-2">Identity, Packaging</div>
      <h2 class="mb-lg-4">
        <a href="#">Bottle for French perfume brand</a>
      </h2>
      <p class="mb-0 mb-md-1 mb-lg-3">Egestas ultrices condimentum consectetur massa aliquam volutpat pulvinar aliquet nisi quam. Nibh commodo tristique nisi, justo, sed maecenas lectus ut nec eu.</p>
      <a href="#" class="btn btn-lg btn-link px-0 opacity-0 d-none d-md-inline-flex">
        Read more
        <i class="ai-arrow-right ms-2"></i>
      </a>
    </div>
  </div>
</article>

<!-- Image on the right -->
<article class="row align-items-center card-hover pb-5 mb-md-2 mb-lg-3 mb-xl-4" data-aos="fade-up" data-aos-duration="600" data-aos-offset="280">
  <div class="col-md-7 order-md-2 mb-4 mb-md-0">
    <a href="#">
      <img src="assets/img/portfolio/list/04.jpg" class="rounded-5" width="700" alt="Image">
    </a>
  </div>
  <div class="col-md-5 col-xl-4 offset-xxl-1 order-md-1" data-aos="fade-up" data-aos-duration="850" data-aos-offset="180" data-disable-parallax-down="md">
    <div class="me-md-4 me-lg-5 me-xxl-0" style="max-width: 330px;">
      <div class="text-muted mb-2">E-book, Branding</div>
      <h2 class="mb-lg-4">
        <a href="#">Book cover design Twin Fish</a>
      </h2>
      <p class="mb-0 mb-md-1 mb-lg-3">Sed feugiat tristique enim aenean netus cum adipiscing est sem eget nulla leo vestibulum. Cras urna, proin ut ut dictum risus porttitor nulla consequat et iaculis.</p>
      <a href="#" class="btn btn-lg btn-link px-0 opacity-0 d-none d-md-inline-flex">
        Read more
        <i class="ai-arrow-right ms-2"></i>
      </a>
    </div>
  </div>
</article>

// Portfolio card horizontal layout style 1 (List view). Ideally should be placed inside .container

// Image on the left
article(data-aos="fade-up", data-aos-duration="600", data-aos-offset="280").row.align-items-center.card-hover.pb-5.mb-md-2.mb-lg-3.mb-xl-4
  .col-md-7.offset-xxl-1.mb-4.mb-md-0
    a(href="#")
      img(src="assets/img/portfolio/list/03.jpg", width="700", alt="Image").rounded-5
  .col-md-5.col-xl-4(data-aos="fade-up", data-aos-duration="850", data-aos-offset="180", data-disable-parallax-down="md")
    .ms-md-4.ms-lg-5.ms-xxl-0(style="max-width: 330px;")
      .text-muted.mb-2 Identity, Packaging
      h2.mb-lg-4
        a(href="#") Bottle for French perfume brand
      p.mb-0.mb-md-1.mb-lg-3
        | Egestas ultrices condimentum consectetur massa aliquam volutpat pulvinar aliquet nisi quam. Nibh commodo tristique nisi, justo, sed maecenas lectus ut nec eu.
      a(href="#").btn.btn-lg.btn-link.px-0.opacity-0.d-none.d-md-inline-flex
        | Read more
        i.ai-arrow-right.ms-2

// Image on the right
article(data-aos="fade-up", data-aos-duration="600", data-aos-offset="280").row.align-items-center.card-hover.pb-5.mb-md-2.mb-lg-3.mb-xl-4
  .col-md-7.order-md-2.mb-4.mb-md-0
    a(href="#")
      img(src="assets/img/portfolio/list/04.jpg", width="700", alt="Image").rounded-5
  .col-md-5.col-xl-4.offset-xxl-1.order-md-1(data-aos="fade-up", data-aos-duration="850", data-aos-offset="180", data-disable-parallax-down="md")
    .me-md-4.me-lg-5.me-xxl-0(style="max-width: 330px;")
      .text-muted.mb-2 E-book, Branding
      h2.mb-lg-4
        a(href="#") Book cover design Twin Fish
      p.mb-0.mb-md-1.mb-lg-3
        | Sed feugiat tristique enim aenean netus cum adipiscing est sem eget nulla leo vestibulum. Cras urna, proin ut ut dictum risus porttitor nulla consequat et iaculis.
      a(href="#").btn.btn-lg.btn-link.px-0.opacity-0.d-none.d-md-inline-flex
        | Read more
        i.ai-arrow-right.ms-2

<!-- Portfolio card horizontal layout style 2 (List view). Ideally should be placed inside .container -->
<div class="row align-items-center pt-xl-2 pb-5 mb-lg-2 mb-xl-3 mb-xxl-4">
  <div class="col-md-7 col-lg-6 mb-4 mb-md-0">
    <a href="#" class="d-block position-relative">
      <div class="bg-info rounded-5 position-absolute top-0 start-0 w-100 h-100" data-aos="zoom-in" data-aos-duration="600" data-aos-offset="250"></div>
      <img src="assets/img/portfolio/list/06.png" class="d-block position-relative zindex-2 mx-auto" width="636" alt="Image" data-aos="fade-in" data-aos-duration="400" data-aos-offset="250">
    </a>
  </div>
  <div class="col-md-5 col-xl-4 offset-lg-1" data-aos="fade-up" data-aos-duration="400" data-aos-offset="170">
    <div class="ps-md-3 ps-lg-0">
      <img src="assets/img/portfolio/brands/champion-blue-dark.svg" class="d-block d-dark-mode-none mb-2 mb-lg-3" alt="Champion">
      <img src="assets/img/portfolio/brands/champion-blue-light.svg" class="d-none d-dark-mode-block mb-2 mb-lg-3" alt="Champion">
      <h2 class="h4">Development of a fintech application</h2>
      <p class="fs-sm pb-3 pb-lg-4 mb-3">Morbi et massa fames ac scelerisque sit commodo dignissim faucibus vel quisque proin lectus. Morbi et massa fames ac scelerisque sit commodo dignissim.</p>
      <a href="#" class="btn btn-sm btn-outline-dark rounded-pill">Read the full story</a>
      <div class="d-flex align-items-center pt-2 pt-lg-3 mt-3">
        <h6 class="text-body mb-0 me-3">Awards:</h6>
        <img src="assets/img/portfolio/brands/vuejs-dark.svg" class="d-block d-dark-mode-none me-4" width="90" alt="Vue.js">
        <img src="assets/img/portfolio/brands/vuejs-light.svg" class="d-none d-dark-mode-block me-4" width="90" alt="Vue.js">
        <img src="assets/img/portfolio/brands/deloitte-dark.svg" class="d-block d-dark-mode-none" width="95" alt="Deloitte">
        <img src="assets/img/portfolio/brands/deloitte-light.svg" class="d-none d-dark-mode-block" width="95" alt="Deloitte">
      </div>
    </div>
  </div>
</div>

// Portfolio card horizontal layout style 2 (List view). Ideally should be placed inside .container
.row.align-items-center.pt-xl-2.pb-5.mb-lg-2.mb-xl-3.mb-xxl-4
  .col-md-7.col-lg-6.mb-4.mb-md-0
    a(href="#").d-block.position-relative
      .bg-info.rounded-5.position-absolute.top-0.start-0.w-100.h-100(data-aos="zoom-in", data-aos-duration="600", data-aos-offset="250")
      img(src="assets/img/portfolio/list/06.png", width="636", alt="Image", data-aos="fade-in", data-aos-duration="400", data-aos-offset="250").d-block.position-relative.zindex-2.mx-auto
  .col-md-5.col-xl-4.offset-lg-1(data-aos="fade-up", data-aos-duration="400", data-aos-offset="170")
    .ps-md-3.ps-lg-0
      img(src="assets/img/portfolio/brands/champion-blue-dark.svg", alt="Champion").d-block.d-dark-mode-none.mb-2.mb-lg-3
      img(src="assets/img/portfolio/brands/champion-blue-light.svg", alt="Champion").d-none.d-dark-mode-block.mb-2.mb-lg-3
      h2.h4 Development of a fintech application
      p.fs-sm.pb-3.pb-lg-4.mb-3
        | Morbi et massa fames ac scelerisque sit commodo dignissim faucibus vel quisque proin lectus. Morbi et massa fames ac scelerisque sit commodo dignissim.
      a(href="#").btn.btn-sm.btn-outline-dark.rounded-pill
        | Read the full story
      .d-flex.align-items-center.pt-2.pt-lg-3.mt-3
        h6.text-body.mb-0.me-3 Awards:
        img(src="assets/img/portfolio/brands/vuejs-dark.svg", width="90", alt="Vue.js").d-block.d-dark-mode-none.me-4
        img(src="assets/img/portfolio/brands/vuejs-light.svg", width="90", alt="Vue.js").d-none.d-dark-mode-block.me-4
        img(src="assets/img/portfolio/brands/deloitte-dark.svg", width="95", alt="Deloitte").d-block.d-dark-mode-none
        img(src="assets/img/portfolio/brands/deloitte-light.svg", width="95", alt="Deloitte").d-none.d-dark-mode-block