Blocks - Portfolio

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row align-items-center mb-7">
      <div class="col-md-8 col-lg-8 col-xl-7 col-xxl-6 pe-lg-17">
        <h2 class="display-4 mb-3">Recent Projects</h2>
        <p class="lead fs-lg">We love to turn ideas into beautiful things.</p>
      </div>
    </div>

    <div class="projects-tiles">
      <div class="project grid grid-view">
        <div class="row gx-md-8 gx-xl-12 gy-10 gy-md-12 isotope">
          {% assign featured_projects = site.projects | where: "featured", true | limit: 3 %}
          {% for project in featured_projects %}
          <div class="item {% if forloop.index == 2 %}col-md-7 mt-md-17{% else %}col-md-5{% endif %}">
            <figure class="lift rounded mb-6">
              <a href="{{ project.url }}">
                <img src="{{ project.thumbnail }}" 
                     srcset="{{ project.thumbnail | replace: '.webp', '@2x.webp' }} 2x" 
                     alt="{{ project.title }}" />
              </a>
            </figure>
            <div class="post-category mb-3 text-{{ project.category | downcase }}">{{ project.category }}</div>
            <h3 class="post-title">{{ project.title }}</h3>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</section>
              

portfolio1:
  enable: true
  content:
    title: "Recent Projects"
    subtitle: "We love to turn ideas into beautiful things."
    title_classes: "display-4 mb-3"
    subtitle_classes: "lead fs-lg"
  grid:
    classes: "gx-md-8 gx-xl-12 gy-10 gy-md-12 isotope"
    columns:
      md5: "col-md-5"
      md7: "col-md-7"
    item_classes: "lift rounded mb-6"
              

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row">
      <div class="col-lg-9 col-xl-8 col-xxl-7 mx-auto text-center">
        <h2 class="fs-15 text-uppercase text-muted mb-3">Latest Projects</h2>
        <h3 class="display-4 mb-10">Check out some of our awesome projects with <span class="underline-3 style-2 yellow">creative</span> ideas and great design.</h3>
      </div>
    </div>

    <div class="swiper-container grid-view mb-6" 
         data-margin="30" 
         data-dots="true" 
         data-items-xl="3" 
         data-items-md="2" 
         data-items-xs="1">
      <div class="swiper">
        <div class="swiper-wrapper">
          {% assign projects = site.projects | where: "category", "Products" %}
          {% for project in projects %}
          <div class="swiper-slide">
            <figure class="rounded mb-6">
              <img src="{{ project.thumbnail }}" 
                   srcset="{{ project.thumbnail }} 2x" 
                   alt="{{ project.title }}" />
              {% if project.gallery %}
              <a class="item-link" 
                 href="{{ project.gallery[0].url }}" 
                 data-glightbox 
                 data-gallery="projects-group">
                <i class="uil uil-focus-add"></i>
              </a>
              {% endif %}
            </figure>
            <div class="project-details d-flex justify-content-center flex-column">
              <div class="post-header">
                <h2 class="post-title h3">
                  <a href="{{ project.url }}" class="link-dark">{{ project.title }}</a>
                </h2>
                <div class="post-category text-ash">{{ project.category }}</div>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</section>
              

portfolio2:
  enable: true
  content:
    subtitle: "Latest Projects"
    subtitle_classes: "fs-15 text-uppercase text-muted mb-3"
    title: "Check out some of our awesome projects with <span class=\"underline-3 style-2 yellow\">creative</span> ideas and great design."
    title_classes: "display-4 mb-10"
  swiper:
    margin: 30
    dots: true
    items:
      xl: 3
      md: 2
      xs: 1
    classes: "grid-view mb-6"
  project:
    figure_classes: "rounded mb-6"
    details_classes: "d-flex justify-content-center flex-column"
    title_classes: "post-title h3"
    category_classes: "post-category text-ash"
              

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="projects-tiles">
      <div class="project grid grid-view">
        <div class="row gx-md-8 gx-xl-12 gy-10 gy-md-12 isotope">
          <div class="item col-md-6 mt-md-7 mt-lg-15">
            <div class="project-details d-flex justify-content-center align-self-end flex-column ps-0 pb-0">
              <div class="post-header">
                <h2 class="display-4 mb-4 pe-xxl-15">Check out some of our recent projects below.</h2>
                <p class="lead fs-lg mb-0">We love to turn ideas into beautiful things.</p>
              </div>
            </div>
          </div>

          {% assign featured_projects = site.projects | where: "featured", true | limit: 3 %}
          {% for project in featured_projects %}
          <div class="item col-md-6">
            <figure class="lift rounded mb-6">
              <a href="{{ project.url }}">
                <img src="{{ project.thumbnail }}" 
                     srcset="{{ project.thumbnail | replace: '.webp', '@2x.webp' }} 2x" 
                     alt="{{ project.title }}" />
              </a>
            </figure>
            <div class="post-category text-line mb-3 text-{{ project.category | downcase }}">{{ project.category }}</div>
            <h2 class="post-title h3">{{ project.title }}</h2>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</section>
              

