boxedtype : Design 3 « Templates « HTML / CSS






boxedtype

     

<!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>
<title>BoxedType</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<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: 0;
  padding: 0;
  background: #FFFFFF;
  font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #666666;
}

h1, h2, h3, h4, h5, h6, form {
  margin: 0;
  padding: 0;
}

h1, h2, h3 {
}

h4, h5, h6 {
}

p, ul, ol, blockquote {
  margin-top: 0;
}

a {
  color: #268ED4;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  border: none;
}

/* Header */

#header {
  height: 40px;
  background: #5A5A5A url(boxedtype-images/img01.gif) repeat-x;
}

#header h1 {
  width: 760px;
  margin: 0 auto;
  padding: 12px 0 0 0;
  font-size: 1em;
}

#header h2 {
  width: 760px;
  margin: -18px auto 0 auto;
  text-align: right;
  font-size: 1em;
}

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

/* Pages */

#pages {
  height: 110px;
  padding-top: 10px;
  background: url(boxedtype-images/img02.gif) repeat-x;
}

#pages h2 {
  display: none;
}

#pages ul {
  display: block;
  width: 760px;
  height: 100px;
  margin: 0 auto;
  padding: 0;
}

#pages li {
  display: inline;
}

#pages a {
  display: block;
  float: left;
  width: 152px;
  height: 75px;
  padding: 35px 0 0 0;
  text-align: center;
  text-decoration: none;
  text-transform: lowercase;
  letter-spacing: -1px;
  font-size: 1.6em;
  font-weight: normal;
  color: #333333;
}

#pages a:hover {
  color: #000000;
}

#page1 { background: #E5FAA1 url(boxedtype-images/img03.gif) no-repeat; }
#page2 { background: #97F0E6 url(boxedtype-images/img04.gif) no-repeat; }
#page3 { background: #F3B6CE url(boxedtype-images/img05.gif) no-repeat; }
#page4 { background: #FADDA1 url(boxedtype-images/img06.gif) no-repeat; }
#page5 { background: #C9CDFF url(boxedtype-images/img07.gif) no-repeat; }

#page1:hover, #pages .active #page1 { background-image: url(boxedtype-images/img08.gif); }
#page2:hover, #pages .active #page2 { background-image: url(boxedtype-images/img09.gif); }
#page3:hover, #pages .active #page3 { background-image: url(boxedtype-images/img10.gif); }
#page4:hover, #pages .active #page4 { background-image: url(boxedtype-images/img11.gif); }
#page5:hover, #pages .active #page5 { background-image: url(boxedtype-images/img12.gif); }

/* Content */

#content {
  width: 760px;
  margin: 0 auto;
  padding: 20px 0 0 0;
}

/* Latest Post Box */

#latest-post {
  float: left;
  width: 400px;
}

#latest-post .title {
  letter-spacing: -1px;
  font-size: 2.2em;
}

#latest-post .posted {
  margin-bottom: 2em;
  font-size: .8em;
  font-weight: normal;
}

#latest-post .image {
  float: left;
  margin: .3em 1em 0 0;
}

#latest-post p, #latest-post blockquote, #latest-post ul, #latest-post ol {
  line-height: 155%;
}

/* Recent Posts Box */

#recent-posts {
  float: right;
  width: 320px;
}

#recent-posts h3 {
  width: 310px;
  height: 32px;
  padding: 12px 0 0 10px;
  background: #5A5A5A url(boxedtype-images/img13.gif);
  font-size: 1em;
  color: #FFFFFF;
}

#recent-posts ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#recent-posts li {
  padding: 5px 10px;
  border-bottom: 1px solid #5A5A5A;
}

#recent-posts li:hover {
  background: #EFEFEF;
}

/* Column One */

#colOne {
  padding-bottom: 20px;
}

/* Column Two */

#colTwo {
  padding: 20px;
  background: url(boxedtype-images/img02.gif) repeat-x;
}

#colTwo ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#colTwo li, #colTwo form {
  padding: 10px;
}

#colTwo li {
  display: block;
  float: left;
  width: 220px;
}

#colTwo li ul {
}

#colTwo li li {
  display: list-item;
  float: none;
  padding: 0 0 0 10px;
}

#colTwo h2 {
  margin: 0 0 .5em 0;
  padding: 0 0 0 10px;
  background: url(boxedtype-images/img15.gif) no-repeat left center;
  font-size: 1em;
}

/* Footer */

