Two column layout with red theme
<!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" xml:lang="en" lang="en">
<head>
<!--
Copyright: Denise Mitchinson 2008, http://www.mitchinson.net
License: Released Under the "Creative Commons License",
href="http://creativecommons.org/licenses/by/3.0/">
--><!-- Meta Data -->
<title>*SIMPLY RED*</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {
margin: 0;
padding: 0;
text-align: left;
font: 70% "Trebuchet MS", tahoma, verdana, arial, sans-serif;
line-height: 1.8em;
color: #333;
background: #2e2e2e;
}
#container {
width : 930px;
margin : 0 auto;
text-align : left;
}
/*main content*/
#content_left {
width: 68%;
float: left;
margin: 0;
padding: 0;
border : 5px solid #fff;
background : #eee;
color : #7e7e7e;
}
/*rightcontent*/
#content_right {
width: 29%;
float: right;
margin: 0;
padding: 0;
border : 5px solid #fff;
background : #eee;
color : #7e7e7e;
}
/*left banner*/
#head {
clear: both;
width: 100%;
height: 138px;
margin-bottom: 0;
border-bottom:20px solid #000;
text-align: left;
padding: 0;
color: #333;
background: #C10003 url(83_simply red-images/head.jpg) top center repeat-x;
}
/*right banner*/
#head2 {
clear: both;
width: 100%;
height: 138px;
margin-bottom: 0;
border-bottom:20px solid #000;
text-align: left;
padding: 0;
color: #333;
background: #C10003;
}
/*menu top right*/
ul.menu{
margin:0;
padding:0;
list-style-type:none;
display:block;
font:bold 13px Helvetica, Verdana, Arial, sans-serif;
line-height:165%;
width:269px;
}
ul.menu li{
margin:0;
padding:0;
border-bottom:1px solid #761A1A;
}
ul.menu li a{
display:block;
text-decoration:none;
color:#fff;
background:#C10003;
padding:0 0 0 20px;
width:249px;
}
ul.menu li a:hover{
background:#D14042 url("83_simply red-images/vert-one_arrow.gif") no-repeat 0 9px;
}
ul.menu li a.current,ul.menu li a.current:hover{
background:#D14042 url("83_simply red-images/vert-one_arrow.gif") no-repeat 0 9px;
}
/*footer*/
#footer {
padding : 5px;
margin-top : 50px;
border-top: 5px solid #000;
color: #333;
background : #F0F0F0;
}
/*links*/
a {
font-weight: bold;
text-decoration : none;
color : #000;
background : inherit;
}
a:visited {
text-decoration : underline;
color : #000;
background : inherit;
}
a:hover {
color : #800000;
background : inherit;
}
/*list*/
#list {
margin-left : 25px;
padding-left : 0;
}
#list li {
padding-bottom : 5px;
list-style-type : square;
}
/*typography*/
p {
margin: 1em;
}
h1 {
margin: 0;
padding: 30px;
font: bold 250% Georgia,Times, sans-serif;
line-height:1em;
letter-spacing: 3px;
color:#fff;
background:transparent;
}
h2 {
margin: 10px;
padding: 5px;
border-top: 1px solid #aaa;
border-bottom: 1px solid #aaa;
font: normal 170% verdana, Georgia, Times, sans-serif;
text-transform: uppercase;
color: #C10003;
background: transparent;
}
h3 {
margin: 0;
padding: 10px;
font: bold 130% Georgia,Times, sans-serif;
letter-spacing: 1px;
text-align: center;
text-transform: uppercase;
color: #999;
background: transparent;
}
blockquote p {
padding: 0px 15px 0px 15px;
font-size: 110%;
}
blockquote {
margin-top: 20px;
padding: 1em;
background: #F4F4F4;
color:#C10003;
}
/*images*/
.img_right {
float: right;
padding: 5px;
}
.img_left {
float: left;
padding: 15px;
}
/*login */
label {color: #333;
margin-left: 5px;
}
input {
margin: 15px 0 0 5px;
color: #000;
background : #F4F4F4;
}
#name {
width: 100px;
}
#password {
width: 100px;
}
#searchterm {
color: #000;
background : #F4F4F4;
}
#searchbutton {
color: #000;
background : #F4F4F4;
}
</style>
</head>
<body>
<div id="container">
<div id="content_left">
<div id="head">
<label>Name: </label>
<input type="text" id="name" value="" />
<label>Password: </label>
<input type="text" id="password" value="" />
<label>Login: </label>
<input id="loginbutton" class="button" type="submit" value="Login" />
<h1>SimplyRed<span style="font-size:small;">.com</span></h1>
</div>
<h2>Main Content</h2>
<blockquote><p><img class="img_left" src="83_simply red-images/image01.jpg" title="" alt="" />This template has been tested in Mozilla Firefox and IE7. The page validates as XHTML 1.0 Strict using valid CSS.</p>
<p>This template has been released under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a> which basically means you are free to modify it in any way to suit your needs but you must include the link 'Design by www.mitchinson.net' in the footer of the template.</p></blockquote>
<h3>For <a href="http://www.mitchinson.net" title="Snapp Happy">more FREE CSS templates</a> visit my website.</h3>
<p> Donec sit amet lectus nec lacus fringilla facilisis. Integer elementum arcu ac ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse potenti. Etiam in sem. Integer condimentum leo nec nibh. Quisque congue, neque id sodales venenatis, diam libero ultrices elit, ac iaculis nunc eros ac ligula. Nunc enim. Donec blandit, tortor et iaculis pretium, massa metus porta massa, sed faucibus nunc mi ut erat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur nec ante. Donec sit amet lectus nec lacus fringilla facilisis. Integer elementum arcu ac ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse potenti. Etiam in sem. Integer condimentum leo nec nibh. Quisque congue, neque id sodales venenatis, diam libero ultrices elit, ac iaculis nunc eros ac ligula. Nunc enim. Donec blandit, tortor et iaculis pretium, massa metus porta massa, sed faucibus nunc mi ut erat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur nec ante. Donec sit amet lectus nec lacus fringilla facilisis. Integer elementum arcu ac ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse potenti. Etiam in sem. Integer condimentum leo nec nibh. Quisque congue, neque id sodales venenatis, diam libero ultrices elit, ac iaculis nunc eros ac ligula. Nunc enim. Donec blandit, tortor et iaculis pretium, massa metus porta massa, sed faucibus nunc mi ut erat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur nec ante. Donec sit amet lectus nec lacus fringilla facilisis. Integer elementum arcu ac ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<div id="footer">
<a href="#">homepage</a> | <a href="mailto:denise@mitchinson.net">contact</a> | <a href="http://validator.w3.org/check?uri=referer">html</a> | <a href="http://jigsaw.w3.org/css-validator">css</a> | © 2008 Anyone | Design by <a href="http://www.mitchinson.net"> www.mitchinson.net</a><br/>This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a>
</div>
</div>
<div id="content_right">
<div id="head2"><ul class="menu">
<li><a href="#">HOME</a></li>
<li><a href="#">PRODUCTS</a></li>
<li><a href="#" class="current">SERVICES</a></li>
<li><a href="#">PRIVACY</a></li>
<li><a href="#">FAQ's</a></li>
<li><a href="#">CONTACT US</a></li>
</ul></div>
<h2>Favourites</h2>
<p><img class="img_right" src="83_simply red-images/01.png" title="favs" alt="favs" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur nec ante. Donec sit amet lectus nec lacus fringilla facilisis. Integer elementum arcu ac ante.</p>
<h2>Design Gallery</h2>
<p><img class="img_right" src="83_simply red-images/02.png" title="gallery" alt="gallery" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur nec ante. Donec sit amet lectus nec lacus fringilla facilisis. Integer elementum arcu ac ante.</p>
<h2>FAQ's</h2>
<p><img class="img_right" src="83_simply red-images/03.png" title="faq's" alt="faq's" /></p>
<ul id="list">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Nunc ullamcorper massa ac ipsum.</li>
<li>Proin pulvinar lorem ac nibh.</li>
<li>Sed a diam eget risus aliquet accumsan.</li></ul>
<h2>Contact Us</h2>
<p><img class="img_right" src="83_simply red-images/04.png" title="contact us" alt="contact us" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur nec ante. Donec sit amet lectus nec lacus fringilla facilisis. Integer elementum arcu ac ante.</p>
<h2>Search</h2>
<form id="simplesearch" method="get" action="#">
<fieldset>
<label accesskey="4" for="searchterm">
Enter search term:
</label><br />
<input id="searchterm" type="text" maxlength="255" value="Enter search term" /><br />
<input id="searchbutton" type="submit" value="Search site" />
</fieldset>
</form>
</div>
</div>
</body>
</html>
Related examples in the same category