widgetlike
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
Name : WidgetLike
Description: A two-column, fixed-width design featuring black content area background.
Version : 1.0
Released : 20081016
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>WidgetLike by Free CSS Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type='text/css'>
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
* {
margin: 0;
padding: 0;
}
body {
margin: 0px;
background: #002F43 url(widgetlike-images/bg01.jpg) repeat-x;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 11px;
color: #B9B9B9;
}
h1, h2, h3 {
margin-bottom: 1.5em;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1em;
}
p, ul, ol {
margin-bottom: 1.5em;
line-height: 180%;
}
ul, ol {
margin-left: 3em;
}
blockquote {
margin-left: 3em;
margin-right: 3em;
}
a {
color: #8AC800;
}
a:hover {
text-decoration: none;
}
strong {
color: #D7D7D7;
}
img.left {
float: left;
margin: 5px 25px 0px 0px;
}
img.right {
float: right;
margin: 5px 0px 0px 25px;
}
/* Background */
#bg1 {
background: url(widgetlike-images/bg02.jpg) no-repeat center top;
}
#bg2 {
background: url(widgetlike-images/bg03.jpg) no-repeat center top;
}
#bg3 {
background: url(widgetlike-images/bg04.jpg) repeat-y center top;
}
#bg4 {
background: url(widgetlike-images/bg05.jpg) no-repeat center top;
}
#bg5 {
background: url(widgetlike-images/bg06.jpg) no-repeat center bottom;
}
/* Header */
#header {
width: 900px;
height: 145px;
margin: 0px auto;
text-transform: lowercase;
color: #FFFFFF;
}
#header h1 {
float: left;
margin: 0px;
padding: 70px 0px 0px 25px;
font-size: 40px;
}
#header h1 sup {
font-weight: normal;
}
#header h2 {
float: right;
margin: 0px;
padding: 95px 25px 0px 0px;
font-size: 14px;
}
#header a {
text-decoration: none;
color: #FFFFFF;
}
/* Header2 */
#header2 {
width: 900px;
height: 88px;
margin: 0px auto;
}
/* Menu */
#menu {
float: left;
}
#menu ul {
margin: 0px;
padding: 34px 0px 0px 0px;
list-style: none;
text-transform: lowercase;
}
#menu li {
float: left;
}
#menu a {
padding-left: 50px;
text-decoration: none;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
}
/* Search */
#search {
float: right;
}
#search form {
margin: 0px;
padding: 35px 80px 0px 0px;
}
#search fieldset {
margin: 0px;
padding: 0px;
border: none;
}
#search input.text {
width: 160px;
background: none;
border: none;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #AEC38B;
}
#search input.button {
display: none;
}
/* Page */
#page {
width: 846px;
margin: 0px auto;
padding: 40px 0px 0px 0px;
}
/* Content */
#content {
float: left;
width: 583px;
}
.post {
}
.post .title {
height: 49px;
background: url(widgetlike-images/img02.gif) no-repeat;
}
.post .title h2 {
float: left;
padding: 12px 0px 0px 24px;
font-size: 24px;
text-transform: lowercase;
}
.post .title h2 a {
text-decoration: none;
color: #FFFFFF;
}
.post .title h2 a:hover {
color: #8AC800;
}
.post .title p {
float: right;
padding: 12px 24px 0px 0px;
font-size: 15px;
font-weight: bold;
color: #343434;
}
.post .entry {
padding: 30px 23px 0px 23px;
}
.post .meta {
height: 70px;
clear: left;
margin: 0px 23px;
padding: 15px 0px 0px 0px;
border-top: 1px solid #262626;
}
.post .meta .credit {
float: left;
}
.post .meta .links {
float: right;
}
.post .meta .links .more {
padding-left: 17px;
background: url(widgetlike-images/img05.gif) no-repeat left center;
}
.post .meta .links .comments {
padding-left: 19px;
background: url(widgetlike-images/img04.gif) no-repeat left center;
}
/* Sidebar */
#sidebar {
float: right;
width: 236px;
}
#sidebar ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#sidebar li {
background: url(widgetlike-images/img03.gif) no-repeat;
padding: 0px 23px 20px 23px;
}
#sidebar li ul {
}
#sidebar li li {
padding: 8px 0px;
background: none;
border-bottom: 1px solid #262626;
}
#sidebar h2 {
margin: 0px;
padding: 16px 0px 30px 0px;
text-transform: lowercase;
font-size: 14px;
color: #FFFFFF;
}
/* Footer */
#footer {
}
#footer p {
margin: 0px;
padding: 20px 0px;
text-align: center;
text-transform: lowercase;
color: #566D77;
}
#footer a {
color: #8097A1;
}
</style>
</head>
<body>
<div id="bg1">
<div id="header">
<h1><a href="#">WidgetLike<sup>1.0</sup></a></h1>
<h2>By <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a> + <a href="http://www.freecsstemplates.org/">FreeCSSTemplates</a></h2>
</div>
<!-- end #header -->
</div>
<!-- end #bg1 -->
<div id="bg2">
<div id="header2">
<div id="menu">
<ul>
<li><a href="#">Photos</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Friends</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- end #menu -->
<div id="search">
<form method="get" action="#">
<fieldset>
<input type="text" name="q" value="search keywords" id="q" class="text" />
<input type="submit" value="Search" class="button" />
</fieldset>
</form>
</div>
<!-- end #search -->
</div>
<!-- end #header2 -->
</div>
<!-- end #bg2 -->
<div id="bg3">
<div id="bg4">
<div id="bg5">
<div id="page">
<div id="content">
<div class="post">
<div class="title">
<h2><a href="#">Lorem ipsum dolor</a></h2>
<p>10.14.08</p>
</div>
<div class="entry"> <img src="widgetlike-images/img01.jpg" alt="" width="150" height="102" class="left" />
<p>Widgetlike is a free template by <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a> and <a href="http://www.freecsstemplates.org/">Free CSS Templates</a> released under a <a href="#">Creative Commons Attribution 2.5 License</a>. The photo to the left is from <a href="http://www.pdphoto.org/">PDPhoto.org</a>. You're free to use this template for both commercial or personal use. I only ask that you link back to <a href="http://www.nodethirtythree.com/">my site</a> in some way. Note: This is also available as a <a href="http://www.freewpthemes.net/preview/widgetlike">WordPress theme</a>.</p>
</div>
<div class="meta">
<p class="credit">Posted by <a href="#">Someone</a> on October 14, 2008</p>
<p class="links"><a href="#" class="comments">Comments (18)</a> <a href="#" class="more">Read more</a></p>
</div>
</div>
<div class="post">
<div class="title">
<h2><a href="#">Blandit veroeros</a></h2>
<p>10.11.08</p>
</div>
<div class="entry">
<p>Sed vel quam. Vestibulum pellentesque. Morbi sit amet magna ac lacus dapibus interdum. Donec pede nisl, gravida iaculis, auctor vitae, bibendum sit amet, mauris. Cras adipiscing libero et risus. Donec rutrum tempus massa. Proin at mauris <a href="#">sed elit venenatis</a> porttitor. Morbi quam nisl, fringilla quis, sagittis nec, adipiscing at, elit. Maecenas sed sem sit amet lectus mattis molestie. Integer quis eros lorem ipsum dolor sit amet veroeros consequat.</p>
</div>
<div class="meta">
<p class="credit">Posted by <a href="#">Someone</a> on October 11, 2008</p>
<p class="links"><a href="#" class="comments">Comments (18)</a> <a href="#" class="more">Read more</a></p>
</div>
</div>
</div>
<!-- end #content -->
<div id="sidebar">
<ul>
<li>
<h2>Tempus aliquam</h2>
<p>Sed vel quam. Vestibulum pellentesque. Morbi sit amet magna ac lacus dapibus interdum. Donec pede nisl, gravida iaculis, auctor vitae, bibendum sit amet aliquam. <a href="#">Read more…</a></p>
</li>
<li>
<h2>Ipsum sed interdum</h2>
<ul>
<li><a href="#">Sed vel quam vestibulum</a></li>
<li><a href="#">Pellentesque morbi sit veroeros</a></li>
<li><a href="#">Magna interdum donec pede</a></li>
<li><a href="#">Nisl gravida iaculis auctor vitae</a></li>
<li><a href="#">Bibendum sit amet mauris cras</a></li>
<li><a href="#">Adipiscing libero et risus donec</a></li>
<li><a href="#">Venenatis porttitor morbi quam</a></li>
</ul>
</li>
</ul>
</div>
<!-- end #sidebar -->
<div style="clear: both; height: 40px;"> </div>
</div>
<!-- end #page -->
</div>
</div>
</div>
<!-- end #bg3 -->
<div id="footer">
<p>(c) 2008 Sitename.com. Design by <a href="http://www.nodethirtythree.com/">nodeThirtyThree</a> + <a href="http://www.freewpthemes.net/">Free CSS Templates</a></p>
</div>
<!-- end #footer -->
</body>
</html>
Related examples in the same category