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 px-4">
<!-- 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-blue-700 border-blue-700">
</header><!-- end section header -->
<!-- navigation -->
<div class="space-x-5 text-center">
<button @click.prevent="tab = 'all'" :class="{ 'text-blue-700' : tab === 'all' }" class="inline-block bg-transparent border-0 outline-none mb-6 md:mb-12 focus:text-blue-700 focus:ring-0 focus:outline-none text-blue-700">
All
</button>
<button @click.prevent="tab = 'web'" :class="{ 'text-blue-700' : tab === 'web' }" class="inline-block bg-transparent border-0 outline-none mb-6 md:mb-12 focus:text-blue-700 focus:ring-0 focus:outline-none">
Web
</button>
<button @click.prevent="tab = 'graphic'" :class="{ 'text-blue-700' : tab === 'graphic' }" class="inline-block bg-transparent border-0 outline-none mb-6 md:mb-12 focus:text-blue-700 focus:ring-0 focus:outline-none">
Graphic
</button>
<button @click.prevent="tab = 'photo'" :class="{ 'text-blue-700' : tab === 'photo' }" class="inline-block bg-transparent border-0 outline-none mb-6 md:mb-12 focus:text-blue-700 focus:ring-0 focus:outline-none">
Photograpy
</button>
</div><!-- end navigation -->
<!-- Portfolio Content -->
<div class="flex flex-wrap flex-row -mx-4 lightgallery-thumbnail">
<figure x-show="tab === 'graphic' || tab === 'photo' || tab === 'all'" data-src="src/img-min/project/project_1.jpg" class="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
<div class="relative overflow-hidden 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 inset-x-0 bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 overflow-hidden px-4 py-2 text-gray-100 bg-blue-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="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
<div class="relative overflow-hidden 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 inset-x-0 bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 overflow-hidden px-4 py-2 text-gray-100 bg-blue-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="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
<div class="relative overflow-hidden 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 inset-x-0 bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 overflow-hidden px-4 py-2 text-gray-100 bg-blue-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="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
<div class="relative overflow-hidden 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 inset-x-0 bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 overflow-hidden px-4 py-2 text-gray-100 bg-blue-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="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
<div class="relative overflow-hidden 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 inset-x-0 bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 overflow-hidden px-4 py-2 text-gray-100 bg-blue-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="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
<div class="relative overflow-hidden 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 inset-x-0 bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 overflow-hidden px-4 py-2 text-gray-100 bg-blue-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 px-4">
<div class="flex flex-wrap flex-row -mx-4">
<div class="w-full px-4 text-center mt-6">
<a href="#" class="py-3 px-5 inline-block text-center rounded-md leading-normal text-gray-100 bg-blue-700 border border-blue-700 hover:text-white hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:bg-blue-800 focus:border-blue-800 focus:outline-none 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 dark:bg-opacity-20">
<div x-data="{ tab: 'all' }" class="container xl:max-w-6xl mx-auto px-4">
<!-- 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-blue-700 border-blue-700">
</header><!-- end section header -->
<!-- navigation -->
<div class="space-x-5 text-center">
<button @click.prevent="tab = 'all'" :class="{ 'text-blue-700' : tab === 'all' }" class="inline-block bg-transparent border-0 outline-none mb-6 md:mb-12 focus:text-blue-700 focus:ring-0 focus:outline-none text-blue-700">
All
</button>
<button @click.prevent="tab = 'web'" :class="{ 'text-blue-700' : tab === 'web' }" class="inline-block bg-transparent border-0 outline-none mb-6 md:mb-12 focus:text-blue-700 focus:ring-0 focus:outline-none">
Web
</button>
<button @click.prevent="tab = 'graphic'" :class="{ 'text-blue-700' : tab === 'graphic' }" class="inline-block bg-transparent border-0 outline-none mb-6 md:mb-12 focus:text-blue-700 focus:ring-0 focus:outline-none">
Graphic
</button>
<button @click.prevent="tab = 'photo'" :class="{ 'text-blue-700' : tab === 'photo' }" class="inline-block bg-transparent border-0 outline-none mb-6 md:mb-12 focus:text-blue-700 focus:ring-0 focus:outline-none">
Photograpy
</button>
</div><!-- end navigation -->
<!-- Portfolio Content -->
<div class="flex flex-wrap flex-row lightgallery-thumbnail">
<figure x-show="tab === 'graphic' || tab === 'photo' || tab === 'all'" data-src="src/img-min/project/project_1.jpg" class="flex-shrink max-w-full w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
<div class="relative overflow-hidden 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 inset-x-0 bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 overflow-hidden px-4 py-2 text-gray-100 bg-blue-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="flex-shrink max-w-full w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
<div class="relative overflow-hidden 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 inset-x-0 bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 overflow-hidden px-4 py-2 text-gray-100 bg-blue-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="flex-shrink max-w-full w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
<div class="relative overflow-hidden 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 inset-x-0 bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 overflow-hidden px-4 py-2 text-gray-100 bg-blue-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="flex-shrink max-w-full w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
<div class="relative overflow-hidden 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 inset-x-0 bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 overflow-hidden px-4 py-2 text-gray-100 bg-blue-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="flex-shrink max-w-full w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
<div class="relative overflow-hidden 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 inset-x-0 bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 overflow-hidden px-4 py-2 text-gray-100 bg-blue-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="flex-shrink max-w-full w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
<div class="relative overflow-hidden 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 inset-x-0 bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 overflow-hidden px-4 py-2 text-gray-100 bg-blue-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 px-4">
<div class="flex flex-wrap flex-row -mx-4">
<div class="w-full px-4 text-center mt-12">
<a href="#" class="py-3 px-5 inline-block text-center rounded-md leading-normal text-gray-100 bg-blue-700 border border-blue-700 hover:text-white hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:bg-blue-800 focus:border-blue-800 focus:outline-none 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 px-4">
<!-- 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-blue-700 border-blue-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 px-4 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">
<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 px-6 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 px-4 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">
<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 px-6 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 px-4 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">
<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 px-6 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 px-4 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">
<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 px-6 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 -->