webtechnologies : Technology « Templates « HTML / CSS

webtechnologies
   

<!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>Web technologies Company</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
  font-family: verdana, helvetica, arial, sans-serif;
  font-size: 10px;
  text-align: center;
  background: url(webtechnologies-images/page_bg.jpg);
  color: #6f6f6f;
}

html, body, #wrapper, h1, #nav, li, ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

th, td {
  font-size: 11px;
}

img { border: 0; }

#wrapper {
  margin: 16px auto;
  text-align: left;
  width: 750px;
  position: relative;
}

h1, h2, h3 {
  font-size: 11px;
}


h1 {
  margin: 0;
  padding: 0;
}

h2 {
  margin: 0 0 5px 0;
  padding: 0;
}

h3 {
  padding: 4px 0 0 0;
}

p {
  margin: 1em 0;
  padding: 0;
}

.block {
  display: block;
}

.clear {
  clear: both;
  height: 1px;
  padding-top: 0;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1px;
  line-height: 1px;
}

* html .clear {
  margin-top: -5px;
  margin-bottom: -4px;
}

.left {
  float: left;
  margin: 1px 8px 0px 0px;
}

.softright {
  text-align: right;
}

.readmore {
  text-align: right;
}

/* ***** */

html, body, #wrapper {
  height: 100%;
}

body {
  background: #a6b3cb;
  color: #fff;
}

p {
  line-height: 1.4;
}

a {
  color: #fbde3b;
  text-decoration: none;
}

a:hover {
   text-decoration: underline;
}

#wrapper {
  margin: auto;
  width: 787px;
  padding: 0;
  background: url(webtechnologies-images/page_bg.gif) repeat-y;
}

#wrapper-i {
  background: url(webtechnologies-images/page_bg.gif) repeat-y;
  width: 100%;
}

/* header */

#header {
  position: absolute;
  top: 0;   left: 13px;
  width: 766px;
  background: url(webtechnologies-images/menu_bg.gif) repeat-x;
}

#header-cap {
  position: absolute;
  top: 197px;   left: 327px;
  width: 129px; height: 29px;
  background: url(webtechnologies-images/header_2.jpg) no-repeat;
}

#header h1 {
  background: url(webtechnologies-images/header.jpg) no-repeat;
  text-align: right;
  margin: 32px 0 0 0;
}

/* nav */

#nav {
  position: absolute;
  top: 0;   left: 0;
  width: 574px; height: 32px;
  background: url(webtechnologies-images/menu_cap.gif) top right no-repeat;
}

#nav li {
  float: left;
}

#b-nav {
  background: url(webtechnologies-images/b_nav_r.jpg) top right no-repeat;
}

/* body */

#spacer {
  height: 197px;
}

#body {
  background: url(webtechnologies-images/body_bg.jpg) repeat-x;
  margin: 0 8px 0 13px;
  padding: 14px;
  min-height: 200px;
}

#body-i {
  background: url(webtechnologies-images/divider_v.gif) 276px 9% no-repeat;
}

/* left */

#left {
  float: left;
  width: 261px;
}

#bullets {
  padding-top: 15px;
  background: url(webtechnologies-images/box_t.jpg) no-repeat;
}

#bullets ul {
  padding-bottom: 20px;
  background: url(webtechnologies-images/box_b.jpg) bottom left no-repeat;
}

* html #bullets ul {
  width: 100%;
}

* html #bullets img {
  margin-left: -3px;
  marg\in-left: 0px;
  float: left;
}

#bullets img {
  display: block;
}

#left .i {
  margin: 0 25px;
}

/* right */

#right {
  float: right;
  width: 442px;
  margin-top: 15px;
}

#right .i {
  margin: 0 253px 0 27px;
}

#right .j {
  float: right;
  width: 246px;
  margin-top: 0.5em
}

#right .i .left {
  margin: 0;
}

#right .j ul {
  float: right;
  width: 130px;
  display: inline;
  margin-right: 10px;
}

