anibanner01
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Anibanner01</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {
font-family: Tahoma,arial,helvetica,sans-serif;
font-size: 12px;
color: #333;
background-color : #666;
margin: 10px;
border: 0;
padding: 0;
}
#container {
margin: 0 auto 0 auto;
width: 765px;
background: #fff;
padding: 0;
font-size: 12px;
border: 1px solid #000000;
text-align: left;
}
#header {
width: 765px;
height: 180px;
background: #eee url("anibanner01-images/anibanner01.jpg") no-repeat ;
}
#content {
margin: 0 ;
background: #fff;
padding: 8px;
}
#navcontainer
{
width: 765px;
margin-bottom: 20px;
border-top: 2px solid #eee;
z-index: 1;
font-size: 12px;
}
#navcontainer ul
{
list-style-type: none;
text-align: left;
margin: -8px 0 0 15px;
padding: 0;
position: relative;
z-index: 2;
}
#navcontainer li
{
display: inline;
text-align: center;
margin: 0 5px;
}
#navcontainer li a
{
padding: 1px 7px;
color: #666;
background-color: #E7ECF2;
border: 1px solid #ccc;
text-decoration: none;
}
#navcontainer li a:hover
{
color: #000;
border: 1px solid #666;
border-top: 2px solid #666;
border-bottom: 2px solid #666;
}
#navcontainer li a#current
{
color: #000;
border: 1px solid #666;
border-top: 2px solid #666;
border-bottom: 2px solid #666;
}
#navcontainer li a span {display: none}
#navcontainer li a:hover span{
display:block;
position:absolute;
top: -160px;
left:392px;
width:105px;
background-color:transparent;
color:#95A8B7;
text-align: center;
padding: 10px;
text-decoration: none;
font-family: Verdana, Arial, Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
}
.quotes1 {
color:#666;
padding: 5px;
width:260px;
height: 80px;
background:#f9f9f9;
float:left;
margin: 50px 20px 20px 20px;
font-family: Verdana, Arial, Helvetica,sans-serif;
font-size: 15px;
line-height:20px;
text-align: left;
border: 2px solid #eee;
overflow: auto;
}
.corona {
background: transparent;
margin:0 auto 0 auto;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
}
.corona a:link, a:visited, a:active {
color : #000000;
text-decoration : underline;
background-color : transparent;
}
.corona a:hover {
color : #4D6A7A;
text-decoration : underline;
background-color : transparent;
}
.corona h1, .corona p {margin:0 10px;}
.corona h1 {
font-family: Georgia, "Times New Roman",Times, serif ;
font-size: 20px;
color:#0A2A52;
letter-spacing: -1px;
font-weight:normal;
line-height:80%;
padding-bottom: 6px;
margin-left: 10px;
}
.corona p {padding-bottom: 15px;}
.corona .top, .corona .bottom {
display:block;
background:transparent;
font-size:1px;
}
.corona .b1, .corona .b2, .corona .b3, .corona .b4, .corona .b5 {
display:block;
overflow:hidden;
height:1px;
background:#fff;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
}
.corona .b1 {margin:0 5px; background:#ccc;}
.corona .b2 {margin:0 4px; background:#CCD0D4;}
.corona .b3 {margin:0 3px; background:#CCD0D4;}
.corona .b4 {margin:0 2px; background:#CCD0D4;}
.corona .b5 {margin:0 1px; background:#CCD0D4;}
.corona .boxcontent {
display:block;
padding: 20px;
background:#fff url("anibanner01-images/bg01.jpg") repeat-x bottom left;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
text-align: justify;
margin: 0;
}
.float-right {
float: right;
position: relative;
font-size: 10px;
font-weight: bold ;
width: 240px;
margin: -15px 0 4px 15px;
padding: 0 4px 0 12px;
background: #F5F5F5;
border: 2px solid #cccccc;
}
.float-right ul {
position:relative;
color:#000080;
line-height: 12px;
font-weight: bold;
padding: 0px 0 0 12px;
}
.float-right li {
list-style-type: square;
margin: 3px;
line-height: 10px;
}
.float-right li .black {
color: #000000;
}
#copyright {
margin-top: 10px;
height:20px;
background-color: #0A2A52;
font: bold 9px Tahoma, Arial, sans-serif;
color: #ffffff;
letter-spacing: 4px;
padding: 5px 0 0 0;
text-align: center;
}
#copyright a {
color: #ffffff;
}
.blurb{
float: left;
width: 330px;
margin: 5px 12px 5px 6px;
padding: 9px;
font: 11px Arial, Sans-serif;
border-left: 1px dashed #aaa;
border-top: 1px solid #aaa;
border-bottom: 1px solid #aaa;
border-right: 1px solid #aaa;
background: #E7ECF2;
}
.blurb ul {
list-style-type: square;
color:#000080;
position:relative;
font-weight: bold;
padding: 10px 0 0 17px;
margin-left: 0;
margin-top: 0px;
}
.blurb ul .black {
color: #000000;
}
.bkbig {
font-family: Georgia, "Times New Roman",Times, serif ;
color:#0A2A52;
font-size:20px;
}
h2 {
font-family: Georgia, "Times New Roman",Times, serif ;
font-size: 18px;
color:#0A2A52;
font-weight:normal;
padding-bottom: 0px;
margin: 5px 0px 3px 0px;
}
div.credit {
text-align: right;
margin: 0 50px 0 0;
color: #999999;
font-size: 10px;
padding: 3px;
}
div.credit a{
color:#999999;
}
.small {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 9px;
color : #000000;
text-decoration : underline;
font-style : normal;
}
.small a:link {color : #000080;}
.small a:hover {color : #000000;}
.botsmall {
font-family : Verdana, Arial, Helvetica, sans-serif;
text-align: center;
font-size : 9px;
color : #666666;
text-decoration : none;
font-weight : bold;
}
.botsmall a:link {color : #666;}
.botsmall a:hover {color : #000000;}
.linkcent {
text-align: center;
margin: 15px 0 8px 0;
font-size: 110%;
font-weight: bold;
}
</style>
</head>
<body>
<div id="container">
<div id="header"> <span class="quotes1"> "Lorem ipsum dolor sit <b>consectetuer adipiscing</b> sed diem ibh euismod<b> tincidunt ut </b>dolore magna." </span> </div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="http://www.free-css.com/" id="current">Home</a>Back to the main page.</span></a></li>
<li><a href="http://www.free-css.com/">Consectetuer<span>This is the link to consectetuer.</span></a></li>
<li><a href="http://www.free-css.com/">Dignissim Qui Blandit<span>Anyone for dignissim qui blandit?</span></a></li>
<li><a href="http://www.free-css.com/">Vero Eros Et<span>Did you vero your eros et today?</span></a></li>
<li><a href="http://www.free-css.com/">Duis Te Feugi<span>There is a duis in my te feugi. </span></a></li>
</ul>
</div>
<div id="content">
<div class="corona"> <b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><b class="b5"></b></b>
<div class="float-right">
<h2 class="noprint">Features:</h2>
<ul>
<li><span class="black"><a href="http://validator.w3.org/check?uri=referer">Valid XHTML 1.0 Strict</a></span></li>
<li><span class="black">It has a bird on it.</span></li>
<li><span class="black">It is open source with no restrictions</span></li>
<li><span class="black">It has a bird on it.</span></li>
<li><span class="black">It is free so the price is right.</span></li>
</ul>
<div class="linkcent"> <a href="http://www.free-css.com/">Dignissim Qui Blandit</a> </div>
</div>
<div class="boxcontent">
<h1>A template with a bird on it. You bet.</h1>
<p> This template was inspired by elements of a number of templates here as well
as the work of Stu Nicholls (the nifty borders),
and Seth Gunderson (the original code for the menu)
and the bird came from <a href="http://www.free-css.com/">Stock.XCHNG</a>. The CSS is my "working" version and is a friggin mess
- but it does <a href="http://jigsaw.w3.org/css-validator/check/referer">validate</a>. The template is free for use with no restrictions
but leaving the link to my website in there somewhere would be nice.
My website is AnimatedBanner.com and
we specialize in sane, unobtrusive banner design as well as many types of website development. If
you need professional help with this template or need a custom banner or template design, you can contact
me by viewing my profile or via the contact form on AnimatedBanner.com. Okay...
enough shameless self promotion and on to Lorem ipsum dolor. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad
minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut
aliquip ex ea commodo consequat. Duis te feugi facilisi.</p>
<h1>Lorem ipsum dolor sit amet, consectetuer adipiscing...</h1>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad
minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut
aliquip ex ea commodo consequat. Duis te feugi facilisi. </p>
<div class="blurb"><span class="bkbig">Other Stuff:</span><br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. <a href="http://www.free-css.com/">Ut wisis enim</a> ad
minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut
aliquip ex ea commodo consequat :
<ul>
<li><span class="black">Dolore magna aliguam erat volutpat.</span></li>
<li><span class="black">Ex ea commodo consequat.</span></li>
<li><span class="black">Vulputate velit esse molestie consequa.</span></li>
<li><span class="black">Tution ullam corper suscipit.</span></li>
<li><span class="black">Suscipit lobortis nisi ut.</span></li>
<li><span class="black">Norem ipsum dolor sit amet, consectetuer.</span></li>
</ul>
<div class="linkcent"> <a href="http://www.free-css.com/">Dignissim Qui Blandit</a> </div>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed</p>
<p>Norem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad
minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut
aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
</div>
<b class="bottom"><b class="b5"></b><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b> </div>
</div>
<div class="botsmall"> | <a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">Consectetuer</a> | <a href="http://www.free-css.com/">Dignissim Qui Blandit</a> | <a href="http://www.free-css.com/">Vero Eros Et</a> | <a href="http://www.free-css.com/">Duis Te Feugi</a> | </div>
<div id="copyright"> Copyright 2006 yoursite.com | Design by <a href="http://www.animatedbanner.com/">AnimatedBanner.com</a> </div>
</div>
</body>
</html>
Related examples in the same category