bluebusiness : Blue « Templates « HTML / CSS

bluebusiness

     

<!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">
<head>
<title>BlueBusiness</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body,html {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  height: 100%;
  width: 100%;
  background-color: #FFFFFF;
  background-image: url(bluebusiness-images/bg_main.gif);
  background-repeat: repeat-x;
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 12px;
  color: #666666;
}

#container {
  width: 750px;
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px;
}

#container-header {
  width: 670px;
  height: 85px;
  padding: 20px 40px 0px 40px;
  background-image: url(bluebusiness-images/bg_header.gif);
  line-height: 85px;
  font-size:28px;
  font-weight:bold;
}

#container-name {
  float: left;
}

#container-slogan {
  float: right;
  font-size: 18px;
  font-weight: normal;
  font-style: italic;
  padding-right: 10px;
}

span, #container-name span,#container-slogan span {
  color: #006AC3;
}

#container-eyecatcher {
  width: 670px;
  padding: 0px 40px 0px 40px;
  height: 175px;  
  background-image: url(bluebusiness-images/bg_eyecatcher.gif);
}

#container-navigation {
  width: 670px;
  background-color: #45AAFF;
  height: 22px;
  border-bottom: 1px solid #ffffff;
}

ul#navigation {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

#navigation li {
  display: inline;
  list-style: none;
  height: 22px;
}

#navigation li a {
  color: #ffffff;
  line-height: 22px;
  font-size: 11px;
  text-decoration: none;
  padding: 5px 15px 6px 15px;
  border-right: 1px solid #ffffff;
}

#navigation li a:hover {
  text-decoration: underline;
  background-color: #0066CC;
}

#container-content {
  width:670px;
  background-image: url(bluebusiness-images/bg_content.gif);
  background-repeat: no-repeat;
  padding: 20px 40px 0px 40px;
  margin: 0 0 0 0;
  height: auto;
}

#content {
  width: 430px;
  float: left;
}

#border {
  width: 170px;
  margin-left: 480px;
}

#container-footer {
  border-top: 4px solid #E5E5E5;
  width: 670px;
  padding: 10px 0px 20px 0px;
  margin: 0 40px 0px 40px;
  clear: both;
  color: #aeaeae;
}

#container-footer a {
  font-weight: bold;
  padding: 2px 2px 2px 2px;
  color: #aeaeae;
}

#container-footer a:hover {
  color: #006AC3;
}

#footer {
  font-size: 11px;
  color: #aeaeae;
  width: 670px;
  margin-bottom: 20px;
}

#footer-copyright {
  float: left;
  width: 325px;
  padding-left: 10px;
}

#footer-meta {
  float: right;
  text-align: right;
  width: 325px;
  padding-right: 10px;
}

.clearer {
  clear: both;
}

h1 {
  font-size: 22px;
  color: #666666;
  margin: 0 0 0 0;
  padding: 0px 0 20px 25px;
  background-image: url(bluebusiness-images/h1_arrow.gif);
  background-repeat: no-repeat;
  background-position: 5px 7px;
  line-height: 24px;
}

h2 {
  font-size: 16px;
  color: #006AC3;
  padding: 5px 0 5px 25px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

h3 {
  font-size: 14px;
  color: #006AC3;
  padding: 5px 0 0px 25px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  }
  
h4 {
  font-size: 14px;
  color: #006AC3;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  }

hr {
  border: none 0;
  border-top: 1px solid #cccccc;
  height: 1px;
}

#content hr {
  border: none 0;
  border-top: 1px solid #cccccc;
  margin: 0px 0 0px 25px;
  height: 1px;
}

#content p {
  line-height: 19px;
  color: #666666;
  margin: 0 0 20px 25px;
}

#content p a, #border p a {
  text-decoration: none;
  color: #006AC3;
  border-bottom: 1px dotted #006AC3;
  padding: 2px 2px 2px 2px;
}

#content p a:hover, #border p a:hover  {
  text-decoration: none;
  color: #FFFFFF;
  background-color: #006AC3;
  padding: 2px 2px 2px 2px;
}

#content li {
  line-height: 20px;
  color: #666666;
  margin: 0 0 0 15px;
}

#content .quote {
  border-top: 1px solid #E5E5E5;
  background-color: #f7f7f7;
  border-bottom: 1px solid #E5E5E5;
  padding: 15px 15px 15px 65px;
  background-image: url(bluebusiness-images/bg_quote.gif);
  background-repeat: no-repeat;
  background-position: 10px 10px;
  color: #0066CC;
  font-style: italic;
}

#border p {
  line-height: 17px;
  font-size: 11px;
  color: #666666;
  margin: 0 0 15px 10px;
}

ul#subnavigation {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 15px 0px;
  background-image: none;
}

#subnavigation li {
  list-style: none;
  padding: 2px 0px 2px 10px;
  margin: 0px 0px 5px 0px;
}

#subnavigation li a {
  text-decoration: none;
  color: #006AC3;
  border-bottom: 1px dotted #006AC3;
}

