Marlon

Creative Agency

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here or create a ticket on our support forum. Thanks so much!

About

Marlon it’s clean and professional html template, is perfect for both agencies and creative studios but also for modern artist & creative people

HTML Structure

This template is a responsive layout with 12 columns. The general template structure is the same throughout the template. Here is the general structure.

        

        	

        		...
        	


            

                

                	
                

            


            

                

                	...
                

            


            

                

                    

                    	

                    		

                    		...
                    	

                    ...

CSS files and structure

We are using 4 css sources in this template.

  1. style.css - Contains all of the specific stylings for the template.
  2. dark.css - Contains all of the specific stylings to change the template color scheme to dark.
  3. animate.css & animsition.min.css - Contains all of the specific stylings for the included animations.
  4. all.min.css - Contains all of the specific stylings for FontAwesome.
  5. bootstrap.min.css - Contains all of the specific stylings for Bootstrap elements (grid,...).
  6. responsive.css - Contains all of the specific responsive stylings.
  7. slick-theme.css and slick.css - Contains all of the specific stylings for Slick.
style.css is separated into sections using: 
			1 - UNIQUE HOMEPAGE 
			2 - RESET CSS
			3 - ABOUT US
			4 - TEAM
			5 - PROCESS SECTION
			6 - LATEST PROJECTS
			7 - TESTIONIAL SECTION
			8 - CONSULTATION HELP
			9 - BLOG POSTS SECTION
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.

Tutorial

Lets start editing the template. Open index.html file and follow the steps below.

Most of the edits are the same for all versions.

Header - Logo
Put your image to assets/images and then replace 
...
with

Navmenu

This is the basic structure.
  1. Replace MENU_ITEM_TITLE with the name of the item.
  2. Replace MENU_ITEM_URL with an external link to the page.
  3. Apply the same instructions for every menu item. You can add multiple menu items.
  4. You can also add nested elements by following NESTED_MENU example.

Mobile Navmenu

This is the basic structure of Mobile Menu.
  1. Replace MENU_ITEM_TITLE with the name of the item.
  2. Replace MENU_ITEM_URL with an external link to the page.
  3. Apply the same instructions for every menu item. You can add multiple menu items.
  4. You can also add nested elements by following NESTED_MENU example.

Main Slider

This is the basic structure of the main slider.
  1. Replace MAIN_TEXT with the main idea of the website.
  2. Replace TITLE with the title of the website.
  3. Replace SUBTITLE with the subtitle of the website.
  4. Replace BUTTON_TEXT with the action button text.
  5. Replace BUTTON_URL with the action button URL.
  6. Replace SLIDE_TITLE with the slide title.
  7. Replace SLIDE_IMAGE with the slide image URL.
  8. Replace SOCIAL_LINK with the social link.

About

        

			

				

					

						
ABOUT_SECTION_TITLE

						

							

								

									
ABOUT_SECTION_SUBTITLE

									Send e-mail
								

							

							

								

									
ABOUT_SECTION_DESC

								

							

						

						

							
						

						

							
ABOUT_SECTION_DESC_EXT_TITLE

							
ABOUT_SECTION_DESC_EXT
  1. Replace ABOUT_SECTION_TITLE with the title of the About section.
  2. Replace ABOUT_SECTION_DESC with the description of the About section.
  3. Replace ABOUT_SECTION_SUBTITLE with the subtitle of the About section.
  4. Replace ABOUT_SECTION_GET_IN_TOUCH with the contact form URL.
  5. Replace ABOUT_SECTION_IMAGE with the image URL.
  6. Replace ABOUT_SECTION_DESC_EXT_TITLE with the extended description title of the About section.
  7. Replace ABOUT_SECTION_DESC_EXT with the extended description of the About section.

Project HD

        

			

				

					

						

							
						

					

					

						

							
PROJHD_SECTION_TITLE

							
PROJHD_SECTION_DESC

							Start Now
  1. Replace PROJHD_SECTION_TITLE with the title of the Project HDsection.
  2. Replace PROJHD_SECTION_DESC with the decription of the Project HD section.
  3. Replace PROJHD_SECTION_BTN_URL with the URL of the Start Now button.

Featured Project

        

			

				

					
FEAT_PROJ_SECTION_TITLE

				

				

					

						

							

								

									
FEAT_PROJ_SECTION_ITEM_TITLE

									FEAT_PROJ_SECTION_ITEM_SUBTITLE
									