portfolio3:
  enable: true
  content:
    title: "Check out some of our recent projects below."
    subtitle: "We love to turn ideas into beautiful things."
    title_classes: "display-4 mb-4 pe-xxl-15"
    subtitle_classes: "lead fs-lg mb-0"
  grid:
    classes: "gx-md-8 gx-xl-12 gy-10 gy-md-12 isotope"
    header_column: "col-md-6 mt-md-7 mt-lg-15"
    item_column: "col-md-6"
  project:
    figure_classes: "lift rounded mb-6"
    category_classes: "post-category text-line mb-3"
    title_classes: "post-title h3"
              

<section class="wrapper bg-light">
  <div class="container pt-15 pt-md-17">
    <div class="row">
      <div class="col-lg-9 col-xl-8 col-xxl-7 mx-auto text-center">
        <h2 class="fs-15 text-uppercase text-muted mb-3">Latest Projects</h2>
        <h3 class="display-4 mb-10">Check out some of our awesome projects with creative ideas and great design.</h3>
      </div>
    </div>
  </div>

  <div class="container-fluid px-md-6">
    <div class="swiper-container blog grid-view mb-14 mb-md-16" 
         data-margin="30" 
         data-nav="true" 
         data-dots="true" 
         data-items-xxl="3" 
         data-items-md="2" 
         data-items-xs="1">
      <div class="swiper">
        <div class="swiper-wrapper">
          {% assign projects = site.projects | sort: 'date' | reverse %}
          {% for project in projects %}
          <div class="swiper-slide">
            <figure class="rounded">
              <img src="{{ project.thumbnail }}" 
                   srcset="{{ project.thumbnail | replace: '.webp', '@2x.webp' }} 2x" 
                   alt="{{ project.title }}" />
            </figure>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</section>
              

portfolio4:
  enable: true
  content:
    subtitle: "Latest Projects"
    subtitle_classes: "fs-15 text-uppercase text-muted mb-3"
    title: "Check out some of our awesome projects with creative ideas and great design."
    title_classes: "display-4 mb-10"
  swiper:
    margin: 30
    nav: true
    dots: true
    items:
      xxl: 3
      md: 2
      xs: 1
    classes: "blog grid-view mb-14 mb-md-16"
  project:
    figure_classes: "rounded"
              

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row">
      <div class="col-lg-9 col-xl-8 col-xxl-7 mx-auto mb-8">
        <h2 class="fs-15 text-uppercase text-muted text-center mb-3">Our Projects</h2>
        <h3 class="display-4 text-center">Check out some of our awesome projects with creative ideas and great design.</h3>
      </div>
    </div>

    <div class="grid grid-view projects-masonry">
      <div class="row gx-md-8 gy-10 gy-md-13 isotope">
        {% assign projects = site.projects | where_exp: "item", "item.category != nil" %}
        {% for project in projects %}
        <div class="project item col-md-6 col-xl-4 {{ project.category | downcase | replace: ' ', '-' }}">
          <figure class="lift rounded mb-6">
            <a href="{{ project.url }}">
              <img src="{{ project.thumbnail }}" 
                   srcset="{{ project.thumbnail | replace: '.webp', '@2x.webp' }} 2x" 
                   alt="{{ project.title }}" />
            </a>
          </figure>
          <div class="project-details d-flex justify-content-center flex-column">
            <div class="post-header">
              <div class="post-category text-line mb-3 text-{{ project.category | downcase }}">{{ project.category }}</div>
              <h2 class="post-title h3">{{ project.title }}</h2>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</section>
              