#subnavigation li a:hover {
  text-decoration: none;
  border-bottom: 1px solid #006AC3;
}

ul#news {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  background-image: none;
}

#news li {
  list-style: none;
  background-image: url(bluebusiness-images/li_cube.gif);
  background-repeat: no-repeat;
  background-position: 2px 6px;
  padding: 2px 0px 2px 15px;
  margin: 0 0 15px 0px;
}

#content img {
  background-color: #E7F1FF;
  padding: 4px;
  border: 1px solid #006AC3;
}

img.alignleft {
  float: left;
  margin: 0 15px 5px 0px;
}

img.alignright {
  float: right;
  margin: 0 0 5px 15px;
}

img.alignabove {
  margin: 0 0 10px 0;
}

</style>


</head>
<body>
<div id="container">
  <div id="container-header">
    <div id="container-name"><span>Blue</span>Business</div>
    <div id="container-slogan"><span>&quot;</span>your slogan goes here<span>&quot;</span></div>
  </div>
  <div id="container-eyecatcher">
    <div id="container-navigation">
      <ul id="navigation">
        <li><a href="http://www.free-css.com/">home</a></li>
        <li><a href="http://www.free-css.com/">products</a></li>
        <li><a href="http://www.free-css.com/">services</a></li>
        <li><a href="http://www.free-css.com/">about</a></li>
        <li><a href="http://www.free-css.com/">contact</a></li>
        <li><a href="http://www.free-css.com/">sitemap</a></li>
      </ul>
    </div>
    <img src="bluebusiness-images/business_eyecatcher.jpg" alt="" /> </div>
  <div id="container-content">
    <div id="content">
      <h1>Welcome to <span>Blue</span>Business</h1>
      <p>Use this W3C-compliant, tableless, CSS-template as you like but keep the link to www.christian-pansch.de in the footer. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
        nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
        volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullam
        corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
      <h2>This is a H2 headline</h2>
      <p><img src="bluebusiness-images/example_image.jpg" alt="" class="alignleft" />Autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
        consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan
        et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
        duis dolore te feugait nulla facilisi.</p>
      <h3>And here is a H3 headline</h3>
      <p>Vel illum dolore eu feugiat nulla facilisis at vero et <a href="http://www.free-css.com/">accumsan et iusto</a> odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
      <p class="quote">Quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at.</p>
      <h3>Here comes an unordred list</h3>
      <p>What a nice list! Have fun using it.</p>
      <ul>
        <li>first point</li>
        <li>second point</li>
      </ul>
    </div>
    <!-- CONTENT END -->
    <div id="border">
      <h4>More about us</h4>
      <ul id="subnavigation">
        <li><a href="http://www.free-css.com/">Link to a subpage 1</a></li>
        <li><a href="http://www.free-css.com/">Link to a subpage 2</a></li>
        <li><a href="http://www.free-css.com/">Link to a subpage 3</a></li>
      </ul>
      <hr />
      <h4>Latest News</h4>
      <ul id="news">
        <li>Ut wisi enim ad minim veni
          am, quis nostrud exerci</li>
        <li>Tation ullamcorper suscipit
          lobortis nisl ut aliquip ex ea
          commodo consequat</li>
        <li> Duis autem vel eum iriure
          dolor in hendrerit in vulpu</li>
      </ul>
      <hr />
      <h4>Our adress</h4>
      <p>YourBusiness<br />
        Your street 667<br />
        54321 Inyourtown <br />
        <br />
        Phone: +49 421 34 67 89 <br />
        Fax: +49 421 98 76 54<br />
        E-Mail: <a href="http://www.free-css.com/">info@yourbusiness.com</a> </p>
    </div>
  </div>
  <div id="container-footer">
    <div id="footer">
      <div id="footer-copyright">&copy; 2007 yourbusiness.com - all rights reserved. <a href="http://www.free-css.com/">Terms of use</a></div>
      <div id="footer-meta"><a target="_blank" href="http://validator.w3.org/check?uri=referer">XHTML</a> | <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> | <a href="http://www.christian-pansch.de" title="Webdesign Bremen">Design by christian-pansch.de</a></div>
    </div>
  </div>
</div>
<!-- ENDE container -->
</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.	bluecarbon
30.	bluecorporation
31.	bluediamond
32.	blueflex
33.	BlueFlower
34.	BlueFresh
35.	bluegray
36.	blueled
37.	blueminimal
38.	blueminimalsidebar
39.	blueprism
40.	Blueshine
41.	blueshuffle
42.	BlueSpace
43.	BlueSquareShadow
44.	bluesurge
45.	bluethickline
46.	bluetoolkit
47.	bluewave
48.	blueweb
49.	blueworld
50.	bluey
51.	blue_circles
52.	blue_sky
53.	blue_space
54.	blue_trees
55.	bublue-studio
56.	bussinesblue
57.	fain-blue
58.	fairyblue
59.	basicblue
60.	CleanandBlue
61.	cleanblue
62.	freecss_blue
63.	flyingblue
64.	easy-blue
65.	FunkyCoolBlue
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