PRO Card - Material Resume / CV / vCard Template v1.0

Thank you very much for purchasing from LMPixels!

If you have any issue or question that this document does not cover, you can contact us via email help@lmpixels.com.

Template Installation
HTML Structure
CSS Files and Structure
Scripts
PHP Integration (Contact Form)
Fonts
Credits
Customization

Template Installation

You can view this template in any web browser from your computer, mobile device. Because the files are written in HTML, you do not need an internet connection in order to display or edit the template.

All of the HTML files are given a descriptive name to make it easier to distingish what each file will display.

Upload to The Server

It's important to understand that you must either have your own server space or use someone elses. The server space can be purchased at many different places around the internet. You need somewhere to put the files that you purchased so others can find them online.
Select several files with the extension labeled .html. This is where all your content will. In addition to .html you should see a file labeled .css. .css files are going to be the files that will tell the .html how to to be styled. CSS is simply a way to take text, images, and other elements and change the look of them. It's very important to keep the .css file with the HTML or the HTML will not look how the design is meant to look. Along with the HTML and CSS files, you will also have three additional folders to upload: images, js and php.
Start your FTP client (I persoanlly use Filezila which is free) and login. Login to your server. You will need your server name (often times this will be your domain name), username, and password that you setup with the hosting company.
Locate the domain folder you wish to upload your template files to on your server. You are going to want to click and drag every file that you have labeled .html, .css, .js, .php into your FTP client.
Once the files are done uploading, you can try access your website via browser.

HTML Structure

This site template has a Responsive and Mobile-Friendly layout based on Bootstrap Boilerplate.

HTML files

index.html - main HTML file of this site template.
The main structure of this site is wrapped in a 'subpages' div. Inside of that div you will find sections of the site.
portfolio-1.html - HTML file with Portfolio page content.
blog-post-1.html - HTML file with Blog post page content.

CSS Files and Structure

We are using one main CSS file (main.css) in this template which you are free to modify depending on the customization you require.

If you would like to edit the color, font, or style of any elements, you would do the following in css/main.css :

If you would like to edit a specific section or page 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.

There are also five additional style sheets that I do not recommend changing. Those style sheets reside in the 'css' folder. The 5 style sheets are:

bootstrap.css - A Beautiful Boilerplate for Responsive, Mobile-Friendly Development.
bootstrap.min.css - Minified version of bootstrap.css.
normalize.css - Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards.
transition-animations.css - CSS3 animation sets for subpages changer.
owl.carousel.css - The main stylesheet for Carousels (Testimonials block on About me subpage & Portfolio details page).
magnific-popup.css - The main stylesheet for styling the lightbox.
animate.css - CSS3 animation sets for portfolio content loading.

These files are included in the 'head' of index.html and blog-post-1.html:

Scripts

This template uses several scripts. If you're a developer, you will find this particularly useful.

jquery-2.1.3.min.js (version 2.1.3) - used by the various JS files as a library.
bootstrap.min.js - Bootstrap JS.
imagesloaded.pkgd.min.js - Detect when images have been loaded.
jquery.hoverdir.js - DirectionAwareHoverEffect.
jquery.shuffle.min.js - Categorize, sort, and filter a responsive grid of items.
jquery.magnific-popup.min.js - Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device.
masonry.pkgd.min.js - Cascading grid layout library
modernizr.custom.js - Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser
owl.carousel.min.js - Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.
page-transition.js - Page transitions and ajax loaded pages.
validator.js - Contact form validator.
main.js - jQuery Plugins Initialisation, mobile menu, page loading animation.

PHP Integration (Contact Form)

This template also use the PHP engine for activate the contact form. Important: For the functioning of the contact form on your hosting should be PHP.

Please replace the email address with your email address, this address will receive messages from the contact form in the /contact_form/contact_form.php file.

Fonts

Helvetica, Sans-serif (both should be on your system as standard fonts)
Google Fonts Montserrat, Roboto.
Font Awesome Font Awesome version 4.7.0 (The complete set of 675 icons).
Material Design Iconic Font.

Credits

Images (Just on live preview, not included in download package):

https://pixabay.com/

Videos

https://vimeo.com/channels/staffpicks

Customization