#right .clear {
  padding-top: 7px;
  margin:  0 0 10px 0;
}

ul.bigbullets li {
  background: url(webtechnologies-images/bullet.gif) left no-repeat;
  margin: 0;
  padding: 5px 2px 5px 20px;
}

* html ul.bigbullets li {
  text-indent: -1.5em;
}

/* footer */

#footer-p {
  clear: both;
  height: 24px;
}

#footer    { background: url(webtechnologies-images/footer_w_bg.gif) repeat-x; }
#footer .l { background: url(webtechnologies-images/footer_w_l.gif) top left no-repeat; }
#footer .r { background: url(webtechnologies-images/footer_w_r.gif) top right no-repeat; }

#foot-nav    { background: url(webtechnologies-images/footer_g_bg.gif) repeat-x; }
#foot-nav .l { background: url(webtechnologies-images/footer_g_l.gif) top left no-repeat; }
#foot-nav .r { background: url(webtechnologies-images/footer_g_r.gif) top right no-repeat; }

#footer {
  color: #d96d1e;
  text-align: center;
}

#footer a {
  color: #d96d1e;
  text-decoration: underline;
}

#footer a:hover {
  color: black;
}

#foot-nav {
  position: relative;
  top: -14px;
  width: 43em;
  margin: auto;
  color: #f8fbc8;
}

#foot-nav .r {
  padding: 9px 0 10px 0;
  width: 100%;
}

#foot-nav a {
  color: #f8fbc8;
  text-decoration: none;
}

#foot-nav a:hover {
  color: #f8fbc8;
  text-decoration: underline;
}

#footer p {
  position: relative;
  margin-top: 13px;
  top: -20px;
}

</style>


