# Introductiona quick introduction

#### created : 01.02.2014

by pixelwars

> Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, you can sign in to our support forums with your purchase code. And please rate the theme on themeforest if you liked it. Thanks so much!

> - Pixelwars Team

### Support Forums

Any questions that are beyond the scope of this help file, use support forums.

Visit Support Forums

### Follow us

Follow us on themeforest and don't miss new upcoming premium themes.

Follow us on themeforest

### Rate Theme

If you liked the theme you can rate it on themeforest in your downloads menu.

Rate on themeforest

# Getting Startedthings to know before get started

We assume you have basic knowledge of HTML / CSS and JS. In this doc you will not learn how to code but you will learn how to setup, use and customize the theme. Before you begin make sure you have a code editor, you can use Dreamweaver or any other editor like Notepad++ will be enough.

## File structure

Within the download you'll find the following file structure, logically groupped common assets.

Once downloaded, unzip the compressed folder to see the structure of th theme. You'll see something like this:

      cvCard/
      ├── css/
      ├── js/
      ├── media/
      ├── images/
      ├── Templates/
      └── index.html
      └── other html files

If you have Dreamweaver, and you are going to build a static html site with this template you can benefit template files in "Templates" folder. Template files includes layout markup shared by all pages, and once you have updated a template all pages that inherits that template are automatically updated. For example if you create a new site in Dreamweaver, then copy all project files to this site folder, then open "layout.dwt" under "Templates/" folder and update some parts in the markup in "layout.dwt", when you save it, all pages' markup will be updated. Check out this article for more about Dreamweaver templates. Here are the Dreamweaver template files in this project;

- layout.dwt Includes general layout markup shared by all pages.

# HTMLhtml structure and layout

In this template you will find all HTML files in well formatted and highly commented.. Most of the markup is self explanatory with comments. So i will only explain the parts where the markup needs more attention.

cvCard includes two layout; one is "CSS3 Sliding Horizontal Layout" and the other is "Classic Layout" for non supported browsers. Both layout uses the same common markup. This template is a kind of a one page template, all pages are in "index.html".

### Doctype

Uses plain HTML5 Doctype

    <!DOCTYPE html>

### Html tag

html tag with custom html5 data attributes for easy customizing. You can learn more about in customization section

    <html lang="en" class="no-js one-page-layout" data-classic-layout="false" data-mobile-only-classic-layout="true" data-inAnimation="fadeInUp" data-outAnimation="fadeOutDownBig">

Important : `one-page-layout` class only used in `index.html` file which has a one page layout.

Other single pages use `single-page-layout` class;

    <html lang="en" class="no-js single-page-layout" data-classic-layout="false" data-mobile-only-classic-layout="true" data-inAnimation="fadeInUp" data-outAnimation="fadeOutDownBig">

## Head

Head tags contains meta tags, font / css and some script files, other script files are added just before the closing tag of the body.

Here are meta tags and title. You can edit them as you want except the viewport meta tag, it preserves responsive layout.

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="description" content="cvCard - Responsive HTML5 vCard Template">
    <meta name="keywords" content="vcard, html5, portfolio">
    <meta name="author" content="Pixelwars">

    <title>cvCard</title>

You will see `.htaccess` file in the template directory. This file contains the code piece that prevents IE to go into "compatibility mode" and ruins the layout. But this file is for "Apache servers". If you will not host your site on "Apache server" and want support IE8, then you should add the meta tag below. But remember this code will not be validated by w3 validator.

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >

Here are favicon and apple touch icons;

    <!-- FAV and TOUCH ICONS -->
    <link rel="shortcut icon" href="images/ico/favicon.ico">
    <link rel="apple-touch-icon" href="images/ico/apple-touch-icon.png"/>

Here are font files. Fonts by Google Webfonts

    <!-- FONTS -->
    <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Tangerine:400,700' rel='stylesheet' type='text/css'>

Modernizr script.

    <script src="js/modernizr.custom.js"></script>

Here are css files.

    <!-- STYLES -->
    <link rel="stylesheet" type="text/css" media="print" href="css/print.css">
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="js/nprogress/nprogress.css">
    <link rel="stylesheet" type="text/css" href="css/animate.css">
    <link rel="stylesheet" type="text/css" href="css/fonts/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/fonts/fontello/css/fontello.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.4.css">
    <link rel="stylesheet" type="text/css" href="js/google-code-prettify/prettify.css">
    <link rel="stylesheet" type="text/css" href="css/uniform.default.css">
    <link rel="stylesheet" type="text/css" href="css/flexslider.css">
    <link rel="stylesheet" type="text/css" href="js/mediaelement/mediaelementplayer.css">
    <link rel="stylesheet" type="text/css" href="css/tooltipster.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">

Fallback script files for older ie versions.

    <!--[if lte IE 9]>
    	<script src="js/html5shiv.js"></script>
    	<script src="js/respond.min.js"></script>
    	<script src="js/selectivizr-min.js"></script>
    <![endif]-->

