newstheme : Design 6 « Templates « HTML / CSS

newstheme
   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>NewsTheme - About Us</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>
* {
  margin: 0; padding: 0;
}
body {
  text-align: center;
  font: 12px Verdana;
  color: #808080;
  background: #EEEEEE url(newstheme-images/background.gif) repeat-x 0 0;
}
a {
  text-decoration: none;
  color: #0A3C6F;
}
a:hover {
  text-decoration: underline;
}
img {
  border: 0;
}

.break {
  font-size: 0;
  width: 0; height: 0;
  clear: both;
}
.alignleft {
  float: left;
  margin: 4px 10px 5px 0;
}
.alignright {
  float: right;
  margin: 4px 0 5px 10px;
}
.aligncenter {
  text-align: center;
}
.hidden {
  display: none;
}

/** BEGIN wrapper **/
.wrapper {
  width: 970px;
  margin: auto auto;
  text-align: left;
  background: url(newstheme-images/wrapper.gif) repeat-y 0 0;
  padding: 0 12px;
}
/** END wrapper **/

/** BEGIN navigation **/
#navigation {
  height: 31px;
}
  #navigation .wrapper {
    background: none;
  }
  #navigation ul {
    list-style-type: none;
  }
    #navigation ul li {
      float: left;
      font-size: 0.9em;
    }
    #navigation ul li a {
      color: #ffffff;
      display: block;
      padding: 9px 12px;
    }
    #navigation ul li a:hover {
      color: #CCCCCC;
      text-decoration: none;
    }
  #navigation form {
    width: 279px; height: 21px;
    background: url(newstheme-images/search.gif) no-repeat 0 0;
    float: right;
    margin: 5px 10px 0 0;
  }
    #navigation form input {
      border: 0;
      font-size: 1em;
      font-family: Verdana;
      float: left;
      margin: 3px 0;
      width: 252px;
      background-color: transparent;
    }
    #navigation form button {
      border: 0;
      text-indent: -9999px;
      width: 16px; height: 16px;
      background-color: transparent;
      float: left;
      margin: 2px 3px;
    }
/** END navigation **/

/** BEGIN header **/
#header {
  height: 104px;
}
  #header h1 {
    float: left;
    font-size: 0;
    padding: 36px 24px 0;
  }
  #header h1 a {
    display: block;
    outline: none;
    text-indent: -9999px;
    width: 286px; height: 32px;
    background: url(newstheme-images/logo.gif) no-repeat 0 0;
  }
  #header .ad468x60 {
    float: right;
    padding: 22px 20px 0;
  }
/** END header **/

/** BEGIN body **/
#body {
  clear: both;
}
/** END body **/

/** BEGIN content **/
#content {
  width: 649px;
  float: left;
  padding: 0 0 20px 18px;
}
  #content p {
    margin-bottom: 10px;
  }
  #content h3 {
    margin-bottom: 5px;
    font-size: 1.5em;
    font-weight: normal;
  }
  #content blockquote {
    margin-bottom: 10px;
    padding: 10px 10px 5px;
    background-color: #eeeeee;
    border-width: 1px 0;
    border-style: solid;
    border-color: #cccccc;
  }
  #content ul {
    margin: 0 0 10px 18px;
  }
  #content ol {
    margin: 0 0 10px 16px;
    padding-left: 10px;
  }
  #content li {
    padding: 2px 0;
  }
  #content .title {
    font-size: 0.9em !important;
    text-transform: uppercase;
    color: #666666;
    margin-bottom: 10px;
  }
  #content .posts {
    border: 1px solid #DDDDDD;
    float: left;
    padding: 10px 4px 0;
  }
  #content .post {
    padding: 10px;
    margin-bottom: 12px;
    width: 298px; height: 300px;
    float: left;
  }
    #content .post h2 {
      margin-bottom: 10px;
      font-size: 1.5em;
    }
    #content .post .thumbnail {
      float: left;
      margin: 0 10px 5px 0;
      width: 125px;
    }
    #content .post .date {
      font-size: 0.9em;
      color: #0A3C6F;
    }
    #content .details {
      float: right;
      font-size: 0.8em;
    }
      #content .details a {
        display: block;
        float: left;
        padding: 7px 12px;
        background: green url(newstheme-images/details.gif) repeat-x 0 0;
        border: 1px solid #EBEBEB;
        margin-left: 4px;
      }
  #content .recent {
    border: 1px solid #DDDDDD;
    width: auto; height: auto;
  }
    #content .recent h2 {
      font-size: 1.6em;
    }
/** END content **/

