blueprism : Blue « Templates « HTML / CSS






blueprism

     

<!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">
<head>
<title>BluePrism | About</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
@charset "utf-8";
body {
  margin:0;
  padding:0;
  width:100%;
  background:top center;
}
html {
  padding:0;
  margin:0;
}
li.bg, .bg {
  clear:both;
  border-bottom:1px solid #cccccc;
  border-top:1px solid #cccccc;
  padding:0;
  margin:10px 0;
  background:#fff;
  list-style:none;
  height:1px;
}
li.bg2, .bg2 {
  clear:both;
  border-bottom:1px dashed #dfdfdf;
  padding:0;
  margin:10px 0;
  background:none;
  list-style:none;
}
p.clr, .clr {
  clear:both;
  padding:0;
  margin:0;
}
.main {
  margin:0 auto;
  padding:0;
}
h2 {
  font:normal 24px Georgia, "Times New Roman", Times, serif;
  color:#4b4b4b;
  padding:10px 5px;
  margin:5px 0 10px 0;
}
h2 span {
  font:normal 12px Georgia, "Times New Roman", Times, serif;
  color:#959595;
}
p {
  font:normal 12px Georgia, "Times New Roman", Times, serif;
  color:#5f5f5f;
  padding:5px;
  margin:0;
  line-height:1.8em;
}
a {
  color:#3085ca;
  text-decoration:none;
}
.header_resize {
  margin:0 auto;
  padding:0;
  width:970px;
}
.header {
  margin:0;
  padding:0;
  background:url(blueprism-images/header_bg.jpg) top center repeat-x;
}
.logo {
  width:500px;
  margin:0 auto;
  padding:0;
  float:left;
}
h1 {
  margin:0;
  padding:33px 0;
  color:#fff;
  font:normal 40px/1.2em Georgia, "Times New Roman", Times, serif;
  text-transform:uppercase;
  letter-spacing:-2px;
}
h1 a, h1 a:hover {
  color:#fff;
  text-decoration:none;
}
h1 span {
  font-size:32px;
  letter-spacing:-1px;
}
h1 small {
  display:block;
  margin:-4px 0;
  padding:0 0 0 176px;
  font:normal 13px/1.2em Georgia, "Times New Roman", Times, serif;
  text-transform:none;
  letter-spacing:normal;
}
.search {
  padding:13px 0 0 0;
  margin:0 auto;
  width:250px;
  float:right;
}
.search form {
  float:right;
  padding:0;
  margin:0;
}
.search span {
  display:block;
  float:left;
  background:#fff;
  width:165px;
  padding:2px 5px;
  height:21px;
  border:1px solid #dedede;
}
.search form .keywords {
  line-height:14px;
  height:14px;
  float:left;
  background:none;
  border:0;
  padding:4px 2px;
  margin:0;
  font:bold 12px Arial, Helvetica, sans-serif;
  color:#464646;
}
.search form .button {
  float:left;
  margin:0;
  padding:0 0 0 5px;
}
.menu {
  padding:0;
  margin:0;
  width:410px;
  float:left;
}
.menu ul {
  padding:0;
  margin:0;
  list-style:none;
  border:0;
  float:left;
}
.menu ul li {
  float:left;
  margin:0;
  padding:0;
  border:0;
}
.menu ul li a {
  float:left;
  margin:0;
  padding:23px 15px;
  color:#fff;
  font:normal 12px Georgia, "Times New Roman", Times, serif;
  text-decoration:none;
  text-transform:uppercase;
}
.menu ul li a:hover {
  background:url(blueprism-images/hover.gif) top repeat-x;
}
.menu ul li a.active {
  background:url(blueprism-images/hover.gif) top repeat-x;
}
.body_resize {
  margin:0 auto;
  padding:10px 35px;
  background:#fff;
  width:900px;
}
.body {
  margin:0;
  padding:0;
  background:#6d7c83 url(blueprism-images/body_bg.gif) top repeat-x;
}
.body h2 {
  font:normal 24px Georgia, "Times New Roman", Times, serif;
  color:#4b4b4b;
  padding:10px 5px;
  margin:5px 0 10px 0;
}
.body h2 span {
  font:normal 12px Georgia, "Times New Roman", Times, serif;
  color:#959595;
}
.body p span {
  font:bold 14px Georgia, "Times New Roman", Times, serif;
  color:#4b4b4b;
  padding:0;
  margin:0;
}
.body img {
  float:left;
  margin:5px;
  padding:0;
}
.body img.floated {
  float:left;
  margin:5px 10px 5px 0;
  padding:0;
}
.left {
  float:left;
  width:630px;
  margin:0;
  padding:0;
}
.right {
  float:right;
  width:260px;
  margin:0;
  padding:0;
}
.right ul {
  list-style:none;
  margin:5px 10px;
  padding:0;
}
.right li {
  background:10px 7px no-repeat;
  font:normal 14px Arial, Helvetica, sans-serif;
  color:#464646;
  padding:5px 0;
  margin:3px 0;
}
.right li a {
  padding:0 0 0 25px;
  margin:0;
  font:normal 13px Georgia, "Times New Roman", Times, serif;
  color:#5f5f5f;
  text-decoration:none;
}
.right li a:hover {
  color:#3085ca;
  text-decoration:none;
}
.right ul.sponsors {
  list-style:none;
  margin:5px 10px;
  padding:0;
}
.right li.sponsors {
  background:none;
  font:normal 11px Georgia, "Times New Roman", Times, serif;
  color:#959595;
  padding:6px 0;
}
.right li.sponsors a {
  padding:0 0 0 5px;
  margin:0;
  font:normal 13px Georgia, "Times New Roman", Times, serif;
  color:#5f5f5f;
  text-decoration:none;
}
.right li.sponsors strong {
  color:#3085ca;
}
.FBG_resize {
  margin:0 auto;
  padding:10px 35px;
  width:900px;
  background:#e6e6e6;
}
.FBG {
  margin:0;
  padding:0;
  background:#6d7c83;
}
.FBG img {
  float:left;
  margin:5px 10px 5px 0;
  padding:0;
}
.FBG .blok {
  width:270px;
  float:left;
  padding:10px 5px;
  margin:0;
}
.FBG .blok2 {
  width:328px;
  float:left;
  padding:10px 5px;
  margin:0;
}
.footer_resize {
  margin:0 auto;
  padding:10px 35px;
  width:900px;
  background:#1a68a0;
}
.footer {
  padding:0;
  margin:0 auto;
  background:#6d7c83;
  color:#fff;
  font:normal 12px Arial, Helvetica, sans-serif;
}
.footer p {
  margin:0;
  color:#fff;
  padding:4px 0;
  line-height:normal;
}
.footer a {
  color:#fff;
  padding:inherit;
  text-decoration:underline;
}
.footer a:hover {
  text-decoration:none;
}
.footer .lf {
  float:left;
}
.footer .rf {
  float:right;
}
#contactform {
  margin:0;
  padding:5px;
}
#contactform * {
  color:#F00;
}
#contactform ol {
  margin:0;
  padding:0;
  list-style:none;
}
#contactform li {
  margin:0;
  padding:0;
  background:none;
  border:none;
  display:block;
  clear:both;
}
#contactform li.buttons {
  margin:5px 0 5px 0;
}
#contactform label {
  margin:0;
  width:110px;
  display:block;
  padding:10px 0;
  color:#666;
  font:normal 12px Arial, Helvetica, sans-serif;
  text-transform:capitalize;
  float:left;
}
#contactform label span {
  color:#F00;
}
#contactform input.text {
  width:480px;
  border:1px solid #c0c0c0;
  margin:2px 0;
  padding:5px 2px;
  height:16px;
  background:#fff;
  float:left;
}
#contactform textarea {
  width:480px;
  border:1px solid #c0c0c0;
  margin:2px 0;
  padding:2px;
  background:#fff;
  float:left;
}
#contactform li.buttons input {
  border:1px solid #000;
  background:#ea7d1b;
  padding:10px;
  margin:10px 0 0 110px;
  color:#fff;
  float:left;
  font:normal 12px Arial, Helvetica, sans-serif;
}
p.response {
  text-align:center;
  color:#F00;
  font:normal 11px Georgia, "Times New Roman", Times, serif;
  line-height:1.8em;
  width:auto;
}

