Maximo - Creative Business and Innovative HTML5 Template

Thank you very much for purchasing our theme! If you have any questions that aren't covered in this documentation, please feel free to email us.

Overview

Maximo - Creative Business and Innovative HTML5 Template based on bootstrap 5x. With 6+ different home page layouts, 18+ Html files included Best Idea for small Business, creative Agencies, corporate web solution and business startup. High Resolution Images and google fonts.

It will be fit any mobile or tablet devices. This is a flexible template uses fresh and clean design.

  1. 6+ Different Conpepts: Modern, Digital Agency, Creative Agency
  2. Fully responsive
  3. Built With HTML5 and CSS3
  4. 15+ HTML Files
  5. CSS3 Animation Elements
  6. Working PHP Contact Form with a Simple Email Template,
  7. Includes Entire Font Awesome,
  8. Bootstrap 5.3.3
  9. Lightbox Photo Gallery.
  10. Friendly Sliders and Carousels.
  11. 500+ Bootstrap 5 Icons,
  12. Boxed and Wide Portfolio Layouts with animated filters.
  13. Responsive toggle menu for small devices, sticky menu when scrolling down,
  14. Google Fonts Used,
  15. Excellent Customer Supports.

File & Code Structure

Folders

-assets (all assets/required file of this template)
--bootstrap (bootstrap core files)
--css (all css files)
--owlSlider (all owl slider files)
--swiper slider (all swiper slider files)
--fonts (bootstrap icons and font-awesome font icon set )
--images (all images)
--js (all javascript files)
--magnific-popup (all files for image popup)
--owl-carousel (owl-carousel core files)
--simple-text-rotator (text rotator plugin)
--videos (html5 video formats)
- email-templates (a basic email template functional with contact form)
-and all other html files

 

HTML Structure

Being based on Twitter Bootstrap 5, Maximo inherits its awesome grid system. It's a responsive, mobile first  grid that appropriately scales up to 12 columns as the device or view port size increases.

Example markup:

<div class="row">
    <div class="col-md-12">
       Level 1 column
       <div class="row">
           <div class="col-md-6">Level 2</div>
           <div class="col-md-6">Level 2</div>
       </div>
    </div>
</div>

 

CSS Files

<link rel="stylesheet" href="assets/css/bootstrap.min.css'>	
<link rel="stylesheet" href="assets/css/owl.carousel.min.css'>
<link rel="stylesheet" href="assets/css/owl.theme.default.min.css'>
<link rel="stylesheet" href="assets/css/magnific-popup.min.css'>
<link rel="stylesheet" href="assets/css/scrollcue.css'>
<link rel="stylesheet" href="assets/css/swiper-bundle.min.css'>		
<link rel="stylesheet" href="assets/css/master.css'>
<link rel="stylesheet" href="assets/css/bootstrap-icons.css'>
<link rel="stylesheet" href="assets/css/all.min.css'>

@import url('https://fonts.googleapis.com/css2?family=Cascadia+Code:ital,wght@0,200..700;1,200..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap');

 

JavaScripts Files

<!-- jQuery Javascript Plugins -->
<script src="assets/js/jquery.min.js"></script> 
<script src="assets/js/plugins.js"></script> 
<script src="assets/js/master.js"></script>
 

Icons

There are two kinds of font icons used in this template.

  1. FontAwesome
  2. Bootstrap Icons

Font Awesome is a @font-face iconset that allows you to change size and color of the icons just using CSS.

To add an icon, simply create an empty element with class 'fa fa-[icon name]', for example: 

<i class="fa fa-file"></i>
<i class="fa fa-home"></i>
<i class="fa fa-envelope"></i>

 

Flaticon is also a @font-face iconset that allows you to change size and color of the icons just using CSS.

To add an icon, simply create an empty element with class 'mdi-[icon name]', for example:

<i class="bi bi-camera"></i>
<span class="bi bi-globe"></span>

Hero Units

You can use all hero units (slider sections) at any pages. Just copy the Intro Section or Video Section or Slider section and past it in any pages. You can create new pages with this bolcks.

Example:
If you wish to make your homepage with html video slider just copy this code and past it on your new page.