/** BEGIN sidebar **/
#sidebar {
  float: right;
  width: 280px;
  padding: 0 15px 20px 0;
}
  #sidebar h2 {
    font-size: 1em;
    text-transform: uppercase;
    background: url(newstheme-images/sidehead.gif) repeat-x 0 0;
    padding: 7px 10px;
    margin-top: 10px;
    border-width: 0 1px;
    border-style: solid;
    border-color: #DDDDDD;
  }
  #sidebar ul {
    list-style-type: none;
    border: 1px solid #DDDDDD;
  }
    #sidebar ul li {
      line-height: 1.4em;
      padding: 5px 7px;
      border-bottom: 1px dotted #DADADA;
    }
    #sidebar ul li a {
      color: #808080;
    }
  #sidebar .l {
    float: left;
    width: 135px;
  }
  #sidebar .r {
    float: right;
    width: 135px;
  }
  #sidebar .ads {
    border: 1px solid #DDDDDD;
    padding: 6px 0;
    text-align: center;
  }
    #sidebar .ads img {
      margin: 3px;
    }
  #sidebar .subscribe {
    padding: 10px 10px 2px;
    border: 1px solid #dddddd;
    background: url(newstheme-images/subscribe.gif) no-repeat 10px 10px;
    height: 67px;
    font-size: 0.9em;
  }
    #sidebar .subscribe a {
      color: #808080;
      display: block;
      float: left;
      padding: 2px 0 0 20px;
    }
    #sidebar .subscribe input {
      border: 0;
      float: left;
      margin: 18px 0 0 10px;
      width: 165px;
    }
    #sidebar .subscribe button {
      border: 0;
      text-indent: -9999px;
      float: right;
      background-color: transparent;
      width: 64px; height: 64px;
      margin-top: -10px;
    }
  #sidebar .tags {
    padding: 10px;
    border: 1px solid #dddddd;
  }
    #sidebar .tags a {
      color: #808080;
    }
    #sidebar .tags a:hover {
      color: #0A3C6F;
      text-decoration: none;
    }
/** END sidebar **/

/** BEGIN footer **/
#footer {
  background-color: #224055;
  color: #ffffff;
  font-size: 0.9em;
  padding: 20px 0 60px;
  line-height: 1.7em;
}
  #footer .wrapper {
    background: none;
  }
  #footer a {
    color: #ffffff;
  }
  #footer .l {
    float: left;
    padding-left: 20px;
  }
  #footer .r {
    float: right;
    padding: 16px 20px 0 0;
  }
/** END footer **/

/** BEGIN miscellaneous **/
.postnav {
  clear: both;
  padding: 20px 25px 0;
  font-size: 0.9em;
}
  .postnav a {
    border: 1px solid #cccccc;
    padding: 3px 8px;
    color: #999999;
  }
  .postnav a:hover {
    border: 1px solid #000000;
    color: #000000;
    text-decoration: none;
  }
#comments {
  clear: both;
  border-top: 1px solid #eeeeee;
}
  #comments h2 {
    margin: 20px 0 5px;
    font-size: 1.5em;
    font-weight: normal;
  }
  #comments p {
    margin-bottom: 10px;
    line-height: 1.5em;
  }
  #comments form {
    padding-top: 20px;
  }
  #comments form p {
    margin-bottom: 5px;
  }
    #comments form input, textarea {
      border: 1px solid #cccccc;
      font-size: 0.9em;
      font-family: Verdana;
      padding: 4px;
      background-position: 4px 4px;
      background-repeat: no-repeat;
    }
    #comments form input {
      width: 260px;
      border: 1px solid #cccccc;
    }
    #comments form textarea {
      width: 350px;
      padding: 4px 4px !important;
      border: 1px solid #cccccc;
    }
    #comments form button {
      border: 1px solid #909090;
      background-color: #cccccc;
      font-size: 0.9em;
      font-family: Verdana;
      width: 120px; height: 23px;
    }
  .commentdetails {
    margin-top: 25px;
  }
  .commentauthor {
    margin-bottom: 5px !important;
    font-weight: bold;
  }
  .commentdate {
    font-size: 0.8em;
    margin-bottom: 5px;
    color: #909090;
  }
  .required {
    color: #ff0000;
  }
.posts .title {
  padding: 5px 10px;
}
.notfound {
  padding: 40px;
}
  .notfound h2 {
    font-size: 18px;
    font-weight: normal;
    margin-bottom: 10px;
  }
/** END miscellaneous **/

