mosaic : Effect 2 « Templates « HTML / CSS

mosaic
   

<!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>Mosaic</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
*/

* {
  margin: 0;
  padding: 0;
}

body {
  background: url(mosaic-images/img01.jpg);
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 16px;
  color: #972F1C;
}

h1, h2, h3 {
  text-transform: lowercase;
  color: #505956;
}

h1 {
  font-size: 42px;
}

hr {
  display: none;
}

a {
  color: #990000;
}

a:hover {
  text-decoration: none;
}

/* Header */

#header {
  height: 160px;
  background: url(mosaic-images/img02.jpg);
}

#logo {
  height: 40px;
  padding-right: 10px;
  background: url(mosaic-images/img03.jpg) no-repeat right top;
  text-align: right;
}

#logo h1, #logo p, #logo a {
  display: inline;
  text-decoration: none;
  text-transform: lowercase;
  letter-spacing: -2px;
  font-size: 30px;
  font-weight: bold;
  color: #612A0F;
}

#menu {
  height: 96px;
}

#menu ul {
  list-style: none;
}

#menu li {
  float: left;
  height: 96px;
}

#menu a {
  float: left;
  height: 66px;
  padding: 30px 20px 0 20px;
  text-transform: lowercase;
  text-decoration: none;
  letter-spacing: -2px;
  font-size: 30px;
  font-weight: bold;
  color: #E6CFB4;
}

#menu a:hover {
  color: #FFFFFF;
}

#menu li.current_page_item a {
  background: url(mosaic-images/img04.jpg) repeat-x;
  color: #647472;
}

/* Page */

#page {
  width: 980px;
  margin: 0 auto;
}

#page p,
#page ul,
#page ol {
  margin-bottom: 1.5em;
  line-height: 150%;
}

#page ul,
#page ol {
  list-style-position: inside;
}

/* Content */

#content {
  float: left;
  width: 680px;
  background: url(mosaic-images/img09.jpg) no-repeat right top;
}

/* Post Block */

.post {
  background: url(mosaic-images/img06.jpg) repeat-y 147px 0;
}

.post .bgbottom {
  height: 60px;
  background: url(mosaic-images/img07.jpg) no-repeat 147px 0;
}

.post .meta {
  float: left;
  width: 149px;
  height: 355px;
  background: url(mosaic-images/img05.jpg) no-repeat;
  text-align: center;
  text-transform: lowercase;
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}

.post .meta a {
  text-decoration: none;
  color: #333333;
}

.post .meta .d, .post .meta .c {
  display: block;
  font-size: 36px;
}

.post .meta .date, .post .meta .comments {
  display: block;
  padding: 95px 0 10px 0;
}

.post .title {
  margin-left: 149px;
  padding: 40px 40px 20px 20px;
  background: url(mosaic-images/img08.jpg) no-repeat;
}

.post .title a {
  padding-right: 50px;
  background: url(mosaic-images/img10.gif) no-repeat right top;
  text-decoration: none;
  letter-spacing: -3px;
  font-size: 42px;
  color: #505956;
}

.post .entry {
  margin: 0 33px 0 149px;
  padding: 20px 20px 0 20px;
  background: url(mosaic-images/img11.jpg) no-repeat;
}

.post .entry a:link {
  padding: 0 5px;
  background: #E29269 url(mosaic-images/img12.gif);
  text-decoration: none;
  color: #FFFFFF;
}

.post .entry a:hover {
  background: #A54112;
  color: #FFFFFF;
}

/* Content Bar - The widget-ready sidebar in the content area. */

#contentbar {
  clear: both;
  padding-top: 20px;
}

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

#contentbar li {
  display: block;
  float: left;
  width: 325px;
  margin-left: 10px;
  background: url(mosaic-images/img14.jpg) repeat-y;
}

#contentbar li ul {
  padding: 0 20px 40px 20px;
  background: url(mosaic-images/img15.jpg) no-repeat left bottom;
}

#contentbar li li {
  float: none;
  width: auto;
  margin: 0;
  padding: 5px 0 5px 30px;
  background: url(mosaic-images/img18.gif) no-repeat left center;
}

#contentbar .widgettitle {
  padding: 45px 20px 20px 20px;
  background: url(mosaic-images/img13.jpg) no-repeat;
  letter-spacing: -2px;
}

/* Recent Posts */

#recent-posts {
}

#recent-posts .widgettitle{
  background-image: url(mosaic-images/img16.jpg);
}

#contentbar #recent-posts ul {
  background-image: url(mosaic-images/img17.jpg);
}

/* Recent Comments */

#recent-comments ul {
  font-size: 10px;
  color: #D3AE8E;
}

#recent-comments a {
  display: block;
  font-size: 16px;
}

/* Sidebar */

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

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

#sidebar li {
  position: relative;
  margin-bottom: 20px;
  background: url(mosaic-images/img21.jpg) repeat-y;
}

#sidebar li ul, #calendar_wrap {
  padding: 20px 20px 30px 20px;
  background: url(mosaic-images/img22.jpg) no-repeat left bottom;
}

