financial-website
<!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>Financial Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
margin: 0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.5em;
color: #585858;
background-color: #ededed;
}
a:link, a:visited { color: #006600; text-decoration: none; }
a:active, a:hover { color: #CC0000; text-decoration: none; }
h1 {
font-size: 22px;
font-weight: bold;
color: #38713a;
height: 32px;
background: url(financial-website-images/header1.jpg) no-repeat;
padding: 15px 0px 0px 55px;
}
h2 {
margin-top: 20px;
font-size: 16px;
font-weight: bold;
color: #56b81b;
height: 20px;
padding: 7px 0px 0px 35px;
background: url(financial-website-images/header2.jpg) no-repeat;
}
#container {
width: 900px;
margin: auto;
background-color: #fff;
}
#top_section {
float: right;
width: 900px;
height: 50px;
background: url(financial-website-images/menu.jpg) no-repeat;
}
#welcomesection {
float: left;
width: 900px;
}
#welcomesection img {
float: left;
padding-right: 10px;
}
.topmenu{
float: right;
width: 580px;
padding-right: 20px;
}
.topmenu ul {
list-style: none;
padding: 0px;
margin: 0px;
}
.topmenu li{
display: inline ;
}
.topmenu li a{
float: left;
text-align: center;
font-size: 11px;
font-weight: bold;
color: #fff;
width: 77px;
height: 30px;
padding: 14px 0px 0px 5px;
}
.topmenu li a:hover{
color: #91e30c;
text-decoration: underline;
}
#headersection {
float: left;
width: 410px;
height: 180px;
color: #fff;
text-align: justify;
font-size: 11px;
padding: 63px 140px 0px 350px;
background: url(financial-website-images/header.jpg) no-repeat;
}
#headersection span {
font-size: 18px;
font-weight: bold;
}
#welcomesection {
float: left;
width: 800px;
text-align: justify;
padding: 0px 50px 0px 50px;
}
#footersection {
clear: both;
width: 900px;
height: 23px;
margin-top: 20px;
background-color: #cbf0bb;
text-align: center;
padding-top: 7px;
}
#boxleft {
float: left;
width: 400px;
padding-left: 50px;
}
#boxright {
float: left;
width: 430px;
padding-left: 20px;
}
.box_left {
float: left;
width: 23px;
height: 253px;
background: url(financial-website-images/box_left.jpg) no-repeat;
}
.box_middle {
float: left;
width: 330px;
height: 253px;
text-align: justify;
padding: 0px 5px 0px 5px;
background: url(financial-website-images/box_middle.jpg) repeat-x;
}
.box_middle img {
float: left;
padding-right: 10px;
}
.box_right {
float: left;
width: 23px;
height: 253px;
background: url(financial-website-images/box_right.jpg) no-repeat;
}
.morebutton1 {
background: url(financial-website-images/morebutton1.jpg) no-repeat;
font-size: 11px;
height: 39px;
width: 62px;
padding: 8px 0px 0px 20px;
font-weight: bold;
}
.morebutton1 a {
color: #FFFFFF;
}
.morebutton2 {
float: right;
background: url(financial-website-images/morebutton2.jpg) no-repeat;
width: 51px;
height: 28px;
font-size: 10px;
padding: 5px 0px 0px 10px;
}
.morebutton2 a {
font-weight: bold;
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<div id="top_section">
<div class="topmenu">
<ul>
<li><a href="http://www.free-css.com/">HOME</a></li>
<li><a href="http://www.free-css.com/">COMPANY</a></li>
<li><a href="http://www.free-css.com/">SOLUTIONS</a></li>
<li><a href="http://www.free-css.com/">SERVICES</a></li>
<li><a href="http://www.free-css.com/">CLIENTS</a></li>
<li><a href="http://www.free-css.com/">SITE MAP</a></li>
<li><a href="http://www.free-css.com/">CONTACT</a></li>
</ul>
</div>
</div>
<div id="headersection"><span>FINANCE WEBSITE<br />
</span> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut iaculis lacinia purus. Duis pulvinar scelerisque ante. Morbi tristique, risus quis congue pulvinar, nisl nisi commodo diam, a porta nisi ligula ac massa. Vestibulum blandit lacus sed sapien.</div>
<div id="welcomesection">
<h1>WELCOME TO FINANCIAL WEBSITE</h1>
<p><img src="financial-website-images/photo3.jpg" alt="" width="167" height="127" />This is a free CSS template provided by TemplateMo.com website. You may download, modify and apply this CSS layout for your personal or business websites.</p>
<p>Mauris quis nulla sed ipsum pretium sagittis. Suspendisse feugiat. Ut sodales libero ut odio. Maecenas venenatis metus eu est. In sed risus ac felis varius bibendum. Nulla imperdiet congue metus. Vestibulum dapibus tortor vel orci. Maecenas vulputate, arcu id fermentum eleifend, tortor enim tincidunt mauris, fringilla tincidunt purus urna vel risus. </p>
<p>Nulla enim nibh, consectetuer sed, vestibulum elementum, sagittis nec, diam. Mauris blandit vehicula neque. Proin consectetuer. Donec venenatis. Cras urna metus, feugiat non, consectetuer quis, pretium quis, nunc. Nullam pede purus, tempor a, imperdiet in, porttitor at, nulla. </p>
<div class="morebutton1"> <a href="http://www.free-css.com/">MORE</a></div>
</div>
<div id="boxleft">
<div class="box_left"></div>
<div class="box_middle">
<h2>OUR PARTNERS</h2>
<p><img src="financial-website-images/photo1.jpg" alt="" width="82" height="82" />Nulla tellus risus, tincidunt vitae, sagittis vel, interdum at, erat. Duis vitae velit. Ut ultricies. Fusce sollicitudin nisl a lectus. Pellentesque odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed leo. Duis suscipit lorem in risus.</p>
<p><a target="_blank" href="http://validator.w3.org/check?uri=referer"><img height="31" alt="" src="http://www.w3.org/Icons/valid-xhtml10" width="88" vspace="8" border="0" /></a><a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer"><img alt="" src="http://jigsaw.w3.org/css-validator/financial-website-images/vcss-blue" vspace="8" border="0" /></a></p>
<div class="morebutton2"><a href="http://www.free-css.com/">MORE</a></div>
</div>
<div class="box_right"></div>
</div>
<div id="boxright">
<div class="box_left"></div>
<div class="box_middle">
<h2>OUR SOLUTIONS</h2>
<p><img src="financial-website-images/photo2.jpg" alt="" width="90" height="83" />Suspendisse potenti. Ut sed pede. Nullam vitae tellus. Sed ultrices. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur velit tellus, placerat et, dapibus varius, aliquet quis, purus. Aliquam sagittis molestie sapien.</p>
<div class="morebutton2"><a href="http://www.free-css.com/">MORE</a></div>
</div>
<div class="box_right"></div>
</div>
<div id="footersection">Copyright 2024 Your Company Name | Designed by <a href="http://www.templatemo.com">Free CSS Templates</a></div>
</div>
</body>
</html>
Related examples in the same category