jQuery and other script files are located at the end of the body tag. These are the general script files used over all files.

    <!-- SCRIPTS -->
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/jquery-migrate-1.2.1.min.js"></script>
    <script src="js/jquery.address-1.5.min.js"></script>
    <script src="js/triple.layout.js"></script>
    <script src="js/smoothscroll.js"></script>
    <script src="js/nprogress/nprogress.js"></script>
    <script src="js/fastclick.js"></script>
    <script src="js/jquery.imagesloaded.min.js"></script>
    <script src="js/jquery.isotope.min.js"></script>
    <script src="js/jquery.flexslider-min.js"></script>
    <script src="js/jquery.fitvids.js"></script>
    <script src="js/jquery.validate.min.js"></script>
    <script src="js/jquery.uniform.min.js"></script>
    <script src="js/jquery.fancybox-1.3.4.pack.js"></script>
    <script src="js/jquery.tooltipster.min.js"></script>
    <script src="js/google-code-prettify/prettify.js"></script>
    <script src="js/twitterFetcher_v10_min.js"></script>
    <script src="js/mediaelement/mediaelement-and-player.min.js"></script>
    <script src="js/send-mail.js"></script>
    <script src="js/classie.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
    <script src="js/main.js"></script>

## Layout

This template has 5 pages in index.html file: About Me + Portfolio + Contact + Blog(latest posts only) + Resume. The HTML files are in well formatted and highly commented.

### Layout Markup

Here is the markup for general layout;

    <!-- CONTAINER -->
    <div class="container" id="container">

    	<!-- HEADER -->
    	<header class="header">

    	</header>
    	<!-- HEADER -->

    	<!-- WRAPPER -->
    	<div class="wrapper">

    		<!-- PAGE : ABOUT -->
    		<section id="about" class="page">
    			<div class="content">

    				<!-- ABOUT PAGE CONTENT -->

    			</div>
    			<!-- CONTENT -->
    		</section>
    		<!-- PAGE : ABOUT -->

    		<!-- PAGE : PORTFOLIO -->
    		<section id="portfolio" class="portfolio page">
    			<div class="content">

    				<!-- PORTFOLIO PAGE CONTENT -->

    			</div>
    			<!-- CONTENT -->
    		</section>
    		<!-- PAGE : PORTFOLIO -->

    		<!-- PAGE : CONTACT -->
    		<section id="contact" class="page">
    			<div class="content">

    				 <!-- CONTACT PAGE CONTENT -->

    			</div>
    		</section>
    		<!-- PAGE : CONTACT -->

    		<!-- PAGE : BLOG -->
    		<section id="blog" class="page">
    			<div class="content">

    				<!-- BLOG PAGE CONTENT -->

    			</div>
    		</section>
    		<!-- PAGE : BLOG -->

    		<!-- PAGE : RESUME -->
    		<section id="resume" class="page">
    			<div class="content">

    				<!-- RESUME PAGE CONTENT -->

    			</div>
    			<!-- CONTENT -->
    		</section>
    		<!-- PAGE : RESUME -->

    	</div>
    	<!-- WRAPPER -->

    </div>
    <!-- CONTAINER -->

    <!-- PORTFOLIO SINGLE AJAX CONTENT CONTAINER -->
    <div class="p-overlay"></div>
    <div class="p-overlay"></div>

    <!-- ALERT : used for contact form mail delivery alert -->
    <div class="site-alert animated"></div>

### Header Markup

Here is the markup for header.

    <!-- HEADER -->
    <header class="header">

    	<img src="images/site/avatar.png" alt="avatar">
    	<h1>Johnny Doe</h1>
    	<p>freelance graphic designer</p>

    	<!-- NAV MENU -->
    	<ul class="vs-nav">

    		<li><a href="#/about">about me</a></li>
    		<li><a href="#/portfolio">portfolio</a></li>
    		<li><a href="#/contact">contact</a></li>
    		<li><a href="#/blog">blog</a></li>
    		<li><a href="#/resume">resume</a></li>

    	</ul>
    	<!-- NAV MENU -->

    	<!-- SEARCH -->
    	<div class="header-search">
    		<form role="search" method="get" id="search-form" action="#">
    		  <input type="text" value="" name="s" id="search" placeholder="ENTER KEYWORD">
    		  <input type="submit" id="search-submit" title="Search" value="&#8594;">
    		</form>
    	</div>
    	<!-- SEARCH -->

    </header>
    <!-- HEADER -->

## GridResponsive Grid System

This template is based on Bootstrap 's solid responsive 12 column grid system.

Here is a simple example of using grid to crate a 3 column layout;

    <div class="row">
      <div class="col-md-4">column 4/12</div>
      <div class="col-md-4">column 4/12</div>
      <div class="col-md-4">column 4/12</div>
    </div>

Note that: columns must be wrapped by a `row` container. This is a simple usage of the grid system. Bootstrap grid sytems has more powerfull features, check out Bootstrap Doc to learn more about the grid system.

## Iconsover 500 icons ready to use

This template uses 2 font icon set. They are all font icons(vector) and can be styled easily with css. They are also easy to drop in anywhere as you will see in some part of this template.

### All Available Icons

300+ FontAwesome Icons

200+ Fontello Icons

### Usage of the icons

For FontAwesome icons;

    <i class="fa fa-microphone"></i>

For Fontello icons;

    <i class="icon-comment"></i>

## About Me

"About Me" page is consist of : Intro Text / Latest Tweets / Services / Work Process / Fun Fact and Clients.

