redline
<!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>Red Line</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/*#############################################################
© 2007
Author: Igor Jovic
URL: http://spinz.se
#############################################################*/
/* default elements */
*{margin:0px;padding:0px}
h1
{
font-family:arial, verdana, helvetica, sans-serif;
font-size:1.9em;
font-weight: bold;
color:#333333;
padding-left:5px;
line-height:1.6em
}
p
{
font-family:Verdana, Arial, helvetica, sans-serif;
font-size:0.7em;
font-weight: normal;
color:#555555;
}
a
{
color:#ac0e22;
font-size:0.9em;
font-weight:normal;
font-style:normal;
text-decoration:underline;
}
a:link
{
color:#ac0e22;
font-weight:normal;
font-style:normal;
text-decoration:underline;
}
a:visited
{
color:#ac0e22;
font-style:normal;
font-weight:normal;
text-decoration:underline;
}
a:hover
{
color:#ac0e22;
font-style:normal;
text-decoration:none;
}
/* Layout */
body
{
background: #eeeee4;
font-family:Arial, Verdana,'Lucida Grande', Helvetica, sans-serif;
text-align: center;
color: #333333;
}
#wrapper
{
background-color:#fff;
margin-top: 40px;
margin-right: auto;
margin-bottom:40px;
margin-left: auto;
width:902px;
}
#header
{
background:url(redline-Img/bgheader.jpg) no-repeat #a20d1f;
width:902px;
border-top:5px solid #550a13;
height:133px;
padding-top: 0px;
margin-left:0px;
margin-right:0px;
margin-top: 0px;
margin-bottom: 0px;
}
#header .logo
{
float:left;
padding-top:0px;
padding-left:0px;
border: none;
}
#nav
{
float:left;
list-style:none;
margin-bottom:0px;
margin-top:0px;
margin-left:0px;
width:902px;
height:48px;
background: transparent url(redline-Img/navbg.gif);
background-repeat:repeat-x;
}
#nav ul
{
list-style:none;
margin-left:200px;
}
#nav li
{
text-align:left;
float:left;
padding-left:0px;
padding-top:0px;
padding-bottom:0px;
}
#nav ul li a
{
display:block;
line-height:2.5em;
margin-right:0px;
padding:8px 14px 8px 14px;
color: #d3d2cc;
font-weight:bold;
font-size: 0.8em;
text-decoration: none;
}
#nav li a:hover
{
color: #ffffff;
background:transparent;
background-image:url(redline-Img/navaktiv.gif);
background-repeat:repeat-x;
}
#nav ul li .selected
{
color: #ffffff;
background-color:transparent;
background-image:url(redline-Img/navaktiv.gif);
background-repeat:repeat-x;
}
#content
{
float:left;
background-image:url(redline-Img/contentbgtop.jpg);
background-repeat:repeat-x;
background-position:top center;
background-color:#f3f3e7;
width:902px;
margin-top:20px;
margin:auto;
padding:0px;
margin-bottom:0px;
margin-right:0px;
}
#col1
{
float:left;
width:420px;
margin-left:10px;
margin-top:30px;
background-color:inherit;
text-align:left;
font-size:0.9em;
padding:5px;
}
#col1 h1
{
display:block;
font-size1.2em;
font-family:Helvetica, Arial, sans-serif;
text-align:left;
font-weight:bold;
color:#403f3b;
font-weight:normal;
padding-bottom:2px;
margin-top:5px;
margin-bottom:10px;
margin-left:5px;
border-bottom:1px solid #e5e6d6;
}
#col1 .red
{
color:#9a0c1c;
}
#col1 p
{
font: normal 0.9em Arial, Verdana, Helvetica, sans-serif;
font-size:0.9em;
color: #000000;
padding:10px;
text-align:left;
}
#col2
{
float:right;
background:#ffffff url(redline-Img/sidebarflag.gif) no-repeat top right;
width:372px;
margin:20px 15px 5px 0;
padding:10px 15px 5px 10px;
text-align:left;
font-size:0.9em;
border:2px solid #ebebeb;
}
#col2 p
{
font: normal 0.9em Arial, Verdana, Helvetica, sans-serif;
font-size:0.9em;
margin-top:10px;
color: #000000;
padding:10px 15px 5px 10px;
text-align:left;
}
#col3
{
float:right;
background:#ffffff url(redline-Img/sidebarflag.gif) no-repeat top right;
width:372px;
margin:84px 15px 5px 0;
padding:10px 15px 5px 10px;
text-align:left;
font-size:0.9em;
border:2px solid #ebebeb;
}
#col3 p
{
font: normal 0.9em Arial, Verdana, Helvetica, sans-serif;
font-size:0.9em;
margin-top:10px;
color: #000000;
padding:10px 15px 5px 10px;
text-align:left;
}
#footer
{
width:902px;
height:154px;
clear:both;
margin-top: 0px;
background:url(redline-Img/footerbg.jpg) repeat-x;
color:#666666;;
margin-left:auto;
margin-right:auto;
margin-bottom: 0px;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#footer p
{
font-size:0.7em;
font-family:arial;
font-weight:normal;
line-height: 1.4em;
color:#aeaea6;
padding-top:75px;
padding-bottom:75px;
text-align:center;
magin:auto;
}
#footer a
{
font-size:1em;
text-decration:none;
font-weight:normal;
color:#e01b1b;
text-align:center;
}
#footer a:hover
{
text-decoration:underline;
font-weight:normal;
color:#e01b1b;
text-align:center;
}
form
{
padding:0px;
margin:0px;
}
form p
{
color: #555555;
text-align: left;
font-size: 0.6em;
font-family: Helvetica, Arial, Verdana;
}
input
{
color:#000000;
background-color:#f9faf5;
height:24px;
float:right;
width: 200px;
}
.submit
{
float:right;
color: #000000;
margin-top:0px;
background-color: #f9faf4;
width: 60px;
margin-right:70px;
margin-left:3px;
margin-top:5px;
}
.input
{
color: #000000;
margin-top:0px;
background-color: #f9faf4;
border-top:3px solid #550a13;
border-left:6px solid #550a13;
border-right:6px solid #550a13;
border-bottom:6px solid #550a13;
width: 150px;
font-size: 1.9em;
font-family: Helvetica, Arial, Verdana, sans-serif;
}
.left
{float:left;
padding:4px;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><a href="http://www.free-css.com/"> <img src="redline-Img/logo.jpg" class="logo" alt="Red Line" title="Red Line" /></a>
<form method="post" action="http://www.free-css.com/">
<p>
<input type="submit" name="btnSubmit" id="btnSubmit" value="Search" class="submit" />
<input type="text" name="name" id="name1" class="input" />
</p>
</form>
</div>
<div id="nav">
<ul>
<li><a href="http://www.free-css.com/" class="selected">Link 1</a></li>
<li><a href="http://www.free-css.com/">Link 2</a></li>
<li><a href="http://www.free-css.com/">Link 3</a></li>
<li><a href="http://www.free-css.com/">Link 4</a></li>
<li><a href="http://www.free-css.com/">Link 5</a></li>
<li><a href="http://www.free-css.com/">Link 6</a></li>
<li><a href="http://www.free-css.com/">Link 7</a></li>
</ul>
</div>
<div id="content">
<div id="col1">
<h1> Welcome to <span class="red">Red</span> Line </h1>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam vel est. Aliquam quis sem <a href="http://www.free-css.com/"> Link</a>. Praesent nisl augue, molestie quis, condimentum et, luctus eget, eros. Proin sit amet turpis eget orci rutrum lacinia. Pellentesque pretium. Nullam aliquet. Sed leo. In a nisl. Proin erat tellus, laoreet vitae, pulvinar et, consequat in, nisl. Aliquam erat volutpat. Mauris tempus. Fusce eu risus. Nunc odio pede, eleifend ut, elementum id, volutpat ac, elit. Aenean bibendum scelerisque dui. Etiam sed diam.</p>
<p>Etiam semper tempus ipsum. Donec dolor sapien, consequat dignissim, vestibulum nec, eleifend nec, urna. Donec in sapien vitae nunc porttitor euismod. Quisque aliquam tempor nunc. Aenean sit amet elit a nulla placerat scelerisque. Phasellus mi libero, eleifend nec, fringilla ut, pretium vel, mauris. Praesent porttitor molestie risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tellus dolor, vulputate molestie, molestie viverra, suscipit nec, mi. Suspendisse turpis. Proin justo urna, cursus at, pulvinar ac, interdum faucibus, nibh. Mauris pharetra quam et lorem. Maecenas at nibh sed felis congue tincidunt. Quisque gravida arcu at neque vehicula commodo. In iaculis risus eu libero. Aliquam aliquet tortor eu mi. Aenean arcu leo, iaculis et, tristique at, ullamcorper in, leo.</p>
</div>
<div id="col3">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam vel est. Aliquam quis sem. Praesent nisl augue, molestie quis, condimentum et, luctus eget, eros. Proin sit amet turpis eget orci rutrum lacinia. Pellentesque pretium. Nullam aliquet. Sed leo. In a nisl. Proin erat tellus, laoreet vitae, pulvinar et, consequat in, nisl. Aliquam erat volutpat. Mauris tempus. Fusce eu risus. Nunc odio pede, eleifend ut, elementum id, volutpat ac, elit. Aenean bibendum scelerisque dui. Etiam sed diam.</p>
</div>
<div id="col2">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam vel est. Aliquam quis sem. Praesent nisl augue, molestie quis, condimentum et, luctus eget, eros. Proin sit amet turpis eget orci rutrum lacinia. Pellentesque pretium. Nullam aliquet. Sed leo. In a nisl. Proin erat tellus, laoreet vitae, pulvinar et, consequat in, nisl. Aliquam erat volutpat.</p>
<p> Mauris tempus. Fusce eu risus. Nunc odio pede, eleifend ut, elementum id, volutpat ac, elit. Aenean bibendum scelerisque dui. Etiam sed diam. <img src="redline-Img/polaroid.jpg" alt="" class="left"/> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam vel est. Aliquam quis sem. Praesent nisl augue, molestie quis, condimentum et, luctus eget, eros. Proin sit amet turpis eget orci rutrum lacinia. Pellentesque pretium. Nullam aliquet. Sed leo. In a nisl.</p>
<p> Proin erat tellus, laoreet vitae, pulvinar et, consequat in, nisl. Aliquam erat volutpat.
Mauris tempus. Fusce eu risus. Nunc odio pede, eleifend ut, elementum id, volutpat ac, elit. Aenean bibendum scelerisque dui. Etiam sed diam. Maecenas at nibh sed felis congue tincidunt. Quisque gravida arcu at neque vehicula commodo. In iaculis risus eu libero. Aliquam aliquet tortor eu mi. Aenean arcu leo, iaculis et, tristique at, ullamcorper in, leo.</p>
</div>
</div>
<div id="footer">
<p>© 2007 (Your Site) Design by <a href="http://www.spinz.se/om.htm">Igor Jovic </a> </p>
</div>
</div>
</body>
</html>
Related examples in the same category