portfolio5:
  enable: true
  content:
    subtitle: "Our Projects"
    subtitle_classes: "fs-15 text-uppercase text-muted text-center mb-3"
    title: "Check out some of our awesome projects with creative ideas and great design."
    title_classes: "display-4 text-center"
  grid:
    classes: "gx-md-8 gy-10 gy-md-13 isotope"
    wrapper_classes: "grid grid-view projects-masonry"
  project:
    column_classes: "col-md-6 col-xl-4"
    figure_classes: "lift rounded mb-6"
    details_classes: "d-flex justify-content-center flex-column"
    category_classes: "post-category text-line mb-3"
    title_classes: "post-title h3"
              

<section class="wrapper bg-light">
  <div class="container py-14 pt-md-16">
    <div class="row align-items-center mb-10">
      <div class="col-md-8 col-lg-9 col-xl-8 col-xxl-7 pe-xl-20">
        <h2 class="display-4 mb-3">{{ page.portfolio6.content.title }}</h2>
        <p class="lead fs-20 mb-0">{{ page.portfolio6.content.subtitle }}</p>
      </div>
      <div class="col-md-4 col-lg-3 ms-md-auto text-md-end mt-5 mt-md-0">
        <a href="{{ page.portfolio6.content.button.url }}" class="{{ page.portfolio6.content.button.classes }}">
          {{ page.portfolio6.content.button.text }}
        </a>
      </div>
    </div>

    {% assign featured_projects = site.projects | where: "featured", true | limit: 2 %}
    {% for project in featured_projects %}
    {% assign config = page.portfolio6.featured_projects[forloop.index0] %}
    <div class="card bg-soft-{{ config.color }} mb-10">
      <div class="card-body p-12 {% if forloop.first %}pb-0{% endif %}">
        <div class="row {% if config.layout == 'image-left' %}gy-10 align-items-center{% endif %}">
          <div class="{{ config.column_content }}">
            <div class="post-category mb-3 text-{{ config.color }}">{{ project.category }}</div>
            <h3 class="h1 post-title mb-3">{{ project.title }}</h3>
            <p>{{ project.description }}</p>
            <a href="{{ project.url }}" class="more hover link-{{ config.color }}">See Project</a>
          </div>
          <div class="{{ config.column_image }}">
            <figure>
              <img class="img-fluid" src="{{ project.thumbnail }}" 
                   srcset="{{ project.thumbnail | replace: '.webp', '@2x.webp' }} 2x" 
                   alt="{{ project.title }}" />
            </figure>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}

    <div class="row gx-md-8 gx-xl-10">
      {% assign small_projects = site.projects | where: "featured", false | where: "category", "Augmented Reality" | limit: 2 %}
      {% for project in small_projects %}
      {% assign color = page.portfolio6.small_projects.colors[forloop.index0] %}
      <div class="{{ page.portfolio6.small_projects.column_classes }}">
        <div class="card bg-soft-{{ color }} {% unless forloop.last %}mb-10 mb-lg-0{% endunless %}">
          <div class="card-body p-12 pb-0">
            <div class="post-category mb-3 text-{{ color }}">{{ project.category }}</div>
            <h3 class="h1 post-title mb-3">{{ project.title }}</h3>
            <p>{{ project.description }}</p>
            <a href="{{ project.url }}" class="more hover link-{{ color }} mb-8">See Project</a>
          </div>
          <img class="card-img-bottom" src="{{ project.thumbnail }}" 
               srcset="{{ project.thumbnail | replace: '.webp', '@2x.webp' }} 2x" 
               alt="{{ project.title }}" />
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>

              

