Introduction

Template Name: HyperExtra - Landing Pages

Version: 2.0.0

Created On: 15 March 2023

Author: LettstartDesign

Email: support@lettstartdesign.com

HyperExtra is powerful and stunning agency landing page template based on bootstrap framework. HyperExtra is high customisable, fully responsive and flexible template built with Bootstrap 5.3, HTML5, SaSS, jQuery and Gulp. It helps you to create well designed Agency landing pages.

With HyperExtra you’re not limited to creating a single web page. You’ll have over many pre-built page templates to choose from, covering many popular scenarios and content types. All the page templates are highly customizable.

HyperExtra comes with 6+ different pages and helper pages. HyperExtra is a responsive HTML template that is based on the CSS framework Bootstrap 5.3 and it is built with SaSS. SaSS compiler makes it easier to code and customize. If you are unfamiliar with Bootstrap or SaSS, visit their website and read through the documentation. All of Bootstrap components have been modified to fit the style of HyperExtra and provide a consistent look throughout the template.

Before you start working with the template, we suggest you go through the pages that are bundled with the theme. Most of the template example pages contain quick tips on how to create or use a component which can be really helpful when you need to create something on the fly.

HyperExtra is packed with pages that come complete with documented code to simplify the customization process.

Note: We are trying our best to document how to use the template. If you think that something is missing from the documentation, please do not hesitate to tell us about it. If you have any questions or issues regarding this theme email at support@lettstartdesign.com or generate ticket on our portal.

By purchasing this template, you are assured with detailed documentation along with 1 Year Premium Support by our dedicated support team and free lifetime updates from us.

Dependencies

Template Features

  • HTML5 & SCSS
  • Bootstrap v4.3.1
  • Gulp
  • 6+ Home Header Variants
  • 6+ Combination of Blog and Detail Pages
  • Working Contact form integrated with PHP
  • Easy to Customize components
  • Responsive Design
  • Best Coding Standard followed
  • Pixel Perfect Design
  • Clean Code & Unique Design
  • Easy to Customize

Installation

After download a source package From our Store.

Install Node.js From https://nodejs.org/en/download/

After that open command promt or any other terminal and go to Package Path.

cd [root] / code /

Npm is a default package manager for the JavaScript runtime environment Node.js. If you've already then update once.

npm install --global npm@latest

To check weather is node succesfully install or not.

npm --version

For yarn package manager.

npm install --global yarn

To check weather is yarn succesfully install or not.

yarn --version

Now, run the below command(This command will install the necessary libraries in node_modules folder which is generated by this command):

npm install

Normally project will run on the localhost:3000 or it will take port accordingly and for run the project run the below command:

gulp watch or npm start

How to Install npm dependencies?

In your root folder enter the following command to install the project dependencies: npm install, this command will install all the template libraries inside the node_modules folder.

How to Install npm packages?

npm install packagename, this command will install the package in node modules.

Getting Started

After unzip the downloaded pack, you'll get a APPfolder. Inside the APP folder you will get DIST and SRC. DIST folder is compiled version of SRC. SRC is raw files using gulp you will generate the dist files. All the configuration of gulp will be in gulp file.

You can directly use the compiled DIST and ready-to-use the version of the template. But in case you plan to customize the template extensively the template allows you to do so. You need to edit in SRC files by the help of gulp it convert the SRC files into DIST files and You will able to see the changes.

You can view this Template in any browser, you can display or edit the Template without an internet connection.(May not works fonts).

After change in any files or you add any assets like javascript, css, images. You need to upload on the server. To upload file on server open your cpanel/controlpanel or open filezilla and upload the content/assets of the Template on your server's root directory.

Once the files are done uploading go to www.yourdomainname.com/index.html

Folder Structure

