<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<title>FlexyCard HTML5 Responsive vCard Template - FlexyCodes Themes</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="description" content="FlexyCodes - FlexyCard vCard Template. Creating my personal page!"/>
<!-- CSS | bootstrap -->
<!-- Credits: http://getbootstrap.com/ -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<!-- CSS | font-awesome -->
<!-- Credits: http://fortawesome.github.io/Font-Awesome/icons/ -->
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<!-- CSS | Colors -->
<link rel="stylesheet" type="text/css" href="css/colors/DarkBlue.css" id="colors-style" />
<link rel="stylesheet" type="text/css" href="css/switcher.css" />
<!-- CSS | animate -->
<!-- Credits: http://daneden.github.io/animate.css/ -->
<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
<!-- CSS | Normalize -->
<!-- Credits: http://manos.malihu.gr/jquery-custom-content-scroller -->
<link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.css" />
<!-- CSS | Google Fonts -->
<link href='http://fonts.useso.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>
<!-- CSS | Style -->
<!-- Credits: http://themeforest.net/user/FlexyCodes -->
<link rel="stylesheet" type="text/css" href="css/main.css" />
<!-- CSS | prettyPhoto -->
<!-- Credits: http://www.no-margin-for-errors.com/ -->
<link rel="stylesheet" type="text/css" href="css/prettyPhoto.css"/>
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="images/favicon/favicon.ico">
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/icons/font-awesome-ie7.min.css"/>
<![endif]-->
<style>
@media only screen and (max-width : 1200px){
.resp-vtabs ul.resp-tabs-list {
margin-left: 0 !important;
}
}
@media only screen and (max-width : 991px){
.resp-vtabs .resp-tabs-container {
margin-left: 13px;
}
}
@media only screen and (min-width : 800px) and (max-width : 991px){
.resp-vtabs .resp-tabs-container {
width:89%;
}
}
@media only screen and (max-width : 800px){
.widget-profil {
float: none !important;
}
.resp-vtabs .resp-tabs-container {
width:100%;
}
}
.widget-profil {
float: left;
}
.resp-vtabs ul.resp-tabs-list {
margin-left: 12px;
}
</style>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Laoding page -->
<div id="preloader"><div id="spinner"></div></div>
<!-- .slideshow -->
<ul class="cb-slideshow" id="cb_slideshow" style="display:none">
<li><span>Image 01</span><div></div></li>
<li><span>Image 02</span><div></div></li>
<li><span>Image 03</span><div></div></li>
<li><span>Image 04</span><div></div></li>
<li><span>Image 05</span><div></div></li>
<li><span>Image 06</span><div></div></li>
</ul>
<!-- /.slideshow -->
<!-- .wrapper -->
<div class="wrapper">
<!--- .Content -->
<section class="tab-content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3 widget-profil">
<div class="row">
<!-- Profile Image -->
<div class="col-lg-12 col-md-12 col-sm-3 col-xs-12 ">
<div class="image-holder one" id="pic_prof_1" style="display:block">
<img class="head-image up circle" src="images/img/up.png" width="150" height="150" alt="" />
<img class="head-image up-left circle" src="images/img/upleft.png" width="150" height="150" alt="" />
<img class="head-image left circle" src="images/img/left.png" width="150" height="150" alt="" />
<img class="head-image down-left circle" src="images/img/downleft.png" width="150" height="150" alt="" />
<img class="head-image down circle" src="images/img/down.png" width="150" height="150" alt="" />
<img class="head-image down-right circle" src="images/img/downright.png" width="150" height="150" alt="" />
<img class="head-image right circle" src="images/img/right.png" width="150" height="150" alt="" />
<img class="head-image up-right circle" src="images/img/upright.png" width="150" height="150" alt="" />
<img class="head-image front circle" src="images/img/front.png" width="150" height="150" alt="" />
</div>
<!-- style for simple image profile -->
<div class="circle-img" id="pic_prof_2" style="display:none"></div>
</div>
<!-- End Profile Image -->
<div class="col-lg-12 col-md-12 col-sm-9 col-xs-12">
<!-- Profile info -->
<div id="profile_info">
<h1 id="name" class="transition-02">brown smith</h1>
<h4 class="line">GRAPHIC & WEB DESIGNER</h4>
<h6><span class="fa fa-map-marker"></span> San Francisco , CA</h6>
</div>
<!-- End Profile info -->
<!-- Profile Description -->
<div id="profile_desc">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac risus nibh. Donec adipiscing luctus tur
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing eli
</p>
</div>
<!-- End Profile Description -->
<!-- Name -->
<div id="profile_social">
<h6>My Social Profiles</h6>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa fa-dribbble"></i></a>
<a href="#"><i class="fa fa-foursquare"></i></a>
<div class="clear"></div>
</div>
<!-- End Name -->
</div>
</div>
</div>
<div class="col-md-9 flexy_content" style="padding-left: 0;padding-right: 0;">
<!-- verticalTab menu -->
<div id="verticalTab">
<ul class="re