### Intro Text

    <!-- intro -->
    <div class="intro">

    	<h2>

    		Hello. I am

    		<span class="rotate-words">
    			<span>an illustrator.</span>
    			<span>a writer.</span>
    			<span>a freelancer.</span>
    			<span>an inventor.</span>
    			<span>a wordpress fan.</span>
    			<span>a coffee lover.</span>
    		</span>

    		<br>
    		I live in a small town somewhere in the world.
    		<br>
    		I am passionated about <strong>minimalistic</strong> and flat design.

    	</h2>

    </div>
    <!-- intro -->

You can add many `span` to `div.rotate-words`, they will be rotated automatically.

### Latest Tweets

    <div id="latest-tweets" class="widget-twitter" data-twitterId="388393979672150017" data-tweet-count="1"></div>

How to create a valid ID to use:

1. Go to www.twitter.com and sign in as normal, go to your settings page.
2. Go to "Widgets" on the left hand side.
3. Create a new widget for what you need eg "user timeline" or "search" etc.
4. Feel free to check "exclude replies" if you dont want replies in results.
5. Now go back to settings page, and then go back to widgets page, you should
6. see the widget you just created. Click edit.
7. Now look at the URL in your web browser, you will see a long number like this: 345735908357048478
8. Use this as your ID : `data-twitterId`

`data-tweet-count` determines how many tweet to show.

## Resume

Resume page is consist of : Work and Education History/ Skills / Testimonials.

### Skills

Here is the markup for skills;

    <!-- DEV SKILLS -->
    <div class="skillset">

    	<!-- .skill-unit -->
    	<div class="skill-unit">
    		<h4>HTML5</h4>
    		<div class="bar" data-percent="100">
    			<div class="progress"></div>
    		</div>
    	</div>
    	<!-- .skill-unit -->

    	<!-- .skill-unit -->
    	<div class="skill-unit">
    		<h4>CSS3</h4>
    		<div class="bar" data-percent="50">
    			<div class="progress"></div>
    		</div>
    	</div>
    	<!-- .skill-unit -->

    </div>
    <!-- DEV SKILLS -->

Note that : Use `data-percent="number"` attribute to give percentage to each skill.

## Portfolio

Portfolio page has multi column masonry layout and filtering powered by isotope plugin.

### Filters

Here is the markup for filters;

    <!--FILTERS-->
    <ul id="filters" class="filters">
      <li class="current"><a href="#" data-filter="*">ALL</a></li>
      <li><a href="#" data-filter=".design">DESIGN</a></li>
      <li><a href="#" data-filter=".coding">CODING</a></li>
      <li><a href="#" data-filter=".logo">LOGO</a></li>
    </ul>
    <!--FILTERS-->

Note that : `data-filter=".design"` attiribute keeps the class name of items which will be filtered under same category.

### Portfolio Items

Here is the structure of portfolio items;

    <!-- PORTFOLIO ITEMS -->
    <div class="portfolio-items media-grid" data-layout="masonry">

      <div class="hentry design media-cell">
    	...
      </div>

      <div class="hentry coding media-cell">
    	...
      </div>

      <div class="hentry logo media-cell">
    	..
      </div>

    </div>
    <!-- PORTFOLIO ITEMS -->

Note that again : class name design in `<div class="hentry design">` is related to `data-filter=".design"` attribute of filter markup.

`data-layout` determines grid layout, see all isotope layouts. Most used two layouts are `masonry` and `fitRows`.

### Portfolio Item Types

We have 3 different types of portfolio item in general; Ajax Portfolio Details (with sidebar - full width layout) / Lightbox (image - image gallery - video - audio) and Custom Url.

#### 1- Ajax Portfolio Details Link

Uses jquery ajax html loading to show portfolio details. Here is the markup;

    <!-- portfolio-item -->
    <div class="media-cell design hentry">

    	<div class="media-box">
    		<img src="images/portfolio/01.png" alt="portfolio-post">
    		<div class="mask"></div>
    		<a href="portfolio-item-01.html" class="ajax"></a>
    	</div>

    	<div class="media-cell-desc">
    		<h3>Personal Cv Project</h3>
    		<p class="category">an illustration work</p>
    	</div>

    </div>
    <!-- portfolio-item -->

#### 2- Lightbox Portfolio Details Link