You can directly use the compiled and ready-to-use the version of the template. But in case you plan to customize the template extensively the template allows you to do so.

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

  • app ├──
    • dist ├──
      • assets ├──
        • ├── css
        • ├── js
        • ├── fonts/
        • ├── img/
        • ├── vendors/
      • php ├──
      • HTML Files 
    • src ├──
      • assets ├──
        • ├── css
        • ├── js
        • ├── fonts/
        • ├── img/
        • ├── vendors/
        • ├── scss/
      • partials ├──
      • php ├──
      • HTML Files 
  • Documentation
  • gulpfile.js
  • package.json

Template Structure

All information within the main content area is nested within a body tag. The general template structure is pretty the same throughout the all template's. Here is the general structure of all the pages.

                                    
<!DOCTYPE html>
	<html lang="en">
	
	<head>
	</head>
	
	<body>
		<!-- pageWrapper -->
		<div id="pageWrapper">
			<!-- pageHeader -->
			<header id="pageHeader" class="position-absolute py-4 py-lg-5">
				<!-- content here -->
				...
			</header>
			<!-- searchPopup -->
			<div class="searchPopup">
				<!-- content here -->
				...
			</div>
			<main>
				<!-- bannerSec -->
				<section data-scroll-index="0" class="bannerSec overflow-hidden">
					<!-- bannerSlide -->
					<div class="bannerSlide owl-carousel">
						<!-- content here -->
						...
					</div>
				</section>
				<!-- abUsSec -->
				<section data-scroll-index="1" class="abUsSec py-md-20 py-15">
					<div class="container">
						<div class="row">
							<div class="col-12">
								<!-- header -->
								<header class="header text-center mb-8 mb-md-10 mb-xl-14">
									<h2 class="mb-5">
										<strong class="h6 font-weight-light mb-3 text-primary text-capitalize d-block fontRoboto">about
											us</strong>
										<strong class="text-uppercase d-block">creative agency</strong>
									</h2>
								</header>
							</div>
						</div>
						<div class="row align-items-center">
							<!-- content here -->
							...
						</div>
					</div>
				</section>
				<!-- ourSkill -->
				<section data-scroll-index="1" class="bg-light py-md-20 py-15">
					<div class="container">
						<div class="row">
							<div class="col-12">
								<!-- header -->
								<header class="header text-center mb-8 mb-md-10 mb-xl-13">
									<h2 class="mb-5 mb-md-7">
										<strong class="h6 font-weight-light mb-3 text-primary text-capitalize d-block fontRoboto">Our
											skills</strong>
										<strong class="text-uppercase d-block">awesome skills</strong>
									</h2>
								</header>
							</div>
						</div>
						<div class="row">
							<!-- content here -->
							...
						</div>
					</div>
				</section>
				<!-- ourSec -->
				<section data-scroll-index="2" class="ourSec py-md-20 py-15">
					<div class="container">
						<div class="row">
							<div class="col-12">
								<header class="header text-center mb-8 mb-md-10 mb-xl-14">
									<h2 class="mb-5 mb-md-7">
										<strong class="h6 font-weight-light mb-3 text-primary text-capitalize d-block fontRoboto">Our
											Services</strong>
										<strong class="text-uppercase d-block">Get Your Services</strong>
									</h2>
								</header>
							</div>
						</div>
						<div class="row">
							<!-- content here -->
							...
						</div>
					</div>
				</section>
				<!-- customerService -->
				<section data-scroll-index="2" class="customerService position-relative overlay d-flex wow fadeIn" data-wow-duration="600ms">
					<div class="alignCenter w-100 d-flex align-items-center">
						<div class="container py-12">
							<div class="row">
								<!-- content here -->
								...
							</div>
						</div>
					</div>
					<span class="bgImg bgCover position-absolute" style="background-image: url(assets/img/video-bg.jpg);"></span>
				</section>
				<section data-scroll-index="3" class="pt-md-20 pt-15">
					<div class="container">
						<div class="row">
							<div class="col-12">
								<!-- header -->
								<header class="header text-center mb-8 mb-md-10 mb-xl-14">
									<h2 class="mb-5 mb-md-7">
										<strong class="h6 font-weight-light mb-3 text-primary text-capitalize d-block fontRoboto">Our
											works</strong>
										<strong class="text-uppercase d-block">Featured Projects</strong>
									</h2>
								</header>
							</div>
							<div class="col-12">
								<!-- content here -->
								...
							</div>
						</div>
					</div>
				</section>
				<!-- cHBlock -->
				<section data-scroll-index="3" class="cHBlock bg-primary py-md-12 py-10">
					<div class="container">
						<div class="row">
							<!-- content here -->
							...
						</div>
					</div>
				</section>
				<!-- Team -->
				<section data-scroll-index="4" class="py-md-20 py-15">
					<div class="container">
						<div class="row">
							<div class="col-12">
								<!-- header -->
								<header class="header text-center mb-8 mb-md-10 mb-xl-14">
									<h2 class="mb-5 mb-md-7">
										<strong class="h6 font-weight-light mb-3 text-primary text-capitalize d-block fontRoboto">Our
											Team</strong>
										<strong class="text-uppercase d-block">Creative Team</strong>
									</h2>
								</header>
							</div>
						</div>
						<div class="row">
							<!-- content here -->
							...
						</div>
					</div>
				</section>
				<!-- PricingTable -->
				<section data-scroll-index="5" class="bg-light py-md-20 py-15">
					<div class="container">
						<div class="row">
							<div class="col-12">
								<!-- header -->
								<header class="header text-center mb-8 mb-md-10 mb-xl-14">
									<h2 class="mb-5 mb-md-7">
										<strong class="h6 font-weight-light mb-3 text-primary text-capitalize d-block fontRoboto">Pricing
											Table</strong>
										<strong class="text-uppercase d-block">The Best Price Offers</strong>
									</h2>
								</header>
							</div>
						</div>
						<!-- pricePlanList -->
						<div class="row pricePlanList">
							<!-- content here -->
							...
						</div>
					</div>
				</section>
				<!-- Testimonial -->
				<section data-scroll-index="6" class="py-md-22 py-17">
					<div class="container">
						<div class="row">
							<div class="col-12">
								<!-- header -->
								<header class="header text-center mb-8 mb-md-10 mb-xl-14">
									<h2 class="mb-5 mb-md-7">
										<strong
											class="h6 font-weight-light mb-3 text-primary text-capitalize d-block fontRoboto">testimonials</strong>
										<strong class="text-uppercase d-block">our clients</strong>
									</h2>
								</header>
							</div>
						</div>
						<div class="row d-block mb-8">
							<!-- content here -->
							...
						</div>
					</div>
				</section>
				<!-- Blog -->
				<section data-scroll-index="7" class="bg-light py-md-20 py-15">
					<div class="container">
						<div class="row">
							<div class="col-12">
								<!-- header -->
								<header class="header text-center mb-8 mb-md-10 mb-xl-14">
									<h2 class="mb-5 mb-md-7">
										<strong class="h6 font-weight-light mb-3 text-primary text-capitalize d-block fontRoboto">Our
											Blog</strong>
										<strong class="text-uppercase d-block">Our Latest News</strong>
									</h2>
								</header>
							</div>
						</div>
						<div class="row justify-content-center">
							<!-- content here -->
							...
						</div>
					</div>
				</section>
				<!-- Contact -->
				<section data-scroll-index="8" class="py-md-20 py-15">
					<div class="container">
						<div class="row">
							<div class="col-12">
								<!-- header -->
								<header class="header text-center mb-8 mb-md-10 mb-xl-14">
									<h2 class="mb-5 mb-md-7">
										<strong class="h6 font-weight-light mb-3 text-primary text-capitalize d-block fontRoboto">contact
											us</strong>
										<strong class="text-uppercase d-block">get in touch</strong>
									</h2>
								</header>
							</div>
							<!-- contactForm -->
							<div class="contactForm w-100">
								<!-- content here -->
								...
							</div>
						</div>
					</div>
				</section>
				<!-- mapHolder -->
				<div class="mapHolder" data-scroll-index="8">
					<iframe
						src="https://maps.google.com/maps?width=100%&height=600&hl=en&q=new%20delhi+(My%20Business%20Name)&ie=UTF8&t=&z=14&iwloc=B&output=embed"
						style="border:0;" allowfullscreen=""></iframe>
				</div>
			</main>
			<!-- footerAreaWrap -->
			<div data-scroll-index="8" class="footerAreaWrap">
				<!-- footerHolder -->
				<div class="footerHolder pt-11 pb-lg-4">
					<!-- content here -->
					...
				</div>
				<!-- footerArea -->
				<footer class="footerArea py-5 py-md-6">
					<div class="container">
						<!-- content here -->
						...
					</div>
				</footer>
			</div>
		</div>
	</body>
	
	</html>
