portcentral : Design 7 « Templates « HTML / CSS

portcentral

  

<!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>Port Central</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: #374536 url(portcentral-images/img01.gif);
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #666666; 
}

h1, h2, h3 {
  font-weight: normal;
  color: #333333;
}

h1 {
  letter-spacing: -2px;
  font-size: 182%;
}

h2 {
  letter-spacing: -1px;
  font-size: 152%;
}

h3 {
  font-size: 100%;
  font-weight: bold;
}

p, blockquote, ul, ol {
  margin-bottom: 1.6em;
  line-height: 180%;
}

p {
}

blockquote {
  margin-left: 3em;
  font-style: italic;
}

ul {
  margin-left: 3em;
}

ol {
  margin-left: 3em;
}

a {
}

a:hover {
  text-decoration: none;
}

small {
}

hr {
  display: none;
}

img {
  border: none;
}

img.left {
  float: left;
  margin: 0 15px 0 0;
}

img.right {
  float: left;
  margin: 0 0 0 15px;
}

/* Wrapper */

#wrapper {
  background: url(portcentral-images/img02.gif) repeat-x;
}

/* Header */

#header {
  padding: 30px 0;
}

#header h1, #header h2 {
  text-align: center;
}

#header h1 {
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 28px;
  font-weight: normal;
}

#header h1 a {
  color: #FFFFFF;
}

#header h2 {
  text-transform: lowercase;
  letter-spacing: 2px;
  font-size: 12px;
  font-style: italic;
}

#header h2 a {
  color: #DDEEFF;
}

#header a {
  text-decoration: none;
}

/* Menu */

#menu {
  width: 540px;
  height: 40px;
  margin: 0 auto;
  background: url(portcentral-images/img03.gif) repeat-x;
}

#menu ul {
  width: 540px;
  height: 40px;
  margin: 0;
  padding: 0;
  background: url(portcentral-images/img04.gif) no-repeat right top;
  list-style: none;
  line-height: normal;
}

#menu li {
  display: inline;
}

#menu a {
  display: block;
  float: left;
  height: 27px;
  padding: 13px 20px 0 22px;
  background: url(portcentral-images/img04.gif) no-repeat;
  text-decoration: none;
  font-size: 85%;
  font-weight: bold;
  color: #FFFFFF;
}

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

/* Page */

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

/* Ads */

#ads {
  float: right;
  width: 180px;
  padding: 0 0 0 20px;
}

#ads h2 {
  margin-bottom: 20px;
  padding: 15px 0 1px 0;
  background: url(portcentral-images/img06.gif) repeat-x left bottom;
  text-transform: lowercase;
  letter-spacing: 1px;
  font-size: 18px;
  font-style: italic;
  color: #FFFFFF;
}

/* Content */

#content {
  float: right;
  width: 540px;
  background: #FFFFFF url(portcentral-images/img05.gif) repeat-x;
}

#content .post {
  padding: 20px;
  border-bottom: 1px solid #CCCCCC;
}

#content .date {
  margin-bottom: 20px;
  line-height: normal;
}

#content .story {
}

#content .more {
  clear: both;
  margin: 0;
  text-align: right;
  font-weight: bold;
}

#content a {
  color: #1777B1;
}

#content a:hover {
  color: #C90404;
}

/* Sidebar */

#sidebar {
  float: right;
  width: 180px;
  padding: 0 20px 0 0;
}

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

#sidebar li {
}

#sidebar li ul {
  margin-left: 20px;
  line-height: 180%;
}

#sidebar li li {
}

#sidebar li h2 {
  margin-bottom: 20px;
  padding: 15px 0 1px 0;
  background: url(portcentral-images/img06.gif) repeat-x left bottom;
  text-transform: lowercase;
  letter-spacing: 1px;
  font-size: 18px;
  font-style: italic;
  color: #FFFFFF;
}

#sidebar a {
  color: #CCCCCC;
}

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

