File size: 15.41Kb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HostBlue - Responsive Hosting & Technology Site Template</title>
<meta name="description" content="Thanks for purchasing Corpoint. If you need any support, please contact with us.">
<meta name="author" content="Dhrubok">
<meta name="copyright" content="Dhrubok">
<link rel="shortcut icon" type="image/png" href="img/fevicon.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<div class="left-side">
<div class="logo">
<a href="http://www.dhrubok.com">Blue</a>
</div>
<div class="left-content">
<ul role="tablist">
<li role="presentation" class="active"><a href="#one" aria-controls="home" role="tab" data-toggle="tab"><span><i class="fa fa-home"></i></span>Welcome</a></li>
<li role="presentation"><a href="#two" aria-controls="home" role="tab" data-toggle="tab"><span><i class="fa fa-folder"></i></span>Main File Structure</a></li>
<li role="presentation"><a href="#three" aria-controls="home" role="tab" data-toggle="tab"><span><i class="fa fa-code"></i></span>HTML Structure</a></li>
<li role="presentation"><a href="#four" aria-controls="home" role="tab" data-toggle="tab"><span><i class="fa fa-css3"></i></span>CSS Structure</a></li>
<li role="presentation"><a href="#five" aria-controls="home" role="tab" data-toggle="tab"><span><i class="fa fa-file"></i></span>JavaScripts File</a></li>
<li role="presentation"><a href="#six" aria-controls="home" role="tab" data-toggle="tab"><span><i class="fa fa-slideshare"></i></span>Sliders</a></li>
<li role="presentation"><a href="#source" aria-controls="home" role="tab" data-toggle="tab"><span><i class="fa fa-thumbs-up"></i></span>Sources & Credits</a></li>
<li role="presentation"><a href="#support" aria-controls="home" role="tab" data-toggle="tab"><span><i class="fa fa-support"></i></span>Support</a></li>
</ul>
</div>
<div class="copyright">
<p>Copyright © 2017. <a href="http://crazycafe.net">Dhrubok</a> <span>All Rights Reserved.</span></p>
</div>
</div>
<div class="right-side">
<div class="right-content">
<div id="one" class="content active fade in">
<h1><span>Blue</span> - Responsive Hosting & Technology Site Template</h1>
<div class="content-welcome">
<p>
HostBlue is a Responsive Hosting, Domain and Technology HTML Template for Hosting or Technology website. HostBlue is fully responsive, made with Bootstrap framework. Well planned UX is developed in Spark very creatively so that you can easily put this design to your website. We have included all the essential pages for a hosting website. No more complex thing now. Just change your Text, Image and Colors and get your website. Everything is already made for you!
</p>
</div>
<div class="created">
<p>
Created:11/01/2018
<br> Latest Update: 11/01/2018
<br> By: <a href="https://themeforest.net/user/team_dhrubok"> Team Dhrubok </a>
<br> Email: <a href="mailto:design360studio@gmail.com">design360studio@gmail.com</a>
<br>
<br> Thank you for purchasing our theme. HostBlue - Responsive Hosting & Technology Site Template. If you have any question, please feel free to contact us.
</p>
</div>
</div>
<div id="two" class="content fade">
<h1>Main File Structure</h1>
<p>
All the file are well organized, its so easy to work with the template.
<br> 1. Unzip the files.
<br> 2. Open "hostblue-html" folder.
<br> You will find the all html files on the root that will be edited.
<br> Also you will see 4 directories, css, js, fonts, img and images.
<br> In the first folder Content you will find style.css and other styling files the all the other files expect the htmls.
<br> Js folder contain only the jquery library. Fonts folder contain essetial font files for fonts.
</p>
</div>
<div id="three" class="content fade">
<h1> HTML Structure </h1>
<div>The base structure was organized by row, col-** class </div>
<pre>
<xmp>
<div class="hero-area home2-hero-area">
<div class="banner-area">
<div class="container">
<div class="row">
<div class="col-sm-7">
</div>
</div>
</div>
</div>
</div>
<div class="section-heading">
<div class="row">
<div class="col-md-12">
<div class="section-title-heading">
<h2>Search a domain</h2>
<p>We believe domain name plays a vital role in every online business.<br> Search a domain and get started your business.</p>
</div>
</div>
</div>
</div>
<div class="domain-search-area">
<form action="search.php">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<div class="col-sm-9 col-xs-12">
</div>
<div class="col-sm-3 col-xs-12">
</div>
</div>
</div>
</div>
</form>
</div>
<section class="website-area">
<div class="container">
<div class="section-heading">
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
<div class="website-img-areea">
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
</div>
</section>
</xmp>
</pre>
</div>
<div id="four" class="content fade">
<h1> CSS Structure </h1>
<div>The base structure was organized by row, col-** class </div>
<pre>
<xmp>
<!-- Google font Open+Sans -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,400i,500,600,700,800,900" rel="stylesheet">
<link href="css/slicknav.min.css" rel="stylesheet">
<link href="css/magnific-popup.css" rel="stylesheet">
<link href="css/owl.carousel.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/nice-select.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
</xmp>
</pre>
</div>
<div id="five" class="content fade">
<h1> JavaScript Structure </h1>
<div>The base structure was organized by row, col-** class </div>
<pre>
<xmp>
<!-- jquery-2.1.4.min.js -->
<script src="js/jquery-2.1.4.min.js"></script>
<!-- jquery.slicknav.min.js -->
<script src="js/jquery.slicknav.min.js"></script>
<!-- jquery.nice-select.min.js -->
<script src="js/jquery.nice-select.min.js"></script>
<!-- owl.carousel.min.js -->
<script src="js/owl.carousel.min.js"></script>
<!-- ================= wow Js ======== -->
<script src="js/wow.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</xmp>
</pre>
</div>
<div id="six" class="content fade">
<h1> Sliders Structure </h1>
<div>The base structure was organized by row, col-** class </div>
<pre>
<xmp>
<!-- SINGLE ITEM -->
<section class="pricing-area hero2-search-domain-area section-padding">
<div class="container">
<div class="price-area home2-price-area fadeIn wow" data-wow-delay="0.15s">
<div class="row">
<div class="col-md-12 price-silder-wrapper">
<div class="single-price-slide home2-price-slide">
<div class="single-price">
<div class="price-quality">
<h4>Basic</h4>
<h2>$3/mo</h2>
</div>
<div class="price-details">
<ul>
<li>2 Websites</li>
<li>10 Email Address</li>
<li>10 GB SSD</li>
<li>500 GB Bandwidth</li>
<li>Customer Support</li>
</ul>
<a href="" class="price-btn button-hover">Get Started Now</a>
</div>
</div>
</div>
<div class="single-price-slide home2-price-slide popular-plan">
<div class="single-price">
<span>Popular Plan</span>
<div class="price-quality">
<h4>Premium</h4>
<h2>$7.99/mo</h2>
</div>
<div class="price-details">
<ul>
<li>2 Websites</li>
<li>10 Email Address</li>
<li>10 GB SSD</li>
<li>500 GB Bandwidth</li>
<li>Customer Support</li>
</ul>
<a href="" class="price-btn button-hover">Get Started Now</a>
</div>
</div>
</div>
<div class="single-price-slide home2-price-slide">
<div class="single-price">
<div class="price-quality">
<h4>Standard</h4>
<h2>$4.99/mo</h2>
</div>
<div class="price-details">
<ul>
<li>2 Websites</li>
<li>10 Email Address</li>
<li>10 GB SSD</li>
<li>500 GB Bandwidth</li>
<li>Customer Support</li>
</ul>
<a href="" class="price-btn button-hover">Get Started Now</a>
</div>
</div>
</div>
<div class="single-price-slide home2-price-slide">
<div class="single-price">
<div class="price-quality">
<h4>Company</h4>
<h2>$11.99/mo</h2>
</div>
<div class="price-details">
<ul>
<li>2 Websites</li>
<li>10 Email Address</li>
<li>10 GB SSD</li>
<li>500 GB Bandwidth</li>
<li>Customer Support</li>
</ul>
<a href="" class="price-btn button-hover">Get Started Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- /.SINGLE ITEM END -->
</xmp>
</pre>
<!-- code pre tag end -->
</div>
<div id="source" class="content fade">
<h1> Sources & Credits </h1>
<ul>
<li><span>Fonts</span> <a href="http://google.com/fonts">Google Fonts</a></li>
<li><span>Icons</span>
<ul>
<li><a href="http://fortawesome.github.io/Font-Awesome/icons/">FontAwesome</a></li>
<li><a href="https://github.com/lugolabs/icofont">Icofont</a></li>
</ul>
</li>
<li><span>Images</span> <a href="http://google.com">Google</a>
</li>
<li><span>Sliders</span>
<ul>
<li><a href="http://wpcheatsheet.net/bootstrap-carousel-with-font-awesome-icon/">Bootstrap Carousel With Font awesome Icon</a></li>
<li><a href="https://www.http://elusiveicons.com/">Elusive Icons</a></li>
</ul>
</li>
</ul>
</div>
<div id="support" class="content fade">
<h1> Supports </h1>
<p>Thank you for reading the documentaion. If you still have any question or any problem, please contact with us. We will give you best support. Thanks.</p>
Team Dhrubok
</div>
<div id="nine" class="content fade">
<h1> Sliders Structure </h1>
<div>The base structure was organized by row, col-** class </div>
<pre>
<xmp>
<!-- code will be here -->
</xmp>
</pre>
<!-- code pre tag end -->
</div>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>