photo 2
<!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>Photos Site</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type='text/css'>
* {
margin: 0px;
padding: 0px;
}
body {
padding: 80px 0px 0px;
background: url('photo-images/background_top.gif') #c4b8a1 repeat-x;
color: #695d47;
font-family: verdana, arial, sans-serif;
font-size: 12px;
text-align: center;
}
a {
color: #695d47;
background-color: inherit;
text-decoration: underline;
}
a:hover {
color: #ab9c7e;
background-color: inherit;
}
span {
display: none;
}
img {
border: none;
}
ul {
list-style-type: none;
}
li {
list-style-type: none;
}
p {
margin: 0px 0px 15px;
text-align: justify;
line-height: 15px;
}
.clearthis {
margin : 0px;
height : 1px;
clear : both;
float : none;
font-size : 1px;
line-height : 0px;
overflow : hidden;
visibility: hidden;
}
#body_wrapper {
padding: 5px 0px 10px;
width: 100%;
background-color: #fff;
color: inherit;
}
#container {
margin: 0px auto;
width: 758px;
text-align: right;
}
#container .content_header {
margin: 20px 0px 0px auto;
width: 730px;
height: 40px;
background: url('photo-images/content_header_bg.gif') repeat-x 0% 0%;
}
#container .content {
margin: 3px 150px 0px 28px;
width: 580px;
text-align: left;
}
/* Page Header */
#page_header {
background: url('photo-images/header_leftborder.gif') #fff repeat-y 0% 0%;
color: #6a604e;
float: left;
}
#page_header h1 {
width: 280px;
height: 125px;
overflow: hidden;
background: url('photo-images/website_title.gif') no-repeat 50% 50%;
}
/* Navigational Menu */
#nav_menu {
margin-left: 9px;
padding-left: 19px;
float: right;
background: url('photo-images/header_leftborder.gif') #fff repeat-y 0% 0%;
color: #b3a386;
text-align: center;
font-family: tahoma, arial, sans-serif;
}
#nav_menu a {
color: #b3a386;
background: inherit;
}
#mav_menu a:hover {
color: #857860;
background: inherit;
}
#nav_menu ul {
width: 450px;
height: 125px;
overflow: hidden;
}
#nav_menu li {
float: left;
border-width: 0px 1px 1px 0px;
border-color: #c1b7a5;
border-style: solid;
font-size: 20px;
}
#nav_menu li#menu3, #nav_menu li#menu6 {
border-right: none;
}
#nav_menu li a {
display: block;
width: 149px;
height: 62px;
text-decoration: none;
}
#nav_menu li a:hover {
color: #857860;
background-color: #f4eee2
}
#nav_menu li a span {
padding-top: 17px;
display: block;
}
/* Welcome to my Site */
#welcome .content_header h2 {
height: 28px;
background: url('photo-images/welcome_header.gif') no-repeat 0% 0%;
}
#welcome p {
width: 420px;
float: right;
}
/* Client List */
#clientlist .content {
margin-top: 18px;
margin-right: 260px;
width: 470px;
}
#clientlist .content_header h1 {
height: 28px;
background: url('photo-images/clientlist_header.gif') no-repeat 0% 0%;
}
#clientlist p {
width: 300px;
float: right;
}
#photographer_image {
width: 758px;
text-align: left;
overflow: hidden;
}
#photographer_image span {
display: block;
margin-top: -269px;
margin-left: 517px;
width: 241px;
height: 300px;
background: url('photo-images/main_image.gif') no-repeat 0% 0%;
z-index: 1;
position: absolute;
}
/* My Portfolio */
#portfolio .content_header h1 {
height: 28px;
background: url('photo-images/portfolio_header.gif') no-repeat;
}
#portfolio {
padding-bottom: 12px;
background: url('photo-images/gallery_title.gif') no-repeat 29px 80px;
}
#gallery {
padding: 40px 0px 25px 59px;
}
#gallery ul {
width: 700px;
}
#gallery li {
margin-right: 30px;
margin-bottom: 25px;
padding: 4px 4px 2px;
background-color: #c4b8a1;
color: inherit;
float: left;
}
/* Page Footer */
#page_footer {
padding: 9px 10px 6px;
font-weight: bold;
float: none;
clear: both;
}
#page_footer a:hover {
background-color: inherit;
color: #4f4635;
}
/* Thumbnail with Double-Border */
.thumbnail_dborder_1 {
margin: 0px 12px 5px 0px;
background: url('photo-images/thumbnail_border_1.gif') #695d47 no-repeat 0% 0%;
color: inherit;
clear: left;
float: left;
}
.thumbnail_dborder_2 {
background: url('photo-images/thumbnail_border_1.gif') no-repeat 100% 0%;
}
.thumbnail_dborder_3 {
background: url('photo-images/thumbnail_border_1.gif') no-repeat 100% 100%;
}
.thumbnail_dborder_4 {
padding: 4px 4px 3px;
background: url('photo-images/thumbnail_border_1.gif') no-repeat 0% 100%;
}
.thumbnail_dborder_1 img {
border: #fff 7px solid;
}
/* Thumbnail with Single-Border */
.thumbnail_border_1 {
margin: 5px 12px 5px 0px;
background: url('photo-images/thumbnail_border_2a.gif') #c5b9a2 no-repeat 0% 0%;
color: inherit;
clear: left;
float: left;
}
.thumbnail_border_2 {
background: url('photo-images/thumbnail_border_2b.gif') no-repeat 100% 0%;
}
.thumbnail_border_3 {
background: url('photo-images/thumbnail_border_2c.gif') no-repeat 100% 100%;
}
.thumbnail_border_4 {
padding: 4px 4px 3px;
background: url('photo-images/thumbnail_border_2d.gif') no-repeat 0% 100%;
}
</style>
</head>
<body>
<div id="body_wrapper">
<div id="container">
<!-- Start of Page Header -->
<div id="page_header">
<h1><span>Photos Site</span></h1>
</div>
<!-- End of Page Header -->
<!-- Start of Navigational Menu -->
<div id="nav_menu">
<ul>
<li id="menu1"><a href="http://www.free-css.com/"><span>Homepage</span></a></li>
<li id="menu2"><a href="http://www.free-css.com/"><span>About Me</span></a></li>
<li id="menu3"><a href="http://www.free-css.com/"><span>Services</span></a></li>
<li id="menu4"><a href="http://www.free-css.com/"><span>Portfolio</span></a></li>
<li id="menu5"><a href="http://www.free-css.com/"><span>Contacts</span></a></li>
<li id="menu6"><a href="http://www.free-css.com/"><span>Links</span></a></li>
</ul>
<div class="clearthis"> </div>
</div>
<!-- End of Mavigational Menu -->
<div class="clearthis"> </div>
<!-- Start of Welcome to my Site -->
<div id="welcome">
<div class="content_header">
<h2><span>Welcome to my Site</span></h2>
</div>
<div class="content">
<div class="thumbnail_dborder_1">
<div class="thumbnail_dborder_2">
<div class="thumbnail_dborder_3">
<div class="thumbnail_dborder_4"> <img src="photo-images/welcome_thumbnail.gif" width="118" height="116" alt="Thumbnail Caption" /> </div>
</div>
</div>
</div>
<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> If you're having problems editing the template please don't hesitate to ask for help on the forum. You will get help as soon as possible. You can also use the forum to tell us what you like or dislike and what you would like to see more. </p>
<p> Your feedback is very important to us and we will do everything to fulfil your wishes. <a href="http://www.free-css.com/">more...</a> </p>
</div>
<div class="clearthis"> </div>
</div>
<!-- End of Welcome to my Site -->
<!-- Start of Client List -->
<div id="clientlist">
<div class="content_header">
<h1><span>Client List</span></h1>
</div>
<div class="content">
<div class="thumbnail_border_1">
<div class="thumbnail_border_2">
<div class="thumbnail_border_3">
<div class="thumbnail_border_4"> <img src="photo-images/clientlist_thumbnail.gif" width="132" height="73" alt="Thumbnail Caption" /> </div>
</div>
</div>
</div>
<p> Please don't remove the link at the bottom. We have worked hard to make the templates and ask that you respect our hard work so we can continue providing you with high quality templates. </p>
<p> If you really want to remove the link you can buy a copyright free version on our website. Thanks. </p>
</div>
<div class="clearthis"> </div>
<div id="photographer_image"><span> </span></div>
</div>
<!-- End of Client List -->
<!-- Start of My Portfolio -->
<div id="portfolio">
<div class="content_header">
<h1><span>My Portfolio</span></h1>
</div>
<!-- Start of Gallery -->
<div id="gallery">
<ul>
<li><a href="http://www.free-css.com/"><img src="photo-images/gallery_thumbnail_1.gif" width="84" height="76" alt="Thumbnail 1 Caption" /></a></li>
<li><a href="http://www.free-css.com/"><img src="photo-images/gallery_thumbnail_2.gif" width="93" height="76" alt="Thumbnail 2 Caption" /></a></li>
<li><a href="http://www.free-css.com/"><img src="photo-images/gallery_thumbnail_3.gif" width="59" height="77" alt="Thumbnail 3 Caption" /></a></li>
<li><a href="http://www.free-css.com/"><img src="photo-images/gallery_thumbnail_4.gif" width="137" height="77" alt="Thumbnail 4 Caption" /></a></li>
<li><a href="http://www.free-css.com/"><img src="photo-images/gallery_thumbnail_5.gif" width="119" height="78" alt="Thumbnail 5 Caption" /></a></li>
</ul>
</div>
<!-- End of Gallery -->
<div class="clearthis"> </div>
</div>
<!-- End of Client List -->
</div>
</div>
<!-- Start of Page Footer -->
<div id="page_footer"> Web design by <a href="http://www.freewebsitetemplates.com/">Free Website Templates</a> </div>
<!-- End of Page Footer -->
</body>
</html>
Related examples in the same category