Blue - Responsive Hosting & Technology Site Template

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!

Created:11/01/2018
Latest Update: 11/01/2018
By: Team Dhrubok
Email: design360studio@gmail.com

Thank you for purchasing our theme. HostBlue - Responsive Hosting & Technology Site Template. If you have any question, please feel free to contact us.

Main File Structure

All the file are well organized, its so easy to work with the template.
1. Unzip the files.
2. Open "hostblue-html" folder.
You will find the all html files on the root that will be edited.
Also you will see 4 directories, css, js, fonts, img and images.
In the first folder Content you will find style.css and other styling files the all the other files expect the htmls.
Js folder contain only the jquery library. Fonts folder contain essetial font files for fonts.

HTML Structure

The base structure was organized by row, col-** class

		
		
		<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>
		

CSS Structure

The base structure was organized by row, col-** class
    
	 <!--  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">

    
		
    

JavaScript Structure

The base structure was organized by row, col-** class
    
	
	
        <!--  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>
	
	
	
	
	
    

Sliders Structure

The base structure was organized by row, col-** class
    
      <!-- 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 -->
    

Supports

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.

Team Dhrubok

Sliders Structure

The base structure was organized by row, col-** class
    
    <!-- code will be here -->