Footer with Two parts
<!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=iso-8859-1" />
<title>Welcome to Home Of Projects</title>
<style type='text/css'>
/*
- project Home Of Projects -
This is the main css file for the website, where
all the design is defined.
*/
@import url('misc.css');
@import url('roundcorners.css');
@import url('ads.css');
body {
padding: 0;
margin: 0;
font-size: 62.5%;
background: #333333;
}
#wrap {
width: 860px;
margin: 30px auto 0 auto; /* Top 30px, left auto, bottom 0 cause it doesn't work, and right auto, the auto is to put it into center. */
background: #ffffff url(..HomeOfProjects001-images/wrap_corner_left.jpg) top left no-repeat;
font-size: 1em;
font-family: Tahoma, Verdana, Arial;
}
.wrap_corner_right {
background: url(..HomeOfProjects001-images/wrap_corner_right.jpg) top right no-repeat;
}
.bottom_space {
margin-bottom: 30px;
}
#topcontent {
padding: 3px 3px 0 3px;
}
#header {
background: #336699 url(..HomeOfProjects001-images/header_corner_left.jpg) top left no-repeat;
}
#top_header {
background: url(..HomeOfProjects001-images/header_corner_right.jpg) top right no-repeat;
}
#header #logo {
padding: 20px 0 0 20px;
width: 275px;
float: left;
}
#header #logo a { text-decoration:none; color: #FFFFFF; }
#header #logo a img { border:none; }
#header #logo { height: 55px; }
#header #logo h1 {
font-size: 2em;
padding: 0;
margin: 0;
}
#header #logo h1 span {
font-size: 1em;
}
#header #logo p {
margin: 0;
padding: 0;
color: #CCDDEE;
font-size: 1.4em;
}
#header #center_header {
float: left;
width: 275px;
color: #FFFFFF;
font-size: 1.1em;
}
#header #center_header a {
color: #ffffff;
text-decoration: underline;
}
#header #center_header #suggestion {
background: #2C5783 url(..HomeOfProjects001-images/suggestion_corner_left_bottom.jpg) bottom left no-repeat;
}
.suggestion_corner_right {
background: url(..HomeOfProjects001-images/suggestion_corner_right_bottom.jpg) bottom right no-repeat;
padding: 10px 10px;
}
#header #right_header {
float: right;
text-align: right;
width: 255px;
color: #FFFFFF;
padding: 10px 20px 0 0;
font-size: 1.1em;
}
#header #right_header a { text-decoration: none; color: #FFFFFF; }
#header #right_header a:hover { text-decoration: underline; }
#header #menu_container { padding: 10px 20px 0 20px; }
#header #menu {
height: 25px;
background: #264E75 url(..HomeOfProjects001-images/menu_bg.jpg) top right no-repeat;
font-size: 1.1em;
}
#header #menu ul {
list-style: none;
height: 25px;
margin: 0;
padding: 0;
}
#header #menu ul li {
display: inline;
}
#header #menu ul li a {
display: block;
float: left;
color: #ffffff;
height: 25px;
text-decoration: none;
line-height: 25px;
background: url(..HomeOfProjects001-images/menu_bg_separator.jpg) top left no-repeat;
padding: 0 10px;
}
#header #menu ul li a.active {
background: #204264 url(..HomeOfProjects001-images/menu_bg_separator.jpg) top left no-repeat;
}
#header #menu ul li a.first {
background: url(..HomeOfProjects001-images/menu_bg_leftcorner.jpg) top left no-repeat;
}
#header #menu ul li a:hover {
text-decoration: underline;
/* color: #CCDDEE; */
}
/* menu user */
#header #menu_user {
height: 25px;
background: #204264;
font-size: 1.1em;
}
#header #menu_user ul {
list-style: none;
height: 25px;
margin: 0;
padding: 0 20px 0 20px;
}
#header #menu_user ul li {
display: inline;
}
#header #menu_user ul li a {
display: block;
float: left;
color: #ffffff;
height: 25px;
text-decoration: none;
line-height: 25px;
padding: 0 10px;
}
#header #menu_user ul li a:hover {
text-decoration: underline;
/* color: #CCDDEE; */
}
#body {
background: url(..HomeOfProjects001-images/body_bg.jpg) top left repeat-x;
padding: 25px 20px 0 20px;
}
#body .body_left {
float: left;
width: 405px;
}
#body .body_right {
float: right;
width: 405px;
}
#body.maintenance {
background: url(..HomeOfProjects001-images/maintenance.jpg) bottom right no-repeat;
}
#body h1 {
font-size: 1.4em;
color: #264E75;
margin: 0 0 15px 0;
padding: 0;
font-family: Arial;
}
#body p {
padding: 0;
margin: 0;
font-size: 1.1em;
margin: 0 0 15px 0;
padding: 0;
}
#body p a,
ul.asterix a {
color: #336699;
text-decoration: underline;
}
#body p a:hover {
}
#body ul.asterix {
padding: 0 20px;
margin: 0 0 15px 0;
list-style: none;
font-size: 1.1em;
}
#body ul.asterix li {
padding: 0 0 5px 15px;
background: url(..HomeOfProjects001-images/ul_asterix_li.jpg) 1px 3px no-repeat;
}
#body ul.asterix li.green {
background: url(..HomeOfProjects001-images/ul_asterix_li_green.jpg) 1px 3px no-repeat;
color: #00CC00;
}
#body #body_left {
width: 400px;
float: left;
}
#body #body_left p.ideas {
}
#body #body_left p.ideas span {
font-weight: bold;
color: #950065;
}
#body #body_right {
width: 390px;
padding-left: 20px;
float: right;
}
.yellow {
background: #FFFF9B;
}
.yellow_container {
padding: 0;
margin: 0 0 15px 0;
}
#body #body_right #project_signup {
float: left;
width: 165px;
padding-left: 10px;
}
#body #body_right #member_signup {
float: right;
width: 166px;
padding: 0 10px;
}
#body #body_right #signup {
font-size: 1.1em;
}
#body #body_right #signup .title {
font-family: Arial;
}
#body #body_right #signup a.signup {
color: #FFFFFF;
background: #950065;
display: block;
line-height: 30px;
margin-top: 20px;
text-align: center;
text-decoration: none;
font-weight: bold;
}
#body #body_right #signup .title {
color: #264E75;
font-weight: bold;
margin-bottom: 10px;
}
#bottomcontent {
background: url(..HomeOfProjects001-images/bottomcontent_corner_left.jpg) bottom left no-repeat;
}
#bottomcontent .bottomcontent_right {
background: url(..HomeOfProjects001-images/bottomcontent_corner_right.jpg) bottom right no-repeat;
padding: 3px;
}
#footer {
background: #336699 url(..HomeOfProjects001-images/footer_corner_left.jpg) bottom left no-repeat;
border-top: 1px solid #264E75;
color: #FFFFFF;
font-size: 1.1em;
}
#footer .footer_corner_right {
background: url(..HomeOfProjects001-images/footer_corner_right.jpg) bottom right no-repeat;
}
#footer .left,
#footer .right {
padding-bottom: 15px;
padding-top: 15px;
}
#footer .left {
width: 600px;
float: left;
padding-left: 20px;
}
#footer .left a {
color: #FFFFFF;
text-decoration: none;
}
#footer .left a:hover {
text-decoration: underline;
}
#footer .right {
background: url(..HomeOfProjects001-images/footer_divider.jpg) top left no-repeat;
width: 180px;
float: right;
padding-left: 15px;
padding-right: 20px;
}
#footer .right a {
color: #ffffff;
text-decoration: underline;
}
.tos_titles {
color: #950065;
font-weight: bold;
}
.form_item {
}
.form_item span.label {
color: #950065;
display: block;
}
.form_item span.desc {
color: #999999;
display: block;
}
.form_item span.error {
color: #FF0000;
}
.form_item input.wide {
width: 250px;
}
/* .notice - messages to user
--------------------------------*/
#notice {
padding: 15px 15px 0 15px;
display: none;
margin: 0 0 15px 0;
}
#notice p {
padding: 0 0 15px 0;
margin: 0;
}
.notice {
background: #CAEA99;
border: 1px solid #70A522;
margin-bottom: 15px;
font-size: 1.2em;
color: #333333;
}
.error {
background: #FEDCDA;
border: 1px solid #CE090E;
margin-bottom: 15px;
font-size: 1.2em;
color: #333333;
}
#notice a {
color: #333333;
text-decoration: underline;
}
/* CSS Document */
#ads_page_end {
background: #292929;
color: #FFFFFF;
padding: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 30px auto 0 auto;
width: 820px;
}
#ads_page_end h1 {
font-size: 1.4em;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
margin: 0;
padding: 0 0 20px 0;
}
#ads_page_end #links a {
color: #ffffff;
text-decoration: none;
}
#ads_page_end #links a:hover {
text-decoration: underline;
}
/* CSS Document */
.clearer {
clear: both;
}
/*
- CSS Document for rounded corners -
source: http://kalsey.com/2003/07/rounded_corners_in_css/
*/
.roundcont {
height: 1%;
}
.roundtop {
background: url(HomeOfProjects001-images/div_yellow_corner_tright.jpg) no-repeat top right;
}
.roundbottom {
background: url(HomeOfProjects001-images/div_yellow_corner_bright.jpg) no-repeat top right;
}
img.corner {
width: 10px;
height: 10px;
border: none;
display: block !important;
}
</style>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->
</head>
<body>
<!-- wrap start -->
<div id="wrap">
<div class="wrap_corner_right">
<!-- topcontent -->
<div id="topcontent">
<!-- header start -->
<div id="header">
<!-- topheader start -->
<div id="top_header">
<div id="logo">
<h1><a href="#"><span style="vertical-align:text-bottom">H</span>omeOfProjects001</a></h1>
<p>the place where real projects start</p>
</div>
<div id="center_header">
<div id="suggestion">
<div class="suggestion_corner_right">
Want to improve this service? <a href="#">Send us a suggestion!</a>
</div>
</div>
</div>
<div id="right_header">
<a href="register.html" class="first">Login</a> | <a href="register.html">Join</a>
</div>
<div class="clearer"></div>
</div>
<!-- topheader end -->
<!-- menu start -->
<div id="menu_container">
<div id="menu">
<ul>
<li><a href="index.html" class="first">Home</a></li>
<li><a href="maintenance.html">Projects</a></li>
<li><a href="#">Members</a></li>
<li><a href="#">My account</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="clearer"></div>
</div>
<!-- menu end -->
</div>
<!-- header end -->
<!-- body start -->
<div id="body">
<h1>Welcome to HomeOfProjects001 </h1>
<p>This is my second template that I'm sharing with everybody, I have originally
made it for my project <strong><a href="http://www.homeofprojects.com" target="_blank">Home
Of Projects</a></strong> and it is free for any use, you can even remove
the
"Template by Home Of Projects" at the end of the page, I would
really apreciate if you will visit us on the website and <a href="http://www.bbvaopentalent.com/home-of-projects/">give
us a vote</a>
in the Open Talent contest or simply join our community, we are in development
progress you can read about it below. </p>
<!-- body left start -->
<div id="body_left">
<h1> What is Home Of Projects? Simple! </h1>
<p class="ideas">
<span>IDEAS</span> - Did you ever had a great idea but you were afraid it won't
work? So you didn't even try it? Big and successfull projects start
from small and simple ideas. Here people can talk about ideas and
together put into practice!
</p>
<p class="ideas">
<span>NOT SURE WICH WAY?</span> - Are you good at something? Got skills
but don't know what to do with them? Here you can find a project
you can join. Go ahead and search!
</p>
<p class="ideas">
<span>ALREADY DECIDED?</span> - You know what your goal is but can't do
it alone? You can find here members with skills that are willing to
help, or they will find you! Just post your idea and needs!
</p>
<h1>Why post your project/idea here?</h1>
<ul class="asterix">
<li>Find out what people think about your idea</li>
<li>Test it before starting it</li>
<li>Meet people who can help you or with whom to start the project</li>
<li>You can find projects similar to yours</li>
</ul>
<h1>Why be a member?</h1>
<ul class="asterix">
<li>Find a project you are interested in</li>
<li>Help projects start and evoluate</li>
<li>A project can become a hobby or a place to work</li>
<li>Share activities and interests with the community</li>
<li>You can become part of something</li>
<li class="green">It's free!</li>
</ul>
</div>
<!-- body left end -->
<!-- body right start -->
<div id="body_right">
<!-- signup start -->
<div id="signup" class="yellow_container">
<div class="yellow roundcont">
<div class="roundtop">
<img src="images/div_yellow_corner_tleft.jpg" alt="" width="10" height="10" class="corner" style="display: none" />
</div>
<div id="project_signup">
<div class="title">Project registration</div>
<div>
Post your project idea now, see
what people think and find
members to join!
</div>
<a href="register.html" class="signup">Post your project</a>
</div>
<div id="member_signup">
<div class="title">Member registration</div>
<div>
Sign up and browse the projects
database, maybe you find something
you're interested in!
</div>
<a href="register.html" class="signup">Sign up as member</a>
</div>
<div class="clearer"></div>
<!-- bottom -->
<div class="roundbottom">
<img src="images/div_yellow_corner_bleft.jpg" alt="" width="10" height="10" class="corner" style="display: none" />
</div>
</div>
</div>
<!-- signup end -->
<h1>Vote us on BBVA Open Talent</h1>
<p>Please <a href="http://www.bbvaopentalent.com/home-of-projects/">go to the
BBVA Blog project page</a> and vote there, thank you for all your collaboration. </p>
<h1>Latest projects added</h1>
<ul class="asterix">
<li><a href="http://www.homeofproject.com">Home Of Projects</a></li>
<li><a href="http://www.crazypoems.net">CrazyPoems</a></li>
<li><a href="#">Flying car</a></li>
<li><a href="#">Web application framework</a></li>
</ul>
<h1>New members</h1>
<ul class="asterix">
<li><a href="#">nebunaaa_09</a></li>
<li><a href="#">happykid</a></li>
<li><a href="#">atrandafir</a></li>
<li><a href="#">fred_flinstone</a></li>
</ul>
</div>
<div class="clearer"></div>
</div>
<!-- body end -->
</div>
<!-- topcontent end -->
<!-- footer start -->
<div id="bottomcontent">
<div class="bottomcontent_right">
<div id="footer">
<div class="footer_corner_right">
<div class="left">
<a href="index.html">Home</a> |
<a href="maintenance.html">Projects</a> |
<a href="#">Members</a> |
<a href="#">About</a> |
<a href="#">Contact</a> |
<a href="#">Privacy Statement</a> |
<a href="#">Terms Of Use</a>
</div>
<div class="right">Template by <a href="http://www.homeofprojects.com">Home Of Projects</a>
| <a href="http://www.ehostinfo.com/">Web Hosting</a></div>
<div class="clearer"></div>
</div>
</div>
</div>
</div>
<!-- footer end -->
</div>
</div>
<!-- wrap end -->
</body>
</html>
Related examples in the same category