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 © 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