meganews
<!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>Meganews - 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: 11px Verdana;
color: #000000;
background: #ECECEC;
}
a {
text-decoration: none;
color: #0000ff;
}
a:hover {
text-decoration: underline;
color: #ff0000;
}
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: 980px;
margin: auto auto;
text-align: left;
}
/** END wrapper **/
/** BEGIN header **/
#header {
height: 135px;
}
#header h1 {
font-size: 0;
float: left;
padding: 30px 0 35px;
}
#header h1 a {
display: block;
width: 433px; height: 33px;
text-indent: -9999px;
outline: none;
background: url(meganews-images/logo.gif) no-repeat 0 0;
}
#header .ad {
float: right;
padding: 15px 0;
}
#header ul {
clear: both;
list-style-type: none;
background-color: #7EA700;
height: 30px;
}
#header ul li {
float: left;
font-weight: bold;
}
#header ul li a {
color: #ffffff;
display: block;
padding: 8px 10px 9px;
}
#header ul li a:hover {
background-color: #404618;
text-decoration: none;
}
/** END header **/
/** BEGIN content **/
#content {
width: 653px;
float: left;
border: 1px solid #CCCCCC;
padding: 5px;
background-color: #ffffff;
}
#content a {
color: #434A1E;
}
#content .post {
float: left;
width: 150px; height: 440px;
padding: 6px;
}
#content .post h2 {
font-size: 1em;
text-transform: uppercase;
margin-bottom: 5px;
}
#content .post .thumb {
width: 150px; height: 115px;
overflow: hidden;
margin-bottom: 5px;
}
#content .post .thumb img {
width: 150px;
}
#content .post h3 {
font-size: 1.2em;
margin-bottom: 10px;
}
#content .post p {
line-height: 1.4em;
}
#content .post .readmore {
text-indent: -9999px;
width: 99px; height: 17px;
outline: none;
background: url(meganews-images/readmore.gif) no-repeat 0 0;
margin: 10px 0;
display: block;
}
#content h2.title {
font-size: 1em;
text-transform: uppercase;
padding: 10px;
}
#content .archive {
padding: 10px;
clear: both;
}
#content .archive img {
width: 90px;
float: left;
margin: 0 5px 5px 0;
}
#content .archive h3 {
margin-bottom: 5px;
}
#content .archive p {
line-height: 1.5em;
margin-bottom: 10px;
}
#content .single {
padding: 10px;
}
#content .single h2 {
margin-bottom: 10px;
font-size: 1.4em;
}
#content .single p {
line-height: 1.5em;
margin-bottom: 10px;
}
#content .single ul, #content .single ol {
list-style-position: inside;
margin-bottom: 10px;
}
#content .single li {
line-height: 1.5em;
padding: 2px 0;
}
#content .single blockquote {
padding: 10px 10px 5px;
margin-bottom: 10px;
background-color: #eeeeee;
border-width: 1px 0;
border-style: solid;
border-color: #e0e0e0;
}
#content .single h3, #content .single h4, #content .single h5, #content .single h6 {
font-size: 1.2em;
margin-bottom: 5px;
}
#postnav {
padding: 10px;
font-weight: bold;
}
/** END content **/
/** BEGIN sidebar **/
#sidebar {
width: 300px;
float: right;
}
#sidebar .box {
}
#sidebar .box h2 {
color: #3D4418;
font-size: 1em;
text-transform: uppercase;
background-color: #FFFFFF;
padding: 8px 10px;
border-bottom: 1px solid #DDDDDD;
}
#sidebar .box {
border: 1px solid #CCCCCC;
margin-bottom: 8px;
}
#sidebar .search {
margin-bottom: 0;
border-bottom: 0;
}
#sidebar .box form {
width: 284px; height: 30px;
padding: 7px;
background: #E8E8E8 url(meganews-images/search.gif) no-repeat center;
}
#sidebar .box form input {
border: 0;
float: left;
font-size: 1.2em;
font-family: Verdana;
width: 200px;
margin: 7px 0 0 5px;
background-color: transparent;
}
#sidebar .box form button {
border: 0;
float: right;
text-indent: -9999px;
width: 70px; height: 30px;
background-color: transparent;
}
#sidebar .ad {
background-color: #ffffff;
text-align: center;
padding: 5px;
}
#sidebar .ad img {
margin: 5px;
}
#sidebar ul {
list-style-type: none;
background-color: #ffffff;
padding: 6px;
}
#sidebar ul li {
font-size: 1.2em;
border-bottom: 1px dotted #DCDCDC;
line-height: 1.4em;
padding: 2px 0;
}
#sidebar ul li a {
color: #3D441B;
}
#sidebar ul li a:hover {
color: #83A604;
text-decoration: none;
}
#sidebar .flickr {
padding: 5px;
background-color: #ffffff;
text-align: center;
}
#sidebar .flickr img {
margin: 5px;
}
#sidebar .video {
background-color: #ffffff;
padding: 3px;
}
#sidebar .l {
float: left;
width: 145px;
}
#sidebar .r {
float: right;
width: 145px;
}
#sidebar .l ul li, #sidebar .r ul li {
font-size: 1em;
border-bottom: 0;
padding: 3px 0;
}
/** END sidebar **/
/** BEGIN footer **/
#footer {
clear: both;
padding: 10px;
color: #ffffff;
background-color: #7EA700;
height: 16px;
margin-top: 10px;
}
#footer .l {
float: left;
}
#footer .r {
float: right;
}
#footer a {
color: #ffffff;
text-decoration: underline;
}
/** END footer **/
/** BEGIN miscellaneous **/
#comments {
padding: 10px;
}
#comments a {
text-decoration: none;
}
#comments h2 {
font-size: 1.4em;
margin: 10px 0;
}
#comments p {
margin-bottom: 10px;
line-height: 1.6em;
}
#comments form {
}
#comments form p {
margin-bottom: 5px;
}
#comments form input {
margin-right: 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 #a0a0a0;
font-size: 1em;
font-family: Verdana;
padding: 2px 6px;
}
.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 !important;
text-transform: uppercase;
padding: 10px;
color: #565656;
}
.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 .buffer {
padding: 10px;
}
#comments h2 {
}
#comments ol li {
margin-bottom: 10px;
}
#comments ol li ul li {
border: 1px solid #e0e0e0;
padding: 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: 0 10px 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;
}
#comments .says {
display: 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">
<!-- begin logo -->
<h1><a href="http://www.free-css.com/">Meganews</a></h1>
<!-- end logo -->
<!-- begin advertisement -->
<div class="ad"><a href="http://www.free-css.com/"><img src="meganews-images/ad468x60.gif" alt="" /></a></div>
<!-- end advertisement -->
<!-- begin navigation -->
<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>
<!-- end navigation -->
</div>
<!-- END header -->
<!-- BEGIN content -->
<div id="content">
<!-- begin post -->
<div class="single">
<h2><a href="http://www.free-css.com/">About</a></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 search -->
<div class="search box">
<form action="http://www.free-css.com/">
<input type="text" name="s" id="s" value="" />
<button type="submit">Search</button>
</form>
</div>
<!-- end search -->
<!-- begin advertisement -->
<div class="ad box"> <a href="http://www.free-css.com/"><img src="meganews-images/ad125x125.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="meganews-images/ad125x125.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="meganews-images/ad125x125.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="meganews-images/ad125x125.jpg" alt="" /></a> </div>
<!-- end advertisement -->
<!-- begin popular posts -->
<div class="box">
<h2>Popular Posts</h2>
<ul>
<li><a href="http://www.free-css.com/">Sed tempor, orci a suscipit dapibus, lacus justo</a></li>
<li><a href="http://www.free-css.com/">Laoreet imperdiet Cras placerat suscipit purus</a></li>
<li><a href="http://www.free-css.com/">Quisque iaculis gravida mauris Donec elit</a></li>
<li><a href="http://www.free-css.com/">In vulputate sem quis metus Ut convallis</a></li>
<li><a href="http://www.free-css.com/">Proin convallis turpis sed dui Sed at velit eu felis</a></li>
<li><a href="http://www.free-css.com/">Luisque iaculis gravida mauris Donec elit ipsum</a></li>
</ul>
</div>
<!-- end popular posts -->
<!-- begin flickr photos -->
<div class="box">
<h2>Flickr Photos</h2>
<p class="flickr"> <a href="http://www.free-css.com/"><img src="meganews-images/_flickr1.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="meganews-images/_flickr2.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="meganews-images/_flickr3.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="meganews-images/_flickr4.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="meganews-images/_flickr5.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="meganews-images/_flickr6.jpg" alt="" /></a> </p>
</div>
<!-- end flickr photos -->
<!-- begin featured video -->
<div class="box">
<h2>Featured Video</h2>
<div class="video"> <img src="meganews-images/_youtube.jpg" alt="" /> </div>
</div>
<!-- end featured video -->
<!-- BEGIN left -->
<div class="l">
<!-- begin categories -->
<div class="box">
<h2>Categories</h2>
<ul>
<li><a href="http://www.free-css.com/">Entertainment</a></li>
<li><a href="http://www.free-css.com/">Lifestyle</a></li>
<li><a href="http://www.free-css.com/">Marketing</a></li>
<li><a href="http://www.free-css.com/">Technology</a></li>
</ul>
</div>
<!-- end categories -->
<!-- begin blogroll -->
<div class="box">
<h2>Blogroll</h2>
<ul>
<li><a href="http://www.free-css.com/">Documentation</a></li>
<li><a href="http://www.free-css.com/">Suggest Ideas</a></li>
<li><a href="http://www.free-css.com/">Support Forum</a></li>
<li><a href="http://www.free-css.com/">ZY FORUMS</a></li>
</ul>
</div>
<!-- end blogroll -->
</div>
<!-- END left -->
<!-- BEGIN right -->
<div class="r">
<!-- begin pages -->
<div class="box">
<h2>Pages</h2>
<ul>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Advertising</a></li>
<li><a href="http://www.free-css.com/">Forum</a></li>
<li><a href="http://www.free-css.com/">Gallery</a></li>
<li><a href="http://www.free-css.com/">Photos</a></li>
<li><a href="http://www.free-css.com/">Videos</a></li>
</ul>
</div>
<!-- end pages -->
<!-- begin archives -->
<div class="box">
<h2>Archives</h2>
<ul>
<li><a href="http://www.free-css.com/">December 2008</a></li>
<li><a href="http://www.free-css.com/">November 2008</a></li>
<li><a href="http://www.free-css.com/">October 2008</a></li>
<li><a href="http://www.free-css.com/">Septemher 2008</a></li>
<li><a href="http://www.free-css.com/">August 2008</a></li>
</ul>
</div>
<!-- end archives -->
<!-- begin meta -->
<div class="box">
<h2>Meta</h2>
<ul>
<li><a href="http://www.free-css.com/"></a></li>
<li><a href="http://www.free-css.com/">Login</a></li>
<li><a href="http://www.free-css.com/">XHTML</a></li>
</ul>
</div>
<!-- end meta -->
</div>
<!-- END right -->
</div>
<!-- END sidebar -->
<div class="break"></div>
<!-- BEGIN footer -->
<div id="footer">
<p class="l">Copyright © 2009 - <a href="http://www.free-css.com/">Website Name</a> · 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>
<!-- END footer -->
</div>
<!-- END wrapper -->
</body>
</html>
Related examples in the same category