Uses customized and mobile optimized fancybox plugin. Supports image titles, image gellaries, videos and audios. Here is the markup;

      <!-- portfolio-item - lightbox image -->
      <div class="media-cell design image hentry">
    	<div class="media-box">
    		<img src="images/portfolio/04.png" alt="portfolio-post">
    		<div class="mask">

    			<!-- lightbox - image -->
    			<a href="images/portfolio/lightbox-01.jpg" title="an illustration by Vasili Tkach" data-lightbox-gallery="fancybox-item-01" class="lightbox"></a>
    			<!-- lightbox - image -->

    		</div>
    	</div>
    	<div class="media-cell-desc">
    		<h3>World War X</h3>
    		<p class="category">ligthbox image</p>
    	</div>
      </div>
      <!-- portfolio-item - lightbox image -->

      <!-- portfolio-item - lightbox gallery -->
      <div class="media-cell logo image hentry">
    	<div class="media-box">
    		<img src="images/portfolio/07.png" alt="portfolio-post">
    		<div class="mask">

    			<!-- lightbox - gallery -->
    			<a href="images/portfolio/lightbox-02.jpg" data-lightbox-gallery="fancybox-item-02" class="lightbox" title="Octopus is dangerous!"></a>
    			<a href="images/portfolio/lightbox-03.jpg" data-lightbox-gallery="fancybox-item-02" class="hidden lightbox"></a>
    			<a href="images/portfolio/lightbox-04.jpg" data-lightbox-gallery="fancybox-item-02" class="hidden lightbox" title="Dog have dreams"></a>
    			<!-- lightbox - gallery -->

    		</div>
    	</div>
    	<div class="media-cell-desc">
    		<h3>Wizard Adventure</h3>
    		<p class="category">lightbox gallery</p>
    	</div>
      </div>
      <!-- portfolio-item - lightbox gallery -->

      <!-- portfolio-item - lightbox video -->
      <div class="media-cell coding video hentry">

    	<div class="media-box">
    		<img src="images/portfolio/03.png" alt="portfolio-post">
    		<div class="mask"></div>
    		<!-- lightbox - video -->
    		<a href="http://player.vimeo.com/video/79380715?title=0&amp;byline=0&amp;portrait=0&amp;color=009966" title="Paper by FiftyThree" data-lightbox-gallery="fancybox-item-03" class="lightbox iframe"></a>
    		<!-- lightbox - video -->
    	</div>

    	<div class="media-cell-desc">
    		<h3>Sleepy Games</h3>
    		<p class="category">lightbox video</p>
    	</div>

      </div>
      <!-- portfolio-item - lightbox video -->

      <!-- portfolio-item - lightbox soundcloud -->
      <div class="media-cell coding audio hentry">
    	<div class="media-box">
    		<img src="images/portfolio/06.png" alt="portfolio-post">
    		<div class="mask">

    			<!-- lightbox - soundcloud -->
    			<a href="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/129829419&amp;color=009966&amp;auto_play=false&amp;show_artwork=true" title="Soundcloud embed" data-lightbox-gallery="fancybox-item-04" class="lightbox iframe"></a>
    			<!-- lightbox - soundcloud -->

    		</div>
    	</div>
    	<div class="media-cell-desc">
    		<h3>Empty Battery</h3>
    		<p class="category">lightbox soundcloud</p>
    	</div>
      </div>
      <!-- portfolio-item - lightbox soundcloud -->

Note that : items with the same value of `data-lightbox-gallery` attribute will be shown as lightbox gallery.

Note that : lightbox video or audio link need to have class `iframe` to work correctly.

#### 3- Custom Url

Opens a custom url in a new tab. The markup;

    <!-- portfolio-item - custom url -->
    <div class="media-cell logo url hentry">
    	<div class="media-box">
    		<img src="images/portfolio/08.png" alt="portfolio-post">
    		<div class="mask">
    			<a href="http://themeforest.net/user/pixelwars" target="_blank"></a>
    		</div>
    	</div>
    	<div class="media-cell-desc">
    		<h3>Shinny Robot</h3>
    		<p class="category">an illustration work</p>
    	</div>
    </div>
    <!-- portfolio-item - custom url -->

## Portfolio Single

We have two different layout for portfolio details: Sidebar / without Sidebar.

Remember : You need to create an html file for for each portfolio item.

### Portfolio Single Layout

Here is the generic layout of portfolio single pages;

    <!-- CONTAINER -->
    <div class="container" id="container">

    	<!-- HEADER -->
    	<header class="header">

    	</header>
    	<!-- HEADER -->

    	<!-- WRAPPER -->
    	<div class="wrapper">

    		<!-- .portfolio-single -->
    		<div class="portfolio-single">

    			<!-- .row -->
    			<div class="row">

    				<!-- TITLE - column 8/12 -->
    				<div class="col-md-8 portfolio-field portfolio-title">
    					<h2>Showcase your project</h2>
    				</div>
    				<!-- TITLE - column 8/12 -->

    				<!-- PORTFOLIO-NAV - column 4/12 -->
    				<div class="col-md-4 portfolio-field portfolio-nav">
    					<a class="icon button prev ajax" href="portfolio-item-03.html"></a>
    					<a class="icon button next ajax" href="portfolio-item-02.html"></a>
    					<a class="button back" href="#/portfolio"></a>
    				</div>
    				<!-- PORTFOLIO-NAV - column 4/12 -->

    			</div>
    			<!-- .row -->

    			<!-- PORTFOLIO SINGLE PAGE CONTENT -->

    			<!-- .row -->
    			<div class="row">

    				<!-- PORTFOLIO-NAV BOTTOM - column 12/12 -->
    				<div class="col-md-12 portfolio-field portfolio-nav bottom">
    					<a class="icon button prev ajax" href="portfolio-item-03.html"></a>
    					<a class="icon button next ajax" href="portfolio-item-02.html"></a>
    					<a class="button back" href="#/portfolio"></a>
    				</div>
    				<!-- PORTFOLIO-NAV BOTTOM - column 12/12 -->

    			</div>
    			<!-- .row -->

    		</div>
    		<!-- .portfolio-single -->

    	</div>
    	<!-- WRAPPER -->

    </div>
    <!-- CONTAINER -->

Note : we will pull the content of `<div class="portfolio-single">` in index.html via ajax.

#### 1 - Portfolio Single with sidebar

