personalwebsite
<!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>Personal Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
font-family: tahoma, helvetica, arial, sans-serif;
text-align: center;
color: #6f6f6f;
}
html, body, #wrapper, h1, #nav, #nav ul, #nav li {
margin: 0;
padding: 0;
list-style: none;
}
body, th, td {
font-size: 10px;
}
img { border: 0; }
#wrapper {
margin: 16px auto;
text-align: left;
position: relative;
}
h1, h2, h3 {
font-size: 12px;
}
h1 {
margin: 0;
padding: 0;
}
h2 {
margin: 0 0 5px 0;
padding: 0;
}
h3 {
padding: 4px 0 0 0;
}
p {
margin: 1em 0;
padding: 0;
}
.block {
display: block;
}
.clear {
clear: both;
height: 1px;
padding-top: 0;
margin-top: 0;
margin-bottom: 0;
font-size: 1px;
line-height: 1px;
}
* html .clear {
margin-top: -5px;
margin-bottom: -4px;
}
.left {
float: left;
margin: 1px 12px 0px 0px;
}
.softright {
text-align: right;
}
/* ***** */
body {
background: #373839;
padding-bottom: 12px;
}
#wrapper {
width: 658px;
}
h1 {
margin-bottom: 2px;
}
a {
color: #f5f5f5;
}
a:hover {
text-decoration: none;
}
/* navigation */
#nav {
position: absolute;
top: 15px;
right: 0;
width: 31em;
}
#nav li {
width: 7em;
float: left;
margin: 0 0.3em;
padding: 0;
}
#nav a {
color: #fff;
font-weight: bold;
text-decoration: none;
padding: 4px 0;
display: block;
text-align: center;
}
#nav a:hover {
text-decoration: underline;
}
#nav li.a { background: url(personalwebsite-images/menu_a_bg.gif) no-repeat; }
#nav li.a a { background: url(personalwebsite-images/menu_a_r.gif) top right no-repeat; }
#nav li.b { background: url(personalwebsite-images/menu_b_bg.gif) no-repeat; }
#nav li.b a { background: url(personalwebsite-images/menu_b_r.gif) top right no-repeat; }
#nav li.c { background: url(personalwebsite-images/menu_c_bg.gif) no-repeat; }
#nav li.c a { background: url(personalwebsite-images/menu_c_r.gif) top right no-repeat; }
#nav li.d { background: url(personalwebsite-images/menu_d_bg.gif) no-repeat; }
#nav li.d a { background: url(personalwebsite-images/menu_d_r.gif) top right no-repeat; }
/* body */
#body { width: 100%; }
#body { background: #ed8601 url(personalwebsite-images/body_bg.gif); }
#body div { background: url(personalwebsite-images/body_tl.gif) top left no-repeat; }
#body div div { background: url(personalwebsite-images/body_tr.gif) top right no-repeat; }
#body div div div { background: url(personalwebsite-images/body_bl.gif) bottom left no-repeat; }
#body div div div div { background: url(personalwebsite-images/body_br.gif) bottom right no-repeat; }
#body .inner div { background: none; }
#body .inner {
color: white;
padding: 18px 20px;
}
#body h2 {
margin-top: 3px;
text-indent: -3px;
}
* html #body h2 {
margin-top: 21px;
marg\in-top: 3px;
}
#body p {
margin: 1em 0;
}
#body #dividerx {
clear: both;
margin: 0 1em;
padding: 12px 0;
background: url(personalwebsite-images/divider_h.gif) 12px 12px repeat-x;
}
/* darkboxes */
* html #boxes, * html #boxes .inner { width: 100%; }
* html #body #boxes #left .inner { width: 100%; w\idth: 90%; }
* html #body #boxes #right .inner { width: 100%; w\idth: 95%; }
#body #boxes { background: url(personalwebsite-images/box_bg.gif) repeat-y; }
#body #boxes div { background: url(personalwebsite-images/box_t.gif) top left no-repeat; }
#body #boxes div div { background: url(personalwebsite-images/box_b.gif) bottom left no-repeat; }
#body #boxes .inner div { background: none; }
#body #boxes .inner {
color: white;
padding: 0;
}
#left {
float: left;
width: 194px;
}
#right {
float: right;
width: 404px;
}
#body #boxes #left .inner,
#body #boxes #right .inner {
padding: 10px 11px 0px 11px;
}
#boxes ul {
margin: 0;
padding: 0;
}
* html #boxes ul {
margin-left: -0.7em;
marg\in-left: 0.0em;
}
#boxes li {
margin: 0.4em 1.8em 0.2em 0.1em;
padding: 0;
list-style: none;
}
a {
font-weight: bold;
}
#left .lowright {
float: right;
margin: 0 0 0 1em;
display: inline;
}
* html #left .lowright {
margin-bottom: -5px;
}
/* footer */
#footer {
margin-top: 3px;
text-align: center;
}
#footer, #footer a {
font-weight: normal;
font-size: 9px;
color: #989994;
}
#footer a:hover {
color: #fff;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="wrapper">
<h1><a href="http://www.free-css.com/"><img src="personalwebsite-images/logo.gif" width="177" height="36" alt="" /></a></h1>
<ul id="nav">
<li class="b"><a href="http://www.free-css.com/">HOME</a></li>
<li class="a"><a href="http://www.free-css.com/">Hobbies</a></li>
<li class="d"><a href="http://www.free-css.com/">Gallery</a></li>
<li class="c"><a href="http://www.free-css.com/">contact</a></li>
</ul>
<div id="body">
<div>
<div>
<div>
<div class="inner"> <img src="personalwebsite-images/left_photo.jpg" width="194" height="299" alt="My photo" class="left" />
<h2><img src="personalwebsite-images/title_welcome.gif" width="139" height="20" alt="Welcome to my world" /></h2>
<div class="indent">
<p>This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original.</p>
<p>This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original.</p>
<p>This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original.</p>
<p>This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is demo text.</p>
</div>
<div id="dividerx"><img src="personalwebsite-images/divider_cut.gif" width="28" height="12" alt="" /></div>
<div id="boxes">
<div>
<div class="inner">
<div id="left">
<div class="inner">
<h2><img src="personalwebsite-images/title_join_my_club.gif" width="86" height="20" alt="join my club" /></h2>
<p>This is a demo text. It will be repl aced by the original.</p>
<img src="personalwebsite-images/black_man.gif" width="79" height="102" alt="black man" class="lowright" />
<p>This is a demo text. It will be replaced by the original. This is a demo text. </p>
<p class="readmore"><a href="http://www.free-css.com/">...Join Now</a></p>
</div>
</div>
<!-- end left -->
<div id="right">
<div class="inner">
<h2><img src="personalwebsite-images/title_enter.gif" width="139" height="20" alt="enter my dreamland" /></h2>
<ul class="left">
<li><a href="http://www.free-css.com/">My music</a></li>
<li><a href="http://www.free-css.com/">My movies</a></li>
<li><a href="http://www.free-css.com/">My sports</a></li>
<li><a href="http://www.free-css.com/">My paintings</a></li>
</ul>
<p>This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text.</p>
<p>This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text.</p>
</div>
</div>
<!-- end right -->
<div class="clear"></div>
</div>
</div>
</div>
<!-- end boxes -->
</div>
</div>
</div>
</div>
<!-- end .inner -->
</div>
<!-- end body -->
<div id="footer"> Powered by <a href="http://www.freewebsitetemplates.com">Free Website Templates</a> </div>
<!-- end footer -->
</div>
<!-- end wrapper -->
</body>
</html>
Related examples in the same category