<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link href="images/favicon.png" rel="shortcut icon" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My VCard</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/typography.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/prettyphoto.css" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>
<body>
<div class="container">
<div class="paging"></div>
<div class="slideshow">
<div class="item current-item">
<div class="top"></div>
<div class="content-container">
<div class="content home-content">
<div class="content-padding">
<div id="front-info">
<h1>Ime Презиме</h1>
<div class="clear"></div>
<h2 class="jobtitle">Front-end Девелопер</h2>
</div>
<div id="home-icons">
<a href="#" class="grayscale vtip" title="Download vCard" >
<span><img src="images/icons/grayscale/save_download_32.png" alt="" /></span>
</a>
</div>
</div>
<div class="content-bottom"></div>
</div>
<div class="nav-container">
<div class="nav" id="home">
<a href="#" class="thumb" title="Home" ><span><img src="images/menu_icons/home.png" alt="" /></span></a>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="item">
<div class="top"></div>
<div class="content-container about-content">
<div class="content">
<div class="content-padding">
<h2 class="border">About</h2>
<div class="grid_6">
<img src="images/portrait.jpg" class="image-thumb-left" alt="myself" />
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Nisl enim.
</p>
<div class="divider-20"></div>
<h4>What I do</h4>
<ul class="list">
<li>Web Design and Development</li>
<li>Photography</li>
<li>Branding</li>
</ul>
</div>
<div class="grid_6 last">
<div class="divider-5"></div>
<h4>Technical Skills</h4>
<ul class="list-bg">
<li>
<div class="progress">
<label>Web & Graphic Design</label>
<div class="progressBar">
<div class="progressValue">
<span title="8 / 10">80%</span>
</div>
</div>
</div>
</li>
<li>
<div class="progress">
<label>XHTML / CSS</label>
<div class="progressBar">
<div class="progressValue">
<span title="9 / 10">90%</span>
</div>
</div>
</div>
</li>
<li>
<div class="progress">
<label>Javascript / JQuery</label>
<div class="progressBar">
<div class="progressValue">
<span title="7 / 10">70%</span>
</div>
</div>
</div>
</li>
</ul>
<div class="divider-30"></div>
<h4>Tools of the Trade</h4>
<ul class="styled-list2">
<li>Photoshop</li>
<li>Illustrator</li>
<li>Maya</li>
<li>Lorem Ipsum Dolor</li>
<li>Integer eu velit</li>
</ul>
</div>
</div>
<div class="content-bottom"></div>
</div>
<div class="nav-container">
<div class="nav" id="about">
<a href="#" class="thumb" title="About"><span><img src="images/menu_icons/about.png" alt="" /></span></a>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="item">
<div class="top"></div>
<div class="content-container services-content">
<div class="content">
<div class="content-padding">
<h2 class="border">My Work</h2>
<div id="filterable-container">
<div class="filter-text"><h4>Filter by Category</h4></div>
<ul id="filter">
<li class="current"><a href="#" class="first"><span>All</span></a></li>
<li><a href="#"><span>Design</span></a></li>
<li><a href="#"><span>Development</span></a></li>
<li><a href="#"><span>CMS</span></a></li>
<li><a href="#" class="last"><span>Branding</span></a></li>
</ul>
<div id="portfolio-container">
<ul>
<li>
<div class="pdiv cms integration">
<a href="images/preview_image.png" rel="prettyPhoto" class="thumb vtip" title="My Portfolio">
<img src="images/portfolio-images/portfolio1.jpg" width="125" height="99" alt="" />
</a>
</div>
</li>
<li>
<div class="pdiv integration design">
<a href="images/preview_image.png" rel="prettyPhoto" class="thumb vtip" title="Simple Solutions 2.0">
<img src="images/portfolio-images/portfolio2.jpg" width="125" height="99" alt="" />
</a>
</div>
</li>
<li>
<div class="pdiv design branding">
<a href="images/preview_image.png" rel="prettyPhoto" class="thumb vtip" title="Clear Pixels">
<img src="images/portfolio-images/portfolio3.jpg" width="125" height="99" alt="" />
</a>
</div>
</li>
<li>
<div class="pdiv branding">
<a href="images/preview_image.png" rel="prettyPhoto" class="thumb vtip" title="Business News">
<img src="images/portfolio-images/portfolio4.jpg" width="125" height="99" alt="" />
</a>
</div>
</li>
<li>
<div class="pdiv design cms development">
<a href="images/preview_image.png" rel="prettyPhoto" class="thumb vtip" title="Light Extreme">
<img src="images/portfolio-images/portfolio5.jpg" width="125" height="99" alt="" />
</a>
</div>
</li>
<li>
<div class="pdiv design branding">
<a href="images/preview_image.png" rel="prettyPhoto" class="thumb vtip" title="Silverado">
<img src="images/portfolio-images/portfolio6.jpg" width="125" height="99" alt="" />
</a>
</div>
</li>
<li>
<div class="pdiv cms development">
<a href="images/preview_image.png" rel="prettyPhoto" class="thumb vtip" title="Simple Solutions">
<img src="images/portfolio-images/portfolio7.jpg" width="125" height="99" alt="" />
</a>
</div>
</li>
<li>
<div class="pdiv cms development">
<a href="images/preview_image.png" rel="prettyPhoto" class="thumb vtip" title="Amazing Business">
<img src="images/portfolio-images/portfolio8.jpg" width="125" height="99" alt="" />
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="content-bottom"></div>
</div>
<div class="nav-container">
<div class="nav" id="portfolio">
<a href="#" class="thumb" title="Portfolio"><span><img src="images/menu_icons/portfolio.png" alt="" /></span></a>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="item">
<div class="top"></div>
<div class="content-container">
<div class="content contact-content">
<div class="content-padding">
<div class="grid_8" id="contact-form">
<h2 class="border">Get in Touch</h2>
<div class="divider-15"></div>
<form action="15/sendemail.php" id="contact_us" method="post">
<div class="rowElem">
<label>Name</label>
<div class="field">
<input type="text" name="Name" id="name" />
</div>
<div class="error1">
Incorrect Name
</div>
</div>
<div class="rowElem">
<label>Email</label>
<div class="field">
<input type="text" name="Email" id="email" />
</div>
<div class="error2">
Incorrect Email
</div>
</div>
<div class="rowElem">
<label>Subject</label>
<div class="field">
<input type="text" name="Subject" id="subject" />
</div>
<div class="error4">
Incorrect Subject
</div>
</div>
<div class="rowElem" id="textarea">
<label>Message</label>
<textarea name="Message" rows="5" cols="25" id="message_input"></textarea>
<div class="error3">
Enter a Message
</div>
</div>
<div id="submit">
<label></label>
<input type="submit" value="Send" name="submitButton" class="form-submit" />
</div>
</form>
<div id="note">
<span class="notification_ok">Your message has been sent. Thank you!</span>
</div>
</div>
<div class="grid_4 last" id="connect">
<h3 class="border">Connect</h3>
<div class="divider-15"></div>
<div id="connect-menu">
<ul>
<li>
<div class="connect">
<a href="../../www.facebook.com/index.html">
<span class="icon"><img src="images/icons/grayscale/facebook_32.png" alt="Facebook" /></span>
<span class="text">Facebook</span>
</a>
</div>
</li>
<li>
<div class="connect">
<a href="../../www.twitter.com/index.html">
<span class="icon"><img src="images/icons/grayscale/twitter_32.png" alt="Twitter" /></span>
<span class="text">Twitter</span>
</a>
</div>
</li>
<li>
<div class="connect">
<a href="../../www.skype.com/index.html">
<span class="icon"><img src="images/icons/grayscale/skype_32.png" alt="Skype" /></span>
<span class="text">Skype</span>
</a>
</div>
</li>
<li>
<div class="connect">
<a href="../../www.linkedin.com/index.html">
<span class="icon"><img src="images/icons/grayscale/linkedin_32.png" alt="LinkedIn" /></span>
<span class="text">LinkedIn</span>
</a>
</div>
</li>
<li>
<div class="connect">
<a href="../../www.flickr.com/index.html">
<span class="icon"><img src="images/icons/grayscale/flickr_32.png" alt="Flickr" /></span>
<span class="text">Flickr</span>
</a>
</div>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
<div class="content-bottom"></div>
</div>
<div class="nav-container">
<div class="nav" id="contact">
<a href="#" class="thumb" title="Contact"><span><img src="images/menu_icons/contact3.png" alt=""/></span></a>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
<div id="footer">
© Copyright 2011 John Doe. All Rights Reserved.
</div>
</div>
<script type="text/javascript" src="js/init_form.js"></script>
<script type="text/javascript" >
$(".nav a[title]").tooltip({ position: 'center', offset: [-3, 15], effect: "slide", delay: 200});
</script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
</body>
</html>
