Register page
<!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="#" 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>Sample registration form, with a little imagination you can make other forms </h1>
<form action="#" method="post">
<p class="form_item">
Are you already a member? <a href="#">Login here</a>.
</p>
<p class="form_item">
<span class="label">CHOOSE A USERNAME</span>
<span class="desc">No spaces or special characters allowed.</span>
<input name="username" type="text" value="" />
</p>
<p class="form_item">
<span class="label">FULL NAME</span>
<input name="fullname" type="text" value="" class="wide" />
</p>
<p class="form_item">
<span class="label">EMAIL ADDRESS</span>
<span class="desc">We hate spam too, and you won't receive no extra e-mail
that you don't want to. :)</span>
<input name="email" type="text" value="" class="wide" />
</p>
<p class="form_item">
<span class="label">PICK A PASSWORD</span>
<input name="password" type="password" value="" />
</p>
<p class="form_item">
<span class="label">REPEAT YOUR PASSWORD</span>
<input name="password2" type="password" value="" />
</p>
<p class="form_item">
<span class="label">SOME WORDS ABOUT YOU </span>
<textarea name="comments" rows="5" cols="60"></textarea>
</p>
<p class="form_item">
<span class="label">AGREE TO TERMS OF USE AND PRIVACY STATEMENT</span>
<input name="agreement" type="checkbox" style="padding:0; margin:0;" value="yes" />
I agree to the Home Of Projects <a href="#">Terms of Use</a> and <a href="#">Privacy Statement</a>.
</p>
<p class="form_item">
<span class="desc">That's all!</span>
<input type="submit" value="Sign me up!" />
</p>
</form>
</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