Installation
Follow the steps below to setup your site template:
- Unzip the downloaded package and open the /HTML folder to find all the template files. You will need to upload these files to your hosting web server using FTP in order to use it on your website.
- Below is the folder structure and needs to be uploaded to your website root directory:
HTML/css
- Stylesheet filesHTML/fonts
– Icon font filesHTML/images
- Image filesHTML/js
- Javacript filesHTML/video
– Video filesHTML/email-templates
– Contact and subscription form PHP filesHTML/revolution
– Revolution slider library files
- You should upload all or specific HTML files as per your need.
- You're now good to go..! Start adding your content/images and generate your beautiful brand new website for your awesome users.
HTML Structure
Pofo follows a simple and easy to customize coding structure. Here is the sample for your reference:
<!doctype html> <html class="no-js" lang="en"> <head> <!-- title --> <meta charset="utf-8"> <!-- description --> <meta name="description" content=""> <!-- keywords --> <meta name="keywords" content=""> <!-- favicon --> <!-- style --> </head> <body> <!-- start header --> <header> <!-- start navigation --> <nav class="navbar navbar-default bootsnav navbar-top header-dark background-transparent white-link navbar-expand-lg"> ... </nav> <!-- end navigation --> </header> <!-- end header --> <!-- start sections --> <section> ... </section> <!-- end sections --> <!-- start footer --> <footer> <div class="container"> ... </div> </footer> <!-- end footer --> <!-- javascript libraries --> </body> </html>
Logo Settings
The Logo Container can be found in the Nav Container - .navbar
<!-- 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 -->
NoteTwo images are used for logo, one for default logo (Logo that will display when you are on the top of page) and second for alternate logo (Logo that will display when header will be sticky). .default
is used to set which image you want as default and second one will be alternate logo.
Image & Favicon Settings
Image Settings
Pofo download package does not contain images which are there in our online demo. We are using placeholder images instead of real images. You will see the image code as mentioned below. You can replace placeholder image url with your image url like images/yourimage.jpg
<img src="image path" alt="image alt text">
Favicon Settings
To change the favicon image of your site, you need to load a new ICO image in a site root or to point out a new address of the image.
<!-- 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">
Changing Fonts
Pofo uses 2 fonts: Roboto & Montserrat Condensed from the Google Fonts Library. You can change the fonts from /css/style.css file in below lines. If you want to use self hosted fonts other than Google fonts then here is an example of self hosted fonts. In this case you need to remove below lines and change font names in /css/style.css file as per your fonts used.
<!-- Google font -->
@import url('https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900');
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900');
Home Pages Demos
POFO is a highly creative, modern, visually stunning and Bootstrap responsive multipurpose corporate and portfolio HTML5 template with 27+ ready home page demos.
Header Types
You can choose between 12 Types of headers while creating your Pages. The list of various header types & its descriptions are provided below for your reference:
1. Transparent Header
Header with no background color.
<!-- start navigation --> <header> <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"> ... </div> </nav> </header> <!-- end navigation -->
2. White Header
Header with white background & dark text.
<!-- start navigation --> <header> <nav class="navbar navbar-default bootsnav background-white header-light navbar-top navbar-expand-lg"> <div class="container-lg nav-header-container"> ... </div> </nav> </header> <!-- end navigation -->
3. Dark Header
Header with dark background & light text.
<!-- start navigation --> <header> <nav class="navbar navbar-default bootsnav background-black header-dark white-link navbar-top navbar-expand-lg"> <div class="container-lg nav-header-container"> ... </div> </nav> </header> <!-- end navigation -->
4. Header With Topbar
Header with Topbar and default navigation menu to showcase the additional information as per your requirements.
<!-- start navigation --> <header class="header-with-topbar"> <!-- start top bar --> <div class="top-header-area bg-black padding-10px-tb"> <div class="container-lg"> ... </div> </div> <!-- end top bar --> <nav class="navbar navbar-default bootsnav navbar-top header-light-transparent background-transparent navbar-expand-lg"> <div class="container-lg nav-header-container"> ... </div> </nav> </header> <!-- end navigation -->
5. Header With sticky Topbar
Header with Topbar and default navigation menu to showcase the additional information as per your requirements.
<!-- start navigation --> <header class="header-with-topbar fixed-topbar"> <!-- start top bar --> <div class="top-header-area bg-black padding-10px-tb"> <div class="container-lg"> ... </div> </div> <!-- end top bar --> <nav class="navbar navbar-default bootsnav navbar-fixed-top header-light-transparent background-transparent navbar-expand-lg"> <div class="container-lg nav-header-container"> ... </div> </nav> </header> <!-- end navigation -->
6. Header with Push Menu
Header with Push Menu can open from right side.
<!-- start navigation --> <header> <nav class="navbar navbar-default bootsnav navbar-fixed-top header-light background-transparent white-link navbar-expand-lg"> <div class="container-lg nav-header-container"> ... <div class="heder-menu-button d-none d-lg-inline-block"> <div class="navbar-toggle mobile-toggle right-menu-button" type="button" id="showRightPush"> <span></span> <span></span> <span></span> </div> </div> </div> </nav> <!-- start push menu --> <div class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2"> ... </div> <!-- end push menu --> </header> <!-- end navigation -->
7. Header with Center Navigation
Header with center navigation provides center navigation UI to showcase your website.
<!-- start navigation --> <header> <nav class="navbar navbar-default bootsnav navbar-fixed-top header-dark background-transparent nav-box-width white-link navbar-expand-lg menu-center"> <div class="container-fluid nav-header-container"> ... </div> </nav> </header> <!-- end navigation -->
8. Header with Center Logo
Header with Center Logo provides facility to display divided menu links both side and logo will be placed between left and right menu parts.
<!-- start navigation --> <header> <nav class="navbar navbar-default bootsnav navbar-top header-dark background-transparent white-link menu-logo-center navbar-expand-lg"> <div class="container-lg nav-header-container"> ... </div> </nav> </header> <!-- end navigation -->
9. Header with Top Logo
Header with top logo is beautiful view of header with center navigation menu and also can add social links with it.
<!-- start navigation --> <header> <nav class="navbar navbar-default bootsnav bg-transparent navbar-brand-top navbar-expand-lg"> <div class="container-lg nav-header-container text-center flex-wrap"> ... </div> </nav> </header> <!-- end navigation -->
10. Header with Hamburger menu
Header with hamburger menu is another way to display header with navigation part for creative look.
<!-- start navigation --> <header> <nav class="navbar full-width-pull-menu navbar-top-scroll no-border-top white-link nav-box-width no-transition"> <div class="container-fluid nav-header-container h-100px sm-h-70px"> ... </div> </nav> </header> <!-- end navigation -->
11. Classic Left Menu
Classic Left Menu provides functionality to display menu at left side in classic view.
<!-- start navigation --> <header> <nav class="navbar no-margin-bottom bootsnav alt-font bg-white sidebar-nav sidebar-nav-style-1 navbar-expand-lg"> ... </nav> </header> <!-- end navigation -->
12. Modern Left Menu
Modern Left Menu provides functionality to display menu at left side in modern view.
<!-- start navigation --> <header> <div class="left-nav"> <div class="sidebar-part1"> ... </div> <div class="sidebar-part2"> ... </div> <div class="sidebar-part3"> ... </div> </div> </header> <!-- end navigation -->
Change Header Settings
You can easily make changes in NAV tag with changes of css classes.
CHANGE BACKGROUND COLOUR: You can easily add your favorite color to your navigation bar by adding color class like .bg-deep-pink
, .bg-white
or whatever you want, please make sure that same css class should be there in style.css file.
NAVBAR EFFECTS:
.navbar-top
- Apply this css class in NAV tag, using this class menu will hide when you scroll down and it will appear once you scroll up from down position..navbar-fixed-top
- Apply this css class in NAV tag, using this sticky menu will be display after scroll movement..navbar-scroll-top
- Apply this css class in NAV tag, using this class menu will dispaly at top with relative position by default when page-load so NAVBAR will occupy space in header and when you scroll down header will hide and it will appear once you scroll up from down position.
AFTER SCROLL - NAVBAR EFFECTS:
.header-light
- Apply this css class in NAV tag, using this class menu will display with light background and dark font..header-light-transparent
- Apply this css class in NAV tag, using this class menu will display with light transparent background and dark font..header-dark
- Apply this css class in NAV tag, using this class menu will display with dark background and light font..header-dark-transparent
- Apply this css class in NAV tag, using this class menu will display with dark transparent background and light font.
Note You can use light version of your menu links with simply adding the class
.white-link
in NAV tag.
Page Titles
You can choose between 10 Types of page titles while creating your pages. The list of page title options & its descriptions are provided below for your reference:
1. Page Title - Left Alignment
It includes page title with alligned left, sub title under page title and breadcrumb in right part. See below image and code for more inforamtion.
<!-- start page title section --> <section class="wow animate__fadeIn bg-light-gray padding-50px-tb sm-padding-30px-tb page-title-small"> <div class="container"> <div class="row align-items-center alt-font"> <div class="col-lg-8 col-md-6 text-center text-md-start"> <!-- start page title --> <h1 class="text-extra-dark-gray font-weight-600 mb-0">Left alignment</h1> <!-- end page title --> <!-- start sub title --> <span class="d-block margin-5px-top">Short page title tagline goes here</span> <!-- end sub title --> </div> <div class="col-lg-4 col-md-6 sm-margin-10px-top breadcrumb text-small justify-content-center justify-content-md-end"> <!-- start breadcrumb --> <ul> <li><a href="#" class="text-dark-gray">Home</a></li> <li><a href="#" class="text-dark-gray">Pages</a></li> <li class="text-dark-gray">Title left alignment</li> </ul> <!-- end breadcrumb --> </div> </div> </div> </section> <!-- end page title section -->
2. Page Title - Right Alignment
It includes page title with alligned right, sub title under page title and breadcrumb in left part. See below image and code for more inforamtion.
<!-- start page title section --> <section class="wow animate__fadeIn bg-light-gray padding-50px-tb sm-padding-30px-tb page-title-small top-space"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-4 col-md-6 text-center text-md-start breadcrumb justify-content-center justify-content-md-start text-small alt-font"> <!-- start breadcrumb --> <ul class="text-center text-md-start"> <li><a href="#" class="text-dark-gray">Home</a></li> <li><a href="#" class="text-dark-gray">Pages</a></li> <li class="text-dark-gray">Title right alignment</li> </ul> <!-- end breadcrumb --> </div> <div class="col-lg-8 col-md-6 sm-margin-10px-top text-center text-md-end"> <!-- start page title --> <h1 class="alt-font text-extra-dark-gray font-weight-600 mb-0">Right alignment</h1> <!-- end page title --> <!-- start sub title --> <span class="d-block margin-5px-top alt-font">Short page title tagline goes here</span> <!-- end sub title --> </div> </div> </div> </section> <!-- end page title section -->
3. Page Title - Center Alignment
It includes page title and sub title alligned center. See below image and code for more inforamtion.
<!-- start page title section --> <section class="wow animate__fadeIn bg-light-gray padding-100px-tb md-padding-60px-tb sm-padding-30px-tb top-space"> <div class="container"> <div class="row"> <div class="col-12 page-title-medium text-center d-flex flex-column justify-content-center"> <!-- start page title --> <h1 class="alt-font text-extra-dark-gray font-weight-600 m-0">Center alignment</h1> <!-- end page title --> <!-- start sub title --> <span class="d-block margin-10px-top alt-font">We provide innovative solutions to expand your business</span> <!-- end sub title --> </div> </div> </div> </section> <!-- end page title section -->
4. Page Title - Dark
It includes page title and sub title alligned center with dark background and light sub title. See below image and code for more inforamtion.
<!-- start page title section --> <section class="wow animate__fadeIn bg-extra-dark-gray"> <div class="container"> <div class="row"> <div class="col-12 extra-small-screen page-title-medium text-center d-flex flex-column justify-content-center"> <!-- start page title --> <h1 class="alt-font text-white-2 font-weight-600 m-0 text-uppercase letter-spacing-1">Page title dark style </h1> <!-- end page title --> <!-- start sub title --> <span class="d-block margin-10px-top text-extra-small alt-font text-uppercase">We provide innovative solutions to expand your business</span> <!-- end sub title --> </div> </div> </div> </section> <!-- end page title section -->
5. Page Title - Big Typography
It includes page title and sub title alligned center with small title and big sub title. See below image and code for more inforamtion.
<!-- start page title section --> <section class="wow animate__fadeIn parallax bg-extra-dark-gray" data-parallax-background-ratio="0.5" style="background-image:url('image path');"> <div class="opacity-medium bg-extra-dark-gray"></div> <div class="container position-relative"> <div class="row"> <div class="col-12 extra-small-screen text-center page-title-extra-small d-flex flex-column justify-content-center"> <!-- start page title --> <h1 class="alt-font text-white-2 opacity7 margin-10px-bottom">Page title big typography</h1> <!-- end page title --> <!-- start sub title --> <h2 class="text-white-2 alt-font font-weight-600 w-55 md-w-80 mx-auto sm-w-100 letter-spacing-minus-1 line-height-50 md-line-height-45 sm-line-height-30">we are a creative design studio</h2> <!-- end sub title --> </div> </div> </div> </section> <!-- end page title section -->
6. Page Title - Parallax Image Background
It includes page title and sub title alligned center with background image and parallax effect. See below image and code for more inforamtion.
<!-- start page title section --> <section class="wow animate__fadeIn parallax" data-parallax-background-ratio="0.5" style="background-image:url('image path');"> <div class="opacity-medium bg-extra-dark-gray"></div> <div class="container position-relative"> <div class="row"> <div class="col-12 extra-small-screen d-flex flex-column justify-content-center page-title-large text-center"> <!-- start page title --> <h1 class="text-white-2 alt-font font-weight-600 letter-spacing-minus-1 margin-10px-bottom">Parallax background</h1> <!-- end page title --> <!-- start sub title --> <span class="text-white-2 opacity6 alt-font mb-0">Unlimited power and customization possibilities</span> <!-- end sub title --> </div> </div> </div> </section> <!-- end page title section -->
7. Page Title Image After Breadcrumbs
It includes page title and sub title alligned center with breadcrumbs at the bottm of page title. See below image and code for more inforamtion.
<!-- start page title section --> <section class="wow animate__fadeIn cover-background background-position-top top-space" style="background-image:url('image path');"> <div class="opacity-medium bg-extra-dark-gray"></div> <div class="container position-relative"> <div class="row"> <div class="col-12 d-flex flex-column justify-content-center page-title-large text-center padding-30px-tb"> <!-- start sub title --> <span class="d-block text-white-2 opacity6 alt-font margin-5px-bottom">We provide innovative solutions to expand business</span> <!-- end sub title --> <!-- start page title --> <h1 class="alt-font text-white-2 font-weight-600 mb-0">Image after breadcrumbs</h1> <!-- end page title --> </div> </div> </div> </section> <!-- end page title section --> <!-- start breadcrumb section --> <section class="wow animate__fadeIn padding-20px-tb border-bottom border-color-extra-light-gray"> <div class="container"> <div class="row"> <div class="col-12 breadcrumb alt-font text-small"> <!-- start breadcrumb --> <ul> <li><a href="#" class="text-medium-gray">Home</a></li> <li><a href="#" class="text-medium-gray">Pages</a></li> <li class="text-medium-gray">Title left alignment</li> </ul> <!-- end breadcrumb --> </div> </div> </div> </section> <!-- end breadcrumb section -->
8. Page Title Gallery Background
It includes page title and sub title alligned center with image gallery in background. See below image and code for more inforamtion.
<!-- start page title section --> <section class="p-0 one-third-screen position-relative wow animate__fadeIn"> <div class="opacity-medium bg-extra-dark-gray z-index-0"></div> <div class="container position-relative"> <div class="row"> <div class="col-12 one-third-screen page-title-large d-flex flex-column justify-content-center text-center"> <!-- start sub title --> <span class="d-block text-white-2 opacity6 margin-10px-bottom alt-font">We provide innovative solutions to expand business</span> <!-- end sub title --> <!-- start page title --> <h1 class="alt-font text-white-2 font-weight-600 w-55 sm-w-80 sm-w-100 mx-auto mb-0">Page title gallery background</h1> <!-- end page title --> </div> <div class="down-section text-center"><a href="#down-section" class="inner-link"><i class="ti-arrow-down icon-extra-small text-white-2 bg-deep-pink padding-15px-all sm-padding-10px-all rounded-circle"></i></a></div> </div> </div> <div class="swiper-auto-fade swiper z-index-minus2 position-absolute top-0 w-100 h-100" data-slider-options='{ "loop": true, "effect":"fade", "slidesPerView": "1", "allowTouchMove":true, "autoplay": { "delay": 5000, "disableOnInteraction": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "navigation": { "nextEl": ".swiper-button-next", "prevEl": ".swiper-button-prev" }, "pagination": { "el": ".swiper-pagination", "clickable": true } }'> <div class="swiper-wrapper"> <!-- start slider item --> <div class="swiper-slide cover-background one-third-screen" style="background-image:url('image path');"></div> <!-- end slider item --> <!-- start slider item --> <div class="swiper-slide cover-background one-third-screen" style="background-image:url('image path');"></div> <!-- end slider item --> <!-- start slider item --> <div class="swiper-slide cover-background one-third-screen" style="background-image:url('image path');"></div> <!-- end slider item --> </div> <!-- <div class="swiper-pagination swiper-auto-pagination"></div> --> </div> </section> <!-- end page title section -->
9. Page Title Background Video
It includes page title and sub title alligned center with image video in background. See below image and code for more inforamtion.
<!-- start page title section --> <section class="p-0 one-third-screen position-relative wow animate__fadeIn"> <div class="opacity-medium bg-extra-dark-gray z-index-0"></div> <div class="container position-relative"> <div class="row"> <div class="col-12 d-flex flex-column justify-content-center text-center one-third-screen page-title-medium"> <!-- start sub title --> <span class="margin-5px-bottom d-block alt-font text-medium-gray">Intuitive custom made shortcodes</span> <!-- end sub title --> <!-- start page title --> <h1 class="text-white-2 alt-font font-weight-600 text-uppercase letter-spacing-minus-1">Background Video</h1> <!-- end page title --> <div class="breadcrumb text-small alt-font justify-content-center"> <!-- start breadcrumb --> <ul> <li><a href="#" class="text-medium-gray">Home</a></li> <li><a href="#" class="text-medium-gray">Pages</a></li> <li class="text-medium-gray">Background Video</li> </ul> <!-- end breadcrumb --> </div> </div> </div> </div> <video loop="" autoplay="" controls="" muted class="htms-video" poster="image path"> <source type="video/mp4" src="video path"> <source type="video/ogg" src="video path"> <source type="video/webm" src="video path"> </video> </section> <!-- end page title section -->
10. Page Title Mini Version
It includes page title alligned left and breadcrumb in right part.
<!-- start page title section --> <section class="wow animate__fadeIn bg-light-gray padding-35px-tb page-title-small top-space"> <div class="container"> <div class="row align-items-cener"> <div class="col-lg-8 col-md-6 d-flex flex-column justify-content-center text-center text-md-start"> <!-- start page title --> <h1 class="alt-font text-extra-dark-gray font-weight-600 no-margin-bottom text-uppercase">Page title mini version</h1> <!-- end page title --> </div> <div class="col-lg-4 col-md-6 alt-font breadcrumb justify-content-center justify-content-md-end text-small sm-margin-10px-top"> <!-- start breadcrumb --> <ul> <li><a href="#" class="text-dark-gray">Home</a></li> <li><a href="#" class="text-dark-gray">Pages</a></li> <li class="text-dark-gray">Title mini version</li> </ul> <!-- end breadcrumb --> </div> </div> </div> </section> <!-- end page title section -->
Page Layout
You can choose between 3 Types of page layout while creating your page. The list of page layout options & its descriptions are provided below for your reference:
Full Width
<!-- start navigation --> <header> <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"> ... </div> </nav> </header> <!-- end navigation --> <!-- start page title --> <section class="page-title-small"> <div class="container-fluid"> ... </div> </section> <!-- end page title --> <!-- start page content --> <section> <div class="container-fluid"> <div class="row"> <!-- start content --> <div class="col-12"> ... </div> <!-- end content --> </div> </div> </section> <!-- end page content --> <!-- start footer --> <footer> ... </footer> <!-- end footer -->
Note You can find code in blog-post-layout-05.html page for your reference.
Left Sidebar
<!-- start navigation --> <header> <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"> ... </div> </nav> </header> <!-- end navigation --> <!-- start page title --> <section class="page-title-small"> <div class="container-fluid"> ... </div> </section> <!-- end page title --> <!-- start page content --> <section> <div class="container"> <div class="row justify-content-center flex-lg-row-reverse"> <!-- start main section --> <main class="col-12 col-xl-9 col-lg-8 left-sidebar md-margin-60px-bottom sm-margin-40px-bottom"> ... </main> <!-- end main section --> <!-- start side bar --> <asid class="col-12 col-xl-3 col-lg-4 col-md-7"> ... </asid> <!-- end side bar --> </div> </div> </section> <!-- end page content --> <!-- start footer --> <footer> ... </footer> <!-- end footer -->
Note You can find code in blog-standard-with-left-sidebar.html page for your reference.
Right Sidebar
<!-- start navigation --> <header> <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"> ... </div> </nav> </header> <!-- end navigation --> <!-- start page title --> <section class="page-title-small"> <div class="container-fluid"> ... </div> </section> <!-- end page title --> <!-- start page content --> <section> <div class="container"> <div class="row justify-content-center"> <!-- start main section --> <main class="col-12 col-xl-9 col-lg-8 right-sidebar md-margin-60px-bottom sm-margin-40px-bottom"> ... </main> <!-- end main section --> <!-- start side bar --> <asid class="col-12 col-xl-3 col-lg-4 col-md-7"> ... </asid> <!-- end side bar --> </div> </div> </section> <!-- end page content --> <!-- start footer --> <footer> ... </footer> <!-- end footer -->
Note You can find code in blog-standard-with-right-sidebar.html page for your reference.
Columns & Grid
Basic grid layouts to get you familiar with building within the Bootstrap grid system. We have designed entire template in BootStrap 5, so you can find detaild documentation on grid here https://getbootstrap.com/docs/5.0/layout/grid/
Three equal columns
Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.
Column
Column
Column
<div class="container"> <div class="row"> <div class="col"> Column </div> <div class="col"> Column </div> <div class="col"> Column </div> </div> </div>
The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent .container.
Grid options
Bootstrap’s grid system can adapt across all six default breakpoints, and any breakpoints you customize. The six default grid tiers are as follow:
- Extra small (xs)
- Small (sm)
- Medium (md)
- Large (lg)
- Extra large (xl)
- Extra extra large (xxl)
As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers. Here’s how the grid changes across these breakpoints:
xs <576px |
sm ≥576px |
md ≥768px |
lg ≥992px |
xl ≥1200px |
xxl ≥1400px |
|
---|---|---|---|---|---|---|
Container max-width |
None (auto) | 540px | 720px | 960px | 1140px | 1320px |
Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
# of columns | 12 | |||||
Gutter width | 1.5rem (.75rem on left and right) | |||||
Custom gutters | Yes | |||||
Nestable | Yes | |||||
Column ordering | Yes |
Auto-layout columns
Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like .col-sm-6
.
Equal-width
For example, here are two grid layouts that apply to every device and viewport, from xs
to xxl
. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
1 of 2
2 of 2
1 of 3
2 of 3
3 of 3
<div class="container"> <div class="row"> <div class="col"> 1 of 2 </div> <div class="col"> 2 of 2 </div> </div> <div class="row"> <div class="col"> 1 of 3 </div> <div class="col"> 2 of 3 </div> <div class="col"> 3 of 3 </div> </div> </div>
Variable width content
Use col-{breakpoint}-auto
classes to size columns based on the natural width of their content.
1 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 3
<div class="container"> <div class="row justify-content-md-center"> <div class="col col-lg-2"> 1 of 3 </div> <div class="col-md-auto"> Variable width content </div> <div class="col col-lg-2"> 3 of 3 </div> </div> <div class="row"> <div class="col"> 1 of 3 </div> <div class="col-md-auto"> Variable width content </div> <div class="col col-lg-2"> 3 of 3 </div> </div> </div>
Responsive classes
Bootstrap’s grid includes six tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.
All breakpoints
For grids that are the same from the smallest of devices to the largest, use the .col
and .col-*
classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to .col
.
col
col
col
col
col-8
col-4
<div class="container"> <div class="row"> <div class="col">col</div> <div class="col">col</div> <div class="col">col</div> <div class="col">col</div> </div> <div class="row"> <div class="col-8">col-8</div> <div class="col-4">col-4</div> </div> </div>
Stacked to horizontal
Using a single set of .col-sm-*
classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (sm
).
col-sm-8
col-sm-4
col-sm
col-sm
col-sm
<div class="container"> <div class="row"> <div class="col-sm-8">col-sm-8</div> <div class="col-sm-4">col-sm-4</div> </div> <div class="row"> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> </div> </div>
Mix and match
Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.
.col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6
<div class="container"> <!-- Stack the columns on mobile by making one full-width and the other half-width --> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-6 col-md-4">.col-6 .col-md-4</div> </div> <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> <div class="row"> <div class="col-6 col-md-4">.col-6 .col-md-4</div> <div class="col-6 col-md-4">.col-6 .col-md-4</div> <div class="col-6 col-md-4">.col-6 .col-md-4</div> </div> <!-- Columns are always 50% wide, on mobile and desktop --> <div class="row"> <div class="col-6">.col-6</div> <div class="col-6">.col-6</div> </div> </div>
Row columns
Use the responsive .row-cols-*
classes to quickly set the number of columns that best render your content and layout. Whereas normal .col-*
classes apply to the individual columns (e.g., .col-md-4
), the row columns classes are set on the parent .row
as a default for contained columns. With .row-cols-auto
you can give the columns their natural width.
Use these row columns classes to quickly create basic grid layouts or to control your card layouts and override when needed at the column level.
Column
Column
Column
Column
<div class="container"> <div class="row row-cols-2"> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> </div> </div>
Column
Column
Column
Column
<div class="container"> <div class="row row-cols-3"> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> </div> </div>
Column
Column
Column
Column
<div class="container"> <div class="row row-cols-auto"> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> </div> </div>
Column
Column
Column
Column
<div class="container"> <div class="row row-cols-4"> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> </div> </div>
Column
Column
Column
Column
<div class="container"> <div class="row row-cols-4"> <div class="col">Column</div> <div class="col">Column</div> <div class="col-6">Column</div> <div class="col">Column</div> </div> </div>
Column
Column
Column
Column
<div class="container"> <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4"> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> </div> </div>
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
<div class="container"> <div class="row row-cols-2 row-cols-lg-3"> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> <div class="col-4 col-lg-2">Column</div> <div class="col-4 col-lg-2">Column</div> <div class="col-4 col-lg-2">Column</div> <div class="col-4 col-lg-2">Column</div> <div class="col-4 col-lg-2">Column</div> <div class="col-4 col-lg-2">Column</div> </div> </div>
You can also use the accompanying Sass mixin, row-cols()
:
.element { // Three columns to start @include row-cols(3); // Five columns from medium breakpoint up @include media-breakpoint-up(md) { @include row-cols(5); } }
Nesting
To nest your content with the default grid, add a new .row
and set of .col-sm-*
columns within an existing .col-sm-*
column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).
Level 1: .col-sm-3
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
<div class="container"> <div class="row"> <div class="col-sm-3"> Level 1: .col-sm-3 </div> <div class="col-sm-9"> <div class="row"> <div class="col-8 col-sm-6"> Level 2: .col-8 .col-sm-6 </div> <div class="col-4 col-sm-6"> Level 2: .col-4 .col-sm-6 </div> </div> </div> </div> </div>
Alignment
Use flexbox alignment utilities to vertically and horizontally align columns.
Vertical alignment
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
<div class="container"> <div class="row align-items-start"> <div class="col"> One of three columns </div> <div class="col"> One of three columns </div> <div class="col"> One of three columns </div> </div> <div class="row align-items-center"> <div class="col"> One of three columns </div> <div class="col"> One of three columns </div> <div class="col"> One of three columns </div> </div> <div class="row align-items-end"> <div class="col"> One of three columns </div> <div class="col"> One of three columns </div> <div class="col"> One of three columns </div> </div> </div>
One of three columns
One of three columns
One of three columns
<div class="container"> <div class="row"> <div class="col align-self-start"> One of three columns </div> <div class="col align-self-center"> One of three columns </div> <div class="col align-self-end"> One of three columns </div> </div> </div>
Horizontal alignment
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
<div class="container"> <div class="row justify-content-start"> <div class="col-4"> One of two columns </div> <div class="col-4"> One of two columns </div> </div> <div class="row justify-content-center"> <div class="col-4"> One of two columns </div> <div class="col-4"> One of two columns </div> </div> <div class="row justify-content-end"> <div class="col-4"> One of two columns </div> <div class="col-4"> One of two columns </div> </div> <div class="row justify-content-around"> <div class="col-4"> One of two columns </div> <div class="col-4"> One of two columns </div> </div> <div class="row justify-content-between"> <div class="col-4"> One of two columns </div> <div class="col-4"> One of two columns </div> </div> <div class="row justify-content-evenly"> <div class="col-4"> One of two columns </div> <div class="col-4"> One of two columns </div> </div> </div>
Column wrapping
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
.col-9
.col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-6
Subsequent columns continue along the new line.
<div class="container"> <div class="row"> <div class="col-9">.col-9</div> <div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div> <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div> </div> </div>
Column breaks
Breaking columns to a new line in flexbox requires a small hack: add an element with width: 100%
wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple .row
s, but not every but not every implementation method can account for this.
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
<div class="container"> <div class="row"> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <!-- Force next columns to break to new line --> <div class="w-100"></div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> </div> </div>
You may also apply this break at specific breakpoints with our responsive display utilities
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
<div class="container"> <div class="row"> <div class="col-6 col-sm-4">.col-6 .col-sm-4</div> <div class="col-6 col-sm-4">.col-6 .col-sm-4</div> <!-- Force next columns to break to new line at md breakpoint and up --> <div class="w-100 d-none d-md-block"></div> <div class="col-6 col-sm-4">.col-6 .col-sm-4</div> <div class="col-6 col-sm-4">.col-6 .col-sm-4</div> </div> </div>
Order classes
Use .order-
classes for controlling the visual order of your content. These classes are responsive, so you can set the order
by breakpoint (e.g., .order-1.order-md-2
). Includes support for 1 through 5 across all six grid tiers.
First in DOM, no order applied
Third in DOM, with an order of 1
Second in DOM, with a larger order
<div class="container"> <div class="row"> <div class="col"> First in DOM, no order applied </div> <div class="col order-5"> Second in DOM, with a larger order </div> <div class="col order-1"> Third in DOM, with an order of 1 </div> </div> </div>
There are also responsive .order-first
and .order-last
classes that change the order
of an element by applying order: -1
and order: 6
, respectively. These classes can also be intermixed with the numbered .order-*
classes as needed.
Third in DOM, ordered first
Second in DOM, unordered
First in DOM, ordered last
<div class="container"> <div class="row"> <div class="col order-last"> First in DOM, ordered last </div> <div class="col"> Second in DOM, unordered </div> <div class="col order-first"> Third in DOM, ordered first </div> </div> </div>
Offset classes
Move columns to the right using .offset-md-*
classes. These classes increase the left margin of a column by *
columns. For example, .offset-md-4
moves .col-md-4
over four columns.
.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3
<div class="container"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div> </div> <div class="row"> <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div> <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div> </div> <div class="row"> <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div> </div> </div>
Margin utilities
With the move to flexbox in v4, you can use margin utilities like .me-auto
to force sibling columns away from one another.
.col-md-4
.col-md-4 .ms-auto
.col-md-3 .ms-md-auto
.col-md-3 .ms-md-auto
.col-auto .me-auto
.col-auto
<div class="container"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div> </div> <div class="row"> <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div> <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div> </div> <div class="row"> <div class="col-auto me-auto">.col-auto .me-auto</div> <div class="col-auto">.col-auto</div> </div> </div>
Standalone column classes
The .col-*
classes can also be used outside a .row
to give an element a specific width. Whenever column classes are used as non direct children of a row, the paddings are omitted.
.col-3: width of 25%
.col-sm-9: width of 75% above sm breakpoint
<div class="col-3 bg-light p-3 border"> .col-3: width of 25% </div> <div class="col-sm-9 bg-light p-3 border"> .col-sm-9: width of 75% above sm breakpoint </div>
No gutters
The gutters between columns in our predefined grid classes can be removed with .g-0
. This removes the negative margin
s from .row
and the horizontal padding
from all immediate children columns.
Need an edge-to-edge design? Drop the parent .container
or .container-fluid
.
In practice, here’s how it looks. Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more).
.col-12 .col-sm-6 .col-md-8
.col-12 .col-sm-6 .col-md-8
<div class="row g-0"> <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div> <div class="col-6 col-md-4">.col-6 .col-md-4</div> </div>
Helper Classes
We have created some really useful helper classes for you. Here are a few of them:
Text Size
.text-extra-small
- For extra small size of text.text-small
- For small size of text.text-medium
- For medium size of text.text-large
- For large size of text.text-extra-large
- For extra large size of text.title-extra-small
- For extra small size of title.title-small
- For small size of title.title-medium
- For medium size of title.title-large
- For large size of title.title-extra-large
- For extra large size of title
Text Color
.text-white
- For white color text.text-black
- For black color text.text-extra-dark-gray
- For light gray color text.text-dark-gray
- For gray color text.text-extra-medium-gray
- For dark gray color text.text-medium-gray
- For deep gray color text.text-extra-light-gray
- For deep light gray color text.text-light-gray
- For yellow color text.text-very-light-gray
- For pink color text.text-deep-pink
- For magenta color text
Text Align
.text-start
- For text align left.text-center
- For text align right.text-end
- For text align center
Text Transform
.text-lowercase
- For text to lowercase.text-uppercase
- For text to uppercase.text-capitalize
- For text to capitalize
Letter Spacing
.no-letter-spacing
- For letter spacing of none.letter-spacing-1
- For letter spacing of 1 pixel.letter-spacing-2
- For letter spacing of 2 pixel.letter-spacing-3
- For letter spacing of 3 pixel.letter-spacing-4
- For letter spacing of 4 pixel.letter-spacing-5
- For letter spacing of 5 pixel.letter-spacing-6
- For letter spacing of 6 pixel.letter-spacing-7
- For letter spacing of 7 pixel.letter-spacing-8
- For letter spacing of 8 pixel.letter-spacing-9
- For letter spacing of 9 pixel.letter-spacing-10
- For letter spacing of 10 pixel.letter-spacing-minus-1
- For letter spacing of -1 pixel.letter-spacing-minus-2
- For letter spacing of -2 pixel.letter-spacing-minus-3
- For letter spacing of -3 pixel.letter-spacing-minus-4
- For letter spacing of -4 pixel.letter-spacing-minus-5
- For letter spacing of -5 pixel.letter-spacing-minus-6
- For letter spacing of -6 pixel.letter-spacing-minus-7
- For letter spacing of -7 pixel.letter-spacing-minus-8
- For letter spacing of -8 pixel.letter-spacing-minus-9
- For letter spacing of -9 pixel.letter-spacing-minus-10
- For letter spacing of -10 pixel
Font Weight
.font-weight-100
- For font weight of 100.font-weight-200
- For font weight of 200.font-weight-300
- For font weight of 300.font-weight-400
- For font weight of 400.font-weight-600
- For font weight of 600.font-weight-700
- For font weight of 700.font-weight-800
- For font weight of 800.font-weight-900
- For font weight of 900
Icon Size
.icon-very-small
- For extra small icon size.icon-small
- For small icon size.icon-medium
- For medium icon size.icon-extra-medium
- For extra medium icon size.icon-large
- For large icon size.icon-round-small
- For small icon size in round shape.icon-round-medium
- For medium icon size in round shape
Background Color
.bg-transparent
- For background color of transparent.bg-white
- For background color of white.bg-black
- For background color of black.bg-extra-dark-gray
- For background color of extra dark gray.bg-dark-gray
- For background color of dark gray.bg-extra-medium-gray
- For background color of extra medium gray.bg-medium-gray
- For background color of medium gray.bg-extra-light-gray
- For background color of extra light gray.bg-medium-light-gray
- For background color of medium light gray.bg-light-gray
- For background color of light gray.bg-very-light-gray
- For background color of very light gray.bg-deep-pink
- For background color of deep pink.bg-transparent-white
- For background color of transparent white.bg-transparent-black
- For background color of transparent black.bg-white-opacity
- For background color of white with low trnasparency.bg-black-opacity
- For background color of black with low trnasparency.bg-deep-pink-opacity
- For background color of deep pink with low trnasparency
Opacity
.opacity-very-light
- For very light opacity.opacity-light
- For light opacity.opacity-extra-medium
- For extra medium opacity.opacity-medium
- For medium opacity.opacity-full
- For full opacity.opacity-full-dark
- For full dark opacity.opacity1
- For 0.10 opacity.opacity2
- For 0.20 opacity.opacity3
- For 0.30 opacity.opacity4
- For 0.40 opacity.opacity5
- For 0.50 opacity.opacity6
- For 0.60 opacity.opacity7
- For 0.70 opacity.opacity8
- For 0.80 opacity.opacity9
- For 0.90 opacity
Margin All Side
.margin-half-all
- Margin of 0.5% each side.margin-one-all
- Margin of 1% each side.margin-one-half-all
- Margin of 1.5% each side.margin-two-all
- Margin of 2% each side.margin-two-half-all
- Margin of 2.5% each side.margin-three-all
- Margin of 3% each side.margin-three-half-all
- Margin of 3.5% each side.margin-four-all
- Margin of 4% each side.margin-four-half-all
- Margin of 4.5% each side.margin-five-all
- Margin of 5% each side.margin-five-half-all
- Margin of 5.5% each side.margin-six-all
- Margin of 6% each side.margin-six-half-all
- Margin of 6.5% each side.margin-seven-all
- Margin of 7% each side.margin-seven-half-all
- Margin of 7.5% each side.margin-eight-all
- Margin of 8% each side.margin-eight-half-all
- Margin of 8.5% each side.margin-nine-all
- Margin of 9% each side.margin-nine-half-all
- Margin of 9.5% each side.margin-ten-all
- Margin of 10% each side.margin-ten-half-all
- Margin of 10.5% each side.margin-eleven-all
- Margin of 11% each side.margin-eleven-half-all
- Margin of 11.5% each side.margin-twelve-all
- Margin of 12% each side.margin-twelve-half-all
- Margin of 12.5% each side.margin-thirteen-all
- Margin of 13% each side.margin-thirteen-half-all
- Margin of 13.5% each side.margin-fourteen-all
- Margin of 14% each side.margin-fourteen-half-all
- Margin of 14.5% each side.margin-fifteen-all
- Margin of 15% each side.margin-fifteen-half-all
- Margin of 15.5% each side.margin-sixteen-all
- Margin of 16% each side.margin-sixteen-half-all
- Margin of 16.5% each side.margin-seventeen-all
- Margin of 17% each side.margin-seventeen-half-all
- Margin of 17.5% each side.margin-eighteen-all
- Margin of 18% each side.margin-eighteen-half-all
- Margin of 18.5% each side.margin-nineteen-all
- Margin of 19% each side.margin-nineteen-half-all
- Margin of 19.5% each side.margin-twenty-all
- Margin of 20% each side.margin-twenty-half-all
- Margin of 20.5% each side.margin-twenty-one-all
- Margin of 21% each side.margin-twenty-one-half-all
- Margin of 21.5% each side.margin-twenty-two-all
- Margin of 22% each side.margin-twenty-two-half-all
- Margin of 22.5% each side.margin-twenty-three-all
- Margin of 23% each side.margin-twenty-three-half-all
- Margin of 23.5% each side.margin-twenty-four-all
- Margin of 24% each side.margin-twenty-four-half-all
- Margin of 24.5% each side.margin-twenty-five-all
- Margin of 25% each side.margin-5px-all
- Margin of 5px each side.margin-10px-all
- Margin of 10px each side.margin-15px-all
- Margin of 15px each side.margin-20px-all
- Margin of 20px each side.margin-25px-all
- Margin of 25px each side.margin-30px-all
- Margin of 30px each side.margin-35px-all
- Margin of 35px each side.margin-40px-all
- Margin of 40px each side.margin-45px-all
- Margin of 45px each side.margin-50px-all
- Margin of 50px each side.margin-55px-all
- Margin of 55px each side.margin-60px-all
- Margin of 60px each side.margin-65px-all
- Margin of 65px each side.margin-70px-all
- Margin of 70px each side.margin-75px-all
- Margin of 75px each side.margin-80px-all
- Margin of 80px each side.margin-85px-all
- Margin of 85px each side.margin-90px-all
- Margin of 90px each side.margin-95px-all
- Margin of 95px each side.margin-100px-all
- Margin of 100px each side
Margin Top Side
.margin-half-top
- Margin of 0.5% top side.margin-one-top
- Margin of 1% top side.margin-one-half-top
- Margin of 1.5% top side.margin-two-top
- Margin of 2% top side.margin-two-half-top
- Margin of 2.5% top side.margin-three-top
- Margin of 3% top side.margin-three-half-top
- Margin of 3.5% top side.margin-four-top
- Margin of 4% top side.margin-four-half-top
- Margin of 4.5% top side.margin-five-top
- Margin of 5% top side.margin-five-half-top
- Margin of 5.5% top side.margin-six-top
- Margin of 6% top side.margin-six-half-top
- Margin of 6.5% top side.margin-seven-top
- Margin of 7% top side.margin-seven-half-top
- Margin of 7.5% top side.margin-eight-top
- Margin of 8% top side.margin-eight-half-top
- Margin of 8.5% top side.margin-nine-top
- Margin of 9% top side.margin-nine-half-top
- Margin of 9.5% top side.margin-ten-top
- Margin of 10% top side.margin-ten-half-top
- Margin of 10.5% top side.margin-eleven-top
- Margin of 11% top side.margin-eleven-half-top
- Margin of 11.5% top side.margin-twelve-top
- Margin of 12% top side.margin-twelve-half-top
- Margin of 12.5% top side.margin-thirteen-top
- Margin of 13% top side.margin-thirteen-half-top
- Margin of 13.5% top side.margin-fourteen-top
- Margin of 14% top side.margin-fourteen-half-top
- Margin of 14.5% top side.margin-fifteen-top
- Margin of 15% top side.margin-fifteen-half-top
- Margin of 15.5% top side.margin-sixteen-top
- Margin of 16% top side.margin-sixteen-half-top
- Margin of 16.5% top side.margin-seventeen-top
- Margin of 17% top side.margin-seventeen-half-top
- Margin of 17.5% top side.margin-eighteen-top
- Margin of 18% top side.margin-eighteen-half-top
- Margin of 18.5% top side.margin-nineteen-top
- Margin of 19% top side.margin-nineteen-half-top
- Margin of 19.5% top side.margin-twenty-top
- Margin of 20% top side.margin-twenty-half-top
- Margin of 20.5% top side.margin-twenty-one-top
- Margin of 21% top side.margin-twenty-one-half-top
- Margin of 21.5% top side.margin-twenty-two-top
- Margin of 22% top side.margin-twenty-two-half-top
- Margin of 22.5% top side.margin-twenty-three-top
- Margin of 23% top side.margin-twenty-three-half-top
- Margin of 23.5% top side.margin-twenty-four-top
- Margin of 24% top side.margin-twenty-four-half-top
- Margin of 24.5% top side.margin-twenty-five-top
- Margin of 25% top side.margin-5px-top
- Margin of 5px top side.margin-10px-top
- Margin of 10px top side.margin-15px-top
- Margin of 15px top side.margin-20px-top
- Margin of 20px top side.margin-25px-top
- Margin of 25px top side.margin-30px-top
- Margin of 30px top side.margin-35px-top
- Margin of 35px top side.margin-40px-top
- Margin of 40px top side.margin-45px-top
- Margin of 45px top side.margin-50px-top
- Margin of 50px top side.margin-55px-top
- Margin of 55px top side.margin-60px-top
- Margin of 60px top side.margin-65px-top
- Margin of 65px top side.margin-70px-top
- Margin of 70px top side.margin-75px-top
- Margin of 75px top side.margin-80px-top
- Margin of 80px top side.margin-85px-top
- Margin of 85px top side.margin-90px-top
- Margin of 90px top side.margin-95px-top
- Margin of 95px top side.margin-100px-top
- Margin of 100px top side
Margin Bottom Side
.margin-half-bottom
- Margin of 0.5% bottom side.margin-one-bottom
- Margin of 1% bottom side.margin-one-half-bottom
- Margin of 1.5% bottom side.margin-two-bottom
- Margin of 2% bottom side.margin-two-half-bottom
- Margin of 2.5% bottom side.margin-three-bottom
- Margin of 3% bottom side.margin-three-half-bottom
- Margin of 3.5% bottom side.margin-four-bottom
- Margin of 4% bottom side.margin-four-half-bottom
- Margin of 4.5% bottom side.margin-five-bottom
- Margin of 5% bottom side.margin-five-half-bottom
- Margin of 5.5% bottom side.margin-six-bottom
- Margin of 6% bottom side.margin-six-half-bottom
- Margin of 6.5% bottom side.margin-seven-bottom
- Margin of 7% bottom side.margin-seven-half-bottom
- Margin of 7.5% bottom side.margin-eight-bottom
- Margin of 8% bottom side.margin-eight-half-bottom
- Margin of 8.5% bottom side.margin-nine-bottom
- Margin of 9% bottom side.margin-nine-half-bottom
- Margin of 9.5% bottom side.margin-ten-bottom
- Margin of 10% bottom side.margin-ten-half-bottom
- Margin of 10.5% bottom side.margin-eleven-bottom
- Margin of 11% bottom side.margin-eleven-half-bottom
- Margin of 11.5% bottom side.margin-twelve-bottom
- Margin of 12% bottom side.margin-twelve-half-bottom
- Margin of 12.5% bottom side.margin-thirteen-bottom
- Margin of 13% bottom side.margin-thirteen-half-bottom
- Margin of 13.5% bottom side.margin-fourteen-bottom
- Margin of 14% bottom side.margin-fourteen-half-bottom
- Margin of 14.5% bottom side.margin-fifteen-bottom
- Margin of 15% bottom side.margin-fifteen-half-bottom
- Margin of 15.5% bottom side.margin-sixteen-bottom
- Margin of 16% bottom side.margin-sixteen-half-bottom
- Margin of 16.5% bottom side.margin-seventeen-bottom
- Margin of 17% bottom side.margin-seventeen-half-bottom
- Margin of 17.5% bottom side.margin-eighteen-bottom
- Margin of 18% bottom side.margin-eighteen-half-bottom
- Margin of 18.5% bottom side.margin-nineteen-bottom
- Margin of 19% bottom side.margin-nineteen-half-bottom
- Margin of 19.5% bottom side.margin-twenty-bottom
- Margin of 20% bottom side.margin-twenty-half-bottom
- Margin of 20.5% bottom side.margin-twenty-one-bottom
- Margin of 21% bottom side.margin-twenty-one-half-bottom
- Margin of 21.5% bottom side.margin-twenty-two-bottom
- Margin of 22% bottom side.margin-twenty-two-half-bottom
- Margin of 22.5% bottom side.margin-twenty-three-bottom
- Margin of 23% bottom side.margin-twenty-three-half-bottom
- Margin of 23.5% bottom side.margin-twenty-four-bottom
- Margin of 24% bottom side.margin-twenty-four-half-bottom
- Margin of 24.5% bottom side.margin-twenty-five-bottom
- Margin of 25% bottom side.margin-5px-bottom
- Margin of 5px bottom side.margin-10px-bottom
- Margin of 10px bottom side.margin-15px-bottom
- Margin of 15px bottom side.margin-20px-bottom
- Margin of 20px bottom side.margin-25px-bottom
- Margin of 25px bottom side.margin-30px-bottom
- Margin of 30px bottom side.margin-35px-bottom
- Margin of 35px bottom side.margin-40px-bottom
- Margin of 40px bottom side.margin-45px-bottom
- Margin of 45px bottom side.margin-50px-bottom
- Margin of 50px bottom side.margin-55px-bottom
- Margin of 55px bottom side.margin-60px-bottom
- Margin of 60px bottom side.margin-65px-bottom
- Margin of 65px bottom side.margin-70px-bottom
- Margin of 70px bottom side.margin-75px-bottom
- Margin of 75px bottom side.margin-80px-bottom
- Margin of 80px bottom side.margin-85px-bottom
- Margin of 85px bottom side.margin-90px-bottom
- Margin of 90px bottom side.margin-95px-bottom
- Margin of 95px bottom side.margin-100px-bottom
- Margin of 100px bottom side
Margin Right Side
.margin-half-right
- Margin of 0.5% right side.margin-one-right
- Margin of 1% right side.margin-one-half-right
- Margin of 1.5% right side.margin-two-right
- Margin of 2% right side.margin-two-half-right
- Margin of 2.5% right side.margin-three-right
- Margin of 3% right side.margin-three-half-right
- Margin of 3.5% right side.margin-four-right
- Margin of 4% right side.margin-four-half-right
- Margin of 4.5% right side.margin-five-right
- Margin of 5% right side.margin-five-half-right
- Margin of 5.5% right side.margin-six-right
- Margin of 6% right side.margin-six-half-right
- Margin of 6.5% right side.margin-seven-right
- Margin of 7% right side.margin-seven-half-right
- Margin of 7.5% right side.margin-eight-right
- Margin of 8% right side.margin-eight-half-right
- Margin of 8.5% right side.margin-nine-right
- Margin of 9% right side.margin-nine-half-right
- Margin of 9.5% right side.margin-ten-right
- Margin of 10% right side.margin-ten-half-right
- Margin of 10.5% right side.margin-eleven-right
- Margin of 11% right side.margin-eleven-half-right
- Margin of 11.5% right side.margin-twelve-right
- Margin of 12% right side.margin-twelve-half-right
- Margin of 12.5% right side.margin-thirteen-right
- Margin of 13% right side.margin-thirteen-half-right
- Margin of 13.5% right side.margin-fourteen-right
- Margin of 14% right side.margin-fourteen-half-right
- Margin of 14.5% right side.margin-fifteen-right
- Margin of 15% right side.margin-fifteen-half-right
- Margin of 15.5% right side.margin-sixteen-right
- Margin of 16% right side.margin-sixteen-half-right
- Margin of 16.5% right side.margin-seventeen-right
- Margin of 17% right side.margin-seventeen-half-right
- Margin of 17.5% right side.margin-eighteen-right
- Margin of 18% right side.margin-eighteen-half-right
- Margin of 18.5% right side.margin-nineteen-right
- Margin of 19% right side.margin-nineteen-half-right
- Margin of 19.5% right side.margin-twenty-right
- Margin of 20% right side.margin-twenty-half-right
- Margin of 20.5% right side.margin-twenty-one-right
- Margin of 21% right side.margin-twenty-one-half-right
- Margin of 21.5% right side.margin-twenty-two-right
- Margin of 22% right side.margin-twenty-two-half-right
- Margin of 22.5% right side.margin-twenty-three-right
- Margin of 23% right side.margin-twenty-three-half-right
- Margin of 23.5% right side.margin-twenty-four-right
- Margin of 24% right side.margin-twenty-four-half-right
- Margin of 24.5% right side.margin-twenty-five-right
- Margin of 25% right side.margin-5px-right
- Margin of 5px right side.margin-10px-right
- Margin of 10px right side.margin-15px-right
- Margin of 15px right side.margin-20px-right
- Margin of 20px right side.margin-25px-right
- Margin of 25px right side.margin-30px-right
- Margin of 30px right side.margin-35px-right
- Margin of 35px right side.margin-40px-right
- Margin of 40px right side.margin-45px-right
- Margin of 45px right side.margin-50px-right
- Margin of 50px right side.margin-55px-right
- Margin of 55px right side.margin-60px-right
- Margin of 60px right side.margin-65px-right
- Margin of 65px right side.margin-70px-right
- Margin of 70px right side.margin-75px-right
- Margin of 75px right side.margin-80px-right
- Margin of 80px right side.margin-85px-right
- Margin of 85px right side.margin-90px-right
- Margin of 90px right side.margin-95px-right
- Margin of 95px right side.margin-100px-right
- Margin of 100px right side
Margin Left Side
.margin-half-left
- Margin of 0.5% left side.margin-one-left
- Margin of 1% left side.margin-one-half-left
- Margin of 1.5% left side.margin-two-left
- Margin of 2% left side.margin-two-half-left
- Margin of 2.5% left side.margin-three-left
- Margin of 3% left side.margin-three-half-left
- Margin of 3.5% left side.margin-four-left
- Margin of 4% left side.margin-four-half-left
- Margin of 4.5% left side.margin-five-left
- Margin of 5% left side.margin-five-half-left
- Margin of 5.5% left side.margin-six-left
- Margin of 6% left side.margin-six-half-left
- Margin of 6.5% left side.margin-seven-left
- Margin of 7% left side.margin-seven-half-left
- Margin of 7.5% left side.margin-eight-left
- Margin of 8% left side.margin-eight-half-left
- Margin of 8.5% left side.margin-nine-left
- Margin of 9% left side.margin-nine-half-left
- Margin of 9.5% left side.margin-ten-left
- Margin of 10% left side.margin-ten-half-left
- Margin of 10.5% left side.margin-eleven-left
- Margin of 11% left side.margin-eleven-half-left
- Margin of 11.5% left side.margin-twelve-left
- Margin of 12% left side.margin-twelve-half-left
- Margin of 12.5% left side.margin-thirteen-left
- Margin of 13% left side.margin-thirteen-half-left
- Margin of 13.5% left side.margin-fourteen-left
- Margin of 14% left side.margin-fourteen-half-left
- Margin of 14.5% left side.margin-fifteen-left
- Margin of 15% left side.margin-fifteen-half-left
- Margin of 15.5% left side.margin-sixteen-left
- Margin of 16% left side.margin-sixteen-half-left
- Margin of 16.5% left side.margin-seventeen-left
- Margin of 17% left side.margin-seventeen-half-left
- Margin of 17.5% left side.margin-eighteen-left
- Margin of 18% left side.margin-eighteen-half-left
- Margin of 18.5% left side.margin-nineteen-left
- Margin of 19% left side.margin-nineteen-half-left
- Margin of 19.5% left side.margin-twenty-left
- Margin of 20% left side.margin-twenty-half-left
- Margin of 20.5% left side.margin-twenty-one-left
- Margin of 21% left side.margin-twenty-one-half-left
- Margin of 21.5% left side.margin-twenty-two-left
- Margin of 22% left side.margin-twenty-two-half-left
- Margin of 22.5% left side.margin-twenty-three-left
- Margin of 23% left side.margin-twenty-three-half-left
- Margin of 23.5% left side.margin-twenty-four-left
- Margin of 24% left side.margin-twenty-four-half-left
- Margin of 24.5% left side.margin-twenty-five-left
- Margin of 25% left side.margin-5px-left
- Margin of 5px left side.margin-10px-left
- Margin of 10px left side.margin-15px-left
- Margin of 15px left side.margin-20px-left
- Margin of 20px left side.margin-25px-left
- Margin of 25px left side.margin-30px-left
- Margin of 30px left side.margin-35px-left
- Margin of 35px left side.margin-40px-left
- Margin of 40px left side.margin-45px-left
- Margin of 45px left side.margin-50px-left
- Margin of 50px left side.margin-55px-left
- Margin of 55px left side.margin-60px-left
- Margin of 60px left side.margin-65px-left
- Margin of 65px left side.margin-70px-left
- Margin of 70px left side.margin-75px-left
- Margin of 75px left side.margin-80px-left
- Margin of 80px left side.margin-85px-left
- Margin of 85px left side.margin-90px-left
- Margin of 90px left side.margin-95px-left
- Margin of 95px left side.margin-100px-left
- Margin of 100px left side
Margin Left & Right Side
.margin-half-lr
- Margin of 0.5% left and right side.margin-one-lr
- Margin of 1% left and right side.margin-one-half-lr
- Margin of 1.5% left and right side.margin-two-lr
- Margin of 2% left and right side.margin-two-half-lr
- Margin of 2.5% left and right side.margin-three-lr
- Margin of 3% left and right side.margin-three-half-lr
- Margin of 3.5% left and right side.margin-four-lr
- Margin of 4% left and right side.margin-four-half-lr
- Margin of 4.5% left and right side.margin-five-lr
- Margin of 5% left and right side.margin-five-half-lr
- Margin of 5.5% left and right side.margin-six-lr
- Margin of 6% left and right side.margin-six-half-lr
- Margin of 6.5% left and right side.margin-seven-lr
- Margin of 7% left and right side.margin-seven-half-lr
- Margin of 7.5% left and right side.margin-eight-lr
- Margin of 8% left and right side.margin-eight-half-lr
- Margin of 8.5% left and right side.margin-nine-lr
- Margin of 9% left and right side.margin-nine-half-lr
- Margin of 9.5% left and right side.margin-ten-lr
- Margin of 10% left and right side.margin-ten-half-lr
- Margin of 10.5% left and right side.margin-eleven-lr
- Margin of 11% left and right side.margin-eleven-half-lr
- Margin of 11.5% left and right side.margin-twelve-lr
- Margin of 12% left and right side.margin-twelve-half-lr
- Margin of 12.5% left and right side.margin-thirteen-lr
- Margin of 13% left and right side.margin-thirteen-half-lr
- Margin of 13.5% left and right side.margin-fourteen-lr
- Margin of 14% left and right side.margin-fourteen-half-lr
- Margin of 14.5% left and right side.margin-fifteen-lr
- Margin of 15% left and right side.margin-fifteen-half-lr
- Margin of 15.5% left and right side.margin-sixteen-lr
- Margin of 16% left and right side.margin-sixteen-half-lr
- Margin of 16.5% left and right side.margin-seventeen-lr
- Margin of 17% left and right side.margin-seventeen-half-lr
- Margin of 17.5% left and right side.margin-eighteen-lr
- Margin of 18% left and right side.margin-eighteen-half-lr
- Margin of 18.5% left and right side.margin-nineteen-lr
- Margin of 19% left and right side.margin-nineteen-half-lr
- Margin of 19.5% left and right side.margin-twenty-lr
- Margin of 20% left and right side.margin-twenty-half-lr
- Margin of 20.5% left and right side.margin-twenty-one-lr
- Margin of 21% left and right side.margin-twenty-one-half-lr
- Margin of 21.5% left and right side.margin-twenty-two-lr
- Margin of 22% left and right side.margin-twenty-two-half-lr
- Margin of 22.5% left and right side.margin-twenty-three-lr
- Margin of 23% left and right side.margin-twenty-three-half-lr
- Margin of 23.5% left and right side.margin-twenty-four-lr
- Margin of 24% left and right side.margin-twenty-four-half-lr
- Margin of 24.5% left and right side.margin-twenty-five-lr
- Margin of 25% left and right side.margin-5px-lr
- Margin of 5px left and right side.margin-10px-lr
- Margin of 10px left and right side.margin-15px-lr
- Margin of 15px left and right side.margin-20px-lr
- Margin of 20px left and right side.margin-25px-lr
- Margin of 25px left and right side.margin-30px-lr
- Margin of 30px left and right side.margin-35px-lr
- Margin of 35px left and right side.margin-40px-lr
- Margin of 40px left and right side.margin-45px-lr
- Margin of 45px left and right side.margin-50px-lr
- Margin of 50px left and right side.margin-55px-lr
- Margin of 55px left and right side.margin-60px-lr
- Margin of 60px left and right side.margin-65px-lr
- Margin of 65px left and right side.margin-70px-lr
- Margin of 70px left and right side.margin-75px-lr
- Margin of 75px left and right side.margin-80px-lr
- Margin of 80px left and right side.margin-85px-lr
- Margin of 85px left and right side.margin-90px-lr
- Margin of 90px left and right side.margin-95px-lr
- Margin of 95px left and right side.margin-100px-lr
- Margin of 100px left and right side
Margin Top & Bottom Side
.margin-half-tb
- Margin of 0.5% top and bottom side.margin-one-tb
- Margin of 1% top and bottom side.margin-one-half-tb
- Margin of 1.5% top and bottom side.margin-two-tb
- Margin of 2% top and bottom side.margin-two-half-tb
- Margin of 2.5% top and bottom side.margin-three-tb
- Margin of 3% top and bottom side.margin-three-half-tb
- Margin of 3.5% top and bottom side.margin-four-tb
- Margin of 4% top and bottom side.margin-four-half-tb
- Margin of 4.5% top and bottom side.margin-five-tb
- Margin of 5% top and bottom side.margin-five-half-tb
- Margin of 5.5% top and bottom side.margin-six-tb
- Margin of 6% top and bottom side.margin-six-half-tb
- Margin of 6.5% top and bottom side.margin-seven-tb
- Margin of 7% top and bottom side.margin-seven-half-tb
- Margin of 7.5% top and bottom side.margin-eight-tb
- Margin of 8% top and bottom side.margin-eight-half-tb
- Margin of 8.5% top and bottom side.margin-nine-tb
- Margin of 9% top and bottom side.margin-nine-half-tb
- Margin of 9.5% top and bottom side.margin-ten-tb
- Margin of 10% top and bottom side.margin-ten-half-tb
- Margin of 10.5% top and bottom side.margin-eleven-tb
- Margin of 11% top and bottom side.margin-eleven-half-tb
- Margin of 11.5% top and bottom side.margin-twelve-tb
- Margin of 12% top and bottom side.margin-twelve-half-tb
- Margin of 12.5% top and bottom side.margin-thirteen-tb
- Margin of 13% top and bottom side.margin-thirteen-half-tb
- Margin of 13.5% top and bottom side.margin-fourteen-tb
- Margin of 14% top and bottom side.margin-fourteen-half-tb
- Margin of 14.5% top and bottom side.margin-fifteen-tb
- Margin of 15% top and bottom side.margin-fifteen-half-tb
- Margin of 15.5% top and bottom side.margin-sixteen-tb
- Margin of 16% top and bottom side.margin-sixteen-half-tb
- Margin of 16.5% top and bottom side.margin-seventeen-tb
- Margin of 17% top and bottom side.margin-seventeen-half-tb
- Margin of 17.5% top and bottom side.margin-eighteen-tb
- Margin of 18% top and bottom side.margin-eighteen-half-tb
- Margin of 18.5% top and bottom side.margin-nineteen-tb
- Margin of 19% top and bottom side.margin-nineteen-half-tb
- Margin of 19.5% top and bottom side.margin-twenty-tb
- Margin of 20% top and bottom side.margin-twenty-half-tb
- Margin of 20.5% top and bottom side.margin-twenty-one-tb
- Margin of 21% top and bottom side.margin-twenty-one-half-tb
- Margin of 21.5% top and bottom side.margin-twenty-two-tb
- Margin of 22% top and bottom side.margin-twenty-two-half-tb
- Margin of 22.5% top and bottom side.margin-twenty-three-tb
- Margin of 23% top and bottom side.margin-twenty-three-half-tb
- Margin of 23.5% top and bottom side.margin-twenty-four-tb
- Margin of 24% top and bottom side.margin-twenty-four-half-tb
- Margin of 24.5% top and bottom side.margin-twenty-five-tb
- Margin of 25% top and bottom side.margin-5px-tb
- Margin of 5px top and bottom side.margin-10px-tb
- Margin of 10px top and bottom side.margin-15px-tb
- Margin of 15px top and bottom side.margin-20px-tb
- Margin of 20px top and bottom side.margin-25px-tb
- Margin of 25px top and bottom side.margin-30px-tb
- Margin of 30px top and bottom side.margin-35px-tb
- Margin of 35px top and bottom side.margin-40px-tb
- Margin of 40px top and bottom side.margin-45px-tb
- Margin of 45px top and bottom side.margin-50px-tb
- Margin of 50px top and bottom side.margin-55px-tb
- Margin of 55px top and bottom side.margin-60px-tb
- Margin of 60px top and bottom side.margin-65px-tb
- Margin of 65px top and bottom side.margin-70px-tb
- Margin of 70px top and bottom side.margin-75px-tb
- Margin of 75px top and bottom side.margin-80px-tb
- Margin of 80px top and bottom side.margin-85px-tb
- Margin of 85px top and bottom side.margin-90px-tb
- Margin of 90px top and bottom side.margin-95px-tb
- Margin of 95px top and bottom side.margin-100px-tb
- Margin of 100px top and bottom side
.no-margin
- Remove margin from all sides.no-margin-lr
- Remove margin from left and right sides.no-margin-tb
- Remove margin from top and bottom sides.no-margin-top
- Remove margin from top side.no-margin-bottom
- Remove margin from bottom side.no-margin-right
- Remove margin from right side.no-margin-left
- Remove margin from left side.margin-lr-auto
- Set auto margin for left and right side.margin-auto
- Set auto margin
Padding All Side
.padding-half-all
- Padding of 0.5% each side.padding-one-all
- Padding of 1% each side.padding-one-half-all
- Padding of 1.5% each side.padding-two-all
- Padding of 2% each side.padding-two-half-all
- Padding of 2.5% each side.padding-three-all
- Padding of 3% each side.padding-three-half-all
- Padding of 3.5% each side.padding-four-all
- Padding of 4% each side.padding-four-half-all
- Padding of 4.5% each side.padding-five-all
- Padding of 5% each side.padding-five-half-all
- Padding of 5.5% each side.padding-six-all
- Padding of 6% each side.padding-six-half-all
- Padding of 6.5% each side.padding-seven-all
- Padding of 7% each side.padding-seven-half-all
- Padding of 7.5% each side.padding-eight-all
- Padding of 8% each side.padding-eight-half-all
- Padding of 8.5% each side.padding-nine-all
- Padding of 9% each side.padding-nine-half-all
- Padding of 9.5% each side.padding-ten-all
- Padding of 10% each side.padding-ten-half-all
- Padding of 10.5% each side.padding-eleven-all
- Padding of 11% each side.padding-eleven-half-all
- Padding of 11.5% each side.padding-twelve-all
- Padding of 12% each side.padding-twelve-half-all
- Padding of 12.5% each side.padding-thirteen-all
- Padding of 13% each side.padding-thirteen-half-all
- Padding of 13.5% each side.padding-fourteen-all
- Padding of 14% each side.padding-fourteen-half-all
- Padding of 14.5% each side.padding-fifteen-all
- Padding of 15% each side.padding-fifteen-half-all
- Padding of 15.5% each side.padding-sixteen-all
- Padding of 16% each side.padding-sixteen-half-all
- Padding of 16.5% each side.padding-seventeen-all
- Padding of 17% each side.padding-seventeen-half-all
- Padding of 17.5% each side.padding-eighteen-all
- Padding of 18% each side.padding-eighteen-half-all
- Padding of 18.5% each side.padding-nineteen-all
- Padding of 19% each side.padding-nineteen-half-all
- Padding of 19.5% each side.padding-twenty-all
- Padding of 20% each side.padding-twenty-half-all
- Padding of 20.5% each side.padding-twenty-one-all
- Padding of 21% each side.padding-twenty-one-half-all
- Padding of 21.5% each side.padding-twenty-two-all
- Padding of 22% each side.padding-twenty-two-half-all
- Padding of 22.5% each side.padding-twenty-three-all
- Padding of 23% each side.padding-twenty-three-half-all
- Padding of 23.5% each side.padding-twenty-four-all
- Padding of 24% each side.padding-twenty-four-half-all
- Padding of 24.5% each side.padding-twenty-five-all
- Padding of 25% each side.padding-5px-all
- Padding of 5px each side.padding-10px-all
- Padding of 10px each side.padding-15px-all
- Padding of 15px each side.padding-20px-all
- Padding of 20px each side.padding-25px-all
- Padding of 25px each side.padding-30px-all
- Padding of 30px each side.padding-35px-all
- Padding of 35px each side.padding-40px-all
- Padding of 40px each side.padding-45px-all
- Padding of 45px each side.padding-50px-all
- Padding of 50px each side.padding-55px-all
- Padding of 55px each side.padding-60px-all
- Padding of 60px each side.padding-65px-all
- Padding of 65px each side.padding-70px-all
- Padding of 70px each side.padding-75px-all
- Padding of 75px each side.padding-80px-all
- Padding of 80px each side.padding-85px-all
- Padding of 85px each side.padding-90px-all
- Padding of 90px each side.padding-95px-all
- Padding of 95px each side.padding-100px-all
- Padding of 100px each side
Padding Top Side
.padding-half-top
- Padding of 0.5% top side.padding-one-top
- Padding of 1% top side.padding-one-half-top
- Padding of 1.5% top side.padding-two-top
- Padding of 2% top side.padding-two-half-top
- Padding of 2.5% top side.padding-three-top
- Padding of 3% top side.padding-three-half-top
- Padding of 3.5% top side.padding-four-top
- Padding of 4% top side.padding-four-half-top
- Padding of 4.5% top side.padding-five-top
- Padding of 5% top side.padding-five-half-top
- Padding of 5.5% top side.padding-six-top
- Padding of 6% top side.padding-six-half-top
- Padding of 6.5% top side.padding-seven-top
- Padding of 7% top side.padding-seven-half-top
- Padding of 7.5% top side.padding-eight-top
- Padding of 8% top side.padding-eight-half-top
- Padding of 8.5% top side.padding-nine-top
- Padding of 9% top side.padding-nine-half-top
- Padding of 9.5% top side.padding-ten-top
- Padding of 10% top side.padding-ten-half-top
- Padding of 10.5% top side.padding-eleven-top
- Padding of 11% top side.padding-eleven-half-top
- Padding of 11.5% top side.padding-twelve-top
- Padding of 12% top side.padding-twelve-half-top
- Padding of 12.5% top side.padding-thirteen-top
- Padding of 13% top side.padding-thirteen-half-top
- Padding of 13.5% top side.padding-fourteen-top
- Padding of 14% top side.padding-fourteen-half-top
- Padding of 14.5% top side.padding-fifteen-top
- Padding of 15% top side.padding-fifteen-half-top
- Padding of 15.5% top side.padding-sixteen-top
- Padding of 16% top side.padding-sixteen-half-top
- Padding of 16.5% top side.padding-seventeen-top
- Padding of 17% top side.padding-seventeen-half-top
- Padding of 17.5% top side.padding-eighteen-top
- Padding of 18% top side.padding-eighteen-half-top
- Padding of 18.5% top side.padding-nineteen-top
- Padding of 19% top side.padding-nineteen-half-top
- Padding of 19.5% top side.padding-twenty-top
- Padding of 20% top side.padding-twenty-half-top
- Padding of 20.5% top side.padding-twenty-one-top
- Padding of 21% top side.padding-twenty-one-half-top
- Padding of 21.5% top side.padding-twenty-two-top
- Padding of 22% top side.padding-twenty-two-half-top
- Padding of 22.5% top side.padding-twenty-three-top
- Padding of 23% top side.padding-twenty-three-half-top
- Padding of 23.5% top side.padding-twenty-four-top
- Padding of 24% top side.padding-twenty-four-half-top
- Padding of 24.5% top side.padding-twenty-five-top
- Padding of 25% top side.padding-5px-top
- Padding of 5px top side.padding-10px-top
- Padding of 10px top side.padding-15px-top
- Padding of 15px top side.padding-20px-top
- Padding of 20px top side.padding-25px-top
- Padding of 25px top side.padding-30px-top
- Padding of 30px top side.padding-35px-top
- Padding of 35px top side.padding-40px-top
- Padding of 40px top side.padding-45px-top
- Padding of 45px top side.padding-50px-top
- Padding of 50px top side.padding-55px-top
- Padding of 55px top side.padding-60px-top
- Padding of 60px top side.padding-65px-top
- Padding of 65px top side.padding-70px-top
- Padding of 70px top side.padding-75px-top
- Padding of 75px top side.padding-80px-top
- Padding of 80px top side.padding-85px-top
- Padding of 85px top side.padding-90px-top
- Padding of 90px top side.padding-95px-top
- Padding of 95px top side.padding-100px-top
- Padding of 100px top side
Padding Bottom Side
.padding-half-bottom
- Padding of 0.5% bottom side.padding-one-bottom
- Padding of 1% bottom side.padding-one-half-bottom
- Padding of 1.5% bottom side.padding-two-bottom
- Padding of 2% bottom side.padding-two-half-bottom
- Padding of 2.5% bottom side.padding-three-bottom
- Padding of 3% bottom side.padding-three-half-bottom
- Padding of 3.5% bottom side.padding-four-bottom
- Padding of 4% bottom side.padding-four-half-bottom
- Padding of 4.5% bottom side.padding-five-bottom
- Padding of 5% bottom side.padding-five-half-bottom
- Padding of 5.5% bottom side.padding-six-bottom
- Padding of 6% bottom side.padding-six-half-bottom
- Padding of 6.5% bottom side.padding-seven-bottom
- Padding of 7% bottom side.padding-seven-half-bottom
- Padding of 7.5% bottom side.padding-eight-bottom
- Padding of 8% bottom side.padding-eight-half-bottom
- Padding of 8.5% bottom side.padding-nine-bottom
- Padding of 9% bottom side.padding-nine-half-bottom
- Padding of 9.5% bottom side.padding-ten-bottom
- Padding of 10% bottom side.padding-ten-half-bottom
- Padding of 10.5% bottom side.padding-eleven-bottom
- Padding of 11% bottom side.padding-eleven-half-bottom
- Padding of 11.5% bottom side.padding-twelve-bottom
- Padding of 12% bottom side.padding-twelve-half-bottom
- Padding of 12.5% bottom side.padding-thirteen-bottom
- Padding of 13% bottom side.padding-thirteen-half-bottom
- Padding of 13.5% bottom side.padding-fourteen-bottom
- Padding of 14% bottom side.padding-fourteen-half-bottom
- Padding of 14.5% bottom side.padding-fifteen-bottom
- Padding of 15% bottom side.padding-fifteen-half-bottom
- Padding of 15.5% bottom side.padding-sixteen-bottom
- Padding of 16% bottom side.padding-sixteen-half-bottom
- Padding of 16.5% bottom side.padding-seventeen-bottom
- Padding of 17% bottom side.padding-seventeen-half-bottom
- Padding of 17.5% bottom side.padding-eighteen-bottom
- Padding of 18% bottom side.padding-eighteen-half-bottom
- Padding of 18.5% bottom side.padding-nineteen-bottom
- Padding of 19% bottom side.padding-nineteen-half-bottom
- Padding of 19.5% bottom side.padding-twenty-bottom
- Padding of 20% bottom side.padding-twenty-half-bottom
- Padding of 20.5% bottom side.padding-twenty-one-bottom
- Padding of 21% bottom side.padding-twenty-one-half-bottom
- Padding of 21.5% bottom side.padding-twenty-two-bottom
- Padding of 22% bottom side.padding-twenty-two-half-bottom
- Padding of 22.5% bottom side.padding-twenty-three-bottom
- Padding of 23% bottom side.padding-twenty-three-half-bottom
- Padding of 23.5% bottom side.padding-twenty-four-bottom
- Padding of 24% bottom side.padding-twenty-four-half-bottom
- Padding of 24.5% bottom side.padding-twenty-five-bottom
- Padding of 25% bottom side.padding-5px-bottom
- Padding of 5px bottom side.padding-10px-bottom
- Padding of 10px bottom side.padding-15px-bottom
- Padding of 15px bottom side.padding-20px-bottom
- Padding of 20px bottom side.padding-25px-bottom
- Padding of 25px bottom side.padding-30px-bottom
- Padding of 30px bottom side.padding-35px-bottom
- Padding of 35px bottom side.padding-40px-bottom
- Padding of 40px bottom side.padding-45px-bottom
- Padding of 45px bottom side.padding-50px-bottom
- Padding of 50px bottom side.padding-55px-bottom
- Padding of 55px bottom side.padding-60px-bottom
- Padding of 60px bottom side.padding-65px-bottom
- Padding of 65px bottom side.padding-70px-bottom
- Padding of 70px bottom side.padding-75px-bottom
- Padding of 75px bottom side.padding-80px-bottom
- Padding of 80px bottom side.padding-85px-bottom
- Padding of 85px bottom side.padding-90px-bottom
- Padding of 90px bottom side.padding-95px-bottom
- Padding of 95px bottom side.padding-100px-bottom
- Padding of 100px bottom side
Padding Right Side
.padding-half-right
- Padding of 0.5% right side.padding-one-right
- Padding of 1% right side.padding-one-half-right
- Padding of 1.5% right side.padding-two-right
- Padding of 2% right side.padding-two-half-right
- Padding of 2.5% right side.padding-three-right
- Padding of 3% right side.padding-three-half-right
- Padding of 3.5% right side.padding-four-right
- Padding of 4% right side.padding-four-half-right
- Padding of 4.5% right side.padding-five-right
- Padding of 5% right side.padding-five-half-right
- Padding of 5.5% right side.padding-six-right
- Padding of 6% right side.padding-six-half-right
- Padding of 6.5% right side.padding-seven-right
- Padding of 7% right side.padding-seven-half-right
- Padding of 7.5% right side.padding-eight-right
- Padding of 8% right side.padding-eight-half-right
- Padding of 8.5% right side.padding-nine-right
- Padding of 9% right side.padding-nine-half-right
- Padding of 9.5% right side.padding-ten-right
- Padding of 10% right side.padding-ten-half-right
- Padding of 10.5% right side.padding-eleven-right
- Padding of 11% right side.padding-eleven-half-right
- Padding of 11.5% right side.padding-twelve-right
- Padding of 12% right side.padding-twelve-half-right
- Padding of 12.5% right side.padding-thirteen-right
- Padding of 13% right side.padding-thirteen-half-right
- Padding of 13.5% right side.padding-fourteen-right
- Padding of 14% right side.padding-fourteen-half-right
- Padding of 14.5% right side.padding-fifteen-right
- Padding of 15% right side.padding-fifteen-half-right
- Padding of 15.5% right side.padding-sixteen-right
- Padding of 16% right side.padding-sixteen-half-right
- Padding of 16.5% right side.padding-seventeen-right
- Padding of 17% right side.padding-seventeen-half-right
- Padding of 17.5% right side.padding-eighteen-right
- Padding of 18% right side.padding-eighteen-half-right
- Padding of 18.5% right side.padding-nineteen-right
- Padding of 19% right side.padding-nineteen-half-right
- Padding of 19.5% right side.padding-twenty-right
- Padding of 20% right side.padding-twenty-half-right
- Padding of 20.5% right side.padding-twenty-one-right
- Padding of 21% right side.padding-twenty-one-half-right
- Padding of 21.5% right side.padding-twenty-two-right
- Padding of 22% right side.padding-twenty-two-half-right
- Padding of 22.5% right side.padding-twenty-three-right
- Padding of 23% right side.padding-twenty-three-half-right
- Padding of 23.5% right side.padding-twenty-four-right
- Padding of 24% right side.padding-twenty-four-half-right
- Padding of 24.5% right side.padding-twenty-five-right
- Padding of 25% right side.padding-5px-right
- Padding of 5px right side.padding-10px-right
- Padding of 10px right side.padding-15px-right
- Padding of 15px right side.padding-20px-right
- Padding of 20px right side.padding-25px-right
- Padding of 25px right side.padding-30px-right
- Padding of 30px right side.padding-35px-right
- Padding of 35px right side.padding-40px-right
- Padding of 40px right side.padding-45px-right
- Padding of 45px right side.padding-50px-right
- Padding of 50px right side.padding-55px-right
- Padding of 55px right side.padding-60px-right
- Padding of 60px right side.padding-65px-right
- Padding of 65px right side.padding-70px-right
- Padding of 70px right side.padding-75px-right
- Padding of 75px right side.padding-80px-right
- Padding of 80px right side.padding-85px-right
- Padding of 85px right side.padding-90px-right
- Padding of 90px right side.padding-95px-right
- Padding of 95px right side.padding-100px-right
- Padding of 100px right side
Padding Left Side
.padding-half-left
- Padding of 0.5% left side.padding-one-left
- Padding of 1% left side.padding-one-half-left
- Padding of 1.5% left side.padding-two-left
- Padding of 2% left side.padding-two-half-left
- Padding of 2.5% left side.padding-three-left
- Padding of 3% left side.padding-three-half-left
- Padding of 3.5% left side.padding-four-left
- Padding of 4% left side.padding-four-half-left
- Padding of 4.5% left side.padding-five-left
- Padding of 5% left side.padding-five-half-left
- Padding of 5.5% left side.padding-six-left
- Padding of 6% left side.padding-six-half-left
- Padding of 6.5% left side.padding-seven-left
- Padding of 7% left side.padding-seven-half-left
- Padding of 7.5% left side.padding-eight-left
- Padding of 8% left side.padding-eight-half-left
- Padding of 8.5% left side.padding-nine-left
- Padding of 9% left side.padding-nine-half-left
- Padding of 9.5% left side.padding-ten-left
- Padding of 10% left side.padding-ten-half-left
- Padding of 10.5% left side.padding-eleven-left
- Padding of 11% left side.padding-eleven-half-left
- Padding of 11.5% left side.padding-twelve-left
- Padding of 12% left side.padding-twelve-half-left
- Padding of 12.5% left side.padding-thirteen-left
- Padding of 13% left side.padding-thirteen-half-left
- Padding of 13.5% left side.padding-fourteen-left
- Padding of 14% left side.padding-fourteen-half-left
- Padding of 14.5% left side.padding-fifteen-left
- Padding of 15% left side.padding-fifteen-half-left
- Padding of 15.5% left side.padding-sixteen-left
- Padding of 16% left side.padding-sixteen-half-left
- Padding of 16.5% left side.padding-seventeen-left
- Padding of 17% left side.padding-seventeen-half-left
- Padding of 17.5% left side.padding-eighteen-left
- Padding of 18% left side.padding-eighteen-half-left
- Padding of 18.5% left side.padding-nineteen-left
- Padding of 19% left side.padding-nineteen-half-left
- Padding of 19.5% left side.padding-twenty-left
- Padding of 20% left side.padding-twenty-half-left
- Padding of 20.5% left side.padding-twenty-one-left
- Padding of 21% left side.padding-twenty-one-half-left
- Padding of 21.5% left side.padding-twenty-two-left
- Padding of 22% left side.padding-twenty-two-half-left
- Padding of 22.5% left side.padding-twenty-three-left
- Padding of 23% left side.padding-twenty-three-half-left
- Padding of 23.5% left side.padding-twenty-four-left
- Padding of 24% left side.padding-twenty-four-half-left
- Padding of 24.5% left side.padding-twenty-five-left
- Padding of 25% left side.padding-5px-left
- Padding of 5px left side.padding-10px-left
- Padding of 10px left side.padding-15px-left
- Padding of 15px left side.padding-20px-left
- Padding of 20px left side.padding-25px-left
- Padding of 25px left side.padding-30px-left
- Padding of 30px left side.padding-35px-left
- Padding of 35px left side.padding-40px-left
- Padding of 40px left side.padding-45px-left
- Padding of 45px left side.padding-50px-left
- Padding of 50px left side.padding-55px-left
- Padding of 55px left side.padding-60px-left
- Padding of 60px left side.padding-65px-left
- Padding of 65px left side.padding-70px-left
- Padding of 70px left side.padding-75px-left
- Padding of 75px left side.padding-80px-left
- Padding of 80px left side.padding-85px-left
- Padding of 85px left side.padding-90px-left
- Padding of 90px left side.padding-95px-left
- Padding of 95px left side.padding-100px-left
- Padding of 100px left side
Padding Left & Right Side
.padding-half-lr
- Padding of 0.5% left and right side.padding-one-lr
- Padding of 1% left and right side.padding-one-half-lr
- Padding of 1.5% left and right side.padding-two-lr
- Padding of 2% left and right side.padding-two-half-lr
- Padding of 2.5% left and right side.padding-three-lr
- Padding of 3% left and right side.padding-three-half-lr
- Padding of 3.5% left and right side.padding-four-lr
- Padding of 4% left and right side.padding-four-half-lr
- Padding of 4.5% left and right side.padding-five-lr
- Padding of 5% left and right side.padding-five-half-lr
- Padding of 5.5% left and right side.padding-six-lr
- Padding of 6% left and right side.padding-six-half-lr
- Padding of 6.5% left and right side.padding-seven-lr
- Padding of 7% left and right side.padding-seven-half-lr
- Padding of 7.5% left and right side.padding-eight-lr
- Padding of 8% left and right side.padding-eight-half-lr
- Padding of 8.5% left and right side.padding-nine-lr
- Padding of 9% left and right side.padding-nine-half-lr
- Padding of 9.5% left and right side.padding-ten-lr
- Padding of 10% left and right side.padding-ten-half-lr
- Padding of 10.5% left and right side.padding-eleven-lr
- Padding of 11% left and right side.padding-eleven-half-lr
- Padding of 11.5% left and right side.padding-twelve-lr
- Padding of 12% left and right side.padding-twelve-half-lr
- Padding of 12.5% left and right side.padding-thirteen-lr
- Padding of 13% left and right side.padding-thirteen-half-lr
- Padding of 13.5% left and right side.padding-fourteen-lr
- Padding of 14% left and right side.padding-fourteen-half-lr
- Padding of 14.5% left and right side.padding-fifteen-lr
- Padding of 15% left and right side.padding-fifteen-half-lr
- Padding of 15.5% left and right side.padding-sixteen-lr
- Padding of 16% left and right side.padding-sixteen-half-lr
- Padding of 16.5% left and right side.padding-seventeen-lr
- Padding of 17% left and right side.padding-seventeen-half-lr
- Padding of 17.5% left and right side.padding-eighteen-lr
- Padding of 18% left and right side.padding-eighteen-half-lr
- Padding of 18.5% left and right side.padding-nineteen-lr
- Padding of 19% left and right side.padding-nineteen-half-lr
- Padding of 19.5% left and right side.padding-twenty-lr
- Padding of 20% left and right side.padding-twenty-half-lr
- Padding of 20.5% left and right side.padding-twenty-one-lr
- Padding of 21% left and right side.padding-twenty-one-half-lr
- Padding of 21.5% left and right side.padding-twenty-two-lr
- Padding of 22% left and right side.padding-twenty-two-half-lr
- Padding of 22.5% left and right side.padding-twenty-three-lr
- Padding of 23% left and right side.padding-twenty-three-half-lr
- Padding of 23.5% left and right side.padding-twenty-four-lr
- Padding of 24% left and right side.padding-twenty-four-half-lr
- Padding of 24.5% left and right side.padding-twenty-five-lr
- Padding of 25% left and right side.padding-5px-lr
- Padding of 5px left and right side.padding-10px-lr
- Padding of 10px left and right side.padding-15px-lr
- Padding of 15px left and right side.padding-20px-lr
- Padding of 20px left and right side.padding-25px-lr
- Padding of 25px left and right side.padding-30px-lr
- Padding of 30px left and right side.padding-35px-lr
- Padding of 35px left and right side.padding-40px-lr
- Padding of 40px left and right side.padding-45px-lr
- Padding of 45px left and right side.padding-50px-lr
- Padding of 50px left and right side.padding-55px-lr
- Padding of 55px left and right side.padding-60px-lr
- Padding of 60px left and right side.padding-65px-lr
- Padding of 65px left and right side.padding-70px-lr
- Padding of 70px left and right side.padding-75px-lr
- Padding of 75px left and right side.padding-80px-lr
- Padding of 80px left and right side.padding-85px-lr
- Padding of 85px left and right side.padding-90px-lr
- Padding of 90px left and right side.padding-95px-lr
- Padding of 95px left and right side.padding-100px-lr
- Padding of 100px left and right side
Padding Top & bottom Side
.padding-half-tb
- Padding of 0.5% top and bottom side.padding-one-tb
- Padding of 1% top and bottom side.padding-one-half-tb
- Padding of 1.5% top and bottom side.padding-two-tb
- Padding of 2% top and bottom side.padding-two-half-tb
- Padding of 2.5% top and bottom side.padding-three-tb
- Padding of 3% top and bottom side.padding-three-half-tb
- Padding of 3.5% top and bottom side.padding-four-tb
- Padding of 4% top and bottom side.padding-four-half-tb
- Padding of 4.5% top and bottom side.padding-five-tb
- Padding of 5% top and bottom side.padding-five-half-tb
- Padding of 5.5% top and bottom side.padding-six-tb
- Padding of 6% top and bottom side.padding-six-half-tb
- Padding of 6.5% top and bottom side.padding-seven-tb
- Padding of 7% top and bottom side.padding-seven-half-tb
- Padding of 7.5% top and bottom side.padding-eight-tb
- Padding of 8% top and bottom side.padding-eight-half-tb
- Padding of 8.5% top and bottom side.padding-nine-tb
- Padding of 9% top and bottom side.padding-nine-half-tb
- Padding of 9.5% top and bottom side.padding-ten-tb
- Padding of 10% top and bottom side.padding-ten-half-tb
- Padding of 10.5% top and bottom side.padding-eleven-tb
- Padding of 11% top and bottom side.padding-eleven-half-tb
- Padding of 11.5% top and bottom side.padding-twelve-tb
- Padding of 12% top and bottom side.padding-twelve-half-tb
- Padding of 12.5% top and bottom side.padding-thirteen-tb
- Padding of 13% top and bottom side.padding-thirteen-half-tb
- Padding of 13.5% top and bottom side.padding-fourteen-tb
- Padding of 14% top and bottom side.padding-fourteen-half-tb
- Padding of 14.5% top and bottom side.padding-fifteen-tb
- Padding of 15% top and bottom side.padding-fifteen-half-tb
- Padding of 15.5% top and bottom side.padding-sixteen-tb
- Padding of 16% top and bottom side.padding-sixteen-half-tb
- Padding of 16.5% top and bottom side.padding-seventeen-tb
- Padding of 17% top and bottom side.padding-seventeen-half-tb
- Padding of 17.5% top and bottom side.padding-eighteen-tb
- Padding of 18% top and bottom side.padding-eighteen-half-tb
- Padding of 18.5% top and bottom side.padding-nineteen-tb
- Padding of 19% top and bottom side.padding-nineteen-half-tb
- Padding of 19.5% top and bottom side.padding-twenty-tb
- Padding of 20% top and bottom side.padding-twenty-half-tb
- Padding of 20.5% top and bottom side.padding-twenty-one-tb
- Padding of 21% top and bottom side.padding-twenty-one-half-tb
- Padding of 21.5% top and bottom side.padding-twenty-two-tb
- Padding of 22% top and bottom side.padding-twenty-two-half-tb
- Padding of 22.5% top and bottom side.padding-twenty-three-tb
- Padding of 23% top and bottom side.padding-twenty-three-half-tb
- Padding of 23.5% top and bottom side.padding-twenty-four-tb
- Padding of 24% top and bottom side.padding-twenty-four-half-tb
- Padding of 24.5% top and bottom side.padding-twenty-five-tb
- Padding of 25% top and bottom side.padding-5px-tb
- Padding of 5px top and bottom side.padding-10px-tb
- Padding of 10px top and bottom side.padding-15px-tb
- Padding of 15px top and bottom side.padding-20px-tb
- Padding of 20px top and bottom side.padding-25px-tb
- Padding of 25px top and bottom side.padding-30px-tb
- Padding of 30px top and bottom side.padding-35px-tb
- Padding of 35px top and bottom side.padding-40px-tb
- Padding of 40px top and bottom side.padding-45px-tb
- Padding of 45px top and bottom side.padding-50px-tb
- Padding of 50px top and bottom side.padding-55px-tb
- Padding of 55px top and bottom side.padding-60px-tb
- Padding of 60px top and bottom side.padding-65px-tb
- Padding of 65px top and bottom side.padding-70px-tb
- Padding of 70px top and bottom side.padding-75px-tb
- Padding of 75px top and bottom side.padding-80px-tb
- Padding of 80px top and bottom side.padding-85px-tb
- Padding of 85px top and bottom side.padding-90px-tb
- Padding of 90px top and bottom side.padding-95px-tb
- Padding of 95px top and bottom side.padding-100px-tb
- Padding of 100px top and bottom side
.no-padding
- Remove padding from all sides.no-padding-lr
- Remove padding from left and right sides.no-padding-tb
- Remove padding from top and bottom sides.no-padding-top
- Remove padding from top side.no-padding-bottom
- Remove padding from bottom side.no-padding-right
- Remove padding from right side.no-padding-left
- Remove padding from left side
Float
.float-start
- Float DIV to left.float-end
- Float DIV to right.float-none
- No float
Display
.d-block
- For display block.d-inline-block
- For display inline-block.d-inline
- For display inline.d-none
- For display none.d-table
- For display table.d-table-cell
- For display table-cell.d-flex
- For display flex.d-initial
- For display initial.overflow-hidden
- For overflow hidden.overflow-visible
- For overflow visible.overflow-auto
- For overflow auto
Position
.position-inherit
- For element position inherit.position-relative
- For element position relative.position-absolute
- For element position absolute.position-fixed
- For element position fixed
Width
.w-1px
- For width of 1px on DIV/Text.w-2px
- For width of 2px on DIV/Text.w-3px
- For width of 3px on DIV/Text.w-4px
- For width of 4px on DIV/Text.w-5px
- For width of 5px on DIV/Text.w-6px
- For width of 6px on DIV/Text.w-7px
- For width of 7px on DIV/Text.w-8px
- For width of 8px on DIV/Text.w-9px
- For width of 9px on DIV/Text.w-10px
- For width of 10px on DIV/Text.w-15px
- For width of 15px on DIV/Text.w-20px
- For width of 20px on DIV/Text.w-25px
- For width of 25px on DIV/Text.w-30px
- For width of 30px on DIV/Text.w-35px
- For width of 35px on DIV/Text.w-40px
- For width of 40px on DIV/Text.w-45px
- For width of 45px on DIV/Text.w-50px
- For width of 50px on DIV/Text.w-55px
- For width of 55px on DIV/Text.w-60px
- For width of 60px on DIV/Text.w-65px
- For width of 65px on DIV/Text.w-70px
- For width of 70px on DIV/Text.w-75px
- For width of 75px on DIV/Text.w-80px
- For width of 80px on DIV/Text.w-85px
- For width of 85px on DIV/Text.w-90px
- For width of 90px on DIV/Text.w-95px
- For width of 95px on DIV/Text.w-100px
- For width of 100px on DIV/Text.w-110px
- For width of 110px on DIV/Text.w-120px
- For width of 120px on DIV/Text.w-130px
- For width of 130px on DIV/Text.w-140px
- For width of 140px on DIV/Text.w-150px
- For width of 150px on DIV/Text.w-160px
- For width of 160px on DIV/Text.w-170px
- For width of 170px on DIV/Text.w-180px
- For width of 180px on DIV/Text.w-190px
- For width of 190px on DIV/Text.w-200px
- For width of 200px on DIV/Text.w-250px
- For width of 250px on DIV/Text.w-300px
- For width of 300px on DIV/Text.w-350px
- For width of 350px on DIV/Text.w-400px
- For width of 400px on DIV/Text.w-450px
- For width of 450px on DIV/Text.w-500px
- For width of 500px on DIV/Text.w-550px
- For width of 550px on DIV/Text.w-600px
- For width of 600px on DIV/Text.w-650px
- For width of 650px on DIV/Text.w-700px
- For width of 700px on DIV/Text.w-750px
- For width of 750px on DIV/Text.w-800px
- For width of 800px on DIV/Text.w-850px
- For width of 850px on DIV/Text.w-900px
- For width of 900px on DIV/Text.w-950px
- For width of 950px on DIV/Text.w-1000px
- For width of 1000px on DIV/Text.w-10
- For width of 10% on DIV/Text.w-15
- For width of 15% on DIV/Text.w-20
- For width of 20% on DIV/Text.w-25
- For width of 25% on DIV/Text.w-30
- For width of 30% on DIV/Text.w-35
- For width of 35% on DIV/Text.w-40
- For width of 40% on DIV/Text.w-45
- For width of 45% on DIV/Text.w-50
- For width of 50% on DIV/Text.w-55
- For width of 55% on DIV/Text.w-57
- For width of 57% on DIV/Text.w-60
- For width of 60% on DIV/Text.w-65
- For width of 65% on DIV/Text.w-70
- For width of 70% on DIV/Text.w-75
- For width of 75% on DIV/Text.w-80
- For width of 80% on DIV/Text.w-85
- For width of 85% on DIV/Text.w-90
- For width of 90% on DIV/Text.w-95
- For width of 95% on DIV/Text.w-100
- For width of 100% on DIV/Text.w-auto
- For width of auto on DIV/Text
Height
.h-1px
- For height of 1px on DIV.h-2px
- For height of 2px on DIV.h-3px
- For height of 3px on DIV.h-4px
- For height of 4px on DIV.h-5px
- For height of 5px on DIV.h-6px
- For height of 6px on DIV.h-7px
- For height of 7px on DIV.h-8px
- For height of 8px on DIV.h-9px
- For height of 9px on DIV.h-10px
- For height of 10px on DIV.h-15px
- For height of 15px on DIV.h-20px
- For height of 20px on DIV.h-25px
- For height of 25px on DIV.h-30px
- For height of 30px on DIV.h-35px
- For height of 35px on DIV.h-40px
- For height of 40px on DIV.h-42px
- For height of 42px on DIV.h-45px
- For height of 45px on DIV.h-50px
- For height of 50px on DIV.h-55px
- For height of 55px on DIV.h-60px
- For height of 60px on DIV.h-65px
- For height of 65px on DIV.h-70px
- For height of 70px on DIV.h-75px
- For height of 75px on DIV.h-80px
- For height of 80px on DIV.h-85px
- For height of 85px on DIV.h-90px
- For height of 90px on DIV.h-95px
- For height of 95px on DIV.h-100px
- For height of 100px on DIV.h-110px
- For height of 110px on DIV.h-120px
- For height of 120px on DIV.h-130px
- For height of 130px on DIV.h-140px
- For height of 140px on DIV.h-150px
- For height of 150px on DIV.h-160px
- For height of 160px on DIV.h-170px
- For height of 170px on DIV.h-180px
- For height of 180px on DIV.h-190px
- For height of 190px on DIV.h-200px
- For height of 200px on DIV.h-250px
- For height of 250px on DIV.h-300px
- For height of 300px on DIV.h-350px
- For height of 350px on DIV.h-400px
- For height of 400px on DIV.h-450px
- For height of 450px on DIV.h-480px
- For height of 480px on DIV.h-500px
- For height of 500px on DIV.h-520px
- For height of 520px on DIV.h-550px
- For height of 550px on DIV.h-580px
- For height of 580px on DIV.h-600px
- For height of 600px on DIV.h-650px
- For height of 650px on DIV.h-700px
- For height of 700px on DIV.h-720px
- For height of 720px on DIV.h-750px
- For height of 750px on DIV.h-800px
- For height of 800px on DIV.h-820px
- For height of 820px on DIV.h-830px
- For height of 830px on DIV.h-850px
- For height of 850px on DIV.h-50
- For height of 50% on DIV.h-100
- For height of 100% on DIV.h-auto
- For height of auto on DIV.max-h-100
- For maximum height of 100% on DIV.max-h-inherit
- For maximum height of inherit on DIV.min-h-100px
- For minimum height of 100px on DIV.min-h-200px
- For minimum height of 200px on DIV.min-h-300px
- For minimum height of 300px on DIV.min-h-400px
- For minimum height of 400px on DIV.min-h-500px
- For minimum height of 500px on DIV.min-h-600px
- For minimum height of 600px on DIV.min-h-700px
- For minimum height of 700px on DIV.min-h-100vh
- For minimum height of 100vh on DIV
Screen Height
.full-screen
- For height full screen on DIV.extra-small-screen
- For height as extra small screen on DIV.small-screen
- For height as small screen on DIV.one-second-screen
- For height one half of screen on DIV.one-third-screen
- For height one third of screen on DIV.one-fourth-screen
- For height one fourth screen on DIV.one-fifth-screen
- For height one fifth screen on DIV.one-sixth-screen
- For height one sixth screen on DIV
Border Width
.border-width-1
- For border width of 1px.border-width-2
- For border width of 2px.border-width-3
- For border width of 3px.border-width-4
- For border width of 4px.border-width-5
- For border width of 5px.border-width-6
- For border width of 6px.border-width-7
- For border width of 7px.border-width-8
- For border width of 8px.border-width-9
- For border width of 9px.border-width-10
- For border width of 10px.border-width-20
- For border width of 1p20
Border Align
.border-top
- set border on top side of the block.border-bottom
- set border on bottom side of the block.border-left
- set border on left side of the block.border-righ
- set border on right side of the block.border-lr
- set border on left and right sides of the block.border-tb
- set border on top and bottom sides of the block
Border Color
.border-color-white
- set white border color.border-color-black
- set white border color.border-color-extra-dark-gray
- set extra dark gray border color.border-color-medium-dark-gray
- set medium dark border color.border-color-dark-gray
- set dark gray border color.border-color-extra-medium-gray
- set extra medium gray border color.border-color-medium-gray
- set medium gray border color.border-color-extra-light-gray
- set extra light gray border color.border-color-light-gray
- set light gray border color.border-color-light-pink
- set light pink border color.border-color-deep-pink
- set deep pink border color.border-color-transparent-pink
- set transparent pink border color
Border Style
.border-dotted
- set dotted border style.border-dashed
- set dashed border style.border-solid
- set solid border style.border-double
- set double border style.border-groove
- set groove border style.border-ridge
- set ridge border style.border-inset
- set inset border style.border-outset
- set outset border style.border-none
- set none border style.border-hidden
- set hidden border style.no-border-top
- remove border from top.no-border-bottom
- remove border from bottom.no-border-right
- remove border from right.no-border-left
- remove border from left
Border Radius
.border-radius-1
- set 1px of border radius.border-radius-2
- set 2px of border radius.border-radius-3
- set 3px of border radius.border-radius-4
- set 4px of border radius.border-radius-5
- set 5px of border radius.border-radius-6
- set 6px of border radius.border-radius-7
- set 7px of border radius.border-radius-8
- set 8px of border radius.border-radius-9
- set 9px of border radius.border-radius-10
- set 10px of border radius.border-radius-50
- set 50% of border radius.border-radius-100
- set 100% of border radius.border-radius-none
- remove border radius
Useful Tips
In Pofo you can add link/button which direct you to other section of the same page with smooth scroll effect like it is one page website. You just need to add class: inner-link
and href should be the ID of the section as per the example shown below:
<a href="#home" class="inner-link">Home</a>
NotePlease note that destination section should have valid ID.
Slider Types & Options
Pofo includes 2 types of sliders as mentioned below:
Swiper Slider - Full Screen
<section class="p-0 main-slider wow animate__fadeIn"> <div class="swiper full-screen md-landscape-h-580px sm-h-500px white-move" data-slider-options='{ "loop": true, "slidesPerView": "1", "allowTouchMove":true, "autoplay": { "delay": 5000, "disableOnInteraction": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "navigation": { "nextEl": ".swiper-button-next", "prevEl": ".swiper-button-prev" }, "pagination": { "el": ".swiper-pagination-01", "clickable": true } }'> <div class="swiper-wrapper"> <!-- start slider section --> <div class="swiper-slide cover-background" style="background-image:url('image path');"> <div class="opacity-extra-medium bg-black"></div> <div class="container position-relative h-100"> <div class="row h-100"> <div class="col-12 d-flex flex-column justify-content-center text-center"> <h6 class="text-very-light-gray padding-ten-lr font-weight-300 margin-two-bottom md-margin-four-bottom sm-margin-15px-bottom">we combine design, thinking and technical craft</h6> <div class="alt-font text-white-2 text-uppercase font-weight-700 letter-spacing-minus-3 title-extra-large margin-two-bottom w-70 mx-auto lg-w-80 md-margin-four-bottom sm-w-90 sm-margin-25px-bottom sm-letter-spacing-0">creative thinker</div> <div class="btn-dual"> <a href="about-us-modern.html" class="btn btn-transparent-white btn-small sm-margin-two-all">About Company</a> <a href="https://1.envato.market/g7jrr" target="_blank" class="btn btn-transparent-white btn-small sm-margin-two-all">Purchase Now</a> </div> </div> </div> </div> </div> <!-- end slider section --> <!-- start slider section --> <div class="swiper-slide cover-background" style="background-image:url('image path');"> <div class="opacity-extra-medium bg-black"></div> <div class="container position-relative h-100"> <div class="row h-100"> <div class="col-12 d-flex flex-column justify-content-center text-center"> <h6 class="text-very-light-gray padding-ten-lr font-weight-300 margin-two-bottom md-margin-four-bottom sm-margin-15px-bottom">we're a design studio that believe in the ideas</h6> <div class="alt-font text-white-2 text-uppercase font-weight-700 letter-spacing-minus-3 title-extra-large margin-two-bottom w-70 mx-auto lg-w-80 md-margin-four-bottom sm-w-90 sm-margin-25px-bottom sm-letter-spacing-0">empower elevate</div> <div class="btn-dual"> <a href="about-us-modern.html" class="btn btn-transparent-white btn-small sm-margin-two-all">About Company</a> <a href="https://1.envato.market/g7jrr" target="_blank" class="btn btn-transparent-white btn-small sm-margin-two-all">Purchase Now</a> </div> </div> </div> </div> </div> <!-- end slider section --> </div> <!-- start slider pagination --> <div class="swiper-pagination swiper-pagination-01 swiper-pagination-square swiper-pagination-white"></div> <!--<div class="swiper-button-next light"><i class="ti-angle-right"></i></div> <div class="swiper-button-prev light"><i class="ti-angle-left"></i></div>--> <!-- end slider pagination --> </div> </section>
Swiper Slider - Half Screen
<!-- start slider section --> <section class="wow animate__fadeIn p-0 main-slider mobile-height top-space"> <div class="swiper-full-screen swiper w-100 white-move" data-slider-options='{ "loop": true, "slidesPerView": "1", "allowTouchMove":true, "autoplay": { "delay": 5000, "disableOnInteraction": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "navigation": { "nextEl": ".swiper-button-next", "prevEl": ".swiper-button-prev" }, "pagination": { "el": ".swiper-pagination", "clickable": true } }'> <div class="swiper-wrapper"> <!-- start slider item --> <div class="swiper-slide cover-background" style="background-image:url('image path');"> <div class="opacity-extra-medium bg-extra-dark-gray"></div> <div class="container position-relative one-fourth-screen sm-h-400px"> <div class="row h-100"> <div class="col-12 d-flex flex-column justify-content-center text-center"> <span class="text-large text-very-light-gray font-weight-300 w-95 mx-auto margin-25px-bottom d-block sm-margin-15px-bottom">we combine design, thinking and technical craft</span> <h1 class="alt-font text-uppercase text-white-2 font-weight-700 w-75 sm-w-95 mx-auto margin-35px-bottom sm-margin-15px-bottom">Crafting Digital Experiences</h1> <div class="btn-dual"><a href="https://1.envato.market/g7jrr" target="_blank" class="btn btn-white btn-rounded btn-medium sm-margin-two-all">Purchase Now</a></div> </div> </div> </div> </div> <!-- end slider item --> <!-- start slider item --> <div class="swiper-slide cover-background" style="background-image:url('image path');"> <div class="opacity-extra-medium bg-extra-dark-gray"></div> <div class="container position-relative one-fourth-screen sm-h-400px"> <div class="row h-100"> <div class="col-12 d-flex flex-column justify-content-center text-center"> <span class="text-large text-very-light-gray font-weight-300 w-95 mx-auto margin-25px-bottom d-block sm-margin-15px-bottom">We're a design studio that believe in the ideas</span> <h1 class="alt-font text-uppercase text-white-2 font-weight-700 w-75 sm-w-95 mx-auto margin-35px-bottom sm-margin-15px-bottom">Highly Creative Solutions</h1> <div class="btn-dual"><a href="https://1.envato.market/g7jrr" target="_blank" class="btn btn-white btn-rounded btn-medium sm-margin-two-all">Purchase Now</a></div> </div> </div> </div> </div> <!-- end slider item --> </div> <!-- start slider pagination --> <div class="swiper-pagination swiper-pagination-white"></div> <!--<div class="swiper-button-next light"><i class="ti-angle-right"></i></div> <div class="swiper-button-prev light"><i class="ti-angle-left"></i></div>--> <!-- end slider pagination --> </div> </section> <!-- end slider section -->
Revolution Slider
<!-- start slider pagination --> <section class="wow animate__fadeIn example no-padding no-transition"> <article class="content"> <div id="rev_slider_1078_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container" data-alias="classic4export" data-source="gallery" style="margin:0px auto;background-color:transparent;padding:0px;margin-top:0px;margin-bottom:0px;"> <!-- start revolution slider 5.4.1 fullwidth mode --> <div id="rev_slider_1078_1" class="rev_slider fullwidthabanner" style="display:none;" data-version="5.4.1"> <ul> <!-- slide --> <li data-index="rs-3045" data-transition="fade" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="Power4.easeInOut" data-easeout="Power4.easeInOut" data-masterspeed="200" data-thumb="images path" data-rotate="0" data-fstransition="fade" data-fsmasterspeed="100" data-fsslotamount="0" data-saveperformance="off" data-title="" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description=""> <div class="opacity-extra-medium bg-black position-relative z-index-1"></div> <!-- main image --> <img src="image path" alt="Ocean" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="1" class="rev-slidebg"> <!-- layer nr. 3 --> <div class="tp-caption NotGeneric-Title tp-resizeme" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['-115','-110','-90','-90']" data-fontsize="['12','12','12','12']" data-lineheight="['20','20','20','20']" data-width="none" data-height="none" data-whitespace="nowrap" data-type="text" data-responsive_offset="on" data-frames='[{"from":"y:50px;opacity:0;","speed":1000,"to":"o:1;","delay":300,"ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[175%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"},{"frame":"hover","speed":"300","ease":"Power1.easeInOut","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgba(255, 255, 255, 1.00);bc:rgba(255, 255, 255, 1.00);bw:2px 2px 2px 2px;"}]' data-textAlign="['center','center','center','center']" data-paddingtop="[10,10,10,10]" data-paddingright="[0,0,0,0]" data-paddingbottom="[10,10,10,10]" data-paddingleft="[0,0,0,0]" style="z-index: 7; white-space: nowrap; text-transform: uppercase; font-family:'Montserrat', sans-serif !important; font-weight: 500; letter-spacing:2px;">we work hard, we play hard</div> <!-- layer nr. 4 --> <div class="tp-caption NotGeneric-SubTitle tp-resizeme " data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']" data-fontsize="['70','70','60','50']" data-lineheight="['75','75','60','60']" data-width="none" data-height="none" data-whitespace="nowrap" data-type="text" data-responsive_offset="on" data-frames='[{"from":"y:50px;opacity:0;","speed":1000,"to":"o:1;","delay":600,"ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[175%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"},{"frame":"hover","speed":"300","ease":"Power1.easeInOut","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgba(255, 255, 255, 1.00);bc:rgba(255, 255, 255, 1.00);bw:2px 2px 2px 2px;"}]' data-textAlign="['center','center','center','center']" data-paddingtop="[10,10,10,10]" data-paddingright="[0,0,0,0]" data-paddingbottom="[10,10,10,10]" data-paddingleft="[0,0,0,0]" style="z-index: 8; white-space: nowrap; font-family:'Montserrat', sans-serif !important; font-weight: 600; letter-spacing: -1px;">A print & digital<br>creative studio</div> <!-- layer nr. 5 --> <a href="portfolio-full-width-grid-overlay.html" class="tp-caption btn btn-transparent-white btn-medium border-radius-4 z-index-5" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['130','130','110','110']" data-fontsize="['12','14','14','14']" data-whitespace="nowrap" data-visibility="['on', 'on', 'on', 'on']" data-type="text" data-color="['#FFFFFF']" data-responsive_offset="on" data-responsive="on" data-frames='[{"from":"y:150px;opacity:0;","speed":1500,"to":"o:1;","delay":900,"ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[175%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"},{"frame":"hover","speed":"300","ease":"Power1.easeInOut","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgba(0, 0, 0, 1.00);bc:rgba(255, 255, 255, 1.00);bw:2px 2px 2px 2px;"}]' data-textAlign="['inherit', 'inherit', 'right', 'center']" data-paddingtop="[6,6,6,6]" data-paddingright="[26,26,26,26]" data-paddingbottom="[6,6,6,6]" data-paddingleft="[26,26,26,26]" data-basealign="slide">Explore Work</a> <!-- LAYER NR. 6 --> </li> <!-- slide --> <li data-index="rs-2" data-transition="fade" data-slotamount="3" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="500" data-thumb="images/classic-corporate-60x60-2.jpg" data-rotate="0" data-saveperformance="off" data-title="" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description=""> <div class="opacity-extra-medium bg-black position-relative z-index-1"></div> <!-- main image --> <img src="image path"" alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="1" class="rev-slidebg" data-no-retina> <!-- layer nr. 3 --> <div class="tp-caption NotGeneric-Title tp-resizeme" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['-115','-110','-90','-90']" data-fontsize="['12','12','12','12']" data-lineheight="['20','20','20','20']" data-width="none" data-height="none" data-whitespace="nowrap" data-visibility="['on', 'on', 'on', 'on']" data-type="text" data-color="['#FFF']" data-responsive_offset="on" data-responsive="on" data-frames='[{"from":"y:50px;opacity:0;","speed":1000,"to":"o:1;","delay":300,"ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[175%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"},{"frame":"hover","speed":"300","ease":"Power1.easeInOut","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgba(255, 255, 255, 1.00);bc:rgba(255, 255, 255, 1.00);bw:2px 2px 2px 2px;"}]' data-textAlign="['inherit', 'inherit', 'right', 'center']" data-paddingtop="[10,10,10,10]" data-paddingright="[30,30,30,30]" data-paddingbottom="[10,10,10,10]" data-paddingleft="[30,30,30,30]" data-basealign="slide" style="z-index: 7; white-space: nowrap; text-transform: uppercase; font-family:'Montserrat', sans-serif !important; font-weight: 500; letter-spacing:2px;">we work hard, we play hard</div> <!-- layer nr. 4 --> <div class="tp-caption NotGeneric-SubTitle tp-resizeme " data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']" data-fontsize="['70','70','60','50']" data-lineheight="['75','75','60','60']" data-width="none" data-height="none" data-whitespace="nowrap" data-visibility="['on', 'on', 'on', 'on']" data-type="button" data-color="['#FFF']" data-responsive_offset="on" data-responsive="on" data-frames='[{"from":"y:50px;opacity:0;","speed":1500,"to":"o:1;","delay":600,"ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[175%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"},{"frame":"hover","speed":"300","ease":"Power1.easeInOut","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgba(255, 255, 255, 1.00);bc:rgba(255, 255, 255, 1.00);bw:2px 2px 2px 2px;"}]' data-textAlign="['center', 'center', 'center', 'center']" data-paddingtop="[10,10,10,10]" data-paddingright="[30,30,30,30]" data-paddingbottom="[10,10,10,10]" data-paddingleft="[30,30,30,30]" data-basealign="slide" style="z-index: 8; white-space: nowrap; font-family:'Montserrat', sans-serif !important; font-weight: 600; letter-spacing: -1px;">We are a web<br>design agency</div> <!-- layer nr. 5 --> <a href="portfolio-full-width-grid-overlay.html" class="tp-caption btn btn-transparent-white btn-medium border-radius-4 z-index-5" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['130','130','110','110']" data-fontsize="['12','14','14','14']" data-whitespace="nowrap" data-visibility="['on', 'on', 'on', 'on']" data-type="text" data-color="['#FFFFFF']" data-responsive_offset="on" data-responsive="on" data-frames='[{"from":"y:150px;opacity:0;","speed":1500,"to":"o:1;","delay":900,"ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[175%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"},{"frame":"hover","speed":"300","ease":"Power1.easeInOut","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgba(0, 0, 0, 1.00);bc:rgba(255, 255, 255, 1.00);bw:2px 2px 2px 2px;"}]' data-textAlign="['inherit', 'inherit', 'right', 'center']" data-paddingtop="[6,6,6,6]" data-paddingright="[26,26,26,26]" data-paddingbottom="[6,6,6,6]" data-paddingleft="[26,26,26,26]" data-basealign="slide">Explore Work</a> <!-- layer nr. 6 --> </li> <!-- end slide --> <li data-index="rs-3" data-transition="fade" data-slotamount="3" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="500" data-thumb="images/classic-corporate-60x60-3.jpg" data-rotate="0" data-saveperformance="off" data-title="" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description=""> <div class="opacity-extra-medium bg-black position-relative z-index-1"></div> <!-- main image --> <img src="image path"" alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="1" class="rev-slidebg" data-no-retina> <!-- layer nr. 3 --> <div class="tp-caption NotGeneric-Title tp-resizeme" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['-115','-110','-90','-90']" data-fontsize="['12','12','12','12']" data-lineheight="['20','20','20','20']" data-width="none" data-height="none" data-whitespace="nowrap" data-visibility="['on', 'on', 'on', 'on']" data-type="text" data-color="['#FFF']" data-responsive_offset="on" data-responsive="on" data-frames='[{"from":"y:50px;opacity:0;","speed":1000,"to":"o:1;","delay":300,"ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[175%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"},{"frame":"hover","speed":"300","ease":"Power1.easeInOut","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgba(255, 255, 255, 1.00);bc:rgba(255, 255, 255, 1.00);bw:2px 2px 2px 2px;"}]' data-textAlign="['inherit', 'inherit', 'right', 'center']" data-paddingtop="[10,10,10,10]" data-paddingright="[30,30,30,30]" data-paddingbottom="[10,10,10,10]" data-paddingleft="[30,30,30,30]" data-basealign="slide" style="z-index: 7; white-space: nowrap; text-transform: uppercase; font-family:'Montserrat', sans-serif !important; font-weight: 500; letter-spacing:2px;">we work hard, we play hard</div> <!-- layer nr. 4 --> <div class="tp-caption NotGeneric-SubTitle tp-resizeme " data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']" data-fontsize="['70','70','60','50']" data-lineheight="['75','75','60','60']" data-width="none" data-height="none" data-whitespace="nowrap" data-visibility="['on', 'on', 'on', 'on']" data-type="button" data-color="['#FFF']" data-responsive_offset="on" data-responsive="on" data-frames='[{"from":"y:50px;opacity:0;","speed":1500,"to":"o:1;","delay":600,"ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[175%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"},{"frame":"hover","speed":"300","ease":"Power1.easeInOut","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgba(255, 255, 255, 1.00);bc:rgba(255, 255, 255, 1.00);bw:2px 2px 2px 2px;"}]' data-textAlign="['center', 'center', 'center', 'center']" data-paddingtop="[10,10,10,10]" data-paddingright="[30,30,30,30]" data-paddingbottom="[10,10,10,10]" data-paddingleft="[30,30,30,30]" data-basealign="slide" style="z-index: 8; white-space: nowrap; font-family:'Montserrat', sans-serif !important; font-weight: 600; letter-spacing: -1px;">We are delivering<br>beautiful products</div> <!-- layer nr. 5 --> <a href="portfolio-full-width-grid-overlay.html" class="tp-caption btn btn-transparent-white btn-medium border-radius-4 z-index-5" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['130','130','110','110']" data-fontsize="['12','14','14','14']" data-whitespace="nowrap" data-visibility="['on', 'on', 'on', 'on']" data-type="text" data-color="['#FFFFFF']" data-responsive_offset="on" data-responsive="on" data-frames='[{"from":"y:150px;opacity:0;","speed":1500,"to":"o:1;","delay":900,"ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[175%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"},{"frame":"hover","speed":"300","ease":"Power1.easeInOut","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgba(0, 0, 0, 1.00);bc:rgba(255, 255, 255, 1.00);bw:2px 2px 2px 2px;"}]' data-textAlign="['inherit', 'inherit', 'right', 'center']" data-paddingtop="[6,6,6,6]" data-paddingright="[26,26,26,26]" data-paddingbottom="[6,6,6,6]" data-paddingleft="[26,26,26,26]" data-basealign="slide">Explore Work</a> <!-- layer nr. 6 --> </li> </ul> </div> </div> <!-- start revolution slider 5.4.1 fullwidth mode --> </article> </section> <!-- end slider pagination -->
Javascript (file path - /js/main.js)
if ($("#mySlider").revolution == undefined) { revslider_showDoubleJqueryError("#mySlider"); } else { $("#mySlider").show().revolution({ sliderType: "standard", jsFileLocation: "revolution/js/", sliderLayout: "fullscreen", dottedOverlay: "none", delay: 9000, navigation: { keyboardNavigation: "on", keyboard_direction: "horizontal", mouseScrollNavigation: "off", mouseScrollReverse: "default", onHoverStop: "off", touch: { touchenabled: "on", swipe_threshold: 75, swipe_min_touches: 1, swipe_direction: "horizontal", drag_block_vertical: false } , arrows: { style: "zeus", enable: true, hide_onmobile: true, hide_under: 600, hide_onleave: true, hide_delay: 200, hide_delay_mobile: 1200, tmp: '<div class="tp-title-wrap"> <div class="tp-arr-imgholder"></div> </div>', left: { h_align: "left", v_align: "center", h_offset: 30, v_offset: 0 }, right: { h_align: "right", v_align: "center", h_offset: 30, v_offset: 0 } } , bullets: { enable: true, hide_onmobile: false, hide_under: 300, style: "hermes", hide_onleave: false, hide_delay: 200, hide_delay_mobile: 1200, direction: "horizontal", h_align: "center", v_align: "bottom", h_offset: 0, v_offset: 30, space: 8, tmp: '<span class="tp-bullet-img-wrap"> <span class="tp-bullet-image"></span></span><span class="tp-bullet-title">{{title}}</span>' } }, viewPort: { enable: true, outof: "pause", visible_area: "80%", presize: false }, responsiveLevels: [1240, 1024, 778, 480], visibilityLevels: [1240, 1024, 778, 480], gridwidth: [1240, 1024, 778, 480], gridheight: [600, 600, 500, 400], lazyType: "none", parallax: { type: "mouse", origo: "slidercenter", speed: 2000, levels: [2, 3, 4, 5, 6, 7, 12, 16, 10, 50, 46, 47, 48, 49, 50, 55] }, shadow: 0, spinner: "off", stopLoop: "off", stopAfterLoops: -1, stopAtSlide: -1, shuffle: "off", autoHeight: "off", hideThumbsOnMobile: "off", hideSliderAtLimit: 0, hideCaptionAtLimit: 0, hideAllCaptionAtLilmit: 0, debugMode: false, fallbacks: { simplifyAll: "off", nextSlideOnWindowFocus: "off", disableFocusListener: false } }); }
Read Revolution Slider Document
Slider Typography
Pofo includes 32+ sliders typography.
Helper Classes
We have created some helper classes for the Sliders. Here are a few of them:
.full-screen
- Makes the slider full screen.opacity-very-light
- For very light opacity.opacity-light
- For light opacity.opacity-extra-medium
- For extra medium opacity.opacity-medium
- For medium opacity.opacity-full
- For full opacity.opacity-full-dark
- For full dark opacity
Accordions
Extend the default collapse behavior to create an accordion with the panel component. See below image and code for more information.
<div class="panel-group accordion-event accordion-style3" id="accordion-3" data-active-icon="fa-angle-up" data-inactive-icon="fa-angle-down"> <!-- start tab content --> <div class="panel panel-default"> <div class="panel-heading"> <a class="accordion-toggle" data-bs-toggle="collapse" data-bs-parent="#accordion-3" href="#accordion-3-One"> <div class="panel-title"> <span class="alt-font font-weight-600 text-deep-pink tab-tag">01</span> <span class="text-white-2 sm-w-80 d-inline-block">Unique and bold website design</span> <i class="fa-solid fa-angle-up text-white"></i> </div> </a> </div> <div id="accordion-3-One" class="panel-collapse collapse show" data-bs-parent="#accordion-3"> <div class="panel-body">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> </div> </div> <!-- end tab content --> <!-- start tab content --> <div class="panel panel-default"> <div class="panel-heading"> <a class="accordion-toggle" data-bs-toggle="collapse" data-bs-parent="#accordion-3" href="#accordion-3-Two"> <div class="panel-title"> <span class="alt-font font-weight-600 text-deep-pink tab-tag">02</span> <span class="text-white-2 sm-w-80 d-inline-block">We're ready to start now</span> <i class="fa-solid fa-angle-down text-white"></i> </div> </a> </div> <div id="accordion-3-Two" class="panel-collapse collapse" data-bs-parent="#accordion-3"> <div class="panel-body">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> </div> </div> <!-- end tab content --> <!-- start tab content --> <div class="panel panel-default"> <div class="panel-heading"> <a class="accordion-toggle" data-bs-toggle="collapse" data-bs-parent="#accordion-3" href="#accordion-3-Three"> <div class="panel-title"> <span class="alt-font font-weight-600 text-deep-pink tab-tag">03</span> <span class="text-white-2 sm-w-80 d-inline-block">We Deliver the highest quality</span> <i class="fa-solid fa-angle-down text-white"></i> </div> </a> </div> <div id="accordion-3-Three" class="panel-collapse collapse" data-bs-parent="#accordion-3"> <div class="panel-body">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> </div> </div> <!-- end tab content --> </div>
NoteWe have many examples and shown in accordions.html page.
Animation
Scroll to reveal animations are latest in the trends. You can do them too with Pofo. You can use animations on any element you want. Here is the Sample Code:
<div class="wow animate__bounceInUp"> Content to Reveal Here </div>
You can also use delays, duration and offset for your animations:
<section class="wow animate__slideInLeft" data-wow-duration="1200ms" data-wow-delay="500ms"> ... </section>
NoteDelay duration is in milliseconds.
Here is the list of the Animation Types you can use:
bounce
flash
pulse
rubberBand
shake
swing
tada
wobble
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flip
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
Blog Post
Beautiful bog post layouts to display your content with attractive look. See below image and code for more information.
<ul class="blog-masonry blog-wrapper grid grid-loading grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col blog-post-style5 gutter-large"> <li class="grid-sizer"></li> <!-- start blog post item --> <li class="grid-item last-paragraph-no-margin wow animate__fadeInUp"> <div class="blog-post bg-white"> <div class="blog-post-images overflow-hidden"> <a href="#"> <img src="image path" alt=""> </a> <div class="blog-categories bg-white text-uppercase text-extra-small alt-font"><a href="#">Graphic Design</a></div> </div> <div class="post-details padding-40px-all sm-padding-20px-lr sm-padding-30px-tb"> <div class="blog-hover-color"></div> <a href="#" class="alt-font post-title text-medium text-extra-dark-gray w-90 d-block lg-w-100 margin-5px-bottom">I like the body. I can design everything with the body.</a> <div class="author"> <span class="text-medium-gray text-uppercase text-extra-small d-inline-block">by <a href="#" class="text-medium-gray">Jay Benjamin</a> | 20 April 2017</span> </div> <div class="separator-line-horrizontal-full bg-medium-gray margin-20px-tb"></div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum standard dummy...</p> </div> </div> </li> <!-- end blog post item --> <!-- start blog post item --> <li class="grid-item last-paragraph-no-margin wow animate__fadeInUp" data-wow-delay="0.2s"> <div class="blog-post bg-white"> <div class="blog-post-images overflow-hidden"> <a href="#"> <img src="image path" alt=""> </a> <div class="blog-categories bg-white text-uppercase text-extra-small alt-font"><a href="#">Graphic Design</a></div> </div> <div class="post-details padding-40px-all sm-padding-20px-lr sm-padding-30px-tb"> <div class="blog-hover-color"></div> <a href="#" class="alt-font post-title text-medium text-extra-dark-gray w-90 d-block lg-w-100 margin-5px-bottom">Recognizing the need is the primary condition for design.</a> <div class="author"> <span class="text-medium-gray text-uppercase text-extra-small d-inline-block">by <a href="#" class="text-medium-gray">Jay Benjamin</a> | 20 April 2017</span> </div> <div class="separator-line-horrizontal-full bg-medium-gray margin-20px-tb"></div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum standard dummy...</p> </div> </div> </li> <!-- end blog post item --> <!-- start blog post item --> <li class="grid-item last-paragraph-no-margin wow animate__fadeInUp" data-wow-delay="0.4s"> <div class="blog-post bg-white"> <div class="blog-post-images overflow-hidden"> <a href="#"> <img src="image path" alt=""> </a> <div class="blog-categories bg-white text-uppercase text-extra-small alt-font"><a href="#">Graphic Design</a></div> </div> <div class="post-details padding-40px-all sm-padding-20px-lr sm-padding-30px-tb"> <div class="blog-hover-color"></div> <a href="#" class="alt-font post-title text-medium text-extra-dark-gray w-90 d-block lg-w-100 margin-5px-bottom">Styles come and go. Design is a language, not a style.</a> <div class="author"> <span class="text-medium-gray text-uppercase text-extra-small d-inline-block">by <a href="#" class="text-medium-gray">Jay Benjamin</a> | 20 April 2017</span> </div> <div class="separator-line-horrizontal-full bg-medium-gray margin-20px-tb"></div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum standard dummy...</p> </div> </div> </li> <!-- end blog post item --> </ul>
NoteFor demo, You can please check this in blog-post.html page.
Blockquote
Wrap <blockquote>
around any HTML as the quote. For straight quotes, we recommend a <p>
.</p>
<!-- start blockquote --> <blockquote class="border-color-deep-pink"> <p>Reading is not only informed by what’s going on with us at that moment, but also governed by how our eyes and brains work to process information. What you see and what you’re experiencing as you read these words is quite different.</p> <footer>Jason Maria</footer> </blockquote> <!-- end blockquote -->
NoteFor demo, You can please check this in blockquote.html page.
Buttons
Use the button classes on an <a>
and <button>
element.
<!-- start buttons --> <a href="#" class="btn btn-extra-large btn-dark-gray text-large border-radius-4">Button Extra Large <i class="fa-solid fa-arrow-right icon-very-small" aria-hidden="true"></i></a> <a href="#" class="btn btn-large btn-dark-gray text-large border-radius-4"><i class="fa-solid fa-magnifying-glass icon-very-small margin-5px-right no-margin-left" aria-hidden="true"></i> Button Large</a> <a href="#" class="btn btn-medium btn-dark-gray text-medium border-radius-4">Button Medium <i class="fa-brands fa-youtube icon-very-small" aria-hidden="true"></i></a> <a href="#" class="btn btn-small btn-dark-gray text-small border-radius-4"><i class="fa-solid fa-gift icon-very-small margin-5px-right no-margin-left" aria-hidden="true"></i> Button Small</a> <a href="#" class="btn btn-very-small btn-dark-gray text-very-small border-radius-4">Extra Small <i class="fa-solid fa-star" aria-hidden="true"></i></a> <!-- end buttons -->
NoteFor demo, You can please check this in buttons.html page.
Call To Action
Pofo provides creative call to actions, see below image and code for more information.
<!-- start call to action section --> <section class="wow animate__fadeIn cover-background half-section" style="background-image: url('image path');"> <div class="opacity-medium bg-extra-dark-gray"></div> <div class="container position-relative"> <div class="row"> <div class="col-12 text-center d-flex flex-column flex-lg-row align-items-center justify-content-center"> <span class="text-extra-large text-white-2 alt-font margin-30px-right md-no-margin-right md-margin-15px-bottom sm-w-100">We always stay with our clients and respect their business.</span> <a href="#" class="btn btn-white btn-small">Start a Project</a> </div> </div> </div> </section> <!-- end call to action section -->
NoteFor demo, You can please check this in call-to-action.html page.
Clients
Showcase of clients logo or image. See below image and code for more information.
<div class="row row-cols-1 row-cols-lg-3 row-cols-md-2 row-cols-sm-1 align-items-center"> <!-- start client logo item --> <div class="col wow animate__fadeInUp"> <div class="bg-white clients-list text-center d-flex align-items-center justify-content-center w-100 margin-30px-bottom xs-margin-15px-bottom"> <a href="#"><img src="image path" alt=""/></a> </div> </div> <!-- end client logo item --> <!-- start client logo item --> <div class="col wow animate__fadeInUp" data-wow-delay="0.2s"> <div class="bg-white clients-list text-center d-flex align-items-center justify-content-center w-100 margin-30px-bottom xs-margin-15px-bottom"> <a href="#"><img src="image path" alt=""/></a> </div> </div> <!-- end client logo item --> <!-- start client logo item --> <div class="col wow animate__fadeInUp" data-wow-delay="0.4s"> <div class="bg-white clients-list text-center d-flex align-items-center justify-content-center w-100 margin-30px-bottom xs-margin-15px-bottom"> <a href="#"><img src="image path" alt=""/></a> </div> </div> <!-- end client logo item --> <!-- start client logo item --> <div class="col wow animate__fadeInUp"> <div class="bg-white clients-list text-center d-flex align-items-center justify-content-center w-100 md-margin-30px-bottom xs-margin-15px-bottom"> <a href="#"><img src="image path" alt=""/></a> </div> </div> <!-- end client logo item --> <!-- start client logo item --> <div class="col wow animate__fadeInUp" data-wow-delay="0.2s"> <div class="bg-white clients-list text-center d-flex align-items-center justify-content-center w-100 sm-margin-30px-bottom xs-margin-15px-bottom"> <a href="#"><img src="image path" alt=""/></a> </div> </div> <!-- end client logo item --> <!-- start client logo item --> <div class="col wow animate__fadeInUp" data-wow-delay="0.4s"> <div class="bg-white clients-list text-center d-flex align-items-center justify-content-center w-100"> <a href="#"><img src="image path" alt=""/></a> </div> </div> <!-- end client logo item --> </div>
NoteFor demo, You can please check this in clients.html page.
Clients Carousel
Showcase of clients logo or image in slider view. See below image and code for more information.
<div class="row"> <div class="swiper black-move wow animate__fadeIn" data-slider-options='{ "slidesPerView": "1", "allowTouchMove":true,"paginationClickable": true, "autoplay": { "delay": 3000, "disableOnInteraction": true }, "navigation": { "nextEl": ".swiper-button-next", "prevEl": ".swiper-button-prev" }, "pagination": { "el": ".swiper-pagination-01", "clickable": true }, "breakpoints": { "1200": { "slidesPerView": 4 }, "992": { "slidesPerView": 3 }, "768": { "slidesPerView": 3 } } }'> <div class="swiper-wrapper"> <!-- start slider slide --> <div class="swiper-slide text-center"><img src="image path" alt=""></div> <!-- end slider slide --> <!-- start slider slide --> <div class="swiper-slide text-center"><img src="image path" alt=""></div> <!-- end slider slide --> <!-- start slider slide --> <div class="swiper-slide text-center"><img src="image path" alt=""></div> <!-- end slider slide --> <!-- start slider slide --> <div class="swiper-slide text-center"><img src="image path" alt=""></div> <!-- end slider slide --> <!-- start slider slide --> <div class="swiper-slide text-center"><img src="image path" alt=""></div> <!-- end slider slide --> <!-- start slider slide --> <div class="swiper-slide text-center"><img src="image path" alt=""></div> <!-- end slider slide --> <!-- start slider slide --> <div class="swiper-slide text-center"><img src="image path" alt=""></div> <!-- end slider slide --> <!-- start slider slide --> <div class="swiper-slide text-center"><img src="image path" alt=""></div> <!-- end slider slide --> </div> </div> </div>
NoteFor demo, You can please check this in client-carousel.html page.
Contact Form
Contact form for contact pages or you can use it for any inquries. See below image and code for more information.
<!-- start form --> <form id="project-contact-form" action="email-templates/contact-form.php" method="post"> <div class="row"> <!-- start input --> <div class="col-12"> <div class="form-results d-none"></div> </div> <!-- end input --> <!-- start input --> <div class="col-12 col-md-6"> <input type="text" name="name" id="name" placeholder="Name *" class="big-input required"> </div> <!-- end input --> <!-- start input --> <div class="col-12 col-md-6"> <input type="tel" name="phone" id="phone" placeholder="Phone" class="big-input"> </div> <!-- start input --> <div class="col-12 col-md-6"> <input type="email" name="email" id="email" placeholder="E-mail *" class="big-input required"> </div> <!-- end input --> <!-- start input --> <div class="col-12 col-md-6"> <div class="select-style big-select"> <select name="budget" id="budget" class="bg-transparent mb-0"> <option value="">Select your budget</option> <option value="$500 - $1000">$500 - $1000</option> <option value="$1000 - $2000">$1000 - $2000</option> <option value="$2000 - $5000">$2000 - $5000</option> </select> </div> </div> <!-- end input --> <!-- start input --> <div class="col-12"> <textarea name="comment" id="comment" placeholder="Describe your project" rows="6" class="big-textarea"></textarea> </div> <!-- end input --> <div class="col-12 text-center"> <button id="project-contact-us-button" type="submit" class="btn btn-transparent-dark-gray btn-large margin-20px-top submit">send message</button> </div> </div> </form> <!-- end form -->
NoteFor demo, You can please check this in contact-form.html page.
columns
Using a single set of .col-lg-*
grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row
.
<div class="row show-grid"> <div class="col-12 col-lg-1">.col-lg-1</div> <div class="col-12 col-lg-1">.col-lg-1</div> <div class="col-12 col-lg-1">.col-lg-1</div> <div class="col-12 col-lg-1">.col-lg-1</div> <div class="col-12 col-lg-1">.col-lg-1</div> <div class="col-12 col-lg-1">.col-lg-1</div> <div class="col-12 col-lg-1">.col-lg-1</div> <div class="col-12 col-lg-1">.col-lg-1</div> <div class="col-12 col-lg-1">.col-lg-1</div> <div class="col-12 col-lg-1">.col-lg-1</div> <div class="col-12 col-lg-1">.col-lg-1</div> <div class="col-12 col-lg-1">.col-lg-1</div> </div> <div class="row show-grid"> <div class="col-12 col-lg-2">.col-lg-2</div> <div class="col-12 col-lg-2">.col-lg-2</div> <div class="col-12 col-lg-2">.col-lg-2</div> <div class="col-12 col-lg-2">.col-lg-2</div> <div class="col-12 col-lg-2">.col-lg-2</div> <div class="col-12 col-lg-2">.col-lg-2</div> </div> <div class="row show-grid"> <div class="col-12 col-lg-3">.col-lg-3</div> <div class="col-12 col-lg-3">.col-lg-3</div> <div class="col-12 col-lg-3">.col-lg-3</div> <div class="col-12 col-lg-3">.col-lg-3</div> </div> <div class="row show-grid"> <div class="col-12 col-lg-4">.col-lg-4</div> <div class="col-12 col-lg-4">.col-lg-4</div> <div class="col-12 col-lg-4">.col-lg-4</div> </div> <div class="row show-grid"> <div class="col-12 col-lg-5">.col-lg-5</div> <div class="col-12 col-lg-5">.col-lg-5</div> <div class="col-12 col-lg-2">.col-lg-2</div> </div> <div class="row show-grid"> <div class="col-12 col-lg-6">.col-lg-6</div> <div class="col-12 col-lg-6">.col-lg-6</div> </div> <div class="row show-grid"> <div class="col-12 col-lg-1">.col-lg-1</div> <div class="col-12 col-lg-11">.col-lg-11</div> </div> <div class="row show-grid"> <div class="col-12 col-lg-2">.col-lg-2</div> <div class="col-12 col-lg-10">.col-lg-10</div> </div> <div class="row show-grid"> <div class="col-12 col-lg-3">.col-lg-3</div> <div class="col-12 col-lg-9">.col-lg-9</div> </div> <div class="row show-grid"> <div class="col-12 col-lg-4">.col-lg-4</div> <div class="col-12 col-lg-8">.col-lg-8</div> </div> <div class="row show-grid"> <div class="col-12 col-lg-5">.col-lg-5</div> <div class="col-12 col-lg-7">.col-lg-7</div> </div>
NoteFor demo, You can please check this in columns.html page.
Counters
Different styles of counters for your website to present your identity with numbers. See below image and code for more information.
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-2 row-cols-lg-4"> <!-- start counter box item --> <div class="col md-padding-twelve-left md-margin-60px-bottom sm-margin-40px-bottom sm-padding-15px-left wow animate__fadeInRight"> <div class="feature-box-5 position-relative"> <i class="icon-desktop text-medium-gray icon-extra-medium top-6"></i> <div class="feature-content"> <h6 class="d-block text-extra-dark-gray font-weight-600 alt-font mb-0 counter" data-to="350" data-speed="2000">350</h6> <span class="text-small text-uppercase position-relative top-minus4">Happy Clients</span> </div> </div> </div> <!-- end counter box item --> <!-- start counter box item --> <div class="col md-padding-twelve-left md-margin-60px-bottom sm-margin-40px-bottom sm-padding-15px-left wow animate__fadeInRight" data-wow-delay="0.2s"> <div class="feature-box-5 position-relative"> <i class="icon-camera text-medium-gray icon-extra-medium top-6"></i> <div class="feature-content"> <h6 class="d-block text-extra-dark-gray font-weight-600 alt-font mb-0 counter" data-to="780" data-speed="2000">780</h6> <span class="text-small text-uppercase position-relative top-minus4">Photo Capture</span> </div> </div> </div> <!-- end counter box item --> <!-- start counter box item --> <div class="col md-padding-twelve-left xs-margin-40px-bottom sm-padding-15px-left wow animate__fadeInRight" data-wow-delay="0.4s"> <div class="feature-box-5 position-relative"> <i class="icon-laptop text-medium-gray icon-extra-medium top-6"></i> <div class="feature-content"> <h6 class="d-block text-extra-dark-gray font-weight-600 alt-font mb-0 counter" data-to="850" data-speed="2000">850</h6> <span class="text-small text-uppercase position-relative top-minus4">Work Completed</span> </div> </div> </div> <!-- end counter box item --> <!-- start counter box item --> <div class="col md-padding-twelve-left sm-padding-15px-left wow animate__fadeInRight" data-wow-delay="0.6s"> <div class="feature-box-5 position-relative"> <i class="icon-chat text-medium-gray icon-extra-medium top-6"></i> <div class="feature-content"> <h6 class="d-block text-extra-dark-gray font-weight-600 alt-font mb-0 counter" data-to="650" data-speed="2000">650</h6> <span class="text-small text-uppercase position-relative top-minus4">Telephonic Talk</span> </div> </div> </div> <!-- end counter box item --> </div>
Javascript (file path - /js/main.js)
if ($('.counter').length > 0) { $(document).on('appear', '.counter', function (e) { var _this = $(this); if (!_this.hasClass('appear')) { var options = _this.data('countToOptions') || {}; _this.countTo(options); _this.addClass('appear'); } }); }
NoteFor demo, You can please check this in counters.html page.
Countdown
Functionality to countdown timer in your page. See below image and code for more information.
<!-- start timer --> <div data-enddate="2022/01/01 12:00:00" class="countdown text-center text-extra-dark-gray counter-box-5"></div> <!-- end timer -->
Javascript (file path - /js/main.js)
$('.countdown').countdown($('.countdown').attr("data-enddate")).on('update.countdown', function (event) { $(this).html(event.strftime('' + '<div class="counter-container"><div class="counter-box first"><div class="number">%-D</div><span>Day%!d</span></div>' + '<div class="counter-box"><div class="number">%H</div><span>Hours</span></div>' + '<div class="counter-box"><div class="number">%M</div><span>Minutes</span></div>' + '<div class="counter-box last"><div class="number">%S</div><span>Seconds</span></div></div>')) });
NoteFor demo, You can please check this in countdown.html page.
Custom Icon With Text
Beautiful custom icon with text - features box. See below image and code for more information.
<div class="row row-cols-1 row-cols-lg-4 row-cols-sm-2"> <!-- start features box item --> <div class="col text-center md-margin-50px-bottom sm-margin-40px-bottom wow animate__fadeInUp last-paragraph-no-margin"> <div class="d-inline-block margin-20px-bottom"><img src="icon path" alt=""/></div> <div class="alt-font text-extra-dark-gray font-weight-600 margin-10px-bottom">Pixel Perfect Design</div> <p class="mx-auto md-w-80">Lorem Ipsum is simply text of the printing and typesetting industry. Lorem Ipsum has been standard dummy.</p> </div> <!-- end features box item --> <!-- start features box item --> <div class="col text-center md-margin-50px-bottom sm-margin-40px-bottom wow animate__fadeInUp last-paragraph-no-margin" data-wow-delay="0.2s"> <div class="d-inline-block margin-20px-bottom"><img src="icon path" alt=""/></div> <div class="alt-font text-extra-dark-gray font-weight-600 margin-10px-bottom">Full Documentation</div> <p class="mx-auto md-w-80">Lorem Ipsum is simply text of the printing and typesetting industry. Lorem Ipsum has been standard dummy.</p> </div> <!-- end features box item --> <!-- start features box item --> <div class="col text-center xs-margin-40px-bottom wow animate__fadeInUp last-paragraph-no-margin" data-wow-delay="0.4s"> <div class="d-inline-block margin-20px-bottom"><img src="icon path" alt=""/></div> <div class="alt-font text-extra-dark-gray font-weight-600 margin-10px-bottom">Reasonable Pricing</div> <p class="mx-auto md-w-80">Lorem Ipsum is simply text of the printing and typesetting industry. Lorem Ipsum has been standard dummy.</p> </div> <!-- end features box item --> <!-- start features box item --> <div class="col text-center wow animate__fadeInUp last-paragraph-no-margin" data-wow-delay="0.6s"> <div class="d-inline-block margin-20px-bottom"><img src="icon path" alt=""/></div> <div class="alt-font text-extra-dark-gray font-weight-600 margin-10px-bottom">User-friendly Admin</div> <p class="mx-auto md-w-80">Lorem Ipsum is simply text of the printing and typesetting industry. Lorem Ipsum has been standard dummy.</p> </div> <!-- end features box item --> </div>
NoteFor demo, You can please check this in custom-icon-with-text.html page.
Dropcaps
Different types of dropcaps for attractive typography in website. See below image and code for more information.
<!-- start dropcaps --> <p><span class="first-letter first-letter-block bg-extra-dark-gray text-white-2">M</span>Lorem Ipsum is simply </p> <!-- end dropcaps -->
NoteFor demo, You can please check this in dropcaps.html page.
Fancy Text Box
Fancy text box with attractive look. See below image and code for more information.
<div class="row row-cols-1 row-cols-lg-3 row-cols-sm-2 justify-content-center"> <!-- feature box item--> <div class="col md-margin-30px-bottom xs-margin-15px-bottom last-paragraph-no-margin wow animate__fadeInUp"> <div class="feature-box"> <div class="content"> <i class="icon-browser text-medium-gray icon-large margin-25px-bottom md-margin-15px-bottom"></i> <div class="text-medium alt-font text-capitalize text-extra-dark-gray margin-10px-bottom md-margin-5px-bottom">Live Website Builder</div> <p class="w-85 mx-auto md-w-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> </div> <!-- end feature box item--> <!-- feature box item--> <div class="col md-margin-30px-bottom xs-margin-15px-bottom last-paragraph-no-margin wow animate__fadeInUp" data-wow-delay="0.2s"> <div class="feature-box"> <div class="content"> <i class="icon-book-open text-medium-gray icon-large margin-25px-bottom md-margin-15px-bottom"></i> <div class="text-medium alt-font text-capitalize text-extra-dark-gray margin-10px-bottom md-margin-5px-bottom">Live Content Creator</div> <p class="w-85 mx-auto md-w-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> </div> <!-- end feature box item--> <!-- feature box item--> <div class="col last-paragraph-no-margin wow animate__fadeInUp" data-wow-delay="0.4s"> <div class="feature-box"> <div class="content"> <i class="icon-wallet text-medium-gray icon-large margin-25px-bottom md-margin-15px-bottom"></i> <div class="text-medium alt-font text-capitalize text-extra-dark-gray margin-10px-bottom md-margin-5px-bottom">Create Unique Demos</div> <p class="w-85 mx-auto md-w-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> </div> <!-- feature box item--> </div>
NoteFor demo, You can please check this in fancy-text-box.html page.
Icon
Icon Size
Pofo Provides 5 icon size for icon as well as other font sizes can also used as icon size, you can use classes .extra-small-icon
, .small-icon
, .medium-icon
, .large-icon
and .extra-large-icon
<!-- start social icon --> <div class="col-md-12 col-sm-10 col-xs-10 social-icon-style-1"> <ul class="medium-icon"> <li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook"></i></a></li> <li><a class="twitter" href="http://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a></li> <li><a class="google" href="http://www.google.com" target="_blank"><i class="fa-brands fa-google-plus"></i></a></li> </ul> </div> <!-- end social icon -->
Icon Style
Pofo provides 11 styles for display your icon in website. you can easily change icon style by changing class .social-icon-style-1
to .social-icon-style-11
<!-- start social icon --> <div class="col-10 col-lg-12 text-center elements-social social-icon-style-1"> <ul class="medium-icon"> <li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i></a></li> <li><a class="twitter" href="http://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a></li> <li><a class="google" href="http://www.google.com" target="_blank"><i class="fa-brands fa-google-plus-g"></i></a></li> </ul> </div> <!-- end social icon -->
Google Map
Embed google map for location and other use in website like in contact us page. See below image and code for more information.
<iframe class="w-100 h-500px" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.843821917424!2d144.956054!3d-37.817127!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad65d4c2b349649%3A0xb6899234e561db11!2sEnvato!5e0!3m2!1sen!2sin!4v1427947693651;"></iframe>
NoteFor demo, You can please check this in google-map.html page.
heading
Different heading styles and font sizes. See below image and code for more information.
<h1>Heading text</h1>
<h2>Heading text</h2>
<h3>Heading text</h3>
<h4>Heading text</h4>
<h5>Heading text</h5>
<h6>Heading text</h6>
<!-- additional heading fonts -->
<span class="title-large">Heading</span>
<span class="title-extra-large">Heading</span>
NoteFor demo, You can please check this in heading.html page.
Highlights
Supports bootstrap highlights facility for highlighting typography, can use the classes .bg-success
, .bg-warning
, .bg-danger
and .bg-primary
<mark class="bg-success text-white-2">Your textt</mark>
NoteFor demo, You can please check this in highlights.html page.
Icon With Text
Beautiful icon box with text - features box. See below image and code for more information.
<div class="row row-cols-1 row-cols-lg-3 row-cols-sm-2"> <!-- start features box item --> <div class="col margin-six-bottom md-margin-50px-bottom sm-margin-40px-bottom wow animate__fadeInUp last-paragraph-no-margin"> <div class="feature-box-5 position-relative"> <i class="icon-desktop text-medium-gray icon-medium"></i> <div class="feature-content"> <div class="text-extra-dark-gray margin-10px-bottom alt-font font-weight-600">Elegant / Unique design</div> <p class="d-inline-block sm-w-90">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> </div> <!-- end features box item --> <!-- start features box item --> <div class="col margin-six-bottom md-margin-50px-bottom sm-margin-40px-bottom wow animate__fadeInUp last-paragraph-no-margin" data-wow-delay="0.2s"> <div class="feature-box-5 position-relative"> <i class="icon-pricetags text-medium-gray icon-medium"></i> <div class="feature-content"> <div class="text-extra-dark-gray margin-10px-bottom alt-font font-weight-600">Different Layout Type</div> <p class="d-inline-block sm-w-90">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> </div> <!-- end features box item --> <!-- start features box item --> <div class="col margin-six-bottom md-margin-50px-bottom sm-margin-40px-bottom wow animate__fadeInUp last-paragraph-no-margin" data-wow-delay="0.4s"> <div class="feature-box-5 position-relative"> <i class="icon-chat text-medium-gray icon-medium"></i> <div class="feature-content"> <div class="text-extra-dark-gray margin-10px-bottom alt-font font-weight-600">Make it Simple</div> <p class="d-inline-block sm-w-90">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> </div> <!-- start features box item --> </div>
NoteFor demo, You can please check this in icon-with-text.html page.
Functionality to get your instagram posts and display it on your website. See below image and code for more information.
<!-- start instagram images --> <div class="row justify-content-center"> <div class="col-12"> <ul class="instafeed-grid instafeed-style-02 instafeed-wrapper grid grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large" data-total="8"> <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 images -->
Javascript (file path - /js/main.js)
var instagramWrapperItems = document.querySelectorAll('.instafeed-wrapper'); instagramWrapperItems.forEach(function (instagramWrapperItem, index) { var token = 'IGQVJYM0lCYW1ub2ViV2ZAzTVl4dVB6NUwzb3BhX0poazZALWUpWZA1NVdXJ2RU1HZA3llV2N5ajg3UlRIZA2dwSXNFT1F5UldzUHhSUDQ5TU9ZATFFSZAkhIQlhGdnRSc3V4Q3VOS2NDdVJFU29kdjRWSzBKbwZDZD', _this = $(instagramWrapperItem), token = _this.attr('data-token') || token, total = _this.attr('data-total') || '6', // how much photos do you want to get slider = _this.attr('data-slider-options'), _html = _this.html(), outputHTML = ''; if (typeof (slider) !== 'undefined' && slider !== null) { _this.html(''); } $.ajax({ url: 'https://graph.instagram.com/me/media?fields=id,media_type,media_url,timestamp,permalink,comments_count,like_count&access_token=' + token, type: 'GET', success: function (response) { outputHTML += _this.find('.grid-item').length > 0 ? '<li class="grid-sizer"></li>' : ''; for (var x in response.data) { if (x < parseInt(total)) { if (response.data[x]['media_type'] == 'IMAGE') { var link = response.data[x]['permalink'] || '', image = response.data[x]['media_url'] || '', likes = response.data[x]['like_count'] || '', comments = response.data[x]['comments_count'] || '', output = _html; output = output.replace(' href="#"', ''); output = output.replace(' src="#"', ''); output = output.replace('data-href', 'href'); output = output.replace('data-src', 'src'); output = output.replace('{{link}}', link); output = output.replace('{{image}}', image); output = output.replace('{{likes}}', likes); output = output.replace('{{comments}}', comments); outputHTML += output; } } } _this.html(outputHTML); if (typeof (slider) !== 'undefined' && slider !== null) { // Apply swiper var sliderOptions = $.parseJSON(slider); var swiperObj = instagramWrapperItem.parentElement; new Swiper(swiperObj, sliderOptions); } else { // Apply isotope if (!_this.find('.wow').length > 0) { _this.find('.grid-item').css('visibility', 'hidden'); } _this.imagesLoaded(function () { if (!_this.find('.wow').length > 0) { _this.find('.grid-item').css('visibility', ''); } else if (!isMobile) { _this.find('.grid-item').css('visibility', 'hidden'); } _this.removeClass('grid-loading'); _this.isotope({ layoutMode: 'masonry', itemSelector: '.grid-item', percentPosition: true, stagger: 0, masonry: { columnWidth: '.grid-sizer', } }); isotopeObjs.push(_this); }); } }, error: function (data) { var output = '<div class="col-12"><span class=text-center>No Images Found</span></div>'; _this.append(output); } }); });
Click here to generate your Instagram access token.
NoteFor demo, You can please check this in instagram.html page.
Info Banner
Info banner for display information in your website in different styles. See below image and code for more information.
<div class="row row-cols-1 row-cols-lg-3 justify-content-center g-0"> <!-- start info banner --> <div class="col image-hover-style-3 last-paragraph-no-margin bg-light-gray"> <div class="feature-box-wrap"> <div class="w-100 d-table position-relative cover-background small-screen sm-h-300px" style="background: url(image path)"></div> <div class="w-100 small-screen sm-h-300px d-table arrow-top"> <div class="d-table-cell align-middle padding-eighteen-lr xl-padding-nine-lr lg-padding-twelve-lr text-center md-padding-ten-lr sm-padding-seven-all"> <h6 class="text-extra-dark-gray alt-font w-95 mx-auto md-w-100 sm-margin-15px-bottom">We craft beautiful and unique digital experiences.</h6> <p class="no-letter-spacing padding-two-lr line-height-26 sm-line-height-20 sm-no-padding-lr">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.</p> <span class="separator-line-horrizontal-medium-light2 bg-deep-pink d-inline-block margin-40px-top sm-margin-20px-top"></span> </div> </div> </div> </div> <!-- end info banner --> <!-- start info banner --> <div class="col image-hover-style-3 last-paragraph-no-margin bg-light-gray"> <div class="feature-box-wrap md-swap-block"> <div class="w-100 small-screen sm-h-300px d-table arrow-bottom order-1"> <div class="d-table-cell align-middle padding-eighteen-lr xl-padding-nine-lr lg-padding-twelve-lr text-center md-padding-ten-lr sm-padding-seven-all"> <h6 class="text-extra-dark-gray alt-font w-95 mx-auto md-w-100 sm-margin-15px-bottom">Unlimited power and customization possibilities.</h6> <p class="no-letter-spacing padding-two-lr line-height-26 sm-line-height-20 sm-no-padding-lr">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.</p> <span class="separator-line-horrizontal-medium-light2 bg-deep-pink d-inline-block margin-40px-top sm-margin-20px-top"></span> </div> </div> <div class="w-100 d-table position-relative cover-background small-screen sm-h-300px" style="background: url(image path)"></div> </div> </div> <!-- end info banner --> <!-- start info banner --> <div class="col image-hover-style-3 last-paragraph-no-margin bg-light-gray"> <div class="feature-box-wrap"> <div class="w-100 d-table position-relative cover-background small-screen sm-h-300px" style="background: url(image path)"></div> <div class="w-100 small-screen sm-h-300px d-table arrow-top"> <div class="d-table-cell align-middle padding-eighteen-lr xl-padding-nine-lr lg-padding-twelve-lr text-center md-padding-ten-lr sm-padding-seven-all"> <h6 class="text-extra-dark-gray alt-font w-95 mx-auto md-w-100 sm-margin-15px-bottom">Pixel perfect design & clear code delivered to you.</h6> <p class="no-letter-spacing padding-two-lr line-height-26 sm-line-height-20 sm-no-padding-lr">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.</p> <span class="separator-line-horrizontal-medium-light2 bg-deep-pink d-inline-block margin-40px-top sm-margin-20px-top"></span> </div> </div> </div> </div> <!-- end info banner --> </div>
NoteFor demo, You can please check this in info-banner.html page.
Interactive Banner
Beautiful designs of interactive banner. See below image and code for more information.
<div class="row row-cols-1 row-cols-lg-4 row-cols-sm-2 justify-content-center"> <!-- start interactive banners item --> <div class="col banner-style3 px-0 wow animate__fadeInUp"> <figure class="bg-extra-dark-gray"> <div class="banner-image bg-extra-dark-gray"> <img src="image path" alt="" /> </div> <figcaption class="d-flex flex-column justify-content-center align-items-center text-center"> <div class="text-large text-white-2 alt-font text-uppercase font-weight-600 margin-10px-bottom">Rubber Studio</div> <p class="text-light-gray w-80 mx-auto">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <a href="single-project-page-01.html" class="btn btn-small btn-white font-weight-300 btn-rounded">View Portfolio <i class="ti-arrow-right"></i></a> </figcaption> </figure> </div> <!-- end interactive banners item --> <!-- start interactive banners item --> <div class="col banner-style3 px-0 wow animate__fadeInUp" data-wow-delay="0.2s"> <figure class="bg-extra-dark-gray"> <div class="banner-image bg-extra-dark-gray"> <img src="image path" alt="" /> </div> <figcaption class="d-flex flex-column justify-content-center align-items-center text-center"> <div class="text-large text-white-2 alt-font text-uppercase font-weight-600 margin-10px-bottom">Violator Series</div> <p class="text-light-gray w-80 mx-auto">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <a href="single-project-page-02.html" class="btn btn-small btn-white font-weight-300 btn-rounded">View Portfolio <i class="ti-arrow-right"></i></a> </figcaption> </figure> </div> <!-- end interactive banners item --> <!-- start interactive banners item --> <div class="col banner-style3 px-0 wow animate__fadeInUp" data-wow-delay="0.4s"> <figure class="bg-extra-dark-gray"> <div class="banner-image bg-extra-dark-gray"> <img src="image path" alt="" /> </div> <figcaption class="d-flex flex-column justify-content-center align-items-center text-center"> <div class="text-large text-white-2 alt-font text-uppercase font-weight-600 margin-10px-bottom">Daimler Financial</div> <p class="text-light-gray w-80 mx-auto">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <a href="single-project-page-03.html" class="btn btn-small btn-white font-weight-300 btn-rounded">View Portfolio <i class="ti-arrow-right"></i></a> </figcaption> </figure> </div> <!-- end interactive banners item --> <!-- start interactive banners item --> <div class="col banner-style3 px-0 wow animate__fadeInUp" data-wow-delay="0.6s"> <figure class="bg-extra-dark-gray"> <div class="banner-image bg-extra-dark-gray"> <img src="image path" alt="" /> </div> <figcaption class="d-flex flex-column justify-content-center align-items-center text-center"> <div class="text-large text-white-2 alt-font text-uppercase font-weight-600 margin-10px-bottom">The Aparthotel</div> <p class="text-light-gray w-80 mx-auto">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <a href="single-project-page-04.html" class="btn btn-small btn-white font-weight-300 btn-rounded">View Portfolio <i class="ti-arrow-right"></i></a> </figcaption> </figure> </div> <!-- start interactive banners item --> </div>
NoteFor demo, You can please check this in text-slider.html page.
Image Gallery
Awesome image gallery with amazing look. See below image and code for more information.
<div class="row justify-content-center"> <div class="col-12"> <ul class="hover-option4 lightbox-gallery portfolio-wrapper grid grid-loading grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-medium"> <li class="grid-sizer"></li> <!-- start portfolio item --> <li class="grid-item wow animate__fadeInUp"> <a href="image path" title="Lightbox gallery image title..." data-group="lightbox-gallery"> <figure> <div class="portfolio-img bg-extra-dark-gray"><img src="image path" alt="" class="project-img-gallery"/></div> <figcaption> <div class="portfolio-hover-main d-flex justify-content-center align-items-center"> <div class="portfolio-hover-content position-relative"> <i class="ti-zoom-in text-white-2 fa-2x"></i> </div> </div> </figcaption> </figure> </a> </li> <!-- end portfolio item --> <!-- start portfolio item --> <li class="grid-item wow animate__fadeInUp" data-wow-delay="0.2s"> <a href="image path" title="Lightbox gallery image title..." data-group="lightbox-gallery"> <figure> <div class="portfolio-img bg-extra-dark-gray"><img src="image path" alt="" class="project-img-gallery"/></div> <figcaption> <div class="portfolio-hover-main d-flex justify-content-center align-items-center"> <div class="portfolio-hover-content position-relative"> <i class="ti-zoom-in text-white-2 fa-2x"></i> </div> </div> </figcaption> </figure> </a> </li> <!-- end portfolio item --> <!-- start portfolio item --> <li class="grid-item wow animate__fadeInUp" data-wow-delay="0.4s"> <a href="image path" title="Lightbox gallery image title..." data-group="lightbox-gallery"> <figure> <div class="portfolio-img bg-extra-dark-gray"><img src="image path" alt="" class="project-img-gallery"/></div> <figcaption> <div class="portfolio-hover-main d-flex justify-content-center align-items-center"> <div class="portfolio-hover-content position-relative"> <i class="ti-zoom-in text-white-2 fa-2x"></i> </div> </div> </figcaption> </figure> </a> </li> <!-- start portfolio item --> </ul> </div> </div>
NoteFor demo, You can please check this in image-gallery.html page.
Lists
11 types of list designs. See below image and code for more information.
<!-- start list style --> <ul class="p-0 list-style-10"> <li><i class="fa-solid fa-arrow-right text-extra-dark-gray" aria-hidden="true"></i><span>Beautiful and easy to understand UI, professional animations</span></li> <li><i class="fa-solid fa-arrow-right text-extra-dark-gray" aria-hidden="true"></i><span>Theme advantages are pixel perfect design & clear code delivered</span></li> <li><i class="fa-solid fa-arrow-right text-extra-dark-gray" aria-hidden="true"></i><span>Present your services with flexible, convenient and multipurpose</span></li> <li><i class="fa-solid fa-arrow-right text-extra-dark-gray" aria-hidden="true"></i><span>Find more creative ideas for your projects</span></li> <li><i class="fa-solid fa-arrow-right text-extra-dark-gray" aria-hidden="true"></i><span>Unlimited power and customization possibilities</span></li> </ul> <!-- end list style -->
NoteFor demo, You can please check this in lists.html page.
Lightbox Gallery
Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device. The list of gallery options & its descriptions are provided below for your reference:
- Single Image Lightbox
- Lightbox Gallery
- Zoom Gallery
- Popup with Form
- Modal Popup
- Open YouTube Video
- Open Vimeo Video
- Open Google Map
Single Image Lightbox
Three simple popups with different scaling settings.
- Fits horizontally and vertically.
- Only horizontally
- No gaps, zoom animation, close icon in top-right corner.
<div class="row"> <div class="col-12 filter-content overflow-hidden"> <ul class="hover-option2 lightbox-gallery portfolio-wrapper grid grid-loading grid-2col xl-grid-2col lg-grid-2col md-grid-2col sm-grid-2col xs-grid-1col gutter-large"> <li class="grid-sizer"></li> <!-- start image gallery item --> <li class="grid-item wow animate__fadeInUp"> <a href="image path" class="single-image-lightbox" title="Lightbox gallery image title..." data-group="lightbox-gallery"> <figure> <div class="portfolio-img bg-extra-dark-gray"><img src="image path" alt="" class="project-img-gallery"/></div> <figcaption> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative"> <i class="ti-zoom-in text-white-2 fa-2x"></i> </div> </div> </div> </figcaption> </figure> </a> </li> <!-- end image gallery item --> <!-- start image gallery item --> <li class="grid-item wow animate__fadeInUp" data-wow-delay="0.2s"> <a href="image path" class="single-image-lightbox" title="Lightbox gallery image title..." data-group="lightbox-gallery"> <figure> <div class="portfolio-img bg-extra-dark-gray"><img src="image path" alt="" class="project-img-gallery"/></div> <figcaption> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative"> <i class="ti-zoom-in text-white-2 fa-2x"></i> </div> </div> </div> </figcaption> </figure> </a> </li> <!-- start image gallery item --> </ul> </div> </div>
Javascript (file path - /js/main.js)
$('.single-image-lightbox').magnificPopup({ type: 'image', closeOnContentClick: true, fixedContentPos: true, closeBtnInside: false, mainClass: 'mfp-no-margins mfp-with-zoom', image: { verticalFit: true }, zoom: { enabled: true, duration: 300 } });
NoteFor demo, you can check it here single-image-lightbox.html.
Lightbox Gallery
You may put any HTML content in each gallery item and mix content types. In this example lazy-loading of images is enabled for the next image based on move direction.
<div class="row"> <div class="col-12 filter-content overflow-hidden"> <ul class="hover-option2 portfolio-gallery portfolio-wrapper grid grid-loading grid-2col xl-grid-2col lg-grid-2col md-grid-2col sm-grid-2col xs-grid-1col gutter-large"> <li class="grid-sizer"></li> <!-- photo item --> <li class="grid-item wow animate__fadeInUp"> <a href="image path" title="Lightbox gallery image title..." data-group="two-columns-zoom-animation" class="lightbox-group-gallery-item"> <figure> <div class="portfolio-img bg-extra-dark-gray"><img src="image path" alt="" class="project-img-gallery"/></div> <figcaption> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative"> <i class="ti-zoom-in text-white-2 fa-2x"></i> </div> </div> </div> </figcaption> </figure> </a> </li> <!-- end photo item --> <!-- photo item --> <li class="grid-item wow animate__fadeInUp" data-wow-delay="0.2s"> <a href="image path" title="Lightbox gallery image title..." data-group="two-columns-zoom-animation" class="lightbox-group-gallery-item"> <figure> <div class="portfolio-img bg-extra-dark-gray"><img src="image path" alt="" class="project-img-gallery"/></div> <figcaption> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative"> <i class="ti-zoom-in text-white-2 fa-2x"></i> </div> </div> </div> </figcaption> </figure> </a> </li> <!-- end photo item --> </ul> </div> </div>
Javascript (file path - /js/main.js)
$('.lightbox-portfolio').magnificPopup({ delegate: '.gallery-link', type: 'image', tLoading: 'Loading image #%curr%...', mainClass: 'mfp-fade', fixedContentPos: true, closeBtnInside: false, gallery: { enabled: true, navigateByImgClick: false, preload: [0, 1] } });
Notefor demo visit page lightbox-gallery.html page.
Zoom Gallery
If you wish to open the popup only after image is fully loaded, you may preload image via JS. Or use scaled down image instead of thumbnail. Zoom effect works only with images, for now.
<div class="row"> <div class="col-12 filter-content overflow-hidden"> <ul class="hover-option2 zoom-gallery portfolio-wrapper grid grid-loading grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-small"> <li class="grid-sizer"></li> <!-- photo item --> <li class="grid-item wow animate__fadeInUp"> <a href="image path" title="Lightbox gallery image title..." data-group="zoom-gallery"> <figure> <div class="portfolio-img bg-extra-dark-gray"><img src="image path" alt="" class="project-img-gallery"/></div> <figcaption> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative"> <i class="ti-zoom-in text-white-2 fa-2x"></i> </div> </div> </div> </figcaption> </figure> </a> </li> <!-- end photo item --> <!-- photo item --> <li class="grid-item wow animate__fadeInUp" data-wow-delay="0.2s"> <a href="image path" title="Lightbox gallery image title..." data-group="zoom-gallery"> <figure> <div class="portfolio-img bg-extra-dark-gray"><img src="image path" alt="" class="project-img-gallery"/></div> <figcaption> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative"> <i class="ti-zoom-in text-white-2 fa-2x"></i> </div> </div> </div> </figcaption> </figure> </a> </li> <!-- end photo item --> <!-- photo item --> <li class="grid-item wow animate__fadeInUp" data-wow-delay="0.4s"> <a href="image path" title="Lightbox gallery image title..." data-group="zoom-gallery"> <figure> <div class="portfolio-img bg-extra-dark-gray"><img src="image path" alt="" class="project-img-gallery"/></div> <figcaption> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative"> <i class="ti-zoom-in text-white-2 fa-2x"></i> </div> </div> </div> </figcaption> </figure> </a> </li> <!-- photo item --> </ul> </div> </div>
Javascript (file path - /js/main.js)
$('.zoom-gallery').magnificPopup({ delegate: 'a', type: 'image', mainClass: 'mfp-with-zoom mfp-img-mobile', fixedContentPos: true, closeBtnInside: false, image: { verticalFit: true, titleSrc: function (item) { return item.el.attr('title'); } }, gallery: { enabled: true }, zoom: { enabled: true, duration: 300, opener: function (element) { return element.find('img'); } } });
NoteFor demo, you can check it here zoom-gallery.html
Popup with Form
Entered data will not lost if you open and close the popup or if you go to another page and then press back browser button.
<!-- start pop-up with form section --> <a href="#contact-form" class="btn btn-medium btn-rounded btn-transparent-dark-gray wow animate__fadeInDown popup-with-form">Start New Projects</a> <!-- start form --> <form id="contact-form" action="email-templates/contact-form.php" method="post" class="white-popup-block mfp-hide col-11 col-xxl-3 col-xl-4 col-lg-5 col-md-8 col-sm-9 p-0 mx-auto"> <div class="padding-fifteen-all bg-white border-radius-6 lg-padding-seven-all"> <div class="text-extra-dark-gray alt-font text-large font-weight-600 margin-30px-bottom">Looking for a excellent business idea?</div> <div> <div class="form-results d-none"></div> <input type="text" name="name" id="name" placeholder="Name*" class="input-bg required"> <input type="email" name="email" id="email" placeholder="E-mail*" class="input-bg required"> <input type="text" name="subject" id="subject" placeholder="Subject" class="input-bg"> <textarea name="comment" id="comment" placeholder="Your Message" class="input-bg"></textarea> <button id="contact-us-button" type="submit" class="btn btn-small border-radius-4 btn-black submit">send message</button> </div> </div> </form> <!-- end form --> <!-- end pop-up with form section -->
Javascript (file path - /js/main.js)
$('.popup-with-form').magnificPopup({ type: 'inline', preloader: false, closeBtnInside: false, fixedContentPos: true, focus: '#name', callbacks: { beforeOpen: function () { if ($(window).width() < 700) { this.st.focus = false; } else { this.st.focus = '#name'; } } } });
NoteFor demo, you can check it here popup-with-form.html
Modal Popup
A modal popup disables the usual ways to close popups.
<a class="btn btn-medium btn-rounded btn-transparent-dark-gray modal-popup wow animate__fadeInUp" data-wow-delay="0.6s" href="#modal-popup">Open Modal</a> <!-- start modal pop-up --> <div id="modal-popup" class="col-11 col-xxl-3 col-xl-4 col-lg-6 col-md-7 col-sm-9 white-popup-block mfp-hide position-relative mx-auto bg-white text-center modal-popup-main padding-50px-all"> <span class="text-extra-dark-gray text-uppercase alt-font text-extra-large font-weight-600 margin-15px-bottom d-block">Modal dialog</span> <p class="margin-four">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> <a class="btn btn-medium btn-rounded btn-dark-gray popup-modal-dismiss" href="#">Dismiss</a> </div> <!-- end modal pop-up -->
Javascript (file path - /js/main.js)
$('.modal-popup').magnificPopup({ type: 'inline', preloader: false, // modal: true, blackbg: true, callbacks: { open: function () { $('html').css('margin-right', 0); } } }); $(document).on('click', '.popup-modal-dismiss', function (e) { e.preventDefault(); $.magnificPopup.close(); });
NoteFor demo, you can check it here modal-popup.html
Open YouTube Video
In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered.
<!-- video popup --> <a class="btn btn-medium btn-rounded btn-transparent-dark-gray popup-youtube" href="https://www.youtube.com/watch?v=sU3FkzUKHXU">Open Youtube Video</a> <!-- end video popup -->
Javascript (file path - /js/main.js)
$('.popup-youtube').magnificPopup({ disableOn: 700, type: 'iframe', mainClass: 'mfp-fade', removalDelay: 160, preloader: false, fixedContentPos: true, closeBtnInside: false });
NoteFor demo, you can check it here open-youtube-video.html
Open Vimeo Video
In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered.
<!-- video popup --> <a class="btn btn-medium btn-rounded btn-transparent-dark-gray popup-vimeo" href="https://player.vimeo.com/video/75976293">Open Vimeo Video</a> <!-- end video popup -->
Javascript (file path - /js/main.js)
$('.popup-vimeo,').magnificPopup({ disableOn: 700, type: 'iframe', mainClass: 'mfp-fade', removalDelay: 160, preloader: false, fixedContentPos: true, closeBtnInside: false });
Notefor demo visit page open-vimeo-video.html page.
Open Google Map
In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered.
<!-- google map popup --> <a class="btn btn-medium btn-rounded btn-transparent-dark-gray popup-youtube" href="https://maps.google.com/maps?q=221B+Baker+Street,+London,+United+Kingdom&hl=en&t=v&hnear=221B+Baker+St,+London+NW1+6XE,+United+Kingdom">Open Gooogle Map</a> <!-- end google map popup -->
Javascript (file path - /js/main.js)
$('.popup-googlemap').magnificPopup({ disableOn: 700, type: 'iframe', mainClass: 'mfp-fade', removalDelay: 160, preloader: false, fixedContentPos: true, closeBtnInside: false });
NoteFor demo, you can check it here open-google-map.html
Message Box
Wrap any text and an optional dismiss button in .alert
and one of the four contextual classes (e.g., .alert-success
) for basic alert messages.
<!-- start message box item --> <div class="alert alert-success alert-dismissible" role="alert"> <button type="button" class="btn-close line-height-unset h-100 py-0" data-bs-dismiss="alert" aria-label="Close"></button> <strong>Success!</strong> Indicates a successful or positive action. </div> <!-- end message box item --> <!-- start message box item --> <div class="alert alert alert-info alert-dismissible" role="alert"> <button type="button" class="btn-close line-height-unset h-100 py-0" data-bs-dismiss="alert" aria-label="Close"></button> <strong>Info!</strong> Indicates a neutral informative change or action. </div> <!-- end message box item --> <!-- start message box item --> <div class="alert alert-warning alert-dismissible" role="alert"> <button type="button" class="btn-close line-height-unset h-100 py-0" data-bs-dismiss="alert" aria-label="Close"></button> <strong>Warning!</strong> Indicates a warning that might need attention. </div> <!-- end message box item --> <!-- start message box item --> <div class="alert alert-danger alert-dismissible" role="alert"> <button type="button" class="btn-close line-height-unset h-100 py-0" data-bs-dismiss="alert" aria-label="Close"></button> <strong>Danger!</strong> Indicates a dangerous or potentially negative action. </div> <!-- start message box item -->
NoteFor demo, You can please check this in message-box.html page.
Overline Icon Box
Beautiful overline icon box - features box. See below image and code for more information.
<div class="row row-cols-1 row-cols-lg-4 row-cols-sm-2"> <!-- start features box item --> <div class="col md-margin-30px-bottom xs-margin-15px-bottom wow animate__fadeInUp last-paragraph-no-margin"> <div class="bg-white border-color-extra-medium-gray border-all overline-icon-box overline-medium-gray text-center padding-eighteen-tb position-relative h-100"> <div class="d-inline-block margin-20px-bottom"><i class="ti-desktop icon-large text-deep-pink"></i></div> <div class="alt-font text-extra-dark-gray font-weight-600 margin-10px-bottom">Pixel Perfect Design</div> <p class="w-75 mx-auto md-w-80">Lorem Ipsum is simply text of the printing and typesetting industry. Lorem Ipsum has been standard dummy.</p> </div> </div> <!-- end features box item --> <!-- start features box item --> <div class="col md-margin-30px-bottom xs-margin-15px-bottom wow animate__fadeInUp last-paragraph-no-margin" data-wow-delay="0.2s"> <div class="bg-white border-color-extra-medium-gray border-all overline-icon-box overline-medium-gray text-center padding-eighteen-tb position-relative h-100"> <div class="d-inline-block margin-20px-bottom"><i class="ti-image icon-large text-deep-pink"></i></div> <div class="alt-font text-extra-dark-gray font-weight-600 margin-10px-bottom">Full Documentation</div> <p class="w-75 mx-auto md-w-80">Lorem Ipsum is simply text of the printing and typesetting industry. Lorem Ipsum has been standard dummy.</p> </div> </div> <!-- end features box item --> <!-- start features box item --> <div class="col xs-margin-15px-bottom wow animate__fadeInUp last-paragraph-no-margin" data-wow-delay="0.4s"> <div class="bg-white border-color-extra-medium-gray border-all overline-icon-box overline-medium-gray text-center padding-eighteen-tb position-relative h-100"> <div class="d-inline-block margin-20px-bottom"><i class="ti-cup icon-large text-deep-pink"></i></div> <div class="alt-font text-extra-dark-gray font-weight-600 margin-10px-bottom">Pixel Perfect Design</div> <p class="w-75 mx-auto md-w-80">Lorem Ipsum is simply text of the printing and typesetting industry. Lorem Ipsum has been standard dummy.</p> </div> </div> <!-- end features box item --> <!-- start features box item --> <div class="col wow animate__fadeInUp last-paragraph-no-margin" data-wow-delay="0.6s"> <div class="bg-white border-color-extra-medium-gray border-all overline-icon-box overline-medium-gray text-center padding-eighteen-tb position-relative h-100"> <div class="d-inline-block margin-20px-bottom"><i class="ti-bar-chart icon-large text-deep-pink"></i></div> <div class="alt-font text-extra-dark-gray font-weight-600 margin-10px-bottom">Full Documentation</div> <p class="w-75 mx-auto md-w-80">Lorem Ipsum is simply text of the printing and typesetting industry. Lorem Ipsum has been standard dummy.</p> </div> </div> <!-- start features box item --> </div>
NoteFor demo, You can please check this in overline-icon-box.html page.
Parallax Scrolling
Section with parallax-scrolling effect. See below image and code for more information.
<!-- start parallax scrolling section --> <section class="extra-big-section parallax wow animate__fadeIn" data-parallax-background-ratio="0.5" style="background-image: url('image path')"> <div class="opacity-full-dark bg-extra-dark-gray"></div> <div class="container position-relative"> <div class="row justify-content-center"> <div class="col-12 col-lg-7 col-md-11 text-center"> <div class="alt-font text-medium-gray text-uppercase text-small margin-20px-bottom">About Digital Agency</div> <h5 class="text-light-gray alt-font margin-40px-bottom sm-margin-30px-bottom">We always stay with our clients and respect their business. We deliver 100% and provide instant response to help them succeed in constantly changing and challenging business world.</h5> <a href="portfolio-full-width-grid-overlay.html" class="btn btn-medium btn-white btn-rounded">Latest Portfolio</a> </div> </div> </div> </section> <!-- end parallax scrolling section -->
Javascript (file path - /js/main.js)
function setParallax() { if (!isIE()) { $('[data-parallax-background-ratio]').each(function () { var ratio = $(this).attr('data-parallax-background-ratio') || 0.5; $(this).parallax('0%', ratio); }); $('[data-parallax-layout-ratio]').each(function () { var ratio = $(this).attr('data-parallax-layout-ratio') || 1; $(this).parallaxImg(ratio); }); } }
NoteFor demo, You can please check this in parallax-scrolling.html page.
Pie Charts
Functionality to make pie charts with attractive look. See below image and code for more information.
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 justify-content-center"> <!-- start pie chart item --> <div class="col text-center md-margin-40px-bottom xs-margin-30px-bottom wow animate__fadeInUp"> <div class="chart-percent margin-15px-bottom"> <span class="pie-chart-style-01" data-line-width="3" data-percent="90" data-track-color="#d9d9d9" data-bar-color="#929292"> <span class="percent text-extra-large text-extra-dark-gray font-weight-500"></span> </span> </div> <div class="chart-text"> <span class="text-uppercase text-small">Graphic Design</span> </div> </div> <!-- end pie chart item --> <!-- start pie chart item --> <div class="col text-center md-margin-40px-bottom xs-margin-30px-bottom wow animate__fadeInUp" data-wow-delay="0.2s"> <div class="chart-percent margin-15px-bottom"> <span class="pie-chart-style-01" data-line-width="3" data-percent="75" data-track-color="#d9d9d9" data-bar-color="#929292"> <span class="percent text-extra-large text-extra-dark-gray font-weight-500"></span> </span> </div> <div class="chart-text"> <span class="text-uppercase text-small">Web Design</span> </div> </div> <!-- end pie chart item --> <!-- start pie chart item --> <div class="col text-center xs-margin-30px-bottom wow animate__fadeInUp" data-wow-delay="0.4s"> <div class="chart-percent margin-15px-bottom"> <span class="pie-chart-style-01" data-line-width="3" data-percent="90" data-track-color="#d9d9d9" data-bar-color="#929292"> <span class="percent text-extra-large text-extra-dark-gray font-weight-500"></span> </span> </div> <div class="chart-text"> <span class="text-uppercase text-small">Branding</span> </div> </div> <!-- end pie chart item --> <!-- start pie chart item --> <div class="col text-center wow animate__fadeInUp" data-wow-delay="0.6s"> <div class="chart-percent margin-15px-bottom"> <span class="pie-chart-style-01" data-line-width="3" data-percent="62" data-track-color="#d9d9d9" data-bar-color="#929292"> <span class="percent text-extra-large text-extra-dark-gray font-weight-500"></span> </span> </div> <div class="chart-text"> <span class="text-uppercase text-small">Photography</span> </div> </div> <!-- end pie chart item --> </div>
Javascript (file path - /js/main.js)
if ($('.pie-chart-style-01').length > 0) { $(document.body).on('appear', '.pie-chart-style-01', function (e) { $('.pie-chart-style-01').easyPieChart({ barColor: '#929292', trackColor: '#d9d9d9', scaleColor: false, easing: 'easeOutBounce', scaleLength: 1, lineCap: 'round', lineWidth: 3, //12 size: 150, //110 animate: { duration: 2000, enabled: true }, onStep: function (from, to, percent) { $(this.el).find('.percent').text(Math.round(percent) + '%'); } }); }); }
NoteFor demo, You can please check this in pie-charts.html page.
Portfolio Slider
Beautiful portfolio slider. See below image and code for more information.
<div class="row"> <div class="col-12 hover-option4 margin-5px-bottom"> <div class="swiper" data-slider-options='{ "slidesPerView": "1", "allowTouchMove":true, "spaceBetween":15, "autoplay": { "delay": 3000, "disableOnInteraction": true }, "breakpoints": { "1200": { "slidesPerView": 4 }, "992": { "slidesPerView": 3 }, "768": { "slidesPerView": 2 } }, "navigation": { "nextEl": ".swiper-button-next", "prevEl": ".swiper-button-prev" }, "pagination": { "el": ".swiper-pagination", "clickable": true } }'> <div class="swiper-wrapper"> <!-- start slide item --> <div class="swiper-slide grid-item"> <a href="single-project-page-01.html"> <figure> <div class="portfolio-img bg-extra-dark-gray"><img src="image path" alt=""/></div> <figcaption class="d-flex justify-content-center align-items-center text-center"> <div class="portfolio-hover-content position-relative last-paragraph-no-margin"> <span class="font-weight-600 line-height-normal alt-font text-white-2 text-uppercase margin-5px-bottom d-block">Herbal Beauty Salon</span> <p class="text-medium-gray text-uppercase text-extra-small">Branding and Identity</p> </div> </figcaption> </figure> </a> </div> <!-- end slide item --> <!-- start slide item --> <div class="swiper-slide grid-item"> <a href="single-project-page-02.html"> <figure> <div class="portfolio-img bg-extra-dark-gray"><img src="image path" alt=""/></div> <figcaption class="d-flex justify-content-center align-items-center text-center"> <div class="portfolio-hover-content position-relative last-paragraph-no-margin"> <span class="font-weight-600 line-height-normal alt-font text-white-2 text-uppercase margin-5px-bottom d-block">Herbal Beauty Salon</span> <p class="text-medium-gray text-uppercase text-extra-small">Branding and Identity</p> </div> </figcaption> </figure> </a> </div> <!-- end slide item --> <!-- start slide item --> <div class="swiper-slide grid-item"> <a href="single-project-page-03.html"> <figure> <div class="portfolio-img bg-extra-dark-gray"><img src="image path" alt=""/></div> <figcaption class="d-flex justify-content-center align-items-center text-center"> <div class="portfolio-hover-content position-relative last-paragraph-no-margin"> <span class="font-weight-600 line-height-normal alt-font text-white-2 text-uppercase margin-5px-bottom d-block">Herbal Beauty Salon</span> <p class="text-medium-gray text-uppercase text-extra-small">Branding and Identity</p> </div> </figcaption> </figure> </a> </div> <!-- end slide item --> <!-- start slide item --> <div class="swiper-slide grid-item"> <a href="single-project-page-04.html"> <figure> <div class="portfolio-img bg-extra-dark-gray"><img src="image path" alt=""/></div> <figcaption class="d-flex justify-content-center align-items-center text-center"> <div class="portfolio-hover-content position-relative last-paragraph-no-margin"> <span class="font-weight-600 line-height-normal alt-font text-white-2 text-uppercase margin-5px-bottom d-block">Herbal Beauty Salon</span> <p class="text-medium-gray text-uppercase text-extra-small">Branding and Identity</p> </div> </figcaption> </figure> </a> </div> <!-- end slide item --> </div> <!-- start slider pagination --> <div class="swiper-button-prev swiper-portfolio-prev swiper-button-black-highlight"><i class="ti-arrow-left"></i></div> <div class="swiper-button-next swiper-portfolio-next swiper-button-black-highlight"><i class="ti-arrow-right"></i></div> <!-- end slider pagination --> </div> </div> </div>
NoteFor demo, You can please check this in portfolio-slider page.
Pricing Table
Represent your plans / packages in creative manner with highlighting option in responsive table structure.
<div class="row row-cols-1 row-cols-md-4 row-cols-sm-1 align-items-center"> <!-- start pricing item --> <div class="col-12 col-lg-3 col-md-6 text-center pricing-box-style1 md-margin-30px-bottom wow animate__fadeInUp"> <div class="pricing-box border border-color-extra-light-gray bg-white"> <div class="bg-extra-dark-gray padding-10px-tb alt-font text-white-2 font-weight-600 text-uppercase">Free</div> <div class="bg-light-gray padding-35px-all"> <h4 class="text-extra-dark-gray font-weight-500 mb-0">$0</h4> <div class="text-extra-small text-uppercase margin-5px-top">Per Month</div> </div> <!-- start pricing features --> <div class="padding-30px-all pricing-features md-padding-20px-all sm-padding-30px-all"> <ul class="list-style-11"> <li>1 GB Photos</li> <li>Secure Online Transfer</li> <li>Basic Styles</li> <li>No Customer Service</li> <li>Manual Backup</li> </ul> <!-- start pricing action --> <div class="pricing-action margin-35px-top md-no-margin-top"> <a href="contact-us-simple.html" class="btn btn-transparent-dark-gray btn-very-small text-extra-small">Choose Plan</a> </div> <!-- end pricing action --> </div> <!-- end pricing features --> </div> </div> <!-- end pricing item --> <!-- start pricing item --> <div class="col-12 col-lg-3 col-md-6 text-center pricing-box-style1 md-margin-30px-bottom wow animate__fadeInUp" data-wow-delay="0.2s"> <div class="pricing-box border border-color-extra-light-gray bg-white"> <div class="bg-extra-dark-gray padding-10px-tb alt-font text-white-2 font-weight-600 text-uppercase">Standard</div> <div class="bg-light-gray padding-35px-all"> <h4 class="text-extra-dark-gray font-weight-500 mb-0">$250</h4> <div class="text-extra-small text-uppercase margin-5px-top">Per Month</div> </div> <!-- start pricing features --> <div class="padding-30px-all pricing-features md-padding-20px-all sm-padding-30px-all"> <ul class="list-style-11"> <li>1 GB Photos</li> <li>Secure Online Transfer</li> <li>Unlimited Styles</li> <li>Customer Service</li> <li>Manual Backup</li> </ul> <!-- start pricing action --> <div class="pricing-action margin-35px-top md-no-margin-top"> <a href="contact-us-simple.html" class="btn btn-transparent-dark-gray btn-very-small text-extra-small">Choose Plan</a> </div> <!-- end pricing features --> </div> <!-- end pricing features --> </div> </div> <!-- end pricing item --> <!-- start pricing item --> <div class="col-12 col-lg-3 col-md-6 highlight text-center pricing-box-style1 sm-margin-30px-bottom wow animate__fadeInUp" data-wow-delay="0.4s"> <div class="pricing-box border border-color-extra-light-gray bg-white"> <div class="bg-deep-pink padding-10px-tb alt-font text-white-2 font-weight-600 text-uppercase">Business</div> <div class="bg-light-gray padding-35px-all"> <h4 class="text-extra-dark-gray font-weight-500 mb-0">$350</h4> <div class="text-extra-small text-uppercase margin-5px-top">Per Month</div> </div> <!-- start pricing features --> <div class="padding-30px-all pricing-features md-padding-20px-all sm-padding-30px-all"> <ul class="list-style-11"> <li>2 GB Photos</li> <li>Secure Online Transfer</li> <li>Unlimited Styles</li> <li>Customer Service</li> <li>Manual Backup</li> </ul> <!-- start pricing action --> <div class="pricing-action margin-35px-top md-no-margin-top"> <a href="contact-us-simple.html" class="btn btn-deep-pink btn-very-small text-extra-small">Choose Plan</a> </div> <!-- end pricing action --> </div> <!-- end pricing features --> </div> </div> <!-- end pricing item --> <!-- start pricing item --> <div class="col-12 col-lg-3 col-md-6 text-center pricing-box-style1 wow animate__fadeInUp" data-wow-delay="0.6s"> <div class="pricing-box border border-color-extra-light-gray bg-white"> <div class="bg-extra-dark-gray padding-10px-tb alt-font text-white-2 font-weight-600 text-uppercase">Ultimate</div> <div class="bg-light-gray padding-35px-all"> <h4 class="text-extra-dark-gray font-weight-500 mb-0">$450</h4> <div class="text-extra-small text-uppercase margin-5px-top">Per Month</div> </div> <!-- start pricing features --> <div class="padding-30px-all pricing-features md-padding-20px-all sm-padding-30px-all"> <ul class="list-style-11"> <li>Unlimited Photos</li> <li>Secure Online Transfer</li> <li>Unlimited Styles</li> <li>Customer Service</li> <li>Auto Backup</li> </ul> <!-- start pricing action --> <div class="pricing-action margin-35px-top md-no-margin-top"> <a href="contact-us-simple.html" class="btn btn-transparent-dark-gray btn-very-small text-extra-small">Choose Plan</a> </div> <!-- end pricing action --> </div> <!-- end pricing features --> </div> </div> <!-- end pricing item --> </div>
NoteFor demo, You can please check this in pricing-table.html page.
Progress Bar
Up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars. See below image and code for more information.
<!-- start progress bar --> <div class="progress progress-step-style-03 bg-transparent-black-very-light rounded-0 margin-55px-bottom"> <span class="progress-title text-extra-small text-uppercase text-dark-gray">Jquery - 4 years Experience</span> <div class="progress-bar bg-extra-dark-gray rounded-0" role="progressbar" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100"></div> <span class="progress-bar-percent text-small">92%</span> </div> <!-- end progress bar --> <!-- start progress bar --> <div class="progress progress-step-style-03 bg-transparent-black-very-light rounded-0 margin-55px-bottom"> <span class="progress-title text-extra-small text-uppercase text-dark-gray">Wordpress - 6 years Experience</span> <div class="progress-bar bg-extra-dark-gray rounded-0" role="progressbar" aria-valuenow="97" aria-valuemin="0" aria-valuemax="100"></div> <span class="progress-bar-percent text-small">97%</span> </div> <!-- end progress bar --> <!-- start progress bar --> <div class="progress progress-step-style-03 bg-transparent-black-very-light rounded-0 margin-55px-bottom"> <span class="progress-title text-extra-small text-uppercase text-dark-gray">HTML5 - 5 years Experience</span> <div class="progress-bar bg-extra-dark-gray rounded-0" role="progressbar" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100"></div> <span class="progress-bar-percent text-small">98%</span> </div> <!-- end progress bar --> <!-- start progress bar --> <div class="progress progress-step-style-03 bg-transparent-black-very-light rounded-0"> <span class="progress-title text-extra-small text-uppercase text-dark-gray">Photography - 6 years Experience</span> <div class="progress-bar bg-extra-dark-gray rounded-0" role="progressbar" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100"></div> <span class="progress-bar-percent text-small">92%</span> </div> <!-- end progress bar -->
NoteFor demo, You can please check this in process-bar.html page.
Process Steps
Process steps feature for process tracking system in your website with amazing styles and attractive look. See below image and code for more information.
<!-- start process step section --> <div class="row justify-content-center"> <!-- start process step item --> <div class="col-12 col-md-4 col-sm-8 text-center feature-box-10 sm-margin-seven-bottom wow animate__fadeInUp last-paragraph-no-margin"> <div class="d-inline-block padding-five-all margin-10px-bottom"> <span class="number alt-font border-width-2 border-all border-color-deep-pink rounded-circle letter-spacing-minus-1 text-extra-dark-gray">01</span> </div> <div class="alt-font text-medium text-extra-dark-gray margin-10px-bottom">Discussion of the Idea</div> <p class="w-75 lg-w-85 md-w-90 mx-auto">Lorem Ipsum is simply text of the printing and typesetting industry. Lorem Ipsum has been standard dummy.</p> </div> <!-- end process step item --> <!-- start process step item --> <div class="col-12 col-md-4 col-sm-8 text-center feature-box-10 sm-margin-seven-bottom wow animate__fadeInUp last-paragraph-no-margin" data-wow-delay="0.2s"> <div class="d-inline-block padding-five-all margin-10px-bottom"> <span class="number number-center alt-font border-width-2 border-all border-color-deep-pink rounded-circle letter-spacing-minus-1 text-extra-dark-gray">02</span> </div> <div class="alt-font text-medium text-extra-dark-gray margin-10px-bottom">Handcrafted Templates</div> <p class="w-75 lg-w-85 md-w-90 mx-auto">Lorem Ipsum is simply text of the printing and typesetting industry. Lorem Ipsum has been standard dummy.</p> </div> <!-- end process step item --> <!-- start process step item --> <div class="col-12 col-md-4 col-sm-8 text-center feature-box-10 wow animate__fadeInUp last-paragraph-no-margin" data-wow-delay="0.4s"> <div class="d-inline-block padding-five-all margin-10px-bottom"> <span class="number alt-font border-width-2 border-all border-color-deep-pink rounded-circle letter-spacing-minus-1 text-extra-dark-gray">03</span> </div> <div class="alt-font text-medium text-extra-dark-gray margin-10px-bottom">Testing for Perfection</div> <p class="w-75 lg-w-85 md-w-90 mx-auto">Lorem Ipsum is simply text of the printing and typesetting industry. Lorem Ipsum has been standard dummy.</p> </div> <!-- end process step item --> </div> <!-- end process step section -->
NoteFor demo, You can please check this in process-steps.html page.
Retina Image
When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place.
For example, if you have an image on your page that looks like this:
<img src="/images/my_image.png" />
The script will check your server to see if an alternative image exists at this path:
"/images/my_image@2x.png"
NoteReference on retinajs
Rotate Box
Attractive and useful rotate box for your website. See below image and code for more information.
<!-- start rotate box section --> <div class="row justify-content-center"> <!-- start rotate box item --> <div class="col-12 col-lg-4 col-md-6 col-sm-8 position-relative feature-box-12 md-padding-35px-tb wow animate__fadeInRight"> <div class="feature-icon-box icon-medium text-medium-gray bg-white"> <i aria-hidden="true" class="icon-grid"></i> </div> <div class="feature-content-box padding-30px-left"> <div class="alt-font text-extra-dark-gray text-medium">Advanced Grid</div> <div>Shortcode subtitle</div> </div> <div class="hover-content-box padding-35px-all"> <div class="alt-font text-very-light-gray margin-5px-bottom">Advanced Grid</div> <div>Lorem Ipsum is simply text the printing and typesetting standard.</div> </div> </div> <!-- end rotate box item --> <!-- start rotate box item --> <div class="col-12 col-lg-4 col-md-6 col-sm-8 position-relative feature-box-12 md-padding-35px-tb wow animate__fadeInRight" data-wow-delay="0.2s"> <div class="feature-icon-box icon-medium text-medium-gray bg-white"> <i aria-hidden="true" class="icon-video"></i> </div> <div class="feature-content-box padding-30px-left"> <div class="alt-font text-extra-dark-gray text-medium">Top Performance</div> <div>Shortcode subtitle</div> </div> <div class="hover-content-box padding-35px-all"> <div class="alt-font text-very-light-gray margin-5px-bottom">Top Performance</div> <div>Lorem Ipsum is simply text the printing and typesetting standard.</div> </div> </div> <!-- end rotate box item --> <!-- start rotate box item --> <div class="col-12 col-lg-4 col-md-6 col-sm-8 position-relative feature-box-12 md-padding-35px-tb wow animate__fadeInRight" data-wow-delay="0.4s"> <div class="feature-icon-box icon-medium text-medium-gray bg-white"> <i aria-hidden="true" class="icon-mobile"></i> </div> <div class="feature-content-box padding-30px-left"> <div class="no-margin alt-font text-extra-dark-gray text-medium">Responsive Design</div> <div class="no-margin">Shortcode subtitle</div> </div> <div class="hover-content-box padding-35px-all"> <div class="alt-font text-very-light-gray margin-5px-bottom">Responsive Design</div> <div>Lorem Ipsum is simply text the printing and typesetting standard.</div> </div> </div> <!-- end rotate box item --> </div> <!-- end rotate box section -->
NoteFor demo, You can please check this in rotate-box.html page.
separators
Add separators in content or in between blocks or sections. See below image and code for more information.
<!-- start separator line --> <div class="separator-line-horrizontal-full bg-extra-light-gray margin-60px-bottom w-100"></div> <!-- end separator line --> <div class="separator-line-horrizontal-full bg-extra-light-gray margin-60px-tb h-2px w-80 mx-auto"></div> <!-- start separator line --> <div class="separator-line-horrizontal-full bg-extra-light-gray margin-60px-tb h-3px w-60 mx-auto"></div> <!-- end separator line --> <div class="separator-line-horrizontal-full bg-extra-light-gray margin-60px-tb h-5px w-40 mx-auto"></div> <!-- start separator line --> <div class="separator-line-horrizontal-full bg-extra-light-gray margin-60px-top h-6px w-20 mx-auto"></div> <!-- end separator line -->
NoteFor demo, You can please check this in seperators.html page.
Services
Services element with creative look. See below image and code for more information.
<div class="row justify-content-center"> <!-- start services item --> <div class="col-12 col-lg-4 col-md-6 col-sm-9 md-margin-40px-bottom"> <div class="margin-ten-bottom overflow-hidden image-hover-style-1 md-margin-30px-bottom"> <a href="#"><img src="image path" alt=""/></a> </div> <a href="#" class="alt-font margin-5px-bottom d-block text-extra-dark-gray font-weight-600 text-uppercase text-small">E-Commerce Solutions</a> <p class="w-95 xl-w-100">Lorem Ipsum is simply text the printing and typesetting standard industry. Lorem Ipsum has been the industry's standard dummy text.</p> <div class="border-top border-color-extra-light-gray padding-20px-top sm-padding-15px-top"> <a href="#" class="text-uppercase alt-font text-extra-dark-gray font-weight-600 text-extra-small">View E-Commerce Solutions <i class="fa-solid fa-arrow-right-long margin-5px-left text-deep-pink text-medium position-relative top-2" aria-hidden="true"></i></a> </div> </div> <!-- end services item --> <!-- start services item --> <div class="col-12 col-lg-4 col-md-6 col-sm-9 md-margin-40px-bottom"> <div class="margin-ten-bottom overflow-hidden image-hover-style-1 md-margin-30px-bottom"> <a href="#"><img src="image path" alt=""/></a> </div> <a href="#" class="alt-font margin-5px-bottom d-block text-extra-dark-gray font-weight-600 text-uppercase text-small">Web Development</a> <p class="w-95 xl-w-100">Lorem Ipsum is simply text the printing and typesetting standard industry. Lorem Ipsum has been the industry's standard dummy text.</p> <div class="border-top border-color-extra-light-gray padding-20px-top sm-padding-15px-top"> <a href="#" class="text-uppercase alt-font text-extra-dark-gray font-weight-600 text-extra-small">View Web Development <i class="fa-solid fa-arrow-right-long margin-5px-left text-deep-pink text-medium position-relative top-2" aria-hidden="true"></i></a> </div> </div> <!-- end services item --> <!-- start services item --> <div class="col-12 col-lg-4 col-md-6 col-sm-9"> <div class="margin-ten-bottom overflow-hidden image-hover-style-1 md-margin-30px-bottom"> <a href="#"><img src="image path" alt=""/></a> </div> <a href="#" class="alt-font margin-5px-bottom d-block text-extra-dark-gray font-weight-600 text-uppercase text-small">Marketing Strategy</a> <p class="w-95 xl-w-100">Lorem Ipsum is simply text the printing and typesetting standard industry. Lorem Ipsum has been the industry's standard dummy text.</p> <div class="border-top border-color-extra-light-gray padding-20px-top sm-padding-15px-top"> <a href="#" class="text-uppercase alt-font text-extra-dark-gray font-weight-600 text-extra-small">View Marketing Strategy <i class="fa-solid fa-arrow-right-long margin-5px-left text-deep-pink text-medium position-relative top-2" aria-hidden="true"></i></a> </div> </div> <!-- end services item --> </div>
NoteFor demo, You can please check this in services.html page.
Social Icons
Social links with different styles. See below image and code for more information.
<!-- start social icons --> <div class="text-center elements-social social-icon-style-1"> <ul class="medium-icon"> <li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i></a></li> <li><a class="twitter" href="http://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a></li> <li><a class="google" href="http://www.google.com" target="_blank"><i class="fa-brands fa-google-plus-g"></i></a></li> <li><a class="dribbble" href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble"></i></a></li> </ul> </div> <!-- end social icons -->
NoteFor demo, You can please check this in social-icons.html page.
Subscribe
Provide a full component for subscribe form with action button and instruction tag line with privacy policy links etc... See below image and code for more information.
<!-- start subscribe section --> <div class="row justify-content-center"> <div class="col-12 col-lg-8 text-center"> <h4 class="alt-font font-weight-600 text-extra-dark-gray">Subscribe to our newsletter</h4> <p class="w-65 mx-auto md-w-100"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text.</p> <form action="email-templates/subscribe-newsletter.php" method="post" class="position-relative"> <div class="mx-0 form-results"></div> <div class="input-group margin-40px-tb"> <input name="email" id="email" type="email" placeholder="* Email Address" class="extra-big-input border-none form-control required" /> <div class="input-group-append"> <button type="submit" class="btn btn-large bg-white text-deep-pink submit"><i class="ti-email icon-small m-0"></i></button> </div> </div> </form> <span class="text-extra-small">* We don't share your personal info with anyone. Check out our <a href="#" class="text-decoration-underline">Privacy Policy</a> for more information.</span> </div> </div> <!-- end subscribe section -->
NoteFor demo, You can please check this in subscribe.html page.
Tab
Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus. You can activate a tab navigation without writing any JavaScript by simply specifying data-bs-toggle="tab"
on an element. Adding the nav
and nav-tabs
classes to the tab ul
will apply the Bootstrap tab styling.
<div class="container tab-style2"> <div class="row justify-content-center"> <div class="col-12 col-lg-7 text-center margin-100px-bottom sm-margin-40px-bottom"> <div class="position-relative overflow-hidden w-100"> <span class="text-small text-outside-line-full alt-font font-weight-600 text-uppercase">Tab Style 01</span> </div> </div> </div> <div class="row"> <div class="col-12"> <!-- start tab navigation --> <ul class="nav nav-tabs alt-font text-uppercase text-small text-center font-weight-600 justify-content-center"> <li class="nav-item"><a class="nav-link active" href="#tab_sec1" data-bs-toggle="tab">Design & Craft</a></li> <li class="nav-item"><a class="nav-link" href="#tab_sec2" data-bs-toggle="tab">Development</a></li> <li class="nav-item"><a class="nav-link" href="#tab_sec3" data-bs-toggle="tab">Branding</a></li> <li class="nav-item"><a class="nav-link" href="#tab_sec4" data-bs-toggle="tab">Brainstorming</a></li> </ul> <!-- end tab navigation --> </div> </div> <div class="tab-content"> <!-- start tab content --> <div class="tab-pane med-text fade in active show" id="tab_sec1"> <div class="row align-items-center"> <div class="col-12 col-md-6 sm-margin-30px-bottom"> <img src="images/about-img10.jpg" alt="" class="w-100"/> </div> <div class="col-12 col-lg-5 col-md-6 offset-lg-1"> <h6 class="alt-font font-weight-700 text-extra-dark-gray margin-20px-bottom text-uppercase">Design & Craft</h6> <span class="text-extra-large text-extra-dark-gray margin-20px-bottom d-block">We use different types of massage for a variety of health related benefits purposes.</span> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <a href="javascript:void(0);" class="btn btn-small btn-rounded btn-dark-gray">Explore services</a> </div> </div> </div> <!-- end tab content --> <!-- start tab content --> <div class="tab-pane fade in" id="tab_sec2"> <div class="row align-items-center"> <div class="col-12 col-md-6 sm-margin-30px-bottom"> <img src="images/about-img11.jpg" alt="" class="w-100"/> </div> <div class="col-12 col-lg-5 col-md-6 offset-lg-1"> <h6 class="alt-font font-weight-700 text-extra-dark-gray margin-20px-bottom text-uppercase">Development</h6> <span class="text-extra-large text-extra-dark-gray margin-20px-bottom d-block">We use different types of massage for a variety of health related benefits purposes.</span> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <a href="javascript:void(0);" class="btn btn-small btn-rounded btn-dark-gray">Explore services</a> </div> </div> </div> <!-- end tab content --> <!-- start tab content --> <div class="tab-pane fade in" id="tab_sec3"> <div class="row align-items-center"> <div class="col-12 col-md-6 sm-margin-30px-bottom"> <img src="images/about-img12.jpg" alt="" class="w-100"/> </div> <div class="col-12 col-lg-5 col-md-6 offset-lg-1"> <h6 class="alt-font font-weight-700 text-extra-dark-gray margin-20px-bottom text-uppercase">Branding</h6> <span class="text-extra-large text-extra-dark-gray margin-20px-bottom d-block">We use different types of massage for a variety of health related benefits purposes.</span> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <a href="javascript:void(0);" class="btn btn-small btn-rounded btn-dark-gray">Explore services</a> </div> </div> </div> <!-- end tab content --> <!-- start tab content --> <div class="tab-pane fade in" id="tab_sec4"> <div class="row align-items-center"> <div class="col-12 col-md-6 sm-margin-30px-bottom"> <img src="images/about-img13.jpg" alt=""/> </div> <div class="col-12 col-lg-5 col-md-6 offset-lg-1"> <h6 class="alt-font font-weight-700 text-extra-dark-gray margin-20px-bottom text-uppercase">Brainstorming</h6> <span class="text-extra-large text-extra-dark-gray margin-20px-bottom d-block">We use different types of massage for a variety of health related benefits purposes.</span> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <a href="javascript:void(0);" class="btn btn-small btn-rounded btn-dark-gray">Explore services</a> </div> </div> </div> <!-- end tab content --> </div> </div>
NoteFor demo, You can please check this in tab.html page.
Team
Team members view with image and social links and description. See below image and code for more information.
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 justify-content-center"> <!-- start team item --> <div class="col team-block text-start team-style-1 sm-margin-ten-bottom wow animate__fadeInUp"> <figure> <div class="team-image sm-w-100"> <img src="image path" alt=""> <div class="overlay-content text-center d-flex align-items-center justify-content-center"> <div class="icon-social-small"> <a href="http://facebook.com" target="_blank" class="text-white-2 text-white-2-hover"><i class="fa-brands fa-facebook-f"></i></a> <a href="http://twitter.com" target="_blank" class="text-white-2 text-white-2-hover"><i class="fa-brands fa-twitter"></i></a> <a href="http://plus.google.com" target="_blank" class="text-white-2 text-white-2-hover"><i class="fa-brands fa-google-plus-g"></i></a> <a href="http://instagram.com" target="_blank" class="text-white-2 text-white-2-hover"><i class="fa-brands fa-instagram"></i></a> </div> </div> <div class="team-overlay bg-deep-pink opacity8"></div> </div> <figcaption> <div class="team-member-position margin-20px-top text-center"> <div class="text-small font-weight-500 text-extra-dark-gray text-uppercase">Hugh Macleod</div> <div class="text-extra-small text-uppercase text-medium-gray">Creative Director</div> </div> </figcaption> </figure> </div> <!-- end team item --> <!-- start team item --> <div class="col team-block text-start team-style-1 sm-margin-ten-bottom wow animate__fadeInUp" data-wow-delay="0.2s"> <figure> <div class="team-image sm-w-100"> <img src="image path" alt=""> <div class="overlay-content text-center d-flex align-items-center justify-content-center"> <div class="icon-social-small"> <a href="http://facebook.com" target="_blank" class="text-white-2 text-white-2-hover"><i class="fa-brands fa-facebook-f"></i></a> <a href="http://twitter.com" target="_blank" class="text-white-2 text-white-2-hover"><i class="fa-brands fa-twitter"></i></a> <a href="http://plus.google.com" target="_blank" class="text-white-2 text-white-2-hover"><i class="fa-brands fa-google-plus-g"></i></a> <a href="http://instagram.com" target="_blank" class="text-white-2 text-white-2-hover"><i class="fa-brands fa-instagram"></i></a> </div> </div> <div class="team-overlay bg-deep-pink opacity8"></div> </div> <figcaption> <div class="team-member-position margin-20px-top text-center"> <div class="text-small font-weight-500 text-extra-dark-gray text-uppercase">Jeremy Dupont</div> <div class="text-extra-small text-uppercase text-medium-gray">Creative Director</div> </div> </figcaption> </figure> </div> <!-- end team item --> <!-- start team item --> <div class="col team-block text-start team-style-1 sm-margin-ten-bottom wow animate__fadeInUp" data-wow-delay="0.4s"> <figure> <div class="team-image sm-w-100"> <img src="image path" alt=""> <div class="overlay-content text-center d-flex align-items-center justify-content-center"> <div class="icon-social-small"> <a href="http://facebook.com" target="_blank" class="text-white-2 text-white-2-hover"><i class="fa-brands fa-facebook-f"></i></a> <a href="http://twitter.com" target="_blank" class="text-white-2 text-white-2-hover"><i class="fa-brands fa-twitter"></i></a> <a href="http://plus.google.com" target="_blank" class="text-white-2 text-white-2-hover"><i class="fa-brands fa-google-plus-g"></i></a> <a href="http://instagram.com" target="_blank" class="text-white-2 text-white-2-hover"><i class="fa-brands fa-instagram"></i></a> </div> </div> <div class="team-overlay bg-deep-pink opacity8"></div> </div> <figcaption> <div class="team-member-position margin-20px-top text-center"> <div class="text-small font-weight-500 text-extra-dark-gray text-uppercase">Sara Smith</div> <div class="text-extra-small text-uppercase text-medium-gray">Creative Studio Head</div> </div> </figcaption> </figure> </div> <!-- end team item --> </div>
NoteFor demo, You can please check this in team.html page.
Team Carousel
Team carousel is simply a team view in slider mode. See below image and code for more information.
<div class="row"> <div class="col-12"> <div class="swiper black-move swiper-pagination-bottom" data-slider-options='{ "loop": false, "spaceBetween": 30, "autoplay": { "delay": 3000, "disableOnInteraction": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "navigation": { "nextEl": ".swiper-button-next", "prevEl": ".swiper-button-prev" }, "pagination": { "el": ".swiper-pagination", "clickable": true }, "breakpoints": { "1200": { "slidesPerView": 4 }, "992": { "slidesPerView": 3 }, "768": { "slidesPerView": 2 } }, "slidesPerView": "1" }'> <div class="swiper-wrapper"> <!-- start team item --> <div class="swiper-slide team-block team-style-1 wow animate__fadeInUp"> <figure> <div class="team-image sm-w-100"> <img src="image path" alt=""> <div class="overlay-content text-center d-flex align-items-center justify-content-center"> <div class="icon-social-small"> <a href="http://www.facebook.com" class="text-white-2 text-white-2-hover" target="_blank"><i class="fa-brands fa-facebook-f"></i></a> <a href="http://www.twitter.com" class="text-white-2 text-white-2-hover" target="_blank"><i class="fa-brands fa-twitter"></i></a> <a href="http://www.plus.google.com" class="text-white-2 text-white-2-hover" target="_blank"><i class="fa-brands fa-google-plus-g"></i></a> <a href="http://www.instagram.com" class="text-white-2 text-white-2-hover" target="_blank"><i class="fa-brands fa-instagram"></i></a> </div> </div> <div class="team-overlay bg-deep-pink opacity8"></div> </div> <figcaption> <div class="team-member-position margin-20px-top text-center"> <div class="text-small font-weight-500 text-extra-dark-gray text-uppercase">Hugh Macleod</div> <div class="text-extra-small text-uppercase text-medium-gray">Creative Director</div> </div> </figcaption> </figure> </div> <!-- end team item --> <!-- start team item --> <div class="swiper-slide team-block team-style-1 wow animate__fadeInUp" data-wow-delay="0.2s"> <figure> <div class="team-image sm-w-100"> <img src="image path" alt=""> <div class="overlay-content text-center d-flex align-items-center justify-content-center"> <div class="icon-social-small"> <a href="http://www.facebook.com" class="text-white-2 text-white-2-hover" target="_blank"><i class="fa-brands fa-facebook-f"></i></a> <a href="http://www.twitter.com" class="text-white-2 text-white-2-hover" target="_blank"><i class="fa-brands fa-twitter"></i></a> <a href="http://www.plus.google.com" class="text-white-2 text-white-2-hover" target="_blank"><i class="fa-brands fa-google-plus-g"></i></a> <a href="http://www.instagram.com" class="text-white-2 text-white-2-hover" target="_blank"><i class="fa-brands fa-instagram"></i></a> </div> </div> <div class="team-overlay bg-deep-pink opacity8"></div> </div> <figcaption> <div class="team-member-position margin-20px-top text-center"> <div class="text-small font-weight-500 text-extra-dark-gray text-uppercase">Jeremy Dupont</div> <div class="text-extra-small text-uppercase text-medium-gray">Creative Director</div> </div> </figcaption> </figure> </div> <!-- end team item --> <!-- start team item --> <div class="swiper-slide team-block team-style-1 wow animate__fadeInUp" data-wow-delay="0.4s"> <figure> <div class="team-image sm-w-100"> <img src="image path" alt=""> <div class="overlay-content text-center d-flex align-items-center justify-content-center"> <div class="icon-social-small"> <a href="http://www.facebook.com" class="text-white-2 text-white-2-hover" target="_blank"><i class="fa-brands fa-facebook-f"></i></a> <a href="http://www.twitter.com" class="text-white-2 text-white-2-hover" target="_blank"><i class="fa-brands fa-twitter"></i></a> <a href="http://www.plus.google.com" class="text-white-2 text-white-2-hover" target="_blank"><i class="fa-brands fa-google-plus-g"></i></a> <a href="http://www.instagram.com" class="text-white-2 text-white-2-hover" target="_blank"><i class="fa-brands fa-instagram"></i></a> </div> </div> <div class="team-overlay bg-deep-pink opacity8"></div> </div> <figcaption> <div class="team-member-position margin-20px-top text-center"> <div class="text-small font-weight-500 text-extra-dark-gray text-uppercase">Sara Smith</div> <div class="text-extra-small text-uppercase text-medium-gray">Creative Studio Head</div> </div> </figcaption> </figure> </div> <!-- end team item --> <!-- start team item --> <div class="swiper-slide team-block team-style-1 wow animate__fadeInUp" data-wow-delay="0.6s"> <figure> <div class="team-image sm-w-100"> <img src="image path" alt=""> <div class="overlay-content text-center d-flex align-items-center justify-content-center"> <div class="icon-social-small"> <a href="http://www.facebook.com" class="text-white-2 text-white-2-hover" target="_blank"><i class="fa-brands fa-facebook-f"></i></a> <a href="http://www.twitter.com" class="text-white-2 text-white-2-hover" target="_blank"><i class="fa-brands fa-twitter"></i></a> <a href="http://www.plus.google.com" class="text-white-2 text-white-2-hover" target="_blank"><i class="fa-brands fa-google-plus-g"></i></a> <a href="http://www.instagram.com" class="text-white-2 text-white-2-hover" target="_blank"><i class="fa-brands fa-instagram"></i></a> </div> </div> <div class="team-overlay bg-deep-pink opacity8"></div> </div> <figcaption> <div class="team-member-position margin-20px-top text-center"> <div class="text-small font-weight-500 text-extra-dark-gray text-uppercase">Bill Gardner</div> <div class="text-extra-small text-uppercase text-medium-gray">Co-Founder / Design</div> </div> </figcaption> </figure> </div> <!-- end team item --> <!-- start team item --> <div class="swiper-slide team-block team-style-1 wow animate__fadeInUp"> <figure> <div class="team-image sm-w-100"> <img src="image path" alt=""> <div class="overlay-content text-center d-flex align-items-center justify-content-center"> <div class="icon-social-small"> <a href="http://www.facebook.com" class="text-white-2 text-white-2-hover" target="_blank"><i class="fa-brands fa-facebook-f"></i></a> <a href="http://www.twitter.com" class="text-white-2 text-white-2-hover" target="_blank"><i class="fa-brands fa-twitter"></i></a> <a href="http://www.plus.google.com" class="text-white-2 text-white-2-hover" target="_blank"><i class="fa-brands fa-google-plus-g"></i></a> <a href="http://www.instagram.com" class="text-white-2 text-white-2-hover" target="_blank"><i class="fa-brands fa-instagram"></i></a> </div> </div> <div class="team-overlay bg-deep-pink opacity8"></div> </div> <figcaption> <div class="team-member-position margin-20px-top text-center"> <div class="text-small font-weight-500 text-extra-dark-gray text-uppercase">Hugh Macleod</div> <div class="text-extra-small text-uppercase text-medium-gray">Creative Director</div> </div> </figcaption> </figure> </div> <!-- end team item --> </div> <div class="swiper-pagination"></div> </div> </div> </div>
NoteFor demo, You can please check this in team-carousel.html page.
Text slider
Functionality to make slider of any text content with attractive look. See below image and code for more information.
<!-- start slider --> <div class="swiper-number-pagination swiper black-move h-650px md-h-550px sm-h-300px" data-slider-options='{ "allowTouchMove":true, "autoplay": { "delay": 4000, "disableOnInteraction": true }, "pagination": { "el": ".swiper-number", "clickable": true} }' data-slider-number-pagination="1"> <div class="bg-transparent-white opacity-full-dark z-index-5 d-none d-lg-block"></div> <div class="swiper-wrapper"> <!-- start slider item --> <div class="swiper-slide"> <div class="row h-100"> <div class="col-12 d-flex justify-content-center flex-column bg-white"> <span class="text-extra-large text-middle-line font-weight-300 text-deep-pink d-block margin-two-bottom w-50 sm-w-65">Creativity and Design</span> <h2 class="text-extra-dark-gray w-50 d-inline-block font-weight-300 letter-spacing-minus-1 lg-w-70 sm-w-80">We're a design studio that believe in the ideas.</h2> </div> </div> </div> <!-- end slider item --> <!-- start slider item --> <div class="swiper-slide"> <div class="row h-100"> <div class="col-12 d-flex justify-content-center flex-column bg-white"> <span class="text-extra-large text-middle-line font-weight-300 text-deep-pink d-block margin-two-bottom w-50 sm-w-65">Identities and Experiences</span> <h2 class="text-extra-dark-gray w-50 d-inline-block font-weight-300 letter-spacing-minus-1 lg-w-70 sm-w-80">We're an independent web design agency.</h2> </div> </div> </div> <!-- end slider item --> <!-- start slider item --> <div class="swiper-slide"> <div class="row h-100"> <div class="col-12 d-flex justify-content-center flex-column bg-white"> <span class="text-extra-large text-middle-line font-weight-300 text-deep-pink d-block margin-two-bottom w-50 sm-w-65">Elevate and Empower</span> <h2 class="text-extra-dark-gray w-50 d-inline-block font-weight-300 letter-spacing-minus-1 lg-w-70 sm-w-80">We are a design & development agency.</h2> </div> </div> </div> <!-- end slider item --> </div> <div class="swiper-pagination swiper-number"></div> </div> <!-- end slider -->
NoteFor demo, You can please check this in text-slider.html page.
Text box
Text box with attractive look. See below image and code for more information.
<div class="row row-cols-1 row-cols-lg-4 row-cols-sm-2 feature-box feature-box-17 m-sm-0"> <!-- start feature item --> <div class="col md-margin-30px-bottom xs-margin-15px-bottom wow animate__fadeInLeft last-paragraph-no-margin"> <div class="box bg-extra-dark-gray text-extra-dark-gray text-white-2-hover"> <div class="content"> <figure> <i class="ti-crown icon-extra-medium text-deep-pink margin-20px-bottom"></i> <span class="text-large alt-font d-block margin-10px-bottom text-white-2">Creative Elements</span> <div class="details"> <p class="w-65 md-w-90 sm-w-85 mx-auto text-white-2">Lorem Ipsum is simply dummy text of the printing typesetting industry.</p> </div> </figure> </div> </div> </div> <!-- end feature item --> <!-- start feature item --> <div class="col md-margin-30px-bottom xs-margin-15px-bottom wow animate__fadeInLeft last-paragraph-no-margin"> <div class="box bg-extra-dark-gray text-extra-dark-gray text-white-2-hover"> <div class="content"> <figure> <i class="ti-cup icon-extra-medium text-deep-pink margin-20px-bottom"></i> <span class="text-large alt-font d-block margin-10px-bottom text-white-2">Unique Shortcodes</span> <div class="details"> <p class="w-65 md-w-90 sm-w-85 mx-auto text-white-2">Lorem Ipsum is simply dummy text of the printing typesetting industry.</p> </div> </figure> </div> </div> </div> <!-- end feature item --> <!-- start feature item --> <div class="col xs-margin-15px-bottom wow animate__fadeInLeft last-paragraph-no-margin"> <div class="box bg-extra-dark-gray text-extra-dark-gray text-white-2-hover"> <div class="content"> <figure> <i class="ti-gift icon-extra-medium text-deep-pink margin-20px-bottom"></i> <span class="text-large alt-font d-block margin-10px-bottom text-white-2">Friendly Support</span> <div class="details"> <p class="w-65 md-w-90 sm-w-85 mx-auto text-white-2">Lorem Ipsum is simply dummy text of the printing typesetting industry.</p> </div> </figure> </div> </div> </div> <!-- end feature item --> <!-- start feature item --> <div class="col wow animate__fadeInLeft last-paragraph-no-margin"> <div class="box bg-extra-dark-gray text-extra-dark-gray text-white-2-hover"> <div class="content"> <figure> <i class="ti-bar-chart icon-extra-medium text-deep-pink margin-20px-bottom"></i> <span class="text-large alt-font d-block margin-10px-bottom text-white-2">Unlimited Layouts</span> <div class="details"> <p class="w-65 md-w-90 mx-auto text-white-2">Lorem Ipsum is simply dummy text of the printing typesetting industry.</p> </div> </figure> </div> </div> </div> <!-- end feature item --> </div>
NoteFor demo, You can please check this in text-box.html page.
Testimonials
Different testimonials style with awesome look. See below image and code for more information.
<div class="row justify-content-center"> <!-- start testimonial item --> <div class="col-12 col-lg-4 col-md-6 col-sm-8 md-margin-two-bottom wow animate__fadeIn last-paragraph-no-margin testimonial-style3"> <div class="testimonial-content-box padding-twelve-all bg-white border-radius-6 box-shadow arrow-bottom lg-padding-nine-all md-padding-eight-all"> I wanted to hire the best and after looking at several other companies, I knew Jacob was the perfect guy for the job. He is a true professional. </div> <div class="testimonial-box padding-25px-all sm-padding-20px-all"> <div class="image-box w-20"><img src="image path" class="rounded-circle" alt=""></div> <div class="name-box padding-20px-left"> <div class="alt-font font-weight-600 text-small text-uppercase text-extra-dark-gray">Shoko Mugikura</div> <p class="text-extra-small text-uppercase text-medium-gray">Graphic Designer</p> </div> </div> </div> <!-- end testimonial item --> <!-- start testimonial item --> <div class="col-12 col-lg-4 col-md-6 col-sm-8 md-margin-two-bottom wow animate__fadeIn last-paragraph-no-margin testimonial-style3" data-wow-delay="0.2s"> <div class="testimonial-content-box padding-twelve-all bg-white border-radius-6 box-shadow arrow-bottom lg-padding-nine-all md-padding-eight-all"> This is an excellent company! I personally enjoyed the energy and the professional support the whole team gave to us into creating website. </div> <div class="testimonial-box padding-25px-all sm-padding-20px-all"> <div class="image-box w-20"><img src="image path" class="rounded-circle" alt=""></div> <div class="name-box padding-20px-left"> <div class="alt-font font-weight-600 text-small text-uppercase text-extra-dark-gray">Alexander Harvard</div> <p class="text-extra-small text-uppercase text-medium-gray">Creative Director</p> </div> </div> </div> <!-- end testimonial item --> <!-- start testimonial item --> <div class="col-12 col-lg-4 col-md-6 col-sm-8 wow animate__fadeIn last-paragraph-no-margin testimonial-style3" data-wow-delay="0.4s"> <div class="testimonial-content-box padding-twelve-all bg-white border-radius-6 box-shadow arrow-bottom lg-padding-nine-all md-padding-eight-all"> Their team are easy to work with and helped me make amazing websites in a short amount of time. Thanks again guys for all your hard work. </div> <div class="testimonial-box padding-25px-all sm-padding-20px-all"> <div class="image-box w-20"><img src="image path" class="rounded-circle" alt=""></div> <div class="name-box padding-20px-left"> <div class="alt-font font-weight-600 text-small text-uppercase text-extra-dark-gray">Herman Miller</div> <p class="text-extra-small text-uppercase text-medium-gray">Co Founder / CEO</p> </div> </div> </div> <!-- end testimonial item --> </div>
NoteFor demo, You can please check this in testimonials.html page.
Testimonial Carousel
Testimonial with attractive look in carousel mode. See below image and code for more information.
<div class="row position-relative justify-content-center"> <div class="col-12 col-md-12 col-sm-9"> <div class="swiper swiper-pagination-bottom black-move blog-slider" data-slider-options='{ "slidesPerView": "1", "allowTouchMove":true, "loop":false, "spaceBetween": 30, "autoplay": { "delay": 3000, "disableOnInteraction": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "navigation": { "nextEl": ".swiper-button-next-1", "prevEl": ".swiper-button-prev-1" }, "breakpoints": { "992": { "slidesPerView": 3 }, "768": { "slidesPerView": 2 } }, "pagination": { "el": ".swiper-pagination-1", "clickable": true } }'> <div class="swiper-wrapper"> <!-- start testimonial item --> <div class="swiper-slide"> <div class="margin-half-all bg-white box-shadow-light text-center padding-fourteen-all sm-padding-30px-all"> <img src="image path" class="rounded-circle w-110px h-110px margin-25px-bottom md-margin-15px-bottom" alt=""/> <p class="md-margin-15px-bottom sm-margin-20px-bottom">I wanted to hire the best and after looking at several other companies, I knew Jacob was the perfect guy for the job. He is a true professional.</p> <span class="text-extra-dark-gray text-small text-uppercase d-block line-height-10 alt-font font-weight-600">Shoko Mugikura</span> <span class="text-light-gray2 text-extra-small text-uppercase text-medium-gray">Design Manager</span> </div> </div> <!-- end testimonial item --> <!-- start testimonial item --> <div class="swiper-slide"> <div class="margin-half-all bg-white box-shadow-light text-center padding-fourteen-all sm-padding-30px-all"> <img src="image path" class="rounded-circle w-110px h-110px margin-25px-bottom md-margin-15px-bottom" alt=""/> <p class="md-margin-15px-bottom sm-margin-20px-bottom">Trust us we looked for a very long time and wasted thousands of dollars testing other teams, freelancers, and outsource companies.</p> <span class="text-extra-dark-gray text-small text-uppercase d-block line-height-10 alt-font font-weight-600">Alexander Harvard</span> <span class="text-light-gray2 text-extra-small text-uppercase text-medium-gray">Co Founder / CEO</span> </div> </div> <!-- end testimonial item --> <!-- start testimonial item --> <div class="swiper-slide"> <div class="margin-half-all bg-white box-shadow-light text-center padding-fourteen-all sm-padding-30px-all"> <img src="image path" class="rounded-circle w-110px h-110px margin-25px-bottom md-margin-15px-bottom" alt=""/> <p class="md-margin-15px-bottom sm-margin-20px-bottom">This is an excellent company! I personally enjoyed the energy and the professional support the whole team gave to us into creating website.</p> <span class="text-extra-dark-gray text-small text-uppercase d-block line-height-10 alt-font font-weight-600">Lindsay Swanson</span> <span class="text-light-gray2 text-extra-small text-uppercase text-medium-gray">Creative Director</span> </div> </div> <!-- end testimonial item --> <!-- start testimonial item --> <div class="swiper-slide"> <div class="margin-half-all bg-white box-shadow-light text-center padding-fourteen-all sm-padding-30px-all"> <img src="image path" class="rounded-circle w-110px h-110px margin-25px-bottom md-margin-15px-bottom" alt=""/> <p class="md-margin-15px-bottom sm-margin-20px-bottom">Their team are easy to work with and helped me make amazing websites in a short amount of time. Thanks again guys for all your hard work.</p> <span class="text-extra-dark-gray text-small text-uppercase d-block line-height-10 alt-font font-weight-600">Herman Miller</span> <span class="text-light-gray2 text-extra-small text-uppercase text-medium-gray">Creative Director</span> </div> </div> <!-- end testimonial item --> </div> <div class="swiper-pagination-1 swiper-pagination"></div> </div> </div> </div>
NoteFor demo, You can please check this in testimonials-carousel page.
Video
Add / embed video to your page. See below image and code for more information.
<!-- start vimeo video -->
<iframe width="560" height="315" src="video url"></iframe>
<!-- end vimeo video -->
NoteFor demo, You can please check this in video.html page.
WOW Animation
Reveal CSS animation as you scroll down a page. By default, you can use it to trigger animate.css animations. But you can easily change the settings to your favorite animation library.
Advantages
- Smaller than other JavaScript parallax plugins, like Scrollorama (they do fantastic things, but can be too heavy for simple needs)
- Super simple to install, and works with animate.css, so if you already use it, that will be very fast to setup
- Fast execution and lightweight code: the browser will like it ;-)
<section class="wow animate__slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section> <section class="wow animate__slideInRight" data-wow-offset="10" data-wow-iteration="10"></section>
Javascript (file path - /js/main.js)
if ($('.wow').length > 0) { wow = new WOW({ boxClass: 'wow', animateClass: 'animate__animated', offset: 30, mobile: mobileAnimation, live: true }); $(document).imagesLoaded(function () { wow.init(); }); }
NoteReference on WOW
Portfolio
Pofo provides a very elegant way to showcase your work. Setting up Portfolio is simple and easy. Please see below code and informations.
Setting up Portfolio Filter
<!-- 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 -->
Setting up Portfolio Columns and Items:
You can change portfolio columns by changing class of portfolio main ul
to .grid-2col, .grid-3col, .grid-4col and .grid-5col
as per the columns you need. You can add data filter class name in portfolio li
item as per the filter category above. Below is the portfolio section code for your reference:
<!-- start filter content --> <div class="col-12 filter-content overflow-hidden"> <ul class="hover-option4 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 --> <li class="grid-item web branding design wow animate__fadeInUp"> <a href="single-project-page-01.html"> <figure> <div class="portfolio-img bg-extra-dark-gray"><img src="image path" alt=""/></div> <figcaption> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative"> <div class="bg-deep-pink mx-auto separator-line-horrizontal-medium-light3 margin-25px-bottom"></div> <span class="font-weight-600 letter-spacing-1 alt-font text-white-2 text-uppercase margin-5px-bottom d-block">Herbal Beauty Salon</span> <p class="text-medium-gray text-uppercase text-extra-small mb-0">Branding and Identity</p> </div> </div> </div> </figcaption> </figure> </a> </li> <!-- end portfolio item --> <!-- start portfolio item --> <li class="grid-item web branding design wow animate__fadeInUp" data-wow-delay="0.2s"> <a href="single-project-page-02.html"> <figure> <div class="portfolio-img bg-extra-dark-gray"><img src="image path" alt=""/></div> <figcaption> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative"> <div class="bg-deep-pink mx-auto separator-line-horrizontal-medium-light3 margin-25px-bottom"></div> <span class="font-weight-600 letter-spacing-1 alt-font text-white-2 text-uppercase margin-5px-bottom d-block">Tailoring Interior</span> <p class="text-medium-gray text-uppercase text-extra-small mb-0">Branding and Brochure</p> </div> </div> </div> </figcaption> </figure> </a> </li> <!-- end portfolio item --> <!-- start portfolio item --> <li class="grid-item advertising branding photography wow animate__fadeInUp" data-wow-delay="0.4s"> <a href="single-project-page-03.html"> <figure> <div class="portfolio-img bg-extra-dark-gray"><img src="image path" alt=""/></div> <figcaption> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative"> <div class="bg-deep-pink mx-auto separator-line-horrizontal-medium-light3 margin-25px-bottom"></div> <span class="font-weight-600 letter-spacing-1 alt-font text-white-2 text-uppercase margin-5px-bottom d-block">Pixflow Studio</span> <p class="text-medium-gray text-uppercase text-extra-small mb-0">Branding and Identity</p> </div> </div> </div> </figcaption> </figure> </a> </li> <!-- end portfolio item --> </ul> </div> <!-- end filter content -->
Portfolio Layout
Pofo includes different types of portfolio layout as mentioned below to setup your own portfolio as per your requirement:
Portfolio Grid Overlay
<!-- start portfolio section --> Add portfolio filters here <!-- start filter content --> <div class="col-12 filter-content overflow-hidden"> <ul class="hover-option4 portfolio-wrapper grid grid-loading grid-3col xl-grid-3col 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 wow animate__fadeInUp"> <a href="single-project-page-01.html"> <figure> <div class="portfolio-img bg-extra-dark-gray"><img src="image path" alt=""/></div> <figcaption> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative"> <div class="bg-deep-pink mx-auto separator-line-horrizontal-medium-light3 margin-25px-bottom"></div> <span class="font-weight-600 letter-spacing-1 alt-font text-white-2 text-uppercase margin-5px-bottom d-block">Herbal Beauty Salon</span> <p class="text-medium-gray text-uppercase text-extra-small mb-0">Branding and Identity</p> </div> </div> </div> </figcaption> </figure> </a> </li> <!-- end portfolio-item item --> <!-- start portfolio-item item --> <li class="grid-item web branding design wow animate__fadeInUp" data-wow-delay="0.2s"> <a href="single-project-page-02.html"> <figure> <div class="portfolio-img bg-extra-dark-gray"><img src="image path" alt=""/></div> <figcaption> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative"> <div class="bg-deep-pink mx-auto separator-line-horrizontal-medium-light3 margin-25px-bottom"></div> <span class="font-weight-600 letter-spacing-1 alt-font text-white-2 text-uppercase margin-5px-bottom d-block">Tailoring Interior</span> <p class="text-medium-gray text-uppercase text-extra-small mb-0">Branding and Brochure</p> </div> </div> </div> </figcaption> </figure> </a> </li> <!-- end portfolio-item item --> <!-- start portfolio-item item --> <li class="grid-item advertising branding photography wow animate__fadeInUp" data-wow-delay="0.4s"> <a href="single-project-page-03.html"> <figure> <div class="portfolio-img bg-extra-dark-gray"><img src="image path" alt=""/></div> <figcaption> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative"> <div class="bg-deep-pink mx-auto separator-line-horrizontal-medium-light3 margin-25px-bottom"></div> <span class="font-weight-600 letter-spacing-1 alt-font text-white-2 text-uppercase margin-5px-bottom d-block">Pixflow Studio</span> <p class="text-medium-gray text-uppercase text-extra-small mb-0">Branding and Identity</p> </div> </div> </div> </figcaption> </figure> </a> </li> <!-- end portfolio-item item --> </ul> </div>
NoteFor demo, You can please check this in portfolio-boxed-grid-overlay.html page.
Portfolio Grid With Icon
<!-- start portfolio section --> Add portfolio filters here <!-- start filter content --> <div class="col-12 filter-content overflow-hidden"> <ul class="hover-option6 lightbox-portfolio portfolio-wrapper grid grid-loading grid-3col xl-grid-3col 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="design web photography grid-item wow animate__fadeInUp last-paragraph-no-margin"> <figure> <div class="portfolio-img bg-deep-pink position-relative text-center overflow-hidden"> <img src="image path" alt=""/> <div class="portfolio-icon"> <a href="single-project-page-01.html"><i class="fa-solid fa-link text-extra-dark-gray" aria-hidden="true"></i></a> <a class="gallery-link" title="Lightbox gallery image title..." href="image path"><i class="fa-solid fa-magnifying-glass text-extra-dark-gray" aria-hidden="true"></i></a> </div> </div> <figcaption class="bg-white"> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative"> <a href="single-project-page-01.html"><span class="line-height-normal font-weight-600 text-small alt-font margin-5px-bottom text-extra-dark-gray text-uppercase d-block">Herbal Beauty Salon</span></a> <p class="text-medium-gray text-extra-small text-uppercase">Branding and Identity</p> </div> </div> </div> </figcaption> </figure> </li> <!-- end portfolio-item item --> <!-- start portfolio-item item --> <li class="advertising grid-item wow animate__fadeInUp last-paragraph-no-margin" data-wow-delay="0.2s"> <figure> <div class="portfolio-img bg-deep-pink position-relative text-center overflow-hidden"> <img src="image path" alt=""/> <div class="portfolio-icon"> <a href="single-project-page-02.html"><i class="fa-solid fa-link text-extra-dark-gray" aria-hidden="true"></i></a> <a class="gallery-link" title="Lightbox gallery image title..." href="image path"><i class="fa-solid fa-magnifying-glass text-extra-dark-gray" aria-hidden="true"></i></a> </div> </div> <figcaption class="bg-white"> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative"> <a href="single-project-page-02.html"><span class="line-height-normal font-weight-600 text-small alt-font margin-5px-bottom text-extra-dark-gray text-uppercase d-block">Tailoring Interior</span></a> <p class="text-medium-gray text-extra-small text-uppercase">Branding and Brochure</p> </div> </div> </div> </figcaption> </figure> </li> <!-- end portfolio-item item --> <!-- start portfolio-item item --> <li class="branding photography advertising web grid-item wow animate__fadeInUp last-paragraph-no-margin" data-wow-delay="0.4s"> <figure> <div class="portfolio-img bg-deep-pink position-relative text-center overflow-hidden"> <img src="image path" alt=""/> <div class="portfolio-icon"> <a href="single-project-page-03.html"><i class="fa-solid fa-link text-extra-dark-gray" aria-hidden="true"></i></a> <a class="gallery-link" title="Lightbox gallery image title..." href="image path"><i class="fa-solid fa-magnifying-glass text-extra-dark-gray" aria-hidden="true"></i></a> </div> </div> <figcaption class="bg-white"> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative"> <a href="single-project-page-03.html"><span class="line-height-normal font-weight-600 text-small alt-font margin-5px-bottom text-extra-dark-gray text-uppercase d-block">Designblast Inc</span></a> <p class="text-medium-gray text-extra-small text-uppercase">Web and Photography</p> </div> </div> </div> </figcaption> </figure> </li> <!-- end portfolio-item item --> </ul> </div>
NoteFor demo, You can please check this in portfolio-boxed-grid-with-icon.html page.
Portfolio Grid Transform
<!-- start portfolio section --> Add portfolio filters here <!-- start filter content --> <div class="col-12 filter-content overflow-hidden"> <ul class="hover-option7 portfolio-wrapper grid grid-loading grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-medium"> <li class="grid-sizer"></li> <!-- start portfolio item --> <li class="grid-item web branding design wow animate__fadeInUp"> <a href="single-project-page-01.html"> <figure> <div class="portfolio-img"><img src="image path" alt=""/></div> <figcaption> <div class="portfolio-hover-main text-center last-paragraph-no-margin"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative"> <span class="font-weight-600 alt-font text-uppercase margin-one-bottom d-block text-extra-dark-gray">Naked Soap</span> <p class="text-medium-gray 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 design photography wow animate__fadeInUp" data-wow-delay="0.2s"> <a href="single-project-page-02.html"> <figure> <div class="portfolio-img"><img src="image path" alt=""/></div> <figcaption> <div class="portfolio-hover-main text-center last-paragraph-no-margin"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative"> <span class="font-weight-600 alt-font text-uppercase margin-one-bottom d-block text-extra-dark-gray">Berlin Design</span> <p class="text-medium-gray 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 photography wow animate__fadeInUp" data-wow-delay="0.4s"> <a href="single-project-page-03.html"> <figure> <div class="portfolio-img"><img src="image path" alt=""/></div> <figcaption> <div class="portfolio-hover-main text-center last-paragraph-no-margin"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative"> <span class="font-weight-600 alt-font text-uppercase margin-one-bottom d-block text-extra-dark-gray">Abstract Comics</span> <p class="text-medium-gray text-uppercase text-extra-small">Branding and Identity</p> </div> </div> </div> </figcaption> </figure> </a> </li> <!-- end portfolio item --> </ul> </div>
NoteFor demo, You can please check this in portfolio-boxed-grid-transform.html page.
Portfolio Grid Zooming
<!-- start portfolio section --> Add portfolio filters here <!-- start filter content --> <div class="col-12 filter-content overflow-hidden"> <ul class="hover-option8 portfolio-wrapper grid grid-loading grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-medium"> <li class="grid-sizer"></li> <!-- start portfolio item --> <li class="grid-item web branding design wow animate__fadeInUp last-paragraph-no-margin"> <a href="single-project-page-01.html"> <figure> <div class="portfolio-img"><img src="image path" alt=""/></div> <figcaption> <div class="portfolio-hover-main"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-icon alt-font font-weight-600 icon-medium text-deep-pink">+</div> <span class="text-medium alt-font text-extra-dark-gray margin-5px-bottom">Tailoring Interior</span> <p class="no-letter-spacing text-small text-medium-gray">Branding and Brochure</p> </div> </div> </figcaption> </figure> </a> </li> <!-- end portfolio item --> <!-- start portfolio item --> <li class="grid-item web branding design wow animate__fadeInUp last-paragraph-no-margin" data-wow-delay="0.2s"> <a href="single-project-page-02.html"> <figure> <div class="portfolio-img"><img src="image path" alt=""/></div> <figcaption> <div class="portfolio-hover-main"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-icon alt-font font-weight-600 icon-medium text-deep-pink">+</div> <span class="text-medium alt-font text-extra-dark-gray margin-5px-bottom">Love Fashion</span> <p class="no-letter-spacing text-small text-medium-gray">Branding and Brochure</p> </div> </div> </figcaption> </figure> </a> </li> <!-- end portfolio item --> <!-- start portfolio item --> <li class="grid-item advertising branding photography wow animate__fadeInUp last-paragraph-no-margin" data-wow-delay="0.4s"> <a href="single-project-page-03.html"> <figure> <div class="portfolio-img"><img src="image path" alt=""/></div> <figcaption> <div class="portfolio-hover-main"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-icon alt-font font-weight-600 icon-medium text-deep-pink">+</div> <span class="text-medium alt-font text-extra-dark-gray margin-5px-bottom">Pixflow Studio</span> <p class="no-letter-spacing text-small text-medium-gray">Branding and Identity</p> </div> </div> </figcaption> </figure> </a> </li> <!-- end portfolio item --> </ul> </div> <!-- end portfolio section -->
NoteFor demo, You can please check this in portfolio-boxed-grid-zooming.html page.
Portfolio Masonry Overlay
<!-- start portfolio section --> Add portfolio filters here <!-- start filter content --> <div class="col-12 filter-content overflow-hidden"> <ul class="hover-option2 portfolio-wrapper grid grid-loading grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-medium"> <li class="grid-sizer"></li> <!-- start portfolio item --> <li class="grid-item web branding design wow animate__fadeInUp last-paragraph-no-margin"> <a href="single-project-page-01.html"> <figure> <div class="portfolio-img bg-deep-pink"><img src="image path" 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 wow animate__fadeInUp last-paragraph-no-margin" data-wow-delay="0.2s"> <a href="single-project-page-02.html"> <figure> <div class="portfolio-img bg-deep-pink"><img src="image path" 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 wow animate__fadeInUp last-paragraph-no-margin" data-wow-delay="0.4s"> <a href="single-project-page-03.html"> <figure> <div class="portfolio-img bg-deep-pink"><img src="image path" 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 --> </ul> </div> <!-- end portfolio section -->
NoteFor demo, You can please check this in portfolio-boxed-masonry-overlay.html page.
Portfolio Masonry With Icon
<!-- start portfolio section --> Add portfolio filters here <!-- start filter content --> <div class="col-12 filter-content overflow-hidden"> <ul class="hover-option6 lightbox-portfolio portfolio-wrapper grid grid-loading grid-3col xl-grid-3col 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="design web photography grid-item wow animate__fadeInUp last-paragraph-no-margin"> <figure> <div class="portfolio-img bg-extra-dark-gray position-relative text-center overflow-hidden"> <img src="image path" alt=""/> <div class="portfolio-icon"> <a href="single-project-page-01.html"><i class="fa-solid fa-link text-extra-dark-gray" aria-hidden="true"></i></a> <a class="gallery-link" title="Lightbox gallery image title..." href="image path"><i class="fa-solid fa-magnifying-glass text-extra-dark-gray" aria-hidden="true"></i></a> </div> </div> <figcaption class="bg-white"> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative"> <a href="single-project-page-01.html"><span class="line-height-normal font-weight-600 text-small alt-font margin-5px-bottom text-extra-dark-gray text-uppercase d-block">Herbal Beauty Salon</span></a> <p class="text-medium-gray text-extra-small text-uppercase">Branding and Identity</p> </div> </div> </div> </figcaption> </figure> </li> <!-- end portfolio-item item --> <!-- start portfolio-item item --> <li class="advertising grid-item wow animate__fadeInUp last-paragraph-no-margin" data-wow-delay="0.2s"> <figure> <div class="portfolio-img bg-extra-dark-gray position-relative text-center overflow-hidden"> <img src="image path" alt=""/> <div class="portfolio-icon"> <a href="single-project-page-02.html"><i class="fa-solid fa-link text-extra-dark-gray" aria-hidden="true"></i></a> <a class="gallery-link" title="Lightbox gallery image title..." href="image path"><i class="fa-solid fa-magnifying-glass text-extra-dark-gray" aria-hidden="true"></i></a> </div> </div> <figcaption class="bg-white"> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative"> <a href="single-project-page-02.html"><span class="line-height-normal font-weight-600 text-small alt-font margin-5px-bottom text-extra-dark-gray text-uppercase d-block">Tailoring Interior</span></a> <p class="text-medium-gray text-extra-small text-uppercase">Branding and Brochure</p> </div> </div> </div> </figcaption> </figure> </li> <!-- end portfolio-item item --> <!-- start portfolio-item item --> <li class="branding photography advertising web grid-item wow animate__fadeInUp last-paragraph-no-margin" data-wow-delay="0.4s"> <figure> <div class="portfolio-img bg-extra-dark-gray position-relative text-center overflow-hidden"> <img src="image path" alt=""/> <div class="portfolio-icon"> <a href="single-project-page-03.html"><i class="fa-solid fa-link text-extra-dark-gray" aria-hidden="true"></i></a> <a class="gallery-link" title="Lightbox gallery image title..." href="image path"><i class="fa-solid fa-magnifying-glass text-extra-dark-gray" aria-hidden="true"></i></a> </div> </div> <figcaption class="bg-white"> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative"> <a href="single-project-page-03.html"><span class="line-height-normal font-weight-600 text-small alt-font margin-5px-bottom text-extra-dark-gray text-uppercase d-block">Designblast Inc</span></a> <p class="text-medium-gray text-extra-small text-uppercase">Web and Photography</p> </div> </div> </div> </figcaption> </figure> </li> <!-- end portfolio-item item --> </ul> </div> <!-- end portfolio section -->
NoteFor demo, You can please check this in portfolio-boxed-masonry-with-icon.html page.
Portfolio Metro Overlay
<!-- start portfolio section --> Add portfolio filters here <!-- start filter content --> <div class="col-12 filter-content overflow-hidden"> <ul class="hover-option5 portfolio-wrapper grid grid-loading grid-4col xl-grid-4col lg-grid-2col md-grid-2col sm-grid-2col xs-grid-1col gutter-medium"> <li class="grid-sizer"></li> <!-- start portfolio item --> <li class="grid-item branding grid-item-double wow animate__zoomIn"> <a href="single-project-page-02.html"> <figure> <div class="portfolio-img"><img src="image path" alt=""/></div> <figcaption> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative last-paragraph-no-margin"> <div class="bg-deep-pink mx-auto separator-line-horrizontal-medium-light2 position-relative"></div> <span class="font-weight-600 letter-spacing-1 alt-font text-white-2 text-uppercase margin-5px-bottom d-block">Herbal Beauty Salon</span> <p class="text-medium-gray letter-spacing-1 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 advertising wow animate__zoomIn" data-wow-delay="0.2s"> <a href="single-project-page-01.html"> <figure> <div class="portfolio-img"><img src="image path" alt=""/></div> <figcaption> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative last-paragraph-no-margin"> <div class="bg-deep-pink mx-auto separator-line-horrizontal-medium-light2 position-relative"></div> <span class="font-weight-600 letter-spacing-1 alt-font text-white-2 text-uppercase margin-5px-bottom d-block">Tailoring Interior</span> <p class="text-medium-gray letter-spacing-1 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 design wow animate__zoomIn" data-wow-delay="0.4s"> <a href="single-project-page-03.html"> <figure> <div class="portfolio-img"><img src="image path" alt=""/></div> <figcaption> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative last-paragraph-no-margin"> <div class="bg-deep-pink mx-auto separator-line-horrizontal-medium-light2 position-relative"></div> <span class="font-weight-600 letter-spacing-1 alt-font text-white-2 text-uppercase margin-5px-bottom d-block">Pixflow Studio</span> <p class="text-medium-gray letter-spacing-1 text-uppercase text-extra-small">Branding and Identity</p> </div> </div> </div> </figcaption> </figure> </a> </li> <!-- end portfolio item --> </ul> </div> <!-- end portfolio section -->
NoteFor demo, You can please check this in portfolio-boxed-metro-overlay.html page.
Portfolio Metro with Icon
<!-- start portfolio section --> Add portfolio filters here <!-- start filter content --> <div class="col-12 filter-content overflow-hidden"> <ul class="hover-option10 lightbox-portfolio portfolio-wrapper grid grid-loading grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-medium"> <li class="grid-sizer"></li> <!-- start portfolio item --> <li class="grid-item web wow animate__zoomIn"> <figure> <div class="portfolio-img bg-black"><img src="image path" alt=""/></div> <figcaption> <div class="portfolio-hover-main"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-icon"> <a href="single-project-page-01.html"><i class="fa-solid fa-link" aria-hidden="true"></i></a> <a class="gallery-link" title="Lightbox gallery image title..." href="image path"><i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i></a> </div> <div class="portfolio-hover-content"> <span class="font-weight-600 line-height-normal alt-font text-white-2 text-uppercase margin-5px-bottom d-block">Herbal Beauty Salon</span> <p class="text-medium-gray text-uppercase text-extra-small mb-0">Branding and Brochure</p> </div> </div> </div> </figcaption> </figure> </li> <!-- end portfolio item --> <!-- start portfolio item --> <li class="grid-item advertising wow animate__zoomIn" data-wow-delay="0.2s"> <figure> <div class="portfolio-img bg-black"><img src="image path" alt=""/></div> <figcaption> <div class="portfolio-hover-main"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-icon"> <a href="single-project-page-02.html"><i class="fa-solid fa-link" aria-hidden="true"></i></a> <a class="gallery-link" title="Lightbox gallery image title..." href="image path"><i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i></a> </div> <div class="portfolio-hover-content"> <span class="font-weight-600 line-height-normal alt-font text-white-2 text-uppercase margin-5px-bottom d-block">Tailoring Interior</span> <p class="text-medium-gray text-uppercase text-extra-small mb-0">Branding and Identity</p> </div> </div> </div> </figcaption> </figure> </li> <!-- end portfolio item --> <!-- start portfolio item --> <li class="grid-item design photography grid-item-double wow animate__zoomIn"> <figure> <div class="portfolio-img bg-black"><img src="image path" alt=""/></div> <figcaption> <div class="portfolio-hover-main"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-icon"> <a href="single-project-page-04.html"><i class="fa-solid fa-link" aria-hidden="true"></i></a> <a class="gallery-link" title="Lightbox gallery image title..." href="image path"><i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i></a> </div> <div class="portfolio-hover-content"> <span class="font-weight-600 line-height-normal alt-font text-white-2 text-uppercase margin-5px-bottom d-block">HardDot Stone</span> <p class="text-medium-gray text-uppercase text-extra-small mb-0">Branding and Identity</p> </div> </div> </div> </figcaption> </figure> </li> <!-- end portfolio item --> </ul> </div> <!-- end portfolio section -->
NoteFor demo, You can please check this in portfolio-boxed-metro-with-icon.html page.
Portfolio Metro Transform
<!-- start portfolio section --> Add portfolio filters here <!-- start filter content --> <div class="col-12 filter-content overflow-hidden"> <ul class="hover-option7 portfolio-wrapper grid grid-loading grid-6col xl-grid-6col lg-grid-2col md-grid-2col sm-grid-2col xs-grid-1col gutter-medium"> <li class="grid-sizer"></li> <!-- start portfolio item --> <li class="grid-item web branding design wow animate__fadeInUp"> <a href="single-project-page-01.html"> <figure> <div class="portfolio-img"><img src="image path" alt=""/></div> <figcaption> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative"> <span class="font-weight-600 line-height-normal alt-font text-uppercase margin-5px-bottom d-block text-extra-dark-gray">Herbal Beauty</span> <p class="text-medium-gray text-uppercase text-extra-small mb-0">Branding and Identity</p> </div> </div> </div> </figcaption> </figure> </a> </li> <!-- end portfolio item --> <!-- start portfolio item --> <li class="grid-item advertising design branding wow animate__fadeInUp" data-wow-delay="0.2s"> <a href="single-project-page-02.html"> <figure> <div class="portfolio-img"><img src="image path" alt=""/></div> <figcaption> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative"> <span class="font-weight-600 line-height-normal alt-font text-uppercase margin-5px-bottom d-block text-extra-dark-gray">Educamp School</span> <p class="text-medium-gray text-uppercase text-extra-small mb-0">Branding and Identity</p> </div> </div> </div> </figcaption> </figure> </a> </li> <!-- end portfolio item --> <!-- start portfolio item --> <li class="grid-item web photography grid-item-double wow animate__fadeInUp" data-wow-delay="0.4s"> <a href="single-project-page-03.html"> <figure> <div class="portfolio-img"><img src="image path" alt=""/></div> <figcaption> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative"> <span class="font-weight-600 line-height-normal alt-font text-uppercase margin-5px-bottom d-block text-extra-dark-gray">Pixflow Studio</span> <p class="text-medium-gray text-uppercase text-extra-small mb-0">Branding and Brochure</p> </div> </div> </div> </figcaption> </figure> </a> </li> <!-- end portfolio item --> </ul> </div> <!-- end portfolio section -->
NoteFor demo, You can please check this in portfolio-boxed-metro-transform.html page.
Portfolio Metro Zooming
<!-- start portfolio section --> Add portfolio filters here <!-- start filter content --> <div class="col-12 filter-content overflow-hidden"> <ul class="hover-option8 portfolio-wrapper grid grid-loading grid-4col xl-grid-3col lg-grid-2col md-grid-2col sm-grid-2col xs-grid-1col gutter-medium"> <li class="grid-sizer"></li> <!-- start portfolio item --> <li class="grid-item wow animate__fadeInUp web"> <a href="single-project-page-01.html"> <figure> <div class="portfolio-img"><img src="image path" alt=""/></div> <figcaption> <div class="portfolio-hover-main"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-icon alt-font font-weight-600 icon-medium">+</div> <span class="text-large alt-font text-extra-dark-gray margin-5px-bottom">Tailoring Interior</span> <p class="no-letter-spacing text-small mb-0 text-medium-gray">Branding and Brochure</p> </div> </div> </figcaption> </figure> </a> </li> <!-- end portfolio item --> <!-- start portfolio item --> <li class="grid-item wow animate__fadeInUp web" data-wow-delay="0.2s"> <a href="single-project-page-02.html"> <figure> <div class="portfolio-img"><img src="image path" alt=""/></div> <figcaption> <div class="portfolio-hover-main"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-icon alt-font font-weight-600 icon-medium">+</div> <span class="text-large alt-font text-extra-dark-gray margin-5px-bottom">Educamp School</span> <p class="no-letter-spacing text-small mb-0 text-medium-gray">Branding and Identity</p> </div> </div> </figcaption> </figure> </a> </li> <!-- end portfolio item --> <!-- start portfolio item --> <li class="grid-item design grid-item-double wow animate__fadeInUp" data-wow-delay="0.4s"> <a href="single-project-page-03.html"> <figure> <div class="portfolio-img"><img src="image path" alt=""/></div> <figcaption> <div class="portfolio-hover-main"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-icon alt-font font-weight-600 icon-medium">+</div> <span class="text-large alt-font text-extra-dark-gray margin-5px-bottom">Pixflow Studio</span> <p class="no-letter-spacing text-small mb-0 text-medium-gray">Branding and Brochure</p> </div> </div> </figcaption> </figure> </a> </li> <!-- end portfolio item --> </ul> </div> <!-- end portfolio section -->
NoteFor demo, You can please check this in portfolio-boxed-metro-zooming.html page.
Portfolio Image Gallery
<!-- start portfolio section --> Add portfolio filters here <!-- start filter content --> <div class="col-12 filter-content overflow-hidden"> <ul class="hover-option4 lightbox-gallery portfolio-wrapper grid grid-loading grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-small"> <li class="grid-sizer"></li> <!-- start portfolio item --> <li class="grid-item wow animate__fadeInUp"> <a href="image path" title="Armchair Mojo" data-group="lightbox-gallery"> <figure> <div class="portfolio-img bg-extra-dark-gray"><img src="image path" alt="" class="project-img-gallery"/></div> <figcaption> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative"> <i class="ti-zoom-in text-white-2 fa-2x"></i> </div> </div> </div> </figcaption> </figure> </a> </li> <!-- end portfolio item --> <!-- start portfolio item --> <li class="grid-item wow animate__fadeInUp" data-wow-delay="0.2s"> <a href="image path" title="Truenorth Web" data-group="lightbox-gallery"> <figure> <div class="portfolio-img bg-extra-dark-gray"><img src="image path" alt="" class="project-img-gallery"/></div> <figcaption> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative"> <i class="ti-zoom-in text-white-2 fa-2x"></i> </div> </div> </div> </figcaption> </figure> </a> </li> <!-- end portfolio item --> <!-- start portfolio item --> <li class="grid-item wow animate__fadeInUp" data-wow-delay="0.4s"> <a href="image path" title="Mass Productions" data-group="lightbox-gallery"> <figure> <div class="portfolio-img bg-extra-dark-gray"><img src="image path" alt="" class="project-img-gallery"/></div> <figcaption> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative"> <i class="ti-zoom-in text-white-2 fa-2x"></i> </div> </div> </div> </figcaption> </figure> </a> </li> <!-- end portfolio item --> </ul> </div> <!-- end portfolio section -->
NoteFor demo, You can please check this in portfolio-boxed-image-gallery.html page.
Portfolio Justified
<div class="col-12 lightbox-portfolio p-md-0 px-1"> <div id="justified" class="justified-gallery" data-justified-options='{ "rowHeight": 400, "maxRowHeight": false, "captions": true, "margins": 10, "waitThumbnailsLoad": true }'> <!-- start gallery item --> <div class="wow animate__fadeInUp"> <a href="image path" class="gallery-link" title="IMAGE TITLE"><img src="image path" alt="Armchair Mojo"></a> </div> <!-- end gallery item --> <!-- start gallery item --> <div class="wow animate__fadeInUp" data-wow-delay="0.2s"> <a href="image path" class="gallery-link" title="IMAGE TITLE"><img src="image path" alt="Truenorth Web"></a> </div> <!-- end gallery item --> <!-- start gallery item --> <div class="wow animate__fadeInUp" data-wow-delay="0.4s"> <a href="image path" class="gallery-link" title="IMAGE TITLE"><img src="image path" alt="Mass Productions"></a> </div> <!-- end gallery item --> </div> </div>
NoteFor demo, You can please check this in portfolio-boxed-justified-gallery.html page.
Portfolio Carousel
<div class="col-12 hover-option4 margin-5px-bottom"> <div class="swiper" data-slider-options='{ "slidesPerView": "1", "allowTouchMove":true, "spaceBetween":15, "autoplay": { "delay": 3000, "disableOnInteraction": true }, "breakpoints": { "1200": { "slidesPerView": 4 }, "992": { "slidesPerView": 3 }, "768": { "slidesPerView": 2 } }, "navigation": { "nextEl": ".swiper-button-next", "prevEl": ".swiper-button-prev" }, "pagination": { "el": ".swiper-pagination", "clickable": true } }'> <div class="swiper-wrapper"> <!-- start slide item --> <div class="swiper-slide grid-item"> <a href="single-project-page-01.html"> <figure> <div class="portfolio-img bg-extra-dark-gray"><img src="image path" alt=""/></div> <figcaption> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative last-paragraph-no-margin"> <span class="font-weight-600 line-height-normal alt-font text-white-2 text-uppercase margin-5px-bottom d-block">White Studio</span> <p class="text-medium-gray text-uppercase text-extra-small">Branding and Identity</p> </div> </div> </div> </figcaption> </figure> </a> </div> <!-- start slide item --> <!-- start slide item --> <div class="swiper-slide grid-item"> <a href="single-project-page-02.html"> <figure> <div class="portfolio-img bg-extra-dark-gray"><img src="image path" alt=""/></div> <figcaption> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative last-paragraph-no-margin"> <span class="font-weight-600 line-height-normal alt-font text-white-2 text-uppercase margin-5px-bottom d-block">Balance Stool</span> <p class="text-medium-gray text-uppercase text-extra-small">Branding and Identity</p> </div> </div> </div> </figcaption> </figure> </a> </div> <!-- start slide item --> <!-- start slide item --> <div class="swiper-slide grid-item"> <a href="single-project-page-03.html"> <figure> <div class="portfolio-img bg-extra-dark-gray"><img src="image path" alt=""/></div> <figcaption> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative last-paragraph-no-margin"> <span class="font-weight-600 line-height-normal alt-font text-white-2 text-uppercase margin-5px-bottom d-block">Happyending Studio</span> <p class="text-medium-gray text-uppercase text-extra-small">Branding and Identity</p> </div> </div> </div> </figcaption> </figure> </a> </div> <!-- start slide item --> </div> <!-- start slider pagination --> <div class="swiper-button-prev swiper-portfolio-prev swiper-button-black-highlight"><i class="ti-arrow-left"></i></div> <div class="swiper-button-next swiper-portfolio-next swiper-button-black-highlight"><i class="ti-arrow-right"></i></div> <!-- end slider pagination --> </div> </div>
NoteFor demo, You can please check this in portfolio-boxed-carousel.html page.
Portfolio Parallax
<!-- start parallax section --> <section class="no-padding parallax sm-background-image-center cover-background" data-parallax-background-ratio="0.5" style="background-image:url('image path');"> <div class="container-fluid"> <div class="row m-0"> <div class="col-12 d-flex flex-column justify-content-end align-items-start one-third-screen position-relative lg-h-600px md-h-700px sm-h-450px text-start padding-55px-left sm-padding-15px-tb sm-no-padding-lr"> <span class="alt-font text-uppercase font-weight-600 text-extra-small opacity6 text-extra-dark-gray letter-spacing-1 margin-25px-bottom sm-no-margin-bottom d-md-block d-table md-opacity10 parallax-category-text">Branding + Identity + Brochure</span> <a href="single-project-page-06.html" class="text-extra-large alt-font text-extra-dark-gray bg-white parallax-title mb-0">Osteopathie Corporate</a> <a href="single-project-page-06.html" class="btn btn-black btn-very-small margin-70px-bottom sm-no-margin-bottom">Launch Project</a> </div> </div> </div> </section> <!-- end parallax section -->
NoteFor demo, You can please check this in portfolio-boxed-parallax.html page.
Portfolio Item Link
There are different types of portfolio item linking available in Pofo as mentioned below:
Open External Page
<!-- start portfolio item --> <li class="grid-item web branding design wow animate__fadeInUp"> <a href="single-project-page-01.html"> <figure> <div class="portfolio-img bg-extra-dark-gray"><img src="image path" alt=""/></div> <figcaption> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative"> <div class="bg-deep-pink mx-auto separator-line-horrizontal-medium-light3 margin-25px-bottom"></div> <span class="font-weight-600 letter-spacing-1 alt-font text-white-2 text-uppercase margin-5px-bottom d-block">Herbal Beauty Salon</span> <p class="text-medium-gray text-uppercase text-extra-small mb-0">Branding and Identity</p> </div> </div> </div> </figcaption> </figure> </a> </li> <!-- end portfolio item -->
NoteFor demo, You can please check this in portfolio-boxed-grid-overlay.html page.
Lightbox Photo Gallery
<div class="row"> <div class="col-12 filter-content overflow-hidden"> <ul class="hover-option2 portfolio-gallery portfolio-wrapper grid grid-loading grid-2col xl-grid-2col lg-grid-2col md-grid-2col sm-grid-2col xs-grid-1col gutter-large"> <li class="grid-sizer"></li> <!-- start image gallery item --> <li class="grid-item wow animate__fadeInUp"> <a href="image path" title="Lightbox gallery image title..." data-group="two-columns-zoom-animation" class="lightbox-group-gallery-item"> <figure> <div class="portfolio-img bg-extra-dark-gray"><img src="image path" alt="" class="project-img-gallery"/></div> <figcaption> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative"> <i class="ti-zoom-in text-white-2 fa-2x"></i> </div> </div> </div> </figcaption> </figure> </a> </li> <!-- end image gallery item --> </ul> </div> </div>
NoteFor demo, You can please check this in lightbox-gallery.html page.
Video Lightbox
<div class="row"> <div class="col-12 filter-content overflow-hidden"> <ul class="hover-option2 portfolio-gallery portfolio-wrapper grid grid-loading grid-2col xl-grid-2col lg-grid-2col md-grid-2col sm-grid-2col xs-grid-1col gutter-large"> <li class="grid-sizer"></li> <li class="grid-item wow animate__fadeInUp"> <a href="https://player.vimeo.com/video/75976293" title="Lightbox gallery video title..." data-group="two-columns-zoom-animation" class="popup-vimeo lightbox-group-gallery-item"> <figure> <div class="portfolio-img bg-extra-dark-gray"><img src="images/blog-page-03-img1.jpg" alt="" class="project-img-gallery"/></div> <figcaption> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative"> <i class="icon-video"></i> </div> </div> </div> </figcaption> </figure> </a> </li> </ul> </div> </div>
Notefor demo visit page open-vimeo-video.html page.
Blog
Our template contains all required pages to create fully working and oriented blog. Approx 22 pages for blog were html-coded and represented for using. Blog list presented in several forms: masonry, fullwidth, with sidebars. Also we added many types of posts, standard blog.
Blog Setup
<!-- start blog main section --> <div class="row justify-content-center"> <main class="col-12 col-xl-9 col-lg-8 right-sidebar md-margin-60px-bottom sm-margin-40px-bottom"> <div class="row"> <div class="blog-content"> <ul class="blog-grid blog-wrapper grid grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col hover-option4 blog-post-style3 gutter-extra-large"> <li class="grid-sizer"></li> <!-- start post item --> <li class="grid-item"> <div class="blog-post"> <div class="blog-post-images"> ... </div> <div class="post-details"> ... </div> </div> </li> <!-- end post item --> <!-- start post item --> <li class="grid-item"> <div class="blog-post"> <div class="blog-post-images"> ... </div> <div class="post-details"> ... </div> </div> </li> <!-- end post item --> <!-- start post item --> <li class="grid-item"> <div class="blog-post"> <div class="blog-post-images"> ... </div> <div class="post-details"> ... </div> </div> </li> <!-- end post item --> </ul> </div> <!-- start pagination --> <div class="col-12 text-center margin-100px-top md-margin-50px-top wow animate__fadeInUp"> <div class="pagination text-small text-uppercase text-extra-dark-gray"> <ul class="mx-auto"> <li><a href="#"><i class="fa-solid fa-arrow-left-long margin-5px-right d-none d-md-inline-block"></i> Prev</a></li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">Next <i class="fa-solid fa-arrow-right-long margin-5px-left d-none d-md-inline-block"></i></a></li> </ul> </div> </div> <!-- end pagination --> </div> </main> <!-- start blog aside section --> <aside class="col-12 col-xl-3 col-lg-4 col-md-7 margin-15px-top md-no-margin-top"> ... </aside> <!-- end blog aside section --> </div> <!-- end blog main section -->
Note you can add aside section before or after the main section if you don't want to add aside panel then simply remove the aside code and make main section to full width
Blog Layout
Pofo includes different types of blog layout as mentioned below to setup your own blog listing as per your requirement:
- Blog Standard
- Blog Classic
- Blog List
- Blog Grid
- Blog Masonry
- Blog Simple
- Blog Clean
- Blog Image
- Blog Only Text
- Blog Left Sidebar
- Blog Right Sidebar
Blog Standard
<!-- start post item --> <div class="col-12 blog-post-content margin-60px-bottom sm-margin-30px-bottom text-center text-md-start"> <a href="blog-standard-post.html" class="blog-image"><img src="image path" alt=""></a> <div class="blog-text border-all d-inline-block w-100"> <div class="content padding-50px-all sm-padding-20px-all"> <div class="text-medium-gray text-extra-small margin-5px-bottom text-uppercase alt-font"><span>Posted on June 30, 2017</span> | <span><a href="blog-grid.html" class="text-medium-gray ">Branding</a></span></div> <a href="blog-standard-post.html" class="text-extra-dark-gray text-uppercase alt-font text-large font-weight-600 margin-15px-bottom d-block">This is a standard post with a preview image</a> <p class="m-0">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry industry’s standard dummy text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text.</p> </div> <div class="row row-cols-1 row-cols-md-3 m-0 author border-top border-color-extra-light-gray text-center"> <div class="col d-flex flex-column justify-content-center padding-15px-all"> <div> <img src="image path" alt="" class="rounded-circle w-30px"> <span class="text-medium-gray text-uppercase text-extra-small alt-font padding-10px-left">by <a href="blog-grid.html" class="text-medium-gray">Jay Benjamin</a></span> </div> </div> <div class="col d-flex flex-column justify-content-centerborder-lr padding-15px-all border-lr border-color-extra-light-gray xs-no-border"> <div> <a href="#" class="text-extra-small alt-font text-medium-gray text-uppercase"><i class="fa-regular fa-heart margin-5px-right text-small"></i>5 like(s)</a> </div> </div> <div class="col d-flex flex-column justify-content-center padding-15px-all"> <div> <a href="#" class="text-extra-small alt-font text-medium-gray text-uppercase"><i class="fa-regular fa-comment margin-5px-right text-small"></i>3 Comment(s)</a> </div> </div> </div> </div> </div> <!-- end post item -->
NoteFor demo, You can please check this in blog-standard-full-width.html page.
Blog Classic
<!-- start blog post --> <div class="row"> <div class="col-12 blog-content"> <ul class="blog-classic blog-wrapper grid grid-loading grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large"> <li class="grid-sizer"></li> <!-- start post item --> <li class="grid-item last-paragraph-no-margin wow animate__fadeInUp"> <div class="blog-post blog-post-style1 text-center text-sm-start"> <div class="blog-post-images overflow-hidden margin-25px-bottom md-margin-20px-bottom"> <a href="blog-post-layout-01.html"> <img src="image path" alt=""> </a> </div> <div class="post-details margin-20px-bottom xs-no-margin-bottom"> <span class="post-author text-extra-small text-medium-gray text-uppercase d-block margin-10px-bottom sm-margin-5px-bottom">17 july 2017 | by <a href="blog-masonry.html" class="text-medium-gray">Jay Benjamin</a></span> <a href="blog-post-layout-01.html" class="post-title text-medium text-extra-dark-gray w-90 d-block md-w-100">I try to look at design from a more conceptual standpoint.</a> <div class="separator-line-horrizontal-full bg-medium-light-gray margin-20px-tb md-margin-15px-tb"></div> <p class="w-90 sm-w-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum text...</p> </div> </div> </li> <!-- end post item --> <!-- start post item --> <li class="grid-item last-paragraph-no-margin wow animate__fadeInUp" data-wow-delay="0.2s"> <div class="blog-post blog-post-style1 text-center text-sm-start"> <div class="blog-post-images overflow-hidden margin-25px-bottom md-margin-20px-bottom"> <a href="blog-post-layout-02.html"> <img src="image path" alt=""> </a> </div> <div class="post-details margin-20px-bottom xs-no-margin-bottom"> <span class="post-author text-extra-small text-medium-gray text-uppercase d-block margin-10px-bottom sm-margin-5px-bottom">03 July 2017 | by <a href="blog-masonry.html" class="text-medium-gray">Herman Miller</a></span> <a href="blog-post-layout-02.html" class="post-title text-medium text-extra-dark-gray w-90 d-block md-w-100">Good design accelerates the adoption of new ideas.</a> <div class="separator-line-horrizontal-full bg-medium-light-gray margin-20px-tb md-margin-15px-tb"></div> <p class="w-90 sm-w-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum text...</p> </div> </div> </li> <!-- end post item --> <!-- start post item --> <li class="grid-item last-paragraph-no-margin wow animate__fadeInUp" data-wow-delay="0.4s"> <div class="blog-post blog-post-style1 text-center text-sm-start"> <div class="blog-post-images overflow-hidden margin-25px-bottom md-margin-20px-bottom"> <a href="blog-post-layout-03.html"> <img src="image path" alt=""> </a> </div> <div class="post-details margin-20px-bottom xs-no-margin-bottom"> <span class="post-author text-extra-small text-medium-gray text-uppercase d-block margin-10px-bottom sm-margin-5px-bottom">22 June 2017 | by <a href="blog-masonry.html" class="text-medium-gray">Hugh Macleod</a></span> <a href="blog-post-layout-03.html" class="post-title text-medium text-extra-dark-gray w-90 d-block md-w-100">Design is inherently optimistic. That is its power.</a> <div class="separator-line-horrizontal-full bg-medium-light-gray margin-20px-tb md-margin-15px-tb"></div> <p class="w-90 sm-w-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum text...</p> </div> </div> </li> <!-- end post item --> <!-- start post item --> <li class="grid-item last-paragraph-no-margin wow animate__fadeInUp" data-wow-delay="0.6s"> <div class="blog-post blog-post-style1 text-center text-sm-start"> <div class="blog-post-images overflow-hidden margin-25px-bottom md-margin-20px-bottom"> <a href="blog-post-layout-04.html"> <img src="image path" alt=""> </a> </div> <div class="post-details margin-20px-bottom xs-no-margin-bottom"> <span class="post-author text-extra-small text-medium-gray text-uppercase d-block margin-10px-bottom sm-margin-5px-bottom">02 June 2017 | by <a href="blog-masonry.html" class="text-medium-gray">Jennifer Freeman</a></span> <a href="blog-post-layout-04.html" class="post-title text-medium text-extra-dark-gray w-90 d-block md-w-100">I wish someone would ask me to design a cathedral.</a> <div class="separator-line-horrizontal-full bg-medium-light-gray margin-20px-tb md-margin-15px-tb"></div> <p class="w-90 sm-w-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum text...</p> </div> </div> </li> <!-- end post item --> </ul> </div> </div> <!-- end blog post -->
NoteFor demo, You can please check this in blog-classic.html page.
Blog List
<!-- start post item --> <div class="blog-post-content d-flex align-items-center flex-wrap margin-60px-bottom padding-60px-bottom border-bottom border-color-extra-light-gray md-margin-30px-bottom md-padding-30px-bottom text-center text-md-start md-no-border"> <div class="col-12 col-lg-5 blog-image p-0 md-margin-30px-bottom sm-margin-20px-bottom margin-45px-right md-no-margin-right"> <a href="blog-standard-post.html"><img src="image path" alt=""></a> </div> <div class="col-12 col-lg-6 blog-text p-0"> <div class="content margin-20px-bottom md-no-padding-left "> <a href="blog-standard-post.html" class="text-extra-dark-gray margin-5px-bottom alt-font text-extra-large font-weight-600 d-inline-block">Design is thinking made visual</a> <div class="text-medium-gray text-extra-small margin-15px-bottom text-uppercase alt-font"><span>By <a href="blog-grid.html" class="text-medium-gray">Emily Wright</a></span> | <span>17 july 2017</span> | <a href="blog-grid.html" class="text-medium-gray">Design</a></div> <p class="m-0 w-95 lg-w-100">Lorem Ipsum is simply dummy text of the printing and industry. Lorem Ipsum has been the industry industry’s standard dummy text Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> <a class="btn btn-very-small btn-dark-gray text-uppercase" href="blog-standard-post.html">Continue Reading</a> </div> </div> <!-- end post item -->
NoteFor demo, You can please check this in blog-list.html page.
Blog Grid
<!-- start post content section --> <div class="row"> <div class="col-12 blog-content"> <ul class="blog-grid blog-wrapper grid grid-loading grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col hover-option4 blog-post-style3 gutter-extra-large"> <li class="grid-sizer"></li> <!-- start post item --> <li class="grid-item last-paragraph-no-margin text-center text-sm-start wow animate__fadeInUp"> <div class="blog-post bg-light-gray"> <div class="blog-post-images overflow-hidden position-relative"> <a href="blog-post-layout-01.html"> <img src="image path" alt=""> <div class="blog-hover-icon"><span class="text-extra-large font-weight-300">+</span></div> </a> </div> <div class="post-details padding-40px-all md-padding-20px-all"> <a href="blog-post-layout-01.html" class="alt-font post-title text-medium text-extra-dark-gray w-100 d-block lg-w-100 margin-15px-bottom">I find modernist design boring, but it so much faster!</a> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum standard dummy...</p> <div class="separator-line-horrizontal-full bg-medium-gray margin-20px-tb"></div> <div class="author"> <span class="text-medium-gray text-uppercase text-extra-small d-inline-block">by <a href="blog-masonry.html" class="text-medium-gray">Jay Benjamin</a> | 13 May 2017</span> </div> </div> </div> </li> <!-- end post item --> <!-- start post item --> <li class="grid-item last-paragraph-no-margin text-center text-sm-start wow animate__fadeInUp" data-wow-delay="0.2s"> <div class="blog-post bg-light-gray"> <div class="blog-post-images overflow-hidden position-relative"> <a href="blog-post-layout-02.html"> <img src="image path" alt=""> <div class="blog-hover-icon"><span class="text-extra-large font-weight-300">+</span></div> </a> </div> <div class="post-details padding-40px-all md-padding-20px-all"> <a href="blog-post-layout-02.html" class="alt-font post-title text-medium text-extra-dark-gray w-100 d-block lg-w-100 margin-15px-bottom">Being a famous designer is like being a famous dentist.</a> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum standard dummy...</p> <div class="separator-line-horrizontal-full bg-medium-gray margin-20px-tb"></div> <div class="author"> <span class="text-medium-gray text-uppercase text-extra-small d-inline-block">by <a href="blog-masonry.html" class="text-medium-gray">Herman Miller</a> | 29 April 2017</span> </div> </div> </div> </li> <!-- end post item --> <!-- start post item --> <li class="grid-item last-paragraph-no-margin text-center text-sm-start wow animate__fadeInUp" data-wow-delay="0.4s"> <div class="blog-post bg-light-gray"> <div class="blog-post-images overflow-hidden position-relative"> <a href="blog-post-layout-03.html"> <img src="image path" alt=""> <div class="blog-hover-icon"><span class="text-extra-large font-weight-300">+</span></div> </a> </div> <div class="post-details padding-40px-all md-padding-20px-all"> <a href="blog-post-layout-03.html" class="alt-font post-title text-medium text-extra-dark-gray w-100 d-block lg-w-100 margin-15px-bottom">Designers are meant to be loved, not to be understood.</a> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum standard dummy....</p> <div class="separator-line-horrizontal-full bg-medium-gray margin-20px-tb"></div> <div class="author"> <span class="text-medium-gray text-uppercase text-extra-small d-inline-block">by <a href="blog-masonry.html" class="text-medium-gray">Hugh Macleod</a> | 18 April 2017</span> </div> </div> </div> </li> <!-- end post item --> </ul> </div> </div> <!-- end post content section -->
NoteFor demo, You can please check this in blog-grid.html page.
Blog Masonry
<!-- start post content section --> <div class="row"> <div class="col-12 blog-content"> <ul class="blog-masonry blog-wrapper grid grid-loading grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col blog-post-style5 gutter-large"> <li class="grid-sizer"></li> <!-- start post item --> <li class="grid-item last-paragraph-no-margin wow animate__fadeInUp"> <div class="blog-post"> <div class="blog-post-images overflow-hidden"> <a href="blog-post-layout-01.html"> <img src="image path" alt=""> </a> <div class="blog-categories bg-white text-uppercase text-extra-small alt-font"><a href="blog-grid.html">Graphic Design</a></div> </div> <div class="post-details padding-35px-all bg-white md-padding-20px-all"> <div class="blog-hover-color"></div> <a href="blog-post-layout-01.html" class="alt-font post-title text-medium text-extra-dark-gray w-90 d-block lg-w-100 margin-5px-bottom">Without good design it’s easy to miss the mark.</a> <div class="author"> <span class="text-medium-gray text-uppercase text-extra-small d-inline-block">by <a href="blog-grid.html" class="text-medium-gray">Jay Benjamin</a> | 17 july 2017</span> </div> <div class="separator-line-horrizontal-full bg-medium-gray margin-seven-tb lg-margin-four-tb"></div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum standard dummy...</p> </div> </div> </li> <!-- end post item --> <!-- start post item --> <li class="grid-item last-paragraph-no-margin wow animate__fadeInUp"> <div class="blog-post"> <div class="blog-post-images overflow-hidden"> <a href="blog-post-layout-02.html"> <img src="image path" alt=""> </a> <div class="blog-categories bg-white text-uppercase text-extra-small alt-font"><a href="blog-grid.html">advertisement</a></div> </div> <div class="post-details padding-35px-all bg-white md-padding-20px-all"> <div class="blog-hover-color"></div> <a href="blog-post-layout-02.html" class="alt-font post-title text-medium text-extra-dark-gray w-90 d-block lg-w-100 margin-5px-bottom">Everybody can be great. Because anybody can serve.</a> <div class="author"> <span class="text-medium-gray text-uppercase text-extra-small d-inline-block">by <a href="blog-grid.html" class="text-medium-gray">Herman Miller</a> | 03 July 2017</span> </div> <div class="separator-line-horrizontal-full bg-medium-gray margin-seven-tb lg-margin-four-tb"></div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum standard dummy...</p> </div> </div> </li> <!-- end post item --> <!-- start post item --> <li class="grid-item last-paragraph-no-margin wow animate__fadeInUp"> <div class="blog-post"> <div class="blog-post-images overflow-hidden"> <a href="blog-post-layout-03.html"> <img src="image path" alt=""> </a> <div class="blog-categories bg-white text-uppercase text-extra-small alt-font"><a href="blog-grid.html">fashion</a></div> </div> <div class="post-details padding-35px-all bg-white md-padding-20px-all"> <div class="blog-hover-color"></div> <a href="blog-post-layout-03.html" class="alt-font post-title text-medium text-extra-dark-gray w-90 d-block lg-w-100 margin-5px-bottom">Never look down on anybody unless you're helping him up.</a> <div class="author"> <span class="text-medium-gray text-uppercase text-extra-small d-inline-block">by <a href="blog-grid.html" class="text-medium-gray">Jeremy Dupont</a> | 22 June 2017</span> </div> <div class="separator-line-horrizontal-full bg-medium-gray margin-seven-tb lg-margin-four-tb"></div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum standard dummy...</p> </div> </div> </li> <!-- end post item --> </ul> </div> </div> <!-- end post content section -->
NoteFor demo, You can please check this in blog-masonry.html page.
Blog Simple
<!-- start post content section --> <div class="row"> <div class="col-12 blog-content"> <ul class="blog-simple blog-wrapper grid grid-loading grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large"> <li class="grid-sizer"></li> <!-- start post item --> <li class="grid-item wow animate__fadeInUp"> <div class="blog-post blog-post-style2 margin-70px-bottom lg-margin-50px-bottom md-margin-30px-bottom xs-margin-15px-bottom"> <div class="post-details"> <span class="text-extra-small text-medium-gray text-uppercase d-block margin-10px-bottom md-margin-5px-bottom">17 july 2017</span> <span class="text-large alt-font w-90 lg-w-100 margin-15px-bottom d-block"><a href="blog-post-layout-01.html" class="text-extra-dark-gray">Everyday people are not very good designers.</a></span> <p class="w-90 sm-margin-15px-bottom sm-w-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum...</p> <div class="author border-top border-color-extra-light-gray padding-25px-top sm-padding-15px-top"> <img src="image path" alt="" class="rounded-circle"> <span class="text-medium-gray text-uppercase text-extra-small padding-15px-left">by <a href="blog-masonry.html" class="text-medium-gray">Jay Benjamin</a></span> </div> </div> </div> </li> <!-- end post item --> <!-- start post item --> <li class="grid-item wow animate__fadeInUp" data-wow-delay="0.2s"> <div class="blog-post blog-post-style2 margin-70px-bottom lg-margin-50px-bottom md-margin-30px-bottom xs-margin-15px-bottom"> <div class="post-details"> <span class="text-extra-small text-medium-gray text-uppercase d-block margin-10px-bottom md-margin-5px-bottom">03 July 2017</span> <span class="text-large alt-font w-90 lg-w-100 margin-15px-bottom d-block"><a href="blog-post-layout-04.html" class="text-extra-dark-gray">Design is not for philosophy it's for life.</a></span> <p class="w-90 sm-margin-15px-bottom sm-w-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum...</p> <div class="author border-top border-color-extra-light-gray padding-25px-top sm-padding-15px-top"> <img src="image path" alt="" class="rounded-circle"> <span class="text-medium-gray text-uppercase text-extra-small padding-15px-left">by <a href="blog-masonry.html" class="text-medium-gray">Herman Miller</a></span> </div> </div> </div> </li> <!-- end post item --> <!-- start post item --> <li class="grid-item wow animate__fadeInUp" data-wow-delay="0.4s"> <div class="blog-post blog-post-style2 margin-70px-bottom lg-margin-50px-bottom md-margin-30px-bottom xs-margin-15px-bottom"> <div class="post-details"> <span class="text-extra-small text-medium-gray text-uppercase d-block margin-10px-bottom md-margin-5px-bottom">22 June 2017</span> <span class="text-large alt-font w-90 lg-w-100 margin-15px-bottom d-block"><a href="blog-post-layout-02.html" class="text-extra-dark-gray">There is no such thing as a boring project.</a></span> <p class="w-90 sm-margin-15px-bottom sm-w-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum...</p> <div class="author border-top border-color-extra-light-gray padding-25px-top sm-padding-15px-top"> <img src="image path" alt="" class="rounded-circle"> <span class="text-medium-gray text-uppercase text-extra-small padding-15px-left">by <a href="blog-masonry.html" class="text-medium-gray">Jeremy Dupont</a></span> </div> </div> </div> </li> <!-- end post item --> <!-- start post item --> <li class="grid-item wow animate__fadeInUp" data-wow-delay="0.6s"> <div class="blog-post blog-post-style2 margin-70px-bottom lg-margin-50px-bottom md-margin-30px-bottom xs-margin-15px-bottom"> <div class="post-details"> <span class="text-extra-small text-medium-gray text-uppercase d-block margin-10px-bottom md-margin-5px-bottom">02 June 2017</span> <span class="text-large alt-font w-90 lg-w-100 margin-15px-bottom d-block"><a href="blog-post-layout-03.html" class="text-extra-dark-gray">I won't give up my day job of design.</a></span> <p class="w-90 sm-margin-15px-bottom sm-w-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum...</p> <div class="author border-top border-color-extra-light-gray padding-25px-top sm-padding-15px-top"> <img src="image path" alt="" class="rounded-circle"> <span class="text-medium-gray text-uppercase text-extra-small padding-15px-left">by <a href="blog-masonry.html" class="text-medium-gray">Hugh Macleod</a></span> </div> </div> </div> </li> <!-- end post item --> </ul> </div> </div> <!-- end post content section -->
NoteFor demo, You can please check this in blog-simple.html page.
Blog Clean
<!-- start post content section --> <div class="row"> <div class="col-12 blog-content"> <ul class="blog-clean blog-wrapper grid grid-loading grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large"> <li class="grid-sizer"></li> <!-- start post item --> <li class="grid-item wow animate__fadeInUp"> <div class="blog-post blog-post-style2 margin-50px-bottom md-margin-30px-bottom sm-margin-20px-bottom xs-margin-10px-bottom"> <div class="blog-post-images overflow-hidden margin-25px-bottom sm-margin-15px-bottom"> <a href="blog-post-layout-01.html"> <img src="image path" alt=""> </a> </div> <div class="post-details"> <a href="blog-post-layout-01.html" class="post-title text-medium text-extra-dark-gray w-90 d-block lg-w-100">Recognizing the need is the primary condition for design.</a> <div class="separator-line-horrizontal-full bg-medium-light-gray margin-20px-tb sm-margin-15px-tb"></div> <div class="author"> <img src="image path" alt="" class="rounded-circle"> <span class="text-medium-gray text-uppercase text-extra-small padding-15px-left d-inline-block">by <a href="home-blog-grid.html" class="text-medium-gray">Jay Benjamin</a> | 13 May 2017</span> </div> </div> </div> </li> <!-- end post item --> <!-- start post item --> <li class="grid-item wow animate__fadeInUp" data-wow-delay="0.2s"> <div class="blog-post blog-post-style2 margin-50px-bottom md-margin-30px-bottom sm-margin-20px-bottom xs-margin-10px-bottom"> <div class="blog-post-images overflow-hidden margin-25px-bottom sm-margin-15px-bottom"> <a href="blog-post-layout-02.html"> <img src="image path" alt=""> </a> </div> <div class="post-details"> <a href="blog-post-layout-02.html" class="post-title text-medium text-extra-dark-gray w-90 d-block lg-w-100">Good design is obvious. Great design is transparent.</a> <div class="separator-line-horrizontal-full bg-medium-light-gray margin-20px-tb sm-margin-15px-tb"></div> <div class="author"> <img src="image path" alt="" class="rounded-circle"> <span class="text-medium-gray text-uppercase text-extra-small padding-15px-left d-inline-block">by <a href="home-blog-grid.html" class="text-medium-gray">Herman Miller</a> | 29 April 2017</span> </div> </div> </div> </li> <!-- end post item --> <!-- start post item --> <li class="grid-item wow animate__fadeInUp" data-wow-delay="0.4s"> <div class="blog-post blog-post-style2 margin-50px-bottom md-margin-30px-bottom sm-margin-20px-bottom xs-margin-10px-bottom"> <div class="blog-post-images overflow-hidden margin-25px-bottom sm-margin-15px-bottom"> <a href="blog-post-layout-03.html"> <img src="image path" alt=""> </a> </div> <div class="post-details"> <a href="blog-post-layout-03.html" class="post-title text-medium text-extra-dark-gray w-90 d-block lg-w-100">Design is not just what it looks like and feels like.</a> <div class="separator-line-horrizontal-full bg-medium-light-gray margin-20px-tb sm-margin-15px-tb"></div> <div class="author"> <img src="image path" alt="" class="rounded-circle"> <span class="text-medium-gray text-uppercase text-extra-small padding-15px-left d-inline-block">by <a href="home-blog-grid.html" class="text-medium-gray">Hugh Macleod</a> | 18 April 2017</span> </div> </div> </div> </li> <!-- end post item --> <!-- start post item --> <li class="grid-item wow animate__fadeInUp" data-wow-delay="0.6s"> <div class="blog-post blog-post-style2 margin-50px-bottom md-margin-30px-bottom sm-margin-20px-bottom xs-margin-10px-bottom"> <div class="blog-post-images overflow-hidden margin-25px-bottom sm-margin-15px-bottom"> <a href="blog-post-layout-04.html"> <img src="image path" alt=""> </a> </div> <div class="post-details"> <a href="blog-post-layout-04.html" class="post-title text-medium text-extra-dark-gray w-90 d-block lg-w-100">Everything is designed. Few things are designed well.</a> <div class="separator-line-horrizontal-full bg-medium-light-gray margin-20px-tb sm-margin-15px-tb"></div> <div class="author"> <img src="image path" alt="" class="rounded-circle"> <span class="text-medium-gray text-uppercase text-extra-small padding-15px-left d-inline-block">by <a href="home-blog-grid.html" class="text-medium-gray">Willie Clark</a> | 31 March 2017</span> </div> </div> </div> </li> <!-- end post item --> </ul> </div> </div> <!-- end post content section -->
NoteFor demo, You can please check this in blog-clean.html page.
Blog Image
<!-- start post content section --> <div class="row"> <div class="col-12 blog-content"> <ul class="blog-zoom-image blog-wrapper grid grid-loading grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-1col xs-grid-1col blog-post-style4 gutter-large"> <li class="grid-sizer"></li> <!-- start post item --> <li class="grid-item wow animate__fadeInUp"> <figure> <div class="blog-img bg-extra-dark-gray"> <a href="blog-post-layout-03.html"><img src="image path" alt="" ></a> </div> <figcaption> <div class="portfolio-hover-main text-start"> <div class="blog-hover-box align-bottom"> <span class="post-author text-extra-small text-medium-gray text-uppercase d-block margin-5px-bottom sm-margin-5px-bottom">25 April 2017 | by <a href="blog-classic.html" class="text-medium-gray">Jay Benjamin</a></span> <h6 class="alt-font d-block text-white-2 font-weight-600 mb-0"><a href="blog-post-layout-03.html" class="text-white-2 text-deep-pink-hover">Get to know the world</a></h6> <p class="text-medium-gray margin-10px-top blog-hover-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> </figcaption> </figure> </li> <!-- end post item --> <!-- start post item --> <li class="grid-item wow animate__fadeInUp" data-wow-delay="0.2s"> <figure> <div class="blog-img bg-extra-dark-gray"> <a href="blog-post-layout-04.html"><img src="image path" alt="" ></a> </div> <figcaption> <div class="portfolio-hover-main text-start"> <div class="blog-hover-box align-bottom"> <span class="post-author text-extra-small text-medium-gray text-uppercase d-block margin-5px-bottom sm-margin-5px-bottom">25 April 2017 | by <a href="blog-classic.html" class="text-medium-gray">Jay Benjamin</a></span> <h6 class="alt-font d-block text-white-2 font-weight-600 mb-0"><a href="blog-post-layout-04.html" class="text-white-2 text-deep-pink-hover">The most beautiful sky</a></h6> <p class="text-medium-gray margin-10px-top blog-hover-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> </figcaption> </figure> </li> <!-- end post item --> <!-- start post item --> <li class="grid-item wow animate__fadeInUp" data-wow-delay="0.4s"> <figure> <div class="blog-img bg-extra-dark-gray"> <a href="blog-post-layout-05.html"><img src="image path" alt="" ></a> </div> <figcaption> <div class="portfolio-hover-main text-start"> <div class="blog-hover-box align-bottom"> <span class="post-author text-extra-small text-medium-gray text-uppercase d-block margin-5px-bottom sm-margin-5px-bottom">25 April 2017 | by <a href="blog-classic.html" class="text-medium-gray">Jay Benjamin</a></span> <h6 class="alt-font d-block text-white-2 font-weight-600 mb-0"><a href="blog-post-layout-05.html" class="text-white-2 text-deep-pink-hover">I can't change the rule</a></h6> <p class="text-medium-gray margin-10px-top blog-hover-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> </figcaption> </figure> </li> <!-- end post item --> </ul> </div> </div> <!-- end post content section -->
NoteFor demo, You can please check this in blog-images.html page.
Blog Only Text
<!-- start post content section --> <div class="row"> <div class="col-12 blog-content"> <ul class="blog-text blog-wrapper grid grid-loading grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large"> <li class="grid-sizer"></li> <!-- start post item --> <li class="grid-item wow animate__fadeInUp"> <div class="blog-post blog-post-style7 border border-color-light-gray padding-fourteen-all lg-padding-ten-all sm-padding-30px-all bg-white"> <div class="post-details"> <span class="text-extra-small text-uppercase d-block margin-four-bottom md-margin-two-bottom">17 july 2017</span> <span class="text-large alt-font margin-50px-bottom md-margin-30px-bottom d-block"><a href="blog-post-layout-01.html">Design can speak the tongue of art with the force of commerce.</a></span> <div class="author padding-10px-top position-relative"> <span class="text-uppercase text-extra-small">by <a href="javascript:void(0);">Herman Miller</a></span> </div> </div> </div> </li> <!-- end post item --> <!-- start post item --> <li class="grid-item wow animate__fadeInUp" data-wow-delay="0.2s"> <div class="blog-post blog-post-style7 border border-color-light-gray padding-fourteen-all lg-padding-ten-all sm-padding-30px-all bg-white"> <div class="post-details"> <span class="text-extra-small text-uppercase d-block margin-four-bottom md-margin-two-bottom">03 July 2017</span> <span class="text-large alt-font margin-50px-bottom md-margin-30px-bottom d-block"><a href="blog-post-layout-02.html">If your business isn’t mobile friendly, your business is dead.</a></span> <div class="author padding-10px-top position-relative"> <span class="text-uppercase text-extra-small">by <a href="javascript:void(0);">Jeremy Dupont</a></span> </div> </div> </div> </li> <!-- end post item --> <!-- start post item --> <li class="grid-item wow animate__fadeInUp" data-wow-delay="0.4s"> <div class="blog-post blog-post-style7 border border-color-light-gray padding-fourteen-all lg-padding-ten-all sm-padding-30px-all bg-white"> <div class="post-details"> <span class="text-extra-small text-uppercase d-block margin-four-bottom md-margin-two-bottom">22 June 2017</span> <span class="text-large alt-font margin-50px-bottom md-margin-30px-bottom d-block"><a href="blog-post-layout-03.html">Design is as much an act of spacing as an act of marking.</a></span> <div class="author padding-10px-top position-relative"> <span class="text-uppercase text-extra-small">by <a href="javascript:void(0);">Hugh Macleod</a></span> </div> </div> </div> </li> <!-- end post item --> </ul> </div> </div> <!-- end post content section -->
NoteFor demo, You can please check this in blog-only-text.html page.
Blog Left Sidebar
<!-- start blog main section --> <div class="row justify-content-center flex-lg-row-reverse"> <main class="col-12 col-xl-9 col-lg-8 left-sidebar md-margin-60px-bottom sm-margin-40px-bottom"> <!-- start post item --> <div class="col-12 blog-post-content margin-60px-bottom sm-margin-30px-bottom text-center text-md-start"> <div class="blog-image"><a href="blog-standard-post.html"><img src="image path" alt=""/></a></div> <div class="blog-text border-all d-inline-block w-100"> <div class="content padding-50px-all sm-padding-20px-all"> <div class="text-medium-gray text-extra-small margin-5px-bottom text-uppercase alt-font"><span>Posted on June 30, 2017</span> | <span><a href="blog-grid.html" class="text-medium-gray ">Branding</a></span></div> <a href="blog-standard-post.html" class="text-extra-dark-gray text-uppercase alt-font text-large font-weight-600 margin-15px-bottom d-block">This is a standard post with a preview image</a> <p class="m-0">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry industry’s standard dummy text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text.</p> </div> <div class="row row-cols-1 row-cols-md-3 m-0 author border-top border-color-extra-light-gray text-center"> <div class="col d-flex flex-column justify-content-center name padding-15px-all"> <div> <img src="image path" alt="" class="rounded-circle w-30px"> <span class="text-medium-gray text-uppercase text-extra-small alt-font padding-10px-left">by <a href="blog-grid.html" class="text-medium-gray">Paul Scrivens</a></span> </div> </div> <div class="col d-flex flex-column justify-content-center name border-lr padding-15px-all border-color-extra-light-gray sm-no-border"> <div> <a href="#" class="text-extra-small alt-font text-medium-gray text-uppercase"><i class="fa-regular fa-heart margin-5px-right text-small"></i>5 like(s)</a> </div> </div> <div class="col d-flex flex-column justify-content-center name padding-15px-all"> <div> <a href="#" class="text-extra-small alt-font text-medium-gray text-uppercase"><i class="fa-regular fa-comment margin-5px-right text-small"></i>3 Comment(s)</a> </div> </div> </div> </div> </div> <!-- end post item --> <!-- start pagination --> <div class="col-12 text-center margin-100px-top md-margin-50px-top wow animate__fadeInUp"> <div class="pagination text-small text-uppercase text-extra-dark-gray"> <ul class="mx-auto"> <li><a href="#"><i class="fa-solid fa-arrow-left-long margin-5px-right d-none d-md-inline-block"></i> Prev</a></li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">Next <i class="fa-solid fa-arrow-right-long margin-5px-left d-none d-md-inline-block"></i></a></li> </ul> </div> </div> <!-- end pagination --> </main> <!-- end blog main section --> <!-- start blog aside section --> <aside class="col-12 col-xl-3 col-lg-4 col-md-7"> ... </aside> </div> <!-- end blog aside section -->
NoteFor demo, You can please check this in blog-standard-with-left-sidebar.html page.
Blog Right Sidebar
<!-- start blog main section --> <div class="row justify-content-center"> <main class="col-12 col-xl-9 col-lg-8 right-sidebar md-margin-60px-bottom sm-margin-40px-bottom"> <!-- start post item --> <div class="col-12 blog-post-content margin-60px-bottom sm-margin-30px-bottom text-center text-md-start"> <div class="blog-image"><a href="blog-standard-post.html"><img src="image path" alt=""/></a></div> <div class="blog-text border-all d-inline-block w-100"> <div class="content padding-50px-all sm-padding-20px-all"> <div class="text-medium-gray text-extra-small margin-5px-bottom text-uppercase alt-font"><span>Posted on June 30, 2017</span> | <span><a href="blog-grid.html" class="text-medium-gray ">Branding</a></span></div> <a href="blog-standard-post.html" class="text-extra-dark-gray text-uppercase alt-font text-large font-weight-600 margin-15px-bottom d-block">This is a standard post with a preview image</a> <p class="m-0">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry industry’s standard dummy text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text.</p> </div> <div class="row row-cols-1 row-cols-md-3 m-0 author border-top border-color-extra-light-gray text-center"> <div class="col d-flex flex-column justify-content-center name padding-15px-all"> <div> <img src="image path" alt="" class="rounded-circle w-30px"> <span class="text-medium-gray text-uppercase text-extra-small alt-font padding-10px-left">by <a href="blog-grid.html" class="text-medium-gray">Paul Scrivens</a></span> </div> </div> <div class="col d-flex flex-column justify-content-center name border-lr padding-15px-all border-color-extra-light-gray sm-no-border"> <div> <a href="#" class="text-extra-small alt-font text-medium-gray text-uppercase"><i class="fa-regular fa-heart margin-5px-right text-small"></i>5 like(s)</a> </div> </div> <div class="col d-flex flex-column justify-content-center name padding-15px-all"> <div> <a href="#" class="text-extra-small alt-font text-medium-gray text-uppercase"><i class="fa-regular fa-comment margin-5px-right text-small"></i>3 Comment(s)</a> </div> </div> </div> </div> </div> <!-- end post item --> <!-- start pagination --> <div class="col-12 text-center margin-100px-top md-margin-50px-top wow animate__fadeInUp"> <div class="pagination text-small text-uppercase text-extra-dark-gray"> <ul class="mx-auto"> <li><a href="#"><i class="fa-solid fa-arrow-left-long margin-5px-right d-none d-md-inline-block"></i> Prev</a></li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">Next <i class="fa-solid fa-arrow-right-long margin-5px-left d-none d-md-inline-block"></i></a></li> </ul> </div> </div> <!-- end pagination --> </main> <!-- end blog main section --> <!-- start blog aside section --> <aside class="col-12 col-xl-3 col-lg-4 col-md-7"> ... </aside> <!-- end blog aside section --> </div> <!-- end blog main section -->
NoteFor demo, You can please check this in blog-standard-with-right-sidebar.html page.
Blog Post Types
Pofo provides 8 different types of post types:
- Blog Gallery Post
- Blog Slider Post
- Blog HTML5 Video Post
- Blog Youtube Video Post
- Blog Vimeo Video Post
- Blog Audio Post
- Blog Blockquote Post
Blog Gallery Post
<!-- start gallery post --> <div class="col-12"> <ul class="hover-option4 lightbox-gallery portfolio-wrapper grid grid-loading grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-small"> <li class="grid-sizer"></li> <!-- start portfolio item --> <li class="grid-item"> <a href="image path" title="Lightbox gallery image title..." data-group="lightbox-gallery"> <figure> <div class="portfolio-img bg-extra-dark-gray"><img src="image path" alt="" class="project-img-gallery"/></div> <figcaption> <div class="portfolio-hover-main d-flex justify-content-center align-items-center"> <div class="portfolio-hover-content position-relative"> <i class="ti-zoom-in text-white-2 fa-2x"></i> </div> </div> </figcaption> </figure> </a> </li> <!-- end portfolio item --> <!-- start portfolio item --> <li class="grid-item"> <a href="image path" title="Lightbox gallery image title..." data-group="lightbox-gallery"> <figure> <div class="portfolio-img bg-extra-dark-gray"><img src="image path" alt="" class="project-img-gallery"/></div> <figcaption> <div class="portfolio-hover-main d-flex justify-content-center align-items-center"> <div class="portfolio-hover-content position-relative"> <i class="ti-zoom-in text-white-2 fa-2x"></i> </div> </div> </figcaption> </figure> </a> </li> <!-- end portfolio item --> <!-- start portfolio item --> <li class="grid-item"> <a href="image path" title="Lightbox gallery image title..." data-group="lightbox-gallery"> <figure> <div class="portfolio-img bg-extra-dark-gray"><img src="image path" alt="" class="project-img-gallery"/></div> <figcaption> <div class="portfolio-hover-main d-flex justify-content-center align-items-center"> <div class="portfolio-hover-content position-relative"> <i class="ti-zoom-in text-white-2 fa-2x"></i> </div> </div> </figcaption> </figure> </a> </li> <!-- end portfolio item --> </ul> </div> <!-- end gallery post -->
NoteFor demo, You can please check this in blog-gallery-post.html page.
Blog Slider Post
<!-- start gallery post --> <div class="col-12 blog-post-content margin-60px-bottom sm-margin-30px-bottom text-center text-md-start"> <div class="swiper white-move" data-slider-options='{ "loop": true, "slidesPerView": "1", "allowTouchMove":true, "autoplay": { "delay": 5000, "disableOnInteraction": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "navigation": { "nextEl": ".swiper-button-next", "prevEl": ".swiper-button-prev" }, "pagination": { "el": ".swiper-pagination", "clickable": true } }'> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="image path" alt=""></div> <div class="swiper-slide"><img src="image path" alt=""></div> <div class="swiper-slide"><img src="image path" alt=""></div> </div> <div class="swiper-pagination swiper-pagination-square swiper-pagination-white"></div> <div class="swiper-button-next light"><i class="ti-angle-right"></i></div> <div class="swiper-button-prev light"><i class="ti-angle-left"></i></div> </div> <div class="blog-text border-all d-inline-block w-100"> <div class="content padding-50px-all sm-padding-20px-all"> <div class="text-medium-gray text-extra-small margin-5px-bottom text-uppercase alt-font"><span>Posted on June 02, 2017</span> | <span><a href="blog-grid.html" class="text-medium-gray ">Designing</a></span></div> <a href="blog-slider-post.html" class="text-extra-dark-gray text-uppercase alt-font text-large font-weight-600 margin-15px-bottom d-block">This is a standard post with a images slider</a> <p class="m-0">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry industry’s standard dummy text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text.</p> </div> <div class="row row-cols-1 row-cols-md-3 m-0 author border-top border-color-extra-light-gray text-center"> <div class="col d-flex flex-column justify-content-center padding-15px-all"> <div> <img src="image path" alt="" class="rounded-circle w-30px"> <span class="text-medium-gray text-uppercase text-extra-small alt-font padding-10px-left">by <a href="blog-grid.html" class="text-medium-gray">Herman Miller</a></span> </div> </div> <div class="col d-flex flex-column justify-content-centerborder-lr padding-15px-all border-lr border-color-extra-light-gray xs-no-border"> <div> <a href="#" class="text-extra-small alt-font text-medium-gray text-uppercase"><i class="fa-regular fa-heart margin-5px-right text-small"></i>5 like(s)</a> </div> </div> <div class="col d-flex flex-column justify-content-center padding-15px-all"> <div> <a href="#" class="text-extra-small alt-font text-medium-gray text-uppercase"><i class="fa-regular fa-comment margin-5px-right text-small"></i>3 Comment(s)</a> </div> </div> </div> </div> </div> <!-- end gallery post -->
NoteFor demo, You can please check this in blog-slider-post.html page.
Blog HTML5 Video Post
<!-- start post item --> <div class="col-12 blog-post-content margin-60px-bottom sm-margin-30px-bottom text-center text-md-start"> <div class="fit-videos"> <!-- start vimeo video --> <video autoplay muted loop controls><source src="video/video.mp4" type="video/mp4"></video> <!-- end vimeo video --> </div> <div class="blog-text border-all d-inline-block w-100"> <div class="content padding-50px-all sm-padding-20px-all"> <div class="text-medium-gray text-extra-small margin-5px-bottom text-uppercase alt-font"><span>Posted on July 10, 2016</span> | <span><a href="blog-grid.html" class="text-medium-gray ">Branding</a></span></div> <a href="blog-html5-video-post.html" class="text-extra-dark-gray text-uppercase alt-font text-large font-weight-600 margin-15px-bottom d-block">This is a Standard post with a HTML5 Video</a> <p class="m-0">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry industry’s standard dummy text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text.</p> </div> <div class="row row-cols-1 row-cols-md-3 m-0 author border-top border-color-extra-light-gray text-center"> <div class="col d-flex flex-column justify-content-center padding-15px-all"> <div> <img src="image path" alt="" class="rounded-circle w-30px"> <span class="text-medium-gray text-uppercase text-extra-small alt-font padding-10px-left">by <a href="blog-grid.html" class="text-medium-gray">Paul Scrivens</a></span> </div> </div> <div class="col d-flex flex-column justify-content-centerborder-lr padding-15px-all border-lr border-color-extra-light-gray xs-no-border"> <div> <a href="#" class="text-extra-small alt-font text-medium-gray text-uppercase"><i class="fa-regular fa-heart margin-5px-right text-small"></i>5 like(s)</a> </div> </div> <div class="col d-flex flex-column justify-content-center padding-15px-all"> <div> <a href="#" class="text-extra-small alt-font text-medium-gray text-uppercase"><i class="fa-regular fa-comment margin-5px-right text-small"></i>3 Comment(s)</a> </div> </div> </div> </div> </div> <!-- end post item -->
NoteFor demo, You can please check this in blog-html5-video-post.html page.
Blog Youtube Video Post
<!-- start post item --> <div class="col-12 blog-post-content margin-60px-bottom sm-margin-30px-bottom text-center text-md-start"> <div class="fit-videos"> <!-- start youtube video --> <iframe width="560" height="315" src="video url" allowfullscreen></iframe> <!-- end youtube video --> </div> <div class="blog-text border-all d-inline-block w-100"> <div class="content padding-50px-all sm-padding-20px-all"> <div class="text-medium-gray text-extra-small margin-5px-bottom text-uppercase alt-font"><span>Posted on April 11, 2016</span> | <span><a href="blog-grid.html" class="text-medium-gray ">Onepage Fashion</a></span></div> <a href="blog-youtube-video-post.html" class="text-extra-dark-gray text-uppercase alt-font text-large font-weight-600 margin-15px-bottom d-block">This is a Standard post with a youtube Video</a> <p class="m-0">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry industry’s standard dummy text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text.</p> </div> <div class="row row-cols-1 row-cols-md-3 m-0 author border-top border-color-extra-light-gray text-center"> <div class="col d-flex flex-column justify-content-center padding-15px-all"> <div> <img src="image path" alt="" class="rounded-circle w-30px"> <span class="text-medium-gray text-uppercase text-extra-small alt-font padding-10px-left">by <a href="blog-grid.html" class="text-medium-gray">Jay Benjamin</a></span> </div> </div> <div class="col d-flex flex-column justify-content-centerborder-lr padding-15px-all border-lr border-color-extra-light-gray xs-no-border"> <div> <a href="#" class="text-extra-small alt-font text-medium-gray text-uppercase"><i class="fa-regular fa-heart margin-5px-right text-small"></i>5 like(s)</a> </div> </div> <div class="col d-flex flex-column justify-content-center padding-15px-all"> <div> <a href="#" class="text-extra-small alt-font text-medium-gray text-uppercase"><i class="fa-regular fa-comment margin-5px-right text-small"></i>3 Comment(s)</a> </div> </div> </div> </div> </div> <!-- end post item -->
NoteFor demo, You can please check this in blog-youtube-video-post.html page.
Blog Vimeo Video Post
<!-- start post item --> <div class="col-12 blog-post-content margin-60px-bottom sm-margin-30px-bottom text-center text-md-start"> <div class="fit-videos"> <!-- start vimeo video --> <iframe src="video url" width="640" height="360" allowfullscreen></iframe> <!-- end vimeo video --> </div> <div class="blog-text border-all d-inline-block w-100"> <div class="content padding-50px-all sm-padding-20px-all"> <div class="text-medium-gray text-extra-small margin-5px-bottom text-uppercase alt-font"><span>Posted on August 28, 2016</span> | <span><a href="blog-grid.html" class="text-medium-gray ">Feature</a></span></div> <a href="blog-vimeo-video-post.html" class="text-extra-dark-gray text-uppercase alt-font text-large font-weight-600 margin-15px-bottom d-block">This is a Standard post with an Embedded Video</a> <p class="m-0">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry industry’s standard dummy text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text.</p> </div> <div class="row row-cols-1 row-cols-md-3 m-0 author border-top border-color-extra-light-gray text-center"> <div class="col d-flex flex-column justify-content-center padding-15px-all"> <div> <img src="image path" alt="" class="rounded-circle w-30px"> <span class="text-medium-gray text-uppercase text-extra-small alt-font padding-10px-left">by <a href="blog-grid.html" class="text-medium-gray">Hugh Macleod</a></span> </div> </div> <div class="col d-flex flex-column justify-content-centerborder-lr padding-15px-all border-lr border-color-extra-light-gray xs-no-border"> <div> <a href="#" class="text-extra-small alt-font text-medium-gray text-uppercase"><i class="fa-regular fa-heart margin-5px-right text-small"></i>5 like(s)</a> </div> </div> <div class="col d-flex flex-column justify-content-center padding-15px-all"> <div> <a href="#" class="text-extra-small alt-font text-medium-gray text-uppercase"><i class="fa-regular fa-comment margin-5px-right text-small"></i>3 Comment(s)</a> </div> </div> </div> </div> </div> <!-- end post item -->
NoteFor demo, You can please check this in blog-vimeo-video-post.html page.
Blog Audio Post
<!-- start post item --> <div class="col-12 blog-post-content margin-60px-bottom sm-margin-30px-bottom text-center text-md-start"> <div class="fit-videos"> <!-- start audio --> <iframe class="margin-45px-bottom h-300px w-100" style="border: 0;" src="audio url"></iframe> <!-- end audio --> </div> <div class="blog-text border-all d-inline-block w-100"> <div class="content padding-50px-all sm-padding-20px-all"> <div class="text-medium-gray text-extra-small margin-5px-bottom text-uppercase alt-font"><span>Posted on August 28, 2016</span> | <span><a href="blog-grid.html" class="text-medium-gray ">Feature</a></span></div> <a href="blog-vimeo-video-post.html" class="text-extra-dark-gray text-uppercase alt-font text-large font-weight-600 margin-15px-bottom d-block">This is a Standard post with an Embedded Video</a> <p class="m-0">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry industry’s standard dummy text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text.</p> </div> <div class="row row-cols-1 row-cols-md-3 m-0 author border-top border-color-extra-light-gray text-center"> <div class="col d-flex flex-column justify-content-center padding-15px-all"> <div> <img src="image path" alt="" class="rounded-circle w-30px"> <span class="text-medium-gray text-uppercase text-extra-small alt-font padding-10px-left">by <a href="blog-grid.html" class="text-medium-gray">Hugh Macleod</a></span> </div> </div> <div class="col d-flex flex-column justify-content-centerborder-lr padding-15px-all border-lr border-color-extra-light-gray xs-no-border"> <div> <a href="#" class="text-extra-small alt-font text-medium-gray text-uppercase"><i class="fa-regular fa-heart margin-5px-right text-small"></i>5 like(s)</a> </div> </div> <div class="col d-flex flex-column justify-content-center padding-15px-all"> <div> <a href="#" class="text-extra-small alt-font text-medium-gray text-uppercase"><i class="fa-regular fa-comment margin-5px-right text-small"></i>3 Comment(s)</a> </div> </div> </div> </div> </div> <!-- end post item -->
NoteFor demo, You can please check this in blog-audio-post.html page.
Blog Blockquote Post
<!-- start post item --> <div class="col-12 blog-post-content text-center text-md-start"> <div class="blog-image"> <blockquote class="bg-extra-dark-gray"> <h6 class="text-white-2 font-weight-300 line-height-35 alt-font margin-15px-bottom">Thousands of candles can be lighted from a single candle, and the life of the candle will not be shortened. Happiness never decreases by being shared.</h6> </blockquote> </div> <div class="blog-text border-all d-inline-block w-100"> <div class="content padding-50px-all sm-padding-20px-all"> <div class="text-medium-gray text-extra-small margin-5px-bottom text-uppercase alt-font"><span>Posted on June 14, 2015</span> | <span><a href="blog-grid.html" class="text-medium-gray ">Designing</a></span></div> <a href="blog-blockquote-post.html" class="text-extra-dark-gray text-uppercase alt-font text-large font-weight-600 margin-15px-bottom d-block">This is a Standard post with a blockquote</a> <p class="m-0">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry industry’s standard dummy text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text.</p> </div> <div class="row row-cols-1 row-cols-md-3 m-0 author border-top border-color-extra-light-gray text-center"> <div class="col d-flex flex-column justify-content-center padding-15px-all"> <div> <img src="image path" alt="" class="rounded-circle w-30px"> <span class="text-medium-gray text-uppercase text-extra-small alt-font padding-10px-left">by <a href="blog-grid.html" class="text-medium-gray">Paul Scrivens</a></span> </div> </div> <div class="col border-lr d-flex flex-column justify-content-centerborder-lr padding-15px-all border-color-extra-light-gray xs-no-border"> <div> <a href="#" class="text-extra-small alt-font text-medium-gray text-uppercase"><i class="fa-regular fa-heart margin-5px-right text-small"></i>5 like(s)</a> </div> </div> <div class="col d-flex flex-column justify-content-center padding-15px-all"> <div> <a href="#" class="text-extra-small alt-font text-medium-gray text-uppercase"><i class="fa-regular fa-comment margin-5px-right text-small"></i>3 Comment(s)</a> </div> </div> </div> </div> </div> <!-- end post item -->
NoteFor demo, You can please check this in blog-blockquote-post.html page.
Form Settings
Pofo contains different types of ready to use forms in overall template files as mentioned below:
Contact Us
Contact us form will not work unless you have your files running on a hosting server with PHP / JS. When you have your files ready on your hosting server, you need to edit the settings to make the email function work.
Open /email-templates/contact.php and change your Receiver Email Address at the top from info@yourdomain.com to your real email address, same way you can change subject line from "Contact us form details" as per your need. Also replace yourdomain.com with your real domain name in logo image url in the email body template (http://www.yourdomain.com/images/logo-email.png).
Please feel free to contact us in case if your email feature does not work because some server settings do not allow normal PHP email function.
NoteYou can get contact us form code from contact-form.html page.
Project Inquiry
Project inquiry form will not work unless you have your files running on a hosting server with PHP / JS. When you have your files ready on your hosting server, you need to edit the settings to make the email function work.
Open /email-templates/project-contact.php and change your Receiver Email Address at the top from info@yourdomain.com to your real email address, same way you can change subject line from "Contact us form details" as per your need. Also replace yourdomain.com with your real domain name in logo image url in the email body template (http://www.yourdomain.com/images/logo-email.png).
Please feel free to contact us in case if your email feature does not work because some server settings do not allow normal PHP email function.
NoteYou can get project inquiry form code from contact-form.html page.
Email Subscription
Your email subscription form will not work unless you have your files running on a hosting server with PHP / JS. When you have your files ready on your hosting server, you need to edit the settings to make the email function work.
Open /email-templates/subscribe-newsletter.php and change your Receiver Email Address at the top from info@yourdomain.com to your real email address, same way you can change subject line from "Newsletter Subscription" as per your need. Also replace yourdomain.com with your real domain name in logo image url in the email body template (http://www.yourdomain.com/images/logo.png).
If you want to integrate your Mailchimp account, then you do not need to set above details but you only need to set Mailchimp credentials in that same file like YOUR_MAILCHIMP_API_KEY and YOUR_MAILCHIMP_LIST_ID and also change enable_mailchimp to yes.
Please feel free to contact us in case if your email feature does not work because some server settings do not allow normal PHP email function.
NoteYou can get email subscription form code from subscribe.html page.
Credits
We would really love to take this opportunity to appreciate guys whose items were helpful to us to make Pofo a really beautiful theme for our awesome users:
Images and Videos
JS Libraries
A big thanks to these guys!
Version 3.2 - Current Version
Released on 08 February 2024
- Update: Upgraded whole template HTML/CSS/JS to Bootstrap 5.3.2
- Update: Updated Swiper slider with latest version
- Update: Updated Images loaded with latest version
- Update: Updated Font Awesome icon library to latest
- Added: Added GDPR cookies popup
Version 3.1
Released on 24 February 2022
- Fixed: Fixed header menu navigation issue in iOS 15
Version 3.0
Released on 13 October 2021
- Update: Upgraded whole template HTML/CSS/JS to Bootstrap 5.1.0
- Update: Updated Swiper slider with latest version
- Update: Updated Animated headlines with latest version
- Update: Updated Font Awesome icon library to latest
- Remove: Removed some JS files - modernizr.js, jquery.stellar.js, html5shiv.js, instafeed.min.js, jquery.easing.1.3.js, skill.bars.jquery.js
- Fixed: Fixed some CSS and JS issues
Version 2.3
Released on 30 August 2020
- Added: Added new home page demo for classic business
- Added: Added icon with text style element
- Added: Added fancy text box style element
- Added: Added button style element
- Added: Added list style element
Version 2.2
Released on 02 July 2020
- Changed: Changed Instagram feed API to latest version and removed the legacy API which is shut down now
Version 2.1
Released on 26 November 2019
- Added: Added new home page demo for creative minimalist portfolio
- Added: Added clean modern footer style
- Added: Added metro photo gallery
- Added: Added justified photo gallery
- Added: Added portfolio tab style element
- Added: Added award counter style element
Version 2.0
Released on 27 March 2019
- Update: Upgraded whole template HTML/CSS/JS to Bootstrap 4.3.1
- Update: Updated Font Awesome icon library to latest
- Update: Updated jQuery appear with latest version
- Update: Updated jQuery countdown to latest version
- Update: Updated justified gallery library to latest
- Update: Updated Swiper slider with latest version
- Update: Updated themify font icon library with latest
- Fix: Fixed some minor HTML, CSS and JS code
- Fix: Fixed Revolution mobile text wrap issue
Version 1.3
Released on 18 July 2018
- Added: Added new home page demo for creative agency
- Fix: Fixed some minor CSS and JS code
- Update: Updated Font Awesome icon library to latest
Version 1.2
Released on 05 May 2018
- Added: Added vertical tab style element
- Added: Added new sticky top bar (mini header) header style
- Update: Updated retina JS version to latest
- Update: Improved one page menu navigation
- Update: Updated swiper slider to latest
- Update: Updated Font Awesome icon library to latest
- Fix: Fixed some minor CSS and JS code
Version 1.1
Released on 10 Nov 2017
- Added: Added one page link in hamburger type menu and that menu will be closed upon menu link.
- Change: Removed demo purpose right side icons by default but those can be added back using uncommenting some code in css (/css/style.css) and JS (/js/main.js).
- Change: Updated font weight to make it look fine as before after montserrat fonts family sudden change.
Version 1.0 - Initial Release
Released on 05 Oct 2017