J-Business, Best Minimal Html Template
J-Business 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

J-Business comes packaged with 14 HTML files. Different aspects of a website you can find in folder.

  • index.html
  • about.html
  • blog.html
  • contact.html
  • pricing.html
  • services.html
  • single-blog.html
  • index-blue.html
  • about-blue.html
  • blog-blue.html
  • contact-blue.html
  • pricing-blue.html
  • services-blue.html
  • single-blog-blue.html

Typography

h1 { font-size: 72px; line-height: 76px; color: #303030;}
h2 { font-size: 64px; line-height: 68px; color: #303030;}
h3 { font-size: 48px; line-height: 54px; color: #303030;}
h4 { font-size: 36px; line-height: 38px; color: #303030;}
h5 { font-size: 28px; line-height: 30px; color: #303030;}
h6 { font-size: 22px; line-height: 26px; color: #303030;}
p { color: #888; font-size: 16px; font-weight: 400; line-height: 1.86em; margin-bottom: 15px; }

Slider

  <div class="slider">
		<img src="assets/images/slider.jpg" alt="slider">
		<div class="inside">
			<h2>Engage Business</h2>
			<p >Lorem ipsum dolor sit amet, consectetur adipisicing<br>elit. Iusto laborum repellendus ullam ipsum recusandae</p>
			<a href="#" class="custom-btn green">Our Services</a>
			<a href="#" class="custom-btn white">Contact</a>
		</div>
	</div>

Our Services

	<div class="icon-services">
		<div class="row">
			<div class="col-md-4 col-sm-4 col-xs-12">
				<div class="icon-box">
					<i class="fa fa-line-chart"></i>
					<h4>Unique experience</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo deserunt odio eius</p>
				</div>
			</div>
			<div class="col-md-4 col-sm-4 col-xs-12">
				<div class="icon-box">
					<i class="fa fa-desktop"></i>
					<h4>Responsive Design</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo deserunt odio eius</p>
				</div>
			</div>
			<div class="col-md-4 col-sm-4 col-xs-12">
				<div class="icon-box">
					<i class="fa fa-star-half-o"></i>
					<h4>Favourite</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo deserunt odio eius</p>
				</div>
			</div>
		</div>
	</div>

Our Team

	<div class="container">
		<div class="our-team">
			<div class="row">
				<div class="col-md-3 col-sm-6 col-xs-12">
					<div class="inside">
						<img src="assets/images/team.jpg" alt="team">
						<div class="content-team">
							<h3>Jone Smite</h3>
							<span>Front End Design</span>
							<p>We offer the most complete house renovating services...</p>
							<ul class="social-icon">
								<li><a href="#"><i class="fa fa-facebook"></i></a></li>
								<li><a href="#"><i class="fa fa-twitter"></i></a></li>
								<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-md-3 col-sm-6 col-xs-12">
					<div class="inside">
						<img src="assets/images/team4.jpg" alt="team">
						<div class="content-team">
							<h3>Kate Marine</h3>
							<span>Front End Design</span>
							<p>We offer the most complete house renovating services...</p>
							<ul class="social-icon">
								<li><a href="#"><i class="fa fa-facebook"></i></a></li>
								<li><a href="#"><i class="fa fa-twitter"></i></a></li>
								<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-md-3 col-sm-6 col-xs-12">
					<div class="inside">
						<img src="assets/images/team2.jpg" alt="team">
						<div class="content-team">
							<h3>Robert Wishter</h3>
							<span>Front End Design</span>
							<p>We offer the most complete house renovating services...</p>
							<ul class="social-icon">
								<li><a href="#"><i class="fa fa-facebook"></i></a></li>
								<li><a href="#"><i class="fa fa-twitter"></i></a></li>
								<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-md-3 col-sm-6 col-xs-12">
					<div class="inside">
						<img src="assets/images/team3.jpg" alt="team">
						<div class="content-team">
							<h3>Sara Loren</h3>
							<span>Front End Design</span>
							<p>We offer the most complete house renovating services...</p>
							<ul class="social-icon">
								<li><a href="#"><i class="fa fa-facebook"></i></a></li>
								<li><a href="#"><i class="fa fa-twitter"></i></a></li>
								<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

Company History

	<div class="company-history">
		<div class="row animatedParent">
			<div class="col-md-6 col-sm-6 col-xs-12 animated bounceInUp delay-250">
				<div class="row">
					<div class="col-md-5">
						<img src="assets/images/history.jpg" alt="history">
					</div>
					<div class="col-md-7">
						<h3><span>1986</span>. Structure was Founded</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, voluptas, provident, maxime enim quae pariatur impedit, nulla </p>
					</div>
				</div>
			</div>
			<div class="col-md-6 col-sm-6 col-xs-12 animated bounceInUp delay-500">
				<div class="row">
					<div class="col-md-5">
						<img src="assets/images/history2.jpg" alt="history">
					</div>
					<div class="col-md-7">
						<h3><span>1990</span>. Structure was Founded</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, voluptas, provident, maxime enim quae pariatur impedit, nulla </p>
					</div>
				</div>
			</div>
			<div class="col-md-6 col-sm-6 col-xs-12 animated bounceInUp delay-750">
				<div class="row">
					<div class="col-md-5">
						<img src="assets/images/history4.jpg" alt="history">
					</div>
					<div class="col-md-7">
						<h3><span>2006</span>. Structure was Founded</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, voluptas, provident, maxime enim quae pariatur impedit, nulla </p>
					</div>
				</div>
			</div>
			<div class="col-md-6 col-sm-6 col-xs-12 animated bounceInUp delay-1000">
				<div class="row">
					<div class="col-md-5">
						<img src="assets/images/history3.jpg" alt="history">
					</div>
					<div class="col-md-7">
						<h3><span>2018</span>. Structure was Founded</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, voluptas, provident, maxime enim quae pariatur impedit, nulla </p>
					</div>
				</div>
			</div>
		</div>
	</div>

Counter

	<div class="count-history">
		<div class="container">
			<div class="row" id="counter">
				<div class="col-md-3 col-sm-3 col-xs-6 text-center">
					<i class="fa fa-pie-chart"></i>
					<div class="count" data-count="1235">0</div>
					<h5>Project Completed</h5>
				</div>
				<div class="col-md-3 col-sm-3 col-xs-6 text-center">
					<i class="fa fa-clock-o"></i>
					<div class="count" data-count="180">0</div>
					<h5>Hours of Work / Month</h5>
				</div>
				<div class="col-md-3 col-sm-3 col-xs-6 text-center">
					<i class="fa fa-files-o"></i>
					<div class="count" data-count="78">0</div>
					<h5>Wen Design</h5>
				</div>
				<div class="col-md-3 col-sm-3 col-xs-6 text-center">
					<i class="fa fa-smile-o"></i>
					<div class="count" data-count="89">0</div>
					<h5>Satisfied Clients</h5>
				</div>
			</div>
		</div>
	</div>

Pricing Table

	<div class="pricing-table color bg">
		<div class="container">
			<div class="row">
				<div class="col-md-4">
					<div class="pricing-grid">
						<div class="price-value">
							<h2><a href="#">Basic</a></h2>
							<h5><span>$49.99</span><label> / month</label></h5>
							<div class="sale-box">
								<span>NEW</span>
							</div>
						</div>
						<div class="price-bg">
							<ul>
								<li><a href="#">5GB Disk Space </a></li>
								<li><a href="#">10 Domain Names</a></li>
								<li><a href="#">5 E-Mail Address </a></li>
								<li><a href="#">50GB Monthly Bandwidth </a></li>
								<li><a href="#">Fully Support</a></li>
							</ul>
							<div class="cart">
								<a class="custom-btn green" href="#">Purchase</a>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-4">
					<div class="pricing-grid center">
						<div class="price-value">
							<h2><a href="#">Standard</a></h2>
							<h5><span>$69.99</span><label> / month</label></h5>
							<div class="sale-box">
								<span>NEW</span>
							</div>
						</div>
						<div class="price-bg">
							<ul>
								<li><a href="#">10GB Disk Space </a></li>
								<li><a href="#">20 Domain Names</a></li>
								<li><a href="#">10 E-Mail Address </a></li>
								<li><a href="#">100GB Monthly Bandwidth </a></li>
								<li><a href="#">Fully Support</a></li>
							</ul>
							<div class="cart">
								<a class="custom-btn" href="#">Purchase</a>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-4">
					<div class="pricing-grid">
						<div class="price-value">
							<h2><a href="#">Premium</a></h2>
							<h5><span>$89.99</span><label> / month</label></h5>
							<div class="sale-box">
								<span>NEW</span>
							</div>
						</div>
						<div class="price-bg">
							<ul>
								<li><a href="#">50GB Disk Space </a></li>
								<li><a href="#">50 Domain Names</a></li>
								<li><a href="#">20 E-Mail Address </a></li>
								<li><a href="#">300GB Monthly Bandwidth </a></li>
								<li><a href="#">Fully Support</a></li>
							</ul>
							<div class="cart">
								<a class="custom-btn" href="#">Purchase</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

Blog Post

	<article class="post">
		<div class="wp-picture">
			<img src="assets/images/post2.jpg" alt="post1">
			<div class="button">
				<a href="single-blog.html"><i class="fa fa-link"></i></a>
				<a href="assets/images/post2.jpg" data-lightbox="image-1"><i class="fa fa-search"></i></a>
			</div>
		</div>
		<div class="content-article">
			<h2 class="post-heading"><a href="single-blog.html">Facebook finishes its move to neural machine translation</a></h2>
			<ul class="post-meta">
				<li>by <a href="#">Graf Jime</a></li>
				<li>on March 08, 2018</li>
			</ul>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates iure pariatur cum magnam dignissimos delectus, necessitatibus vero exercitationem aperiam explicabo provident. Incidunt, quia voluptatem, cupiditate quo distinctio doloremque sed nisi!</p>
			<div class="bottom">
				<div class="tags">
					<span>Tags:</span>
					<a href="#">business,</a>
					<a href="#">company,</a>
					<a href="#">market</a>
				</div>
				<a href="single-blog.html" class="read-more">Read more<i class="fa fa-long-arrow-right"></i></a>
			</div>
		</div>
	</article>

JavaScript

There are a total of 3 javascript files that create various animation effects within J-Business:

  • style.css
  • responsive.css
  • animations.min.css
  • lightbox.min.css
  • owl.carousel.min.css
  • bootstrap.min.css

Start typing and press Enter to search