</style>


<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/georgia.js"></script>
<script type="text/javascript" src="js/cuf_run.js"></script>
<!--[if IE 6]>
<script src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script>DD_belatedPNG.fix('.logo img');</script>
<![endif]-->
</head>
<body>
<!-- START PAGE SOURCE -->
<div class="main">
  <div class="header">
    <div class="header_resize">
      <div class="logo">
        <h1><a href="index.html"><small>put your slogan here</small>Blue<span>Prism</span></a></h1>
      </div>
      <div class="clr"></div>
      <div class="search">
        <form id="form1" name="form1" method="post" action="#">
          <span>
          <input name="q" type="text" class="keywords" id="textfield" maxlength="50" value="Search..." />
          </span>
          <input name="b" type="image" src="blueprism-images/search.gif" class="button" />
        </form>
      </div>
      <div class="menu">
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="services.html">Services</a></li>
          <li><a href="about.html" class="active"> About Us </a></li>
          <li><a href="contact.html"> Contact Us</a></li>
        </ul>
      </div>
    </div>
    <div class="clr"></div>
  </div>
  <div class="clr"></div>
  <div class="body">
    <div class="body_resize">
      <div class="left">
        <h2>About Us<br />
          <span>March 16, 2010 | Posted by Owner | Filed under templates, internet</span> </h2>
        <p><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>. Sed euismod aliquet nunc vel porta. Morbi non mi id diam mattis consequat. Mauris pharetra fermentum tortor quis sagittis. Fusce rutrum ipsum lectus, vel congue velit. Nulla ultrices pretium congue. Mauris metus nibh, pulvinar vel vehicula eu, pharetra id ante. Vivamus tincidunt semper sapien ut fermentum. Nullam facilisis, nulla eu suscipit vulputate, libero nisl pellentesque tellus, ac scelerisque metus mauris ut quam. Nulla facilisi. Quisque rhoncus dolor et dolor lobortis accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse at nulla ante, at hendrerit mi. Aenean in ipsum massa. Pellentesque semper elit quis mauris ultricies ultrices. Sed sit amet felis tellus. Suspendisse potenti.</p>
        <p> Mauris metus nibh, pulvinar vel vehicula eu, pharetra id ante. Vivamus tincidunt semper sapien ut fermentum. Nullam facilisis, nulla eu suscipit vulputate, libero nisl pellentesque tellus, ac scelerisque metus mauris ut quam. Nulla facilisi. Quisque rhoncus dolor et dolor lobortis accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse at nulla ante, at hendrerit mi. Aenean in ipsum massa. Pellentesque semper elit quis mauris ultricies ultrices. Sed sit amet felis tellus. Suspendisse potenti.</p>
        <p>&nbsp;</p>
        <h2>About Us</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod aliquet nunc vel porta. Morbi non mi id diam mattis consequat. Mauris pharetra fermentum tortor quis sagittis. Fusce rutrum ipsum lectus, vel congue velit. Nulla ultrices pretium congue. Mauris metus nibh, pulvinar vel vehicula eu, pharetra id ante. Vivamus tincidunt semper sapien ut fermentum. Nullam facilisis, nulla eu suscipit vulputate, libero nisl pellentesque tellus, ac scelerisque metus mauris ut quam. Nulla facilisi. Quisque rhoncus dolor et dolor lobortis accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse at nulla ante, at hendrerit mi. Aenean in ipsum massa. Pellentesque semper elit quis mauris ultricies ultrices. Sed sit amet felis tellus. Suspendisse potenti. </p>
      </div>
      <div class="right">
        <h2> Sidebar Menu</h2>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">TemplateInfo</a></li>
          <li><a href="#">Style Demo</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Archives</a></li>
        </ul>
      </div>
      <div class="clr"></div>
    </div>
  </div>
  <div class="FBG">
    <div class="FBG_resize">
      <div class="blok2">
        <h2>Image Gallery</h2>
        <img src="blueprism-images/gallery_1.gif" alt="" width="68" height="68" /> <img src="blueprism-images/gallery_2.gif" alt="" width="68" height="68" /> <img src="blueprism-images/gallery_3.gif" alt="" width="68" height="68" /> <img src="blueprism-images/gallery_4.gif" alt="" width="68" height="68" /> <img src="blueprism-images/gallery_5.gif" alt="" width="68" height="68" /> <img src="blueprism-images/gallery_6.gif" alt="" width="68" height="68" /> <img src="blueprism-images/gallery_7.gif" alt="" width="68" height="68" /> <img src="blueprism-images/gallery_8.gif" alt="" width="68" height="68" />
        <div class="clr"></div>
        <h2>Lorem ipsum </h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus </p>
      </div>
      <div class="blok">
        <h2>About</h2>
        <img src="blueprism-images/gallery_9.gif" alt="" width="68" height="68" />
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br />
          Donec libero. Suspendisse </p>
        <p>tincidunt, orci ac convallis aliquam, lectus turpis varius llorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. <a href="#">Learn more...</a></p>
      </div>
      <div class="blok">
        <h2>Contact</h2>
        <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.</p>
        <img src="blueprism-images/gallery_10.gif" alt="" width="68" height="68" /><img src="blueprism-images/gallery_11.gif" alt="" width="68" height="68" /><img src="blueprism-images/gallery_12.gif" alt="" width="68" height="68" />
        <div class="clr"></div>
        <p>E-mail: <a href="#">support@yoursite.com</a><br />
          Telephone office1: +1 (123) 444-5677<br />
          Telephone office2: +1 (123) 444-5677<br />
          Telephone office3:+1 (123) 444-5677</p>
      </div>
      <div class="clr"></div>
    </div>
  </div>
  <div class="footer">
    <div class="footer_resize">
      <p class="lf">Copyright &copy; 2010 <a href="#">SiteName</a> - All Rights Reserved</p>
      <p class="rf"><a href="http://www.free-css.com/">Free CSS Templates</a> by <a href="http://www.hotwebsitetemplates.net">Hot Website Templates</a></p>
      <div class="clr"></div>
    </div>
    <div class="clr"></div>
  </div>
</div>
<!-- END PAGE SOURCE -->
</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.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