Template to illustrate all
<!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>
<meta name="Description" content="Information architecture, Web Design, Web Standards." />
<meta name="Keywords" content="your, keywords" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Distribution" content="Global" />
<meta name="Author" content="Erwin Aligam - ealigam@gmail.com" />
<meta name="Robots" content="index,follow" />
<style type='text/css'>
/* -------------------------------------------------
AUTHOR : Erwin Aligam
WEBSITE : http://www.styleshout.com/
TEMPLATE NAME : BluePigment
TEMPLATE CODE : S-0016
VERSION : 1.1
DATE : January 18, 2010
---------------------------------------------------- */
/* -------------------------------------------------
HTML ELEMENTS
---------------------------------------------------- */
/* top elements */
* { padding: 0; margin: 0; outline: 0 }
body {
margin: 0; padding: 0;
font: normal 12px/1.7em verdana, tahoma, sans-serif;
text-align: center;
background: #001342 url(BluePigment-images/headerbg.jpg) repeat-x 0 0;
color: #F2F9FF;
}
/* links */
a {
color: #003366;
background-color: inherit;
text-decoration: none;
}
a:hover {
color: #FAA34B;
background-color: inherit;
text-decoration: underline;
border: none;
}
/* headers */
h1, h2, h3 {
font: bold 1em 'Trebuchet MS', Tahoma, Arial, Sans-serif;
color: #fff;
}
h1 { font-size: 2.5em; }
h2 { font-size: 2em; text-transform:uppercase;}
h3 { font-size: 1.8em; }
p, h1, h2, h3 {
margin: 0;
padding: 10px 15px;
}
ul, ol {
margin: 10px 30px;
padding: 0 15px;
}
/* images */
img {
background: #FAFAFA;
border: 1px solid #0F7ACC;
padding: 6px;
}
img.float-right {
margin: .5em 0 1em 1em;
}
img.float-left {
margin: .5em 1em 1em 0;
}
code {
margin: .5em 0;
display: block;
padding: 20px;
text-align: left;
overflow: auto;
font: 500 1em/1.5em 'Lucida Console', 'Courier New', monospace ;
/* white-space: pre; */
background: #1E89DC;
border: 1px solid #0065C6;
}
acronym {
cursor: help;
border-bottom: 1px solid #0065C6;
}
blockquote {
margin: 10px 15px;
padding: 10px 0 10px 28px;
border: 1px solid #0065C6;
background: #1E89DC;
font: bold 1.3em/1.5em "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;
}
/* start - table */
table {
margin: 10px 15px;
border-collapse: collapse;
}
th strong {
color: #fff;
}
th {
background: #93BC0C;
height: 3em;
padding-left: 12px;
padding-right: 12px;
color: #FFF;
text-align: left;
border-left: 1px solid #B6D59A;
border-bottom: solid 2px #8EB200;
border-top: solid 2px #8EB200;
}
tr {
color: #707070;
height: 2.5em;
}
td {
padding-left: 12px;
padding-right: 12px;
border-left: 1px solid #FFF;
border-bottom: solid 1px #ffffff;
}
td.first,th.first {
border-left: 0px;
}
tr.row-a {
background: #F8F8F8;
}
tr.row-b {
background: #EFEFEF;
}
/* end - table */
/* form elements */
form {
margin: 10px 15px;
padding: 10px;
border: 1px solid #0065C6;
background-color: #1E89DC;
}
fieldset {
margin: 0;
padding: 0;
border: none;
}
label {
display:block;
font-weight:bold;
margin: .4em 0;
}
input {
padding: .3em;
border: 1px solid #eee;
font: normal 1em Verdana, sans-serif;
color:#777;
}
textarea {
width: 55%;
padding: .3em;
font: normal 1em/1.5em Verdana, sans-serif;
border: 1px solid #eee;
height: 10em;
display:block;
color:#777;
}
input.button {
font: bold 1em Arial, Sans-serif;
margin: 0;
padding: .25em .3em;
color: #FFF;
background: #A2CC00;
border: 2px solid #8EB200;
}
/* search form */
.searchform {
background-color: transparent;
border: none;
margin: 0 0 0 10px; padding: 0 0 1.5em 0;
width: 18em;
}
.searchform p { margin: 0; padding: 0; }
.searchform input.textbox {
width: 11em;
color: #777;
padding: .4em;
border: 1px solid #E5E5E5;
vertical-align: top;
}
.searchform input.button {
width: 60px;
vertical-align: top;
}
/***********************
LAYOUT
************************/
#header-content, #content, #nav {
/*
The width value below sets the total width of the design. It's default value is set to 93%
which means that it will take up 93% of the browser window's width. You can also set it to a
different percentage value (90%, 85%, etc.). This design is fluid layout by default, but you
can turn it into a fixed width layout by setting a pixel value to the width (e.g. 900px, 950px).
*/
width: 93%;
}
/* box */
.box {
margin: 10px 0;
padding: 10px 10px 20px 10px;
border: 5px solid #1F8ADE;
background: url(BluePigment-images/boxbg.jpg);
}
/* header */
#header {
height: 178px;
text-align: left;
}
#header-content {
position: relative;
margin: 0 auto; padding: 0;
}
#header-content h1#logo-text a {
position: absolute;
margin: 0; padding: 0;
font: bold 58px 'Trebuchet MS', Tahoma, Arial, Sans-serif;
letter-spacing: -1px;
color: #fff;
text-decoration: none;
/* change the values of top and left to adjust the position of the logo*/
top: 30px; left: 10px;
}
#header-content h1#logo-text span {
color: #68B5F0;
}
#header-content #slogan {
position: absolute;
font: bold 16px 'Trebuchet Ms', Sans-serif;
text-transform: none;
color: #FFF;
margin: 0; padding: 0;
/* change the values of left and top to adjust the position of the slogan */
top: 100px; left: 125px;
}
/* header links */
#header-content #header-links {
position: absolute;
top: 25px; right: 10px;
color: #fff;
font: bold 15px "Trebuchet MS", Tahoma, Sans-serif;
}
#header-content #header-links a {
color: #93C9F4;
text-decoration: none;
}
#header-content #header-links a:hover {
color: #fff;
}
/* Navigation */
#nav-wrap {
float: left;
width: 100%;
background: url(BluePigment-images/menubg.jpg) repeat-x left bottom;
clear: both;
}
#nav {
clear: both;
margin: 0 auto;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
text-transform: uppercase;
margin: 0;
padding: 0;
height: 64px;
}
#nav ul li {
float: left;
margin: 0; padding: 0;
height: 64px;
}
#nav ul li a {
display: block;
float: left;
width: auto;
margin: 0;
padding: 0 15px;
color: #FFF;
font: bold 15px "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;
text-decoration: none;
letter-spacing: 1px;
}
#nav ul li a:hover,
#nav ul li a:active {
color: #333;
}
#nav ul li#current {
background: url(BluePigment-images/nav-current.jpg) no-repeat center bottom;
}
#nav ul li#current a {
color: #333;
}
/* content */
#content-wrap {
clear: both;
float: left;
background: #1183DA;
width: 100%;
}
#content {
text-align: left;
padding: 0;
margin: 0 auto;
}
/* sidebar */
#sidebar {
float: right;
width: 21em;
margin: 10px 0 10px -21em; padding: 0;
}
#sidebar h1 {
font: bold 1.75em 'Trebuchet MS', Tahoma, Arial, Sans-serif;
padding: .3em 0 .5em 10px;
color: #002368;
}
#sidebar ul.sidemenu {
list-style:none;
margin: 0;
padding: .3em 0 1em 5px;
font-family: 'Trebuchet MS', Tahoma, Sans-serif;
}
#sidebar ul.sidemenu li {
padding: 0;
background: url(BluePigment-images/sidebullet.gif) no-repeat .3em .5em;
}
* html body #sidebar ul.sidemenu li { height: 1%; }
#sidebar ul.sidemenu li a {
display: block;
font-weight: bold;
color: #E8F4FF;
text-decoration: none;
padding: .2em 0 .2em 30px;
line-height: 1.5em;
font-size: 1.35em;
}
#sidebar ul.sidemenu li a:hover {
background: #0F7ACC url(BluePigment-images/sidebullet.gif) no-repeat .25em .45em;
color: #FFF;
}
#sidebar ul.sidemenu ul{
margin-left: 15px;
}
#sidebar .sidebox {
margin: 5px 15px 5px 0;
padding: 0;
background: url(BluePigment-images/sidebarsep.jpg) repeat-x left bottom;
}
#sidebar .sep{
background: url(BluePigment-images/sidebarsep.jpg) repeat-x left bottom;
height: 2px;
margin: 0px 15px 10px 0;
clear: both;
}
/* main */
#main {
margin: 10px 23em 10px 0;
padding: 0;
}
#main h1 {
font: bold 2.8em 'Trebuchet MS', Arial, Sans-serif;
color: #B1E100;
letter-spacing: -2px;
padding-bottom: 0;
}
#main h1 a {
color: #B1E100;
text-decoration: none;
}
/* footer */
#footer-wrap {
clear: both;
border-top: 5px solid #86CC15;
text-align: left;
padding: 1.6em 0;
}
#footer-wrap a {
text-decoration: none;
color: #5B9CFF;
}
#footer-wrap a:hover {
color: #E8F4FF;
}
#footer-wrap p {
padding: 10px 0;
}
#footer-wrap h2 {
color: #E8F4FF;
margin: 0;
padding: 0 10px;
text-transform: none;
}
/* footer columns */
#footer-columns {
color: #5B9CFF;
margin: 0 auto;
padding: 0;
width: 90%;
}
#footer-columns ul {
list-style: none;
margin: 10px 0 0 0;
padding: 0;
background: url(BluePigment-images/footer-dots.jpg) repeat-x left top;
}
#footer-columns li {
background: url(BluePigment-images/footer-dots.jpg) repeat-x left bottom;
}
#footer-columns li a {
display: block;
font-weight: normal;
padding: .5em 0 .5em 1em;
width: 96%;
}
#footer-columns .col3, .col3-center {
float: left;
width: 32%;
}
#footer-columns .col3-center {
margin: 0 15px;
}
/* bottom */
#footer-bottom {
clear: both;
color: #E8F4FF;
margin: 0 auto;
padding: 1em 0;
text-align: center;
font-size: .9em;
}
/* alignment classes */
.float-left { float: left; }
.float-right { float: right; }
.align-left { text-align: left; }
.align-right { text-align: right; }
/* additional classes */
.clear { clear: both; }
.white { color: #E8F4FF; }
img.rssfeed {
border: none;
padding: 0 0 5px 0;
background: transparent;
}
.post-by {
font-size: .95em;
padding-top: 0;
}
.post-footer {
text-align: right;
background: #1E89DC;
border: 1px solid #0065C6;
padding: 8px 10px;
margin: 20px 15px 10px 15px;
}
.post-footer .date {
background: url(BluePigment-images/clock.gif) no-repeat left center;
padding-left: 20px; margin: 0 3px 0 3px;
}
.post-footer .comments {
background: url(BluePigment-images/comment.gif) no-repeat left center;
padding-left: 20px; margin: 0 3px 0 3px;
}
.post-footer .readmore {
background: url(BluePigment-images/page.gif) no-repeat left center;
padding-left: 20px; margin: 0 3px 0 3px;
}
</style>
<title>BluePigment</title>
</head>
<body>
<!-- header starts here -->
<div id="header"><div id="header-content">
<h1 id="logo-text"><a href="index.html" title="">Blue<span>Pigment</span></a></h1>
<h2 id="slogan">Put your site slogan here...</h2>
<div id="header-links">
<p>
<a href="index.html">Home</a> |
<a href="index.html">Contact</a> |
<a href="index.html">Site Map</a>
</p>
</div>
</div></div>
<!-- navigation starts here -->
<div id="nav-wrap"><div id="nav">
<ul>
<li id="current"><a href="index.html">Home</a></li>
<li><a href="index.html">News</a></li>
<li><a href="index.html">Downloads</a></li>
<li><a href="index.html">Support</a></li>
<li><a href="index.html">About</a></li>
</ul>
</div></div>
<!-- content-wrap starts here -->
<div id="content-wrap"><div id="content">
<div id="sidebar" >
<div class="sep"></div>
<div class="sidebox">
<h1>Search Box</h1>
<form action="#" class="searchform">
<p>
<input name="search_query" class="textbox" type="text" />
<input name="search" class="button" value="Search" type="submit" />
</p>
</form>
</div>
<div class="sidebox">
<h1>Sidebar Menu</h1>
<ul class="sidemenu">
<li><a href="index.html">Home</a></li>
<li><a href="#TemplateInfo">TemplateInfo</a></li>
<li><a href="#SampleTags">Sample Tags</a></li>
<li><a href="http://www.styleshout.com/">More Templates...</a> </li>
<li>
<a href="http://www.buywebtemplates.net" title="Web Templates">Web Templates</a></li>
</ul>
</div>
<div class="sidebox">
<h1>Sponsors</h1>
<ul class="sidemenu">
<li><a href="http://www.dreamtemplate.com" title="Website Templates">DreamTemplate</a></li>
<li><a href="http://www.themelayouts.com" title="WordPress Themes">ThemeLayouts</a></li>
<li><a href="http://www.imhosted.com" title="Website Hosting">ImHosted.com</a></li>
<li><a href="http://www.dreamstock.com" title="Stock Photos">DreamStock</a></li>
<li><a href="http://www.evrsoft.com" title="Website Builder">Evrsoft</a></li>
<li>
<a href="http://www.ehostinfo.com/" title="Web Hosting">Web Hosting</a></li>
</ul>
</div>
<div class="sidebox">
<h1>Wise Words</h1>
<p>"Everybody thinks of changing humanity and nobody
thinks of changing himself."</p>
<p class="align-right">- Leo Tolstoy</p>
</div>
<div class="sidebox">
<h1>Support Styleshout</h1>
<p>If you are interested in supporting my work and would like to contribute, you are
welcome to make a small donation through the
<a href="http://www.styleshout.com/">donate link</a> on my website - it will
be a great help and will surely be appreciated.
</p>
</div>
<div class="sidebox">
<h1>RSS Feed</h1>
<p><a href="index.html" ><img src="images/rssfeed.gif" alt="RSS Feed" class="rssfeed" /></a><br />
subscribe to the <strong><a href="index.html" >rss feed</a></strong>
</p>
</div>
</div>
<div id="main">
<div class="box">
<a name="TemplateInfo"></a>
<h1><a href="index.html">Template <span class="white">Info</span></a></h1>
<p class="post-by">Posted by <a href="index.html">ealigam</a></p>
<p><strong>BluePigment</strong> is a free, W3C-compliant, CSS-based website template
by <a href="http://www.styleshout.com/">styleshout.com</a>. This work is
distributed under the <a rel="license" href="http://creativecommons.org/licenses/by/2.5/">
Creative Commons Attribution 2.5 License</a>, which means that you are free to
use and modify it for any purpose. All I ask is that you give me credit by including a <strong>link back</strong> to
<a href="http://www.styleshout.com/">my website</a>.
</p>
<p>
You can find more of my free template designs at <a href="http://www.styleshout.com/">my website</a>.
For premium commercial designs, you can check out
<a href="http://www.dreamtemplate.com" title="Website Templates">DreamTemplate.com</a>.
</p>
<p class="post-footer align-right">
<a href="index.html" class="readmore">Read more</a>
<a href="index.html" class="comments">Comments (7)</a>
<span class="date">Oct 01, 2006</span>
</p>
</div>
<div class="box">
<a name="SampleTags"></a>
<h1><a href="index.html">Sample <span class="white">Tags</span></a></h1>
<p class="post-by">Posted by <a href="index.html">ealigam</a></p>
<h3>Code</h3>
<p><code>
code-sample { <br />
font-weight: bold;<br />
font-style: italic;<br />
}
</code></p>
<h3>Example Lists</h3>
<ol>
<li>Here is an example</li>
<li>of an ordered list</li>
</ol>
<ul>
<li>Here is an example</li>
<li>of an unordered list</li>
</ul>
<h3>Blockquote</h3>
<blockquote><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat....</p></blockquote>
<h3>Image and text</h3>
<p>
<a href="http://getfirefox.com/"><img src="images/firefox-gray.jpg" width="100" height="121" alt="firefox-gray" class="float-left" /></a>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum.
Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu
posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum
odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra
condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna.
In tristique orci porttitor ipsum. Aliquam ornare diam iaculis nibh. Proin luctus, velit pulvinar
ullamcorper nonummy, mauris enim eleifend urna, congue egestas elit lectus eu est.
</p>
<h3>Table Styling</h3>
<table>
<tr>
<th class="first"><strong>post</strong> date</th>
<th>title</th>
<th>description</th>
</tr>
<tr class="row-a">
<td class="first">07.18.2007</td>
<td><a href="index.html">Augue non nibh</a></td>
<td><a href="index.html">Lobortis commodo metus vestibulum</a></td>
</tr>
<tr class="row-b">
<td class="first">07.18.2007</td>
<td><a href="index.html">Fusce ut diam bibendum</a></td>
<td><a href="index.html">Purus in eget odio in sapien</a></td>
</tr>
<tr class="row-a">
<td class="first">07.18.2007</td>
<td><a href="index.html">Maecenas et ipsum</a></td>
<td><a href="index.html">Adipiscing blandit quisque eros</a></td>
</tr>
<tr class="row-b">
<td class="first">07.18.2007</td>
<td><a href="index.html">Sed vestibulum blandit</a></td>
<td><a href="index.html">Cras lobortis commodo metus lorem</a></td>
</tr>
</table>
<h3>Example Form</h3>
<form action="#">
<p>
<label>Name</label>
<input name="dname" value="Your Name" type="text" size="30" />
<label>Email</label>
<input name="demail" value="Your Email" type="text" size="30" />
<label>Your Comments</label>
<textarea rows="5" cols="5"></textarea>
<br />
<input class="button" type="submit" />
</p>
</form>
</div>
<br />
</div>
<!-- content-wrap ends here -->
</div></div>
<!-- footer starts here-->
<div id="footer-wrap">
<div id="footer-columns">
<div class="col3">
<h2>Tincidunt</h2>
<ul>
<li><a href="index.html">consequat molestie</a></li>
<li><a href="index.html">sem justo</a></li>
<li><a href="index.html">semper</a></li>
<li><a href="index.html">magna sed purus</a></li>
<li><a href="index.html">tincidunt</a></li>
</ul>
</div>
<div class="col3-center">
<h2>Sed purus</h2>
<ul>
<li><a href="index.html">consequat molestie</a></li>
<li><a href="index.html">sem justo</a></li>
<li><a href="index.html">semper</a></li>
<li><a href="index.html">magna sed purus</a></li>
<li><a href="index.html">tincidunt</a></li>
</ul>
</div>
<div class="col3">
<h2>Praesent</h2>
<ul>
<li><a href="index.html">consequat molestie</a></li>
<li><a href="index.html">sem justo</a></li>
<li><a href="index.html">semper</a></li>
<li><a href="index.html">magna sed purus</a></li>
<li><a href="index.html">tincidunt</a></li>
</ul>
</div>
<!-- footer-columns ends -->
</div>
<div id="footer-bottom">
<p>
© 2010 Your Company
Design by <a href="http://www.styleshout.com/">styleshout</a>
| <a href="http://www.ehostinfo.com/">Web Hosting</a>
<a href="index.html">Home</a> |
<a href="index.html">Sitemap</a> |
<a href="index.html">RSS Feed</a> |
<a href="http://validator.w3.org/check?uri=referer">XHTML</a> |
<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>
</p>
</div>
<!-- footer ends-->
</div>
</body>
</html>
Related examples in the same category