Masnoo - Documentation

“Masnoo - Responsive Multipurpose landing page”

Created: Nov 15, 2018
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 
.overlay {
	background: #151515;
	opacity: 0.5;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

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

  1. Import section
  2. Basic styles
  3. Typography
  4. Breakpoint for high-res devices
  5. Header
  6. Product
  7. Photo
  8. Icons
  9. Subscribe
  10. Promo
  11. Pricing table
  12. Join now
  13. Clients
  14. Projects
  15. Testimonials  
  16. Contact
  17. Footer
  18. Breakpoints

*/


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.backstretch.min.js
  2. slick.min.js
  3. featherlight.min.js
  4. jquery.wordrotator.min.js
  5. jquery.countdown.js
  6. wow.min.js
  7. ds-masnoo.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


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



2. INTRO CONTENT

Intro Content

Find this code

					




Let's make project management easy 












 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et purus a odio finibus bibendum in sit amet leo. Mauris feugiat erat tellus. behind the word mountains.

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

replace "Purchase Now" and "Learn More" with the button name.

replace "#" with the button links.

Same for all intro pages


3. Intro Newsletter (mailchimp)

Open "subscribe.php" file from "PHP" folder and find this.

$apiKey = 'YOUR_API_KEY';

Replace "YOUR_API_KEY" with your mailchimp API key - How to get API key?


$listId = 'YOUR_LIST_ID';

Replace "YOUR_LIST_ID" with your mailchimp newsletter list id - How to get List ID?


$submit_url = "http://us3.api.mailchimp.com/1.3/?method=listSubscribe";

Replace "us3" with your actual data center (You can find the data center on the API key)




4. SERVICES SECTION

Find this code.

					







Flexible Projects


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et purus a odio finibus bibendum in sit amet leo. Mauris feugiat erat tellus.











 Project Timelines


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et purus a odio finibus bibendum in sit amet leo. Mauris feugiat erat tellus.











Powerful Tasks & Subtasks


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et purus a odio finibus bibendum in sit amet leo. Mauris feugiat erat tellus.

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.



5. TESTIMONIALS

Find this code

						
	


























See what our experts says about us.We
 have got over 1000s of positive reviews.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et purus a 
 odio finibus bibendum in sit amet leo.









Lorem ipsum dolor sit amet, lectus sed enim, vitae iaculis hendrerit interdum in tellus, nunc donec. Non amet morbi sit diam ut. Pedesem



KEVI ANDERSONCO-COMPANY

replace the text between "<p>" "</p>" with the quote info.

replace the text between "<div class="author">" "</div>" with the quote author info.


6. PRICING TABLE

Find this code

					
	









Select the plan that suits you. Upgrade,
downgrade, or cancel anytime.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et purus a
 odio finibus bibendum in sit amet leo.














Personal Plan


Simpliest plan available

$9/ YEARLY

    

  • 3 Projects
    • 

  • Team Collaboration
    • 

  • Analytics & Reports
    • 

  • One user
    • 


choose This plan






BEST VALUE



Startup Plan


Simpliest plan available

$29/ YEARLY

    

  • 3 Projects
  • 

  • Team Collaboration
  • 

  • Analytics & Reports
  • 

  • 10 Active users
  • 


choose This plan









Enterprise Plan


Everything you need

$149/YEARLY

    

  • Unlimited Projects
    • 

  • Team Collaboration
    • 

  • Analytics & Reports
    • 

  • Priority Support
    • 


choose This plan

replace "Startup" with the plan name.
replace the text between "<div class="pricing__price">" "</div>".
replace the text between "<li>" "</li>" with the plan features.
replace the "#" in "<a href="#">" with the link to the plan page or checkout page.

Do the same for all four.

8. CONTACT FORM

Open "contact.php" file from "PHP" folder and find this code.


define( "RECIPIENT_NAME", "YOUR_NAME_HERE" );
define( "RECIPIENT_EMAIL", "YOUR_EMAIL_HERE" );

Replace "YOUR_NAME_HERE" with your name
Replace "YOUR_EMAIL_HERE" with your email, where you want to receive the mails.



9. COPYRIGHT


					
© 2018. All Rights Reserved by Masnoo.

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 images, icons, plugins, fonts or other 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