showcase : Design 7 « Templates « HTML / CSS

showcase

  

<!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       : Showcase 
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>Showcase by Free CSS Templates</title>
<meta name="keywords" content="" />
<meta name="Showcase " 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: #131516;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #FFFFFF;
}

h1, h2, h3 {
  margin-top: 0;
  color: #FFFFFF;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.6em;
}

h3 {
  font-size: 1em;
}

ul {
  list-style-image: url(showcase-images/img07.gif);
}

a {
  text-decoration: none;
  border-bottom: 1px dotted #CCCCCC;
  color: #FFFFFF;
}

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: 1000px;
  height: 88px;
  margin: 0 auto;
  padding: 0 10px;
}

#logo h1, #logo p {
  float: left;
  margin: 0;
  color: #FFFFFF;
}

#logo h1 {
  padding: 30px 0 0 0;
  text-transform: lowercase;
  font-weight: normal;
  font-size: 3em;
}

#logo p {
  text-transform: uppercase;
  padding: 52px 0 0 3px;
  font-size: 10px;
  color: #616161;
}

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

/* Menu */

#menu {
  width: 1000px;
  height: 30px;
  margin: 0 auto;
  padding-top: 10px;
}

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

#menu li {
  display: inline;
  background: #131516;
}

#menu a {
  display: block;
  float: left;
  background: #1F1F1F;
  margin: 0 3px 0 0;
  padding: 8px 15px 10px 15px;
  border: none;
  text-decoration: none;
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  color: #CCCCCC;
}

#menu a:hover {
  background: #000000;
  margin: 0 3px 0 0;
  padding: 8px 15px 10px 15px;
  color: #FFFFFF;
}

#menu .current_page_item a {
  background: #000000;
  margin: 0 3px 0 0;
  padding: 8px 15px 10px 15px;
  color: #FFFFFF;
}

/* Wrapper */

#wrapper {
  background: #000000;
}

/* Page */

#page {
  width: 1000px;
  margin: 0 auto;
  padding: 30px 0;
}

#page-bg {
  padding: 11px 24px;
  background: url(showcase-images/img03.jpg) no-repeat;
}

/* Latest Post */

#latest-post {
  padding: 20px;
  border: 1px solid #E7E7E7;
}

/* Content */

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

.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;
  background: url(showcase-images/img01.jpg) no-repeat right 50%;
  font-weight: normal;
}

.title a {
  border-bottom: none;
}

.title a:hover {
  border-bottom: 1px dotted #CCCCCC;
}

.byline {
  border-top: 1px solid #0A8A0A;
  margin: 0 0 20px 0;
  text-transform: uppercase;
}

.entry {
}

.links {
  font-size: 11px;
  background: #0A8A0A;
}

.links a {
  margin-left: 15px;
  padding-left: 10px;
  background: url(showcase-images/img02.gif) no-repeat left 50%;
  border: none;
}

.links a:hover {
}

.links .comments {
}

/* Sidebars */

.sidebar {
  float: left;
  width: 200px;
  padding: 0 0 0 21px;
}

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

.sidebar li {
  padding: 0 0 20px 0;
}

.sidebar li ul {
}

.sidebar li li {
  padding: 5px 0 5px 0px;
}

.sidebar li h2 {
  margin: 0 0 10px 0;
  padding: 5px 0;
  border-bottom: 1px solid #0A8A0A;
  font-size: 16px;
  font-weight: normal;
  color: #FFFFFF;
}

/* Search */

#searchform {
  margin: 0;
  padding: 0;
}

#searchform br {
  display: none;
}

#s {
  margin: 0;
  padding: 2px 2px;
  width: 120px;
  height: 18px;
  border: 1px solid #0A8A0A;
  background: #000000;
  font-size: 10px;
  color: #FFFFFF;
}

#x {
  margin: 0;
  padding: 2px 5px;
  height: 25px;
  background: #0A8A0A;
  border: 1px solid #0A8A0A;
  text-decoration: none;
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  color: #FFFFFF;
}
/* Calendar */

#calendar_wrap {
  padding: 0;
  text-align: center;
}

#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 {
  height: 50px;
}

#footer p {
  margin: 0;
  padding: 20px 0 0 0;
  text-align: center;
  text-transform: uppercase;
  font-size: smaller;
  color: #FFFFFF;
}

#footer a {
  color: #FFFFFF;
}

</style>