/** BEGIN wordpress 2.7 comments **/
#comments ol {
  list-style-type: none;
  clear: both;
  padding: 0;
  margin: 0;
}
  #comments ol li {
    padding: 10px;
    border: 1px solid #e9e9e9;
    margin-bottom: 10px;
  }
  #comments ol li .avatar {
    float: right;
  }
  #comments ol li .comment-author {
    
  }
    #comments ol li .comment-author .fn {
      font-weight: bold;
      font-size: 1.2em;
    }
  #comments ol li .comment-meta {
    font-size: 0.9em;
    color: #999999;
    margin: 5px 0 10px;
  }
  #comments ol li .reply {
    font-size: 0.9em;
    font-weight: bold;
    padding-bottom: 10px;
  }
  #comments .children {
    list-style-type: none;
  }
#comments .navigation {
  padding: 10px 0 20px;
  font-size: 0.9em;
}
  #comments .navigation a {
    color: #999999;
    padding: 3px 8px;
    border: 1px solid #cccccc;
  }
  #comments .navigation a:hover {
    color: #000000;
    border-color: #000000;
    text-decoration: none;
  }
/** END wordpress 2.7 comments **/

</style>


<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="ie.css" /><![endif]-->
</head>
<body>
<!-- BEGIN navigation -->
<div id="navigation">
  <div class="wrapper">
    <ul>
      <li><a href="http://www.free-css.com/">Home</a></li>
      <li><a href="about.html">About Us</a></li>
      <li><a href="page.html">Demo Page</a></li>
      <li><a href="contact.html">Contact Page</a></li>
    </ul>
    <form action="http://www.free-css.com/">
      <button type="submit">Search</button>
      <input type="text" name="s" id="s" />
    </form>
  </div>
</div>
<!-- END navigation -->
<!-- BEGIN wrapper -->
<div class="wrapper">
  <!-- BEGIN header -->
  <div id="header">
    <h1><a href="http://www.free-css.com/">NewsTheme</a></h1>
    <div class="ad468x60"><a href="http://www.free-css.com/"><img src="newstheme-images/ad468x60.gif" alt="" /></a></div>
  </div>
  <!-- END header -->
  <!-- BEGIN body -->
  <div id="body">
    <!-- BEGIN content -->
    <div id="content">
      <!-- begin post -->
      <div class="recent post">
        <h2>About</h2>
        <p>This is an example of a WordPress page, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many pages like this one or sub-pages as you like and manage all of your content inside of WordPress.</p>
      </div>
      <!-- end post -->
    </div>
    <!-- END content -->
    <!-- BEGIN sidebar -->
    <div id="sidebar">
      <!-- begin Advertisement -->
      <div class="ads"> <a href="http://www.free-css.com/"><img src="newstheme-images/ad125x125.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="newstheme-images/ad125x125.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="newstheme-images/ad125x125.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="newstheme-images/ad125x125.jpg" alt="" /></a> </div>
      <!-- end Advertisement -->
      <!-- begin subscribe -->
      <h2>Subscribe Here</h2>
      <form class="subscribe" action="http://www.free-css.com/">
        <a href="http://www.free-css.com/">Subscribe via RSS Feed or</a>
        <input type="text" name="email" value="Enter E-mail Here.." />
        <button type="submit">Submit</button>
      </form>
      <!-- end subscribe -->
      <!-- begin popular posts -->
      <h2>Popular Posts</h2>
      <ul>
        <li><a href="http://www.free-css.com/">Make Money Online Creating Websites</a></li>
        <li><a href="http://www.free-css.com/">Top 100 Internet Marketing Tips</a></li>
        <li><a href="http://www.free-css.com/">Tutorial: How to add Videos in your Post</a></li>
        <li><a href="http://www.free-css.com/">Sample Post Unordered List</a></li>
        <li><a href="http://www.free-css.com/">Sample Post Blockquote</a></li>
      </ul>
      <!-- end popular posts -->
      <!-- begin tags -->
      <h2>Tags</h2>
      <div class="tags"> </div>
      <!-- end tags -->
      <!-- BEGIN left -->
      <div class="l">
        <!-- begin categories -->
        <h2>Categories</h2>
        <ul>
          <li><a href="http://www.free-css.com/">Entertainment</a></li>
          <li><a href="http://www.free-css.com/">Fashion</a></li>
          <li><a href="http://www.free-css.com/">Lifestyle</a></li>
          <li><a href="http://www.free-css.com/">Parenting</a></li>
          <li><a href="http://www.free-css.com/">Resources</a></li>
          <li><a href="http://www.free-css.com/">Videos</a></li>
        </ul>
        <!-- end categories -->
        <!-- begin pages -->
        <h2>Pages</h2>
        <ul>
          <li><a href="http://www.free-css.com/">Home</a></li>
          <li><a href="http://www.free-css.com/">About</a></li>
          <li><a href="http://www.free-css.com/">Archives</a></li>
          <li><a href="http://www.free-css.com/">Links</a></li>
          <li><a href="http://www.free-css.com/">Contact</a></li>
          <li><a href="http://www.free-css.com/">Sitemap</a></li>
        </ul>
        <!-- end pages -->
      </div>
      <!-- END left -->
      <!-- BEGIN right -->
      <div class="r">
        <!-- begin archives -->
        <h2>Archives</h2>
        <ul>
          <li><a href="http://www.free-css.com/">August 2008</a></li>
          <li><a href="http://www.free-css.com/">July 2008</a></li>
          <li><a href="http://www.free-css.com/">June 2008</a></li>
          <li><a href="http://www.free-css.com/">May 2008</a></li>
          <li><a href="http://www.free-css.com/">April 2008</a></li>
          <li><a href="http://www.free-css.com/">March 2008</a></li>
        </ul>
        <!-- end archives -->
        <!-- begin blogroll -->
        <h2>Blogroll</h2>
        <ul>
          <li><a href="http://www.free-css.com/">Carlos</a></li>
          <li><a href="http://www.free-css.com/">Digital Point Forum</a></li>
          <li><a href="http://www.free-css.com/">Eric's Photo Gallery</a></li>
          <li><a href="http://www.free-css.com/">Fashion Trends</a></li>
          <li><a href="http://www.free-css.com/">Google Scoreboard</a></li>
          <li><a href="http://www.free-css.com/">Marketing Forum</a></li>
        </ul>
        <!-- end blogroll -->
        <!-- begin meta -->
        <h2>Meta</h2>
        <ul>
          <li><a href="http://www.free-css.com/">Login</a></li>
        </ul>
        <!-- end meta -->
      </div>
      <!-- END right -->
    </div>
    <!-- END sidebar -->
  </div>
  <!-- END body -->
  <div class="break"></div>