<!-- Hero section -->
		<div class="owl-carousel owl-nav-overlay owl-dots-overlay" data-owl-nav="true" data-owl-dots="true" data-owl-items="1">
			<!-- Slider Item 1 -->
			<div class="section-fullscreen bg-image bg-overlay" data-bg-src="assets/images/slides/slide-1.jpg">
				<div class="section-xl bg-dark-03">
					<div class="container text-center pt-5">
						<div class="row g-4">
							<div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2 z-index-1">
								<h5 class="fw-normal mb-3 text-white">We Turn Ideas Into Impact</h5>
								<h1 class="fw-bold uppercase letter-spacing-1">Let's build something extraordinary together.</h1>
								<a class="button button-xl button-radius button-outline-white mt-3 button-font-2" href="services.html">Our Services</a>
							</div>
						</div><!-- end row -->
					</div><!-- end container -->
				</div>
			</div>
			<!-- Slider Item 2 -->
			<div class="section-fullscreen bg-image bg-overlay" data-bg-src="assets/images/slides/slide-2.jpg">
				<div class="section-xl bg-dark-03">
					<div class="container text-center pt-5">
						<div class="row g-4">
							<div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2 z-index-1">
								<h5 class="fw-normal mb-3 text-white">Designs That Speak</h5>
								<h1 class="fw-bold uppercase letter-spacing-1">We Don't Just Create, We Wow</h1>
								<a class="button button-xl button-radius button-outline-white mt-3 button-font-2" href="contact.html">Work With Us</a>
							</div>
						</div><!-- end row -->
					</div><!-- end container -->
				</div>
			</div>
			<!-- Slider Item 3 -->
			<div class="section-fullscreen bg-image bg-overlay" data-bg-src="assets/images/slides/slide-3.jpg">
				<div class="section-xl bg-dark-03">
					<div class="container text-center pt-5">
						<div class="row g-4">
							<div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2 z-index-1">
								<h5 class="fw-normal mb-3 text-white">Your Creative Growth Partner</h5>
								<h1 class="fw-bold uppercase letter-spacing-1">From strategy to execution, we craft results that matter</h1>
								<a class="button button-xl button-radius button-outline-white mt-3 button-font-2" href="about-us.html">About Us</a>
							</div>
						</div><!-- end row -->
					</div><!-- end container -->
				</div>
			</div>
		</div><!-- end owl-carousel -->
		<!-- end Hero section -->

Important: Dont forget to add required CSS files and Javascript files at header and footer.

Shortcodes

You will get lots of shortcodes with this template. We made all shortcodes clean and re useable. 
You can use all shortcodes  at anywhere and in any pages of this template. Just copy any block you like and past it any where you wish.

Example:

<!-- Services section -->
		<div class="section">
			<div class="container">
				<div class="row icon-5xl g-4">
					<div class="col-12 col-lg-4">
						<div class="bg-white border-radius border p-5">
							<i class="bi bi-chat-text color-primary mt-2"></i>
							<h5 class="fw-normal mt-2">Marketing</h5>
							<p class="mb-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
						</div>
					</div>
					<div class="col-12 col-lg-4">
						<div class="bg-white border-radius border p-5">
							<i class="bi bi-star color-primary mt-2"></i>
							<h5 class="fw-normal mt-2">Development</h5>
							<p class="mb-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
						</div>
					</div>
					<div class="col-12 col-lg-4">
						<div class="bg-white border-radius border p-5">
							<i class="bi bi-camera color-primary mt-2"></i>
							<h5 class="fw-normal mt-2">Production</h5>
							<p class="mb-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
						</div>
					</div>
				</div><!-- end row -->
			</div><!-- end container -->
		</div>
		<!-- end Services section -->

Just copy this block and past anywhere of any page of this template. You can youse all individual blocks along with this template. 

HTML5 Video

The HTML5 <video> element specifies a standard way to embed a video in a web page. You can play a video in your webpage background or any section.  You can host video form root server or can add link form other server. 

For browser support you have to provide two format video(.webm/.ogg and .mp4)

The markup:

<!-- Parallax section -->
		<div class="section-2xl bg-image parallax" data-bg-src="assets/images/backgrounds/video-bg-1.jpg">
			<div class="bg-dark-03">
				<div class="container text-center">
					<a class="button-circle button-circle-xl button-circle-white-2 button-circle-ripple icon-xl button-hover-shrink lightbox-media-link" href="https://www.youtube.com/watch?v=zGRdsCNTebw">
						<i class="bi bi-play"></i>
					</a>
				</div><!-- end container -->
			</div>
		</div>
		<!-- end Parallax section -->

Contact Form

In Maximo HTML5 template there is full functional working contact form. We have also added a simple email template with this contact form.

To customize/change the email address please open  "sendemail.php" file from root folder in any code editor .  

Go to the line number 9.  There is a line: 

$to         = 'youremail@gmail.com'; //put your email here

Replace the existing email address with your own mailing address.

Thats it! your template is ready now for receive message from others via mail.

Sources & Credits

HTML/CSS

Twitter Bootstrap: http://getbootstrap.com/

animate.css: http://daneden.github.io/animate.css/

 

Fonts

Google Fonts: http://www.google.com/webfonts

Font Awesome: http://fontawesome.io/

 

JavaScripts

jQuery: https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

jQuery Easing: http://gsgd.co.uk/sandbox/jquery/easing/

megamenu: http://bootsnav.danurstrap.com/

smoothscroll: http://cferdinandi.github.io/smooth-scroll/

countTo: https://github.com/mhuggins/jquery-countTo

stellar: http://markdalgleish.com/projects/stellar.js/

Shuffle: http://vestride.github.io/Shuffle/

inview: https://github.com/protonet/jquery.inview

Gsap: https://gsap.com/

owl.carousel: http://owlgraphic.com/owlcarousel/

Photos and Videos

Important! 

The images used on the demo site are for demonstration purposes only and are not included in the download file. We have included placeholder images for each instance.
 
Slider Images: https://unsplash.com/ ,  http://www.freepik.com/,  http://www.pexels.com/
Once again, thank you very much for purchasing this template;  we'll be glad to help you if you have any questions.
 
Thanks,