<!doctype html>
<html class="no-js" lang="en">
<head>
<!-- title -->
<title>POFO – Creative Agency, Corporate and Portfolio Multi-purpose Template</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
<meta name="author" content="ThemeZaa">
<!-- description -->
<meta name="description" content="POFO is a highly creative, modern, visually stunning and Bootstrap responsive multipurpose agency and portfolio HTML5 template with 25 ready home page demos.">
<!-- keywords -->
<meta name="keywords" content="creative, modern, clean, bootstrap responsive, html5, css3, portfolio, blog, agency, templates, multipurpose, one page, corporate, start-up, studio, branding, designer, freelancer, carousel, parallax, photography, personal, masonry, grid, coming soon, faq">
<!-- favicon -->
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<!-- style sheets and font icons -->
<link rel="stylesheet" type="text/css" href="css/bootsnav.css">
<link rel="stylesheet" type="text/css" href="css/font-icons.min.css">
<link rel="stylesheet" type="text/css" href="css/theme-vendors.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/responsive.css" />
</head>
<body>
<!-- start header -->
<header>
<!-- start navigation -->
<nav class="navbar navbar-default bootsnav navbar-top header-light background-transparent nav-box-width white-link navbar-expand-lg">
<div class="container-fluid nav-header-container">
<!-- start logo -->
<div class="col-auto ps-0">
<a href="index.html" title="Pofo" class="logo"><img src="images/logo.png" data-at2x="images/logo@2x.png" class="logo-dark" alt="Pofo"><img src="images/logo-white.png" data-at2x="images/logo-white@2x.png" alt="Pofo" class="logo-light default"></a>
</div>
<!-- end logo -->
<div class="col accordion-menu pe-0 pe-md-3">
<button type="button" class="navbar-toggler collapsed" data-bs-toggle="collapse" data-bs-target="#navbar-collapse-toggle-1">
<span class="sr-only">toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-collapse collapse justify-content-end" id="navbar-collapse-toggle-1">
<ul id="accordion" class="nav navbar-nav no-margin alt-font text-normal" data-in="animate__fadeIn" data-out="animate__fadeOut">
<!-- start menu item -->
<li class="dropdown megamenu-fw">
<a href="#">Home</a><i class="fas fa-angle-down dropdown-toggle" data-bs-toggle="dropdown" aria-hidden="true"></i>
<!-- start sub menu -->
<div class="menu-back-div dropdown-menu megamenu-content mega-menu collapse mega-menu-full">
<ul>
<!-- start sub menu column -->
<li class="mega-menu-column col-12 col-lg-3">
<!-- start sub menu item -->
<ul>
<li class="dropdown-header">Classic Homepages</li>
<li><a href="home-classic-corporate.html">Classic corporate</a></li>
<li><a href="home-classic-digital-agency.html">Classic digital agency</a></li>
<li><a href="home-classic-innovation-agency.html">Classic innovation agency</a></li>
<li><a href="home-classic-web-agency.html">Classic web agency</a></li>
<li><a href="home-classic-one-page.html">Classic one page</a></li>
<li><a href="home-classic-start-up.html">Classic start-up</a></li>
<li><a href="home-classic-interactive-agency.html">Classic interactive agency</a></li>
<li class="menu-new"><a href="home-classic-business.html">Classic business</a></li>
</ul>
<!-- end sub menu item -->
</li>
<!-- end sub menu column -->
<!-- start sub menu column -->
<li class="mega-menu-column col-12 col-lg-3">
<!-- start sub menu item -->
<ul>
<li class="dropdown-header">Creative Homepages</li>
<li><a href="home-creative-studio.html">Creative studio</a></li>
<li><a href="home-creative-business.html">Creative business</a></li>
<li><a href="home-creative-simple-portfolio.html">Creative simple portfolio</a></li>
<li><a href="home-creative-branding-agency.html">Creative branding agency</a></li>
<li class="menu-new"><a href="home-creative-minimalist-portfolio.html">creative minimalist portfolio</a></li>
<li><a href="home-creative-small-business.html">Creative small business</a></li>
<li><a href="home-creative-designer.html">Creative designer</a></li>
<li><a href="home-creative-agency.html">Creative agency</a></li>
</ul>
<!-- end sub menu item -->
</li>
<!-- end sub menu column -->
<!-- start sub menu column -->
<li class="mega-menu-column col-12 col-lg-3">
<!-- start sub menu item -->
<ul>
<li class="dropdown-header">Portfolio Homepages</li>
<li><a href="home-portfolio-minimal.html">Portfolio minimal</a></li>
<li><a href="home-portfolio-multiple-carousel.html">Portfolio multiple carousel</a></li>
<li><a href="home-portfolio-centered-slides.html">Portfolio centered slides</a></li>
<li><a href="home-portfolio-personal.html">Portfolio personal</a></li>
<li><a href="home-portfolio-metro.html">Portfolio metro</a></li>
<li><a href="home-portfolio-full-screen-vertical.html">Portfolio full screen – vertical</a></li>
<li><a href="home-portfolio-photographer.html">Portfolio photographer</a></li>
<li><a href="home-portfolio-parallax.html">Portfolio parallax</a></li>
</ul>
<!-- end sub menu item -->
</li>
<!-- end sub menu column -->
<!-- start sub menu column -->
<li class="mega-menu-column col-12 col-lg-3">
<!-- start sub menu item -->
<ul>
<li class="dropdown-header">Blog Homepages</li>
<li><a href="home-blog-grid.html">Blog grid</a></li>
<li><a href="home-blog-masonry.html">Blog masonry</a></li>
<li><a href="home-blog-clean.html">Blog clean</a></li>
<li><a href="home-blog-personal.html">Blog personal</a></li>
</ul>
<!-- end sub menu item -->
</li>
<!-- end sub menu column -->
</ul>
<!-- end sub menu -->
</div>
</li>
<!-- end menu item -->
<li class="dropdown simple-dropdown"><a href="#">Pages</a><i class="fas fa-angle-down dropdown-toggle" data-bs-toggle="dropdown" aria-hidden="true"></i>
<!-- start sub menu -->
<ul class="dropdown-menu" role="menu">
<li class="dropdown"><a class="dropdown-toggle" data-bs-toggle="dropdown" href="#">About <i class="fas fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="about-us-simple.html">About us simple</a></li>
<li><a href="about-us-classic.html">About us classic</a></li>
<li><a href="about-us-modern.html">About us modern</a></li>
<li><a href="about-me.html">About me</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-bs-toggle="dropdown" href="#">Services <i class="fas fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="services-simple.html">Services simple</a></li>
<li><a href="services-classic.html">Services classic</a></li>
<li><a href="services-modern.html">Services modern</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-bs-toggle="dropdown" href="#">Contact <i class="fas fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="contact-us-simple.html">Contact simple</a></li>
<li><a href="contact-us-classic.html">Contact classic</a></li>
<li><a href="contact-us-classic-02.html">Contact classic – style 02</a></li>
<li><a href="contact-us-modern.html">Contact modern</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-bs-toggle="dropdown" href="#">Team <i class="fas fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="team-simple.html">Team simple</a></li>
<li><a href="team-classic.html">Team classic</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-bs-toggle="dropdown" href="#">Additional Pages <i class="fas fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="our-clients.html">Our clients</a></li>
<li><a href="404.html">Error 404</a></li>
<li><a href="coming-soon.html">Coming soon</a></li>
<li><a href="coming-soon-02.html">Coming soon – style 02</a></li>
<li><a href="faq.html">Faq</a></li>
<li><a href="maintenance.html">Maintenance</a></li>
<li><a href="search-result.html">Search result</a></li>
<li><a href="pricing.html">Pricing</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown megamenu-fw">
<a href="#">Portfolio</a><i class="fas fa-angle-down dropdown-toggle" data-bs-toggle="dropdown" aria-hidden="true"></i>
<!-- start sub menu -->
<div class="menu-back-div dropdown-menu megamenu-content mega-menu collapse mega-menu-full">
<ul>
<!-- start sub menu column -->
<li class="mega-menu-column col-12 col-lg-3">
<!-- start sub menu item -->
<ul>
<li class="dropdown-header">Grid - Full width Layouts</li>
<li><a href="portfolio-full-width-grid-overlay.html">Portfolio grid overlay</a></li>
<li><a href="portfolio-full-width-grid-with-icon.html">Portfolio grid with icon</a></li>
<li><a href="portfolio-full-width-grid-transform.html">Portfolio grid transform</a></li>
<li><a href="portfolio-full-width-grid-zooming.html">Portfolio grid zooming</a></li>
</ul>
<ul>
<li class="dropdown-header">Masonry - Full width Layouts</li>
<li><a href="portfolio-full-width-masonry-overlay.html">Portfolio masonry overlay</a></li>
<li><a href="portfolio-full-width-masonry-with-icon.html">Portfolio masonry with icon</a></li>
</ul>
<ul>
<li class="dropdown-header">Metro - Full width Layouts</li>
<li><a href="portfolio-full-width-metro-overlay.html">Portfolio metro overlay</a></li>
<li><a href="portfolio-full-width-metro-with-icon.html">Portfolio metro with icon</a></li>
<li><a href="portfolio-full-width-metro-transform.html">Portfolio metro transform</a></li>
<li><a href="portfolio-full-width-metro-zooming.html">Portfolio metro zooming</a></li>
</ul>
<ul>
<li class="dropdown-header">Other - Full width Layouts</li>
<li><a href="portfolio-full-width-image-gallery.html">Portfolio image gallery</a></li>
<li><a href="portfolio-full-width-justified-gallery.html">Portfolio justified</a></li>
<li><a href="portfolio-full-width-carousel.html">Portfolio carousel</a></li>
<li><a href="portfolio-full-width-parallax.html">Portfolio parallax</a></li>
</ul>
<!-- end sub menu item -->
</li>
<!-- end sub menu column -->
<!-- start sub menu column -->
<li class="mega-menu-column col-12 col-lg-3">
<!-- start sub menu item -->
<ul>
<li class="dropdown-header">Grid - Boxed Layouts</li>
<li><a href="portfolio-boxed-grid-overlay.html">Portfolio grid overlay</a></li>
<li><a href="portfolio-boxed-grid-with-icon.html">Portfolio grid with icon</a></li>
<li><a href="portfolio-boxed-grid-transform.html">Portfolio grid transform</a></li>
<li><a href="portfolio-boxed-grid-zooming.html">Portfolio grid zooming</a></li>
</ul>
<ul>
<li class="dropdown-header">Masonry - Boxed Layouts</li>
<li><a href="portfolio-boxed-masonry-overlay.html">Portfolio masonry overlay</a></li>
<li><a href="portfolio-boxed-masonry-with-icon.html">Portfolio masonry with icon</a></li>
</ul>
<ul>
<li class="dropdown-header">Metro - Boxed Layouts</li>
<li><a href="portfolio-boxed-metro-overlay.html">Portfolio metro overlay</a></li>
<li><a href="portfolio-boxed-metro-with-icon.html">Portfolio metro with icon</a></li>
<li><a href="portfolio-boxed-metro-transform.html">Portfolio metro transform</a></li>
<li><a href="portfolio-boxed-metro-zooming.html">Portfolio metro zooming</a></li>
</ul>
<ul>
<li class="dropdown-header">Other - Boxed Layouts</li>
<li><a href="portfolio-boxed-image-gallery.html">Portfolio image gallery</a></li>
<li><a href="portfolio-boxed-justified-gallery.html">Portfolio justified</a></li>
<li><a href="portfolio-boxed-carousel.html">Portfolio carousel</a></li>
<li><a href="portfolio-boxed-parallax.html">Portfolio parallax</a></li>
</ul>
<!-- end sub menu item -->
</li>
<!-- end sub menu column -->
<!-- start sub menu column -->
<li class="mega-menu-column col-12 col-lg-3">
<!-- start sub menu item -->
<ul>
<li class="dropdown-header">Single Project Page</li>
<li><a href="single-project-page-01.html">Single project page 01</a></li>
<li><a href="single-project-page-02.html">Single project page 02</a></li>
<li><a href="single-project-page-03.html">Single project page 03</a></li>
<li><a href="single-project-page-04.html">Single project page 04</a></li>
<li><a href="single-project-page-05.html">Single project page 05</a></li>
<li><a href="single-project-page-06.html">Single project page 06</a></li>
<li><a href="single-project-page-07.html">Single project page 07</a></li>
<li><a href="single-project-page-08.html">Single project page 08</a></li>
</ul>
<!-- end sub menu item -->
<ul>
<li class="dropdown-header">Portfolio Columns</li>
<li><a href="portfolio-two-columns.html">Portfolio 2 columns</a></li>
<li><a href="portfolio-three-columns.html">Portfolio 3 columns</a></li>
<li><a href="portfolio-four-columns.html">Portfolio 4 columns</a></li>
<li><a href="portfolio-five-columns.html">Portfolio 5 columns</a></li>
</ul>
</li>
<!-- end sub menu column -->
<!-- start sub menu column -->
<li class="mega-menu-column col-12 col-lg-3 d-none d-lg-block">
<!-- start sub menu item -->
<ul>
<li>
<a href="home-creative-studio.html" class="menu-banner-image"><img src="images/menu-banner-01.png" alt="portfolio"/></a>
</li>
<li>
<a href="home-creative-business.html" class="menu-banner-image"><img src="images/menu-banner-02.png" alt="portfolio"/></a>
</li>
</ul>
<!-- end sub menu item -->
</li>
<!-- end sub menu column -->
</ul>
<!-- end sub menu -->
</div>
</li>
<li class="dropdown simple-dropdown"><a href="#" title="Blog">Blog</a><i class="fas fa-angle-down dropdown-toggle" data-bs-toggle="dropdown" aria-hidden="true"></i>
<!-- start sub menu -->
<ul class="dropdown-menu" role="menu">
<li class="dropdown"><a class="dropdown-toggle" data-bs-toggle="dropdown" href="#">Blog Standard <i class="fas fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="blog-standard-full-width.html">Blog standard – full width</a></li>
<li><a href="blog-standard-with-left-sidebar.html">Blog standard with left sidebar</a></li>
<li><a href="blog-standard-with-right-sidebar.html">Blog standard with right sidebar</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-bs-toggle="dropdown" href="#">Blog Classic <i class="fas fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="blog-classic.html">Blog classic</a></li>
<li><a href="blog-classic-full-width.html">Blog classic – full width</a></li>
</ul></li>
<li class="dropdown"><a class="dropdown-toggle" data-bs-toggle="dropdown" href="#">Blog List <i class="fas fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="blog-list.html">Blog list</a></li>
<li><a href="blog-list-full-width.html">Blog list – full width</a></li>
</ul></li>
<li class="dropdown"><a class="dropdown-toggle" data-bs-toggle="dropdown" href="#">Blog Grid <i class="fas fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="blog-grid.html">Blog grid</a></li>
<li><a href="blog-grid-full-width.html">Blog grid – full width</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-bs-toggle="dropdown" href="#">Blog Masonry <i class="fas fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="blog-masonry.html">Blog masonry</a></li>
<li><a href="blog-masonry-full-width.html">Blog masonry – full width</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-bs-toggle="dropdown" href="#">Blog Simple <i class="fas fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="blog-simple.html">Blog simple</a></li>
<li><a href="blog-simple-full-width.html">Blog simple – full width</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-bs-toggle="dropdown" href="#">Blog Clean <i class="fas fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="blog-clean.html">Blog clean</a></li>
<li><a href="blog-clean-full-width.html">Blog clean – full width</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-bs-toggle="dropdown" href="#">Blog Images <i class="fas fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="blog-images.html">Blog images</a></li>
<li><a href="blog-images-full-width.html">Blog images – full width</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-bs-toggle="dropdown" href="#">Blog Only Text <i class="fas fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="blog-only-text.html">Blog only text</a></li>
<li><a href="blog-only-text-full-width.html">Blog only text – full width</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-bs-toggle="dropdown" href="#">Post Layout <i class="fas fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="blog-post-layout-01.html">Blog post layout 01</a></li>
<li><a href="blog-post-layout-02.html">Blog post layout 02</a></li>
<li><a href="blog-post-layout-03.html">Blog post layout 03</a></li>
<li><a href="blog-post-layout-04.html">Blog post layout 04</a></li>
<li><a href="blog-post-layout-05.html">Blog post layout 05</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-bs-toggle="dropdown" href="#">Post Types <i class="fas fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="blog-standard-post.html">Standard post</a></li>
<li><a href="blog-gallery-post.html">Gallery post</a></li>
<li><a href="blog-slider-post.html">Slider post</a></li>
<li><a href="blog-html5-video-post.html">HTML5 video post</a></li>
<li><a href="blog-youtube-video-post.html">Youtube video post</a></li>
<li><a href="blog-vimeo-video-post.html">Vimeo video post</a></li>
<li><a href="blog-audio-post.html">Audio post</a></li>
<li><a href="blog-blockquote-post.html">Blockquote post</a></li>
<li><a href="blog-full-width-post.html">Full width post</a></li>
</ul>
</li>
</ul>
<!-- end sub menu -->
</li>
<li class="dropdown megamenu-fw">
<a href="#">Elements</a><i class="fas fa-angle-down dropdown-toggle" data-bs-toggle="dropdown" aria-hidden="true"></i>
<!-- start sub menu -->
<div class="menu-back-div dropdown-menu megamenu-content mega-menu collapse mega-menu-full icon-list-menu">
<ul>
<!-- start sub menu column -->
<li class="mega-menu-column col-12 col-lg-3">
<!-- start sub menu item -->
<ul>
<li class="dropdown-header">General elements</li>
<li><a href="accordions.html"><i class="ti-layout-accordion-separated"></i> Accordions</a></li>
<li><a href="buttons.html"><i class="ti-mouse"></i> Buttons</a></li>
<li><a href="team.html"><i class="ti-user"></i> Team</a></li>
<li><a href="team-carousel.html"><i class="ti-layout-slider-alt"></i> Team carousel</a></li>
<li><a href="clients.html"><i class="ti-id-badge"></i> Clients</a></li>
<li><a href="client-carousel.html"><i class="ti-layout-slider"></i> Client carousel</a></li>
<li><a href="subscribe.html"><i class="ti-bookmark"></i> Subscribe</a></li>
<li><a href="call-to-action.html"><i class="ti-headphone-alt"></i> Call to action</a></li>
<li><a href="tab.html"><i class="ti-layout-tab"></i> Tab</a></li>
<li><a href="google-map.html"><i class="ti-location-pin"></i> Google map</a></li>
<li><a href="text-slider.html"><i class="ti-layout-media-overlay"></i> Text slider</a></li>
<li><a href="contact-form.html"><i class="ti-clipboard"></i> Contact form</a></li>
<li><a href="image-gallery.html"><i class="ti-gallery"></i> Image gallery</a></li>
</ul>
<!-- end sub menu item -->
</li>
<!-- end sub menu column -->
<!-- start sub menu column -->
<li class="mega-menu-column col-12 col-lg-3">
<!-- start sub menu item -->
<ul>
<li class="dropdown-header">Infographics / icons</li>
<li><a href="progress-bar.html"><i class="icon-hourglass"></i> Progress bar</a></li>
<li><a href="icon-with-text.html"><i class="ti-layout-media-left"></i> Icon with text</a></li>
<li><a href="overline-icon-box.html"><i class="ti-layout-placeholder"></i> Overline icon box</a></li>
<li><a href="custom-icon-with-text.html"><i class="ti-layout-cta-btn-left"></i> Custom icon with text</a></li>
<li><a href="counters.html"><i class="ti-timer"></i> Counters</a></li>
<li><a href="countdown.html"><i class="ti-alarm-clock"></i> Countdown</a></li>
<li><a href="pie-charts.html"><i class="ti-pie-chart"></i> Pie charts</a></li>
<li><a href="text-box.html"><i class="ti-layout-cta-left"></i> Text box</a></li>
<li><a href="fancy-text-box.html"><i class="ti-layout-cta-center"></i> Fancy text box</a></li>
</ul>
<!-- end sub menu item -->
</li>
<!-- end sub menu column -->
<!-- start sub menu column -->
<li class="mega-menu-column col-12 col-lg-3">
<!-- start sub menu item -->
<ul>
<li class="dropdown-header">Interactive Elements</li>
<li><a href="testimonials.html"><i class="ti-thought"></i> Testimonials</a></li>
<li><a href="testimonials-carousel.html"><i class="ti-comments"></i> Testimonials carousel</a></li>
<li><a href="video.html"><i class="ti-video-camera"></i> Video</a></li>
<li><a href="interactive-banners.html"><i class="ti-image"></i> Interactive banners</a></li>
<li><a href="services.html"><i class="ti-headphone-alt"></i> Services</a></li>
<li><a href="portfolio-slider.html"><i class="ti-layout-slider-alt"></i> Portfolio slider</a></li>
<li><a href="info-banner.html"><i class="ti-layout-slider"></i> Info banner</a></li>
<li><a href="rotate-box.html"><i class="ti-layout-width-full"></i> Rotate box</a></li>
<li><a href="process-step.html"><i class="ti-stats-up"></i> Process step</a></li>
<li><a href="blog-posts.html"><i class="ti-comment-alt"></i> Blog posts</a></li>
<li><a href="instagram.html"><i class="ti-instagram"></i> Instagram</a></li>
<li><a href="parallax-scrolling.html"><i class="ti-exchange-vertical"></i> Parallax scrolling</a></li>
</ul>
<!-- end sub menu item -->
</li>
<!-- end sub menu column -->
<!-- start sub menu column -->
<li class="mega-menu-column col-12 col-lg-3">
<!-- start sub menu item -->
<ul>
<li class="dropdown-header">Text & containers</li>
<li><a href="heading.html"><i class="ti-text"></i> Heading</a></li>
<li><a href="dropcaps.html"><i class="ti-layout-accordion-list"></i> Dropcaps</a></li>
<li><a href="columns.html"><i class="ti-layout-column3-alt"></i> Columns</a></li>
<li><a href="blockquote.html"><i class="ti-quote-left"></i> Blockquote</a></li>
<li><a href="highlights.html"><i class="ti-underline"></i> Highlights</a></li>
<li><a href="message-box.html"><i class="ti-layout-media-right-alt"></i> Message box</a></li>
<li><a href="social-icons.html"><i class="ti-signal"></i> Social icons</a></li>
<li><a href="lists.html"><i class="ti-list"></i> Lists</a></li>
<li><a href="seperators.html"><i class="ti-layout-line-solid"></i> Separators</a></li>
<li><a href="pricing-table.html"><i class="ti-layout-grid2-thumb"></i> Pricing table</a></li>
</ul>
<!-- end sub menu item -->
</li>
<!-- end sub menu column -->
</ul>
<!-- end sub menu -->
</div>
</li>
<li class="dropdown megamenu-fw">
<a href="#">Features</a><i class="fas fa-angle-down dropdown-toggle" data-bs-toggle="dropdown" aria-hidden="true"></i>
<!-- start sub menu -->
<div class="menu-back-div dropdown-menu megamenu-content mega-menu collapse mega-menu-full">
<ul>
<!-- start sub menu column -->
<li class="mega-menu-column col-12 col-lg-3">
<!-- start sub menu item -->
<ul>
<li class="dropdown-header">Header Styles</li>
<li><a href="transparent-header.html">Transparent header</a></li>
<li><a href="white-header.html">White header</a></li>
<li><a href="dark-header.html">Dark header</a></li>
<li><a href="header-with-top-bar.html">Header with top bar</a></li>
<li><a href="header-with-sticky-top-bar.html">Header with sticky top bar</a></li>
<li><a href="header-with-push.html">Header with push</a></li>
<li><a href="center-navigation.html">Center navigation</a></li>
<li><a href="center-logo.html">Center logo</a></li>
<li><a href="top-logo.html">Top logo</a></li>
<li><a href="one-page-navigation.html">One page navigation</a></li>
<li><a href="hamburger-menu.html">Hamburger menu</a></li>
<li><a href="hamburger-menu-modern.html">Hamburger menu modern</a></li>
<li><a href="hamburger-menu-half.html">Hamburger menu half</a></li>
<li><a href="left-menu-classic.html">Left menu classic</a></li>
<li><a href="left-menu-modern.html">Left menu modern</a></li>
</ul>
<!-- end sub menu item -->
</li>
<!-- end sub menu column -->
<!-- start sub menu column -->
<li class="mega-menu-column col-12 col-lg-3">
<!-- start sub menu item -->
<ul>
<li class="dropdown-header">Footer</li>
<li><a href="footer-standard.html">Footer standard</a></li>
<li><a href="footer-standard-dark.html">Footer standard dark</a></li>
<li><a href="footer-classic.html">Footer classic</a></li>
<li><a href="footer-classic-dark.html">Footer classic dark</a></li>
<li><a href="footer-clean.html">Footer clean</a></li>
<li><a href="footer-clean-dark.html">Footer clean dark</a></li>
<li><a href="footer-modern.html">Footer modern</a></li>
<li><a href="footer-modern-dark.html">Footer modern dark</a></li>
<li><a href="footer-center-logo.html">Footer center logo </a></li>
<li><a href="footer-center-logo-dark.html">Footer center logo dark</a></li>
<li><a href="footer-strip.html">Footer strip</a></li>
<li><a href="footer-strip-dark.html">Footer strip dark</a></li>
<li><a href="footer-center-logo-02.html">Footer center logo 02</a></li>
<li><a href="footer-center-logo-02-dark.html">Footer center logo 02 dark</a></li>
<li class="menu-new"><a href="footer-clean-modern.html">footer clean modern</a></li>
<li class="menu-new"><a href="footer-clean-modern-dark.html">footer clean modern dark</a></li>
</ul>
<!-- end sub menu item -->
</li>
<!-- end sub menu column -->
<!-- start sub menu column -->
<li class="mega-menu-column col-12 col-lg-3">
<!-- start sub menu item -->
<ul>
<li class="dropdown-header">Page Title</li>
<li><a href="page-title-left-alignment.html">Left alignment</a></li>
<li><a href="page-title-right-alignment.html">Right alignment</a></li>
<li><a href="page-title-center-alignment.html">Center alignment</a></li>
<li><a href="page-title-dark-style.html">Dark style</a></li>
<li><a href="page-title-big-typography.html">Big typography</a></li>
<li><a href="page-title-parallax-image-background.html">Parallax image background</a></li>
<li><a href="page-title-background-breadcrumbs.html">Image after breadcrumbs</a></li>
<li><a href="page-title-gallery-background.html">Gallery background</a></li>
<li><a href="page-title-background-video.html">Background video</a></li>
<li><a href="page-title-mini-version.html">Mini version</a></li>
</ul>
<!-- end sub menu item -->
</li>
<!-- end sub menu column -->
<!-- start sub menu column -->
<li class="mega-menu-column col-12 col-lg-3">
<!-- start sub menu item -->
<ul>
<li class="dropdown-header">Gallery</li>
<li><a href="single-image-lightbox.html">Single image lightbox</a></li>
<li><a href="lightbox-gallery.html">Lightbox gallery</a></li>
<li><a href="zoom-gallery.html">Zoom gallery</a></li>
<li class="menu-new"><a href="metro-gallery.html">metro gallery</a></li>
<li class="menu-new"><a href="justified-gallery.html">justified gallery</a></li>
<li><a href="popup-with-form.html">Popup with form</a></li>
<li><a href="modal-popup.html">Modal popup</a></li>
<li><a href="open-youtube-video.html">Open youtube video</a></li>
<li><a href="open-vimeo-video.html">Open vimeo video</a></li>
<li><a href="open-google-map.html">Open google map</a></li>
</ul>
<!-- end sub menu item -->
</li>
<!-- end sub menu column -->
</ul>
<!-- end sub menu -->
</div>
</li>
</ul>
</div>
</div>
<div class="col-auto pe-0">
<div class="header-searchbar">
<a href="#search-header" class="header-search-form"><i class="fas fa-search search-button"></i></a>
<!-- search input-->
<form id="search-header" method="post" action="search-result.html" name="search-header" class="mfp-hide search-form-result">
<div class="search-form position-relative">
<button type="submit" class="fas fa-search close-search search-button"></button>
<input type="text" name="search" class="search-input" placeholder="Enter your keywords..." autocomplete="off">
</div>
</form>
</div>
<div class="header-social-icon d-none d-md-inline-block">
<a href="https://www.facebook.com/" title="Facebook" target="_blank"><i class="fab fa-facebook-f" aria-hidden="true"></i></a>
<a href="https://twitter.com/" title="Twitter" target="_blank"><i class="fab fa-twitter"></i></a>
<a href="https://dribbble.com/" title="Dribbble" target="_blank"><i class="fab fa-dribbble"></i></a>
</div>
</div>
</div>
</nav>
<!-- end navigation -->
</header>
<!-- end header -->
<!-- start page title section -->
<section class="wow animate__fadeIn parallax" data-parallax-background-ratio="0.5" style="background-image:url('https://via.placeholder.com/1920x1100');">
<div class="opacity-medium bg-extra-dark-gray"></div>
<div class="container position-relative">
<div class="row align-items-center">
<div class="col-12 d-flex justify-content-center flex-column text-center extra-small-screen page-title-large">
<!-- start page title -->
<h1 class="text-white-2 alt-font font-weight-600 letter-spacing-minus-1 margin-10px-bottom">Portfolio masonry overlay</h1>
<!-- end page title -->
<!-- start sub title -->
<span class="text-white-2 opacity6 alt-font">Choose from our wide range of portfolio layouts</span>
<!-- end sub title -->
</div>
</div>
</div>
</section>
<!-- end page title section -->
<!-- start portfolio section -->
<section class="wow animate__fadeIn padding-90px-top md-padding-50px-top sm-padding-30px-top">
<div class="container">
<div class="row">
<div class="col-12">
<!-- start filter navigation -->
<ul class="portfolio-filter nav nav-tabs justify-content-center border-0 portfolio-filter-tab-1 font-weight-600 alt-font text-uppercase text-center margin-80px-bottom text-small md-margin-40px-bottom sm-margin-20px-bottom">
<li class="nav active"><a href="javascript:void(0);" data-filter="*" class="light-gray-text-link text-very-small">All</a></li>
<li class="nav"><a href="javascript:void(0);" data-filter=".web" class="light-gray-text-link text-very-small">Web</a></li>
<li class="nav"><a href="javascript:void(0);" data-filter=".advertising" class="light-gray-text-link text-very-small">Advertising</a></li>
<li class="nav"><a href="javascript:void(0);" data-filter=".branding" class="light-gray-text-link text-very-small">Branding</a></li>
<li class="nav"><a href="javascript:void(0);" data-filter=".design" class="light-gray-text-link text-very-small">Design</a></li>
<li class="nav"><a href="javascript:void(0);" data-filter=".photography" class="light-gray-text-link text-very-small">Photography</a></li>
</ul>
<!-- end filter navigation -->
</div>
</div>
</div>
<!-- start filter content -->
<div class="container-fluid">
<div class="row">
<div class="col-12 filter-content overflow-hidden">
<ul class="hover-option2 portfolio-wrapper grid grid-loading grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-medium">
<li class="grid-sizer"></li>
<!-- start portfolio-item item -->
<li class="grid-item web branding design last-paragraph-no-margin wow animate__fadeInUp">
<a href="single-project-page-01.html">
<figure>
<div class="portfolio-img bg-deep-pink"><img src="https://via.placeholder.com/800x800" alt=""/></div>
<figcaption>
<div class="portfolio-hover-main text-start">
<div class="portfolio-hover-box align-bottom">
<div class="portfolio-hover-content position-relative last-paragraph-no-margin">
<div class="bg-black margin-25px-bottom separator-line-horrizontal-medium-light2"></div>
<span class="line-height-normal alt-font text-white-2 text-uppercase margin-one-half-bottom d-block font-weight-600">Herbal Beauty Salon</span>
<p class="text-white-2 text-uppercase text-extra-small">Branding and Brochure</p>
</div>
</div>
</div>
</figcaption>
</figure>
</a>
</li>
<!-- end portfolio item -->
<!-- start portfolio item -->
<li class="grid-item web branding design last-paragraph-no-margin wow animate__fadeInUp" data-wow-delay="0.2s">
<a href="single-project-page-02.html">
<figure>
<div class="portfolio-img bg-deep-pink"><img src="https://via.placeholder.com/800x1200" alt=""/></div>
<figcaption>
<div class="portfolio-hover-main text-start">
<div class="portfolio-hover-box align-bottom">
<div class="portfolio-hover-content position-relative last-paragraph-no-margin">
<div class="bg-black margin-25px-bottom separator-line-horrizontal-medium-light2"></div>
<span class="line-height-normal alt-font text-white-2 text-uppercase margin-one-half-bottom d-block font-weight-600">Tailoring Interior</span>
<p class="text-white-2 text-uppercase text-extra-small">Branding and Brochure</p>
</div>
</div>
</div>
</figcaption>
</figure>
</a>
</li>
<!-- end portfolio item -->
<!-- start portfolio item -->
<li class="grid-item advertising branding photography last-paragraph-no-margin wow animate__fadeInUp" data-wow-delay="0.4s">
<a href="single-project-page-03.html">
<figure>
<div class="portfolio-img bg-deep-pink"><img src="https://via.placeholder.com/800x800" alt=""/></div>
<figcaption>
<div class="portfolio-hover-main text-start">
<div class="portfolio-hover-box align-bottom">
<div class="portfolio-hover-content position-relative last-paragraph-no-margin">
<div class="bg-black margin-25px-bottom separator-line-horrizontal-medium-light2"></div>
<span class="line-height-normal alt-font text-white-2 text-uppercase margin-one-half-bottom d-block font-weight-600">Designblast Inc</span>
<p class="text-white-2 text-uppercase text-extra-small">Web and Photography</p>
</div>
</div>
</div>
</figcaption>
</figure>
</a>
</li>
<!-- end portfolio item -->
<!-- start portfolio item -->
<li class="grid-item web advertising design last-paragraph-no-margin wow animate__fadeInUp" data-wow-delay="0.6s">
<a href="single-project-page-04.html">
<figure>
<div class="portfolio-img bg-deep-pink"><img src="https://via.placeholder.com/800x1200" alt=""/></div>
<figcaption>
<div class="portfolio-hover-main text-start">
<div class="portfolio-hover-box align-bottom">
<div class="portfolio-hover-content position-relative last-paragraph-no-margin">
<div class="bg-black margin-25px-bottom separator-line-horrizontal-medium-light2"></div>
<span class="line-height-normal alt-font text-white-2 text-uppercase margin-one-half-bottom d-block font-weight-600">HardDot Stone</span>
<p class="text-white-2 text-uppercase text-extra-small">Branding and Identity</p>
</div>
</div>
</div>
</figcaption>
</figure>
</a>
</li>
<!-- end portfolio item -->
<!-- start portfolio item -->
<li class="grid-item web branding design last-paragraph-no-margin wow animate__fadeInUp">
<a href="single-project-page-05.html">
<figure>
<div class="portfolio-img bg-deep-pink"><img src="https://via.placeholder.com/800x1200" alt=""/></div>
<figcaption>
<div class="portfolio-hover-main text-start">
<div class="portfolio-hover-box align-bottom">
<div class="portfolio-hover-content position-relative last-paragraph-no-margin">
<div class="bg-black margin-25px-bottom separator-line-horrizontal-medium-light2"></div>
<span class="line-height-normal alt-font text-white-2 text-uppercase margin-one-half-bottom d-block font-weight-600">Crop Identity</span>
<p class="text-white-2 text-uppercase text-extra-small">Branding and Brochure</p>
</div>
</div>
</div>
</figcaption>
</figure>
</a>
</li>
<!-- end portfolio item -->
<!-- start portfolio item -->
<li class="grid-item web advertising branding design photography last-paragraph-no-margin wow animate__fadeInUp" data-wow-delay="0.2s">
<a href="single-project-page-06.html">
<figure>
<div class="portfolio-img bg-deep-pink"><img src="https://via.placeholder.com/800x1200" alt=""/></div>
<figcaption>
<div class="portfolio-hover-main text-start">
<div class="portfolio-hover-box align-bottom">
<div class="portfolio-hover-content position-relative last-paragraph-no-margin">
<div class="bg-black margin-25px-bottom separator-line-horrizontal-medium-light2"></div>
<span class="line-height-normal alt-font text-white-2 text-uppercase margin-one-half-bottom d-block font-weight-600">Violator Series</span>
<p class="text-white-2 text-uppercase text-extra-small">Web and Photography</p>
</div>
</div>
</div>
</figcaption>
</figure>
</a>
</li>
<!-- end portfolio item -->
<!-- start portfolio item -->
<li class="grid-item web advertising branding design photography last-paragraph-no-margin wow animate__fadeInUp" data-wow-delay="0.4s">
<a href="single-project-page-07.html">
<figure>
<div class="portfolio-img bg-deep-pink"><img src="https://via.placeholder.com/800x800" alt=""/></div>
<figcaption>
<div class="portfolio-hover-main text-start">
<div class="portfolio-hover-box align-bottom">
<div class="portfolio-hover-content position-relative last-paragraph-no-margin">
<div class="bg-black margin-25px-bottom separator-line-horrizontal-medium-light2"></div>
<span class="line-height-normal alt-font text-white-2 text-uppercase margin-one-half-bottom d-block font-weight-600">Jeremy Dupont</span>
<p class="text-white-2 text-uppercase text-extra-small">Branding and Identity</p>
</div>
</div>
</div>
</figcaption>
</figure>
</a>
</li>
<!-- end portfolio item -->
<!-- start portfolio item -->
<li class="grid-item web branding design photography last-paragraph-no-margin wow animate__fadeInUp" data-wow-delay="0.6s">
<a href="single-project-page-08.html">
<figure>
<div class="portfolio-img bg-deep-pink"><img src="https://via.placeholder.com/800x800" alt=""/></div>
<figcaption>
<div class="portfolio-hover-main text-start">
<div class="portfolio-hover-box align-bottom">
<div class="portfolio-hover-content position-relative last-paragraph-no-margin">
<div class="bg-black margin-25px-bottom separator-line-horrizontal-medium-light2"></div>
<span class="line-height-normal alt-font text-white-2 text-uppercase margin-one-half-bottom d-block font-weight-600">Bill Gardner</span>
<p class="text-white-2 text-uppercase text-extra-small">Web and Photography</p>
</div>
</div>
</div>
</figcaption>
</figure>
</a>
</li>
<!-- end portfolio item -->
<!-- start portfolio item -->
<li class="grid-item web advertising branding last-paragraph-no-margin wow animate__fadeInUp">
<a href="single-project-page-01.html">
<figure>
<div class="portfolio-img bg-deep-pink"><img src="https://via.placeholder.com/800x800" alt=""/></div>
<figcaption>
<div class="portfolio-hover-main text-start">
<div class="portfolio-hover-box align-bottom">
<div class="portfolio-hover-content position-relative last-paragraph-no-margin">
<div class="bg-black margin-25px-bottom separator-line-horrizontal-medium-light2"></div>
<span class="line-height-normal alt-font text-white-2 text-uppercase margin-one-half-bottom d-block font-weight-600">Potato Islands</span>
<p class="text-white-2 text-uppercase text-extra-small">Web and Photography</p>
</div>
</div>
</div>
</figcaption>
</figure>
</a>
</li>
<!-- end portfolio item -->
<!-- start portfolio item -->
<li class="grid-item branding design photography last-paragraph-no-margin wow animate__fadeInUp" data-wow-delay="0.2s">
<a href="single-project-page-02.html">
<figure>
<div class="portfolio-img bg-deep-pink"><img src="https://via.placeholder.com/800x800" alt=""/></div>
<figcaption>
<div class="portfolio-hover-main text-start">
<div class="portfolio-hover-box align-bottom">
<div class="portfolio-hover-content position-relative last-paragraph-no-margin">
<div class="bg-black margin-25px-bottom separator-line-horrizontal-medium-light2"></div>
<span class="line-height-normal alt-font text-white-2 text-uppercase margin-one-half-bottom d-block font-weight-600">Violator Series</span>
<p class="text-white-2 text-uppercase text-extra-small">Branding and Brochure</p>
</div>
</div>
</div>
</figcaption>
</figure>
</a>
</li>
<!-- end portfolio item -->
<!-- start portfolio item -->
<li class="grid-item advertising design last-paragraph-no-margin wow animate__fadeInUp" data-wow-delay="0.4s">
<a href="single-project-page-03.html">
<figure>
<div class="portfolio-img bg-deep-pink"><img src="https://via.placeholder.com/800x800" alt=""/></div>
<figcaption>
<div class="portfolio-hover-main text-start">
<div class="portfolio-hover-box align-bottom">
<div class="portfolio-hover-content position-relative last-paragraph-no-margin">
<div class="bg-black margin-25px-bottom separator-line-horrizontal-medium-light2"></div>
<span class="line-height-normal alt-font text-white-2 text-uppercase margin-one-half-bottom d-block font-weight-600">Crop Identity</span>
<p class="text-white-2 text-uppercase text-extra-small">Branding and Brochure</p>
</div>
</div>
</div>
</figcaption>
</figure>
</a>
</li>
<!-- end portfolio item -->
<!-- start portfolio item -->
<li class="grid-item advertising design photography last-paragraph-no-margin wow animate__fadeInUp" data-wow-delay="0.6s">
<a href="single-project-page-04.html">
<figure>
<div class="portfolio-img bg-deep-pink"><img src="https://via.placeholder.com/800x800" alt=""/></div>
<figcaption>
<div class="portfolio-hover-main text-start">
<div class="portfolio-hover-box align-bottom">
<div class="portfolio-hover-content position-relative last-paragraph-no-margin">
<div class="bg-black margin-25px-bottom separator-line-horrizontal-medium-light2"></div>
<span class="line-height-normal alt-font text-white-2 text-uppercase margin-one-half-bottom d-block font-weight-600">Designblast Inc</span>
<p class="text-white-2 text-uppercase text-extra-small">Branding and Brochure</p>
</div>
</div>
</div>
</figcaption>
</figure>
</a>
</li>
<!-- end portfolio item -->
</ul>
</div>
</div>
</div>
<!-- end filter content -->
</section>
<!-- end portfolio section -->
<!-- start call to action section -->
<section class="wow animate__fadeIn padding-50px-tb border-top border-color-extra-light-gray">
<div class="container">
<div class="row align-items-center">
<div class="col-12 col-lg-8 md-margin-30px-bottom text-center text-lg-start wow animate__fadeInDown">
<span class="alt-font text-extra-large text-extra-dark-gray d-inline-block w-100">We would love to hear about start your new project?</span>
</div>
<div class="col-12 col-lg-4 text-center text-lg-start wow animate__fadeInDown">
<a href="contact-us-modern.html" class="btn btn-medium btn-rounded btn-transparent-dark-gray" data-wow-delay="0.4s">Start New Projects <i class="ti-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</section>
<!-- end call to action section -->
<!-- start footer -->
<footer class="footer-classic-dark bg-extra-dark-gray padding-five-bottom sm-padding-30px-bottom">
<div class="bg-dark-footer padding-50px-tb sm-padding-30px-tb">
<div class="container">
<div class="row align-items-center">
<!-- start slogan -->
<div class="col-lg-4 col-md-5 text-center alt-font sm-margin-15px-bottom">
London based highly creative studio
</div>
<!-- end slogan -->
<!-- start logo -->
<div class="col-lg-4 col-md-2 text-center sm-margin-10px-bottom">
<a href="index.html"><img class="footer-logo" src="images/logo-white.png" data-at2x="images/logo-white@2x.png" alt="Pofo"></a>
</div>
<!-- end logo -->
<!-- start social media -->
<div class="col-lg-4 col-md-5 text-center">
<span class="alt-font margin-20px-right md-margin-15px-right">On social networks</span>
<div class="social-icon-style-8 d-inline-block align-middle">
<ul class="small-icon mb-0">
<li><a class="facebook text-white-2" href="https://www.facebook.com/" target="_blank"><i class="fab fa-facebook-f" aria-hidden="true"></i></a></li>
<li><a class="twitter text-white-2" href="https://twitter.com/" target="_blank"><i class="fab fa-twitter"></i></a></li>
<li><a class="google text-white-2" href="https://plus.google.com" target="_blank"><i class="fab fa-google-plus-g"></i></a></li>
<li><a class="instagram text-white-2" href="https://instagram.com/" target="_blank"><i class="fab fa-instagram no-margin-right" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
<!-- end social media -->
</div>
</div>
</div>
<div class="footer-widget-area padding-five-top padding-30px-bottom sm-padding-30px-top">
<div class="container">
<div class="row">
<!-- start about -->
<div class="col-lg-3 col-sm-6 widget md-margin-30px-bottom text-center text-sm-start last-paragraph-no-margin">
<div class="widget-title alt-font text-small text-medium-gray text-uppercase margin-15px-bottom font-weight-600">About Agency</div>
<p class="text-small w-95 sm-w-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the and typesetting industry. </p>
</div>
<!-- end about -->
<!-- start blog post -->
<div class="col-lg-3 col-sm-6 widget md-margin-30px-bottom">
<div class="widget-title alt-font text-small text-medium-gray text-uppercase margin-15px-bottom font-weight-600 text-center text-sm-start">Latest Blog Post</div>
<ul class="latest-post position-relative">
<li class="media d-flex border-bottom border-color-medium-dark-gray">
<figure class="flex-shrink-0">
<a href="blog-post-layout-01.html"><img src="https://via.placeholder.com/700x403" alt=""></a>
</figure>
<div class="media-body flex-grow-1 text-small"><a href="blog-post-layout-01.html" class="d-block mb-1">Design is not just what looks...</a> <span class="clearfix"></span>20 April 2017 | by <a href="blog-grid.html">Herman Miller</a></div>
</li>
<li class="media d-flex border-bottom border-color-medium-dark-gray">
<figure class="flex-shrink-0">
<a href="blog-post-layout-02.html"><img src="https://via.placeholder.com/700x403" alt=""></a>
</figure>
<div class="media-body flex-grow-1 text-small"><a href="blog-post-layout-02.html" class="d-block mb-1">A lot of care, effort & passion...</a> <span class="clearfix"></span>20 April 2017 | by <a href="blog-grid.html">Herman Miller</a></div>
</li>
<li class="media d-flex">
<figure class="flex-shrink-0">
<a href="blog-post-layout-03.html"><img src="https://via.placeholder.com/700x403" alt=""></a>
</figure>
<div class="media-body flex-grow-1 text-small"><a href="blog-post-layout-03.html" class="d-block mb-1">I love making the stuff, that's...</a> <span class="clearfix"></span>20 April 2017 | by <a href="blog-grid.html">Herman Miller</a></div>
</li>
</ul>
</div>
<!-- end blog post -->
<!-- start newsletter -->
<div class="col-lg-3 col-sm-6 widget xs-margin-30px-bottom text-center text-sm-start">
<div class="widget-title alt-font text-small text-medium-gray text-uppercase margin-15px-bottom font-weight-600">Subscribe Newsletter</div>
<p class="text-small w-90 sm-w-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<form action="email-templates/subscribe-newsletter.php" method="post">
<div class="position-relative newsletter w-95">
<div class="col-12 mx-0">
<div class="form-results d-none"></div>
</div>
<div class="position-relative w-100 h-100">
<input type="email" id="email" name="email" class="bg-transparent text-small m-0 border-color-medium-dark-gray required" placeholder="Enter your email...">
<button id="button-subscribe-newsletter" type="submit" class="btn btn-arrow-small position-absolute border-color-medium-dark-gray submit"><i class="fas fa-caret-right no-margin-left"></i></button>
</div>
</div>
</form>
</div>
<!-- end newsletter -->
<!-- start instagram -->
<div class="col-lg-3 col-sm-6 widget text-center text-sm-start">
<div class="widget-title alt-font text-small text-medium-gray text-uppercase margin-15px-bottom font-weight-600">Follow us Instagram</div>
<div class="w-100 d-inline-block">
<ul class="instafeed-grid instafeed-wrapper grid grid-3col xl-grid-3col lg-grid-3col md-grid-3col sm-grid-3col xs-grid-3col gutter-small" data-total="6">
<li class="grid-item">
<figure>
<a href="#" data-href="{{link}}" target="_blank">
<img src="#" data-src="{{image}}" class="insta-image" alt="" />
<span class="insta-counts"><i class="ti-instagram"></i>{{likes}}</span>
</a>
</figure>
</li>
</ul>
</div>
</div>
<!-- end instagram -->
</div>
</div>
</div>
<div class="container">
<div class="footer-bottom border-top border-color-medium-dark-gray padding-30px-top">
<div class="row">
<!-- start copyright -->
<div class="col-lg-6 col-md-6 text-small text-md-start text-center">POFO - Portfolio Concept Theme</div>
<div class="col-lg-6 col-md-6 text-small text-md-end text-center">© 2021 POFO is Proudly Powered by <a href="http://www.themezaa.com" target="_blank" title="ThemeZaa">ThemeZaa</a></div>
<!-- end copyright -->
</div>
</div>
</div>
</footer>
<!-- end footer -->
<!-- start scroll to top -->
<a class="scroll-top-arrow" href="javascript:void(0);"><i class="ti-arrow-up"></i></a>
<!-- end scroll to top -->
<!-- javascript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootsnav.js"></script>
<script type="text/javascript" src="js/jquery.nav.js"></script>
<script type="text/javascript" src="js/hamburger-menu.js"></script>
<script type="text/javascript" src="js/theme-vendors.min.js"></script>
<!-- setting -->
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>