<![CDATA[
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>KURUVATA</title>
<link rel="apple-touch-icon-precomposed" media="(resolution: 326dpi)" href="/images/icons/kuruvata-114.png">
<link rel="apple-touch-icon-precomposed" media="(resolution: 163dpi)" href="/images/icons/kuruvata-57.png">
<link rel="apple-touch-icon-precomposed" media="(resolution: 132dpi)" href="/images/icons/kuruvata-72.png">
<script language="JavaScript" src="js/jquery.js" type="text/javascript"></script>
<script src="js/basic-jquery-slider.js"></script>
<script src="js/turn.js"></script>
<script>
$(document).ready(function() {
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
var locationPath = filterPath(location.pathname);
var scrollElem = scrollableElement('html', 'body');
$('a[href*=#]').each(function() {
var thisPath = filterPath(this.pathname) || locationPath;
if ( locationPath == thisPath
&& (location.hostname == this.hostname || !this.hostname)
&& this.hash.replace(/#/,'') ) {
var $target = $(this.hash), target = this.hash;
if (target) {
var targetOffset = $target.offset().top;
$(this).click(function(event) {
event.preventDefault();
$(scrollElem).animate({scrollTop: targetOffset}, 1000, function() {
location.hash = target;
});
});
}
}
});
// use the first element that is "scrollable"
function scrollableElement(els) {
for (var i = 0, argLength = arguments.length; i <argLength; i++) {
var el = arguments[i],
$scrollElement = $(el);
if ($scrollElement.scrollTop()> 0) {
return el;
} else {
$scrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop()> 0;
$scrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
}
return [];
}
});
$(document).ready(function(){
$('#full_bio').hide();
$('#read_full_bio').click(function(){
$('#read').fadeOut(500);
$("#bio").fadeOut(500);
$("#full_bio").fadeIn(500);
});
$('#close_full_bio').click(function(){
$('#read').fadeIn(500);
$("#bio").fadeIn(500);
$("#full_bio").fadeOut(500);
});
$('.close_full_bio').click(function(){
$('#read').fadeIn(500);
$("#bio").fadeIn(500);
$("#full_bio").fadeOut(500);
});
$("#portfolio_img").bjqs({
'height' : 700,
'width' : 900,
'animationDuration' : 2000,
'showMarkers' : true,
'centerControls' :false,
'nextText': '<i class="icon-chevron-right icon-white"></i>',
'prevText': '<i class="icon-chevron-left icon-white"></i>',
'useCaptions' : false,
'keyboardNav' : false
});
$("#simple_img").bjqs({
'height' : 350,
'width' : 800,
'animationDuration' : 2000,
'showMarkers' : false,
'centerControls' :false,
'nextText': '<i class="icon-chevron-right icon-white"></i>',
'prevText': '<i class="icon-chevron-left icon-white"></i>',
'useCaptions' : false,
'keyboardNav' : false
});
$('#CSS_code').hide();
$('#choose_HTML').hide();
$('#chosen_CSS').hide();
$('#choose_CSS').click(function(){
$('#WEB_code').fadeOut(500);
$('#CSS_code').fadeIn(500);
$(this).hide();
$('#chosen_HTML').hide();
$('#chosen_CSS').show();
$('#choose_HTML').show();
});
$('#choose_HTML').click(function(){
$('#WEB_code').fadeIn(500);
$('#CSS_code').fadeOut(500);
$(this).hide();
$('#chosen_CSS').hide();
$('#chosen_HTML').show();
$('#choose_CSS').show();
});
$('#vid_1').hide();
$('#vid_1_title').hide();
$('#vid_2').hide();
$('#vid_2_title').hide();
$('#vid_1_controller').click(function(){
$('#vid_1').show();
$('#vid_1_title').show();
$('#vid_2').hide();
$('#vid_2_title').hide();
$('#vid_3').hide();
$('#vid_3_title').hide();
});
$('#vid_2_controller').click(function(){
$('#vid_1').hide();
$('#vid_1_title').hide();
$('#vid_2').show();
$('#vid_2_title').show();
$('#vid_3').hide();
$('#vid_3_title').hide();
});
$('#vid_3_controller').click(function(){
$('#vid_1').hide();
$('#vid_1_title').hide();
$('#vid_2').hide();
$('#vid_2_title').hide();
$('#vid_3').show();
$('#vid_3_title').show();
});
$('#logo').click(function(){
location.reload();
});
$('#magazine').turn();
$('#magazine').hide();
$('#portfolio_magazine').hide();
$('#close_magazine').hide();
$('#view_magazine').click(function(){
$('#portfolio_magazine').show();
$('#magazine').fadeIn(1000);
$(this).hide();
$('#close_magazine').show();
});
$('#close_magazine').click(function(){
$('#portfolio_magazine').hide();
$('#magazine').fadeOut(1000);
$(this).hide();
$('#view_magazine').show();
});
});
</script>
<link rel="stylesheet" type="text/css" href="/css/main.css" />
<link type="text/css" rel="stylesheet" href="/css/basic-jquery-slider.css" />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-10637931-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="body_alignment">
<div id="top">
<div id="logo">
KURUVATA
</div>
<div id="navigation">
<a href="#portfolio">Portfolio</a>
<a href="#profile">Bio</a>
<a href="#education">Education</a>
<a href="#experience">Experience</a>
<a href="#skills">Skills</a>
<a href="#contact">Contact</a>
<!--<a href="#"><span class="button">Hire Me</span></a>-->
</div>
</div>
<div id="content_border">
<div id="portfolio">
<div id="portfolio_img">
<ul class="bjqs">
<li>
<span class="portfolio_title">Chromawaves, 2009, by Kurt Tacastacas and Andrew Kuhar for iGameTeam</span>
<img src="/images/portfolio/001.jpg" width="900" height="700" />
</li>
<li>
<span class="portfolio_title">Clean Works Energy Logo, 2010, by Kurt Tacastacas for Clean Works Energy</span>
<img src="/images/portfolio/002.jpg" width="900" height="700" />
</li>
<li>
<span class="portfolio_title">Fresh On Campus Logo, 2010, by Kurt Tacastacas for Hartley Brody</span>
<img src="/images/portfolio/003.jpg" width="900" height="700" />
</li>
<li>
<span class="portfolio_title">Little Italy, 2009, by Kurt Tacastacas for Little Italy Merchants Association</span>
<img src="/images/portfolio/004.jpg" width="900" height="700" />
</li>
<li>
<span class="portfolio_title" style="color:#FFF;">Homepage/Bills, 2008, by Kurt Tacastacas for Parents</span>
<img src="/images/portfolio/005.jpg" width="900" height="700" />
</li>
<li>
<span class="portfolio_title">Ramcrypter Logo, 2010 by Kurt Tacastacas for Ramcrypter</span>
<img src="/images/portfolio/006.jpg" width="900" height="700" />
</li>
<li>
<span class="portfolio_title">SarahPaul.org, 2011, by Kurt Tacastacas for Sarah Paul</span>
<img src="/images/portfolio/007.jpg" width="900" height="700" />
</li>
<li>
<span class="portfolio_title">Fashion Brochure, 2011, by Kurt Tacastacas for Scott Julion</span>
<img src="/images/portfolio/008.jpg" width="900" height="700" />
</li>
<li>
<span class="portfolio_title">TenantMagic.net, 2011, by Kurt Tacastacas for TenantMagic</span>
<img src="/images/portfolio/009.jpg" width="900" height="700" />
</li>
<li>
<span class="portfolio_title" style="color:#FFF;">CleveMed Support Site, 2012, by Kurt Tacastacas for Cleveland Medical Devices, Inc.</span>
<img src="/images/portfolio/010.jpg" width="900" height="700" />
</li>
</ul>
</div>
<div id="portfolio_simple" class="content_compact" style="text-align:center; padding-top:100px; padding-bottom:50px;">
<h4>Simple is beautiful</h4>
A picture is worth a thousand words. Show and tell that less is more.<br />The simplest instructions have no instructions at all.
<div id="simple_img">
<ul class="bjqs">
<li>
<span class="content_align">
<img src="/images/simple.jpg" border="0"/>
<img src="/images/shadow.jpg" border="0"/>
<span class="title">Homepage/Bills (Flash), 2008, by Kurt Tacastacas for Parents.</span>
</span>
</li>
<li>
<span class="content_align">
<img src="/images/simple2.jpg" border="0"/>
<img src="/images/shadow.jpg" border="0"/>
<span class="title">Sleep Recording Manager (HTML5 + JQUERY), 2012, by Kurt Tacastacas and CleveMed Engineers for Cleveland Medical Devices, Inc.</span>
</span>
</li>
<li>
<span class="content_align">
<img src="/images/simple3.jpg" border="0"/>
<img src="/images/shadow.jpg" border="0"/>
<span class="title">CleveMed Support Site, 2012, by Kurt Tacastacas for Cleveland Medical Devices, Inc.</span>
</span>
</li>
</ul>
</div>
</div>
<div id="portfolio_design" class="content">
<div class="content_thumb" style="float:left">
<span class="thumbnail">
<span class="thumb_shine"></span>
<img src="/images/portfolio/001.jpg" width="100px"/>
</span>
<br />
<a href="#portfolio_magazine">Coming Soon <img src="/images/arrow_right_blue.png" alt=">" border="0"/></a>
</div>
<div class="content_650_L" style="margin-left:10px; padding-top:25px;">
<h2>Design something inspired by everything.</h2>
Inspiration can come from anywhere - newspapers, magazines, websites, pictures. Most can influence the final product. It's important to look around for fresh designs and see what you can do to improve it.
</div>
</div>
<div id="portfolio_pixel" class="content">
<div class="content_align">
<div id="show_code" style="text-align:left;">
<div id="WEB_code">
[an error occurred while processing this directive]
</div>
<div id="CSS_code">
[an error occurred while processing this directive]
</div>
</div>
<img src="/images/shadow.jpg" border="0" style="margin:0;"/>
<div id="choose_code">
<span id="choose_HTML">HTML</span>
<span id="chosen_HTML">HTML</span>
<span id="choose_CSS">CSS</span>
<span id="chosen_CSS">CSS</span>
</div>
<div class="content_375_2">
<h2>Beautiful inside and out.</h2>
A good layout should be just as good as its code.<br />For easier navigation, an organized code is a must.
</div>
<div class="content_375_2">
<h2>Every pixel counts.</h2>
No matter how small the detail, everything has to be scrutinized down to the last pixel.
</div>
</div>
</div>
<div id="portfolio_magazine" class="full_img">
<div id="magazine">
<div><img src="/images/portfolio/comic/FNE_001.jpg" width="450" height="582" /></div>
<div><img src="/images/portfolio/comic/FNE_002.jpg" width="450" height="582" /></div>
<div><img src="/images/portfolio/comic/FNE_003.jpg" width="450" height="582" /></div>
<div><img src="/images/portfolio/comic/FNE_004.jpg" width="450" height="582" /></div>
<div><img src="/images/portfolio/comic/FNE_005.jpg" width="450" height="582" /></div>
<div><img src="/images/portfolio/comic/FNE_006.jpg" width="450" height="582" /></div>
<div><img src="/images/portfolio/comic/FNE_007.jpg" width="450" height="582" /></div>
</div>
<br />
<span class="title">First Night Effect, 2011, by Kurt Tacastacas for Cleveland Medical Devices, Inc.</span>
</div>
<div id="portfolio_engage" class="content" style="border-top:0px;">
<div class="content_thumb">
<span id="view_magazine" class="thumbnail" style="height:129px;">
<img src="/images/portfolio/comic/FNE_001.jpg" width="100px"/>
<br /><br />
<a href="#portfolio_magazine">Read Comic <img src="/images/arrow_right_blue.png" alt=">" border="0"/></a>
</span>
<span id="close_magazine" class="thumbnail" style="height:129px;">
<img src="/images/portfolio/comic/FNE_001.jpg" width="100px"/>
<br /><br />
<a href="#portfolio_magazine">Close Comic <img src="/images/arrow_right_blue.png" alt=">" border="0"/></a>
</span>
</div>
<div class="content_650_R">
<h2 style="padding-top:30px; margin-right:10px;">Engage the viewers.</h2>
Not only do advertisements need to capture one's attention, they engage to leave a lasting impression.
</div>
</div>
<div id="animated" class="content_compact" style="text-align:center;">
<h4>Animated graphics.</h4>
Give it movement, give it life.
<div class="content_align" style="margin-bottom:0;">
<div id="vid_3" class="content_vid">
<iframe src="http://player.vimeo.com/video/21005379" width="720px" height="405px" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<img src="/images/shadow.jpg" width="720px" border="0"/>
</div>
<div id="vid_1" class="content_vid">
<iframe width="720" height="405" src="https://www.youtube.com/embed/BW-rXgm0FTU?rel=0&autohide=1&showinfo=0" frameborder="0" allowfullscreen="1"></iframe>
<img src="/images/shadow.jpg" width="720px" border="0"/>
</div>
<div id="vid_2" class="content_vid">
<iframe width="720" height="405" src="http://www.youtube.com/embed/rqX0tArfyHk?rel=0&autohide=1&showinfo=0" frameborder="0" allowfullscreen="1"></iframe>
<img src="/images/shadow.jpg" width="720px" border="0"/>
</div>
</div>
<div class="content_align" style="margin:0px 25px;">
<span id="vid_1_title" class="title">Together, We Are A Great Team, 2012, by Kurt Tacastacas for Cleveland Medical Devices, Inc.</span>
<span id="vid_2_title" class="title">First Night Effect, 2012, by Kurt Tacastacas for Cleveland Medical Devices, Inc.</span>
<span id="vid_3_title" class="title">Graphic Design Demo Reel, 2011, by Kurt Tacastacas</span>
</div>
<div class="content_align">
<a href="#animated" id="vid_3_controller">
<span class="thumbnail"><span class="thumb_shine"></span><img src="https://secure-b.vimeocdn.com/ts/134/802/134802284_295.jpg" width="100px" height="77px"/></span>
</a>
<a href="#animated" id="vid_2_controller">
<span class="thumbnail"><span class="thumb_shine"></span><img src="http://img.youtube.com/vi/rqX0tArfyHk/0.jpg" width="100px"/></span>
</a>
<a href="#animated" id="vid_1_controller">
<span class="thumbnail"><span class="thumb_shine"></span><img src="http://img.youtube.com/vi/BW-rXgm0FTU/0.jpg" width="100px"/></span>
</a>
</div>
<div class="content_footer">
<a href="#top"><h3>BACK TO TOP</h3></a>
</div>
</div>
<div id="digital_print">
<div class="content_compact" style="text-align:center; background-color:#DDD; box-shadow: inset 0px -50px 50px #F0F0F0, 0px -1px #CCC; border-top:2px solid #EEE;">
<h4>From digital to print.</h4>
Design aesthetics of digital media should be mimicked throughout print media to ensure branding consistency.
</div>
<div class="full_img">
<img src="/images/portfolio/008.jpg" border="0"/>
</div>
</div>
</div>
<div id="profile">
<div id="bio" class="gradient">
<h1>Kurt Tacastacas</h1>
<h2>Graphic Designer</h2>
<br />
Who is Kurt Tacastacas? He is a 21-year-old recent graduate from Shaker Heights, OH.<br /><br />
He currently works at CleveMed, Inc. as their in-house IT/Web/Graphic Designer - creating webpages, UI and printed materials. He works side by side with his supervisor to spearhead the marketing department of the company.<br /><br />
Since his employment in June 2010, he has reimagined the company's branding - with new marketing materials, videos, brochures and websites to reinvision the brand.<br /><br />
<br />
<a href="/downloads/KTacastacas_Resume_2012.pdf"><span class="button">Download Resume</span></a> <a href="#profile" id="read_full_bio">Read Full Bio <img src="/images/arrow_right_blue.png" alt=">" border="0"/></a>
</div>
<div class="content_footer" id="read">
<a href="#top"><h3 style="color:#FFF; margin-top:150px;">BACK TO TOP</h3></a>
</div>
</div>
<div id="full_bio" class="offset_content">
<div class="content_button">
<a href="#profile" id="close_full_bio">Close</a>
</div>
<h1>Kurt Tacastacas</h1>
<h2>Full Biography</h2>
<br />
What is kuruvata? Rather, who is kuruvata. Kuruvata is Kurt Rusheen Valencia Tacastacas with their respective first two letters combined into one. Simple and very unique.
<br /><br />
Kurt Tacastacas is a 21-year-old recent Cleveland Institute of Art graduate with a Bachelor of Fine Arts in Digital Arts currently residing in Shaker Heights, OH.<br /><br />
He currently works for a small business company called Cleveland Medical Devices, Inc. - which manufactures, distributes and develops portable home sleep monitors and full PSG systems as their in-house IT/Web/Graphic Designer - creating webpages, design UI, brochures, pamphlets, instruction manuals and videos for the company.
He works side-by-side with his supervisor to spearhead the marketing department of the company.
<br /><br />
He collaborates with teams as low as 2 to as much as 6 people on most projects - consulting with engineers and sleep techs.
<br /><br />
Since his employment in June 2010, he has reinvigorated the company's brand.<br /><br />
<br />
<a href="/downloads/KTacastacas_Resume_2012.pdf"><span class="button">Download Resume</span></a>
<div class="content_footer">
<a href="#top" class="close_full_bio"><h3>BACK TO TOP</h3></a>
</div>
</div>
<div id="education" class="content_compact">
<div class="content_img">
<img src="/images/cap.png" width="80" height="80"/>
</div>
<div class="content_header">
<h1>Education</h1>
<h2>The Cleveland Institute of Art - BFA - T.I.M.E. Digital Arts - 2011</h2>
</div>
<div class="content_footer">
<a href="#top"><h3>BACK TO TOP</h3></a>
</div>
</div>
<div id="experience" class="content_compact">
<div class="content_img">
<img src="/images/suitcase.png" width="80" height="80" border="0"/>
</div>
<div class="content_header">
<h1>Experience</h1>
<h2>Empolyers since 2007 - Present</h2>
</div>
<div class="content_button">
<a href="/downloads/KTacastacas_Resume_2012.pdf"><span class="button">Download Resume</span></a>
</div>
<div class="content_align">
<table width="750" border="0" cellspacing="0" cellpadding="5">
<tr>
<td colspan="3" class="underline"><h2>Present</h2></td>
</tr>
<tr>
<td width="130">2010 - Present</td>
<td width="250">Cleveland Medical Devices, Inc.</td>
<td width="340">IT/Web/UI/Graphic Designer</td>
</tr>
<tr>
<td colspan="3" class="underline"><h2>2012</h2></td>
</tr>
<tr>
<td>2011 - 2012</td>
<td>Tiny Giant Studio</td>
<td>Art Director</td>
</tr>
<tr>
<td colspan="3" class="underline"><h2>2011</h2></td>
</tr>
<tr>
<td>2011</td>
<td>eSMART HD</td>
<td>3D Modeler/Animator</td>
</tr>
<tr>
<td>2007 - 2011</td>
<td>The Cleveland Institute of Art</td>
<td>Tutor, TA, Graphic Designer, Videographer</td>
</tr>
<tr>
<td colspan="3" class="underline"><h2>2010</h2></td>
</tr>
<tr>
<td>2010</td>
<td>Goldman and Caldwell</td>
<td>Graphic Designer</td>
</tr>
<tr>
<td>2010</td>
<td>Warrior Films</td>
<td>Film Showing Coordinator</td>
</tr>
<tr>
<td colspan="3" class="underline"><h2>2009</h2></td>
</tr>
<tr>
<td>2007 - 2009</td>
<td>Hope Prep Organization</td>
<td>Advanced Media Arts Teacher (Summer Classes)</td>
</tr>
</table>
</div>
<div class="content_footer">
<a href="#top"><h3>BACK TO TOP</h3></a>
</div>
</div>
<div id="skills" class="content_compact">
<div class="content_img">
<img src="/images/skills.png" width="80" height="80" border="0"/>
</div>
<div class="content_header">
<h1>Skills</h1>
<h2>Softwares, Applications, etc.</h2>
</div>
<div class="content_button">
<a href="/downloads/KTacastacas_Resume_2012.pdf"><span class="button">Download Resume</span></a>
</div>
<div class="content_align">
<table width="750" border="0" cellspacing="0" cellpadding="5">
<tr>
<td colspan="3" class="underline"><h2>Web: CSS + HTML + jQuery + Flash</h2></td>
</tr>
<tr>
<td>Adobe Dreamweaver</td>
<td>Microsoft Visual Studio</td>
<td>Adobe Flash</td>
</tr>
<tr>
<td colspan="3" class="underline"><h2>Graphics + Image Editing</h2></td>
</tr>
<tr>
<td>Adobe Photoshop</td>
<td colspan="2">Adobe Illustrator</td>
</tr>
<tr>
<td colspan="3" class="underline"><h2>Layout + Printing</h2></td>
</tr>
<tr>
<td colspan="3">Adobe Indesign</td>
</tr>
<tr>
<td colspan="3" class="underline"><h2>Animation + Special Effects + Video Editing</h2></td>
</tr>
<tr>
<td>Adobe After Effects</td>
<td>Adobe Flash</td>
<td>Final Cut Pro</td>
</tr>
<tr>
<td>Adobe Premiere Pro</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3" class="underline"><h2>3D Modeling and Animation</h2></td>
</tr>
<tr>
<td>Autodesk Maya</td>
<td colspan="2">Autodesk Mudbox</td>
</tr>
<tr>
<td colspan="3" class="underline"><h2>Presentation + Documentation</h2></td>
</tr>
<tr>
<td>Microsoft Office</td>
<td>Pages</td>
<td>Keynote</td>
</tr>
<tr>
<td colspan="3" class="underline"><h2>DVD Authoring</h2></td>
</tr>
<tr>
<td colspan="3">Adobe Encore</td>
</tr>
<tr>
<td colspan="3" class="underline"><h2>Mac + PC</h2></td>
</tr>
<tr>
<td>Mac OS X</td>
<td colspan="2">Microsoft Windows XP, Vista, 7</td>
</tr>
</table>
</div>
<div class="content_footer">
<a href="#top"><h3>BACK TO TOP</h3></a>
</div>
</div>
<div id="contact" class="content_compact">
<div class="content_img">
<img src="/images/contact.png" width="80" height="80" border="0"/>
</div>
<div class="content_header">
<h1>Contact</h1>
<h2>Call. Click. Ask me anything.</h2>
</div>
<div class="content_align" style="margin-top:25px;">
<table width="750" border="0" cellspacing="0" cellpadding="5">
<tr>
<td colspan="2">
<h2>Kurt Tacastacas</h2>
</td>
</tr>
<tr>
<td width="20"><img src="/images/email.png" width="20" height="20" alt="Email:" border="0"/></td>
<td width="740">
<a href="mailto:kuruvata@me.com">kuruvata@me.com</a>
</td>
</tr>
<tr>
<td><img src="/images/cell.png" width="20" height="20" alt="Cell:" border="0"/></td>
<td>
<a href="">216 258 6327</a>
</td>
</tr>
<tr>
<td><img src="/images/linkedin.png" width="20" height="20" alt="LinkedIn:" border="0"/></td>
<td>
<a href="http://www.linkedin.com/in/kuruvata" target="_new">LinkedIn</a>
</td>
</tr>
<tr>
<td><img src="/images/twitter.png" width="20" height="20" alt="Twitter:" border="0"/></td>
<td>
<a href="http://www.twitter.com/kuruvata" target="_new">Twitter</a>
</td>
</tr>
</table>
</div>
<div class="content_footer">
<a href="#top"><h3>BACK TO TOP</h3></a>
</div>
</div>
</div>
<div id="footer">
Copyright © 2012 KURUVATA. All Rights Reserved.
</div>
</div>
</body>
</html>
]]>
<![CDATA[
body,td,th {
color: #999999;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
text-align: left;
}
body {
background-color: #E9E9E9;
}
h1 {
color:#444444;
font-family:Arial, Helvetica, sans-serif;
font-size:25px;
margin-top:10px;
margin-bottom:0px;
font-weight:bold;
text-shadow: 0px 1px #FFF;
}
h2 {
font-family:Arial, Helvetica, sans-serif;
font-size:17px;
font-weight:normal; color:#666666;
text-shadow: 0px 1px #FFF;
margin:0;
}
h3 {
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
font-size:10px;
font-weight:normal;
color:#BBB;
width:82px;
float:right;
margin:25px 0px;
}
h3:hover {
color:#666;
text-decoration:underline;
}
h4 {
font-family:Arial, Helvetica, sans-serif;
font-size:25px;
font-weight:normal;
letter-spacing:0px;
margin:5px 0px;
color:#666666;
text-shadow: 0px 1px 1px #FFF, 0px -1px 1px #E6E6E6;
}
.title {
font-size:10px;
color:#999;
text-align:center;
margin-bottom:10px;
}
.portfolio_title {
font-size:10px;
color:#666;
text-align:center;
background:none;
position:absolute;
width:800px;
margin: 0px 50px;
bottom:15px;
}
a:link, a:active, a:visited {
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:normal;
color:#13a0df;
text-decoration:none;
text-shadow: 0px 1px #FFF;
}
a:hover {
color:#1190C9;
}
.button, .button:link, .button:visited {
padding:3px 20px;
color:#FFFFFF;
background-color: #13a0df;
text-decoration: none;
box-shadow: inset 0px -10px 10px #0F80B2, inset 0px 2px 3px #9CD7F2, 0px 1px 1px #777;
text-shadow:0px -1px #666, 0px 1px #13a0df;
border-radius:12px;
word-spacing:0px;
font-size: 13px;
border:1px solid #0F80B2;
}
.button:hover {
box-shadow: inset 0px -10px 10px #0F80B2, inset 0px 2px 3px #9CD7F2;
background-color:#1190C9;
text-decoration:none;
}
.button:active {
box-shadow: none;
background-color:#1190C9;
text-decoration:none;
}
.gradient {
/* IE10 */
background-image: -ms-linear-gradient(top, #F9F9F9 0%, #DDDDDD 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #F9F9F9 0%, #DDDDDD 100%);
/* Opera */
background-image: -o-linear-gradient(top, #F9F9F9 0%, #DDDDDD 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F9F9F9), color-stop(1, #DDDDDD));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #F9F9F9 0%, #DDDDDD 100%);
/* Proposed W3C Markup */
background-image: linear-gradient(top, #F9F9F9 0%, #DDDDDD 100%);
}
.gradient:hover {
background-image: none;
background-color: #FFFFFF;
}
#body_alignment {
width:900px;
margin: 50px auto;
display:block;
}
#top {
padding:15px;
width:870px;
display:block;
height:40px;
border:none;
}
#footer {
width:880px;
text-align:center;
display:block;
padding:15px;
font-size:12px;
text-shadow: 0px 1px #FFF;
}
#content_border {
width:900px;
height:100%;
display:block;
background:#F9F9F9;
border: 1px solid #DDD;
overflow:hidden;
}
#logo {
float:left;
font-size:40px;
font-weight:bold;
color:#444444;
text-shadow: 0px 2px 2px #FFFFFF, -1px -1px 2px #999;
letter-spacing:-3px;
cursor:pointer;
}
#navigation {
height:16px;
float:right;
word-spacing:20px;
padding:12px 0px;
}
#navigation a:link, #navigation a:visited {
color: #999999;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: normal;
text-decoration: none;
text-shadow: 0px 1px #FFF, 0px -1px #CCC;
}
#navigation a:hover {
color:#13a0df;
text-shadow: 0px;
}
#navigation a:active {
color:#1190C9;
text-shadow: 0px;
}
#profile {
height:550px;
width:800px;
display:block;
padding:50px;
float:left;
background:url(/images/292514_3064327733710_1428990525_32423486_388299410_n.jpg) no-repeat -60px -70px;
box-shadow: inset 0px 0px 100px #000;
}
.offset_content {
width:800px;
display:block;
padding: 70px 50px 50px 50px;
float:left;
background: none;
box-shadow: inset 0px -500px 100px #F9F9F9;
margin-top:-200px;
}
#bio {
padding: 25px;
display:block;
width:290px;
border-radius:10px;
color:#666;
border: 5px solid #F9F9F9;
float:right;
background-color:#F9F9F9;
box-shadow: 0px 0px 10px #000, inset 0px 0px 2px #F0F0F0;
}
.thumbnail {
box-shadow: 0px 1px 5px #AAA;
margin:10px 10px;
width:100px;
display:block;
position:relative;
text-align:center;
text-decoration:none;
color:#13a0df;
display:inline-block;
border:0;
}
.thumbnail:hover {
box-shadow: 0px 0px 8px #1190C9;
text-decoration:underline;
color:#1190C9;
cursor:pointer;
}
.thumbnail:active {
box-shadow: 0px 0px 5px #1190C9;
}
.thumb_shine {
width:100px;
height:77px;
background:url(/images/thumb_shine.png) no-repeat;
position:absolute;
}
#portfolio {
width:900px;
display:block;
float:left;
}
.full_img {
width:900px;
display:block;
float:left;
text-align:center;
}
#magazine {
width:900px;
height:582px;
background-color:#F9F9F9;
box-shadow: inset -100px 50px 100px #E6E6E6;
}
#magazine .turn-page{
width:450px;
height:582px;
background-color:#F9F9F9;
}
#portfolio_header {
width:800px;
height:600px;
padding: 50px;
position:absolute;
z-index:10;
}
#portfolio_img {
width:900px;
height:700px;
z-index:1;
}
#portfolio_thumb {
width:900px;
position:absolute;
box-shadow: inset 0px -100px 50px #FCFCFC;
z-index:10;
}
#portfolio_thumb:hover {
box-shadow: inset 0px -100px 100px #FCFCFC;
}
.content {
width:800px;
display:block;
padding: 50px;
float:left;
border-bottom:1px solid #F0F0F0;
border-top:2px solid #FFFFFF;
}
.content_compact {
width:800px;
display:block;
padding: 50px 50px 0px 50px;
float:left;
border-bottom:1px solid #F0F0F0;
border-top:2px solid #FFFFFF;
}
.content_650_L {
width:650px;
float:left;
text-align:left;
}
.content_650_R {
width:650px;
float:right;
text-align:right;
}
.content_375_2 {
width:350px;
position:relative;
float:left;
text-align:left;
margin:10px;
}
.content_img {
height:80px;
margin-right: 30px;
float:left;
width: 80px;
position:relative;
display:block;
}
.content_header {
float:left;
height:80px;
position:relative;
display:block;
}
.content_button {
height:80px;
float:right;
margin-top:20px;
}
.content_thumb {
width:120px;
float:right;
text-align:center;
}
.underline {
border-bottom:1px solid #E6E6E6;
}
.content_align {
text-align:center;
margin: 25px;
width:750px;
display:block;
float:left;
}
.content_footer {
text-align:right;
display:block;
clear:both;
}
.content_vid {
width:720px;
height:435px;
margin: 0px 15px;
display:inline-block;
}
#show_code {
width:750px;
height:200px;
overflow:auto;
font-size:10px;
color:#999;
background-color:#F0F0F0;
}
.code:hover {
overflow:auto;
}
#choose_code {
text-align:center;
margin:10px 0px 50px 0px;
}
#choose_HTML, #choose_CSS {
margin:10px;
padding: 3px 6px;
border-radius: 10px;
font-size:15px;
font-weight:bold;
color:#DDD;
border:5px solid #DDD;
box-shadow: inset 0px 1px 1px #AAA, 0px 1px 1px #AAA;
text-shadow: 0px 1px #BBB;
letter-spacing:1px;
cursor:pointer;
}
#choose_HTML:hover, #choose_CSS:hover {
color:#AAA;
border:5px solid #AAA;
cursor:pointer;
}
#choose_HTML:active, #choose_CSS:active {
color:#AAA;
border:5px solid #AAA;
box-shadow: inset 0px 1px 1px #666, 0px 1px 1px #666;
text-shadow: 0px 1px #999;
}
#chosen_HTML, #chosen_CSS {
margin:10px;
padding: 3px 6px;
border-radius: 10px;
font-size:15px;
font-weight:bold;
color:#AAA;
border:5px solid #AAA;
box-shadow: inset 0px 1px 1px #666, 0px 1px 1px #666;
text-shadow: 0px 1px #999;
letter-spacing:1px;
cursor:default;
}
]]>
HTML
HTML
CSS
CSS
Beautiful inside and out.
A good layout should be just as good as its code.
For easier navigation, an organized code is a must.
Every pixel counts.
No matter how small the detail, everything has to be scrutinized down to the last pixel.
