beyond : Design 4 « Templates « HTML / CSS






beyond

     

<!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>Beyond</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
*/

* {
  margin: 0;
  padding: 0;
}

body {
  background: #6DCFF6 url(beyond-images/img1.jpg) no-repeat center top;
  font: normal 13px Georgia, "Times New Roman", Times, serif;
  color: #FFFFFF;
}

h1, h2, h3 {
  color: #313131;
}

h1 {
  margin-bottom: .5em;
  font-size: 182%;
  font-weight: normal;
  letter-spacing: -2px;
}

h2 {
  margin-bottom: .5em;
  font-size: 136%;
  font-weight: normal;
  letter-spacing: -1px;
}

h3 {
  font-size: 100%;
  font-weight: bold;
}

p, blockquote, ol, ul {
  margin-bottom: 1.5em;
  text-align: justify;
  line-height: 167%;
  font-size: 107%;
}

blockquote {
  margin-left: 2em;
}

ol {
  margin-left: 2em;
}

ul {
  list-style: none;
}

ul li {
}

a {
  border-bottom: 1px dotted #FFFFFF;
  text-decoration: none;
  color: #0033CC;
}

a:hover {
  border-bottom: none;
}

/* Menu */

#menu {
  width: 700px;
  height: 20px;
  margin: 0 auto;
}

#menu ul {
  margin: 0;
  padding: 0;
  text-align: right;
  list-style: none;
}

#menu li {
  padding: 0;
  display: inline;
  background: none;
}

#menu a {
  padding-left: 20px;
  border: none;
  font: bold 77% Verdana, Arial, Helvetica, sans-serif;
  color: #FFFFFF;
}

#menu a:hover {
  color: #0033CC;
}

#menu b {
  text-decoration: underline;
}

/* Logo */

#logo {
  width: 700px;
  height: 140px;
  margin: 0 auto;
}

#logo h1 {
  margin: 0;
  padding: 20px 0 0 60px;
  letter-spacing: 5px;
  font-size: 60px;
}

#logo h1 a {
  color: #FFFFFF;
}

#logo h2 {
  margin: -10px 0 0 0;
  padding: 0 0 0 200px;
  letter-spacing: 3px;
  font-size: 36px;
}

#logo h2 a {
  color: #00AEEF;
}

#logo a {
  border-bottom: none;
  text-decoration: none;
  text-transform: lowercase;
  font-style: italic;
}

/* Page */

#page {
  width: 700px;
  margin: 0 auto;
  background: url(beyond-images/img3.gif) repeat-y;
}

/* Content */

#content {
  float: right;
  width: 446px;
  padding: 5px 0 0 30px;
}

#welcome {
  margin-bottom: 20px;
  padding-bottom: 1px;
}

.floating-box {
  float: left;
  width: 210px;
}

.floating-box p, .floating-box blockquote, .floating-box ol, .floating-box ul {
  font-size: 92%;
}

.floating-box img {
  border: 5px solid #FFFFFF;
}

/* Sidebar */

#sidebar {
  float: left;
  width: 218px;
  padding: 0 5px 10px 1px;
  background: url(beyond-images/img2.jpg) no-repeat;
}

#sidebar .title {
  height: 30px;
  padding: 10px 0 0 20px;
  background: url(beyond-images/img5.gif) repeat-x;
}

#sidebar .content {
  padding: 10px 20px;
}

#sidebar blockquote {
  margin: 0;
}

#sidebar blockquote p {
}

#links {
}

#links ul {
}

#links li {
  padding: 5px 0;
}

#links a {
  border: none;
  color: #FFFFFF;
}

#links a:hover {
  border-bottom: 1px dotted #FFFFFF;
}

/* Footer */

#footer {
  width: 700px;
  margin: 0 auto;
  padding: 20px 0;
  background: url(beyond-images/img4.gif) no-repeat;
}

#footer .links {
}

#footer .legal {
}

</style>


</head>
<body>
<div id="menu">
  <ul>
    <li class="first"><a href="http://www.free-css.com/" accesskey="H"><b>H</b>omepage</a></li>
    <li><a href="http://www.free-css.com/" accesskey="A"><b>A</b>bout Us</a></li>
    <li><a href="http://www.free-css.com/" accesskey="P"><b>P</b>roducts</a></li>
    <li><a href="http://www.free-css.com/" accesskey="S"><b>S</b>ervices</a></li>
    <li><a href="http://www.free-css.com/" accesskey="C"><b>C</b>ustomer Support</a></li>
    <li><a href="http://www.free-css.com/" accesskey="U">Contact <b>U</b>s</a></li>
  </ul>
</div>
<div id="logo">
  <h1><a href="http://www.free-css.com/">Beyond</a></h1>
  <h2><a href="http://www.free-css.com/">Free CSS Templates</a></h2>
