<!DOCTYPE html>
<!--
Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.2.0
Version: 3.4
Author: KeenThemes
Website: http://www.keenthemes.com/
Contact: support@keenthemes.com
Follow: www.twitter.com/keenthemes
Like: www.facebook.com/keenthemes
Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
License: You must have a valid license purchased only from themeforest (the above link) in order to legally use the theme for your project.
-->
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<!-- Head BEGIN -->
<head>
<meta charset="utf-8">
<title>Typography | Metronic Frontend
</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta content="Metronic Shop UI description" name="description">
<meta content="Metronic Shop UI keywords" name="keywords">
<meta content="keenthemes" name="author">
<meta property="og:site_name" content="-CUSTOMER VALUE-">
<meta property="og:title" content="-CUSTOMER VALUE-">
<meta property="og:description" content="-CUSTOMER VALUE-">
<meta property="og:type" content="website">
<meta property="og:image" content="-CUSTOMER VALUE-"><!-- link to image for socio -->
<meta property="og:url" content="-CUSTOMER VALUE-">
<link rel="shortcut icon" href="favicon.ico">
<!-- Fonts START -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|PT+Sans+Narrow|Source+Sans+Pro:200,300,400,600,700,900&subset=all" rel="stylesheet" type="text/css">
<!-- Fonts END -->
<!-- Global styles START -->
<link href="../../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="../../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Global styles END -->
<!-- Page level plugin styles START -->
<link href="../../assets/global/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet">
<!-- Page level plugin styles END -->
<!-- Theme styles START -->
<link href="../../assets/global/css/components.css" rel="stylesheet">
<link href="../../assets/global/css/plugins.css" rel="stylesheet">
<link href="../../assets/frontend/layout/css/style.css" rel="stylesheet">
<link href="../../assets/frontend/layout/css/style-responsive.css" rel="stylesheet">
<link href="../../assets/frontend/layout/css/themes/red.css" rel="stylesheet" id="style-color">
<link href="../../assets/frontend/layout/css/custom.css" rel="stylesheet">
<!-- Theme styles END -->
</head>
<!-- Head END -->
<!-- Body BEGIN -->
<body class="corporate">
<!-- BEGIN STYLE CUSTOMIZER -->
<div class="color-panel hidden-sm">
<div class="color-mode-icons icon-color"></div>
<div class="color-mode-icons icon-color-close"></div>
<div class="color-mode">
<p>THEME COLOR
</p>
<ul class="inline">
<li class="color-red current color-default" data-style="red"></li>
<li class="color-blue" data-style="blue"></li>
<li class="color-green" data-style="green"></li>
<li class="color-orange" data-style="orange"></li>
<li class="color-gray" data-style="gray"></li>
<li class="color-turquoise" data-style="turquoise"></li>
</ul>
</div>
</div>
<!-- END BEGIN STYLE CUSTOMIZER -->
<!-- BEGIN TOP BAR -->
<div class="pre-header">
<div class="container">
<div class="row">
<!-- BEGIN TOP BAR LEFT PART -->
<div class="col-md-6 col-sm-6 additional-shop-info">
<ul class="list-unstyled list-inline">
<li><i class="fa fa-phone"></i><span>+1 456 6717
</span></li>
<li><i class="fa fa-envelope-o"></i><span>info@keenthemes.com
</span></li>
</ul>
</div>
<!-- END TOP BAR LEFT PART -->
<!-- BEGIN TOP BAR MENU -->
<div class="col-md-6 col-sm-6 additional-nav">
<ul class="list-unstyled list-inline pull-right">
<li><a href="page-login.html">Log In
</a></li>
<li><a href="page-reg-page.html">Registration
</a></li>
</ul>
</div>
<!-- END TOP BAR MENU -->
</div>
</div>
</div>
<!-- END TOP BAR -->
<!-- BEGIN HEADER -->
<div class="header">
<div class="container">
<a class="site-logo" href="index.html"><img src="../../assets/frontend/layout/img/logos/logo-corp-red.png" alt="Metronic FrontEnd"></a>
<a href="javascript:void(0);" class="mobi-toggler"><i class="fa fa-bars"></i></a>
<!-- BEGIN NAVIGATION -->
<div class="header-navigation pull-right font-transform-inherit">
<ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
Home
</a>
<ul class="dropdown-menu">
<li><a href="index.html">Home Default
</a></li>
<li><a href="index-header-fix.html">Home with Header Fixed
</a></li>
<li><a href="index-without-topbar.html">Home without Top Bar
</a></li>
</ul>
</li>
<li class="dropdown dropdown-megamenu">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
Mega Menu
</a>
<ul class="dropdown-menu">
<li>
<div class="header-navigation-content">
<div class="row">
<div class="col-md-4 header-navigation-col">
<h4>Footwear
</h4>
<ul>
<li><a href="index.html">Astro Trainers
</a></li>
<li><a href="index.html">Basketball Shoes
</a></li>
<li><a href="index.html">Boots
</a></li>
<li><a href="index.html">Canvas Shoes
</a></li>
<li><a href="index.html">Football Boots
</a></li>
<li><a href="index.html">Golf Shoes
</a></li>
<li><a href="index.html">Hi Tops
</a></li>
<li><a href="index.html">Indoor Trainers
</a></li>
</ul>
</div>
<div class="col-md-4 header-navigation-col">
<h4>Clothing
</h4>
<ul>
<li><a href="index.html">Base Layer
</a></li>
<li><a href="index.html">Character
</a></li>
<li><a href="index.html">Chinos
</a></li>
<li><a href="index.html">Combats
</a></li>
<li><a href="index.html">Cricket Clothing
</a></li>
<li><a href="index.html">Fleeces
</a></li>
<li><a href="index.html">Gilets
</a></li>
<li><a href="index.html">Golf Tops
</a></li>
</ul>
</div>
<div class="col-md-4 header-navigation-col">
<h4>Accessories
</h4>
<ul>
<li><a href="index.html">Belts
</a></li>
<li><a href="index.html">Caps
</a></li>
<li><a href="index.html">Gloves
</a></li>
</ul>
<h4>Clearance
</h4>
<ul>
<li><a href="index.html">Jackets
</a></li>
<li><a href="index.html">Bottoms
</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
Pages
</a>
<ul class="dropdown-menu">
<li><a href="page-about.html">About Us
</a></li>
<li><a href="page-services.html">Services
</a></li>
<li><a href="page-prices.html">Prices
</a></li>
<li><a href="page-faq.html">FAQ
</a></li>
<li><a href="page-gallery.html">Gallery
</a></li>
<li><a href="page-search-result.html">Search Result
</a></li>
<li><a href="page-404.html">404
</a></li>
<li><a href="page-500.html">500
</a></li>
<li><a href="page-login.html">Login Page
</a></li>
<li><a href="page-forgotton-password.html">Forget Password
</a></li>
<li><a href="page-reg-page.html">Signup Page
</a></li>
<li><a href="page-careers.html">Careers
</a></li>
<li><a href="page-site-map.html">Site Map
</a></li>
<li><a href="page-contacts.html">Contact
</a></li>
</ul>
</li>
<li class="dropdown active">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
Features
</a>
<ul class="dropdown-menu">
<li class="active"><a href="feature-typography.html">Typography
</a></li>
<li><a href="feature-buttons.html">Buttons
</a></li>
<li><a href="feature-forms.html">Forms
</a></li>
<li class="dropdown-submenu">
<a href="index.html">Multi level
<i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu" role="menu">
<li><a href="index.html">Second Level Link
</a></li>
<li><a href="index.html">Second Level Link
</a></li>
<li class="dropdown-submenu">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
Second Level Link
<i class="fa fa-angle-right"></i>
</a>
<ul class="dropdown-menu">
<li><a href="index.html">Third Level Link
</a></li>
<li><a href="index.html">Third Level Link
</a></li>
<li><a href="index.html">Third Level Link
</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
Portfolio
</a>
<ul class="dropdown-menu">
<li><a href="portfolio-4.html">Portfolio 4
</a></li>
<li><a href="portfolio-3.html">Portfolio 3
</a></li>
<li><a href="portfolio-2.html">Portfolio 2
</a></li>
<li><a href="portfolio-item.html">Portfolio Item
</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
Blog
</a>
<ul class="dropdown-menu">
<li><a href="blog.html">Blog Page
</a></li>
<li><a href="blog-item.html">Blog Item
</a></li>
</ul>
</li>
<li><a href="shop-index.html" target="_blank">E-Commerce
</a></li>
<li><a href="onepage-index.html" target="_blank">One Page
</a></li>
<li><a href="http://keenthemes.com/preview/metronic/theme/templates/admin" target="_blank">Admin theme
</a></li>
<!-- BEGIN TOP SEARCH -->
<li class="menu-search">
<span class="sep"></span>
<i class="fa fa-search search-btn"></i>
<div class="search-box">
<form action="#">
<div class="input-group">
<input type="text" placeholder="Search" class="form-control">
<span class="input-group-btn">
<button class="btn btn-primary" type="submit">Search
</button>
</span>
</div>
</form>
</div>
</li>
<!-- END TOP SEARCH -->
</ul>
</div>
<!-- END NAVIGATION -->
</div>
</div>
<!-- Header END -->
<div class="main">
<div class="container">
<ul class="breadcrumb">
<li><a href="index.html">Home
</a></li>
<li><a href="#">Features
</a></li>
<li class="active">Typography
</li>
</ul>
<!-- BEGIN SIDEBAR & CONTENT -->
<div class="row margin-bottom-40">
<!-- BEGIN CONTENT -->
<div class="col-md-12 col-sm-12">
<h1>Typography
</h1>
<div class="content-page">
<div class="note note-success">
<h4 class="block">Metronic Admin (Framework) Features
</h4>
<p>
In the frontend theme you can use nearly all the features from
<a href="http://keenthemes.com/preview/metronic_admin/" target="_blanl">Metronic Admin Theme
</a>. First you will just need to include 2 below global css files:
</p>
<p>
<code>../../assets/global/css/components.css
</code><br>
<code>../../assets/global/css/plugins.css
</code>
</p>
<p>
And selected plugin's css and js files accordingly.
</p>
</div>
<div class="row">
<div class="col-md-8">
<div>
<!-- BEGIN GENERAL PORTLET-->
<div class="portlet">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>General
</div>
<div class="tools">
<a class="collapse" href="javascript:;">
</a>
<a class="config" data-toggle="modal" href="#portlet-config">
</a>
<a class="reload" href="javascript:;">
</a>
<a class="remove" href="javascript:;">
</a>
</div>
</div>
<div class="portlet-body">
<div class="row">
<div class="col-md-6">
<h3>Sample text with lead body
</h3>
<p class="lead">
Lead body. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed ornare nulla.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed ornare nulla.
</p>
</div>
<div class="col-md-6">
<h3>Sample text
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed ornare nulla.
</p>
<p>
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<p>
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h3>Texts
</h3>
<p class="muted">
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
</p>
<p class="text-warning">
Etiam porta sem malesuada magna mollis euismod.
</p>
<p class="text-error">
Donec ullamcorper nulla non metus auctor fringilla.
</p>
<p class="text-info">
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.
</p>
<p class="text-success">
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
</p>
</div>
<div class="col-md-6">
<h3>Headings
</h3>
<h1>h1. Heading 1
</h1>
<h2>h2. Heading 2
</h2>
<h3>h3. Heading 3
</h3>
<h4>h4. Heading 4
</h4>
<h5>h5. Heading 5
</h5>
<h6>h6. Heading 6
</h6>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h3>Address
</h3>
<div class="well">
<address>
<strong>Loop, Inc.
</strong><br>
795 Park Ave, Suite 120
<br>
San Francisco, CA 94107
<br>
<abbr title="Phone">P:
</abbr> (234) 145-1810
</address>
<address>
<strong>Full Name
</strong><br>
<a href="mailto:#">
first.last@email.com
</a>
</address>
</div>
</div>
<div class="col-md-6">
<h3>Some more text here
</h3>
<p>
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<p>
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- END GENERAL PORTLET-->
<div>
<!-- BEGIN BLOCKQUOTES PORTLET-->
<div class="portlet">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>Blockquotes
</div>
<div class="tools">
<a class="collapse" href="javascript:;">
</a>
<a class="config" data-toggle="modal" href="#portlet-config">
</a>
<a class="reload" href="javascript:;">
</a>
<a class="remove" href="javascript:;">
</a>
</div>
</div>
<div class="portlet-body">
<h3></h3>
<blockquote>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Duis mollis, est non commodo luctus, nisi erat porttitor ligula integer posuere erat a ante.
</p>
</blockquote>
<blockquote>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
<small>Someone famous
<cite title="Source Title">Source Title
</cite></small>
</blockquote>
<div class="clearfix">
<blockquote class="pull-right">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
<small>Someone famous
<cite title="Source Title">Source Title
</cite></small>
</blockquote>
</div>
</div>
</div>
<!-- END BLOCKQUOTES PORTLET-->
</div>
<!-- BEGIN WELLS PORTLET-->
<div>
<div class="portlet">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>Alignments
</div>
<div class="tools">
<a class="collapse" href="javascript:;">
</a>
<a class="config" data-toggle="modal" href="#portlet-config">
</a>
<a class="reload" href="javascript:;">
</a>
<a class="remove" href="javascript:;">
</a>
</div>
</div>
<div class="portlet-body">
<p class="text-left">
Left aligned text.
</p>
<p class="text-center">
Center aligned text.
</p>
<p class="text-right">
Right aligned text.
</p>
</div>
</div>
</div>
<!-- END WELLS PORTLET-->
<!-- BEGIN WELLS PORTLET-->
<div>
<div class="portlet">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>Wells
</div>
<div class="tools">
<a class="collapse" href="javascript:;">
</a>
<a class="config" data-toggle="modal" href="#portlet-config">
</a>
<a class="reload" href="javascript:;">
</a>
<a class="remove" href="javascript:;">
</a>
</div>
</div>
<div class="portlet-body">
<div class="well">
<h4>Default well
</h4>
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet.Integer molestie lorem at massa Integer molestie lorem at massa Integer molestie lorem at massa Integer molestie lorem at massa.
</div>
<div class="well well-large">
<h4>Large Well
</h4>
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. Integer molestie lorem at massa Integer molestie lorem at massa Integer molestie lorem at massa
</div>
</div>
</div>
</div>
<!-- END WELLS PORTLET-->
</div>
<div class="col-md-4">
<!-- BEGIN UNORDERED LISTS PORTLET-->
<div class="portlet box red">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>Unordered Lists
</div>
<div class="tools">
<a class="collapse" href="javascript:;">
</a>
</div>
</div>
<div class="portlet-body">
<ul>
<li>
Lorem ipsum dolor sit amet
</li>
<li>
Consectetur adipiscing elit
</li>
<li>
Integer molestie lorem at massa
</li>
<li>
Facilisis in pretium nisl aliquet
</li>
<li>
Nulla volutpat aliquam velit
<ul>
<li>
Phasellus iaculis neque
</li>
<li>
Purus sodales ultricies
</li>
<li>
Vestibulum laoreet porttitor sem
</li>
<li>
Ac tristique libero volutpat at
</li>
</ul>
</li>
<li>
Faucibus porta lacus fringilla vel
</li>
<li>
Aenean sit amet erat nunc
</li>
<li>
Eget porttitor lorem
</li>
</ul>
</div>
</div>
<!-- END UNORDERED LISTS PORTLET-->
<!-- BEGIN ORDERED LISTS PORTLET-->
<div class="portlet box blue">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>Ordered Lists
</div>
<div class="tools">
<a class="collapse" href="javascript:;">
</a>
</div>
</div>
<div class="portlet-body">
<ol>
<li>
Lorem ipsum dolor sit amet
</li>
<li>
Consectetur adipiscing elit
</li>
<li>
Integer molestie lorem at massa
</li>
<li>
Facilisis in pretium nisl aliquet
</li>
<li>
Nulla volutpat aliquam velit
</li>
<li>
Faucibus porta lacus fringilla vel
</li>
<li>
Aenean sit amet erat nunc
</li>
<li>
Eget porttitor lorem
</li>
</ol>
</div>
</div>
<!-- END ORDERED LISTS PORTLET-->
<!-- BEGIN UNSTYLED LISTS PORTLET-->
<div class="portlet box yellow">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>Unstyled Lists
</div>
<div class="tools">
<a class="collapse" href="javascript:;">
</a>
</div>
</div>
<div class="portlet-body">
<ul class="list-unstyled">
<li>
Lorem ipsum dolor sit amet
</li>
<li>
Consectetur adipiscing elit
</li>
<li>
Integer molestie lorem at massa
</li>
<li>
Facilisis in pretium nisl aliquet
</li>
<li>
Nulla volutpat aliquam velit
<ul>
<li>
Phasellus iaculis neque
</li>
<li>
Purus sodales ultricies
</li>
<li>
Vestibulum laoreet porttitor sem
</li>
<li>
Ac tristique libero volutpat at
</li>
</ul>
</li>
<li>
Faucibus porta lacus fringilla vel
</li>
<li>
Aenean sit amet erat nunc
</li>
<li>
Eget porttitor lorem
</li>
</ul>
</div>
</div>
<!-- END UNSTYLED LISTS PORTLET-->
<!-- BEGIN UNSTYLED LISTS PORTLET-->
<div class="portlet box red">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>Inline List
</div>
<div class="tools">
<a class="collapse" href="javascript:;">
</a>
</div>
</div>
<div class="portlet-body">
<ul class="list-inline">
<li>
1. Lorem
</li>
<li>
2. Phasellus
</li>
<li>
3. Nulla
</li>
</ul>
</div>
</div>
<!-- END UNSTYLED LISTS PORTLET-->
<!-- BEGIN DESCRIPTION LISTS PORTLET-->
<div class="portlet box purple">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>Description Lists
</div>
<div class="tools">
<a class="collapse" href="javascript:;">
</a>
</div>
</div>
<div class="portlet-body">
<dl>
<dt>Description lists
</dt>
<dd>A description list is perfect for defining terms.
</dd>
<dt>Euismod
</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
</dd>
<dd>Donec id elit non mi porta gravida at eget metus.
</dd>
<dt>Malesuada porta
</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.
</dd>
</dl>
</div>
</div>
<!-- END DESCRIPTION LISTS PORTLET-->
<!-- BEGIN DESCRIPTION LISTS PORTLET-->
<div class="portlet box blue">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>Text States
</div>
<div class="tools">
<a class="collapse" href="javascript:;">
</a>
</div>
</div>
<div class="portlet-body">
<p class="text-muted">
Muted text here
</p>
<p class="text-primary">
Primary text here
</p>
<p class="text-success">
Success text here
</p>
<p class="text-info">
Info text here
</p>
<p class="text-warning">
Warning text here
</p>
<p class="text-danger">
Danger text here
</p>
</div>
</div>
<!-- END DESCRIPTION LISTS PORTLET-->
</div>
</div>
</div>
</div>
<!-- END CONTENT -->
</div>
<!-- END SIDEBAR & CONTENT -->
</div>
</div>
<!-- BEGIN PRE-FOOTER -->
<div class="pre-footer">
<div class="container">
<div class="row">
<!-- BEGIN BOTTOM ABOUT BLOCK -->
<div class="col-md-4 col-sm-6 pre-footer-col">
<h2>About us
</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam sit nonummy nibh euismod tincidunt ut laoreet dolore magna aliquarm erat sit volutpat.
</p>
<div class="photo-stream">
<h2>Photos Stream
</h2>
<ul class="list-unstyled">
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/people/img5-small.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img1.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/people/img4-large.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img6.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img3.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/people/img2-large.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img2.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img5.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/people/img5-small.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img1.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/people/img4-large.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img6.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img3.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/people/img2-large.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img2.jpg"></a></li>
</ul>
</div>
</div>
<!-- END BOTTOM ABOUT BLOCK -->
<!-- BEGIN BOTTOM CONTACTS -->
<div class="col-md-4 col-sm-6 pre-footer-col">
<h2>Our Contacts
</h2>
<address class="margin-bottom-40">
35, Lorem Lis Street, Park Ave
<br>
California, US
<br>
Phone: 300 323 3456
<br>
Fax: 300 323 1456
<br>
Email:
<a href="mailto:info@metronic.com">info@metronic.com
</a><br>
Skype:
<a href="skype:metronic">metronic
</a>
</address>
<div class="pre-footer-subscribe-box pre-footer-subscribe-box-vertical">
<h2>Newsletter
</h2>
<p>Subscribe to our newsletter and stay up to date with the latest news and deals!
</p>
<form action="#">
<div class="input-group">
<input type="text" placeholder="youremail@mail.com" class="form-control">
<span class="input-group-btn">
<button class="btn btn-primary" type="submit">Subscribe
</button>
</span>
</div>
</form>
</div>
</div>
<!-- END BOTTOM CONTACTS -->
<!-- BEGIN TWITTER BLOCK -->
<div class="col-md-4 col-sm-6 pre-footer-col">
<h2 class="margin-bottom-0">Latest Tweets
</h2>
<a class="twitter-timeline" href="https://twitter.com/twitterapi" data-tweet-limit="2" data-theme="dark" data-link-color="#57C8EB" data-widget-id="455411516829736961" data-chrome="noheader nofooter noscrollbar noborders transparent">Loading tweets by @keenthemes...
</a>
</div>
<!-- END TWITTER BLOCK -->
</div>
</div>
</div>
<!-- END PRE-FOOTER -->
<!-- BEGIN FOOTER -->
<div class="footer">
<div class="container">
<div class="row">
<!-- BEGIN COPYRIGHT -->
<div class="col-md-6 col-sm-6 padding-top-10">
2014 © Metronic Shop UI. ALL Rights Reserved.
<a href="#">Privacy Policy
</a> |
<a href="#">Terms of Service
</a>
</div>
<!-- END COPYRIGHT -->
<!-- BEGIN PAYMENTS -->
<div class="col-md-6 col-sm-6">
<ul class="social-footer list-unstyled list-inline pull-right">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-skype"></i></a></li>
<li><a href="#"><i class="fa fa-github"></i></a></li>
<li><a href="#"><i class="fa fa-youtube"></i></a></li>
<li><a href="#"><i class="fa fa-dropbox"></i></a></li>
</ul>
</div>
<!-- END PAYMENTS -->
</div>
</div>
</div>
<!-- END FOOTER -->
<!-- Load javascripts at bottom, this will reduce page load time -->
<!-- BEGIN CORE PLUGINS (REQUIRED FOR ALL PAGES) -->
<!--[if lt IE 9]>
<script src="../../assets/global/plugins/respond.min.js"></script>
<![endif]-->
<script src="../../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../../assets/frontend/layout/scripts/back-to-top.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL JAVASCRIPTS (REQUIRED ONLY FOR CURRENT PAGE) -->
<script src="../../assets/global/plugins/fancybox/source/jquery.fancybox.pack.js" type="text/javascript"></script><!-- pop up -->
<script src="../../assets/global/scripts/metronic.js" type="text/javascript"></script>
<script src="../../assets/frontend/layout/scripts/layout.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
Metronic.init(); // init global framework features
Layout.init();
Layout.initTwitter();
});
</script>
<!-- END PAGE LEVEL JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>