splatt
<!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>Splatt</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>
html,body{
margin:0;
padding:0;
border:0;
font:12px Arial, Helvetica, sans-serif;
color:#fff;
background:#B2D100}
body{
width:770px;
margin:0 auto}
a{
outline:none;
color:#fff;
font-weight:bold}
a:hover{
text-decoration:none}
#hd{
height:71px;
background:url(splatt-img/bghd.gif) 0 0 no-repeat;
padding:9px 0 0 0}
#hd ul{
margin:0;
padding:0;
list-style:none}
#hd #logo{
font-size:32px;
font-weight:bold;
width:auto;
padding:0 20px 0 0;
margin:0 0 0 64px;
width:150px;
background:url(splatt-img/bglogo.gif) right 0 no-repeat}
#hd #logo a{
display:block;
line-height:70px;
color:#fff;
text-decoration:none}
#hd #logo a:hover{
color:#B2D100}
#ct{
float:left;
width:474px}
#ct #men{
height:49px;
list-style:none;
padding:0;
margin:0 0 0 51px}
#ct #men li{
float:left;
margin:0 8px 0 0}
#ct #men a{
font-size:14px;
display:block;
font-weight:bold;
text-align:center;
color:#fff;
text-decoration:none;
line-height:49px}
#ct #men #m1{
background:url(splatt-img/bgm1.gif) 0 0 no-repeat;
width:66px}
#ct #men #m2{
background:url(splatt-img/bgm2.gif) 0 0 no-repeat;
width:67px}
#ct #men #m3{
background:url(splatt-img/bgm3.gif) 0 0 no-repeat;
width:77px}
#ct #men #m4{
background:url(splatt-img/bgm4.gif) 0 0 no-repeat;
width:79px}
#ct #men #m5{
background:url(splatt-img/bgm5.gif) 0 0 no-repeat;
width:76px}
#ct #men #m1 a:hover,#ct #men #m1 a.act{
background:url(splatt-img/bgm1o.gif) 0 0 no-repeat}
#ct #men #m2 a:hover,#ct #men #m2 a.act{
background:url(splatt-img/bgm2o.gif) 0 0 no-repeat}
#ct #men #m3 a:hover,#ct #men #m3 a.act{
background:url(splatt-img/bgm3o.gif) 0 0 no-repeat}
#ct #men #m4 a:hover,#ct #men #m4 a.act{
background:url(splatt-img/bgm4o.gif) 0 0 no-repeat}
#ct #men #m5 a:hover,#ct #men #m5 a.act{
background:url(splatt-img/bgm5o.gif) 0 0 no-repeat}
#ctc{
padding:0 0 0 64px;
width:410px;
position:relative}
#ctc h1{
font-size:14px;
margin:0;
padding:12px 0 10px 0}
#ctc p{
padding:0 0 13px 0;
margin:0;
line-height:140%}
#ctc h2{
font-size:13px;
margin:0;
padding:5px 0}
#ctc h3{
font-size:12px;
margin:0;
padding:5px 0}
#ctc ol,#ctc ul{
margin:0;
padding:0 0 13px 30px}
#ctc blockquote,#ctc code{
border:1px solid #87B200;
border-left:5px solid #87B200;
padding:0 10px;
margin:0 0 13px 17px;
background:#A8C801}
#ctc blockquote p{
padding:4px 0}
#ctc blockquote blockquote{
margin-bottom:0;
background:#B2D100}
#ctc code{
display:block;
padding:2px 10px;
color:#E64218}
#ctc b,#ctc strong{
background:#A8C801;
padding:0 3px}
#ctc em{
font-style:normal;
color:#E64218}
#ctr{
position:absolute;
margin:0 0 0 504px !important;
margin:0 0 0 453px;
z-index:1000;
width:268px}
#ctr dl,#ctr dt,#ctr dd,#ctr ul,#ctr ol{
width:268px;
margin:0;
padding:0;
list-style:none}
#ctr dl{
padding:0 0 0 9px;
background:url(splatt-img/bgdl.gif) 0 0 no-repeat}
#ctr dt{
padding:32px 0 10px 15px;
font-size:14px;
font-weight:bold}
#ctr dd{
width:200px;
padding:0 10px 10px 15px;
background:#97BD00 url(splatt-img/bgdd.gif) 0 bottom no-repeat}
#ctr dd img{
display:block;
float:right;
border:6px solid #BAD457;
margin:0 0 0 5px}
#ctr ol,#ctr ul{
padding:10px 0 0 35px}
#ctr ol li,#ctr ul li{
line-height:17px;
padding:0 0 0 10px}
#ctr ul li{
background:url(splatt-img/bgbllt.gif) left no-repeat}
#ctr a{
font-weight:normal}
#ctr h2{
font-size:14px;
margin:10px 54px 0 27px;
border-bottom:1px solid #97BD00;
padding:0 0 0 0}
#ft{
height:47px;
padding:39px 0 10px 64px;
clear:both;
background:url(splatt-img/bgft.jpg) 26px 0 no-repeat}
</style>
</head>
<body>
<div id="hd">
<ul>
<li id="logo"><a href="http://www.free-css.com/">SPLATT!</a></li>
</ul>
</div>
<div id="ct">
<div id="ctr">
<dl>
<dt><strong>About</strong></dt>
<dd><img src="splatt-img/profpic.gif" width="60" height="60" alt="" />Sed risus sapien, bibendum ac, tempor non, sodales vitae, mauris. Ut tincidunt nibh nec elit. Sed aliquet euismod magna. Nam felis tellus, ultrices vitae, suscipit in, nonummy vel, nisi. Praesent tortor felis, fringilla in, bibendum in, luctus vitae, risus.</dd>
</dl>
<h2>Submenu</h2>
<ul>
<li><a href="http://www.free-css.com/">Submenu item #1</a></li>
<li><a href="http://www.free-css.com/">Submenu item #2</a></li>
<li><a href="http://www.free-css.com/">Submenu item #3</a></li>
</ul>
<h2>Other stuff</h2>
<ol>
<li><a href="http://www.free-css.com/">Submenu item #1</a></li>
<li><a href="http://www.free-css.com/">Submenu item #2</a></li>
<li><a href="http://www.free-css.com/">Submenu item #3</a></li>
</ol>
</div>
<ul id="men">
<li id="m1"><a href="http://www.free-css.com/" class="act">Home</a></li>
<li id="m2"><a href="http://www.free-css.com/">Blog</a></li>
<li id="m3"><a href="http://www.free-css.com/">Portfolio</a></li>
<li id="m4"><a href="http://www.free-css.com/">About</a></li>
<li id="m5"><a href="http://www.free-css.com/">Contact</a></li>
</ul>
<div id="ctc">
<h1>Welcome</h1>
<p><b>Lorem ipsum dolor sit amet</b>, consectetuer adipiscing elit. Duis varius nibh quis odio luctus tempor. <a href="http://www.free-css.com/">Pellentesque habitant morbi</a> tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum volutpat rutrum magna. Curabitur nec turpis. Maecenas a orci id urna lobortis consectetuer. Fusce ligula. Fusce mattis, mauris et pulvinar imperdiet, nunc tellus posuere quam, luctus feugiat enim nulla in eros. Pellentesque ut neque. <em>Aliquam porta vestibulum justo. Sed metus urna, tristique at, iaculis nec, suscipit sit amet, est. Nunc mattis</em> quam in massa. Etiam vel nibh a erat pulvinar congue.</p>
<ul>
<li>Sed risus sapien, bibendum ac, tempor non, sodales vitae, mauris.</li>
<li>Sed risus sapien, bibendum ac, tempor non, sodales vitae, mauris.</li>
<li>Sed risus sapien, bibendum ac, tempor non, sodales vitae, mauris.</li>
</ul>
<blockquote>
<p>Sed risus sapien, bibendum ac, tempor non, sodales vitae, mauris. Ut tincidunt nibh nec elit. Sed aliquet euismod magna. Nam felis tellus, ultrices vitae, suscipit in, nonummy vel, nisi. Praesent tortor felis, fringilla in, bibendum in, luctus vitae, risus.</p>
<blockquote>
<p>Sed risus sapien, bibendum ac, tempor non, sodales vitae, mauris. Ut tincidunt nibh nec elit. Sed aliquet euismod magna. Nam felis tellus, ultrices vitae, suscipit in, nonummy vel, nisi. Praesent tortor felis, fringilla in, bibendum in, luctus vitae, risus. Phasellus vitae arcu. Donec rutrum diam quis risus vehicula gravida. Vestibulum <em>ante ipsum primis in</em> faucibus orci luctus et ultrices posuere cubilia Curae; Nullam sagittis. Vivamus erat. Duis tincidunt tristique nisl. Aliquam pellentesque diam nec massa. Ut tempor leo ac turpis. Nullam fringilla semper neque. Sed sollicitudin massa in ante.</p>
</blockquote>
<p>Phasellus vitae arcu. Donec rutrum diam quis risus vehicula gravida. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam sagittis. Vivamus erat. Duis tincidunt tristique nisl. Aliquam pellentesque diam nec massa. Ut tempor leo ac turpis. Nullam fringilla semper neque. Sed sollicitudin massa in ante.</p>
</blockquote>
<h2>Heading 2</h2>
<p><a href="http://www.free-css.com/">Pellentesque habitant morbi</a> Sed sed turpis vitae quam sollicitudin elementum. Sed feugiat quam eu turpis. Suspendisse pede. Sed bibendum justo et nunc. Ut porttitor neque eu lectus. Nunc felis. Phasellus auctor, lorem at tincidunt porttitor, magna arcu euismod metus, non laoreet lorem libero eget mauris. Curabitur non velit. Curabitur fermentum gravida ipsum. Suspendisse eget arcu eu lectus consequat pulvinar.</p>
<ol>
<li>Sed risus sapien, bibendum ac, tempor non, sodales vitae, mauris.</li>
<li>Sed risus sapien, bibendum ac, tempor non, sodales vitae, mauris.</li>
<li>Sed risus sapien, bibendum ac, tempor non, sodales vitae, mauris.</li>
</ol>
<h3>Heading 3</h3>
<p>Quisque pellentesque erat. Donec in felis. Donec venenatis risus a leo. Suspendisse in dui. Morbi interdum, pede id imperdiet dictum, massa mauris congue quam, id vestibulum nisl odio sed massa. Sed suscipit venenatis ante. <strong>Donec vulputate arcu luctus ipsum.</strong> Sed accumsan. Duis euismod arcu ac quam. Aliquam erat volutpat. Proin vestibulum, nibh sed sodales feugiat, lacus justo dictum neque, at malesuada diam quam non risus. Nullam.</p>
<p>To fit logo container to your size just edit css/main.css file to fit your needs:</p>
<code> #hd #logo{<br />
font-size:32px;<br />
font-weight:bold;<br />
width:auto;<br />
padding:0 20px 0 0;<br />
margin:0 0 0 64px;<br />
<b>width:150px; //edit here</b><br />
background:url(../splatt-img/bglogo.gif) right 0 no-repeat} </code> </div>
</div>
<div id="ft">Copyright 2007 FYFI. Designed by <a href="http://www.fyfi.net">FYFI</a>. Valid <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> & <a target="_blank" href="http://validator.w3.org/check?uri=referer">XHTML</a></div>
</body>
</html>
Related examples in the same category