| Server IP : 108.163.255.210 / Your IP : 18.188.218.134 Web Server : Apache System : Linux blossom.urlnameserver.com 3.10.0-1160.80.1.el7.x86_64 #1 SMP Tue Nov 8 15:48:59 UTC 2022 x86_64 User : ( 1172) PHP Version : 7.2.34 Disable Function : eval,escapeshellarg,proc_close,proc_get_status,proc_nice,proc_open,symlink,system,pcntl_exec,getrusage,chown,chgp,closelog,openlog,syslog,define_syslog_variables,php_ini_loaded_file,getservbyname,getservbyport,posix_getgid,posix_getgrgid,proc_terminate,pfsockopen,apache_child_terminate,posix_mkfifo,posix_setpgid,posix_setuid,hypot,pg_host,pos,posix_access,posix_getcwd,posix_getservbyname,myshellexec,getpid,posix_getsid,posix_isatty,posix_kill,posix_mknod,posix_setgid,posix_setsid,posix_setuid,posix_times,posix_uname,ps_fill,posix_getpwuid,global,ini_restore,zip_open,zip_read,rar_open,bzopen,bzread,bzwrite,apache_get_modules,apache_get_version,phpversionphpinfo,php_ini_scanned_files,get_current_user,disk_total_space,diskfreespace,leak,imap_list,hypo,filedump,safe_mode,getmygid,apache_getenv,apache_setenv,bzread,bzwrite,bzopen,phpini,higlight_file,dos_conv,get_cwd,er_log,cmd,e_name,vdir,get_dir,only_read,ftok,ftpexec,posix_getpwnam,mysql_list_dbs,disk_free_space,session_save_path,confirm_phpdoc_compiled,zip_entry_rea,php_u,psockopen,crack_opendict,crack_getlastmessage,crack_closedict,crack_check,fpassthru,posix_get_last_error,posix_getlogin,posix_getgroups,posix_strerror,posix_getrlimit,posix_getpgrp,posix_getgrnam,pos,dl MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /home/unilinki/www/alpaihtml/html/ |
Upload File : |
<!doctype html>
<html lang="en">
<!-- Mirrored from template.annimexweb.com/optimal/elements-banner-styles.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 15 Oct 2022 06:16:21 GMT -->
<head>
<!--Required Meta Tags-->
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="description">
<!-- Title Of Site -->
<title>Elements Banner Styles - Optimal Multipurpose eCommerce Bootstrap 5 Html Template</title>
<!-- Favicon -->
<link rel="shortcut icon" href="assets/images/favicon.png" />
<!-- Plugins CSS -->
<link rel="stylesheet" href="assets/css/plugins.css" />
<!-- Main Style CSS -->
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="stylesheet" href="assets/css/responsive.css" />
<!-- Prismjs Clipboard CSS -->
<link rel="stylesheet" href="assets/css/prismjs-clipboard.css" />
</head>
<body class="elements-banner-styles-page">
<!-- Page Loader -->
<div id="pre-loader"><img src="assets/images/loader.gif" alt="Loading..." /></div>
<!-- End Page Loader -->
<!--Page Wrapper-->
<div class="page-wrapper">
<!--Header-->
<div id="header" class="header">
<div class="header-main">
<header class="header-wrap container d-flex align-items-center">
<div class="row g-0 align-items-center w-100">
<!--Social Icons-->
<div class="col-4 col-sm-4 col-md-4 col-lg-5 d-none d-lg-block">
<ul class="social-icons list-inline">
<li class="list-inline-item"><a href="#"><i class="an an-facebook" aria-hidden="true"></i><span class="tooltip-label">Facebook</span></a></li>
<li class="list-inline-item"><a href="#"><i class="an an-twitter" aria-hidden="true"></i><span class="tooltip-label">Twitter</span></a></li>
<li class="list-inline-item"><a href="#"><i class="an an-pinterest-p" aria-hidden="true"></i><span class="tooltip-label">Pinterest</span></a></li>
<li class="list-inline-item"><a href="#"><i class="an an-instagram" aria-hidden="true"></i><span class="tooltip-label">Instagram</span></a></li>
<li class="list-inline-item"><a href="#"><i class="an an-tiktok" aria-hidden="true"></i><span class="tooltip-label">TikTok</span></a></li>
<li class="list-inline-item"><a href="#"><i class="an an-whatsapp" aria-hidden="true"></i><span class="tooltip-label">Whatsapp</span></a></li>
</ul>
</div>
<!--End Social Icons-->
<!--Logo / Menu Toggle-->
<div class="col-6 col-sm-6 col-md-6 col-lg-2 d-flex">
<!--Mobile Toggle-->
<button type="button" class="btn--link site-header__menu js-mobile-nav-toggle mobile-nav--open me-3 d-lg-none"><i class="icon an an-times-l"></i><i class="icon an an-bars-l"></i></button>
<!--End Mobile Toggle-->
<!--Logo-->
<div class="logo mx-lg-auto"><a href="index-2.html"><img class="logo-img" src="assets/images/logo.svg" alt="Optimal Multipurpose eCommerce Bootstrap 5 Html Template" title="Optimal Multipurpose eCommerce Bootstrap 5 Html Template" /><span class="logo-txt d-none">Optimal</span></a></div>
<!--End Logo-->
</div>
<!--End Logo / Menu Toggle-->
<!--Right Action-->
<div class="col-6 col-sm-6 col-md-6 col-lg-5 icons-col text-right d-flex justify-content-end">
<!--Search-->
<div class="site-search iconset"><i class="icon an an-search-l"></i><span class="tooltip-label">Search</span></div>
<!--End Search-->
<!--Wishlist-->
<div class="wishlist-link iconset">
<a href="my-wishlist.html"><i class="icon an an-heart-l"></i><span class="wishlist-count counter d-flex-center justify-content-center position-absolute translate-middle rounded-circle">0</span><span class="tooltip-label">Wishlist</span></a>
</div>
<!--End Wishlist-->
<!--Setting Dropdown-->
<div class="user-link iconset"><i class="icon an an-user-expand"></i><span class="tooltip-label">Account</span></div>
<div id="userLinks">
<ul class="user-links">
<li><a href="login.html">Login</a></li>
<li><a href="register.html">Sign Up</a></li>
<li><a href="my-wishlist.html">Wishlist</a></li>
<li><a href="compare-style1.html">Compare</a></li>
</ul>
</div>
<!--End Setting Dropdown-->
<!--Minicart Drawer-->
<div class="header-cart iconset">
<a href="cart-style1.html" class="site-header__cart btn-minicart" data-bs-toggle="modal" data-bs-target="#minicart-drawer">
<i class="icon an an-sq-bag"></i><span class="site-cart-count counter d-flex-center justify-content-center position-absolute translate-middle rounded-circle">2</span><span class="tooltip-label">Cart</span>
</a>
</div>
<!--End Minicart Drawer-->
<!--Setting Dropdown-->
<div class="setting-link iconset pe-0"><i class="icon an an-right-bar-s"></i><span class="tooltip-label">Settings</span></div>
<div id="settingsBox">
<div class="currency-picker">
<span class="ttl">Select Currency</span>
<ul id="currencies" class="cnrLangList">
<li class="selected"><a href="#;" class="active">INR</a></li><li><a href="#;">GBP</a></li><li><a href="#;">CAD</a></li><li><a href="#;">USD</a></li><li><a href="#;">AUD</a></li><li><a href="#;">EUR</a></li><li><a href="#;">JPY</a></li>
</ul>
</div>
<div class="language-picker">
<span class="ttl">SELECT LANGUAGE</span>
<ul id="language" class="cnrLangList">
<li><a href="#" class="active">English</a></li><li><a href="#">French</a></li><li><a href="#">German</a></li>
</ul>
</div>
</div>
<!--End Setting Dropdown-->
</div>
<!--End Right Action-->
</div>
</header>
<!--Main Navigation Desktop-->
<div class="menu-outer">
<nav class="container">
<div class="row">
<div class="col-1 col-sm-12 col-md-12 col-lg-12 align-self-center d-menu-col">
<!--Desktop Menu-->
<nav class="grid__item" id="AccessibleNav">
<ul id="siteNav" class="site-nav medium center hidearrow">
<li class="lvl1 parent megamenu"><a href="#;">Home <i class="an an-angle-down-l"></i></a>
<div class="megamenu style1">
<div class="row">
<div class="col-md-8 col-lg-8">
<div class="row">
<div class="lvl-1 col-md-5 col-lg-4">
<a href="#" class="site-nav lvl-1 menu-title">Home Styles</a>
<ul class="subLinks">
<li class="lvl-2"><a href="index-2.html" class="site-nav lvl-2">Home 01 - Default</a></li>
<li class="lvl-2"><a href="index-demo2.html" class="site-nav lvl-2">Home 02 - Minimal</a></li>
<li class="lvl-2"><a href="index-demo3.html" class="site-nav lvl-2">Home 03 - Colorful</a></li>
<li class="lvl-2"><a href="index-demo4.html" class="site-nav lvl-2">Home 04 - Modern</a></li>
<li class="lvl-2"><a href="index-demo5.html" class="site-nav lvl-2">Home 05 - Kids Clothing</a></li>
<li class="lvl-2"><a href="index-demo6.html" class="site-nav lvl-2">Home 06 - Single Product</a></li>
<li class="lvl-2"><a href="index-demo7.html" class="site-nav lvl-2">Home 07 - Glamour</a></li>
<li class="lvl-2"><a href="index-demo8.html" class="site-nav lvl-2">Home 08 - Simple</a></li>
<li class="lvl-2"><a href="index-demo9.html" class="site-nav lvl-2">Home 09 - Cool <span class="lbl nm_label1">Hot</span></a></li>
<li class="lvl-2"><a href="index-demo10.html" class="site-nav lvl-2">Home 10 - Cosmetic</a></li>
</ul>
</div>
<div class="lvl-1 col-md-5 col-lg-4">
<a href="#" class="site-nav lvl-1 menu-title">Home Styles</a>
<ul class="subLinks">
<li class="lvl-2"><a href="index-demo11.html" class="site-nav lvl-2">Home 11 - Pets <span class="lbl nm_label3">Popular</span></a></li>
<li class="lvl-2"><a href="index-demo12.html" class="site-nav lvl-2">Home 12 - Tools & Parts</a></li>
<li class="lvl-2"><a href="index-demo13.html" class="site-nav lvl-2">Home 13 - Watches <span class="lbl nm_label1">Hot</span></a></li>
<li class="lvl-2"><a href="index-demo14.html" class="site-nav lvl-2">Home 14 - Food</a></li>
<li class="lvl-2"><a href="index-demo15.html" class="site-nav lvl-2">Home 15 - Christmas</a></li>
<li class="lvl-2"><a href="index-demo16.html" class="site-nav lvl-2">Home 16 - Phone Case</a></li>
<li class="lvl-2"><a href="index-demo17.html" class="site-nav lvl-2">Home 17 - Jewelry</a></li>
<li class="lvl-2"><a href="index-demo18.html" class="site-nav lvl-2">Home 18 - Bag <span class="lbl nm_label3">Popular</span></a></li>
<li class="lvl-2"><a href="index-demo19.html" class="site-nav lvl-2">Home 19 - Swimwear</a></li>
<li class="lvl-2"><a href="index-demo20.html" class="site-nav lvl-2">Home 20 - Furniture <span class="lbl nm_label2">New</span></a></li>
</ul>
</div>
<div class="lvl-1 col-md-5 col-lg-4">
<a href="#" class="site-nav lvl-1 menu-title">Home Styles</a>
<ul class="subLinks">
<li class="lvl-2"><a href="index-demo21.html" class="site-nav lvl-2">Home 21 - Party Supplies <span class="lbl nm_label2">New</span></a></li>
<li class="lvl-2"><a href="index-demo22.html" class="site-nav lvl-2">Home 22 - Digital <span class="lbl nm_label2">New</span></a></li>
<li class="lvl-2"><a href="index-demo23.html" class="site-nav lvl-2">Home 23 - Vogue <span class="lbl nm_label2">New</span></a></li>
<li class="lvl-2"><a href="index-demo24.html" class="site-nav lvl-2">Home 24 - Glamour <span class="lbl nm_label2">New</span></a></li>
</ul>
<div class="row mm-Banners mt-3">
<div class="col-md-12 col-lg-12 imageCol text-center">
<div class="menubox position-relative">
<a href="index-demo5.html" class="mb-0"><img class="blur-up lazyload" src="assets/images/megamenu/megamenu-banner7.png" data-src="assets/images/megamenu/megamenu-banner7.png" alt="image"/></a>
<p class="position-absolute bottom-0 start-50 translate-middle-x"><a href="index-demo5.html" class="title text-uppercase mb-3">Kids Store</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="row mm-Banners">
<div class="col-md-12 col-lg-12 imageCol text-center">
<div class="menubox position-relative">
<a href="index-demo6.html" class="mb-0"><img class="blur-up lazyload" src="assets/images/megamenu/megamenu-banner8.png" data-src="assets/images/megamenu/megamenu-banner8.png" alt="image"/></a>
<p class="position-absolute bottom-0 start-50 translate-middle-x"><a href="index-demo6.html" class="title text-uppercase">Single Product Layout</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="lvl1 parent megamenu"><a href="#;">Shop <i class="an an-angle-down-l"></i></a>
<div class="megamenu style4">
<div class="row">
<div class="lvl-1 col-md-3 col-lg-3"><a href="#" class="site-nav lvl-1 menu-title">Category Page</a>
<ul class="subLinks">
<li class="lvl-2"><a href="category-2columns.html" class="site-nav lvl-2">2 Columns with style1</a></li>
<li class="lvl-2"><a href="category-3columns.html" class="site-nav lvl-2">3 Columns with style2</a></li>
<li class="lvl-2"><a href="category-4columns.html" class="site-nav lvl-2">4 Columns with style3</a></li>
<li class="lvl-2"><a href="category-5columns.html" class="site-nav lvl-2">5 Columns with style4</a></li>
<li class="lvl-2"><a href="category-6columns.html" class="site-nav lvl-2">6 Columns with Fullwidth</a></li>
<li class="lvl-2"><a href="category-7columns.html" class="site-nav lvl-2">7 Columns</a></li>
<li class="lvl-2"><a href="empty-category.html" class="site-nav lvl-2">Category Empty</a></li>
</ul>
</div>
<div class="lvl-1 col-md-3 col-lg-3"><a href="#" class="site-nav lvl-1 menu-title">Shop Page</a>
<ul class="subLinks">
<li class="lvl-2"><a href="shop-left-sidebar.html" class="site-nav lvl-2">Left Sidebar</a></li>
<li class="lvl-2"><a href="shop-right-sidebar.html" class="site-nav lvl-2">Right Sidebar</a></li>
<li class="lvl-2"><a href="shop-top-filter.html" class="site-nav lvl-2">Top Filter</a></li>
<li class="lvl-2"><a href="shop-fullwidth.html" class="site-nav lvl-2">Fullwidth</a></li>
<li class="lvl-2"><a href="shop-no-sidebar.html" class="site-nav lvl-2">Without Filter</a></li>
<li class="lvl-2"><a href="shop-listview-sidebar.html" class="site-nav lvl-2">List View</a></li>
<li class="lvl-2"><a href="shop-listview-drawer.html" class="site-nav lvl-2">List View Drawer</a></li>
<li class="lvl-2"><a href="shop-category-slideshow.html" class="site-nav lvl-2">Category Slideshow</a></li>
<li class="lvl-2"><a href="shop-heading-with-banner.html" class="site-nav lvl-2">Headings With Banner</a></li>
</ul>
</div>
<div class="lvl-1 col-md-3 col-lg-3"><a href="#" class="site-nav lvl-1 menu-title">Shop Page</a>
<ul class="subLinks">
<li class="lvl-2"><a href="shop-sub-collections.html" class="site-nav lvl-2">Sub Collection List <span class="lbl nm_label5">Hot</span></a></li>
<li class="lvl-2"><a href="shop-masonry-grid.html" class="site-nav lvl-2">Shop Masonry Grid</a></li>
<li class="lvl-2"><a href="shop-left-sidebar.html" class="site-nav lvl-2">Shop Countdown</a></li>
<li class="lvl-2"><a href="shop-hover-info.html" class="site-nav lvl-2">Shop Hover Info</a></li>
<li class="lvl-2"><a href="shop-right-sidebar.html" class="site-nav lvl-2">Infinite Scrolling</a></li>
<li class="lvl-2"><a href="shop-fullwidth.html" class="site-nav lvl-2">Classic Pagination</a></li>
<li class="lvl-2"><a href="shop-swatches-style.html" class="site-nav lvl-2">Swatches Style</a></li>
<li class="lvl-2"><a href="shop-grid-style.html" class="site-nav lvl-2">Grid Style</a></li>
<li class="lvl-2"><a href="shop-search-results.html" class="site-nav lvl-2">Search Results</a></li>
</ul>
</div>
<div class="lvl-1 col-md-3 col-lg-3"><a href="#" class="site-nav lvl-1 menu-title">Shop Other Page</a>
<ul class="subLinks">
<li class="lvl-2"><a href="my-wishlist.html" class="site-nav lvl-2">My Wishlist Style1</a></li>
<li class="lvl-2"><a href="my-wishlist-style2.html" class="site-nav lvl-2">My Wishlist Style2</a></li>
<li class="lvl-2"><a href="compare-style1.html" class="site-nav lvl-2">Compare Page Style1</a></li>
<li class="lvl-2"><a href="compare-style2.html" class="site-nav lvl-2">Compare Page Style2</a></li>
<li class="lvl-2"><a href="cart-style1.html" class="site-nav lvl-2">Cart Page Style1</a></li>
<li class="lvl-2"><a href="cart-style2.html" class="site-nav lvl-2">Cart Page Style2</a></li>
<li class="lvl-2"><a href="checkout-style1.html" class="site-nav lvl-2">Checkout Page Style1</a></li>
<li class="lvl-2"><a href="checkout-style2.html" class="site-nav lvl-2">Checkout Page Style2</a></li>
<li class="lvl-2"><a href="checkout-success.html" class="site-nav lvl-2">Checkout Success</a></li>
</ul>
</div>
</div>
<div class="row clear mt-4">
<div class="col-md-3 col-lg-3">
<a href="shop-left-sidebar.html"><img src="assets/images/megamenu/megamenu-banner4-1.jpg" data-src="assets/images/megamenu/megamenu-banner4-1.jpg" alt="image"/></a>
</div>
<div class="col-md-3 col-lg-3">
<a href="shop-left-sidebar.html"><img src="assets/images/megamenu/megamenu-banner4-2.jpg" data-src="assets/images/megamenu/megamenu-banner4-2.jpg" alt="image"/></a>
</div>
<div class="col-md-3 col-lg-3">
<a href="shop-left-sidebar.html"><img src="assets/images/megamenu/megamenu-banner4-3.jpg" data-src="assets/images/megamenu/megamenu-banner4-3.jpg" alt="image"/></a>
</div>
<div class="col-md-3 col-lg-3">
<a href="shop-left-sidebar.html"><img src="assets/images/megamenu/megamenu-banner4-4.jpg" data-src="assets/images/megamenu/megamenu-banner4-4.jpg" alt="image"/></a>
</div>
</div>
</div>
</li>
<li class="lvl1 parent megamenu"><a href="#;">Product <i class="an an-angle-down-l"></i></a>
<div class="megamenu style2">
<div class="row">
<div class="lvl-1 col-md-3 col-lg-3"><a href="#" class="site-nav lvl-1 menu-title">Product Types</a>
<ul class="subLinks">
<li class="lvl-2"><a href="product-standard.html" class="site-nav lvl-2">Simple Product</a></li>
<li class="lvl-2"><a href="product-variable.html" class="site-nav lvl-2">Variable Product</a></li>
<li class="lvl-2"><a href="product-grouped.html" class="site-nav lvl-2">Grouped Product</a></li>
<li class="lvl-2"><a href="product-external-affiliate.html" class="site-nav lvl-2">External / Affiliate Product</a></li>
<li class="lvl-2"><a href="product-outofstock.html" class="site-nav lvl-2">Out Of Stock Product</a></li>
<li class="lvl-2"><a href="product-layout1.html" class="site-nav lvl-2">New Product</a></li>
<li class="lvl-2"><a href="product-layout2.html" class="site-nav lvl-2">Sale Product</a></li>
<li class="lvl-2"><a href="product-layout1.html" class="site-nav lvl-2">Variable Image</a></li>
<li class="lvl-2"><a href="product-accordian.html" class="site-nav lvl-2">Variable Select</a></li>
<li class="lvl-2"><a href="prodcut-360-degree-view.html" class="site-nav lvl-2">360 Degree view</a></li>
</ul>
</div>
<div class="lvl-1 col-md-3 col-lg-3"><a href="#" class="site-nav lvl-1 menu-title">Product Page</a>
<ul class="subLinks">
<li class="lvl-2"><a href="product-layout1.html" class="site-nav lvl-2">Product Layout1</a></li>
<li class="lvl-2"><a href="product-layout2.html" class="site-nav lvl-2">Product Layout2</a></li>
<li class="lvl-2"><a href="product-layout3.html" class="site-nav lvl-2">Product Layout3</a></li>
<li class="lvl-2"><a href="product-layout4.html" class="site-nav lvl-2">Product Layout4</a></li>
<li class="lvl-2"><a href="product-layout5.html" class="site-nav lvl-2">Product Layout5</a></li>
<li class="lvl-2"><a href="product-layout6.html" class="site-nav lvl-2">Product Layout6</a></li>
<li class="lvl-2"><a href="product-layout7.html" class="site-nav lvl-2">Product Layout7</a></li>
<li class="lvl-2"><a href="product-accordian.html" class="site-nav lvl-2">Product Accordian</a></li>
<li class="lvl-2"><a href="product-tabs-left.html" class="site-nav lvl-2">Product Tabs Left</a></li>
<li class="lvl-2"><a href="product-tabs-center.html" class="site-nav lvl-2">Product Tabs Center</a></li>
</ul>
</div>
<div class="lvl-1 col-md-3 col-lg-3"><a href="#" class="site-nav lvl-1 menu-title">Top Brands</a>
<div class="menu-brand-logo">
<a href="brands-style2.html"><img src="assets/images/logo/brandlogo1.png" alt="image"/></a>
<a href="brands-style2.html"><img src="assets/images/logo/brandlogo2.png" alt="image"/></a>
<a href="brands-style2.html"><img src="assets/images/logo/brandlogo3.png" alt="image"/></a>
</div>
<div class="menu-brand-logo">
<a href="brands-style2.html"><img src="assets/images/logo/brandlogo4.png" alt="image"/></a>
<a href="brands-style2.html"><img src="assets/images/logo/brandlogo5.png" alt="image"/></a>
<a href="brands-style2.html"><img src="assets/images/logo/brandlogo6.png" alt="image"/></a>
</div>
</div>
<div class="lvl-1 col-md-3 col-lg-3 p-0">
<a href="shop-left-sidebar.html"><img src="assets/images/megamenu/megamenu-banner3.jpg" alt="image"/></a>
</div>
</div>
</div>
</li>
<li class="lvl1 parent megamenu"><a href="#">Features <i class="an an-angle-down-l"></i><span class="navLbl new">New</span></a>
<div class="megamenu style4">
<div class="row shop-grid-5">
<div class="lvl-1 col-md-3 col-lg-3 col-xl-2 item"><a href="#" class="site-nav lvl-1 menu-title">Vendor Pages</a>
<ul class="subLinks">
<li><a href="vendor-dashboard.html" class="site-nav">Vendor Dashboard</a></li>
<li><a href="vendor-profile.html" class="site-nav">Vendor Profile</a></li>
<li><a href="vendor-uploads.html" class="site-nav">Vendor Uploads</a></li>
<li><a href="vendor-tracking.html" class="site-nav">Vendor Tracking</a></li>
<li><a href="vendor-service.html" class="site-nav">Vendor Service</a></li>
<li><a href="vendor-settings.html" class="site-nav last">Vendor Settings</a></li>
</ul>
</div>
<div class="lvl-1 col-md-3 col-lg-3 col-xl-2 item"><a href="#" class="site-nav lvl-1 menu-title">Email Template</a>
<ul class="subLinks">
<li><a target="_blank" href="email-template/email-order-success1.html" class="site-nav">Order Success 1</a></li>
<li><a target="_blank" href="email-template/email-order-success2.html" class="site-nav">Order Success 2</a></li>
<li><a target="_blank" href="email-template/email-invoice-template1.html" class="site-nav">Invoice Template 1</a></li>
<li><a target="_blank" href="email-template/email-invoice-template2.html" class="site-nav last">Invoice Template 2</a></li>
</ul>
</div>
<div class="lvl-1 col-md-3 col-lg-3 col-xl-2 item"><a href="#" class="site-nav lvl-1 menu-title">Email Template</a>
<ul class="subLinks">
<li class="lvl-2"><a target="_blank" href="email-template/email-forgot-password.html" class="site-nav">Mail Reset password</a></li>
<li class="lvl-2"><a target="_blank" href="email-template/email-confirmation.html" class="site-nav">Mail Confirmation</a></li>
<li class="lvl-2"><a target="_blank" href="email-template/email-promotional1.html" class="site-nav">Mail Promotional 1</a></li>
<li class="lvl-2"><a target="_blank" href="email-template/email-promotional2.html" class="site-nav last">Mail Promotional 2</a></li>
</ul>
</div>
<div class="lvl-1 col-md-3 col-lg-3 col-xl-2 item"><a href="#" class="site-nav lvl-1 menu-title">Elements</a>
<ul class="subLinks">
<li class="lvl-2"><a href="elements-typography.html" class="site-nav lvl-2">Typography</a></li>
<li class="lvl-2"><a href="elements-buttons.html" class="site-nav lvl-2">Buttons</a></li>
<li class="lvl-2"><a href="elements-titles.html" class="site-nav lvl-2">Titles</a></li>
<li class="lvl-2"><a href="elements-banner-styles.html" class="site-nav lvl-2">Banner Styles</a></li>
<li class="lvl-2"><a href="elements-testimonial.html" class="site-nav lvl-2">Testimonial</a></li>
<li class="lvl-2"><a href="elements-accordions.html" class="site-nav lvl-2">Accordions</a></li>
</ul>
</div>
<div class="lvl-1 col-md-3 col-lg-3 col-xl-2 item"><a href="#" class="site-nav lvl-1 menu-title">Elements</a>
<ul class="subLinks">
<li class="lvl-2"><a href="elements-icons.html" class="site-nav lvl-2">Icons</a></li>
<li class="lvl-2"><a href="elements-blog-posts.html" class="site-nav lvl-2">Blog Posts</a></li>
<li class="lvl-2"><a href="elements-product.html" class="site-nav lvl-2">Product</a></li>
<li class="lvl-2"><a href="elements-product-tab.html" class="site-nav lvl-2">Product Tab</a></li>
<li class="lvl-2"><a href="elements-top-info-bar.html" class="site-nav lvl-2">Top Info Bar</a></li>
<li class="lvl-2"><a href="elements-top-promo-bar.html" class="site-nav lvl-2">Top Promo Bar</a></li>
</ul>
</div>
</div>
<div class="row clear mt-4">
<div class="col-md-3 col-lg-3">
<img src="assets/images/megamenu/megamenu-store.png" data-src="assets/images/megamenu/megamenu-store.png" alt="image"/>
</div>
<div class="col-md-3 col-lg-3">
<img src="assets/images/megamenu/megamenu-elements.png" data-src="assets/images/megamenu/megamenu-elements.png" alt="image"/>
</div>
<div class="col-md-3 col-lg-3">
<img src="assets/images/megamenu/megamenu-pages.png" data-src="assets/images/megamenu/megamenu-pages.png" alt="image"/>
</div>
<div class="col-md-3 col-lg-3">
<img src="assets/images/megamenu/megamenu-fast.png" data-src="assets/images/megamenu/megamenu-fast.png" alt="image"/>
</div>
</div>
</div>
</li>
<li class="lvl1 parent dropdown"><a href="#">Pages <i class="an an-angle-down-l"></i></a>
<ul class="dropdown">
<li><a href="aboutus-style1.html" class="site-nav">About Us <i class="an an-angle-right-l"></i></a>
<ul class="dropdown">
<li><a href="aboutus-style1.html" class="site-nav">About Us Style1</a></li>
<li><a href="aboutus-style2.html" class="site-nav">About Us Style2</a></li>
<li><a href="aboutus-style3.html" class="site-nav last">About Us Style3</a></li>
</ul>
</li>
<li><a href="contact-style1.html" class="site-nav">Contact Us <i class="an an-angle-right-l"></i></a>
<ul class="dropdown">
<li><a href="contact-style1.html" class="site-nav">Contact Us Style1</a></li>
<li><a href="contact-style2.html" class="site-nav last">Contact Us Style2</a></li>
</ul>
</li>
<li><a href="lookbook-2columns.html" class="site-nav">Lookbook <i class="an an-angle-right-l"></i></a>
<ul class="dropdown">
<li><a href="lookbook-2columns.html" class="site-nav">2 Columns</a></li>
<li><a href="lookbook-3columns.html" class="site-nav">3 Columns</a></li>
<li><a href="lookbook-4columns.html" class="site-nav">4 Columns</a></li>
<li><a href="lookbook-5columns.html" class="site-nav">5 Columns + Fullwidth</a></li>
<li><a href="lookbook-shop.html" class="site-nav last">Lookbook Shop</a></li>
</ul>
</li>
<li><a href="faqs-style1.html" class="site-nav">FAQs <i class="an an-angle-right-l"></i></a>
<ul class="dropdown">
<li><a href="faqs-style1.html" class="site-nav">FAQs Style1</a></li>
<li><a href="faqs-style2.html" class="site-nav last">FAQs Style2</a></li>
</ul>
</li>
<li><a href="brands-style1.html" class="site-nav">Brands <i class="an an-angle-right-l"></i></a>
<ul class="dropdown">
<li><a href="brands-style1.html" class="site-nav">Brands Style1</a></li>
<li><a href="brands-style2.html" class="site-nav last">Brands Style2</a></li>
</ul>
</li>
<li><a href="my-account.html" class="site-nav">My Account <i class="an an-angle-right-l"></i></a>
<ul class="dropdown">
<li><a href="my-account.html" class="site-nav">My Account</a></li>
<li><a href="login-sliding-style.html" class="site-nav">Login Sliding Slideshow</a></li>
<li><a href="login.html" class="site-nav">Login</a></li>
<li><a href="register.html" class="site-nav">Register</a></li>
<li><a href="forgot-password.html" class="site-nav">Forgot Password</a></li>
<li><a href="change-password.html" class="site-nav last">Change Password</a></li>
</ul>
</li>
<li><a href="#" class="site-nav">Empty Pages <i class="an an-angle-right-l"></i></a>
<ul class="dropdown">
<li><a href="empty-category.html" class="site-nav">Empty Category</a></li>
<li><a href="empty-cart.html" class="site-nav">Empty Cart</a></li>
<li><a href="empty-compare.html" class="site-nav">Empty Compare</a></li>
<li><a href="empty-wishlist.html" class="site-nav">Empty Wishlist</a></li>
<li><a href="empty-search.html" class="site-nav last">Empty Search</a></li>
</ul>
</li>
<li><a href="error-404.html" class="site-nav">Error 404 </a></li>
<li><a href="cms-page.html" class="site-nav">CMS Page</a></li>
<li><a href="coming-soon.html" class="site-nav">Coming soon <span class="lbl nm_label2">New</span></a></li>
</ul>
</li>
<li class="lvl1 parent dropdown"><a href="#;">Blog <i class="an an-angle-down-l"></i></a>
<ul class="dropdown">
<li><a href="blog-left-sidebar.html" class="site-nav">Left Sidebar</a></li>
<li><a href="blog-right-sidebar.html" class="site-nav">Right Sidebar</a></li>
<li><a href="blog-fullwidth.html" class="site-nav">Fullwidth</a></li>
<li><a href="blog-masonry.html" class="site-nav">Masonry Blog Style</a></li>
<li><a href="blog-2columns.html" class="site-nav">2 Columns</a></li>
<li><a href="blog-3columns.html" class="site-nav">3 Columns</a></li>
<li><a href="blog-4columns.html" class="site-nav">4 Columns</a></li>
<li><a href="blog-single-post.html" class="site-nav last">Article Page</a></li>
</ul>
</li>
</ul>
</nav>
<!--End Desktop Menu-->
</div>
</div>
</nav>
</div>
<!--End Main Navigation Desktop-->
<!--Search Popup-->
<div id="search-popup" class="search-drawer">
<div class="container">
<span class="closeSearch an an-times-l"></span>
<form class="form minisearch" id="header-search" action="#" method="get">
<label class="label"><span>Search</span></label>
<div class="control">
<div class="searchField">
<div class="search-category">
<select id="rgsearch-category" name="rgsearch[category]" data-default="All Categories">
<option value="00" label="All Categories" selected="selected">All Categories</option>
<optgroup id="rgsearch-shop" label="Shop">
<option value="0">- All</option>
<option value="1">- Men</option>
<option value="2">- Women</option>
<option value="3">- Shoes</option>
<option value="4">- Blouses</option>
<option value="5">- Pullovers</option>
<option value="6">- Bags</option>
<option value="7">- Accessories</option>
</optgroup>
</select>
</div>
<div class="input-box">
<button type="submit" title="Search" class="action search" disabled=""><i class="icon an an-search-l"></i></button>
<input type="text" name="q" value="" placeholder="Search by keyword or #" class="input-text">
</div>
</div>
</div>
</form>
</div>
</div>
<!--End Search Popup-->
</div>
</div>
<!--End Header-->
<!--Mobile Menu-->
<div class="mobile-nav-wrapper" role="navigation">
<div class="closemobileMenu"><i class="icon an an-times-l pull-right"></i> Close Menu</div>
<ul id="MobileNav" class="mobile-nav">
<li class="lvl1 parent megamenu"><a href="index-2.html">Home <i class="an an-plus-l"></i></a>
<ul>
<li><a href="#" class="site-nav">Home Styles <i class="an an-plus-l"></i></a>
<ul>
<li class="lvl-2"><a href="index-2.html" class="site-nav">Home 01 - Default</a></li>
<li class="lvl-2"><a href="index-demo2.html" class="site-nav">Home 02 - Minimal</a></li>
<li class="lvl-2"><a href="index-demo3.html" class="site-nav">Home 03 - Colorful</a></li>
<li class="lvl-2"><a href="index-demo4.html" class="site-nav">Home 04 - Modern</a></li>
<li class="lvl-2"><a href="index-demo5.html" class="site-nav">Home 05 - Kids Clothing</a></li>
<li class="lvl-2"><a href="index-demo6.html" class="site-nav">Home 06 - Single Product</a></li>
<li class="lvl-2"><a href="index-demo7.html" class="site-nav">Home 07 - Glamour</a></li>
<li class="lvl-2"><a href="index-demo8.html" class="site-nav">Home 08 - Simple</a></li>
<li class="lvl-2"><a href="index-demo9.html" class="site-nav">Home 09 - Cool <span class="lbl nm_label1">Hot</span></a></li>
<li class="lvl-2"><a href="index-demo10.html" class="site-nav last">Home 10 - Cosmetic</a></li>
</ul>
</li>
<li><a href="#" class="site-nav">Home Styles <i class="an an-plus-l"></i></a>
<ul>
<li class="lvl-2"><a href="index-demo11.html" class="site-nav">Home 11 - Pets <span class="lbl nm_label3">Popular</span></a></li>
<li class="lvl-2"><a href="index-demo12.html" class="site-nav">Home 12 - Tools & Parts</a></li>
<li class="lvl-2"><a href="index-demo13.html" class="site-nav">Home 13 - Watches <span class="lbl nm_label1">Hot</span></a></li>
<li class="lvl-2"><a href="index-demo14.html" class="site-nav">Home 14 - Food</a></li>
<li class="lvl-2"><a href="index-demo15.html" class="site-nav">Home 15 - Christmas</a></li>
<li class="lvl-2"><a href="index-demo16.html" class="site-nav">Home 16 - Phone Case</a></li>
<li class="lvl-2"><a href="index-demo17.html" class="site-nav">Home 17 - Jewelry</a></li>
<li class="lvl-2"><a href="index-demo18.html" class="site-nav">Home 18 - Bag <span class="lbl nm_label3">Popular</span></a></li>
<li class="lvl-2"><a href="index-demo19.html" class="site-nav">Home 19 - Swimwear</a></li>
<li class="lvl-2"><a href="index-demo20.html" class="site-nav last">Home 20 - Furniture <span class="lbl nm_label2">New</span></a></li>
</ul>
</li>
<li><a href="#" class="site-nav">Home Styles <i class="an an-plus-l"></i></a>
<ul>
<li class="lvl-2"><a href="index-demo21.html" class="site-nav">Home 21 - Party Supplies <span class="lbl nm_label2">New</span></a></li>
<li class="lvl-2"><a href="index-demo22.html" class="site-nav">Home 22 - Digital <span class="lbl nm_label2">New</span></a></li>
<li class="lvl-2"><a href="index-demo23.html" class="site-nav">Home 23 - Vogue <span class="lbl nm_label2">New</span></a></li>
<li class="lvl-2"><a href="index-demo24.html" class="site-nav last">Home 24 - Glamour <span class="lbl nm_label2">New</span></a></li>
</ul>
</li>
</ul>
</li>
<li class="lvl1 parent megamenu"><a href="#">Shop <i class="an an-plus-l"></i></a>
<ul>
<li><a href="#" class="site-nav">Category Page <i class="an an-plus-l"></i></a>
<ul>
<li><a href="category-2columns.html" class="site-nav">2 Columns with style1</a></li>
<li><a href="category-3columns.html" class="site-nav">3 Columns with style2</a></li>
<li><a href="category-4columns.html" class="site-nav">4 Columns with style3</a></li>
<li><a href="category-5columns.html" class="site-nav">5 Columns with style4</a></li>
<li><a href="category-6columns.html" class="site-nav">6 Columns with Fullwidth</a></li>
<li><a href="category-7columns.html" class="site-nav">7 Columns</a></li>
<li><a href="empty-category.html" class="site-nav last">Category Empty</a></li>
</ul>
</li>
<li><a href="#" class="site-nav">Shop Page <i class="an an-plus-l"></i></a>
<ul>
<li><a href="shop-left-sidebar.html" class="site-nav">Left Sidebar</a></li>
<li><a href="shop-right-sidebar.html" class="site-nav">Right Sidebar</a></li>
<li><a href="shop-top-filter.html" class="site-nav">Top Filter</a></li>
<li><a href="shop-fullwidth.html" class="site-nav">Fullwidth</a></li>
<li><a href="shop-no-sidebar.html" class="site-nav">Without Filter</a></li>
<li><a href="shop-listview-sidebar.html" class="site-nav">List View</a></li>
<li><a href="shop-listview-drawer.html" class="site-nav">List View Drawer</a></li>
<li><a href="shop-category-slideshow.html" class="site-nav">Category Slideshow</a></li>
<li><a href="shop-heading-with-banner.html" class="site-nav last">Headings With Banner</a></li>
</ul>
</li>
<li><a href="#" class="site-nav">Shop Page <i class="an an-plus-l"></i></a>
<ul>
<li><a href="shop-sub-collections.html" class="site-nav">Sub Collection List <span class="lbl nm_label5">Hot</span></a></li>
<li><a href="shop-masonry-grid.html" class="site-nav">Shop Masonry Grid</a></li>
<li><a href="shop-left-sidebar.html" class="site-nav">Shop Countdown</a></li>
<li><a href="shop-hover-info.html" class="site-nav">Shop Hover Info</a></li>
<li><a href="shop-right-sidebar.html" class="site-nav">Infinite Scrolling</a></li>
<li><a href="shop-fullwidth.html" class="site-nav">Classic Pagination</a></li>
<li><a href="shop-swatches-style.html" class="site-nav">Swatches Style</a></li>
<li><a href="shop-grid-style.html" class="site-nav">Grid Style</a></li>
<li><a href="shop-search-results.html" class="site-nav last">Search Results</a></li>
</ul>
</li>
<li><a href="#" class="site-nav">Shop Other Page <i class="an an-plus-l"></i></a>
<ul>
<li><a href="my-wishlist.html" class="site-nav">My Wishlist Style1</a></li>
<li><a href="my-wishlist-style2.html" class="site-nav">My Wishlist Style2</a></li>
<li><a href="compare-style1.html" class="site-nav">Compare Page Style1</a></li>
<li><a href="compare-style2.html" class="site-nav">Compare Page Style2</a></li>
<li><a href="cart-style1.html" class="site-nav">Cart Page Style1</a></li>
<li><a href="cart-style2.html" class="site-nav">Cart Page Style2</a></li>
<li><a href="checkout-style1.html" class="site-nav">Checkout Page Style1</a></li>
<li><a href="checkout-style2.html" class="site-nav">Checkout Page Style2</a></li>
<li><a href="checkout-success.html" class="site-nav last">Checkout Success</a></li>
</ul>
</li>
</ul>
</li>
<li class="lvl1 parent megamenu"><a href="#">Product <i class="an an-plus-l"></i></a>
<ul>
<li><a href="product-standard.html" class="site-nav">Product Types<i class="an an-plus-l"></i></a>
<ul>
<li><a href="product-standard.html" class="site-nav">Simple Product</a></li>
<li><a href="product-variable.html" class="site-nav">Variable Product</a></li>
<li><a href="product-grouped.html" class="site-nav">Grouped Product</a></li>
<li><a href="product-external-affiliate.html" class="site-nav">External / Affiliate Product</a></li>
<li><a href="product-outofstock.html" class="site-nav">Out Of Stock Product</a></li>
<li><a href="product-layout1.html" class="site-nav">New Product</a></li>
<li><a href="product-layout2.html" class="site-nav">Sale Product</a></li>
<li><a href="product-layout1.html" class="site-nav">Variable Image</a></li>
<li><a href="product-accordian.html" class="site-nav">Variable Select</a></li>
<li><a href="prodcut-360-degree-view.html" class="site-nav last">360 Degree view</a></li>
</ul>
</li>
<li><a href="product-layout1.html" class="site-nav">Product Page Types <i class="an an-plus-l"></i></a>
<ul>
<li><a href="product-layout1.html" class="site-nav">Product Layout1</a></li>
<li><a href="product-layout2.html" class="site-nav">Product Layout2</a></li>
<li><a href="product-layout3.html" class="site-nav">Product Layout3</a></li>
<li><a href="product-layout4.html" class="site-nav">Product Layout4</a></li>
<li><a href="product-layout5.html" class="site-nav">Product Layout5</a></li>
<li><a href="product-layout6.html" class="site-nav">Product Layout6</a></li>
<li><a href="product-layout7.html" class="site-nav">Product Layout7</a></li>
<li><a href="product-accordian.html" class="site-nav">Product Accordian</a></li>
<li><a href="product-tabs-left.html" class="site-nav">Product Tabs Left</a></li>
<li><a href="product-tabs-center.html" class="site-nav last">Product Tabs Center</a></li>
</ul>
</li>
</ul>
</li>
<li class="lvl1 parent megamenu"><a href="#">Features <i class="an an-plus-l"></i><span class="lbl nm_label1">New</span></a>
<ul>
<li><a href="#" class="site-nav">Vendor Pages <i class="an an-plus-l"></i></a>
<ul>
<li><a href="vendor-dashboard.html" class="site-nav">Vendor Dashboard</a></li>
<li><a href="vendor-profile.html" class="site-nav">Vendor Profile</a></li>
<li><a href="vendor-uploads.html" class="site-nav">Vendor Uploads</a></li>
<li><a href="vendor-tracking.html" class="site-nav">Vendor Tracking</a></li>
<li><a href="vendor-service.html" class="site-nav">Vendor Service</a></li>
<li><a href="vendor-settings.html" class="site-nav last">Vendor Settings</a></li>
</ul>
</li>
<li><a href="#" class="site-nav">Email Template <i class="an an-plus-l"></i></a>
<ul>
<li><a target="_blank" href="email-template/email-order-success1.html" class="site-nav">Order Success 1</a></li>
<li><a target="_blank" href="email-template/email-order-success2.html" class="site-nav">Order Success 2</a></li>
<li><a target="_blank" href="email-template/email-invoice-template1.html" class="site-nav">Invoice Template 1</a></li>
<li><a target="_blank" href="email-template/email-invoice-template2.html" class="site-nav last">Invoice Template 2</a></li>
<li><a target="_blank" href="email-template/email-forgot-password.html" class="site-nav">Mail Reset password</a></li>
<li><a target="_blank" href="email-template/email-confirmation.html" class="site-nav">Mail Confirmation</a></li>
<li><a target="_blank" href="email-template/email-promotional1.html" class="site-nav">Mail Promotional 1</a></li>
<li><a target="_blank" href="email-template/email-promotional2.html" class="site-nav last">Mail Promotional 2</a></li>
</ul>
</li>
<li><a href="#" class="site-nav">Elements <i class="an an-plus-l"></i></a>
<ul>
<li><a href="elements-typography.html" class="site-nav">Typography</a></li>
<li><a href="elements-buttons.html" class="site-nav">Buttons</a></li>
<li><a href="elements-titles.html" class="site-nav">Titles</a></li>
<li><a href="elements-banner-styles.html" class="site-nav">Banner Styles</a></li>
<li><a href="elements-testimonial.html" class="site-nav">Testimonial</a></li>
<li><a href="elements-accordions.html" class="site-nav">Accordions</a></li>
<li><a href="elements-icons.html" class="site-nav">Icons</a></li>
<li><a href="elements-blog-posts.html" class="site-nav">Blog Posts</a></li>
<li><a href="elements-product.html" class="site-nav">Product</a></li>
<li><a href="elements-product-tab.html" class="site-nav">Product Tab</a></li>
<li><a href="elements-top-info-bar.html" class="site-nav">Top Info Bar</a></li>
<li><a href="elements-top-promo-bar.html" class="site-nav last">Top Promo Bar</a></li>
</ul>
</li>
</ul>
</li>
<li class="lvl1 parent megamenu"><a href="#">Pages <i class="an an-plus-l"></i></a>
<ul>
<li><a href="aboutus-style1.html" class="site-nav">About Us <i class="an an-plus-l"></i></a>
<ul class="dropdown">
<li><a href="aboutus-style1.html" class="site-nav">About Us Style1</a></li>
<li><a href="aboutus-style2.html" class="site-nav">About Us Style2</a></li>
<li><a href="aboutus-style3.html" class="site-nav last">About Us Style3</a></li>
</ul>
</li>
<li><a href="contact-style1.html" class="site-nav">Contact Us <i class="an an-plus-l"></i></a>
<ul class="dropdown">
<li><a href="contact-style1.html" class="site-nav">Contact Us Style1</a></li>
<li><a href="contact-style2.html" class="site-nav last">Contact Us Style2</a></li>
</ul>
</li>
<li><a href="lookbook-2columns.html" class="site-nav">Lookbook <i class="an an-plus-l"></i></a>
<ul class="dropdown">
<li><a href="lookbook-2columns.html" class="site-nav">2 Columns</a></li>
<li><a href="lookbook-3columns.html" class="site-nav">3 Columns</a></li>
<li><a href="lookbook-4columns.html" class="site-nav">4 Columns</a></li>
<li><a href="lookbook-5columns.html" class="site-nav">5 Columns + Fullwidth</a></li>
<li><a href="lookbook-shop.html" class="site-nav last">Lookbook Shop</a></li>
</ul>
</li>
<li><a href="faqs-style1.html" class="site-nav">FAQs <i class="an an-plus-l"></i></a>
<ul class="dropdown">
<li><a href="faqs-style1.html" class="site-nav">FAQs Style1</a></li>
<li><a href="faqs-style2.html" class="site-nav last">FAQs Style2</a></li>
</ul>
</li>
<li><a href="brands-style1.html" class="site-nav">Brands <i class="an an-plus-l"></i></a>
<ul class="dropdown">
<li><a href="brands-style1.html" class="site-nav">Brands Style1</a></li>
<li><a href="brands-style2.html" class="site-nav last">Brands Style2</a></li>
</ul>
</li>
<li><a href="my-account.html" class="site-nav">My Account <i class="an an-plus-l"></i></a>
<ul class="dropdown">
<li><a href="my-account.html" class="site-nav">My Account</a></li>
<li><a href="login-sliding-style.html" class="site-nav">Login Sliding Slideshow</a></li>
<li><a href="login.html" class="site-nav">Login</a></li>
<li><a href="register.html" class="site-nav">Register</a></li>
<li><a href="forgot-password.html" class="site-nav">Forgot Password</a></li>
<li><a href="change-password.html" class="site-nav last">Change Password</a></li>
</ul>
</li>
<li><a href="#" class="site-nav">Empty Pages <i class="an an-plus-l"></i></a>
<ul class="dropdown">
<li><a href="empty-category.html" class="site-nav">Empty Category</a></li>
<li><a href="empty-cart.html" class="site-nav">Empty Cart</a></li>
<li><a href="empty-compare.html" class="site-nav">Empty Compare</a></li>
<li><a href="empty-wishlist.html" class="site-nav">Empty Wishlist</a></li>
<li><a href="empty-search.html" class="site-nav last">Empty Search</a></li>
</ul>
</li>
<li><a href="error-404.html" class="site-nav">Error 404 </a></li>
<li><a href="cms-page.html" class="site-nav">CMS Page</a></li>
<li><a href="coming-soon.html" class="site-nav last">Coming soon <span class="lbl nm_label2">New</span></a></li>
</ul>
</li>
<li class="lvl1 parent megamenu"><a href="blog-left-sidebar.html">Blog <i class="an an-plus-l"></i></a>
<ul>
<li><a href="blog-left-sidebar.html" class="site-nav">Left Sidebar</a></li>
<li><a href="blog-right-sidebar.html" class="site-nav">Right Sidebar</a></li>
<li><a href="blog-fullwidth.html" class="site-nav">Fullwidth</a></li>
<li><a href="blog-masonry.html" class="site-nav">Masonry Blog Style</a></li>
<li><a href="blog-2columns.html" class="site-nav">2 Columns</a></li>
<li><a href="blog-3columns.html" class="site-nav">3 Columns</a></li>
<li><a href="blog-4columns.html" class="site-nav">4 Columns</a></li>
<li><a href="blog-single-post.html" class="site-nav last">Article Page</a></li>
</ul>
</li>
<li class="acLink"></li>
<li class="lvl1 bottom-link"><a href="login.html">Login</a></li>
<li class="lvl1 bottom-link"><a href="register.html">Signup</a></li>
<li class="lvl1 bottom-link"><a href="my-wishlist.html">Wishlist</a></li>
<li class="lvl1 bottom-link"><a href="compare-style1.html">Compare</a></li>
<li class="help bottom-link"><b>NEED HELP?</b><br>Call: +41 525 523 5687</li>
</ul>
</div>
<!--End Mobile Menu-->
<!--Body Container-->
<div id="page-content">
<!--Collection Banner-->
<div class="collection-header">
<div class="collection-hero">
<div class="collection-hero__image" style=""></div>
<div class="collection-hero__title-wrapper container">
<h1 class="collection-hero__title">Elements Banner Styles</h1>
<div class="breadcrumbs text-uppercase mt-1 mt-lg-2"><a href="index-2.html" title="Back to the home page">Home</a><span>|</span><span class="fw-bold">Elements Banner Styles</span></div>
</div>
</div>
</div>
<!--End Collection Banner-->
<!--Main Content-->
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-3 left-col">
<div class="product-sticky-style mb-4">
<div class="elements-links position-relative">
<div class="list-group rounded-0 dashboard-links">
<a href="elements-typography.html" class="list-group-item list-group-item-action my-1">Typography</a>
<a href="elements-buttons.html" class="list-group-item list-group-item-action my-1">Buttons</a>
<a href="elements-titles.html" class="list-group-item list-group-item-action my-1">Titles</a>
<a href="elements-icons.html" class="list-group-item list-group-item-action my-1">Icons</a>
<a href="elements-top-info-bar.html" class="list-group-item list-group-item-action my-1">Top Info Bar</a>
<a href="elements-top-promo-bar.html" class="list-group-item list-group-item-action my-1">Top Promo Bar</a>
<a href="elements-header-styles.html" class="list-group-item list-group-item-action my-1">Header styles</a>
<a href="elements-breadcrumb.html" class="list-group-item list-group-item-action my-1">Breadcrumb</a>
<a href="elements-slider-styles.html" class="list-group-item list-group-item-action my-1">Slider Styles</a>
<a href="elements-banner-styles.html" class="list-group-item list-group-item-action my-1 active">Banner Styles</a>
<a href="elements-testimonial.html" class="list-group-item list-group-item-action my-1">Testimonial</a>
<a href="elements-accordions.html" class="list-group-item list-group-item-action my-1">Accordions</a>
<a href="elements-product.html" class="list-group-item list-group-item-action my-1">Product</a>
<a href="elements-product-tab.html" class="list-group-item list-group-item-action my-1">Product Tab</a>
<a href="elements-blog-posts.html" class="list-group-item list-group-item-action my-1">Blog Posts</a>
<a href="elements-footer-styles.html" class="list-group-item list-group-item-action my-1">Footer styles</a>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-9 main-col">
<div id="elements-banner-styles" class="section pt-0">
<div class="section-header">
<h2>Banner Styles</h2>
</div>
<div class="row">
<div class="col-md-12 mb-4">
<div class="card m-0">
<div class="card-header">
<h5 class="mb-0">Banner Styles 1</h5>
</div>
<div class="card-body">
<!--Banner Masonary-->
<section class="collection-banners style1 m-0">
<div class="grid-masonary banner-grid">
<div class="grid-sizer col-md-4 col-lg-4"></div>
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-lg-4 banner-item">
<div class="collection-grid-item">
<a href="shop-left-sidebar.html">
<div class="img">
<img class="blur-up lazyload" data-src="assets/images/collection/demo1-banner1.webp" src="assets/images/collection/demo1-banner1.webp" alt="SUMMER" title="SUMMER" />
</div>
<div class="details center white-text w-100">
<div class="inner">
<h3 class="title fs-3 mb-1">SUMMER</h3>
<p>AHEAD OF THE TREND</p>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 banner-item">
<div class="collection-grid-item">
<a href="shop-left-sidebar.html">
<div class="img">
<img class="blur-up lazyload" data-src="assets/images/collection/demo1-banner2.webp" src="assets/images/collection/demo1-banner2.webp" alt="BOTTOM & JEANS" title="BOTTOM & JEANS" />
</div>
<div class="details center white-overlay rounded">
<div class="inner">
<h3 class="title mb-1">BOTTOM & JEANS</h3>
<p>CHILL TO THE MAX</p>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 banner-item">
<div class="collection-grid-item">
<a href="shop-left-sidebar.html">
<div class="img">
<img class="blur-up lazyload" data-src="assets/images/collection/demo1-banner3.webp" src="assets/images/collection/demo1-banner3.webp" alt="ACCESSORIES" title="ACCESSORIES" />
</div>
<div class="details center white-text w-100">
<div class="inner">
<h3 class="title fs-3 mb-1">ACCESSORIES</h3>
<p>BE THE MOST YOU</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
<!--End Banner Masonary-->
</div>
</div>
<div class="card text-box HTMLBox">
<div class="card-header bg-transparent d-flex-center justify-content-between">
<h5 class="topic m-0">HTML Code:</h5><button class="btn btn-outline-primary btn-small code-box-copy__btn btn-clipboard" data-clipboard-target="#bannerStyles1" title="Copy">copy</button>
</div>
<div class="card-code-copy">
<pre class="language-html m-0" id="bannerStyles1"><code data-lang="html"><section class="collection-banners style1 m-0">
<div class="grid-masonary banner-grid">
<div class="grid-sizer col-md-4 col-lg-4"></div>
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-lg-4 banner-item">
<div class="collection-grid-item">
<a href="shop-left-sidebar.html">
<div class="img">
<img class="blur-up lazyload" data-src="assets/images/collection/demo1-banner1.webp" src="assets/images/collection/demo1-banner1.webp" alt="SUMMER" title="SUMMER" />
</div>
<div class="details center white-text">
<div class="inner">
<h3 class="title fs-3 mb-1">SUMMER</h3>
<p>AHEAD OF THE TREND</p>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 banner-item">
<div class="collection-grid-item">
<a href="shop-left-sidebar.html">
<div class="img">
<img class="blur-up lazyload" data-src="assets/images/collection/demo1-banner2.webp" src="assets/images/collection/demo1-banner2.webp" alt="BOTTOM & JEANS" title="BOTTOM & JEANS" />
</div>
<div class="details center white-overlay rounded">
<div class="inner">
<h3 class="title mb-1">BOTTOM & JEANS</h3>
<p>CHILL TO THE MAX</p>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 banner-item">
<div class="collection-grid-item">
<a href="shop-left-sidebar.html">
<div class="img">
<img class="blur-up lazyload" data-src="assets/images/collection/demo1-banner3.webp" src="assets/images/collection/demo1-banner3.webp" alt="ACCESSORIES" title="ACCESSORIES" />
</div>
<div class="details center white-text">
<div class="inner">
<h3 class="title fs-3 mb-1">ACCESSORIES</h3>
<p>BE THE MOST YOU</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
</code></pre>
</div>
</div>
</div>
<div class="col-md-12 mb-4">
<div class="card m-0">
<div class="card-header">
<h5 class="mb-0">Banner Styles 2</h5>
</div>
<div class="card-body">
<!--Banner Masonary-->
<section class="collection-banners style1 m-0">
<div class="grid-masonary banner-grid">
<div class="grid-sizer col-12 col-sm-12 col-md-6 col-lg-6"></div>
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-6 banner-item">
<div class="collection-grid-item">
<a href="shop-right-sidebar.html">
<div class="img">
<img class="blur-up lazyload" data-src="assets/images/collection/demo1-banner4.jpg" src="assets/images/collection/demo1-banner4.jpg" alt="STREETSTYLE" title="STREETSTYLE" />
</div>
<div class="details center w-75 white-overlay rounded">
<div class="inner">
<p class="mb-0">NEW COLLECTION</p>
<h3 class="title mt-1 fs-3" style="color:#FE877B">STREETSTYLE</h3>
<span class="btn-primary rounded mt-3">Shop now</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6 banner-item">
<div class="collection-grid-item">
<a href="shop-right-sidebar.html">
<div class="img">
<img class="blur-up lazyload" data-src="assets/images/collection/demo1-banner5.jpg" src="assets/images/collection/demo1-banner5.jpg" alt="BOTTOM & JEANS" title="BOTTOM & JEANS" />
</div>
<div class="details center w-70 white-text rounded middle">
<div class="inner">
<p class="mb-0 fs-5">SUMMER SALE OFFERS</p>
<h3 class="title large-title mb-2 mt-1">70% OFF</h3>
<p class="btn--link text-center fs-6">Shop the collection</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
<!--End Banner Masonary-->
</div>
</div>
<div class="card text-box HTMLBox">
<div class="card-header bg-transparent d-flex-center justify-content-between">
<h5 class="topic m-0">HTML Code:</h5><button class="btn btn-outline-primary btn-small code-box-copy__btn btn-clipboard" data-clipboard-target="#bannerStyles2" title="Copy">copy</button>
</div>
<div class="card-code-copy">
<pre class="language-html m-0" id="bannerStyles2"><code data-lang="html"><section class="collection-banners style1">
<div class="grid-masonary banner-grid">
<div class="grid-sizer col-12 col-sm-12 col-md-6 col-lg-6"></div>
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-6 banner-item">
<div class="collection-grid-item">
<a href="shop-right-sidebar.html">
<div class="img">
<img class="blur-up lazyload" data-src="assets/images/collection/demo1-banner4.jpg" src="assets/images/collection/demo1-banner4.jpg" alt="STREETSTYLE" title="STREETSTYLE" />
</div>
<div class="details center w-75 white-overlay rounded">
<div class="inner">
<p class="mb-0">NEW COLLECTION</p>
<h3 class="title mt-1 fs-3" style="color:#FE877B">STREETSTYLE</h3>
<span class="btn-primary rounded mt-3">Shop now</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6 banner-item">
<div class="collection-grid-item">
<a href="shop-right-sidebar.html">
<div class="img">
<img class="blur-up lazyload" data-src="assets/images/collection/demo1-banner5.jpg" src="assets/images/collection/demo1-banner5.jpg" alt="BOTTOM & JEANS" title="BOTTOM & JEANS" />
</div>
<div class="details center w-70 white-text rounded middle">
<div class="inner">
<p class="mb-0 fs-5">SUMMER SALE OFFERS</p>
<h3 class="title large-title mb-2 mt-1">70% OFF</h3>
<p class="btn--link text-center fs-6">Shop the collection</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
</code></pre>
</div>
</div>
</div>
<div class="col-md-12 mb-4">
<div class="card m-0">
<div class="card-header">
<h5 class="mb-0">Banner Styles 3</h5>
</div>
<div class="card-body">
<!--Banner Masonary-->
<section class="collection-banners style1 pb-0 m-0">
<div class="grid-masonary banner-grid">
<div class="grid-sizer col-md-6 col-lg-6"></div>
<div class="row">
<div class="col-12 col-sm-6 col-md-6 col-lg-6 banner-item">
<div class="collection-grid-item">
<a href="shop-top-filter.html">
<div class="img">
<img class="blur-up lazyload" data-src="assets/images/collection/demo3-ct-img1.jpg" src="assets/images/collection/demo3-ct-img1.jpg" alt="Trendy Look" title="Trendy Look" />
</div>
<div class="details bottom-right white-text">
<div class="inner">
<h3 class="title fs-3 mb-2 body-font fw-600">Trendy Look</h3>
<span class="btn--link">Shop Now</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-6 banner-item">
<div class="collection-grid-item mb-3">
<a href="shop-top-filter.html">
<div class="img">
<img class="blur-up lazyload" data-src="assets/images/collection/demo3-ct-img2.jpg" src="assets/images/collection/demo3-ct-img2.jpg" alt="Men T-Shirts" title="Men T-Shirts" />
</div>
<div class="details bottom-left white-text">
<div class="inner">
<h3 class="title fs-3 mb-2 body-font fw-600">Men T-Shirts</h3>
<span class="btn--link">Shop Now</span>
</div>
</div>
</a>
</div>
<div class="collection-grid-item">
<a href="shop-top-filter.html">
<div class="img">
<img class="blur-up lazyload" data-src="assets/images/collection/demo3-ct-img3.jpg" src="assets/images/collection/demo3-ct-img3.jpg" alt="Accessories" title="Accessories" />
</div>
<div class="details bottom-right white-text">
<div class="inner">
<h3 class="title fs-3 mb-2 body-font fw-600">Accessories</h3>
<span class="btn--link">Shop Now</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
<!--End Banner Masonary-->
</div>
</div>
<div class="card text-box HTMLBox">
<div class="card-header bg-transparent d-flex-center justify-content-between">
<h5 class="topic m-0">HTML Code:</h5><button class="btn btn-outline-primary btn-small code-box-copy__btn btn-clipboard" data-clipboard-target="#bannerStyles3" title="Copy">copy</button>
</div>
<div class="card-code-copy">
<pre class="language-html m-0" id="bannerStyles3"><code data-lang="html"><section class="section collection-banners style1 pb-0">
<div class="grid-masonary banner-grid">
<div class="grid-sizer col-md-6 col-lg-6"></div>
<div class="row">
<div class="col-12 col-sm-6 col-md-6 col-lg-6 banner-item">
<div class="collection-grid-item">
<a href="shop-top-filter.html">
<div class="img">
<img class="blur-up lazyload" data-src="assets/images/collection/demo3-ct-img1.jpg" src="assets/images/collection/demo3-ct-img1.jpg" alt="Trendy Look" title="Trendy Look" />
</div>
<div class="details bottom-right white-text">
<div class="inner">
<h3 class="title fs-3 mb-2 body-font fw-600">Trendy Look</h3>
<span class="btn--link">Shop Now</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-6 banner-item">
<div class="collection-grid-item mb-3">
<a href="shop-top-filter.html">
<div class="img">
<img class="blur-up lazyload" data-src="assets/images/collection/demo3-ct-img2.jpg" src="assets/images/collection/demo3-ct-img2.jpg" alt="Men T-Shirts" title="Men T-Shirts" />
</div>
<div class="details bottom-left white-text">
<div class="inner">
<h3 class="title fs-3 mb-2 body-font fw-600">Men T-Shirts</h3>
<span class="btn--link">Shop Now</span>
</div>
</div>
</a>
</div>
<div class="collection-grid-item">
<a href="shop-top-filter.html">
<div class="img">
<img class="blur-up lazyload" data-src="assets/images/collection/demo3-ct-img3.jpg" src="assets/images/collection/demo3-ct-img3.jpg" alt="Accessories" title="Accessories" />
</div>
<div class="details bottom-right white-text">
<div class="inner">
<h3 class="title fs-3 mb-2 body-font fw-600">Accessories</h3>
<span class="btn--link">Shop Now</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
</code></pre>
</div>
</div>
</div>
<div class="col-md-12 mb-4">
<div class="card m-0">
<div class="card-header">
<h5 class="mb-0">Banner Styles 4</h5>
</div>
<div class="card-body">
<!--Featured Content-->
<section class="featured-content style1">
<div class="row g-0">
<div class="col-12 col-sm-12 col-md-12 col-lg-12">
<div class="d-flex align-items-stretch justify-content-between w-100 flex-sm-row flex-column">
<div class="f-item fl-1 d-flex w-100 align-items-center order-md-1 order-xl-0 order-sm-1 order-lg-0 order-1">
<div class="f-image">
<img class="blur-up lazyload" data-src="assets/images/content/featured-content-img1.jpg" src="assets/images/content/featured-content-img1.jpg" alt="" title="" />
</div>
</div>
<div class="f-item fl-1 d-flex w-100 align-items-center blue-bg order-xl-1 order-md-0 order-sm-0 order-lg-1 order-1">
<div class="f-text">
<h3 class="body-font mb-3">New Arrivals Weekly</h3>
<div class="rte rte-setting d-flex mb-4">
<p>We release NEW items every single week! Shop our latest release full of on-trend and affordable new styles under $99</p>
</div>
<a href="shop-left-sidebar.html" class="btn btn-small mt20">Shop Now</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!--End Featured Content-->
</div>
</div>
<div class="card text-box HTMLBox">
<div class="card-header bg-transparent d-flex-center justify-content-between">
<h5 class="topic m-0">HTML Code:</h5><button class="btn btn-outline-primary btn-small code-box-copy__btn btn-clipboard" data-clipboard-target="#bannerStyles4" title="Copy">copy</button>
</div>
<div class="card-code-copy">
<pre class="language-html m-0" id="bannerStyles4"><code data-lang="html"><section class="featured-content style1">
<div class="row g-0">
<div class="col-12 col-sm-12 col-md-12 col-lg-12">
<div class="d-flex align-items-stretch justify-content-between w-100 flex-sm-row flex-column">
<div class="f-item fl-1 d-flex w-100 align-items-center order-md-1 order-xl-0 order-sm-1 order-lg-0 order-1">
<div class="f-image">
<img class="blur-up lazyload" data-src="assets/images/content/featured-content-img1.jpg" src="assets/images/content/featured-content-img1.jpg" alt="" title="" />
</div>
</div>
<div class="f-item fl-1 d-flex w-100 align-items-center blue-bg order-xl-1 order-md-0 order-sm-0 order-lg-1 order-1">
<div class="f-text">
<h3 class="body-font mb-3">New Arrivals Weekly</h3>
<div class="rte rte-setting d-flex mb-4">
<p>We release NEW items every single week! Shop our latest release full of on-trend and affordable new styles under $99</p>
</div>
<a href="shop-left-sidebar.html" class="btn btn-small mt20">Shop Now</a>
</div>
</div>
</div>
</div>
</div>
</section>
</code></pre>
</div>
</div>
</div>
<div class="col-md-12 mb-4">
<div class="card m-0">
<div class="card-header">
<h5 class="mb-0">Banner Styles 5</h5>
</div>
<div class="card-body">
<!--Banner Masonary-->
<section class="collection-banners style1 m-0">
<div class="grid-masonary banner-grid">
<div class="grid-sizer col-md-4 col-lg-4"></div>
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-lg-4 banner-item rounded">
<div class="collection-grid-item rounded">
<a href="shop-right-sidebar.html">
<div class="img">
<img class="blur-up lazyload" data-src="assets/images/collection/demo5-banner1.jpg" src="assets/images/collection/demo5-banner1.jpg" alt="Girls Jacket" title="Girls Jacket" />
</div>
<div class="details top w-100 white-text px-2 py-2">
<div class="inner">
<h3 class="title fs-3 mb-2 mt-1 body-font text-capitalize">Girls Jacket</h3>
<span class="btn--link text-uppercase fw-600">Shop Now</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 banner-item rounded">
<div class="collection-grid-item rounded">
<a href="shop-right-sidebar.html">
<div class="img">
<img class="blur-up lazyload" data-src="assets/images/collection/demo5-banner2.jpg" src="assets/images/collection/demo5-banner2.jpg" alt="Toys & Accessories" title="Toys & Accessories" />
</div>
<div class="details top w-100 white-text px-2 py-2">
<div class="inner">
<h3 class="title fs-3 mb-2 mt-1 body-font text-capitalize">Toys & Accessories</h3>
<span class="btn--link text-uppercase fw-600">Shop Now</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 banner-item">
<div class="collection-grid-item rounded">
<a href="shop-right-sidebar.html">
<div class="img">
<img class="blur-up lazyload" data-src="assets/images/collection/demo5-banner3.jpg" src="assets/images/collection/demo5-banner3.jpg" alt="Boys Tshirt" title="Boys Tshirt" />
</div>
<div class="details top w-100 white-text px-2 py-2">
<div class="inner">
<h3 class="title fs-3 mb-2 mt-1 body-font text-capitalize">Boys Tshirt</h3>
<span class="btn--link text-uppercase fw-600">Shop Now</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
<!--End Banner Masonary-->
</div>
</div>
<div class="card text-box HTMLBox">
<div class="card-header bg-transparent d-flex-center justify-content-between">
<h5 class="topic m-0">HTML Code:</h5><button class="btn btn-outline-primary btn-small code-box-copy__btn btn-clipboard" data-clipboard-target="#bannerStyles5" title="Copy">copy</button>
</div>
<div class="card-code-copy">
<pre class="language-html m-0" id="bannerStyles5"><code data-lang="html"><section class="collection-banners style1 m-0">
<div class="grid-masonary banner-grid">
<div class="grid-sizer col-md-4 col-lg-4"></div>
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-lg-4 banner-item rounded">
<div class="collection-grid-item rounded">
<a href="shop-right-sidebar.html">
<div class="img">
<img class="blur-up lazyload" data-src="assets/images/collection/demo5-banner1.jpg" src="assets/images/collection/demo5-banner1.jpg" alt="Girls Jacket" title="Girls Jacket" />
</div>
<div class="details top w-100 white-text px-2 py-2">
<div class="inner">
<h3 class="title fs-3 mb-2 mt-1 body-font text-capitalize">Girls Jacket</h3>
<span class="btn--link text-uppercase fw-600">Shop Now</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 banner-item rounded">
<div class="collection-grid-item rounded">
<a href="shop-right-sidebar.html">
<div class="img">
<img class="blur-up lazyload" data-src="assets/images/collection/demo5-banner2.jpg" src="assets/images/collection/demo5-banner2.jpg" alt="Toys & Accessories" title="Toys & Accessories" />
</div>
<div class="details top w-100 white-text px-2 py-2">
<div class="inner">
<h3 class="title fs-3 mb-2 mt-1 body-font text-capitalize">Toys & Accessories</h3>
<span class="btn--link text-uppercase fw-600">Shop Now</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 banner-item">
<div class="collection-grid-item rounded">
<a href="shop-right-sidebar.html">
<div class="img">
<img class="blur-up lazyload" data-src="assets/images/collection/demo5-banner3.jpg" src="assets/images/collection/demo5-banner3.jpg" alt="Boys Tshirt" title="Boys Tshirt" />
</div>
<div class="details top w-100 white-text px-2 py-2">
<div class="inner">
<h3 class="title fs-3 mb-2 mt-1 body-font text-capitalize">Boys Tshirt</h3>
<span class="btn--link text-uppercase fw-600">Shop Now</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
</code></pre>
</div>
</div>
</div>
<div class="col-md-12 mb-4">
<div class="card m-0">
<div class="card-header">
<h5 class="mb-0">Banner Styles 6</h5>
</div>
<div class="card-body">
<!--Collection Banners-->
<section class="collection-banners style7 m-0">
<div class="grid-masonary banner-grid grid-mr-10">
<div class="grid-sizer col-md-6 col-lg-6"></div>
<div class="row g-0">
<div class="col-12 col-sm-12 col-md-6 col-lg-6 banner-item mb-0">
<div class="row mx-0">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 cl-item">
<div class="collection-grid-item">
<a href="shop-top-filter.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo7-banner1.jpg" src="assets/images/collection/demo7-banner1.jpg" alt="collection" title="" /></div>
<div class="details bottom">
<div class="inner">
<h3 class="title body-font m-0">MINI DRESSES</h3>
</div>
</div>
</a>
</div>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 cl-item">
<div class="collection-grid-item">
<a href="shop-top-filter.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo7-banner4.jpg" src="assets/images/collection/demo7-banner4.jpg" alt="collection" title="" /></div>
<div class="details bottom">
<div class="inner">
<h3 class="title body-font m-0">ACCESSRIES</h3>
</div>
</div>
</a>
</div>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 cl-item">
<div class="collection-grid-item">
<a href="shop-top-filter.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo7-banner5.jpg" src="assets/images/collection/demo7-banner5.jpg" alt="collection" title="" /></div>
<div class="details bottom">
<div class="inner">
<h3 class="title body-font m-0">SHOES</h3>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6 banner-item mb-0">
<div class="row mx-0">
<div class="col-6 col-sm-6 col-md-6 col-lg-6 cl-item">
<div class="collection-grid-item">
<a href="shop-top-filter.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo7-banner2.jpg" src="assets/images/collection/demo7-banner2.jpg" alt="collection" title="" /></div>
<div class="details bottom">
<div class="inner">
<h3 class="title body-font m-0">PENTS</h3>
</div>
</div>
</a>
</div>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 px-0">
<div class="row mx-0">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 cl-item">
<div class="collection-grid-item">
<a href="shop-top-filter.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo7-banner3.jpg" src="assets/images/collection/demo7-banner3.jpg" alt="collection" title="" /></div>
<div class="details bottom">
<div class="inner">
<h3 class="title body-font m-0">HOODIES</h3>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-12 cl-item">
<div class="collection-grid-item">
<a href="shop-top-filter.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo7-banner6.jpg" src="assets/images/collection/demo7-banner6.jpg" alt="collection" title="" /></div>
<div class="details bottom">
<div class="inner">
<h3 class="title body-font m-0">MEN</h3>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--End Collection Banners-->
</div>
</div>
<div class="card text-box HTMLBox">
<div class="card-header bg-transparent d-flex-center justify-content-between">
<h5 class="topic m-0">HTML Code:</h5><button class="btn btn-outline-primary btn-small code-box-copy__btn btn-clipboard" data-clipboard-target="#bannerStyles6" title="Copy">copy</button>
</div>
<div class="card-code-copy">
<pre class="language-html m-0" id="bannerStyles6"><code data-lang="html"><section class="collection-banners style7 m-0">
<div class="grid-masonary banner-grid grid-mr-10">
<div class="grid-sizer col-md-6 col-lg-6"></div>
<div class="row g-0">
<div class="col-12 col-sm-12 col-md-6 col-lg-6 banner-item mb-0">
<div class="row mx-0">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 cl-item">
<div class="collection-grid-item">
<a href="shop-top-filter.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo7-banner1.jpg" src="assets/images/collection/demo7-banner1.jpg" alt="collection" title="" /></div>
<div class="details bottom">
<div class="inner">
<h3 class="title body-font m-0">MINI DRESSES</h3>
</div>
</div>
</a>
</div>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 cl-item">
<div class="collection-grid-item">
<a href="shop-top-filter.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo7-banner4.jpg" src="assets/images/collection/demo7-banner4.jpg" alt="collection" title="" /></div>
<div class="details bottom">
<div class="inner">
<h3 class="title body-font m-0">ACCESSRIES</h3>
</div>
</div>
</a>
</div>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 cl-item">
<div class="collection-grid-item">
<a href="shop-top-filter.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo7-banner5.jpg" src="assets/images/collection/demo7-banner5.jpg" alt="collection" title="" /></div>
<div class="details bottom">
<div class="inner">
<h3 class="title body-font m-0">SHOES</h3>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6 banner-item mb-0">
<div class="row mx-0">
<div class="col-6 col-sm-6 col-md-6 col-lg-6 cl-item">
<div class="collection-grid-item">
<a href="shop-top-filter.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo7-banner2.jpg" src="assets/images/collection/demo7-banner2.jpg" alt="collection" title="" /></div>
<div class="details bottom">
<div class="inner">
<h3 class="title body-font m-0">PENTS</h3>
</div>
</div>
</a>
</div>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 px-0">
<div class="row mx-0">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 cl-item">
<div class="collection-grid-item">
<a href="shop-top-filter.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo7-banner3.jpg" src="assets/images/collection/demo7-banner3.jpg" alt="collection" title="" /></div>
<div class="details bottom">
<div class="inner">
<h3 class="title body-font m-0">HOODIES</h3>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-12 cl-item">
<div class="collection-grid-item">
<a href="shop-top-filter.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo7-banner6.jpg" src="assets/images/collection/demo7-banner6.jpg" alt="collection" title="" /></div>
<div class="details bottom">
<div class="inner">
<h3 class="title body-font m-0">MEN</h3>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</code></pre>
</div>
</div>
</div>
<div class="col-md-12 mb-4">
<div class="card m-0">
<div class="card-header">
<h5 class="mb-0">Banner Styles 7</h5>
</div>
<div class="card-body index-demo8">
<!--Collection Banners-->
<section class="collection-banner m-0">
<div class="grid-categorys grid-mr-15">
<div class="row g-0 collection-slider-3items arwOut3">
<div class="col-12 col-sm-6 col-md-4 col-lg-4 category-grid-item cl-item">
<div class="category-item zoomscal-hov">
<a href="shop-left-sidebar.html" class="category-link">
<div class="zoom-scal"><img class="blur-up lazyload" data-src="assets/images/collection/demo8-banner1.jpg" src="assets/images/collection/demo8-banner1.jpg" alt="collection" title="" /></div>
<div class="details">
<div class="inner">
<h3 class="category-title body-font">CROP TOPS</h3>
<span class="counts">18 Products</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 category-grid-item cl-item">
<div class="category-item zoomscal-hov">
<a href="shop-left-sidebar.html" class="category-link">
<div class="zoom-scal"><img class="blur-up lazyload" data-src="assets/images/collection/demo8-banner2.jpg" src="assets/images/collection/demo8-banner2.jpg" alt="collection" title="" /></div>
<div class="details">
<div class="inner">
<h3 class="category-title body-font">WOMEN SHOES</h3>
<span class="counts">10 Products</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 category-grid-item cl-item">
<div class="category-item zoomscal-hov">
<a href="shop-left-sidebar.html" class="category-link">
<div class="zoom-scal"><img class="blur-up lazyload" data-src="assets/images/collection/demo8-banner3.jpg" src="assets/images/collection/demo8-banner3.jpg" alt="collection" title="" /></div>
<div class="details">
<div class="inner">
<h3 class="category-title body-font">MEN TSHIRT</h3>
<span class="counts">16 Products</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
<!--End Collection Banners-->
</div>
</div>
<div class="card text-box HTMLBox">
<div class="card-header bg-transparent d-flex-center justify-content-between">
<h5 class="topic m-0">HTML Code:</h5><button class="btn btn-outline-primary btn-small code-box-copy__btn btn-clipboard" data-clipboard-target="#bannerStyles7" title="Copy">copy</button>
</div>
<div class="card-code-copy">
<pre class="language-html m-0" id="bannerStyles7"><code data-lang="html"><section class="collection-banner m-0">
<div class="grid-categorys grid-mr-15">
<div class="row g-0 collection-slider-3items arwOut3">
<div class="col-12 col-sm-6 col-md-4 col-lg-4 category-grid-item cl-item">
<div class="category-item zoomscal-hov">
<a href="shop-left-sidebar.html" class="category-link">
<div class="zoom-scal"><img class="blur-up lazyload" data-src="assets/images/collection/demo8-banner1.jpg" src="assets/images/collection/demo8-banner1.jpg" alt="collection" title="" /></div>
<div class="details">
<div class="inner">
<h3 class="category-title body-font">CROP TOPS</h3>
<span class="counts">18 Products</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 category-grid-item cl-item">
<div class="category-item zoomscal-hov">
<a href="shop-left-sidebar.html" class="category-link">
<div class="zoom-scal"><img class="blur-up lazyload" data-src="assets/images/collection/demo8-banner2.jpg" src="assets/images/collection/demo8-banner2.jpg" alt="collection" title="" /></div>
<div class="details">
<div class="inner">
<h3 class="category-title body-font">WOMEN SHOES</h3>
<span class="counts">10 Products</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 category-grid-item cl-item">
<div class="category-item zoomscal-hov">
<a href="shop-left-sidebar.html" class="category-link">
<div class="zoom-scal"><img class="blur-up lazyload" data-src="assets/images/collection/demo8-banner3.jpg" src="assets/images/collection/demo8-banner3.jpg" alt="collection" title="" /></div>
<div class="details">
<div class="inner">
<h3 class="category-title body-font">MEN TSHIRT</h3>
<span class="counts">16 Products</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
</code></pre>
</div>
</div>
</div>
<div class="col-md-12 mb-4">
<div class="card m-0">
<div class="card-header">
<h5 class="mb-0">Banner Styles 8</h5>
</div>
<div class="card-body index-demo9">
<!--Collection Banners-->
<section class="collection-banner m-0">
<div class="grid-categorys grid-mr-10">
<div class="row m-0 style2 arwOut3">
<div class="col-12 col-sm-6 col-md-4 col-lg-4 category-grid-item cl-item">
<div class="category-item zoomscal-hov">
<a href="shop-left-sidebar.html" class="category-link">
<div class="zoom-scal"><img class="blur-up lazyload" data-src="assets/images/collection/demo9-banner1.jpg" src="assets/images/collection/demo9-banner1.jpg" alt="collection" title="" /></div>
<div class="details">
<div class="inner">
<h3 class="category-title body-font">DRESSES</h3>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 category-grid-item cl-item">
<div class="category-item zoomscal-hov">
<a href="shop-left-sidebar.html" class="category-link">
<div class="zoom-scal"><img class="blur-up lazyload" data-src="assets/images/collection/demo9-banner2.jpg" src="assets/images/collection/demo9-banner2.jpg" alt="collection" title="" /></div>
<div class="details">
<div class="inner">
<h3 class="category-title body-font">TOPS</h3>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-4 col-md-3 col-lg-4 category-grid-item cl-item">
<div class="category-item zoomscal-hov">
<a href="shop-left-sidebar.html" class="category-link">
<div class="zoom-scal"><img class="blur-up lazyload" data-src="assets/images/collection/demo9-banner3.jpg" src="assets/images/collection/demo9-banner3.jpg" alt="collection" title="" /></div>
<div class="details">
<div class="inner">
<h3 class="category-title body-font">SHOES</h3>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
<!--End Collection Banners-->
</div>
</div>
<div class="card text-box HTMLBox">
<div class="card-header bg-transparent d-flex-center justify-content-between">
<h5 class="topic m-0">HTML Code:</h5><button class="btn btn-outline-primary btn-small code-box-copy__btn btn-clipboard" data-clipboard-target="#bannerStyles8" title="Copy">copy</button>
</div>
<div class="card-code-copy">
<pre class="language-html m-0" id="bannerStyles8"><code data-lang="html"><section class="section collection-banner m-0">
<div class="grid-categorys grid-mr-30">
<div class="row g-0 style2 collection-grid-slider arwOut3">
<div class="col-12 col-sm-6 col-md-4 col-lg-4 category-grid-item cl-item">
<div class="category-item zoomscal-hov">
<a href="shop-left-sidebar.html" class="category-link">
<div class="zoom-scal"><img class="blur-up lazyload" data-src="assets/images/collection/demo9-banner1.jpg" src="assets/images/collection/demo9-banner1.jpg" alt="collection" title="" /></div>
<div class="details">
<div class="inner">
<h3 class="category-title body-font">DRESSES</h3>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 category-grid-item cl-item">
<div class="category-item zoomscal-hov">
<a href="shop-left-sidebar.html" class="category-link">
<div class="zoom-scal"><img class="blur-up lazyload" data-src="assets/images/collection/demo9-banner2.jpg" src="assets/images/collection/demo9-banner2.jpg" alt="collection" title="" /></div>
<div class="details">
<div class="inner">
<h3 class="category-title body-font">TOPS</h3>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 category-grid-item cl-item">
<div class="category-item zoomscal-hov">
<a href="shop-left-sidebar.html" class="category-link">
<div class="zoom-scal"><img class="blur-up lazyload" data-src="assets/images/collection/demo9-banner3.jpg" src="assets/images/collection/demo9-banner3.jpg" alt="collection" title="" /></div>
<div class="details">
<div class="inner">
<h3 class="category-title body-font">SHOES</h3>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
</code></pre>
</div>
</div>
</div>
<div class="col-md-12 mb-4">
<div class="card m-0">
<div class="card-header">
<h5 class="mb-0">Banner Styles 9</h5>
</div>
<div class="card-body">
<img class="blur-up lazyload" data-src="assets/images/elements/index-demo10-banner-style.png" src="assets/images/elements/index-demo10-banner-style.png" alt="collection" title="" />
</div>
</div>
<div class="card text-box HTMLBox">
<div class="card-header bg-transparent d-flex-center justify-content-between">
<h5 class="topic m-0">HTML Code:</h5><button class="btn btn-outline-primary btn-small code-box-copy__btn btn-clipboard" data-clipboard-target="#bannerStyles9" title="Copy">copy</button>
</div>
<div class="card-code-copy">
<pre class="language-html m-0" id="bannerStyles9"><code data-lang="html"><section class="collection-banners style8 m-0">
<div class="grid-masonary banner-grid grid-mr-10">
<div class="grid-sizer col-12 col-sm-4 col-md-4 col-lg-4 mw-100"></div>
<div class="row mx-0">
<div class="col-12 col-sm-4 col-md-4 col-lg-4 mw-100 cl-item banner-item">
<div class="collection-grid-item banner1">
<a href="shop-top-filter.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo10-banner1.jpg" src="assets/images/collection/demo10-banner1.jpg" alt="collection" title="" /></div>
<div class="details center-right bg-transparent">
<div class="inner text-white">
<h3 class="title fs-3 fw-bold lh-1 body-font ls-normal mb-0 text-white">50% OFF</h3>
<p class="fs-5">on skincare</p>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-8 col-md-8 col-lg-8 mw-100 cl-item banner-item">
<div class="collection-grid-item banner2">
<a href="shop-top-filter.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo10-banner2.jpg" src="assets/images/collection/demo10-banner2.jpg" alt="collection" title="" /></div>
<div class="details center-bottom bg-transparent">
<div class="inner text-black">
<h3 class="title fs-3 fw-bold body-font ls-normal mb-1 text-black">MACKUP KIT SET</h3>
<p class="">Bestselling Kits starting from $199</p>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-8 col-md-8 col-lg-8 mw-100 cl-item banner-item">
<div class="collection-grid-item banner3">
<a href="shop-top-filter.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo10-banner3.jpg" src="assets/images/collection/demo10-banner3.jpg" alt="collection" title="" /></div>
<div class="details top-left bg-transparent">
<div class="inner">
<h3 class="title fw-bold lh-1 body-font ls-normal mb-2 text-white">HERBAL COSMETICS</h3>
<p class="fs-6 text-white mb-2">Herbal solutions for every application from top to toe</p>
<span class="btn--link">SHOP NOW</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-4 col-md-4 col-lg-4 mw-100 cl-item banner-item">
<div class="collection-grid-item banner4">
<a href="shop-top-filter.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo10-banner4.jpg" src="assets/images/collection/demo10-banner4.jpg" alt="collection" title="" /></div>
<div class="details bottom-left bg-transparent">
<div class="inner text-black">
<h3 class="title fs-5 lh-1 body-font ls-normal fw-normal mb-1 text-black">LONG LASTING <b style="font-size:140%">LIPSTICK</b></h3>
<p class="an-1x">Best quality soft matte finish light on lips</p>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-4 col-md-4 col-lg-4 mw-100 cl-item banner-item">
<div class="collection-grid-item banner5">
<a href="shop-top-filter.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo10-banner5.jpg" src="assets/images/collection/demo10-banner5.jpg" alt="collection" title="" /></div>
<div class="details top-center bg-transparent">
<div class="inner text-white">
<h3 class="title fs-3 lh-1 fw-bold ls-normal body-font mb-2 text-white">BATHING ESSENTIALS</h3>
<p class="mb-2">Feel beautiful, stay natural, Stay cosmyra</p>
<span class="btn--link">Shop Now</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-4 col-md-4 col-lg-4 mw-100 cl-item banner-item">
<div class="collection-grid-item banner6">
<a href="shop-top-filter.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo10-banner6.jpg" src="assets/images/collection/demo10-banner6.jpg" alt="collection" title="" /></div>
<div class="details bottom-left bg-transparent">
<div class="inner text-black">
<h3 class="title fs-4 lh-1 fw-bold ls-normal body-font mb-1 text-black">FLAWLESS COVERAGE</h3>
<p class="an-1x">With our premium line of makeup brushes</p>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-4 col-md-4 col-lg-4 mw-100 cl-item banner-item">
<div class="collection-grid-item banner7">
<a href="shop-top-filter.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo10-banner7.jpg" src="assets/images/collection/demo10-banner7.jpg" alt="collection" title="" /></div>
<div class="details bottom-right bg-transparent">
<div class="inner text-white">
<h3 class="title fs-4 lh-1 fw-bold ls-normal body-font mb-1 text-white">INSTANT SHADOW</h3>
<p class="an-1x">for your eyes in a minute</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
</code></pre>
</div>
</div>
</div>
<div class="col-md-12 mb-4">
<div class="card m-0">
<div class="card-header">
<h5 class="mb-0">Banner Styles 10</h5>
</div>
<div class="card-body">
<!--Shop By Categories Banner Masonary-->
<section class="collection-banners style8 shop-categories m-0 pb-0">
<div class="grid-masonary banner-grid grid-mr-10">
<div class="grid-sizer col-12 col-sm-6 col-md-6 col-lg-6 mw-100"></div>
<div class="row mx-0">
<div class="col-12 col-sm-6 col-md-6 col-lg-6 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-left-sidebar.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo10-small-banner1.jpg" src="assets/images/collection/demo10-small-banner1.jpg" alt="collection" title="" /></div>
<div class="details center-left black-link bg-transparent">
<div class="inner">
<h3 class="title fw-600 body-font ls-normal mb-1">All GLAM NO HARM</h3>
<span class="btn--link">Shop Now</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-6 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-left-sidebar.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo10-small-banner2.jpg" src="assets/images/collection/demo10-small-banner2.jpg" alt="collection" title="" /></div>
<div class="details center-left black-link bg-transparent">
<div class="inner">
<h3 class="title fw-600 body-font ls-normal mb-1">EVERYDAY MASCARA</h3>
<span class="btn--link">Shop Now</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-6 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-left-sidebar.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo10-small-banner3.jpg" src="assets/images/collection/demo10-small-banner3.jpg" alt="collection" title="" /></div>
<div class="details center-left black-link bg-transparent">
<div class="inner">
<h3 class="title fw-600 body-font ls-normal mb-1">CILICON FREE SERUM</h3>
<span class="btn--link">Shop Now</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-6 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-left-sidebar.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo10-small-banner4.jpg" src="assets/images/collection/demo10-small-banner4.jpg" alt="collection" title="" /></div>
<div class="details center-left black-link bg-transparent">
<div class="inner col-md-9">
<h3 class="title fw-600 body-font ls-normal mb-1">GLOSSY & MATTE NAIL POLISH</h3>
<span class="btn--link">Shop Now</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
<!--End Shop By Categories Banner Masonary-->
</div>
</div>
<div class="card text-box HTMLBox">
<div class="card-header bg-transparent d-flex-center justify-content-between">
<h5 class="topic m-0">HTML Code:</h5><button class="btn btn-outline-primary btn-small code-box-copy__btn btn-clipboard" data-clipboard-target="#bannerStyles10" title="Copy">copy</button>
</div>
<div class="card-code-copy">
<pre class="language-html m-0" id="bannerStyles10"><code data-lang="html"><section class="collection-banners style8 shop-categories m-0 pb-0">
<div class="grid-masonary banner-grid grid-mr-10">
<div class="grid-sizer col-12 col-sm-6 col-md-6 col-lg-6 mw-100"></div>
<div class="row mx-0">
<div class="col-12 col-sm-6 col-md-6 col-lg-6 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-left-sidebar.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo10-small-banner1.jpg" src="assets/images/collection/demo10-small-banner1.jpg" alt="collection" title="" /></div>
<div class="details center-left black-link bg-transparent">
<div class="inner">
<h3 class="title fw-600 body-font ls-normal mb-1">All GLAM NO HARM</h3>
<span class="btn--link">Shop Now</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-6 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-left-sidebar.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo10-small-banner2.jpg" src="assets/images/collection/demo10-small-banner2.jpg" alt="collection" title="" /></div>
<div class="details center-left black-link bg-transparent">
<div class="inner">
<h3 class="title fw-600 body-font ls-normal mb-1">EVERYDAY MASCARA</h3>
<span class="btn--link">Shop Now</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-6 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-left-sidebar.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo10-small-banner3.jpg" src="assets/images/collection/demo10-small-banner3.jpg" alt="collection" title="" /></div>
<div class="details center-left black-link bg-transparent">
<div class="inner">
<h3 class="title fw-600 body-font ls-normal mb-1">CILICON FREE SERUM</h3>
<span class="btn--link">Shop Now</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-6 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-left-sidebar.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo10-small-banner4.jpg" src="assets/images/collection/demo10-small-banner4.jpg" alt="collection" title="" /></div>
<div class="details center-left black-link bg-transparent">
<div class="inner col-md-9">
<h3 class="title fw-600 body-font ls-normal mb-1">GLOSSY & MATTE NAIL POLISH</h3>
<span class="btn--link">Shop Now</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
</code></pre>
</div>
</div>
</div>
<div class="col-md-12 mb-4">
<div class="card m-0">
<div class="card-header">
<h5 class="mb-0">Banner Styles 11</h5>
</div>
<div class="card-body">
<!--Collection Banners-->
<section class="collection-banners style7 mt-0">
<div class="grid-masonary banner-grid grid-mr-15">
<div class="grid-sizer col-12 col-sm-12 col-md-4 col-lg-4"></div>
<div class="row mx-0">
<div class="col-12 col-sm-6 col-md-4 col-lg-4 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-right-sidebar.html">
<div class="img"><img class="rounded blur-up lazyload" data-src="assets/images/collection/demo11-banner1.jpg" src="assets/images/collection/demo11-banner1.jpg" alt="collection" title="" /></div>
<div class="details bottom">
<div class="inner rounded">
<h3 class="title body-font m-0 body-font fs-6 text-black text-transform-none">Dog</h3>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-right-sidebar.html">
<div class="img"><img class="rounded blur-up lazyload" data-src="assets/images/collection/demo11-banner2.jpg" src="assets/images/collection/demo11-banner2.jpg" alt="collection" title="" /></div>
<div class="details bottom">
<div class="inner rounded">
<h3 class="title body-font m-0 body-font fs-6 text-black text-transform-none">Birds</h3>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-right-sidebar.html">
<div class="img"><img class="rounded blur-up lazyload" data-src="assets/images/collection/demo11-banner3.jpg" src="assets/images/collection/demo11-banner3.jpg" alt="collection" title="" /></div>
<div class="details bottom">
<div class="inner rounded">
<h3 class="title body-font m-0 body-font fs-6 text-black text-transform-none">Small Pet</h3>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-right-sidebar.html">
<div class="img"><img class="rounded blur-up lazyload" data-src="assets/images/collection/demo11-banner4.jpg" src="assets/images/collection/demo11-banner4.jpg" alt="collection" title="" /></div>
<div class="details bottom">
<div class="inner rounded">
<h3 class="title body-font m-0 body-font fs-6 text-black text-transform-none">Cat</h3>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-right-sidebar.html">
<div class="img"><img class="rounded blur-up lazyload" data-src="assets/images/collection/demo11-banner5.jpg" src="assets/images/collection/demo11-banner5.jpg" alt="collection" title="" /></div>
<div class="details bottom">
<div class="inner rounded">
<h3 class="title body-font m-0 body-font fs-6 text-black text-transform-none">Reptile</h3>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
<!--End Collection Banners-->
</div>
</div>
<div class="card text-box HTMLBox">
<div class="card-header bg-transparent d-flex-center justify-content-between">
<h5 class="topic m-0">HTML Code:</h5><button class="btn btn-outline-primary btn-small code-box-copy__btn btn-clipboard" data-clipboard-target="#bannerStyles11" title="Copy">copy</button>
</div>
<div class="card-code-copy">
<pre class="language-html m-0" id="bannerStyles11"><code data-lang="html"><section class="collection-banners style7 mt-0">
<div class="grid-masonary banner-grid grid-mr-15">
<div class="grid-sizer col-12 col-sm-12 col-md-4 col-lg-4"></div>
<div class="row mx-0">
<div class="col-12 col-sm-6 col-md-4 col-lg-4 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-right-sidebar.html">
<div class="img"><img class="rounded blur-up lazyload" data-src="assets/images/collection/demo11-banner1.jpg" src="assets/images/collection/demo11-banner1.jpg" alt="collection" title="" /></div>
<div class="details bottom">
<div class="inner rounded">
<h3 class="title body-font m-0 body-font fs-6 text-black text-transform-none">Dog</h3>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-right-sidebar.html">
<div class="img"><img class="rounded blur-up lazyload" data-src="assets/images/collection/demo11-banner2.jpg" src="assets/images/collection/demo11-banner2.jpg" alt="collection" title="" /></div>
<div class="details bottom">
<div class="inner rounded">
<h3 class="title body-font m-0 body-font fs-6 text-black text-transform-none">Birds</h3>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-right-sidebar.html">
<div class="img"><img class="rounded blur-up lazyload" data-src="assets/images/collection/demo11-banner3.jpg" src="assets/images/collection/demo11-banner3.jpg" alt="collection" title="" /></div>
<div class="details bottom">
<div class="inner rounded">
<h3 class="title body-font m-0 body-font fs-6 text-black text-transform-none">Small Pet</h3>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-right-sidebar.html">
<div class="img"><img class="rounded blur-up lazyload" data-src="assets/images/collection/demo11-banner4.jpg" src="assets/images/collection/demo11-banner4.jpg" alt="collection" title="" /></div>
<div class="details bottom">
<div class="inner rounded">
<h3 class="title body-font m-0 body-font fs-6 text-black text-transform-none">Cat</h3>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-right-sidebar.html">
<div class="img"><img class="rounded blur-up lazyload" data-src="assets/images/collection/demo11-banner5.jpg" src="assets/images/collection/demo11-banner5.jpg" alt="collection" title="" /></div>
<div class="details bottom">
<div class="inner rounded">
<h3 class="title body-font m-0 body-font fs-6 text-black text-transform-none">Reptile</h3>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
</code></pre>
</div>
</div>
</div>
<div class="col-md-12 mb-4">
<div class="card m-0">
<div class="card-header">
<h5 class="mb-0">Banner Styles 12</h5>
</div>
<div class="card-body index-demo12">
<!--Banner Masonary-->
<section class="collection-banners style8 mt-0 pt-0">
<div class="grid-masonary banner-grid grid-mr-20">
<div class="grid-sizer col-12 col-sm-6 col-md-6 col-lg-6 mw-100"></div>
<div class="row mx-0">
<div class="col-12 col-sm-6 col-md-6 col-lg-6 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-top-filter.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo12-banner1.jpg" src="assets/images/collection/demo12-banner1.jpg" alt="collection" title="" /></div>
<div class="details center-left bg-transparent">
<div class="inner text-white">
<h3 class="title text-transform-none fs-3 fw-bold lh-1 body-font text-white mb-10">Dewalt 18V</h3>
<p class="">AHEAD OF THE TREND</p>
<span class="btn btn-small rounded m-0">Buy now</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-6 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-top-filter.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo12-banner2.jpg" src="assets/images/collection/demo12-banner2.jpg" alt="collection" title="" /></div>
<div class="details center-left bg-transparent">
<div class="inner" style="color:#1f476f;">
<h3 class="title text-transform-none fs-3 fw-bold lh-1 body-font mb-10" style="color:#1f476f;">Powerpack</h3>
<p class="">POWER TO THE MAX</p>
<span class="btn btn-small rounded m-0">Buy now</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
<!--End Banner Masonary-->
</div>
</div>
<div class="card text-box HTMLBox">
<div class="card-header bg-transparent d-flex-center justify-content-between">
<h5 class="topic m-0">HTML Code:</h5><button class="btn btn-outline-primary btn-small code-box-copy__btn btn-clipboard" data-clipboard-target="#bannerStyles12" title="Copy">copy</button>
</div>
<div class="card-code-copy">
<pre class="language-html m-0" id="bannerStyles12"><code data-lang="html"><section class="collection-banners style8 mt-0 pt-0">
<div class="grid-masonary banner-grid grid-mr-20">
<div class="grid-sizer col-12 col-sm-6 col-md-4 col-lg-4 mw-100"></div>
<div class="row mx-0">
<div class="col-12 col-sm-6 col-md-4 col-lg-4 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-top-filter.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo12-banner1.jpg" src="assets/images/collection/demo12-banner1.jpg" alt="collection" title="" /></div>
<div class="details center-left bg-transparent">
<div class="inner text-white">
<h3 class="title text-transform-none fs-3 fw-bold lh-1 body-font text-white mb-10">Dewalt 18V</h3>
<p class="">AHEAD OF THE TREND</p>
<span class="btn btn-small rounded m-0">Buy now</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-top-filter.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo12-banner2.jpg" src="assets/images/collection/demo12-banner2.jpg" alt="collection" title="" /></div>
<div class="details bottom-left bg-transparent">
<div class="inner" style="color:#1f476f;">
<h3 class="title text-transform-none fs-3 fw-bold lh-1 body-font mb-10" style="color:#1f476f;">Powerpack</h3>
<p class="">POWER TO THE MAX</p>
<span class="btn btn-small rounded m-0">Buy now</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
</code></pre>
</div>
</div>
</div>
<div class="col-md-12 mb-4">
<div class="card m-0">
<div class="card-header">
<h5 class="mb-0">Banner Styles 13</h5>
</div>
<div class="card-body">
<img class="blur-up lazyload" data-src="assets/images/elements/index-demo13-banner-style.png" src="assets/images/elements/index-demo13-banner-style.png" alt="collection" title="" />
</div>
</div>
<div class="card text-box HTMLBox">
<div class="card-header bg-transparent d-flex-center justify-content-between">
<h5 class="topic m-0">HTML Code:</h5><button class="btn btn-outline-primary btn-small code-box-copy__btn btn-clipboard" data-clipboard-target="#bannerStyles13" title="Copy">copy</button>
</div>
<div class="card-code-copy">
<pre class="language-html m-0" id="bannerStyles13"><code data-lang="html"><section class="section collection-banners style7 mt-0">
<div class="grid-masonary banner-grid grid-mr-30">
<div class="grid-sizer col-12 col-sm-6 col-md-3 col-lg-3 mw-100"></div>
<div class="row mx-0">
<div class="col-12 col-sm-6 col-md-3 col-lg-3 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-left-sidebar.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo13-banner1.jpg" src="assets/images/collection/demo13-banner1.jpg" alt="collection" title="" /></div>
<div class="details bottom bg-transparent">
<div class="inner bg-transparent p-0">
<span class="btn m-0">SKELETON DIALS</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-3 col-lg-3 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-left-sidebar.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo13-banner2.jpg" src="assets/images/collection/demo13-banner2.jpg" alt="collection" title="" /></div>
<div class="details bottom bg-transparent">
<div class="inner bg-transparent text-white">
<h3 class="title text-white fs-5 lh-1 body-font mb-10">MEN'S WATCHES</h3>
<p class="">ALL EXCLUSIVE</p>
<span class="btn m-0">SHOP NOW</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-3 col-lg-3 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-left-sidebar.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo13-banner3.jpg" src="assets/images/collection/demo13-banner3.jpg" alt="collection" title="" /></div>
<div class="details bottom bg-transparent">
<div class="inner col-11 col-xl-8 py-3">
<h3 class="title fs-5 lh-1 body-font mb-10">FASTRACK</h3>
<p class="lh-1">GET 30% OFF</p>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-3 col-lg-3 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-left-sidebar.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo13-banner4.jpg" src="assets/images/collection/demo13-banner4.jpg" alt="collection" title="" /></div>
<div class="details bottom bg-transparent">
<div class="inner bg-transparent text-white">
<h3 class="title text-white fs-3 lh-1 body-font mb-10">ROTATE</h3>
<span class="btn--link m-0">LIMITED EDITION</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-3 col-lg-3 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-left-sidebar.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo13-banner5.jpg" src="assets/images/collection/demo13-banner5.jpg" alt="collection" title="" /></div>
<div class="details bottom bg-transparent">
<div class="inner bg-transparent text-white">
<h3 class="title text-white fs-3 fw-bold lh-1 body-font mb-10">BEST RATED</h3>
<p class="">BE THE MOST YOU</p>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-3 col-lg-3 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-left-sidebar.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo13-banner6.jpg" src="assets/images/collection/demo13-banner6.jpg" alt="collection" title="" /></div>
<div class="details bottom bg-transparent">
<div class="inner col-11 col-xl-8" style="background-color:#090a0a;">
<h3 class="title text-transform-none fs-6 fw-normal lh-base body-font text-white mb-0">BEST PRICE ONLINE</h3>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
</code></pre>
</div>
</div>
</div>
<div class="col-md-12 mb-4">
<div class="card m-0">
<div class="card-header">
<h5 class="mb-0">Banner Styles 14</h5>
</div>
<div class="card-body index-demo14">
<!--Banner Masonary-->
<section class="collection-banners style1 mt-0 pt-0">
<div class="grid-masonary banner-grid grid-mr-30">
<div class="grid-sizer col-12 col-sm-12 col-md-4 col-lg-4"></div>
<div class="row mx-0">
<div class="col-12 col-sm-6 col-md-4 col-lg-4 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-left-sidebar.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo14-banner1.jpg" src="assets/images/collection/demo14-banner1.jpg" alt="collection" title="" /></div>
<div class="details top bg-transparent w-100" style="width:70%;">
<div class="inner pt-lg-4">
<h3 class="title body-font mb-2 body-font" style="color:#85b935">FRESH VEGETABLES</h3>
<p class="fs-6 body-font">Lorem Ipsum is simply dummy text of the printing industry.</p>
<span class="btn btn-primary btn-lg rounded-pill text-capitalize m-0 d-inline-block">Shop Now</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-left-sidebar.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo14-banner2.jpg" src="assets/images/collection/demo14-banner2.jpg" alt="collection" title="" /></div>
<div class="details top bg-transparent w-100" style="width:70%;">
<div class="inner pt-lg-4">
<h3 class="title body-font mb-2 body-font" style="color:#fd9917">FRESH FRUITS READY TO EAT</h3>
<p class="fs-6 body-font">Lorem Ipsum is simply dummy text of the printing industry.</p>
<span class="btn btn-primary btn-lg rounded-pill text-capitalize m-0 d-inline-block">Shop Now</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-left-sidebar.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo14-banner3.jpg" src="assets/images/collection/demo14-banner3.jpg" alt="collection" title="" /></div>
<div class="details top bg-transparent w-100" style="width:70%;">
<div class="inner pt-lg-4">
<h3 class="title body-font mb-2 body-font" style="color:#fe877b">CUT THE MEAT AND BEAT</h3>
<p class="fs-6 body-font">Lorem Ipsum is simply dummy text of the printing industry.</p>
<span class="btn btn-primary btn-lg rounded-pill text-capitalize m-0 d-inline-block">Shop Now</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
<!--End Banner Masonary-->
</div>
</div>
<div class="card text-box HTMLBox">
<div class="card-header bg-transparent d-flex-center justify-content-between">
<h5 class="topic m-0">HTML Code:</h5><button class="btn btn-outline-primary btn-small code-box-copy__btn btn-clipboard" data-clipboard-target="#bannerStyles14" title="Copy">copy</button>
</div>
<div class="card-code-copy">
<pre class="language-html m-0" id="bannerStyles14"><code data-lang="html"><section class="collection-banners style1 mt-0 pt-0">
<div class="grid-masonary banner-grid grid-mr-30">
<div class="grid-sizer col-12 col-sm-12 col-md-4 col-lg-4"></div>
<div class="row mx-0">
<div class="col-12 col-sm-6 col-md-4 col-lg-4 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-left-sidebar.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo14-banner1.jpg" src="assets/images/collection/demo14-banner1.jpg" alt="collection" title="" /></div>
<div class="details top bg-transparent w-100" style="width:70%;">
<div class="inner pt-lg-4">
<h3 class="title body-font mb-2 body-font" style="color:#85b935">FRESH VEGETABLES</h3>
<p class="fs-6 body-font">Lorem Ipsum is simply dummy text of the printing industry.</p>
<span class="btn btn-primary btn-lg rounded-pill text-capitalize m-0 d-inline-block">Shop Now</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-left-sidebar.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo14-banner2.jpg" src="assets/images/collection/demo14-banner2.jpg" alt="collection" title="" /></div>
<div class="details top bg-transparent w-100" style="width:70%;">
<div class="inner pt-lg-4">
<h3 class="title body-font mb-2 body-font" style="color:#fd9917">FRESH FRUITS READY TO EAT</h3>
<p class="fs-6 body-font">Lorem Ipsum is simply dummy text of the printing industry.</p>
<span class="btn btn-primary btn-lg rounded-pill text-capitalize m-0 d-inline-block">Shop Now</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-left-sidebar.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo14-banner3.jpg" src="assets/images/collection/demo14-banner3.jpg" alt="collection" title="" /></div>
<div class="details top bg-transparent w-100" style="width:70%;">
<div class="inner pt-lg-4">
<h3 class="title body-font mb-2 body-font" style="color:#fe877b">CUT THE MEAT AND BEAT</h3>
<p class="fs-6 body-font">Lorem Ipsum is simply dummy text of the printing industry.</p>
<span class="btn btn-primary btn-lg rounded-pill text-capitalize m-0 d-inline-block">Shop Now</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
</code></pre>
</div>
</div>
</div>
<div class="col-md-12 mb-4">
<div class="card m-0">
<div class="card-header">
<h5 class="mb-0">Banner Styles 15</h5>
</div>
<div class="card-body index-demo14">
<!--Banner Masonary-->
<section class="collection-banners style8 mt-0 pb-3">
<div class="row g-0">
<div class="col-12 col-sm-12 col-md-6 col-lg-6 mb-0 col-md-0">
<div class="collection-grid-item">
<a href="shop-left-sidebar.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo14-banner4.jpg" src="assets/images/collection/demo14-banner4.jpg" alt="collection" title="" /></div>
<div class="details center-left bg-transparent">
<div class="inner col-7 col-xxl-8">
<h3 class="title body-font fs-2 mb-2 text-capitalize">Cucumber</h3>
<p class="h6 body-font fw-normal lh-base mb-3">Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt.</p>
<span class="btn btn-lg rounded-pill m-0">Shop Now</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6 mb-0 col-md-0">
<div class="collection-grid-item">
<a href="shop-left-sidebar.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo14-banner5.jpg" src="assets/images/collection/demo14-banner5.jpg" alt="collection" title="" /></div>
<div class="details center-left bg-transparent">
<div class="inner col-7 col-xxl-8">
<h3 class="title body-font fs-2 mb-2 text-capitalize text-white">Broccoli</h3>
<p class="h6 body-font fw-normal lh-base mb-3 text-white">Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt.</p>
<span class="btn btn-lg rounded-pill m-0">Shop Now</span>
</div>
</div>
</a>
</div>
</div>
</div>
</section>
<!--End Banner Masonary-->
</div>
</div>
<div class="card text-box HTMLBox">
<div class="card-header bg-transparent d-flex-center justify-content-between">
<h5 class="topic m-0">HTML Code:</h5><button class="btn btn-outline-primary btn-small code-box-copy__btn btn-clipboard" data-clipboard-target="#bannerStyles15" title="Copy">copy</button>
</div>
<div class="card-code-copy">
<pre class="language-html m-0" id="bannerStyles15"><code data-lang="html"><section class="collection-banners style8 mt-0 pb-3">
<div class="row g-0">
<div class="col-12 col-sm-12 col-md-6 col-lg-6 mb-0 col-md-0">
<div class="collection-grid-item">
<a href="shop-left-sidebar.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo14-banner4.jpg" src="assets/images/collection/demo14-banner4.jpg" alt="collection" title="" /></div>
<div class="details center-left bg-transparent">
<div class="inner col-7 col-xxl-8">
<h3 class="title body-font fs-2 mb-2 text-capitalize">Cucumber</h3>
<p class="h6 body-font fw-normal lh-base mb-3">Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt.</p>
<span class="btn btn-lg rounded-pill m-0">Shop Now</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6 mb-0 col-md-0">
<div class="collection-grid-item">
<a href="shop-left-sidebar.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo14-banner5.jpg" src="assets/images/collection/demo14-banner5.jpg" alt="collection" title="" /></div>
<div class="details center-left bg-transparent">
<div class="inner col-7 col-xxl-8">
<h3 class="title body-font fs-2 mb-2 text-capitalize text-white">Broccoli</h3>
<p class="h6 body-font fw-normal lh-base mb-3 text-white">Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt.</p>
<span class="btn btn-lg rounded-pill m-0">Shop Now</span>
</div>
</div>
</a>
</div>
</div>
</div>
</section>
</code></pre>
</div>
</div>
</div>
<div class="col-md-12 mb-4">
<div class="card m-0">
<div class="card-header">
<h5 class="mb-0">Banner Styles 16</h5>
</div>
<div class="card-body index-demo14">
<!--Banner Text-->
<div class="banner-text banner-style1 p-0 m-0">
<div class="hero hero--small hero__overlay bg-size">
<img class="bg-img" src="assets/images/parallax/demo14-banner1.jpg" alt="banner" />
<div class="hero__inner">
<div class="container hero-txt-wrap" style="">
<div class="wrap-text left text-medium text-start">
<p class="mega-subtitle text-transform-none mb-1 body-font">BLACK FRIDAY !</p>
<h2 class="mega-title text-transform-none mb-3 mb-md-2">SALE 50% OFF</h2>
<p class="details d-none d-md-block">ALL VEGETABLE PRODUCTS</p>
<a href="shop-left-sidebar.html" class="btn btn-primary btn-lg rounded-pill mb-0">SHOP ALL NOW</a>
</div>
</div>
</div>
</div>
</div>
<!--End Banner Text-->
</div>
</div>
<div class="card text-box HTMLBox">
<div class="card-header bg-transparent d-flex-center justify-content-between">
<h5 class="topic m-0">HTML Code:</h5><button class="btn btn-outline-primary btn-small code-box-copy__btn btn-clipboard" data-clipboard-target="#bannerStyles16" title="Copy">copy</button>
</div>
<div class="card-code-copy">
<pre class="language-html m-0" id="bannerStyles16"><code data-lang="html"><div class="banner-text banner-style1 p-0 m-0">
<div class="hero hero--small hero__overlay bg-size">
<img class="bg-img" src="assets/images/parallax/demo14-banner1.jpg" alt="banner" />
<div class="hero__inner">
<div class="container hero-txt-wrap" style="">
<div class="wrap-text left text-medium text-start">
<p class="mega-subtitle text-transform-none mb-1 body-font">BLACK FRIDAY !</p>
<h2 class="mega-title text-transform-none mb-3 mb-md-2">SALE 50% OFF</h2>
<p class="details d-none d-md-block">ALL VEGETABLE PRODUCTS</p>
<a href="shop-left-sidebar.html" class="btn btn-primary btn-lg rounded-pill mb-0">SHOP ALL NOW</a>
</div>
</div>
</div>
</div>
</div>
</code></pre>
</div>
</div>
</div>
<div class="col-md-12 mb-4">
<div class="card m-0">
<div class="card-header">
<h5 class="mb-0">Banner Styles 17</h5>
</div>
<div class="card-body index-demo15">
<!--Collection Banners-->
<section class="collection-banners style7 mt-0 pb-0">
<div class="grid-masonary banner-grid grid-mr-0">
<div class="grid-sizer col-6 col-sm-6 col-md-4 col-lg-4"></div>
<div class="row mx-0">
<div class="col-6 col-sm-6 col-md-4 col-lg-4 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-top-filter.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo15-banner1.jpg" src="assets/images/collection/demo15-banner1.jpg" alt="collection" title="" /></div>
<div class="details bottom bg-transparent rounded">
<div class="inner rounded col-11 col-xl-10 py-3" style="color:#d21212;">
<h3 class="title fs-5 fw-bold lh-1 body-font mb-10" style="color:#d21212;">ORNAMENTS</h3>
<p class="lh-1">Save up to 50% OFF</p>
</div>
</div>
</a>
</div>
</div>
<div class="col-6 col-sm-6 col-md-4 col-lg-4 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-top-filter.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo15-banner2.jpg" src="assets/images/collection/demo15-banner2.jpg" alt="collection" title="" /></div>
<div class="details bottom bg-transparent rounded">
<div class="inner rounded col-11 col-xl-10 py-3" style="background-color:#c92532;color:#ffffff;">
<h3 class="title fs-5 fw-bold lh-1 body-font mb-10 text-white">COSTUMES</h3>
<p class="lh-1">For your pets</p>
</div>
</div>
</a>
</div>
</div>
<div class="col-6 col-sm-6 col-md-4 col-lg-4 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-top-filter.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo15-banner3.jpg" src="assets/images/collection/demo15-banner3.jpg" alt="collection" title="" /></div>
<div class="details bottom bg-transparent rounded">
<div class="inner rounded col-11 col-xl-10 py-3" style="color:#d21212;">
<h3 class="title fs-5 fw-bold lh-1 body-font mb-10" style="color:#d21212;">LIGHTS</h3>
<p class="lh-1">Make it shine</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
<!--End Collection Banners-->
</div>
</div>
<div class="card text-box HTMLBox">
<div class="card-header bg-transparent d-flex-center justify-content-between">
<h5 class="topic m-0">HTML Code:</h5><button class="btn btn-outline-primary btn-small code-box-copy__btn btn-clipboard" data-clipboard-target="#bannerStyles17" title="Copy">copy</button>
</div>
<div class="card-code-copy">
<pre class="language-html m-0" id="bannerStyles17"><code data-lang="html"><section class="collection-banners style7 mt-0 pb-0">
<div class="grid-masonary banner-grid grid-mr-0">
<div class="grid-sizer col-6 col-sm-6 col-md-4 col-lg-4"></div>
<div class="row mx-0">
<div class="col-6 col-sm-6 col-md-4 col-lg-4 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-top-filter.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo15-banner1.jpg" src="assets/images/collection/demo15-banner1.jpg" alt="collection" title="" /></div>
<div class="details bottom bg-transparent rounded">
<div class="inner rounded col-11 col-xl-10 py-3" style="color:#d21212;">
<h3 class="title fs-5 fw-bold lh-1 body-font mb-10" style="color:#d21212;">ORNAMENTS</h3>
<p class="lh-1">Save up to 50% OFF</p>
</div>
</div>
</a>
</div>
</div>
<div class="col-6 col-sm-6 col-md-4 col-lg-4 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-top-filter.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo15-banner2.jpg" src="assets/images/collection/demo15-banner2.jpg" alt="collection" title="" /></div>
<div class="details bottom bg-transparent rounded">
<div class="inner rounded col-11 col-xl-10 py-3" style="background-color:#c92532;color:#ffffff;">
<h3 class="title fs-5 fw-bold lh-1 body-font mb-10 text-white">COSTUMES</h3>
<p class="lh-1">For your pets</p>
</div>
</div>
</a>
</div>
</div>
<div class="col-6 col-sm-6 col-md-4 col-lg-4 mw-100 cl-item banner-item">
<div class="collection-grid-item">
<a href="shop-top-filter.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo15-banner3.jpg" src="assets/images/collection/demo15-banner3.jpg" alt="collection" title="" /></div>
<div class="details bottom bg-transparent rounded">
<div class="inner rounded col-11 col-xl-10 py-3" style="color:#d21212;">
<h3 class="title fs-5 fw-bold lh-1 body-font mb-10" style="color:#d21212;">LIGHTS</h3>
<p class="lh-1">Make it shine</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
</code></pre>
</div>
</div>
</div>
<div class="col-md-12 mb-4">
<div class="card m-0">
<div class="card-header">
<h5 class="mb-0">Banner Styles 18</h5>
</div>
<div class="card-body index-demo16">
<!--Banner Masonary-->
<section class="collection-banners style8 mt-0 pt-0">
<div class="grid-mr-5">
<div class="row mx-0">
<div class="col-12 col-sm-6 col-md-7 col-lg-7 mb-0 col-md-0 banner1 cl-item">
<div class="collection-grid-item">
<a href="shop-right-sidebar.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo16-large-banner1.jpg" src="assets/images/collection/demo16-large-banner1.jpg" alt="collection" title="" /></div>
<div class="details w-75 top-left bg-transparent">
<div class="inner">
<h3 class="title mb-2">BECOME <br>AN ARTIST</h3>
<p class="fs-6 body-font">Design your cell phone case <br>with your own pictures</p>
<span class="btn btn-primary btn-lg text-capitalize m-0 d-none d-md-inline-block">Shop Now</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-5 col-lg-5 mb-0 col-md-0 banner2 cl-item">
<div class="collection-grid-item">
<a href="shop-right-sidebar.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo16-large-banner2.jpg" src="assets/images/collection/demo16-large-banner2.jpg" alt="collection" title="" /></div>
<div class="details w-75 top-center white-text bg-transparent">
<div class="inner">
<p class="mb-0 h3 fw-normal body-font text-white">SUMMER SALE OFFERS</p>
<h3 class="title large-title mb-2 mb-lg-3 mt-2 text-white"><b>20% OFF</b></h3>
<p class="btn--link text-center fs-6 d-none d-md-inline-block">Shop Now</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
<!--End Banner Masonary-->
</div>
</div>
<div class="card text-box HTMLBox">
<div class="card-header bg-transparent d-flex-center justify-content-between">
<h5 class="topic m-0">HTML Code:</h5><button class="btn btn-outline-primary btn-small code-box-copy__btn btn-clipboard" data-clipboard-target="#bannerStyles18" title="Copy">copy</button>
</div>
<div class="card-code-copy">
<pre class="language-html m-0" id="bannerStyles18"><code data-lang="html"><section class="collection-banners style8 mt-0 pt-0">
<div class="grid-mr-5">
<div class="row mx-0">
<div class="col-12 col-sm-6 col-md-7 col-lg-7 mb-0 col-md-0 banner1 cl-item">
<div class="collection-grid-item">
<a href="shop-right-sidebar.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo16-large-banner1.jpg" src="assets/images/collection/demo16-large-banner1.jpg" alt="collection" title="" /></div>
<div class="details w-75 top-left bg-transparent">
<div class="inner">
<h3 class="title mb-2">BECOME <br>AN ARTIST</h3>
<p class="fs-6 body-font">Design your cell phone case <br>with your own pictures</p>
<span class="btn btn-primary btn-lg text-capitalize m-0 d-none d-md-inline-block">Shop Now</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-5 col-lg-5 mb-0 col-md-0 banner2 cl-item">
<div class="collection-grid-item">
<a href="shop-right-sidebar.html">
<div class="img"><img class="blur-up lazyload" data-src="assets/images/collection/demo16-large-banner2.jpg" src="assets/images/collection/demo16-large-banner2.jpg" alt="collection" title="" /></div>
<div class="details w-75 top-center white-text bg-transparent">
<div class="inner">
<p class="mb-0 h3 fw-normal body-font text-white">SUMMER SALE OFFERS</p>
<h3 class="title large-title mb-2 mb-lg-3 mt-2 text-white"><b>20% OFF</b></h3>
<p class="btn--link text-center fs-6 d-none d-md-inline-block">Shop Now</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
</code></pre>
</div>
</div>
</div>
<div class="col-md-12 mb-4">
<div class="card m-0">
<div class="card-header">
<h5 class="mb-0">Banner Styles 19</h5>
</div>
<div class="card-body index-demo17">
<!--Collections Grid-->
<section class="collection-grids">
<div class="row grid-categorys">
<div class="col-6 col-sm-6 col-md-6 col-lg-6 category-grid-item">
<div class="category-item zoomscal-hov">
<a href="shop-left-sidebar.html" class="category-link text-center" style="color:inherit;">
<div class="zoom-scal"><img class="blur-up lazyload" data-src="assets/images/collection/demo17-banner4.jpg" src="assets/images/collection/demo17-banner4.jpg" alt="collection" title="" /></div>
<div class="details text-center">
<div class="inner">
<h3 class="category-title">Gift For Her</h3>
<p class="mt-2">Each piece, made with love and care</p>
<span class="btn btn-outline-primary btn-sm">SHOP NOW</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 category-grid-item">
<div class="category-item zoomscal-hov">
<a href="shop-left-sidebar.html" class="category-link text-center" style="color:inherit;">
<div class="zoom-scal"><img class="blur-up lazyload" data-src="assets/images/collection/demo17-banner5.jpg" src="assets/images/collection/demo17-banner5.jpg" alt="collection" title="" /></div>
<div class="details text-center">
<div class="inner">
<h3 class="category-title">Gift For Him</h3>
<p class="mt-2">Something you'll love to browse</p>
<span class="btn btn-outline-primary btn-sm">SHOP NOW</span>
</div>
</div>
</a>
</div>
</div>
</div>
</section>
<!--End Collections Grid-->
</div>
</div>
<div class="card text-box HTMLBox">
<div class="card-header bg-transparent d-flex-center justify-content-between">
<h5 class="topic m-0">HTML Code:</h5><button class="btn btn-outline-primary btn-small code-box-copy__btn btn-clipboard" data-clipboard-target="#bannerStyles19" title="Copy">copy</button>
</div>
<div class="card-code-copy">
<pre class="language-html m-0" id="bannerStyles19"><code data-lang="html"><section class="collection-grids">
<div class="row grid-categorys">
<div class="col-6 col-sm-6 col-md-6 col-lg-6 category-grid-item">
<div class="category-item zoomscal-hov">
<a href="shop-left-sidebar.html" class="category-link text-center" style="color:inherit;">
<div class="zoom-scal"><img class="blur-up lazyload" data-src="assets/images/collection/demo17-banner4.jpg" src="assets/images/collection/demo17-banner4.jpg" alt="collection" title="" /></div>
<div class="details text-center">
<div class="inner">
<h3 class="category-title">Gift For Her</h3>
<p class="mt-2">Each piece, made with love and care</p>
<span class="btn btn-outline-primary btn-sm">SHOP NOW</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 category-grid-item">
<div class="category-item zoomscal-hov">
<a href="shop-left-sidebar.html" class="category-link text-center" style="color:inherit;">
<div class="zoom-scal"><img class="blur-up lazyload" data-src="assets/images/collection/demo17-banner5.jpg" src="assets/images/collection/demo17-banner5.jpg" alt="collection" title="" /></div>
<div class="details text-center">
<div class="inner">
<h3 class="category-title">Gift For Him</h3>
<p class="mt-2">Something you'll love to browse</p>
<span class="btn btn-outline-primary btn-sm">SHOP NOW</span>
</div>
</div>
</a>
</div>
</div>
</div>
</section>
</code></pre>
</div>
</div>
</div>
<div class="col-md-12 mb-4">
<div class="card m-0">
<div class="card-header">
<h5 class="mb-0">Banner Styles 20</h5>
</div>
<div class="card-body index-demo17">
<!--Collection Banner-->
<section class="collection-banners style1 m-0 p-0">
<div class="row g-0">
<div class="col-12 col-sm-12 col-md-6 col-lg-6">
<div class="collection-grid-item mb-2 mb-md-0">
<a href="shop-top-filter.html">
<div class="img">
<img class="blur-up lazyload" data-src="assets/images/collection/demo18-banner2.jpg" src="assets/images/collection/demo18-banner2.jpg" alt="collection" title="" />
</div>
<div class="details bottom-left white-text">
<div class="inner p-2">
<h3 class="title fs-3 mb-0 body-font fw-normal">SHOP LARGE BAGS</h3>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6">
<div class="collection-grid-item mb-3 mb-md-0">
<a href="shop-top-filter.html">
<div class="img">
<img class="blur-up lazyload" data-src="assets/images/collection/demo18-banner3.jpg" src="assets/images/collection/demo18-banner3.jpg" alt="collection" title="" />
</div>
<div class="details bottom-left white-text">
<div class="inner p-2">
<h3 class="title fs-3 mb-0 body-font fw-normal">SHOP SMALL BAGS</h3>
</div>
</div>
</a>
</div>
</div>
</div>
</section>
<!--End Collection Banner-->
</div>
</div>
<div class="card text-box HTMLBox">
<div class="card-header bg-transparent d-flex-center justify-content-between">
<h5 class="topic m-0">HTML Code:</h5><button class="btn btn-outline-primary btn-small code-box-copy__btn btn-clipboard" data-clipboard-target="#bannerStyles20" title="Copy">copy</button>
</div>
<div class="card-code-copy">
<pre class="language-html m-0" id="bannerStyles20"><code data-lang="html"><section class="collection-banners style1 m-0 p-0">
<div class="row g-0">
<div class="col-12 col-sm-12 col-md-6 col-lg-6">
<div class="collection-grid-item mb-2 mb-md-0">
<a href="shop-top-filter.html">
<div class="img">
<img class="blur-up lazyload" data-src="assets/images/collection/demo18-banner2.jpg" src="assets/images/collection/demo18-banner2.jpg" alt="collection" title="" />
</div>
<div class="details bottom-left white-text">
<div class="inner p-2">
<h3 class="title fs-3 mb-0 body-font fw-normal">SHOP LARGE BAGS</h3>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6">
<div class="collection-grid-item mb-3 mb-md-0">
<a href="shop-top-filter.html">
<div class="img">
<img class="blur-up lazyload" data-src="assets/images/collection/demo18-banner3.jpg" src="assets/images/collection/demo18-banner3.jpg" alt="collection" title="" />
</div>
<div class="details bottom-left white-text">
<div class="inner p-2">
<h3 class="title fs-3 mb-0 body-font fw-normal">SHOP SMALL BAGS</h3>
</div>
</div>
</a>
</div>
</div>
</div>
</section>
</code></pre>
</div>
</div>
</div>
</div>
<div class="section-header mt-3">
<h2>Hero Banner</h2>
</div>
<div class="col-md-12 mb-4">
<div class="card m-0">
<div class="card-header">
<h5 class="mb-0">Hero Banner 1</h5>
</div>
<div class="card-body index-demo12">
<!--Hero Banner-->
<div class="section parallax-banner-style4 pt-0">
<div class="hero hero--large hero__overlay bg-size">
<img class="bg-img" src="assets/images/parallax/demo12-banner1.jpg" alt="parallax-banner" />
<div class="hero__inner">
<div class="container">
<div class="wrap-text center text-small font-bold mw-100 bg-transparent">
<div class="mega-subtitle text-transform-none mb-1">SELL MORE...</div>
<h2 class="mega-title text-transform-none">THE MOST ADVANCED<br>HTML TEMPLATE IN THE MARKET</h2>
<!--Countdown Timer-->
<div class="saleTime d-flex-center justify-content-center" data-countdown="2024/10/01"></div>
<!--End Countdown Timer-->
<p class="details d-none d-md-block" style="color:#1e2832;">The design of your site plays a crucial role. <br>It can make or break your website leading to sales either <br>falling flat or converting profitably.</p>
<a href="shop-left-sidebar.html" class="btn btn-primary btn-sm rounded mb-0 text-capitalize">Shop Collection</a>
</div>
</div>
</div>
</div>
</div>
<!--End Hero Banner-->
</div>
</div>
<div class="card text-box HTMLBox">
<div class="card-header bg-transparent d-flex-center justify-content-between">
<h5 class="topic m-0">HTML Code:</h5><button class="btn btn-outline-primary btn-small code-box-copy__btn btn-clipboard" data-clipboard-target="#heroBanner1" title="Copy">copy</button>
</div>
<div class="card-code-copy">
<pre class="language-html m-0" id="heroBanner1"><code data-lang="html"><!--Hero Banner-->
<div class="section parallax-banner-style4">
<div class="hero hero--large hero__overlay bg-size">
<img class="bg-img" src="assets/images/parallax/demo12-banner1.jpg" alt="parallax-banner" />
<div class="hero__inner">
<div class="container">
<div class="wrap-text center text-small font-bold mw-100 bg-transparent">
<div class="mega-subtitle text-transform-none mb-1">SELL MORE...</div>
<h2 class="mega-title text-transform-none">THE MOST ADVANCED<br>HTML TEMPLATE IN THE MARKET</h2>
<!--Countdown Timer-->
<div class="saleTime d-flex-center justify-content-center" data-countdown="2024/10/01"></div>
<!--End Countdown Timer-->
<p class="details d-none d-md-block" style="color:#1e2832;">The design of your site plays a crucial role. <br>It can make or break your website leading to sales either <br>falling flat or converting profitably.</p>
<a href="shop-left-sidebar.html" class="btn btn-primary btn-sm rounded mb-0 text-capitalize">Shop Collection</a>
</div>
</div>
</div>
</div>
</div>
<!--End Hero Banner-->
</code></pre>
</div>
</div>
</div>
<div class="section-header mt-5">
<h2>Parallax Banner</h2>
</div>
<div class="col-md-12 mb-4">
<div class="card m-0">
<div class="card-header">
<h5 class="mb-0">Parallax Banner 1</h5>
</div>
<div class="card-body">
<!--Parallax Banner-->
<div class="section parallax-banner-style1 p-0">
<div class="hero hero--medium hero__overlay bg-size bgFixed background-parallax">
<img class="bg-img" src="assets/images/parallax/demo12-banner1.jpg" alt="">
<div class="hero__inner">
<div class="container">
<div class="wrap-text center text-small font-bold">
<h2 class="h2 mega-title">Final Reduction <br>Up to 70% OFF</h2>
<div class="rte-setting mega-subtitle">Display 4 shop buttons in <br>one row. You can add as many as you want.</div>
<div class="row">
<div class="col text-center"><a href="shop-right-sidebar.html" class="btn btn-primary w-100 mx-2">Jumpsuits</a></div>
<div class="col text-center"><a href="shop-right-sidebar.html" class="btn btn-primary w-100 mx-2">Sweetshirts</a></div>
<div class="col text-center"><a href="shop-right-sidebar.html" class="btn btn-primary w-100 mx-2">Accessories</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--End Parallax Banner-->
</div>
</div>
<div class="card text-box HTMLBox">
<div class="card-header bg-transparent d-flex-center justify-content-between">
<h5 class="topic m-0">HTML Code:</h5><button class="btn btn-outline-primary btn-small code-box-copy__btn btn-clipboard" data-clipboard-target="#parallaxBanner1" title="Copy">copy</button>
</div>
<div class="card-code-copy">
<pre class="language-html m-0" id="parallaxBanner1"><code data-lang="html"><!--Parallax Banner-->
<div class="section parallax-banner-style1">
<div class="hero hero--medium hero__overlay bg-size bgFixed background-parallax">
<img class="bg-img" src="assets/images/parallax/demo12-banner1.jpg" alt="">
<div class="hero__inner">
<div class="container">
<div class="wrap-text center text-small font-bold">
<h2 class="h2 mega-title">Final Reduction <br>Up to 70% OFF</h2>
<div class="rte-setting mega-subtitle">Display 4 shop buttons in <br>one row. You can add as many as you want.</div>
<div class="row">
<div class="col text-center"><a href="shop-right-sidebar.html" class="btn btn-primary w-100 mx-2">Jumpsuits</a></div>
<div class="col text-center"><a href="shop-right-sidebar.html" class="btn btn-primary w-100 mx-2">Sweetshirts</a></div>
<div class="col text-center"><a href="shop-right-sidebar.html" class="btn btn-primary w-100 mx-2">Accessories</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--End Parallax Banner-->
</code></pre>
</div>
</div>
</div>
<div class="col-md-12 mb-4">
<div class="card m-0">
<div class="card-header">
<h5 class="mb-0">Parallax Banner 2</h5>
</div>
<div class="card-body index-demo5">
<!--Parallax Banner-->
<div class="section parallax-banner-style1 p-0">
<div class="hero hero--medium hero__overlay bg-size background-parallax0">
<img class="bg-img" src="assets/images/parallax/demo5-sale-banner.jpg" alt="parallax-banner" />
<div class="hero__inner">
<div class="container">
<div class="wrap-text center text-large font-bold mw-100">
<h2 class="mega-title text-transform-none text-white">Clearance Sale - Flat 50% Off</h2>
<div class="h2 mega-subtitle text-transform-none text-white mb-3">Sale will end soon in</div>
<!--Countdown Timer-->
<div class="saleTime d-flex-center justify-content-center" data-countdown="2024/10/01"></div>
<!--End Countdown Timer-->
<p class="details text-white d-none d-md-block">Dressing up your kiddos in cute outfits is always fun!<br> High shine, long-lasting, vegan nail polishes in arange of <br> fashion colours and finishes</p>
<a href="shop-top-filter.html" class="btn btn-secondary rounded-pill">Shop Collection</a>
</div>
</div>
</div>
</div>
</div>
<!--End Parallax Banner-->
</div>
</div>
<div class="card text-box HTMLBox">
<div class="card-header bg-transparent d-flex-center justify-content-between">
<h5 class="topic m-0">HTML Code:</h5><button class="btn btn-outline-primary btn-small code-box-copy__btn btn-clipboard" data-clipboard-target="#parallaxBanner2" title="Copy">copy</button>
</div>
<div class="card-code-copy">
<pre class="language-html m-0" id="parallaxBanner2"><code data-lang="html"><!--Parallax Banner-->
<div class="section parallax-banner-style1">
<div class="hero hero--medium hero__overlay bg-size background-parallax0">
<img class="bg-img" src="assets/images/parallax/demo5-sale-banner.jpg" alt="parallax-banner" />
<div class="hero__inner">
<div class="container">
<div class="wrap-text center text-large font-bold mw-100">
<h2 class="mega-title text-transform-none text-white">Clearance Sale - Flat 50% Off</h2>
<div class="h2 mega-subtitle text-transform-none text-white mb-3">Sale will end soon in</div>
<!--Countdown Timer-->
<div class="saleTime d-flex-center justify-content-center" data-countdown="2024/10/01"></div>
<!--End Countdown Timer-->
<p class="details text-white d-none d-md-block">Dressing up your kiddos in cute outfits is always fun!<br> High shine, long-lasting, vegan nail polishes in arange of <br> fashion colours and finishes</p>
<a href="shop-top-filter.html" class="btn btn-secondary rounded-pill">Shop Collection</a>
</div>
</div>
</div>
</div>
</div>
<!--End Parallax Banner-->
</code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--End Main Content-->
</div>
<!--End Body Container-->
<!--Footer-->
<div class="footer footer-1">
<div class="footer-top clearfix">
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 text-center about-col mb-4">
<img src="assets/images/footer-logo.png" alt="Optimal" class="mb-3"/>
<p>55 Gallaxy Enque, 2568 steet, 23568 NY</p>
<p class="mb-0 mb-md-3">Phone: <a href="tel:+011234567890">(+01) 123 456 7890</a> <span class="mx-1">|</span> Email: <a href="mailto:info@example.com">info@example.com</a></p>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-4 col-lg-3 footer-links">
<h4 class="h4">Informations</h4>
<ul>
<li><a href="my-account.html">My Account</a></li>
<li><a href="aboutus-style1.html">About us</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="privacy-policy.html">Privacy policy</a></li>
<li><a href="#">Terms & condition</a></li>
</ul>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-2 footer-links">
<h4 class="h4">Quick Shop</h4>
<ul>
<li><a href="#">Women</a></li>
<li><a href="#">Men</a></li>
<li><a href="#">Kids</a></li>
<li><a href="#">Sportswear</a></li>
<li><a href="#">Sale</a></li>
</ul>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-3 footer-links">
<h4 class="h4">Customer Services</h4>
<ul>
<li><a href="#">Request Personal Data</a></li>
<li><a href="faqs-style1.html">FAQ's</a></li>
<li><a href="contact-style1.html">Contact Us</a></li>
<li><a href="#">Orders and Returns</a></li>
<li><a href="#">Support Center</a></li>
</ul>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-4 newsletter-col">
<div class="display-table pt-md-3 pt-lg-0">
<div class="display-table-cell footer-newsletter">
<form action="#" method="post">
<label class="h4">NEWSLETTER SIGN UP</label>
<p>Enter Your Email To Receive Daily News And Get 20% Off Coupon For All Items.</p>
<div class="input-group">
<input type="email" class="brounded-start input-group__field newsletter-input mb-0" name="EMAIL" value="" placeholder="Email address" required>
<span class="input-group__btn">
<button type="submit" class="btn newsletter__submit rounded-end" name="commit" id="Subscribe"><i class="an an-envelope-l"></i></button>
</span>
</div>
</form>
</div>
</div>
<ul class="list-inline social-icons mt-3 pt-1">
<li class="list-inline-item"><a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Facebook"><i class="an an-facebook" aria-hidden="true"></i></a></li>
<li class="list-inline-item"><a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Twitter"><i class="an an-twitter" aria-hidden="true"></i></a></li>
<li class="list-inline-item"><a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Pinterest"><i class="an an-pinterest-p" aria-hidden="true"></i></a></li>
<li class="list-inline-item"><a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Instagram"><i class="an an-instagram" aria-hidden="true"></i></a></li>
<li class="list-inline-item"><a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="TikTok"><i class="an an-tiktok" aria-hidden="true"></i></a></li>
<li class="list-inline-item"><a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Whatsapp"><i class="an an-whatsapp" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer-bottom clearfix">
<div class="container">
<div class="d-flex-center flex-column justify-content-md-between flex-md-row-reverse">
<img src="assets/images/payment.png" alt="Paypal Visa Payments"/>
<div class="copytext text-uppercase">© 2022 Optimal. All Rights Reserved.</div>
</div>
</div>
</div>
</div>
<!--End Footer-->
<!--Scoll Top-->
<span id="site-scroll"><i class="icon an an-chevron-up"></i></span>
<!--End Scoll Top-->
<!--MiniCart Drawer-->
<div class="minicart-right-drawer modal right fade" id="minicart-drawer">
<div class="modal-dialog">
<div class="modal-content">
<div id="cart-drawer" class="block block-cart">
<div class="minicart-header">
<a href="javascript:void(0);" class="close-cart" data-bs-dismiss="modal" aria-label="Close"><i class="an an-times-r" aria-hidden="true" data-bs-toggle="tooltip" data-bs-placement="left" title="Close"></i></a>
<h4 class="fs-6">Your cart (2 Items)</h4>
</div>
<div class="minicart-content">
<ul class="clearfix">
<li class="item d-flex justify-content-center align-items-center">
<a class="product-image" href="product-layout1.html">
<img class="blur-up lazyload" src="assets/images/products/cart-product-img1.jpg" data-src="assets/images/products/cart-product-img1.jpg" alt="image" title="">
</a>
<div class="product-details">
<a class="product-title" href="product-layout1.html">Floral Crop Top</a>
<div class="variant-cart">Black / XL</div>
<div class="priceRow">
<div class="product-price">
<span class="money">$59.00</span>
</div>
</div>
</div>
<div class="qtyDetail text-center">
<div class="wrapQtyBtn">
<div class="qtyField">
<a class="qtyBtn minus" href="javascript:void(0);"><i class="icon an an-minus-r" aria-hidden="true"></i></a>
<input type="text" name="quantity" value="1" class="qty">
<a class="qtyBtn plus" href="javascript:void(0);"><i class="icon an an-plus-l" aria-hidden="true"></i></a>
</div>
</div>
<a href="#" class="edit-i remove"><i class="icon an an-edit-l" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"></i></a>
<a href="#" class="remove"><i class="an an-times-r" data-bs-toggle="tooltip" data-bs-placement="top" title="Remove"></i></a>
</div>
</li>
<li class="item d-flex justify-content-center align-items-center">
<a class="product-image" href="product-layout1.html">
<img class="blur-up lazyload" src="assets/images/products/cart-product-img2.jpg" data-src="assets/images/products/cart-product-img2.jpg" alt="image" title="">
</a>
<div class="product-details">
<a class="product-title" href="product-layout1.html">V Neck T-shirts</a>
<div class="variant-cart">Blue / XL</div>
<div class="priceRow">
<div class="product-price">
<span class="money">$199.00</span>
</div>
</div>
</div>
<div class="qtyDetail text-center">
<div class="wrapQtyBtn">
<div class="qtyField">
<a class="qtyBtn minus" href="javascript:void(0);"><i class="icon an an-minus-r" aria-hidden="true"></i></a>
<input type="text" name="quantity" value="1" class="qty">
<a class="qtyBtn plus" href="javascript:void(0);"><i class="icon an an-plus-l" aria-hidden="true"></i></a>
</div>
</div>
<a href="#" class="edit-i remove"><i class="icon an an-edit-l" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"></i></a>
<a href="#" class="remove"><i class="an an-times-r" data-bs-toggle="tooltip" data-bs-placement="top" title="Remove"></i></a>
</div>
</li>
</ul>
</div>
<div class="minicart-bottom">
<div class="shipinfo text-center mb-3 text-uppercase">
<p class="freeShipMsg"><i class="an an-truck fs-5 me-2 align-middle"></i>SPENT <b>$199.00</b> MORE FOR FREE SHIPPING</p>
</div>
<div class="subtotal">
<span>Total:</span>
<span class="product-price">$93.13</span>
</div>
<a href="checkout-style1.html" class="w-100 p-2 my-2 btn btn-outline-primary proceed-to-checkout rounded">Proceed to Checkout</a>
<a href="cart-style1.html" class="w-100 btn-primary cart-btn rounded">View Cart</a>
</div>
</div>
</div>
</div>
</div>
<!--End MiniCart Drawer-->
<div class="modalOverly"></div>
<!-- Including Jquery -->
<script src="assets/js/vendor/jquery-min.js"></script>
<script src="assets/js/vendor/js.cookie.js"></script>
<!--Including Javascript-->
<script src="assets/js/plugins.js"></script>
<script src="assets/js/main.js"></script>
<!-- Prismjs Clipboard JS -->
<script src="assets/js/vendor/prismjs-clipboard.js"></script>
</div>
<!--End Page Wrapper-->
</body>
<!-- Mirrored from template.annimexweb.com/optimal/elements-banner-styles.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 15 Oct 2022 06:16:23 GMT -->
</html>