And the markup is;

    <!-- .row -->
    <div class="row">

    	<!-- PORTFOLIO-IMAGES - column 8/12 -->
    	<div class="col-md-8 portfolio-field">
    		<img src="images/portfolio/single/single-05.png" alt="project">
    		<img src="images/portfolio/single/single-07.png" alt="project">
    	</div>
    	<!-- PORTFOLIO-IMAGES - column 8/12 -->

    	<!-- PORTFOLIO SIDEBAR - column 4/12 -->
    	<div class="col-md-4 portfolio-field">

    		<h3>Description</h3>
    		<p>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. </p>
    		<p>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. </p>

    		<h3>Client</h3>
    		<p>Apple Inc.</p>

    		<h3>Technology</h3>
    		<ul class="tags">
    			<li><a>HTML 5</a></li>
    			<li><a>CSS 3</a></li>
    			<li><a>jQuery</a></li>
    			<li><a>Responsive Design</a></li>
    		</ul>

    		<div class="launch">
    			<a href="#" class="button primary">LAUNCH PROJECT</a>
    		</div>

    	</div>
    	<!-- PORTFOLIO SIDEBAR - column 4/12 -->

    </div>
    <!-- .row -->

#### 2 - Portfolio Single Full Width

And the markup is;

    <!-- .row -->
    <div class="row">

    	<!-- PORTFOLIO-IMAGES - column 8/12 -->
    	<div class="col-md-8 portfolio-field">
    		<img src="images/portfolio/single/single-05.png" alt="project">
    		<img src="images/portfolio/single/single-07.png" alt="project">
    	</div>
    	<!-- PORTFOLIO-IMAGES - column 8/12 -->

    	<!-- PORTFOLIO SIDEBAR - column 4/12 -->
    	<div class="col-md-4 portfolio-field">

    		<h3>Description</h3>
    		<p>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. </p>
    		<p>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. </p>

    		<h3>Client</h3>
    		<p>Apple Inc.</p>

    		<h3>Technology</h3>
    		<ul class="tags">
    			<li><a>HTML 5</a></li>
    			<li><a>CSS 3</a></li>
    			<li><a>jQuery</a></li>
    			<li><a>Responsive Design</a></li>
    		</ul>

    		<div class="launch">
    			<a href="#" class="button primary">LAUNCH PROJECT</a>
    		</div>

    	</div>
    	<!-- PORTFOLIO SIDEBAR - column 4/12 -->

    </div>
    <!-- .row -->

NOTE : You can add images or videos as many as you wish to portfolio single content as shown above. They will behave flexible.

NOTE : You can built your own portfolio single templates with built in bootstrap responsive grid as you wish.

## Contact

Contact page is consist of : Contact Info / Social Icons / Contact Form / Google Map.

### Setting up Contact Form

1-) You can change mail subject in form's html markup;

    <!-- enter mail subject here -->
    <input type="hidden" name="subject" id="subject" value="You have a new message from cvCard!">

Change only the `value="You have a new message from cvCard!"` to your desired subject.

2-) Edit `send-mail.php` in a text editor,

    // site owner
    $site_name = 'cvCard HTML5 Template';
    $sender_domain = 'server@your-domain.com';
    $to = 'your-mail@gmail.com';

- `$site_name` : this will be shown as sender name.
- `$sender_domain` : this is required for some hosting like dreamhost. It should be like `server@your-domain.com`.
- `$to` : This is the receiver e-mail address, your address.

### Social Icons

Here is the markup for all available social icons;

    <!-- SOCIAL -->
    <ul class="social">
    	<li><a class="facebook" href="#"></a></li>
    	<li><a class="twitter" href="#"></a></li>
    	<li><a class="linkedin" href="#"></a></li>
    	<li><a class="google-plus" href="#"></a></li>
    	<li><a class="pinterest" href="#"></a></li>
    	<li><a class="github" href="#"></a></li>
    	<li><a class="behance" href="#"></a></li>
    	<li><a class="dribbble" href="#"></a></li>
    	<li><a class="instagram" href="#"></a></li>
    	<li><a class="lastfm" href="#"></a></li>
    	<li><a class="rss" href="#"></a></li>
    	<li><a class="vimeo" href="#"></a></li>
    	<li><a class="forrst" href="#"></a></li>
    	<li><a class="skype" href="#"></a></li>
    	<li><a class="picasa" href="#"></a></li>
    	<li><a class="youtube" href="#"></a></li>
    	<li><a class="flickr" href="#"></a></li>
    	<li><a class="tumblr" href="#"></a></li>
    	<li><a class="blogger" href="#"></a></li>
    	<li><a class="delicious" href="#"></a></li>
    	<li><a class="digg" href="#"></a></li>
    	<li><a class="friendfeed" href="#"></a></li>
    	<li><a class="wordpress" href="#"></a></li>
    	<li><a class="stack-overflow" href="#"></a></li>
    	<li><a class="foursquare" href="#"></a></li>
    	<li><a class="xing" href="#"></a></li>
    	<li><a class="weibo" href="#"></a></li>
    	<li><a class="soundcloud" href="#"></a></li>
    	<li><a class="fivehundredpx" href="#"></a></li>
    	<li><a class="slideshare" href="#"></a></li>
    </ul>
    <!-- SOCIAL -->

### Google Map

This is the markup for google map;

    <!-- GOOGLE MAP -->
    <div class="map">
    	<div data-latitude="-25.363882" data-longitude="131.044922" data-zoom="4" id="map-canvas" class="map-canvas"></div>
    </div>
    <!-- GOOGLE MAP -->

How to get latitude and longitude values.

