throughout : Design 8 « Templates « HTML / CSS






throughout

   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Name       : Throughout 
Description: A two-column, fixed-width design for 1024x768 screen resolutions.
Version    : 1.0
Released   : 20100423

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Throughout  by Free CSS Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript" src="throughout-jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="throughout-jquery/jquery.slidertron-0.1.js"></script>
<style type='text/css'>

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
  margin: 0px;
  padding: 0;
  background: #4C9BCD url(images/img01.jpg) repeat-x left top;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #919191;
}

h1, h2, h3 {
  margin: 0;
  text-transform: uppercase;
  font-weight: normal;
  color: #549900;
}

h1 { font-size: 44px; }

h2 { font-size: 18px; }

h3 { }

p, ul, ol {
  margin-top: 0;
  line-height: 240%;
  text-align: justify;
}

ul, ol { }

blockquote { }

a { color: #4999CB; }

a:hover { text-decoration: none; }

a img {
  border: none;
}

img.left {
  float: left;
  margin: 7px 30px 0 0;
}

img.right {
  float: right;
  margin: 7px 0 0 30px;
}

hr { display: none; }

.list1 {
}

.list1 li {
  float: left;
  line-height: normal;
}

.list1 li img {
  margin: 0 30px 30px 0;
}

.list1 li.alt img {
  margin-right: 0;
}

#wrapper {
}

/* Header */

#header {
  width: 940px;
  height: 68px;
  margin: 0 auto;
  background: url(images/img02.jpg) no-repeat left top;
}

/* Menu */

#menu {
  float: left;
  width: 500px;
  height: 68px;
}

#menu ul {
  margin: 0;
  padding: 15px 0px 0px 5px;
  list-style: none;
  line-height: normal;
}

#menu li {
  display: block;
  float: left;
}

#menu a {
  display: block;
  float: left;
  height: 32px;
  padding: 10px 20px 0px 20px;
  letter-spacing: -1px;
  text-decoration: none;
  text-align: center;
  text-transform: lowercase;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: normal;
  color: #FFFFFF;
}

#menu a:hover { 
  text-decoration: none; 
}

#menu .current_page_item a {
}

#menu .first {
}
/* Search */

#search {
  float: right;
  padding: 10px 10px 0px 0px;
}

#search form {
  float: right;
  margin: 0;
  padding: 4px 0px 0 0;
}

#search fieldset {
  margin: 0;
  padding: 0;
  border: none;
}

#search input {
  float: left;
  font: 12px Arial, Helvetica, sans-serif;
}

#search-text {
  width: 170px;
  margin-top: 8px;
  margin-left: 60px;
  margin-right: 40px;
  padding: 6px 0 0 7px;
  border: none;
  background: none;
  font-family: Arial, Helvetica, sans-serif;
  color: #838383;
}

#search-submit {
  width: 82px;
  height: 28px;
  margin-left: 10px;
  padding: 0px 5px;
  background: url(images/img03.jpg) no-repeat left top;
  border: none;
  text-indent: -9999px;
  color: #FFFFFF;
}

/* Page */

#page {
  width: 880px;
  margin: 0px auto;
  padding: 40px 30px 0px 30px;
  background: #222222;
}

#page-bgtop {
}


/** LOGO */

#logo {
  width: 920px;
  height: 45px;
  margin: 0 auto;
  padding-top: 5px;
  padding-left: 20px;
}

#logo h1, #logo p {
  float: left;
  margin: 0px;
  line-height: normal;
  text-transform: lowercase;
  font-weight: normal;
  color: #FFFFFF;
}

#logo p {
  padding: 13px 0px 0px 5px;
  text-transform: lowercase;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 13px;
  color: #FFFFFF;
}

#logo h1 {
  letter-spacing: -1px;
  font-size: 30px;
}

#logo a {
  text-decoration: none;
  color: #FFFFFF;
}

#banner {
  padding-bottom: 20px;
}

/* Content */

#content {
  float: left;
  width: 600px;
}

/* Post */

.post {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px dashed #1D1D1D;
  background: #1E1E1E;
}

.post .title {
  padding: 4px 20px 0px 20px;
  height: 44px;
  background: #161616;
}

.post .title a {
  text-decoration: none;
  text-transform: capitalize;
  font-size: 30px;
  color: #4999CB;
}

.post .date {
  display: inline-block;
  margin: 0px;
  padding: 0px 10px;
  color: #FFFFFF;
}

.post .meta {
  margin-left: 2px;
  padding: 10px 30px 0px 10px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 10px;
  color: #66665E;
}

.post .meta span {
  margin: 0px;
}

.post .meta a {
  padding: 8px 10px 5px 10px;
  text-decoration: none;
  color: #FFFFFF;
}

