pixabella
<!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" xml:lang="en" lang="en">
<head>
<title>Pixabella01 Two Column HTML</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type='text/css'>
/***********************************/
/* HTML Template by Pixabella */
/* http://www.pixabella.com */
/***********************************/
/****** Structural Styles ******/
body {background-color: #ffffff;
font: 10pt Arial, Helvetica, sans-serif;
color: #464646;
margin: 0;
padding: 0;
}
#navigation {width: 935px;
background: url(pixabella-img/header.jpg) 0 -10px;
background-repeat: no-repeat;
height: 206px;
top: 0px;
margin: 0px auto 0px auto;
padding: 0;
position: relative;
}
#wrapper {width:935px;
margin: 0px auto 0 auto;
background-image: url(pixabella-img/wrapperbg.jpg);
background-repeat: repeat-y;
}
#mainpane {width:869px;
margin:0 auto;
height:100%;
}
/****** General Styles ******/
blockquote {margin: 15px 30px 15px 15px;
padding-left: 15px;
border-left: 3px solid;
font-style: oblique;
}
code, pre {display: block;
font-size: 10pt;
margin: 0 0 0 20px;
}
input, textarea {font: 9pt Tahoma, Arial, Helvetica, sans-serif;
padding: 3px;
color: #717171;
}
h1, h2 {margin: 0;
padding: 0;
border: 0;
}
h3 {font-size: 13pt;
font-weight: bold;
margin: 10px 0;
padding:0;
}
h4 {font-size: 10.5pt;
font-weight: bold;
margin: 0;
padding: 0;
}
h3 a:link, h3 a:visited, h3 a:active {color:#444444;
text-decoration: none;
border-bottom: solid 1px #efefef;
}
.breakline {clear: both;
margin: 0;
padding: 0;
height: 1px;
}
img {border: 1px solid #f1f1f1;
background-color: #f5f5f5;
margin: 5px;
padding: 5px;
text-align: center;
}
img.float-right {margin: 5px 0px 5px 15px;
float:right;
}
img.float-left {margin: 0 10px 5px 0px;
float:left;
}
table {border-collapse: collapse;
margin: 10px auto 15px auto;
}
th {background: #b8a755;
height: 25px; padding: 0 10px;
color: #ffffff;
text-align: left;
border-left: 1px solid #efefef;
border-bottom: solid 2px #ffffff;
}
td {padding: 0 10px;
height: 25px;
}
tr.odd {background: #f8f8f8;
}
tr.even {background: #efefef;
}
form {margin: 10px auto;
padding: 5px;
border: 1px solid #f2f2f2;
background-color: #fafafa;
}
label {display: block;
font-weight: bold;
margin: 5px;
}
input {padding: 2px;
border: 1px solid #eee;
}
textarea {width: 400px;
padding: 2px;
border: 1px solid #eee;
height: 100px;
display: block;
}
input.button {margin: 0;
padding: 2px 3px;
border: 1px solid #f2f2f2;
}
/****** Top Navigation Styles ******/
#themenu {width: 800px;
position: absolute;
z-index: 8;
top: 20px;
left: 112px;
}
#themenu ul {list-style-type: none;
margin: 0;
padding: 0;
text-align: right;
}
#themenu li {display: inline;
text-align: right;
margin-left: 10px;
}
#themenu li a {color: #444444;
text-decoration: none;
font-size: 9pt;
font-weight: bold;
}
#themenu li a:hover {color:#111111;
border-bottom: solid 1px #111;
}
#identity {position: absolute;
float: left;
margin: 55px 0px 0px 45px;
padding: 10px 0px 5px 0px;
}
#identity h1 a {color: #f9f7e8;
font-size: 11pt;
font-weight: bolder;
text-decoration: none;
margin: 0;
padding: 0;
line-height: 11pt;
}
#identity h2 {color: #f9f7e8;
font-size: 8pt;
font-weight: bolder;
text-decoration: none;
margin: 0;
padding: 0;
line-height:12pt;
}
#about-snippet {position: absolute;
right: 40px;
margin: 105px 20px 0px 0px;
padding: 20px 0px 5px 0px;
float: right;
width: 170px;
}
#about-snippet p {font-size: 8pt;
font-weight: bolder;
color: #e4e795;
padding: 0;
margin: 0;
}
#about-snippet a {font-weight: bolder;
color: #eaed9d;
padding: 0;
margin: 0;
}
/****** Content Styles ******/
#content {width: 570px;
margin: 10px 5px 0 10px;
float:left;
}
#content a, #content h3, #content h4 {color: #8d922b;
text-decoration:none;
}
#content h3 {border-bottom: solid 1px #efefef;
}
#content a:link, #content a:visited, #content a:active {
text-decoration: none;
}
#content a:hover {color:#444444;
}
h3 span.postdate {color:#999999;
font-weight:normal;
}
.EntryFooter {clear: left;
position: relative;
margin: 10px 0 40px 0;
padding: 3px;
border-top: 1px solid #f3f4f4;
border-bottom: 1px solid #f3f4f4;
font-size: 9pt;
background-color: #fafafa;
}
.postedby, .date, .comments, .trackbacks {padding-left: 17px;
padding-right: 5px;
height: 25px;
}
.postedby {padding-left: 14px;
background: url(pixabella-img/author.gif) no-repeat top left;
}
.date {padding-left: 15px;
background: url(pixabella-img/post.gif) no-repeat top left;
}
.comments {background: url(pixabella-img/comments.gif) no-repeat top left;
}
.trackbacks {padding-left: 20px;
background: url(pixabella-img/trackbacks.gif) no-repeat top left;
}
/********* Sidebar Styles *********/
#sidebar {width: 210px;
float: right;
margin: 0px -1px 10px 15px;
padding:5px 15px 15px 15px;
}
#sidebar p {line-height: 15px;
margin: 0 0 5px;
padding: 0;
}
#sidebar a {color: #8d922b;
text-decoration:none;
}
#sidebar a:hover {color: #444444;
}
#SideBarFeature {background: #ffffff url(pixabella-img/feature.gif) repeat-x;
border-bottom: #aca06a solid 1px;
}
#sidebar p {padding: 0 5px;
}
#sidebar h3 {padding: 5px 5px;
}
#sidebar ul {margin-left: 10px;
padding-left: 0;
list-style: none;
}
#sidebar li {padding-left: 10px;
background-image: url(pixabella-img/arrow.gif);
background-repeat: no-repeat;
background-position: 0 6px;
line-height:18px;
}
/****** Footer Styles ******/
#footer {clear: both;
background-image: url(pixabella-img/footer.jpg);
background-repeat: no-repeat;
margin: 0 auto;
border: 0;
padding: 0;
width: 935px;
color: #f9f7e8;
height: 89px;
font-size: 9pt;
}
#footer p {margin: 0;
padding: 35px 40px 0 40px;
}
#footer a {color: #f9f7e8;
font-weight: bold;
text-decoration:none;
}
#footer a:hover {color: #f9f7e8;
font-weight: bold;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="navigation">
<div id="themenu">
<ul>
<li><a href="http://www.free-css.com/">Two Column HTML</a></li>
<li><a href="index2.php">Two Column Blog</a></li>
<li><a href="http://www.free-css.com/">Another Link</a></li>
<li><a href="http://www.free-css.com/">Another Link</a></li>
</ul>
</div>
<div id="identity"><a id="topofpage"></a>
<h1><a href="http://www.free-css.com/">My Website</a></h1>
<h2>Site Description</h2>
</div>
<div id="about-snippet">
<p>Welcome to my site, please bookmark this page. Read all about me. <a href="http://www.free-css.com/"> More »</a></p>
</div>
</div>
<div id="wrapper">
<div id="mainpane">
<div id="content">
<h3>Page Title</h3>
<p>Thanks for downloading pixabella01, the first in a series of free open source templates designed by Pixabella. The image in the header is a photograph of an Agapanthus stem taken in my own front garden. This template is valid XHTML transitional, and includes two page types, a regular html page, and a blog template page. This text is <b>bold</b>, this is <u>underlined</u>, and this is <i>italic</i>.</p>
<p>This page shows examples of a blockquote, placing an image into your page, using a table, a sample contact form, showing code excerpts, and order and unordered lists. Hope you like it.</p>
<h4>Blockquote</h4>
<blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras bibendum tristique odio. Aenean interdum sem nec elit scelerisque vehicula. Suspendisse vestibulum. In eu lectus. Aliquam sit amet nulla. Donec purus. Nullam commodo porttitor massa. Etiam lobortis tellus in est. Ut pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas ac nibh nec quam porttitor sagittis.</blockquote>
<h4>An Image With Text</h4>
<p><img src="pixabella-img/pink_azalea_small.jpg" width="100" height="88" alt="" class="float-left" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras bibendum tristique odio. Aenean interdum sem nec elit scelerisque vehicula. Suspendisse vestibulum. In eu lectus. Aliquam sit amet nulla. Donec purus. Nullam commodo porttitor massa. Etiam lobortis tellus in est. Ut pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas ac nibh nec quam porttitor sagittis. </p>
<p>Etiam iaculis lectus ut nibh. Etiam interdum nulla ut lectus. Nulla vulputate, arcu eu pulvinar molestie, purus diam sagittis ligula, ac facilisis lacus sapien auctor urna. Etiam leo. Nam eget purus at odio iaculis vehicula. Nam pede orci, varius sit amet, mattis at, scelerisque sed, diam. Ut sagittis ipsum at lorem. Praesent non nibh. Cras vulputate. Cras in lacus ac libero tincidunt aliquam. Morbi placerat tristique lacus. Phasellus enim. Nullam malesuada molestie lectus. Vivamus sit amet arcu. Duis convallis justo ut velit.</p>
<h4>A Table with Data</h4>
<table>
<tr>
<th class="first">Username</th>
<th>Phone</th>
<th>Dept Homepage</th>
</tr>
<tr class="odd">
<td class="first">Harry Smith</td>
<td>012-1234 5678</td>
<td><a href="http://www.free-css.com/">Accounts Department</a></td>
</tr>
<tr class="even">
<td class="first">Susan Jenkins</td>
<td>012-2345 6789</td>
<td><a href="http://www.free-css.com/">Marketing Whizzkids</a></td>
</tr>
<tr class="odd">
<td class="first">Todd Rhodes</td>
<td>012-3456 7891</td>
<td><a href="http://www.free-css.com/">Manufacturing</a></td>
</tr>
<tr class="even">
<td class="first">Wendy Kline</td>
<td>012-4567 8912</td>
<td><a href="http://www.free-css.com/">Customer Care</a></td>
</tr>
</table>
<h4>Example Form</h4>
<form action="http://www.free-css.com/">
<p>
<label>Name</label>
<input name="dname" value=" " type="text" size="30" />
<label>Email</label>
<input name="demail" value=" " type="text" size="30" />
<label>Your Comments</label>
<textarea rows="5" cols="5"></textarea>
<br />
<input class="button" type="submit" />
</p>
</form>
<h4>Code</h4>
<p><code> code, pre { <br />
display: block; { <br />
font-size:10pt; <br />
margin:0 0 0 20px; <br />
} </code></p>
<h4>Ordered and Unordered Lists</h4>
<b>Ordered List</b>
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
<b>Unordered List</b>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</div>
<div id="sidebar">
<div id="SideBarFeature">
<h3>Sidebar Feature</h3>
<p>Sed etiam et lorem ipsum nulla vero et lobortis felis sed etiam. Lorem ipsum sit amet dolore. Nulla facilisi. Sed tortor. Aenean felis. Quisque eros etiam sed commodo.</p>
<p>Nullam malesuada molestie lectus. Vivamus sit amet arcu. Duis convallis justo ut velit.</p>
</div>
<div id="SideBarLinks">
<h3>Sidebar Links</h3>
<ul>
<li><a href="">Two Column HTML</a></li>
<li><a href="index2.php">Two Column Blog</a></li>
<li><a href="http://www.free-css.com/">Another Link</a></li>
<li><a href="http://www.free-css.com/">Another Link</a></li>
</ul>
</div>
</div>
</div>
<br class="breakline" />
</div>
<div id="footer">
<p><span style="float: left;">© 2006 Your Name.</span> <span style="float: right;">Design by <a href="http://www.pixabella.com/authors/4-ceejay">Pixabella</a> - <a target="_blank" href="http://validator.w3.org/check?uri=referer" title="Validate">XHTML</a> - <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer" title="Validate">CSS</a></span></p>
</div>
</body>
</html>
Related examples in the same category