zuel-itsm-3.0.2/assets/views/pages_timeline.html

<!-- start: PAGE TITLE -->
<section id="page-title">
	<div class="row">
		<div class="col-sm-8">
			<h1 class="mainTitle" translate="sidebar.nav.pages.TIMELINE">{{ mainTitle }}</h1>
			<span class="mainDescription">Timeline is used to show chronological events in a clear and effective way</span>
		</div>
		<div ncy-breadcrumb></div>
	</div>
</section>
<!-- end: PAGE TITLE -->
<!-- start: TIMELINE -->
<div class="container-fluid container-fullw bg-white">
	<div class="row">
		<div class="col-md-12">
			<div id="timeline">
				<div class="timeline">
					<div class="spine"></div>
					<div class="date_separator" id="november">
						<span>NOVEMBER 2014</span>
					</div>
					<ul class="columns">
						<li>
							<div class="timeline_element partition-white">
								<div class="timeline_date">
									<div>
										<div class="inline-block">
											<span class="day text-bold">02</span>
										</div>
										<div class="inline-block">
											<span class="block week-day text-extra-large">Wensdey</span>
											<span class="block month text-large text-light">november 2014</span>
										</div>
									</div>
								</div>
								<div class="timeline_title">
									<i class="fa fa-check fa-2x pull-left fa-border"></i>
									<h4 class="light-text no-margin padding-5">Appointment</h4>
								</div>
								<div class="timeline_content">
									<b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
								</div>
								<div class="readmore">
									<a href="#" class="btn btn-primary btn-o btn-wide">
										Read More <i class="fa fa-arrow-circle-right"></i>
									</a>
								</div>
							</div>
						</li>
						<li>
							<div class="timeline_element partition-white">
								<div class="timeline_date">
									<div>
										<div class="inline-block">
											<span class="day text-bold">05</span>
										</div>
										<div class="inline-block">
											<span class="block week-day text-extra-large">Wensdey</span>
											<span class="block month text-large text-light">november 2014</span>
										</div>
									</div>
								</div>
								<div class="timeline_title">
									<i class="fa fa-map-marker fa-2x pull-left fa-border"></i>
									<h4 class="light-text no-margin padding-5">Appointment</h4>
								</div>
								<div class="timeline_content">
									<div class="row">
										<div class="col-md-3 col-xs-4"><img src="assets/images/photodune-4043508-3d-modern-office-room-l.jpg" alt="offce" class="img-responsive"/>
										</div>
										<div class="col-md-9 col-xs-8">
											<b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
										</div>
									</div>
								</div>
								<div class="readmore">
									<a href="#" class="btn btn-primary">
										Read More <i class="fa fa-arrow-circle-right"></i>
									</a>
								</div>
							</div>
						</li>
						<li>
							<div class="timeline_element partition-primary">
								<div class="timeline_date">
									<div>
										<div class="inline-block">
											<span class="day text-bold">12</span>
										</div>
										<div class="inline-block">
											<span class="block week-day text-extra-large">Wensdey</span>
											<span class="block month text-large text-white-transparent">november 2014</span>
										</div>
									</div>
								</div>
								<div class="timeline_title">
									<i class="fa fa-check-circle-o fa-2x pull-left fa-border"></i>
									<h4 class="text-white no-margin padding-5">Test Solution</h4>
								</div>
								<div class="timeline_content">
									<p>
										<b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
									</p>
									<map center="-25.363882,131.044922" zoom="4">
										<marker position="-25.363882,131.044922" title="Hello World!"></marker>
									</map>
								</div>
								<div class="readmore">
									<a href="#" class="btn btn-transparent-white">
										Read More <i class="fa fa-arrow-circle-right"></i>
									</a>
								</div>
							</div>
						</li>
					</ul>
					<div class="date_separator" id="october">
						<span>OCTOBER 2014</span>
					</div>
					<ul class="columns">
						<li>
							<div class="timeline_element partition-white">
								<div class="timeline_date">
									<div>
										<div class="inline-block">
											<span class="day text-bold">05</span>
										</div>
										<div class="inline-block">
											<span class="block week-day text-extra-large">Wensdey</span>
											<span class="block month text-large text-light">november 2014</span>
										</div>
									</div>
								</div>
								<div class="timeline_title">
									<i class="fa fa-map-marker fa-2x pull-left fa-border"></i>
									<h4 class="light-text no-margin padding-5">Appointment</h4>
								</div>
								<div class="timeline_content">
									<div class="row">
										<div class="col-md-3 col-xs-4"><img src="assets/images/photodune-4043508-3d-modern-office-room-l.jpg" alt="offce" class="img-responsive"/>
										</div>
										<div class="col-md-9 col-xs-8">
											<b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
										</div>
									</div>
								</div>
								<div class="readmore">
									<a href="#" class="btn btn-light-blue">
										Read More <i class="fa fa-arrow-circle-right"></i>
									</a>
								</div>
							</div>
						</li>
						<li>
							<div class="timeline_element partition-purple">
								<div class="timeline_date">
									<div>
										<div class="inline-block">
											<span class="day text-bold">05</span>
										</div>
										<div class="inline-block">
											<span class="block week-day text-extra-large">Wensdey</span>
											<span class="block month text-large text-white-transparent">november 2014</span>
										</div>
									</div>
								</div>
								<div class="timeline_title">
									<i class="fa fa-map-marker fa-2x pull-left fa-border"></i>
									<h4 class="text-white no-margin padding-5">Appointment</h4>
								</div>
								<div class="timeline_content">
									<div class="row">
										<div class="col-md-3 col-xs-4"><img src="assets/images/photodune-4043508-3d-modern-office-room-l.jpg" alt="offce" class="img-responsive"/>
										</div>
										<div class="col-md-9 col-xs-8">
											<b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
										</div>
									</div>
								</div>
								<div class="readmore">
									<a href="#" class="btn btn-transparent-white">
										Read More <i class="fa fa-arrow-circle-right"></i>
									</a>
								</div>
							</div>
						</li>
						<li>
							<div class="timeline_element partition-green">
								<div class="timeline_date">
									<div>
										<div class="inline-block">
											<span class="day text-bold">05</span>
										</div>
										<div class="inline-block">
											<span class="block week-day text-extra-large">Wensdey</span>
											<span class="block month text-large text-white-transparent">november 2014</span>
										</div>
									</div>
								</div>
								<div class="timeline_content">
									<b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
								</div>
								<div class="readmore">
									<a href="#" class="btn btn-dark-green">
										Read More <i class="fa fa-arrow-circle-right"></i>
									</a>
								</div>
							</div>
						</li>
						<li>
							<div class="timeline_element partition-white">
								<div class="timeline_date">
									<div>
										<div class="inline-block">
											<span class="day text-bold">05</span>
										</div>
										<div class="inline-block">
											<span class="block week-day text-extra-large">Wensdey</span>
											<span class="block month text-large text-light">november 2014</span>
										</div>
									</div>
								</div>
								<div class="timeline_content">
									<b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
								</div>
								<div class="readmore">
									<a href="#" class="btn btn-light-blue">
										Read More <i class="fa fa-arrow-circle-right"></i>
									</a>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- start: TIMELINE -->