<!doctype html>
<html class="no-js" lang="en">
<head>
<!-- BASIC PAGE NEEDS -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- TITLE OF THE SITE -->
<title>Mint | Multipurpose HTML Template. </title>
<!-- AUTHOR / DESCRIPTION META TAG -->
<meta name="author" content="Your Name here">
<meta name="description" content="Your description here">
<!-- THE MOBILE RESPONSIVE META TAG -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FAVICONS -->
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="144x144" href="img/apple-touch-icon-144x144.png">
<!-- CSS STYLESHEETS -->
<link rel="stylesheet" href="css/vendor.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/pages.css">
<!-- GOOGLE WEB FONT -->
<link href='https://fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<!-- MONDERNIZR -->
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body class="shortcodes">
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button><!-- // .navbar-toggle .collapsed -->
<a class="navbar-brand" href="#">
<img src="img/logo.png" alt="Mint Logo">
</a><!-- // .navbar-brand -->
</div><!-- .navbar-header -->
<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle external" data-toggle="dropdown" href="#">Home </a>
<ul class="dropdown-menu">
<li><a href="product-launch.html">Product Launch</a></li>
<li><a href="company-intro.html">Comapany Intro</a></li>
<li><a href="landing-page.html">Landing Page</a></li>
<li><a href="mobile-page.html">Mobile Page</a></li>
<li><a href="home-blog.html">Home Blog</a></li>
<li><a href="home-portfolio.html">Home Portfolio</a></li>
<li><a href="home01.html">Home Classic 1</a></li>
<li><a href="home02.html">Home Classic 2</a></li>
<li><a href="home03.html">Home Classic 3</a></li>
<li><a href="home04.html">Home Classic 4</a></li>
<li><a href="home05.html">Home Classic 5</a></li>
<li><a href="home06.html">Home Classic 6</a></li>
<li><a href="home07.html">Home Classic 7</a></li>
<li><a href="onepage.html">OnePage Layout</a></li>
</ul>
</li><!-- // .active .dropdown -->
<li class="active dropdown full">
<a class="dropdown-toggle external" data-toggle="dropdown" href="#">Pages </a>
<ul class="dropdown-menu">
<li class="col-md-3">
<h5>Standard Pages</h5>
<ul>
<li><a href="about01.html">About 1</a></li>
<li><a href="about02.html">About 2</a></li>
<li><a href="member-details.html">Member Details</a></li>
<li><a href="services01.html">Services 1</a></li>
<li><a href="services02.html">Services 2</a></li>
<li><a href="contact01.html">Conact 1</a></li>
<li><a href="contact02.html">Contact 2</a></li>
<li><a href="contact03.html">Contact 3</a></li>
<li><a href="blank-dark.html">Blank Page Dark</a></li>
<li><a href="blank-light.html">Blank Page Light</a></li>
</ul>
</li>
<li class="col-md-3">
<h5>Special Pages</h5>
<ul>
<li><a href="site-map.html">Site Map</a></li>
<li><a href="maintenance01.html">Maintenance 1</a></li>
<li><a href="maintenance02.html">Maintenance 2</a></li>
<li><a href="coming-soon-dark.html">Coming Soon Dark</a></li>
<li><a href="coming-soon-light.html">Coming Soon Light</a></li>
<li><a href="full-width.html">Full Width</a></li>
<li><a href="sidebar-right.html">Right Sidebar</a></li>
<li><a href="sidebar-left.html">Lef Sidebar</a></li>
</ul>
</li>
<li class="col-md-3">
<h5>Extra Pages</h5>
<ul>
<li><a href="privacy-policy.html">Privacy Policy</a></li>
<li><a href="terms.html">Terms & Conditions</a></li>
<li><a href="faq01.html">FAQ 1</a></li>
<li><a href="faq01.html">FAQ 2</a></li>
<li><a href="faq01.html">FAQ 3</a></li>
<li><a href="404-01.html">404 Page 1</a></li>
<li><a href="404-02.html">404 Page 2</a></li>
</ul>
</li>
<li class="col-md-3">
<h5>Shortcodes</h5>
<ul>
<li><a href="shortcode-accordions.html">Accordions & Toggles</a></li>
<li><a href="shortcode-buttons.html">Buttons</a></li>
<li><a href="shortcode-form-layouts.html">Form Layouts</a></li>
<li><a href="shortcode-iconboxes.html">IconBoxes</a></li>
<li class="active"><a href="shortcode-image-frames.html">Image Frames</a></li>
<li><a href="shortcode-post-sliders.html">Post Sliders</a></li>
<li><a href="shortcode-pricing-tables.html">Pricing Tables</a></li>
<li><a href="shortcode-progressbars.html">Progress Bars</a></li>
<li><a href="shortcode-tabs.html">Tabs</a></li>
<li><a href="shortcode-testimonials.html">Testimonials</a></li>
<li><a href="shortcode-typography.html">Typography</a></li>
</ul>
</li>
</ul>
</li><!-- // .dropdown -->
<li class="dropdown full">
<a class="dropdown-toggle external" data-toggle="dropdown" href="#">Features </a>
<ul class="dropdown-menu">
<li class="col-md-3">
<h5>Sliders</h5>
<ul>
<li><a href="home04.html">Slider - Nature</a></li>
<li><a href="home01.html">Slider - Devices</a></li>
<li><a href="home02.html">Slider - Creative</a></li>
<li><a href="company-intro.html">Slider - Corporate</a></li>
<li><a href="shop01.html">Slider - Ecommerce</a></li>
<li><a href="product-launch.html">Slider - Product Launch</a></li>
<li><a href="mobile-page.html">Slider - Mobile</a></li>
<li><a href="home06.html">Slider - Basic</a></li>
<li><a href="home07.html">Slider - Big Image</a></li>
</ul>
</li>
<li class="col-md-3">
<h5>Headers</h5>
<ul>
<li><a href="header01.html">Header 1</a></li>
<li><a href="header02.html">Header 2</a></li>
<li><a href="header03.html">Header 3</a></li>
<li><a href="header04.html">Header 4</a></li>
<li><a href="header05.html">Header 5</a></li>
<li><a href="header06.html">Header 6</a></li>
<li><a href="header07.html">Header 7</a></li>
</ul>
</li>
<li class="col-md-3">
<h5>Inner Starts</h5>
<ul>
<li><a href="inner-start01.html">Inner Start 1</a></li>
<li><a href="inner-start02.html">Inner Start 2</a></li>
<li><a href="inner-start03.html">Inner Start 3</a></li>
<li><a href="inner-start04.html">Inner Start 4</a></li>
<li><a href="inner-start05.html">Inner Start 5</a></li>
<li><a href="inner-start06.html">Inner Start 6</a></li>
<li><a href="inner-start07.html">Inner Start 7</a></li>
</ul>
</li>
<li class="col-md-3">
<h5>Footers</h5>
<ul>
<li><a href="footer01.html">Footer 1</a></li>
<li><a href="footer02.html">Footer 2</a></li>
<li><a href="footer03.html">Footer 3</a></li>
<li><a href="footer04.html">Footer 4</a></li>
<li><a href="footer05.html">Footer 5</a></li>
<li><a href="footer06.html">Footer 6</a></li>
<li><a href="footer07.html">Footer 7</a></li>
</ul>
</li>
</ul>
</li><!-- // .dropdown -->
<li class="dropdown hidden-sm">
<a class="dropdown-toggle external" data-toggle="dropdown" href="#">Portfolio</a>
<ul class="dropdown-menu">
<li><a href="portfolio01-2col.html">Portfolio 1 - 2col</a></li>
<li><a href="portfolio01-3col.html">Portfolio 1 - 3col</a></li>
<li><a href="portfolio01-4col.html">Portfolio 1 - 4col</a></li>
<li><a href="portfolio01-read.html">Portfolio 1 - Read</a></li>
<li><a href="portfolio02-2col.html">Portfolio 2 - 2col</a></li>
<li><a href="portfolio02-3col.html">Portfolio 2 - 3col</a></li>
<li><a href="portfolio02-4col.html">Portfolio 2 - 4col</a></li>
<li><a href="portfolio02-read.html">Portfolio 2 - Read</a></li>
</ul>
</li><!-- // .dropdown -->
<li class="dropdown full">
<a class="dropdown-toggle external" data-toggle="dropdown" href="#">Blog </a>
<ul class="dropdown-menu">
<li class="col-md-3">
<h5>Classic Style</h5>
<ul>
<li><a href="blog-classic-left-sidebar.html">Blog Classic - Left Sidebar</a></li>
<li><a href="blog-classic-right-sidebar.html">Blog Classic - Right Sidebar</a></li>
<li><a href="blog-classic-fullwidth.html">Blog Classic - Full Width</a></li>
</ul>
</li>
<li class="col-md-3">
<h5>Grid Style</h5>
<ul>
<li><a href="blog-grid-2col.html">Blog Grid - 2 Col</a></li>
<li><a href="blog-grid-3col.html">Blog Grid - 3 Col</a></li>
<li><a href="blog-grid-4col.html">Blog Grid - 4 Col</a></li>
</ul>
</li>
<li class="col-md-3">
<h5>Pinterest Style</h5>
<ul>
<li><a href="blog-masonry-left-sidebar.html">Blog Masonry - Left Sidebar</a></li>
<li><a href="blog-masonry-right-sidebar.html">Blog Masonry - Right Sidebar</a></li>
<li><a href="blog-masonry-fullwidth.html">Blog Masonry - Full Width</a></li>
</ul>
</li>
<li class="col-md-3">
<h5>Blog Read</h5>
<ul>
<li><a href="blog-read-left-sidebar.html">Blog Read - Left Sidebar</a></li>
<li><a href="blog-read-right-sidebar.html">Blog Read - Right Sidebar</a></li>
<li><a href="blog-read-fullwidth.html">Blog Read - Fullwidth</a></li>
</ul>
</li>
</ul>
</li><!-- // .dropdown -->
<li class="dropdown full">
<a class="dropdown-toggle external" data-toggle="dropdown" href="#">Shop</a>
<ul class="dropdown-menu">
<li class="col-md-3">
<h5>Shop Home Pages</h5>
<ul>
<li><a href="shop-basic.html">Shop 1 - Basic</a></li>
<li><a href="shop-fashion.html">Shop 2 - Fashion</a></li>
<li><a href="shop-kids.html">Shop 3 - Kids</a></li>
<li><a href="shop-handbags.html">Shop 4 - Handbags</a></li>
<li><a href="shop-electronics.html">Shop 5 - Electronics</a></li>
<li><a href="shop-shoes.html">Shop 6 - Shoes</a></li>
<li><a href="shop-watches.html">Shop 7 - Watches</a></li>
<li><a href="shop-fullwidth.html">Shop - Full Width</a></li>
<li><a href="shop-sidebar.html">Shop - Sidebar</a></li>
</ul>
</li>
<li class="col-md-3">
<h5>Shop Category Pages</h5>
<ul>
<li><a href="shop-category-grid-left-sidebar.html">Shop Grid - Left Sidebar</a></li>
<li><a href="shop-category-grid-right-sidebar.html">Shop Grid - Right Sidebar</a></li>
<li><a href="shop-category-list-left-sidebar.html">Shop List - Left Sidebar</a></li>
<li><a href="shop-category-list-right-sidebar.html">Shop List - Right Sidebar</a></li>
<li><a href="shop-category02-left-sidebar.html">Shop new style - Left Sidebar</a></li>
<li><a href="shop-category02-right-sidebar.html">Shop new style - Right Sidebar</a></li>
</ul>
</li>
<li class="col-md-3">
<h5>Shop Dashboard Pages</h5>
<ul>
<li><a href="shop-dashboard.html">Shop Dashboard</a></li>
<li><a href="shop-shopping-cart.html">Shop Shopping Cart</a></li>
<li><a href="shop-compare-products.html">Shop Comparing Products</a></li>
<li><a href="shop-checkout.html">Shop Checkout</a></li>
<li><a href="shop-login-dark.html">Shop Login Dark</a></li>
<li><a href="shop-login-white.html">Shop Login Light</a></li>
</ul>
</li>
<li class="col-md-3">
<h5>Shop Single Product</h5>
<ul>
<li><a href="shop-singleproduct.html">Shop Single Product</a></li>
<li><a href="shop-singleproduct-sidebar.html">Shop Single Product Sidebar</a></li>
</ul>
</li>
</ul>
</li><!-- // .dropdown -->
<li class="dropdown">
<a class="dropdown-toggle external" data-toggle="dropdown" href="#">Contact </a>
<ul class="dropdown-menu">
<li><a href="contact01.html">Conact 1</a></li>
<li><a href="contact02.html">Contact 2</a></li>
<li><a href="contact03.html">Contact 3</a></li>
</ul>
</li><!-- // .dropdown -->
</ul><!-- .nav .navbar-nav -->
</div><!-- .collapse .navbar-collapse -->
</div><!-- // .container -->
</nav><!-- // .navbar .navbar-default -->
<div class="breadcrumb-container">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h4 class="pull-left">Image Frames</h4>
<ol class="breadcrumb pull-right">
<li>Home</li>
<li>Shortcodes</li>
<li>Image Frames</li>
</ol><!-- // .breadcrumb .pull-right -->
</div><!-- // .col-xs-12 -->
</div><!-- // .row -->
</div><!-- // .container -->
</div><!-- // .breadcrumb-container -->
</header>
<section>
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<h2 class="text-center">Different Sizes of Image Frames & Galleries</h2>
<p class="text-center">
Display your posts in many different styles, These styles have been use many times on many pages.
</p>
</div>
</div><!-- // .row -->
</div><!-- // .container -->
</section>
<section class="space-md">
<div class="container">
<div class="row">
<div class="col-md-9">
<ul class="bxslider">
<li><img src="http://placehold.it/1080x400" alt="Aout the image"/></li>
<li><img src="http://placehold.it/1080x400" alt="Aout the image"/></li>
<li><img src="http://placehold.it/1080x400" alt="Aout the image"/></li>
<li><img src="http://placehold.it/1080x400" alt="Aout the image"/></li>
<li><img src="http://placehold.it/1080x400" alt="Aout the image"/></li>
</ul>
<div class="bx-pager" id="bx-pager">
<a data-slide-index="0" href=""><img src="http://placehold.it/180x60" alt="Aout the image"/></a>
<a data-slide-index="1" href=""><img src="http://placehold.it/180x60" alt="Aout the image"/></a>
<a data-slide-index="2" href=""><img src="http://placehold.it/180x60" alt="Aout the image"/></a>
<a data-slide-index="3" href=""><img src="http://placehold.it/180x60" alt="Aout the image"/></a>
<a data-slide-index="4" href=""><img src="http://placehold.it/180x60" alt="Aout the image"/></a>
</div>
</div>
<div class="col-md-3">
<h3 class="no-space-top">Big Image Gallery</h3>
<p>
Phasellus vehicula justo eget diam posuere sollicitudin eu tincidunt nulla. Curabitur eleifend tempor magna, in scelerisque urna placerat vel. Phasellus eget sem id justo consequat egestas quis facilisis metus.Phasellus vehicula justo eget diam posuere sollicitudin eu tincidunt nulla. Curabitur eleifend tempor magna, in scelerisque urna placerat vel.
</p>
</div>
</div>
</div>
</section>
<section class="space-lg">
<div class="container">
<div class="row">
<div class="col-sm-6">
<h3>Unique Image Frame</h3>
<p>
Phasellus vehicula justo eget diam posuere sollicitudin eu tincidunt nulla. Curabitur eleifend tempor magna, in scelerisque urna placerat vel. Phasellus eget sem id usto consequat egestas quis facilisis metus. Duis ac augue tempor, tempor sapien at, lacinia orci. In tincidunt, lacus a varius volutpat, arcu eros feugiat sem, rhoncus ullamcorper tellus urna vel velit.
</p>
</div>
<div class="col-sm-6">
<img src="img/image-frame.png" alt="Image Frame" />
</div>
</div>
</div>
</section>
<section class="space-bottom">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h3 class="space-heading-md">Image Frames</h3>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="img-frame">
<img src="http://placehold.it/900x400" alt="Intro Image" />
</div>
<h5>Image Without Border</h5>
</div>
<div class="col-md-4">
<div class="img-frame border">
<img src="http://placehold.it/900x400" alt="Intro Image" />
</div>
<h5>Image With Border</h5>
</div>
<div class="col-md-4">
<div class="img-frame rounded">
<img src="http://placehold.it/900x400" alt="Intro Image" />
</div>
<h5>Image Rounded Border</h5>
</div>
</div>
</div>
</section>
<!--SMALL GALLERY -->
<section class="space-bottom">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h4 class="text-left">Small Image Gallery</h4>
</div><!-- // .col-xs-12 -->
</div><!-- // .row -->
<div class="row">
<div class="col-xs-12">
<div class="owl-carousel gallery-slider">
<div>
<div class="gallery-slider-item">
<img src="http://placehold.it/900x400" alt="Intro Image" >
</div>
</div>
<div>
<div class="gallery-slider-item">
<img src="http://placehold.it/900x400" alt="Intro Image" >
</div>
</div>
<div>
<div class="gallery-slider-item">
<img src="http://placehold.it/900x400" alt="Intro Image" >
</div>
</div>
<div>
<div class="gallery-slider-item">
<img src="http://placehold.it/900x400" alt="Intro Image" >
</div>
</div>
<div>
<div class="gallery-slider-item">
<img src="http://placehold.it/900x400" alt="Intro Image" >
</div>
</div>
<div>
<div class="gallery-slider-item">
<img src="http://placehold.it/900x400" alt="Intro Image" >
</div>
</div>
</div>
</div>
</div>
</div><!-- // .container -->
</section><!-- // .section-space -->
<!-- // SMALL GALLERY -->
<footer>
<div class="container">
<div class="row">
<div class="col-md-3">
<h4>About Us</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aspernatur non odit tempore quisquam, distinctio voluptate velit adipisci.</p>
<span class="footer-divider"></span>
<div class="footer-email">
<i class="icon-mail"></i>
<a href="mailto:zaiwaemail@gmail.com">zawiaemail@gmail.com</a>
</div><!-- // .footer-email -->
<span class="footer-divider"></span>
<div class="footer-mobile">
<i class="icon-phone"></i>
<a href="#">P:+1911 222-1111</a>
</div>
<span class="footer-divider"></span>
<div class="footer-location">
<i class="icon-location-pin"></i>
<a href="https://www.google.com/maps">90 Barnard St, Suite 191.</a>
</div><!-- // footer-location -->
</div><!-- // .col-md-4 .space-mb -->
<div class="col-md-3">
<h4>Newsletter Signup</h4>
<p>
Phasellus vehicula justo eget diam posuere sollicitudin eu tincidunt nulla. Curabitur eleifend urna tempor magna, in scelerisque.
</p>
<input type="text" class="footer-signup" placeholder="Email Address">
<button type="submit" class="signup-submit">Join</button>
<span class="signup-note">We respect your privacy</span>
</div>
<div class="col-md-3">
<h4>Latest News</h4>
<div class="footer-news-item clearfix">
<img src="http://placehold.it/120x110" alt="" />
<a href="#" class="news-item-content">
<h4>A clean website gives more UserExperience.</h4>
<span>December 12, 2012 - 9:11 pm</span>
<p>
Etiam porta est quis nisi pulvinar ultrices. Spendisse nec est acurpis.
</p>
</a>
</div>
<div class="footer-news-item clearfix">
<img src="http://placehold.it/120x110" alt="" />
<a href="#" class="news-item-content">
<h4>Clean only means clean and minimilistic.</h4>
<span>December 12, 2012 - 9:11 pm</span>
<p>
Etiam porta est quis nisi pulvinar ultrices. Spendisse nec est acurpis.
</p>
</a>
</div>
</div>
<div class="col-md-3">
<h4>Flickr Stream</h4>
<div id="flickr" class="flickr">
<!-- flickr stream jQuery plugin -->
</div>
</div>
</div><!-- // .row -->
</div><!-- // .container -->
<div class="footer-bottom">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="pull-left">
<p>
© 2016 Mint
</p>
</div>
<div class="pull-right">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">slider</a></li>
<li><a href="#">Pages</a></li>
<li><a href="#">Feaures</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</div><!-- // .footer-bottom -->
</footer>
<!-- JQUERY -->
<script src="js/vendor/jquery-1.11.3.min.js"></script>
<!-- BOOTSRAP PLUGINS -->
<script src="js/vendor/bootstrap.min.js"></script>
<!-- JQUERY PLUGINS -->
<script src="js/vendor/jquery.appear.js"></script>
<script src="js/vendor/jquery.nav.js"></script>
<script src="js/vendor/jquery.countTo.js"></script>
<script src="js/vendor/flipclock.min.js"></script>
<script src="js/vendor/owl.carousel.min.js"></script>
<script src="js/vendor/jquery.bxslider.min.js"></script>
<script src="js/vendor/jquery.mixitup.min.js"></script>
<script src="js/vendor/jquery.mb-comingsoon.js"></script>
<script src="js/vendor/jquery.grid-a-licious.min.js"></script>
<script src="js/vendor/jquery.range-min.js"></script>
<script src="js/vendor/jflickrfeed.min.js"></script>
<!-- REVOLUTION SLIDER -->
<script src="revolution/js/jquery.themepunch.tools.min.js?rev=5.0"></script>
<script src="revolution/js/jquery.themepunch.revolution.min.js?rev=5.0"></script>
<script src="revolution/js/extensions/revolution.extension.slideanims.min.js"></script>
<script src="revolution/js/extensions/revolution.extension.layeranimation.min.js"></script>
<script src="revolution/js/extensions/revolution.extension.navigation.min.js"></script>
<!-- MAIN JAVASCRIPT -->
<script src="js/main.js"></script>
</body>
</html>