FunkyCoolBlue : Blue « Templates « HTML / CSS






FunkyCoolBlue

    

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title> -=[ Your Company &trade; :: Home Page ]=- </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/**
 * Design. (c) Jason Earl, 2005, Virtual Function
 *
 * "tableless" design known to work (and tested) on Mozilla, and IE 6.
 * Should also work KHTML (Konqueror and Safari)
 */


/* -----------------------------------------------------------
            Generic
----------------------------------------------------------- */

body {
  background: #9BB2CA url('images/back.gif');
  margin: 0;
  padding: 0;
  font-size: 11px;
  font-family: Verdana, sans-serif;
}

a:link,
a:visited {
  text-decoration: none;
  color: #163477;
}

a:hover {
  border-bottom: #bdf 1px solid;
}

.pageWrapper {
  margin: 0 10%;
  width: auto;
  min-width: 620px;
}

/** Uncomment below for liquid width (expands and contracts with brwoser window width 
*/
.pageWrapper {
  margin: 0 auto;
  width: 730px;
  min-width: 620px;
}


/* extension to page wrapper */
#main {
  border-right: #FFF 2px solid;
  border-left: #FFF 2px solid;
  /* IE Hack. Set this to right colour for now */
  background: #E5EDF1;
}

div#bodyWrap {
  background: url('images/back_top.jpg') repeat-x;
}

div#bodyWrap {
  width: auto;
  min-width: 770px;
  height: 432px;
}

img.product, 
.product img {
  border: 1px solid #225F82;
  margin: 12px 8px 4px 8px;
}

.content .product {
  text-align: center;
}

.subBarInner p {
  margin: 8px 8px 2px 8px;
  padding: 0;
}

.product {
  font-weight: bold;
  color: #0B70CE ! important;
}

div.wide3 {
  width: 33%;
  float: left;
  text-align: center;
}

input[type=text],
input[type=button],
input[type=submit],
select,
textarea
{
  background: #F6F9FB;
  border: 1px solid #225F82;
}

/* -----------------------------------------------------------
          Headers ( h* style )
----------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6
{
  margin: 8px 16px;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0.08em;
}

h1 {
  font-size: 18px;
  color: #164677;
  padding-bottom: 4px;
  border-bottom: 1px solid #4C95D6;
}

h1 span {
  float: right;
  color: #69839B;
}

/* -----------------------------------------------------------
          View Controllers
----------------------------------------------------------- */

.clear {
  clear: both;
}

.hide, #oldBrowserNotice, 
.ieSixCharDupBug {
  display: none;
}

/* -----------------------------------------------------------
          Page Header(s) and Footer
----------------------------------------------------------- */

#header {
  height: 146px;
  margin-right: -2px; /* Box model adjustment */
}

#header #logo {
  width: 223px;
  float: left;
  background: url('images/logo.gif') no-repeat #FFF;
  margin: 0 -3px;
  height: 146px;
  position: absolute;
  z-index: 100;
}

#header #logo h1 {
  display: none;
}

#heading .head {
  height: 78px;
  background: url('images/header.jpg') no-repeat right top #FFF;
  border-right: 2px solid #fff;
  position: relative;
  margin-right: -2px;
}

* html #heading .head {
  margin-right: -4px; /* Extra 2px due to IE Box model */
}

#heading .top, 
#heading .sub {
  color: #FFF;
  margin: 10px 10px 0 0;
  float: right;
  width: 370px;
  text-align: right;
  height: 22px;
}

#heading a:link,
#heading a:visited {
  color: #FFF;
  margin-left: 32px;
}

#heading a:hover {
  border-bottom: #7487A1 4px solid;
}

#heading .sub {
  clear: right;
}

#footer {
  position: relative;  /* IE fix */
  padding: 4px 24px;
  color: #249;
  background: url('images/bg5.gif');
}

/* -----------------------------------------------------------
            Layout Controls
----------------------------------------------------------- */

/* --------------------- Common to both -------------------- */

#mainInner,
div.subBarInner,
div.subTitleInner {
  z-index: 2;
  width: 100%;
  border-right: #FFF 2px solid;

}

div.content {
  border-width: 0;  /* Fix print/v4 borders issue */
}

#mainOuter div.left,
#mainOuter div.right,
#mainOuter div.content,
div.subBarInner div.content,
div.subBarInner div.right,
div.subTitleInner div.content,
div.subTitleInner div.right {
  /* For Sub elements of #mainOuter AND div.subBarInner */
  float: left;
  position: relative;
  z-index: 10;
  overflow: visible;  /* fix for IE italics bug */
}

