Portfolio Sections
Portfolio Sections style 1
Our Portfolio
Logo Design
Branding
Web Development
Web
Graphic Design
Graphic
Video Marketing
Video
Photography
Photo
Apps Development
Apps
<!-- portfolio start -->
<div id="portfolio" class="relative py-20 md:py-24 bg-white dark:bg-gray-800">
<div x-data="{ tab: 'all' }" class="container xl:max-w-6xl mx-auto uajskeiolksb">
<!-- section header -->
<header class="text-center mx-auto mb-12">
<h2 class="text-2xl md:text-3xl leading-normal mb-2 font-bold text-gray-800 dark:text-gray-100"><span class="font-light">Our</span> Portfolio</h2>
<hr class="block w-12 h-0.5 mx-auto my-5 bg-primary-700 border-primary-700">
</header><!-- end section header -->
<!-- navigation -->
<div class="space-x-5 text-center">
<button @click.prevent="tab = 'all'" :class="{ 'text-primary-700' : tab === 'all' }" class="inline-block bg-transparent border-0 outline-hidden mb-6 md:mb-12 focus:text-primary-700 focus:ring-0 focus:outline-hidden text-primary-700">
All
</button>
<button @click.prevent="tab = 'web'" :class="{ 'text-primary-700' : tab === 'web' }" class="inline-block bg-transparent border-0 outline-hidden mb-6 md:mb-12 focus:text-primary-700 focus:ring-0 focus:outline-hidden">
Web
</button>
<button @click.prevent="tab = 'graphic'" :class="{ 'text-primary-700' : tab === 'graphic' }" class="inline-block bg-transparent border-0 outline-hidden mb-6 md:mb-12 focus:text-primary-700 focus:ring-0 focus:outline-hidden">
Graphic
</button>
<button @click.prevent="tab = 'photo'" :class="{ 'text-primary-700' : tab === 'photo' }" class="inline-block bg-transparent border-0 outline-hidden mb-6 md:mb-12 focus:text-primary-700 focus:ring-0 focus:outline-hidden">
Photograpy
</button>
</div><!-- end navigation -->
<!-- Portfolio Content -->
<div class="flex flex-wrap klsuaonrmcha -mx-4 lightgallery-thumbnail">
<figure x-show="tab === 'graphic' || tab === 'photo' || tab === 'all'" data-src="src/img-min/project/project_1.jpg" class="shrink max-w-full uajskeiolksb w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
<div class="relative mklausjenrhtm cursor-pointer mb-6">
<img class="block w-full h-auto transform duration-500 hover:scale-125" src="src/img-min/project/project_1.jpg" alt="Image Description">
<figcaption class="absolute ajsklekajsnm bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 mklausjenrhtm uajskeiolksb py-2 text-gray-100 bg-primary-700 text-center">
<h3 class="text-base leading-normal font-semibold my-1 text-gray-100">Logo Design</h3>
<small class="d-block">Branding</small>
</figcaption>
</div>
</figure>
<figure x-show="tab === 'web' || tab === 'all'" data-src="src/img-min/project/project_2.jpg" class="shrink max-w-full uajskeiolksb w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
<div class="relative mklausjenrhtm cursor-pointer mb-6">
<img class="block w-full h-auto transform duration-500 hover:scale-125" src="src/img-min/project/project_2.jpg" alt="Image Description">
<figcaption class="absolute ajsklekajsnm bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 mklausjenrhtm uajskeiolksb py-2 text-gray-100 bg-primary-700 text-center">
<h3 class="text-base leading-normal font-semibold my-1 text-gray-100">Web Development</h3>
<small class="d-block">Web</small>
</figcaption>
</div>
</figure>
<figure x-show="tab === 'graphic' || tab === 'all'" data-src="src/img-min/project/project_3.jpg" class="shrink max-w-full uajskeiolksb w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
<div class="relative mklausjenrhtm cursor-pointer mb-6">
<img class="block w-full h-auto transform duration-500 hover:scale-125" src="src/img-min/project/project_3.jpg" alt="Image Description">
<figcaption class="absolute ajsklekajsnm bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 mklausjenrhtm uajskeiolksb py-2 text-gray-100 bg-primary-700 text-center">
<h3 class="text-base leading-normal font-semibold my-1 text-gray-100">Graphic Design</h3>
<small class="d-block">Graphic</small>
</figcaption>
</div>
</figure>
<figure x-show="tab === 'graphic' || tab === 'all'" data-src="src/img-min/project/project_4.jpg" class="shrink max-w-full uajskeiolksb w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
<div class="relative mklausjenrhtm cursor-pointer mb-6">
<img class="block w-full h-auto transform duration-500 hover:scale-125" src="src/img-min/project/project_4.jpg" alt="Image Description">
<figcaption class="absolute ajsklekajsnm bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 mklausjenrhtm uajskeiolksb py-2 text-gray-100 bg-primary-700 text-center">
<h3 class="text-base leading-normal font-semibold my-1 text-gray-100">Video Marketing</h3>
<small class="d-block">Video</small>
</figcaption>
</div>
</figure>
<figure x-show="tab === 'photo' || tab === 'all'" data-src="src/img-min/project/project_5.jpg" class="shrink max-w-full uajskeiolksb w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
<div class="relative mklausjenrhtm cursor-pointer mb-6">
<img class="block w-full h-auto transform duration-500 hover:scale-125" src="src/img-min/project/project_5.jpg" alt="Image Description">
<figcaption class="absolute ajsklekajsnm bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 mklausjenrhtm uajskeiolksb py-2 text-gray-100 bg-primary-700 text-center">
<h3 class="text-base leading-normal font-semibold my-1 text-gray-100">Photography</h3>
<small class="d-block">Photo</small>
</figcaption>
</div>
</figure>
<figure x-show="tab === 'web' || tab === 'all'" data-src="src/img-min/project/project_6.jpg" class="shrink max-w-full uajskeiolksb w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
<div class="relative mklausjenrhtm cursor-pointer mb-6">
<img class="block w-full h-auto transform duration-500 hover:scale-125" src="src/img-min/project/project_6.jpg" alt="Image Description">
<figcaption class="absolute ajsklekajsnm bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 mklausjenrhtm uajskeiolksb py-2 text-gray-100 bg-primary-700 text-center">
<h3 class="text-base leading-normal font-semibold my-1 text-gray-100">Apps Development</h3>
<small class="d-block">Apps</small>
</figcaption>
</div>
</figure>
</div>
</div>
<div class="container xl:max-w-6xl mx-auto uajskeiolksb">
<div class="flex flex-wrap klsuaonrmcha -mx-4">
<div class="w-full uajskeiolksb text-center mt-6">
<a href="#" class="py-3 px-5 inline-block text-center rounded-md leading-normal text-gray-100 bg-primary-700 border border-primary-700 hover:text-white hover:bg-primary-800 hover:ring-0 hover:border-primary-800 focus:bg-primary-800 focus:border-primary-800 focus:outline-hidden focus:ring-0">View all latest project</a>
</div>
</div>
</div>
</div><!-- End portfolio -->
Portfolio Sections style 2
Our Portfolio
Logo Design
Branding
Web Development
Web
Graphic Design
Graphic
Video Marketing
Video
Photography
Photo
Apps Development
Apps
<!-- portfolio start -->
<div id="portfolio" class="relative py-20 md:py-24 bg-gray-50 dark:bg-gray-900/20">
<div x-data="{ tab: 'all' }" class="container xl:max-w-6xl mx-auto uajskeiolksb">
<!-- section header -->
<header class="text-center mx-auto mb-12">
<h2 class="text-2xl md:text-3xl leading-normal mb-2 font-bold text-gray-800 dark:text-gray-100"><span class="font-light">Our</span> Portfolio</h2>
<hr class="block w-12 h-0.5 mx-auto my-5 bg-primary-700 border-primary-700">
</header><!-- end section header -->
<!-- navigation -->
<div class="space-x-5 text-center">
<button @click.prevent="tab = 'all'" :class="{ 'text-primary-700' : tab === 'all' }" class="inline-block bg-transparent border-0 outline-hidden mb-6 md:mb-12 focus:text-primary-700 focus:ring-0 focus:outline-hidden text-primary-700">
All
</button>
<button @click.prevent="tab = 'web'" :class="{ 'text-primary-700' : tab === 'web' }" class="inline-block bg-transparent border-0 outline-hidden mb-6 md:mb-12 focus:text-primary-700 focus:ring-0 focus:outline-hidden">
Web
</button>
<button @click.prevent="tab = 'graphic'" :class="{ 'text-primary-700' : tab === 'graphic' }" class="inline-block bg-transparent border-0 outline-hidden mb-6 md:mb-12 focus:text-primary-700 focus:ring-0 focus:outline-hidden">
Graphic
</button>
<button @click.prevent="tab = 'photo'" :class="{ 'text-primary-700' : tab === 'photo' }" class="inline-block bg-transparent border-0 outline-hidden mb-6 md:mb-12 focus:text-primary-700 focus:ring-0 focus:outline-hidden">
Photograpy
</button>
</div><!-- end navigation -->
<!-- Portfolio Content -->
<div class="flex flex-wrap klsuaonrmcha lightgallery-thumbnail">
<figure x-show="tab === 'graphic' || tab === 'photo' || tab === 'all'" data-src="src/img-min/project/project_1.jpg" class="shrink max-w-full w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
<div class="relative mklausjenrhtm cursor-pointer">
<img class="block w-full h-auto transform duration-500 hover:scale-125" src="src/img-min/project/project_1.jpg" alt="Image Description">
<figcaption class="absolute ajsklekajsnm bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 mklausjenrhtm uajskeiolksb py-2 text-gray-100 bg-primary-700 text-center">
<h3 class="text-base leading-normal font-semibold my-1 text-gray-100">Logo Design</h3>
<small class="d-block">Branding</small>
</figcaption>
</div>
</figure>
<figure x-show="tab === 'web' || tab === 'all'" data-src="src/img-min/project/project_2.jpg" class="shrink max-w-full w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
<div class="relative mklausjenrhtm cursor-pointer">
<img class="block w-full h-auto transform duration-500 hover:scale-125" src="src/img-min/project/project_2.jpg" alt="Image Description">
<figcaption class="absolute ajsklekajsnm bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 mklausjenrhtm uajskeiolksb py-2 text-gray-100 bg-primary-700 text-center">
<h3 class="text-base leading-normal font-semibold my-1 text-gray-100">Web Development</h3>
<small class="d-block">Web</small>
</figcaption>
</div>
</figure>
<figure x-show="tab === 'graphic' || tab === 'all'" data-src="src/img-min/project/project_3.jpg" class="shrink max-w-full w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
<div class="relative mklausjenrhtm cursor-pointer">
<img class="block w-full h-auto transform duration-500 hover:scale-125" src="src/img-min/project/project_3.jpg" alt="Image Description">
<figcaption class="absolute ajsklekajsnm bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 mklausjenrhtm uajskeiolksb py-2 text-gray-100 bg-primary-700 text-center">
<h3 class="text-base leading-normal font-semibold my-1 text-gray-100">Graphic Design</h3>
<small class="d-block">Graphic</small>
</figcaption>
</div>
</figure>
<figure x-show="tab === 'graphic' || tab === 'all'" data-src="src/img-min/project/project_4.jpg" class="shrink max-w-full w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
<div class="relative mklausjenrhtm cursor-pointer">
<img class="block w-full h-auto transform duration-500 hover:scale-125" src="src/img-min/project/project_4.jpg" alt="Image Description">
<figcaption class="absolute ajsklekajsnm bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 mklausjenrhtm uajskeiolksb py-2 text-gray-100 bg-primary-700 text-center">
<h3 class="text-base leading-normal font-semibold my-1 text-gray-100">Video Marketing</h3>
<small class="d-block">Video</small>
</figcaption>
</div>
</figure>
<figure x-show="tab === 'photo' || tab === 'all'" data-src="src/img-min/project/project_5.jpg" class="shrink max-w-full w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
<div class="relative mklausjenrhtm cursor-pointer">
<img class="block w-full h-auto transform duration-500 hover:scale-125" src="src/img-min/project/project_5.jpg" alt="Image Description">
<figcaption class="absolute ajsklekajsnm bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 mklausjenrhtm uajskeiolksb py-2 text-gray-100 bg-primary-700 text-center">
<h3 class="text-base leading-normal font-semibold my-1 text-gray-100">Photography</h3>
<small class="d-block">Photo</small>
</figcaption>
</div>
</figure>
<figure x-show="tab === 'web' || tab === 'all'" data-src="src/img-min/project/project_6.jpg" class="shrink max-w-full w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
<div class="relative mklausjenrhtm cursor-pointer">
<img class="block w-full h-auto transform duration-500 hover:scale-125" src="src/img-min/project/project_6.jpg" alt="Image Description">
<figcaption class="absolute ajsklekajsnm bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 mklausjenrhtm uajskeiolksb py-2 text-gray-100 bg-primary-700 text-center">
<h3 class="text-base leading-normal font-semibold my-1 text-gray-100">Apps Development</h3>
<small class="d-block">Apps</small>
</figcaption>
</div>
</figure>
</div>
</div>
<div class="container xl:max-w-6xl mx-auto uajskeiolksb">
<div class="flex flex-wrap klsuaonrmcha -mx-4">
<div class="w-full uajskeiolksb text-center mt-12">
<a href="#" class="py-3 px-5 inline-block text-center rounded-md leading-normal text-gray-100 bg-primary-700 border border-primary-700 hover:text-white hover:bg-primary-800 hover:ring-0 hover:border-primary-800 focus:bg-primary-800 focus:border-primary-800 focus:outline-hidden focus:ring-0">View all latest project</a>
</div>
</div>
</div>
</div><!-- End portfolio -->
Portfolio Sections style 3
Our Portfolio
App
Project Name
Website of the Business Center
Web
Project Name
Website of the Business Center
Web
Project Name
Website of the Business Center
Web
Project Name
Website of the Business Center
<!-- =========={ PORTFOLIO }========== -->
<div id="portfolio" class="relative py-20 md:py-24 bg-gray-100 dark:bg-gray-800">
<div class="container xl:max-w-6xl mx-auto uajskeiolksb">
<!-- section header -->
<header class="text-center mx-auto mb-12">
<h2 class="text-2xl md:text-3xl leading-normal mb-2 font-bold text-gray-800 dark:text-gray-100"><span class="font-light">Our</span> Portfolio</h2>
<hr class="block w-12 h-0.5 mx-auto my-5 bg-primary-700 border-primary-700">
</header><!-- end section header -->
<!-- slider -->
<div class="lightgallery-slider mb-20 lg:mb-4 carousel nav-dark-button nav-outset-button" data-flickity='{ "cellAlign": "left", "wrapAround": true, "pageDots": false, "draggable": false, "adaptiveHeight": true, "prevNextButtons": true , "imagesLoaded": true }'>
<!-- item -->
<div class="slider-item max-w-full w-full md:w-1/2 lg:w-1/3 uajskeiolksb cursor-pointer" data-src="src/img/web/project1.jpg" data-sub-html="Screenshot 2">
<div class="relative">
<div class="h-72 relative">
<div class="absolute inset-0 bg-top hover:bg-bottom" style="background-image: url('src/img/web/project1.jpg');background-repeat: no-repeat;transition: 2s;background-size: 100%;">
<img class="hidden" src="src/img/web/project1.jpg">
</div>
</div>
<div class="relative bg-white dark:bg-gray-900">
<div class="p-4">
<p class="text-sm text-gray-500 mb-1.5">App</p>
<h3 class="text-xl font-bold mb-1.5">Project Name</h3>
<p class="text-lg">Website of the Business Center</p>
</div>
<div class="relative p-4">
<button class="inline-block py-2 dkslaoeyhnmj bg-white text-black font-semibold uppercase border-2 border-black hover:bg-black hover:text-white mb-3">Look</button>
</div>
</div>
</div>
</div>
<!-- item -->
<div class="slider-item max-w-full w-full md:w-1/2 lg:w-1/3 uajskeiolksb cursor-pointer" data-src="src/img/web/project2.jpg" data-sub-html="Screenshot 3">
<div class="relative">
<div class="h-72 relative">
<div class="absolute inset-0 bg-top hover:bg-bottom" style="background-image: url('src/img/web/project2.jpg');background-repeat: no-repeat;transition: 2s;background-size: 100%;">
<img class="hidden" src="src/img/web/project2.jpg">
</div>
</div>
<div class="relative bg-white dark:bg-gray-900">
<div class="p-4">
<p class="text-sm text-gray-500 mb-1.5">Web</p>
<h3 class="text-xl font-bold mb-1.5">Project Name</h3>
<p class="text-lg">Website of the Business Center</p>
</div>
<div class="relative p-4">
<button class="inline-block py-2 dkslaoeyhnmj bg-white text-black font-semibold uppercase border-2 border-black hover:bg-black hover:text-white mb-3">Look</button>
</div>
</div>
</div>
</div>
<!-- item -->
<div class="slider-item max-w-full w-full md:w-1/2 lg:w-1/3 uajskeiolksb cursor-pointer" data-src="src/img/web/project3.jpg" data-sub-html="Screenshot 3">
<div class="relative">
<div class="h-72 relative">
<div class="absolute inset-0 bg-top hover:bg-bottom" style="background-image: url('src/img/web/project3.jpg');background-repeat: no-repeat;transition: 2s;background-size: 100%;">
<img class="hidden" src="src/img/web/project3.jpg">
</div>
</div>
<div class="relative bg-white dark:bg-gray-900">
<div class="p-4">
<p class="text-sm text-gray-500 mb-1.5">Web</p>
<h3 class="text-xl font-bold mb-1.5">Project Name</h3>
<p class="text-lg">Website of the Business Center</p>
</div>
<div class="relative p-4">
<button class="inline-block py-2 dkslaoeyhnmj bg-white text-black font-semibold uppercase border-2 border-black hover:bg-black hover:text-white mb-3">Look</button>
</div>
</div>
</div>
</div>
<!-- item -->
<div class="slider-item max-w-full w-full md:w-1/2 lg:w-1/3 uajskeiolksb cursor-pointer" data-src="src/img/web/project4.jpg" data-sub-html="Screenshot 1">
<div class="relative">
<div class="h-72 relative">
<div class="absolute inset-0 bg-top hover:bg-bottom" style="background-image: url('src/img/web/project4.jpg');background-repeat: no-repeat;transition: 2s;background-size: 100%;">
<img class="hidden" src="src/img/web/project4.jpg">
</div>
</div>
<div class="relative bg-white dark:bg-gray-900">
<div class="p-4">
<p class="text-sm text-gray-500 mb-1.5">Web</p>
<h3 class="text-xl font-bold mb-1.5">Project Name</h3>
<p class="text-lg">Website of the Business Center</p>
</div>
<div class="relative p-4">
<button class="inline-block py-2 dkslaoeyhnmj bg-white text-black font-semibold uppercase border-2 border-black hover:bg-black hover:text-white mb-3">Look</button>
</div>
</div>
</div>
</div>
</div><!-- end slider -->
</div>
</div><!-- End portfolio -->