eatlon
<!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="en" lang="en">
<head>
<title>Eatlon</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type='text/css'>
/* Free standard-compliant open source XHTML/CSS template provided by Eatlon.com */
body {
background-image: url(eatlon-imgs/body_bg.gif);
background-repeat: repeat-x;
background-color: #9faec2;
font-family: arial, sans-serif;
font-size: .7em;
color: #8f8f8f;
padding: 0;
margin: 0;
}
a { text-decoration: none; color: #6d819d; padding: 0; margin: 0; }
a:hover { text-decoration: none; color: #a42929; border-bottom: 1px solid #6d819d; outline: 0; padding: 0; margin: 0; }
a.discrete { text-decoration: none; color: #7e7e7e; padding: 0; margin: 0; }
a.discrete:hover { text-decoration: underline; color: #7e7e7e; border-bottom: 0; outline: 0; padding: 0; margin: 0; }
a.title { text-decoration: none; color: #8f8f8f; padding: 0; margin: 0; }
a.title:hover { text-decoration: none; color: #8f8f8f; border-bottom: 0; outline: 0; padding: 0; margin: 0; }
h1 {
font-family: georgia, serif;
font-size: 5em;
font-weight: 100;
padding: 0;
margin: 0;
}
h2 {
font-size: 1.2em;
font-style: italic;
font-weight: 100;
padding: 0;
margin: 0;
}
h3 {
font-family: georgia, serif;
font-size: 2.3em;
font-weight: 100;
line-height: 1em;
border-bottom: 1px solid #e0e0e0;
padding: 0;
margin: 0 0 5px 0;
}
h4 {
font-size: 1.3em;
font-weight: 100;
padding: 0;
margin: 0;
}
.in { text-indent: 20px; }
#wrap {
width: 876px;
min-height: 450px;
height: auto !important;
height: 450px;
background-color: #fff;
padding: 0;
margin: 0 auto;
}
#header {
width: 100%;
height: 140px;
background-image: url(eatlon-imgs/head_bg.gif);
background-repeat: repeat-x;
background-position: top center;
}
.title_tagline {
width: 95%;
height: 140px;
background-image: url(eatlon-imgs/banner.gif);
background-repeat: no-repeat;
background-position: top right;
padding: 30px 0 0 30px;
margin: 0;
}
#menu {
height: 60px;
background-image: url(eatlon-imgs/menu_bg.gif);
background-repeat: repeat-x;
font-size: 1.1em;
padding: 11px 0 0 22px;
margin: 0;
}
#menu a { text-decoration: none; color: #fafafa; font-weight: bold; padding: 0; margin: 0; }
#menu a:hover { text-decoration: none; color: #d0d0d0; outline: 0; padding: 0; margin: 0; }
#menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#menu ul li {
float: left;
padding: 0 0 0 0;
margin: 0 10px 0 10px;
}
#content {
background-color: #fff;
margin: 10px 0 0 0;
padding: 0 18px 0 20px;
}
/* The following CSS,
"submenu_a",
"right_wrap",
"content_middle" and
"submenu_b"
define the double submenus layout for index.html */
.submenu_a {
float: left;
width: 15%;
padding: 0;
margin: 0 0 0 10px;
}
.submenu_a p {
padding: 0;
margin: 6px 0 0 0;
}
.submenu_a ul {
list-style-type: none;
padding: 0;
margin: 5px 0 25px 0;
}
.submenu_a ul li {
padding: 0;
margin: 0;
}
.right_wrap {
float: right;
width: 80%;
padding: 0 24px 0 0;
}
.content_middle {
float: left;
width: 65%;
font-size: 1.1em;
line-height: 1.5em;
text-align: justify;
padding: 0 30px 0 25px;
margin: 0 1px 0 19px;
border-left: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
}
.content_middle p {
padding: 0;
margin: 7px 0 0 0;
}
.submenu_b {
float: right;
width: 18%;
padding: 0 9px 0 0;
margin: 0;
}
.submenu_b p {
padding: 0;
margin: 6px 0 0 0;
}
.submenu_b ul {
list-style-type: none;
padding: 0;
margin: 5px 0 25px 0;
}
.submenu_b ul li {
padding: 0;
margin: 0;
}
/* The following CSS,
"menu_left" and
"content_right"
define the left-wing layout for index.html */
.menu_left {
float: left;
width: 16%;
padding: 0;
margin: 0 0 0 10px;
}
.menu_left p {
padding: 0;
margin: 6px 0 0 0;
}
.menu_left ul {
list-style-type: none;
padding: 0;
margin: 5px 0 25px 0;
}
.menu_left ul li {
padding: 0;
margin: 0;
}
.content_right {
float: right;
width: 75%;
font-size: 1.1em;
line-height: 1.5em;
text-align: justify;
padding: 0 20px 0 25px;
margin: 0;
border-left: 1px solid #e0e0e0;
}
.content_right p {
padding: 0;
margin: 7px 0 0 0;
}
/* The following CSS,
"content_left" and
"menu_right"
define the right-wing layout for right_wing.html */
.content_left {
float: left;
width: 74%;
font-size: 1.1em;
line-height: 1.5em;
text-align: justify;
padding: 0 25px 0 10px;
margin: 0;
border-right: 1px solid #e0e0e0;
}
.content_left p {
padding: 0;
margin: 7px 0 0 0;
}
.menu_right {
float: right;
width: 16%;
padding: 0 20px 0 0;
margin: 0;
}
.menu_right p {
padding: 0;
margin: 6px 0 0 0;
}
.menu_right ul {
list-style-type: none;
padding: 0;
margin: 5px 0 25px 0;
}
.menu_right ul li {
padding: 0;
margin: 0;
}
.square {
width: 120px;
border-top: 1px solid #bcc6d4;
border-bottom: 1px solid #bcc6d4;
padding: 5px 8px 5px 0;
margin: 0 0 25px 0;
}
.post { padding: 0 0 20px 0; }
.layouts { text-align: center; padding: 10px 0 0 0; }
#bottom {
clear: both;
width: 100%;
height: 163px;
background-image: url(eatlon-imgs/bottom_bg.gif);
background-repeat: no-repeat;
padding: 0;
margin: 0 auto;
}
.footer {
width: 100%;
text-align: center;
padding: 40px 0 0 0;
margin: 0;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="title_tagline">
<h1><a href="http://www.free-css.com/" class="title">Eatlon</a></h1>
<h2>- The most witty tagline in human history</h2>
</div>
</div>
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Archive</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
<li><a href="http://www.free-css.com/">Sitemap</a></li>
</ul>
</div>
<div id="content">
<div class="submenu_a">
<div class="square">
<h4>Information</h4>
<p>The column layout of the template is changeable:</p>
<p><a href="index.html">+ Double submenus</a><br />
<a href="left_wing.html">+ Left-wing submenu</a><br />
<a href="right_wing.html">+ Right-wing submenu</a></p>
<p>Please leave the credit link in the footer and thereby giving a small biscuit of appreciation to the designer.</p>
</div>
<h4>Latest articles</h4>
<ul>
<li><a href="http://www.free-css.com/">Eatlon.com brings you...</a></li>
<li><a href="http://www.free-css.com/">Lorem ipsum dolor sit...</a></li>
<li><a href="http://www.free-css.com/">Praesent congue</a></li>
<li><a href="http://www.free-css.com/">Pellentesque purus dui</a></li>
</ul>
<h4>Categories</h4>
<ul>
<li><a href="http://www.free-css.com/">Lorem ipsum</a></li>
<li><a href="http://www.free-css.com/">Maecenas mollis lectus</a></li>
<li><a href="http://www.free-css.com/">Praesent congue</a></li>
<li><a href="http://www.free-css.com/">Pellentesque purus dui</a></li>
</ul>
</div>
<div class="right_wrap">
<div class="content_middle">
<div class="post">
<h3>The first-born is here</h3>
<p>This is the first template ever delivered to you by Eatlon.com - hopefully you like it!
The ambition for this template was to produce a slim and professional look. There are three different column layout possibilites: one submenu to the left and the main content to the left, same dividing but reversed and also a centered main content surrounded by two submenus.</p>
<div class="layouts"><img src="eatlon-imgs/layouts.gif" alt="" /></div>
<p>Feel free to use and modify the template however you like. There is no compulsion to leave the credit link to Eatlon.com in the footer, but only very appreciated by the creator of this <em>free</em> template who put down quite some hours to produce it.</p>
</div>
<div class="post">
<h3>Lorem ipsum dolor sit amet</h3>
<p><img src="eatlon-imgs/image.gif" style="float: left; padding: 4px 10px 0 0;" alt="" />Consectetuer adipiscing elit. Sed ultricies dictum sapien. Donec libero turpis, vestibulum eu, molestie mollis, porttitor vitae, quam. Etiam venenatis sapien in sem. Eatlon tempor rutrum lorem. Nulla a lectus a nulla mollis egestas. Morbi nisi nisl, ultrices nec, scelerisque vitae, adipiscing sit amet, velit. Aliquam erat volutpat. Maecenas dui leo, vestibulum in, auctor vehicula, lacinia ac, nibh. Etiam at libero quis dolor porttitor malesuada. Vestibulum tellus. Vivamus molestie, ligula et nonummy fermentum, augue tortor tristique risus, at rutrum enim risus nec mi. Cras fringilla magna eu libero. Etiam pharetra ultrices erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In a ligula.</p>
</div>
</div>
<div class="submenu_b">
<h4>RSS feeds</h4>
<ul>
<li>You are very welcome to subscribe to our <a href="http://www.free-css.com/">news feed</a> by RSS or e-mail.</li>
</ul>
<img src="eatlon-imgs/feed.gif" alt="" />
<h4>Latest comments</h4>
<ul>
<li><a href="http://www.free-css.com/">Donovan (I would say...)</a></li>
<li><a href="http://www.free-css.com/">Powell (I agree with...)</a></li>
<li><a href="http://www.free-css.com/">Lanning (Probably the...)</a></li>
<li><a href="http://www.free-css.com/">Calvin (I like the very...)</a></li>
</ul>
<h4>Links</h4>
<ul>
<li><a href="http://www.free-css.com/">Free Layouts</a></li>
<li><a href="http://www.free-css.com/">Free templates</a></li>
</ul>
</div>
</div>
</div>
<br />
<div id="bottom">
<div class="footer"> 2007 © Your name | Design by <a href="http://eatlon.com" class="discrete">Eatlon.com</a> | Valid <a target="_blank" href="http://validator.w3.org/check?uri=referer" class="discrete">XHTML</a> and <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer" class="discrete">CSS</a> </div>
</div>
</div>
</body>
</html>
Related examples in the same category