warped
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Warped</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
font: 76.5%/1.6em "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;
color:#aaa;
margin:0;
background:url(warped-images/body_bg.jpg) top repeat-x #333;
}
* {
margin:0;
padding:0;
}
.clear {
clear:both;
}
#header {
height:93px;
background:url(warped-images/header_bg.jpg) left no-repeat;
}
#header h1 {
font:380% Century Gothic;
color:#fff;
font-weight:bold;
padding:13px 20px 0 20px;
letter-spacing:-1px;
}
#header h1.right {
color:#B9204E;
float:right;
}
#header h1 a {
color:#fff;
text-decoration:none;
}
#header h1 a:hover {
border:none;
}
ul#nav {
clear:both;
margin:0;
}
ul#nav li {
float:left;
padding:10px 0;
list-style:none;
}
ul#nav li.right {
float:right;
margin:0 10px 0 0 !important;
margin:0 3px 0 0;
}
ul#nav input {
background:#000;
border:1px solid #333;
font:100% Verdana;
color:#ccc;
padding:2px;
}
ul#nav li a {
padding:10px;
font-weight:bold;
color:#aaa;
text-decoration:none;
margin:0 1px;
background:url(warped-images/nav_a_hover.gif) bottom repeat-x;
}
ul#nav li a:hover {
background:url(warped-images/nav_a_hover.gif) top no-repeat #121212;
color:#fff;
}
ul#nav li a.active {
background:url(warped-images/nav_a_hover.gif) top no-repeat #121212;
color:#fff;
}
#sidebar {
width:270px;
float:right;
background:#333;
margin:1px 0 0 0;
}
#sidebar a {
color:#fff;
}
#sidebar a:hover {
text-decoration:none;
border:none;
}
#sidebar h2 {
font:150% Trebuchet MS;
color:#fff;
}
p.news {
clear:right;
border-bottom:1px solid #3a3a3a;
padding-bottom:20px;
}
#sidebar ul {
margin-left:45px;
}
#sidebar input {
margin:0 0 0 30px;
background:#E13768;
border:1px solid #d02657;
font:100% Verdana;
color:#fff;
padding:4px;
width:200px;
}
p.news .more {
display:block;
text-align:right;
}
#content {
margin:0 270px 0 0;
background:url(warped-images/content.jpg) top right no-repeat;
font-size:120%;
padding:20px;
}
#content h1,h2,h3,h4,h5,p,ul,ol,blockquote {
margin:15px 30px;
}
#content h2 {
font:150% Arial;
color:#fff;
background:url(warped-images/content_h2.gif) left no-repeat;
padding:0 0 0 19px;
margin: 15px 20px 15px 0px;
}
#content h2 a {
color:#fff;
text-decoration:none;
border-bottom:2px solid #222;
}
#content h2 a:hover {
border-bottom:2px solid #E13768;
}
#content strong {
color:#E13768;
background:#222;
padding:1px 4px 3px 4px;
}
#content p {
padding:5px 0;
line-height:28px;
font-size:95%;
}
a {
color:#fff;
font-weight:bold;
text-decoration:none;
}
a:hover {
border-bottom:1px solid #222;
}
#content h3 {
font:130% Trebuchet MS;
color:#fff;
}
.details {
color:#ccc;
border:1px solid #2d2d2d;
background:url(warped-images/details.jpg) right no-repeat #313131;
padding:2px 15px;
margin:10px 10px 50px 25px;
}
.details p {
margin:0;
padding:0;
}
.details p a {
color:#666;
}
blockquote {
border-left:2px solid #2f2f2f;
background:#323232;
}
#content ul li {
margin:10px 10px 10px 15px;
list-style:none;
padding:0 0 0 20px;
background:url(warped-images/bullet.gif) left no-repeat;
}
#content ol.comments {
margin:10px 0 10px 25px;
}
ol.comments a {
color:#E13768;
}
#content ol li {
margin:10px 0 10px 25px;
padding:10px 0;
font:90% Trebuchet MS;
line-height:22px;
}
p.user {
border-bottom:1px solid #2a2a2a;
background:#303030;
}
#content p img {
background:#101010;
padding:1px;
border:3px solid #303030;
}
#footer {
border-top:2px solid #111;
background:#222;
padding:15px;
}
#footer a {
color:#ccc;
}
</style>
</head>
<body>
<div id="header">
<h1 class="right">Warped</h1>
<h1><a href="http://www.free-css.com/">Warped</a></h1>
</div>
<ul id="nav">
<li class="right">
<input value="Search..." type="text" />
</li>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Examples</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
<div class="clear" />
<div id="sidebar">
<h2>Latest News or Comments</h2>
<p class="news"> An example of a "latest news" type text area. Here would be the excerpt of the article. You can of course put anything you like here. <a href="http://www.free-css.com/" class="more">Read More </a> </p>
<p class="news"> An example of a "latest news" type text area. Here would be the excerpt of the article. You can of course put anything you like here. <a href="http://www.free-css.com/" class="more">Read More </a> </p>
<p class="news"> An example of a "latest news" type text area. Here would be the excerpt of the article. You can of course put anything you like here. <a href="http://www.free-css.com/" class="more">Read More </a> </p>
<h2>Sub Navigation</h2>
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Examples</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
<h2>Search</h2>
<input name="" type="text" value="Search..." />
</div>
<div id="content">
<h2><a href="http://www.free-css.com/" id="intro">Introduction</a></h2>
<p> Hello and welcome to <strong>Warped</strong>, a dark, fluid template created by Six Shooter Media. Warped is a simple template making use of standard features; a header, a navigation area, and side column, a main column and a footer. Pink and grey make up the colour scheme it the template aesthetics were inspired by the song 'Warped' by the Red Hot Chili Peppers. </p>
<div class="details">
<p> Posted by <a href="http://www.free-css.com/">User Name</a> on <a href="http://www.free-css.com/">01.01.01.</a> There are <a href="http://www.free-css.com/">25 Comments</a>. </p>
</div>
<h2><a href="http://www.free-css.com/" id="about">About the Author</a></h2>
<p> Hi! My names Jay and I'm a 20 year old web designer from England. My main projects are conducted through my website Six Shooter Media, but I (obviously) also enjoy creating Open Source web templates for general use! You can keep a check on my free templates here which is probably a link worth bookmarking as my templates appear there a couple of weeks before OWD/OSWD due to the design queues. </p>
<div class="details">
<p> Posted by <a href="http://www.free-css.com/">User Name</a> on <a href="http://www.free-css.com/">01.01.01.</a> There are <a href="http://www.free-css.com/">25 Comments</a>. </p>
</div>
<h2><a href="http://www.free-css.com/" id="examples">Some Examples</a></h2>
<p> OK, here I'll just put some example html elements that you will most probably be using in your blog. </p>
<h3>Blockquote Example</h3>
<blockquote>
<p> <em> My tendency<br />
For dependency<br />
Is offending me<br />
It's up-ending me<br />
I'm pretending see<br />
To be strong and free<br />
From my dependency<br />
It's warping me </em> </p>
</blockquote>
<h3>List Example</h3>
<ul>
<li>Here</li>
<li>Is our friend</li>
<li>The list!</li>
</ul>
<h3>Comment Examples</h3>
<ol class="comments">
<li>
<p class="user"><a href="http://www.free-css.com/">User Name</a> remarks:</p>
<p> Comment text here jndfl jsndjaf ndsfn aeufn uisf shelf jsae hej hfliusl huifehsu adlhfjeshflsdl hfaisehfj sdhfljk ashdfjk dshlfajdsjah fjsdlhf sdsd fadsf adsf adsf dsaf adsf dsaf dsf dsaf ads fdsaf dsaf dsf dsafk sadf;klsdjafksdahfjsndajfklnasdjf ndask jfndsajf nsldjanf jksanf ljksadnf ljksnadf jksndafkj sdnajfk sndljkfnsadljfk ndsajkf ndsaljf ndls kfnjahf lsdaf ljsdahf jksahdf hadsfjksdha fjsdhafjkshdafjkshdafjds </p>
</li>
<li class="alt">
<p class="user"><a href="http://www.free-css.com/">User Name</a> remarks:</p>
<p> Comment text here jndfl jsndjaf ndsfn aeufn uisf shelf jsae hej hfliusl huifehsu adlhfjeshflsdl hfaisehfj sdhfljk ashdfjk dshlfajdsjah fjsdlhf sdjahf lsdaf ljsdahf jksahdf hadsfjksdha fjsdhafjkshdafjkshdafjds </p>
</li>
<li>
<p class="user"><a href="http://www.free-css.com/">User Name</a> remarks:</p>
<p> Comment text here jndfl jsasdf ksa fmndsanfjsdanlf jdsanlfk jnsdlafj nsaklfn aksjf nlkasjfn lsnakf jasdnf lksdnf lksjna fjksdanlf ksndaf lkasnf jadsnf lksandf jksdanf jksanf lasdnf lasknf asjdfn lsajfn dsanf jdsanfk jsdfjn jknfsg kljfdnjkgfdsngl fdjn gfdlnsg jfdsnlgsfdjng lkns gsdjfng lfdsng ksnfg jfdsngl jfds ngfdsjgn lfdsng dfslng sjdfn jfds gnlfdjsng ljksfng jksfnlg jkfndsg ljkfsng lkjfng jksfdnl gfdsng jdfsng lkjnsdf gjkfsdn gjfdnslgj nfdsjg nlfdsnk gsjfdng ldfsjng lkjsndg kjsnldg jfdnsg lknsfd gkjnlg kjfndsgkl jnsdfg kjlfndlsgk jfndsljgk nfdsljg nfdlsng lsnd jkfnsg ljkfsn gljdsnfgkj nsfd jkgnsdflg jfdnsgl kjfsndgjknsfdlgk jfndsljgk nfdsgkj nfdlsng lsnfdg jksndf gjksfndgjkfdsng kjfdngl jksndfgkjndfjgk lsdgn dfls ngklsdnkg sndjaf ndsfn aeufn uisf shelf jsae hej hfliusl huifehsu adlhfjeshflsdl hfaisehfj sdhfljk ashdfjk dshlfajdsjah fjsdlhf sdjahf lsdaf ljsdahf jksahdf hadsfjksdha fjsdhafjkshdafjkshdafjds </p>
</li>
<li class="alt">
<p class="user"><a href="http://www.free-css.com/">User Name</a> remarks:</p>
<p> Comment text here jndfl jsndjaf ndsfn aeufn uidfa dsf adsf dsf dsf dsf sadf asdfsf shelf jsae hej hfliusl huifehsu adlhfjeshflsdl hfaisehfj sdhfljk ashdfjk dshlfajdsjah fjsdlhf sdjahf lsdaf ljsdahf jksahdf hadsfjksdha fjsdhafjkshdafjkshdafjds </p>
<p> Comment text here jndfl jsndjaf ndsfn aeufn uisf shsaf asdf sdaf dsaf sdaf sdaf sdaf sda fasdf dsf dasf dsaf sdaf asd fsda fdsaf dsa fdsaf dsf dsaf dsaf dsaf asdf asdf sdaf asdf dsaf dsaf sdaf dsf dsaf dsf dsalkfn dskjf ndalfndasjnf klsdnf jksdnaf lkjdnsaf jksdnaf lksndajf dnslafk jadslf kdnslajfk nsiuasnefuesnjfk dnalfjeufn sujaejk fhsdjafhl easuaf hsiuah ssuehfuisdhfau sfhiushdf jdshaf seihfuelf jsae hej hfliusl huifehsu adlhfjeshflsdl hfaisehfj sdhfljk ashdfjk dshlfajdsjah fjsdlhf sdjahf lsdaf ljsdahf jksahdf hadsfjksdha fjsdhafjkshdafjkshdafjds </p>
</li>
</ol>
<h2><a href="http://www.free-css.com/" id="contact">Contact</a></h2>
<p> If you decide to use this template please drop me a line to let me know! Don't hesitiate to get in touch if your interested in a custom template or just in any of my services in general. I look forward to hearing from you! </p>
<div class="details">
<p> Posted by <a href="http://www.free-css.com/">User Name</a> on <a href="http://www.free-css.com/">01.01.01.</a> There are <a href="http://www.free-css.com/">25 Comments</a>. </p>
</div>
</div>
<div id="footer">
<p>Template design by <a href="http://www.sixshootermedia.com">Six Shooter Media</a>.<br />
All your copyright information here.</p>
</div>
</body>
</html>
Related examples in the same category