# Watson

Template Documentation v1.0

- created: 28/8/2018
- by: Cosmos-Themes

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 in themeforest.net. Thanks so much!

## Features

This template has everything that you need to easy develop minimal and modern portfolio:

- HTML5, CSS3, Jquery powered
- Semantically Correct / Valid HTML Code
- Latest Twitter Bootstrap
- 36 Page Animations
- Fully Responsive Layout
- Cross browser compatible (Internet Explorer 11, Edge, Firefox, Safari, Opera, Chrome etc.)
- Modern and Clean Design
- 2 Layouts(Dark, Light)
- 10 Color Schemes
- Filterable Portfolio
- Ajax, Images, Video Portfolio items
- Easy To Use and Customize
- Google Web Fonts
- Google Map Ready

## Project Structure

Template has the following project structure:

- Documentation
- Html
  - css
  - fonts
  - img
  - js
  - index-dark.html
  - index-light.html
  - blog-dark.html
  - blog-light.html
  - single-work.html
  - mail.php

## HTML 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.

### Html Tag

    <html lang="en" data-random-animation="false" data-animation="1">

Html tag contain the vital information about the page transition animation. There are two types of attributes as follows:

1. data-random-animation

2. data-animation

1. data-random-animation: This attritute tell the scripts that the animation will be random. It has two values true and false. If the value is true then the animation will be random. If false the animation value is based on data-animation.

2. data-animation: This attribute has the value 1 to 36. It tell the script which animation to run. You can choose the animation value from the demo page and put the value in here. This attribute will only run when the data-random-animation has the value false.

Note: The values should be in quotes i.e "".

### Head

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

<body> tag contains the main website which users can view. It has following structure:

    <body>
        <div id="page">
            <header>
                <!--Website Navigation Area-->
            </header>
            <div id="main" class="site-main">
                <!--Website Sections Area-->
            </div>
        </div>
    </body>

Note: The <header> and <div id="main" class="site-main"> should be inside <div id="page">.

### Header

Header tag contain code for website navigation area. It has structure as follows:

    <header>
        <div class="header-content">
            <div class="header-mobile">
                <!--Mobile Header-->
            </div>
            <div class="header-main" data-simplebar>
                <!--Site Main Header-->
            </div>
        </div>
    </header>

<div class="header-content">: Is the site header container both header-mobile and header-main should be inside header-content.

#### Header-Mobile

Is the header for mobile responsive of the website. It has the toggle button to toggle site main header in mobile devices.

    <a class="header-toggle"><i class="fas fa-bars"></i></a> <!--Toggle button-->
    <h2>Your Name</h2> <!-- Should change the name to you own-->

#### Header-Main

Is the main header for the website. Its content are as follows:

    <div class="image-container">
        <!-- Image and the Heading of the website -->
    </div>
    <nav class="nav-menu">
        <!-- Navigation Links -->
    </nav>
    <div class="nav-footer">
        <!-- Copyright and Social icon container -->
    </div>

image-container : This area contains the image and the name. You should put your image and name in this area.

    <div class="image-container">
        <h2 class="header-name">Your Name</h2>
        <img src="image-link" alt="profile-pic">
    </div>

Note:- The image should of 500x500 resolution.

nav-menu : This area contains the navigation links for the website its content is as follow:

    <ul>
        <li><a href="#home" class="pt-link active"><span class="nav-menu-icon"><i class="lnr lnr-home"></i></span>Home </a> </li>
        <li><a href="#about" class="pt-link"><span class="nav-menu-icon"><i class="lnr lnr-user"></i></span>About Me</a></li>
        <li><a href="#resume" class="pt-link"><span class="nav-menu-icon"><i class="lnr lnr-license"></i></span>Resume</a></li>
        <li><a href="#portfolio" class="pt-link"><span class="nav-menu-icon"><i class="lnr lnr-briefcase"></i></span>Portfolio</a></li>
        <li><a href="#blog" class="pt-link"><span class="nav-menu-icon"><i class="lnr lnr-book"></i></span>Blog</a></li>
        <li><a href="#contact" class="pt-link"><span class="nav-menu-icon"><i class="lnr lnr-envelope"></i></span>Contact</a></li>
    </ul>

The <a> tags have the href value which corresponds to the page section id attribute.It also have the class of value pt-link, its important for the page transition to work. If you put href value other than section id it won't work and it should start with (#section-id-name). It also have the logo associated with the link to display.

nav-footer : This area contain the social links and the copyright text.

    <ul class="social">
        <li><a href="#"><i class="fab fa-facebook-square"></i></a></li>
        <!-- Other Links -->
    </ul>
    <div class="copy">
        <p>&copy; 2018 Cosmos-Themes.<br>All Right Reserved.</p>
    </div>

### Main

This area contains the sections of the website. Structure as follows:

    <div id="main" class="site-main">
        <section id="home">
            <!--Section content-->
        </section>
        <section id="about">
            <!--Section content-->
        </section>
        <section id="resume">
            <!--Section content-->
        </section>
        <section id="portfolio">
            <!--Section content-->
        </section>
        <section id="blog">
            <!--Section content-->
        </section>
        <section id="contact">
            <!--Section content-->
        </section>
    </div>

The main div contain 6 sections corresponds to the links in the navigation.

Notes :

1. Sections are documented well in html file so i'll document those which are complicated.
2. The section should have pt-page class for the layout.
3. The section should contain <div class="section-container"> for layout to render properly.

### Home Section

This section contain the background image, name, and some animated text you want to show on the website home page. See html file its easy to understand.

