Copy any custom block snippet below and paste it on your page to build your website easily.
We love to turn ideas into beautiful things.
<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"
We love to turn ideas into beautiful things.
<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"
Check out some of my latest projects with creative ideas.
<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"
Photography is my passion and I love to turn ideas into beautiful things.
<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"