.post .entry {
  padding: 30px 20px 20px 20px;
}

.post .links {
  display: block;
  width: 120px;
  height: 25px;
  margin: 0px;
  padding: 10px 0px 0px 20px;
  background: #161616 url(images/img10.jpg) no-repeat right top;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-decoration: none;
  font-weight: bold;
  color: #FFFFFF;
}

.post .comments {
  display: block;
  width: 120px;
  height: 18px;
  margin: 0px; 
  padding: 3px 0px 0px 40px;
  background: #90BF35;
  border: 1px dashed #1D1D1D;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-decoration: none;
  font-weight: bold;
  color: #FFFFFF;
}

/* Sidebar */

#sidebar {
  float: right;
  width: 240px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

#sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: normal;
}

#sidebar li {
  margin-bottom: 30px;
  padding: 0 0 10px 0px;
  background: #1E1E1E;
}

#sidebar li ul {
  margin: 0px 0px;
}

#sidebar li li {
  margin: 0px;
  padding: 8px 0px 8px 0px;
  border-bottom: 1px solid #222222;
}

#sidebar li li a {
  padding: 0px 20px;
  font-weight: normal;
}

#sidebar li li a:hover {
  color: #666666;
}

#sidebar p {
  margin: 0;
  padding: 0px 14px;
}

#sidebar h2 {
  height: 30px;
  margin: 0 0 10px 0px;
  padding: 6px 20px 2px 20px;
  background: #161616;
  text-transform: capitalize;
  font-size: 18px;
  font-weight: normal;
  color: #4999CB;
}


#sidebar p {
  line-height: 200%;
}

#sidebar a {
  text-align: left;
  text-decoration: none;
  font-weight: bold;
  color: #666666;
}

/* Calendar */

#calendar {
}

#calendar caption {
  padding-bottom: 5px;
  font-weight: bold;
}

#calendar table {
  width: 100%;
  border-collapse: collapse;
  border-bottom: 1px solid #24130F;
  border-left: 1px solid #24130F;
  border-right: 1px solid #24130F;
}

#calendar thead th {
  padding: 5px 0;
  text-align: center;
  border-top: 1px solid #24130F;
  border-left: 1px solid #24130F;
  background: #24130F;
}

#calendar tbody td {
  padding: 5px 0;
  text-align: center;
  border-top: 1px solid #24130F;
  border-left: 1px solid #24130F;
  border-bottom: 1px solid #24130F;
}

#calendar tfoot td {
  padding: 5px;
  border-left: 1px solid #24130F;
  border-bottom: 1px solid #24130F;
}

#calendar tfoot #next {
  border-top: 1px solid #24130F;
  text-align: right;
}

#calendar tfoot #prev {
  border-top: 1px solid #24130F;
}

#calendar .pad {
  border-bottom: 1px solid #24130F;
}

#calendar #today {
  background: #24130F;
}

/* Footer */

#footer {
  width: 940px;
  height: 120px;
  margin: 0 auto;
  padding: 0;
  background: url(images/img09.jpg) no-repeat left top;
}

#footer p {
  margin: 0;
  padding: 30px 0px 0px 30px;
  text-align: center;
  text-transform: uppercase;
  line-height: normal;
  font-size: 10px;
}

#footer a {
}

</style>


<style type="text/css">
@import "slidertron.css";
</style>
</head>
<body>
<!-- end #header-wrapper -->
<div id="logo">
  <h1><a href="#">Throughout </a></h1>
  <p><em> template design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a></em></p>
</div>
<div id="header">
  <div id="menu">
    <ul>
      <li><a href="#" class="first">Homepage</a></li>
      <li class="current_page_item"><a href="#">Blog</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
  <!-- end #menu -->
  <div id="search">
    <form method="get" action="">
      <fieldset>
        <input type="text" name="s" id="search-text" size="15" />
      </fieldset>
    </form>
  </div>
  <!-- end #search -->
</div>
<!-- end #header -->
<hr />
<!-- end #logo -->
<div id="slideshow">
  <!-- start -->
  <div id="foobar">
    <div id="col1"><a href="#" class="previous">&nbsp;</a></div>
    <div id="col2">
      <div class="viewer">
        <div class="reel">
          <div class="slide"><img src="images/img04.jpg" width="726" height="335" alt="" /> <span>Lorem Ipsum Dolor Sit Amet.</span> </div>
          <div class="slide"><img src="images/img07.jpg" width="726" height="335" alt="" /> <span>Mauris vitae nisl nec metus placerat consectetuer.</span> </div>
          <div class="slide"><img src="images/img08.jpg" width="726" height="335" alt="" /> <span>Nam bibendum dadn nulla tortor elementum ipsum</span> </div>
        </div>
      </div>
    </div>
    <div id="col3"><a href="#" class="next">&nbsp;</a></div>
  </div>
  <script type="text/javascript">

            $('#foobar').slidertron({
              viewerSelector:      '.viewer',
              reelSelector:      '.viewer .reel',
              slidesSelector:      '.viewer .reel .slide',
              navPreviousSelector:  '.previous',
              navNextSelector:    '.next',
              navFirstSelector:    '.first',
              navLastSelector:    '.last'
            });
            
          </script>
  <!-- end -->
