asterisk : Design 4 « Templates « HTML / CSS

HTML / CSS » Templates » Design 4 
asterisk
     

?<!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>Asterisk</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
  margin: 0px;
  padding: 0px;
  background: #FFFFFF url(asterisk-images/img01.gifrepeat-x;
  font: 13px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #333333;
}

h2 {
  font: 1.82em;
  font-weight: normal;
  letter-spacing: -1px;
  color: #84E003;
}

p, ol, ul {
  line-height: 1.67em;
}

{
  color: #18BDF5;
}

a:hover {
  text-decoration: none;
}

hr {
  display: none;
}

/* Header */

#header {
  width: 778px;
  height: 160px;
  margin: 0px auto;
}

/* Logo */

#logo {
  float: left;
  padding: 40px 0 0 0;
}

#logo h1 {
  margin: 0;
  text-transform: lowercase;
  letter-spacing: -2px;
  font-size: 3.6em;
  font-weight: normal;
  color: #FFFFFF;
}

#logo h1 a {
  padding-right: 20px;
  background: url(asterisk-images/img02.gifno-repeat right top;
  text-decoration: none;
  color: #FFFFFF;
}

#logo p {
  margin: -5px 0 0 0;
  text-transform: uppercase;
  font-size: 1.22em;
  letter-spacing: -1px;
}

#logo a {
  text-decoration: none;
  color: #FFFFFF;
}

/* Menu */

#menu {
  float: right;
}

#menu ul {
  margin: 0px;
  padding: 93px 0px 0px 0px;
  list-style: none;
}

#menu li {
  display: inline;
}

#menu a {
  display: block;
  float: left;
  margin-left: 20px;
  text-decoration: none;
  text-transform: lowercase;
  font-size: 1.36em;
  color: #FFFFFF;
}

#menu a:hover, .active a {
  border-bottom: 3px solid #8AD9F3;
}

/* Page */

#wrapper {
  background: url(asterisk-images/img03.gifrepeat-x left bottom;
}

#page {
  width: 778px;
  margin: 0px auto;
  padding: 40px 0;
}

/* Content */

#content {
  float: left;
  width: 510px;
}

/* Post */

.post {
}

.post .date {
  float: right;
  width: 76px;
  height: 58px;
  margin: 0;
  padding-top: 2px;
  background: #18BDF5 url(asterisk-images/img07.gif);
  line-height: normal;
  text-transform: uppercase;
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  color: #FFFFFF;
}

.post .date b {
  display: block;
  margin-top: -5px;
  font-size: 40px;
}

.post .title {
  margin: 0;
  padding: 20px 0 0 0;
  background: url(asterisk-images/img05.gifrepeat-x;
  font-size: 1.8em;
}

.post .meta {
  margin: 0 0 30px 0;
  padding: 0;
  color: #C6C6C6;
  line-height:normal;
}

.post .meta a {
  color: #C6C6C6;
}

.post .entry {
  padding-bottom: 30px;
}

/* Sidebar */

#sidebar {
  float: right;
  width: 240px;
}

#sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#sidebar li {
  margin-bottom: 30px;
}

#sidebar li ul {
}

#sidebar li li {
  margin: 0;
  padding: 5px 0;
  background: url(asterisk-images/img05.gifrepeat-x left bottom;
}

#sidebar li li a {
  padding-left: 21px;
  background: url(asterisk-images/img06.gifno-repeat 6px 50%;
}

#sidebar h2 {
  padding-left: 20px;
  background: url(asterisk-images/img04.gifno-repeat left center;
}

#sidebar a {
  text-decoration: none;
}

#sidebar a:hover {
  text-decoration: underline;
}

/* Calendar */

#calendar_wrap {
  padding: 0 21px;
}

#calendar caption {
  font-weight: bold;
}

#calendar table {
  width: 100%;
  border: 1px solid #E8E8E8;
}

#calendar thead {
  background: #E8E8E8;
}

#calendar tbody td {
  border: 1px solid #E8E8E8;
  text-align: center;
}

#today {
  font-weight: bold;
}

#prev {
}

#next {
  text-align: right;
}

