freecss_orangelights
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>MyFreeCssTemplates.com free CSS template</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type='text/css'>
/*
Design by Metamorphosis Design
http://www.metamorphozis.com
Released for free under a Creative Commons Attribution 2.5 License
*/
*
{
border: 0;
margin: 0;
}
img
{
border: 0px;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
background: url(freecss_orangelights-images/bg_top.gif) top repeat-x #E9E8E8;
line-height: 18px;
}
.bg_left_bg { background:url(freecss_orangelights-images/bg_left_bg.gif) 114px repeat-y;}
.bg_left { background:url(freecss_orangelights-images/bg_left.jpg) 114px top no-repeat;}
.bg_bot { background:url(freecss_orangelights-images/bg_bot.gif) bottom repeat-x;}
#left { float: left;
width: 320px;}
#right { float: right;
width: 784px;}
#main {
width: 1104px;
margin: 0px 0px 0px 100px;
}
#logo {
height: 240px;
padding: 146px 0px 0px 42px;
text-align: left;
background: url(freecss_orangelights-images/logo.gif) top repeat-x;
}
#logo a {
text-decoration: none;
font-size: 14px;
color: #000000;
font-style: italic;
font-weight: 100;
}
#logo H2 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-weight:100;
color: #000000;
font-style: italic;
}
#buttons{
text-align: left;
background: url(freecss_orangelights-images/buttons.gif) top repeat-x;
padding: 0px 0px 0px 0px;
}
#buttons a {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
display: block;
text-decoration: none;
color: #4D4D4D;
font-weight: bold;
text-align: left;
padding-top: 14px;
height: 30px;
}
.but {
width: 220px;
padding-left: 100px;
}
#buttons .but1 { background: url(freecss_orangelights-images/but1_h.jpg) 0px top no-repeat; color:#000000;}
.but2 { background: url(freecss_orangelights-images/but2.jpg) 30px top no-repeat;}
.but3 { background: url(freecss_orangelights-images/but3.jpg) 30px top no-repeat;}
.but4 { background: url(freecss_orangelights-images/but4.jpg) 30px top no-repeat;}
.but5 { background: url(freecss_orangelights-images/but5.jpg) 30px top no-repeat;}
.but1:hover { background: url(freecss_orangelights-images/but1_h.jpg) left top no-repeat;}
.but2:hover { background: url(freecss_orangelights-images/but2_h.gif) left top no-repeat;}
.but3:hover { background: url(freecss_orangelights-images/but3_h.gif) left top no-repeat;}
.but4:hover { background: url(freecss_orangelights-images/but4_h.gif) left top no-repeat;}
.but5:hover { background: url(freecss_orangelights-images/but5_h.gif) left top no-repeat;}
#buttons .but:hover {
color:#000000;
}
.top { height:369px;
background:url(freecss_orangelights-images/top.jpg) 0px 33px no-repeat;
padding-top: 18px;}
.cont_top { background: url(freecss_orangelights-images/cont_top.gif) left top no-repeat;
height: 10px;}
.cont_bot{ background:url(freecss_orangelights-images/cont_bot.gif) left bottom no-repeat;
height: 10px;}
#content{
padding: 0px 10px 10px 10px;
background: #ffffff;
}
.home_box {
float: left;
width: 303px; }
.img_l { float:left;
margin: 3px 15px 6px 0px;
}
.img_r { float: right;
margin: 3px 0px 6px 15px;
}
.span_cont { color: #F04F00;
font-size:12px;
font-weight:bold;
}
h1{
font-size:16px;
font-weight: 100;
color: #F04F00;
text-align: left;
padding: 0px 0px 0px 0px;
background:url(freecss_orangelights-images/h1.gif) bottom repeat-x;
padding: 0px 0px 5px 0px;
}
.read {
font-size:12px;
color: #ffffff;
text-decoration: none;
font-weight:100;
display:block;
width: 68px;
text-align: left;
float: right;
line-height: 14px;
padding: 0px 0px 0px 7px;
margin-top: 4px;
height: 15px;
background: url(freecss_orangelights-images/read.gif) left top no-repeat;
}
.read:hover {
font-size:12px;
text-decoration: underline ;
}
.spis {
list-style:none;
padding: 0px 0px 0px 0px;}
.spis li {
padding: 2px 0px 0px 18px;
background: url(freecss_orangelights-images/fish_spis.gif) 2px 13px no-repeat;
}
.spis a {
color:#F04F00;
text-decoration: underline;
font-weight: bold;
display: block;
font-weight:bold;
padding: 5px 0px 3px 0px;}
.spis a:hover {
color:#F04F00;
text-decoration: none;
}
.span_bot {
color: #ffffff;
font-weight: bold;}
.a_bot_u { color:#FFFFFF;
text-decoration: underline;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;}
.a_bot_u:hover { text-decoration: none;}
#bottom {
color: #ffffff;
height: 199px;
}
#bottom h1 {
color: #ffffff;
font-size: 16px;
font-weight: bold;
text-align: center;
padding: 15px 0px 10px 0px;
background: url(freecss_orangelights-images/h1_bottom.gif) bottom repeat-x;
}
#b_col1 {
width: 216px;
float: left;
margin-left: 22px;
}
#b_col2 {
width: 220px;
float: left;
margin-left: 43px;
}
#b_col3 {
width: 218px;
float: left;
margin-left: 42px;
text-align: left;
}
.spis_bot {
list-style:none;
padding: 0px 0px 0px 0px;}
.spis_bot li {
padding: 2px 0px 2px 23px;
background: url(freecss_orangelights-images/fish_bot.gif) 2px 8px no-repeat;
}
.spis_bot a {
color:#ffffff;
text-decoration:none;
font-weight: 100;
padding: 5px 0px 3px 0px;}
.spis_bot a:hover {
text-decoration: underline;
}
.fu_i {
float: right;
}
.a_fu_i{ padding: 5px 0px 0px 0px;
margin: 0px 20px 0px 0px;
display:block;
width: 32px;
height:32px;
float: right;}
.a_fu_i:hover { padding: 0px 0px 0px 0px;
display:block;}
#footer{
height: 60px;
font-size: 11px;
color: #000000;
text-align: left;
padding: 30px 10px 0px 25px;
}
#footer a{
color: #000000;
font-size: 11px;
text-decoration: none;
}
#footer a:hover{
font-size: 11px;
text-decoration: underline;
}
.lh {
line-height: 22px;
}
/*=*/
/* Nivo Slider Demo
/* November 2010
/* By: Gilbert Pellegrom
/* http://dev7studios.com
/*=*/
#slider-wrapper {
width: 784px;
height: 330px;
margin:0 auto;
padding-top: 15px;
}
#slider {
position:relative;
width: 784px;
height: 330px;
background:url(freecss_orangelights-images/loading.gif) no-repeat 50% 50%;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}
.nivo-controlNav {
position:absolute;
left: 400px;
bottom:-52px;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(freecss_orangelights-images/circl.jpg) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
background:url(freecss_orangelights-images/circl_hover.png) no-repeat;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(freecss_orangelights-images/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}
</style>
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
</head>
<body>
<div class="bg_left_bg">
<div class="bg_left">
<div class="bg_bot">
<div id="main">
<div id="left">
<div id="logo">
<b><a href="#">freecss_orangelights</a></b>
<h2><a href="#"><small>Small Company Slogan Goes Here</small></a></h2>
</div>
<div id="buttons">
<a href="index.html" class="but but1 " title="">Home</a>
<a href="blog.html" class="but2 but" title="">Blog</a>
<a href="gallery.html" class="but3 but" title="">Gallery</a>
<a href="about_us.html" class="but4 but" title="">About us</a>
<a href="contact_us.html" class="but5 but" title="">Contact us</a>
</div>
</div>
<div id="right">
<div class="top">
<div id="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="freecss_orangelights-images/top.jpg" alt="" />
<img src="freecss_orangelights-images/top2.jpg" alt=""/>
<img src="freecss_orangelights-images/top3.jpg" alt="" />
<img src="freecss_orangelights-images/top4.jpg" alt="" />
</div>
</div>
<script type="text/javascript" src="lib/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="lib/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</div>
<!-- content begins -->
<div class="cont_top"></div>
<div id="content">
<h1>Welcome To Our Website</h1>
<div style="height:10px"></div>
<img src="freecss_orangelights-images/img1.jpg" class="img_r" alt="" />
<span class="span_cont">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><br />
Donec vel auctor est. In ultrices, massa eget euismod sodales, tellus enim eleifend diam, eget volutpat odio turpis vel enim. Ut vitae eros non lacus iaculis fringilla. Sed ligula ligula, placerat sit amet laoreet eu, sodales nec felis. Donec in tellus et augue vestibulum inter- dum nec vel magna. Donec semper, urna in congue pellentesque, eros lectus convallis felis, ut scelerisque sapien lorem eu mauris. Aliquam erat volutpat. Fusce mattis nisi quis nibh interdum vehicula. Vestibulum laoreet augue vitae ipsum mollis commodo. Phasellus
Donec ut libero nibh, in placerat nulla. Nunc at sagittis nisi. Nulla eu suscipit diam. In massa eros, ultrices sit amet lacinia ac, adipiscing tempus ligula. Etiam a bibendum ipsum. Curabitur placerat nisi tempus urna fringilla faucibus ut tincidunt lacus.
<div style="height:20px;"><a class="read" href="#">read more</a></div>
<div style="height:20px"></div>
<h1>Proin Et Feugiat Leo</h1>
<div style="height:10px"></div>
<img src="freecss_orangelights-images/img2.jpg" class="img_l" alt="" />
<span class="span_cont">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><br />
Quisque cursus erat euismod ipsum luctus lobortis. Sed placerat sollicitudin tortor, in pharetra ligula aliquet eget. Donec aliquet ullamcorper blandit. In tincidunt porta tortor, in pharetra orci malesuada non. Sed pharetra vehicula odio, eu pellentesque ante placerat id.
<div style="height:20px;"><a class="read" href="#">read more</a></div>
<div style="clear: both; height: 20px"></div>
<div>
<div style="width: 355px; float: left">
<ul class="spis">
<li><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></li>
<li><a href="#">Pellentesque porta elementum mi, vitae accumsan diam</a></li>
<li><a href="#">Sed sed nisi a lorem porttitor euismod sed a dui. </a></li>
</ul>
</div>
<div style="width: 355px; float: right;">
<ul class="spis">
<li><a href="#">Integer sodales elit volutpat dui venenatis aliquam sed a</a></li>
<li><a href="#">Quisque vel ligula risus, a tempor mi.</a></li>
</ul>
</div>
<div style="clear: both"></div>
</div>
</div>
<div class="cont_bot"></div>
<!-- content ends -->
<div id="bottom">
<div id="b_col1">
<h1>About Us</h1>
<div style="height:7px"></div>
<ul class="spis_bot">
<li><a href="#">Praesent id neque orci, sit amet </a></li>
<li><a href="#">Duis mollis tortor quis dolor t</a></li>
<li><a href="#">Mauris non leo ut urna placerat </a></li>
<li><a href="#">Phasellus eu justo purus, sed </a></li>
<li><a href="#">Donec luctus accumsan lectus, vel</a></li>
<li><a href="#">Mauris convallis lectus quis nisi </a></li>
</ul>
</div>
<div id="b_col2">
<h1>Recent Posts</h1>
<div style="height:10px"></div>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:115px; height: 72px;"><a href="#"><img src="freecss_orangelights-images/img3.png" alt="" /></a></td>
<td ><a href="#"><img src="freecss_orangelights-images/img4.png" alt="" /></a></td>
</tr>
<tr>
<td><a href="#"><img src="freecss_orangelights-images/img5.png" alt="" /></a></td>
<td><a href="#"><img src="freecss_orangelights-images/img6.png" alt="" /></a></td>
</tr>
</table>
</div>
<div id="b_col3">
<h1>Contact Information</h1>
<div style="height:10px"></div>
<img src="freecss_orangelights-images/fish_bot2.png" class="img_l" alt="" />
<a href="#" class="a_bot_u">Vivamus blandit sem non urna pellentesque a viverra risus iaculis. Vestibulum sed nisi</a>
<div style="height:10px"></div>
<img src="freecss_orangelights-images/fish_bot2.png" class="img_l" alt="" />
<a href="#" class="a_bot_u">Vestibulum sed nisi quam. Mauris varius mollis iaculis. Integer ultricies lobortis dui, vel </a>
</div>
<div style="clear: both"></div>
</div>
<!-- footer begins -->
<div id="footer">
<div style="float: left; width: 500;">
Copyright 2011. <!-- Do not remove -->Designed by <a href="http://www.metamorphozis.com/free_templates/free_templates.php" title="Free Web Templates">Free Web Templates</a>, coded by <a href="http://www.myfreecsstemplates.com/" title="Free CSS Templates">Free CSS Templates</a><!-- end --><br />
<a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a>
</div>
<div style="float: right; width: 500; padding: 0px 0px 0px 0px; height: 37px;">
<a href="#" class="a_fu_i"><img src="freecss_orangelights-images/fu_i5.gif" class="fu_i" alt="" /></a>
<a href="#" class="a_fu_i"><img src="freecss_orangelights-images/fu_i4.gif" class="fu_i" alt="" /></a>
<a href="#" class="a_fu_i"><img src="freecss_orangelights-images/fu_i3.gif" class="fu_i" alt="" /></a>
<a href="#" class="a_fu_i"><img src="freecss_orangelights-images/fu_i2.gif" class="fu_i" alt="" /></a>
<a href="#" class="a_fu_i"><img src="freecss_orangelights-images/fu_i1.gif" class="fu_i" alt="" /></a>
</div>
</div>
<!-- footer ends -->
</div>
<div style="clear: both"></div>
<!-- header begins -->
<div id="header">
</div>
<!-- header ends -->
<div class="top_top"></div>
<div class="top_bot"></div>
<!-- content begins -->
<!-- content ends -->
<!-- bottom begin -->
<div id="bottom_bot">
</div>
<!-- bottom end -->
</div>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category