/* --------------------- The Sub Bar Piece -------------------- */

div.subBarOuter,
div.subTitleOuter {
  z-index: 1;
  border-style: solid;
  border-color: #E5EDF1;
  border-width: 0;
}

div.subBarInner div.right,
div.subTitleInner div.right {
  float: right;
  width: 20em;
  margin: 0 -20em 0 1px;
}

div.subBarInner div.content,
div.subTitleInner div.content {
  margin: 0 -1px; /* Ensure floating */
  width: 100%;
}

/* --------------------- The Main Bar Piece -------------------- */

#mainOuter {
  z-index: 1;
  border-left: 16em #E6EEF0 solid;
  border-right: 8px #0B70CE solid;
}

#mainInner {
  border-left: 2px solid #FFF;
  background: #F0F3F2;
}

#mainOuter .content {
  margin: 0 -1px;  /* Ensure floating */
  width: 100%;
}

#mainOuter .right {
  /* Not used for now */
  float: right;       /* Possiblity for NN4 layout */
  width: 15em;
  margin: 0 -15em 0 1px;  /* Column position */
}

#mainOuter .left {
  width: 16em;
  margin: 0 1px 0 -16em;  /* Column position */
}

/* -----------------------------------------------------------
          Decoration Fix-up Pieces
----------------------------------------------------------- */

div.gap {
  border-top: 2px solid #FFF;
  background: #CDE;
  position: relative;
}

html>body .mozclear {
  border-bottom: 1px solid white;  /* help mozilla recognize empty  clearing element */
  margin-bottom: -1px;                  /* compensate for 1px space used by border */
}

/* -----------------------------------------------------------
            Fix BugIE :-|
----------------------------------------------------------- */

* html #mainInner, * html div.subBarInner, * html div.subTitleInner {
  position: relative;  /* fix a render bug in IE under certain conditions */
}

* html div.gap {
  margin-right: -4px;
}

* html #mainOuter {
  border-right: 4px #0B70CE solid;
}

.leftInside,
.titleSide,
#mainInner .left div.button1,
#mainInner .left div.button2 {
  margin-left: -2px;
  margin-right: 2px;
}


/* -----------------------------------------------------------
          Sub Bar (Thing under header)
----------------------------------------------------------- */

div.subBarInner {
  background: #F7F7EC  url('images/bg2.gif');
  padding-bottom: 8px;
}

div.subBarInner span {
  display: block;

}

div.subBarOuter,
div.subTitleOuter {
  border-right-width: 20em;
}

div.subTitleOuter div.right,
div.subBarOuter div.right {
  text-align: center;
}

div.subTitleOuter {
  border-color: #CFE0E9;
}

div.subTitleInner {
  background: #E6EDE0 url('images/bg1.gif');
  color: #164677;
}

/* -----------------------------------------------------------
              Main Bar
----------------------------------------------------------- */

.titleSide,
.titleMain {
  padding: 8px 16px 4px 16px;
  border-bottom: 1px solid #FFF;
  letter-spacing: 0.1em;
  height: 16px;
}

.titleSide {
  background: #164677 repeat-y left url('images/title1.gif');
  color: #FFF;
  margin-bottom: 12px;
  font-size: 12px;
  padding-left: 24px;
}

.titleMain {
  background: #DBE2E2;
  font-size: 11px;
}

.titleMain a:link,
.titleMain a:visited {
  color: #5382B3;
}

.right p,
.content p {
  color: #274563;
  line-height: 1.6em;
  letter-spacing: 0.05em;
  padding: 0 16px 8px 16px;
}

#mainInner .left ul {
  list-style-type: none;
  margin: 0 0 12px 12px;
  padding: 0;
}

#mainInner .left ul li {
  margin: 8px;
}

ul.dotted,
li.select {
  list-style-type: square;
  color: #40A3FE;
  margin-left: 52px;
}

.left .active a:link,
.left .active a:visited {
  font-weight: bold;
  color: #0471E1;
  list-style-type: square;
}

#mainInner .left ul.dotted {
  list-style-type: square;
}

#mainInner .left input {
  color: #000;
}

#mainInner .left div.button1,
#mainInner .left div.button2 {
  width: 100%;
  color: #163977;
  border: 0 none;
  border-top: #FFF solid 2px;
  padding: 6px 0;
}

