Sandbox Jekyll documentation
Portfolio
Copy any custom block snippet below and paste it on your page to build your website easily.
Example 1
<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"Example 2
<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"Example 3
<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"Example 4
<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"Example 5
<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"Example 6
<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"]Example 7
<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"Example 8
<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"Example 9
<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"Example 10
<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"Example 11
<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"Sign In
Please enter your credentials to continue.
Password
Sign In
Don’t have an account? Sign up
or
Create Account
Create your account to get started.
Name
Password
Confirm Password
Create Account
Already have an account? Sign in
or