Crabapple, Best Minimal Html Template
Crabapple 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 STRUCTURE

Crabapple comes packaged with 6 HTML files. Different aspects of a website you can find in html_parts folder.

  • insex.html
  • post-sidebar.html
  • page-404.html
  • post-full-width.html
  • about.html
  • contacts.html

Less File

HTML includes Less files for all of its styling.

  • 01-info.less
  • 02-base.less
  • 03-header.lessl
  • 04-latestpost.less
  • 05-post.less
  • 06-slider.less
  • 07-sidebar.less
  • 08-related-posts.less
  • 09-comments.less
  • 10-full-width-post.less
  • 11-about.less
  • 12-page404.less
  • 13-contacts.less
  • 14-dark-style.less
  • 15-footer.less
  • 16-mixin.less
  • 17-variable.less

Typography

p{ font-size: 13px; font-weight: 400; line-height: 25px; color: rgba(92, 92, 91, 0.8); margin-bottom: 20px;}
h3{ font-size: 32px; color: #282828; font-weight: 500;}
.button {border: 1px solid #616161; display: inline-block; font-size: 14px; font-weight: 400; padding: 13px 14px; color: rgba(0, 0, 0, 0.77); text-transform: uppercase;}
h5{font-size: 14px; font-family: 'Open Sans', sans-serif; text-decoration: underline; text-transform: uppercase; margin-bottom: 10px;}

Slider

Using html data attributes you can adjust slider parameters.

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            </ol>

            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="img/slider.jpg" alt="slider">
                    <div class="carousel-caption">
                        <h6>Lifestyle</h6>
                        <h2>how to build<br>a great workspace</h2>
                        <h5>November 19, 2015</h5>
                    </div>
                </div>
                <div class="item">
                    <img src="img/slider2.jpg" alt="slider">
                    <div class="carousel-caption">
                        <h6>Lifestyle</h6>
                        <h2>how to build<br>a great workspace</h2>
                        <h5>November 19, 2015</h5>
                    </div>
                </div>
            </div>

            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
               <i class="icon-left"></i>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <i class="icon-right"></i>
            </a>
        </div>

Latest Post

Using html data attributes you can adjust slider parameters.

<div class="latest-post">
	<h4 class="text-center">Latest Posts</h4>
	<div class="row">
		<div class="col-md-4 col-sm-12 col-xs-12">
			<a href="#">
				<img src="img/banner.jpg" alt="banner">
				<div class="content">
					<div class="inside">
						<h5>Food</h5>
						<h3>Top 5 mushroom racipes</h3>
						<span class="post-date">November 21, 2017</span>
					</div>
				</div>
			</a>
		</div>
		<div class="col-md-4 col-sm-12 col-xs-12">
			<a href="#">
				<img src="img/banner2.jpg" alt="banner">
				<div class="content">
					<div class="inside">
						<h5>Travel</h5>
						<h3>Oldest Arcitecture</h3>
						<span class="post-date">November 21, 2017</span>
					</div>
				</div>
			</a>
		</div>
		<div class="col-md-4 col-sm-12 col-xs-12">
			<a href="#">
				<img src="img/banner3.jpg" alt="banner">
				<div class="content">
					<div class="inside">
						<h5>Design</h5>
						<h3>How to build a BRAND</h3>
						<span class="post-date">November 21, 2017</span>
					</div>
				</div>
			</a>
		</div>
	</div>
</div><!--latest-post-->

Blog Post

Using html data attributes you can adjust slider parameters.

<article class="blog-post">
	<div class="top text-center">
		<h5><a href="post-sidebar.html">Lifestyle</a></h5>
		<h3><a href="post-sidebar.html">How to build a garden in your apartment</a></h3>
		<span class="post-date">November 16, 2015</span>
	</div><!--top-->
	<div class="pictures">
		<img src="img/post.jpg" alt="post">
	</div>
	<div class="description">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
	</div><!--description-->
	<div class="bottom">
		<a href="post-sidebar.html" class="button">Continue Reading<i class="icon-right"></i></a>
		<ul class="social-icon">
			<li class="first">Share it on</li>
			<li><a href="#"><i class="icon-facebook"></i></a></li>
			<li><a href="#"><i class="icon-twitter"></i></a></li>
			<li><a href="#"><i class="icon-tumblr"></i></a></li>
			<li><a href="#"><i class="icon-gplus"></i></a></li>
			<li><a href="#"><i class="icon-rss"></i></a></li>
		</ul><!--social-icon-->
	</div><!--bottom-->
</article>

Small Post

Using html data attributes you can adjust slider parameters.

<div class="row">
	<div class="col-md-6 col-sm-6 col-xs-12">
		<article class="small-post">
			<div class="pictures">
				<img src="img/mini-post.jpg" alt="mini-post">
			</div>
			<div class="top text-center">
				<h5><a href="post-sidebar.html">Food</a></h5>
				<h3><a href="post-sidebar.html">memories of milano</a></h3>
			</div><!--top-->
			<div class="description">
				<p>Ad pri posse falli veritus. Sea ut suas habemus erroribus, idque dicat erant eu duo, ne his tractatos accommodare mediocritatem. Id mundi deserunt praesent est, tempor salutandi definitionem quo ea, eum nemore partiendo eu.</p>
			</div><!--description-->
			<div class="bottom">
				<a href="post-sidebar.html">Read More</a>
				<span class="post-date">November 13, 2017</span>
			</div><!--bottom-->
		</article>
	</div>
</div>

Post Full Width

Using html data attributes you can adjust slider parameters.

<div class="col-md-12 full-width">
	<article class="blog-post">
		<div class="top text-center">
			<h5><a href="post-sidebar.html">Travel</a></h5>
			<h3><a href="post-sidebar.html">Visit the most surreal place on earth</a></h3>
			<span class="post-date">November 16, 2017</span>
		</div><!--top-->
		<div class="pictures">
			<img src="img/full-width.jpg" alt="post">
		</div>
		<div class="description">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
			<blockquote>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Aliquam erat volutpat.</blockquote>
			<p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
		</div><!--description-->
		<div class="bottom">
			<ul class="social-icon">
				<li class="first">- Share it on</li>
				<li><a href="#"><i class="icon-facebook"></i></a></li>
				<li><a href="#"><i class="icon-twitter"></i></a></li>
				<li><a href="#"><i class="icon-tumblr"></i></a></li>
				<li><a href="#"><i class="icon-gplus"></i></a></li>
				<li><a href="#"><i class="icon-rss"></i></a></li>
			</ul><!--social-icon-->
			<a href="#" class="comments">4 comments</a>
		</div><!--bottom-->
	</article>
</div><!--full-width-->

Related Posts

Using html data attributes you can adjust slider parameters.

<div class="related-posts">
	<h6><a href="#">You might also like</a></h6>
	<div class="owl-related-posts owl-carousel owl-theme">
		<div class="item">
			<div class="pictures">
				<img src="img/related-posts.jpg" alt="mini-post">
			</div>
			<div class="top text-center">
				<h5><a href="#">Music</a></h5>
				<h3><a href="#">New Album: Pukkepop</a></h3>
			</div><!--top-->
		</div>
		<div class="item">
			<div class="pictures">
				<img src="img/related-posts2.jpg" alt="mini-post">
			</div>
			<div class="top text-center">
				<h5><a href="#">travel</a></h5>
				<h3><a href="#">Lidkoeb - interior design</a></h3>
			</div><!--top-->
		</div>
	</div><!--owl-related-posts-->
</div><!--related-posts-->

Form

Using html data attributes you can adjust slider parameters.

	<form>
		<h6>Leave a reply</h6>
		<div class="form-group">
    		<input type="text" class="form-control" id="exampleInputName2" placeholder="Name*">
 		</div>
 		<div class="form-group right">
   			<input type="email" class="form-control" id="exampleInputEmail2" placeholder="E-mail*">
		</div>
		<div class="form-group textarea">
			<textarea class="form-control" placeholder="Message*"></textarea>
		</div>
		<div class="form-group">
      		<button type="submit" class="btn btn-default">Submit</button>
		</div>
	</form>

Comments

Using html data attributes you can adjust slider parameters.

<div class="comments">
	<div class="number-comments">4 comments</div>
	<div class="user">
		<img src="img/user1.png" alt="user1">
		<h6><a href="#">Angela Doe</a></h6>
		<div class="date">November 16,2015, at 9:00 pm</div>
		<p>Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis</p>
		<button>Reply</button>
	</div>
	<div class="user">
		<img src="img/user2.png" alt="user1">
		<h6><a href="#">Angela Doe</a></h6>
		<div class="date">November 16,2015, at 9:00 pm</div>
		<p>Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis</p>
		<button>Reply</button>
	</div>
	<div class="user reply">
		<img src="img/user3.png" alt="user1">
		<h6><a href="#">Angela Doe</a></h6>
		<div class="date">November 16,2015, at 9:00 pm</div>
		<p>Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis</p>
		<button>Reply</button>
	</div>
	<div class="user last">
		<img src="img/user2.png" alt="user1">
		<h6><a href="#">Angela Doe</a></h6>
		<div class="date">November 16,2015, at 9:00 pm</div>
		<p>Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis</p>
		<button>Reply</button>
	</div>
</div><!--comments-->

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

Start typing and press Enter to search