emergence : Design 5 « Templates « HTML / CSS






emergence

    

<!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="sv" lang="sv">
<head>
<title>Emergence - 2 Column</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type='text/css'>
/* Open source XHTML/CSS template created by Olle Axelsson (http://olle-axelsson.se). Please leave credits. */

body {
  background-image: url(emergence-imgs/bg.png);
  background-repeat: repeat-x;
  background-color: #fff;
  font-family: verdana, sans-serif;
  font-size: .8em;
  color: #7e7e7e;
  padding: 0;
  margin: 0;
}

a:link { text-decoration: none; color: #ab1a1a; padding: 0; margin: 0; }
a:visited { text-decoration: none; color: #ab1a1a; padding: 0; margin: 0; }
a:active { text-decoration: none; color: #ab1a1a; outline: 0; padding: 0; margin: 0; }
a:hover { text-decoration: underline; color: #cd2020; outline: 0; padding: 0; margin: 0; }

a.img:link { text-decoration: none; border: 0; }
a.img:visited { text-decoration: none; border: 0; }
a.img:active { text-decoration: none; border: 0; }
a.img:hover { text-decoration: none; border: 0; }

a.m:link { text-decoration: none; font-weight: bold; color: #383838; border-bottom: 0; padding: 0; margin: 0 10px 0 10px; }
a.m:visited { text-decoration: none; font-weight: bold; color: #383838; border-bottom: 0; padding: 0; margin: 0 10px 0 10px; }
a.m:active { text-decoration: none; font-weight: bold; color: #383838; border-bottom: 0; outline: 0; padding: 0; margin: 0 10px 0 10px; }
a.m:hover { text-decoration: none; font-weight: bold; color: #bb1d1d; border-bottom: 0; outline: 0; padding: 0; margin: 0 10px 0 10px; }

a.invsbl:link { text-decoration: none; color: #7e7e7e; border-bottom: 0; padding: 0; margin: 0; }
a.invsbl:visited { text-decoration: none; color: #7e7e7e; border-bottom: 0; padding: 0; margin: 0; }
a.invsbl:active { text-decoration: none; color: #7e7e7e; border-bottom: 0; outline: 0; padding: 0; margin: 0; }
a.invsbl:hover { text-decoration: underline; color: #7e7e7e; border-bottom: 0; outline: 0; padding: 0; margin: 0; }

h1 { font-family: arial, sans-serif; font-size: 400%; font-weight: normal; color: #d8ff00; padding: 0; margin: 0; border-bottom: 2px solid #d8ff00; }
h2 { font-family: arial, sans-serif; font-size: 2em; font-weight: 100; padding: 0; margin: 0; color: #5b5b5b; }
h3 { font-family: verdana, sans-serif; font-size: 1.1em; font-weight: bold; color: #5b5b5b; padding: 0 0 8px 0; margin: 0; }

img { border: 0; }
.img_text { float: left; border: 0; padding: 10px 12px 8px 0; }

.in { text-indent: 12px; }

form { padding: 0; margin: 0; }

p { padding: 15px 0 0 0; margin: 0; }

#ffscrollbarfix {
  border: 0;
  position: absolute;
  top: 0;
  bottom: -0.1px;
  width: 1em;
  z-index: -1;
}

#wrap { }

.sheet {
  width: 840px;
  background-image: url(emergence-imgs/sheet.png);
  background-repeat: no-repeat;
  background-position: center top;
  min-height: 520px;
  height: auto !important;
  height: 520px;
  margin: 0 auto;
}

.banner {
  padding: 56px 0 0 0;
  margin: 0;
  text-align: center;
}

.menu {
  background-image: url(emergence-imgs/menu_bar.png);
  background-repeat: no-repeat;
  background-position: top center;
  padding: 20px 20px 40px 20px;
  margin: 0 auto;
}

  .menu_text { padding: 0 0 0 25px; }






.content {
  line-height: 160%;
  width: 780px;
  margin: 0 auto;
}

  .left {
    float: left;
    width: 20%;
    margin: 5px 0 0 10px;
  }

    .box {
      font-size: 89%;
      margin: 0 0 15px 0;
      padding: 10px;
      background-image: url(emergence-imgs/box_bg.jpg);
      background-repeat: repeat-x;
      border: 1px solid #d4d4d4;
    }

  .right {
    float: right;
    width: 576px;
    font-size: 91%;
    margin: 0 16px 0 0;
  }

  .right_wrap {
    float: right;
    width: 592px;
  }

    .right_left {
      float: left;
      width: 411px;
      font-size: 91%;
      text-align: justify;
    }

    .right_right {
      float: right;
      width: 25%;
      margin: 5px 9px 0 0;
    }






#footer {
  clear: both;
  width: 840px;
  height: 120px;
  font-size: 88%;
  background-image: url(emergence-imgs/sheet_end.png);
  background-repeat: no-repeat;
  background-position: center top;
  margin: 0 auto;
}

  .footer_left {
    float: left;
    width: 40%;
    padding: 45px 0 0 40px;
  }

  .footer_right {
    float: right;
    width: 40%;
    padding: 45px 40px 0 0;
    text-align: right;
  }

</style>


</head>
<body>
<div id="wrap">
  <div class="sheet">
    <div class="banner"> <a href="http://www.free-css.com/" class="img"><img src="emergence-imgs/banner.jpg" alt="" /></a> </div>
    <div class="menu">
      <div class="menu_text"> <a href="http://www.free-css.com/" class="m">Home</a> <a href="2column.php" class="m">2-column</a> <a href="contact.php" class="m">Contact</a> <a href="sitemap.php" class="m">Sitemap</a> </div>
    </div>
    <div class="content">
      <div class="left">
        <div class="box">
          <h3>News</h3>
          20070724: My first template is finished! </div>
        <div class="box">
          <h3>Search</h3>
          <input type="text" name="search" size="15" />
        </div>
        <div class="box">
          <h3>Info</h3>
          Please leave the credit link in the footer as a nice gesture to the designer of this template. </div>
        <div class="box"> <img src="emergence-imgs/feed.jpg" alt="" /> </div>
        <div class="box">
          <h3>Links</h3>
          <a href="http://www.free-css.com/">Free templates</a><br />
          <a href="http://www.free-css.com/">Webdesign blog</a> </div>
      </div>
      <div class="right">
        <h2>My first template</h2>
        <p>At last, I have taken time to produce my first template. The reason why I named it "Emergence" is partly the very meaning of the word and partly becuase  I once named one of my own websites Emergence.</p>
        <div class="in">It's a pretty simple 2 or 3 column template with horisontal menu. The top banner is of course just an example.</div>
        <p>Since this template is totally free, there is no obligations or limitations when using it. Anyone may use it for any purpose. Nevertheless, I disclaim all responsibility for websites (and all content of these) at which my template may occur.</p>
        <p>I kindly ask you to leave the credit link to my website in the footer. However, this is not any obligation but just a friendly request.</p>
        <p>Enjoy!</p>
        <p><a href="http://www.free-css.com/">Olle Axelsson</a></p>
        <br />
        <br />
        <h2>Lorem ipsum</h2>
        <p>Dolor sit amet, consectetuer adipiscing <a href="http://www.free-css.com/">elit</a>. Ut posuere sapien eu ipsum. <img src="emergence-imgs/content_img.jpg" class="img_text" alt="" />In a diam eu nulla luctus euismod. Sed imperdiet nisl ut augue. Aliquam fermentum, quam vel cursus pretium, magna diam rutrum nibh, sit amet <a href="http://www.free-css.com/">condimentum</a> erat risus ut tellus. Ut nec magna vel quam mattis pellentesque. Donec a turpis quis mi consectetuer euismod. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vitae lorem. Vivamus lobortis rutrum <a href="http://www.free-css.com/">tellus</a>. Mauris ac arcu quis diam tincidunt dignissim. Nulla consequat velit quis massa. Praesent gravida pharetra quam. <a href="http://www.free-css.com/">Suspendisse</a> et quam a felis mattis placerat. Duis iaculis mollis tellus.</p>
        <p>Ut et arcu et orci gravida lobortis. Nulla neque. Pellentesque a erat. Phasellus vitae dolor in tellus eleifend ullamcorper. Nam eget est. Vestibulum <a href="http://www.free-css.com/">condimentum</a> metus sollicitudin lacus fermentum accumsan. Nunc nec dui. Sed est ligula, mollis ac, sodales ut, ultrices vitae, lorem.</p>
      </div>
    </div>
  </div>
  <div id="footer">
    <div class="footer_left"> 2007 &copy; Your name </div>
    <div class="footer_right"> Design by <a href="http://olle-axelsson.se" class="invsbl">Olle Axelsson</a> | <a target="_blank" href="http://validator.w3.org/check?uri=referer" class="a">XHTML</a>, <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer" class="a">CSS</a> </div>
  </div>
</div>
<div id="ffscrollbarfix"></div>
</body>
</html>

   
    
    
    
  








Related examples in the same category

1.d-tv
2.dogstemplate
3.domesticated
4.dottis
5.duet-plasma
6.dusky
7.dusplic
8.dynamic
9.dzine
10.eastern-tales
11.easybreeze
12.easymoto
13.eatlon
14.ebullient
15.echo
16.ecolution-warrior
17.ecom-1
18.edgy
19.edy-builders
20.efflorescence
21.elements
22.elitecircle1-0
23.emblazoned
24.embouteillage
25.emerald
26.emperor
27.empireserver
28.emporium
29.enclosed
30.endless
31.energybox
32.enlight
33.enlighten1-0
34.enormous
35.enter
36.enthusiastica
37.entomology
38.envision1-0
39.epod
40.equivalency
41.ergophobia
42.established
43.etags
44.euphonics
45.europe
46.everydayseries
47.evolution
48.exalted
49.excess
50.excursus
51.Executive Template
52.executive
53.Exotic_Blue
54.Exotic_Red
55.fotografix
56.fotolandia
57.foundation
58.foxy
59.fractalbroccoli
60.fragrance
61.frankincense
62.freches-fruechtchen
63.free-css-lunch
64.freecsstemplate 55
65.freecsstemplateno57
66.freecsswebsitetemplate39
67.freecss_greentextile
68.freecss_modern
69.freecss_monolit
70.freecss_redleaves
71.freecss_set
72.freeport
73.freeradicals
74.freestyle
75.frozenage
76.ftd-redblack
77.ftdbusiness
78.ftdcinema
79.ftddrops
80.ftdExplosionBlue
81.ftditight
82.ftdkiwi
83.ftdlagoon
84.ftdLight
85.ftdLightBlue
86.ftdluminescent
87.ftdMoonLight
88.ftdprime
89.ftdspace
90.ftdvivid
91.ftdworld
92.funkytimes
93.funride
94.futuremag-aio
95.fword_three
96.galaxy
97.gallerize
98.gamberetto
99.gameportal
100.Ganesh01
101.gastropoda
102.gathering14
103.gazebo
104.gconsultant
105.general
106.genesis
107.genghiskahn
108.genius_web
109.gentle_wiki
110.geoforce
111.gestured
112.gift-gallery
113.giftig-gruen
114.gila
115.glazed
116.godetia
117.godofgates
118.GoFlexible
119.goinggrey
120.gradientis
121.grandenally
122.grandhost
123.GraniteGlass
124.greefies