<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>Second V-card</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!-- Css styles -->
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Signika:400,600,700,300" />
<!-- JavaScript lib -->
<script src="lib/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="lib/jquery.easytabs.min.js" type="text/javascript"></script>
<script src="lib/jquery.quicksand.js" type="text/javascript"></script>
<script src="lib/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="lib/jquery.poshytip.min.js" type="text/javascript"></script>
<script src="lib/jquery.fancybox-1.3.4.js" type="text/javascript"></script>
<script src="lib/jquery.mousewheel-3.0.4.pack.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="lib/jquery.gmap.min.js" type="text/javascript"></script>
<script src="lib/jquery.validate.js" type="text/javascript"></script>
<script src="lib/custom.js" type="text/javascript"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 8]>
<style>
/* For IE < 8 (trigger hasLayout) */
.clearfix {
zoom:1;
}
</style>
<![endif]-->
<body>
<!--Page Wrraper-->
<div id="wrapper" class="clearfix">
<!--Style switcher-->
<section id="styleSwitcher">
<div id="inset">
<a class="orange" href="Second/orange/index.html"> </a>
<a class="red" href="Second/red/index.html"> </a>
<a class="green" href="Second/green/index.html"> </a>
<a class="switcher" href="#" data-id="1"><img src="images/pattern/patt1.png" alt="" /></a>
<a class="switcher" href="#" data-id="2"><img src="images/pattern/patt2.png" alt="" /></a>
<a class="switcher" href="#" data-id="3"><img src="images/pattern/patt3.png" alt="" /></a>
</div>
</section>
<!--End style switcher-->
<!--Page Header-->
<header id="header" class="clearfix">
<figure id="img"><img src="images/img.png" alt="" /><hgroup>
<h1>John Smith</h1>
<h2>Interactive designer/Photographer</h2>
</hgroup></figure>
<nav id="mainNav">
<ul class="tabs clearfix">
<li><a class="tab-about" href="#about">About</a></li>
<li><a class="tab-portfolio" href="#portfolio">Portfolio</a></li>
<li><a class="tab-blog" href="#blog">Blog</a></li>
<li><a class="tab-contact" href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!--End Page Header-->
<!-- Tabs Container-->
<section id="tabsContainer" class="clearfix">
<figure id="edge"><img src="images/edge.png" alt="" /></figure>
<!--Inner-->
<div id="innerBg">
<!--About Tab-->
<article id="about" class="clearfix">
<!-- Introduction -->
<section id="introduction" class="clearfix">
<h1>/ About me</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<ul class="info">
<li><span>Name</span> : John Smith</li>
<li><span>Date of birth</span> : 5/6/1987</li>
<li><span>Location</span> : Rabat - Morocco</li>
</ul>
<ul class="info">
<li><span>Email</span> : youremail@gmail.com</li>
<li><span>Phone</span> : + 55 81 8666-8867 </li>
<li><span>Website</span> : www.yoursite.com</li>
</ul>
</section>
<!-- End introduction -->
<!-- Skills -->
<section id="skills" class="clearfix">
<div id="skills1">
<h1>/ Graphics skills</h1>
<ul id="graphics">
<li>Photoshop <span class="r1"></span></li>
<li>Indesign<span class="r2"></span></li>
<li>Illustrator<span class="r3"></span></li>
<li>Flash<span class="r4"></span></li>
<li>Aftereffect<span class="r5"></span></li>
</ul>
</div>
<div id="skills2">
<h1>/ Programming skills</h1>
<ul id="programming">
<li>Php/Mysql<span class="r6"> </span> </li>
<li>Javascript <span class="r7"> </span></li>
<li>ASP <span class="r8"> </span></li>
<li>AS3 <span class="r9"> </span></li>
<li>Wordpress <span class="r10"> </span></li>
</ul>
</div>
</section>
<!-- End skills -->
<!-- Experience -->
<section id="experience">
<h1>/ Experience</h1>
<hgroup>
<h4>WebDesigner – Mutation Media </h4>
<h6>2005-2012</h6>
</hgroup>
<p>Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<br />
<hgroup>
<h4>WebDevelopper – Mutation Media </h4>
<h6>2005-2012</h6>
</hgroup>
<p>Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</section>
<!-- End experience -->
<!-- Education -->
<section id="education">
<h1>/ Education</h1>
<hgroup>
<h4>SEO consulting – Mutation Media </h4>
<h6>2005-2012</h6>
</hgroup>
<p>Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<br />
<hgroup>
<h4>Art director – Mutation Media </h4>
<h6>2005-2012</h6>
</hgroup>
<p>Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</section>
<!-- End education -->
<a class="vcardButton" href="#">Download my v-card</a>
<!-- End About Tab-->
</article>
<!--Portfolio Tab-->
<article id="portfolio" class="clearfix">
<!-- Introduction -->
<h1>/ My Works</h1>
<p>Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<!-- End introduction -->
<!-- Filter nav -->
<ul id="category" class="filter">
<li class="current all"><a href="#">All <span> /</span></a></li>
<li class="WebDesign"><a href="#">WebDesign <span> /</span></a></li>
<li class="WebDevelopment"><a href="#">WebDevelopment <span> /</span></a></li>
<li class="Animation"><a href="#">Animation </a></li>
</ul>
<!-- End filter nav -->
<!-- Works list -->
<section id="works">
<ul id="items" class="portfolio">
<li data-id="id-1" data-type="WebDesign" class="item"><a class="folio" href="images/folioimages/preview.jpg"><span class="plus"></span></a><img src="images/folioimages/im1.jpg" alt="" /><span class="border"></span><h3>Project title<span> / In Webdesign</span></h3></li>
<li data-id="id-2" data-type="WebDevelopment" class="item"><a class="folio" href="images/folioimages/preview.jpg"><span class="plus"></span>