blackberry
<!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 : Black Berry
Description: A fixed-width design suitable for small sites and blogs.
Version : 1.0
Released : 20071215
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Black Berry 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 {
background: #FFFFFF url(blackberry-images/img01.gif) repeat-x;
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333333;
}
form {
}
input, textarea {
padding: 2px 5px;
font: normal 1em "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #333333;
}
h1, h2, h3 {
margin-top: 1.5em;
font-weight: normal;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1em;
}
p, ul, ol {
margin-top: 1.5em;
line-height: 160%;
}
ul, ol {
margin-left: 3em;
}
blockquote {
margin-left: 3em;
margin-right: 3em;
}
a {
color: #CC6B47;
}
a:hover {
text-decoration: none;
color: #3760BF;
}
a img {
border: none;
}
img.left {
float: left;
margin: 0 20px 0 0;
}
img.right {
float: right;
margin: 0 0 0 20px;
}
hr {
display: none;
}
/* Header */
#header {
height: 110px;
margin: 0 auto;
background: #2E2E2E;
}
#logo {
width: 778px;
height: 110px;
margin: 0 auto;
}
#logo h1, #logo h2 {
margin: 0;
letter-spacing: -0.05em;
text-transform: lowercase;
font-weight: normal;
color: #FFFFFF;
}
#logo h1 {
float: left;
padding-top: 40px;
font-size: 4em;
}
#logo h1 a {
text-decoration: none;
color: #FFFFFF;
}
#logo h2 {
float: left;
padding: 67px 0 0 8px;
font-size: 2em;
font-style: italic;
color: #858585;
}
/* Menu */
#menu-wrap {
background: #2E2E2E;
}
#menu {
width: 778px;
height: 50px;
margin: 0 auto;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
#menu li {
display: inline;
}
#menu a {
float: left;
margin-right: 6px;
padding: 5px 20px 5px 20px;
background: #4C4D51;
border: 1px #575C5F solid;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-size: 11px;
color: #FFFFFF;
}
#menu a:hover {
text-decoration: none;
background: #983D3A;
border: 1px #D45951 solid;
}
#menu .first a {
background: #983D3A;
border: 1px #D45951 solid;
}
/* Page */
#page {
width: 778px;
margin: 0 auto;
}
#content {
background: #F4EDD3;
border-bottom: 4px #BBB082 solid;
}
/* Post */
.post {
}
.post .title {
margin: 0;
}
.post .title a {
text-decoration: none;
}
.post .byline {
margin: 0 0 30px 0;
line-height: normal;
}
.post .entry {
}
.post .meta {
clear: both;
}
.post .meta a {
text-decoration: none;
font-weight: bold;
}
.post .meta a:hover {
text-decoration: underline;
}
.post .meta .comments {
padding-left: 20px;
background: url(blackberry-images/img07.gif) no-repeat left center;
}
.post .meta .permalink {
padding-left: 20px;
background: url(blackberry-images/img08.gif) no-repeat left center;
}
/* Latest Post */
#latest-post-wrap {
background: #E8DBA7;
border-bottom: 4px #BBB082 solid;
}
#latest-post {
width: 778px;
margin: 0 auto;
padding: 0 0 20px 0;
}
#latest-post h1 {
margin: 10px 0;
padding: 0;
}
#latest-post p {
margin: 0;
padding-bottom: 15px;
}
#latest-post .meta {
padding: 10px 0 0 0;
}
#latest-post .byline {
margin: 0 0 10px 0;
padding: 10px 0;
background: #BBB082;
font-size: .9em;
font-weight: bold;
color: #FFFFFF;
}
#latest-post .byline span {
padding: 0 0 0 15px;
}
#latest-post .byline a {
padding: 0 30px 0 0;
background: url(blackberry-images/img05.gif) no-repeat right top;
text-decoration: none;
}
#latest-post .byline a:hover {
text-decoration: underline;
}
/* Recent Posts */
#recent-posts {
width: 778px;
margin: 0 auto;
}
#recent-posts h2 {
margin: 0;
padding: 10px 0 10px 15px;
background: #BBB082;
letter-spacing: .5em;
text-transform: uppercase;
text-align: center;
font-size: .9em;
font-weight: bold;
color: #FFFFFF;
}
#recent-posts h3 {
margin: 20px 0 0 0;
padding: 0;
font-size: 1.4em;
}
#recent-posts h3 a {
text-decoration: none;
}
#recent-posts ul {
margin: 0;
padding: 0;
list-style: none;
}
#recent-posts li {
float: left;
width: 240px;
padding-left: 29px;
}
#recent-posts li.first {
padding: 0;
}
#recent-posts .byline {
margin: 0 0 10px 0;
padding: 0;
border-bottom: 1px #DDD7C0 solid;
text-align: left;
font-size: 10px;
font-weight: bold;
}
#recent-posts .byline span {
}
#recent-posts .byline a {
padding: 0 30px 0 0;
background: url(blackberry-images/img05.gif) no-repeat right top;
text-decoration: none;
}
#recent-posts .byline a:hover {
text-decoration: underline;
}
#recent-posts p {
padding: 0;
margin: 0;
}
/* Sidebar */
#sidebar {
width: 778px;
margin: 0 auto;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li {
float: left;
width: 259px;
}
#sidebar li ul {
padding-left: 20px;
}
#sidebar li li {
float: none;
width: auto;
padding: 3px 0;
background: none;
}
#sidebar h2 {
margin: 0 0 20px 0;
padding: 10px 0 10px 16px;
background: #BBB082;
text-transform: uppercase;
letter-spacing: .5em;
font-size: .9em;
font-weight: bold;
color: #FFFFFF;
}
/* Search */
#search {
}
#search #s {
width: 80%;
margin-bottom: 10px;
}
/* Calendar */
#calendar {
}
#calendar table, #calendar caption {
width: 100%;
text-align: center;
}
#calendar caption {
font-weight: bold;
}
#calendar a {
font-weight: bold;
}
/* Footer */
#footer {
clear: both;
margin: 0 auto;
padding: 20px 0;
background: url(blackberry-images/img11.gif) repeat-x;
text-align: center;
}
#footer p {
margin: 0;
font-size: .8em;
color: #666666;
}
</style>
</head>
<body>
<div id="header">
<div id="logo">
<h1><a href="#">black berry </a></h1>
<h2>By Free CSS Templates</h2>
</div>
</div>
<div id="menu-wrap">
<div id="menu">
<ul>
<li class="first"><a href="#" accesskey="1" title="">Homepage</a></li>
<li><a href="#" accesskey="2" title="">Products</a></li>
<li><a href="#" accesskey="3" title="">Services</a></li>
<li><a href="#" accesskey="4" title="">About Us</a></li>
<li><a href="#" accesskey="5" title="">Contact Us</a></li>
</ul>
</div>
</div>
<hr />
<div id="latest-post-wrap">
<div id="latest-post" class="post">
<p class="byline"><span>Posted on December 15th, 2007 by <a href="#">Someone</a></span></p>
<h1 class="title"><a href="#">About This Free CSS Template</a></h1>
<div class="entry"><img src="blackberry-images/img06.jpg" alt="" width="300" height="200" class="left" />
<p>This is <strong>Black Berry </strong>, a free, fully standards-compliant CSS template designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
<p>This free template is released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attributions 2.5</a> license, so youre pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :) This design is also available as a <a href="http://www.freewpthemes.net/preview/blackberry/">WordPress theme</a> at <a href="http://www.freewpthemes.net/">Free Wordpress Themes</a>.</p>
<p>Thanks to <a href="http://www.pdphoto.org/">PDPhoto.org</a> for the photo and <a href="http://www.famfamfam.com/">FAMFAMFAM</a> for the icons.</p>
</div>
<p class="meta"><a href="#" class="comments">14 Comments</a> <a href="#" class="permalink">Permalink</a></p>
</div>
</div>
<div id="content">
<div id="recent-posts">
<h2>Recent Posts</h2>
<ul>
<li class="first">
<h3><a href="#">Aliquam Libero</a></h3>
<p class="byline"><span>Posted on Dec 15th, 2007 by <a href="#">Someone</a></span></p>
<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 sit amet nulla. Nam in massa. Sed vel tellus. Curabitur placerat, nulla. <a href="#">More</a></p>
</li>
<li>
<h3><a href="#">Semper Vestibulum</a></h3>
<p class="byline"><span>Posted on Dec 15th, 2007 by <a href="#">Someone</a></span></p>
<p>Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh. Duis enim dapibus lacinia, venenatis id, quam. Vestibulum imperdiet, magna nec imperdiet, magna nec imperdiet, magna nec ipsum dolor eleifend. <a href="#">More</a></p>
</li>
<li>
<h3><a href="#">Etiam Malesuada</a></h3>
<p class="byline"><span>Posted on Dec 15th, 2007 by <a href="#">Someone</a></span></p>
<p>Nulla enim eros, porttitor eu, tempus id, varius non, nibh. Duis enim nulla, luctus eu, dapibus lacinia, venenatis id, quam. Vestibulum imperdiet eleifend rutrum, nunc lectus vestibulum velit, euismod lacinia quam nisl id lorem. <a href="#">More</a></p>
</li>
</ul>
<div style="clear: both; height: 40px;"> </div>
</div>
<div id="sidebar">
<ul>
<li id="search">
<h2>Search</h2>
<form id="searchform" method="get" action="">
<div>
<input type="text" name="s" id="s" size="15" />
<br />
<input name="submit" type="submit" value="Search" />
</div>
</form>
</li>
<li id="calendar">
<h2>Calendar</h2>
<div id="calendar_wrap">
<table summary="Calendar">
<caption>
October 2008
</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="October" colspan="3" id="prev"><a href="#" title="View posts for October 2007">« Oct</a></td>
<td class="pad"> </td>
<td abbr="December" colspan="3" id="next"><a href="3" title="View posts for October 2007">Dec »</a></td>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="3" class="pad"> </td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td><a href="#">12</a></td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td id="today">24</td>
<td>25</td>
</tr>
<tr>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td class="pad" colspan="2"> </td>
</tr>
</tbody>
</table>
</div>
</li>
<li id="categories-1">
<h2>Categories</h2>
<ul>
<li><a href="#" title="View all posts filed under Uncategorized">Uncategorized</a> (3) </li>
<li><a href="#" title="View all posts filed under Lorem Ipsum">Lorem Ipsum</a> (42) </li>
<li><a href="#" title="View all posts filed under Urna Congue Rutrum">Urna Congue Rutrum</a> (28) </li>
<li><a href="#" title="View all posts filed under Augue Praesent">Augue Praesent</a> (55) </li>
<li><a href="#" title="View all posts filed under Vivamus Fermentum">Vivamus Fermentum</a> (13) </li>
</ul>
</li>
</ul>
<div style="clear: both; height: 40px;"></div>
</div>
</div>
<hr />
<div id="footer">
<p class="legal">©2007 All Rights Reserved. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
</body>
</html>
Related examples in the same category