EIOS/tpl/blog.html

529 lines
30 KiB
HTML

<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<title>{$page.name} {$site.name}</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta content="" name="description" />
<meta content="" name="author" />
<link href="/tpl/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="/tpl/assets/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
<link href="/tpl/assets/bootstrap/css/bootstrap-fileupload.css" rel="stylesheet" />
<link href="/tpl/assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<link href="/tpl/css/style.css" rel="stylesheet" />
<link href="/tpl/css/style-responsive.css" rel="stylesheet" />
<link href="/tpl/css/style-default.css" rel="stylesheet" id="style_color" />
</head>
<body class="fixed-top">
{include_file="tpl_header.html"}
<!-- END HEADER -->
<!-- BEGIN CONTAINER -->
<div id="container" class="row-fluid">
<!-- BEGIN SIDEBAR -->
<div class="sidebar-scroll">
<div id="sidebar" class="nav-collapse collapse">
<!-- BEGIN RESPONSIVE QUICK SEARCH FORM -->
<div class="navbar-inverse">
<form class="navbar-search visible-phone">
<input type="text" class="search-query" placeholder="Search" />
</form>
</div>
<!-- END RESPONSIVE QUICK SEARCH FORM -->
<!-- BEGIN SIDEBAR MENU -->
<ul class="sidebar-menu">
<li class="sub-menu">
<a class="" href="index.html">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;" class="">
<i class="icon-book"></i>
<span>UI Elements</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="general.html">General</a></li>
<li><a class="" href="button.html">Buttons</a></li>
<li><a class="" href="slider.html">Sliders</a></li>
<li><a class="" href="metro_view.html">Metro View</a></li>
<li><a class="" href="tabs_accordion.html">Tabs & Accordions</a></li>
<li><a class="" href="typography.html">Typography</a></li>
<li><a class="" href="tree_view.html">Tree View</a></li>
<li><a class="" href="nestable.html">Nestable List</a></li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;" class="">
<i class="icon-cogs"></i>
<span>Components</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="calendar.html">Calendar</a></li>
<li><a class="" href="grids.html">Grids</a></li>
<li><a class="" href="chartjs.html">Chart Js</a></li>
<li><a class="" href="flot_chart.html">Flot Charts</a></li>
<li><a class="" href="gallery.html"> Gallery</a></li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;" class="">
<i class="icon-tasks"></i>
<span>Form Stuff</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="form_layout.html">Form Layouts</a></li>
<li><a class="" href="form_component.html">Form Components</a></li>
<li><a class="" href="form_wizard.html">Form Wizard</a></li>
<li><a class="" href="form_validation.html">Form Validation</a></li>
<li><a class="" href="dropzone.html">Dropzone File Upload </a></li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;" class="">
<i class="icon-th"></i>
<span>Data Tables</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="basic_table.html">Basic Table</a></li>
<li><a class="" href="dynamic_table.html">Dynamic Table</a></li>
<li><a class="" href="editable_table.html">Editable Table</a></li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;" class="">
<i class="icon-fire"></i>
<span>Icons</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="font_awesome.html">Font Awesome</a></li>
<li><a class="" href="glyphicons.html">Glyphicons</a></li>
</ul>
</li>
<li class="sub-menu active">
<a href="javascript:;" class="">
<i class="icon-file-alt"></i>
<span>Sample Pages</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="blank.html">Blank Page</a></li>
<li class="active"><a class="" href="blog.html">Blog</a></li>
<li><a class="" href="timeline.html">Timeline</a></li>
<li><a class="" href="about_us.html">About Us</a></li>
<li><a class="" href="contact_us.html">Contact Us</a></li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;" class="">
<i class="icon-glass"></i>
<span>Extra</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="lock.html">Lock Screen</a></li>
<li><a class="" href="invoice.html">Invoice</a></li>
<li><a class="" href="pricing_tables.html">Pricing Tables</a></li>
<li><a class="" href="search_result.html">Search Result</a></li>
<li><a class="" href="faq.html">FAQ</a></li>
<li><a class="" href="404.html">404 Error</a></li>
<li><a class="" href="500.html">500 Error</a></li>
</ul>
</li>
<li>
<a class="" href="login.html">
<i class="icon-user"></i>
<span>Login Page</span>
</a>
</li>
</ul>
<!-- END SIDEBAR MENU -->
</div>
</div>
<!-- END SIDEBAR -->
<!-- BEGIN PAGE -->
<div id="main-content">
<!-- BEGIN PAGE CONTAINER-->
<div class="container-fluid">
<!-- BEGIN PAGE HEADER-->
<div class="row-fluid">
<div class="span12">
<!-- BEGIN THEME CUSTOMIZER-->
<div id="theme-change" class="hidden-phone">
<i class="icon-cogs"></i>
<span class="settings">
<span class="text">Theme Color:</span>
<span class="colors">
<span class="color-default" data-style="default"></span>
<span class="color-green" data-style="green"></span>
<span class="color-gray" data-style="gray"></span>
<span class="color-purple" data-style="purple"></span>
<span class="color-red" data-style="red"></span>
</span>
</span>
</div>
<!-- END THEME CUSTOMIZER-->
<!-- BEGIN PAGE TITLE & BREADCRUMB-->
<h3 class="page-title">
Blog
</h3>
<ul class="breadcrumb">
<li>
<a href="#">Home</a>
<span class="divider">/</span>
</li>
<li>
<a href="#">Sample Pages</a>
<span class="divider">/</span>
</li>
<li class="active">
Blog
</li>
<li class="pull-right search-wrap">
<form action="http://thevectorlab.net/metrolab/search_result.html" class="hidden-phone">
<div class="input-append search-input-area">
<input class="" id="appendedInputButton" type="text">
<button class="btn" type="button"><i class="icon-search"></i> </button>
</div>
</form>
</li>
</ul>
<!-- END PAGE TITLE & BREADCRUMB-->
</div>
</div>
<!-- END PAGE HEADER-->
<!-- BEGIN PAGE CONTENT-->
<div class="row-fluid">
<div class="span12">
<!-- BEGIN BLOG PORTLET-->
<div class="row-fluid">
<div class="span8 ">
<div class="row-fluid">
<div class="blog">
<div class="span2 orange">
<a href="javascript:;" class="blog-features date active">
<p class="day">02</p>
<p class="month">Jul</p>
</a>
<a href="javascript:;" class="blog-features comments">
<i class=" icon-comments-alt"></i>
<p class="info">145 Comments</p>
</a>
<a href="javascript:;" class="blog-features comments">
<i class=" icon-share"></i>
<p class="info">14 Share</p>
</a>
<a href="javascript:;" class="blog-features comments">
<i class=" icon-eye-open"></i>
<p class="info">1400 View</p>
</a>
</div>
<div class="span10">
<h2>
<a href="blog_details.html">Suspendisse et mauris nisi, in semper justo.</a>
</h2>
<p>
BY <a href="javascript:;" class="author">METRO LAB</a> | MONDAY, 12:30 PM
</p>
<img alt="" src="img/blog/blog1-big.jpg">
<p> Nam sed arcu non tellus fringilla fringilla ut vel ipsum. Aliquam ac magna metus. Nam sed arcu non tellus fringilla fringilla ut vel ipsum. Aliquam ac magna metus. Nam sed arcu non tellus fringilla fringilla ut vel ipsum. Aliquam ac magna metus. Nam sed arcu non tellus fringilla fringilla ut vel ipsum. Aliquam ac magna metus. Nam sed arcu non tellus fringilla fringilla ut vel ipsum. Aliquam ac magna metus. Nam sed arcu non tellus fringilla fring. Aliquam ac... <a href="blog_details.html" class="read-more">Continue Reading</a> </p>
</div>
</div>
<div class="blog">
<div class="span2 green">
<a href="javascript:;" class="blog-features date active">
<p class="day">03</p>
<p class="month">Aug</p>
</a>
<a href="javascript:;" class="blog-features comments">
<i class=" icon-comments-alt"></i>
<p class="info">145 Comments</p>
</a>
<a href="javascript:;" class="blog-features comments">
<i class=" icon-share"></i>
<p class="info">14 Share</p>
</a>
<a href="javascript:;" class="blog-features comments">
<i class=" icon-eye-open"></i>
<p class="info">1400 View</p>
</a>
</div>
<div class="span10">
<h2>
<a href="blog_details.html">Suspendisse et mauris nisi, in semper justo.</a>
</h2>
<p>
BY <a href="javascript:;" class="author">METRO LAB</a> | MONDAY, 12:30 PM
</p>
<img alt="" src="img/blog/blog2-big.jpg">
<p> Nam sed arcu non tellus fringilla fringilla ut vel ipsum. Aliquam ac magna metus. Nam sed arcu non tellus fringilla fringilla ut vel ipsum. Aliquam ac magna metus. Nam sed arcu non tellus fringilla fringilla ut vel ipsum. Aliquam ac magna metus. Nam sed arcu non tellus fringilla fringilla ut vel ipsum. Aliquam ac magna metus. Nam sed arcu non tellus fringilla fringilla ut vel ipsum. Aliquam ac magna metus. Nam sed arcu non tellus fringilla fring. Aliquam ac... <a href="blog_details.html" class="read-more">Continue Reading</a> </p>
</div>
</div>
<div class="blog">
<div class="span2 red">
<a href="javascript:;" class="blog-features date active">
<p class="day">05</p>
<p class="month">Sep</p>
</a>
<a href="javascript:;" class="blog-features comments">
<i class=" icon-comments-alt"></i>
<p class="info">145 Comments</p>
</a>
<a href="javascript:;" class="blog-features comments">
<i class=" icon-share"></i>
<p class="info">14 Share</p>
</a>
<a href="javascript:;" class="blog-features comments">
<i class=" icon-eye-open"></i>
<p class="info">1400 View</p>
</a>
</div>
<div class="span10">
<h2>
<a href="blog_details.html">Suspendisse et mauris nisi, in semper justo.</a>
</h2>
<p>
BY <a href="javascript:;" class="author">METRO LAB</a> | MONDAY, 12:30 PM
</p>
<img alt="" src="img/blog/blog3-big.jpg">
<p> Nam sed arcu non tellus fringilla fringilla ut vel ipsum. Aliquam ac magna metus. Nam sed arcu non tellus fringilla fringilla ut vel ipsum. Aliquam ac magna metus. Nam sed arcu non tellus fringilla fringilla ut vel ipsum. Aliquam ac magna metus. Nam sed arcu non tellus fringilla fringilla ut vel ipsum. Aliquam ac magna metus. Nam sed arcu non tellus fringilla fringilla ut vel ipsum. Aliquam ac magna metus. Nam sed arcu non tellus fringilla fring. Aliquam ac... <a href="blog_details.html" class="read-more">Continue Reading</a> </p>
</div>
</div>
<div class="blog">
<div class="span2 yellow">
<a href="javascript:;" class="blog-features date active">
<p class="day">02</p>
<p class="month">Jul</p>
</a>
<a href="javascript:;" class="blog-features comments">
<i class=" icon-comments-alt"></i>
<p class="info">145 Comments</p>
</a>
<a href="javascript:;" class="blog-features comments">
<i class=" icon-share"></i>
<p class="info">14 Share</p>
</a>
<a href="javascript:;" class="blog-features comments">
<i class=" icon-eye-open"></i>
<p class="info">1400 View</p>
</a>
</div>
<div class="span10">
<h2>
<a href="blog_details.html">Suspendisse et mauris nisi, in semper justo.</a>
</h2>
<p>
BY <a href="javascript:;" class="author">METRO LAB</a> | MONDAY, 12:30 PM
</p>
<img alt="" src="img/blog/blog1-big.jpg">
<p> Nam sed arcu non tellus fringilla fringilla ut vel ipsum. Aliquam ac magna metus. Nam sed arcu non tellus fringilla fringilla ut vel ipsum. Aliquam ac magna metus. Nam sed arcu non tellus fringilla fringilla ut vel ipsum. Aliquam ac magna metus. Nam sed arcu non tellus fringilla fringilla ut vel ipsum. Aliquam ac magna metus. Nam sed arcu non tellus fringilla fringilla ut vel ipsum. Aliquam ac magna metus. Nam sed arcu non tellus fringilla fring. Aliquam ac... <a href="blog_details.html" class="read-more">Continue Reading</a> </p>
</div>
</div>
<div class="custom-pagination pagination-centered">
<ul>
<li><a href="javascript:;">«</a></li>
<li><a href="javascript:;">1</a></li>
<li><a href="javascript:;">2</a></li>
<li><a href="javascript:;">3</a></li>
<li><a href="javascript:;">4</a></li>
<li><a href="javascript:;">»</a></li>
</ul>
</div>
</div>
</div>
<div class="span4">
<div class="blog-side-bar blue-box">
<h2> <i class=" icon-tasks"></i> category</h2>
<ul>
<li>
<a href="#">
<i class=" icon-umbrella"></i>
<span>Animal</span>
</a>
</li>
<li>
<a href="#">
<i class=" icon-trophy"></i>
<span>Landscape</span>
</a>
</li>
<li>
<a href="#">
<i class=" icon-plane"></i>
<span>Potrait</span>
</a>
</li>
<li>
<a href="#">
<i class=" icon-pushpin"></i>
<span>Wild Life</span>
</a>
</li>
<li>
<a href="#">
<i class=" icon-beaker"></i>
<span>Video</span>
</a>
</li>
<li>
<a href="#">
<i class=" icon-bullhorn"></i>
<span>Nature</span>
</a>
</li>
</ul>
</div>
<div class="blog-side-bar green-box">
<h2> <i class=" icon-comments-alt"></i> Latest blog</h2>
<div class="space20"></div>
<div class="row-fluid">
<div class="green-box-blog">
<div class="span3">
<img alt="" src="img/blog/blog-thumb-3.jpg">
</div>
<div class="span9">
<h5>
<a href="javascript:;">02 MAY 2013</a>
</h5>
<p>Nam sed arcu non tellus
fringilla fringilla ut vel ipsum.</p>
</div>
</div>
</div>
<div class="space10"></div>
<div class="row-fluid">
<div class="green-box-blog">
<div class="span3">
<img alt="" src="img/blog/blog-thumb-2.jpg">
</div>
<div class="span9">
<h5>
<a href="javascript:;">02 MAY 2013</a>
</h5>
<p>Nam sed arcu non tellus
fringilla fringilla ut vel ipsum.</p>
</div>
</div>
</div>
<div class="space10"></div>
<div class="row-fluid">
<div class="green-box-blog">
<div class="span3">
<img alt="" src="img/blog/blog-thumb-3.jpg">
</div>
<div class="span9">
<h5>
<a href="javascript:;">02 MAY 2013</a>
</h5>
<p>Nam sed arcu non tellus
fringilla fringilla ut vel ipsum.</p>
</div>
</div>
</div>
<div class="space10"></div>
</div>
<div class="blog-side-bar red-box">
<h2> <i class=" icon-tags"></i> popular tags</h2>
<ul class="unstyled tag">
<li><a href="#">Metrolab Admin</a></li>
<li><a href="#"> Dashboard Theme</a></li>
<li><a href="#"> Metro</a></li>
<li><a href="#"> Control Panel</a></li>
<li><a href="#"> UI</a></li>
<li><a href="#"> Web Design</a></li>
<li><a href="#"> UIX</a></li>
<li><a href="#"> Blog</a></li>
<li><a href="#">Metrolab Admin</a></li>
<li><a href="#"> Dashboard Theme</a></li>
</ul>
</div>
<div class="blog-side-bar orange-box">
<h2> <i class=" icon-tasks"></i> Archive</h2>
<ul>
<li>
<a href="#">
<span class="large">OCT</span>
<span>2012</span>
</a>
</li>
<li>
<a href="#">
<span class="large">Nov</span>
<span>2012</span>
</a>
</li>
<li>
<a href="#">
<span class="large">dec</span>
<span>2012</span>
</a>
</li>
<li>
<a href="#">
<span class="large">jan</span>
<span>2013</span>
</a>
</li>
<li>
<a href="#">
<span class="large">feb</span>
<span>2013</span>
</a>
</li>
<li>
<a href="#">
<span class="large">mar</span>
<span>2013</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- END BLOG PORTLET-->
</div>
</div>
<!-- END PAGE CONTENT-->
</div>
<!-- END PAGE CONTAINER-->
</div>
<!-- END PAGE -->
</div>
<!-- END CONTAINER -->
<!-- BEGIN FOOTER -->
<div id="footer">
2013 &copy; Metro Lab Dashboard.
</div>
<!-- END FOOTER -->
<!-- BEGIN JAVASCRIPTS -->
<!-- Load javascripts at bottom, this will reduce page load time -->
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.nicescroll.js" type="text/javascript"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<!-- ie8 fixes -->
<!--[if lt IE 9]>
<script src="js/excanvas.js"></script>
<script src="js/respond.js"></script>
<![endif]-->
<!--common script for all pages-->
<script src="js/common-scripts.js"></script>
<!-- END JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>