workshyfop
<!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>
<title>Work Shy Fop</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/*----- Structure ----- */
body {
margin:0;
padding:0;
font-size: 12px;
font-family: 'Tahoma';
color:#707070;
background:url(workshyfop-assets/background.gif);
}
#center {
margin:auto;
width:646px;
background:url(workshyfop-assets/main_header.gif) no-repeat;
}
#header{
width:646px;
height:250px;
}
#footer{
width:100%;
clear:both;
margin: 10px 0 10px 0;
}
#footer p {
text-align:right;
margin-right:66px;
font-size:10px;
}
#footer a {
color:red;
}
/*----- Content Boxes ----- */
.content_body p {
padding:0px 20px 10px 20px;
text-align:justify;
}
.content_body h1 {
font-size:15px;
padding:10px 20px 0px 20px;
}
.content_body h2 {
font-size:13px;
padding:0px 20px 0px 20px;
}
.content_body a {
color:#ff0000;
}
.red {
color:red;
}
.content_header {
width:334px;
float:right;
margin-right:33px;
height:33px;
background:url(workshyfop-assets/content_header.gif) no-repeat;
}
.content_body {
width:332px;
background:#fff;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
float:right;
margin-right:33px;
}
.content_footer {
width:334px;
float:right;
margin-right:33px;
height:45px;
background:url(workshyfop-assets/content_footer.gif) no-repeat;
}
/*----- Nav ----- */
.class nav {
width:191px;
}
.nav_list {
margin: 0;
padding: 0;
width: 191px;
list-style: none;
overflow: hidden;
}
.nav_list li {
width: 191px;
overflow: hidden;
text-transform: uppercase;
font-size:10px;
font-weight:bold;
}
.nav_list a {
color:#707070;
text-decoration:none;
}
.li_nav_header a {
display: block;
width: 191px;
height: 34px;
background: url(workshyfop-assets/nav_header.gif) no-repeat;
}
.li_nav_body a {
display: block;
width: 191px;
height: 21px;
background: url(workshyfop-assets/nav_body.gif) no-repeat;
padding-left: 25px;
line-height:20px;
}
.li_nav_footer a {
display: block;
width: 191px;
height: 45px;
background: url(workshyfop-assets/nav_footer.gif) no-repeat;
}
.li_nav_body a:hover {
background-position: 0 -21px;
color:#0F3D80;
}
.li_active a:active {
background: url(workshyfop-assets/../skins/artica/workshyfop-assets/nav_body.gif) no-repeat;
background-position: 0 -42px;
color:#0F3D80;
}
/*----- Sidebar ----- */
#sidebar {
width: 191px;
float:left;
}
.sidebar_header {
width: 191px;
height: 34px;
background: url(workshyfop-assets/nav_header.gif) no-repeat;
}
.sidebar_body {
width: 189px;
background:#fff;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
}
.sidebar_footer {
width: 191px;
height: 45px;
background: url(workshyfop-assets/nav_footer.gif) no-repeat;
}
</style>
</head>
<body>
<div id="center">
<div id="header"> </div>
<div id="content">
<div id="sidebar">
<div class="nav">
<ul class="nav_list">
<li class="li_nav_header"><a href="http://www.free-css.com/"></a></li>
<li class="li_nav_body"><a href="http://www.free-css.com/">Home</a></li>
<li class="li_nav_body"><a href="http://www.free-css.com/">Usage</a></li>
<li class="li_nav_body"><a href="http://www.free-css.com/">Contact</a></li>
<li class="li_nav_footer"><a href="http://www.free-css.com/"></a></li>
</ul>
</div>
<div class="nav">
<ul class="nav_list">
<li class="li_nav_header"><a href="http://www.free-css.com/"></a></li>
<li class="li_nav_body"><a href="http://www.free-css.com/">Archive 11-16</a></li>
<li class="li_nav_body"><a href="http://www.free-css.com/">Archive 1-10</a></li>
<li class="li_nav_footer"><a href="http://www.free-css.com/"></a></li>
</ul>
</div>
<div class="sidebar_header"></div>
<div class="sidebar_body"> <img src="workshyfop-assets/image.jpg" alt="" /> </div>
<div class="sidebar_footer"></div>
</div>
<div class="content_header"></div>
<div class="content_body">
<h1>Artica - Simple CSS and xHTML</h1>
<h2>A clean, fresh design that is quick to load.</h2>
<p><b><a href="http://www.free-css.com/">Author</a></b></p>
<p>My name is Callum Rimmer and I run a web software company in Bath, England. We have created a simple content management system and hosting packagefor small companies and individuals called iFrame.</p>
<p>iFrame is made to as easy to use as possible whilst giving you the flexibilty to design your site how
you like. You can use any of the free designs on <a href="http://www.free-css.com/">OSWD.org</a> or openwebdesign.com as an iFrame template. </p>
<p><span class="red">>></span> I'd appreciate keeping the <a href="http://www.free-css.com/">iFrame backlink</a> in the footer if you use this template. </p>
<p><b class="red"><a href="http://www.free-css.com/">Usage</a></b></p>
<p>This design is good for anyone who wishes to display images or photos on the homepage of there site. If you have a blog or photography site then this is a great medium for displaying content. I would appreciate you keeping the iFrame backlink in the footer. The image is from sxc.hu a great site for free imagery.</p>
<p>I wanted to make a design that looked like a notepad on the browser that you keep you thoughts in. A really online diary. It ended up looking a like an apple mac app. Anyway, enjoy. </p>
<p><b class="red"><a href="http://www.free-css.com/">Contact</a></b></p>
<p>If you would like to contact me for some help using this template or if you would like to known more about iFrame, Email me. </p>
</div>
<div class="content_footer"></div>
<div id="footer">
<p>Designed by <a href="http://www.personal-web-design.com">iFrame</a> | yourname © 2006</p>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category