usabilityreport : Design 8 « Templates « HTML / CSS






usabilityreport

   

<!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>UsabilityReport</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
@import url("framework/core.css");
@import url("framework/plugins/helpers.css");
body {
  margin:0;
  background:#b9b9b9 url("usabilityreport-images/bodyBg.jpg") repeat-x;
}
#wrapper {
  background:#b9b9b9 url("usabilityreport-images/wrapperBackground.jpg") repeat-x;
  margin-top:40px;
  padding:14px;
}
#mainArea {
  background-color:#fff;
  border:1px solid #999;
}
#header {
  position:relative;
  padding:20px;
}
#logo {
  margin:0 0 20px;
}
#freeDownload {
  position:absolute;
  top:20px;
  right:20px;
}
#banner .moduletable {
  margin:20px 30px;
  color:#fff;
  width:400px;
}
#banner .moduletable h2 {
  color:#fff;
  font-size:2.2em;
  line-height:1em;
}
#banner #bannerImage {
  position:absolute;
  top:-62px;
  right:0;
}
#nav {
  margin-top:-30px;
}
#nav .moduletable_menu ul li {
  padding:0;
  margin:0;
  float:left;
}
#nav .moduletable_menu ul li a {
  display:block;
  float:left;
  color:#fff;
  text-decoration:none;
  padding:16px 30px 19px 30px;
  text-transform:uppercase;
  font-weight:bold;
}
#contentArea {
  padding:20px;
}
#sidebar {
  float:right;
  width:225px;
}
#sidebar .moduletable_menu ul {
  margin:0;
  list-style:none;
  text-align:right;
}
#sidebar .moduletable_menu ul li#current a {
  border:none;
}
#sidebar .moduletable_menu ul li a {
  display:block;
  text-decoration:none;
  color:#333;
  font-size:1.5em;
  border:1px #eee solid;
  margin:1px 0 1px 12px;
  padding:10px;
}
#sidebar .moduletable_menu ul li#current {
  display:block;
  background:url("usabilityreport-images/sidebarMenuOver.jpg") no-repeat;
}
#sidebar .moduletable_menu ul li#current a {
  background-color:none;
  color:#555;
}
#sidebar .moduletable_menu ul li#current a:hover {
  background:transparent url("usabilityreport-images/sidebarMenuOver.jpg") -12px;
}
#content {
  width:560px;
  color:#555;
}
#content img {
  border:5px solid #ccc;
  float:left;
  margin:0 30px 10px 0;
}
#secondary #nav {
  margin-top:-30px;
}
#secondary #nav .moduletable_menu ul li {
  padding:0;
  margin:0;
  float:left;
}
#secondary #nav .moduletable_menu ul li a {
  display:block;
  float:left;
  color:#fff;
  text-decoration:none;
  padding:16px 30px 19px 30px;
  text-transform:uppercase;
  font-weight:bold;
}
#secondary #content .contentheading, #secondary #content .componentheading, #secondary h2 {
  color:#000;
  font-size:2.5em;
  margin:0;
}
#content ul.blackcheck, #content ul.greencheck, #content ul.orangecheck {
  list-style:none;
}
#content ul.blackcheck li, #content ul.greencheck li, #content ul.orangecheck li {
  margin:0 0 10px 0;
  padding:5px 80px;
}
#content ul.blackcheck li {
  background:url("usabilityreport-images/blackCheck.jpg") no-repeat;
}
#content ul.greencheck li {
  background:url("usabilityreport-images/greenCheck.jpg") no-repeat;
}
#content ul.orangecheck li {
  background:url("usabilityreport-images/orangeCheck.jpg") no-repeat;
}
#content ul.blackcheck li span {
  font-size:1.5em;
  color:#000;
}
#content ul.greencheck li span {
  font-size:1.5em;
  color:#909d79;
}
#content ul.orangecheck li span {
  font-size:1.5em;
  color:#ba3f23;
}
.bubbleInfo {
  position:relative;
  width:130px;
  float:left;
}
.bubbleInfo {
  position:relative;
  width:130px;
  float:left;
}
.popup {
  position:absolute;
  display:none;
  width:110px;
  padding:5px;
  text-align:center;
  line-height:15px;
  z-index:1;
}
.popup p {
  margin:0;
  font-size:11px;
}
.popup a {
  font-style:italic;
}
#sidebar .moduletable {
  padding:15px;
  margin:0 0 20px 0;
  border:1px solid #ccc;
}
#sidebar .moduletable h3 {
  font-weight:bold;
  border-bottom:1px solid #999;
  padding:5px 0;
}
#sidebar .moduletable.green {
  background-color:#ebf1e3;
  border:1px solid #c2cbb2;
}
#sidebar .moduletable.orange {
  background-color:#ddcec8;
  border:1px solid #a78a80;
}
#sidebar .moduletable.blue {
  background-color:#ccdfe7;
  border:1px solid #10303d;
}
#footer, #footer p {
  margin:0;
  padding:0;
  font-size:11px;
}
#footer {
  width:870px;
  margin:0 auto;
}
#footer, #footer a {
  color:#555;
  text-decoration:none;
}
#footer .left {
  float:left;
}
#footer .right {
  float:right;
}