#mainInner .left div.button1 a:link,
#mainInner .left div.button1 a:visited,
#mainInner .left div.button2 a:link,
#mainInner .left div.button2 a:visited {
  margin: 0 0 0 24px;
  font-size: 12px;
  font-weight: bold;
}

#mainInner .left div.button1 {
  background: #C9D6A6 url('images/bg3.gif');
}

#mainInner .left div.button2 {
  border-bottom: #FFF solid 2px;
  background: #C9D6A6 url('images/bg4.gif');
}


</style>


<style type="text/css">
</style>
</head>
<body>
<div id="bodyWrap">
  <div class="pageWrapper">
    <div id="header">
      <div id="logo">
        <h1>Logo &trade;</h1>
      </div>
      <div id="heading">
        <div class="head"></div>
        <div class="top">
          <a href="http://virtualfunction.net">Home</a>
          <a href="http://virtualfunction.net/case_studies">New Items</a>
          <a href="http://virtualfunction.net/case_studies">Special Offers</a>
        </div>
        <div class="sub">
          <a href="http://virtualfunction.net/case_studies">My Account</a>
          <a href="http://virtualfunction.net">Logout</a>
        </div>
      </div>
    </div>
  </div>
  <div class="pageWrapper" id="main">
    <div class="subTitleOuter">
      <div class="subTitleInner">
        <div class="right">
          <h2>Featured Product</h2>
        </div>
        <div class="content">
          <h2>New Products</h2>
        </div>
        <div class="clear mozclear"></div>

      </div>
    </div>
    <div class="gap">
    </div>
    <div class="subBarOuter">
      <div class="subBarInner">
        <div class="right">
          <p>ZX81 Spectrum - Gold Plated Edition</p>
          <a href="#" class="product">
            <img alt="New Product Image" src="FunkyCoolBlue-products/1.jpg" />
            <span>&pound;29.99</span>
          </a>
        </div>
        <div class="content">
          <div class="wide3">
            <p>MSI nForce 3 FH45T XXXtreme</p>
            <a href="#" class="product">
              <img alt="New Product Image" src="FunkyCoolBlue-products/2.jpg" />
              <span>&pound;29.99</span>
            </a>
          </div>
          <div class="wide3">
            <p>Intel 875P VoodooX Series</p>
            <a href="#" class="product">
              <img alt="New Product Image" src="FunkyCoolBlue-products/3.jpg" />
              <span>&pound;29.99</span>
            </a>
          </div>
          <div class="wide3">
            <p>AMD Z Hammer HY9001_C</p>
            <a href="#" class="product">
              <img alt="Featured Product Image" src="FunkyCoolBlue-products/1.jpg" />
              <span>&pound;29.99</span>
            </a>
          </div>
        </div>
        <div class="clear mozclear"></div>
      </div>
    </div>
    <div class="gap">
    </div>

    <div id="mainOuter">
      <div id="mainInner">
        <div class="left">
          <div class="titleSide">
            Categories
          </div>
          <ul>
            <li><a href="http://virtualfunction.net/services/development/?page=5">Bespoke Websites</a></li>
            <li><a href="http://virtualfunction.net/services/development/?page=3">E-Commerce Solutions</a></li>
            <li><a href="http://virtualfunction.net/services/development/?page=7">Database Development</a></li>
            <li><a href="http://virtualfunction.net/services/development/?page=4">Content Management</a></li>
            <li><a href="http://virtualfunction.net/services/design/?page=2">Accessiblity Analysis</a></li>
            <li><a href="http://virtualfunction.net/services/development/?page=9">Web Hosting</a></li>
            <li><a href="http://virtualfunction.net/services/development/?page=8">Data Mining</a></li>
            <li class="active"><a href="http://virtualfunction.net/services/">Hardware</a></li>
            <li><a href="http://virtualfunction.net/services/design/?page=1">Web Design</a></li>
            <li><a href="http://virtualfunction.net/services/design">Web Programming</a></li>
            <li><a href="http://virtualfunction.net/services/development/?page=2">Rails Development</a></li>
          </ul>
          <div class="titleSide">
            My Basket
          </div>
          <ul class="dotted">
            <li><a href="http://google.com/search?q=USB+Disk">2 x USB 128Mb Disk</a></li>
            <li><a href="http://google.com/search?q=ASUS+Motherboard">1 x Asus KT7200D Motherboard</a></li>
            <li><a href="http://google.com/search?q=ATI+Radeon">1 x Radeon 9800</a></li>
            <li><a href="http://google.com/search?q=SATA+Hard+Disk">2 x IBM SATA 160Gb</a></li>
            <li><a href="http://google.com/search?q=Hard+Drive">7200Rpm Harddisk</a></li>
          </ul>
          <div>
            <div class="button1"><a href="http://virtualfunction.net/services/development/3#e-commerce-solutions">Edit Basket</a></div>
            <div class="button2"><a href="http://virtualfunction.net/services/development/3#e-commerce-solutions">Checkout</a></div>
          </div>
          <div class="titleSide">
            Language
          </div>
          <div style="text-align: center;">
            <select name="language">
              <option value="English">English</option>
              <option value="Spanish">Spanish</option>
              <option value="German">German</option>
              <option value="French">French</option>
            </select>
            <input type="submit" value="Go!" />
          </div>
        </div>
        <div class="right">
        </div>
        <div class="content">
          <div class="titleMain">
            <a href="#">Home</a> &gt;
            <a href="#">Hardware</a> &gt;
            <a href="#">Gygabyte</a> &gt;
            <a href="#">GA700KA8</a>
          </div>
          <h1><span>&pound;96.99</span>Gygabyte GA700KA8</h1>
          <div class="product">
            <a href="#">
              <img alt="product image" src="FunkyCoolBlue-products/prod1.jpg" />
            </a>
          </div>
          <h3>Terms of use</h3>
          <p>You may freely use this template for your own personal use, 
          provided the copyright information remains, along 
          with the link to my website in the footer.</p>
          <p>If you would like to redistribute this design or use for non 
          personal use, please <a href="http://virtualfunction.net/contact" title="Contact Virtual Function">
          contact me</a> first. Feel free to visit my <a href="http://virtualfunction.net" title="Virtual Function Web Development">
          business web site</a> if you are looking for any form of bespoke 
          web development work. My experience mainly lies in XHTML, CSS design 
          and development under the 'Ruby on Rails' development platform.</p>
          <p>Please note that the original Photoshop PSD file has been included in
          the ZIP file so you can easily make adjustments where needed. The design 
          validates as XHTML 1.1 strict with no errors.</p>
        </div>
        <div class="clear mozclear"></div>
      </div>
    </div>
    <div class="hide" id="nsFooterClear"><!-- for NS4's sake --></div>
    <div id="footer" class="gap">
      Design &copy; 2005, <a href="http://virtualfunction.net/" title="Virtual Function: specialists in Web Design, Ruby on Rails programming, Database development, and bespoke solutions">Virtual Function Web Development</a>
    </div>
  </div>
