Sphere : Technology « Templates « HTML / CSS

Sphere
  

<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>&amp;bull; Sphere</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type='text/css'>
body {
  margin: 0;
  padding: 0;
  background: #FFFFFF;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #2E2E2E;
}
/* <H> Tag Settings */
h1, h2, h3 {
  font-weight: normal;
  color: #204359;
}

h1 {font-size: 45px;}
h2 {font-size: 18px;}
h3 {font-size: 14px;}

#main_content h2 {
  color: #204359;
  text-transform: capitalize;
  font-weight: normal;
  padding: 0 0 0 0;
}

#rightbar h2 {
  color: #204359;
  text-transform: capitalize;
  font-weight: normal;
  padding: 0 0 0 16px;
}

/* Text (<ul> <ol>) Styling */
ul, ol {
  line-height: 2.5em;
  text-align: justify;
}

/* Text (<p>) Styling */
p {
  line-height: 2.5em;
  text-align: justify;
  margin: 0 0 20px 0;
}

/* Page */
#page_content {
  width: 940px;
  margin: 0 auto;
  padding: 40px 0px 0px 0px;
}
#main_content {
  float: left;
  width: 600px;
}

/* Paragraph */
#paragraph {
  margin: 0 0 40px 0;
}
#text {
  margin: 0px 40px 0 0;
}



/* Link Styling */
a:link, a:visited {  color: #204359; text-decoration: none; }
a:active, a:hover { color: #204359; text-decoration: underline; }

/* Page Background Images */
#middleimage {
  background-image:url(Sphere-images/middle.jpg);
    background-repeat:repeat-y;
    background-position:center top;

}
#topimage {
  background-image:url(Sphere-images/top.jpg);
    background-repeat:no-repeat;
    background-position:center top;
}
#footerimage {
  height: 150px;
    background-image:url(Sphere-images/bottom.jpg);
    background-repeat:no-repeat;
    background-position:center top;
}

/* Header */
#header-wrapper {
}
#header {
  width: 940px;
  height: 150px;
  margin: 0 auto;
}

/* Menu */
#menu {
  float: right;
  width: 408px;
  padding: 60px 0 0 0;
}
.menubg {
    background-image:  url(Sphere-images/button.png);
    background-repeat: no-repeat;
    float: left;
    height: 100px;
    width: 100px;
    margin: 0 1px 0 1px;
}
#button1text {
    position: relative;
    height: auto;
    width: auto;
    left: 30px;
    top: 42px;
}
#button1text a {
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  color: #2E2E2E;
}
#button2text {
    position: relative;
    height: auto;
    width: auto;
    left: 21px;
    top: 42px;
}
#button2text a {
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  color: #2E2E2E;
}
#button3text {
    position: relative;
    height: auto;
    width: auto;
    left: 35px;
    top: 42px;
}
#button3text a {
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  color: #2E2E2E;
}
#button4text {
    position: relative;
    height: auto;
    width: auto;
    left: 13px;
    top: 42px;
}
#button4text a {
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  color: #2E2E2E;
}

/* Logo */
#logo {
  float: left;
  width: 532px;
  height: 100px;
  margin: 0 auto;
  padding: 30px 0 20px 0;
}
#logo h1, #logo p {
  margin: 0px;
  line-height: normal;
  font-weight: normal;
  color: #204359;
}
#logo p {
  font-size: 12px;
  color: #808080;
}
#logo h1 {
  padding: 10px 0 0 0;
  font-size: 40px;
}
#logo a {
  text-decoration: none;
  color: #808080;
}
#logo h1 a {
  text-decoration: none;
  color: #808080;
}

/* Rightbar */
#rightbar {
  float: right;
  width: 280px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;  
}
#rightbar ul {
  margin: 0;
  padding: 0 0 0 30px;
  list-style: square;
  line-height: normal;
}
#rightbar li {
  margin: 0 0 30px 0;
  padding: 0 0 10px 0px;
}

