754 lines
42 KiB
HTML
754 lines
42 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]-->
|
|
<!-- BEGIN HEAD -->
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Blog Details</title>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
|
<meta content="" name="description" />
|
|
<meta content="" name="author" />
|
|
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
|
|
<link href="assets/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
|
|
<link href="assets/bootstrap/css/bootstrap-fileupload.css" rel="stylesheet" />
|
|
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
|
|
<link href="css/style.css" rel="stylesheet" />
|
|
<link href="css/style-responsive.css" rel="stylesheet" />
|
|
<link href="css/style-default.css" rel="stylesheet" id="style_color" />
|
|
|
|
</head>
|
|
<!-- END HEAD -->
|
|
<!-- BEGIN BODY -->
|
|
<body class="fixed-top">
|
|
<!-- BEGIN HEADER -->
|
|
<div id="header" class="navbar navbar-inverse navbar-fixed-top">
|
|
<!-- BEGIN TOP NAVIGATION BAR -->
|
|
<div class="navbar-inner">
|
|
<div class="container-fluid">
|
|
<!--BEGIN SIDEBAR TOGGLE-->
|
|
<div class="sidebar-toggle-box hidden-phone">
|
|
<div class="icon-reorder"></div>
|
|
</div>
|
|
<!--END SIDEBAR TOGGLE-->
|
|
<!-- BEGIN LOGO -->
|
|
<a class="brand" href="index.html">
|
|
<img src="img/logo.png" alt="Metro Lab" />
|
|
</a>
|
|
<!-- END LOGO -->
|
|
<!-- BEGIN RESPONSIVE MENU TOGGLER -->
|
|
<a class="btn btn-navbar collapsed" id="main_menu_trigger" data-toggle="collapse" data-target=".nav-collapse">
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="arrow"></span>
|
|
</a>
|
|
<!-- END RESPONSIVE MENU TOGGLER -->
|
|
<div id="top_menu" class="nav notify-row">
|
|
<!-- BEGIN NOTIFICATION -->
|
|
<ul class="nav top-menu">
|
|
<!-- BEGIN SETTINGS -->
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
|
<i class="icon-tasks"></i>
|
|
<span class="badge badge-important">6</span>
|
|
</a>
|
|
<ul class="dropdown-menu extended tasks-bar">
|
|
<li>
|
|
<p>You have 6 pending tasks</p>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<div class="task-info">
|
|
<div class="desc">Dashboard v1.3</div>
|
|
<div class="percent">44%</div>
|
|
</div>
|
|
<div class="progress progress-striped active no-margin-bot">
|
|
<div class="bar" style="width: 44%;"></div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<div class="task-info">
|
|
<div class="desc">Database Update</div>
|
|
<div class="percent">65%</div>
|
|
</div>
|
|
<div class="progress progress-striped progress-success active no-margin-bot">
|
|
<div class="bar" style="width: 65%;"></div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<div class="task-info">
|
|
<div class="desc">Iphone Development</div>
|
|
<div class="percent">87%</div>
|
|
</div>
|
|
<div class="progress progress-striped progress-info active no-margin-bot">
|
|
<div class="bar" style="width: 87%;"></div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<div class="task-info">
|
|
<div class="desc">Mobile App</div>
|
|
<div class="percent">33%</div>
|
|
</div>
|
|
<div class="progress progress-striped progress-warning active no-margin-bot">
|
|
<div class="bar" style="width: 33%;"></div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<div class="task-info">
|
|
<div class="desc">Dashboard v1.3</div>
|
|
<div class="percent">90%</div>
|
|
</div>
|
|
<div class="progress progress-striped progress-danger active no-margin-bot">
|
|
<div class="bar" style="width: 90%;"></div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="external">
|
|
<a href="#">See All Tasks</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<!-- END SETTINGS -->
|
|
<!-- BEGIN INBOX DROPDOWN -->
|
|
<li class="dropdown" id="header_inbox_bar">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
|
<i class="icon-envelope-alt"></i>
|
|
<span class="badge badge-important">5</span>
|
|
</a>
|
|
<ul class="dropdown-menu extended inbox">
|
|
<li>
|
|
<p>You have 5 new messages</p>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<span class="photo"><img src="img/avatar-mini.png" alt="avatar" /></span>
|
|
<span class="subject">
|
|
<span class="from">Jonathan Smith</span>
|
|
<span class="time">Just now</span>
|
|
</span>
|
|
<span class="message">
|
|
Hello, this is an example msg.
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<span class="photo"><img src="img/avatar-mini.png" alt="avatar" /></span>
|
|
<span class="subject">
|
|
<span class="from">Jhon Doe</span>
|
|
<span class="time">10 mins</span>
|
|
</span>
|
|
<span class="message">
|
|
Hi, Jhon Doe Bhai how are you ?
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<span class="photo"><img src="img/avatar-mini.png" alt="avatar" /></span>
|
|
<span class="subject">
|
|
<span class="from">Jason Stathum</span>
|
|
<span class="time">3 hrs</span>
|
|
</span>
|
|
<span class="message">
|
|
This is awesome dashboard.
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<span class="photo"><img src="img/avatar-mini.png" alt="avatar" /></span>
|
|
<span class="subject">
|
|
<span class="from">Jondi Rose</span>
|
|
<span class="time">Just now</span>
|
|
</span>
|
|
<span class="message">
|
|
Hello, this is metrolab
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">See all messages</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<!-- END INBOX DROPDOWN -->
|
|
<!-- BEGIN NOTIFICATION DROPDOWN -->
|
|
<li class="dropdown" id="header_notification_bar">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
|
|
|
<i class="icon-bell-alt"></i>
|
|
<span class="badge badge-warning">7</span>
|
|
</a>
|
|
<ul class="dropdown-menu extended notification">
|
|
<li>
|
|
<p>You have 7 new notifications</p>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<span class="label label-important"><i class="icon-bolt"></i></span>
|
|
Server #3 overloaded.
|
|
<span class="small italic">34 mins</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<span class="label label-warning"><i class="icon-bell"></i></span>
|
|
Server #10 not respoding.
|
|
<span class="small italic">1 Hours</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<span class="label label-important"><i class="icon-bolt"></i></span>
|
|
Database overloaded 24%.
|
|
<span class="small italic">4 hrs</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<span class="label label-success"><i class="icon-plus"></i></span>
|
|
New user registered.
|
|
<span class="small italic">Just now</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<span class="label label-info"><i class="icon-bullhorn"></i></span>
|
|
Application error.
|
|
<span class="small italic">10 mins</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">See all notifications</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<!-- END NOTIFICATION DROPDOWN -->
|
|
|
|
</ul>
|
|
</div>
|
|
<!-- END NOTIFICATION -->
|
|
<div class="top-nav ">
|
|
<ul class="nav pull-right top-menu" >
|
|
<!-- BEGIN SUPPORT -->
|
|
<li class="dropdown mtop5">
|
|
|
|
<a class="dropdown-toggle element" data-placement="bottom" data-toggle="tooltip" href="#" data-original-title="Chat">
|
|
<i class="icon-comments-alt"></i>
|
|
</a>
|
|
</li>
|
|
<li class="dropdown mtop5">
|
|
<a class="dropdown-toggle element" data-placement="bottom" data-toggle="tooltip" href="#" data-original-title="Help">
|
|
<i class="icon-headphones"></i>
|
|
</a>
|
|
</li>
|
|
<!-- END SUPPORT -->
|
|
<!-- BEGIN USER LOGIN DROPDOWN -->
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
|
<img src="img/avatar1_small.jpg" alt="">
|
|
<span class="username">Jhon Doe</span>
|
|
<b class="caret"></b>
|
|
</a>
|
|
<ul class="dropdown-menu extended logout">
|
|
<li><a href="#"><i class="icon-user"></i> My Profile</a></li>
|
|
<li><a href="#"><i class="icon-cog"></i> My Settings</a></li>
|
|
<li><a href="login.html"><i class="icon-key"></i> Log Out</a></li>
|
|
</ul>
|
|
</li>
|
|
<!-- END USER LOGIN DROPDOWN -->
|
|
</ul>
|
|
<!-- END TOP NAVIGATION MENU -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END TOP NAVIGATION BAR -->
|
|
</div>
|
|
<!-- 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 Details
|
|
</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 Details
|
|
</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>
|
|
Suspendisse et mauris nisi, in semper justo.
|
|
</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... </p>
|
|
<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... </p>
|
|
<blockquote>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit posuere erat a ante.</p>
|
|
<small>Someone famous <cite title="Source Title">Source Title</cite></small>
|
|
</blockquote>
|
|
<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... </p>
|
|
<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... </p>
|
|
|
|
<div class="media">
|
|
<h3>Comments</h3>
|
|
<hr>
|
|
<a href="#" class="pull-left">
|
|
<img alt="" src="img/avatar1.jpg" class="media-object">
|
|
</a>
|
|
<div class="media-body">
|
|
<h4 class="media-heading">Jhon Doe </h4>
|
|
<span>2 hours ago | <a href="#">Reply</a></span>
|
|
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
|
<hr>
|
|
<!-- Nested media object -->
|
|
<div class="media">
|
|
<a href="#" class="pull-left">
|
|
<img alt="" src="img/avatar2.jpg" class="media-object">
|
|
</a>
|
|
<div class="media-body">
|
|
<h4 class="media-heading">Jonathan Smith </h4>
|
|
<span>6 hours ago | <a href="#">Reply</a></span>
|
|
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
|
</div>
|
|
</div>
|
|
<!--end media-->
|
|
<hr>
|
|
<div class="media">
|
|
<a href="#" class="pull-left">
|
|
<img alt="" src="img/avatar1.jpg" class="media-object">
|
|
</a>
|
|
<div class="media-body">
|
|
<h4 class="media-heading">Jhon Doe </h4>
|
|
<span>9 days ago | <a href="#">Reply</a></span>
|
|
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
|
</div>
|
|
</div>
|
|
<!--end media-->
|
|
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="media">
|
|
<a href="#" class="pull-left">
|
|
<img alt="" src="img/avatar2.jpg" class="media-object">
|
|
</a>
|
|
<div class="media-body">
|
|
<h4 class="media-heading">Jonathan Smith </h4>
|
|
<span>July 5,2013 | <a href="#">Reply</a></span>
|
|
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="post-comment">
|
|
<h3>Post Comments</h3>
|
|
<form>
|
|
<label>Name</label>
|
|
<input type="text" class="span7">
|
|
<label>Email <span class="color-red">*</span></label>
|
|
<input type="text" class="span7">
|
|
<label>Message</label>
|
|
<textarea class="span10" rows="8"></textarea>
|
|
<p><button class="btn" type="submit">Post Comment</button></p>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
</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-1.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 © 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> |