stark
<!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>stark</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type='text/css'>
/* CSS Document */
body{
font:.8em Arial, Helvetica, sans-serif;
background-color:#FFF;
color:#555;
}
p{
line-height:1.4em;
padding-right:20px;
margin-top:4px;
}
h1,h2,h3,h4,h5{margin-bottom:4px;}
h1{font-size:1.5em;}
h2{font-size:1.4em;}
h3{font-size:1.3em;}
h4{font-size:1.2em;}
h5{font-size:1.1em;}
h6{font-size:1.0em;}
a{
text-decoration:none;
font-weight:bold;
color:#F30;
border-bottom:1px dashed #F30;
}
a:hover{
border-bottom:none;
}
fieldset{
border:none;
padding:0;
margin:0;
}
input,textarea{
border:none;
background-color:#DDD;
color:#555;
font-weight:bold;
padding:4px;
}
#sidebar input{
width:168px;
}
input.formbutton,a.formbutton{
border:none;
margin:0;
padding:0;
background-color:transparent;
text-align:right;
}
a:hover.formbutton input{color:#F30;}
ul,ol{
line-height:1.4em;
list-style-position:outside;
}
ul{
list-style-image:url(stark-img/bullet.gif);
}
blockquote{
background:url(stark-img/bq.gif) left top no-repeat transparent;
padding:0 10px;
}
img{border:1px solid #555;}
a:hover img{border:1px solid #F30;}
img.l{
float:left;
margin:4px 10px 4px 0;
}
img.r{
float:right;
margin:4px 0 4px 10px;
}
#container{
width:700px;
margin:0;
margin-left: auto;
margin-right: auto;
}
#menu{
padding:4px;
margin:0 0 10px 0;
text-align:right;
}
#menu ul{
list-style-type:none;
clear:both;
margin:0 0 2px 0;
}
#menu li{
display:inline;
border:1px solid #555;
padding:3px 1px;
font-size:.8em;
text-transform:uppercase;
}
#menu li a{
text-decoration:none;
color:#FFF;
background-color:#555;
padding:2px 10px;
border-bottom:none;
}
#menu a.current{background-color:#333;}
#menu a:hover,.sidelinks a:hover{background-color:#F30;color:#FFF}
.sidelinks{
margin-left:-40px;
list-style-type:none;
list-style-image:none;
line-height:1em;
}
.sidelinks li{
border:1px solid #555;
padding:1px 1px;
margin-bottom:2px;
font-size:.9em;
}
.sidelinks li a{
display:block;
text-decoration:none;
color:#FFF;
background-color:#555;
padding:2px 10px;
border-bottom:none;
}
#banner{
background:url(stark-img/banner.gif) center right no-repeat transparent;
margin:-10px 0 0 0;
padding:4px;
border-bottom:1px solid #888;
border-left:1px solid #888;
}
#banner h4{margin:0;padding:0;}
#banner .lighter_banner{font-weight:100;font-size:80%}
#content{
background:url(stark-img/bg.gif) top right no-repeat transparent;
border-right:1px solid #888;
padding:0 0 20px 0;
width:520px;
background-color:#FFF;
min-height:500px;
}
#sidebar{
float:right;
width:170px;
margin:0;
padding:0;
background-color:transparent;
}
#sidebar p{
margin-right:-20px;
}
#footer{
background:url(stark-img/footer.gif) top left repeat-y transparent;
clear:both;
padding:5px;
background-color:#FFF;
border-top:1px solid #888;
padding-bottom:0;
text-align:right;
}
#footer p{line-height:1.5em;margin:0}
</style>
<!--[if gte IE 5]>
<style>
#menu li{padding:1px;margin:0 2px;}
#menu li a{margin-right:-3px;}
#banner{margin:0;}
#content{width:510px}
#sidebar{padding-left:10px;}
#container{position:relative;top:-15px;}
.sidelinks{margin-left:0;}
#footer{position:relative;bottom:-20px;}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="banner">
<h4>stark / <span class="lighter_banner">simpler than the sum of its parts</span></h4>
</div>
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/" class="current">home</a></li>
<li><a href="http://www.free-css.com/">about</a></li>
<li><a href="http://www.free-css.com/">links</a></li>
<li><a href="http://www.free-css.com/">gallery</a></li>
<li><a href="http://www.free-css.com/">contact</a></li>
</ul>
</div>
<div id="sidebar">
<h3>search</h3>
<div>
<form action="#">
<fieldset>
<input type="text" name="search" size="0" />
<br />
<a href="http://www.free-css.com/" class="formbutton">
<input type="submit" value="» go" class="formbutton" />
</a>
</fieldset>
</form>
</div>
<h3>sidebar item</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In pulvinar. Cras nisl. Ut at arcu. Cras lectus justo, aliquet nec, commodo sit amet, iaculis quis, nisl.</p>
<h3>my links</h3>
<ul class="sidelinks">
<li><a href="http://www.free-css.com/">Open Web Design</a></li>
<li><a href="http://www.free-css.com/">Squidfinger</a></li>
<li><a href="http://www.free-css.com/">Kollermedia</a></li>
<li><a href="http://www.free-css.com/">CSS Play</a></li>
<li><a href="http://www.free-css.com/">Kaliber 10K</a></li>
<li><a href="http://www.free-css.com/">Photoshop Star</a></li>
<li><a href="http://www.free-css.com/">A List Apart</a></li>
<li><a href="http://www.free-css.com/">Fractured Sanity</a></li>
</ul>
</div>
<div id="content">
<h4>welcome to my stark world</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In pulvinar. Cras nisl. Ut at arcu. Cras lectus justo, aliquet nec, commodo sit amet, iaculis quis, nisl. Integer vitae sem ac ligula fermentum egestas. Proin a magna ac <a href="http://www.free-css.com/">ante malesuada</a> cursus. Fusce justo massa, eleifend ut, molestie vel, rutrum et, enim. Nulla dignissim sem in urna. In viverra eros at nisi. Suspendisse id mi. Aliquam erat volutpat. Sed egestas bibendum elit. Nulla vel leo sit amet sem varius pellentesque. Nam ut nisi vel risus posuere egestas.</p>
<h4>this is a second header showing a floating image</h4>
<p> <a href="http://www.free-css.com/"><img src="stark-img/tree.gif" class="l" alt="Tree" /></a>In vitae pede non ligula scelerisque pellentesque. Pellentesque id arcu. Nulla convallis est quis orci. Vestibulum massa. Phasellus sit amet libero ut dui varius eleifend. Proin ut dui non lacus feugiat auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Morbi eu enim. Praesent aliquam. Aenean elementum metus a mi sagittis eleifend. Phasellus aliquam, dolor eu accumsan accumsan, magna libero cursus velit, non adipiscing nibh nisi vel leo. Aliquam libero. Nullam lobortis nibh sed purus. Suspendisse dolor enim, ultricies sed, euismod et, ullamcorper a, lacus. Nam egestas dolor nec nulla. Aenean consectetuer ullamcorper eros. Quisque pulvinar cursus tellus. Maecenas adipiscing congue lectus. Pellentesque molestie lacus ac felis. Donec eu lacus.</p>
<h4>trying out an unordered list</h4>
<p>Aliquam erat volutpat.Donec ante est, congue nec, suscipit sagittis, rutrum a, metus. Vivamus vestibulum leo. Maecenas vel sem id orci dictum ullamcorper. Curabitur interdum tempor nibh. <b>Curabitur</b> magna purus, malesuada in, adipiscing eget, facilisis sed, nibh. In a ipsum id neque condimentum rhoncus. Fusce leo nisl, suscipit a, porta sed, nonummy id, neque. Quisque sed leo molestie arcu varius hendrerit. Donec eget erat. Fusce mattis elementum lorem.</p>
<ul>
<li>Firefox 1.5-2.0</li>
<li>Safari 2.0.4</li>
<li>Internet Explorer 6 & 7</li>
<li>Opera 9.0.2</li>
</ul>
<h4>want to see a blockquote?</h4>
<p>Nulla convallis est quis orci. Vestibulum massa. Aliquam erat volutpat.Donec ante est, congue nec, suscipit sagittis, rutrum a, metus. Vivamus vestibulum leo. Maecenas vel sem id orci dictum ullamcorper. Curabitur interdum tempor nibh. Curabitur magna purus, malesuada in, adipiscing eget, facilisis sed, nibh.</p>
<blockquote>
<p>In a ipsum id neque condimentum rhoncus. Fusce leo nisl, suscipit a, porta sed, nonummy id, neque. Quisque sed leo molestie arcu varius hendrerit. Donec eget erat. Fusce mattis elementum lorem.Maecenas vel sem id orci dictum ullamcorper. Curabitur interdum tempor nibh. Curabitur magna purus, malesuada in, adipiscing eget, facilisis sed, nibh.</p>
</blockquote>
<p>Pellentesque molestie lacus ac felis. Donec eu lacus.Aliquam erat volutpat.Donec ante est, congue nec, suscipit sagittis, rutrum a, metus. Vivamus vestibulum leo. Maecenas vel sem id orci dictum ullamcorper. Curabitur interdum tempor nibh. Curabitur magna purus, malesuada in, adipiscing eget, facilisis sed, nibh.</p>
<h4>web standards are important</h4>
<p>That's why I ensure that my templates are <a href="http://validator.w3.org/check?uri=referer">XHTML</a> valididated and have valid <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> as well. I also test in a variety of browsers (see the unordered list example above for a list of browsers I test on) on Mac and Windows platforms. Unfortunately, I do not have access to a Linux box for testing but that's aother good reason to adhere to web standards; if it looks good on a browser on the Mac or Windows, then it will look equally good on the same browser in another operating system.</p>
<p>Pellentesque molestie lacus ac felis. Donec eu lacus.Aliquam erat volutpat.Donec ante est, congue nec, suscipit sagittis, rutrum a, metus. Vivamus vestibulum leo. Maecenas vel sem id orci dictum ullamcorper. Curabitur interdum tempor nibh. Curabitur magna purus, malesuada in, adipiscing eget, facilisis sed, nibh. In a ipsum id neque condimentum rhoncus. Fusce leo nisl, suscipit a, porta sed, nonummy id, neque. Quisque sed leo molestie arcu varius hendrerit. Donec eget erat. Fusce mattis elementum lorem.</p>
</div>
<div id="footer">
<p>© your website name | design by <a href="http://20pirates.com">20pirates</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category