fivestar : Design 2 « Templates « HTML / CSS

fivestar

     

<!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" xml:lang="en" lang="en">
<head>
<title>Fivestar</title>
<meta http-equiv="content-language" content="en-us" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="design" content="Sadhana Ganapathiraju" />
<meta name="author" content="Name of Company Goes Here" />
<meta name="description" content="Description Goes Here" />
<meta name="keywords" content="List of Keywords Goes Here" />
<style type='text/css'>
body 
{
  margin: 0;
  padding: 0;
  color: #333333;
  text-align: center;
  background-color: #c0c0c0;
  font: normal 12px "Trebuchet MS", "Lucida Grande", verdana, georgia, sans-serif;
}

/* Links */

a:link { text-decoration: none; color: #1f62b0; border-bottom: 1px dotted #1f62b0; } 

a:visited { text-decoration: none; color: #6b99b8; border-bottom: 1px dotted #6b99b8; }

a:hover, a:active { color: #99335c; border-bottom-color: #99335c; }

/* Html Elements */

h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 5px 0 10px; padding: 0; line-height: 1.8em; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
{
  font-weight: normal;
  border-bottom-width: 0;
}

h1 { font-size: 28px; }

h2 { font-size: 26px; }

h3 { font-size: 24px; }

h4 { font-size: 20px; }

h5 { font-size: 18px; }

h6 { font-size: 16px; }

ul, ol, blockquote, pre
{
  color: #555555;
  margin: 20px;
  padding: 20px;
  line-height: 1.8em;
}

ul
{
  list-style-type: square;
}

blockquote, pre { background-color: #f9f9f9; border: 1px solid #bbbbbb; }

ins { text-decoration: none; font-weight: bold; color: #555555; }

del { color: #555555; }

abbr, acronym { cursor: help; }

/* Structure */

#container
{
  width: 750px;
  text-align: left;
  margin: 20px auto;
  line-height: 1.6em;
}

#header
{
  padding: 0;
  color: #cfcfcf;
  margin: 0 0 20px;
  text-align: center;
  background-color: #222222;
  border: 1px solid #000000;
}

#wrapper
{
  float: left;
  width: 100%;
  color: #333333;
  margin-bottom: 20px;
  border-left: 1px solid #999999;
  border-right: 1px solid #000000;
  background: #efefef url(fivestar-images/bg.png) top left repeat-y;
}

#content-wrapper
{
  width: 60%;
  float: left;
}

#content
{
  width: 98%;
  float: left;
}

#sidebar-wrapper
{
  width: 40%;
  float: left;
  color: #888888;
  background-color: #333333;
}

#sidebar
{
  float: left;
  width: 98%;
}

#footer
{
  clear: both;
  color: #999999;
  padding: 10px 0;
  text-align: center;
  margin: 20px 0 40px;
  background-color: #222222;
  border: 1px solid #000000;
}

/* Header */

#header h1 { margin: 0; padding: 30px 0 15px; line-height: 1.0em; }

#header h2 { margin: 0; padding: 0 0 30px; text-transform: uppercase; font-size: 13px; color: #888888; line-height: 1.0em; }

/* Content */

#content dl { padding: 0; margin: 20px; }

#content dt { font-size: 24px; color: #99335c; line-height: 1.6em; }

#content dd { padding: 0; margin: 10px 0; }

#content dd.summary 
{ 
  color: #777777; 
  font-size: 10px; 
  margin-bottom: 20px;
  padding-bottom: 11px; 
  border-bottom: 1px solid #aaaaaa; 
}

#content dd.summary a:link, #content dd.summary a:visited { border-bottom-width: 0; }

#content dd p.img { float: left; margin: 0 15px 0 0; }

#content dd p.img img { padding: 8px; border: 1px solid #bbbbbb; background-color: #f9f9f9; }

/* Sidebar */

#sidebar ul { padding: 0; list-style-type: none; margin: 15px 25px 50px; }

#sidebar li { margin: 0; padding: 0; color: #eeeeee; border-bottom: 1px solid #777777; }

#sidebar li.title { margin: 0 5px 10px; text-transform: uppercase; border-bottom-color: #666666; color: #888888; }

#sidebar li a:link, 
#sidebar li a:visited
{
  color: #bbbbbb;
  display: block;
  padding: 10px 5px; 
  border-bottom-width: 0;
}

#sidebar li a:hover,
#sidebar li a:active
{
  color: #ffffff;
  background-color: #555555;
}

/* Footer */

#footer p { margin: 0; padding: 0 10px 10px; }

#footer a:link, #footer a:visited { color: #999999; border-bottom-color: #999999; }

#footer a:hover, #footer a:active { color: #bbbbbb; border-bottom-color: #bbbbbb; }


</style>


<link rel="stylesheet" type="text/css" media="screen,projection" href="screen.css" />
</head>
<body>
<div id="container">
  <div id="header">
    <h1>Fivestar</h1>
    <h2>True or false: 8 + 9 - 12 = 5 </h2>
  </div>
  <div id="wrapper">
    <div id="content-wrapper">
      <div id="content">
        <dl>
          <dt>Last of the Books</dt>
          <dd>
            <p class="img"><img src="fivestar-images/sample_pic.jpg" width="250px" height="171px" alt="Sample Picture Here" /></p>
            <p> Praesent eget sem nec sem pretium mattis. Pellentesque iaculis sapien. In sem quam, molestie ut, sagittis non, 
              auctor a, leo. <a href="#89">In hac habitasse platea dictumst</a>. Nunc augue diam, lacinia non, vulputate sce <a href="#92">lerisque, pretium ut</a>, lectus. </p>
            <p> Fusce justo. <abbr title="Fake non-abbreviation">I'm abbr.</abbr> Lalala. <acronym title="I'm a fake acronym">Acro </acronym>. Donec magna tortor, dictum in, suscipit a, posuere in, erat. Quisque non velit. Nulla quis nunc. </p>
            <p> Vestibulum vel odio eget metus faucibus ullamcorper. Proin sodales urna quis velit. Mauris eros diam, egestas eu, 
              consectetuer nec, semper sit amet, eros. Fusce ac libero. Aliquam sapien. Aliquam erat volutpat. Cras varius orci 
              sed pede. Fusce eleifend tincidunt odio. Aenean magna. Duis sed leo et mi fermentum viverra. Phasellus nisi turpi, 
              adipiscing sed, adipiscing placerat, convallis ac, sem. Aenean at turpis in nisi pulvinar ullamcorper. Ut sed nib. 
              Aenean orci lacus, porta ac, aliquet id, malesuada a, nisl. Curabitur venenatis gravida nisi. Aliquam mattis. Nula 
              sapien dui, consequat a, varius a, laoreet a, metus. In feugiat orci eget sapien. Etiam ultrices, leo vel gravidar 
              sodales, eros eros tristique sem, at vulputate purus nisi vel neque. Donec vel enim. Quisque a arcu in ligula moll
              is placerat. Aliquam imperdiet. </p>
            <blockquote>
              <p> Sed urna. Duis vitae sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. 
                Nunc sit amet nunc. Cras augue urna, posuere eu, porttitor ut, tempor vitae, diam. Vivamus vel velit. Vestibulum in sapi. 
                Maecenas nisl ligula, hendrerit eu, consequat nec, euismod id, neque. Donec mi risus, varius at, condimentum vitae, tinci 
                dunt id, tellus. Nullam magna nisi, consectetuer vel, scelerisque nec, viverra eget, justo. Ut porta. Suspendisse conguer 
                risus in libero dictum eleifend. Curabitur tempor lectus vel pede. Fusce luctus. Ut eu felis. Nulla ligula erat, tempor 
                in, pretium non, elementum non, mauris. Nulla facilisi. Curabitur eu ligula. </p>
            </blockquote>
            <p> <del>Nam hendrerit, dolor ac venenatis venenatis.</del> <ins>Diam urna posuere velit, at imperdiet turpis urna interdum nunc.</ins> </p>
          </dd>
          <dd class="summary"> Posted By: <a href="#00">Fisterkit</a> on Jan 5, 2006 | <a href="#02">Comments(182)</a> | <a href="#03">Trackbacks(113)</a> </dd>
          <dt>What does Lorem Ipsum Mean?</dt>
          <dd>
            <p> Lorem ipsum dolor sit amet, <a href="#51">consectetuer</a> adipiscing elit. Curabitur diam. Nunc et dui ut enim porta fermentum. <a href="#52">Morbi ac odio. </a> Sed justo risus, feugiat id, tincidunt consequat, porttitor eget, lorem. Suspendisse potenti. 
              Nulla sodales pharetra eros. </p>
            <p> Mauris eu lacus. Phasellus dictum sapien elementum est. Aliquam erat volutpat. Vestibulum euismod, mi sed porttitor luctus, 
              metus nisl pharetra velit, id egestas nulla nulla eget dolor. Proin rhoncus rutrum nunc. Nullam tortor ante, aliquet nec. </p>
            <p> Tincidunt vel, sagittis a, lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
              Integer vehicula. Curabitur orci sem, lacinia id, malesuada quis, ultricies eu, lorem. Nam ornare, magna id gravida varius, 
              tellus risus scelerisque lectus, et hendrerit eros diam quis elit. Proin elit. Ut in lorem. </p>
          </dd>
          <dd class="summary"> Posted By: <a href="#00">Ipsum</a> on Jan 10, 2006 | <a href="#02">Comments(82)</a> | <a href="#03">Trackbacks(13)</a> </dd>
        </dl>
      </div>
    </div>
    <div id="sidebar-wrapper">
      <div id="sidebar">
        <ul>
          <li class="title">Odd Man Out</li>
          <li><a href="#10">Duke and Duchess</a></li>
          <li><a href="#11">Marquess and Marchioness</a></li>
          <li><a href="#12">Earl and Countess</a></li>
          <li><a href="#13">Viscount and Viscountess</a></li>
          <li><a href="#14">Baron and Baroness</a></li>
        </ul>
        <ul>
          <li class="title">Category Archives</li>
          <li><a href="#15">100 Greatest Cartoons</a></li>
          <li><a href="#16">Laptops vs. Actors</a></li>
          <li><a href="#17">Internet vs. Television</a></li>
          <li><a href="#18">Characters</a></li>
          <li><a href="#19">.NET Framework</a></li>
          <li><a href="#20">Dead Albums</a></li>
          <li><a href="#21">Antidisestablishmentarianism</a></li>
          <li><a href="#22">2006 Births</a></li>
          <li><a href="#23">Charmed</a></li>
          <li><a href="#24">1324 B.C.E.</a></li>
          <li><a href="#25">Google</a></li>
          <li><a href="#26">MSN</a></li>
          <li><a href="#27">Books</a></li>
          <li><a href="#28">Establishments</a></li>
          <li><a href="#29">Technology &amp; What Not</a></li>
          <li><a href="#30">Processes &amp; Meetings</a></li>
        </ul>
        <ul>
          <li class="title">Monthly Archives</li>
          <li><a href="#31">August 2006</a></li>
          <li><a href="#32">July 2006</a></li>
          <li><a href="#33">June 2006</a></li>
          <li><a href="#34">May 2006</a></li>
          <li><a href="#35">April 2006</a></li>
          <li><a href="#36">March 2006</a></li>
          <li><a href="#37">February 2006</a></li>
          <li><a href="#38">January 2006</a></li>
          <li><a href="#39">December 2005</a></li>
          <li><a href="#40">November 2005</a></li>
          <li><a href="#41">October 2005</a></li>
          <li><a href="#42">September 2005</a></li>
          <li><a href="#43">August 2005</a></li>
          <li><a href="#44">July 2005</a></li>
          <li><a href="#45">June 2005</a></li>
          <li><a href="#46">May 2005</a></li>
          <li><a href="#47">April 2005</a></li>
          <li><a href="#48">March 2005</a></li>
          <li><a href="#48">February 2005</a></li>
          <li><a href="#50">January 2005</a></li>
          <li><a href="#51">December 2005</a></li>
          <li><a href="#52">November 2005</a></li>
          <li><a href="#53">October 2005</a></li>
          <li><a href="#54">September 2005</a></li>
          <li><a href="#55">August 2005</a></li>
          <li><a href="#56">July 2005</a></li>
          <li><a href="#57">June 2005</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div id="footer">
    <p> Copyright &copy; 2003 &ndash; 2006 Fivestar Inc. All rights reserved. </p>
    <p> Design by <a href="http://www.nikhedonia.com/" rel="bookmark" title="SimplyGold">Sadhana Ganapathiraju</a>. 
      Try more <a href="http://showcase.nikhedonia.com/showcase/category/free_templates/" rel="bookmark" title="Other Free Templates">free templates</a> or <a href="http://showcase.nikhedonia.com/showcase/category/commercial_templates/" rel="bookmark" title="Commercial Templates">commercial templates</a>. </p>
    <p> <a href="#51">Legal</a> | <a href="#52">Terms of Service</a> | <a href="#53">Privacy Statement</a> | <a href="http://validator.w3.org/check/referer" title="Valid XHTML 1.0 Strict">Xhtml</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer?warning=no&amp;profile=css2" title="Valid CSS 2.0 Strict">Css</a> </p>
  </div>
</div>
</body>
</html>

Related examples in the same category

1.	metamorph_drop
2.	metamorph_energybolt
3.	metamorph_exit
4.	metamorph_global
5.	metamorph_glowing
6.	metamorph_host
7.	metamorph_icybreeze
8.	metamorph_interiordesign
9.	metamorph_interstate60
10.	metamorph_lotr
11.	metamorph_lyrics_lt
12.	metamorph_melancholy_lt
13.	metamorph_mercuryworld
14.	metamorph_metaform
15.	metamorph_models
16.	metamorph_nuke
17.	metamorph_oldheavens
18.	metamorph_palmbeach
19.	metamorph_strongrey_lt
20.	metamorph_thames
21.	metamorph_transitional
22.	metamorph_tropic
23.	metamorph_truncata
24.	metamorph_tubes
25.	metamorph_tunel
26.	ablaze
27.	aboutfruts
28.	abrasive
29.	abscond
30.	abstraction
31.	acallia-development
32.	accomplishable
33.	actualbiz
34.	adhesive
35.	adios
36.	advantage
37.	aero-solutions
38.	aerolyk
39.	affection
40.	agency
41.	ahoy
42.	al-infolabs
43.	alexx-c
44.	alieninvasion
45.	alpha
46.	altered
47.	altruism
48.	ambiance
49.	amoreira
50.	angryhornet
51.	anibanner01
52.	AnotherSquare
53.	anther
54.	anthropod
55.	Antikoerperchen
56.	antiquity
57.	aphotic
58.	applique
59.	aprilshowers
60.	Arbenting-MinimalistResumeTemplate
61.	expanding-portfolio
62.	experience
63.	expertvision
64.	exploitable
65.	ezine02
66.	familiar
67.	favorite-cakes
68.	featherlight
69.	featuring
70.	femflex1
71.	fernando1
72.	fertilization
73.	Fibre
74.	fibreglass
75.	filaments
76.	findingpeace
77.	firerescuesquad
78.	Flair Template
79.	flair
80.	flan2
81.	flange
82.	flattering
83.	flavour
84.	fleur
85.	flightandfight
86.	fluidity
87.	fluidsolution
88.	flyover-builders
89.	WP-Bliss
90.	website-design
91.	website-traffic