CarTravel Doc

CarTravel, Best Minimal Html Template
CarTravel is a creative Html template best suitable for Studio, Agencies, Consultant, Corporate or other similar Business. Ewen will help you to make any website very easily and from this Html design.

HTML includes Less files for all of its styling.

p{ font-size: 14px; font-weight: 400; color: #000;}
h1,h2,h3,h4,h5,h6{ color: #474747; font-weight: 400; font-family: 'Lato', sans-serif;}

Slider

Using html data attributes you can adjust slider parameters.

<article class="post gallery">
	<div class="base-slider owl-carousel owl-theme">
		<div class="item">
			<img src="images/slider.jpg" alt="slider">
				<div class="post-content">
				<a href="#" class="categories">Lifesyle</a>
				<a href="#" class="title">Lorem Ipsum is simply dummy Text of the printing</a>
				<div class="post-footer">
					<span><i class="fa fa-comment" aria-hidden="true"></i>2 Comments</span>
					<span><i class="fa fa-calendar" aria-hidden="true"></i>July 11, 2017</span>
				</div>
			</div>
		</div>
		<div class="item">
			<img src="images/slider.jpg" alt="slider">
				<div class="post-content">
				<a href="#" class="categories">Lifesyle</a>
				<a href="#" class="title">Lorem Ipsum is simply dummy Text of the printing</a>
				<div class="post-footer">
					<span><i class="fa fa-comment" aria-hidden="true"></i>2 Comments</span>
					<span><i class="fa fa-calendar" aria-hidden="true"></i>July 11, 2017</span>
				</div>
			</div>
		</div>
	</div>
</article>

Latest Post

Using html data attributes you can adjust slider parameters.

<div class="container">
	<div class="row">
		<div class="col-md-4 col-sm-4 col-xs-12">
			<article class="post">
				<div class="post-images">
					<img src="images/post.jpg" alt="post">
				</div><!--wp-images-->
				<div class="post-content">
					<a href="#" class="categories">Lifesyle</a>
					<a href="#" class="title">Lorem Ipsum is simply dummy Text of the printing</a>
					<div class="post-footer">
						<span><i class="fa fa-comment" aria-hidden="true"></i>2 Comments</span>
						<span><i class="fa fa-calendar" aria-hidden="true"></i>July 11, 2017</span>
					</div><!--post-footer-->
				</div><!--wp-content-->
			</article>
		</div>
		<div class="col-md-4 col-sm-4 col-xs-12">
			<article class="post">
				<div class="post-images">
					<img src="images/post2.jpg" alt="post">
				</div><!--wp-images-->
				<div class="post-content">
					<a href="#" class="categories">Lifesyle</a>
					<a href="#" class="title">Lorem Ipsum is simply dummy Text of the printing</a>
					<div class="post-footer">
						<span><i class="fa fa-comment" aria-hidden="true"></i>2 Comments</span>
						<span><i class="fa fa-calendar" aria-hidden="true"></i>July 11, 2017</span>
					</div><!--post-footer-->
				</div><!--wp-content-->
			</article>
		</div>
		<div class="col-md-4 col-sm-4 col-xs-12">
			<article class="post">
				<div class="post-images">
					<img src="images/post3.jpg" alt="post">
				</div><!--post-images-->
				<div class="post-content">
					<a href="#" class="categories">Lifesyle</a>
					<a href="#" class="title">Lorem Ipsum is simply dummy Text of the printing</a>
					<div class="post-footer">
						<span><i class="fa fa-comment" aria-hidden="true"></i>2 Comments</span>
						<span><i class="fa fa-calendar" aria-hidden="true"></i>July 11, 2017</span>
					</div><!--post-footer-->
				</div><!--post-content-->
			</article>
		</div>
	</div>
</div>

Blog Post

Using html data attributes you can adjust slider parameters.

<ul class="list-post">
	<li>
		<article class="post">
			<div class="post-images">
				<img src="images/mini-post3.jpg" alt="post">
			</div><!--post-images-->
			<div class="post-content">
				<a href="#" class="title">Lorem Ipsum is simply dummy Text of the printing</a>
				<div class="post-footer">
					<span><i class="fa fa-comment" aria-hidden="true"></i>2 Comments</span>
					<span><i class="fa fa-calendar" aria-hidden="true"></i>July 11, 2017</span>
				</div><!--post-footer-->
			</div><!--post-content-->
		</article><!--post-->
	</li>
	<li>
		<article class="post">
			<div class="post-images">
				<img src="images/mini-post4.jpg" alt="post">
			</div><!--post-images-->
			<div class="post-content">
				<a href="#" class="title">Lorem Ipsum is simply dummy Text of the printing</a>
				<div class="post-footer">
					<span><i class="fa fa-comment" aria-hidden="true"></i>2 Comments</span>
					<span><i class="fa fa-calendar" aria-hidden="true"></i>July 11, 2017</span>
				</div><!--post-footer-->
			</div><!--post-content-->
		</article><!--post-->
	</li>
	<li>
		<article class="post">
			<div class="post-images">
				<img src="images/mini-post5.jpg" alt="post">
			</div><!--post-images-->
			<div class="post-content">
				<a href="#" class="title">Lorem Ipsum is simply dummy Text of the printing</a>
				<div class="post-footer">
					<span><i class="fa fa-comment" aria-hidden="true"></i>2 Comments</span>
					<span><i class="fa fa-calendar" aria-hidden="true"></i>July 11, 2017</span>
				</div><!--post-footer-->
			</div><!--post-content-->
		</article><!--post-->
	</li>
</ul><!--list-post-->

Small Post

Using html data attributes you can adjust slider parameters.

<div class="grid-post">
	<div class="container">
		<h2 class="text-center">Most Popular Posts</h2>
		<div class="row">
			<div class="col-md-3">
				<article class="post bottom">
					<div class="post-images">
						<img src="images/grid-post.jpg" alt="post">
					</div><!--post-images-->
					<div class="post-content">
						<a href="#" class="categories">Lifesyle</a>
						<a href="#" class="title">Lorem Ipsum is simply dummy Text of the printing</a>
						<div class="post-footer">
							<span><i class="fa fa-comment" aria-hidden="true"></i>2 Comments</span>
							<span><i class="fa fa-calendar" aria-hidden="true"></i>July 11, 2017</span>
						</div><!--post-footer-->
					</div><!--post-content-->
				</article><!--post-->
				<article class="post bottom">
					<div class="post-images">
						<img src="images/grid-post4.jpg" alt="post">
					</div><!--post-images-->
					<div class="post-content">
						<a href="#" class="categories">Lifesyle</a>
						<a href="#" class="title">Lorem Ipsum is simply dummy Text of the printing</a>
						<div class="post-footer">
							<span><i class="fa fa-comment" aria-hidden="true"></i>2 Comments</span>
							<span><i class="fa fa-calendar" aria-hidden="true"></i>July 11, 2017</span>
						</div><!--post-footer-->
					</div><!--post-content-->
				</article><!--post-->
			</div>
			<div class="col-md-6">
				<article class="post center">
					<div class="post-images">
						<img src="images/grid-post2.jpg" alt="post">
					</div><!--post-images-->
					<div class="post-content">
						<a href="#" class="categories">Lifesyle</a>
						<a href="#" class="title">Lorem Ipsum is simply dummy Text of the printing</a>
						<div class="post-footer">
							<span><i class="fa fa-comment" aria-hidden="true"></i>2 Comments</span>
							<span><i class="fa fa-calendar" aria-hidden="true"></i>July 11, 2017</span>
						</div><!--post-footer-->
					</div><!--post-content-->
				</article><!--post-->
			</div>
			<div class="col-md-3">
				<article class="post bottom">
					<div class="post-images">
						<img src="images/grid-post3.jpg" alt="post">
					</div><!--post-images-->
					<div class="post-content">
						<a href="#" class="categories">Lifesyle</a>
						<a href="#" class="title">Lorem Ipsum is simply dummy Text of the printing</a>
						<div class="post-footer">
							<span><i class="fa fa-comment" aria-hidden="true"></i>2 Comments</span>
							<span><i class="fa fa-calendar" aria-hidden="true"></i>July 11, 2017</span>
						</div><!--post-footer-->
					</div><!--post-content-->
				</article><!--post-->
				<article class="post bottom">
					<div class="post-images">
						<img src="images/grid-post5.jpg" alt="post">
					</div><!--post-images-->
					<div class="post-content">
						<a href="#" class="categories">Lifesyle</a>
						<a href="#" class="title">Lorem Ipsum is simply dummy Text of the printing</a>
						<div class="post-footer">
							<span><i class="fa fa-comment" aria-hidden="true"></i>2 Comments</span>
							<span><i class="fa fa-calendar" aria-hidden="true"></i>July 11, 2017</span>
						</div><!--post-footer-->
					</div><!--post-content-->
				</article><!--post-->
			</div>
		</div>
	</div>
</div><!--grid-post-->

Post Bottom

Using html data attributes you can adjust slider parameters.

<article class="post bottom">
	<div class="post-images">
		<img src="images/post-full.jpg" alt="post">
	</div><!--post-images-->
	<div class="post-content">
		<a href="#" class="categories">Lifesyle</a>
		<a href="#" class="title">Lorem Ipsum is simply dummy Text of the printing </a>
		<div class="post-footer">
			<span><i class="fa fa-comment" aria-hidden="true"></i>2 Comments</span>
			<span><i class="fa fa-calendar" aria-hidden="true"></i>July 11, 2017</span>
		</div><!--post-footer-->
		<div class="description">
			<p>Morbi iaculis vehicula enim. Proin enim lorem, faucibus et tempor id, dictum quis nisl. Nam nunc enim, consectetur vitae justo non, pharetra mattis purus. Nullam scelerisque nisl sem, sed vehicula tortorMorbi iaculis vehicula enim. Proin enim lorem, faucibus et tempor id, dictum quis nisl. Nam nunc enim, consectetur vitae justo non, pharetra mattis purus. Nullam scelerisque nisl sem, sed vehicula tortorMorbi iaculis vehicula enim. Proin enim lorem, faucibus et tempor id, dictum quis nisl. Nam nunc enim, consectetur vitae justo non, pharetra mattis purus. Nullam scelerisque nisl sem, sed vehicula tortorMorbi iaculis vehicula enim. Proin enim lorem, faucibus et tempor id, dictum quis nisl. Nam nunc enim, consectetur vitae justo non, pharetra mattis purus. Nullam scelerisque nisl sem, sed vehicula tortor</p>
		</div><!--description-->
	</div><!--post-content-->
</article>

Background Post

Using html data attributes you can adjust slider parameters.

<div class="bg-post">
	<div class="container">
		<div class="row">
			<div class="col-md-3 col-sm-6 col-xs-12">
				<article class="post bottom text-center">
					<div class="post-images">
						<img src="images/bg-post2.jpg" alt="post">
					</div><!--post-images-->
					<div class="post-content">
						<a href="#" class="categories">Lifesyle</a>
						<a href="#" class="title">Lorem Ipsum is simply dummy Text of the printing</a>
						<div class="post-footer">
							<span><i class="fa fa-comment" aria-hidden="true"></i>2 Comments</span>
							<span><i class="fa fa-calendar" aria-hidden="true"></i>July 11, 2017</span>
						</div><!--post-footer-->
					</div><!--post-content-->
				</article><!--post-->
			</div>
			<div class="col-md-3 col-sm-6 col-xs-12">
				<article class="post bottom text-center">
					<div class="post-images">
						<img src="images/bg-post3.jpg" alt="post">
					</div><!--post-images-->
					<div class="post-content">
						<a href="#" class="categories">Lifesyle</a>
						<a href="#" class="title">Lorem Ipsum is simply dummy Text of the printing</a>
						<div class="post-footer">
							<span><i class="fa fa-comment" aria-hidden="true"></i>2 Comments</span>
							<span><i class="fa fa-calendar" aria-hidden="true"></i>July 11, 2017</span>
						</div><!--post-footer-->
					</div><!--post-content-->
				</article><!--post-->
			</div>
			<div class="col-md-3 col-sm-6 col-xs-12">
				<article class="post bottom text-center">
					<div class="post-images">
						<img src="images/bg-post4.jpg" alt="post">
					</div><!--post-images-->
					<div class="post-content">
						<a href="#" class="categories">Lifesyle</a>
						<a href="#" class="title">Lorem Ipsum is simply dummy Text of the printing</a>
						<div class="post-footer">
							<span><i class="fa fa-comment" aria-hidden="true"></i>2 Comments</span>
							<span><i class="fa fa-calendar" aria-hidden="true"></i>July 11, 2017</span>
						</div><!--post-footer-->
					</div><!--post-content-->
				</article><!--post-->
			</div>
			<div class="col-md-3 col-sm-6 col-xs-12">
				<article class="post bottom text-center">
					<div class="post-images">
						<img src="images/bg-post5.jpg" alt="post">
					</div><!--post-images-->
					<div class="post-content">
						<a href="#" class="categories">Lifesyle</a>
						<a href="#" class="title">Lorem Ipsum is simply dummy Text of the printing</a>
						<div class="post-footer">
							<span><i class="fa fa-comment" aria-hidden="true"></i>2 Comments</span>
							<span><i class="fa fa-calendar" aria-hidden="true"></i>July 11, 2017</span>
						</div><!--post-footer-->
					</div><!--post-content-->
				</article><!--post-->
			</div>
		</div>
	</div><!--container-->		
</div>