2416 lines
107 KiB
HTML
2416 lines
107 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-us">
|
|
|
|
<!-- Mirrored from ctrlthemes.com/html/palas/shortcodes.html by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 01 Aug 2025 05:24:05 GMT -->
|
|
<head>
|
|
|
|
<meta charset="utf-8" >
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<title>Palas | Bootstrap Multipurpose HTML5 Template</title>
|
|
|
|
<meta name="author" content="shiftthemes">
|
|
<meta name="description" content="Palas is a multipurpose HTML Template developed with the the latest HTML5 and CSS3 technologies. It can be perfectly fit for any corporate, e-commerce, business, agency or individual website.">
|
|
|
|
|
|
<!-- CSS files -->
|
|
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:100,300,400,600,700,900,400italic|Montserrat:400,700' rel='stylesheet'>
|
|
<link rel="stylesheet" href="bootstrap/3.3.1/css/bootstrap.min.css">
|
|
<link href="font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="css/void.css" id="_include_elegant_font">
|
|
|
|
<link rel="stylesheet" href="plugins/magnific-popup/magnific-popup.css">
|
|
<link rel="stylesheet" href="css/void.css" id="_include_owl_carousel">
|
|
|
|
|
|
<!-- Main CSS file -->
|
|
<link rel="stylesheet" href="css/style.css">
|
|
|
|
|
|
|
|
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div id="preloader">
|
|
<div id="status"> </div>
|
|
</div>
|
|
|
|
|
|
<!-- Global Wrapper -->
|
|
<div id="wrapper">
|
|
|
|
|
|
<div class="h-wrapper">
|
|
|
|
<!-- Top Bar -->
|
|
<div class="topbar">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<ul class="top-menu">
|
|
<li><a href="#">About</a></li>
|
|
<li><a href="#">Features</a></li>
|
|
<li><a href="#">Pricing</a></li>
|
|
<li><a href="#">Terms</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- This column is hidden on mobiles -->
|
|
<div class="col-sm-6">
|
|
<div class="pull-right hidden-xs">
|
|
<ul class="social-icon unstyled">
|
|
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-behance"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Header -->
|
|
<header class="header-wrapper header-transparent with-topbar">
|
|
<div class="main-header">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-2">
|
|
<!-- Logo - Read documentation to see how to change the logo-->
|
|
<a href="index.html" class="logo"></a>
|
|
</div>
|
|
<div class="col-sm-12 col-md-10">
|
|
<nav class="navbar-right">
|
|
<ul class="menu">
|
|
<!-- Toggle Menu - For Mobile Devices -->
|
|
<li class="toggle-menu"><i class="fa icon_menu"></i></li>
|
|
|
|
<li class="first">
|
|
<a href="#">Home</a>
|
|
<!--Instead of full class you can type one_two (50%), two_three (66.66%), three_four (75%) -->
|
|
<div class="megamenu full">
|
|
<!-- Similar to Bootstrap gid system (12 columns) -->
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<!-- You can alsoo include paragraps, images, iframes etc, not only lists, but probably you will have to style them -->
|
|
<ul class="megamenu-list">
|
|
<li><a href="index_02.html">Home Transparent Header</a></li>
|
|
<li><a href="index_09.html">Home Simple Header</a></li>
|
|
<li><a href="index_06.html">Home Full screen Slider</a></li>
|
|
<li><a href="index_13.html">Home Video Full Width</a></li>
|
|
<li><a href="index_10.html">Home Left Dark Menu</a></li>
|
|
<li><a href="index_13.html">Home Full Screen Menu</a></li>
|
|
<li><a href="index_14.html">Home Top Menu</a></li>
|
|
<li><a href="index_04.html">Home Parallax Image</a></li>
|
|
<li><a href="index_15.html">Home Full Kenburns Slider</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-4">
|
|
<ul class="megamenu-list">
|
|
<li><a href="index_10.html">Home Kenburns Slider</a></li>
|
|
<li><a href="index_05.html">Home Boxed Slider</a></li>
|
|
<li><a href="index_11.html">Home Right Menu</a></li>
|
|
<li><a href="index_04.html">Home Dark Top bar</a></li>
|
|
<li><a href="index_05.html">Home Dark Header</a></li>
|
|
<li><a href="index_08.html">Home Bottom Header</a></li>
|
|
<li><a href="index_08.html">Home Video Full Screen</a></li>
|
|
<li><a href="index_12.html">Home Text Rotator</a></li>
|
|
<li><a href="index_03.html">Home Static Menu</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-4">
|
|
<ul class="megamenu-list">
|
|
<li><a href="index_07.html">Home Menu under Logo</a></li>
|
|
<li><a href="index.html">Home Transparent Dark Header</a></li>
|
|
<li><a href="index_03.html">Home Gray Top Bar</a></li>
|
|
<li><a href="index_07.html">Home Icons Menu</a></li>
|
|
<li><a href="index_03.html">Home Menu White </a></li>
|
|
<li><a href="index_12.html">Home Left White Menu</a></li>
|
|
<li><a href="index_06.html">Home Menu Dark Transparent</a></li>
|
|
<li><a href="index_11.html">Home Parallax Full Image</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div> <!-- END Mega Menu -->
|
|
</li> <!-- END Home -->
|
|
<li>
|
|
<a href="#">Features</a>
|
|
<div class="megamenu full">
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<ul class="megamenu-list">
|
|
<li class="title">Headers</li>
|
|
<li><a href="index_02.html">Header Transparent</a></li>
|
|
<li><a href="index_09.html">Header Simple</a></li>
|
|
<li><a href="index_08.html">Header Bottom Menu</a></li>
|
|
<li><a href="index_07.html">Header Icons Menu</a></li>
|
|
<li><a href="index_05.html">Header Dark</a></li>
|
|
<li><a href="index.html">Header Transparent Dark</a></li>
|
|
<li><a href="index_04.html">Header Dark Bar</a></li>
|
|
<li><a href="index_03.html">Header Gray Bar</a></li>
|
|
<li><a href="index_14.html">Header Top Menu</a></li>
|
|
<li><a href="index_13.html">Header Full Screen</a></li>
|
|
<li><a href="index_03.html">Header Static Menu</a></li>
|
|
<li><a href="index_07.html">Header Menu under Logo</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-4">
|
|
<ul class="megamenu-list">
|
|
<li class="title">Menus</li>
|
|
<li><a href="index_06.html">Menu Dark Transparent</a></li>
|
|
<li><a href="index.html">Menu Dark</a></li>
|
|
<li><a href="index_03.html">Menu Light</a></li>
|
|
|
|
<li> </li>
|
|
<li class="title">Footers</li>
|
|
<li><a href="index_04.html#footer_index">Footer Dark Simple</a></li>
|
|
<li><a href="index_03.html#footer_index">Footer Gray</a></li>
|
|
<li><a href="index.html#footer_index">Footer Background</a></li>
|
|
<li><a href="index_10.html#footer_index">Footer Simple</a></li>
|
|
<li><a href="index_02.html#footer_index">Footer Small</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-4">
|
|
<ul class="megamenu-list">
|
|
<li class="title">Vertical Menu</li>
|
|
<li><a href="index_10.html">Header Left Dark</a></li>
|
|
<li><a href="index_12.html">Header Left Light</a></li>
|
|
<li><a href="index_11.html">Header Right Menu</a></li>
|
|
|
|
<li> </li>
|
|
<li class="title">Sliders</li>
|
|
<li><a href="index.html">Slider Full width</a></li>
|
|
<li><a href="index_05.html">Slider Boxed</a></li>
|
|
<li><a href="index_06.html">Slider Full screen</a></li>
|
|
<li><a href="index_10.html">Slider Kenburns</a></li>
|
|
<li><a href="index_15.html">Slider Kenburns Full screen</a></li>
|
|
<li><a href="index_13.html">Slider Video Full width</a></li>
|
|
<li><a href="index_08.html">Slider Video Full screen</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li> <!-- END Features -->
|
|
<li>
|
|
<a href="#">Pages</a>
|
|
<div class="megamenu full">
|
|
<div class="row">
|
|
<div class="col-3">
|
|
<ul class="megamenu-list">
|
|
<li class="title">Pages</li>
|
|
<li><a href="page_about.html">About 1</a></li>
|
|
<li><a href="page_about_2.html">About 2</a></li>
|
|
<li><a href="page_about_3.html">About 3</a></li>
|
|
<li><a href="page_about_4.html">About 4</a></li>
|
|
<li><a href="page_team.html">Team 1</a></li>
|
|
<li><a href="page_team_2.html">Team 2</a></li>
|
|
<li><a href="page_team_3.html">Team 3</a></li>
|
|
<li><a href="page_team_4.html">Team 4</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-3">
|
|
<ul class="megamenu-list">
|
|
<li class="title">that you</li>
|
|
<li><a href="page_services.html">Services 1</a></li>
|
|
<li><a href="page_services_2.html">Services 2</a></li>
|
|
<li><a href="page_services_3.html">Services 3</a></li>
|
|
<li><a href="page_services_4.html">Services 4</a></li>
|
|
<li><a href="page_contact.html">Contact 1</a></li>
|
|
<li><a href="page_contact_2.html">Contact 2</a></li>
|
|
<li><a href="page_contact_3.html">Contact 3</a></li>
|
|
<li><a href="page_clients.html">Clients</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-3">
|
|
<ul class="megamenu-list">
|
|
<li class="title">really</li>
|
|
<li><a href="page_pricing.html">Pricing</a></li>
|
|
<li><a href="page_faq.html">FAQ 1</a></li>
|
|
<li><a href="page_faq_2.html">FAQ 2</a></li>
|
|
<li><a href="page_sign_in.html">Sign In</a></li>
|
|
<li><a href="page_sign_up.html">Sign Up</a></li>
|
|
<li><a href="page_404.html">404 Not Found</a></li>
|
|
<li><a href="page_403.html">403 Forbidden</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-3">
|
|
<ul class="megamenu-list">
|
|
<li class="title">need</li>
|
|
<li><a href="page_sidebar.html">Sidebar</a></li>
|
|
<li><a href="page_sidebars.html">Sidebars</a></li>
|
|
<li><a href="page_sidebar_navigation.html">Sidebar Navigation</a></li>
|
|
|
|
<li> </li>
|
|
<li class="title">Simple Page Headers</li>
|
|
<li><a href="page_sidebar.html">Small</a></li>
|
|
<li><a href="page_sidebar_navigation.html">Centered</a></li>
|
|
<li><a href="page_sidebars.html">Simple (Dark)</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div> <!-- END Mega Menu -->
|
|
</li> <!-- END Pages -->
|
|
<li>
|
|
<a href="#">Blog</a>
|
|
<ul class="submenu">
|
|
<li><a href="blog_list_small.html">List Small</a></li>
|
|
<li><a href="blog_list_large.html">List Large</a></li>
|
|
<li><a href="blog_grid.html">Grid</a></li>
|
|
<li><a href="blog_grid_sidebar.html">Grid Sidebar</a></li>
|
|
<li><a href="blog_masonry.html">Masonry</a></li>
|
|
<li><a href="blog_masonry_sidebar.html">Masonry Sidebar</a></li>
|
|
<li><a href="blog_post.html">Post</a></li>
|
|
<li><a href="blog_post_sidebar.html">Post Sidebar</a></li>
|
|
</ul>
|
|
</li> <!-- END Blog -->
|
|
<li>
|
|
<a href="#">Portfolio</a>
|
|
<ul class="submenu">
|
|
<li><a href="portfolio.html">Portfolio</a></li>
|
|
<li><a href="portfolio_2.html">2 Columns</a></li>
|
|
<li><a href="portfolio_3.html">3 Columns</a></li>
|
|
<li><a href="portfolio_4.html">4 Columns</a></li>
|
|
<li><a href="portfolio_boxed.html">Boxed</a></li>
|
|
<li><a href="portfolio_sidebar.html">Sidebar</a></li>
|
|
<li><a href="portfolio_project_wide.html">Wide Project</a></li>
|
|
<li><a href="portfolio_project_half.html">Half Project</a></li>
|
|
<li><a href="portfolio_project_sidebar.html">Sidebar Project</a></li>
|
|
</ul>
|
|
</li> <!-- END Portfolio -->
|
|
<li>
|
|
<a href="#">Shop</a>
|
|
<ul class="submenu">
|
|
<li><a href="shop_products.html">Products</a></li>
|
|
<li><a href="shop_products_sidebar.html">Products Sidebar</a></li>
|
|
<li><a href="shop_product.html">Product</a></li>
|
|
<li><a href="shop_product_sidebar.html">Product Sidebar</a></li>
|
|
<li><a href="shop_account.html">Account</a></li>
|
|
<li><a href="shop_cart.html">Cart</a></li>
|
|
<li><a href="shop_checkout.html">Checkout</a></li>
|
|
</ul>
|
|
</li> <!-- END Shop -->
|
|
<li><a href="shortcodes.html">Shortcodes</a></li>
|
|
<!-- Always include last class to link to solve some padding issues -->
|
|
<li><a class="last" href="#" target="_blank">Documentation</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div> <!-- END Container -->
|
|
</div> <!-- END Main Header -->
|
|
</header>
|
|
|
|
</div>
|
|
|
|
<!-- Do not remove this class -->
|
|
<div class="push-top"></div>
|
|
|
|
|
|
|
|
|
|
<section class="section-intro bg-img bg11 stellar" data-stellar-background-ratio="0.4">
|
|
<div class="bg-overlay op6"></div>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-5 col-sm-8">
|
|
<h1 class="intro-title mb20">Shortcodes</h1>
|
|
<p class="intro-p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit tenetur reiciendis molestias nostrum excepturi porro dolorum aset!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="page-breadcrumbs-wrapper pb2">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<div class="pull-right">
|
|
<div class="page-breadcrumbs">
|
|
<a href="#">home</a> <span class="separator"> / </span> <a href="#">pages</a> <span class="separator"> / </span> <a href="#" class="active">shortcodes</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Buttons -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h2 class="title-border">Buttons</h2>
|
|
<div class="content">
|
|
<p>
|
|
<button type="button" class="btn btn-primary">Primary</button>
|
|
<button type="button" class="btn btn-success">Success</button>
|
|
<button type="button" class="btn btn-info">Info</button>
|
|
<button type="button" class="btn btn-warning">Warning</button>
|
|
<button type="button" class="btn btn-danger">Danger</button>
|
|
</p>
|
|
<hr>
|
|
<p>
|
|
<a href="#" class="btn btn-a">Button style 1</a> <span class="mr20"></span>
|
|
<a href="#" class="btn btn-b">Simple Button</a> <span class="mr20"></span>
|
|
<a href="#" class="btn btn-d">Button style 2</a> <span class="mr20"></span>
|
|
<a href="#" class="btn btn-c">Bordered Button</a> <span class="mr20"></span>
|
|
<a href="#" class="btn-e">Large button</a>
|
|
</p>
|
|
<hr>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-b dropdown-toggle" data-toggle="dropdown">
|
|
<span class="mr10">Dropdown</span> <span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="#">Action</a></li>
|
|
<li><a href="#">Another action</a></li>
|
|
<li><a href="#">Something else here</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
<span class="mr20"></span>
|
|
<a href="#" class="btn btn-icon btn-a"><i class="fa fa-html5"></i> Button with icon</a>
|
|
<span class="mr20"></span>
|
|
<button type="button" class="btn btn-primary disabled">Disabled Button</button>
|
|
<hr>
|
|
<p>
|
|
<a href="#" class="btn btn-bg btn-icon mr10 facebook"><i class="fa fa-facebook"></i> Facebook</a>
|
|
<a href="#" class="btn btn-bg btn-icon mr10 twitter"><i class="fa fa-twitter"></i> Twitter</a>
|
|
<a href="#" class="btn btn-bg btn-icon mr10 google-plus"><i class="fa fa-google-plus"></i> Google Plus</a>
|
|
<a href="#" class="btn btn-bg btn-icon mr10 instagram"><i class="fa fa-instagram"></i> Instagram</a>
|
|
<a href="#" class="btn btn-bg btn-icon pinterest"><i class="fa fa-pinterest"></i> Pinterest</a>
|
|
</p>
|
|
<p>
|
|
<a href="#" class="btn btn-bg btn-icon mr10 behance"><i class="fa fa-behance"></i> Behance</a>
|
|
<a href="#" class="btn btn-bg btn-icon mr10 flickr"><i class="fa fa-flickr"></i> Flickr</a>
|
|
<a href="#" class="btn btn-bg btn-icon mr10 dribbble"><i class="fa fa-dribbble"></i> Dribbble</a>
|
|
<a href="#" class="btn btn-bg btn-icon linkedin"><i class="fa fa-linkedin"></i> Linkedin</a>
|
|
</p>
|
|
<div class="mb40"></div>
|
|
<p>You can find more buttons <a href="https://github.com/alexwolfe/Buttons" target="_blank">here</a>.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Alert - Notifications -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h2 class="title-border">Notifications</h2>
|
|
<div class="content">
|
|
<div class="alert alert-bg bg-dark alert-dismissable fade in">
|
|
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
|
|
<i class="fa fa-cloud-download fa-3x"></i>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil vero molestias provident, commodi voluptatem, deserunt fugiat saepe possimus odio eius. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci repellendus rem iste, dignissimos, praesentium perspiciatis illo eum quos corporis dolores. Lorem ipsum dolor sit amet!</p>
|
|
</div>
|
|
<hr>
|
|
<div class="alert alert-warning alert-dismissable fade in">
|
|
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
|
|
<strong>Warning!</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
|
</div>
|
|
<div class="alert alert-success alert-dismissable fade in">
|
|
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
|
|
<strong>Success!</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
|
</div>
|
|
<div class="alert alert-danger alert-dismissable fade in">
|
|
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
|
|
<strong>Danger!</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
|
</div>
|
|
<div class="alert alert-info alert-dismissable fade in">
|
|
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
|
|
<strong>Info!</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
|
</div>
|
|
|
|
<div class="alert-modal">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<div class="alert alert-bg bg-dark alert-dismissable fade in">
|
|
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
|
|
<i class="fa fa-cloud-download fa-3x"></i>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil vero molestias provident, commodi voluptatem, deserunt fugiat saepe possimus odio eius. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci repellendus rem iste, dignissimos, praesentium perspiciatis illo eum quos corporis dolores. Lorem ipsum dolor sit amet!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a id="show_notification" href="#" class="btn btn-b br2 mt20">Trigger notification</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Social Icons -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h2 class="title-border">Social Icons</h2>
|
|
<div class="content mb50">
|
|
<div class="row mb50">
|
|
<div class="col-md-12">
|
|
|
|
<ul class="social-icon circle">
|
|
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-tumblr"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-rss"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-soundcloud"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-github-alt"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-youtube"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-flickr"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-behance"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-vimeo-square"></i></a></li>
|
|
</ul>
|
|
|
|
<div class="mb40 clearfix"></div>
|
|
|
|
<ul class="social-icon simple">
|
|
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-tumblr"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-rss"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-soundcloud"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-github-alt"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-youtube"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-flickr"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-behance"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-vimeo-square"></i></a></li>
|
|
</ul>
|
|
|
|
<div class="mb70 clearfix"></div>
|
|
|
|
<ul class="social-icon social-bg circle">
|
|
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-tumblr"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-rss"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-soundcloud"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-github-alt"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-youtube"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-flickr"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-behance"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-vimeo-square"></i></a></li>
|
|
</ul>
|
|
|
|
<div class="mb40 clearfix"></div>
|
|
|
|
<ul class="social-icon bordered circle">
|
|
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-tumblr"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-rss"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-soundcloud"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-github-alt"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-youtube"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-flickr"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-behance"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-vimeo-square"></i></a></li>
|
|
</ul>
|
|
|
|
<div class="mb40 clearfix"></div>
|
|
|
|
<ul class="social-icon dark circle">
|
|
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-tumblr"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-rss"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-soundcloud"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-github-alt"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-youtube"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-flickr"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-behance"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-vimeo-square"></i></a></li>
|
|
</ul>
|
|
|
|
<div class="mb40 clearfix"></div>
|
|
|
|
<ul class="social-icon main circle">
|
|
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-tumblr"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-rss"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-soundcloud"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-github-alt"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-youtube"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-flickr"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-behance"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-vimeo-square"></i></a></li>
|
|
</ul>
|
|
|
|
<div class="mb70 clearfix"></div>
|
|
|
|
<ul class="social-icon social-bg rounded">
|
|
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-tumblr"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-rss"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-soundcloud"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-github-alt"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-youtube"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-flickr"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-behance"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-vimeo-square"></i></a></li>
|
|
</ul>
|
|
|
|
<div class="mb40 clearfix"></div>
|
|
|
|
<ul class="social-icon bordered rounded">
|
|
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-tumblr"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-rss"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-soundcloud"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-github-alt"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-youtube"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-flickr"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-behance"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-vimeo-square"></i></a></li>
|
|
</ul>
|
|
|
|
<div class="mb40 clearfix"></div>
|
|
|
|
<ul class="social-icon dark rounded">
|
|
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-tumblr"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-rss"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-soundcloud"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-github-alt"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-youtube"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-flickr"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-behance"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-vimeo-square"></i></a></li>
|
|
</ul>
|
|
|
|
<div class="mb40 clearfix"></div>
|
|
|
|
<ul class="social-icon main rounded">
|
|
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-tumblr"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-rss"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-soundcloud"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-github-alt"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-youtube"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-flickr"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-behance"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-vimeo-square"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Service Sections -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h2 class="title-border">Service Sections</h2>
|
|
<div class="content">
|
|
<!-- Box services style 1 -->
|
|
<div class="row">
|
|
<div class="col-sm-4 xs-box">
|
|
<div class="box-services-a">
|
|
<h3 class="title-small"><i class="fa fa-cloud-download fa-bg"></i> Fully customizable <a href="#" class="link-read-more">read more</a></h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis maiores repudiandae, accusantium reiciendis!</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4 xs-box">
|
|
<div class="box-services-a">
|
|
<h3 class="title-small"><i class="fa fa-cloud-upload fa-bg"></i> Easy to use <a href="#" class="link-read-more">read more</a></h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis maiores repudiandae, accusantium reiciendis!</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div class="box-services-a">
|
|
<h3 class="title-small"><i class="fa fa-star fa-bg"></i> Rapid development <a href="#" class="link-read-more">read more</a></h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis maiores repudiandae, accusantium reiciendis!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="mb60 mt40">
|
|
|
|
<!-- Box services style 1 a -->
|
|
<div class="row">
|
|
<div class="col-sm-4 xs-box">
|
|
<div class="box-services-a">
|
|
<h3 class="title-uppercased mb10"><i class="fa icon_globe fa-style5"></i> Fully customizable <a href="#" class="link-read-more">read more</a></h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis maiores repudiandae, accusantium reiciendis!</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4 xs-box">
|
|
<div class="box-services-a">
|
|
<h3 class="title-uppercased mb10"><i class="fa icon_chat_alt fa-style5"></i> Easy to use <a href="#" class="link-read-more">read more</a></h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis maiores repudiandae, accusantium reiciendis!</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div class="box-services-a">
|
|
<h3 class="title-uppercased mb10"><i class="fa icon_gift_alt fa-style5"></i> Rapid development <a href="#" class="link-read-more">read more</a></h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis maiores repudiandae, accusantium reiciendis!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<hr class="mb60 mt40">
|
|
|
|
<!-- Box services style 2 -->
|
|
<div class="row col-p30 mb40">
|
|
<div class="col-sm-6 sm-box2">
|
|
<div class="box-services-b">
|
|
<div class="box-left"><i class="fa fa-style1 fa-android"></i></div>
|
|
<div class="box-right">
|
|
<h3 class="title-small">Responsive Design <a href="#" class="link-read-more">read more</a></h3>
|
|
<p class="mb10">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim temporibus quae, aliquid! Ipsam officiis obcaecati beatae temporibus quae!</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="box-services-b">
|
|
<div class="box-left"><i class="fa fa-style1 fa-github-alt"></i></div>
|
|
<div class="box-right">
|
|
<h3 class="title-small">Bootstrap Based <a href="#" class="link-read-more">read more</a></h3>
|
|
<p class="mb10">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim temporibus quae, aliquid! Ipsam officiis obcaecati beatae temporibus quae!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Box services style 2 a -->
|
|
<div class="row col-p30 mb40">
|
|
<div class="col-sm-6 sm-box2">
|
|
<div class="box-services-b">
|
|
<div class="box-left"><i class="fa fa-style1 icon_globe circle"></i></div>
|
|
<div class="box-right">
|
|
<h3 class="title-small">Wide layout <a href="#" class="link-read-more">read more</a></h3>
|
|
<p class="mb10">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim temporibus quae, aliquid! Ipsam officiis obcaecati beatae temporibus quae!</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="box-services-b">
|
|
<div class="box-left"><i class="fa fa-style1 icon_chat_alt circle"></i></div>
|
|
<div class="box-right">
|
|
<h3 class="title-small">Boxed layout <a href="#" class="link-read-more">read more</a></h3>
|
|
<p class="mb10">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim temporibus quae, aliquid! Ipsam officiis obcaecati beatae temporibus quae!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Box services style 2 b -->
|
|
<div class="row col-p30 mb40">
|
|
<div class="col-sm-6 sm-box2">
|
|
<div class="box-services-b">
|
|
<div class="box-left"><i class="fa fa-style2 icon_chat_alt"></i></div>
|
|
<div class="box-right">
|
|
<h3 class="title-small">Customizable <a href="#" class="link-read-more">read more</a></h3>
|
|
<p class="mb10">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim temporibus quae, aliquid! Ipsam officiis obcaecati beatae temporibus quae!</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="box-services-b">
|
|
<div class="box-left"><i class="fa fa-style2 icon_gift_alt"></i></div>
|
|
<div class="box-right">
|
|
<h3 class="title-small">Easy to use <a href="#" class="link-read-more">read more</a></h3>
|
|
<p class="mb10">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim temporibus quae, aliquid! Ipsam officiis obcaecati beatae temporibus quae!</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Box services style 2 c -->
|
|
<div class="row col-p30">
|
|
<div class="col-sm-6 sm-box2">
|
|
<div class="box-services-b">
|
|
<div class="box-left"><i class="fa fa-style3 icon_gift_alt"></i></div>
|
|
<div class="box-right">
|
|
<h3 class="title-small">SEO Friendly <a href="#" class="link-read-more">read more</a></h3>
|
|
<p class="mb10">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim temporibus quae, aliquid! Ipsam officiis obcaecati beatae temporibus quae!</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="box-services-b">
|
|
<div class="box-left"><i class="fa fa-style3 icon_chat_alt"></i></div>
|
|
<div class="box-right">
|
|
<h3 class="title-small">Premium Plugins <a href="#" class="link-read-more">read more</a></h3>
|
|
<p class="mb10">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim temporibus quae, aliquid! Ipsam officiis obcaecati beatae temporibus quae!</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<hr class="mb60 mt40">
|
|
|
|
<!-- Box services style 3 -->
|
|
<div class="row col-p30">
|
|
<div class="col-sm-4 xs-box2">
|
|
<div class="box-services-c">
|
|
<span class="fa fa-style1 circle">1</span>
|
|
<h3 class="title-small br-bottom-center">Premium Support</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab corrupti, quasi? Beatae cumque maiores.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4 xs-box2">
|
|
<div class="box-services-c">
|
|
<span class="fa fa-style1 circle">2</span>
|
|
<h3 class="title-small br-bottom-center">Free updates</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab corrupti, quasi? Beatae cumque maiores.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div class="box-services-c">
|
|
<span class="fa fa-style1 circle">3</span>
|
|
<h3 class="title-small br-bottom-center">Clean code</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab corrupti, quasi? Beatae cumque maiores.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<hr class="mb60 mt40">
|
|
|
|
<!-- Box services style 3 a -->
|
|
<div class="row col-p30">
|
|
<div class="col-sm-4 xs-box2 br-box">
|
|
<div class="box-services-c">
|
|
<i class="fa fa-github-alt fa-style3 circle shadow-b"></i>
|
|
<h3 class="title-small br-bottom-center">Knowledgebase</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab corrupti, quasi? Beatae cumque maiores.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4 xs-box2 br-box">
|
|
<div class="box-services-c">
|
|
<i class="fa fa-phone fa-style3 circle shadow-b"></i>
|
|
<h3 class="title-small br-bottom-center">Phone Support</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab corrupti, quasi? Beatae cumque maiores.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4 br-box last">
|
|
<div class="box-services-c">
|
|
<i class="fa fa-envelope fa-style3 circle shadow-b"></i>
|
|
<h3 class="title-small br-bottom-center">Mail Support</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab corrupti, quasi? Beatae cumque maiores.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<hr class="mb60 mt40">
|
|
|
|
|
|
<!-- Box services style 3 b -->
|
|
<div class="row col-p30">
|
|
<div class="col-sm-4 xs-box2">
|
|
<div class="box-services-c">
|
|
<i class="icon_globe fa fa-style4"></i>
|
|
<h3 class="title-small br-bottom-center">Bootstrap based</h3>
|
|
<p class="mb0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab corrupti, quasi? Beatae cumque maiores.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4 xs-box2">
|
|
<div class="box-services-c">
|
|
<i class="icon_gift_alt fa fa-style4"></i>
|
|
<h3 class="title-small br-bottom-center">Premium plugins</h3>
|
|
<p class="mb0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab corrupti, quasi? Beatae cumque maiores.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div class="box-services-c">
|
|
<i class="icon_chat_alt fa fa-style4"></i>
|
|
<h3 class="title-small br-bottom-center">We help you</h3>
|
|
<p class="mb0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab corrupti, quasi? Beatae cumque maiores.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<hr class="mb60 mt40">
|
|
|
|
|
|
|
|
<div class="row col-p0 max_height sm_max_height">
|
|
<div class="col-sm-12 col-md-6">
|
|
<div class="box-services-d bg-img bg07 el_max_height">
|
|
<div class="bg-overlay"></div>
|
|
<div class="row col-p0">
|
|
<div class="col-sm-12">
|
|
<h3 class="title-uppercased br-bottom">Responsive Design <a href="#" class="link-read-more">read more</a></h3>
|
|
<p class="mb0 ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum recusandae sequi atque voluptatum saepe suscipit veritatis voluptas! Odit, eos, consectetur. Consequatur non sed doloremque voluptates quis omnis!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<div class="box-services-d bg-img bg19 el_max_height">
|
|
<div class="bg-overlay"></div>
|
|
<div class="row col-p0">
|
|
<div class="col-sm-12">
|
|
<h3 class="title-uppercased br-bottom">Bootstrap Based <a href="#" class="link-read-more">read more</a></h3>
|
|
<p class="mb0 ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum recusandae sequi atque voluptatum saepe suscipit veritatis voluptas! Odit, eos, consectetur. Consequatur non sed doloremque voluptates quis omnis!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="mb60 mt40">
|
|
|
|
<div class="row col-p0 max_height sm_max_height">
|
|
<div class="col-sm-12 col-md-4">
|
|
<div class="box-services-d box-services-e el_max_height">
|
|
<div class="bg-overlay"></div>
|
|
<div class="row col-p0">
|
|
<div class="col-sm-12">
|
|
<h3 class="title-uppercased title-shadow-a">Unlimited colors <a href="#" class="link-read-more">read more</a></h3>
|
|
<p class="mb0 ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum recusandae sequi atque voluptatum saepe suscipit veritatis voluptas!</p>
|
|
<i class="fa fa-android"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-md-4">
|
|
<div class="box-services-d box-services-e dark el_max_height">
|
|
<div class="bg-overlay"></div>
|
|
<div class="row col-p0">
|
|
<div class="col-sm-12">
|
|
<h3 class="title-uppercased title-shadow-a">Ecommerce <a href="#" class="link-read-more">read more</a></h3>
|
|
<p class="mb0 ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum recusandae sequi atque voluptatum saepe suscipit veritatis voluptas!</p>
|
|
<i class="fa fa-apple"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-md-4">
|
|
<div class="box-services-d box-services-e orange el_max_height">
|
|
<div class="bg-overlay"></div>
|
|
<div class="row col-p0">
|
|
<div class="col-sm-12">
|
|
<h3 class="title-uppercased title-shadow-a">Reliable <a href="#" class="link-read-more">read more</a></h3>
|
|
<p class="mb0 ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum recusandae sequi atque voluptatum saepe suscipit veritatis voluptas!</p>
|
|
<i class="fa fa-github-alt"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="mb60 mt40">
|
|
|
|
<div class="row col-p0 max_height sm_max_height">
|
|
<div class="col-sm-12 col-md-4">
|
|
<div class="box-services-d box-services-e blue el_max_height">
|
|
<div class="bg-overlay"></div>
|
|
<div class="row col-p0">
|
|
<div class="col-sm-12">
|
|
<h3 class="title-uppercased br-bottom title-shadow-a">Clean code <a href="#" class="link-read-more">read more</a></h3>
|
|
<p class="mb0 ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum recusandae sequi!</p>
|
|
<span class="fa montserrat">1</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-md-4">
|
|
<div class="box-services-d box-services-e yellow el_max_height">
|
|
<div class="bg-overlay"></div>
|
|
<div class="row col-p0">
|
|
<div class="col-sm-12">
|
|
<h3 class="title-uppercased br-bottom title-shadow-a">HTML5 <a href="#" class="link-read-more">read more</a></h3>
|
|
<p class="mb0 ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum recusandae sequi!</p>
|
|
<span class="fa montserrat">2</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-md-4">
|
|
<div class="box-services-d box-services-e green el_max_height">
|
|
<div class="bg-overlay"></div>
|
|
<div class="row col-p0">
|
|
<div class="col-sm-12">
|
|
<h3 class="title-uppercased br-bottom title-shadow-a">CSS3 <a href="#" class="link-read-more">read more</a></h3>
|
|
<p class="mb0 ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum recusandae sequi!</p>
|
|
<span class="fa montserrat">3</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="mb60 mt40">
|
|
<div class="row col-p20">
|
|
<div class="col-sm-4 xs-box3">
|
|
<div class="box-services-f">
|
|
<!-- Image popup -->
|
|
<div class="portfolio-text portfolio-center mb20">
|
|
<div class="view">
|
|
<img src="images/demo/office1.jpg" class="br2" alt="Image Popup">
|
|
<div class="mask">
|
|
<a href="images/demo/office1.jpg" title="Image title here" class="init-popup image-popup portfolio-middle"><i class="fa fa-search"></i></a>
|
|
</div>
|
|
</div>
|
|
</div> <!-- END Image Popup -->
|
|
<div class="content">
|
|
<h3 class="title-uppercased br-bottom">Bootstrap based <a href="#" class="link-read-more">read more</a></h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, id voluptate aspernatur quas tempora consequatur quasi in molestias est nesciunt dolorum!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4 xs-box3">
|
|
<div class="box-services-f">
|
|
<!-- Image popup -->
|
|
<div class="portfolio-text portfolio-center mb20">
|
|
<div class="view">
|
|
<img src="images/demo/office2.jpg" class="br2" alt="Image Popup">
|
|
<div class="mask">
|
|
<a href="images/demo/office2.jpg" title="Image title here" class="init-popup image-popup portfolio-middle"><i class="fa fa-search"></i></a>
|
|
</div>
|
|
</div>
|
|
</div> <!-- END Image Popup -->
|
|
<div class="content">
|
|
<h3 class="title-uppercased br-bottom">premium plugins <a href="#" class="link-read-more">read more</a></h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, id voluptate aspernatur quas tempora consequatur quasi in molestias est nesciunt dolorum!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div class="box-services-f">
|
|
<!-- Image popup -->
|
|
<div class="portfolio-text portfolio-center mb20">
|
|
<div class="view">
|
|
<img src="images/demo/office3.jpg" class="br2" alt="Image Popup">
|
|
<div class="mask">
|
|
<a href="images/demo/office1.jpg" title="Image title here" class="init-popup image-popup portfolio-middle"><i class="fa fa-search"></i></a>
|
|
</div>
|
|
</div>
|
|
</div> <!-- END Image Popup -->
|
|
<div class="content">
|
|
<h3 class="title-uppercased br-bottom">customizable <a href="#" class="link-read-more">read more</a></h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, id voluptate aspernatur quas tempora consequatur quasi in molestias est nesciunt dolorum!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Carousels -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h2 class="title-border">Carousels</h2>
|
|
<div class="content">
|
|
<!-- Carousel 5 columns -->
|
|
<h3 class="title-small">5 Columns</h3>
|
|
<div class="owl-carousel owl-columns5 owl-p10">
|
|
<div class="owl-el">
|
|
<img src="images/demo/p01.jpg" alt="">
|
|
</div>
|
|
<div class="owl-el">
|
|
<img src="images/demo/p02.jpg" alt="">
|
|
</div>
|
|
<div class="owl-el">
|
|
<img src="images/demo/p03.jpg" alt="">
|
|
</div>
|
|
<div class="owl-el">
|
|
<img src="images/demo/p04.jpg" alt="">
|
|
</div>
|
|
<div class="owl-el">
|
|
<img src="images/demo/p05.jpg" alt="">
|
|
</div>
|
|
<div class="owl-el">
|
|
<img src="images/demo/p06.jpg" alt="">
|
|
</div>
|
|
<div class="owl-el">
|
|
<img src="images/demo/p07.jpg" alt="">
|
|
</div>
|
|
<div class="owl-el">
|
|
<img src="images/demo/p08.jpg" alt="">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb50"></div>
|
|
|
|
<!-- Carousel 4 columns -->
|
|
<h3 class="title-small">4 Columns</h3>
|
|
<div class="owl-carousel owl-columns4 owl-p10">
|
|
<div class="owl-el">
|
|
<img src="images/demo/p01.jpg" alt="">
|
|
</div>
|
|
<div class="owl-el">
|
|
<img src="images/demo/p02.jpg" alt="">
|
|
</div>
|
|
<div class="owl-el">
|
|
<img src="images/demo/p03.jpg" alt="">
|
|
</div>
|
|
<div class="owl-el">
|
|
<img src="images/demo/p04.jpg" alt="">
|
|
</div>
|
|
<div class="owl-el">
|
|
<img src="images/demo/p05.jpg" alt="">
|
|
</div>
|
|
<div class="owl-el">
|
|
<img src="images/demo/p06.jpg" alt="">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb50"></div>
|
|
|
|
<!-- Carousel 3 columns -->
|
|
<h3 class="title-small">3 Columns</h3>
|
|
<div class="owl-carousel owl-columns3 owl-p10">
|
|
<div class="owl-el">
|
|
<img src="images/demo/p01.jpg" alt="">
|
|
</div>
|
|
<div class="owl-el">
|
|
<img src="images/demo/p02.jpg" alt="">
|
|
</div>
|
|
<div class="owl-el">
|
|
<img src="images/demo/p03.jpg" alt="">
|
|
</div>
|
|
<div class="owl-el">
|
|
<img src="images/demo/p04.jpg" alt="">
|
|
</div>
|
|
<div class="owl-el">
|
|
<img src="images/demo/p05.jpg" alt="">
|
|
</div>
|
|
<div class="owl-el">
|
|
<img src="images/demo/p06.jpg" alt="">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb50"></div>
|
|
|
|
<!-- Carousel 2 columns -->
|
|
<h3 class="title-small">2 Columns</h3>
|
|
<div class="owl-carousel owl-columns2 owl-p10">
|
|
<div class="owl-el">
|
|
<img src="images/demo/p01.jpg" alt="">
|
|
</div>
|
|
<div class="owl-el">
|
|
<img src="images/demo/p02.jpg" alt="">
|
|
</div>
|
|
<div class="owl-el">
|
|
<img src="images/demo/p03.jpg" alt="">
|
|
</div>
|
|
<div class="owl-el">
|
|
<img src="images/demo/p04.jpg" alt="">
|
|
</div>
|
|
<div class="owl-el">
|
|
<img src="images/demo/p05.jpg" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
<!-- Progress Bars -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h2 class="title-border">Progress Bars</h2>
|
|
<div class="content ">
|
|
<div class="row col-p30">
|
|
<div class="col-sm-6 xs-box2">
|
|
<h3 class="title-small">Simple</h3>
|
|
<div class="progress no-anim">
|
|
<div class="progress-bar" data-percentage="85"><span>Wordpress 85%</span></div>
|
|
</div>
|
|
<div class="progress no-anim">
|
|
<div class="progress-bar" data-percentage="70"><span>Drupal 70%</span></div>
|
|
</div>
|
|
<div class="progress no-anim">
|
|
<div class="progress-bar" data-percentage="100"><span>HTML 100%</span></div>
|
|
</div>
|
|
<div class="progress no-anim">
|
|
<div class="progress-bar" data-percentage="70"><span>Joomla 70%</span></div>
|
|
</div>
|
|
<div class="progress no-anim">
|
|
<div class="progress-bar" data-percentage="100"><span>CSS3 100%</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<h3 class="title-small">Syntax</h3>
|
|
<div class="progress no-anim">
|
|
<div class="progress-bar progress-bar-info" data-percentage="85"><span>Info</span></div>
|
|
</div>
|
|
<div class="progress no-anim">
|
|
<div class="progress-bar progress-bar-primary" data-percentage="80"><span>Primary</span></div>
|
|
</div>
|
|
<div class="progress no-anim">
|
|
<div class="progress-bar progress-bar-success" data-percentage="100"><span>Success</span></div>
|
|
</div>
|
|
<div class="progress no-anim">
|
|
<div class="progress-bar progress-bar-warning" data-percentage="50"><span>Warning</span></div>
|
|
</div>
|
|
<div class="progress no-anim">
|
|
<div class="progress-bar progress-bar-danger" data-percentage="35"><span>Danger</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div class="row col-p30">
|
|
<div class="col-sm-6 xs-box3">
|
|
<h3 class="title-small">Striped</h3>
|
|
<div class="progress no-anim progress-striped">
|
|
<div class="progress-bar" data-percentage="85"><span>Wordpress 85%</span></div>
|
|
</div>
|
|
<div class="progress no-anim progress-striped">
|
|
<div class="progress-bar" data-percentage="70"><span>Drupal 70%</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<h3 class="title-small">Striped active</h3>
|
|
<div class="progress no-anim progress-striped active">
|
|
<div class="progress-bar" data-percentage="85"><span>Wordpress 85%</span></div>
|
|
</div>
|
|
<div class="progress no-anim progress-striped active">
|
|
<div class="progress-bar" data-percentage="70"><span>Drupal 70%</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<h3 class="title-small">Animated</h3>
|
|
<div class="progress">
|
|
<div class="progress-bar" data-percentage="85"><span>Wordpress 85%</span></div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar" data-percentage="70"><span>Drupal 70%</span></div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar" data-percentage="100"><span>HTML 100%</span></div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar" data-percentage="70"><span>Joomla 70%</span></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Sections -->
|
|
<section>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h2 class="title-border">Sections</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Parallax Section -->
|
|
<section class="section-bg section-larger bg-img bg11 stellar" data-stellar-background-ratio="0.4">
|
|
<div class="bg-overlay op8"></div>
|
|
<div class="container">
|
|
<div class="row mt20 mb20">
|
|
<div class="col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">
|
|
<h2 class="title-medium text-center color-on-img title-shadow-b">Parallax Section</h2>
|
|
<div class="br-bottom-center mb30"></div>
|
|
<p class="p-large mb40 text-center color-on-img">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quidem ab beatae, repellendus sed quo explicabo hic dolorum at architecto.</p>
|
|
<div class="text-center"><a href="#" class="btn-slider">get quote</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Dark Section -->
|
|
<section class="section-bg section-larger section-dark">
|
|
<div class="container">
|
|
<div class="row mt20 mb20">
|
|
<div class="col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">
|
|
<h2 class="title-medium text-center color-on-dark title-shadow-b">Dark Section</h2>
|
|
<div class="br-bottom-center mb30"></div>
|
|
<p class="p-large mb40 text-center color-on-dark">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quidem ab beatae, repellendus sed quo explicabo hic dolorum at architecto.</p>
|
|
<div class="text-center"><a href="#" class="btn-slider reversed">get quote</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Half Section -->
|
|
<section class="section-bg p0 section-dark data-height-fix">
|
|
|
|
<div class="row col-p0">
|
|
<div class="col-sm-6 hidden-xs">
|
|
<div class="box-services-d p0 bg-img bg11">
|
|
<div class="bg-overlay"></div>
|
|
<div class="set-height"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section-caption">
|
|
<div class="container">
|
|
<div class="row col-p0">
|
|
<div class="col-sm-5 col-sm-offset-7 get-height">
|
|
<div class="mb50 mt50">
|
|
<h3 class="title-medium color-on-dark">Half Section</h3>
|
|
<div class="br-bottom mb20 color-on-dark"></div>
|
|
<p class="mb50 color-on-dark">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste sunt cupiditate asperiores atque consectetur reiciendis, ex voluptate! Atque distinctio, illum minus consectetur quae explicabo eveniet dolorum voluptatum excepturi autem illo, laudantium iusto itaque vero.</p>
|
|
<h3 class="title-small color-on-dark"><i class="fa-style5 icon_chat_alt mr10"></i> Happy Clients</h3>
|
|
<p class="mb0 color-on-dark">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis explicabo inventore, nisi sint consectetur distinctio! Asperiores totam dolorum, odio ex?</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Full width video section -->
|
|
<section class="section-bg p0">
|
|
<div class="video-wrapper">
|
|
<video id="video-fullwidth" poster="videos/work.jpg" preload="auto" loop="" autoplay="" muted="">
|
|
<source src='videos/work.html' type='video/mp4'>
|
|
<source src='videos/work-2.html' type='video/webm'>
|
|
Your browser does not support HTML5 video.
|
|
</video>
|
|
</div>
|
|
<div class="bg-overlay video op2"></div>
|
|
<a href="#" id="video-button" class="pause"><i class="fa"></i></a>
|
|
</section>
|
|
|
|
|
|
<!-- Pricing Tables -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h2 class="title-border">Pricing Tables</h2>
|
|
<div class="content">
|
|
<div class="row mb60">
|
|
<div class="col-sm-12 col-md-10 col-md-offset-1">
|
|
<div class="plans">
|
|
<div class="row col-p0">
|
|
<div class="col-sm-4">
|
|
<div class="plan plan-basic">
|
|
<div class="plan-header">
|
|
<h3 class="plan-price">
|
|
<span class="plan-curency">$</span>49<span class="plan-period">/ month</span>
|
|
</h3>
|
|
<h2 class="plan-title">Basic</h2>
|
|
</div>
|
|
<div class="clearfix">
|
|
<ul class="plan-features">
|
|
<li>Predefined Responses</li>
|
|
<li>Custom Business Rules</li>
|
|
<li>Screencasting</li>
|
|
<li class="plan-feature-off">Business Hours</li>
|
|
<li class="plan-feature-off">Multiple Ticket forms</li>
|
|
<li class="plan-feature-off">Business rules analysis</li>
|
|
<li class="plan-feature-off">Automated Ticket Sharing</li>
|
|
</ul>
|
|
</div>
|
|
<div class="plan-register"><a href="#">sign up</a></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div class="plan plan-professional">
|
|
<div class="plan-header">
|
|
<p class="plan-popular">Most Popular</p>
|
|
<h3 class="plan-price">
|
|
<span class="plan-curency">$</span>69<span class="plan-period">/ month</span>
|
|
</h3>
|
|
<h2 class="plan-title">Professional</h2>
|
|
</div>
|
|
<div class="clearfix">
|
|
<ul class="plan-features">
|
|
<li>Predefined Responses</li>
|
|
<li>Custom Business Rules</li>
|
|
<li>Screencasting</li>
|
|
<li>Business Hours</li>
|
|
<li>Multiple Ticket forms</li>
|
|
<li class="plan-feature-off">Business rules analysis</li>
|
|
<li class="plan-feature-off">Automated Ticket Sharing</li>
|
|
</ul>
|
|
</div>
|
|
<div class="plan-register"><a href="#">30 days free trial</a></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div class="plan plan-enterprise">
|
|
<div class="plan-header">
|
|
<h3 class="plan-price">
|
|
<span class="plan-curency">$</span>99<span class="plan-period">/ month</span>
|
|
</h3>
|
|
<h2 class="plan-title">Enterprise</h2>
|
|
</div>
|
|
<div class="clearfix">
|
|
<ul class="plan-features">
|
|
<li>Predefined Responses</li>
|
|
<li>Custom Business Rules</li>
|
|
<li>Screencasting</li>
|
|
<li>Business Hours</li>
|
|
<li>Multiple Ticket forms</li>
|
|
<li>Business rules analysis</li>
|
|
<li>Automated Ticket Sharing</li>
|
|
</ul>
|
|
</div>
|
|
<div class="plan-register"><a href="#">sign up</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Plans style 2 -->
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<div class="plans plans-b">
|
|
<div class="row">
|
|
<div class="col-sm-4">
|
|
<div class="plan plan-basic">
|
|
<div class="plan-header">
|
|
<h3 class="plan-price">
|
|
<span class="plan-curency">$</span>49<span class="plan-period">/ month</span>
|
|
</h3>
|
|
<h2 class="plan-title">Basic</h2>
|
|
</div>
|
|
<div class="clearfix">
|
|
<ul class="plan-features">
|
|
<li>Predefined Responses</li>
|
|
<li>Custom Business Rules</li>
|
|
<li>Screencasting</li>
|
|
<li class="plan-feature-off">Business Hours</li>
|
|
<li class="plan-feature-off">Multiple Ticket forms</li>
|
|
<li class="plan-feature-off">Business rules analysis</li>
|
|
<li class="plan-feature-off">Automated Ticket Sharing</li>
|
|
</ul>
|
|
</div>
|
|
<div class="plan-register"><a href="#">sign up</a></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div class="plan plan-professional">
|
|
<div class="plan-header">
|
|
<h3 class="plan-price">
|
|
<span class="plan-curency">$</span>69<span class="plan-period">/ month</span>
|
|
</h3>
|
|
<h2 class="plan-title">Professional</h2>
|
|
</div>
|
|
<div class="clearfix">
|
|
<ul class="plan-features">
|
|
<li>Predefined Responses</li>
|
|
<li>Custom Business Rules</li>
|
|
<li>Screencasting</li>
|
|
<li>Business Hours</li>
|
|
<li>Multiple Ticket forms</li>
|
|
<li class="plan-feature-off">Business rules analysis</li>
|
|
<li class="plan-feature-off">Automated Ticket Sharing</li>
|
|
</ul>
|
|
</div>
|
|
<div class="plan-register"><a href="#">30 days free trial</a></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div class="plan plan-enterprise">
|
|
<div class="plan-header">
|
|
<h3 class="plan-price">
|
|
<span class="plan-curency">$</span>99<span class="plan-period">/ month</span>
|
|
</h3>
|
|
<h2 class="plan-title">Enterprise</h2>
|
|
</div>
|
|
<div class="clearfix">
|
|
<ul class="plan-features">
|
|
<li>Predefined Responses</li>
|
|
<li>Custom Business Rules</li>
|
|
<li>Screencasting</li>
|
|
<li>Business Hours</li>
|
|
<li>Multiple Ticket forms</li>
|
|
<li>Business rules analysis</li>
|
|
<li>Automated Ticket Sharing</li>
|
|
</ul>
|
|
</div>
|
|
<div class="plan-register"><a href="#">sign up</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Popovers - Tooltips - Modals -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h2 class="title-border">Tooltips</h2>
|
|
<div class="content mb50">
|
|
<div class="">
|
|
<a href="#" class="btn btn-b" data-toggle="tooltip" data-placement="bottom" title="Lorem ipsum dolor sit amet, consectetur adipisicing elit.">Tooltip on bottom</a>
|
|
<a href="#" class="btn btn-b" data-toggle="tooltip" data-placement="top" title="Lorem ipsum dolor sit amet, consectetur adipisicing elit.">Tooltip on top</a>
|
|
<a href="#" class="btn btn-b" data-toggle="tooltip" data-placement="left" title="Lorem ipsum dolor sit amet, consectetur adipisicing elit.">Tooltip on left</a>
|
|
<a href="#" class="btn btn-b" data-toggle="tooltip" data-placement="right" title="Lorem ipsum dolor sit amet, consectetur adipisicing elit.">Tooltip on right</a>
|
|
</div>
|
|
</div>
|
|
<h2 class="title-border">Popovers</h2>
|
|
<div class="content mb50">
|
|
<div class="">
|
|
<button type="button" class="btn btn-b" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on bottom">Popover on bottom</button>
|
|
<button type="button" class="btn btn-b" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top</button>
|
|
<button type="button" class="btn btn-b" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right</button>
|
|
<button type="button" class="btn btn-b" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on left">Popover on left</button>
|
|
</div>
|
|
</div>
|
|
<h2 class="title-border">Modals</h2>
|
|
<div class="content">
|
|
|
|
<button class="btn btn-b" data-toggle="modal" data-target="#modal">Modal - Middle</button>
|
|
<button class="btn btn-b" data-toggle="modal" data-target="#modal-2">Modal - Small</button>
|
|
<button class="btn btn-b" data-toggle="modal" data-target="#modal-3">Modal - Large</button>
|
|
|
|
<div class="modal fade" id="modal" tabindex="-1" role="modal" aria-labelledby="modal-label" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h4 class="modal-title" id="modal-label">Modal Title</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium atque architecto quae ullam rem labore veritatis temporibus asperiores, ad eaque odit commodi inventore dolore perspiciatis, nam dicta est eos id quod excepturi.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-b" data-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-b">Save Changes</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="modal-2" tabindex="-1" role="modal" aria-labelledby="modal-label-2" aria-hidden="true">
|
|
<div class="modal-dialog modal-sm">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h4 class="modal-title" id="modal-label-2">Modal Title</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium atque architecto quae ullam rem labore veritatis.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<div class="pull-left">
|
|
<button type="button" class="btn btn-b" data-dismiss="modal">Ok, I got it</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="modal-3" tabindex="-1" role="modal" aria-labelledby="modal-label-3" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h4 class="modal-title" id="modal-label-3">Modal Title</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row mb20">
|
|
<div class="col-sm-12">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium atque architecto quae ullam rem labore veritatis temporibus asperiores, ad eaque odit commodi inventore dolore perspiciatis, nam dicta est eos id quod excepturi.</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-6 xs-box">
|
|
<div class="box-services-a">
|
|
<h3 class="title-uppercased mb10"><i class="fa icon_globe fa-style5"></i> Fully customizable <a href="#" class="link-read-more">read more</a></h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis maiores repudiandae, accusantium reiciendis!</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="box-services-a">
|
|
<h3 class="title-uppercased mb10"><i class="fa icon_key_alt fa-style5"></i> Easy to use <a href="#" class="link-read-more">read more</a></h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis maiores repudiandae, accusantium reiciendis!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-b" data-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-b">Save Changes</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Tabs -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h2 class="title-border">Tabs</h2>
|
|
<div class="content">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<ul class="nav nav-tabs">
|
|
<li class="active"><a href="#tab1" data-toggle="tab"><i class="fa fa-wordpress"></i> WordPress</a></li>
|
|
<li><a href="#tab2" data-toggle="tab"><i class="fa fa-joomla"></i> Joomla</a></li>
|
|
<li><a href="#tab3" data-toggle="tab"><i class="fa fa-drupal"></i> Drupal</a></li>
|
|
<li><a href="#tab4" data-toggle="tab"><i class="fa fa-credit-card"></i> Magento</a></li>
|
|
<li><a href="#tab5" data-toggle="tab"><i class="fa fa-shopping-cart"></i> OpenCart</a></li>
|
|
</ul>
|
|
<div class="tab-content">
|
|
<div class="tab-pane fade in active" id="tab1">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, iste, architecto ullam tenetur quia nemo ratione tempora consectetur quos minus voluptates nisi hic alias libero explicabo reiciendis sint ut quo nulla ipsa aliquid neque molestias et qui sunt. Odit, molestiae.</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="tab2">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, iste, architecto ullam tenetur quia nemo ratione tempora consectetur quos minus voluptates nisi hic alias libero explicabo reiciendis sint ut quo nulla ipsa aliquid neque molestias et qui sunt. Odit, molestiae.</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="tab3">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, iste, architecto ullam tenetur quia nemo ratione tempora consectetur quos minus voluptates nisi hic alias libero explicabo reiciendis sint ut quo nulla ipsa aliquid neque molestias et qui sunt. Odit, molestiae.</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="tab4">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, iste, architecto ullam tenetur quia nemo ratione tempora consectetur quos minus voluptates nisi hic alias libero explicabo reiciendis sint ut quo nulla ipsa aliquid neque molestias et qui sunt. Odit, molestiae.</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="tab5">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, iste, architecto ullam tenetur quia nemo ratione tempora consectetur quos minus voluptates nisi hic alias libero explicabo reiciendis sint ut quo nulla ipsa aliquid neque molestias et qui sunt. Odit, molestiae.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb50"></div>
|
|
<div class="row">
|
|
<div class="col-sm-4 col-md-3">
|
|
<ul class="nav nav-tabs vertical">
|
|
<li class="active"><a href="#tab11" data-toggle="tab"><i class="fa fa-wordpress"></i> WordPress</a></li>
|
|
<li><a href="#tab21" data-toggle="tab"><i class="fa fa-joomla"></i> Joomla</a></li>
|
|
<li><a href="#tab31" data-toggle="tab"><i class="fa fa-drupal"></i> Drupal</a></li>
|
|
<li><a href="#tab41" data-toggle="tab"><i class="fa fa-credit-card"></i> Magento</a></li>
|
|
<li><a href="#tab51" data-toggle="tab"><i class="fa fa-shopping-cart"></i> OpenCart</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-sm-8 col-md-9">
|
|
<div class="tab-content vertical">
|
|
<div class="tab-pane fade in active" id="tab11">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, iste, architecto ullam tenetur quia nemo ratione tempora consectetur quos minus voluptates nisi hic alias libero explicabo reiciendis sint ut quo nulla ipsa aliquid neque molestias et qui sunt. Odit, molestiae.</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="tab21">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, iste, architecto ullam tenetur quia nemo ratione tempora consectetur quos minus voluptates nisi hic alias libero explicabo reiciendis sint ut quo nulla ipsa aliquid neque molestias et qui sunt. Odit, molestiae. Lorem ipsum dolor sit amet.</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="tab31">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, iste, architecto ullam tenetur quia nemo ratione tempora consectetur quos minus voluptates nisi hic alias libero explicabo reiciendis sint ut quo nulla ipsa aliquid neque molestias et qui sunt. Odit, molestiae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, natus.</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="tab41">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, iste, architecto ullam tenetur quia nemo ratione tempora consectetur quos minus voluptates nisi hic alias libero explicabo reiciendis sint ut quo nulla ipsa aliquid neque molestias et qui sunt. Odit, molestiae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, fugiat aspernatur fuga incidunt deleniti iste!</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="tab51">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, iste, architecto ullam tenetur quia nemo ratione tempora consectetur quos minus voluptates nisi hic alias libero explicabo reiciendis sint ut quo nulla ipsa aliquid neque molestias et qui sunt. Odit, molestiae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, repellendus aut hic animi magnam deserunt in perferendis accusamus obcaecati a.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Toggles - Accordions -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h2 class="title-border">Accordions and Toggles</h2>
|
|
<div class="content mb30">
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-6 sm-box3">
|
|
<h3 class="title-small mb30">Accordions</h3>
|
|
<div class="panel-group" id="accordion">
|
|
<div class="panel ">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
<a data-toggle="collapse" data-parent="#accordion" href="#one">How to vertically align a tag</a>
|
|
</h4>
|
|
</div>
|
|
<div id="one" class="panel-collapse collapse in">
|
|
<div class="panel-body">
|
|
<p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quae, fuga!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
<a data-toggle="collapse" href="#two" data-parent="#accordion">Why I need that element</a>
|
|
</h4>
|
|
</div>
|
|
<div id="two" class="panel-collapse collapse">
|
|
<div class="panel-body">
|
|
<p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quae, fuga!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel ">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
<a data-toggle="collapse" href="#three" data-parent="#accordion">How to use media queries</a>
|
|
</h4>
|
|
</div>
|
|
<div id="three" class="panel-collapse collapse">
|
|
<div class="panel-body">
|
|
<p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quae, fuga!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel ">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
<a data-toggle="collapse" href="#four" data-parent="#accordion">Meter tag doesn't work in Firefox </a>
|
|
</h4>
|
|
</div>
|
|
<div id="four" class="panel-collapse collapse">
|
|
<div class="panel-body">
|
|
<p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quae, fuga!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel ">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
<a data-toggle="collapse" href="#five" data-parent="#accordion">Where I find that</a>
|
|
</h4>
|
|
</div>
|
|
<div id="five" class="panel-collapse collapse">
|
|
<div class="panel-body">
|
|
<p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Lorem ipsum dolor sit amet, consectetur adipisicing elit </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3 class="title-small mb30">Toggles</h3>
|
|
<div class="panel-group" id="toggle">
|
|
<div class="panel ">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
<a data-toggle="collapse" href="#one1">
|
|
<i class="fa fa-chevron-down upside-down"></i> How to vertically align a tag
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
<div id="one1" class="panel-collapse collapse in">
|
|
<div class="panel-body">
|
|
<p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quae, fuga!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
<a data-toggle="collapse" href="#two1">
|
|
<i class="fa fa-chevron-down upside-down"></i> Why I need that element
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
<div id="two1" class="panel-collapse collapse in">
|
|
<div class="panel-body">
|
|
<p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quae, fuga!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel ">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
<a data-toggle="collapse" href="#three1">
|
|
<i class="fa fa-chevron-down"></i> How to use media queries
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
<div id="three1" class="panel-collapse collapse">
|
|
<div class="panel-body">
|
|
<p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quae, fuga!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel ">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
<a data-toggle="collapse" href="#four1">
|
|
<i class="fa fa-chevron-down"></i> Meter tag doesn't work in Firefox
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
<div id="four1" class="panel-collapse collapse">
|
|
<div class="panel-body">
|
|
<p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quae, fuga!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel ">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
<a data-toggle="collapse" href="#five1">
|
|
<i class="fa fa-chevron-down"></i> Where I find that
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
<div id="five1" class="panel-collapse collapse">
|
|
<div class="panel-body">
|
|
<p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Lorem ipsum dolor sit amet, consectetur adipisicing elit </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Pagination -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h2 class="title-border left">Pagination</h2>
|
|
<div class="content">
|
|
<div class="clearfix mb10">
|
|
<ul class="pagination">
|
|
<li class="disabled"><a href="#"><i class="fa fa-chevron-left"></i></a></li>
|
|
<li class="active"><a href="#">1</a></li>
|
|
<li><a href="#">2</a></li>
|
|
<li><a href="#">3</a></li>
|
|
<li><a href="#">4</a></li>
|
|
<li class="disabled"><a href="#">...</a></li>
|
|
<li><a href="#">15</a></li>
|
|
<li><a href="#"><i class="fa fa-chevron-right"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="clearfix mb10">
|
|
<ul class="pagination pagination-2">
|
|
<li><a href="#"><i class="fa fa-chevron-left"></i></a></li>
|
|
<li><a href="#">1</a></li>
|
|
<li class="active"><a href="#">2</a></li>
|
|
<li><a href="#">3</a></li>
|
|
<li><a href="#">4</a></li>
|
|
<li class="disabled"><a href="#">...</a></li>
|
|
<li><a href="#">10</a></li>
|
|
<li><a href="#"><i class="fa fa-chevron-right"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="clearfix">
|
|
<ul class="pagination pagination-2 dark">
|
|
<li><a href="#"><i class="fa fa-chevron-left"></i></a></li>
|
|
<li><a href="#">1</a></li>
|
|
<li><a href="#">2</a></li>
|
|
<li class="active"><a href="#">3</a></li>
|
|
<li><a href="#">4</a></li>
|
|
<li class="disabled"><a href="#">...</a></li>
|
|
<li><a href="#">11</a></li>
|
|
<li><a href="#"><i class="fa fa-chevron-right"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Dividers -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h2 class="title-border mb50">Dividers</h2>
|
|
<div class="content">
|
|
<div class="divider"></div>
|
|
<div class="mb40"></div>
|
|
<div class="divider d2"></div>
|
|
<div class="mb40"></div>
|
|
<div class="divider d3"></div>
|
|
<div class="mb40"></div>
|
|
<div class="divider d4"><span><i class="fa fa-ellipsis-h"></i></span></div>
|
|
<div class="mb40"></div>
|
|
<div class="divider d2 d4"><span><i class="fa fa-cloud"></i></span></div>
|
|
<div class="mb40"></div>
|
|
<div class="divider d4"><span>Text center</span></div>
|
|
<div class="mb40"></div>
|
|
<div class="divider d4 text-left"><span>Text Left</span></div>
|
|
<div class="mb40"></div>
|
|
<div class="divider d2 d4 text-right"><span>Text Right</span></div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Dropcaps -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h2 class="title-border mb50">Dropcaps</h2>
|
|
<div class="content">
|
|
<div class="row mb40">
|
|
<div class="col-sm-6">
|
|
<p><span class="dropcap">L</span>orem ipsum dolor sit amet, consectetur adipisicing elit. Ratione architecto, nihil quo, at dignissimos eos! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit minus quia quaerat? Ab ratione aliquam dignissimos.</p>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<p><span class="dropcap circle">L</span>orem ipsum dolor sit amet, consectetur adipisicing elit. Ratione architecto, nihil quo, at dignissimos eos! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit minus quia quaerat? Ab ratione aliquam dignissimos.</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<p><span class="dropcap bordered shadow">L</span>orem ipsum dolor sit amet, consectetur adipisicing elit. Ratione architecto, nihil quo, at dignissimos eos! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit minus quia quaerat? Ab ratione aliquam dignissimos.</p>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<p><span class="dropcap bordered circle shadow">L</span>orem ipsum dolor sit amet, consectetur adipisicing elit. Ratione architecto, nihil quo, at dignissimos eos! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit minus quia quaerat? Ab ratione aliquam dignissimos.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Typography -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="row mb50">
|
|
<div class="col-sm-12">
|
|
<h2 class="title-border">Typography</h2>
|
|
<div class="content">
|
|
<div class="row">
|
|
<div class="col-sm-6 sm-box2">
|
|
<h1>Heading 1 <small>Secondary Text</small></h1>
|
|
<h2>Heading 2 <small>Secondary Text</small></h2>
|
|
<h3>Heading 3 <small>Secondary Text</small></h3>
|
|
<h4>Heading 4 <small>Secondary Text</small></h4>
|
|
<h5>Heading 5 <small>Secondary Text</small></h5>
|
|
<h6>Heading 6 <small>Secondary Text</small></h6>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<h1 class="montserrat">Heading 1 <small>Secondary Text</small></h1>
|
|
<h2 class="montserrat">Heading 2 <small>Secondary Text</small></h2>
|
|
<h3 class="montserrat">Heading 3 <small>Secondary Text</small></h3>
|
|
<h4 class="montserrat">Heading 4 <small>Secondary Text</small></h4>
|
|
<h5 class="montserrat">Heading 5 <small>Secondary Text</small></h5>
|
|
<h6 class="montserrat">Heading 6 <small>Secondary Text</small></h6>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, distinctio, tempore, maxime, inventore ducimus non neque hic doloribus iste nobis earum molestiae laboriosam excepturi magni facere necessitatibus corporis similique adipisci voluptates alias culpa soluta quidem. Deserunt, ea, animi maxime iste nisi veritatis in porro aliquam quia vel quidem velit dolorem.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, placeat, obcaecati dignissimos ex iusto corporis harum commodi ipsum sapiente adipisci porro magnam ut quo ad corrupti! Architecto laboriosam ad adipisci!</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet officia natus temporibus aperiam placeat, iusto voluptates quibusdam minus culpa totam nihil sequi, sapiente blanditiis vero veritatis aspernatur cupiditate, consequatur odit repellat laborum! Dolores ipsam, magnam, eligendi repellat illum laudantium quas amet voluptatum aperiam ex voluptatem architecto voluptas impedit tempora ea.</p>
|
|
<hr>
|
|
<div class="row">
|
|
<div class="col-sm-4 xs-box">
|
|
<p><strong>Strong text</strong></p>
|
|
<p><i>Italic text</i></p>
|
|
<p><small>Small Text</small></p>
|
|
<p><a href="#">Link Text</a></p>
|
|
<p><mark>Marked text</mark></p>
|
|
<p><span class="uppercase">Uppercased text</span></p>
|
|
<p><code><code></code></p>
|
|
</div>
|
|
<div class="col-sm-4 xs-box">
|
|
<p><em>Emphasized text</em></p>
|
|
<p><ins>Inserted text</ins></p>
|
|
<p><del>Removed text</del></p>
|
|
<p><span class="main-text">Main text</span></p>
|
|
<p><span class="selection">Selection text</span></p>
|
|
<p><kbd>Ctrl</kbd></p>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<p class="text-muted">Text muted</p>
|
|
<p class="text-primary">Text primary</p>
|
|
<p class="text-success">Text Success</p>
|
|
<p class="text-info">Text info</p>
|
|
<p class="text-warning">Text warning</p>
|
|
<p class="text-danger">Text danger</p>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<p class="text-left"><strong>Text Left</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
|
|
<p class="text-center"><strong>Text Center</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
|
|
<p class="text-right"><strong>Text Right</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
|
|
<hr>
|
|
<p><abbr title="Hyper Text Markup Language">HTML</abbr> ipsum dolor sit amet, consectetur adipisicing <strong>Abbreviation</strong></p>
|
|
<hr>
|
|
<address>
|
|
<strong>shiftThemes, Inc.</strong><br>
|
|
795 Folsom Ave, Suite 600<br>
|
|
San Francisco, CA 94107<br>
|
|
<abbr title="Phone">P:</abbr> (123) 456-7890
|
|
</address>
|
|
|
|
<address>
|
|
<strong>Full Name</strong><br>
|
|
<a href="mailto:#">first.last@example.com</a>
|
|
</address>
|
|
<hr>
|
|
|
|
<blockquote class="blockquote">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident minus expedita beatae officia impedit error delectus nulla quasi ad explicabo? Possimus, illum molestias non doloribus voluptates? Illo, animi facere dolorum labore perspiciatis corporis saepe dolor impedit iste modi assumenda tenetur.</p>
|
|
<footer>Bill Gates <cite title="Source Title">How to do that</cite></footer>
|
|
</blockquote>
|
|
<div class="mb50"></div>
|
|
<blockquote class="blockquote blockquote-2">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident minus expedita beatae officia impedit error delectus nulla quasi ad explicabo? Possimus, illum molestias non doloribus voluptates? Illo, animi facere dolorum labore perspiciatis corporis saepe dolor impedit iste modi assumenda tenetur.</p>
|
|
<footer>Steve Jobs <cite title="Source Title">Why I've done that</cite></footer>
|
|
</blockquote>
|
|
<hr>
|
|
<div class="row">
|
|
<div class="col-sm-6 col-md-3 sm-box">
|
|
<ul>
|
|
<li><strong>Unordered</strong></li>
|
|
<li>List item 1</li>
|
|
<li>List item 2
|
|
<ul>
|
|
<li>List item 2.1</li>
|
|
<li>List item 2.2</li>
|
|
<li>List item 2.3
|
|
<ul>
|
|
<li>List item 2.3.1</li>
|
|
<li>List item 2.3.2</li>
|
|
<li>List item 2.3.3</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-sm-6 col-md-3 sm-box">
|
|
<ul class="unstyled-list">
|
|
<li><strong>Unstyled</strong></li>
|
|
<li>List item 1</li>
|
|
<li>List item 2
|
|
<ul class="unstyled">
|
|
<li>List item 2.1</li>
|
|
<li>List item 2.2</li>
|
|
<li>List item 2.3
|
|
<ul class="unstyled">
|
|
<li>List item 2.3.1</li>
|
|
<li>List item 2.3.2</li>
|
|
<li>List item 2.3.3</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-sm-6 col-md-3 xs-box">
|
|
<ol>
|
|
<li><strong>Ordered</strong></li>
|
|
<li>List item 1</li>
|
|
<li>List item 2
|
|
<ol>
|
|
<li>List item 2.1</li>
|
|
<li>List item 2.2</li>
|
|
<li>List item 2.3</li>
|
|
</ol>
|
|
</li>
|
|
<li>List item 3</li>
|
|
<li>List item 4</li>
|
|
</ol>
|
|
</div>
|
|
<div class="col-sm-6 col-md-3">
|
|
<ul class="unstyled-list">
|
|
<li><small><i class="fa fa-html5 color-main mr10"></i></small> HTML5</li>
|
|
<li><small><i class="fa fa-css3 color-main mr10"></i></small> CSS3</li>
|
|
<li><small><i class="fa fa-wordpress color-main mr10"></i></small> WordPress</li>
|
|
<li><small><i class="fa fa-joomla color-main mr10"></i></small> Joomla</li>
|
|
<li><small><i class="fa fa-drupal color-main mr10"></i></small> Drupal</li>
|
|
<li><small><i class="fa fa-github-alt color-main mr10"></i></small> Github Alt</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<dl class="dl-horizontal">
|
|
<dt>HTML</dt>
|
|
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</dd>
|
|
|
|
</dl>
|
|
<dl class="dl-horizontal">
|
|
<dt>CSS</dt>
|
|
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, beatae iure eos accusamus aliquam consequuntur suscipit ex repellendus laboriosam sequi.</dd>
|
|
</dl>
|
|
<dl class="dl-horizontal">
|
|
<dt>Javascript</dt>
|
|
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, beatae iure eos accusamus aliquam consequuntur suscipit ex repellendus laboriosam sequi. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Columns -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h2 class="title-border">Columns</h2>
|
|
<div class="content">
|
|
<div class="row mb20">
|
|
<div class="col-sm-12">
|
|
<h3 class="title-small mb10">12/12</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos alias animi voluptate, consequuntur debitis! Nemo nulla ullam sapiente dolor est ut odio unde consequatur eum nostrum architecto voluptate, impedit ipsa dicta, asperiores pariatur repellendus ex provident reprehenderit officia! Maxime, alias.</p>
|
|
</div>
|
|
</div>
|
|
<div class="row mb20">
|
|
<div class="col-sm-1">
|
|
<h3 class="title-small mb10">1/12</h3>
|
|
<p>Lorem ipsum!</p>
|
|
</div>
|
|
<div class="col-sm-11">
|
|
<h3 class="title-small mb10">11/12</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut id quisquam, laudantium cumque eum ullam perspiciatis impedit, officiis quo ipsam quam aspernatur, vel cupiditate similique, dignissimos non accusamus perferendis sapiente sed tempore omnis in.</p>
|
|
</div>
|
|
</div>
|
|
<div class="row mb20">
|
|
<div class="col-sm-2">
|
|
<h3 class="title-small mb10">2/12</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing!</p>
|
|
</div>
|
|
<div class="col-sm-10">
|
|
<h3 class="title-small mb10">10/12</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, pariatur. Ducimus, eaque delectus sed. Molestiae dolorem dolor cumque numquam delectus elit. Ratione, pariatur. Ducimus, eaque delectus sed. Molestiae dolorem dolor cumque numquam delectus!</p>
|
|
</div>
|
|
</div>
|
|
<div class="row mb20">
|
|
<div class="col-sm-3">
|
|
<h3 class="title-small mb10">3/12</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, pariatur!</p>
|
|
</div>
|
|
<div class="col-sm-9">
|
|
<h3 class="title-small mb10">9/12</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, pariatur. Ducimus, eaque delectus sed. Molestiae dolorem dolor cumque numquam delectus ducimus, eaque delectus sed. Molestiae dolorem dolor cumque numquam delectus!</p>
|
|
</div>
|
|
</div>
|
|
<div class="row mb20">
|
|
<div class="col-sm-4">
|
|
<h3 class="title-small mb10">4/12</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, pariatur. Ducimus, eaque delectus!</p>
|
|
</div>
|
|
<div class="col-sm-8">
|
|
<h3 class="title-small mb10">8/12</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, pariatur. Ducimus, eaque delectus sed. Molestiae dolorem dolor cumque numquam delectus! Molestiae dolorem dolor cumque numquam delectus</p>
|
|
</div>
|
|
</div>
|
|
<div class="row mb20">
|
|
<div class="col-sm-5">
|
|
<h3 class="title-small mb10">5/12</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, pariatur. Ducimus, eaque delectus sed. Molestiae dolorem dolor!</p>
|
|
</div>
|
|
<div class="col-sm-7">
|
|
<h3 class="title-small mb10">7/12</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, pariatur. Ducimus, eaque delectus sed. Molestiae dolorem dolor cumque numquam delectus!</p>
|
|
</div>
|
|
</div>
|
|
<div class="row mb30">
|
|
<div class="col-sm-6">
|
|
<h3 class="title-small mb10">6/12</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, pariatur. Ducimus, eaque delectus sed. Molestiae dolorem dolor cumque numquam delectus!</p>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<h3 class="title-small mb10">6/12</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, pariatur. Ducimus, eaque delectus sed. Molestiae dolorem dolor cumque numquam delectus!</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<p>For more examples and more details, please visit <a href="https://getbootstrap.com/css/#grid" target="_blank">Bootstrap grid stystem</a>.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Maps -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h2 class="title-border">Maps</h2>
|
|
<div class="content">
|
|
<div class="row ">
|
|
<div class="col-md-12">
|
|
<h3 class="title-small">Simple</h3>
|
|
<div>
|
|
<iframe height="400" src="https://maps.google.com/?ie=UTF8&ll=34.053477,-118.241086&spn=0.031112,0.038581&t=m&z=15&output=embed"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="row ">
|
|
<div class="col-md-12">
|
|
<h3 class="title-small">Satellite</h3>
|
|
<div>
|
|
<iframe height="400" src="https://maps.google.com/?ie=UTF8&ll=34.068978,-118.250356&spn=0.031106,0.038581&t=h&z=15&output=embed"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Media -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h2 class="title-border">Media</h2>
|
|
<div class="content">
|
|
<div class="row">
|
|
<div class="col-sm-4 xs-box">
|
|
<h3 class="title-small">Image - Classic (Popup)</h3>
|
|
<!-- Image popup -->
|
|
<div class="portfolio-text portfolio-center">
|
|
<div class="view">
|
|
<img src="images/demo/p01.jpg" alt="Image Popup">
|
|
<div class="mask">
|
|
<a href="images/demo/p01.jpg" title="Image title here" class="init-popup image-popup portfolio-middle"><i class="fa fa-search"></i></a>
|
|
</div>
|
|
</div>
|
|
</div> <!-- END Image Popup -->
|
|
</div>
|
|
<div class="col-sm-4 xs-box">
|
|
<h3 class="title-small">Image - Rounded</h3>
|
|
<img src="images/demo/p02.jpg" alt="" class="img-rounded">
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<h3 class="title-small">Image - Thumbnail</h3>
|
|
<img src="images/demo/p03.jpg" alt="" class="img-thumbnail">
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="row">
|
|
<div class="col-md-6 sm-box">
|
|
<h3 class="title-small">Video (16:9 )</h3>
|
|
<iframe class="rs-video" src="https://www.youtube.com/embed/YE7VzlLtp-4" allowfullscreen></iframe>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h3 class="title-small">Video (4:3 )</h3>
|
|
<iframe class="rs-video video-4by3" src="https://www.youtube.com/embed/YE7VzlLtp-4" allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
<!-- Footer wrapper -->
|
|
<footer class="footer-wrapper footer-bg">
|
|
<div class="container">
|
|
<div class="row col-p30">
|
|
<div class="col-sm-12 col-md-4">
|
|
<div class="footer-widget">
|
|
<h3 class="footer-title">Palas</h3>
|
|
<ul class="footer-links clearfix">
|
|
<li><a href="#">Home</a></li>
|
|
<li><a href="#">Contact</a></li>
|
|
<li><a href="#">Privacy Policy</a></li>
|
|
<li><a href="#">Services</a></li>
|
|
<li><a href="#">Terms</a></li>
|
|
<li><a href="#">Security</a></li>
|
|
<li><a href="#">Pricing</a></li>
|
|
<li><a href="#">Features</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-md-4">
|
|
<div class="footer-widget">
|
|
<h3 class="footer-title">Get social</h3>
|
|
<ul class="footer-social clearfix">
|
|
<li><a href="#" data-toggle="tooltip" title="Twitter"><i class="fa fa-twitter"></i></a></li>
|
|
<li><a href="#" data-toggle="tooltip" title="Facebook"><i class="fa fa-facebook"></i></a></li>
|
|
<li><a href="#" data-toggle="tooltip" title="Google Plus"><i class="fa fa-google-plus"></i></a></li>
|
|
<li><a href="#" data-toggle="tooltip" title="Pinterest"><i class="fa fa-pinterest"></i></a></li>
|
|
<li><a href="#" data-toggle="tooltip" title="Instagram"><i class="fa fa-instagram"></i></a></li>
|
|
<li><a href="#" data-toggle="tooltip" title="Dribbble"><i class="fa fa-dribbble"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-md-4">
|
|
<div class="footer-widget">
|
|
<h3 class="footer-title">Tweets</h3>
|
|
<!-- This is just a dummy twitter feed with typed content (not generetad).
|
|
Didn't include the twitter feed for performance benefits.
|
|
See in documentation how to include a fully functional twitter feed widget -->
|
|
<div class="sidebar-tweet clearfix">
|
|
<i class="fa fa-twitter"></i>
|
|
<p class="tweet-content">
|
|
<a href="#" class="tweet-user">@shiftThemes</a>
|
|
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
|
|
<small>22 hours ago</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-6 col-md-4 col-sm-push-6 col-md-push-4 xs-box">
|
|
|
|
|
|
<!-- MailChimp Subscribe Form -->
|
|
<div id="mc_embed_signup">
|
|
<!-- Replace the below url with the action link from mailchimp (see documentation) -->
|
|
<form action="#" method="post"
|
|
id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank" novalidate class="footer-subscribe">
|
|
<div id="mc_embed_signup_scroll">
|
|
<input type="email" value="" name="EMAIL" id="mce-EMAIL" required placeholder=" Type email and hit enter">
|
|
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
|
|
<div style="position: absolute; left: -5000px;">
|
|
<input type="text" name="b_111fbc1ae1a748cfb4ef9ac27_ac969aca2f" tabindex="-1" value="">
|
|
</div>
|
|
<button type="submit" name="subscribe" id="mc-embedded-subscribe" class="hidden"></button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- END mc_embed_signup -->
|
|
|
|
</div>
|
|
<div class="col-sm-6 col-md-4 col-sm-pull-6 col-md-pull-4">
|
|
<p class="copyright">© Copyright 2015 - 2022 shiftThemes</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
|
|
</div> <!-- END Global Wrapper -->
|
|
|
|
|
|
<!-- Javascript files -->
|
|
<script src="js/jquery.min.js"></script>
|
|
<script src="bootstrap/3.3.1/js/bootstrap.min.js"></script>
|
|
<div id="_include_main_plugins"></div>
|
|
|
|
<div id="_include_owl_carousel"></div>
|
|
<script src="plugins/magnific-popup/jquery.magnific-popup.min.js"></script>
|
|
|
|
|
|
<!-- Main javascript file -->
|
|
<script src="js/script.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
<!-- Mirrored from ctrlthemes.com/html/palas/shortcodes.html by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 01 Aug 2025 05:24:05 GMT -->
|
|
</html> |