{% layout 'layout' %}
{% block title %}Blog List{% endblock %}

{% block breadcrumb %}
<li><a href="index.html">Home</a></li>
<li>App Templates</li>
<li>Blog</li>
<li class="active"><a href="app-blogfront-list.html">Blog List</a></li>
{% endblock %}

{% block styles %}{% endblock %}
{% block scripts %}{% endblock %}

{% block content %} 
<div class="row blog">
	<div class="col-md-8">

		<div class="featured-post">
			
			<div class="featured-body">
				<h1><a href="#">Disconnect Completely During "Quiet Hours" to Boost Your Productivity</a></h1>
				<div class="featured-photo">
					<a href=""><img src="{{'demo/stockphoto/blog_04.jpg' | asset_url | img_loc }}" class="img-responsive"/></a>
				</div>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, minima modi nesciunt dolores quod laboriosam ab porro autem vitae aspernatur. Unde, non. Repudiandae aspernatur nesciunt explicabo vel, quidem, ipsum perspiciatis ipsa nemo fuga. Porro sunt fugiat ullam quia, soluta aliquid debitis delectus nemo velit a eum quo necessitatibus inventore alias culpa distinctio cupiditate optio vero sit iusto fuga cumque magnam recusandae dolorem. Est doloribus, sint recusandae mollitia? Vitae dolore minima voluptatibus, quis voluptates nam delectus fugit. Ipsa est quasi cum sapiente qui. Non laborum voluptatum, aperiam eos dicta. Incidunt in atque repellendus, sequi dolores voluptate! Quia sapiente sint, natus nobis.</p>
			</div>
			<div class="featured-footer">
				<div class="post-info-container">
					<ul class="post-info list-unstlyed list-inline">
						<li><i class="fa fa-user"></i>by <a href="">Jonathan Q.</a></li>
						<li><i class="fa fa-clock-o"></i>7/14/2014</li>
						<li><i class="fa fa-comment-o"></i><a href="">32 Comments</a></li></li>
					</ul>
				</div>
				<div class="post-more">
					<a href="#" class="btn btn-primary-alt btn-sm">Read More</a>
				</div>
			</div>
		</div>

		<div class="featured-post">
			
			<div class="featured-body">
				<h1><a href="#">Why Great Ideas Always Come In the Shower (and How to Harness Them)</a></h1>
				<div class="featured-photo">
					<a href=""><img src="{{'demo/stockphoto/blog_01.jpg' | asset_url | img_loc }}" class="img-responsive"/></a>
				</div>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, minima modi nesciunt dolores quod laboriosam ab porro autem vitae aspernatur. Unde, non. Repudiandae aspernatur nesciunt explicabo vel, quidem, ipsum perspiciatis ipsa nemo fuga. Porro sunt fugiat ullam quia, soluta aliquid debitis delectus nemo velit a eum quo necessitatibus inventore alias culpa distinctio cupiditate optio vero sit iusto fuga cumque magnam recusandae dolorem. Est doloribus, sint recusandae mollitia? Vitae dolore minima voluptatibus, quis voluptates nam delectus fugit. Ipsa est quasi cum sapiente qui. Non laborum voluptatum, aperiam eos dicta. Incidunt in atque repellendus, sequi dolores voluptate! Quia sapiente sint, natus nobis.</p>
			</div>
			<div class="featured-footer">
				<div class="post-info-container">
					<ul class="post-info list-unstlyed list-inline">
						<li><i class="fa fa-user"></i>by <a href="">Jonathan Q.</a></li>
						<li><i class="fa fa-clock-o"></i>7/14/2014</li>
						<li><i class="fa fa-comment-o"></i><a href="">32 Comments</a></li></li>
					</ul>
				</div>
				<div class="post-more">
					<a href="#" class="btn btn-primary-alt btn-sm">Read More</a>
				</div>
			</div>
		</div>

		<div class="featured-post">
			
			<div class="featured-body">
				<h1><a href="#">Use This Flowchart to Identify What Type of Procrastinator You Are</a></h1>
				<div class="featured-photo">
					<iframe width="100%" height="120" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/53595243&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>
				</div>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, minima modi nesciunt dolores quod laboriosam ab porro autem vitae aspernatur. Unde, non. Repudiandae aspernatur nesciunt explicabo vel, quidem, ipsum perspiciatis ipsa nemo fuga. Porro sunt fugiat ullam quia, soluta aliquid debitis delectus nemo velit a eum quo necessitatibus inventore alias culpa distinctio cupiditate optio vero sit iusto fuga cumque magnam recusandae dolorem. Est doloribus, sint recusandae mollitia? Vitae dolore minima voluptatibus, quis voluptates nam delectus fugit. Ipsa est quasi cum sapiente qui. Non laborum voluptatum, aperiam eos dicta. Incidunt in atque repellendus, sequi dolores voluptate! Quia sapiente sint, natus nobis.</p>
			</div>
			<div class="featured-footer">
				<div class="post-info-container">
					<ul class="post-info list-unstlyed list-inline">
						<li><i class="fa fa-user"></i>by <a href="">Jonathan Q.</a></li>
						<li><i class="fa fa-clock-o"></i>7/14/2014</li>
						<li><i class="fa fa-comment-o"></i><a href="">32 Comments</a></li></li>
					</ul>
				</div>
				<div class="post-more">
					<a href="#" class="btn btn-primary-alt btn-sm">Read More</a>
				</div>
			</div>
		</div>

		<div class="featured-post">
			
			<div class="featured-body">
				<h1><a href="#">How to Give Yourself a Career Tune-Up</a></h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, minima modi nesciunt dolores quod laboriosam ab porro autem vitae aspernatur. Unde, non. Repudiandae aspernatur nesciunt explicabo vel, quidem, ipsum perspiciatis ipsa nemo fuga. Porro sunt fugiat ullam quia, soluta aliquid debitis delectus nemo velit a eum quo necessitatibus inventore alias culpa distinctio cupiditate optio vero sit iusto fuga cumque magnam recusandae dolorem. Est doloribus, sint recusandae mollitia? Vitae dolore minima voluptatibus, quis voluptates nam delectus fugit. Ipsa est quasi cum sapiente qui. Non laborum voluptatum, aperiam eos dicta. Incidunt in atque repellendus, sequi dolores voluptate! Quia sapiente sint, natus nobis.</p>
			</div>
			<div class="featured-footer">
				<div class="post-info-container">
					<ul class="post-info list-unstlyed list-inline">
						<li><i class="fa fa-user"></i>by <a href="">Jonathan Q.</a></li>
						<li><i class="fa fa-clock-o"></i>7/14/2014</li>
						<li><i class="fa fa-comment-o"></i><a href="">32 Comments</a></li></li>
					</ul>
				</div>
				<div class="post-more">
					<a href="#" class="btn btn-primary-alt btn-sm">Read More</a>
				</div>
			</div>
		</div>

		<div class="clearfix">
			<ul class="pagination mt0 mb20 pull-right">
				<li class="disabled"><a href="#"><i class="fa fa-angle-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><a href="#">5</a></li>
				<li><a href="#"><i class="fa fa-angle-right"></i></a></li>
			</ul>
		</div>



	</div>
	<div class="col-md-4">
		<div class="list-group"> 
			<a href="#" class="list-group-item"><span class="badge badge-sky">201</span>Photos </a> 
			<a href="#" class="list-group-item"><span class="badge badge-grape">5021</span>Cars </a> 
			<a href="#" class="list-group-item"><span class="badge badge-info">14</span>Clothes </a> 
			<a href="#" class="list-group-item"><span class="badge badge-inverse">20</span>Music </a> 
			<a href="#" class="list-group-item"><span class="badge badge-primary">14</span>Movies </a> 
			<a href="#" class="list-group-item"><span class="badge badge-midnightblue">30</span>Education </a> 
		</div>

		

		<div class="panel panel-default">
			<div class="panel-heading">
				<h2>Tag Cloud</h2>
			</div>
			<div class="panel-body tag-cloud">
				<a href=""><span class="label label-alizarin">Cars</span></a>
				<a href=""><span class="label label-alizarin">Gadgets</span></a>
				<a href=""><span class="label label-alizarin">Music</span></a>
				<a href=""><span class="label label-alizarin">Books</span></a>
				<a href=""><span class="label label-alizarin">Movies</span></a>
				<a href=""><span class="label label-alizarin">Clothes</span></a>
				<a href=""><span class="label label-alizarin">Laptops</span></a>
				<a href=""><span class="label label-alizarin">Drinks</span></a>
				<a href=""><span class="label label-alizarin">Shoes</span></a>
				<a href=""><span class="label label-alizarin">Documentaries</span></a>
				<a href=""><span class="label label-alizarin">Restaruants</span></a>
				<a href=""><span class="label label-alizarin">Cities</span></a>
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-heading">
				<h2>Popular Posts</h2>
			</div>
			<div class="panel-body panel-no-padding">
				
				<div class="blog-post-list">
					<div class="media">
						<a class="pull-left" href="#">
							<img class="media-object" src="assets/demo/stockphoto/blog_06.jpg">
						</a>
						<div class="media-body">
							<a href="" class="post-title">Ex has option accusata consectetuer</a>
							<p>His ludus inimicus ea, est purto pericula theophrastus ut.</p>
						</div>
					</div>
					<div class="media">
						<a class="pull-left" href="#">
							<img class="media-object" src="assets/demo/stockphoto/blog_09.jpg">
						</a>
						<div class="media-body">
							<a href="" class="post-title">Ad eos maluisset inciderint inciderint eum</a>
							<p>Mea ut possit commodo feugait, vim omnis malis te, ex elitr putent impetus his.</p>
							
						</div>
					</div>
					<div class="media">
						<a class="pull-left" href="#">
							<img class="media-object" src="assets/demo/stockphoto/blog_08.jpg">
						</a>
						<div class="media-body">
							<a href="" class="post-title">Ut mea dicit altera animal</a>
							<p>Mea nostrum luptatum id, ei adhuc choro eum, ex melius fastidii usu.</p>
							
						</div>
					</div>
				</div>
				
			</div>
		</div>

		<div class="tab-container tab-default">
			<ul class="nav nav-tabs"><li class="dropdown pull-right tabdrop hide"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-angle-down"></i> </a><ul class="dropdown-menu"></ul></li>
				<li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
				<li class=""><a href="#tab2" data-toggle="tab">Tab 2</a></li>
			</ul>
			<div class="tab-content">
				<div class="tab-pane active" id="tab1"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores in eveniet sapiente error fuga tenetur ex ea dignissimos voluptas ab molestiae eos totam quo dolorem maxime illo neque quia itaque. Asperiores in eveniet sapiente error fuga tenetur ex ea dignissimos voluptas ab molestiae eos totam quo dolorem maxime illo neque quia itaque.</p> </div>
				<div class="tab-pane" id="tab2"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores porro eveniet debitis quas sed harum nobis libero voluptatibus dolorum odio at veniam aut id corrupti hic esse quisquam fugiat. Asperiores in eveniet sapiente error fuga tenetur ex ea dignissimos voluptas ab molestiae eos totam quo dolorem maxime illo neque quia itaque.</p></div>
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-heading">
				<h2>Recent Posts</h2>
			</div>
			<div class="panel-body panel-no-padding">
				<div class="blog-post-list">
					<div class="media">
						<a class="pull-left" href="#">
							<img class="media-object" src="assets/demo/stockphoto/blog_06.jpg">
						</a>
						<div class="media-body">
							<a href="" class="post-title">Ex has option accusata consectetuer</a>
							<p>His ludus inimicus ea, est purto pericula theophrastus ut.</p>
						</div>
					</div>
					<div class="media">
						<a class="pull-left" href="#">
							<img class="media-object" src="assets/demo/stockphoto/blog_09.jpg">
						</a>
						<div class="media-body">
							<a href="" class="post-title">Ad eos maluisset inciderint inciderint eum</a>
							<p>Mea ut possit commodo feugait, vim omnis malis te, ex elitr putent impetus his.</p>
							
						</div>
					</div>
					<div class="media">
						<a class="pull-left" href="#">
							<img class="media-object" src="assets/demo/stockphoto/blog_08.jpg">
						</a>
						<div class="media-body">
							<a href="" class="post-title">Ut mea dicit altera animal</a>
							<p>Mea nostrum luptatum id, ei adhuc choro eum, ex melius fastidii usu.</p>
							
						</div>
					</div>
				</div>
			</div>
		</div>

		

		<div class="panel panel-default">
			<div class="panel-heading">
				<h2>Join Newsletter</h2>
			</div>
			<div class="panel-body">
				<p class="mb20">Sign up for our daily newsletter</p>
				<div class="input-group">
					<input type="text" class="form-control" placeholder="">
					
					<span class="input-group-btn">
						
						<a class="btn btn-default" href="#">Sign up!</a>
					</span>
				</div>
			</div>
		</div>

	</div>
</div>
{% endblock %}