</div>
<div id="page">
  <div id="content">
    <div id="welcome">
      <h1>Welcome to Beyond!</h1>
      <p><strong>Beyond</strong> is a free template from Free CSS Templates released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The photo is 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. <em>Enjoy :)</em></p>
    </div>
    <div class="floating-box" style="margin-right: 20px;">
      <h2 class="title">Lorem Ipsum Dolorem</h2>
      <p>Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh. In posuere eleifend odio quisque semper augue mattis wisi maecenas.</p>
      <ul>
        <li><a href="http://www.free-css.com/">Maecenas luctus lectus at sapien</a></li>
        <li><a href="http://www.free-css.com/">Etiam rhoncus volutpat erat</a></li>
        <li><a href="http://www.free-css.com/">Donec dictum metus in sapien</a></li>
        <li><a href="http://www.free-css.com/">Integer gravida nibh quis urna</a></li>
        <li><a href="http://www.free-css.com/">Etiam posuere augue sit amet nisl</a></li>
      </ul>
    </div>
    <div class="floating-box">
      <h2 class="title">Quisque Dictum Integer</h2>
      <p>Quisque dictum integer nisl risus, sagittis convallis. Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum.</p>
      <h3>A Heading Level Three</h3>
      <p>Rutrum id congue und nibh:</p>
      <ol>
        <li><a href="http://www.free-css.com/">Maecenas luctus lectus sapien</a></li>
        <li><a href="http://www.free-css.com/">Etiam rhoncus volutpat erat</a></li>
        <li><a href="http://www.free-css.com/">Donec dictum metus in sapien</a></li>
        <li><a href="http://www.free-css.com/">Integer gravida nibh quis urna</a></li>
        <li><a href="http://www.free-css.com/">Etiam posuere augue amet nisl</a></li>
      </ol>
    </div>
  </div>
  <!-- end #content -->
  <div id="sidebar">
    <div id="links">
      <h2 class="title">Nullam Veroeros</h2>
      <div class="content">
        <ul>
          <li><a href="http://www.free-css.com/">Maecenas luctus lectus at</a></li>
          <li><a href="http://www.free-css.com/">Etiam rhoncus volutpat erat</a></li>
          <li><a href="http://www.free-css.com/">Donec dictum metus</a></li>
          <li><a href="http://www.free-css.com/">Integer gravida quis urna</a></li>
          <li><a href="http://www.free-css.com/">Etiam posuere augue amet</a></li>
          <li><a href="http://www.free-css.com/">Lorem ipsum dolorem </a></li>
        </ul>
      </div>
    </div>
    <div>
      <h2 class="title">A Blockquote</h2>
      <div class="content">
        <blockquote>
          <p>Quisque dictum integer nisl risus, sagittis convallis. Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum.</p>
        </blockquote>
      </div>
    </div>
  </div>
  <!-- end #sidebar -->
  <div style="clear: both; height: 1px;"></div>
</div>
<!-- end #page -->
<div id="footer">
  <p class="links"><a href="http://www.free-css.com/">Home</a> &#183; <a href="http://www.free-css.com/">Terms of Use</a> &#183; Designed By <a href="http://www.freecsstemplates.org/">Free CSS Templates</a> &#183; <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Strict"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> &#183; <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></p>
  <p class="legal">&copy; 2007 Beyond</p>
</div>
</body>
</html>

   
    
    
    
    
  








Related examples in the same category

1.arrangement
2.arthemia
3.artica
4.aspherical
5.assiduous
6.asterisk
7.astounded
8.astroturfd
9.atomohost
10.atrandafir582
11.AttainDigital
12.audi-template
13.aurelius
14.authenticity
15.autoportal
16.axian
17.azulmedia2-1
18.azure
19.bagatelle
20.balanced
21.bananaleaf
22.barricade
23.begrimed
24.belowthehorizon
25.bennevis
26.bermuda01
27.besmart
28.bestwebdesign
29.beta
30.bigdeal
31.BigSpaceLove
32.bioessence
33.Biru_Manteb
34.bittersweet
35.Black
36.chamberlandsrestaurant
37.chara
38.characterized
39.charcoal
40.charitable-organization
41.chary
42.chasmogamous
43.chesspiece
44.chic
45.chicanery
46.chromz
47.churchsitev.2
48.citrus-island1-1
49.clementine
50.clicker
51.modernclassic
52.modernmagic
53.modernworld
54.A_Simple_Theme
55.minimalistica
56.miniseries
57.mint-idea
58.minty
59.mirax
60.miscellaneous
61.mistybud
62.mlpdesign02
63.mlpdesign03
64.mlpdesign04
65.mlpdesign08
66.model-4-me
67.model-portfolio
68.modelagency
69.modelportfolio
70.model_2
71.moderna
72.Modified
73.modulation
74.module-mag
75.mokofactory
76.monster
77.mork-horisont
78.mountainbreeze
79.mouse
80.mrtechie
81.multiflex2
82.multiple
83.multiplex
84.music
85.muzzle
86.MyCode
87.mydiary
88.myfamily
89.myhedspacefree08
90.mykindathing
91.myportfolio
92.mystic-garden
93.Mythology
94.myvalentine
95.naeve
96.natheless
97.nationalpark
98.neapolitan
99.neatness
100.nebuladog
101.nedweb
102.NelVoize
103.neoneon
104.neonix
105.neoplanet-01
106.neotech
107.netindustries
108.neuphoric
109.neutral
110.neutraldesk
111.neutralgreen
112.new kitchen design
113.new-fast-host
114.new-home
115.new-rise
116.new-year