</div>
</body>
</html>

   
    
    
    
  








Related examples in the same category

1.metamorph_blue
2.metamorph_bluefeather
3.metamorph_blueflower
4.metamorph_blueglowing
5.metamorph_bluemadness
6.metamorph_bluemess_lt2
7.metamorph_bluerock
8.metamorph_bluething
9.metamorph_bluewave
10.metamorph_bubbleblue_lt
11.metamorph_bubblesonblue
12.metamorph_lightblue
13.metamorph_shiningblue
14.metamorph_simpleblue
15.metamorph_uberblue
16.metamorph_wavesinblue
17.blue-hosting
18.blue-neutral
19.blue-pigment1
20.blue-sky
21.blue-white
22.blue-wood
23.Blue 1
24.blue99
25.blueblogtemplate
26.bluebottle
27.BlueBridge
28.bluebrush
29.bluebusiness
30.bluecarbon
31.bluecorporation
32.bluediamond
33.blueflex
34.BlueFlower
35.BlueFresh
36.bluegray
37.blueled
38.blueminimal
39.blueminimalsidebar
40.blueprism
41.Blueshine
42.blueshuffle
43.BlueSpace
44.BlueSquareShadow
45.bluesurge
46.bluethickline
47.bluetoolkit
48.bluewave
49.blueweb
50.blueworld
51.bluey
52.blue_circles
53.blue_sky
54.blue_space
55.blue_trees
56.bublue-studio
57.bussinesblue
58.fain-blue
59.fairyblue
60.basicblue
61.CleanandBlue
62.cleanblue
63.freecss_blue
64.flyingblue
65.easy-blue
66.genericblue
67.gallery-blue
68.MonsterBlue
69.Simple_Blue
70.wide-blue
71.a_bit_modern_bigBlue
72.mistyblue
73.portal_blue
74.SimplyBlue
75.sleekcssblue
76.Sexy_Blue
77.WonderfulBlue
78.sweetbuzzblue
79.light-blue
80.groovyblue
81.iblue2b