</head>
<body>
<div id="wrapper">
  <div id="wrapper-i">
    <div id="header">
      <h1><a href="http://www.free-css.com/"><img src="webtechnologies-images/logo.jpg" width="286" height="114" alt="" /></a></h1>
      <ul id="nav">
        <li><a href="http://www.free-css.com/"><img src="webtechnologies-images/menu_1.gif" width="59" height="32" alt="home" /></a></li>
        <li><a href="http://www.free-css.com/"><img src="webtechnologies-images/menu_2.gif" width="69" height="32" alt="support" /></a></li>
        <li><a href="http://www.free-css.com/"><img src="webtechnologies-images/menu_3.gif" width="37" height="32" alt="FAQ" /></a></li>
        <li><a href="http://www.free-css.com/"><img src="webtechnologies-images/menu_4.gif" width="82" height="32" alt="resources" /></a></li>
        <li><a href="http://www.free-css.com/"><img src="webtechnologies-images/menu_5.gif" width="71" height="32" alt="services" /></a></li>
        <li><a href="http://www.free-css.com/"><img src="webtechnologies-images/menu_6.gif" width="73" height="32" alt="partners" /></a></li>
        <li><a href="http://www.free-css.com/"><img src="webtechnologies-images/menu_7.gif" width="89" height="32" alt="contact us" /></a></li>
      </ul>
      <div id="b-nav"> <img src="webtechnologies-images/b_nav_1.jpg" width="59" height="51" alt="b nav 1" /><a href="http://www.free-css.com/"><img src="webtechnologies-images/b_nav_2.jpg" width="61" height="51" alt="home" /></a><a href="http://www.free-css.com/"><img src="webtechnologies-images/b_nav_3.jpg" width="68" height="51" alt="contact" /></a><a href="http://www.free-css.com/"><img src="webtechnologies-images/b_nav_4.jpg" width="59" height="51" alt="search" /></a> </div>
      <!-- end b-nav -->
      <div id="header-cap"></div>
    </div>
    <!-- end header -->
    <div id="spacer"> </div>
    <!-- end spacer -->
    <div id="body">
      <div id="body-i">
        <div id="left">
          <div id="bullets">
            <ul>
              <li><a href="http://www.free-css.com/"><img src="webtechnologies-images/box_1.jpg" width="261" height="22" alt="advanced web technologies" /></a></li>
              <li><a href="http://www.free-css.com/"><img src="webtechnologies-images/box_2.jpg" width="261" height="25" alt="high-end solutions" /></a></li>
              <li><a href="http://www.free-css.com/"><img src="webtechnologies-images/box_3.jpg" width="261" height="25" alt="scalability and reliability" /></a></li>
            </ul>
          </div>
          <!-- end bullets -->
          <h2><img src="webtechnologies-images/title_out_technologies.jpg" width="224" height="50" alt="our technologies" /></h2>
          <div class="i">
            <p><a href="http://www.free-css.com/">Technology</a> at its best Technology at its best Technology at its best Technology at its best Technology at its best </p>
            <img src="webtechnologies-images/photo_1.gif" width="95" height="96" alt="" class="left" />
            <p><a href="http://www.free-css.com/">Technology</a> at its best Technology at its best Technology at its best. Tech at the best it can get, brought to you.</p>
          </div>
          <!-- end .i -->
        </div>
        <!-- end left -->
        <div id="right">
          <h2><img src="webtechnologies-images/title_welcome.jpg" width="162" height="50" alt="welcome to our site" /></h2>
          <div class="j"> <img src="webtechnologies-images/photo_2.gif" width="94" height="71" alt="photo 2" class="left" />
            <ul class="bigbullets">
              <li>HIGH QUALITY</li>
              <li>SUPERB UPTIME</li>
              <li>UNLIMITED SCALABILITY</li>
            </ul>
          </div>
          <!-- end .j -->
          <div class="i">
            <p><a href="http://www.free-css.com/">Company description</a> goes here... Company description goes here... Company description goes here... Company description.</p>
          </div>
          <!-- end .i -->
          <div class="clear"><img src="webtechnologies-images/divider_h.gif" width="442" height="1" alt="" /></div>
          <h2><img src="webtechnologies-images/title_some_words.jpg" width="233" height="50" alt="some words about our company" /></h2>
          <img src="webtechnologies-images/photo_3.gif" width="105" height="75" alt="photo 3" class="left" />
          <p><a href="http://www.free-css.com/">Company description</a> goes here... Company description goes here... Company description goes </p>
          <p>A few words about our company goes here A few rds about our company goes here A few rds about our company goes here A few rds about our </p>
        </div>
        <!-- end right -->
        <div id="footer-p"> </div>
        <!-- end footer-p -->
        <div id="footer">
          <div class="l">
            <div class="r">
              <div id="foot-nav">
                <div class="l">
                  <div class="r"> <a href="http://www.free-css.com/">HOME</a> &nbsp;|&nbsp; <a href="http://www.free-css.com/">SUPPORT</a> &nbsp;|&nbsp; <a href="http://www.free-css.com/">FAQ</a> &nbsp;|&nbsp; <a href="http://www.free-css.com/">RESOURCES</a> &nbsp;|&nbsp; <a href="http://www.free-css.com/">SERVICES</a> &nbsp;|&nbsp; <a href="http://www.free-css.com/">CONTACT US</a> </div>
                </div>
              </div>
              <!-- end foot-nav -->
              <p>Powered by <a href="http://www.freewebsitetemplates.com">Free Website Templates</a></p>
            </div>
          </div>
        </div>
        <!-- end footer -->
      </div>
      <!-- end body-i -->
    </div>
    <!-- end body -->
  </div>
  <!-- end wrapper-i -->
</div>
<!-- end wrapper -->
</body>
</html>
Related examples in the same category

1.	brain_tech
2.	metamorph_tech
3.	freecss_electronics
4.	smartphone
5.	spacetravel
6.	spacetravelisboring
7.	RobotCC
8.	science
9.	software
10.	Sphere
11.	spiderdarker
12.	techjunkie1-0
13.	technicalsupport
14.	techno
15.	technological
16.	web-tech
17.	worldofwarcraft
18.	iPhoneSite
19.	iphone
20.	linuxblog
21.	infotech_growth
22.	innovation