Introduction

This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML and CSS knowledge is required to customize this template. You may learn basics here, here and here.

Requirements

You will need the following sofwares to customize this template.

1. Code Editing Software (eg: Dreamweaver, Sublime Text or Notepad)
2. Web Browser for testing (eg: Google Chrome or Mozilla Firefox)
3. FTP Tool to upload files to Server (eg: FileZilla)

HTML Structure

Lorem the It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

The template is based on bootstrap 4 library, please read more about bootstrap here: https://getbootstrap.com/docs/4.1/getting-started/introduction/

Bootstrap Grid System

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            YOUR CODES GOES HERE
        </div>
    </div>
</div>

Our you can use the grid system with 2 columns like this;

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
            YOUR CODES GOES HERE
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
            YOUR CODES GOES HERE
        </div>
    </div>
</div>

Our you can use the grid system with 3 columns like this;

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
            YOUR CODES GOES HERE
        </div>
        <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
            YOUR CODES GOES HERE
        </div>
        <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
            YOUR CODES GOES HERE
        </div>
    </div>
</div>

CSS

There are 5 CSS files in the template. First is "bootstrap.min.css", used for layout — originally in bootstrap, the second one is "fontawesome-all.min.css" font awesome 5, it is icons font, "style.css" the main style file for the forms, and the others are: "organic-theme.css", "bronze-theme.css" the template other themes color.

JavaScript

This template imports four Javascript files.

• "jquery.min.js": jQuery is a Javascript library that greatly reduces the amount of code that you must write.
• "bootstrap.min.js": Bootstrap is the most popular Javascript framework for developing responsive, mobile first projects on the web.
• "popper.min.js": A library used to position poppers in web applications. A popper is an element on the screen which "pops out" from the natural flow of your application. Common examples of poppers are tooltips, popovers, and drop-downs.
• "main.js": Our custom javascript code.

Logo

To change the logo simply replace "logo.svg" file.

Other themes

To use other themes you have to link the theme css file to the head of the page, for example if you will use "organic-theme.css", add the following code:

<link rel="stylesheet" type="text/css" href="css/organic-theme.css">

Add it exactly after this line:

<link rel="stylesheet" type="text/css" href="css/style.css">

Large text

To modify the large text without losing the animation and the coloring, the HTML code should look like the following

<div class="extra-lg-text">
    <span>user-centric</span><br>
    <span>experiences</span><br>
    <span>that actually</span><br>
    <span class="other-color">work</span>
</div>

Separate every line with 'span' tag to make the animation working well, and use 'other-color' class on the 'span' to use the other color.

Social Media

Social media link available in three places, the menu, the header and the footer, it looks like the following code.

<div class="social-media">
    <div class="social-link-holder"><a href="#">Dribbble</a></div>
    <div class="social-link-holder"><a href="#">Instagram</a></div>
    <div class="social-link-holder"><a href="#">Twitter</a></div>
    <div class="social-link-holder"><a href="#">Facebook</a></div>
</div>

To add your link, replace '#' with the link.

Project list

To add a new project to the work page, please use this code. The code will add two projects, it must be two projects so the layout will look the same without issues.

<div class="container-fluid box-content">
    <div class="row">
        <div class="col-md-6">
            <div class="boxy img-box">
                <div class="img"><img src="images/img3.png" alt=""></div>
                <div class="bottom-text">
                    <div class="link">VIEW THIS PROJECT</div>
                    <div class="text">CoinView App development</div>
                </div>
                <a href="project.html" class="project-link-full"></a>
            </div>
        </div>
        <div class="col-md-6">
            <div class="boxy img-box">
                    <div class="img"><img src="images/img6.png" alt=""></div>
                <div class="bottom-text">
                    <div class="link">VIEW THIS PROJECT</div>
                    <div class="text">Hubble package design</div>
                </div>
                <a href="project.html" class="project-link-full"></a>
            </div>
        </div>
    </div>
</div>

To change the image, save the image in the "images" folder and then modify 'img src' with your image file name, the image will be arranged automatically with any size but we prefer image in square shape.

---

Once again, thank you so much for purchasing this template. We'd be glad to help you if you have any questions relating to this template. No guarantees, but We'll do our 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.