Two column layout, 1024 pixel width
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Your description goes here..." />
<meta name="keywords" content="your,keywords,goes,here" />
<meta name="author" content="Your Name / Design by Andreas Viklund - http://andreasviklund.com/" />
<style type="text/css">
/* 1024px - An open source xhtml/css website template by Andreas Viklund - http://andreasviklund.com . Free to use in any way and for any purpose as long as the proper credits are given to the original designer.
Version: 1.0, March 29, 2006 */
/******** General tags ********/
body {
font: 76% Verdana, Tahoma, Arial, sans-serif;
background: #ffffff url(1024px-images/background.gif) top center repeat-y;
color: #404040;
line-height: 1.2em;
margin: 0 auto;
padding: 0;
}
a {
text-decoration: none;
color: #4088b8;
font-weight: bold;
}
a:hover {
text-decoration: underline;
}
a img {
border: 0;
}
p {
margin: 0 0 18px 10px;
}
ul,ol,dl {
font-size: 0.9em;
margin: 2px 0 16px 35px;
}
ul ul,ol ol {
margin: 4px 0 4px 35px;
}
h1 {
font-size: 4.2em;
letter-spacing: -8px;
margin: 0 0 30px 25px;
color: #4088b8;
}
h1 a {
text-transform: none;
color: #4088b8;
}
h2 {
font-size: 1.4em;
color: #4088b8;
border-bottom: 4px solid #dadada;
padding: 0 2px 2px 5px;
margin: 0 0 10px 0;
letter-spacing: -1px;
}
h3 {
font-size: 1.2em;
font-weight: bold;
color: #4088b8;
border-bottom: 1px solid #dadada;
margin: 10px 0 8px 0;
padding: 1px 2px 2px 3px;
}
blockquote {
font-size: 0.9em;
border: 1px solid #dadada;
margin: 20px 10px;
padding: 8px;
}
/******** Main wrap ********/
#wrap {
color: #404040;
width: 970px;
margin: 10px auto;
padding: 0;
}
#header {
margin: 0;
}
#toplinks {
text-align: right;
padding: 5px 2px 2px 3px;
}
#slogan {
font-size: 1.5em;
color: #808080;
font-weight: bold;
letter-spacing: -1px;
margin: 15px 0px 20px 35px;
line-height: 1.2em;
}
/******** sidebar ********/
#sidebar {
float: left;
width: 195px;
margin: 0 0 5px 0;
padding: 1px 0 0 0;
}
#sidebar ul {
list-style: none;
font-size: 0.9em;
margin: 0;
padding: 0 0 15px 10px;
}
#sidebar li {
list-style: none;
margin: 0 0 4px 0;
padding: 0;
}
#sidebar li a {
font-size: 1.2em;
font-weight: bold;
padding: 2px;
}
#sidebar ul ul {
margin: 4px 0 3px 15px;
line-height: 1.2em;
padding: 0;
}
#sidebar ul ul li a {
font-weight: normal;
}
#sidebar h2 {
margin: 3px 0px 8px 0px;
}
/******** Content variations ********/
#content {
line-height: 1.5em;
width: 750px;
float: right;
text-align: left;
margin: 0;
padding: 0;
}
#contentalt {
line-height: 1.5em;
width: 750px;
float: left;
text-align: left;
padding: 0;
margin-right: 20px;
}
#content h3,#contentalt h3 {
margin: 10px 0 8px;
}
/******** Footer ********/
#footer {
clear: both;
text-align: right;
color: #808080;
font-size: 0.9em;
border-top: 4px solid #dadada;
margin: 0 auto;
padding: 8px 0;
line-height: 1.6em;
}
#footer p {
margin: 0;
padding: 0;
}
#footer a {
color: #808080;
}
/******** Various classes ********/
.box {
color: #ffffff;
font-size: 0.9em;
background-color: #4088b8;
border: 1px solid #c8c8c8;
line-height: 1.3em;
padding: 5px 5px 5px 8px;
}
.box a {
color: #f0f0f0;
}
.left {
float: left;
margin: 0 15px 4px 0;
}
.right {
float: right;
margin: 0 0 4px 15px;
}
.textright {
text-align: right;
}
.readmore {
text-align: right;
margin: -10px 10px 12px 0;
}
.center {
text-align: center;
}
.blue {
color: #4088b8;
}
.big {
font-size: 1.3em;
}
.small {
font-size: 0.8em;
}
.bold {
font-weight: bold;
}
.clear {
clear: both;
}
.hide {
display: none;
}
.fade {
color: #c8c8c8;
}
.gray {
color: #808080;
}
.photo {
border: 1px solid #bababa;
padding: 2px;
background-color: #ffffff;
margin: 6px 18px 2px 5px;
}
</style>
<title>1024px by Andreas Viklund</title>
</head>
<body>
<div id="wrap">
<div id="header">
<p id="toplinks">Skip to: <a href="#content">Content</a> | <a href="#sidebar">Navigation</a> | <a href="#footer">Footer</a></p>
<h1><a href="index.html">1024<span class="fade">px</span></a></h1>
<p id="slogan">when 800px just isn't enough...</p>
</div>
<div id="contentalt">
<h2>As simple as it gets...</h2>
<p><img src="images/example.jpg" width="280" height="144" alt="Example frontpage image" class="left photo" />Welcome to <strong><span class="blue">1024</span><span class="gray">px</span></strong>, a free website template by <a href="http://andreasviklund.com/">Andreas Viklund</a>. This is a regular XHTML/CSS template which you can use to build your own website. This template is released as open source web design, which means that you are free to use it for any purpose and in any way you may want to without any obligations or limitations. I kindly ask that you leave the credit text and link (the one that says "Design by Andreas Viklund" in the footer) since that would be a nice way of supporting my work. But the decision is yours, and that freedom is the beauty with open source design...</p>
<h2>Blog/CMS theme versions</h2>
<p>Are you looking for a WordPress theme version of this template? Or maybe a version that is ported for Textpattern, Etomite, MODx, Blogger or some other <a href="http://solucija.com/">great content management system</a> or blog engine? Then check out my <a href="http://andreasviklund.com/templates/themes">ports and themes page</a> to see if there are any version available that you can use. If you make a port yourself, please let me know so I can your version to the list.</p>
<p class="readmore"><a href="styles.html">Example "Read more" link</a> »</p>
<p class="box"><strong>Note:</strong> This template is not intended to be advanced or cool in any way. It was based on feedback and requests that I have got from people who use my other templates. I was asked to make a really simple design that was wider than my regular 800px templates, and so I did. Accessibility, good code quality, search engine friendliness and low file size are important features too.</p>
</div>
<div id="sidebar">
<h2>Welcome!</h2>
<p>Write a short presentation of yourself or the site right here. This template comes in two variations. <a href="index.html">Switch to layout #1</a>!</p>
<h2>Pages:</h2>
<ul>
<li><a href="#">Front page</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Downloads</a>
<ul>
<li><a href="#">Music</a></li>
<li><a href="#">Pictures</a></li>
</ul></li>
<li><a href="#">Link archive</a></li>
<li><a class="hide" href="#header">Back to top</a></li>
</ul>
<h2>Site news:</h2>
<p><strong>March 29, 2006</strong><br />
New template designed: 1024px v1.0!</p>
<h2>Links:</h2>
<ul class="links">
<li><a href="http://andreasviklund.com/templates/">Free templates</a></li>
<li><a href="http://andreasviklund.com/wordpress-themes/">WordPress themes</a></li>
<li><a href="http://jokkmokk.biz/">Made in Jokkmokk</a></li>
<li><a href="http://openwebdesign.org">Open Webdesign</a></li>
<li><a href="http://oswd.org">OSWD.org</a></li>
</ul>
</div>
<div id="footer">
<p><a href="#">Contact us</a> | <a href="#">Privacy policy</a> | <a href="#">Sitemap</a> | <a href="#">RSS</a> | <a href="#header">Back to top</a><br />
© 2006 Your Name | Design by <a href="http://andreasviklund.com/">Andreas Viklund</a>,
<a href="http://www.ehostinfo.com/">Web Hosting</a>
</p>
</div>
</div>
</body>
</html>
Related examples in the same category