tastelessly : Effect 2 « Templates « HTML / CSS

Home
HTML / CSS
1.CSS
2.CSS Controls
3.Form
4.IE Firefox
5.Layout
6.Marquee Attributes
7.Meta Tags
8.Microsoft Attributes
9.Object
10.Reference
11.Style Basics
12.Tags
13.Templates
14.XML
HTML / CSS » Templates » Effect 2 




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;
}

{
  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: 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: auto;
  background: url(tastelessly-images/img12.jpgno-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: 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.gifno-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.gifrepeat-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.gifrepeat-x;
}

.post .links a, .post .tags a {
  border: none;
}

/* Recent Posts */

#recent-posts {
}

#recent-posts h2 {
  margin: 0;
  background: url(tastelessly-images/img13.gifno-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.gifrepeat-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.gifno-repeat left top;
  padding: 15px 0  0 15px;
  height: 30px;
}

#sidebar2 li ul {
  line-height: normal;
  background: url(tastelessly-images/img04.gifrepeat-x;
}

#sidebar2 li li {
  padding: 5px;
  background: url(tastelessly-images/img04.gifrepeat-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: 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 commerciallyprovided 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> &nbsp;&nbsp;&nbsp; <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&hellip;</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&hellip;</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&hellip;</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;">&nbsp;</div>
</div>
<!-- end page -->
<hr />
<!-- start footer -->
<div id="footer">
  <p>&copy;2007 All Rights Reserved. &nbsp;&bull;&nbsp; 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
1.bigpixels
2.binary-news
3.mosaic
4.perfection
5.plain1
6.plain2
7.plastic-surgery
8.plastics
9.overdose
10.outlined
11.optimism
12.optimistic
13.Modern_Theme
14.MultiStrangeColor
15.modern
16.minimalistic
17.primitive
18.sparkle
19.sparkling
20.spotlight
21.simplyfluid
22.slider
23.pragmatic
24.popular
25.primitif
26.pure-web-2.0
27.pure
28.reflection
29.reflections
30.royal-cyan
31.royal_policy
32.smalltown
33.smallwindow
34.smartdesign
35.smarttouch
36.splendid
37.workfire
38.webtile
39.Wide_Side
40.zionnarrow
41.zionnarrows
42.xtreme
43.ZEN
44.zenlike
45.wondrous
46.stonewalled
47.tattoopatt
48.tattoopattern
49.tasty
50.thebarn
51.tinfoil_helmet
52.tomato
53.metal-feel
54.metal
55.historical
56.historicpaper
57.historyofwar
58.lonelyness
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.