goldengate
<!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 : Golden Gate
Description: A three-column, fixed-width blog design.
Version : 1.0
Released : 20080905
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Golden Gate by Free CSS Templates</title>
<meta name="keywords" content="" />
<meta name="Golden Gate " 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
*/
body {
margin: 0;
padding: 0;
background: #FFFFFF url(goldengate-images/img01.jpg) repeat-x left top;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #000000;
}
h1, h2, h3 {
margin-top: 0;
color: #0153B4;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 1em;
}
ul {
list-style-image: url(goldengate-images/img07.gif);
}
a {
text-decoration: none;
border-bottom: 1px dashed #CCCCCC;
color: #0153B4;
}
a:hover {
border-bottom: none;
}
a img {
border: none;
}
img.left {
float: left;
margin: 0 20px 0 0;
}
img.right {
float: right;
margin: 0 0 0 20px;
}
/* Header */
#logo {
width: 972px;
height: 71px;
margin: 0 auto;
padding: 0 10px;
}
#logo h1, #logo p {
float: left;
margin: 0;
color: #FFFFFF;
}
#logo h1 {
padding: 10px 0 0 0;
text-transform: lowercase;
font-weight: normal;
font-size: 3em;
}
#logo p {
text-transform: uppercase;
padding: 37px 0 0 3px;
font-size: 10px;
color: #FFFFFF;
}
#logo a {
border: none;
text-decoration: none;
color: #FFFFFF;
}
/* Menu */
#menu {
width: 972px;
height: 52px;
margin: 0 auto;
padding-top: 7px;
background: url(goldengate-images/img02.jpg) no-repeat left top;
}
#menu ul {
margin: 0 0 0 20px;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
margin: 0 3px 0 10px;
background: url(goldengate-images/img04.jpg) no-repeat left 50%;
padding: 10px 15px 10px 15px;
border: none;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 11px;
color: #262626;
}
#menu a:hover {
margin: 0 3px 0 0;
padding: 10px 15px 10px 15px;
color: #000000;
}
#menu .current_page_item a {
background: none;
margin: 0 3px 0 0;
padding: 10px 15px 10px 0px;
color: #000000;
}
/* Banner */
#banner {
margin: 0 auto;
width: 972px;
height: 310px;
background: url(goldengate-images/img03.jpg) no-repeat left top;
}
/* Wrapper */
#wrapper {
}
/* Page */
#page {
width: 972px;
margin: 0 auto;
padding: 30px 0;
}
#page-bg {
padding: 11px 24px;
background: url(goldengate-images/img03.jpg) no-repeat;
}
/* Latest Post */
#latest-post {
padding: 20px;
border: 1px dashed #CCCCCC;
}
/* Content */
#content {
float: left;
width: 530px;
}
.post {
margin-bottom: 20px;
padding-bottom: 15px;
line-height: 200%;
}
.post h1 {
font-weight: normal;
font-size: 30px;
}
.post h2 {
font-size: 24px;
}
.title {
margin: 0;
padding-bottom: 6px;
font-weight: normal;
}
.title a {
border-bottom: none;
}
.title a:hover {
border-bottom: 1px dashed #CCCCCC;
}
.byline {
border-top: 1px dashed #CCCCCC;
margin: 0 0 20px 0;
text-transform: uppercase;
}
.entry {
}
.links {
font-size: 11px;
}
.links a {
display: block;
border: none;
color: #333333;
}
.links a:hover {
}
.links .more {
float: left;
padding-left: 25px;
bpadding-right: 15px;
text-transform: uppercase;
}
.links .comments {
float: left;
padding-left: 20px;
background: url(goldengate-images/img04.jpg) no-repeat left top;
}
/* Sidebars */
.sidebar {
float: left;
width: 200px;
padding: 0 0 0 21px;
}
.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
.sidebar li {
margin-bottom: 10px;
padding: 0 0 20px 0px;
background: url(goldengate-images/img06.jpg) repeat-y left top;
border-bottom: 1px solid #CCCCCC;
}
.sidebar li ul {
}
.sidebar li li {
margin: 0;
padding: 5px 10px;
border: none;
}
.sidebar li h2 {
height: 30px;
margin: 0 0 10px 0;
padding: 14px 0 5px 10px;
background: url(goldengate-images/img05.jpg) no-repeat left top;
font-size: 14px;
font-weight: normal;
color: #FFFFFF;
}
.sidebar p {
padding: 0 10px;
}
/* Search */
#searchform {
margin: 0;
padding: 0;
border: none;
background: none;
}
#searchform br {
display: none;
}
#s {
margin: 0;
padding: 2px 2px;
width: 120px;
height: 18px;
font-size: 10px;
color: #000000;
}
#x {
margin: 0;
padding: 2px 5px;
height: 24px;
border: none;
background: #A49D3C;
text-decoration: none;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}
/* Calendar */
#calendar_wrap {
padding: 0;
text-align: center;
font-size: 10px;
}
#calendar_wrap table {
width: 100%;
}
#calendar_wrap th {
}
#calendar_wrap td {
}
#calendar_wrap tfoot td {
border: none;
}
#calendar_wrap tfoot td#prev {
text-align: left;
font-weight: bold;
border: none;
}
#calendar_wrap tfoot td#prev a {
border: none;
}
#calendar_wrap tfoot td#next {
text-align: right;
font-weight: bold;
border: none;
}
#calendar_wrap tfoot td#next a {
border: none;
}
/* Footer */
#footer {
border-top: 1px solid #C8C8C8;
height: 100px;
}
#footer p {
margin: 0;
padding: 40px 0 0 0;
text-align: center;
font-size: 11px;
color: #000000;
}
#footer a {
color: #000000;
}
</style>
</head>
<body>
<!-- start header -->
<div id="logo">
<h1><a href="#">Golden Gate </a></h1>
<p>Designed By Free CSS Templates</p>
</div>
<div id="menu">
<ul id="main">
<li class="current_page_item"><a href="#">Homepage</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<ul id="feed">
<li><a href="#">Entries RSS</a></li>
<li><a href="#">Comments RSS</a></li>
</ul>
</div>
<!-- end header -->
<div id="banner"> </div>
<div id="wrapper">
<!-- start page -->
<div id="page">
<!-- start content -->
<div id="content">
<div class="post">
<h1 class="title"><a href="#">Welcome to Our Website!</a></h1>
<p class="byline"><small>Posted on January 1st, 2008 by <a href="#">Free CSS Templates</a></small></p>
<div class="entry">
<p><strong>Golden Gate </strong> is a free, fully standards-compliant CSS template designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>. The photo used in this template is from <a href="http://www.pdphoto.org">PDPhoto.org</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/goldengate">WordPress theme</a> at <a href="http://www.freewpthemes.net/">Free WordPress Themes</a>.</p>
</div>
</div>
<div class="post">
<h2 class="title"><a href="#">Nulla luctus eleifend</a></h2>
<p class="byline"><small>Posted on January 1st, 2008 by <a href="#">Free CSS Templates</a></small></p>
<div class="entry">
<p>Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit. Nullam ante orci, pellentesque eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus. </p>
</div>
</div>
<div class="post">
<h2 class="title"><a href="#">Praesent mattis condimentum</a></h2>
<p class="byline"><small>Posted on January 1st, 2008 by <a href="#">Free CSS Templates</a></small></p>
<div class="entry">
<p>Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit. Nullam ante orci, pellentesque eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. </p>
<h3>An H3 Followed by a Blockquote:</h3>
<blockquote>
<p>“Donec leo, vivamus nibh in augue at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh.”</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>
</div>
</div>
</div>
<!-- end content -->
<!-- start sidebars -->
<div id="sidebar1" class="sidebar">
<ul>
<li>
<h2>Recent Posts</h2>
<ul>
<li><a href="#">Aliquam libero</a></li>
<li><a href="#">Consectetuer adipiscing elit</a></li>
<li><a href="#">Metus aliquam pellentesque</a></li>
<li><a href="#">Suspendisse iaculis mauris</a></li>
<li><a href="#">Urnanet non molestie semper</a></li>
<li><a href="#">Proin gravida orci porttitor</a></li>
</ul>
</li>
<li>
<h2>Recent Comments</h2>
<ul>
<li><a href="#">Free CSS Templates</a> on <a href="#">Aliquam libero</a></li>
<li><a href="#">Free CSS Templates</a> on <a href="#">Consectetuer adipiscing elit</a></li>
<li><a href="#">Free CSS Templates</a> on <a href="#">Metus aliquam pellentesque</a></li>
<li><a href="#">Free CSS Templates</a> on <a href="#">Suspendisse iaculis mauris</a></li>
<li><a href="#">Free CSS Templates</a> on <a href="#">Urnanet non molestie semper</a></li>
<li><a href="#">Free CSS Templates</a> on <a href="#">Proin gravida orci porttitor</a></li>
</ul>
</li>
<li>
<h2>Categories</h2>
<ul>
<li><a href="#">Aliquam libero</a></li>
<li><a href="#">Consectetuer adipiscing elit</a></li>
<li><a href="#">Metus aliquam pellentesque</a></li>
<li><a href="#">Suspendisse iaculis mauris</a></li>
<li><a href="#">Urnanet non molestie semper</a></li>
<li><a href="#">Proin gravida 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>
</ul>
</div>
<div id="sidebar2" class="sidebar">
<ul>
<li>
<h2>Tags</h2>
<p><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, integer nisl risus, sagittis convallis, rutrum id, elementum congue</a></p></li>
<li>
<h2>Calendar</h2>
<div id="calendar_wrap">
<table width="80%" summary="Calendar">
<caption>
January 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="September" colspan="3" id="prev"><a href="#" title="View posts for September 2007">« Sep</a></td>
<td class="pad"> </td>
<td colspan="3" id="next"> </td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td id="today">4</td>
<td>5</td>
<td>6</td>
<td>7</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>28</td>
</tr>
<tr>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="pad" colspan="4"> </td>
</tr>
</tbody>
</table>
</div>
</li>
<li>
<h2>Categories</h2>
<ul>
<li><a href="#">Aliquam libero</a></li>
<li><a href="#">Consectetuer adipiscing elit</a></li>
<li><a href="#">Metus aliquam pellentesque</a></li>
<li><a href="#">Suspendisse iaculis mauris</a></li>
<li><a href="#">Urnanet non molestie semper</a></li>
<li><a href="#">Proin gravida orci porttitor</a></li>
<li><a href="#">Aliquam libero</a></li>
<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>
<li><a href="#">Aliquam libero</a></li>
<li><a href="#">Consectetuer adipiscing elit</a></li>
<li><a href="#">Metus aliquam pellentesque</a></li>
<li><a href="#">Suspendisse iaculis mauris</a></li>
<li><a href="#">Urnanet non molestie semper</a></li>
<li><a href="#">Proin gravida orci porttitor</a></li>
</ul>
</li>
</ul>
</div>
<!-- end sidebars -->
<div style="clear: both;"> </div>
</div>
<!-- end page -->
</div>
<div id="footer">
<p>©2008 All Rights Reserved. Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
</body>
</html>
Related examples in the same category