redalert
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Red Alert</title>
<style type='text/css'>
* {
padding: 0;
margin: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
color: #666666;
background-color: #FFFFFF;
font-size: 12px;
background-image: url(redalert-images/top-shade.jpg);
background-repeat: repeat-x;
}
.wrapper {
width: 758px;
margin: 0 auto;
}
.header {
margin: 0px 0px 0px 0px;
}
#leftcolumn { /* Parent Wrapper for inside boxes */
margin: 0px 18px 0px 0px;
padding: 4px;
display: inline; /* IE Hack */
width: 450px;
float: left;
}
#rightcolumn { /* Parent Wrapper for inside boxes */
margin: 0px 0px 0px 0px;
padding: 4px;
display: inline; /* IE Hack */
width: 270px;
float: left;
}
#leftcolumn h1 {
font-size: 26px;
color: #CA2B13;
}
.right-box {
background: url(redalert-images/right-box.jpg) no-repeat;
padding: 16px;
font-size: 16px;
min-height: 250px;
}
* html .right-box { height: 250px; }
.right-bottom {
padding: 16px;
font-size: 16px;
}
#rightcolumn h1 {
font-size: 26px;
color: #6C92FF;
}
.right-box img {
display: block;
}
#footer {
color: #666;
width: 100%;
background: #CA2B13;
/* clear: both;*/
float: left;
min-height: 100px;
}
* html #footer { height: 100px;}
#footer-content {
width: 750px;
margin: 0 auto;
padding-top: 20px;
clear: both;
color: #fff;
}
#footer-content a:link, #footer-content a:visited, #footer-content a:hover {
color: #fff;
text-decoration: none;
}
.forms-text {
width: 100px;
text-align: right;
float: left;
line-height: 27px;
margin-left: 10px;
}
.forms-text p {
margin-bottom: 4px;
}
.forms-input { /* Parent Wrapper */
text-align: right;
float: right;
}
.forms-input input{
margin-bottom: 5px;
border: 1px solid #ccc;
width: 300px;
font-size: 20px;
}
.submit {
color: #CA2B13;
background: #ccc;
}
</style>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style type="text/css">
img{border:none;}
</style>
</head>
<body>
<!-- Start Wrapper -->
<div class="wrapper">
<!-- Start header -->
<div class="header"> <a href="http://www.free-css.com/"><img src="redalert-images/header.jpg" alt="" /></a> </div>
<!-- End header -->
<!-- Begin Main Content Area -->
<div id="main-content">
<!-- Begin Left Column-->
<div id="leftcolumn">
<h1>Making Websites Work</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum. </p>
<br />
<h1>Making Websites Work</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum. </p>
<br />
<form action="#">
<div class="forms-text">
<p>Name:</p>
<p>E-Mail:</p>
<p>Username:</p>
<p>Password:</p>
<p>Retype Password:</p>
</div>
<div class="forms-input">
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="submit" class="submit" />
</div>
</form>
</div>
<!-- End Left Column-->
<!-- Begin Right Column-->
<div id="rightcolumn">
<div class="right-box">
<h1>Making Websites</h1>
<p><br />
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntu. </p>
</div>
<br />
<div class="right-bottom">
<h1>CSS Layouts </h1>
<p><br />
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi. <br />
</p>
</div>
</div>
<!-- End Right Column-->
</div>
<!-- End Main Content Area -->
</div>
<!-- End Wrapper -->
<div id="footer">
<div id="footer-content"> © Copyright with <a href="http://www.code-sucks.com">Code-Sucks.com</a> 2006
| <a href="http://validator.w3.org/check?uri=referer">Valid xhtml strict</a>
| <a href="http://jigsaw.w3.org/css-validator/">Valid css</a> </div>
</div>
</body>
</html>
Related examples in the same category