#sidebar li li {
  margin: 0;
  background: none;
}

#sidebar .widgettitle {
  padding: 15px;
  background: url(mosaic-images/img20.jpg) no-repeat;
  letter-spacing: -2px;
  color: #AF5B19;
}

#sidebar a:link {
  padding: 0 5px;
  background: #FFBF00 url(mosaic-images/img23.gif);
  text-decoration: none;
}

#sidebar a:hover {
  background: #E29269 url(mosaic-images/img12.gif);
  color: #FFFFFF;
}

/* Search */

#sidebar #search {
  height: 100px;
  background: url(mosaic-images/img19.jpg) no-repeat;
}

#search form {
  padding: 22px 0 0 20px;
}

#search br {
  display: none;
}

#search input {
  display: none;
  font: bold 14px Georgia, "Times New Roman", Times, serif;
  text-transform: lowercase;
  background: none;
  border: none;
}

#search #s {
  display: block;
  width: 170px;
  letter-spacing: -2px;
  word-spacing: .6em;
  font-size: 20px;
  color: #FFFFFF;
}

/* Calendar */

#calendar table {
  width: 90%;
  text-align: center;
}

/* Tag Cloud */

#tag_cloud {
  padding-bottom: 20px;
  text-align: center;
}

#tag_cloud .widgettitle {
  margin-bottom: 10px;
  text-align: left;
}

#tag_cloud a {
  margin: 0 20px 0 0;
}

/* Footer */

#footer {
  clear: both;
  width: 980px;
  height: 76px;
  margin: 0 auto;
  padding: 30px 0;
  background: url(mosaic-images/img24.jpg) no-repeat left center;
}

#footer p {
  margin: 0;
  padding: 10px 0 0 20px;
  font-size: smaller;
  font-weight: bold;
  letter-spacing: -1px;
}

</style>