portfolio6:
  enable: true
  content:
    title: "Latest Projects"
    title_classes: "display-4 mb-3"
    subtitle: "Check out some of my latest projects with creative ideas."
    subtitle_classes: "lead fs-20 mb-0"
    button:
      text: "See All Projects"
      url: "#"
      classes: "btn btn-primary rounded-pill mb-0"
  layout:
    header_column: "col-md-8 col-lg-9 col-xl-8 col-xxl-7 pe-xl-20"
    button_column: "col-md-4 col-lg-3 ms-md-auto text-md-end mt-5 mt-md-0"
  featured_projects:
    - color: "violet"
      layout: "image-right"
      column_content: "col-lg-4 pb-12 align-self-center"
      column_image: "col-lg-7 offset-lg-1 align-self-end"
    - color: "blue"
      layout: "image-left"
      column_content: "col-lg-4 order-lg-2 offset-lg-1"
      column_image: "col-lg-7"
  small_projects:
    column_classes: "col-lg-6"
    colors: ["leaf", "pink"]
              

<section class="wrapper bg-light wrapper-border">
  <div class="overflow-hidden">
    <div class="container pt-15 pt-md-17 pb-13 pb-md-15">
      <div class="row">
        <div class="{{ page.portfolio7.layout.header_column }}">
          <h2 class="{{ page.portfolio7.content.subtitle_classes }}">{{ page.portfolio7.content.subtitle }}</h2>
          <h3 class="{{ page.portfolio7.content.title_classes }}">{{ page.portfolio7.content.title }}</h3>
        </div>
      </div>

      <div class="swiper-container {{ page.portfolio7.swiper.classes }}" 
           data-margin="{{ page.portfolio7.swiper.margin }}" 
           data-dots="{{ page.portfolio7.swiper.dots }}" 
           data-nav="{{ page.portfolio7.swiper.nav }}" 
           data-items-md="{{ page.portfolio7.swiper.items.md }}" 
           data-items-xs="{{ page.portfolio7.swiper.items.xs }}">
        <div class="swiper overflow-visible">
          <div class="swiper-wrapper">
            {% assign projects = site.projects | where: "category", "Augmented Reality" %}
            {% for project in projects %}
            <div class="swiper-slide">
              <figure class="{{ page.portfolio7.project.figure_classes }}">
                <a href="{{ project.url }}">
                  <img src="{{ project.thumbnail }}" 
                       srcset="{{ project.thumbnail | replace: '.webp', '@2x.webp' }} 2x" 
                       alt="{{ project.title }}" />
                </a>
              </figure>
              <div class="project-details {{ page.portfolio7.project.details_classes }}">
                <div class="post-header">
                  <h2 class="{{ page.portfolio7.project.title_classes }}">
                    <a href="{{ project.url }}" class="link-dark">{{ project.title }}</a>
                  </h2>
                  <div class="{{ page.portfolio7.project.category_classes }}">{{ project.category }}</div>
                </div>
              </div>
            </div>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

              

portfolio7:
  enable: true
  content:
    subtitle: "Latest Projects"
    subtitle_classes: "fs-16 text-uppercase text-primary mb-3"
    title: "Check out some of our awesome projects with creative ideas and great design."
    title_classes: "display-3 mb-10"
  layout:
    header_column: "col-lg-10 col-xl-9 col-xxl-8 mx-auto text-center"
  swiper:
    margin: 30
    dots: false
    nav: true
    items:
      md: 2
      xs: 1
    classes: "grid-view nav-bottom nav-color mb-14"
  project:
    figure_classes: "rounded mb-7"
    details_classes: "d-flex justify-content-center flex-column"
    title_classes: "post-title h3"
    category_classes: "post-category text-ash"
              