/* Footer */

#wrapper2 {
  background: #18BDF5;
}

#footer {
  width: 778px;
  margin: auto;
  padding-top: 30px;
  color: #FFFFFF;
}

#footer a {
  color: #FFFFFF;
}

#footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#footer li {
  display: block;
  float: left;
  width: 240px;
  padding-left: 29px;
}

#footer li.first {
  padding-left: 0;
}

#footer li ul {
  margin: 0;
}

#footer li li {
  display: list-item;
  float: none;
  margin: 0;
  padding: 5px 0;
  background: url(asterisk-images/img10.gifrepeat-x left bottom;
}

#footer li li a {
  padding-left: 21px;
  background: url(asterisk-images/img09.gifno-repeat 6px 50%;
}

#footer h2 {
  margin-top: 0;
  padding-left: 20px;
  background: url(asterisk-images/img08.gifno-repeat left center;
  color: #FFFFFF;
}

#legal {
  clear: both;
  margin: 0;
  padding: 50px 0;
  text-align: center;
  color: #FFFFFF;
}

#legal a {
  color: #FFFFFF;
}


</style>
</head>
<body>
<div id="header">
  <div id="logo">
    <h1><a href="http://www.free-css.com/">Asterisk</a></h1>
    <p><a href="http://www.free-css.com/">Free CSS Template</a></p>
  </div>
  <div id="menu">
    <ul>
      <li class="active"><a href="http://www.free-css.com/">Home</a></li>
      <li><a href="http://www.free-css.com/">Blog</a></li>
      <li><a href="http://www.free-css.com/">Gallery</a></li>
      <li><a href="http://www.free-css.com/">About</a></li>
      <li><a href="http://www.free-css.com/">Contact </a></li>
    </ul>
  </div>