#footer {
  width: 720px;
  height: 100px;
  margin: 0 auto;
  padding: 20px;
  background: url(boxedtype-images/img02.gif) repeat-x;
}

#footer p {
  text-align: center;
  font-size: x-small;
}

</style>


</head>
<body>
<div id="header">
  <h1><a href="http://www.free-css.com/">BoxedType</a></h1>
  <h2><a href="http://www.free-css.com/">Free CSS Templates</a></h2>
</div>
<div id="pages">
  <h2>Pages</h2>
  <ul>
    <li class="active"><a id="page1" href="http://www.free-css.com/">Home</a></li>
    <li><a id="page2" href="http://www.free-css.com/">My Photos</a></li>
    <li><a id="page3" href="http://www.free-css.com/">My Favorites</a></li>
    <li><a id="page4" href="http://www.free-css.com/">About Me</a></li>
    <li><a id="page5" href="http://www.free-css.com/">Contact Me</a></li>
  </ul>
</div>
<div id="content">
  <div id="colOne">
    <div id="latest-post">
      <h2 class="title"><a href="http://www.free-css.com/">Welcome to BoxedType!</a></h2>
      <h3 class="posted">Posted on February 1st, 2007 by <a href="http://www.free-css.com/">Author</a></h3>
      <div class="story"> <img src="boxedtype-images/img14.jpg" alt="" width="180" height="135" class="image" />
        <p><em><strong>BoxedType</strong></em> is a free template from <strong>Free CSS Templates</strong> released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The  photos are from PDPhoto.org. You're free to use it for both commercial or personal use. I only ask that you link back to my site in some way. Enjoy :)</p>
        <p>Etiam eu nibh. Quisque condimentum varius velit. Proin interdum erat  quis sem. Pellentesque habitant morbi tristique senectus et netus et  malesuada fames ac turpis egestas. Vivamus in odio.</p>
      </div>
    </div>
    <div id="recent-posts">
      <h3 class="title">Recent Posts</h3>
      <ul>
        <li><strong><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a></strong><br />
          <small>Filed under <a href="http://www.free-css.com/" class="category">Uncategorized</a> | <a href="http://www.free-css.com/" class="comment">1 Comment &raquo;</a></small></li>
        <li><strong><a href="http://www.free-css.com/">Cras sagittis est laoreet odio</a></strong><br />
          <small>Filed under <a href="http://www.free-css.com/" class="category">Uncategorized</a> | <a href="http://www.free-css.com/" class="comment">1 Comment &raquo;</a></small></li>
        <li><strong><a href="http://www.free-css.com/">Sed pulvinar ornare urna</a></strong><br />
          <small>Filed under <a href="http://www.free-css.com/" class="category">Uncategorized</a> | <a href="http://www.free-css.com/" class="comment">1 Comment &raquo;</a></small></li>
        <li><strong><a href="http://www.free-css.com/">Quisque in dolor non erat</a></strong><br />
          <small>Filed under <a href="http://www.free-css.com/" class="category">Uncategorized</a> | <a href="http://www.free-css.com/" class="comment">1 Comment &raquo;</a></small></li>
        <li><strong><a href="http://www.free-css.com/">Fusce lobortis dui molestie eros</a></strong><br />
          <small>Filed under <a href="http://www.free-css.com/" class="category">Uncategorized</a> | <a href="http://www.free-css.com/" class="comment">1 Comment &raquo;</a></small></li>
        <li><strong><a href="http://www.free-css.com/">Maecenas vel leo nec dui pulvinar</a></strong><br />
          <small>Filed under <a href="http://www.free-css.com/" class="category">Uncategorized</a> | <a href="http://www.free-css.com/" class="comment">1 Comment &raquo;</a></small></li>
      </ul>
    </div>
    <div style="clear: both; height: 1px;"></div>
  </div>
  <div id="colTwo">
    <ul>
      <li>
        <h2>Archives</h2>
        <ul>
          <li><a href="http://www.free-css.com/">January 2007</a></li>
          <li><a href="http://www.free-css.com/">December 2006</a></li>
          <li><a href="http://www.free-css.com/">November 2006</a></li>
          <li><a href="http://www.free-css.com/">October 2006</a></li>
          <li><a href="http://www.free-css.com/">September 2006</a></li>
          <li><a href="http://www.free-css.com/">August 2006</a></li>
          <li><a href="http://www.free-css.com/">July 2006</a></li>
          <li><a href="http://www.free-css.com/">June 2006</a></li>
        </ul>
      </li>
      <li>
        <h2>Categories</h2>
        <ul>
          <li><a href="http://www.free-css.com/">Quisque vestibulum</a> (23)</li>
          <li><a href="http://www.free-css.com/">Sed a nisl a lacus</a> (78)</li>
          <li><a href="http://www.free-css.com/">Quisque sagittis</a> (11)</li>
          <li><a href="http://www.free-css.com/">Etiam volutpat</a> (34)</li>
          <li><a href="http://www.free-css.com/">In aliquet hendrerit</a> (65)</li>
          <li><a href="http://www.free-css.com/">Suspendisse iaculis</a> (35)</li>
          <li><a href="http://www.free-css.com/">Nam vel risus at</a> (22)</li>
          <li><a href="http://www.free-css.com/">Praesent sit amet</a> (54)</li>
        </ul>
      </li>
      <li>
        <h2>Blogroll</h2>
        <ul>
          <li><a href="http://www.free-css.com/">AnotherFriendlySite.net</a></li>
          <li><a href="http://www.free-css.com/">CoolSite.com</a></li>
          <li><a href="http://www.free-css.com/">MyBestFriend.com</a></li>
        </ul>
      </li>
      <li>
        <h2>Search</h2>
        <form method="get" action="http://www.free-css.com/">
          <div>
            <input type="text" id="textfield1" name="textfield1" value="" size="18" />
            <input type="submit" id="submit1" name="submit1" value="Go" />
          </div>
        </form>
      </li>
    </ul>
    <div style="clear: both;">&nbsp;</div>
  </div>
