freecss_set
<!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_set-images/bg.jpg) top repeat-x #E4E4E4;
line-height: 18px;
}
.bg_png { background:url(freecss_set-images/bg_png.png) center top no-repeat;}
#main {
width: 1014px;
margin: 0px auto 0px auto;
}
#header {
height: 110px;
}
#logo {
height: 40px;
padding: 26px 0px 0px 13px;
text-align: left;
background: url(freecss_set-images/logo.gif) top repeat-x;
}
#logo a {
text-decoration: none;
font-size: 16px;
color: #03688E;
font-style: italic;
font-weight: 100;
}
#logo H2 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-weight:100;
color: #03688E;
font-style: italic;
}
#buttons{
text-align:center;
height: 44px;
padding-left: 0px;
background: url(freecss_set-images/buttons.gif) top repeat-x;
padding: 0px 0px 0px 7px;
}
#buttons a {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
display: block;
float: left;
text-decoration: none;
color: #ffffff;
text-align: center;
padding-top: 10px;
height: 34px;
}
.but {
width: 200px;
}
#buttons .but:hover {
background: url(freecss_set-images/but_hover.gif) top repeat-x;
}
.top_top {
height: 15px;
background: url(freecss_set-images/top_top.jpg) left top no-repeat;}
.top { height:321px;
background: #E4E4E4;
padding-top: 13px;}
.top_bot {
height: 15px;
background: url(freecss_set-images/top_bot.jpg) left top no-repeat;}
#content{
padding: 10px 0px 10px 0px;
background: #ffffff;
}
.home_box {
float: left;
width: 303px; }
.img_l { float:left;
margin: 3px 18px 6px 0px;
}
.img_r { float: right;
margin: 9px 10px 3px 10px;
}
.span_cont { color: #003574;
font-size:12px;
font-weight:bold;
}
h1{
font-size:16px;
font-weight: 100;
color: #FFFFFF;
text-align: left;
padding: 0px 0px 0px 0px;
background:url(freecss_set-images/h1.jpg) left top no-repeat;
padding: 4px 0px 4px 8px;
}
h2{
font-size:16px;
font-weight: bold;
color: #003574;
text-align: left;
font-style: italic;
padding: 0px 0px 0px 0px;
}
.read {
font-size:14px;
color: #E40000;
text-decoration: underline;
font-weight:100;
padding-right: 2px;
display:block;
height: 17px;
line-height: 17px;
width: 80px;
padding: 0px 0px 0px 0px;
text-align: center;
float: right;
margin-top: 4px;
}
.read:hover {
font-size:14px;
text-decoration: none ;
}
.text { padding: 0px 14px 0px 14px;}
.razd_h { border-top: 1px solid #E4E4E4;}
.span_bot {
color: #ffffff;
font-weight: bold;}
#bottom {
background: url(freecss_set-images/bottom.gif) top repeat-x #03688E;
color: #000000;
}
#bottom_bot {
background: url(freecss_set-images/bottom.gif) 43px bottom no-repeat;
color: #FFFFFF;
}
#bottom h1 {
color: #ffffff;
font-size: 16px;
font-weight: bold;
text-align: left;
padding: 10px 0px 15px 0px;
background: none;
font-style: italic;
}
#b_col1 {
width: 324px;
float: left;
margin-left: 14px;
}
#b_col2 {
width: 305px;
float: left;
margin-left: 34px;
}
#b_col3 {
width: 290px;
float: left;
margin-left: 34px;
text-align: left;
}
.box_us {
width: 270px;
background: url(freecss_set-images/box_us.gif) 0px bottom repeat-x;
}
.box_us_l {
width: 45px;
float: left;
padding-top:3px;}
.box_us_r {
width: 225px;
float: left;}
.spis_bot {
list-style:none;
padding: 0px 0px 0px 0px;}
.spis_bot li {
padding: 2px 0px 0px 0px;
}
.spis_bot a {
color:#232323;
text-decoration:none;
font-weight: bold;
background: url(freecss_set-images/fish2.png) 2px 8px no-repeat;
display: block;
font-weight:bold;
padding: 5px 0px 3px 23px;}
.spis_bot a:hover {
color:#ffffff;
padding: 5px 0px 3px 28px;
text-decoration: none;
background:url(freecss_set-images/fish2_hover.gif) left top no-repeat;
}
.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;}
.input_txt {
width: 210px;
border: none;
background: #C9C7C7;
padding: 3px 10px 3px 10px;
color:#000000;
float: right;
border: 1px solid #656565;
}
.text_area {
width: 268px;
height:64px;
border: none;
background: #C9C7C7;
padding: 3px 10px 3px 10px;
color:#000000;
font-size: 12px;
font-family:Arial, Helvetica, sans-serif;
border: 1px solid #656565;
}
.submit {
background:url(freecss_set-images/submit.gif) right 0px no-repeat;
text-align: center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding: 1px 6px 3px 0px;
font-size:12px;
color: #ffffff;
text-decoration: none;
padding-right: 2px;
font-weight: 100;
width: 44px;
margin: 0px 0px 0px 198px;
float:right;
}
#footer{
height: 103px;
font-size: 10px;
color: #ffffff;
text-align: left;
padding: 12px 25px 0px 25px;
background: url(freecss_set-images/footer.jpg) bottom no-repeat #03688E;
border-top: 1px solid #ffffff;
}
#footer a{
color: #ffffff;
font-size: 10px;
text-decoration: none;
}
#footer a:hover{
color: #ffffff;
font-size: 10px;
text-decoration: underline;
}
.lh {
line-height: 22px;
}
/*=*/
/* Nivo Slider Demo
/* November 2010
/* By: Gilbert Pellegrom
/* http://dev7studios.com
/*=*/
#slider-wrapper {
background:url(freecss_set-images/top.jpg) no-repeat;
width:984px;
height: 327px;
margin:0 auto;
}
#slider {
position:relative;
width: 984px;
height: 327px;
background:url(freecss_set-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:260px;
bottom:-42px;
display: none;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(freecss_set-images/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(freecss_set-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_png">
<div id="main">
<!-- header begins -->
<div id="header">
<div id="buttons">
<a href="index.html" class="but" title="">Home</a>
<a href="blog.html" class="but" title="">Blog</a>
<a href="gallery.html" class="but" title="">Gallery</a>
<a href="about_us.html" class="but" title="">About us</a>
<a href="contact_us.html" class="but" title="">Contact us</a>
</div>
<div id="logo">
<b><a href="#">freecss_set</a></b>
<h2><a href="#"><small>Small Company Slogan Goes Here</small></a></h2>
</div>
</div>
<!-- header ends -->
<div class="top_top"></div>
<div class="top">
<div id="wrapper">
<div id="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="freecss_set-images/top.jpg" alt="" />
<img src="freecss_set-images/top2.jpg" alt=""/>
<img src="freecss_set-images/top3.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>
</div>
<div class="top_bot"></div>
<!-- content begins -->
<div id="content">
<div class="text">
<h1>Welcome to our Website</h1>
<div style="height:10px"></div>
<img src="freecss_set-images/img1.jpg" class="img_l" alt="" />
<span class="span_cont">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span><br />
Praesent enim justo, blandit et pellentesque vitae, vestibulum ut ipsum. Phasellus blandit volutpat felis quis faucibus. Donec non orci est, ac rhoncus libero. Vestibulum gravida eleifend enim, suscipit venenatis dolor placerat vitae.<br />
<span class="span_cont">Fusce vel ultricies dui.</span><br />
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc vitae odio nibh. Maecenas id tellus nec nulla euismod suscipit nec et nibh. Vivamus ac nisl quam. Etiam sit amet velit id metus volutpat molestie quis non ipsum. Integer sit amet nibh massa, non luctus sapien. Cras vel nisl ac mauris
<div style="height:24px;"><a class="read" href="#">Learn more</a></div>
<div style="clear: both"></div>
</div>
<div style="height:15px"></div>
<div class="razd_h"></div>
<div style="height:15px"></div>
<div class="text">
<div class="home_box">
<img src="freecss_set-images/img12.gif" class="img_l" alt="" />
<h2>Nunc accumsan convallis interdum</h2>
<div style="clear: both"></div>
<div style="height:10px;"></div>
Curabitur aliquet, diam in fringilla vehicula, lacus ipsum consectetur tortor, quis tristique metus dolor at ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc accumsan convallis interdum. Sed sit amet nisi lorem,
<div style="height:24px;"><a class="read" href="#">Learn more</a></div>
</div><div style="width: 38px; height:20px; float: left;"></div>
<div class="home_box">
<img src="freecss_set-images/img13.gif" class="img_l" alt="" />
<h2>Cras nunc quam, adipiscing ac tempor non</h2>
<div style="clear: both"></div>
<div style="height:10px;"></div>
Cras nunc quam, adipiscing ac tempor non, adipiscing a mi. Proin ut dolor eget nunc bibendum egestas. In id tortor massa, vel lacinia magna. Praesent vitae ligula sodales enim egestas dignissim sed et nibh. Mauris fermentum nunc eu quam fringilla
<div style="height:24px;"><a class="read" href="#">Learn more</a></div>
</div><div style="width: 38px; height:20px; float: left;"></div>
<div class="home_box">
<img src="freecss_set-images/img13.gif" class="img_l" alt="" />
<h2>Quisque consectetur tempor elit in porta </h2>
<div style="clear: both"></div>
<div style="height:10px;"></div>
Aenean eget ipsum nec magna hendrerit mattis sit amet eget magna. Duis rhoncus ultrices ultricies. Aenean vel metus est, sed condimentum felis. Curabitur ac massa diam, eget blandit enim. Curabitur cursus bibendum convallis. Maecenas aliquam gravida
<div style="height:24px;"><a class="read" href="#">Learn more</a></div>
</div>
<div style="clear: both"></div>
</div>
</div>
<!-- content ends -->
<!-- bottom begin -->
<div id="bottom_bot">
<div id="bottom">
<div id="b_col1">
<h1>About Us</h1>
<div style="height:5px"></div>
<img src="freecss_set-images/img5.jpg" class="img_l" alt="" />
<span class="span_bot">Morbi id vehicula orci. </span><br />
Ut consequat commodo nunc nec tincidunt. Pellentesque vitae gravida nulla. Aliquam fermentum ipsum et mauris rutrum ac ornare arcu
convallis justo in eros fermentum eget cursus augue cursus. Donec sit amet eros eget ligula blandit congue.
</div>
<div id="b_col2">
<h1>Recent Posts</h1>
<ul class="spis_bot">
<li><a href="#">Lorem ipsum dolor sit amet, consectetur adip</a></li>
<li><a href="#">Quisque nec lectus leo, et condimentum massa.</a></li>
<li><a href="#">Suspendisse porttitor purus a nisl tincidunt at </a></li>
<li><a href="#">Aliquam et leo quis massa ultricies varius non </a></li>
<li><a href="#">Morbi eget arcu metus, facilisis rhoncus mi. </a></li>
<li><a href="#">Morbi condimentum enim in lorem iaculis ultr</a></li>
</ul>
</div>
<div id="b_col3">
<h1>Contact Information</h1>
<div style="height:5px"></div>
<form action="" method="post">
<div style=" height: 22px;"><label style=" line-height: 25px">Name</label> <input class="input_txt" value="" name="Name" type="text" /></div><div style="height:8px"></div>
<div style=" height: 22px;"><label style=" line-height: 25px">E-mail</label> <input class="input_txt" value="" name="" type="text" /></div><div style="height:8px"></div>
<div><textarea class="text_area" cols="32" rows="3" name="Message"></textarea></div>
<div style="height:10px"></div>
<div style="height:20px;">
<input class="submit" name="Submit" type="submit" value="Send" />
</div>
</form>
</div>
<div style="clear: both; height:20px;"></div>
</div>
</div>
<!-- bottom end -->
<!-- footer begins -->
<div id="footer">
<div style="float: left; width: 500;">
<p>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 --></p>
<p><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></p>
</div>
<div style="float: right; width: 500; padding: 0px 0px 0px 0px; height: 37px;">
<a href="#" class="a_fu_i"><img src="freecss_set-images/fu_i5.gif" class="fu_i" alt="" /></a>
<a href="#" class="a_fu_i"><img src="freecss_set-images/fu_i4.gif" class="fu_i" alt="" /></a>
<a href="#" class="a_fu_i"><img src="freecss_set-images/fu_i3.gif" class="fu_i" alt="" /></a>
<a href="#" class="a_fu_i"><img src="freecss_set-images/fu_i2.gif" class="fu_i" alt="" /></a>
<a href="#" class="a_fu_i"><img src="freecss_set-images/fu_i1.gif" class="fu_i" alt="" /></a>
</div>
</div>
<!-- footer ends -->
</div>
</div>
</body>
</html>
Related examples in the same category