Foodera - Documentation

“Foodera - Responsive Food landing page Template”

Created: Sep 01, 2019
By: Thememor

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:


/*------------------------------------------------------------------
Template Name: Foodera - Responsive Landing Page Template
Version: 1.0
Author: Thememor
Author URL: https://themeforest.net/user/thememor
-------------------------------------------------------------------*/

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

	+ GLOBAL STYLES
	+ COMMON STYLES 
	+ HEADER STYLES 
	+ INTRO STYLES
	+ ICON BOX / SERVICES STYLES 
	+ INFO STYLES 
	+ TESTIMONIAL STYLES 
	+ ABOUT   
	+ FEATURES 
	+ PRICING TABLE  
	+ CLIENTS 
	+ CONTACT 
	+ MAILCHIMP 
	+ ELEMENTS 
	+ FOOTER 
	+ RESPONSIVE STYLES 

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

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

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 "Phone No" with the menu name and "#" with the page link or anchor link.



3. INTRO CONTENT

Intro Content

Find this code

		
        

            

                

                    

                        
Good food choices are good investments.

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

                        

                        

                            Order Now     
                            Learn More

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

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

replace "#" with the button links.

Same for all page section

4. ABOUT SECTION

Find this code and change image in images folder.

					
        

            
            

                

                    

                        

                            
                        

                        

                            
We even give you more solutions to grow your business.

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

							Learn More

5. Video Section

Open index.html file and find this code.

					

            

                
When a man's stomach is full it makes no 
 difference whether he is rich or poor.

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

                


                
                    

                         Watch Our Story

To change the video, replace the video link at <a> </a> link.

Replace the text between "<h1>" "</h1>" and "<p>" "</p>" with the service title and description.



6. Explore Our Foods - Section

Find this code

						

            

                

                    
Explore Our Foods 

                    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et purus a odio finibus bibendum in sit amet leo. Mauris feugiat erat tellus. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there
                        live the blind texts. Separated they live in Bookmarksgrove.

                

                

                    

                        

                            

                            

                                
Rainbow Vegetable Sandwich

                                
 Time: 15 - 20 Minutes | Serves: 1 

                                

                                    $10.50 $11.70
                                

                            

                            

                              Order Now

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

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


7. Testimonials

Find this code

					
        

            

                

                    
Testimonials 

                

                

                    

                        

                            

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

                                Simab Dave - Web Designer
                            

                            

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

                                Johnthan Doe - UX Designer
                            

                            

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

                                Maccy Doe - Front End

replace the text between "<p">" "</p>".
replace the text between "<span>" "</span>" with the author name.

Do the same for all four.

8. Frequently Asked Questions - Section

Find this code.


        

            

                
Frequently Asked Questions 

            

        


        

            

                

                    

                        
 ~ Is Foodera Bread really baked fresh each day?

                        
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language.

                    

                


                

                    

                        
 ~ Do you bake breads containing animal fats or products?

                        
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language.

                    

                

                

                    

                        
 ~ Can I order your products online?

                        
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language.

                    

                

                

                    

                        
 ~ When are you opening a shop near me?

                        
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language.

replace the text between "<p">" "</p>".
replace the text between "<h4>" "</h4>" with the author name.


9. Subscribe Form

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


define( "RECIPIENT_EMAIL", "info.thememor@gmail.com" );

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

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)




10. COPYRIGHT


					
© 2019. Foodera. All rights reserved.

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