<section class="wrapper bg-light wrapper-border">
  <div class="container pt-15 pt-md-17 pb-13 pb-md-15">
    <div class="row">
      <div class="{{ page.portfolio8.layout.header_column }}">
        <h2 class="{{ page.portfolio8.content.subtitle_classes }}">{{ page.portfolio8.content.subtitle }}</h2>
        <h3 class="{{ page.portfolio8.content.title_classes }}">{{ page.portfolio8.content.title }}</h3>
      </div>
    </div>

    <div class="{{ page.portfolio8.layout.grid_classes }}">
      <div class="row {{ page.portfolio8.layout.row_classes }}">
        {% assign projects = site.projects %}
        {% for project in projects %}
        <div class="project item {{ page.portfolio8.project.column_classes }}">
          <figure class="{{ page.portfolio8.project.figure_classes }}">
            <img src="{{ project.thumbnail }}" 
                 srcset="{{ project.thumbnail | replace: '.webp', '@2x.webp' }} 2x" 
                 alt="{{ project.title }}" />
            {% if page.portfolio8.project.lightbox.enabled %}
            <a class="item-link" 
               href="{{ project.hero_image }}" 
               data-glightbox 
               data-gallery="{{ page.portfolio8.project.lightbox.gallery_name }}">
              <i class="{{ page.portfolio8.project.lightbox.icon }}"></i>
            </a>
            {% endif %}
          </figure>
          <div class="project-details {{ page.portfolio8.project.details_classes }}">
            <div class="post-header">
              <h2 class="{{ page.portfolio8.project.title_classes }}">
                <a href="{{ project.url }}" class="link-dark">{{ project.title }}</a>
              </h2>
              <div class="{{ page.portfolio8.project.category_classes }}">{{ project.category }}</div>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>

    <div class="text-center mt-10">
      <a href="#" class="btn btn-lg btn-primary rounded-pill">Start a Project</a>
    </div>
  </div>
</section>

              

portfolio8:
  enable: true
  content:
    subtitle: "Our Projects"
    subtitle_classes: "fs-16 text-uppercase text-muted text-center mb-3"
    title: "Check out some of our awesome projects with creative ideas and great design."
    title_classes: "display-3 text-center px-lg-5 px-xl-10 px-xxl-16 mb-0"
  layout:
    header_column: "col-lg-11 col-xl-10 mx-auto mb-10"
    grid_classes: "grid grid-view projects-masonry"
    row_classes: "gx-md-8 gy-10 gy-md-13 isotope"
  project:
    column_classes: "col-md-6 col-xl-4"
    figure_classes: "rounded mb-6"
    details_classes: "d-flex justify-content-center flex-column"
    title_classes: "post-title h3 fs-22"
    category_classes: "post-category text-ash"
    lightbox:
      enabled: true
      gallery_name: "projects-group"
      icon: "uil uil-focus-add"
              

<section class="wrapper bg-light wrapper-border">
  <div class="container pt-15 pt-md-17 pb-13 pb-md-15 text-center">
    <div class="row">
      <div class="{{ page.portfolio9.layout.header_column }}">
        <h2 class="{{ page.portfolio9.content.title_classes }}">{{ page.portfolio9.content.title }}</h2>
        <p class="{{ page.portfolio9.content.subtitle_classes }}">{{ page.portfolio9.content.subtitle }}</p>
      </div>
    </div>

    <div class="{{ page.portfolio9.layout.grid_classes }}">
      <div class="isotope-filter filter mb-10">
        <ul>
          {% for filter in page.portfolio9.filters %}
          <li>
            <a class="filter-item {% if filter.active %}active{% endif %}" 
               data-filter=".{{ filter.class }}">{{ filter.name }}</a>
          </li>
          {% endfor %}
        </ul>
      </div>

      <div class="row {{ page.portfolio9.layout.row_classes }}">
        {% assign photo_projects = site.projects | where: "category", "Photography" %}
        {% for project in photo_projects %}
        <div class="project item {{ page.portfolio9.project.column_classes }} {{ project.tags | join: ' ' }}">
          <figure class="{{ page.portfolio9.project.figure_classes }}">
            <a href="{{ project.hero_image }}" 
               data-glightbox 
               data-gallery="{{ page.portfolio9.project.lightbox.gallery_name }}">
              <img src="{{ project.thumbnail }}" alt="{{ project.title }}" />
            </a>
            <figcaption>
              <h5 class="{{ page.portfolio9.project.title_classes }}">{{ project.title }}</h5>
            </figcaption>
          </figure>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</section>

              

