freecss_lightred
<!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>
<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
*/
*{
margin: 0px;
padding: 0px;
}
img{
padding: 0px;
border: none;
}
a{
color: #a10304;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #e60001;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 17px;
color: #000000;
background: #ffffff url(freecss_lightred-images/bg.jpg) repeat-x top;
width: 1014px;
margin: 0 auto;
}
h2{
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
color: #d17b02;
padding-bottom: 5px;
}
h3{
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
color: #a10304;
font-weight: normal;
padding-bottom: 20px;
line-height: 32px;
}
h4{
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #a10304;
font-weight: normal;
text-transform: uppercase;
padding-bottom: 10px;
border-bottom: 1px solid #a10304;
}
h5{
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #a10304;
font-weight: normal;
text-transform: uppercase;
padding-bottom: 10px;
background: url(freecss_lightred-images/right_title.png) repeat-x bottom;
margin-bottom: 10px;
}
h6{
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #a10304;
border-bottom: 1px solid #a10304;
font-weight: normal;
margin-bottom: 10px;
}
.clear{
clear: both;
}
#menu{
width: 1014px;
height: 43px;
padding-top: 30px;
}
#menu ul{
padding-left: 0px;
list-style: none;
padding: 0px 0px 0px 10px;
}
#menu ul li{
display: inline;
}
#menu ul li a{
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #ffffff;
text-align: center;
font-weight: normal;
text-decoration: none;
display: block;
float: left;
width: 124px;
height: 43px;
line-height: 43px;
margin-right: 4px;
background: url(freecss_lightred-images/menu_bg.png) 0px 0px;
}
#menu ul li a:hover, #menu ul li .active{
color: #ffffff;
background: url(freecss_lightred-images/menu_bg.png) 0px 43px;
}
/*logo*/
#logo{
height: 50px;
padding-top: 20px;
text-align: right;
}
#logo h1 a{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
#logo a small{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
/*
prew box
*/
#prew_box{
background: url(freecss_lightred-images/prew_bg.jpg);
width: 984px;
height: 327px;
padding: 15px;
}
#prew_img{
width: 984px;
height: 327px;
}
.prew_img1{
background: url(freecss_lightred-images/prew_img1.jpg);
}
.button_left{
margin-top: 150px;
margin-left: 5px;
float: left;
}
.button_right{
margin-top: 150px;
margin-right: 5px;
float: right;
}
.razd{
border-top: 1px solid #a10304;
height: 1px;
border-bottom: 1px solid #a10304;
margin-top: 15px;
margin-bottom: 15px;
clear: both;
}
/*
content
*/
#left{
float: left;
width: 611px;
padding-right: 40px;
}
.left_razd{
height: 50px;
}
.images_box{
padding: 15px 0px 15px 0px;
}
.images_box a{
display: block;
float: left;
}
.center_img{
margin: 0px 10px 0px 10px;
}
.more{
}
.more a{
display: block;
background: url(freecss_lightred-images/more.png) no-repeat;
width: 69px;
height: 16px;
float: right;
text-align: center;
line-height: 16px;
margin: 15px 0px 0px 0px;
}
#right{
float: left;
width: 363px;
}
.right_bg_top{
background: url(freecss_lightred-images/right_top.png) no-repeat;
width: 363px;
height: 10px;
}
.right_bg{
background: url(freecss_lightred-images/right_bg.png) no-repeat;
min-height: 207px;
border-left: 1px solid #a10304;
border-right: 1px solid #a10304;
padding: 0px 20px 0px 20px;
}
.right_bg_bot{
background: url(freecss_lightred-images/right_bot.png) no-repeat;
width: 363px;
height: 10px;
}
.right_pad{
padding-bottom: 15px;
}
.italic_style{
font-style: italic;
clear: both;
}
.author{
float: right;
font-style: italic;
padding: 5px 0px 5px 0px;
}
/*
3column
*/
#column3{
clear: both;
}
#col1, #col2, #col3{
float: left;
width: 285px;
}
#col2{
padding-left: 79px;
padding-right: 79px;
}
.pad_left{
padding-left: 20px;
margin-bottom: 5px;
}
.ls{
list-style: none;
}
.ls li{
border-bottom: 1px solid #b5b5b5;
}
.ls li a{
font-size: 11px;
font-weight: normal;
text-transform: uppercase;
}
#col1 .ls{
padding-top: 20px;
}
#col1 .ls li a{
font-size: 12px;
text-transform: none;
}
/*
footer
*/
#footer{
text-align: center;
padding-bottom: 15px;
font-size: 10px;
}
#footer p, #footer a{
text-decoration: none;
font-weight: normal;
color: #000000;
font-size: 10px;
}
/*=*/
/* Nivo Slider Demo
/* November 2010
/* By: Gilbert Pellegrom
/* http://dev7studios.com
/*=*/
#slider-wrapper {
background:url(freecss_lightred-images/top.jpg) no-repeat;
width:984px;
height: 327px;
margin:0 auto;
}
#slider {
position:relative;
width: 984px;
height: 327px;
background:url(freecss_lightred-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_lightred-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_lightred-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 id="header">
<div id="menu">
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div id="logo">
<h1><a href="#">freecss_lightred</a></h1>
<a href="#"><small>Small Company Slogan Goes Here</small></a>
</div>
</div>
<div id="prew_box">
<div id="wrapper">
<div id="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="freecss_lightred-images/prew_img1.jpg" alt="" />
<img src="freecss_lightred-images/prew_img2.jpg" alt=""/>
<img src="freecss_lightred-images/prew_img3.jpg" alt="" />
</div>
</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 class="razd"></div>
<div id="content">
<div id="left">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at neque in erat vulputate eleifend. Curabitur a diam a nunc bibendum fringilla. Donec non mauris vel augue viverra eleifend. Nam consectetur rhoncus turpis, sed egestas massa gravida eu. Ut sapien urna, vulputate id congue quis, molestie eu neque. Morbi eget ante eu sapien varius placerat sit amet in lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris lorem nisi, facilisis quis ultricies eu, tincidunt faucibus nisi. Pellentesque blandit urna in risus </p>
<div class="left_razd"></div>
<h4>Latest Projects</h4>
<div class="images_box">
<a href="#"><img src="freecss_lightred-images/img1.jpg" alt="" title="" /></a>
<a href="#" class="center_img"><img src="freecss_lightred-images/img2.jpg" alt="" title="" /></a>
<a href="#"><img src="freecss_lightred-images/img3.jpg" alt="" title="" /></a>
</div>
<div class="more"><a href="#">View more</a></div>
</div>
<div id="right">
<div class="right_grad_box right_pad">
<div class="right_bg_top"></div>
<div class="right_bg">
<h5>Testimonials</h5>
<p class="italic_style">"Sed congue vulputate massa quis dignissim. Quisque eu malesuada massa. Nunc sed ligula magna. Donec a nunc lorem, ac tempus sem. Nunc magna nisi, bibendum quis"</p>
<div class="author"><a href="#">- John Doe</a></div>
<p class="italic_style">"Etiam pellentesque enim ac nibh convallis nec hendrerit nunc pellentesque. Praesent nec ipsum lorem. Quisque mattis faucibus iaculis. Nam posuere elit eget lectus"</p>
<div class="author"><a href="#">- John Doe</a></div>
</div>
<div class="right_bg_bot"></div>
</div>
<div class="right_grad_box">
<div class="right_bg_top"></div>
<div class="right_bg">
<h5>Class aptent taciti </h5>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin eu mi vitae tellus imperdiet commodo. Praesent ultricies, nisl eget iaculis venenatis, elit odio tincidunt leo, nec malesuada dolor neque sit amet tellus. In condimentum porttitor libero vel scelerisque. Nunc suscipit erat nec lorem placerat sed porttitor risus suscipit. Mauris id nisl tellus. Vestibulum ante ipsum primis </p>
</div>
<div class="right_bg_bot"></div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="razd"></div>
<div id="column3">
<div id="col1">
<h6>Vivamus sem tortor</h6>
<p>Praesent ultricies, nisl eget iaculis venenatis, elit odio tincidunt leo, nec malesuada dolor neque sit amet tellus. In condimentum porttitor libero vel </p>
<ul class="ls">
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Maecenas non dui ut quam pulvinar</a></li>
<li><a href="#">Donec sed nulla ut justo</a></li>
</ul>
</div>
<div id="col2">
<h6>Aenean sed felis nec</h6>
<ul class="ls">
<li><a href="#">Donec sed nulla ut justo faucibus condimetum.</a></li>
<li><a href="#">Phasellus cursus diam sed felis gravida id </a></li>
<li><a href="#">Sed sit amet neque sed purus bibendum vulpuate </a></li>
<li><a href="#">Proin bibendum tortor ac odio posuere comodo.</a></li>
<li><a href="#">Donec in massa ipsum, a porttitor enim.</a></li>
<li><a href="#">Aenean sed felis nec mi luctus consetetur.</a></li>
<li><a href="#">Duis quis nisl id elit suscipit bladit vel ac dolor.</a></li>
</ul>
</div>
<div id="col3">
<h6>Contact Information</h6>
<div class="pad_left" style="background: url(freecss_lightred-images/home.png) no-repeat left center">
1234 SomeStreet
</div>
<div class="pad_left">
Brooklyn, NY 11201
</div>
<div class="pad_left" style="background: url(freecss_lightred-images/phone.png) no-repeat left center">
Phone: 1(234) 567 8910
</div>
<div class="pad_left">
Fax: 1(234) 567 8910
</div>
<div class="pad_left" style="background: url(freecss_lightred-images/contact.png) no-repeat left center">
E-mail:companyname@yahoo.com
</div>
</div>
<div class="clear"></div>
</div>
<div class="razd"></div>
<div id="footer">
<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>
</body>
</html>
Related examples in the same category