</style>


<link rel="stylesheet" href="css/green.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
<!--[if IE]><link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection" /><![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen, projection" />
<script type="text/javascript" src="js/unitpngfix.js"></script>
<![endif]-->
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/site.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper" class="container">
  <div id="mainArea">
    <div id="header" class="clearfix"> <a href="index.html"><img id="logo" src="usabilityreport-images/logo.jpg" width="420" height="68" alt="" /></a> <a href="#"><img id="freeDownload" src="usabilityreport-images/freedownload.jpg" width="207" height="65" alt="" /></a>
      <div id="pillboxes">
        <div class="bubbleInfo"> <a href="#"><img class="trigger" src="usabilityreport-images/loginPill.jpg" width="127" height="31" alt="" /></a>
          <div class="popup">
            <p>Already a member?  access your account now!</p>
          </div>
        </div>
        <div class="bubbleInfo"> <a href="#"><img class="trigger" src="usabilityreport-images/signupPill.jpg" width="125" height="31" alt="" /></a>
          <div class="popup">
            <p>Not a member yet?  Well get on it and access great SEO resources!</p>
          </div>
        </div>
      </div>
    </div>
    <div id="banner">
      <div class="moduletable">
        <h2>want to know what<br />
          others think of your website?</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Lorem ipsum dolor sit amet, consectetur.</p>
      </div>
      <img id="bannerImage" src="usabilityreport-images/xid.png" width="407" height="247" alt="" /> </div>
    <div id="nav">
      <div class="moduletable_menu">
        <ul>
          <li><a href="#">Member Features</a></li>
          <li><a href="#">Request a Review</a></li>
          <li><a href="styling.html">About the Company</a></li>
          <li><a href="#">Download the Free Report</a></li>
        </ul>
      </div>
    </div>
    <div id="contentArea" class="clearfix">
      <div id="sidebar">
        <div class="moduletable_menu">
          <ul>
            <li><a href="#">Membership Benefits</a></li>
            <li><a href="#">Watch a video</a></li>
            <li id="current"><a href="#">What others think</a></li>
            <li><a href="#">Register</a></li>
            <li><a href="#">FAQs</a></li>
          </ul>
        </div>
      </div>
      <div id="content"> <img class="left" src="usabilityreport-images/bid_image.jpg" width="246" height="161" alt="" />
        <h3 class="contentheading">with flying colors</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Lorem ipsum dolor sit amet, consectetur.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ttetur.</p>
      </div>
    </div>
  </div>
