solutions
<!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>Solutions</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
CSS Credit: http://www.templatemo.com/
*/
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Verdana, Arial, san-serif;
font-size: 11px;
color: #dddcdc;
background: #262324 url(solutions-images/main_bg.jpg) top repeat-x;
}
a:link, a:visited { color: #b7bd19; text-decoration: none; font-weight: bold;}
a:active, a:hover { color: #b7bd19; text-decoration: underline;}
img {
padding: 0px;
margin: 0px;
}
p {
margin: 0px;
padding: 0px;
text-align: justify;
}
h1 {
color: #b5bb1a;
margin: 0 0 15px 0;
}
.cleaner {
clear: both;
width: 100%;
height: 1px;
font-size: 1px;
}
.cleaner_with_height {
clear: both;
width: 100%;
height: 30px;
font-size: 1px;
}
.cleaner_with_divider {
clear: both;
width: 100%;
height: 15px;
border-bottom: 1px solid #333;
margin-bottom: 25px;
font-size: 1px;
}
#container{
width: 960px;
margin: 0 auto;
}
/* header */
#header {
width: 900px;
height: 60px;
padding: 40px 30px 0 30px;
background: url(solutions-images/header_bg.jpg);
}
#header #site_title {
float: left;
font-size: 30px;
font-weight: bold;
color: #fff;
padding: 10px 0;
}
/* end of header */
/* menu */
#menu {
clear: both;
position: relative;
width: 920px;
margin: 0 20px;
height: 45px;
background: url(solutions-images/menu_bg.jpg) right no-repeat;
}
#menu span {
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 45px;
background: url(solutions-images/menu_bg_left.jpg) no-repeat;
}
#menu ul{
padding: 0 0 0 10px;
margin: 0 auto;
height: 45px;
list-style: none;
}
#menu ul li{
float:left;
padding-right: 5px;
}
#menu li a{
float: left;
display: block;
color: #000;
font-size: 12px;
height: 45px;
line-height: 45px;
text-align: center;
padding: 0px 0 0 8px;
}
#menu li a b{
float: left;
display: block;
padding: 4px 24px 0 16px;
}
#menu li.current a, #menu li a:hover{
color: #fff;
text-decoration: none;
background: url(solutions-images/menu_hover_bg_left.jpg) left top no-repeat;
}
#menu li.current a b, #menu li a:hover b{
color: #fff;
padding-top: 0px;
text-decoration: none;
background: url(solutions-images/menu_hover_bg.jpg) right top no-repeat;
}
/* end of menu */
/* banner */
#banner {
clear: both;
width: 960px;
height: 245px;
background: #b7bd19 url(solutions-images/banner_bg.jpg) top left no-repeat;
}
#banner p{
color: #333;
font-size: 13px;
width: 400px;
padding: 130px 0px 0px 70px;
text-align: left;
line-height: 20px;
}
#banner a{
color: #000;
}
/* end of banner */
/* content */
#content {
width: 880px;
padding: 30px 40px 0px 40px;
min-height: 500px;
background: url(solutions-images/content_bg.jpg) repeat-y;
}
#content #content_left {
float: left;
width: 560px;
}
#content #content_right {
float: right;
width: 280px;
}
/* left column */
#content_left p{
text-align: justify;
padding-bottom: 10px;
}
#content_left ul {
margin: 0px;
padding: 10px 0 0 0;
list-style:none;
}
#content_left li {
padding: 0 0 10px 25px;
background: url(solutions-images/list_icon.jpg) left top no-repeat;
}
#content_left .content_left_section_01 {
clear: both;
}
.content_left_section_01 h1 {
font-size: 24px;
margin: 0 0 15px 0;
padding: 5px 0 15px 0;
}
.content_left_section_01 img {
margin: 0 15px 5px 0;
border: 5px solid #2f2b2c;
}
#content_left #why_choose_us {
float: left;
margin-right: 40px;
width: 260px;
}
#why_choose_us h1 {
font-size: 18px;
height: 20px;
padding: 19px 0 0 40px;
background: url(solutions-images/graph.jpg) left bottom no-repeat;
}
#content_left #services {
float: left;
width: 260px;
}
#services li a {
font-size: 11px;
font-weight: normal;
color: #dddcdc;
}
#services h1 {
font-size: 18px;
height: 20px;
padding: 19px 0 0 40px;
background: url(solutions-images/services_icon.jpg) left bottom no-repeat;
}
/* end of left column */
/* right column */
#content_right .right_column_section{
clear: both;
margin-bottom: 30px;
}
.right_column_section img {
border: 5px solid #2f2b2c;
margin-bottom: 10px;
}
.right_column_section #company_news_header {
font-size: 18px;
height: 20px;
color: #b5bb1a;
padding: 19px 0 0 40px;
margin: 0 0 15px 0;
font-weight: bold;
background: url(solutions-images/news_icon.jpg) left bottom no-repeat;
}
.right_column_section #testimonials_header {
font-size: 18px;
height: 20px;
color: #b5bb1a;
padding: 19px 0 0 40px;
margin: 0 0 15px 0;
font-weight: bold;
background: url(solutions-images/test_icon.jpg) left bottom no-repeat;
}
.right_column_section h1 {
color: #20d1ee;
font-size: 12px;
padding: 0 0 5px 0;
margin: 0px;
font-weight: normal;
}
.right_column_section h2 {
margin: 0px;
padding: 0px;
font-size: 12px;
font-weight: bold;
}
#content_right #newsletter_section{
clear: both;
padding: 10px 20px;
height: 135px;
background: url(solutions-images/newsletter_bg.jpg) no-repeat;
}
#newsletter_section h1 {
color: #CC0;
font-size: 16px;
padding: 0;
margin: 0 0 20px 0;
}
#newsletter_section p{
margin-bottom: 10px;
}
#newsletter_section form {
padding: 0px;
margin: 0px;
}
#newsletter_section input {
margin-bottom: 5px;
}
/* end of right column */
/* end of content */
/* footer */
#footer {
clear: both;
color: #999;
width: 960px;
padding: 20px 0px 20px 0;
text-align: center;
background: url(solutions-images/footer_bg.jpg) top center no-repeat;
}
#footer a{
color: #fff;
font-weight: normal;
}
/* end of footer */
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="site_title"> Solutions </div>
</div>
<!-- end of header -->
<div id="menu"> <span></span>
<ul>
<li class="current"><a href="http://www.free-css.com/"><b>Home</b></a></li>
<li><a href="http://www.free-css.com/"><b>Solutions</b></a></li>
<li><a href="http://www.free-css.com/"><b>Partners</b></a></li>
<li><a href="http://www.free-css.com/"><b>Testimonials</b></a></li>
<li><a href="http://www.free-css.com/"><b>Company</b></a></li>
<li><a href="http://www.free-css.com/"><b>Contact</b></a></li>
</ul>
</div>
<!-- end of menu -->
<div id="banner">
<p>Fusce quis enim. Aenean eleifend, neque hendrerit elementum sodales, odio erat sagittis quam, sed tempor orci magna vitae tellus. Proin dui mauris, tempor eget, pulvinar sed, pretium sit amet, dui. <a href="http://www.free-css.com/">[more]</a></p>
</div>
<!-- end of banner -->
<div id="content">
<div id="content_left">
<div class="content_left_section_01">
<h1>Welcome to our website</h1>
<img src="solutions-images/image_02.jpg" alt="" style="float: left" />
<p> This layout is a free css template provided by TemplateMo.com. You may download, edit and use this template layout for your websites. Credit goes to Photovaco.com for photos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et nunc commodo ante ornare imperdiet. Donec nunc neque, pulvinar a, vestibulum eget, luctus id, orci.</p>
<p>Pellentesque elementum enim a augue. Donec in nisi. Donec nunc neque, pulvinar a, vestibulum eget, luctus id, orci. Pellentesque elementum enim a augue. Donec in nisi. </p>
</div>
<!-- end of section 01 -->
<div class="cleaner_with_divider"> </div>
<div id="why_choose_us">
<h1>Why choose us?</h1>
<p>Fusce quis enim. Aenean eleifend, neque hendrerit elementum sodales, odio erat sagittis quam, sed tempor orci magna vitae tellus.</p>
<ul>
<li>Quisque facilisis suscipit elit</li>
<li>Lacus et dictum tristique</li>
<li>Eeros ac tincidunt aliquam</li>
<li>Nullam commodo arcu non facilisis</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Donec felis. Pellentesque leo lacus</li>
</ul>
<a href="http://www.free-css.com/">Details</a></div>
<div id="services">
<h1>New Services</h1>
<p>Sed consectetur, lacus et dictum tristique, odio neque elementum ante, nec eleifend leo dolor vel tortor. Vivamus vulputate felis. Etiam luctus. Quisque facilisis suscipit elit. </p>
<ul>
<li><a href="http://www.free-css.com/">Flash Templates</a></li>
<li><a href="http://www.free-css.com/">CSS Templates</a></li>
<li><a href="http://www.free-css.com/">Royalty Free Photos</a></li>
<li><a href="http://www.free-css.com/">Web Design Blog</a></li>
<li><a href="http://www.free-css.com/">Premium Templates</a></li>
</ul>
<a href="http://www.free-css.com/">Details</a>
<div style="clear: both; margin-top: 30px;"> <a href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10" alt="" width="88" height="31" vspace="8" border="0" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/solutions-images/vcss-blue" alt="" vspace="8" border="0" /></a> </div>
</div>
<div class="cleaner"> </div>
</div>
<!-- content left -->
<div id="content_right">
<div class="right_column_section">
<div id="company_news_header">Hot News</div>
<img src="solutions-images/image_03.jpg" alt="" />
<h1>Donec euismod enim et risus</h1>
<p>Nunc aliquam, dolor vitae sollicitudin lacinia, nibh orci sagittis diam, dignissim sodales dui erat nec eros. <a href="http://www.free-css.com/">Read More</a> </p>
</div>
<div id="newsletter_section">
<h1>Newsletter</h1>
<p>Please enter your email address to sign up our newsletter.</p>
<form action="http://www.free-css.com/" method="get">
<input type="text" value="" id="newsletter" style="width: 230px;" />
<br />
<input type="submit" value="Submit" id="submit" />
</form>
</div>
<div class="cleaner_with_height"> </div>
<div class="right_column_section">
<div id="testimonials_header">Testimonials</div>
<h1>Nunc Aliquam said</h1>
<p>Aenean eleifend, neque hendrerit elementum sodales, odio erat sagittis quam, sed tempor orci magna vitae tellus. <a href="http://www.free-css.com/">Read More</a></p>
</div>
</div>
<!-- end of content right -->
<div class="cleaner"> </div>
</div>
<!-- end of content -->
<div id="footer"> <a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">Solutions</a> | <a href="http://www.free-css.com/">FAQs</a> | <a href="http://www.free-css.com/">Terms of use</a> | <a href="http://www.free-css.com/">Privacy Policies</a> | <a href="http://www.free-css.com/">Contact</a><br />
Copyright © 2024 <a href="http://www.free-css.com/"><strong>Your Company Name</strong></a> | Designed by <a href="http://www.templatemo.com">Free CSS Templates</a></div>
<!-- end of footer -->
</div>
<!-- end of container -->
</body>
</html>
Related examples in the same category