About files editing
Main title
Subpage title
Adding new subpage
Subpages animation effects. Random animations mode (Available since version 1.2.)
Edit resume subpage
Edit services subpage
Edit portfolio subpage
YouTube and Vimeo Video Embedding
Google Recaptcha V2 options
Google Map

1. About files editing

For editing files I recommend you use Sublime Text 2 or similar program. Convenient following functions: syntax highlighting, find and replace function (to accelerate editing), etc.

2. Main title

Desktop header version:

Open index.html or blog-post-1.html.

Go to lines with

<div class="site-title-block mobile-hidden">
  <div class="site-title">Alex <span>Smith</span></div>
</div>

Change text.
Save file.
Where the span tag is used to highlight the text with the main color:
```
<span>Smith</span>
```

Tablet and mobile header version:

Open index.html or blog-post-1.html.

Go to lines with

<div class="mobile-logo-container">
  <div class="mobile-site-title">Alex Smith</div>
</div>

Change text value.
Save file.

3. Subpage title

For example, the subpage "About me":

Open index.html.
Go to 'section' that you need edit. In our example is
```
<section class="pt-page" data-id="resume">
```
Find 'div' with class="section-title-block".

Go to lines with

<div class="page-header color-1">
  <h2>Resume</h2>
</div>

Change text value.
Save file.

4. Adding new subpage

Open index.html.
Go to 'div' with class="subpages". Subpage is 'section' with HTML tags:
```
<section class="pt-page" data-id="resume">
  <div class="section-inner custom-page-content">
    <div class="page-header color-1">
      <h2>Resume</h2>
    </div>
    <div class="page-content">

      <div class="row">
        Our columns with content.
      </div>

    </div>
  </div>
</section>
```
In our demo 6 sections:
1. Home (start) <section class="pt-page" data-id="home">
2. Resume <section class="pt-page" data-id="resume">
3. Services <section class="pt-page" data-id="services">
4. Portfolio <section class="pt-page" data-id="portfolio">
5. Blog <section class="pt-page" data-id="blog">
6. Contact <section class="pt-page" data-id="contact">
As you can see in the sections change attribute data-id. These values we need for the operation of the site navigation (main menu and the browser buttons "go back" and "go forward").
For example, add the section "Extra". After existing sections do make a new one with data-id="extra".

We get a section:

<section class="pt-page" data-id="extra">
  <div class="section-inner custom-page-content">
    <div class="page-header color-1">
      <h2>Extra</h2>
    </div>
    <div class="page-content">

      <div class="row">
        Our columns with content.
      </div>

    </div>
  </div>
</section>

Now we need to add a new item to the main menu. The main menu has the following structure:

<!-- Main menu -->
<ul id="nav" class="site-main-menu">
  <li>
    <a class="pt-trigger" href="#home" data-animation="62">Home</a><!-- href value = data-id without # of .pt-page. -->
  </li>
  <li>
    <a class="pt-trigger" href="#resume" data-animation="62">Resume</a>
  </li>
  <li>
    <a class="pt-trigger" href="#services" data-animation="62">Services</a>
  </li>
  <li>
    <a class="pt-trigger" href="#portfolio" data-animation="62">Portfolio</a>
  </li>
  <li>
    <a class="pt-trigger" href="#blog" data-animation="62">Blog</a>
  </li>
  <li>
    <a class="pt-trigger" href="#contact" data-animation="62">Contact</a>
  </li>
</ul>
<!-- /Main menu -->

Where data-animation="*" is the number of animation effect. More details about the animation effects you can read here.

Add a new item:

<li>
  <a class="pt-trigger" href="#extra" data-animation="62">Extra</a>
</li>

Save file.

5. Subpages animation effects. Random animations mode.

5.1. Subpages animation effects

You can select any of the 67 variants of the animation. To do this, you need to specify the attribute 'data-animations' with the appropriate amount of animation for the respective menu item. Example:

<li>
  <a class="pt-trigger" href="#services" data-animation="17"><i class="menu-icon pe-7s-icon pe-7s-mail"></i>Services</a>
</li>

List of animation options:

1:
out effect: move to Left;
in effect: move from Right;

2:
out effect: move to Right;
in effect: move from Left;

3:
out effect: move to Top;
in effect: move from Bottom;

4:
out effect: move to Bottom;
in effect: move from Top;

5:
out effect: fade;
in effect: move from Right on top;