CSS Files and Structure

These are the css files that are loaded into templates in head tag. 

                                    
<!-- include the site fontawesome stylesheet -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">

<!-- include theme plugins setting stylesheet -->
<link rel="stylesheet" href="assets/css/plugins.min.css">

<!-- include the site bootstrap stylesheet -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">

<!-- include the site stylesheet -->
<link rel="stylesheet" href="assets/css/style.min.css">

Please use your own custom css. It would make theme style as it is before and add your new style just below to theme style.

Javascript Files and Structure

These are the css files that are loaded into templates in the end of body tag. 

                                    
<!-- include app plugin JavaScript -->
<script src="assets/js/plugins.min.js"></script>
<!-- include app JavaScript -->
<script src="assets/js/app.js"></script>

Fonts

By default, the template loads this font from Google Web Font Services, you can change the font with the one that suits you best.

                                    
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900%7CRoboto:400,500,700,900&display=swap" rel="stylesheet">

Default Fonts: Roboto, Poppins

We are using Roboto as body font's and Poppins as heading font's in our templates.

Remember to change the font into style.scss If you are using SASS. Without using sass change in style.css

Icons

Font Awesome: <i class="fa fa-eye"></i>

ET Line Icon: <i class="icon-mobile"></i>

References

Term Website
jQuery http://jquery.com/
Modernizr https://modernizr.com
Scroll It http://www.bytemuse.com/scrollIt.js/
Wow JS https://wowjs.uk/
Smooth Scroll https://github.com/cferdinandi/smooth-scroll
Owl Carousel 2 https://owlcarousel2.github.io/OwlCarousel2/index.html
Mcustom Scrollbar http://manos.malihu.gr/jquery-custom-content-scroller/3/
Isotopes https://isotope.metafizzy.co/
Bootstrap https://getbootstrap.com
FontAwesome https://fontawesome.com/icons
Google Fonts https://fonts.google.com/
jQuery Validation https://jqueryvalidation.org/
Photoswipe https://photoswipe.com/
Shuffle JS https://vestride.github.io/Shuffle/
Pixabay https://pixabay.com/
CounterUp http://bfintal.github.io/Counter-Up/demo/demo.html
Magnific Popup https://dimsemenov.com/plugins/magnific-popup/

While images and illustration are not included in the download package – but if you need the images and illustration please feel free to contact with us.

This Template is not WordPress Theme, and can’t be installed in WordPress.

Support

We are committed to our customers and support is at up most priority. If you have any question, issue with App Landing, please feel free to contact us via email support@lettstartdesign.com or generate ticket on our portal.

What's includes
  • Answering your questions or problems regarding the template.
  • Giving or Solving bugs report by you.
What's not includes
  • Customization Work
  • Support for third party plugins.
  • Support or guide how to integrate with backend technologies(like php, java, .net, etc).