bookauthor
<!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>Book Author</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type='text/css'>
* {
margin: 0px;
padding: 0px;
}
body {
padding-bottom: 10px;
background-color: #906E49;
color: #fff;
font-family: tahoma, arial, sans-serif;
font-size: 10px;
text-align: center;
}
a {
color: #fff;
text-decoration: underline;
}
a:hover {
color: #C2C2C4;
}
span {
display: none;
}
p {
margin: 10px 0px 5px;
text-align: justify;
line-height: 14px;
}
.clearthis {
margin : 0px;
height : 1px;
clear : both;
float : none;
font-size : 1px;
line-height : 0px;
overflow : hidden;
}
#container-border1 {
margin: 0px auto;
width: 706px;
background: url('bookauthor-images/border_topspacing.gif') #5D5D55 repeat-x 0% 0%;
}
#container-border2 {
padding-bottom: 5px;
background: url('bookauthor-images/border_rightspacing.gif') repeat-y 100% 0%;
}
#container {
margin: 0px 5px;
padding-bottom: 10px;
width: 696px;
background: url('bookauthor-images/body_bg.gif') #221E01 0px 0px;
}
#leftpage {
padding: 0px 16px 0px 20px;
width : 311px;
float: left;
background: url('bookauthor-images/body_topbg.gif') repeat-x 0px 0px;
}
#rightpage {
padding: 55px 16px 0px 20px;
width: 304px;
float: right;
background: url('bookauthor-images/body_topbg.gif') repeat-x 0px 0px;
}
#pagediv {
width: 9px;
height: 31px;
float: left;
background: url('bookauthor-images/body_topbg.gif') repeat-x 0px 0px;
}
/* Page Header */
#page_header {
margin: 0px auto;
width: 307px;
height: 80px;
background: url('bookauthor-images/header_underline.jpg') repeat-x 0px 79px;
text-align: left;
}
#page_header h1 {
width: 225px;
height: 78px;
background: url('bookauthor-images/body_header.jpg') no-repeat 0px 0px;
}
/* Page Header Links */
#page_header_links {
margin: 8px auto 12px;
width: 307px;
color: #C2C2C4;
font-size: 11px;
font-weight: bold;
line-height: 11px;
text-align: right;
}
#page_header_links ul {
max-width: 307px;
float: right;
}
#page_header_links li {
padding: 0px 9px 0px 7px;
float: left;
list-style-type: none;
background: url('bookauthor-images/headerlinks_div.gif') no-repeat 100% 0%;
}
#page_header_links li.last {
padding-right: 0px;
background : none;
}
#page_header_links a {
text-decoration: none;
color: #C2C2C4;
line-height: 11px;
}
#page_header_links a:hover {
color: #F6F6F6;
}
/* Page Header Image & Menu */
#page_header_content {
margin-bottom : 20px;
width: 311px;
}
#page_image {
width: 207px;
height: 151px;
float: right;
background: url('bookauthor-images/photo_man.jpg') no-repeat 0px 0px;
overflow: hidden;
border: #CDC6BE 1px solid;
}
#page_menu {
width: 94px;
float: left;
}
#page_menu ul {
width: 94px;
}
#page_menu li {
margin-bottom: 11px;
width: 92px;
height: 28px;
background-color: #484848;
border: #CDC6BE 1px solid;
list-style-type: none;
overflow : hidden;
float: left;
}
#page_menu li.last {
margin-bottom: 0px;
}
#page_menu li a {
padding-top:9px;
width: 92px;
height:28px;
display: block;
color: #FFFFFF;
font-size: 11px;
line-height: 11px;
font-weight: bold;
text-decoration: none;
}
#page_menu li a:hover {
color: #000000;
background-color: #999999;
}
/* Page Body Left Page */
#page_body_left {
margin: 0px auto;
width: 307px;
text-align: justify;
}
#page_body_left h2 {
margin: 10px 0px 11px;
color: #906E49;
font-size: 11px;
font-weight: bold;
}
#page_body_left .nextpage {
margin-top: 20px;
text-align: left;
}
#page_body_left .nextpage a {
color: #846747;
font-weight: bold;
text-decoration: underline;
}
#page_body_left .nextpage a:hover {
color: #B08962;
}
/* Page Body Right Page */
#page_body_right {
margin: 0px auto;
width: 303px;
text-align: justify;
}
#latestwork_header {
margin: 5px 0px 0px;
height: 16px;
background : url('bookauthor-images/title_underline.jpg') no-repeat 0% 100%;
}
#latestwork_header h2 {
width: 81px;
height: 12px;
background: url('bookauthor-images/title_latestworks.jpg') no-repeat 0px 0px;
}
.latest_book_details {
margin: 12px 0px 8px;
}
.latest_book_details .book_cover {
padding: 0px 10px 0px 0px;
width: 70px;
float: left;
display: block;
}
.latest_book_details p {
margin : 0px 0px 9px;
}
/* Right Page Gray Boxes */
#gray_boxes {
margin: 0px auto;
width: 298px;
text-align: center;
color: #AFAFAF;
}
#gray_boxes h3 {
color: #E2E2E2;
font-size: 11px;
font-weight: bold;
}
#gray_boxes p {
margin: 8px 0px 7px;
line-height: 13px;
}
#gray_boxes .link-more {
margin: 2px 0px;
text-align: right;
font-weight: bold;
}
#gray_boxes .link-more a {
color: #E2E2E2;
text-decoration: none;
}
#gray_boxes .link-more a:hover {
color: #FFF;
}
#gray_recent_topics {
padding: 8px 12px;
width: 120px;
float: left;
border: #AFAFAD 1px solid;
background-color: #484848;
text-align: justify;
}
#gray_recent_topics .link-more {
margin: 10px 0px 5px;
}
#gray_live_chat {
margin-bottom: 10px;
padding: 8px 9px;
width: 122px;
float: right;
border: #AFAFAD 1px solid;
background-color: #484848;
text-align: justify;
}
#gray_live_chat h3 {
width: 101px;
height: 40px;
background: url('bookauthor-images/title_chatwithme.jpg') no-repeat 0px 0px;
}
#gray_my_diary {
padding: 8px 11px;
width: 118px;
float: right;
border: #AFAFAD 1px solid;
background-color: #484848;
text-align: justify;
}
/* Page Footer */
#page_footer {
margin : 7px auto 0px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<div id="container-border1">
<div id="container-border2">
<div id="container">
<!-- Start Left Page of Book -->
<div id="leftpage">
<div id="page_header">
<h1><span>My Writings</span></h1>
</div>
<div id="page_header_links">
<ul>
<li><a href="http://www.free-css.com/">Fiction Gallery</a></li>
<li class="last"><a href="http://www.free-css.com/">Special Column</a></li>
</ul>
<div class="clearthis"> </div>
</div>
<div id="page_header_content">
<!-- Start Page Menu -->
<div id="page_menu">
<ul>
<li><a href="http://www.free-css.com/">HOME</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">News</a></li>
<li class="last"><a href="http://www.free-css.com/">Contacts</a></li>
</ul>
</div>
<!-- //End Page Menu -->
<div id="page_image"> </div>
<div class="clearthis"> </div>
</div>
<!-- Start Welcome/Introduction Text -->
<div id="page_body_left">
<h2>Welcome to my World</h2>
<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. </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. </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 class="nextpage"> <a href="http://www.free-css.com/">View the next pages</a> </div>
</div>
<!-- //End Welcome/Introduction Text -->
</div>
<!-- //End Left Page of Book -->
<div id="pagediv"> </div>
<!-- Start Right Page of Book -->
<div id="rightpage">
<div id="page_body_right">
<!-- Start Latest Works -->
<div id="latestwork">
<div id="latestwork_header">
<h2><span>Latest Works</span></h2>
</div>
<div class="latest_book_details">
<div class="book_cover"><img src="bookauthor-images/_book01.jpg" width="61" height="88" alt="Book Title" /></div>
<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>
<div class="clearthis"> </div>
</div>
<div class="latest_book_details">
<div class="book_cover"><img src="bookauthor-images/_book02.jpg" width="61" height="86" alt="Book Title" /></div>
<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>
<div class="clearthis"> </div>
</div>
</div>
<!-- //End Latest Works -->
<!-- Start Gray Boxes -->
<div id="gray_boxes">
<!-- Start Recent Topics -->
<div id="gray_recent_topics">
<h3>Recent Topics</h3>
<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. This is a demo text. It will be replaced by the original. This is a demo text. </p>
<div class="link-more"> <a href="http://www.free-css.com/">...Read More</a> </div>
</div>
<!-- //End Recent Topics -->
<!-- Start Chat with Me -->
<div id="gray_live_chat">
<h3><span>Chat with ME Live</span></h3>
<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. </p>
<div class="link-more"> <a href="http://www.free-css.com/">...Go Now</a> </div>
</div>
<!-- //End Chat with Me -->
<!-- Start My Diary -->
<div id="gray_my_diary">
<h3>My Diary</h3>
<p> This is a demo text. It will be replaced by the original. </p>
<div class="link-more"> <a href="http://www.free-css.com/">...Read More</a> </div>
</div>
<!-- //End My Diary -->
<div class="clearthis"> </div>
</div>
<!-- //End Gray Boxes -->
</div>
</div>
<!-- //End Right Page of Book -->
<div class="clearthis"> </div>
</div>
</div>
</div>
<!-- Start Page Footer -->
<div id="page_footer"> Powered by <a href="http://www.freewebsitetemplates.com">Free Website Templates</a> </div>
<!-- //End Page Footer -->
</body>
</html>
Related examples in the same category