Template Documentation v1.0
Thank you for purchasing our template. 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 in themeforest.net. Thanks so much!
This template has everything that you need to easy develop minimal and modern portfolio:
Template has the following project structure:
All the html code are well documented for you to edit. Feel free to edit it to reach the result you want to get. Html-files use UTF-8 codepage. Use the editor with UTF-8 support to avoid problems with unreadable symbols.
The structure common to every html files in this template. Are as follow:-
<html lang="en"> Tags with metainformation are located inside <head> tag. Fill them to provide information about your website to search engines:
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" /> Also there is <title> tag is the title of your website.
<title>Website Name</title> <link> tags: These tags contains plugin.css, style.css, color.css see Css Structure for more information.
<body> tag contains the main website which users can view. It has following structure:
<body>
<div class="preloader">
<!--Website Preloader Area-->
</div>
<div id="main">
<header>
<!--Website Header Area-->
</header>
<div id="menu-overlay">
<!--Website Menu Overlay Area-->
</div>
<div id="scroll-content">
<!--Main content of the website which scrolls-->
<footer>
<!--Footer of the website-->
</footer>
</div>
</div>
<div class="ajax-preloader">
<!--Ajax Preloader Area-->
</div>
<div id="custom-cursor">
<!--Custom Cursor Area-->
</div>
</body> Navigation Area is where you can navigate the websites other pages. Its code are as follows:-
<header>
<div class="logo-container">
<a href="#">
<!--logo-->
</a>
</div>
<div class="menu-burger">
<!-- navigation button -->
</div>
</header>
<div id="menu-overlay">
<nav class="primary-nav">
<!-- navigation links of the website -->
</nav>
<div class="company-info">
<!--Company info which displayed at the right side -->
</div>
</div>Header is where the logo and the navigation menu recide.
Logo is where which occurs on all pages of the website.
This is the website navigation button. We suggest not to edit it otherwise website will not work properly.
Menu overlay is a fullscreen overlay of the menu. This is where the navigation links and the company info recide.
<nav class="primary-nav">
<ul>
<li><a href="index.html" class="menu-link" data-type="page-transition">Index</a></li>
<li><a href="about.html" class="menu-link" data-type="page-transition">About</a></li>
<li><a href="contact.html" class="menu-link" data-type="page-transition">Contact</a></li>
</ul>
</nav>
<div class="company-info">
<a href="#" class="info-email link-underline">hello@cosmos.com</a><br>
<a href="#" class="info-tel link-underline">(222) 123-4567</a>
<div class="info-address">
<p>75 E Santa Clara St, Ste 1425<br> San Jose, California 95113</p>
</div>
<ul class="sm-links">
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-facebook"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-linkedin"></i></a></li>
</ul>primary-nav : This area contains the navigation links for the website.
company-info : This is where you put your company email, phone number and address of the company.
sm-links : This is where you put your company social media icons.
This area contains the scrollable content of the website. Its structure are as follows:-
<div id="scroll-content">
<div class="page-content">
<!--Page content unique to every page-->
</div>
<footer>
<!--Footer of the website-->
</footer>
</div> The main div contains 2 sections one is page-content and second is footer.
page-content: This is the main content of the page that is unique to very page of the website.
footer: This is the main footer of the website. This contains the copyright text and the back to top icon.
This is the preloader is used when the ajax page transition happens. We suggest not to edit this code, it can malfunction the website.
This is the cursor circle which follows the mouse. We suggest not to edit this code. Only edit if you know what you are doing.
We will only document the code of the individual page which are complicated in nature.
Index page contain slider which is based on pixi.js. Structure are as follows:-
<div id="pixi-slider">
<div class="slider-wrapper">
<!--SLIDER ITEM-->
<div class="slider-item">
<div class="slide-image">
<img src="images/projects/project1/1.jpg" class="slide-item__image" alt="Project Image">
</div>
<div class="slide-content">
<div class="slide-content-inner">
<div class="item-cat">Photography</div>
<h2 class="item-title" data-splitting>Ultimate Neon.</h2>
<a href="project01.html" data-type="page-transition" class="item-link link-underline cursor-link">View Project</a>
</div>
</div>
</div>
<!--SLIDER ITEMS-->
</div>
<div class="arrows-wrap">
<!--SLIDER NAVIGATION BUTTONS(ARROWS)-->
</div>
<!--SLIDER CANVAS CONTAINER-->
<div id="canvas-container"></div>
</div>slider-wrapper: This element contains the slides for the pixi slider.
slider-item: This element has 2 element inside it.
First slide-image which obviously is the background image for the slide.
Second the slide-content which is the information related to that image i.e item-cat, item-name and item-link.
arrow-wraps: This element contains the navigation buttons for the slider. We suggest not to edit this element.
canvas-container: This element will contain the canvas when the website will run. We suggest not to edit this element.
About page everything are self explanatory.
This section contains contact form, contact information and google map.
Note : Edit this line in mail.php
$recipient = "example@example.com"; /*Change the email to your email id.*/
Contact Information : This contains you address, phone, email id.
Google Map : This contain the google map where you are located.
<div id="map" data-latitude="-37.817214" data-longitude="144.955925" data-zoom="15"></div> Enter the latitude and longitude of your location in here. Search google for more information
Projects pages everything are self explanatory.
There are some feature in this template such as parallax background image. List are as follows:-
Parallax Background image is that feature when you scroll the page, the image scroll like a parallax. Code are as follows:
<div class="project-image">
<div class="project-image--full bg-parallax">
<img src="images/projects/project1/2.jpg" alt="">
</div>
</div>Important thing to note here is parallax image should be contain inside bg-parallax element.
Smooth scrolling is feature by which page of the website scroll smoothy. This feature already active. If you want to disable this feature just you have to remove the class="smooth-scroll" from the body tag.
Text animation is a feature, when you scroll to that text it will animate. Code as follows:
<h3 class="text-animate text-fadeIn">Lorem excepturi provident laudantium adipisci vel. Deserunt assumenda illo ipsa voluptatibus harum earum Saepe rem dolor consequuntur quos illum Dicta animi ipsam ne</h3>To make text animation work you have to add text-animate class and text animation type i.e text-fadeIn. There are three types of animation available.
Element Fade Up animation is a feature that when you scroll the element it animates from bottom to up. If you want this feature add class="fade-up" to the element.
plugins.css: This file contain the css library files which are located in plugins folder.
style.css: This file contain the layout style for the template.
Note: If you want to edit you the style i recommend you make your own css file and link to the template. Edit above files only if you know what you are doing.
jquery.min.js: This file is jquery library.
modernizr.js: This file is javascript library that detect html5 and css3 features in various browsers.
plugins.min.js: This file contains various js library used in this template.
main.js: This file is main javascript file for this template.
Note: Editing these files can cause unexpected behaviour to the template only edit these file if you know what you are doing.
This template uses
Images are not included. All images are replaced with the placeholder. Images used in this template can be find at:
Once again, thank you so much for purchasing this template. As we said at the beginning, We'd be glad to help you if you have any questions relating to this theme. No guarantees, but We will do our best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting our profile on themeforest and message us with the form section.