freestyle
<!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>Free Style</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type='text/css'>
/* CSS Document */
body{
background:url(freestyle-img/bg.jpg) repeat-y center top #000;
text-align:center;
margin:0;
padding:0;
}
#container{
background:url(freestyle-img/full.jpg) repeat-y top left #000;
width:720px;
min-height:700px;
margin:auto;
font:12px Arial, Helvetica, sans-serif;
}
#content{
background:url(freestyle-img/middle.jpg) no-repeat top right transparent;
width:434px;
color:#DDD;
text-align:left;
padding-top:1px;
padding-bottom:1px;
height:100%;
}
#content h1{
border-top:4px solid #FFF000;
color:#FFF;
font:22px "Arial Black", Arial, Helvetica, sans-serif;
text-transform:uppercase;
letter-spacing:-1px;
margin:30px 60px 0 30px;
line-height:28px;
}
#content h3{
background-color:#FFF000;
color:#000;
font:13px "Arial Black", Arial, Helvetica, sans-serif;
text-transform:uppercase;
letter-spacing:-1px;
margin:0 60px 10px 30px;
padding-left:4px;
line-height:18px;
}
#content p{
font:12px Arial, Helvetica, sans-serif;
line-height:20px;
letter-spacing:1px;
margin:10px 50px 10px 30px;
}
#content a,#footer a{
color:#FFF000;
text-decoration:none;
font-weight:900;
}
#content a:hover,#footer a:hover{
color:#ED145A;
text-decoration:none;
}
#content b{
color:#FFF;
font:13px "Arial Black", Arial, Helvetica, sans-serif;
font-weight:600;
}
#content em,#content i{
color:#FFF;
font:13px Georgia, Times, serif;
font-style:italic;
}
#content blockquote{
width:70%;
margin-left:50px;
background-color:#222;
border-top:2px solid #FFF000;
border-bottom:2px solid #FFF000;
}
#content blockquote p{
margin:5px 10px;
color:#FFF;
}
#content img{
border:2px solid #FFF000;
padding:3px;
}
#content img.l_blog{
float:left;
margin:4px 8px 4px 0;
}
#content img.r_blog{
float:right;
margin:4px 10px 4px 8px;
}
#content a:hover img{border-color:#ED145A;}
#content ul,#content ol{
list-style-position:inside;
line-height:20px;
letter-spacing:1px;
}
#content ul{
list-style-image:url(freestyle-img/bullet.gif);
}
#content .blogfoot{
margin:10px 50px 10px 30px;
border-left:4px solid #FFF000;
padding-left:4px;
}
#content .foot_top{
font:11px Arial, Helvetica, sans-serif;
}
#content .foot_bottom{
font:12px Arial, Helvetica, sans-serif;
font-weight:900;
text-transform:uppercase;
letter-spacing:1px;
}
#content .foot_top a{
font:11px Arial, Helvetica, sans-serif;
}
#rightside{
float:right;
width:286px;
min-height:700px;
}
#title{
background:url(freestyle-img/title.jpg) no-repeat top left transparent;
height:372px;
}
#title p{
margin:0 0 12px 0;
color:#FFF;
font:62px "Arial Black", Arial, Helvetica, sans-serif;
font-weight:900;
text-transform:uppercase;
padding:80px 20px 0 0;
line-height:45px;
letter-spacing:-6px;
}
#sidebar{
height:100%;
margin:-16px 0 0 -30px;
color:#FFF;
font:12px Arial, Helvetica, sans-serif;
letter-spacing:1px;
text-align:left;
padding:0 40px;
}
#sidebar h1{
border-top:4px solid #FFF000;
color:#FFF;
font:22px "Arial Black", Arial, Helvetica, sans-serif;
text-transform:uppercase;
letter-spacing:-1px;
margin:30px 0 0 0;
line-height:28px;
}
#sidebar h3{
background-color:#FFF000;
color:#ED145A;
font:13px "Arial Black", Arial, Helvetica, sans-serif;
text-transform:uppercase;
letter-spacing:-1px;
margin:0 0 10px 0;
padding-left:4px;
line-height:18px;
}
#sidebar p{
line-height:16px;
padding:4px 4px 4px 10px;
margin:-10px 0 0 0;
width:214px;
border:4px solid #FFF000;
border-top:none;
}
#sidebar a{
color:#FFF000;
font-weight:900;
text-decoration:none;
}
#sidebar a:hover{
color:#000;
}
#sidebar .nav{
list-style-position:inside;
list-style-type:none;
font:22px "Arial Black", Arial, Helvetica, sans-serif;
text-transform:uppercase;
letter-spacing:-1px;
padding-left:0;
margin-left:0;
}
#sidebar .nav a{
color:#FFF;
text-decoration:none;
background:url(freestyle-img/star1.jpg) no-repeat center left;
padding:0 0 0 30px;
}
#sidebar .nav a:hover{
color:#FFF000;
background:url(freestyle-img/star2.jpg) no-repeat center left;
}
#gallery{
padding:0;
margin:-10px 0 0 0;
list-style-type:none;
overflow:hidden;
width:228px;
height:380px;
border:4px solid #FFF000;
border-top:none;
background-color:#ED145A;
}
#gallery li a{
display:block;
height:30px;
width:218px;
text-decoration:none;
color:#FFF;
overflow:hidden;
padding-left:10px;
}
#gallery li a:hover{
background-color:#FFF000;
height:180px;
color:#333;
}
#gallery b{
text-transform:uppercase;
font:13px "Arial Black", Arial, Helvetica, sans-serif;
font-weight:600;
letter-spacing:-1px;
}
#gallery .spacer{
line-height:10px;
}
#gallery i{
font-style:normal;
color:#ED145A;
font-weight:900;
}
#footer{
color:#FFF;
height:288px;
padding:20px 0 25px 0;
margin-right:-40px;
background:url(freestyle-img/footer.gif) no-repeat bottom right transparent;
text-align:left;
}
#footer p{
padding:0 30px;
}
#footer .footer_links{
clear:both;
float:left;
width:100%;
margin-bottom:40px;
}
#footer ul{
float:left;
list-style-type:none;
width:160px;
margin:1px 0;
}
#footer li.top_link{
display:block;
color:#DDD;
padding:10px 0;
margin:-1px 0;
font:13px "Arial Black", Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-decoration:none;
letter-spacing:1px;
background-color:#000;
}
#footer li a{
display:block;
height:15px;
color:#777;
font-weight:normal;
padding:10px 10px;
margin:-1px 0;
text-decoration:none;
letter-spacing:1px;
background-color:#0F0F0F;
border-top:1px solid #555;
border-bottom:1px solid #555;
}
#footer li a:hover{
background-color:#252525;
color:#ED145A;
}
#footer .rf_item{
padding:0 6px;
}
</style>
<!--[if lte IE 6]>
<style>
#content{margin-left:-40px;}
#rightside{margin-right:0px;margin-left:-43px;}
#sidebar{margin-left:-30px;padding:0 40px 0 40px;}
#sidebar ul.nav{margin:10px -20px;padding:0}
#sidebar h1,#sidebar h3{margin-right:-30px;}
#content ul{padding-left:20px;list-style-position:outside;}
#footer ul{margin-left:20px;}
#footer li{margin:-1 0;}
#footer .footer_links{margin-bottom:0;padding-bottom:1px;}
#footer li.top_link{padding-bottom:20px;}
#footer .ie_foot{position:relative;top:20px;}
</style>
<![endif]-->
<!--[if IE 7]>
<style>
#sidebar{margin-left:-20px;padding:0 60px 0 20px;}
#sidebar ul.nav{margin:0 -20px;padding:0}
#sidebar h1,#sidebar h3{margin-right:-30px;}
#content ul{padding-left:20px;list-style-position:outside;}
#footer ul{margin-left:40px;}
#footer li a{margin:-1px 0 0 0;}
#footer .footer_links{margin-bottom:0;}
#footer .ie_foot{position:relative;top:30px;}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="rightside">
<div id="title">
<p>free style</p>
</div>
<div id="sidebar">
<ul class="nav">
<li><a href="http://www.free-css.com/">home page</a></li>
<li><a href="http://www.free-css.com/">cool links</a></li>
<li><a href="http://www.free-css.com/">my artwork</a></li>
<li><a href="http://www.free-css.com/">calendar</a></li>
<li><a href="http://www.free-css.com/">contact me</a></li>
</ul>
<img src="freestyle-img/star2.jpg" alt="star" style="display:none"/>
<h1>recent updates</h1>
<h3>last updated: 10/31/06</h3>
<ul id="gallery">
<li><a href="http://www.free-css.com/"><b>First news item</b><br />
<span class="spacer"> </span><br />
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <i>Read More...</i></span></a></li>
<li><a href="http://www.free-css.com/"><b>October surprise</b><br />
<span class="spacer"> </span><br />
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <i>Read More...</i></span></a></li>
<li><a href="http://www.free-css.com/"><b>don't forget to vote</b><br />
<span class="spacer"> </span><br />
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <i>Read More...</i></span></a></li>
<li><a href="http://www.free-css.com/"><b>hover news rocks!</b><br />
<span class="spacer"> </span><br />
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <i>Read More...</i></span></a></li>
<li><a href="http://www.free-css.com/"><b>OWD gets an update</b><br />
<span class="spacer"> </span><br />
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <i>Read More...</i></span></a></li>
<li><a href="http://www.free-css.com/"><b>use as link list</b><br />
<span class="spacer"> </span><br />
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <i>Read More...</i></span></a></li>
<li><a href="http://www.free-css.com/"><b>Taking names</b><br />
<span class="spacer"> </span><br />
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <i>Read More...</i></span></a></li>
<li><a href="http://www.free-css.com/"><b>keep it under 8 items</b><br />
<span class="spacer"> </span><br />
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <i>Read More...</i></span></a></li>
</ul>
<h1>side item</h1>
<h3>a note, form, or ad</h3>
<p>This template is valid <a href="http://validator.w3.org/check?uri=referer">XHTML</a> 1.0 Strict and the <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> file validates as well. It has been released under the Creative Commons Attribution v2.5 license. If you use this template, please keep a link to me on the site. Thank you.</p>
</div>
</div>
<div id="content">
<h1>welcome to my blog</h1>
<h3>by michael on october 31, 2006</h3>
<p>This template was inspired by some artist friends of mine and I hope you find it useful. You can replace the title to the left by changing the text in the HTML or by using a bitmap <a href="http://adobe.com">graphics application</a> to modify the background graphic and add your own styled text.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh. Vivamus viverra. Nullam turpis. Vestibulum sed etiam. Euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<div class="blogfoot"><span class="foot_top">Filed under: <a href="http://www.free-css.com/">Templates</a>, <a href="http://www.free-css.com/">Technology</a>, <a href="http://www.free-css.com/">Latin</a>, <a href="http://www.free-css.com/">Web-Design</a></span><br />
<span class="foot_bottom"> <a href="http://www.free-css.com/">permalink</a> | <a href="http://www.free-css.com/">comments</a></span></div>
<h1>bold and em styles</h1>
<h3>by michael on october 26, 2006</h3>
<p><img src="freestyle-img/skate.jpg" alt="Skater" class="l_blog" />If you need to make more room for the blog titles and keep them on one line, simply adjust the size of the #content H1 style. Bold text looks <b>like this</b>. It's 'Arial Black' and #FFF just like the title and the headers, however, if the person viewing the site removed 'Arial Black' then the font-weight:600 property will take care of bolding it as much as possible.</p>
<p>Emphesized or italisized text looks <em>like this</em>. I don't think the look of Arial's italics stands out, so I usually swap it out with Georgia.</p>
<div class="blogfoot"><span class="foot_top">Filed under: <a href="http://www.free-css.com/">Templates</a>, <a href="http://www.free-css.com/">Technology</a>, <a href="http://www.free-css.com/">Latin</a>, <a href="http://www.free-css.com/">Web-Design</a></span><br />
<span class="foot_bottom"> <a href="http://www.free-css.com/">permalink</a> | <a href="http://www.free-css.com/">comments</a></span></div>
<h1>hover news & quotes</h1>
<h3>by michael on october 18, 2006</h3>
<p> <a href="http://www.free-css.com/"><img src="freestyle-img/skate.jpg" alt="Skater" class="r_blog" /></a>Right under the navigation menu to the right you will see a heading called Recent Updates. If you hover over the news items a short summary will pop up and allow you to click to get to another page. You can use this as a link list giving people a short description of what your link is about. I learned the technique from Stu at <a href="http://www.free-css.com/">CSS Play</a>. The original demo was to display a small photo gallery this way but I adapted it for text.</p>
<blockquote>
<p>This is what quoted text looks like. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</blockquote>
<div class="blogfoot"><span class="foot_top">Filed under: <a href="http://www.free-css.com/">Templates</a>, <a href="http://www.free-css.com/">Technology</a>, <a href="http://www.free-css.com/">Latin</a>, <a href="http://www.free-css.com/">Web-Design</a></span><br />
<span class="foot_bottom"> <a href="http://www.free-css.com/">permalink</a> | <a href="http://www.free-css.com/">comments</a></span></div>
<h1>and don't forget lists</h1>
<h3>by michael on october 2, 2006</h3>
<p>This is just a simple unordered list with a small 9×9 transparent 2-color gif in the shape of a diamond. It lists the browsers I tested this template with.</p>
<ul>
<li>Firefox 1.5-2.0 (Mac & PC)</li>
<li>Safari 2.0.4</li>
<li>Internet Explorer 6 & 7</li>
<li>Opera 9.02 (Mac & PC)</li>
</ul>
<p>The ordered list shared most of the same propertties save for the list item image above.</p>
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipisicing elit</li>
<li>Sed diam nonummy nibh</li>
<li>Vivamus viverra. Nullam turpis</li>
</ol>
<div class="blogfoot"><span class="foot_top">Filed under: <a href="http://www.free-css.com/">Templates</a>, <a href="http://www.free-css.com/">Technology</a>, <a href="http://www.free-css.com/">Latin</a>, <a href="http://www.free-css.com/">Web-Design</a></span><br />
<span class="foot_bottom"> <a href="http://www.free-css.com/">permalink</a> | <a href="http://www.free-css.com/">comments</a></span></div>
</div>
<div id="footer">
<div class="footer_links">
<ul>
<li class="top_link">my links</li>
<li><a href="http://www.free-css.com/">digg.com</a></li>
<li><a href="http://www.free-css.com/">Slashdot</a></li>
<li><a href="http://www.free-css.com/">wikipedia</a></li>
<li><a href="http://www.free-css.com/">Open Web Design</a></li>
<li><a href="http://www.free-css.com/">topleft pixel</a></li>
<li><a href="http://www.free-css.com/">Apple</a></li>
</ul>
<ul>
<li class="top_link">web Design</li>
<li><a href="http://www.free-css.com/">CSS Play</a></li>
<li><a href="http://www.free-css.com/">Squidfingers</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 class="ie_foot">
<p><span class="rf_item">© 2006 www.yourwebsite.com</span> | <span class="rf_item"><a href="http://validator.w3.org/check?uri=referer">XHTML</a> 1.1</span> | <span class="rf_item">Valid <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a></span> | <span class="rf_item">Design by Tony Pires</span></p>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category