{% layout 'layout' %}
{% block title %}Page{% 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-page.html">Page</a></li>
{% endblock %}

{% block styles %}
{% endblock %}

{% block scripts %}
{% endblock %}

{% block content %} 
	<div class="blog">
		<div class="row">
			<div class="col-md-8">
				<div class="panel">
					<div class="panel-body">
						<h1><a href="#">Disconnect Completely During "Quiet Hours" to Boost Your Productivity</a></h1>
						<div class="post-info-container">
							<ul class="list-inline list-unstlyed post-info">
								<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>
						
						<img src="{{'demo/stockphoto/blog_05_post.jpg' | asset_url | img_loc }}" alt="" class="mb-lg img-rounded img-responsive">
		
						<p>Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla nunc dui, tristique in semper vel, congue sed ligula. Nam dolor ligula, faucibus id sodales in, auctor fringilla libero. Pellentesque pellentesque tempor tellus eget hendrerit. Morbi id aliquam ligula. Aliquam id dui sem. Proin rhoncus consequat nisl, eu ornare mauris tincidunt vitae. Vestibulum sodales ante a purus volutpat euismod. Proin sodales quam nec ante sollicitudin lacinia. Ut egestas bibendum tempor. Morbi non nibh sit amet ligula blandit ullamcorper in nec risus. Pellentesque fringilla diam faucibus tortor bibendum vulputate. Etiam turpis urna, rhoncus et mattis ut, dapibus eu nunc. Nunc sed aliquet nisi. Nullam ut magna non lacus adipiscing volutpat. Aenean odio mauris, consectetur quis consequat quis, blandit a nunc. Sed orci erat, placerat ac interdum ut, suscipit eu augue. Nunc vitae mi tortor. Ut vel justo quis lectus elementum ullamcorper volutpat vel libero.</p>
		
						<p>Proin dictum lobortis justo at pretium. Nunc malesuada ante sit amet purus ornare pulvinar. Donec suscipit dignissim ipsum at euismod. Curabitur malesuada lorem sed metus adipiscing in vehicula quam commodo. Sed porttitor elementum elementum. Proin eu ligula eget leo consectetur sodales et non mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		
						<blockquote>
			                <h3>"There is only one thing in the world worse than being talked about, and that is not being talked about."</h3>
			                <small>Oscar Wilde in <cite title="Source Title">The Picture of Dorian Grey</cite></small>
			            </blockquote>
		
			            <p>Proin dictum lobortis justo at pretium. Nunc malesuada ante sit amet purus ornare pulvinar. Donec suscipit dignissim ipsum at euismod. Curabitur malesuada lorem sed metus adipiscing in vehicula quam commodo. Sed porttitor elementum elementum. Proin eu ligula eget leo consectetur sodales et non mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		
						<p>Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut. Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc. Vivamus gravida vehicula arcu, vitae vulputate augue lacinia faucibus.</p>
		
						<p>Ut porttitor euismod cursus. Mauris suscipit, turpis ut dapibus rhoncus, odio erat egestas orci, in sollicitudin enim erat id est. Sed auctor gravida arcu, nec fringilla orci aliquet ut. Nullam eu pretium purus. Maecenas fermentum posuere sem vel posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ornare convallis lectus a faucibus. Praesent et urna turpis. Fusce tincidunt augue in velit tincidunt sed tempor felis porta. Nunc sodales, metus ut vestibulum ornare, est magna laoreet lectus, ut adipiscing massa odio sed turpis. In nec lorem porttitor urna consequat sagittis. Nullam eget elit ante. Pellentesque justo urna, semper nec faucibus sit amet, aliquam at mi. Maecenas eget diam nec mi dignissim pharetra.</p>
					</div>
				</div>
				
				<div class="well share-story">
					<div class="text-center">
						<a href="#" class="btn btn-social btn-facebook"><i class="fa fa-facebook"></i></a>
						<a href="#" class="btn btn-social btn-twitter"><i class="fa fa-twitter"></i></a>
						<a href="#" class="btn btn-social btn-reddit"><i class="fa fa-reddit"></i></a>
						<a href="#" class="btn btn-social btn-linkedin"><i class="fa fa-linkedin"></i></a>
						<a href="#" class="btn btn-social btn-googleplus"><i class="fa fa-google-plus"></i></a>
					</div>
				</div>
		
		
				<div class="panel">
					<div class="panel-body">
						<h3 class="mt0 mb20">Comments</h3>
		
						<ul class="media-list comments">
							<li class="media">
								<a class="pull-left" href="#">
									<img class="media-object" src="assets/demo/avatar/avatar_02.png" alt="">
								</a>
								<div class="media-body">
									<h5 class="media-heading"><a href="#" class="person">Jeremy Potter</a></h5>
									<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
									<p><small class="time">5 days ago <a href="#" class="reply">Reply</a></small></p>
									
									<!-- Nested media object -->
									<div class="media">
										<a class="pull-left" href="#">
											<img class="media-object" src="assets/demo/avatar/avatar_07.png" alt="">
										</a>
										<div class="media-body">
											<h5 class="media-heading"><a href="#" class="person">Dominic Mckinsey</a></h5>
											<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
											<p><small class="time">3 days ago <a href="#" class="reply">Reply</a></small></p>
											
											<!-- Nested media object -->
											<div class="media">
												<a class="pull-left" href="#">
													<img class="media-object" src="assets/demo/avatar/avatar_03.png" alt="">
												</a>
												<div class="media-body">
													<h5 class="media-heading"><a href="#" class="person">Lucas Threet</a></h5>
													<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
													<p><small class="time">15 hours ago <a href="#" class="reply">Reply</a></small></p>
												</div>
											</div>
										</div>
									</div>
									<!-- Nested media object -->
									<div class="media">
										<a class="pull-left" href="#">
											<img class="media-object" src="assets/demo/avatar/avatar_04.png" alt="">
										</a>
										<div class="media-body">
											<h5 class="media-heading"><a href="#" class="person">Eric Jackson</a></h5>
											<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
											<p><small class="time">7 hours ago <a href="#" class="reply">Reply</a></small></p>
										</div>
									</div>
								</div>
							</li>
						</ul>
		
						<hr class="outsider">
		
						<h3 class="mt0 mb20">Leave a Comment</h3>
						
						<div class="form-group mb0">
							<form class="form-horizontal">
								<div class="form-group">
									<label for="name" class="col-sm-3 control-label">Name</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="name" placeholder="Name">
									</div>
								</div>
								<div class="form-group">
									<label for="email" class="col-sm-3 control-label">Email Address</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="email" placeholder="email@address.com">
									</div>
								</div>
								<div class="form-group">
									<label for="website" class="col-sm-3 control-label">Website</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="website" placeholder="http://">
									</div>
								</div>
								<div class="form-group">
									<label for="comment" class="col-sm-3 control-label">Comment</label>
									<div class="col-sm-9">
										<textarea name="comment" id="" cols="30" rows="5" class="form-control fullscreen"></textarea>
									</div>
								</div>
								<div class="form-group mb0">
									<div class="col-sm-12">
										<div class="pull-right">
											<button class="btn btn-primary">Submit Comment</button>
											<button class="btn btn-default">Cancel</button>
										</div>
									</div>
								</div>
							</form>
						</div>
					</div>
				</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">
			<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>Related 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">Let Me Validate That For You (LMVTFY)</a>
							<p>If you've been following the Bootstrap issue tracker lately, you might have noticed the launch of our new bot, @twbs-lmvtfy, on June 15th.</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">Bootstrap now available via npm</a>
							<p>It's taken us awhile, but we've finally published Bootstrap on npm. We've taken over the existing bootstrap package and just published the latest release, v3.1.1.</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">Ratchet 2.0.1 released</a>
							<p>Today we're pumped to release Ratchet 2.0.1. This release focuses on CSS bug fixes and further improvements to our docs and build tools.</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>Join Newsletter</h2>
			</div>
			<div class="panel-body">
				<p class="mb20">Sign up for our daily newsletter</p>
				<!-- <div class="form-horizontal">
					<div class="form-group">
						<div class="col-xs-8"><input type="text" class="form-control"></div>
						<div class="col-xs-4"><buttn class="btn btn-block btn-green">Sign Up!</buttn></div>
					</div>
				</div> -->
				<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>
	</div>
{% endblock %}
