solitude
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Solitude</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body{margin:0px; padding:0px; background:#fffde4 url(solitude-images/bodyBg.jpg) repeat-x}
#mainWrap{width:100%; margin:0px; padding:0px; float:left; background:url(solitude-images/headBg.jpg) no-repeat}
#mainPanel{width:990px; margin:0px; padding:0px; float:left}
#logoWrap{width:100%; margin:0px; padding:0px; float:left}
h1{width:223px; height:48px; margin:20px 0 0 0; padding:0 110px; float:right; line-height:10px; text-indent:-9999px; background:url(solitude-images/logo.png) no-repeat}
#loginPanel{width:397px; margin:28px 0 0 0; padding:0 0 0 546px; float:left}
#loginPanel h2{width:397px; margin:0px; padding:0px; float:left; font-family:Georgia; font-size:27px; color:#497f35; line-height:31px; font-weight:normal}
#loginPanel input{width:175px; height:18px; margin:9px 0 0 0; padding:3px 0 0 5px; float:left; font-family:Arial; font-size:10px; color:#bb9d59; line-height:14px; border:0px; background:#f9f6d4}
#loginPanel .blank{width:25px; height:21px; margin:0px; padding:0px; float:left}
#loginPanel p{width:253px; margin:10px 0 0 0; padding:0px; float:left; font-family:Arial; font-size:16px; color:#ab8e4e; line-height:20px}
#loginPanel p a{color:#943415; text-decoration:none}
#loginPanel .login{width:66px; height:20px; margin:10px 0 0 0; padding:0px; float:left; font-family:Arial; font-size:11px; color:#943415; line-height:20px; text-align:center; text-decoration:none; background:url(solitude-images/loginBg.jpg) no-repeat}
#quots{width:990px; margin:145px 0 0 0; padding:0px; float:left}
#quots p{margin:0px; font-family:Georgia; font-size:28px; color:#497f35; line-height:32px; text-align:center; text-indent:50px}
#leftPanel{width:637px; margin:27px 0 0 0; padding:0 0 0 35px; float:left}
#leftPanel .about{width:604px; margin:0px; padding:0px; float:left}
#leftPanel .about h2{width:604px; margin:0px; padding:0px; float:left; font-family:Georgia; font-size:30px; color:#0b636b; line-height:34px; font-weight:normal}
#leftPanel .about h3{width:604px; margin:4px 0 0 0; padding:0px; float:left; font-family:Georgia; font-size:18px; color:#943415; line-height:32px; font-weight:normal}
#leftPanel .about p{width:590px; margin:3px 0 0 0; padding:0px; float:left; font-family:Arial; font-size:12px; color:#bb9d59; line-height:16px}
#leftPanel .about p span{font-weight:bold}
#leftPanel .about .date{width:600px; height:29px; margin:30px 0 0 0; padding:0px; float:left; background:#f9f6d4}
#leftPanel .about .date .left{width:139px; height:29px; margin:0px; padding:0 0 0 35px; float:left; font-family:Arial; font-size:11px; color:#bb9d59; line-height:30px; font-weight:bold; background:url(solitude-images/cal.jpg) no-repeat 11px 0}
#leftPanel .about .date .right{width:65px; height:29px; margin:0px; padding:0 0 0 38px; float:left; background:url(solitude-images/read.jpg) no-repeat 12px 0}
#leftPanel .about .date .right a{font-family:Arial; font-size:11px; color:#943415; line-height:30px; font-weight:bold; text-decoration:none}
#leftPanel .services{width:604px; margin:34px 0 0 0; padding:0px; float:left}
#leftPanel .services h2{width:604px; margin:0px; padding:0px; float:left; font-family:Georgia; font-size:24px; color:#2c787b; line-height:28px; font-weight:normal}
#leftPanel .services .pic{width:163px; height:202px; margin:15px 0 0 0; padding:0 0 0 28px; float:left; background:url(solitude-images/pic1.jpg) no-repeat}
#leftPanel .services .pic a{font-family:Arial; font-size:10px; color:#943415; line-height:14px; margin:146px 0 0 0; padding:0px; float:left; width:123px}
#leftPanel .services p{width:390px; margin:14px 0 0 0; padding:0 0 0 20px; float:left; font-family:Arial; font-size:12px; color:#bb9d59; line-height:16px}
#leftPanel .services p span{font-weight:bold}
#leftPanel .services h3{width:390px; margin:13px 0 0 0; padding:0 0 0 20px; float:left; font-family:Georgia; font-size:18px; color:#5c4527; line-height:22px; font-weight:normal}
#leftPanel .services ul{width:390px; margin:5px 0 0 0; padding:0 0 0 20px; float:left; display:block}
#leftPanel .services ul li{width:390px; margin:0px; padding:0px; float:left; display:block}
#leftPanel .services ul li a{width:372px; height:22px; margin:0px; padding:0 0 0 18px; float:left; font-family:Arial; font-size:11px; color:#943415; line-height:20px; font-weight:bold; text-decoration:none; border-bottom:#d8cd2f dashed 1px; background:url(solitude-images/listStyle.jpg) no-repeat 2px 6px}
#leftPanel .services ul li a.bottom{width:372px; height:22px; margin:0px; padding:0 0 0 18px; float:left; font-family:Arial; font-size:11px; color:#943415; line-height:20px; text-decoration:none; border-bottom:0px; background:url(solitude-images/listStyle.jpg) no-repeat 2px 6px}
#leftPanel .testimonial{width:590px; margin:0px; padding:0px; float:left}
#leftPanel .testimonial h2{width:590px; margin:30px 0 0 0; padding:0px; float:left; font-family:Georgia; font-size:24px; color:#2c787b; line-height:28px; font-weight:normal}
#leftPanel .testimonial p{width:590px; margin:13px 0 0 0; padding:0px; float:left; font-family:Arial; font-size:12px; color:#bb9d59; line-height:16px; text-indent:12px; background:url(solitude-images/quo.jpg) no-repeat}
#leftPanel .testimonial p span{font-weight:bold}
/*#leftPanel .testimonial p .dqo{width:11px; height:9px; text-indent:-9999px; background:url(solitude-images/quo.jpg) no-repeat}*/
#leftPanel .testimonial h3{width:100px; height:17px; margin:6px 0 0 0; padding:0 0 12px 28px; float:left; font-family:Arial; font-size:11px; color:#943415; font-weight:bold; background:url(solitude-images/testimIco.jpg) no-repeat}
#leftPanel .testimonial h3 span{font-weight:normal}
#rightPanel{width:266px; margin:40px 0 0 0; padding:0 0 74px 36px; float:left; background:url(solitude-images/rigthBg.jpg) no-repeat}
#rightPanel h2{width:262px; margin:0px; padding:0px; float:left; font-family:Georgia; font-size:24px; color:#0b636b; line-height:28px; font-weight:normal}
#rightPanel .view{width:58px; margin:3px 2px 0 0; padding:0 0 0 15px; float:right; font-family:Arial; font-size:11px; color:#943415; font-weight:bold; text-decoration:none; background:url(solitude-images/listStyle.jpg) no-repeat 0 4px}
#rightPanel .pic1{width:262px; height:68px; margin:15px 0 0 0; padding:0px; float:left; background:url(solitude-images/pic2.jpg) no-repeat}
#rightPanel .pic2{width:262px; height:68px; margin:13px 0 0 0; padding:0px; float:left; background:url(solitude-images/pic3.jpg) no-repeat}
#rightPanel .pic3{width:262px; height:68px; margin:13px 0 0 0; padding:0px; float:left; background:url(solitude-images/pic4.jpg) no-repeat}
#rightPanel .contacts{width:266px; margin:18px 0 0 0; padding:0px; float:left}
#rightPanel .contacts h2{padding:0 0 2px 0}
#rightPanel .contacts p{width:42px; height:19px; margin:12px 0 0 0; padding:0px; float:left; font-family:Arial; font-size:12px; font-weight:bold; color:#bb9d59; line-height:18px}
#rightPanel .contacts input{width:207px; height:16px; margin:12px 0 0 0; padding:2px 0 0 9px; float:left; font-family:Arial; font-size:10px; color:#000000; border:#e8e6c8 solid 1px; background:#f8f5d2}
#rightPanel .contacts a{width:93px; height:19px; margin:12px 0 0 0; padding:0px; float:left; font-family:Arial; font-size:11px; color:#943415; line-height:18px; text-align:center; text-decoration:none; background:url(solitude-images/contactsBg.jpg) no-repeat}
#rightPanel .contacts .blank{width:10px; height:19px; margin:0px; padding:0px; float:left}
#rightPanel .contacts .blank2{width:42px; height:19px; margin:12px 0 0 0; padding:0px; float:left}
#rightPanel .project{width:266px; margin:30px 0 0 0; padding:0px; float:left}
#rightPanel .project ul{width:260px; margin:8px 0 0 0; padding:0px; float:left; display:block}
#rightPanel .project ul li{width:260px; margin:0px; padding:0px; float:left; display:block}
#rightPanel .project ul li a{width:250px; height:21px; margin:0px; padding:0 0 0 10px; float:left; font-family:Arial; font-size:12px; color:#bb9d59; line-height:18px; text-decoration:none; background:url(solitude-images/listbg.jpg) no-repeat}
#rightPanel .project ul li a:hover{font-weight:bold; color:#943415}
#rightPanel .project ul li a.bottom{width:250px; height:20px; margin:0px; padding:0 0 0 10px; float:left; font-family:Arial; font-size:12px; color:#bb9d59; line-height:18px; text-decoration:none; background:url(solitude-images/listbg.jpg) no-repeat}
#rightPanel .project ul li a.bottom:hover{font-weight:bold; color:#943415}
#footPanel{width:923px; margin:0px; padding:25px 0 29px 0; float:left; background:url(solitude-images/footbg.jpg) no-repeat center top}
#footPanel .nav{width:923px; margin:0px; padding:0px; float:left}
#footPanel .nav ul{width:375px; margin:0 auto; padding:0px; display:block}
#footPanel .nav ul li{width:auto; margin:0px; float:left; padding:0px; display:block}
#footPanel .nav ul li .blank{width:auto; margin:0px; padding:0 7px 0 7px; float:left; font-family:Arial; font-size:11px; font-weight:bold; color:#943415}
#footPanel .nav ul li a{width:auto; margin:0px; float:left; padding:0px; font-family:Arial; font-size:11px; font-weight:bold; color:#943415; text-decoration:none}
#footPanel .copyright{width:923px; margin:3px 0 0 0; padding:0px; float:left; font-family:Arial; font-size:11px; color:#bb9d59; line-height:15px; text-align:center}
#footPanel .designInfo{width:923px; margin:3px 0 0 0; padding:0px; float:left; font-family:Arial; font-size:11px; font-weight:bold; color:#bb9d59; text-align:center}
#footPanel .designInfo a{color:#943415; text-decoration:none}
#footPanel .validation{width:923px; margin:4px 0 0 0; padding:0px; float:left}
#footPanel .validation ul{width:138px; margin:0 auto; padding:0px; display:block}
#footPanel .validation ul li{width:auto; margin:0px; padding:0px; float:left; display:block}
#footPanel .validation ul li .blank{width:6px; height:17px; margin:0px; padding:0px; float:left}
#footPanel .validation ul li a{width:66px; height:17px; margin:0px; padding:0px; float:left; font-family:Arial; font-size:10px; font-weight:bold; color:#943415; line-height:16px; text-align:center; text-decoration:none; background:url(solitude-images/validationBg.jpg) no-repeat}
#menu{width:990px; margin:32px 0 0 0; padding:0px; float:left}
#menu ul{width:450px; margin:0px; padding:0px; float:right; display:block}
#menu ul li{width:auto; margin:0px; padding:0px; float:left; display:block}
#menu ul li a{width:auto; height:18px; margin:0px; padding:0px; float:left; font-family:Arial; font-size:12px; color:#45ada9; line-height:13px; text-decoration:none; cursor:pointer}
#menu ul li a:hover{background:url(solitude-images/rightCurve.jpg) no-repeat right}
#menu ul li a span{width:auto; height:16px; margin:0px; padding:2px 8px 0 8px; float:left; cursor:pointer}
#menu ul li a:hover span{background:url(solitude-images/leftCurve.jpg) no-repeat left}
#menu ul li .blank{width:1px; height:18px; margin:0px; padding:0 5px 0 5px; float:left; background:url(solitude-images/mBlank.jpg) no-repeat center top}
</style>
<link rel="icon" href="solitude-images/icon.ico" />
<script type="text/javascript" src="iepngfix_tilebg.js"></script>
<script type="text/javascript" src="iepngfix.js"></script>
</head>
<body>
<div id="mainWrap">
<div id="mainPanel">
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/"><span>Home</span></a></li>
<li>
<div class="blank"></div>
</li>
<li><a href="http://www.free-css.com/"><span>About Us</span></a></li>
<li>
<div class="blank"></div>
</li>
<li><a href="http://www.free-css.com/"><span>Support</span></a></li>
<li>
<div class="blank"></div>
</li>
<li><a href="http://www.free-css.com/"><span>Forum</span></a></li>
<li>
<div class="blank"></div>
</li>
<li><a href="http://www.free-css.com/"><span>Development</span></a></li>
<li>
<div class="blank"></div>
</li>
<li><a href="http://www.free-css.com/"><span>Conact Us</span></a></li>
</ul>
</div>
<div id="logoWrap">
<h1>solitude</h1>
</div>
<div id="loginPanel">
<h2>User Login</h2>
<input name="name" type="text" value="User Name" onfocus="if(this.value=='User Name')this.value=''" onblur="if(this.value=='')this.value='User Name'"/>
<div class="blank"></div>
<input name="name" type="text" value="Password" onfocus="if(this.value=='Password')this.value=''" onblur="if(this.value=='')this.value='Password'"/>
<p>Not yet a Member? <a href="http://www.free-css.com/">Register Now</a></p>
<a href="http://www.free-css.com/" class="login">Login</a> </div>
<div id="quots">
<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet consectetur adipisci velit..."</p>
</div>
<div id="leftPanel">
<div class="about">
<h2>Somelines About Us</h2>
<h3>ltrices inh endrerit ac tempor idtellus uis quam uisque</h3>
<p><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla libero leo, suscipit acfaucibusnon.</span><br />
Etiam est. Etiam ac ipsum sed pede ultricies pretium. Nulla mi lacus, fringilla eu, pulvinar at, commodo eu, dolor. Nam porttitor viverra sapien. Pellentesque vitae augue et lorem laoreet .</p>
<div class="date">
<div class="left">Saturday, April 26, 2008 |</div>
<div class="right"><a href="http://www.free-css.com/">Read More</a></div>
</div>
</div>
<div class="services">
<h2>Our Spectrum of Services</h2>
<div class="pic"><a href="http://www.free-css.com/">Cras turpis duis at sapien eget nulla vulputate. </a></div>
<p><span>Donec accumsan porta risus.</span> Vestibulum sollicitudinlibero ut semper commodo, purus enim sollicitudin nulla, dictum vehicula diam lacus at purus. In egestas. </p>
<h3>Services</h3>
<ul>
<li><a href="http://www.free-css.com/">Nam congue quam non augue ivamus porttitor</a></li>
<li><a href="http://www.free-css.com/" class="bottom">Jam aongue buam n augue famus</a></li>
</ul>
<p><span>Pellentesque dolor.</span> Nunc congue est in ante mattis ultrices. liquam erat volutpat. Nam congue quam non augue. </p>
</div>
<div class="testimonial">
<h2>Testimonial</h2>
<p> <span>Nullam vel justo. Mauris viverra mattis neque.</span> Phasellus feugiat pede ut mauris uis orcies tibulum eleifend. Donec est purusiaculis acauctorNullam vel justo. Mauris viverra mattis neque. Phasellus feugiat pede ut mauris. Duis orci.</p>
<h3><span>by</span> David Jackson</h3>
<p><span>Vel justo. Mauris viverra mattis neque asellus feugiat pede ut mauris uis orcies tibulum</span> eleifend. Donec est purusiaculis acauctorNullam vel justo. Mauris viverra mattis neque. Phasellus feugiat pede ut mauris.</p>
<h3><span>by</span> Tom Sam</h3>
</div>
</div>
<div id="rightPanel">
<h2>Photo Stock</h2>
<div class="pic1"></div>
<a href="http://www.free-css.com/" class="view">view large</a>
<div class="pic2"></div>
<a href="http://www.free-css.com/" class="view">view large</a>
<div class="pic3"></div>
<a href="http://www.free-css.com/" class="view">view large</a>
<div class="contacts">
<h2>Quick Contact</h2>
<p>Name</p>
<input name="name" type="text" value="- enter your name -" onfocus="if(this.value=='- enter your name -')this.value=''" onblur="if(this.value=='')this.value='- enter your name -'"/>
<p>Email</p>
<input name="name" type="text" value="- enter your email -" onfocus="if(this.value=='- enter your email -')this.value=''" onblur="if(this.value=='')this.value='- enter your email -'"/>
<div class="blank2"></div>
<a href="http://www.free-css.com/">Need a Quote?</a>
<div class="blank"></div>
<a href="http://www.free-css.com/">Submit</a> </div>
<div class="project">
<h2>Projects Link</h2>
<ul>
<li><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet eros consequat </a></li>
<li><a href="http://www.free-css.com/">Consectetuer adipiscing elit</a></li>
<li><a href="http://www.free-css.com/">Etiam quis est ut diam viverra rhoncus</a></li>
<li><a href="http://www.free-css.com/">Fusce eros consequat </a></li>
<li><a href="http://www.free-css.com/">Cras eros massa blandit </a></li>
<li><a href="http://www.free-css.com/" class="bottom">Aoreet utdiam viverra</a></li>
</ul>
</div>
</div>
<div id="footPanel">
<div class="nav">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li>
<div class="blank">|</div>
</li>
<li><a href="http://www.free-css.com/">About Us</a></li>
<li>
<div class="blank">|</div>
</li>
<li><a href="http://www.free-css.com/">Suppor</a></li>
<li>
<div class="blank">|</div>
</li>
<li><a href="http://www.free-css.com/">Forum</a></li>
<li>
<div class="blank">|</div>
</li>
<li><a href="http://www.free-css.com/">Development</a></li>
<li>
<div class="blank">|</div>
</li>
<li><a href="http://www.free-css.com/">Conact Us</a></li>
</ul>
</div>
<div class="copyright"> Copyright Infirmation Goes Here. All Rights Reserved.</div>
<p class="designInfo">Design by <a href="http://www.templateworld.com/">TemplateWorld</a> and brought to you by <a href="http://www.smashingmagazine.com/">SmashingMagazine</a></p>
<div class="validation">
<ul>
<li><a href="http://validator.w3.org/check?uri=referer">xhtml</a></li>
<li>
<div class="blank"></div>
</li>
<li><a href="http://jigsaw.w3.org/css-validator/check/referer">css</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category