Aman - Documentation

“Aman - Responsive Multipurpose landing page”

Created: April 01, 2020
By: Divine-Store


Table of Contents

  1. HTML Structure
  2. CSS Files and Structure
  3. JavaScript
  4. Tutorial
  5. Sources and Credits

A) HTML Structure - top

This theme is a Responsive layout with four column. Based on Bootstrap Framework. All of the information within the main content area is nested within a div with an id of "container". The sidebar's (column #2) content is within a div with an id of "secondaryContent". The general template structure is the same throughout the template. Here is the general structure.

HTML Structure

If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following:

For header
/* 3. HEADER STYLES */

.navbar-fixed-top {
	position: fixed;
	right: 0;
	left: 0;
	font-family: 'Poppins', sans-serif;
	border-width: 0;
	border-radius: 0;
	background: transparent;

}

.navbar-inverse {
	transition: .4s;
}

.navbar {
	min-height: 86px;
	margin-bottom: 0;
	border: none;
}


So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.


B) CSS Files and Structure - top

I'm using Five CSS files in this theme. The first one is the main source file for bootstrap framework

The second file contains all of the specific stylings for the page. The file is separated into sections using:


/*------------------------------------------------------------------
[TABLE OF CONTENTS]

	+ GLOBAL STYLES
	+ COMMON STYLES 
	+ PRELOADER
	+ HEADER STYLES 
	+ INTRO STYLES
	+ ICON SERVICES STYLES 
	+ INFO STYLES 
	+ TESTIMONIAL STYLES 
	+ CLIENTS 
	+ TEAM 
	+ CONTACT 
	+ ELEMENTS 
	+ FOOTER 
    + RESPONSIVE STYLES 

-------------------------------------------------------------------*/

etc....

The fourth file contains all of the specific stylings for Slick Carousel.

The fifth file contains all of the specific stylings for Font-Awesome Icons.

Dont change anything in first(bootstrap.css) file.

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.


C) JavaScript - top

This theme imports Thirteen Javascript files.

  1. jQuery
Details
  1. jquery.js
  2. bootstrap.min.js
  3. vendors/slick/slick
  4. vendors/stellar.js
  5. vendors/isotope/isotope.pkgd.js
  6. vendors/swipebox/js/jquery.swipebox.min.js
  7. main.js
  8. vendors/mc/jquery.ketchup.all.min.js
  9. vendors/mc/main.js
  10. vendors/gmap.js

D) Tutorial - top

Follow the steps below to change the demo contents with your own contents.



1. LOGO SECTION

To replace the logo name, find this code

	logo


2. NAVMENU

Open index.html file and find this code.

	

Replace with the menu name and "#" with the page link or anchor link.




3. INTRO CONTENT

Intro Content

Find this code

		 
        

Aman is Perfact
Template For Your
Business.

icon

Get a Quote

Lorem ipsum dolor sit amet consec tetur elit amet voluptas accusamus dolor.

icon

Confirm Booking

Lorem ipsum dolor sit amet consec tetur elit amet voluptas.

Get a Quote
home

replace the text between "<h4>" "</h4>" and "<p>" "</p>" with the intro title and description.

replace "Get a Quote" with the button name.

replace "#" with the button links.

same do for all intro sections

4. CLIENTS SECTION

Find this code and change image in images folder.

					
        


5. TESTIMONIALS

Open index.html file and find this code.

					
    

What They say about us?

Testimonials

"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live."

- Jerry Doe -
Web Designer @abc

To replace the icon, go to this link and choose your icon and replace "icon-box-square" with your icon name. or go to "css/icons" folder and open each folder and open .html file in browser and choose your icon

Replace the text between "<h4>" "</h4>" and "<p>" "</p>" with the service title and description.
This will be the same for all service columns.




6. GOOGLEMAP

Open "index.html" and find this.


Go to this link and in the search bar update your location or address and press go.
Scroll down the page to see the embed of your location. Copy that here in link and save.



7. COPYRIGHT


					 
    
					

Replace the Copyright contents with yours.




Thats it. You are done. Now your website is ready to launch.





E) Sources and Credits - top

I've used the following vectors, icons files as listed.


All images, Icons, Logos, Fonts used in this template are free for commercial use.

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Author Name

Go To Table of Contents