6:
out effect: fade;
in effect: move from Left on top;

7:
out effect: fade;
in effect: move from Bottom on top;

8:
out effect: fade;
in effect: move from Top on top;

9:
out effect: move to Left Fade;
in effect: move from Right Fade;

10:
out effect: move to Right Fade;
in effect: move from Left Fade;

11:
out effect: move to Top Fade;
in effect: move from Bottom Fade;

12:
out effect: move to Bottom Fade;
in effect: move from Top Fade;

13:
out effect: move to Left Easing on top;
in effect: move from Right;

14:
out effect: move to Right Easing on top;
in effect: move from Left;

15:
out effect: move to Top Easing on top;
in effect: move from Bottom;

16:
out effect: move to Bottom Easing on top;
in effect: move from Top;

17:
out effect: scale Down;
in effect: move from Right on top;

18:
out effect: scale Down;
in effect: move from Left on top;

19:
out effect: scale Down;
in effect: move from Bottom on top;

20:
out effect: scale Down;
in effect: move from Top on top;

21:
out effect: scale Down;
in effect: scale Up Down delay300;

22:
out effect: scale Down Up;
in effect: scale Up delay300;

23:
out effect: move to Left on top;
in effect: scale Up;

24:
out effect: move to Right on top;
in effect: scale Up;

25:
out effect: move to Top on top;
in effect: scale Up;

26:
out effect: move to Bottom on top;
in effect: scale Up;

27:
out effect: scale Down Center;
in effect: scale Up Center delay400;

28:
out effect: rotate Right Side First;
in effect: move from Right delay200 on top;

29:
out effect: rotate Left Side First;
in effect: move from Left delay200 on top;

30:
out effect: rotate Top Side First;
in effect: move from Top delay200 on top;

31:
out effect: rotate Bottom Side First;
in effect: move from Bottom delay200 on top;

32:
out effect: flip Out Right;
in effect: flip In Left delay500;

33:
out effect: flip Out Left;
in effect: flip In Right delay500;

34:
out effect: flip Out Top;
in effect: flip In Bottom delay500;

35:
out effect: flip Out Bottom;
in effect: flip In Top delay500;

36:
out effect: rotate Fall on top;
in effect: scale Up;

37:
out effect: rotate Out Newspaper;
in effect: rotate In Newspaper delay500;

38:
out effect: rotate Push Left;
in effect: move from Right;

39:
out effect: rotate Push Right;
in effect: move from Left;

40:
out effect: rotate Push Top;
in effect: move from Bottom;

41:
out effect: rotate Push Bottom;
in effect: move from Top;

42:
out effect: rotate Push Left;
in effect: rotate Pull Right delay180;

43:
out effect: rotate Push Right;
in effect: rotate Pull Left delay180;

44:
out effect: rotate Push Top;
in effect: rotate Pull Bottom delay180;

45:
out effect: rotate Push Bottom;
in effect: rotate Pull Top delay180;

46:
out effect: rotate Fold Left;
in effect: move from Right Fade;

47:
out effect: rotate Fold Right;
in effect: move from Left Fade;

48:
out effect: rotate Fold Top;
in effect: move from Bottom Fade;

49:
out effect: rotate Fold Bottom;
in effect: move from Top Fade;

50:
out effect: move to Right Fade;
in effect: rotate Unfold Left;

51:
out effect: move to Left Fade;
in effect: rotate Unfold Right;

52:
out effect: move to Bottom Fade;
in effect: rotate Unfold Top;

53:
out effect: move to Top Fade;
in effect: rotate Unfold Bottom;

54:
out effect: rotate Room Left Out on top;
in effect: rotate Room Left In;

55:
out effect: rotate Room Right Out on top;
in effect: rotate Room Right In;

56:
out effect: rotate Room Top Out on top;
in effect: rotate Room Top In;

57:
out effect: rotate Room Bottom Out on top;
in effect: rotate Room Bottom In;

58:
out effect: rotate Cube Left Out on top;
in effect: rotate Cube Left In;

59:
out effect: rotate Cube Right Out on top;
in effect: rotate Cube Right In;

60:
out effect: rotate Cube Top Out on top;
in effect: rotate Cube Top In;

61:
out effect: rotate Cube Bottom Out on top;
in effect: rotate Cube Bottom In;

