Lets begin. Open index.html file and follow the steps. Most of the structure are same for all pages.
<nav class="nav-menu"> <button class="menu-toggle"> <span class="icon"></span> <span class="icon"></span> <span class="icon"></span> </button> <ul class="main-menu"> <li class="menu-item active menu-item-has-children"> <a href="index.html">Home</a> <ul class="sub-menu"> <li class="menu-item"><a href="index.html">Home Layout 01</a></li> <li class="menu-item"><a href="homepage-2.html">Home Layout 02</a></li> <li class="menu-item"><a href="homepage-3.html">Home Layout 03</a></li> <li class="menu-item"><a href="homepage-4.html">Home Layout 04</a></li> </ul> </li> <li class="menu-item menu-item-has-children"> <a href="hosting.html">Hosting</a> <ul class="sub-menu-large"> <div class="container"> <div class="row"> <li class="service-list"> <div class="col-sm-6 service"> <div class="media-left"> <i class="fa fa-diamond"></i> </div> <div class="media-body"> <a class="menu-item" href="hosting.html">Shared Hosting</a> <p> Lorem ipsum dolor sit amet, ectetur.</p> </div> </div> <div class="col-sm-6 service"> <div class="media-left"> <i class="fa fa-users"></i> </div> <div class="media-body"> <a class="menu-item" href="reseller.html">Reseller Hosting</a> <p> Adipiscing integer act lacinia ed justo.</p> </div> </div> <div class="col-sm-6 service"> <div class="media-left"> <i class="fa fa-cloud"></i> </div> <div class="media-body"> <a class="menu-item" href="cloud.html">Cloud VPS</a> <p> Dolor sit amet conse adipiscing orci.</p> </div> </div> <div class="col-sm-6 service"> <div class="media-left"> <i class="fa fa-cloud"></i> </div> <div class="media-body"> <a class="menu-item" href="server.html">Dedicated Server</a> <p> Tristique sit nunc non elit act ultricies.</p> </div> </div> </li> <li class="start-offer"> <div class="inner"> <div class="title">WordPress Hosting Plans</div> <p> Fully Managed Wordpress Hosting</p> <a href="wordpress.html" class="btn modern wordpress">See More Plans</a> </div> </li> </div> </div> </ul> </li> <li class="menu-item menu-item-has-children"> <a href="domains.html">Domains</a> </li> <li class="menu-item menu-item-has-children"> <a href="blog.html">Blog</a> <ul class="sub-menu"> <li class="menu-item"><a href="blog.html">Blog Layout 01</a></li> <li class="menu-item"><a href="blog-2.html">Blog Layout 02</a></li> <li class="menu-item"><a href="blog-single.html">Blog Details</a></li> </ul> </li> <li class="menu-item menu-item-has-children"> <a href="blog.html">Pages</a> <ul class="sub-menu"> <li class="menu-item"><a href="about.html">About Us</a></li> <li class="menu-item"><a href="services.html">Services</a></li> <li class="menu-item"><a href="team.html">Team</a></li> <li class="menu-item"><a href="404.html">404</a></li> <li class="menu-item"><a href="countdown.html">Coming Soon</a></li> <li class="menu-item"><a href="register.html">Register</a></li> <li class="menu-item"><a href="faq.html">Faq</a></li> <li class="menu-item"><a href="checkout.html">Checkout</a></li> <li class="menu-item"><a href="cart.html">Cart</a></li> <li class="menu-item"><a href="#" data-toggle="modal" data-target="mylogin">Login</a></li> </ul> </li> <li class="menu-item menu-item-has-children"><a href="elements.html">Elements</a></li> <li class="menu-item menu-item-has-children menu-last"><a href="cotact.html">Contacts</a></li> </ul> </nav>
<nav class="nav-menu"> <button class="menu-toggle"> <span class="icon"></span> <span class="icon"></span> <span class="icon"></span> </button> <ul class="main-menu"> <li class="menu-item active menu-item-has-children"> <a>Home</a> <ul class="sub-menu"> <li class="menu-item"><a href="index.html">Home Layout 01</a></li> <li class="menu-item"><a href="homepage-2.html">Home Layout 02</a></li> <li class="menu-item"><a href="homepage-3.html">Home Layout 03</a></li> <li class="menu-item"><a href="homepage-4.html">Home Layout 04</a></li> </ul> </li> <li class="menu-item menu-item-has-children"> <a>Hosting</a> <ul class="sub-menu"> <li class="menu-item"><a href="hosting.html">Shared Hosting</a></li> <li class="menu-item"><a href="reseller.html">Reseller Hosting</a></li> <li class="menu-item"><a href="cloud.html">Cloud VPS</a></li> <li class="menu-item"><a href="servers.html">Dedicated Server</a></li> </ul> </li> <li class="menu-item"> <a href="domains">Domains</a> </li> <li class="menu-item menu-item-has-children"> <a>Blog</a> <ul class="sub-menu"> <li class="menu-item"><a href="blog-1.html">Blog Layout 01</a></li> <li class="menu-item"><a href="blog-2.html">Blog Layout 02</a></li> <li class="menu-item"><a href="blog-single.html">Blog Details</a></li> </ul> </li> <li class="menu-item menu-item-has-children"> <a>Pages</a> <ul class="sub-menu"> <li class="menu-item"><a href="about.html">About Us</a></li> <li class="menu-item"><a href="services.html">Services</a></li> <li class="menu-item"><a href="team.html">Our Team</a></li> <li class="menu-item"><a href="404.html">404</a></li> <li class="menu-item"><a href="countdown.html">Coming Soon</a></li> <li class="menu-item"><a href="register.html">Register</a></li> <li class="menu-item"><a href="faq.html">Faq</a></li> <li class="menu-item"><a href="checkout.html">Checkout</a></li> <li class="menu-item"><a href="cart.html">Cart</a></li> <li class="menu-item"><a href="#" data-toggle="modal" data-target="mylogin">Login</a></li> </ul> </li> <li class="menu-item"><a href="elements.html">Elements</a></li> <li class="menu-item"><a href="contact.html">Contact</a></li> </ul> </nav>
<a href="index.html"> <img src="img/logo.png" alt="logo" class="logo-menu"> </a>
<form class="login-form"> <div class="row"> <div class="col-sm-12"> <div class="wrapper"> <h3 class="title"><i class="fa fa-lock"></i> Log in</h3> <div class="subtitle"> Access myHostlab area</div> <input type="text" name="username" placeholder="Primary Email" class="field" required> <input type="password" name="password" placeholder="Password" class="field" required> <input type="submit" class="btn btn-block" value="log in"> <label class="label-form"><input type="checlout" class="btn-check"Remember me></label> <a href="" class="link">Forgot my password</a> </div> </div> </div> </form>
<div class="pricing classic"> <div class="container"> <div class="row"> <div class="col-sm-4 no-padding"> <div class="wrapper first"> <i class="fa fa-diamond"></i> <div class="title">Shared Hosting</div> <div class="period">from only</div> <div class="price"><sup>$</sup>23.99</div> <div class="period">per month</div> <ul class="list-info"> <li>90GB Disk Space</li> <li>500GB Bandwith</li> <li>35 Email Accounts</li> </ul> <a href="" class="btn">Order Now</a> </div> </div> <div class="col-sm-4 no-padding"> <div class="wrapper active"> <i class="fa fa-diamond"></i> <div class="title">Reseller Hosting</div> <div class="period">from only</div> <div class="price"><sup>$</sup>35.00</div> <div class="period">per month</div> <ul class="list-info"> <li>60GB Disk Space</li> <li>25 Limited Accounts</li> <li>SSD 10x Higher Performance</li> </ul> <a href="" class="btn">Order Now</a> </div> </div> <div class="col-sm-4 no-padding"> <div class="wrapper third"> <i class="fa fa-cloud"></i> <div class="title">Cloud VPS</div> <div class="period">from only</div> <div class="price"><sup>$</sup>109.99</div> <div class="period">per month</div> <ul class="list-info"> <li>4GB Memory</li> <li>60GB HDD RAID 10 SAN</li> <li>100Mbps Unlimited Traffic</li> </ul> <a href="" class="btn">Order Now</a> </div> </div> </div> </div> </div>
<div class="wrapper"> <div class="wrapper"> <div class="heading blog"><a href="#">Duis aute irure dolor</a></div> <div class="blog-info"> But I must explain to you... </div> <div class="text-blog"> <i class="fa fa-calendar"></i> <span>March 28, 2016</span>´ <i class="fa fa-user"></i> <span>by Philips</span>´ </div> <div class="social"> <i class="fa fa-facebook"></i> <i class="fa fa-twitter"></i> <i class="fa fa-linkedin"></i> </div> <div class="infos"> <i class="fa fa-thumbs-o-up"></i> <span>980</span> <i class="fa fa-comments-o"></i> <span>79</span> </div> <a href="#" class="btn classic classic-x">continue reading</a> </div> </div> </div>
<div class="google-maps"> <div class="map" data-lat="-37.754399" data-lng="144.973339" data-marker="img/marker.png" data-zoom="10" data-style="style-2"></div> </div>
To replace the google map link, click here
This Template has a Responsive layout and is based on the Bootstrap Framework. For more information about this visit Bootstrap
The default Bootstrap grid system utilizes 12 columns, making for a 1170px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.
<div class="container"> <div class="col-md-3"></div> <div class="col-md-9"></div> </div>
To nest your content with the default grid, add a new container and set of .col-md-? columns within an existing .col-md-? column. Nested rows should include a set of columns that add up to the number of columns of its parent.
<div class="container"> <div class="col-md-6"> <div class="col-md-2"></div> <div class="col-md-10"></div> </div> <div class="col-md-6"> <div class="col-md-8"></div> <div class="col-md-4"></div> </div> </div>
These are the css files that are loaded into templates in Head Section.
<link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/font-awesome.css" rel="stylesheet"> <link href="css/open-sans.css" rel="stylesheet"> <link href="css/lato.css" rel="stylesheet"> <link href="css/idangerous.swiper.css" rel="stylesheet"> <link href="css/magnific-popup.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <link href="css/responsive.css" rel="stylesheet"> <link href="css/slick.css" rel="stylesheet">
Dont change anything in bootstrap.min.css file. It may affect the whole theme.
By default, the template loads this font from css file, but you can change the font.
These are the JS files that are loaded into templates in end of the body section.
<script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/idangerous.swiper.min.js"></script> <script src="js/jquery.viewportchecker.min.js"></script> <script src="js/jquery.circliful.min.js"></script> <script src="js/jquery.countdown.js"></script> <script src="js/jquery.magnific-popup.min.js"></script> <script src="js/slick.min.js"></script> <script src="js/scripts.js"></script>