newsportal
<!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>NewsPortal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {
text-align: center;
margin-top:10px;
margin-bottom:10px;
color:#666666;
background-color: #E0E0E0;
}
A:link {
COLOR: #0000FF; text-decoration: none;
}
A:visited {
COLOR: #0000FF; text-decoration: none;
}
A:active {
COLOR: #0000FF; text-decoration: none;
}
A:hover {
COLOR: #FF0000; text-decoration: underline;
}
#page_wrapper {
margin-left: auto;
margin-right: auto;
width: 98%;
text-align: left;
background: #FFFFFF;
border: 8px solid #FFFFFF;
}
#header_wrapper {
background: #4E7DD1 url('newsportal-img/menu_bg.gif') bottom left repeat-x;
margin:0px; padding:0px;
}
#header {
height: 60px;
padding:15px;
background: url('newsportal-img/header_bg.gif') top right no-repeat;
margin:0px;
}
#header h1 {
margin:0px;
font-family: verdana, arial, sans-serif;
font-size: 28px;
color:#ffffff;
letter-spacing: -1px;
}
#header h2 {
margin:0px;
font-family: verdana, arial, sans-serif;
font-size: 14px;
color:#B1C6EB;
letter-spacing: 1px;
}
#left_side {
margin-top: 10px;
float: left;
width: 160px;
background: #F1F6FE url('newsportal-img/side_bg.gif') bottom left repeat-x;
}
#right_side {
margin-top: 10px;
float: right;
width: 160px;
background: #F1F6FE url('newsportal-img/side_bg.gif') bottom left repeat-x;
}
#content {
margin-top: 20px;
margin-bottom: 0px;
margin-left: 180px;
margin-right: 180px;
}
#footer {
height: 50px;
background-color: #4E7DD1;
clear: both;
text-align: center;
padding-top:12px;
color: #B6CEF9;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 18px;
}
#footer A:link {
COLOR: #FFFFFF; text-decoration: none;
}
#footer A:visited {
COLOR: #FFFFFF; text-decoration: none;
}
#footer A:active {
COLOR: #FFFFFF; text-decoration: none;
}
#footer A:hover {
COLOR: #FFFFFF; text-decoration: underline;
}
#left_side p, #right_side p {
margin:10px;margin-top:15px;margin-bottom:15px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 16px;
color: #333333;
}
#left_side h3, #right_side h3 {
margin-top:5px; margin-bottom:10px; margin-left:5px; margin-right:5px;
padding:4px;
font-family: verdana, arial, sans-serif;
font-size: 14px;
font-weight: bold;
line-height: 14px;
color: #FFFFFF;
border:1px solid #0F3974;
background-color: #2153AA;
}
#left_side h4, #right_side h4 {
margin-top:0px;margin-bottom:0px;margin-left:10px;
font-family: verdana, arial, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 12px;
color: #2153AA;
}
#content p {
margin-top:15px; margin-bottom: 15px;
font-family: verdana, arial, sans-serif;
font-size: 12px;
line-height: 18px;
color: #333333;
}
#content h3 {
margin-top:5px; margin-bottom: 10px;
font-family: verdana, arial, sans-serif;
font-size: 18px;
font-weight: bold;
line-height: 18px;
color: #2153AA;
}
#content h4 {
margin-top:0px;margin-bottom:0px;
font-family: verdana, arial, sans-serif;
font-size: 14px;
font-weight: bold;
line-height: 12px;
color: #2153AA;
}
#navlist
{
margin-top:1px;
margin-bottom:0px;
text-align:center;
padding: 5px 0;
margin-left: 0;
border-bottom: 1px solid #0F3974;
font: bold 14px Verdana, sans-serif;
}
#navlist li
{
list-style: none;
margin: 0;
display: inline;
}
#navlist li a
{
color: #F1F6FE;
padding: 5px 15px;
margin-left: 3px;
border: 1px solid #0F3974;
border-bottom: none;
background: #2153AA url('newsportal-img/tab_bg.gif') bottom left repeat-x;
text-decoration: none;
}
#navlist li a:link { color: #F1F6FE; }
#navlist li a:visited { color: #F1F6FE; }
#navlist li a:hover
{
color: #FFFFFF;
background: #3364BB;
border-color: #0F3974;
}
#navlist li a#current
{
color: #000;
background: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
.float_left {
float: left;
margin-right: 10px;
}
.float_right {
float: right;
margin-left: 10px;
}
.featurebox_center {
background-color: #fffff6;
margin:0px;
padding:10px;
border: 1px solid #DFE8F7;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 18px;
color: #333333;
}
.featurebox_side {
background-color: #fffff6;
margin:0px;margin-left:10px;margin-right:10px;margin-bottom:15px;
padding:10px;
border: 1px solid #DFE8F7;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 18px;
color: #333333;
}
</style>
</head>
<body>
<div id="page_wrapper">
<div id="header_wrapper">
<div id="header">
<h1>News<font color="#FFDF8C">Portal</font></h1>
<h2>Liquid 3-Column CSS Template</h2>
</div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="http://www.free-css.com/" id="current">Home</a></li>
<li><a href="http://www.free-css.com/">Item two</a></li>
<li><a href="http://www.free-css.com/">Item three</a></li>
<li><a href="http://www.free-css.com/">Item four</a></li>
<li><a href="http://www.free-css.com/">Item five</a></li>
</ul>
</div>
</div>
<div id="left_side">
<h3>Left Side</h3>
<p> Lorem ipsum summo <a href="http://www.free-css.com/">nominavi</a> pri et. Stet <a href="http://www.free-css.com/">eruditi</a> perfecto at sed, ad enim constituto
deseruisse quo, mea no quem eros munere. Ad splendide
quaerendum per, ea minimum officiis oportere vel, an has
perpetua percipitur. <a href="http://www.free-css.com/">Consequat</a> contentiones
his te, id noster menandri his. Per partem perfecto eu, est
soluta accusata ex. </p>
<h3>Left Side</h3>
<div class='featurebox_side'> Lorem ipsum summo nominavi pri et. Stet eruditi perfecto at
sed, ad enim <a href="http://www.free-css.com/">constituto</a> deseruisse quo, mea
no quem eros munere. </div>
<p> Lorem ipsum summo nominavi pri et. Stet eruditi perfecto at sed,
ad enim constituto deseruisse quo, mea no quem eros munere. Ad
splendide quaerendum per, <a href="http://www.free-css.com/">ea minimum officiis</a> oportere vel, an has perpetua percipitur. Consequat contentiones
his te, id <a href="http://www.free-css.com/">noster menandri</a> his. Per partem perfecto
eu, est soluta accusata ex. </p>
<div class='featurebox_side'> Lorem <a href="http://www.free-css.com/">ipsum summo</a> nominavi pri et. Stet eruditi
perfecto at sed, ad enim constituto deseruisse quo, mea no quem
eros munere. </div>
</div>
<div id="right_side">
<h3>Right Side</h3>
<p> <a href="http://www.free-css.com/">Lorem ipsum summo</a> nominavi pri et. Stet eruditi
perfecto at sed, ad enim constituto deseruisse quo, mea no quem
eros munere. </p>
<div class='featurebox_side'> Lorem ipsum summo nominavi pri et. Stet eruditi perfecto at sed,
ad enim constituto deseruisse quo, mea no quem eros munere. </div>
<h4>Sub Title</h4>
<p> Ad splendide <a href="http://www.free-css.com/">quaerendum</a> per, ea minimum officiis
oportere vel, an has perpetua percipitur. Consequat contentiones
his te, id <a href="http://www.free-css.com/">noster</a> menandri his. Per partem perfecto
eu, est soluta accusata ex. </p>
<h3>Right Side</h3>
<div class='featurebox_side'> <a href="http://www.free-css.com/">Lorem ipsum</a> summo nominavi pri et. Stet eruditi
perfecto at sed, ad enim constituto deseruisse quo, mea no quem
eros munere. </div>
<p> Lorem ipsum summo nominavi pri et. Stet eruditi perfecto at sed, ad
enim constituto <a href="http://www.free-css.com/">deseruisse</a> quo, mea no quem eros
munere. Ad splendide quaerendum per, ea minimum officiis oportere vel,
an has perpetua percipitur. Consequat contentiones his te, id noster <a href="http://www.free-css.com/">menandri</a> his. Per partem perfecto eu, est soluta
accusata ex. </p>
</div>
<div id="content">
<h3>Center Content Title</h3>
<div class='featurebox_center'> Lorem ipsum summo nominavi pri et. Stet eruditi perfecto at sed, ad
enim <a href="http://www.free-css.com/">constituto deseruisse</a> quo, mea no quem eros munere.
Ad splendide quaerendum per, ea minimum officiis oportere vel, an has <a href="http://www.free-css.com/">perpetua</a> percipitur. Consequat contentiones his te, id
noster menandri his. Per partem perfecto eu, est soluta accusata ex. </div>
<p> <a href="http://www.free-css.com/">Lorem ipsum summo nominavi</a> pri et. Stet eruditi perfecto
at sed, ad enim constituto deseruisse quo, mea no quem eros munere. Ad
splendide quaerendum per, ea minimum officiis <a href="http://www.free-css.com/">oportere</a> vel,
an has perpetua percipitur. Consequat contentiones his te, id noster
menandri his. Per partem perfecto eu, est soluta accusata ex. </p>
<h4>Sub Title</h4>
<p> Lorem ipsum summo nominavi pri et. Stet eruditi perfecto at sed, ad
enim constituto deseruisse quo, mea no quem eros munere. Ad splendide
quaerendum per, ea minimum officiis oportere vel, an has perpetua percipitur.
Consequat contentiones his te, id noster menandri his. Per partem perfecto eu,
est soluta accusata ex. </p>
<p> Lorem ipsum summo <a href="http://www.free-css.com/">nominavi</a> pri et. Stet eruditi perfecto at
sed, ad enim constituto deseruisse quo, mea no quem eros munere. Ad
splendide quaerendum per, ea minimum officiis oportere vel, an has
perpetua percipitur. Consequat <a href="http://www.free-css.com/">contentiones</a> his te, id
noster menandri his. Per partem perfecto eu, est soluta accusata ex. </p>
<h3>Center Content Title</h3>
<p> Consequat contentiones his te, id noster menandri his. Per partem perfecto
eu, est soluta accusata ex. Lorem ipsum summo nominavi pri et. Stet eruditi
perfecto at sed, ad enim constituto deseruisse quo, mea no quem eros munere.
Ad splendide quaerendum per, ea minimum <a href="http://www.free-css.com/">officiis</a> oportere
vel, an has perpetua percipitur. Consequat contentiones his te, id noster
menandri his. Per partem perfecto eu, est soluta accusata ex. </p>
<p> Lorem ipsum summo nominavi pri et. Stet eruditi perfecto at sed, ad enim
constituto deseruisse quo, mea no quem eros munere. Ad splendide quaerendum
per, ea <a href="http://www.free-css.com/">minimum officiis</a> oportere vel, an has perpetua
percipitur. Consequat contentiones his te, id noster menandri his. Per partem
perfecto eu, est soluta accusata ex. Lorem ipsum summo nominavi pri et. Stet
eruditi perfecto at sed, ad enim constituto <a href="http://www.free-css.com/">deseruisse</a> quo,
mea no quem eros munere. Ad splendide quaerendum per, ea minimum officiis
oportere vel, an has perpetua percipitur. Consequat contentiones his te,
id <a href="http://www.free-css.com/">noster menandri</a> his. Per partem perfecto eu, est soluta
accusata ex. </p>
</div>
<div id="footer"> <a href="http://www.free-css.com/">Link One</a> | <a href="http://www.free-css.com/">Link Two</a> | <a href="http://www.free-css.com/">Link Three</a> | <a href="http://www.free-css.com/">Link Four</a> | <a href="http://www.free-css.com/">Link Five</a> <br />
Template provided by: <a href="http://www.designsbydarren.com">DesignsByDarren.com</a> </div>
</div>
</body>
</html>
Related examples in the same category