pixabella04
<!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>Pixabella04 HTML Template</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type='text/css'>
@charset "utf-8";
* {
margin: 0;
padding: 0; }
body {
color: #555555;
font-family: 'Trebuchet MS', Arial, Verdana, Helvetica, sans-serif;
font-size: 75%;
background-color: #555; }
/******** Content variations ********/
#head {
background-color: transparent; }
#outerwrapper {
width: 960px;
background-color: #fff;
margin: 5px auto;
line-height: 1.4em;
color: #404040; }
#contentwrapper { /* S-C-S Layout */
float: left;
margin-left:5px;
width:740px; }
#contentmid { /* S-C-S Layout */
float: right;
margin-right: 10px;
width: 510px; }
#contentleft { /* C-S-S Layout */
margin-left: 5px;
float: left;
width: 510px; }
#contentright { /* S-S-C Layout */
margin-right: 5px;
float: right;
width: 510px; }
#sidebarwrapper { /* C-S-S and S-C-C Layouts*/
width:430px; }
.left { /* S-S-C Layout */
float: left;
margin-left: -5px;}
.right { /* C-S-S Layout */
float: right; }
#midsidebar { /* C-S-S Layout */
margin-left: 10px;
width: 200px;
float: left; }
#leftsidebar { /* S-C-S Layout */
margin-right: 10px;
width: 200px;
float: left; }
#rightsidebar {
float: right;
margin-right: 5px;
width: 200px; }
/***** General Styles *****/
a {
text-decoration: underline;
color: #111;
font-weight: bold; }
a:hover {
color: #95b804;
text-decoration: underline; }
a img {
border:0; }
p {
margin-bottom: 10px; }
code, pre {font-size: 1.3em;
color:#95b804; }
blockquote:before, blockquote:after {content: "\"";
font-size: 1.6em;
font-family: serif; }
blockquote {
margin: 10px 0 0 0;
padding: 5px;
background: #dfdfdf;
border: 1px solid #afafaf;
line-height: 1.6em;
font-style:italic; }
blockquote p {display: inline; }
table {
border-collapse: collapse;
margin: 10px auto 15px auto;
border: 1px solid #111; }
th {
background: #333;
height: 25px;
padding: 0 10px;
color: #ffffff;
text-align: left; }
td {
padding: 0 10px;
height: 25px; }
tr.odd {
background: #efefef; }
tr.even {
background: #cfcfcf; }
form {
background: #333;
margin: 10px auto;
padding: 5px;
border: 1px solid #111; }
label {
color: #fff;
display: block;
font-weight: bold;
margin: 5px 0 ; }
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; }
input, select, textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.0em; }
h2 {
font-size: 1.1em;
font-weight: bold;
line-height: 1.2; }
h2.entrytitle {
background: transparent url(pixabella04-img/entrydeco.png) left center no-repeat;
padding-left:30px;
height: 30px;
line-height: 2.2em;
margin-bottom: 10px; }
h3 {
font-size: 1.1em;
display: block;
margin: 10px 0; }
h4 {
margin-bottom: 15px;
font-size: 10pt;
font-weight: bold; }
ul, ol {
list-style-position: inside; }
/*img {
border: 1px solid #f1f1f1;
background-color: #f5f5f5;
margin: 3px;
padding: 3px;
text-align: center; } */
img.float-right {
margin: 5px 0px 5px 15px;
float:right; }
img.float-left {
margin: 5px 10px 5px 0px;
float:left; }
/***** Identity ******/
#identity {
background: transparent url(pixabella04-img/banner_deco.png) 20px 10px no-repeat;
margin: 5px 0 0 20px;
height: 55px;
width: 410px;
border: 0px;
float: left; }
#identity h1 {
font-size: 1.2em;
padding: 15px 0 0 75px; }
#identity h1 a, #identity h1 a:hover {
color: #fff;
text-decoration: none; }
#identity p.head2 {
color: #a8d200;
font-size: 0.9em;
padding-left: 75px;
font-weight: normal;
line-height: 1.7; }
/****** Banner ******/
#banner {
height: 93px;
width: 960px;
background: #555 url(pixabella04-img/ban.png) no-repeat; }
/****** Navigation ******/
#navigation {
width: 960px;
background: #ddd url(pixabella04-img/nav.png) top center repeat-x;
height: 23px;
margin-bottom: 20px;}
#navbar_link {
height: 23px;
float: left; }
#navigation #navbar_link ul {
float: left;
height:23px;
width: 100%;
list-style-type: none; }
#navigation #navbar_link ul li {
display: inline; }
#navigation #navbar_link ul li a {
padding: 3px 15px;
color: #fff;
text-decoration: none;
line-height: 1.5em;
float: left;
text-decoration: none;
font-size: 0.95em;
font-weight: bold; }
#navigation #navbar_link ul li a.currentpage {
color: #95b804; }
#navigation #navbar_link a:hover, #navigation #navbar_link ul li a.currentpage:hover {
text-decoration: none;
color: #222;
background: #ddd url(pixabella04-img/nav.png) center -26px repeat-x; }
/****** Blog EntryFooter ******/
.entryfooter {clear: left;
position: relative;
margin: 10px 0 40px 0;
padding: 3px;
border-top: 1px solid #f3f4f4;
border-bottom: 1px solid #f3f4f4;
font-size: 0.95em;
background-color: #fafafa; }
.postedby, .date, .comments, .trackbacks {
padding-left: 17px;
padding-right: 5px;
height: 25px; }
.postedby {
padding-left: 14px;
background: url(pixabella04-img/author.gif) no-repeat top left; }
.date {
padding-left: 15px;
background: url(pixabella04-img/post.gif) no-repeat top left; }
.comments {
background: url(pixabella04-img/comments.gif) no-repeat top left; }
.trackbacks {
padding-left: 20px;
background: url(pixabella04-img/trackbacks.gif) no-repeat top left; }
.entryfooter a, .entrytitle a {
text-decoration: none; }
/****** Sidebar Items ******/
.sponsors { /* C-S-S and S-C-C Layouts*/
text-align: center;
float: right;
background-color: #333;
margin: 0 5px 15px 0;
padding: 10px 0;
width : 415px;
border-top: #a8d200 5px solid;
overflow: hidden; }
.sponsors img.withmargin { /* C-S-S and S-C-C Layouts*/
margin-right: 8px;
overflow: hidden }
.SidebarItem {
margin: 0 0 10px 0;
padding: 0 0 10px 0; }
.SidebarItem h2 {
background: transparent url(pixabella04-img/sidebartop.png) no-repeat;
color: #fff;
height: 25px;
padding: 5px 0 0 5px; }
.SidebarBody {
background-color: #333;
color: #ccc;
padding: 5px;}
.SidebarBody a {
color: #a8d200;
text-decoration: none; }
.SidebarBody a:hover {
text-decoration: underline; }
.SidebarItem ul, #SidebarItem ol {
list-style: none; }
.SidebarItem li {
line-height: 1.2; }
/******** Footer ********/
#footer {
clear: both;
background: transparent url(pixabella04-img/footer.png) top center repeat-x;
width: 960px;
color: #fff;
height: 38px;
font-size: 0.8em;
line-height: 1.2em;
font-weight: bold;
margin: 0px auto; }
#footer p {
font-weight: bold;
border-top: 1px solid #aaa;
padding: 15px 0 5px 5px; }
#footer p span {
padding-right: 5px; }
#footer a {
color: #fff;
text-decoration: underline; }
#footer a:hover {
color: #95b804; }
</style>
<!--[if lte IE 6]>
<style type="text/css">@import "ie6.css";</style>
<![endif]-->
<!-- Design by Pixabella - http://www.pixabella.com -->
</head>
<body>
<div id="outerwrapper">
<div id="head">
<div id="banner">
<div id="identity">
<h1><a href='#'>Page Title</a></h1>
<p class='head2'><strong>Page Description, something meaningful upto a dozen words</strong></p>
</div><!-- end of identity -->
</div><!-- end of logo -->
<div id="navigation">
<div id="navbar_link">
<ul>
<li><a href="index.html" class="currentpage">C-S-S Layout</a></li>
<li><a href="index2.html">S-C-S Layout</a></li>
<li><a href="index3.html">S-S-C Layout</a></li>
<li><a href="index4.html">Sample Blog</a></li>
</ul>
</div><!-- end of navbar_link -->
</div><!-- end of navigation -->
</div><!-- end of head -->
<div id="contentleft">
<h2 class="entrytitle">Page Title</h2>
<p><img src="pixabella04-img/testimg1.png" width="180" height="164" alt="Test Image" class="float-right" />Thanks for downloading pixabella04, my first tech inspired template. This 3 column, content first template is valid XHTML transitional, and includes two page layouts, a sidebar-content-sidebar and content-sidebar-sidebar. This text is <b>bold</b>, this is <u>underlined</u>, and this is <i>italic</i>. <a href="#">Links</a> are grey, but change to green on hover in the main content pane, but are green only in the sidebars.</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>
<h3>License</h3>
<p>Pixabella04 is licensed under the <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5</a>. Please read and agree to the terms contained within this attribution so you understand the usage agreements.</p>
<blockquote>If you decide to use this template, I ask that you leave the "Design by <a href="http://www.pixabella.com">Pixabella</a>" link in the footer. This recognition from users of my <a href="http://www.pixabella.com/categories/2-Free-Templates">free HTML templates</a> is all the encouragement I need to keep designing and updating my free HTML Templates</blockquote>
<h3>An Image With Text</h3>
<p><img src="pixabella04-img/testimg2.png" width="100" height="88" alt="Pink Azalea" class="float-right" />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>
<h3>A Table with Data</h3>
<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="#">Accounts Department</a></td>
</tr>
<tr class="even">
<td class="first">Susan Jenkins</td>
<td>012-2345 6789</td>
<td><a href="#">Marketing Whizzkids</a></td>
</tr>
<tr class="odd">
<td class="first">Todd Rhodes</td>
<td>012-3456 7891</td>
<td><a href="#">Manufacturing</a></td>
</tr>
<tr class="even">
<td class="first">Wendy Kline</td>
<td>012-4567 8912</td>
<td><a href="#">Customer Care</a></td>
</tr>
</table>
<h3>Code</h3>
<p><code>
code, pre { <br />
display: block; { <br />
font-size:10pt; <br />
margin:0 0 0 20px; <br />
}
</code></p>
<h3>Ordered and Unordered Lists</h3>
<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>
<h3>Final Paragraph</h3>
<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>
<h3>Example Form</h3>
<form action="#">
<p>
<label>Name</label>
<input name="dname" value=" " type="text" size="30" alt="Name" />
<label>Email</label>
<input name="demail" value=" " type="text" size="30" alt="Email" />
<label>Your Comments</label>
<textarea rows="5" cols="5"></textarea>
<br />
<input class="button" type="submit" value="Send" />
</p>
</form>
</div><!-- end of content -->
<div id="sidebarwrapper" class="right">
<div class="sponsors">
<a href="#" title="sponsor1"><img class="withmargin" src="pixabella04-img/125x125.png" height="125px" width="125px" alt="" /></a>
<a href="#" title="sponsor2"><img class="withmargin" src="pixabella04-img/125x125.png" height="125px" width="125px" alt="" /></a>
<a href="#" title="sponsor3"><img src="pixabella04-img/125x125.png" height="125px" width="125px" alt="" /></a>
</div>
<div id="midsidebar">
<div class="SidebarItem">
<h2>About Us</h2>
<div class="SidebarBody">
<p><img src="pixabella04-img/person.png" width="30" height="40" alt=" " class="float-left" />Every website needs an about us page, and the sidebar is the perfect place to give a quick overview.</p><p>Of course, you could just keep going, maybe provide your entire about us page right here, but will they read it? </p><p>By using the sidebar to give some details about your company, you are providing context on every page for customers who may begin their visit on another page. </p><p>Once you've got their attention, simply get them to click the link to your main about us page. <a href="#">Read more about us.</a></p>
</div>
</div>
</div><!-- end of sidebar -->
<div id="rightsidebar">
<div class="SidebarItem">
<h2>Layout Types</h2>
<div class="SidebarBody">
<ul>
<li><a href="index.html">C-S-S Layout</a></li>
<li><a href="index2.html">S-C-S Layout</a></li>
<li><a href="index3.html">S-S-C Layout</a></li>
<li><a href="index4.html">Sample Blog</a></li>
</ul>
</div>
</div>
<div class="SidebarItem">
<h2>Browser Compatibility</h2>
<div class="SidebarBody">
<p>Pixabella04 was designed to work in IE7, Firefox, Opera and Safari.</p><p>Users of IE6 are supported by the inclusion of Angus Turnbull's excellent <a href="http://www.twinhelix.com/css/iepngfix/">IE PNG fix</a>. </p>
<!--[if lt IE 7]><p>WARNING: You are using a version of Internet Explorer that is no longer current and doesn't adequately support PNG's. Please consider upgrading to IE7 or another Browser such as <a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></p><![endif]-->
</div>
</div>
<div class="SidebarItem">
<h2>Testimonials</h2>
<div class="SidebarBody">
<p>I can't thank you enough for this great template, <i>A. Customer, Smallville, USA.</i></p>
<p>Why pay for webdesign services when I can get fantastic free templates right here, Thank you. <i>Corporate Dude, NY</i></p>
<p>This is really great, but where do I get cheap flights to Hawaii? <i>Village Idiot, Back of Beyond.</i></p>
</div>
</div>
</div><!-- end of rightsidebar -->
</div><!-- end innerwrapper -->
<div id="footer">
<p><span style="float: left;">© 2007 Company Name</span><span style="float: right;">Design by <a href="http://www.pixabella.com" title="Free HTML Templates">Pixabella</a>. Valid <a href="http://validator.w3.org/check?uri=referer" title="Validate">XHTML</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Validate">CSS</a></span>
</p>
</div><!-- end of footer -->
</div><!-- end of outerwrapper -->
</body>
</html>
Related examples in the same category