</div>
<!-- END wrapper -->
<!-- BEGIN footer -->
<div id="footer">
  <div class="wrapper">
    <p class="l">Copyright &copy; 2009 - <a href="http://www.free-css.com/">Website Name</a> &middot; All Rights Reserved</p>
    <p class="r">Template by: <a href="http://www.wpthemedesigner.com/">WordPress Designer</a> | Get More <a href="http://www.free-css.com/">Free CSS Templates</a></p>
  </div>
</div>
<!-- END footer -->
</body>
</html>
Related examples in the same category

1.	newave
2.	newdarkside
3.	newday
4.	newera
5.	newfangled
6.	newgreeny
7.	newgreys
8.	newhorizon
9.	news portal
10.	news-print
11.	newsbeat
12.	newsflash
13.	newsportal
14.	newsroll
15.	newwave-business-inc
16.	new_rise
17.	NiceSite
18.	nimbuslike
19.	nixed
20.	noimages
21.	noname1
22.	nonzero
23.	nothingfanzy
24.	nourish
25.	nowhere
26.	NuahSwirl
27.	nullbullum
28.	numerology
29.	o-no-typography
30.	obsess
31.	obsession
32.	obtanium
33.	office-plants
34.	offlimits
35.	offrecord
36.	oheon_com_110100021
37.	ohgreenworld
38.	Okeanos
39.	old-wall
40.	oldarchitecture
41.	Olive
42.	one-penny
43.	one_two_three
44.	online-edu
45.	onlinemoviestore
46.	oodles
47.	openyourwindows
48.	opposed
49.	optimal-touch
50.	orchidaceae
51.	ordinaire
52.	ormeggiare
53.	ornamental
54.	ornate
55.	OrngBlu
56.	oswd_blozilla
57.	our-work
58.	ourhouse
59.	outdoorv1.0
60.	outliers
61.	outoftheblue
62.	outtabox
63.	oxidation
64.	package
65.	paddy-harvest
66.	pagedrape
67.	paivi-k
68.	paleforest
69.	palmtrees
70.	pamphlet
71.	pancorbo
72.	papira
73.	paradigm
74.	paradise1983
75.	parchmenter
76.	particle
77.	particles
78.	pastel
79.	pastelco
80.	pastelflowers
81.	pastries
82.	path-fider
83.	patternmaker
84.	PattyMcFatPat01
85.	PattyMcFatPat03
86.	pc
87.	Pear Template
88.	pear
89.	pedestrian
90.	penchantforphotos
91.	pencilpink
92.	people
93.	perfectblemish
94.	performance
95.	perplex
96.	personified
97.	pillars
98.	pills
99.	pinnacle
100.	Pistachio
101.	pixabella
102.	pixabella04
103.	pixabella06
104.	pixelationingreen
105.	plaidshirt
106.	plainandsimple
107.	planning-feed
108.	pluralism
109.	plurkified
110.	pointspace
111.	pollinate
112.	pollinating
113.	pollination