dreamLine
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Dreamline</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/* global */
html{height: 100%;}
body
{ font-family: verdana, arial, sans-serif;
padding: 0px;
margin: 0px;
font-size: .68em;
}
/* ancors Start
---------------------*/
a{outline: none;}
a, a:link, a:visited {
color:#006699;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
#logo, #logo h1 a
{
/*color: #40403E;*/
border:none;
text-decoration:none;
}
#menu li a
{ display: block;
float: left;
height:26px;
text-decoration: none;
padding: 6px 19px 0px 19px;
border-right: 2px solid;
font-weight: bold;
background: #40403E;
color: #929280;
border-color: #2C2C2A;
background:transparent url(dreamLine-images/nav_tab_bg.png) no-repeat scroll left top;
}
#menu li a:hover, #menu li a.selected, #menu li a.selected:hover
{ background: #82974B;
color: #EEE;
border-color: #2C2C2A;
background:transparent url(dreamLine-images/nav_tab_bg.png) no-repeat scroll left top;
background-position: 0 -34px;
}
/* ancors End
----------------------------*/
/* elementh style Start
--------------------------*/
p
{ margin: 0px;
padding: 0px 0px 16px 0px;
line-height: 1.7em;
}
h1
{ font-family: arial, sans-serif;
letter-spacing: .1em;
font-weight: normal;
text-transform: uppercase;
padding: 16px 0px 5px 0px;
margin: 0px 0px 12px 0px;
font-size: 150%;
}
.sub
{ font-size: 55%;
padding-left: 12px;
letter-spacing: .1em;
}
img
{ border: 0px;
margin: 0px;
padding: 0px;
}
/* block quote */
blockquote
{ margin: 20px 0px 20px 0px;
padding: 10px 20px 0px 20px;
border-left: 8px solid;
}
/* unordered list */
ul
{ margin: 2px 0px 18px 16px;
padding: 0px;
}
ul li
{ list-style-type: square;
margin: 0px 0px 6px 0px;
padding: 0px;
}
/* ordered list */
ol
{ margin: 8px 0px 0px 24px;
padding: 0px;
}
ol li
{ margin: 0px 0px 11px 0px;
padding: 0px;
}
/* elementh style end
--------------------------*/
/* site content Start
-----------------------------*/
#main
{
width:880px;
padding-top: 50px;
}
/*design box First*/
.disignBoxFirst
{
background:transparent url(dreamLine-images/db_first_bg.jpg) no-repeat scroll left top;
clear:left;
margin-bottom:10px;
padding-top:16px;
position:relative;
}
.disignBoxFirst .boxFirstHeader
{
color:#006598;
font-size:18px;
font-weight:bold;
height:20px;
padding:3px 0px 0px 40px;
position:relative;
text-align:left;
text-transform:uppercase;
}
.disignBoxFirst .boxContent
{
font-size:13px;
overflow:hidden;
padding:10px 0pt 10px 24px;
position:relative;
}
/*design box Second*/
.disignBoxSecond
{
background:transparent url(dreamLine-images/db_second_bg.jpg) repeat-x scroll left top;
}
.disignBoxSecond .boxSecondHeader
{
color:#006598;
font-size:110%;
font-weight:bold;
height:20px;
padding:3px 0px 0px 40px;
position:relative;
text-align:left;
text-transform:uppercase;
}
.disignBoxSecond .boxContent
{
font-size:13px;
overflow:hidden;
padding:10px 24pt 10px 24px;
position:relative;
}
/* thumb images
-----------------------------*/
.thumb_block
{position:relative; height:100px;}
.thumb_image
{
float:left;
margin:0pt 5px 5px 5px;
width:70px;
}
/* margin lefts / margin rights - to centre content */
#logo, #menu, #site_content, #main
{ margin-left: auto;
margin-right: auto;
}
/* logo */
#logo
{ width: 880px;
height: 96px;
}
#logo h1
{ font-family: century gothic, sans-serif;
font-size: 60px;
text-transform: lowercase;
font-weight: normal;
padding: 0px 0px 0px 14px;
border: 0px;
float: left;
letter-spacing: 0px;
}
#links
{ margin: 15px 9px 0px 0px;
font-size: 80%;
text-align: right;
padding: 20px 10px 0px 0px;
text-transform: uppercase;
}
/* navigation menu */
#menu
{ height: 32px;
width: 880px;
}
#menu ul{margin: 0px auto;}
#menu li
{ float: left;
margin: 0px;
padding: 0px;
list-style: none;
}
#colours
{ height: 0px;
text-align: right;
padding: 16px 16px 0px 300px;
}
/* main content */
#site_content
{ width: 878px;
overflow: hidden;
border-right: 1px solid;
border-bottom: 1px solid;
border-left: 1px solid;
}
/* side menu */
#first_column
{ padding: 22px 3px 10px 19px;
float: left;
width: 300px;
}
.info
{ padding-top: 4px;
float: left;
}
/* page content */
#content
{ text-align: left;
width: 542px;
float: left;
padding: 12px 0px 18px 0px;
}
#footer
{padding:10px;
font-size:14px;}
#footer #copy_r
{
float:right;
}
/*colors Start
---------------------------*/
body
{ background: #2C2C2A;
color: #929280;
background:#000000 url(dreamLine-images/body_bg.jpg) repeat-x scroll left top;
}
blockquote{border-color: #40403E;}
#site_content
{
background-color:#000;
border-color: #40403E;
}
#content h1
{ background: transparent;
color: #E6E8DC;
border-color: #40403E;
}
#contact input, #contact textarea, #contact input.submit
{ background: #2C2C2A;
color: #929280;
border-color: #40403E;
}
#menu
{ background: #40403E;
color: #EEE;
border-color: #82974B;
}
</style>
</head>
<body>
<div id="main">
<div id="logo">
<h1><a href="http://www.free-css.com/">DreamLine</a></h1>
</div>
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/">home</a></li>
<li><a class="selected" href="http://www.free-css.com/">about template</a></li>
<li><a href="http://www.free-css.com/">Photos</a></li>
<li><a href="http://www.free-css.com/">Blog</a></li>
<li><a href="http://www.free-css.com/">contact</a></li>
</ul>
</div>
<div id="site_content">
<div id="first_column">
<div class="disignBoxFirst">
<div class="boxFirstHeader"> Who We Are </div>
<div class="boxContent">
<p>FlashDaWeb is a group of Flash and Web developers who enjoy making scripts and widgets making websites interesting and attractive.</p>
</div>
</div>
<div class="disignBoxFirst">
<div class="boxFirstHeader"> Latest Photos </div>
<div class="boxContent">
<div class="thumb_block">
<div class="thumb_image"><a href="http://www.free-css.com/"><img width="75" height="75" alt="" src="dreamLine-images/thumb1.jpg"/></a></div>
<div class="thumb_image"><a href="http://www.free-css.com/"><img width="75" height="75" alt="" src="dreamLine-images/thumb2.jpg"/></a></div>
<div class="thumb_image"><a href="http://www.free-css.com/"><img width="75" height="75" alt="" src="dreamLine-images/thumb3.jpg"/></a></div>
<div class="thumb_image"><a href="http://www.free-css.com/"><img width="75" height="75" alt="" src="dreamLine-images/thumb4.jpg"/></a></div>
<div class="thumb_image"><a href="http://www.free-css.com/"><img width="75" height="75" alt="" src="dreamLine-images/thumb5.jpg"/></a></div>
<div class="thumb_image"><a href="http://www.free-css.com/"><img width="75" height="75" alt="" src="dreamLine-images/thumb6.jpg"/></a></div>
</div>
</div>
</div>
</div>
<div id="content">
<div class="disignBoxSecond">
<div class="boxContent">
<h1>about this template</h1>
<p>The present template is the first free template by FlashDaWeb. It has a unique design suitable for large organizations, personal aims and projects. Here you can see interesting color combinations and pragmatic approach to site organization that make the site multifunctional and all-purpose. So you can use it the way you like. It's a valid XHTML template you are free to use it on your website. </p>
</div>
</div>
<div class="disignBoxSecond">
<div class="boxContent">
<h1>License</h1>
<p>This template is released under the <a target="_blank" href="http://creativecommons.org/licenses/by/2.5"> Creative Commons Attribution</a> licence, which means that you are free to download and use it for anything you want (including modifying and amending it). The only thing we ask is that you leave the 'Design by FlashDaWeb' link. </p>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="copy_r">Copyright by YourCompanyName</div>
Designed by <a href="http://www.flashdaweb.com/">FlashDaWeb</a> </div>
</div>
</body>
</html>
Related examples in the same category