FEAT_PROJ_SECTION_ITEM_DESC

								

							

							

								

									

										
										

											
FEAT_PROJ_SECTION_ITEM_TITLE

											FEAT_PROJ_SECTION_ITEM_TAGS
										

									

								

							

						

					

					...
  1. Replace FEAT_PROJ_SECTION_TITLE with the title of the Featured Projects section.
  2. Replace FEAT_PROJ_SECTION_SUBTITLE with the subtitle of the Featured Projects section.
  3. Replace FEAT_PROJ_SECTION_ITEM_TITLE with the title of the Featured Projects section item.
  4. Replace FEAT_PROJ_SECTION_ITEM_SUBTITLE with the subtitle of the Featured Projects section item.
  5. Replace FEAT_PROJ_SECTION_ITEM_DESC with the item description.
  6. Replace FEAT_PROJ_SECTION_ITEM_IMG with the image URL.
  7. Replace FEAT_PROJ_SECTION_ITEM_TAGS with the item tags.

Innvo

        

			

				

					

						

							

								
INNVO_SECTION_ITEM_TITLE

								
INNVO_SECTION_ITEM_DESC

							

							...
						

					

					

						

							
						

					

				

				

					
					PLAY OUR REEL
  1. Replace INNVO_SECTION_ITEM_TITLE with the title of the Innvo section item.
  2. Replace INNVO_SECTION_ITEM_DESC with the description of the Innvo section item.
  3. Replace INNVO_SECTION_PLAY with the video URL.
  4. Replace INNVO_SECTION_PLAY_IMG with the image URL.

Clients

        

			

				

					

						

							

								
CLIENTS_SECTION_TITLE

								
CLIENTS_SECTION_SUBTITLE/h2>
							

						

						

							

								
CLIENTS_SECTION_DESC
  1. Replace CLIENTS_SECTION_TITLE with the title of the Clients section.
  2. Replace CLIENTS_SECTION_DESC with the description of the Clients section.
  3. Replace CLIENTS_SECTION_SUBTITLE with the subtitle of the Clients section.
  4. Replace CLIENTS_SECTION_IMAGE with the image URL.

Testimonials

        

			

				

					

						
TESTIMONIALS_TEXT

						TESTIMONIALS_EMAIL
  1. Replace TESTIMONIALS_TEXT with the text of the testimonial.
  2. Replace TESTIMONIALS_EMAIL with the email of the testimonial.

Services

        

			

				

					
SERVICES_SECTION_TITLE

					
SERVICES_SECTION_DESC

				

				

					

						

							

								SERVICES_SVG_ICON
								
SERVICES_TITLE

								
    
									
  • SERVICES_ITEM_TITLE
    • 
									
  • SERVICES_ITEM_TITLE
    • 
									
  • SERVICES_ITEM_TITLE
    • 
									...
								

							

						

						...
						
					

				

				

					

						

							
SERVICES_SKILLS_TITLE

						

						

							
SERVICES_SKILLS_SUBTITLE

						

					

					

						
SERVICES_SKILLS_ROW_TITLE

						

							

						
	
						SERVICES_SKILLS_ROW_PERCENTAGE_TEXT 
					

					...
  1. Replace SERVICES_SECTION_TITLE with the title of the Services section.
  2. Replace SERVICES_SECTION_DESC with the description of the Services section.
  3. Replace SERVICES_SVG_ICON with the SVG icon.
  4. Replace SERVICES_TITLE with the service title.
  5. Replace SERVICES_ITEM_TITLE with the service item title.
  6. Replace SERVICES_SKILLS_TITLE with the skills section title.
  7. Replace SERVICES_SKILLS_SUBTITLE with the skills section subtitle.
  8. Replace SERVICES_SKILLS_ROW_TITLE with the skills row title.
  9. Replace SERVICES_SKILLS_ROW_PERCENTAGE with the skills row percentage.
  10. Replace SERVICES_SKILLS_ROW_PERCENTAGE_TEXT with the skills row percentage text.

Work

        

			

				

					
WORK_PORTFOLIO_TITLE

					
WORK_PORTFOLIO_DESC

				

			

			

				

					

						
					

				

				

					

						

							

								
								
								

									
WORK_PORTFOLIO_ITEM_TITLE

									WORK_PORTFOLIO_ITEM_SUBTITLE
								

							

						

						

							

								
								
								

									
WORK_PORTFOLIO_ITEM_TITLE

									WORK_PORTFOLIO_ITEM_SUBTITLE
								

							

						

						...
					

				

				

					MORE WORKS
  1. Replace WORK_PORTFOLIO_TITLE with the title of the portfolio.
  2. Replace WORK_PORTFOLIO_DESC with the description of the portfolio.
  3. Replace WORK_PORTFOLIO_FILTER_TITLE with the filter title of the portfolio.
  4. Replace WORK_PORTFOLIO_FILTER_CLASS with the filter class of the portfolio.
  5. Replace WORK_PORTFOLIO_ITEM_TITLE with the title of the portfolio item.
  6. Replace WORK_PORTFOLIO_ITEM_SUBTITLE with the subtitle of the portfolio item.
  7. Replace WORK_PORTFOLIO_ITEM_URL with the URL of the portfolio item.
  8. Replace WORK_PORTFOLIO_ITEM_IMAGE with the image URL of the portfolio item.

