mydiary
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Diary</title>
<style type='text/css'>
html, body, ul, li, h1, h2, h3, h4 {
margin: 0px;
padding: 0px;
list-style: none;
}
h1 img {
display: block;
}
img {
border: 0px;
}
a {
color: white;
}
a:hover {
color: #eee;
}
.left {
float: left;
}
.right {
float: right;
}
.more {
text-align: right;
}
.clear {
clear: both;
}
body {
background: #000;
font: 12px arial, sans-serif;
color: #A7A7A7;
padding: 30px 5px;
text-align: center;
}
/************************** wrappers **********************************/
#wrapper {
text-align: left;
width: 754px;
margin: auto;
background: url(mydiary-images/body_bg.gif) repeat-y;
}
#body {
position: relative;
}
#body-top {
background: top left url(mydiary-images/bar.gif) no-repeat;
}
#body-bot {
background: bottom left url(mydiary-images/bar.gif) no-repeat;
}
/************************** Header **********************************/
h1 {
padding: 17px 0px 0px 95px;
}
#person {
float:right;
padding: 17px 15px 0px 0px;
right: 20px;
display:inline;
}
#about {
float:left;
margin: 20px 0px 0px 131px;
width: 256px;
height: 320px;
overflow: auto;
text-align: justify;
display:inline;
}
.first-letter {
font-weight: bold;
font-size: 14px;
color: white;
}
/************************** Navigation **********************************/
#header ul {
margin: 0px 17px 20px 99px;
border: 2px solid white;
padding: 5px;
display:inline;
float: left;
width:625px;
}
#header li {
display:inline;
padding: 13px;
}
#header ul a {
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bolder;
color: #f3e9d9;
text-transform: uppercase;
}
#header ul a:hover{
color: #fff;
}
/************************** Tray **********************************/
#tray {
padding-left: 130px;
padding-right: 45px;
}
#tray-left {
float: left;
width: 255px;
}
#tray-right {
float: right;
width: 302px;
}
#tray-left .left {
margin-right: 12px;
}
#tray h2 {
margin-bottom: 16px;
}
#tray p {
margin: 0px;
margin-bottom: 3px;
}
#tray-left .more {
padding-right: 12px;
}
/************************** Footer **********************************/
#footer {
text-align: center;
color: white;
margin-left: 95px;
margin-right: 14px;
background: top left url(mydiary-images/body_bot_left.gif) no-repeat;
}
#footer-right {
padding-top: 33px;
padding-bottom: 22px;
background: top right url(mydiary-images/body_bot_right.gif) no-repeat;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="body">
<div id="body-top">
<div id="body-bot">
<div id="header">
<img src="mydiary-images/pic_1.jpg" width="332" height="453" alt="Pic 1" id="person" />
<h1><img src="mydiary-images/logo.gif" width="259" height="107" alt="My Diary" /></h1>
<div id="about">
<p>You can find some <a href="http://www.webhostingservices.us/">web hosting services</a> which are also a need for website building which are listed in web hosting search.</p>
<p>This is a template designed by free website templates for you for free you can replace all the text by your own
text. This is just a place holder so you can see how the site would look like.</p>
<p>You can remove any link to our websites from this template you're free to use the template without linking
back to us. Don't want your boss to know you used a free website template ;) .</p>
<p>If you're having problems editing the template please don't hesitate to ask for help on the <a href="http://www.freewebsitetemplates.com/forum/">forum</a>.</p>
</div>
<div class="clear"></div>
<ul>
<li><a href="http://www.freewebsitetemplates.com">Home</a></li>
<li><a href="http://www.freewebsitetemplates.com">About me</a></li>
<li><a href="http://www.freewebsitetemplates.com">Passion</a></li>
<li><a href="http://www.freewebsitetemplates.com">Hobbies</a></li>
<li><a href="http://www.freewebsitetemplates.com">Profession</a></li>
<li><a href="http://www.freewebsitetemplates.com">Collection</a></li>
<li><a href="http://www.freewebsitetemplates.com">Contact</a></li>
</ul>
</div>
<div id="tray">
<div id="tray-left">
<h2><img src="mydiary-images/h_hobbies.gif" width="70" height="20" alt="H Hobbies" /></h2>
<img src="mydiary-images/pic_2.jpg" width="65" height="87" alt="Pic 2" class="left" />
<p>If you're looking for beautiful and professionally made templates you can find them at <a href="http://www.templatebeauty.com">Template Beauty</a>.</p>
<p>Even more websites all about website templates on <a href="http://www.justwebtemplates.com">Just Web Templates</a>.</p>
<p class="more"><a href="http://www.freewebsitetemplates.com">more</a></p>
</div>
<div id="tray-right">
<h2><img src="mydiary-images/h_collections.gif" width="90" height="20" alt="H Collections" /></h2>
<img src="mydiary-images/pic_3.jpg" width="299" height="87" alt="Pic 3" />
<p class="more"><a href="http://www.freewebsitetemplates.com">click here for more</a></p>
</div>
<div class="clear"></div>
</div>
<div id="footer">
<div id="footer-right">
Hosting by <a href="http://www.webhostingservices.us/">Web Hosting Services</a>.
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category