62:
out effect: rotate Carousel Left Out on top;
in effect: rotate Carousel Left In;

63:
out effect: rotate Carousel Right Out on top;
in effect: rotate CarouselRight In;

64:
out effect: rotate Carousel Top Out on top;
in effect: rotate Carousel Top In;

65:
out effect: rotate Carousel Bottom Out on top;
in effect: rotate Carousel Bottom In;

66:
out effect: rotate Sides Out;
in effect: rotate Sides In delay200;

67:
out effect: rotate Slide Out;
in effect: rotate Slide In;

5.2. Random animations mode (Available since version 1.3.)

To activate a random animation mode, you need to remove the attribute 'data-animation' from the menu item. Example:

<li>
  <a class="pt-trigger" href="#services"><i class="menu-icon pe-7s-icon pe-7s-mail"></i>Services</a>
</li>

In this case, random animation will be applied, one of 67.

6. Edit resume subpage

6.1. Skills

Skill block:

<h4>Web Design</h4>
<div class="skill-container">
  <div class="skill-percentage skill-1"></div>
</div>

The value for the <div class="skill-percentage skill-1"> set in the css/main.css file:

/*Skill 1*/
.skill-percentage.skill-1 {
  width: 88%;
}

7. Edit services subpage

7.1. Services

Open index.html file.
Find 'div' with 'class="service-block"
Edit text
Enter the file name of the image.
If you want to use an icon instead of the image:
1. Go to div with class="service-info"
2. Replace this:
```
<div class="service-image">
  <img src="images/service/web_design_icon.png" alt="Responsive Design" class="mCS_img_loaded">
</div>
```
  With this (Material Design Iconic Font. The complete set of 777 icons. Full icons list. ):
```
<i class="service-icon zmdi zmdi-shopping-cart"></i>
```
  or this (Font Awesome: The complete set of 675 icons. Full icons list. ):
```
<i class="service-icon fa fa-shopping-cart"></i>
```
Save file.

8. Edit portfolio subpage

The structure of the "Portfolio" subpage:

<!-- Portfolio Content -->
<div class="portfolio-content">
              
  <!-- Portfolio filter -->
  <ul id="portfolio_filters" class="portfolio-filters">
    <li class="active">
      <a class="filter btn btn-sm btn-link active" data-group="all">All</a>
    </li>
    ...
  </ul>
  <!-- End of Portfolio filter -->

  <!-- Portfolio Grid -->
  <div id="portfolio_grid" class="portfolio-grid portfolio-masonry masonry-grid-3">

    <!-- Portfolio Item 1 -->
    <figure class="item" data-groups='["all", "photography"]'>
        <a class="ajax-page-load" href="portfolio-1.html">
            <img src="images/portfolio/1.jpg" alt="">
            <div>
                <h5 class="name">Project Name</h5>
                <small>Media</small>
                <i class="pe-7s-icon pe-7s-display2"></i>
            </div>
        </a>
    </figure>
    <!-- /Portfolio Item 1 -->

    ...
    
  </div>
  <!-- /Portfolio Grid -->

</div>
<!-- /Portfolio Content -->

Each item in the portfolio grid should be wrapped in the HTML tag <figure>...</figure>

You can add two types of content:

Page loaded via Ajax (page containing the image, carousel, video, etc., and a full description). portfolio-1.html a file content.
Content displayed via LightBox (Full image or video and caption).

8.1. Portfolio details page loaded via Ajax

Link will have a class of "ajax-page-load" and the href attribute with a path to the HTML page (portfolio-1.html etc.):

<!-- Portfolio Item 1 -->
<figure class="item" data-groups='["all", "photography"]'>
  <a class="ajax-page-load" href="portfolio-1.html">
    <img src="images/portfolio/1.jpg" alt="">
    <div>
      <h5 class="name">Project Name</h5>
      <small>Media</small>
      <i class="pe-7s-icon pe-7s-display2"></i>
    </div>
  </a>
</figure>
<!-- /Portfolio Item 1 -->

Note : To test this Ajax loading you need to place the HTML files on a web server. You can set up a local web server on your PC by installing WampServer or XAMPP. You must open the portfolio page (example portfolio-1.html) file using "http://" since Ajax makes HTTP requests.