Single Project Item

        

			

				

					
PORTFOLIO_SINGLE_ITEM_TITLE

					

						

							

								
PORTFOLIO_SINGLE_ITEM_SUBTITLE

							

						

						

							

								
PORTFOLIO_SINGLE_ITEM_DESC

								View Project
  1. Replace PORTFOLIO_SINGLE_ITEM_TITLE with the title of portfolio item.
  2. Replace PORTFOLIO_SINGLE_ITEM_DESC with the description of the portfolio item.
  3. Replace PORTFOLIO_SINGLE_ITEM_SUBTITLE with the subtitle of the portfolio item.
  4. Replace PORTFOLIO_SINGLE_ITEM_PROJECT_URL with the project external URL.
  5. Replace PORTFOLIO_SINGLE_ITEM_IMAGE with the image URL.

Team

        

			

				

					
TEAM_SECTION_TITLE

					
TEAM_SECTION_DESC

				

				

					

						

							

								

									
									
								

								
TEAM_SECTION_MEMBER_NAME

								TEAM_SECTION_MEMBER_JOB
							

						

						...
  1. Replace TEAM_SECTION_TITLE with the title of the Team section.
  2. Replace TEAM_SECTION_DESC with the description of the Team section.
  3. Replace TEAM_SECTION_MEMBER_IMAGE with the image URL.
  4. Replace TEAM_SECTION_MEMBER_NAME with the Team member name.
  5. Replace TEAM_SECTION_MEMBER_JOB with the Team member job.

Pricing Table

        

			

				

					
PRICING_SECTION_TITLE

					

						

							

								
PRICING_SECTION_TABLE_NAME

								
PRICING_SECTION_TABLE_PRICE/Month

								
    
									
  • PRICING_SECTION_TABLE_OPTION
    • 
									
  • PRICING_SECTION_TABLE_OPTION
    • 
									...
								

								Select plan
							

						

						...
  1. Replace PRICING_SECTION_TITLE with the title of the Pricing section.
  2. Replace PRICING_SECTION_TABLE_NAME with the table name.
  3. Replace PRICING_SECTION_TABLE_PRICE with the table price.
  4. Replace PRICING_SECTION_TABLE_OPTION with the option.
  5. Replace PRICING_SECTION_TABLE_SELECT_URL with Select plan URL.

Contact

        

			

				

					
CONTACT_TITLE

				

				

					

						

							
							
    								
								
  • 
									Address
									
    CONTACT_ADDR
    
								
    • 
								
  • 
									Phone
									
    CONTACT_PHONE
    
								
    • 
							

							
We all know how important your information is. They are always safe with us.

						

					

					

						

							
Send Message
  1. Replace CONTACT_TITLE with the title of the contact section.
  2. Replace CONTACT_ADDR with the contact address.
  3. Replace CONTACT_EMAIL with the contact email.
  4. Replace CONTACT_PHONE with the contact phone.

Let's Work Together

        

			

				

					
WORK_TOGETHER_TITLE

					
WORK_TOGETHER_DESC

					contact us
  1. Replace WORK_TOGETHER_TITLE with the Let's Work Together form title.
  2. Replace WORK_TOGETHER_DESC with the Let's Work Together form decription.
  3. Replace WORK_TOGETHER_PAGE_URL with the contact page URL.

Footer

        

			

				

					

						

							

								
FOOTER_COPYRIGHT_TITLE

								
FOOTER_COPYRIGHT_TEXT

							

						

						

							

								
FOOTER_NEWSLETTER_TITLE

								

									
									
								

							

						

						

							

								
FOOTER_SOCIAL_TITLE
  1. Replace FOOTER_COPYRIGHT_TITLE with the copyright title.
  2. Replace FOOTER_COPYRIGHT_TEXT with the copyright text.
  3. Replace FOOTER_NEWSLETTER_TITLE with the Newletter Widget title.
  4. Replace FOOTER_SOCIAL_TITLE with the Social Widget title.
  5. Replace FOOTER_SOCIAL_URL with the social item URL.

Dark

Please also note that our Template also has Dark version. To get one please go to the template folder and look for .html files with -dark in the name.

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

How to rate this item

Just click http://themeforest.net/downloads and you will see our template among other purchased items.
Your review helps us to support this product and create more. Thank you!

Credits

This template imports some javascript source below.

jQuery plugins
  1. jQuery
  2. TWEENMAX
  3. WOW
  4. Popper
  5. HTML5 LightBox
  6. Isotope
  7. Slick
Icon fonts
  1. Font Awesome
Fonts
  1. Karla

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.

Jellythemes