</head>
<body>
<!-- start header -->
<div id="logo">
  <h1><a href="#">Showcase </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="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 October 1st, 2007 by <a href="#">Free CSS Templates</a></small></p>
      <div class="entry">
        <p><strong>Showcase </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 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/Showcase /">WordPress theme</a> at <a href="http://www.freewpthemes.net/">Free WordPress Themes</a>.</p>
        <p class="links"><a href="#" class="more">Read More</a> &nbsp;&nbsp;&nbsp; <a href="#" class="comments">No Comments</a></p>
      </div>
    </div>
    <div class="post">
      <h2 class="title"><a href="#">Nulla luctus eleifend</a></h2>
      <p class="byline"><small>Posted on October 1st, 2007 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>
        <p class="links"><a href="#" class="more">Read More</a> &nbsp;&nbsp;&nbsp; <a href="#" class="comments">No Comments</a></p>
      </div>
    </div>
    <div class="post">
      <h2 class="title"><a href="#">Praesent mattis condimentum</a></h2>
      <p class="byline"><small>Posted on October 1st, 2007 by <a href="#">Free CSS Templates</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>
        <p class="links"><a href="#" class="more">Read More</a> &nbsp;&nbsp;&nbsp; <a href="#" class="comments">No Comments</a></p>
      </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>
        <form id="searchform" method="get" action="#">
          <div>
            <input type="text" name="s" id="s" size="15" value="" />
            <br />
            <input type="submit" value="Search" id="x" />
          </div>
        </form>
      </li>
      <li>
        <h2>Tags</h2>
        <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></li>
      <li>
        <h2>Calendar</h2>
        <div id="calendar_wrap">
          <table width="100%" 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="#" title="View posts for September 2007">&laquo; Sep</a></td>
                <td class="pad">&nbsp;</td>
                <td colspan="3" id="next">&nbsp;</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">&nbsp;</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;">&nbsp;</div>
</div>
<!-- end page -->
</div>
<div id="footer">
  <p>&copy;2007 All Rights Reserved. &nbsp;&nbsp; Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
</body>
</html>

Related examples in the same category

1.	SimpleSimple
2.	simplestyle_1
3.	simplestyle_2
4.	simplestyle_3
5.	simplestyle_4
6.	simplestyle_5
7.	simplestyle_6
8.	pomodoro
9.	portcentral
10.	portfolio-extended
11.	portfolio
12.	postscriptum
13.	powderpuff
14.	power
15.	precision
16.	predilection
17.	premiumseries
18.	prepaid
19.	presented
20.	pressurized
21.	prideandprejudice
22.	primitiveelement
23.	printing
24.	pristine
25.	private-lawyer-co
26.	product-landing-page
27.	production
28.	ProductPackage
29.	programme
30.	progress
31.	projection
32.	proofing
33.	Prosperity
34.	province
35.	purensimple
36.	purgatory_shuffle
37.	puzzled
38.	quadrangle
39.	quartz-istorage
40.	quatrain
41.	racetrackplaya
42.	radiance
43.	rainonleaves
44.	ramblingsoul-2
45.	ramblingsoul-9
46.	ramblingsoul3
47.	ramblingsoul4
48.	ramblingsoul5
49.	ramblingsoul7
50.	ramblingsoul_2
51.	ramblingsoul_3
52.	random
53.	rational
54.	realize
55.	realone
56.	rebel-magazine
57.	reckoning
58.	recreations
59.	reference
60.	regeneracy
61.	rehabilitation
62.	reinvent
63.	replenish
64.	republic
65.	resizeme
66.	resplendissant
67.	revolt-01
68.	ridinghood
69.	rockband
70.	rogue
71.	Rothko
72.	route66
73.	rust
74.	safe-as-houses
75.	sahara
76.	sampling
77.	Sapphire
78.	schemermag
79.	scotchmark
80.	scribbled
81.	secretlab
82.	seduction
83.	selcouth
84.	sensa
85.	settings
86.	shallowgrunge
87.	shalom-typo
88.	shape
89.	she
90.	sifiso
91.	silenceandharmony
92.	SILK
93.	Simpatico
94.	sindromk
95.	singapore
96.	sinorcaish
97.	six-oh-six
98.	sixpence
99.	sixties_style
100.	skipopia
101.	skitemplate
102.	sky
103.	sliced
104.	slight_amnesia
105.	socialnet
106.	softenedcells
107.	solemnity
108.	solitude
109.	soloss
110.	solutions
111.	somewhere-peaceful
112.	soniatemplate
113.	space
114.	spaced
115.	spasaloon
116.	spatter
117.	speedracing
118.	spheroids
119.	spidercity
120.	splash
121.	splatt
122.	spontaneous