### About Section

This section contains the introduction, personal information, services, clients, and testimonial sections.
signature: Signature image is transparent png with the resolution of approximate 450x100. If you have the your signature then resize to the desired resolution. If you dont have the signature of yours you can go to this site https://fontmeme.com/signature-fonts/ and make yours there. We have used font Signerica_Fat with the font size of 40. Color black for white layout and color black for white layout. Its upto you which color you want.

### Resume Section

This section contains your experience, education and skills you have.

#### Experience & Eduction

    <li>
        <span class="line-left"></span>
        <div class="content">
            <h4><!--Course or Position--></h4>
            <h5><!--School or Company Name--></h5>
            <p class="info">
                <!--Description-->
            </p>
        </div>
        <span class="year">
            <span class="to"><!--Year till--></span>
            <span class="from"><!--Year from--></span>
        </span>
    </li>

#### Skill Item

    <div class="skill-item">
        <h4 class="progress-title">Coral Draw</h4><!--Title of the skill-->
        <div class="progress">
            <div class="progress-bar" data-progress-value="91"><!--Value is the experience you gained-->
                <div class="progress-value">91%</div><!--Should edit it the same as above attribute value-->
            </div>
        </div>
    </div>

### Portfolio Section

This section contains the portfolio's items. It has the following structure:

    <div class="section-container">
        <div class="page-heading">
            <!--Page Heading-->
        </div>
        <div class="row">
            <div class="col-md-12 portfolio-filter text-center">
                <!--Portfolio Filter-->
            </div>
        </div>
        <div class="row portfolio-items">
            <div class="item col-lg-4 col-md-6 graphic">
                <!--Portfolio Item-->
            </div>
            <!--Other Portfolio items-->
        </div>
    </div>

Portfolio Section have two parts:

1. Filters
2. Portfolio item

#### Portfolio Filters

    <ul>
        <li class="active" data-filter="*">All</li>
        <li data-filter=".brand">Brand</li>
        <li data-filter=".design">Design</li>
        <li data-filter=".graphic">Graphic</li>
    </ul>

Portfolio filters are the list item when clicked it will show portfolios related to those category.
data-filter : attribute specify the category the portfolios belongs to. It can have any value but thing to notice is that the value starts with ".value".

#### Portfolio Item

    <div class="item col-lg-4 col-sm-6 brand">
        <a class="image-link" href="img/portfolio/img-1.jpg">
            <figure>
                <img src="img/portfolio/img-1.jpg" alt="">
                <figcaption>
                    <h4>Book Design</h4>
                    <p>Graphic</p>
                </figcaption>
            </figure>
        </a>
    </div>

Portfolio item is contain inside <div> tag. It have class attribute which value are item and brand, item is used for styling the portfolio single item and brand is used to show which category the item belongs to in respect to the filter.
Portfolio item has inside anchor tag. This tag has class and href attribute. The class attribute specify that the link is of image type. There are 3 possible values:

1. image-link : This tells the scripts to show as image type and will show as popup when click.
2. video-link : This tells the scripts to show as video type and will show as popup when click.
3. ajax-link : This tells the script to show as ajax type and slide in as a page. Ajax links are pages like single-work.html which the script will import when the item is clicked.

### Blog Section

This section contains the blog items. It has the following structure:

    <div class="section-container">
        <div class="page-heading">
            <!--Section Heading-->
        </div>
        <div class="row blogs-masonry">
            <div class="col-lg-4 col-sm-6">
                <!--Blog Item-->
                <a href="#" class="blog-item">
                    <div class="blog-img">
                        <!--Blog Image-->
                    </div>
                    <div class="blog-content">
                        <!--Blog Content-->
                    </div>
                </a>
            </div>
        </div>
    </div>

Blog item when click will open the link related to that blog item for example single-blog.html page.

### Contact Section

This section contains contact form, contact information and google map.

1. Contact Form : Form contains the form fields for the user to send message. Form is based on ajax when submit the form will run the mail.php file. If everything is valid the mail will be send to the person whose email is specified in mail.php file.

Note : Edit this line in mail.php

    $recipient = "example@example.com"; /*Change the email to your email id.*/

1. Contact Information : This contains you address, phone, email id.

2. 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

## CSS Structure

- css
  - plugins
  - plugin.css
  - style.css
  - style-light.css
  - *-color.css

plugins.css: This file contain the css library files which are located in plugins folder.
style.css: This file contain the dark layout style for the template.
style-light.css: This file contains the light layout style for the template.
(*-color.css): This files are for choosing highlighed color of you own choice. There are 6 color file in this template.

Note: If you want to edit you the style i recommend you your own css file and link to the template of you choice. Edit above files only if you know what you are doing.

## Javascript Structure

- js
  - jquery.min.js
  - modernizr.js
  - plugins.min.js
  - main.js

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.

## Fonts

This template uses

- Google fonts:
  - Playfair Display
  - Roboto
- Icon fonts:
  - FontAwesome 5
  - Linearicons

## Sources and Credits

### CSS and Javascripts Libraries

- jQuery
- Bootstrap 4
- FontAwesome 5
- Linear Icons
- Animated Headlines
- Owl Carousel 2
- Magnific Popup
- Fitty
- SimpleBar
- Isotope
- Tilt.js

### Images

Images are not included. All images are replaced with the placeholder. Images used in this template can be find at:

- Pexels
- Unsplash
- Freepik
- GraphicBurger

Once again, thank you so much for purchasing this template. 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 my profile on themeforest and message me with the form section.