</div>
<hr />
<div id="wrapper">
  <div id="page">
    <div id="content">
      <div class="post">
        <p class="date">August <b>26</b></p>
        <h2 class="title">Welcome to Our Website!</h2>
        <p class="meta"><small>Posted <a href="http://www.free-css.com/">freewordpressthemes</a> | <a href="http://www.free-css.com/">Edit</a><br />
          Filed under <a href="http://www.free-css.com/">WordPress</a>, <a href="http://www.free-css.com/">Internet</a> | <a href="http://www.free-css.com/">No Comments &raquo;</a></small></p>
        <div class="entry">
          <p>This is <strong>Asterisk</strong>, a free, fully standards-compliant CSS template designed by Free CSS Templates. This free template is released under a <a target="_blank" 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. Aside from that, have fun with it :)</p>
          <p>This template is also available as a WordPress theme at Free WordPress Themes.</p>
        </div>
      </div>
      <div class="post">
        <p class="date">August <b>22</b></p>
        <h2 class="title">Sample Tags</h2>
        <p class="meta"><small>Posted <a href="http://www.free-css.com/">freewordpressthemes</a> | <a href="http://www.free-css.com/">Edit</a><br />
          Filed under <a href="http://www.free-css.com/">WordPress</a>, <a href="http://www.free-css.com/">Internet</a> | <a href="http://www.free-css.com/">No Comments &raquo;</a></small></p>
        <div class="entry">
          <h3>An H3 Followed by a Blockquote:</h3>
          <blockquote>
            <p>&#8220;Donec leo, vivamus nibh in augue at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh.&#8221;</p>
          </blockquote>
          <h3>Bulleted List:</h3>
          <ul>
            <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
            <li>Phasellus nec erat sit amet nibh pellentesque congue.</li>
            <li>Cras vitae metus aliquam risus pellentesque pharetra.</li>
          </ul>
          <h3>Numbered List:</h3>
          <ol>
            <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
            <li>Phasellus nec erat sit amet nibh pellentesque congue.</li>
            <li>Cras vitae metus aliquam risus pellentesque pharetra.</li>
          </ol>
        </div>
      </div>
    </div>
    <div id="sidebar">
      <ul>
        <li id="categories">
          <h2>Categories</h2>
          <ul>
            <li><a href="http://www.free-css.com/">Lorem Ipsum</a> (1</li>
            <li><a href="http://www.free-css.com/">Uncategorized</a> (4</li>
          </ul>
        </li>
        <li id="calendar">
          <h2>Calendar</h2>
          <div id="calendar_wrap">
            <table id="wp-calendar" summary="Calendar">
              <caption>
              August 2007
              </caption>
              <thead>
                <tr>
                  <th abbr="Monday" scope="col" title="Monday">M</th>
                  <th abbr="Tuesday" scope="col" title="Tuesday">T</th>
                  <th abbr="Wednesday" scope="col" title="Wednesday">W</th>
                  <th abbr="Thursday" scope="col" title="Thursday">T</th>
                  <th abbr="Friday" scope="col" title="Friday">F</th>
                  <th abbr="Saturday" scope="col" title="Saturday">S</th>
                  <th abbr="Sunday" scope="col" title="Sunday">S</th>
                </tr>
              </thead>
              <tfoot>
                <tr>
                  <td abbr="July" colspan="3" id="prev"><a href="http://www.free-css.com/">&laquo; Jul</a></td>
                  <td class="pad">&nbsp;</td>
                  <td abbr="September" colspan="3" id="next" class="pad"><a href="http://www.free-css.com/">Sep &raquo;</a></td>
                </tr>
              </tfoot>
              <tbody>
                <tr>
                  <td colspan="2" class="pad">&nbsp;</td>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td>4</td>
                  <td>5</td>
                </tr>
                <tr>
                  <td>6</td>
                  <td>7</td>
                  <td>8</td>
                  <td>9</td>
                  <td>10</td>
                  <td>11</td>
                  <td>12</td>
                </tr>
                <tr>
                  <td>13</td>
                  <td>14</td>
                  <td>15</td>
                  <td>16</td>
                  <td>17</td>
                  <td>18</td>
                  <td>19</td>
                </tr>
                <tr>
                  <td>20</td>
                  <td id="today">21</td>
                  <td>22</td>
                  <td>23</td>
                  <td>24</td>
                  <td>25</td>
                  <td>26</td>
                </tr>
                <tr>
                  <td>27</td>
                  <td>28</td>
                  <td>29</td>
                  <td>30</td>
                  <td>31</td>
                  <td class="pad" colspan="2">&nbsp;</td>
                </tr>
              </tbody>
            </table>
          </div>
        </li>
        <li>
          <h2>Lorem Ipsum Dolor</h2>
          <ul>
            <li><a href="http://www.free-css.com/">Nulla luctus eleifend purus</a></li>
            <li><a href="http://www.free-css.com/">Praesent scelerisque scelerisque erat</a></li>
            <li><a href="http://www.free-css.com/">Ut nonummy rutrum sem</a></li>
            <li><a href="http://www.free-css.com/">Pellentesque tempus quam quis nulla</a></li>
            <li><a href="http://www.free-css.com/">Fusce ultrices fringilla metus</a></li>
            <li><a href="http://www.free-css.com/">Praesent mattis condimentum nisl</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <br style="clear: both;" />
  </div>
</div>
<div id="wrapper2">
  <div id="footer">
    <ul>
      <li class="first">
        <h2>Lorem Ipsum Dolor</h2>
        <ul>
          <li><a href="http://www.free-css.com/">Nulla luctus eleifend purus</a></li>
          <li><a href="http://www.free-css.com/">Praesent scelerisque scelerisque erat</a></li>
          <li><a href="http://www.free-css.com/">Ut nonummy rutrum sem</a></li>
          <li><a href="http://www.free-css.com/">Pellentesque tempus quam quis nulla</a></li>
          <li><a href="http://www.free-css.com/">Fusce ultrices fringilla metus</a></li>
          <li><a href="http://www.free-css.com/">Praesent mattis condimentum nisl</a></li>
        </ul>
      </li>
      <li>
        <h2>Lorem Ipsum Dolor</h2>
        <ul>
          <li><a href="http://www.free-css.com/">Nulla luctus eleifend purus</a></li>
          <li><a href="http://www.free-css.com/">Praesent scelerisque scelerisque erat</a></li>
          <li><a href="http://www.free-css.com/">Ut nonummy rutrum sem</a></li>
          <li><a href="http://www.free-css.com/">Pellentesque tempus quam quis nulla</a></li>
          <li><a href="http://www.free-css.com/">Fusce ultrices fringilla metus</a></li>
          <li><a href="http://www.free-css.com/">Praesent mattis condimentum nisl</a></li>
        </ul>
      </li>
      <li>
        <h2>Lorem Ipsum Dolor</h2>
        <ul>
          <li><a href="http://www.free-css.com/">Nulla luctus eleifend purus</a></li>
          <li><a href="http://www.free-css.com/">Praesent scelerisque scelerisque erat</a></li>
          <li><a href="http://www.free-css.com/">Ut nonummy rutrum sem</a></li>
          <li><a href="http://www.free-css.com/">Pellentesque tempus quam quis nulla</a></li>
          <li><a href="http://www.free-css.com/">Fusce ultrices fringilla metus</a></li>
          <li><a href="http://www.free-css.com/">Praesent mattis condimentum nisl</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <p id="legal"> &copy;2007 Asterisk. All Rights Reserved.
    &nbsp;&nbsp;&bull;&nbsp;&nbsp;
    Design by <a target="_blank" href="http://www.freecsstemplates.org/">Free CSS Templates</a> &nbsp;&nbsp;&bull;&nbsp;&nbsp;
    Icons by <a target="_blank" href="http://famfamfam.com/">FAMFAMFAM</a>. <br />
    <a href="http://validator.w3.org/check/referer" class="xhtml">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> &nbsp;&nbsp;&bull;&nbsp;&nbsp; <a href="http://jigsaw.w3.org/css-validator/check/referer" class="css">Valid <abbr title="Cascading Style Sheets">CSS</abbr></a> </p>
</div>
</body>
</html>

   
    
    
    
    
  
Related examples in the same category
1.arrangement
2.arthemia
3.artica
4.aspherical
5.assiduous
6.astounded
7.astroturfd
8.atomohost
9.atrandafir582
10.AttainDigital
11.audi-template
12.aurelius
13.authenticity
14.autoportal
15.axian
16.azulmedia2-1
17.azure
18.bagatelle
19.balanced
20.bananaleaf
21.barricade
22.begrimed
23.belowthehorizon
24.bennevis
25.bermuda01
26.besmart
27.bestwebdesign
28.beta
29.beyond
30.bigdeal
31.BigSpaceLove
32.bioessence
33.Biru_Manteb
34.bittersweet
35.Black
36.chamberlandsrestaurant
37.chara
38.characterized
39.charcoal
40.charitable-organization
41.chary
42.chasmogamous
43.chesspiece
44.chic
45.chicanery
46.chromz
47.churchsitev.2
48.citrus-island1-1
49.clementine
50.clicker
51.modernclassic
52.modernmagic
53.modernworld
54.A_Simple_Theme
55.minimalistica
56.miniseries
57.mint-idea
58.minty
59.mirax
60.miscellaneous
61.mistybud
62.mlpdesign02
63.mlpdesign03
64.mlpdesign04
65.mlpdesign08
66.model-4-me
67.model-portfolio
68.modelagency
69.modelportfolio
70.model_2
71.moderna
72.Modified
73.modulation
74.module-mag
75.mokofactory
76.monster
77.mork-horisont
78.mountainbreeze
79.mouse
80.mrtechie
81.multiflex2
82.multiple
83.multiplex
84.music
85.muzzle
86.MyCode
87.mydiary
88.myfamily
89.myhedspacefree08
90.mykindathing
91.myportfolio
92.mystic-garden
93.Mythology
94.myvalentine
95.naeve
96.natheless
97.nationalpark
98.neapolitan
99.neatness
100.nebuladog
101.nedweb
102.NelVoize
103.neoneon
104.neonix
105.neoplanet-01
106.neotech
107.netindustries
108.neuphoric
109.neutral
110.neutraldesk
111.neutralgreen
112.new kitchen design
113.new-fast-host
114.new-home
115.new-rise
116.new-year
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.