ionika
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Created by: Reality Software | www.realitysoftware.ca
Released by: Free Web Design Community | www.designity.org
Note: This is a free template released under the Creative Commons Attribution 3.0 license,
which means you can use it in any way you want provided you keep links to authors intact.
Don't want our links in template? You can pay a link removal fee: www.realitysoftware.ca/templates/
You can also purchase a PSD-file for this template.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type='text/css'>
body {margin:0; font-family:Arial, Helvetica, sans-serif; background:url(ionika-images/body.jpg) repeat-x center top #000000;}
a {color:#21364F;}
a:hover {text-decoration:none;}
#container {width:940px; margin:0 auto; margin-top:40px; background: url(ionika-images/main.jpg) no-repeat #FFFFFF;}
#sidebar {float:right; width:179px; color:#21364F; font-size:11px; line-height:16px; padding:0 20px 35px 20px;}
#sidebar h3 {padding:5px 0 5px 20px; margin:20px 0 10px -20px; background:url(ionika-images/sidebar_h3.jpg) repeat-y; text-transform:uppercase; font-size:18px; font-weight:normal;}
#sidebar ul {padding:0; margin:0;}
#sidebar li {list-style:none; border-bottom:1px solid #E1E3E7;}
#sidebar li a {display:block; width:175px; padding:2px; text-decoration:none;}
#sidebar li a:hover {background-color:#EFF1F3;}
#main {margin-right:220px;}
#logo {text-align:center; margin:0 auto; width:300px; padding-top:50px; color:#FFFFFF; font-size:10px; line-height:12px; height:199px;}
#logo a {color:#FFFFFF; text-decoration:none; font-size:28px; line-height:normal; letter-spacing:3px; text-transform:uppercase; margin:0 -50px;}
#menu {background:url(ionika-images/menu.jpg) no-repeat; height:61px;}
#menu ul {margin:0; padding:2px 50px 0 50px; text-align:center;}
#menu li {display:inline; list-style:none; line-height:28px; padding-top:1px;}
#menu a {font-size:14px; text-decoration:none; color:#FFFFFF; padding:4px 20px 5px 20px; text-transform:lowercase;}
#menu a:hover {background:url(ionika-images/menu_a.jpg) repeat-x;}
#menu a.active {background:url(ionika-images/menu_a.jpg) repeat-x;}
#text {padding:0 30px 35px 30px; color:#21364F; font-size:11px; line-height:16px;}
#text h1, #text h2 {font-size:20px; font-weight:normal; text-transform:uppercase; margin:20px 0 10px 0;}
#text ul {margin-top:8px; margin-bottom:8px;}
#text br {line-height:8px;}
#footer {clear:both; height:162px; background:url(ionika-images/footer.jpg) no-repeat; color:#FFFFFF; font-size:11px;}
#footer a {color:#FFFFFF;}
#menu_footer {padding:30px 250px 0 30px; text-transform:lowercase;}
#left_footer {float:left; padding:30px 30px 0 30px;}
#right_footer {float:right; padding:21px 30px 0 30px; width:159px; text-align:center;}
</style>
</head>
<body>
<div id="container">
<!-- sidebar -->
<div id="sidebar">
<h3>Sidebar</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus ornare condimentum sem. Nullam a eros.Vivamus vestibulum hendrerit arcu. Integer a orci.
Morbi nonummy semper est. Donec at risus sed velit porta dictum.
<h3>Sidebar items</h3>
<ul>
<li><a href="#">sidebar item</a></li>
<li><a href="#">sidebar item</a></li>
<li><a href="#">sidebar item</a></li>
<li><a href="#">sidebar item</a></li>
<li><a href="#">sidebar item</a></li>
</ul>
<h3>Sidebar items</h3>
<ul>
<li><a href="#">sidebar item</a></li>
<li><a href="#">sidebar item</a></li>
<li><a href="#">sidebar item</a></li>
<li><a href="#">sidebar item</a></li>
<li><a href="#">sidebar item</a></li>
</ul>
</div>
<!-- end sidebar -->
<!-- main -->
<div id="main">
<div id="logo">
<a href="#">Website Name</a><br/><br/><br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus ornare condimentum sem. Nullam a eros.Vivamus vestibulum hendrerit arcu. Integer a orci.
Morbi nonummy semper est. Donec at risus sed velit porta dictum. Maecenas condimentum orci aliquam nunc. Morbi nonummy tellus in nibh. Suspendisse orci eros.
</div>
<div id="menu">
<ul>
<li><a href="#" class="active">home</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">services</a></li>
<li><a href="#">pricing</a></li>
<li><a href="#">contacts</a></li>
</ul>
</div>
<div id="text">
<h1>Welcome</h1>
<b>Ionika</b> is a free template created by <a href="http://www.realitysoftware.ca/">Reality Software</a> and released by <a href="http://www.designity.org/">Free Web Design Community</a> under the <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0</a> license, which means you can use it in any way you want provided you keep links to authors intact.<br/><br/>
Maecenas nisi eros, volutpat a, sagittis vitae, semper vestibulum, nibh. Integer euismod ante et ipsum.
<h2>Lorem ipsum</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus ornare condimentum sem. Nullam a eros. Vivamus vestibulum hendrerit arcu. Integer a orci. Morbi nonummy semper est. Donec at risus sed velit porta dictum. Maecenas condimentum orci aliquam nunc. Morbi nonummy tellus in nibh. Suspendisse orci eros, dapibus at, ultrices at, egestas ac, tortor. Suspendisse fringilla est id erat. Praesent et libero. Proin nisi felis, euismod a, tempus varius, elementum vel, nisl. Fusce non magna sit amet enim suscipit feugiat. Fusce et leo.
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>consectetuer adipiscing elit.</li>
<li>Phasellus ornare condimentum sem.</li>
<li>Nullam a eros. Vivamus vestibulum hendrerit arcu.</li>
</ul>
Integer a orci. Morbi nonummy semper est. Donec at risus sed velit porta dictum. Maecenas condimentum orci aliquam nunc. Morbi nonummy tellus in nibh. Suspendisse orci eros, dapibus at, ultrices at, egestas ac, tortor. Suspendisse fringilla est id erat. Praesent et libero. Proin nisi felis, euismod a, tempus varius, elementum vel, nisl. Fusce non magna sit amet enim suscipit feugiat. Fusce et leo.
</div>
</div>
<!-- end main -->
<!-- footer -->
<div id="footer">
<div id="menu_footer"><a href="#">home</a> | <a href="#">about</a> | <a href="#">products</a> | <a href="#">services</a> | <a href="#">pricing</a> | <a href="#">contact</a> | <a href="#">sitemap</a> | <a href="#">testimonials</a> | <a href="#">etc.</a></div>
<div id="left_footer">© Copyright 2009 Your Website</div>
<div id="right_footer">
<!-- Please do not change or delete these links. Read the license! Thanks. :-) -->
Design by<br/><a href="http://www.designity.org/">Free Web Design Community</a>
</div>
</div>
<!-- end footer -->
</div>
</body>
</html>
Related examples in the same category