Documentation

Open up your FTP manager and connect to your hosting
Browse to required directory (Normally public_html)
Upload the files inside Ahope/HTML folder.

100 pages are include in this template. And there 50 pages for light version and 50 pages for dark version.

Home page
1. index.html (defult home page)
2. home_2.html
3. home_3.html
4. home_4.html
5. home_5.html
6. home_6.html
7. home_7.html
8. home_8.html
about_us.html
wordpress.html
dadicated_hosting.html
vps_hosting.html
shared_hosting.html
faq.html
order.html
team.html
team_2.html
contact.html
contact_2.html
product.html
terms_and_condition.html
comming_soon.html
knowldge.html
404.html
Blog pages
1. blog_full_with_content.html
2. blog_full_with_grid.html
3. blog_full_with_left.html
4. blog_full_with_right.html
5. blog_grid.html
6. blog_masonry.html
7. blog_simple.html
8. blog_single_with_left_side_bar.html
9. blog_single_with_right_side_bar.html
10. blog_two_column_grid.html
11. blog_two_column_left.html
12. blog_two_column_right.html
Element pages
1. call_to_actions.html
2. blogs.html
3. clients.html
4. counters.html
5. features.html
6. footers.html
7. pricing.html
8. promo_video.html
9. services.html
10. testimonials.html
sign_in.html
sign_up.html
reset_password.html
reset_new_passwoord.html

Html Structure

Ahope- Web Hosting and Domain Html Template is built with the Bootstrap 4 framework - that means you have access to all the great features, css & js goodies has to offer. Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

Here is the basic HTML structure.

						
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<!-- Favicon -->
		<link href="img/favicon.ico" rel="shortcut icon">
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
		<!-- themify icon -->
		<link rel="stylesheet" type="text/css" href="css/themify-icons.css">
		<!-- colorbox popup -->
		<link rel="stylesheet" type="text/css" href="css/colorbox.css">
		<!-- swiper slider -->
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
		<!-- Animate Css -->
		<link rel="stylesheet" type="text/css" href="css/animate.css">
		<!-- Google Font- Rubik -->
		<link href="https://fonts.googleapis.com/css?family=Rubik:400,500,700" rel="stylesheet">
		<!-- Google Font- Fira sans -->
		<link href="https://fonts.googleapis.com/css?family=Fira+Sans:300,400,400i,500,700" rel="stylesheet">
		<!-- CSS -->
		<link href="css/style.css" rel="stylesheet">
	</head>
	<body>
		<!-- Pre-loader -->
		<div class="preloader">
		</div>

		<!-- mobile menu icon -->
		<a class="burger_icon burger_2 d-md-flex d-lg-none navbar-toggler" 
		data-toggle="collapse" data-target="#mega_menu"></a>

		<!-- Start Header Section -->
		<header class="header_wrap">
		</header>
		<!-- End Header Section -->

		<!-- Start Hero Section -->
		<section class="hero_area">
		</section>
		<!-- End Hero Section -->
			
		!-- Others Sections --!

		<!-- Start Footer Section -->
		<footer class="simple_clean">
		</footer>
		<!-- End Footer Section -->

		<!--jQuery JS-->
		<script src="js/jquery-3.3.1.min.js"></script>
		<script src="js/popper.min.js"></script>
		<!-- Bootstrap -->
		<script src="js/bootstrap.min.js"></script>
		<!-- colorbox popup -->
		<script src=js/jquery.colorbox-min.js></script>
		<!-- Swiper Slider -->
		<script src=js/swiper.min.js></script>
		<!-- waypoints -->
		<script src=js/jquery.waypoints.min.js></script>
		<!-- Custom js -->
		<script src=js/main.js></script>
	</body>
</html>

Css Structure

SASS File Structure. We split sass in many partials for codeing every section indivisually. If yon not use sass then you get all sections code in css/style.css file.

------------------------------------
	TABLE OF CONTENTS:
------------------------------------

	1. Mixins
	2. Variables
	3. Common Classes
	4. Default
	5. Header
	6. Main menu
	7. Hero area section
	8. Search overlay 
	9. Testimonial sections
	10. Client sections
	11. subscribe sections
	12. Tooltip
	13. Info Sections
	14. Team sections
	15. Accordion sections
	16. Footer sections
	17. Feature sections
	18. Domain search Sections
	19. Blog section and pages
	20. Call to action sections
	21. Pricing sections
	22. Service sections
	23. Promo video sectons
	24. Terms and condition page
	25. Faq page
	26. Orderpage
	27. Product page
	28. Knowledge page
	29. Contact pages
	30. About us page
	31. Coming Soon page
	32. Sign in page
	33. Sign up page
	34. Reset password page
	35. 404 page
	36. Home 1 page
	37. Home 2 page
	38. Home 3 page
	39. Home 4 page
	40. Home 5 page
	41. Home 6 page
	42. Home 7 page
	43. Home 8 page

Javascript files

js/jquery-3.3.1.min.js
js/bootstrap.min.j
js/popper.min.js
js/jquery-3.3.1.min.js
js/jquery.colorbox-min.js
js/jquery.waypoints.min.js
js/jquery.counterup.min.js
js/isotope.pkgd.min.js
js/particles.min.js
js/main.js --most of custom javasript here

Variables

By updating variable property you can change both font and background color easily.

Mixins

Most of Gradient propery in sass/mixins.sass file. transition property, gradient color include in this file.

Common Class

Common Classes in sass/common_class.sassfile. pulse button/video button, heading style, gradient button, some background colors include in this file

Heading Style

In this template 4 type of heading. There are includes in sass/common_class.sass file.

Included Libraries

Used Fonts

Rubik (google.com/fonts/specimen/Rubik)
Fira sans (fonts.google.com/specimen/Fira sans)
Themify icon (themify.io)
Themify Icon gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

Used Photos in Demo

Freepik - freepik.com

Ahope- Web Hosting and Domain Html Template

FTP Upload

HTML files are includes

Template Structure