- `data-latitude` : enter latitude value for your map
- `data-longitude` : enter longitude value for your map
- `data-zoom` : enter zoom value for your map
- `$sender_domain` : this is required for some hosting like dreamhost. It should be like `server@your-domain.com`.
- `$to` : This is the receiver e-mail address, your address.

## Single Page

There are 2 different types of single page layout in this template;

### 1- Fixed width layout

Perfect for readable content. Here is the markup;

    <!-- CONTAINER -->
    <div class="container" id="container">

    	<!-- HEADER -->
    	<header class="header">

    	</header>
    	<!-- HEADER -->

    	<!-- WRAPPER -->
    	<div class="wrapper">

    		<!-- .readable-content -->
    		<div class="readable-content">

    			<!-- .hentry -->
    			<article class="post hentry">

    				<!-- .entry-header -->
    				<header class="entry-header">
    					 <h1 class="entry-title">PAGE TITLE</h1>
    				</header>
    				<!-- .entry-header -->

    				<!-- .entry-content -->
    				<div class="entry-content">

    					<!-- PAGE CONTENT HERE -->

    				</div>
    				<!-- .entry-content -->

    			</article>
    			<!-- .hentry -->

    		</div>
    		<!-- .readable-content -->

    	</div>
    	<!-- WRAPPER -->

    </div>
    <!-- CONTAINER -->

### 2- Full width layout

Perfect for readable content. Here is the markup;

    <!-- CONTAINER -->
    <div class="container" id="container">

    	<!-- HEADER -->
    	<header class="header">

    	</header>
    	<!-- HEADER -->

    	<!-- WRAPPER -->
    	<div class="wrapper">

    		<!-- .full-width-content -->
    		<div class="full-width-content">

    			<!-- .hentry -->
    			<article class="page type-page hentry">

    				<!-- .entry-header -->
    				<header class="entry-header">
    					 <h1 class="entry-title">PAGE TITLE</h1>
    				</header>
    				<!-- .entry-header -->

    				<!-- .entry-content -->
    				<div class="entry-content">

    					<!-- PAGE CONTENT HERE -->

    				</div>
    				<!-- .entry-content -->

    			</article>
    			<!-- .hentry -->

    		</div>
    		<!-- .full-width-content -->

    	</div>
    	<!-- WRAPPER -->

    </div>
    <!-- CONTAINER -->

## Blog Page

Blog page supports several post formats. I want to talk about self hosted audio and video. Other post format's html markup is simple enough.

This template uses mediaelementjs script for self hosted html5 audio/video solution. It also has flash/silverlight fallbacks for non-supported browsers.

### Self Hosted Audio

Only one .mp3 file is enough for self hosted html5 audio. Here is the markup;

    <audio preload="none" src="media/AirReview-Landmarks-02-ChasingCorporate.mp3"  style="width: 100%;"></audio>

### Self Hosted Video

And again thanks to mediaelementjs only one .mp4 file is enough for self hosted html5 video. Here is the markup;

    <!-- .media-wrap -->
    <div class="media-wrap">
    	<video src="media/big-buck-bunny-trailer.mp4" poster="media/big-buck-bunny-trailer.jpg" preload="none" style="width: 100%; height: 100%;"></video>
    </div>
    <!-- .media-wrap -->

Note : `<div class="media-wrap">`is needed to make the video responsive with correct aspect ratio.

Note : `poster="media/big-buck-bunny-trailer.jpg"` is the image that will be shown as placeholder (or poster) before video playing.

### Flexslider

This template uses flexslider for image gallery. Here is the markup for slides;

    <!-- .flexslider -->
    <div class="flexslider" data-autoplay="false" data-interval="3000" data-animation="slide" data-direction="horizontal" data-animationSpeed="600"  data-pauseOnHover="true">
    	<!-- .slides -->
    	<ul class="slides">

    		<!-- slide -->
    		<li>
    			<img src="images/blog/daft-punk-presentation.png" alt="slide">
    			<p class="flex-title">This is a slide title.</p>
    		</li>
    		<!-- slide -->

    		<!-- slide -->
    		<li>
    			<img src="images/blog/lee-2.png" alt="slide">
    		</li>
    		<!-- slide -->

    		<!-- slide -->
    		<li>
    			<img src="images/blog/lee.png" alt="slide">
    		</li>
    		<!-- slide -->

    	</ul>
    	<!-- .slides -->
    </div>
    <!-- .flexslider -->

You can customize flexslider with data attributes;

`data-autoplay` autoplay slideshow : "true" or "false"

`data-interval` slideshow image change interval(in ms) when autoplay is on.

`data-animation` slide change animation : "slide" or "fade"

`data-direction` slide direction : "horizontal" or "vertical"

`data-animationSpeed` slide change animation speed(in ms)

`data-pauseOnHover` pause the slideshow when interacting with control elements : "true" or "false"

# CSSstyle files used

Here is a complete list of used css files in the theme and what thay stand for;

