SuperMarket
Template is a uniquely multi-purposes website template.
- created: 11/09/2016
- by:
- email: kutethemes@gmail.com
Html Install
To install the HTML Template, You upload folder Supermarket to your host then unzip this folder
Example: Your domain is http://yourdomain.com
After upload and unzip HTML Tempalte, You have .
You have folder structure:
- Files 'index.html, about.html, home-v2.html...' are pages demo in HTML Template.
- Folder 'assets' include css, jquery, images and fonts.
Now you open the path of your domain http://yourdomain.com/xshop then on your Browser will show home page (index.html), example to go to "About Page" your link is:
http://yourdomain.com/supermarket/about.html
Html Structure
This theme is a Responsive HTML5 / CSS3 for Desktop, tablet, mobile phone… All of the information within the main content area is nested within a div with an class of "container". The sidebar's content is within a div with an class of "sidebar-right" or "sidebar-left". The general template structure is the same throughout the template.
The html are commented well so you can easily make an update.
Header
6 Headers:Top area, display logo, navigation. This navigation improves the css dropdown menu with animation. The navigation is nested within a div with an id of "primary-navigation", you can change the navigation by change the <li> url and text. This is similar for all pages.
Navigation Menu
<nav id="primary-navigation" class="site-navigation main-menu">
<ul id="primary-menu" class="menu">
<li class="menu-item has-childrent active">
<a href="">Home</a>
<ul class="sub-menu">
<li class="menu-item active"><a href="index.html">Home 1</a></li>
<li class="menu-item"><a href="home-v2.html">Home 2</a></li>
<li class="menu-item"><a href="home-v3.html">Home 3</a></li>
<li class="menu-item"><a href="home-v4.html">Home 4</a></li>
<li class="menu-item"><a href="home-v5.html">Home 5</a></li>
<li class="menu-item"><a href="home-v6.html">Home 6</a></li>
</ul>
</li>
<li class="menu-item"><a href="#">New Arrival</a></li>
<li class="menu-item"><a href="#">Deals</a></li>
<li class="menu-item has-childrent">
<a href="#">Shop</a>
<ul class="sub-menu">
<li class="menu-item"><a href="categories-grid.html">Categories Grid 1</a></li>
<li class="menu-item"><a href="category-grid-right-sidebar.html">Categories Grid 1 Right Sidebar</a></li>
<li class="menu-item"><a href="categories-grid2.html">Categories Grid 2</a></li>
<li class="menu-item"><a href="categories-grid2-right-sidebar.html">Categories Grid 2 Right Sidebar</a></li>
<li class="menu-item"><a href="categories-grid3.html">Categories Grid 3</a></li>
<li class="menu-item"><a href="categories-list1.html">Categories List 1</a></li>
<li class="menu-item"><a href="categories-list1-right-sidebar.html">Categories List 1 Right Sidebar</a></li>
<li class="menu-item"><a href="categories-list2.html">Categories List 2</a></li>
<li class="menu-item"><a href="categories-list2-right-sidebar.html">Categories List 2 Right Sidebar</a></li>
</ul>
</li>
<li class="menu-item has-childrent">
<a href="#">Pages</a>
<ul class="sub-menu">
<li class="menu-item"><a href="blogpost.html">Blog Post</a></li>
<li class="menu-item"><a href="product-detail.html">Product Detail</a></li>
<li class="menu-item"><a href="shopping-carrt.html">Cart</a></li>
<li class="menu-item"><a href="checkout.html">Check Out</a></li>
<li class="menu-item"><a href="contact.html">Contact Us</a></li>
<li class="menu-item"><a href="about.html">About US</a></li>
</ul>
</li>
<li class="menu-item"><a href="blog.html">Blog</a></li>
</ul>
</nav>
Slideshow
This is the jquery slider and only used in the main page. The slider content is nested within a div with an id of "slideshow". You can change and update the slider images and text in this section.
The Slideshow using Owl Carousels library so it is beautiful and easy to cusstomize.
<div class="banner banner-home banner-home1">
<div class="supermartket-owl-carousel" data-number="1" data-margin="0" data-navcontrol="yes" data-dots="yes">
<div class="banner-home1-content slide1">
<div class="container">
<h3 class="wow fadeInRight" data-wow-delay="0.6s">The Victoria Grand Cuisine</h3>
<p class="sile-desc wow fadeInRight" data-wow-delay="0.6s">LG 4k UHD features 8.3 milion pixels and four times<br/>
the resolution of Full HD 1080p.</p>
<a class="button dark wow fadeInRight" data-wow-delay="0.6s" href="#">Shop Now</a>
</div>
</div>
<div class="banner-home1-content slide2">
<div class="container">
<h3>The Victoria Grand<br/>Cuisine</h3>
<p class="sile-desc">LG 4k UHD features 8.3 milion pixels<br/>
and four times the resolution. </p>
<a class="button" href="#">Shop Now</a>
</div>
</div>
<div class="banner-home1-content slide3">
<div class="container">
<h3>The Victoria Grand<br/>Cuisine</h3>
<p class="sile-desc">LG 4k UHD features 8.3 milion pixels <br/>and four times
the resolution</p>
<a class="button drak" href="#">Shop Now</a>
</div>
</div>
</div>
<div class="container banner-absolutes">
<div class="banner-absolute banner-asblute-right">
<ul class="list-banner">
<li class="banner-item banner-item1">
<h5 class="banner-item-title">Sound</h5>
<p class="banner-item-desc">
Headphone<br/>CDs 4000
</p>
<a href="#" class="banner-item-link">Shop now <i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
</li>
<li class="banner-item banner-item2">
<h5 class="banner-item-title">Electrolux</h5>
<p class="banner-item-desc">
ECM3200 EasySense<br/>Vacuum cleaner
</p>
<a href="#" class="banner-item-link">Shop now <i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
</li>
<li class="banner-item banner-item3">
<h5 class="banner-item-title">Smartphone</h5>
<p class="banner-item-desc">
Solution for your<br/>Acer Smarphone
</p>
<a href="#" class="banner-item-link">Shop now <i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
</li>
</ul>
</div>
</div>
</div>
Content
Each content section is contain in a section with specific section ID like Section2 "section" for example:
<section id="section2">
<div class="container">
<!-- Feature Products Category-->
<div class="feature-products-category product-tabs">
<h5 class="tab-title">Smartphone</h5>
<div class="row">
<div class="col-md-3">
<div class="left-tab">
<figure>
<img src="assets/images/smartphone.jpg" alt="smartphone" width="268" height="579">
<div class="left-tab-asblute">
<p>A Keyring Does It All!</p>
<h2>Wonder<span>Cube</span></h2>
<a class="button bg-666" href="#">Shop Now</a>
</div>
</figure>
</div>
</div>
<div class="col-md-9">
<ul class="nav nav-pills">
<li class="active"><a href="#1b" data-toggle="tab">Samsung</a></li>
<li><a href="#2b" data-toggle="tab">Apple</a></li>
<li><a href="#3b" data-toggle="tab">Nokia</a></li>
<li><a href="#4b" data-toggle="tab">Oppo</a></li>
</ul>
<div class="product-tabs-content tab-content clearfix">
<div class="tab-pane active" id="1b">
<!-- Slide show -->
<div class="slide-thumbs slide-bx">
<div class="thumbs">
<a data-slide-index="0" href=""><img src="assets/images/sm-small1.jpg" alt="sm-big"></a>
<a data-slide-index="1" href=""><img src="assets/images/sm-small2.jpg" alt="sm-big"></a>
<a data-slide-index="2" href=""><img src="assets/images/sm-small3.jpg" alt="sm-big"></a>
</div>
<div class="slide-container">
<img src="assets/images/sm-big.jpg" alt="sm-big">
<img src="assets/images/sm-big.jpg" alt="sm-big">
<img src="assets/images/sm-big.jpg" alt="sm-big">
</div>
</div>
<!-- ./Slide show -->
</div>
<div class="tab-pane" id="2b">
<!-- Slide show -->
<div class="slide-thumbs slide-bx">
<div class="thumbs">
<a data-slide-index="0" href=""><img src="assets/images/sm-small2.jpg" alt="sm-big"></a>
<a data-slide-index="1" href=""><img src="assets/images/sm-small2.jpg" alt="sm-big"></a>
<a data-slide-index="2" href=""><img src="assets/images/sm-small3.jpg" alt="sm-big"></a>
</div>
<div class="slide-container">
<img src="assets/images/sm-big.jpg" alt="sm-big">
<img src="assets/images/sm-big.jpg" alt="sm-big">
<img src="assets/images/sm-big.jpg" alt="sm-big">
</div>
</div>
<!-- ./Slide show -->
</div>
<div class="tab-pane" id="3b">
<!-- Slide show -->
<div class="slide-thumbs slide-bx">
<div class="thumbs">
<a data-slide-index="0" href=""><img src="assets/images/sm-small2.jpg" alt="sm-big"></a>
<a data-slide-index="1" href=""><img src="assets/images/sm-small3.jpg" alt="sm-big"></a>
<a data-slide-index="2" href=""><img src="assets/images/sm-small3.jpg" alt="sm-big"></a>
</div>
<div class="slide-container">
<img src="assets/images/sm-big.jpg" alt="sm-big">
<img src="assets/images/sm-big.jpg" alt="sm-big">
<img src="assets/images/sm-big.jpg" alt="sm-big">
</div>
</div>
<!-- ./Slide show -->
</div>
<div class="tab-pane" id="4b">
<!-- Slide show -->
<div class="slide-thumbs slide-bx">
<div class="thumbs">
<a data-slide-index="0" href=""><img src="assets/images/sm-small1.jpg" alt="sm-big"></a>
<a data-slide-index="1" href=""><img src="assets/images/sm-small2.jpg" alt="sm-big"></a>
<a data-slide-index="2" href=""><img src="assets/images/sm-small3.jpg" alt="sm-big"></a>
</div>
<div class="slide-container">
<img src="assets/images/sm-big.jpg" alt="sm-big">
<img src="assets/images/sm-big.jpg" alt="sm-big">
<img src="assets/images/sm-big.jpg" alt="sm-big">
</div>
</div>
<!-- ./Slide show -->
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Footer
Footer section is containing in <footer> tag, you can change footer content using this section:
<footer class="footer has-border">
<!-- Slide Logo -->
<div id="section-logo-slide">
<div class="container">
<div class="logo-slide supermartket-owl-carousel" data-number="6" data-margin="30" data-navcontrol="yes">
<div class="logo-slide-item"><a href="#"><img src="assets/images/logo1.jpg" alt="logo" width="166" height="66"></a></div>
<div class="logo-slide-item"><a href="#"><img src="assets/images/logo2.jpg" alt="logo" width="166" height="66"></a></div>
<div class="logo-slide-item"><a href="#"><img src="assets/images/logo3.jpg" alt="logo" width="166" height="66"></a></div>
<div class="logo-slide-item"><a href="#"><img src="assets/images/logo4.jpg" alt="logo" width="166" height="66"></a></div>
<div class="logo-slide-item"><a href="#"><img src="assets/images/logo5.jpg" alt="logo" width="166" height="66"></a></div>
<div class="logo-slide-item"><a href="#"><img src="assets/images/logo6.jpg" alt="logo" width="166" height="66"></a></div>
<div class="logo-slide-item"><a href="#"><img src="assets/images/logo3.jpg" alt="logo" width="166" height="66"></a></div>
<div class="logo-slide-item"><a href="#"><img src="assets/images/logo2.jpg" alt="logo" width="166" height="66"></a></div>
<div class="logo-slide-item"><a href="#"><img src="assets/images/logo5.jpg" alt="logo" width="166" height="66"></a></div>
</div>
</div>
</div>
<!-- End .logo-slide-->
<div class="container">
<hr class="supermartket-hr">
</div>
<div class="container">
<div class="footer-top">
<div class="row">
<div class="col-md-3 col-sm-6 has-logo">
<div class="footer-top-logo">
<h1 class="logo">
<a href="index.html">
<img src="assets/images/logo.png" alt="logo">
</a>
</h1>
</div>
<div class="footer-infomation">
<p><span>Address:</span>Example Street 68, Mahattan,
New York, USA</p>
<p><span>Phone:</span>+ 65 123 456 789</p>
<p><span>Email:</span><a href="#">Support@SuperMarket.com</a></p>
</div>
</div>
<div class="col-md-2 col-sm-6">
<div class="footer-top-title"><h4 class="title-footer">About</h4></div>
<ul class="menu-footer">
<li class="footer-item"><a href="#">About Us</a></li>
<li class="footer-item"><a href="#">Blog</a></li>
<li class="footer-item"><a href="#">Terms of Use</a></li>
<li class="footer-item"><a href="#">Privacy Policy</a></li>
<li class="footer-item"><a href="#">Site Map</a></li>
</ul>
</div>
<div class="col-md-2 col-sm-6">
<div class="footer-top-title"><h4 class="title-footer">Customer Service</h4></div>
<ul class="menu-footer">
<li class="footer-item"><a href="#">Shipping Policy</a></li>
<li class="footer-item"><a href="#">Comoensation First</a></li>
<li class="footer-item"><a href="#">My Account</a></li>
<li class="footer-item"><a href="#">Return Policy</a></li>
<li class="footer-item"><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="col-md-2 col-sm-6">
<div class="footer-top-title"><h4 class="title-footer">Products</h4></div>
<ul class="menu-footer">
<li class="footer-item"><a href="#">My Order</a></li>
<li class="footer-item"><a href="#">My Wishlist</a></li>
<li class="footer-item"><a href="#">My Credit Slip</a></li>
<li class="footer-item"><a href="#">My Addresses</a></li>
<li class="footer-item"><a href="#">New In</a></li>
</ul>
</div>
<div class="col-md-3 tags-footer col-sm-6" >
<div class="footer-top-title"><h4 class="title-footer">Hottags</h4></div>
<ul class="tags footer-tags">
<li class="tags-item"><a href="#">Kingston</a></li>
<li class="tags-item"><a href="#">Android</a></li>
<li class="tags-item"><a href="#">Mini book</a></li>
<li class="tags-item"><a href="#">Mini USB</a></li>
<li class="tags-item"><a href="#">TMD</a></li>
<li class="tags-item"><a href="#">IPhone</a></li>
<li class="tags-item"><a href="#">PC Black</a></li>
<li class="tags-item"><a href="#">Sport</a></li>
<li class="tags-item"><a href="#">Flat</a></li>
<li class="tags-item"><a href="#">Shirts</a></li>
<li class="tags-item"><a href="#">Arrow Shirts</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-mid">
<div class="footer-mid-text">
<figure><img src="assets/images/check.jpg" alt="check" height="30" width="30"></figure>
<p>
Help improve your experience on SuperMarket,<span> join our Customer Experience Improvement Program now.
</span> Plus,<span>
tell us what you think of this page</span> !
</p>
</div>
<!--<figure><img src="assets/images/img-logo-footer.jpg" alt="img-footer" height="60" width="1170"></figure>-->
<ul>
<li><a href="#"><img src="assets/images/d1.jpg" alt="d" width="46" height="41"></a></li>
<li><a href="#"><img src="assets/images/d2.jpg" alt="d" width="51" height="41"></a></li>
<li><a href="#"><img src="assets/images/d3.jpg" alt="d" width="60" height="41"></a></li>
<li><a href="#"><img src="assets/images/d4.jpg" alt="d" width="44" height="41"></a></li>
<li><a href="#"><img src="assets/images/d5.jpg" alt="d" width="42" height="41"></a></li>
<li><a href="#"><img src="assets/images/d6.jpg" alt="d" width="85" height="41"></a></li>
<li><a href="#"><img src="assets/images/d7.jpg" alt="d" width="89" height="41"></a></li>
<li><a href="#"><img src="assets/images/d8.jpg" alt="d" width="92" height="41"></a></li>
<li><a href="#"><img src="assets/images/d9.jpg" alt="d" width="65" height="41"></a></li>
<li><a href="#"><img src="assets/images/d10.jpg" alt="d" width="91" height="41"></a></li>
<li><a href="#"><img src="assets/images/d11.jpg" alt="d" width="96" height="41"></a></li>
<li><a href="#"><img src="assets/images/d12.jpg" alt="d" width="64" height="41"></a></li>
<li><a href="#"><img src="assets/images/d13.jpg" alt="d" width="131" height="41"></a></li>
<li><a href="#"><img src="assets/images/d14.jpg" alt="d" width="94" height="41"></a></li>
</ul>
</div>
<div class="footer-bottom">
<ul class="menu-footer-bottom">
<li class="menu-footer-bottom-item"><a href="#">Promotions</a></li>
<li class="menu-footer-bottom-item"><a href="#">My Orders</a></li>
<li class="menu-footer-bottom-item"><a href="#">Help</a></li>
<li class="menu-footer-bottom-item"><a href="#">Site Map</a></li>
<li class="menu-footer-bottom-item"><a href="#">Customer Service</a></li>
<li class="menu-footer-bottom-item"><a href="#">Most Populars</a></li>
<li class="menu-footer-bottom-item"><a href="#">Best Sellers</a></li>
<li class="menu-footer-bottom-item"><a href="#">New Arrivals</a></li>
<li class="menu-footer-bottom-item"><a href="#">Special Products</a></li>
<li class="menu-footer-bottom-item"><a href="#">Manufacturers</a></li>
<li class="menu-footer-bottom-item"><a href="#">Our Stores</a></li>
<li class="menu-footer-bottom-item"><a href="#">Shipping</a></li>
<li class="menu-footer-bottom-item"><a href="#">Blog</a></li>
<li class="menu-footer-bottom-item"><a href="#">Payments</a></li>
<li class="menu-footer-bottom-item"><a href="#">Payments</a></li>
<li class="menu-footer-bottom-item"><a href="#">Refunds Terms & Conditions</a></li>
<li class="menu-footer-bottom-item"><a href="#">Policy</a></li>
<li class="menu-footer-bottom-item"><a href="#">Policy</a></li>
<li class="menu-footer-bottom-item"><a href="#">Shipping</a></li>
<li class="menu-footer-bottom-item"><a href="#">Payments</a></li>
<li class="menu-footer-bottom-item"><a href="#">Returns</a></li>
<li class="menu-footer-bottom-item"><a href="#">Refunds</a></li>
<li class="menu-footer-bottom-item"><a href="#">Warrantee</a></li>
<li class="menu-footer-bottom-item"><a href="#">FAQ</a></li>
<li class="menu-footer-bottom-item"><a href="#">Contact</a></li>
</ul>
<div class="copyright">
<i class="fa fa-copyright" aria-hidden="true"></i>
Copyright 2016 <a href="#">SuperMarket</a> All rights reserved.
</div>
</div>
</div>
<a href="#" class="backtotop ts-block"><span class="pulser"> Top</span></a>
</footer>
<!--end footer-->
CSS Files and Structure
In this theme we use following css files:
<link rel="stylesheet" href="assets/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/css/owl.carousel.min.css"> <link rel="stylesheet" href="assets/css/animated.css"> <link rel="stylesheet" href="assets/css/font-awesome.css"> <link rel="stylesheet" href="assets/css/ui.css"> <link rel="stylesheet" href="assets/css/jquery.mmenu.all.css"> <link rel="stylesheet" href="assets/css/flaticon.css"> <link rel="stylesheet" href="assets/css/style.css"> <link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
The main css file is styles.css you can change the styling from here, all other css file is libraries such as bootstrap.min.css, font-awesome.min.css, simple-line-icons.css...
All css blocks are commented so you can easily find css for each section, change according your need.
Javascript
This theme imports following Javascript files.
<script type="text/javascript" src="assets/js/jquery.min.js"></script> <script type="text/javascript" src="assets/js/bootstrap.min.js"></script> <script type="text/javascript" src="assets/js/wow.min.js"></script> <script type="text/javascript" src="assets/js/owl.carousel.min.js"></script> <script type="text/javascript" src="assets/js/jquery.appear.min.js"></script> <script type="text/javascript" src="assets/js/jquery.countTo.js"></script> <script type="text/javascript" src="assets/js/ui.js"></script> <script type="text/javascript" src="assets/js/jquery.bxslider.min.js"></script> <script type="text/javascript" src="assets/js/jquery.mmenu.all.min.js"></script> <script type="text/javascript" src="assets/js/chosen.jquery.min.js"></script> <script type="text/javascript" src="assets/js/jquery.countdown.js"></script> <script type="text/javascript" src="assets/js/frontend.js"></script>
Most of javascript files are libraries, such as bootstrap, scrollbar, countdown, carousel .. you can modify the way of js working in custom.js file, all frontend js and frontend-plugin is writen in this file.
PSD Files
We have folloing PSD files included:
01_Homepage1.psd
02_Homepage2.psd
03_Homepage3.psd
04_Homepage4.psd
05_Homepage5.psd
06_Homepage6.psd
...
23_Login_SuperMarket.psd
And inner pages ...
With those psd you will be easily to change the layout of the template to make it fit your need.
Sources and Credits
Resources used:
-
Fonts: – Google Fonts (Websafe fonts used)
http://www.google.com/webfonts (you can find the fonts by the name of the font) -
Icons used:
FontAwesome: http://fortawesome.github.io/Font-Awesome/ -
Icons used:
Flaticon: http://www.flaticon.com/ - Bootstrap Framework: http://getbootstrap.com/
- Jquery Framework: http://jquery.com
Questions and Custom services
If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums at: http://support.kute-themes.com/forums
We are happy to give advices and do custom services if you are interested in, please email us: kute-themes@gmail.com
Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template. No guarantees, but I'll do my best to assist.
To keep in touch with my latest PSD templates make sure to check out http://themeforest.net/user/kutethemes frequently.
Best regards,
Kutethemes_Theme Team