the-web-news : Design 8 « Templates « HTML / CSS
- HTML / CSS
- Templates
- Design 8
the-web-news
<!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>The Web News - 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: #565656;
background-color: #e9e9e9;
}
a {
color: #dc1000;
text-decoration: none;
}
a:hover {
color: #000000;
}
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;
background: url(the-web-news-images/background.gif) repeat-y 0 0;
margin: auto auto;
text-align: left;
padding: 0 7px;
}
/** END wrapper **/
/** BEGIN header **/
#header {
background: #ffffff url(the-web-news-images/header.gif) repeat-x 0 0;
}
#header ul {
float: left;
list-style-type: none;
padding: 10px 0;
margin-left: -5px;
}
#header ul li {
float: left;
text-transform: uppercase;
font-size: 0.9em;
padding: 0 15px;
border-left: 1px solid #252525;
}
#header ul li.f {
border: 0;
}
#header .links {
float: right;
font-size: 0.9em;
color: #252525;
padding: 10px;
}
#header .links a {
margin-left: 14px;
}
#header .logo {
padding: 18px 18px 40px;
float: left;
}
#header .logo h1 {
font-family: "Lucida Sans";
font-size: 2.5em;
text-transform: uppercase;
}
#header .logo h1 a {
color: #252525;
}
#header .logo p {
color: #DE2011;
font-weight: bold;
padding-left: 10px;
}
#header .ad468x60 {
float: right;
padding: 16px 10px;
}
#header ol {
list-style-type: none;
height: 35px;
background-color: #252525;
}
#header ol li {
float: left
}
#header ol li a {
color: #ffffff;
display: block;
padding: 10px 12px 11px;
}
#header ol li a:hover {
background-color: #DC1000;
}
#header {
}
/** END header **/
/** BEGIN content **/
#content {
width: 666px;
float: left;
}
#content .post {
width: 259px; height: 420px;
float: left;
padding: 20px 15px 0 35px;
}
#content .post h2 {
font-family: Georgia;
font-size: 1.5em;
margin-bottom: 15px;
}
#content .post h2 a {
color: #252525;
}
#content .post .date {
font-size: 0.9em;
font-family: Georgia;
color: #808080;
margin-bottom: 15px;
}
#content .post .continue {
color: #ffffff;
background-color: #DC1000;
padding: 5px 10px;
display: block;
float: left;
font-family: Georgia;
font-weight: bold;
margin-bottom: 25px;
}
#content .post p {
margin-bottom: 10px;
line-height: 1.4em;
}
#content .post .thumb {
height: 92px;
overflow: hidden;
padding: 5px;
background-color: #EEEEEE;
border: 1px solid #E8E8E8;
margin-bottom: 10px;
}
#content .post .thumb div {
height: 92px;
overflow: hidden;
}
#content .post .thumb img {
width: 247px;
}
#content .postnav {
clear: both;
padding: 20px 34px 40px;
}
#content .postnav ul {
list-style-type: none;
border: 0;
}
#content .postnav ul li {
float: left;
padding: 2px;
padding: 2px;
}
#content .postnav ul li a {
display: block;
text-align: center;
text-decoration: none;
border: 0;
padding: 5px 8px;
background-color: #9F9F9F;
color: #ffffff;
font-family: Georgia;
font-weight: bold;
}
#content .postnav ul li a:hover {
background-color: #E05F00;
border: 0 !important;
}
#content .postnav ul li.next a {
width: auto;
padding: 2px 4px;
}
#content .postnav .page_info {
text-align: center;
text-decoration: none;
border: 0;
padding: 5px 8px;
background-color: #9F9F9F;
color: #ffffff;
font-family: Georgia;
font-weight: bold;
margin: 2px;
}
/** END content **/
/** BEGIN sidebar **/
#sidebar {
width: 304px;
float: right;
padding-bottom: 20px;
}
#sidebar .wrapper {
padding: 0 15px;
}
#sidebar h2 {
color: #252525;
font-size: 0.9em;
text-transform: uppercase;
margin: 15px 0 10px;
}
#sidebar ul {
list-style-type: none;
}
#sidebar ul li {
border-bottom: 1px dotted #DADADA;
line-height: 1.4em;
padding: 4px 0;
font-size: 0.9em;
}
#sidebar ul li a {
color: #808080;
}
#sidebar ul li a:hover {
color: #DC1000;
}
#sidebar .ads {
text-align: center;
padding: 10px 0;
}
#sidebar .ads img {
margin: 3px;
}
#sidebar .search {
background: #EEEEEE url(the-web-news-images/search.gif) no-repeat center center;
border-width: 1px 0;
border-color: #E8E8E8;
border-style: solid;
height: 52px;
}
#sidebar .search input {
float: left;
border: 0;
font-size: 1.2em;
font-family: Verdana;
width: 200px;
margin: 18px 11px 0 22px;
}
#sidebar .search button {
float: left;
border: 0;
text-indent: -9999px;
width: 53px; height: 32px;
margin-top: 10px;
background-color: transparent;
}
#sidebar .flickr { }
#sidebar .flickr img {
margin: 3px;
}
#sidebar .video {
padding-bottom: 5px;
}
#sidebar .tags {
padding-bottom: 5px;
}
#sidebar .tags a {
color: #808080;
}
#sidebar .tags a:hover {
color: #DC1000;
}
#sidebar .l {
float: left;
width: 125px;
}
#sidebar .r {
float: right;
width: 125px;
}
#sidebar .sbar li {
font-size: 1em;
padding-left: 12px;
background: url(the-web-news-images/bullet.gif) no-repeat 0 8px;
border: 0;
}
/** END sidebar **/
/** BEGIN footer **/
#footer {
clear: both;
background-color: #252525;
color: #ffffff;
font-family: Georgia;
padding: 30px;
}
#footer p {
line-height: 1.5em;
}
/** END footer **/
/** BEGIN miscellaneous **/
#comments {
padding: 0 35px 20px;
}
#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;
}
h2.title {
font-size: 1em;
text-transform: uppercase;
padding: 25px 35px 0;
color: #565656;
}
.single {
padding: 20px 35px;
}
.single h2 {
font-family: Georgia;
font-size: 1.5em;
margin-bottom: 15px;
}
.single .date {
font-size: 0.9em;
font-family: Georgia;
color: #808080;
margin-bottom: 15px;
}
.single h3 {
font-size: 1.5em;
font-weight: normal;
margin-bottom: 7px;
}
.single p {
line-height: 1.4em;
margin-bottom: 10px;
}
.single ul {
margin: 0 0 10px 16px;
}
.single ol {
margin: 0 0 10px 18px;
}
.single li {
line-height: 1.4em;
padding: 2px 0;
}
.single blockquote {
padding: 10px 10px 5px;
margin-bottom: 10px;
background-color: #eeeeee;
border-width: 1px 0;
border-style: solid;
border-color: #e8e8e8;
}
/** 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 #e0e0e0;
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 wrapper -->
<div id="wrapper">
<!-- BEGIN header -->
<div id="header">
<ul>
<li class="f"><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>
<p class="links">Subscribe: <a href="http://www.free-css.com/">Posts</a> | <a href="http://www.free-css.com/">Comments</a> | <a href="http://www.free-css.com/">Email</a> </p>
<div class="break"></div>
<div class="logo">
<h1><a href="http://www.free-css.com/">The Web News</a></h1>
<p>Free CSS Template</p>
</div>
<div class="ad468x60"> <a href="http://www.free-css.com/"><img src="the-web-news-images/ad468x60.gif" alt="" /></a> </div>
<div class="break"></div>
<ol>
<li><a href="http://www.free-css.com/">Advertising</a></li>
<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/">Pictures</a></li>
<li><a href="http://www.free-css.com/">Videos</a></li>
</ol>
<div class="break"></div>
</div>
<!-- END header -->
<!-- BEGIN content -->
<div id="content">
<!-- begin post -->
<div class="single">
<h2>About Us</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 ads -->
<div class="ads"> <a href="http://www.free-css.com/"><img src="the-web-news-images/ad125x125.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="the-web-news-images/ad125x125.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="the-web-news-images/ad125x125.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="the-web-news-images/ad125x125.jpg" alt="" /></a> </div>
<!-- end ads -->
<!-- begin search -->
<form class="search" action="http://www.free-css.com/">
<input type="text" name="s" id="s" />
<button type="submit">Search</button>
</form>
<!-- end search -->
<div class="wrapper">
<!-- 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 flickr photos -->
<h2>Flickr Photos</h2>
<div class="flickr"> <a href="http://www.free-css.com/"><img src="the-web-news-images/_thumb3.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="the-web-news-images/_thumb4.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="the-web-news-images/_thumb5.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="the-web-news-images/_thumb6.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="the-web-news-images/_thumb7.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="the-web-news-images/_thumb8.jpg" alt="" /></a> </div>
<!-- end flickr photos -->
<!-- begin featured video -->
<h2>Featured Video</h2>
<div class="video"> <img src="the-web-news-images/_video.jpg" alt="" /> </div>
<!-- end featured video -->
<!-- begin tags -->
<h2>Tags</h2>
<div class="tags"> </div>
<!-- end tags -->
<!-- BEGIN left -->
<div class="l sbar">
<!-- 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/">Internet</a></li>
<li><a href="http://www.free-css.com/">Marketing</a></li>
<li><a href="http://www.free-css.com/">Lifestyle</a></li>
<li><a href="http://www.free-css.com/">Make Money</a></li>
<li><a href="http://www.free-css.com/">Online</a></li>
<li><a href="http://www.free-css.com/">Parenting</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 sbar">
<!-- 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>
</div>
<!-- END sidebar -->
<!-- BEGIN footer -->
<div id="footer">
<p>Copyright © 2009 - <a href="http://www.free-css.com/">Website Name</a> · All Rights Reserved</p>
<p>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>
<!-- END footer -->
</div>
<!-- END wrapper -->
</body>
</html>
Related examples in the same category