solitude : Design 7 « Templates « HTML / CSS






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&nbsp;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&nbsp;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&nbsp;&nbsp;|</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

1.SimpleSimple
2.simplestyle_1
3.simplestyle_2
4.simplestyle_3
5.simplestyle_4
6.simplestyle_5
7.simplestyle_6
8.pomodoro
9.portcentral
10.portfolio-extended
11.portfolio
12.postscriptum
13.powderpuff
14.power
15.precision
16.predilection
17.premiumseries
18.prepaid
19.presented
20.pressurized
21.prideandprejudice
22.primitiveelement
23.printing
24.pristine
25.private-lawyer-co
26.product-landing-page
27.production
28.ProductPackage
29.programme
30.progress
31.projection
32.proofing
33.Prosperity
34.province
35.purensimple
36.purgatory_shuffle
37.puzzled
38.quadrangle
39.quartz-istorage
40.quatrain
41.racetrackplaya
42.radiance
43.rainonleaves
44.ramblingsoul-2
45.ramblingsoul-9
46.ramblingsoul3
47.ramblingsoul4
48.ramblingsoul5
49.ramblingsoul7
50.ramblingsoul_2
51.ramblingsoul_3
52.random
53.rational
54.realize
55.realone
56.rebel-magazine
57.reckoning
58.recreations
59.reference
60.regeneracy
61.rehabilitation
62.reinvent
63.replenish
64.republic
65.resizeme
66.resplendissant
67.revolt-01
68.ridinghood
69.rockband
70.rogue
71.Rothko
72.route66
73.rust
74.safe-as-houses
75.sahara
76.sampling
77.Sapphire
78.schemermag
79.scotchmark
80.scribbled
81.secretlab
82.seduction
83.selcouth
84.sensa
85.settings
86.shallowgrunge
87.shalom-typo
88.shape
89.she
90.showcase
91.sifiso
92.silenceandharmony
93.SILK
94.Simpatico
95.sindromk
96.singapore
97.sinorcaish
98.six-oh-six
99.sixpence
100.sixties_style
101.skipopia
102.skitemplate
103.sky
104.sliced
105.slight_amnesia
106.socialnet
107.softenedcells
108.solemnity
109.soloss
110.solutions
111.somewhere-peaceful
112.soniatemplate
113.space
114.spaced
115.spasaloon
116.spatter
117.speedracing
118.spheroids
119.spidercity
120.splash
121.splatt
122.spontaneous