portfolio9:
  enable: true
  content:
    title: "My Selected Shots"
    title_classes: "display-5 mb-3"
    subtitle: "Photography is my passion and I love to turn ideas into beautiful things."
    subtitle_classes: "lead fs-lg"
  layout:
    header_column: "col-lg-10 col-xl-8 col-xxl-7 mx-auto mb-8"
    grid_classes: "grid grid-view projects-masonry"
    row_classes: "gx-md-6 gy-6 isotope"
  filters:
    - name: "All"
      class: "*"
      active: true
    - name: "Foods"
      class: "foods"
    - name: "Drinks"
      class: "drinks"
    - name: "Events"
      class: "events"
    - name: "Pastries"
      class: "pastries"
  project:
    column_classes: "col-md-6 col-xl-4"
    figure_classes: "overlay overlay-1 rounded"
    title_classes: "from-top mb-0"
    lightbox:
      enabled: true
      gallery_name: "shots-group"
              

<section class="wrapper bg-light wrapper-border">
  <div class="container pt-15 pt-md-17 pb-13 pb-md-15">
    <div class="row text-center">
      <div class="{{ page.portfolio10.layout.header_column }}">
        <h2 class="{{ page.portfolio10.content.subtitle_classes }}">{{ page.portfolio10.content.subtitle }}</h2>
        <h3 class="{{ page.portfolio10.content.title_classes }}">{{ page.portfolio10.content.title }}</h3>
      </div>
    </div>

    {% assign featured_projects = site.projects | where: "featured", true | limit: 2 %}
    {% for project in featured_projects %}
    {% assign config = page.portfolio10.featured_projects[forloop.index0] %}
    <div class="row gy-10 align-items-center {% unless forloop.last %}mb-15 mb-md-17{% endunless %}">
      <div class="{{ config.column_image }}">
        <div class="card {{ config.card_classes }}">
          <div class="card-body {{ config.card_body_classes }}">
            {% if forloop.first %}
            <div class="row gx-4 gx-md-9">
              {% for image in project.gallery | limit: 2 %}
              <div class="{{ config.images[forloop.index0].column_classes }}">
                <figure {% if forloop.first %}class="mt-9"{% endif %}>
                  <a href="{{ project.url }}">
                    <img class="{{ config.images[forloop.index0].classes }}" 
                         src="{{ image.url }}" 
                         srcset="{{ image.url | replace: '.webp', '@2x.webp' }} 2x" 
                         alt="{{ image.alt }}" />
                  </a>
                </figure>
              </div>
              {% endfor %}
            </div>
            {% else %}
            <figure>
              <a href="{{ project.url }}">
                <img src="{{ project.hero_image }}" 
                     srcset="{{ project.hero_image | replace: '.webp', '@2x.webp' }} 2x" 
                     alt="{{ project.title }}" />
              </a>
            </figure>
            {% endif %}
          </div>
        </div>
      </div>

      <div class="{{ config.column_content }}">
        <h3 class="h1 post-title ls-sm mb-2">{{ project.title }}</h3>
        <div class="post-category text-muted mb-4">
          {% assign categories = project.category | split: "," %}
          {% for category in categories %}
          <span>{{ category | strip }}</span>{% unless forloop.last %},{% endunless %}
          {% endfor %}
        </div>
        <p class="mb-6">{{ project.description }}</p>
        <a href="{{ project.url }}" class="{{ config.button.classes }}">{{ config.button.text }}</a>
      </div>
    </div>
    {% endfor %}
  </div>
</section>

              

portfolio10:
  enable: true
  content:
    subtitle: "Latest Projects"
    subtitle_classes: "fs-16 text-uppercase text-muted mb-3"
    title: "Check out some of our <span class=\"underline-3 style-1 primary\"><em>awesome</em></span> projects with creative ideas and great design."
    title_classes: "display-2 ls-sm"
  layout:
    header_column: "col-lg-10 col-xxl-8 mx-auto mb-12"
  featured_projects:
    - layout: "image-left"
      column_content: "col-lg-4 ms-auto"
      column_image: "col-lg-7"
      card_classes: "bg-soft-grape"
      card_body_classes: "px-9 py-0 overflow-hidden"
      button:
        text: "See Project"
        classes: "btn btn-grape rounded"
      images:
        - classes: "shadow-lg rounded-top mt-9"
          column_classes: "col-6"
        - classes: "shadow-lg rounded-bottom"
          column_classes: "col-6"
    - layout: "image-right"
      column_content: "col-lg-4 me-auto"
      column_image: "col-lg-7 order-lg-2"
      card_classes: "bg-soft-primary"
      card_body_classes: "p-11 overflow-hidden"
      button:
        text: "See Project"
        classes: "btn btn-primary rounded"
              

