simplepicture
<!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" >
<head>
<title>Simple Picture</title>
<meta content="text/html;charset=utf-8" http-equiv="content-type"/>
<style type='text/css'>
/* SimplePicture - an open source xhtml/css website layout by Ben Goldman
(aka Robobuilder) - http://realalibi.com . You are free to use this template
for any purpose as long as the proper credits are given for the original design work.
Version: 1.0, Spring 2007
Main Syle Colors
colors {
#333333(dark gray), #3399CC(blue), #FFFFFF(white),
#DFDFDF(light gray), #656565(gray)
}
*/
*{
margin:0;
padding:0;
}
body{
font:13px "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;
color:#333;
background-color:#fff;
}
.clearboth{
clear:both;
}
/*Layout Styles*/
/*Header*/
#header{
background-color:#333;
height:75px;
border-bottom:10px #dfdfdf solid;
}
#header h1{
font:29px "Georgia", Times New Roman, Times, serif;
color:#fff;
padding:20px 0 0 50px;
letter-spacing:0.1em;
}
#header span{
color:#3399CC;
}
/*Content*/
#container{
margin:0px 50px 0px 50px;
text-align:center;
}
#inner{
width: 100%;
padding: 0px;
text-align: left;
background-color: #fff;
overflow: auto;
}
/*Blurb*/
#blurb{
padding:10px;
border-bottom:10px #dfdfdf solid;
font-size:14.5px;
letter-spacing:.05em;
}
.date{
background-color:#333;
padding:5px 8px;
float:left;
color:#fff;
font-variant:small-caps;
text-align:center;
margin:0 10px 5px 0;
font-family: Arial, Helvetica, sans-serif;
}
.date span{
color:#3399cc;
display:block;
font-size:25px;
padding-top:2px;
font-variant:normal;
}
.date sup{
font-size:12px;
}
.blurb{
color:#656565;
}
/*Navigation*/
#nav{
margin:10px 10px 10px 0;
width:200px;
float:left;
}
#nav h1{
color:#3399CC;
text-align:right;
}
#nav ul{
list-style-type:none;
font-size:17px;
margin:0 0 0 5px;
}
#nav ul li{
padding:1px;
}
#nav ul li a{
border-left:5px #dfdfdf solid;
padding:2px 3px;
color:#656565;
text-decoration:none;
}
#nav ul li a:hover{
color:#333;
text-decoration:none;
}
#nav ul li a.current{
border-left:5px #3399cc solid;
color:#333;
font-weight:bold;
text-decoration:none;
}
/*Contennt*/
#content{
margin:18px 0px 10px 210px;
border-left:1px #dfdfdf solid;
padding:0 0 0 10px;
line-height:22px;
}
/*Footer*/
#footer{
background-color:#333;
border-top:10px #dfdfdf solid;
padding:5px 50px;
color:#fff;
}
/*Element Styles*/
h1, h2, h3, h4, h5, h6{
color:#333;
padding:8px 0;
}
h1{
font-size:26px;
}
h2{
font-size:23px;
}
h3{
font-size:21px;
}
h4{
font-size:19px;
}
h5{
font-size:17px;
}
h6{
font-size:15px;
font-weight:bold;
}
p{
margin:4px 0 10px 0;
}
#container a{
color:#3399cc;
text-decoration:underline;
}
#container a:hover, #footer a:hover{
text-decoration:none;
}
#footer a{
color:#fff;
}
a img{
border:none;
}
code{
background-color:#dfdfdf;
display:block;
padding:5px;
border-left:3px #3399cc solid;
}
#content ol, #content ul{
padding:5px 0;
}
#content ol li,#content ul li{
margin-left:20px;
}
dt{
color:#3399cc;
font-weight:bold;
font-size:14px;
padding:2px 0;
}
dd{
padding-left:25px;
}
blockquote{
background:#dfdfdf;
padding:10px;
margin:12px 0;
font-weight:bold;
}
blockquote.red{
background:#cc0044 url("simplepicture-img/site/warning.gif") center left no-repeat;
color:#fff;
border:1px #AF003C solid;
padding-left:44px;
}
blockquote.blue{
background:#3399cc url("simplepicture-img/site/message.gif") center left no-repeat;
color:#fff;
border:1px #333 solid;
padding-left:44px;
}
blockquote.yellow{
background:#ffcc00 url("simplepicture-img/site/notice.gif") center left no-repeat;
color:#333;
border:1px #ffff66 solid;
padding-left:44px;
}
blockquote.green{
background:#66cc66 url("simplepicture-img/site/go.gif") center left no-repeat;
color:#333;
border:1px #66ff66 solid;
padding-left:44px;
}
/* Class Styles */
.left{
float:left;
}
.right{
float:right;
}
img.left , img.right {
margin:5px 8px;
}
.w50{
width:49%;
}
.blue{
color:#3399cc;
}
.indent{
border-left:3px #3399cc solid;
padding-left:5px;
}
.highlight{
color:#3399cc;
font-weight:bold;
}
/* Form Styles */
form label{
display:block;
}
form input.text, form textarea{
width:375px;
border:2px #dfdfdf solid;
color:#656565;
padding:4px 5px;
font:12px Verdana,Arial,san-serif;
}
form input.text:hover, form textarea:hover{
border:2px #656565 solid;
}
form input.text:focus, form textarea:focus{
border:2px #3399cc solid;
color:#333;
}
form input.button{
margin-right:8px;
padding:3px 5px;
font:12px Verdana,Arial,san-serif;
}
* html form input.text,
* html form textarea{
border-color:#656565;
color:#333;
}
</style>
<link rel="icon" type="image/gif" href="simplepicture-img/site/favicon.gif"/>
</head>
<body>
<div id="header">
<h1>Simple<span>Picture</span></h1>
</div>
<div id="container">
<div id="inner">
<div id="blurb">
<div class="date">May <span>20<sup>th</sup></span></div>
<!-- For a PHP date use
<?php echo date('M');?> <span><?php echo date('d');?><sup><?php echo date('S');?></sup></span>
-->
<div class="blurb">
<h3>A Quick Little Blurb About Licensing</h3>
<p><img src="simplepicture-img/camera.jpg" alt="" class="right"/> This template is released under the <a target="_blank" href="http://creativecommons.org/licenses/by-sa/2.5/"> Creative Commons Attribution 2.5 License</a>, so you are free to
use this template however you want under the condition that
you give me credit by leaving the attribution in the footer.
For more details on the license visit Creative Commons.. </p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Sed eleifend erat id lacus. Curabitur vel metus. Mauris aliquam
placerat leo. In ullamcorper placerat tellus. Aenean laoreet
tempus arcu. Vestibulum bibendum risus non lectus. Phasellus
consectetuer arcu at lectus. Donec consectetuer laoreet odio.
Fusce luctus nonummy mi. Nunc mollis nisi eget tellus. Suspendisse
potenti. In ullamcorper placerat. <a href="http://www.free-css.com/">More »</a> </p>
</div>
</div>
<div id="nav">
<h1>Menu</h1>
<ul>
<li><a href="http://www.free-css.com/" class="current">Home</a></li>
<li><a href="tags.php">Tags</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
<li><a href="http://www.free-css.com/">Portfolio</a></li>
<li><a href="http://www.free-css.com/">Gallery</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
</ul>
</div>
<div id="content">
<h1>Panoramic</h1>
<p> Lorem ipsum dolor sit amet, <a href="http://www.free-css.com/">consectetuer</a> adipiscing elit. Maecenas
sed diam a lorem tempus pellentesque. Duis sed nisi. Curabitur fermentum,
massa ut faucibus feugiat, nisl nulla dapibus mauris, ac malesuada
libero enim tincidunt purus. Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia Curae; Sed quis orci dapibus
nibh consectetuer pharetra. Ut interdum nibh eu dui. Maecenas in justo.
Nulla facilisi. Morbi urna est, aliquet at, tristique at, ultrices eu,
pede. Duis rhoncus ornare elit. Etiam auctor tortor in lectus. </p>
<h2>SnapShot</h2>
<p> Morbi bibendum ligula non arcu. Etiam tortor. Phasellus imperdiet
nibh. Etiam accumsan. Phasellus nibh diam, gravida quis, euismod at,
vehicula vel, ante. Donec luctus adipiscing risus. Sed libero. Nulla
ut felis. Ut lacus. Integer feugiat posuere elit. Quisque porttitor
posuere purus. Pellentesque ante dolor, vulputate placerat, ornare ac,
suscipit vel, metus. Nullam ultricies facilisis metus. Integer ut metus
in massa condimentum elementum. Cras nonummy, mi sit amet ultricies
semper, arcu mauris <a href="http://www.free-css.com/">ullamcorper</a> dolor, vitae tincidunt ligula sem
eget velit. Suspendisse purus urna, ornare a, auctor vel, auctor
vel, pede. </p>
<h3>Click</h3>
<p> Aliquam pretium, augue quis tristique pellentesque, magna orci
sollicitudin magna, non faucibus nisl diam <a href="http://www.free-css.com/">et ipsum</a>. Vestibulum
nec elit. Quisque dignissim elementum dolor. Cras viverra, nisi
eget sollicitudin bibendum, felis arcu sollicitudin metus, quis
pulvinar arcu tellus sed justo. Morbi semper. Sed auctor. Vivamus
orci diam, tincidunt sit amet, aliquam ac, mollis accumsan, nulla.
Ut odio velit, fermentum sed, posuere a, condimentum in, urna. Praesent
vel leo at mi pellentesque pulvinar. Phasellus dignissim eros nec mi. </p>
<h4>Point and Shoot</h4>
<p> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Maecenas risus. Quisque malesuada, neque ut
aliquet dapibus, lectus <a href="http://www.free-css.com/">ligula</a> porttitor dui, non faucibus tellus
risus eu sem. Vestibulum interdum dictum lacus. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Morbi et nisl in justo sodales molestie. Sed vel mi non
odio dictum mattis. Maecenas luctus tincidunt est. Nam id eros.
Etiam nisl lacus, vehicula at, rutrum sed, suscipit at, nisl.
In tellus dolor, vestibulum sed, semper id, rhoncus at, nisi.
Integer semper dictum lacus. Sed posuere metus eget ante. </p>
</div>
<div class="clearboth"></div>
</div>
</div>
<div id="footer">
<div class="left">Copyright © <a href="http://www.free-css.com/">Yourcompany.com</a></div>
<div class="right">Design by <a href="http://realalibi.com/">Ben Goldman</a></div>
<div class="clearboth"></div>
</div>
</body>
</html>
Related examples in the same category