- print.css : Print specific styles.
- normalize.css : Normalize.css is an alternative to CSS resets. Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
- bootstrap.min.css : Bootstrap is a powerful front-end framework and we only used the responsive grid system for our layout.
- animate.css : Animate.css is a bunch of cool, fun, and cross-browser css3 animations. We are using it for page/portfolio details/lightbox transitions.
- font-awesome.min.css : Font Awesome includes styles for Font Awesome font icons.
- fontello.css : includes styles for fontello font icons.
- google-code-prettify/prettify.css : style file fo the google code prettify script.
- uniform.default.css : style file fo the Uniform script.
- flexslider.css : style file of FlexSlider responsive slider script, used for post format gallery slider in blog.
- mediaelementplayer.css : style file fo the MediaElement.js script file.
- tooltipster.css : style file fo the tooltipsetter script.
- nprogress.css : style file fo the nprogress script file.
- jquery.fancybox-1.3.4.css : is the style file of Fancybox jquery plugin, used for lightbox.
- style.css : wordpress specific styles (image alignments etc..). Since this template is intented to convert a wordpress theme soon, we used style.css
- main.css : is the main style file of the theme. Layout/font/color and other style declerations are in this file. Code blocks are grouped and commented.

### Included Fonts (Font icons)

In this theme we have used font icons instead of png icons, because font icons are vector-scalable, ready for retina screens, saves bandwidth and easy to work with.

- css/fonts/FontAwesome : FontAwesome is the general font icon set we used in this template.
- css/fonts/fontello : a custom set of icons from Fontello.com, mostly used for social icons.

# Javascriptscript files used

We are using jquery (v1.10.2) as javascipt framework.

Here is a complete list of used script files in the template and what thay stand for;