#sidebar li li a {
}

/* Footer */

#footer {
  clear: both;
  width: 540px;
  margin: 0 auto;
  padding: 20px 0;
  background: url(portcentral-images/img06.gif) repeat-x 0px 1px;
  text-align: center;
  font-size: 85%;
}

#footer p {
  margin: 0;
  line-height: normal;
}

#footer a {
  color: #666666;
}

</style>


</head>
<body>
<div id="wrapper">
  <div id="header">
    <h1><a href="http://www.free-css.com/">Port Central</a></h1>
    <h2><a href="http://www.free-css.com/">By Free CSS Templates</a></h2>
    <hr />
  </div>
  <!-- end div#header -->
  <div id="menu">
    <ul>
      <li><a href="http://www.free-css.com/">Home</a></li>
      <li><a href="http://www.free-css.com/">Blogs</a></li>
      <li><a href="http://www.free-css.com/">Join</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>
  <!-- end div#menu -->
  <div id="page">
    <div id="ads">
      <h2>Sponsors</h2>
      <div style="width: 160px; height: 600px; margin: 0 auto; background: #33CCFF; text-align: center; color: #000000;">
        <p><strong>Wide Skyscraper</strong></p>
        <p>160x600 pixels</p>
      </div>
    </div>
    <!-- end div#ads -->
    <div id="content">
      <div class="post">
        <h1>Welcome to Port Central!</h1>
        <p class="date"><small>Posted 26 May, 2007 9:32 PM GMT</small></p>
        <div class="story"><img src="portcentral-images/imgX.jpg" alt="" width="120" height="120" class="left" />
          <p><strong>Port Central</strong> is a free template from Free CSS Templates released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The photo is from <a href="http://www.free-css.com/">PDPhoto.org</a>. You're free to use it for both commercial or personal use. I only ask that you link back to <a href="http://www.freecsstemplates.org/">my site</a> in some way. <em>Enjoy :)</em></p>
        </div>
        <p class="more"><a href="http://www.free-css.com/">Read more&hellip;</a></p>
      </div>
      <div class="post">
        <h2>Lorem Ipsum Dolor?</h2>
        <p class="date"><small>Posted 26 May, 2007 9:32 PM GMT</small></p>
        <div class="story">
          <h3>Integer Nisl Risus</h3>
          <p>Quisque dictum integer nisl risus, sagittis convallis, rutrum id, and nibh:</p>
          <ol>
            <li><a href="http://www.free-css.com/">Integer sit amet pede vel arcu aliquet pretium.</a></li>
            <li><a href="http://www.free-css.com/">Pellentesque quis elit non lectus gravida blandit.</a></li>
            <li><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
            <li><a href="http://www.free-css.com/">Phasellus nec erat sit amet nibh pellentesque congue.</a></li>
            <li><a href="http://www.free-css.com/">Cras vitae metus aliquam risus pellentesque pharetra.</a></li>
            <li><a href="http://www.free-css.com/">Maecenas vitae orci vitae tellus feugiat eleifend.</a></li>
            <li><a href="http://www.free-css.com/">Etiam ac tortor eu metus euismod lobortis.</a></li>
            <li><a href="http://www.free-css.com/">Duis non ante in metus commodo euismod lobortis.</a></li>
          </ol>
        </div>
        <p class="more"><a href="http://www.free-css.com/">Read more&hellip;</a></p>
      </div>
      <div class="post">
        <h2>In Posuere: Eleifend Odio</h2>
        <p class="date"><small>Posted 26 May, 2007 9:32 PM GMT</small></p>
        <div class="story">
          <p>Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat:</p>
          <blockquote>
            <p>&ldquo;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. Curabitur sem urna, consequat vel, suscipit in, mattis placerat, nulla. Sed ac leo. Pellentesque imperdiet.&rdquo;</p>
          </blockquote>
        </div>
        <p class="more"><a href="http://www.free-css.com/">Read more&hellip;</a></p>
      </div>
    </div>
    <!-- end div#content -->
    <div id="sidebar">
      <ul>
        <li>
          <h2>Archives</h2>
          <ul>
            <li><a href="http://www.free-css.com/">May 2007</a> (26)</li>
            <li><a href="http://www.free-css.com/">April 2007</a> (30)</li>
            <li><a href="http://www.free-css.com/">March 2007</a> (31)</li>
            <li><a href="http://www.free-css.com/">February 2007</a> (28)</li>
            <li><a href="http://www.free-css.com/">January 2007</a> (31)</li>
          </ul>
        </li>
        <li>
          <h2>Categories</h2>
          <ul>
            <li><a href="http://www.free-css.com/">Semper Vestibulum</a></li>
            <li><a href="http://www.free-css.com/">Venenatis Luctus</a></li>
            <li><a href="http://www.free-css.com/">Malesuada Rutrum</a></li>
            <li><a href="http://www.free-css.com/">Elementum Facilisis</a></li>
            <li><a href="http://www.free-css.com/">Tincidunt Ague</a></li>
            <li><a href="http://www.free-css.com/">Sed Quis Sagittis</a></li>
          </ul>
        </li>
        <li>
          <h2>Lorem Ipsum</h2>
          <ul>
            <li><a href="http://www.free-css.com/">Ut semper vestibulum est</a></li>
            <li><a href="http://www.free-css.com/">Vestibulum venenatis</a></li>
            <li><a href="http://www.free-css.com/">Etiam malesuada enim</a></li>
            <li><a href="http://www.free-css.com/">Aenean facilisis</a></li>
            <li><a href="http://www.free-css.com/">Ut elit vitae augue</a></li>
            <li><a href="http://www.free-css.com/">Sed quis odio leo</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- end div#sidebar -->
  </div>
  <!-- end div#page -->
  <div id="footer">
    <p id="legal">Copyright &copy; 2007 Port Central. All Rights Reserved. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
    <p id="links"><a href="http://www.free-css.com/">Privacy Policy</a> | <a href="http://www.free-css.com/">Terms of Use</a></p>
  </div>
  <!-- end div#footer -->
