TKK_E32211602_2/public/frontend/shortcodes.html

762 lines
33 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Zenna | Shortcodes</title>
<meta charset="utf-8">
<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="">
<!-- Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700%7COpen+Sans:400,400i,600,700' rel='stylesheet'>
<!-- Css -->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/magnific-popup.css" />
<link rel="stylesheet" href="css/font-icons.css" />
<link rel="stylesheet" href="css/sliders.css" />
<link rel="stylesheet" href="css/style.css" />
<!-- Favicons -->
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png">
</head>
<body class="relative">
<!-- Preloader -->
<div class="loader-mask">
<div class="loader">
<div></div>
<div></div>
</div>
</div>
<main class="main-wrapper">
<header class="nav-type-1">
<!-- Fullscreen search -->
<div class="search-wrap">
<div class="search-inner">
<div class="search-cell">
<form method="get">
<div class="search-field-holder">
<input type="search" class="form-control main-search-input" placeholder="Search for">
<i class="ui-close search-close" id="search-close"></i>
</div>
</form>
</div>
</div>
</div> <!-- end fullscreen search -->
<!-- Top Bar -->
<div class="top-bar hidden-xs">
<div class="container">
<div class="top-bar-links flex-parent">
<ul class="top-bar-currency-language">
<li>
Currency: <a href="#">USD<i class="fa fa-angle-down"></i></a>
<div class="currency-dropdown">
<ul>
<li><a href="#">USD</a></li>
<li><a href="#">EUR</a></li>
</ul>
</div>
</li>
<li class="language">
Language: <a href="#">ENG<i class="fa fa-angle-down"></i></a>
<div class="language-dropdown">
<ul>
<li><a href="#">English</a></li>
<li><a href="#">Spanish</a></li>
<li><a href="#">German</a></li>
<li><a href="#">Chinese</a></li>
</ul>
</div>
</li>
</ul>
<ul class="top-bar-acc">
<li class="top-bar-link"><a href="#">My Wishlist</a></li>
<li class="top-bar-link"><a href="#">Newsletter</a></li>
<li class="top-bar-link"><a href="#">Login</a></li>
</ul>
</div>
</div>
</div> <!-- end top bar -->
<nav class="navbar navbar-static-top">
<div class="navigation" id="sticky-nav">
<div class="container relative">
<div class="row flex-parent">
<div class="navbar-header flex-child">
<!-- Logo -->
<div class="logo-container">
<div class="logo-wrap">
<a href="index.html">
<img class="logo-dark" src="img/logo_dark.png" alt="logo">
</a>
</div>
</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Mobile cart -->
<div class="nav-cart mobile-cart hidden-lg hidden-md">
<div class="nav-cart-outer">
<div class="nav-cart-inner">
<a href="#" class="nav-cart-icon">
<span class="nav-cart-badge">2</span>
</a>
</div>
</div>
</div>
</div> <!-- end navbar-header -->
<div class="nav-wrap flex-child">
<div class="collapse navbar-collapse text-center" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#">Home</a>
<i class="fa fa-angle-down dropdown-trigger"></i>
<ul class="dropdown-menu">
<li><a href="index.html">Home</a></li>
<li><a href="index-2.html">Home 2</a></li>
<li><a href="index-3.html">Home 3</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#">Pages</a>
<i class="fa fa-angle-down dropdown-trigger"></i>
<ul class="dropdown-menu">
<li><a href="about-us.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="faq.html">F.A.Q</a></li>
<li><a href="404.html">404</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#">Blog</a>
<i class="fa fa-angle-down dropdown-trigger"></i>
<ul class="dropdown-menu">
<li><a href="blog-standard.html">Standard</a></li>
<li><a href="blog-single.html">Single Post</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#">Shop</a>
<i class="fa fa-angle-down dropdown-trigger"></i>
<ul class="dropdown-menu megamenu-wide">
<li>
<div class="megamenu-wrap container">
<div class="row">
<div class="col-md-3 megamenu-item">
<ul class="menu-list">
<li>
<span>Shop Pages</span>
</li>
<li><a href="shop-catalog.html">Catalog no Sidebar</a></li>
<li><a href="shop-catalog-sidebar.html">Catalog With Sidebar</a></li>
<li><a href="shop-single.html">Single Product</a></li>
<li><a href="shop-cart.html">Cart</a></li>
<li><a href="shop-checkout.html">Checkout</a></li>
</ul>
</div>
<div class="col-md-3 megamenu-item">
<ul class="menu-list">
<li>
<span>For Her</span>
</li>
<li><a href="catalog.html">Dresses</a></li>
<li><a href="catalog.html">Watches</a></li>
<li><a href="catalog.html">Belts</a></li>
<li><a href="catalog.html">Jackets</a></li>
<li><a href="catalog.html">Scarfs</a></li>
</ul>
</div>
<div class="col-md-3 megamenu-item">
<ul class="menu-list">
<li>
<span>Accessories</span>
</li>
<li><a href="catalog.html">Wallets</a></li>
<li><a href="catalog.html">Watches</a></li>
<li><a href="catalog.html">Belts</a></li>
<li><a href="catalog.html">Shoes</a></li>
<li><a href="catalog.html">Scarfs</a></li>
</ul>
</div>
<div class="col-md-3 megamenu-item">
<ul class="menu-list">
<li>
<span>For Him</span>
</li>
<li><a href="catalog.html">T-shirts</a></li>
<li><a href="catalog.html">Watches</a></li>
<li><a href="catalog.html">Belts</a></li>
<li><a href="catalog.html">Jeans</a></li>
<li><a href="catalog.html">Scarfs</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#">Elements</a>
<i class="fa fa-angle-down dropdown-trigger"></i>
<ul class="dropdown-menu">
<li><a href="shortcodes.html">Shortcodes</a></li>
<li><a href="typography.html">Typography</a></li>
</ul>
</li> <!-- end elements -->
<li class="mobile-links hidden-lg hidden-md">
<a href="#">My Account</a>
</li>
<!-- Mobile search -->
<li id="mobile-search" class="hidden-lg hidden-md">
<form method="get" class="mobile-search">
<input type="search" class="form-control" placeholder="Search...">
<button type="submit" class="search-button">
<i class="fa fa-search"></i>
</button>
</form>
</li>
</ul> <!-- end menu -->
</div> <!-- end collapse -->
</div> <!-- end col -->
<div class="flex-child flex-right nav-right hidden-sm hidden-xs">
<ul>
<li class="nav-register">
<a href="#">My Account</a>
</li>
<li class="nav-search-wrap style-2 hidden-sm hidden-xs">
<a href="#" class="nav-search search-trigger">
<i class="fa fa-search"></i>
</a>
</li>
<li class="nav-cart">
<div class="nav-cart-outer">
<div class="nav-cart-inner">
<a href="#" class="nav-cart-icon">
0
</a>
</div>
</div>
<div class="nav-cart-container">
<div class="nav-cart-items">
<div class="nav-cart-item clearfix">
<div class="nav-cart-img">
<a href="#">
<img src="img/shop/shop_item_1.jpg" alt="">
</a>
</div>
<div class="nav-cart-title">
<a href="#">
Ladies Bag
</a>
<div class="nav-cart-price">
<span>1 x</span>
<span>1250.00</span>
</div>
</div>
<div class="nav-cart-remove">
<a href="#" class="remove"><i class="ui-close"></i></a>
</div>
</div>
<div class="nav-cart-item clearfix">
<div class="nav-cart-img">
<a href="#">
<img src="img/shop/shop_item_2.jpg" alt="">
</a>
</div>
<div class="nav-cart-title">
<a href="#">
Sequin Suit longer title
</a>
<div class="nav-cart-price">
<span>1 x</span>
<span>1250.00</span>
</div>
</div>
<div class="nav-cart-remove">
<a href="#" class="remove"><i class="ui-close"></i></a>
</div>
</div>
</div> <!-- end cart items -->
<div class="nav-cart-summary">
<span>Cart Subtotal</span>
<span class="total-price">$1799.00</span>
</div>
<div class="nav-cart-actions mt-20">
<a href="shop-cart.html" class="btn btn-md btn-dark"><span>View Cart</span></a>
<a href="shop-checkout.html" class="btn btn-md btn-color mt-10"><span>Proceed to Checkout</span></a>
</div>
</div>
</li>
</ul>
</div>
</div> <!-- end row -->
</div> <!-- end container -->
</div> <!-- end navigation -->
</nav> <!-- end navbar -->
</header>
<!-- Page Title -->
<section class="page-title text-center bg-light">
<div class="container relative clearfix">
<div class="title-holder">
<div class="title-text">
<h1 class="uppercase">Shortcodes</h1>
<ol class="breadcrumb">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="index.html">Pages</a>
</li>
<li class="active">
Shortcodes
</li>
</ol>
</div>
</div>
</div>
</section>
<div class="content-wrapper oh">
<!-- Shortcodes -->
<section class="section-wrap">
<div class="container">
<div class="row heading-row">
<div class="col-md-12 text-center">
<h2 class="heading uppercase"><small>Tabs</small></h2>
</div>
</div>
<div class="row">
<!-- Accordions -->
<div class="col-sm-6">
<div class="panel-group accordion mb-50" id="accordion">
<div class="panel">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="minus">Super Flexible<span>&nbsp;</span>
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Our Theme is a very slick and clean e-commerce template with endless possibilities. Creating an awesome website. Canna Theme is a very slick and clean e-commerce template with endless possibilities.
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="plus">Awesome Theme<span>&nbsp;</span>
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
We possess within us two minds. So far I have written only of the conscious mind. I would now like to introduce you to your second mind, the hidden and mysterious subconscious. Our subconscious mind contains such power and complexity that it literally staggers the imagination.And finally the subconscious is the mechanism through which thought impulses which are repeated regularly with feeling and emotion are quickened, charged. Our subconscious mind contains such power and complexity that it literally staggers the imagination.
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" class="plus">Retina Ready<span>&nbsp;</span>
</a>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
We possess within us two minds. So far I have written only of the conscious mind. I would now like to introduce you to your second mind, the hidden and mysterious subconscious. Our subconscious mind contains such power and complexity that it literally staggers the imagination.And finally the subconscious is the mechanism through which thought impulses which are repeated regularly with feeling and emotion are quickened, charged. Our subconscious mind contains such power and complexity that it literally staggers the imagination.
</div>
</div>
</div>
</div>
</div> <!-- end accordions -->
<!-- Horizontal Tabs -->
<div class="col-sm-6 mb-50">
<div class="tabs">
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab-one" data-toggle="tab">Clean</a>
</li>
<li>
<a href="#tab-two" data-toggle="tab">Modern</a>
</li>
<li>
<a href="#tab-three" data-toggle="tab">Elegant</a>
</li>
</ul> <!-- end tabs -->
<!-- tab content -->
<div class="tab-content">
<div class="tab-pane fade in active" id="tab-one">
<p>
Afela Shop is a very slick and clean e-commerce template with endless possibilities. Creating an awesome clothes store with this Theme is easy than you can imagine. We possess within us two minds. So far I have written only of the conscious mind. I would now like to introduce you to your second mind, the hidden and mysterious subconscious. Our subconscious mind contains such power.
</p>
</div>
<div class="tab-pane fade" id="tab-two">
<p>
In order to understand how the conscious and subconscious minds work together as a team to create your reality, let me again use an analogy. Your subconscious mind is like fertile soil which accepts any seed you plant within it. Your habitual thoughts and beliefs are the seeds which are being constantly sown within, and they produce in your life what is planted just as surely as corn kernels produce corn.
</p>
</div>
<div class="tab-pane fade" id="tab-three">
<p>
But unfortunately for most of us our role as gardener has never been explained to us. And in misunderstanding our role, we have allowed seeds of all types, both good and bad, to enter our inner garden. This then is the cause of all that is happening in our life. If you wish to understand why fortune or misfortune is happening to you in any area of your life, you need only look within.
</p>
</div>
</div> <!-- end tab content -->
</div>
</div> <!-- end horizontal tabs -->
</div> <!-- end row -->
<div class="row heading-row mt-50">
<div class="col-md-12 text-center">
<h2 class="heading uppercase"><small>Buttons</small></h2>
</div>
</div>
<!-- Buttons -->
<div class="row items-grid section-buttons">
<!-- color buttons -->
<div class="col-md-3">
<a href="#" class="btn btn-lg btn-color"><span>Large Button</span></a>
<a href="#" class="btn btn-md btn-color"><span>Medium Button</span></a>
<a href="#" class="btn btn-sm btn-color"><span>Small Button</span></a>
</div>
<!-- dark buttons -->
<div class="col-md-3">
<a href="#" class="btn btn-lg btn-dark"><span>Large Button</span></a>
<a href="#" class="btn btn-md btn-dark"><span>Medium Button</span></a>
<a href="#" class="btn btn-sm btn-dark"><span>Small Button</span></a>
</div>
<!-- stroke buttons -->
<div class="col-md-3">
<a href="#" class="btn btn-lg btn-stroke"><span>Large Button</span></a>
<a href="#" class="btn btn-md btn-stroke"><span>Medium Button</span></a>
<a href="#" class="btn btn-sm btn-stroke"><span>Small Button</span></a>
</div>
<!-- pink buttons -->
<div class="col-md-3">
<a href="#" class="btn btn-lg btn-pink"><span>Large Button</span></a>
<a href="#" class="btn btn-md btn-pink"><span>Medium Button</span></a>
<a href="#" class="btn btn-sm btn-pink"><span>Small Button</span></a>
</div>
<!-- violet buttons -->
<div class="col-md-3">
<a href="#" class="btn btn-lg btn-violet"><span>Large Button</span></a>
<a href="#" class="btn btn-md btn-violet"><span>Medium Button</span></a>
<a href="#" class="btn btn-sm btn-violet"><span>Small Button</span></a>
</div>
<!-- green buttons -->
<div class="col-md-3">
<a href="#" class="btn btn-lg btn-green"><span>Large Button</span></a>
<a href="#" class="btn btn-md btn-green"><span>Medium Button</span></a>
<a href="#" class="btn btn-sm btn-green"><span>Small Button</span></a>
</div>
<!-- orange buttons -->
<div class="col-md-3">
<a href="#" class="btn btn-lg btn-orange"><span>Large Button</span></a>
<a href="#" class="btn btn-md btn-orange"><span>Medium Button</span></a>
<a href="#" class="btn btn-sm btn-orange"><span>Small Button</span></a>
</div>
<!-- blue buttons -->
<div class="col-md-3">
<a href="#" class="btn btn-lg btn-blue"><span>Large Button</span></a>
<a href="#" class="btn btn-md btn-blue"><span>Medium Button</span></a>
<a href="#" class="btn btn-sm btn-blue"><span>Small Button</span></a>
</div>
</div> <!-- end row -->
<div class="row heading-row mt-50">
<div class="col-md-12 text-center">
<h2 class="heading uppercase"><small>Form Elements</small></h2>
</div>
</div>
<!-- Forms -->
<div class="row">
<div class="col-md-6">
<input name="text" type="text" placeholder="Input with placeholder">
<input name="password" id="password" type="password" placeholder="Password input">
<textarea placeholder="Textarea" rows="3"></textarea>
<label for="input-label">Input With Label</label>
<input name="name" id="input-label" type="text">
</div> <!-- end col -->
<div class="col-md-6">
<select>
<option selected value="default">Select an option</option>
<option value="green">Green</option>
<option value="black">Black</option>
<option value="white">White</option>
</select>
<div class="row mt-30">
<div class="col-md-6 mb-30">
<h6>Radio Buttons</h6>
<ul class="radio-buttons">
<li>
<input type="radio" class="input-radio" name="radio" id="radio1" value="radio1" checked="checked">
<label for="radio1">Radio 1</label>
</li>
<li>
<input type="radio" class="input-radio" name="radio" id="radio2" value="radio2">
<label for="radio2">Radio 2</label>
</li>
<li>
<input type="radio" class="input-radio" name="radio" id="radio3" value="radio3">
<label for="radio3">Radio 2</label>
</li>
</ul>
</div>
<div class="col-md-6 mb-30">
<h6>Checkboxes</h6>
<ul class="checkboxes">
<li>
<input type="checkbox" class="input-checkbox" name="checkbox" id="checkbox1" value="1" checked="checked">
<label for="checkbox1">Checkbox 1</label>
</li>
<li>
<input type="checkbox" class="input-checkbox" name="checkbox" id="checkbox2" value="2">
<label for="checkbox2">Checkbox 2</label>
</li>
<li>
<input type="checkbox" class="input-checkbox" name="checkbox" id="checkbox3" value="3">
<label for="checkbox3">Checkbox 3</label>
</li>
</ul>
</div>
</div>
</div>
</div> <!-- end row -->
<div class="row heading-row mt-50">
<div class="col-md-12 text-center">
<h2 class="heading uppercase"><small>Alert Boxes</small></h2>
</div>
</div>
<!-- Alert Boxed -->
<div class="row">
<div class="col-sm-6 mb-50">
<div class="alert alert-success fade in alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Success!</strong> This is succesful message box.
</div>
<div class="alert alert-info fade in alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Information!</strong> This is info message box.
</div>
</div>
<div class="col-sm-6">
<div class="alert alert-warning fade in alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Notice box!</strong> This is notice message box.
</div>
<div class="alert alert-danger fade in alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Error!</strong> This is error message box.
</div>
</div>
</div> <!-- end row -->
</div>
</section> <!-- end shortcodes -->
<!-- CTA -->
<section class="call-to-action bg-light">
<div class="container">
<div class="row">
<div class="col-sm-9 col-xs-12 sm-text-center">
<h3 class="uppercase">What are you waiting for? Zenna is the Best Theme</h3>
</div>
<div class="col-sm-3 col-xs-12 cta-button text-right sm-text-center">
<a href="#" class="btn btn-lg btn-dark">
<span>Purchase Now</span>
</a>
</div>
</div>
</div>
</section>
<!-- Footer Type-1 -->
<footer class="footer footer-type-1">
<div class="container">
<div class="footer-widgets">
<div class="row">
<div class="col-md-3 col-sm-12 col-xs-12">
<div class="widget footer-about-us">
<img src="img/logo_dark.png" alt="" class="logo">
<p class="mb-30">Zenna Shop is a very slick and clean eCommerce template.</p>
<div class="footer-socials">
<div class="social-icons nobase">
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-google-plus"></i></a>
</div>
</div>
</div>
</div> <!-- end about us -->
<div class="col-md-2 col-md-offset-1 col-sm-6 col-xs-12">
<div class="widget footer-links">
<h5 class="widget-title bottom-line left-align grey">Information</h5>
<ul class="list-no-dividers">
<li><a href="#">Our stores</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Business with us</a></li>
<li><a href="#">Delivery information</a></li>
</ul>
</div>
</div>
<div class="col-md-2 col-sm-6 col-xs-12">
<div class="widget footer-links">
<h5 class="widget-title bottom-line left-align grey">Account</h5>
<ul class="list-no-dividers">
<li><a href="#">My account</a></li>
<li><a href="#">Wishlist</a></li>
<li><a href="#">Order history</a></li>
<li><a href="#">Specials</a></li>
</ul>
</div>
</div>
<div class="col-md-2 col-sm-6 col-xs-12">
<div class="widget footer-links">
<h5 class="widget-title bottom-line left-align grey">Useful Links</h5>
<ul class="list-no-dividers">
<li><a href="#">Shipping Policy</a></li>
<li><a href="#">Stores</a></li>
<li><a href="#">Returns</a></li>
<li><a href="#">Terms &amp; Conditions</a></li>
</ul>
</div>
</div>
<div class="col-md-2 col-sm-6 col-xs-12">
<div class="widget footer-links">
<h5 class="widget-title bottom-line left-align grey">Service</h5>
<ul class="list-no-dividers">
<li><a href="#">Support</a></li>
<li><a href="#">Warranty</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</div> <!-- end container -->
<div class="bottom-footer">
<div class="container">
<div class="row">
<div class="col-sm-6 copyright sm-text-center">
<span>
&copy; 2017 Zenna Theme, Made by <a href="http://deothemes.com">DeoThemes</a>
</span>
</div>
<div class="col-sm-6 col-xs-12 footer-payment-systems text-right sm-text-center mt-sml-10">
<i class="fa fa-cc-paypal"></i>
<i class="fa fa-cc-visa"></i>
<i class="fa fa-cc-mastercard"></i>
<i class="fa fa-cc-discover"></i>
<i class="fa fa-cc-amex"></i>
</div>
</div>
</div>
</div> <!-- end bottom footer -->
</footer> <!-- end footer -->
<div id="back-to-top">
<a href="#top"><i class="fa fa-angle-up"></i></a>
</div>
</div> <!-- end content wrapper -->
</main> <!-- end main wrapper -->
<!-- jQuery Scripts -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/plugins.js"></script>
<script type="text/javascript" src="js/twitterFetcher_min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</body>
</html>