Ajax request can be made only to the files that exist on the same web server that servers the page from which the Ajax request is sent, not to external or remote servers for security reasons. This is called same-origin policy.

8.2. Content displayed via LightBox

To display the image link will have a class of "lightbox" and the href attribute with a path to the image:

<!-- Portfolio Item 3 -->
<figure class="item" data-groups='["all","illustration"]'>
  <a href="images/portfolio/3.jpg" class="lightbox" title="Duis eu Eros Viverra">
    <img src="images/portfolio/3.jpg" alt="">
    <div>
      <h5 class="name">Project Name</h5>
      <small>Illustration</small>
      <i class="pe-7s-icon pe-7s-photo"></i>
    </div>
  </a>
</figure>
<!-- /Portfolio Item 3 -->

To display the video link will have a classes of "lightbox mfp-iframe" and the href attribute with a URL to the video:

<!-- Portfolio Item 2 -->
<figure class="item" data-groups='["all", "video"]'>
  <a href="https://player.vimeo.com/video/97102654?autoplay=1" title="Lihtbox Title" class="lightbox mfp-iframe">
    <img src="images/portfolio/2.jpg" alt="">
    <div>
      <h5 class="name">Project Name</h5>
      <small>Video</small>
      <i class="pe-7s-icon pe-7s-video"></i>
    </div>
  </a>
</figure>
<!-- /Portfolio Item 2 -->

9. YouTube and Vimeo Video Embedding

Link format for embedding videos:

YouTube: https://www.youtube.com/embed/id. Example: https://www.youtube.com/embed/w5tWYmIOWGk

Vimeo: https://player.vimeo.com/video/id. Example: https://player.vimeo.com/video/97102654

Note : To test video loading you need to place the HTML files on a web server. You can set up a local web server on your PC by installing WampServer or XAMPP.

10. Google Recaptcha V2 options

By default, the template uses global Google Recaptcha V2 keys, if you want to use your keys, then you can create new keys here.

1. Replace site key in the index.html:

2. Replace Site secret key in the contact_form/contact_form.php:

11. Google Map

Change of address

Open js/main.js file

Go to lines:

//Google Maps
$("#map").googleMap();
$("#map").addMarker({
    address: "15 avenue des champs Elysées 75008 Paris" // Your Address
});

and replace "15 avenue des champs Elysées 75008 Paris" with your address.

Save file.

API key

If Google Maps does not work, then you need to create a key for Google Maps and add it to the index.html file. To create the key, go here.

After you have created the key, add it to the index.html, for this:

Open index.html file
Go to line - <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script> and remove it
Find this line -  and replace it with <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY"></script>. Instead of "YOUR-API-KEY" paste the code that you received on Google's website.
Save file.

Removing Google Maps

To remove Google Maps from the page, do the following:

Open index.html.file

Go to line:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>

and remove it.

Go to line:

<!--<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY"></script>-->

and remove it.

Go to line:

<script type="text/javascript" src="js/jquery.googlemap.js"></script>

and remove it.

Go to line:
```
<div id="map" class="map"></div>
```
and remove it.
Save index.html file
Open js/main.js file

Go to lines:

//Google Maps
$("#map").googleMap();
$("#map").addMarker({
    address: "15 avenue des champs Elysées 75008 Paris" // Your Address
});

and delete them.

Save file.

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

PRO Card - Material Resume / CV / vCard Template v1.0

Complete Documentation

Thank you very much for purchasing from LMPixels!

Table of Contents

Template Installation

Upload to The Server

HTML Structure

HTML files

CSS Files and Structure

Scripts

PHP Integration (Contact Form)

Fonts

Credits

Customization

1. About files editing

2. Main title

Desktop header version:

Tablet and mobile header version:

3. Subpage title

4. Adding new subpage

5. Subpages animation effects. Random animations mode.

5.1. Subpages animation effects

5.2. Random animations mode (Available since version 1.3.)

6. Edit resume subpage

6.1. Skills

7. Edit services subpage

7.1. Services

8. Edit portfolio subpage

8.1. Portfolio details page loaded via Ajax

8.2. Content displayed via LightBox

9. YouTube and Vimeo Video Embedding

10. Google Recaptcha V2 options

11. Google Map

Change of address

API key

Removing Google Maps