<section class="wrapper bg-light wrapper-border">
  <div class="container pt-15 pt-md-17 pb-13 pb-md-15">
    <div class="row mb-10">
      <div class="{{ page.portfolio11.layout.header_column }}">
        <div class="counter-wrapper">
          <h3 class="{{ page.portfolio11.content.counter.classes }}">{{ page.portfolio11.content.counter.number }}</h3>
        </div>
        <h2 class="{{ page.portfolio11.content.title_classes }}">{{ page.portfolio11.content.title }}</h2>
      </div>
    </div>

    <div class="demos-wrapper">
      {% assign demo_projects = site.projects | where: "category", "Demo"  %}
      {% for project in demo_projects | limit: 2 %}
      {% assign config = page.portfolio11.demos[forloop.index0] %}
      <div class="project {% unless forloop.last %}mb-10{% endunless %}">
        <div class="card {{ config.card_classes }}">
          <div class="card-body {{ config.card_body_classes }}">
            <div class="row gx-md-8 gx-xl-12 d-flex align-items-center">
              <div class="{{ config.image_column }}">
                <div class="row gx-7">
                  {% for image in project.gallery_images | limit: 2 %}
                  <div class="col-6">
                    <figure class="itooltip itooltip-{{ config.color }} {% if forloop.first %}mt-9{% endif %}" 
                            title='<h5 class="mb-0">Click to see the demo</h5>'>
                      <a href="{{ project.url }}" target="_blank">
                        <img class="shadow-lg {% if forloop.first %}rounded-top{% else %}rounded-bottom{% endif %}" 
                             src="{{ image.url }}" 
                             srcset="{{ image.url | replace: '.webp', '@2x.webp' }} 2x" 
                             alt="{{ image.alt }}" />
                      </a>
                    </figure>
                  </div>
                  {% endfor %}
                </div>
              </div>

              <div class="{{ config.content_column }}">
                <h2 class="{{ config.title_classes }}">{{ project.title }}</h2>
                <ul class="{{ config.list_classes }}">
                  {% for feature in project.features %}
                  <li class="col-md-6">
                    <span><i class="uil uil-check"></i></span>
                    <span>{{ feature }}</span>
                  </li>
                  {% endfor %}
                </ul>
                <a href="{{ project.url }}" target="_blank" class="{{ config.button_classes }}">See Demo</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      {% endfor %}
      <div class="text-center mt-12">
        <a href="#" class="{{ page.portfolio11.footer.button.classes }}">
          {{ page.portfolio11.footer.button.text }}
        </a>
      </div>
    </div>
  </div>
</section>

              

portfolio11:
  enable: true
  content:
    counter: 
      number: "21"
      classes: "fs-70 mb-3 text-primary text-center counter"
    title: "Functional, impressive and rich demos to start with"
    title_classes: "display-3 mb-3 text-center mb-0"
  layout:
    header_column: "col-md-9 col-lg-7 col-xl-6 col-xxl-5 mx-auto"
  demos:
    - color: "grape"
      card_classes: "bg-soft-grape"
      card_body_classes: "ps-xl-12 py-0 overflow-hidden"
      image_column: "col-lg-7"
      content_column: "col-lg-5 d-none d-lg-block"
      title_classes: "post-title fs-30 mb-4"
      list_classes: "icon-list bullet-grape row ms-0 gy-2"
      button_classes: "btn btn-sm btn-grape rounded-pill mt-1"
    - color: "fuchsia"
      card_classes: "bg-soft-fuchsia"
      card_body_classes: "ps-xl-12 py-0 overflow-hidden"
      image_column: "col-lg-7"
      content_column: "col-lg-5 d-none d-lg-block"
      title_classes: "post-title fs-30 mb-4"
      list_classes: "icon-list bullet-fuchsia row ms-0 gy-2"
      button_classes: "btn btn-sm btn-fuchsia rounded-pill mt-1"
  footer:
    button:
      text: "See All Demos"
      classes: "btn btn-primary rounded-pill"