lunaria-1
<!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>Lunaria 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
@charset "utf-8";
/* general */
html {
font-size: 62.5%;
}
body {
background: #3d382d url(lunaria-1-images/grad_bg.jpg) repeat-x;
font-family: Helvetica, Arial, sans-serif;
color: #333333;
}
div {
position: relative;
}
p, h1, h2, h3 {
margin-top: 6px;
margin-bottom: 6px;
}
p {
font-size: 1.4em;
line-height: 20px;
}
h1 {
font-size: 2.2em;
font-weight: 400;
}
h2 {
font-size: 2.1em;
font-weight: 400;
}
h3 {
font-size: 2em;
font-weight: 400;
}
/* classes */
.orange {
background: #B85327 url(lunaria-1-images/orange_tab.jpg) no-repeat 0px 0px;
}
.orange:hover {
background: #B85327 url(lunaria-1-images/orange_tab.jpg) no-repeat 0px -5px;
}
.purple {
background: #804E71 url(lunaria-1-images/purple_tab.jpg) no-repeat 0px 0px;
}
.purple:hover {
background: #804E71 url(lunaria-1-images/purple_tab.jpg) no-repeat 0px -5px;
}
.green {
background: #B8BF4F url(lunaria-1-images/green_tab.jpg) no-repeat 0px 0px;
}
.green:hover {
background: #B8BF4F url(lunaria-1-images/green_tab.jpg) no-repeat 0px -5px;
}
.separate {
border-left-style: groove;
border-left-color: #a6b827;
border-left-width: 2px;
}
.clear {
clear: both;
}
/* header */
#wrapper {
margin: 50px auto 0px;
width: 960px;
}
#white_bg {
background: #fff;
}
#header {
height: 110px;
width: 960px;
}
#logo {
position: absolute;
left: 20px;
top: 20px;
width: 330px;
color: #333333;
font: italic 1.7em Georgia, "Times New Roman", Times, serif;
}
#logo a {
letter-spacing: 2px;
text-decoration: none;
color: #333333;
font-size: 2.4em;
line-height: 50px;
}
#top_nav {
width: 542px;
position: absolute;
left: 390px;
top: 76px;
}
#top_nav a {
margin-left: 20px;
height: 24px;
width: 160px;
font-size: 1.6em;
color: #fff7cf;
text-decoration: none;
display: block;
float: left;
text-align: center;
padding-top: 10px;
}
#main_nav {
background: url(lunaria-1-images/nav_bar.jpg);
height: 63px;
width: 990px;
margin-left: -15px;
}
#main_nav ul {
padding-top: 13px;
padding-left: 24px;
}
#main_nav li {
display: inline;
padding: 5px 8px;
font-size: 2.2em;
}
#main_nav a {
color: #fff7cf;
text-decoration: none;
letter-spacing: 2px;
}
#main_nav a:hover, #main_nav a:visited, #main_nav a:active {
color: #fff;
}
/* main content */
#content {
width: 930px;
min-height: 200px;
padding-right: 5px;
padding-left: 5px;
}
#left {
float: left;
width: 660px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
#left li {
font-size: 1.4em;
line-height: 20px;
list-style: square inside;
font-style: italic;
}
#left a {
color: #333333;
text-decoration: none;
border-bottom: 1px dotted #333333;
}
#left h1, #left h2, #left h3 {
background: url(lunaria-1-images/orange_bullet.jpg) no-repeat;
padding-left: 16px;
letter-spacing: 1px;
font-style: italic;
}
#right h1, #right h2, #right h3 {
background: url(lunaria-1-images/purple_bullet.jpg) no-repeat;
padding-left: 16px;
letter-spacing: 1px;
font-style: italic;
}
#right {
float: right;
width: 210px;
background: #FFF7CF;
padding: 10px;
margin-top: 10px;
}
#right a {
color: #333;
text-decoration: none;
border-bottom: 1px dotted #333;
margin-left: 10px;
}
#right a:hover, #right a:visited, #right a:active {
border-bottom: 1px solid;
}
/* footer */
#footer {
height: 140px;
color: #FFFFFF;
text-align: right;
width: 940px;
padding-top: 10px;
padding-right: 20px;
}
#footer a {
color: #FFFFFF;
text-decoration: none;
border-bottom: 1px dotted #FFFFFF;
}
</style>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="white_bg">
<div id="header">
<div id="logo"> <a href="http://www.free-css.com/">Company Name</a><br />
Your company's tagline or slogan here</div>
<div id="top_nav">
<ul>
<li><a class="purple" href="http://www.free-css.com/">resources</a></li>
<li><a class="green" href="http://www.free-css.com/">support</a></li>
<li><a class="orange" href="http://www.free-css.com/">contact us</a></li>
</ul>
</div>
</div>
<div id="main_nav">
<ul>
<li><a href="http://www.free-css.com/">About Us</a></li>
<li class="separate"><a href="http://www.free-css.com/">Portfolio</a></li>
<li class="separate"><a href="http://www.free-css.com/">Testimonials</a></li>
<li class="separate"><a href="http://www.free-css.com/">Clients</a></li>
<li class="separate"><a href="http://www.free-css.com/">Frequently Asked Questions</a></li>
<li class="separate"><a href="http://www.free-css.com/">Blog</a></li>
</ul>
</div>
<div id="content">
<div id="left">
<h1>Web design template - Lunaria 1</h1>
<p>Lunaria 1 is a free, one-page web site template for your online business. It is XHTML and CSS valid, with clean and simple design. You can quickly create other pages by copying the index page. This design uses the Helvetica, Arial sans-serif fonts and Georgia, Times New Roman serif fonts for the logo area. The color scheme is green, purple, and orange, with gradients of brown.</p>
<p>Lunaria 1 is the first free template developed by Dream Web Designs. It has a soft, appealing color scheme and a professional look. The 7 images used are compact, only 15 KB, so it loads quickly. Much of the design is made using CSS, including the logo and the dividers for the nav bar. This template allows many links on each page, reducing the need to hide links in submenus or other pages. For increased usability, important text, such as navigation links, headers, and the business name are large and easily visible. Headers 1-3 use colored dots to help them stand out.</p>
<h2>Open source template details</h2>
<p>This is a free web template and therefore we can offer no support. You can modify the pages as you like but please keep in mind the following when using Lunaria 1:</p>
<ul>
<li>We cannot offer support or guarantees for this free template. You will need a basic knowledge of XHTML and CSS to modify and develop a site. If you need help, Dream Web Designs can be hired.</li>
<li>You can modify this page as needed.</li>
<li>This template should not be used for something illegal. We cannot be responsible for how this template is used.</li>
<li>A link crediting this work is greatly appreciated and will help us to further produce quality templates. Please support us by crediting the original design.</li>
<li>This template, or any modified version of it, MAY NOT be resold. You may develop individual sites from this template to sell, as long as credit for design is included.</li>
</ul>
<p>Thank you for using Lunaria 1! </p>
</div>
<div id="right">
<h2>Information</h2>
<p>Dream Web Designs strives to create vivid and colorful web design that stands out. We develop database sites using PHP/MySQL. We can examine your site for search engine optimization issues.</p>
<p><a href="http://www.free-css.com/">Dream Web Designs</a></p>
<p><a href="http://www.free-css.com/">Lunarpages</a> - Excellent hosting</p>
<p><a href="http://www.free-css.com/">Biz Brand</a> - Brandable domains</p>
<p><a href="http://www.free-css.com/">Shutterstock</a> - Stock images</p>
<p>Also of interest:</p>
<p><a href="http://www.free-css.com/">Open source web design</a></p>
<p><a href="http://www.free-css.com/">NetTuts</a></p>
<p><a href="http://www.free-css.com/">PSDTuts</a></p>
</div>
<div class="clear"></div>
</div>
</div>
<div id="footer"><a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer">XHTML</a> | CSS | Design by <a href="http://dreamwebdesigns.com">Dream Web Designs</a></div>
</div>
</body>
</html>
Related examples in the same category