tastelessly
<!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 : Tastelessly
Description: A very light design suitable for community sites and blogs.
Version : 1.0
Released : 20080122
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Tastelessly 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: 20px 0;
background: #212B35;
}
body, th, td, input, textarea {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
}
form {
}
fieldset {
}
input, textarea {
font-weight: bold;
}
input.text {
padding: 2px 5px;
background: #F8FAEB;
border-top: 1px solid #4D5719;
border-left: 1px solid #4D5719;
border-right: 1px solid #626456;
border-bottom: 1px solid #626456;
}
input.button {
background: #3C7BCF;
border-top: 1px solid #3C7BCF;
border-left: 1px solid #3C7BCF;
border-right: 1px solid #3C7BCF;
border-bottom: 1px solid #3C7BCF;
color: #FFFFFF;
}
h1, h2, h3 {
margin-top: 1.5em;
color: #626456;
}
h1 {
letter-spacing: -.075em;
font-size: 3em;
}
h2 {
letter-spacing: -.05em;
text-transform: uppercase;
font-size: 1.1em;
font-weight: bold;
color: #8D8E85;
}
h3 {
font-size: 1em;
}
p, ul, ol {
margin-top: 1.5em;
line-height: 1.8em;
font-size: 1.1em;
}
ul, ol {
margin-left: 3em;
}
blockquote {
margin-left: 3em;
margin-right: 3em;
}
a {
text-decoration: none;
color: #3C7BCF;
}
a:hover {
border: none;
}
h1 a, h2 a, h3 a {
border: none;
text-decoration: none;
color: #626456;
}
h1 a:hover, h2 a:hover, h3 a:hover {
background: none;
color: #3C7BCF;
}
hr {
display: none;
}
/* Wrapper */
#wrapper {
}
/* Header */
#header {
width: 980px;
height: 55px;
margin: 0 auto;
}
#menu {
float: left;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
}
#menu a {
display: block;
float: left;
height: 25px;
margin-right: 1px;
padding: 10px 20px 0 20px;
text-decoration: none;
font-size: 1.1em;
font-weight: bold;
color: #8C8F7D;
}
#menu a:hover {
background: #F3F3F3;
color: #2C2E22;
}
#menu .current_page_item a {
background: #F3F3F3;
color: #2C2E22;
}
#search {
float: right;
width: 260px;
padding-top: 7px;
}
#search fieldset {
border: none;
}
#search #s {
width: 160px;
}
#search #x {
width: 80px;
}
/* Logo */
#logo {
width: 978px;
height: 200px;
margin: 0 auto;
background: url(tastelessly-images/img12.jpg) no-repeat left top;
height: 263px;
border: 20px solid #F3F3F3;
}
#logo h1, #logo h2 {
float: left;
margin: 0;
padding: 0;
}
#logo h1 {
padding: 100px 5px 0 20px;
color: #2C2E22;
}
#logo h2 {
padding: 115px 0 0 0;
font-style: italic;
}
#logo p {
clear: left;
margin: 0;
padding: 0 0 0 20px;
line-height: normal;
font-size: 1.2em;
font-weight: bold;
color: #C2C5B1;
}
#logo a {
color: #FFFFFF;
}
/* Page */
#page {
width: 978px;
margin: 0 auto;
padding: 20px 0px 0 0px;
background: #FFFFFF;
border: 20px solid #F3F3F3;
border-top: none;
}
/* Content */
#content {
float: left;
width: 425px;
padding: 0px 0px 0px 20px;
}
.post {
}
.post .title {
margin: 0;
font-weight: normal;
}
.post h1.title {
background: url(tastelessly-images/img18.gif) no-repeat left top;
padding: 15px 0 0 15px;
height: 30px;
font-size: 2.4em;
}
.post .entry {
padding: 0 10px 30px 15px;
}
.post .meta {
margin: 0;
padding: 5px 0px 0px 15px;
background: url(tastelessly-images/img04.gif) repeat-x left bottom;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #CFCFCF;
}
.post .meta a {
color: #CFCFCF;
}
.post .links {
margin: 0;
}
.post .tags {
margin: 0;
text-transform: uppercase;
font-size: .8em;
font-weight: bold;
background: url(tastelessly-images/img04.gif) repeat-x;
}
.post .links a, .post .tags a {
border: none;
}
/* Recent Posts */
#recent-posts {
}
#recent-posts h2 {
margin: 0;
background: url(tastelessly-images/img13.gif) no-repeat left top;
padding: 15px 0 0 15px;
height: 30px;
}
#recent-posts h3 {
margin: 0;
font-size: 13px;
padding: 15px 0 0 15px;
background: url(tastelessly-images/img04.gif) repeat-x left bottom;
}
#recent-posts p {
margin: 0 0 10px 0;
padding: 15px 0 0 15px;
line-height: 22px;
font-size: 13px;
}
/* Sidebars */
.sidebar {
float: left;
}
.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
.sidebar li {
margin-bottom: 2em;
}
.sidebar li ul {
}
.sidebar li li {
margin: 0;
}
.sidebar li h2 {
margin: 0 0 1em 0;
}
#sidebar1 {
width: 230px;
padding: 0px 0px 0px 20px;
}
#sidebar2 {
width: 240px;
padding: 0px 20px 0px 20px;
}
#sidebar2 li h2 {
margin: 0 0 1em 0;
background: url(tastelessly-images/img11.gif) no-repeat left top;
padding: 15px 0 0 15px;
height: 30px;
}
#sidebar2 li ul {
line-height: normal;
background: url(tastelessly-images/img04.gif) repeat-x;
}
#sidebar2 li li {
padding: 5px;
background: url(tastelessly-images/img04.gif) repeat-x left bottom;
font-size: .8em;
}
#sidebar2 li a {
border: none;
padding-left: 10px;
}
#sidebar2 li a:hover {
border: none;
padding-left: 10px;
}
/* Calendar */
#calendar {
margin: 0 auto;
}
#calendar caption {
font-weight: bold;
}
#calendar table {
width: 220px;
text-align: center;
border-collapse: collapse;
}
#calendar thead th {
background: #CCCCCC;
color: #FFFFFF;
}
#calendar tbody td {
background: #EEEEEE;
}
#calendar #today {
background: #B8D03B;
font-weight: bold;
color: #FFFFFF;
}
#calendar a {
font-weight: bold;
}
#calendar #prev {
text-align: left;
}
#calendar #next {
text-align: right;
}
/* Footer */
#footer {
text-align: center;
font-size: 9px;
}
</style>
</head>
<body>
<!-- start header -->
<div id="header">
<div id="menu">
<ul>
<li class="current_page_item"><a href="#">Home</a></li>
<li><a href="#">Blogs</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="search">
<form id="searchform" method="get" action="#">
<fieldset>
<input id="s" type="text" name="s" value="" class="text" />
<input id="x" type="submit" value="Search" class="button" />
</fieldset>
</form>
</div>
</div>
<div id="logo">
<h1><a href="#">Tasteleslly</a></h1>
<h2>By Free CSS Templates</h2>
</div>
<!-- end header -->
<hr />
<!-- start page -->
<div id="page">
<!-- start content -->
<div id="content">
<div class="post">
<h1 class="title"><a href="#">About This Template</a></h1>
<p class="meta"><small>Posted on October 24th, 2007 by <a href="#">Someone</a></small></p>
<div class="entry">
<p><strong>Tastelessly</strong> is a free, fully standards-compliant CSS template designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>. This free template is released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attributions 2.5</a> license, so you're pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Have fun with it :)</p>
<p>This template is also available as a <a href="http://www.freewpthemes.net/preview/newsflash/">WordPress theme</a> at <a href="http://www.freewpthemes.net/">Free WordPress Themes</a>.</p>
<h2>A Heading Level 2</h2>
<p>This paragraph is followed by a sample unordered list:</p>
<ul>
<li><a href="#">Consectetuer adipiscing elit</a></li>
<li><a href="#">Metus aliquam pellentesque</a></li>
<li><a href="#">Urnanet non molestie semper</a></li>
<li><a href="#">Proin gravida orci porttitor</a></li>
</ul>
<h3>Heading Level 3</h3>
<p>While this one is followed by a blockquote:</p>
<blockquote>
<p>Donec leo, vivamus nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh.</p>
</blockquote>
</div>
<p class="links"><a href="#" class="comments">Comments (33)</a> <a href="#" class="permalink">Permalink</a></p>
<p class="tags"><strong>Tags:</strong> <a href="#">dolor</a> <a href="#">ipsum</a> <a href="#">lorem</a> <a href="#">sit amet</a> <a href="#">dolor</a> <a href="#">ipsum</a> <a href="#">lorem</a> <a href="#">sit amet</a></p>
</div>
</div>
<!-- end content -->
<!-- start sidebar one -->
<div id="sidebar1" class="sidebar">
<ul>
<li id="recent-posts">
<h2>Recent Posts</h2>
<ul>
<li>
<h3><a href="#">Aliquam Libero</a></h3>
<p>Nullam ante orci, eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat, nulla. Sed ac leo. Pellentesque imperdiet. <a href="#">More…</a></p>
</li>
<li>
<h3><a href="#">Semper Vestibulum</a></h3>
<p>Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh. <a href="#">More…</a></p>
</li>
<li>
<h3><a href="#">Etiam Malesuada</a></h3>
<p>Donec leo. Vivamus fermentum nibh in augue. Praesent a lacus at urna congue rutrum. Nulla enim eros, porttitor eu, tempus id, varius non, nibh. Duis enim nulla, luctus eu, dapibus lacinia, venenatis id, quam. Vestibulum imperdiet, magna nec eleifend rutrum, nunc lectus vestibulum velit, euismod lacinia quam nisl id lorem. Quisque erat. <a href="#">More…</a></p>
</li>
</ul>
</li>
</ul>
</div>
<!-- end sidebar one -->
<!-- start sidebar two -->
<div id="sidebar2" class="sidebar">
<ul>
<li>
<h2>Categories</h2>
<ul>
<li><a href="#">Aliquam libero</a></li>
<li><a href="#">Consectetuer elit</a></li>
<li><a href="#">Metus pellentesque</a></li>
<li><a href="#">Suspendisse mauris</a></li>
<li><a href="#">Urnanet molestie semper</a></li>
<li><a href="#">Proin orci porttitor</a></li>
</ul>
</li>
<li>
<h2>Archives</h2>
<ul>
<li><a href="#">September</a> (23)</li>
<li><a href="#">August</a> (31)</li>
<li><a href="#">July</a> (31)</li>
<li><a href="#">June</a> (30)</li>
<li><a href="#">May</a> (31)</li>
</ul>
</li>
<li>
<h2>Lorem ipsum dolor </h2>
<ul>
<li><a href="#">Aliquam libero</a></li>
<li><a href="#">Consectetuer elit</a></li>
<li><a href="#">Metus pellentesque</a></li>
<li><a href="#">Suspendisse mauris</a></li>
<li><a href="#">Urnanet molestie semper</a></li>
<li><a href="#">Proin orci porttitor</a></li>
</ul>
</li>
</ul>
</div>
<!-- end sidebar two -->
<div style="clear: both;"> </div>
</div>
<!-- end page -->
<hr />
<!-- start footer -->
<div id="footer">
<p>©2007 All Rights Reserved. • Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a> | <a href="http://Free-Templates.Ru/">Free-Templates.RU</a>.</p>
</div>
<!-- end footer -->
</body>
</html>
Related examples in the same category