- jquery-1.10.2.min.js : jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
- jquery-migrate-1.2.1.min.js a jQuery Migrate is a plugin used to detect and restore APIs or features that have been deprecated in jQuery and removed as of version 1.9
- modernizr.js : Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. We are using it to proivde fallbacks for not supported browser.
- html5shiv.js : HTML5 Shiv is the defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer.
- selectivizr-min.js : selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8.
- respond.min.js : Respond is a fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more) (Required for bootstrap's mobile-first approach grid to work on older IEs).
- jquery.address-1.5.min.js : jQuery Address plugin provides powerful deep linking capabilities and allows the creation of unique virtual addresses that can point to a website section or an application state.
- smoothscroll.js : a script to provide smooth scroll on chrome.
- nprogress.js : nprogress is a nanoscopic progress bar. Featuring realistic trickle animations to convince your users that something is happening!
- fastclick.js : fastclick is a simple, easy-to-use library for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers.
- jquery.imagesloaded.min.js : imagesloaded is a jQuery plugin that triggers a callback after all images have been loaded.
- jquery.isotope.min.js : Isotope is an exquisite jQuery plugin for magical layouts. We used it to build portfolio layout and filtering. Also for gallery page layout.
- jquery.flexslider-min.js : FlexSlider is a responsive slider script, used for post format gallery slider in blog.
- jquery.fitvids.js : fitvids.JS is a lightweight, easy-to-use jQuery plugin for fluid width video embeds. We used it for responsive video embeeding.
- jquery.validate.min.js : jQuery validate plugin is a jQuery plugin makes simple client-side form validation. We used it for contact form client-side validation.
- jquery.uniform.min.js : jQuery Uniform is a form style plugin, used for cross browser styled form elements.
- jquery.fancybox-1.3.4.pack.js : is the script file of Fancybox jquery plugin, used for lightbox.
- jquery.tooltipster.min.js : Tooltipsetter is a powerful, flexible jQuery plugin enabling you to easily create semantic, modern tooltips enhanced with the power of CSS.
- google-code-prettify : google-code-prettify is a Javascript module and CSS file that allows syntax highlighting of source code snippets in an html page.
- twitterFetcher_v10_min.js : Twitterfetcher is a plugin to show your latest tweets.
- mediaelement-and-player.min.js : MediaElement.js is a script that provides HTML5 audio and video players in pure HTML and CSS with flash/silverlight fallbacks for non supported browsers.
- send-mail.js : is a simple script file written by us to send mail via contact form with ajax support.
- triple.layout.js : Sliding Horizontal Layout script used for layout.
- main.js : This is the main script file of the theme. Plugin calls and other script works are done in this file with comments.

# Customizationhow to customize the template to your needs.

We designed this template for easy customization. You can customize the template easily to your needs in two general ways : Html Data Attributes / CSS Skins.

## Html Data Attributes

Here is a list of custom data attributes you can use with `html` tag.

    <html lang="en" class="no-js one-page-layout" data-classic-layout="false" data-mobile-only-classic-layout="true" data-inAnimation="fadeInUp" data-outAnimation="fadeOutDownBig">

- `data-classic-layout` : true/false : when true always fallbacks to classic layout, deactivates "Sliding Horizontal Layout" layout. Default value is `false`.
- `data-mobile-only-classic-layout` : true/false : when true always fallbacks to classic layout on mobile devices. Default value is `true`. Make it false if you want to try "Sliding Horizontal Layout" on mobile.
- `data-inAnimation` : Determines the animation type for ajax portfolio details page in animation; You can see a full list of supported animations live in animate.css.
- `data-outAnimation` : Determines the animation type for ajax portfolio details page out animation; You can see a full list of supported animations live in animate.css.

NOTE : Make sure you select any "in" animation for `data-inAnimation` and "out" animation for `data-outAnimation` attributes.

## CSS Skins

This template has 3 predefined skins for quick customization. Skin files are located in `css/skins` folder.

      css/skins/
      ├── flat.css
      ├── overlay.css
      └── overlay-bold.css

If you don't include any skin you will get the minimal style.

Add the selected skin style file just before the close bracket of `head` tag.

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

## Custom CSS

While this template is designed for easily styling with predefined css skin files if you want to edit a specific section of the site, follow these steps;

First grab the element you want to style by inspecting element in your browser, right click the element and click Inspect Element. If you don't know how, check out this article, once you are familiar with this approach you will find it extremely easy to edit/override current styles of an element.

Let's say you want to make active filter link item bolder in portfolio filtering. Grab the element by right click on it and click "Inspect Element", on the right pane of developer tool window we can see to code to grab the elemnent with css : `#filters .current a` Then do the following;

    #filters .current a { font-weight: bold; }

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight .

    #portfolio #filters .current a { font-weight: bold ; }

And if your new style is not overriding, add `!important` at the end of style definition;

    #filters .current a { font-weight: bold !important; }

NOTE : Add your custom css code after all style definitions in your `head` tag.

    <style>
    	#filters .current a { font-weight: bold !important; }
    </style>

Here are some simple css code snippets to customize the essentials;

Change classic layout nav menu active item text color and background color;

    /* Classic Layout Nav Active Item */
    .classic-layout .vs-nav li a:hover,
    .classic-layout .vs-nav li.current_page_item a {
        color: #fff; background: #345;
        }

Change cover h3 span (yellow) titles text color;

    .cover h3 span { color: #FC0; }

Change link colors;

    /* Links */
    a { color: #096; }
    a:hover { color: #5BCF80; }

Change text-selection color;

    /* Text Selection */
    ::selection { text-shadow: none; color: #333; background: #FFFFCF; }
    ::-moz-selection { text-shadow: none; color: #333; background: #FFFFCF; }

### Customizing colors

You will see "THEME" section at the end of the `main.css` file. You can easily customize primary/secondary color there.

    /*  --------------------------------------------

    	8. THEME - customize colors etc...

        -------------------------------------------- */
    body {
     	color: #345;
    	}
    /* Links */
    a {
     	color: #096;
    	}
    a:hover {
     	color: #5BCF80;
    	}

    /* Text Selection */
    ::selection {
     	text-shadow: none; color: #333; background: #FFFFCF;
    	}
    ::-moz-selection {
     	text-shadow: none; color: #333; background: #FFFFCF;
    	}

    /* Service Icons */
    .color1 i {
    	background: #F8CB30;
    	}
    .color2 i {
    	background: #74BADE;
    	}
    .color3 i {
    	background: #5BCF80;
    	}
    .color4 i {
    	background: #E25E5B;
    	}

    /* PRIMARY COLOR : #096
       ================================================== */
    .navigation a:hover,
    .pagination a:hover,
    .entry-meta a:hover,
    .single-page-layout .vs-nav li i:hover,
    .media-box .mask:before,
    .button.primary:hover,
    a.more-link:hover,
    .flex-control-paging li a.flex-active,
    .mejs-controls .mejs-time-rail .mejs-time-current,
    .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
     	background: #096
    	}
    .entry-title a:hover,
    .portfolio-nav a.button:hover,
    .related-posts li a:hover,
    .nav-single a:hover,
    .comment-meta a:hover,
    .comment-meta .fn + a:hover,
    .comment-reply-link:hover {
     	color: #096
    	}
    .portfolio-nav a.button:hover,
    .format-link .link-content > a:first-child:hover,
    .flex-control-paging li a:hover,
    .bypostauthor > article {
    	border-color: #096
    	}

    /* SECONDARY COLOR : #5BCF80 - lighter than primary color
       ================================================== */
    .skill-unit .bar .progress,
    .event .date,
    .letter-info p i,
    .media-cell-desc .date,
    #nprogress .bar,
    #fancybox-close,
    .portfolio-nav a.button.back {
    	background: #5BCF80;
    	}
    #nprogress .spinner-icon {
      border-top-color: #5BCF80; border-left-color: #5BCF80;
    	}

## Fonts

### Fonts by Google Webfonts

We included the fonts in this template from Google Webfonts which uses font-face technique for font embeeding.

Font declerations are at the head section;

    <!-- FONTS -->
    <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Tangerine:400,700' rel='stylesheet' type='text/css'>

### Changing Fonts

To change fonts, just go to Google Webfonts site, search and select a new font, click "Quick use" link, then copy the stylesheet code from Add this code to your website: / Standart section and paste the code into `head` section. Then change the font family name in main.css starting from line:376. These font definitions in main.css are the only font definitions for the entire theme, once you have changed font-family in these lines, you are done!

    /* BODY */
    body,
    input,
    textarea,
    select,
    button {
     	font-family: Lato, Arial, serif
    	}

# Creditsthanks to the creators of this great files

- jQuery
- jQuery Migrate
- Bootstrap
- Normalize.css
- Animate.css
- Sliding Horizontal Layout by codrops
- NProgress.js
- Fontello
- Uniform
- FlexSlider
- MediaElement.js
- tooltipsetter
- fastclick
- google-code-prettify
- Twitterfetcher
- CSS3 Rotating Words by codrops
- Fancybox
- jQuery Address plugin
- Modernizr
- Isotope
- fitvids.JS
- jQuery validate plugin
- Font Awesome
- HTML5 Shiv
- selectvizr
- Respond
- twitterFetcher
- imagesloaded
- Big Buck Bunny
- Google Webfonts