</div>
<div id="page">
  <div id="page-bgtop">
    <div id="content">
      <div class="post">
        <p class="meta"><span class="date">Sunday, April 26, 2009</span> 7:27 AM Posted by <a href="#">Someone</a></p>
        <h2 class="title"><a href="#">Welcome to Throughout </a></h2>
        <div class="entry">
          <p>This is <strong>Throughout </strong>, a free, fully standards-compliant CSS template designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.  The slideshow uses photos from <a href="http://www.pdphoto.org">PDPhoto.org</a> and is powered by Slidertron (a jQuery plugin by <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a>). This free template is released under a <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attributions</a> license, so you?re pretty much free to do whatever you want with it  (even use it commercially) provided you keep the links in the footer  intact. Aside from that, have fun with it :)        </p>
        </div>
        <div><a href="#" class="links">View Full Story</a></div>
      </div>
      <div class="post">
        <p class="meta"><span class="date">Sunday, April 26, 2009</span> 7:27 AM Posted by <a href="#">Someone</a></p>
        <h2 class="title"><a href="#">Lorem ipsum sed aliquam</a></h2>
        <div class="entry">
          <p><img src="images/img11.jpg" width="560" height="270" alt="" />Donec ipsum. Proin imperdiet est. Phasellus <a href="#">dapibus semper urna</a>. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. Etiam non felis.</p>
        </div>
        <div><a href="#" class="links">View Full Story</a></div>
      </div>
    </div>
    <!-- end #content -->
    <div id="sidebar">
      <ul>
        <li>
          <h2>Aliquam tempus</h2>
          <p>Mauris vitae nisl nec metus placerat perdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in consectetuer hendrerit, volutpat.</p>
        </li>
        <li>
          <h2>Pellenteque ornare </h2>
          <ul>
            <li><a href="#">Nec metus sed donec</a></li>
            <li><a href="#">Magna lacus bibendum mauris</a></li>
            <li><a href="#">Velit semper nisi molestie</a></li>
            <li><a href="#">Eget tempor eget nonummy</a></li>
            <li><a href="#">Nec metus sed donec</a></li>
            <li><a href="#">Velit semper nisi molestie</a></li>
            <li><a href="#">Eget tempor eget nonummy</a></li>
            <li><a href="#">Nec metus sed donec</a></li>
          </ul>
        </li>
        <li>
          <h2>Turpis nulla</h2>
          <ul>
            <li><a href="#">Nec metus sed donec</a></li>
            <li><a href="#">Magna lacus bibendum mauris</a></li>
            <li><a href="#">Velit semper nisi molestie</a></li>
            <li><a href="#">Eget tempor eget nonummy</a></li>
            <li><a href="#">Nec metus sed donec</a></li>
            <li><a href="#">Nec metus sed donec</a></li>
            <li><a href="#">Magna lacus bibendum mauris</a></li>
            <li><a href="#">Velit semper nisi molestie</a></li>
            <li><a href="#">Eget tempor eget nonummy</a></li>
            <li><a href="#">Nec metus sed donec</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- end #sidebar -->
    <div style="clear: both;">&nbsp;</div>
  </div>
  <!-- end #page -->
</div>
<div id="footer">
  <p>Copyright (c) 2008 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
<!-- end #footer -->
</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.thunder
77.ticktocklight
78.time
79.Timeless Template
80.timeless
81.timemanager
82.toolkit
83.tooplain
84.topbusiness
85.topgadgets
86.topworks
87.tornpaperdocom
88.totaltouch
89.towers
90.traditionalist
91.transient
92.transition
93.transport
94.trialservices
95.trikea-static
96.trinityinstitute
97.tropical-evening
98.tropical
99.truenature
100.turn-out-mag
101.Turnesol
102.turnitup
103.turrion-development
104.tv-archade
105.twirling
106.twisted
107.Typography
108.ultimateweb
109.unbound-1.0
110.uncomplicated
111.undefined
112.Underground
113.undertaking
114.UnderWraps
115.undiscovered
116.unembellished
117.unilluminated
118.uniq
119.unite
120.universal
121.unknown
122.unlink
123.unnamed
124.unqualified
125.urbanartist
126.usabilityreport
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