enter
<!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>Enter</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
*/
body {
margin: 0;
padding: 0;
background: #FFFFFF;
font: normal small Arial, Helvetica, sans-serif;
color: #999999;
}
h1, h2, h3 {
margin: 0;
padding: 0;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #666666;
}
a {
color: #333333;
}
a:hover {
text-decoration: none;
color: #000000;
}
/* Menu */
#menu {
width: 704px;
height: 62px;
margin: 0 auto;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
width: 140px;
height: 41px;
margin-left: 1px;
padding-top: 10px;
border-top-width: 10px;
border-top-style: solid;
text-align: center;
text-transform: lowercase;
text-decoration: none;
letter-spacing: -1px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
}
#menu .first a {
margin: 0;
}
#menu1 { background: url(enter-images/img01.gif) no-repeat center bottom; border-color: #F07242; color: #C4856D; }
#menu2 { background: url(enter-images/img02.gif) no-repeat center bottom; border-color: #FCEE0F; color: #C0B94A; }
#menu3 { background: url(enter-images/img03.gif) no-repeat center bottom; border-color: #549EE9; color: #799EC3; }
#menu4 { background: url(enter-images/img04.gif) no-repeat center bottom; border-color: #9EBF54; color: #94A46F; }
#menu5 { background: url(enter-images/img05.gif) no-repeat center bottom; border-color: #9F8DF6; color: #B0A7DB; }
#menu a:hover {
color: #000000;
}
/* Logo */
#logo {
width: 704px;
height: 31px;
margin: 0 auto;
padding: 130px 0 0 0;
background: url(enter-images/img06.jpg) no-repeat;
border-bottom: 10px solid #595959;
}
#logo h1, #logo h2 {
float: left;
text-transform: lowercase;
letter-spacing: -1px;
font-size: 1.4em;
font-weight: normal;
}
#logo h1 {
padding: 0 0 0 140px;
}
#logo h1 a {
color: #C3B1D2;
}
#logo h2 {
margin: 0 0 0 15px;
padding: 0 0 0 15px;
border-left: 1px solid #8E68A5;
}
#logo h2 a {
color: #AE96C0;
}
#logo a {
text-decoration: none;
}
/* Content */
#content {
width: 704px;
margin: 0 auto;
border-top: 1px solid #FFFFFF;
}
#colA {
float: right;
width: 424px;
padding: 0 30px 0 0;
}
#colB {
float: left;
width: 220px;
}
/* BoxedA */
.boxedA {
}
.boxedA h2 {
height: 35px;
padding-top: 25px;
border-bottom: 1px solid #CCCCCC;
font-size: 2em;
}
.boxedA h3 {
font-size: 1em;
font-weight: bold;
}
.boxedA p {
line-height: 2em;
text-align: justify;
}
.boxedA .more {
text-align: right;
}
.boxedA .more a {
padding: 0 1em;
background: #CCCCCC;
border-left: 4px solid #666666;
text-decoration: none;
}
.boxedA .more a:hover {
background: #666666;
color: #FFFFFF
}
/* BoxedB */
.boxedB {
margin-bottom: 1px;
background: #FAD4C6 url(enter-images/img07.gif) repeat-y;
border-bottom: 1px solid #F07242;
}
.boxedB h2 {
height: 35px;
padding: 25px 0 0 21px;
border-bottom: 1px solid #FFFFFF;
letter-spacing: -1px;
font-size: 24px;
font-weight: normal;
color: #F07242;
}
.boxedB ul {
margin: 0;
padding: 0;
list-style: none;
}
.boxedB li {
display: inline;
}
.boxedB a {
display: block;
width: 199px;
height: 23px;
padding: 7px 0 0 21px;
background: #FDF1EC url(enter-images/img08.gif) no-repeat;
border-bottom: 1px solid #FFFFFF;
text-decoration: none;
color: #F07242;
}
.boxedB a:hover {
background: #F7B8A0 url(enter-images/img09.gif) no-repeat;
color: #FFFFFF;
}
/* BoxedC */
.boxedC {
margin-bottom: 1px;
background: #CBE2F8 url(enter-images/img11.gif) repeat-y;
border-bottom: 1px solid #549EE9;
}
.boxedC h2 {
height: 35px;
padding: 25px 0 0 21px;
border-bottom: 1px solid #FFFFFF;
letter-spacing: -1px;
font-size: 24px;
font-weight: normal;
color: #549EE9;
}
.boxedC ul {
margin: 0;
padding: 0;
list-style: none;
}
.boxedC li {
display: inline;
}
.boxedC a {
display: block;
width: 199px;
height: 23px;
padding: 7px 0 0 21px;
background: #EEF5FD url(enter-images/img12.gif) no-repeat;
border-bottom: 1px solid #FFFFFF;
text-decoration: none;
color: #549EE9;
}
.boxedC a:hover {
background: #A9CEF4 url(enter-images/img13.gif) no-repeat;
color: #FFFFFF;
}
/* News */
#news {
}
#news h2 {
font-size: 22px;
}
#news ul {
list-style-type: square;
}
/* Footer */
#footer {
clear: both;
width: 704px;
margin: 0 auto;
border-top: 1px solid #666666;
background: #CCCCCC;
}
#footer p {
margin: 0;
padding: 30px 0;
text-align: center;
font-size: smaller;
color: #999999;
}
#footer a {
color: #999999;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li class="first"><a href="http://www.free-css.com/" id="menu1" accesskey="1">Homepage</a></li>
<li><a href="http://www.free-css.com/" id="menu2" accesskey="2">Services</a></li>
<li><a href="http://www.free-css.com/" id="menu3" accesskey="3">Products</a></li>
<li><a href="http://www.free-css.com/" id="menu4" accesskey="4">About</a></li>
<li><a href="http://www.free-css.com/" id="menu5" accesskey="5">Contact</a></li>
</ul>
</div>
<div id="logo">
<h1><a href="http://www.free-css.com/">Enter</a></h1>
<h2><a href="http://www.free-css.com/">Free CSS Templates</a></h2>
</div>
<div id="content">
<div id="colA">
<div id="welcome" class="boxedA">
<h2>Welcome to Enter!</h2>
<img src="enter-images/img10.jpg" alt="" width="130" height="150" style="float: right; margin: 1.5em 0 0 1.5em;" />
<p><strong>Enter</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 photos are 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. Enjoy :)</p>
</div>
<div id="news" class="boxedA">
<h2>Recent News & Updates</h2>
<ul>
<li>
<h3>26th February 2007</h3>
<p>Curabitur sit amet nulla. Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat, nulla. Sed ac leo. Pellentesque imperdiet. Donec placerat odio vel elit. Nullam ante orci, pellentesque eget, tempus quis, ultrices in, est.</p>
<p class="more"><a href="http://www.free-css.com/">Read More</a></p>
</li>
<li>
<h3>19th February 2007</h3>
<p>In posuere eleifend odio. Quisque semper augue mattis wisi amet. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id elementum congue.</p>
<p class="more"><a href="http://www.free-css.com/">Read More</a></p>
</li>
</ul>
</div>
</div>
<div id="colB">
<div class="boxedB">
<h2>Ipsum Dolorem</h2>
<ul>
<li><a href="http://www.free-css.com/">Maecenas luctus lectus</a></li>
<li><a href="http://www.free-css.com/">Etiam rhoncus volutpat</a></li>
<li><a href="http://www.free-css.com/">Donec dictum metus in</a></li>
<li><a href="http://www.free-css.com/">Integer gravida nibh</a></li>
<li><a href="http://www.free-css.com/">Etiam posuere augue sit</a></li>
<li><a href="http://www.free-css.com/">Mauris vulputate dolor</a></li>
<li><a href="http://www.free-css.com/">Nulla luctus eleifend</a></li>
<li><a href="http://www.free-css.com/">Praesent scelerisque</a></li>
<li><a href="http://www.free-css.com/">Ut nonummy rutrum sem</a></li>
<li><a href="http://www.free-css.com/">Pellentesque tempus quam</a></li>
</ul>
</div>
<div class="boxedC">
<h2>Veroeros Etiam </h2>
<ul>
<li><a href="http://www.free-css.com/">Donec dictum metus in</a></li>
<li><a href="http://www.free-css.com/">Integer gravida nibh</a></li>
<li><a href="http://www.free-css.com/">Etiam posuere augue sit</a></li>
<li><a href="http://www.free-css.com/">Mauris vulputate dolor</a></li>
<li><a href="http://www.free-css.com/">Nulla luctus eleifend</a></li>
<li><a href="http://www.free-css.com/">Praesent scelerisque</a></li>
<li><a href="http://www.free-css.com/">Ut nonummy rutrum sem</a></li>
<li><a href="http://www.free-css.com/">Pellentesque tempus quam</a></li>
<li><a href="http://www.free-css.com/">Fusce ultrices fringilla</a></li>
<li><a href="http://www.free-css.com/">Praesent mattis condimentum</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<p>Copyright © 2007 Enter. Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
</body>
</html>
Related examples in the same category