</div>
<!-- end div#wrapper -->
</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.	portfolio-extended
10.	portfolio
11.	postscriptum
12.	powderpuff
13.	power
14.	precision
15.	predilection
16.	premiumseries
17.	prepaid
18.	presented
19.	pressurized
20.	prideandprejudice
21.	primitiveelement
22.	printing
23.	pristine
24.	private-lawyer-co
25.	product-landing-page
26.	production
27.	ProductPackage
28.	programme
29.	progress
30.	projection
31.	proofing
32.	Prosperity
33.	province
34.	purensimple
35.	purgatory_shuffle
36.	puzzled
37.	quadrangle
38.	quartz-istorage
39.	quatrain
40.	racetrackplaya
41.	radiance
42.	rainonleaves
43.	ramblingsoul-2
44.	ramblingsoul-9
45.	ramblingsoul3
46.	ramblingsoul4
47.	ramblingsoul5
48.	ramblingsoul7
49.	ramblingsoul_2
50.	ramblingsoul_3
51.	random
52.	rational
53.	realize
54.	realone
55.	rebel-magazine
56.	reckoning
57.	recreations
58.	reference
59.	regeneracy
60.	rehabilitation
61.	reinvent
62.	replenish
63.	republic
64.	resizeme
65.	resplendissant
66.	revolt-01
67.	ridinghood
68.	rockband
69.	rogue
70.	Rothko
71.	route66
72.	rust
73.	safe-as-houses
74.	sahara
75.	sampling
76.	Sapphire
77.	schemermag
78.	scotchmark
79.	scribbled
80.	secretlab
81.	seduction
82.	selcouth
83.	sensa
84.	settings
85.	shallowgrunge
86.	shalom-typo
87.	shape
88.	she
89.	showcase
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