</div>
<div id="footer">
  <p>Copyright &copy; 2006 BoxedType. Designed by <a href="http://www.freecsstemplates.org/"><strong>Free CSS Templates</strong></a></p>
</div>
</body>
</html>

   
    
    
    
    
  








Related examples in the same category

1.blankspace
2.Blasphemy
3.blended
4.blewwave
5.blootoon
6.blush
7.boardroom
8.BOOM
9.boorish
10.boosting
11.bordered
12.boswell
13.bounderies
14.boxes_template
15.boxybox
16.branches
17.breaking_ontop
18.brewedcoffee
19.brightfolio
20.brightsideoflife1.0
21.Broadcaster
22.broadsheet
23.brycesunrise
24.bucolic
25.burgeon
26.buzz
27.BW
28.bwdec2007
29.calliope
30.callofduty2
31.candiiclouds
32.cantya-studio
33.canuckington-post
34.canvass
35.capricious
36.capsicum
37.carbonated
38.carbonizer
39.carlmelon
40.caronline
41.carrera
42.castellated
43.catch_info
44.cattleya
45.center-stage
46.COIL
47.col1
48.col2
49.col3
50.collaboration
51.collectiveblue
52.collegemusic
53.colorus
54.colosseum
55.columna
56.combination
57.ComingSoon
58.commission
59.communication-1.0
60.communication-co
61.communication
62.community-live
63.compiled
64.complete-collection
65.complimentary
66.component
67.compressed
68.compromise
69.compus
70.conceptnova
71.concrete
72.concurrence
73.condition
74.conglomerate
75.conjunction
76.connection
77.connections
78.consulting-co
79.contemplate
80.convergence
81.cookiefusion
82.Copy of modify
83.corporattica
84.Cosmopolitan
85.counterstrike
86.cover
87.coverage
88.coxswain
89.creamburn
90.crisp2
91.criterion
92.crystalblack
93.css-heaven-1
94.cssgallery
95.cssheaven-2
96.cssmajesty
97.cubismo
98.cultivated
99.cultureshock
100.cupofcoffee
101.customary
102.customize
103.cyano
104.cyanspark
105.cyberarray
106.daleri-mega
107.daleri-structure
108.dalmatians
109.danmyaz1
110.dapple
111.david-kruger
112.deardiary
113.decorative
114.deepimpact
115.deerpark
116.dekada
117.delta
118.delzep_enterprise
119.description
120.deserted
121.desertsand
122.design-gallery
123.design-studio
124.design10
125.Design9
126.designersstudio
127.designersworld
128.designgalo
129.designhq
130.designstudio
131.Design_Agency
132.deskspace
133.detachable
134.deviation
135.devision
136.dewdrops
137.dezinstudio
138.didactic
139.Did_My_Time
140.differential
141.digitalweb
142.dimension
143.diminishing
144.dirtylicious
145.disambiguation
146.discovery
147.distillate
148.distinctive
149.diversity
150.DJ