
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.
Less File
HTML includes Less files for all of its styling.
- 01-info.less
- 02-base.less
- 03-header.less
- 04-slider.less
- 05-content.less
- 06-post.less
- 07-widget.less
- 08-footer.less
- 16-mixin.less
- 17-variable.less
Typography
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>
JavaScript
There are a total of 3 javascript files that create various animation effects within Crabapple:
- bootstrap.min.js
- jquery.js
- owl.carousel.min.js