</head>
<body>
<div id="header">
  <div id="logo">
    <h1><a href="http://www.free-css.com/">Mosaic</a></h1>
    <p>Free CSS Template</p>
  </div>
  <div id="menu">
    <ul>
      <li><a href="http://www.free-css.com/">Home</a></li>
      <li class="current_page_item"><a href="http://www.free-css.com/">Blogs</a></li>
      <li><a href="http://www.free-css.com/">Photos</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="page">
  <div id="content">
    <div class="post">
      <p class="meta"><span class="date"> <span class="d">28</span> <span class="m">October</span> </span> &nbsp;&nbsp;&nbsp; <a href="http://www.free-css.com/" class="comments"> <span class="c">15</span> comments </a></p>
      <h1 class="title"><a href="http://www.free-css.com/">About This Free CSS Template</a></h1>
      <div class="entry">
        <p><strong>Mosaic</strong> is 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 commercially) provided you keep the links in the footer  intact. Have fun with it :)</p>
        <p>This template is also available as a WordPress theme at Free WordPress Themes.</p>
        <h2>A Heading Level 2</h2>
        <p>This paragraph is followed by a sample unordered list:</p>
        <ul>
          <li><a href="http://www.free-css.com/">Consectetuer adipiscing elit</a></li>
          <li><a href="http://www.free-css.com/">Metus aliquam pellentesque</a></li>
          <li><a href="http://www.free-css.com/">Urnanet non molestie semper</a></li>
          <li><a href="http://www.free-css.com/">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>
        <p class="tags"><small><strong>Tags:</strong> <a href="http://www.free-css.com/">dolor</a> <a href="http://www.free-css.com/">ipsum</a> <a href="http://www.free-css.com/">lorem</a> <a href="http://www.free-css.com/">sit amet</a> <a href="http://www.free-css.com/">dolor</a></small></p>
      </div>
      <div class="bgbottom" style="clear: both;"></div>
    </div>
    <div id="contentbar">
      <ul>
        <li id="recent-posts" class="widget widget_recent_entries">
          <h2 class="widgettitle">Recent Posts</h2>
          <ul>
            <li><a href="http://www.free-css.com/">Aliquam libero</a></li>
            <li><a href="http://www.free-css.com/">Consectetuer adipiscing elit</a></li>
            <li><a href="http://www.free-css.com/">Metus aliquam pellentesque</a></li>
            <li><a href="http://www.free-css.com/">Suspendisse iaculis mauris</a></li>
            <li><a href="http://www.free-css.com/">Urnanet non molestie semper</a></li>
            <li><a href="http://www.free-css.com/">Proin gravida orci porttitor</a></li>
          </ul>
        </li>
        <li id="recent-comments" class="widget widget_recent_comments">
          <h2 class="widgettitle">Recent Comments</h2>
          <ul>
            <li>Free CSS Templates on <a href="http://www.free-css.com/">Consectetuer adipiscing elit</a></li>
            <li>Free CSS Templates on <a href="http://www.free-css.com/">Metus aliquam pellentesque</a></li>
            <li>Free CSS Templates on <a href="http://www.free-css.com/">Suspendisse iaculis mauris</a></li>
            <li>Free CSS Templates on <a href="http://www.free-css.com/">Urnanet non molestie semper</a></li>
            <li>Free CSS Templates on <a href="http://www.free-css.com/">Proin gravida orci porttitor</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
  <div id="sidebar">
    <ul>
      <li id="search" class="widget widget_search">
        <form id="searchform" method="get" action="http://www.free-css.com/">
          <div>
            <input type="text" name="s" id="s" size="15" value="" />
            <br />
            <input type="submit" value="Search" />
          </div>
        </form>
      </li>
      <li id="calendar" class="widget widget_calendar">
        <h2 class="widgettitle">Calendar</h2>
        <div id="calendar_wrap">
          <table id="wp-calendar" summary="Calendar">
            <caption>
            October 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="September" colspan="3" id="prev"><a href="http://www.free-css.com/">&laquo; Sep</a></td>
                <td class="pad">&nbsp;</td>
                <td abbr="November" colspan="3" id="next"><a href="http://www.free-css.com/">Nov &raquo;</a></td>
              </tr>
            </tfoot>
            <tbody>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td><a href="http://www.free-css.com/">4</a></td>
                <td>5</td>
                <td>6</td>
                <td><a href="http://www.free-css.com/">7</a></td>
              </tr>
              <tr>
                <td>8</td>
                <td>9</td>
                <td>10</td>
                <td>11</td>
                <td>12</td>
                <td>13</td>
                <td>14</td>
              </tr>
              <tr>
                <td>15</td>
                <td>16</td>
                <td>17</td>
                <td>18</td>
                <td>19</td>
                <td>20</td>
                <td>21</td>
              </tr>
              <tr>
                <td>22</td>
                <td>23</td>
                <td>24</td>
                <td>25</td>
                <td>26</td>
                <td>27</td>
                <td id="today">28</td>
              </tr>
              <tr>
                <td>29</td>
                <td>30</td>
                <td>31</td>
                <td class="pad" colspan="4">&nbsp;</td>
              </tr>
            </tbody>
          </table>
        </div>
      </li>
      <li id="tag_cloud" class="widget widget_tag_cloud">
        <h2 class="widgettitle">Tags Cloud</h2>
        <a href="http://www.free-css.com/" style="font-size: 12pt;">dolor</a> <a href="http://www.free-css.com/" style="font-size: 11pt;">ipsum</a> <a href="http://www.free-css.com/" style="font-size: 10pt;">lorem</a> <a href="http://www.free-css.com/" style="font-size:  9pt;">mattis&nbsp;placerat</a> <a href="http://www.free-css.com/" style="font-size:  8pt;">nulla</a> <a href="http://www.free-css.com/" style="font-size:  8pt;">sit&nbsp;amet</a> <a href="http://www.free-css.com/" style="font-size:  8pt;">suscipit&nbsp;in</a> </li>
      <li id="categories-1" class="widget widget_categories">
        <h2 class="widgettitle">Categories</h2>
        <ul>
          <li><a href="http://www.free-css.com/">Uncategorized</a> (3) </li>
        </ul>
      </li>
      <li id="archives" class="widget widget_archives">
        <h2 class="widgettitle">Archives</h2>
        <ul>
          <li><a href="http://www.free-css.com/">October 2007</a>&nbsp;(2)</li>
          <li><a href="http://www.free-css.com/">September 2007</a>&nbsp;(1)</li>
        </ul>
      </li>
    </ul>
  </div>
</div>
<hr />
<div id="footer">
  <p>&copy;2007 All Rights Reserved. &nbsp;&bull;&nbsp; Design by <a target="_blank" href="http://www.freecsstemplates.org/">Free CSS Templates</a></p>
</div>
</body>
</html>
Related examples in the same category

1.	bigpixels
2.	binary-news
3.	perfection
4.	plain1
5.	plain2
6.	plastic-surgery
7.	plastics
8.	overdose
9.	outlined
10.	optimism
11.	optimistic
12.	Modern_Theme
13.	MultiStrangeColor
14.	modern
15.	minimalistic
16.	primitive
17.	sparkle
18.	sparkling
19.	spotlight
20.	simplyfluid
21.	slider
22.	pragmatic
23.	popular
24.	primitif
25.	pure-web-2.0
26.	pure
27.	reflection
28.	reflections
29.	royal-cyan
30.	royal_policy
31.	smalltown
32.	smallwindow
33.	smartdesign
34.	smarttouch
35.	splendid
36.	workfire
37.	webtile
38.	Wide_Side
39.	zionnarrow
40.	zionnarrows
41.	xtreme
42.	ZEN
43.	zenlike
44.	wondrous
45.	stonewalled
46.	tattoopatt
47.	tattoopattern
48.	tastelessly
49.	tasty
50.	thebarn
51.	tinfoil_helmet
52.	tomato
53.	metal-feel
54.	metal
55.	historical
56.	historicpaper
57.	historyofwar
58.	lonelyness