photoportal
<!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>
<title>Photo Portal</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type='text/css'>
/*template 05 - collin grasley january 17 2007 */
/**************** All the pretty things ***********************************************************/
body {
margin: 0 auto;
font: .7em Tahoma, Arial, sans-serif;
line-height: 1.7em;
background: #938043 url(photoportal-images/bg.gif) repeat-x;
color: #998d7d;
}
h1 {
font: bold 2.2em Arial, Sans-Serif;
color:#2f0e00;
padding: 8px 0 0 0;
margin: 0;
letter-spacing: -2px;
}
h2 {
margin: 0;
color:#2f0e00;
padding: 0 0 4px 0;
font: bold 1.6em "Lucida Sans", Sans-Serif;
letter-spacing: -1px;
}
#header-h1 {
font: bold 2.0em "Lucida Sans", Sans-Serif;
color: #a09080;
padding: 10px 0 0 26px;
margin: 0;
letter-spacing: -1px;
}
#subtext {
font-size: 0.8em;
margin: 0 0 8px 26px;
padding: 0;
color: #e7e6e6;
}
a {
color: #2f0e00;
background: inherit;
}
a:hover {
color: #9a8a7a;
background: inherit;
}
p {
margin: 0 0 5px 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
img {
border: 0;
}
.clear{
width: 100%;
clear:both;
margin: 30px 0 2px 0;
height: 14px;
background: #fff url(photoportal-images/tile.gif) repeat-x;
}
/******************** Gallery thumbs ***************************************/
.thumbs img{
position:relative;
padding:0px;
margin:2px 3px 3px 4px;
border:3px solid #2f0e00;
background-color:inherit;
}
.thumbs img:hover{
border:3px solid #9a8a7a;
}
/**************** The main content ***********************************************************/
#wrapper {
margin: 5px auto;
width: 980px;
border: 1px solid #9c8c7d;
background: #fff;
}
#header-{
margin: 0 0 1px 0;
background:url(photoportal-images/header.jpg) no-repeat;
height:60px;
}
#pic {
margin-bottom:2px;
height: 200px;
background: url(photoportal-images/banner.jpg) no-repeat;
}
/**************** The Main Menu ******************************************************************/
#menu {
margin: 2px 0 4px 0;
padding: 5px 2px;
float: right;
}
#menu li{
list-style: none;
display: inline;
margin: 0;
}
#menu li a{
text-decoration: none;
padding: 4px 24px;
margin-right:0;
background: #2f0e00;
font-weight: bold;
color: #fff;
}
#menu li a:hover{
background: #9a8a7a;
color: #000;
}
/************************** The left side (pass the dutchie from here) **************************************/
#leftside {
float: left;
width: 330px;
border-right: 1px solid #bbafa3;
margin: 0 0 8px 0;
}
.category {
padding: 6px;
margin: 0 0 5px 0;
color: #9c8c7d;
background: #fff;
}
.leftdata {
padding: 8px;
margin: 0 0 5px 0;
color: #9c8c7d;
background: #fff;
}
#leftnav {
width: 310px;
padding: 0;
margin-bottom: 0px;
font-size: 10px;
color: #9c8c7d;
}
#leftnav ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#leftnav li {
border-bottom: 1px solid #fff;
margin: 0;
width: auto;
}
#leftnav li a {
display: block;
padding: 3px 0px 2px 15px;
color: #fff;
text-transform:uppercase;
font-weight:bold;
text-decoration: none;
width: auto;
background:#2f0e00 url(photoportal-images/menuarrow.gif) no-repeat center left;
}
#leftnav li a:hover {
color: #000;
padding: 3px 0px 2px 30px;
background: #9a8a7a url(photoportal-images/menuarrowhover.gif) no-repeat center left;;
font-weight:bold;
}
.leftphoto {
float: left;
margin: 0 9px 3px 0;
}
/*************************** The right side *******************************************/
#rightside {
float: right;
width: 635px;
margin: 0 0 10px 0;
}
.headline {
margin: 0 0 5px 0;
padding: 8px;
color: #9c8c7d;
background: #fff;
}
.rightdata {
margin: 0px 0 5px 0;
background: #fff;
color: #9c8c7d;
padding: 10px 15px 5px 10px;
}
.photo {
float: left;
clear: left;
border: 2px solid #9a8a7a;
background: #eee;
margin: 0 10px 2px 0;
}
.gallery {
background: #fff;
color: #9c8c7d;
padding: 20px 10px 10px 10px;
margin: 0 0 5px 0;
}
/**************** And finally, the footer data here ***************************************/
#footer {
clear: both;
color: #9c8c7d;
background: #fff;
padding: 10px 15px;
}
#footer .copyright {
float: right;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Photo Portal</h1>
<p id="subtext">Lorem Ipsum Dolor Sit Amet</p>
</div>
<!-- end header--->
<div id="pic"></div>
<!-- end main pic - this is a background image-->
<ul id="menu">
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Lorem Ipsum</a></li>
<li><a href="http://www.free-css.com/">Lorem Ipsum</a></li>
<li><a href="http://www.free-css.com/">Lorem Ipsum</a></li>
<li><a href="http://www.free-css.com/">Lorem Ipsum</a></li>
<li><a href="http://www.free-css.com/">Lorem Ipsum</a></li>
<li><a href="http://www.free-css.com/">Lorem Ipsum</a></li>
</ul>
<!-- end main menu -->
<!-- all the right hand content begins here-->
<div class="clear"></div>
<div id="rightside">
<div class="rightdata">
<h2>Lorem ipsum dolor sit amet</h2>
<img src="photoportal-images/bigphoto.gif" width="200" height="150" class="photo" alt="" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, <a href="http://www.free-css.com/">consectetuer adipiscing elit</a>, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div class="rightdata">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, <a href="http://www.free-css.com/">consectetuer adipiscing</a> elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div class="headline">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<!-- This is where the gallery starts-->
<div class="gallery">
<p class="thumbs"> <a href="http://www.free-css.com/"><img src="photoportal-images/thumb.jpg" alt="" width="85" height="85" class="" /></a> <a href="http://www.free-css.com/"><img src="photoportal-images/thumb.jpg" alt="" width="85" height="85" class="" /></a> <a href="http://www.free-css.com/"><img src="photoportal-images/thumb.jpg" alt="" width="85" height="85" class="" /></a> <a href="http://www.free-css.com/"><img src="photoportal-images/thumb.jpg" alt="" width="85" height="85" class="" /></a> <a href="http://www.free-css.com/"><img src="photoportal-images/thumb.jpg" alt="" width="85" height="85" class="" /></a> <a href="http://www.free-css.com/"><img src="photoportal-images/thumb.jpg" alt="" width="85" height="85" class="" /></a> </p>
</div>
</div>
<div id="leftside">
<div class="leftdata">
<div id="leftnav">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a></li>
<li><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a></li>
<li><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a></li>
<li><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a></li>
<li><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a></li>
<li><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a></li>
<li><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a></li>
<li><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a></li>
<li><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a></li>
</ul>
</div>
</div>
<div class="leftdata">
<p><b>Lorem ipsum dolor sit amet</b><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te <a href="http://www.free-css.com/">feugait nulla facilisi</a>.</p>
</div>
<div class="leftdata">
<p><b>Lorem ipsum dolor sit amet</b><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te <a href="http://www.free-css.com/">feugait nulla facilisi</a>.</p>
</div>
</div>
<div class="clear"></div>
<div id="footer">
<p class="copyright">© 2007 Your Website- <a href="http://www.free-css.com/">Open Designs</a></p>
<p><a href="http://www.free-css.com/">Home</a> · <a href="http://www.free-css.com/">Lorem ipsum</a> · <a href="http://www.free-css.com/">Lorem ipsum</a> · <a href="http://www.free-css.com/">Lorem ipsum</a> · | <a href="mailto:collingrasley@gmail.com">Coll23</a> · <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML</a><br />
</p>
</div>
</div>
</body>
</html>
Related examples in the same category