{% layout 'layout' %}
{% block title %}Timeline{% endblock %}

{% block breadcrumb %}
<li><a href="index.html">Home</a></li>
<li><a href="#">Extras</a></li>
<li class="active"><a href="extras-timeline.html">Timeline</a></li>
{% endblock %}

{% block styles %}
{% endblock %}

{% block scripts %}
{% endblock %}

{% block content %}
<div class="row">
	<div class="col-md-12">
		<ul class="timeline">
			<li class="timeline-orange">
				<div class="timeline-icon"><i class="fa fa-camera"></i></div>
				<div class="timeline-body">
					<div class="timeline-header">
						<span class="author">Posted by <a href="#">David Tennant</a></span>
						<span class="date">Monday, November 11, 2014</span>
					</div>
					<div class="timeline-content">
						<h3>Lorem Ipsum Dolor Sit Amet</h3>
						<p><img src="{{'demo/stockphoto/blog_06.jpg' | asset_url | img_loc }}" alt="" class="pull-left img-responsive" width="200px">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, officiis, molestiae, deserunt asperiores architecto ut vel repudiandae dolore inventore nesciunt necessitatibus doloribus ratione facere consectetur suscipit! Quasi, officia, veniam mollitia recusandae iure aperiam totam culpa aut nobis eveniet porro laborum quisquam non.</p>
					</div>
					<div class="timeline-footer">
						<a href="#" class="btn-link pull-left">Read Full Story</a>
					</div>
				</div>
			</li>
			<li class="timeline-warning">
				<div class="timeline-icon"><i class="fa fa-pencil"></i></div>
				<div class="timeline-body">
					<div class="timeline-header">
						<span class="author">Posted by <a href="#">David Tennant</a></span>
						<span class="date">Monday, November 21, 2014</span>
					</div>
					<div class="timeline-content">
						<h3>Consectetur Adipisicing Elit</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, officiis, molestiae, deserunt asperiores architecto ut vel repudiandae dolore inventore nesciunt necessitatibus doloribus ratione facere consectetur suscipit!</p>
					</div>
				</div>
			</li>
			<li class="timeline-warning">
				<div class="timeline-icon"><i class="fa fa-pencil"></i></div>
				<div class="timeline-body">
					<div class="timeline-header">
						<span class="author">Posted by <a href="#">David Tennant</a></span>
						<span class="date">Monday, November 21, 2014</span>
					</div>
					<div class="timeline-content">
						<h3>Consectetur Adipisicing Elit</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, officiis, molestiae, deserunt asperiores architecto ut vel repudiandae dolore inventore nesciunt necessitatibus doloribus ratione facere consectetur suscipit!</p>
					</div>
				</div>
			</li>
			<li class="timeline-warning">
				<div class="timeline-icon"><i class="fa fa-pencil"></i></div>
				<div class="timeline-body">
					<div class="timeline-header">
						<span class="author">Posted by <a href="#">David Tennant</a></span>
						<span class="date">Monday, November 21, 2014</span>
					</div>
					<div class="timeline-content">
						<h3>Consectetur Adipisicing Elit</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, officiis, molestiae, deserunt asperiores architecto ut vel repudiandae dolore inventore nesciunt necessitatibus doloribus ratione facere consectetur suscipit!</p>
					</div>
				</div>
			</li>
			<li class="timeline-success">
				<div class="timeline-icon"><i class="fa fa-video-camera"></i></div>
				<div class="timeline-body">
					<div class="timeline-header">
						<span class="author">Posted by <a href="#">David Tennant</a></span>
						<span class="date">Thursday, December 03, 2014</span>
					</div>
					<div class="timeline-content">
						<h3>Lorem Ipsum Dolor Sit Amet</h3>
						<div class="row">
							<div class="col-md-6">
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, officiis, molestiae, deserunt asperiores architecto ut vel repudiandae dolore inventore nesciunt necessitatibus doloribus ratione facere consectetur suscipit! Quasi, officia, veniam mollitia recusandae iure aperiam totam culpa aut nobis eveniet porro laborum quisquam non.</p>
								<p>Magnam quae quisquam eum quam corporis blanditiis eos officiis quaerat delectus tenetur consequatur unde ipsum iure veritatis quibusdam, inventore molestias! Totam autem eligendi consectetur, explicabo eveniet, impedit et laborum! Magnam quae quod enim porro ex, quasi est, nostrum possimus harum similique eius doloremque distinctio quam eos placeat dolorum, sequi labore! Ipsa molestias magni repudiandae aliquid beatae tenetur a sapiente optio amet, voluptates error asperiores sequi animi impedit atque dolorem illo explicabo harum?</p>
							</div>
							<div class="col-md-6">
								<div class='embed-container'><iframe src='http://www.youtube.com/embed/NhheiPTdZCw' frameborder='0' allowfullscreen></iframe></div>
							</div>
						</div>
					</div>
					<div class="timeline-footer">
						<a href="#" class="btn-link pull-left">Read Full Story</a>
					</div>
				</div>
			</li>
			<li class="timeline-midnightblue">
				<div class="timeline-icon"><i class="fa fa-pencil"></i></div>
				<div class="timeline-body">
					<div class="timeline-header">
						<span class="author">Posted by <a href="#">David Tennant</a></span>
						<span class="date">Thursday, December 12, 2014</span>
					</div>
					<div class="timeline-content">
						<h3>Consectetur Adipisicing Elit</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, officiis, molestiae, deserunt asperiores architecto ut vel repudiandae dolore inventore nesciunt necessitatibus doloribus ratione facere consectetur suscipit!</p>
					</div>
				</div>
			</li>
			<li class="timeline-midnightblue">
				<div class="timeline-icon"><i class="fa fa-pencil"></i></div>
				<div class="timeline-body">
					<div class="timeline-header">
						<span class="author">Posted by <a href="#">David Tennant</a></span>
						<span class="date">Thursday, December 12, 2014</span>
					</div>
					<div class="timeline-content">
						<h3>Consectetur Adipisicing Elit</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, officiis, molestiae, deserunt asperiores architecto ut vel repudiandae dolore inventore nesciunt necessitatibus doloribus ratione facere consectetur suscipit!</p>
					</div>
				</div>
			</li>
			<li class="timeline-primary">
				<div class="timeline-icon"><i class="fa fa-camera"></i></div>
				<div class="timeline-body">
					<div class="timeline-header">
						<span class="author">Posted by <a href="#">David Tennant</a></span>
						<span class="date">Thursday, January 03, 2015</span>
					</div>
					<div class="timeline-content">
						<h3>Lorem Ipsum Dolor Sit Amet</h3>
						<p><img src="{{'demo/stockphoto/blog_05.jpg' | asset_url | img_loc }}" alt="" class="pull-left img-responsive" width="200px">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, officiis, molestiae, deserunt asperiores architecto ut vel repudiandae dolore inventore nesciunt necessitatibus doloribus ratione facere consectetur suscipit! Quasi, officia, veniam mollitia recusandae iure aperiam totam culpa aut nobis eveniet porro laborum quisquam non.</p>
					</div>
					<div class="timeline-footer">
						<a href="#" class="btn-link pull-left">Read Full Story</a>
					</div>
				</div>
			</li>
			<li class="timeline-indigo">
				<div class="timeline-icon"><i class="fa fa-music"></i></div>
				<div class="timeline-body">
					<div class="timeline-header">
						<span class="author">Posted by <a href="#">David Tennant</a></span>
						<span class="date">Thursday, January 24, 2015</span>
					</div>
					<div class="timeline-content">
						<h3>Consectetur Adipisicing Elit</h3>
						<div class="row">
							<div class="col-md-6">
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, officiis, molestiae, deserunt asperiores architecto ut vel repudiandae dolore inventore nesciunt necessitatibus doloribus ratione facere consectetur suscipit!</p>
								<p>Magnam quae quisquam eum quam corporis blanditiis eos officiis quaerat delectus tenetur consequatur unde ipsum iure veritatis quibusdam, inventore molestias! Totam autem eligendi consectetur, explicabo eveniet, impedit et laborum! Magnam quae quod enim porro ex, quasi est, nostrum possimus harum similique eius doloremque distinctio quam eos placeat dolorum, sequi labore! Ipsa molestias magni repudiandae aliquid beatae tenetur a sapiente optio amet, voluptates error asperiores sequi animi impedit atque dolorem illo explicabo harum?</p>
							</div>
							<div class="col-md-6">
								<iframe width="100%" height="250" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/124726630&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>
						</div>
					</div>
				</div>
			</li>
		</ul>
	</div>

</div>
{% endblock %}