</div>
<div id="footer" class="container">
  <p class="left">Copyright &copy; 2010, Your Company Here, LLC.</p>
  <p class="right"><a href="http://www.free-css.com/">Free CSS Templates</a> by <a href="http://beautyindesign.com/">BeautyInDesign</a></p>
  <div class="clear"></div>
</div>
</body>
</html>

   
    
    
  








Related examples in the same category

1.sprayedstrokes
2.Square
3.squarely
4.st-valentines-day
5.stacko
6.stamp
7.standardissue
8.standardized
9.starburst
10.stardust
11.stargazer
12.stark
13.steppingstone
14.stichy
15.stickybud
16.stickynotes
17.Stock
18.streetclock
19.strict
20.strockes
21.students-site
22.stygian
23.stylevantage1-0
24.stylish
25.stylized
26.subdued
27.subordinate
28.substance
29.substantial
30.superior
31.supplementary
32.surpris
33.surreal
34.sweatbee
35.swift
36.switchr
37.sworm
38.Symisun_01
39.symphonic
40.symphonyofhorror
41.synchronize
42.Synergy
43.systematized
44.tabbed
45.tangular
46.tardy
47.tcm
48.tealzine
49.team_three
50.templatika
51.Tenebrific
52.terje1_winter
53.terrafirma
54.terrafirma2
55.The-Carbon
56.the-dark-one
57.the-island
58.the-mmozine
59.the-music-studio
60.the-new-audi
61.the-synopsis
62.the-themepod
63.the-web-news
64.theacmegroup
65.thechosenone
66.thelatest
67.themanor
68.tinytemplate
69.themissing-piece
70.thermal
71.thesite
72.thetechies
73.thewall
74.the_gig
75.thisistext
76.throughout
77.thunder
78.ticktocklight
79.time
80.Timeless Template
81.timeless
82.timemanager
83.toolkit
84.tooplain
85.topbusiness
86.topgadgets
87.topworks
88.tornpaperdocom
89.totaltouch
90.towers
91.traditionalist
92.transient
93.transition
94.transport
95.trialservices
96.trikea-static
97.trinityinstitute
98.tropical-evening
99.tropical
100.truenature
101.turn-out-mag
102.Turnesol
103.turnitup
104.turrion-development
105.tv-archade
106.twirling
107.twisted
108.Typography
109.ultimateweb
110.unbound-1.0
111.uncomplicated
112.undefined
113.Underground
114.undertaking
115.UnderWraps
116.undiscovered
117.unembellished
118.unilluminated
119.uniq
120.unite
121.universal
122.unknown
123.unlink
124.unnamed
125.unqualified
126.urbanartist
127.variety
128.vectorlover1-0
129.vegetable
130.veggie
131.ventix
132.vertical
133.verticals
134.vertigo
135.VeryGreen
136.VIBE
137.vibrant
138.Village
139.vintage-style
140.violetrays
141.visioninc
142.visions
143.vitruvius
144.vivid
145.Viziora
146.voodoo-dolls
147.voodoodollyv2.0
148.voyage
149.WaiveLive
150.walls
151.wanderer
152.warmblue
153.warped
154.watchthis
155.watercolored-portfolio
156.waterfactory
157.waterfall
158.waterfalls
159.WaterPool
160.we think
161.web-application
162.web-design-studio
163.web-design
164.web-hosting
165.web-shop
166.web2
167.webdesign
168.webdesigninfo
169.webmob
170.websitedesignx
171.webvision
172.Web_Application
173.wellness
174.whatsyoursolution
175.wickedred
176.widecommerce
177.widget
178.widgetlike
179.wildgoose
180.wing-the-air
181.winglobal
182.wiremesh
183.world-of-warcraft
184.xenlog
185.xgallery
186.xhtmldesign
187.xhtmldev_rainbow
188.xhtmldev_RealEstate
189.xodafields0.2
190.ynt
191.yosemite
192.your-blazing-app
193.yourhost
194.yourministry
195.zillanine