#rightbar li {
  margin: 0;
  padding: 10px 0px;
}
#rightbar li a {
  padding: 0px 0px 0px 0px;
  font-weight: normal;
  color: #A0A0A0;
}
#rightbar li a:hover { text-decoration: underline; }

#rightbar p {
  padding: 0 0 0 15px;
  line-height: 2.5em;
}
#rightbar a {
  text-align: left;
  text-decoration: none;
  font-weight: bold;
}


/* Footer */
#footer {
  width: 100%;
  height: 100px;
  margin: 0 auto;
  padding: 0;
  background: url(Sphere-images/img02.gif) repeat-x left top;
}
#footer p {
  margin: 0;
  padding: 75px 0 0 0;
  text-align: center;
  line-height: normal;
  text-transform: uppercase;
  font-size: 10px;
  color: #FFFFFF;
}
#footer a {
  color: #FFFFFF;
}
.cleaner {
  clear: both;
  height: 0;
  margin: 0;
  padding: 0;
}

</style>


<link rel="shortcut icon" href="Sphere-images/favicon.ico" />
</head>
<body>
<div id="middleimage">
  <div id="topimage">
    <div id="header">
      <div id="logo">
        <h1><a href="#">Sphere</a></h1>
        <p>A W3C Valid CSS/XHTML Template By High Impact <a href="http://www.highimpact-seo.co.uk/">SEO Services</a></p>
      </div>
      <!-- end of logo area-->
      <div id="menu">
        <div class="menubg"><div id="button1text"><a href="http://www.highimpact-seo.co.uk/">Home</a></div></div>
        <div class="menubg"><div id="button2text"><a href="#">About Us</a></div></div>
        <div class="menubg"><div id="button3text"><a href="#">Blog</a></div></div>
        <div class="menubg"><div id="button4text"><a href="#">Contact Us</a></div></div>
        </div>
      </div>
    <!-- end of header -->
    <div id="page_content">
      <div id="main_content">
        <div class="paragraph">
          <h2>Welcome to Sphere</h2>
          <div class="text">
            <p>
              This is a free W3C Valid XHTML/CSS template provided by High Impact <a href="http://www.highimpact-seo.co.uk/">SEO Services</a>. 
              Sphere is released on a creative commons license and can be freely used for business or personal use. 
                    You may redistribute and modify this template, although the authors link in the footer section must remain intact and unaltered.
              </p>
              <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus, diam sed tincidunt mattis, 
              ipsum urna pharetra lacus, ut aliquam urna magna eu turpis. Nunc orci risus, laoreet nec pulvinar ut, 
              egestas at leo. Duis tempor massa condimentum odio eleifend congue. Fusce ut magna at elit pretium euismod. 
              Fusce aliquet suscipit turpis vel tristique. Vestibulum nec elit ut nibh placerat lacinia. Vivamus commodo 
              vestibulum bibendum. In hac habitasse platea dictumst. Phasellus odio augue, sagittis nec hendrerit a, 
              hendrerit ac ipsum. Morbi sit amet nisi porta lacus pulvinar pretium at in ipsum.
              </p>
                        <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus, diam sed tincidunt mattis, 
              ipsum urna pharetra lacus, ut aliquam urna magna eu turpis. Nunc orci risus, laoreet nec pulvinar ut, 
              egestas at leo. Duis tempor massa condimentum odio eleifend congue. Fusce ut magna at elit pretium euismod. 
              Fusce aliquet suscipit turpis vel tristique. Vestibulum nec elit ut nibh placerat lacinia. Vivamus commodo 
              vestibulum bibendum. In hac habitasse platea dictumst. Phasellus odio augue, sagittis nec hendrerit a, 
              hendrerit ac ipsum. Morbi sit amet nisi porta lacus pulvinar pretium at in ipsum.
                        </p>
          </div>
        </div>
        <div class="paragraph">
          <h2>Latest News</h2>
          <div class="text">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus, diam sed tincidunt mattis, 
              ipsum urna pharetra lacus, ut aliquam urna magna eu turpis. Nunc orci risus, laoreet nec pulvinar ut, 
              egestas at leo. Duis tempor massa condimentum odio eleifend congue. Fusce ut magna at elit pretium euismod. 
              Fusce aliquet suscipit turpis vel tristique. Vestibulum nec elit ut nibh placerat lacinia. Vivamus commodo 
              vestibulum bibendum. In hac habitasse platea dictumst. Phasellus odio augue, sagittis nec hendrerit a, 
              hendrerit ac ipsum. Morbi sit amet nisi porta lacus pulvinar pretium at in ipsum.
            </p>
          </div>
        </div>
      </div>
      <!-- end of content -->
      <div id="rightbar">
      <h2>About Our Website</h2>
            
            <p>
              Sphere is a W3C valid XHTML/CSS Template which was created with business users in mind. Featuring clean lines and a smart layout, the template is purposefully nondescript, this means it can be used for virtually any commercial application.
            </p>
          
      <h2>Categories</h2>
        
            <ul>
              <li><a href="http://www.property-shack.co.uk/">Houses In Yorkshire</a></li>
              <li><a href="http://www.property-shack.co.uk/">Property In Yorkshire</a></li>
              <li><a href="http://www.oldroydintec.com/Vibratory-Screens.htm">Vibratory Screens</a></li>
              <li><a href="http://www.oldroydintec.com/Chemical-Processing.htm">Chemical Tanks</a></li>              
              <li><a href="http://www.homefarmoak.co.uk/available-now.html">Oak Coffee Tables</a></li>
              <li><a href="http://www.confettiheaven.co.uk/Scripts/default.asp">Wedding Confetti</a></li>
              <li><a href="http://www.fixitnerds.com/">Computer Repair</a></li>
              <li><a href="http://www.safety-rec.co.uk/index.php?option=com_content&amp;view=article&amp;id=67&amp;Itemid=80">Driver CPC</a></li>
            </ul>

       <h2>Related Sources</h2>    

            <ul>
              <li><a href="http://www.safety-rec.co.uk/index.php?option=com_content&amp;view=article&amp;id=54&amp;Itemid=65">IOSH managing safely</a></li>
              <li><a href="http://shirt4u.co.uk/">Dry Cleaning In West End</a></li>
              <li><a href="http://shirt4u.co.uk/">Dry Cleaning Chelsea</a></li>
              <li><a href="http://www.furnishyourhome.co.uk/cats.php?cat=4&amp;subCat=15">Bedroom Furniture</a></li>
              <li><a href="http://www.furnishyourhome.co.uk/">Buy Furniture</a></li>
              <li><a href="http://www.furnishyourhome.co.uk/cats.php?cat=5&amp;subCat=1">Garden Furniture</a></li>
              <li><a href="http://www.furnishyourhome.co.uk/cats.php?cat=3&amp;subCat=4">Dining Furniture</a></li>
              <li><a href="http://www.furnishyourhome.co.uk/cats.php?cat=1&amp;subCat=5">Solid Oak Furniture</a></li>
              <li><a href="http://www.highimpact-seo.co.uk/Results.php">Our Results</a></li>
              <li><a href="http://www.highimpact-seo.co.uk/links.html">Resources</a></li>
            </ul>
      </div>
      <!-- end of sidebar -->
      <div class="cleaner"></div>
    </div>
    <!-- end of page -->
  </div>
</div>
<div id="footerimage">
  <div id="footer">
    <p>Copyright &amp;copy; 2010 YourCompany Name. Design by High Impact <a href="http://www.highimpact-seo.co.uk/">SEO Services</a>.</p>
  </div>
</div>
<!-- end of footer -->
</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.	spiderdarker
11.	techjunkie1-0
12.	technicalsupport
13.	techno
14.	technological
15.	web-tech
16.	webtechnologies
17.	worldofwarcraft
18.	iPhoneSite
19.	iphone
20.	linuxblog
21.	infotech_growth
22.	innovation