david-kruger
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>David Kruger</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* ------------------------------- */
/* SITE Structure
/* ------------------------------- */
html { background:#f8f3df url(david-kruger-images/bd-bg.jpg) repeat-x; text-align:center; }
body { text-align: left; font: 13px/18px georgia, 'times new roman', serif; color: #1d1918; margin: 0 auto; width: 920px; }
.clear { clear: both; height: 0; width: 0; line-height: 0; font-size: .1px; }
hr { display: none; height: 0; padding: 0; margin: 0; }
img { border: none; }
.web-title { float:left; width:500px; margin-bottom:35px; }
.web-title h1 { color:#323232; line-height:80px; height:80px !important; }
.web-title h2 { color:#7aac49; font-size:30px; line-height:36px; }
.header { background: transparent url(david-kruger-images/desk.png) 662px 117px no-repeat; padding: 50px 0 20px 0; margin: 0; min-height: 320px !important; }
.header ul.topnav { padding: 0; margin-top: 15px; float: right; width:auto; list-style: none; text-align:right; }
.header ul.topnav li { float:left; margin:0; padding:0; text-transform:uppercase; font-size:20px; width:auto; font-family:Arial, Helvetica, sans-serif; font-weight:bold; }
.header li a { display: block; padding-left:25px; color:#323232; text-decoration:none; }
.header li a:hover { color:#7aac49; }
h3.intro { color:#323232; font-size:30px; line-height:38px; }
p.intro { font-size: 16px; line-height:22px; color:#575656; font-style:italic; padding: 0; margin:0; width:620px; }
.title { border-bottom:1px solid #c8c0bf !important; display:block; margin-bottom:10px; }
.title h3 { font-size:19px; line-height:22px; color:#1d1918; font-weight:bold; float:left; margin:0; padding:0; width:auto; }
.title span { font-size:14px; line-height:22px; color:#5b9324; font-style:italic; }
/************************************************************************ CONTAINER */
#container { display:block; width: 920px; min-height: 100%; height: 100%; margin:0 auto 20px auto; padding: 0; text-align: left; }
/* ------------------------------- */
/* LAYOUT
/* ------------------------------- */
/************************************************************************ three_col_wide_right */
div.three_col_wide_left { text-align:left; }
div.three_col_wide_left div.left_column { float: left; width: 430px; margin:0 35px 0 0; padding:0; }
div.three_col_wide_left div.middle_column { float: left; width: 250px; margin:0 35px 0 0; padding:0; }
div.three_col_wide_left div.right_column { float: left; width: 166px; margin:0; padding:0; }
.folio-item { float:left; width:203px; margin:0 6px 15px 6px; padding:0; }
.folio-item h4 { font-size:14px; color:#1d1918; font-weight:bold; margin:0; padding:0; }
.folio-item span.date { color:#89867e; font-size:12px; margin-left:4px; font-style:italic; font-weight:normal; }
ul.blog-entries { padding: 0; margin-bottom: 15px; list-style: none;}
ul.blog-entries li { margin-bottom:10px; padding:0; font-size:12px; color:#89867e; }
ul.blog-entries li a { font-weight:bold; color:#323232; text-decoration:none; display:block; }
/************************************************************************ FOOTER */
.footer { border-bottom:5px solid #DFDBD0; clear:both; color:#A3A2A0; font-family:georgia,serif; font-size:11px; font-style:italic; line-height:16px; margin:0; padding:10px 0; }
.footer a:link, .footer a:visited, p.footer a:active { border-bottom:1px solid #CBD2D8; color:#3A5E8C; text-decoration:none; }
.footer a:hover { border-bottom:1px solid #8CA4B8; color:#203651; text-decoration:none; }
.footer a { border:medium none !important; }
.footer a img { position:relative; top:4px; }
.footer span { color:#E6E3DB; margin:0 10px 0; }
</style>
<link rel="stylesheet" href="css/stylesheet.css" type="text/css" />
<link rel="stylesheet" href="css/sIFR-screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/sIFR-print.css" type="text/css" media="print" />
<script src="js/sifr.lite.js" type="text/javascript"></script>
</head>
<body>
<!-- HEADER -->
<div class="header">
<div class="web-title">
<h1>David Kruger</h1>
<h2>web design and development</h2>
</div>
<ul class="topnav">
<li><a href="#">Home</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="clear"></div>
<h3 class="intro">Providing excellent works in a creative way</h3>
<p class="intro">As developer I made my own way trought projects, understanding what the client wants and what his company really needs. I give professionalism & talent to the client in every project. And thereby I take my work seriously, so take a look around, and get in touch if you think we would work well together.</p>
</div>
<!-- HEADER -->
<!-- CONTAINER -->
<div id="container" class="three_col_wide_left">
<!-- Left Column -->
<div class="left_column">
<div class="title">
<h3>Portfolio</h3>
<span>What I did so far</span>
<div class="clear"></div>
</div>
<div class="folio-item"> <img src="david-kruger-images/img-apuroarte.jpg" alt="" />
<h4>ApuroArte Victor Kruger <span class="date">March 2008</span></h4>
</div>
<div class="folio-item"> <img src="david-kruger-images/img-fesincuer.jpg" alt="" />
<h4>Festival Internacional de Cuerdas <span class="date">May 2008</span></h4>
</div>
<div class="folio-item"> <img src="david-kruger-images/img-fiuni.jpg" alt="" />
<h4>Facultad de Ingenieria FIUNI <span class="date">Jun 2008</span></h4>
</div>
<div class="folio-item"> <img src="david-kruger-images/img-fumec.jpg" alt="" />
<h4>Federacion Universal de Movimientos Estudiantiles Cristianos <span class="date">March 2009</span></h4>
</div>
<div class="clear"></div>
</div>
<!-- Middle Column -->
<div class="middle_column">
<div class="title">
<h3>Blog</h3>
<span>What I wrote</span>
<div class="clear"></div>
</div>
<ul class="blog-entries">
<li><a href="#">Campaign Monitor Landing Pages</a> 6 Comments // June 3rd, 2009 </li>
<li><a href="#">Intels Moblin - Im Impressed</a> 1 Comments // May 20th, 2009 </li>
<li><a href="#">Church Logo for Sale</a> 10 Comments // February 24th, 2009 </li>
<li><a href="#">Xero - The Worlds Easiest Accounting System</a> 11 Comments // February 11th, 2009</li>
<li><a href="#">Authentic Jobs Fall Promotion</a> 0 Comments // October 16th, 2008</li>
<li><a href="#">Kinoma Redesign Process</a> 46 Comments // October 1st, 2008</li>
</ul>
<div class="clear"></div>
</div>
<!-- Right Column -->
<div class="right_column">
<div class="title">
<h3>Twitter</h3>
<div class="clear"></div>
</div>
<ul class="blog-entries">
<li><a href="#">Its time to continue with the book</a> about 3 hours ago</li>
<li><a href="#">Drawing my own microprocessor with Digital Works </a> about 14 hours ago</li>
<li><a href="#">Time to go to the exam!! </a> about 15 hours ago</li>
</ul>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<!-- CONTAINER -->
<!-- FOOTER -->
<div class="footer"> © 2009 <a href="#">Name Here</a>. All Rights Reserved <span>|</span> Design By <a href="http://buenasideaspy.com/">David Kruger</a> <span>|</span> <a href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.tapiti.net%2Fdk%2F&profile=css21&usermedium=all&warning=1"><img alt="" src="david-kruger-images/valid-css.png"/></a> <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.tapiti.net%2Fdk%2F"><img alt="" src="david-kruger-images/valid-html.png"/></a> </div>
<!-- FOOTER -->
<script type="text/javascript">
var introTitle = new Font('diavlo_bold.swf', {
tags: 'h3',
classFilter: 'intro'
});
var homeTitle = new Font('diavlo_black.swf', {
tags: 'h1'
});
var homeSubtitle = new Font('diavlo_bold.swf', {
tags: 'h2'
});
var titleComps = new Font('diavlo_bold.swf', {
tags: 'h3'
});
homeTitle.replace()
homeSubtitle.replace()
introTitle.replace()
titleComps.replace()
</script>
</body>
</html>
Related examples in the same category